@skyux/code-examples 13.5.2 → 13.6.0

package/fesm2022/skyux-code-examples.mjs

@@ -7,7 +7,7 @@ import { SkyKeyInfoModule, SkyStatusIndicatorModule, SkyAlertModule, SkyIllustra
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/forms';
 import { FormControl, FormBuilder, ReactiveFormsModule, FormsModule, Validators, FormGroup } from '@angular/forms';
-import { switchMap, of, Subject, takeUntil, Subscription, delay, tap, shareReplay, map as map$1 } from 'rxjs';
+import { switchMap, of, Subject, takeUntil, Subscription, delay as delay$1, tap, shareReplay, map as map$1 } from 'rxjs';
 import * as i3 from '@skyux/modals';
 import { SkyModalInstance, SkyModalModule, SkyModalService, SkyConfirmService, SkyConfirmType } from '@skyux/modals';
 import * as i1$2 from '@skyux/tabs';
@@ -23,45 +23,45 @@ import { AgGridModule } from 'ag-grid-angular';
 import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
 import * as i1$3 from '@skyux/popovers';
 import { SkyDropdownModule, SkyPopoverModule, SkyPopoverMessageType } from '@skyux/popovers';
-import * as i3$2 from '@skyux/data-manager';
+import * as i1$6 from '@skyux/data-manager';
 import { SkyDataManagerFilterModalContext, SkyDataManagerState, SkyDataManagerService, SkyDataManagerModule } from '@skyux/data-manager';
 import * as i3$1 from '@skyux/core';
 import { SkyIdModule, SkyMediaQueryService, SkyResponsiveHostDirective, SkyNumericModule, SkyUIConfigService, SkyHelpService } from '@skyux/core';
 import * as i2$3 from '@skyux/forms';
 import { SkyCheckboxModule, SkyInputBoxModule, SkyRadioModule, SkyCharacterCounterModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileDropModule, SkySelectionBoxModule, SkyToggleSwitchModule, SkyFormErrorModule } from '@skyux/forms';
-import * as i1$6 from '@skyux/help-inline';
+import * as i1$7 from '@skyux/help-inline';
 import { SkyHelpInlineModule } from '@skyux/help-inline';
+import * as i2$4 from '@skyux/filter-bar';
+import { SkyFilterItemModalInstance, SkyFilterBarModule } from '@skyux/filter-bar';
+import * as i2$5 from '@skyux/lists';
+import { SkyListSummaryModule, SkyPagingModule, SkyRepeaterModule, SkyInfiniteScrollModule, SkyFilterModule, SkySortModule } from '@skyux/lists';
+import { delay, map, filter, takeUntil as takeUntil$1, take } from 'rxjs/operators';
 import * as i1$c from '@angular/router';
 import { ActivatedRoute, Router, NavigationEnd, RouterModule } from '@angular/router';
-import * as i2$4 from '@skyux/lists';
-import { SkyPagingModule, SkyRepeaterModule, SkyInfiniteScrollModule, SkyFilterModule, SkyListSummaryModule, SkySortModule } from '@skyux/lists';
-import { map, filter, takeUntil as takeUntil$1, delay as delay$1, take } from 'rxjs/operators';
-import * as i2$5 from '@blackbaud/angular-tree-component';
+import * as i2$6 from '@blackbaud/angular-tree-component';
 import { TreeModule } from '@blackbaud/angular-tree-component';
-import * as i1$7 from '@skyux/angular-tree-component';
+import * as i1$8 from '@skyux/angular-tree-component';
 import { SkyAngularTreeModule } from '@skyux/angular-tree-component';
-import * as i2$6 from '@skyux/autonumeric';
+import * as i2$7 from '@skyux/autonumeric';
 import { SkyAutonumericModule, SkyAutonumericOptionsProvider } from '@skyux/autonumeric';
-import * as i1$8 from '@skyux/avatar';
+import * as i1$9 from '@skyux/avatar';
 import { SkyAvatarModule } from '@skyux/avatar';
-import * as i2$7 from '@skyux/colorpicker';
+import * as i2$8 from '@skyux/colorpicker';
 import { SkyColorpickerModule, SkyColorpickerMessageType } from '@skyux/colorpicker';
-import * as i1$9 from '@skyux/icon';
+import * as i1$a from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2$8 from '@skyux/datetime';
+import * as i2$9 from '@skyux/datetime';
 import { SkyDatePipeModule, SkyDateRangeCalculatorId, SkyDateRangePickerModule, SkyDateRangeService, SkyDateRangeCalculatorType, SkyDatepickerModule, SkyTimepickerModule } from '@skyux/datetime';
-import * as i1$a from '@skyux/errors';
+import * as i1$b from '@skyux/errors';
 import { SkyErrorModule, SkyErrorModalService } from '@skyux/errors';
-import * as i1$b from '@skyux/filter-bar';
-import { SkyFilterBarModule, SkyFilterItemModalInstance } from '@skyux/filter-bar';
 import { SkyFlyoutService } from '@skyux/flyout';
-import * as i2$a from '@skyux/validation';
+import * as i2$b from '@skyux/validation';
 import { SkyValidators, SkyEmailValidationModule, SkyUrlValidationModule } from '@skyux/validation';
-import * as i3$3 from '@skyux/inline-form';
+import * as i3$2 from '@skyux/inline-form';
 import { SkyInlineFormButtonLayout, SkyInlineFormModule } from '@skyux/inline-form';
-import * as i3$4 from '@skyux/navbar';
+import * as i3$3 from '@skyux/navbar';
 import { SkyNavbarModule } from '@skyux/navbar';
 import * as i1$d from '@skyux/pages';
 import { SkyActionHubModule, SkyPageModule } from '@skyux/pages';
@@ -69,13 +69,13 @@ 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 * as i3$4 from '@skyux/phone-field';
 import { SkyPhoneFieldModule } from '@skyux/phone-field';
 import * as i1$f from '@skyux/progress-indicator';
 import { SkyProgressIndicatorModule, SkyProgressIndicatorMessageType } from '@skyux/progress-indicator';
 import * as i1$g from '@skyux/router';
 import { SkyHrefModule } from '@skyux/router';
-import * as i2$9 from '@skyux/text-editor';
+import * as i2$a from '@skyux/text-editor';
 import { SkyTextEditorModule, SkyRichTextDisplayModule } from '@skyux/text-editor';
 import { SkyToastService, SkyToastType, SkyToastInstance } from '@skyux/toast';
 
@@ -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$5 = class FilterModalComponent {
+let FilterModalComponent$2 = class FilterModalComponent {
     #changeDetector;
     #context;
     #instance;
@@ -1092,7 +1092,7 @@ let FilterModalComponent$5 = 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$5, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterModalComponent$2, decorators: [{
             type: Component,
             args: [{ selector: 'app-filter-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, SkyCheckboxModule, SkyIdModule, SkyModalModule], template: "<sky-modal headingText=\"Filter employees\">\n  <sky-modal-content>\n    <label [for]=\"jobTitleInput.id\">Job Title</label>\n    <select\n      #jobTitleInput\n      class=\"sky-form-control\"\n      skyId=\"jobTitleInput\"\n      [(ngModel)]=\"jobTitle\"\n    >\n      <option value=\"any\">Any job title</option>\n      <option value=\"Product Manager\">Product Manager</option>\n      <option value=\"Software Engineer\">Software Engineer</option>\n    </select>\n    <div class=\"sky-margin-stacked-lg\">\n      <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply filters\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"clearAllFilters()\"\n    >\n      Clear all filters\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n" }]
         }], ctorParameters: () => [] });
@@ -1456,7 +1456,7 @@ class AgGridDataEntryGridDataManagerAddedExampleComponent {
             ],
         });
         this.#dataManagerConfig = {
-            filterModalComponent: FilterModalComponent$5,
+            filterModalComponent: FilterModalComponent$2,
             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", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AgGridDataEntryGridDataManagerAddedExampleComponent, isStandalone: true, selector: "app-ag-grid-data-entry-grid-data-manager-added-example", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-data-manager-toolbar-left-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        type=\"button\"\n        (click)=\"openModal()\"\n      >\n        Edit\n      </button>\n    </sky-data-manager-toolbar-left-item>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "component", type: ViewGridComponent$3, selector: "app-view-grid", inputs: ["items"] }, { kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i1$6.λ3, selector: "sky-data-manager-toolbar-left-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AgGridDataEntryGridDataManagerAddedExampleComponent, decorators: [{
             type: Component,
@@ -2118,7 +2118,7 @@ let InlineHelpComponent$1 = class InlineHelpComponent {
         alert(`Help was clicked for ${this.displayName}.`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: InlineHelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: InlineHelpComponent, isStandalone: true, selector: "app-inline-help", ngImport: i0, template: "<sky-help-inline\n  class=\"sky-control-help\"\n  [ariaLabel]=\"'Information about ' + displayName\"\n  (actionClick)=\"onHelpClick()\"\n/>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$6.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: InlineHelpComponent, isStandalone: true, selector: "app-inline-help", ngImport: i0, template: "<sky-help-inline\n  class=\"sky-control-help\"\n  [ariaLabel]=\"'Information about ' + displayName\"\n  (actionClick)=\"onHelpClick()\"\n/>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$7.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: InlineHelpComponent$1, decorators: [{
             type: Component,
@@ -2948,47 +2948,63 @@ const AG_GRID_DEMO_DATA$5 = [
     },
 ];
 
-let FilterModalComponent$4 = class FilterModalComponent {
+let ExampleService$5 = class ExampleService {
+    #jobs = Object.values(JOB_TITLES$4).flat();
+    search(searchText) {
+        searchText = searchText.toUpperCase();
+        const matchingJobs = this.#jobs.filter((job) => job.name?.toUpperCase().includes(searchText));
+        // Simulate a network call with latency. A real-world application might
+        // use Angular's HttpClient to create an Observable from a call to a
+        // web service.
+        return of({
+            hasMore: false,
+            items: matchingJobs,
+            totalCount: matchingJobs.length,
+        }).pipe(delay(800));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService, providedIn: 'root' }); }
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService$5, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+let SalesModalComponent$1 = class SalesModalComponent {
     #changeDetectorRef;
     #context;
-    #instance;
     constructor() {
+        this.modalInstance = inject(SkyFilterItemModalInstance);
         this.hideSales = false;
-        this.jobTitle = '';
         this.#changeDetectorRef = inject(ChangeDetectorRef);
-        this.#context = inject(SkyDataManagerFilterModalContext);
-        this.#instance = inject(SkyModalInstance);
-        if (this.#context.filterData && this.#context.filterData.filters) {
-            const filters = this.#context.filterData.filters;
-            this.jobTitle = filters.jobTitle ?? 'any';
-            this.hideSales = filters.hideSales ?? false;
+        this.#context = this.modalInstance.context;
+        this.modalLabel = this.#context.filterLabelText;
+        if (this.#context.filterValue) {
+            this.hideSales = !!this.#context.filterValue.value;
         }
         this.#changeDetectorRef.markForCheck();
     }
     applyFilters() {
-        const result = {};
-        result.filtersApplied = this.jobTitle !== 'any' || this.hideSales;
-        result.filters = {
-            jobTitle: this.jobTitle,
-            hideSales: this.hideSales,
-        };
-        this.#changeDetectorRef.markForCheck();
-        this.#instance.save(result);
-    }
-    clearAllFilters() {
-        this.hideSales = false;
-        this.jobTitle = 'any';
-        this.#changeDetectorRef.markForCheck();
+        let result;
+        if (this.hideSales) {
+            result = {
+                value: true,
+                displayValue: 'True',
+            };
+        }
+        this.modalInstance.save({ filterValue: result });
     }
     cancel() {
-        this.#instance.cancel();
+        this.modalInstance.cancel();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: FilterModalComponent, isStandalone: true, selector: "app-filter-modal", ngImport: i0, template: "<sky-modal headingText=\"Filter employees\">\n  <sky-modal-content>\n    <label [for]=\"jobTitleInput.id\">Job Title</label>\n    <select\n      #jobTitleInput\n      class=\"sky-form-control\"\n      skyId=\"jobTitleInput\"\n      [(ngModel)]=\"jobTitle\"\n    >\n      <option value=\"any\">Any job title</option>\n      <option value=\"Product Manager\">Product Manager</option>\n      <option value=\"Software Engineer\">Software Engineer</option>\n    </select>\n    <div class=\"sky-margin-stacked-lg\">\n      <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply filters\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"clearAllFilters()\"\n    >\n      Clear all filters\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SalesModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SalesModalComponent, isStandalone: true, selector: "app-sales-modal", ngImport: i0, template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <div class=\"sky-margin-stacked-lg\">\n      <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
-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: SalesModalComponent$1, decorators: [{
             type: Component,
-            args: [{ selector: 'app-filter-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, SkyCheckboxModule, SkyIdModule, SkyModalModule], template: "<sky-modal headingText=\"Filter employees\">\n  <sky-modal-content>\n    <label [for]=\"jobTitleInput.id\">Job Title</label>\n    <select\n      #jobTitleInput\n      class=\"sky-form-control\"\n      skyId=\"jobTitleInput\"\n      [(ngModel)]=\"jobTitle\"\n    >\n      <option value=\"any\">Any job title</option>\n      <option value=\"Product Manager\">Product Manager</option>\n      <option value=\"Software Engineer\">Software Engineer</option>\n    </select>\n    <div class=\"sky-margin-stacked-lg\">\n      <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply filters\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"clearAllFilters()\"\n    >\n      Clear all filters\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n" }]
+            args: [{ selector: 'app-sales-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, SkyCheckboxModule, SkyModalModule], template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <div class=\"sky-margin-stacked-lg\">\n      <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n" }]
         }], ctorParameters: () => [] });
 
 let ContextMenuComponent$4 = class ContextMenuComponent {
@@ -3140,7 +3156,6 @@ let ViewGridComponent$2 = class ViewGridComponent {
             searchEnabled: true,
             multiselectToolbarEnabled: true,
             columnPickerEnabled: true,
-            filterButtonEnabled: true,
             columnOptions: this.#columnPickerOptions,
         };
     }
@@ -3206,16 +3221,23 @@ let ViewGridComponent$2 = class ViewGridComponent {
     }
     #filterItems(items) {
         let filteredItems = items;
-        const filterData = this.#dataState && this.#dataState.filterData;
-        if (filterData?.filters) {
-            const filters = filterData.filters;
+        const filterState = this.#dataState.filterData?.filters;
+        if (filterState?.appliedFilters) {
+            const filters = filterState.appliedFilters;
+            const hideSales = filters.some((filter) => filter.filterId === 'hideSales' && !!filter.filterValue?.value);
+            const jobTitleFilter = filters.find((f) => f.filterId === 'jobTitle');
+            const selectedTypes = Array.isArray(jobTitleFilter?.filterValue?.value)
+                ? jobTitleFilter.filterValue.value.map((v) => v.id)
+                : [];
             filteredItems = items.filter((item) => {
-                return ((!!(filters.hideSales && item.department.name !== 'Sales') ||
-                    !filters.hideSales) &&
-                    ((filters.jobTitle !== 'any' &&
-                        item.jobTitle?.name === filters.jobTitle) ||
-                        !filters.jobTitle ||
-                        filters.jobTitle === 'any'));
+                if (hideSales && item.department.name === 'Sales') {
+                    return false;
+                }
+                if (selectedTypes.length &&
+                    (!item.jobTitle || !selectedTypes.includes(item.jobTitle.id))) {
+                    return false;
+                }
+                return true;
             });
         }
         return filteredItems;
@@ -3286,19 +3308,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 /**
- * @title Data manager multiselect setup
+ * @title Data manager setup
  */
 class AgGridDataGridDataManagerMultiselectExampleComponent {
+    #activeViewId;
     #dataManagerConfig;
     #defaultDataState;
-    #activeViewId;
     #ngUnsubscribe;
     #changeDetectorRef;
     #dataManagerSvc;
+    #exampleSvc;
     constructor() {
         this.items = AG_GRID_DEMO_DATA$5;
+        this.salesModal = SalesModalComponent$1;
+        this.#activeViewId = 'dataGridWithDataManagerView';
         this.#dataManagerConfig = {
-            filterModalComponent: FilterModalComponent$4,
             sortOptions: [
                 {
                     id: 'az',
@@ -3316,17 +3340,12 @@ class AgGridDataGridDataManagerMultiselectExampleComponent {
         };
         this.#defaultDataState = new SkyDataManagerState({
             filterData: {
-                filtersApplied: false,
-                filters: {
-                    hideSales: false,
-                    jobTitle: 'any',
-                },
+                filters: {},
             },
             views: [
                 {
-                    viewId: 'dataGridMultiselectWithDataManagerView',
+                    viewId: 'dataGridWithDataManagerView',
                     displayedColumnIds: [
-                        'selected',
                         'context',
                         'name',
                         'age',
@@ -3338,10 +3357,10 @@ class AgGridDataGridDataManagerMultiselectExampleComponent {
                 },
             ],
         });
-        this.#activeViewId = 'dataGridMultiselectWithDataManagerView';
         this.#ngUnsubscribe = new Subject();
         this.#changeDetectorRef = inject(ChangeDetectorRef);
         this.#dataManagerSvc = inject(SkyDataManagerService);
+        this.#exampleSvc = inject(ExampleService$5);
         this.#dataManagerSvc
             .getActiveViewIdUpdates()
             .pipe(takeUntil(this.#ngUnsubscribe))
@@ -3361,12 +3380,24 @@ class AgGridDataGridDataManagerMultiselectExampleComponent {
         this.#ngUnsubscribe.next();
         this.#ngUnsubscribe.complete();
     }
+    onJobTitleSearchAsync(args) {
+        // In a real-world application the search service might return an Observable
+        // created by calling HttpClient.get(). Assigning that Observable to the result
+        // allows the lookup component to cancel the web request if it does not complete
+        // before the user searches again.
+        args.result = this.#exampleSvc.search(args.searchText);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: 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", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AgGridDataGridDataManagerMultiselectExampleComponent, isStandalone: true, selector: "app-ag-grid-data-grid-data-manager-example", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item labelText=\"Records\" [value]=\"items.length\" />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "directive", type: i1$6.λ9, selector: "[skyDataManagerFilterController]" }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { kind: "ngmodule", type: SkyFilterBarModule }, { kind: "component", type: i2$4.λ1, selector: "sky-filter-bar", inputs: ["appliedFilters", "selectedFilterIds"], outputs: ["appliedFiltersChange", "selectedFilterIdsChange"] }, { kind: "component", type: i2$4.λ2, selector: "sky-filter-item-modal", inputs: ["filterId", "labelText", "modalComponent", "modalSize"], outputs: ["modalOpened"] }, { kind: "component", type: i2$4.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i2$5.λ16, selector: "sky-list-summary" }, { kind: "component", type: i2$5.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: ViewGridComponent$2, selector: "app-view-grid", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AgGridDataGridDataManagerMultiselectExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ag-grid-data-grid-data-manager-multiselect-example', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SkyDataManagerService], imports: [SkyDataManagerModule, ViewGridComponent$2], template: "<sky-data-manager>\n  <sky-data-manager-toolbar />\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n" }]
+            args: [{ selector: 'app-ag-grid-data-grid-data-manager-example', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SkyDataManagerService], imports: [
+                        SkyDataManagerModule,
+                        SkyFilterBarModule,
+                        SkyListSummaryModule,
+                        ViewGridComponent$2,
+                    ], template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item labelText=\"Records\" [value]=\"items.length\" />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n" }]
         }], ctorParameters: () => [] });
 
 const DEPARTMENTS$3 = [
@@ -3503,47 +3534,63 @@ const AG_GRID_DEMO_DATA$4 = [
     },
 ];
 
-let FilterModalComponent$3 = class FilterModalComponent {
+let ExampleService$4 = class ExampleService {
+    #jobs = Object.values(JOB_TITLES$3).flat();
+    search(searchText) {
+        searchText = searchText.toUpperCase();
+        const matchingJobs = this.#jobs.filter((job) => job.name?.toUpperCase().includes(searchText));
+        // Simulate a network call with latency. A real-world application might
+        // use Angular's HttpClient to create an Observable from a call to a
+        // web service.
+        return of({
+            hasMore: false,
+            items: matchingJobs,
+            totalCount: matchingJobs.length,
+        }).pipe(delay(800));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService, providedIn: 'root' }); }
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService$4, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class SalesModalComponent {
     #changeDetectorRef;
     #context;
-    #instance;
     constructor() {
+        this.modalInstance = inject(SkyFilterItemModalInstance);
         this.hideSales = false;
-        this.jobTitle = '';
         this.#changeDetectorRef = inject(ChangeDetectorRef);
-        this.#context = inject(SkyDataManagerFilterModalContext);
-        this.#instance = inject(SkyModalInstance);
-        if (this.#context.filterData && this.#context.filterData.filters) {
-            const filters = this.#context.filterData.filters;
-            this.jobTitle = filters.jobTitle ?? 'any';
-            this.hideSales = filters.hideSales ?? false;
+        this.#context = this.modalInstance.context;
+        this.modalLabel = this.#context.filterLabelText;
+        if (this.#context.filterValue) {
+            this.hideSales = !!this.#context.filterValue.value;
         }
         this.#changeDetectorRef.markForCheck();
     }
     applyFilters() {
-        const result = {};
-        result.filtersApplied = this.jobTitle !== 'any' || this.hideSales;
-        result.filters = {
-            jobTitle: this.jobTitle,
-            hideSales: this.hideSales,
-        };
-        this.#changeDetectorRef.markForCheck();
-        this.#instance.save(result);
-    }
-    clearAllFilters() {
-        this.hideSales = false;
-        this.jobTitle = 'any';
-        this.#changeDetectorRef.markForCheck();
+        let result;
+        if (this.hideSales) {
+            result = {
+                value: true,
+                displayValue: 'True',
+            };
+        }
+        this.modalInstance.save({ filterValue: result });
     }
     cancel() {
-        this.#instance.cancel();
+        this.modalInstance.cancel();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: FilterModalComponent, isStandalone: true, selector: "app-filter-modal", ngImport: i0, template: "<sky-modal headingText=\"Filter employees\">\n  <sky-modal-content>\n    <label [for]=\"jobTitleInput.id\">Job Title</label>\n    <select\n      #jobTitleInput\n      class=\"sky-form-control\"\n      skyId=\"jobTitleInput\"\n      [(ngModel)]=\"jobTitle\"\n    >\n      <option value=\"any\">Any job title</option>\n      <option value=\"Product Manager\">Product Manager</option>\n      <option value=\"Software Engineer\">Software Engineer</option>\n    </select>\n    <div class=\"sky-margin-stacked-lg\">\n      <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply filters\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"clearAllFilters()\"\n    >\n      Clear all filters\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-};
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterModalComponent$3, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SalesModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SalesModalComponent, isStandalone: true, selector: "app-sales-modal", ngImport: i0, template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <div class=\"sky-margin-stacked-lg\">\n      <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SalesModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-filter-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, SkyCheckboxModule, SkyIdModule, SkyModalModule], template: "<sky-modal headingText=\"Filter employees\">\n  <sky-modal-content>\n    <label [for]=\"jobTitleInput.id\">Job Title</label>\n    <select\n      #jobTitleInput\n      class=\"sky-form-control\"\n      skyId=\"jobTitleInput\"\n      [(ngModel)]=\"jobTitle\"\n    >\n      <option value=\"any\">Any job title</option>\n      <option value=\"Product Manager\">Product Manager</option>\n      <option value=\"Software Engineer\">Software Engineer</option>\n    </select>\n    <div class=\"sky-margin-stacked-lg\">\n      <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply filters\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"clearAllFilters()\"\n    >\n      Clear all filters\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n" }]
+            args: [{ selector: 'app-sales-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, SkyCheckboxModule, SkyModalModule], template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <div class=\"sky-margin-stacked-lg\">\n      <sky-checkbox labelText=\"Hide Sales employees\" [(ngModel)]=\"hideSales\" />\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n" }]
         }], ctorParameters: () => [] });
 
 let ContextMenuComponent$3 = class ContextMenuComponent {
@@ -3681,7 +3728,6 @@ let ViewGridComponent$1 = class ViewGridComponent {
             iconName: 'table',
             searchEnabled: true,
             columnPickerEnabled: true,
-            filterButtonEnabled: true,
             columnOptions: this.#columnPickerOptions,
         };
     }
@@ -3748,16 +3794,23 @@ let ViewGridComponent$1 = class ViewGridComponent {
     }
     #filterItems(items) {
         let filteredItems = items;
-        const filterData = this.#dataState && this.#dataState.filterData;
-        if (filterData?.filters) {
-            const filters = filterData.filters;
+        const filterState = this.#dataState.filterData?.filters;
+        if (filterState?.appliedFilters) {
+            const filters = filterState.appliedFilters;
+            const hideSales = filters.some((filter) => filter.filterId === 'hideSales' && !!filter.filterValue?.value);
+            const jobTitleFilter = filters.find((f) => f.filterId === 'jobTitle');
+            const selectedTypes = Array.isArray(jobTitleFilter?.filterValue?.value)
+                ? jobTitleFilter.filterValue.value.map((v) => v.id)
+                : [];
             filteredItems = items.filter((item) => {
-                return ((!!(filters.hideSales && item.department.name !== 'Sales') ||
-                    !filters.hideSales) &&
-                    ((filters.jobTitle !== 'any' &&
-                        item.jobTitle?.name === filters.jobTitle) ||
-                        !filters.jobTitle ||
-                        filters.jobTitle === 'any'));
+                if (hideSales && item.department.name === 'Sales') {
+                    return false;
+                }
+                if (selectedTypes.length &&
+                    (!item.jobTitle || !selectedTypes.includes(item.jobTitle.id))) {
+                    return false;
+                }
+                return true;
             });
         }
         return filteredItems;
@@ -3826,11 +3879,12 @@ class AgGridDataGridDataManagerExampleComponent {
     #ngUnsubscribe;
     #changeDetectorRef;
     #dataManagerSvc;
+    #exampleSvc;
     constructor() {
         this.items = AG_GRID_DEMO_DATA$4;
+        this.salesModal = SalesModalComponent;
         this.#activeViewId = 'dataGridWithDataManagerView';
         this.#dataManagerConfig = {
-            filterModalComponent: FilterModalComponent$3,
             sortOptions: [
                 {
                     id: 'az',
@@ -3848,11 +3902,7 @@ class AgGridDataGridDataManagerExampleComponent {
         };
         this.#defaultDataState = new SkyDataManagerState({
             filterData: {
-                filtersApplied: false,
-                filters: {
-                    hideSales: false,
-                    jobTitle: 'any',
-                },
+                filters: {},
             },
             views: [
                 {
@@ -3872,6 +3922,7 @@ class AgGridDataGridDataManagerExampleComponent {
         this.#ngUnsubscribe = new Subject();
         this.#changeDetectorRef = inject(ChangeDetectorRef);
         this.#dataManagerSvc = inject(SkyDataManagerService);
+        this.#exampleSvc = inject(ExampleService$4);
         this.#dataManagerSvc
             .getActiveViewIdUpdates()
             .pipe(takeUntil(this.#ngUnsubscribe))
@@ -3891,12 +3942,24 @@ class AgGridDataGridDataManagerExampleComponent {
         this.#ngUnsubscribe.next();
         this.#ngUnsubscribe.complete();
     }
+    onJobTitleSearchAsync(args) {
+        // In a real-world application the search service might return an Observable
+        // created by calling HttpClient.get(). Assigning that Observable to the result
+        // allows the lookup component to cancel the web request if it does not complete
+        // before the user searches again.
+        args.result = this.#exampleSvc.search(args.searchText);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: 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", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AgGridDataGridDataManagerExampleComponent, isStandalone: true, selector: "app-ag-grid-data-grid-data-manager-example", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item labelText=\"Records\" [value]=\"items.length\" />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "directive", type: i1$6.λ9, selector: "[skyDataManagerFilterController]" }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { kind: "ngmodule", type: SkyFilterBarModule }, { kind: "component", type: i2$4.λ1, selector: "sky-filter-bar", inputs: ["appliedFilters", "selectedFilterIds"], outputs: ["appliedFiltersChange", "selectedFilterIdsChange"] }, { kind: "component", type: i2$4.λ2, selector: "sky-filter-item-modal", inputs: ["filterId", "labelText", "modalComponent", "modalSize"], outputs: ["modalOpened"] }, { kind: "component", type: i2$4.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i2$5.λ16, selector: "sky-list-summary" }, { kind: "component", type: i2$5.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: ViewGridComponent$1, selector: "app-view-grid", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AgGridDataGridDataManagerExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ag-grid-data-grid-data-manager-example', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SkyDataManagerService], imports: [SkyDataManagerModule, ViewGridComponent$1], template: "<sky-data-manager>\n  <sky-data-manager-toolbar />\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n" }]
+            args: [{ selector: 'app-ag-grid-data-grid-data-manager-example', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SkyDataManagerService], imports: [
+                        SkyDataManagerModule,
+                        SkyFilterBarModule,
+                        SkyListSummaryModule,
+                        ViewGridComponent$1,
+                    ], template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-modal\n        filterId=\"hideSales\"\n        labelText=\"Hide sales\"\n        modalSize=\"small\"\n        [modalComponent]=\"salesModal\"\n      />\n      <sky-filter-item-lookup\n        filterId=\"jobTitle\"\n        labelText=\"Job title\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onJobTitleSearchAsync($event)\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item labelText=\"Records\" [value]=\"items.length\" />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n" }]
         }], ctorParameters: () => [] });
 
 let ContextMenuComponent$2 = class ContextMenuComponent {
@@ -4070,7 +4133,7 @@ class InlineHelpComponent {
         alert(`Help was clicked for ${this.displayName}.`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: InlineHelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: InlineHelpComponent, isStandalone: true, selector: "app-inline-help", ngImport: i0, template: "<sky-help-inline\n  ariaLabel=\"Information about {{ displayName }}\"\n  class=\"sky-control-help\"\n  (actionClick)=\"onHelpClick()\"\n/>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$6.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: InlineHelpComponent, isStandalone: true, selector: "app-inline-help", ngImport: i0, template: "<sky-help-inline\n  ariaLabel=\"Information about {{ displayName }}\"\n  class=\"sky-control-help\"\n  (actionClick)=\"onHelpClick()\"\n/>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$7.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: InlineHelpComponent, decorators: [{
             type: Component,
@@ -4485,7 +4548,7 @@ class AgGridDataGridPagingExampleComponent {
             : 'N/A';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AgGridDataGridPagingExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AgGridDataGridPagingExampleComponent, isStandalone: true, selector: "app-ag-grid-data-grid-paging-example", ngImport: i0, template: "<sky-ag-grid-wrapper>\n  <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"gridData\" />\n</sky-ag-grid-wrapper>\n\n<sky-paging\n  [currentPage]=\"currentPage\"\n  [itemCount]=\"gridData.length\"\n  [pageSize]=\"pageSize\"\n  (currentPageChange)=\"onPageChange($event)\"\n/>\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: "component", type: i2$1.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { kind: "ngmodule", type: SkyPagingModule }, { kind: "component", type: i2$4.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange", "contentChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AgGridDataGridPagingExampleComponent, isStandalone: true, selector: "app-ag-grid-data-grid-paging-example", ngImport: i0, template: "<sky-ag-grid-wrapper>\n  <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"gridData\" />\n</sky-ag-grid-wrapper>\n\n<sky-paging\n  [currentPage]=\"currentPage\"\n  [itemCount]=\"gridData.length\"\n  [pageSize]=\"pageSize\"\n  (currentPageChange)=\"onPageChange($event)\"\n/>\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: "component", type: i2$1.λ12, selector: "sky-ag-grid-wrapper", inputs: ["compact", "minHeight"] }, { kind: "ngmodule", type: SkyPagingModule }, { kind: "component", type: i2$5.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange", "contentChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AgGridDataGridPagingExampleComponent, decorators: [{
             type: Component,
@@ -4920,7 +4983,7 @@ class AngularTreeComponentAngularTreeBasicExampleComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AngularTreeComponentAngularTreeBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AngularTreeComponentAngularTreeBasicExampleComponent, isStandalone: true, selector: "app-angular-tree-component-angular-tree-basic-example", ngImport: i0, template: "<sky-angular-tree-wrapper>\n  <tree-root #tree [nodes]=\"nodes\">\n    <ng-template\n      #treeNodeFullTemplate\n      let-index=\"index\"\n      let-node\n      let-templates=\"templates\"\n    >\n      <sky-angular-tree-node\n        [helpPopoverContent]=\"node.data.helpPopoverContent\"\n        [helpPopoverTitle]=\"node.data.helpPopoverTitle\"\n        [index]=\"index\"\n        [node]=\"node\"\n        [templates]=\"templates\"\n      />\n    </ng-template>\n  </tree-root>\n</sky-angular-tree-wrapper>\n", dependencies: [{ kind: "ngmodule", type: SkyAngularTreeModule }, { kind: "component", type: i1$7.λ2, selector: "sky-angular-tree-node", inputs: ["index", "node", "templates", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$7.λ1, selector: "sky-angular-tree-wrapper", inputs: ["readOnly", "selectLeafNodesOnly", "selectSingle", "showToolbar"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i2$5.TreeComponent, selector: "Tree, tree-root", inputs: ["nodes", "options", "focused", "state"], outputs: ["toggleExpanded", "activate", "deactivate", "nodeActivate", "nodeDeactivate", "select", "deselect", "focus", "blur", "updateData", "initialized", "moveNode", "copyNode", "loadNodeChildren", "changeFilter", "event", "stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AngularTreeComponentAngularTreeBasicExampleComponent, isStandalone: true, selector: "app-angular-tree-component-angular-tree-basic-example", ngImport: i0, template: "<sky-angular-tree-wrapper>\n  <tree-root #tree [nodes]=\"nodes\">\n    <ng-template\n      #treeNodeFullTemplate\n      let-index=\"index\"\n      let-node\n      let-templates=\"templates\"\n    >\n      <sky-angular-tree-node\n        [helpPopoverContent]=\"node.data.helpPopoverContent\"\n        [helpPopoverTitle]=\"node.data.helpPopoverTitle\"\n        [index]=\"index\"\n        [node]=\"node\"\n        [templates]=\"templates\"\n      />\n    </ng-template>\n  </tree-root>\n</sky-angular-tree-wrapper>\n", dependencies: [{ kind: "ngmodule", type: SkyAngularTreeModule }, { kind: "component", type: i1$8.λ2, selector: "sky-angular-tree-node", inputs: ["index", "node", "templates", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$8.λ1, selector: "sky-angular-tree-wrapper", inputs: ["readOnly", "selectLeafNodesOnly", "selectSingle", "showToolbar"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i2$6.TreeComponent, selector: "Tree, tree-root", inputs: ["nodes", "options", "focused", "state"], outputs: ["toggleExpanded", "activate", "deactivate", "nodeActivate", "nodeDeactivate", "select", "deselect", "focus", "blur", "updateData", "initialized", "moveNode", "copyNode", "loadNodeChildren", "changeFilter", "event", "stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AngularTreeComponentAngularTreeBasicExampleComponent, decorators: [{
             type: Component,
@@ -4966,7 +5029,7 @@ class AngularTreeComponentAngularTreeHelpKeyExampleComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AngularTreeComponentAngularTreeHelpKeyExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AngularTreeComponentAngularTreeHelpKeyExampleComponent, isStandalone: true, selector: "app-angular-tree-component-angular-tree-help-key-example", ngImport: i0, template: "<sky-angular-tree-wrapper>\n  <tree-root #tree [nodes]=\"nodes\">\n    <ng-template\n      #treeNodeFullTemplate\n      let-index=\"index\"\n      let-node\n      let-templates=\"templates\"\n    >\n      <sky-angular-tree-node\n        [attr.data-sky-id]=\"'node-' + node.data.name\"\n        [helpKey]=\"node.data.helpKey\"\n        [helpPopoverContent]=\"node.data.helpPopoverContent\"\n        [helpPopoverTitle]=\"node.data.helpPopoverTitle\"\n        [index]=\"index\"\n        [node]=\"node\"\n        [templates]=\"templates\"\n      />\n    </ng-template>\n  </tree-root>\n</sky-angular-tree-wrapper>\n", dependencies: [{ kind: "ngmodule", type: SkyAngularTreeModule }, { kind: "component", type: i1$7.λ2, selector: "sky-angular-tree-node", inputs: ["index", "node", "templates", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$7.λ1, selector: "sky-angular-tree-wrapper", inputs: ["readOnly", "selectLeafNodesOnly", "selectSingle", "showToolbar"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i2$5.TreeComponent, selector: "Tree, tree-root", inputs: ["nodes", "options", "focused", "state"], outputs: ["toggleExpanded", "activate", "deactivate", "nodeActivate", "nodeDeactivate", "select", "deselect", "focus", "blur", "updateData", "initialized", "moveNode", "copyNode", "loadNodeChildren", "changeFilter", "event", "stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AngularTreeComponentAngularTreeHelpKeyExampleComponent, isStandalone: true, selector: "app-angular-tree-component-angular-tree-help-key-example", ngImport: i0, template: "<sky-angular-tree-wrapper>\n  <tree-root #tree [nodes]=\"nodes\">\n    <ng-template\n      #treeNodeFullTemplate\n      let-index=\"index\"\n      let-node\n      let-templates=\"templates\"\n    >\n      <sky-angular-tree-node\n        [attr.data-sky-id]=\"'node-' + node.data.name\"\n        [helpKey]=\"node.data.helpKey\"\n        [helpPopoverContent]=\"node.data.helpPopoverContent\"\n        [helpPopoverTitle]=\"node.data.helpPopoverTitle\"\n        [index]=\"index\"\n        [node]=\"node\"\n        [templates]=\"templates\"\n      />\n    </ng-template>\n  </tree-root>\n</sky-angular-tree-wrapper>\n", dependencies: [{ kind: "ngmodule", type: SkyAngularTreeModule }, { kind: "component", type: i1$8.λ2, selector: "sky-angular-tree-node", inputs: ["index", "node", "templates", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$8.λ1, selector: "sky-angular-tree-wrapper", inputs: ["readOnly", "selectLeafNodesOnly", "selectSingle", "showToolbar"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i2$6.TreeComponent, selector: "Tree, tree-root", inputs: ["nodes", "options", "focused", "state"], outputs: ["toggleExpanded", "activate", "deactivate", "nodeActivate", "nodeDeactivate", "select", "deselect", "focus", "blur", "updateData", "initialized", "moveNode", "copyNode", "loadNodeChildren", "changeFilter", "event", "stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AngularTreeComponentAngularTreeHelpKeyExampleComponent, decorators: [{
             type: Component,
@@ -5027,7 +5090,7 @@ class AngularTreeComponentAngularTreePreselectedNodesExampleComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AngularTreeComponentAngularTreePreselectedNodesExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AngularTreeComponentAngularTreePreselectedNodesExampleComponent, isStandalone: true, selector: "app-angular-tree-component-angular-tree-preselected-nodes-example", ngImport: i0, template: "<sky-angular-tree-wrapper>\n  <tree-root #tree [nodes]=\"nodes\" [options]=\"options\" [state]=\"state\">\n    <ng-template\n      #treeNodeFullTemplate\n      let-index=\"index\"\n      let-node\n      let-templates=\"templates\"\n    >\n      <sky-angular-tree-node\n        [helpPopoverContent]=\"node.data.helpPopoverContent\"\n        [helpPopoverTitle]=\"node.data.helpPopoverTitle\"\n        [index]=\"index\"\n        [node]=\"node\"\n        [templates]=\"templates\"\n      />\n    </ng-template>\n  </tree-root>\n</sky-angular-tree-wrapper>\n", dependencies: [{ kind: "ngmodule", type: SkyAngularTreeModule }, { kind: "component", type: i1$7.λ2, selector: "sky-angular-tree-node", inputs: ["index", "node", "templates", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$7.λ1, selector: "sky-angular-tree-wrapper", inputs: ["readOnly", "selectLeafNodesOnly", "selectSingle", "showToolbar"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i2$5.TreeComponent, selector: "Tree, tree-root", inputs: ["nodes", "options", "focused", "state"], outputs: ["toggleExpanded", "activate", "deactivate", "nodeActivate", "nodeDeactivate", "select", "deselect", "focus", "blur", "updateData", "initialized", "moveNode", "copyNode", "loadNodeChildren", "changeFilter", "event", "stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AngularTreeComponentAngularTreePreselectedNodesExampleComponent, isStandalone: true, selector: "app-angular-tree-component-angular-tree-preselected-nodes-example", ngImport: i0, template: "<sky-angular-tree-wrapper>\n  <tree-root #tree [nodes]=\"nodes\" [options]=\"options\" [state]=\"state\">\n    <ng-template\n      #treeNodeFullTemplate\n      let-index=\"index\"\n      let-node\n      let-templates=\"templates\"\n    >\n      <sky-angular-tree-node\n        [helpPopoverContent]=\"node.data.helpPopoverContent\"\n        [helpPopoverTitle]=\"node.data.helpPopoverTitle\"\n        [index]=\"index\"\n        [node]=\"node\"\n        [templates]=\"templates\"\n      />\n    </ng-template>\n  </tree-root>\n</sky-angular-tree-wrapper>\n", dependencies: [{ kind: "ngmodule", type: SkyAngularTreeModule }, { kind: "component", type: i1$8.λ2, selector: "sky-angular-tree-node", inputs: ["index", "node", "templates", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$8.λ1, selector: "sky-angular-tree-wrapper", inputs: ["readOnly", "selectLeafNodesOnly", "selectSingle", "showToolbar"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i2$6.TreeComponent, selector: "Tree, tree-root", inputs: ["nodes", "options", "focused", "state"], outputs: ["toggleExpanded", "activate", "deactivate", "nodeActivate", "nodeDeactivate", "select", "deselect", "focus", "blur", "updateData", "initialized", "moveNode", "copyNode", "loadNodeChildren", "changeFilter", "event", "stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AngularTreeComponentAngularTreePreselectedNodesExampleComponent, decorators: [{
             type: Component,
@@ -5051,7 +5114,7 @@ class AutonumericCurrencyExampleComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AutonumericCurrencyExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AutonumericCurrencyExampleComponent, isStandalone: true, selector: "app-autonumeric-currency-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-input-box labelText=\"Donation amount\">\n    <input\n      formControlName=\"donationAmount\"\n      type=\"text\"\n      [skyAutonumeric]=\"autonumericOptions\"\n    />\n  </sky-input-box>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutonumericModule }, { kind: "directive", type: i2$6.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AutonumericCurrencyExampleComponent, isStandalone: true, selector: "app-autonumeric-currency-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-input-box labelText=\"Donation amount\">\n    <input\n      formControlName=\"donationAmount\"\n      type=\"text\"\n      [skyAutonumeric]=\"autonumericOptions\"\n    />\n  </sky-input-box>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutonumericModule }, { kind: "directive", type: i2$7.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AutonumericCurrencyExampleComponent, decorators: [{
             type: Component,
@@ -5073,7 +5136,7 @@ class AutonumericInternationalFormattingExampleComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AutonumericInternationalFormattingExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AutonumericInternationalFormattingExampleComponent, isStandalone: true, selector: "app-autonumeric-international-formatting-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-input-box labelText=\"Autonumeric value\">\n    <input\n      formControlName=\"donationAmount\"\n      type=\"text\"\n      [skyAutonumeric]=\"autonumericOptions\"\n    />\n  </sky-input-box>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutonumericModule }, { kind: "directive", type: i2$6.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AutonumericInternationalFormattingExampleComponent, isStandalone: true, selector: "app-autonumeric-international-formatting-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-input-box labelText=\"Autonumeric value\">\n    <input\n      formControlName=\"donationAmount\"\n      type=\"text\"\n      [skyAutonumeric]=\"autonumericOptions\"\n    />\n  </sky-input-box>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutonumericModule }, { kind: "directive", type: i2$7.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AutonumericInternationalFormattingExampleComponent, decorators: [{
             type: Component,
@@ -5120,7 +5183,7 @@ class AutonumericOptionsProviderExampleComponent {
                 provide: SkyAutonumericOptionsProvider,
                 useClass: DemoAutonumericOptionsProvider,
             },
-        ], ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-input-box labelText=\"Donation amount\" stacked=\"true\">\n    <input\n      formControlName=\"donationAmount\"\n      type=\"text\"\n      [skyAutonumeric]=\"donationOptions\"\n    />\n  </sky-input-box>\n  <sky-input-box labelText=\"Pledge amount\">\n    <input\n      formControlName=\"pledgeAmount\"\n      type=\"text\"\n      [skyAutonumeric]=\"pledgeOptions\"\n    />\n  </sky-input-box>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutonumericModule }, { kind: "directive", type: i2$6.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { 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"] }] }); }
+        ], ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-input-box labelText=\"Donation amount\" stacked=\"true\">\n    <input\n      formControlName=\"donationAmount\"\n      type=\"text\"\n      [skyAutonumeric]=\"donationOptions\"\n    />\n  </sky-input-box>\n  <sky-input-box labelText=\"Pledge amount\">\n    <input\n      formControlName=\"pledgeAmount\"\n      type=\"text\"\n      [skyAutonumeric]=\"pledgeOptions\"\n    />\n  </sky-input-box>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutonumericModule }, { kind: "directive", type: i2$7.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AutonumericOptionsProviderExampleComponent, decorators: [{
             type: Component,
@@ -5143,7 +5206,7 @@ class AutonumericPresetExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AutonumericPresetExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AutonumericPresetExampleComponent, isStandalone: true, selector: "app-autonumeric-preset-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-input-box labelText=\"Donation amount\">\n    <input\n      formControlName=\"donationAmount\"\n      type=\"text\"\n      [skyAutonumeric]=\"autonumericOptions\"\n    />\n  </sky-input-box>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutonumericModule }, { kind: "directive", type: i2$6.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AutonumericPresetExampleComponent, isStandalone: true, selector: "app-autonumeric-preset-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-input-box labelText=\"Donation amount\">\n    <input\n      formControlName=\"donationAmount\"\n      type=\"text\"\n      [skyAutonumeric]=\"autonumericOptions\"\n    />\n  </sky-input-box>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutonumericModule }, { kind: "directive", type: i2$7.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AutonumericPresetExampleComponent, decorators: [{
             type: Component,
@@ -5154,7 +5217,7 @@ let DemoService$5 = class DemoService {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     uploadAvatar(_file) {
         // Simulate uploading the file to a web service.
-        return of(undefined).pipe(delay(500));
+        return of(undefined).pipe(delay$1(500));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DemoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DemoService, providedIn: 'root' }); }
@@ -5188,7 +5251,7 @@ class AvatarExampleComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AvatarExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AvatarExampleComponent, isStandalone: true, selector: "app-avatar-example", ngImport: i0, template: "<sky-avatar\n  data-sky-id=\"user-profile-avatar\"\n  [canChange]=\"true\"\n  [maxFileSize]=\"1000\"\n  [name]=\"name()\"\n  [src]=\"avatar()\"\n  (avatarChanged)=\"onAvatarChanged($event)\"\n/>\n", dependencies: [{ kind: "ngmodule", type: SkyAvatarModule }, { kind: "component", type: i1$8.λ1, selector: "sky-avatar", inputs: ["canChange", "name", "src", "maxFileSize", "size"], outputs: ["avatarChanged"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: AvatarExampleComponent, isStandalone: true, selector: "app-avatar-example", ngImport: i0, template: "<sky-avatar\n  data-sky-id=\"user-profile-avatar\"\n  [canChange]=\"true\"\n  [maxFileSize]=\"1000\"\n  [name]=\"name()\"\n  [src]=\"avatar()\"\n  (avatarChanged)=\"onAvatarChanged($event)\"\n/>\n", dependencies: [{ kind: "ngmodule", type: SkyAvatarModule }, { kind: "component", type: i1$9.λ1, selector: "sky-avatar", inputs: ["canChange", "name", "src", "maxFileSize", "size"], outputs: ["avatarChanged"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AvatarExampleComponent, decorators: [{
             type: Component,
@@ -5237,7 +5300,7 @@ class ColorpickerBasicExampleComponent {
         alert('Your favorite color is: \n' + favoriteColor);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColorpickerBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ColorpickerBasicExampleComponent, isStandalone: true, selector: "app-colorpicker-basic-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n  <sky-colorpicker\n    #colorPicker\n    data-sky-id=\"favorite-color\"\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [stacked]=\"true\"\n    (selectedColorChanged)=\"onSelectedColorChanged($event)\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [presetColors]=\"swatches\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n\n  <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Submit</button>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i2$7.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$7.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ColorpickerBasicExampleComponent, isStandalone: true, selector: "app-colorpicker-basic-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n  <sky-colorpicker\n    #colorPicker\n    data-sky-id=\"favorite-color\"\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [stacked]=\"true\"\n    (selectedColorChanged)=\"onSelectedColorChanged($event)\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [presetColors]=\"swatches\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n\n  <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Submit</button>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i2$8.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$8.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColorpickerBasicExampleComponent, decorators: [{
             type: Component,
@@ -5286,7 +5349,7 @@ class ColorpickerHelpKeyExampleComponent {
         alert('Your favorite color is: \n' + favoriteColor);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColorpickerHelpKeyExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ColorpickerHelpKeyExampleComponent, isStandalone: true, selector: "app-colorpicker-help-key-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n  <sky-colorpicker\n    #colorPicker\n    data-sky-id=\"favorite-color\"\n    labelText=\"What is your favorite color?\"\n    helpKey=\"color-help\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [stacked]=\"true\"\n    (selectedColorChanged)=\"onSelectedColorChanged($event)\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [presetColors]=\"swatches\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n\n  <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Submit</button>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i2$7.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$7.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ColorpickerHelpKeyExampleComponent, isStandalone: true, selector: "app-colorpicker-help-key-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"submit()\">\n  <sky-colorpicker\n    #colorPicker\n    data-sky-id=\"favorite-color\"\n    labelText=\"What is your favorite color?\"\n    helpKey=\"color-help\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [stacked]=\"true\"\n    (selectedColorChanged)=\"onSelectedColorChanged($event)\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [presetColors]=\"swatches\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n\n  <button class=\"sky-btn sky-btn-primary\" type=\"submit\">Submit</button>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i2$8.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$8.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColorpickerHelpKeyExampleComponent, decorators: [{
             type: Component,
@@ -5331,7 +5394,7 @@ class ColorpickerProgrammaticExampleComponent {
         this.colorpickerController.next({ type });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColorpickerProgrammaticExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ColorpickerProgrammaticExampleComponent, isStandalone: true, selector: "app-colorpicker-programmatic-example", ngImport: i0, template: "<form class=\"sky-margin-stacked-xxl\" [formGroup]=\"formGroup\">\n  <sky-colorpicker\n    #colorPicker\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [messageStream]=\"colorpickerController\"\n    [showResetButton]=\"showResetButton\"\n    [stacked]=\"true\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n</form>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openColorpicker()\"\n>\n  Open colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"resetColorpicker()\"\n>\n  Reset colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"toggleResetButton()\"\n>\n  Toggle reset button\n</button>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i2$7.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$7.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ColorpickerProgrammaticExampleComponent, isStandalone: true, selector: "app-colorpicker-programmatic-example", ngImport: i0, template: "<form class=\"sky-margin-stacked-xxl\" [formGroup]=\"formGroup\">\n  <sky-colorpicker\n    #colorPicker\n    labelText=\"What is your favorite color?\"\n    hintText=\"Pick a color with at least 80% opacity.\"\n    [messageStream]=\"colorpickerController\"\n    [showResetButton]=\"showResetButton\"\n    [stacked]=\"true\"\n  >\n    <input\n      formControlName=\"favoriteColor\"\n      type=\"text\"\n      [skyColorpickerInput]=\"colorPicker\"\n    />\n    @if (favoriteColor.errors?.['opaque']) {\n      <sky-form-error\n        errorName=\"opaque\"\n        errorText=\"Color must have at least 80% opacity.\"\n      />\n    }\n  </sky-colorpicker>\n</form>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openColorpicker()\"\n>\n  Open colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"resetColorpicker()\"\n>\n  Reset colorpicker\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"toggleResetButton()\"\n>\n  Toggle reset button\n</button>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i2$8.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$8.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColorpickerProgrammaticExampleComponent, decorators: [{
             type: Component,
@@ -5358,7 +5421,7 @@ class CoreMediaQueryBasicExampleComponent {
         this.breakpoint = toSignal(inject(SkyMediaQueryService).breakpointChange);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CoreMediaQueryBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: CoreMediaQueryBasicExampleComponent, isStandalone: true, selector: "app-core-media-query-basic-example", ngImport: i0, template: "<p>Current media breakpoint: {{ breakpoint() }}</p>\n\n@if (breakpoint() === 'xs') {\n  <nav class=\"my-nav-mobile\">\n    <ul>\n      <li>\n        <button aria-label=\"Home\" type=\"button\">\n          <sky-icon iconName=\"building\" />\n        </button>\n      </li>\n    </ul>\n  </nav>\n} @else {\n  <nav class=\"my-nav-desktop\">\n    <ul>\n      <li>\n        <a href=\"#\">Home</a>\n      </li>\n    </ul>\n  </nav>\n}\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: CoreMediaQueryBasicExampleComponent, isStandalone: true, selector: "app-core-media-query-basic-example", ngImport: i0, template: "<p>Current media breakpoint: {{ breakpoint() }}</p>\n\n@if (breakpoint() === 'xs') {\n  <nav class=\"my-nav-mobile\">\n    <ul>\n      <li>\n        <button aria-label=\"Home\" type=\"button\">\n          <sky-icon iconName=\"building\" />\n        </button>\n      </li>\n    </ul>\n  </nav>\n} @else {\n  <nav class=\"my-nav-desktop\">\n    <ul>\n      <li>\n        <a href=\"#\">Home</a>\n      </li>\n    </ul>\n  </nav>\n}\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CoreMediaQueryBasicExampleComponent, decorators: [{
             type: Component,
@@ -5492,45 +5555,70 @@ const DATA_MANAGER_DEMO_DATA = [
     },
 ];
 
-let FilterModalComponent$2 = class FilterModalComponent {
-    #context = inject(SkyDataManagerFilterModalContext);
-    #instance = inject(SkyModalInstance);
+let ExampleService$3 = class ExampleService {
+    #fruitTypes = [
+        { id: 'citrus', name: 'Citrus' },
+        { id: 'berry', name: 'Berry' },
+    ];
+    search(searchText) {
+        searchText = searchText.toUpperCase();
+        const matchingTypes = this.#fruitTypes.filter((fruit) => fruit.name?.toUpperCase().includes(searchText));
+        // Simulate a network call with latency. A real-world application might
+        // use Angular's HttpClient to create an Observable from a call to a
+        // web service.
+        return of({
+            hasMore: false,
+            items: matchingTypes,
+            totalCount: matchingTypes.length,
+        }).pipe(delay(800));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService, providedIn: 'root' }); }
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService$3, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class OrangeModalComponent {
+    #context;
+    constructor() {
+        this.modalInstance = inject(SkyFilterItemModalInstance);
+        this.#context = this.modalInstance.context;
+        this.modalLabel = this.#context.filterLabelText;
+    }
     ngOnInit() {
-        if (this.#context.filterData?.filters) {
-            const filters = this.#context.filterData.filters;
-            this.fruitType = filters.type ?? 'any';
-            this.hideOrange = filters.hideOrange ?? false;
+        if (this.#context.filterValue) {
+            this.hideOrange = !!this.#context.filterValue.value;
         }
     }
     applyFilters() {
-        const result = {};
-        result.filtersApplied = this.fruitType !== 'any' || this.hideOrange;
-        result.filters = {
-            type: this.fruitType,
-            hideOrange: this.hideOrange,
-        };
-        this.#instance.save(result);
-    }
-    clearAllFilters() {
-        this.hideOrange = false;
-        this.fruitType = 'any';
+        let result;
+        if (this.hideOrange) {
+            result = {
+                value: true,
+                displayValue: 'True',
+            };
+        }
+        this.modalInstance.save({ filterValue: result });
     }
     cancel() {
-        this.#instance.cancel();
+        this.modalInstance.cancel();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: FilterModalComponent, isStandalone: true, selector: "app-filter-modal", ngImport: i0, template: "<sky-modal headingText=\"Filter 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$2, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: OrangeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: OrangeModalComponent, isStandalone: true, selector: "app-orange-modal", ngImport: i0, template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <sky-checkbox labelText=\"Hide orange fruits\" [(ngModel)]=\"hideOrange\" />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: OrangeModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-filter-modal', imports: [
+            args: [{ selector: 'app-orange-modal', imports: [
                         FormsModule,
                         ReactiveFormsModule,
                         SkyCheckboxModule,
-                        SkyInputBoxModule,
                         SkyModalModule,
-                    ], 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" }]
-        }] });
+                    ], template: "<sky-modal [headingText]=\"modalLabel\">\n  <sky-modal-content>\n    <sky-checkbox labelText=\"Hide orange fruits\" [(ngModel)]=\"hideOrange\" />\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n      type=\"button\"\n      (click)=\"applyFilters()\"\n    >\n      Apply\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n" }]
+        }], ctorParameters: () => [] });
 
 ModuleRegistry.registerModules([AllCommunityModule]);
 class ViewGridComponent {
@@ -5585,7 +5673,6 @@ class ViewGridComponent {
             searchEnabled: true,
             multiselectToolbarEnabled: true,
             columnPickerEnabled: true,
-            filterButtonEnabled: true,
             columnOptions: [
                 {
                     id: 'selected',
@@ -5647,15 +5734,22 @@ class ViewGridComponent {
     }
     #filterItems(items) {
         let filteredItems = items;
-        const filterData = this.#dataState && this.#dataState.filterData;
-        if (filterData?.filters) {
-            const filters = filterData.filters;
+        const filterState = this.#dataState.filterData?.filters;
+        if (filterState?.appliedFilters) {
+            const filters = filterState.appliedFilters;
+            const hideOrange = !!filters.find((f) => f.filterId === 'hideOrange' && f.filterValue?.value);
+            const fruitTypeFilter = filters.find((f) => f.filterId === 'fruitType');
+            const selectedTypes = Array.isArray(fruitTypeFilter?.filterValue?.value)
+                ? fruitTypeFilter.filterValue.value.map((v) => v.id)
+                : [];
             filteredItems = items.filter((item) => {
-                return (((filters.hideOrange && item.color !== 'orange') ??
-                    !filters.hideOrange) &&
-                    ((filters.type !== 'any' && item.type === filters.type) ||
-                        !filters.type ||
-                        filters.type === 'any'));
+                if (hideOrange && item.color === 'orange') {
+                    return false;
+                }
+                if (selectedTypes.length && !selectedTypes.includes(item.type)) {
+                    return false;
+                }
+                return true;
             });
         }
         return filteredItems;
@@ -5744,7 +5838,6 @@ class ViewRepeaterComponent {
             iconName: 'text-bullet-list',
             searchEnabled: true,
             sortEnabled: true,
-            filterButtonEnabled: true,
             multiselectToolbarEnabled: true,
             onClearAllClick: () => {
                 this.#clearAll();
@@ -5836,18 +5929,22 @@ class ViewRepeaterComponent {
     }
     #filterItems(items) {
         let filteredItems = items;
-        const filterData = this.#dataState && this.#dataState.filterData;
-        if (filterData?.filters) {
-            const filters = filterData.filters;
+        const filterState = this.#dataState.filterData?.filters;
+        if (filterState?.appliedFilters) {
+            const filters = filterState.appliedFilters;
+            const hideOrange = !!filters.find((f) => f.filterId === 'hideOrange' && f.filterValue?.value);
+            const fruitTypeFilter = filters.find((f) => f.filterId === 'fruitType');
+            const selectedTypes = Array.isArray(fruitTypeFilter?.filterValue?.value)
+                ? fruitTypeFilter.filterValue.value.map((v) => v.id)
+                : [];
             filteredItems = items.filter((item) => {
-                if (((filters.hideOrange && item.color !== 'orange') ??
-                    !filters.hideOrange) &&
-                    ((filters.type !== 'any' && item.type === filters.type) ||
-                        !filters.type ||
-                        filters.type === 'any')) {
-                    return true;
+                if (hideOrange && item.color === 'orange') {
+                    return false;
                 }
-                return false;
+                if (selectedTypes.length && !selectedTypes.includes(item.type)) {
+                    return false;
+                }
+                return true;
             });
         }
         return filteredItems;
@@ -5881,7 +5978,7 @@ class ViewRepeaterComponent {
         this.#changeDetector.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ViewRepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ViewRepeaterComponent, isStandalone: true, selector: "app-view-repeater", inputs: { items: "items" }, ngImport: i0, template: "<sky-data-view [viewId]=\"viewId\">\n  @if (isActive) {\n    <sky-repeater expandMode=\"none\">\n      @for (item of displayedItems; track item.id) {\n        <sky-repeater-item\n          [selectable]=\"true\"\n          [(isSelected)]=\"item.selected\"\n          (isSelectedChange)=\"onItemSelect($event, item)\"\n        >\n          <sky-repeater-item-title>\n            {{ item.name }}\n          </sky-repeater-item-title>\n          <sky-repeater-item-content>\n            {{ item.description }}\n          </sky-repeater-item-content>\n        </sky-repeater-item>\n      }\n    </sky-repeater>\n  }\n</sky-data-view>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$2.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { 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.λ12, selector: "sky-repeater-item-title" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ViewRepeaterComponent, isStandalone: true, selector: "app-view-repeater", inputs: { items: "items" }, ngImport: i0, template: "<sky-data-view [viewId]=\"viewId\">\n  @if (isActive) {\n    <sky-repeater expandMode=\"none\">\n      @for (item of displayedItems; track item.id) {\n        <sky-repeater-item\n          [selectable]=\"true\"\n          [(isSelected)]=\"item.selected\"\n          (isSelectedChange)=\"onItemSelect($event, item)\"\n        >\n          <sky-repeater-item-title>\n            {{ item.name }}\n          </sky-repeater-item-title>\n          <sky-repeater-item-content>\n            {{ item.description }}\n          </sky-repeater-item-content>\n        </sky-repeater-item>\n      }\n    </sky-repeater>\n  }\n</sky-data-view>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i1$6.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$5.λ12, selector: "sky-repeater-item-title" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ViewRepeaterComponent, decorators: [{
             type: Component,
@@ -5894,16 +5991,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * @title Data manager with basic setup
  */
 class DataManagerBasicExampleComponent {
+    #dataManagerSvc;
+    #exampleSvc;
     constructor() {
         this.items = DATA_MANAGER_DEMO_DATA;
+        this.orangeModalComponent = OrangeModalComponent;
         this.#dataManagerSvc = inject(SkyDataManagerService);
-    }
-    #dataManagerSvc;
-    ngOnInit() {
+        this.#exampleSvc = inject(ExampleService$3);
         this.#dataManagerSvc.initDataManager({
             activeViewId: 'repeaterView',
             dataManagerConfig: {
-                filterModalComponent: FilterModalComponent$2,
                 sortOptions: [
                     {
                         id: 'az',
@@ -5923,7 +6020,15 @@ class DataManagerBasicExampleComponent {
                 filterData: {
                     filtersApplied: true,
                     filters: {
-                        hideOrange: true,
+                        appliedFilters: [
+                            {
+                                filterId: 'hideOrange',
+                                filterValue: {
+                                    value: true,
+                                    displayValue: 'True',
+                                },
+                            },
+                        ],
                     },
                 },
                 views: [
@@ -5935,13 +6040,26 @@ class DataManagerBasicExampleComponent {
             }),
         });
     }
+    onFruitTypeSearchAsync(args) {
+        // In a real-world application the search service might return an Observable
+        // created by calling HttpClient.get(). Assigning that Observable to the result
+        // allows the lookup component to cancel the web request if it does not complete
+        // before the user searches again.
+        args.result = this.#exampleSvc.search(args.searchText);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: 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", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DataManagerBasicExampleComponent, isStandalone: true, selector: "app-data-manager-basic-example", providers: [SkyDataManagerService, SkyUIConfigService], ngImport: i0, template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-lookup\n        filterId=\"fruitType\"\n        labelText=\"Fruit type\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onFruitTypeSearchAsync($event)\"\n      />\n      <sky-filter-item-modal\n        filterId=\"hideOrange\"\n        labelText=\"Hide orange\"\n        modalSize=\"small\"\n        [modalComponent]=\"orangeModalComponent\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item labelText=\"Records\" [value]=\"items.length\" />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-repeater [items]=\"items\" />\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "directive", type: i1$6.λ9, selector: "[skyDataManagerFilterController]" }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { kind: "ngmodule", type: SkyFilterBarModule }, { kind: "component", type: i2$4.λ1, selector: "sky-filter-bar", inputs: ["appliedFilters", "selectedFilterIds"], outputs: ["appliedFiltersChange", "selectedFilterIdsChange"] }, { kind: "component", type: i2$4.λ2, selector: "sky-filter-item-modal", inputs: ["filterId", "labelText", "modalComponent", "modalSize"], outputs: ["modalOpened"] }, { kind: "component", type: i2$4.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i2$5.λ16, selector: "sky-list-summary" }, { kind: "component", type: i2$5.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: ViewGridComponent, selector: "app-view-grid", inputs: ["items"] }, { kind: "component", type: ViewRepeaterComponent, selector: "app-view-repeater", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DataManagerBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-data-manager-basic-example', providers: [SkyDataManagerService, SkyUIConfigService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyDataManagerModule, ViewGridComponent, ViewRepeaterComponent], 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" }]
-        }] });
+            args: [{ selector: 'app-data-manager-basic-example', providers: [SkyDataManagerService, SkyUIConfigService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        SkyDataManagerModule,
+                        SkyFilterBarModule,
+                        SkyListSummaryModule,
+                        ViewGridComponent,
+                        ViewRepeaterComponent,
+                    ], template: "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-filter-bar skyDataManagerFilterController>\n      <sky-filter-item-lookup\n        filterId=\"fruitType\"\n        labelText=\"Fruit type\"\n        searchDescriptorProperty=\"name\"\n        searchIdProperty=\"id\"\n        (searchAsync)=\"onFruitTypeSearchAsync($event)\"\n      />\n      <sky-filter-item-modal\n        filterId=\"hideOrange\"\n        labelText=\"Hide orange\"\n        modalSize=\"small\"\n        [modalComponent]=\"orangeModalComponent\"\n      />\n    </sky-filter-bar>\n    <sky-list-summary>\n      <sky-list-summary-item labelText=\"Records\" [value]=\"items.length\" />\n    </sky-list-summary>\n  </sky-data-manager-toolbar>\n  <app-view-repeater [items]=\"items\" />\n  <app-view-grid [items]=\"items\" />\n</sky-data-manager>\n" }]
+        }], ctorParameters: () => [] });
 
 /**
  * @title Date pipe basic setup
@@ -5951,7 +6069,7 @@ class DatetimeDatePipeBasicExampleComponent {
         this.myDate = new Date('11/05/1955');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeDatePipeBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatetimeDatePipeBasicExampleComponent, isStandalone: true, selector: "app-datetime-date-pipe-basic-example", ngImport: i0, template: "<div>{{ myDate | skyDate }}</div>\n<div>{{ myDate | skyDate: 'medium' }}</div>\n<div>{{ myDate | skyDate: 'medium' : 'es-MX' }}</div>\n", dependencies: [{ kind: "ngmodule", type: SkyDatePipeModule }, { kind: "pipe", type: i2$8.SkyDatePipe, name: "skyDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatetimeDatePipeBasicExampleComponent, isStandalone: true, selector: "app-datetime-date-pipe-basic-example", ngImport: i0, template: "<div>{{ myDate | skyDate }}</div>\n<div>{{ myDate | skyDate: 'medium' }}</div>\n<div>{{ myDate | skyDate: 'medium' : 'es-MX' }}</div>\n", dependencies: [{ kind: "ngmodule", type: SkyDatePipeModule }, { kind: "pipe", type: i2$9.SkyDatePipe, name: "skyDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeDatePipeBasicExampleComponent, decorators: [{
             type: Component,
@@ -5991,7 +6109,7 @@ class DatetimeDateRangePickerBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeDateRangePickerBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: DatetimeDateRangePickerBasicExampleComponent, isStandalone: true, selector: "app-datetime-date-range-picker-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      data-sky-id=\"last-donation\"\n      formControlName=\"lastDonation\"\n      [dateFormat]=\"dateFormat\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    >\n      @if (lastDonation.errors?.['dateWeekend']) {\n        <sky-form-error\n          errorName=\"dateWeekend\"\n          errorText=\"Do not pick a weekend.\"\n        />\n      }\n    </sky-date-range-picker>\n  </form>\n</div>\n\n<ng-template #inlineHelpPopover>\n  By default, donations include one-time gifts, pledges, and matching gifts. To\n  customize, see <a>Giving settings</a>.\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDateRangePickerModule }, { kind: "component", type: i2$8.λ5, selector: "sky-date-range-picker", inputs: ["calculatorIds", "dateFormat", "disabled", "helpPopoverContent", "helpPopoverTitle", "hintText", "label", "labelText", "stacked", "helpKey"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: DatetimeDateRangePickerBasicExampleComponent, isStandalone: true, selector: "app-datetime-date-range-picker-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      data-sky-id=\"last-donation\"\n      formControlName=\"lastDonation\"\n      [dateFormat]=\"dateFormat\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    >\n      @if (lastDonation.errors?.['dateWeekend']) {\n        <sky-form-error\n          errorName=\"dateWeekend\"\n          errorText=\"Do not pick a weekend.\"\n        />\n      }\n    </sky-date-range-picker>\n  </form>\n</div>\n\n<ng-template #inlineHelpPopover>\n  By default, donations include one-time gifts, pledges, and matching gifts. To\n  customize, see <a>Giving settings</a>.\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDateRangePickerModule }, { kind: "component", type: i2$9.λ5, selector: "sky-date-range-picker", inputs: ["calculatorIds", "dateFormat", "disabled", "helpPopoverContent", "helpPopoverTitle", "hintText", "label", "labelText", "stacked", "helpKey"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeDateRangePickerBasicExampleComponent, decorators: [{
             type: Component,
@@ -6063,7 +6181,7 @@ class DatetimeDateRangePickerCustomCalculatorExampleComponent {
         return this.#dateRangeSvc.filterCalculators([id])[0];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeDateRangePickerCustomCalculatorExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: DatetimeDateRangePickerCustomCalculatorExampleComponent, isStandalone: true, selector: "app-datetime-date-range-picker-custom-calculator-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      formControlName=\"lastDonation\"\n      [calculatorIds]=\"customCalculators\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    >\n      @if (\n        lastDonation.errors?.['skyDateRange']?.errors?.['dateIsAfterToday']\n      ) {\n        <sky-form-error\n          errorName=\"dateIsAfterToday\"\n          errorText=\"Enter a date before today.\"\n        />\n      }\n    </sky-date-range-picker>\n  </form>\n  <p>\n    Selected calculator: {{ selectedCalculator()?.shortDescription$ | async }}\n  </p>\n</div>\n\n<ng-template #inlineHelpPopover>\n  By default, donations include one-time gifts, pledges, and matching gifts. To\n  customize, see <a>Giving settings</a>.\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDateRangePickerModule }, { kind: "component", type: i2$8.λ5, selector: "sky-date-range-picker", inputs: ["calculatorIds", "dateFormat", "disabled", "helpPopoverContent", "helpPopoverTitle", "hintText", "label", "labelText", "stacked", "helpKey"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: DatetimeDateRangePickerCustomCalculatorExampleComponent, isStandalone: true, selector: "app-datetime-date-range-picker-custom-calculator-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      formControlName=\"lastDonation\"\n      [calculatorIds]=\"customCalculators\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    >\n      @if (\n        lastDonation.errors?.['skyDateRange']?.errors?.['dateIsAfterToday']\n      ) {\n        <sky-form-error\n          errorName=\"dateIsAfterToday\"\n          errorText=\"Enter a date before today.\"\n        />\n      }\n    </sky-date-range-picker>\n  </form>\n  <p>\n    Selected calculator: {{ selectedCalculator()?.shortDescription$ | async }}\n  </p>\n</div>\n\n<ng-template #inlineHelpPopover>\n  By default, donations include one-time gifts, pledges, and matching gifts. To\n  customize, see <a>Giving settings</a>.\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDateRangePickerModule }, { kind: "component", type: i2$9.λ5, selector: "sky-date-range-picker", inputs: ["calculatorIds", "dateFormat", "disabled", "helpPopoverContent", "helpPopoverTitle", "hintText", "label", "labelText", "stacked", "helpKey"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeDateRangePickerCustomCalculatorExampleComponent, decorators: [{
             type: Component,
@@ -6096,7 +6214,7 @@ class DatetimeDateRangePickerHelpKeyExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeDateRangePickerHelpKeyExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatetimeDateRangePickerHelpKeyExampleComponent, isStandalone: true, selector: "app-datetime-date-range-picker-help-key-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      data-sky-id=\"last-donation\"\n      formControlName=\"lastDonation\"\n      helpKey=\"dates-help\"\n      [dateFormat]=\"dateFormat\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    />\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDateRangePickerModule }, { kind: "component", type: i2$8.λ5, selector: "sky-date-range-picker", inputs: ["calculatorIds", "dateFormat", "disabled", "helpPopoverContent", "helpPopoverTitle", "hintText", "label", "labelText", "stacked", "helpKey"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatetimeDateRangePickerHelpKeyExampleComponent, isStandalone: true, selector: "app-datetime-date-range-picker-help-key-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-date-range-picker\n      data-sky-id=\"last-donation\"\n      formControlName=\"lastDonation\"\n      helpKey=\"dates-help\"\n      [dateFormat]=\"dateFormat\"\n      [hintText]=\"hintText\"\n      [labelText]=\"labelText\"\n    />\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDateRangePickerModule }, { kind: "component", type: i2$9.λ5, selector: "sky-date-range-picker", inputs: ["calculatorIds", "dateFormat", "disabled", "helpPopoverContent", "helpPopoverTitle", "hintText", "label", "labelText", "stacked", "helpKey"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeDateRangePickerHelpKeyExampleComponent, decorators: [{
             type: Component,
@@ -6130,7 +6248,7 @@ class DatetimeDatepickerBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeDatepickerBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: DatetimeDatepickerBasicExampleComponent, isStandalone: true, selector: "app-datetime-datepicker-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"datepicker-example\"\n      labelText=\"Start date\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-datepicker>\n        <input formControlName=\"startDate\" skyDatepickerInput type=\"text\" />\n      </sky-datepicker>\n      @if (startDate.errors?.['invalidWeekend']) {\n        <sky-form-error\n          errorName=\"invalidWeekend\"\n          errorText=\"Start date must not be on a weekend.\"\n        />\n      }\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ startDate.value | json }}</code>\n  </p>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: i2$8.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$8.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$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: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "pipe", type: i4.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: DatetimeDatepickerBasicExampleComponent, isStandalone: true, selector: "app-datetime-datepicker-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"datepicker-example\"\n      labelText=\"Start date\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-datepicker>\n        <input formControlName=\"startDate\" skyDatepickerInput type=\"text\" />\n      </sky-datepicker>\n      @if (startDate.errors?.['invalidWeekend']) {\n        <sky-form-error\n          errorName=\"invalidWeekend\"\n          errorText=\"Start date must not be on a weekend.\"\n        />\n      }\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ startDate.value | json }}</code>\n  </p>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: i2$9.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$9.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { 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: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "pipe", type: i4.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeDatepickerBasicExampleComponent, decorators: [{
             type: Component,
@@ -6157,7 +6275,7 @@ class DatetimeDatepickerCustomDatesExampleComponent {
         if (event) {
             // Bind observable to `customDates` argument and simulate delay for async process to finish.
             // Normally, `getCustomDates()` would be replaced by an async call to fetch data.
-            event.customDates = this.#getCustomDates(event).pipe(delay$1(2000));
+            event.customDates = this.#getCustomDates(event).pipe(delay(2000));
         }
     }
     /**
@@ -6222,7 +6340,7 @@ class DatetimeDatepickerCustomDatesExampleComponent {
         return of(customDates);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeDatepickerCustomDatesExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatetimeDatepickerCustomDatesExampleComponent, isStandalone: true, selector: "app-datetime-datepicker-custom-dates-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"Start date\">\n      <sky-datepicker\n        (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      >\n        <input formControlName=\"startDate\" skyDatepickerInput type=\"text\" />\n      </sky-datepicker>\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ formGroup.value.startDate | json }}</code>\n  </p>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: i2$8.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$8.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$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: "pipe", type: i4.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatetimeDatepickerCustomDatesExampleComponent, isStandalone: true, selector: "app-datetime-datepicker-custom-dates-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"Start date\">\n      <sky-datepicker\n        (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      >\n        <input formControlName=\"startDate\" skyDatepickerInput type=\"text\" />\n      </sky-datepicker>\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ formGroup.value.startDate | json }}</code>\n  </p>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: i2$9.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$9.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { 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: "pipe", type: i4.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeDatepickerCustomDatesExampleComponent, decorators: [{
             type: Component,
@@ -6252,7 +6370,7 @@ class DatetimeDatepickerFuzzyExampleComponent {
         return JSON.stringify(this.formGroup.get('dob')?.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeDatepickerFuzzyExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatetimeDatepickerFuzzyExampleComponent, isStandalone: true, selector: "app-datetime-datepicker-fuzzy-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"fuzzy-datepicker-example\"\n      labelText=\"Date of birth\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-datepicker>\n        <input\n          formControlName=\"dob\"\n          skyFuzzyDatepickerInput\n          type=\"text\"\n          [futureDisabled]=\"true\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ getFuzzyDateForDisplay }}</code>\n  </p>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: i2$8.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$8.λ4, selector: "[skyFuzzyDatepickerInput]", inputs: ["dateFormat", "disabled", "futureDisabled", "maxDate", "minDate", "startAtDate", "skyDatepickerNoValidate", "startingDay", "yearRequired"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: DatetimeDatepickerFuzzyExampleComponent, isStandalone: true, selector: "app-datetime-datepicker-fuzzy-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"fuzzy-datepicker-example\"\n      labelText=\"Date of birth\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-datepicker>\n        <input\n          formControlName=\"dob\"\n          skyFuzzyDatepickerInput\n          type=\"text\"\n          [futureDisabled]=\"true\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </form>\n\n  <p>\n    Selected date: <code>{{ getFuzzyDateForDisplay }}</code>\n  </p>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: i2$9.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$9.λ4, selector: "[skyFuzzyDatepickerInput]", inputs: ["dateFormat", "disabled", "futureDisabled", "maxDate", "minDate", "startAtDate", "skyDatepickerNoValidate", "startingDay", "yearRequired"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeDatepickerFuzzyExampleComponent, decorators: [{
             type: Component,
@@ -6287,7 +6405,7 @@ class DatetimeTimepickerBasicExampleComponent {
         this.formGroup = inject(FormBuilder).group({ time: this.time });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeTimepickerBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: DatetimeTimepickerBasicExampleComponent, isStandalone: true, selector: "app-datetime-timepicker-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"timepicker-example\"\n      labelText=\"Start time\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-timepicker #timepicker>\n        <input\n          formControlName=\"time\"\n          timeFormat=\"hh\"\n          [skyTimepickerInput]=\"timepicker\"\n        />\n      </sky-timepicker>\n      @if (time.errors?.['invalidMinute']) {\n        <sky-form-error\n          errorName=\"invalidMinute\"\n          errorText=\"Start time must be a 15-minute increment.\"\n        />\n      }\n    </sky-input-box>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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: "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: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyTimepickerModule }, { kind: "directive", type: i2$8.λ7, selector: "[skyTimepickerInput]", inputs: ["skyTimepickerInput", "timeFormat", "returnFormat", "disabled"] }, { kind: "component", type: i2$8.λ6, selector: "sky-timepicker", outputs: ["selectedTimeChanged"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: DatetimeTimepickerBasicExampleComponent, isStandalone: true, selector: "app-datetime-timepicker-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box\n      data-sky-id=\"timepicker-example\"\n      labelText=\"Start time\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [hintText]=\"hintText\"\n    >\n      <sky-timepicker #timepicker>\n        <input\n          formControlName=\"time\"\n          timeFormat=\"hh\"\n          [skyTimepickerInput]=\"timepicker\"\n        />\n      </sky-timepicker>\n      @if (time.errors?.['invalidMinute']) {\n        <sky-form-error\n          errorName=\"invalidMinute\"\n          errorText=\"Start time must be a 15-minute increment.\"\n        />\n      }\n    </sky-input-box>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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: "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: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyTimepickerModule }, { kind: "directive", type: i2$9.λ7, selector: "[skyTimepickerInput]", inputs: ["skyTimepickerInput", "timeFormat", "returnFormat", "disabled"] }, { kind: "component", type: i2$9.λ6, selector: "sky-timepicker", outputs: ["selectedTimeChanged"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DatetimeTimepickerBasicExampleComponent, decorators: [{
             type: Component,
@@ -6307,7 +6425,7 @@ class ErrorsErrorEmbeddedExampleComponent {
         alert('action clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ErrorsErrorEmbeddedExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ErrorsErrorEmbeddedExampleComponent, isStandalone: true, selector: "app-errors-error-embedded-example", ngImport: i0, template: "<sky-error errorType=\"broken\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Try again\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"notfound\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Go back\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"construction\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Go back\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"security\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Go back\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error>\n  <sky-error-image>\n    <img\n      alt=\"\"\n      role=\"presentation\"\n      src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABeCAYAAADVA7GfAAAH/klEQVR4Ae2daYgcRRTH3/TuTnbcM0QhwRhQ9IsGlICCIaIiiF88ED+IflBEJDHExIAIgucHQYV4Y8hmYw4jMYcgMYdgEJI1goooxnyIopANJiRsdpLdzfRc3fJ6U7M9vX1V1avuauz60l3dVa/ee//pY35T3VOwbduGjJbmn39B/cgIWKdPOxEYCxZA1x3LoOOG6zMaEUAhk4KYJky9+gbUf/zJN/Fdt90KPa+/AtDd7btf543ZE6RWg8kXX4LGr7+F5rXzlpuh9603AYrF0Ha67TR0cyjUn0YDpl5+LVIMtIGCYVtoNEJN6rYzU4KY27YHnqb8EounNOyTpZIZQezz56G6czd3bqu79gD2zUrJjCDmp1vBNk3uvNqVCmDfrJRMCGKdPAm1AweFc4p90UYWSiYEqWwYBrvZFM4n9kUbWSjaC9L8/RjUvz8qnUu0gbZ0L9oLUlk/RJZDSltkTnkMaS1I/fARaBw/7nFZvIq20KbORV9Bmk0whzaR586xKXE9InfIY1BbQWp790Hz1CmPu/JVtIm2dS16CoLfHbZ+pixnju1KRZl9GcNaCmLu2AnW+LhMXKF90TaOoWPRThBRRMKbXF2RinaCmJvFEAmvIA5S2awfUtFKEAeR7BdHJLyi1Pbrh1S0EkQWkfAKoiNS0UYQKkTCK4puSEUbQdLEGmmO7f0AaSEINSLxBhlV1wmppC+IIkQSJYJ3vy5IJXVBVCESb8Kj6roglXQFUYxIokTw7tcBqaQqiGpE4k14VF0HpJKaIA4i2bUnKkeJ708bqXQmHvHlAR1EwklcC93dYMybx+WyNTbGNVuFIZXS2jVc41A1TmUqKSKSiaee4Zq4ULzvXiitXAGF3l6u2O3JSTA/Xg/Vg9/E7lfo6IC+TRvAWLQodh+qhqmcsngRScEwoLRiObcYmCQUsLTqWcAkxy1pIpXEBRFCJLYNhf6+uPmc3a5U4joa0UBaSCVxQUQwhfMIS70+O9Fxt1SrcVu2tRPxtc2AQCVRQeqHR4RnkYhMI2X5sAUFmUYqI8xMIsvkBHEQicTswWpNPCGm2BGCA5pDwwAJzlJJTBBZRGJX+SdaMwVl+iaNVJIRhAKRSBwhtsQR4hwlOAOG8zsT+zDwLhMRhAKRyHzKQfAawpKZJFJRLggVIrGljhDx0x0TJSmkolwQEUTCktC2FHhYh/UXvcti/XHJkIp7m4p1pYJQziKxa+ncZbmTnsQsFaWCVIbkHrRxJwMkLsxS1x+XEw5SwdtghUWZIA4iGZF/0IbFLnXakRCTjc+W9ZGj0Dym7sEfZYJQYwcZQWT6MiHcy8ondA8Rue3iuhJBZBCJ18FWXeLWVQa7tMZ3rahEKvSCyCISV+DuValPuYSYbh/c66qQCrkgsojEHXTbukRSZb+pt/lxuaIKqdAKQoFI/KLH7wESF2aquyyvaypmqZAKQoFIvEGzul0TJ7Yyt8xsfL+lCqRCJggVIvEL3NkmdYRIiBno0PQOaqRCJggZIglIgNRFXQK7BLjT2kyNVEgEoUQkrUi9KzIXdYm+Xjf86pRIhUQQUkTiFzFe1CWSKnNDEOBO22ZKpCItCDUiaYvUVZERBCR+bXS5ELpKhVSkBaFGJIFRa3yEMJ8pciEliBJEwqLzLGVOO1JHl8ePsGrjD3yXitwsFXFBFCGSoIDt8XGwRvlftdE8cQLg0qUgs+TbHaRiWcJ2hSdb177er+RdJEGR2I0GTK5aDZ1LlkBh7mBQs7bt9tgY1H/+BZJ8VzRDKsUH72/zJW5FbLJ1pQIXH39C6esv4gagYztj7lzo374FoFTidk/olKUSkXBHoGEHGaTCLYhyRKJhgkVcEkUq3IKoRiQiwevYRxSpcAmSCCLRMbuCPjlIZXSUqzeXIEkgEi7vNW88/eDPRi4vY9/2JoVIwrwvFIvQtWwpFAZj3vaWy4BIQ2pOV5hDMfYxpNKxeHGM1hz/HzK5crXwsx2xPInRqO/DdyFuYMwcTtmZWPU8q6ay7LzpRuj96P1YY8c6ZSWJSIK8Nq66klsMtIUCYt80Cw9SiRYkYUQSlLhCcU7QrsjtMn0jjcdsYG4cBoiBVCIFSRqRxIwvc82ao/FeTxsuCM4i2bItc8Hr6rCTy4gHf0IFyREJrbRxkEqgIDkioRWDWYtCKoGC5IiEpZB2GYVUfAXJEQmtCF5rYUjFV5AckXhTSFsPQyqzBMFvtvh1Py9qM8CQineUWYKofBjFO/j/ve43S6VNEB0QSZBI1rlzYF+8GLQ7cDv2sc6eDdyf5g4/pDLzm3qzCRNPPp3oxAXeZHQtvR26H3s0/iSH8TKYn++A+tEfeIdKrH3HNQuhb/MwgDF9bLQEqX21Fy6990FijuQDzWTgijXPAZulMi1LjkhmspPCmoNULs/QdwQxv9iVT+lJQQg2pBupGHa5LPSnv8xYvqTJAP7xMmph1PYdcN7jQWM2tyKaAUQqqIVR+/aQqI28H3EGUAvD+vc0sdncnGgGUAsjzs+KogPk/TgzYFlgGAuv5uyVN1eVAdTCKN51pyr7uV3ODKAWRvGhB8Do7+fsmjenzgBq4GhRGBiAnnVvgzGQi0Kd5Lj2MPeoAWrRYlnW3//A5NoXwLpwIa6dvB1BBoyBAehd9w4Y113rWGsJgjXrzBmo7v4S6oe+A6tcJhguNxGUAWNwELruuRvmPPIwGPPnt5q1CdLaiitTU/nR0pYQugoeFdDT42vwP+C9QYr2FdBDAAAAAElFTkSuQmCC\"\n    />\n  </sky-error-image>\n  <sky-error-title> Custom error with a custom image. </sky-error-title>\n  <sky-error-description> Custom description. </sky-error-description>\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Custom action\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"broken\">\n  <sky-error-title [replaceDefaultTitle]=\"true\">\n    Custom error with a default image.\n  </sky-error-title>\n  <sky-error-description [replaceDefaultDescription]=\"true\">\n    Custom description.\n  </sky-error-description>\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Custom action\n    </button>\n  </sky-error-action>\n</sky-error>\n", dependencies: [{ kind: "ngmodule", type: SkyErrorModule }, { kind: "component", type: i1$a.λ5, selector: "sky-error", inputs: ["errorType", "showImage"] }, { kind: "component", type: i1$a.λ3, selector: "sky-error-image" }, { kind: "component", type: i1$a.λ4, selector: "sky-error-title", inputs: ["replaceDefaultTitle"] }, { kind: "component", type: i1$a.λ2, selector: "sky-error-description", inputs: ["replaceDefaultDescription"] }, { kind: "component", type: i1$a.λ1, selector: "sky-error-action" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ErrorsErrorEmbeddedExampleComponent, isStandalone: true, selector: "app-errors-error-embedded-example", ngImport: i0, template: "<sky-error errorType=\"broken\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Try again\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"notfound\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Go back\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"construction\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Go back\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"security\">\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Go back\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error>\n  <sky-error-image>\n    <img\n      alt=\"\"\n      role=\"presentation\"\n      src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABeCAYAAADVA7GfAAAH/klEQVR4Ae2daYgcRRTH3/TuTnbcM0QhwRhQ9IsGlICCIaIiiF88ED+IflBEJDHExIAIgucHQYV4Y8hmYw4jMYcgMYdgEJI1goooxnyIopANJiRsdpLdzfRc3fJ6U7M9vX1V1avuauz60l3dVa/ee//pY35T3VOwbduGjJbmn39B/cgIWKdPOxEYCxZA1x3LoOOG6zMaEUAhk4KYJky9+gbUf/zJN/Fdt90KPa+/AtDd7btf543ZE6RWg8kXX4LGr7+F5rXzlpuh9603AYrF0Ha67TR0cyjUn0YDpl5+LVIMtIGCYVtoNEJN6rYzU4KY27YHnqb8EounNOyTpZIZQezz56G6czd3bqu79gD2zUrJjCDmp1vBNk3uvNqVCmDfrJRMCGKdPAm1AweFc4p90UYWSiYEqWwYBrvZFM4n9kUbWSjaC9L8/RjUvz8qnUu0gbZ0L9oLUlk/RJZDSltkTnkMaS1I/fARaBw/7nFZvIq20KbORV9Bmk0whzaR586xKXE9InfIY1BbQWp790Hz1CmPu/JVtIm2dS16CoLfHbZ+pixnju1KRZl9GcNaCmLu2AnW+LhMXKF90TaOoWPRThBRRMKbXF2RinaCmJvFEAmvIA5S2awfUtFKEAeR7BdHJLyi1Pbrh1S0EkQWkfAKoiNS0UYQKkTCK4puSEUbQdLEGmmO7f0AaSEINSLxBhlV1wmppC+IIkQSJYJ3vy5IJXVBVCESb8Kj6roglXQFUYxIokTw7tcBqaQqiGpE4k14VF0HpJKaIA4i2bUnKkeJ708bqXQmHvHlAR1EwklcC93dYMybx+WyNTbGNVuFIZXS2jVc41A1TmUqKSKSiaee4Zq4ULzvXiitXAGF3l6u2O3JSTA/Xg/Vg9/E7lfo6IC+TRvAWLQodh+qhqmcsngRScEwoLRiObcYmCQUsLTqWcAkxy1pIpXEBRFCJLYNhf6+uPmc3a5U4joa0UBaSCVxQUQwhfMIS70+O9Fxt1SrcVu2tRPxtc2AQCVRQeqHR4RnkYhMI2X5sAUFmUYqI8xMIsvkBHEQicTswWpNPCGm2BGCA5pDwwAJzlJJTBBZRGJX+SdaMwVl+iaNVJIRhAKRSBwhtsQR4hwlOAOG8zsT+zDwLhMRhAKRyHzKQfAawpKZJFJRLggVIrGljhDx0x0TJSmkolwQEUTCktC2FHhYh/UXvcti/XHJkIp7m4p1pYJQziKxa+ncZbmTnsQsFaWCVIbkHrRxJwMkLsxS1x+XEw5SwdtghUWZIA4iGZF/0IbFLnXakRCTjc+W9ZGj0Dym7sEfZYJQYwcZQWT6MiHcy8ondA8Rue3iuhJBZBCJ18FWXeLWVQa7tMZ3rahEKvSCyCISV+DuValPuYSYbh/c66qQCrkgsojEHXTbukRSZb+pt/lxuaIKqdAKQoFI/KLH7wESF2aquyyvaypmqZAKQoFIvEGzul0TJ7Yyt8xsfL+lCqRCJggVIvEL3NkmdYRIiBno0PQOaqRCJggZIglIgNRFXQK7BLjT2kyNVEgEoUQkrUi9KzIXdYm+Xjf86pRIhUQQUkTiFzFe1CWSKnNDEOBO22ZKpCItCDUiaYvUVZERBCR+bXS5ELpKhVSkBaFGJIFRa3yEMJ8pciEliBJEwqLzLGVOO1JHl8ePsGrjD3yXitwsFXFBFCGSoIDt8XGwRvlftdE8cQLg0qUgs+TbHaRiWcJ2hSdb177er+RdJEGR2I0GTK5aDZ1LlkBh7mBQs7bt9tgY1H/+BZJ8VzRDKsUH72/zJW5FbLJ1pQIXH39C6esv4gagYztj7lzo374FoFTidk/olKUSkXBHoGEHGaTCLYhyRKJhgkVcEkUq3IKoRiQiwevYRxSpcAmSCCLRMbuCPjlIZXSUqzeXIEkgEi7vNW88/eDPRi4vY9/2JoVIwrwvFIvQtWwpFAZj3vaWy4BIQ2pOV5hDMfYxpNKxeHGM1hz/HzK5crXwsx2xPInRqO/DdyFuYMwcTtmZWPU8q6ay7LzpRuj96P1YY8c6ZSWJSIK8Nq66klsMtIUCYt80Cw9SiRYkYUQSlLhCcU7QrsjtMn0jjcdsYG4cBoiBVCIFSRqRxIwvc82ao/FeTxsuCM4i2bItc8Hr6rCTy4gHf0IFyREJrbRxkEqgIDkioRWDWYtCKoGC5IiEpZB2GYVUfAXJEQmtCF5rYUjFV5AckXhTSFsPQyqzBMFvtvh1Py9qM8CQineUWYKofBjFO/j/ve43S6VNEB0QSZBI1rlzYF+8GLQ7cDv2sc6eDdyf5g4/pDLzm3qzCRNPPp3oxAXeZHQtvR26H3s0/iSH8TKYn++A+tEfeIdKrH3HNQuhb/MwgDF9bLQEqX21Fy6990FijuQDzWTgijXPAZulMi1LjkhmspPCmoNULs/QdwQxv9iVT+lJQQg2pBupGHa5LPSnv8xYvqTJAP7xMmph1PYdcN7jQWM2tyKaAUQqqIVR+/aQqI28H3EGUAvD+vc0sdncnGgGUAsjzs+KogPk/TgzYFlgGAuv5uyVN1eVAdTCKN51pyr7uV3ODKAWRvGhB8Do7+fsmjenzgBq4GhRGBiAnnVvgzGQi0Kd5Lj2MPeoAWrRYlnW3//A5NoXwLpwIa6dvB1BBoyBAehd9w4Y113rWGsJgjXrzBmo7v4S6oe+A6tcJhguNxGUAWNwELruuRvmPPIwGPPnt5q1CdLaiitTU/nR0pYQugoeFdDT42vwP+C9QYr2FdBDAAAAAElFTkSuQmCC\"\n    />\n  </sky-error-image>\n  <sky-error-title> Custom error with a custom image. </sky-error-title>\n  <sky-error-description> Custom description. </sky-error-description>\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Custom action\n    </button>\n  </sky-error-action>\n</sky-error>\n\n<sky-error errorType=\"broken\">\n  <sky-error-title [replaceDefaultTitle]=\"true\">\n    Custom error with a default image.\n  </sky-error-title>\n  <sky-error-description [replaceDefaultDescription]=\"true\">\n    Custom description.\n  </sky-error-description>\n  <sky-error-action>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"customAction()\">\n      Custom action\n    </button>\n  </sky-error-action>\n</sky-error>\n", dependencies: [{ kind: "ngmodule", type: SkyErrorModule }, { kind: "component", type: i1$b.λ5, selector: "sky-error", inputs: ["errorType", "showImage"] }, { kind: "component", type: i1$b.λ3, selector: "sky-error-image" }, { kind: "component", type: i1$b.λ4, selector: "sky-error-title", inputs: ["replaceDefaultTitle"] }, { kind: "component", type: i1$b.λ2, selector: "sky-error-description", inputs: ["replaceDefaultDescription"] }, { kind: "component", type: i1$b.λ1, selector: "sky-error-action" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ErrorsErrorEmbeddedExampleComponent, decorators: [{
             type: Component,
@@ -6366,7 +6484,7 @@ let ExampleService$2 = class ExampleService {
             hasMore: false,
             items: matchingPeople,
             totalCount: matchingPeople.length,
-        }).pipe(delay$1(800));
+        }).pipe(delay(800));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService, providedIn: 'root' }); }
@@ -6395,7 +6513,7 @@ class FilterBarLookupExampleComponent {
         args.result = this.#svc.search(args.searchText);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarLookupExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: FilterBarLookupExampleComponent, isStandalone: true, selector: "app-filter-bar-lookup-example", inputs: { appliedFilters: { classPropertyName: "appliedFilters", publicName: "appliedFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appliedFilters: "appliedFiltersChange" }, ngImport: i0, template: "<sky-filter-bar [(appliedFilters)]=\"appliedFilters\">\n  <sky-filter-item-lookup\n    filterId=\"lookup-filter\"\n    labelText=\"Lookup filter\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n</sky-filter-bar>\n", dependencies: [{ kind: "ngmodule", type: SkyFilterBarModule }, { kind: "component", type: 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: FilterBarLookupExampleComponent, isStandalone: true, selector: "app-filter-bar-lookup-example", inputs: { appliedFilters: { classPropertyName: "appliedFilters", publicName: "appliedFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appliedFilters: "appliedFiltersChange" }, ngImport: i0, template: "<sky-filter-bar [(appliedFilters)]=\"appliedFilters\">\n  <sky-filter-item-lookup\n    filterId=\"lookup-filter\"\n    labelText=\"Lookup filter\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n</sky-filter-bar>\n", dependencies: [{ kind: "ngmodule", type: SkyFilterBarModule }, { kind: "component", type: i2$4.λ1, selector: "sky-filter-bar", inputs: ["appliedFilters", "selectedFilterIds"], outputs: ["appliedFiltersChange", "selectedFilterIdsChange"] }, { kind: "component", type: i2$4.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarLookupExampleComponent, decorators: [{
             type: Component,
@@ -6454,7 +6572,7 @@ class FilterBarModalExampleComponent {
         this.modalComponent = FilterModalComponent$1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarModalExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: FilterBarModalExampleComponent, isStandalone: true, selector: "app-filter-bar-modal-example", inputs: { appliedFilters: { classPropertyName: "appliedFilters", publicName: "appliedFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appliedFilters: "appliedFiltersChange" }, ngImport: i0, template: "<sky-filter-bar [(appliedFilters)]=\"appliedFilters\">\n  <sky-filter-item-modal\n    filterId=\"modal-filter\"\n    labelText=\"Modal filter\"\n    modalSize=\"small\"\n    [modalComponent]=\"modalComponent\"\n  />\n</sky-filter-bar>\n", dependencies: [{ kind: "ngmodule", type: SkyFilterBarModule }, { kind: "component", type: 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: FilterBarModalExampleComponent, isStandalone: true, selector: "app-filter-bar-modal-example", inputs: { appliedFilters: { classPropertyName: "appliedFilters", publicName: "appliedFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appliedFilters: "appliedFiltersChange" }, ngImport: i0, template: "<sky-filter-bar [(appliedFilters)]=\"appliedFilters\">\n  <sky-filter-item-modal\n    filterId=\"modal-filter\"\n    labelText=\"Modal filter\"\n    modalSize=\"small\"\n    [modalComponent]=\"modalComponent\"\n  />\n</sky-filter-bar>\n", dependencies: [{ kind: "ngmodule", type: SkyFilterBarModule }, { kind: "component", type: i2$4.λ1, selector: "sky-filter-bar", inputs: ["appliedFilters", "selectedFilterIds"], outputs: ["appliedFiltersChange", "selectedFilterIdsChange"] }, { kind: "component", type: i2$4.λ2, selector: "sky-filter-item-modal", inputs: ["filterId", "labelText", "modalComponent", "modalSize"], outputs: ["modalOpened"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarModalExampleComponent, decorators: [{
             type: Component,
@@ -6604,7 +6722,7 @@ class FilterBarSelectableExampleComponent {
         args.result = of({ items: results, totalCount: count });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarSelectableExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: FilterBarSelectableExampleComponent, isStandalone: true, selector: "app-filter-bar-selectable-example", inputs: { appliedFilters: { classPropertyName: "appliedFilters", publicName: "appliedFilters", isSignal: true, isRequired: false, transformFunction: null }, selectedFilterIds: { classPropertyName: "selectedFilterIds", publicName: "selectedFilterIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appliedFilters: "appliedFiltersChange", selectedFilterIds: "selectedFilterIdsChange" }, ngImport: i0, template: "<sky-filter-bar\n  [(appliedFilters)]=\"appliedFilters\"\n  [(selectedFilterIds)]=\"selectedFilterIds\"\n>\n  <sky-filter-item-modal\n    filterId=\"application-fee-received\"\n    labelText=\"Application fee received\"\n    modalSize=\"small\"\n    [modalComponent]=\"applicationFeeModal\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"community-connection\"\n    labelText=\"Community connection\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"current-grade\"\n    labelText=\"Current grade\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"entering-grade\"\n    labelText=\"Entering grade\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"role\"\n    labelText=\"Role\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"staff-assigned\"\n    labelText=\"Staff assigned\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n</sky-filter-bar>\n", dependencies: [{ kind: "ngmodule", type: SkyFilterBarModule }, { kind: "component", type: 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: FilterBarSelectableExampleComponent, isStandalone: true, selector: "app-filter-bar-selectable-example", inputs: { appliedFilters: { classPropertyName: "appliedFilters", publicName: "appliedFilters", isSignal: true, isRequired: false, transformFunction: null }, selectedFilterIds: { classPropertyName: "selectedFilterIds", publicName: "selectedFilterIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appliedFilters: "appliedFiltersChange", selectedFilterIds: "selectedFilterIdsChange" }, ngImport: i0, template: "<sky-filter-bar\n  [(appliedFilters)]=\"appliedFilters\"\n  [(selectedFilterIds)]=\"selectedFilterIds\"\n>\n  <sky-filter-item-modal\n    filterId=\"application-fee-received\"\n    labelText=\"Application fee received\"\n    modalSize=\"small\"\n    [modalComponent]=\"applicationFeeModal\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"community-connection\"\n    labelText=\"Community connection\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"current-grade\"\n    labelText=\"Current grade\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"entering-grade\"\n    labelText=\"Entering grade\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"role\"\n    labelText=\"Role\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n  <sky-filter-item-lookup\n    filterId=\"staff-assigned\"\n    labelText=\"Staff assigned\"\n    searchDescriptorProperty=\"displayValue\"\n    searchIdProperty=\"value\"\n    (searchAsync)=\"onSearchAsync($event)\"\n  />\n</sky-filter-bar>\n", dependencies: [{ kind: "ngmodule", type: SkyFilterBarModule }, { kind: "component", type: i2$4.λ1, selector: "sky-filter-bar", inputs: ["appliedFilters", "selectedFilterIds"], outputs: ["appliedFiltersChange", "selectedFilterIdsChange"] }, { kind: "component", type: i2$4.λ2, selector: "sky-filter-item-modal", inputs: ["filterId", "labelText", "modalComponent", "modalSize"], outputs: ["modalOpened"] }, { kind: "component", type: i2$4.λ3, selector: "sky-filter-item-lookup", inputs: ["filterId", "labelText", "searchDescriptorProperty", "searchIdProperty"], outputs: ["searchAsync"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FilterBarSelectableExampleComponent, decorators: [{
             type: Component,
@@ -7337,7 +7455,7 @@ class FormsInputBoxBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormsInputBoxBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: FormsInputBoxBasicExampleComponent, isStandalone: true, selector: "app-forms-input-box-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"false\">\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <h2>New member form</h2>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-first-name\"\n            helpKey=\"first-name-help\"\n            labelText=\"First name\"\n            stacked=\"true\"\n          >\n            <input formControlName=\"firstName\" spellcheck=\"false\" type=\"text\" />\n          </sky-input-box>\n        </sky-column>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-last-name\"\n            labelText=\"Last name\"\n            stacked=\"true\"\n          >\n            <input\n              class=\"last-name-input-box\"\n              formControlName=\"lastName\"\n              spellcheck=\"false\"\n              type=\"text\"\n            />\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <sky-input-box\n            characterLimit=\"250\"\n            data-sky-id=\"input-box-bio\"\n            hintText=\"A brief description of the member's background, such as hometown, school, hobbies, etc.\"\n            labelText=\"Bio\"\n            stacked=\"true\"\n          >\n            <textarea formControlName=\"bio\"></textarea>\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-email\"\n            labelText=\"Email address\"\n            stacked=\"true\"\n            helpPopoverContent=\"We do not share this information with any third parties.\"\n            helpPopoverTitle=\"Privacy notice\"\n          >\n            <input formControlName=\"email\" type=\"text\" />\n          </sky-input-box>\n        </sky-column>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box labelText=\"Date of birth\" stacked=\"true\">\n            <sky-datepicker>\n              <input formControlName=\"dob\" skyDatepickerInput />\n            </sky-datepicker>\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <sky-input-box\n            data-sky-id=\"input-box-favorite-color\"\n            labelText=\"Favorite color\"\n          >\n            <select\n              class=\"input-box-favorite-color-select\"\n              formControlName=\"favoriteColor\"\n            >\n              <option value=\"none\">None</option>\n              <option value=\"red\">Red</option>\n              <option value=\"orange\">Orange</option>\n              <option value=\"yellow\">Yellow</option>\n              <option value=\"green\">Green</option>\n              <option value=\"blue\">Blue</option>\n              <option value=\"purple\">Purple</option>\n              <option value=\"invalid\">Invalid Color</option>\n            </select>\n            <!-- Custom form error not handled by input box. -->\n            @if (favoriteColor.errors?.['invalid']) {\n              <sky-form-error\n                errorName=\"invalid\"\n                errorText=\"Invalid Color is not a color\"\n              />\n            }\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n    </sky-fluid-grid>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: i2$8.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$8.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$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: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyStatusIndicatorModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: FormsInputBoxBasicExampleComponent, isStandalone: true, selector: "app-forms-input-box-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form [formGroup]=\"formGroup\">\n    <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"false\">\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <h2>New member form</h2>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-first-name\"\n            helpKey=\"first-name-help\"\n            labelText=\"First name\"\n            stacked=\"true\"\n          >\n            <input formControlName=\"firstName\" spellcheck=\"false\" type=\"text\" />\n          </sky-input-box>\n        </sky-column>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-last-name\"\n            labelText=\"Last name\"\n            stacked=\"true\"\n          >\n            <input\n              class=\"last-name-input-box\"\n              formControlName=\"lastName\"\n              spellcheck=\"false\"\n              type=\"text\"\n            />\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <sky-input-box\n            characterLimit=\"250\"\n            data-sky-id=\"input-box-bio\"\n            hintText=\"A brief description of the member's background, such as hometown, school, hobbies, etc.\"\n            labelText=\"Bio\"\n            stacked=\"true\"\n          >\n            <textarea formControlName=\"bio\"></textarea>\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box\n            data-sky-id=\"input-box-email\"\n            labelText=\"Email address\"\n            stacked=\"true\"\n            helpPopoverContent=\"We do not share this information with any third parties.\"\n            helpPopoverTitle=\"Privacy notice\"\n          >\n            <input formControlName=\"email\" type=\"text\" />\n          </sky-input-box>\n        </sky-column>\n        <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n          <sky-input-box labelText=\"Date of birth\" stacked=\"true\">\n            <sky-datepicker>\n              <input formControlName=\"dob\" skyDatepickerInput />\n            </sky-datepicker>\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n      <sky-row>\n        <sky-column [screenSmall]=\"12\">\n          <sky-input-box\n            data-sky-id=\"input-box-favorite-color\"\n            labelText=\"Favorite color\"\n          >\n            <select\n              class=\"input-box-favorite-color-select\"\n              formControlName=\"favoriteColor\"\n            >\n              <option value=\"none\">None</option>\n              <option value=\"red\">Red</option>\n              <option value=\"orange\">Orange</option>\n              <option value=\"yellow\">Yellow</option>\n              <option value=\"green\">Green</option>\n              <option value=\"blue\">Blue</option>\n              <option value=\"purple\">Purple</option>\n              <option value=\"invalid\">Invalid Color</option>\n            </select>\n            <!-- Custom form error not handled by input box. -->\n            @if (favoriteColor.errors?.['invalid']) {\n              <sky-form-error\n                errorName=\"invalid\"\n                errorText=\"Invalid Color is not a color\"\n              />\n            }\n          </sky-input-box>\n        </sky-column>\n      </sky-row>\n    </sky-fluid-grid>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: i2$9.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$9.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$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: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyStatusIndicatorModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormsInputBoxBasicExampleComponent, decorators: [{
             type: Component,
@@ -7518,7 +7636,7 @@ class FormsSelectionBoxCheckboxExampleComponent {
         return this.#formBuilder.array(checkboxArray);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormsSelectionBoxCheckboxExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: FormsSelectionBoxCheckboxExampleComponent, isStandalone: true, selector: "app-forms-selection-box-checkbox-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-selection-box-grid>\n    @for (control of checkboxControls; track control; let i = $index) {\n      <sky-selection-box [control]=\"checkbox\">\n        <sky-icon [iconName]=\"selectionBoxes[i].iconName\" />\n        <sky-selection-box-header #checkboxHeaderId=\"skyId\" skyId>\n          {{ selectionBoxes[i].name }}\n        </sky-selection-box-header>\n        <sky-selection-box-description>\n          {{ selectionBoxes[i].description }}\n        </sky-selection-box-description>\n        <sky-checkbox\n          #checkbox\n          [formControl]=\"control\"\n          [labelledBy]=\"checkboxHeaderId.id\"\n        />\n      </sky-selection-box>\n    }\n  </sky-selection-box-grid>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$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: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkySelectionBoxModule }, { kind: "component", type: i2$3.λ15, selector: "sky-selection-box-grid", inputs: ["alignItems"] }, { kind: "component", type: i2$3.λ17, selector: "sky-selection-box", inputs: ["control"] }, { kind: "component", type: i2$3.λ14, selector: "sky-selection-box-description" }, { kind: "component", type: i2$3.λ16, selector: "sky-selection-box-header" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: FormsSelectionBoxCheckboxExampleComponent, isStandalone: true, selector: "app-forms-selection-box-checkbox-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-selection-box-grid>\n    @for (control of checkboxControls; track control; let i = $index) {\n      <sky-selection-box [control]=\"checkbox\">\n        <sky-icon [iconName]=\"selectionBoxes[i].iconName\" />\n        <sky-selection-box-header #checkboxHeaderId=\"skyId\" skyId>\n          {{ selectionBoxes[i].name }}\n        </sky-selection-box-header>\n        <sky-selection-box-description>\n          {{ selectionBoxes[i].description }}\n        </sky-selection-box-description>\n        <sky-checkbox\n          #checkbox\n          [formControl]=\"control\"\n          [labelledBy]=\"checkboxHeaderId.id\"\n        />\n      </sky-selection-box>\n    }\n  </sky-selection-box-grid>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$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: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkySelectionBoxModule }, { kind: "component", type: i2$3.λ15, selector: "sky-selection-box-grid", inputs: ["alignItems"] }, { kind: "component", type: i2$3.λ17, selector: "sky-selection-box", inputs: ["control"] }, { kind: "component", type: i2$3.λ14, selector: "sky-selection-box-description" }, { kind: "component", type: i2$3.λ16, selector: "sky-selection-box-header" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormsSelectionBoxCheckboxExampleComponent, decorators: [{
             type: Component,
@@ -7562,7 +7680,7 @@ class FormsSelectionBoxRadioExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormsSelectionBoxRadioExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: FormsSelectionBoxRadioExampleComponent, isStandalone: true, selector: "app-forms-selection-box-radio-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n  <sky-radio-group ariaLabel=\"Demo options\" formControlName=\"myOption\">\n    <sky-selection-box-grid>\n      @for (item of items; track item) {\n        <sky-selection-box [control]=\"radio\">\n          <sky-icon [iconName]=\"item['iconName']\" />\n          <sky-selection-box-header #radioHeaderId=\"skyId\" skyId>\n            {{ item['name'] }}\n          </sky-selection-box-header>\n          <sky-selection-box-description>\n            {{ item['description'] }}\n          </sky-selection-box-description>\n          <sky-radio\n            #radio\n            [labelledBy]=\"radioHeaderId.id\"\n            [value]=\"item['value']\"\n          />\n        </sky-selection-box>\n      }\n    </sky-selection-box-grid>\n  </sky-radio-group>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyRadioModule }, { kind: "component", type: i2$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"] }, { kind: "ngmodule", type: SkySelectionBoxModule }, { kind: "component", type: i2$3.λ15, selector: "sky-selection-box-grid", inputs: ["alignItems"] }, { kind: "component", type: i2$3.λ17, selector: "sky-selection-box", inputs: ["control"] }, { kind: "component", type: i2$3.λ14, selector: "sky-selection-box-description" }, { kind: "component", type: i2$3.λ16, selector: "sky-selection-box-header" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: FormsSelectionBoxRadioExampleComponent, isStandalone: true, selector: "app-forms-selection-box-radio-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n  <sky-radio-group ariaLabel=\"Demo options\" formControlName=\"myOption\">\n    <sky-selection-box-grid>\n      @for (item of items; track item) {\n        <sky-selection-box [control]=\"radio\">\n          <sky-icon [iconName]=\"item['iconName']\" />\n          <sky-selection-box-header #radioHeaderId=\"skyId\" skyId>\n            {{ item['name'] }}\n          </sky-selection-box-header>\n          <sky-selection-box-description>\n            {{ item['description'] }}\n          </sky-selection-box-description>\n          <sky-radio\n            #radio\n            [labelledBy]=\"radioHeaderId.id\"\n            [value]=\"item['value']\"\n          />\n        </sky-selection-box>\n      }\n    </sky-selection-box-grid>\n  </sky-radio-group>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { 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"] }, { kind: "ngmodule", type: SkySelectionBoxModule }, { kind: "component", type: i2$3.λ15, selector: "sky-selection-box-grid", inputs: ["alignItems"] }, { kind: "component", type: i2$3.λ17, selector: "sky-selection-box", inputs: ["control"] }, { kind: "component", type: i2$3.λ14, selector: "sky-selection-box-description" }, { kind: "component", type: i2$3.λ16, selector: "sky-selection-box-header" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FormsSelectionBoxRadioExampleComponent, decorators: [{
             type: Component,
@@ -7619,7 +7737,7 @@ class HelpInlineActionClickExampleComponent {
         alert('Use help inline to show supplemental information to the user.');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HelpInlineActionClickExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: HelpInlineActionClickExampleComponent, isStandalone: true, selector: "app-help-inline-action-click-example", ngImport: i0, template: "<h3>\n  Projected revenue\n  <sky-help-inline\n    ariaLabel=\"Information about Projected revenue\"\n    data-sky-id=\"help-inline-example\"\n    (actionClick)=\"onActionClick()\"\n  />\n</h3>\n", dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$6.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: HelpInlineActionClickExampleComponent, isStandalone: true, selector: "app-help-inline-action-click-example", ngImport: i0, template: "<h3>\n  Projected revenue\n  <sky-help-inline\n    ariaLabel=\"Information about Projected revenue\"\n    data-sky-id=\"help-inline-example\"\n    (actionClick)=\"onActionClick()\"\n  />\n</h3>\n", dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$7.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HelpInlineActionClickExampleComponent, decorators: [{
             type: Component,
@@ -7631,7 +7749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  */
 class HelpInlineHelpKeyExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HelpInlineHelpKeyExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: HelpInlineHelpKeyExampleComponent, isStandalone: true, selector: "app-help-inline-help-key-example", ngImport: i0, template: "<h3>\n  Projected revenue\n  <sky-help-inline\n    ariaLabel=\"Information about Projected revenue\"\n    data-sky-id=\"help-inline-example\"\n    helpKey=\"projected-revenue\"\n  />\n</h3>\n", dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$6.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: HelpInlineHelpKeyExampleComponent, isStandalone: true, selector: "app-help-inline-help-key-example", ngImport: i0, template: "<h3>\n  Projected revenue\n  <sky-help-inline\n    ariaLabel=\"Information about Projected revenue\"\n    data-sky-id=\"help-inline-example\"\n    helpKey=\"projected-revenue\"\n  />\n</h3>\n", dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$7.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HelpInlineHelpKeyExampleComponent, decorators: [{
             type: Component,
@@ -7643,7 +7761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  */
 class HelpInlinePopoverExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HelpInlinePopoverExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: HelpInlinePopoverExampleComponent, isStandalone: true, selector: "app-help-inline-popover-example", ngImport: i0, template: "<h3>\n  Projected revenue\n  <sky-help-inline\n    ariaLabel=\"Information about Projected revenue\"\n    data-sky-id=\"help-inline-example\"\n    popoverContent=\"The estimated income expected for the current year.\"\n    popoverTitle=\"Projected revenue\"\n  />\n</h3>\n", dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$6.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: HelpInlinePopoverExampleComponent, isStandalone: true, selector: "app-help-inline-popover-example", ngImport: i0, template: "<h3>\n  Projected revenue\n  <sky-help-inline\n    ariaLabel=\"Information about Projected revenue\"\n    data-sky-id=\"help-inline-example\"\n    popoverContent=\"The estimated income expected for the current year.\"\n    popoverTitle=\"Projected revenue\"\n  />\n</h3>\n", dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$7.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HelpInlinePopoverExampleComponent, decorators: [{
             type: Component,
@@ -7655,7 +7773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  */
 class IconBasicExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IconBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: IconBasicExampleComponent, isStandalone: true, selector: "app-icon-basic-example", ngImport: i0, template: "<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxxs\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxs\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xs\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"s\" />\n<sky-icon iconName=\"calendar-ltr\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"l\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xl\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxl\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxxl\" />\n<sky-icon\n  data-sky-id=\"icon-example\"\n  iconName=\"calendar-ltr\"\n  variant=\"solid\"\n  iconSize=\"xl\"\n/>\n\n<div>\n  <sky-icon iconName=\"navigation\" iconSize=\"xl\" />\n</div>\n\n<div>\n  <sky-icon iconName=\"chevron-down\" iconSize=\"xl\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: IconBasicExampleComponent, isStandalone: true, selector: "app-icon-basic-example", ngImport: i0, template: "<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxxs\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxs\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xs\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"s\" />\n<sky-icon iconName=\"calendar-ltr\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"l\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xl\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxl\" />\n<sky-icon iconName=\"calendar-ltr\" iconSize=\"xxxl\" />\n<sky-icon\n  data-sky-id=\"icon-example\"\n  iconName=\"calendar-ltr\"\n  variant=\"solid\"\n  iconSize=\"xl\"\n/>\n\n<div>\n  <sky-icon iconName=\"navigation\" iconSize=\"xl\" />\n</div>\n\n<div>\n  <sky-icon iconName=\"chevron-down\" iconSize=\"xl\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IconBasicExampleComponent, decorators: [{
             type: Component,
@@ -7673,7 +7791,7 @@ class IconIconButtonExampleComponent {
         alert('Icon only button clicked');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IconIconButtonExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: IconIconButtonExampleComponent, isStandalone: true, selector: "app-icon-icon-button-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"textButtonClick()\"\n>\n  <sky-icon data-sky-id=\"text-button-icon\" iconName=\"save\" />\n  Save\n</button>\n\n<button\n  class=\"sky-btn sky-btn-icon-borderless\"\n  type=\"button\"\n  (click)=\"iconOnlyButtonClick()\"\n>\n  <sky-icon data-sky-id=\"button-icon\" iconName=\"edit\" />\n</button>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: IconIconButtonExampleComponent, isStandalone: true, selector: "app-icon-icon-button-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"textButtonClick()\"\n>\n  <sky-icon data-sky-id=\"text-button-icon\" iconName=\"save\" />\n  Save\n</button>\n\n<button\n  class=\"sky-btn sky-btn-icon-borderless\"\n  type=\"button\"\n  (click)=\"iconOnlyButtonClick()\"\n>\n  <sky-icon data-sky-id=\"button-icon\" iconName=\"edit\" />\n</button>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IconIconButtonExampleComponent, decorators: [{
             type: Component,
@@ -8072,7 +8190,7 @@ class InlineFormBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: InlineFormBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: InlineFormBasicExampleComponent, isStandalone: true, selector: "app-inline-form-basic-example", ngImport: i0, template: "<sky-inline-form\n  data-sky-id=\"first-name\"\n  [config]=\"inlineFormConfig\"\n  [showForm]=\"showForm\"\n  [template]=\"inlineFormTemplate\"\n  (close)=\"onInlineFormClose($event)\"\n>\n  <table>\n    <tr>\n      <th>First name:</th>\n      <td>\n        {{ firstName }}\n      </td>\n      <td>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"onInlineFormOpen()\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </td>\n    </tr>\n  </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"First name\">\n      <input formControlName=\"firstName\" type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineFormModule }, { kind: "component", type: i3$3.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: InlineFormBasicExampleComponent, isStandalone: true, selector: "app-inline-form-basic-example", ngImport: i0, template: "<sky-inline-form\n  data-sky-id=\"first-name\"\n  [config]=\"inlineFormConfig\"\n  [showForm]=\"showForm\"\n  [template]=\"inlineFormTemplate\"\n  (close)=\"onInlineFormClose($event)\"\n>\n  <table>\n    <tr>\n      <th>First name:</th>\n      <td>\n        {{ firstName }}\n      </td>\n      <td>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"onInlineFormOpen()\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </td>\n    </tr>\n  </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"First name\">\n      <input formControlName=\"firstName\" type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineFormModule }, { kind: "component", type: i3$2.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: InlineFormBasicExampleComponent, decorators: [{
             type: Component,
@@ -8154,7 +8272,7 @@ class InlineFormCustomButtonsExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: InlineFormCustomButtonsExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: InlineFormCustomButtonsExampleComponent, isStandalone: true, selector: "app-inline-form-custom-buttons-example", ngImport: i0, template: "<sky-inline-form\n  data-sky-id=\"first-name\"\n  [config]=\"inlineFormConfig\"\n  [showForm]=\"showForm\"\n  [template]=\"inlineFormTemplate\"\n  (close)=\"onInlineFormClose($event)\"\n>\n  <table>\n    <tr>\n      <th>First name:</th>\n      <td>\n        {{ firstName }}\n      </td>\n      <td>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"onInlineFormOpen()\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </td>\n    </tr>\n  </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"First name\">\n      <input formControlName=\"firstName\" required type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineFormModule }, { kind: "component", type: i3$3.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: InlineFormCustomButtonsExampleComponent, isStandalone: true, selector: "app-inline-form-custom-buttons-example", ngImport: i0, template: "<sky-inline-form\n  data-sky-id=\"first-name\"\n  [config]=\"inlineFormConfig\"\n  [showForm]=\"showForm\"\n  [template]=\"inlineFormTemplate\"\n  (close)=\"onInlineFormClose($event)\"\n>\n  <table>\n    <tr>\n      <th>First name:</th>\n      <td>\n        {{ firstName }}\n      </td>\n      <td>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"onInlineFormOpen()\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </td>\n    </tr>\n  </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n  <form [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"First name\">\n      <input formControlName=\"firstName\" required type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineFormModule }, { kind: "component", type: i3$2.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: InlineFormCustomButtonsExampleComponent, decorators: [{
             type: Component,
@@ -8226,7 +8344,7 @@ class InlineFormRepeatersExampleComponent {
         this.activeInlineFormId = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: InlineFormRepeatersExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: InlineFormRepeatersExampleComponent, isStandalone: true, selector: "app-inline-form-repeaters-example", ngImport: i0, template: "<sky-repeater>\n  @for (item of items; track item) {\n    <sky-repeater-item\n      [inlineFormConfig]=\"inlineFormConfig\"\n      [inlineFormTemplate]=\"inlineFormTemplate\"\n      [showInlineForm]=\"activeInlineFormId === item.id\"\n      (inlineFormClose)=\"onInlineFormClose($event)\"\n    >\n      <sky-repeater-item-title>\n        <div class=\"sky-font-emphasized\">\n          {{ item.title }}\n        </div>\n      </sky-repeater-item-title>\n      <sky-repeater-item-context-menu>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"showInlineForm(item)\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </sky-repeater-item-context-menu>\n\n      <sky-repeater-item-content>\n        {{ item.note }}\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n\n<ng-template #inlineFormTemplate>\n  <form novalidate [formGroup]=\"formGroup\">\n    <sky-input-box labelTex=\"Title\" stacked=\"true\">\n      <input formControlName=\"title\" type=\"text\" />\n    </sky-input-box>\n    <sky-input-box labelText=\"Note\">\n      <input formControlName=\"note\" type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$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: "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: InlineFormRepeatersExampleComponent, isStandalone: true, selector: "app-inline-form-repeaters-example", ngImport: i0, template: "<sky-repeater>\n  @for (item of items; track item) {\n    <sky-repeater-item\n      [inlineFormConfig]=\"inlineFormConfig\"\n      [inlineFormTemplate]=\"inlineFormTemplate\"\n      [showInlineForm]=\"activeInlineFormId === item.id\"\n      (inlineFormClose)=\"onInlineFormClose($event)\"\n    >\n      <sky-repeater-item-title>\n        <div class=\"sky-font-emphasized\">\n          {{ item.title }}\n        </div>\n      </sky-repeater-item-title>\n      <sky-repeater-item-context-menu>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"showInlineForm(item)\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </sky-repeater-item-context-menu>\n\n      <sky-repeater-item-content>\n        {{ item.note }}\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n\n<ng-template #inlineFormTemplate>\n  <form novalidate [formGroup]=\"formGroup\">\n    <sky-input-box labelTex=\"Title\" stacked=\"true\">\n      <input formControlName=\"title\" type=\"text\" />\n    </sky-input-box>\n    <sky-input-box labelText=\"Note\">\n      <input formControlName=\"note\" type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$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$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$5.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i2$5.λ12, selector: "sky-repeater-item-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: InlineFormRepeatersExampleComponent, decorators: [{
             type: Component,
@@ -8432,7 +8550,7 @@ class LayoutBackToTopInfiniteScrollExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutBackToTopInfiniteScrollExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: LayoutBackToTopInfiniteScrollExampleComponent, isStandalone: true, selector: "app-layout-back-to-top-infinite-scroll-example", ngImport: i0, template: "<div class=\"target\"></div>\n<sky-repeater skyBackToTop>\n  @for (person of personList; track person) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ person.name }}\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        {{ person.address }}\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n<sky-infinite-scroll [enabled]=\"hasMore\" (scrollEnd)=\"onScrollEnd()\" />\n", dependencies: [{ kind: "ngmodule", type: SkyBackToTopModule }, { kind: "directive", type: i1$5.λ7, selector: "[skyBackToTop]", inputs: ["skyBackToTop", "skyBackToTopMessageStream"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i2$4.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { 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.λ12, selector: "sky-repeater-item-title" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: LayoutBackToTopInfiniteScrollExampleComponent, isStandalone: true, selector: "app-layout-back-to-top-infinite-scroll-example", ngImport: i0, template: "<div class=\"target\"></div>\n<sky-repeater skyBackToTop>\n  @for (person of personList; track person) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ person.name }}\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        {{ person.address }}\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n<sky-infinite-scroll [enabled]=\"hasMore\" (scrollEnd)=\"onScrollEnd()\" />\n", dependencies: [{ kind: "ngmodule", type: SkyBackToTopModule }, { kind: "directive", type: i1$5.λ7, selector: "[skyBackToTop]", inputs: ["skyBackToTop", "skyBackToTopMessageStream"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i2$5.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$5.λ12, selector: "sky-repeater-item-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutBackToTopInfiniteScrollExampleComponent, decorators: [{
             type: Component,
@@ -8553,7 +8671,7 @@ class LayoutBackToTopRepeaterExampleComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutBackToTopRepeaterExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: LayoutBackToTopRepeaterExampleComponent, isStandalone: true, selector: "app-layout-back-to-top-repeater-example", ngImport: i0, template: "<div class=\"target\"></div>\n<sky-repeater skyBackToTop>\n  @for (person of personList; track person) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ person.name }}\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        {{ person.address }}\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyBackToTopModule }, { kind: "directive", type: i1$5.λ7, selector: "[skyBackToTop]", inputs: ["skyBackToTop", "skyBackToTopMessageStream"] }, { 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.λ12, selector: "sky-repeater-item-title" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: LayoutBackToTopRepeaterExampleComponent, isStandalone: true, selector: "app-layout-back-to-top-repeater-example", ngImport: i0, template: "<div class=\"target\"></div>\n<sky-repeater skyBackToTop>\n  @for (person of personList; track person) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ person.name }}\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        {{ person.address }}\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyBackToTopModule }, { kind: "directive", type: i1$5.λ7, selector: "[skyBackToTop]", inputs: ["skyBackToTop", "skyBackToTopMessageStream"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$5.λ12, selector: "sky-repeater-item-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutBackToTopRepeaterExampleComponent, decorators: [{
             type: Component,
@@ -8732,7 +8850,7 @@ class LayoutDescriptionListInlineHelpExampleComponent {
         alert('Help inline button clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutDescriptionListInlineHelpExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: LayoutDescriptionListInlineHelpExampleComponent, isStandalone: true, selector: "app-layout-description-list-inline-help-example", ngImport: i0, template: "<sky-description-list mode=\"horizontal\">\n  @for (item of items; track item) {\n    <sky-description-list-content [helpPopoverContent]=\"item.helpText\">\n      <sky-description-list-term>\n        {{ item.term }}\n        <sky-help-inline\n          ariaLabel=\"Information about {{ item.term }}\"\n          class=\"sky-control-help\"\n          (actionClick)=\"onActionClick()\"\n        />\n      </sky-description-list-term>\n      <sky-description-list-description>\n        {{ item.description }}\n      </sky-description-list-description>\n    </sky-description-list-content>\n  }\n</sky-description-list>\n", dependencies: [{ kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$6.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: LayoutDescriptionListInlineHelpExampleComponent, isStandalone: true, selector: "app-layout-description-list-inline-help-example", ngImport: i0, template: "<sky-description-list mode=\"horizontal\">\n  @for (item of items; track item) {\n    <sky-description-list-content [helpPopoverContent]=\"item.helpText\">\n      <sky-description-list-term>\n        {{ item.term }}\n        <sky-help-inline\n          ariaLabel=\"Information about {{ item.term }}\"\n          class=\"sky-control-help\"\n          (actionClick)=\"onActionClick()\"\n        />\n      </sky-description-list-term>\n      <sky-description-list-description>\n        {{ item.description }}\n      </sky-description-list-description>\n    </sky-description-list-content>\n  }\n</sky-description-list>\n", dependencies: [{ kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$7.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutDescriptionListInlineHelpExampleComponent, decorators: [{
             type: Component,
@@ -8850,7 +8968,7 @@ class LayoutInlineDeleteCustomExampleComponent {
         this.pending = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutInlineDeleteCustomExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: LayoutInlineDeleteCustomExampleComponent, isStandalone: true, selector: "app-layout-inline-delete-custom-example", ngImport: i0, template: "<div class=\"inline-delete-container\">\n  <strong>Custom content</strong>\n  <div>\n    <button\n      class=\"sky-btn sky-btn-danger inline-delete-trigger\"\n      type=\"button\"\n      (click)=\"deleteItem()\"\n    >\n      <sky-icon iconName=\"delete\" />\n    </button>\n  </div>\n  @if (deleting) {\n    <sky-inline-delete\n      data-sky-id=\"inline-delete-custom\"\n      [pending]=\"pending\"\n      (cancelTriggered)=\"onCancelTriggered()\"\n      (deleteTriggered)=\"onDeleteTriggered()\"\n    />\n  }\n</div>\n", styles: [".inline-delete-container{padding:15px;background-color:#fff;border:black solid 1px;height:400px;width:400px;position:relative}.inline-delete-trigger{position:absolute;bottom:10px;left:0;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineDeleteModule }, { kind: "component", type: i1$5.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: LayoutInlineDeleteCustomExampleComponent, isStandalone: true, selector: "app-layout-inline-delete-custom-example", ngImport: i0, template: "<div class=\"inline-delete-container\">\n  <strong>Custom content</strong>\n  <div>\n    <button\n      class=\"sky-btn sky-btn-danger inline-delete-trigger\"\n      type=\"button\"\n      (click)=\"deleteItem()\"\n    >\n      <sky-icon iconName=\"delete\" />\n    </button>\n  </div>\n  @if (deleting) {\n    <sky-inline-delete\n      data-sky-id=\"inline-delete-custom\"\n      [pending]=\"pending\"\n      (cancelTriggered)=\"onCancelTriggered()\"\n      (deleteTriggered)=\"onDeleteTriggered()\"\n    />\n  }\n</div>\n", styles: [".inline-delete-container{padding:15px;background-color:#fff;border:black solid 1px;height:400px;width:400px;position:relative}.inline-delete-trigger{position:absolute;bottom:10px;left:0;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineDeleteModule }, { kind: "component", type: i1$5.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutInlineDeleteCustomExampleComponent, decorators: [{
             type: Component,
@@ -8899,7 +9017,7 @@ class LayoutInlineDeleteRepeaterExampleComponent {
         this.repeaterDemoShownInlineDeletes = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutInlineDeleteRepeaterExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: LayoutInlineDeleteRepeaterExampleComponent, isStandalone: true, selector: "app-layout-inline-delete-repeater-example", ngImport: i0, template: "<sky-repeater>\n  @for (item of repeaterDemoItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-context-menu>\n        <sky-dropdown buttonType=\"context-menu\">\n          <sky-dropdown-menu>\n            <sky-dropdown-item>\n              <button type=\"button\" (click)=\"showInlineDelete(item.title)\">\n                Delete\n              </button>\n            </sky-dropdown-item>\n          </sky-dropdown-menu>\n        </sky-dropdown>\n      </sky-repeater-item-context-menu>\n      <sky-repeater-item-title class=\"sky-example-inline-delete-flex\">\n        <div>\n          {{ item.title }}\n        </div>\n        <div>\n          {{ item.cost }}\n        </div>\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        {{ item.description }}\n      </sky-repeater-item-content>\n      @if (repeaterDemoShownInlineDeletes.indexOf(item.title) >= 0) {\n        <sky-inline-delete\n          (cancelTriggered)=\"cancelDeletion(item.title)\"\n          (deleteTriggered)=\"deleteItem(item.title)\"\n        />\n      }\n    </sky-repeater-item>\n  }\n</sky-repeater>\n\n<button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"onResetClick()\">\n  Reset Repeater\n</button>\n", dependencies: [{ kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$3.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$3.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$3.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyInlineDeleteModule }, { kind: "component", type: i1$5.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: 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: LayoutInlineDeleteRepeaterExampleComponent, isStandalone: true, selector: "app-layout-inline-delete-repeater-example", ngImport: i0, template: "<sky-repeater>\n  @for (item of repeaterDemoItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-context-menu>\n        <sky-dropdown buttonType=\"context-menu\">\n          <sky-dropdown-menu>\n            <sky-dropdown-item>\n              <button type=\"button\" (click)=\"showInlineDelete(item.title)\">\n                Delete\n              </button>\n            </sky-dropdown-item>\n          </sky-dropdown-menu>\n        </sky-dropdown>\n      </sky-repeater-item-context-menu>\n      <sky-repeater-item-title class=\"sky-example-inline-delete-flex\">\n        <div>\n          {{ item.title }}\n        </div>\n        <div>\n          {{ item.cost }}\n        </div>\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        {{ item.description }}\n      </sky-repeater-item-content>\n      @if (repeaterDemoShownInlineDeletes.indexOf(item.title) >= 0) {\n        <sky-inline-delete\n          (cancelTriggered)=\"cancelDeletion(item.title)\"\n          (deleteTriggered)=\"deleteItem(item.title)\"\n        />\n      }\n    </sky-repeater-item>\n  }\n</sky-repeater>\n\n<button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"onResetClick()\">\n  Reset Repeater\n</button>\n", dependencies: [{ kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$3.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$3.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$3.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyInlineDeleteModule }, { kind: "component", type: i1$5.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$5.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i2$5.λ12, selector: "sky-repeater-item-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutInlineDeleteRepeaterExampleComponent, decorators: [{
             type: Component,
@@ -8921,7 +9039,7 @@ class LayoutPageSummaryBasicExampleComponent {
         this.showTitle = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutPageSummaryBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: LayoutPageSummaryBasicExampleComponent, isStandalone: true, selector: "app-layout-page-summary-basic-example", ngImport: i0, template: "<sky-page-summary>\n  @if (showAlert) {\n    <sky-page-summary-alert>\n      <sky-alert alertType=\"info\"> This is an alert. </sky-alert>\n    </sky-page-summary-alert>\n  }\n  @if (showImage) {\n    <sky-page-summary-image>\n      <sky-avatar [name]=\"name\" [canChange]=\"true\" />\n    </sky-page-summary-image>\n  }\n  @if (showTitle) {\n    <sky-page-summary-title>\n      {{ name }}\n    </sky-page-summary-title>\n  }\n  @if (showSubtitle) {\n    <sky-page-summary-subtitle> Board member </sky-page-summary-subtitle>\n  }\n  @if (showStatus) {\n    <sky-page-summary-status>\n      <sky-label labelType=\"success\"> Fundraiser </sky-label>\n      <sky-label> Inactive </sky-label>\n    </sky-page-summary-status>\n  }\n  @if (showContent) {\n    <sky-page-summary-content>\n      This is the arbitrary content section. You can display any kind of content\n      to complement the content on a page. We recommend that you display content\n      to support the key tasks of users of users who visit the page. We also\n      recommend that you keep in mind the context of how users will use the\n      content and limit the amount of content to avoid overloading the summary.\n    </sky-page-summary-content>\n  }\n  @if (showKeyInfo) {\n    <sky-page-summary-key-info>\n      <sky-key-info>\n        <sky-key-info-value> $1,500 </sky-key-info-value>\n        <sky-key-info-label> Largest gift </sky-key-info-label>\n      </sky-key-info>\n      <sky-key-info>\n        <sky-key-info-value> 37 </sky-key-info-value>\n        <sky-key-info-label> Total gifts </sky-key-info-label>\n      </sky-key-info>\n    </sky-page-summary-key-info>\n  }\n</sky-page-summary>\n\n<ul class=\"sky-list-unstyled\">\n  <li>\n    <sky-checkbox labelText=\"Show title\" [(ngModel)]=\"showTitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show subtitle\" [(ngModel)]=\"showSubtitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show image\" [(ngModel)]=\"showImage\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show record status\" [(ngModel)]=\"showStatus\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show key information\" [(ngModel)]=\"showKeyInfo\" />\n  </li>\n  <li>\n    <sky-checkbox\n      labelText=\"Show arbitrary content\"\n      [(ngModel)]=\"showContent\"\n    />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show alert\" [(ngModel)]=\"showAlert\" />\n  </li>\n</ul>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyAvatarModule }, { kind: "component", type: i1$8.λ1, selector: "sky-avatar", inputs: ["canChange", "name", "src", "maxFileSize", "size"], outputs: ["avatarChanged"] }, { kind: "ngmodule", type: 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: 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: SkyLabelModule }, { kind: "component", type: i1.λ9, selector: "sky-label", inputs: ["labelType", "descriptionType", "customDescription"] }, { kind: "ngmodule", type: SkyPageSummaryModule }, { kind: "component", type: i1$5.λ28, selector: "sky-page-summary-alert" }, { kind: "component", type: i1$5.λ27, selector: "sky-page-summary" }, { kind: "component", type: i1$5.λ29, selector: "sky-page-summary-content" }, { kind: "component", type: i1$5.λ30, selector: "sky-page-summary-image" }, { kind: "component", type: i1$5.λ31, selector: "sky-page-summary-key-info" }, { kind: "component", type: i1$5.λ32, selector: "sky-page-summary-status" }, { kind: "component", type: i1$5.λ33, selector: "sky-page-summary-subtitle" }, { kind: "component", type: i1$5.λ34, selector: "sky-page-summary-title" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: LayoutPageSummaryBasicExampleComponent, isStandalone: true, selector: "app-layout-page-summary-basic-example", ngImport: i0, template: "<sky-page-summary>\n  @if (showAlert) {\n    <sky-page-summary-alert>\n      <sky-alert alertType=\"info\"> This is an alert. </sky-alert>\n    </sky-page-summary-alert>\n  }\n  @if (showImage) {\n    <sky-page-summary-image>\n      <sky-avatar [name]=\"name\" [canChange]=\"true\" />\n    </sky-page-summary-image>\n  }\n  @if (showTitle) {\n    <sky-page-summary-title>\n      {{ name }}\n    </sky-page-summary-title>\n  }\n  @if (showSubtitle) {\n    <sky-page-summary-subtitle> Board member </sky-page-summary-subtitle>\n  }\n  @if (showStatus) {\n    <sky-page-summary-status>\n      <sky-label labelType=\"success\"> Fundraiser </sky-label>\n      <sky-label> Inactive </sky-label>\n    </sky-page-summary-status>\n  }\n  @if (showContent) {\n    <sky-page-summary-content>\n      This is the arbitrary content section. You can display any kind of content\n      to complement the content on a page. We recommend that you display content\n      to support the key tasks of users of users who visit the page. We also\n      recommend that you keep in mind the context of how users will use the\n      content and limit the amount of content to avoid overloading the summary.\n    </sky-page-summary-content>\n  }\n  @if (showKeyInfo) {\n    <sky-page-summary-key-info>\n      <sky-key-info>\n        <sky-key-info-value> $1,500 </sky-key-info-value>\n        <sky-key-info-label> Largest gift </sky-key-info-label>\n      </sky-key-info>\n      <sky-key-info>\n        <sky-key-info-value> 37 </sky-key-info-value>\n        <sky-key-info-label> Total gifts </sky-key-info-label>\n      </sky-key-info>\n    </sky-page-summary-key-info>\n  }\n</sky-page-summary>\n\n<ul class=\"sky-list-unstyled\">\n  <li>\n    <sky-checkbox labelText=\"Show title\" [(ngModel)]=\"showTitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show subtitle\" [(ngModel)]=\"showSubtitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show image\" [(ngModel)]=\"showImage\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show record status\" [(ngModel)]=\"showStatus\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show key information\" [(ngModel)]=\"showKeyInfo\" />\n  </li>\n  <li>\n    <sky-checkbox\n      labelText=\"Show arbitrary content\"\n      [(ngModel)]=\"showContent\"\n    />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show alert\" [(ngModel)]=\"showAlert\" />\n  </li>\n</ul>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyAvatarModule }, { kind: "component", type: i1$9.λ1, selector: "sky-avatar", inputs: ["canChange", "name", "src", "maxFileSize", "size"], outputs: ["avatarChanged"] }, { 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: 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: SkyLabelModule }, { kind: "component", type: i1.λ9, selector: "sky-label", inputs: ["labelType", "descriptionType", "customDescription"] }, { kind: "ngmodule", type: SkyPageSummaryModule }, { kind: "component", type: i1$5.λ28, selector: "sky-page-summary-alert" }, { kind: "component", type: i1$5.λ27, selector: "sky-page-summary" }, { kind: "component", type: i1$5.λ29, selector: "sky-page-summary-content" }, { kind: "component", type: i1$5.λ30, selector: "sky-page-summary-image" }, { kind: "component", type: i1$5.λ31, selector: "sky-page-summary-key-info" }, { kind: "component", type: i1$5.λ32, selector: "sky-page-summary-status" }, { kind: "component", type: i1$5.λ33, selector: "sky-page-summary-subtitle" }, { kind: "component", type: i1$5.λ34, selector: "sky-page-summary-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutPageSummaryBasicExampleComponent, decorators: [{
             type: Component,
@@ -9010,7 +9128,7 @@ class LayoutToolbarBasicExampleComponent {
         alert(buttonText + ' clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutToolbarBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: LayoutToolbarBasicExampleComponent, isStandalone: true, selector: "app-layout-toolbar-basic-example", ngImport: i0, template: "<sky-toolbar data-sky-id=\"basic-toolbar\">\n  <sky-toolbar-item data-sky-id=\"toolbar-item-1\">\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Button 1')\"\n    >\n      Button 1\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item data-sky-id=\"toolbar-item-2\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Button 2')\"\n    >\n      Button 2\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-view-actions>\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon\"\n      title=\"Sort descending\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Expand')\"\n    >\n      <sky-icon iconName=\"chevron-double-down\" />\n    </button>\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon\"\n      title=\"Sort ascending\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Collapse')\"\n    >\n      <sky-icon iconName=\"chevron-double-up\" />\n    </button>\n  </sky-toolbar-view-actions>\n</sky-toolbar>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ40, selector: "sky-toolbar-view-actions" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: LayoutToolbarBasicExampleComponent, isStandalone: true, selector: "app-layout-toolbar-basic-example", ngImport: i0, template: "<sky-toolbar data-sky-id=\"basic-toolbar\">\n  <sky-toolbar-item data-sky-id=\"toolbar-item-1\">\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Button 1')\"\n    >\n      Button 1\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item data-sky-id=\"toolbar-item-2\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Button 2')\"\n    >\n      Button 2\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-view-actions>\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon\"\n      title=\"Sort descending\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Expand')\"\n    >\n      <sky-icon iconName=\"chevron-double-down\" />\n    </button>\n    <button\n      class=\"sky-btn sky-btn-default sky-btn-icon\"\n      title=\"Sort ascending\"\n      type=\"button\"\n      (click)=\"onButtonClicked('Collapse')\"\n    >\n      <sky-icon iconName=\"chevron-double-up\" />\n    </button>\n  </sky-toolbar-view-actions>\n</sky-toolbar>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ40, selector: "sky-toolbar-view-actions" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutToolbarBasicExampleComponent, decorators: [{
             type: Component,
@@ -9025,7 +9143,7 @@ class LayoutToolbarSectionedExampleComponent {
         alert(buttonText + ' clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutToolbarSectionedExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: LayoutToolbarSectionedExampleComponent, isStandalone: true, selector: "app-layout-toolbar-sectioned-example", ngImport: i0, template: "<sky-toolbar data-sky-id=\"sectioned-toolbar\">\n  <sky-toolbar-section data-sky-id=\"top-section\">\n    <sky-toolbar-item data-sky-id=\"toolbar-item-1\">\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Button 1')\"\n      >\n        Button 1\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item data-sky-id=\"toolbar-item-2\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Button 2')\"\n      >\n        Button 2\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <button\n        class=\"sky-btn sky-btn-default sky-btn-icon\"\n        title=\"Sort descending\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Expand')\"\n      >\n        <sky-icon iconName=\"chevron-double-down\" />\n      </button>\n      <button\n        class=\"sky-btn sky-btn-default sky-btn-icon\"\n        title=\"Sort ascending\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Collapse')\"\n      >\n        <sky-icon iconName=\"chevron-double-up\" />\n      </button>\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n  <sky-toolbar-section data-sky-id=\"bottom-section\">\n    <sky-toolbar-item data-sky-id=\"sort-button\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Sort')\"\n      >\n        <sky-icon iconName=\"arrow-sort\" /> Sort\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item data-sky-id=\"filter-button\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Filter')\"\n      >\n        <sky-icon iconName=\"filter\" /> Filter\n      </button>\n    </sky-toolbar-item>\n  </sky-toolbar-section>\n</sky-toolbar>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i1$5.λ40, selector: "sky-toolbar-view-actions" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: LayoutToolbarSectionedExampleComponent, isStandalone: true, selector: "app-layout-toolbar-sectioned-example", ngImport: i0, template: "<sky-toolbar data-sky-id=\"sectioned-toolbar\">\n  <sky-toolbar-section data-sky-id=\"top-section\">\n    <sky-toolbar-item data-sky-id=\"toolbar-item-1\">\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Button 1')\"\n      >\n        Button 1\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item data-sky-id=\"toolbar-item-2\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Button 2')\"\n      >\n        Button 2\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <button\n        class=\"sky-btn sky-btn-default sky-btn-icon\"\n        title=\"Sort descending\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Expand')\"\n      >\n        <sky-icon iconName=\"chevron-double-down\" />\n      </button>\n      <button\n        class=\"sky-btn sky-btn-default sky-btn-icon\"\n        title=\"Sort ascending\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Collapse')\"\n      >\n        <sky-icon iconName=\"chevron-double-up\" />\n      </button>\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n  <sky-toolbar-section data-sky-id=\"bottom-section\">\n    <sky-toolbar-item data-sky-id=\"sort-button\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Sort')\"\n      >\n        <sky-icon iconName=\"arrow-sort\" /> Sort\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item data-sky-id=\"filter-button\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onButtonClicked('Filter')\"\n      >\n        <sky-icon iconName=\"filter\" /> Filter\n      </button>\n    </sky-toolbar-item>\n  </sky-toolbar-section>\n</sky-toolbar>\n", dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i1$5.λ40, selector: "sky-toolbar-view-actions" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LayoutToolbarSectionedExampleComponent, decorators: [{
             type: Component,
@@ -9131,7 +9249,7 @@ class ListsFilterInlineExampleComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsFilterInlineExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsFilterInlineExampleComponent, isStandalone: true, selector: "app-lists-filter-inline-example", ngImport: i0, template: "<sky-toolbar>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-filter-button\n        data-sky-id=\"my-filter-button\"\n        [active]=\"filtersActive\"\n        [ariaControls]=\"inlineFilters.id\"\n        [ariaExpanded]=\"showInlineFilters\"\n        [showButtonText]=\"true\"\n        (filterButtonClick)=\"filterButtonClicked()\"\n      />\n    </sky-toolbar-item>\n  </sky-toolbar-section>\n</sky-toolbar>\n\n<div #inlineFilters skyId [hidden]=\"!showInlineFilters\">\n  <sky-filter-inline data-sky-id=\"filter-inline\">\n    <sky-filter-inline-item data-sky-id=\"fruit-filter\">\n      <sky-input-box labelText=\"Fruit type\">\n        <select [ngModel]=\"fruitType\" (ngModelChange)=\"fruitTypeChange($event)\">\n          <option value=\"any\">Any fruit</option>\n          <option value=\"citrus\">Citrus</option>\n          <option value=\"berry\">Berry</option>\n        </select>\n      </sky-input-box>\n    </sky-filter-inline-item>\n    <sky-filter-inline-item data-sky-id=\"hide-orange-filter\">\n      <sky-checkbox\n        labelText=\"Hide orange fruits\"\n        [ngModel]=\"hideOrange\"\n        (ngModelChange)=\"hideOrangeChange($event)\"\n      />\n    </sky-filter-inline-item>\n  </sky-filter-inline>\n</div>\n\n<sky-repeater expandMode=\"none\">\n  @for (item of filteredItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.name }}\n      </sky-repeater-item-title>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[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: SkyFilterModule }, { kind: "component", type: i2$4.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: i2$4.λ2, selector: "sky-filter-inline" }, { kind: "component", type: i2$4.λ3, selector: "sky-filter-inline-item" }, { 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.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ38, selector: "sky-toolbar-section" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsFilterInlineExampleComponent, isStandalone: true, selector: "app-lists-filter-inline-example", ngImport: i0, template: "<sky-toolbar>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-filter-button\n        data-sky-id=\"my-filter-button\"\n        [active]=\"filtersActive\"\n        [ariaControls]=\"inlineFilters.id\"\n        [ariaExpanded]=\"showInlineFilters\"\n        [showButtonText]=\"true\"\n        (filterButtonClick)=\"filterButtonClicked()\"\n      />\n    </sky-toolbar-item>\n  </sky-toolbar-section>\n</sky-toolbar>\n\n<div #inlineFilters skyId [hidden]=\"!showInlineFilters\">\n  <sky-filter-inline data-sky-id=\"filter-inline\">\n    <sky-filter-inline-item data-sky-id=\"fruit-filter\">\n      <sky-input-box labelText=\"Fruit type\">\n        <select [ngModel]=\"fruitType\" (ngModelChange)=\"fruitTypeChange($event)\">\n          <option value=\"any\">Any fruit</option>\n          <option value=\"citrus\">Citrus</option>\n          <option value=\"berry\">Berry</option>\n        </select>\n      </sky-input-box>\n    </sky-filter-inline-item>\n    <sky-filter-inline-item data-sky-id=\"hide-orange-filter\">\n      <sky-checkbox\n        labelText=\"Hide orange fruits\"\n        [ngModel]=\"hideOrange\"\n        (ngModelChange)=\"hideOrangeChange($event)\"\n      />\n    </sky-filter-inline-item>\n  </sky-filter-inline>\n</div>\n\n<sky-repeater expandMode=\"none\">\n  @for (item of filteredItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.name }}\n      </sky-repeater-item-title>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[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: SkyFilterModule }, { kind: "component", type: i2$5.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: i2$5.λ2, selector: "sky-filter-inline" }, { kind: "component", type: i2$5.λ3, selector: "sky-filter-inline-item" }, { 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$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ38, selector: "sky-toolbar-section" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsFilterInlineExampleComponent, decorators: [{
             type: Component,
@@ -9308,7 +9426,7 @@ class ListsFilterModalExampleComponent {
         return (filter.name === 'hideOrange' && !!filter.value && item.color === 'orange');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsFilterModalExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsFilterModalExampleComponent, isStandalone: true, selector: "app-lists-filter-modal-example", ngImport: i0, template: "<sky-toolbar>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-filter-button\n        data-sky-id=\"my-filter-button\"\n        [showButtonText]=\"true\"\n        (filterButtonClick)=\"onModalFilterButtonClick()\"\n      />\n    </sky-toolbar-item>\n  </sky-toolbar-section>\n  @if (appliedFilters && appliedFilters.length > 0) {\n    <sky-toolbar-section>\n      <sky-filter-summary data-sky-id=\"filter-summary\">\n        @for (item of appliedFilters; track item; let i = $index) {\n          <sky-filter-summary-item (dismiss)=\"onDismiss(i)\">\n            {{ item.label }}\n          </sky-filter-summary-item>\n        }\n      </sky-filter-summary>\n    </sky-toolbar-section>\n  }\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n  @for (item of filteredItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.name }}\n      </sky-repeater-item-title>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyFilterModule }, { kind: "component", type: i2$4.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: i2$4.λ5, selector: "sky-filter-summary" }, { kind: "component", type: i2$4.λ4, selector: "sky-filter-summary-item", inputs: ["dismissible"], outputs: ["dismiss", "itemClick"] }, { 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.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ38, selector: "sky-toolbar-section" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsFilterModalExampleComponent, isStandalone: true, selector: "app-lists-filter-modal-example", ngImport: i0, template: "<sky-toolbar>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-filter-button\n        data-sky-id=\"my-filter-button\"\n        [showButtonText]=\"true\"\n        (filterButtonClick)=\"onModalFilterButtonClick()\"\n      />\n    </sky-toolbar-item>\n  </sky-toolbar-section>\n  @if (appliedFilters && appliedFilters.length > 0) {\n    <sky-toolbar-section>\n      <sky-filter-summary data-sky-id=\"filter-summary\">\n        @for (item of appliedFilters; track item; let i = $index) {\n          <sky-filter-summary-item (dismiss)=\"onDismiss(i)\">\n            {{ item.label }}\n          </sky-filter-summary-item>\n        }\n      </sky-filter-summary>\n    </sky-toolbar-section>\n  }\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n  @for (item of filteredItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.name }}\n      </sky-repeater-item-title>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyFilterModule }, { kind: "component", type: i2$5.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: i2$5.λ5, selector: "sky-filter-summary" }, { kind: "component", type: i2$5.λ4, selector: "sky-filter-summary-item", inputs: ["dismissible"], outputs: ["dismiss", "itemClick"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ38, selector: "sky-toolbar-section" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsFilterModalExampleComponent, decorators: [{
             type: Component,
@@ -9355,7 +9473,7 @@ class ListsInfiniteScrollRepeaterExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsInfiniteScrollRepeaterExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsInfiniteScrollRepeaterExampleComponent, isStandalone: true, selector: "app-lists-infinite-scroll-repeater-example", ngImport: i0, template: "<div class=\"wrapper\">\n  <sky-repeater>\n    @for (item of items; track item) {\n      <sky-repeater-item>\n        <sky-repeater-item-title>\n          {{ item.name }}\n        </sky-repeater-item-title>\n      </sky-repeater-item>\n    }\n  </sky-repeater>\n  <sky-infinite-scroll [enabled]=\"itemsHaveMore\" (scrollEnd)=\"onScrollEnd()\" />\n</div>\n", styles: [".wrapper{overflow-y:auto;max-height:500px;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i2$4.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { 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.λ12, selector: "sky-repeater-item-title" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsInfiniteScrollRepeaterExampleComponent, isStandalone: true, selector: "app-lists-infinite-scroll-repeater-example", ngImport: i0, template: "<div class=\"wrapper\">\n  <sky-repeater>\n    @for (item of items; track item) {\n      <sky-repeater-item>\n        <sky-repeater-item-title>\n          {{ item.name }}\n        </sky-repeater-item-title>\n      </sky-repeater-item>\n    }\n  </sky-repeater>\n  <sky-infinite-scroll [enabled]=\"itemsHaveMore\" (scrollEnd)=\"onScrollEnd()\" />\n</div>\n", styles: [".wrapper{overflow-y:auto;max-height:500px;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i2$5.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ12, selector: "sky-repeater-item-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsInfiniteScrollRepeaterExampleComponent, decorators: [{
             type: Component,
@@ -9393,7 +9511,7 @@ class ListsListSummaryBasicExampleComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsListSummaryBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsListSummaryBasicExampleComponent, isStandalone: true, selector: "app-lists-list-summary-basic-example", ngImport: i0, template: "<sky-list-summary>\n  @for (item of summaryItems; track item.label) {\n    <sky-list-summary-item\n      [labelText]=\"item.label\"\n      [value]=\"item.value\"\n      [valueFormat]=\"item.valueFormat\"\n      [helpPopoverContent]=\"item.helpPopoverContent\"\n      [helpPopoverTitle]=\"item.helpPopoverTitle\"\n    />\n  }\n</sky-list-summary>\n", dependencies: [{ kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i2$4.λ16, selector: "sky-list-summary" }, { kind: "component", type: i2$4.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsListSummaryBasicExampleComponent, isStandalone: true, selector: "app-lists-list-summary-basic-example", ngImport: i0, template: "<sky-list-summary>\n  @for (item of summaryItems; track item.label) {\n    <sky-list-summary-item\n      [labelText]=\"item.label\"\n      [value]=\"item.value\"\n      [valueFormat]=\"item.valueFormat\"\n      [helpPopoverContent]=\"item.helpPopoverContent\"\n      [helpPopoverTitle]=\"item.helpPopoverTitle\"\n    />\n  }\n</sky-list-summary>\n", dependencies: [{ kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i2$5.λ16, selector: "sky-list-summary" }, { kind: "component", type: i2$5.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsListSummaryBasicExampleComponent, decorators: [{
             type: Component,
@@ -9408,7 +9526,7 @@ class ListsPagingBasicExampleComponent {
         this.currentPage = 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsPagingBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ListsPagingBasicExampleComponent, isStandalone: true, selector: "app-lists-paging-basic-example", ngImport: i0, template: "<sky-paging\n  [itemCount]=\"8\"\n  [maxPages]=\"3\"\n  [pageSize]=\"2\"\n  [(currentPage)]=\"currentPage\"\n/>\n\n<p>The current page is {{ currentPage }}.</p>\n", dependencies: [{ kind: "ngmodule", type: SkyPagingModule }, { kind: "component", type: i2$4.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange", "contentChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ListsPagingBasicExampleComponent, isStandalone: true, selector: "app-lists-paging-basic-example", ngImport: i0, template: "<sky-paging\n  [itemCount]=\"8\"\n  [maxPages]=\"3\"\n  [pageSize]=\"2\"\n  [(currentPage)]=\"currentPage\"\n/>\n\n<p>The current page is {{ currentPage }}.</p>\n", dependencies: [{ kind: "ngmodule", type: SkyPagingModule }, { kind: "component", type: i2$5.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange", "contentChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsPagingBasicExampleComponent, decorators: [{
             type: Component,
@@ -9505,7 +9623,7 @@ class DemoDataService {
             totalCount: people$7.length,
         }).pipe(
         // Simulate network latency.
-        delay(1000));
+        delay$1(1000));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DemoDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DemoDataService, providedIn: 'root' }); }
@@ -9532,7 +9650,7 @@ class ListsPagingWithContentExampleComponent {
     }
     #demoDataSvc;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsPagingWithContentExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsPagingWithContentExampleComponent, isStandalone: true, selector: "app-lists-paging-with-content-example", ngImport: i0, template: "<sky-paging\n  data-sky-id=\"my-paging-content\"\n  [itemCount]=\"(pagedData | async)?.totalCount ?? 0\"\n  [maxPages]=\"3\"\n  [pageSize]=\"pageSize\"\n  [(currentPage)]=\"currentPage\"\n  (contentChange)=\"contentChange.next($event)\"\n>\n  <sky-paging-content>\n    <sky-repeater>\n      @for (person of (pagedData | async)?.people; track person) {\n        <sky-repeater-item>\n          <sky-repeater-item-title>\n            {{ person.name }}\n          </sky-repeater-item-title>\n          <sky-repeater-item-content>\n            <sky-description-list>\n              <sky-description-list-content>\n                <sky-description-list-term>\n                  Formal name\n                </sky-description-list-term>\n                <sky-description-list-description>\n                  {{ person.formal }}\n                </sky-description-list-description>\n              </sky-description-list-content>\n            </sky-description-list>\n          </sky-repeater-item-content>\n        </sky-repeater-item>\n      }\n    </sky-repeater>\n  </sky-paging-content>\n</sky-paging>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: SkyPagingModule }, { kind: "component", type: i2$4.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange", "contentChange"] }, { kind: "component", type: i2$4.λ15, selector: "sky-paging-content" }, { 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.λ12, selector: "sky-repeater-item-title" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsPagingWithContentExampleComponent, isStandalone: true, selector: "app-lists-paging-with-content-example", ngImport: i0, template: "<sky-paging\n  data-sky-id=\"my-paging-content\"\n  [itemCount]=\"(pagedData | async)?.totalCount ?? 0\"\n  [maxPages]=\"3\"\n  [pageSize]=\"pageSize\"\n  [(currentPage)]=\"currentPage\"\n  (contentChange)=\"contentChange.next($event)\"\n>\n  <sky-paging-content>\n    <sky-repeater>\n      @for (person of (pagedData | async)?.people; track person) {\n        <sky-repeater-item>\n          <sky-repeater-item-title>\n            {{ person.name }}\n          </sky-repeater-item-title>\n          <sky-repeater-item-content>\n            <sky-description-list>\n              <sky-description-list-content>\n                <sky-description-list-term>\n                  Formal name\n                </sky-description-list-term>\n                <sky-description-list-description>\n                  {{ person.formal }}\n                </sky-description-list-description>\n              </sky-description-list-content>\n            </sky-description-list>\n          </sky-repeater-item-content>\n        </sky-repeater-item>\n      }\n    </sky-repeater>\n  </sky-paging-content>\n</sky-paging>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: SkyPagingModule }, { kind: "component", type: i2$5.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange", "contentChange"] }, { kind: "component", type: i2$5.λ15, selector: "sky-paging-content" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$5.λ12, selector: "sky-repeater-item-title" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsPagingWithContentExampleComponent, decorators: [{
             type: Component,
@@ -9596,7 +9714,7 @@ 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        [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" }] }); }
+    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$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$5.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i2$5.λ12, selector: "sky-repeater-item-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsRepeaterAddRemoveExampleComponent, decorators: [{
             type: Component,
@@ -9639,7 +9757,7 @@ class ListsRepeaterBasicExampleComponent {
         alert(buttonText + ' was clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsRepeaterBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsRepeaterBasicExampleComponent, isStandalone: true, selector: "app-lists-repeater-basic-example", ngImport: i0, template: "<sky-repeater data-sky-id=\"repeater-example\">\n  @for (item of items; track item) {\n    <sky-repeater-item [itemName]=\"item.accessibilityLabel\">\n      @if (item.title) {\n        <sky-repeater-item-title class=\"example-repeater-flex\">\n          <div class=\"example-repeater-item-title\">\n            {{ item.title }}\n          </div>\n          <div>\n            {{ item.status }}\n          </div>\n        </sky-repeater-item-title>\n      }\n      <sky-repeater-item-context-menu>\n        <sky-dropdown buttonType=\"context-menu\">\n          <sky-dropdown-menu>\n            <sky-dropdown-item>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"\n                  'Action 1 for ' + (item.title ?? item.accessibilityLabel)\n                \"\n                (click)=\"onActionClicked('Action 1')\"\n              >\n                Action 1\n              </button>\n            </sky-dropdown-item>\n            <sky-dropdown-item>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"\n                  'Action 2 for ' + (item.title ?? item.accessibilityLabel)\n                \"\n                (click)=\"onActionClicked('Action 2')\"\n              >\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", 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: ListsRepeaterBasicExampleComponent, isStandalone: true, selector: "app-lists-repeater-basic-example", ngImport: i0, template: "<sky-repeater data-sky-id=\"repeater-example\">\n  @for (item of items; track item) {\n    <sky-repeater-item [itemName]=\"item.accessibilityLabel\">\n      @if (item.title) {\n        <sky-repeater-item-title class=\"example-repeater-flex\">\n          <div class=\"example-repeater-item-title\">\n            {{ item.title }}\n          </div>\n          <div>\n            {{ item.status }}\n          </div>\n        </sky-repeater-item-title>\n      }\n      <sky-repeater-item-context-menu>\n        <sky-dropdown buttonType=\"context-menu\">\n          <sky-dropdown-menu>\n            <sky-dropdown-item>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"\n                  'Action 1 for ' + (item.title ?? item.accessibilityLabel)\n                \"\n                (click)=\"onActionClicked('Action 1')\"\n              >\n                Action 1\n              </button>\n            </sky-dropdown-item>\n            <sky-dropdown-item>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"\n                  'Action 2 for ' + (item.title ?? item.accessibilityLabel)\n                \"\n                (click)=\"onActionClicked('Action 2')\"\n              >\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", 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$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$5.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i2$5.λ12, selector: "sky-repeater-item-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsRepeaterBasicExampleComponent, decorators: [{
             type: Component,
@@ -9705,7 +9823,7 @@ class ListsRepeaterInlineFormExampleComponent {
         this.activeInlineFormId = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsRepeaterInlineFormExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsRepeaterInlineFormExampleComponent, isStandalone: true, selector: "app-lists-repeater-inline-form-example", ngImport: i0, template: "<sky-repeater>\n  @for (item of items; track item) {\n    <sky-repeater-item\n      [inlineFormConfig]=\"inlineFormConfig\"\n      [inlineFormTemplate]=\"inlineFormTemplate\"\n      [showInlineForm]=\"activeInlineFormId === item.id\"\n      (inlineFormClose)=\"onInlineFormClose($event)\"\n    >\n      <sky-repeater-item-title>\n        <div class=\"sky-font-emphasized\">\n          {{ item.title }}\n        </div>\n      </sky-repeater-item-title>\n      <sky-repeater-item-context-menu>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"showInlineForm(item)\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </sky-repeater-item-context-menu>\n\n      <sky-repeater-item-content>\n        {{ item.note }}\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n\n<ng-template #inlineFormTemplate>\n  <form novalidate [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"Title\" stacked=\"true\">\n      <input formControlName=\"title\" type=\"text\" />\n    </sky-input-box>\n    <sky-input-box labelText=\"Note\">\n      <input formControlName=\"note\" type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$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: "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: ListsRepeaterInlineFormExampleComponent, isStandalone: true, selector: "app-lists-repeater-inline-form-example", ngImport: i0, template: "<sky-repeater>\n  @for (item of items; track item) {\n    <sky-repeater-item\n      [inlineFormConfig]=\"inlineFormConfig\"\n      [inlineFormTemplate]=\"inlineFormTemplate\"\n      [showInlineForm]=\"activeInlineFormId === item.id\"\n      (inlineFormClose)=\"onInlineFormClose($event)\"\n    >\n      <sky-repeater-item-title>\n        <div class=\"sky-font-emphasized\">\n          {{ item.title }}\n        </div>\n      </sky-repeater-item-title>\n      <sky-repeater-item-context-menu>\n        <button\n          aria-label=\"Edit\"\n          class=\"sky-btn sky-btn-icon-borderless\"\n          type=\"button\"\n          (click)=\"showInlineForm(item)\"\n        >\n          <sky-icon iconName=\"edit\" />\n        </button>\n      </sky-repeater-item-context-menu>\n\n      <sky-repeater-item-content>\n        {{ item.note }}\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n\n<ng-template #inlineFormTemplate>\n  <form novalidate [formGroup]=\"formGroup\">\n    <sky-input-box labelText=\"Title\" stacked=\"true\">\n      <input formControlName=\"title\" type=\"text\" />\n    </sky-input-box>\n    <sky-input-box labelText=\"Note\">\n      <input formControlName=\"note\" type=\"text\" />\n    </sky-input-box>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$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$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$5.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i2$5.λ12, selector: "sky-repeater-item-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsRepeaterInlineFormExampleComponent, decorators: [{
             type: Component,
@@ -9814,7 +9932,7 @@ class ListsSortBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsSortBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsSortBasicExampleComponent, isStandalone: true, selector: "app-lists-sort-basic-example", ngImport: i0, template: "<sky-toolbar>\n  <sky-toolbar-item>\n    <sky-sort [showButtonText]=\"true\">\n      @for (item of sortOptions; track item) {\n        <sky-sort-item\n          [active]=\"initialState === item.id\"\n          (itemSelect)=\"sortItems(item)\"\n        >\n          {{ item.label }}\n        </sky-sort-item>\n      }\n    </sky-sort>\n  </sky-toolbar-item>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n  @for (item of sortedItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.title }}\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        <div class=\"item-wrapper\">\n          <div>Assigned to {{ item.assignee }}</div>\n          <div>Created {{ item.date | date }}</div>\n        </div>\n        <div>\n          {{ item.note }}\n        </div>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", styles: [".item-wrapper{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkySortModule }, { kind: "component", type: i2$4.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i2$4.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "pipe", type: i4.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ListsSortBasicExampleComponent, isStandalone: true, selector: "app-lists-sort-basic-example", ngImport: i0, template: "<sky-toolbar>\n  <sky-toolbar-item>\n    <sky-sort [showButtonText]=\"true\">\n      @for (item of sortOptions; track item) {\n        <sky-sort-item\n          [active]=\"initialState === item.id\"\n          (itemSelect)=\"sortItems(item)\"\n        >\n          {{ item.label }}\n        </sky-sort-item>\n      }\n    </sky-sort>\n  </sky-toolbar-item>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n  @for (item of sortedItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.title }}\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        <div class=\"item-wrapper\">\n          <div>Assigned to {{ item.assignee }}</div>\n          <div>Created {{ item.date | date }}</div>\n        </div>\n        <div>\n          {{ item.note }}\n        </div>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", styles: [".item-wrapper{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$5.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkySortModule }, { kind: "component", type: i2$5.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i2$5.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "pipe", type: i4.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListsSortBasicExampleComponent, decorators: [{
             type: Component,
@@ -9890,7 +10008,7 @@ class LookupAutocompleteAnyValueExampleService {
             hasMore: false,
             colors: matchingColors,
             totalCount: matchingColors.length,
-        }).pipe(delay(800));
+        }).pipe(delay$1(800));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LookupAutocompleteAnyValueExampleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LookupAutocompleteAnyValueExampleService, providedIn: 'root' }); }
@@ -10010,7 +10128,7 @@ class LookupAutocompleteCustomSearchExampleComponent {
         return searchFunction;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LookupAutocompleteCustomSearchExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: LookupAutocompleteCustomSearchExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-custom-search-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n  <p>\n    The following field has a preselected value and utilizes a custom search\n    function, as well as a custom template for the search results.\n  </p>\n  <div class=\"sky-margin-stacked-lg\">\n    <sky-input-box labelText=\"Largest ocean\" stacked>\n      <sky-autocomplete\n        descriptorProperty=\"title\"\n        [data]=\"oceans\"\n        [search]=\"getOceanSearchFunction()\"\n        [searchResultTemplate]=\"oceanSearchResultTemplate\"\n      >\n        <input formControlName=\"largestOcean\" type=\"text\" skyAutocomplete />\n      </sky-autocomplete>\n    </sky-input-box>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ formGroup.value | json }}</pre>\n</form>\n\n<ng-template #oceanSearchResultTemplate let-item=\"item\">\n  <sky-icon iconName=\"arrow-right\" />\n  {{ item.title }} &bull; ID {{ item.id }}\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutocompleteModule }, { kind: "component", type: i2$2.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: i2$2.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$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: "pipe", type: i4.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: LookupAutocompleteCustomSearchExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-custom-search-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n  <p>\n    The following field has a preselected value and utilizes a custom search\n    function, as well as a custom template for the search results.\n  </p>\n  <div class=\"sky-margin-stacked-lg\">\n    <sky-input-box labelText=\"Largest ocean\" stacked>\n      <sky-autocomplete\n        descriptorProperty=\"title\"\n        [data]=\"oceans\"\n        [search]=\"getOceanSearchFunction()\"\n        [searchResultTemplate]=\"oceanSearchResultTemplate\"\n      >\n        <input formControlName=\"largestOcean\" type=\"text\" skyAutocomplete />\n      </sky-autocomplete>\n    </sky-input-box>\n  </div>\n  <p class=\"sky-font-emphasized\">Form model:</p>\n  <pre>{{ formGroup.value | json }}</pre>\n</form>\n\n<ng-template #oceanSearchResultTemplate let-item=\"item\">\n  <sky-icon iconName=\"arrow-right\" />\n  {{ item.title }} &bull; ID {{ item.id }}\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutocompleteModule }, { kind: "component", type: i2$2.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: i2$2.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$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: "pipe", type: i4.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LookupAutocompleteCustomSearchExampleComponent, decorators: [{
             type: Component,
@@ -10166,14 +10284,14 @@ let DemoService$4 = class DemoService {
             hasMore: false,
             people: matchingPeople,
             totalCount: matchingPeople.length,
-        }).pipe(delay$1(800));
+        }).pipe(delay(800));
     }
     addPerson(person) {
         // Simulate adding a person with a network call.
         if (!people$6.some((item) => item.name === person.name)) {
             people$6.unshift(person);
         }
-        return of(people$6.slice()).pipe(delay$1(800));
+        return of(people$6.slice()).pipe(delay(800));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DemoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DemoService, providedIn: 'root' }); }
@@ -10356,14 +10474,14 @@ let DemoService$3 = class DemoService {
             hasMore: false,
             people: matchingPeople,
             totalCount: matchingPeople.length,
-        }).pipe(delay$1(800));
+        }).pipe(delay(800));
     }
     addPerson(person) {
         // Simulate adding a person with a network call.
         if (!people$5.some((item) => item.name === person.name)) {
             people$5.unshift(person);
         }
-        return of(1).pipe(delay$1(800));
+        return of(1).pipe(delay(800));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DemoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DemoService, providedIn: 'root' }); }
@@ -10406,7 +10524,7 @@ class PickerModalComponent {
         this.#modalInstance.save(selectedPeople);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PickerModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PickerModalComponent, isStandalone: true, selector: "app-picker-modal", ngImport: i0, template: "<sky-modal class=\"lookup-custom-picker-modal\" headingText=\"Names\">\n  <sky-modal-content>\n    @if (peopleForm) {\n      <form [formGroup]=\"peopleForm\">\n        <sky-selection-box-grid>\n          @for (\n            personControl of peopleForm.controls.people.controls;\n            track personControl;\n            let i = $index\n          ) {\n            <sky-selection-box [control]=\"checkbox\">\n              <sky-icon iconName=\"person\" />\n              <sky-selection-box-header>\n                {{ people[i].name }}\n              </sky-selection-box-header>\n              <sky-selection-box-description>\n                {{ people[i].formal }}\n              </sky-selection-box-description>\n              <sky-checkbox #checkbox [formControl]=\"personControl\" />\n            </sky-selection-box>\n          }\n        </sky-selection-box-grid>\n      </form>\n    } @else {\n      <div class=\"wait-container\">\n        <sky-wait [isWaiting]=\"true\" />\n      </div>\n    }\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary lookup-custom-picker-save-button\"\n      type=\"button\"\n      (click)=\"save()\"\n    >\n      Save\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".wait-container{height:100px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$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: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySelectionBoxModule }, { kind: "component", type: i2$3.λ15, selector: "sky-selection-box-grid", inputs: ["alignItems"] }, { kind: "component", type: i2$3.λ17, selector: "sky-selection-box", inputs: ["control"] }, { kind: "component", type: i2$3.λ14, selector: "sky-selection-box-description" }, { kind: "component", type: i2$3.λ16, selector: "sky-selection-box-header" }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PickerModalComponent, isStandalone: true, selector: "app-picker-modal", ngImport: i0, template: "<sky-modal class=\"lookup-custom-picker-modal\" headingText=\"Names\">\n  <sky-modal-content>\n    @if (peopleForm) {\n      <form [formGroup]=\"peopleForm\">\n        <sky-selection-box-grid>\n          @for (\n            personControl of peopleForm.controls.people.controls;\n            track personControl;\n            let i = $index\n          ) {\n            <sky-selection-box [control]=\"checkbox\">\n              <sky-icon iconName=\"person\" />\n              <sky-selection-box-header>\n                {{ people[i].name }}\n              </sky-selection-box-header>\n              <sky-selection-box-description>\n                {{ people[i].formal }}\n              </sky-selection-box-description>\n              <sky-checkbox #checkbox [formControl]=\"personControl\" />\n            </sky-selection-box>\n          }\n        </sky-selection-box-grid>\n      </form>\n    } @else {\n      <div class=\"wait-container\">\n        <sky-wait [isWaiting]=\"true\" />\n      </div>\n    }\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary lookup-custom-picker-save-button\"\n      type=\"button\"\n      (click)=\"save()\"\n    >\n      Save\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".wait-container{height:100px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$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: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySelectionBoxModule }, { kind: "component", type: i2$3.λ15, selector: "sky-selection-box-grid", inputs: ["alignItems"] }, { kind: "component", type: i2$3.λ17, selector: "sky-selection-box", inputs: ["control"] }, { kind: "component", type: i2$3.λ14, selector: "sky-selection-box-description" }, { kind: "component", type: i2$3.λ16, selector: "sky-selection-box-header" }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PickerModalComponent, decorators: [{
             type: Component,
@@ -10538,14 +10656,14 @@ let DemoService$2 = class DemoService {
             hasMore: false,
             people: matchingPeople,
             totalCount: matchingPeople.length,
-        }).pipe(delay$1(800));
+        }).pipe(delay(800));
     }
     addPerson(person) {
         // Simulate adding a person with a network call.
         if (!people$4.some((item) => item.name === person.name)) {
             people$4.unshift(person);
         }
-        return of(1).pipe(delay$1(800));
+        return of(1).pipe(delay(800));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DemoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DemoService, providedIn: 'root' }); }
@@ -10724,14 +10842,14 @@ let DemoService$1 = class DemoService {
             hasMore: false,
             people: matchingPeople,
             totalCount: matchingPeople.length,
-        }).pipe(delay$1(800));
+        }).pipe(delay(800));
     }
     addPerson(person) {
         // Simulate adding a person with a network call.
         if (!people$3.some((item) => item.name === person.name)) {
             people$3.unshift(person);
         }
-        return of(1).pipe(delay$1(800));
+        return of(1).pipe(delay(800));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DemoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DemoService, providedIn: 'root' }); }
@@ -10857,14 +10975,14 @@ class DemoService {
             hasMore: false,
             people: matchingPeople,
             totalCount: matchingPeople.length,
-        }).pipe(delay$1(800));
+        }).pipe(delay(800));
     }
     addPerson(person) {
         // Simulate adding a person with a network call.
         if (!people$2.some((item) => item.name === person.name)) {
             people$2.unshift(person);
         }
-        return of(1).pipe(delay$1(800));
+        return of(1).pipe(delay(800));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DemoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: DemoService, providedIn: 'root' }); }
@@ -11002,7 +11120,7 @@ class LookupSearchBasicExampleComponent {
         this.displayedItems = filteredItems;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LookupSearchBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: LookupSearchBasicExampleComponent, isStandalone: true, selector: "app-lookup-search-basic-example", ngImport: i0, template: "<sky-toolbar>\n  <sky-toolbar-item>\n    <button\n      class=\"sky-btn sky-btn-default sky-example-search-bar-item\"\n      type=\"button\"\n      (click)=\"searchApplied('Robert')\"\n    >\n      Predefined search text\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item>\n    <sky-search\n      data-sky-id=\"example-search\"\n      [ariaLabel]=\"searchAriaLabel\"\n      [searchText]=\"searchText\"\n      [debounceTime]=\"250\"\n      [placeholderText]=\"placeholderText\"\n      (searchApply)=\"searchApplied($event)\"\n      (searchChange)=\"searchApplied($event)\"\n    />\n  </sky-toolbar-item>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n  @for (item of displayedItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.title }}\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        <div>\n          {{ item.note }}\n        </div>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: 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.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: i2$2.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: LookupSearchBasicExampleComponent, isStandalone: true, selector: "app-lookup-search-basic-example", ngImport: i0, template: "<sky-toolbar>\n  <sky-toolbar-item>\n    <button\n      class=\"sky-btn sky-btn-default sky-example-search-bar-item\"\n      type=\"button\"\n      (click)=\"searchApplied('Robert')\"\n    >\n      Predefined search text\n    </button>\n  </sky-toolbar-item>\n  <sky-toolbar-item>\n    <sky-search\n      data-sky-id=\"example-search\"\n      [ariaLabel]=\"searchAriaLabel\"\n      [searchText]=\"searchText\"\n      [debounceTime]=\"250\"\n      [placeholderText]=\"placeholderText\"\n      (searchApply)=\"searchApplied($event)\"\n      (searchChange)=\"searchApplied($event)\"\n    />\n  </sky-toolbar-item>\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n  @for (item of displayedItems; track item) {\n    <sky-repeater-item>\n      <sky-repeater-item-title>\n        {{ item.title }}\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        <div>\n          {{ item.note }}\n        </div>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$5.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: i2$2.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LookupSearchBasicExampleComponent, decorators: [{
             type: Component,
@@ -11073,7 +11191,7 @@ let ExampleService$1 = class ExampleService {
             hasMore: false,
             people: matchingPeople,
             totalCount: matchingPeople.length,
-        }).pipe(delay$1(800));
+        }).pipe(delay(800));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService, providedIn: 'root' }); }
@@ -11166,7 +11284,7 @@ class ExampleService {
             hasMore: false,
             people: matchingPeople,
             totalCount: matchingPeople.length,
-        }).pipe(delay$1(800));
+        }).pipe(delay(800));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ExampleService, providedIn: 'root' }); }
@@ -11522,12 +11640,12 @@ let ModalDemoDataService$2 = class ModalDemoDataService {
     };
     load() {
         // Simulate a network request to get data.
-        return of(this.#data).pipe(delay$1(1000));
+        return of(this.#data).pipe(delay(1000));
     }
     save(data) {
         this.#data = data;
         // Simulate a network request to save data.
-        return of(this.#data).pipe(delay$1(1000));
+        return of(this.#data).pipe(delay(1000));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModalDemoDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModalDemoDataService, providedIn: 'root' }); }
@@ -11633,12 +11751,12 @@ let ModalDemoDataService$1 = class ModalDemoDataService {
     };
     load() {
         // Simulate a network request to get data.
-        return of(this.#data).pipe(delay$1(1000));
+        return of(this.#data).pipe(delay(1000));
     }
     save(data) {
         this.#data = data;
         // Simulate a network request to save data.
-        return of(this.#data).pipe(delay$1(1000));
+        return of(this.#data).pipe(delay(1000));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModalDemoDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModalDemoDataService, providedIn: 'root' }); }
@@ -11744,14 +11862,14 @@ class ModalDemoDataService {
     };
     load() {
         // Simulate a network request to get data.
-        return of(this.#data).pipe(delay$1(1000));
+        return of(this.#data).pipe(delay(1000));
     }
     save(data, error = false) {
         if (!error) {
             this.#data = data;
         }
         // Simulate a network request to save data.
-        return of(this.#data).pipe(delay$1(1000));
+        return of(this.#data).pipe(delay(1000));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModalDemoDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModalDemoDataService, providedIn: 'root' }); }
@@ -11866,7 +11984,7 @@ class NavbarExampleComponent {
         alert(buttonText + ' button clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NavbarExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: NavbarExampleComponent, isStandalone: true, selector: "app-navbar-example", ngImport: i0, template: "<sky-navbar data-sky-id=\"basic-navbar\">\n  <sky-navbar-item data-sky-id=\"navbar-item-1\">\n    <a\n      routerLink=\"/\"\n      routerLinkActive=\"sky-navbar-item-active\"\n      (click)=\"onItemClick('Selected item')\"\n    >\n      Selected item\n    </a>\n  </sky-navbar-item>\n  <sky-navbar-item data-sky-id=\"navbar-item-2\">\n    <sky-dropdown>\n      <sky-dropdown-button> Show dropdown </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item>\n          <a routerLink=\"/\" (click)=\"onItemClick('Item 1')\"> Item 1 </a>\n        </sky-dropdown-item>\n        <sky-dropdown-item>\n          <a routerLink=\"/\" (click)=\"onItemClick('Item 2')\"> Item 2 </a>\n        </sky-dropdown-item>\n        <sky-dropdown-item>\n          <a routerLink=\"/\" (click)=\"onItemClick('Item 3')\"> Item 3 </a>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </sky-navbar-item>\n</sky-navbar>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$c.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$c.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$3.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i1$3.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$3.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$3.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyNavbarModule }, { kind: "component", type: i3$4.λ1, selector: "sky-navbar" }, { kind: "component", type: i3$4.λ2, selector: "sky-navbar-item", inputs: ["active"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: NavbarExampleComponent, isStandalone: true, selector: "app-navbar-example", ngImport: i0, template: "<sky-navbar data-sky-id=\"basic-navbar\">\n  <sky-navbar-item data-sky-id=\"navbar-item-1\">\n    <a\n      routerLink=\"/\"\n      routerLinkActive=\"sky-navbar-item-active\"\n      (click)=\"onItemClick('Selected item')\"\n    >\n      Selected item\n    </a>\n  </sky-navbar-item>\n  <sky-navbar-item data-sky-id=\"navbar-item-2\">\n    <sky-dropdown>\n      <sky-dropdown-button> Show dropdown </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item>\n          <a routerLink=\"/\" (click)=\"onItemClick('Item 1')\"> Item 1 </a>\n        </sky-dropdown-item>\n        <sky-dropdown-item>\n          <a routerLink=\"/\" (click)=\"onItemClick('Item 2')\"> Item 2 </a>\n        </sky-dropdown-item>\n        <sky-dropdown-item>\n          <a routerLink=\"/\" (click)=\"onItemClick('Item 3')\"> Item 3 </a>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </sky-navbar-item>\n</sky-navbar>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$c.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$c.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$3.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i1$3.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$3.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$3.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyNavbarModule }, { kind: "component", type: i3$3.λ1, selector: "sky-navbar" }, { kind: "component", type: i3$3.λ2, selector: "sky-navbar-item", inputs: ["active"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NavbarExampleComponent, decorators: [{
             type: Component,
@@ -11896,7 +12014,7 @@ class SettingsModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SettingsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SettingsModalComponent, isStandalone: true, selector: "app-settings-modal", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (submit)=\"modalInstance.save()\">\n  <sky-modal data-sky-id=\"settings-modal\" [headingText]=\"title\">\n    <sky-modal-content>\n      @for (field of fields; track field) {\n        <ng-container class=\"row\">\n          @switch (title) {\n            @case ('Color') {\n              <sky-colorpicker #colorPicker stacked [labelText]=\"field\">\n                <input\n                  type=\"text\"\n                  [formControlName]=\"field\"\n                  [skyColorpickerInput]=\"colorPicker\"\n                />\n              </sky-colorpicker>\n            }\n            @default {\n              <sky-input-box stacked [labelText]=\"field\">\n                <input type=\"text\" [formControlName]=\"field\" />\n              </sky-input-box>\n            }\n          }\n        </ng-container>\n      }\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button\n        class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n        type=\"submit\"\n      >\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.close()\"\n      >\n        Close\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i2$7.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$7.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SettingsModalComponent, isStandalone: true, selector: "app-settings-modal", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (submit)=\"modalInstance.save()\">\n  <sky-modal data-sky-id=\"settings-modal\" [headingText]=\"title\">\n    <sky-modal-content>\n      @for (field of fields; track field) {\n        <ng-container class=\"row\">\n          @switch (title) {\n            @case ('Color') {\n              <sky-colorpicker #colorPicker stacked [labelText]=\"field\">\n                <input\n                  type=\"text\"\n                  [formControlName]=\"field\"\n                  [skyColorpickerInput]=\"colorPicker\"\n                />\n              </sky-colorpicker>\n            }\n            @default {\n              <sky-input-box stacked [labelText]=\"field\">\n                <input type=\"text\" [formControlName]=\"field\" />\n              </sky-input-box>\n            }\n          }\n        </ng-container>\n      }\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button\n        class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n        type=\"submit\"\n      >\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.close()\"\n      >\n        Close\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyColorpickerModule }, { kind: "component", type: i2$8.λ1, selector: "sky-colorpicker", inputs: ["pickerButtonIcon", "label", "labelledBy", "labelText", "labelHidden", "helpKey", "helpPopoverContent", "helpPopoverTitle", "hintText", "stacked", "messageStream", "showResetButton"], outputs: ["selectedColorChanged", "selectedColorApplied"] }, { kind: "directive", type: i2$8.λ2, selector: "[skyColorpickerInput]", inputs: ["skyColorpickerInput", "initialColor", "id", "returnFormat", "outputFormat", "presetColors", "alphaChannel", "allowTransparency"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SettingsModalComponent, decorators: [{
             type: Component,
@@ -12266,7 +12384,7 @@ class PagesPageDataManagerSplitViewFitLayoutExampleComponent {
         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" }] }); }
+    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: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i1$6.λ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$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ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,
@@ -12304,7 +12422,7 @@ class TileMyActionsComponent {
         alert(buttonText + ' was clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TileMyActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: TileMyActionsComponent, isStandalone: true, selector: "app-tile-my-actions", ngImport: i0, template: "<sky-tile tileName=\"My actions\">\n  <sky-tile-title> My actions </sky-tile-title>\n  <sky-tile-summary> 3 </sky-tile-summary>\n  <sky-tile-content>\n    <sky-tile-content-section>\n      <sky-repeater data-sky-id=\"repeater-example\">\n        @for (item of items; track item) {\n          <sky-repeater-item [itemName]=\"item.accessibilityLabel\">\n            @if (item.title) {\n              <sky-repeater-item-title class=\"example-repeater-flex\">\n                <div class=\"example-repeater-item-title sky-margin-stacked-sm\">\n                  <a href=\"/\">{{ item.title }}</a>\n                </div>\n                <div class=\"sky-font-deemphasized\">{{ item.date }}</div>\n              </sky-repeater-item-title>\n            }\n            <sky-repeater-item-context-menu>\n              <sky-dropdown buttonType=\"context-menu\">\n                <sky-dropdown-menu>\n                  <sky-dropdown-item>\n                    <button\n                      type=\"button\"\n                      [attr.aria-label]=\"\n                        'Action 1 for ' +\n                        (item.title ?? item.accessibilityLabel)\n                      \"\n                      (click)=\"onActionClicked('Action 1')\"\n                    >\n                      Edit\n                    </button>\n                  </sky-dropdown-item>\n                  <sky-dropdown-item>\n                    <button\n                      type=\"button\"\n                      [attr.aria-label]=\"\n                        'Action 2 for ' +\n                        (item.title ?? item.accessibilityLabel)\n                      \"\n                      (click)=\"onActionClicked('Action 2')\"\n                    >\n                      Mark as complete\n                    </button>\n                  </sky-dropdown-item>\n                </sky-dropdown-menu>\n              </sky-dropdown>\n            </sky-repeater-item-context-menu>\n          </sky-repeater-item>\n        }\n      </sky-repeater>\n    </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$e.λ5, selector: "sky-tile-content" }, { kind: "component", type: i1$e.λ4, selector: "sky-tile-content-section" }, { kind: "component", type: i1$e.λ1, selector: "sky-tile", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "showSettings", "showHelp", "tileName", "isCollapsed"], outputs: ["settingsClick", "isCollapsedChange", "helpClick"] }, { kind: "component", type: i1$e.λ2, selector: "sky-tile-summary" }, { kind: "component", type: i1$e.λ3, selector: "sky-tile-title" }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$3.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$3.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$3.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: 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.λ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: TileMyActionsComponent, isStandalone: true, selector: "app-tile-my-actions", ngImport: i0, template: "<sky-tile tileName=\"My actions\">\n  <sky-tile-title> My actions </sky-tile-title>\n  <sky-tile-summary> 3 </sky-tile-summary>\n  <sky-tile-content>\n    <sky-tile-content-section>\n      <sky-repeater data-sky-id=\"repeater-example\">\n        @for (item of items; track item) {\n          <sky-repeater-item [itemName]=\"item.accessibilityLabel\">\n            @if (item.title) {\n              <sky-repeater-item-title class=\"example-repeater-flex\">\n                <div class=\"example-repeater-item-title sky-margin-stacked-sm\">\n                  <a href=\"/\">{{ item.title }}</a>\n                </div>\n                <div class=\"sky-font-deemphasized\">{{ item.date }}</div>\n              </sky-repeater-item-title>\n            }\n            <sky-repeater-item-context-menu>\n              <sky-dropdown buttonType=\"context-menu\">\n                <sky-dropdown-menu>\n                  <sky-dropdown-item>\n                    <button\n                      type=\"button\"\n                      [attr.aria-label]=\"\n                        'Action 1 for ' +\n                        (item.title ?? item.accessibilityLabel)\n                      \"\n                      (click)=\"onActionClicked('Action 1')\"\n                    >\n                      Edit\n                    </button>\n                  </sky-dropdown-item>\n                  <sky-dropdown-item>\n                    <button\n                      type=\"button\"\n                      [attr.aria-label]=\"\n                        'Action 2 for ' +\n                        (item.title ?? item.accessibilityLabel)\n                      \"\n                      (click)=\"onActionClicked('Action 2')\"\n                    >\n                      Mark as complete\n                    </button>\n                  </sky-dropdown-item>\n                </sky-dropdown-menu>\n              </sky-dropdown>\n            </sky-repeater-item-context-menu>\n          </sky-repeater-item>\n        }\n      </sky-repeater>\n    </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$e.λ5, selector: "sky-tile-content" }, { kind: "component", type: i1$e.λ4, selector: "sky-tile-content-section" }, { kind: "component", type: i1$e.λ1, selector: "sky-tile", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "showSettings", "showHelp", "tileName", "isCollapsed"], outputs: ["settingsClick", "isCollapsedChange", "helpClick"] }, { kind: "component", type: i1$e.λ2, selector: "sky-tile-summary" }, { kind: "component", type: i1$e.λ3, selector: "sky-tile-title" }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$3.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$3.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$3.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i2$5.λ12, selector: "sky-repeater-item-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TileMyActionsComponent, decorators: [{
             type: Component,
@@ -12395,7 +12513,7 @@ class PagesPageHomePageBlocksLayoutExampleComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PagesPageHomePageBlocksLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: PagesPageHomePageBlocksLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-home-page-blocks-layout-example", ngImport: i0, template: "<sky-page layout=\"blocks\">\n  <sky-page-header pageTitle=\"Home\">\n    <sky-page-header-actions>\n      <button type=\"button\" class=\"sky-btn sky-btn-default\">\n        <sky-icon iconName=\"add\" /> New\n      </button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-home-page-content />\n  </sky-page-content>\n\n  <sky-page-links>\n    <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n    <sky-link-list headingText=\"Resources\">\n      <sky-link-list-item>\n        <a href=\"#\">Help</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <a href=\"#\">Support</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <a href=\"#\">Training</a>\n      </sky-link-list-item>\n    </sky-link-list>\n  </sky-page-links>\n</sky-page>\n", dependencies: [{ kind: "component", type: HomePageContentComponent, selector: "app-home-page-content" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$d.λ13, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "component", type: i1$d.λ14, selector: "sky-link-list-item" }, { kind: "component", type: i1$d.λ15, selector: "sky-link-list-recently-accessed", inputs: ["recentLinks"] }, { kind: "component", type: i1$d.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$d.λ9, selector: "sky-page-header-actions" }, { kind: "component", type: i1$d.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$d.λ7, selector: "sky-page-content" }, { kind: "component", type: i1$d.λ12, selector: "sky-page-links" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: PagesPageHomePageBlocksLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-home-page-blocks-layout-example", ngImport: i0, template: "<sky-page layout=\"blocks\">\n  <sky-page-header pageTitle=\"Home\">\n    <sky-page-header-actions>\n      <button type=\"button\" class=\"sky-btn sky-btn-default\">\n        <sky-icon iconName=\"add\" /> New\n      </button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-home-page-content />\n  </sky-page-content>\n\n  <sky-page-links>\n    <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n    <sky-link-list headingText=\"Resources\">\n      <sky-link-list-item>\n        <a href=\"#\">Help</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <a href=\"#\">Support</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <a href=\"#\">Training</a>\n      </sky-link-list-item>\n    </sky-link-list>\n  </sky-page-links>\n</sky-page>\n", dependencies: [{ kind: "component", type: HomePageContentComponent, selector: "app-home-page-content" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$d.λ13, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "component", type: i1$d.λ14, selector: "sky-link-list-item" }, { kind: "component", type: i1$d.λ15, selector: "sky-link-list-recently-accessed", inputs: ["recentLinks"] }, { kind: "component", type: i1$d.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$d.λ9, selector: "sky-page-header-actions" }, { kind: "component", type: i1$d.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$d.λ7, selector: "sky-page-content" }, { kind: "component", type: i1$d.λ12, selector: "sky-page-links" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PagesPageHomePageBlocksLayoutExampleComponent, decorators: [{
             type: Component,
@@ -12521,7 +12639,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", 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" }] }); }
+    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-list-summary>\n        <sky-list-summary-item labelText=\"Dashboards\" [value]=\"items.length\" />\n      </sky-list-summary>\n    </sky-data-manager-toolbar>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [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: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i1$6.λ4, selector: "sky-data-manager-toolbar-primary-item" }, { kind: "component", type: i1$6.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i2$5.λ16, selector: "sky-list-summary" }, { kind: "component", type: i2$5.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }] }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListPageContentComponent$1, decorators: [{
             type: Component,
@@ -12530,8 +12648,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         SkyAgGridModule,
                         SkyDataManagerModule,
                         SkyIconModule,
-                        SkyKeyInfoModule,
-                    ], 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" }]
+                        SkyListSummaryModule,
+                    ], template: "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button\n          aria-label=\"New dashboard\"\n          class=\"sky-btn sky-btn-default\"\n          type=\"button\"\n        >\n          <sky-icon iconName=\"add\" />\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n      <sky-list-summary>\n        <sky-list-summary-item labelText=\"Dashboards\" [value]=\"items.length\" />\n      </sky-list-summary>\n    </sky-data-manager-toolbar>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"items\" />\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -12642,7 +12760,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", 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" }] }); }
+    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-list-summary>\n        <sky-list-summary-item labelText=\"Contacts\" [value]=\"contacts.length\" />\n      </sky-list-summary>\n    </sky-data-manager-toolbar>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"contacts\" />\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n", dependencies: [{ kind: "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: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i1$6.λ4, selector: "sky-data-manager-toolbar-primary-item" }, { kind: "component", type: i1$6.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyListSummaryModule }, { kind: "component", type: i2$5.λ16, selector: "sky-list-summary" }, { kind: "component", type: i2$5.λ17, selector: "sky-list-summary-item", inputs: ["value", "labelText", "valueFormat", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ListPageContactsGridComponent, decorators: [{
             type: Component,
@@ -12651,8 +12769,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         SkyAgGridModule,
                         SkyDataManagerModule,
                         SkyIconModule,
-                        SkyKeyInfoModule,
-                    ], 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" }]
+                        SkyListSummaryModule,
+                    ], template: "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button\n          aria-label=\"New contact\"\n          class=\"sky-btn sky-btn-default\"\n          type=\"button\"\n        >\n          <sky-icon iconName=\"add\" />\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n      <sky-list-summary>\n        <sky-list-summary-item labelText=\"Contacts\" [value]=\"contacts.length\" />\n      </sky-list-summary>\n    </sky-data-manager-toolbar>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"contacts\" />\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n" }]
         }], ctorParameters: () => [], propDecorators: { contacts: [{
                 type: Input
             }] } });
@@ -12814,7 +12932,7 @@ let RecordPageContentComponent$1 = class RecordPageContentComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RecordPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: RecordPageContentComponent, isStandalone: true, selector: "app-record-page-content", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Details\">\n        <sky-box-controls>\n          <button\n            aria-label=\"Edit button for details\"\n            class=\"sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n          >\n            <sky-icon iconName=\"edit\" />\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            @for (recordDetail of recordDetails; track recordDetail.detail) {\n              <sky-description-list-content>\n                <sky-description-list-term>\n                  {{ recordDetail.detail }}\n                </sky-description-list-term>\n                <sky-description-list-description>\n                  {{ recordDetail.info }}\n                </sky-description-list-description>\n              </sky-description-list-content>\n            }\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-font-heading-4\">Actuals</h3>\n              @for (\n                actual of actualPayments;\n                track actual.category;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < actualPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-font-display-3\">\n                    {{ actual.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-font-heading-4\">Projected</h3>\n              @for (\n                projected of projectedPayments;\n                track projected;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-font-display-3\">\n                    {{ projected.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>\n                    {{ projected.category }}\n                  </sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box headingText=\"Recent activity\">\n        <sky-box-content>\n          <sky-repeater>\n            @for (activity of recentActivity; track activity.activity) {\n              <sky-repeater-item>\n                <sky-repeater-item-content>\n                  <div class=\"sky-margin-stacked-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-font-deemphasized\">{{ activity.date }}</div>\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$5.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$5.λ43, selector: "sky-box-content" }, { kind: "component", type: i1$5.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: RecordPageContentComponent, isStandalone: true, selector: "app-record-page-content", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Details\">\n        <sky-box-controls>\n          <button\n            aria-label=\"Edit button for details\"\n            class=\"sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n          >\n            <sky-icon iconName=\"edit\" />\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            @for (recordDetail of recordDetails; track recordDetail.detail) {\n              <sky-description-list-content>\n                <sky-description-list-term>\n                  {{ recordDetail.detail }}\n                </sky-description-list-term>\n                <sky-description-list-description>\n                  {{ recordDetail.info }}\n                </sky-description-list-description>\n              </sky-description-list-content>\n            }\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-font-heading-4\">Actuals</h3>\n              @for (\n                actual of actualPayments;\n                track actual.category;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < actualPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-font-display-3\">\n                    {{ actual.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-font-heading-4\">Projected</h3>\n              @for (\n                projected of projectedPayments;\n                track projected;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-font-display-3\">\n                    {{ projected.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>\n                    {{ projected.category }}\n                  </sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box headingText=\"Recent activity\">\n        <sky-box-content>\n          <sky-repeater>\n            @for (activity of recentActivity; track activity.activity) {\n              <sky-repeater-item>\n                <sky-repeater-item-content>\n                  <div class=\"sky-margin-stacked-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-font-deemphasized\">{{ activity.date }}</div>\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$5.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$5.λ43, selector: "sky-box-content" }, { kind: "component", type: i1$5.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ8, selector: "sky-repeater-item-content" }] }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RecordPageContentComponent$1, decorators: [{
             type: Component,
@@ -12963,7 +13081,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", 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"] }] }); }
+    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: i1$6.λ2, selector: "sky-data-manager", inputs: ["dock"] }, { kind: "component", type: i1$6.λ7, selector: "sky-data-manager-toolbar" }, { kind: "component", type: i1$6.λ4, selector: "sky-data-manager-toolbar-primary-item" }, { kind: "component", type: i1$6.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RecordPageAttachmentsTabComponent, decorators: [{
             type: Component,
@@ -12992,7 +13110,7 @@ class RecordPageNotesTabComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RecordPageNotesTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: RecordPageNotesTabComponent, isStandalone: true, selector: "app-record-page-notes-tab", ngImport: i0, template: "<div class=\"sky-margin-stacked-xs\">\n  <sky-toolbar>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        aria-label=\"New note\"\n      >\n        <sky-icon iconName=\"add\" />\n        New\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-sort [showButtonText]=\"true\">\n        <sky-sort-item>\n          <span aria-label=\"Sort notes by date created (newest first)\">\n            Date created (newest first)\n          </span>\n        </sky-sort-item>\n        <sky-sort-item>\n          <span aria-label=\"Sort notes by date created (oldest first)\">\n            Date created (oldest first)\n          </span>\n        </sky-sort-item>\n      </sky-sort>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        aria-label=\"Export notes\"\n      >\n        <sky-icon iconName=\"document-xls\" />\n        Export\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-search placeholderText=\"Find in notes\" />\n    </sky-toolbar-item>\n  </sky-toolbar>\n</div>\n<div class=\"sky-margin-stacked-sm\">\n  <sky-key-info layout=\"horizontal\">\n    <sky-key-info-value class=\"sky-font-display-4\">\n      {{ notes.length }}\n    </sky-key-info-value>\n    <sky-key-info-label> Notes </sky-key-info-label>\n  </sky-key-info>\n</div>\n<sky-repeater>\n  @for (note of notes; track note.noteNumber) {\n    <sky-repeater-item>\n      <sky-repeater-item-context-menu>\n        <sky-dropdown\n          buttonType=\"context-menu\"\n          [label]=\"\n            'Context menu for note ' + note.noteNumber + ' from ' + note.date\n          \"\n        >\n          <sky-dropdown-menu>\n            <sky-dropdown-item>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"\n                  'Edit note ' + note.noteNumber + ' from ' + note.date\n                \"\n              >\n                Edit\n              </button>\n            </sky-dropdown-item>\n            <sky-dropdown-item>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"\n                  'Delete note ' + note.noteNumber + ' from ' + note.date\n                \"\n              >\n                Delete\n              </button>\n            </sky-dropdown-item>\n          </sky-dropdown-menu>\n        </sky-dropdown>\n      </sky-repeater-item-context-menu>\n      <sky-repeater-item-content>\n        <div class=\"sky-margin-stacked-xs\">\n          {{ note.content }}\n        </div>\n        <div class=\"sky-font-deemphasized\">{{ note.date }}</div>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$3.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$3.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$3.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: 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: "ngmodule", type: SkySearchModule }, { kind: "component", type: i2$2.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkySortModule }, { kind: "component", type: i2$4.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i2$4.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: RecordPageNotesTabComponent, isStandalone: true, selector: "app-record-page-notes-tab", ngImport: i0, template: "<div class=\"sky-margin-stacked-xs\">\n  <sky-toolbar>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        aria-label=\"New note\"\n      >\n        <sky-icon iconName=\"add\" />\n        New\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-sort [showButtonText]=\"true\">\n        <sky-sort-item>\n          <span aria-label=\"Sort notes by date created (newest first)\">\n            Date created (newest first)\n          </span>\n        </sky-sort-item>\n        <sky-sort-item>\n          <span aria-label=\"Sort notes by date created (oldest first)\">\n            Date created (oldest first)\n          </span>\n        </sky-sort-item>\n      </sky-sort>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        aria-label=\"Export notes\"\n      >\n        <sky-icon iconName=\"document-xls\" />\n        Export\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-search placeholderText=\"Find in notes\" />\n    </sky-toolbar-item>\n  </sky-toolbar>\n</div>\n<div class=\"sky-margin-stacked-sm\">\n  <sky-key-info layout=\"horizontal\">\n    <sky-key-info-value class=\"sky-font-display-4\">\n      {{ notes.length }}\n    </sky-key-info-value>\n    <sky-key-info-label> Notes </sky-key-info-label>\n  </sky-key-info>\n</div>\n<sky-repeater>\n  @for (note of notes; track note.noteNumber) {\n    <sky-repeater-item>\n      <sky-repeater-item-context-menu>\n        <sky-dropdown\n          buttonType=\"context-menu\"\n          [label]=\"\n            'Context menu for note ' + note.noteNumber + ' from ' + note.date\n          \"\n        >\n          <sky-dropdown-menu>\n            <sky-dropdown-item>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"\n                  'Edit note ' + note.noteNumber + ' from ' + note.date\n                \"\n              >\n                Edit\n              </button>\n            </sky-dropdown-item>\n            <sky-dropdown-item>\n              <button\n                type=\"button\"\n                [attr.aria-label]=\"\n                  'Delete note ' + note.noteNumber + ' from ' + note.date\n                \"\n              >\n                Delete\n              </button>\n            </sky-dropdown-item>\n          </sky-dropdown-menu>\n        </sky-dropdown>\n      </sky-repeater-item-context-menu>\n      <sky-repeater-item-content>\n        <div class=\"sky-margin-stacked-xs\">\n          {{ note.content }}\n        </div>\n        <div class=\"sky-font-deemphasized\">{{ note.date }}</div>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$3.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$3.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$3.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i2$5.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: i2$2.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkySortModule }, { kind: "component", type: i2$5.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i2$5.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RecordPageNotesTabComponent, decorators: [{
             type: Component,
@@ -13079,7 +13197,7 @@ class RecordPageOverviewTabComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RecordPageOverviewTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: RecordPageOverviewTabComponent, isStandalone: true, selector: "app-record-page-overview-tab", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Details\">\n        <sky-box-controls>\n          <button\n            aria-label=\"Edit button for details\"\n            class=\"sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n          >\n            <sky-icon iconName=\"edit\" />\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            @for (recordDetail of recordDetails; track recordDetail.detail) {\n              <sky-description-list-content>\n                <sky-description-list-term>\n                  {{ recordDetail.detail }}\n                </sky-description-list-term>\n                <sky-description-list-description>\n                  {{ recordDetail.info }}\n                </sky-description-list-description>\n              </sky-description-list-content>\n            }\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-font-heading-4\">Actuals</h3>\n              @for (\n                actual of actualPayments;\n                track actual.category;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < actualPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-font-display-3\">\n                    {{ actual.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-font-heading-4\">Projected</h3>\n              @for (\n                projected of projectedPayments;\n                track projected;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-font-display-3\">\n                    {{ projected.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>\n                    {{ projected.category }}\n                  </sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box headingText=\"Recent activity\">\n        <sky-box-content>\n          <sky-repeater>\n            @for (activity of recentActivity; track activity.activity) {\n              <sky-repeater-item>\n                <sky-repeater-item-content>\n                  <div class=\"sky-margin-stacked-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-font-deemphasized\">{{ activity.date }}</div>\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$5.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$5.λ43, selector: "sky-box-content" }, { kind: "component", type: i1$5.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: RecordPageOverviewTabComponent, isStandalone: true, selector: "app-record-page-overview-tab", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Details\">\n        <sky-box-controls>\n          <button\n            aria-label=\"Edit button for details\"\n            class=\"sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n          >\n            <sky-icon iconName=\"edit\" />\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            @for (recordDetail of recordDetails; track recordDetail.detail) {\n              <sky-description-list-content>\n                <sky-description-list-term>\n                  {{ recordDetail.detail }}\n                </sky-description-list-term>\n                <sky-description-list-description>\n                  {{ recordDetail.info }}\n                </sky-description-list-description>\n              </sky-description-list-content>\n            }\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Payments\">\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-font-heading-4\">Actuals</h3>\n              @for (\n                actual of actualPayments;\n                track actual.category;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < actualPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-font-display-3\">\n                    {{ actual.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-font-heading-4\">Projected</h3>\n              @for (\n                projected of projectedPayments;\n                track projected;\n                let i = $index\n              ) {\n                <sky-key-info\n                  [ngClass]=\"{\n                    'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                  }\"\n                >\n                  <sky-key-info-value class=\"sky-font-display-3\">\n                    {{ projected.value }}\n                  </sky-key-info-value>\n                  <sky-key-info-label>\n                    {{ projected.category }}\n                  </sky-key-info-label>\n                </sky-key-info>\n              }\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box headingText=\"Recent activity\">\n        <sky-box-content>\n          <sky-repeater>\n            @for (activity of recentActivity; track activity.activity) {\n              <sky-repeater-item>\n                <sky-repeater-item-content>\n                  <div class=\"sky-margin-stacked-xs\">\n                    {{ activity.activity }}\n                  </div>\n                  <div class=\"sky-font-deemphasized\">{{ activity.date }}</div>\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$5.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$5.λ43, selector: "sky-box-content" }, { kind: "component", type: i1$5.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ8, selector: "sky-repeater-item-content" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: RecordPageOverviewTabComponent, decorators: [{
             type: Component,
@@ -13117,7 +13235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  */
 class PagesPageRecordPageTabsLayoutExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PagesPageRecordPageTabsLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: PagesPageRecordPageTabsLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-record-page-tabs-layout-example", ngImport: i0, template: "<sky-page layout=\"tabs\" helpKey=\"example-help\">\n  <sky-page-header pageTitle=\"Charlene Conners\">\n    <sky-page-header-alerts>\n      <sky-alert alertType=\"warning\" descriptionType=\"warning\">\n        Missing phone number for Charlene Conners.\n      </sky-alert>\n    </sky-page-header-alerts>\n    <sky-page-header-avatar>\n      <sky-avatar name=\"Charlene Conners\" />\n    </sky-page-header-avatar>\n    <sky-page-header-details>\n      <sky-label labelType=\"info\" descriptionType=\"important-info\">\n        VIP\n      </sky-label>\n    </sky-page-header-details>\n    <sky-page-header-actions>\n      <button class=\"sky-btn sky-btn-default\" type=\"button\">\n        Email contact\n      </button>\n      <button class=\"sky-btn sky-btn-default\" type=\"button\">\n        Add to my contacts\n      </button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-record-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "component", type: RecordPageContentComponent, selector: "app-record-page-content" }, { kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyAvatarModule }, { kind: "component", type: i1$8.λ1, selector: "sky-avatar", inputs: ["canChange", "name", "src", "maxFileSize", "size"], outputs: ["avatarChanged"] }, { kind: "ngmodule", type: SkyLabelModule }, { kind: "component", type: i1.λ9, selector: "sky-label", inputs: ["labelType", "descriptionType", "customDescription"] }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$d.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$d.λ9, selector: "sky-page-header-actions" }, { kind: "component", type: i1$d.λ11, selector: "sky-page-header-alerts" }, { kind: "component", type: i1$d.λ10, selector: "sky-page-header-avatar" }, { kind: "component", type: i1$d.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$d.λ8, selector: "sky-page-header-details" }, { kind: "component", type: i1$d.λ7, selector: "sky-page-content" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: PagesPageRecordPageTabsLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-record-page-tabs-layout-example", ngImport: i0, template: "<sky-page layout=\"tabs\" helpKey=\"example-help\">\n  <sky-page-header pageTitle=\"Charlene Conners\">\n    <sky-page-header-alerts>\n      <sky-alert alertType=\"warning\" descriptionType=\"warning\">\n        Missing phone number for Charlene Conners.\n      </sky-alert>\n    </sky-page-header-alerts>\n    <sky-page-header-avatar>\n      <sky-avatar name=\"Charlene Conners\" />\n    </sky-page-header-avatar>\n    <sky-page-header-details>\n      <sky-label labelType=\"info\" descriptionType=\"important-info\">\n        VIP\n      </sky-label>\n    </sky-page-header-details>\n    <sky-page-header-actions>\n      <button class=\"sky-btn sky-btn-default\" type=\"button\">\n        Email contact\n      </button>\n      <button class=\"sky-btn sky-btn-default\" type=\"button\">\n        Add to my contacts\n      </button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-record-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "component", type: RecordPageContentComponent, selector: "app-record-page-content" }, { kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyAvatarModule }, { kind: "component", type: i1$9.λ1, selector: "sky-avatar", inputs: ["canChange", "name", "src", "maxFileSize", "size"], outputs: ["avatarChanged"] }, { kind: "ngmodule", type: SkyLabelModule }, { kind: "component", type: i1.λ9, selector: "sky-label", inputs: ["labelType", "descriptionType", "customDescription"] }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$d.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$d.λ9, selector: "sky-page-header-actions" }, { kind: "component", type: i1$d.λ11, selector: "sky-page-header-alerts" }, { kind: "component", type: i1$d.λ10, selector: "sky-page-header-avatar" }, { kind: "component", type: i1$d.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$d.λ8, selector: "sky-page-header-details" }, { kind: "component", type: i1$d.λ7, selector: "sky-page-content" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PagesPageRecordPageTabsLayoutExampleComponent, decorators: [{
             type: Component,
@@ -13295,7 +13413,7 @@ class SplitViewPageContentComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SplitViewPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SplitViewPageContentComponent, isStandalone: true, selector: "app-split-view-page-content", ngImport: i0, template: "<sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n  <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\" [width]=\"listWidth\">\n    <sky-repeater [activeIndex]=\"activeIndex\">\n      @for (item of items; track item.id; let i = $index) {\n        <sky-repeater-item\n          (click)=\"onItemClick(i)\"\n          (keyup.enter)=\"onItemClick(i)\"\n        >\n          <sky-repeater-item-content>\n            {{ item.amount }} <br />\n            {{ item.date }} <br />\n            {{ item.vendor }}\n          </sky-repeater-item-content>\n        </sky-repeater-item>\n      }\n    </sky-repeater>\n  </sky-split-view-drawer>\n\n  <sky-split-view-workspace ariaLabel=\"Transaction form\">\n    <sky-split-view-workspace-content class=\"sky-padding-even-xl\">\n      <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n        <sky-description-list class=\"sky-margin-stacked-xl\">\n          <sky-description-list-content>\n            <sky-description-list-term>\n              Receipt amount\n            </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.amount }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term> Date </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.date }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term> Vendor </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.vendor }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term>\n              Receipt image\n            </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.receiptImage }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n        </sky-description-list>\n        <div>\n          <sky-input-box stacked=\"true\" labelText=\"Approved amount\">\n            <input\n              formControlName=\"approvedAmount\"\n              name=\"approvedAmount\"\n              type=\"text\"\n            />\n          </sky-input-box>\n        </div>\n\n        <div>\n          <sky-input-box stacked=\"true\" labelText=\"Comments\">\n            <textarea formControlName=\"comments\" name=\"comments\"></textarea>\n          </sky-input-box>\n        </div>\n      </form>\n    </sky-split-view-workspace-content>\n    <sky-split-view-workspace-footer>\n      <sky-summary-action-bar>\n        <sky-summary-action-bar-actions>\n          <sky-summary-action-bar-primary-action (actionClick)=\"onApprove()\">\n            Approve expense\n          </sky-summary-action-bar-primary-action>\n          <sky-summary-action-bar-secondary-actions>\n            <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\n              Deny expense\n            </sky-summary-action-bar-secondary-action>\n          </sky-summary-action-bar-secondary-actions>\n        </sky-summary-action-bar-actions>\n      </sky-summary-action-bar>\n    </sky-split-view-workspace-footer>\n  </sky-split-view-workspace>\n</sky-split-view>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SplitViewPageContentComponent, isStandalone: true, selector: "app-split-view-page-content", ngImport: i0, template: "<sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n  <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\" [width]=\"listWidth\">\n    <sky-repeater [activeIndex]=\"activeIndex\">\n      @for (item of items; track item.id; let i = $index) {\n        <sky-repeater-item\n          (click)=\"onItemClick(i)\"\n          (keyup.enter)=\"onItemClick(i)\"\n        >\n          <sky-repeater-item-content>\n            {{ item.amount }} <br />\n            {{ item.date }} <br />\n            {{ item.vendor }}\n          </sky-repeater-item-content>\n        </sky-repeater-item>\n      }\n    </sky-repeater>\n  </sky-split-view-drawer>\n\n  <sky-split-view-workspace ariaLabel=\"Transaction form\">\n    <sky-split-view-workspace-content class=\"sky-padding-even-xl\">\n      <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n        <sky-description-list class=\"sky-margin-stacked-xl\">\n          <sky-description-list-content>\n            <sky-description-list-term>\n              Receipt amount\n            </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.amount }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term> Date </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.date }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term> Vendor </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.vendor }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term>\n              Receipt image\n            </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.receiptImage }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n        </sky-description-list>\n        <div>\n          <sky-input-box stacked=\"true\" labelText=\"Approved amount\">\n            <input\n              formControlName=\"approvedAmount\"\n              name=\"approvedAmount\"\n              type=\"text\"\n            />\n          </sky-input-box>\n        </div>\n\n        <div>\n          <sky-input-box stacked=\"true\" labelText=\"Comments\">\n            <textarea formControlName=\"comments\" name=\"comments\"></textarea>\n          </sky-input-box>\n        </div>\n      </form>\n    </sky-split-view-workspace-content>\n    <sky-split-view-workspace-footer>\n      <sky-summary-action-bar>\n        <sky-summary-action-bar-actions>\n          <sky-summary-action-bar-primary-action (actionClick)=\"onApprove()\">\n            Approve expense\n          </sky-summary-action-bar-primary-action>\n          <sky-summary-action-bar-secondary-actions>\n            <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\n              Deny expense\n            </sky-summary-action-bar-secondary-action>\n          </sky-summary-action-bar-secondary-actions>\n        </sky-summary-action-bar-actions>\n      </sky-summary-action-bar>\n    </sky-split-view-workspace-footer>\n  </sky-split-view-workspace>\n</sky-split-view>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ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: SplitViewPageContentComponent, decorators: [{
             type: Component,
@@ -13337,7 +13455,7 @@ class PhoneFieldBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PhoneFieldBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: PhoneFieldBasicExampleComponent, isStandalone: true, selector: "app-phone-field-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form class=\"phone-field-example\" [formGroup]=\"phoneForm\">\n    <sky-input-box\n      data-sky-id=\"my-phone-field\"\n      helpPopoverTitle=\"How we use your phone number\"\n      hintText=\"Enter the phone number where you can be reached before 5 p.m., Monday through Friday.\"\n      labelText=\"Phone number\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n    >\n      <sky-phone-field [defaultCountry]=\"'us'\">\n        <input formControlName=\"phoneControl\" skyPhoneFieldInput />\n      </sky-phone-field>\n    </sky-input-box>\n  </form>\n</div>\n\n<ng-template #inlineHelpPopover>\n  We use this number for calls and text about your student. We won't use it for\n  other purposes.\n  <br />\n  <br />\n  For more information, see our <a>privacy policy</a>.\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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: "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: SkyPhoneFieldModule }, { kind: "component", type: i3$5.λ1, selector: "sky-phone-field", inputs: ["allowExtensions", "defaultCountry", "returnFormat", "supportedCountryISOs", "selectedCountry"], outputs: ["selectedCountryChange"] }, { kind: "directive", type: i3$5.λ2, selector: "[skyPhoneFieldInput]", inputs: ["disabled", "skyPhoneFieldNoValidate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: PhoneFieldBasicExampleComponent, isStandalone: true, selector: "app-phone-field-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n  <form class=\"phone-field-example\" [formGroup]=\"phoneForm\">\n    <sky-input-box\n      data-sky-id=\"my-phone-field\"\n      helpPopoverTitle=\"How we use your phone number\"\n      hintText=\"Enter the phone number where you can be reached before 5 p.m., Monday through Friday.\"\n      labelText=\"Phone number\"\n      [helpPopoverContent]=\"inlineHelpPopover\"\n    >\n      <sky-phone-field [defaultCountry]=\"'us'\">\n        <input formControlName=\"phoneControl\" skyPhoneFieldInput />\n      </sky-phone-field>\n    </sky-input-box>\n  </form>\n</div>\n\n<ng-template #inlineHelpPopover>\n  We use this number for calls and text about your student. We won't use it for\n  other purposes.\n  <br />\n  <br />\n  For more information, see our <a>privacy policy</a>.\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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: "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: SkyPhoneFieldModule }, { kind: "component", type: i3$4.λ1, selector: "sky-phone-field", inputs: ["allowExtensions", "defaultCountry", "returnFormat", "supportedCountryISOs", "selectedCountry"], outputs: ["selectedCountryChange"] }, { kind: "directive", type: i3$4.λ2, selector: "[skyPhoneFieldInput]", inputs: ["disabled", "skyPhoneFieldNoValidate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PhoneFieldBasicExampleComponent, decorators: [{
             type: Component,
@@ -13411,7 +13529,7 @@ class PopoversPopoverProgrammaticExampleComponent {
         this.popoverController.next(message);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PopoversPopoverProgrammaticExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: PopoversPopoverProgrammaticExampleComponent, isStandalone: true, selector: "app-popovers-popover-programmatic-example", ngImport: i0, template: "<sky-help-inline\n  ariaLabel=\"Information about Popover using message stream\"\n  [skyPopover]=\"myPopover\"\n  [skyPopoverMessageStream]=\"popoverController\"\n/>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openPopover()\"\n>\n  Open popover with message stream\n</button>\n\n<sky-popover\n  #myPopover\n  (popoverClosed)=\"onPopoverStateChange(false)\"\n  (popoverOpened)=\"onPopoverStateChange(true)\"\n>\n  This is a popover.\n</sky-popover>\n", dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$6.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i1$3.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i1$3.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: PopoversPopoverProgrammaticExampleComponent, isStandalone: true, selector: "app-popovers-popover-programmatic-example", ngImport: i0, template: "<sky-help-inline\n  ariaLabel=\"Information about Popover using message stream\"\n  [skyPopover]=\"myPopover\"\n  [skyPopoverMessageStream]=\"popoverController\"\n/>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openPopover()\"\n>\n  Open popover with message stream\n</button>\n\n<sky-popover\n  #myPopover\n  (popoverClosed)=\"onPopoverStateChange(false)\"\n  (popoverOpened)=\"onPopoverStateChange(true)\"\n>\n  This is a popover.\n</sky-popover>\n", dependencies: [{ kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i1$7.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i1$3.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i1$3.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PopoversPopoverProgrammaticExampleComponent, decorators: [{
             type: Component,
@@ -13725,7 +13843,7 @@ class SplitViewBasicExampleComponent {
         this.splitViewStream.next(message);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SplitViewBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SplitViewBasicExampleComponent, isStandalone: true, selector: "app-split-view-basic-example", ngImport: i0, template: "<sky-split-view [messageStream]=\"splitViewStream\">\n  <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\">\n    <sky-repeater [activeIndex]=\"activeIndex\">\n      @for (item of items; track item; let i = $index) {\n        <sky-repeater-item\n          (click)=\"onItemClick(i)\"\n          (keyup.enter)=\"onItemClick(i)\"\n        >\n          <sky-repeater-item-content>\n            {{ item.amount }} <br />\n            {{ item.date }} <br />\n            {{ item.vendor }}\n          </sky-repeater-item-content>\n        </sky-repeater-item>\n      }\n    </sky-repeater>\n  </sky-split-view-drawer>\n\n  <sky-split-view-workspace ariaLabel=\"Transaction form\">\n    <sky-split-view-workspace-content class=\"sky-padding-even-xl\">\n      <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n        <sky-description-list labelWidth=\"150px\">\n          <sky-description-list-content>\n            <sky-description-list-term>\n              Receipt amount\n            </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.amount }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term> Date </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.date }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term> Vendor </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.vendor }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term>\n              Receipt image\n            </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.receiptImage }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n        </sky-description-list>\n        <sky-input-box labelText=\"Approved amount\" stacked=\"true\">\n          <input formControlName=\"approvedAmount\" type=\"text\" />\n        </sky-input-box>\n        <sky-input-box labelText=\"Comments\">\n          <textarea formControlName=\"comments\"></textarea>\n        </sky-input-box>\n      </form>\n    </sky-split-view-workspace-content>\n    <sky-split-view-workspace-footer>\n      <sky-summary-action-bar>\n        <sky-summary-action-bar-actions>\n          <sky-summary-action-bar-primary-action (actionClick)=\"onApprove()\">\n            Approve expense\n          </sky-summary-action-bar-primary-action>\n          <sky-summary-action-bar-secondary-actions>\n            <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\n              Deny expense\n            </sky-summary-action-bar-secondary-action>\n          </sky-summary-action-bar-secondary-actions>\n        </sky-summary-action-bar-actions>\n      </sky-summary-action-bar>\n    </sky-split-view-workspace-footer>\n  </sky-split-view-workspace>\n</sky-split-view>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SplitViewBasicExampleComponent, isStandalone: true, selector: "app-split-view-basic-example", ngImport: i0, template: "<sky-split-view [messageStream]=\"splitViewStream\">\n  <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\">\n    <sky-repeater [activeIndex]=\"activeIndex\">\n      @for (item of items; track item; let i = $index) {\n        <sky-repeater-item\n          (click)=\"onItemClick(i)\"\n          (keyup.enter)=\"onItemClick(i)\"\n        >\n          <sky-repeater-item-content>\n            {{ item.amount }} <br />\n            {{ item.date }} <br />\n            {{ item.vendor }}\n          </sky-repeater-item-content>\n        </sky-repeater-item>\n      }\n    </sky-repeater>\n  </sky-split-view-drawer>\n\n  <sky-split-view-workspace ariaLabel=\"Transaction form\">\n    <sky-split-view-workspace-content class=\"sky-padding-even-xl\">\n      <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n        <sky-description-list labelWidth=\"150px\">\n          <sky-description-list-content>\n            <sky-description-list-term>\n              Receipt amount\n            </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.amount }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term> Date </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.date }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term> Vendor </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.vendor }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term>\n              Receipt image\n            </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.receiptImage }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n        </sky-description-list>\n        <sky-input-box labelText=\"Approved amount\" stacked=\"true\">\n          <input formControlName=\"approvedAmount\" type=\"text\" />\n        </sky-input-box>\n        <sky-input-box labelText=\"Comments\">\n          <textarea formControlName=\"comments\"></textarea>\n        </sky-input-box>\n      </form>\n    </sky-split-view-workspace-content>\n    <sky-split-view-workspace-footer>\n      <sky-summary-action-bar>\n        <sky-summary-action-bar-actions>\n          <sky-summary-action-bar-primary-action (actionClick)=\"onApprove()\">\n            Approve expense\n          </sky-summary-action-bar-primary-action>\n          <sky-summary-action-bar-secondary-actions>\n            <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\n              Deny expense\n            </sky-summary-action-bar-secondary-action>\n          </sky-summary-action-bar-secondary-actions>\n        </sky-summary-action-bar-actions>\n      </sky-summary-action-bar>\n    </sky-split-view-workspace-footer>\n  </sky-split-view-workspace>\n</sky-split-view>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ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: SplitViewBasicExampleComponent, decorators: [{
             type: Component,
@@ -13922,7 +14040,7 @@ class SplitViewPageBoundExampleComponent {
         this.splitViewStream.next(message);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SplitViewPageBoundExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SplitViewPageBoundExampleComponent, isStandalone: true, selector: "app-split-view-page-bound-example", ngImport: i0, template: "<sky-page layout=\"fit\">\n  <div class=\"page-flex\">\n    <div class=\"page-flex-header\">\n      <sky-page-summary>\n        @if (unapprovedTransaction) {\n          <sky-page-summary-alert>\n            <sky-alert alertType=\"info\"\n              >There is an unapproved transaction.</sky-alert\n            >\n          </sky-page-summary-alert>\n        }\n        <sky-page-summary-title> SKY Developers, LLC </sky-page-summary-title>\n        <sky-page-summary-subtitle>\n          Petty Cash Transactions\n        </sky-page-summary-subtitle>\n        <sky-page-summary-content>\n          The transactions below cover various operating expenses which do not\n          fall under one of the budgets areas of expenditures.\n        </sky-page-summary-content>\n      </sky-page-summary>\n    </div>\n    <div class=\"page-flex-main\">\n      <sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n        <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\">\n          <sky-repeater [activeIndex]=\"activeIndex\">\n            @for (item of items; track item; let i = $index) {\n              <sky-repeater-item\n                (click)=\"onItemClick(i)\"\n                (keyup.enter)=\"onItemClick(i)\"\n              >\n                <sky-repeater-item-content>\n                  {{ item.amount }} <br />\n                  {{ item.date }} <br />\n                  {{ item.vendor }}\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-split-view-drawer>\n\n        <sky-split-view-workspace [ariaLabel]=\"'Transaction form'\">\n          <sky-split-view-workspace-content class=\"sky-padding-even-xl\">\n            <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n              <sky-description-list labelWidth=\"150px\">\n                <sky-description-list-content>\n                  <sky-description-list-term>\n                    Receipt amount\n                  </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.amount }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n                <sky-description-list-content>\n                  <sky-description-list-term> Date </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.date }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n                <sky-description-list-content>\n                  <sky-description-list-term>\n                    Vendor\n                  </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.vendor }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n                <sky-description-list-content>\n                  <sky-description-list-term>\n                    Receipt image\n                  </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.receiptImage }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n              </sky-description-list>\n              <sky-input-box labelText=\"Approved amount\" stacked=\"true\">\n                <input formControlName=\"approvedAmount\" type=\"text\" />\n              </sky-input-box>\n              <sky-input-box labelText=\"Comments\">\n                <textarea formControlName=\"comments\"></textarea>\n              </sky-input-box>\n            </form>\n          </sky-split-view-workspace-content>\n          <sky-split-view-workspace-footer>\n            <sky-summary-action-bar>\n              <sky-summary-action-bar-actions>\n                <sky-summary-action-bar-primary-action\n                  (actionClick)=\"onApprove()\"\n                >\n                  Approve expense\n                </sky-summary-action-bar-primary-action>\n                <sky-summary-action-bar-secondary-actions>\n                  <sky-summary-action-bar-secondary-action\n                    (actionClick)=\"onDeny()\"\n                  >\n                    Deny expense\n                  </sky-summary-action-bar-secondary-action>\n                </sky-summary-action-bar-secondary-actions>\n              </sky-summary-action-bar-actions>\n            </sky-summary-action-bar>\n          </sky-split-view-workspace-footer>\n        </sky-split-view-workspace>\n      </sky-split-view>\n    </div>\n  </div>\n</sky-page>\n", styles: [".page-flex{display:flex;flex-direction:column;position:absolute;inset:0}.page-flex-header{flex-grow:0}.page-flex-main{flex-grow:1;overflow:auto;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$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: SkyPageModule }, { kind: "component", type: i1$d.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "ngmodule", type: SkyPageSummaryModule }, { kind: "component", type: i1$5.λ28, selector: "sky-page-summary-alert" }, { kind: "component", type: i1$5.λ27, selector: "sky-page-summary" }, { kind: "component", type: i1$5.λ29, selector: "sky-page-summary-content" }, { kind: "component", type: i1$5.λ33, selector: "sky-page-summary-subtitle" }, { kind: "component", type: i1$5.λ34, selector: "sky-page-summary-title" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SplitViewPageBoundExampleComponent, isStandalone: true, selector: "app-split-view-page-bound-example", ngImport: i0, template: "<sky-page layout=\"fit\">\n  <div class=\"page-flex\">\n    <div class=\"page-flex-header\">\n      <sky-page-summary>\n        @if (unapprovedTransaction) {\n          <sky-page-summary-alert>\n            <sky-alert alertType=\"info\"\n              >There is an unapproved transaction.</sky-alert\n            >\n          </sky-page-summary-alert>\n        }\n        <sky-page-summary-title> SKY Developers, LLC </sky-page-summary-title>\n        <sky-page-summary-subtitle>\n          Petty Cash Transactions\n        </sky-page-summary-subtitle>\n        <sky-page-summary-content>\n          The transactions below cover various operating expenses which do not\n          fall under one of the budgets areas of expenditures.\n        </sky-page-summary-content>\n      </sky-page-summary>\n    </div>\n    <div class=\"page-flex-main\">\n      <sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n        <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\">\n          <sky-repeater [activeIndex]=\"activeIndex\">\n            @for (item of items; track item; let i = $index) {\n              <sky-repeater-item\n                (click)=\"onItemClick(i)\"\n                (keyup.enter)=\"onItemClick(i)\"\n              >\n                <sky-repeater-item-content>\n                  {{ item.amount }} <br />\n                  {{ item.date }} <br />\n                  {{ item.vendor }}\n                </sky-repeater-item-content>\n              </sky-repeater-item>\n            }\n          </sky-repeater>\n        </sky-split-view-drawer>\n\n        <sky-split-view-workspace [ariaLabel]=\"'Transaction form'\">\n          <sky-split-view-workspace-content class=\"sky-padding-even-xl\">\n            <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n              <sky-description-list labelWidth=\"150px\">\n                <sky-description-list-content>\n                  <sky-description-list-term>\n                    Receipt amount\n                  </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.amount }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n                <sky-description-list-content>\n                  <sky-description-list-term> Date </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.date }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n                <sky-description-list-content>\n                  <sky-description-list-term>\n                    Vendor\n                  </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.vendor }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n                <sky-description-list-content>\n                  <sky-description-list-term>\n                    Receipt image\n                  </sky-description-list-term>\n                  <sky-description-list-description>\n                    {{ activeRecord.receiptImage }}\n                  </sky-description-list-description>\n                </sky-description-list-content>\n              </sky-description-list>\n              <sky-input-box labelText=\"Approved amount\" stacked=\"true\">\n                <input formControlName=\"approvedAmount\" type=\"text\" />\n              </sky-input-box>\n              <sky-input-box labelText=\"Comments\">\n                <textarea formControlName=\"comments\"></textarea>\n              </sky-input-box>\n            </form>\n          </sky-split-view-workspace-content>\n          <sky-split-view-workspace-footer>\n            <sky-summary-action-bar>\n              <sky-summary-action-bar-actions>\n                <sky-summary-action-bar-primary-action\n                  (actionClick)=\"onApprove()\"\n                >\n                  Approve expense\n                </sky-summary-action-bar-primary-action>\n                <sky-summary-action-bar-secondary-actions>\n                  <sky-summary-action-bar-secondary-action\n                    (actionClick)=\"onDeny()\"\n                  >\n                    Deny expense\n                  </sky-summary-action-bar-secondary-action>\n                </sky-summary-action-bar-secondary-actions>\n              </sky-summary-action-bar-actions>\n            </sky-summary-action-bar>\n          </sky-split-view-workspace-footer>\n        </sky-split-view-workspace>\n      </sky-split-view>\n    </div>\n  </div>\n</sky-page>\n", styles: [".page-flex{display:flex;flex-direction:column;position:absolute;inset:0}.page-flex-header{flex-grow:0}.page-flex-main{flex-grow:1;overflow:auto;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$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: SkyPageModule }, { kind: "component", type: i1$d.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "ngmodule", type: SkyPageSummaryModule }, { kind: "component", type: i1$5.λ28, selector: "sky-page-summary-alert" }, { kind: "component", type: i1$5.λ27, selector: "sky-page-summary" }, { kind: "component", type: i1$5.λ29, selector: "sky-page-summary-content" }, { kind: "component", type: i1$5.λ33, selector: "sky-page-summary-subtitle" }, { kind: "component", type: i1$5.λ34, selector: "sky-page-summary-title" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$5.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$5.λ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$5.λ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: SplitViewPageBoundExampleComponent, decorators: [{
             type: Component,
@@ -14046,7 +14164,7 @@ let ModalComponent$1 = class ModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"'Sectioned form \u2014 Index: ' + activeIndexDisplay\">\n  <sky-modal-content>\n    <sky-sectioned-form\n      data-sky-id=\"modal-sectioned-form\"\n      [messageStream]=\"sectionedFormController\"\n      (indexChanged)=\"onIndexChanged($event)\"\n      (tabsVisibleChanged)=\"onTabsVisibleChanged($event)\"\n    >\n      <sky-sectioned-form-section heading=\"Basic information\">\n        <app-information-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section\n        heading=\"Addresses\"\n        [itemCount]=\"2\"\n        [active]=\"activeTab\"\n      >\n        <app-address-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n        <app-phone-form />\n      </sky-sectioned-form-section>\n    </sky-sectioned-form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    @if (tabsHidden) {\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"showTabs()\"\n      >\n        <sky-icon iconName=\"chevron-left\" />\n        Show sections\n      </button>\n    }\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"modalInstance.save()\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"modalInstance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "component", type: AddressFormComponent, selector: "app-address-form" }, { kind: "component", type: InformationFormComponent, selector: "app-information-form" }, { kind: "component", type: PhoneFormComponent, selector: "app-phone-form" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySectionedFormModule }, { kind: "component", type: i1$2.SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: ["maintainSectionContent", "messageStream"], outputs: ["indexChanged", "tabsVisibleChanged"] }, { kind: "component", type: i1$2.λ5, selector: "sky-sectioned-form-section", inputs: ["heading", "itemCount", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"'Sectioned form \u2014 Index: ' + activeIndexDisplay\">\n  <sky-modal-content>\n    <sky-sectioned-form\n      data-sky-id=\"modal-sectioned-form\"\n      [messageStream]=\"sectionedFormController\"\n      (indexChanged)=\"onIndexChanged($event)\"\n      (tabsVisibleChanged)=\"onTabsVisibleChanged($event)\"\n    >\n      <sky-sectioned-form-section heading=\"Basic information\">\n        <app-information-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section\n        heading=\"Addresses\"\n        [itemCount]=\"2\"\n        [active]=\"activeTab\"\n      >\n        <app-address-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n        <app-phone-form />\n      </sky-sectioned-form-section>\n    </sky-sectioned-form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    @if (tabsHidden) {\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"showTabs()\"\n      >\n        <sky-icon iconName=\"chevron-left\" />\n        Show sections\n      </button>\n    }\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"modalInstance.save()\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"modalInstance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "component", type: AddressFormComponent, selector: "app-address-form" }, { kind: "component", type: InformationFormComponent, selector: "app-information-form" }, { kind: "component", type: PhoneFormComponent, selector: "app-phone-form" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySectionedFormModule }, { kind: "component", type: i1$2.SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: ["maintainSectionContent", "messageStream"], outputs: ["indexChanged", "tabsVisibleChanged"] }, { kind: "component", type: i1$2.λ5, selector: "sky-sectioned-form-section", inputs: ["heading", "itemCount", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModalComponent$1, decorators: [{
             type: Component,
@@ -14347,7 +14465,7 @@ class ModalComponent {
         this.isSaveDisabled = !this.formGroup?.get('termsAccepted')?.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSave()\">\n  <sky-modal [headingText]=\"title\">\n    <sky-modal-content>\n      <sky-tabset\n        #wizardDemo\n        ariaLabel=\"Sign-up steps\"\n        data-sky-id=\"sign-up-wizard\"\n        tabStyle=\"wizard\"\n        [(active)]=\"activeIndex\"\n      >\n        <sky-tab tabHeading=\"1. Biographical Details\">\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"First name\" [stacked]=\"true\">\n                  <input type=\"text\" formControlName=\"firstName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Middle name\" [stacked]=\"true\">\n                  <input type=\"text\" formControlName=\"middleName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Last name\">\n                  <input type=\"text\" formControlName=\"lastName\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab\n          tabHeading=\"2. Contact Information\"\n          [disabled]=\"isStep2Disabled\"\n        >\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Phone Number\" [stacked]=\"true\">\n                  <sky-phone-field defaultCountry=\"us\">\n                    <input formControlName=\"phoneNumber\" skyPhoneFieldInput />\n                  </sky-phone-field>\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Email\">\n                  <input type=\"email\" formControlName=\"email\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab tabHeading=\"3. More Information\" [disabled]=\"isStep3Disabled\">\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox\n                  formControlName=\"termsAccepted\"\n                  labelText=\"Accept terms and conditions\"\n                  required\n                />\n              </sky-column>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox\n                  formControlName=\"mailingList\"\n                  labelText=\"Sign up for our email newsletter\"\n                />\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n      </sky-tabset>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <sky-tabset-nav-button buttonType=\"previous\" [tabset]=\"wizardDemo\" />\n      <sky-tabset-nav-button buttonType=\"next\" [tabset]=\"wizardDemo\" />\n      <sky-tabset-nav-button\n        buttonType=\"finish\"\n        [tabset]=\"wizardDemo\"\n        [disabled]=\"isSaveDisabled\"\n      />\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$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: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyPhoneFieldModule }, { kind: "component", type: i3$5.λ1, selector: "sky-phone-field", inputs: ["allowExtensions", "defaultCountry", "returnFormat", "supportedCountryISOs", "selectedCountry"], outputs: ["selectedCountryChange"] }, { kind: "directive", type: i3$5.λ2, selector: "[skyPhoneFieldInput]", inputs: ["disabled", "skyPhoneFieldNoValidate"] }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i1$2.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i1$2.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "component", type: i1$2.λ3, selector: "sky-tabset-nav-button", inputs: ["tabset", "buttonType", "buttonText", "disabled"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSave()\">\n  <sky-modal [headingText]=\"title\">\n    <sky-modal-content>\n      <sky-tabset\n        #wizardDemo\n        ariaLabel=\"Sign-up steps\"\n        data-sky-id=\"sign-up-wizard\"\n        tabStyle=\"wizard\"\n        [(active)]=\"activeIndex\"\n      >\n        <sky-tab tabHeading=\"1. Biographical Details\">\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"First name\" [stacked]=\"true\">\n                  <input type=\"text\" formControlName=\"firstName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Middle name\" [stacked]=\"true\">\n                  <input type=\"text\" formControlName=\"middleName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Last name\">\n                  <input type=\"text\" formControlName=\"lastName\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab\n          tabHeading=\"2. Contact Information\"\n          [disabled]=\"isStep2Disabled\"\n        >\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Phone Number\" [stacked]=\"true\">\n                  <sky-phone-field defaultCountry=\"us\">\n                    <input formControlName=\"phoneNumber\" skyPhoneFieldInput />\n                  </sky-phone-field>\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Email\">\n                  <input type=\"email\" formControlName=\"email\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab tabHeading=\"3. More Information\" [disabled]=\"isStep3Disabled\">\n          <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox\n                  formControlName=\"termsAccepted\"\n                  labelText=\"Accept terms and conditions\"\n                  required\n                />\n              </sky-column>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox\n                  formControlName=\"mailingList\"\n                  labelText=\"Sign up for our email newsletter\"\n                />\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n      </sky-tabset>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <sky-tabset-nav-button buttonType=\"previous\" [tabset]=\"wizardDemo\" />\n      <sky-tabset-nav-button buttonType=\"next\" [tabset]=\"wizardDemo\" />\n      <sky-tabset-nav-button\n        buttonType=\"finish\"\n        [tabset]=\"wizardDemo\"\n        [disabled]=\"isSaveDisabled\"\n      />\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$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: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyPhoneFieldModule }, { kind: "component", type: i3$4.λ1, selector: "sky-phone-field", inputs: ["allowExtensions", "defaultCountry", "returnFormat", "supportedCountryISOs", "selectedCountry"], outputs: ["selectedCountryChange"] }, { kind: "directive", type: i3$4.λ2, selector: "[skyPhoneFieldInput]", inputs: ["disabled", "skyPhoneFieldNoValidate"] }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i1$2.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i1$2.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "component", type: i1$2.λ3, selector: "sky-tabset-nav-button", inputs: ["tabset", "buttonType", "buttonText", "disabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
@@ -14397,7 +14515,7 @@ class TextEditorHelpKeyExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TextEditorHelpKeyExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: TextEditorHelpKeyExampleComponent, isStandalone: true, selector: "app-text-editor-help-key-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-text-editor\n    formControlName=\"myText\"\n    helpKey=\"email-help\"\n    hintText=\"Include details about how to opt out of future email.\"\n    labelText=\"Message\"\n  >\n    @if (myText.errors?.['companyName']) {\n      <sky-form-error\n        errorName=\"companyName\"\n        errorText=\"Message must include company name.\"\n      />\n    }\n  </sky-text-editor>\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: SkyTextEditorModule }, { kind: "component", type: i2$9.λ5, selector: "sky-text-editor", inputs: ["autofocus", "disabled", "fontList", "fontSizeList", "helpPopoverContent", "helpPopoverTitle", "hintText", "id", "initialStyleState", "labelText", "menus", "mergeFields", "placeholder", "stacked", "toolbarActions", "linkWindowOptions", "helpKey"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: TextEditorHelpKeyExampleComponent, isStandalone: true, selector: "app-text-editor-help-key-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-text-editor\n    formControlName=\"myText\"\n    helpKey=\"email-help\"\n    hintText=\"Include details about how to opt out of future email.\"\n    labelText=\"Message\"\n  >\n    @if (myText.errors?.['companyName']) {\n      <sky-form-error\n        errorName=\"companyName\"\n        errorText=\"Message must include company name.\"\n      />\n    }\n  </sky-text-editor>\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: SkyTextEditorModule }, { kind: "component", type: i2$a.λ5, selector: "sky-text-editor", inputs: ["autofocus", "disabled", "fontList", "fontSizeList", "helpPopoverContent", "helpPopoverTitle", "hintText", "id", "initialStyleState", "labelText", "menus", "mergeFields", "placeholder", "stacked", "toolbarActions", "linkWindowOptions", "helpKey"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TextEditorHelpKeyExampleComponent, decorators: [{
             type: Component,
@@ -14412,7 +14530,7 @@ class TextEditorRichTextDisplayExampleComponent {
         this.richText = `<font style="font-size: 18px" face="Arial" color="#a25353"><b>Exclusively committed to your impact</b></font><p>Since day one, Blackbaud has been 100% focused on driving impact for social good organizations.</p><p>We equip change agents with <b>cloud software</b>, <i>services</i>, <u>expertise</u>, and <font color="#a25353">data intelligence</font> designed with unmatched insight and supported with unparalleled commitment. Every day, our <b>customers</b> achieve unmatched impact as they advance their missions.</p><ul><li><a href="#">Build a better world</a></li><li><a href="#">Explore our solutions</a></li></ul>`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TextEditorRichTextDisplayExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TextEditorRichTextDisplayExampleComponent, isStandalone: true, selector: "app-text-editor-rich-text-display-example", ngImport: i0, template: "<sky-rich-text-display [richText]=\"richText\" />\n", dependencies: [{ kind: "ngmodule", type: SkyRichTextDisplayModule }, { kind: "component", type: i2$9.λ1, selector: "sky-rich-text-display", inputs: ["richText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TextEditorRichTextDisplayExampleComponent, isStandalone: true, selector: "app-text-editor-rich-text-display-example", ngImport: i0, template: "<sky-rich-text-display [richText]=\"richText\" />\n", dependencies: [{ kind: "ngmodule", type: SkyRichTextDisplayModule }, { kind: "component", type: i2$a.λ1, selector: "sky-rich-text-display", inputs: ["richText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TextEditorRichTextDisplayExampleComponent, decorators: [{
             type: Component,
@@ -14437,7 +14555,7 @@ class TextEditorExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TextEditorExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: TextEditorExampleComponent, isStandalone: true, selector: "app-text-editor-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-text-editor\n    formControlName=\"myText\"\n    helpPopoverTitle=\"Ensure deliverability\"\n    helpPopoverContent=\"High quality, relevant email content and calls to action drive\n      engagement and avoid being marked as junk mail. For details, see writing\n      for engagement and deliverability.\"\n    hintText=\"Include details about how to opt out of future email.\"\n    labelText=\"Message\"\n  >\n    @if (myText.errors?.['companyName']) {\n      <sky-form-error\n        errorName=\"companyName\"\n        errorText=\"Message must include company name.\"\n      />\n    }\n  </sky-text-editor>\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: SkyTextEditorModule }, { kind: "component", type: i2$9.λ5, selector: "sky-text-editor", inputs: ["autofocus", "disabled", "fontList", "fontSizeList", "helpPopoverContent", "helpPopoverTitle", "hintText", "id", "initialStyleState", "labelText", "menus", "mergeFields", "placeholder", "stacked", "toolbarActions", "linkWindowOptions", "helpKey"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: TextEditorExampleComponent, isStandalone: true, selector: "app-text-editor-example", ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <sky-text-editor\n    formControlName=\"myText\"\n    helpPopoverTitle=\"Ensure deliverability\"\n    helpPopoverContent=\"High quality, relevant email content and calls to action drive\n      engagement and avoid being marked as junk mail. For details, see writing\n      for engagement and deliverability.\"\n    hintText=\"Include details about how to opt out of future email.\"\n    labelText=\"Message\"\n  >\n    @if (myText.errors?.['companyName']) {\n      <sky-form-error\n        errorName=\"companyName\"\n        errorText=\"Message must include company name.\"\n      />\n    }\n  </sky-text-editor>\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: SkyTextEditorModule }, { kind: "component", type: i2$a.λ5, selector: "sky-text-editor", inputs: ["autofocus", "disabled", "fontList", "fontSizeList", "helpPopoverContent", "helpPopoverTitle", "hintText", "id", "initialStyleState", "labelText", "menus", "mergeFields", "placeholder", "stacked", "toolbarActions", "linkWindowOptions", "helpKey"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TextEditorExampleComponent, decorators: [{
             type: Component,
@@ -14625,7 +14743,7 @@ class ValidationEmailValidationDirectiveExampleComponent {
         this.exampleModel = {};
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ValidationEmailValidationDirectiveExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ValidationEmailValidationDirectiveExampleComponent, isStandalone: true, selector: "app-validation-email-validation-directive-example", ngImport: i0, template: "<form novalidate>\n  <div>\n    <sky-input-box stacked=\"true\" labelText=\"Email address\">\n      <input\n        class=\"sky-form-control\"\n        name=\"emailAddress\"\n        skyEmailValidation\n        type=\"text\"\n        [(ngModel)]=\"exampleModel.emailAddress\"\n      />\n    </sky-input-box>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SkyEmailValidationModule }, { kind: "directive", type: i2$a.λ1, selector: "[skyEmailValidation]" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ValidationEmailValidationDirectiveExampleComponent, isStandalone: true, selector: "app-validation-email-validation-directive-example", ngImport: i0, template: "<form novalidate>\n  <div>\n    <sky-input-box stacked=\"true\" labelText=\"Email address\">\n      <input\n        class=\"sky-form-control\"\n        name=\"emailAddress\"\n        skyEmailValidation\n        type=\"text\"\n        [(ngModel)]=\"exampleModel.emailAddress\"\n      />\n    </sky-input-box>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SkyEmailValidationModule }, { kind: "directive", type: i2$b.λ1, selector: "[skyEmailValidation]" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ValidationEmailValidationDirectiveExampleComponent, decorators: [{
             type: Component,
@@ -14673,7 +14791,7 @@ class ValidationUrlValidationDirectiveExampleComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ValidationUrlValidationDirectiveExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ValidationUrlValidationDirectiveExampleComponent, isStandalone: true, selector: "app-validation-url-validation-directive-example", ngImport: i0, template: "<form novalidate>\n  <div>\n    <sky-input-box stacked=\"true\" labelText=\"URL\">\n      <input\n        name=\"url\"\n        [skyUrlValidation]=\"skyUrlValidationOptions\"\n        [(ngModel)]=\"exampleModel.url\"\n      />\n    </sky-input-box>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: 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: SkyUrlValidationModule }, { kind: "directive", type: i2$a.λ2, selector: "[skyUrlValidation]", inputs: ["skyUrlValidation"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ValidationUrlValidationDirectiveExampleComponent, isStandalone: true, selector: "app-validation-url-validation-directive-example", ngImport: i0, template: "<form novalidate>\n  <div>\n    <sky-input-box stacked=\"true\" labelText=\"URL\">\n      <input\n        name=\"url\"\n        [skyUrlValidation]=\"skyUrlValidationOptions\"\n        [(ngModel)]=\"exampleModel.url\"\n      />\n    </sky-input-box>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: 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: SkyUrlValidationModule }, { kind: "directive", type: i2$b.λ2, selector: "[skyUrlValidation]", inputs: ["skyUrlValidation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ValidationUrlValidationDirectiveExampleComponent, decorators: [{
             type: Component,