@skyux/code-examples 13.1.0 → 13.3.0

package/fesm2022/skyux-code-examples.mjs

@@ -28,7 +28,7 @@ import { SkyDataManagerFilterModalContext, SkyDataManagerState, SkyDataManagerSe
 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, SkyCharacterCounterModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileDropModule, SkyRadioModule, SkySelectionBoxModule, SkyToggleSwitchModule, SkyFormErrorModule } from '@skyux/forms';
+import { SkyCheckboxModule, SkyInputBoxModule, SkyRadioModule, SkyCharacterCounterModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileDropModule, SkySelectionBoxModule, SkyToggleSwitchModule, SkyFormErrorModule } from '@skyux/forms';
 import * as i1$6 from '@skyux/help-inline';
 import { SkyHelpInlineModule } from '@skyux/help-inline';
 import * as i1$c from '@angular/router';
@@ -55,7 +55,7 @@ import { SkyDatePipeModule, SkyDateRangeCalculatorId, SkyDateRangePickerModule,
 import * as i1$a from '@skyux/errors';
 import { SkyErrorModule, SkyErrorModalService } from '@skyux/errors';
 import * as i1$b from '@skyux/filter-bar';
-import { SkyFilterItemModalInstance, SkyFilterBarModule } from '@skyux/filter-bar';
+import { SkyFilterBarModule, SkyFilterItemModalInstance } from '@skyux/filter-bar';
 import { SkyFlyoutService } from '@skyux/flyout';
 import * as i2$a from '@skyux/validation';
 import { SkyValidators, SkyEmailValidationModule, SkyUrlValidationModule } from '@skyux/validation';
@@ -65,10 +65,10 @@ import * as i3$4 from '@skyux/navbar';
 import { SkyNavbarModule } from '@skyux/navbar';
 import * as i1$d from '@skyux/pages';
 import { SkyActionHubModule, SkyPageModule } from '@skyux/pages';
-import * as i1$e from '@skyux/tiles';
-import { SkyTilesModule } from '@skyux/tiles';
 import * as i5 from '@skyux/split-view';
 import { SkySplitViewMessageType, SkySplitViewModule } from '@skyux/split-view';
+import * as i1$e from '@skyux/tiles';
+import { SkyTilesModule } from '@skyux/tiles';
 import * as i3$5 from '@skyux/phone-field';
 import { SkyPhoneFieldModule } from '@skyux/phone-field';
 import * as i1$f from '@skyux/progress-indicator';
@@ -1054,7 +1054,7 @@ 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$4 = class FilterModalComponent {
+let FilterModalComponent$5 = class FilterModalComponent {
     #changeDetector;
     #context;
     #instance;
@@ -1092,7 +1092,7 @@ let FilterModalComponent$4 = class FilterModalComponent {
     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 }); }
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterModalComponent$4, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterModalComponent$5, 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" }]
         }], ctorParameters: () => [] });
@@ -1456,7 +1456,7 @@ class AgGridDataEntryGridDataManagerAddedExampleComponent {
             ],
         });
         this.#dataManagerConfig = {
-            filterModalComponent: FilterModalComponent$4,
+            filterModalComponent: FilterModalComponent$5,
             sortOptions: [
                 {
                     id: 'az',
@@ -1522,7 +1522,7 @@ class AgGridDataEntryGridDataManagerAddedExampleComponent {
         });
     }
     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: i3$2.λ2, selector: "sky-data-manager" }, { kind: "component", type: i3$2.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i3$2.λ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-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: i3$2.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i3$2.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i3$2.λ3, selector: "sky-data-manager-toolbar-left-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AgGridDataEntryGridDataManagerAddedExampleComponent, decorators: [{
             type: Component,
@@ -2948,7 +2948,7 @@ const AG_GRID_DEMO_DATA$5 = [
     },
 ];
 
-let FilterModalComponent$3 = class FilterModalComponent {
+let FilterModalComponent$4 = class FilterModalComponent {
     #changeDetectorRef;
     #context;
     #instance;
@@ -2986,7 +2986,7 @@ let FilterModalComponent$3 = class FilterModalComponent {
     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 }); }
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterModalComponent$3, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterModalComponent$4, 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" }]
         }], ctorParameters: () => [] });
@@ -3298,7 +3298,7 @@ class AgGridDataGridDataManagerMultiselectExampleComponent {
     constructor() {
         this.items = AG_GRID_DEMO_DATA$5;
         this.#dataManagerConfig = {
-            filterModalComponent: FilterModalComponent$3,
+            filterModalComponent: FilterModalComponent$4,
             sortOptions: [
                 {
                     id: 'az',
@@ -3362,7 +3362,7 @@ class AgGridDataGridDataManagerMultiselectExampleComponent {
         this.#ngUnsubscribe.complete();
     }
     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-multiselect-example", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <sky-data-manager-toolbar />\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$2.λ2, selector: "sky-data-manager" }, { kind: "component", type: i3$2.λ7, selector: "sky-data-manager-toolbar" }, { 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-multiselect-example", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <sky-data-manager-toolbar />\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$2.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i3$2.λ7, selector: "sky-data-manager-toolbar" }, { 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,
@@ -3503,7 +3503,7 @@ const AG_GRID_DEMO_DATA$4 = [
     },
 ];
 
-let FilterModalComponent$2 = class FilterModalComponent {
+let FilterModalComponent$3 = class FilterModalComponent {
     #changeDetectorRef;
     #context;
     #instance;
@@ -3541,7 +3541,7 @@ let FilterModalComponent$2 = class FilterModalComponent {
     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 }); }
 };
-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: FilterModalComponent$3, 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" }]
         }], ctorParameters: () => [] });
@@ -3830,7 +3830,7 @@ class AgGridDataGridDataManagerExampleComponent {
         this.items = AG_GRID_DEMO_DATA$4;
         this.#activeViewId = 'dataGridWithDataManagerView';
         this.#dataManagerConfig = {
-            filterModalComponent: FilterModalComponent$2,
+            filterModalComponent: FilterModalComponent$3,
             sortOptions: [
                 {
                     id: 'az',
@@ -3892,7 +3892,7 @@ class AgGridDataGridDataManagerExampleComponent {
         this.#ngUnsubscribe.complete();
     }
     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  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$2.λ2, selector: "sky-data-manager" }, { kind: "component", type: i3$2.λ7, selector: "sky-data-manager-toolbar" }, { 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  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$2.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i3$2.λ7, selector: "sky-data-manager-toolbar" }, { 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,
@@ -5431,7 +5431,7 @@ const DATA_MANAGER_DEMO_DATA = [
     },
 ];
 
-let FilterModalComponent$1 = class FilterModalComponent {
+let FilterModalComponent$2 = class FilterModalComponent {
     #context = inject(SkyDataManagerFilterModalContext);
     #instance = inject(SkyModalInstance);
     ngOnInit() {
@@ -5460,7 +5460,7 @@ let FilterModalComponent$1 = class FilterModalComponent {
     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 your fruit\">\n  <sky-modal-content>\n    <sky-input-box labelText=\"Fruit type\" stacked=\"true\">\n      <select class=\"sky-form-control\" [(ngModel)]=\"fruitType\">\n        <option value=\"any\">Any fruit</option>\n        <option value=\"citrus\">Citrus</option>\n        <option value=\"berry\">Berry</option>\n      </select>\n    </sky-input-box>\n    <sky-checkbox labelText=\"Hide orange fruits\" [(ngModel)]=\"hideOrange\" />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply filters\n    </button>\n    <button\n      class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\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: 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: 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" }] }); }
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterModalComponent$1, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterModalComponent$2, decorators: [{
             type: Component,
             args: [{ selector: 'app-filter-modal', imports: [
                         FormsModule,
@@ -5842,7 +5842,7 @@ class DataManagerBasicExampleComponent {
         this.#dataManagerSvc.initDataManager({
             activeViewId: 'repeaterView',
             dataManagerConfig: {
-                filterModalComponent: FilterModalComponent$1,
+                filterModalComponent: FilterModalComponent$2,
                 sortOptions: [
                     {
                         id: 'az',
@@ -5875,7 +5875,7 @@ class DataManagerBasicExampleComponent {
         });
     }
     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  <app-view-repeater [items]=\"items\" />\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$2.λ2, selector: "sky-data-manager" }, { kind: "component", type: i3$2.λ7, selector: "sky-data-manager-toolbar" }, { 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  <app-view-repeater [items]=\"items\" />\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$2.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i3$2.λ7, selector: "sky-data-manager-toolbar" }, { 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,
@@ -6273,195 +6273,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             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" }]
         }] });
 
-class CommunityConnectionFilterModalComponent {
-    constructor() {
-        this.modalInstance = inject(SkyFilterItemModalInstance);
-        this.#context = this.modalInstance.context;
-        this.#formBuilder = inject(FormBuilder);
-        this.headingText = this.#context.filterLabelText;
-        this.items = this.#context.additionalContext.items;
-        this.selectedValue = this.#context.filterValue;
-        this.formGroup = this.#formBuilder.group({
-            selectedOption: this.#formBuilder.control(this.selectedValue?.value),
-        });
-    }
-    #context;
-    #formBuilder;
-    save() {
-        const selectedValue = this.formGroup.get('selectedOption')?.value;
-        if (selectedValue) {
-            // Map the primitive value back to the full object
-            const selectedItem = this.items.find((item) => item.value === selectedValue);
-            this.modalInstance.save({ filterValue: selectedItem });
-        }
-        else {
-            this.modalInstance.save({ filterValue: undefined });
-        }
+/* cspell: disable */
+const people$8 = [
+    { value: '1', displayValue: 'Solomon Hurley' },
+    { value: '2', displayValue: 'Kanesha Hutto' },
+    { value: '3', displayValue: 'Darcel Lenz' },
+    { value: '4', displayValue: 'Cheyenne Lightfoot' },
+    { value: '5', displayValue: 'Jack Lovett' },
+    { value: '6', displayValue: 'Wonda Lumpkin' },
+    { value: '7', displayValue: 'Kristeen Lunsford' },
+    { value: '8', displayValue: 'Clarice Overton' },
+    { value: '9', displayValue: 'Martine Rocha' },
+    { value: '10', displayValue: 'Tonja Sanderson' },
+    { value: '11', displayValue: 'Molly Seymour' },
+    { value: '12', displayValue: 'Ed Sipes' },
+    { value: '13', displayValue: 'Cristen Sizemore' },
+    { value: '14', displayValue: 'Rod Tomlinson' },
+    { value: '15', displayValue: 'Eliza Vanhorn' },
+    { value: '16', displayValue: 'Jessy Witherspoon' },
+    { value: '17', displayValue: 'Ilene Woo' },
+];
+/* cspell: enable */
+let ExampleService$2 = class ExampleService {
+    search(searchText) {
+        searchText = searchText.toUpperCase();
+        const matchingPeople = people$8.filter((person) => person.displayValue?.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: matchingPeople,
+            totalCount: matchingPeople.length,
+        }).pipe(delay$1(800));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CommunityConnectionFilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: CommunityConnectionFilterModalComponent, isStandalone: true, selector: "app-community-connection-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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.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: 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" }, { kind: "ngmodule", type: SkyRepeaterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CommunityConnectionFilterModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-community-connection-filter-modal', imports: [
-                        FormsModule,
-                        ReactiveFormsModule,
-                        SkyInputBoxModule,
-                        SkyModalModule,
-                        SkyRepeaterModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
+    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$2, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
 
-class CurrentGradeFilterModalComponent {
+/**
+ * @title Filter bar with lookup filter example
+ */
+class FilterBarLookupExampleComponent {
     constructor() {
-        this.modalInstance = inject(SkyFilterItemModalInstance);
-        this.#context = this.modalInstance.context;
-        this.#formBuilder = inject(FormBuilder);
-        this.headingText = this.#context.filterLabelText;
-        this.items = this.#context.additionalContext.items;
-        this.selectedValue = this.#context.filterValue;
-        this.formGroup = this.#formBuilder.group({
-            selectedOption: this.#formBuilder.control(this.selectedValue?.value),
-        });
+        this.appliedFilters = model(...(ngDevMode ? [undefined, { debugName: "appliedFilters" }] : []));
+        this.#svc = inject(ExampleService$2);
     }
-    #context;
-    #formBuilder;
-    save() {
-        const selectedValue = this.formGroup.get('selectedOption')?.value;
-        if (selectedValue) {
-            const selectedItem = this.items.find((item) => item.value === selectedValue);
-            this.modalInstance.save({ filterValue: selectedItem });
-        }
-        else {
-            this.modalInstance.save({ filterValue: undefined });
-        }
+    #svc;
+    onSearchAsync(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.#svc.search(args.searchText);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CurrentGradeFilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: CurrentGradeFilterModalComponent, isStandalone: true, selector: "app-current-grade-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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.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: 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" }, { kind: "ngmodule", type: SkyRepeaterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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: i1$b.λ1, selector: "sky-filter-bar", inputs: ["appliedFilters", "selectedFilterIds"], outputs: ["appliedFiltersChange", "selectedFilterIdsChange"] }, { kind: "component", type: i1$b.λ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: CurrentGradeFilterModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarLookupExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-current-grade-filter-modal', imports: [
-                        FormsModule,
-                        ReactiveFormsModule,
-                        SkyInputBoxModule,
-                        SkyModalModule,
-                        SkyRepeaterModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
+            args: [{ selector: 'app-filter-bar-lookup-example', imports: [SkyFilterBarModule], template: "<sky-filter-bar [(appliedFilters)]=\"appliedFilters\">\n  <sky-filter-item-lookup\n    filterId=\"lookup-filter\"\n    labelText=\"Lookup filter\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n</sky-filter-bar>\n" }]
         }] });
 
-class EnteringGradeFilterModalComponent {
+let FilterModalComponent$1 = class FilterModalComponent {
     constructor() {
         this.modalInstance = inject(SkyFilterItemModalInstance);
         this.#context = this.modalInstance.context;
         this.#formBuilder = inject(FormBuilder);
         this.headingText = this.#context.filterLabelText;
-        this.items = this.#context.additionalContext.items;
+        this.options = [
+            { value: null, displayValue: 'All' },
+            { value: true, displayValue: 'Yes' },
+            { value: false, displayValue: 'No' },
+        ];
         this.selectedValue = this.#context.filterValue;
         this.formGroup = this.#formBuilder.group({
-            selectedOption: this.#formBuilder.control(this.selectedValue?.value),
+            selectedOption: this.#formBuilder.control(this.selectedValue?.value ?? null),
         });
     }
     #context;
     #formBuilder;
     save() {
         const selectedValue = this.formGroup.get('selectedOption')?.value;
-        if (selectedValue) {
-            const selectedItem = this.items.find((item) => item.value === selectedValue);
+        if (selectedValue !== null) {
+            // Map the primitive value back to the full object
+            const selectedItem = this.options.find((item) => item.value === selectedValue);
             this.modalInstance.save({ filterValue: selectedItem });
         }
         else {
             this.modalInstance.save({ filterValue: undefined });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: EnteringGradeFilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: EnteringGradeFilterModalComponent, isStandalone: true, selector: "app-entering-grade-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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.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: 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" }, { kind: "ngmodule", type: SkyRepeaterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: EnteringGradeFilterModalComponent, decorators: [{
+    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: "17.0.0", version: "20.3.0", type: FilterModalComponent, isStandalone: true, selector: "app-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-radio-group formControlName=\"selectedOption\">\n        @for (option of options; track option.value) {\n          <sky-radio [value]=\"option.value\" [labelText]=\"option.displayValue\" />\n        }\n      </sky-radio-group>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyRadioModule }, { kind: "component", type: i2$3.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "helpPopoverContent", "helpPopoverTitle", "iconName", "radioType", "labelText", "labelHidden", "hintText", "helpKey"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i2$3.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "headingLevel", "headingStyle", "name", "required", "stacked", "value", "tabIndex", "headingText", "headingHidden", "hintText", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterModalComponent$1, decorators: [{
             type: Component,
-            args: [{ selector: 'app-entering-grade-filter-modal', imports: [
+            args: [{ selector: 'app-filter-modal', imports: [
                         FormsModule,
                         ReactiveFormsModule,
                         SkyInputBoxModule,
                         SkyModalModule,
-                        SkyRepeaterModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
+                        SkyRadioModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-radio-group formControlName=\"selectedOption\">\n        @for (option of options; track option.value) {\n          <sky-radio [value]=\"option.value\" [labelText]=\"option.displayValue\" />\n        }\n      </sky-radio-group>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
         }] });
 
-class RoleFilterModalComponent {
+/**
+ * @title Filter bar with modal filter example
+ */
+class FilterBarModalExampleComponent {
     constructor() {
-        this.modalInstance = inject(SkyFilterItemModalInstance);
-        this.#context = this.modalInstance.context;
-        this.#formBuilder = inject(FormBuilder);
-        this.headingText = this.#context.filterLabelText;
-        this.items = this.#context.additionalContext.items;
-        this.selectedValue = this.#context.filterValue;
-        this.formGroup = this.#formBuilder.group({
-            selectedOption: this.#formBuilder.control(this.selectedValue?.value),
-        });
-    }
-    #context;
-    #formBuilder;
-    save() {
-        const selectedValue = this.formGroup.get('selectedOption')?.value;
-        if (selectedValue) {
-            const selectedItem = this.items.find((item) => item.value === selectedValue);
-            this.modalInstance.save({ filterValue: selectedItem });
-        }
-        else {
-            this.modalInstance.save({ filterValue: undefined });
-        }
+        this.appliedFilters = model(...(ngDevMode ? [undefined, { debugName: "appliedFilters" }] : []));
+        this.modalComponent = FilterModalComponent$1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RoleFilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: RoleFilterModalComponent, isStandalone: true, selector: "app-role-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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.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: 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" }, { kind: "ngmodule", type: SkyRepeaterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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: i1$b.λ1, selector: "sky-filter-bar", inputs: ["appliedFilters", "selectedFilterIds"], outputs: ["appliedFiltersChange", "selectedFilterIdsChange"] }, { kind: "component", type: i1$b.λ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: RoleFilterModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarModalExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-role-filter-modal', imports: [
-                        FormsModule,
-                        ReactiveFormsModule,
-                        SkyInputBoxModule,
-                        SkyModalModule,
-                        SkyRepeaterModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
+            args: [{ selector: 'app-filter-bar-modal-example', imports: [SkyFilterBarModule], 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" }]
         }] });
 
-class StaffAssignedFilterModalComponent {
+class ApplicationFeeFilterModalComponent {
     constructor() {
         this.modalInstance = inject(SkyFilterItemModalInstance);
         this.#context = this.modalInstance.context;
         this.#formBuilder = inject(FormBuilder);
         this.headingText = this.#context.filterLabelText;
-        this.items = this.#context.additionalContext.items;
+        this.options = [
+            { value: null, displayValue: 'All' },
+            { value: true, displayValue: 'Yes' },
+            { value: false, displayValue: 'No' },
+        ];
         this.selectedValue = this.#context.filterValue;
         this.formGroup = this.#formBuilder.group({
-            selectedOption: this.#formBuilder.control(this.selectedValue?.value),
+            selectedOption: this.#formBuilder.control(this.selectedValue?.value ?? null),
         });
     }
     #context;
     #formBuilder;
     save() {
         const selectedValue = this.formGroup.get('selectedOption')?.value;
-        if (selectedValue) {
-            const selectedItem = this.items.find((item) => item.value === selectedValue);
+        if (selectedValue !== null) {
+            // Map the primitive value back to the full object
+            const selectedItem = this.options.find((item) => item.value === selectedValue);
             this.modalInstance.save({ filterValue: selectedItem });
         }
         else {
             this.modalInstance.save({ filterValue: undefined });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: StaffAssignedFilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: StaffAssignedFilterModalComponent, isStandalone: true, selector: "app-staff-assigned-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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.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: 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" }, { kind: "ngmodule", type: SkyRepeaterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ApplicationFeeFilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ApplicationFeeFilterModalComponent, isStandalone: true, selector: "app-application-fee-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-radio-group formControlName=\"selectedOption\">\n        @for (option of options; track option.value) {\n          <sky-radio [value]=\"option.value\" [labelText]=\"option.displayValue\" />\n        }\n      </sky-radio-group>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyRadioModule }, { kind: "component", type: i2$3.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "helpPopoverContent", "helpPopoverTitle", "iconName", "radioType", "labelText", "labelHidden", "hintText", "helpKey"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i2$3.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "headingLevel", "headingStyle", "name", "required", "stacked", "value", "tabIndex", "headingText", "headingHidden", "hintText", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: StaffAssignedFilterModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ApplicationFeeFilterModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-staff-assigned-filter-modal', imports: [
+            args: [{ selector: 'app-application-fee-filter-modal', imports: [
                         FormsModule,
                         ReactiveFormsModule,
                         SkyInputBoxModule,
                         SkyModalModule,
-                        SkyRepeaterModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
+                        SkyRadioModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-radio-group formControlName=\"selectedOption\">\n        @for (option of options; track option.value) {\n          <sky-radio [value]=\"option.value\" [labelText]=\"option.displayValue\" />\n        }\n      </sky-radio-group>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
         }] });
 
 // eslint-disable @cspell/spellchecker
@@ -6542,31 +6521,33 @@ const FILTER_SELECTION_VALUES = {
 };
 
 /**
- * @title Filter bar basic example
+ * @title Filter bar with selectable filters example
  */
-class FilterBarBasicExampleComponent {
+class FilterBarSelectableExampleComponent {
     constructor() {
         this.appliedFilters = model(...(ngDevMode ? [undefined, { debugName: "appliedFilters" }] : []));
         this.selectedFilterIds = model([
             'staff-assigned',
             'entering-grade',
             'current-grade',
+            'application-fee-received',
         ], ...(ngDevMode ? [{ debugName: "selectedFilterIds" }] : []));
-        this.communityConnectionModal = CommunityConnectionFilterModalComponent;
-        this.currentGradeModal = CurrentGradeFilterModalComponent;
-        this.enteringGradeModal = EnteringGradeFilterModalComponent;
-        this.roleModal = RoleFilterModalComponent;
-        this.staffAssignedModal = StaffAssignedFilterModalComponent;
+        this.applicationFeeModal = ApplicationFeeFilterModalComponent;
     }
-    onModalOpened(args) {
-        args.data = of({ items: FILTER_SELECTION_VALUES[args.filterId] });
+    onSearchAsync(args) {
+        let results = FILTER_SELECTION_VALUES[args.filterId];
+        const count = results.length;
+        if (args.searchText) {
+            results = results.filter((result) => result.displayValue?.includes(args.searchText));
+        }
+        args.result = of({ items: results, totalCount: count });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: FilterBarBasicExampleComponent, isStandalone: true, selector: "app-filter-bar-basic-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=\"community-connection\"\n    labelText=\"Community connection\"\n    modalSize=\"medium\"\n    [modalComponent]=\"communityConnectionModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"current-grade\"\n    labelText=\"Current grade\"\n    modalSize=\"medium\"\n    [modalComponent]=\"currentGradeModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"entering-grade\"\n    labelText=\"Entering grade\"\n    modalSize=\"medium\"\n    [modalComponent]=\"enteringGradeModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"role\"\n    labelText=\"Role\"\n    modalSize=\"medium\"\n    [modalComponent]=\"roleModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"staff-assigned\"\n    labelText=\"Staff assigned\"\n    modalSize=\"medium\"\n    [modalComponent]=\"staffAssignedModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n</sky-filter-bar>\n", dependencies: [{ kind: "ngmodule", type: SkyFilterBarModule }, { kind: "component", type: i1$b.λ1, selector: "sky-filter-bar", inputs: ["appliedFilters", "selectedFilterIds"], outputs: ["appliedFiltersChange", "selectedFilterIdsChange"] }, { kind: "component", type: i1$b.λ2, selector: "sky-filter-item-modal", inputs: ["filterId", "labelText", "modalComponent", "modalSize"], outputs: ["modalOpened"] }] }); }
+    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: i1$b.λ1, selector: "sky-filter-bar", inputs: ["appliedFilters", "selectedFilterIds"], outputs: ["appliedFiltersChange", "selectedFilterIdsChange"] }, { kind: "component", type: i1$b.λ2, selector: "sky-filter-item-modal", inputs: ["filterId", "labelText", "modalComponent", "modalSize"], outputs: ["modalOpened"] }, { kind: "component", type: i1$b.λ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: FilterBarBasicExampleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarSelectableExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-filter-bar-basic-example', imports: [SkyFilterBarModule], template: "<sky-filter-bar\n  [(appliedFilters)]=\"appliedFilters\"\n  [(selectedFilterIds)]=\"selectedFilterIds\"\n>\n  <sky-filter-item-modal\n    filterId=\"community-connection\"\n    labelText=\"Community connection\"\n    modalSize=\"medium\"\n    [modalComponent]=\"communityConnectionModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"current-grade\"\n    labelText=\"Current grade\"\n    modalSize=\"medium\"\n    [modalComponent]=\"currentGradeModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"entering-grade\"\n    labelText=\"Entering grade\"\n    modalSize=\"medium\"\n    [modalComponent]=\"enteringGradeModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"role\"\n    labelText=\"Role\"\n    modalSize=\"medium\"\n    [modalComponent]=\"roleModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"staff-assigned\"\n    labelText=\"Staff assigned\"\n    modalSize=\"medium\"\n    [modalComponent]=\"staffAssignedModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n</sky-filter-bar>\n" }]
+            args: [{ selector: 'app-filter-bar-selectable-example', imports: [SkyFilterBarModule], 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" }]
         }] });
 
 let FlyoutComponent$1 = class FlyoutComponent {
@@ -9488,6 +9469,7 @@ class ListsRepeaterAddRemoveExampleComponent {
                 note: 'There are 14 new prospects who are not assigned to fundraisers.',
                 status: 'Due tomorrow',
                 isSelected: false,
+                isDisabled: true,
             },
             {
                 title: 'Process gift receipts',
@@ -9515,11 +9497,11 @@ class ListsRepeaterAddRemoveExampleComponent {
         this.items = this.items.filter((item) => !item.isSelected);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsRepeaterAddRemoveExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsRepeaterAddRemoveExampleComponent, isStandalone: true, selector: "app-lists-repeater-add-remove-example", ngImport: i0, template: "<div class=\"sky-margin-stacked-lg\">\n  <sky-repeater\n    data-sky-id=\"repeater-example\"\n    [expandMode]=\"'single'\"\n    [reorderable]=\"true\"\n    (orderChange)=\"changeItems($event)\"\n  >\n    @for (item of items; track item) {\n      <sky-repeater-item\n        [selectable]=\"true\"\n        [tag]=\"item.note\"\n        [(isSelected)]=\"item.isSelected\"\n      >\n        <sky-repeater-item-title class=\"example-repeater-flex\">\n          <div class=\"example-repeater-item-title\">\n            {{ item.title }}\n          </div>\n          <div>\n            {{ item.status }}\n          </div>\n        </sky-repeater-item-title>\n        <sky-repeater-item-context-menu>\n          <sky-dropdown buttonType=\"context-menu\">\n            <sky-dropdown-menu>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 1')\">\n                  Action 1\n                </button>\n              </sky-dropdown-item>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 2')\">\n                  Action 2\n                </button>\n              </sky-dropdown-item>\n            </sky-dropdown-menu>\n          </sky-dropdown>\n        </sky-repeater-item-context-menu>\n        <sky-repeater-item-content>\n          {{ item.note }}\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    }\n  </sky-repeater>\n</div>\n\n<button\n  data-sky-id=\"add-button\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"addItem()\"\n>\n  Add item\n</button>\n\n<button\n  data-sky-id=\"remove-button\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"removeItems()\"\n>\n  Remove selected items\n</button>\n", styles: [".example-repeater-flex{display:flex;flex-wrap:wrap}.example-repeater-flex .example-repeater-item-title{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$3.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$3.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$3.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$4.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$4.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i2$4.λ12, selector: "sky-repeater-item-title" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsRepeaterAddRemoveExampleComponent, isStandalone: true, selector: "app-lists-repeater-add-remove-example", ngImport: i0, template: "<div class=\"sky-margin-stacked-lg\">\n  <sky-repeater\n    data-sky-id=\"repeater-example\"\n    [expandMode]=\"'single'\"\n    [reorderable]=\"true\"\n    (orderChange)=\"changeItems($event)\"\n  >\n    @for (item of items; track item) {\n      <sky-repeater-item\n        [selectable]=\"true\"\n        [tag]=\"item.note\"\n        [disabled]=\"item.isDisabled\"\n        [(isSelected)]=\"item.isSelected\"\n      >\n        <sky-repeater-item-title class=\"example-repeater-flex\">\n          <div class=\"example-repeater-item-title\">\n            {{ item.title }}\n          </div>\n          <div>\n            {{ item.status }}\n          </div>\n        </sky-repeater-item-title>\n        <sky-repeater-item-context-menu>\n          <sky-dropdown buttonType=\"context-menu\">\n            <sky-dropdown-menu>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 1')\">\n                  Action 1\n                </button>\n              </sky-dropdown-item>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 2')\">\n                  Action 2\n                </button>\n              </sky-dropdown-item>\n            </sky-dropdown-menu>\n          </sky-dropdown>\n        </sky-repeater-item-context-menu>\n        <sky-repeater-item-content>\n          {{ item.note }}\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    }\n  </sky-repeater>\n</div>\n\n<button\n  data-sky-id=\"add-button\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"addItem()\"\n>\n  Add item\n</button>\n\n<button\n  data-sky-id=\"remove-button\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"removeItems()\"\n>\n  Remove selected items\n</button>\n", styles: [".example-repeater-flex{display:flex;flex-wrap:wrap}.example-repeater-flex .example-repeater-item-title{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$3.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$3.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$3.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$4.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$4.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i2$4.λ12, selector: "sky-repeater-item-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsRepeaterAddRemoveExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-lists-repeater-add-remove-example', imports: [SkyDropdownModule, SkyRepeaterModule], template: "<div class=\"sky-margin-stacked-lg\">\n  <sky-repeater\n    data-sky-id=\"repeater-example\"\n    [expandMode]=\"'single'\"\n    [reorderable]=\"true\"\n    (orderChange)=\"changeItems($event)\"\n  >\n    @for (item of items; track item) {\n      <sky-repeater-item\n        [selectable]=\"true\"\n        [tag]=\"item.note\"\n        [(isSelected)]=\"item.isSelected\"\n      >\n        <sky-repeater-item-title class=\"example-repeater-flex\">\n          <div class=\"example-repeater-item-title\">\n            {{ item.title }}\n          </div>\n          <div>\n            {{ item.status }}\n          </div>\n        </sky-repeater-item-title>\n        <sky-repeater-item-context-menu>\n          <sky-dropdown buttonType=\"context-menu\">\n            <sky-dropdown-menu>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 1')\">\n                  Action 1\n                </button>\n              </sky-dropdown-item>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 2')\">\n                  Action 2\n                </button>\n              </sky-dropdown-item>\n            </sky-dropdown-menu>\n          </sky-dropdown>\n        </sky-repeater-item-context-menu>\n        <sky-repeater-item-content>\n          {{ item.note }}\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    }\n  </sky-repeater>\n</div>\n\n<button\n  data-sky-id=\"add-button\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"addItem()\"\n>\n  Add item\n</button>\n\n<button\n  data-sky-id=\"remove-button\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"removeItems()\"\n>\n  Remove selected items\n</button>\n", styles: [".example-repeater-flex{display:flex;flex-wrap:wrap}.example-repeater-flex .example-repeater-item-title{flex-grow:1}\n"] }]
+            args: [{ selector: 'app-lists-repeater-add-remove-example', imports: [SkyDropdownModule, SkyRepeaterModule], template: "<div class=\"sky-margin-stacked-lg\">\n  <sky-repeater\n    data-sky-id=\"repeater-example\"\n    [expandMode]=\"'single'\"\n    [reorderable]=\"true\"\n    (orderChange)=\"changeItems($event)\"\n  >\n    @for (item of items; track item) {\n      <sky-repeater-item\n        [selectable]=\"true\"\n        [tag]=\"item.note\"\n        [disabled]=\"item.isDisabled\"\n        [(isSelected)]=\"item.isSelected\"\n      >\n        <sky-repeater-item-title class=\"example-repeater-flex\">\n          <div class=\"example-repeater-item-title\">\n            {{ item.title }}\n          </div>\n          <div>\n            {{ item.status }}\n          </div>\n        </sky-repeater-item-title>\n        <sky-repeater-item-context-menu>\n          <sky-dropdown buttonType=\"context-menu\">\n            <sky-dropdown-menu>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 1')\">\n                  Action 1\n                </button>\n              </sky-dropdown-item>\n              <sky-dropdown-item>\n                <button type=\"button\" (click)=\"onActionClicked('Action 2')\">\n                  Action 2\n                </button>\n              </sky-dropdown-item>\n            </sky-dropdown-menu>\n          </sky-dropdown>\n        </sky-repeater-item-context-menu>\n        <sky-repeater-item-content>\n          {{ item.note }}\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    }\n  </sky-repeater>\n</div>\n\n<button\n  data-sky-id=\"add-button\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"addItem()\"\n>\n  Add item\n</button>\n\n<button\n  data-sky-id=\"remove-button\"\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"removeItems()\"\n>\n  Remove selected items\n</button>\n", styles: [".example-repeater-flex{display:flex;flex-wrap:wrap}.example-repeater-flex .example-repeater-item-title{flex-grow:1}\n"] }]
         }] });
 
 /**
@@ -12026,6 +12008,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             args: [{ selector: 'app-pages-action-hub-example', imports: [SkyActionHubModule], template: "<sky-action-hub\n  data-sky-id=\"action-hub\"\n  [needsAttention]=\"needsAttention\"\n  [recentLinks]=\"recentLinks\"\n  [relatedLinks]=\"relatedLinks\"\n  [settingsLinks]=\"settingsLinks\"\n  [title]=\"title\"\n>\n  <sky-action-hub-buttons>\n    @for (button of buttons; track button) {\n      <a\n        class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n        [attr.aria-label]=\"button.ariaLabel\"\n        [href]=\"button.permalink.url\"\n      >\n        {{ button.label }}\n      </a>\n    }\n  </sky-action-hub-buttons>\n\n  <sky-action-hub-content>\n    <h2 class=\"sky-font-heading-2\">Additional content</h2>\n    <p>More content can go here as needed for the functional area.</p>\n  </sky-action-hub-content>\n</sky-action-hub>\n" }]
         }] });
 
+/**
+ * @title Data manager with split view in a fit layout page.
+ * @docsDemoHidden
+ */
+class PagesPageDataManagerSplitViewFitLayoutExampleComponent {
+    set activeIndex(value) {
+        this.#_activeIndex = value;
+        this.activeRecord = this.items[this.#_activeIndex];
+        this.#loadFormGroup(this.activeRecord);
+    }
+    get activeIndex() {
+        return this.#_activeIndex;
+    }
+    #splitViewConfig;
+    #_activeIndex;
+    #dataManagerService;
+    #confirmSvc;
+    constructor() {
+        this.items = [
+            {
+                id: 1,
+                amount: 73.19,
+                date: '5/13/2020',
+                vendor: 'amazon.com',
+                receiptImage: 'amzn-office-supply-order-5-13-19.png',
+                approvedAmount: 73.19,
+                comments: '',
+            },
+            {
+                id: 2,
+                amount: 214.12,
+                date: '5/14/2020',
+                vendor: 'Office Max',
+                receiptImage: 'office-max-order.png',
+                approvedAmount: 214.12,
+                comments: '',
+            },
+            {
+                id: 3,
+                amount: 29.99,
+                date: '5/14/2020',
+                vendor: 'amazon.com',
+                receiptImage: 'amzn-office-supply-order-5-14-19.png',
+                approvedAmount: 29.99,
+                comments: '',
+            },
+            {
+                id: 4,
+                amount: 1500,
+                date: '5/15/2020',
+                vendor: 'Fresh Catering, LLC',
+                receiptImage: 'fresh-catering-llc-order.png',
+                approvedAmount: 1500,
+                comments: '',
+            },
+        ];
+        this.splitViewStream = new Subject();
+        this.dock = 'fill';
+        this.#splitViewConfig = {
+            id: 'dataManagerView',
+            name: 'Split View Data Manager View',
+            sortEnabled: true,
+            searchEnabled: true,
+        };
+        this.#_activeIndex = 0;
+        this.#dataManagerService = inject(SkyDataManagerService);
+        this.#confirmSvc = inject(SkyConfirmService);
+        // Start with the first item selected.
+        this.activeIndex = 0;
+        this.activeRecord = this.items[this.activeIndex];
+        this.splitViewDemoForm = new FormGroup({
+            approvedAmount: new FormControl(this.activeRecord.approvedAmount, {
+                nonNullable: true,
+            }),
+            comments: new FormControl(this.activeRecord.comments, {
+                nonNullable: true,
+            }),
+        });
+    }
+    ngOnInit() {
+        this.#dataManagerService.initDataManager({
+            activeViewId: 'dataManagerView',
+            dataManagerConfig: {},
+            defaultDataState: new SkyDataManagerState({
+                views: [
+                    {
+                        viewId: 'dataManagerView',
+                    },
+                ],
+            }),
+        });
+        this.#dataManagerService.initDataView(this.#splitViewConfig);
+    }
+    onItemClick(index) {
+        // Prevent workspace from loading new data if the current workspace form is dirty.
+        if (this.splitViewDemoForm.dirty && index !== this.activeIndex) {
+            this.#openConfirmModal(index);
+        }
+        else {
+            this.#loadWorkspace(index);
+        }
+    }
+    onApprove() {
+        console.log('Approved clicked!');
+        this.#saveForm();
+    }
+    onDeny() {
+        console.log('Denied clicked!');
+    }
+    #loadFormGroup(record) {
+        this.splitViewDemoForm = new FormGroup({
+            approvedAmount: new FormControl(record.approvedAmount, {
+                nonNullable: true,
+            }),
+            comments: new FormControl(record.comments, { nonNullable: true }),
+        });
+    }
+    #loadWorkspace(index) {
+        this.activeIndex = index;
+        this.#setFocusInWorkspace();
+    }
+    #openConfirmModal(index) {
+        this.#confirmSvc
+            .open({
+            message: 'You have unsaved work. Would you like to save it before you change records?',
+            type: SkyConfirmType.Custom,
+            buttons: [
+                {
+                    action: 'yes',
+                    text: 'Yes',
+                    styleType: 'primary',
+                },
+                {
+                    action: 'discard',
+                    text: 'Discard changes',
+                    styleType: 'link',
+                },
+            ],
+        })
+            .closed.subscribe((closeArgs) => {
+            if (closeArgs.action.toLowerCase() === 'yes') {
+                this.#saveForm();
+            }
+            this.#loadWorkspace(index);
+        });
+    }
+    #saveForm() {
+        this.activeRecord.approvedAmount =
+            this.splitViewDemoForm.value.approvedAmount ?? 0;
+        this.activeRecord.comments = this.splitViewDemoForm.value.comments ?? '';
+        this.splitViewDemoForm.reset(this.splitViewDemoForm.value);
+    }
+    #setFocusInWorkspace() {
+        const message = {
+            type: SkySplitViewMessageType.FocusWorkspace,
+        };
+        this.splitViewStream.next(message);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PagesPageDataManagerSplitViewFitLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PagesPageDataManagerSplitViewFitLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-split-view-data-manager-example", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-page layout=\"fit\">\n  <sky-page-header pageTitle=\"Split view with data manager\" />\n  <sky-page-content>\n    <sky-data-manager [dock]=\"dock\">\n      <sky-data-manager-toolbar />\n      <sky-data-view viewId=\"dataManagerView\">\n        <sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n          <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\">\n            <sky-repeater [activeIndex]=\"activeIndex\">\n              @for (item of items; track item; let i = $index) {\n                <sky-repeater-item\n                  (click)=\"onItemClick(i)\"\n                  (keyup.enter)=\"onItemClick(i)\"\n                >\n                  <sky-repeater-item-content>\n                    {{ item.amount }} <br />\n                    {{ item.date }} <br />\n                    {{ item.vendor }}\n                  </sky-repeater-item-content>\n                </sky-repeater-item>\n              }\n            </sky-repeater>\n          </sky-split-view-drawer>\n\n          <sky-split-view-workspace ariaLabel=\"Transaction form\">\n            <sky-split-view-workspace-content class=\"sky-padding-even-xl\">\n              <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n                <sky-description-list labelWidth=\"150px\">\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Receipt amount\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.amount }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Date\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.date }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Vendor\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.vendor }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Receipt image\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.receiptImage }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                </sky-description-list>\n                <sky-input-box labelText=\"Approved amount\" stacked=\"true\">\n                  <input formControlName=\"approvedAmount\" type=\"text\" />\n                </sky-input-box>\n                <sky-input-box labelText=\"Comments\">\n                  <textarea formControlName=\"comments\"></textarea>\n                </sky-input-box>\n              </form>\n            </sky-split-view-workspace-content>\n            <sky-split-view-workspace-footer>\n              <sky-summary-action-bar>\n                <sky-summary-action-bar-actions>\n                  <sky-summary-action-bar-primary-action\n                    (actionClick)=\"onApprove()\"\n                  >\n                    Approve expense\n                  </sky-summary-action-bar-primary-action>\n                  <sky-summary-action-bar-secondary-actions>\n                    <sky-summary-action-bar-secondary-action\n                      (actionClick)=\"onDeny()\"\n                    >\n                      Deny expense\n                    </sky-summary-action-bar-secondary-action>\n                  </sky-summary-action-bar-secondary-actions>\n                </sky-summary-action-bar-actions>\n              </sky-summary-action-bar>\n            </sky-split-view-workspace-footer>\n          </sky-split-view-workspace>\n        </sky-split-view>\n      </sky-data-view>\n    </sky-data-manager>\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$d.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$d.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$d.λ7, selector: "sky-page-content" }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$2.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i3$2.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i3$2.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$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: SkyRepeaterModule }, { kind: "component", type: i2$4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$4.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySplitViewModule }, { kind: "component", type: i5.λ1, selector: "sky-split-view", inputs: ["backButtonText", "bindHeightToWindow", "dock", "messageStream"] }, { kind: "component", type: i5.λ2, selector: "sky-split-view-drawer", inputs: ["ariaLabel", "width"] }, { kind: "component", type: i5.λ3, selector: "sky-split-view-workspace", inputs: ["ariaLabel"] }, { kind: "component", type: i5.λ4, selector: "sky-split-view-workspace-content" }, { kind: "component", type: i5.λ5, selector: "sky-split-view-workspace-footer" }, { kind: "ngmodule", type: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar", inputs: ["formErrors"] }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PagesPageDataManagerSplitViewFitLayoutExampleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-pages-page-split-view-data-manager-example', imports: [
+                        SkyPageModule,
+                        SkyDataManagerModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SkyDescriptionListModule,
+                        SkyInputBoxModule,
+                        SkyRepeaterModule,
+                        SkySplitViewModule,
+                        SkySummaryActionBarModule,
+                    ], providers: [SkyDataManagerService], template: "<sky-page layout=\"fit\">\n  <sky-page-header pageTitle=\"Split view with data manager\" />\n  <sky-page-content>\n    <sky-data-manager [dock]=\"dock\">\n      <sky-data-manager-toolbar />\n      <sky-data-view viewId=\"dataManagerView\">\n        <sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n          <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\">\n            <sky-repeater [activeIndex]=\"activeIndex\">\n              @for (item of items; track item; let i = $index) {\n                <sky-repeater-item\n                  (click)=\"onItemClick(i)\"\n                  (keyup.enter)=\"onItemClick(i)\"\n                >\n                  <sky-repeater-item-content>\n                    {{ item.amount }} <br />\n                    {{ item.date }} <br />\n                    {{ item.vendor }}\n                  </sky-repeater-item-content>\n                </sky-repeater-item>\n              }\n            </sky-repeater>\n          </sky-split-view-drawer>\n\n          <sky-split-view-workspace ariaLabel=\"Transaction form\">\n            <sky-split-view-workspace-content class=\"sky-padding-even-xl\">\n              <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n                <sky-description-list labelWidth=\"150px\">\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Receipt amount\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.amount }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Date\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.date }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Vendor\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.vendor }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                  <sky-description-list-content>\n                    <sky-description-list-term>\n                      Receipt image\n                    </sky-description-list-term>\n                    <sky-description-list-description>\n                      {{ activeRecord.receiptImage }}\n                    </sky-description-list-description>\n                  </sky-description-list-content>\n                </sky-description-list>\n                <sky-input-box labelText=\"Approved amount\" stacked=\"true\">\n                  <input formControlName=\"approvedAmount\" type=\"text\" />\n                </sky-input-box>\n                <sky-input-box labelText=\"Comments\">\n                  <textarea formControlName=\"comments\"></textarea>\n                </sky-input-box>\n              </form>\n            </sky-split-view-workspace-content>\n            <sky-split-view-workspace-footer>\n              <sky-summary-action-bar>\n                <sky-summary-action-bar-actions>\n                  <sky-summary-action-bar-primary-action\n                    (actionClick)=\"onApprove()\"\n                  >\n                    Approve expense\n                  </sky-summary-action-bar-primary-action>\n                  <sky-summary-action-bar-secondary-actions>\n                    <sky-summary-action-bar-secondary-action\n                      (actionClick)=\"onDeny()\"\n                    >\n                      Deny expense\n                    </sky-summary-action-bar-secondary-action>\n                  </sky-summary-action-bar-secondary-actions>\n                </sky-summary-action-bar-actions>\n              </sky-summary-action-bar>\n            </sky-split-view-workspace-footer>\n          </sky-split-view-workspace>\n        </sky-split-view>\n      </sky-data-view>\n    </sky-data-manager>\n  </sky-page-content>\n</sky-page>\n" }]
+        }], ctorParameters: () => [] });
+
 class TileMyActionsComponent {
     constructor() {
         this.items = [
@@ -12264,7 +12422,7 @@ let ListPageContentComponent$1 = class ListPageContentComponent {
         this.#dataManagerService.initDataView(this.#viewConfig);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ListPageContentComponent, isStandalone: true, selector: "app-list-page-content", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button\n          aria-label=\"New dashboard\"\n          class=\"sky-btn sky-btn-default\"\n          type=\"button\"\n        >\n          <sky-icon iconName=\"add\" />\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n    </sky-data-manager-toolbar>\n  </div>\n  <div class=\"sky-margin-stacked-sm\">\n    <sky-key-info class=\"sky-padding-horizontal-sm\" layout=\"horizontal\">\n      <sky-key-info-value class=\"sky-font-display-4\">\n        {{ items.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Dashboards </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"items\" />\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: AgGridModule }, { kind: "component", type: i1$4.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "ngmodule", type: SkyAgGridModule }, { kind: "directive", type: i2$1.λ14, selector: "[skyAgGridDataManagerAdapter]", inputs: ["viewId"] }, { kind: "component", type: i2$1.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$2.λ2, selector: "sky-data-manager" }, { kind: "component", type: i3$2.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i3$2.λ4, selector: "sky-data-manager-toolbar-primary-item" }, { kind: "component", type: i3$2.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ListPageContentComponent, isStandalone: true, selector: "app-list-page-content", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button\n          aria-label=\"New dashboard\"\n          class=\"sky-btn sky-btn-default\"\n          type=\"button\"\n        >\n          <sky-icon iconName=\"add\" />\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n    </sky-data-manager-toolbar>\n  </div>\n  <div class=\"sky-margin-stacked-sm\">\n    <sky-key-info class=\"sky-padding-horizontal-sm\" layout=\"horizontal\">\n      <sky-key-info-value class=\"sky-font-display-4\">\n        {{ items.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Dashboards </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"items\" />\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: AgGridModule }, { kind: "component", type: i1$4.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "ngmodule", type: SkyAgGridModule }, { kind: "directive", type: i2$1.λ14, selector: "[skyAgGridDataManagerAdapter]", inputs: ["viewId"] }, { kind: "component", type: i2$1.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$2.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i3$2.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i3$2.λ4, selector: "sky-data-manager-toolbar-primary-item" }, { kind: "component", type: i3$2.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }] }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListPageContentComponent$1, decorators: [{
             type: Component,
@@ -12385,7 +12543,7 @@ class ListPageContactsGridComponent {
         this.#dataManagerService.initDataView(this.#viewConfig);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListPageContactsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ListPageContactsGridComponent, isStandalone: true, selector: "app-list-page-contacts-grid", inputs: { contacts: "contacts" }, providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button\n          aria-label=\"New contact\"\n          class=\"sky-btn sky-btn-default\"\n          type=\"button\"\n        >\n          <sky-icon iconName=\"add\" />\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n    </sky-data-manager-toolbar>\n  </div>\n  <div class=\"sky-margin-stacked-sm\">\n    <sky-key-info layout=\"horizontal\" class=\"sky-padding-horizontal-sm\">\n      <sky-key-info-value class=\"sky-font-display-4\">\n        {{ contacts.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Contacts </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"contacts\" />\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: AgGridModule }, { kind: "component", type: i1$4.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "ngmodule", type: SkyAgGridModule }, { kind: "directive", type: i2$1.λ14, selector: "[skyAgGridDataManagerAdapter]", inputs: ["viewId"] }, { kind: "component", type: i2$1.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$2.λ2, selector: "sky-data-manager" }, { kind: "component", type: i3$2.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i3$2.λ4, selector: "sky-data-manager-toolbar-primary-item" }, { kind: "component", type: i3$2.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ListPageContactsGridComponent, isStandalone: true, selector: "app-list-page-contacts-grid", inputs: { contacts: "contacts" }, providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button\n          aria-label=\"New contact\"\n          class=\"sky-btn sky-btn-default\"\n          type=\"button\"\n        >\n          <sky-icon iconName=\"add\" />\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n    </sky-data-manager-toolbar>\n  </div>\n  <div class=\"sky-margin-stacked-sm\">\n    <sky-key-info layout=\"horizontal\" class=\"sky-padding-horizontal-sm\">\n      <sky-key-info-value class=\"sky-font-display-4\">\n        {{ contacts.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Contacts </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"contacts\" />\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: AgGridModule }, { kind: "component", type: i1$4.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "ngmodule", type: SkyAgGridModule }, { kind: "directive", type: i2$1.λ14, selector: "[skyAgGridDataManagerAdapter]", inputs: ["viewId"] }, { kind: "component", type: i2$1.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$2.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i3$2.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i3$2.λ4, selector: "sky-data-manager-toolbar-primary-item" }, { kind: "component", type: i3$2.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListPageContactsGridComponent, decorators: [{
             type: Component,
@@ -12706,7 +12864,7 @@ class RecordPageAttachmentsTabComponent {
         this.#dataManagerService.initDataView(this.#viewConfig);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RecordPageAttachmentsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: RecordPageAttachmentsTabComponent, isStandalone: true, selector: "app-record-page-attachments-tab", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button\n          aria-label=\"New attachment\"\n          class=\"sky-btn sky-btn-default\"\n          type=\"button\"\n        >\n          <sky-icon iconName=\"add\" />\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n    </sky-data-manager-toolbar>\n  </div>\n  <div class=\"sky-margin-stacked-sm\">\n    <sky-key-info layout=\"horizontal\" class=\"sky-padding-horizontal-sm\">\n      <sky-key-info-value class=\"sky-font-display-4\">\n        {{ items.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Attachments </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"items\" />\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: AgGridModule }, { kind: "component", type: i1$4.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "ngmodule", type: SkyAgGridModule }, { kind: "directive", type: i2$1.λ14, selector: "[skyAgGridDataManagerAdapter]", inputs: ["viewId"] }, { kind: "component", type: i2$1.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$2.λ2, selector: "sky-data-manager" }, { kind: "component", type: i3$2.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i3$2.λ4, selector: "sky-data-manager-toolbar-primary-item" }, { kind: "component", type: i3$2.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: RecordPageAttachmentsTabComponent, isStandalone: true, selector: "app-record-page-attachments-tab", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button\n          aria-label=\"New attachment\"\n          class=\"sky-btn sky-btn-default\"\n          type=\"button\"\n        >\n          <sky-icon iconName=\"add\" />\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n    </sky-data-manager-toolbar>\n  </div>\n  <div class=\"sky-margin-stacked-sm\">\n    <sky-key-info layout=\"horizontal\" class=\"sky-padding-horizontal-sm\">\n      <sky-key-info-value class=\"sky-font-display-4\">\n        {{ items.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Attachments </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"items\" />\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: AgGridModule }, { kind: "component", type: i1$4.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "ngmodule", type: SkyAgGridModule }, { kind: "directive", type: i2$1.λ14, selector: "[skyAgGridDataManagerAdapter]", inputs: ["viewId"] }, { kind: "component", type: i2$1.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$2.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i3$2.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i3$2.λ4, selector: "sky-data-manager-toolbar-primary-item" }, { kind: "component", type: i3$2.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RecordPageAttachmentsTabComponent, decorators: [{
             type: Component,
@@ -14432,5 +14590,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarsSummaryActionBarBasicExampleComponent, ActionBarsSummaryActionBarErrorExampleComponent, ActionBarsSummaryActionBarModalExampleComponent, ActionBarsSummaryActionBarTabExampleComponent, AgGridDataEntryGridBasicExampleComponent, AgGridDataEntryGridDataManagerAddedExampleComponent, AgGridDataEntryGridFocusExampleComponent, AgGridDataEntryGridInlineHelpExampleComponent, AgGridDataGridBasicExampleComponent, AgGridDataGridBasicMultiselectExampleComponent, AgGridDataGridDataManagerExampleComponent, AgGridDataGridDataManagerMultiselectExampleComponent, AgGridDataGridInlineHelpExampleComponent, AgGridDataGridPagingExampleComponent, AgGridDataGridTemplateRefColumnExampleComponent, AgGridDataGridTopScrollExampleComponent, AngularTreeComponentAngularTreeBasicExampleComponent, AngularTreeComponentAngularTreeHelpKeyExampleComponent, AutonumericCurrencyExampleComponent, AutonumericInternationalFormattingExampleComponent, AutonumericOptionsProviderExampleComponent, AutonumericPresetExampleComponent, AvatarExampleComponent, ColorpickerBasicExampleComponent, ColorpickerHelpKeyExampleComponent, ColorpickerProgrammaticExampleComponent, CoreIdExampleComponent, CoreMediaQueryBasicExampleComponent, CoreMediaQueryResponsiveHostExampleComponent, CoreNumericBasicExampleComponent, DataManagerBasicExampleComponent, DatetimeDatePipeBasicExampleComponent, DatetimeDateRangePickerBasicExampleComponent, DatetimeDateRangePickerCustomCalculatorExampleComponent, DatetimeDateRangePickerHelpKeyExampleComponent, DatetimeDatepickerBasicExampleComponent, DatetimeDatepickerCustomDatesExampleComponent, DatetimeDatepickerFuzzyExampleComponent, DatetimeTimepickerBasicExampleComponent, ErrorsErrorEmbeddedExampleComponent, ErrorsErrorModalExampleComponent, FilterBarBasicExampleComponent, FlyoutBasicExampleComponent, FlyoutCustomHeadersExampleComponent, FormsCharacterCountExampleComponent, FormsCheckboxBasicExampleComponent, FormsCheckboxHelpKeyExampleComponent, FormsCheckboxIconGroupExampleComponent, FormsFieldGroupBasicExampleComponent, FormsFieldGroupHelpKeyExampleComponent, FormsFileAttachmentBasicExampleComponent, FormsFileAttachmentHelpKeyExampleComponent, FormsFileDropBasicExampleComponent, FormsFileDropHelpKeyExampleComponent, FormsInputBoxBasicExampleComponent, FormsInputBoxWithCustomFormErrorsExampleComponent, FormsRadioHelpKeyExampleComponent, FormsRadioIconExampleComponent, FormsRadioStandardExampleComponent, FormsSelectionBoxCheckboxExampleComponent, FormsSelectionBoxRadioExampleComponent, FormsToggleSwitchBasicExampleComponent, FormsToggleSwitchHelpKeyExampleComponent, HelpInlineActionClickExampleComponent, HelpInlineHelpKeyExampleComponent, HelpInlinePopoverExampleComponent, IconBasicExampleComponent, IconIconButtonExampleComponent, IndicatorsAlertBasicExampleComponent, IndicatorsIllustrationBasicExampleComponent, IndicatorsKeyInfoBasicExampleComponent, IndicatorsKeyInfoHelpKeyExampleComponent, IndicatorsLabelBasicExampleComponent, IndicatorsStatusIndicatorBasicExampleComponent, IndicatorsStatusIndicatorHelpKeyExampleComponent, IndicatorsTextHighlightBasicExampleComponent, IndicatorsTokensBasicExampleComponent, IndicatorsTokensCustomExampleComponent, IndicatorsWaitElementExampleComponent, IndicatorsWaitPageExampleComponent, InlineFormBasicExampleComponent, InlineFormCustomButtonsExampleComponent, InlineFormRepeatersExampleComponent, LayoutActionButtonBasicExampleComponent, LayoutActionButtonPermalinkExampleComponent, LayoutBackToTopInfiniteScrollExampleComponent, LayoutBackToTopRepeaterExampleComponent, LayoutBoxBasicExampleComponent, LayoutBoxHelpKeyExampleComponent, LayoutCardBasicExampleComponent, LayoutDefinitionListBasicExampleComponent, LayoutDescriptionListHelpKeyExampleComponent, LayoutDescriptionListHorizontalExampleComponent, LayoutDescriptionListInlineHelpExampleComponent, LayoutDescriptionListLongDescriptionExampleComponent, LayoutDescriptionListVerticalExampleComponent, LayoutFluidGridExampleComponent, LayoutFormatExampleComponent, LayoutInlineDeleteCustomExampleComponent, LayoutInlineDeleteRepeaterExampleComponent, LayoutPageSummaryBasicExampleComponent, LayoutTextExpandInlineExampleComponent, LayoutTextExpandModalExampleComponent, LayoutTextExpandNewlineExampleComponent, LayoutTextExpandRepeaterExampleComponent, LayoutToolbarBasicExampleComponent, LayoutToolbarSectionedExampleComponent, ListsFilterInlineExampleComponent, ListsFilterModalExampleComponent, ListsInfiniteScrollRepeaterExampleComponent, ListsPagingBasicExampleComponent, ListsPagingWithContentExampleComponent, ListsRepeaterAddRemoveExampleComponent, ListsRepeaterBasicExampleComponent, ListsRepeaterInlineFormExampleComponent, ListsSortBasicExampleComponent, LookupAddItemExampleComponent, LookupAutocompleteAdvancedExampleComponent, LookupAutocompleteAnyValueExampleComponent, LookupAutocompleteBasicExampleComponent, LookupAutocompleteCustomSearchExampleComponent, LookupAutocompleteSearchFiltersExampleComponent, LookupCountryFieldBasicExampleComponent, LookupCustomPickerExampleComponent, LookupMultiSelectExampleComponent, LookupResultTemplatesExampleComponent, LookupSearchBasicExampleComponent, LookupSelectionModalAddItemExampleComponent, LookupSelectionModalBasicExampleComponent, LookupSingleSelectExampleComponent, ModalsConfirmBasicWithControllerExampleComponent, ModalsConfirmBasicWithHarnessExampleComponent, ModalsModalBasicWithControllerExampleComponent, ModalsModalBasicWithHarnessExampleComponent, ModalsModalBasicWithHarnessHelpKeyExampleComponent, ModalsModalWithErrorExampleComponent, NavbarExampleComponent, PagesActionHubExampleComponent, PagesPageHomePageBlocksLayoutExampleComponent, PagesPageListPageListLayoutExampleComponent, PagesPageListPageTabsLayoutExampleComponent, PagesPageRecordPageBlocksLayoutExampleComponent, PagesPageRecordPageTabsLayoutExampleComponent, PagesPageSplitViewPageFitLayoutExampleComponent, PhoneFieldBasicExampleComponent, PopoversDropdownBasicExampleComponent, PopoversPopoverBasicExampleComponent, PopoversPopoverProgrammaticExampleComponent, ProgressIndicatorPassiveIndicatorBasicExampleComponent, ProgressIndicatorWaterfallIndicatorBasicExampleComponent, ProgressIndicatorWizardBasicExampleComponent, RouterHrefBasicExampleComponent, SplitViewBasicExampleComponent, SplitViewPageBoundExampleComponent, TabsDynamicAddCloseExampleComponent, TabsDynamicExampleComponent, TabsSectionedFormModalExampleComponent, TabsStaticAddCloseExampleComponent, TabsStaticExampleComponent, TabsVerticalTabsBasicExampleComponent, TabsVerticalTabsGroupedExampleComponent, TabsVerticalTabsMixedExampleComponent, TabsWizardBasicExampleComponent, TextEditorExampleComponent, TextEditorHelpKeyExampleComponent, TextEditorRichTextDisplayExampleComponent, TilesBasicExampleComponent, ToastBasicExampleComponent, ToastCustomComponentExampleComponent, ValidationEmailValidationControlValidatorExampleComponent, ValidationEmailValidationDirectiveExampleComponent, ValidationUrlValidationControlValidatorExampleComponent, ValidationUrlValidationDirectiveExampleComponent };
+export { ActionBarsSummaryActionBarBasicExampleComponent, ActionBarsSummaryActionBarErrorExampleComponent, ActionBarsSummaryActionBarModalExampleComponent, ActionBarsSummaryActionBarTabExampleComponent, AgGridDataEntryGridBasicExampleComponent, AgGridDataEntryGridDataManagerAddedExampleComponent, AgGridDataEntryGridFocusExampleComponent, AgGridDataEntryGridInlineHelpExampleComponent, AgGridDataGridBasicExampleComponent, AgGridDataGridBasicMultiselectExampleComponent, AgGridDataGridDataManagerExampleComponent, AgGridDataGridDataManagerMultiselectExampleComponent, AgGridDataGridInlineHelpExampleComponent, AgGridDataGridPagingExampleComponent, AgGridDataGridTemplateRefColumnExampleComponent, AgGridDataGridTopScrollExampleComponent, AngularTreeComponentAngularTreeBasicExampleComponent, AngularTreeComponentAngularTreeHelpKeyExampleComponent, AutonumericCurrencyExampleComponent, AutonumericInternationalFormattingExampleComponent, AutonumericOptionsProviderExampleComponent, AutonumericPresetExampleComponent, AvatarExampleComponent, ColorpickerBasicExampleComponent, ColorpickerHelpKeyExampleComponent, ColorpickerProgrammaticExampleComponent, CoreIdExampleComponent, CoreMediaQueryBasicExampleComponent, CoreMediaQueryResponsiveHostExampleComponent, CoreNumericBasicExampleComponent, DataManagerBasicExampleComponent, DatetimeDatePipeBasicExampleComponent, DatetimeDateRangePickerBasicExampleComponent, DatetimeDateRangePickerCustomCalculatorExampleComponent, DatetimeDateRangePickerHelpKeyExampleComponent, DatetimeDatepickerBasicExampleComponent, DatetimeDatepickerCustomDatesExampleComponent, DatetimeDatepickerFuzzyExampleComponent, DatetimeTimepickerBasicExampleComponent, ErrorsErrorEmbeddedExampleComponent, ErrorsErrorModalExampleComponent, FilterBarLookupExampleComponent, FilterBarModalExampleComponent, FilterBarSelectableExampleComponent, FlyoutBasicExampleComponent, FlyoutCustomHeadersExampleComponent, FormsCharacterCountExampleComponent, FormsCheckboxBasicExampleComponent, FormsCheckboxHelpKeyExampleComponent, FormsCheckboxIconGroupExampleComponent, FormsFieldGroupBasicExampleComponent, FormsFieldGroupHelpKeyExampleComponent, FormsFileAttachmentBasicExampleComponent, FormsFileAttachmentHelpKeyExampleComponent, FormsFileDropBasicExampleComponent, FormsFileDropHelpKeyExampleComponent, FormsInputBoxBasicExampleComponent, FormsInputBoxWithCustomFormErrorsExampleComponent, FormsRadioHelpKeyExampleComponent, FormsRadioIconExampleComponent, FormsRadioStandardExampleComponent, FormsSelectionBoxCheckboxExampleComponent, FormsSelectionBoxRadioExampleComponent, FormsToggleSwitchBasicExampleComponent, FormsToggleSwitchHelpKeyExampleComponent, HelpInlineActionClickExampleComponent, HelpInlineHelpKeyExampleComponent, HelpInlinePopoverExampleComponent, IconBasicExampleComponent, IconIconButtonExampleComponent, IndicatorsAlertBasicExampleComponent, IndicatorsIllustrationBasicExampleComponent, IndicatorsKeyInfoBasicExampleComponent, IndicatorsKeyInfoHelpKeyExampleComponent, IndicatorsLabelBasicExampleComponent, IndicatorsStatusIndicatorBasicExampleComponent, IndicatorsStatusIndicatorHelpKeyExampleComponent, IndicatorsTextHighlightBasicExampleComponent, IndicatorsTokensBasicExampleComponent, IndicatorsTokensCustomExampleComponent, IndicatorsWaitElementExampleComponent, IndicatorsWaitPageExampleComponent, InlineFormBasicExampleComponent, InlineFormCustomButtonsExampleComponent, InlineFormRepeatersExampleComponent, LayoutActionButtonBasicExampleComponent, LayoutActionButtonPermalinkExampleComponent, LayoutBackToTopInfiniteScrollExampleComponent, LayoutBackToTopRepeaterExampleComponent, LayoutBoxBasicExampleComponent, LayoutBoxHelpKeyExampleComponent, LayoutCardBasicExampleComponent, LayoutDefinitionListBasicExampleComponent, LayoutDescriptionListHelpKeyExampleComponent, LayoutDescriptionListHorizontalExampleComponent, LayoutDescriptionListInlineHelpExampleComponent, LayoutDescriptionListLongDescriptionExampleComponent, LayoutDescriptionListVerticalExampleComponent, LayoutFluidGridExampleComponent, LayoutFormatExampleComponent, LayoutInlineDeleteCustomExampleComponent, LayoutInlineDeleteRepeaterExampleComponent, LayoutPageSummaryBasicExampleComponent, LayoutTextExpandInlineExampleComponent, LayoutTextExpandModalExampleComponent, LayoutTextExpandNewlineExampleComponent, LayoutTextExpandRepeaterExampleComponent, LayoutToolbarBasicExampleComponent, LayoutToolbarSectionedExampleComponent, ListsFilterInlineExampleComponent, ListsFilterModalExampleComponent, ListsInfiniteScrollRepeaterExampleComponent, ListsPagingBasicExampleComponent, ListsPagingWithContentExampleComponent, ListsRepeaterAddRemoveExampleComponent, ListsRepeaterBasicExampleComponent, ListsRepeaterInlineFormExampleComponent, ListsSortBasicExampleComponent, LookupAddItemExampleComponent, LookupAutocompleteAdvancedExampleComponent, LookupAutocompleteAnyValueExampleComponent, LookupAutocompleteBasicExampleComponent, LookupAutocompleteCustomSearchExampleComponent, LookupAutocompleteSearchFiltersExampleComponent, LookupCountryFieldBasicExampleComponent, LookupCustomPickerExampleComponent, LookupMultiSelectExampleComponent, LookupResultTemplatesExampleComponent, LookupSearchBasicExampleComponent, LookupSelectionModalAddItemExampleComponent, LookupSelectionModalBasicExampleComponent, LookupSingleSelectExampleComponent, ModalsConfirmBasicWithControllerExampleComponent, ModalsConfirmBasicWithHarnessExampleComponent, ModalsModalBasicWithControllerExampleComponent, ModalsModalBasicWithHarnessExampleComponent, ModalsModalBasicWithHarnessHelpKeyExampleComponent, ModalsModalWithErrorExampleComponent, NavbarExampleComponent, PagesActionHubExampleComponent, PagesPageDataManagerSplitViewFitLayoutExampleComponent, PagesPageHomePageBlocksLayoutExampleComponent, PagesPageListPageListLayoutExampleComponent, PagesPageListPageTabsLayoutExampleComponent, PagesPageRecordPageBlocksLayoutExampleComponent, PagesPageRecordPageTabsLayoutExampleComponent, PagesPageSplitViewPageFitLayoutExampleComponent, PhoneFieldBasicExampleComponent, PopoversDropdownBasicExampleComponent, PopoversPopoverBasicExampleComponent, PopoversPopoverProgrammaticExampleComponent, ProgressIndicatorPassiveIndicatorBasicExampleComponent, ProgressIndicatorWaterfallIndicatorBasicExampleComponent, ProgressIndicatorWizardBasicExampleComponent, RouterHrefBasicExampleComponent, SplitViewBasicExampleComponent, SplitViewPageBoundExampleComponent, TabsDynamicAddCloseExampleComponent, TabsDynamicExampleComponent, TabsSectionedFormModalExampleComponent, TabsStaticAddCloseExampleComponent, TabsStaticExampleComponent, TabsVerticalTabsBasicExampleComponent, TabsVerticalTabsGroupedExampleComponent, TabsVerticalTabsMixedExampleComponent, TabsWizardBasicExampleComponent, TextEditorExampleComponent, TextEditorHelpKeyExampleComponent, TextEditorRichTextDisplayExampleComponent, TilesBasicExampleComponent, ToastBasicExampleComponent, ToastCustomComponentExampleComponent, ValidationEmailValidationControlValidatorExampleComponent, ValidationEmailValidationDirectiveExampleComponent, ValidationUrlValidationControlValidatorExampleComponent, ValidationUrlValidationDirectiveExampleComponent };
 //# sourceMappingURL=skyux-code-examples.mjs.map