@skyux/code-examples 13.7.1 → 13.7.2

package/fesm2022/skyux-code-examples.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, inject, ChangeDetectionStrategy, Input, ChangeDetectorRef, ViewChild, Injectable, signal, model, InjectionToken } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy, Input, ChangeDetectorRef, ViewChild, Injectable, signal, InjectionToken } from '@angular/core';
 import * as i2 from '@skyux/action-bars';
 import { SkySummaryActionBarModule } from '@skyux/action-bars';
 import * as i1 from '@skyux/indicators';
@@ -7,7 +7,7 @@ import { SkyKeyInfoModule, SkyStatusIndicatorModule, SkyAlertModule, SkyIllustra
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/forms';
 import { FormControl, FormBuilder, ReactiveFormsModule, FormsModule, Validators, FormGroup } from '@angular/forms';
-import { switchMap, of, Subject, takeUntil, Subscription, delay as delay$1, fromEvent, tap, shareReplay, map as map$1 } from 'rxjs';
+import { switchMap, of, Subject, takeUntil, map, Subscription, delay as delay$1, fromEvent, tap, shareReplay } from 'rxjs';
 import * as i3 from '@skyux/modals';
 import { SkyModalInstance, SkyModalModule, SkyModalService, SkyConfirmService, SkyConfirmType } from '@skyux/modals';
 import * as i1$2 from '@skyux/tabs';
@@ -24,18 +24,16 @@ import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
 import * as i1$3 from '@skyux/popovers';
 import { SkyDropdownModule, SkyPopoverModule, SkyPopoverMessageType } from '@skyux/popovers';
 import * as i1$6 from '@skyux/data-manager';
-import { SkyDataManagerFilterModalContext, SkyDataManagerState, SkyDataManagerService, SkyDataManagerModule } from '@skyux/data-manager';
-import * as i3$1 from '@skyux/core';
-import { SkyIdModule, SkyMediaQueryService, SkyResponsiveHostDirective, SkyNumericModule, SkyUIConfigService, SkyHelpService } from '@skyux/core';
-import * as i2$3 from '@skyux/forms';
-import { SkyCheckboxModule, SkyInputBoxModule, SkyRadioModule, SkyCharacterCounterModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileDropModule, SkySelectionBoxModule, SkyToggleSwitchModule, SkyFormErrorModule } from '@skyux/forms';
-import * as i1$7 from '@skyux/help-inline';
-import { SkyHelpInlineModule } from '@skyux/help-inline';
+import { SkyDataManagerState, SkyDataManagerService, SkyDataManagerModule } from '@skyux/data-manager';
 import * as i2$4 from '@skyux/filter-bar';
 import { SkyFilterItemModalInstance, SkyFilterBarModule } from '@skyux/filter-bar';
 import * as i2$5 from '@skyux/lists';
 import { SkyListSummaryModule, SkyPagingModule, SkyRepeaterModule, SkyInfiniteScrollModule, SkyFilterModule, SkySortModule } from '@skyux/lists';
-import { delay, map, filter, takeUntil as takeUntil$1, take } from 'rxjs/operators';
+import { delay, map as map$1, filter, takeUntil as takeUntil$1, take } from 'rxjs/operators';
+import * as i2$3 from '@skyux/forms';
+import { SkyCheckboxModule, SkyInputBoxModule, SkyFormErrorModule, SkyRadioModule, SkyCharacterCounterModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileDropModule, SkySelectionBoxModule, SkyToggleSwitchModule } from '@skyux/forms';
+import * as i1$7 from '@skyux/help-inline';
+import { SkyHelpInlineModule } from '@skyux/help-inline';
 import * as i1$c from '@angular/router';
 import { ActivatedRoute, Router, NavigationEnd, RouterModule } from '@angular/router';
 import * as i2$6 from '@blackbaud/angular-tree-component';
@@ -48,6 +46,8 @@ import * as i1$9 from '@skyux/avatar';
 import { SkyAvatarModule } from '@skyux/avatar';
 import * as i2$8 from '@skyux/colorpicker';
 import { SkyColorpickerModule, SkyColorpickerMessageType } from '@skyux/colorpicker';
+import * as i3$1 from '@skyux/core';
+import { SkyIdModule, SkyMediaQueryService, SkyResponsiveHostDirective, SkyNumericModule, SkyUIConfigService, SkyHelpService } from '@skyux/core';
 import * as i1$a from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
 import * as i4 from '@angular/common';
@@ -192,7 +192,7 @@ class ActionBarsSummaryActionBarModalExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ActionBarsSummaryActionBarModalExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-action-bars-summary-action-bar-modal-example', template: "<button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"openModal()\">\n  Open modal\n</button>\n" }]
+            args: [{ selector: 'app-action-bars-summary-action-bar-modal-example', template: "<button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"openModal()\">\n  Open modal\n</button>\n" }]
         }] });
 
 /**
@@ -414,7 +414,7 @@ class MarkInactiveComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MarkInactiveComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-mark-inactive', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  class=\"sky-btn sky-btn-link-inline\"\n  [attr.aria-label]=\"markInactiveAriaLabel\"\n  (click)=\"markInactive()\"\n>\n  Mark inactive\n</button>\n" }]
+            args: [{ selector: 'app-mark-inactive', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  class=\"sky-btn sky-btn-link-inline\"\n  [attr.aria-label]=\"markInactiveAriaLabel\"\n  (click)=\"markInactive()\"\n>\n  Mark inactive\n</button>\n" }]
         }], propDecorators: { name: [{
                 type: Input
             }] } });
@@ -1054,47 +1054,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             args: [{ selector: 'app-edit-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AgGridModule, SkyAgGridModule, SkyModalModule], 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" }]
         }], ctorParameters: () => [] });
 
-let FilterModalComponent$2 = class FilterModalComponent {
-    #changeDetector;
+let ExampleService$6 = class ExampleService {
+    #jobs = Object.values(JOB_TITLES$9).flat();
+    search(searchText) {
+        searchText = searchText.toUpperCase();
+        const matchingJobs = this.#jobs.filter((job) => job.name?.toUpperCase().includes(searchText));
+        // Simulate a network call with latency. A real-world application might
+        // use Angular's HttpClient to create an Observable from a call to a
+        // web service.
+        return of({
+            hasMore: false,
+            items: matchingJobs,
+            totalCount: matchingJobs.length,
+        }).pipe(delay(800));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService, providedIn: 'root' }); }
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService$6, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+let SalesModalComponent$2 = class SalesModalComponent {
+    #changeDetectorRef;
     #context;
-    #instance;
     constructor() {
+        this.modalInstance = inject(SkyFilterItemModalInstance);
         this.hideSales = false;
-        this.jobTitle = '';
-        this.#changeDetector = inject(ChangeDetectorRef);
-        this.#context = inject(SkyDataManagerFilterModalContext);
-        this.#instance = inject(SkyModalInstance);
-        if (this.#context.filterData?.filters) {
-            const filters = this.#context.filterData.filters;
-            this.jobTitle = filters.jobTitle ?? 'any';
-            this.hideSales = filters.hideSales ?? false;
+        this.#changeDetectorRef = inject(ChangeDetectorRef);
+        this.#context = this.modalInstance.context;
+        this.modalLabel = this.#context.filterLabelText;
+        if (this.#context.filterValue) {
+            this.hideSales = !!this.#context.filterValue.value;
         }
-        this.#changeDetector.markForCheck();
+        this.#changeDetectorRef.markForCheck();
     }
     applyFilters() {
-        const result = {};
-        result.filtersApplied = this.jobTitle !== 'any' || this.hideSales;
-        result.filters = {
-            jobTitle: this.jobTitle,
-            hideSales: this.hideSales,
-        };
-        this.#changeDetector.markForCheck();
-        this.#instance.save(result);
-    }
-    clearAllFilters() {
-        this.hideSales = false;
-        this.jobTitle = 'any';
-        this.#changeDetector.markForCheck();
+        let result;
+        if (this.hideSales) {
+            result = {
+                value: true,
+                displayValue: 'True',
+            };
+        }
+        this.modalInstance.save({ filterValue: result });
     }
     cancel() {
-        this.#instance.cancel();
+        this.modalInstance.cancel();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: FilterModalComponent, isStandalone: true, selector: "app-filter-modal", ngImport: i0, template: "<sky-modal headingText=\"Filter employees\">\n  <sky-modal-content>\n    <label [for]=\"jobTitleInput.id\">Job Title</label>\n    <select\n      #jobTitleInput\n      class=\"sky-form-control\"\n      skyId=\"jobTitleInput\"\n      [(ngModel)]=\"jobTitle\"\n    >\n      <option value=\"any\">Any job title</option>\n      <option value=\"Product Manager\">Product Manager</option>\n      <option value=\"Software Engineer\">Software Engineer</option>\n    </select>\n    <div class=\"sky-margin-stacked-lg\">\n      <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n    </div>\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 filters\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"clearAllFilters()\"\n    >\n      Clear all filters\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$3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SalesModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.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$3.λ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 }); }
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterModalComponent$2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SalesModalComponent$2, decorators: [{
             type: Component,
-            args: [{ selector: 'app-filter-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, SkyCheckboxModule, SkyIdModule, SkyModalModule], template: "<sky-modal headingText=\"Filter employees\">\n  <sky-modal-content>\n    <label [for]=\"jobTitleInput.id\">Job Title</label>\n    <select\n      #jobTitleInput\n      class=\"sky-form-control\"\n      skyId=\"jobTitleInput\"\n      [(ngModel)]=\"jobTitle\"\n    >\n      <option value=\"any\">Any job title</option>\n      <option value=\"Product Manager\">Product Manager</option>\n      <option value=\"Software Engineer\">Software Engineer</option>\n    </select>\n    <div class=\"sky-margin-stacked-lg\">\n      <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n    </div>\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 filters\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"clearAllFilters()\"\n    >\n      Clear all filters\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" }]
+            args: [{ selector: 'app-sales-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, SkyCheckboxModule, SkyModalModule], 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" }]
         }], ctorParameters: () => [] });
 
 let ContextMenuComponent$8 = class ContextMenuComponent {
@@ -1224,9 +1240,7 @@ let ViewGridComponent$3 = class ViewGridComponent {
             name: 'Data Grid View',
             iconName: 'table',
             searchEnabled: true,
-            multiselectToolbarEnabled: true,
             columnPickerEnabled: true,
-            filterButtonEnabled: true,
             columnOptions: [
                 {
                     id: 'selected',
@@ -1338,16 +1352,23 @@ let ViewGridComponent$3 = class ViewGridComponent {
     }
     #filterItems(items) {
         let filteredItems = items;
-        const filterData = this.#dataState.filterData;
-        if (filterData?.filters) {
-            const filters = filterData.filters;
+        const filterState = this.#dataState.filterData?.filters;
+        if (filterState?.appliedFilters) {
+            const filters = filterState.appliedFilters;
+            const hideSales = filters.some((filter) => filter.filterId === 'hideSales' && !!filter.filterValue?.value);
+            const jobTitleFilter = filters.find((f) => f.filterId === 'jobTitle');
+            const selectedTypes = Array.isArray(jobTitleFilter?.filterValue?.value)
+                ? jobTitleFilter.filterValue.value.map((v) => v.id)
+                : [];
             filteredItems = items.filter((item) => {
-                return ((!!(filters.hideSales && item.department.name !== 'Sales') ||
-                    !filters.hideSales) &&
-                    ((filters.jobTitle !== 'any' &&
-                        item.jobTitle?.name === filters.jobTitle) ||
-                        !filters.jobTitle ||
-                        filters.jobTitle === 'any'));
+                if (hideSales && item.department.name === 'Sales') {
+                    return false;
+                }
+                if (selectedTypes.length &&
+                    (!item.jobTitle || !selectedTypes.includes(item.jobTitle.id))) {
+                    return false;
+                }
+                return true;
             });
         }
         return filteredItems;
@@ -1404,6 +1425,10 @@ let ViewGridComponent$3 = class ViewGridComponent {
         else {
             this.#gridApi?.showNoRowsOverlay();
         }
+        this.#dataManagerSvc.updateDataSummary({
+            totalItems: this.items.length,
+            itemsMatching: this.displayedItems.length,
+        }, this.#viewId);
         this.#changeDetectorRef.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ViewGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -1416,6 +1441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }] } });
 
+const SOURCE_ID$3 = 'data_entry_grid_data_manager_example_id';
 /**
  * @title Data manager setup
  */
@@ -1426,16 +1452,16 @@ class AgGridDataEntryGridDataManagerAddedExampleComponent {
     #ngUnsubscribe;
     #changeDetectorRef;
     #dataManagerSvc;
+    #exampleSvc;
     #modalSvc;
     constructor() {
         this.items = AG_GRID_DEMO_DATA$a;
+        this.salesModal = SalesModalComponent$2;
         this.#activeViewId = 'dataEntryGridWithDataManagerView';
         this.#defaultDataState = new SkyDataManagerState({
             filterData: {
                 filtersApplied: false,
-                filters: {
-                    hideSales: false,
-                },
+                filters: {},
             },
             views: [
                 {
@@ -1456,7 +1482,6 @@ class AgGridDataEntryGridDataManagerAddedExampleComponent {
             ],
         });
         this.#dataManagerConfig = {
-            filterModalComponent: FilterModalComponent$2,
             sortOptions: [
                 {
                     id: 'az',
@@ -1475,7 +1500,11 @@ class AgGridDataEntryGridDataManagerAddedExampleComponent {
         this.#ngUnsubscribe = new Subject();
         this.#changeDetectorRef = inject(ChangeDetectorRef);
         this.#dataManagerSvc = inject(SkyDataManagerService);
+        this.#exampleSvc = inject(ExampleService$6);
         this.#modalSvc = inject(SkyModalService);
+        this.recordCount = toSignal(this.#dataManagerSvc
+            .getDataSummaryUpdates(SOURCE_ID$3)
+            .pipe(map((summary) => summary.itemsMatching)), { initialValue: 0 });
         this.#dataManagerSvc
             .getActiveViewIdUpdates()
             .pipe(takeUntil(this.#ngUnsubscribe))
@@ -1521,12 +1550,24 @@ class AgGridDataEntryGridDataManagerAddedExampleComponent {
             this.#changeDetectorRef.markForCheck();
         });
     }
+    onJobTitleSearchAsync(args) {
+        // In a real-world application the search service might return an Observable
+        // created by calling HttpClient.get(). Assigning that Observable to the result
+        // allows the lookup component to cancel the web request if it does not complete
+        // before the user searches again.
+        args.result = this.#exampleSvc.search(args.searchText);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AgGridDataEntryGridDataManagerAddedExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AgGridDataEntryGridDataManagerAddedExampleComponent, isStandalone: true, selector: "app-ag-grid-data-entry-grid-data-manager-added-example", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-data-manager-toolbar-left-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        type=\"button\"\n        (click)=\"openModal()\"\n      >\n        Edit\n      </button>\n    </sky-data-manager-toolbar-left-item>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "component", type: ViewGridComponent$3, selector: "app-view-grid", inputs: ["items"] }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i1$6.λ3, selector: "sky-data-manager-toolbar-left-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AgGridDataEntryGridDataManagerAddedExampleComponent, isStandalone: true, selector: "app-ag-grid-data-entry-grid-data-manager-added-example", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-data-manager-toolbar-left-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        type=\"button\"\n        (click)=\"openModal()\"\n      >\n        Edit\n      </button>\n    </sky-data-manager-toolbar-left-item>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item\n        [labelText]=\"recordCount() === 1 ? 'Record' : 'Records'\"\n        [value]=\"recordCount()\"\n      />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "component", type: ViewGridComponent$3, selector: "app-view-grid", inputs: ["items"] }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "directive", type: i1$6.λ9, selector: "[skyDataManagerFilterController]" }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i1$6.λ3, selector: "sky-data-manager-toolbar-left-item" }, { 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"] }, { kind: "component", type: i2$4.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i2$5.λ16, selector: "sky-list-summary" }, { kind: "component", type: i2$5.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AgGridDataEntryGridDataManagerAddedExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ag-grid-data-entry-grid-data-manager-added-example', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SkyDataManagerService], imports: [ViewGridComponent$3, SkyDataManagerModule], template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-data-manager-toolbar-left-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        type=\"button\"\n        (click)=\"openModal()\"\n      >\n        Edit\n      </button>\n    </sky-data-manager-toolbar-left-item>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n" }]
+            args: [{ selector: 'app-ag-grid-data-entry-grid-data-manager-added-example', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SkyDataManagerService], imports: [
+                        ViewGridComponent$3,
+                        SkyDataManagerModule,
+                        SkyFilterBarModule,
+                        SkyListSummaryModule,
+                    ], template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-data-manager-toolbar-left-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        type=\"button\"\n        (click)=\"openModal()\"\n      >\n        Edit\n      </button>\n    </sky-data-manager-toolbar-left-item>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item\n        [labelText]=\"recordCount() === 1 ? 'Record' : 'Records'\"\n        [value]=\"recordCount()\"\n      />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n" }]
         }], ctorParameters: () => [] });
 
 const DEPARTMENTS$8 = [
@@ -3000,11 +3041,11 @@ let SalesModalComponent$1 = class SalesModalComponent {
         this.modalInstance.cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SalesModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SalesModalComponent, isStandalone: true, selector: "app-sales-modal", ngImport: i0, template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <div class=\"sky-margin-stacked-lg\">\n      <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n    </div>\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$3.λ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: "20.3.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$3.λ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 }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SalesModalComponent$1, decorators: [{
             type: Component,
-            args: [{ selector: 'app-sales-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, SkyCheckboxModule, SkyModalModule], template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <div class=\"sky-margin-stacked-lg\">\n      <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n    </div>\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" }]
+            args: [{ selector: 'app-sales-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, SkyCheckboxModule, SkyModalModule], 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" }]
         }], ctorParameters: () => [] });
 
 let ContextMenuComponent$4 = class ContextMenuComponent {
@@ -3154,7 +3195,6 @@ let ViewGridComponent$2 = class ViewGridComponent {
             name: 'Data Grid View',
             iconName: 'table',
             searchEnabled: true,
-            multiselectToolbarEnabled: true,
             columnPickerEnabled: true,
             columnOptions: this.#columnPickerOptions,
         };
@@ -3307,8 +3347,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }] } });
 
+const SOURCE_ID$2 = 'data_grid_data_manager_multiselect_example_id';
 /**
- * @title Data manager setup
+ * @title Data manager setup with multiselect
  */
 class AgGridDataGridDataManagerMultiselectExampleComponent {
     #activeViewId;
@@ -3321,7 +3362,7 @@ class AgGridDataGridDataManagerMultiselectExampleComponent {
     constructor() {
         this.items = AG_GRID_DEMO_DATA$5;
         this.salesModal = SalesModalComponent$1;
-        this.#activeViewId = 'dataGridWithDataManagerView';
+        this.#activeViewId = 'dataGridMultiselectWithDataManagerView';
         this.#dataManagerConfig = {
             sortOptions: [
                 {
@@ -3344,8 +3385,9 @@ class AgGridDataGridDataManagerMultiselectExampleComponent {
             },
             views: [
                 {
-                    viewId: 'dataGridWithDataManagerView',
+                    viewId: 'dataGridMultiselectWithDataManagerView',
                     displayedColumnIds: [
+                        'selected',
                         'context',
                         'name',
                         'age',
@@ -3361,6 +3403,9 @@ class AgGridDataGridDataManagerMultiselectExampleComponent {
         this.#changeDetectorRef = inject(ChangeDetectorRef);
         this.#dataManagerSvc = inject(SkyDataManagerService);
         this.#exampleSvc = inject(ExampleService$5);
+        this.recordCount = toSignal(this.#dataManagerSvc
+            .getDataSummaryUpdates(SOURCE_ID$2)
+            .pipe(map((summary) => summary.itemsMatching)), { initialValue: 0 });
         this.#dataManagerSvc
             .getActiveViewIdUpdates()
             .pipe(takeUntil(this.#ngUnsubscribe))
@@ -3388,7 +3433,7 @@ class AgGridDataGridDataManagerMultiselectExampleComponent {
         args.result = this.#exampleSvc.search(args.searchText);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AgGridDataGridDataManagerMultiselectExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AgGridDataGridDataManagerMultiselectExampleComponent, isStandalone: true, selector: "app-ag-grid-data-grid-data-manager-example", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item labelText=\"Records\" [value]=\"items.length\" />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "directive", type: i1$6.λ9, selector: "[skyDataManagerFilterController]" }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { 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"] }, { kind: "component", type: i2$4.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i2$5.λ16, selector: "sky-list-summary" }, { kind: "component", type: i2$5.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: ViewGridComponent$2, selector: "app-view-grid", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AgGridDataGridDataManagerMultiselectExampleComponent, isStandalone: true, selector: "app-ag-grid-data-grid-data-manager-example", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item\n        [labelText]=\"recordCount() === 1 ? 'Record' : 'Records'\"\n        [value]=\"recordCount()\"\n      />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "directive", type: i1$6.λ9, selector: "[skyDataManagerFilterController]" }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { 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"] }, { kind: "component", type: i2$4.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i2$5.λ16, selector: "sky-list-summary" }, { kind: "component", type: i2$5.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: ViewGridComponent$2, selector: "app-view-grid", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AgGridDataGridDataManagerMultiselectExampleComponent, decorators: [{
             type: Component,
@@ -3397,7 +3442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         SkyFilterBarModule,
                         SkyListSummaryModule,
                         ViewGridComponent$2,
-                    ], template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item labelText=\"Records\" [value]=\"items.length\" />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n" }]
+                    ], template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item\n        [labelText]=\"recordCount() === 1 ? 'Record' : 'Records'\"\n        [value]=\"recordCount()\"\n      />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n" }]
         }], ctorParameters: () => [] });
 
 const DEPARTMENTS$3 = [
@@ -3586,11 +3631,11 @@ class SalesModalComponent {
         this.modalInstance.cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SalesModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SalesModalComponent, isStandalone: true, selector: "app-sales-modal", ngImport: i0, template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <div class=\"sky-margin-stacked-lg\">\n      <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n    </div>\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$3.λ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: "20.3.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$3.λ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SalesModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-sales-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, SkyCheckboxModule, SkyModalModule], template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <div class=\"sky-margin-stacked-lg\">\n      <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n    </div>\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" }]
+            args: [{ selector: 'app-sales-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, SkyCheckboxModule, SkyModalModule], 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" }]
         }], ctorParameters: () => [] });
 
 let ContextMenuComponent$3 = class ContextMenuComponent {
@@ -3869,6 +3914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }] } });
 
+const SOURCE_ID$1 = 'data_grid_data_manager_example_id';
 /**
  * @title Data manager setup
  */
@@ -3923,6 +3969,9 @@ class AgGridDataGridDataManagerExampleComponent {
         this.#changeDetectorRef = inject(ChangeDetectorRef);
         this.#dataManagerSvc = inject(SkyDataManagerService);
         this.#exampleSvc = inject(ExampleService$4);
+        this.recordCount = toSignal(this.#dataManagerSvc
+            .getDataSummaryUpdates(SOURCE_ID$1)
+            .pipe(map((summary) => summary.itemsMatching)), { initialValue: 0 });
         this.#dataManagerSvc
             .getActiveViewIdUpdates()
             .pipe(takeUntil(this.#ngUnsubscribe))
@@ -3950,7 +3999,7 @@ class AgGridDataGridDataManagerExampleComponent {
         args.result = this.#exampleSvc.search(args.searchText);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AgGridDataGridDataManagerExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AgGridDataGridDataManagerExampleComponent, isStandalone: true, selector: "app-ag-grid-data-grid-data-manager-example", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item labelText=\"Records\" [value]=\"items.length\" />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "directive", type: i1$6.λ9, selector: "[skyDataManagerFilterController]" }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { 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"] }, { kind: "component", type: i2$4.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i2$5.λ16, selector: "sky-list-summary" }, { kind: "component", type: i2$5.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: ViewGridComponent$1, selector: "app-view-grid", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AgGridDataGridDataManagerExampleComponent, isStandalone: true, selector: "app-ag-grid-data-grid-data-manager-example", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item\n        [labelText]=\"recordCount() === 1 ? 'Record' : 'Records'\"\n        [value]=\"recordCount()\"\n      />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "directive", type: i1$6.λ9, selector: "[skyDataManagerFilterController]" }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { 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"] }, { kind: "component", type: i2$4.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i2$5.λ16, selector: "sky-list-summary" }, { kind: "component", type: i2$5.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: ViewGridComponent$1, selector: "app-view-grid", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AgGridDataGridDataManagerExampleComponent, decorators: [{
             type: Component,
@@ -3959,7 +4008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         SkyFilterBarModule,
                         SkyListSummaryModule,
                         ViewGridComponent$1,
-                    ], template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item labelText=\"Records\" [value]=\"items.length\" />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n" }]
+                    ], template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item\n        [labelText]=\"recordCount() === 1 ? 'Record' : 'Records'\"\n        [value]=\"recordCount()\"\n      />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n" }]
         }], ctorParameters: () => [] });
 
 let ContextMenuComponent$2 = class ContextMenuComponent {
@@ -4507,7 +4556,7 @@ class AgGridDataGridPagingExampleComponent {
     }
     ngOnInit() {
         this.#subscriptions.add(this.#activatedRoute.queryParamMap
-            .pipe(map((params) => params.get('page') ?? '1'))
+            .pipe(map$1((params) => params.get('page') ?? '1'))
             .subscribe((page) => {
             this.currentPage = Number(page);
             this.#gridApi?.paginationGoToPage(this.currentPage - 1);
@@ -5300,11 +5349,11 @@ class ColorpickerBasicExampleComponent {
         alert('Your favorite color is: \n' + favoriteColor);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColorpickerBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ColorpickerBasicExampleComponent, isStandalone: true, selector: "app-colorpicker-basic-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n  <sky-colorpicker\n    #colorPicker\n    data-sky-id=\"favorite-color\"\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [stacked]=\"true\"\n    (selectedColorChanged)=\"onSelectedColorChanged($event)\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [presetColors]=\"swatches\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n\n  <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Submit</button>\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],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: SkyColorpickerModule }, { kind: "component", type: i2$8.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$8.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ColorpickerBasicExampleComponent, isStandalone: true, selector: "app-colorpicker-basic-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n  <sky-colorpicker\n    #colorPicker\n    data-sky-id=\"favorite-color\"\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [stacked]=\"true\"\n    (selectedColorChanged)=\"onSelectedColorChanged($event)\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [presetColors]=\"swatches\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n\n  <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Submit</button>\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],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: SkyColorpickerModule }, { kind: "component", type: i2$8.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$8.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "ngmodule", type: SkyFormErrorModule }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColorpickerBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-colorpicker-basic-example', imports: [ReactiveFormsModule, SkyColorpickerModule], template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n  <sky-colorpicker\n    #colorPicker\n    data-sky-id=\"favorite-color\"\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [stacked]=\"true\"\n    (selectedColorChanged)=\"onSelectedColorChanged($event)\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [presetColors]=\"swatches\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n\n  <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Submit</button>\n</form>\n" }]
+            args: [{ selector: 'app-colorpicker-basic-example', imports: [ReactiveFormsModule, SkyColorpickerModule, SkyFormErrorModule], template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n  <sky-colorpicker\n    #colorPicker\n    data-sky-id=\"favorite-color\"\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [stacked]=\"true\"\n    (selectedColorChanged)=\"onSelectedColorChanged($event)\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [presetColors]=\"swatches\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n\n  <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Submit</button>\n</form>\n" }]
         }], ctorParameters: () => [] });
 
 function isColorpickerOutput$1(value) {
@@ -5349,11 +5398,11 @@ class ColorpickerHelpKeyExampleComponent {
         alert('Your favorite color is: \n' + favoriteColor);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColorpickerHelpKeyExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ColorpickerHelpKeyExampleComponent, isStandalone: true, selector: "app-colorpicker-help-key-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n  <sky-colorpicker\n    #colorPicker\n    data-sky-id=\"favorite-color\"\n    labelText=\"What is your favorite color?\"\n    helpKey=\"color-help\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [stacked]=\"true\"\n    (selectedColorChanged)=\"onSelectedColorChanged($event)\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [presetColors]=\"swatches\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n\n  <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Submit</button>\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],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: SkyColorpickerModule }, { kind: "component", type: i2$8.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$8.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ColorpickerHelpKeyExampleComponent, isStandalone: true, selector: "app-colorpicker-help-key-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n  <sky-colorpicker\n    #colorPicker\n    data-sky-id=\"favorite-color\"\n    labelText=\"What is your favorite color?\"\n    helpKey=\"color-help\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [stacked]=\"true\"\n    (selectedColorChanged)=\"onSelectedColorChanged($event)\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [presetColors]=\"swatches\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n\n  <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Submit</button>\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],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: SkyColorpickerModule }, { kind: "component", type: i2$8.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$8.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "ngmodule", type: SkyFormErrorModule }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColorpickerHelpKeyExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-colorpicker-help-key-example', imports: [ReactiveFormsModule, SkyColorpickerModule], template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n  <sky-colorpicker\n    #colorPicker\n    data-sky-id=\"favorite-color\"\n    labelText=\"What is your favorite color?\"\n    helpKey=\"color-help\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [stacked]=\"true\"\n    (selectedColorChanged)=\"onSelectedColorChanged($event)\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [presetColors]=\"swatches\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n\n  <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Submit</button>\n</form>\n" }]
+            args: [{ selector: 'app-colorpicker-help-key-example', imports: [ReactiveFormsModule, SkyColorpickerModule, SkyFormErrorModule], template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n  <sky-colorpicker\n    #colorPicker\n    data-sky-id=\"favorite-color\"\n    labelText=\"What is your favorite color?\"\n    helpKey=\"color-help\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [stacked]=\"true\"\n    (selectedColorChanged)=\"onSelectedColorChanged($event)\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [presetColors]=\"swatches\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n\n  <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Submit</button>\n</form>\n" }]
         }], ctorParameters: () => [] });
 
 function isColorpickerOutput(value) {
@@ -5394,11 +5443,16 @@ class ColorpickerProgrammaticExampleComponent {
         this.colorpickerController.next({ type });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColorpickerProgrammaticExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ColorpickerProgrammaticExampleComponent, isStandalone: true, selector: "app-colorpicker-programmatic-example", ngImport: i0, template: "<form class=\"sky-margin-stacked-xxl\" [formGroup]=\"formGroup\">\n  <sky-colorpicker\n    #colorPicker\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [messageStream]=\"colorpickerController\"\n    [showResetButton]=\"showResetButton\"\n    [stacked]=\"true\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n</form>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openColorpicker()\"\n>\n  Open colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"resetColorpicker()\"\n>\n  Reset colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"toggleResetButton()\"\n>\n  Toggle reset button\n</button>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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$8.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$8.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ColorpickerProgrammaticExampleComponent, isStandalone: true, selector: "app-colorpicker-programmatic-example", ngImport: i0, template: "<form class=\"sky-margin-stacked-xxl\" [formGroup]=\"formGroup\">\n  <sky-colorpicker\n    #colorPicker\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [messageStream]=\"colorpickerController\"\n    [showResetButton]=\"showResetButton\"\n    [stacked]=\"true\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n</form>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openColorpicker()\"\n>\n  Open colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"resetColorpicker()\"\n>\n  Reset colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"toggleResetButton()\"\n>\n  Toggle reset button\n</button>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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$8.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$8.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "ngmodule", type: SkyFormErrorModule }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColorpickerProgrammaticExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-colorpicker-programmatic-example', imports: [FormsModule, ReactiveFormsModule, SkyColorpickerModule], template: "<form class=\"sky-margin-stacked-xxl\" [formGroup]=\"formGroup\">\n  <sky-colorpicker\n    #colorPicker\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [messageStream]=\"colorpickerController\"\n    [showResetButton]=\"showResetButton\"\n    [stacked]=\"true\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n</form>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openColorpicker()\"\n>\n  Open colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"resetColorpicker()\"\n>\n  Reset colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"toggleResetButton()\"\n>\n  Toggle reset button\n</button>\n" }]
+            args: [{ selector: 'app-colorpicker-programmatic-example', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SkyColorpickerModule,
+                        SkyFormErrorModule,
+                    ], template: "<form class=\"sky-margin-stacked-xxl\" [formGroup]=\"formGroup\">\n  <sky-colorpicker\n    #colorPicker\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [messageStream]=\"colorpickerController\"\n    [showResetButton]=\"showResetButton\"\n    [stacked]=\"true\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n</form>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openColorpicker()\"\n>\n  Open colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"resetColorpicker()\"\n>\n  Reset colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"toggleResetButton()\"\n>\n  Toggle reset button\n</button>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -5439,7 +5493,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             type: Component,
             args: [{
                     selector: 'app-child',
-                    standalone: true,
                     template: `<p>Breakpoint for child: {{ breakpoint() }}</p>`,
                 }]
         }] });
@@ -5456,7 +5509,7 @@ class DemoContainerComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DemoContainerComponent, decorators: [{
             type: Component,
-            args: [{ hostDirectives: [SkyResponsiveHostDirective], selector: 'app-container', standalone: true, template: `
+            args: [{ hostDirectives: [SkyResponsiveHostDirective], selector: 'app-container', template: `
     <p>Breakpoint within container: {{ breakpoint() }}</p>
     <ng-content />
   `, styles: [":host{border:1px solid var(--sky-border-color-neutral-medium-dark);display:block;margin:0 auto;max-width:800px}\n"] }]
@@ -5608,7 +5661,7 @@ class OrangeModalComponent {
         this.modalInstance.cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: OrangeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.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\" [(ngModel)]=\"hideOrange\" />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\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: ReactiveFormsModule }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$3.λ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: "20.3.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\" [(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 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: ReactiveFormsModule }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$3.λ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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: OrangeModalComponent, decorators: [{
             type: Component,
@@ -5617,7 +5670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         ReactiveFormsModule,
                         SkyCheckboxModule,
                         SkyModalModule,
-                    ], template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\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 sky-margin-inline-sm\"\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" }]
+                    ], template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\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 class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n" }]
         }], ctorParameters: () => [] });
 
 ModuleRegistry.registerModules([AllCommunityModule]);
@@ -5671,7 +5724,6 @@ class ViewGridComponent {
             name: 'Grid View',
             iconName: 'table',
             searchEnabled: true,
-            multiselectToolbarEnabled: true,
             columnPickerEnabled: true,
             columnOptions: [
                 {
@@ -6026,6 +6078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }] } });
 
+const SOURCE_ID = 'data_manager_example_id';
 /**
  * @title Data manager with basic setup
  */
@@ -6037,6 +6090,9 @@ class DataManagerBasicExampleComponent {
         this.orangeModalComponent = OrangeModalComponent;
         this.#dataManagerSvc = inject(SkyDataManagerService);
         this.#exampleSvc = inject(ExampleService$3);
+        this.recordCount = toSignal(this.#dataManagerSvc
+            .getDataSummaryUpdates(SOURCE_ID)
+            .pipe(map((summary) => summary.itemsMatching)), { initialValue: 0 });
         this.#dataManagerSvc.initDataManager({
             activeViewId: 'repeaterView',
             dataManagerConfig: {
@@ -6087,7 +6143,7 @@ class DataManagerBasicExampleComponent {
         args.result = this.#exampleSvc.search(args.searchText);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DataManagerBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DataManagerBasicExampleComponent, isStandalone: true, selector: "app-data-manager-basic-example", providers: [SkyDataManagerService, SkyUIConfigService], ngImport: i0, template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-lookup\n        filterId=\"fruitType\"\n        labelText=\"Fruit type\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onFruitTypeSearchAsync($event)\"\n      />\n      <sky-filter-item-modal\n        filterId=\"hideOrange\"\n        labelText=\"Hide orange\"\n        modalSize=\"small\"\n        [modalComponent]=\"orangeModalComponent\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item labelText=\"Records\" [value]=\"items.length\" />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-repeater [items]=\"items\" />\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "directive", type: i1$6.λ9, selector: "[skyDataManagerFilterController]" }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { 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"] }, { kind: "component", type: i2$4.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i2$5.λ16, selector: "sky-list-summary" }, { kind: "component", type: i2$5.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: ViewGridComponent, selector: "app-view-grid", inputs: ["items"] }, { kind: "component", type: ViewRepeaterComponent, selector: "app-view-repeater", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DataManagerBasicExampleComponent, isStandalone: true, selector: "app-data-manager-basic-example", providers: [SkyDataManagerService, SkyUIConfigService], ngImport: i0, template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-lookup\n        filterId=\"fruitType\"\n        labelText=\"Fruit type\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onFruitTypeSearchAsync($event)\"\n      />\n      <sky-filter-item-modal\n        filterId=\"hideOrange\"\n        labelText=\"Hide orange\"\n        modalSize=\"small\"\n        [modalComponent]=\"orangeModalComponent\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item\n        [labelText]=\"recordCount() === 1 ? 'Record' : 'Records'\"\n        [value]=\"recordCount()\"\n      />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-repeater [items]=\"items\" />\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "directive", type: i1$6.λ9, selector: "[skyDataManagerFilterController]" }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { 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"] }, { kind: "component", type: i2$4.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i2$5.λ16, selector: "sky-list-summary" }, { kind: "component", type: i2$5.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: ViewGridComponent, selector: "app-view-grid", inputs: ["items"] }, { kind: "component", type: ViewRepeaterComponent, selector: "app-view-repeater", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DataManagerBasicExampleComponent, decorators: [{
             type: Component,
@@ -6097,7 +6153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         SkyListSummaryModule,
                         ViewGridComponent,
                         ViewRepeaterComponent,
-                    ], template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-lookup\n        filterId=\"fruitType\"\n        labelText=\"Fruit type\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onFruitTypeSearchAsync($event)\"\n      />\n      <sky-filter-item-modal\n        filterId=\"hideOrange\"\n        labelText=\"Hide orange\"\n        modalSize=\"small\"\n        [modalComponent]=\"orangeModalComponent\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item labelText=\"Records\" [value]=\"items.length\" />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-repeater [items]=\"items\" />\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n" }]
+                    ], template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-lookup\n        filterId=\"fruitType\"\n        labelText=\"Fruit type\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onFruitTypeSearchAsync($event)\"\n      />\n      <sky-filter-item-modal\n        filterId=\"hideOrange\"\n        labelText=\"Hide orange\"\n        modalSize=\"small\"\n        [modalComponent]=\"orangeModalComponent\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item\n        [labelText]=\"recordCount() === 1 ? 'Record' : 'Records'\"\n        [value]=\"recordCount()\"\n      />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-repeater [items]=\"items\" />\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -6488,7 +6544,7 @@ class ErrorsErrorModalExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ErrorsErrorModalExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-errors-error-modal-example', template: "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"openErrorModal()\"\n>\n  Open error modal\n</button>\n" }]
+            args: [{ selector: 'app-errors-error-modal-example', template: "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"openErrorModal()\"\n>\n  Open error modal\n</button>\n" }]
         }] });
 
 /* cspell: disable */
@@ -6540,7 +6596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  */
 class FilterBarLookupExampleComponent {
     constructor() {
-        this.appliedFilters = model(...(ngDevMode ? [undefined, { debugName: "appliedFilters" }] : []));
+        this.appliedFilters = signal(undefined, ...(ngDevMode ? [{ debugName: "appliedFilters" }] : []));
         this.#svc = inject(ExampleService$2);
     }
     #svc;
@@ -6552,7 +6608,7 @@ class FilterBarLookupExampleComponent {
         args.result = this.#svc.search(args.searchText);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarLookupExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: FilterBarLookupExampleComponent, isStandalone: true, selector: "app-filter-bar-lookup-example", inputs: { appliedFilters: { classPropertyName: "appliedFilters", publicName: "appliedFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appliedFilters: "appliedFiltersChange" }, ngImport: i0, 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", 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.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: FilterBarLookupExampleComponent, isStandalone: true, selector: "app-filter-bar-lookup-example", ngImport: i0, 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", 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.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarLookupExampleComponent, decorators: [{
             type: Component,
@@ -6607,11 +6663,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  */
 class FilterBarModalExampleComponent {
     constructor() {
-        this.appliedFilters = model(...(ngDevMode ? [undefined, { debugName: "appliedFilters" }] : []));
+        this.appliedFilters = signal(undefined, ...(ngDevMode ? [{ debugName: "appliedFilters" }] : []));
         this.modalComponent = FilterModalComponent$1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarModalExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: FilterBarModalExampleComponent, isStandalone: true, selector: "app-filter-bar-modal-example", inputs: { appliedFilters: { classPropertyName: "appliedFilters", publicName: "appliedFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appliedFilters: "appliedFiltersChange" }, 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarModalExampleComponent, decorators: [{
             type: Component,
@@ -6743,8 +6799,8 @@ const FILTER_SELECTION_VALUES = {
  */
 class FilterBarSelectableExampleComponent {
     constructor() {
-        this.appliedFilters = model(...(ngDevMode ? [undefined, { debugName: "appliedFilters" }] : []));
-        this.selectedFilterIds = model([
+        this.appliedFilters = signal(undefined, ...(ngDevMode ? [{ debugName: "appliedFilters" }] : []));
+        this.selectedFilterIds = signal([
             'staff-assigned',
             'entering-grade',
             'current-grade',
@@ -6761,7 +6817,7 @@ class FilterBarSelectableExampleComponent {
         args.result = of({ items: results, totalCount: count });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarSelectableExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: FilterBarSelectableExampleComponent, isStandalone: true, selector: "app-filter-bar-selectable-example", inputs: { appliedFilters: { classPropertyName: "appliedFilters", publicName: "appliedFilters", isSignal: true, isRequired: false, transformFunction: null }, selectedFilterIds: { classPropertyName: "selectedFilterIds", publicName: "selectedFilterIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appliedFilters: "appliedFiltersChange", selectedFilterIds: "selectedFilterIdsChange" }, ngImport: i0, template: "<sky-filter-bar\n  [(appliedFilters)]=\"appliedFilters\"\n  [(selectedFilterIds)]=\"selectedFilterIds\"\n>\n  <sky-filter-item-modal\n    filterId=\"application-fee-received\"\n    labelText=\"Application fee received\"\n    modalSize=\"small\"\n    [modalComponent]=\"applicationFeeModal\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"community-connection\"\n    labelText=\"Community connection\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"current-grade\"\n    labelText=\"Current grade\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"entering-grade\"\n    labelText=\"Entering grade\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"role\"\n    labelText=\"Role\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"staff-assigned\"\n    labelText=\"Staff assigned\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\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"] }, { kind: "component", type: i2$4.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: FilterBarSelectableExampleComponent, isStandalone: true, selector: "app-filter-bar-selectable-example", ngImport: i0, template: "<sky-filter-bar\n  [(appliedFilters)]=\"appliedFilters\"\n  [(selectedFilterIds)]=\"selectedFilterIds\"\n>\n  <sky-filter-item-modal\n    filterId=\"application-fee-received\"\n    labelText=\"Application fee received\"\n    modalSize=\"small\"\n    [modalComponent]=\"applicationFeeModal\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"community-connection\"\n    labelText=\"Community connection\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"current-grade\"\n    labelText=\"Current grade\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"entering-grade\"\n    labelText=\"Entering grade\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"role\"\n    labelText=\"Role\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"staff-assigned\"\n    labelText=\"Staff assigned\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\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"] }, { kind: "component", type: i2$4.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarSelectableExampleComponent, decorators: [{
             type: Component,
@@ -6788,7 +6844,6 @@ let FlyoutComponent$1 = class FlyoutComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FlyoutComponent$1, decorators: [{
             type: Component,
             args: [{
-                    standalone: true,
                     selector: 'app-flyout',
                     template: `
     <div class="sky-padding-even-xl">
@@ -6845,7 +6900,7 @@ class FlyoutBasicExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FlyoutBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-flyout-basic-example', template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openSimpleFlyout()\"\n>\n  Open flyout\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithCustomWidth()\"\n>\n  Open flyout with custom width\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"closeAndRemoveFlyout()\"\n>\n  Close flyout programmatically\n</button>\n" }]
+            args: [{ selector: 'app-flyout-basic-example', template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openSimpleFlyout()\"\n>\n  Open flyout\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithCustomWidth()\"\n>\n  Open flyout with custom width\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"closeAndRemoveFlyout()\"\n>\n  Close flyout programmatically\n</button>\n" }]
         }] });
 
 class FlyoutComponent {
@@ -6868,7 +6923,6 @@ class FlyoutComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FlyoutComponent, decorators: [{
             type: Component,
             args: [{
-                    standalone: true,
                     selector: 'app-flyout',
                     template: `
     <div class="sky-padding-even-xl">
@@ -6983,7 +7037,7 @@ class FlyoutCustomHeadersExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FlyoutCustomHeadersExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-flyout-custom-headers-example', template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithUrlPermalink()\"\n>\n  Open flyout with a URL permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithRoutePermalink()\"\n>\n  Open flyout with an Angular routing permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithIterators()\"\n>\n  Open flyout with iterators\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithPrimaryAction()\"\n>\n  Open flyout with primary action\n</button>\n" }]
+            args: [{ selector: 'app-flyout-custom-headers-example', template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithUrlPermalink()\"\n>\n  Open flyout with a URL permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithRoutePermalink()\"\n>\n  Open flyout with an Angular routing permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithIterators()\"\n>\n  Open flyout with iterators\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithPrimaryAction()\"\n>\n  Open flyout with primary action\n</button>\n" }]
         }] });
 
 /**
@@ -7000,7 +7054,7 @@ class FormsCharacterCountExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormsCharacterCountExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: FormsCharacterCountExampleComponent, isStandalone: true, selector: "app-forms-character-count-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-input-box stacked=\"true\" labelText=\"Transaction description\">\n    <sky-character-counter-indicator\n      #descriptionIndicator\n      data-sky-id=\"description-indicator\"\n    />\n\n    <input\n      #descriptionInput=\"skyId\"\n      class=\"sky-form-control description-input\"\n      formControlName=\"description\"\n      skyCharacterCounter\n      skyId\n      type=\"text\"\n      [attr.aria-describedby]=\"characterCountError.id\"\n      [skyCharacterCounterIndicator]=\"descriptionIndicator\"\n      [skyCharacterCounterLimit]=\"maxDescriptionCharacterCount\"\n    />\n\n    <span #characterCountError=\"skyId\" class=\"sky-error-indicator\" skyId>\n      @if (description.errors?.['skyCharacterCounter']) {\n        <sky-status-indicator\n          data-sky-id=\"description-status-indicator-over-limit\"\n          descriptionType=\"error\"\n          indicatorType=\"danger\"\n        >\n          Limit Transaction description to\n          {{ maxDescriptionCharacterCount }} characters.\n        </sky-status-indicator>\n      }\n    </span>\n  </sky-input-box>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCharacterCounterModule }, { kind: "directive", type: i2$3.λ2, selector: "[skyCharacterCounter]", inputs: ["skyCharacterCounterIndicator", "skyCharacterCounterLimit"] }, { kind: "component", type: i2$3.λ1, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: FormsCharacterCountExampleComponent, isStandalone: true, selector: "app-forms-character-count-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-input-box stacked=\"true\" labelText=\"Transaction description\">\n    <sky-character-counter-indicator\n      #descriptionIndicator\n      data-sky-id=\"description-indicator\"\n    />\n\n    <input\n      #descriptionInput=\"skyId\"\n      class=\"description-input\"\n      formControlName=\"description\"\n      skyCharacterCounter\n      skyId\n      type=\"text\"\n      [attr.aria-describedby]=\"characterCountError.id\"\n      [skyCharacterCounterIndicator]=\"descriptionIndicator\"\n      [skyCharacterCounterLimit]=\"maxDescriptionCharacterCount\"\n    />\n\n    <span #characterCountError=\"skyId\" class=\"sky-error-indicator\" skyId>\n      @if (description.errors?.['skyCharacterCounter']) {\n        <sky-status-indicator\n          data-sky-id=\"description-status-indicator-over-limit\"\n          descriptionType=\"error\"\n          indicatorType=\"danger\"\n        >\n          Limit Transaction description to\n          {{ maxDescriptionCharacterCount }} characters.\n        </sky-status-indicator>\n      }\n    </span>\n  </sky-input-box>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCharacterCounterModule }, { kind: "directive", type: i2$3.λ2, selector: "[skyCharacterCounter]", inputs: ["skyCharacterCounterIndicator", "skyCharacterCounterLimit"] }, { kind: "component", type: i2$3.λ1, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormsCharacterCountExampleComponent, decorators: [{
             type: Component,
@@ -7011,7 +7065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         SkyIdModule,
                         SkyInputBoxModule,
                         SkyStatusIndicatorModule,
-                    ], template: "<form [formGroup]=\"formGroup\">\n  <sky-input-box stacked=\"true\" labelText=\"Transaction description\">\n    <sky-character-counter-indicator\n      #descriptionIndicator\n      data-sky-id=\"description-indicator\"\n    />\n\n    <input\n      #descriptionInput=\"skyId\"\n      class=\"sky-form-control description-input\"\n      formControlName=\"description\"\n      skyCharacterCounter\n      skyId\n      type=\"text\"\n      [attr.aria-describedby]=\"characterCountError.id\"\n      [skyCharacterCounterIndicator]=\"descriptionIndicator\"\n      [skyCharacterCounterLimit]=\"maxDescriptionCharacterCount\"\n    />\n\n    <span #characterCountError=\"skyId\" class=\"sky-error-indicator\" skyId>\n      @if (description.errors?.['skyCharacterCounter']) {\n        <sky-status-indicator\n          data-sky-id=\"description-status-indicator-over-limit\"\n          descriptionType=\"error\"\n          indicatorType=\"danger\"\n        >\n          Limit Transaction description to\n          {{ maxDescriptionCharacterCount }} characters.\n        </sky-status-indicator>\n      }\n    </span>\n  </sky-input-box>\n</form>\n" }]
+                    ], template: "<form [formGroup]=\"formGroup\">\n  <sky-input-box stacked=\"true\" labelText=\"Transaction description\">\n    <sky-character-counter-indicator\n      #descriptionIndicator\n      data-sky-id=\"description-indicator\"\n    />\n\n    <input\n      #descriptionInput=\"skyId\"\n      class=\"description-input\"\n      formControlName=\"description\"\n      skyCharacterCounter\n      skyId\n      type=\"text\"\n      [attr.aria-describedby]=\"characterCountError.id\"\n      [skyCharacterCounterIndicator]=\"descriptionIndicator\"\n      [skyCharacterCounterLimit]=\"maxDescriptionCharacterCount\"\n    />\n\n    <span #characterCountError=\"skyId\" class=\"sky-error-indicator\" skyId>\n      @if (description.errors?.['skyCharacterCounter']) {\n        <sky-status-indicator\n          data-sky-id=\"description-status-indicator-over-limit\"\n          descriptionType=\"error\"\n          indicatorType=\"danger\"\n        >\n          Limit Transaction description to\n          {{ maxDescriptionCharacterCount }} characters.\n        </sky-status-indicator>\n      }\n    </span>\n  </sky-input-box>\n</form>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -8196,7 +8250,7 @@ class IndicatorsWaitPageExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IndicatorsWaitPageExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-indicators-wait-page-example', template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"togglePageWait(true)\"\n>\n  Show page wait\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"togglePageWait(false)\"\n>\n  Show non-blocking page wait\n</button>\n" }]
+            args: [{ selector: 'app-indicators-wait-page-example', template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"togglePageWait(true)\"\n>\n  Show page wait\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"togglePageWait(false)\"\n>\n  Show non-blocking page wait\n</button>\n" }]
         }] });
 
 /**
@@ -10076,7 +10130,7 @@ class LookupAutocompleteAnyValueExampleComponent {
         // created by calling HttpClient.get(). Assigning that Observable to the result
         // allows the autocomplete component to cancel the web request if it does not
         // // complete before the user searches again.
-        args.result = this.#svc.search(args.searchText).pipe(map$1((result) => ({
+        args.result = this.#svc.search(args.searchText).pipe(map((result) => ({
             hasMore: result.hasMore,
             items: result.colors,
             totalCount: result.totalCount,
@@ -10383,7 +10437,7 @@ class LookupAddItemExampleComponent {
         // created by calling HttpClient.get(). Assigning that Observable to the result
         // allows the lookup component to cancel the web request if it does not complete
         // before the user searches again.
-        args.result = this.#svc.search(args.searchText).pipe(map((result) => ({
+        args.result = this.#svc.search(args.searchText).pipe(map$1((result) => ({
             hasMore: result.hasMore,
             items: result.people,
             totalCount: result.totalCount,
@@ -10628,7 +10682,7 @@ class LookupCustomPickerExampleComponent {
         // created by calling HttpClient.get(). Assigning that Observable to the result
         // allows the lookup component to cancel the web request if it does not complete
         // before the user searches again.
-        args.result = this.#svc.search(args.searchText).pipe(map((result) => ({
+        args.result = this.#svc.search(args.searchText).pipe(map$1((result) => ({
             hasMore: result.hasMore,
             items: result.people,
             totalCount: result.totalCount,
@@ -10757,7 +10811,7 @@ class LookupMultiSelectExampleComponent {
         // created by calling HttpClient.get(). Assigning that Observable to the result
         // allows the lookup component to cancel the web request if it does not complete
         // before the user searches again.
-        args.result = this.#svc.search(args.searchText).pipe(map((result) => ({
+        args.result = this.#svc.search(args.searchText).pipe(map$1((result) => ({
             hasMore: result.hasMore,
             items: result.people,
             totalCount: result.totalCount,
@@ -10944,7 +10998,7 @@ class LookupResultTemplatesExampleComponent {
         // created by calling HttpClient.get(). Assigning that Observable to the result
         // allows the lookup component to cancel the web request if it does not complete
         // before the user searches again.
-        args.result = this.#svc.search(args.searchText).pipe(map((result) => ({
+        args.result = this.#svc.search(args.searchText).pipe(map$1((result) => ({
             hasMore: result.hasMore,
             items: result.people,
             totalCount: result.totalCount,
@@ -11076,7 +11130,7 @@ class LookupSingleSelectExampleComponent {
         // created by calling HttpClient.get(). Assigning that Observable to the result
         // allows the lookup component to cancel the web request if it does not complete
         // before the user searches again.
-        args.result = this.#svc.search(args.searchText).pipe(map((result) => ({
+        args.result = this.#svc.search(args.searchText).pipe(map$1((result) => ({
             hasMore: result.hasMore,
             items: result.people,
             totalCount: result.totalCount,
@@ -11187,11 +11241,11 @@ class AddItemModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AddItemModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.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          class=\"sky-form-control\"\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],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$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { 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: "20.3.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],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$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ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: "20.3.0", ngImport: i0, type: AddItemModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-add-item-modal', imports: [ReactiveFormsModule, SkyInputBoxModule, SkyModalModule], 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          class=\"sky-form-control\"\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" }]
+            args: [{ selector: 'app-add-item-modal', imports: [ReactiveFormsModule, SkyInputBoxModule, SkyModalModule], 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" }]
         }], ctorParameters: () => [] });
 
 const people$1 = [
@@ -11258,7 +11312,7 @@ class LookupSelectionModalAddItemExampleComponent {
             descriptorProperty: 'name',
             idProperty: 'id',
             selectionDescriptor: 'person',
-            searchAsync: (args) => this.#searchSvc.search(args.searchText).pipe(map((results) => ({
+            searchAsync: (args) => this.#searchSvc.search(args.searchText).pipe(map$1((results) => ({
                 hasMore: results.hasMore,
                 items: results.people,
                 totalCount: results.totalCount,
@@ -11287,7 +11341,7 @@ class LookupSelectionModalAddItemExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LookupSelectionModalAddItemExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-lookup-selection-modal-add-item-example', template: "<div class=\"sky-margin-stacked-xl\">\n  <button\n    class=\"sky-btn sky-btn-default selection-modal-example-show-btn\"\n    type=\"button\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n@if (selectedPeople?.length) {\n  <div>\n    Selected people:\n    <ul class=\"selection-modal-example-selected\">\n      @for (selectedPerson of selectedPeople; track selectedPerson) {\n        <li>\n          {{ selectedPerson.name }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n" }]
+            args: [{ selector: 'app-lookup-selection-modal-add-item-example', template: "<div class=\"sky-margin-stacked-xl\">\n  <button\n    class=\"sky-btn sky-btn-default selection-modal-example-show-btn\"\n    type=\"button\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n@if (selectedPeople?.length) {\n  <div>\n    Selected people:\n    <ul class=\"selection-modal-example-selected\">\n      @for (selectedPerson of selectedPeople; track selectedPerson) {\n        <li>\n          {{ selectedPerson.name }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n" }]
         }] });
 
 const people = [
@@ -11346,7 +11400,7 @@ class LookupSelectionModalBasicExampleComponent {
             descriptorProperty: 'name',
             idProperty: 'id',
             selectionDescriptor: 'person',
-            searchAsync: (args) => this.#searchSvc.search(args.searchText).pipe(map((results) => ({
+            searchAsync: (args) => this.#searchSvc.search(args.searchText).pipe(map$1((results) => ({
                 hasMore: results.hasMore,
                 items: results.people,
                 totalCount: results.totalCount,
@@ -11364,7 +11418,7 @@ class LookupSelectionModalBasicExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LookupSelectionModalBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-lookup-selection-modal-basic-example', template: "<div class=\"sky-margin-stacked-xl\">\n  <button\n    type=\"button\"\n    class=\"sky-btn sky-btn-default selection-modal-example-show-btn\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n@if (selectedPeople?.length) {\n  <div>\n    Selected people:\n    <ul class=\"selection-modal-example-selected\">\n      @for (selectedPerson of selectedPeople; track selectedPerson) {\n        <li>\n          {{ selectedPerson.name }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n" }]
+            args: [{ selector: 'app-lookup-selection-modal-basic-example', template: "<div class=\"sky-margin-stacked-xl\">\n  <button\n    type=\"button\"\n    class=\"sky-btn sky-btn-default selection-modal-example-show-btn\"\n    (click)=\"showSelectionModal()\"\n  >\n    Select a value\n  </button>\n</div>\n\n@if (selectedPeople?.length) {\n  <div>\n    Selected people:\n    <ul class=\"selection-modal-example-selected\">\n      @for (selectedPerson of selectedPeople; track selectedPerson) {\n        <li>\n          {{ selectedPerson.name }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n" }]
         }] });
 
 /**
@@ -11394,7 +11448,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             type: Component,
             args: [{
                     selector: 'app-modals-confirm-basic-with-controller-example',
-                    standalone: true,
                     template: `<button
     aria-haspopup="dialog"
     class="sky-btn sky-btn-default"
@@ -11488,7 +11541,7 @@ class ModalsConfirmBasicWithHarnessExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModalsConfirmBasicWithHarnessExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-modals-confirm-basic-with-harness-example', standalone: true, template: "<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm ok-confirm-btn\"\n  type=\"button\"\n  (click)=\"openOKConfirm()\"\n>\n  OK confirm\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm two-action-confirm-btn\"\n  type=\"button\"\n  (click)=\"openTwoActionConfirm()\"\n>\n  Confirm with two actions\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openThreeActionConfirm()\"\n>\n  Confirm with three actions\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openDeleteConfirm()\"\n>\n  Confirm with delete button\n</button>\n\n@if (selectedAction) {\n  @if (selectedText) {\n    <p class=\"displayed-text\">\n      You selected the \"{{ selectedText }}\" button, which has an action of \"{{\n        selectedAction\n      }}.\"\n    </p>\n  } @else {\n    <p class=\"displayed-text\">\n      You selected the \"{{ selectedAction }}\" action.\n    </p>\n  }\n}\n" }]
+            args: [{ selector: 'app-modals-confirm-basic-with-harness-example', template: "<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm ok-confirm-btn\"\n  type=\"button\"\n  (click)=\"openOKConfirm()\"\n>\n  OK confirm\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm two-action-confirm-btn\"\n  type=\"button\"\n  (click)=\"openTwoActionConfirm()\"\n>\n  Confirm with two actions\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openThreeActionConfirm()\"\n>\n  Confirm with three actions\n</button>\n\n<button\n  aria-haspopup=\"dialog\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openDeleteConfirm()\"\n>\n  Confirm with delete button\n</button>\n\n@if (selectedAction) {\n  @if (selectedText) {\n    <p class=\"displayed-text\">\n      You selected the \"{{ selectedText }}\" button, which has an action of \"{{\n        selectedAction\n      }}.\"\n    </p>\n  } @else {\n    <p class=\"displayed-text\">\n      You selected the \"{{ selectedAction }}\" action.\n    </p>\n  }\n}\n" }]
         }] });
 
 /**
@@ -11656,7 +11709,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             type: Component,
             args: [{
                     selector: 'app-modals-modal-basic-with-controller-example',
-                    standalone: true,
                     template: `<button
     class="sky-btn sky-btn-default"
     type="button"
@@ -11775,7 +11827,7 @@ class ModalsModalBasicWithHarnessHelpKeyExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModalsModalBasicWithHarnessHelpKeyExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-modals-modal-basic-with-harness-help-key-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" }]
+            args: [{ selector: 'app-modals-modal-basic-with-harness-help-key-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 ModalDemoContext$1 = class ModalDemoContext {
@@ -11886,7 +11938,7 @@ class ModalsModalBasicWithHarnessExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModalsModalBasicWithHarnessExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, 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" }]
+            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" }]
         }] });
 
 class ModalDemoContext {
@@ -12012,7 +12064,7 @@ class ModalsModalWithErrorExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModalsModalWithErrorExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-modals-modal-with-error-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" }]
+            args: [{ selector: 'app-modals-modal-with-error-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" }]
         }] });
 
 /**
@@ -12559,6 +12611,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             args: [{ selector: 'app-pages-page-home-page-blocks-layout-example', imports: [HomePageContentComponent, SkyIconModule, SkyPageModule], template: "<sky-page layout=\"blocks\">\n  <sky-page-header pageTitle=\"Home\">\n    <sky-page-header-actions>\n      <button type=\"button\" class=\"sky-btn sky-btn-default\">\n        <sky-icon iconName=\"add\" /> New\n      </button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-home-page-content />\n  </sky-page-content>\n\n  <sky-page-links>\n    <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n    <sky-link-list headingText=\"Resources\">\n      <sky-link-list-item>\n        <a href=\"#\">Help</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <a href=\"#\">Support</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <a href=\"#\">Training</a>\n      </sky-link-list-item>\n    </sky-link-list>\n  </sky-page-links>\n</sky-page>\n" }]
         }] });
 
+/**
+ * Cell renderer for dashboard name links.
+ */
+class DashboardLinkCellRendererComponent {
+    constructor() {
+        this.value = '';
+    }
+    agInit(params) {
+        this.value = params.value || '';
+    }
+    refresh(params) {
+        this.value = params.value || '';
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardLinkCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DashboardLinkCellRendererComponent, isStandalone: true, selector: "app-dashboard-link-cell-renderer", ngImport: i0, template: `<a
+    href="/"
+    [attr.aria-label]="'View dashboard details for ' + value"
+    >{{ value }}</a
+  >`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DashboardLinkCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-dashboard-link-cell-renderer',
+                    template: `<a
+    href="/"
+    [attr.aria-label]="'View dashboard details for ' + value"
+    >{{ value }}</a
+  >`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
 class DashboardGridContextMenuComponent {
     constructor() {
         this.dashboardName = '';
@@ -12629,9 +12715,7 @@ let ListPageContentComponent$1 = class ListPageContentComponent {
                 field: 'dashboard',
                 headerName: 'Name',
                 width: 150,
-                cellRenderer: (params) => {
-                    return `<a href="/">${params.value}</a>`;
-                },
+                cellRenderer: DashboardLinkCellRendererComponent,
             },
             {
                 colId: 'name',
@@ -12722,6 +12806,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             args: [{ selector: 'app-contacts-grid-context-menu', imports: [SkyDropdownModule], template: "<sky-dropdown\n  buttonType=\"context-menu\"\n  [label]=\"'context menu for ' + contactName\"\n>\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Edit ' + contactName\">\n        Edit\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Delete ' + contactName\">\n        Delete\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n" }]
         }] });
 
+/**
+ * Cell renderer for contact name links.
+ */
+class ContactLinkCellRendererComponent {
+    constructor() {
+        this.value = '';
+    }
+    agInit(params) {
+        this.value = params.value || '';
+    }
+    refresh(params) {
+        this.value = params.value || '';
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ContactLinkCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ContactLinkCellRendererComponent, isStandalone: true, selector: "app-contact-link-cell-renderer", ngImport: i0, template: `<a
+    href="/"
+    [attr.aria-label]="'View contact details for ' + value"
+    >{{ value }}</a
+  >`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ContactLinkCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-contact-link-cell-renderer',
+                    template: `<a
+    href="/"
+    [attr.aria-label]="'View contact details for ' + value"
+    >{{ value }}</a
+  >`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
 ModuleRegistry.registerModules([AllCommunityModule]);
 class ListPageContactsGridComponent {
     #dataManagerService;
@@ -12745,9 +12863,7 @@ class ListPageContactsGridComponent {
                 field: 'name',
                 headerName: 'Name',
                 width: 150,
-                cellRenderer: (params) => {
-                    return `<a href="/">${params.value}</a>`;
-                },
+                cellRenderer: ContactLinkCellRendererComponent,
             },
             {
                 colId: 'organization',
@@ -13013,6 +13129,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             args: [{ selector: 'app-pages-page-record-page-blocks-layout-example', imports: [RecordPageContentComponent$1, SkyPageModule], template: "<sky-page layout=\"blocks\" helpKey=\"example-help\">\n  <sky-page-header\n    pageTitle=\"$500 pledge\"\n    [parentLink]=\"{\n      label: 'Pledges',\n      permalink: {\n        route: {\n          commands: ['/']\n        }\n      }\n    }\"\n  />\n  <sky-page-content>\n    <app-record-page-content />\n  </sky-page-content>\n  <sky-page-links>\n    <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n    <sky-link-list headingText=\"Related links\">\n      <sky-link-list-item>\n        <a href=\"#\">Analysis</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <a href=\"#\">Tools</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <button type=\"button\" class=\"sky-btn-link-inline\">Settings</button>\n      </sky-link-list-item>\n    </sky-link-list>\n  </sky-page-links>\n</sky-page>\n" }]
         }] });
 
+/**
+ * Cell renderer for attachment name links.
+ */
+class AttachmentLinkCellRendererComponent {
+    constructor() {
+        this.value = '';
+    }
+    agInit(params) {
+        this.value = params.value || '';
+    }
+    refresh(params) {
+        this.value = params.value || '';
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AttachmentLinkCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AttachmentLinkCellRendererComponent, isStandalone: true, selector: "app-attachment-link-cell-renderer", ngImport: i0, template: `<a
+    href="/"
+    [attr.aria-label]="'View attachment details for ' + value"
+    >{{ value }}</a
+  >`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AttachmentLinkCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-attachment-link-cell-renderer',
+                    template: `<a
+    href="/"
+    [attr.aria-label]="'View attachment details for ' + value"
+    >{{ value }}</a
+  >`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
 class AttachmentsGridContextMenuComponent {
     constructor() {
         this.attachmentName = '';
@@ -13067,9 +13217,7 @@ class RecordPageAttachmentsTabComponent {
                 field: 'name',
                 headerName: 'Name',
                 width: 150,
-                cellRenderer: (params) => {
-                    return `<a href="/">${params.value}</a>`;
-                },
+                cellRenderer: AttachmentLinkCellRendererComponent,
             },
             {
                 colId: 'description',
@@ -13732,7 +13880,7 @@ class ProgressIndicatorWizardBasicExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ProgressIndicatorWizardBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-progress-indicator-wizard-basic-example', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"openWizard()\">\n  Open wizard\n</button>\n" }]
+            args: [{ selector: 'app-progress-indicator-wizard-basic-example', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"openWizard()\">\n  Open wizard\n</button>\n" }]
         }] });
 
 /**
@@ -14104,7 +14252,6 @@ class AddressFormComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AddressFormComponent, decorators: [{
             type: Component,
             args: [{
-                    standalone: true,
                     selector: 'app-address-form',
                     template: `<div>Address form</div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -14174,7 +14321,6 @@ class PhoneFormComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PhoneFormComponent, decorators: [{
             type: Component,
             args: [{
-                    standalone: true,
                     selector: 'app-phone-form',
                     template: `<div>Phone form</div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -14240,7 +14386,7 @@ class TabsSectionedFormModalExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TabsSectionedFormModalExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-tabs-sectioned-form-modal-example', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"openModal()\">\n  Open sectioned form\n</button>\n" }]
+            args: [{ selector: 'app-tabs-sectioned-form-modal-example', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"openModal()\">\n  Open sectioned form\n</button>\n" }]
         }] });
 
 /**
@@ -14533,7 +14679,7 @@ class TabsWizardBasicExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TabsWizardBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-tabs-wizard-basic-example', template: "<button type=\"button\" class=\"sky-btn sky-btn-default\" (click)=\"openWizard()\">\n  Open Wizard\n</button>\n" }]
+            args: [{ selector: 'app-tabs-wizard-basic-example', template: "<button type=\"button\" class=\"sky-btn sky-btn-default\" (click)=\"openWizard()\">\n  Open Wizard\n</button>\n" }]
         }] });
 
 function validateText$1(control) {
@@ -14698,7 +14844,7 @@ class ToastBasicExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ToastBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-toast-basic-example', template: "<button\n  class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openToast()\"\n>\n  Open toast\n</button>\n<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"closeAll()\">\n  Close all\n</button>\n" }]
+            args: [{ selector: 'app-toast-basic-example', template: "<button\n  class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openToast()\"\n>\n  Open toast\n</button>\n<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"closeAll()\">\n  Close all\n</button>\n" }]
         }] });
 
 class CustomToastContext {
@@ -14721,7 +14867,7 @@ class CustomToastComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CustomToastComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-toast-content-example', template: "<div><strong>Custom message:</strong> {{ context.message }}</div>\n" }]
+            args: [{ selector: 'app-toast-content-example', template: "<div><strong>Custom message:</strong> {{ context.message }}</div>\n" }]
         }] });
 
 /**
@@ -14748,7 +14894,7 @@ class ToastCustomComponentExampleComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ToastCustomComponentExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-toast-custom-component-example', template: "<button\n  class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openToast()\"\n>\n  Open toast\n</button>\n<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"closeAll()\">\n  Close all\n</button>\n" }]
+            args: [{ selector: 'app-toast-custom-component-example', template: "<button\n  class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openToast()\"\n>\n  Open toast\n</button>\n<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"closeAll()\">\n  Close all\n</button>\n" }]
         }] });
 
 /**
@@ -14782,7 +14928,7 @@ class ValidationEmailValidationDirectiveExampleComponent {
         this.exampleModel = {};
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ValidationEmailValidationDirectiveExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ValidationEmailValidationDirectiveExampleComponent, isStandalone: true, selector: "app-validation-email-validation-directive-example", ngImport: i0, template: "<form novalidate>\n  <div>\n    <sky-input-box stacked=\"true\" labelText=\"Email address\">\n      <input\n        class=\"sky-form-control\"\n        name=\"emailAddress\"\n        skyEmailValidation\n        type=\"text\"\n        [(ngModel)]=\"exampleModel.emailAddress\"\n      />\n    </sky-input-box>\n  </div>\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],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SkyEmailValidationModule }, { kind: "directive", type: i2$b.λ1, selector: "[skyEmailValidation]" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ValidationEmailValidationDirectiveExampleComponent, isStandalone: true, selector: "app-validation-email-validation-directive-example", ngImport: i0, template: "<form novalidate>\n  <div>\n    <sky-input-box stacked=\"true\" labelText=\"Email address\">\n      <input\n        name=\"emailAddress\"\n        skyEmailValidation\n        type=\"text\"\n        [(ngModel)]=\"exampleModel.emailAddress\"\n      />\n    </sky-input-box>\n  </div>\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],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SkyEmailValidationModule }, { kind: "directive", type: i2$b.λ1, selector: "[skyEmailValidation]" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ValidationEmailValidationDirectiveExampleComponent, decorators: [{
             type: Component,
@@ -14791,7 +14937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         ReactiveFormsModule,
                         SkyEmailValidationModule,
                         SkyInputBoxModule,
-                    ], template: "<form novalidate>\n  <div>\n    <sky-input-box stacked=\"true\" labelText=\"Email address\">\n      <input\n        class=\"sky-form-control\"\n        name=\"emailAddress\"\n        skyEmailValidation\n        type=\"text\"\n        [(ngModel)]=\"exampleModel.emailAddress\"\n      />\n    </sky-input-box>\n  </div>\n</form>\n" }]
+                    ], template: "<form novalidate>\n  <div>\n    <sky-input-box stacked=\"true\" labelText=\"Email address\">\n      <input\n        name=\"emailAddress\"\n        skyEmailValidation\n        type=\"text\"\n        [(ngModel)]=\"exampleModel.emailAddress\"\n      />\n    </sky-input-box>\n  </div>\n</form>\n" }]
         }] });
 
 /**