@skyux/code-examples 12.39.0 → 12.41.0

package/fesm2022/skyux-code-examples.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, inject, ChangeDetectionStrategy, Input, ChangeDetectorRef, ViewChild, Injectable, signal, InjectionToken } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy, Input, ChangeDetectorRef, ViewChild, Injectable, signal, model, InjectionToken } from '@angular/core';
 import * as i2 from '@skyux/action-bars';
 import { SkySummaryActionBarModule } from '@skyux/action-bars';
 import * as i1 from '@skyux/indicators';
@@ -31,7 +31,7 @@ import * as i2$2 from '@skyux/forms';
 import { SkyCheckboxModule, SkyInputBoxModule, SkyCharacterCounterModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileDropModule, SkyRadioModule, SkySelectionBoxModule, SkyToggleSwitchModule, SkyFormErrorModule } from '@skyux/forms';
 import * as i1$6 from '@skyux/help-inline';
 import { SkyHelpInlineModule } from '@skyux/help-inline';
-import * as i1$c from '@angular/router';
+import * as i1$d from '@angular/router';
 import { ActivatedRoute, Router, NavigationEnd, RouterModule } from '@angular/router';
 import * as i2$3 from '@skyux/lists';
 import { SkyPagingModule, SkyRepeaterModule, SkyInfiniteScrollModule, SkyFilterModule, SkySortModule } from '@skyux/lists';
@@ -54,6 +54,8 @@ import * as i3$4 from '@skyux/datetime';
 import { SkyDatePipeModule, SkyDateRangeCalculatorId, SkyDateRangePickerModule, SkyDateRangeService, SkyDateRangeCalculatorType, SkyDatepickerModule, SkyTimepickerModule } from '@skyux/datetime';
 import * as i1$b from '@skyux/errors';
 import { SkyErrorModule, SkyErrorModalService } from '@skyux/errors';
+import * as i1$c from '@skyux/filter-bar';
+import { SkyFilterItemModalInstance, SkyFilterBarModule } from '@skyux/filter-bar';
 import { SkyFlyoutService } from '@skyux/flyout';
 import * as i2$8 from '@skyux/validation';
 import { SkyValidators, SkyEmailValidationModule, SkyUrlValidationModule } from '@skyux/validation';
@@ -61,17 +63,17 @@ import * as i3$5 from '@skyux/inline-form';
 import { SkyInlineFormButtonLayout, SkyInlineFormModule } from '@skyux/inline-form';
 import * as i3$6 from '@skyux/navbar';
 import { SkyNavbarModule } from '@skyux/navbar';
-import * as i1$d from '@skyux/pages';
+import * as i1$e from '@skyux/pages';
 import { SkyActionHubModule, SkyPageModule as SkyPageModule$1 } from '@skyux/pages';
-import * as i1$e from '@skyux/tiles';
+import * as i1$f from '@skyux/tiles';
 import { SkyTilesModule } from '@skyux/tiles';
 import * as i5 from '@skyux/split-view';
 import { SkySplitViewMessageType, SkySplitViewModule } from '@skyux/split-view';
 import * as i3$7 from '@skyux/phone-field';
 import { SkyPhoneFieldModule } from '@skyux/phone-field';
-import * as i1$f from '@skyux/progress-indicator';
+import * as i1$g from '@skyux/progress-indicator';
 import { SkyProgressIndicatorModule, SkyProgressIndicatorMessageType } from '@skyux/progress-indicator';
-import * as i1$g from '@skyux/router';
+import * as i1$h from '@skyux/router';
 import { SkyHrefModule } from '@skyux/router';
 import * as i2$7 from '@skyux/text-editor';
 import { SkyTextEditorModule, SkyRichTextDisplayModule } from '@skyux/text-editor';
@@ -6271,6 +6273,302 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ standalone: true, selector: 'app-errors-error-modal-example', template: "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  (click)=\"openErrorModal()\"\n>\n  Open error modal\n</button>\n" }]
         }] });
 
+class CommunityConnectionFilterModalComponent {
+    constructor() {
+        this.modalInstance = inject(SkyFilterItemModalInstance);
+        this.#context = this.modalInstance.context;
+        this.#formBuilder = inject(FormBuilder);
+        this.headingText = this.#context.filterLabelText;
+        this.items = this.#context.additionalContext.items;
+        this.selectedValue = this.#context.filterValue;
+        this.formGroup = this.#formBuilder.group({
+            selectedOption: this.#formBuilder.control(this.selectedValue?.value),
+        });
+    }
+    #context;
+    #formBuilder;
+    save() {
+        const selectedValue = this.formGroup.get('selectedOption')?.value;
+        if (selectedValue) {
+            // Map the primitive value back to the full object
+            const selectedItem = this.items.find((item) => item.value === selectedValue);
+            this.modalInstance.save({ filterValue: selectedItem });
+        }
+        else {
+            this.modalInstance.save({ filterValue: undefined });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CommunityConnectionFilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CommunityConnectionFilterModalComponent, isStandalone: true, selector: "app-community-connection-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyRepeaterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CommunityConnectionFilterModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-community-connection-filter-modal', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SkyInputBoxModule,
+                        SkyModalModule,
+                        SkyRepeaterModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
+        }] });
+
+class CurrentGradeFilterModalComponent {
+    constructor() {
+        this.modalInstance = inject(SkyFilterItemModalInstance);
+        this.#context = this.modalInstance.context;
+        this.#formBuilder = inject(FormBuilder);
+        this.headingText = this.#context.filterLabelText;
+        this.items = this.#context.additionalContext.items;
+        this.selectedValue = this.#context.filterValue;
+        this.formGroup = this.#formBuilder.group({
+            selectedOption: this.#formBuilder.control(this.selectedValue?.value),
+        });
+    }
+    #context;
+    #formBuilder;
+    save() {
+        const selectedValue = this.formGroup.get('selectedOption')?.value;
+        if (selectedValue) {
+            const selectedItem = this.items.find((item) => item.value === selectedValue);
+            this.modalInstance.save({ filterValue: selectedItem });
+        }
+        else {
+            this.modalInstance.save({ filterValue: undefined });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CurrentGradeFilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CurrentGradeFilterModalComponent, isStandalone: true, selector: "app-current-grade-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyRepeaterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CurrentGradeFilterModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-current-grade-filter-modal', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SkyInputBoxModule,
+                        SkyModalModule,
+                        SkyRepeaterModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
+        }] });
+
+class EnteringGradeFilterModalComponent {
+    constructor() {
+        this.modalInstance = inject(SkyFilterItemModalInstance);
+        this.#context = this.modalInstance.context;
+        this.#formBuilder = inject(FormBuilder);
+        this.headingText = this.#context.filterLabelText;
+        this.items = this.#context.additionalContext.items;
+        this.selectedValue = this.#context.filterValue;
+        this.formGroup = this.#formBuilder.group({
+            selectedOption: this.#formBuilder.control(this.selectedValue?.value),
+        });
+    }
+    #context;
+    #formBuilder;
+    save() {
+        const selectedValue = this.formGroup.get('selectedOption')?.value;
+        if (selectedValue) {
+            const selectedItem = this.items.find((item) => item.value === selectedValue);
+            this.modalInstance.save({ filterValue: selectedItem });
+        }
+        else {
+            this.modalInstance.save({ filterValue: undefined });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EnteringGradeFilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EnteringGradeFilterModalComponent, isStandalone: true, selector: "app-entering-grade-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyRepeaterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EnteringGradeFilterModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-entering-grade-filter-modal', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SkyInputBoxModule,
+                        SkyModalModule,
+                        SkyRepeaterModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
+        }] });
+
+class RoleFilterModalComponent {
+    constructor() {
+        this.modalInstance = inject(SkyFilterItemModalInstance);
+        this.#context = this.modalInstance.context;
+        this.#formBuilder = inject(FormBuilder);
+        this.headingText = this.#context.filterLabelText;
+        this.items = this.#context.additionalContext.items;
+        this.selectedValue = this.#context.filterValue;
+        this.formGroup = this.#formBuilder.group({
+            selectedOption: this.#formBuilder.control(this.selectedValue?.value),
+        });
+    }
+    #context;
+    #formBuilder;
+    save() {
+        const selectedValue = this.formGroup.get('selectedOption')?.value;
+        if (selectedValue) {
+            const selectedItem = this.items.find((item) => item.value === selectedValue);
+            this.modalInstance.save({ filterValue: selectedItem });
+        }
+        else {
+            this.modalInstance.save({ filterValue: undefined });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RoleFilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: RoleFilterModalComponent, isStandalone: true, selector: "app-role-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyRepeaterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RoleFilterModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-role-filter-modal', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SkyInputBoxModule,
+                        SkyModalModule,
+                        SkyRepeaterModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
+        }] });
+
+class StaffAssignedFilterModalComponent {
+    constructor() {
+        this.modalInstance = inject(SkyFilterItemModalInstance);
+        this.#context = this.modalInstance.context;
+        this.#formBuilder = inject(FormBuilder);
+        this.headingText = this.#context.filterLabelText;
+        this.items = this.#context.additionalContext.items;
+        this.selectedValue = this.#context.filterValue;
+        this.formGroup = this.#formBuilder.group({
+            selectedOption: this.#formBuilder.control(this.selectedValue?.value),
+        });
+    }
+    #context;
+    #formBuilder;
+    save() {
+        const selectedValue = this.formGroup.get('selectedOption')?.value;
+        if (selectedValue) {
+            const selectedItem = this.items.find((item) => item.value === selectedValue);
+            this.modalInstance.save({ filterValue: selectedItem });
+        }
+        else {
+            this.modalInstance.save({ filterValue: undefined });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StaffAssignedFilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: StaffAssignedFilterModalComponent, isStandalone: true, selector: "app-staff-assigned-filter-modal", ngImport: i0, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyRepeaterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StaffAssignedFilterModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-staff-assigned-filter-modal', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SkyInputBoxModule,
+                        SkyModalModule,
+                        SkyRepeaterModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"filter-modal-demo-form\" novalidate [formGroup]=\"formGroup\">\n  <sky-modal [headingText]=\"headingText\">\n    <sky-modal-content>\n      <sky-input-box [labelText]=\"headingText\">\n        <select formControlName=\"selectedOption\" class=\"sky-form-control\">\n          <option [value]=\"null\">-- Select an option --</option>\n          @for (item of items; track item.value) {\n            <option [value]=\"item.value\">\n              {{ item.displayValue }}\n            </option>\n          }\n        </select>\n      </sky-input-box>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <button class=\"sky-btn sky-btn-primary\" type=\"button\" (click)=\"save()\">\n        Save\n      </button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"modalInstance.cancel()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n" }]
+        }] });
+
+// eslint-disable @cspell/spellchecker
+const FILTER_SELECTION_VALUES = {
+    'community-connection': [
+        { value: 'child-of-faculty', displayValue: 'Child of faculty' },
+        { value: 'child-of-alum', displayValue: 'Child of alum' },
+        { value: 'grandparent-is-alum', displayValue: 'Grandchild of alum' },
+        { value: 'related-to-trustee', displayValue: 'Related to trustee' },
+        { value: 'sibling-candidate', displayValue: 'Sibling is candidate' },
+        {
+            value: 'sibling-past-candidate',
+            displayValue: 'Sibling is past candidate',
+        },
+        { value: 'sibling-student', displayValue: 'Sibling is student' },
+        { value: 'sibling alum', displayValue: 'Sibling is alum' },
+        {
+            value: 'sibling-incoming',
+            displayValue: 'Sibling is incoming student',
+        },
+    ],
+    'current-grade': [
+        { value: 'pre-k', displayValue: 'Pre-k' },
+        { value: 'kindergarten', displayValue: 'Kindergarten' },
+        { value: 'grade-1', displayValue: '1st grade' },
+        { value: 'grade-2', displayValue: '2nd grade' },
+        { value: 'grade-3', displayValue: '3rd grade' },
+        { value: 'grade-4', displayValue: '4th grade' },
+        { value: 'grade-5', displayValue: '5th grade' },
+        { value: 'grade-6', displayValue: '6th grade' },
+        { value: 'grade-7', displayValue: '7th grade' },
+        { value: 'grade-8', displayValue: '8th grade' },
+        { value: 'grade-9', displayValue: '9th grade' },
+        { value: 'grade-10', displayValue: '10th grade' },
+        { value: 'grade-11', displayValue: '11th grade' },
+        { value: 'grade-12', displayValue: '12th grade' },
+    ],
+    'entering-grade': [
+        { value: 'pre-k', displayValue: 'Pre-k' },
+        { value: 'kindergarten', displayValue: 'Kindergarten' },
+        { value: 'grade-1', displayValue: '1st grade' },
+        { value: 'grade-2', displayValue: '2nd grade' },
+        { value: 'grade-3', displayValue: '3rd grade' },
+        { value: 'grade-4', displayValue: '4th grade' },
+        { value: 'grade-5', displayValue: '5th grade' },
+        { value: 'grade-6', displayValue: '6th grade' },
+        { value: 'grade-7', displayValue: '7th grade' },
+        { value: 'grade-8', displayValue: '8th grade' },
+        { value: 'grade-9', displayValue: '9th grade' },
+        { value: 'grade-10', displayValue: '10th grade' },
+        { value: 'grade-11', displayValue: '11th grade' },
+        { value: 'grade-12', displayValue: '12th grade' },
+    ],
+    role: [
+        { value: 'candidate', displayValue: 'Candidate' },
+        { value: 'incoming-student', displayValue: 'Incoming student' },
+        { value: 'student', displayValue: 'Student' },
+    ],
+    'staff-assigned': [
+        { value: '1', displayValue: 'Solomon Hurley' },
+        { value: '2', displayValue: 'Kanesha Hutto' },
+        { value: '3', displayValue: 'Darcel Lenz' },
+        { value: '4', displayValue: 'Cheyenne Lightfoot' },
+        { value: '5', displayValue: 'Jack Lovett' },
+        { value: '6', displayValue: 'Wonda Lumpkin' },
+        { value: '7', displayValue: 'Kristeen Lunsford' },
+        { value: '8', displayValue: 'Clarice Overton' },
+        { value: '9', displayValue: 'Martine Rocha' },
+        { value: '10', displayValue: 'Tonja Sanderson' },
+        { value: '11', displayValue: 'Molly Seymour' },
+        { value: '12', displayValue: 'Ed Sipes' },
+        { value: '13', displayValue: 'Cristen Sizemore' },
+        { value: '14', displayValue: 'Rod Tomlinson' },
+        { value: '15', displayValue: 'Eliza Vanhorn' },
+        { value: '16', displayValue: 'Jessy Witherspoon' },
+        { value: '17', displayValue: 'Ilene Woo' },
+    ],
+};
+
+/**
+ * @title Filter bar basic example
+ */
+class FilterBarBasicExampleComponent {
+    constructor() {
+        this.appliedFilters = model();
+        this.selectedFilterIds = model([
+            'staff-assigned',
+            'entering-grade',
+            'current-grade',
+        ]);
+        this.communityConnectionModal = CommunityConnectionFilterModalComponent;
+        this.currentGradeModal = CurrentGradeFilterModalComponent;
+        this.enteringGradeModal = EnteringGradeFilterModalComponent;
+        this.roleModal = RoleFilterModalComponent;
+        this.staffAssignedModal = StaffAssignedFilterModalComponent;
+    }
+    onModalOpened(args) {
+        args.data = of({ items: FILTER_SELECTION_VALUES[args.filterId] });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilterBarBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: FilterBarBasicExampleComponent, isStandalone: true, selector: "app-filter-bar-basic-example", inputs: { appliedFilters: { classPropertyName: "appliedFilters", publicName: "appliedFilters", isSignal: true, isRequired: false, transformFunction: null }, selectedFilterIds: { classPropertyName: "selectedFilterIds", publicName: "selectedFilterIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appliedFilters: "appliedFiltersChange", selectedFilterIds: "selectedFilterIdsChange" }, ngImport: i0, template: "<sky-filter-bar\n  [(appliedFilters)]=\"appliedFilters\"\n  [(selectedFilterIds)]=\"selectedFilterIds\"\n>\n  <sky-filter-item-modal\n    filterId=\"community-connection\"\n    labelText=\"Community connection\"\n    modalSize=\"medium\"\n    [modalComponent]=\"communityConnectionModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"current-grade\"\n    labelText=\"Current grade\"\n    modalSize=\"medium\"\n    [modalComponent]=\"currentGradeModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"entering-grade\"\n    labelText=\"Entering grade\"\n    modalSize=\"medium\"\n    [modalComponent]=\"enteringGradeModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"role\"\n    labelText=\"Role\"\n    modalSize=\"medium\"\n    [modalComponent]=\"roleModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"staff-assigned\"\n    labelText=\"Staff assigned\"\n    modalSize=\"medium\"\n    [modalComponent]=\"staffAssignedModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n</sky-filter-bar>\n", dependencies: [{ kind: "ngmodule", type: SkyFilterBarModule }, { kind: "component", type: i1$c.λ1, selector: "sky-filter-bar", inputs: ["appliedFilters", "selectedFilterIds"], outputs: ["appliedFiltersChange", "selectedFilterIdsChange"] }, { kind: "component", type: i1$c.λ2, selector: "sky-filter-item-modal", inputs: ["filterId", "labelText", "modalComponent", "modalSize"], outputs: ["modalOpened"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilterBarBasicExampleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-filter-bar-basic-example', imports: [SkyFilterBarModule], template: "<sky-filter-bar\n  [(appliedFilters)]=\"appliedFilters\"\n  [(selectedFilterIds)]=\"selectedFilterIds\"\n>\n  <sky-filter-item-modal\n    filterId=\"community-connection\"\n    labelText=\"Community connection\"\n    modalSize=\"medium\"\n    [modalComponent]=\"communityConnectionModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"current-grade\"\n    labelText=\"Current grade\"\n    modalSize=\"medium\"\n    [modalComponent]=\"currentGradeModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"entering-grade\"\n    labelText=\"Entering grade\"\n    modalSize=\"medium\"\n    [modalComponent]=\"enteringGradeModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"role\"\n    labelText=\"Role\"\n    modalSize=\"medium\"\n    [modalComponent]=\"roleModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n  <sky-filter-item-modal\n    filterId=\"staff-assigned\"\n    labelText=\"Staff assigned\"\n    modalSize=\"medium\"\n    [modalComponent]=\"staffAssignedModal\"\n    (modalOpened)=\"onModalOpened($event)\"\n  />\n</sky-filter-bar>\n" }]
+        }] });
+
 let FlyoutComponent$1 = class FlyoutComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FlyoutComponent, isStandalone: true, selector: "app-flyout", ngImport: i0, template: `
@@ -11502,7 +11800,7 @@ class NavbarExampleComponent {
         alert(buttonText + ' button clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NavbarExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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$6.λ1, selector: "sky-navbar" }, { kind: "component", type: i3$6.λ2, selector: "sky-navbar-item", inputs: ["active"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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$d.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$d.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$6.λ1, selector: "sky-navbar" }, { kind: "component", type: i3$6.λ2, selector: "sky-navbar-item", inputs: ["active"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NavbarExampleComponent, decorators: [{
             type: Component,
@@ -11736,7 +12034,7 @@ class PagesActionHubExampleComponent {
         this.title = 'Active accounts';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagesActionHubExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: PagesActionHubExampleComponent, isStandalone: true, selector: "app-pages-action-hub-example", ngImport: i0, template: "<sky-action-hub\n  data-sky-id=\"action-hub\"\n  [needsAttention]=\"needsAttention\"\n  [recentLinks]=\"recentLinks\"\n  [relatedLinks]=\"relatedLinks\"\n  [settingsLinks]=\"settingsLinks\"\n  [title]=\"title\"\n>\n  <sky-action-hub-buttons>\n    @for (button of buttons; track button) {\n      <a\n        class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n        [attr.aria-label]=\"button.ariaLabel\"\n        [href]=\"button.permalink.url\"\n      >\n        {{ button.label }}\n      </a>\n    }\n  </sky-action-hub-buttons>\n\n  <sky-action-hub-content>\n    <h2 class=\"sky-font-heading-2\">Additional content</h2>\n    <p>More content can go here as needed for the functional area.</p>\n  </sky-action-hub-content>\n</sky-action-hub>\n", dependencies: [{ kind: "ngmodule", type: SkyActionHubModule }, { kind: "component", type: i1$d.λ2, selector: "sky-action-hub-buttons" }, { kind: "component", type: i1$d.λ1, selector: "sky-action-hub", inputs: ["needsAttention", "parentLink", "recentLinks", "relatedLinks", "settingsLinks", "title"] }, { kind: "component", type: i1$d.λ3, selector: "sky-action-hub-content" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: PagesActionHubExampleComponent, isStandalone: true, selector: "app-pages-action-hub-example", ngImport: i0, template: "<sky-action-hub\n  data-sky-id=\"action-hub\"\n  [needsAttention]=\"needsAttention\"\n  [recentLinks]=\"recentLinks\"\n  [relatedLinks]=\"relatedLinks\"\n  [settingsLinks]=\"settingsLinks\"\n  [title]=\"title\"\n>\n  <sky-action-hub-buttons>\n    @for (button of buttons; track button) {\n      <a\n        class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n        [attr.aria-label]=\"button.ariaLabel\"\n        [href]=\"button.permalink.url\"\n      >\n        {{ button.label }}\n      </a>\n    }\n  </sky-action-hub-buttons>\n\n  <sky-action-hub-content>\n    <h2 class=\"sky-font-heading-2\">Additional content</h2>\n    <p>More content can go here as needed for the functional area.</p>\n  </sky-action-hub-content>\n</sky-action-hub>\n", dependencies: [{ kind: "ngmodule", type: SkyActionHubModule }, { kind: "component", type: i1$e.λ2, selector: "sky-action-hub-buttons" }, { kind: "component", type: i1$e.λ1, selector: "sky-action-hub", inputs: ["needsAttention", "parentLink", "recentLinks", "relatedLinks", "settingsLinks", "title"] }, { kind: "component", type: i1$e.λ3, selector: "sky-action-hub-content" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagesActionHubExampleComponent, decorators: [{
             type: Component,
@@ -11764,7 +12062,7 @@ class TileMyActionsComponent {
         alert(buttonText + ' was clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TileMyActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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$3.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$3.λ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$3.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i2$3.λ12, selector: "sky-repeater-item-title" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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$f.λ5, selector: "sky-tile-content" }, { kind: "component", type: i1$f.λ4, selector: "sky-tile-content-section" }, { kind: "component", type: i1$f.λ1, selector: "sky-tile", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "showSettings", "showHelp", "tileName", "isCollapsed"], outputs: ["settingsClick", "isCollapsedChange", "helpClick"] }, { kind: "component", type: i1$f.λ2, selector: "sky-tile-summary" }, { kind: "component", type: i1$f.λ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$3.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$3.λ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$3.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "component", type: i2$3.λ12, selector: "sky-repeater-item-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TileMyActionsComponent, decorators: [{
             type: Component,
@@ -11773,7 +12071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class TileUpdatesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TileUpdatesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TileUpdatesComponent, isStandalone: true, selector: "app-tile-updates", ngImport: i0, template: "<sky-tile tileName=\"Updates\" [showSettings]=\"false\">\n  <sky-tile-title> Updates </sky-tile-title>\n  <sky-tile-summary> 2 </sky-tile-summary>\n  <sky-tile-content>\n    <sky-tile-content-section>\n      <h3 class=\"sky-font-heading-3 sky-margin-stacked-sm\">\n        <a href=\"#\">Prepare for Giving Tuesday</a>\n      </h3>\n      <div class=\"sky-font-deemphasized sky-margin-stacked-sm\">10/1/2025</div>\n      <div>\n        Tips for creating a clear and compelling message, leveraging social\n        media and email marketing, and providing multiple ways for donors to\n        give.\n      </div>\n    </sky-tile-content-section>\n    <sky-tile-content-section>\n      <h3 class=\"sky-font-heading-3 sky-margin-stacked-sm\">\n        <a href=\"#\">What's new</a>\n      </h3>\n      <div class=\"sky-font-deemphasized sky-margin-stacked-sm\">9/28/2025</div>\n      <ul>\n        <li>Enhancement visualizations in reporting capabilities</li>\n        <li>New automation for routine tasks</li>\n        <li>Scan attachments for viruses</li>\n      </ul>\n    </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TileUpdatesComponent, isStandalone: true, selector: "app-tile-updates", ngImport: i0, template: "<sky-tile tileName=\"Updates\" [showSettings]=\"false\">\n  <sky-tile-title> Updates </sky-tile-title>\n  <sky-tile-summary> 2 </sky-tile-summary>\n  <sky-tile-content>\n    <sky-tile-content-section>\n      <h3 class=\"sky-font-heading-3 sky-margin-stacked-sm\">\n        <a href=\"#\">Prepare for Giving Tuesday</a>\n      </h3>\n      <div class=\"sky-font-deemphasized sky-margin-stacked-sm\">10/1/2025</div>\n      <div>\n        Tips for creating a clear and compelling message, leveraging social\n        media and email marketing, and providing multiple ways for donors to\n        give.\n      </div>\n    </sky-tile-content-section>\n    <sky-tile-content-section>\n      <h3 class=\"sky-font-heading-3 sky-margin-stacked-sm\">\n        <a href=\"#\">What's new</a>\n      </h3>\n      <div class=\"sky-font-deemphasized sky-margin-stacked-sm\">9/28/2025</div>\n      <ul>\n        <li>Enhancement visualizations in reporting capabilities</li>\n        <li>New automation for routine tasks</li>\n        <li>Scan attachments for viruses</li>\n      </ul>\n    </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$f.λ5, selector: "sky-tile-content" }, { kind: "component", type: i1$f.λ4, selector: "sky-tile-content-section" }, { kind: "component", type: i1$f.λ1, selector: "sky-tile", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "showSettings", "showHelp", "tileName", "isCollapsed"], outputs: ["settingsClick", "isCollapsedChange", "helpClick"] }, { kind: "component", type: i1$f.λ2, selector: "sky-tile-summary" }, { kind: "component", type: i1$f.λ3, selector: "sky-tile-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TileUpdatesComponent, decorators: [{
             type: Component,
@@ -11828,7 +12126,7 @@ class HomePageContentComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HomePageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: HomePageContentComponent, isStandalone: true, selector: "app-home-page-content", ngImport: i0, template: "<sky-tile-dashboard [(config)]=\"dashboardConfig\" />\n", dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$e.λ7, selector: "sky-tile-dashboard", inputs: ["config", "messageStream", "settingsKey"], outputs: ["configChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: HomePageContentComponent, isStandalone: true, selector: "app-home-page-content", ngImport: i0, template: "<sky-tile-dashboard [(config)]=\"dashboardConfig\" />\n", dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$f.λ7, selector: "sky-tile-dashboard", inputs: ["config", "messageStream", "settingsKey"], outputs: ["configChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HomePageContentComponent, decorators: [{
             type: Component,
@@ -11855,7 +12153,7 @@ class PagesPageHomePageBlocksLayoutExampleComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagesPageHomePageBlocksLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyPageModule$1 }, { 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: "19.2.14", 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: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyPageModule$1 }, { kind: "component", type: i1$e.λ13, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "component", type: i1$e.λ14, selector: "sky-link-list-item" }, { kind: "component", type: i1$e.λ15, selector: "sky-link-list-recently-accessed", inputs: ["recentLinks"] }, { kind: "component", type: i1$e.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$e.λ9, selector: "sky-page-header-actions" }, { kind: "component", type: i1$e.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$e.λ7, selector: "sky-page-content" }, { kind: "component", type: i1$e.λ12, selector: "sky-page-links" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagesPageHomePageBlocksLayoutExampleComponent, decorators: [{
             type: Component,
@@ -12000,7 +12298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  */
 class PagesPageListPageListLayoutExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagesPageListPageListLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PagesPageListPageListLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-list-page-list-layout-example", ngImport: i0, template: "<sky-page layout=\"list\" helpKey=\"example-help\">\n  <sky-page-header pageTitle=\"Dashboards\" />\n  <sky-page-content>\n    <app-list-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "component", type: ListPageContentComponent$1, selector: "app-list-page-content" }, { kind: "ngmodule", type: SkyPageModule$1 }, { 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PagesPageListPageListLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-list-page-list-layout-example", ngImport: i0, template: "<sky-page layout=\"list\" helpKey=\"example-help\">\n  <sky-page-header pageTitle=\"Dashboards\" />\n  <sky-page-content>\n    <app-list-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "component", type: ListPageContentComponent$1, selector: "app-list-page-content" }, { kind: "ngmodule", type: SkyPageModule$1 }, { kind: "component", type: i1$e.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$e.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$e.λ7, selector: "sky-page-content" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagesPageListPageListLayoutExampleComponent, decorators: [{
             type: Component,
@@ -12195,7 +12493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  */
 class PagesPageListPageTabsLayoutExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagesPageListPageTabsLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PagesPageListPageTabsLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-list-page-tabs-layout-example", ngImport: i0, template: "<sky-page layout=\"tabs\" helpKey=\"example-help\">\n  <sky-page-header pageTitle=\"Contacts\" />\n  <sky-page-content>\n    <app-list-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "component", type: ListPageContentComponent, selector: "app-list-page-content" }, { kind: "ngmodule", type: SkyPageModule$1 }, { 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PagesPageListPageTabsLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-list-page-tabs-layout-example", ngImport: i0, template: "<sky-page layout=\"tabs\" helpKey=\"example-help\">\n  <sky-page-header pageTitle=\"Contacts\" />\n  <sky-page-content>\n    <app-list-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "component", type: ListPageContentComponent, selector: "app-list-page-content" }, { kind: "ngmodule", type: SkyPageModule$1 }, { kind: "component", type: i1$e.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$e.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$e.λ7, selector: "sky-page-content" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagesPageListPageTabsLayoutExampleComponent, decorators: [{
             type: Component,
@@ -12309,7 +12607,7 @@ class PagesPageRecordPageBlocksLayoutExampleComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagesPageRecordPageBlocksLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PagesPageRecordPageBlocksLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-record-page-blocks-layout-example", ngImport: i0, template: "<sky-page layout=\"blocks\" helpKey=\"example-help\">\n  <sky-page-header\n    pageTitle=\"$500 pledge\"\n    [parentLink]=\"{\n      label: 'Pledges',\n      permalink: {\n        route: {\n          commands: ['/']\n        }\n      }\n    }\"\n  />\n  <sky-page-content>\n    <app-record-page-content />\n  </sky-page-content>\n  <sky-page-links>\n    <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n    <sky-link-list headingText=\"Related links\">\n      <sky-link-list-item>\n        <a href=\"#\">Analysis</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <a href=\"#\">Tools</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <button type=\"button\" class=\"sky-btn-link-inline\">Settings</button>\n      </sky-link-list-item>\n    </sky-link-list>\n  </sky-page-links>\n</sky-page>\n", dependencies: [{ kind: "component", type: RecordPageContentComponent$1, selector: "app-record-page-content" }, { kind: "ngmodule", type: SkyPageModule$1 }, { 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.λ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: "19.2.14", type: PagesPageRecordPageBlocksLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-record-page-blocks-layout-example", ngImport: i0, template: "<sky-page layout=\"blocks\" helpKey=\"example-help\">\n  <sky-page-header\n    pageTitle=\"$500 pledge\"\n    [parentLink]=\"{\n      label: 'Pledges',\n      permalink: {\n        route: {\n          commands: ['/']\n        }\n      }\n    }\"\n  />\n  <sky-page-content>\n    <app-record-page-content />\n  </sky-page-content>\n  <sky-page-links>\n    <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n    <sky-link-list headingText=\"Related links\">\n      <sky-link-list-item>\n        <a href=\"#\">Analysis</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <a href=\"#\">Tools</a>\n      </sky-link-list-item>\n      <sky-link-list-item>\n        <button type=\"button\" class=\"sky-btn-link-inline\">Settings</button>\n      </sky-link-list-item>\n    </sky-link-list>\n  </sky-page-links>\n</sky-page>\n", dependencies: [{ kind: "component", type: RecordPageContentComponent$1, selector: "app-record-page-content" }, { kind: "ngmodule", type: SkyPageModule$1 }, { kind: "component", type: i1$e.λ13, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "component", type: i1$e.λ14, selector: "sky-link-list-item" }, { kind: "component", type: i1$e.λ15, selector: "sky-link-list-recently-accessed", inputs: ["recentLinks"] }, { kind: "component", type: i1$e.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$e.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$e.λ7, selector: "sky-page-content" }, { kind: "component", type: i1$e.λ12, selector: "sky-page-links" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagesPageRecordPageBlocksLayoutExampleComponent, decorators: [{
             type: Component,
@@ -12577,7 +12875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  */
 class PagesPageRecordPageTabsLayoutExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagesPageRecordPageTabsLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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$1 }, { 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: "19.2.14", 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$1 }, { kind: "component", type: i1$e.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$e.λ9, selector: "sky-page-header-actions" }, { kind: "component", type: i1$e.λ11, selector: "sky-page-header-alerts" }, { kind: "component", type: i1$e.λ10, selector: "sky-page-header-avatar" }, { kind: "component", type: i1$e.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$e.λ8, selector: "sky-page-header-details" }, { kind: "component", type: i1$e.λ7, selector: "sky-page-content" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagesPageRecordPageTabsLayoutExampleComponent, decorators: [{
             type: Component,
@@ -12776,7 +13074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  */
 class PagesPageSplitViewPageFitLayoutExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagesPageSplitViewPageFitLayoutExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PagesPageSplitViewPageFitLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-split-view-page-fit-layout-example", ngImport: i0, template: "<sky-page layout=\"fit\" helpKey=\"example-help\">\n  <sky-page-header\n    pageTitle=\"Expenses to approve\"\n    [parentLink]=\"{\n      label: 'Expenses',\n      permalink: {\n        route: {\n          commands: ['/']\n        }\n      }\n    }\"\n  >\n    <sky-page-header-alerts>\n      <sky-alert alertType=\"warning\" descriptionType=\"warning\">\n        There are multiple expense approvals due soon.\n      </sky-alert>\n    </sky-page-header-alerts>\n    <sky-page-header-actions>\n      <button class=\"sky-btn sky-btn-default\" type=\"button\">Approve all</button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-split-view-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyPageModule$1 }, { 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.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$d.λ7, selector: "sky-page-content" }, { kind: "component", type: SplitViewPageContentComponent, selector: "app-split-view-page-content" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PagesPageSplitViewPageFitLayoutExampleComponent, isStandalone: true, selector: "app-pages-page-split-view-page-fit-layout-example", ngImport: i0, template: "<sky-page layout=\"fit\" helpKey=\"example-help\">\n  <sky-page-header\n    pageTitle=\"Expenses to approve\"\n    [parentLink]=\"{\n      label: 'Expenses',\n      permalink: {\n        route: {\n          commands: ['/']\n        }\n      }\n    }\"\n  >\n    <sky-page-header-alerts>\n      <sky-alert alertType=\"warning\" descriptionType=\"warning\">\n        There are multiple expense approvals due soon.\n      </sky-alert>\n    </sky-page-header-alerts>\n    <sky-page-header-actions>\n      <button class=\"sky-btn sky-btn-default\" type=\"button\">Approve all</button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-split-view-page-content />\n  </sky-page-content>\n</sky-page>\n", dependencies: [{ kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyPageModule$1 }, { kind: "component", type: i1$e.λ6, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: i1$e.λ9, selector: "sky-page-header-actions" }, { kind: "component", type: i1$e.λ11, selector: "sky-page-header-alerts" }, { kind: "component", type: i1$e.λ4, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i1$e.λ7, selector: "sky-page-content" }, { kind: "component", type: SplitViewPageContentComponent, selector: "app-split-view-page-content" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagesPageSplitViewPageFitLayoutExampleComponent, decorators: [{
             type: Component,
@@ -12883,7 +13181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  */
 class ProgressIndicatorPassiveIndicatorBasicExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProgressIndicatorPassiveIndicatorBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ProgressIndicatorPassiveIndicatorBasicExampleComponent, isStandalone: true, selector: "app-progress-indicator-passive-indicator-basic-example", ngImport: i0, template: "<sky-progress-indicator\n  data-sky-id=\"example-progress-indicator\"\n  [isPassive]=\"true\"\n  [startingIndex]=\"1\"\n>\n  <sky-progress-indicator-item\n    data-sky-id=\"finished-step\"\n    helpPopoverContent=\"Example help content for finished step\"\n    helpPopoverTitle=\"Start here\"\n    title=\"Finished step\"\n    >Optional details about this step\n  </sky-progress-indicator-item>\n  <sky-progress-indicator-item\n    helpPopoverContent=\"Example help content for current step\"\n    title=\"Current step\"\n  />\n  <sky-progress-indicator-item title=\"HIDDEN TITLE\" />\n</sky-progress-indicator>\n", dependencies: [{ kind: "ngmodule", type: SkyProgressIndicatorModule }, { kind: "component", type: i1$f.λ2, selector: "sky-progress-indicator", inputs: ["displayMode", "isPassive", "messageStream", "startingIndex"], outputs: ["progressChanges"] }, { kind: "component", type: i1$f.λ1, selector: "sky-progress-indicator-item", inputs: ["title", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ProgressIndicatorPassiveIndicatorBasicExampleComponent, isStandalone: true, selector: "app-progress-indicator-passive-indicator-basic-example", ngImport: i0, template: "<sky-progress-indicator\n  data-sky-id=\"example-progress-indicator\"\n  [isPassive]=\"true\"\n  [startingIndex]=\"1\"\n>\n  <sky-progress-indicator-item\n    data-sky-id=\"finished-step\"\n    helpPopoverContent=\"Example help content for finished step\"\n    helpPopoverTitle=\"Start here\"\n    title=\"Finished step\"\n    >Optional details about this step\n  </sky-progress-indicator-item>\n  <sky-progress-indicator-item\n    helpPopoverContent=\"Example help content for current step\"\n    title=\"Current step\"\n  />\n  <sky-progress-indicator-item title=\"HIDDEN TITLE\" />\n</sky-progress-indicator>\n", dependencies: [{ kind: "ngmodule", type: SkyProgressIndicatorModule }, { kind: "component", type: i1$g.λ2, selector: "sky-progress-indicator", inputs: ["displayMode", "isPassive", "messageStream", "startingIndex"], outputs: ["progressChanges"] }, { kind: "component", type: i1$g.λ1, selector: "sky-progress-indicator-item", inputs: ["title", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProgressIndicatorPassiveIndicatorBasicExampleComponent, decorators: [{
             type: Component,
@@ -12970,7 +13268,7 @@ class ProgressIndicatorWaterfallIndicatorBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProgressIndicatorWaterfallIndicatorBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ProgressIndicatorWaterfallIndicatorBasicExampleComponent, isStandalone: true, selector: "app-progress-indicator-waterfall-indicator-basic-example", ngImport: i0, template: "<sky-progress-indicator\n  #progressIndicator\n  data-sky-id=\"example-progress-indicator\"\n  [messageStream]=\"progressMessageStream\"\n  [startingIndex]=\"2\"\n  (progressChanges)=\"updateIndex($event)\"\n>\n  <sky-progress-indicator-title>\n    Set up my connection\n  </sky-progress-indicator-title>\n\n  <sky-progress-indicator-item\n    data-sky-id=\"configure-connection\"\n    helpPopoverContent=\"Example help for configure connection\"\n    title=\"Configure connection\"\n  >\n    <div>\n      @if (activeIndex === 0) {\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"configureConnection(true)\"\n        >\n          Set up connection\n        </button>\n      }\n      @if (activeIndex && activeIndex > 0) {\n        <button\n          class=\"sky-btn sky-btn-link\"\n          type=\"button\"\n          (click)=\"configureConnection(false)\"\n        >\n          Edit connection\n        </button>\n      }\n    </div>\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-item\n    helpPopoverContent=\"Example help for select remote server\"\n    helpPopoverTitle=\"Which server is right for me?\"\n    title=\"Select remote server\"\n  >\n    @if (activeIndex && activeIndex >= 1) {\n      <div>\n        @if (activeIndex === 1) {\n          <button\n            class=\"sky-btn sky-btn-primary\"\n            type=\"button\"\n            (click)=\"setServer(true)\"\n          >\n            Select server\n          </button>\n        } @else {\n          <button\n            class=\"sky-btn sky-btn-link\"\n            type=\"button\"\n            (click)=\"setServer(false)\"\n          >\n            Change server\n          </button>\n        }\n      </div>\n    }\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-item\n    data-sky-id=\"test-connection\"\n    title=\"Test connection\"\n  >\n    @if (activeIndex && activeIndex >= 2) {\n      <div>\n        @if (activeIndex === 2) {\n          <button\n            class=\"sky-btn sky-btn-primary\"\n            type=\"button\"\n            (click)=\"testConnection(true)\"\n          >\n            Test connection\n          </button>\n        } @else {\n          <button\n            class=\"sky-btn sky-btn-link\"\n            type=\"button\"\n            (click)=\"testConnection(false)\"\n          >\n            Retest connection\n          </button>\n        }\n      </div>\n    }\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-item title=\"Turn on connection\">\n    @if (activeIndex && activeIndex >= 3) {\n      <div>\n        @if (activeIndex === 3) {\n          <button\n            class=\"sky-btn sky-btn-primary\"\n            type=\"button\"\n            (click)=\"alertMessage('Form completed')\"\n          >\n            Turn on\n          </button>\n        }\n      </div>\n    }\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-reset-button [progressIndicator]=\"progressIndicator\">\n    Erase all settings\n  </sky-progress-indicator-reset-button>\n</sky-progress-indicator>\n", dependencies: [{ kind: "ngmodule", type: SkyProgressIndicatorModule }, { kind: "component", type: i1$f.λ2, selector: "sky-progress-indicator", inputs: ["displayMode", "isPassive", "messageStream", "startingIndex"], outputs: ["progressChanges"] }, { kind: "component", type: i1$f.λ1, selector: "sky-progress-indicator-item", inputs: ["title", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$f.λ4, selector: "sky-progress-indicator-reset-button", inputs: ["disabled", "progressIndicator"], outputs: ["resetClick"] }, { kind: "component", type: i1$f.λ5, selector: "sky-progress-indicator-title" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ProgressIndicatorWaterfallIndicatorBasicExampleComponent, isStandalone: true, selector: "app-progress-indicator-waterfall-indicator-basic-example", ngImport: i0, template: "<sky-progress-indicator\n  #progressIndicator\n  data-sky-id=\"example-progress-indicator\"\n  [messageStream]=\"progressMessageStream\"\n  [startingIndex]=\"2\"\n  (progressChanges)=\"updateIndex($event)\"\n>\n  <sky-progress-indicator-title>\n    Set up my connection\n  </sky-progress-indicator-title>\n\n  <sky-progress-indicator-item\n    data-sky-id=\"configure-connection\"\n    helpPopoverContent=\"Example help for configure connection\"\n    title=\"Configure connection\"\n  >\n    <div>\n      @if (activeIndex === 0) {\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"configureConnection(true)\"\n        >\n          Set up connection\n        </button>\n      }\n      @if (activeIndex && activeIndex > 0) {\n        <button\n          class=\"sky-btn sky-btn-link\"\n          type=\"button\"\n          (click)=\"configureConnection(false)\"\n        >\n          Edit connection\n        </button>\n      }\n    </div>\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-item\n    helpPopoverContent=\"Example help for select remote server\"\n    helpPopoverTitle=\"Which server is right for me?\"\n    title=\"Select remote server\"\n  >\n    @if (activeIndex && activeIndex >= 1) {\n      <div>\n        @if (activeIndex === 1) {\n          <button\n            class=\"sky-btn sky-btn-primary\"\n            type=\"button\"\n            (click)=\"setServer(true)\"\n          >\n            Select server\n          </button>\n        } @else {\n          <button\n            class=\"sky-btn sky-btn-link\"\n            type=\"button\"\n            (click)=\"setServer(false)\"\n          >\n            Change server\n          </button>\n        }\n      </div>\n    }\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-item\n    data-sky-id=\"test-connection\"\n    title=\"Test connection\"\n  >\n    @if (activeIndex && activeIndex >= 2) {\n      <div>\n        @if (activeIndex === 2) {\n          <button\n            class=\"sky-btn sky-btn-primary\"\n            type=\"button\"\n            (click)=\"testConnection(true)\"\n          >\n            Test connection\n          </button>\n        } @else {\n          <button\n            class=\"sky-btn sky-btn-link\"\n            type=\"button\"\n            (click)=\"testConnection(false)\"\n          >\n            Retest connection\n          </button>\n        }\n      </div>\n    }\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-item title=\"Turn on connection\">\n    @if (activeIndex && activeIndex >= 3) {\n      <div>\n        @if (activeIndex === 3) {\n          <button\n            class=\"sky-btn sky-btn-primary\"\n            type=\"button\"\n            (click)=\"alertMessage('Form completed')\"\n          >\n            Turn on\n          </button>\n        }\n      </div>\n    }\n  </sky-progress-indicator-item>\n\n  <sky-progress-indicator-reset-button [progressIndicator]=\"progressIndicator\">\n    Erase all settings\n  </sky-progress-indicator-reset-button>\n</sky-progress-indicator>\n", dependencies: [{ kind: "ngmodule", type: SkyProgressIndicatorModule }, { kind: "component", type: i1$g.λ2, selector: "sky-progress-indicator", inputs: ["displayMode", "isPassive", "messageStream", "startingIndex"], outputs: ["progressChanges"] }, { kind: "component", type: i1$g.λ1, selector: "sky-progress-indicator-item", inputs: ["title", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$g.λ4, selector: "sky-progress-indicator-reset-button", inputs: ["disabled", "progressIndicator"], outputs: ["resetClick"] }, { kind: "component", type: i1$g.λ5, selector: "sky-progress-indicator-title" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProgressIndicatorWaterfallIndicatorBasicExampleComponent, decorators: [{
             type: Component,
@@ -13009,7 +13307,7 @@ let ModalComponent$2 = class ModalComponent {
         this.activeIndex = changes.activeIndex;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"title\">\n  <sky-modal-content>\n    <form [formGroup]=\"formGroup\">\n      <sky-progress-indicator\n        #wizardDemo\n        [displayMode]=\"displayMode\"\n        (progressChanges)=\"updateIndex($event)\"\n      >\n        <sky-progress-indicator-item title=\"First step\">\n          <sky-input-box labelText=\"Enter text to continue\">\n            <input type=\"text\" formControlName=\"requiredValue1\" />\n          </sky-input-box>\n        </sky-progress-indicator-item>\n\n        <sky-progress-indicator-item title=\"Second step\">\n          <div>\n            <sky-checkbox\n              formControlName=\"requiredValue2\"\n              labelText=\"Select to continue\"\n            />\n          </div>\n        </sky-progress-indicator-item>\n\n        <sky-progress-indicator-item title=\"Third step\">\n          <div>Additional content or tasks go here.</div>\n        </sky-progress-indicator-item>\n      </sky-progress-indicator>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <sky-progress-indicator-nav-button\n      buttonType=\"previous\"\n      [progressIndicator]=\"wizardDemo\"\n    />\n    <sky-progress-indicator-nav-button\n      buttonType=\"next\"\n      [disabled]=\"!requirementsMet\"\n      [progressIndicator]=\"wizardDemo\"\n    />\n    <sky-progress-indicator-nav-button\n      buttonType=\"finish\"\n      buttonText=\"Finish\"\n      [progressIndicator]=\"wizardDemo\"\n      (actionClick)=\"onSaveClick($event)\"\n    />\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"onCancelClick()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyProgressIndicatorModule }, { kind: "component", type: i1$f.λ2, selector: "sky-progress-indicator", inputs: ["displayMode", "isPassive", "messageStream", "startingIndex"], outputs: ["progressChanges"] }, { kind: "component", type: i1$f.λ1, selector: "sky-progress-indicator-item", inputs: ["title", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$f.λ3, selector: "sky-progress-indicator-nav-button", inputs: ["buttonText", "buttonType", "disabled", "progressIndicator"], outputs: ["actionClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"title\">\n  <sky-modal-content>\n    <form [formGroup]=\"formGroup\">\n      <sky-progress-indicator\n        #wizardDemo\n        [displayMode]=\"displayMode\"\n        (progressChanges)=\"updateIndex($event)\"\n      >\n        <sky-progress-indicator-item title=\"First step\">\n          <sky-input-box labelText=\"Enter text to continue\">\n            <input type=\"text\" formControlName=\"requiredValue1\" />\n          </sky-input-box>\n        </sky-progress-indicator-item>\n\n        <sky-progress-indicator-item title=\"Second step\">\n          <div>\n            <sky-checkbox\n              formControlName=\"requiredValue2\"\n              labelText=\"Select to continue\"\n            />\n          </div>\n        </sky-progress-indicator-item>\n\n        <sky-progress-indicator-item title=\"Third step\">\n          <div>Additional content or tasks go here.</div>\n        </sky-progress-indicator-item>\n      </sky-progress-indicator>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <sky-progress-indicator-nav-button\n      buttonType=\"previous\"\n      [progressIndicator]=\"wizardDemo\"\n    />\n    <sky-progress-indicator-nav-button\n      buttonType=\"next\"\n      [disabled]=\"!requirementsMet\"\n      [progressIndicator]=\"wizardDemo\"\n    />\n    <sky-progress-indicator-nav-button\n      buttonType=\"finish\"\n      buttonText=\"Finish\"\n      [progressIndicator]=\"wizardDemo\"\n      (actionClick)=\"onSaveClick($event)\"\n    />\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"onCancelClick()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyProgressIndicatorModule }, { kind: "component", type: i1$g.λ2, selector: "sky-progress-indicator", inputs: ["displayMode", "isPassive", "messageStream", "startingIndex"], outputs: ["progressChanges"] }, { kind: "component", type: i1$g.λ1, selector: "sky-progress-indicator-item", inputs: ["title", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$g.λ3, selector: "sky-progress-indicator-nav-button", inputs: ["buttonText", "buttonType", "disabled", "progressIndicator"], outputs: ["actionClick"] }] }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalComponent$2, decorators: [{
             type: Component,
@@ -13043,7 +13341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  */
 class RouterHrefBasicExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RouterHrefBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: RouterHrefBasicExampleComponent, isStandalone: true, selector: "app-router-href-basic-example", ngImport: i0, template: "<p>\n  <span>Link where the user has access:</span>\n  <a skyHref=\"https://example.com\" data-sky-id=\"my-href-1\">Example.com</a>\n</p>\n<p>\n  <span>Link where the user has access, translated:</span>\n  <a skyHref=\"allow://example.com\" data-sky-id=\"my-href-allow\"\n    >Example.com with \u201Callow\u201D protocol</a\n  >\n</p>\n<p>\n  <span>Link where the user does not have access, hidden by default:</span>\n  <a skyHref=\"deny://example.com\" data-sky-id=\"my-href-hidden\"\n    >Example.com with \u201Cdeny\u201D protocol</a\n  >\n</p>\n<p>\n  <span>Link where the user does not have access, shown as plain text:</span>\n  <a\n    skyHref=\"deny://example.com\"\n    skyHrefElse=\"unlink\"\n    data-sky-id=\"my-href-unlinked\"\n    >Example.com with \u201Cdeny\u201D protocol</a\n  >\n</p>\n", styles: [":host{display:block}span{display:inline-block;margin-right:var(--sky-margin-inline-xs)}a[skyhref]:after{display:block;content:\"skyhref=\\201c\" attr(skyhref) \"\\201d  \\279c  href=\\201c\" attr(href) \"\\201d\";font-size:10px;color:var(--sky-text-color-deemphasized);text-decoration:none}\n"], dependencies: [{ kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i1$g.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: RouterHrefBasicExampleComponent, isStandalone: true, selector: "app-router-href-basic-example", ngImport: i0, template: "<p>\n  <span>Link where the user has access:</span>\n  <a skyHref=\"https://example.com\" data-sky-id=\"my-href-1\">Example.com</a>\n</p>\n<p>\n  <span>Link where the user has access, translated:</span>\n  <a skyHref=\"allow://example.com\" data-sky-id=\"my-href-allow\"\n    >Example.com with \u201Callow\u201D protocol</a\n  >\n</p>\n<p>\n  <span>Link where the user does not have access, hidden by default:</span>\n  <a skyHref=\"deny://example.com\" data-sky-id=\"my-href-hidden\"\n    >Example.com with \u201Cdeny\u201D protocol</a\n  >\n</p>\n<p>\n  <span>Link where the user does not have access, shown as plain text:</span>\n  <a\n    skyHref=\"deny://example.com\"\n    skyHrefElse=\"unlink\"\n    data-sky-id=\"my-href-unlinked\"\n    >Example.com with \u201Cdeny\u201D protocol</a\n  >\n</p>\n", styles: [":host{display:block}span{display:inline-block;margin-right:var(--sky-margin-inline-xs)}a[skyhref]:after{display:block;content:\"skyhref=\\201c\" attr(skyhref) \"\\201d  \\279c  href=\\201c\" attr(href) \"\\201d\";font-size:10px;color:var(--sky-text-color-deemphasized);text-decoration:none}\n"], dependencies: [{ kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i1$h.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RouterHrefBasicExampleComponent, decorators: [{
             type: Component,
@@ -13849,7 +14147,7 @@ class Tile1Component {
         alert('tile settings clicked');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Tile1Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: Tile1Component, isStandalone: true, selector: "div.tile1", ngImport: i0, template: "<sky-tile\n  data-sky-id=\"tile-1\"\n  helpPopoverContent=\"Sample help information for tile 1.\"\n  helpPopoverTitle=\"Sample help content\"\n  tileName=\"Tile 1\"\n  (settingsClick)=\"tileSettingsClick()\"\n>\n  <sky-tile-title> Tile 1 </sky-tile-title>\n  <sky-tile-summary> $123.4m </sky-tile-summary>\n  <sky-tile-content>\n    <sky-tile-content-section data-sky-id=\"section-1\">\n      Section 1\n    </sky-tile-content-section>\n    <sky-tile-content-section> Section 2 </sky-tile-content-section>\n    <sky-tile-content-section> Section 3 </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: Tile1Component, isStandalone: true, selector: "div.tile1", ngImport: i0, template: "<sky-tile\n  data-sky-id=\"tile-1\"\n  helpPopoverContent=\"Sample help information for tile 1.\"\n  helpPopoverTitle=\"Sample help content\"\n  tileName=\"Tile 1\"\n  (settingsClick)=\"tileSettingsClick()\"\n>\n  <sky-tile-title> Tile 1 </sky-tile-title>\n  <sky-tile-summary> $123.4m </sky-tile-summary>\n  <sky-tile-content>\n    <sky-tile-content-section data-sky-id=\"section-1\">\n      Section 1\n    </sky-tile-content-section>\n    <sky-tile-content-section> Section 2 </sky-tile-content-section>\n    <sky-tile-content-section> Section 3 </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\n", dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$f.λ5, selector: "sky-tile-content" }, { kind: "component", type: i1$f.λ4, selector: "sky-tile-content-section" }, { kind: "component", type: i1$f.λ1, selector: "sky-tile", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "showSettings", "showHelp", "tileName", "isCollapsed"], outputs: ["settingsClick", "isCollapsedChange", "helpClick"] }, { kind: "component", type: i1$f.λ2, selector: "sky-tile-summary" }, { kind: "component", type: i1$f.λ3, selector: "sky-tile-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Tile1Component, decorators: [{
             type: Component,
@@ -13858,7 +14156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class Tile2Component {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Tile2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: Tile2Component, isStandalone: true, selector: "div.tile2", ngImport: i0, template: "<sky-tile helpKey=\"tile-2-help\" tileName=\"Tile 2\" [attr.data-sky-id]=\"'tile-2'\">\n  <sky-tile-title> Tile 2 </sky-tile-title>\n  <sky-tile-content>\n    <sky-tile-content-section> Section 1 </sky-tile-content-section>\n    <sky-tile-content-section> Section 2 </sky-tile-content-section>\n    <sky-tile-content-section> Section 3 </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\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.λ3, selector: "sky-tile-title" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: Tile2Component, isStandalone: true, selector: "div.tile2", ngImport: i0, template: "<sky-tile helpKey=\"tile-2-help\" tileName=\"Tile 2\" [attr.data-sky-id]=\"'tile-2'\">\n  <sky-tile-title> Tile 2 </sky-tile-title>\n  <sky-tile-content>\n    <sky-tile-content-section> Section 1 </sky-tile-content-section>\n    <sky-tile-content-section> Section 2 </sky-tile-content-section>\n    <sky-tile-content-section> Section 3 </sky-tile-content-section>\n  </sky-tile-content>\n</sky-tile>\n", dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$f.λ5, selector: "sky-tile-content" }, { kind: "component", type: i1$f.λ4, selector: "sky-tile-content-section" }, { kind: "component", type: i1$f.λ1, selector: "sky-tile", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "showSettings", "showHelp", "tileName", "isCollapsed"], outputs: ["settingsClick", "isCollapsedChange", "helpClick"] }, { kind: "component", type: i1$f.λ3, selector: "sky-tile-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Tile2Component, decorators: [{
             type: Component,
@@ -13916,7 +14214,7 @@ class TilesBasicExampleComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TilesBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TilesBasicExampleComponent, isStandalone: true, selector: "app-tiles-basic-example", ngImport: i0, template: "<sky-tile-dashboard\n  data-sky-id=\"basic-dashboard\"\n  [(config)]=\"dashboardConfig\"\n/>\n", dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$e.λ7, selector: "sky-tile-dashboard", inputs: ["config", "messageStream", "settingsKey"], outputs: ["configChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TilesBasicExampleComponent, isStandalone: true, selector: "app-tiles-basic-example", ngImport: i0, template: "<sky-tile-dashboard\n  data-sky-id=\"basic-dashboard\"\n  [(config)]=\"dashboardConfig\"\n/>\n", dependencies: [{ kind: "ngmodule", type: SkyTilesModule }, { kind: "component", type: i1$f.λ7, selector: "sky-tile-dashboard", inputs: ["config", "messageStream", "settingsKey"], outputs: ["configChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TilesBasicExampleComponent, decorators: [{
             type: Component,
@@ -14089,5 +14387,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarsSummaryActionBarBasicExampleComponent, ActionBarsSummaryActionBarErrorExampleComponent, ActionBarsSummaryActionBarModalExampleComponent, ActionBarsSummaryActionBarTabExampleComponent, AgGridDataEntryGridBasicExampleComponent, AgGridDataEntryGridDataManagerAddedExampleComponent, AgGridDataEntryGridFocusExampleComponent, AgGridDataEntryGridInlineHelpExampleComponent, AgGridDataGridBasicExampleComponent, AgGridDataGridBasicMultiselectExampleComponent, AgGridDataGridDataManagerExampleComponent, AgGridDataGridDataManagerMultiselectExampleComponent, AgGridDataGridInlineHelpExampleComponent, AgGridDataGridPagingExampleComponent, AgGridDataGridTemplateRefColumnExampleComponent, AgGridDataGridTopScrollExampleComponent, AngularTreeComponentAngularTreeBasicExampleComponent, AngularTreeComponentAngularTreeHelpKeyExampleComponent, AutonumericCurrencyExampleComponent, AutonumericInternationalFormattingExampleComponent, AutonumericOptionsProviderExampleComponent, AutonumericPresetExampleComponent, AvatarExampleComponent, ColorpickerBasicExampleComponent, ColorpickerHelpKeyExampleComponent, ColorpickerProgrammaticExampleComponent, CoreIdExampleComponent, CoreMediaQueryBasicExampleComponent, CoreMediaQueryResponsiveHostExampleComponent, CoreNumericBasicExampleComponent, DataManagerBasicExampleComponent, DatetimeDatePipeBasicExampleComponent, DatetimeDateRangePickerBasicExampleComponent, DatetimeDateRangePickerCustomCalculatorExampleComponent, DatetimeDateRangePickerHelpKeyExampleComponent, DatetimeDatepickerBasicExampleComponent, DatetimeDatepickerCustomDatesExampleComponent, DatetimeDatepickerFuzzyExampleComponent, DatetimeTimepickerBasicExampleComponent, ErrorsErrorEmbeddedExampleComponent, ErrorsErrorModalExampleComponent, FlyoutBasicExampleComponent, FlyoutCustomHeadersExampleComponent, FormsCharacterCountExampleComponent, FormsCheckboxBasicExampleComponent, FormsCheckboxHelpKeyExampleComponent, FormsCheckboxIconGroupExampleComponent, FormsFieldGroupBasicExampleComponent, FormsFieldGroupHelpKeyExampleComponent, FormsFileAttachmentBasicExampleComponent, FormsFileAttachmentHelpKeyExampleComponent, FormsFileDropBasicExampleComponent, FormsFileDropHelpKeyExampleComponent, FormsInputBoxBasicExampleComponent, FormsInputBoxWithCustomFormErrorsExampleComponent, FormsRadioHelpKeyExampleComponent, FormsRadioIconExampleComponent, FormsRadioStandardExampleComponent, FormsSelectionBoxCheckboxExampleComponent, FormsSelectionBoxRadioExampleComponent, FormsToggleSwitchBasicExampleComponent, FormsToggleSwitchHelpKeyExampleComponent, HelpInlineActionClickExampleComponent, HelpInlineHelpKeyExampleComponent, HelpInlinePopoverExampleComponent, IconBasicExampleComponent, IconIconButtonExampleComponent, IndicatorsAlertBasicExampleComponent, IndicatorsIllustrationBasicExampleComponent, IndicatorsKeyInfoBasicExampleComponent, IndicatorsKeyInfoHelpKeyExampleComponent, IndicatorsLabelBasicExampleComponent, IndicatorsStatusIndicatorBasicExampleComponent, IndicatorsStatusIndicatorHelpKeyExampleComponent, IndicatorsTextHighlightBasicExampleComponent, IndicatorsTokensBasicExampleComponent, IndicatorsTokensCustomExampleComponent, IndicatorsWaitElementExampleComponent, IndicatorsWaitPageExampleComponent, InlineFormBasicExampleComponent, InlineFormCustomButtonsExampleComponent, InlineFormRepeatersExampleComponent, LayoutActionButtonBasicExampleComponent, LayoutActionButtonPermalinkExampleComponent, LayoutBackToTopInfiniteScrollExampleComponent, LayoutBackToTopRepeaterExampleComponent, LayoutBoxBasicExampleComponent, LayoutBoxHelpKeyExampleComponent, LayoutCardBasicExampleComponent, LayoutDefinitionListBasicExampleComponent, LayoutDescriptionListHelpKeyExampleComponent, LayoutDescriptionListHorizontalExampleComponent, LayoutDescriptionListInlineHelpExampleComponent, LayoutDescriptionListLongDescriptionExampleComponent, LayoutDescriptionListVerticalExampleComponent, LayoutFluidGridExampleComponent, LayoutFormatExampleComponent, LayoutInlineDeleteCustomExampleComponent, LayoutInlineDeleteRepeaterExampleComponent, LayoutPageLayoutFitExampleComponent, LayoutPageSummaryBasicExampleComponent, LayoutTextExpandInlineExampleComponent, LayoutTextExpandModalExampleComponent, LayoutTextExpandNewlineExampleComponent, LayoutTextExpandRepeaterExampleComponent, LayoutToolbarBasicExampleComponent, LayoutToolbarSectionedExampleComponent, ListsFilterInlineExampleComponent, ListsFilterModalExampleComponent, ListsInfiniteScrollRepeaterExampleComponent, ListsPagingBasicExampleComponent, ListsPagingWithContentExampleComponent, ListsRepeaterAddRemoveExampleComponent, ListsRepeaterBasicExampleComponent, ListsRepeaterInlineFormExampleComponent, ListsSortBasicExampleComponent, LookupAddItemExampleComponent, LookupAutocompleteAdvancedExampleComponent, LookupAutocompleteAnyValueExampleComponent, LookupAutocompleteBasicExampleComponent, LookupAutocompleteCustomSearchExampleComponent, LookupAutocompleteSearchFiltersExampleComponent, LookupCountryFieldBasicExampleComponent, LookupCustomPickerExampleComponent, LookupMultiSelectExampleComponent, LookupResultTemplatesExampleComponent, LookupSearchBasicExampleComponent, LookupSelectionModalAddItemExampleComponent, LookupSelectionModalBasicExampleComponent, LookupSingleSelectExampleComponent, ModalsConfirmBasicWithControllerExampleComponent, ModalsConfirmBasicWithHarnessExampleComponent, ModalsModalBasicWithControllerExampleComponent, ModalsModalBasicWithHarnessExampleComponent, ModalsModalBasicWithHarnessHelpKeyExampleComponent, ModalsModalWithErrorExampleComponent, NavbarExampleComponent, PagesActionHubExampleComponent, PagesPageHomePageBlocksLayoutExampleComponent, PagesPageListPageListLayoutExampleComponent, PagesPageListPageTabsLayoutExampleComponent, PagesPageRecordPageBlocksLayoutExampleComponent, PagesPageRecordPageTabsLayoutExampleComponent, PagesPageSplitViewPageFitLayoutExampleComponent, PhoneFieldBasicExampleComponent, PopoversDropdownBasicExampleComponent, PopoversPopoverBasicExampleComponent, PopoversPopoverProgrammaticExampleComponent, ProgressIndicatorPassiveIndicatorBasicExampleComponent, ProgressIndicatorWaterfallIndicatorBasicExampleComponent, ProgressIndicatorWizardBasicExampleComponent, RouterHrefBasicExampleComponent, SplitViewBasicExampleComponent, SplitViewPageBoundExampleComponent, TabsDynamicAddCloseExampleComponent, TabsDynamicExampleComponent, TabsSectionedFormModalExampleComponent, TabsStaticAddCloseExampleComponent, TabsStaticExampleComponent, TabsVerticalTabsBasicExampleComponent, TabsVerticalTabsGroupedExampleComponent, TabsWizardBasicExampleComponent, TextEditorExampleComponent, TextEditorHelpKeyExampleComponent, TextEditorRichTextDisplayExampleComponent, TilesBasicExampleComponent, ToastBasicExampleComponent, ToastCustomComponentExampleComponent, ValidationEmailValidationControlValidatorExampleComponent, ValidationEmailValidationDirectiveExampleComponent, ValidationUrlValidationControlValidatorExampleComponent, ValidationUrlValidationDirectiveExampleComponent };
+export { ActionBarsSummaryActionBarBasicExampleComponent, ActionBarsSummaryActionBarErrorExampleComponent, ActionBarsSummaryActionBarModalExampleComponent, ActionBarsSummaryActionBarTabExampleComponent, AgGridDataEntryGridBasicExampleComponent, AgGridDataEntryGridDataManagerAddedExampleComponent, AgGridDataEntryGridFocusExampleComponent, AgGridDataEntryGridInlineHelpExampleComponent, AgGridDataGridBasicExampleComponent, AgGridDataGridBasicMultiselectExampleComponent, AgGridDataGridDataManagerExampleComponent, AgGridDataGridDataManagerMultiselectExampleComponent, AgGridDataGridInlineHelpExampleComponent, AgGridDataGridPagingExampleComponent, AgGridDataGridTemplateRefColumnExampleComponent, AgGridDataGridTopScrollExampleComponent, AngularTreeComponentAngularTreeBasicExampleComponent, AngularTreeComponentAngularTreeHelpKeyExampleComponent, AutonumericCurrencyExampleComponent, AutonumericInternationalFormattingExampleComponent, AutonumericOptionsProviderExampleComponent, AutonumericPresetExampleComponent, AvatarExampleComponent, ColorpickerBasicExampleComponent, ColorpickerHelpKeyExampleComponent, ColorpickerProgrammaticExampleComponent, CoreIdExampleComponent, CoreMediaQueryBasicExampleComponent, CoreMediaQueryResponsiveHostExampleComponent, CoreNumericBasicExampleComponent, DataManagerBasicExampleComponent, DatetimeDatePipeBasicExampleComponent, DatetimeDateRangePickerBasicExampleComponent, DatetimeDateRangePickerCustomCalculatorExampleComponent, DatetimeDateRangePickerHelpKeyExampleComponent, DatetimeDatepickerBasicExampleComponent, DatetimeDatepickerCustomDatesExampleComponent, DatetimeDatepickerFuzzyExampleComponent, DatetimeTimepickerBasicExampleComponent, ErrorsErrorEmbeddedExampleComponent, ErrorsErrorModalExampleComponent, FilterBarBasicExampleComponent, FlyoutBasicExampleComponent, FlyoutCustomHeadersExampleComponent, FormsCharacterCountExampleComponent, FormsCheckboxBasicExampleComponent, FormsCheckboxHelpKeyExampleComponent, FormsCheckboxIconGroupExampleComponent, FormsFieldGroupBasicExampleComponent, FormsFieldGroupHelpKeyExampleComponent, FormsFileAttachmentBasicExampleComponent, FormsFileAttachmentHelpKeyExampleComponent, FormsFileDropBasicExampleComponent, FormsFileDropHelpKeyExampleComponent, FormsInputBoxBasicExampleComponent, FormsInputBoxWithCustomFormErrorsExampleComponent, FormsRadioHelpKeyExampleComponent, FormsRadioIconExampleComponent, FormsRadioStandardExampleComponent, FormsSelectionBoxCheckboxExampleComponent, FormsSelectionBoxRadioExampleComponent, FormsToggleSwitchBasicExampleComponent, FormsToggleSwitchHelpKeyExampleComponent, HelpInlineActionClickExampleComponent, HelpInlineHelpKeyExampleComponent, HelpInlinePopoverExampleComponent, IconBasicExampleComponent, IconIconButtonExampleComponent, IndicatorsAlertBasicExampleComponent, IndicatorsIllustrationBasicExampleComponent, IndicatorsKeyInfoBasicExampleComponent, IndicatorsKeyInfoHelpKeyExampleComponent, IndicatorsLabelBasicExampleComponent, IndicatorsStatusIndicatorBasicExampleComponent, IndicatorsStatusIndicatorHelpKeyExampleComponent, IndicatorsTextHighlightBasicExampleComponent, IndicatorsTokensBasicExampleComponent, IndicatorsTokensCustomExampleComponent, IndicatorsWaitElementExampleComponent, IndicatorsWaitPageExampleComponent, InlineFormBasicExampleComponent, InlineFormCustomButtonsExampleComponent, InlineFormRepeatersExampleComponent, LayoutActionButtonBasicExampleComponent, LayoutActionButtonPermalinkExampleComponent, LayoutBackToTopInfiniteScrollExampleComponent, LayoutBackToTopRepeaterExampleComponent, LayoutBoxBasicExampleComponent, LayoutBoxHelpKeyExampleComponent, LayoutCardBasicExampleComponent, LayoutDefinitionListBasicExampleComponent, LayoutDescriptionListHelpKeyExampleComponent, LayoutDescriptionListHorizontalExampleComponent, LayoutDescriptionListInlineHelpExampleComponent, LayoutDescriptionListLongDescriptionExampleComponent, LayoutDescriptionListVerticalExampleComponent, LayoutFluidGridExampleComponent, LayoutFormatExampleComponent, LayoutInlineDeleteCustomExampleComponent, LayoutInlineDeleteRepeaterExampleComponent, LayoutPageLayoutFitExampleComponent, LayoutPageSummaryBasicExampleComponent, LayoutTextExpandInlineExampleComponent, LayoutTextExpandModalExampleComponent, LayoutTextExpandNewlineExampleComponent, LayoutTextExpandRepeaterExampleComponent, LayoutToolbarBasicExampleComponent, LayoutToolbarSectionedExampleComponent, ListsFilterInlineExampleComponent, ListsFilterModalExampleComponent, ListsInfiniteScrollRepeaterExampleComponent, ListsPagingBasicExampleComponent, ListsPagingWithContentExampleComponent, ListsRepeaterAddRemoveExampleComponent, ListsRepeaterBasicExampleComponent, ListsRepeaterInlineFormExampleComponent, ListsSortBasicExampleComponent, LookupAddItemExampleComponent, LookupAutocompleteAdvancedExampleComponent, LookupAutocompleteAnyValueExampleComponent, LookupAutocompleteBasicExampleComponent, LookupAutocompleteCustomSearchExampleComponent, LookupAutocompleteSearchFiltersExampleComponent, LookupCountryFieldBasicExampleComponent, LookupCustomPickerExampleComponent, LookupMultiSelectExampleComponent, LookupResultTemplatesExampleComponent, LookupSearchBasicExampleComponent, LookupSelectionModalAddItemExampleComponent, LookupSelectionModalBasicExampleComponent, LookupSingleSelectExampleComponent, ModalsConfirmBasicWithControllerExampleComponent, ModalsConfirmBasicWithHarnessExampleComponent, ModalsModalBasicWithControllerExampleComponent, ModalsModalBasicWithHarnessExampleComponent, ModalsModalBasicWithHarnessHelpKeyExampleComponent, ModalsModalWithErrorExampleComponent, NavbarExampleComponent, PagesActionHubExampleComponent, PagesPageHomePageBlocksLayoutExampleComponent, PagesPageListPageListLayoutExampleComponent, PagesPageListPageTabsLayoutExampleComponent, PagesPageRecordPageBlocksLayoutExampleComponent, PagesPageRecordPageTabsLayoutExampleComponent, PagesPageSplitViewPageFitLayoutExampleComponent, PhoneFieldBasicExampleComponent, PopoversDropdownBasicExampleComponent, PopoversPopoverBasicExampleComponent, PopoversPopoverProgrammaticExampleComponent, ProgressIndicatorPassiveIndicatorBasicExampleComponent, ProgressIndicatorWaterfallIndicatorBasicExampleComponent, ProgressIndicatorWizardBasicExampleComponent, RouterHrefBasicExampleComponent, SplitViewBasicExampleComponent, SplitViewPageBoundExampleComponent, TabsDynamicAddCloseExampleComponent, TabsDynamicExampleComponent, TabsSectionedFormModalExampleComponent, TabsStaticAddCloseExampleComponent, TabsStaticExampleComponent, TabsVerticalTabsBasicExampleComponent, TabsVerticalTabsGroupedExampleComponent, TabsWizardBasicExampleComponent, TextEditorExampleComponent, TextEditorHelpKeyExampleComponent, TextEditorRichTextDisplayExampleComponent, TilesBasicExampleComponent, ToastBasicExampleComponent, ToastCustomComponentExampleComponent, ValidationEmailValidationControlValidatorExampleComponent, ValidationEmailValidationDirectiveExampleComponent, ValidationUrlValidationControlValidatorExampleComponent, ValidationUrlValidationDirectiveExampleComponent };
 //# sourceMappingURL=skyux-code-examples.mjs.map