@skyux/code-examples 14.2.0 → 14.2.2

package/fesm2022/skyux-code-examples.mjs

@@ -1183,7 +1183,7 @@ let ViewGridComponent$3 = class ViewGridComponent {
                 },
             },
         ];
-        this.noRowsTemplate = `<div class="sky-font-deemphasized">No results found.</div>`;
+        this.noRowsTemplate = `<div class="sky-theme-font-body-deemphasized-m">No results found.</div>`;
         this.#dataManagerSvc = inject(SkyDataManagerService);
         this.#dataState = toSignal(this.#dataManagerSvc.getDataStateUpdates(this.viewId), { initialValue: new SkyDataManagerState({}) });
         this.#gridApi = signal(undefined, ...(ngDevMode ? [{ debugName: "#gridApi" }] : []));
@@ -1655,11 +1655,11 @@ class AgGridDataEntryGridFocusExampleComponent {
             : 'N/A';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AgGridDataEntryGridFocusExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: AgGridDataEntryGridFocusExampleComponent, isStandalone: true, selector: "app-ag-grid-data-entry-grid-focus-example", ngImport: i0, template: "<sky-input-box\n  labelText=\"Start here\"\n  helpPopoverContent=\"Then tab to the grid\"\n  stacked\n>\n  <input type=\"text\" />\n</sky-input-box>\n<div class=\"sky-margin-stacked-md\">\n  <sky-ag-grid-wrapper>\n    <ag-grid-angular class=\"sky-ag-grid-editable\" [gridOptions]=\"gridOptions\" />\n  </sky-ag-grid-wrapper>\n</div>\n<sky-input-box\n  labelText=\"Or start here\"\n  helpPopoverContent=\"Then tab backwards to the grid\"\n  stacked\n>\n  <input type=\"text\" />\n</sky-input-box>\n", dependencies: [{ kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "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", "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", "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", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "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", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "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", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "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: "component", type: i1$4.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { 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.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: AgGridDataEntryGridFocusExampleComponent, isStandalone: true, selector: "app-ag-grid-data-entry-grid-focus-example", ngImport: i0, template: "<sky-input-box\n  labelText=\"Start here\"\n  helpPopoverContent=\"Then tab to the grid\"\n  stacked\n>\n  <input type=\"text\" />\n</sky-input-box>\n<div class=\"sky-theme-margin-bottom-m\">\n  <sky-ag-grid-wrapper>\n    <ag-grid-angular class=\"sky-ag-grid-editable\" [gridOptions]=\"gridOptions\" />\n  </sky-ag-grid-wrapper>\n</div>\n<sky-input-box\n  labelText=\"Or start here\"\n  helpPopoverContent=\"Then tab backwards to the grid\"\n  stacked\n>\n  <input type=\"text\" />\n</sky-input-box>\n", dependencies: [{ kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "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", "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", "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", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "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", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "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", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "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: "component", type: i1$4.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { 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.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AgGridDataEntryGridFocusExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ag-grid-data-entry-grid-focus-example', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AgGridAngular, SkyAgGridModule, SkyInputBoxModule], template: "<sky-input-box\n  labelText=\"Start here\"\n  helpPopoverContent=\"Then tab to the grid\"\n  stacked\n>\n  <input type=\"text\" />\n</sky-input-box>\n<div class=\"sky-margin-stacked-md\">\n  <sky-ag-grid-wrapper>\n    <ag-grid-angular class=\"sky-ag-grid-editable\" [gridOptions]=\"gridOptions\" />\n  </sky-ag-grid-wrapper>\n</div>\n<sky-input-box\n  labelText=\"Or start here\"\n  helpPopoverContent=\"Then tab backwards to the grid\"\n  stacked\n>\n  <input type=\"text\" />\n</sky-input-box>\n" }]
+            args: [{ selector: 'app-ag-grid-data-entry-grid-focus-example', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AgGridAngular, SkyAgGridModule, SkyInputBoxModule], template: "<sky-input-box\n  labelText=\"Start here\"\n  helpPopoverContent=\"Then tab to the grid\"\n  stacked\n>\n  <input type=\"text\" />\n</sky-input-box>\n<div class=\"sky-theme-margin-bottom-m\">\n  <sky-ag-grid-wrapper>\n    <ag-grid-angular class=\"sky-ag-grid-editable\" [gridOptions]=\"gridOptions\" />\n  </sky-ag-grid-wrapper>\n</div>\n<sky-input-box\n  labelText=\"Or start here\"\n  helpPopoverContent=\"Then tab backwards to the grid\"\n  stacked\n>\n  <input type=\"text\" />\n</sky-input-box>\n" }]
         }] });
 
 let ContextMenuComponent$7 = class ContextMenuComponent {
@@ -3906,7 +3906,7 @@ class AgGridDataGridInlineHelpExampleComponent {
         ];
         this.#agGridSvc = inject(SkyAgGridService);
         this.#changeDetectorRef = inject(ChangeDetectorRef);
-        this.noRowsTemplate = `<div class="sky-font-deemphasized">No results found.</div>`;
+        this.noRowsTemplate = `<div class="sky-theme-font-body-deemphasized-m">No results found.</div>`;
         this.gridOptions = this.#agGridSvc.getGridOptions({
             gridOptions: {
                 columnDefs: this.#columnDefs,
@@ -4331,11 +4331,11 @@ class AgGridDataGridTemplateRefColumnExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AgGridDataGridTemplateRefColumnExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AgGridDataGridTemplateRefColumnExampleComponent, isStandalone: true, selector: "app-ag-grid-data-grid-template-ref-column-example", viewQueries: [{ propertyName: "boldColumn", first: true, predicate: ["boldColumn"], descendants: true, isSignal: true }, { propertyName: "emphasizedColumn", first: true, predicate: ["emphasizedColumn"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #boldColumn let-value=\"value\">\n  <strong>{{ value }}</strong>\n</ng-template>\n<ng-template #emphasizedColumn let-value=\"value\" let-row=\"row\">\n  @if (row['jobLevel']) {\n    <span class=\"sky-margin-inline-sm sky-pull-right\">{{\n      row['jobLevel']\n    }}</span>\n  }\n  <em>{{ value }}</em>\n</ng-template>\n<sky-ag-grid-wrapper>\n  <ag-grid-angular [gridOptions]=\"gridOptions\" />\n</sky-ag-grid-wrapper>\n", dependencies: [{ kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "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", "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", "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", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "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", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "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", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "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: "component", type: i1$4.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AgGridDataGridTemplateRefColumnExampleComponent, isStandalone: true, selector: "app-ag-grid-data-grid-template-ref-column-example", viewQueries: [{ propertyName: "boldColumn", first: true, predicate: ["boldColumn"], descendants: true, isSignal: true }, { propertyName: "emphasizedColumn", first: true, predicate: ["emphasizedColumn"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #boldColumn let-value=\"value\">\n  <strong>{{ value }}</strong>\n</ng-template>\n<ng-template #emphasizedColumn let-value=\"value\" let-row=\"row\">\n  @if (row['jobLevel']) {\n    <span class=\"sky-theme-margin-right-s sky-pull-right\">{{\n      row['jobLevel']\n    }}</span>\n  }\n  <em>{{ value }}</em>\n</ng-template>\n<sky-ag-grid-wrapper>\n  <ag-grid-angular [gridOptions]=\"gridOptions\" />\n</sky-ag-grid-wrapper>\n", dependencies: [{ kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "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", "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", "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", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "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", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "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", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "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: "component", type: i1$4.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AgGridDataGridTemplateRefColumnExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ag-grid-data-grid-template-ref-column-example', imports: [AgGridAngular, SkyAgGridModule], template: "<ng-template #boldColumn let-value=\"value\">\n  <strong>{{ value }}</strong>\n</ng-template>\n<ng-template #emphasizedColumn let-value=\"value\" let-row=\"row\">\n  @if (row['jobLevel']) {\n    <span class=\"sky-margin-inline-sm sky-pull-right\">{{\n      row['jobLevel']\n    }}</span>\n  }\n  <em>{{ value }}</em>\n</ng-template>\n<sky-ag-grid-wrapper>\n  <ag-grid-angular [gridOptions]=\"gridOptions\" />\n</sky-ag-grid-wrapper>\n" }]
+            args: [{ selector: 'app-ag-grid-data-grid-template-ref-column-example', imports: [AgGridAngular, SkyAgGridModule], template: "<ng-template #boldColumn let-value=\"value\">\n  <strong>{{ value }}</strong>\n</ng-template>\n<ng-template #emphasizedColumn let-value=\"value\" let-row=\"row\">\n  @if (row['jobLevel']) {\n    <span class=\"sky-theme-margin-right-s sky-pull-right\">{{\n      row['jobLevel']\n    }}</span>\n  }\n  <em>{{ value }}</em>\n</ng-template>\n<sky-ag-grid-wrapper>\n  <ag-grid-angular [gridOptions]=\"gridOptions\" />\n</sky-ag-grid-wrapper>\n" }]
         }], propDecorators: { boldColumn: [{ type: i0.ViewChild, args: ['boldColumn', { isSignal: true }] }], emphasizedColumn: [{ type: i0.ViewChild, args: ['emphasizedColumn', { isSignal: true }] }] } });
 
 class ContextMenuComponent {
@@ -4518,7 +4518,7 @@ class AgGridDataGridTopScrollExampleComponent {
     constructor() {
         this.gridData = AG_GRID_DEMO_DATA;
         this.searchText = '';
-        this.noRowsTemplate = `<div class="sky-font-deemphasized">No results found.</div>`;
+        this.noRowsTemplate = `<div class="sky-theme-font-body-deemphasized-m">No results found.</div>`;
         this.#columnDefs = [
             {
                 colId: 'context',
@@ -5063,7 +5063,7 @@ class ColorpickerProgrammaticExampleComponent {
         this.colorpickerController.next({ type });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ColorpickerProgrammaticExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ColorpickerProgrammaticExampleComponent, isStandalone: true, selector: "app-colorpicker-programmatic-example", ngImport: i0, template: "<form class=\"sky-margin-stacked-xxl\" [formGroup]=\"formGroup\">\n  <sky-colorpicker\n    #colorPicker\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [messageStream]=\"colorpickerController\"\n    [showResetButton]=\"showResetButton\"\n    [stacked]=\"true\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n</form>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openColorpicker()\"\n>\n  Open colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"resetColorpicker()\"\n>\n  Reset colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"toggleResetButton()\"\n>\n  Toggle reset button\n</button>\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: SkyColorpickerModule }, { kind: "component", type: i2$7.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$7.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "ngmodule", type: SkyFormErrorModule }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ColorpickerProgrammaticExampleComponent, isStandalone: true, selector: "app-colorpicker-programmatic-example", ngImport: i0, template: "<form class=\"sky-theme-margin-bottom-xxl\" [formGroup]=\"formGroup\">\n  <sky-colorpicker\n    #colorPicker\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [messageStream]=\"colorpickerController\"\n    [showResetButton]=\"showResetButton\"\n    [stacked]=\"true\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n</form>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openColorpicker()\"\n>\n  Open colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"resetColorpicker()\"\n>\n  Reset colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"toggleResetButton()\"\n>\n  Toggle reset button\n</button>\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: SkyColorpickerModule }, { kind: "component", type: i2$7.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$7.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "ngmodule", type: SkyFormErrorModule }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ColorpickerProgrammaticExampleComponent, decorators: [{
             type: Component,
@@ -5072,7 +5072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         ReactiveFormsModule,
                         SkyColorpickerModule,
                         SkyFormErrorModule,
-                    ], template: "<form class=\"sky-margin-stacked-xxl\" [formGroup]=\"formGroup\">\n  <sky-colorpicker\n    #colorPicker\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [messageStream]=\"colorpickerController\"\n    [showResetButton]=\"showResetButton\"\n    [stacked]=\"true\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n</form>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openColorpicker()\"\n>\n  Open colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"resetColorpicker()\"\n>\n  Reset colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"toggleResetButton()\"\n>\n  Toggle reset button\n</button>\n" }]
+                    ], template: "<form class=\"sky-theme-margin-bottom-xxl\" [formGroup]=\"formGroup\">\n  <sky-colorpicker\n    #colorPicker\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [messageStream]=\"colorpickerController\"\n    [showResetButton]=\"showResetButton\"\n    [stacked]=\"true\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n</form>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openColorpicker()\"\n>\n  Open colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"resetColorpicker()\"\n>\n  Reset colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"toggleResetButton()\"\n>\n  Toggle reset button\n</button>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -5619,11 +5619,11 @@ class DatetimeDateRangePickerBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatetimeDateRangePickerBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DatetimeDateRangePickerBasicExampleComponent, isStandalone: true, selector: "app-datetime-date-range-picker-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      data-sky-id=\"last-donation\"\n      formControlName=\"lastDonation\"\n      [dateFormat]=\"dateFormat\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    >\n      @if (lastDonation.errors?.['dateWeekend']) {\n        <sky-form-error\n          errorName=\"dateWeekend\"\n          errorText=\"Do not pick a weekend.\"\n        />\n      }\n    </sky-date-range-picker>\n  </form>\n</div>\n\n<ng-template #inlineHelpPopover>\n  By default, donations include one-time gifts, pledges, and matching gifts. To\n  customize, see <a>Giving settings</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.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: SkyDateRangePickerModule }, { kind: "component", type: i2$8.λ5, selector: "sky-date-range-picker", inputs: ["calculatorIds", "dateFormat", "disabled", "helpPopoverContent", "helpPopoverTitle", "hintText", "label", "labelText", "stacked", "helpKey"] }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DatetimeDateRangePickerBasicExampleComponent, isStandalone: true, selector: "app-datetime-date-range-picker-basic-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      data-sky-id=\"last-donation\"\n      formControlName=\"lastDonation\"\n      [dateFormat]=\"dateFormat\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    >\n      @if (lastDonation.errors?.['dateWeekend']) {\n        <sky-form-error\n          errorName=\"dateWeekend\"\n          errorText=\"Do not pick a weekend.\"\n        />\n      }\n    </sky-date-range-picker>\n  </form>\n</div>\n\n<ng-template #inlineHelpPopover>\n  By default, donations include one-time gifts, pledges, and matching gifts. To\n  customize, see <a>Giving settings</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.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: SkyDateRangePickerModule }, { kind: "component", type: i2$8.λ5, selector: "sky-date-range-picker", inputs: ["calculatorIds", "dateFormat", "disabled", "helpPopoverContent", "helpPopoverTitle", "hintText", "label", "labelText", "stacked", "helpKey"] }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatetimeDateRangePickerBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-datetime-date-range-picker-basic-example', imports: [FormsModule, ReactiveFormsModule, SkyDateRangePickerModule], template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      data-sky-id=\"last-donation\"\n      formControlName=\"lastDonation\"\n      [dateFormat]=\"dateFormat\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    >\n      @if (lastDonation.errors?.['dateWeekend']) {\n        <sky-form-error\n          errorName=\"dateWeekend\"\n          errorText=\"Do not pick a weekend.\"\n        />\n      }\n    </sky-date-range-picker>\n  </form>\n</div>\n\n<ng-template #inlineHelpPopover>\n  By default, donations include one-time gifts, pledges, and matching gifts. To\n  customize, see <a>Giving settings</a>.\n</ng-template>\n" }]
+            args: [{ selector: 'app-datetime-date-range-picker-basic-example', imports: [FormsModule, ReactiveFormsModule, SkyDateRangePickerModule], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      data-sky-id=\"last-donation\"\n      formControlName=\"lastDonation\"\n      [dateFormat]=\"dateFormat\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    >\n      @if (lastDonation.errors?.['dateWeekend']) {\n        <sky-form-error\n          errorName=\"dateWeekend\"\n          errorText=\"Do not pick a weekend.\"\n        />\n      }\n    </sky-date-range-picker>\n  </form>\n</div>\n\n<ng-template #inlineHelpPopover>\n  By default, donations include one-time gifts, pledges, and matching gifts. To\n  customize, see <a>Giving settings</a>.\n</ng-template>\n" }]
         }] });
 
 /**
@@ -5691,7 +5691,7 @@ class DatetimeDateRangePickerCustomCalculatorExampleComponent {
         return this.#dateRangeSvc.filterCalculators([id])[0];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatetimeDateRangePickerCustomCalculatorExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DatetimeDateRangePickerCustomCalculatorExampleComponent, isStandalone: true, selector: "app-datetime-date-range-picker-custom-calculator-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      formControlName=\"lastDonation\"\n      [calculatorIds]=\"customCalculators\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    >\n      @if (\n        lastDonation.errors?.['skyDateRange']?.errors?.['dateIsAfterToday']\n      ) {\n        <sky-form-error\n          errorName=\"dateIsAfterToday\"\n          errorText=\"Enter a date before today.\"\n        />\n      }\n    </sky-date-range-picker>\n  </form>\n  <p>\n    Selected calculator: {{ selectedCalculator()?.shortDescription$ | async }}\n  </p>\n</div>\n\n<ng-template #inlineHelpPopover>\n  By default, donations include one-time gifts, pledges, and matching gifts. To\n  customize, see <a>Giving settings</a>.\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.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: SkyDateRangePickerModule }, { kind: "component", type: i2$8.λ5, selector: "sky-date-range-picker", inputs: ["calculatorIds", "dateFormat", "disabled", "helpPopoverContent", "helpPopoverTitle", "hintText", "label", "labelText", "stacked", "helpKey"] }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DatetimeDateRangePickerCustomCalculatorExampleComponent, isStandalone: true, selector: "app-datetime-date-range-picker-custom-calculator-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      formControlName=\"lastDonation\"\n      [calculatorIds]=\"customCalculators\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    >\n      @if (\n        lastDonation.errors?.['skyDateRange']?.errors?.['dateIsAfterToday']\n      ) {\n        <sky-form-error\n          errorName=\"dateIsAfterToday\"\n          errorText=\"Enter a date before today.\"\n        />\n      }\n    </sky-date-range-picker>\n  </form>\n  <p>\n    Selected calculator: {{ selectedCalculator()?.shortDescription$ | async }}\n  </p>\n</div>\n\n<ng-template #inlineHelpPopover>\n  By default, donations include one-time gifts, pledges, and matching gifts. To\n  customize, see <a>Giving settings</a>.\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.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: SkyDateRangePickerModule }, { kind: "component", type: i2$8.λ5, selector: "sky-date-range-picker", inputs: ["calculatorIds", "dateFormat", "disabled", "helpPopoverContent", "helpPopoverTitle", "hintText", "label", "labelText", "stacked", "helpKey"] }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatetimeDateRangePickerCustomCalculatorExampleComponent, decorators: [{
             type: Component,
@@ -5700,7 +5700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         FormsModule,
                         ReactiveFormsModule,
                         SkyDateRangePickerModule,
-                    ], template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      formControlName=\"lastDonation\"\n      [calculatorIds]=\"customCalculators\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    >\n      @if (\n        lastDonation.errors?.['skyDateRange']?.errors?.['dateIsAfterToday']\n      ) {\n        <sky-form-error\n          errorName=\"dateIsAfterToday\"\n          errorText=\"Enter a date before today.\"\n        />\n      }\n    </sky-date-range-picker>\n  </form>\n  <p>\n    Selected calculator: {{ selectedCalculator()?.shortDescription$ | async }}\n  </p>\n</div>\n\n<ng-template #inlineHelpPopover>\n  By default, donations include one-time gifts, pledges, and matching gifts. To\n  customize, see <a>Giving settings</a>.\n</ng-template>\n" }]
+                    ], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      formControlName=\"lastDonation\"\n      [calculatorIds]=\"customCalculators\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    >\n      @if (\n        lastDonation.errors?.['skyDateRange']?.errors?.['dateIsAfterToday']\n      ) {\n        <sky-form-error\n          errorName=\"dateIsAfterToday\"\n          errorText=\"Enter a date before today.\"\n        />\n      }\n    </sky-date-range-picker>\n  </form>\n  <p>\n    Selected calculator: {{ selectedCalculator()?.shortDescription$ | async }}\n  </p>\n</div>\n\n<ng-template #inlineHelpPopover>\n  By default, donations include one-time gifts, pledges, and matching gifts. To\n  customize, see <a>Giving settings</a>.\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -5724,11 +5724,11 @@ class DatetimeDateRangePickerHelpKeyExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatetimeDateRangePickerHelpKeyExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DatetimeDateRangePickerHelpKeyExampleComponent, isStandalone: true, selector: "app-datetime-date-range-picker-help-key-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      data-sky-id=\"last-donation\"\n      formControlName=\"lastDonation\"\n      helpKey=\"dates-help\"\n      [dateFormat]=\"dateFormat\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    />\n  </form>\n</div>\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: SkyDateRangePickerModule }, { kind: "component", type: i2$8.λ5, selector: "sky-date-range-picker", inputs: ["calculatorIds", "dateFormat", "disabled", "helpPopoverContent", "helpPopoverTitle", "hintText", "label", "labelText", "stacked", "helpKey"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DatetimeDateRangePickerHelpKeyExampleComponent, isStandalone: true, selector: "app-datetime-date-range-picker-help-key-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      data-sky-id=\"last-donation\"\n      formControlName=\"lastDonation\"\n      helpKey=\"dates-help\"\n      [dateFormat]=\"dateFormat\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    />\n  </form>\n</div>\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: SkyDateRangePickerModule }, { kind: "component", type: i2$8.λ5, selector: "sky-date-range-picker", inputs: ["calculatorIds", "dateFormat", "disabled", "helpPopoverContent", "helpPopoverTitle", "hintText", "label", "labelText", "stacked", "helpKey"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatetimeDateRangePickerHelpKeyExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-datetime-date-range-picker-help-key-example', imports: [FormsModule, ReactiveFormsModule, SkyDateRangePickerModule], template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      data-sky-id=\"last-donation\"\n      formControlName=\"lastDonation\"\n      helpKey=\"dates-help\"\n      [dateFormat]=\"dateFormat\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    />\n  </form>\n</div>\n" }]
+            args: [{ selector: 'app-datetime-date-range-picker-help-key-example', imports: [FormsModule, ReactiveFormsModule, SkyDateRangePickerModule], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      data-sky-id=\"last-donation\"\n      formControlName=\"lastDonation\"\n      helpKey=\"dates-help\"\n      [dateFormat]=\"dateFormat\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    />\n  </form>\n</div>\n" }]
         }] });
 
 function validateDate(control) {
@@ -5758,7 +5758,7 @@ class DatetimeDatepickerBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatetimeDatepickerBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DatetimeDatepickerBasicExampleComponent, isStandalone: true, selector: "app-datetime-datepicker-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"datepicker-example\"\n      labelText=\"Start date\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-datepicker>\n        <input formControlName=\"startDate\" skyDatepickerInput type=\"text\" />\n      </sky-datepicker>\n      @if (startDate.errors?.['invalidWeekend']) {\n        <sky-form-error\n          errorName=\"invalidWeekend\"\n          errorText=\"Start date must not be on a weekend.\"\n        />\n      }\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ startDate.value | json }}</code>\n  </p>\n</div>\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: SkyDatepickerModule }, { kind: "component", type: i2$8.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$8.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { 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: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DatetimeDatepickerBasicExampleComponent, isStandalone: true, selector: "app-datetime-datepicker-basic-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"datepicker-example\"\n      labelText=\"Start date\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-datepicker>\n        <input formControlName=\"startDate\" skyDatepickerInput type=\"text\" />\n      </sky-datepicker>\n      @if (startDate.errors?.['invalidWeekend']) {\n        <sky-form-error\n          errorName=\"invalidWeekend\"\n          errorText=\"Start date must not be on a weekend.\"\n        />\n      }\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ startDate.value | json }}</code>\n  </p>\n</div>\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: SkyDatepickerModule }, { kind: "component", type: i2$8.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$8.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { 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: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatetimeDatepickerBasicExampleComponent, decorators: [{
             type: Component,
@@ -5768,7 +5768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         ReactiveFormsModule,
                         SkyDatepickerModule,
                         SkyInputBoxModule,
-                    ], template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"datepicker-example\"\n      labelText=\"Start date\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-datepicker>\n        <input formControlName=\"startDate\" skyDatepickerInput type=\"text\" />\n      </sky-datepicker>\n      @if (startDate.errors?.['invalidWeekend']) {\n        <sky-form-error\n          errorName=\"invalidWeekend\"\n          errorText=\"Start date must not be on a weekend.\"\n        />\n      }\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ startDate.value | json }}</code>\n  </p>\n</div>\n" }]
+                    ], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"datepicker-example\"\n      labelText=\"Start date\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-datepicker>\n        <input formControlName=\"startDate\" skyDatepickerInput type=\"text\" />\n      </sky-datepicker>\n      @if (startDate.errors?.['invalidWeekend']) {\n        <sky-form-error\n          errorName=\"invalidWeekend\"\n          errorText=\"Start date must not be on a weekend.\"\n        />\n      }\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ startDate.value | json }}</code>\n  </p>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -5850,7 +5850,7 @@ class DatetimeDatepickerCustomDatesExampleComponent {
         return of(customDates);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatetimeDatepickerCustomDatesExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DatetimeDatepickerCustomDatesExampleComponent, isStandalone: true, selector: "app-datetime-datepicker-custom-dates-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"Start date\">\n      <sky-datepicker\n        (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      >\n        <input formControlName=\"startDate\" skyDatepickerInput type=\"text\" />\n      </sky-datepicker>\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ formGroup.value.startDate | json }}</code>\n  </p>\n</div>\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: SkyDatepickerModule }, { kind: "component", type: i2$8.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$8.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DatetimeDatepickerCustomDatesExampleComponent, isStandalone: true, selector: "app-datetime-datepicker-custom-dates-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"Start date\">\n      <sky-datepicker\n        (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      >\n        <input formControlName=\"startDate\" skyDatepickerInput type=\"text\" />\n      </sky-datepicker>\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ formGroup.value.startDate | json }}</code>\n  </p>\n</div>\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: SkyDatepickerModule }, { kind: "component", type: i2$8.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$8.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatetimeDatepickerCustomDatesExampleComponent, decorators: [{
             type: Component,
@@ -5860,7 +5860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         ReactiveFormsModule,
                         SkyDatepickerModule,
                         SkyInputBoxModule,
-                    ], template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"Start date\">\n      <sky-datepicker\n        (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      >\n        <input formControlName=\"startDate\" skyDatepickerInput type=\"text\" />\n      </sky-datepicker>\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ formGroup.value.startDate | json }}</code>\n  </p>\n</div>\n" }]
+                    ], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"Start date\">\n      <sky-datepicker\n        (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      >\n        <input formControlName=\"startDate\" skyDatepickerInput type=\"text\" />\n      </sky-datepicker>\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ formGroup.value.startDate | json }}</code>\n  </p>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -5880,7 +5880,7 @@ class DatetimeDatepickerFuzzyExampleComponent {
         return JSON.stringify(this.formGroup.get('dob')?.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatetimeDatepickerFuzzyExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DatetimeDatepickerFuzzyExampleComponent, isStandalone: true, selector: "app-datetime-datepicker-fuzzy-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"fuzzy-datepicker-example\"\n      labelText=\"Date of birth\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-datepicker>\n        <input\n          formControlName=\"dob\"\n          skyFuzzyDatepickerInput\n          type=\"text\"\n          [futureDisabled]=\"true\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ getFuzzyDateForDisplay }}</code>\n  </p>\n</div>\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: SkyDatepickerModule }, { kind: "component", type: i2$8.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$8.λ4, selector: "[skyFuzzyDatepickerInput]", inputs: ["dateFormat", "disabled", "futureDisabled", "maxDate", "minDate", "startAtDate", "skyDatepickerNoValidate", "startingDay", "yearRequired"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DatetimeDatepickerFuzzyExampleComponent, isStandalone: true, selector: "app-datetime-datepicker-fuzzy-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"fuzzy-datepicker-example\"\n      labelText=\"Date of birth\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-datepicker>\n        <input\n          formControlName=\"dob\"\n          skyFuzzyDatepickerInput\n          type=\"text\"\n          [futureDisabled]=\"true\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ getFuzzyDateForDisplay }}</code>\n  </p>\n</div>\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: SkyDatepickerModule }, { kind: "component", type: i2$8.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$8.λ4, selector: "[skyFuzzyDatepickerInput]", inputs: ["dateFormat", "disabled", "futureDisabled", "maxDate", "minDate", "startAtDate", "skyDatepickerNoValidate", "startingDay", "yearRequired"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatetimeDatepickerFuzzyExampleComponent, decorators: [{
             type: Component,
@@ -5889,7 +5889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         ReactiveFormsModule,
                         SkyDatepickerModule,
                         SkyInputBoxModule,
-                    ], template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"fuzzy-datepicker-example\"\n      labelText=\"Date of birth\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-datepicker>\n        <input\n          formControlName=\"dob\"\n          skyFuzzyDatepickerInput\n          type=\"text\"\n          [futureDisabled]=\"true\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ getFuzzyDateForDisplay }}</code>\n  </p>\n</div>\n" }]
+                    ], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"fuzzy-datepicker-example\"\n      labelText=\"Date of birth\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-datepicker>\n        <input\n          formControlName=\"dob\"\n          skyFuzzyDatepickerInput\n          type=\"text\"\n          [futureDisabled]=\"true\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ getFuzzyDateForDisplay }}</code>\n  </p>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 function isTimepickerOutput(value) {
@@ -5915,7 +5915,7 @@ class DatetimeTimepickerBasicExampleComponent {
         this.formGroup = inject(FormBuilder).group({ time: this.time });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatetimeTimepickerBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DatetimeTimepickerBasicExampleComponent, isStandalone: true, selector: "app-datetime-timepicker-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"timepicker-example\"\n      labelText=\"Start time\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-timepicker #timepicker>\n        <input\n          formControlName=\"time\"\n          timeFormat=\"hh\"\n          [skyTimepickerInput]=\"timepicker\"\n        />\n      </sky-timepicker>\n      @if (time.errors?.['invalidMinute']) {\n        <sky-form-error\n          errorName=\"invalidMinute\"\n          errorText=\"Start time must be a 15-minute increment.\"\n        />\n      }\n    </sky-input-box>\n  </form>\n</div>\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyTimepickerModule }, { kind: "directive", type: i2$8.λ7, selector: "[skyTimepickerInput]", inputs: ["skyTimepickerInput", "timeFormat", "returnFormat", "disabled"] }, { kind: "component", type: i2$8.λ6, selector: "sky-timepicker", outputs: ["selectedTimeChanged"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DatetimeTimepickerBasicExampleComponent, isStandalone: true, selector: "app-datetime-timepicker-basic-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"timepicker-example\"\n      labelText=\"Start time\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-timepicker #timepicker>\n        <input\n          formControlName=\"time\"\n          timeFormat=\"hh\"\n          [skyTimepickerInput]=\"timepicker\"\n        />\n      </sky-timepicker>\n      @if (time.errors?.['invalidMinute']) {\n        <sky-form-error\n          errorName=\"invalidMinute\"\n          errorText=\"Start time must be a 15-minute increment.\"\n        />\n      }\n    </sky-input-box>\n  </form>\n</div>\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyTimepickerModule }, { kind: "directive", type: i2$8.λ7, selector: "[skyTimepickerInput]", inputs: ["skyTimepickerInput", "timeFormat", "returnFormat", "disabled"] }, { kind: "component", type: i2$8.λ6, selector: "sky-timepicker", outputs: ["selectedTimeChanged"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatetimeTimepickerBasicExampleComponent, decorators: [{
             type: Component,
@@ -5924,7 +5924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         ReactiveFormsModule,
                         SkyInputBoxModule,
                         SkyTimepickerModule,
-                    ], template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"timepicker-example\"\n      labelText=\"Start time\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-timepicker #timepicker>\n        <input\n          formControlName=\"time\"\n          timeFormat=\"hh\"\n          [skyTimepickerInput]=\"timepicker\"\n        />\n      </sky-timepicker>\n      @if (time.errors?.['invalidMinute']) {\n        <sky-form-error\n          errorName=\"invalidMinute\"\n          errorText=\"Start time must be a 15-minute increment.\"\n        />\n      }\n    </sky-input-box>\n  </form>\n</div>\n" }]
+                    ], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"timepicker-example\"\n      labelText=\"Start time\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-timepicker #timepicker>\n        <input\n          formControlName=\"time\"\n          timeFormat=\"hh\"\n          [skyTimepickerInput]=\"timepicker\"\n        />\n      </sky-timepicker>\n      @if (time.errors?.['invalidMinute']) {\n        <sky-form-error\n          errorName=\"invalidMinute\"\n          errorText=\"Start time must be a 15-minute increment.\"\n        />\n      }\n    </sky-input-box>\n  </form>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -6242,7 +6242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 let FlyoutComponent$1 = class FlyoutComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FlyoutComponent, isStandalone: true, selector: "app-flyout", ngImport: i0, template: `
-    <div class="sky-padding-even-xl">
+    <div class="sky-theme-padding-inset-balanced-xl">
       <h2>Sample flyout</h2>
       <p>
         Flyouts can display large quantities of supplementary information
@@ -6261,7 +6261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{
                     selector: 'app-flyout',
                     template: `
-    <div class="sky-padding-even-xl">
+    <div class="sky-theme-padding-inset-balanced-xl">
       <h2>Sample flyout</h2>
       <p>
         Flyouts can display large quantities of supplementary information
@@ -6311,17 +6311,17 @@ class FlyoutBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FlyoutBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FlyoutBasicExampleComponent, isStandalone: true, selector: "app-flyout-basic-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openSimpleFlyout()\"\n>\n  Open flyout\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithCustomWidth()\"\n>\n  Open flyout with custom width\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"closeAndRemoveFlyout()\"\n>\n  Close flyout programmatically\n</button>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FlyoutBasicExampleComponent, isStandalone: true, selector: "app-flyout-basic-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openSimpleFlyout()\"\n>\n  Open flyout\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openFlyoutWithCustomWidth()\"\n>\n  Open flyout with custom width\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"closeAndRemoveFlyout()\"\n>\n  Close flyout programmatically\n</button>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FlyoutBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-flyout-basic-example', template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openSimpleFlyout()\"\n>\n  Open flyout\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithCustomWidth()\"\n>\n  Open flyout with custom width\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"closeAndRemoveFlyout()\"\n>\n  Close flyout programmatically\n</button>\n" }]
+            args: [{ selector: 'app-flyout-basic-example', template: "<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openSimpleFlyout()\"\n>\n  Open flyout\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openFlyoutWithCustomWidth()\"\n>\n  Open flyout with custom width\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"closeAndRemoveFlyout()\"\n>\n  Close flyout programmatically\n</button>\n" }]
         }] });
 
 class FlyoutComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FlyoutComponent, isStandalone: true, selector: "app-flyout", ngImport: i0, template: `
-    <div class="sky-padding-even-xl">
+    <div class="sky-theme-padding-inset-balanced-xl">
       <h2>Sample flyout</h2>
       <p>
         Flyouts can display large quantities of supplementary information
@@ -6340,7 +6340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{
                     selector: 'app-flyout',
                     template: `
-    <div class="sky-padding-even-xl">
+    <div class="sky-theme-padding-inset-balanced-xl">
       <h2>Sample flyout</h2>
       <p>
         Flyouts can display large quantities of supplementary information
@@ -6448,11 +6448,11 @@ class FlyoutCustomHeadersExampleComponent {
         return this.recordNumber <= 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FlyoutCustomHeadersExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FlyoutCustomHeadersExampleComponent, isStandalone: true, selector: "app-flyout-custom-headers-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithUrlPermalink()\"\n>\n  Open flyout with a URL permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithRoutePermalink()\"\n>\n  Open flyout with an Angular routing permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithIterators()\"\n>\n  Open flyout with iterators\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithPrimaryAction()\"\n>\n  Open flyout with primary action\n</button>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FlyoutCustomHeadersExampleComponent, isStandalone: true, selector: "app-flyout-custom-headers-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openFlyoutWithUrlPermalink()\"\n>\n  Open flyout with a URL permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openFlyoutWithRoutePermalink()\"\n>\n  Open flyout with an Angular routing permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openFlyoutWithIterators()\"\n>\n  Open flyout with iterators\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openFlyoutWithPrimaryAction()\"\n>\n  Open flyout with primary action\n</button>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FlyoutCustomHeadersExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-flyout-custom-headers-example', template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithUrlPermalink()\"\n>\n  Open flyout with a URL permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithRoutePermalink()\"\n>\n  Open flyout with an Angular routing permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithIterators()\"\n>\n  Open flyout with iterators\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithPrimaryAction()\"\n>\n  Open flyout with primary action\n</button>\n" }]
+            args: [{ selector: 'app-flyout-custom-headers-example', template: "<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openFlyoutWithUrlPermalink()\"\n>\n  Open flyout with a URL permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openFlyoutWithRoutePermalink()\"\n>\n  Open flyout with an Angular routing permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openFlyoutWithIterators()\"\n>\n  Open flyout with iterators\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openFlyoutWithPrimaryAction()\"\n>\n  Open flyout with primary action\n</button>\n" }]
         }] });
 
 /**
@@ -6654,7 +6654,7 @@ class FormsFieldGroupBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormsFieldGroupBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FormsFieldGroupBasicExampleComponent, isStandalone: true, selector: "app-forms-field-group-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-field-group\n      headingText=\"Address\"\n      hintText=\"We use this address for your end-of-year statement.\"\n      [headingStyle]=\"4\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n    >\n      <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n        <sky-row>\n          <sky-column [screenXSmall]=\"12\">\n            <sky-input-box labelText=\"Street address\" stacked=\"true\">\n              <input\n                formControlName=\"streetAddress\"\n                spellcheck=\"false\"\n                type=\"text\"\n              />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n        <sky-row>\n          <sky-column [screenSmall]=\"5\">\n            <sky-input-box labelText=\"City\" stacked=\"true\">\n              <input formControlName=\"city\" spellcheck=\"false\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"5\" [screenXSmall]=\"8\">\n            <sky-input-box labelText=\"State\" stacked=\"true\">\n              <select formControlName=\"state\">\n                <option [attr.value]=\"undefined\"></option>\n                @for (state of states; track state) {\n                  <option value=\"state\">\n                    {{ state }}\n                  </option>\n                }\n              </select>\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"2\" [screenXSmall]=\"4\">\n            <sky-input-box labelText=\"Zip code\">\n              <input formControlName=\"zipCode\" maxlength=\"5\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n      </sky-fluid-grid>\n    </sky-field-group>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: SkyFieldGroupModule }, { kind: "component", type: i2$2.λ25, selector: "sky-field-group", inputs: ["headingText", "hintText", "headingHidden", "stacked", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FormsFieldGroupBasicExampleComponent, isStandalone: true, selector: "app-forms-field-group-basic-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-field-group\n      headingText=\"Address\"\n      hintText=\"We use this address for your end-of-year statement.\"\n      [headingStyle]=\"4\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n    >\n      <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n        <sky-row>\n          <sky-column [screenXSmall]=\"12\">\n            <sky-input-box labelText=\"Street address\" stacked=\"true\">\n              <input\n                formControlName=\"streetAddress\"\n                spellcheck=\"false\"\n                type=\"text\"\n              />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n        <sky-row>\n          <sky-column [screenSmall]=\"5\">\n            <sky-input-box labelText=\"City\" stacked=\"true\">\n              <input formControlName=\"city\" spellcheck=\"false\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"5\" [screenXSmall]=\"8\">\n            <sky-input-box labelText=\"State\" stacked=\"true\">\n              <select formControlName=\"state\">\n                <option [attr.value]=\"undefined\"></option>\n                @for (state of states; track state) {\n                  <option value=\"state\">\n                    {{ state }}\n                  </option>\n                }\n              </select>\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"2\" [screenXSmall]=\"4\">\n            <sky-input-box labelText=\"Zip code\">\n              <input formControlName=\"zipCode\" maxlength=\"5\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n      </sky-fluid-grid>\n    </sky-field-group>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: SkyFieldGroupModule }, { kind: "component", type: i2$2.λ25, selector: "sky-field-group", inputs: ["headingText", "hintText", "headingHidden", "stacked", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormsFieldGroupBasicExampleComponent, decorators: [{
             type: Component,
@@ -6664,7 +6664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyFieldGroupModule,
                         SkyFluidGridModule,
                         SkyInputBoxModule,
-                    ], template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-field-group\n      headingText=\"Address\"\n      hintText=\"We use this address for your end-of-year statement.\"\n      [headingStyle]=\"4\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n    >\n      <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n        <sky-row>\n          <sky-column [screenXSmall]=\"12\">\n            <sky-input-box labelText=\"Street address\" stacked=\"true\">\n              <input\n                formControlName=\"streetAddress\"\n                spellcheck=\"false\"\n                type=\"text\"\n              />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n        <sky-row>\n          <sky-column [screenSmall]=\"5\">\n            <sky-input-box labelText=\"City\" stacked=\"true\">\n              <input formControlName=\"city\" spellcheck=\"false\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"5\" [screenXSmall]=\"8\">\n            <sky-input-box labelText=\"State\" stacked=\"true\">\n              <select formControlName=\"state\">\n                <option [attr.value]=\"undefined\"></option>\n                @for (state of states; track state) {\n                  <option value=\"state\">\n                    {{ state }}\n                  </option>\n                }\n              </select>\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"2\" [screenXSmall]=\"4\">\n            <sky-input-box labelText=\"Zip code\">\n              <input formControlName=\"zipCode\" maxlength=\"5\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n      </sky-fluid-grid>\n    </sky-field-group>\n  </form>\n</div>\n" }]
+                    ], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-field-group\n      headingText=\"Address\"\n      hintText=\"We use this address for your end-of-year statement.\"\n      [headingStyle]=\"4\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n    >\n      <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n        <sky-row>\n          <sky-column [screenXSmall]=\"12\">\n            <sky-input-box labelText=\"Street address\" stacked=\"true\">\n              <input\n                formControlName=\"streetAddress\"\n                spellcheck=\"false\"\n                type=\"text\"\n              />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n        <sky-row>\n          <sky-column [screenSmall]=\"5\">\n            <sky-input-box labelText=\"City\" stacked=\"true\">\n              <input formControlName=\"city\" spellcheck=\"false\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"5\" [screenXSmall]=\"8\">\n            <sky-input-box labelText=\"State\" stacked=\"true\">\n              <select formControlName=\"state\">\n                <option [attr.value]=\"undefined\"></option>\n                @for (state of states; track state) {\n                  <option value=\"state\">\n                    {{ state }}\n                  </option>\n                }\n              </select>\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"2\" [screenXSmall]=\"4\">\n            <sky-input-box labelText=\"Zip code\">\n              <input formControlName=\"zipCode\" maxlength=\"5\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n      </sky-fluid-grid>\n    </sky-field-group>\n  </form>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -6735,7 +6735,7 @@ class FormsFieldGroupHelpKeyExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormsFieldGroupHelpKeyExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FormsFieldGroupHelpKeyExampleComponent, isStandalone: true, selector: "app-forms-field-group-help-key-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-field-group\n      headingText=\"Address\"\n      helpKey=\"address-help\"\n      hintText=\"We use this address for your end-of-year statement.\"\n      [headingStyle]=\"4\"\n    >\n      <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n        <sky-row>\n          <sky-column [screenXSmall]=\"12\">\n            <sky-input-box labelText=\"Street address\" stacked=\"true\">\n              <input\n                formControlName=\"streetAddress\"\n                spellcheck=\"false\"\n                type=\"text\"\n              />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n        <sky-row>\n          <sky-column [screenSmall]=\"5\">\n            <sky-input-box labelText=\"City\" stacked=\"true\">\n              <input formControlName=\"city\" spellcheck=\"false\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"5\" [screenXSmall]=\"8\">\n            <sky-input-box labelText=\"State\" stacked=\"true\">\n              <select formControlName=\"state\">\n                <option [attr.value]=\"undefined\"></option>\n                @for (state of states; track state) {\n                  <option value=\"state\">\n                    {{ state }}\n                  </option>\n                }\n              </select>\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"2\" [screenXSmall]=\"4\">\n            <sky-input-box labelText=\"Zip code\">\n              <input formControlName=\"zipCode\" maxlength=\"5\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n      </sky-fluid-grid>\n    </sky-field-group>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: SkyFieldGroupModule }, { kind: "component", type: i2$2.λ25, selector: "sky-field-group", inputs: ["headingText", "hintText", "headingHidden", "stacked", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FormsFieldGroupHelpKeyExampleComponent, isStandalone: true, selector: "app-forms-field-group-help-key-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-field-group\n      headingText=\"Address\"\n      helpKey=\"address-help\"\n      hintText=\"We use this address for your end-of-year statement.\"\n      [headingStyle]=\"4\"\n    >\n      <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n        <sky-row>\n          <sky-column [screenXSmall]=\"12\">\n            <sky-input-box labelText=\"Street address\" stacked=\"true\">\n              <input\n                formControlName=\"streetAddress\"\n                spellcheck=\"false\"\n                type=\"text\"\n              />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n        <sky-row>\n          <sky-column [screenSmall]=\"5\">\n            <sky-input-box labelText=\"City\" stacked=\"true\">\n              <input formControlName=\"city\" spellcheck=\"false\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"5\" [screenXSmall]=\"8\">\n            <sky-input-box labelText=\"State\" stacked=\"true\">\n              <select formControlName=\"state\">\n                <option [attr.value]=\"undefined\"></option>\n                @for (state of states; track state) {\n                  <option value=\"state\">\n                    {{ state }}\n                  </option>\n                }\n              </select>\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"2\" [screenXSmall]=\"4\">\n            <sky-input-box labelText=\"Zip code\">\n              <input formControlName=\"zipCode\" maxlength=\"5\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n      </sky-fluid-grid>\n    </sky-field-group>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: SkyFieldGroupModule }, { kind: "component", type: i2$2.λ25, selector: "sky-field-group", inputs: ["headingText", "hintText", "headingHidden", "stacked", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormsFieldGroupHelpKeyExampleComponent, decorators: [{
             type: Component,
@@ -6745,7 +6745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyFieldGroupModule,
                         SkyFluidGridModule,
                         SkyInputBoxModule,
-                    ], template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-field-group\n      headingText=\"Address\"\n      helpKey=\"address-help\"\n      hintText=\"We use this address for your end-of-year statement.\"\n      [headingStyle]=\"4\"\n    >\n      <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n        <sky-row>\n          <sky-column [screenXSmall]=\"12\">\n            <sky-input-box labelText=\"Street address\" stacked=\"true\">\n              <input\n                formControlName=\"streetAddress\"\n                spellcheck=\"false\"\n                type=\"text\"\n              />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n        <sky-row>\n          <sky-column [screenSmall]=\"5\">\n            <sky-input-box labelText=\"City\" stacked=\"true\">\n              <input formControlName=\"city\" spellcheck=\"false\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"5\" [screenXSmall]=\"8\">\n            <sky-input-box labelText=\"State\" stacked=\"true\">\n              <select formControlName=\"state\">\n                <option [attr.value]=\"undefined\"></option>\n                @for (state of states; track state) {\n                  <option value=\"state\">\n                    {{ state }}\n                  </option>\n                }\n              </select>\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"2\" [screenXSmall]=\"4\">\n            <sky-input-box labelText=\"Zip code\">\n              <input formControlName=\"zipCode\" maxlength=\"5\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n      </sky-fluid-grid>\n    </sky-field-group>\n  </form>\n</div>\n" }]
+                    ], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-field-group\n      headingText=\"Address\"\n      helpKey=\"address-help\"\n      hintText=\"We use this address for your end-of-year statement.\"\n      [headingStyle]=\"4\"\n    >\n      <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n        <sky-row>\n          <sky-column [screenXSmall]=\"12\">\n            <sky-input-box labelText=\"Street address\" stacked=\"true\">\n              <input\n                formControlName=\"streetAddress\"\n                spellcheck=\"false\"\n                type=\"text\"\n              />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n        <sky-row>\n          <sky-column [screenSmall]=\"5\">\n            <sky-input-box labelText=\"City\" stacked=\"true\">\n              <input formControlName=\"city\" spellcheck=\"false\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"5\" [screenXSmall]=\"8\">\n            <sky-input-box labelText=\"State\" stacked=\"true\">\n              <select formControlName=\"state\">\n                <option [attr.value]=\"undefined\"></option>\n                @for (state of states; track state) {\n                  <option value=\"state\">\n                    {{ state }}\n                  </option>\n                }\n              </select>\n            </sky-input-box>\n          </sky-column>\n          <sky-column [screenSmall]=\"2\" [screenXSmall]=\"4\">\n            <sky-input-box labelText=\"Zip code\">\n              <input formControlName=\"zipCode\" maxlength=\"5\" type=\"text\" />\n            </sky-input-box>\n          </sky-column>\n        </sky-row>\n      </sky-fluid-grid>\n    </sky-field-group>\n  </form>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -6963,7 +6963,7 @@ class FormsInputBoxBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormsInputBoxBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FormsInputBoxBasicExampleComponent, isStandalone: true, selector: "app-forms-input-box-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"false\">\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <h2>New member form</h2>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-first-name\"\n            helpKey=\"first-name-help\"\n            labelText=\"First name\"\n            stacked=\"true\"\n          >\n            <input formControlName=\"firstName\" spellcheck=\"false\" type=\"text\" />\n          </sky-input-box>\n        </sky-column>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-last-name\"\n            labelText=\"Last name\"\n            stacked=\"true\"\n          >\n            <input\n              class=\"last-name-input-box\"\n              formControlName=\"lastName\"\n              spellcheck=\"false\"\n              type=\"text\"\n            />\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <sky-input-box\n            characterLimit=\"250\"\n            data-sky-id=\"input-box-bio\"\n            hintText=\"A brief description of the member's background, such as hometown, school, hobbies, etc.\"\n            labelText=\"Bio\"\n            stacked=\"true\"\n          >\n            <textarea formControlName=\"bio\"></textarea>\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-email\"\n            labelText=\"Email address\"\n            stacked=\"true\"\n            helpPopoverContent=\"We do not share this information with any third parties.\"\n            helpPopoverTitle=\"Privacy notice\"\n          >\n            <input formControlName=\"email\" type=\"text\" />\n          </sky-input-box>\n        </sky-column>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box labelText=\"Date of birth\" stacked=\"true\">\n            <sky-datepicker>\n              <input formControlName=\"dob\" skyDatepickerInput />\n            </sky-datepicker>\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <sky-input-box\n            data-sky-id=\"input-box-favorite-color\"\n            labelText=\"Favorite color\"\n          >\n            <select\n              class=\"input-box-favorite-color-select\"\n              formControlName=\"favoriteColor\"\n            >\n              <option value=\"none\">None</option>\n              <option value=\"red\">Red</option>\n              <option value=\"orange\">Orange</option>\n              <option value=\"yellow\">Yellow</option>\n              <option value=\"green\">Green</option>\n              <option value=\"blue\">Blue</option>\n              <option value=\"purple\">Purple</option>\n              <option value=\"invalid\">Invalid Color</option>\n            </select>\n            <!-- Custom form error not handled by input box. -->\n            @if (favoriteColor.errors?.['invalid']) {\n              <sky-form-error\n                errorName=\"invalid\"\n                errorText=\"Invalid Color is not a color\"\n              />\n            }\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n    </sky-fluid-grid>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: SkyDatepickerModule }, { kind: "component", type: i2$8.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$8.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { 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: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyStatusIndicatorModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FormsInputBoxBasicExampleComponent, isStandalone: true, selector: "app-forms-input-box-basic-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"false\">\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <h2>New member form</h2>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-first-name\"\n            helpKey=\"first-name-help\"\n            labelText=\"First name\"\n            stacked=\"true\"\n          >\n            <input formControlName=\"firstName\" spellcheck=\"false\" type=\"text\" />\n          </sky-input-box>\n        </sky-column>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-last-name\"\n            labelText=\"Last name\"\n            stacked=\"true\"\n          >\n            <input\n              class=\"last-name-input-box\"\n              formControlName=\"lastName\"\n              spellcheck=\"false\"\n              type=\"text\"\n            />\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <sky-input-box\n            characterLimit=\"250\"\n            data-sky-id=\"input-box-bio\"\n            hintText=\"A brief description of the member's background, such as hometown, school, hobbies, etc.\"\n            labelText=\"Bio\"\n            stacked=\"true\"\n          >\n            <textarea formControlName=\"bio\"></textarea>\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-email\"\n            labelText=\"Email address\"\n            stacked=\"true\"\n            helpPopoverContent=\"We do not share this information with any third parties.\"\n            helpPopoverTitle=\"Privacy notice\"\n          >\n            <input formControlName=\"email\" type=\"text\" />\n          </sky-input-box>\n        </sky-column>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box labelText=\"Date of birth\" stacked=\"true\">\n            <sky-datepicker>\n              <input formControlName=\"dob\" skyDatepickerInput />\n            </sky-datepicker>\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <sky-input-box\n            data-sky-id=\"input-box-favorite-color\"\n            labelText=\"Favorite color\"\n          >\n            <select\n              class=\"input-box-favorite-color-select\"\n              formControlName=\"favoriteColor\"\n            >\n              <option value=\"none\">None</option>\n              <option value=\"red\">Red</option>\n              <option value=\"orange\">Orange</option>\n              <option value=\"yellow\">Yellow</option>\n              <option value=\"green\">Green</option>\n              <option value=\"blue\">Blue</option>\n              <option value=\"purple\">Purple</option>\n              <option value=\"invalid\">Invalid Color</option>\n            </select>\n            <!-- Custom form error not handled by input box. -->\n            @if (favoriteColor.errors?.['invalid']) {\n              <sky-form-error\n                errorName=\"invalid\"\n                errorText=\"Invalid Color is not a color\"\n              />\n            }\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n    </sky-fluid-grid>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: SkyDatepickerModule }, { kind: "component", type: i2$8.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$8.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { 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: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyStatusIndicatorModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormsInputBoxBasicExampleComponent, decorators: [{
             type: Component,
@@ -6974,7 +6974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyFluidGridModule,
                         SkyInputBoxModule,
                         SkyStatusIndicatorModule,
-                    ], template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"false\">\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <h2>New member form</h2>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-first-name\"\n            helpKey=\"first-name-help\"\n            labelText=\"First name\"\n            stacked=\"true\"\n          >\n            <input formControlName=\"firstName\" spellcheck=\"false\" type=\"text\" />\n          </sky-input-box>\n        </sky-column>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-last-name\"\n            labelText=\"Last name\"\n            stacked=\"true\"\n          >\n            <input\n              class=\"last-name-input-box\"\n              formControlName=\"lastName\"\n              spellcheck=\"false\"\n              type=\"text\"\n            />\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <sky-input-box\n            characterLimit=\"250\"\n            data-sky-id=\"input-box-bio\"\n            hintText=\"A brief description of the member's background, such as hometown, school, hobbies, etc.\"\n            labelText=\"Bio\"\n            stacked=\"true\"\n          >\n            <textarea formControlName=\"bio\"></textarea>\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-email\"\n            labelText=\"Email address\"\n            stacked=\"true\"\n            helpPopoverContent=\"We do not share this information with any third parties.\"\n            helpPopoverTitle=\"Privacy notice\"\n          >\n            <input formControlName=\"email\" type=\"text\" />\n          </sky-input-box>\n        </sky-column>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box labelText=\"Date of birth\" stacked=\"true\">\n            <sky-datepicker>\n              <input formControlName=\"dob\" skyDatepickerInput />\n            </sky-datepicker>\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <sky-input-box\n            data-sky-id=\"input-box-favorite-color\"\n            labelText=\"Favorite color\"\n          >\n            <select\n              class=\"input-box-favorite-color-select\"\n              formControlName=\"favoriteColor\"\n            >\n              <option value=\"none\">None</option>\n              <option value=\"red\">Red</option>\n              <option value=\"orange\">Orange</option>\n              <option value=\"yellow\">Yellow</option>\n              <option value=\"green\">Green</option>\n              <option value=\"blue\">Blue</option>\n              <option value=\"purple\">Purple</option>\n              <option value=\"invalid\">Invalid Color</option>\n            </select>\n            <!-- Custom form error not handled by input box. -->\n            @if (favoriteColor.errors?.['invalid']) {\n              <sky-form-error\n                errorName=\"invalid\"\n                errorText=\"Invalid Color is not a color\"\n              />\n            }\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n    </sky-fluid-grid>\n  </form>\n</div>\n" }]
+                    ], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n  <form [formGroup]=\"formGroup\">\n    <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"false\">\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <h2>New member form</h2>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-first-name\"\n            helpKey=\"first-name-help\"\n            labelText=\"First name\"\n            stacked=\"true\"\n          >\n            <input formControlName=\"firstName\" spellcheck=\"false\" type=\"text\" />\n          </sky-input-box>\n        </sky-column>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-last-name\"\n            labelText=\"Last name\"\n            stacked=\"true\"\n          >\n            <input\n              class=\"last-name-input-box\"\n              formControlName=\"lastName\"\n              spellcheck=\"false\"\n              type=\"text\"\n            />\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <sky-input-box\n            characterLimit=\"250\"\n            data-sky-id=\"input-box-bio\"\n            hintText=\"A brief description of the member's background, such as hometown, school, hobbies, etc.\"\n            labelText=\"Bio\"\n            stacked=\"true\"\n          >\n            <textarea formControlName=\"bio\"></textarea>\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-email\"\n            labelText=\"Email address\"\n            stacked=\"true\"\n            helpPopoverContent=\"We do not share this information with any third parties.\"\n            helpPopoverTitle=\"Privacy notice\"\n          >\n            <input formControlName=\"email\" type=\"text\" />\n          </sky-input-box>\n        </sky-column>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box labelText=\"Date of birth\" stacked=\"true\">\n            <sky-datepicker>\n              <input formControlName=\"dob\" skyDatepickerInput />\n            </sky-datepicker>\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <sky-input-box\n            data-sky-id=\"input-box-favorite-color\"\n            labelText=\"Favorite color\"\n          >\n            <select\n              class=\"input-box-favorite-color-select\"\n              formControlName=\"favoriteColor\"\n            >\n              <option value=\"none\">None</option>\n              <option value=\"red\">Red</option>\n              <option value=\"orange\">Orange</option>\n              <option value=\"yellow\">Yellow</option>\n              <option value=\"green\">Green</option>\n              <option value=\"blue\">Blue</option>\n              <option value=\"purple\">Purple</option>\n              <option value=\"invalid\">Invalid Color</option>\n            </select>\n            <!-- Custom form error not handled by input box. -->\n            @if (favoriteColor.errors?.['invalid']) {\n              <sky-form-error\n                errorName=\"invalid\"\n                errorText=\"Invalid Color is not a color\"\n              />\n            }\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n    </sky-fluid-grid>\n  </form>\n</div>\n" }]
         }] });
 
 function validateColor(control) {
@@ -7383,11 +7383,11 @@ class IndicatorsKeyInfoBasicExampleComponent {
     }
     #_value;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IndicatorsKeyInfoBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: IndicatorsKeyInfoBasicExampleComponent, isStandalone: true, selector: "app-indicators-key-info-basic-example", inputs: { value: "value" }, ngImport: i0, template: "<sky-key-info\n  data-sky-id=\"key-info-example\"\n  helpPopoverTitle=\"Help\"\n  [layout]=\"layout\"\n  [helpPopoverContent]=\"helpContent\"\n>\n  <sky-key-info-value class=\"sky-font-display-3\">\n    {{ value }}\n  </sky-key-info-value>\n  <sky-key-info-label> New members </sky-key-info-label>\n</sky-key-info>\n<ng-template #helpContent>\n  This help content can add clarity and provide next steps.\n</ng-template>\n", dependencies: [{ 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: IndicatorsKeyInfoBasicExampleComponent, isStandalone: true, selector: "app-indicators-key-info-basic-example", inputs: { value: "value" }, ngImport: i0, template: "<sky-key-info\n  data-sky-id=\"key-info-example\"\n  helpPopoverTitle=\"Help\"\n  [layout]=\"layout\"\n  [helpPopoverContent]=\"helpContent\"\n>\n  <sky-key-info-value class=\"sky-theme-font-display-3\">\n    {{ value }}\n  </sky-key-info-value>\n  <sky-key-info-label> New members </sky-key-info-label>\n</sky-key-info>\n<ng-template #helpContent>\n  This help content can add clarity and provide next steps.\n</ng-template>\n", dependencies: [{ 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IndicatorsKeyInfoBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-indicators-key-info-basic-example', imports: [SkyKeyInfoModule], template: "<sky-key-info\n  data-sky-id=\"key-info-example\"\n  helpPopoverTitle=\"Help\"\n  [layout]=\"layout\"\n  [helpPopoverContent]=\"helpContent\"\n>\n  <sky-key-info-value class=\"sky-font-display-3\">\n    {{ value }}\n  </sky-key-info-value>\n  <sky-key-info-label> New members </sky-key-info-label>\n</sky-key-info>\n<ng-template #helpContent>\n  This help content can add clarity and provide next steps.\n</ng-template>\n" }]
+            args: [{ selector: 'app-indicators-key-info-basic-example', imports: [SkyKeyInfoModule], template: "<sky-key-info\n  data-sky-id=\"key-info-example\"\n  helpPopoverTitle=\"Help\"\n  [layout]=\"layout\"\n  [helpPopoverContent]=\"helpContent\"\n>\n  <sky-key-info-value class=\"sky-theme-font-display-3\">\n    {{ value }}\n  </sky-key-info-value>\n  <sky-key-info-label> New members </sky-key-info-label>\n</sky-key-info>\n<ng-template #helpContent>\n  This help content can add clarity and provide next steps.\n</ng-template>\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }] } });
@@ -7410,11 +7410,11 @@ class IndicatorsKeyInfoHelpKeyExampleComponent {
     }
     #_value;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IndicatorsKeyInfoHelpKeyExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: IndicatorsKeyInfoHelpKeyExampleComponent, isStandalone: true, selector: "app-indicators-key-info-help-key-example", inputs: { value: "value" }, ngImport: i0, template: "<sky-key-info\n  data-sky-id=\"key-info-example\"\n  helpKey=\"new-member-help\"\n  [layout]=\"layout\"\n>\n  <sky-key-info-value class=\"sky-font-display-3\">\n    {{ value }}\n  </sky-key-info-value>\n  <sky-key-info-label> New members </sky-key-info-label>\n</sky-key-info>\n", dependencies: [{ 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: IndicatorsKeyInfoHelpKeyExampleComponent, isStandalone: true, selector: "app-indicators-key-info-help-key-example", inputs: { value: "value" }, ngImport: i0, template: "<sky-key-info\n  data-sky-id=\"key-info-example\"\n  helpKey=\"new-member-help\"\n  [layout]=\"layout\"\n>\n  <sky-key-info-value class=\"sky-theme-font-display-3\">\n    {{ value }}\n  </sky-key-info-value>\n  <sky-key-info-label> New members </sky-key-info-label>\n</sky-key-info>\n", dependencies: [{ 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IndicatorsKeyInfoHelpKeyExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-indicators-key-info-help-key-example', imports: [SkyKeyInfoModule], template: "<sky-key-info\n  data-sky-id=\"key-info-example\"\n  helpKey=\"new-member-help\"\n  [layout]=\"layout\"\n>\n  <sky-key-info-value class=\"sky-font-display-3\">\n    {{ value }}\n  </sky-key-info-value>\n  <sky-key-info-label> New members </sky-key-info-label>\n</sky-key-info>\n" }]
+            args: [{ selector: 'app-indicators-key-info-help-key-example', imports: [SkyKeyInfoModule], template: "<sky-key-info\n  data-sky-id=\"key-info-example\"\n  helpKey=\"new-member-help\"\n  [layout]=\"layout\"\n>\n  <sky-key-info-value class=\"sky-theme-font-display-3\">\n    {{ value }}\n  </sky-key-info-value>\n  <sky-key-info-label> New members </sky-key-info-label>\n</sky-key-info>\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }] } });
@@ -7513,7 +7513,7 @@ class IndicatorsTextHighlightBasicExampleComponent {
         this.showAdditionalContent = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IndicatorsTextHighlightBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: IndicatorsTextHighlightBasicExampleComponent, isStandalone: true, selector: "app-indicators-text-highlight-basic-example", ngImport: i0, template: "<div class=\"sky-margin-stacked-lg\">\n  <sky-input-box labelText=\"Text to highlight\" [stacked]=\"true\">\n    <input type=\"text\" [(ngModel)]=\"searchTerm\" />\n  </sky-input-box>\n</div>\n\n<div class=\"sky-margin-stacked-lg\">\n  <sky-checkbox\n    labelText=\"Display additional content\"\n    [(ngModel)]=\"showAdditionalContent\"\n  />\n</div>\n\n<div [skyHighlight]=\"searchTerm\">\n  The text that you enter is highlighted here.\n  @if (showAdditionalContent) {\n    <div>This additional content is highlighted too!</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: 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: SkyTextHighlightModule }, { kind: "directive", type: i1.SkyTextHighlightDirective, selector: "[skyHighlight]", inputs: ["skyHighlight"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: IndicatorsTextHighlightBasicExampleComponent, isStandalone: true, selector: "app-indicators-text-highlight-basic-example", ngImport: i0, template: "<div class=\"sky-theme-margin-bottom-l\">\n  <sky-input-box labelText=\"Text to highlight\" [stacked]=\"true\">\n    <input type=\"text\" [(ngModel)]=\"searchTerm\" />\n  </sky-input-box>\n</div>\n\n<div class=\"sky-theme-margin-bottom-l\">\n  <sky-checkbox\n    labelText=\"Display additional content\"\n    [(ngModel)]=\"showAdditionalContent\"\n  />\n</div>\n\n<div [skyHighlight]=\"searchTerm\">\n  The text that you enter is highlighted here.\n  @if (showAdditionalContent) {\n    <div>This additional content is highlighted too!</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: 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: SkyTextHighlightModule }, { kind: "directive", type: i1.SkyTextHighlightDirective, selector: "[skyHighlight]", inputs: ["skyHighlight"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IndicatorsTextHighlightBasicExampleComponent, decorators: [{
             type: Component,
@@ -7522,7 +7522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyCheckboxModule,
                         SkyInputBoxModule,
                         SkyTextHighlightModule,
-                    ], template: "<div class=\"sky-margin-stacked-lg\">\n  <sky-input-box labelText=\"Text to highlight\" [stacked]=\"true\">\n    <input type=\"text\" [(ngModel)]=\"searchTerm\" />\n  </sky-input-box>\n</div>\n\n<div class=\"sky-margin-stacked-lg\">\n  <sky-checkbox\n    labelText=\"Display additional content\"\n    [(ngModel)]=\"showAdditionalContent\"\n  />\n</div>\n\n<div [skyHighlight]=\"searchTerm\">\n  The text that you enter is highlighted here.\n  @if (showAdditionalContent) {\n    <div>This additional content is highlighted too!</div>\n  }\n</div>\n" }]
+                    ], template: "<div class=\"sky-theme-margin-bottom-l\">\n  <sky-input-box labelText=\"Text to highlight\" [stacked]=\"true\">\n    <input type=\"text\" [(ngModel)]=\"searchTerm\" />\n  </sky-input-box>\n</div>\n\n<div class=\"sky-theme-margin-bottom-l\">\n  <sky-checkbox\n    labelText=\"Display additional content\"\n    [(ngModel)]=\"showAdditionalContent\"\n  />\n</div>\n\n<div [skyHighlight]=\"searchTerm\">\n  The text that you enter is highlighted here.\n  @if (showAdditionalContent) {\n    <div>This additional content is highlighted too!</div>\n  }\n</div>\n" }]
         }] });
 
 /**
@@ -7609,11 +7609,11 @@ class IndicatorsTokensCustomExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IndicatorsTokensCustomExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: IndicatorsTokensCustomExampleComponent, isStandalone: true, selector: "app-indicators-tokens-custom-example", ngImport: i0, template: "<p>\n  These tokens define a custom property to display their values. When users\n  select a token, it emits an event.\n</p>\n\n<div class=\"sky-margin-stacked-xl\">\n  <sky-tokens\n    data-sky-id=\"example-tokens\"\n    displayWith=\"label\"\n    [messageStream]=\"tokensController\"\n    [(tokens)]=\"myTokens\"\n    (focusIndexOverRange)=\"onFocusIndexOverRange()\"\n    (focusIndexUnderRange)=\"onFocusIndexUnderRange()\"\n    (tokenSelected)=\"onTokenSelected($event)\"\n  >\n    (You may also include content inside the tokens component.)\n  </sky-tokens>\n</div>\n\n<div class=\"sky-margin-stacked-xl\">\n  <button\n    class=\"sky-btn sky-btn-default sky-margin-inline-sm tokens-example-change-btn\"\n    type=\"button\"\n    (click)=\"changeTokens()\"\n  >\n    Change tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default sky-margin-inline-sm tokens-example-reset-btn\"\n    type=\"button\"\n    (click)=\"resetTokens()\"\n  >\n    Reset tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default sky-margin-inline-sm tokens-example-destroy-btn\"\n    type=\"button\"\n    (click)=\"destroyTokens()\"\n  >\n    Destroy tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default sky-margin-inline-sm tokens-example-focus-last-btn\"\n    type=\"button\"\n    (click)=\"focusLastToken()\"\n  >\n    Focus last token\n  </button>\n</div>\n\n<div>\n  Selected token:\n  <span class=\"tokens-example-selected\">{{ selectedToken }}</span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: SkyTokensModule }, { kind: "component", type: i1.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange", "tokensRendered"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: IndicatorsTokensCustomExampleComponent, isStandalone: true, selector: "app-indicators-tokens-custom-example", ngImport: i0, template: "<p>\n  These tokens define a custom property to display their values. When users\n  select a token, it emits an event.\n</p>\n\n<div class=\"sky-theme-margin-bottom-xl\">\n  <sky-tokens\n    data-sky-id=\"example-tokens\"\n    displayWith=\"label\"\n    [messageStream]=\"tokensController\"\n    [(tokens)]=\"myTokens\"\n    (focusIndexOverRange)=\"onFocusIndexOverRange()\"\n    (focusIndexUnderRange)=\"onFocusIndexUnderRange()\"\n    (tokenSelected)=\"onTokenSelected($event)\"\n  >\n    (You may also include content inside the tokens component.)\n  </sky-tokens>\n</div>\n\n<div class=\"sky-theme-margin-bottom-xl\">\n  <button\n    class=\"sky-btn sky-btn-default sky-theme-margin-right-s tokens-example-change-btn\"\n    type=\"button\"\n    (click)=\"changeTokens()\"\n  >\n    Change tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default sky-theme-margin-right-s tokens-example-reset-btn\"\n    type=\"button\"\n    (click)=\"resetTokens()\"\n  >\n    Reset tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default sky-theme-margin-right-s tokens-example-destroy-btn\"\n    type=\"button\"\n    (click)=\"destroyTokens()\"\n  >\n    Destroy tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default sky-theme-margin-right-s tokens-example-focus-last-btn\"\n    type=\"button\"\n    (click)=\"focusLastToken()\"\n  >\n    Focus last token\n  </button>\n</div>\n\n<div>\n  Selected token:\n  <span class=\"tokens-example-selected\">{{ selectedToken }}</span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: SkyTokensModule }, { kind: "component", type: i1.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange", "tokensRendered"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IndicatorsTokensCustomExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-indicators-tokens-custom-example', imports: [SkyTokensModule], template: "<p>\n  These tokens define a custom property to display their values. When users\n  select a token, it emits an event.\n</p>\n\n<div class=\"sky-margin-stacked-xl\">\n  <sky-tokens\n    data-sky-id=\"example-tokens\"\n    displayWith=\"label\"\n    [messageStream]=\"tokensController\"\n    [(tokens)]=\"myTokens\"\n    (focusIndexOverRange)=\"onFocusIndexOverRange()\"\n    (focusIndexUnderRange)=\"onFocusIndexUnderRange()\"\n    (tokenSelected)=\"onTokenSelected($event)\"\n  >\n    (You may also include content inside the tokens component.)\n  </sky-tokens>\n</div>\n\n<div class=\"sky-margin-stacked-xl\">\n  <button\n    class=\"sky-btn sky-btn-default sky-margin-inline-sm tokens-example-change-btn\"\n    type=\"button\"\n    (click)=\"changeTokens()\"\n  >\n    Change tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default sky-margin-inline-sm tokens-example-reset-btn\"\n    type=\"button\"\n    (click)=\"resetTokens()\"\n  >\n    Reset tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default sky-margin-inline-sm tokens-example-destroy-btn\"\n    type=\"button\"\n    (click)=\"destroyTokens()\"\n  >\n    Destroy tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default sky-margin-inline-sm tokens-example-focus-last-btn\"\n    type=\"button\"\n    (click)=\"focusLastToken()\"\n  >\n    Focus last token\n  </button>\n</div>\n\n<div>\n  Selected token:\n  <span class=\"tokens-example-selected\">{{ selectedToken }}</span>\n</div>\n" }]
+            args: [{ selector: 'app-indicators-tokens-custom-example', imports: [SkyTokensModule], template: "<p>\n  These tokens define a custom property to display their values. When users\n  select a token, it emits an event.\n</p>\n\n<div class=\"sky-theme-margin-bottom-xl\">\n  <sky-tokens\n    data-sky-id=\"example-tokens\"\n    displayWith=\"label\"\n    [messageStream]=\"tokensController\"\n    [(tokens)]=\"myTokens\"\n    (focusIndexOverRange)=\"onFocusIndexOverRange()\"\n    (focusIndexUnderRange)=\"onFocusIndexUnderRange()\"\n    (tokenSelected)=\"onTokenSelected($event)\"\n  >\n    (You may also include content inside the tokens component.)\n  </sky-tokens>\n</div>\n\n<div class=\"sky-theme-margin-bottom-xl\">\n  <button\n    class=\"sky-btn sky-btn-default sky-theme-margin-right-s tokens-example-change-btn\"\n    type=\"button\"\n    (click)=\"changeTokens()\"\n  >\n    Change tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default sky-theme-margin-right-s tokens-example-reset-btn\"\n    type=\"button\"\n    (click)=\"resetTokens()\"\n  >\n    Reset tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default sky-theme-margin-right-s tokens-example-destroy-btn\"\n    type=\"button\"\n    (click)=\"destroyTokens()\"\n  >\n    Destroy tokens\n  </button>\n\n  <button\n    class=\"sky-btn sky-btn-default sky-theme-margin-right-s tokens-example-focus-last-btn\"\n    type=\"button\"\n    (click)=\"focusLastToken()\"\n  >\n    Focus last token\n  </button>\n</div>\n\n<div>\n  Selected token:\n  <span class=\"tokens-example-selected\">{{ selectedToken }}</span>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -7661,11 +7661,11 @@ class IndicatorsWaitPageExampleComponent {
         this.isWaiting = !this.isWaiting;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IndicatorsWaitPageExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: IndicatorsWaitPageExampleComponent, isStandalone: true, selector: "app-indicators-wait-page-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"togglePageWait(true)\"\n>\n  Show page wait\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"togglePageWait(false)\"\n>\n  Show non-blocking page wait\n</button>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: IndicatorsWaitPageExampleComponent, isStandalone: true, selector: "app-indicators-wait-page-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"togglePageWait(true)\"\n>\n  Show page wait\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"togglePageWait(false)\"\n>\n  Show non-blocking page wait\n</button>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IndicatorsWaitPageExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-indicators-wait-page-example', template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"togglePageWait(true)\"\n>\n  Show page wait\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"togglePageWait(false)\"\n>\n  Show non-blocking page wait\n</button>\n" }]
+            args: [{ selector: 'app-indicators-wait-page-example', template: "<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"togglePageWait(true)\"\n>\n  Show page wait\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"togglePageWait(false)\"\n>\n  Show non-blocking page wait\n</button>\n" }]
         }] });
 
 /**
@@ -7852,7 +7852,7 @@ class InlineFormRepeatersExampleComponent {
         this.activeInlineFormId = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InlineFormRepeatersExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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-font-emphasized\">\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 labelTex=\"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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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"], 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 labelTex=\"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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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"], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InlineFormRepeatersExampleComponent, decorators: [{
             type: Component,
@@ -7862,7 +7862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyIconModule,
                         SkyInputBoxModule,
                         SkyRepeaterModule,
-                    ], 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-font-emphasized\">\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 labelTex=\"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" }]
+                    ], 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 labelTex=\"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" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -8525,11 +8525,11 @@ class LayoutInlineDeleteRepeaterExampleComponent {
         this.repeaterDemoShownInlineDeletes = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LayoutInlineDeleteRepeaterExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LayoutInlineDeleteRepeaterExampleComponent, isStandalone: true, selector: "app-layout-inline-delete-repeater-example", ngImport: i0, template: "<sky-repeater>\n  @for (item of repeaterDemoItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-context-menu>\n        <sky-dropdown buttonType=\"context-menu\">\n          <sky-dropdown-menu>\n            <sky-dropdown-item>\n              <button type=\"button\" (click)=\"showInlineDelete(item.title)\">\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-title class=\"sky-example-inline-delete-flex\">\n        <div>\n          {{ item.title }}\n        </div>\n        <div>\n          {{ item.cost }}\n        </div>\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        {{ item.description }}\n      </sky-repeater-item-content>\n      @if (repeaterDemoShownInlineDeletes.indexOf(item.title) >= 0) {\n        <sky-inline-delete\n          (cancelTriggered)=\"cancelDeletion(item.title)\"\n          (deleteTriggered)=\"deleteItem(item.title)\"\n        />\n      }\n    </sky-repeater-item>\n  }\n</sky-repeater>\n\n<button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"onResetClick()\">\n  Reset Repeater\n</button>\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: SkyInlineDeleteModule }, { kind: "component", type: i1$5.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LayoutInlineDeleteRepeaterExampleComponent, isStandalone: true, selector: "app-layout-inline-delete-repeater-example", ngImport: i0, template: "<sky-repeater>\n  @for (item of repeaterDemoItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-context-menu>\n        <sky-dropdown buttonType=\"context-menu\">\n          <sky-dropdown-menu>\n            <sky-dropdown-item>\n              <button type=\"button\" (click)=\"showInlineDelete(item.title)\">\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-title>\n        <div>\n          {{ item.title }}\n        </div>\n        <div>\n          {{ item.cost }}\n        </div>\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        {{ item.description }}\n      </sky-repeater-item-content>\n      @if (repeaterDemoShownInlineDeletes.indexOf(item.title) >= 0) {\n        <sky-inline-delete\n          (cancelTriggered)=\"cancelDeletion(item.title)\"\n          (deleteTriggered)=\"deleteItem(item.title)\"\n        />\n      }\n    </sky-repeater-item>\n  }\n</sky-repeater>\n\n<button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"onResetClick()\">\n  Reset Repeater\n</button>\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: SkyInlineDeleteModule }, { kind: "component", type: i1$5.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LayoutInlineDeleteRepeaterExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-layout-inline-delete-repeater-example', imports: [SkyDropdownModule, SkyInlineDeleteModule, SkyRepeaterModule], template: "<sky-repeater>\n  @for (item of repeaterDemoItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-context-menu>\n        <sky-dropdown buttonType=\"context-menu\">\n          <sky-dropdown-menu>\n            <sky-dropdown-item>\n              <button type=\"button\" (click)=\"showInlineDelete(item.title)\">\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-title class=\"sky-example-inline-delete-flex\">\n        <div>\n          {{ item.title }}\n        </div>\n        <div>\n          {{ item.cost }}\n        </div>\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        {{ item.description }}\n      </sky-repeater-item-content>\n      @if (repeaterDemoShownInlineDeletes.indexOf(item.title) >= 0) {\n        <sky-inline-delete\n          (cancelTriggered)=\"cancelDeletion(item.title)\"\n          (deleteTriggered)=\"deleteItem(item.title)\"\n        />\n      }\n    </sky-repeater-item>\n  }\n</sky-repeater>\n\n<button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"onResetClick()\">\n  Reset Repeater\n</button>\n" }]
+            args: [{ selector: 'app-layout-inline-delete-repeater-example', imports: [SkyDropdownModule, SkyInlineDeleteModule, SkyRepeaterModule], template: "<sky-repeater>\n  @for (item of repeaterDemoItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-context-menu>\n        <sky-dropdown buttonType=\"context-menu\">\n          <sky-dropdown-menu>\n            <sky-dropdown-item>\n              <button type=\"button\" (click)=\"showInlineDelete(item.title)\">\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-title>\n        <div>\n          {{ item.title }}\n        </div>\n        <div>\n          {{ item.cost }}\n        </div>\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        {{ item.description }}\n      </sky-repeater-item-content>\n      @if (repeaterDemoShownInlineDeletes.indexOf(item.title) >= 0) {\n        <sky-inline-delete\n          (cancelTriggered)=\"cancelDeletion(item.title)\"\n          (deleteTriggered)=\"deleteItem(item.title)\"\n        />\n      }\n    </sky-repeater-item>\n  }\n</sky-repeater>\n\n<button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"onResetClick()\">\n  Reset Repeater\n</button>\n" }]
         }] });
 
 /**
@@ -9053,11 +9053,11 @@ class ListsRepeaterAddRemoveExampleComponent {
         this.items = this.items.filter((item) => !item.isSelected);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListsRepeaterAddRemoveExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ListsRepeaterAddRemoveExampleComponent, isStandalone: true, selector: "app-lists-repeater-add-remove-example", ngImport: i0, template: "<div class=\"sky-margin-stacked-lg\">\n  <sky-repeater\n    data-sky-id=\"repeater-example\"\n    [expandMode]=\"'single'\"\n    [reorderable]=\"true\"\n    (orderChange)=\"changeItems($event)\"\n  >\n    @for (item of items; track item) {\n      <sky-repeater-item\n        [selectable]=\"true\"\n        [tag]=\"item.note\"\n        [disabled]=\"item.isDisabled\"\n        [(isSelected)]=\"item.isSelected\"\n      >\n        <sky-repeater-item-title class=\"example-repeater-flex\">\n          <div class=\"example-repeater-item-title\">\n            {{ item.title }}\n          </div>\n          <div>\n            {{ item.status }}\n          </div>\n        </sky-repeater-item-title>\n        <sky-repeater-item-context-menu>\n          <sky-dropdown buttonType=\"context-menu\">\n            <sky-dropdown-menu>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 1')\">\n                  Action 1\n                </button>\n              </sky-dropdown-item>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 2')\">\n                  Action 2\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          {{ item.note }}\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    }\n  </sky-repeater>\n</div>\n\n<button\n  data-sky-id=\"add-button\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"addItem()\"\n>\n  Add item\n</button>\n\n<button\n  data-sky-id=\"remove-button\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"removeItems()\"\n>\n  Remove selected items\n</button>\n", styles: [".example-repeater-flex{display:flex;flex-wrap:wrap}.example-repeater-flex .example-repeater-item-title{flex-grow:1}\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: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ListsRepeaterAddRemoveExampleComponent, isStandalone: true, selector: "app-lists-repeater-add-remove-example", ngImport: i0, template: "<div class=\"sky-theme-margin-bottom-l\">\n  <sky-repeater\n    data-sky-id=\"repeater-example\"\n    [expandMode]=\"'single'\"\n    [reorderable]=\"true\"\n    (orderChange)=\"changeItems($event)\"\n  >\n    @for (item of items; track item) {\n      <sky-repeater-item\n        [selectable]=\"true\"\n        [tag]=\"item.note\"\n        [disabled]=\"item.isDisabled\"\n        [(isSelected)]=\"item.isSelected\"\n      >\n        <sky-repeater-item-title class=\"example-repeater-flex\">\n          <div class=\"example-repeater-item-title\">\n            {{ item.title }}\n          </div>\n          <div>\n            {{ item.status }}\n          </div>\n        </sky-repeater-item-title>\n        <sky-repeater-item-context-menu>\n          <sky-dropdown buttonType=\"context-menu\">\n            <sky-dropdown-menu>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 1')\">\n                  Action 1\n                </button>\n              </sky-dropdown-item>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 2')\">\n                  Action 2\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          {{ item.note }}\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    }\n  </sky-repeater>\n</div>\n\n<button\n  data-sky-id=\"add-button\"\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"addItem()\"\n>\n  Add item\n</button>\n\n<button\n  data-sky-id=\"remove-button\"\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"removeItems()\"\n>\n  Remove selected items\n</button>\n", styles: [".example-repeater-flex{display:flex;flex-wrap:wrap}.example-repeater-flex .example-repeater-item-title{flex-grow:1}\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: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListsRepeaterAddRemoveExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-lists-repeater-add-remove-example', imports: [SkyDropdownModule, SkyRepeaterModule], template: "<div class=\"sky-margin-stacked-lg\">\n  <sky-repeater\n    data-sky-id=\"repeater-example\"\n    [expandMode]=\"'single'\"\n    [reorderable]=\"true\"\n    (orderChange)=\"changeItems($event)\"\n  >\n    @for (item of items; track item) {\n      <sky-repeater-item\n        [selectable]=\"true\"\n        [tag]=\"item.note\"\n        [disabled]=\"item.isDisabled\"\n        [(isSelected)]=\"item.isSelected\"\n      >\n        <sky-repeater-item-title class=\"example-repeater-flex\">\n          <div class=\"example-repeater-item-title\">\n            {{ item.title }}\n          </div>\n          <div>\n            {{ item.status }}\n          </div>\n        </sky-repeater-item-title>\n        <sky-repeater-item-context-menu>\n          <sky-dropdown buttonType=\"context-menu\">\n            <sky-dropdown-menu>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 1')\">\n                  Action 1\n                </button>\n              </sky-dropdown-item>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 2')\">\n                  Action 2\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          {{ item.note }}\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    }\n  </sky-repeater>\n</div>\n\n<button\n  data-sky-id=\"add-button\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"addItem()\"\n>\n  Add item\n</button>\n\n<button\n  data-sky-id=\"remove-button\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"removeItems()\"\n>\n  Remove selected items\n</button>\n", styles: [".example-repeater-flex{display:flex;flex-wrap:wrap}.example-repeater-flex .example-repeater-item-title{flex-grow:1}\n"] }]
+            args: [{ selector: 'app-lists-repeater-add-remove-example', imports: [SkyDropdownModule, SkyRepeaterModule], template: "<div class=\"sky-theme-margin-bottom-l\">\n  <sky-repeater\n    data-sky-id=\"repeater-example\"\n    [expandMode]=\"'single'\"\n    [reorderable]=\"true\"\n    (orderChange)=\"changeItems($event)\"\n  >\n    @for (item of items; track item) {\n      <sky-repeater-item\n        [selectable]=\"true\"\n        [tag]=\"item.note\"\n        [disabled]=\"item.isDisabled\"\n        [(isSelected)]=\"item.isSelected\"\n      >\n        <sky-repeater-item-title class=\"example-repeater-flex\">\n          <div class=\"example-repeater-item-title\">\n            {{ item.title }}\n          </div>\n          <div>\n            {{ item.status }}\n          </div>\n        </sky-repeater-item-title>\n        <sky-repeater-item-context-menu>\n          <sky-dropdown buttonType=\"context-menu\">\n            <sky-dropdown-menu>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 1')\">\n                  Action 1\n                </button>\n              </sky-dropdown-item>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 2')\">\n                  Action 2\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          {{ item.note }}\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    }\n  </sky-repeater>\n</div>\n\n<button\n  data-sky-id=\"add-button\"\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"addItem()\"\n>\n  Add item\n</button>\n\n<button\n  data-sky-id=\"remove-button\"\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"removeItems()\"\n>\n  Remove selected items\n</button>\n", styles: [".example-repeater-flex{display:flex;flex-wrap:wrap}.example-repeater-flex .example-repeater-item-title{flex-grow:1}\n"] }]
         }] });
 
 /**
@@ -9162,7 +9162,7 @@ class ListsRepeaterInlineFormExampleComponent {
         this.activeInlineFormId = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListsRepeaterInlineFormExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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-font-emphasized\">\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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"], 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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"], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListsRepeaterInlineFormExampleComponent, decorators: [{
             type: Component,
@@ -9172,7 +9172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyIconModule,
                         SkyInputBoxModule,
                         SkyRepeaterModule,
-                    ], 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-font-emphasized\">\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" }]
+                    ], 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" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -9318,7 +9318,7 @@ class LookupAutocompleteAdvancedExampleComponent {
         alert(`You selected ${args.selectedItem.name}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupAutocompleteAdvancedExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LookupAutocompleteAdvancedExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-advanced-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n  <div class=\"sky-margin-stacked-lg\">\n    The following field:<br />\n    <ul>\n      <li>utilizes a custom search result template,</li>\n      <li>searches against the name and description properties,</li>\n      <li>limits the search results to two,</li>\n      <li>runs the search if the query is at least three characters long,</li>\n      <li>and fires an event when a selection is made.</li>\n    </ul>\n  </div>\n\n  <div class=\"sky-margin-stacked-lg\">\n    <sky-input-box labelText=\"Farthest planet from the sun\" stacked>\n      <sky-autocomplete\n        [data]=\"planets\"\n        [propertiesToSearch]=\"['name', 'description']\"\n        [searchResultsLimit]=\"2\"\n        [searchResultTemplate]=\"planetSearchResultTemplate\"\n        [searchTextMinimumCharacters]=\"3\"\n        (selectionChange)=\"onPlanetSelection($event)\"\n      >\n        <input formControlName=\"farthestPlanet\" skyAutocomplete type=\"text\" />\n      </sky-autocomplete>\n    </sky-input-box>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ formGroup.value | json }}</pre>\n</form>\n\n<ng-template #planetSearchResultTemplate let-item=\"item\">\n  <strong>\n    {{ item.name }}\n  </strong>\n  <br />\n  {{ item.description }}\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LookupAutocompleteAdvancedExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-advanced-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n  <div class=\"sky-theme-margin-bottom-l\">\n    The following field:<br />\n    <ul>\n      <li>utilizes a custom search result template,</li>\n      <li>searches against the name and description properties,</li>\n      <li>limits the search results to two,</li>\n      <li>runs the search if the query is at least three characters long,</li>\n      <li>and fires an event when a selection is made.</li>\n    </ul>\n  </div>\n\n  <div class=\"sky-theme-margin-bottom-l\">\n    <sky-input-box labelText=\"Farthest planet from the sun\" stacked>\n      <sky-autocomplete\n        [data]=\"planets\"\n        [propertiesToSearch]=\"['name', 'description']\"\n        [searchResultsLimit]=\"2\"\n        [searchResultTemplate]=\"planetSearchResultTemplate\"\n        [searchTextMinimumCharacters]=\"3\"\n        (selectionChange)=\"onPlanetSelection($event)\"\n      >\n        <input formControlName=\"farthestPlanet\" skyAutocomplete type=\"text\" />\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 #planetSearchResultTemplate let-item=\"item\">\n  <strong>\n    {{ item.name }}\n  </strong>\n  <br />\n  {{ item.description }}\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupAutocompleteAdvancedExampleComponent, decorators: [{
             type: Component,
@@ -9328,7 +9328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         ReactiveFormsModule,
                         SkyAutocompleteModule,
                         SkyInputBoxModule,
-                    ], template: "<form novalidate [formGroup]=\"formGroup\">\n  <div class=\"sky-margin-stacked-lg\">\n    The following field:<br />\n    <ul>\n      <li>utilizes a custom search result template,</li>\n      <li>searches against the name and description properties,</li>\n      <li>limits the search results to two,</li>\n      <li>runs the search if the query is at least three characters long,</li>\n      <li>and fires an event when a selection is made.</li>\n    </ul>\n  </div>\n\n  <div class=\"sky-margin-stacked-lg\">\n    <sky-input-box labelText=\"Farthest planet from the sun\" stacked>\n      <sky-autocomplete\n        [data]=\"planets\"\n        [propertiesToSearch]=\"['name', 'description']\"\n        [searchResultsLimit]=\"2\"\n        [searchResultTemplate]=\"planetSearchResultTemplate\"\n        [searchTextMinimumCharacters]=\"3\"\n        (selectionChange)=\"onPlanetSelection($event)\"\n      >\n        <input formControlName=\"farthestPlanet\" skyAutocomplete type=\"text\" />\n      </sky-autocomplete>\n    </sky-input-box>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ formGroup.value | json }}</pre>\n</form>\n\n<ng-template #planetSearchResultTemplate let-item=\"item\">\n  <strong>\n    {{ item.name }}\n  </strong>\n  <br />\n  {{ item.description }}\n</ng-template>\n" }]
+                    ], template: "<form novalidate [formGroup]=\"formGroup\">\n  <div class=\"sky-theme-margin-bottom-l\">\n    The following field:<br />\n    <ul>\n      <li>utilizes a custom search result template,</li>\n      <li>searches against the name and description properties,</li>\n      <li>limits the search results to two,</li>\n      <li>runs the search if the query is at least three characters long,</li>\n      <li>and fires an event when a selection is made.</li>\n    </ul>\n  </div>\n\n  <div class=\"sky-theme-margin-bottom-l\">\n    <sky-input-box labelText=\"Farthest planet from the sun\" stacked>\n      <sky-autocomplete\n        [data]=\"planets\"\n        [propertiesToSearch]=\"['name', 'description']\"\n        [searchResultsLimit]=\"2\"\n        [searchResultTemplate]=\"planetSearchResultTemplate\"\n        [searchTextMinimumCharacters]=\"3\"\n        (selectionChange)=\"onPlanetSelection($event)\"\n      >\n        <input formControlName=\"farthestPlanet\" skyAutocomplete type=\"text\" />\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 #planetSearchResultTemplate let-item=\"item\">\n  <strong>\n    {{ item.name }}\n  </strong>\n  <br />\n  {{ item.description }}\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 const colors = [
@@ -9418,7 +9418,7 @@ class LookupAutocompleteBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupAutocompleteBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LookupAutocompleteBasicExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-basic-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n  <sky-input-box labelText=\"Favorite color\" stacked>\n    <sky-autocomplete data-sky-id=\"favorite-color\" [data]=\"colors\">\n      <input formControlName=\"favoriteColor\" type=\"text\" skyAutocomplete />\n    </sky-autocomplete>\n  </sky-input-box>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ formGroup.value | json }}</pre>\n</form>\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: SkyIdModule }, { 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LookupAutocompleteBasicExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-basic-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n  <sky-input-box labelText=\"Favorite color\" stacked>\n    <sky-autocomplete data-sky-id=\"favorite-color\" [data]=\"colors\">\n      <input formControlName=\"favoriteColor\" type=\"text\" skyAutocomplete />\n    </sky-autocomplete>\n  </sky-input-box>\n  <p class=\"sky-theme-font-body-emphasized-m\">Form model:</p>\n  <pre>{{ formGroup.value | json }}</pre>\n</form>\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: SkyIdModule }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupAutocompleteBasicExampleComponent, decorators: [{
             type: Component,
@@ -9429,7 +9429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyAutocompleteModule,
                         SkyIdModule,
                         SkyInputBoxModule,
-                    ], template: "<form novalidate [formGroup]=\"formGroup\">\n  <sky-input-box labelText=\"Favorite color\" stacked>\n    <sky-autocomplete data-sky-id=\"favorite-color\" [data]=\"colors\">\n      <input formControlName=\"favoriteColor\" type=\"text\" skyAutocomplete />\n    </sky-autocomplete>\n  </sky-input-box>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ formGroup.value | json }}</pre>\n</form>\n" }]
+                    ], template: "<form novalidate [formGroup]=\"formGroup\">\n  <sky-input-box labelText=\"Favorite color\" stacked>\n    <sky-autocomplete data-sky-id=\"favorite-color\" [data]=\"colors\">\n      <input formControlName=\"favoriteColor\" type=\"text\" skyAutocomplete />\n    </sky-autocomplete>\n  </sky-input-box>\n  <p class=\"sky-theme-font-body-emphasized-m\">Form model:</p>\n  <pre>{{ formGroup.value | json }}</pre>\n</form>\n" }]
         }] });
 
 /**
@@ -9467,7 +9467,7 @@ class LookupAutocompleteCustomSearchExampleComponent {
         return searchFunction;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupAutocompleteCustomSearchExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", 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-margin-stacked-lg\">\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-font-emphasized\">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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupAutocompleteCustomSearchExampleComponent, decorators: [{
             type: Component,
@@ -9478,7 +9478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyAutocompleteModule,
                         SkyIconModule,
                         SkyInputBoxModule,
-                    ], 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-margin-stacked-lg\">\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-font-emphasized\">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" }]
+                    ], 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" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -9509,7 +9509,7 @@ class LookupAutocompleteSearchFiltersExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupAutocompleteSearchFiltersExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LookupAutocompleteSearchFiltersExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-search-filters-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n  <p>\n    The following field provides a custom function that filters the data before\n    every search attempt.\n  </p>\n  <div class=\"sky-margin-stacked-lg\">\n    <sky-input-box labelText='Color (\"Red\" is not available)' stacked>\n      <sky-autocomplete [data]=\"colors\" [searchFilters]=\"searchFilters\">\n        <input formControlName=\"favoriteColor\" skyAutocomplete type=\"text\" />\n      </sky-autocomplete>\n    </sky-input-box>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ formGroup.value | json }}</pre>\n</form>\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LookupAutocompleteSearchFiltersExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-search-filters-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n  <p>\n    The following field provides a custom function that filters the data before\n    every search attempt.\n  </p>\n  <div class=\"sky-theme-margin-bottom-l\">\n    <sky-input-box labelText='Color (\"Red\" is not available)' stacked>\n      <sky-autocomplete [data]=\"colors\" [searchFilters]=\"searchFilters\">\n        <input formControlName=\"favoriteColor\" skyAutocomplete type=\"text\" />\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", 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupAutocompleteSearchFiltersExampleComponent, decorators: [{
             type: Component,
@@ -9519,7 +9519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         ReactiveFormsModule,
                         SkyAutocompleteModule,
                         SkyInputBoxModule,
-                    ], template: "<form novalidate [formGroup]=\"formGroup\">\n  <p>\n    The following field provides a custom function that filters the data before\n    every search attempt.\n  </p>\n  <div class=\"sky-margin-stacked-lg\">\n    <sky-input-box labelText='Color (\"Red\" is not available)' stacked>\n      <sky-autocomplete [data]=\"colors\" [searchFilters]=\"searchFilters\">\n        <input formControlName=\"favoriteColor\" skyAutocomplete type=\"text\" />\n      </sky-autocomplete>\n    </sky-input-box>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ formGroup.value | json }}</pre>\n</form>\n" }]
+                    ], template: "<form novalidate [formGroup]=\"formGroup\">\n  <p>\n    The following field provides a custom function that filters the data before\n    every search attempt.\n  </p>\n  <div class=\"sky-theme-margin-bottom-l\">\n    <sky-input-box labelText='Color (\"Red\" is not available)' stacked>\n      <sky-autocomplete [data]=\"colors\" [searchFilters]=\"searchFilters\">\n        <input formControlName=\"favoriteColor\" skyAutocomplete type=\"text\" />\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" }]
         }], ctorParameters: () => [] });
 
 function validateCountry(control) {
@@ -9706,7 +9706,7 @@ class LookupAddItemExampleComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupAddItemExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LookupAddItemExampleComponent, isStandalone: true, selector: "app-lookup-add-item-example", ngImport: i0, template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name(s)\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (addClick)=\"addClick($event)\"\n      (searchAsync)=\"searchAsync($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\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.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: SkyIdModule }, { 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: SkyLookupModule }, { kind: "component", type: i2$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LookupAddItemExampleComponent, isStandalone: true, selector: "app-lookup-add-item-example", ngImport: i0, template: "<form\n  class=\"sky-theme-padding-inset-balanced-m\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name(s)\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (addClick)=\"addClick($event)\"\n      (searchAsync)=\"searchAsync($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-theme-border-container-default sky-theme-border-radius-s sky-theme-padding-inset-balanced-m sky-theme-margin-bottom-l\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\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.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: SkyIdModule }, { 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: SkyLookupModule }, { kind: "component", type: i2$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupAddItemExampleComponent, decorators: [{
             type: Component,
@@ -9717,7 +9717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyIdModule,
                         SkyInputBoxModule,
                         SkyLookupModule,
-                    ], template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name(s)\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (addClick)=\"addClick($event)\"\n      (searchAsync)=\"searchAsync($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n" }]
+                    ], template: "<form\n  class=\"sky-theme-padding-inset-balanced-m\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name(s)\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (addClick)=\"addClick($event)\"\n      (searchAsync)=\"searchAsync($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-theme-border-container-default sky-theme-border-radius-s sky-theme-padding-inset-balanced-m sky-theme-margin-bottom-l\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n" }]
         }], ctorParameters: () => [] });
 
 const people$5 = [
@@ -9949,7 +9949,7 @@ class LookupCustomPickerExampleComponent {
         alert('Form submitted with: ' + JSON.stringify(this.favoritesForm.value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupCustomPickerExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LookupCustomPickerExampleComponent, isStandalone: true, selector: "app-lookup-custom-picker-example", ngImport: i0, template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite names\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\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.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: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i2$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LookupCustomPickerExampleComponent, isStandalone: true, selector: "app-lookup-custom-picker-example", ngImport: i0, template: "<form\n  class=\"sky-theme-padding-inset-balanced-m\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite names\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-theme-border-container-default sky-theme-border-radius-s sky-theme-padding-inset-balanced-m sky-theme-margin-bottom-l\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\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.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: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i2$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupCustomPickerExampleComponent, decorators: [{
             type: Component,
@@ -9959,7 +9959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         ReactiveFormsModule,
                         SkyInputBoxModule,
                         SkyLookupModule,
-                    ], template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite names\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n" }]
+                    ], template: "<form\n  class=\"sky-theme-padding-inset-balanced-m\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite names\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-theme-border-container-default sky-theme-border-radius-s sky-theme-padding-inset-balanced-m sky-theme-margin-bottom-l\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n" }]
         }], ctorParameters: () => [] });
 
 const people$4 = [
@@ -10074,7 +10074,7 @@ class LookupMultiSelectExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupMultiSelectExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LookupMultiSelectExampleComponent, isStandalone: true, selector: "app-lookup-multi-select-example", ngImport: i0, template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name(s)\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n    @if (favoritesForm.controls.favoriteNames.errors?.['letterE']) {\n      <sky-form-error\n        errorName=\"letterE\"\n        errorText=\"Please only choose names that contain the letter E\"\n      />\n    }\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\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.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: SkyFormErrorModule }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { 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: SkyLookupModule }, { kind: "component", type: i2$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LookupMultiSelectExampleComponent, isStandalone: true, selector: "app-lookup-multi-select-example", ngImport: i0, template: "<form\n  class=\"sky-theme-padding-inset-balanced-m\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name(s)\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n    @if (favoritesForm.controls.favoriteNames.errors?.['letterE']) {\n      <sky-form-error\n        errorName=\"letterE\"\n        errorText=\"Please only choose names that contain the letter E\"\n      />\n    }\n  </sky-input-box>\n  <div\n    class=\"sky-theme-border-container-default sky-theme-border-radius-s sky-theme-padding-inset-balanced-m sky-theme-margin-bottom-l\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\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.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: SkyFormErrorModule }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { 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: SkyLookupModule }, { kind: "component", type: i2$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupMultiSelectExampleComponent, decorators: [{
             type: Component,
@@ -10085,7 +10085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyFormErrorModule,
                         SkyInputBoxModule,
                         SkyLookupModule,
-                    ], template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name(s)\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n    @if (favoritesForm.controls.favoriteNames.errors?.['letterE']) {\n      <sky-form-error\n        errorName=\"letterE\"\n        errorText=\"Please only choose names that contain the letter E\"\n      />\n    }\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n" }]
+                    ], template: "<form\n  class=\"sky-theme-padding-inset-balanced-m\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name(s)\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n    @if (favoritesForm.controls.favoriteNames.errors?.['letterE']) {\n      <sky-form-error\n        errorName=\"letterE\"\n        errorText=\"Please only choose names that contain the letter E\"\n      />\n    }\n  </sky-input-box>\n  <div\n    class=\"sky-theme-border-container-default sky-theme-border-radius-s sky-theme-padding-inset-balanced-m sky-theme-margin-bottom-l\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n" }]
         }], ctorParameters: () => [] });
 
 const people$3 = [
@@ -10265,7 +10265,7 @@ class LookupResultTemplatesExampleComponent {
         alert('Form submitted with: ' + JSON.stringify(this.favoritesForm.value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupResultTemplatesExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LookupResultTemplatesExampleComponent, isStandalone: true, selector: "app-lookup-result-templates-example", viewQueries: [{ propertyName: "modalItemTemplate", first: true, predicate: ["modalItemTemplate"], descendants: true }], ngImport: i0, template: "<form\n  class=\"lookup-example-form\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite names\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [searchResultTemplate]=\"dropdownItemTemplate\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (addClick)=\"addClick($event)\"\n      (searchAsync)=\"searchAsync($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n\n<ng-template #dropdownItemTemplate let-item=\"item\">\n  <span class=\"lookup-example-template-item\">\n    <strong class=\"lookup-example-template-name\">{{ item.name }}</strong\n    ><br />\n    <span class=\"lookup-example-template-formal-name\">\n      {{ item.formal }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #modalItemTemplate let-item=\"item\">\n  <span class=\"lookup-example-template-item\">\n    <span class=\"lookup-example-template-name\">{{ item.name }}</span\n    ><br />\n    <i class=\"lookup-example-template-formal-name\">{{ item.formal }}</i>\n  </span>\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.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: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i2$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LookupResultTemplatesExampleComponent, isStandalone: true, selector: "app-lookup-result-templates-example", viewQueries: [{ propertyName: "modalItemTemplate", first: true, predicate: ["modalItemTemplate"], descendants: true }], ngImport: i0, template: "<form\n  class=\"lookup-example-form\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite names\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [searchResultTemplate]=\"dropdownItemTemplate\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (addClick)=\"addClick($event)\"\n      (searchAsync)=\"searchAsync($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-theme-border-container-default sky-theme-border-radius-s sky-theme-padding-inset-balanced-m sky-theme-margin-bottom-l\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n\n<ng-template #dropdownItemTemplate let-item=\"item\">\n  <span class=\"lookup-example-template-item\">\n    <strong class=\"lookup-example-template-name\">{{ item.name }}</strong\n    ><br />\n    <span class=\"lookup-example-template-formal-name\">\n      {{ item.formal }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #modalItemTemplate let-item=\"item\">\n  <span class=\"lookup-example-template-item\">\n    <span class=\"lookup-example-template-name\">{{ item.name }}</span\n    ><br />\n    <i class=\"lookup-example-template-formal-name\">{{ item.formal }}</i>\n  </span>\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.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: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i2$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupResultTemplatesExampleComponent, decorators: [{
             type: Component,
@@ -10275,7 +10275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         ReactiveFormsModule,
                         SkyInputBoxModule,
                         SkyLookupModule,
-                    ], template: "<form\n  class=\"lookup-example-form\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite names\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [searchResultTemplate]=\"dropdownItemTemplate\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (addClick)=\"addClick($event)\"\n      (searchAsync)=\"searchAsync($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n\n<ng-template #dropdownItemTemplate let-item=\"item\">\n  <span class=\"lookup-example-template-item\">\n    <strong class=\"lookup-example-template-name\">{{ item.name }}</strong\n    ><br />\n    <span class=\"lookup-example-template-formal-name\">\n      {{ item.formal }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #modalItemTemplate let-item=\"item\">\n  <span class=\"lookup-example-template-item\">\n    <span class=\"lookup-example-template-name\">{{ item.name }}</span\n    ><br />\n    <i class=\"lookup-example-template-formal-name\">{{ item.formal }}</i>\n  </span>\n</ng-template>\n" }]
+                    ], template: "<form\n  class=\"lookup-example-form\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite names\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [searchResultTemplate]=\"dropdownItemTemplate\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (addClick)=\"addClick($event)\"\n      (searchAsync)=\"searchAsync($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-theme-border-container-default sky-theme-border-radius-s sky-theme-padding-inset-balanced-m sky-theme-margin-bottom-l\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n\n<ng-template #dropdownItemTemplate let-item=\"item\">\n  <span class=\"lookup-example-template-item\">\n    <strong class=\"lookup-example-template-name\">{{ item.name }}</strong\n    ><br />\n    <span class=\"lookup-example-template-formal-name\">\n      {{ item.formal }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #modalItemTemplate let-item=\"item\">\n  <span class=\"lookup-example-template-item\">\n    <span class=\"lookup-example-template-name\">{{ item.name }}</span\n    ><br />\n    <i class=\"lookup-example-template-formal-name\">{{ item.formal }}</i>\n  </span>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { modalItemTemplate: [{
                 type: ViewChild,
                 args: ['modalItemTemplate']
@@ -10393,7 +10393,7 @@ class LookupSingleSelectExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupSingleSelectExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LookupSingleSelectExampleComponent, isStandalone: true, selector: "app-lookup-single-select-example", ngImport: i0, template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteName\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [selectMode]=\"'single'\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n    @if (favoritesForm.controls.favoriteName.errors?.['letterE']) {\n      <sky-form-error\n        errorName=\"letterE\"\n        errorText=\"Please only choose a name that contain the letter E\"\n      />\n    }\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\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.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: SkyFormErrorModule }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { 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: SkyLookupModule }, { kind: "component", type: i2$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LookupSingleSelectExampleComponent, isStandalone: true, selector: "app-lookup-single-select-example", ngImport: i0, template: "<form\n  class=\"sky-theme-padding-inset-balanced-m\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteName\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [selectMode]=\"'single'\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n    @if (favoritesForm.controls.favoriteName.errors?.['letterE']) {\n      <sky-form-error\n        errorName=\"letterE\"\n        errorText=\"Please only choose a name that contain the letter E\"\n      />\n    }\n  </sky-input-box>\n  <div\n    class=\"sky-theme-border-container-default sky-theme-border-radius-s sky-theme-padding-inset-balanced-m sky-theme-margin-bottom-l\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\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.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: SkyFormErrorModule }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { 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: SkyLookupModule }, { kind: "component", type: i2$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupSingleSelectExampleComponent, decorators: [{
             type: Component,
@@ -10404,7 +10404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyFormErrorModule,
                         SkyInputBoxModule,
                         SkyLookupModule,
-                    ], template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteName\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [selectMode]=\"'single'\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n    @if (favoritesForm.controls.favoriteName.errors?.['letterE']) {\n      <sky-form-error\n        errorName=\"letterE\"\n        errorText=\"Please only choose a name that contain the letter E\"\n      />\n    }\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n" }]
+                    ], template: "<form\n  class=\"sky-theme-padding-inset-balanced-m\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteName\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [selectMode]=\"'single'\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n    @if (favoritesForm.controls.favoriteName.errors?.['letterE']) {\n      <sky-form-error\n        errorName=\"letterE\"\n        errorText=\"Please only choose a name that contain the letter E\"\n      />\n    }\n  </sky-input-box>\n  <div\n    class=\"sky-theme-border-container-default sky-theme-border-radius-s sky-theme-padding-inset-balanced-m sky-theme-margin-bottom-l\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -10459,11 +10459,11 @@ class LookupSearchBasicExampleComponent {
         this.displayedItems = filteredItems;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupSearchBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LookupSearchBasicExampleComponent, isStandalone: true, selector: "app-lookup-search-basic-example", ngImport: i0, template: "<sky-toolbar>\n  <sky-toolbar-item>\n    <button\n      class=\"sky-btn sky-btn-default sky-example-search-bar-item\"\n      type=\"button\"\n      (click)=\"searchApplied('Robert')\"\n    >\n      Predefined search text\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item>\n    <sky-search\n      data-sky-id=\"example-search\"\n      [ariaLabel]=\"searchAriaLabel\"\n      [searchText]=\"searchText\"\n      [debounceTime]=\"250\"\n      [placeholderText]=\"placeholderText\"\n      (searchApply)=\"searchApplied($event)\"\n      (searchChange)=\"searchApplied($event)\"\n    />\n  </sky-toolbar-item>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n  @for (item of displayedItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.title }}\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        <div>\n          {{ item.note }}\n        </div>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], 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.λ12, selector: "sky-repeater-item-title" }, { 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: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LookupSearchBasicExampleComponent, isStandalone: true, selector: "app-lookup-search-basic-example", ngImport: i0, template: "<sky-toolbar>\n  <sky-toolbar-item>\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      (click)=\"searchApplied('Robert')\"\n    >\n      Predefined search text\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item>\n    <sky-search\n      data-sky-id=\"example-search\"\n      [ariaLabel]=\"searchAriaLabel\"\n      [searchText]=\"searchText\"\n      [debounceTime]=\"250\"\n      [placeholderText]=\"placeholderText\"\n      (searchApply)=\"searchApplied($event)\"\n      (searchChange)=\"searchApplied($event)\"\n    />\n  </sky-toolbar-item>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n  @for (item of displayedItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.title }}\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        <div>\n          {{ item.note }}\n        </div>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], 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.λ12, selector: "sky-repeater-item-title" }, { 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: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupSearchBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-lookup-search-basic-example', imports: [SkyRepeaterModule, SkySearchModule, SkyToolbarModule], template: "<sky-toolbar>\n  <sky-toolbar-item>\n    <button\n      class=\"sky-btn sky-btn-default sky-example-search-bar-item\"\n      type=\"button\"\n      (click)=\"searchApplied('Robert')\"\n    >\n      Predefined search text\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item>\n    <sky-search\n      data-sky-id=\"example-search\"\n      [ariaLabel]=\"searchAriaLabel\"\n      [searchText]=\"searchText\"\n      [debounceTime]=\"250\"\n      [placeholderText]=\"placeholderText\"\n      (searchApply)=\"searchApplied($event)\"\n      (searchChange)=\"searchApplied($event)\"\n    />\n  </sky-toolbar-item>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n  @for (item of displayedItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.title }}\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        <div>\n          {{ item.note }}\n        </div>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n" }]
+            args: [{ selector: 'app-lookup-search-basic-example', imports: [SkyRepeaterModule, SkySearchModule, SkyToolbarModule], template: "<sky-toolbar>\n  <sky-toolbar-item>\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      (click)=\"searchApplied('Robert')\"\n    >\n      Predefined search text\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item>\n    <sky-search\n      data-sky-id=\"example-search\"\n      [ariaLabel]=\"searchAriaLabel\"\n      [searchText]=\"searchText\"\n      [debounceTime]=\"250\"\n      [placeholderText]=\"placeholderText\"\n      (searchApply)=\"searchApplied($event)\"\n      (searchChange)=\"searchApplied($event)\"\n    />\n  </sky-toolbar-item>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n  @for (item of displayedItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.title }}\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        <div>\n          {{ item.note }}\n        </div>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n" }]
         }], ctorParameters: () => [] });
 
 let nextId = 21;
@@ -10583,11 +10583,11 @@ class LookupSelectionModalAddItemExampleComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupSelectionModalAddItemExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LookupSelectionModalAddItemExampleComponent, isStandalone: true, selector: "app-lookup-selection-modal-add-item-example", ngImport: i0, template: "<div class=\"sky-margin-stacked-xl\">\n  <button\n    class=\"sky-btn sky-btn-default selection-modal-example-show-btn\"\n    type=\"button\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n@if (selectedPeople?.length) {\n  <div>\n    Selected people:\n    <ul class=\"selection-modal-example-selected\">\n      @for (selectedPerson of selectedPeople; track selectedPerson) {\n        <li>\n          {{ selectedPerson.name }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LookupSelectionModalAddItemExampleComponent, isStandalone: true, selector: "app-lookup-selection-modal-add-item-example", ngImport: i0, template: "<div class=\"sky-theme-margin-bottom-xl\">\n  <button\n    class=\"sky-btn sky-btn-default selection-modal-example-show-btn\"\n    type=\"button\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n@if (selectedPeople?.length) {\n  <div>\n    Selected people:\n    <ul class=\"selection-modal-example-selected\">\n      @for (selectedPerson of selectedPeople; track selectedPerson) {\n        <li>\n          {{ selectedPerson.name }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupSelectionModalAddItemExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-lookup-selection-modal-add-item-example', template: "<div class=\"sky-margin-stacked-xl\">\n  <button\n    class=\"sky-btn sky-btn-default selection-modal-example-show-btn\"\n    type=\"button\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n@if (selectedPeople?.length) {\n  <div>\n    Selected people:\n    <ul class=\"selection-modal-example-selected\">\n      @for (selectedPerson of selectedPeople; track selectedPerson) {\n        <li>\n          {{ selectedPerson.name }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n" }]
+            args: [{ selector: 'app-lookup-selection-modal-add-item-example', template: "<div class=\"sky-theme-margin-bottom-xl\">\n  <button\n    class=\"sky-btn sky-btn-default selection-modal-example-show-btn\"\n    type=\"button\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n@if (selectedPeople?.length) {\n  <div>\n    Selected people:\n    <ul class=\"selection-modal-example-selected\">\n      @for (selectedPerson of selectedPeople; track selectedPerson) {\n        <li>\n          {{ selectedPerson.name }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n" }]
         }] });
 
 const people = [
@@ -10660,11 +10660,11 @@ class LookupSelectionModalBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupSelectionModalBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LookupSelectionModalBasicExampleComponent, isStandalone: true, selector: "app-lookup-selection-modal-basic-example", ngImport: i0, template: "<div class=\"sky-margin-stacked-xl\">\n  <button\n    type=\"button\"\n    class=\"sky-btn sky-btn-default selection-modal-example-show-btn\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n@if (selectedPeople?.length) {\n  <div>\n    Selected people:\n    <ul class=\"selection-modal-example-selected\">\n      @for (selectedPerson of selectedPeople; track selectedPerson) {\n        <li>\n          {{ selectedPerson.name }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LookupSelectionModalBasicExampleComponent, isStandalone: true, selector: "app-lookup-selection-modal-basic-example", ngImport: i0, template: "<div class=\"sky-theme-margin-bottom-xl\">\n  <button\n    type=\"button\"\n    class=\"sky-btn sky-btn-default selection-modal-example-show-btn\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n@if (selectedPeople?.length) {\n  <div>\n    Selected people:\n    <ul class=\"selection-modal-example-selected\">\n      @for (selectedPerson of selectedPeople; track selectedPerson) {\n        <li>\n          {{ selectedPerson.name }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LookupSelectionModalBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-lookup-selection-modal-basic-example', template: "<div class=\"sky-margin-stacked-xl\">\n  <button\n    type=\"button\"\n    class=\"sky-btn sky-btn-default selection-modal-example-show-btn\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n@if (selectedPeople?.length) {\n  <div>\n    Selected people:\n    <ul class=\"selection-modal-example-selected\">\n      @for (selectedPerson of selectedPeople; track selectedPerson) {\n        <li>\n          {{ selectedPerson.name }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n" }]
+            args: [{ selector: 'app-lookup-selection-modal-basic-example', template: "<div class=\"sky-theme-margin-bottom-xl\">\n  <button\n    type=\"button\"\n    class=\"sky-btn sky-btn-default selection-modal-example-show-btn\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n@if (selectedPeople?.length) {\n  <div>\n    Selected people:\n    <ul class=\"selection-modal-example-selected\">\n      @for (selectedPerson of selectedPeople; track selectedPerson) {\n        <li>\n          {{ selectedPerson.name }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n" }]
         }] });
 
 /**
@@ -10783,11 +10783,11 @@ class ModalsConfirmBasicWithHarnessExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalsConfirmBasicWithHarnessExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalsConfirmBasicWithHarnessExampleComponent, isStandalone: true, selector: "app-modals-confirm-basic-with-harness-example", ngImport: i0, template: "<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm ok-confirm-btn\"\n  type=\"button\"\n  (click)=\"openOKConfirm()\"\n>\n  OK confirm\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm two-action-confirm-btn\"\n  type=\"button\"\n  (click)=\"openTwoActionConfirm()\"\n>\n  Confirm with two actions\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openThreeActionConfirm()\"\n>\n  Confirm with three actions\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openDeleteConfirm()\"\n>\n  Confirm with delete button\n</button>\n\n@if (selectedAction) {\n  @if (selectedText) {\n    <p class=\"displayed-text\">\n      You selected the \"{{ selectedText }}\" button, which has an action of \"{{\n        selectedAction\n      }}.\"\n    </p>\n  } @else {\n    <p class=\"displayed-text\">\n      You selected the \"{{ selectedAction }}\" action.\n    </p>\n  }\n}\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalsConfirmBasicWithHarnessExampleComponent, isStandalone: true, selector: "app-modals-confirm-basic-with-harness-example", ngImport: i0, template: "<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s ok-confirm-btn\"\n  type=\"button\"\n  (click)=\"openOKConfirm()\"\n>\n  OK confirm\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s two-action-confirm-btn\"\n  type=\"button\"\n  (click)=\"openTwoActionConfirm()\"\n>\n  Confirm with two actions\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openThreeActionConfirm()\"\n>\n  Confirm with three actions\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openDeleteConfirm()\"\n>\n  Confirm with delete button\n</button>\n\n@if (selectedAction) {\n  @if (selectedText) {\n    <p class=\"displayed-text\">\n      You selected the \"{{ selectedText }}\" button, which has an action of \"{{\n        selectedAction\n      }}.\"\n    </p>\n  } @else {\n    <p class=\"displayed-text\">\n      You selected the \"{{ selectedAction }}\" action.\n    </p>\n  }\n}\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalsConfirmBasicWithHarnessExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-modals-confirm-basic-with-harness-example', template: "<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm ok-confirm-btn\"\n  type=\"button\"\n  (click)=\"openOKConfirm()\"\n>\n  OK confirm\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm two-action-confirm-btn\"\n  type=\"button\"\n  (click)=\"openTwoActionConfirm()\"\n>\n  Confirm with two actions\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openThreeActionConfirm()\"\n>\n  Confirm with three actions\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openDeleteConfirm()\"\n>\n  Confirm with delete button\n</button>\n\n@if (selectedAction) {\n  @if (selectedText) {\n    <p class=\"displayed-text\">\n      You selected the \"{{ selectedText }}\" button, which has an action of \"{{\n        selectedAction\n      }}.\"\n    </p>\n  } @else {\n    <p class=\"displayed-text\">\n      You selected the \"{{ selectedAction }}\" action.\n    </p>\n  }\n}\n" }]
+            args: [{ selector: 'app-modals-confirm-basic-with-harness-example', template: "<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s ok-confirm-btn\"\n  type=\"button\"\n  (click)=\"openOKConfirm()\"\n>\n  OK confirm\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s two-action-confirm-btn\"\n  type=\"button\"\n  (click)=\"openTwoActionConfirm()\"\n>\n  Confirm with two actions\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openThreeActionConfirm()\"\n>\n  Confirm with three actions\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openDeleteConfirm()\"\n>\n  Confirm with delete button\n</button>\n\n@if (selectedAction) {\n  @if (selectedText) {\n    <p class=\"displayed-text\">\n      You selected the \"{{ selectedText }}\" button, which has an action of \"{{\n        selectedAction\n      }}.\"\n    </p>\n  } @else {\n    <p class=\"displayed-text\">\n      You selected the \"{{ selectedAction }}\" action.\n    </p>\n  }\n}\n" }]
         }] });
 
 /**
@@ -11202,10 +11202,10 @@ let ModalComponent$5 = class ModalComponent {
         imageSrc="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAwIiBoZWlnaHQ9IjM4MCIgdmlld0JveD0iMCAwIDYwMCAzODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI2MDAiIGhlaWdodD0iMzgwIiBmaWxsPSIjRENGNkY1Ii8+CjxyZWN0IHg9IjQyIiB5PSI0NiIgd2lkdGg9IjE0MCIgaGVpZ2h0PSIxNDAiIGZpbGw9IiNERUJERkEiLz4KPHJlY3QgeD0iMjMwIiB5PSIxOTQiIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIiByeD0iNzAiIGZpbGw9IiM2MEQ1RDIiLz4KPHBhdGggZD0iTTQ3OCA3OEw1NDcuMjgyIDE5OEg0MDguNzE4TDQ3OCA3OFoiIGZpbGw9IiM2NkUyRkYiLz4KPC9zdmc+Cg=="
       />
       <sky-modal-content>
-        <h2 class="sky-font-display-1 sky-margin-stacked-sm">
+        <h2 class="sky-theme-font-display-1 sky-theme-margin-bottom-s">
           Modal with banner support
         </h2>
-        <div class="awareness-modal-body sky-font-body-lg">
+        <div class="awareness-modal-body sky-theme-font-body-l">
           Modals can now display a banner that extends the full width of the
           modal without any padding or margin!
         </div>
@@ -11235,10 +11235,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         imageSrc="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAwIiBoZWlnaHQ9IjM4MCIgdmlld0JveD0iMCAwIDYwMCAzODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI2MDAiIGhlaWdodD0iMzgwIiBmaWxsPSIjRENGNkY1Ii8+CjxyZWN0IHg9IjQyIiB5PSI0NiIgd2lkdGg9IjE0MCIgaGVpZ2h0PSIxNDAiIGZpbGw9IiNERUJERkEiLz4KPHJlY3QgeD0iMjMwIiB5PSIxOTQiIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIiByeD0iNzAiIGZpbGw9IiM2MEQ1RDIiLz4KPHBhdGggZD0iTTQ3OCA3OEw1NDcuMjgyIDE5OEg0MDguNzE4TDQ3OCA3OFoiIGZpbGw9IiM2NkUyRkYiLz4KPC9zdmc+Cg=="
       />
       <sky-modal-content>
-        <h2 class="sky-font-display-1 sky-margin-stacked-sm">
+        <h2 class="sky-theme-font-display-1 sky-theme-margin-bottom-s">
           Modal with banner support
         </h2>
-        <div class="awareness-modal-body sky-font-body-lg">
+        <div class="awareness-modal-body sky-theme-font-body-l">
           Modals can now display a banner that extends the full width of the
           modal without any padding or margin!
         </div>
@@ -11459,7 +11459,7 @@ class SettingsModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SettingsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SettingsModalComponent, isStandalone: true, selector: "app-settings-modal", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (submit)=\"modalInstance.save()\">\n  <sky-modal data-sky-id=\"settings-modal\" [headingText]=\"title\">\n    <sky-modal-content>\n      @for (field of fields; track field) {\n        <ng-container class=\"row\">\n          @switch (title) {\n            @case ('Color') {\n              <sky-colorpicker #colorPicker stacked [labelText]=\"field\">\n                <input\n                  type=\"text\"\n                  [formControlName]=\"field\"\n                  [skyColorpickerInput]=\"colorPicker\"\n                />\n              </sky-colorpicker>\n            }\n            @default {\n              <sky-input-box stacked [labelText]=\"field\">\n                <input type=\"text\" [formControlName]=\"field\" />\n              </sky-input-box>\n            }\n          }\n        </ng-container>\n      }\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button\n        class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n        type=\"submit\"\n      >\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.close()\"\n      >\n        Close\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: SkyColorpickerModule }, { kind: "component", type: i2$7.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$7.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SettingsModalComponent, isStandalone: true, selector: "app-settings-modal", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (submit)=\"modalInstance.save()\">\n  <sky-modal data-sky-id=\"settings-modal\" [headingText]=\"title\">\n    <sky-modal-content>\n      @for (field of fields; track field) {\n        <ng-container class=\"row\">\n          @switch (title) {\n            @case ('Color') {\n              <sky-colorpicker #colorPicker stacked [labelText]=\"field\">\n                <input\n                  type=\"text\"\n                  [formControlName]=\"field\"\n                  [skyColorpickerInput]=\"colorPicker\"\n                />\n              </sky-colorpicker>\n            }\n            @default {\n              <sky-input-box stacked [labelText]=\"field\">\n                <input type=\"text\" [formControlName]=\"field\" />\n              </sky-input-box>\n            }\n          }\n        </ng-container>\n      }\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button\n        class=\"sky-btn sky-btn-primary sky-theme-margin-right-s\"\n        type=\"submit\"\n      >\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.close()\"\n      >\n        Close\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: SkyColorpickerModule }, { kind: "component", type: i2$7.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$7.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SettingsModalComponent, decorators: [{
             type: Component,
@@ -11469,7 +11469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyColorpickerModule,
                         SkyInputBoxModule,
                         SkyModalModule,
-                    ], template: "<form [formGroup]=\"formGroup\" (submit)=\"modalInstance.save()\">\n  <sky-modal data-sky-id=\"settings-modal\" [headingText]=\"title\">\n    <sky-modal-content>\n      @for (field of fields; track field) {\n        <ng-container class=\"row\">\n          @switch (title) {\n            @case ('Color') {\n              <sky-colorpicker #colorPicker stacked [labelText]=\"field\">\n                <input\n                  type=\"text\"\n                  [formControlName]=\"field\"\n                  [skyColorpickerInput]=\"colorPicker\"\n                />\n              </sky-colorpicker>\n            }\n            @default {\n              <sky-input-box stacked [labelText]=\"field\">\n                <input type=\"text\" [formControlName]=\"field\" />\n              </sky-input-box>\n            }\n          }\n        </ng-container>\n      }\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button\n        class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n        type=\"submit\"\n      >\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.close()\"\n      >\n        Close\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
+                    ], template: "<form [formGroup]=\"formGroup\" (submit)=\"modalInstance.save()\">\n  <sky-modal data-sky-id=\"settings-modal\" [headingText]=\"title\">\n    <sky-modal-content>\n      @for (field of fields; track field) {\n        <ng-container class=\"row\">\n          @switch (title) {\n            @case ('Color') {\n              <sky-colorpicker #colorPicker stacked [labelText]=\"field\">\n                <input\n                  type=\"text\"\n                  [formControlName]=\"field\"\n                  [skyColorpickerInput]=\"colorPicker\"\n                />\n              </sky-colorpicker>\n            }\n            @default {\n              <sky-input-box stacked [labelText]=\"field\">\n                <input type=\"text\" [formControlName]=\"field\" />\n              </sky-input-box>\n            }\n          }\n        </ng-container>\n      }\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button\n        class=\"sky-btn sky-btn-primary sky-theme-margin-right-s\"\n        type=\"submit\"\n      >\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.close()\"\n      >\n        Close\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
         }], ctorParameters: () => [] });
 
 const pastHours = Array.from(Array(5).keys()).map((i) => {
@@ -11663,11 +11663,11 @@ class PagesActionHubExampleComponent {
         this.title = 'Active accounts';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PagesActionHubExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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-margin-inline-sm\"\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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PagesActionHubExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pages-action-hub-example', imports: [SkyActionHubModule], 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-margin-inline-sm\"\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" }]
+            args: [{ selector: 'app-pages-action-hub-example', imports: [SkyActionHubModule], 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" }]
         }] });
 
 /**
@@ -11829,7 +11829,7 @@ class PagesPageDataManagerSplitViewFitLayoutExampleComponent {
         this.splitViewStream.next(message);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PagesPageDataManagerSplitViewFitLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 class=\"sky-padding-even-xl\">\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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"], 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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"], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PagesPageDataManagerSplitViewFitLayoutExampleComponent, decorators: [{
             type: Component,
@@ -11843,7 +11843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyRepeaterModule,
                         SkySplitViewModule,
                         SkySummaryActionBarModule,
-                    ], providers: [SkyDataManagerService], 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 class=\"sky-padding-even-xl\">\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" }]
+                    ], providers: [SkyDataManagerService], 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" }]
         }], ctorParameters: () => [] });
 
 class TileMyActionsComponent {
@@ -11867,20 +11867,20 @@ class TileMyActionsComponent {
         alert(buttonText + ' was clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TileMyActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 class=\"example-repeater-item-title sky-margin-stacked-sm\">\n                  <a href=\"/\">{{ item.title }}</a>\n                </div>\n                <div class=\"sky-font-deemphasized\">{{ item.date }}</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"], 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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"], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TileMyActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tile-my-actions', imports: [SkyTilesModule, SkyDropdownModule, SkyRepeaterModule], 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 class=\"example-repeater-item-title sky-margin-stacked-sm\">\n                  <a href=\"/\">{{ item.title }}</a>\n                </div>\n                <div class=\"sky-font-deemphasized\">{{ item.date }}</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"] }]
+            args: [{ selector: 'app-tile-my-actions', imports: [SkyTilesModule, SkyDropdownModule, SkyRepeaterModule], 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"] }]
         }] });
 
 class TileUpdatesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TileUpdatesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", 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-margin-stacked-sm\">\n        <a href=\"#\">Prepare for Giving Tuesday</a>\n      </h3>\n      <div class=\"sky-font-deemphasized sky-margin-stacked-sm\">10/1/2025</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-margin-stacked-sm\">\n        <a href=\"#\">What's new</a>\n      </h3>\n      <div class=\"sky-font-deemphasized sky-margin-stacked-sm\">9/28/2025</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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TileUpdatesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tile-updates', imports: [SkyTilesModule], 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-margin-stacked-sm\">\n        <a href=\"#\">Prepare for Giving Tuesday</a>\n      </h3>\n      <div class=\"sky-font-deemphasized sky-margin-stacked-sm\">10/1/2025</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-margin-stacked-sm\">\n        <a href=\"#\">What's new</a>\n      </h3>\n      <div class=\"sky-font-deemphasized sky-margin-stacked-sm\">9/28/2025</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"] }]
+            args: [{ selector: 'app-tile-updates', imports: [SkyTilesModule], 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"] }]
         }] });
 
 class HomePageContentComponent {
@@ -12125,7 +12125,7 @@ let ListPageContentComponent$1 = class ListPageContentComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ListPageContentComponent, isStandalone: true, selector: "app-list-page-content", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <div class=\"sky-margin-stacked-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", "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", "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", "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", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "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", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "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", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", 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", "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", "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", "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", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "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", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "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", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "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"] }] }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListPageContentComponent$1, decorators: [{
             type: Component,
@@ -12135,7 +12135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyDataManagerModule,
                         SkyIconModule,
                         SkyListSummaryModule,
-                    ], template: "<sky-data-manager>\n  <div class=\"sky-margin-stacked-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" }]
+                    ], 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" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -12278,7 +12278,7 @@ class ListPageContactsGridComponent {
         this.#dataManagerService.initDataView(this.#viewConfig);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListPageContactsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", 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-margin-stacked-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", "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", "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", "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", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "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", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "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", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", 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", "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", "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", "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", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "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", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "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", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListPageContactsGridComponent, decorators: [{
             type: Component,
@@ -12288,7 +12288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyDataManagerModule,
                         SkyIconModule,
                         SkyListSummaryModule,
-                    ], template: "<sky-data-manager>\n  <div class=\"sky-margin-stacked-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" }]
+                    ], 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" }]
         }], ctorParameters: () => [], propDecorators: { contacts: [{
                 type: Input
             }] } });
@@ -12450,7 +12450,7 @@ let RecordPageContentComponent$1 = class RecordPageContentComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RecordPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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-margin-stacked-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-margin-stacked-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-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-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-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-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.activity) {\n              <sky-repeater-item>\n                <sky-repeater-item-content>\n                  <div class=\"sky-margin-stacked-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-font-deemphasized\">{{ activity.date }}</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"], 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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.activity) {\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"], 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" }] }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RecordPageContentComponent$1, decorators: [{
             type: Component,
@@ -12462,7 +12462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyIconModule,
                         SkyKeyInfoModule,
                         SkyRepeaterModule,
-                    ], template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-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-margin-stacked-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-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-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-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-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.activity) {\n              <sky-repeater-item>\n                <sky-repeater-item-content>\n                  <div class=\"sky-margin-stacked-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-font-deemphasized\">{{ activity.date }}</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"] }]
+                    ], 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.activity) {\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"] }]
         }] });
 
 /**
@@ -12617,7 +12617,7 @@ class RecordPageAttachmentsTabComponent {
         this.#dataManagerService.initDataView(this.#viewConfig);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RecordPageAttachmentsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: RecordPageAttachmentsTabComponent, isStandalone: true, selector: "app-record-page-attachments-tab", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <div class=\"sky-margin-stacked-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-margin-stacked-sm\">\n    <sky-key-info layout=\"horizontal\" class=\"sky-padding-horizontal-sm\">\n      <sky-key-info-value class=\"sky-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", "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", "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", "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", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "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", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "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", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", 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", "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", "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", "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", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "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", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "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", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RecordPageAttachmentsTabComponent, decorators: [{
             type: Component,
@@ -12627,7 +12627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyDataManagerModule,
                         SkyKeyInfoModule,
                         SkyIconModule,
-                    ], template: "<sky-data-manager>\n  <div class=\"sky-margin-stacked-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-margin-stacked-sm\">\n    <sky-key-info layout=\"horizontal\" class=\"sky-padding-horizontal-sm\">\n      <sky-key-info-value class=\"sky-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" }]
+                    ], 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" }]
         }], ctorParameters: () => [] });
 
 class RecordPageNotesTabComponent {
@@ -12646,7 +12646,7 @@ class RecordPageNotesTabComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RecordPageNotesTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: RecordPageNotesTabComponent, isStandalone: true, selector: "app-record-page-notes-tab", ngImport: i0, template: "<div class=\"sky-margin-stacked-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-margin-stacked-sm\">\n  <sky-key-info layout=\"horizontal\">\n    <sky-key-info-value class=\"sky-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-margin-stacked-xs\">\n          {{ note.content }}\n        </div>\n        <div class=\"sky-font-deemphasized\">{{ 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"], 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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"], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RecordPageNotesTabComponent, decorators: [{
             type: Component,
@@ -12658,7 +12658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkySearchModule,
                         SkySortModule,
                         SkyToolbarModule,
-                    ], template: "<div class=\"sky-margin-stacked-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-margin-stacked-sm\">\n  <sky-key-info layout=\"horizontal\">\n    <sky-key-info-value class=\"sky-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-margin-stacked-xs\">\n          {{ note.content }}\n        </div>\n        <div class=\"sky-font-deemphasized\">{{ note.date }}</div>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n" }]
+                    ], 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" }]
         }] });
 
 class RecordPageOverviewTabComponent {
@@ -12736,7 +12736,7 @@ class RecordPageOverviewTabComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RecordPageOverviewTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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-margin-stacked-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-margin-stacked-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-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-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-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-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-margin-stacked-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-font-deemphasized\">{{ activity.date }}</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"], 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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"], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RecordPageOverviewTabComponent, decorators: [{
             type: Component,
@@ -12748,7 +12748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyIconModule,
                         SkyKeyInfoModule,
                         SkyRepeaterModule,
-                    ], template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-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-margin-stacked-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-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-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-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-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-margin-stacked-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-font-deemphasized\">{{ activity.date }}</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"] }]
+                    ], 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"] }]
         }] });
 
 class RecordPageContentComponent {
@@ -12952,7 +12952,7 @@ class SplitViewPageContentComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SplitViewPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SplitViewPageContentComponent, isStandalone: true, selector: "app-split-view-page-content", ngImport: i0, template: "<sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n  <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\" [width]=\"listWidth\">\n    <sky-repeater [activeIndex]=\"activeIndex\">\n      @for (item of items; track item.id; 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 class=\"sky-padding-even-xl\">\n      <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n        <sky-description-list class=\"sky-margin-stacked-xl\">\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> Vendor </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        <div>\n          <sky-input-box stacked=\"true\" labelText=\"Approved amount\">\n            <input\n              formControlName=\"approvedAmount\"\n              name=\"approvedAmount\"\n              type=\"text\"\n            />\n          </sky-input-box>\n        </div>\n\n        <div>\n          <sky-input-box stacked=\"true\" labelText=\"Comments\">\n            <textarea formControlName=\"comments\" name=\"comments\"></textarea>\n          </sky-input-box>\n        </div>\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 (actionClick)=\"onApprove()\">\n            Approve expense\n          </sky-summary-action-bar-primary-action>\n          <sky-summary-action-bar-secondary-actions>\n            <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\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", 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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"], 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SplitViewPageContentComponent, isStandalone: true, selector: "app-split-view-page-content", ngImport: i0, template: "<sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n  <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\" [width]=\"listWidth\">\n    <sky-repeater [activeIndex]=\"activeIndex\">\n      @for (item of items; track item.id; 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 class=\"sky-theme-margin-bottom-xl\">\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> Vendor </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        <div>\n          <sky-input-box stacked=\"true\" labelText=\"Approved amount\">\n            <input\n              formControlName=\"approvedAmount\"\n              name=\"approvedAmount\"\n              type=\"text\"\n            />\n          </sky-input-box>\n        </div>\n\n        <div>\n          <sky-input-box stacked=\"true\" labelText=\"Comments\">\n            <textarea formControlName=\"comments\" name=\"comments\"></textarea>\n          </sky-input-box>\n        </div>\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 (actionClick)=\"onApprove()\">\n            Approve expense\n          </sky-summary-action-bar-primary-action>\n          <sky-summary-action-bar-secondary-actions>\n            <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\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", 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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"], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SplitViewPageContentComponent, decorators: [{
             type: Component,
@@ -12964,7 +12964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyRepeaterModule,
                         SkySplitViewModule,
                         SkySummaryActionBarModule,
-                    ], template: "<sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n  <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\" [width]=\"listWidth\">\n    <sky-repeater [activeIndex]=\"activeIndex\">\n      @for (item of items; track item.id; 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 class=\"sky-padding-even-xl\">\n      <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n        <sky-description-list class=\"sky-margin-stacked-xl\">\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> Vendor </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        <div>\n          <sky-input-box stacked=\"true\" labelText=\"Approved amount\">\n            <input\n              formControlName=\"approvedAmount\"\n              name=\"approvedAmount\"\n              type=\"text\"\n            />\n          </sky-input-box>\n        </div>\n\n        <div>\n          <sky-input-box stacked=\"true\" labelText=\"Comments\">\n            <textarea formControlName=\"comments\" name=\"comments\"></textarea>\n          </sky-input-box>\n        </div>\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 (actionClick)=\"onApprove()\">\n            Approve expense\n          </sky-summary-action-bar-primary-action>\n          <sky-summary-action-bar-secondary-actions>\n            <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\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" }]
+                    ], template: "<sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n  <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\" [width]=\"listWidth\">\n    <sky-repeater [activeIndex]=\"activeIndex\">\n      @for (item of items; track item.id; 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 class=\"sky-theme-margin-bottom-xl\">\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> Vendor </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        <div>\n          <sky-input-box stacked=\"true\" labelText=\"Approved amount\">\n            <input\n              formControlName=\"approvedAmount\"\n              name=\"approvedAmount\"\n              type=\"text\"\n            />\n          </sky-input-box>\n        </div>\n\n        <div>\n          <sky-input-box stacked=\"true\" labelText=\"Comments\">\n            <textarea formControlName=\"comments\" name=\"comments\"></textarea>\n          </sky-input-box>\n        </div>\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 (actionClick)=\"onApprove()\">\n            Approve expense\n          </sky-summary-action-bar-primary-action>\n          <sky-summary-action-bar-secondary-actions>\n            <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\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" }]
         }] });
 
 /**
@@ -12994,7 +12994,7 @@ class PhoneFieldBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PhoneFieldBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: PhoneFieldBasicExampleComponent, isStandalone: true, selector: "app-phone-field-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PhoneFieldBasicExampleComponent, decorators: [{
             type: Component,
@@ -13003,7 +13003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         ReactiveFormsModule,
                         SkyInputBoxModule,
                         SkyPhoneFieldModule,
-                    ], template: "<div class=\"sky-padding-even-lg\">\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" }]
+                    ], 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" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -13039,11 +13039,11 @@ class PopoversPopoverBasicExampleComponent {
         this.popoverTitle = 'Did you know?';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoversPopoverBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: PopoversPopoverBasicExampleComponent, isStandalone: true, selector: "app-popovers-popover-basic-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  data-sky-id=\"popover-example\"\n  type=\"button\"\n  [skyPopover]=\"myPopover\"\n  [skyPopoverAlignment]=\"popoverAlignment\"\n  [skyPopoverPlacement]=\"popoverPlacement\"\n>\n  Open popover\n</button>\n\n<sky-popover #myPopover [popoverTitle]=\"popoverTitle\">\n  {{ popoverBody }}\n</sky-popover>\n", dependencies: [{ kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i1$3.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i1$3.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: PopoversPopoverBasicExampleComponent, isStandalone: true, selector: "app-popovers-popover-basic-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  data-sky-id=\"popover-example\"\n  type=\"button\"\n  [skyPopover]=\"myPopover\"\n  [skyPopoverAlignment]=\"popoverAlignment\"\n  [skyPopoverPlacement]=\"popoverPlacement\"\n>\n  Open popover\n</button>\n\n<sky-popover #myPopover [popoverTitle]=\"popoverTitle\">\n  {{ popoverBody }}\n</sky-popover>\n", dependencies: [{ kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i1$3.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i1$3.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoversPopoverBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-popovers-popover-basic-example', imports: [SkyPopoverModule], template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  data-sky-id=\"popover-example\"\n  type=\"button\"\n  [skyPopover]=\"myPopover\"\n  [skyPopoverAlignment]=\"popoverAlignment\"\n  [skyPopoverPlacement]=\"popoverPlacement\"\n>\n  Open popover\n</button>\n\n<sky-popover #myPopover [popoverTitle]=\"popoverTitle\">\n  {{ popoverBody }}\n</sky-popover>\n" }]
+            args: [{ selector: 'app-popovers-popover-basic-example', imports: [SkyPopoverModule], template: "<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  data-sky-id=\"popover-example\"\n  type=\"button\"\n  [skyPopover]=\"myPopover\"\n  [skyPopoverAlignment]=\"popoverAlignment\"\n  [skyPopoverPlacement]=\"popoverPlacement\"\n>\n  Open popover\n</button>\n\n<sky-popover #myPopover [popoverTitle]=\"popoverTitle\">\n  {{ popoverBody }}\n</sky-popover>\n" }]
         }] });
 
 /**
@@ -13068,11 +13068,11 @@ class PopoversPopoverProgrammaticExampleComponent {
         this.popoverController.next(message);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoversPopoverProgrammaticExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: PopoversPopoverProgrammaticExampleComponent, isStandalone: true, selector: "app-popovers-popover-programmatic-example", ngImport: i0, template: "<sky-help-inline\n  ariaLabel=\"Information about Popover using message stream\"\n  [skyPopover]=\"myPopover\"\n  [skyPopoverMessageStream]=\"popoverController\"\n/>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openPopover()\"\n>\n  Open popover with message stream\n</button>\n\n<sky-popover\n  #myPopover\n  (popoverClosed)=\"onPopoverStateChange(false)\"\n  (popoverOpened)=\"onPopoverStateChange(true)\"\n>\n  This is a popover.\n</sky-popover>\n", dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$6.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i1$3.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i1$3.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: PopoversPopoverProgrammaticExampleComponent, isStandalone: true, selector: "app-popovers-popover-programmatic-example", ngImport: i0, template: "<sky-help-inline\n  ariaLabel=\"Information about Popover using message stream\"\n  [skyPopover]=\"myPopover\"\n  [skyPopoverMessageStream]=\"popoverController\"\n/>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openPopover()\"\n>\n  Open popover with message stream\n</button>\n\n<sky-popover\n  #myPopover\n  (popoverClosed)=\"onPopoverStateChange(false)\"\n  (popoverOpened)=\"onPopoverStateChange(true)\"\n>\n  This is a popover.\n</sky-popover>\n", dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$6.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i1$3.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i1$3.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PopoversPopoverProgrammaticExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-popovers-popover-programmatic-example', imports: [SkyHelpInlineModule, SkyPopoverModule], template: "<sky-help-inline\n  ariaLabel=\"Information about Popover using message stream\"\n  [skyPopover]=\"myPopover\"\n  [skyPopoverMessageStream]=\"popoverController\"\n/>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openPopover()\"\n>\n  Open popover with message stream\n</button>\n\n<sky-popover\n  #myPopover\n  (popoverClosed)=\"onPopoverStateChange(false)\"\n  (popoverOpened)=\"onPopoverStateChange(true)\"\n>\n  This is a popover.\n</sky-popover>\n" }]
+            args: [{ selector: 'app-popovers-popover-programmatic-example', imports: [SkyHelpInlineModule, SkyPopoverModule], template: "<sky-help-inline\n  ariaLabel=\"Information about Popover using message stream\"\n  [skyPopover]=\"myPopover\"\n  [skyPopoverMessageStream]=\"popoverController\"\n/>\n\n<button\n  class=\"sky-btn sky-btn-default sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openPopover()\"\n>\n  Open popover with message stream\n</button>\n\n<sky-popover\n  #myPopover\n  (popoverClosed)=\"onPopoverStateChange(false)\"\n  (popoverOpened)=\"onPopoverStateChange(true)\"\n>\n  This is a popover.\n</sky-popover>\n" }]
         }] });
 
 /**
@@ -13382,7 +13382,7 @@ class SplitViewBasicExampleComponent {
         this.splitViewStream.next(message);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SplitViewBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SplitViewBasicExampleComponent, isStandalone: true, selector: "app-split-view-basic-example", ngImport: i0, template: "<sky-split-view [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 class=\"sky-padding-even-xl\">\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> Vendor </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 (actionClick)=\"onApprove()\">\n            Approve expense\n          </sky-summary-action-bar-primary-action>\n          <sky-summary-action-bar-secondary-actions>\n            <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\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", 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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"], 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SplitViewBasicExampleComponent, isStandalone: true, selector: "app-split-view-basic-example", ngImport: i0, template: "<sky-split-view [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> Vendor </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 (actionClick)=\"onApprove()\">\n            Approve expense\n          </sky-summary-action-bar-primary-action>\n          <sky-summary-action-bar-secondary-actions>\n            <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\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", 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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"], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SplitViewBasicExampleComponent, decorators: [{
             type: Component,
@@ -13394,7 +13394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyRepeaterModule,
                         SkySplitViewModule,
                         SkySummaryActionBarModule,
-                    ], template: "<sky-split-view [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 class=\"sky-padding-even-xl\">\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> Vendor </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 (actionClick)=\"onApprove()\">\n            Approve expense\n          </sky-summary-action-bar-primary-action>\n          <sky-summary-action-bar-secondary-actions>\n            <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\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" }]
+                    ], template: "<sky-split-view [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> Vendor </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 (actionClick)=\"onApprove()\">\n            Approve expense\n          </sky-summary-action-bar-primary-action>\n          <sky-summary-action-bar-secondary-actions>\n            <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\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" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -13579,7 +13579,7 @@ class SplitViewPageBoundExampleComponent {
         this.splitViewStream.next(message);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SplitViewPageBoundExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 class=\"sky-padding-even-xl\">\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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"], 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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"], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SplitViewPageBoundExampleComponent, decorators: [{
             type: Component,
@@ -13594,7 +13594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyRepeaterModule,
                         SkySplitViewModule,
                         SkySummaryActionBarModule,
-                    ], 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 class=\"sky-padding-even-xl\">\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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [] });
 
 class AddressFormComponent {
@@ -14192,11 +14192,11 @@ class ToastBasicExampleComponent {
         this.#toastSvc.closeAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ToastBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ToastBasicExampleComponent, isStandalone: true, selector: "app-toast-basic-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openToast()\"\n>\n  Open toast\n</button>\n<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"closeAll()\">\n  Close all\n</button>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ToastBasicExampleComponent, isStandalone: true, selector: "app-toast-basic-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-primary sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openToast()\"\n>\n  Open toast\n</button>\n<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"closeAll()\">\n  Close all\n</button>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ToastBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-toast-basic-example', template: "<button\n  class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openToast()\"\n>\n  Open toast\n</button>\n<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"closeAll()\">\n  Close all\n</button>\n" }]
+            args: [{ selector: 'app-toast-basic-example', template: "<button\n  class=\"sky-btn sky-btn-primary sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openToast()\"\n>\n  Open toast\n</button>\n<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"closeAll()\">\n  Close all\n</button>\n" }]
         }] });
 
 class CustomToastContext {
@@ -14242,11 +14242,11 @@ class ToastCustomComponentExampleComponent {
         this.#toastSvc.closeAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ToastCustomComponentExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ToastCustomComponentExampleComponent, isStandalone: true, selector: "app-toast-custom-component-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openToast()\"\n>\n  Open toast\n</button>\n<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"closeAll()\">\n  Close all\n</button>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ToastCustomComponentExampleComponent, isStandalone: true, selector: "app-toast-custom-component-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-primary sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openToast()\"\n>\n  Open toast\n</button>\n<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"closeAll()\">\n  Close all\n</button>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ToastCustomComponentExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-toast-custom-component-example', template: "<button\n  class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openToast()\"\n>\n  Open toast\n</button>\n<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"closeAll()\">\n  Close all\n</button>\n" }]
+            args: [{ selector: 'app-toast-custom-component-example', template: "<button\n  class=\"sky-btn sky-btn-primary sky-theme-margin-right-s\"\n  type=\"button\"\n  (click)=\"openToast()\"\n>\n  Open toast\n</button>\n<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"closeAll()\">\n  Close all\n</button>\n" }]
         }] });
 
 /**