@skyux/code-examples 15.0.0-alpha.5 → 15.0.0-alpha.7

package/fesm2022/skyux-code-examples.mjs

@@ -13,7 +13,7 @@ import { SkyModalInstance, SkyModalModule, SkyModalService, SkyConfirmService, S
 import * as i1$2 from '@skyux/tabs';
 import { SkyTabsModule, SkySectionedFormService, SkySectionedFormMessageType, SkySectionedFormModule, SkyVerticalTabsetModule } from '@skyux/tabs';
 import * as i1$4 from '@skyux/ag-grid';
-import { SkyAgGridService, SkyCellType, SkyAgGridModule, SkyAgGridHeaderInfo } from '@skyux/ag-grid';
+import { SkyAgGridService, SkyCellType, defineSkyAgGridColDef, SkyAgGridModule, SkyAgGridHeaderInfo } from '@skyux/ag-grid';
 import * as i1$5 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';
@@ -33,7 +33,7 @@ import * as i2$2 from '@skyux/forms';
 import { SkyCheckboxModule, SkyInputBoxModule, SkyFormErrorModule, SkyRadioModule, SkyCharacterCounterModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileDropModule, SkySelectionBoxModule, SkyToggleSwitchModule } from '@skyux/forms';
 import * as i1$6 from '@skyux/help-inline';
 import { SkyHelpInlineModule } from '@skyux/help-inline';
-import * as i1$b from '@angular/router';
+import * as i1$c from '@angular/router';
 import { ActivatedRoute, Router, NavigationEnd, RouterModule } from '@angular/router';
 import * as i2$5 from '@blackbaud/angular-tree-component';
 import { TreeModule } from '@blackbaud/angular-tree-component';
@@ -46,35 +46,35 @@ import { SkyAvatarModule } from '@skyux/avatar';
 import { SkyChart, SkyChartAxisCategory, SkyChartAxisValue, SkyChartBar, SkyChartBarSeries } from '@skyux/charts';
 import * as i2$7 from '@skyux/colorpicker';
 import { SkyColorpickerModule, SkyColorpickerMessageType } from '@skyux/colorpicker';
-import * as i3$1 from '@skyux/core';
+import * as i1$9 from '@skyux/core';
 import { SkyIdModule, SkyMediaQueryService, SkyResponsiveHostDirective, SkyNumericModule, SkyUIConfigService, SkyHelpService } from '@skyux/core';
-import * as i1$9 from '@skyux/icon';
+import * as i1$a 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';
+import * as i1$b from '@skyux/errors';
 import { SkyErrorModule, SkyErrorModalService } from '@skyux/errors';
 import { SkyFlyoutService } from '@skyux/flyout';
 import * as i2$a from '@skyux/validation';
 import { SkyValidators, SkyEmailValidationModule, SkyUrlValidationModule } from '@skyux/validation';
-import * as i3$2 from '@skyux/inline-form';
+import * as i3$1 from '@skyux/inline-form';
 import { SkyInlineFormButtonLayout, SkyInlineFormModule } from '@skyux/inline-form';
-import * as i3$3 from '@skyux/navbar';
+import * as i3$2 from '@skyux/navbar';
 import { SkyNavbarModule } from '@skyux/navbar';
-import * as i1$c from '@skyux/pages';
+import * as i1$d from '@skyux/pages';
 import { SkyActionHubModule, SkyPageModule } from '@skyux/pages';
 import * as i5 from '@skyux/split-view';
 import { SkySplitViewMessageType, SkySplitViewModule } from '@skyux/split-view';
-import * as i1$d from '@skyux/tiles';
+import * as i1$e from '@skyux/tiles';
 import { SkyTilesModule } from '@skyux/tiles';
-import * as i3$4 from '@skyux/phone-field';
+import * as i3$3 from '@skyux/phone-field';
 import { SkyPhoneFieldModule } from '@skyux/phone-field';
-import * as i1$e from '@skyux/progress-indicator';
+import * as i1$f from '@skyux/progress-indicator';
 import { SkyProgressIndicatorModule, SkyProgressIndicatorMessageType } from '@skyux/progress-indicator';
-import * as i1$f from '@skyux/router';
+import * as i1$g from '@skyux/router';
 import { SkyHrefModule } from '@skyux/router';
 import * as i2$9 from '@skyux/text-editor';
 import { SkyTextEditorModule, SkyRichTextDisplayModule } from '@skyux/text-editor';
@@ -429,7 +429,7 @@ let EditModalComponent$2 = class EditModalComponent {
         this.gridOptions = inject(SkyAgGridService).getEditableGridOptions({
             gridOptions: {
                 columnDefs: [
-                    {
+                    defineSkyAgGridColDef({
                         colId: 'markInactiveAction',
                         headerName: 'Mark inactive',
                         type: SkyCellType.Template,
@@ -437,8 +437,8 @@ let EditModalComponent$2 = class EditModalComponent {
                         cellRendererParams: {
                             template: this.markInactiveAction,
                         },
-                    },
-                    {
+                    }),
+                    defineSkyAgGridColDef({
                         field: 'name',
                         headerName: 'Name',
                         type: SkyCellType.Text,
@@ -454,8 +454,8 @@ let EditModalComponent$2 = class EditModalComponent {
                             },
                         },
                         editable: true,
-                    },
-                    {
+                    }),
+                    defineSkyAgGridColDef({
                         field: 'age',
                         headerName: 'Age',
                         type: SkyCellType.Number,
@@ -472,14 +472,14 @@ let EditModalComponent$2 = class EditModalComponent {
                             },
                         },
                         editable: true,
-                    },
+                    }),
                     {
                         field: 'startDate',
                         headerName: 'Start date',
                         type: SkyCellType.Date,
                         sort: 'asc',
                     },
-                    {
+                    defineSkyAgGridColDef({
                         field: 'endDate',
                         headerName: 'End date',
                         type: SkyCellType.Date,
@@ -489,8 +489,8 @@ let EditModalComponent$2 = class EditModalComponent {
                                 skyComponentProperties: { minDate: params.data.startDate },
                             };
                         },
-                    },
-                    {
+                    }),
+                    defineSkyAgGridColDef({
                         field: 'department',
                         headerName: 'Department',
                         type: SkyCellType.Autocomplete,
@@ -510,8 +510,8 @@ let EditModalComponent$2 = class EditModalComponent {
                                 this.#clearJobTitle(event.node);
                             }
                         },
-                    },
-                    {
+                    }),
+                    defineSkyAgGridColDef({
                         field: 'jobTitle',
                         headerName: 'Title',
                         type: SkyCellType.Autocomplete,
@@ -525,7 +525,7 @@ let EditModalComponent$2 = class EditModalComponent {
                             }
                             return editParams;
                         },
-                    },
+                    }),
                     {
                         colId: 'validationCurrency',
                         field: 'validationCurrency',
@@ -533,7 +533,7 @@ let EditModalComponent$2 = class EditModalComponent {
                         type: [SkyCellType.CurrencyValidator],
                         editable: true,
                     },
-                    {
+                    defineSkyAgGridColDef({
                         colId: 'validationDate',
                         field: 'validationDate',
                         headerName: 'Validation date',
@@ -545,7 +545,7 @@ let EditModalComponent$2 = class EditModalComponent {
                             },
                         },
                         editable: true,
-                    },
+                    }),
                 ],
                 onGridReady: (gridReadyEvent) => {
                     this.#gridApi.set(gridReadyEvent.api);
@@ -597,14 +597,14 @@ class AgGridDataEntryGridBasicExampleComponent {
         this.gridData = signal(AG_GRID_DEMO_DATA$b, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "gridData" }] : /* istanbul ignore next */ []));
         this.#columnDefs = [
-            {
+            defineSkyAgGridColDef({
                 field: 'selected',
                 type: SkyCellType.RowSelector,
                 cellRendererParams: {
                     // Could be a SkyAppResourcesService.getString call that returns an observable.
                     label: (data) => of(`Select ${data.name}`),
                 },
-            },
+            }),
             {
                 colId: 'context',
                 maxWidth: 50,
@@ -615,7 +615,7 @@ class AgGridDataEntryGridBasicExampleComponent {
                     headerHidden: true,
                 },
             },
-            {
+            defineSkyAgGridColDef({
                 field: 'name',
                 headerName: 'Name',
                 type: SkyCellType.Text,
@@ -625,8 +625,8 @@ class AgGridDataEntryGridBasicExampleComponent {
                         validatorMessage: `Value exceeds maximum length`,
                     },
                 },
-            },
-            {
+            }),
+            defineSkyAgGridColDef({
                 field: 'age',
                 headerName: 'Age',
                 type: SkyCellType.Number,
@@ -637,7 +637,7 @@ class AgGridDataEntryGridBasicExampleComponent {
                     },
                 },
                 maxWidth: 60,
-            },
+            }),
             {
                 field: 'startDate',
                 headerName: 'Start date',
@@ -666,7 +666,7 @@ class AgGridDataEntryGridBasicExampleComponent {
                 headerName: 'Validation currency',
                 type: [SkyCellType.CurrencyValidator],
             },
-            {
+            defineSkyAgGridColDef({
                 colId: 'validationDate',
                 field: 'validationDate',
                 headerName: 'Validation date',
@@ -677,7 +677,7 @@ class AgGridDataEntryGridBasicExampleComponent {
                         validatorMessage: 'Enter a future date',
                     },
                 },
-            },
+            }),
         ];
         this.#modalSvc = inject(SkyModalService);
         this.#gridApi = signal(undefined, /* @ts-ignore */
@@ -920,7 +920,7 @@ let EditModalComponent$1 = class EditModalComponent {
                         type: SkyCellType.Date,
                         sort: 'asc',
                     },
-                    {
+                    defineSkyAgGridColDef({
                         field: 'endDate',
                         headerName: 'End date',
                         type: SkyCellType.Date,
@@ -932,8 +932,8 @@ let EditModalComponent$1 = class EditModalComponent {
                                 },
                             };
                         },
-                    },
-                    {
+                    }),
+                    defineSkyAgGridColDef({
                         field: 'department',
                         headerName: 'Department',
                         type: SkyCellType.Autocomplete,
@@ -953,8 +953,8 @@ let EditModalComponent$1 = class EditModalComponent {
                                 this.#clearJobTitle(event.node);
                             }
                         },
-                    },
-                    {
+                    }),
+                    defineSkyAgGridColDef({
                         field: 'jobTitle',
                         headerName: 'Title',
                         type: SkyCellType.Autocomplete,
@@ -968,7 +968,7 @@ let EditModalComponent$1 = class EditModalComponent {
                             }
                             return editParams;
                         },
-                    },
+                    }),
                     {
                         colId: 'validationCurrency',
                         field: 'validationCurrency',
@@ -976,7 +976,7 @@ let EditModalComponent$1 = class EditModalComponent {
                         type: [SkyCellType.CurrencyValidator],
                         editable: true,
                     },
-                    {
+                    defineSkyAgGridColDef({
                         colId: 'validationDate',
                         field: 'validationDate',
                         headerName: 'Validation date',
@@ -988,7 +988,7 @@ let EditModalComponent$1 = class EditModalComponent {
                             },
                         },
                         editable: true,
-                    },
+                    }),
                 ],
                 onGridReady: (gridReadyEvent) => {
                     this.#gridApi.set(gridReadyEvent.api);
@@ -1124,14 +1124,14 @@ let ViewGridComponent$3 = class ViewGridComponent {
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         this.viewId = 'dataEntryGridWithDataManagerView';
         this.#columnDefs = [
-            {
+            defineSkyAgGridColDef({
                 field: 'selected',
                 type: SkyCellType.RowSelector,
                 cellRendererParams: {
                     // Could be a SkyAppResourcesService.getString call that returns an observable.
                     label: (data) => of(`Select ${data.name}`),
                 },
-            },
+            }),
             {
                 colId: 'context',
                 maxWidth: 50,
@@ -1179,7 +1179,7 @@ let ViewGridComponent$3 = class ViewGridComponent {
                 headerName: 'Validation currency',
                 type: [SkyCellType.CurrencyValidator],
             },
-            {
+            defineSkyAgGridColDef({
                 field: 'validationDate',
                 headerName: 'Validation date',
                 type: [SkyCellType.Date, SkyCellType.Validator],
@@ -1189,7 +1189,7 @@ let ViewGridComponent$3 = class ViewGridComponent {
                         validatorMessage: 'Please enter a future date',
                     },
                 },
-            },
+            }),
         ];
         this.noRowsTemplate = `<div class="sky-theme-font-body-deemphasized-m">No results found.</div>`;
         this.#dataManagerSvc = inject(SkyDataManagerService);
@@ -1573,7 +1573,7 @@ class AgGridDataEntryGridFocusExampleComponent {
         this.gridOptions = inject(SkyAgGridService).getEditableGridOptions({
             gridOptions: {
                 columnDefs: [
-                    {
+                    defineSkyAgGridColDef({
                         field: 'name',
                         headerName: 'Name',
                         type: SkyCellType.Text,
@@ -1584,8 +1584,8 @@ class AgGridDataEntryGridFocusExampleComponent {
                                 validatorMessage: `Value exceeds maximum length`,
                             },
                         },
-                    },
-                    {
+                    }),
+                    defineSkyAgGridColDef({
                         field: 'age',
                         headerName: 'Age',
                         type: SkyCellType.Number,
@@ -1597,7 +1597,7 @@ class AgGridDataEntryGridFocusExampleComponent {
                             },
                         },
                         maxWidth: 60,
-                    },
+                    }),
                     {
                         field: 'startDate',
                         headerName: 'Start date',
@@ -1631,7 +1631,7 @@ class AgGridDataEntryGridFocusExampleComponent {
                         type: [SkyCellType.CurrencyValidator],
                         editable: true,
                     },
-                    {
+                    defineSkyAgGridColDef({
                         colId: 'validationDate',
                         field: 'validationDate',
                         headerName: 'Validation date',
@@ -1643,7 +1643,7 @@ class AgGridDataEntryGridFocusExampleComponent {
                                 validatorMessage: 'Enter a future date',
                             },
                         },
-                    },
+                    }),
                 ],
                 focusGridInnerElement: (params) => {
                     params.api.startEditingCell({
@@ -1855,7 +1855,7 @@ class EditModalComponent {
         this.gridOptions = inject(SkyAgGridService).getEditableGridOptions({
             gridOptions: {
                 columnDefs: [
-                    {
+                    defineSkyAgGridColDef({
                         field: 'name',
                         headerName: 'Name',
                         type: SkyCellType.Text,
@@ -1871,8 +1871,8 @@ class EditModalComponent {
                             },
                         },
                         editable: true,
-                    },
-                    {
+                    }),
+                    defineSkyAgGridColDef({
                         field: 'age',
                         headerName: 'Age',
                         type: SkyCellType.Number,
@@ -1889,14 +1889,14 @@ class EditModalComponent {
                             },
                         },
                         editable: true,
-                    },
+                    }),
                     {
                         field: 'startDate',
                         headerName: 'Start date',
                         type: SkyCellType.Date,
                         sort: 'asc',
                     },
-                    {
+                    defineSkyAgGridColDef({
                         field: 'endDate',
                         headerName: 'End date',
                         type: SkyCellType.Date,
@@ -1906,8 +1906,8 @@ class EditModalComponent {
                                 skyComponentProperties: { minDate: params.data.startDate },
                             };
                         },
-                    },
-                    {
+                    }),
+                    defineSkyAgGridColDef({
                         field: 'department',
                         headerName: 'Department',
                         type: SkyCellType.Autocomplete,
@@ -1927,8 +1927,8 @@ class EditModalComponent {
                                 this.#clearJobTitle(event.node);
                             }
                         },
-                    },
-                    {
+                    }),
+                    defineSkyAgGridColDef({
                         field: 'jobTitle',
                         headerName: 'Title',
                         type: SkyCellType.Autocomplete,
@@ -1942,7 +1942,7 @@ class EditModalComponent {
                             }
                             return editParams;
                         },
-                    },
+                    }),
                     {
                         colId: 'validationCurrency',
                         field: 'validationCurrency',
@@ -1950,7 +1950,7 @@ class EditModalComponent {
                         type: [SkyCellType.CurrencyValidator],
                         editable: true,
                     },
-                    {
+                    defineSkyAgGridColDef({
                         colId: 'validationDate',
                         field: 'validationDate',
                         headerName: 'Validation date',
@@ -1962,7 +1962,7 @@ class EditModalComponent {
                             },
                         },
                         editable: true,
-                    },
+                    }),
                 ],
                 onGridReady: (gridReadyEvent) => {
                     this.#gridApi.set(gridReadyEvent.api);
@@ -2029,14 +2029,14 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
         this.gridOptions = inject(SkyAgGridService).getGridOptions({
             gridOptions: {
                 columnDefs: [
-                    {
+                    defineSkyAgGridColDef({
                         field: 'selected',
                         type: SkyCellType.RowSelector,
                         cellRendererParams: {
                             // Could be a SkyAppResourcesService.getString call that returns an observable.
                             label: (data) => of(`Select ${data.name}`),
                         },
-                    },
+                    }),
                     {
                         colId: 'context',
                         maxWidth: 50,
@@ -2047,7 +2047,7 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
                             headerHidden: true,
                         },
                     },
-                    {
+                    defineSkyAgGridColDef({
                         field: 'name',
                         headerName: 'Name',
                         type: SkyCellType.Text,
@@ -2060,8 +2060,8 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
                         headerComponentParams: {
                             inlineHelpComponent: InlineHelpComponent$1,
                         },
-                    },
-                    {
+                    }),
+                    defineSkyAgGridColDef({
                         field: 'age',
                         headerName: 'Age',
                         type: SkyCellType.Number,
@@ -2075,7 +2075,7 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
                         headerComponentParams: {
                             inlineHelpComponent: InlineHelpComponent$1,
                         },
-                    },
+                    }),
                     {
                         field: 'startDate',
                         headerName: 'Start date',
@@ -2119,7 +2119,7 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
                             inlineHelpComponent: InlineHelpComponent$1,
                         },
                     },
-                    {
+                    defineSkyAgGridColDef({
                         colId: 'validationDate',
                         field: 'validationDate',
                         headerName: 'Validation date',
@@ -2133,7 +2133,7 @@ class AgGridDataEntryGridInlineHelpExampleComponent {
                         headerComponentParams: {
                             inlineHelpComponent: InlineHelpComponent$1,
                         },
-                    },
+                    }),
                 ],
                 onGridReady: (gridReadyEvent) => {
                     this.#gridApi.set(gridReadyEvent.api);
@@ -2372,14 +2372,14 @@ class AgGridDataGridBasicMultiselectExampleComponent {
     constructor() {
         this.gridData = AG_GRID_DEMO_DATA$7;
         this.#columnDefs = [
-            {
+            defineSkyAgGridColDef({
                 field: 'selected',
                 type: SkyCellType.RowSelector,
                 cellRendererParams: {
                     // Could be a SkyAppResourcesService.getString call that returns an observable.
                     label: (data) => of(`Select ${data.name}`),
                 },
-            },
+            }),
             {
                 colId: 'context',
                 maxWidth: 50,
@@ -2923,7 +2923,7 @@ let ViewGridComponent$2 = class ViewGridComponent {
         this.viewId = 'dataGridMultiselectWithDataManagerView';
         this.noRowsTemplate = `<div class="sky-deemphasized">No results found.</div>`;
         this.#columnDefs = [
-            {
+            defineSkyAgGridColDef({
                 field: 'selected',
                 type: SkyCellType.RowSelector,
                 suppressMovable: true,
@@ -2933,7 +2933,7 @@ let ViewGridComponent$2 = class ViewGridComponent {
                     // Could be a SkyAppResourcesService.getString call that returns an observable.
                     label: (data) => of(`Select ${data.name}`),
                 },
-            },
+            }),
             {
                 colId: 'context',
                 maxWidth: 50,
@@ -3859,14 +3859,14 @@ class AgGridDataGridInlineHelpExampleComponent {
         this.gridData = AG_GRID_DEMO_DATA$3;
         this.searchText = '';
         this.#columnDefs = [
-            {
+            defineSkyAgGridColDef({
                 field: 'selected',
                 type: SkyCellType.RowSelector,
                 cellRendererParams: {
                     // Could be a SkyAppResourcesService.getString call that returns an observable.
                     label: (data) => of(`Select ${data.name}`),
                 },
-            },
+            }),
             {
                 colId: 'context',
                 maxWidth: 50,
@@ -4329,7 +4329,7 @@ class AgGridDataGridTemplateRefColumnExampleComponent {
                         maxWidth: 80,
                         resizable: false,
                     },
-                    {
+                    defineSkyAgGridColDef({
                         field: 'department',
                         headerName: 'Department',
                         type: SkyCellType.Template,
@@ -4337,8 +4337,8 @@ class AgGridDataGridTemplateRefColumnExampleComponent {
                             template: this.boldColumn,
                         },
                         initialWidth: 220,
-                    },
-                    {
+                    }),
+                    defineSkyAgGridColDef({
                         field: 'jobTitle',
                         headerName: 'Title',
                         type: SkyCellType.Template,
@@ -4346,7 +4346,7 @@ class AgGridDataGridTemplateRefColumnExampleComponent {
                             template: this.emphasizedColumn,
                         },
                         initialWidth: 220,
-                    },
+                    }),
                 ],
                 rowData: AG_GRID_DEMO_DATA$1,
             },
@@ -4548,14 +4548,14 @@ class AgGridDataGridTopScrollExampleComponent {
                 sortable: false,
                 cellRenderer: ContextMenuComponent,
             },
-            {
+            defineSkyAgGridColDef({
                 field: 'selected',
                 type: SkyCellType.RowSelector,
                 cellRendererParams: {
                     // Could be a SkyAppResourcesService.getString call that returns an observable.
                     label: (data) => of(`Select ${data.name}`),
                 },
-            },
+            }),
             {
                 field: 'name',
                 headerName: 'Name',
@@ -5473,7 +5473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  */
 class CoreIdExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CoreIdExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: CoreIdExampleComponent, isStandalone: true, selector: "app-core-id-example", ngImport: i0, template: "<div #myDiv=\"skyId\" skyId>This DIV's id is '{{ myDiv.id }}'</div>\n", dependencies: [{ kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: CoreIdExampleComponent, isStandalone: true, selector: "app-core-id-example", ngImport: i0, template: "<div #myDiv=\"skyId\" skyId>This DIV's id is '{{ myDiv.id }}'</div>\n", dependencies: [{ kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$9.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CoreIdExampleComponent, decorators: [{
             type: Component,
@@ -5488,7 +5488,7 @@ class CoreMediaQueryBasicExampleComponent {
         this.breakpoint = toSignal(inject(SkyMediaQueryService).breakpointChange);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CoreMediaQueryBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: CoreMediaQueryBasicExampleComponent, isStandalone: true, selector: "app-core-media-query-basic-example", ngImport: i0, template: "<p>Current media breakpoint: {{ breakpoint() }}</p>\n\n@if (breakpoint() === 'xs') {\n  <nav class=\"my-nav-mobile\">\n    <ul>\n      <li>\n        <button aria-label=\"Home\" type=\"button\">\n          <sky-icon iconName=\"building\" />\n        </button>\n      </li>\n    </ul>\n  </nav>\n} @else {\n  <nav class=\"my-nav-desktop\">\n    <ul>\n      <li>\n        <a href=\"#\">Home</a>\n      </li>\n    </ul>\n  </nav>\n}\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: CoreMediaQueryBasicExampleComponent, isStandalone: true, selector: "app-core-media-query-basic-example", ngImport: i0, template: "<p>Current media breakpoint: {{ breakpoint() }}</p>\n\n@if (breakpoint() === 'xs') {\n  <nav class=\"my-nav-mobile\">\n    <ul>\n      <li>\n        <button aria-label=\"Home\" type=\"button\">\n          <sky-icon iconName=\"building\" />\n        </button>\n      </li>\n    </ul>\n  </nav>\n} @else {\n  <nav class=\"my-nav-desktop\">\n    <ul>\n      <li>\n        <a href=\"#\">Home</a>\n      </li>\n    </ul>\n  </nav>\n}\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CoreMediaQueryBasicExampleComponent, decorators: [{
             type: Component,
@@ -5516,7 +5516,7 @@ class DemoContainerComponent {
         this.breakpoint = toSignal(inject(SkyMediaQueryService).breakpointChange);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DemoContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: DemoContainerComponent, isStandalone: true, selector: "app-container", hostDirectives: [{ directive: i3$1.SkyResponsiveHostDirective }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: DemoContainerComponent, isStandalone: true, selector: "app-container", hostDirectives: [{ directive: i1$9.SkyResponsiveHostDirective }], ngImport: i0, template: `
     <p>Breakpoint within container: {{ breakpoint() }}</p>
     <ng-content />
   `, isInline: true, styles: [":host{border:1px solid var(--sky-border-color-neutral-medium-dark);display:block;margin:0 auto;max-width:800px}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
@@ -5564,7 +5564,7 @@ class CoreNumericBasicExampleComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CoreNumericBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: CoreNumericBasicExampleComponent, isStandalone: true, selector: "app-core-numeric-basic-example", inputs: { defaultValue: "defaultValue", configuredValue: "configuredValue", numericOptions: "numericOptions" }, ngImport: i0, template: "<sky-description-list mode=\"vertical\">\n  <sky-description-list-content>\n    <sky-description-list-term> Default setup </sky-description-list-term>\n    <sky-description-list-description>\n      <span class=\"default-value\">\n        {{ defaultValue | skyNumeric }}\n      </span>\n    </sky-description-list-description>\n  </sky-description-list-content>\n  <sky-description-list-content>\n    <sky-description-list-term> With options </sky-description-list-term>\n    <sky-description-list-description>\n      <span class=\"configured-value\">\n        {{ configuredValue | skyNumeric: numericOptions }}\n      </span>\n    </sky-description-list-description>\n  </sky-description-list-content>\n</sky-description-list>\n", dependencies: [{ kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyNumericModule }, { kind: "pipe", type: i3$1.SkyNumericPipe, name: "skyNumeric" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: CoreNumericBasicExampleComponent, isStandalone: true, selector: "app-core-numeric-basic-example", inputs: { defaultValue: "defaultValue", configuredValue: "configuredValue", numericOptions: "numericOptions" }, ngImport: i0, template: "<sky-description-list mode=\"vertical\">\n  <sky-description-list-content>\n    <sky-description-list-term> Default setup </sky-description-list-term>\n    <sky-description-list-description>\n      <span class=\"default-value\">\n        {{ defaultValue | skyNumeric }}\n      </span>\n    </sky-description-list-description>\n  </sky-description-list-content>\n  <sky-description-list-content>\n    <sky-description-list-term> With options </sky-description-list-term>\n    <sky-description-list-description>\n      <span class=\"configured-value\">\n        {{ configuredValue | skyNumeric: numericOptions }}\n      </span>\n    </sky-description-list-description>\n  </sky-description-list-content>\n</sky-description-list>\n", dependencies: [{ kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyNumericModule }, { kind: "pipe", type: i1$9.SkyNumericPipe, name: "skyNumeric" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CoreNumericBasicExampleComponent, decorators: [{
             type: Component,
@@ -6875,7 +6875,7 @@ class ErrorsErrorEmbeddedExampleComponent {
         alert('action clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ErrorsErrorEmbeddedExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: ErrorsErrorEmbeddedExampleComponent, isStandalone: true, selector: "app-errors-error-embedded-example", ngImport: i0, template: "<sky-error errorType=\"broken\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Try again\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"notfound\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Go back\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"construction\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Go back\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"security\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Go back\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error>\n  <sky-error-image>\n    <img\n      alt=\"\"\n      role=\"presentation\"\n      src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABeCAYAAADVA7GfAAAH/klEQVR4Ae2daYgcRRTH3/TuTnbcM0QhwRhQ9IsGlICCIaIiiF88ED+IflBEJDHExIAIgucHQYV4Y8hmYw4jMYcgMYdgEJI1goooxnyIopANJiRsdpLdzfRc3fJ6U7M9vX1V1avuauz60l3dVa/ee//pY35T3VOwbduGjJbmn39B/cgIWKdPOxEYCxZA1x3LoOOG6zMaEUAhk4KYJky9+gbUf/zJN/Fdt90KPa+/AtDd7btf543ZE6RWg8kXX4LGr7+F5rXzlpuh9603AYrF0Ha67TR0cyjUn0YDpl5+LVIMtIGCYVtoNEJN6rYzU4KY27YHnqb8EounNOyTpZIZQezz56G6czd3bqu79gD2zUrJjCDmp1vBNk3uvNqVCmDfrJRMCGKdPAm1AweFc4p90UYWSiYEqWwYBrvZFM4n9kUbWSjaC9L8/RjUvz8qnUu0gbZ0L9oLUlk/RJZDSltkTnkMaS1I/fARaBw/7nFZvIq20KbORV9Bmk0whzaR586xKXE9InfIY1BbQWp790Hz1CmPu/JVtIm2dS16CoLfHbZ+pixnju1KRZl9GcNaCmLu2AnW+LhMXKF90TaOoWPRThBRRMKbXF2RinaCmJvFEAmvIA5S2awfUtFKEAeR7BdHJLyi1Pbrh1S0EkQWkfAKoiNS0UYQKkTCK4puSEUbQdLEGmmO7f0AaSEINSLxBhlV1wmppC+IIkQSJYJ3vy5IJXVBVCESb8Kj6roglXQFUYxIokTw7tcBqaQqiGpE4k14VF0HpJKaIA4i2bUnKkeJ708bqXQmHvHlAR1EwklcC93dYMybx+WyNTbGNVuFIZXS2jVc41A1TmUqKSKSiaee4Zq4ULzvXiitXAGF3l6u2O3JSTA/Xg/Vg9/E7lfo6IC+TRvAWLQodh+qhqmcsngRScEwoLRiObcYmCQUsLTqWcAkxy1pIpXEBRFCJLYNhf6+uPmc3a5U4joa0UBaSCVxQUQwhfMIS70+O9Fxt1SrcVu2tRPxtc2AQCVRQeqHR4RnkYhMI2X5sAUFmUYqI8xMIsvkBHEQicTswWpNPCGm2BGCA5pDwwAJzlJJTBBZRGJX+SdaMwVl+iaNVJIRhAKRSBwhtsQR4hwlOAOG8zsT+zDwLhMRhAKRyHzKQfAawpKZJFJRLggVIrGljhDx0x0TJSmkolwQEUTCktC2FHhYh/UXvcti/XHJkIp7m4p1pYJQziKxa+ncZbmTnsQsFaWCVIbkHrRxJwMkLsxS1x+XEw5SwdtghUWZIA4iGZF/0IbFLnXakRCTjc+W9ZGj0Dym7sEfZYJQYwcZQWT6MiHcy8ondA8Rue3iuhJBZBCJ18FWXeLWVQa7tMZ3rahEKvSCyCISV+DuValPuYSYbh/c66qQCrkgsojEHXTbukRSZb+pt/lxuaIKqdAKQoFI/KLH7wESF2aquyyvaypmqZAKQoFIvEGzul0TJ7Yyt8xsfL+lCqRCJggVIvEL3NkmdYRIiBno0PQOaqRCJggZIglIgNRFXQK7BLjT2kyNVEgEoUQkrUi9KzIXdYm+Xjf86pRIhUQQUkTiFzFe1CWSKnNDEOBO22ZKpCItCDUiaYvUVZERBCR+bXS5ELpKhVSkBaFGJIFRa3yEMJ8pciEliBJEwqLzLGVOO1JHl8ePsGrjD3yXitwsFXFBFCGSoIDt8XGwRvlftdE8cQLg0qUgs+TbHaRiWcJ2hSdb177er+RdJEGR2I0GTK5aDZ1LlkBh7mBQs7bt9tgY1H/+BZJ8VzRDKsUH72/zJW5FbLJ1pQIXH39C6esv4gagYztj7lzo374FoFTidk/olKUSkXBHoGEHGaTCLYhyRKJhgkVcEkUq3IKoRiQiwevYRxSpcAmSCCLRMbuCPjlIZXSUqzeXIEkgEi7vNW88/eDPRi4vY9/2JoVIwrwvFIvQtWwpFAZj3vaWy4BIQ2pOV5hDMfYxpNKxeHGM1hz/HzK5crXwsx2xPInRqO/DdyFuYMwcTtmZWPU8q6ay7LzpRuj96P1YY8c6ZSWJSIK8Nq66klsMtIUCYt80Cw9SiRYkYUQSlLhCcU7QrsjtMn0jjcdsYG4cBoiBVCIFSRqRxIwvc82ao/FeTxsuCM4i2bItc8Hr6rCTy4gHf0IFyREJrbRxkEqgIDkioRWDWYtCKoGC5IiEpZB2GYVUfAXJEQmtCF5rYUjFV5AckXhTSFsPQyqzBMFvtvh1Py9qM8CQineUWYKofBjFO/j/ve43S6VNEB0QSZBI1rlzYF+8GLQ7cDv2sc6eDdyf5g4/pDLzm3qzCRNPPp3oxAXeZHQtvR26H3s0/iSH8TKYn++A+tEfeIdKrH3HNQuhb/MwgDF9bLQEqX21Fy6990FijuQDzWTgijXPAZulMi1LjkhmspPCmoNULs/QdwQxv9iVT+lJQQg2pBupGHa5LPSnv8xYvqTJAP7xMmph1PYdcN7jQWM2tyKaAUQqqIVR+/aQqI28H3EGUAvD+vc0sdncnGgGUAsjzs+KogPk/TgzYFlgGAuv5uyVN1eVAdTCKN51pyr7uV3ODKAWRvGhB8Do7+fsmjenzgBq4GhRGBiAnnVvgzGQi0Kd5Lj2MPeoAWrRYlnW3//A5NoXwLpwIa6dvB1BBoyBAehd9w4Y113rWGsJgjXrzBmo7v4S6oe+A6tcJhguNxGUAWNwELruuRvmPPIwGPPnt5q1CdLaiitTU/nR0pYQugoeFdDT42vwP+C9QYr2FdBDAAAAAElFTkSuQmCC\"\n    />\n  </sky-error-image>\n  <sky-error-title> Custom error with a custom image. </sky-error-title>\n  <sky-error-description> Custom description. </sky-error-description>\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Custom action\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"broken\">\n  <sky-error-title [replaceDefaultTitle]=\"true\">\n    Custom error with a default image.\n  </sky-error-title>\n  <sky-error-description [replaceDefaultDescription]=\"true\">\n    Custom description.\n  </sky-error-description>\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Custom action\n    </button>\n  </sky-error-action>\n</sky-error>\n", dependencies: [{ kind: "ngmodule", type: SkyErrorModule }, { kind: "component", type: i1$a.λ5, selector: "sky-error", inputs: ["errorType", "showImage"] }, { kind: "component", type: i1$a.λ3, selector: "sky-error-image" }, { kind: "component", type: i1$a.λ4, selector: "sky-error-title", inputs: ["replaceDefaultTitle"] }, { kind: "component", type: i1$a.λ2, selector: "sky-error-description", inputs: ["replaceDefaultDescription"] }, { kind: "component", type: i1$a.λ1, selector: "sky-error-action" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: ErrorsErrorEmbeddedExampleComponent, isStandalone: true, selector: "app-errors-error-embedded-example", ngImport: i0, template: "<sky-error errorType=\"broken\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Try again\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"notfound\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Go back\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"construction\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Go back\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"security\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Go back\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error>\n  <sky-error-image>\n    <img\n      alt=\"\"\n      role=\"presentation\"\n      src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABeCAYAAADVA7GfAAAH/klEQVR4Ae2daYgcRRTH3/TuTnbcM0QhwRhQ9IsGlICCIaIiiF88ED+IflBEJDHExIAIgucHQYV4Y8hmYw4jMYcgMYdgEJI1goooxnyIopANJiRsdpLdzfRc3fJ6U7M9vX1V1avuauz60l3dVa/ee//pY35T3VOwbduGjJbmn39B/cgIWKdPOxEYCxZA1x3LoOOG6zMaEUAhk4KYJky9+gbUf/zJN/Fdt90KPa+/AtDd7btf543ZE6RWg8kXX4LGr7+F5rXzlpuh9603AYrF0Ha67TR0cyjUn0YDpl5+LVIMtIGCYVtoNEJN6rYzU4KY27YHnqb8EounNOyTpZIZQezz56G6czd3bqu79gD2zUrJjCDmp1vBNk3uvNqVCmDfrJRMCGKdPAm1AweFc4p90UYWSiYEqWwYBrvZFM4n9kUbWSjaC9L8/RjUvz8qnUu0gbZ0L9oLUlk/RJZDSltkTnkMaS1I/fARaBw/7nFZvIq20KbORV9Bmk0whzaR586xKXE9InfIY1BbQWp790Hz1CmPu/JVtIm2dS16CoLfHbZ+pixnju1KRZl9GcNaCmLu2AnW+LhMXKF90TaOoWPRThBRRMKbXF2RinaCmJvFEAmvIA5S2awfUtFKEAeR7BdHJLyi1Pbrh1S0EkQWkfAKoiNS0UYQKkTCK4puSEUbQdLEGmmO7f0AaSEINSLxBhlV1wmppC+IIkQSJYJ3vy5IJXVBVCESb8Kj6roglXQFUYxIokTw7tcBqaQqiGpE4k14VF0HpJKaIA4i2bUnKkeJ708bqXQmHvHlAR1EwklcC93dYMybx+WyNTbGNVuFIZXS2jVc41A1TmUqKSKSiaee4Zq4ULzvXiitXAGF3l6u2O3JSTA/Xg/Vg9/E7lfo6IC+TRvAWLQodh+qhqmcsngRScEwoLRiObcYmCQUsLTqWcAkxy1pIpXEBRFCJLYNhf6+uPmc3a5U4joa0UBaSCVxQUQwhfMIS70+O9Fxt1SrcVu2tRPxtc2AQCVRQeqHR4RnkYhMI2X5sAUFmUYqI8xMIsvkBHEQicTswWpNPCGm2BGCA5pDwwAJzlJJTBBZRGJX+SdaMwVl+iaNVJIRhAKRSBwhtsQR4hwlOAOG8zsT+zDwLhMRhAKRyHzKQfAawpKZJFJRLggVIrGljhDx0x0TJSmkolwQEUTCktC2FHhYh/UXvcti/XHJkIp7m4p1pYJQziKxa+ncZbmTnsQsFaWCVIbkHrRxJwMkLsxS1x+XEw5SwdtghUWZIA4iGZF/0IbFLnXakRCTjc+W9ZGj0Dym7sEfZYJQYwcZQWT6MiHcy8ondA8Rue3iuhJBZBCJ18FWXeLWVQa7tMZ3rahEKvSCyCISV+DuValPuYSYbh/c66qQCrkgsojEHXTbukRSZb+pt/lxuaIKqdAKQoFI/KLH7wESF2aquyyvaypmqZAKQoFIvEGzul0TJ7Yyt8xsfL+lCqRCJggVIvEL3NkmdYRIiBno0PQOaqRCJggZIglIgNRFXQK7BLjT2kyNVEgEoUQkrUi9KzIXdYm+Xjf86pRIhUQQUkTiFzFe1CWSKnNDEOBO22ZKpCItCDUiaYvUVZERBCR+bXS5ELpKhVSkBaFGJIFRa3yEMJ8pciEliBJEwqLzLGVOO1JHl8ePsGrjD3yXitwsFXFBFCGSoIDt8XGwRvlftdE8cQLg0qUgs+TbHaRiWcJ2hSdb177er+RdJEGR2I0GTK5aDZ1LlkBh7mBQs7bt9tgY1H/+BZJ8VzRDKsUH72/zJW5FbLJ1pQIXH39C6esv4gagYztj7lzo374FoFTidk/olKUSkXBHoGEHGaTCLYhyRKJhgkVcEkUq3IKoRiQiwevYRxSpcAmSCCLRMbuCPjlIZXSUqzeXIEkgEi7vNW88/eDPRi4vY9/2JoVIwrwvFIvQtWwpFAZj3vaWy4BIQ2pOV5hDMfYxpNKxeHGM1hz/HzK5crXwsx2xPInRqO/DdyFuYMwcTtmZWPU8q6ay7LzpRuj96P1YY8c6ZSWJSIK8Nq66klsMtIUCYt80Cw9SiRYkYUQSlLhCcU7QrsjtMn0jjcdsYG4cBoiBVCIFSRqRxIwvc82ao/FeTxsuCM4i2bItc8Hr6rCTy4gHf0IFyREJrbRxkEqgIDkioRWDWYtCKoGC5IiEpZB2GYVUfAXJEQmtCF5rYUjFV5AckXhTSFsPQyqzBMFvtvh1Py9qM8CQineUWYKofBjFO/j/ve43S6VNEB0QSZBI1rlzYF+8GLQ7cDv2sc6eDdyf5g4/pDLzm3qzCRNPPp3oxAXeZHQtvR26H3s0/iSH8TKYn++A+tEfeIdKrH3HNQuhb/MwgDF9bLQEqX21Fy6990FijuQDzWTgijXPAZulMi1LjkhmspPCmoNULs/QdwQxv9iVT+lJQQg2pBupGHa5LPSnv8xYvqTJAP7xMmph1PYdcN7jQWM2tyKaAUQqqIVR+/aQqI28H3EGUAvD+vc0sdncnGgGUAsjzs+KogPk/TgzYFlgGAuv5uyVN1eVAdTCKN51pyr7uV3ODKAWRvGhB8Do7+fsmjenzgBq4GhRGBiAnnVvgzGQi0Kd5Lj2MPeoAWrRYlnW3//A5NoXwLpwIa6dvB1BBoyBAehd9w4Y113rWGsJgjXrzBmo7v4S6oe+A6tcJhguNxGUAWNwELruuRvmPPIwGPPnt5q1CdLaiitTU/nR0pYQugoeFdDT42vwP+C9QYr2FdBDAAAAAElFTkSuQmCC\"\n    />\n  </sky-error-image>\n  <sky-error-title> Custom error with a custom image. </sky-error-title>\n  <sky-error-description> Custom description. </sky-error-description>\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Custom action\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"broken\">\n  <sky-error-title [replaceDefaultTitle]=\"true\">\n    Custom error with a default image.\n  </sky-error-title>\n  <sky-error-description [replaceDefaultDescription]=\"true\">\n    Custom description.\n  </sky-error-description>\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Custom action\n    </button>\n  </sky-error-action>\n</sky-error>\n", dependencies: [{ kind: "ngmodule", type: SkyErrorModule }, { kind: "component", type: i1$b.λ5, selector: "sky-error", inputs: ["errorType", "showImage"] }, { kind: "component", type: i1$b.λ3, selector: "sky-error-image" }, { kind: "component", type: i1$b.λ4, selector: "sky-error-title", inputs: ["replaceDefaultTitle"] }, { kind: "component", type: i1$b.λ2, selector: "sky-error-description", inputs: ["replaceDefaultDescription"] }, { kind: "component", type: i1$b.λ1, selector: "sky-error-action" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ErrorsErrorEmbeddedExampleComponent, decorators: [{
             type: Component,
@@ -7415,7 +7415,7 @@ class FormsCharacterCountExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FormsCharacterCountExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FormsCharacterCountExampleComponent, isStandalone: true, selector: "app-forms-character-count-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-input-box stacked=\"true\" labelText=\"Transaction description\">\n    <sky-character-counter-indicator\n      #descriptionIndicator\n      data-sky-id=\"description-indicator\"\n    />\n\n    <input\n      #descriptionInput=\"skyId\"\n      class=\"sky-form-control description-input\"\n      formControlName=\"description\"\n      skyCharacterCounter\n      skyId\n      type=\"text\"\n      [attr.aria-describedby]=\"characterCountError.id\"\n      [skyCharacterCounterIndicator]=\"descriptionIndicator\"\n      [skyCharacterCounterLimit]=\"maxDescriptionCharacterCount\"\n    />\n\n    <span #characterCountError=\"skyId\" class=\"sky-error-indicator\" skyId>\n      @if (description.errors?.['skyCharacterCounter']) {\n        <sky-status-indicator\n          data-sky-id=\"description-status-indicator-over-limit\"\n          descriptionType=\"error\"\n          indicatorType=\"danger\"\n        >\n          Limit Transaction description to\n          {{ maxDescriptionCharacterCount }} characters.\n        </sky-status-indicator>\n      }\n    </span>\n  </sky-input-box>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCharacterCounterModule }, { kind: "directive", type: i2$2.λ2, selector: "[skyCharacterCounter]", inputs: ["skyCharacterCounterIndicator", "skyCharacterCounterLimit"] }, { kind: "component", type: i2$2.λ1, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FormsCharacterCountExampleComponent, isStandalone: true, selector: "app-forms-character-count-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-input-box stacked=\"true\" labelText=\"Transaction description\">\n    <sky-character-counter-indicator\n      #descriptionIndicator\n      data-sky-id=\"description-indicator\"\n    />\n\n    <input\n      #descriptionInput=\"skyId\"\n      class=\"sky-form-control description-input\"\n      formControlName=\"description\"\n      skyCharacterCounter\n      skyId\n      type=\"text\"\n      [attr.aria-describedby]=\"characterCountError.id\"\n      [skyCharacterCounterIndicator]=\"descriptionIndicator\"\n      [skyCharacterCounterLimit]=\"maxDescriptionCharacterCount\"\n    />\n\n    <span #characterCountError=\"skyId\" class=\"sky-error-indicator\" skyId>\n      @if (description.errors?.['skyCharacterCounter']) {\n        <sky-status-indicator\n          data-sky-id=\"description-status-indicator-over-limit\"\n          descriptionType=\"error\"\n          indicatorType=\"danger\"\n        >\n          Limit Transaction description to\n          {{ maxDescriptionCharacterCount }} characters.\n        </sky-status-indicator>\n      }\n    </span>\n  </sky-input-box>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCharacterCounterModule }, { kind: "directive", type: i2$2.λ2, selector: "[skyCharacterCounter]", inputs: ["skyCharacterCounterIndicator", "skyCharacterCounterLimit"] }, { kind: "component", type: i2$2.λ1, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$9.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FormsCharacterCountExampleComponent, decorators: [{
             type: Component,
@@ -8090,7 +8090,7 @@ class FormsSelectionBoxCheckboxExampleComponent {
         return this.#formBuilder.array(checkboxArray);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FormsSelectionBoxCheckboxExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FormsSelectionBoxCheckboxExampleComponent, isStandalone: true, selector: "app-forms-selection-box-checkbox-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-selection-box-grid>\n    @for (control of checkboxControls; track control; let i = $index) {\n      <sky-selection-box [control]=\"checkbox\">\n        <sky-icon [iconName]=\"selectionBoxes[i].iconName\" />\n        <sky-selection-box-header #checkboxHeaderId=\"skyId\" skyId>\n          {{ selectionBoxes[i].name }}\n        </sky-selection-box-header>\n        <sky-selection-box-description>\n          {{ selectionBoxes[i].description }}\n        </sky-selection-box-description>\n        <sky-checkbox\n          #checkbox\n          [formControl]=\"control\"\n          [labelledBy]=\"checkboxHeaderId.id\"\n        />\n      </sky-selection-box>\n    }\n  </sky-selection-box-grid>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkySelectionBoxModule }, { kind: "component", type: i2$2.λ15, selector: "sky-selection-box-grid", inputs: ["alignItems"] }, { kind: "component", type: i2$2.λ17, selector: "sky-selection-box", inputs: ["control"] }, { kind: "component", type: i2$2.λ14, selector: "sky-selection-box-description" }, { kind: "component", type: i2$2.λ16, selector: "sky-selection-box-header" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FormsSelectionBoxCheckboxExampleComponent, isStandalone: true, selector: "app-forms-selection-box-checkbox-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-selection-box-grid>\n    @for (control of checkboxControls; track control; let i = $index) {\n      <sky-selection-box [control]=\"checkbox\">\n        <sky-icon [iconName]=\"selectionBoxes[i].iconName\" />\n        <sky-selection-box-header>\n          {{ selectionBoxes[i].name }}\n        </sky-selection-box-header>\n        <sky-selection-box-description>\n          {{ selectionBoxes[i].description }}\n        </sky-selection-box-description>\n        <sky-checkbox\n          #checkbox\n          labelHidden\n          [formControl]=\"control\"\n          [labelText]=\"selectionBoxes[i].name\"\n        />\n      </sky-selection-box>\n    }\n  </sky-selection-box-grid>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkySelectionBoxModule }, { kind: "component", type: i2$2.λ15, selector: "sky-selection-box-grid", inputs: ["alignItems"] }, { kind: "component", type: i2$2.λ17, selector: "sky-selection-box", inputs: ["control"] }, { kind: "component", type: i2$2.λ14, selector: "sky-selection-box-description" }, { kind: "component", type: i2$2.λ16, selector: "sky-selection-box-header" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FormsSelectionBoxCheckboxExampleComponent, decorators: [{
             type: Component,
@@ -8099,9 +8099,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         ReactiveFormsModule,
                         SkyCheckboxModule,
                         SkyIconModule,
-                        SkyIdModule,
                         SkySelectionBoxModule,
-                    ], template: "<form [formGroup]=\"formGroup\">\n  <sky-selection-box-grid>\n    @for (control of checkboxControls; track control; let i = $index) {\n      <sky-selection-box [control]=\"checkbox\">\n        <sky-icon [iconName]=\"selectionBoxes[i].iconName\" />\n        <sky-selection-box-header #checkboxHeaderId=\"skyId\" skyId>\n          {{ selectionBoxes[i].name }}\n        </sky-selection-box-header>\n        <sky-selection-box-description>\n          {{ selectionBoxes[i].description }}\n        </sky-selection-box-description>\n        <sky-checkbox\n          #checkbox\n          [formControl]=\"control\"\n          [labelledBy]=\"checkboxHeaderId.id\"\n        />\n      </sky-selection-box>\n    }\n  </sky-selection-box-grid>\n</form>\n" }]
+                    ], template: "<form [formGroup]=\"formGroup\">\n  <sky-selection-box-grid>\n    @for (control of checkboxControls; track control; let i = $index) {\n      <sky-selection-box [control]=\"checkbox\">\n        <sky-icon [iconName]=\"selectionBoxes[i].iconName\" />\n        <sky-selection-box-header>\n          {{ selectionBoxes[i].name }}\n        </sky-selection-box-header>\n        <sky-selection-box-description>\n          {{ selectionBoxes[i].description }}\n        </sky-selection-box-description>\n        <sky-checkbox\n          #checkbox\n          labelHidden\n          [formControl]=\"control\"\n          [labelText]=\"selectionBoxes[i].name\"\n        />\n      </sky-selection-box>\n    }\n  </sky-selection-box-grid>\n</form>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -8134,7 +8133,7 @@ class FormsSelectionBoxRadioExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FormsSelectionBoxRadioExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FormsSelectionBoxRadioExampleComponent, isStandalone: true, selector: "app-forms-selection-box-radio-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n  <sky-radio-group ariaLabel=\"Demo options\" formControlName=\"myOption\">\n    <sky-selection-box-grid>\n      @for (item of items; track item) {\n        <sky-selection-box [control]=\"radio\">\n          <sky-icon [iconName]=\"item['iconName']\" />\n          <sky-selection-box-header #radioHeaderId=\"skyId\" skyId>\n            {{ item['name'] }}\n          </sky-selection-box-header>\n          <sky-selection-box-description>\n            {{ item['description'] }}\n          </sky-selection-box-description>\n          <sky-radio\n            #radio\n            [labelledBy]=\"radioHeaderId.id\"\n            [value]=\"item['value']\"\n          />\n        </sky-selection-box>\n      }\n    </sky-selection-box-grid>\n  </sky-radio-group>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyRadioModule }, { kind: "component", type: i2$2.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "helpPopoverContent", "helpPopoverTitle", "iconName", "radioType", "labelText", "labelHidden", "hintText", "helpKey"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i2$2.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "headingLevel", "headingStyle", "name", "required", "stacked", "value", "tabIndex", "headingText", "headingHidden", "hintText", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { kind: "ngmodule", type: SkySelectionBoxModule }, { kind: "component", type: i2$2.λ15, selector: "sky-selection-box-grid", inputs: ["alignItems"] }, { kind: "component", type: i2$2.λ17, selector: "sky-selection-box", inputs: ["control"] }, { kind: "component", type: i2$2.λ14, selector: "sky-selection-box-description" }, { kind: "component", type: i2$2.λ16, selector: "sky-selection-box-header" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FormsSelectionBoxRadioExampleComponent, isStandalone: true, selector: "app-forms-selection-box-radio-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n  <sky-radio-group ariaLabel=\"Demo options\" formControlName=\"myOption\">\n    <sky-selection-box-grid>\n      @for (item of items; track item) {\n        <sky-selection-box [control]=\"radio\">\n          <sky-icon [iconName]=\"item['iconName']\" />\n          <sky-selection-box-header>\n            {{ item['name'] }}\n          </sky-selection-box-header>\n          <sky-selection-box-description>\n            {{ item['description'] }}\n          </sky-selection-box-description>\n          <sky-radio\n            #radio\n            labelHidden\n            [labelText]=\"item['name']\"\n            [value]=\"item['value']\"\n          />\n        </sky-selection-box>\n      }\n    </sky-selection-box-grid>\n  </sky-radio-group>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyRadioModule }, { kind: "component", type: i2$2.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "helpPopoverContent", "helpPopoverTitle", "iconName", "radioType", "labelText", "labelHidden", "hintText", "helpKey"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i2$2.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "headingLevel", "headingStyle", "name", "required", "stacked", "value", "tabIndex", "headingText", "headingHidden", "hintText", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { kind: "ngmodule", type: SkySelectionBoxModule }, { kind: "component", type: i2$2.λ15, selector: "sky-selection-box-grid", inputs: ["alignItems"] }, { kind: "component", type: i2$2.λ17, selector: "sky-selection-box", inputs: ["control"] }, { kind: "component", type: i2$2.λ14, selector: "sky-selection-box-description" }, { kind: "component", type: i2$2.λ16, selector: "sky-selection-box-header" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FormsSelectionBoxRadioExampleComponent, decorators: [{
             type: Component,
@@ -8142,10 +8141,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         FormsModule,
                         ReactiveFormsModule,
                         SkyIconModule,
-                        SkyIdModule,
                         SkyRadioModule,
                         SkySelectionBoxModule,
-                    ], template: "<form novalidate [formGroup]=\"formGroup\">\n  <sky-radio-group ariaLabel=\"Demo options\" formControlName=\"myOption\">\n    <sky-selection-box-grid>\n      @for (item of items; track item) {\n        <sky-selection-box [control]=\"radio\">\n          <sky-icon [iconName]=\"item['iconName']\" />\n          <sky-selection-box-header #radioHeaderId=\"skyId\" skyId>\n            {{ item['name'] }}\n          </sky-selection-box-header>\n          <sky-selection-box-description>\n            {{ item['description'] }}\n          </sky-selection-box-description>\n          <sky-radio\n            #radio\n            [labelledBy]=\"radioHeaderId.id\"\n            [value]=\"item['value']\"\n          />\n        </sky-selection-box>\n      }\n    </sky-selection-box-grid>\n  </sky-radio-group>\n</form>\n" }]
+                    ], template: "<form novalidate [formGroup]=\"formGroup\">\n  <sky-radio-group ariaLabel=\"Demo options\" formControlName=\"myOption\">\n    <sky-selection-box-grid>\n      @for (item of items; track item) {\n        <sky-selection-box [control]=\"radio\">\n          <sky-icon [iconName]=\"item['iconName']\" />\n          <sky-selection-box-header>\n            {{ item['name'] }}\n          </sky-selection-box-header>\n          <sky-selection-box-description>\n            {{ item['description'] }}\n          </sky-selection-box-description>\n          <sky-radio\n            #radio\n            labelHidden\n            [labelText]=\"item['name']\"\n            [value]=\"item['value']\"\n          />\n        </sky-selection-box>\n      }\n    </sky-selection-box-grid>\n  </sky-radio-group>\n</form>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -8227,7 +8225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  */
 class IconBasicExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: IconBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: IconBasicExampleComponent, isStandalone: true, selector: "app-icon-basic-example", ngImport: i0, template: "<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxxs\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxs\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xs\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"s\" />\n<sky-icon iconName=\"calendar-ltr\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"l\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xl\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxl\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxxl\" />\n<sky-icon\n  data-sky-id=\"icon-example\"\n  iconName=\"calendar-ltr\"\n  variant=\"solid\"\n  iconSize=\"xl\"\n/>\n\n<div>\n  <sky-icon iconName=\"navigation\" iconSize=\"xl\" />\n</div>\n\n<div>\n  <sky-icon iconName=\"chevron-down\" iconSize=\"xl\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: IconBasicExampleComponent, isStandalone: true, selector: "app-icon-basic-example", ngImport: i0, template: "<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxxs\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxs\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xs\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"s\" />\n<sky-icon iconName=\"calendar-ltr\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"l\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xl\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxl\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxxl\" />\n<sky-icon\n  data-sky-id=\"icon-example\"\n  iconName=\"calendar-ltr\"\n  variant=\"solid\"\n  iconSize=\"xl\"\n/>\n\n<div>\n  <sky-icon iconName=\"navigation\" iconSize=\"xl\" />\n</div>\n\n<div>\n  <sky-icon iconName=\"chevron-down\" iconSize=\"xl\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: IconBasicExampleComponent, decorators: [{
             type: Component,
@@ -8245,7 +8243,7 @@ class IconIconButtonExampleComponent {
         alert('Icon only button clicked');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: IconIconButtonExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: IconIconButtonExampleComponent, isStandalone: true, selector: "app-icon-icon-button-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"textButtonClick()\"\n>\n  <sky-icon data-sky-id=\"text-button-icon\" iconName=\"save\" />\n  Save\n</button>\n\n<button\n  class=\"sky-btn sky-btn-icon-borderless\"\n  type=\"button\"\n  (click)=\"iconOnlyButtonClick()\"\n>\n  <sky-icon data-sky-id=\"button-icon\" iconName=\"edit\" />\n</button>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: IconIconButtonExampleComponent, isStandalone: true, selector: "app-icon-icon-button-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"textButtonClick()\"\n>\n  <sky-icon data-sky-id=\"text-button-icon\" iconName=\"save\" />\n  Save\n</button>\n\n<button\n  class=\"sky-btn sky-btn-icon-borderless\"\n  type=\"button\"\n  (click)=\"iconOnlyButtonClick()\"\n>\n  <sky-icon data-sky-id=\"button-icon\" iconName=\"edit\" />\n</button>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: IconIconButtonExampleComponent, decorators: [{
             type: Component,
@@ -8644,7 +8642,7 @@ class InlineFormBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: InlineFormBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: InlineFormBasicExampleComponent, isStandalone: true, selector: "app-inline-form-basic-example", ngImport: i0, template: "<sky-inline-form\n  data-sky-id=\"first-name\"\n  [config]=\"inlineFormConfig\"\n  [showForm]=\"showForm\"\n  [template]=\"inlineFormTemplate\"\n  (close)=\"onInlineFormClose($event)\"\n>\n  <table>\n    <tr>\n      <th>First name:</th>\n      <td>\n        {{ firstName }}\n      </td>\n      <td>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"onInlineFormOpen()\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </td>\n    </tr>\n  </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"First name\">\n      <input formControlName=\"firstName\" type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineFormModule }, { kind: "component", type: i3$2.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: InlineFormBasicExampleComponent, isStandalone: true, selector: "app-inline-form-basic-example", ngImport: i0, template: "<sky-inline-form\n  data-sky-id=\"first-name\"\n  [config]=\"inlineFormConfig\"\n  [showForm]=\"showForm\"\n  [template]=\"inlineFormTemplate\"\n  (close)=\"onInlineFormClose($event)\"\n>\n  <table>\n    <tr>\n      <th>First name:</th>\n      <td>\n        {{ firstName }}\n      </td>\n      <td>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"onInlineFormOpen()\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </td>\n    </tr>\n  </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"First name\">\n      <input formControlName=\"firstName\" type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineFormModule }, { kind: "component", type: i3$1.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: InlineFormBasicExampleComponent, decorators: [{
             type: Component,
@@ -8726,7 +8724,7 @@ class InlineFormCustomButtonsExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: InlineFormCustomButtonsExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: InlineFormCustomButtonsExampleComponent, isStandalone: true, selector: "app-inline-form-custom-buttons-example", ngImport: i0, template: "<sky-inline-form\n  data-sky-id=\"first-name\"\n  [config]=\"inlineFormConfig\"\n  [showForm]=\"showForm\"\n  [template]=\"inlineFormTemplate\"\n  (close)=\"onInlineFormClose($event)\"\n>\n  <table>\n    <tr>\n      <th>First name:</th>\n      <td>\n        {{ firstName }}\n      </td>\n      <td>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"onInlineFormOpen()\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </td>\n    </tr>\n  </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"First name\">\n      <input formControlName=\"firstName\" required type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineFormModule }, { kind: "component", type: i3$2.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: InlineFormCustomButtonsExampleComponent, isStandalone: true, selector: "app-inline-form-custom-buttons-example", ngImport: i0, template: "<sky-inline-form\n  data-sky-id=\"first-name\"\n  [config]=\"inlineFormConfig\"\n  [showForm]=\"showForm\"\n  [template]=\"inlineFormTemplate\"\n  (close)=\"onInlineFormClose($event)\"\n>\n  <table>\n    <tr>\n      <th>First name:</th>\n      <td>\n        {{ firstName }}\n      </td>\n      <td>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"onInlineFormOpen()\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </td>\n    </tr>\n  </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"First name\">\n      <input formControlName=\"firstName\" required type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineFormModule }, { kind: "component", type: i3$1.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: InlineFormCustomButtonsExampleComponent, decorators: [{
             type: Component,
@@ -8798,7 +8796,7 @@ class InlineFormRepeatersExampleComponent {
         this.activeInlineFormId = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: InlineFormRepeatersExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: InlineFormRepeatersExampleComponent, isStandalone: true, selector: "app-inline-form-repeaters-example", ngImport: i0, template: "<sky-repeater>\n  @for (item of items; track item) {\n    <sky-repeater-item\n      [inlineFormConfig]=\"inlineFormConfig\"\n      [inlineFormTemplate]=\"inlineFormTemplate\"\n      [showInlineForm]=\"activeInlineFormId === item.id\"\n      (inlineFormClose)=\"onInlineFormClose($event)\"\n    >\n      <sky-repeater-item-title>\n        <div class=\"sky-theme-font-body-emphasized-m\">\n          {{ item.title }}\n        </div>\n      </sky-repeater-item-title>\n      <sky-repeater-item-context-menu>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"showInlineForm(item)\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </sky-repeater-item-context-menu>\n\n      <sky-repeater-item-content>\n        {{ item.note }}\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n\n<ng-template #inlineFormTemplate>\n  <form novalidate [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"Title\" stacked=\"true\">\n      <input formControlName=\"title\" type=\"text\" />\n    </sky-input-box>\n    <sky-input-box labelText=\"Note\">\n      <input formControlName=\"note\" type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i4.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i4.λ12, selector: "sky-repeater-item-title" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: InlineFormRepeatersExampleComponent, isStandalone: true, selector: "app-inline-form-repeaters-example", ngImport: i0, template: "<sky-repeater>\n  @for (item of items; track item) {\n    <sky-repeater-item\n      [inlineFormConfig]=\"inlineFormConfig\"\n      [inlineFormTemplate]=\"inlineFormTemplate\"\n      [showInlineForm]=\"activeInlineFormId === item.id\"\n      (inlineFormClose)=\"onInlineFormClose($event)\"\n    >\n      <sky-repeater-item-title>\n        <div class=\"sky-theme-font-body-emphasized-m\">\n          {{ item.title }}\n        </div>\n      </sky-repeater-item-title>\n      <sky-repeater-item-context-menu>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"showInlineForm(item)\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </sky-repeater-item-context-menu>\n\n      <sky-repeater-item-content>\n        {{ item.note }}\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n\n<ng-template #inlineFormTemplate>\n  <form novalidate [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"Title\" stacked=\"true\">\n      <input formControlName=\"title\" type=\"text\" />\n    </sky-input-box>\n    <sky-input-box labelText=\"Note\">\n      <input formControlName=\"note\" type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i4.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i4.λ12, selector: "sky-repeater-item-title" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: InlineFormRepeatersExampleComponent, decorators: [{
             type: Component,
@@ -9422,7 +9420,7 @@ class LayoutInlineDeleteCustomExampleComponent {
         this.pending = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LayoutInlineDeleteCustomExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: LayoutInlineDeleteCustomExampleComponent, isStandalone: true, selector: "app-layout-inline-delete-custom-example", ngImport: i0, template: "<div class=\"inline-delete-container\">\n  <strong>Custom content</strong>\n  <div>\n    <button\n      class=\"sky-btn sky-btn-danger inline-delete-trigger\"\n      type=\"button\"\n      (click)=\"deleteItem()\"\n    >\n      <sky-icon iconName=\"delete\" />\n    </button>\n  </div>\n  @if (deleting) {\n    <sky-inline-delete\n      data-sky-id=\"inline-delete-custom\"\n      [pending]=\"pending\"\n      (cancelTriggered)=\"onCancelTriggered()\"\n      (deleteTriggered)=\"onDeleteTriggered()\"\n    />\n  }\n</div>\n", styles: [".inline-delete-container{padding:15px;background-color:#fff;border:black solid 1px;height:400px;width:400px;position:relative}.inline-delete-trigger{position:absolute;bottom:10px;left:0;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineDeleteModule }, { kind: "component", type: i1$5.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: LayoutInlineDeleteCustomExampleComponent, isStandalone: true, selector: "app-layout-inline-delete-custom-example", ngImport: i0, template: "<div class=\"inline-delete-container\">\n  <strong>Custom content</strong>\n  <div>\n    <button\n      class=\"sky-btn sky-btn-danger inline-delete-trigger\"\n      type=\"button\"\n      (click)=\"deleteItem()\"\n    >\n      <sky-icon iconName=\"delete\" />\n    </button>\n  </div>\n  @if (deleting) {\n    <sky-inline-delete\n      data-sky-id=\"inline-delete-custom\"\n      [pending]=\"pending\"\n      (cancelTriggered)=\"onCancelTriggered()\"\n      (deleteTriggered)=\"onDeleteTriggered()\"\n    />\n  }\n</div>\n", styles: [".inline-delete-container{padding:15px;background-color:#fff;border:black solid 1px;height:400px;width:400px;position:relative}.inline-delete-trigger{position:absolute;bottom:10px;left:0;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineDeleteModule }, { kind: "component", type: i1$5.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LayoutInlineDeleteCustomExampleComponent, decorators: [{
             type: Component,
@@ -9582,7 +9580,7 @@ class LayoutToolbarBasicExampleComponent {
         alert(buttonText + ' clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LayoutToolbarBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: LayoutToolbarBasicExampleComponent, isStandalone: true, selector: "app-layout-toolbar-basic-example", ngImport: i0, template: "<sky-toolbar data-sky-id=\"basic-toolbar\">\n  <sky-toolbar-item data-sky-id=\"toolbar-item-1\">\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Button 1')\"\n    >\n      Button 1\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item data-sky-id=\"toolbar-item-2\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Button 2')\"\n    >\n      Button 2\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-view-actions>\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon\"\n      title=\"Sort descending\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Expand')\"\n    >\n      <sky-icon iconName=\"chevron-double-down\" />\n    </button>\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon\"\n      title=\"Sort ascending\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Collapse')\"\n    >\n      <sky-icon iconName=\"chevron-double-up\" />\n    </button>\n  </sky-toolbar-view-actions>\n</sky-toolbar>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ40, selector: "sky-toolbar-view-actions" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: LayoutToolbarBasicExampleComponent, isStandalone: true, selector: "app-layout-toolbar-basic-example", ngImport: i0, template: "<sky-toolbar data-sky-id=\"basic-toolbar\">\n  <sky-toolbar-item data-sky-id=\"toolbar-item-1\">\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Button 1')\"\n    >\n      Button 1\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item data-sky-id=\"toolbar-item-2\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Button 2')\"\n    >\n      Button 2\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-view-actions>\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon\"\n      title=\"Sort descending\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Expand')\"\n    >\n      <sky-icon iconName=\"chevron-double-down\" />\n    </button>\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon\"\n      title=\"Sort ascending\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Collapse')\"\n    >\n      <sky-icon iconName=\"chevron-double-up\" />\n    </button>\n  </sky-toolbar-view-actions>\n</sky-toolbar>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ40, selector: "sky-toolbar-view-actions" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LayoutToolbarBasicExampleComponent, decorators: [{
             type: Component,
@@ -9597,7 +9595,7 @@ class LayoutToolbarSectionedExampleComponent {
         alert(buttonText + ' clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LayoutToolbarSectionedExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: LayoutToolbarSectionedExampleComponent, isStandalone: true, selector: "app-layout-toolbar-sectioned-example", ngImport: i0, template: "<sky-toolbar data-sky-id=\"sectioned-toolbar\">\n  <sky-toolbar-section data-sky-id=\"top-section\">\n    <sky-toolbar-item data-sky-id=\"toolbar-item-1\">\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Button 1')\"\n      >\n        Button 1\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item data-sky-id=\"toolbar-item-2\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Button 2')\"\n      >\n        Button 2\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <button\n        class=\"sky-btn sky-btn-default sky-btn-icon\"\n        title=\"Sort descending\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Expand')\"\n      >\n        <sky-icon iconName=\"chevron-double-down\" />\n      </button>\n      <button\n        class=\"sky-btn sky-btn-default sky-btn-icon\"\n        title=\"Sort ascending\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Collapse')\"\n      >\n        <sky-icon iconName=\"chevron-double-up\" />\n      </button>\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n  <sky-toolbar-section data-sky-id=\"bottom-section\">\n    <sky-toolbar-item data-sky-id=\"sort-button\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Sort')\"\n      >\n        <sky-icon iconName=\"arrow-sort\" /> Sort\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item data-sky-id=\"filter-button\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Filter')\"\n      >\n        <sky-icon iconName=\"filter\" /> Filter\n      </button>\n    </sky-toolbar-item>\n  </sky-toolbar-section>\n</sky-toolbar>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i1$5.λ40, selector: "sky-toolbar-view-actions" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: LayoutToolbarSectionedExampleComponent, isStandalone: true, selector: "app-layout-toolbar-sectioned-example", ngImport: i0, template: "<sky-toolbar data-sky-id=\"sectioned-toolbar\">\n  <sky-toolbar-section data-sky-id=\"top-section\">\n    <sky-toolbar-item data-sky-id=\"toolbar-item-1\">\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Button 1')\"\n      >\n        Button 1\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item data-sky-id=\"toolbar-item-2\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Button 2')\"\n      >\n        Button 2\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <button\n        class=\"sky-btn sky-btn-default sky-btn-icon\"\n        title=\"Sort descending\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Expand')\"\n      >\n        <sky-icon iconName=\"chevron-double-down\" />\n      </button>\n      <button\n        class=\"sky-btn sky-btn-default sky-btn-icon\"\n        title=\"Sort ascending\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Collapse')\"\n      >\n        <sky-icon iconName=\"chevron-double-up\" />\n      </button>\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n  <sky-toolbar-section data-sky-id=\"bottom-section\">\n    <sky-toolbar-item data-sky-id=\"sort-button\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Sort')\"\n      >\n        <sky-icon iconName=\"arrow-sort\" /> Sort\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item data-sky-id=\"filter-button\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Filter')\"\n      >\n        <sky-icon iconName=\"filter\" /> Filter\n      </button>\n    </sky-toolbar-item>\n  </sky-toolbar-section>\n</sky-toolbar>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i1$5.λ40, selector: "sky-toolbar-view-actions" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LayoutToolbarSectionedExampleComponent, decorators: [{
             type: Component,
@@ -9703,7 +9701,7 @@ class ListsFilterInlineExampleComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ListsFilterInlineExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ListsFilterInlineExampleComponent, isStandalone: true, selector: "app-lists-filter-inline-example", ngImport: i0, template: "<sky-toolbar>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-filter-button\n        data-sky-id=\"my-filter-button\"\n        [active]=\"filtersActive\"\n        [ariaControls]=\"inlineFilters.id\"\n        [ariaExpanded]=\"showInlineFilters\"\n        [showButtonText]=\"true\"\n        (filterButtonClick)=\"filterButtonClicked()\"\n      />\n    </sky-toolbar-item>\n  </sky-toolbar-section>\n</sky-toolbar>\n\n<div #inlineFilters skyId [hidden]=\"!showInlineFilters\">\n  <sky-filter-inline data-sky-id=\"filter-inline\">\n    <sky-filter-inline-item data-sky-id=\"fruit-filter\">\n      <sky-input-box labelText=\"Fruit type\">\n        <select [ngModel]=\"fruitType\" (ngModelChange)=\"fruitTypeChange($event)\">\n          <option value=\"any\">Any fruit</option>\n          <option value=\"citrus\">Citrus</option>\n          <option value=\"berry\">Berry</option>\n        </select>\n      </sky-input-box>\n    </sky-filter-inline-item>\n    <sky-filter-inline-item data-sky-id=\"hide-orange-filter\">\n      <sky-checkbox\n        labelText=\"Hide orange fruits\"\n        [ngModel]=\"hideOrange\"\n        (ngModelChange)=\"hideOrangeChange($event)\"\n      />\n    </sky-filter-inline-item>\n  </sky-filter-inline>\n</div>\n\n<sky-repeater expandMode=\"none\">\n  @for (item of filteredItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.name }}\n      </sky-repeater-item-title>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyFilterModule }, { kind: "component", type: i4.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: i4.λ2, selector: "sky-filter-inline" }, { kind: "component", type: i4.λ3, selector: "sky-filter-inline-item" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ38, selector: "sky-toolbar-section" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ListsFilterInlineExampleComponent, isStandalone: true, selector: "app-lists-filter-inline-example", ngImport: i0, template: "<sky-toolbar>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-filter-button\n        data-sky-id=\"my-filter-button\"\n        [active]=\"filtersActive\"\n        [ariaControls]=\"inlineFilters.id\"\n        [ariaExpanded]=\"showInlineFilters\"\n        [showButtonText]=\"true\"\n        (filterButtonClick)=\"filterButtonClicked()\"\n      />\n    </sky-toolbar-item>\n  </sky-toolbar-section>\n</sky-toolbar>\n\n<div #inlineFilters skyId [hidden]=\"!showInlineFilters\">\n  <sky-filter-inline data-sky-id=\"filter-inline\">\n    <sky-filter-inline-item data-sky-id=\"fruit-filter\">\n      <sky-input-box labelText=\"Fruit type\">\n        <select [ngModel]=\"fruitType\" (ngModelChange)=\"fruitTypeChange($event)\">\n          <option value=\"any\">Any fruit</option>\n          <option value=\"citrus\">Citrus</option>\n          <option value=\"berry\">Berry</option>\n        </select>\n      </sky-input-box>\n    </sky-filter-inline-item>\n    <sky-filter-inline-item data-sky-id=\"hide-orange-filter\">\n      <sky-checkbox\n        labelText=\"Hide orange fruits\"\n        [ngModel]=\"hideOrange\"\n        (ngModelChange)=\"hideOrangeChange($event)\"\n      />\n    </sky-filter-inline-item>\n  </sky-filter-inline>\n</div>\n\n<sky-repeater expandMode=\"none\">\n  @for (item of filteredItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.name }}\n      </sky-repeater-item-title>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$9.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyFilterModule }, { kind: "component", type: i4.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: i4.λ2, selector: "sky-filter-inline" }, { kind: "component", type: i4.λ3, selector: "sky-filter-inline-item" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ38, selector: "sky-toolbar-section" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ListsFilterInlineExampleComponent, decorators: [{
             type: Component,
@@ -10108,7 +10106,7 @@ class ListsRepeaterInlineFormExampleComponent {
         this.activeInlineFormId = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ListsRepeaterInlineFormExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ListsRepeaterInlineFormExampleComponent, isStandalone: true, selector: "app-lists-repeater-inline-form-example", ngImport: i0, template: "<sky-repeater>\n  @for (item of items; track item) {\n    <sky-repeater-item\n      [inlineFormConfig]=\"inlineFormConfig\"\n      [inlineFormTemplate]=\"inlineFormTemplate\"\n      [showInlineForm]=\"activeInlineFormId === item.id\"\n      (inlineFormClose)=\"onInlineFormClose($event)\"\n    >\n      <sky-repeater-item-title>\n        <div class=\"sky-theme-font-body-emphasized-m\">\n          {{ item.title }}\n        </div>\n      </sky-repeater-item-title>\n      <sky-repeater-item-context-menu>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"showInlineForm(item)\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </sky-repeater-item-context-menu>\n\n      <sky-repeater-item-content>\n        {{ item.note }}\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n\n<ng-template #inlineFormTemplate>\n  <form novalidate [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"Title\" stacked=\"true\">\n      <input formControlName=\"title\" type=\"text\" />\n    </sky-input-box>\n    <sky-input-box labelText=\"Note\">\n      <input formControlName=\"note\" type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i4.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i4.λ12, selector: "sky-repeater-item-title" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ListsRepeaterInlineFormExampleComponent, isStandalone: true, selector: "app-lists-repeater-inline-form-example", ngImport: i0, template: "<sky-repeater>\n  @for (item of items; track item) {\n    <sky-repeater-item\n      [inlineFormConfig]=\"inlineFormConfig\"\n      [inlineFormTemplate]=\"inlineFormTemplate\"\n      [showInlineForm]=\"activeInlineFormId === item.id\"\n      (inlineFormClose)=\"onInlineFormClose($event)\"\n    >\n      <sky-repeater-item-title>\n        <div class=\"sky-theme-font-body-emphasized-m\">\n          {{ item.title }}\n        </div>\n      </sky-repeater-item-title>\n      <sky-repeater-item-context-menu>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"showInlineForm(item)\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </sky-repeater-item-context-menu>\n\n      <sky-repeater-item-content>\n        {{ item.note }}\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n\n<ng-template #inlineFormTemplate>\n  <form novalidate [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"Title\" stacked=\"true\">\n      <input formControlName=\"title\" type=\"text\" />\n    </sky-input-box>\n    <sky-input-box labelText=\"Note\">\n      <input formControlName=\"note\" type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i4.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i4.λ12, selector: "sky-repeater-item-title" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ListsRepeaterInlineFormExampleComponent, decorators: [{
             type: Component,
@@ -10413,7 +10411,7 @@ class LookupAutocompleteCustomSearchExampleComponent {
         return searchFunction;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LookupAutocompleteCustomSearchExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: LookupAutocompleteCustomSearchExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-custom-search-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n  <p>\n    The following field has a preselected value and utilizes a custom search\n    function, as well as a custom template for the search results.\n  </p>\n  <div class=\"sky-theme-margin-bottom-l\">\n    <sky-input-box labelText=\"Largest ocean\" stacked>\n      <sky-autocomplete\n        descriptorProperty=\"title\"\n        [data]=\"oceans\"\n        [search]=\"getOceanSearchFunction()\"\n        [searchResultTemplate]=\"oceanSearchResultTemplate\"\n      >\n        <input formControlName=\"largestOcean\" type=\"text\" skyAutocomplete />\n      </sky-autocomplete>\n    </sky-input-box>\n  </div>\n  <p class=\"sky-theme-font-body-emphasized-m\">Form model:</p>\n  <pre>{{ formGroup.value | json }}</pre>\n</form>\n\n<ng-template #oceanSearchResultTemplate let-item=\"item\">\n  <sky-icon iconName=\"arrow-right\" />\n  {{ item.title }} &bull; ID {{ item.id }}\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutocompleteModule }, { kind: "component", type: i2$1.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: i2$1.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: LookupAutocompleteCustomSearchExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-custom-search-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n  <p>\n    The following field has a preselected value and utilizes a custom search\n    function, as well as a custom template for the search results.\n  </p>\n  <div class=\"sky-theme-margin-bottom-l\">\n    <sky-input-box labelText=\"Largest ocean\" stacked>\n      <sky-autocomplete\n        descriptorProperty=\"title\"\n        [data]=\"oceans\"\n        [search]=\"getOceanSearchFunction()\"\n        [searchResultTemplate]=\"oceanSearchResultTemplate\"\n      >\n        <input formControlName=\"largestOcean\" type=\"text\" skyAutocomplete />\n      </sky-autocomplete>\n    </sky-input-box>\n  </div>\n  <p class=\"sky-theme-font-body-emphasized-m\">Form model:</p>\n  <pre>{{ formGroup.value | json }}</pre>\n</form>\n\n<ng-template #oceanSearchResultTemplate let-item=\"item\">\n  <sky-icon iconName=\"arrow-right\" />\n  {{ item.title }} &bull; ID {{ item.id }}\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutocompleteModule }, { kind: "component", type: i2$1.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: i2$1.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LookupAutocompleteCustomSearchExampleComponent, decorators: [{
             type: Component,
@@ -10809,7 +10807,7 @@ class PickerModalComponent {
         this.#modalInstance.save(selectedPeople);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PickerModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: PickerModalComponent, isStandalone: true, selector: "app-picker-modal", ngImport: i0, template: "<sky-modal class=\"lookup-custom-picker-modal\" headingText=\"Names\">\n  <sky-modal-content>\n    @if (peopleForm) {\n      <form [formGroup]=\"peopleForm\">\n        <sky-selection-box-grid>\n          @for (\n            personControl of peopleForm.controls.people.controls;\n            track personControl;\n            let i = $index\n          ) {\n            <sky-selection-box [control]=\"checkbox\">\n              <sky-icon iconName=\"person\" />\n              <sky-selection-box-header>\n                {{ people[i].name }}\n              </sky-selection-box-header>\n              <sky-selection-box-description>\n                {{ people[i].formal }}\n              </sky-selection-box-description>\n              <sky-checkbox #checkbox [formControl]=\"personControl\" />\n            </sky-selection-box>\n          }\n        </sky-selection-box-grid>\n      </form>\n    } @else {\n      <div class=\"wait-container\">\n        <sky-wait [isWaiting]=\"true\" />\n      </div>\n    }\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary lookup-custom-picker-save-button\"\n      type=\"button\"\n      (click)=\"save()\"\n    >\n      Save\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".wait-container{height:100px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySelectionBoxModule }, { kind: "component", type: i2$2.λ15, selector: "sky-selection-box-grid", inputs: ["alignItems"] }, { kind: "component", type: i2$2.λ17, selector: "sky-selection-box", inputs: ["control"] }, { kind: "component", type: i2$2.λ14, selector: "sky-selection-box-description" }, { kind: "component", type: i2$2.λ16, selector: "sky-selection-box-header" }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: PickerModalComponent, isStandalone: true, selector: "app-picker-modal", ngImport: i0, template: "<sky-modal class=\"lookup-custom-picker-modal\" headingText=\"Names\">\n  <sky-modal-content>\n    @if (peopleForm) {\n      <form [formGroup]=\"peopleForm\">\n        <sky-selection-box-grid>\n          @for (\n            personControl of peopleForm.controls.people.controls;\n            track personControl;\n            let i = $index\n          ) {\n            <sky-selection-box [control]=\"checkbox\">\n              <sky-icon iconName=\"person\" />\n              <sky-selection-box-header>\n                {{ people[i].name }}\n              </sky-selection-box-header>\n              <sky-selection-box-description>\n                {{ people[i].formal }}\n              </sky-selection-box-description>\n              <sky-checkbox\n                #checkbox\n                labelHidden\n                [formControl]=\"personControl\"\n                [labelText]=\"people[i].name\"\n              />\n            </sky-selection-box>\n          }\n        </sky-selection-box-grid>\n      </form>\n    } @else {\n      <div class=\"wait-container\">\n        <sky-wait [isWaiting]=\"true\" />\n      </div>\n    }\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary lookup-custom-picker-save-button\"\n      type=\"button\"\n      (click)=\"save()\"\n    >\n      Save\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".wait-container{height:100px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySelectionBoxModule }, { kind: "component", type: i2$2.λ15, selector: "sky-selection-box-grid", inputs: ["alignItems"] }, { kind: "component", type: i2$2.λ17, selector: "sky-selection-box", inputs: ["control"] }, { kind: "component", type: i2$2.λ14, selector: "sky-selection-box-description" }, { kind: "component", type: i2$2.λ16, selector: "sky-selection-box-header" }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PickerModalComponent, decorators: [{
             type: Component,
@@ -10821,7 +10819,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         SkyModalModule,
                         SkySelectionBoxModule,
                         SkyWaitModule,
-                    ], template: "<sky-modal class=\"lookup-custom-picker-modal\" headingText=\"Names\">\n  <sky-modal-content>\n    @if (peopleForm) {\n      <form [formGroup]=\"peopleForm\">\n        <sky-selection-box-grid>\n          @for (\n            personControl of peopleForm.controls.people.controls;\n            track personControl;\n            let i = $index\n          ) {\n            <sky-selection-box [control]=\"checkbox\">\n              <sky-icon iconName=\"person\" />\n              <sky-selection-box-header>\n                {{ people[i].name }}\n              </sky-selection-box-header>\n              <sky-selection-box-description>\n                {{ people[i].formal }}\n              </sky-selection-box-description>\n              <sky-checkbox #checkbox [formControl]=\"personControl\" />\n            </sky-selection-box>\n          }\n        </sky-selection-box-grid>\n      </form>\n    } @else {\n      <div class=\"wait-container\">\n        <sky-wait [isWaiting]=\"true\" />\n      </div>\n    }\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary lookup-custom-picker-save-button\"\n      type=\"button\"\n      (click)=\"save()\"\n    >\n      Save\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".wait-container{height:100px}\n"] }]
+                    ], template: "<sky-modal class=\"lookup-custom-picker-modal\" headingText=\"Names\">\n  <sky-modal-content>\n    @if (peopleForm) {\n      <form [formGroup]=\"peopleForm\">\n        <sky-selection-box-grid>\n          @for (\n            personControl of peopleForm.controls.people.controls;\n            track personControl;\n            let i = $index\n          ) {\n            <sky-selection-box [control]=\"checkbox\">\n              <sky-icon iconName=\"person\" />\n              <sky-selection-box-header>\n                {{ people[i].name }}\n              </sky-selection-box-header>\n              <sky-selection-box-description>\n                {{ people[i].formal }}\n              </sky-selection-box-description>\n              <sky-checkbox\n                #checkbox\n                labelHidden\n                [formControl]=\"personControl\"\n                [labelText]=\"people[i].name\"\n              />\n            </sky-selection-box>\n          }\n        </sky-selection-box-grid>\n      </form>\n    } @else {\n      <div class=\"wait-container\">\n        <sky-wait [isWaiting]=\"true\" />\n      </div>\n    }\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary lookup-custom-picker-save-button\"\n      type=\"button\"\n      (click)=\"save()\"\n    >\n      Save\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".wait-container{height:100px}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -12380,7 +12378,7 @@ class NavbarExampleComponent {
         alert(buttonText + ' button clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NavbarExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: NavbarExampleComponent, isStandalone: true, selector: "app-navbar-example", ngImport: i0, template: "<sky-navbar data-sky-id=\"basic-navbar\">\n  <sky-navbar-item data-sky-id=\"navbar-item-1\">\n    <a\n      routerLink=\"/\"\n      routerLinkActive=\"sky-navbar-item-active\"\n      (click)=\"onItemClick('Selected item')\"\n    >\n      Selected item\n    </a>\n  </sky-navbar-item>\n  <sky-navbar-item data-sky-id=\"navbar-item-2\">\n    <sky-dropdown>\n      <sky-dropdown-button> Show dropdown </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item>\n          <a routerLink=\"/\" (click)=\"onItemClick('Item 1')\"> Item 1 </a>\n        </sky-dropdown-item>\n        <sky-dropdown-item>\n          <a routerLink=\"/\" (click)=\"onItemClick('Item 2')\"> Item 2 </a>\n        </sky-dropdown-item>\n        <sky-dropdown-item>\n          <a routerLink=\"/\" (click)=\"onItemClick('Item 3')\"> Item 3 </a>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </sky-navbar-item>\n</sky-navbar>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$b.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1$b.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$3.λ2, selector: "sky-dropdown-button" }, { 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"] }, { kind: "ngmodule", type: SkyNavbarModule }, { kind: "component", type: i3$3.λ1, selector: "sky-navbar" }, { kind: "component", type: i3$3.λ2, selector: "sky-navbar-item", inputs: ["active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: NavbarExampleComponent, isStandalone: true, selector: "app-navbar-example", ngImport: i0, template: "<sky-navbar data-sky-id=\"basic-navbar\">\n  <sky-navbar-item data-sky-id=\"navbar-item-1\">\n    <a\n      routerLink=\"/\"\n      routerLinkActive=\"sky-navbar-item-active\"\n      (click)=\"onItemClick('Selected item')\"\n    >\n      Selected item\n    </a>\n  </sky-navbar-item>\n  <sky-navbar-item data-sky-id=\"navbar-item-2\">\n    <sky-dropdown>\n      <sky-dropdown-button> Show dropdown </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item>\n          <a routerLink=\"/\" (click)=\"onItemClick('Item 1')\"> Item 1 </a>\n        </sky-dropdown-item>\n        <sky-dropdown-item>\n          <a routerLink=\"/\" (click)=\"onItemClick('Item 2')\"> Item 2 </a>\n        </sky-dropdown-item>\n        <sky-dropdown-item>\n          <a routerLink=\"/\" (click)=\"onItemClick('Item 3')\"> Item 3 </a>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </sky-navbar-item>\n</sky-navbar>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$c.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1$c.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$3.λ2, selector: "sky-dropdown-button" }, { 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"] }, { kind: "ngmodule", type: SkyNavbarModule }, { kind: "component", type: i3$2.λ1, selector: "sky-navbar" }, { kind: "component", type: i3$2.λ2, selector: "sky-navbar-item", inputs: ["active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NavbarExampleComponent, decorators: [{
             type: Component,
@@ -12614,7 +12612,7 @@ class PagesActionHubExampleComponent {
         this.title = 'Active accounts';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesActionHubExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: PagesActionHubExampleComponent, isStandalone: true, selector: "app-pages-action-hub-example", ngImport: i0, template: "<sky-action-hub\n  data-sky-id=\"action-hub\"\n  [needsAttention]=\"needsAttention\"\n  [recentLinks]=\"recentLinks\"\n  [relatedLinks]=\"relatedLinks\"\n  [settingsLinks]=\"settingsLinks\"\n  [title]=\"title\"\n>\n  <sky-action-hub-buttons>\n    @for (button of buttons; track button) {\n      <a\n        class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n        [attr.aria-label]=\"button.ariaLabel\"\n        [href]=\"button.permalink.url\"\n      >\n        {{ button.label }}\n      </a>\n    }\n  </sky-action-hub-buttons>\n\n  <sky-action-hub-content>\n    <h2>Additional content</h2>\n    <p>More content can go here as needed for the functional area.</p>\n  </sky-action-hub-content>\n</sky-action-hub>\n", dependencies: [{ kind: "ngmodule", type: SkyActionHubModule }, { kind: "component", type: i1$c.λ2, selector: "sky-action-hub-buttons" }, { kind: "component", type: i1$c.λ1, selector: "sky-action-hub", inputs: ["needsAttention", "parentLink", "recentLinks", "relatedLinks", "settingsLinks", "title"] }, { kind: "component", type: i1$c.λ3, selector: "sky-action-hub-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: PagesActionHubExampleComponent, isStandalone: true, selector: "app-pages-action-hub-example", ngImport: i0, template: "<sky-action-hub\n  data-sky-id=\"action-hub\"\n  [needsAttention]=\"needsAttention\"\n  [recentLinks]=\"recentLinks\"\n  [relatedLinks]=\"relatedLinks\"\n  [settingsLinks]=\"settingsLinks\"\n  [title]=\"title\"\n>\n  <sky-action-hub-buttons>\n    @for (button of buttons; track button) {\n      <a\n        class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n        [attr.aria-label]=\"button.ariaLabel\"\n        [href]=\"button.permalink.url\"\n      >\n        {{ button.label }}\n      </a>\n    }\n  </sky-action-hub-buttons>\n\n  <sky-action-hub-content>\n    <h2>Additional content</h2>\n    <p>More content can go here as needed for the functional area.</p>\n  </sky-action-hub-content>\n</sky-action-hub>\n", dependencies: [{ kind: "ngmodule", type: SkyActionHubModule }, { kind: "component", type: i1$d.λ2, selector: "sky-action-hub-buttons" }, { kind: "component", type: i1$d.λ1, selector: "sky-action-hub", inputs: ["needsAttention", "parentLink", "recentLinks", "relatedLinks", "settingsLinks", "title"] }, { kind: "component", type: i1$d.λ3, selector: "sky-action-hub-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesActionHubExampleComponent, decorators: [{
             type: Component,
@@ -12780,7 +12778,7 @@ class PagesPageDataManagerSplitViewFitLayoutExampleComponent {
         this.splitViewStream.next(message);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesPageDataManagerSplitViewFitLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: PagesPageDataManagerSplitViewFitLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-split-view-data-manager-example", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-page layout=\"fit\">\n  <sky-page-header pageTitle=\"Split view with data manager\" />\n  <sky-page-content>\n    <sky-data-manager [dock]=\"dock\">\n      <sky-data-manager-toolbar />\n      <sky-data-view viewId=\"dataManagerView\">\n        <sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n          <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\">\n            <sky-repeater [activeIndex]=\"activeIndex\">\n              @for (item of items; track item; let i = $index) {\n                <sky-repeater-item\n                  (click)=\"onItemClick(i)\"\n                  (keyup.enter)=\"onItemClick(i)\"\n                >\n                  <sky-repeater-item-content>\n                    {{ item.amount }} <br />\n                    {{ item.date }} <br />\n                    {{ item.vendor }}\n                  </sky-repeater-item-content>\n                </sky-repeater-item>\n              }\n            </sky-repeater>\n          </sky-split-view-drawer>\n\n          <sky-split-view-workspace ariaLabel=\"Transaction form\">\n            <sky-split-view-workspace-content\n              class=\"sky-theme-padding-inset-balanced-xl\"\n            >\n              <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n                <sky-description-list labelWidth=\"150px\">\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Receipt amount\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.amount }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Date\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.date }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Vendor\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.vendor }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Receipt image\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.receiptImage }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                </sky-description-list>\n                <sky-input-box labelText=\"Approved amount\" stacked=\"true\">\n                  <input formControlName=\"approvedAmount\" type=\"text\" />\n                </sky-input-box>\n                <sky-input-box labelText=\"Comments\">\n                  <textarea formControlName=\"comments\"></textarea>\n                </sky-input-box>\n              </form>\n            </sky-split-view-workspace-content>\n            <sky-split-view-workspace-footer>\n              <sky-summary-action-bar>\n                <sky-summary-action-bar-actions>\n                  <sky-summary-action-bar-primary-action\n                    (actionClick)=\"onApprove()\"\n                  >\n                    Approve expense\n                  </sky-summary-action-bar-primary-action>\n                  <sky-summary-action-bar-secondary-actions>\n                    <sky-summary-action-bar-secondary-action\n                      (actionClick)=\"onDeny()\"\n                    >\n                      Deny expense\n                    </sky-summary-action-bar-secondary-action>\n                  </sky-summary-action-bar-secondary-actions>\n                </sky-summary-action-bar-actions>\n              </sky-summary-action-bar>\n            </sky-split-view-workspace-footer>\n          </sky-split-view-workspace>\n        </sky-split-view>\n      </sky-data-view>\n    </sky-data-manager>\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$c.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$c.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$c.λ7, selector: "sky-page-content" }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i2$3.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i2$3.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i2$3.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySplitViewModule }, { kind: "component", type: i5.λ1, selector: "sky-split-view", inputs: ["backButtonText", "bindHeightToWindow", "dock", "messageStream"] }, { kind: "component", type: i5.λ2, selector: "sky-split-view-drawer", inputs: ["ariaLabel", "width"] }, { kind: "component", type: i5.λ3, selector: "sky-split-view-workspace", inputs: ["ariaLabel"] }, { kind: "component", type: i5.λ4, selector: "sky-split-view-workspace-content" }, { kind: "component", type: i5.λ5, selector: "sky-split-view-workspace-footer" }, { kind: "ngmodule", type: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar", inputs: ["formErrors"] }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: PagesPageDataManagerSplitViewFitLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-split-view-data-manager-example", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-page layout=\"fit\">\n  <sky-page-header pageTitle=\"Split view with data manager\" />\n  <sky-page-content>\n    <sky-data-manager [dock]=\"dock\">\n      <sky-data-manager-toolbar />\n      <sky-data-view viewId=\"dataManagerView\">\n        <sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n          <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\">\n            <sky-repeater [activeIndex]=\"activeIndex\">\n              @for (item of items; track item; let i = $index) {\n                <sky-repeater-item\n                  (click)=\"onItemClick(i)\"\n                  (keyup.enter)=\"onItemClick(i)\"\n                >\n                  <sky-repeater-item-content>\n                    {{ item.amount }} <br />\n                    {{ item.date }} <br />\n                    {{ item.vendor }}\n                  </sky-repeater-item-content>\n                </sky-repeater-item>\n              }\n            </sky-repeater>\n          </sky-split-view-drawer>\n\n          <sky-split-view-workspace ariaLabel=\"Transaction form\">\n            <sky-split-view-workspace-content\n              class=\"sky-theme-padding-inset-balanced-xl\"\n            >\n              <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n                <sky-description-list labelWidth=\"150px\">\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Receipt amount\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.amount }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Date\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.date }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Vendor\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.vendor }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Receipt image\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.receiptImage }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                </sky-description-list>\n                <sky-input-box labelText=\"Approved amount\" stacked=\"true\">\n                  <input formControlName=\"approvedAmount\" type=\"text\" />\n                </sky-input-box>\n                <sky-input-box labelText=\"Comments\">\n                  <textarea formControlName=\"comments\"></textarea>\n                </sky-input-box>\n              </form>\n            </sky-split-view-workspace-content>\n            <sky-split-view-workspace-footer>\n              <sky-summary-action-bar>\n                <sky-summary-action-bar-actions>\n                  <sky-summary-action-bar-primary-action\n                    (actionClick)=\"onApprove()\"\n                  >\n                    Approve expense\n                  </sky-summary-action-bar-primary-action>\n                  <sky-summary-action-bar-secondary-actions>\n                    <sky-summary-action-bar-secondary-action\n                      (actionClick)=\"onDeny()\"\n                    >\n                      Deny expense\n                    </sky-summary-action-bar-secondary-action>\n                  </sky-summary-action-bar-secondary-actions>\n                </sky-summary-action-bar-actions>\n              </sky-summary-action-bar>\n            </sky-split-view-workspace-footer>\n          </sky-split-view-workspace>\n        </sky-split-view>\n      </sky-data-view>\n    </sky-data-manager>\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$d.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$d.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$d.λ7, selector: "sky-page-content" }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i2$3.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i2$3.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i2$3.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySplitViewModule }, { kind: "component", type: i5.λ1, selector: "sky-split-view", inputs: ["backButtonText", "bindHeightToWindow", "dock", "messageStream"] }, { kind: "component", type: i5.λ2, selector: "sky-split-view-drawer", inputs: ["ariaLabel", "width"] }, { kind: "component", type: i5.λ3, selector: "sky-split-view-workspace", inputs: ["ariaLabel"] }, { kind: "component", type: i5.λ4, selector: "sky-split-view-workspace-content" }, { kind: "component", type: i5.λ5, selector: "sky-split-view-workspace-footer" }, { kind: "ngmodule", type: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar", inputs: ["formErrors"] }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesPageDataManagerSplitViewFitLayoutExampleComponent, decorators: [{
             type: Component,
@@ -12818,7 +12816,7 @@ class TileMyActionsComponent {
         alert(buttonText + ' was clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TileMyActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: TileMyActionsComponent, isStandalone: true, selector: "app-tile-my-actions", ngImport: i0, template: "<sky-tile tileName=\"My actions\">\n  <sky-tile-title> My actions </sky-tile-title>\n  <sky-tile-summary> 3 </sky-tile-summary>\n  <sky-tile-content>\n    <sky-tile-content-section>\n      <sky-repeater data-sky-id=\"repeater-example\">\n        @for (item of items; track item) {\n          <sky-repeater-item [itemName]=\"item.accessibilityLabel\">\n            @if (item.title) {\n              <sky-repeater-item-title class=\"example-repeater-flex\">\n                <div\n                  class=\"example-repeater-item-title sky-theme-margin-bottom-s\"\n                >\n                  <a href=\"/\">{{ item.title }}</a>\n                </div>\n                <div class=\"sky-theme-font-body-deemphasized-m\">\n                  {{ item.date }}\n                </div>\n              </sky-repeater-item-title>\n            }\n            <sky-repeater-item-context-menu>\n              <sky-dropdown buttonType=\"context-menu\">\n                <sky-dropdown-menu>\n                  <sky-dropdown-item>\n                    <button\n                      type=\"button\"\n                      [attr.aria-label]=\"\n                        'Action 1 for ' +\n                        (item.title ?? item.accessibilityLabel)\n                      \"\n                      (click)=\"onActionClicked('Action 1')\"\n                    >\n                      Edit\n                    </button>\n                  </sky-dropdown-item>\n                  <sky-dropdown-item>\n                    <button\n                      type=\"button\"\n                      [attr.aria-label]=\"\n                        'Action 2 for ' +\n                        (item.title ?? item.accessibilityLabel)\n                      \"\n                      (click)=\"onActionClicked('Action 2')\"\n                    >\n                      Mark as complete\n                    </button>\n                  </sky-dropdown-item>\n                </sky-dropdown-menu>\n              </sky-dropdown>\n            </sky-repeater-item-context-menu>\n          </sky-repeater-item>\n        }\n      </sky-repeater>\n    </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$d.λ5, selector: "sky-tile-content" }, { kind: "component", type: i1$d.λ4, selector: "sky-tile-content-section" }, { kind: "component", type: i1$d.λ1, selector: "sky-tile", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "showSettings", "showHelp", "tileName", "isCollapsed"], outputs: ["settingsClick", "isCollapsedChange", "helpClick"] }, { kind: "component", type: i1$d.λ2, selector: "sky-tile-summary" }, { kind: "component", type: i1$d.λ3, selector: "sky-tile-title" }, { 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"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i4.λ12, selector: "sky-repeater-item-title" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: TileMyActionsComponent, isStandalone: true, selector: "app-tile-my-actions", ngImport: i0, template: "<sky-tile tileName=\"My actions\">\n  <sky-tile-title> My actions </sky-tile-title>\n  <sky-tile-summary> 3 </sky-tile-summary>\n  <sky-tile-content>\n    <sky-tile-content-section>\n      <sky-repeater data-sky-id=\"repeater-example\">\n        @for (item of items; track item) {\n          <sky-repeater-item [itemName]=\"item.accessibilityLabel\">\n            @if (item.title) {\n              <sky-repeater-item-title class=\"example-repeater-flex\">\n                <div\n                  class=\"example-repeater-item-title sky-theme-margin-bottom-s\"\n                >\n                  <a href=\"/\">{{ item.title }}</a>\n                </div>\n                <div class=\"sky-theme-font-body-deemphasized-m\">\n                  {{ item.date }}\n                </div>\n              </sky-repeater-item-title>\n            }\n            <sky-repeater-item-context-menu>\n              <sky-dropdown buttonType=\"context-menu\">\n                <sky-dropdown-menu>\n                  <sky-dropdown-item>\n                    <button\n                      type=\"button\"\n                      [attr.aria-label]=\"\n                        'Action 1 for ' +\n                        (item.title ?? item.accessibilityLabel)\n                      \"\n                      (click)=\"onActionClicked('Action 1')\"\n                    >\n                      Edit\n                    </button>\n                  </sky-dropdown-item>\n                  <sky-dropdown-item>\n                    <button\n                      type=\"button\"\n                      [attr.aria-label]=\"\n                        'Action 2 for ' +\n                        (item.title ?? item.accessibilityLabel)\n                      \"\n                      (click)=\"onActionClicked('Action 2')\"\n                    >\n                      Mark as complete\n                    </button>\n                  </sky-dropdown-item>\n                </sky-dropdown-menu>\n              </sky-dropdown>\n            </sky-repeater-item-context-menu>\n          </sky-repeater-item>\n        }\n      </sky-repeater>\n    </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$e.λ5, selector: "sky-tile-content" }, { kind: "component", type: i1$e.λ4, selector: "sky-tile-content-section" }, { kind: "component", type: i1$e.λ1, selector: "sky-tile", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "showSettings", "showHelp", "tileName", "isCollapsed"], outputs: ["settingsClick", "isCollapsedChange", "helpClick"] }, { kind: "component", type: i1$e.λ2, selector: "sky-tile-summary" }, { kind: "component", type: i1$e.λ3, selector: "sky-tile-title" }, { 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"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i4.λ12, selector: "sky-repeater-item-title" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TileMyActionsComponent, decorators: [{
             type: Component,
@@ -12827,7 +12825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 
 class TileUpdatesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TileUpdatesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: TileUpdatesComponent, isStandalone: true, selector: "app-tile-updates", ngImport: i0, template: "<sky-tile tileName=\"Updates\" [showSettings]=\"false\">\n  <sky-tile-title> Updates </sky-tile-title>\n  <sky-tile-summary> 2 </sky-tile-summary>\n  <sky-tile-content>\n    <sky-tile-content-section>\n      <h3 class=\"sky-theme-margin-bottom-s\">\n        <a href=\"#\">Prepare for Giving Tuesday</a>\n      </h3>\n      <div class=\"sky-theme-font-body-deemphasized-m sky-theme-margin-bottom-s\">\n        10/1/2025\n      </div>\n      <div>\n        Tips for creating a clear and compelling message, leveraging social\n        media and email marketing, and providing multiple ways for donors to\n        give.\n      </div>\n    </sky-tile-content-section>\n    <sky-tile-content-section>\n      <h3 class=\"sky-theme-margin-bottom-s\">\n        <a href=\"#\">What's new</a>\n      </h3>\n      <div class=\"sky-theme-font-body-deemphasized-m sky-theme-margin-bottom-s\">\n        9/28/2025\n      </div>\n      <ul>\n        <li>Enhancement visualizations in reporting capabilities</li>\n        <li>New automation for routine tasks</li>\n        <li>Scan attachments for viruses</li>\n      </ul>\n    </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$d.λ5, selector: "sky-tile-content" }, { kind: "component", type: i1$d.λ4, selector: "sky-tile-content-section" }, { kind: "component", type: i1$d.λ1, selector: "sky-tile", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "showSettings", "showHelp", "tileName", "isCollapsed"], outputs: ["settingsClick", "isCollapsedChange", "helpClick"] }, { kind: "component", type: i1$d.λ2, selector: "sky-tile-summary" }, { kind: "component", type: i1$d.λ3, selector: "sky-tile-title" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: TileUpdatesComponent, isStandalone: true, selector: "app-tile-updates", ngImport: i0, template: "<sky-tile tileName=\"Updates\" [showSettings]=\"false\">\n  <sky-tile-title> Updates </sky-tile-title>\n  <sky-tile-summary> 2 </sky-tile-summary>\n  <sky-tile-content>\n    <sky-tile-content-section>\n      <h3 class=\"sky-theme-margin-bottom-s\">\n        <a href=\"#\">Prepare for Giving Tuesday</a>\n      </h3>\n      <div class=\"sky-theme-font-body-deemphasized-m sky-theme-margin-bottom-s\">\n        10/1/2025\n      </div>\n      <div>\n        Tips for creating a clear and compelling message, leveraging social\n        media and email marketing, and providing multiple ways for donors to\n        give.\n      </div>\n    </sky-tile-content-section>\n    <sky-tile-content-section>\n      <h3 class=\"sky-theme-margin-bottom-s\">\n        <a href=\"#\">What's new</a>\n      </h3>\n      <div class=\"sky-theme-font-body-deemphasized-m sky-theme-margin-bottom-s\">\n        9/28/2025\n      </div>\n      <ul>\n        <li>Enhancement visualizations in reporting capabilities</li>\n        <li>New automation for routine tasks</li>\n        <li>Scan attachments for viruses</li>\n      </ul>\n    </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$e.λ5, selector: "sky-tile-content" }, { kind: "component", type: i1$e.λ4, selector: "sky-tile-content-section" }, { kind: "component", type: i1$e.λ1, selector: "sky-tile", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "showSettings", "showHelp", "tileName", "isCollapsed"], outputs: ["settingsClick", "isCollapsedChange", "helpClick"] }, { kind: "component", type: i1$e.λ2, selector: "sky-tile-summary" }, { kind: "component", type: i1$e.λ3, selector: "sky-tile-title" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TileUpdatesComponent, decorators: [{
             type: Component,
@@ -12882,7 +12880,7 @@ class HomePageContentComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: HomePageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: HomePageContentComponent, isStandalone: true, selector: "app-home-page-content", ngImport: i0, template: "<sky-tile-dashboard [(config)]=\"dashboardConfig\" />\n", dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$d.λ7, selector: "sky-tile-dashboard", inputs: ["config", "messageStream", "settingsKey"], outputs: ["configChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: HomePageContentComponent, isStandalone: true, selector: "app-home-page-content", ngImport: i0, template: "<sky-tile-dashboard [(config)]=\"dashboardConfig\" />\n", dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$e.λ7, selector: "sky-tile-dashboard", inputs: ["config", "messageStream", "settingsKey"], outputs: ["configChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: HomePageContentComponent, decorators: [{
             type: Component,
@@ -12909,7 +12907,7 @@ class PagesPageHomePageBlocksLayoutExampleComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesPageHomePageBlocksLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: PagesPageHomePageBlocksLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-home-page-blocks-layout-example", ngImport: i0, template: "<sky-page layout=\"blocks\">\n  <sky-page-header pageTitle=\"Home\">\n    <sky-page-header-actions>\n      <button type=\"button\" class=\"sky-btn sky-btn-default\">\n        <sky-icon iconName=\"add\" /> New\n      </button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-home-page-content />\n  </sky-page-content>\n\n  <sky-page-links>\n    <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n    <sky-link-list headingText=\"Resources\">\n      <sky-link-list-item>\n        <a href=\"#\">Help</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <a href=\"#\">Support</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <a href=\"#\">Training</a>\n      </sky-link-list-item>\n    </sky-link-list>\n  </sky-page-links>\n</sky-page>\n", dependencies: [{ kind: "component", type: HomePageContentComponent, selector: "app-home-page-content" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$c.λ13, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "component", type: i1$c.λ14, selector: "sky-link-list-item" }, { kind: "component", type: i1$c.λ15, selector: "sky-link-list-recently-accessed", inputs: ["recentLinks"] }, { kind: "component", type: i1$c.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$c.λ9, selector: "sky-page-header-actions" }, { kind: "component", type: i1$c.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$c.λ7, selector: "sky-page-content" }, { kind: "component", type: i1$c.λ12, selector: "sky-page-links" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: PagesPageHomePageBlocksLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-home-page-blocks-layout-example", ngImport: i0, template: "<sky-page layout=\"blocks\">\n  <sky-page-header pageTitle=\"Home\">\n    <sky-page-header-actions>\n      <button type=\"button\" class=\"sky-btn sky-btn-default\">\n        <sky-icon iconName=\"add\" /> New\n      </button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-home-page-content />\n  </sky-page-content>\n\n  <sky-page-links>\n    <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n    <sky-link-list headingText=\"Resources\">\n      <sky-link-list-item>\n        <a href=\"#\">Help</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <a href=\"#\">Support</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <a href=\"#\">Training</a>\n      </sky-link-list-item>\n    </sky-link-list>\n  </sky-page-links>\n</sky-page>\n", dependencies: [{ kind: "component", type: HomePageContentComponent, selector: "app-home-page-content" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$d.λ13, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "component", type: i1$d.λ14, selector: "sky-link-list-item" }, { kind: "component", type: i1$d.λ15, selector: "sky-link-list-recently-accessed", inputs: ["recentLinks"] }, { kind: "component", type: i1$d.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$d.λ9, selector: "sky-page-header-actions" }, { kind: "component", type: i1$d.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$d.λ7, selector: "sky-page-content" }, { kind: "component", type: i1$d.λ12, selector: "sky-page-links" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesPageHomePageBlocksLayoutExampleComponent, decorators: [{
             type: Component,
@@ -13077,7 +13075,7 @@ let ListPageContentComponent$1 = class ListPageContentComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ListPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: ListPageContentComponent, isStandalone: true, selector: "app-list-page-content", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <div class=\"sky-theme-margin-bottom-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button\n          aria-label=\"New dashboard\"\n          class=\"sky-btn sky-btn-default\"\n          type=\"button\"\n        >\n          <sky-icon iconName=\"add\" />\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n      <sky-list-summary>\n        <sky-list-summary-item labelText=\"Dashboards\" [value]=\"items.length\" />\n      </sky-list-summary>\n    </sky-data-manager-toolbar>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" />\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n", dependencies: [{ kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "toolbar", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipSwitchShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "calculatedColumns", "columnHeaderEdit", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "animateColumnResizing", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "includeHiddenColumnsInCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "suppressOverlays", "overlayComponent", "overlayComponentParams", "overlayComponentSelector", "activeOverlay", "activeOverlayParams", "processFileInput", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "paginationPanels", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "notesDataSource", "noteTrigger", "noteShowDelay", "noteHideDelay", "formulaFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "refreshAfterGroupEdit", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "masterDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupHideColumnsUntilExpanded", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "pivotPanelSuppressSort", "suppressGroupRowsSticky", "groupHierarchyConfig", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "suppressContentVisibilityAuto", "enableContentVisibilityAuto", "contentVisibilityAutoDelay", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "getColumnMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "tabToNextGridContainer", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "isMasterOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "autoGenerateColumnDefs", "processAutoGeneratedColumnDefs", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "calculatedColumnCreated", "calculatedColumnExpressionChanged", "calculatedColumnRemoved", "calculatedColumnValidationStateChanged", "columnVisible", "columnPinned", "columnHeaderNameChanged", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "ngmodule", type: SkyAgGridModule }, { kind: "directive", type: i1$4.λ14, selector: "[skyAgGridDataManagerAdapter]", inputs: ["viewId"] }, { kind: "component", type: i1$4.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i2$3.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i2$3.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i2$3.λ4, selector: "sky-data-manager-toolbar-primary-item" }, { kind: "component", type: i2$3.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i4.λ16, selector: "sky-list-summary" }, { kind: "component", type: i4.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: ListPageContentComponent, isStandalone: true, selector: "app-list-page-content", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <div class=\"sky-theme-margin-bottom-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button\n          aria-label=\"New dashboard\"\n          class=\"sky-btn sky-btn-default\"\n          type=\"button\"\n        >\n          <sky-icon iconName=\"add\" />\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n      <sky-list-summary>\n        <sky-list-summary-item labelText=\"Dashboards\" [value]=\"items.length\" />\n      </sky-list-summary>\n    </sky-data-manager-toolbar>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" />\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n", dependencies: [{ kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "toolbar", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipSwitchShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "calculatedColumns", "columnHeaderEdit", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "animateColumnResizing", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "includeHiddenColumnsInCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "suppressOverlays", "overlayComponent", "overlayComponentParams", "overlayComponentSelector", "activeOverlay", "activeOverlayParams", "processFileInput", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "paginationPanels", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "notesDataSource", "noteTrigger", "noteShowDelay", "noteHideDelay", "formulaFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "refreshAfterGroupEdit", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "masterDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupHideColumnsUntilExpanded", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "pivotPanelSuppressSort", "suppressGroupRowsSticky", "groupHierarchyConfig", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "suppressContentVisibilityAuto", "enableContentVisibilityAuto", "contentVisibilityAutoDelay", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "getColumnMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "tabToNextGridContainer", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "isMasterOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "autoGenerateColumnDefs", "processAutoGeneratedColumnDefs", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "calculatedColumnCreated", "calculatedColumnExpressionChanged", "calculatedColumnRemoved", "calculatedColumnValidationStateChanged", "columnVisible", "columnPinned", "columnHeaderNameChanged", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "ngmodule", type: SkyAgGridModule }, { kind: "directive", type: i1$4.λ14, selector: "[skyAgGridDataManagerAdapter]", inputs: ["viewId"] }, { kind: "component", type: i1$4.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i2$3.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i2$3.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i2$3.λ4, selector: "sky-data-manager-toolbar-primary-item" }, { kind: "component", type: i2$3.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i4.λ16, selector: "sky-list-summary" }, { kind: "component", type: i4.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ListPageContentComponent$1, decorators: [{
             type: Component,
@@ -13096,7 +13094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  */
 class PagesPageListPageListLayoutExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesPageListPageListLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: PagesPageListPageListLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-list-page-list-layout-example", ngImport: i0, template: "<sky-page layout=\"list\" helpKey=\"example-help\">\n  <sky-page-header pageTitle=\"Dashboards\" />\n  <sky-page-content>\n    <app-list-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "component", type: ListPageContentComponent$1, selector: "app-list-page-content" }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$c.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$c.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$c.λ7, selector: "sky-page-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: PagesPageListPageListLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-list-page-list-layout-example", ngImport: i0, template: "<sky-page layout=\"list\" helpKey=\"example-help\">\n  <sky-page-header pageTitle=\"Dashboards\" />\n  <sky-page-content>\n    <app-list-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "component", type: ListPageContentComponent$1, selector: "app-list-page-content" }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$d.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$d.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$d.λ7, selector: "sky-page-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesPageListPageListLayoutExampleComponent, decorators: [{
             type: Component,
@@ -13230,7 +13228,7 @@ class ListPageContactsGridComponent {
         this.#dataManagerService.initDataView(this.#viewConfig);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ListPageContactsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: ListPageContactsGridComponent, isStandalone: true, selector: "app-list-page-contacts-grid", inputs: { contacts: "contacts" }, providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <div class=\"sky-theme-margin-bottom-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button\n          aria-label=\"New contact\"\n          class=\"sky-btn sky-btn-default\"\n          type=\"button\"\n        >\n          <sky-icon iconName=\"add\" />\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n      <sky-list-summary>\n        <sky-list-summary-item labelText=\"Contacts\" [value]=\"contacts.length\" />\n      </sky-list-summary>\n    </sky-data-manager-toolbar>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"contacts\" />\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n", dependencies: [{ kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "toolbar", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipSwitchShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "calculatedColumns", "columnHeaderEdit", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "animateColumnResizing", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "includeHiddenColumnsInCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "suppressOverlays", "overlayComponent", "overlayComponentParams", "overlayComponentSelector", "activeOverlay", "activeOverlayParams", "processFileInput", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "paginationPanels", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "notesDataSource", "noteTrigger", "noteShowDelay", "noteHideDelay", "formulaFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "refreshAfterGroupEdit", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "masterDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupHideColumnsUntilExpanded", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "pivotPanelSuppressSort", "suppressGroupRowsSticky", "groupHierarchyConfig", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "suppressContentVisibilityAuto", "enableContentVisibilityAuto", "contentVisibilityAutoDelay", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "getColumnMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "tabToNextGridContainer", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "isMasterOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "autoGenerateColumnDefs", "processAutoGeneratedColumnDefs", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "calculatedColumnCreated", "calculatedColumnExpressionChanged", "calculatedColumnRemoved", "calculatedColumnValidationStateChanged", "columnVisible", "columnPinned", "columnHeaderNameChanged", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "ngmodule", type: SkyAgGridModule }, { kind: "directive", type: i1$4.λ14, selector: "[skyAgGridDataManagerAdapter]", inputs: ["viewId"] }, { kind: "component", type: i1$4.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i2$3.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i2$3.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i2$3.λ4, selector: "sky-data-manager-toolbar-primary-item" }, { kind: "component", type: i2$3.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i4.λ16, selector: "sky-list-summary" }, { kind: "component", type: i4.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: ListPageContactsGridComponent, isStandalone: true, selector: "app-list-page-contacts-grid", inputs: { contacts: "contacts" }, providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <div class=\"sky-theme-margin-bottom-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button\n          aria-label=\"New contact\"\n          class=\"sky-btn sky-btn-default\"\n          type=\"button\"\n        >\n          <sky-icon iconName=\"add\" />\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n      <sky-list-summary>\n        <sky-list-summary-item labelText=\"Contacts\" [value]=\"contacts.length\" />\n      </sky-list-summary>\n    </sky-data-manager-toolbar>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"contacts\" />\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n", dependencies: [{ kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "toolbar", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipSwitchShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "calculatedColumns", "columnHeaderEdit", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "animateColumnResizing", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "includeHiddenColumnsInCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "suppressOverlays", "overlayComponent", "overlayComponentParams", "overlayComponentSelector", "activeOverlay", "activeOverlayParams", "processFileInput", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "paginationPanels", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "notesDataSource", "noteTrigger", "noteShowDelay", "noteHideDelay", "formulaFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "refreshAfterGroupEdit", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "masterDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupHideColumnsUntilExpanded", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "pivotPanelSuppressSort", "suppressGroupRowsSticky", "groupHierarchyConfig", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "suppressContentVisibilityAuto", "enableContentVisibilityAuto", "contentVisibilityAutoDelay", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "getColumnMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "tabToNextGridContainer", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "isMasterOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "autoGenerateColumnDefs", "processAutoGeneratedColumnDefs", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "calculatedColumnCreated", "calculatedColumnExpressionChanged", "calculatedColumnRemoved", "calculatedColumnValidationStateChanged", "columnVisible", "columnPinned", "columnHeaderNameChanged", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "ngmodule", type: SkyAgGridModule }, { kind: "directive", type: i1$4.λ14, selector: "[skyAgGridDataManagerAdapter]", inputs: ["viewId"] }, { kind: "component", type: i1$4.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i2$3.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i2$3.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i2$3.λ4, selector: "sky-data-manager-toolbar-primary-item" }, { kind: "component", type: i2$3.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i4.λ16, selector: "sky-list-summary" }, { kind: "component", type: i4.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ListPageContactsGridComponent, decorators: [{
             type: Component,
@@ -13323,7 +13321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  */
 class PagesPageListPageTabsLayoutExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesPageListPageTabsLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: PagesPageListPageTabsLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-list-page-tabs-layout-example", ngImport: i0, template: "<sky-page layout=\"tabs\" helpKey=\"example-help\">\n  <sky-page-header pageTitle=\"Contacts\" />\n  <sky-page-content>\n    <app-list-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "component", type: ListPageContentComponent, selector: "app-list-page-content" }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$c.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$c.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$c.λ7, selector: "sky-page-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: PagesPageListPageTabsLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-list-page-tabs-layout-example", ngImport: i0, template: "<sky-page layout=\"tabs\" helpKey=\"example-help\">\n  <sky-page-header pageTitle=\"Contacts\" />\n  <sky-page-content>\n    <app-list-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "component", type: ListPageContentComponent, selector: "app-list-page-content" }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$d.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$d.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$d.λ7, selector: "sky-page-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesPageListPageTabsLayoutExampleComponent, decorators: [{
             type: Component,
@@ -13402,7 +13400,7 @@ let RecordPageContentComponent$1 = class RecordPageContentComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RecordPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: RecordPageContentComponent, isStandalone: true, selector: "app-record-page-content", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Details\">\n        <sky-box-controls>\n          <button\n            aria-label=\"Edit button for details\"\n            class=\"sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n          >\n            <sky-icon iconName=\"edit\" />\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            @for (recordDetail of recordDetails; track recordDetail.detail) {\n              <sky-description-list-content>\n                <sky-description-list-term>\n                  {{ recordDetail.detail }}\n                </sky-description-list-term>\n                <sky-description-list-description>\n                  {{ recordDetail.info }}\n                </sky-description-list-description>\n              </sky-description-list-content>\n            }\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-theme-font-heading-4\">Actuals</h3>\n              @for (\n                actual of actualPayments;\n                track actual.category;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < actualPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ actual.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-theme-font-heading-4\">Projected</h3>\n              @for (\n                projected of projectedPayments;\n                track projected;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ projected.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>\n                    {{ projected.category }}\n                  </sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box headingText=\"Recent activity\">\n        <sky-box-content>\n          <sky-repeater>\n            @for (activity of recentActivity; track activity.date) {\n              <sky-repeater-item>\n                <sky-repeater-item-content>\n                  <div class=\"sky-theme-margin-bottom-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-theme-font-body-deemphasized-m\">\n                    {{ activity.date }}\n                  </div>\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i1$5.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: RecordPageContentComponent, isStandalone: true, selector: "app-record-page-content", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Details\">\n        <sky-box-controls>\n          <button\n            aria-label=\"Edit button for details\"\n            class=\"sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n          >\n            <sky-icon iconName=\"edit\" />\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            @for (recordDetail of recordDetails; track recordDetail.detail) {\n              <sky-description-list-content>\n                <sky-description-list-term>\n                  {{ recordDetail.detail }}\n                </sky-description-list-term>\n                <sky-description-list-description>\n                  {{ recordDetail.info }}\n                </sky-description-list-description>\n              </sky-description-list-content>\n            }\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-theme-font-heading-4\">Actuals</h3>\n              @for (\n                actual of actualPayments;\n                track actual.category;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < actualPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ actual.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-theme-font-heading-4\">Projected</h3>\n              @for (\n                projected of projectedPayments;\n                track projected;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ projected.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>\n                    {{ projected.category }}\n                  </sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box headingText=\"Recent activity\">\n        <sky-box-content>\n          <sky-repeater>\n            @for (activity of recentActivity; track activity.date) {\n              <sky-repeater-item>\n                <sky-repeater-item-content>\n                  <div class=\"sky-theme-margin-bottom-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-theme-font-body-deemphasized-m\">\n                    {{ activity.date }}\n                  </div>\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i1$5.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RecordPageContentComponent$1, decorators: [{
             type: Component,
@@ -13423,7 +13421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  */
 class PagesPageRecordPageBlocksLayoutExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesPageRecordPageBlocksLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: PagesPageRecordPageBlocksLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-record-page-blocks-layout-example", ngImport: i0, template: "<sky-page layout=\"blocks\" helpKey=\"example-help\">\n  <sky-page-header pageTitle=\"$500 pledge\">\n    <sky-page-header-details\n      ><a href=\"#\">Solomon Hurley</a></sky-page-header-details\n    >\n  </sky-page-header>\n  <sky-page-content>\n    <app-record-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "component", type: RecordPageContentComponent$1, selector: "app-record-page-content" }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$c.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$c.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$c.λ8, selector: "sky-page-header-details" }, { kind: "component", type: i1$c.λ7, selector: "sky-page-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: PagesPageRecordPageBlocksLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-record-page-blocks-layout-example", ngImport: i0, template: "<sky-page layout=\"blocks\" helpKey=\"example-help\">\n  <sky-page-header pageTitle=\"$500 pledge\">\n    <sky-page-header-details\n      ><a href=\"#\">Solomon Hurley</a></sky-page-header-details\n    >\n  </sky-page-header>\n  <sky-page-content>\n    <app-record-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "component", type: RecordPageContentComponent$1, selector: "app-record-page-content" }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$d.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$d.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$d.λ8, selector: "sky-page-header-details" }, { kind: "component", type: i1$d.λ7, selector: "sky-page-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesPageRecordPageBlocksLayoutExampleComponent, decorators: [{
             type: Component,
@@ -13569,7 +13567,7 @@ class RecordPageAttachmentsTabComponent {
         this.#dataManagerService.initDataView(this.#viewConfig);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RecordPageAttachmentsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: RecordPageAttachmentsTabComponent, isStandalone: true, selector: "app-record-page-attachments-tab", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <div class=\"sky-theme-margin-bottom-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button\n          aria-label=\"New attachment\"\n          class=\"sky-btn sky-btn-default\"\n          type=\"button\"\n        >\n          <sky-icon iconName=\"add\" />\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n    </sky-data-manager-toolbar>\n  </div>\n  <div class=\"sky-theme-margin-bottom-s\">\n    <sky-key-info\n      layout=\"horizontal\"\n      class=\"sky-theme-padding-right-s sky-theme-padding-left-s\"\n    >\n      <sky-key-info-value class=\"sky-theme-font-display-4\">\n        {{ items.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Attachments </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"items\" />\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n", dependencies: [{ kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "toolbar", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipSwitchShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "calculatedColumns", "columnHeaderEdit", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "animateColumnResizing", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "includeHiddenColumnsInCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "suppressOverlays", "overlayComponent", "overlayComponentParams", "overlayComponentSelector", "activeOverlay", "activeOverlayParams", "processFileInput", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "paginationPanels", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "notesDataSource", "noteTrigger", "noteShowDelay", "noteHideDelay", "formulaFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "refreshAfterGroupEdit", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "masterDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupHideColumnsUntilExpanded", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "pivotPanelSuppressSort", "suppressGroupRowsSticky", "groupHierarchyConfig", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "suppressContentVisibilityAuto", "enableContentVisibilityAuto", "contentVisibilityAutoDelay", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "getColumnMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "tabToNextGridContainer", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "isMasterOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "autoGenerateColumnDefs", "processAutoGeneratedColumnDefs", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "calculatedColumnCreated", "calculatedColumnExpressionChanged", "calculatedColumnRemoved", "calculatedColumnValidationStateChanged", "columnVisible", "columnPinned", "columnHeaderNameChanged", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "ngmodule", type: SkyAgGridModule }, { kind: "directive", type: i1$4.λ14, selector: "[skyAgGridDataManagerAdapter]", inputs: ["viewId"] }, { kind: "component", type: i1$4.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i2$3.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i2$3.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i2$3.λ4, selector: "sky-data-manager-toolbar-primary-item" }, { kind: "component", type: i2$3.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: RecordPageAttachmentsTabComponent, isStandalone: true, selector: "app-record-page-attachments-tab", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <div class=\"sky-theme-margin-bottom-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button\n          aria-label=\"New attachment\"\n          class=\"sky-btn sky-btn-default\"\n          type=\"button\"\n        >\n          <sky-icon iconName=\"add\" />\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n    </sky-data-manager-toolbar>\n  </div>\n  <div class=\"sky-theme-margin-bottom-s\">\n    <sky-key-info\n      layout=\"horizontal\"\n      class=\"sky-theme-padding-right-s sky-theme-padding-left-s\"\n    >\n      <sky-key-info-value class=\"sky-theme-font-display-4\">\n        {{ items.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Attachments </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"items\" />\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n", dependencies: [{ kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "toolbar", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipSwitchShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "calculatedColumns", "columnHeaderEdit", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "animateColumnResizing", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "includeHiddenColumnsInCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "suppressOverlays", "overlayComponent", "overlayComponentParams", "overlayComponentSelector", "activeOverlay", "activeOverlayParams", "processFileInput", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "paginationPanels", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "notesDataSource", "noteTrigger", "noteShowDelay", "noteHideDelay", "formulaFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "refreshAfterGroupEdit", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "masterDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupHideColumnsUntilExpanded", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "pivotPanelSuppressSort", "suppressGroupRowsSticky", "groupHierarchyConfig", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "suppressContentVisibilityAuto", "enableContentVisibilityAuto", "contentVisibilityAutoDelay", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "getColumnMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "tabToNextGridContainer", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "isMasterOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "autoGenerateColumnDefs", "processAutoGeneratedColumnDefs", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "calculatedColumnCreated", "calculatedColumnExpressionChanged", "calculatedColumnRemoved", "calculatedColumnValidationStateChanged", "columnVisible", "columnPinned", "columnHeaderNameChanged", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "ngmodule", type: SkyAgGridModule }, { kind: "directive", type: i1$4.λ14, selector: "[skyAgGridDataManagerAdapter]", inputs: ["viewId"] }, { kind: "component", type: i1$4.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i2$3.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i2$3.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i2$3.λ4, selector: "sky-data-manager-toolbar-primary-item" }, { kind: "component", type: i2$3.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RecordPageAttachmentsTabComponent, decorators: [{
             type: Component,
@@ -13598,7 +13596,7 @@ class RecordPageNotesTabComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RecordPageNotesTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: RecordPageNotesTabComponent, isStandalone: true, selector: "app-record-page-notes-tab", ngImport: i0, template: "<div class=\"sky-theme-margin-bottom-xs\">\n  <sky-toolbar>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        aria-label=\"New note\"\n      >\n        <sky-icon iconName=\"add\" />\n        New\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-sort [showButtonText]=\"true\">\n        <sky-sort-item>\n          <span aria-label=\"Sort notes by date created (newest first)\">\n            Date created (newest first)\n          </span>\n        </sky-sort-item>\n        <sky-sort-item>\n          <span aria-label=\"Sort notes by date created (oldest first)\">\n            Date created (oldest first)\n          </span>\n        </sky-sort-item>\n      </sky-sort>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        aria-label=\"Export notes\"\n      >\n        <sky-icon iconName=\"document-xls\" />\n        Export\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-search placeholderText=\"Find in notes\" />\n    </sky-toolbar-item>\n  </sky-toolbar>\n</div>\n<div class=\"sky-theme-margin-bottom-s\">\n  <sky-key-info layout=\"horizontal\">\n    <sky-key-info-value class=\"sky-theme-font-display-4\">\n      {{ notes.length }}\n    </sky-key-info-value>\n    <sky-key-info-label> Notes </sky-key-info-label>\n  </sky-key-info>\n</div>\n<sky-repeater>\n  @for (note of notes; track note.noteNumber) {\n    <sky-repeater-item>\n      <sky-repeater-item-context-menu>\n        <sky-dropdown\n          buttonType=\"context-menu\"\n          [label]=\"\n            'Context menu for note ' + note.noteNumber + ' from ' + note.date\n          \"\n        >\n          <sky-dropdown-menu>\n            <sky-dropdown-item>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"\n                  'Edit note ' + note.noteNumber + ' from ' + note.date\n                \"\n              >\n                Edit\n              </button>\n            </sky-dropdown-item>\n            <sky-dropdown-item>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"\n                  'Delete note ' + note.noteNumber + ' from ' + note.date\n                \"\n              >\n                Delete\n              </button>\n            </sky-dropdown-item>\n          </sky-dropdown-menu>\n        </sky-dropdown>\n      </sky-repeater-item-context-menu>\n      <sky-repeater-item-content>\n        <div class=\"sky-theme-margin-bottom-xs\">\n          {{ note.content }}\n        </div>\n        <div class=\"sky-theme-font-body-deemphasized-m\">{{ note.date }}</div>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ 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"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i4.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: i2$1.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkySortModule }, { kind: "component", type: i4.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i4.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: RecordPageNotesTabComponent, isStandalone: true, selector: "app-record-page-notes-tab", ngImport: i0, template: "<div class=\"sky-theme-margin-bottom-xs\">\n  <sky-toolbar>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        aria-label=\"New note\"\n      >\n        <sky-icon iconName=\"add\" />\n        New\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-sort [showButtonText]=\"true\">\n        <sky-sort-item>\n          <span aria-label=\"Sort notes by date created (newest first)\">\n            Date created (newest first)\n          </span>\n        </sky-sort-item>\n        <sky-sort-item>\n          <span aria-label=\"Sort notes by date created (oldest first)\">\n            Date created (oldest first)\n          </span>\n        </sky-sort-item>\n      </sky-sort>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        aria-label=\"Export notes\"\n      >\n        <sky-icon iconName=\"document-xls\" />\n        Export\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-search placeholderText=\"Find in notes\" />\n    </sky-toolbar-item>\n  </sky-toolbar>\n</div>\n<div class=\"sky-theme-margin-bottom-s\">\n  <sky-key-info layout=\"horizontal\">\n    <sky-key-info-value class=\"sky-theme-font-display-4\">\n      {{ notes.length }}\n    </sky-key-info-value>\n    <sky-key-info-label> Notes </sky-key-info-label>\n  </sky-key-info>\n</div>\n<sky-repeater>\n  @for (note of notes; track note.noteNumber) {\n    <sky-repeater-item>\n      <sky-repeater-item-context-menu>\n        <sky-dropdown\n          buttonType=\"context-menu\"\n          [label]=\"\n            'Context menu for note ' + note.noteNumber + ' from ' + note.date\n          \"\n        >\n          <sky-dropdown-menu>\n            <sky-dropdown-item>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"\n                  'Edit note ' + note.noteNumber + ' from ' + note.date\n                \"\n              >\n                Edit\n              </button>\n            </sky-dropdown-item>\n            <sky-dropdown-item>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"\n                  'Delete note ' + note.noteNumber + ' from ' + note.date\n                \"\n              >\n                Delete\n              </button>\n            </sky-dropdown-item>\n          </sky-dropdown-menu>\n        </sky-dropdown>\n      </sky-repeater-item-context-menu>\n      <sky-repeater-item-content>\n        <div class=\"sky-theme-margin-bottom-xs\">\n          {{ note.content }}\n        </div>\n        <div class=\"sky-theme-font-body-deemphasized-m\">{{ note.date }}</div>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ 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"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i4.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: i2$1.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkySortModule }, { kind: "component", type: i4.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i4.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RecordPageNotesTabComponent, decorators: [{
             type: Component,
@@ -13688,7 +13686,7 @@ class RecordPageOverviewTabComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RecordPageOverviewTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: RecordPageOverviewTabComponent, isStandalone: true, selector: "app-record-page-overview-tab", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Details\">\n        <sky-box-controls>\n          <button\n            aria-label=\"Edit button for details\"\n            class=\"sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n          >\n            <sky-icon iconName=\"edit\" />\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            @for (recordDetail of recordDetails; track recordDetail.detail) {\n              <sky-description-list-content>\n                <sky-description-list-term>\n                  {{ recordDetail.detail }}\n                </sky-description-list-term>\n                <sky-description-list-description>\n                  {{ recordDetail.info }}\n                </sky-description-list-description>\n              </sky-description-list-content>\n            }\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-theme-font-heading-4\">Actuals</h3>\n              @for (\n                actual of actualPayments;\n                track actual.category;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < actualPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ actual.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-theme-font-heading-4\">Projected</h3>\n              @for (\n                projected of projectedPayments;\n                track projected;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ projected.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>\n                    {{ projected.category }}\n                  </sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box headingText=\"Recent activity\">\n        <sky-box-content>\n          <sky-repeater>\n            @for (activity of recentActivity; track activity.id) {\n              <sky-repeater-item>\n                <sky-repeater-item-content>\n                  <div class=\"sky-theme-margin-bottom-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-theme-font-body-deemphasized-m\">\n                    {{ activity.date }}\n                  </div>\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i1$5.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: RecordPageOverviewTabComponent, isStandalone: true, selector: "app-record-page-overview-tab", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Details\">\n        <sky-box-controls>\n          <button\n            aria-label=\"Edit button for details\"\n            class=\"sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n          >\n            <sky-icon iconName=\"edit\" />\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            @for (recordDetail of recordDetails; track recordDetail.detail) {\n              <sky-description-list-content>\n                <sky-description-list-term>\n                  {{ recordDetail.detail }}\n                </sky-description-list-term>\n                <sky-description-list-description>\n                  {{ recordDetail.info }}\n                </sky-description-list-description>\n              </sky-description-list-content>\n            }\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box class=\"sky-theme-margin-bottom-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-theme-font-heading-4\">Actuals</h3>\n              @for (\n                actual of actualPayments;\n                track actual.category;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < actualPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ actual.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-theme-font-heading-4\">Projected</h3>\n              @for (\n                projected of projectedPayments;\n                track projected;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-theme-font-display-3\">\n                    {{ projected.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>\n                    {{ projected.category }}\n                  </sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box headingText=\"Recent activity\">\n        <sky-box-content>\n          <sky-repeater>\n            @for (activity of recentActivity; track activity.id) {\n              <sky-repeater-item>\n                <sky-repeater-item-content>\n                  <div class=\"sky-theme-margin-bottom-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-theme-font-body-deemphasized-m\">\n                    {{ activity.date }}\n                  </div>\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i1$5.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RecordPageOverviewTabComponent, decorators: [{
             type: Component,
@@ -13726,7 +13724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  */
 class PagesPageRecordPageTabsLayoutExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesPageRecordPageTabsLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: PagesPageRecordPageTabsLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-record-page-tabs-layout-example", ngImport: i0, template: "<sky-page layout=\"tabs\" helpKey=\"example-help\">\n  <sky-page-header pageTitle=\"Charlene Conners\">\n    <sky-page-header-alerts>\n      <sky-alert alertType=\"warning\" descriptionType=\"warning\">\n        Missing phone number for Charlene Conners.\n      </sky-alert>\n    </sky-page-header-alerts>\n    <sky-page-header-avatar>\n      <sky-avatar name=\"Charlene Conners\" />\n    </sky-page-header-avatar>\n    <sky-page-header-details>\n      <sky-label labelType=\"info\" descriptionType=\"important-info\">\n        VIP\n      </sky-label>\n    </sky-page-header-details>\n    <sky-page-header-actions>\n      <button class=\"sky-btn sky-btn-default\" type=\"button\">\n        Email contact\n      </button>\n      <button class=\"sky-btn sky-btn-default\" type=\"button\">\n        Add to my contacts\n      </button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-record-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "component", type: RecordPageContentComponent, selector: "app-record-page-content" }, { kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyAvatarModule }, { kind: "component", type: i1$8.λ1, selector: "sky-avatar", inputs: ["canChange", "name", "src", "maxFileSize", "size"], outputs: ["avatarChanged"] }, { kind: "ngmodule", type: SkyLabelModule }, { kind: "component", type: i1.λ9, selector: "sky-label", inputs: ["labelType", "descriptionType", "customDescription"] }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$c.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$c.λ9, selector: "sky-page-header-actions" }, { kind: "component", type: i1$c.λ11, selector: "sky-page-header-alerts" }, { kind: "component", type: i1$c.λ10, selector: "sky-page-header-avatar" }, { kind: "component", type: i1$c.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$c.λ8, selector: "sky-page-header-details" }, { kind: "component", type: i1$c.λ7, selector: "sky-page-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: PagesPageRecordPageTabsLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-record-page-tabs-layout-example", ngImport: i0, template: "<sky-page layout=\"tabs\" helpKey=\"example-help\">\n  <sky-page-header pageTitle=\"Charlene Conners\">\n    <sky-page-header-alerts>\n      <sky-alert alertType=\"warning\" descriptionType=\"warning\">\n        Missing phone number for Charlene Conners.\n      </sky-alert>\n    </sky-page-header-alerts>\n    <sky-page-header-avatar>\n      <sky-avatar name=\"Charlene Conners\" />\n    </sky-page-header-avatar>\n    <sky-page-header-details>\n      <sky-label labelType=\"info\" descriptionType=\"important-info\">\n        VIP\n      </sky-label>\n    </sky-page-header-details>\n    <sky-page-header-actions>\n      <button class=\"sky-btn sky-btn-default\" type=\"button\">\n        Email contact\n      </button>\n      <button class=\"sky-btn sky-btn-default\" type=\"button\">\n        Add to my contacts\n      </button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-record-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "component", type: RecordPageContentComponent, selector: "app-record-page-content" }, { kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyAvatarModule }, { kind: "component", type: i1$8.λ1, selector: "sky-avatar", inputs: ["canChange", "name", "src", "maxFileSize", "size"], outputs: ["avatarChanged"] }, { kind: "ngmodule", type: SkyLabelModule }, { kind: "component", type: i1.λ9, selector: "sky-label", inputs: ["labelType", "descriptionType", "customDescription"] }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$d.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$d.λ9, selector: "sky-page-header-actions" }, { kind: "component", type: i1$d.λ11, selector: "sky-page-header-alerts" }, { kind: "component", type: i1$d.λ10, selector: "sky-page-header-avatar" }, { kind: "component", type: i1$d.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$d.λ8, selector: "sky-page-header-details" }, { kind: "component", type: i1$d.λ7, selector: "sky-page-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesPageRecordPageTabsLayoutExampleComponent, decorators: [{
             type: Component,
@@ -13925,7 +13923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  */
 class PagesPageSplitViewPageFitLayoutExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesPageSplitViewPageFitLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: PagesPageSplitViewPageFitLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-split-view-page-fit-layout-example", ngImport: i0, template: "<sky-page layout=\"fit\" helpKey=\"example-help\">\n  <sky-page-header\n    pageTitle=\"Expenses to approve\"\n    [parentLink]=\"{\n      label: 'Expenses',\n      permalink: {\n        route: {\n          commands: ['/']\n        }\n      }\n    }\"\n  >\n    <sky-page-header-alerts>\n      <sky-alert alertType=\"warning\" descriptionType=\"warning\">\n        There are multiple expense approvals due soon.\n      </sky-alert>\n    </sky-page-header-alerts>\n    <sky-page-header-actions>\n      <button class=\"sky-btn sky-btn-default\" type=\"button\">Approve all</button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-split-view-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$c.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$c.λ9, selector: "sky-page-header-actions" }, { kind: "component", type: i1$c.λ11, selector: "sky-page-header-alerts" }, { kind: "component", type: i1$c.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$c.λ7, selector: "sky-page-content" }, { kind: "component", type: SplitViewPageContentComponent, selector: "app-split-view-page-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: PagesPageSplitViewPageFitLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-split-view-page-fit-layout-example", ngImport: i0, template: "<sky-page layout=\"fit\" helpKey=\"example-help\">\n  <sky-page-header\n    pageTitle=\"Expenses to approve\"\n    [parentLink]=\"{\n      label: 'Expenses',\n      permalink: {\n        route: {\n          commands: ['/']\n        }\n      }\n    }\"\n  >\n    <sky-page-header-alerts>\n      <sky-alert alertType=\"warning\" descriptionType=\"warning\">\n        There are multiple expense approvals due soon.\n      </sky-alert>\n    </sky-page-header-alerts>\n    <sky-page-header-actions>\n      <button class=\"sky-btn sky-btn-default\" type=\"button\">Approve all</button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-split-view-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$d.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$d.λ9, selector: "sky-page-header-actions" }, { kind: "component", type: i1$d.λ11, selector: "sky-page-header-alerts" }, { kind: "component", type: i1$d.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$d.λ7, selector: "sky-page-content" }, { kind: "component", type: SplitViewPageContentComponent, selector: "app-split-view-page-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PagesPageSplitViewPageFitLayoutExampleComponent, decorators: [{
             type: Component,
@@ -13946,7 +13944,7 @@ class PhoneFieldBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PhoneFieldBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: PhoneFieldBasicExampleComponent, isStandalone: true, selector: "app-phone-field-basic-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form class=\"phone-field-example\" [formGroup]=\"phoneForm\">\n    <sky-input-box\n      data-sky-id=\"my-phone-field\"\n      helpPopoverTitle=\"How we use your phone number\"\n      hintText=\"Enter the phone number where you can be reached before 5 p.m., Monday through Friday.\"\n      labelText=\"Phone number\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n    >\n      <sky-phone-field [defaultCountry]=\"'us'\">\n        <input formControlName=\"phoneControl\" skyPhoneFieldInput />\n      </sky-phone-field>\n    </sky-input-box>\n  </form>\n</div>\n\n<ng-template #inlineHelpPopover>\n  We use this number for calls and text about your student. We won't use it for\n  other purposes.\n  <br />\n  <br />\n  For more information, see our <a>privacy policy</a>.\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyPhoneFieldModule }, { kind: "component", type: i3$4.λ1, selector: "sky-phone-field", inputs: ["allowExtensions", "defaultCountry", "returnFormat", "supportedCountryISOs", "selectedCountry"], outputs: ["selectedCountryChange"] }, { kind: "directive", type: i3$4.λ2, selector: "[skyPhoneFieldInput]", inputs: ["disabled", "skyPhoneFieldNoValidate"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: PhoneFieldBasicExampleComponent, isStandalone: true, selector: "app-phone-field-basic-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form class=\"phone-field-example\" [formGroup]=\"phoneForm\">\n    <sky-input-box\n      data-sky-id=\"my-phone-field\"\n      helpPopoverTitle=\"How we use your phone number\"\n      hintText=\"Enter the phone number where you can be reached before 5 p.m., Monday through Friday.\"\n      labelText=\"Phone number\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n    >\n      <sky-phone-field [defaultCountry]=\"'us'\">\n        <input formControlName=\"phoneControl\" skyPhoneFieldInput />\n      </sky-phone-field>\n    </sky-input-box>\n  </form>\n</div>\n\n<ng-template #inlineHelpPopover>\n  We use this number for calls and text about your student. We won't use it for\n  other purposes.\n  <br />\n  <br />\n  For more information, see our <a>privacy policy</a>.\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyPhoneFieldModule }, { kind: "component", type: i3$3.λ1, selector: "sky-phone-field", inputs: ["allowExtensions", "defaultCountry", "returnFormat", "supportedCountryISOs", "selectedCountry"], outputs: ["selectedCountryChange"] }, { kind: "directive", type: i3$3.λ2, selector: "[skyPhoneFieldInput]", inputs: ["disabled", "skyPhoneFieldNoValidate"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PhoneFieldBasicExampleComponent, decorators: [{
             type: Component,
@@ -14032,7 +14030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  */
 class ProgressIndicatorPassiveIndicatorBasicExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ProgressIndicatorPassiveIndicatorBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: ProgressIndicatorPassiveIndicatorBasicExampleComponent, isStandalone: true, selector: "app-progress-indicator-passive-indicator-basic-example", ngImport: i0, template: "<sky-progress-indicator\n  data-sky-id=\"example-progress-indicator\"\n  [isPassive]=\"true\"\n  [startingIndex]=\"1\"\n>\n  <sky-progress-indicator-item\n    data-sky-id=\"finished-step\"\n    helpPopoverContent=\"Example help content for finished step\"\n    helpPopoverTitle=\"Start here\"\n    title=\"Finished step\"\n    >Optional details about this step\n  </sky-progress-indicator-item>\n  <sky-progress-indicator-item\n    helpPopoverContent=\"Example help content for current step\"\n    title=\"Current step\"\n  />\n  <sky-progress-indicator-item title=\"HIDDEN TITLE\" />\n</sky-progress-indicator>\n", dependencies: [{ kind: "ngmodule", type: SkyProgressIndicatorModule }, { kind: "component", type: i1$e.λ2, selector: "sky-progress-indicator", inputs: ["displayMode", "isPassive", "messageStream", "startingIndex"], outputs: ["progressChanges"] }, { kind: "component", type: i1$e.λ1, selector: "sky-progress-indicator-item", inputs: ["title", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: ProgressIndicatorPassiveIndicatorBasicExampleComponent, isStandalone: true, selector: "app-progress-indicator-passive-indicator-basic-example", ngImport: i0, template: "<sky-progress-indicator\n  data-sky-id=\"example-progress-indicator\"\n  [isPassive]=\"true\"\n  [startingIndex]=\"1\"\n>\n  <sky-progress-indicator-item\n    data-sky-id=\"finished-step\"\n    helpPopoverContent=\"Example help content for finished step\"\n    helpPopoverTitle=\"Start here\"\n    title=\"Finished step\"\n    >Optional details about this step\n  </sky-progress-indicator-item>\n  <sky-progress-indicator-item\n    helpPopoverContent=\"Example help content for current step\"\n    title=\"Current step\"\n  />\n  <sky-progress-indicator-item title=\"HIDDEN TITLE\" />\n</sky-progress-indicator>\n", dependencies: [{ kind: "ngmodule", type: SkyProgressIndicatorModule }, { kind: "component", type: i1$f.λ2, selector: "sky-progress-indicator", inputs: ["displayMode", "isPassive", "messageStream", "startingIndex"], outputs: ["progressChanges"] }, { kind: "component", type: i1$f.λ1, selector: "sky-progress-indicator-item", inputs: ["title", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ProgressIndicatorPassiveIndicatorBasicExampleComponent, decorators: [{
             type: Component,
@@ -14119,7 +14117,7 @@ class ProgressIndicatorWaterfallIndicatorBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ProgressIndicatorWaterfallIndicatorBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ProgressIndicatorWaterfallIndicatorBasicExampleComponent, isStandalone: true, selector: "app-progress-indicator-waterfall-indicator-basic-example", ngImport: i0, template: "<sky-progress-indicator\n  #progressIndicator\n  data-sky-id=\"example-progress-indicator\"\n  [messageStream]=\"progressMessageStream\"\n  [startingIndex]=\"2\"\n  (progressChanges)=\"updateIndex($event)\"\n>\n  <sky-progress-indicator-title>\n    Set up my connection\n  </sky-progress-indicator-title>\n\n  <sky-progress-indicator-item\n    data-sky-id=\"configure-connection\"\n    helpPopoverContent=\"Example help for configure connection\"\n    title=\"Configure connection\"\n  >\n    <div>\n      @if (activeIndex === 0) {\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"configureConnection(true)\"\n        >\n          Set up connection\n        </button>\n      }\n      @if (activeIndex && activeIndex > 0) {\n        <button\n          class=\"sky-btn sky-btn-link\"\n          type=\"button\"\n          (click)=\"configureConnection(false)\"\n        >\n          Edit connection\n        </button>\n      }\n    </div>\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-item\n    helpPopoverContent=\"Example help for select remote server\"\n    helpPopoverTitle=\"Which server is right for me?\"\n    title=\"Select remote server\"\n  >\n    @if (activeIndex && activeIndex >= 1) {\n      <div>\n        @if (activeIndex === 1) {\n          <button\n            class=\"sky-btn sky-btn-primary\"\n            type=\"button\"\n            (click)=\"setServer(true)\"\n          >\n            Select server\n          </button>\n        } @else {\n          <button\n            class=\"sky-btn sky-btn-link\"\n            type=\"button\"\n            (click)=\"setServer(false)\"\n          >\n            Change server\n          </button>\n        }\n      </div>\n    }\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-item\n    data-sky-id=\"test-connection\"\n    title=\"Test connection\"\n  >\n    @if (activeIndex && activeIndex >= 2) {\n      <div>\n        @if (activeIndex === 2) {\n          <button\n            class=\"sky-btn sky-btn-primary\"\n            type=\"button\"\n            (click)=\"testConnection(true)\"\n          >\n            Test connection\n          </button>\n        } @else {\n          <button\n            class=\"sky-btn sky-btn-link\"\n            type=\"button\"\n            (click)=\"testConnection(false)\"\n          >\n            Retest connection\n          </button>\n        }\n      </div>\n    }\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-item title=\"Turn on connection\">\n    @if (activeIndex && activeIndex >= 3) {\n      <div>\n        @if (activeIndex === 3) {\n          <button\n            class=\"sky-btn sky-btn-primary\"\n            type=\"button\"\n            (click)=\"alertMessage('Form completed')\"\n          >\n            Turn on\n          </button>\n        }\n      </div>\n    }\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-reset-button [progressIndicator]=\"progressIndicator\">\n    Erase all settings\n  </sky-progress-indicator-reset-button>\n</sky-progress-indicator>\n", dependencies: [{ kind: "ngmodule", type: SkyProgressIndicatorModule }, { kind: "component", type: i1$e.λ2, selector: "sky-progress-indicator", inputs: ["displayMode", "isPassive", "messageStream", "startingIndex"], outputs: ["progressChanges"] }, { kind: "component", type: i1$e.λ1, selector: "sky-progress-indicator-item", inputs: ["title", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$e.λ4, selector: "sky-progress-indicator-reset-button", inputs: ["disabled", "progressIndicator"], outputs: ["resetClick"] }, { kind: "component", type: i1$e.λ5, selector: "sky-progress-indicator-title" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ProgressIndicatorWaterfallIndicatorBasicExampleComponent, isStandalone: true, selector: "app-progress-indicator-waterfall-indicator-basic-example", ngImport: i0, template: "<sky-progress-indicator\n  #progressIndicator\n  data-sky-id=\"example-progress-indicator\"\n  [messageStream]=\"progressMessageStream\"\n  [startingIndex]=\"2\"\n  (progressChanges)=\"updateIndex($event)\"\n>\n  <sky-progress-indicator-title>\n    Set up my connection\n  </sky-progress-indicator-title>\n\n  <sky-progress-indicator-item\n    data-sky-id=\"configure-connection\"\n    helpPopoverContent=\"Example help for configure connection\"\n    title=\"Configure connection\"\n  >\n    <div>\n      @if (activeIndex === 0) {\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"configureConnection(true)\"\n        >\n          Set up connection\n        </button>\n      }\n      @if (activeIndex && activeIndex > 0) {\n        <button\n          class=\"sky-btn sky-btn-link\"\n          type=\"button\"\n          (click)=\"configureConnection(false)\"\n        >\n          Edit connection\n        </button>\n      }\n    </div>\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-item\n    helpPopoverContent=\"Example help for select remote server\"\n    helpPopoverTitle=\"Which server is right for me?\"\n    title=\"Select remote server\"\n  >\n    @if (activeIndex && activeIndex >= 1) {\n      <div>\n        @if (activeIndex === 1) {\n          <button\n            class=\"sky-btn sky-btn-primary\"\n            type=\"button\"\n            (click)=\"setServer(true)\"\n          >\n            Select server\n          </button>\n        } @else {\n          <button\n            class=\"sky-btn sky-btn-link\"\n            type=\"button\"\n            (click)=\"setServer(false)\"\n          >\n            Change server\n          </button>\n        }\n      </div>\n    }\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-item\n    data-sky-id=\"test-connection\"\n    title=\"Test connection\"\n  >\n    @if (activeIndex && activeIndex >= 2) {\n      <div>\n        @if (activeIndex === 2) {\n          <button\n            class=\"sky-btn sky-btn-primary\"\n            type=\"button\"\n            (click)=\"testConnection(true)\"\n          >\n            Test connection\n          </button>\n        } @else {\n          <button\n            class=\"sky-btn sky-btn-link\"\n            type=\"button\"\n            (click)=\"testConnection(false)\"\n          >\n            Retest connection\n          </button>\n        }\n      </div>\n    }\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-item title=\"Turn on connection\">\n    @if (activeIndex && activeIndex >= 3) {\n      <div>\n        @if (activeIndex === 3) {\n          <button\n            class=\"sky-btn sky-btn-primary\"\n            type=\"button\"\n            (click)=\"alertMessage('Form completed')\"\n          >\n            Turn on\n          </button>\n        }\n      </div>\n    }\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-reset-button [progressIndicator]=\"progressIndicator\">\n    Erase all settings\n  </sky-progress-indicator-reset-button>\n</sky-progress-indicator>\n", dependencies: [{ kind: "ngmodule", type: SkyProgressIndicatorModule }, { kind: "component", type: i1$f.λ2, selector: "sky-progress-indicator", inputs: ["displayMode", "isPassive", "messageStream", "startingIndex"], outputs: ["progressChanges"] }, { kind: "component", type: i1$f.λ1, selector: "sky-progress-indicator-item", inputs: ["title", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$f.λ4, selector: "sky-progress-indicator-reset-button", inputs: ["disabled", "progressIndicator"], outputs: ["resetClick"] }, { kind: "component", type: i1$f.λ5, selector: "sky-progress-indicator-title" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ProgressIndicatorWaterfallIndicatorBasicExampleComponent, decorators: [{
             type: Component,
@@ -14158,7 +14156,7 @@ let ModalComponent$2 = class ModalComponent {
         this.activeIndex = changes.activeIndex;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"title\">\n  <sky-modal-content>\n    <form [formGroup]=\"formGroup\">\n      <sky-progress-indicator\n        #wizardDemo\n        [displayMode]=\"displayMode\"\n        (progressChanges)=\"updateIndex($event)\"\n      >\n        <sky-progress-indicator-item title=\"First step\">\n          <sky-input-box labelText=\"Enter text to continue\">\n            <input type=\"text\" formControlName=\"requiredValue1\" />\n          </sky-input-box>\n        </sky-progress-indicator-item>\n\n        <sky-progress-indicator-item title=\"Second step\">\n          <div>\n            <sky-checkbox\n              formControlName=\"requiredValue2\"\n              labelText=\"Select to continue\"\n            />\n          </div>\n        </sky-progress-indicator-item>\n\n        <sky-progress-indicator-item title=\"Third step\">\n          <div>Additional content or tasks go here.</div>\n        </sky-progress-indicator-item>\n      </sky-progress-indicator>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <sky-progress-indicator-nav-button\n      buttonType=\"previous\"\n      [progressIndicator]=\"wizardDemo\"\n    />\n    <sky-progress-indicator-nav-button\n      buttonType=\"next\"\n      [disabled]=\"!requirementsMet\"\n      [progressIndicator]=\"wizardDemo\"\n    />\n    <sky-progress-indicator-nav-button\n      buttonType=\"finish\"\n      buttonText=\"Finish\"\n      [progressIndicator]=\"wizardDemo\"\n      (actionClick)=\"onSaveClick($event)\"\n    />\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"onCancelClick()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyProgressIndicatorModule }, { kind: "component", type: i1$e.λ2, selector: "sky-progress-indicator", inputs: ["displayMode", "isPassive", "messageStream", "startingIndex"], outputs: ["progressChanges"] }, { kind: "component", type: i1$e.λ1, selector: "sky-progress-indicator-item", inputs: ["title", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$e.λ3, selector: "sky-progress-indicator-nav-button", inputs: ["buttonText", "buttonType", "disabled", "progressIndicator"], outputs: ["actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"title\">\n  <sky-modal-content>\n    <form [formGroup]=\"formGroup\">\n      <sky-progress-indicator\n        #wizardDemo\n        [displayMode]=\"displayMode\"\n        (progressChanges)=\"updateIndex($event)\"\n      >\n        <sky-progress-indicator-item title=\"First step\">\n          <sky-input-box labelText=\"Enter text to continue\">\n            <input type=\"text\" formControlName=\"requiredValue1\" />\n          </sky-input-box>\n        </sky-progress-indicator-item>\n\n        <sky-progress-indicator-item title=\"Second step\">\n          <div>\n            <sky-checkbox\n              formControlName=\"requiredValue2\"\n              labelText=\"Select to continue\"\n            />\n          </div>\n        </sky-progress-indicator-item>\n\n        <sky-progress-indicator-item title=\"Third step\">\n          <div>Additional content or tasks go here.</div>\n        </sky-progress-indicator-item>\n      </sky-progress-indicator>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <sky-progress-indicator-nav-button\n      buttonType=\"previous\"\n      [progressIndicator]=\"wizardDemo\"\n    />\n    <sky-progress-indicator-nav-button\n      buttonType=\"next\"\n      [disabled]=\"!requirementsMet\"\n      [progressIndicator]=\"wizardDemo\"\n    />\n    <sky-progress-indicator-nav-button\n      buttonType=\"finish\"\n      buttonText=\"Finish\"\n      [progressIndicator]=\"wizardDemo\"\n      (actionClick)=\"onSaveClick($event)\"\n    />\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"onCancelClick()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyProgressIndicatorModule }, { kind: "component", type: i1$f.λ2, selector: "sky-progress-indicator", inputs: ["displayMode", "isPassive", "messageStream", "startingIndex"], outputs: ["progressChanges"] }, { kind: "component", type: i1$f.λ1, selector: "sky-progress-indicator-item", inputs: ["title", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$f.λ3, selector: "sky-progress-indicator-nav-button", inputs: ["buttonText", "buttonType", "disabled", "progressIndicator"], outputs: ["actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModalComponent$2, decorators: [{
             type: Component,
@@ -14192,7 +14190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  */
 class RouterHrefBasicExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RouterHrefBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: RouterHrefBasicExampleComponent, isStandalone: true, selector: "app-router-href-basic-example", ngImport: i0, template: "<p>\n  <span>Link where the user has access:</span>\n  <a skyHref=\"https://example.com\" data-sky-id=\"my-href-1\">Example.com</a>\n</p>\n<p>\n  <span>Link where the user has access, translated:</span>\n  <a skyHref=\"allow://example.com\" data-sky-id=\"my-href-allow\"\n    >Example.com with \u201Callow\u201D protocol</a\n  >\n</p>\n<p>\n  <span>Link where the user does not have access, hidden by default:</span>\n  <a skyHref=\"deny://example.com\" data-sky-id=\"my-href-hidden\"\n    >Example.com with \u201Cdeny\u201D protocol</a\n  >\n</p>\n<p>\n  <span>Link where the user does not have access, shown as plain text:</span>\n  <a\n    skyHref=\"deny://example.com\"\n    skyHrefElse=\"unlink\"\n    data-sky-id=\"my-href-unlinked\"\n    >Example.com with \u201Cdeny\u201D protocol</a\n  >\n</p>\n", styles: [":host{display:block}span{display:inline-block;margin-right:var(--sky-margin-inline-xs)}a[skyhref]:after{display:block;content:\"skyhref=\\201c\" attr(skyhref) \"\\201d  \\279c  href=\\201c\" attr(href) \"\\201d\";font-size:10px;color:var(--sky-text-color-deemphasized);text-decoration:none}\n"], dependencies: [{ kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i1$f.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: RouterHrefBasicExampleComponent, isStandalone: true, selector: "app-router-href-basic-example", ngImport: i0, template: "<p>\n  <span>Link where the user has access:</span>\n  <a skyHref=\"https://example.com\" data-sky-id=\"my-href-1\">Example.com</a>\n</p>\n<p>\n  <span>Link where the user has access, translated:</span>\n  <a skyHref=\"allow://example.com\" data-sky-id=\"my-href-allow\"\n    >Example.com with \u201Callow\u201D protocol</a\n  >\n</p>\n<p>\n  <span>Link where the user does not have access, hidden by default:</span>\n  <a skyHref=\"deny://example.com\" data-sky-id=\"my-href-hidden\"\n    >Example.com with \u201Cdeny\u201D protocol</a\n  >\n</p>\n<p>\n  <span>Link where the user does not have access, shown as plain text:</span>\n  <a\n    skyHref=\"deny://example.com\"\n    skyHrefElse=\"unlink\"\n    data-sky-id=\"my-href-unlinked\"\n    >Example.com with \u201Cdeny\u201D protocol</a\n  >\n</p>\n", styles: [":host{display:block}span{display:inline-block;margin-right:var(--sky-margin-inline-xs)}a[skyhref]:after{display:block;content:\"skyhref=\\201c\" attr(skyhref) \"\\201d  \\279c  href=\\201c\" attr(href) \"\\201d\";font-size:10px;color:var(--sky-text-color-deemphasized);text-decoration:none}\n"], dependencies: [{ kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i1$g.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RouterHrefBasicExampleComponent, decorators: [{
             type: Component,
@@ -14531,7 +14529,7 @@ class SplitViewPageBoundExampleComponent {
         this.splitViewStream.next(message);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SplitViewPageBoundExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SplitViewPageBoundExampleComponent, isStandalone: true, selector: "app-split-view-page-bound-example", ngImport: i0, template: "<sky-page layout=\"fit\">\n  <div class=\"page-flex\">\n    <div class=\"page-flex-header\">\n      <sky-page-summary>\n        @if (unapprovedTransaction) {\n          <sky-page-summary-alert>\n            <sky-alert alertType=\"info\"\n              >There is an unapproved transaction.</sky-alert\n            >\n          </sky-page-summary-alert>\n        }\n        <sky-page-summary-title> SKY Developers, LLC </sky-page-summary-title>\n        <sky-page-summary-subtitle>\n          Petty Cash Transactions\n        </sky-page-summary-subtitle>\n        <sky-page-summary-content>\n          The transactions below cover various operating expenses which do not\n          fall under one of the budgets areas of expenditures.\n        </sky-page-summary-content>\n      </sky-page-summary>\n    </div>\n    <div class=\"page-flex-main\">\n      <sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n        <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\">\n          <sky-repeater [activeIndex]=\"activeIndex\">\n            @for (item of items; track item; let i = $index) {\n              <sky-repeater-item\n                (click)=\"onItemClick(i)\"\n                (keyup.enter)=\"onItemClick(i)\"\n              >\n                <sky-repeater-item-content>\n                  {{ item.amount }} <br />\n                  {{ item.date }} <br />\n                  {{ item.vendor }}\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-split-view-drawer>\n\n        <sky-split-view-workspace [ariaLabel]=\"'Transaction form'\">\n          <sky-split-view-workspace-content\n            class=\"sky-theme-padding-inset-balanced-xl\"\n          >\n            <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n              <sky-description-list labelWidth=\"150px\">\n                <sky-description-list-content>\n                  <sky-description-list-term>\n                    Receipt amount\n                  </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.amount }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n                <sky-description-list-content>\n                  <sky-description-list-term> Date </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.date }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n                <sky-description-list-content>\n                  <sky-description-list-term>\n                    Vendor\n                  </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.vendor }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n                <sky-description-list-content>\n                  <sky-description-list-term>\n                    Receipt image\n                  </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.receiptImage }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n              </sky-description-list>\n              <sky-input-box labelText=\"Approved amount\" stacked=\"true\">\n                <input formControlName=\"approvedAmount\" type=\"text\" />\n              </sky-input-box>\n              <sky-input-box labelText=\"Comments\">\n                <textarea formControlName=\"comments\"></textarea>\n              </sky-input-box>\n            </form>\n          </sky-split-view-workspace-content>\n          <sky-split-view-workspace-footer>\n            <sky-summary-action-bar>\n              <sky-summary-action-bar-actions>\n                <sky-summary-action-bar-primary-action\n                  (actionClick)=\"onApprove()\"\n                >\n                  Approve expense\n                </sky-summary-action-bar-primary-action>\n                <sky-summary-action-bar-secondary-actions>\n                  <sky-summary-action-bar-secondary-action\n                    (actionClick)=\"onDeny()\"\n                  >\n                    Deny expense\n                  </sky-summary-action-bar-secondary-action>\n                </sky-summary-action-bar-secondary-actions>\n              </sky-summary-action-bar-actions>\n            </sky-summary-action-bar>\n          </sky-split-view-workspace-footer>\n        </sky-split-view-workspace>\n      </sky-split-view>\n    </div>\n  </div>\n</sky-page>\n", styles: [".page-flex{display:flex;flex-direction:column;position:absolute;inset:0}.page-flex-header{flex-grow:0}.page-flex-main{flex-grow:1;overflow:auto;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$c.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "ngmodule", type: SkyPageSummaryModule }, { kind: "component", type: i1$5.λ28, selector: "sky-page-summary-alert" }, { kind: "component", type: i1$5.λ27, selector: "sky-page-summary" }, { kind: "component", type: i1$5.λ29, selector: "sky-page-summary-content" }, { kind: "component", type: i1$5.λ33, selector: "sky-page-summary-subtitle" }, { kind: "component", type: i1$5.λ34, selector: "sky-page-summary-title" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySplitViewModule }, { kind: "component", type: i5.λ1, selector: "sky-split-view", inputs: ["backButtonText", "bindHeightToWindow", "dock", "messageStream"] }, { kind: "component", type: i5.λ2, selector: "sky-split-view-drawer", inputs: ["ariaLabel", "width"] }, { kind: "component", type: i5.λ3, selector: "sky-split-view-workspace", inputs: ["ariaLabel"] }, { kind: "component", type: i5.λ4, selector: "sky-split-view-workspace-content" }, { kind: "component", type: i5.λ5, selector: "sky-split-view-workspace-footer" }, { kind: "ngmodule", type: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar", inputs: ["formErrors"] }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SplitViewPageBoundExampleComponent, isStandalone: true, selector: "app-split-view-page-bound-example", ngImport: i0, template: "<sky-page layout=\"fit\">\n  <div class=\"page-flex\">\n    <div class=\"page-flex-header\">\n      <sky-page-summary>\n        @if (unapprovedTransaction) {\n          <sky-page-summary-alert>\n            <sky-alert alertType=\"info\"\n              >There is an unapproved transaction.</sky-alert\n            >\n          </sky-page-summary-alert>\n        }\n        <sky-page-summary-title> SKY Developers, LLC </sky-page-summary-title>\n        <sky-page-summary-subtitle>\n          Petty Cash Transactions\n        </sky-page-summary-subtitle>\n        <sky-page-summary-content>\n          The transactions below cover various operating expenses which do not\n          fall under one of the budgets areas of expenditures.\n        </sky-page-summary-content>\n      </sky-page-summary>\n    </div>\n    <div class=\"page-flex-main\">\n      <sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n        <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\">\n          <sky-repeater [activeIndex]=\"activeIndex\">\n            @for (item of items; track item; let i = $index) {\n              <sky-repeater-item\n                (click)=\"onItemClick(i)\"\n                (keyup.enter)=\"onItemClick(i)\"\n              >\n                <sky-repeater-item-content>\n                  {{ item.amount }} <br />\n                  {{ item.date }} <br />\n                  {{ item.vendor }}\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-split-view-drawer>\n\n        <sky-split-view-workspace [ariaLabel]=\"'Transaction form'\">\n          <sky-split-view-workspace-content\n            class=\"sky-theme-padding-inset-balanced-xl\"\n          >\n            <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n              <sky-description-list labelWidth=\"150px\">\n                <sky-description-list-content>\n                  <sky-description-list-term>\n                    Receipt amount\n                  </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.amount }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n                <sky-description-list-content>\n                  <sky-description-list-term> Date </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.date }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n                <sky-description-list-content>\n                  <sky-description-list-term>\n                    Vendor\n                  </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.vendor }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n                <sky-description-list-content>\n                  <sky-description-list-term>\n                    Receipt image\n                  </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.receiptImage }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n              </sky-description-list>\n              <sky-input-box labelText=\"Approved amount\" stacked=\"true\">\n                <input formControlName=\"approvedAmount\" type=\"text\" />\n              </sky-input-box>\n              <sky-input-box labelText=\"Comments\">\n                <textarea formControlName=\"comments\"></textarea>\n              </sky-input-box>\n            </form>\n          </sky-split-view-workspace-content>\n          <sky-split-view-workspace-footer>\n            <sky-summary-action-bar>\n              <sky-summary-action-bar-actions>\n                <sky-summary-action-bar-primary-action\n                  (actionClick)=\"onApprove()\"\n                >\n                  Approve expense\n                </sky-summary-action-bar-primary-action>\n                <sky-summary-action-bar-secondary-actions>\n                  <sky-summary-action-bar-secondary-action\n                    (actionClick)=\"onDeny()\"\n                  >\n                    Deny expense\n                  </sky-summary-action-bar-secondary-action>\n                </sky-summary-action-bar-secondary-actions>\n              </sky-summary-action-bar-actions>\n            </sky-summary-action-bar>\n          </sky-split-view-workspace-footer>\n        </sky-split-view-workspace>\n      </sky-split-view>\n    </div>\n  </div>\n</sky-page>\n", styles: [".page-flex{display:flex;flex-direction:column;position:absolute;inset:0}.page-flex-header{flex-grow:0}.page-flex-main{flex-grow:1;overflow:auto;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$d.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "ngmodule", type: SkyPageSummaryModule }, { kind: "component", type: i1$5.λ28, selector: "sky-page-summary-alert" }, { kind: "component", type: i1$5.λ27, selector: "sky-page-summary" }, { kind: "component", type: i1$5.λ29, selector: "sky-page-summary-content" }, { kind: "component", type: i1$5.λ33, selector: "sky-page-summary-subtitle" }, { kind: "component", type: i1$5.λ34, selector: "sky-page-summary-title" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySplitViewModule }, { kind: "component", type: i5.λ1, selector: "sky-split-view", inputs: ["backButtonText", "bindHeightToWindow", "dock", "messageStream"] }, { kind: "component", type: i5.λ2, selector: "sky-split-view-drawer", inputs: ["ariaLabel", "width"] }, { kind: "component", type: i5.λ3, selector: "sky-split-view-workspace", inputs: ["ariaLabel"] }, { kind: "component", type: i5.λ4, selector: "sky-split-view-workspace-content" }, { kind: "component", type: i5.λ5, selector: "sky-split-view-workspace-footer" }, { kind: "ngmodule", type: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar", inputs: ["formErrors"] }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SplitViewPageBoundExampleComponent, decorators: [{
             type: Component,
@@ -14653,7 +14651,7 @@ let ModalComponent$1 = class ModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"'Sectioned form \u2014 Index: ' + activeIndexDisplay\">\n  <sky-modal-content>\n    <sky-sectioned-form\n      data-sky-id=\"modal-sectioned-form\"\n      tabWidth=\"auto\"\n      [messageStream]=\"sectionedFormController\"\n      (indexChanged)=\"onIndexChanged($event)\"\n      (tabsVisibleChanged)=\"onTabsVisibleChanged($event)\"\n    >\n      <sky-sectioned-form-section heading=\"Basic information\">\n        <app-information-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section\n        heading=\"Addresses\"\n        [itemCount]=\"2\"\n        [active]=\"activeTab\"\n      >\n        <app-address-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n        <app-phone-form />\n      </sky-sectioned-form-section>\n    </sky-sectioned-form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    @if (tabsHidden) {\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"showTabs()\"\n      >\n        <sky-icon iconName=\"chevron-left\" />\n        Show sections\n      </button>\n    }\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"modalInstance.save()\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"modalInstance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "component", type: AddressFormComponent, selector: "app-address-form" }, { kind: "component", type: InformationFormComponent, selector: "app-information-form" }, { kind: "component", type: PhoneFormComponent, selector: "app-phone-form" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySectionedFormModule }, { kind: "component", type: i1$2.SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: ["maintainSectionContent", "tabWidth", "messageStream"], outputs: ["indexChanged", "tabsVisibleChanged"] }, { kind: "component", type: i1$2.λ5, selector: "sky-sectioned-form-section", inputs: ["heading", "itemCount", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"'Sectioned form \u2014 Index: ' + activeIndexDisplay\">\n  <sky-modal-content>\n    <sky-sectioned-form\n      data-sky-id=\"modal-sectioned-form\"\n      tabWidth=\"auto\"\n      [messageStream]=\"sectionedFormController\"\n      (indexChanged)=\"onIndexChanged($event)\"\n      (tabsVisibleChanged)=\"onTabsVisibleChanged($event)\"\n    >\n      <sky-sectioned-form-section heading=\"Basic information\">\n        <app-information-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section\n        heading=\"Addresses\"\n        [itemCount]=\"2\"\n        [active]=\"activeTab\"\n      >\n        <app-address-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n        <app-phone-form />\n      </sky-sectioned-form-section>\n    </sky-sectioned-form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    @if (tabsHidden) {\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"showTabs()\"\n      >\n        <sky-icon iconName=\"chevron-left\" />\n        Show sections\n      </button>\n    }\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"modalInstance.save()\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"modalInstance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "component", type: AddressFormComponent, selector: "app-address-form" }, { kind: "component", type: InformationFormComponent, selector: "app-information-form" }, { kind: "component", type: PhoneFormComponent, selector: "app-phone-form" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySectionedFormModule }, { kind: "component", type: i1$2.SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: ["maintainSectionContent", "tabWidth", "messageStream"], outputs: ["indexChanged", "tabsVisibleChanged"] }, { kind: "component", type: i1$2.λ5, selector: "sky-sectioned-form-section", inputs: ["heading", "itemCount", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModalComponent$1, decorators: [{
             type: Component,
@@ -14796,11 +14794,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  */
 class TabsVerticalTabsBasicExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsVerticalTabsBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: TabsVerticalTabsBasicExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-basic-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-basic\">\n  <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 content </sky-vertical-tab>\n  <sky-vertical-tab tabHeading=\"Tab 2\" [active]=\"true\">\n    Tab 2 content\n  </sky-vertical-tab>\n  <sky-vertical-tab tabHeading=\"Tab 3\" [disabled]=\"true\">\n    Tab 3 content\n  </sky-vertical-tab>\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: TabsVerticalTabsBasicExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-basic-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-basic\" tabWidth=\"auto\">\n  <sky-vertical-tab tabHeading=\"A short tab\"> Tab 1 content </sky-vertical-tab>\n  <sky-vertical-tab tabHeading=\"Tab 2\" [active]=\"true\">\n    Tab 2 content\n  </sky-vertical-tab>\n  <sky-vertical-tab\n    tabHeading=\"A very long tab heading that wraps when the width is constrained\"\n    [disabled]=\"true\"\n  >\n    Tab 3 content\n  </sky-vertical-tab>\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent", "tabWidth"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsVerticalTabsBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tabs-vertical-tabs-basic-example', changeDetection: ChangeDetectionStrategy.Eager, imports: [SkyVerticalTabsetModule], template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-basic\">\n  <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 content </sky-vertical-tab>\n  <sky-vertical-tab tabHeading=\"Tab 2\" [active]=\"true\">\n    Tab 2 content\n  </sky-vertical-tab>\n  <sky-vertical-tab tabHeading=\"Tab 3\" [disabled]=\"true\">\n    Tab 3 content\n  </sky-vertical-tab>\n</sky-vertical-tabset>\n" }]
+            args: [{ selector: 'app-tabs-vertical-tabs-basic-example', changeDetection: ChangeDetectionStrategy.Eager, imports: [SkyVerticalTabsetModule], template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-basic\" tabWidth=\"auto\">\n  <sky-vertical-tab tabHeading=\"A short tab\"> Tab 1 content </sky-vertical-tab>\n  <sky-vertical-tab tabHeading=\"Tab 2\" [active]=\"true\">\n    Tab 2 content\n  </sky-vertical-tab>\n  <sky-vertical-tab\n    tabHeading=\"A very long tab heading that wraps when the width is constrained\"\n    [disabled]=\"true\"\n  >\n    Tab 3 content\n  </sky-vertical-tab>\n</sky-vertical-tabset>\n" }]
         }] });
 
 /**
@@ -14848,7 +14846,7 @@ class TabsVerticalTabsGroupedExampleComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsVerticalTabsGroupedExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: TabsVerticalTabsGroupedExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-grouped-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-group\" showTabsText=\"Tab list\">\n  @for (group of groups; track group) {\n    <sky-vertical-tabset-group\n      [groupHeading]=\"group.heading\"\n      [open]=\"group.isOpen\"\n      [disabled]=\"group.isDisabled\"\n    >\n      @for (tab of group.subTabs; track tab) {\n        <sky-vertical-tab\n          [active]=\"tab.active\"\n          [tabHeading]=\"tab.tabHeading\"\n          [tabHeaderCount]=\"tab.tabHeaderCount\"\n          [disabled]=\"tab.disabled\"\n        >\n          {{ tab.content }}\n        </sky-vertical-tab>\n      }\n    </sky-vertical-tabset-group>\n  }\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ7, selector: "sky-vertical-tabset-group", inputs: ["disabled", "groupHeading", "open"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: TabsVerticalTabsGroupedExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-grouped-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-group\" showTabsText=\"Tab list\">\n  @for (group of groups; track group) {\n    <sky-vertical-tabset-group\n      [groupHeading]=\"group.heading\"\n      [open]=\"group.isOpen\"\n      [disabled]=\"group.isDisabled\"\n    >\n      @for (tab of group.subTabs; track tab) {\n        <sky-vertical-tab\n          [active]=\"tab.active\"\n          [tabHeading]=\"tab.tabHeading\"\n          [tabHeaderCount]=\"tab.tabHeaderCount\"\n          [disabled]=\"tab.disabled\"\n        >\n          {{ tab.content }}\n        </sky-vertical-tab>\n      }\n    </sky-vertical-tabset-group>\n  }\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent", "tabWidth"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ7, selector: "sky-vertical-tabset-group", inputs: ["disabled", "groupHeading", "open"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsVerticalTabsGroupedExampleComponent, decorators: [{
             type: Component,
@@ -14908,7 +14906,7 @@ class TabsVerticalTabsMixedExampleComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsVerticalTabsMixedExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: TabsVerticalTabsMixedExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-mixed-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-mixed\" showTabsText=\"Tab list\">\n  @for (group of groupedTabs; track group) {\n    <sky-vertical-tabset-group\n      [groupHeading]=\"group.heading\"\n      [open]=\"group.isOpen\"\n      [disabled]=\"group.isDisabled\"\n    >\n      @for (tab of group.subTabs; track tab) {\n        <sky-vertical-tab [active]=\"tab.active\" [tabHeading]=\"tab.tabHeading\">\n          {{ tab.content }}\n        </sky-vertical-tab>\n      }\n    </sky-vertical-tabset-group>\n  }\n\n  <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 Content </sky-vertical-tab>\n\n  <sky-vertical-tab tabHeading=\"Tab 2\" [tabHeaderCount]=\"3\">\n    Tab 2 Content\n  </sky-vertical-tab>\n\n  <sky-vertical-tab tabHeading=\"Tab 3\" [disabled]=\"true\">\n    Tab 3 Content\n  </sky-vertical-tab>\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ7, selector: "sky-vertical-tabset-group", inputs: ["disabled", "groupHeading", "open"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: TabsVerticalTabsMixedExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-mixed-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-mixed\" showTabsText=\"Tab list\">\n  @for (group of groupedTabs; track group) {\n    <sky-vertical-tabset-group\n      [groupHeading]=\"group.heading\"\n      [open]=\"group.isOpen\"\n      [disabled]=\"group.isDisabled\"\n    >\n      @for (tab of group.subTabs; track tab) {\n        <sky-vertical-tab [active]=\"tab.active\" [tabHeading]=\"tab.tabHeading\">\n          {{ tab.content }}\n        </sky-vertical-tab>\n      }\n    </sky-vertical-tabset-group>\n  }\n\n  <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 Content </sky-vertical-tab>\n\n  <sky-vertical-tab tabHeading=\"Tab 2\" [tabHeaderCount]=\"3\">\n    Tab 2 Content\n  </sky-vertical-tab>\n\n  <sky-vertical-tab tabHeading=\"Tab 3\" [disabled]=\"true\">\n    Tab 3 Content\n  </sky-vertical-tab>\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent", "tabWidth"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ7, selector: "sky-vertical-tabset-group", inputs: ["disabled", "groupHeading", "open"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabsVerticalTabsMixedExampleComponent, decorators: [{
             type: Component,
@@ -14954,7 +14952,7 @@ class ModalComponent {
         this.isSaveDisabled = !this.formGroup?.get('termsAccepted')?.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSave()\">\n  <sky-modal [headingText]=\"title\">\n    <sky-modal-content>\n      <sky-tabset\n        #wizardDemo\n        ariaLabel=\"Sign-up steps\"\n        data-sky-id=\"sign-up-wizard\"\n        tabStyle=\"wizard\"\n        [(active)]=\"activeIndex\"\n      >\n        <sky-tab tabHeading=\"1. Biographical Details\">\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"First name\" [stacked]=\"true\">\n                  <input type=\"text\" formControlName=\"firstName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Middle name\" [stacked]=\"true\">\n                  <input type=\"text\" formControlName=\"middleName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Last name\">\n                  <input type=\"text\" formControlName=\"lastName\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab\n          tabHeading=\"2. Contact Information\"\n          [disabled]=\"isStep2Disabled\"\n        >\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Phone Number\" [stacked]=\"true\">\n                  <sky-phone-field defaultCountry=\"us\">\n                    <input formControlName=\"phoneNumber\" skyPhoneFieldInput />\n                  </sky-phone-field>\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Email\">\n                  <input type=\"email\" formControlName=\"email\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab tabHeading=\"3. More Information\" [disabled]=\"isStep3Disabled\">\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox\n                  formControlName=\"termsAccepted\"\n                  labelText=\"Accept terms and conditions\"\n                  required\n                />\n              </sky-column>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox\n                  formControlName=\"mailingList\"\n                  labelText=\"Sign up for our email newsletter\"\n                />\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n      </sky-tabset>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <sky-tabset-nav-button buttonType=\"previous\" [tabset]=\"wizardDemo\" />\n      <sky-tabset-nav-button buttonType=\"next\" [tabset]=\"wizardDemo\" />\n      <sky-tabset-nav-button\n        buttonType=\"finish\"\n        [tabset]=\"wizardDemo\"\n        [disabled]=\"isSaveDisabled\"\n      />\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyPhoneFieldModule }, { kind: "component", type: i3$4.λ1, selector: "sky-phone-field", inputs: ["allowExtensions", "defaultCountry", "returnFormat", "supportedCountryISOs", "selectedCountry"], outputs: ["selectedCountryChange"] }, { kind: "directive", type: i3$4.λ2, selector: "[skyPhoneFieldInput]", inputs: ["disabled", "skyPhoneFieldNoValidate"] }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i1$2.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i1$2.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "component", type: i1$2.λ3, selector: "sky-tabset-nav-button", inputs: ["tabset", "buttonType", "buttonText", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSave()\">\n  <sky-modal [headingText]=\"title\">\n    <sky-modal-content>\n      <sky-tabset\n        #wizardDemo\n        ariaLabel=\"Sign-up steps\"\n        data-sky-id=\"sign-up-wizard\"\n        tabStyle=\"wizard\"\n        [(active)]=\"activeIndex\"\n      >\n        <sky-tab tabHeading=\"1. Biographical Details\">\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"First name\" [stacked]=\"true\">\n                  <input type=\"text\" formControlName=\"firstName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Middle name\" [stacked]=\"true\">\n                  <input type=\"text\" formControlName=\"middleName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Last name\">\n                  <input type=\"text\" formControlName=\"lastName\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab\n          tabHeading=\"2. Contact Information\"\n          [disabled]=\"isStep2Disabled\"\n        >\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Phone Number\" [stacked]=\"true\">\n                  <sky-phone-field defaultCountry=\"us\">\n                    <input formControlName=\"phoneNumber\" skyPhoneFieldInput />\n                  </sky-phone-field>\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Email\">\n                  <input type=\"email\" formControlName=\"email\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab tabHeading=\"3. More Information\" [disabled]=\"isStep3Disabled\">\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox\n                  formControlName=\"termsAccepted\"\n                  labelText=\"Accept terms and conditions\"\n                  required\n                />\n              </sky-column>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox\n                  formControlName=\"mailingList\"\n                  labelText=\"Sign up for our email newsletter\"\n                />\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n      </sky-tabset>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <sky-tabset-nav-button buttonType=\"previous\" [tabset]=\"wizardDemo\" />\n      <sky-tabset-nav-button buttonType=\"next\" [tabset]=\"wizardDemo\" />\n      <sky-tabset-nav-button\n        buttonType=\"finish\"\n        [tabset]=\"wizardDemo\"\n        [disabled]=\"isSaveDisabled\"\n      />\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyPhoneFieldModule }, { kind: "component", type: i3$3.λ1, selector: "sky-phone-field", inputs: ["allowExtensions", "defaultCountry", "returnFormat", "supportedCountryISOs", "selectedCountry"], outputs: ["selectedCountryChange"] }, { kind: "directive", type: i3$3.λ2, selector: "[skyPhoneFieldInput]", inputs: ["disabled", "skyPhoneFieldNoValidate"] }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i1$2.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i1$2.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "component", type: i1$2.λ3, selector: "sky-tabset-nav-button", inputs: ["tabset", "buttonType", "buttonText", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
@@ -15056,7 +15054,7 @@ class Tile1Component {
         alert('tile settings clicked');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Tile1Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: Tile1Component, isStandalone: true, selector: "div.tile1", ngImport: i0, template: "<sky-tile\n  data-sky-id=\"tile-1\"\n  helpPopoverContent=\"Sample help information for tile 1.\"\n  helpPopoverTitle=\"Sample help content\"\n  tileName=\"Tile 1\"\n  (settingsClick)=\"tileSettingsClick()\"\n>\n  <sky-tile-title> Tile 1 </sky-tile-title>\n  <sky-tile-summary> $123.4m </sky-tile-summary>\n  <sky-tile-content>\n    <sky-tile-content-section data-sky-id=\"section-1\">\n      Section 1\n    </sky-tile-content-section>\n    <sky-tile-content-section> Section 2 </sky-tile-content-section>\n    <sky-tile-content-section> Section 3 </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\n", dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$d.λ5, selector: "sky-tile-content" }, { kind: "component", type: i1$d.λ4, selector: "sky-tile-content-section" }, { kind: "component", type: i1$d.λ1, selector: "sky-tile", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "showSettings", "showHelp", "tileName", "isCollapsed"], outputs: ["settingsClick", "isCollapsedChange", "helpClick"] }, { kind: "component", type: i1$d.λ2, selector: "sky-tile-summary" }, { kind: "component", type: i1$d.λ3, selector: "sky-tile-title" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: Tile1Component, isStandalone: true, selector: "div.tile1", ngImport: i0, template: "<sky-tile\n  data-sky-id=\"tile-1\"\n  helpPopoverContent=\"Sample help information for tile 1.\"\n  helpPopoverTitle=\"Sample help content\"\n  tileName=\"Tile 1\"\n  (settingsClick)=\"tileSettingsClick()\"\n>\n  <sky-tile-title> Tile 1 </sky-tile-title>\n  <sky-tile-summary> $123.4m </sky-tile-summary>\n  <sky-tile-content>\n    <sky-tile-content-section data-sky-id=\"section-1\">\n      Section 1\n    </sky-tile-content-section>\n    <sky-tile-content-section> Section 2 </sky-tile-content-section>\n    <sky-tile-content-section> Section 3 </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\n", dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$e.λ5, selector: "sky-tile-content" }, { kind: "component", type: i1$e.λ4, selector: "sky-tile-content-section" }, { kind: "component", type: i1$e.λ1, selector: "sky-tile", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "showSettings", "showHelp", "tileName", "isCollapsed"], outputs: ["settingsClick", "isCollapsedChange", "helpClick"] }, { kind: "component", type: i1$e.λ2, selector: "sky-tile-summary" }, { kind: "component", type: i1$e.λ3, selector: "sky-tile-title" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Tile1Component, decorators: [{
             type: Component,
@@ -15065,7 +15063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 
 class Tile2Component {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Tile2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: Tile2Component, isStandalone: true, selector: "div.tile2", ngImport: i0, template: "<sky-tile helpKey=\"tile-2-help\" tileName=\"Tile 2\" [attr.data-sky-id]=\"'tile-2'\">\n  <sky-tile-title> Tile 2 </sky-tile-title>\n  <sky-tile-content>\n    <sky-tile-content-section> Section 1 </sky-tile-content-section>\n    <sky-tile-content-section> Section 2 </sky-tile-content-section>\n    <sky-tile-content-section> Section 3 </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\n", dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$d.λ5, selector: "sky-tile-content" }, { kind: "component", type: i1$d.λ4, selector: "sky-tile-content-section" }, { kind: "component", type: i1$d.λ1, selector: "sky-tile", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "showSettings", "showHelp", "tileName", "isCollapsed"], outputs: ["settingsClick", "isCollapsedChange", "helpClick"] }, { kind: "component", type: i1$d.λ3, selector: "sky-tile-title" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: Tile2Component, isStandalone: true, selector: "div.tile2", ngImport: i0, template: "<sky-tile helpKey=\"tile-2-help\" tileName=\"Tile 2\" [attr.data-sky-id]=\"'tile-2'\">\n  <sky-tile-title> Tile 2 </sky-tile-title>\n  <sky-tile-content>\n    <sky-tile-content-section> Section 1 </sky-tile-content-section>\n    <sky-tile-content-section> Section 2 </sky-tile-content-section>\n    <sky-tile-content-section> Section 3 </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\n", dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$e.λ5, selector: "sky-tile-content" }, { kind: "component", type: i1$e.λ4, selector: "sky-tile-content-section" }, { kind: "component", type: i1$e.λ1, selector: "sky-tile", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "showSettings", "showHelp", "tileName", "isCollapsed"], outputs: ["settingsClick", "isCollapsedChange", "helpClick"] }, { kind: "component", type: i1$e.λ3, selector: "sky-tile-title" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Tile2Component, decorators: [{
             type: Component,
@@ -15123,7 +15121,7 @@ class TilesBasicExampleComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TilesBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: TilesBasicExampleComponent, isStandalone: true, selector: "app-tiles-basic-example", ngImport: i0, template: "<sky-tile-dashboard\n  data-sky-id=\"basic-dashboard\"\n  [(config)]=\"dashboardConfig\"\n/>\n", dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$d.λ7, selector: "sky-tile-dashboard", inputs: ["config", "messageStream", "settingsKey"], outputs: ["configChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: TilesBasicExampleComponent, isStandalone: true, selector: "app-tiles-basic-example", ngImport: i0, template: "<sky-tile-dashboard\n  data-sky-id=\"basic-dashboard\"\n  [(config)]=\"dashboardConfig\"\n/>\n", dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$e.λ7, selector: "sky-tile-dashboard", inputs: ["config", "messageStream", "settingsKey"], outputs: ["configChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TilesBasicExampleComponent, decorators: [{
             type: Component,