@skyux/docs-tools 12.0.0-alpha.0 → 12.0.0-alpha.6

package/fesm2022/skyux-docs-tools.mjs

@@ -1,182 +1,59 @@
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, ContentChildren, NgModule, Optional, VERSION, Injectable, EventEmitter, Output, HostBinding, ElementRef, Pipe, inject, ContentChild } from '@angular/core';
-import * as i3 from '@blackbaud/skyux-lib-media';
-import { SkyImageModule } from '@blackbaud/skyux-lib-media';
-import * as i5 from '@skyux/layout';
-import { SkyFluidGridModule, SkyDescriptionListModule, SkyDefinitionListModule } from '@skyux/layout';
-import * as i4 from '@blackbaud/skyux-lib-code-block';
-import { SkyCodeBlockModule, SkyCodeModule } from '@blackbaud/skyux-lib-code-block';
-import * as i5$1 from '@skyux/icon';
+import { inject, Injectable, NgModule, input, viewChild, computed, Component, ChangeDetectionStrategy, ViewEncapsulation, booleanAttribute, signal } from '@angular/core';
+import { KeyValuePipe, NgComponentOutlet } from '@angular/common';
+import * as i5 from '@skyux/core';
+import { SkyAppWindowRef, SkyIdModule } from '@skyux/core';
+import * as i1 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
-import * as i6 from '@skyux/lists';
-import { SkyRepeaterModule } from '@skyux/lists';
-import * as i7 from '@skyux/tabs';
-import { SkyVerticalTabsetModule, SkyTabsModule } from '@skyux/tabs';
-import * as i8 from '@skyux/i18n';
+import * as i1$1 from '@skyux/layout';
+import { SkyBoxModule } from '@skyux/layout';
+import * as i6 from '@skyux/tabs';
+import { SkyVerticalTabsetModule } from '@skyux/tabs';
+import { DomSanitizer } from '@angular/platform-browser';
+import highlight from 'highlight.js/lib/core';
+import hlJavaScript from 'highlight.js/lib/languages/javascript';
+import hlScss from 'highlight.js/lib/languages/scss';
+import hlTypeScript from 'highlight.js/lib/languages/typescript';
+import hlXml from 'highlight.js/lib/languages/xml';
+import { SkyToastService } from '@skyux/toast';
+import * as i2 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
-import { Subject, ReplaySubject, merge } from 'rxjs';
-import { takeUntil, map, share } from 'rxjs/operators';
-import * as i1$1 from '@skyux/theme';
-import { SkyThemeModule } from '@skyux/theme';
-import * as i2 from '@skyux/core';
-import { VERSION as VERSION$1, SkyMediaBreakpoints } from '@skyux/core';
-import { VERSION as VERSION$2 } from '@skyux/icons';
-import StackBlitzSDK from '@stackblitz/sdk';
-import * as i1$2 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i3$1 from '@skyux/forms';
-import { SkyCheckboxModule, SkyRadioModule } from '@skyux/forms';
-import * as i12 from '@blackbaud/skyux-lib-stache';
-import { StachePageSummaryModule, StacheWrapperModule } from '@blackbaud/skyux-lib-stache';
-import * as i1$3 from '@angular/router';
-import { RouterModule } from '@angular/router';
-import { marked } from 'marked';
-import * as i4$1 from '@blackbaud/skyux-lib-clipboard';
-import { SkyClipboardModule } from '@blackbaud/skyux-lib-clipboard';
-import * as i6$1 from '@skyux/help-inline';
-import { SkyHelpInlineModule } from '@skyux/help-inline';
-import * as i7$1 from '@skyux/popovers';
-import { SkyPopoverModule } from '@skyux/popovers';
-import * as i1$5 from '@skyux/indicators';
-import { SkyStatusIndicatorModule, SkyAlertModule } from '@skyux/indicators';
-import * as i1$4 from '@angular/platform-browser';
-import * as i2$1 from '@skyux/config';
-import * as i1$6 from '@angular/common/http';
-import orderBy from 'lodash.orderby';
-import * as i9 from '@skyux/router';
-import { SkyAppLinkModule } from '@skyux/router';
+import { HttpClient } from '@angular/common/http';
+import { SkyAppAssetsService } from '@skyux/assets';
+import stackblitz from '@stackblitz/sdk';
+import { firstValueFrom } from 'rxjs';
 
-class SkyDocsAnatomyItemComponent {
-    constructor() {
-        this.isOptional = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsAnatomyItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsAnatomyItemComponent, isStandalone: false, selector: "sky-docs-anatomy-item", inputs: { isOptional: "isOptional" }, ngImport: i0, template: "<div\n  class=\"sky-docs-anatomy-item\"\n  [ngClass]=\"{\n    'sky-docs-anatomy-item-optional': isOptional,\n  }\"\n>\n  <div class=\"sky-docs-anatomy-item-marker\">\n    {{ marker }}\n  </div>\n  <div class=\"sky-docs-anatomy-item-description\">\n    <ng-content></ng-content>\n    <span *ngIf=\"isOptional\" class=\"sky-deemphasized\">&nbsp;(optional)</span>\n  </div>\n</div>\n", styles: [".sky-docs-anatomy-item-marker{display:flex;width:22px;height:22px;border-radius:50%;justify-content:center;align-items:center;margin-right:5px;color:#fff;background-color:#4d842d}.sky-docs-anatomy-item{margin-bottom:10px;display:flex;align-items:center}.sky-docs-anatomy-item.sky-docs-anatomy-item-optional .sky-docs-anatomy-item-marker{background-color:#b7da9b;color:#212327}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsAnatomyItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-anatomy-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"sky-docs-anatomy-item\"\n  [ngClass]=\"{\n    'sky-docs-anatomy-item-optional': isOptional,\n  }\"\n>\n  <div class=\"sky-docs-anatomy-item-marker\">\n    {{ marker }}\n  </div>\n  <div class=\"sky-docs-anatomy-item-description\">\n    <ng-content></ng-content>\n    <span *ngIf=\"isOptional\" class=\"sky-deemphasized\">&nbsp;(optional)</span>\n  </div>\n</div>\n", styles: [".sky-docs-anatomy-item-marker{display:flex;width:22px;height:22px;border-radius:50%;justify-content:center;align-items:center;margin-right:5px;color:#fff;background-color:#4d842d}.sky-docs-anatomy-item{margin-bottom:10px;display:flex;align-items:center}.sky-docs-anatomy-item.sky-docs-anatomy-item-optional .sky-docs-anatomy-item-marker{background-color:#b7da9b;color:#212327}\n"] }]
-        }], propDecorators: { isOptional: [{
-                type: Input
-            }] } });
-
-class SkyDocsAnatomyComponent {
-    ngAfterContentInit() {
-        this.anatomyItems.forEach((item, i) => {
-            item.marker = (i + 1).toString();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsAnatomyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsAnatomyComponent, isStandalone: false, selector: "sky-docs-anatomy", inputs: { imagePath: "imagePath" }, queries: [{ propertyName: "anatomyItems", predicate: SkyDocsAnatomyItemComponent }], ngImport: i0, template: "<div class=\"sky-docs-anatomy\">\n  <sky-row>\n    <sky-column\n      class=\"sky-docs-anatomy-items\"\n      screenSmall=\"6\"\n      screenMedium=\"5\"\n      screenLarge=\"4\"\n    >\n      <ng-content select=\"sky-docs-anatomy-item\"></ng-content>\n    </sky-column>\n    <sky-column screenSmall=\"6\" screenMedium=\"7\" screenLarge=\"8\">\n      <sky-image\n        *ngIf=\"imagePath; else thumbnails\"\n        [imageSource]=\"imagePath\"\n      ></sky-image>\n    </sky-column>\n  </sky-row>\n</div>\n\n<ng-template #thumbnails>\n  <ng-content select=\"sky-docs-anatomy-thumbnail\"></ng-content>\n</ng-template>\n", styles: [".sky-docs-anatomy-items{padding-bottom:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i3.λ4, selector: "sky-image", inputs: ["caption", "captionType", "imageAlt", "imageSource", "showBorder", "showCaptionPrefix"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsAnatomyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-anatomy', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-docs-anatomy\">\n  <sky-row>\n    <sky-column\n      class=\"sky-docs-anatomy-items\"\n      screenSmall=\"6\"\n      screenMedium=\"5\"\n      screenLarge=\"4\"\n    >\n      <ng-content select=\"sky-docs-anatomy-item\"></ng-content>\n    </sky-column>\n    <sky-column screenSmall=\"6\" screenMedium=\"7\" screenLarge=\"8\">\n      <sky-image\n        *ngIf=\"imagePath; else thumbnails\"\n        [imageSource]=\"imagePath\"\n      ></sky-image>\n    </sky-column>\n  </sky-row>\n</div>\n\n<ng-template #thumbnails>\n  <ng-content select=\"sky-docs-anatomy-thumbnail\"></ng-content>\n</ng-template>\n", styles: [".sky-docs-anatomy-items{padding-bottom:20px}\n"] }]
-        }], propDecorators: { imagePath: [{
-                type: Input
-            }], anatomyItems: [{
-                type: ContentChildren,
-                args: [SkyDocsAnatomyItemComponent]
-            }] } });
-
-class SkyDocsThumbnailComponent {
-    constructor() {
-        this.showBorder = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsThumbnailComponent, isStandalone: false, selector: "sky-docs-thumbnail", inputs: { caption: "caption", captionType: "captionType", imageAlt: "imageAlt", imageSource: "imageSource", showBorder: "showBorder", videoSource: "videoSource" }, ngImport: i0, template: "<div class=\"sky-docs-thumbnail\">\n  <sky-image\n    *ngIf=\"imageSource\"\n    [caption]=\"caption\"\n    [captionType]=\"captionType\"\n    [imageAlt]=\"imageAlt\"\n    [imageSource]=\"imageSource\"\n    [showBorder]=\"showBorder\"\n    [showCaptionPrefix]=\"false\"\n  ></sky-image>\n  <div\n    *ngIf=\"videoSource\"\n    class=\"sky-docs-video\"\n    [ngClass]=\"{\n      'sky-docs-video-border': showBorder,\n    }\"\n  >\n    <video controls>\n      <source [attr.src]=\"videoSource\" type=\"video/mp4\" />\n    </video>\n  </div>\n</div>\n", styles: [".sky-docs-thumbnail{margin-bottom:50px}.sky-docs-video video{max-width:100%}.sky-docs-video-border video{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.λ4, selector: "sky-image", inputs: ["caption", "captionType", "imageAlt", "imageSource", "showBorder", "showCaptionPrefix"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsThumbnailComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-thumbnail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-docs-thumbnail\">\n  <sky-image\n    *ngIf=\"imageSource\"\n    [caption]=\"caption\"\n    [captionType]=\"captionType\"\n    [imageAlt]=\"imageAlt\"\n    [imageSource]=\"imageSource\"\n    [showBorder]=\"showBorder\"\n    [showCaptionPrefix]=\"false\"\n  ></sky-image>\n  <div\n    *ngIf=\"videoSource\"\n    class=\"sky-docs-video\"\n    [ngClass]=\"{\n      'sky-docs-video-border': showBorder,\n    }\"\n  >\n    <video controls>\n      <source [attr.src]=\"videoSource\" type=\"video/mp4\" />\n    </video>\n  </div>\n</div>\n", styles: [".sky-docs-thumbnail{margin-bottom:50px}.sky-docs-video video{max-width:100%}.sky-docs-video-border video{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4}\n"] }]
-        }], propDecorators: { caption: [{
-                type: Input
-            }], captionType: [{
-                type: Input
-            }], imageAlt: [{
-                type: Input
-            }], imageSource: [{
-                type: Input
-            }], showBorder: [{
-                type: Input
-            }], videoSource: [{
-                type: Input
-            }] } });
-
-class SkyDocsThumbnailModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsThumbnailModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsThumbnailModule, declarations: [SkyDocsThumbnailComponent], imports: [CommonModule, SkyImageModule], exports: [SkyDocsThumbnailComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsThumbnailModule, imports: [CommonModule, SkyImageModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsThumbnailModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, SkyImageModule],
-                    exports: [SkyDocsThumbnailComponent],
-                    declarations: [SkyDocsThumbnailComponent],
-                }]
-        }] });
-
-class SkyDocsAnatomyThumbnailComponent {
-    constructor() {
-        this.showBorder = false;
+/**
+ * @internal
+ */
+const SKY_CODE_SNIPPET_LANGUAGES = ['html', 'js', 'scss', 'ts'];
+/**
+ * @internal
+ */
+function assertCodeSnippetLanguage(value) {
+    if (!SKY_CODE_SNIPPET_LANGUAGES.includes(value)) {
+        throw new Error(`Value "${value}" is not a supported language type.`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsAnatomyThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsAnatomyThumbnailComponent, isStandalone: false, selector: "sky-docs-anatomy-thumbnail", inputs: { caption: "caption", captionType: "captionType", imageAlt: "imageAlt", imageSource: "imageSource", videoSource: "videoSource", showBorder: "showBorder" }, ngImport: i0, template: "<div class=\"sky-docs-anatomy-thumbnail\">\n  <sky-docs-thumbnail\n    [caption]=\"caption\"\n    [captionType]=\"captionType\"\n    [imageAlt]=\"imageAlt\"\n    [imageSource]=\"imageSource\"\n    [videoSource]=\"videoSource\"\n    [showBorder]=\"showBorder\"\n  ></sky-docs-thumbnail>\n</div>\n", styles: [".sky-docs-anatomy-thumbnail{margin-bottom:50px}\n"], dependencies: [{ kind: "component", type: SkyDocsThumbnailComponent, selector: "sky-docs-thumbnail", inputs: ["caption", "captionType", "imageAlt", "imageSource", "showBorder", "videoSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsAnatomyThumbnailComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-anatomy-thumbnail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-docs-anatomy-thumbnail\">\n  <sky-docs-thumbnail\n    [caption]=\"caption\"\n    [captionType]=\"captionType\"\n    [imageAlt]=\"imageAlt\"\n    [imageSource]=\"imageSource\"\n    [videoSource]=\"videoSource\"\n    [showBorder]=\"showBorder\"\n  ></sky-docs-thumbnail>\n</div>\n", styles: [".sky-docs-anatomy-thumbnail{margin-bottom:50px}\n"] }]
-        }], propDecorators: { caption: [{
-                type: Input
-            }], captionType: [{
-                type: Input
-            }], imageAlt: [{
-                type: Input
-            }], imageSource: [{
-                type: Input
-            }], videoSource: [{
-                type: Input
-            }], showBorder: [{
-                type: Input
-            }] } });
 
-class SkyDocsAnatomyModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsAnatomyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsAnatomyModule, declarations: [SkyDocsAnatomyComponent,
-            SkyDocsAnatomyItemComponent,
-            SkyDocsAnatomyThumbnailComponent], imports: [CommonModule,
-            SkyDocsThumbnailModule,
-            SkyFluidGridModule,
-            SkyImageModule], exports: [SkyDocsAnatomyComponent,
-            SkyDocsAnatomyItemComponent,
-            SkyDocsAnatomyThumbnailComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsAnatomyModule, imports: [CommonModule,
-            SkyDocsThumbnailModule,
-            SkyFluidGridModule,
-            SkyImageModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsAnatomyModule, decorators: [{
-            type: NgModule,
+/**
+ * @internal
+ */
+class SkyClipboardService {
+    #toastSvc = inject(SkyToastService);
+    #windowRef = inject(SkyAppWindowRef);
+    copyTextContent(el, successMessage) {
+        const text = el.nativeElement.textContent.trim();
+        this.#windowRef.nativeWindow.navigator.clipboard.writeText(text);
+        this.#toastSvc.openMessage(successMessage, { autoClose: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyClipboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyClipboardService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyClipboardService, decorators: [{
+            type: Injectable,
             args: [{
-                    imports: [
-                        CommonModule,
-                        SkyDocsThumbnailModule,
-                        SkyFluidGridModule,
-                        SkyImageModule,
-                    ],
-                    declarations: [
-                        SkyDocsAnatomyComponent,
-                        SkyDocsAnatomyItemComponent,
-                        SkyDocsAnatomyThumbnailComponent,
-                    ],
-                    exports: [
-                        SkyDocsAnatomyComponent,
-                        SkyDocsAnatomyItemComponent,
-                        SkyDocsAnatomyThumbnailComponent,
-                    ],
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -184,18 +61,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
  * The contents of this file were automatically generated by
- * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-docs-tools' schematic.
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-docs-tools' schematic.
  * To update this file, simply rerun the command.
  */
 const RESOURCES = {
     'EN-US': {
-        'sky-docs-demo-heading': { message: 'Demo' },
-        'sky-docs-demo-toggle-button-on': { message: 'Show options' },
-        'sky-docs-demo-toggle-button-off': { message: 'Hide options' },
-        'sky-docs-code-example-launch-button-label': {
-            message: 'Run in StackBlitz',
+        sky_code_snippet_copy_to_clipboard_button_label: { message: 'Copy' },
+        sky_code_snippet_copy_to_clipboard_success_message: {
+            message: 'Code copied',
         },
-        'sky-docs-demo-control-panel-reset-button-label': { message: 'Reset' },
+        sky_code_example_viewer_demo_hidden_message: {
+            message: 'Open this code example in StackBlitz to view the demo.',
+        },
+        sky_code_example_viewer_demo_stack_blitz_button: {
+            message: 'Edit in StackBlitz',
+        },
+        sky_code_example_viewer_hide_code_button_label: { message: 'Hide code' },
+        sky_code_example_viewer_show_code_button_label: { message: 'Show code' },
     },
 };
 SkyLibResourcesService.addResources(RESOURCES);
@@ -203,3231 +85,458 @@ SkyLibResourcesService.addResources(RESOURCES);
  * Import into any component library module that needs to use resource strings.
  */
 class SkyDocsToolsResourcesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsToolsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsToolsResourcesModule, exports: [SkyI18nModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsToolsResourcesModule, imports: [SkyI18nModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsToolsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsToolsResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsToolsResourcesModule, imports: [SkyI18nModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsToolsResourcesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyDocsToolsResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
                 }]
         }] });
 
-var SkyDocsCodeExampleTheme;
-(function (SkyDocsCodeExampleTheme) {
-    SkyDocsCodeExampleTheme["Default"] = "default";
-    SkyDocsCodeExampleTheme["Modern"] = "modern";
-})(SkyDocsCodeExampleTheme || (SkyDocsCodeExampleTheme = {}));
-
 /**
- * Renders a single code example.
- * @example
- * ```
- * <sky-docs-code-example
- *   heading="My code example"
- *   sourceCodePath="src/app/public/plugin-resources/foobar"
- * >
- * </sky-docs-code-example>
- * ```
+ * @internal
  */
-class SkyDocsCodeExampleComponent {
-    /**
-     * Specifies if the editor service should show the example in modern theme.
-     * The value will be gleaned from `SkyThemeService` first, then fallback to 'default' if the service is not found.
-     */
-    set theme(value) {
-        this._theme = value;
-    }
-    get theme() {
-        return this._theme || SkyDocsCodeExampleTheme.Default;
-    }
-    constructor(themeSvc) {
-        this.ngUnsubscribe = new Subject();
-        // Update theme property with SkyThemeService if it has not been set.
-        if (!this._theme && themeSvc) {
-            themeSvc.settingsChange
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe((change) => {
-                if (change.currentSettings.theme.name === 'modern') {
-                    this.theme = SkyDocsCodeExampleTheme.Modern;
-                }
-                else if (change.currentSettings.theme.name === 'default') {
-                    this.theme = SkyDocsCodeExampleTheme.Default;
-                }
+class SkyCodeSnippetComponent {
+    #clipboardSvc;
+    #sanitizer;
+    constructor() {
+        this.#clipboardSvc = inject(SkyClipboardService);
+        this.#sanitizer = inject(DomSanitizer);
+        this.code = input.required();
+        this.language = input.required();
+        this.codeRef = viewChild('codeRef');
+        this.formatted = computed(() => {
+            const code = this.code();
+            const language = this.language();
+            const formatted = highlight.highlight(code, {
+                language,
             });
-        }
+            return this.#sanitizer.bypassSecurityTrustHtml(formatted.value);
+        });
+        highlight.registerLanguage('html', hlXml);
+        highlight.registerLanguage('js', hlJavaScript);
+        highlight.registerLanguage('scss', hlScss);
+        highlight.registerLanguage('ts', hlTypeScript);
     }
-    ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+    onClipboardButtonClick(copySuccessMessage) {
+        const el = this.codeRef();
+        if (el) {
+            this.#clipboardSvc.copyTextContent(el, copySuccessMessage);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsCodeExampleComponent, deps: [{ token: i1$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsCodeExampleComponent, isStandalone: false, selector: "sky-docs-code-example", inputs: { heading: "heading", sourceCodePath: "sourceCodePath", theme: "theme" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeSnippetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: SkyCodeSnippetComponent, isStandalone: true, selector: "sky-code-snippet", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "codeRef", first: true, predicate: ["codeRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"sky-margin-stacked-lg\">\n  @let copySuccessMessage =\n    'sky_code_snippet_copy_to_clipboard_success_message' | skyLibResources;\n  <button\n    class=\"sky-btn sky-btn-default\"\n    type=\"button\"\n    (click)=\"onClipboardButtonClick(copySuccessMessage)\"\n  >\n    <sky-icon iconName=\"clipboard-multiple\" />\n    {{ 'sky_code_snippet_copy_to_clipboard_button_label' | skyLibResources }}\n  </button>\n</div>\n<pre\n  #codeRef\n  class=\"sky-code-snippet-pre\"\n><code [innerHTML]=\"formatted()\"></code></pre>\n", styles: ["sky-code-snippet{display:block}\n", "sky-code-snippet .sky-code-snippet-pre{font-family:Roboto Mono,serif;margin:0}sky-code-snippet .hljs-attribute,sky-code-snippet .hljs-doctag,sky-code-snippet .hljs-keyword,sky-code-snippet .hljs-literal,sky-code-snippet .hljs-name,sky-code-snippet .hljs-tag .hljs-string,sky-code-snippet .hljs-type,sky-code-snippet .hljs-variable{color:#00f}sky-code-snippet .hljs-string{color:#a31515}sky-code-snippet .hljs-comment{color:green}sky-code-snippet .hljs-tag .hljs-name{color:maroon}sky-code-snippet .hljs-tag .hljs-attr{color:#e50000}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyDocsToolsResourcesModule }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsCodeExampleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeSnippetComponent, decorators: [{
             type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SkyIconModule, SkyDocsToolsResourcesModule], selector: 'sky-code-snippet', template: "<div class=\"sky-margin-stacked-lg\">\n  @let copySuccessMessage =\n    'sky_code_snippet_copy_to_clipboard_success_message' | skyLibResources;\n  <button\n    class=\"sky-btn sky-btn-default\"\n    type=\"button\"\n    (click)=\"onClipboardButtonClick(copySuccessMessage)\"\n  >\n    <sky-icon iconName=\"clipboard-multiple\" />\n    {{ 'sky_code_snippet_copy_to_clipboard_button_label' | skyLibResources }}\n  </button>\n</div>\n<pre\n  #codeRef\n  class=\"sky-code-snippet-pre\"\n><code [innerHTML]=\"formatted()\"></code></pre>\n", styles: ["sky-code-snippet{display:block}\n", "sky-code-snippet .sky-code-snippet-pre{font-family:Roboto Mono,serif;margin:0}sky-code-snippet .hljs-attribute,sky-code-snippet .hljs-doctag,sky-code-snippet .hljs-keyword,sky-code-snippet .hljs-literal,sky-code-snippet .hljs-name,sky-code-snippet .hljs-tag .hljs-string,sky-code-snippet .hljs-type,sky-code-snippet .hljs-variable{color:#00f}sky-code-snippet .hljs-string{color:#a31515}sky-code-snippet .hljs-comment{color:green}sky-code-snippet .hljs-tag .hljs-name{color:maroon}sky-code-snippet .hljs-tag .hljs-attr{color:#e50000}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @internal
+ */
+class SkyCodeSnippetModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeSnippetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeSnippetModule, imports: [SkyCodeSnippetComponent], exports: [SkyCodeSnippetComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeSnippetModule, imports: [SkyCodeSnippetComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeSnippetModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: 'sky-docs-code-example',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: false,
+                    imports: [SkyCodeSnippetComponent],
+                    exports: [SkyCodeSnippetComponent],
                 }]
-        }], ctorParameters: () => [{ type: i1$1.SkyThemeService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { heading: [{
-                type: Input
-            }], sourceCodePath: [{
-                type: Input
-            }], theme: [{
-                type: Input
-            }] } });
+        }] });
 
+/**
+ * Files to be read from the host SPA's "src/assets/stack-blitz" directory.
+ */
+const TEMPLATE_FILES = ['package.json', 'package-lock.json'];
 /**
  * @internal
  */
-class SkyDocsCodeExamplesEditorService {
-    launchEditor(codeExample, template = 'angular-cli') {
-        const project = this.#getPayload(codeExample, template);
-        const openFile = [];
-        if (project.files['src/app/demo.component.html']) {
-            openFile.push('src/app/demo.component.html');
-        }
-        else if (project.files['src/app/demo.component.ts']) {
-            openFile.push('src/app/demo.component.ts');
+class SkyStackBlitzService {
+    #http = inject(HttpClient, { optional: true });
+    #assetsSvc = inject(SkyAppAssetsService, { optional: true });
+    async launch(config) {
+        const files = {};
+        for (const [file, contents] of Object.entries(config.files)) {
+            files[`src/example/${file}`] = contents;
         }
-        const options = {
-            openFile,
-        };
-        StackBlitzSDK.openProject(project, options);
-    }
-    #getPayload(codeExample, template) {
-        const angularVersion = `^${VERSION.major}`;
-        const skyuxVersion = `^${VERSION$1.full}`;
-        const defaultDependencies = {
-            '@angular-devkit/build-angular': angularVersion,
-            '@angular/animations': angularVersion,
-            '@angular/cdk': angularVersion,
-            '@angular/cli': angularVersion,
-            '@angular/common': angularVersion,
-            '@angular/compiler': angularVersion,
-            '@angular/compiler-cli': angularVersion,
-            '@angular/core': angularVersion,
-            '@angular/forms': angularVersion,
-            '@angular/platform-browser': angularVersion,
-            '@angular/platform-browser-dynamic': angularVersion,
-            '@angular/router': angularVersion,
-            '@skyux/animations': skyuxVersion,
-            '@skyux/assets': skyuxVersion,
-            '@skyux/config': skyuxVersion,
-            '@skyux/core': skyuxVersion,
-            '@skyux/errors': skyuxVersion,
-            '@skyux/forms': skyuxVersion,
-            '@skyux/help-inline': skyuxVersion,
-            '@skyux/i18n': skyuxVersion,
-            '@skyux/icon': skyuxVersion,
-            '@skyux/indicators': skyuxVersion,
-            '@skyux/layout': skyuxVersion,
-            '@skyux/modals': skyuxVersion,
-            '@skyux/packages': skyuxVersion,
-            '@skyux/popovers': skyuxVersion,
-            '@skyux/router': skyuxVersion,
-            '@skyux/theme': skyuxVersion,
-            '@types/jasmine': '~5.1.4',
-            'ng2-dragula': '5.1.0',
-            rxjs: '^7',
-            tslib: '^2.8.1',
-            typescript: '~5.6.3',
-            'zone.js': '~0.15.0',
-        };
-        const mergedDependencies = Object.assign({}, defaultDependencies, codeExample.packageDependencies);
-        // Ensure any @skyux dependencies list the correct version of SKY UX.
-        // e.g. `"@skyux/core": "*"` --> `"@skyux/core": "5.0.0"`
-        for (const packageName in mergedDependencies) {
-            /*istanbul ignore else*/
-            if (mergedDependencies.hasOwnProperty(packageName)) {
-                const version = mergedDependencies[packageName];
-                if (version === '*' &&
-                    /^(@blackbaud\/skyux-lib-|@skyux)/.test(packageName)) {
-                    mergedDependencies[packageName] = skyuxVersion;
-                }
+        for (const file of TEMPLATE_FILES) {
+            let contents = await this.#fetchTemplateFileContents(file);
+            if (contents === undefined && !file.endsWith('.template')) {
+                contents = await this.#fetchTemplateFileContents(`${file}.template`);
             }
-        }
-        const overrides = template === 'node'
-            ? {
-                'ng2-dragula@5.1.0': {
-                    '@angular/animations': '>=16.0.0',
-                    '@angular/core': '>=16.0.0',
-                    '@angular/common': '>=16.0.0',
-                },
+            if (contents === undefined) {
+                throw new Error(`Failed to read StackBlitz template file: ${file}`);
             }
-            : undefined;
-        const files = this.parseStackBlitzFiles(codeExample.sourceCode, mergedDependencies, overrides, {
-            target: template === 'node' ? 'ES2022' : 'ES2015',
-        }, codeExample.theme, codeExample.stylesheets);
-        return {
-            files,
-            title: 'SKY UX Demo',
-            description: 'SKY UX Demo',
-            template,
-            dependencies: mergedDependencies,
-            settings: {
-                compile: {
-                    clearConsole: false,
-                },
+            files[file.replace(/\.template$/, '')] = contents;
+        }
+        const bootstrapImportPath = `./example/${config.primaryFile.replace(/\.ts$/, '')}`;
+        files['.stackblitzrc'] = `{
+  "installDependencies": true,
+  "startCommand": "ng serve"
+}
+`;
+        files['angular.json'] = `{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "analytics": false
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "example-app": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/example-app",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": ["src/assets"],
+            "styles": ["src/styles.scss"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["node_modules/"]
             },
-        };
-    }
-    parseStackBlitzFiles(sourceCode, dependencies, overrides, compilerOptions, theme, stylesheets = []) {
-        const srcPath = 'src/';
-        const appPath = `${srcPath}app/`;
-        const banner = `/**
- * This file is needed for the StackBlitz demo only.
- * It is automatically provided when using the Angular CLI.
- **/
- `;
-        const moduleImportStatements = [
-            `import { FormsModule, ReactiveFormsModule } from '@angular/forms';`,
-        ];
-        const moduleImports = ['FormsModule', 'ReactiveFormsModule'];
-        const files = {
-            '.stackblitzrc': JSON.stringify({
-                env: {
-                    NG_BUILD_PARALLEL_TS: '0',
-                    NODE_ENV: 'development',
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
                 },
-            }, undefined, 2),
-        };
-        let appComponentTemplate = '';
-        sourceCode.forEach((file) => {
-            files[`${appPath}${file.fileName}`] = file.rawContents;
-            // Setup module imports and component selectors.
-            if (file.fileName.indexOf('.module.ts') > -1) {
-                const moduleName = this.getModuleName(file.rawContents);
-                const importPath = `./${this.getFilenameNoExtension(file.fileName)}`;
-                const exportedComponent = this.getExportedComponent(file.rawContents);
-                const componentSelector = this.getComponentSelector(exportedComponent, sourceCode);
-                appComponentTemplate += `<${componentSelector}></${componentSelector}>`;
-                moduleImports.push(moduleName);
-                moduleImportStatements.push(`import { ${moduleName} } from '${importPath}';`);
-            }
-            // Standalone entry components are named demo.component.ts.
-            if (file.fileName === 'demo.component.ts') {
-                const componentName = 'DemoComponent';
-                const componentSelector = 'app-demo';
-                const importPath = `./${this.getFilenameNoExtension(file.fileName)}`;
-                appComponentTemplate += `<${componentSelector} />`;
-                moduleImports.push(componentName);
-                moduleImportStatements.push(`import { ${componentName} } from '${importPath}';`);
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "example-app:build:production"
+            },
+            "development": {
+              "buildTarget": "example-app:build:development"
             }
-        });
-        files[`${appPath}app.component.ts`] = `${banner}
-import { Component, Injectable } from '@angular/core';
-import { SkyHelpOpenArgs, SkyHelpService, SkyHelpUpdateArgs } from '@skyux/core';
-${moduleImportStatements.join('\n\n')}
-
-@Injectable()
-/*
-  This mocked \`SkyHelpService\` is needed for Stackbliz demos only.
-  To properly implement help service see: https://docs.blackbaud.com/bb-help-docs/
-*/
-export class StackblitzOnlyCodeExamplesHelpService extends SkyHelpService {
-  public override openHelp(args?: SkyHelpOpenArgs): void {
-    if (args) {
-      console.log('help key: ' + args.helpKey);
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "example-app:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": ["zone.js", "zone.js/testing"],
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "inlineStyleLanguage": "scss",
+            "assets": ["src/assets"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["node_modules/"]
+            },
+            "styles": ["src/styles.scss"],
+            "scripts": []
+          }
+        }
+      }
     }
   }
-
-  public override updateHelp(args: SkyHelpUpdateArgs): void {
-    if ('helpKey' in args) {
-      console.log('help key update: ' + args.helpKey);
-    }
-
-    if ('pageDefaultHelpKey' in args) {
-      console.log('page default help key update: ' + args.pageDefaultHelpKey);
-    }
+}
+`;
+        files['karma.conf.js'] =
+            `// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with \`random: false\`
+        // or set a specific seed with \`seed: 4321\`
+      },
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true, // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/example-app'),
+      subdir: '.',
+      reporters: [{ type: 'html' }, { type: 'text-summary' }],
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true,
+  });
+};
+`;
+        files['tsconfig.app.json'] = `{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
+}
+`;
+        files['tsconfig.json'] = `{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
 }
-
-@Component({
-  selector: 'sky-demo-app',
-  template: '${appComponentTemplate}',
-  imports: [
-    ${moduleImports.join(',\n    ')},
-  ],
-  providers: [
-    {provide: SkyHelpService, useClass: StackblitzOnlyCodeExamplesHelpService}
-  ]
-})
-export class AppComponent {}
 `;
-        files[`${srcPath}index.html`] = `<!doctype html>
+        files['tsconfig.spec.json'] = `{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": ["jasmine"]
+  },
+  "files": ["src/test.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}
+`;
+        files['src/index.html'] = `<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Sky UX Demo</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <!--
-    The CSS links are needed for the StackBlitz demo only.
-    This is a workaround for a known bug that prevents external imports in CSS.
-    https://github.com/stackblitz/core/issues/133
-  -->
-  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
-  <link rel="stylesheet" type="text/css" href="https://sky.blackbaudcdn.net/static/skyux-icons/${VERSION$2.full}/assets/css/skyux-icons.min.css" crossorigin="anonymous">
-</head>
-<body>
-  <sky-demo-app>
-    Loading...
-  </sky-demo-app>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>${config.title}</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!--
+      The CSS links are needed for the StackBlitz demo only.
+      This is a workaround for a known bug that prevents external imports in CSS.
+      https://github.com/stackblitz/core/issues/133
+    -->
+    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="https://sky.blackbaudcdn.net/static/skyux-icons/7.10.0/assets/css/skyux-icons.min.css" crossorigin="anonymous">
+  </head>
+  <body>
+    <${config.componentSelector}></${config.componentSelector}>
+  </body>
 </html>
 `;
-        files[`${srcPath}main.ts`] = `${banner}
-import 'zone.js';
-import '@skyux/packages/polyfills';
-
+        files['src/main.ts'] =
+            `import { provideHttpClient } from '@angular/common/http';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
-import { provideRouter } from '@angular/router';
 import { provideInitialTheme } from '@skyux/theme';
+import { ${config.componentName} } from '${bootstrapImportPath}';
 
-import { AppComponent } from './app/app.component';
-
-void bootstrapApplication(AppComponent, {
+bootstrapApplication(${config.componentName}, {
   providers: [
     provideAnimations(),
-    provideInitialTheme('${theme}'),
-    provideRouter([]),
+    provideInitialTheme('modern'),
+    provideHttpClient()
   ],
-})
-  .catch((err) => console.error(err));
+}).catch((err) => console.error(err));
 `;
-        files[`${srcPath}styles.scss`] = `@import '@skyux/theme/css/sky';
-@import '@skyux/theme/css/themes/modern/styles';
+        files['src/styles.scss'] = `@import url('@skyux/theme/css/sky');
+@import url('@skyux/theme/css/themes/modern/styles');
 
 body {
   background-color: #fff;
   margin: 15px;
 }
 `;
-        stylesheets.push('src/styles.scss');
-        files['angular.json'] = JSON.stringify({
-            $schema: './node_modules/@angular/cli/lib/config/schema.json',
-            version: 1,
-            projects: {
-                demo: {
-                    projectType: 'application',
-                    root: '',
-                    sourceRoot: 'src',
-                    prefix: 'app',
-                    architect: {
-                        build: {
-                            builder: '@angular-devkit/build-angular:application',
-                            options: {
-                                index: 'src/index.html',
-                                browser: 'src/main.ts',
-                                outputPath: 'dist/demo',
-                                tsConfig: 'tsconfig.app.json',
-                                inlineStyleLanguage: 'scss',
-                                styles: stylesheets,
-                            },
-                            configurations: {
-                                development: {
-                                    optimization: false,
-                                    extractLicenses: false,
-                                    sourceMap: true,
-                                },
-                            },
-                            defaultConfiguration: 'development',
-                        },
-                        serve: {
-                            builder: '@angular-devkit/build-angular:dev-server',
-                            configurations: {
-                                development: {
-                                    buildTarget: 'demo:build:development',
-                                },
-                            },
-                            defaultConfiguration: 'development',
-                        },
-                    },
-                },
-            },
-        }, undefined, 2);
-        files['package.json'] = JSON.stringify({
-            name: 'skyux-spa-demo',
-            version: '0.0.0',
-            dependencies,
-            scripts: {
-                start: 'ng serve',
-                build: 'ng build',
-            },
-            ...(overrides ? { overrides } : {}),
-        }, undefined, 2);
-        files['tsconfig.app.json'] = JSON.stringify({
-            extends: './tsconfig.json',
-            compilerOptions: {
-                outDir: './out-tsc/app',
-                types: [],
-            },
-            files: ['src/main.ts'],
-            include: ['src/**/*.d.ts'],
-        }, undefined, 2);
-        files['tsconfig.json'] = JSON.stringify({
-            compileOnSave: false,
-            compilerOptions: {
-                strict: true,
-                forceConsistentCasingInFileNames: true,
-                noImplicitOverride: true,
-                noPropertyAccessFromIndexSignature: true,
-                noImplicitReturns: true,
-                noFallthroughCasesInSwitch: true,
-                sourceMap: true,
-                declaration: false,
-                downlevelIteration: true,
-                esModuleInterop: true,
-                experimentalDecorators: true,
-                moduleResolution: 'node',
-                importHelpers: true,
-                typeRoots: ['node_modules/@types'],
-                target: 'ES2015',
-                module: 'ES2022',
-                useDefineForClassFields: false,
-                lib: ['ES2022', 'dom'],
-                ...compilerOptions,
-            },
-            angularCompilerOptions: {
-                fullTemplateTypeCheck: true,
-                enableI18nLegacyMessageIdFormat: false,
-                strictInjectionParameters: true,
-                strictInputAccessModifiers: true,
-                strictTemplates: true,
-            },
-        }, undefined, 2);
-        return files;
-    }
-    getModuleName(contents) {
-        return contents.split('export class ')[1].split(' {')[0];
-    }
-    getFilenameNoExtension(fileName) {
-        const extension = fileName.split('.').pop();
-        return fileName.replace(`.${extension}`, '');
+        files['src/test.ts'] =
+            `// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/testing';
+import {getTestBed} from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+
+// Then we find all the tests.
+const context = (import.meta as any).webpackContext('./', {
+  recursive: true,
+  regExp: /\\.spec\\.ts$/,
+});
+
+// And load the modules.
+context.keys().map(context);
+`;
+        stackblitz.openProject({
+            title: config.title,
+            files,
+            template: 'node',
+        }, { openFile: config.primaryFile });
     }
-    getExportedComponent(contents) {
-        const trimmed = contents.replace(/\s/g, '');
-        let fragment = trimmed.split('exports:[')[1];
-        if (!fragment) {
-            throw 'You must export a component from the code example module!';
-        }
-        fragment = fragment.split(']')[0];
-        const components = fragment.split(',').filter((x) => x);
-        if (components.length > 1) {
-            throw ('You may only export a single component from the code example module' +
-                `(we found ${components.length}: ${components.join(', ')}).` +
-                'Is it possible to create a new code example with the extra components?');
+    async #fetchTemplateFileContents(file) {
+        const filePath = `assets/stack-blitz/${file}`;
+        const url = this.#assetsSvc?.getUrl(filePath) ?? filePath;
+        if (!this.#http) {
+            return undefined;
         }
-        return components[0];
-    }
-    getComponentSelector(componentClassName, sourceCode) {
-        const found = sourceCode.find((file) => {
-            return file.rawContents.indexOf(`class ${componentClassName}`) > -1;
+        return await firstValueFrom(this.#http.get(url, { responseType: 'text' })).catch(() => {
+            return undefined;
         });
-        const trimmed = found.rawContents.replace(/\s/g, '');
-        return trimmed.split(`selector:'`)[1].split(`'`)[0];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsCodeExamplesEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsCodeExamplesEditorService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsCodeExamplesEditorService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class SkyDocsSourceCodeProvider {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsSourceCodeProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsSourceCodeProvider, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyStackBlitzService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyStackBlitzService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsSourceCodeProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyStackBlitzService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+            args: [{ providedIn: 'root' }]
         }] });
 
-class SkyDocsSourceCodeService {
-    constructor(sourceCodeProvider) {
-        this.sourceCodeProvider = sourceCodeProvider;
-    }
-    getSourceCode(path) {
-        const sourceCode = this.sourceCodeProvider.sourceCode;
-        if (!sourceCode || !sourceCode.length) {
-            return [];
-        }
-        return sourceCode
-            .filter((file) => file.filePath.indexOf(path) === 0)
-            .map((file) => {
-            // TODO: Remove decoding after migrating to Angular CLI. Code examples will not be encoded for SKY UX 5 libraries.
-            // SKY UX 4 libraries will return rawContents encoded, while later libraries will
-            // return rawContents decoded. Check if the contents need decoded before returning them.
-            let decodedContents;
-            try {
-                decodedContents = decodeURIComponent(file.rawContents);
-                if (decodedContents !== file.rawContents) {
-                    file.rawContents = decodedContents;
-                }
-            }
-            catch (error) {
-                // Pre-decoded contents may contain characters like '%' that would throw errors.
-                // In these cases, pass along the original rawContents.
-            }
-            return file;
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsSourceCodeService, deps: [{ token: SkyDocsSourceCodeProvider }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsSourceCodeService, providedIn: 'any' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsSourceCodeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'any',
-                }]
-        }], ctorParameters: () => [{ type: SkyDocsSourceCodeProvider }] });
-
 /**
- * Wraps all code examples and handles their configuration and styles.
- * @example
- * ```
- * <sky-docs-code-examples
- *   [packageDependencies]="{
- *     "foobar": "*",
- *     "baz": "1.2.3"
- *   }"
- * >
- *   <sky-docs-code-example>
- *   </sky-docs-code-example>
- * </sky-docs-code-examples>
- * ```
+ * @internal
  */
-class SkyDocsCodeExamplesComponent {
-    /**
-     * Any extra NPM package dependencies that are needed for the editor to run the code example.
-     * @default {}
-     */
-    set packageDependencies(value) {
-        this._packageDependencies = value;
-    }
-    get packageDependencies() {
-        return this._packageDependencies || {};
-    }
-    constructor(editorService, sourceCodeService) {
-        this.editorService = editorService;
-        this.sourceCodeService = sourceCodeService;
-        this.stylesheets = [];
-        this.codeExamples = [];
-    }
-    ngAfterContentInit() {
-        this.codeExampleComponents.forEach((component) => {
-            // Make sure the source code path ends in a slash, so that similarly named directories aren't included.
-            let sourceCodePath = component.sourceCodePath;
-            if (sourceCodePath.slice(-1) !== '/') {
-                sourceCodePath += '/';
-            }
-            const sourceCode = this.sourceCodeService.getSourceCode(sourceCodePath);
-            if (!sourceCode.length) {
-                console.warn(`Source code not found at location "${sourceCodePath}" for "${component.heading}"!`);
-                return;
-            }
-            this.codeExamples.push({
-                heading: component.heading,
-                packageDependencies: this.packageDependencies,
-                sourceCode,
-                stylesheets: this.stylesheets,
-                theme: component.theme,
-            });
-        });
-    }
-    launchEditor(codeExample, event) {
-        event.stopPropagation();
-        this.editorService.launchEditor(codeExample, event.metaKey || event.ctrlKey ? 'node' : 'angular-cli');
-    }
-    /**
-     * Returns a string representing one of PrismJS's supported language types.
-     * See: https://prismjs.com/#supported-languages
-     */
-    parseCodeLanguageType(fileName) {
-        const extension = fileName.split('.').pop().toLowerCase();
-        switch (extension) {
-            case 'ts':
-                return 'typescript';
-            case 'html':
-                return 'markup';
-            default:
-                return extension;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsCodeExamplesComponent, deps: [{ token: SkyDocsCodeExamplesEditorService }, { token: SkyDocsSourceCodeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsCodeExamplesComponent, isStandalone: false, selector: "sky-docs-code-examples", inputs: { packageDependencies: "packageDependencies", stylesheets: "stylesheets" }, queries: [{ propertyName: "codeExampleComponents", predicate: SkyDocsCodeExampleComponent }], ngImport: i0, template: "<div *ngIf=\"codeExamples && codeExamples.length\" class=\"sky-docs-code-examples\">\n  <sky-repeater\n    *ngIf=\"codeExamples.length > 1; else singleCodeExample\"\n    expandMode=\"multiple\"\n  >\n    <sky-repeater-item\n      *ngFor=\"let codeExample of codeExamples\"\n      [isExpanded]=\"false\"\n    >\n      <sky-repeater-item-title>\n        <ng-container\n          *ngTemplateOutlet=\"\n            codeExampleHeaderTemplate;\n            context: { $implicit: codeExample }\n          \"\n        >\n        </ng-container>\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        <ng-container\n          *ngTemplateOutlet=\"\n            codeExampleTemplate;\n            context: { $implicit: codeExample }\n          \"\n        >\n        </ng-container>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  </sky-repeater>\n</div>\n\n<ng-template>\n  <ng-content select=\"sky-docs-code-example\"> </ng-content>\n</ng-template>\n\n<ng-template let-item #codeExampleTemplate>\n  <div class=\"sky-docs-code-example-wrapper\">\n    <sky-vertical-tabset *ngIf=\"item.sourceCode && item.sourceCode.length\">\n      <sky-vertical-tab\n        *ngFor=\"let file of item.sourceCode; let i = index\"\n        [active]=\"i === 0\"\n        [tabHeading]=\"file.fileName\"\n      >\n        <sky-code-block\n          [code]=\"file.rawContents\"\n          [languageType]=\"parseCodeLanguageType(file.fileName)\"\n        >\n        </sky-code-block>\n      </sky-vertical-tab>\n    </sky-vertical-tabset>\n  </div>\n</ng-template>\n\n<ng-template #singleCodeExample>\n  <ng-container\n    *ngTemplateOutlet=\"\n      codeExampleHeaderTemplate;\n      context: { $implicit: codeExamples[0] }\n    \"\n  >\n  </ng-container>\n  <ng-container\n    *ngTemplateOutlet=\"\n      codeExampleTemplate;\n      context: { $implicit: codeExamples[0] }\n    \"\n  >\n  </ng-container>\n</ng-template>\n\n<ng-template let-codeExample #codeExampleHeaderTemplate>\n  <div class=\"sky-docs-code-example-header\">\n    <div class=\"sky-docs-code-example-header-title sky-emphasized\">\n      {{ codeExample.heading }}\n    </div>\n    <div class=\"sky-docs-code-example-header-controls\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"launchEditor(codeExample, $event)\"\n      >\n        <sky-icon icon=\"pencil\"></sky-icon>\n        {{ 'sky-docs-code-example-launch-button-label' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-docs-code-examples{margin-top:30px}.sky-docs-code-example-header{display:flex;align-items:baseline}.sky-docs-code-example-header-title{flex-grow:1}.sky-docs-code-example-header-controls{flex-grow:0}.sky-docs-code-example-header-controls .sky-btn{font-weight:400}.sky-docs-code-example-wrapper{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;margin-top:10px}.sky-docs-code-example-wrapper ::ng-deep .sky-vertical-tabset-content{margin:0}.sky-docs-code-example-wrapper ::ng-deep sky-code-block{margin:0!important}.sky-docs-code-example-wrapper ::ng-deep .sky-code-block-header{border:0}.sky-docs-code-example-wrapper ::ng-deep .sky-code-output{border-left:0;border-right:0;border-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { kind: "component", type: i5$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i6.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i6.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i6.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i6.λ12, selector: "sky-repeater-item-title" }, { kind: "component", type: i7.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i7.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsCodeExamplesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-code-examples', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div *ngIf=\"codeExamples && codeExamples.length\" class=\"sky-docs-code-examples\">\n  <sky-repeater\n    *ngIf=\"codeExamples.length > 1; else singleCodeExample\"\n    expandMode=\"multiple\"\n  >\n    <sky-repeater-item\n      *ngFor=\"let codeExample of codeExamples\"\n      [isExpanded]=\"false\"\n    >\n      <sky-repeater-item-title>\n        <ng-container\n          *ngTemplateOutlet=\"\n            codeExampleHeaderTemplate;\n            context: { $implicit: codeExample }\n          \"\n        >\n        </ng-container>\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        <ng-container\n          *ngTemplateOutlet=\"\n            codeExampleTemplate;\n            context: { $implicit: codeExample }\n          \"\n        >\n        </ng-container>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  </sky-repeater>\n</div>\n\n<ng-template>\n  <ng-content select=\"sky-docs-code-example\"> </ng-content>\n</ng-template>\n\n<ng-template let-item #codeExampleTemplate>\n  <div class=\"sky-docs-code-example-wrapper\">\n    <sky-vertical-tabset *ngIf=\"item.sourceCode && item.sourceCode.length\">\n      <sky-vertical-tab\n        *ngFor=\"let file of item.sourceCode; let i = index\"\n        [active]=\"i === 0\"\n        [tabHeading]=\"file.fileName\"\n      >\n        <sky-code-block\n          [code]=\"file.rawContents\"\n          [languageType]=\"parseCodeLanguageType(file.fileName)\"\n        >\n        </sky-code-block>\n      </sky-vertical-tab>\n    </sky-vertical-tabset>\n  </div>\n</ng-template>\n\n<ng-template #singleCodeExample>\n  <ng-container\n    *ngTemplateOutlet=\"\n      codeExampleHeaderTemplate;\n      context: { $implicit: codeExamples[0] }\n    \"\n  >\n  </ng-container>\n  <ng-container\n    *ngTemplateOutlet=\"\n      codeExampleTemplate;\n      context: { $implicit: codeExamples[0] }\n    \"\n  >\n  </ng-container>\n</ng-template>\n\n<ng-template let-codeExample #codeExampleHeaderTemplate>\n  <div class=\"sky-docs-code-example-header\">\n    <div class=\"sky-docs-code-example-header-title sky-emphasized\">\n      {{ codeExample.heading }}\n    </div>\n    <div class=\"sky-docs-code-example-header-controls\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"launchEditor(codeExample, $event)\"\n      >\n        <sky-icon icon=\"pencil\"></sky-icon>\n        {{ 'sky-docs-code-example-launch-button-label' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-docs-code-examples{margin-top:30px}.sky-docs-code-example-header{display:flex;align-items:baseline}.sky-docs-code-example-header-title{flex-grow:1}.sky-docs-code-example-header-controls{flex-grow:0}.sky-docs-code-example-header-controls .sky-btn{font-weight:400}.sky-docs-code-example-wrapper{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;margin-top:10px}.sky-docs-code-example-wrapper ::ng-deep .sky-vertical-tabset-content{margin:0}.sky-docs-code-example-wrapper ::ng-deep sky-code-block{margin:0!important}.sky-docs-code-example-wrapper ::ng-deep .sky-code-block-header{border:0}.sky-docs-code-example-wrapper ::ng-deep .sky-code-output{border-left:0;border-right:0;border-bottom:0}\n"] }]
-        }], ctorParameters: () => [{ type: SkyDocsCodeExamplesEditorService }, { type: SkyDocsSourceCodeService }], propDecorators: { packageDependencies: [{
-                type: Input
-            }], stylesheets: [{
-                type: Input
-            }], codeExampleComponents: [{
-                type: ContentChildren,
-                args: [SkyDocsCodeExampleComponent]
-            }] } });
-
-class SkyDocsCodeExamplesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsCodeExamplesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsCodeExamplesModule, declarations: [SkyDocsCodeExampleComponent, SkyDocsCodeExamplesComponent], imports: [CommonModule,
-            SkyCodeBlockModule,
-            SkyDocsToolsResourcesModule,
-            SkyIconModule,
-            SkyRepeaterModule,
-            SkyVerticalTabsetModule], exports: [SkyDocsCodeExampleComponent, SkyDocsCodeExamplesComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsCodeExamplesModule, imports: [CommonModule,
-            SkyCodeBlockModule,
-            SkyDocsToolsResourcesModule,
-            SkyIconModule,
-            SkyRepeaterModule,
-            SkyVerticalTabsetModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsCodeExamplesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        SkyCodeBlockModule,
+class SkyCodeExampleViewerComponent {
+    constructor() {
+        this.#stackblitzSvc = inject(SkyStackBlitzService);
+        this.componentName = input.required();
+        this.componentSelector = input.required();
+        this.componentType = input.required();
+        this.demoHidden = input(false);
+        this.files = input.required();
+        this.headingText = input.required();
+        this.primaryFile = input.required();
+        this.stacked = input(false, { transform: booleanAttribute });
+        this.isCodeVisible = signal(false);
+    }
+    #stackblitzSvc;
+    getCodeLanguage(fileName) {
+        const extension = fileName.split('.').pop();
+        assertCodeSnippetLanguage(extension);
+        return extension;
+    }
+    launchStackBlitz() {
+        void this.#stackblitzSvc.launch({
+            componentName: this.componentName(),
+            componentSelector: this.componentSelector(),
+            files: this.files(),
+            primaryFile: this.primaryFile(),
+            title: this.headingText(),
+        });
+    }
+    toggleCodeVisibility() {
+        const isCodeVisible = this.isCodeVisible();
+        this.isCodeVisible.set(!isCodeVisible);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeExampleViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyCodeExampleViewerComponent, isStandalone: true, selector: "sky-code-example-viewer", inputs: { componentName: { classPropertyName: "componentName", publicName: "componentName", isSignal: true, isRequired: true, transformFunction: null }, componentSelector: { classPropertyName: "componentSelector", publicName: "componentSelector", isSignal: true, isRequired: true, transformFunction: null }, componentType: { classPropertyName: "componentType", publicName: "componentType", isSignal: true, isRequired: true, transformFunction: null }, demoHidden: { classPropertyName: "demoHidden", publicName: "demoHidden", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null }, primaryFile: { classPropertyName: "primaryFile", publicName: "primaryFile", isSignal: true, isRequired: true, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sky-margin-stacked-xl": "stacked()" } }, ngImport: i0, template: "<sky-box headingLevel=\"3\" headingStyle=\"3\" [headingText]=\"headingText()\">\n  <sky-box-controls>\n    <button\n      class=\"sky-btn sky-btn-default\"\n      data-sky-id=\"stackblitz-btn\"\n      type=\"button\"\n      (click)=\"launchStackBlitz()\"\n    >\n      <sky-icon iconName=\"edit\" />\n      {{ 'sky_code_example_viewer_demo_stack_blitz_button' | skyLibResources }}\n    </button>\n  </sky-box-controls>\n\n  <sky-box-content>\n    <div\n      class=\"sky-code-example-viewer-demo sky-padding-even-md sky-margin-stacked-lg\"\n    >\n      @if (!demoHidden()) {\n        <ng-template [ngComponentOutlet]=\"componentType()\" />\n      } @else {\n        {{ 'sky_code_example_viewer_demo_hidden_message' | skyLibResources }}\n      }\n    </div>\n\n    <div class=\"sky-margin-stacked-sm\">\n      <button\n        class=\"sky-btn sky-btn-link\"\n        data-sky-id=\"toggle-code-visibility-btn\"\n        type=\"button\"\n        [attr.aria-controls]=\"codeRef.id\"\n        [attr.aria-expanded]=\"isCodeVisible()\"\n        (click)=\"toggleCodeVisibility()\"\n      >\n        <sky-icon\n          [iconName]=\"isCodeVisible() ? 'chevron-down' : 'chevron-right'\"\n        />\n        {{\n          isCodeVisible()\n            ? ('sky_code_example_viewer_hide_code_button_label'\n              | skyLibResources)\n            : ('sky_code_example_viewer_show_code_button_label'\n              | skyLibResources)\n        }}\n      </button>\n    </div>\n\n    <sky-vertical-tabset #codeRef=\"skyId\" skyId [hidden]=\"!isCodeVisible()\">\n      @for (obj of files() | keyvalue; track obj.key) {\n        <sky-vertical-tab\n          [active]=\"obj.key === primaryFile()\"\n          [tabHeading]=\"obj.key\"\n        >\n          <sky-code-snippet\n            [code]=\"obj.value\"\n            [language]=\"getCodeLanguage(obj.key)\"\n          />\n        </sky-vertical-tab>\n      }\n    </sky-vertical-tabset>\n  </sky-box-content>\n</sky-box>\n", styles: [":host{display:block}.sky-code-example-viewer-demo{border:1px solid var(--sky-border-color-neutral-medium)}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$1.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$1.λ43, selector: "sky-box-content" }, { kind: "component", type: i1$1.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyCodeSnippetModule }, { kind: "component", type: SkyCodeSnippetComponent, selector: "sky-code-snippet", inputs: ["code", "language"] }, { kind: "ngmodule", type: SkyDocsToolsResourcesModule }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i5.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i6.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i6.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeExampleViewerComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.sky-margin-stacked-xl]': 'stacked()',
+                    }, imports: [
+                        KeyValuePipe,
+                        NgComponentOutlet,
+                        SkyBoxModule,
+                        SkyCodeSnippetModule,
                         SkyDocsToolsResourcesModule,
                         SkyIconModule,
-                        SkyRepeaterModule,
+                        SkyIdModule,
                         SkyVerticalTabsetModule,
-                    ],
-                    declarations: [SkyDocsCodeExampleComponent, SkyDocsCodeExamplesComponent],
-                    exports: [SkyDocsCodeExampleComponent, SkyDocsCodeExamplesComponent],
-                }]
-        }] });
-
-/**
- * Renders a checkbox control within the control panel.
- * @example
- * ```markup
- * <sky-docs-demo-control-panel-checkbox
- *   label="Show title"
- *   [checked]="true"
- *   [propertyName]="showTitle"
- * >
- * </sky-docs-demo-control-panel-checkbox>
- * ```
- */
-class SkyDocsDemoControlPanelCheckboxComponent {
-    /**
-     * The checked status of the checkbox.
-     * @default false
-     */
-    set checked(value) {
-        if (value !== undefined && this._checked === undefined) {
-            this.initialState.checked = value;
-        }
-        this._checked = value;
-    }
-    get checked() {
-        return this._checked || false;
-    }
-    constructor(changeDetector) {
-        this.changeDetector = changeDetector;
-        /**
-         * Indicates whether to disable the checkbox.
-         */
-        this.disabled = false;
-        this.selectionChange = new ReplaySubject();
-        this.initialState = {};
-    }
-    ngOnInit() {
-        setTimeout(() => {
-            this.initialState.checked = this.checked;
-            this.notifyChange();
-        });
-    }
-    ngOnDestroy() {
-        this.selectionChange.complete();
-    }
-    onModelChange() {
-        this.notifyChange();
-    }
-    resetState() {
-        if (this.initialState.checked !== this.checked) {
-            this.checked = !!this.initialState.checked;
-            this.notifyChange();
-            this.changeDetector.markForCheck();
-        }
-    }
-    notifyChange() {
-        this.selectionChange.next({
-            [this.propertyName]: this.checked,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoControlPanelCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsDemoControlPanelCheckboxComponent, isStandalone: false, selector: "sky-docs-demo-control-panel-checkbox", inputs: { checked: "checked", disabled: "disabled", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", label: "label", propertyName: "propertyName" }, ngImport: i0, template: "<sky-checkbox\n  [disabled]=\"disabled\"\n  [labelText]=\"label\"\n  [helpPopoverContent]=\"helpPopoverContent\"\n  [helpPopoverTitle]=\"helpPopoverTitle\"\n  [name]=\"propertyName\"\n  [(ngModel)]=\"checked\"\n  (change)=\"onModelChange()\"\n/>\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoControlPanelCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-demo-control-panel-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<sky-checkbox\n  [disabled]=\"disabled\"\n  [labelText]=\"label\"\n  [helpPopoverContent]=\"helpPopoverContent\"\n  [helpPopoverTitle]=\"helpPopoverTitle\"\n  [name]=\"propertyName\"\n  [(ngModel)]=\"checked\"\n  (change)=\"onModelChange()\"\n/>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { checked: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], helpPopoverContent: [{
-                type: Input
-            }], helpPopoverTitle: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], propertyName: [{
-                type: Input
-            }] } });
-
-/**
- * Renders a radio control group.
- * @example
- * ```markup
- * <sky-docs-demo-control-panel-radio-group
- *   [choices]="[
- *     { 'label': 'Red', value: '#f00' },
- *     { 'label': 'Green', value: '#0f0' },
- *     { 'label': 'Blue', value: '#00f' }
- *   ]"
- *   heading="Choose a color"
- *   initialValue="Red"
- *   propertyName="color"
- * >
- * </sky-docs-demo-control-panel-radio-group>
- * ```
- */
-class SkyDocsDemoControlPanelRadioGroupComponent {
-    constructor(changeDetector) {
-        this.changeDetector = changeDetector;
-        /**
-         * Indicates whether to disable the radio group.
-         */
-        this.disabled = false;
-        /**
-         * @internal
-         */
-        this.selectionChange = new ReplaySubject();
-    }
-    ngOnInit() {
-        this.value = this.cloneValue(this.initialValue);
-        this.#notifyChange();
-    }
-    ngOnDestroy() {
-        this.selectionChange.complete();
-    }
-    onModelChange(value) {
-        this.value = value;
-        this.#notifyChange();
-    }
-    resetValue() {
-        this.value = this.cloneValue(this.initialValue);
-        this.#notifyChange();
-        this.changeDetector.markForCheck();
-    }
-    cloneValue(value) {
-        if (typeof value === 'object') {
-            return JSON.parse(JSON.stringify(value));
-        }
-        return value;
-    }
-    #notifyChange() {
-        this.selectionChange.next({
-            [this.propertyName]: this.value,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoControlPanelRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsDemoControlPanelRadioGroupComponent, isStandalone: false, selector: "sky-docs-demo-control-panel-radio-group", inputs: { choices: "choices", disabled: "disabled", heading: "heading", initialValue: "initialValue", propertyName: "propertyName" }, ngImport: i0, template: "<div class=\"sky-demo-control-panel-radio-group\">\n  <sky-radio-group\n    [disabled]=\"disabled\"\n    [headingText]=\"heading\"\n    [headingStyle]=\"4\"\n    [name]=\"propertyName\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onModelChange($event)\"\n  >\n    <ul class=\"sky-list-unstyled\">\n      <li *ngFor=\"let choice of choices\">\n        <sky-radio [value]=\"choice.value\">\n          <sky-radio-label>{{ choice.label }}</sky-radio-label>\n        </sky-radio>\n      </li>\n    </ul>\n  </sky-radio-group>\n</div>\n", styles: [".sky-demo-control-panel-radio-group{margin-bottom:20px}ul{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "helpPopoverContent", "helpPopoverTitle", "icon", "radioType", "labelText", "labelHidden", "hintText", "helpKey"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i3$1.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "headingLevel", "headingStyle", "name", "required", "stacked", "value", "tabIndex", "headingText", "headingHidden", "hintText", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { kind: "component", type: i3$1.λ12, selector: "sky-radio-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoControlPanelRadioGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-demo-control-panel-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-demo-control-panel-radio-group\">\n  <sky-radio-group\n    [disabled]=\"disabled\"\n    [headingText]=\"heading\"\n    [headingStyle]=\"4\"\n    [name]=\"propertyName\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onModelChange($event)\"\n  >\n    <ul class=\"sky-list-unstyled\">\n      <li *ngFor=\"let choice of choices\">\n        <sky-radio [value]=\"choice.value\">\n          <sky-radio-label>{{ choice.label }}</sky-radio-label>\n        </sky-radio>\n      </li>\n    </ul>\n  </sky-radio-group>\n</div>\n", styles: [".sky-demo-control-panel-radio-group{margin-bottom:20px}ul{margin:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { choices: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], heading: [{
-                type: Input
-            }], initialValue: [{
-                type: Input
-            }], propertyName: [{
-                type: Input
-            }] } });
-
-/**
- * Handles the appearance and configuration of the behavior demo control panel.
- * @example
- * ```markup
- * <sky-docs-demo-control-panel
- *   (selectionChange)="onSelectionChange($event)"
- * >
- *   Control panel content here.
- * </sky-docs-demo-control-panel>
- * ```
- */
-class SkyDocsDemoControlPanelComponent {
-    constructor() {
-        /**
-         * Fires when the user clicks the reset button.
-         */
-        this.reset = new EventEmitter();
-        /**
-         * Fires when a user makes a selection from one of the controls in the panel.
-         */
-        this.selectionChange = new EventEmitter();
-        this.ngUnsubscribe = new Subject();
-    }
-    ngAfterContentInit() {
-        this.addEventListeners();
-        merge(this.checkboxes.changes, this.radioGroups.changes)
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(() => {
-            this.addEventListeners();
-        });
-    }
-    ngOnDestroy() {
-        this.reset.complete();
-        this.selectionChange.complete();
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-    }
-    onResetButtonClick() {
-        this.radioGroups.forEach((radioGroup) => {
-            radioGroup.resetValue();
-        });
-        this.checkboxes.forEach((checkbox) => {
-            checkbox.resetState();
-        });
-        this.reset.emit();
-    }
-    addEventListeners() {
-        if (this.eventListeners) {
-            this.eventListeners.unsubscribe();
-        }
-        this.eventListeners = merge(...this.checkboxes.map((c) => c.selectionChange), ...this.radioGroups.map((c) => c.selectionChange))
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe((change) => {
-            this.selectionChange.next(change);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoControlPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsDemoControlPanelComponent, isStandalone: false, selector: "sky-docs-demo-control-panel", outputs: { reset: "reset", selectionChange: "selectionChange" }, queries: [{ propertyName: "radioGroups", predicate: SkyDocsDemoControlPanelRadioGroupComponent, descendants: true }, { propertyName: "checkboxes", predicate: SkyDocsDemoControlPanelCheckboxComponent, descendants: true }], ngImport: i0, template: "<div class=\"sky-docs-demo-control-panel\">\n  <div class=\"sky-docs-demo-control-panel-row sky-rounded-corners\">\n    <div\n      class=\"sky-docs-demo-control-panel-column sky-docs-demo-control-panel-sections-column\"\n    >\n      <ng-content select=\"sky-docs-demo-control-panel-section\"></ng-content>\n    </div>\n\n    <div\n      class=\"sky-docs-demo-control-panel-column sky-docs-demo-control-panel-button-column\"\n    >\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        [attr.data-test-selector]=\"'sky-docs-demo-control-panel-reset-button'\"\n        (click)=\"onResetButtonClick()\"\n      >\n        {{ 'sky-docs-demo-control-panel-reset-button-label' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".sky-docs-demo-control-panel{margin-bottom:20px;margin-top:-1px;margin-left:-15px}.sky-docs-demo-control-panel-row{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;padding:15px;background-color:#fff;display:inline-flex;min-width:220px}.sky-docs-demo-control-panel-sections-column{display:flex}.sky-docs-demo-control-panel-sections-column ::ng-deep sky-docs-demo-control-panel-section{min-width:120px}.sky-docs-demo-control-panel-button-column{align-self:flex-end}.sky-docs-demo-control-panel-button-column .sky-btn{border:0}\n"], dependencies: [{ kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoControlPanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-demo-control-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-docs-demo-control-panel\">\n  <div class=\"sky-docs-demo-control-panel-row sky-rounded-corners\">\n    <div\n      class=\"sky-docs-demo-control-panel-column sky-docs-demo-control-panel-sections-column\"\n    >\n      <ng-content select=\"sky-docs-demo-control-panel-section\"></ng-content>\n    </div>\n\n    <div\n      class=\"sky-docs-demo-control-panel-column sky-docs-demo-control-panel-button-column\"\n    >\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        [attr.data-test-selector]=\"'sky-docs-demo-control-panel-reset-button'\"\n        (click)=\"onResetButtonClick()\"\n      >\n        {{ 'sky-docs-demo-control-panel-reset-button-label' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".sky-docs-demo-control-panel{margin-bottom:20px;margin-top:-1px;margin-left:-15px}.sky-docs-demo-control-panel-row{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;padding:15px;background-color:#fff;display:inline-flex;min-width:220px}.sky-docs-demo-control-panel-sections-column{display:flex}.sky-docs-demo-control-panel-sections-column ::ng-deep sky-docs-demo-control-panel-section{min-width:120px}.sky-docs-demo-control-panel-button-column{align-self:flex-end}.sky-docs-demo-control-panel-button-column .sky-btn{border:0}\n"] }]
-        }], propDecorators: { reset: [{
-                type: Output
-            }], selectionChange: [{
-                type: Output
-            }], radioGroups: [{
-                type: ContentChildren,
-                args: [SkyDocsDemoControlPanelRadioGroupComponent, {
-                        descendants: true,
-                    }]
-            }], checkboxes: [{
-                type: ContentChildren,
-                args: [SkyDocsDemoControlPanelCheckboxComponent, {
-                        descendants: true,
-                    }]
-            }] } });
-
-/**
- * Renders a custom control panel in the "Show options" dropdown above the demo.
- */
-class SkyDocsDemoCustomControlPanelComponent {
-    constructor() {
-        this.classes = 'sky-rounded-corners';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoCustomControlPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsDemoCustomControlPanelComponent, isStandalone: false, selector: "sky-docs-demo-custom-control-panel", host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;padding:15px;background-color:#fff;display:inline-flex;min-width:220px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoCustomControlPanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-demo-custom-control-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content />\n", styles: [":host{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;padding:15px;background-color:#fff;display:inline-flex;min-width:220px}\n"] }]
-        }], propDecorators: { classes: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-/**
- * Wraps all behavior demo components and handles the configuration and appearance of the behavior demo.
- * @example
- * ```markup
- * <sky-docs-demo>
- *   Demo content here.
- * </sky-docs-demo>
- * ```
- */
-class SkyDocsDemoComponent {
-    constructor() {
-        this.areOptionsVisible = false;
-    }
-    /**
-     * Specifies the horizontal alignment of the demo contents.
-     * @default 'left'
-     */
-    set alignContents(value) {
-        this._alignContents = value;
-    }
-    get alignContents() {
-        return this._alignContents || 'left';
-    }
-    get hasOptions() {
-        return ((this.controlPanels && this.controlPanels.length > 0) ||
-            (this.customControlPanels && this.customControlPanels.length > 0));
-    }
-    get toggleOptionsButtonIcon() {
-        return this.areOptionsVisible ? 'chevron-up' : 'chevron-down';
-    }
-    onToggleOptionsButtonClick() {
-        this.areOptionsVisible = !this.areOptionsVisible;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsDemoComponent, isStandalone: false, selector: "sky-docs-demo", inputs: { alignContents: "alignContents", heading: "heading" }, queries: [{ propertyName: "controlPanels", predicate: SkyDocsDemoControlPanelComponent, read: ElementRef }, { propertyName: "customControlPanels", predicate: SkyDocsDemoCustomControlPanelComponent, read: ElementRef }], ngImport: i0, template: "<div class=\"sky-docs-demo\">\n  <div aria-level=\"3\" class=\"sky-docs-demo-heading\" role=\"heading\">\n    <span\n      class=\"sky-section-heading\"\n      [attr.data-test-selector]=\"'sky-docs-demo-heading-text'\"\n    >\n      {{ heading || ('sky-docs-demo-heading' | skyLibResources) }}\n    </span>\n\n    <div class=\"sky-docs-demo-control-panel-wrapper\">\n      <div class=\"sky-docs-demo-control-panel-wrapper-header\">\n        <button\n          *ngIf=\"hasOptions\"\n          class=\"sky-btn\"\n          type=\"button\"\n          [attr.data-test-selector]=\"'sky-docs-demo-heading-button'\"\n          [ngClass]=\"{\n            'sky-docs-demo-heading-btn-open': areOptionsVisible,\n          }\"\n          (click)=\"onToggleOptionsButtonClick()\"\n        >\n          <sky-icon [icon]=\"toggleOptionsButtonIcon\"></sky-icon>\n          <ng-container *ngIf=\"areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-off' | skyLibResources }}\n          </ng-container>\n          <ng-container *ngIf=\"!areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-on' | skyLibResources }}\n          </ng-container>\n        </button>\n      </div>\n      <div class=\"sky-docs-demo-control-panel-wrapper-body\">\n        <ng-container *ngIf=\"areOptionsVisible\">\n          <ng-container *ngTemplateOutlet=\"controlPanels\"></ng-container>\n          <ng-container *ngTemplateOutlet=\"customControlPanels\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"sky-docs-demo-viewport\"\n    [ngClass]=\"'sky-docs-demo-viewport-align-' + alignContents\"\n  >\n    <div class=\"sky-docs-demo-viewport-gutter\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #controlPanels>\n  <ng-content select=\"sky-docs-demo-control-panel\" />\n</ng-template>\n\n<ng-template #customControlPanels>\n  <ng-content select=\"sky-docs-demo-custom-control-panel\" />\n</ng-template>\n", styles: [".sky-docs-demo{margin-bottom:20px}.sky-docs-demo-heading{margin-bottom:10px;display:flex;flex-direction:row}.sky-docs-demo-heading .sky-docs-demo-heading-btn-open{border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;position:relative}.sky-docs-demo-control-panel-wrapper{display:flex;flex-direction:column}.sky-section-heading{margin-right:10px}.sky-docs-demo-viewport{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;margin-bottom:10px;padding:15px}.sky-docs-demo-viewport-align-center{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-demo', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-docs-demo\">\n  <div aria-level=\"3\" class=\"sky-docs-demo-heading\" role=\"heading\">\n    <span\n      class=\"sky-section-heading\"\n      [attr.data-test-selector]=\"'sky-docs-demo-heading-text'\"\n    >\n      {{ heading || ('sky-docs-demo-heading' | skyLibResources) }}\n    </span>\n\n    <div class=\"sky-docs-demo-control-panel-wrapper\">\n      <div class=\"sky-docs-demo-control-panel-wrapper-header\">\n        <button\n          *ngIf=\"hasOptions\"\n          class=\"sky-btn\"\n          type=\"button\"\n          [attr.data-test-selector]=\"'sky-docs-demo-heading-button'\"\n          [ngClass]=\"{\n            'sky-docs-demo-heading-btn-open': areOptionsVisible,\n          }\"\n          (click)=\"onToggleOptionsButtonClick()\"\n        >\n          <sky-icon [icon]=\"toggleOptionsButtonIcon\"></sky-icon>\n          <ng-container *ngIf=\"areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-off' | skyLibResources }}\n          </ng-container>\n          <ng-container *ngIf=\"!areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-on' | skyLibResources }}\n          </ng-container>\n        </button>\n      </div>\n      <div class=\"sky-docs-demo-control-panel-wrapper-body\">\n        <ng-container *ngIf=\"areOptionsVisible\">\n          <ng-container *ngTemplateOutlet=\"controlPanels\"></ng-container>\n          <ng-container *ngTemplateOutlet=\"customControlPanels\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"sky-docs-demo-viewport\"\n    [ngClass]=\"'sky-docs-demo-viewport-align-' + alignContents\"\n  >\n    <div class=\"sky-docs-demo-viewport-gutter\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #controlPanels>\n  <ng-content select=\"sky-docs-demo-control-panel\" />\n</ng-template>\n\n<ng-template #customControlPanels>\n  <ng-content select=\"sky-docs-demo-custom-control-panel\" />\n</ng-template>\n", styles: [".sky-docs-demo{margin-bottom:20px}.sky-docs-demo-heading{margin-bottom:10px;display:flex;flex-direction:row}.sky-docs-demo-heading .sky-docs-demo-heading-btn-open{border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;position:relative}.sky-docs-demo-control-panel-wrapper{display:flex;flex-direction:column}.sky-section-heading{margin-right:10px}.sky-docs-demo-viewport{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;margin-bottom:10px;padding:15px}.sky-docs-demo-viewport-align-center{display:flex;align-items:center;justify-content:center}\n"] }]
-        }], propDecorators: { alignContents: [{
-                type: Input
-            }], heading: [{
-                type: Input
-            }], controlPanels: [{
-                type: ContentChildren,
-                args: [SkyDocsDemoControlPanelComponent, { read: ElementRef }]
-            }], customControlPanels: [{
-                type: ContentChildren,
-                args: [SkyDocsDemoCustomControlPanelComponent, { read: ElementRef }]
-            }] } });
-
-/**
- * Renders a section within the control panel.
- * @example
- * ```markup
- * <sky-docs-demo-control-panel>
- *   <sky-docs-demo-control-panel-section>
- *     Section content here.
- *   </sky-docs-demo-control-panel-section>
- * </sky-docs-demo-control-panel>
- * ```
- */
-class SkyDocsDemoControlPanelSectionComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoControlPanelSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsDemoControlPanelSectionComponent, isStandalone: false, selector: "sky-docs-demo-control-panel-section", ngImport: i0, template: "<div class=\"sky-demo-control-panel-section\">\n  <ng-content select=\"sky-docs-demo-control-panel-radio-group\"></ng-content>\n  <ng-content select=\"sky-docs-demo-control-panel-checkbox\"></ng-content>\n</div>\n", styles: [".sky-demo-control-panel-section{padding-right:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoControlPanelSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-demo-control-panel-section', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-demo-control-panel-section\">\n  <ng-content select=\"sky-docs-demo-control-panel-radio-group\"></ng-content>\n  <ng-content select=\"sky-docs-demo-control-panel-checkbox\"></ng-content>\n</div>\n", styles: [".sky-demo-control-panel-section{padding-right:20px}\n"] }]
-        }] });
-
-class SkyDocsDemoModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoModule, declarations: [SkyDocsDemoComponent,
-            SkyDocsDemoControlPanelCheckboxComponent,
-            SkyDocsDemoControlPanelComponent,
-            SkyDocsDemoControlPanelRadioGroupComponent,
-            SkyDocsDemoControlPanelSectionComponent,
-            SkyDocsDemoCustomControlPanelComponent], imports: [CommonModule,
-            FormsModule,
-            SkyCheckboxModule,
-            SkyDocsToolsResourcesModule,
-            SkyIconModule,
-            SkyRadioModule,
-            SkyThemeModule], exports: [SkyDocsDemoComponent,
-            SkyDocsDemoControlPanelCheckboxComponent,
-            SkyDocsDemoControlPanelComponent,
-            SkyDocsDemoControlPanelRadioGroupComponent,
-            SkyDocsDemoControlPanelSectionComponent,
-            SkyDocsDemoCustomControlPanelComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoModule, imports: [CommonModule,
-            FormsModule,
-            SkyCheckboxModule,
-            SkyDocsToolsResourcesModule,
-            SkyIconModule,
-            SkyRadioModule,
-            SkyThemeModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        SkyCheckboxModule,
-                        SkyDocsToolsResourcesModule,
-                        SkyIconModule,
-                        SkyRadioModule,
-                        SkyThemeModule,
-                    ],
-                    declarations: [
-                        SkyDocsDemoComponent,
-                        SkyDocsDemoControlPanelCheckboxComponent,
-                        SkyDocsDemoControlPanelComponent,
-                        SkyDocsDemoControlPanelRadioGroupComponent,
-                        SkyDocsDemoControlPanelSectionComponent,
-                        SkyDocsDemoCustomControlPanelComponent,
-                    ],
-                    exports: [
-                        SkyDocsDemoComponent,
-                        SkyDocsDemoControlPanelCheckboxComponent,
-                        SkyDocsDemoControlPanelComponent,
-                        SkyDocsDemoControlPanelRadioGroupComponent,
-                        SkyDocsDemoControlPanelSectionComponent,
-                        SkyDocsDemoCustomControlPanelComponent,
-                    ],
-                }]
-        }] });
-
-class SkyDocsHeadingAnchorComponent {
-    constructor() {
-        this.headingLevel = '2';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsHeadingAnchorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsHeadingAnchorComponent, isStandalone: false, selector: "sky-docs-heading-anchor", inputs: { anchorId: "anchorId", headingLevel: "headingLevel" }, ngImport: i0, template: "<div\n  class=\"sky-docs-heading-anchor\"\n  role=\"heading\"\n  [ngClass]=\"'sky-docs-tools-heading-anchor-h' + headingLevel\"\n  [attr.aria-level]=\"headingLevel\"\n  [attr.id]=\"anchorId || null\"\n>\n  <ng-content></ng-content>\n  <a\n    *ngIf=\"anchorId\"\n    aria-hidden=\"true\"\n    class=\"sky-docs-heading-anchor\"\n    queryParamsHandling=\"merge\"\n    [fragment]=\"anchorId\"\n    [routerLink]=\"[]\"\n  >\n    <sky-icon class=\"sky-docs-heading-anchor-icon\" icon=\"link\"></sky-icon>\n  </a>\n</div>\n", styles: [".sky-docs-heading-anchor{color:#212327}.sky-docs-heading-anchor:hover{text-decoration:none}.sky-docs-heading-anchor:hover .sky-docs-heading-anchor-icon{opacity:1}.sky-docs-heading-anchor:focus .sky-docs-heading-anchor-icon{opacity:1}.sky-docs-heading-anchor-icon{opacity:0;transition:opacity .15s ease-in-out;color:#0974a1;font-weight:400;font-size:18px}.sky-docs-tools-heading-anchor-h1,.sky-docs-tools-heading-anchor-h2,.sky-docs-tools-heading-anchor-h3,.sky-docs-tools-heading-anchor-h4,.sky-docs-tools-heading-anchor-h5,.sky-docs-tools-heading-anchor-h6{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;margin:30px 0 15px}.sky-docs-tools-heading-anchor-h1{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;margin:30px 0 15px;font-weight:300;font-size:34px}.sky-docs-tools-heading-anchor-h2{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;margin:30px 0;font-weight:300;font-size:26px}.sky-docs-tools-heading-anchor-h3{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;margin:30px 0 15px;font-size:19px;font-weight:400}.sky-docs-tools-heading-anchor-h4{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsHeadingAnchorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-heading-anchor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"sky-docs-heading-anchor\"\n  role=\"heading\"\n  [ngClass]=\"'sky-docs-tools-heading-anchor-h' + headingLevel\"\n  [attr.aria-level]=\"headingLevel\"\n  [attr.id]=\"anchorId || null\"\n>\n  <ng-content></ng-content>\n  <a\n    *ngIf=\"anchorId\"\n    aria-hidden=\"true\"\n    class=\"sky-docs-heading-anchor\"\n    queryParamsHandling=\"merge\"\n    [fragment]=\"anchorId\"\n    [routerLink]=\"[]\"\n  >\n    <sky-icon class=\"sky-docs-heading-anchor-icon\" icon=\"link\"></sky-icon>\n  </a>\n</div>\n", styles: [".sky-docs-heading-anchor{color:#212327}.sky-docs-heading-anchor:hover{text-decoration:none}.sky-docs-heading-anchor:hover .sky-docs-heading-anchor-icon{opacity:1}.sky-docs-heading-anchor:focus .sky-docs-heading-anchor-icon{opacity:1}.sky-docs-heading-anchor-icon{opacity:0;transition:opacity .15s ease-in-out;color:#0974a1;font-weight:400;font-size:18px}.sky-docs-tools-heading-anchor-h1,.sky-docs-tools-heading-anchor-h2,.sky-docs-tools-heading-anchor-h3,.sky-docs-tools-heading-anchor-h4,.sky-docs-tools-heading-anchor-h5,.sky-docs-tools-heading-anchor-h6{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;margin:30px 0 15px}.sky-docs-tools-heading-anchor-h1{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;margin:30px 0 15px;font-weight:300;font-size:34px}.sky-docs-tools-heading-anchor-h2{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;margin:30px 0;font-weight:300;font-size:26px}.sky-docs-tools-heading-anchor-h3{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;margin:30px 0 15px;font-size:19px;font-weight:400}.sky-docs-tools-heading-anchor-h4{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}\n"] }]
-        }], propDecorators: { anchorId: [{
-                type: Input
-            }], headingLevel: [{
-                type: Input
-            }] } });
-
-class SkyDocsHeadingAnchorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsHeadingAnchorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsHeadingAnchorModule, declarations: [SkyDocsHeadingAnchorComponent], imports: [CommonModule, RouterModule, SkyIconModule], exports: [SkyDocsHeadingAnchorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsHeadingAnchorModule, imports: [CommonModule, RouterModule, SkyIconModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsHeadingAnchorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SkyDocsHeadingAnchorComponent],
-                    imports: [CommonModule, RouterModule, SkyIconModule],
-                    exports: [SkyDocsHeadingAnchorComponent],
-                }]
-        }] });
-
-class SkyDocsMarkdownPipe {
-    transform(markdown) {
-        if (!markdown) {
-            return '';
-        }
-        return marked(markdown);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsMarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsMarkdownPipe, isStandalone: false, name: "skyDocsMarkdown" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsMarkdownPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'skyDocsMarkdown',
-                    standalone: false,
-                }]
-        }] });
-
-class SkyDocsMarkdownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsMarkdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsMarkdownModule, declarations: [SkyDocsMarkdownPipe], exports: [SkyDocsMarkdownPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsMarkdownModule, providers: [SkyDocsMarkdownPipe] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsMarkdownModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SkyDocsMarkdownPipe],
-                    providers: [SkyDocsMarkdownPipe],
-                    exports: [SkyDocsMarkdownPipe],
-                }]
-        }] });
-
-class SkyDocsToolsOptions {
-}
-
-class SkyDocsModuleInfoComponent {
-    set gitRepoUrl(value) {
-        this.gitRepoUrlOrDefault = value || this.#options?.gitRepoUrl;
-        this.#updateExternalLinks();
-    }
-    set packageName(value) {
-        this.packageNameOrDefault = value || this.#options?.packageName;
-        this.#updateInstallationCommand();
-        this.#updateExternalLinks();
-    }
-    set packageUrl(value) {
-        this.#packageUrl = value;
-        this.#updateExternalLinks();
-    }
-    #options;
-    #packageUrl;
-    constructor(options) {
-        if (options) {
-            this.#options = options;
-            this.gitRepoUrl = options.gitRepoUrl;
-            this.packageName = options.packageName;
-        }
-    }
-    #updateExternalLinks() {
-        const externalLinks = [];
-        if (this.packageNameOrDefault) {
-            externalLinks.push({
-                url: this.#packageUrl ||
-                    `https://npmjs.org/package/${this.packageNameOrDefault}`,
-                label: 'View in NPM',
-            });
-        }
-        if (this.gitRepoUrlOrDefault) {
-            externalLinks.push({
-                url: this.gitRepoUrlOrDefault,
-                label: 'View in GitHub',
-            });
-        }
-        this.externalLinks = externalLinks;
-    }
-    #updateInstallationCommand() {
-        this.installationCommand = this.packageNameOrDefault
-            ? `npm install --save-exact ${this.packageNameOrDefault}`
-            : '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsModuleInfoComponent, deps: [{ token: SkyDocsToolsOptions, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsModuleInfoComponent, isStandalone: false, selector: "sky-docs-module-info", inputs: { gitRepoUrl: "gitRepoUrl", moduleName: "moduleName", packageName: "packageName", packageUrl: "packageUrl" }, ngImport: i0, template: "<div class=\"sky-docs-module-info\">\n  <sky-description-list class=\"sky-margin-stacked-lg\" mode=\"vertical\">\n    <sky-description-list-content *ngIf=\"moduleName\">\n      <sky-description-list-term> Defined in </sky-description-list-term>\n      <sky-description-list-description>\n        <sky-code class=\"sky-docs-module-info-module-name\">{{\n          moduleName\n        }}</sky-code>\n      </sky-description-list-description>\n    </sky-description-list-content>\n\n    <sky-description-list-content *ngIf=\"packageNameOrDefault\">\n      <sky-description-list-term>NPM package</sky-description-list-term>\n      <sky-description-list-description>\n        <span class=\"sky-docs-module-info-package-name\"\n          ><sky-code>{{ packageNameOrDefault }}</sky-code></span\n        >\n        <ng-container *ngFor=\"let externalLink of externalLinks; let i = index\">\n          <a\n            class=\"sky-docs-module-info-external-link\"\n            [href]=\"externalLink.url\"\n            >{{ externalLink.label }}</a\n          >\n          <span *ngIf=\"i < externalLinks.length - 1\"> | </span>\n        </ng-container>\n      </sky-description-list-description>\n    </sky-description-list-content>\n\n    <sky-description-list-content *ngIf=\"installationCommand\">\n      <sky-description-list-term>\n        Installation\n        <sky-help-inline\n          *ngIf=\"moduleName\"\n          class=\"sky-control-help\"\n          [skyPopover]=\"installationCommandPopover\"\n          skyPopoverPlacement=\"right\"\n        >\n        </sky-help-inline>\n      </sky-description-list-term>\n      <sky-description-list-description>\n        <sky-popover #installationCommandPopover>\n          To use this module, you must install peer dependencies along with its\n          package. Also, after you install the package, you must add the module\n          as an export in your SPA's main module to make exports available to\n          your SPA.\n        </sky-popover>\n        <div class=\"sky-docs-module-info-installation-command\">\n          <span\n            class=\"sky-docs-module-info-installation-command-code\"\n            #copyTarget\n          >\n            <sky-code>{{ installationCommand }}</sky-code>\n          </span>\n          <sky-copy-to-clipboard\n            buttonText=\"Copy\"\n            [copyTarget]=\"copyTarget\"\n          ></sky-copy-to-clipboard>\n        </div>\n      </sky-description-list-description>\n    </sky-description-list-content>\n  </sky-description-list>\n\n  <div class=\"sky-docs-module-info-additional-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-docs-module-info-installation-command{display:flex}.sky-docs-module-info-installation-command-code,.sky-docs-module-info-package-name{margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.λ1, selector: "sky-code" }, { kind: "component", type: i4$1.λ1, selector: "sky-copy-to-clipboard", inputs: ["ariaLabel", "ariaLabelledBy", "copyTarget", "buttonText", "buttonClickedText", "title"] }, { kind: "component", type: i5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i5.λ20, selector: "sky-description-list-description" }, { kind: "component", type: i6$1.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i7$1.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i7$1.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsModuleInfoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-module-info', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-docs-module-info\">\n  <sky-description-list class=\"sky-margin-stacked-lg\" mode=\"vertical\">\n    <sky-description-list-content *ngIf=\"moduleName\">\n      <sky-description-list-term> Defined in </sky-description-list-term>\n      <sky-description-list-description>\n        <sky-code class=\"sky-docs-module-info-module-name\">{{\n          moduleName\n        }}</sky-code>\n      </sky-description-list-description>\n    </sky-description-list-content>\n\n    <sky-description-list-content *ngIf=\"packageNameOrDefault\">\n      <sky-description-list-term>NPM package</sky-description-list-term>\n      <sky-description-list-description>\n        <span class=\"sky-docs-module-info-package-name\"\n          ><sky-code>{{ packageNameOrDefault }}</sky-code></span\n        >\n        <ng-container *ngFor=\"let externalLink of externalLinks; let i = index\">\n          <a\n            class=\"sky-docs-module-info-external-link\"\n            [href]=\"externalLink.url\"\n            >{{ externalLink.label }}</a\n          >\n          <span *ngIf=\"i < externalLinks.length - 1\"> | </span>\n        </ng-container>\n      </sky-description-list-description>\n    </sky-description-list-content>\n\n    <sky-description-list-content *ngIf=\"installationCommand\">\n      <sky-description-list-term>\n        Installation\n        <sky-help-inline\n          *ngIf=\"moduleName\"\n          class=\"sky-control-help\"\n          [skyPopover]=\"installationCommandPopover\"\n          skyPopoverPlacement=\"right\"\n        >\n        </sky-help-inline>\n      </sky-description-list-term>\n      <sky-description-list-description>\n        <sky-popover #installationCommandPopover>\n          To use this module, you must install peer dependencies along with its\n          package. Also, after you install the package, you must add the module\n          as an export in your SPA's main module to make exports available to\n          your SPA.\n        </sky-popover>\n        <div class=\"sky-docs-module-info-installation-command\">\n          <span\n            class=\"sky-docs-module-info-installation-command-code\"\n            #copyTarget\n          >\n            <sky-code>{{ installationCommand }}</sky-code>\n          </span>\n          <sky-copy-to-clipboard\n            buttonText=\"Copy\"\n            [copyTarget]=\"copyTarget\"\n          ></sky-copy-to-clipboard>\n        </div>\n      </sky-description-list-description>\n    </sky-description-list-content>\n  </sky-description-list>\n\n  <div class=\"sky-docs-module-info-additional-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-docs-module-info-installation-command{display:flex}.sky-docs-module-info-installation-command-code,.sky-docs-module-info-package-name{margin-right:10px}\n"] }]
-        }], ctorParameters: () => [{ type: SkyDocsToolsOptions, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { gitRepoUrl: [{
-                type: Input
-            }], moduleName: [{
-                type: Input
-            }], packageName: [{
-                type: Input
-            }], packageUrl: [{
-                type: Input
-            }] } });
-
-class SkyDocsModuleInfoModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsModuleInfoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsModuleInfoModule, declarations: [SkyDocsModuleInfoComponent], imports: [CommonModule,
-            SkyCodeModule,
-            SkyClipboardModule,
-            SkyDescriptionListModule,
-            SkyHelpInlineModule,
-            SkyPopoverModule], exports: [SkyDocsModuleInfoComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsModuleInfoModule, imports: [CommonModule,
-            SkyCodeModule,
-            SkyClipboardModule,
-            SkyDescriptionListModule,
-            SkyHelpInlineModule,
-            SkyPopoverModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsModuleInfoModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        SkyCodeModule,
-                        SkyClipboardModule,
-                        SkyDescriptionListModule,
-                        SkyHelpInlineModule,
-                        SkyPopoverModule,
-                    ],
-                    declarations: [SkyDocsModuleInfoComponent],
-                    exports: [SkyDocsModuleInfoComponent],
-                }]
-        }] });
-
-class SkyDocsSafeHtmlComponent {
-    constructor(domSanitizer) {
-        this.domSanitizer = domSanitizer;
-    }
-    getTrustedHtml(content) {
-        return this.domSanitizer.bypassSecurityTrustHtml(content);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsSafeHtmlComponent, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsSafeHtmlComponent, isStandalone: false, selector: "sky-docs-safe-html", inputs: { innerHtml: "innerHtml" }, ngImport: i0, template: "<div class=\"sky-docs-safe-html\" [innerHtml]=\"getTrustedHtml(innerHtml)\"></div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsSafeHtmlComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-safe-html', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-docs-safe-html\" [innerHtml]=\"getTrustedHtml(innerHtml)\"></div>\n" }]
-        }], ctorParameters: () => [{ type: i1$4.DomSanitizer }], propDecorators: { innerHtml: [{
-                type: Input
-            }] } });
-
-class SkyDocsSafeHtmlModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsSafeHtmlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsSafeHtmlModule, declarations: [SkyDocsSafeHtmlComponent], imports: [CommonModule], exports: [SkyDocsSafeHtmlComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsSafeHtmlModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsSafeHtmlModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SkyDocsSafeHtmlComponent],
-                    imports: [CommonModule],
-                    exports: [SkyDocsSafeHtmlComponent],
-                }]
-        }] });
-
-/**
- * Formats type definitions into HTML-compatible strings.
- */
-class SkyDocsTypeDefinitionsFormatService {
-    /**
-     * Returns an HTML-formatted representation of the provided interface config.
-     */
-    getInterfaceSourceCode(definition) {
-        const typeParameters = this.getFormattedTypeParameters(definition.typeParameters);
-        const config = {
-            escapeSpecialCharacters: false,
-        };
-        let signature = `interface ${definition.name}${typeParameters} {`;
-        signature += this.getFormattedInterfaceProperties(definition, config);
-        signature += '\n}';
-        return signature;
-    }
-    /**
-     * Returns an HTML-formatted representation of the provided method config.
-     */
-    getMethodSourceCode(definition) {
-        const config = {
-            escapeSpecialCharacters: false,
-        };
-        const typeArguments = this.getFormattedTypeArguments(definition.type, config);
-        const callSignature = definition.type.callSignature;
-        const returnType = this.getFormattedType(callSignature.returnType, config);
-        let params = '';
-        if (callSignature.parameters) {
-            params += callSignature.parameters
-                .map((p) => this.getFormattedParameterName(p, config))
-                .join(', ');
-        }
-        return `public ${definition.isStatic ? 'static ' : ''}${definition.name}${typeArguments}(${params}): ${returnType}`;
-    }
-    /**
-     * Returns an HTML-formatted representation of the provided type alias config.
-     */
-    getTypeAliasSourceCode(definition) {
-        const config = {
-            escapeSpecialCharacters: false,
-        };
-        const typeParameters = this.getFormattedTypeParameters(definition.typeParameters);
-        let signature = `type ${definition.name}${typeParameters} = `;
-        if (definition.type.callSignature) {
-            signature += this.getFormattedCallSignature(definition.type.callSignature, {
-                escapeSpecialCharacters: false,
-            });
-        }
-        else if (definition.type.indexSignature) {
-            const indexSignature = definition.type.indexSignature;
-            const type = this.getFormattedType(indexSignature.type, {
-                escapeSpecialCharacters: false,
-            });
-            signature += `{\n  [${indexSignature.key.name}: string]: ${type};\n}`;
-        }
-        else {
-            /*istanbul ignore else */
-            if (definition.type.type === 'union') {
-                signature += this.getFormattedUnion(definition.type, config);
-            }
-        }
-        return signature;
-    }
-    /**
-     * Returns a formatted string representing a parameter's name and value. For example: `'foo: string'`.
-     */
-    getFormattedParameterName(parameter, config = {
-        escapeSpecialCharacters: true,
-    }) {
-        const optionalMarker = parameter.isOptional ? '?' : '';
-        const parameterType = this.getFormattedType(parameter.type, config);
-        let signature = `${parameter.name}${optionalMarker}: ${parameterType}`;
-        if (config.escapeSpecialCharacters) {
-            signature = this.escapeSpecialCharacters(signature);
-        }
-        return signature;
-    }
-    /**
-     * Returns a formatted string representing a property (or method's) name and value. For example: `'public foo: string'`.
-     */
-    getFormattedPropertyName(property) {
-        let signature = '';
-        const indexSignature = property.type?.indexSignature;
-        let name;
-        if (indexSignature) {
-            name = `[${indexSignature.key.name}: ${this.getFormattedType(indexSignature.key.type)}]`;
-        }
-        else {
-            name = property.name;
-        }
-        if (property.deprecationWarning !== undefined) {
-            signature += `<strike>${name}</strike>`;
-        }
-        else {
-            signature += name;
-        }
-        if (property.decorator?.name !== 'Output' &&
-            property.isOptional &&
-            !indexSignature) {
-            signature += '?';
-        }
-        if (indexSignature) {
-            signature += `: ${this.getFormattedType(indexSignature.type)}`;
-        }
-        else if (property.type) {
-            signature += `: ${this.getFormattedType(property.type)}`;
-        }
-        return signature;
-    }
-    /**
-     * Returns an HTML-formatted method name to be used on the properties table.
-     */
-    getFormattedMethodName(definition) {
-        let formatted = '';
-        if (definition.isStatic) {
-            formatted += `${definition.parentName}.`;
-        }
-        if (definition.deprecationWarning !== undefined) {
-            formatted = `<strike>${formatted}${definition.name}</strike>`;
-        }
-        else {
-            formatted += definition.name;
-        }
-        return `${formatted}()`;
-    }
-    /**
-     * Returns a formatted string representing the provided type.
-     */
-    getFormattedType(type, config = {
-        escapeSpecialCharacters: true,
-    }) {
-        let formatted = 'any';
-        if (!type) {
-            return formatted;
-        }
-        if (type.name === 'InputSignal' &&
-            type.package === '@angular/core' &&
-            type.typeArguments?.length) {
-            type = type.typeArguments[0];
-        }
-        if (type.callSignature) {
-            let formattedSignature = this.getFormattedCallSignature(type.callSignature, config);
-            if (type.type === 'array') {
-                formattedSignature = `(${formattedSignature})[]`;
-            }
-            return formattedSignature;
-        }
-        if (type.unionTypes) {
-            return this.getFormattedUnion(type, config);
-        }
-        if (type.name !== null && type.name !== undefined) {
-            formatted = `${type.name}`;
-        }
-        if (type.typeArguments) {
-            formatted += this.getFormattedTypeArguments(type, config);
-        }
-        if (type.type === 'array') {
-            formatted += '[]';
-        }
-        if (type.type === 'literal' && typeof type.name === 'string') {
-            formatted = `'${formatted}'`;
-        }
-        if (type.typeLiteral) {
-            const formattedTypeLiteral = this.getFormattedInterfaceProperties(type.typeLiteral, config)
-                .replace(/\n/g, ' ')
-                .replace(/\s\s+/g, ' ');
-            formatted = `{${formattedTypeLiteral} }`;
-        }
-        if (config.escapeSpecialCharacters) {
-            return this.escapeSpecialCharacters(formatted);
-        }
-        return formatted;
-    }
-    escapeSpecialCharacters(value) {
-        return value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
-    }
-    getFormattedCallSignature(callSignature, config) {
-        const returnType = this.getFormattedType(callSignature.returnType, config);
-        if (!callSignature.parameters) {
-            return `() => ${returnType}`;
-        }
-        const formattedParams = callSignature.parameters
-            .map((p) => this.getFormattedParameterName(p, config))
-            .join(', ');
-        return `(${formattedParams}) => ${returnType}`;
-    }
-    getFormattedUnion(typeConfig, config) {
-        return typeConfig.unionTypes
-            .map((t) => {
-            return this.getFormattedType(t, config);
-        })
-            .join(' | ');
-    }
-    /**
-     * Parse any type arguments e.g. `<T, F>`.
-     */
-    getFormattedTypeArguments(typeConfig, config) {
-        if (!typeConfig.typeArguments) {
-            return '';
-        }
-        const typeArguments = typeConfig.typeArguments.map((typeArgument) => {
-            if (typeArgument.type === 'array') {
-                return `${typeArgument.name}[]`;
-            }
-            if (typeArgument.unionTypes) {
-                return this.getFormattedUnion(typeArgument, config);
-            }
-            return typeArgument.name;
-        });
-        return `<${typeArguments.join(', ')}>`;
-    }
-    getFormattedTypeParameters(typeParameters) {
-        if (!typeParameters) {
-            return '';
-        }
-        const formatted = typeParameters.map((typeParameter) => {
-            let result = typeParameter.name;
-            if (typeParameter.type && typeParameter.type.type === 'reference') {
-                result += ` extends ${typeParameter.type.name}`;
-            }
-            return result;
-        });
-        return `<${formatted.join(', ')}>`;
-    }
-    getFormattedInterfaceProperties(definition, config) {
-        let signature = '';
-        definition.properties.forEach((property) => {
-            const indexSignature = property.type.indexSignature;
-            const optionalIndicator = property.isOptional && !indexSignature ? '?' : '';
-            const propertyType = this.getFormattedType(property.type, config);
-            let name;
-            if (indexSignature) {
-                name = `[${indexSignature.key.name}: string]`;
-            }
-            else {
-                name = property.name;
-            }
-            signature += `\n  ${name}${optionalIndicator}: ${propertyType};`;
-        });
-        return signature;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDefinitionsFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDefinitionsFormatService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDefinitionsFormatService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class SkyDocsTypeDefinitionsProvider {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDefinitionsProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDefinitionsProvider }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDefinitionsProvider, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * Finds any type name that is NOT surrounded by alpha-numeric (and '>', '<', '.') characters.
- * (This is to avoid matching types that share similar words, such as `Foo` and `FooUser`.)
- * Notes:
- *  - If the type name is surrounded by angle brackets, then it has already been processed as a link.
- *  - If the type name starts with a period '.', then it is a sub property of an enumeration, etc. and should not be processed as a link.
- *  - If the type name ends with a period followed immediately by any word character, then it is a method or property (Foo.bar).
- *    Only the type name should be processed as a link.
- */
-function createRegex(keyword) {
-    return new RegExp(`(^|[^a-zA-Z0-9>.[/])(${keyword})(\\.\\w+)?(?=[^a-zA-Z0-9<]+|$)`, 'g');
-}
-class SkyDocsAnchorLinkService {
-    constructor(typeDefinitionsProvider) {
-        this.anchorIds = typeDefinitionsProvider.anchorIds;
-    }
-    /**
-     * Formats known type names with `<code>` tags and wraps them with anchor tags, linking to the appropriate type.
-     * If the content is already contained within a `<code>` tag, set `codeFormat = false` to prevent extra `<code>` tags from being added.
-     */
-    applyTypeAnchorLinks(content, config) {
-        if (!this.anchorIds || !content) {
-            return content;
-        }
-        // Set default for code formatting.
-        if (!config) {
-            config = {
-                applyCodeFormatting: true,
-            };
-        }
-        content = this.removeDoubleSquareBrackets(content);
-        Object.keys(this.anchorIds).forEach((typeName) => {
-            content = this.removeBackticks(typeName, content);
-            let matches;
-            let counter = 0;
-            const max = 100;
-            const regex = createRegex(typeName);
-            do {
-                matches = regex.exec(content);
-                if (matches) {
-                    const anchorId = this.anchorIds[typeName];
-                    const anchorHtml = '<a class="sky-docs-anchor-link" href="#' +
-                        anchorId +
-                        '">' +
-                        typeName +
-                        '</a>';
-                    // Group 3 of the regex pattern captures type properties like Foo.bar.
-                    // If these are found, they do not need hyperlinked, but add them to the encapsulating code tag.
-                    const typeProperty = matches[3] ? matches[3] : '';
-                    let replacement;
-                    if (config.applyCodeFormatting) {
-                        replacement = '<code>' + anchorHtml + typeProperty + '</code>';
-                    }
-                    else {
-                        replacement = anchorHtml + typeProperty;
-                    }
-                    // Regex Positive lookbehinds aren't supported in IE11 and Safari, so we have to check if the match has a starting extra character
-                    // (usually whitespace " Foo"), and then modify the starting/ending indexes to account for the extra character.
-                    const isMatchExact = matches[0].substr(0, typeName.length) === typeName;
-                    const startIndex = isMatchExact ? matches.index : matches.index + 1;
-                    const endIndex = isMatchExact
-                        ? matches[0].length
-                        : matches[0].length - 1;
-                    let contentWithCodeTags = content.substr(0, startIndex) +
-                        replacement +
-                        content.substr(startIndex + endIndex);
-                    content = contentWithCodeTags;
-                    counter++;
-                }
-            } while (matches !== null && counter < max);
-        });
-        return content;
-    }
-    /**
-     * For backwards compatibility, we need to remove any double brackets wrapped around types.
-     * e.g., `[[SampleType]]`
-     */
-    removeDoubleSquareBrackets(content) {
-        const match = content.match(/\[\[.*\]\]/);
-        if (match) {
-            const typeName = match[0].replace(/\[\[/g, '').replace(/\]\]/g, '');
-            content = content.replace(match[0], typeName);
-        }
-        return content;
-    }
-    /**
-     * Removes backtick characters around known types to prevent
-     * the markdown pipe from wrapping them with code elements.
-     */
-    removeBackticks(typeName, content) {
-        const regexp = new RegExp(`\`(${typeName})\``, 'g');
-        return content.replace(regexp, typeName);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsAnchorLinkService, deps: [{ token: SkyDocsTypeDefinitionsProvider }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsAnchorLinkService, providedIn: 'any' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsAnchorLinkService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'any',
-                }]
-        }], ctorParameters: () => [{ type: SkyDocsTypeDefinitionsProvider }] });
-
-/**
- * Adds same-page anchor tags around known TypeScript types.
- */
-class SkyDocsTypeAnchorLinksPipe {
-    constructor(anchorLinkService) {
-        this.anchorLinkService = anchorLinkService;
-    }
-    transform(value, formatType) {
-        const anchorLinkConfig = {
-            applyCodeFormatting: formatType !== 'no-code-tags',
-        };
-        return this.anchorLinkService.applyTypeAnchorLinks(value, anchorLinkConfig);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeAnchorLinksPipe, deps: [{ token: SkyDocsAnchorLinkService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeAnchorLinksPipe, isStandalone: false, name: "skyDocsTypeAnchorLinks" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeAnchorLinksPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'skyDocsTypeAnchorLinks',
-                    pure: true,
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: SkyDocsAnchorLinkService }] });
-
-/**
- * "Call signatures" include methods, functions, and inline arrow functions.
- * This component is used to document both the return type and parameters of a given call signature.
- */
-class SkyDocsCallSignatureDefinitionComponent {
-    set config(value) {
-        this._config = value;
-        this.updateView();
-    }
-    get config() {
-        return this._config;
-    }
-    constructor(formatService) {
-        this.formatService = formatService;
-    }
-    updateView() {
-        this.parameters = this.config?.parameters?.map((p) => {
-            const vm = {
-                defaultValue: p.defaultValue,
-                description: p.description,
-                formattedName: this.formatService.getFormattedParameterName(p),
-                isOptional: p.isOptional,
-            };
-            return vm;
-        });
-        this.returnTypeFormatted = this.formatService.getFormattedType(this.config?.returnType);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsCallSignatureDefinitionComponent, deps: [{ token: SkyDocsTypeDefinitionsFormatService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsCallSignatureDefinitionComponent, isStandalone: false, selector: "sky-docs-call-signature-definition", inputs: { config: "config" }, ngImport: i0, template: "<div *ngIf=\"config\" class=\"sky-docs-call-signature-definition\">\n  <ng-container *ngIf=\"parameters\">\n    <h4 class=\"sky-docs-call-signature-definition-heading\">Parameters</h4>\n    <table class=\"sky-docs-parameter-definitions\">\n      <tbody>\n        <tr *ngFor=\"let parameter of parameters\">\n          <th class=\"sky-docs-parameter-definition-header\">\n            <sky-code\n              ><span\n                [innerHtml]=\"\n                  parameter.formattedName\n                    | skyDocsTypeAnchorLinks: 'no-code-tags'\n                \"\n              ></span\n            ></sky-code>\n          </th>\n          <td class=\"sky-docs-parameter-definition-body\">\n            <div\n              *ngIf=\"parameter.description\"\n              class=\"sky-docs-parameter-definition-description\"\n            >\n              <sky-docs-safe-html\n                *ngIf=\"parameter.description\"\n                [innerHtml]=\"\n                  parameter.description\n                    | skyDocsTypeAnchorLinks\n                    | skyDocsMarkdown\n                \"\n              ></sky-docs-safe-html>\n            </div>\n            <div\n              *ngIf=\"parameter.isOptional\"\n              class=\"sky-docs-parameter-definition-label-optional\"\n            >\n              Optional.\n              <ng-container *ngIf=\"parameter.defaultValue\">\n                Default is\n                <sky-code\n                  ><span\n                    [innerHtml]=\"\n                      parameter.defaultValue\n                        | skyDocsTypeAnchorLinks: 'no-code-tags'\n                    \"\n                  ></span></sky-code\n                >.\n              </ng-container>\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </ng-container>\n\n  <ng-container *ngIf=\"returnTypeFormatted\">\n    <h4 class=\"sky-docs-call-signature-definition-heading\">Returns</h4>\n\n    <div class=\"sky-docs-call-signature-definition-return-type\">\n      <sky-code\n        ><span\n          [innerHtml]=\"\n            returnTypeFormatted | skyDocsTypeAnchorLinks: 'no-code-tags'\n          \"\n        ></span\n      ></sky-code>\n    </div>\n  </ng-container>\n</div>\n", styles: [".sky-docs-call-signature-definition-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}.sky-docs-parameter-definitions{width:auto;max-width:100%;border-spacing:0;border-collapse:collapse;background-color:#fff;margin-left:15px}.sky-docs-parameter-definitions th,.sky-docs-parameter-definitions td{padding:10px;border-bottom:1px dotted #cdcfd2;vertical-align:top;text-align:left}.sky-docs-parameter-definitions th ::ng-deep:first-child .sky-code,.sky-docs-parameter-definitions td ::ng-deep:first-child .sky-code{display:inline-block;white-space:normal}.sky-docs-parameter-definitions th ::ng-deep p,.sky-docs-parameter-definitions td ::ng-deep p{margin:10px 0}.sky-docs-parameter-definitions th ::ng-deep p:first-child,.sky-docs-parameter-definitions td ::ng-deep p:first-child{margin-top:0!important}.sky-docs-parameter-definitions th ::ng-deep p:last-child,.sky-docs-parameter-definitions td ::ng-deep p:last-child{margin-bottom:0!important}.sky-docs-parameter-definitions th{width:25%;padding-left:0}.sky-docs-parameter-definitions tr:first-child>th,.sky-docs-parameter-definitions tr:first-child>td{padding-top:0}.sky-docs-parameter-definitions tr:last-child>th,.sky-docs-parameter-definitions tr:last-child>td{border-bottom:0;padding-bottom:0}.sky-docs-parameter-definition-header{width:1%;white-space:nowrap;font-weight:400}.sky-docs-parameter-definition-label-optional{color:#686c73}.sky-docs-call-signature-definition-return-type{margin-left:15px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.λ1, selector: "sky-code" }, { kind: "component", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "pipe", type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsCallSignatureDefinitionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-call-signature-definition', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div *ngIf=\"config\" class=\"sky-docs-call-signature-definition\">\n  <ng-container *ngIf=\"parameters\">\n    <h4 class=\"sky-docs-call-signature-definition-heading\">Parameters</h4>\n    <table class=\"sky-docs-parameter-definitions\">\n      <tbody>\n        <tr *ngFor=\"let parameter of parameters\">\n          <th class=\"sky-docs-parameter-definition-header\">\n            <sky-code\n              ><span\n                [innerHtml]=\"\n                  parameter.formattedName\n                    | skyDocsTypeAnchorLinks: 'no-code-tags'\n                \"\n              ></span\n            ></sky-code>\n          </th>\n          <td class=\"sky-docs-parameter-definition-body\">\n            <div\n              *ngIf=\"parameter.description\"\n              class=\"sky-docs-parameter-definition-description\"\n            >\n              <sky-docs-safe-html\n                *ngIf=\"parameter.description\"\n                [innerHtml]=\"\n                  parameter.description\n                    | skyDocsTypeAnchorLinks\n                    | skyDocsMarkdown\n                \"\n              ></sky-docs-safe-html>\n            </div>\n            <div\n              *ngIf=\"parameter.isOptional\"\n              class=\"sky-docs-parameter-definition-label-optional\"\n            >\n              Optional.\n              <ng-container *ngIf=\"parameter.defaultValue\">\n                Default is\n                <sky-code\n                  ><span\n                    [innerHtml]=\"\n                      parameter.defaultValue\n                        | skyDocsTypeAnchorLinks: 'no-code-tags'\n                    \"\n                  ></span></sky-code\n                >.\n              </ng-container>\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </ng-container>\n\n  <ng-container *ngIf=\"returnTypeFormatted\">\n    <h4 class=\"sky-docs-call-signature-definition-heading\">Returns</h4>\n\n    <div class=\"sky-docs-call-signature-definition-return-type\">\n      <sky-code\n        ><span\n          [innerHtml]=\"\n            returnTypeFormatted | skyDocsTypeAnchorLinks: 'no-code-tags'\n          \"\n        ></span\n      ></sky-code>\n    </div>\n  </ng-container>\n</div>\n", styles: [".sky-docs-call-signature-definition-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}.sky-docs-parameter-definitions{width:auto;max-width:100%;border-spacing:0;border-collapse:collapse;background-color:#fff;margin-left:15px}.sky-docs-parameter-definitions th,.sky-docs-parameter-definitions td{padding:10px;border-bottom:1px dotted #cdcfd2;vertical-align:top;text-align:left}.sky-docs-parameter-definitions th ::ng-deep:first-child .sky-code,.sky-docs-parameter-definitions td ::ng-deep:first-child .sky-code{display:inline-block;white-space:normal}.sky-docs-parameter-definitions th ::ng-deep p,.sky-docs-parameter-definitions td ::ng-deep p{margin:10px 0}.sky-docs-parameter-definitions th ::ng-deep p:first-child,.sky-docs-parameter-definitions td ::ng-deep p:first-child{margin-top:0!important}.sky-docs-parameter-definitions th ::ng-deep p:last-child,.sky-docs-parameter-definitions td ::ng-deep p:last-child{margin-bottom:0!important}.sky-docs-parameter-definitions th{width:25%;padding-left:0}.sky-docs-parameter-definitions tr:first-child>th,.sky-docs-parameter-definitions tr:first-child>td{padding-top:0}.sky-docs-parameter-definitions tr:last-child>th,.sky-docs-parameter-definitions tr:last-child>td{border-bottom:0;padding-bottom:0}.sky-docs-parameter-definition-header{width:1%;white-space:nowrap;font-weight:400}.sky-docs-parameter-definition-label-optional{color:#686c73}.sky-docs-call-signature-definition-return-type{margin-left:15px}\n"] }]
-        }], ctorParameters: () => [{ type: SkyDocsTypeDefinitionsFormatService }], propDecorators: { config: [{
-                type: Input
-            }] } });
-
-class SkyDocsPreviewIndicatorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsPreviewIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsPreviewIndicatorComponent, isStandalone: true, selector: "sky-docs-preview-feature-indicator", ngImport: i0, template: "<sky-status-indicator indicatorType=\"warning\" descriptionType=\"warning\"\n  >Preview. This feature may not be fully represented in the design\n  documentation, the demo, or code examples.</sky-status-indicator\n>\n", dependencies: [{ kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i1$5.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsPreviewIndicatorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-preview-feature-indicator', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyStatusIndicatorModule], template: "<sky-status-indicator indicatorType=\"warning\" descriptionType=\"warning\"\n  >Preview. This feature may not be fully represented in the design\n  documentation, the demo, or code examples.</sky-status-indicator\n>\n" }]
-        }] });
-
-class SkyDocsPropertyDefinitionsComponent {
-    set config(value) {
-        this._config = value;
-        this.updateView();
-    }
-    get config() {
-        return this._config || {};
-    }
-    constructor(changeDetector, formatService, mediaQueryService) {
-        this.changeDetector = changeDetector;
-        this.formatService = formatService;
-        this.mediaQueryService = mediaQueryService;
-        this.propertyType = 'Property';
-        this.showOptionalStatus = true;
-        this.deprecationWarningPrefix = `<span class="sky-text-warning"></span>**Deprecated.** `;
-        this.isMobile = true;
-        this.properties = [];
-    }
-    ngOnInit() {
-        this.mediaQueryService.subscribe((breakpoints) => {
-            this.isMobile = breakpoints <= SkyMediaBreakpoints.sm;
-            this.changeDetector.markForCheck();
-        });
-    }
-    updateView() {
-        this.properties = this.config?.properties?.map((property) => {
-            const vm = {
-                callSignature: property.type?.callSignature,
-                defaultValue: this.formatService.escapeSpecialCharacters(property.defaultValue || ''),
-                deprecationWarning: property.deprecationWarning,
-                description: property.description,
-                formattedName: this.formatService.getFormattedPropertyName(property),
-                isOutput: property.decorator?.name === 'Output',
-                isOptional: property.isOptional,
-                isPreview: property.isPreview,
-            };
-            return vm;
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsPropertyDefinitionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDocsTypeDefinitionsFormatService }, { token: i2.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsPropertyDefinitionsComponent, isStandalone: false, selector: "sky-docs-property-definitions", inputs: { config: "config", propertyType: "propertyType", showOptionalStatus: "showOptionalStatus" }, ngImport: i0, template: "<div *ngIf=\"properties\" class=\"sky-docs-property-definitions\">\n  <table *ngIf=\"!isMobile; else mobileTemplate\" class=\"sky-docs-table\">\n    <thead>\n      <tr class=\"sky-docs-table-row\">\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n        >\n          {{ propertyType }}\n        </th>\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n        >\n          Description\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let property of properties\" class=\"sky-docs-table-row\">\n        <td\n          class=\"sky-docs-table-cell sky-docs-property-definitions-table-cell-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </td>\n        <td\n          class=\"sky-docs-table-cell sky-docs-property-definitions-table-cell-description\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n\n  <ng-template #mobileTemplate>\n    <dl class=\"sky-docs-property-definition-list\">\n      <div\n        *ngFor=\"let property of properties\"\n        class=\"sky-docs-property-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">{{ propertyType }}</dt>\n        <dd class=\"sky-docs-property-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-property-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n  </ng-template>\n</div>\n\n<ng-template let-property #nameTemplate>\n  <sky-code\n    ><span\n      [innerHtml]=\"\n        property.formattedName | skyDocsTypeAnchorLinks: 'no-code-tags'\n      \"\n    ></span\n  ></sky-code>\n</ng-template>\n\n<ng-template let-property #descriptionTemplate>\n  <div\n    *ngIf=\"!property.isOutput && !property.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label\"\n  >\n    <sky-status-indicator indicatorType=\"danger\" descriptionType=\"danger\"\n      >Required.</sky-status-indicator\n    >\n  </div>\n  <div\n    *ngIf=\"property.isPreview\"\n    class=\"sky-docs-property-definition-preview-warning sky-docs-property-definition-label\"\n  >\n    <sky-docs-preview-feature-indicator></sky-docs-preview-feature-indicator>\n  </div>\n\n  <sky-docs-safe-html\n    *ngIf=\"property.deprecationWarning !== undefined\"\n    class=\"sky-docs-property-definitions-deprecation-warning\"\n    [innerHtml]=\"\n      deprecationWarningPrefix + property.deprecationWarning\n        | skyDocsTypeAnchorLinks\n        | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <sky-docs-safe-html\n    *ngIf=\"property.description\"\n    class=\"sky-docs-property-definitions-description\"\n    [innerHtml]=\"\n      property.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <div\n    *ngIf=\"!property.isOutput && property.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label sky-docs-property-definition-label-optional\"\n  >\n    Optional.\n    <ng-container *ngIf=\"property.defaultValue\"\n      >Default is\n      <sky-code\n        ><span\n          [innerHtml]=\"\n            property.defaultValue | skyDocsTypeAnchorLinks: 'no-code-tags'\n          \"\n        ></span></sky-code\n      >.</ng-container\n    >\n  </div>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"property.callSignature\"\n    [config]=\"property.callSignature\"\n  ></sky-docs-call-signature-definition>\n</ng-template>\n", styles: [":host{margin:15px 0}.sky-docs-property-definitions{width:100%;max-width:100%}.sky-docs-property-definitions th{position:sticky;top:var(--sky-viewport-top, 0);z-index:1}.sky-docs-property-definitions-table-cell-description{word-break:break-word}.sky-docs-table-column-header-name{width:25%}.sky-docs-property-definition-label-optional{color:#686c73;margin-bottom:10px}.sky-docs-property-definition-list{margin:0}.sky-docs-property-definition-list-item{border-bottom:1px dotted #cdcfd2;margin:10px 0}.sky-docs-property-definition-list-item .sky-field-label{margin:10px 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.λ1, selector: "sky-code" }, { kind: "component", type: SkyDocsPreviewIndicatorComponent, selector: "sky-docs-preview-feature-indicator" }, { kind: "component", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { kind: "component", type: i1$5.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { kind: "component", type: SkyDocsCallSignatureDefinitionComponent, selector: "sky-docs-call-signature-definition", inputs: ["config"] }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "pipe", type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsPropertyDefinitionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-property-definitions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div *ngIf=\"properties\" class=\"sky-docs-property-definitions\">\n  <table *ngIf=\"!isMobile; else mobileTemplate\" class=\"sky-docs-table\">\n    <thead>\n      <tr class=\"sky-docs-table-row\">\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n        >\n          {{ propertyType }}\n        </th>\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n        >\n          Description\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let property of properties\" class=\"sky-docs-table-row\">\n        <td\n          class=\"sky-docs-table-cell sky-docs-property-definitions-table-cell-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </td>\n        <td\n          class=\"sky-docs-table-cell sky-docs-property-definitions-table-cell-description\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n\n  <ng-template #mobileTemplate>\n    <dl class=\"sky-docs-property-definition-list\">\n      <div\n        *ngFor=\"let property of properties\"\n        class=\"sky-docs-property-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">{{ propertyType }}</dt>\n        <dd class=\"sky-docs-property-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-property-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n  </ng-template>\n</div>\n\n<ng-template let-property #nameTemplate>\n  <sky-code\n    ><span\n      [innerHtml]=\"\n        property.formattedName | skyDocsTypeAnchorLinks: 'no-code-tags'\n      \"\n    ></span\n  ></sky-code>\n</ng-template>\n\n<ng-template let-property #descriptionTemplate>\n  <div\n    *ngIf=\"!property.isOutput && !property.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label\"\n  >\n    <sky-status-indicator indicatorType=\"danger\" descriptionType=\"danger\"\n      >Required.</sky-status-indicator\n    >\n  </div>\n  <div\n    *ngIf=\"property.isPreview\"\n    class=\"sky-docs-property-definition-preview-warning sky-docs-property-definition-label\"\n  >\n    <sky-docs-preview-feature-indicator></sky-docs-preview-feature-indicator>\n  </div>\n\n  <sky-docs-safe-html\n    *ngIf=\"property.deprecationWarning !== undefined\"\n    class=\"sky-docs-property-definitions-deprecation-warning\"\n    [innerHtml]=\"\n      deprecationWarningPrefix + property.deprecationWarning\n        | skyDocsTypeAnchorLinks\n        | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <sky-docs-safe-html\n    *ngIf=\"property.description\"\n    class=\"sky-docs-property-definitions-description\"\n    [innerHtml]=\"\n      property.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <div\n    *ngIf=\"!property.isOutput && property.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label sky-docs-property-definition-label-optional\"\n  >\n    Optional.\n    <ng-container *ngIf=\"property.defaultValue\"\n      >Default is\n      <sky-code\n        ><span\n          [innerHtml]=\"\n            property.defaultValue | skyDocsTypeAnchorLinks: 'no-code-tags'\n          \"\n        ></span></sky-code\n      >.</ng-container\n    >\n  </div>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"property.callSignature\"\n    [config]=\"property.callSignature\"\n  ></sky-docs-call-signature-definition>\n</ng-template>\n", styles: [":host{margin:15px 0}.sky-docs-property-definitions{width:100%;max-width:100%}.sky-docs-property-definitions th{position:sticky;top:var(--sky-viewport-top, 0);z-index:1}.sky-docs-property-definitions-table-cell-description{word-break:break-word}.sky-docs-table-column-header-name{width:25%}.sky-docs-property-definition-label-optional{color:#686c73;margin-bottom:10px}.sky-docs-property-definition-list{margin:0}.sky-docs-property-definition-list-item{border-bottom:1px dotted #cdcfd2;margin:10px 0}.sky-docs-property-definition-list-item .sky-field-label{margin:10px 0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDocsTypeDefinitionsFormatService }, { type: i2.SkyMediaQueryService }], propDecorators: { config: [{
-                type: Input
-            }], propertyType: [{
-                type: Input
-            }], showOptionalStatus: [{
-                type: Input
-            }] } });
-
-class SkyDocsDirectiveDefinitionComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDirectiveDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsDirectiveDefinitionComponent, isStandalone: false, selector: "sky-docs-directive-definition", inputs: { config: "config" }, ngImport: i0, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-directive-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    class=\"sky-docs-directive-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <h4 class=\"sky-docs-directive-definition-h4\">Selector</h4>\n\n  <p class=\"sky-docs-directive-selector\">\n    <sky-code>{{ config.selector }}</sky-code>\n  </p>\n\n  <ng-container *ngIf=\"config.codeExample\">\n    <h4 class=\"sky-docs-directive-definition-h4\">Example</h4>\n    <sky-code-block\n      class=\"sky-docs-code-block\"\n      [code]=\"config.codeExample\"\n      [hideHeader]=\"true\"\n      [languageType]=\"config.codeExampleLanguage\"\n    >\n    </sky-code-block>\n  </ng-container>\n\n  <sky-docs-property-definitions\n    *ngIf=\"config.inputProperties?.length\"\n    propertyType=\"Input\"\n    [config]=\"{\n      properties: config.inputProperties,\n    }\"\n  ></sky-docs-property-definitions>\n\n  <sky-docs-property-definitions\n    *ngIf=\"config.eventProperties?.length\"\n    propertyType=\"Event\"\n    [config]=\"{\n      properties: config.eventProperties,\n    }\"\n  ></sky-docs-property-definitions>\n</div>\n", styles: [".sky-docs-directive-definition-h4{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}.sky-docs-directive-selector{margin-left:15px!important;margin-top:10px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { kind: "component", type: i4.λ1, selector: "sky-code" }, { kind: "component", type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }, { kind: "component", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { kind: "component", type: SkyDocsPropertyDefinitionsComponent, selector: "sky-docs-property-definitions", inputs: ["config", "propertyType", "showOptionalStatus"] }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "pipe", type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDirectiveDefinitionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-directive-definition', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-directive-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    class=\"sky-docs-directive-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <h4 class=\"sky-docs-directive-definition-h4\">Selector</h4>\n\n  <p class=\"sky-docs-directive-selector\">\n    <sky-code>{{ config.selector }}</sky-code>\n  </p>\n\n  <ng-container *ngIf=\"config.codeExample\">\n    <h4 class=\"sky-docs-directive-definition-h4\">Example</h4>\n    <sky-code-block\n      class=\"sky-docs-code-block\"\n      [code]=\"config.codeExample\"\n      [hideHeader]=\"true\"\n      [languageType]=\"config.codeExampleLanguage\"\n    >\n    </sky-code-block>\n  </ng-container>\n\n  <sky-docs-property-definitions\n    *ngIf=\"config.inputProperties?.length\"\n    propertyType=\"Input\"\n    [config]=\"{\n      properties: config.inputProperties,\n    }\"\n  ></sky-docs-property-definitions>\n\n  <sky-docs-property-definitions\n    *ngIf=\"config.eventProperties?.length\"\n    propertyType=\"Event\"\n    [config]=\"{\n      properties: config.eventProperties,\n    }\"\n  ></sky-docs-property-definitions>\n</div>\n", styles: [".sky-docs-directive-definition-h4{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}.sky-docs-directive-selector{margin-left:15px!important;margin-top:10px!important}\n"] }]
-        }], propDecorators: { config: [{
-                type: Input
-            }] } });
-
-class SkyDocsEnumerationDefinitionComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsEnumerationDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsEnumerationDefinitionComponent, isStandalone: false, selector: "sky-docs-enumeration-definition", inputs: { config: "config" }, ngImport: i0, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-enumeration-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    class=\"sky-docs-enumeration-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-docs-property-definitions\n    *ngIf=\"config.members\"\n    propertyType=\"Member\"\n    [config]=\"{ properties: config.members }\"\n    [showOptionalStatus]=\"false\"\n  ></sky-docs-property-definitions>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }, { kind: "component", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { kind: "component", type: SkyDocsPropertyDefinitionsComponent, selector: "sky-docs-property-definitions", inputs: ["config", "propertyType", "showOptionalStatus"] }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "pipe", type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsEnumerationDefinitionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-enumeration-definition', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-enumeration-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    class=\"sky-docs-enumeration-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-docs-property-definitions\n    *ngIf=\"config.members\"\n    propertyType=\"Member\"\n    [config]=\"{ properties: config.members }\"\n    [showOptionalStatus]=\"false\"\n  ></sky-docs-property-definitions>\n</div>\n" }]
-        }], propDecorators: { config: [{
-                type: Input
-            }] } });
-
-class SkyDocsInterfaceDefinitionComponent {
-    set config(value) {
-        this._config = value;
-        this.updateView();
-    }
-    get config() {
-        return this._config;
-    }
-    constructor(formatService) {
-        this.formatService = formatService;
-    }
-    updateView() {
-        this.sourceCode = this.config
-            ? this.formatService.getInterfaceSourceCode(this.config)
-            : undefined;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsInterfaceDefinitionComponent, deps: [{ token: SkyDocsTypeDefinitionsFormatService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsInterfaceDefinitionComponent, isStandalone: false, selector: "sky-docs-interface-definition", inputs: { config: "config" }, ngImport: i0, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-interface-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    class=\"sky-docs-interface-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block\n    *ngIf=\"sourceCode\"\n    class=\"sky-docs-code-block\"\n    languageType=\"typescript\"\n    [code]=\"sourceCode\"\n    [hideHeader]=\"true\"\n  ></sky-code-block>\n\n  <sky-docs-property-definitions\n    *ngIf=\"config.properties?.length\"\n    [config]=\"{ properties: config.properties }\"\n    [showOptionalStatus]=\"false\"\n  ></sky-docs-property-definitions>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { kind: "component", type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }, { kind: "component", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { kind: "component", type: SkyDocsPropertyDefinitionsComponent, selector: "sky-docs-property-definitions", inputs: ["config", "propertyType", "showOptionalStatus"] }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "pipe", type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsInterfaceDefinitionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-interface-definition', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-interface-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    class=\"sky-docs-interface-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block\n    *ngIf=\"sourceCode\"\n    class=\"sky-docs-code-block\"\n    languageType=\"typescript\"\n    [code]=\"sourceCode\"\n    [hideHeader]=\"true\"\n  ></sky-code-block>\n\n  <sky-docs-property-definitions\n    *ngIf=\"config.properties?.length\"\n    [config]=\"{ properties: config.properties }\"\n    [showOptionalStatus]=\"false\"\n  ></sky-docs-property-definitions>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: SkyDocsTypeDefinitionsFormatService }], propDecorators: { config: [{
-                type: Input
-            }] } });
-
-class SkyDocsMethodDefinitionsComponent {
-    set config(value) {
-        this.#_config = value;
-        this.updateView();
-    }
-    get config() {
-        return this.#_config || {};
-    }
-    #_config;
-    #changeDetector;
-    #formatService;
-    #mediaQueryService;
-    constructor(changeDetector, formatService, mediaQueryService) {
-        this.deprecationWarningPrefix = `<span class="sky-text-warning"></span>**Deprecated.** `;
-        this.isMobile = true;
-        this.#changeDetector = changeDetector;
-        this.#formatService = formatService;
-        this.#mediaQueryService = mediaQueryService;
-    }
-    ngOnInit() {
-        this.#mediaQueryService.subscribe((breakpoints) => {
-            this.isMobile = breakpoints <= SkyMediaBreakpoints.sm;
-            this.#changeDetector.markForCheck();
-        });
-    }
-    updateView() {
-        if (this.config.methods?.length > 0) {
-            this.methods = [];
-            this.staticMethods = [];
-            for (let method of this.config.methods) {
-                const vm = {
-                    callSignature: method.type.callSignature,
-                    codeExample: method.codeExample,
-                    codeExampleLanguage: method.codeExampleLanguage,
-                    deprecationWarning: method.deprecationWarning,
-                    description: method.description,
-                    formattedName: this.#formatService.getFormattedMethodName(method),
-                    sourceCode: this.#formatService.getMethodSourceCode(method),
-                    isStatic: method.isStatic,
-                    isPreview: method.isPreview,
-                };
-                if (vm.isStatic) {
-                    this.staticMethods.push(vm);
-                }
-                else {
-                    this.methods.push(vm);
-                }
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsMethodDefinitionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDocsTypeDefinitionsFormatService }, { token: i2.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsMethodDefinitionsComponent, isStandalone: false, selector: "sky-docs-method-definitions", inputs: { config: "config" }, ngImport: i0, template: "<div\n  *ngIf=\"methods?.length > 0 || staticMethods?.length > 0\"\n  class=\"sky-docs-method-definitions\"\n>\n  <ng-container *ngIf=\"!isMobile; else mobileTemplate\">\n    <table\n      class=\"sky-docs-table sky-docs-static-method-definitions\"\n      *ngIf=\"staticMethods?.length > 0\"\n    >\n      <tr class=\"sky-docs-table-row\">\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n        >\n          Static methods\n        </th>\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n        >\n          Description\n        </th>\n      </tr>\n      <tr *ngFor=\"let method of staticMethods\" class=\"sky-docs-table-row\">\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-description\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n      </tr>\n    </table>\n    <table\n      class=\"sky-docs-table sky-docs-standard-method-definitions\"\n      *ngIf=\"methods?.length > 0\"\n    >\n      <tr class=\"sky-docs-table-row\">\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n        >\n          Methods\n        </th>\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n        >\n          Description\n        </th>\n      </tr>\n      <tr *ngFor=\"let method of methods\" class=\"sky-docs-table-row\">\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-description\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n      </tr>\n    </table>\n  </ng-container>\n\n  <ng-template #mobileTemplate>\n    <dl\n      class=\"sky-docs-method-definition-list sky-docs-static-method-definitions\"\n      *ngIf=\"staticMethods?.length > 0\"\n    >\n      <div\n        *ngFor=\"let method of staticMethods\"\n        class=\"sky-docs-method-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">Static methods</dt>\n        <dd class=\"sky-docs-method-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-method-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n    <dl\n      class=\"sky-docs-method-definition-list sky-docs-standard-method-definitions\"\n      *ngIf=\"methods?.length > 0\"\n    >\n      <div\n        *ngFor=\"let method of methods\"\n        class=\"sky-docs-method-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">Methods</dt>\n        <dd class=\"sky-docs-method-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-method-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n  </ng-template>\n</div>\n\n<ng-template let-method #nameTemplate>\n  <sky-code\n    ><span\n      [innerHtml]=\"\n        method.formattedName | skyDocsTypeAnchorLinks: 'no-code-tags'\n      \"\n    ></span\n  ></sky-code>\n</ng-template>\n\n<ng-template let-method #descriptionTemplate>\n  <div\n    *ngIf=\"method.isPreview\"\n    class=\"sky-docs-method-definition-preview-warning sky-docs-property-definition-label\"\n  >\n    <sky-docs-preview-feature-indicator></sky-docs-preview-feature-indicator>\n  </div>\n\n  <sky-docs-safe-html\n    *ngIf=\"method.deprecationWarning !== undefined\"\n    class=\"sky-docs-method-definition-deprecation-warning\"\n    [innerHtml]=\"\n      deprecationWarningPrefix + method.deprecationWarning\n        | skyDocsTypeAnchorLinks\n        | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <sky-docs-safe-html\n    *ngIf=\"method.description\"\n    class=\"sky-docs-method-definition-description\"\n    [innerHtml]=\"method.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block\n    *ngIf=\"method.sourceCode\"\n    class=\"sky-docs-code-block\"\n    languageType=\"typescript\"\n    [code]=\"method.sourceCode\"\n    [hideHeader]=\"true\"\n  ></sky-code-block>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"method.callSignature\"\n    [config]=\"method.callSignature\"\n  ></sky-docs-call-signature-definition>\n\n  <ng-container *ngIf=\"method.codeExample\">\n    <h4 class=\"sky-docs-method-definition-heading\">Example</h4>\n    <sky-code-block\n      *ngIf=\"method.codeExample\"\n      class=\"sky-docs-code-block\"\n      languageType=\"method.codeExampleLanguage\"\n      [code]=\"method.codeExample\"\n      [hideHeader]=\"true\"\n    ></sky-code-block>\n  </ng-container>\n</ng-template>\n", styles: [":host{margin:15px 0}.sky-docs-method-definitions{width:100%;max-width:100%;overflow:auto}.sky-docs-table-column-header-name{width:25%}.sky-docs-method-definition-label-optional{color:#686c73}.sky-docs-method-definition-list{margin:0}.sky-docs-method-definition-list-item{border-bottom:1px dotted #cdcfd2;margin:10px 0}.sky-docs-method-definition-list-item .sky-field-label{margin:10px 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { kind: "component", type: i4.λ1, selector: "sky-code" }, { kind: "component", type: SkyDocsPreviewIndicatorComponent, selector: "sky-docs-preview-feature-indicator" }, { kind: "component", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { kind: "component", type: SkyDocsCallSignatureDefinitionComponent, selector: "sky-docs-call-signature-definition", inputs: ["config"] }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "pipe", type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsMethodDefinitionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-method-definitions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"methods?.length > 0 || staticMethods?.length > 0\"\n  class=\"sky-docs-method-definitions\"\n>\n  <ng-container *ngIf=\"!isMobile; else mobileTemplate\">\n    <table\n      class=\"sky-docs-table sky-docs-static-method-definitions\"\n      *ngIf=\"staticMethods?.length > 0\"\n    >\n      <tr class=\"sky-docs-table-row\">\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n        >\n          Static methods\n        </th>\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n        >\n          Description\n        </th>\n      </tr>\n      <tr *ngFor=\"let method of staticMethods\" class=\"sky-docs-table-row\">\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-description\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n      </tr>\n    </table>\n    <table\n      class=\"sky-docs-table sky-docs-standard-method-definitions\"\n      *ngIf=\"methods?.length > 0\"\n    >\n      <tr class=\"sky-docs-table-row\">\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n        >\n          Methods\n        </th>\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n        >\n          Description\n        </th>\n      </tr>\n      <tr *ngFor=\"let method of methods\" class=\"sky-docs-table-row\">\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-description\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n      </tr>\n    </table>\n  </ng-container>\n\n  <ng-template #mobileTemplate>\n    <dl\n      class=\"sky-docs-method-definition-list sky-docs-static-method-definitions\"\n      *ngIf=\"staticMethods?.length > 0\"\n    >\n      <div\n        *ngFor=\"let method of staticMethods\"\n        class=\"sky-docs-method-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">Static methods</dt>\n        <dd class=\"sky-docs-method-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-method-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n    <dl\n      class=\"sky-docs-method-definition-list sky-docs-standard-method-definitions\"\n      *ngIf=\"methods?.length > 0\"\n    >\n      <div\n        *ngFor=\"let method of methods\"\n        class=\"sky-docs-method-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">Methods</dt>\n        <dd class=\"sky-docs-method-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-method-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n  </ng-template>\n</div>\n\n<ng-template let-method #nameTemplate>\n  <sky-code\n    ><span\n      [innerHtml]=\"\n        method.formattedName | skyDocsTypeAnchorLinks: 'no-code-tags'\n      \"\n    ></span\n  ></sky-code>\n</ng-template>\n\n<ng-template let-method #descriptionTemplate>\n  <div\n    *ngIf=\"method.isPreview\"\n    class=\"sky-docs-method-definition-preview-warning sky-docs-property-definition-label\"\n  >\n    <sky-docs-preview-feature-indicator></sky-docs-preview-feature-indicator>\n  </div>\n\n  <sky-docs-safe-html\n    *ngIf=\"method.deprecationWarning !== undefined\"\n    class=\"sky-docs-method-definition-deprecation-warning\"\n    [innerHtml]=\"\n      deprecationWarningPrefix + method.deprecationWarning\n        | skyDocsTypeAnchorLinks\n        | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <sky-docs-safe-html\n    *ngIf=\"method.description\"\n    class=\"sky-docs-method-definition-description\"\n    [innerHtml]=\"method.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block\n    *ngIf=\"method.sourceCode\"\n    class=\"sky-docs-code-block\"\n    languageType=\"typescript\"\n    [code]=\"method.sourceCode\"\n    [hideHeader]=\"true\"\n  ></sky-code-block>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"method.callSignature\"\n    [config]=\"method.callSignature\"\n  ></sky-docs-call-signature-definition>\n\n  <ng-container *ngIf=\"method.codeExample\">\n    <h4 class=\"sky-docs-method-definition-heading\">Example</h4>\n    <sky-code-block\n      *ngIf=\"method.codeExample\"\n      class=\"sky-docs-code-block\"\n      languageType=\"method.codeExampleLanguage\"\n      [code]=\"method.codeExample\"\n      [hideHeader]=\"true\"\n    ></sky-code-block>\n  </ng-container>\n</ng-template>\n", styles: [":host{margin:15px 0}.sky-docs-method-definitions{width:100%;max-width:100%;overflow:auto}.sky-docs-table-column-header-name{width:25%}.sky-docs-method-definition-label-optional{color:#686c73}.sky-docs-method-definition-list{margin:0}.sky-docs-method-definition-list-item{border-bottom:1px dotted #cdcfd2;margin:10px 0}.sky-docs-method-definition-list-item .sky-field-label{margin:10px 0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDocsTypeDefinitionsFormatService }, { type: i2.SkyMediaQueryService }], propDecorators: { config: [{
-                type: Input
-            }] } });
-
-class SkyDocsPipeDefinitionComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsPipeDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsPipeDefinitionComponent, isStandalone: false, selector: "sky-docs-pipe-definition", inputs: { config: "config" }, ngImport: i0, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-pipe-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <ng-container *ngIf=\"config.codeExample\">\n    <h4 class=\"sky-docs-pipe-definition-heading\">Example</h4>\n    <sky-code-block\n      class=\"sky-docs-code-block\"\n      [code]=\"config.codeExample\"\n      [hideHeader]=\"true\"\n      [languageType]=\"config.codeExampleLanguage\"\n    ></sky-code-block>\n  </ng-container>\n\n  <sky-docs-method-definitions\n    *ngIf=\"config.transformMethod\"\n    [config]=\"{\n      methods: [config.transformMethod],\n    }\"\n  ></sky-docs-method-definitions>\n</div>\n", styles: [".sky-docs-pipe-definition-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { kind: "component", type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }, { kind: "component", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { kind: "component", type: SkyDocsMethodDefinitionsComponent, selector: "sky-docs-method-definitions", inputs: ["config"] }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "pipe", type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsPipeDefinitionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-pipe-definition', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-pipe-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <ng-container *ngIf=\"config.codeExample\">\n    <h4 class=\"sky-docs-pipe-definition-heading\">Example</h4>\n    <sky-code-block\n      class=\"sky-docs-code-block\"\n      [code]=\"config.codeExample\"\n      [hideHeader]=\"true\"\n      [languageType]=\"config.codeExampleLanguage\"\n    ></sky-code-block>\n  </ng-container>\n\n  <sky-docs-method-definitions\n    *ngIf=\"config.transformMethod\"\n    [config]=\"{\n      methods: [config.transformMethod],\n    }\"\n  ></sky-docs-method-definitions>\n</div>\n", styles: [".sky-docs-pipe-definition-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}\n"] }]
-        }], propDecorators: { config: [{
-                type: Input
-            }] } });
-
-class SkyDocsClassDefinitionComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsClassDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsClassDefinitionComponent, isStandalone: false, selector: "sky-docs-class-definition", inputs: { config: "config" }, ngImport: i0, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-class-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    class=\"sky-docs-class-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <ng-container *ngIf=\"config.properties?.length\">\n    <sky-docs-property-definitions\n      [config]=\"{ properties: config.properties }\"\n    ></sky-docs-property-definitions>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.methods?.length\">\n    <sky-docs-method-definitions\n      [config]=\"{ methods: config.methods }\"\n    ></sky-docs-method-definitions>\n  </ng-container>\n</div>\n", styles: [".sky-docs-class-definition-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}.sky-docs-class-definition-return-type{margin-left:15px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }, { kind: "component", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { kind: "component", type: SkyDocsMethodDefinitionsComponent, selector: "sky-docs-method-definitions", inputs: ["config"] }, { kind: "component", type: SkyDocsPropertyDefinitionsComponent, selector: "sky-docs-property-definitions", inputs: ["config", "propertyType", "showOptionalStatus"] }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "pipe", type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsClassDefinitionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-class-definition', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-class-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    class=\"sky-docs-class-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <ng-container *ngIf=\"config.properties?.length\">\n    <sky-docs-property-definitions\n      [config]=\"{ properties: config.properties }\"\n    ></sky-docs-property-definitions>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.methods?.length\">\n    <sky-docs-method-definitions\n      [config]=\"{ methods: config.methods }\"\n    ></sky-docs-method-definitions>\n  </ng-container>\n</div>\n", styles: [".sky-docs-class-definition-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}.sky-docs-class-definition-return-type{margin-left:15px}\n"] }]
-        }], propDecorators: { config: [{
-                type: Input
-            }] } });
-
-class SkyDocsTypeAliasDefinitionComponent {
-    set config(value) {
-        this._config = value;
-        this.updateView();
-    }
-    get config() {
-        return this._config;
-    }
-    constructor(formatService) {
-        this.formatService = formatService;
-    }
-    updateView() {
-        this.sourceCode = this.config
-            ? this.formatService.getTypeAliasSourceCode(this.config)
-            : undefined;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeAliasDefinitionComponent, deps: [{ token: SkyDocsTypeDefinitionsFormatService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsTypeAliasDefinitionComponent, isStandalone: false, selector: "sky-docs-type-alias-definition", inputs: { config: "config" }, ngImport: i0, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-type-alias-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <div\n    *ngIf=\"config.isPreview\"\n    class=\"sky-docs-type-alias-preview-warning sky-docs-property-definition-label\"\n  >\n    <sky-docs-preview-feature-indicator></sky-docs-preview-feature-indicator>\n  </div>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    class=\"sky-docs-type-alias-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block\n    *ngIf=\"sourceCode\"\n    class=\"sky-docs-code-block\"\n    languageType=\"typescript\"\n    [code]=\"sourceCode\"\n    [hideHeader]=\"true\"\n  ></sky-code-block>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"config.type.callSignature\"\n    [config]=\"config.type.callSignature\"\n  ></sky-docs-call-signature-definition>\n</div>\n", styles: [".sky-docs-type-alias-definition-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}.sky-docs-type-alias-definition-return-type{margin-left:15px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { kind: "component", type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }, { kind: "component", type: SkyDocsPreviewIndicatorComponent, selector: "sky-docs-preview-feature-indicator" }, { kind: "component", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { kind: "component", type: SkyDocsCallSignatureDefinitionComponent, selector: "sky-docs-call-signature-definition", inputs: ["config"] }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "pipe", type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeAliasDefinitionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-type-alias-definition', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-type-alias-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <div\n    *ngIf=\"config.isPreview\"\n    class=\"sky-docs-type-alias-preview-warning sky-docs-property-definition-label\"\n  >\n    <sky-docs-preview-feature-indicator></sky-docs-preview-feature-indicator>\n  </div>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    class=\"sky-docs-type-alias-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block\n    *ngIf=\"sourceCode\"\n    class=\"sky-docs-code-block\"\n    languageType=\"typescript\"\n    [code]=\"sourceCode\"\n    [hideHeader]=\"true\"\n  ></sky-code-block>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"config.type.callSignature\"\n    [config]=\"config.type.callSignature\"\n  ></sky-docs-call-signature-definition>\n</div>\n", styles: [".sky-docs-type-alias-definition-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}.sky-docs-type-alias-definition-return-type{margin-left:15px}\n"] }]
-        }], ctorParameters: () => [{ type: SkyDocsTypeDefinitionsFormatService }], propDecorators: { config: [{
-                type: Input
-            }] } });
-
-class SkyDocsTypeDefinitionsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDefinitionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDefinitionsModule, declarations: [SkyDocsCallSignatureDefinitionComponent,
-            SkyDocsClassDefinitionComponent,
-            SkyDocsDirectiveDefinitionComponent,
-            SkyDocsEnumerationDefinitionComponent,
-            SkyDocsInterfaceDefinitionComponent,
-            SkyDocsMethodDefinitionsComponent,
-            SkyDocsPipeDefinitionComponent,
-            SkyDocsPropertyDefinitionsComponent,
-            SkyDocsTypeAliasDefinitionComponent,
-            SkyDocsTypeAnchorLinksPipe], imports: [CommonModule,
-            RouterModule,
-            SkyCodeBlockModule,
-            SkyCodeModule,
-            SkyDefinitionListModule,
-            SkyDocsHeadingAnchorModule,
-            SkyDocsMarkdownModule,
-            SkyDocsPreviewIndicatorComponent,
-            SkyDocsSafeHtmlModule,
-            SkyIconModule,
-            SkyStatusIndicatorModule], exports: [SkyDocsCallSignatureDefinitionComponent,
-            SkyDocsClassDefinitionComponent,
-            SkyDocsDirectiveDefinitionComponent,
-            SkyDocsEnumerationDefinitionComponent,
-            SkyDocsInterfaceDefinitionComponent,
-            SkyDocsMethodDefinitionsComponent,
-            SkyDocsPipeDefinitionComponent,
-            SkyDocsPropertyDefinitionsComponent,
-            SkyDocsTypeAliasDefinitionComponent,
-            SkyDocsTypeAnchorLinksPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDefinitionsModule, imports: [CommonModule,
-            RouterModule,
-            SkyCodeBlockModule,
-            SkyCodeModule,
-            SkyDefinitionListModule,
-            SkyDocsHeadingAnchorModule,
-            SkyDocsMarkdownModule,
-            SkyDocsPreviewIndicatorComponent,
-            SkyDocsSafeHtmlModule,
-            SkyIconModule,
-            SkyStatusIndicatorModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDefinitionsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        RouterModule,
-                        SkyCodeBlockModule,
-                        SkyCodeModule,
-                        SkyDefinitionListModule,
-                        SkyDocsHeadingAnchorModule,
-                        SkyDocsMarkdownModule,
-                        SkyDocsPreviewIndicatorComponent,
-                        SkyDocsSafeHtmlModule,
-                        SkyIconModule,
-                        SkyStatusIndicatorModule,
-                    ],
-                    declarations: [
-                        SkyDocsCallSignatureDefinitionComponent,
-                        SkyDocsClassDefinitionComponent,
-                        SkyDocsDirectiveDefinitionComponent,
-                        SkyDocsEnumerationDefinitionComponent,
-                        SkyDocsInterfaceDefinitionComponent,
-                        SkyDocsMethodDefinitionsComponent,
-                        SkyDocsPipeDefinitionComponent,
-                        SkyDocsPropertyDefinitionsComponent,
-                        SkyDocsTypeAliasDefinitionComponent,
-                        SkyDocsTypeAnchorLinksPipe,
-                    ],
-                    exports: [
-                        SkyDocsCallSignatureDefinitionComponent,
-                        SkyDocsClassDefinitionComponent,
-                        SkyDocsDirectiveDefinitionComponent,
-                        SkyDocsEnumerationDefinitionComponent,
-                        SkyDocsInterfaceDefinitionComponent,
-                        SkyDocsMethodDefinitionsComponent,
-                        SkyDocsPipeDefinitionComponent,
-                        SkyDocsPropertyDefinitionsComponent,
-                        SkyDocsTypeAliasDefinitionComponent,
-                        SkyDocsTypeAnchorLinksPipe,
-                    ],
-                }]
-        }] });
-
-/**
- * Specifies a section of page content.
- * @example
- * ```
- * <sky-docs-demo-page-section
- *   heading="Section heading"
- * >
- *   Section content here.
- * </sky-docs-demo-page-section>
- * ```
- */
-class SkyDocsDemoPageSectionComponent {
-    get anchorId() {
-        return `section-${this.getSanitizedName(this.heading)}`;
-    }
-    getSanitizedName(value) {
-        if (!value) {
-            return;
-        }
-        const sanitized = value
-            .toLowerCase()
-            // Remove special characters.
-            .replace(/[\_\~\`\@\!\#\$\%\^\&\*\(\)\[\]\{\}\;\:\'\/\\\<\>\,\.\?\=\+\|"]/g, '')
-            // Replace space characters with a dash.
-            .replace(/\s/g, '-')
-            // Remove any double-dashes.
-            .replace(/--/g, '-');
-        return sanitized;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsDemoPageSectionComponent, isStandalone: false, selector: "sky-docs-demo-page-section", inputs: { heading: "heading" }, ngImport: i0, template: "<div class=\"sky-docs-demo-page-section sky-rounded-corners\">\n  <div *ngIf=\"heading\" class=\"sky-docs-demo-page-section-header\">\n    <sky-docs-heading-anchor headingLevel=\"2\" [anchorId]=\"anchorId\">\n      {{ heading }}\n    </sky-docs-heading-anchor>\n  </div>\n  <div class=\"sky-docs-demo-page-section-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-docs-demo-page-section{margin-bottom:50px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-demo-page-section', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-docs-demo-page-section sky-rounded-corners\">\n  <div *ngIf=\"heading\" class=\"sky-docs-demo-page-section-header\">\n    <sky-docs-heading-anchor headingLevel=\"2\" [anchorId]=\"anchorId\">\n      {{ heading }}\n    </sky-docs-heading-anchor>\n  </div>\n  <div class=\"sky-docs-demo-page-section-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-docs-demo-page-section{margin-bottom:50px}\n"] }]
-        }], propDecorators: { heading: [{
-                type: Input
-            }] } });
-
-/**
- * The page summary provides a section at the top of the page
- * to summarize what a user should expect to find or learn on the page.
- * @example
- * ```
- * <sky-docs-demo-page-summary>
- *   Page summary here.
- * </sky-docs-demo-page-summary>
- * ```
- */
-class SkyDocsDemoPageSummaryComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsDemoPageSummaryComponent, isStandalone: false, selector: "sky-docs-demo-page-summary", ngImport: i0, template: "<div class=\"sky-docs-demo-page-summary\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-docs-demo-page-summary{margin-bottom:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageSummaryComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-demo-page-summary', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-docs-demo-page-summary\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-docs-demo-page-summary{margin-bottom:20px}\n"] }]
-        }] });
-
-class SkyDocsDesignGuidelinesComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDesignGuidelinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsDesignGuidelinesComponent, isStandalone: false, selector: "sky-docs-design-guidelines", ngImport: i0, template: "<div class=\"sky-docs-design-guidelines\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDesignGuidelinesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-design-guidelines', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-docs-design-guidelines\">\n  <ng-content></ng-content>\n</div>\n" }]
+                    ], selector: 'sky-code-example-viewer', template: "<sky-box headingLevel=\"3\" headingStyle=\"3\" [headingText]=\"headingText()\">\n  <sky-box-controls>\n    <button\n      class=\"sky-btn sky-btn-default\"\n      data-sky-id=\"stackblitz-btn\"\n      type=\"button\"\n      (click)=\"launchStackBlitz()\"\n    >\n      <sky-icon iconName=\"edit\" />\n      {{ 'sky_code_example_viewer_demo_stack_blitz_button' | skyLibResources }}\n    </button>\n  </sky-box-controls>\n\n  <sky-box-content>\n    <div\n      class=\"sky-code-example-viewer-demo sky-padding-even-md sky-margin-stacked-lg\"\n    >\n      @if (!demoHidden()) {\n        <ng-template [ngComponentOutlet]=\"componentType()\" />\n      } @else {\n        {{ 'sky_code_example_viewer_demo_hidden_message' | skyLibResources }}\n      }\n    </div>\n\n    <div class=\"sky-margin-stacked-sm\">\n      <button\n        class=\"sky-btn sky-btn-link\"\n        data-sky-id=\"toggle-code-visibility-btn\"\n        type=\"button\"\n        [attr.aria-controls]=\"codeRef.id\"\n        [attr.aria-expanded]=\"isCodeVisible()\"\n        (click)=\"toggleCodeVisibility()\"\n      >\n        <sky-icon\n          [iconName]=\"isCodeVisible() ? 'chevron-down' : 'chevron-right'\"\n        />\n        {{\n          isCodeVisible()\n            ? ('sky_code_example_viewer_hide_code_button_label'\n              | skyLibResources)\n            : ('sky_code_example_viewer_show_code_button_label'\n              | skyLibResources)\n        }}\n      </button>\n    </div>\n\n    <sky-vertical-tabset #codeRef=\"skyId\" skyId [hidden]=\"!isCodeVisible()\">\n      @for (obj of files() | keyvalue; track obj.key) {\n        <sky-vertical-tab\n          [active]=\"obj.key === primaryFile()\"\n          [tabHeading]=\"obj.key\"\n        >\n          <sky-code-snippet\n            [code]=\"obj.value\"\n            [language]=\"getCodeLanguage(obj.key)\"\n          />\n        </sky-vertical-tab>\n      }\n    </sky-vertical-tabset>\n  </sky-box-content>\n</sky-box>\n", styles: [":host{display:block}.sky-code-example-viewer-demo{border:1px solid var(--sky-border-color-neutral-medium)}\n"] }]
         }] });
 
 /**
  * @internal
  */
-class SkyDocsDemoPageDomAdapterService {
-    get anchorLinks() {
-        return document.querySelectorAll('a.sky-docs-anchor-link');
-    }
-    get currentUrl() {
-        return this.windowRef.nativeWindow.location.href.split('#')[0];
-    }
-    constructor(windowRef) {
-        this.windowRef = windowRef;
-        this._anchorLinkClick = new Subject();
-        this.eventListener = (e) => {
-            e.preventDefault();
-            this._anchorLinkClick.next({
-                href: e.target.href,
-            });
-        };
-    }
-    ngOnDestroy() {
-        this.removeClickEventListeners();
-    }
-    setupAnchorLinks() {
-        for (let index = 0; index < this.anchorLinks.length; index++) {
-            const anchor = this.anchorLinks[index];
-            const fragment = anchor.href.split('#')[1];
-            const url = this.currentUrl;
-            const href = `${url}#${fragment}`;
-            anchor.href = href;
-        }
-    }
-    get anchorLinkClick() {
-        if (this._anchorLinkClick.observers.length === 0) {
-            this.addClickEventListeners();
-        }
-        else {
-            this.removeClickEventListeners();
-        }
-        return this._anchorLinkClick;
-    }
-    scrollToFragment(fragment) {
-        this.windowRef.nativeWindow.setTimeout(() => {
-            const element = document.getElementById(fragment);
-            if (element) {
-                this.windowRef.nativeWindow.scrollTo(0, element.offsetTop);
-            }
-        }, 250);
-    }
-    addClickEventListeners() {
-        // Wait for a tick to allow all anchors to be written.
-        this.windowRef.nativeWindow.setTimeout(() => {
-            for (let index = 0; index < this.anchorLinks.length; index++) {
-                const anchor = this.anchorLinks[index];
-                anchor.addEventListener('click', this.eventListener);
-            }
-        });
-    }
-    removeClickEventListeners() {
-        for (let index = 0; index < this.anchorLinks.length; index++) {
-            const anchor = this.anchorLinks[index];
-            anchor.removeEventListener('click', this.eventListener);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageDomAdapterService, deps: [{ token: i2.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageDomAdapterService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageDomAdapterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i2.SkyAppWindowRef }] });
-
-class SkyDocsToolsSiteOptions {
-}
-
-class SkyDocsSupportalService {
-    constructor(http) {
-        this.http = http;
-    }
-    getComponentsInfo() {
-        return this.http
-            .get('https://sky-pusa01.app.blackbaud.net/skysp/v1/docs/components-info')
-            .pipe(map((results) => results.components), share());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsSupportalService, deps: [{ token: i1$6.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsSupportalService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsSupportalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1$6.HttpClient }] });
-
-/**
- * @internal
- */
-class SkyDocsDemoPageTitleService {
-    constructor(title) {
-        this.title = title;
-    }
-    setTitle(...parts) {
-        let windowTitle = 'SKY UX';
-        if (parts && parts.length > 0) {
-            parts.push(windowTitle);
-            windowTitle = parts.join(' - ');
-        }
-        this.title.setTitle(windowTitle);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageTitleService, deps: [{ token: i1$4.Title }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageTitleService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageTitleService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1$4.Title }] });
-
-/**
- * This enum comes from:
- * https://github.com/TypeStrong/typedoc/blob/v0.25.13/src/lib/models/reflections/kind.ts
- * The enum is up to date as of version `0.25.13`.
- */
-var TypeDocKind;
-(function (TypeDocKind) {
-    TypeDocKind[TypeDocKind["Project"] = 1] = "Project";
-    TypeDocKind[TypeDocKind["Module"] = 2] = "Module";
-    TypeDocKind[TypeDocKind["Namespace"] = 4] = "Namespace";
-    TypeDocKind[TypeDocKind["Enum"] = 8] = "Enum";
-    TypeDocKind[TypeDocKind["EnumMember"] = 16] = "EnumMember";
-    TypeDocKind[TypeDocKind["Variable"] = 32] = "Variable";
-    TypeDocKind[TypeDocKind["Function"] = 64] = "Function";
-    TypeDocKind[TypeDocKind["Class"] = 128] = "Class";
-    TypeDocKind[TypeDocKind["Interface"] = 256] = "Interface";
-    TypeDocKind[TypeDocKind["Constructor"] = 512] = "Constructor";
-    TypeDocKind[TypeDocKind["Property"] = 1024] = "Property";
-    TypeDocKind[TypeDocKind["Method"] = 2048] = "Method";
-    TypeDocKind[TypeDocKind["CallSignature"] = 4096] = "CallSignature";
-    TypeDocKind[TypeDocKind["IndexSignature"] = 8192] = "IndexSignature";
-    TypeDocKind[TypeDocKind["ConstructorSignature"] = 16384] = "ConstructorSignature";
-    TypeDocKind[TypeDocKind["Parameter"] = 32768] = "Parameter";
-    TypeDocKind[TypeDocKind["TypeLiteral"] = 65536] = "TypeLiteral";
-    TypeDocKind[TypeDocKind["TypeParameter"] = 131072] = "TypeParameter";
-    TypeDocKind[TypeDocKind["Accessor"] = 262144] = "Accessor";
-    TypeDocKind[TypeDocKind["GetSignature"] = 524288] = "GetSignature";
-    TypeDocKind[TypeDocKind["SetSignature"] = 1048576] = "SetSignature";
-    TypeDocKind[TypeDocKind["TypeAlias"] = 2097152] = "TypeAlias";
-    TypeDocKind[TypeDocKind["Reference"] = 4194304] = "Reference";
-})(TypeDocKind || (TypeDocKind = {}));
-
-/**
- * Converts TypeDoc types into SKY UX docs-tools types, to be supplied to the various definitions components.
- */
-class SkyDocsTypeDocAdapterService {
-    constructor(typeDefinitionsProvider) {
-        this.typeDefinitionsProvider = typeDefinitionsProvider;
-    }
-    toClassDefinition(entry) {
-        const definition = {
-            anchorId: this.getAnchorId(entry),
-            name: entry.name,
-            hasPreviewFeatures: false,
-        };
-        const tags = this.getCommentTags(entry.comment);
-        this.applyCommentTagValues(definition, tags);
-        const methods = this.getClassMethods(entry);
-        if (methods.length) {
-            definition.methods = methods;
-        }
-        const properties = this.getClassProperties(entry);
-        if (properties.length) {
-            definition.properties = properties;
-        }
-        definition.hasPreviewFeatures =
-            !!definition.methods?.some((method) => method.isPreview) ||
-                !!definition.properties?.some((property) => property.isPreview);
-        return definition;
-    }
-    toDirectiveDefinition(entry) {
-        const definition = {
-            anchorId: this.getAnchorId(entry),
-            name: entry.name,
-            selector: this.getSelector(entry),
-            hasPreviewFeatures: false,
-        };
-        const tags = this.getCommentTags(entry.comment);
-        this.applyCommentTagValues(definition, tags);
-        const properties = this.getClassProperties(entry);
-        const eventProperties = properties.filter((p) => p.decorator?.name === 'Output');
-        if (eventProperties.length) {
-            definition.eventProperties = eventProperties;
-        }
-        const inputProperties = properties.filter((p) => this.#isInputProperty(p));
-        if (inputProperties.length) {
-            definition.inputProperties = inputProperties;
-        }
-        definition.hasPreviewFeatures =
-            !!definition.inputProperties?.some((property) => property.isPreview) ||
-                !!definition.eventProperties?.some((property) => property.isPreview);
-        return definition;
-    }
-    toEnumerationDefinition(entry) {
-        const members = this.getEnumerationMembers(entry);
-        const definition = {
-            anchorId: this.getAnchorId(entry),
-            members,
-            name: entry.name,
-            hasPreviewFeatures: !!members.find((member) => member.isPreview),
-        };
-        const tags = this.getCommentTags(entry.comment);
-        this.applyCommentTagValues(definition, tags);
-        return definition;
-    }
-    toInterfaceDefinition(entry) {
-        const properties = this.getInterfaceProperties(entry);
-        const definition = {
-            anchorId: this.getAnchorId(entry),
-            name: entry.name,
-            hasPreviewFeatures: !!properties.find((member) => member.isPreview),
-            properties,
-        };
-        const tags = this.getCommentTags(entry.comment);
-        this.applyCommentTagValues(definition, tags);
-        const typeParameters = this.getTypeParameterDefinitions(entry.typeParameters);
-        if (typeParameters.length) {
-            definition.typeParameters = typeParameters;
-        }
-        return definition;
-    }
-    toPipeDefinition(entry) {
-        const methods = this.getClassMethods(entry);
-        const transformMethod = methods.find((m) => m.name === 'transform');
-        const definition = {
-            anchorId: this.getAnchorId(entry),
-            name: entry.name,
-            transformMethod,
-        };
-        const tags = this.getCommentTags(entry.comment);
-        this.applyCommentTagValues(definition, tags);
-        return definition;
-    }
-    toTypeAliasDefinition(entry) {
-        const definition = {
-            anchorId: this.getAnchorId(entry),
-            name: entry.name,
-            isPreview: false,
-            type: this.getTypeDefinition({
-                comment: entry.comment,
-                type: entry.type,
-            }),
-        };
-        const tags = this.getCommentTags(entry.type.declaration?.signatures
-            ? entry.type.declaration.signatures[0].comment
-            : entry.comment);
-        this.applyCommentTagValues(definition, tags);
-        const typeParameters = this.getTypeParameterDefinitions(entry.typeParameters);
-        if (typeParameters.length) {
-            definition.typeParameters = typeParameters;
-        }
-        return definition;
-    }
-    getSelector(entry) {
-        const decoratorSource = entry.decorators[0].arguments.obj;
-        return decoratorSource.indexOf('selector: `') > -1
-            ? decoratorSource
-                .split('selector: `')[1]
-                .split('`')[0]
-                .replace(/\s\s+/g, ' ')
-            : decoratorSource.split("selector: '")[1].split("'")[0];
-    }
-    getClassProperties(entry) {
-        if (!entry.children) {
-            return [];
-        }
-        const definitions = entry.children
-            .filter((child) => 
-        // We only want properties (both with or without a getter/setter)
-        child.kind === TypeDocKind.Property ||
-            child.kind === TypeDocKind.Accessor)
-            .filter((child) => 
-        // We only want accessors that don't have a setter if they are not inputs
-        child.kind !== TypeDocKind.Accessor ||
-            child.setSignature ||
-            this.getDecorator(child)?.name !== 'Input')
-            .map((child) => {
-            let definition = {
-                isOptional: true,
-                isPreview: false,
-                name: this.getPropertyName(child),
-                type: this.getTypeDefinition(child),
-            };
-            let defaultValue;
-            /* Ensure we are properly capturing definitions which use a getter/setter. Final check is a sanity check */
-            if (child.kind === TypeDocKind.Accessor &&
-                !child.comment?.summary
-                    ?.map((item) => item.text)
-                    .join('')
-                    .trim() &&
-                (child.setSignature || child.getSignature)) {
-                const mainTags = this.getCommentTags(child.comment);
-                this.applyCommentTagValues(definition, mainTags);
-                if (child.getSignature) {
-                    const getTags = this.getCommentTags(child.getSignature.comment);
-                    definition.isOptional = !getTags.extras.required;
-                    this.applyCommentTagValues(definition, getTags);
-                    defaultValue = this.getDefaultValue(child, getTags);
-                }
-                if (child.setSignature) {
-                    const setTags = this.getCommentTags(child.setSignature.comment);
-                    this.applyCommentTagValues(definition, setTags);
-                    definition.isOptional =
-                        definition.isOptional && !setTags.extras.required;
-                    defaultValue = defaultValue || this.getDefaultValue(child, setTags);
-                }
-                else {
-                    definition.isOptional = !mainTags.extras.required;
-                    defaultValue = this.getDefaultValue(child, mainTags);
-                }
-            }
-            else {
-                let tags;
-                if (child.kind === TypeDocKind.Property &&
-                    !child.comment?.summary
-                        ?.map((item) => item.text)
-                        .join('')
-                        .trim() &&
-                    child.type.declaration?.signatures?.length > 0 &&
-                    child.type.declaration.signatures[0].comment) {
-                    tags = this.getCommentTags(child.type.declaration.signatures[0].comment);
-                    definition.isOptional = !tags.extras.required;
-                    this.applyCommentTagValues(definition, tags);
-                }
-                tags = this.getCommentTags(child.comment);
-                definition.isOptional =
-                    definition.isOptional && !tags.extras.required;
-                this.applyCommentTagValues(definition, tags);
-                defaultValue = this.getDefaultValue(child, tags);
-            }
-            if (defaultValue) {
-                definition.defaultValue = defaultValue;
-            }
-            const decorator = this.getDecorator(child);
-            if (decorator) {
-                definition.decorator = decorator;
-            }
-            if (!definition.description) {
-                const constructor = entry.children.find((child) => child.kind === TypeDocKind.Constructor);
-                if (constructor) {
-                    const signature = constructor.signatures.find((signature) => signature.kind === TypeDocKind.ConstructorSignature);
-                    /* Sanity check */
-                    /* istanbul ignore else */
-                    if (signature) {
-                        const matchingParam = signature.parameters?.find((parameter) => parameter.name === child.name);
-                        if (matchingParam) {
-                            const matchingParamTags = this.getCommentTags(matchingParam.comment);
-                            this.applyCommentTagValues(definition, matchingParamTags);
-                        }
-                    }
-                }
-            }
-            return definition;
-        });
-        return orderBy(definitions, ['isOptional', 'name'], ['asc', 'asc']);
-    }
-    getClassMethods(entry) {
-        if (!entry.children) {
-            return [];
-        }
-        const methods = entry.children
-            .filter((child) => child.kind === TypeDocKind.Method && /^ng/.test(child.name) === false)
-            .map((child) => {
-            const definition = {
-                name: this.getPropertyName(child),
-                type: this.getTypeDefinition(child),
-                isStatic: !!child.flags?.isStatic,
-                isPreview: false,
-                parentName: entry.name,
-            };
-            // Comments for methods are stored in a different location.
-            const comment = child.signatures[0].comment;
-            const tags = this.getCommentTags(comment);
-            this.applyCommentTagValues(definition, tags);
-            const typeParameters = this.getTypeParameterDefinitions(child.signatures[0].typeParameters);
-            if (typeParameters.length) {
-                definition.typeParameters = typeParameters;
-            }
-            return definition;
-        });
-        return orderBy(methods, ['name'], ['asc']);
-    }
-    getInterfaceProperties(entry) {
-        if (!entry.children && !entry.indexSignature) {
-            return [];
-        }
-        const definitions = entry.children?.map((child) => {
-            let tags;
-            if (child.kind === TypeDocKind.Method && child.signatures.length > 0) {
-                tags = this.getCommentTags(child.signatures[0].comment);
-            }
-            else if (child.type.type === 'reflection' &&
-                child.type?.declaration?.signatures?.length > 0) {
-                tags = this.getCommentTags(child.type.declaration.signatures[0].comment);
-            }
-            else {
-                tags = this.getCommentTags(child.comment);
-            }
-            const definition = {
-                isOptional: tags.extras.required ? false : !!child.flags?.isOptional,
-                isPreview: false,
-                name: this.getPropertyName(child),
-                type: this.getTypeDefinition(child),
-            };
-            this.applyCommentTagValues(definition, tags);
-            return definition;
-        }) || [];
-        const sorted = orderBy(definitions, ['isOptional', 'name'], ['asc', 'asc']);
-        // Add any index signatures, e.g. `[_: string]: any`
-        if (entry.indexSignature) {
-            const indexSignature = entry.indexSignature;
-            const definition = {
-                isOptional: true,
-                isPreview: false,
-                name: indexSignature.name,
-                type: {
-                    indexSignature: this.getIndexSignatureDefinition(indexSignature),
-                },
-            };
-            // New versions of typedoc do not seem to add the comment for index signatures - the else statement is a default based on the only index signature we had in September 2023 (SkySelectField).
-            if (indexSignature.comment) {
-                const tags = this.getCommentTags(indexSignature.comment);
-                this.applyCommentTagValues(definition, tags);
-            }
-            else {
-                definition.description = 'All other properties for an item.';
-            }
-            sorted.push(definition);
-        }
-        return sorted;
-    }
-    getEnumerationMembers(entry) {
-        if (!entry.children) {
-            return [];
-        }
-        return entry.children.map((child) => {
-            const definition = {
-                name: child.name,
-                isPreview: false,
-            };
-            const tags = this.getCommentTags(child.comment);
-            this.applyCommentTagValues(definition, tags);
-            return definition;
-        });
-    }
-    getTypeDefinition(child) {
-        let definition;
-        const kind = child.kind;
-        switch (kind) {
-            case TypeDocKind.Accessor:
-                if (child.setSignature) {
-                    return this.getTypeDefinition(child.setSignature.parameters[0]);
-                }
-                return this.getTypeDefinition(child.getSignature);
-            case TypeDocKind.Method:
-                definition = {
-                    callSignature: this.getCallSignatureDefinition(child.signatures[0], this.getCommentTags(child.comment)),
-                    name: child.signatures[0].name,
-                };
-                return definition;
-            default:
-                let name = child.type.name || child.type.elementType?.name || child.type.value;
-                definition = {
-                    type: child.type.type,
-                };
-                if (name) {
-                    definition.name = name;
-                }
-                // Union?
-                if (child.type.types) {
-                    definition.unionTypes = child.type.types.map((t) => this.getTypeDefinition({ type: t }));
-                }
-                // Convert reflection types.
-                if (child.type.type === 'reflection' ||
-                    child.type.elementType?.type === 'reflection') {
-                    const declaration = child.type.elementType?.type === 'reflection'
-                        ? child.type.elementType.declaration
-                        : child.type.declaration;
-                    /*istanbul ignore else */
-                    if (declaration) {
-                        if (declaration.signatures) {
-                            definition.callSignature = this.getCallSignatureDefinition(declaration.signatures[0], this.getCommentTags(child.comment));
-                        }
-                        else if (declaration.indexSignature) {
-                            const indexSignature = declaration.indexSignature;
-                            definition.indexSignature =
-                                this.getIndexSignatureDefinition(indexSignature);
-                        } /* istanbul ignore else */
-                        else if (declaration.children) {
-                            definition.typeLiteral = {
-                                properties: this.getInterfaceProperties({
-                                    children: declaration.children,
-                                }),
-                            };
-                        }
-                    }
-                }
-                if (child.type.type === 'typeOperator') {
-                    definition.name = `${child.type.operator} ${child.type.target.name}`;
-                }
-                if (child.type.typeArguments) {
-                    definition.typeArguments = this.getTypeArgumentDefinitions(child.type);
-                }
-                if (child.type.package) {
-                    definition.package = child.type.package;
-                }
-                return definition;
-        }
-    }
-    getParameterDefinitions(callSignature, parentTags) {
-        if (!callSignature.parameters) {
-            return [];
-        }
-        const parameters = callSignature.parameters.map((p) => {
-            const tags = this.getParameterCommentTags(p, parentTags);
-            const defaultValue = this.getDefaultValue(p, tags);
-            const typeArguments = this.getTypeArgumentDefinitions(p.type);
-            const parameter = {
-                isOptional: !!(defaultValue || !!p.flags?.isOptional),
-                name: p.name,
-                type: this.getTypeDefinition(p),
-            };
-            if (defaultValue !== undefined) {
-                parameter.defaultValue = defaultValue;
-            }
-            if (tags.description) {
-                parameter.description = tags.description;
-            }
-            if (typeArguments.length) {
-                parameter.typeArguments = typeArguments;
-            }
-            return parameter;
-        });
-        return parameters;
-    }
-    getTypeArgumentDefinitions(typeConfig) {
-        if (!typeConfig || !typeConfig.typeArguments) {
-            return [];
-        }
-        return typeConfig.typeArguments.map((typeArgument) => {
-            return this.getTypeDefinition({ type: typeArgument });
-        });
-    }
-    getCallSignatureDefinition(callSignature, tags) {
-        const definition = {
-            returnType: this.getTypeDefinition(callSignature),
-        };
-        const parameters = this.getParameterDefinitions(callSignature, tags);
-        if (parameters.length) {
-            definition.parameters = parameters;
-        }
-        return definition;
-    }
-    getIndexSignatureDefinition(signature) {
-        return {
-            key: {
-                name: signature.parameters[0].name,
-                type: this.getTypeDefinition(signature.parameters[0]),
-            },
-            type: this.getTypeDefinition(signature),
-        };
-    }
-    getTypeParameterDefinitions(typeParameters) {
-        if (!typeParameters) {
-            return [];
-        }
-        return typeParameters.map((typeParam) => {
-            const definition = {
-                name: typeParam.name,
-            };
-            if (typeParam.type) {
-                definition.type = this.getTypeDefinition({
-                    type: typeParam.type,
-                });
-            }
-            return definition;
-        });
-    }
-    getCommentTags(comment) {
-        let codeExample;
-        let codeExampleLanguage = 'markup';
-        let deprecationWarning;
-        let defaultValue;
-        let description = '';
-        let parameters;
-        const extras = {};
-        if (comment) {
-            if (comment.blockTags) {
-                comment.blockTags.forEach((tag) => {
-                    switch (tag.tag) {
-                        case '@deprecated':
-                            deprecationWarning = tag.content
-                                .map((item) => item.text)
-                                .join('')
-                                .trim();
-                            break;
-                        case '@default':
-                        case '@defaultValue':
-                            defaultValue = tag.content
-                                .map((item) => item.text)
-                                .join('')
-                                .trim();
-                            if (tag.content[0].kind === 'code') {
-                                defaultValue = defaultValue.split('```')[1].trim();
-                                const defaultLanguage = defaultValue.split('\n')[0];
-                                if (defaultLanguage === 'markup' ||
-                                    defaultLanguage === 'typescript' ||
-                                    defaultLanguage === 'ts') {
-                                    defaultValue = defaultValue
-                                        .slice(defaultLanguage.length)
-                                        .trim();
-                                }
-                            }
-                            break;
-                        case '@example':
-                            codeExample = tag.content
-                                .map((item) => item.text)
-                                .join('')
-                                .trim()
-                                .split('```')[1]
-                                .trim();
-                            const exampleLanguage = codeExample.split('\n')[0];
-                            if (exampleLanguage === 'markup' ||
-                                exampleLanguage === 'typescript' ||
-                                exampleLanguage === 'ts') {
-                                codeExample = codeExample.slice(exampleLanguage.length).trim();
-                                codeExampleLanguage = exampleLanguage;
-                            }
-                            break;
-                        case '@param':
-                            parameters = parameters || [];
-                            parameters.push({
-                                name: tag.param,
-                                description: tag.content
-                                    .map((item) => item.text)
-                                    .join('')
-                                    .trim(),
-                            });
-                            break;
-                        case '@preview':
-                            extras['preview'] = true;
-                            break;
-                        case '@required':
-                            extras['required'] = true;
-                            break;
-                        /* istanbul ignore next */
-                        default:
-                            break;
-                    }
-                });
-            }
-            description = comment.summary
-                ?.map((item) => item.text)
-                .join('')
-                .trim();
-        }
-        return {
-            codeExample,
-            codeExampleLanguage,
-            defaultValue,
-            deprecationWarning,
-            description,
-            extras,
-            parameters,
-        };
-    }
-    /**
-     * Parameter descriptions are derived from the parent's (function/method) comment.
-     */
-    getParameterCommentTags(parameter, parentTags) {
-        const tags = this.getCommentTags(parameter.comment);
-        const paramTags = parentTags.parameters;
-        const tagParam = paramTags
-            ? paramTags.find((param) => param.name === parameter.name)
-            : undefined;
-        if (!tagParam || !tagParam.description) {
-            return tags;
-        }
-        return {
-            ...tags,
-            ...{
-                description: tagParam.description,
-            },
-        };
-    }
-    /**
-     * Applies comment tag (e.g. `@param`) values to the provided definition, if the value is defined.
-     */
-    applyCommentTagValues(definition, tags) {
-        if (tags.codeExample) {
-            definition.codeExample = tags.codeExample;
-            definition.codeExampleLanguage = tags.codeExampleLanguage;
-        }
-        if (tags.deprecationWarning !== undefined) {
-            definition.deprecationWarning = tags.deprecationWarning;
-        }
-        if (tags.description) {
-            definition.description = tags.description;
-        }
-        if (tags.extras?.preview) {
-            definition.isPreview = tags.extras?.preview;
-        }
-    }
-    getDecorator(child) {
-        const name = child.decorators && child.decorators[0] && child.decorators[0].name;
-        if (name) {
-            return { name };
-        }
-    }
-    getPropertyName(property) {
-        const decorators = property.decorators && property.decorators[0];
-        // Use the Input's bound property name, if found.
-        // e.g. @Input('foobar')
-        return decorators?.arguments?.bindingPropertyName
-            ? decorators.arguments.bindingPropertyName.replace(/(\'|\")/g, '')
-            : property.name;
-    }
-    getDefaultValue(child, tags) {
-        if (tags.defaultValue) {
-            return tags.defaultValue;
-        }
-        // TypeDoc version 0.20.x stopped auto-generating initializers for the default value
-        // (and replaced them with "...") due to the complicated logic it required.
-        // See: https://github.com/TypeStrong/typedoc/issues/1552
-        if (child.defaultValue === '...') {
-            return;
-        }
-        return child.defaultValue;
-    }
-    getAnchorId(entry) {
-        return (entry.anchorId ||
-            this.typeDefinitionsProvider?.anchorIds[entry.name] ||
-            '');
-    }
-    #isInputProperty(property) {
-        return (property.decorator?.name === 'Input' ||
-            (property.type.name === 'InputSignal' &&
-                property.type.package === '@angular/core'));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDocAdapterService, deps: [{ token: SkyDocsTypeDefinitionsProvider, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDocAdapterService, providedIn: 'any' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDocAdapterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'any',
-                }]
-        }], ctorParameters: () => [{ type: SkyDocsTypeDefinitionsProvider, decorators: [{
-                    type: Optional
-                }] }] });
-
-/**
- * Handles all type definitions that have been converted from the third-party documentation generator.
- */
-class SkyDocsTypeDefinitionsService {
-    constructor(typeDefinitionsProvider, adapter) {
-        this.typeDefinitionsProvider = typeDefinitionsProvider;
-        this.adapter = adapter;
-    }
-    /**
-     * Returns type definitions from a specific source code location.
-     * @param sourceCodePath The directory of the source code you wish to pull type definitions from,
-     * relative to the application's root directory.
-     */
-    getTypeDefinitions(sourceCodePath, additionalSourceCodePaths) {
-        if (!sourceCodePath) {
-            throw new Error('The `sourceCodePath` parameter is required');
-        }
-        const sourceCodePaths = additionalSourceCodePaths && additionalSourceCodePaths.length > 0
-            ? [sourceCodePath].concat(additionalSourceCodePaths)
-            : [sourceCodePath];
-        sourceCodePaths.forEach((path) => {
-            if (!path.endsWith('/') && !path.endsWith('.ts')) {
-                throw new Error('Source code paths must end with a forward slash (`/`) or `.ts`.');
-            }
-        });
-        const allDefinitions = this.typeDefinitionsProvider.typeDefinitions;
-        const types = {
-            classes: [],
-            components: [],
-            directives: [],
-            enumerations: [],
-            interfaces: [],
-            pipes: [],
-            services: [],
-            typeAliases: [],
-            hasPreviewFeatures: false,
-        };
-        if (!allDefinitions) {
-            console.warn(`No types were found for this project!`);
-            return types;
-        }
-        sourceCodePaths.forEach((path) => {
-            const requestedDir = path
-                .replace(/src\/app\/public\//, '')
-                .replace(/^\//, ''); // remove first slash.
-            // Only process types that match the requested source code location.
-            const typeDefinitions = allDefinitions.filter((i) => i.sources && i.sources[0].fileName.match(requestedDir));
-            if (typeDefinitions.length === 0) {
-                console.warn(`Type definitions were not found for location: ${requestedDir}`);
-            }
-            typeDefinitions.forEach((item) => {
-                const decorator = item.decorators && item.decorators[0]?.name;
-                const kind = item.kind;
-                switch (decorator) {
-                    case 'Component':
-                        const componentType = this.adapter.toDirectiveDefinition(item);
-                        types.components.push(componentType);
-                        types.hasPreviewFeatures ||= componentType.hasPreviewFeatures;
-                        break;
-                    case 'Directive':
-                        const directiveType = this.adapter.toDirectiveDefinition(item);
-                        types.directives.push(directiveType);
-                        types.hasPreviewFeatures ||= directiveType.hasPreviewFeatures;
-                        break;
-                    case 'Injectable':
-                        const serviceType = this.adapter.toClassDefinition(item);
-                        types.services.push(serviceType);
-                        types.hasPreviewFeatures ||= serviceType.hasPreviewFeatures;
-                        break;
-                    case 'NgModule':
-                        // Don't document modules.
-                        break;
-                    case 'Pipe':
-                        const pipeType = this.adapter.toPipeDefinition(item);
-                        types.pipes.push(pipeType);
-                        types.hasPreviewFeatures ||= pipeType.transformMethod.isPreview;
-                        break;
-                    default:
-                        /*tslint:disable-next-line:switch-default*/
-                        switch (kind) {
-                            case TypeDocKind.Class:
-                                const classType = this.adapter.toClassDefinition(item);
-                                types.classes.push(classType);
-                                types.hasPreviewFeatures ||= classType.hasPreviewFeatures;
-                                break;
-                            case TypeDocKind.Interface:
-                                const interfaceType = this.adapter.toInterfaceDefinition(item);
-                                types.interfaces.push(interfaceType);
-                                types.hasPreviewFeatures ||= interfaceType.hasPreviewFeatures;
-                                break;
-                            case TypeDocKind.Enum:
-                                const enumType = this.adapter.toEnumerationDefinition(item);
-                                types.enumerations.push(enumType);
-                                types.hasPreviewFeatures ||= enumType.hasPreviewFeatures;
-                                break;
-                            case TypeDocKind.TypeAlias:
-                                const typeAliasType = this.adapter.toTypeAliasDefinition(item);
-                                types.typeAliases.push(typeAliasType);
-                                types.hasPreviewFeatures ||= !!typeAliasType.isPreview;
-                                break;
-                        }
-                }
-            });
-        });
-        return types;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDefinitionsService, deps: [{ token: SkyDocsTypeDefinitionsProvider }, { token: SkyDocsTypeDocAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDefinitionsService, providedIn: 'any' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsTypeDefinitionsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'any',
-                }]
-        }], ctorParameters: () => [{ type: SkyDocsTypeDefinitionsProvider }, { type: SkyDocsTypeDocAdapterService }] });
-
-/**
- * @internal
- */
-class SkyDocsDemoPageTypeDefinitionsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageTypeDefinitionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsDemoPageTypeDefinitionsComponent, isStandalone: false, selector: "sky-docs-demo-page-type-definitions", inputs: { types: "types" }, ngImport: i0, template: "<ng-template [ngIf]=\"types\">\n  <sky-docs-demo-page-section\n    *ngIf=\"types.components.length\"\n    heading=\"Components\"\n  >\n    <sky-docs-directive-definition\n      *ngFor=\"let config of types.components\"\n      [config]=\"config\"\n    ></sky-docs-directive-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.directives.length\"\n    heading=\"Directives\"\n  >\n    <sky-docs-directive-definition\n      *ngFor=\"let config of types.directives\"\n      [config]=\"config\"\n    ></sky-docs-directive-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section *ngIf=\"types.pipes.length\" heading=\"Pipes\">\n    <sky-docs-pipe-definition\n      *ngFor=\"let config of types.pipes\"\n      [config]=\"config\"\n    ></sky-docs-pipe-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section *ngIf=\"types.services.length\" heading=\"Services\">\n    <sky-docs-class-definition\n      *ngFor=\"let config of types.services\"\n      [config]=\"config\"\n    ></sky-docs-class-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section *ngIf=\"types.classes.length\" heading=\"Classes\">\n    <sky-docs-class-definition\n      *ngFor=\"let config of types.classes\"\n      [config]=\"config\"\n    ></sky-docs-class-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.interfaces.length\"\n    heading=\"Interfaces\"\n  >\n    <sky-docs-interface-definition\n      *ngFor=\"let config of types.interfaces\"\n      [config]=\"config\"\n    ></sky-docs-interface-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.enumerations.length\"\n    heading=\"Enumerations\"\n  >\n    <sky-docs-enumeration-definition\n      *ngFor=\"let config of types.enumerations\"\n      [config]=\"config\"\n    ></sky-docs-enumeration-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.typeAliases.length\"\n    heading=\"Type aliases\"\n  >\n    <sky-docs-type-alias-definition\n      *ngFor=\"let config of types.typeAliases\"\n      [config]=\"config\"\n    ></sky-docs-type-alias-definition>\n  </sky-docs-demo-page-section>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyDocsClassDefinitionComponent, selector: "sky-docs-class-definition", inputs: ["config"] }, { kind: "component", type: SkyDocsDirectiveDefinitionComponent, selector: "sky-docs-directive-definition", inputs: ["config"] }, { kind: "component", type: SkyDocsEnumerationDefinitionComponent, selector: "sky-docs-enumeration-definition", inputs: ["config"] }, { kind: "component", type: SkyDocsInterfaceDefinitionComponent, selector: "sky-docs-interface-definition", inputs: ["config"] }, { kind: "component", type: SkyDocsPipeDefinitionComponent, selector: "sky-docs-pipe-definition", inputs: ["config"] }, { kind: "component", type: SkyDocsTypeAliasDefinitionComponent, selector: "sky-docs-type-alias-definition", inputs: ["config"] }, { kind: "component", type: SkyDocsDemoPageSectionComponent, selector: "sky-docs-demo-page-section", inputs: ["heading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageTypeDefinitionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-demo-page-type-definitions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template [ngIf]=\"types\">\n  <sky-docs-demo-page-section\n    *ngIf=\"types.components.length\"\n    heading=\"Components\"\n  >\n    <sky-docs-directive-definition\n      *ngFor=\"let config of types.components\"\n      [config]=\"config\"\n    ></sky-docs-directive-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.directives.length\"\n    heading=\"Directives\"\n  >\n    <sky-docs-directive-definition\n      *ngFor=\"let config of types.directives\"\n      [config]=\"config\"\n    ></sky-docs-directive-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section *ngIf=\"types.pipes.length\" heading=\"Pipes\">\n    <sky-docs-pipe-definition\n      *ngFor=\"let config of types.pipes\"\n      [config]=\"config\"\n    ></sky-docs-pipe-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section *ngIf=\"types.services.length\" heading=\"Services\">\n    <sky-docs-class-definition\n      *ngFor=\"let config of types.services\"\n      [config]=\"config\"\n    ></sky-docs-class-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section *ngIf=\"types.classes.length\" heading=\"Classes\">\n    <sky-docs-class-definition\n      *ngFor=\"let config of types.classes\"\n      [config]=\"config\"\n    ></sky-docs-class-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.interfaces.length\"\n    heading=\"Interfaces\"\n  >\n    <sky-docs-interface-definition\n      *ngFor=\"let config of types.interfaces\"\n      [config]=\"config\"\n    ></sky-docs-interface-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.enumerations.length\"\n    heading=\"Enumerations\"\n  >\n    <sky-docs-enumeration-definition\n      *ngFor=\"let config of types.enumerations\"\n      [config]=\"config\"\n    ></sky-docs-enumeration-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.typeAliases.length\"\n    heading=\"Type aliases\"\n  >\n    <sky-docs-type-alias-definition\n      *ngFor=\"let config of types.typeAliases\"\n      [config]=\"config\"\n    ></sky-docs-type-alias-definition>\n  </sky-docs-demo-page-section>\n</ng-template>\n" }]
-        }], propDecorators: { types: [{
-                type: Input
-            }] } });
-
-/**
- * The demo page component wraps all documentation components and handles the configuration and layout of the page.
- * @example
- * ```
- * <sky-docs-demo-page
- *   pageTitle="My demo page"
- * >
- *   Content here.
- * </sky-docs-demo-page>
- * ```
- */
-class SkyDocsDemoPageComponent {
-    /**
-     * Specifies the local path to any other relevant source code. The values are relative to the root directory.
-     */
-    set additionalSourceCodePaths(paths) {
-        this.#_additionalSourceCodePaths = paths;
-        this.#updateTypes();
-    }
-    get additionalSourceCodePaths() {
-        return this.#_additionalSourceCodePaths;
-    }
-    /**
-     * Specifies the local path to any other relevant testing source code. The values are relative to the root directory.
-     */
-    set additionalTestingSourceCodePaths(paths) {
-        this.#_additionalTestingSourceCodePaths = paths;
-        this.#updateTestingTypes();
-    }
-    get additionalTestingSourceCodePaths() {
-        return this.#_additionalTestingSourceCodePaths;
-    }
-    /**
-     * Specifies the local path to the module's source code. The value is relative to the root directory.
-     */
-    set moduleSourceCodePath(path) {
-        this.#_moduleSourceCodePath = path;
-        this.testingSourceCodePath = path.replace('/modules/', '/testing/');
-        this.#updateTypes();
-        this.#updateTestingTypes();
-    }
-    get moduleSourceCodePath() {
-        return this.#_moduleSourceCodePath;
-    }
-    #_additionalSourceCodePaths;
-    #_additionalTestingSourceCodePaths;
-    #_moduleSourceCodePath;
-    constructor(activatedRoute, changeDetector, router, skyAppConfig, domAdapter, supportalService, titleService, typeDefinitionService) {
-        this.activatedRoute = activatedRoute;
-        this.changeDetector = changeDetector;
-        this.router = router;
-        this.skyAppConfig = skyAppConfig;
-        this.domAdapter = domAdapter;
-        this.supportalService = supportalService;
-        this.titleService = titleService;
-        this.typeDefinitionService = typeDefinitionService;
-        /**
-         * @internal
-         */
-        this.enableCodeExamples = false;
-        /**
-         * @internal
-         */
-        this.enableTestingTab = false;
-        /**
-         * @internal
-         */
-        this.enableTabLayout = false;
-        this.hasPreviewFeatures = false;
-        this.siteOptions = inject(SkyDocsToolsSiteOptions, { optional: true });
-    }
-    ngOnInit() {
-        const currentHostUrl = this.skyAppConfig.skyux.host.url + '/' + this.skyAppConfig.skyux.name;
-        this.updateTitle();
-        this.supportalService
-            .getComponentsInfo()
-            .subscribe((results) => {
-            this.sidebarRoutes = [
-                {
-                    name: 'Components',
-                    path: 'https://developer.blackbaud.com/skyux/components',
-                    children: results.map((component) => ({
-                        name: component.name,
-                        path: this.getPath(component.url, currentHostUrl),
-                    })),
-                },
-            ];
-            this.changeDetector.markForCheck();
-        });
-    }
-    ngAfterContentInit() {
-        this.enableCodeExamples = this.codeExampleComponents.length > 0;
-        this.enableTabLayout =
-            !!this.designGuidelinesComponent || this.enableCodeExamples;
-    }
-    ngAfterViewInit() {
-        // Watch for route fragment to change and scroll to heading.
-        this.activatedRoute.fragment.subscribe((fragment) => {
-            this.domAdapter.scrollToFragment(fragment);
-        });
-        // Change the HREF attribute for all dynamic links when the query params change.
-        // This will also generate the appropriate HREF if the user wants to open the link in a new window.
-        this.activatedRoute.queryParams.subscribe(() => {
-            this.domAdapter.setupAnchorLinks();
-        });
-        // When a dynamic link is clicked, use Angular's router so that everything works correctly.
-        this.domAdapter.anchorLinkClick.subscribe((anchorLink) => {
-            const fragment = anchorLink.href.split('#')[1];
-            this.router.navigate([], {
-                fragment,
-                queryParamsHandling: 'merge',
-            });
-            if (this.activatedRoute.snapshot.fragment === fragment) {
-                this.domAdapter.scrollToFragment(fragment);
-            }
-        });
-    }
-    updateTitle() {
-        /*istanbul ignore else*/
-        if (this.pageTitle) {
-            this.titleService.setTitle(this.pageTitle, 'Components');
-        }
-    }
-    getPath(url, currentHostUrl) {
-        // Replace host + SPA so Stache will mark active.
-        // Strip URL params is url is local, as those will be preserved by stacheRouterLink.
-        if (url.indexOf(currentHostUrl) > -1) {
-            return url.replace(currentHostUrl, '').split('?')[0];
-        }
-        else {
-            return url;
-        }
-    }
-    #updateTypes() {
-        this.moduleTypeDefinitions = this.typeDefinitionService.getTypeDefinitions(this.moduleSourceCodePath, this.additionalSourceCodePaths);
-    }
-    #updateTestingTypes() {
-        this.testingTypeDefinitions = this.typeDefinitionService.getTypeDefinitions(this.testingSourceCodePath, this.additionalTestingSourceCodePaths);
-        this.enableTestingTab = Object.values(this.testingTypeDefinitions).some((value) => value && value.length > 0);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i1$3.Router }, { token: i2$1.SkyAppConfig }, { token: SkyDocsDemoPageDomAdapterService }, { token: SkyDocsSupportalService }, { token: SkyDocsDemoPageTitleService }, { token: SkyDocsTypeDefinitionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsDemoPageComponent, isStandalone: false, selector: "sky-docs-demo-page", inputs: { additionalSourceCodePaths: "additionalSourceCodePaths", additionalTestingSourceCodePaths: "additionalTestingSourceCodePaths", gitRepoUrl: "gitRepoUrl", moduleName: "moduleName", moduleSourceCodePath: "moduleSourceCodePath", packageName: "packageName", packageUrl: "packageUrl", pageTitle: "pageTitle" }, providers: [SkyDocsDemoPageDomAdapterService], queries: [{ propertyName: "designGuidelinesComponent", first: true, predicate: SkyDocsDesignGuidelinesComponent, descendants: true }, { propertyName: "codeExampleComponents", predicate: SkyDocsCodeExamplesComponent }], ngImport: i0, template: "<div class=\"sky-docs-demo-page\">\n  <stache\n    layout=\"sidebar\"\n    [pageTitle]=\"pageTitle\"\n    [showBreadcrumbs]=\"false\"\n    [showTableOfContents]=\"false\"\n    [sidebarRoutes]=\"sidebarRoutes\"\n  >\n    <ng-content select=\"sky-docs-demo-page-summary\"></ng-content>\n\n    <sky-alert\n      *ngIf=\"\n        moduleTypeDefinitions?.hasPreviewFeatures ||\n        testingTypeDefinitions?.hasPreviewFeatures\n      \"\n      class=\"sky-docs-demo-page-preview-alert sky-margin-stacked-lg\"\n      >This component currently has preview features available that may not be\n      fully represented in the design documentation, the demo, or code examples.\n      <ng-container *ngIf=\"siteOptions?.previewFeaturesUrl\"\n        >Learn more about this work\n        <a [skyAppLink]=\"siteOptions?.previewFeaturesUrl\"\n          >here.</a\n        ></ng-container\n      ></sky-alert\n    >\n\n    <ng-content select=\"sky-docs-demo\"></ng-content>\n\n    <div class=\"sky-docs-demo-page-main\">\n      <sky-tabset *ngIf=\"enableTabLayout; else content\" permalinkId=\"docs\">\n        <sky-tab tabHeading=\"Design\" *ngIf=\"!!designGuidelinesComponent\">\n          <ng-content select=\"sky-docs-design-guidelines\"></ng-content>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Development\">\n          <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Testing\" *ngIf=\"enableTestingTab\">\n          <sky-docs-demo-page-section heading=\"Test harnesses\">\n            <p>\n              SKY UX test harnesses are built upon Angular CDK component\n              harnesses. For more information see the\n              <a href=\"https://material.angular.io/cdk/test-harnesses/overview\"\n                >Angular CDK component harness documentation</a\n              >.\n            </p>\n          </sky-docs-demo-page-section>\n          <sky-docs-demo-page-type-definitions [types]=\"testingTypeDefinitions\">\n          </sky-docs-demo-page-type-definitions>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Code examples\" *ngIf=\"enableCodeExamples\">\n          <ng-content select=\"sky-docs-code-examples\"></ng-content>\n        </sky-tab>\n      </sky-tabset>\n    </div>\n  </stache>\n</div>\n\n<ng-template #content>\n  <sky-docs-demo-page-section\n    *ngIf=\"moduleName || packageName\"\n    heading=\"Installation\"\n  >\n    <sky-docs-module-info\n      [gitRepoUrl]=\"gitRepoUrl\"\n      [moduleName]=\"moduleName\"\n      [packageName]=\"packageName\"\n      [packageUrl]=\"packageUrl\"\n    >\n      <ng-content select=\"sky-docs-demo-page-module-info\"></ng-content>\n    </sky-docs-module-info>\n  </sky-docs-demo-page-section>\n\n  <ng-content></ng-content>\n\n  <sky-docs-demo-page-type-definitions [types]=\"moduleTypeDefinitions\">\n  </sky-docs-demo-page-type-definitions>\n</ng-template>\n", styles: [".sky-docs-demo-page ::ng-deep p{margin:15px 0}.sky-docs-demo-page ::ng-deep .stache-max-width-container{max-width:none;margin:0}.sky-docs-demo-page ::ng-deep .sky-docs-code-block{margin:15px 0;display:block}.sky-docs-demo-page ::ng-deep .sky-docs-code-block .sky-code-block{font-size:13.5px}.sky-docs-demo-page ::ng-deep .sky-docs-code-block .sky-code-output{margin:-2px 0 0;padding:0 0 0 15px;background:transparent;border:0}.sky-docs-demo-page ::ng-deep .sky-definition-list{margin:0}.sky-docs-demo-page ::ng-deep .sky-definition-list .sky-docs-code-block{margin:0}.sky-docs-demo-page ::ng-deep .sky-docs-type-definition-wrapper{margin-bottom:40px}.sky-docs-demo-page-main{padding:30px 0}.sky-docs-demo-page-main table{margin-top:15px;margin-bottom:15px}.sky-docs-demo-page-main ::ng-deep .sky-tabset{margin-left:-45px;margin-right:-45px;padding-left:45px;padding-right:45px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$5.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "directive", type: i9.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: SkyDocsModuleInfoComponent, selector: "sky-docs-module-info", inputs: ["gitRepoUrl", "moduleName", "packageName", "packageUrl"] }, { kind: "component", type: i7.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i7.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "component", type: i12.λ30, selector: "stache", inputs: ["pageTitle", "windowTitle", "navTitle", "layout", "sidebarRoutes", "breadcrumbsRoutes", "showBreadcrumbs", "showEditButton", "showFooter", "showTableOfContents", "showBackToTop", "showInNav", "inPageRoutes"] }, { kind: "component", type: SkyDocsDemoPageSectionComponent, selector: "sky-docs-demo-page-section", inputs: ["heading"] }, { kind: "component", type: SkyDocsDemoPageTypeDefinitionsComponent, selector: "sky-docs-demo-page-type-definitions", inputs: ["types"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-demo-page', providers: [SkyDocsDemoPageDomAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-docs-demo-page\">\n  <stache\n    layout=\"sidebar\"\n    [pageTitle]=\"pageTitle\"\n    [showBreadcrumbs]=\"false\"\n    [showTableOfContents]=\"false\"\n    [sidebarRoutes]=\"sidebarRoutes\"\n  >\n    <ng-content select=\"sky-docs-demo-page-summary\"></ng-content>\n\n    <sky-alert\n      *ngIf=\"\n        moduleTypeDefinitions?.hasPreviewFeatures ||\n        testingTypeDefinitions?.hasPreviewFeatures\n      \"\n      class=\"sky-docs-demo-page-preview-alert sky-margin-stacked-lg\"\n      >This component currently has preview features available that may not be\n      fully represented in the design documentation, the demo, or code examples.\n      <ng-container *ngIf=\"siteOptions?.previewFeaturesUrl\"\n        >Learn more about this work\n        <a [skyAppLink]=\"siteOptions?.previewFeaturesUrl\"\n          >here.</a\n        ></ng-container\n      ></sky-alert\n    >\n\n    <ng-content select=\"sky-docs-demo\"></ng-content>\n\n    <div class=\"sky-docs-demo-page-main\">\n      <sky-tabset *ngIf=\"enableTabLayout; else content\" permalinkId=\"docs\">\n        <sky-tab tabHeading=\"Design\" *ngIf=\"!!designGuidelinesComponent\">\n          <ng-content select=\"sky-docs-design-guidelines\"></ng-content>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Development\">\n          <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Testing\" *ngIf=\"enableTestingTab\">\n          <sky-docs-demo-page-section heading=\"Test harnesses\">\n            <p>\n              SKY UX test harnesses are built upon Angular CDK component\n              harnesses. For more information see the\n              <a href=\"https://material.angular.io/cdk/test-harnesses/overview\"\n                >Angular CDK component harness documentation</a\n              >.\n            </p>\n          </sky-docs-demo-page-section>\n          <sky-docs-demo-page-type-definitions [types]=\"testingTypeDefinitions\">\n          </sky-docs-demo-page-type-definitions>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Code examples\" *ngIf=\"enableCodeExamples\">\n          <ng-content select=\"sky-docs-code-examples\"></ng-content>\n        </sky-tab>\n      </sky-tabset>\n    </div>\n  </stache>\n</div>\n\n<ng-template #content>\n  <sky-docs-demo-page-section\n    *ngIf=\"moduleName || packageName\"\n    heading=\"Installation\"\n  >\n    <sky-docs-module-info\n      [gitRepoUrl]=\"gitRepoUrl\"\n      [moduleName]=\"moduleName\"\n      [packageName]=\"packageName\"\n      [packageUrl]=\"packageUrl\"\n    >\n      <ng-content select=\"sky-docs-demo-page-module-info\"></ng-content>\n    </sky-docs-module-info>\n  </sky-docs-demo-page-section>\n\n  <ng-content></ng-content>\n\n  <sky-docs-demo-page-type-definitions [types]=\"moduleTypeDefinitions\">\n  </sky-docs-demo-page-type-definitions>\n</ng-template>\n", styles: [".sky-docs-demo-page ::ng-deep p{margin:15px 0}.sky-docs-demo-page ::ng-deep .stache-max-width-container{max-width:none;margin:0}.sky-docs-demo-page ::ng-deep .sky-docs-code-block{margin:15px 0;display:block}.sky-docs-demo-page ::ng-deep .sky-docs-code-block .sky-code-block{font-size:13.5px}.sky-docs-demo-page ::ng-deep .sky-docs-code-block .sky-code-output{margin:-2px 0 0;padding:0 0 0 15px;background:transparent;border:0}.sky-docs-demo-page ::ng-deep .sky-definition-list{margin:0}.sky-docs-demo-page ::ng-deep .sky-definition-list .sky-docs-code-block{margin:0}.sky-docs-demo-page ::ng-deep .sky-docs-type-definition-wrapper{margin-bottom:40px}.sky-docs-demo-page-main{padding:30px 0}.sky-docs-demo-page-main table{margin-top:15px;margin-bottom:15px}.sky-docs-demo-page-main ::ng-deep .sky-tabset{margin-left:-45px;margin-right:-45px;padding-left:45px;padding-right:45px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i1$3.Router }, { type: i2$1.SkyAppConfig }, { type: SkyDocsDemoPageDomAdapterService }, { type: SkyDocsSupportalService }, { type: SkyDocsDemoPageTitleService }, { type: SkyDocsTypeDefinitionsService }], propDecorators: { additionalSourceCodePaths: [{
-                type: Input
-            }], additionalTestingSourceCodePaths: [{
-                type: Input
-            }], gitRepoUrl: [{
-                type: Input
-            }], moduleName: [{
-                type: Input
-            }], moduleSourceCodePath: [{
-                type: Input
-            }], packageName: [{
-                type: Input
-            }], packageUrl: [{
-                type: Input
-            }], pageTitle: [{
-                type: Input
-            }], designGuidelinesComponent: [{
-                type: ContentChild,
-                args: [SkyDocsDesignGuidelinesComponent]
-            }], codeExampleComponents: [{
-                type: ContentChildren,
-                args: [SkyDocsCodeExamplesComponent]
-            }] } });
-
-class SkyDocsDemoPageModuleInfoComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageModuleInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsDemoPageModuleInfoComponent, isStandalone: false, selector: "sky-docs-demo-page-module-info", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageModuleInfoComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-docs-demo-page-module-info',
-                    template: '<ng-content></ng-content>',
-                    standalone: false,
-                }]
-        }] });
-
-class SkyDocsDemoPageModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageModule, declarations: [SkyDocsDemoPageComponent,
-            SkyDocsDemoPageModuleInfoComponent,
-            SkyDocsDemoPageSectionComponent,
-            SkyDocsDemoPageSummaryComponent,
-            SkyDocsDemoPageTypeDefinitionsComponent], imports: [CommonModule,
-            RouterModule,
-            SkyAlertModule,
-            SkyAppLinkModule,
-            SkyCodeBlockModule,
-            SkyCodeModule,
-            SkyDocsDemoModule,
-            SkyDocsHeadingAnchorModule,
-            SkyDocsMarkdownModule,
-            SkyDocsModuleInfoModule,
-            SkyDocsTypeDefinitionsModule,
-            SkyTabsModule,
-            StachePageSummaryModule,
-            StacheWrapperModule], exports: [SkyDocsDemoPageComponent,
-            SkyDocsDemoPageModuleInfoComponent,
-            SkyDocsDemoPageSectionComponent,
-            SkyDocsDemoPageSummaryComponent,
-            SkyDocsDemoPageTypeDefinitionsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageModule, imports: [CommonModule,
-            RouterModule,
-            SkyAlertModule,
-            SkyAppLinkModule,
-            SkyCodeBlockModule,
-            SkyCodeModule,
-            SkyDocsDemoModule,
-            SkyDocsHeadingAnchorModule,
-            SkyDocsMarkdownModule,
-            SkyDocsModuleInfoModule,
-            SkyDocsTypeDefinitionsModule,
-            SkyTabsModule,
-            StachePageSummaryModule,
-            StacheWrapperModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDemoPageModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        RouterModule,
-                        SkyAlertModule,
-                        SkyAppLinkModule,
-                        SkyCodeBlockModule,
-                        SkyCodeModule,
-                        SkyDocsDemoModule,
-                        SkyDocsHeadingAnchorModule,
-                        SkyDocsMarkdownModule,
-                        SkyDocsModuleInfoModule,
-                        SkyDocsTypeDefinitionsModule,
-                        SkyTabsModule,
-                        StachePageSummaryModule,
-                        StacheWrapperModule,
-                    ],
-                    declarations: [
-                        SkyDocsDemoPageComponent,
-                        SkyDocsDemoPageModuleInfoComponent,
-                        SkyDocsDemoPageSectionComponent,
-                        SkyDocsDemoPageSummaryComponent,
-                        SkyDocsDemoPageTypeDefinitionsComponent,
-                    ],
-                    exports: [
-                        SkyDocsDemoPageComponent,
-                        SkyDocsDemoPageModuleInfoComponent,
-                        SkyDocsDemoPageSectionComponent,
-                        SkyDocsDemoPageSummaryComponent,
-                        SkyDocsDemoPageTypeDefinitionsComponent,
-                    ],
-                }]
-        }] });
-
-class SkyDocsDesignGuidelineThumbnailComponent {
-    constructor() {
-        this.showBorder = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDesignGuidelineThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsDesignGuidelineThumbnailComponent, isStandalone: false, selector: "sky-docs-design-guideline-thumbnail", inputs: { caption: "caption", captionType: "captionType", imageAlt: "imageAlt", imageSource: "imageSource", videoSource: "videoSource", showBorder: "showBorder" }, ngImport: i0, template: "<div class=\"sky-docs-design-guideline-thumbnail\">\n  <sky-docs-thumbnail\n    [caption]=\"caption\"\n    [captionType]=\"captionType\"\n    [imageAlt]=\"imageAlt\"\n    [imageSource]=\"imageSource\"\n    [videoSource]=\"videoSource\"\n    [showBorder]=\"showBorder\"\n  ></sky-docs-thumbnail>\n</div>\n", styles: [".sky-docs-design-guideline-thumbnail{margin-bottom:50px}.sky-docs-design-guideline-video video{max-width:100%}.sky-docs-design-guideline-video-border video{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4}\n"], dependencies: [{ kind: "component", type: SkyDocsThumbnailComponent, selector: "sky-docs-thumbnail", inputs: ["caption", "captionType", "imageAlt", "imageSource", "showBorder", "videoSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDesignGuidelineThumbnailComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-design-guideline-thumbnail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-docs-design-guideline-thumbnail\">\n  <sky-docs-thumbnail\n    [caption]=\"caption\"\n    [captionType]=\"captionType\"\n    [imageAlt]=\"imageAlt\"\n    [imageSource]=\"imageSource\"\n    [videoSource]=\"videoSource\"\n    [showBorder]=\"showBorder\"\n  ></sky-docs-thumbnail>\n</div>\n", styles: [".sky-docs-design-guideline-thumbnail{margin-bottom:50px}.sky-docs-design-guideline-video video{max-width:100%}.sky-docs-design-guideline-video-border video{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4}\n"] }]
-        }], propDecorators: { caption: [{
-                type: Input
-            }], captionType: [{
-                type: Input
-            }], imageAlt: [{
-                type: Input
-            }], imageSource: [{
-                type: Input
-            }], videoSource: [{
-                type: Input
-            }], showBorder: [{
-                type: Input
-            }] } });
-
-class SkyDocsDesignGuidelineComponent {
-    constructor() {
-        this.headingStyle = 'default';
-        this.hasThumbnails = false;
-    }
-    get classNames() {
-        const classNames = [];
-        classNames.push(`sky-text-${this.headingStyle}`);
-        return classNames.join(' ');
-    }
-    ngAfterContentInit() {
-        this.hasThumbnails = !!this.thumbnails.length;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDesignGuidelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SkyDocsDesignGuidelineComponent, isStandalone: false, selector: "sky-docs-design-guideline", inputs: { heading: "heading", headingStyle: "headingStyle" }, queries: [{ propertyName: "thumbnails", predicate: SkyDocsDesignGuidelineThumbnailComponent }], ngImport: i0, template: "<div class=\"sky-docs-design-guideline\">\n  <h3\n    *ngIf=\"heading\"\n    class=\"sky-docs-design-guideline-heading\"\n    [ngClass]=\"classNames\"\n  >\n    {{ heading }}\n  </h3>\n  <sky-row *ngIf=\"hasThumbnails; else content\">\n    <sky-column screenSmall=\"6\" screenMedium=\"5\" screenLarge=\"4\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </sky-column>\n    <sky-column screenSmall=\"6\" screenMedium=\"7\" screenLarge=\"8\">\n      <div class=\"sky-docs-design-guideline-thumbnails\">\n        <ng-container *ngTemplateOutlet=\"thumbnails\"></ng-container>\n      </div>\n    </sky-column>\n  </sky-row>\n</div>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #thumbnails>\n  <ng-content select=\"sky-docs-design-guideline-thumbnail\"></ng-content>\n</ng-template>\n", styles: [".sky-docs-design-guideline-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;margin:30px 0 15px;font-size:19px;font-weight:400}.sky-docs-design-guideline-thumbnails{display:flex;flex-wrap:wrap}.sky-docs-design-guideline-thumbnails ::ng-deep sky-docs-design-guideline-thumbnail:first-child{padding-right:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDesignGuidelineComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-docs-design-guideline', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-docs-design-guideline\">\n  <h3\n    *ngIf=\"heading\"\n    class=\"sky-docs-design-guideline-heading\"\n    [ngClass]=\"classNames\"\n  >\n    {{ heading }}\n  </h3>\n  <sky-row *ngIf=\"hasThumbnails; else content\">\n    <sky-column screenSmall=\"6\" screenMedium=\"5\" screenLarge=\"4\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </sky-column>\n    <sky-column screenSmall=\"6\" screenMedium=\"7\" screenLarge=\"8\">\n      <div class=\"sky-docs-design-guideline-thumbnails\">\n        <ng-container *ngTemplateOutlet=\"thumbnails\"></ng-container>\n      </div>\n    </sky-column>\n  </sky-row>\n</div>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #thumbnails>\n  <ng-content select=\"sky-docs-design-guideline-thumbnail\"></ng-content>\n</ng-template>\n", styles: [".sky-docs-design-guideline-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;margin:30px 0 15px;font-size:19px;font-weight:400}.sky-docs-design-guideline-thumbnails{display:flex;flex-wrap:wrap}.sky-docs-design-guideline-thumbnails ::ng-deep sky-docs-design-guideline-thumbnail:first-child{padding-right:20px}\n"] }]
-        }], propDecorators: { heading: [{
-                type: Input
-            }], headingStyle: [{
-                type: Input
-            }], thumbnails: [{
-                type: ContentChildren,
-                args: [SkyDocsDesignGuidelineThumbnailComponent]
-            }] } });
-
-class SkyDocsDesignGuidelinesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDesignGuidelinesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDesignGuidelinesModule, declarations: [SkyDocsDesignGuidelineComponent,
-            SkyDocsDesignGuidelineThumbnailComponent,
-            SkyDocsDesignGuidelinesComponent], imports: [CommonModule, SkyDocsThumbnailModule, SkyFluidGridModule], exports: [SkyDocsDesignGuidelineComponent,
-            SkyDocsDesignGuidelineThumbnailComponent,
-            SkyDocsDesignGuidelinesComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDesignGuidelinesModule, imports: [CommonModule, SkyDocsThumbnailModule, SkyFluidGridModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsDesignGuidelinesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, SkyDocsThumbnailModule, SkyFluidGridModule],
-                    declarations: [
-                        SkyDocsDesignGuidelineComponent,
-                        SkyDocsDesignGuidelineThumbnailComponent,
-                        SkyDocsDesignGuidelinesComponent,
-                    ],
-                    exports: [
-                        SkyDocsDesignGuidelineComponent,
-                        SkyDocsDesignGuidelineThumbnailComponent,
-                        SkyDocsDesignGuidelinesComponent,
-                    ],
-                }]
-        }] });
-
-/**
- * This module conveniently exports the most commonly used modules.
- */
-class SkyDocsToolsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsToolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsToolsModule, exports: [SkyDocsAnatomyModule,
-            SkyDocsCodeExamplesModule,
-            SkyDocsDemoModule,
-            SkyDocsDemoPageModule,
-            SkyDocsDesignGuidelinesModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsToolsModule, imports: [SkyDocsAnatomyModule,
-            SkyDocsCodeExamplesModule,
-            SkyDocsDemoModule,
-            SkyDocsDemoPageModule,
-            SkyDocsDesignGuidelinesModule] }); }
+class SkyCodeExampleViewerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeExampleViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeExampleViewerModule, imports: [SkyCodeExampleViewerComponent], exports: [SkyCodeExampleViewerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeExampleViewerModule, imports: [SkyCodeExampleViewerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SkyDocsToolsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyCodeExampleViewerModule, decorators: [{
             type: NgModule,
             args: [{
-                    exports: [
-                        SkyDocsAnatomyModule,
-                        SkyDocsCodeExamplesModule,
-                        SkyDocsDemoModule,
-                        SkyDocsDemoPageModule,
-                        SkyDocsDesignGuidelinesModule,
-                    ],
+                    imports: [SkyCodeExampleViewerComponent],
+                    exports: [SkyCodeExampleViewerComponent],
                 }]
         }] });
 
@@ -3435,5 +544,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SkyDocsAnatomyModule, SkyDocsCodeExampleTheme, SkyDocsCodeExamplesModule, SkyDocsDemoModule, SkyDocsDemoPageModule, SkyDocsDesignGuidelinesModule, SkyDocsHeadingAnchorModule, SkyDocsMarkdownModule, SkyDocsMarkdownPipe, SkyDocsModuleInfoModule, SkyDocsSourceCodeProvider, SkyDocsSupportalService, SkyDocsThumbnailModule, SkyDocsToolsModule, SkyDocsToolsOptions, SkyDocsToolsSiteOptions, SkyDocsTypeDefinitionsModule, SkyDocsTypeDefinitionsProvider, SkyDocsTypeDefinitionsService, SkyDocsAnatomyItemComponent as λ1, SkyDocsDemoPageModuleInfoComponent as λ10, SkyDocsDemoPageSectionComponent as λ11, SkyDocsDemoPageSummaryComponent as λ12, SkyDocsDemoPageTypeDefinitionsComponent as λ13, SkyDocsDemoPageComponent as λ14, SkyDocsDesignGuidelineThumbnailComponent as λ15, SkyDocsDesignGuidelineComponent as λ16, SkyDocsDesignGuidelinesComponent as λ17, SkyDocsHeadingAnchorComponent as λ18, SkyDocsModuleInfoComponent as λ19, SkyDocsAnatomyComponent as λ2, SkyDocsThumbnailComponent as λ20, SkyDocsCallSignatureDefinitionComponent as λ21, SkyDocsClassDefinitionComponent as λ22, SkyDocsDirectiveDefinitionComponent as λ23, SkyDocsEnumerationDefinitionComponent as λ24, SkyDocsInterfaceDefinitionComponent as λ25, SkyDocsMethodDefinitionsComponent as λ26, SkyDocsPipeDefinitionComponent as λ27, SkyDocsPropertyDefinitionsComponent as λ28, SkyDocsTypeAliasDefinitionComponent as λ29, SkyDocsCodeExampleComponent as λ3, SkyDocsTypeAnchorLinksPipe as λ30, SkyDocsAnatomyThumbnailComponent as λ31, SkyDocsDemoCustomControlPanelComponent as λ32, SkyDocsCodeExamplesComponent as λ4, SkyDocsDemoControlPanelCheckboxComponent as λ5, SkyDocsDemoControlPanelRadioGroupComponent as λ6, SkyDocsDemoControlPanelSectionComponent as λ7, SkyDocsDemoControlPanelComponent as λ8, SkyDocsDemoComponent as λ9 };
+export { SKY_CODE_SNIPPET_LANGUAGES, SkyCodeExampleViewerModule, SkyCodeSnippetModule, SkyCodeSnippetComponent as λ1, SkyCodeExampleViewerComponent as λ2 };
 //# sourceMappingURL=skyux-docs-tools.mjs.map