@skyux/code-examples 14.0.0-alpha.7 → 14.0.0-alpha.9

package/fesm2022/skyux-code-examples.mjs

@@ -154,7 +154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ selector: 'app-action-bars-summary-action-bar-error-example', imports: [SkyKeyInfoModule, SkySummaryActionBarModule, ReactiveFormsModule], template: "<form [formGroup]=\"exampleForm\">\n  <sky-summary-action-bar\n    data-sky-id=\"donation-summary\"\n    [formErrors]=\"formErrors()\"\n  >\n    <sky-summary-action-bar-actions>\n      <sky-summary-action-bar-primary-action\n        (actionClick)=\"onPrimaryActionClick()\"\n      >\n        Primary action\n      </sky-summary-action-bar-primary-action>\n      <sky-summary-action-bar-secondary-actions>\n        <sky-summary-action-bar-secondary-action\n          data-sky-id=\"single-error-action\"\n          (actionClick)=\"singleError()\"\n        >\n          Single error action\n        </sky-summary-action-bar-secondary-action>\n        <sky-summary-action-bar-secondary-action\n          data-sky-id=\"multiple-error-action\"\n          (actionClick)=\"multipleErrors()\"\n        >\n          Multiple errors action\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-summary>\n      @for (info of donationSummary.value; track info) {\n        <sky-key-info>\n          <sky-key-info-value>${{ info.value }}</sky-key-info-value>\n          <sky-key-info-label>{{ info.label }}</sky-key-info-label>\n        </sky-key-info>\n      }\n    </sky-summary-action-bar-summary>\n  </sky-summary-action-bar>\n</form>\n" }]
         }] });
 
-let ModalComponent$8 = class ModalComponent {
+let ModalComponent$9 = class ModalComponent {
     #modalInstance = inject(SkyModalInstance);
     onSecondaryActionClick() {
         alert('Secondary action button clicked.');
@@ -169,9 +169,9 @@ let ModalComponent$8 = class ModalComponent {
         this.#modalInstance.save();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal headingText=\"Modal with summary action bar\">\n  <sky-modal-content> Hello world! </sky-modal-content>\n  <sky-modal-footer>\n    <sky-summary-action-bar data-sky-id=\"donation-summary\">\n      <sky-summary-action-bar-actions>\n        <sky-summary-action-bar-primary-action (actionClick)=\"save()\">\n          Primary action\n        </sky-summary-action-bar-primary-action>\n        <sky-summary-action-bar-secondary-actions>\n          <sky-summary-action-bar-secondary-action\n            data-sky-id=\"secondary-action\"\n            (actionClick)=\"onSecondaryActionClick()\"\n          >\n            Secondary action\n          </sky-summary-action-bar-secondary-action>\n          <sky-summary-action-bar-secondary-action\n            data-sky-id=\"secondary-action-2\"\n            (actionClick)=\"onSecondaryAction2Click()\"\n          >\n            Secondary action 2\n          </sky-summary-action-bar-secondary-action>\n        </sky-summary-action-bar-secondary-actions>\n        <sky-summary-action-bar-cancel (actionClick)=\"cancel()\">\n          Cancel\n        </sky-summary-action-bar-cancel>\n      </sky-summary-action-bar-actions>\n      <sky-summary-action-bar-summary>\n        <sky-key-info>\n          <sky-key-info-value>$250</sky-key-info-value>\n          <sky-key-info-label>Given this month</sky-key-info-label>\n        </sky-key-info>\n        <sky-key-info>\n          <sky-key-info-value>$1,000</sky-key-info-value>\n          <sky-key-info-label>Given this year</sky-key-info-label>\n        </sky-key-info>\n        <sky-key-info>\n          <sky-key-info-value>$1,300</sky-key-info-value>\n          <sky-key-info-label>Given all time</sky-key-info-label>\n        </sky-key-info>\n      </sky-summary-action-bar-summary>\n    </sky-summary-action-bar>\n  </sky-modal-footer>\n</sky-modal>\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" }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-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.λ4, selector: "sky-summary-action-bar-cancel", inputs: ["disabled"], outputs: ["actionClick"] }, { 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" }, { kind: "component", type: i2.λ1, selector: "sky-summary-action-bar-summary" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal headingText=\"Modal with summary action bar\">\n  <sky-modal-content> Hello world! </sky-modal-content>\n  <sky-modal-footer>\n    <sky-summary-action-bar data-sky-id=\"donation-summary\">\n      <sky-summary-action-bar-actions>\n        <sky-summary-action-bar-primary-action (actionClick)=\"save()\">\n          Primary action\n        </sky-summary-action-bar-primary-action>\n        <sky-summary-action-bar-secondary-actions>\n          <sky-summary-action-bar-secondary-action\n            data-sky-id=\"secondary-action\"\n            (actionClick)=\"onSecondaryActionClick()\"\n          >\n            Secondary action\n          </sky-summary-action-bar-secondary-action>\n          <sky-summary-action-bar-secondary-action\n            data-sky-id=\"secondary-action-2\"\n            (actionClick)=\"onSecondaryAction2Click()\"\n          >\n            Secondary action 2\n          </sky-summary-action-bar-secondary-action>\n        </sky-summary-action-bar-secondary-actions>\n        <sky-summary-action-bar-cancel (actionClick)=\"cancel()\">\n          Cancel\n        </sky-summary-action-bar-cancel>\n      </sky-summary-action-bar-actions>\n      <sky-summary-action-bar-summary>\n        <sky-key-info>\n          <sky-key-info-value>$250</sky-key-info-value>\n          <sky-key-info-label>Given this month</sky-key-info-label>\n        </sky-key-info>\n        <sky-key-info>\n          <sky-key-info-value>$1,000</sky-key-info-value>\n          <sky-key-info-label>Given this year</sky-key-info-label>\n        </sky-key-info>\n        <sky-key-info>\n          <sky-key-info-value>$1,300</sky-key-info-value>\n          <sky-key-info-label>Given all time</sky-key-info-label>\n        </sky-key-info>\n      </sky-summary-action-bar-summary>\n    </sky-summary-action-bar>\n  </sky-modal-footer>\n</sky-modal>\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" }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: 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.λ4, selector: "sky-summary-action-bar-cancel", inputs: ["disabled"], outputs: ["actionClick"] }, { 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" }, { kind: "component", type: i2.λ1, selector: "sky-summary-action-bar-summary" }] }); }
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent$8, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent$9, decorators: [{
             type: Component,
             args: [{ selector: 'app-modal', imports: [SkyKeyInfoModule, SkyModalModule, SkySummaryActionBarModule], template: "<sky-modal headingText=\"Modal with summary action bar\">\n  <sky-modal-content> Hello world! </sky-modal-content>\n  <sky-modal-footer>\n    <sky-summary-action-bar data-sky-id=\"donation-summary\">\n      <sky-summary-action-bar-actions>\n        <sky-summary-action-bar-primary-action (actionClick)=\"save()\">\n          Primary action\n        </sky-summary-action-bar-primary-action>\n        <sky-summary-action-bar-secondary-actions>\n          <sky-summary-action-bar-secondary-action\n            data-sky-id=\"secondary-action\"\n            (actionClick)=\"onSecondaryActionClick()\"\n          >\n            Secondary action\n          </sky-summary-action-bar-secondary-action>\n          <sky-summary-action-bar-secondary-action\n            data-sky-id=\"secondary-action-2\"\n            (actionClick)=\"onSecondaryAction2Click()\"\n          >\n            Secondary action 2\n          </sky-summary-action-bar-secondary-action>\n        </sky-summary-action-bar-secondary-actions>\n        <sky-summary-action-bar-cancel (actionClick)=\"cancel()\">\n          Cancel\n        </sky-summary-action-bar-cancel>\n      </sky-summary-action-bar-actions>\n      <sky-summary-action-bar-summary>\n        <sky-key-info>\n          <sky-key-info-value>$250</sky-key-info-value>\n          <sky-key-info-label>Given this month</sky-key-info-label>\n        </sky-key-info>\n        <sky-key-info>\n          <sky-key-info-value>$1,000</sky-key-info-value>\n          <sky-key-info-label>Given this year</sky-key-info-label>\n        </sky-key-info>\n        <sky-key-info>\n          <sky-key-info-value>$1,300</sky-key-info-value>\n          <sky-key-info-label>Given all time</sky-key-info-label>\n        </sky-key-info>\n      </sky-summary-action-bar-summary>\n    </sky-summary-action-bar>\n  </sky-modal-footer>\n</sky-modal>\n" }]
         }] });
@@ -182,7 +182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class ActionBarsSummaryActionBarModalExampleComponent {
     #modalSvc = inject(SkyModalService);
     openModal() {
-        this.#modalSvc.open(ModalComponent$8, {
+        this.#modalSvc.open(ModalComponent$9, {
             size: 'large',
         });
     }
@@ -569,7 +569,7 @@ let EditModalComponent$2 = class EditModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EditModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: EditModalComponent, isStandalone: true, selector: "app-edit-modal", viewQueries: [{ propertyName: "markInactiveAction", first: true, predicate: ["markInactiveAction"], descendants: true, isSignal: true }], ngImport: i0, template: "<sky-modal headingText=\"Edit employee information\">\n  <sky-modal-content>\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular\n        class=\"sky-ag-grid-editable\"\n        [gridOptions]=\"gridOptions\"\n        [rowData]=\"gridData\"\n      />\n    </sky-ag-grid-wrapper>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"instance.save(gridData)\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n<ng-template #markInactiveAction let-value=\"value\" let-row=\"row\">\n  <app-mark-inactive [name]=\"row?.name\" />\n</ng-template>\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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "component", type: MarkInactiveComponent, selector: "app-mark-inactive", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: EditModalComponent, isStandalone: true, selector: "app-edit-modal", viewQueries: [{ propertyName: "markInactiveAction", first: true, predicate: ["markInactiveAction"], descendants: true, isSignal: true }], ngImport: i0, template: "<sky-modal headingText=\"Edit employee information\">\n  <sky-modal-content>\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular\n        class=\"sky-ag-grid-editable\"\n        [gridOptions]=\"gridOptions\"\n        [rowData]=\"gridData\"\n      />\n    </sky-ag-grid-wrapper>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"instance.save(gridData)\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n<ng-template #markInactiveAction let-value=\"value\" let-row=\"row\">\n  <app-mark-inactive [name]=\"row?.name\" />\n</ng-template>\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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "component", type: MarkInactiveComponent, selector: "app-mark-inactive", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EditModalComponent$2, decorators: [{
             type: Component,
@@ -1011,7 +1011,7 @@ let EditModalComponent$1 = class EditModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EditModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: EditModalComponent, isStandalone: true, selector: "app-edit-modal", ngImport: i0, template: "<sky-modal headingText=\"Edit employee information\">\n  <sky-modal-content>\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular\n        class=\"sky-ag-grid-editable\"\n        [gridOptions]=\"gridOptions\"\n      />\n    </sky-ag-grid-wrapper>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"saveData()\">\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: EditModalComponent, isStandalone: true, selector: "app-edit-modal", ngImport: i0, template: "<sky-modal headingText=\"Edit employee information\">\n  <sky-modal-content>\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular\n        class=\"sky-ag-grid-editable\"\n        [gridOptions]=\"gridOptions\"\n      />\n    </sky-ag-grid-wrapper>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"saveData()\">\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\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: 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EditModalComponent$1, decorators: [{
             type: Component,
@@ -1070,7 +1070,7 @@ let SalesModalComponent$2 = class SalesModalComponent {
         this.modalInstance.cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SalesModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SalesModalComponent, isStandalone: true, selector: "app-sales-modal", ngImport: i0, template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SalesModalComponent, isStandalone: true, selector: "app-sales-modal", ngImport: i0, template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SalesModalComponent$2, decorators: [{
             type: Component,
@@ -1981,7 +1981,7 @@ class EditModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EditModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: EditModalComponent, isStandalone: true, selector: "app-edit-modal", ngImport: i0, template: "<sky-modal headingText=\"Edit employee information\">\n  <sky-modal-content>\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular\n        class=\"sky-ag-grid-editable\"\n        [gridOptions]=\"gridOptions\"\n        [rowData]=\"gridData\"\n      />\n    </sky-ag-grid-wrapper>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"saveData()\">\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: EditModalComponent, isStandalone: true, selector: "app-edit-modal", ngImport: i0, template: "<sky-modal headingText=\"Edit employee information\">\n  <sky-modal-content>\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular\n        class=\"sky-ag-grid-editable\"\n        [gridOptions]=\"gridOptions\"\n        [rowData]=\"gridData\"\n      />\n    </sky-ag-grid-wrapper>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"saveData()\">\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\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: 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EditModalComponent, decorators: [{
             type: Component,
@@ -2861,7 +2861,7 @@ let SalesModalComponent$1 = class SalesModalComponent {
         this.modalInstance.cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SalesModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SalesModalComponent, isStandalone: true, selector: "app-sales-modal", ngImport: i0, template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SalesModalComponent, isStandalone: true, selector: "app-sales-modal", ngImport: i0, template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SalesModalComponent$1, decorators: [{
             type: Component,
@@ -3360,7 +3360,7 @@ class SalesModalComponent {
         this.modalInstance.cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SalesModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SalesModalComponent, isStandalone: true, selector: "app-sales-modal", ngImport: i0, template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SalesModalComponent, isStandalone: true, selector: "app-sales-modal", ngImport: i0, template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SalesModalComponent, decorators: [{
             type: Component,
@@ -5278,7 +5278,7 @@ class OrangeModalComponent {
         this.modalInstance.cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: OrangeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: OrangeModalComponent, isStandalone: true, selector: "app-orange-modal", ngImport: i0, template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <sky-checkbox labelText=\"Hide orange fruits\" [formControl]=\"hideOrange\" />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: OrangeModalComponent, isStandalone: true, selector: "app-orange-modal", ngImport: i0, template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <sky-checkbox labelText=\"Hide orange fruits\" [formControl]=\"hideOrange\" />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: 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: OrangeModalComponent, decorators: [{
             type: Component,
@@ -6030,7 +6030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ selector: 'app-filter-bar-lookup-example', imports: [SkyFilterBarModule], template: "<sky-filter-bar [(appliedFilters)]=\"appliedFilters\">\n  <sky-filter-item-lookup\n    filterId=\"lookup-filter\"\n    labelText=\"Lookup filter\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n</sky-filter-bar>\n" }]
         }] });
 
-let FilterModalComponent$1 = class FilterModalComponent {
+class FilterModalComponent {
     constructor() {
         this.modalInstance = inject(SkyFilterItemModalInstance);
         this.#context = this.modalInstance.context;
@@ -6060,9 +6060,9 @@ let FilterModalComponent$1 = class FilterModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FilterModalComponent, isStandalone: true, selector: "app-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-radio-group formControlName=\"selectedOption\">\n        @for (option of options; track option.value) {\n          <sky-radio [value]=\"option.value\" [labelText]=\"option.displayValue\" />\n        }\n      </sky-radio-group>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyRadioModule }, { kind: "component", type: i2$2.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "helpPopoverContent", "helpPopoverTitle", "iconName", "radioType", "labelText", "labelHidden", "hintText", "helpKey"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i2$2.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "headingLevel", "headingStyle", "name", "required", "stacked", "value", "tabIndex", "headingText", "headingHidden", "hintText", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-};
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FilterModalComponent$1, decorators: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FilterModalComponent, isStandalone: true, selector: "app-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-radio-group formControlName=\"selectedOption\">\n        @for (option of options; track option.value) {\n          <sky-radio [value]=\"option.value\" [labelText]=\"option.displayValue\" />\n        }\n      </sky-radio-group>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyRadioModule }, { kind: "component", type: i2$2.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "helpPopoverContent", "helpPopoverTitle", "iconName", "radioType", "labelText", "labelHidden", "hintText", "helpKey"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i2$2.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "headingLevel", "headingStyle", "name", "required", "stacked", "value", "tabIndex", "headingText", "headingHidden", "hintText", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FilterModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-filter-modal', imports: [
                         FormsModule,
@@ -6079,7 +6079,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class FilterBarModalExampleComponent {
     constructor() {
         this.appliedFilters = signal(undefined, ...(ngDevMode ? [{ debugName: "appliedFilters" }] : []));
-        this.modalComponent = FilterModalComponent$1;
+        this.modalComponent = FilterModalComponent;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FilterBarModalExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FilterBarModalExampleComponent, isStandalone: true, selector: "app-filter-bar-modal-example", ngImport: i0, template: "<sky-filter-bar [(appliedFilters)]=\"appliedFilters\">\n  <sky-filter-item-modal\n    filterId=\"modal-filter\"\n    labelText=\"Modal filter\"\n    modalSize=\"small\"\n    [modalComponent]=\"modalComponent\"\n  />\n</sky-filter-bar>\n", dependencies: [{ kind: "ngmodule", type: SkyFilterBarModule }, { kind: "component", type: i2$4.λ1, selector: "sky-filter-bar", inputs: ["appliedFilters", "selectedFilterIds"], outputs: ["appliedFiltersChange", "selectedFilterIdsChange"] }, { kind: "component", type: i2$4.λ2, selector: "sky-filter-item-modal", inputs: ["filterId", "labelText", "modalComponent", "modalSize"], outputs: ["modalOpened"] }] }); }
@@ -6119,7 +6119,7 @@ class ApplicationFeeFilterModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ApplicationFeeFilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ApplicationFeeFilterModalComponent, isStandalone: true, selector: "app-application-fee-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-radio-group formControlName=\"selectedOption\">\n        @for (option of options; track option.value) {\n          <sky-radio [value]=\"option.value\" [labelText]=\"option.displayValue\" />\n        }\n      </sky-radio-group>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyRadioModule }, { kind: "component", type: i2$2.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "helpPopoverContent", "helpPopoverTitle", "iconName", "radioType", "labelText", "labelHidden", "hintText", "helpKey"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i2$2.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "headingLevel", "headingStyle", "name", "required", "stacked", "value", "tabIndex", "headingText", "headingHidden", "hintText", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ApplicationFeeFilterModalComponent, isStandalone: true, selector: "app-application-fee-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-radio-group formControlName=\"selectedOption\">\n        @for (option of options; track option.value) {\n          <sky-radio [value]=\"option.value\" [labelText]=\"option.displayValue\" />\n        }\n      </sky-radio-group>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyRadioModule }, { kind: "component", type: i2$2.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "helpPopoverContent", "helpPopoverTitle", "iconName", "radioType", "labelText", "labelHidden", "hintText", "helpKey"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i2$2.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "headingLevel", "headingStyle", "name", "required", "stacked", "value", "tabIndex", "headingText", "headingHidden", "hintText", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ApplicationFeeFilterModalComponent, decorators: [{
             type: Component,
@@ -8772,175 +8772,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     ], template: "<sky-toolbar>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-filter-button\n        data-sky-id=\"my-filter-button\"\n        [active]=\"filtersActive\"\n        [ariaControls]=\"inlineFilters.id\"\n        [ariaExpanded]=\"showInlineFilters\"\n        [showButtonText]=\"true\"\n        (filterButtonClick)=\"filterButtonClicked()\"\n      />\n    </sky-toolbar-item>\n  </sky-toolbar-section>\n</sky-toolbar>\n\n<div #inlineFilters skyId [hidden]=\"!showInlineFilters\">\n  <sky-filter-inline data-sky-id=\"filter-inline\">\n    <sky-filter-inline-item data-sky-id=\"fruit-filter\">\n      <sky-input-box labelText=\"Fruit type\">\n        <select [ngModel]=\"fruitType\" (ngModelChange)=\"fruitTypeChange($event)\">\n          <option value=\"any\">Any fruit</option>\n          <option value=\"citrus\">Citrus</option>\n          <option value=\"berry\">Berry</option>\n        </select>\n      </sky-input-box>\n    </sky-filter-inline-item>\n    <sky-filter-inline-item data-sky-id=\"hide-orange-filter\">\n      <sky-checkbox\n        labelText=\"Hide orange fruits\"\n        [ngModel]=\"hideOrange\"\n        (ngModelChange)=\"hideOrangeChange($event)\"\n      />\n    </sky-filter-inline-item>\n  </sky-filter-inline>\n</div>\n\n<sky-repeater expandMode=\"none\">\n  @for (item of filteredItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.name }}\n      </sky-repeater-item-title>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n" }]
         }], ctorParameters: () => [] });
 
-class FilterModalContext {
-    constructor() {
-        this.appliedFilters = [];
-    }
-}
-
-class FilterModalComponent {
-    constructor() {
-        this.hideOrange = false;
-        this.fruitType = 'any';
-        this.context = inject(FilterModalContext);
-        this.instance = inject(SkyModalInstance);
-        if (this.context.appliedFilters.length > 0) {
-            this.#setFormFilters(this.context.appliedFilters);
-        }
-        else {
-            this.clearAllFilters();
-        }
-    }
-    applyFilters() {
-        const result = this.#getAppliedFiltersArray();
-        this.instance.save(result);
-    }
-    cancel() {
-        this.instance.cancel();
-    }
-    clearAllFilters() {
-        this.hideOrange = false;
-        this.fruitType = 'any';
-    }
-    #getAppliedFiltersArray() {
-        const appliedFilters = [];
-        if (this.fruitType !== 'any') {
-            appliedFilters.push({
-                name: 'fruitType',
-                value: this.fruitType,
-                label: this.fruitType,
-            });
-        }
-        if (this.hideOrange) {
-            appliedFilters.push({
-                name: 'hideOrange',
-                value: true,
-                label: 'hide orange fruits',
-            });
-        }
-        return appliedFilters;
-    }
-    #setFormFilters(appliedFilters) {
-        for (const appliedFilter of appliedFilters) {
-            if (appliedFilter.name === 'fruitType') {
-                this.fruitType = `${appliedFilter.value}`;
-            }
-            if (appliedFilter.name === 'hideOrange') {
-                this.hideOrange = !!appliedFilter.value;
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FilterModalComponent, isStandalone: true, selector: "app-filter-modal", ngImport: i0, template: "<sky-modal headingText=\"Filter food preferences\">\n  <sky-modal-content>\n    <sky-input-box labelText=\"Fruit type\" stacked=\"true\">\n      <select [(ngModel)]=\"fruitType\">\n        <option value=\"any\">Any fruit</option>\n        <option value=\"citrus\">Citrus</option>\n        <option value=\"berry\">Berry</option>\n      </select>\n    </sky-input-box>\n    <sky-checkbox labelText=\"Hide orange fruits\" [(ngModel)]=\"hideOrange\" />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"clearAllFilters()\"\n    >\n      Clear\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[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.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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { 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: FilterModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-filter-modal', imports: [FormsModule, SkyCheckboxModule, SkyInputBoxModule, SkyModalModule], template: "<sky-modal headingText=\"Filter food preferences\">\n  <sky-modal-content>\n    <sky-input-box labelText=\"Fruit type\" stacked=\"true\">\n      <select [(ngModel)]=\"fruitType\">\n        <option value=\"any\">Any fruit</option>\n        <option value=\"citrus\">Citrus</option>\n        <option value=\"berry\">Berry</option>\n      </select>\n    </sky-input-box>\n    <sky-checkbox labelText=\"Hide orange fruits\" [(ngModel)]=\"hideOrange\" />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"clearAllFilters()\"\n    >\n      Clear\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n" }]
-        }], ctorParameters: () => [] });
-
-/**
- * @title Modal filter
- */
-class ListsFilterModalExampleComponent {
-    #changeDetectorRef;
-    #modalSvc;
-    constructor() {
-        this.appliedFilters = [];
-        this.items = [
-            {
-                name: 'Orange',
-                type: 'citrus',
-                color: 'orange',
-            },
-            {
-                name: 'Mango',
-                type: 'other',
-                color: 'orange',
-            },
-            {
-                name: 'Lime',
-                type: 'citrus',
-                color: 'green',
-            },
-            {
-                name: 'Strawberry',
-                type: 'berry',
-                color: 'red',
-            },
-            {
-                name: 'Blueberry',
-                type: 'berry',
-                color: 'blue',
-            },
-        ];
-        this.showInlineFilters = false;
-        this.#changeDetectorRef = inject(ChangeDetectorRef);
-        this.#modalSvc = inject(SkyModalService);
-        this.filteredItems = this.items.slice();
-    }
-    onDismiss(index) {
-        this.appliedFilters.splice(index, 1);
-        this.filteredItems = this.#filterItems(this.items, this.appliedFilters);
-    }
-    onInlineFilterButtonClicked() {
-        this.showInlineFilters = !this.showInlineFilters;
-    }
-    onModalFilterButtonClick() {
-        const modalInstance = this.#modalSvc.open(FilterModalComponent, [
-            {
-                provide: FilterModalContext,
-                useValue: {
-                    appliedFilters: this.appliedFilters,
-                },
-            },
-        ]);
-        modalInstance.closed.subscribe((result) => {
-            if (result.reason === 'save') {
-                this.appliedFilters = result.data.slice();
-                this.filteredItems = this.#filterItems(this.items, this.appliedFilters);
-                this.#changeDetectorRef.markForCheck();
-            }
-        });
-    }
-    #fruitTypeFilterFailed(filter, item) {
-        return (filter.name === 'fruitType' &&
-            filter.value !== 'any' &&
-            filter.value !== item.type);
-    }
-    #itemIsShown(filters, item) {
-        let passesFilter = true, j;
-        for (j = 0; j < filters.length; j++) {
-            if (this.#orangeFilterFailed(filters[j], item)) {
-                passesFilter = false;
-            }
-            else if (this.#fruitTypeFilterFailed(filters[j], item)) {
-                passesFilter = false;
-            }
-        }
-        return passesFilter;
-    }
-    #filterItems(items, filters) {
-        let i, passesFilter;
-        const result = [];
-        for (i = 0; i < items.length; i++) {
-            passesFilter = this.#itemIsShown(filters, items[i]);
-            if (passesFilter) {
-                result.push(items[i]);
-            }
-        }
-        return result;
-    }
-    #orangeFilterFailed(filter, item) {
-        return (filter.name === 'hideOrange' && !!filter.value && item.color === 'orange');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListsFilterModalExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ListsFilterModalExampleComponent, isStandalone: true, selector: "app-lists-filter-modal-example", ngImport: i0, template: "<sky-toolbar>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-filter-button\n        data-sky-id=\"my-filter-button\"\n        [showButtonText]=\"true\"\n        (filterButtonClick)=\"onModalFilterButtonClick()\"\n      />\n    </sky-toolbar-item>\n  </sky-toolbar-section>\n  @if (appliedFilters && appliedFilters.length > 0) {\n    <sky-toolbar-section>\n      <sky-filter-summary data-sky-id=\"filter-summary\">\n        @for (item of appliedFilters; track item; let i = $index) {\n          <sky-filter-summary-item (dismiss)=\"onDismiss(i)\">\n            {{ item.label }}\n          </sky-filter-summary-item>\n        }\n      </sky-filter-summary>\n    </sky-toolbar-section>\n  }\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n  @for (item of filteredItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.name }}\n      </sky-repeater-item-title>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyFilterModule }, { kind: "component", type: i4.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: i4.λ5, selector: "sky-filter-summary" }, { kind: "component", type: i4.λ4, selector: "sky-filter-summary-item", inputs: ["dismissible"], outputs: ["dismiss", "itemClick"] }, { 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.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ38, selector: "sky-toolbar-section" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListsFilterModalExampleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-lists-filter-modal-example', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyFilterModule, SkyRepeaterModule, SkyToolbarModule], template: "<sky-toolbar>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-filter-button\n        data-sky-id=\"my-filter-button\"\n        [showButtonText]=\"true\"\n        (filterButtonClick)=\"onModalFilterButtonClick()\"\n      />\n    </sky-toolbar-item>\n  </sky-toolbar-section>\n  @if (appliedFilters && appliedFilters.length > 0) {\n    <sky-toolbar-section>\n      <sky-filter-summary data-sky-id=\"filter-summary\">\n        @for (item of appliedFilters; track item; let i = $index) {\n          <sky-filter-summary-item (dismiss)=\"onDismiss(i)\">\n            {{ item.label }}\n          </sky-filter-summary-item>\n        }\n      </sky-filter-summary>\n    </sky-toolbar-section>\n  }\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n  @for (item of filteredItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.name }}\n      </sky-repeater-item-title>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n" }]
-        }], ctorParameters: () => [] });
-
 let nextId$3 = 0;
 /**
  * @title Infinite scroll with repeater
@@ -9747,7 +9578,7 @@ let AddItemModalComponent$1 = class AddItemModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AddItemModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: AddItemModalComponent, isStandalone: true, selector: "app-add-item-modal", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\" (ngSubmit)=\"save()\">\n  <sky-modal headingText=\"Add Item\">\n    <sky-modal-content>\n      <sky-input-box\n        labelText=\"Name\"\n        hintText=\"Find an individual by first name\"\n      >\n        <input\n          type=\"text\"\n          autocapitalize=\"words\"\n          autocomplete=\"off\"\n          formControlName=\"name\"\n        />\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"close()\">\n        Cancel\n      </button>\n      <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Add</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: 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"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: AddItemModalComponent, isStandalone: true, selector: "app-add-item-modal", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\" (ngSubmit)=\"save()\">\n  <sky-modal headingText=\"Add Item\">\n    <sky-modal-content>\n      <sky-input-box\n        labelText=\"Name\"\n        hintText=\"Find an individual by first name\"\n      >\n        <input\n          type=\"text\"\n          autocapitalize=\"words\"\n          autocomplete=\"off\"\n          formControlName=\"name\"\n        />\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"close()\">\n        Cancel\n      </button>\n      <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Add</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: 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: AddItemModalComponent$1, decorators: [{
             type: Component,
@@ -10032,7 +9863,7 @@ class PickerModalComponent {
         this.#modalInstance.save(selectedPeople);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PickerModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PickerModalComponent, isStandalone: true, selector: "app-picker-modal", ngImport: i0, template: "<sky-modal class=\"lookup-custom-picker-modal\" headingText=\"Names\">\n  <sky-modal-content>\n    @if (peopleForm) {\n      <form [formGroup]=\"peopleForm\">\n        <sky-selection-box-grid>\n          @for (\n            personControl of peopleForm.controls.people.controls;\n            track personControl;\n            let i = $index\n          ) {\n            <sky-selection-box [control]=\"checkbox\">\n              <sky-icon iconName=\"person\" />\n              <sky-selection-box-header>\n                {{ people[i].name }}\n              </sky-selection-box-header>\n              <sky-selection-box-description>\n                {{ people[i].formal }}\n              </sky-selection-box-description>\n              <sky-checkbox #checkbox [formControl]=\"personControl\" />\n            </sky-selection-box>\n          }\n        </sky-selection-box-grid>\n      </form>\n    } @else {\n      <div class=\"wait-container\">\n        <sky-wait [isWaiting]=\"true\" />\n      </div>\n    }\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary lookup-custom-picker-save-button\"\n      type=\"button\"\n      (click)=\"save()\"\n    >\n      Save\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".wait-container{height:100px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySelectionBoxModule }, { kind: "component", type: i2$2.λ15, selector: "sky-selection-box-grid", inputs: ["alignItems"] }, { kind: "component", type: i2$2.λ17, selector: "sky-selection-box", inputs: ["control"] }, { kind: "component", type: i2$2.λ14, selector: "sky-selection-box-description" }, { kind: "component", type: i2$2.λ16, selector: "sky-selection-box-header" }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PickerModalComponent, isStandalone: true, selector: "app-picker-modal", ngImport: i0, template: "<sky-modal class=\"lookup-custom-picker-modal\" headingText=\"Names\">\n  <sky-modal-content>\n    @if (peopleForm) {\n      <form [formGroup]=\"peopleForm\">\n        <sky-selection-box-grid>\n          @for (\n            personControl of peopleForm.controls.people.controls;\n            track personControl;\n            let i = $index\n          ) {\n            <sky-selection-box [control]=\"checkbox\">\n              <sky-icon iconName=\"person\" />\n              <sky-selection-box-header>\n                {{ people[i].name }}\n              </sky-selection-box-header>\n              <sky-selection-box-description>\n                {{ people[i].formal }}\n              </sky-selection-box-description>\n              <sky-checkbox #checkbox [formControl]=\"personControl\" />\n            </sky-selection-box>\n          }\n        </sky-selection-box-grid>\n      </form>\n    } @else {\n      <div class=\"wait-container\">\n        <sky-wait [isWaiting]=\"true\" />\n      </div>\n    }\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary lookup-custom-picker-save-button\"\n      type=\"button\"\n      (click)=\"save()\"\n    >\n      Save\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".wait-container{height:100px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySelectionBoxModule }, { kind: "component", type: i2$2.λ15, selector: "sky-selection-box-grid", inputs: ["alignItems"] }, { kind: "component", type: i2$2.λ17, selector: "sky-selection-box", inputs: ["control"] }, { kind: "component", type: i2$2.λ14, selector: "sky-selection-box-description" }, { kind: "component", type: i2$2.λ16, selector: "sky-selection-box-header" }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PickerModalComponent, decorators: [{
             type: Component,
@@ -10656,7 +10487,7 @@ class AddItemModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AddItemModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: AddItemModalComponent, isStandalone: true, selector: "app-add-item-modal", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\" (ngSubmit)=\"save()\">\n  <sky-modal headingText=\"Add Item\">\n    <sky-modal-content>\n      <sky-input-box labelText=\"Name\">\n        <input\n          type=\"text\"\n          autocapitalize=\"words\"\n          autocomplete=\"off\"\n          formControlName=\"name\"\n        />\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Add</button>\n      <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"close()\">\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: "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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: AddItemModalComponent, isStandalone: true, selector: "app-add-item-modal", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\" (ngSubmit)=\"save()\">\n  <sky-modal headingText=\"Add Item\">\n    <sky-modal-content>\n      <sky-input-box labelText=\"Name\">\n        <input\n          type=\"text\"\n          autocapitalize=\"words\"\n          autocomplete=\"off\"\n          formControlName=\"name\"\n        />\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Add</button>\n      <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"close()\">\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: "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: 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: AddItemModalComponent, decorators: [{
             type: Component,
@@ -10994,7 +10825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             type: Injectable
         }] });
 
-let ModalComponent$7 = class ModalComponent {
+let ModalComponent$8 = class ModalComponent {
     #context = inject(ModalContext$1);
     #instance = inject(SkyModalInstance);
     constructor() {
@@ -11029,9 +10860,9 @@ let ModalComponent$7 = class ModalComponent {
         </sky-modal-footer>
       </sky-modal>
     </form>
-  `, isInline: true, 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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }] }); }
+  `, isInline: true, 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: 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: ModalComponent$7, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent$8, decorators: [{
             type: Component,
             args: [{
                     imports: [
@@ -11082,7 +10913,7 @@ class ModalsModalBasicWithControllerExampleComponent {
         });
     }
     openModal() {
-        const instance = this.#modalSvc.open(ModalComponent$7, {
+        const instance = this.#modalSvc.open(ModalComponent$8, {
             providers: [
                 {
                     provide: ModalContext$1,
@@ -11163,7 +10994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
-let ModalComponent$6 = class ModalComponent {
+let ModalComponent$7 = class ModalComponent {
     #context = inject(ModalDemoContext$2);
     #dataSvc = inject(ModalDemoDataService$2);
     #instance = inject(SkyModalInstance);
@@ -11186,9 +11017,9 @@ let ModalComponent$6 = class ModalComponent {
         this.#instance.cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"exampleForm\" (submit)=\"saveForm()\">\n  <sky-modal\n    data-sky-id=\"modal-example\"\n    headingText=\"Modal title\"\n    helpKey=\"modal-help\"\n    [isDirty]=\"exampleForm.dirty\"\n  >\n    <sky-modal-content>\n      <sky-input-box labelText=\"An input inside a modal\">\n        <input formControlName=\"value1\" type=\"text\" />\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Save</button>\n      <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancelForm()\">\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: "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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "directive", type: i3.λ6, selector: "sky-modal[isDirty]", inputs: ["isDirty"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"exampleForm\" (submit)=\"saveForm()\">\n  <sky-modal\n    data-sky-id=\"modal-example\"\n    headingText=\"Modal title\"\n    helpKey=\"modal-help\"\n    [isDirty]=\"exampleForm.dirty\"\n  >\n    <sky-modal-content>\n      <sky-input-box labelText=\"An input inside a modal\">\n        <input formControlName=\"value1\" type=\"text\" />\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Save</button>\n      <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancelForm()\">\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: "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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "directive", type: i3.λ6, selector: "sky-modal[isDirty]", inputs: ["isDirty"] }] }); }
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent$6, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent$7, decorators: [{
             type: Component,
             args: [{ selector: 'app-modal', imports: [ReactiveFormsModule, SkyInputBoxModule, SkyModalModule], template: "<form [formGroup]=\"exampleForm\" (submit)=\"saveForm()\">\n  <sky-modal\n    data-sky-id=\"modal-example\"\n    headingText=\"Modal title\"\n    helpKey=\"modal-help\"\n    [isDirty]=\"exampleForm.dirty\"\n  >\n    <sky-modal-content>\n      <sky-input-box labelText=\"An input inside a modal\">\n        <input formControlName=\"value1\" type=\"text\" />\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Save</button>\n      <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancelForm()\">\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
         }], ctorParameters: () => [] });
@@ -11228,7 +11059,7 @@ class ModalsModalBasicWithHarnessHelpKeyExampleComponent {
                 size: this.modalSize,
             };
             // Show the modal after data is loaded.
-            const instance = this.#modalSvc.open(ModalComponent$6, options);
+            const instance = this.#modalSvc.open(ModalComponent$7, options);
             instance.closed.subscribe((result) => {
                 if (result.reason === 'save') {
                     // Display the updated value.
@@ -11274,7 +11105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
-let ModalComponent$5 = class ModalComponent {
+let ModalComponent$6 = class ModalComponent {
     #context = inject(ModalDemoContext$1);
     #dataSvc = inject(ModalDemoDataService$1);
     #instance = inject(SkyModalInstance);
@@ -11297,9 +11128,9 @@ let ModalComponent$5 = class ModalComponent {
         this.#instance.cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"exampleForm\" (submit)=\"saveForm()\">\n  <sky-modal\n    data-sky-id=\"modal-example\"\n    headingText=\"Modal title\"\n    helpPopoverContent=\"Use the help inline component to invoke contextual user assistance.\"\n    [isDirty]=\"exampleForm.dirty\"\n  >\n    <sky-modal-content>\n      <sky-input-box labelText=\"An input inside a modal\">\n        <input formControlName=\"value1\" type=\"text\" />\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Save</button>\n      <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancelForm()\">\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: "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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "directive", type: i3.λ6, selector: "sky-modal[isDirty]", inputs: ["isDirty"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"exampleForm\" (submit)=\"saveForm()\">\n  <sky-modal\n    data-sky-id=\"modal-example\"\n    headingText=\"Modal title\"\n    helpPopoverContent=\"Use the help inline component to invoke contextual user assistance.\"\n    [isDirty]=\"exampleForm.dirty\"\n  >\n    <sky-modal-content>\n      <sky-input-box labelText=\"An input inside a modal\">\n        <input formControlName=\"value1\" type=\"text\" />\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Save</button>\n      <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancelForm()\">\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: "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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "directive", type: i3.λ6, selector: "sky-modal[isDirty]", inputs: ["isDirty"] }] }); }
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent$5, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent$6, decorators: [{
             type: Component,
             args: [{ selector: 'app-modal', imports: [ReactiveFormsModule, SkyInputBoxModule, SkyModalModule], template: "<form [formGroup]=\"exampleForm\" (submit)=\"saveForm()\">\n  <sky-modal\n    data-sky-id=\"modal-example\"\n    headingText=\"Modal title\"\n    helpPopoverContent=\"Use the help inline component to invoke contextual user assistance.\"\n    [isDirty]=\"exampleForm.dirty\"\n  >\n    <sky-modal-content>\n      <sky-input-box labelText=\"An input inside a modal\">\n        <input formControlName=\"value1\" type=\"text\" />\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Save</button>\n      <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancelForm()\">\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
         }], ctorParameters: () => [] });
@@ -11339,7 +11170,7 @@ class ModalsModalBasicWithHarnessExampleComponent {
                 size: this.modalSize,
             };
             // Show the modal after data is loaded.
-            const instance = this.#modalSvc.open(ModalComponent$5, options);
+            const instance = this.#modalSvc.open(ModalComponent$6, options);
             instance.closed.subscribe((result) => {
                 if (result.reason === 'save') {
                     // Display the updated value.
@@ -11356,6 +11187,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ selector: 'app-modals-modal-basic-with-harness-example', template: "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"onOpenModalClick()\"\n>\n  Open modal example\n</button>\n@if (exampleValue) {\n  <div>The user entered {{ exampleValue }}</div>\n}\n" }]
         }] });
 
+let ModalComponent$5 = class ModalComponent {
+    #instance = inject(SkyModalInstance);
+    closeForm() {
+        this.#instance.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    <sky-modal
+      headingHidden
+      headingText="New feature: Modal with banner support"
+    >
+      <sky-modal-banner
+        imageSrc="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAwIiBoZWlnaHQ9IjM4MCIgdmlld0JveD0iMCAwIDYwMCAzODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI2MDAiIGhlaWdodD0iMzgwIiBmaWxsPSIjRENGNkY1Ii8+CjxyZWN0IHg9IjQyIiB5PSI0NiIgd2lkdGg9IjE0MCIgaGVpZ2h0PSIxNDAiIGZpbGw9IiNERUJERkEiLz4KPHJlY3QgeD0iMjMwIiB5PSIxOTQiIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIiByeD0iNzAiIGZpbGw9IiM2MEQ1RDIiLz4KPHBhdGggZD0iTTQ3OCA3OEw1NDcuMjgyIDE5OEg0MDguNzE4TDQ3OCA3OFoiIGZpbGw9IiM2NkUyRkYiLz4KPC9zdmc+Cg=="
+      />
+      <sky-modal-content>
+        <h2 class="sky-font-display-1 sky-margin-stacked-sm">
+          Modal with banner support
+        </h2>
+        <div class="awareness-modal-body sky-font-body-lg">
+          Modals can now display a banner that extends the full width of the
+          modal without any padding or margin!
+        </div>
+      </sky-modal-content>
+      <sky-modal-footer>
+        <button
+          class="sky-btn sky-btn-primary"
+          type="button"
+          (click)="closeForm()"
+        >
+          Close
+        </button>
+      </sky-modal-footer>
+    </sky-modal>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { 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.λ7, selector: "sky-modal-banner", inputs: ["imageSrc"] }, { 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: ModalComponent$5, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [SkyIconModule, SkyModalModule],
+                    template: `
+    <sky-modal
+      headingHidden
+      headingText="New feature: Modal with banner support"
+    >
+      <sky-modal-banner
+        imageSrc="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAwIiBoZWlnaHQ9IjM4MCIgdmlld0JveD0iMCAwIDYwMCAzODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI2MDAiIGhlaWdodD0iMzgwIiBmaWxsPSIjRENGNkY1Ii8+CjxyZWN0IHg9IjQyIiB5PSI0NiIgd2lkdGg9IjE0MCIgaGVpZ2h0PSIxNDAiIGZpbGw9IiNERUJERkEiLz4KPHJlY3QgeD0iMjMwIiB5PSIxOTQiIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIiByeD0iNzAiIGZpbGw9IiM2MEQ1RDIiLz4KPHBhdGggZD0iTTQ3OCA3OEw1NDcuMjgyIDE5OEg0MDguNzE4TDQ3OCA3OFoiIGZpbGw9IiM2NkUyRkYiLz4KPC9zdmc+Cg=="
+      />
+      <sky-modal-content>
+        <h2 class="sky-font-display-1 sky-margin-stacked-sm">
+          Modal with banner support
+        </h2>
+        <div class="awareness-modal-body sky-font-body-lg">
+          Modals can now display a banner that extends the full width of the
+          modal without any padding or margin!
+        </div>
+      </sky-modal-content>
+      <sky-modal-footer>
+        <button
+          class="sky-btn sky-btn-primary"
+          type="button"
+          (click)="closeForm()"
+        >
+          Close
+        </button>
+      </sky-modal-footer>
+    </sky-modal>
+  `,
+                }]
+        }] });
+
+/**
+ * @title Modal with banner
+ */
+class ModalsModalBasicWithBannerExampleComponent {
+    #instances = [];
+    #modalSvc = inject(SkyModalService);
+    ngOnDestroy() {
+        this.#instances.forEach((i) => {
+            i.close();
+        });
+    }
+    openModal() {
+        const instance = this.#modalSvc.open(ModalComponent$5);
+        this.#instances.push(instance);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalsModalBasicWithBannerExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalsModalBasicWithBannerExampleComponent, isStandalone: true, selector: "app-modals-modal-basic-with-controller-example", ngImport: i0, template: `<button
+    class="sky-btn sky-btn-default"
+    type="button"
+    (click)="openModal()"
+  >
+    Open modal example
+  </button>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalsModalBasicWithBannerExampleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-modals-modal-basic-with-controller-example',
+                    template: `<button
+    class="sky-btn sky-btn-default"
+    type="button"
+    (click)="openModal()"
+  >
+    Open modal example
+  </button>`,
+                }]
+        }] });
+
 class ModalDemoContext {
     constructor(data) {
         this.data = data;
@@ -11423,7 +11362,7 @@ let ModalComponent$4 = class ModalComponent {
         this.#instance.cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"exampleForm\" (submit)=\"saveForm()\">\n  <sky-modal\n    data-sky-id=\"modal-example\"\n    headingText=\"Modal title\"\n    [isDirty]=\"exampleForm.dirty\"\n    [formErrors]=\"errors\"\n  >\n    <sky-modal-content>\n      <sky-input-box labelText=\"An input inside a modal\">\n        <input formControlName=\"value1\" type=\"text\" />\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Save</button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"saveFormWithFormError()\"\n      >\n        Save form with an error\n      </button>\n      <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancelForm()\">\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: "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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "directive", type: i3.λ6, selector: "sky-modal[isDirty]", inputs: ["isDirty"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"exampleForm\" (submit)=\"saveForm()\">\n  <sky-modal\n    data-sky-id=\"modal-example\"\n    headingText=\"Modal title\"\n    [isDirty]=\"exampleForm.dirty\"\n    [formErrors]=\"errors\"\n  >\n    <sky-modal-content>\n      <sky-input-box labelText=\"An input inside a modal\">\n        <input formControlName=\"value1\" type=\"text\" />\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Save</button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"saveFormWithFormError()\"\n      >\n        Save form with an error\n      </button>\n      <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancelForm()\">\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: "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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "directive", type: i3.λ6, selector: "sky-modal[isDirty]", inputs: ["isDirty"] }] }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent$4, decorators: [{
             type: Component,
@@ -11520,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"] }, { 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-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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SettingsModalComponent, decorators: [{
             type: Component,
@@ -13164,7 +13103,7 @@ let ModalComponent$3 = class ModalComponent {
         this.instance.close(undefined, 'save');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"context.title\">\n  <sky-modal-content>\n    <br />\n    <br />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"submit()\">\n      {{ context.buttonText }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"context.title\">\n  <sky-modal-content>\n    <br />\n    <br />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"submit()\">\n      {{ context.buttonText }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ 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: ModalComponent$3, decorators: [{
             type: Component,
@@ -13267,7 +13206,7 @@ let ModalComponent$2 = class ModalComponent {
         this.activeIndex = changes.activeIndex;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"title\">\n  <sky-modal-content>\n    <form [formGroup]=\"formGroup\">\n      <sky-progress-indicator\n        #wizardDemo\n        [displayMode]=\"displayMode\"\n        (progressChanges)=\"updateIndex($event)\"\n      >\n        <sky-progress-indicator-item title=\"First step\">\n          <sky-input-box labelText=\"Enter text to continue\">\n            <input type=\"text\" formControlName=\"requiredValue1\" />\n          </sky-input-box>\n        </sky-progress-indicator-item>\n\n        <sky-progress-indicator-item title=\"Second step\">\n          <div>\n            <sky-checkbox\n              formControlName=\"requiredValue2\"\n              labelText=\"Select to continue\"\n            />\n          </div>\n        </sky-progress-indicator-item>\n\n        <sky-progress-indicator-item title=\"Third step\">\n          <div>Additional content or tasks go here.</div>\n        </sky-progress-indicator-item>\n      </sky-progress-indicator>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <sky-progress-indicator-nav-button\n      buttonType=\"previous\"\n      [progressIndicator]=\"wizardDemo\"\n    />\n    <sky-progress-indicator-nav-button\n      buttonType=\"next\"\n      [disabled]=\"!requirementsMet\"\n      [progressIndicator]=\"wizardDemo\"\n    />\n    <sky-progress-indicator-nav-button\n      buttonType=\"finish\"\n      buttonText=\"Finish\"\n      [progressIndicator]=\"wizardDemo\"\n      (actionClick)=\"onSaveClick($event)\"\n    />\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"onCancelClick()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyProgressIndicatorModule }, { kind: "component", type: i1$e.λ2, selector: "sky-progress-indicator", inputs: ["displayMode", "isPassive", "messageStream", "startingIndex"], outputs: ["progressChanges"] }, { kind: "component", type: i1$e.λ1, selector: "sky-progress-indicator-item", inputs: ["title", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$e.λ3, selector: "sky-progress-indicator-nav-button", inputs: ["buttonText", "buttonType", "disabled", "progressIndicator"], outputs: ["actionClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"title\">\n  <sky-modal-content>\n    <form [formGroup]=\"formGroup\">\n      <sky-progress-indicator\n        #wizardDemo\n        [displayMode]=\"displayMode\"\n        (progressChanges)=\"updateIndex($event)\"\n      >\n        <sky-progress-indicator-item title=\"First step\">\n          <sky-input-box labelText=\"Enter text to continue\">\n            <input type=\"text\" formControlName=\"requiredValue1\" />\n          </sky-input-box>\n        </sky-progress-indicator-item>\n\n        <sky-progress-indicator-item title=\"Second step\">\n          <div>\n            <sky-checkbox\n              formControlName=\"requiredValue2\"\n              labelText=\"Select to continue\"\n            />\n          </div>\n        </sky-progress-indicator-item>\n\n        <sky-progress-indicator-item title=\"Third step\">\n          <div>Additional content or tasks go here.</div>\n        </sky-progress-indicator-item>\n      </sky-progress-indicator>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <sky-progress-indicator-nav-button\n      buttonType=\"previous\"\n      [progressIndicator]=\"wizardDemo\"\n    />\n    <sky-progress-indicator-nav-button\n      buttonType=\"next\"\n      [disabled]=\"!requirementsMet\"\n      [progressIndicator]=\"wizardDemo\"\n    />\n    <sky-progress-indicator-nav-button\n      buttonType=\"finish\"\n      buttonText=\"Finish\"\n      [progressIndicator]=\"wizardDemo\"\n      (actionClick)=\"onSaveClick($event)\"\n    />\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"onCancelClick()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyProgressIndicatorModule }, { kind: "component", type: i1$e.λ2, selector: "sky-progress-indicator", inputs: ["displayMode", "isPassive", "messageStream", "startingIndex"], outputs: ["progressChanges"] }, { kind: "component", type: i1$e.λ1, selector: "sky-progress-indicator-item", inputs: ["title", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$e.λ3, selector: "sky-progress-indicator-nav-button", inputs: ["buttonText", "buttonType", "disabled", "progressIndicator"], outputs: ["actionClick"] }] }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent$2, decorators: [{
             type: Component,
@@ -13762,7 +13701,7 @@ let ModalComponent$1 = class ModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"'Sectioned form \u2014 Index: ' + activeIndexDisplay\">\n  <sky-modal-content>\n    <sky-sectioned-form\n      data-sky-id=\"modal-sectioned-form\"\n      [messageStream]=\"sectionedFormController\"\n      (indexChanged)=\"onIndexChanged($event)\"\n      (tabsVisibleChanged)=\"onTabsVisibleChanged($event)\"\n    >\n      <sky-sectioned-form-section heading=\"Basic information\">\n        <app-information-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section\n        heading=\"Addresses\"\n        [itemCount]=\"2\"\n        [active]=\"activeTab\"\n      >\n        <app-address-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n        <app-phone-form />\n      </sky-sectioned-form-section>\n    </sky-sectioned-form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    @if (tabsHidden) {\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"showTabs()\"\n      >\n        <sky-icon iconName=\"chevron-left\" />\n        Show sections\n      </button>\n    }\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"modalInstance.save()\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"modalInstance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "component", type: AddressFormComponent, selector: "app-address-form" }, { kind: "component", type: InformationFormComponent, selector: "app-information-form" }, { kind: "component", type: PhoneFormComponent, selector: "app-phone-form" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySectionedFormModule }, { kind: "component", type: i1$2.SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: ["maintainSectionContent", "messageStream"], outputs: ["indexChanged", "tabsVisibleChanged"] }, { kind: "component", type: i1$2.λ5, selector: "sky-sectioned-form-section", inputs: ["heading", "itemCount", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"'Sectioned form \u2014 Index: ' + activeIndexDisplay\">\n  <sky-modal-content>\n    <sky-sectioned-form\n      data-sky-id=\"modal-sectioned-form\"\n      [messageStream]=\"sectionedFormController\"\n      (indexChanged)=\"onIndexChanged($event)\"\n      (tabsVisibleChanged)=\"onTabsVisibleChanged($event)\"\n    >\n      <sky-sectioned-form-section heading=\"Basic information\">\n        <app-information-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section\n        heading=\"Addresses\"\n        [itemCount]=\"2\"\n        [active]=\"activeTab\"\n      >\n        <app-address-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n        <app-phone-form />\n      </sky-sectioned-form-section>\n    </sky-sectioned-form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    @if (tabsHidden) {\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"showTabs()\"\n      >\n        <sky-icon iconName=\"chevron-left\" />\n        Show sections\n      </button>\n    }\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"modalInstance.save()\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"modalInstance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "component", type: AddressFormComponent, selector: "app-address-form" }, { kind: "component", type: InformationFormComponent, selector: "app-information-form" }, { kind: "component", type: PhoneFormComponent, selector: "app-phone-form" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySectionedFormModule }, { kind: "component", type: i1$2.SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: ["maintainSectionContent", "messageStream"], outputs: ["indexChanged", "tabsVisibleChanged"] }, { kind: "component", type: i1$2.λ5, selector: "sky-sectioned-form-section", inputs: ["heading", "itemCount", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent$1, decorators: [{
             type: Component,
@@ -14063,7 +14002,7 @@ class ModalComponent {
         this.isSaveDisabled = !this.formGroup?.get('termsAccepted')?.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSave()\">\n  <sky-modal [headingText]=\"title\">\n    <sky-modal-content>\n      <sky-tabset\n        #wizardDemo\n        ariaLabel=\"Sign-up steps\"\n        data-sky-id=\"sign-up-wizard\"\n        tabStyle=\"wizard\"\n        [(active)]=\"activeIndex\"\n      >\n        <sky-tab tabHeading=\"1. Biographical Details\">\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"First name\" [stacked]=\"true\">\n                  <input type=\"text\" formControlName=\"firstName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Middle name\" [stacked]=\"true\">\n                  <input type=\"text\" formControlName=\"middleName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Last name\">\n                  <input type=\"text\" formControlName=\"lastName\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab\n          tabHeading=\"2. Contact Information\"\n          [disabled]=\"isStep2Disabled\"\n        >\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Phone Number\" [stacked]=\"true\">\n                  <sky-phone-field defaultCountry=\"us\">\n                    <input formControlName=\"phoneNumber\" skyPhoneFieldInput />\n                  </sky-phone-field>\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Email\">\n                  <input type=\"email\" formControlName=\"email\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab tabHeading=\"3. More Information\" [disabled]=\"isStep3Disabled\">\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox\n                  formControlName=\"termsAccepted\"\n                  labelText=\"Accept terms and conditions\"\n                  required\n                />\n              </sky-column>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox\n                  formControlName=\"mailingList\"\n                  labelText=\"Sign up for our email newsletter\"\n                />\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n      </sky-tabset>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <sky-tabset-nav-button buttonType=\"previous\" [tabset]=\"wizardDemo\" />\n      <sky-tabset-nav-button buttonType=\"next\" [tabset]=\"wizardDemo\" />\n      <sky-tabset-nav-button\n        buttonType=\"finish\"\n        [tabset]=\"wizardDemo\"\n        [disabled]=\"isSaveDisabled\"\n      />\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyPhoneFieldModule }, { kind: "component", type: i3$4.λ1, selector: "sky-phone-field", inputs: ["allowExtensions", "defaultCountry", "returnFormat", "supportedCountryISOs", "selectedCountry"], outputs: ["selectedCountryChange"] }, { kind: "directive", type: i3$4.λ2, selector: "[skyPhoneFieldInput]", inputs: ["disabled", "skyPhoneFieldNoValidate"] }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i1$2.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i1$2.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "component", type: i1$2.λ3, selector: "sky-tabset-nav-button", inputs: ["tabset", "buttonType", "buttonText", "disabled"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSave()\">\n  <sky-modal [headingText]=\"title\">\n    <sky-modal-content>\n      <sky-tabset\n        #wizardDemo\n        ariaLabel=\"Sign-up steps\"\n        data-sky-id=\"sign-up-wizard\"\n        tabStyle=\"wizard\"\n        [(active)]=\"activeIndex\"\n      >\n        <sky-tab tabHeading=\"1. Biographical Details\">\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"First name\" [stacked]=\"true\">\n                  <input type=\"text\" formControlName=\"firstName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Middle name\" [stacked]=\"true\">\n                  <input type=\"text\" formControlName=\"middleName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Last name\">\n                  <input type=\"text\" formControlName=\"lastName\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab\n          tabHeading=\"2. Contact Information\"\n          [disabled]=\"isStep2Disabled\"\n        >\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Phone Number\" [stacked]=\"true\">\n                  <sky-phone-field defaultCountry=\"us\">\n                    <input formControlName=\"phoneNumber\" skyPhoneFieldInput />\n                  </sky-phone-field>\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Email\">\n                  <input type=\"email\" formControlName=\"email\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab tabHeading=\"3. More Information\" [disabled]=\"isStep3Disabled\">\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox\n                  formControlName=\"termsAccepted\"\n                  labelText=\"Accept terms and conditions\"\n                  required\n                />\n              </sky-column>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox\n                  formControlName=\"mailingList\"\n                  labelText=\"Sign up for our email newsletter\"\n                />\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n      </sky-tabset>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <sky-tabset-nav-button buttonType=\"previous\" [tabset]=\"wizardDemo\" />\n      <sky-tabset-nav-button buttonType=\"next\" [tabset]=\"wizardDemo\" />\n      <sky-tabset-nav-button\n        buttonType=\"finish\"\n        [tabset]=\"wizardDemo\"\n        [disabled]=\"isSaveDisabled\"\n      />\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyPhoneFieldModule }, { kind: "component", type: i3$4.λ1, selector: "sky-phone-field", inputs: ["allowExtensions", "defaultCountry", "returnFormat", "supportedCountryISOs", "selectedCountry"], outputs: ["selectedCountryChange"] }, { kind: "directive", type: i3$4.λ2, selector: "[skyPhoneFieldInput]", inputs: ["disabled", "skyPhoneFieldNoValidate"] }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i1$2.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i1$2.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "component", type: i1$2.λ3, selector: "sky-tabset-nav-button", inputs: ["tabset", "buttonType", "buttonText", "disabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
@@ -14405,5 +14344,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarsSummaryActionBarBasicExampleComponent, ActionBarsSummaryActionBarErrorExampleComponent, ActionBarsSummaryActionBarModalExampleComponent, ActionBarsSummaryActionBarTabExampleComponent, AgGridDataEntryGridBasicExampleComponent, AgGridDataEntryGridDataManagerAddedExampleComponent, AgGridDataEntryGridFocusExampleComponent, AgGridDataEntryGridInlineHelpExampleComponent, AgGridDataGridBasicExampleComponent, AgGridDataGridBasicMultiselectExampleComponent, AgGridDataGridDataManagerExampleComponent, AgGridDataGridDataManagerMultiselectExampleComponent, AgGridDataGridInlineHelpExampleComponent, AgGridDataGridPagingExampleComponent, AgGridDataGridTemplateRefColumnExampleComponent, AgGridDataGridTopScrollExampleComponent, AngularTreeComponentAngularTreeBasicExampleComponent, AngularTreeComponentAngularTreeHelpKeyExampleComponent, AngularTreeComponentAngularTreePreselectedNodesExampleComponent, AutonumericCurrencyExampleComponent, AutonumericInternationalFormattingExampleComponent, AutonumericOptionsProviderExampleComponent, AutonumericPresetExampleComponent, AvatarExampleComponent, ColorpickerBasicExampleComponent, ColorpickerHelpKeyExampleComponent, ColorpickerProgrammaticExampleComponent, CoreIdExampleComponent, CoreMediaQueryBasicExampleComponent, CoreMediaQueryResponsiveHostExampleComponent, CoreNumericBasicExampleComponent, DataManagerBasicExampleComponent, DatetimeDatePipeBasicExampleComponent, DatetimeDateRangePickerBasicExampleComponent, DatetimeDateRangePickerCustomCalculatorExampleComponent, DatetimeDateRangePickerHelpKeyExampleComponent, DatetimeDatepickerBasicExampleComponent, DatetimeDatepickerCustomDatesExampleComponent, DatetimeDatepickerFuzzyExampleComponent, DatetimeTimepickerBasicExampleComponent, ErrorsErrorEmbeddedExampleComponent, ErrorsErrorModalExampleComponent, FilterBarLookupExampleComponent, FilterBarModalExampleComponent, FilterBarSelectableExampleComponent, FlyoutBasicExampleComponent, FlyoutCustomHeadersExampleComponent, FormsCharacterCountExampleComponent, FormsCheckboxBasicExampleComponent, FormsCheckboxHelpKeyExampleComponent, FormsCheckboxIconGroupExampleComponent, FormsFieldGroupBasicExampleComponent, FormsFieldGroupHelpKeyExampleComponent, FormsFileAttachmentBasicExampleComponent, FormsFileAttachmentHelpKeyExampleComponent, FormsFileDropBasicExampleComponent, FormsFileDropHelpKeyExampleComponent, FormsInputBoxBasicExampleComponent, FormsInputBoxWithCustomFormErrorsExampleComponent, FormsRadioHelpKeyExampleComponent, FormsRadioIconExampleComponent, FormsRadioStandardExampleComponent, FormsSelectionBoxCheckboxExampleComponent, FormsSelectionBoxRadioExampleComponent, FormsToggleSwitchBasicExampleComponent, FormsToggleSwitchHelpKeyExampleComponent, HelpInlineActionClickExampleComponent, HelpInlineHelpKeyExampleComponent, HelpInlinePopoverExampleComponent, IconBasicExampleComponent, IconIconButtonExampleComponent, IndicatorsAlertBasicExampleComponent, IndicatorsIllustrationBasicExampleComponent, IndicatorsKeyInfoBasicExampleComponent, IndicatorsKeyInfoHelpKeyExampleComponent, IndicatorsLabelBasicExampleComponent, IndicatorsStatusIndicatorBasicExampleComponent, IndicatorsStatusIndicatorHelpKeyExampleComponent, IndicatorsTextHighlightBasicExampleComponent, IndicatorsTokensBasicExampleComponent, IndicatorsTokensCustomExampleComponent, IndicatorsWaitElementExampleComponent, IndicatorsWaitPageExampleComponent, InlineFormBasicExampleComponent, InlineFormCustomButtonsExampleComponent, InlineFormRepeatersExampleComponent, LayoutActionButtonBasicExampleComponent, LayoutActionButtonPermalinkExampleComponent, LayoutBackToTopInfiniteScrollExampleComponent, LayoutBackToTopRepeaterExampleComponent, LayoutBoxBasicExampleComponent, LayoutBoxHelpKeyExampleComponent, LayoutCardBasicExampleComponent, LayoutDefinitionListBasicExampleComponent, LayoutDescriptionListHelpKeyExampleComponent, LayoutDescriptionListHorizontalExampleComponent, LayoutDescriptionListInlineHelpExampleComponent, LayoutDescriptionListLongDescriptionExampleComponent, LayoutDescriptionListVerticalExampleComponent, LayoutFluidGridExampleComponent, LayoutFormatExampleComponent, LayoutInlineDeleteCustomExampleComponent, LayoutInlineDeleteRepeaterExampleComponent, LayoutPageSummaryBasicExampleComponent, LayoutTextExpandInlineExampleComponent, LayoutTextExpandModalExampleComponent, LayoutTextExpandNewlineExampleComponent, LayoutTextExpandRepeaterExampleComponent, LayoutToolbarBasicExampleComponent, LayoutToolbarSectionedExampleComponent, ListsFilterInlineExampleComponent, ListsFilterModalExampleComponent, ListsInfiniteScrollRepeaterExampleComponent, ListsListSummaryBasicExampleComponent, ListsPagingBasicExampleComponent, ListsPagingWithContentExampleComponent, ListsRepeaterAddRemoveExampleComponent, ListsRepeaterBasicExampleComponent, ListsRepeaterInlineFormExampleComponent, ListsSortBasicExampleComponent, LookupAddItemExampleComponent, LookupAutocompleteAdvancedExampleComponent, LookupAutocompleteAnyValueExampleComponent, LookupAutocompleteBasicExampleComponent, LookupAutocompleteCustomSearchExampleComponent, LookupAutocompleteSearchFiltersExampleComponent, LookupCountryFieldBasicExampleComponent, LookupCustomPickerExampleComponent, LookupMultiSelectExampleComponent, LookupResultTemplatesExampleComponent, LookupSearchBasicExampleComponent, LookupSelectionModalAddItemExampleComponent, LookupSelectionModalBasicExampleComponent, LookupSingleSelectExampleComponent, ModalsConfirmBasicWithControllerExampleComponent, ModalsConfirmBasicWithHarnessExampleComponent, ModalsModalBasicWithControllerExampleComponent, ModalsModalBasicWithHarnessExampleComponent, ModalsModalBasicWithHarnessHelpKeyExampleComponent, ModalsModalWithErrorExampleComponent, NavbarExampleComponent, PagesActionHubExampleComponent, PagesPageDataManagerSplitViewFitLayoutExampleComponent, PagesPageHomePageBlocksLayoutExampleComponent, PagesPageListPageListLayoutExampleComponent, PagesPageListPageTabsLayoutExampleComponent, PagesPageRecordPageBlocksLayoutExampleComponent, PagesPageRecordPageTabsLayoutExampleComponent, PagesPageSplitViewPageFitLayoutExampleComponent, PhoneFieldBasicExampleComponent, PopoversDropdownBasicExampleComponent, PopoversPopoverBasicExampleComponent, PopoversPopoverProgrammaticExampleComponent, ProgressIndicatorPassiveIndicatorBasicExampleComponent, ProgressIndicatorWaterfallIndicatorBasicExampleComponent, ProgressIndicatorWizardBasicExampleComponent, RouterHrefBasicExampleComponent, SplitViewBasicExampleComponent, SplitViewPageBoundExampleComponent, TabsDynamicAddCloseExampleComponent, TabsDynamicExampleComponent, TabsSectionedFormModalExampleComponent, TabsStaticAddCloseExampleComponent, TabsStaticExampleComponent, TabsVerticalTabsBasicExampleComponent, TabsVerticalTabsGroupedExampleComponent, TabsVerticalTabsMixedExampleComponent, TabsWizardBasicExampleComponent, TextEditorExampleComponent, TextEditorHelpKeyExampleComponent, TextEditorRichTextDisplayExampleComponent, TilesBasicExampleComponent, ToastBasicExampleComponent, ToastCustomComponentExampleComponent, ValidationEmailValidationControlValidatorExampleComponent, ValidationEmailValidationDirectiveExampleComponent, ValidationUrlValidationControlValidatorExampleComponent, ValidationUrlValidationDirectiveExampleComponent };
+export { ActionBarsSummaryActionBarBasicExampleComponent, ActionBarsSummaryActionBarErrorExampleComponent, ActionBarsSummaryActionBarModalExampleComponent, ActionBarsSummaryActionBarTabExampleComponent, AgGridDataEntryGridBasicExampleComponent, AgGridDataEntryGridDataManagerAddedExampleComponent, AgGridDataEntryGridFocusExampleComponent, AgGridDataEntryGridInlineHelpExampleComponent, AgGridDataGridBasicExampleComponent, AgGridDataGridBasicMultiselectExampleComponent, AgGridDataGridDataManagerExampleComponent, AgGridDataGridDataManagerMultiselectExampleComponent, AgGridDataGridInlineHelpExampleComponent, AgGridDataGridPagingExampleComponent, AgGridDataGridTemplateRefColumnExampleComponent, AgGridDataGridTopScrollExampleComponent, AngularTreeComponentAngularTreeBasicExampleComponent, AngularTreeComponentAngularTreeHelpKeyExampleComponent, AngularTreeComponentAngularTreePreselectedNodesExampleComponent, AutonumericCurrencyExampleComponent, AutonumericInternationalFormattingExampleComponent, AutonumericOptionsProviderExampleComponent, AutonumericPresetExampleComponent, AvatarExampleComponent, ColorpickerBasicExampleComponent, ColorpickerHelpKeyExampleComponent, ColorpickerProgrammaticExampleComponent, CoreIdExampleComponent, CoreMediaQueryBasicExampleComponent, CoreMediaQueryResponsiveHostExampleComponent, CoreNumericBasicExampleComponent, DataManagerBasicExampleComponent, DatetimeDatePipeBasicExampleComponent, DatetimeDateRangePickerBasicExampleComponent, DatetimeDateRangePickerCustomCalculatorExampleComponent, DatetimeDateRangePickerHelpKeyExampleComponent, DatetimeDatepickerBasicExampleComponent, DatetimeDatepickerCustomDatesExampleComponent, DatetimeDatepickerFuzzyExampleComponent, DatetimeTimepickerBasicExampleComponent, ErrorsErrorEmbeddedExampleComponent, ErrorsErrorModalExampleComponent, FilterBarLookupExampleComponent, FilterBarModalExampleComponent, FilterBarSelectableExampleComponent, FlyoutBasicExampleComponent, FlyoutCustomHeadersExampleComponent, FormsCharacterCountExampleComponent, FormsCheckboxBasicExampleComponent, FormsCheckboxHelpKeyExampleComponent, FormsCheckboxIconGroupExampleComponent, FormsFieldGroupBasicExampleComponent, FormsFieldGroupHelpKeyExampleComponent, FormsFileAttachmentBasicExampleComponent, FormsFileAttachmentHelpKeyExampleComponent, FormsFileDropBasicExampleComponent, FormsFileDropHelpKeyExampleComponent, FormsInputBoxBasicExampleComponent, FormsInputBoxWithCustomFormErrorsExampleComponent, FormsRadioHelpKeyExampleComponent, FormsRadioIconExampleComponent, FormsRadioStandardExampleComponent, FormsSelectionBoxCheckboxExampleComponent, FormsSelectionBoxRadioExampleComponent, FormsToggleSwitchBasicExampleComponent, FormsToggleSwitchHelpKeyExampleComponent, HelpInlineActionClickExampleComponent, HelpInlineHelpKeyExampleComponent, HelpInlinePopoverExampleComponent, IconBasicExampleComponent, IconIconButtonExampleComponent, IndicatorsAlertBasicExampleComponent, IndicatorsIllustrationBasicExampleComponent, IndicatorsKeyInfoBasicExampleComponent, IndicatorsKeyInfoHelpKeyExampleComponent, IndicatorsLabelBasicExampleComponent, IndicatorsStatusIndicatorBasicExampleComponent, IndicatorsStatusIndicatorHelpKeyExampleComponent, IndicatorsTextHighlightBasicExampleComponent, IndicatorsTokensBasicExampleComponent, IndicatorsTokensCustomExampleComponent, IndicatorsWaitElementExampleComponent, IndicatorsWaitPageExampleComponent, InlineFormBasicExampleComponent, InlineFormCustomButtonsExampleComponent, InlineFormRepeatersExampleComponent, LayoutActionButtonBasicExampleComponent, LayoutActionButtonPermalinkExampleComponent, LayoutBackToTopInfiniteScrollExampleComponent, LayoutBackToTopRepeaterExampleComponent, LayoutBoxBasicExampleComponent, LayoutBoxHelpKeyExampleComponent, LayoutCardBasicExampleComponent, LayoutDefinitionListBasicExampleComponent, LayoutDescriptionListHelpKeyExampleComponent, LayoutDescriptionListHorizontalExampleComponent, LayoutDescriptionListInlineHelpExampleComponent, LayoutDescriptionListLongDescriptionExampleComponent, LayoutDescriptionListVerticalExampleComponent, LayoutFluidGridExampleComponent, LayoutFormatExampleComponent, LayoutInlineDeleteCustomExampleComponent, LayoutInlineDeleteRepeaterExampleComponent, LayoutPageSummaryBasicExampleComponent, LayoutTextExpandInlineExampleComponent, LayoutTextExpandModalExampleComponent, LayoutTextExpandNewlineExampleComponent, LayoutTextExpandRepeaterExampleComponent, LayoutToolbarBasicExampleComponent, LayoutToolbarSectionedExampleComponent, ListsFilterInlineExampleComponent, ListsInfiniteScrollRepeaterExampleComponent, ListsListSummaryBasicExampleComponent, ListsPagingBasicExampleComponent, ListsPagingWithContentExampleComponent, ListsRepeaterAddRemoveExampleComponent, ListsRepeaterBasicExampleComponent, ListsRepeaterInlineFormExampleComponent, ListsSortBasicExampleComponent, LookupAddItemExampleComponent, LookupAutocompleteAdvancedExampleComponent, LookupAutocompleteAnyValueExampleComponent, LookupAutocompleteBasicExampleComponent, LookupAutocompleteCustomSearchExampleComponent, LookupAutocompleteSearchFiltersExampleComponent, LookupCountryFieldBasicExampleComponent, LookupCustomPickerExampleComponent, LookupMultiSelectExampleComponent, LookupResultTemplatesExampleComponent, LookupSearchBasicExampleComponent, LookupSelectionModalAddItemExampleComponent, LookupSelectionModalBasicExampleComponent, LookupSingleSelectExampleComponent, ModalsConfirmBasicWithControllerExampleComponent, ModalsConfirmBasicWithHarnessExampleComponent, ModalsModalBasicWithBannerExampleComponent, ModalsModalBasicWithControllerExampleComponent, ModalsModalBasicWithHarnessExampleComponent, ModalsModalBasicWithHarnessHelpKeyExampleComponent, ModalsModalWithErrorExampleComponent, NavbarExampleComponent, PagesActionHubExampleComponent, PagesPageDataManagerSplitViewFitLayoutExampleComponent, PagesPageHomePageBlocksLayoutExampleComponent, PagesPageListPageListLayoutExampleComponent, PagesPageListPageTabsLayoutExampleComponent, PagesPageRecordPageBlocksLayoutExampleComponent, PagesPageRecordPageTabsLayoutExampleComponent, PagesPageSplitViewPageFitLayoutExampleComponent, PhoneFieldBasicExampleComponent, PopoversDropdownBasicExampleComponent, PopoversPopoverBasicExampleComponent, PopoversPopoverProgrammaticExampleComponent, ProgressIndicatorPassiveIndicatorBasicExampleComponent, ProgressIndicatorWaterfallIndicatorBasicExampleComponent, ProgressIndicatorWizardBasicExampleComponent, RouterHrefBasicExampleComponent, SplitViewBasicExampleComponent, SplitViewPageBoundExampleComponent, TabsDynamicAddCloseExampleComponent, TabsDynamicExampleComponent, TabsSectionedFormModalExampleComponent, TabsStaticAddCloseExampleComponent, TabsStaticExampleComponent, TabsVerticalTabsBasicExampleComponent, TabsVerticalTabsGroupedExampleComponent, TabsVerticalTabsMixedExampleComponent, TabsWizardBasicExampleComponent, TextEditorExampleComponent, TextEditorHelpKeyExampleComponent, TextEditorRichTextDisplayExampleComponent, TilesBasicExampleComponent, ToastBasicExampleComponent, ToastCustomComponentExampleComponent, ValidationEmailValidationControlValidatorExampleComponent, ValidationEmailValidationDirectiveExampleComponent, ValidationUrlValidationControlValidatorExampleComponent, ValidationUrlValidationDirectiveExampleComponent };
 //# sourceMappingURL=skyux-code-examples.mjs.map