@skyux/docs-tools 5.0.0-beta.9 → 6.0.0-beta.2

package/fesm2020/skyux-docs-tools.mjs

@@ -0,0 +1,3074 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, ContentChildren, NgModule, Optional, Injectable, EventEmitter, Output, ElementRef, Pipe, ContentChild } from '@angular/core';
+import * as i2$2 from '@blackbaud/skyux-lib-media';
+import { SkyImageModule } from '@blackbaud/skyux-lib-media';
+import * as i2$1 from '@skyux/layout';
+import { SkyFluidGridModule, SkyDefinitionListModule } from '@skyux/layout';
+import * as i3$1 from '@blackbaud/skyux-lib-code-block';
+import { SkyCodeBlockModule, SkyCodeModule } from '@blackbaud/skyux-lib-code-block';
+import * as i1$1 from '@skyux/indicators';
+import { SkyIconModule, SkyHelpInlineModule } from '@skyux/indicators';
+import * as i3 from '@skyux/lists';
+import { SkyRepeaterModule } from '@skyux/lists';
+import * as i4 from '@skyux/tabs';
+import { SkyVerticalTabsetModule, SkyTabsModule } from '@skyux/tabs';
+import * as i8 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import { Subject, merge } from 'rxjs';
+import { takeUntil, map, share } from 'rxjs/operators';
+import * as i1 from '@skyux/theme';
+import { SkyThemeModule } from '@skyux/theme';
+import StackBlitzSDK from '@stackblitz/sdk';
+import * as i2$3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1$2 from '@skyux/forms';
+import { SkyCheckboxModule, SkyRadioModule } from '@skyux/forms';
+import * as i6$1 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 i6 from '@blackbaud/skyux-lib-clipboard';
+import { SkyClipboardModule } from '@blackbaud/skyux-lib-clipboard';
+import * as i5 from '@skyux/popovers';
+import { SkyPopoverModule } from '@skyux/popovers';
+import * as i1$4 from '@angular/platform-browser';
+import * as i2$4 from '@skyux/core';
+import { SkyMediaBreakpoints } from '@skyux/core';
+import * as i2$5 from '@skyux/config';
+import * as i1$5 from '@angular/common/http';
+import orderBy from 'lodash.orderby';
+import { SkyAuthHttpClientModule } from '@skyux/http';
+
+class SkyDocsAnatomyItemComponent {
+    constructor() {
+        this.isOptional = false;
+    }
+}
+SkyDocsAnatomyItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsAnatomyItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsAnatomyItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsAnatomyItemComponent, 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"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsAnatomyItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-anatomy-item', changeDetection: ChangeDetectionStrategy.OnPush, 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();
+        });
+    }
+}
+SkyDocsAnatomyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsAnatomyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsAnatomyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsAnatomyComponent, 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 screenSmall=\"6\" screenMedium=\"5\" screenLarge=\"4\">\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 [imageSource]=\"imagePath\"></sky-image>\n    </sky-column>\n  </sky-row>\n</div>\n", styles: [""], components: [{ type: i2$1.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { type: i2$1.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { type: i2$2.λ4, selector: "sky-image", inputs: ["caption", "captionType", "imageAlt", "imageSource", "showBorder", "showCaptionPrefix"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsAnatomyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-anatomy', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-anatomy\">\n  <sky-row>\n    <sky-column screenSmall=\"6\" screenMedium=\"5\" screenLarge=\"4\">\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 [imageSource]=\"imagePath\"></sky-image>\n    </sky-column>\n  </sky-row>\n</div>\n", styles: [""] }]
+        }], propDecorators: { imagePath: [{
+                type: Input
+            }], anatomyItems: [{
+                type: ContentChildren,
+                args: [SkyDocsAnatomyItemComponent]
+            }] } });
+
+class SkyDocsAnatomyModule {
+}
+SkyDocsAnatomyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsAnatomyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsAnatomyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsAnatomyModule, declarations: [SkyDocsAnatomyComponent, SkyDocsAnatomyItemComponent], imports: [CommonModule, SkyFluidGridModule, SkyImageModule], exports: [SkyDocsAnatomyComponent, SkyDocsAnatomyItemComponent] });
+SkyDocsAnatomyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsAnatomyModule, imports: [[CommonModule, SkyFluidGridModule, SkyImageModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsAnatomyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SkyFluidGridModule, SkyImageModule],
+                    declarations: [SkyDocsAnatomyComponent, SkyDocsAnatomyItemComponent],
+                    exports: [SkyDocsAnatomyComponent, SkyDocsAnatomyItemComponent],
+                }]
+        }] });
+
+/**
+ * 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.
+ * 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-docs-demo-control-panel-reset-button-label': { message: 'Reset' },
+    },
+};
+class SkyDocsToolsResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyDocsToolsResourcesModule {
+}
+SkyDocsToolsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsToolsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsToolsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsToolsResourcesModule, exports: [SkyI18nModule] });
+SkyDocsToolsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsToolsResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyDocsToolsResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsToolsResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyDocsToolsResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+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>
+ * ```
+ */
+class SkyDocsCodeExampleComponent {
+    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;
+                }
+            });
+        }
+    }
+    /**
+     * 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;
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+}
+SkyDocsCodeExampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExampleComponent, deps: [{ token: i1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsCodeExampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsCodeExampleComponent, selector: "sky-docs-code-example", inputs: { heading: "heading", sourceCodePath: "sourceCodePath", theme: "theme" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExampleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-code-example',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyThemeService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { heading: [{
+                type: Input
+            }], sourceCodePath: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyDocsCodeExamplesEditorService {
+    launchEditor(codeExample) {
+        const project = this.getPayload(codeExample);
+        const options = {};
+        StackBlitzSDK.openProject(project, options);
+    }
+    getPayload(codeExample) {
+        const angularVersion = '^13.0.0';
+        const skyuxVersion = '^6.0.0-0';
+        const defaultDependencies = {
+            '@angular/animations': angularVersion,
+            '@angular/cdk': angularVersion,
+            '@angular/common': angularVersion,
+            '@angular/compiler': 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/http': skyuxVersion,
+            '@skyux/i18n': skyuxVersion,
+            '@skyux/indicators': skyuxVersion,
+            '@skyux/layout': skyuxVersion,
+            '@skyux/modals': skyuxVersion,
+            '@skyux/popovers': skyuxVersion,
+            '@skyux/router': skyuxVersion,
+            '@skyux/theme': skyuxVersion,
+            // We must define Dragula deliberately so that StackBlitz runs NGCC against it.
+            'ng2-dragula': '2.1.1',
+            rxjs: '^7',
+            tslib: '^2.3.0',
+            'zone.js': '~0.11.4',
+        };
+        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;
+                }
+            }
+        }
+        const files = this.parseStackBlitzFiles(codeExample.sourceCode, mergedDependencies, codeExample.theme, codeExample.stylesheets);
+        return {
+            files,
+            title: 'SKY UX Demo',
+            description: 'SKY UX Demo',
+            template: 'angular-cli',
+            dependencies: mergedDependencies,
+            settings: {
+                compile: {
+                    clearConsole: false,
+                },
+            },
+        };
+    }
+    parseStackBlitzFiles(sourceCode, dependencies, 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 {\n  NgModule\n} from '@angular/core';`,
+            `import {\n  FormsModule,\n  ReactiveFormsModule\n} from '@angular/forms';`,
+            `import {\n  BrowserAnimationsModule\n} from '@angular/platform-browser/animations';`,
+            `import {\n  RouterModule\n} from '@angular/router';`,
+            `import {\n  SkyAppLocaleProvider\n} from '@skyux/i18n';`,
+            `import {\n  SkyThemeService\n} from '@skyux/theme';`,
+            `import {\n  of as observableOf\n} from 'rxjs';`,
+            `import {\n  AppComponent\n} from './app.component';`,
+        ];
+        const moduleImports = [
+            'BrowserAnimationsModule',
+            'FormsModule',
+            'ReactiveFormsModule',
+            'RouterModule.forRoot([])',
+        ];
+        const files = {};
+        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 {\n  ${moduleName}\n} from '${importPath}';`);
+            }
+        });
+        files[`${appPath}app.component.ts`] = `${banner}
+import {
+  Component,
+  Renderer2
+} from '@angular/core';
+
+import {
+  SkyTheme,
+  SkyThemeMode,
+  SkyThemeService,
+  SkyThemeSettings
+} from '@skyux/theme';
+
+@Component({
+  selector: 'sky-demo-app',
+  template: '${appComponentTemplate}'
+})
+export class AppComponent {
+
+  constructor(
+    themeSvc: SkyThemeService,
+    renderer?: Renderer2
+  ) {
+    const themeSettings = new SkyThemeSettings(
+      SkyTheme.presets['${theme === SkyDocsCodeExampleTheme.Modern ? 'modern' : 'default'}'],
+      SkyThemeMode.presets.light
+    );
+
+    themeSvc.init(
+      document.body,
+      renderer,
+      themeSettings
+    );
+  }
+
+}`;
+        files[`${appPath}app.module.ts`] = `${moduleImportStatements.join('\n\n')}
+
+@NgModule({
+  imports: [
+    ${moduleImports.join(',\n    ')}
+  ],
+  declarations: [
+    AppComponent
+  ],
+  bootstrap: [
+    AppComponent
+  ],
+  providers: [
+    SkyThemeService,
+    {
+      provide: SkyAppLocaleProvider,
+      useValue: {
+        getLocaleInfo: () => observableOf({
+          locale: 'en-US'
+        })
+      }
+    }
+  ]
+})
+export class AppModule { }
+`;
+        files[`${srcPath}index.html`] = `<!--
+  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" />
+<link rel="stylesheet" type="text/css" href="https://sky.blackbaudcdn.net/static/skyux-icons/5.0.0/assets/css/skyux-icons.min.css" />
+
+<sky-demo-app>
+  Loading...
+</sky-demo-app>`;
+        files[`${srcPath}main.ts`] = `${banner}
+import './polyfills';
+
+import {
+  platformBrowserDynamic
+} from '@angular/platform-browser-dynamic';
+
+import {
+  AppModule
+} from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
+  if (window['ngRef']) {
+    window['ngRef'].destroy();
+  }
+
+  window['ngRef'] = ref;
+}).catch(err => console.error(err));
+`;
+        files[`${srcPath}polyfills.ts`] = `${banner}
+import 'zone.js';
+`;
+        files[`${srcPath}styles.scss`] = `@import '~@skyux/theme/css/sky';
+@import '~@skyux/theme/css/themes/modern/styles';
+
+body {
+  background-color: #fff;
+  margin: 15px;
+}`;
+        stylesheets.push('src/styles.scss');
+        files['angular.json'] = `{
+  "projects": {
+    "demo": {
+      "architect": {
+        "build": {
+          "options": {
+            "index": "src/index.html",
+            "styles": ${JSON.stringify(stylesheets)}
+          }
+        }
+      }
+    }
+  }
+}`;
+        files['package.json'] = JSON.stringify({
+            dependencies,
+        }, undefined, 2);
+        files['tsconfig.json'] = `{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "es2020",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "typeRoots": ["node_modules/@types"],
+    "lib": [
+      "es2020",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true,
+    "enableIvy": true
+  }
+}`;
+        return files;
+    }
+    getModuleName(contents) {
+        return contents.split('export class ')[1].split(' {')[0];
+    }
+    getFilenameNoExtension(fileName) {
+        const extension = fileName.split('.').pop();
+        return fileName.replace(`.${extension}`, '');
+    }
+    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?');
+        }
+        return components[0];
+    }
+    getComponentSelector(componentClassName, sourceCode) {
+        const found = sourceCode.find((file) => {
+            return file.rawContents.indexOf(componentClassName) > -1;
+        });
+        const trimmed = found.rawContents.replace(/\s/g, '');
+        return trimmed.split(`selector:'`)[1].split(`'`)[0];
+    }
+}
+SkyDocsCodeExamplesEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExamplesEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsCodeExamplesEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExamplesEditorService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExamplesEditorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class SkyDocsSourceCodeProvider {
+}
+SkyDocsSourceCodeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsSourceCodeProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsSourceCodeProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsSourceCodeProvider, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsSourceCodeProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }] });
+
+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;
+        });
+    }
+}
+SkyDocsSourceCodeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsSourceCodeService, deps: [{ token: SkyDocsSourceCodeProvider }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsSourceCodeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsSourceCodeService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsSourceCodeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ 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>
+ * ```
+ */
+class SkyDocsCodeExamplesComponent {
+    constructor(editorService, sourceCodeService) {
+        this.editorService = editorService;
+        this.sourceCodeService = sourceCodeService;
+        this.stylesheets = [];
+        this.codeExamples = [];
+    }
+    /**
+     * 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 || {};
+    }
+    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) {
+        this.editorService.launchEditor(codeExample);
+    }
+    /**
+     * 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;
+        }
+    }
+}
+SkyDocsCodeExamplesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExamplesComponent, deps: [{ token: SkyDocsCodeExamplesEditorService }, { token: SkyDocsSourceCodeService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsCodeExamplesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsCodeExamplesComponent, 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.stopPropagation()\"\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-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"], components: [{ type: i3.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { type: i3.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { type: i3.λ12, selector: "sky-repeater-item-title" }, { type: i3.λ8, selector: "sky-repeater-item-content" }, { type: i4.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { type: i4.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }, { type: i3$1.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { type: i1$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i8.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExamplesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-code-examples', changeDetection: ChangeDetectionStrategy.OnPush, 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.stopPropagation()\"\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-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: function () { return [{ type: SkyDocsCodeExamplesEditorService }, { type: SkyDocsSourceCodeService }]; }, propDecorators: { packageDependencies: [{
+                type: Input
+            }], stylesheets: [{
+                type: Input
+            }], codeExampleComponents: [{
+                type: ContentChildren,
+                args: [SkyDocsCodeExampleComponent]
+            }] } });
+
+class SkyDocsCodeExamplesModule {
+}
+SkyDocsCodeExamplesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExamplesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsCodeExamplesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExamplesModule, declarations: [SkyDocsCodeExampleComponent, SkyDocsCodeExamplesComponent], imports: [CommonModule,
+        SkyCodeBlockModule,
+        SkyDocsToolsResourcesModule,
+        SkyIconModule,
+        SkyRepeaterModule,
+        SkyVerticalTabsetModule], exports: [SkyDocsCodeExampleComponent, SkyDocsCodeExamplesComponent] });
+SkyDocsCodeExamplesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExamplesModule, imports: [[
+            CommonModule,
+            SkyCodeBlockModule,
+            SkyDocsToolsResourcesModule,
+            SkyIconModule,
+            SkyRepeaterModule,
+            SkyVerticalTabsetModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExamplesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        SkyCodeBlockModule,
+                        SkyDocsToolsResourcesModule,
+                        SkyIconModule,
+                        SkyRepeaterModule,
+                        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 {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        /**
+         * Indicates whether to disable the checkbox.
+         */
+        this.disabled = false;
+        this.selectionChange = new Subject();
+        this.initialState = {};
+    }
+    /**
+     * 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;
+    }
+    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,
+        });
+    }
+}
+SkyDocsDemoControlPanelCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoControlPanelCheckboxComponent, selector: "sky-docs-demo-control-panel-checkbox", inputs: { checked: "checked", disabled: "disabled", label: "label", propertyName: "propertyName" }, ngImport: i0, template: "<sky-checkbox\n  [disabled]=\"disabled\"\n  [name]=\"propertyName\"\n  [(ngModel)]=\"checked\"\n  (change)=\"onModelChange()\"\n>\n  <sky-checkbox-label>{{ label }}</sky-checkbox-label>\n</sky-checkbox>\n", components: [{ type: i1$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i1$2.λ4, selector: "sky-checkbox-label" }], directives: [{ type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-demo-control-panel-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-checkbox\n  [disabled]=\"disabled\"\n  [name]=\"propertyName\"\n  [(ngModel)]=\"checked\"\n  (change)=\"onModelChange()\"\n>\n  <sky-checkbox-label>{{ label }}</sky-checkbox-label>\n</sky-checkbox>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { checked: [{
+                type: Input
+            }], disabled: [{
+                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 Subject();
+    }
+    ngOnInit() {
+        this.value = this.cloneValue(this.initialValue);
+    }
+    ngOnDestroy() {
+        this.selectionChange.complete();
+    }
+    onModelChange(value) {
+        this.value = value;
+        this.selectionChange.next({
+            [this.propertyName]: this.value,
+        });
+    }
+    resetValue() {
+        this.value = this.cloneValue(this.initialValue);
+        this.changeDetector.markForCheck();
+    }
+    cloneValue(value) {
+        if (typeof value === 'object') {
+            return JSON.parse(JSON.stringify(value));
+        }
+        return value;
+    }
+}
+SkyDocsDemoControlPanelRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoControlPanelRadioGroupComponent, 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  <strong *ngIf=\"heading\">{{ heading }}</strong>\n  <sky-radio-group\n    [disabled]=\"disabled\"\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"], components: [{ type: i1$2.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "name", "required", "value", "tabIndex"] }, { type: i1$2.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "icon", "radioType"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i1$2.λ12, selector: "sky-radio-label" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-demo-control-panel-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-demo-control-panel-radio-group\">\n  <strong *ngIf=\"heading\">{{ heading }}</strong>\n  <sky-radio-group\n    [disabled]=\"disabled\"\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: function () { return [{ 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);
+        });
+    }
+}
+SkyDocsDemoControlPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoControlPanelComponent, 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=\"\n        sky-docs-demo-control-panel-column\n        sky-docs-demo-control-panel-sections-column\n      \"\n    >\n      <ng-content select=\"sky-docs-demo-control-panel-section\"></ng-content>\n    </div>\n\n    <div\n      class=\"\n        sky-docs-demo-control-panel-column\n        sky-docs-demo-control-panel-button-column\n      \"\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"], pipes: { "skyLibResources": i8.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-demo-control-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-demo-control-panel\">\n  <div class=\"sky-docs-demo-control-panel-row sky-rounded-corners\">\n    <div\n      class=\"\n        sky-docs-demo-control-panel-column\n        sky-docs-demo-control-panel-sections-column\n      \"\n    >\n      <ng-content select=\"sky-docs-demo-control-panel-section\"></ng-content>\n    </div>\n\n    <div\n      class=\"\n        sky-docs-demo-control-panel-column\n        sky-docs-demo-control-panel-button-column\n      \"\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,
+                    }]
+            }] } });
+
+/**
+ * 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;
+    }
+    get toggleOptionsButtonIcon() {
+        return this.areOptionsVisible ? 'chevron-up' : 'chevron-down';
+    }
+    onToggleOptionsButtonClick() {
+        this.areOptionsVisible = !this.areOptionsVisible;
+    }
+}
+SkyDocsDemoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoComponent, selector: "sky-docs-demo", inputs: { alignContents: "alignContents", heading: "heading" }, queries: [{ propertyName: "controlPanels", predicate: SkyDocsDemoControlPanelComponent, 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>\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\"></ng-content>\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"], components: [{ type: i1$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i8.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-demo', changeDetection: ChangeDetectionStrategy.OnPush, 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>\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\"></ng-content>\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 }]
+            }] } });
+
+/**
+ * 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 {
+}
+SkyDocsDemoControlPanelSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoControlPanelSectionComponent, 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: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-demo-control-panel-section', changeDetection: ChangeDetectionStrategy.OnPush, 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 {
+}
+SkyDocsDemoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsDemoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoModule, declarations: [SkyDocsDemoComponent,
+        SkyDocsDemoControlPanelCheckboxComponent,
+        SkyDocsDemoControlPanelComponent,
+        SkyDocsDemoControlPanelRadioGroupComponent,
+        SkyDocsDemoControlPanelSectionComponent], imports: [CommonModule,
+        FormsModule,
+        SkyCheckboxModule,
+        SkyDocsToolsResourcesModule,
+        SkyIconModule,
+        SkyRadioModule,
+        SkyThemeModule], exports: [SkyDocsDemoComponent,
+        SkyDocsDemoControlPanelCheckboxComponent,
+        SkyDocsDemoControlPanelComponent,
+        SkyDocsDemoControlPanelRadioGroupComponent,
+        SkyDocsDemoControlPanelSectionComponent] });
+SkyDocsDemoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoModule, imports: [[
+            CommonModule,
+            FormsModule,
+            SkyCheckboxModule,
+            SkyDocsToolsResourcesModule,
+            SkyIconModule,
+            SkyRadioModule,
+            SkyThemeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        SkyCheckboxModule,
+                        SkyDocsToolsResourcesModule,
+                        SkyIconModule,
+                        SkyRadioModule,
+                        SkyThemeModule,
+                    ],
+                    declarations: [
+                        SkyDocsDemoComponent,
+                        SkyDocsDemoControlPanelCheckboxComponent,
+                        SkyDocsDemoControlPanelComponent,
+                        SkyDocsDemoControlPanelRadioGroupComponent,
+                        SkyDocsDemoControlPanelSectionComponent,
+                    ],
+                    exports: [
+                        SkyDocsDemoComponent,
+                        SkyDocsDemoControlPanelCheckboxComponent,
+                        SkyDocsDemoControlPanelComponent,
+                        SkyDocsDemoControlPanelRadioGroupComponent,
+                        SkyDocsDemoControlPanelSectionComponent,
+                    ],
+                }]
+        }] });
+
+class SkyDocsHeadingAnchorComponent {
+    constructor() {
+        this.headingLevel = '2';
+    }
+}
+SkyDocsHeadingAnchorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsHeadingAnchorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsHeadingAnchorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsHeadingAnchorComponent, 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"], components: [{ type: i1$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsHeadingAnchorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-heading-anchor', changeDetection: ChangeDetectionStrategy.OnPush, 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 {
+}
+SkyDocsHeadingAnchorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsHeadingAnchorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsHeadingAnchorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsHeadingAnchorModule, declarations: [SkyDocsHeadingAnchorComponent], imports: [CommonModule, RouterModule, SkyIconModule], exports: [SkyDocsHeadingAnchorComponent] });
+SkyDocsHeadingAnchorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsHeadingAnchorModule, imports: [[CommonModule, RouterModule, SkyIconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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);
+    }
+}
+SkyDocsMarkdownPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsMarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SkyDocsMarkdownPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsMarkdownPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsMarkdown',
+                }]
+        }] });
+
+class SkyDocsMarkdownModule {
+}
+SkyDocsMarkdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsMarkdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsMarkdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsMarkdownModule, declarations: [SkyDocsMarkdownPipe], exports: [SkyDocsMarkdownPipe] });
+SkyDocsMarkdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsMarkdownModule, providers: [SkyDocsMarkdownPipe] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsMarkdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyDocsMarkdownPipe],
+                    providers: [SkyDocsMarkdownPipe],
+                    exports: [SkyDocsMarkdownPipe],
+                }]
+        }] });
+
+class SkyDocsToolsOptions {
+}
+
+class SkyDocsModuleInfoComponent {
+    constructor(options) {
+        this.options = options;
+    }
+    set gitRepoUrl(value) {
+        this._gitRepoUrl = value;
+    }
+    get gitRepoUrl() {
+        return this._gitRepoUrl || (this.options && this.options.gitRepoUrl);
+    }
+    set packageName(value) {
+        this._packageName = value;
+    }
+    get packageName() {
+        return this._packageName || (this.options && this.options.packageName);
+    }
+    set packageUrl(value) {
+        this._packageUrl = value;
+    }
+    get packageUrl() {
+        if (this._packageUrl) {
+            return this._packageUrl;
+        }
+        if (this.packageName) {
+            return `https://npmjs.org/package/${this.packageName}`;
+        }
+        return '';
+    }
+    get externalLinks() {
+        const externalLinks = [];
+        if (this.packageName) {
+            externalLinks.push({
+                url: this.packageUrl,
+                label: 'View in NPM',
+            });
+        }
+        if (this.gitRepoUrl) {
+            externalLinks.push({
+                url: this.gitRepoUrl,
+                label: 'View in GitHub',
+            });
+        }
+        return externalLinks;
+    }
+    get installationCommand() {
+        if (!this.packageName) {
+            return '';
+        }
+        return `npm install --save-exact ${this.packageName}`;
+    }
+}
+SkyDocsModuleInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsModuleInfoComponent, deps: [{ token: SkyDocsToolsOptions, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsModuleInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsModuleInfoComponent, 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-definition-list defaultValue=\"\" labelWidth=\"120px\">\n    <sky-definition-list-content *ngIf=\"moduleName\">\n      <sky-definition-list-label> Defined in </sky-definition-list-label>\n      <sky-definition-list-value>\n        <sky-code>{{ moduleName }}</sky-code>\n      </sky-definition-list-value>\n    </sky-definition-list-content>\n    <sky-definition-list-content *ngIf=\"packageName\">\n      <sky-definition-list-label> NPM package </sky-definition-list-label>\n      <sky-definition-list-value>\n        <span class=\"sky-docs-module-info-package-name\"\n          ><sky-code>{{ packageName }}</sky-code></span\n        >\n        <ng-container *ngFor=\"let externalLink of externalLinks; let i = index\">\n          <a [attr.href]=\"externalLink.url\">{{ externalLink.label }}</a>\n          <ng-container *ngIf=\"i < externalLinks.length - 1\"\n            >&nbsp;|\n          </ng-container>\n        </ng-container>\n      </sky-definition-list-value>\n    </sky-definition-list-content>\n\n    <sky-definition-list-content *ngIf=\"installationCommand\">\n      <sky-definition-list-label>\n        Installation\n        <sky-help-inline\n          [skyPopover]=\"installationCommandPopover\"\n          skyPopoverPlacement=\"right\"\n        >\n        </sky-help-inline>\n      </sky-definition-list-label>\n      <sky-definition-list-value>\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-definition-list-value>\n    </sky-definition-list-content>\n  </sky-definition-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"], components: [{ type: i2$1.λ13, selector: "sky-definition-list", inputs: ["labelWidth", "defaultValue"] }, { type: i2$1.λ14, selector: "sky-definition-list-content" }, { type: i2$1.λ16, selector: "sky-definition-list-label" }, { type: i2$1.λ17, selector: "sky-definition-list-value" }, { type: i3$1.λ1, selector: "sky-code" }, { type: i1$1.λ3, selector: "sky-help-inline", outputs: ["actionClick"] }, { type: i5.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { type: i6.λ1, selector: "sky-copy-to-clipboard", inputs: ["ariaLabel", "ariaLabelledBy", "copyTarget", "buttonText", "buttonClickedText", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsModuleInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-module-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-module-info\">\n  <sky-definition-list defaultValue=\"\" labelWidth=\"120px\">\n    <sky-definition-list-content *ngIf=\"moduleName\">\n      <sky-definition-list-label> Defined in </sky-definition-list-label>\n      <sky-definition-list-value>\n        <sky-code>{{ moduleName }}</sky-code>\n      </sky-definition-list-value>\n    </sky-definition-list-content>\n    <sky-definition-list-content *ngIf=\"packageName\">\n      <sky-definition-list-label> NPM package </sky-definition-list-label>\n      <sky-definition-list-value>\n        <span class=\"sky-docs-module-info-package-name\"\n          ><sky-code>{{ packageName }}</sky-code></span\n        >\n        <ng-container *ngFor=\"let externalLink of externalLinks; let i = index\">\n          <a [attr.href]=\"externalLink.url\">{{ externalLink.label }}</a>\n          <ng-container *ngIf=\"i < externalLinks.length - 1\"\n            >&nbsp;|\n          </ng-container>\n        </ng-container>\n      </sky-definition-list-value>\n    </sky-definition-list-content>\n\n    <sky-definition-list-content *ngIf=\"installationCommand\">\n      <sky-definition-list-label>\n        Installation\n        <sky-help-inline\n          [skyPopover]=\"installationCommandPopover\"\n          skyPopoverPlacement=\"right\"\n        >\n        </sky-help-inline>\n      </sky-definition-list-label>\n      <sky-definition-list-value>\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-definition-list-value>\n    </sky-definition-list-content>\n  </sky-definition-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: function () { return [{ type: SkyDocsToolsOptions, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { gitRepoUrl: [{
+                type: Input
+            }], moduleName: [{
+                type: Input
+            }], packageName: [{
+                type: Input
+            }], packageUrl: [{
+                type: Input
+            }] } });
+
+class SkyDocsModuleInfoModule {
+}
+SkyDocsModuleInfoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsModuleInfoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsModuleInfoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsModuleInfoModule, declarations: [SkyDocsModuleInfoComponent], imports: [CommonModule,
+        SkyCodeModule,
+        SkyClipboardModule,
+        SkyDefinitionListModule,
+        SkyHelpInlineModule,
+        SkyPopoverModule], exports: [SkyDocsModuleInfoComponent] });
+SkyDocsModuleInfoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsModuleInfoModule, imports: [[
+            CommonModule,
+            SkyCodeModule,
+            SkyClipboardModule,
+            SkyDefinitionListModule,
+            SkyHelpInlineModule,
+            SkyPopoverModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsModuleInfoModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        SkyCodeModule,
+                        SkyClipboardModule,
+                        SkyDefinitionListModule,
+                        SkyHelpInlineModule,
+                        SkyPopoverModule,
+                    ],
+                    declarations: [SkyDocsModuleInfoComponent],
+                    exports: [SkyDocsModuleInfoComponent],
+                }]
+        }] });
+
+class SkyDocsSafeHtmlComponent {
+    constructor(domSanitizer) {
+        this.domSanitizer = domSanitizer;
+    }
+    getTrustedHtml(content) {
+        return this.domSanitizer.bypassSecurityTrustHtml(content);
+    }
+}
+SkyDocsSafeHtmlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsSafeHtmlComponent, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsSafeHtmlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsSafeHtmlComponent, 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: "13.3.11", ngImport: i0, type: SkyDocsSafeHtmlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-safe-html', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-safe-html\" [innerHtml]=\"getTrustedHtml(innerHtml)\"></div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$4.DomSanitizer }]; }, propDecorators: { innerHtml: [{
+                type: Input
+            }] } });
+
+class SkyDocsSafeHtmlModule {
+}
+SkyDocsSafeHtmlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsSafeHtmlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsSafeHtmlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsSafeHtmlModule, declarations: [SkyDocsSafeHtmlComponent], imports: [CommonModule], exports: [SkyDocsSafeHtmlComponent] });
+SkyDocsSafeHtmlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsSafeHtmlModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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 = '';
+        if (property.decorator?.name) {
+            signature += `@${property.decorator.name}()<br>`;
+        }
+        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.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.deprecationWarning !== undefined) {
+            formatted += `<strike>${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.callSignature) {
+            return this.getFormattedCallSignature(type.callSignature, config);
+        }
+        if (type.unionTypes) {
+            return this.getFormattedUnion(type, config);
+        }
+        if (type.name) {
+            formatted = type.name;
+        }
+        if (type.typeArguments) {
+            formatted += this.getFormattedTypeArguments(type, config);
+        }
+        if (type.type === 'array') {
+            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 = {
+        escapeSpecialCharacters: true,
+    }) {
+        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;
+    }
+}
+SkyDocsTypeDefinitionsFormatService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeDefinitionsFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsTypeDefinitionsFormatService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeDefinitionsFormatService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeDefinitionsFormatService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class SkyDocsTypeDefinitionsProvider {
+}
+SkyDocsTypeDefinitionsProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeDefinitionsProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsTypeDefinitionsProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeDefinitionsProvider });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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);
+    }
+}
+SkyDocsAnchorLinkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsAnchorLinkService, deps: [{ token: SkyDocsTypeDefinitionsProvider }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsAnchorLinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsAnchorLinkService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsAnchorLinkService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ 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);
+    }
+}
+SkyDocsTypeAnchorLinksPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeAnchorLinksPipe, deps: [{ token: SkyDocsAnchorLinkService }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyDocsTypeAnchorLinksPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeAnchorLinksPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsTypeAnchorLinks',
+                    pure: true,
+                }]
+        }], ctorParameters: function () { return [{ 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 {
+    constructor(formatService) {
+        this.formatService = formatService;
+    }
+    set config(value) {
+        this._config = value;
+        this.updateView();
+    }
+    get config() {
+        return this._config;
+    }
+    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);
+    }
+}
+SkyDocsCallSignatureDefinitionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCallSignatureDefinitionComponent, deps: [{ token: SkyDocsTypeDefinitionsFormatService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsCallSignatureDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsCallSignatureDefinitionComponent, 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"], components: [{ type: i3$1.λ1, selector: "sky-code" }, { type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "skyDocsTypeAnchorLinks": SkyDocsTypeAnchorLinksPipe, "skyDocsMarkdown": SkyDocsMarkdownPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCallSignatureDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-call-signature-definition', changeDetection: ChangeDetectionStrategy.OnPush, 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: function () { return [{ type: SkyDocsTypeDefinitionsFormatService }]; }, propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class SkyDocsPropertyDefinitionsComponent {
+    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 = [];
+    }
+    set config(value) {
+        this._config = value;
+        this.updateView();
+    }
+    get config() {
+        return this._config || {};
+    }
+    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),
+                isOptional: property.isOptional,
+            };
+            return vm;
+        });
+    }
+}
+SkyDocsPropertyDefinitionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsPropertyDefinitionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDocsTypeDefinitionsFormatService }, { token: i2$4.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsPropertyDefinitionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsPropertyDefinitionsComponent, 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    <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=\"\n          sky-docs-table-column-header sky-docs-table-column-header-description\n        \"\n      >\n        Description\n      </th>\n    </tr>\n    <tr *ngFor=\"let property of properties\" class=\"sky-docs-table-row\">\n      <td\n        class=\"\n          sky-docs-table-cell sky-docs-property-definitions-table-cell-name\n        \"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"nameTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: property }\"\n        ></ng-template>\n      </td>\n      <td\n        class=\"\n          sky-docs-table-cell\n          sky-docs-property-definitions-table-cell-description\n        \"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"descriptionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: property }\"\n        ></ng-template>\n      </td>\n    </tr>\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.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label sky-text-danger\"\n  >\n    Required.\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.isOptional && showOptionalStatus\"\n    class=\"\n      sky-docs-property-definition-label\n      sky-docs-property-definition-label-optional\n    \"\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%;overflow:auto}.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"], components: [{ type: i3$1.λ1, selector: "sky-code" }, { type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { type: SkyDocsCallSignatureDefinitionComponent, selector: "sky-docs-call-signature-definition", inputs: ["config"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyDocsTypeAnchorLinks": SkyDocsTypeAnchorLinksPipe, "skyDocsMarkdown": SkyDocsMarkdownPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsPropertyDefinitionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-property-definitions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"properties\" class=\"sky-docs-property-definitions\">\n  <table *ngIf=\"!isMobile; else mobileTemplate\" class=\"sky-docs-table\">\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=\"\n          sky-docs-table-column-header sky-docs-table-column-header-description\n        \"\n      >\n        Description\n      </th>\n    </tr>\n    <tr *ngFor=\"let property of properties\" class=\"sky-docs-table-row\">\n      <td\n        class=\"\n          sky-docs-table-cell sky-docs-property-definitions-table-cell-name\n        \"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"nameTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: property }\"\n        ></ng-template>\n      </td>\n      <td\n        class=\"\n          sky-docs-table-cell\n          sky-docs-property-definitions-table-cell-description\n        \"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"descriptionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: property }\"\n        ></ng-template>\n      </td>\n    </tr>\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.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label sky-text-danger\"\n  >\n    Required.\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.isOptional && showOptionalStatus\"\n    class=\"\n      sky-docs-property-definition-label\n      sky-docs-property-definition-label-optional\n    \"\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%;overflow:auto}.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: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDocsTypeDefinitionsFormatService }, { type: i2$4.SkyMediaQueryService }]; }, propDecorators: { config: [{
+                type: Input
+            }], propertyType: [{
+                type: Input
+            }], showOptionalStatus: [{
+                type: Input
+            }] } });
+
+class SkyDocsDirectiveDefinitionComponent {
+}
+SkyDocsDirectiveDefinitionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDirectiveDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDirectiveDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDirectiveDefinitionComponent, 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"], components: [{ type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }, { type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { type: i3$1.λ1, selector: "sky-code" }, { type: i3$1.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { type: SkyDocsPropertyDefinitionsComponent, selector: "sky-docs-property-definitions", inputs: ["config", "propertyType", "showOptionalStatus"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyDocsMarkdown": SkyDocsMarkdownPipe, "skyDocsTypeAnchorLinks": SkyDocsTypeAnchorLinksPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDirectiveDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-directive-definition', changeDetection: ChangeDetectionStrategy.OnPush, 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 {
+}
+SkyDocsEnumerationDefinitionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsEnumerationDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsEnumerationDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsEnumerationDefinitionComponent, 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", components: [{ type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }, { type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { type: SkyDocsPropertyDefinitionsComponent, selector: "sky-docs-property-definitions", inputs: ["config", "propertyType", "showOptionalStatus"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyDocsMarkdown": SkyDocsMarkdownPipe, "skyDocsTypeAnchorLinks": SkyDocsTypeAnchorLinksPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsEnumerationDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-enumeration-definition', changeDetection: ChangeDetectionStrategy.OnPush, 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 {
+    constructor(formatService) {
+        this.formatService = formatService;
+    }
+    set config(value) {
+        this._config = value;
+        this.updateView();
+    }
+    get config() {
+        return this._config;
+    }
+    updateView() {
+        this.sourceCode = this.config
+            ? this.formatService.getInterfaceSourceCode(this.config)
+            : undefined;
+    }
+}
+SkyDocsInterfaceDefinitionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsInterfaceDefinitionComponent, deps: [{ token: SkyDocsTypeDefinitionsFormatService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsInterfaceDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsInterfaceDefinitionComponent, 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\"\n    [config]=\"{ properties: config.properties }\"\n    [showOptionalStatus]=\"false\"\n  ></sky-docs-property-definitions>\n</div>\n", components: [{ type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }, { type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { type: i3$1.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { type: SkyDocsPropertyDefinitionsComponent, selector: "sky-docs-property-definitions", inputs: ["config", "propertyType", "showOptionalStatus"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyDocsMarkdown": SkyDocsMarkdownPipe, "skyDocsTypeAnchorLinks": SkyDocsTypeAnchorLinksPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsInterfaceDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-interface-definition', changeDetection: ChangeDetectionStrategy.OnPush, 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\"\n    [config]=\"{ properties: config.properties }\"\n    [showOptionalStatus]=\"false\"\n  ></sky-docs-property-definitions>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SkyDocsTypeDefinitionsFormatService }]; }, propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class SkyDocsMethodDefinitionsComponent {
+    constructor(changeDetector, formatService, mediaQueryService) {
+        this.changeDetector = changeDetector;
+        this.formatService = formatService;
+        this.mediaQueryService = mediaQueryService;
+        this.deprecationWarningPrefix = `<span class="sky-text-warning"></span>**Deprecated.** `;
+        this.isMobile = true;
+    }
+    set config(value) {
+        this._config = value;
+        this.updateView();
+    }
+    get config() {
+        return this._config || {};
+    }
+    ngOnInit() {
+        this.mediaQueryService.subscribe((breakpoints) => {
+            this.isMobile = breakpoints <= SkyMediaBreakpoints.sm;
+            this.changeDetector.markForCheck();
+        });
+    }
+    updateView() {
+        this.methods = this.config?.methods?.map((method) => {
+            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),
+            };
+            return vm;
+        });
+    }
+}
+SkyDocsMethodDefinitionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsMethodDefinitionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDocsTypeDefinitionsFormatService }, { token: i2$4.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsMethodDefinitionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsMethodDefinitionsComponent, selector: "sky-docs-method-definitions", inputs: { config: "config" }, ngImport: i0, template: "<div *ngIf=\"methods\" class=\"sky-docs-method-definitions\">\n  <table *ngIf=\"!isMobile; else mobileTemplate\" class=\"sky-docs-table\">\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=\"\n          sky-docs-table-column-header sky-docs-table-column-header-description\n        \"\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=\"\n          sky-docs-table-cell sky-docs-method-definitions-table-cell-description\n        \"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"descriptionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: method }\"\n        ></ng-template>\n      </td>\n    </tr>\n  </table>\n\n  <ng-template #mobileTemplate>\n    <dl class=\"sky-docs-method-definition-list\">\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  <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"], components: [{ type: i3$1.λ1, selector: "sky-code" }, { type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { type: i3$1.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { type: SkyDocsCallSignatureDefinitionComponent, selector: "sky-docs-call-signature-definition", inputs: ["config"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyDocsTypeAnchorLinks": SkyDocsTypeAnchorLinksPipe, "skyDocsMarkdown": SkyDocsMarkdownPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsMethodDefinitionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-method-definitions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"methods\" class=\"sky-docs-method-definitions\">\n  <table *ngIf=\"!isMobile; else mobileTemplate\" class=\"sky-docs-table\">\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=\"\n          sky-docs-table-column-header sky-docs-table-column-header-description\n        \"\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=\"\n          sky-docs-table-cell sky-docs-method-definitions-table-cell-description\n        \"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"descriptionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: method }\"\n        ></ng-template>\n      </td>\n    </tr>\n  </table>\n\n  <ng-template #mobileTemplate>\n    <dl class=\"sky-docs-method-definition-list\">\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  <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: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDocsTypeDefinitionsFormatService }, { type: i2$4.SkyMediaQueryService }]; }, propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class SkyDocsPipeDefinitionComponent {
+}
+SkyDocsPipeDefinitionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsPipeDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsPipeDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsPipeDefinitionComponent, 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    [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"], components: [{ type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }, { type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { type: i3$1.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { type: SkyDocsMethodDefinitionsComponent, selector: "sky-docs-method-definitions", inputs: ["config"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyDocsMarkdown": SkyDocsMarkdownPipe, "skyDocsTypeAnchorLinks": SkyDocsTypeAnchorLinksPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsPipeDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-pipe-definition', changeDetection: ChangeDetectionStrategy.OnPush, 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    [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 {
+}
+SkyDocsClassDefinitionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsClassDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsClassDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsClassDefinitionComponent, 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"], components: [{ type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }, { type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { type: SkyDocsPropertyDefinitionsComponent, selector: "sky-docs-property-definitions", inputs: ["config", "propertyType", "showOptionalStatus"] }, { type: SkyDocsMethodDefinitionsComponent, selector: "sky-docs-method-definitions", inputs: ["config"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyDocsMarkdown": SkyDocsMarkdownPipe, "skyDocsTypeAnchorLinks": SkyDocsTypeAnchorLinksPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsClassDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-class-definition', changeDetection: ChangeDetectionStrategy.OnPush, 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 {
+    constructor(formatService) {
+        this.formatService = formatService;
+    }
+    set config(value) {
+        this._config = value;
+        this.updateView();
+    }
+    get config() {
+        return this._config;
+    }
+    updateView() {
+        this.sourceCode = this.config
+            ? this.formatService.getTypeAliasSourceCode(this.config)
+            : undefined;
+    }
+}
+SkyDocsTypeAliasDefinitionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeAliasDefinitionComponent, deps: [{ token: SkyDocsTypeDefinitionsFormatService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsTypeAliasDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsTypeAliasDefinitionComponent, 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  <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"], components: [{ type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }, { type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { type: i3$1.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { type: SkyDocsCallSignatureDefinitionComponent, selector: "sky-docs-call-signature-definition", inputs: ["config"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyDocsMarkdown": SkyDocsMarkdownPipe, "skyDocsTypeAnchorLinks": SkyDocsTypeAnchorLinksPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeAliasDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-type-alias-definition', changeDetection: ChangeDetectionStrategy.OnPush, 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  <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: function () { return [{ type: SkyDocsTypeDefinitionsFormatService }]; }, propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class SkyDocsTypeDefinitionsModule {
+}
+SkyDocsTypeDefinitionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeDefinitionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsTypeDefinitionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeDefinitionsModule, declarations: [SkyDocsCallSignatureDefinitionComponent,
+        SkyDocsClassDefinitionComponent,
+        SkyDocsDirectiveDefinitionComponent,
+        SkyDocsEnumerationDefinitionComponent,
+        SkyDocsInterfaceDefinitionComponent,
+        SkyDocsMethodDefinitionsComponent,
+        SkyDocsPipeDefinitionComponent,
+        SkyDocsPropertyDefinitionsComponent,
+        SkyDocsTypeAliasDefinitionComponent,
+        SkyDocsTypeAnchorLinksPipe], imports: [CommonModule,
+        RouterModule,
+        SkyCodeBlockModule,
+        SkyCodeModule,
+        SkyDefinitionListModule,
+        SkyDocsHeadingAnchorModule,
+        SkyDocsMarkdownModule,
+        SkyDocsSafeHtmlModule,
+        SkyIconModule], exports: [SkyDocsCallSignatureDefinitionComponent,
+        SkyDocsClassDefinitionComponent,
+        SkyDocsDirectiveDefinitionComponent,
+        SkyDocsEnumerationDefinitionComponent,
+        SkyDocsInterfaceDefinitionComponent,
+        SkyDocsMethodDefinitionsComponent,
+        SkyDocsPipeDefinitionComponent,
+        SkyDocsPropertyDefinitionsComponent,
+        SkyDocsTypeAliasDefinitionComponent,
+        SkyDocsTypeAnchorLinksPipe] });
+SkyDocsTypeDefinitionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeDefinitionsModule, imports: [[
+            CommonModule,
+            RouterModule,
+            SkyCodeBlockModule,
+            SkyCodeModule,
+            SkyDefinitionListModule,
+            SkyDocsHeadingAnchorModule,
+            SkyDocsMarkdownModule,
+            SkyDocsSafeHtmlModule,
+            SkyIconModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeDefinitionsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        SkyCodeBlockModule,
+                        SkyCodeModule,
+                        SkyDefinitionListModule,
+                        SkyDocsHeadingAnchorModule,
+                        SkyDocsMarkdownModule,
+                        SkyDocsSafeHtmlModule,
+                        SkyIconModule,
+                    ],
+                    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;
+    }
+}
+SkyDocsDemoPageSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoPageSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoPageSectionComponent, 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"], components: [{ type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-demo-page-section', changeDetection: ChangeDetectionStrategy.OnPush, 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 {
+}
+SkyDocsDemoPageSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoPageSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoPageSummaryComponent, 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: "13.3.11", ngImport: i0, type: SkyDocsDemoPageSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-demo-page-summary', changeDetection: ChangeDetectionStrategy.OnPush, 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 {
+}
+SkyDocsDesignGuidelinesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDesignGuidelinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDesignGuidelinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDesignGuidelinesComponent, 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: "13.3.11", ngImport: i0, type: SkyDocsDesignGuidelinesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-design-guidelines', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-design-guidelines\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDocsDemoPageDomAdapterService {
+    constructor(windowRef) {
+        this.windowRef = windowRef;
+        this._anchorLinkClick = new Subject();
+        this.eventListener = (e) => {
+            e.preventDefault();
+            this._anchorLinkClick.next({
+                href: e.target.href,
+            });
+        };
+    }
+    get anchorLinks() {
+        return document.querySelectorAll('a.sky-docs-anchor-link');
+    }
+    get currentUrl() {
+        return this.windowRef.nativeWindow.location.href.split('#')[0];
+    }
+    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);
+        }
+    }
+}
+SkyDocsDemoPageDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageDomAdapterService, deps: [{ token: i2$4.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsDemoPageDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageDomAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageDomAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i2$4.SkyAppWindowRef }]; } });
+
+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());
+    }
+}
+SkyDocsSupportalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsSupportalService, deps: [{ token: i1$5.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsSupportalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsSupportalService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsSupportalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$5.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);
+    }
+}
+SkyDocsDemoPageTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageTitleService, deps: [{ token: i1$4.Title }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsDemoPageTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageTitleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageTitleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$4.Title }]; } });
+
+/**
+ * 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,
+        };
+        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;
+        }
+        return definition;
+    }
+    toDirectiveDefinition(entry) {
+        const definition = {
+            anchorId: this.getAnchorId(entry),
+            name: entry.name,
+            selector: this.getSelector(entry),
+        };
+        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) => p.decorator?.name === 'Input');
+        if (inputProperties.length) {
+            definition.inputProperties = inputProperties;
+        }
+        return definition;
+    }
+    toEnumerationDefinition(entry) {
+        const members = this.getEnumerationMembers(entry);
+        const definition = {
+            anchorId: this.getAnchorId(entry),
+            members,
+            name: entry.name,
+        };
+        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,
+            properties,
+        };
+        const tags = this.getCommentTags(entry.comment);
+        this.applyCommentTagValues(definition, tags);
+        const typeParameters = this.getTypeParameterDefinitions(entry.typeParameter);
+        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,
+            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.typeParameter);
+        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) => child.kindString === 'Property' || child.kindString === 'Accessor')
+            .map((child) => {
+            let definition = {
+                isOptional: true,
+                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.kindString === 'Accessor' &&
+                !child.comment?.shortText &&
+                (child.setSignature?.length > 0 || child.getSignature.length > 0)) {
+                const mainTags = this.getCommentTags(child.comment);
+                this.applyCommentTagValues(definition, mainTags);
+                if (child.getSignature?.length > 0) {
+                    const getTags = this.getCommentTags(child.getSignature[0].comment);
+                    definition.isOptional = !getTags.extras.required;
+                    this.applyCommentTagValues(definition, getTags);
+                    defaultValue = this.getDefaultValue(child, getTags);
+                }
+                if (child.setSignature?.length > 0) {
+                    const setTags = this.getCommentTags(child.setSignature[0].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.kindString === 'Property' &&
+                    !child.comment?.shortText &&
+                    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.kindString === 'Constructor');
+                if (constructor) {
+                    const signature = constructor.signatures.find((signature) => signature.kindString === 'Constructor signature');
+                    /* 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.kindString === 'Method' && /^ng/.test(child.name) === false)
+            .map((child) => {
+            const definition = {
+                name: this.getPropertyName(child),
+                type: this.getTypeDefinition(child),
+                isStatic: !!child.flags?.isStatic,
+            };
+            // 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].typeParameter);
+            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.kindString === 'Method' && child.signatures.length > 0) {
+                tags = this.getCommentTags(child.signatures[0].comment);
+            }
+            else {
+                tags = this.getCommentTags(child.comment);
+            }
+            const definition = {
+                isOptional: tags.extras.required ? false : !!child.flags?.isOptional,
+                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,
+                name: indexSignature.name,
+                type: {
+                    indexSignature: this.getIndexSignatureDefinition(indexSignature),
+                },
+            };
+            const tags = this.getCommentTags(indexSignature.comment);
+            this.applyCommentTagValues(definition, tags);
+            sorted.push(definition);
+        }
+        return sorted;
+    }
+    getEnumerationMembers(entry) {
+        if (!entry.children) {
+            return [];
+        }
+        return entry.children.map((child) => {
+            const definition = {
+                name: child.name,
+            };
+            const tags = this.getCommentTags(child.comment);
+            this.applyCommentTagValues(definition, tags);
+            return definition;
+        });
+    }
+    getTypeDefinition(child) {
+        let definition;
+        const kindString = child.kindString;
+        switch (kindString) {
+            case 'Accessor':
+                if (child.setSignature) {
+                    return this.getTypeDefinition(child.setSignature[0].parameters[0]);
+                }
+                return this.getTypeDefinition(child.getSignature[0]);
+            case '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') {
+                    const 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);
+                }
+                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.tags) {
+                comment.tags.forEach((tag) => {
+                    switch (tag.tag) {
+                        case 'deprecated':
+                            deprecationWarning = tag.text.trim();
+                            break;
+                        case 'default':
+                        case 'defaultValue':
+                            defaultValue = tag.text.trim();
+                            break;
+                        case 'example':
+                            codeExample = tag.text.trim().split('```')[1].trim();
+                            const language = codeExample.split('\n')[0];
+                            if (language === 'markup' || language === 'typescript') {
+                                codeExample = codeExample.slice(language.length).trim();
+                                codeExampleLanguage = language;
+                            }
+                            break;
+                        case 'param':
+                            parameters = parameters || [];
+                            parameters.push({
+                                name: tag.param,
+                                description: tag.text.trim(),
+                            });
+                            break;
+                        default:
+                            extras[tag.tag] = tag.text;
+                            break;
+                    }
+                });
+            }
+            description = (comment.shortText || comment.text || '').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;
+        }
+    }
+    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] ||
+            '');
+    }
+}
+SkyDocsTypeDocAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeDocAdapterService, deps: [{ token: SkyDocsTypeDefinitionsProvider, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsTypeDocAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeDocAdapterService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeDocAdapterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ 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: [],
+        };
+        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 kindString = item.kindString;
+                switch (decorator) {
+                    case 'Component':
+                        types.components.push(this.adapter.toDirectiveDefinition(item));
+                        break;
+                    case 'Directive':
+                        types.directives.push(this.adapter.toDirectiveDefinition(item));
+                        break;
+                    case 'Injectable':
+                        types.services.push(this.adapter.toClassDefinition(item));
+                        break;
+                    case 'NgModule':
+                        // Don't document modules.
+                        break;
+                    case 'Pipe':
+                        types.pipes.push(this.adapter.toPipeDefinition(item));
+                        break;
+                    default:
+                        /*tslint:disable-next-line:switch-default*/
+                        switch (kindString) {
+                            case 'Class':
+                                types.classes.push(this.adapter.toClassDefinition(item));
+                                break;
+                            case 'Interface':
+                                types.interfaces.push(this.adapter.toInterfaceDefinition(item));
+                                break;
+                            case 'Enumeration':
+                                types.enumerations.push(this.adapter.toEnumerationDefinition(item));
+                                break;
+                            case 'Type alias':
+                                types.typeAliases.push(this.adapter.toTypeAliasDefinition(item));
+                                break;
+                        }
+                }
+            });
+        });
+        return types;
+    }
+}
+SkyDocsTypeDefinitionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeDefinitionsService, deps: [{ token: SkyDocsTypeDefinitionsProvider }, { token: SkyDocsTypeDocAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsTypeDefinitionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeDefinitionsService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsTypeDefinitionsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ type: SkyDocsTypeDefinitionsProvider }, { type: SkyDocsTypeDocAdapterService }]; } });
+
+/**
+ * @internal
+ */
+class SkyDocsDemoPageTypeDefinitionsComponent {
+    constructor(typeDefinitionService) {
+        this.typeDefinitionService = typeDefinitionService;
+    }
+    ngOnInit() {
+        if (this.moduleSourceCodePath) {
+            this.types = this.typeDefinitionService.getTypeDefinitions(this.moduleSourceCodePath, this.additionalSourceCodePaths);
+        }
+    }
+}
+SkyDocsDemoPageTypeDefinitionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageTypeDefinitionsComponent, deps: [{ token: SkyDocsTypeDefinitionsService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoPageTypeDefinitionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoPageTypeDefinitionsComponent, selector: "sky-docs-demo-page-type-definitions", inputs: { additionalSourceCodePaths: "additionalSourceCodePaths", moduleSourceCodePath: "moduleSourceCodePath" }, 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", components: [{ type: SkyDocsDemoPageSectionComponent, selector: "sky-docs-demo-page-section", inputs: ["heading"] }, { type: SkyDocsDirectiveDefinitionComponent, selector: "sky-docs-directive-definition", inputs: ["config"] }, { type: SkyDocsPipeDefinitionComponent, selector: "sky-docs-pipe-definition", inputs: ["config"] }, { type: SkyDocsClassDefinitionComponent, selector: "sky-docs-class-definition", inputs: ["config"] }, { type: SkyDocsInterfaceDefinitionComponent, selector: "sky-docs-interface-definition", inputs: ["config"] }, { type: SkyDocsEnumerationDefinitionComponent, selector: "sky-docs-enumeration-definition", inputs: ["config"] }, { type: SkyDocsTypeAliasDefinitionComponent, selector: "sky-docs-type-alias-definition", inputs: ["config"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageTypeDefinitionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-demo-page-type-definitions', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }], ctorParameters: function () { return [{ type: SkyDocsTypeDefinitionsService }]; }, propDecorators: { additionalSourceCodePaths: [{
+                type: Input
+            }], moduleSourceCodePath: [{
+                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 {
+    constructor(activatedRoute, changeDetector, router, skyAppConfig, domAdapter, supportalService, titleService) {
+        this.activatedRoute = activatedRoute;
+        this.changeDetector = changeDetector;
+        this.router = router;
+        this.skyAppConfig = skyAppConfig;
+        this.domAdapter = domAdapter;
+        this.supportalService = supportalService;
+        this.titleService = titleService;
+        /**
+         * @internal
+         */
+        this.enableCodeExamples = false;
+        /**
+         * @internal
+         */
+        this.enableTabLayout = false;
+    }
+    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;
+    }
+    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;
+        }
+    }
+}
+SkyDocsDemoPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i1$3.Router }, { token: i2$5.SkyAppConfig }, { token: SkyDocsDemoPageDomAdapterService }, { token: SkyDocsSupportalService }, { token: SkyDocsDemoPageTitleService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoPageComponent, selector: "sky-docs-demo-page", inputs: { additionalSourceCodePaths: "additionalSourceCodePaths", 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    <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\">\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      </sky-tabset>\n    </div>\n  </stache>\n</div>\n\n<ng-template #content>\n  <sky-docs-demo-page-section *ngIf=\"moduleName\" heading=\"Installation\">\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\n    [additionalSourceCodePaths]=\"additionalSourceCodePaths\"\n    [moduleSourceCodePath]=\"moduleSourceCodePath\"\n  >\n  </sky-docs-demo-page-type-definitions>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"enableCodeExamples\"\n    heading=\"Code examples\"\n  >\n    <ng-content select=\"sky-docs-code-examples\"></ng-content>\n  </sky-docs-demo-page-section>\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"], components: [{ type: i6$1.λ30, selector: "stache", inputs: ["pageTitle", "windowTitle", "navTitle", "layout", "sidebarRoutes", "breadcrumbsRoutes", "showBreadcrumbs", "showEditButton", "showFooter", "showTableOfContents", "showBackToTop", "showInNav", "inPageRoutes"] }, { type: i4.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { type: i4.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndex"], outputs: ["close"] }, { type: SkyDocsDemoPageSectionComponent, selector: "sky-docs-demo-page-section", inputs: ["heading"] }, { type: SkyDocsModuleInfoComponent, selector: "sky-docs-module-info", inputs: ["gitRepoUrl", "moduleName", "packageName", "packageUrl"] }, { type: SkyDocsDemoPageTypeDefinitionsComponent, selector: "sky-docs-demo-page-type-definitions", inputs: ["additionalSourceCodePaths", "moduleSourceCodePath"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-demo-page', providers: [SkyDocsDemoPageDomAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, 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    <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\">\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      </sky-tabset>\n    </div>\n  </stache>\n</div>\n\n<ng-template #content>\n  <sky-docs-demo-page-section *ngIf=\"moduleName\" heading=\"Installation\">\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\n    [additionalSourceCodePaths]=\"additionalSourceCodePaths\"\n    [moduleSourceCodePath]=\"moduleSourceCodePath\"\n  >\n  </sky-docs-demo-page-type-definitions>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"enableCodeExamples\"\n    heading=\"Code examples\"\n  >\n    <ng-content select=\"sky-docs-code-examples\"></ng-content>\n  </sky-docs-demo-page-section>\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: function () { return [{ type: i1$3.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i1$3.Router }, { type: i2$5.SkyAppConfig }, { type: SkyDocsDemoPageDomAdapterService }, { type: SkyDocsSupportalService }, { type: SkyDocsDemoPageTitleService }]; }, propDecorators: { additionalSourceCodePaths: [{
+                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 {
+}
+SkyDocsDemoPageModuleInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageModuleInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoPageModuleInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoPageModuleInfoComponent, selector: "sky-docs-demo-page-module-info", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageModuleInfoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-demo-page-module-info',
+                    template: '<ng-content></ng-content>',
+                }]
+        }] });
+
+class SkyDocsDemoPageModule {
+}
+SkyDocsDemoPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsDemoPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageModule, declarations: [SkyDocsDemoPageComponent,
+        SkyDocsDemoPageModuleInfoComponent,
+        SkyDocsDemoPageSectionComponent,
+        SkyDocsDemoPageSummaryComponent,
+        SkyDocsDemoPageTypeDefinitionsComponent], imports: [CommonModule,
+        RouterModule,
+        SkyCodeBlockModule,
+        SkyCodeModule,
+        SkyDocsDemoModule,
+        SkyDocsHeadingAnchorModule,
+        SkyDocsMarkdownModule,
+        SkyDocsModuleInfoModule,
+        SkyDocsTypeDefinitionsModule,
+        SkyTabsModule,
+        StachePageSummaryModule,
+        StacheWrapperModule], exports: [SkyDocsDemoPageComponent,
+        SkyDocsDemoPageModuleInfoComponent,
+        SkyDocsDemoPageSectionComponent,
+        SkyDocsDemoPageSummaryComponent,
+        SkyDocsDemoPageTypeDefinitionsComponent] });
+SkyDocsDemoPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageModule, imports: [[
+            CommonModule,
+            RouterModule,
+            SkyCodeBlockModule,
+            SkyCodeModule,
+            SkyDocsDemoModule,
+            SkyDocsHeadingAnchorModule,
+            SkyDocsMarkdownModule,
+            SkyDocsModuleInfoModule,
+            SkyDocsTypeDefinitionsModule,
+            SkyTabsModule,
+            StachePageSummaryModule,
+            StacheWrapperModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoPageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        SkyCodeBlockModule,
+                        SkyCodeModule,
+                        SkyDocsDemoModule,
+                        SkyDocsHeadingAnchorModule,
+                        SkyDocsMarkdownModule,
+                        SkyDocsModuleInfoModule,
+                        SkyDocsTypeDefinitionsModule,
+                        SkyTabsModule,
+                        StachePageSummaryModule,
+                        StacheWrapperModule,
+                    ],
+                    declarations: [
+                        SkyDocsDemoPageComponent,
+                        SkyDocsDemoPageModuleInfoComponent,
+                        SkyDocsDemoPageSectionComponent,
+                        SkyDocsDemoPageSummaryComponent,
+                        SkyDocsDemoPageTypeDefinitionsComponent,
+                    ],
+                    exports: [
+                        SkyDocsDemoPageComponent,
+                        SkyDocsDemoPageModuleInfoComponent,
+                        SkyDocsDemoPageSectionComponent,
+                        SkyDocsDemoPageSummaryComponent,
+                        SkyDocsDemoPageTypeDefinitionsComponent,
+                    ],
+                }]
+        }] });
+
+class SkyDocsThumbnailComponent {
+    constructor() {
+        this.showBorder = false;
+    }
+}
+SkyDocsThumbnailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsThumbnailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsThumbnailComponent, 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"], components: [{ type: i2$2.λ4, selector: "sky-image", inputs: ["caption", "captionType", "imageAlt", "imageSource", "showBorder", "showCaptionPrefix"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsThumbnailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-thumbnail', changeDetection: ChangeDetectionStrategy.OnPush, 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 {
+}
+SkyDocsThumbnailModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsThumbnailModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsThumbnailModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsThumbnailModule, declarations: [SkyDocsThumbnailComponent], imports: [CommonModule, SkyImageModule], exports: [SkyDocsThumbnailComponent] });
+SkyDocsThumbnailModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsThumbnailModule, imports: [[CommonModule, SkyImageModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsThumbnailModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SkyImageModule],
+                    exports: [SkyDocsThumbnailComponent],
+                    declarations: [SkyDocsThumbnailComponent],
+                }]
+        }] });
+
+class SkyDocsDesignGuidelineThumbnailComponent {
+    constructor() {
+        this.showBorder = false;
+    }
+}
+SkyDocsDesignGuidelineThumbnailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDesignGuidelineThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDesignGuidelineThumbnailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDesignGuidelineThumbnailComponent, 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"], components: [{ type: SkyDocsThumbnailComponent, selector: "sky-docs-thumbnail", inputs: ["caption", "captionType", "imageAlt", "imageSource", "showBorder", "videoSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDesignGuidelineThumbnailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-design-guideline-thumbnail', changeDetection: ChangeDetectionStrategy.OnPush, 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;
+    }
+}
+SkyDocsDesignGuidelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDesignGuidelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDesignGuidelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDesignGuidelineComponent, 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"], components: [{ type: i2$1.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { type: i2$1.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDesignGuidelineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-design-guideline', changeDetection: ChangeDetectionStrategy.OnPush, 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 {
+}
+SkyDocsDesignGuidelinesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDesignGuidelinesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsDesignGuidelinesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDesignGuidelinesModule, declarations: [SkyDocsDesignGuidelineComponent,
+        SkyDocsDesignGuidelineThumbnailComponent,
+        SkyDocsDesignGuidelinesComponent], imports: [CommonModule, SkyDocsThumbnailModule, SkyFluidGridModule], exports: [SkyDocsDesignGuidelineComponent,
+        SkyDocsDesignGuidelineThumbnailComponent,
+        SkyDocsDesignGuidelinesComponent] });
+SkyDocsDesignGuidelinesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDesignGuidelinesModule, imports: [[CommonModule, SkyDocsThumbnailModule, SkyFluidGridModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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 {
+}
+SkyDocsToolsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsToolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsToolsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsToolsModule, exports: [SkyAuthHttpClientModule,
+        SkyDocsAnatomyModule,
+        SkyDocsCodeExamplesModule,
+        SkyDocsDemoModule,
+        SkyDocsDemoPageModule,
+        SkyDocsDesignGuidelinesModule] });
+SkyDocsToolsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsToolsModule, imports: [SkyAuthHttpClientModule,
+        SkyDocsAnatomyModule,
+        SkyDocsCodeExamplesModule,
+        SkyDocsDemoModule,
+        SkyDocsDemoPageModule,
+        SkyDocsDesignGuidelinesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsToolsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        SkyAuthHttpClientModule,
+                        SkyDocsAnatomyModule,
+                        SkyDocsCodeExamplesModule,
+                        SkyDocsDemoModule,
+                        SkyDocsDemoPageModule,
+                        SkyDocsDesignGuidelinesModule,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyDocsAnatomyModule, SkyDocsCodeExampleTheme, SkyDocsCodeExamplesModule, SkyDocsDemoModule, SkyDocsDemoPageModule, SkyDocsDesignGuidelinesModule, SkyDocsHeadingAnchorModule, SkyDocsMarkdownModule, SkyDocsMarkdownPipe, SkyDocsModuleInfoModule, SkyDocsSourceCodeProvider, SkyDocsSupportalService, SkyDocsThumbnailModule, SkyDocsToolsModule, SkyDocsToolsOptions, 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, SkyDocsCodeExamplesComponent as λ4, SkyDocsDemoControlPanelCheckboxComponent as λ5, SkyDocsDemoControlPanelRadioGroupComponent as λ6, SkyDocsDemoControlPanelSectionComponent as λ7, SkyDocsDemoControlPanelComponent as λ8, SkyDocsDemoComponent as λ9 };
+//# sourceMappingURL=skyux-docs-tools.mjs.map