@skyux/docs-tools 5.0.0-beta.0 → 5.0.0-beta.12

package/fesm2015/skyux-docs-tools.js

@@ -1,171 +1,153 @@
-import { __decorate, __param } from 'tslib';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { Input, Component, ChangeDetectionStrategy, ContentChildren, NgModule, Injectable, Optional, ChangeDetectorRef, EventEmitter, Output, ElementRef, Pipe, ContentChild } from '@angular/core';
+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 { getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyI18nModule } from '@skyux/i18n';
-import { SkyThemeService, SkyTheme, SkyThemeSettings, SkyThemeMode, SkyThemeModule } from '@skyux/theme';
-import { Subject, BehaviorSubject, merge } from 'rxjs';
+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 { SkyRestrictedViewModule } from '@blackbaud/skyux-lib-restricted-view';
+import * as i6$1 from '@blackbaud/skyux-lib-stache';
 import { StachePageSummaryModule, StacheWrapperModule } from '@blackbaud/skyux-lib-stache';
-import { RouterModule, ActivatedRoute, Router } from '@angular/router';
+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 { SkyMediaBreakpoints, SkyMediaQueryService, SkyMediaQueryModule, SkyAppWindowRef } from '@skyux/core';
-import { DomSanitizer, Title } from '@angular/platform-browser';
+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 { SkyAppConfig } from '@skyux/config';
-import { HttpClient } from '@angular/common/http';
 import { SkyAuthHttpClientModule } from '@skyux/http';
 
-let SkyDocsAnatomyItemComponent = class SkyDocsAnatomyItemComponent {
+class SkyDocsAnatomyItemComponent {
     constructor() {
         this.isOptional = false;
     }
-};
-__decorate([
-    Input()
-], SkyDocsAnatomyItemComponent.prototype, "isOptional", void 0);
-SkyDocsAnatomyItemComponent = __decorate([
-    Component({
-        selector: 'sky-docs-anatomy-item',
-        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\"\n      class=\"sky-deemphasized\"\n    >&nbsp;(optional)</span>\n  </div>\n</div>",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        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}"]
-    })
-], SkyDocsAnatomyItemComponent);
-
-let SkyDocsAnatomyComponent = class SkyDocsAnatomyComponent {
+}
+SkyDocsAnatomyItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsAnatomyItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsAnatomyItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsAnatomyItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-anatomy-item',
+                    templateUrl: './anatomy-item.component.html',
+                    styleUrls: ['./anatomy-item.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { isOptional: [{
+                type: Input
+            }] } });
+
+class SkyDocsAnatomyComponent {
     ngAfterContentInit() {
         this.anatomyItems.forEach((item, i) => {
             item.marker = (i + 1).toString();
         });
     }
-};
-__decorate([
-    Input()
-], SkyDocsAnatomyComponent.prototype, "imagePath", void 0);
-__decorate([
-    ContentChildren(SkyDocsAnatomyItemComponent)
-], SkyDocsAnatomyComponent.prototype, "anatomyItems", void 0);
-SkyDocsAnatomyComponent = __decorate([
-    Component({
-        selector: 'sky-docs-anatomy',
-        template: "<div class=\"sky-docs-anatomy\">\n  <sky-row>\n    <sky-column\n      screenSmall=\"6\"\n      screenMedium=\"5\"\n      screenLarge=\"4\"\n    >\n      <ng-content select=\"sky-docs-anatomy-item\"></ng-content>\n    </sky-column>\n    <sky-column\n      screenSmall=\"6\"\n      screenMedium=\"7\"\n      screenLarge=\"8\"\n    >\n      <sky-image\n        [imageSource]=\"imagePath\"\n      ></sky-image>\n    </sky-column>\n  </sky-row>\n</div>",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [""]
-    })
-], SkyDocsAnatomyComponent);
-
-let SkyDocsAnatomyModule = class SkyDocsAnatomyModule {
-};
-SkyDocsAnatomyModule = __decorate([
-    NgModule({
-        imports: [
-            CommonModule,
-            SkyFluidGridModule,
-            SkyImageModule
-        ],
-        declarations: [
-            SkyDocsAnatomyComponent,
-            SkyDocsAnatomyItemComponent
-        ],
-        exports: [
-            SkyDocsAnatomyComponent,
-            SkyDocsAnatomyItemComponent
-        ]
-    })
-], SkyDocsAnatomyModule);
-
-let SkyDocsToolsResourcesProvider = class SkyDocsToolsResourcesProvider {
-    constructor() {
-        this.resources = { "EN-US": { "sky-docs-demo-heading": "Demo", "sky-docs-demo-toggle-button-on": "Show options", "sky-docs-demo-toggle-button-off": "Hide options", "sky-docs-code-example-launch-button-label": "Run in StackBlitz", "sky-docs-demo-control-panel-reset-button-label": "Reset" } };
-    }
-    getString(localeInfo, name) {
-        return getStringForLocale(this.resources, localeInfo.locale, name);
-    }
-};
-SkyDocsToolsResourcesProvider = __decorate([
-    Injectable()
-], SkyDocsToolsResourcesProvider);
+}
+SkyDocsAnatomyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsAnatomyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsAnatomyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsAnatomyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-anatomy',
+                    templateUrl: './anatomy.component.html',
+                    styleUrls: ['./anatomy.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { imagePath: [{
+                type: Input
+            }], anatomyItems: [{
+                type: ContentChildren,
+                args: [SkyDocsAnatomyItemComponent]
+            }] } });
+
+class SkyDocsAnatomyModule {
+}
+SkyDocsAnatomyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsAnatomyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsAnatomyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsAnatomyModule, declarations: [SkyDocsAnatomyComponent, SkyDocsAnatomyItemComponent], imports: [CommonModule, SkyFluidGridModule, SkyImageModule], exports: [SkyDocsAnatomyComponent, SkyDocsAnatomyItemComponent] });
+SkyDocsAnatomyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsAnatomyModule, imports: [[CommonModule, SkyFluidGridModule, SkyImageModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsAnatomyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SkyFluidGridModule, SkyImageModule],
+                    declarations: [SkyDocsAnatomyComponent, SkyDocsAnatomyItemComponent],
+                    exports: [SkyDocsAnatomyComponent, SkyDocsAnatomyItemComponent],
+                }]
+        }] });
 
-let SkyDocsToolsResourcesModule = class SkyDocsToolsResourcesModule {
-};
-SkyDocsToolsResourcesModule = __decorate([
-    NgModule({
-        providers: [{
-                provide: SKY_LIB_RESOURCES_PROVIDERS,
-                useClass: SkyDocsToolsResourcesProvider,
-                multi: true
-            }],
-        exports: [
-            SkyI18nModule
-        ]
-    })
-], SkyDocsToolsResourcesModule);
-
-let SkyDocsSourceCodeProvider = class SkyDocsSourceCodeProvider {
+/**
+ * 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' },
+    },
 };
-SkyDocsSourceCodeProvider = __decorate([
-    Injectable()
-], SkyDocsSourceCodeProvider);
-
-let SkyDocsSourceCodeService = 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;
-        });
+class SkyDocsToolsResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
     }
-};
-SkyDocsSourceCodeService.ctorParameters = () => [
-    { type: SkyDocsSourceCodeProvider }
-];
-SkyDocsSourceCodeService = __decorate([
-    Injectable()
-], SkyDocsSourceCodeService);
-
-let SkyDocsSourceCodeModule = class SkyDocsSourceCodeModule {
-};
-SkyDocsSourceCodeModule = __decorate([
-    NgModule({
-        providers: [
-            SkyDocsSourceCodeProvider,
-            SkyDocsSourceCodeService
-        ]
-    })
-], SkyDocsSourceCodeModule);
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyDocsToolsResourcesModule {
+}
+SkyDocsToolsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsToolsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsToolsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsToolsResourcesModule, exports: [SkyI18nModule] });
+SkyDocsToolsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsToolsResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyDocsToolsResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsToolsResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyDocsToolsResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
 
 var SkyDocsCodeExampleTheme;
 (function (SkyDocsCodeExampleTheme) {
@@ -184,14 +166,14 @@ var SkyDocsCodeExampleTheme;
  * </sky-docs-code-example>
  * ```
  */
-let SkyDocsCodeExampleComponent = class SkyDocsCodeExampleComponent {
+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 => {
+                .subscribe((change) => {
                 if (change.currentSettings.theme.name === 'modern') {
                     this.theme = SkyDocsCodeExampleTheme.Modern;
                 }
@@ -215,40 +197,38 @@ let SkyDocsCodeExampleComponent = class SkyDocsCodeExampleComponent {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
     }
-};
-SkyDocsCodeExampleComponent.ctorParameters = () => [
-    { type: SkyThemeService, decorators: [{ type: Optional }] }
-];
-__decorate([
-    Input()
-], SkyDocsCodeExampleComponent.prototype, "heading", void 0);
-__decorate([
-    Input()
-], SkyDocsCodeExampleComponent.prototype, "sourceCodePath", void 0);
-__decorate([
-    Input()
-], SkyDocsCodeExampleComponent.prototype, "theme", null);
-SkyDocsCodeExampleComponent = __decorate([
-    Component({
-        selector: 'sky-docs-code-example',
-        template: '',
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __param(0, Optional())
-], SkyDocsCodeExampleComponent);
+}
+SkyDocsCodeExampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsCodeExampleComponent, deps: [{ token: i1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsCodeExampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", 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
  */
-let SkyDocsCodeExamplesEditorService = class SkyDocsCodeExamplesEditorService {
+class SkyDocsCodeExamplesEditorService {
     launchEditor(codeExample) {
         const project = this.getPayload(codeExample);
         const options = {};
         StackBlitzSDK.openProject(project, options);
     }
     getPayload(codeExample) {
-        const angularVersion = '^9.0.0';
-        const skyuxVersion = '*';
+        const angularVersion = '^12.2.0';
+        const skyuxVersion = '^5.0.0-0';
         const defaultDependencies = {
             '@angular/animations': angularVersion,
             '@angular/common': angularVersion,
@@ -272,14 +252,24 @@ let SkyDocsCodeExamplesEditorService = class SkyDocsCodeExamplesEditorService {
             '@skyux/popovers': skyuxVersion,
             '@skyux/router': skyuxVersion,
             '@skyux/theme': skyuxVersion,
-            'core-js': '2',
-            'rxjs': '^6.0.0',
-            'rxjs-compat': '^6.0.0',
-            'tslib': '~1.14.1',
-            'zone.js': '~0.11.4'
+            rxjs: '^6.6.0',
+            tslib: '^2.3.0',
+            'zone.js': '~0.11.4',
         };
         const mergedDependencies = Object.assign({}, defaultDependencies, codeExample.packageDependencies);
-        const files = this.parseStackBlitzFiles(codeExample.sourceCode, mergedDependencies, codeExample.theme);
+        // 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',
@@ -288,36 +278,34 @@ let SkyDocsCodeExamplesEditorService = class SkyDocsCodeExamplesEditorService {
             dependencies: mergedDependencies,
             settings: {
                 compile: {
-                    clearConsole: false
-                }
-            }
+                    clearConsole: false,
+                },
+            },
         };
     }
-    parseStackBlitzFiles(sourceCode, dependencies, theme) {
+    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 built when using SKY UX CLI.
- * Visit https://developer.blackbaud/skyux for more information
+ * It is automatically provided when using the Angular CLI.
  **/
  `;
         const moduleImportStatements = [
-            `import {\n  Component,\n  NgModule\n} from '@angular/core';`,
+            `import {\n  NgModule\n} from '@angular/core';`,
             `import {\n  FormsModule,\n  ReactiveFormsModule\n} from '@angular/forms';`,
-            `import {\n  platformBrowserDynamic\n} from '@angular/platform-browser-dynamic';`,
-            `import {\n  BrowserModule\n} from '@angular/platform-browser';`,
+            `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';`
+            `import {\n  AppComponent\n} from './app.component';`,
         ];
         const moduleImports = [
-            'BrowserModule',
+            'BrowserAnimationsModule',
             'FormsModule',
             'ReactiveFormsModule',
-            'RouterModule.forRoot([])'
+            'RouterModule.forRoot([])',
         ];
         const files = {};
         let appComponentTemplate = '';
@@ -357,16 +345,16 @@ export class AppComponent {
     themeSvc: SkyThemeService,
     renderer?: Renderer2
   ) {
-      const themeSettings = new SkyThemeSettings(
-        SkyTheme.presets['${theme === SkyDocsCodeExampleTheme.Modern ? 'modern' : 'default'}'],
-        SkyThemeMode.presets.light
-      );
-
-      themeSvc.init(
-        document.body,
-        renderer,
-        themeSettings
-      );
+    const themeSettings = new SkyThemeSettings(
+      SkyTheme.presets['${theme === SkyDocsCodeExampleTheme.Modern ? 'modern' : 'default'}'],
+      SkyThemeMode.presets.light
+    );
+
+    themeSvc.init(
+      document.body,
+      renderer,
+      themeSettings
+    );
   }
 
 }`;
@@ -401,7 +389,9 @@ export class AppModule { }
   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" />${theme === SkyDocsCodeExampleTheme.Modern ? `<link rel="stylesheet" type="text/css" href="https://sky.blackbaudcdn.net/static/skyux-icons/4.0.0-beta.2/assets/css/skyux-icons.min.css" />` : ``}
+<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />${theme === SkyDocsCodeExampleTheme.Modern
+            ? `<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...
@@ -409,10 +399,6 @@ export class AppModule { }
         files[`${srcPath}main.ts`] = `${banner}
 import './polyfills';
 
-import {
-  enableProdMode
-} from '@angular/core';
-
 import {
   platformBrowserDynamic
 } from '@angular/platform-browser-dynamic';
@@ -430,16 +416,17 @@ platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
 }).catch(err => console.error(err));
 `;
         files[`${srcPath}polyfills.ts`] = `${banner}
-import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
+import 'zone.js';
 `;
         files[`${srcPath}styles.scss`] = `@import '~@skyux/theme/css/sky';
-${theme === SkyDocsCodeExampleTheme.Modern ? `@import '~@skyux/theme/css/themes/modern/styles';` : ``}
+${theme === SkyDocsCodeExampleTheme.Modern
+            ? `@import '~@skyux/theme/css/themes/modern/styles';`
+            : ``}
 body {
   background-color: #fff;
   margin: 15px;
 }`;
+        stylesheets.push('src/styles.scss');
         files['angular.json'] = `{
   "projects": {
     "demo": {
@@ -447,9 +434,7 @@ body {
         "build": {
           "options": {
             "index": "src/index.html",
-            "styles": [
-              "src/styles.scss"
-            ]
+            "styles": ${JSON.stringify(stylesheets)}
           }
         }
       }
@@ -457,19 +442,28 @@ body {
   }
 }`;
         files['package.json'] = JSON.stringify({
-            dependencies
+            dependencies,
         }, undefined, 2);
         files['tsconfig.json'] = `{
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2017",
+    "module": "es2020",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
+    "typeRoots": ["node_modules/@types"],
     "lib": [
-      "dom",
-      "es6"
+      "es2018",
+      "dom"
     ]
+  },
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true,
+    "enableIvy": false
   }
 }`;
         return files;
@@ -488,25 +482,80 @@ body {
             throw 'You must export a component from the code example module!';
         }
         fragment = fragment.split(']')[0];
-        const components = fragment.split(',');
+        const components = fragment.split(',').filter((x) => x);
         if (components.length > 1) {
-            throw 'You may only export a single component from the code example module' +
+            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?';
+                '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);
+            return file.rawContents.indexOf(componentClassName) > -1;
         });
         const trimmed = found.rawContents.replace(/\s/g, '');
         return trimmed.split(`selector:'`)[1].split(`'`)[0];
     }
-};
-SkyDocsCodeExamplesEditorService = __decorate([
-    Injectable()
-], SkyDocsCodeExamplesEditorService);
+}
+SkyDocsCodeExamplesEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsCodeExamplesEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsCodeExamplesEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsCodeExamplesEditorService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsCodeExamplesEditorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class SkyDocsSourceCodeProvider {
+}
+SkyDocsSourceCodeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsSourceCodeProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsSourceCodeProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsSourceCodeProvider, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsSourceCodeService, deps: [{ token: SkyDocsSourceCodeProvider }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsSourceCodeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsSourceCodeService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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.
@@ -523,10 +572,11 @@ SkyDocsCodeExamplesEditorService = __decorate([
  * </sky-docs-code-examples>
  * ```
  */
-let SkyDocsCodeExamplesComponent = class SkyDocsCodeExamplesComponent {
+class SkyDocsCodeExamplesComponent {
     constructor(editorService, sourceCodeService) {
         this.editorService = editorService;
         this.sourceCodeService = sourceCodeService;
+        this.stylesheets = [];
         this.codeExamples = [];
     }
     /**
@@ -555,7 +605,8 @@ let SkyDocsCodeExamplesComponent = class SkyDocsCodeExamplesComponent {
                 heading: component.heading,
                 packageDependencies: this.packageDependencies,
                 sourceCode,
-                theme: component.theme
+                stylesheets: this.stylesheets,
+                theme: component.theme,
             });
         });
     }
@@ -577,52 +628,58 @@ let SkyDocsCodeExamplesComponent = class SkyDocsCodeExamplesComponent {
                 return extension;
         }
     }
-};
-SkyDocsCodeExamplesComponent.ctorParameters = () => [
-    { type: SkyDocsCodeExamplesEditorService },
-    { type: SkyDocsSourceCodeService }
-];
-__decorate([
-    Input()
-], SkyDocsCodeExamplesComponent.prototype, "packageDependencies", null);
-__decorate([
-    ContentChildren(SkyDocsCodeExampleComponent)
-], SkyDocsCodeExamplesComponent.prototype, "codeExampleComponents", void 0);
-SkyDocsCodeExamplesComponent = __decorate([
-    Component({
-        selector: 'sky-docs-code-examples',
-        template: "<div *ngIf=\"codeExamples && codeExamples.length\" class=\"sky-docs-code-examples\">\n  <sky-repeater *ngIf=\"codeExamples.length > 1 else singleCodeExample\" expandMode=\"multiple\">\n    <sky-repeater-item *ngFor=\"let codeExample of codeExamples\" [isExpanded]=\"false\">\n      <sky-repeater-item-title>\n        <ng-container *ngTemplateOutlet=\"codeExampleHeaderTemplate; context: {$implicit: codeExample}\">\n        </ng-container>\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        <ng-container *ngTemplateOutlet=\"codeExampleTemplate; context: {$implicit: codeExample}\">\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\">\n  </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 *ngFor=\"let file of item.sourceCode; let i = index;\" [active]=\"i === 0\" [tabHeading]=\"file.fileName\">\n        <sky-code-block [code]=\"file.rawContents\" [languageType]=\"parseCodeLanguageType(file.fileName)\" ngPreserveWhitespaces=\"true\">\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 *ngTemplateOutlet=\"codeExampleHeaderTemplate; context: {$implicit: codeExamples[0]}\">\n  </ng-container>\n  <ng-container *ngTemplateOutlet=\"codeExampleTemplate; context: {$implicit: codeExamples[0]}\">\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 class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"launchEditor(codeExample);$event.stopPropagation();\">\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>",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        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}"]
-    })
-], SkyDocsCodeExamplesComponent);
-
-let SkyDocsCodeExamplesModule = class SkyDocsCodeExamplesModule {
-};
-SkyDocsCodeExamplesModule = __decorate([
-    NgModule({
-        imports: [
+}
+SkyDocsCodeExamplesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsCodeExamplesComponent, deps: [{ token: SkyDocsCodeExamplesEditorService }, { token: SkyDocsSourceCodeService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsCodeExamplesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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:normal}.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: ["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", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { type: i4.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaInvalid", "ariaRequired", "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: "12.2.16", ngImport: i0, type: SkyDocsCodeExamplesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-code-examples',
+                    templateUrl: './code-examples.component.html',
+                    styleUrls: ['./code-examples.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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: "12.2.16", ngImport: i0, type: SkyDocsCodeExamplesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsCodeExamplesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsCodeExamplesModule, imports: [[
             CommonModule,
             SkyCodeBlockModule,
-            SkyDocsSourceCodeModule,
             SkyDocsToolsResourcesModule,
             SkyIconModule,
             SkyRepeaterModule,
-            SkyVerticalTabsetModule
-        ],
-        declarations: [
-            SkyDocsCodeExampleComponent,
-            SkyDocsCodeExamplesComponent
-        ],
-        exports: [
-            SkyDocsCodeExampleComponent,
-            SkyDocsCodeExamplesComponent
-        ],
-        providers: [
-            SkyDocsCodeExamplesEditorService
-        ]
-    })
-], SkyDocsCodeExamplesModule);
+            SkyVerticalTabsetModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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.
@@ -636,7 +693,7 @@ SkyDocsCodeExamplesModule = __decorate([
  * </sky-docs-demo-control-panel-checkbox>
  * ```
  */
-let SkyDocsDemoControlPanelCheckboxComponent = class SkyDocsDemoControlPanelCheckboxComponent {
+class SkyDocsDemoControlPanelCheckboxComponent {
     constructor(changeDetector) {
         this.changeDetector = changeDetector;
         /**
@@ -680,32 +737,28 @@ let SkyDocsDemoControlPanelCheckboxComponent = class SkyDocsDemoControlPanelChec
     }
     notifyChange() {
         this.selectionChange.next({
-            [this.propertyName]: this.checked
+            [this.propertyName]: this.checked,
         });
     }
-};
-SkyDocsDemoControlPanelCheckboxComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input()
-], SkyDocsDemoControlPanelCheckboxComponent.prototype, "checked", null);
-__decorate([
-    Input()
-], SkyDocsDemoControlPanelCheckboxComponent.prototype, "disabled", void 0);
-__decorate([
-    Input()
-], SkyDocsDemoControlPanelCheckboxComponent.prototype, "label", void 0);
-__decorate([
-    Input()
-], SkyDocsDemoControlPanelCheckboxComponent.prototype, "propertyName", void 0);
-SkyDocsDemoControlPanelCheckboxComponent = __decorate([
-    Component({
-        selector: 'sky-docs-demo-control-panel-checkbox',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], SkyDocsDemoControlPanelCheckboxComponent);
+}
+SkyDocsDemoControlPanelCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsDemoControlPanelCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDemoControlPanelCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-demo-control-panel-checkbox',
+                    templateUrl: './demo-control-panel-checkbox.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], propertyName: [{
+                type: Input
+            }] } });
 
 /**
  * Renders a radio control group.
@@ -724,7 +777,7 @@ SkyDocsDemoControlPanelCheckboxComponent = __decorate([
  * </sky-docs-demo-control-panel-radio-group>
  * ```
  */
-let SkyDocsDemoControlPanelRadioGroupComponent = class SkyDocsDemoControlPanelRadioGroupComponent {
+class SkyDocsDemoControlPanelRadioGroupComponent {
     constructor(changeDetector) {
         this.changeDetector = changeDetector;
         /**
@@ -745,7 +798,7 @@ let SkyDocsDemoControlPanelRadioGroupComponent = class SkyDocsDemoControlPanelRa
     onModelChange(value) {
         this.value = value;
         this.selectionChange.next({
-            [this.propertyName]: this.value
+            [this.propertyName]: this.value,
         });
     }
     resetValue() {
@@ -758,43 +811,28 @@ let SkyDocsDemoControlPanelRadioGroupComponent = class SkyDocsDemoControlPanelRa
         }
         return value;
     }
-};
-SkyDocsDemoControlPanelRadioGroupComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input()
-], SkyDocsDemoControlPanelRadioGroupComponent.prototype, "choices", void 0);
-__decorate([
-    Input()
-], SkyDocsDemoControlPanelRadioGroupComponent.prototype, "disabled", void 0);
-__decorate([
-    Input()
-], SkyDocsDemoControlPanelRadioGroupComponent.prototype, "heading", void 0);
-__decorate([
-    Input()
-], SkyDocsDemoControlPanelRadioGroupComponent.prototype, "initialValue", void 0);
-__decorate([
-    Input()
-], SkyDocsDemoControlPanelRadioGroupComponent.prototype, "propertyName", void 0);
-SkyDocsDemoControlPanelRadioGroupComponent = __decorate([
-    Component({
-        selector: 'sky-docs-demo-control-panel-radio-group',
-        template: "<div\n  class=\"sky-demo-control-panel-radio-group\"\n>\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\n      class=\"sky-list-unstyled\"\n    >\n      <li *ngFor=\"let choice of choices\">\n        <sky-radio\n          [value]=\"choice.value\"\n        >\n          <sky-radio-label>{{ choice.label }}</sky-radio-label>\n        </sky-radio>\n      </li>\n    </ul>\n  </sky-radio-group>\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-demo-control-panel-radio-group{margin-bottom:20px}ul{margin:0}"]
-    })
-], SkyDocsDemoControlPanelRadioGroupComponent);
-
-let SkyDocsDemoThemeService = class SkyDocsDemoThemeService {
-    constructor() {
-        this.supportsTheming = new BehaviorSubject(false);
-        this.themeSettings = new BehaviorSubject(undefined);
-    }
-};
-SkyDocsDemoThemeService = __decorate([
-    Injectable()
-], SkyDocsDemoThemeService);
+}
+SkyDocsDemoControlPanelRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsDemoControlPanelRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDemoControlPanelRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-demo-control-panel-radio-group',
+                    templateUrl: './demo-control-panel-radio-group.component.html',
+                    styleUrls: ['./demo-control-panel-radio-group.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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.
@@ -807,9 +845,8 @@ SkyDocsDemoThemeService = __decorate([
  * </sky-docs-demo-control-panel>
  * ```
  */
-let SkyDocsDemoControlPanelComponent = class SkyDocsDemoControlPanelComponent {
-    constructor(demoThemeSvc) {
-        this.demoThemeSvc = demoThemeSvc;
+class SkyDocsDemoControlPanelComponent {
+    constructor() {
         /**
          * Fires when the user clicks the reset button.
          */
@@ -843,43 +880,42 @@ let SkyDocsDemoControlPanelComponent = class SkyDocsDemoControlPanelComponent {
         });
         this.reset.emit();
     }
-    onThemeSettingsChange(themeSettings) {
-        this.demoThemeSvc.themeSettings.next(themeSettings);
-    }
     addEventListeners() {
         if (this.eventListeners) {
             this.eventListeners.unsubscribe();
         }
-        this.eventListeners = merge(...this.checkboxes.map(c => c.selectionChange), ...this.radioGroups.map(c => c.selectionChange))
+        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.ctorParameters = () => [
-    { type: SkyDocsDemoThemeService }
-];
-__decorate([
-    Output()
-], SkyDocsDemoControlPanelComponent.prototype, "reset", void 0);
-__decorate([
-    Output()
-], SkyDocsDemoControlPanelComponent.prototype, "selectionChange", void 0);
-__decorate([
-    ContentChildren(SkyDocsDemoControlPanelRadioGroupComponent, { descendants: true })
-], SkyDocsDemoControlPanelComponent.prototype, "radioGroups", void 0);
-__decorate([
-    ContentChildren(SkyDocsDemoControlPanelCheckboxComponent, { descendants: true })
-], SkyDocsDemoControlPanelComponent.prototype, "checkboxes", void 0);
-SkyDocsDemoControlPanelComponent = __decorate([
-    Component({
-        selector: 'sky-docs-demo-control-panel',
-        template: "<div class=\"sky-docs-demo-control-panel\">\n  <div class=\"sky-docs-demo-control-panel-row sky-rounded-corners\">\n    <div class=\"sky-docs-demo-control-panel-column sky-docs-demo-control-panel-sections-column\">\n      <ng-content select=\"sky-docs-demo-control-panel-section\"></ng-content>\n    </div>\n\n    <div class=\"sky-docs-demo-control-panel-column sky-docs-demo-control-panel-button-column\">\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    <ng-container *ngIf=\"demoThemeSvc.supportsTheming | async\">\n      <sky-restricted-view>\n        <div\n          class=\"sky-docs-demo-control-panel-column sky-docs-demo-control-panel-theme-column\"\n        >\n          <sky-docs-demo-control-panel-theme\n            (themeSettingsChange)=\"onThemeSettingsChange($event)\"\n          ></sky-docs-demo-control-panel-theme>\n        </div>\n      </sky-restricted-view>\n    </ng-container>\n  </div>\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        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}.sky-docs-demo-control-panel-theme-column{border-left:1px solid #cdcfd2;height:100%;padding-left:20px}"]
-    })
-], SkyDocsDemoControlPanelComponent);
+}
+SkyDocsDemoControlPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsDemoControlPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDemoControlPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-demo-control-panel',
+                    templateUrl: './demo-control-panel.component.html',
+                    styleUrls: ['./demo-control-panel.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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.
@@ -890,9 +926,8 @@ SkyDocsDemoControlPanelComponent = __decorate([
  * </sky-docs-demo>
  * ```
  */
-let SkyDocsDemoComponent = class SkyDocsDemoComponent {
-    constructor(demoThemeSvc) {
-        this.demoThemeSvc = demoThemeSvc;
+class SkyDocsDemoComponent {
+    constructor() {
         this.areOptionsVisible = false;
     }
     /**
@@ -905,43 +940,34 @@ let SkyDocsDemoComponent = class SkyDocsDemoComponent {
     get alignContents() {
         return this._alignContents || 'left';
     }
-    set supportsTheming(value) {
-        this.demoThemeSvc.supportsTheming.next(value);
-    }
     get hasOptions() {
-        return this.supportsTheming || (this.controlPanels && this.controlPanels.length > 0);
+        return this.controlPanels && this.controlPanels.length > 0;
     }
     get toggleOptionsButtonIcon() {
-        return (this.areOptionsVisible) ? 'chevron-up' : 'chevron-down';
+        return this.areOptionsVisible ? 'chevron-up' : 'chevron-down';
     }
     onToggleOptionsButtonClick() {
         this.areOptionsVisible = !this.areOptionsVisible;
     }
-};
-SkyDocsDemoComponent.ctorParameters = () => [
-    { type: SkyDocsDemoThemeService }
-];
-__decorate([
-    Input()
-], SkyDocsDemoComponent.prototype, "alignContents", null);
-__decorate([
-    Input()
-], SkyDocsDemoComponent.prototype, "heading", void 0);
-__decorate([
-    Input()
-], SkyDocsDemoComponent.prototype, "supportsTheming", null);
-__decorate([
-    ContentChildren(SkyDocsDemoControlPanelComponent, { read: ElementRef })
-], SkyDocsDemoComponent.prototype, "controlPanels", void 0);
-SkyDocsDemoComponent = __decorate([
-    Component({
-        selector: 'sky-docs-demo',
-        template: "<div class=\"sky-docs-demo\">\n  <div\n    aria-level=\"3\"\n    class=\"sky-docs-demo-heading\"\n    role=\"heading\"\n  >\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\n      class=\"sky-docs-demo-control-panel-wrapper\"\n    >\n      <div\n        class=\"sky-docs-demo-control-panel-wrapper-header\"\n      >\n        <button *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\n            [icon]=\"toggleOptionsButtonIcon\"\n          ></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\n        class=\"sky-docs-demo-control-panel-wrapper-body\"\n      >\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    [skyTheme]=\"demoThemeSvc.themeSettings | async\"\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",
-        providers: [SkyDocsDemoThemeService],
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        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}"]
-    })
-], SkyDocsDemoComponent);
+}
+SkyDocsDemoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDemoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-demo',
+                    templateUrl: './demo.component.html',
+                    styleUrls: ['./demo.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { alignContents: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }], controlPanels: [{
+                type: ContentChildren,
+                args: [SkyDocsDemoControlPanelComponent, { read: ElementRef }]
+            }] } });
 
 /**
  * Renders a section within the control panel.
@@ -954,218 +980,146 @@ SkyDocsDemoComponent = __decorate([
  * </sky-docs-demo-control-panel>
  * ```
  */
-let SkyDocsDemoControlPanelSectionComponent = class SkyDocsDemoControlPanelSectionComponent {
-};
-SkyDocsDemoControlPanelSectionComponent = __decorate([
-    Component({
-        selector: 'sky-docs-demo-control-panel-section',
-        template: "<div\n  class=\"sky-demo-control-panel-section\"\n>\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  <ng-content select=\"sky-docs-demo-control-panel-theme\"></ng-content>\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-demo-control-panel-section{padding-right:20px}"]
-    })
-], SkyDocsDemoControlPanelSectionComponent);
-
-let SkyDocsDemoControlPanelThemeComponent = class SkyDocsDemoControlPanelThemeComponent {
-    constructor(changeDetector, themeSvc) {
-        this.changeDetector = changeDetector;
-        this.themeSvc = themeSvc;
-        this.themeSettingsChange = new EventEmitter();
-        this.ngUnsubscribe = new Subject();
-        this._mode = 'light';
-        this._theme = 'default';
-        // Update theme property with SkyThemeService if it has not been set.
-        if (this.themeSvc) {
-            this.themeSvc.settingsChange
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe(change => {
-                if (change.currentSettings.theme.name !== this.theme) {
-                    this.theme = change.currentSettings.theme.name;
-                }
-                if (change.currentSettings.mode.name !== this.mode) {
-                    this.mode = change.currentSettings.mode.name;
-                }
-                this.changeDetector.markForCheck();
-            });
-        }
-    }
-    get mode() {
-        return this._mode;
-    }
-    set mode(value) {
-        this._mode = value;
-        this.updateTheme();
-    }
-    get theme() {
-        return this._theme;
-    }
-    set theme(value) {
-        this._theme = value;
-        this.updateModesForTheme();
-        this.updateTheme();
-    }
-    ngOnInit() {
-        this.themeOptions = Object.keys(SkyTheme.presets).map(key => this.createRadioItem(key));
-        this.updateModesForTheme();
-        this.updateTheme();
-    }
-    ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-    }
-    updateModesForTheme() {
-        let selectedTheme = this.getThemeByName(this.theme);
-        this.modeOptions = selectedTheme.supportedModes
-            .map(supportedMode => this.createRadioItem(supportedMode.name));
-        if (!this.modeOptions.some((item) => item.value === this.mode)) {
-            this.mode = this.modeOptions[0].value;
-        }
-    }
-    createRadioItem(name) {
-        return {
-            label: this.capitalize(name),
-            value: name
-        };
-    }
-    capitalize(name) {
-        return name.charAt(0).toUpperCase() + name.substr(1);
-    }
-    getThemeSettings() {
-        return new SkyThemeSettings(this.getThemeByName(this.theme), this.getModeByName(this.mode));
-    }
-    getThemeByName(name) {
-        const themePresets = SkyTheme.presets;
-        return themePresets[name];
-    }
-    getModeByName(name) {
-        const modePresets = SkyThemeMode.presets;
-        return modePresets[name];
-    }
-    updateTheme() {
-        this.themeSettingsChange.emit(this.getThemeSettings());
-    }
-};
-SkyDocsDemoControlPanelThemeComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: SkyThemeService, decorators: [{ type: Optional }] }
-];
-__decorate([
-    Output()
-], SkyDocsDemoControlPanelThemeComponent.prototype, "themeSettingsChange", void 0);
-SkyDocsDemoControlPanelThemeComponent = __decorate([
-    Component({
-        selector: 'sky-docs-demo-control-panel-theme',
-        template: "<strong>Theme</strong>\n<sky-radio-group\n  name=\"theme\"\n  [(ngModel)]=\"theme\"\n>\n  <ul\n    class=\"sky-list-unstyled\"\n  >\n    <li *ngFor=\"let themeOption of themeOptions\">\n      <sky-radio\n        [value]=\"themeOption.value\"\n      >\n        <sky-radio-label>{{ themeOption.label }}</sky-radio-label>\n      </sky-radio>\n    </li>\n  </ul>\n</sky-radio-group>\n\n<strong>Mode</strong>\n<sky-radio-group\n  name=\"mode\"\n  [(ngModel)]=\"mode\"\n>\n  <ul\n    class=\"sky-list-unstyled\"\n  >\n    <li *ngFor=\"let modeOption of modeOptions\">\n      <sky-radio\n        [value]=\"modeOption.value\"\n      >\n        <sky-radio-label>{{ modeOption.label }}</sky-radio-label>\n      </sky-radio>\n    </li>\n  </ul>\n</sky-radio-group>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: ["ul{margin:0}"]
-    }),
-    __param(1, Optional())
-], SkyDocsDemoControlPanelThemeComponent);
-
-let SkyDocsDemoModule = class SkyDocsDemoModule {
-};
-SkyDocsDemoModule = __decorate([
-    NgModule({
-        imports: [
+class SkyDocsDemoControlPanelSectionComponent {
+}
+SkyDocsDemoControlPanelSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsDemoControlPanelSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDemoControlPanelSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-demo-control-panel-section',
+                    templateUrl: './demo-control-panel-section.component.html',
+                    styleUrls: ['./demo-control-panel-section.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class SkyDocsDemoModule {
+}
+SkyDocsDemoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsDemoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsDemoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDemoModule, imports: [[
             CommonModule,
             FormsModule,
             SkyCheckboxModule,
             SkyDocsToolsResourcesModule,
             SkyIconModule,
             SkyRadioModule,
-            SkyRestrictedViewModule,
-            SkyThemeModule
-        ],
-        declarations: [
-            SkyDocsDemoComponent,
-            SkyDocsDemoControlPanelCheckboxComponent,
-            SkyDocsDemoControlPanelComponent,
-            SkyDocsDemoControlPanelRadioGroupComponent,
-            SkyDocsDemoControlPanelSectionComponent,
-            SkyDocsDemoControlPanelThemeComponent
-        ],
-        exports: [
-            SkyDocsDemoComponent,
-            SkyDocsDemoControlPanelCheckboxComponent,
-            SkyDocsDemoControlPanelComponent,
-            SkyDocsDemoControlPanelRadioGroupComponent,
-            SkyDocsDemoControlPanelSectionComponent,
-            SkyDocsDemoControlPanelThemeComponent
-        ]
-    })
-], SkyDocsDemoModule);
-
-let SkyDocsHeadingAnchorComponent = class SkyDocsHeadingAnchorComponent {
+            SkyThemeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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';
     }
-};
-__decorate([
-    Input()
-], SkyDocsHeadingAnchorComponent.prototype, "anchorId", void 0);
-__decorate([
-    Input()
-], SkyDocsHeadingAnchorComponent.prototype, "headingLevel", void 0);
-SkyDocsHeadingAnchorComponent = __decorate([
-    Component({
-        selector: 'sky-docs-heading-anchor',
-        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 *ngIf=\"anchorId\"\n    aria-hidden=\"true\"\n    class=\"sky-docs-heading-anchor\"\n    queryParamsHandling=\"merge\"\n    [fragment]=\"anchorId\"\n    [routerLink]=\"[]\"\n  >\n    <sky-icon\n      class=\"sky-docs-heading-anchor-icon\"\n      icon=\"link\"\n    ></sky-icon>\n  </a>\n</div>",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-docs-heading-anchor{color:#212327}.sky-docs-heading-anchor:hover{text-decoration:none}.sky-docs-heading-anchor:focus .sky-docs-heading-anchor-icon,.sky-docs-heading-anchor:hover .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:\"Blackbaud 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:\"Blackbaud Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#212327;margin:30px 0 15px;font-weight:300;font-size:34px}.sky-docs-tools-heading-anchor-h2{line-height:1.1;font-family:\"Blackbaud Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#212327;margin:30px 0;font-weight:300;font-size:26px}.sky-docs-tools-heading-anchor-h3{line-height:1.1;font-family:\"Blackbaud 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:\"Blackbaud Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#212327;margin:0 0 10px;font-weight:600;font-size:15px}"]
-    })
-], SkyDocsHeadingAnchorComponent);
-
-let SkyDocsHeadingAnchorModule = class SkyDocsHeadingAnchorModule {
-};
-SkyDocsHeadingAnchorModule = __decorate([
-    NgModule({
-        declarations: [
-            SkyDocsHeadingAnchorComponent
-        ],
-        imports: [
-            CommonModule,
-            RouterModule,
-            SkyIconModule
-        ],
-        exports: [
-            SkyDocsHeadingAnchorComponent
-        ]
-    })
-], SkyDocsHeadingAnchorModule);
-
-let SkyDocsMarkdownPipe = class SkyDocsMarkdownPipe {
+}
+SkyDocsHeadingAnchorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsHeadingAnchorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsHeadingAnchorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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:normal;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: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsHeadingAnchorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-heading-anchor',
+                    templateUrl: './heading-anchor.component.html',
+                    styleUrls: ['./heading-anchor.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { anchorId: [{
+                type: Input
+            }], headingLevel: [{
+                type: Input
+            }] } });
+
+class SkyDocsHeadingAnchorModule {
+}
+SkyDocsHeadingAnchorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsHeadingAnchorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsHeadingAnchorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsHeadingAnchorModule, declarations: [SkyDocsHeadingAnchorComponent], imports: [CommonModule, RouterModule, SkyIconModule], exports: [SkyDocsHeadingAnchorComponent] });
+SkyDocsHeadingAnchorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsHeadingAnchorModule, imports: [[CommonModule, RouterModule, SkyIconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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 = __decorate([
-    Pipe({
-        name: 'skyDocsMarkdown'
-    })
-], SkyDocsMarkdownPipe);
-
-let SkyDocsMarkdownModule = class SkyDocsMarkdownModule {
-};
-SkyDocsMarkdownModule = __decorate([
-    NgModule({
-        declarations: [
-            SkyDocsMarkdownPipe
-        ],
-        providers: [
-            SkyDocsMarkdownPipe
-        ],
-        exports: [
-            SkyDocsMarkdownPipe
-        ]
-    })
-], SkyDocsMarkdownModule);
+}
+SkyDocsMarkdownPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsMarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SkyDocsMarkdownPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsMarkdownPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsMarkdown',
+                }]
+        }] });
+
+class SkyDocsMarkdownModule {
+}
+SkyDocsMarkdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsMarkdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsMarkdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsMarkdownModule, declarations: [SkyDocsMarkdownPipe], exports: [SkyDocsMarkdownPipe] });
+SkyDocsMarkdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsMarkdownModule, providers: [SkyDocsMarkdownPipe] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsMarkdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyDocsMarkdownPipe],
+                    providers: [SkyDocsMarkdownPipe],
+                    exports: [SkyDocsMarkdownPipe],
+                }]
+        }] });
 
 class SkyDocsToolsOptions {
 }
 
-let SkyDocsModuleInfoComponent = class SkyDocsModuleInfoComponent {
+class SkyDocsModuleInfoComponent {
     constructor(options) {
         this.options = options;
     }
@@ -1173,13 +1127,13 @@ let SkyDocsModuleInfoComponent = class SkyDocsModuleInfoComponent {
         this._gitRepoUrl = value;
     }
     get gitRepoUrl() {
-        return this._gitRepoUrl || this.options && this.options.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;
+        return this._packageName || (this.options && this.options.packageName);
     }
     set packageUrl(value) {
         this._packageUrl = value;
@@ -1198,13 +1152,13 @@ let SkyDocsModuleInfoComponent = class SkyDocsModuleInfoComponent {
         if (this.packageName) {
             externalLinks.push({
                 url: this.packageUrl,
-                label: 'View in NPM'
+                label: 'View in NPM',
             });
         }
         if (this.gitRepoUrl) {
             externalLinks.push({
                 url: this.gitRepoUrl,
-                label: 'View in GitHub'
+                label: 'View in GitHub',
             });
         }
         return externalLinks;
@@ -1215,201 +1169,108 @@ let SkyDocsModuleInfoComponent = class SkyDocsModuleInfoComponent {
         }
         return `npm install --save-exact ${this.packageName}`;
     }
-};
-SkyDocsModuleInfoComponent.ctorParameters = () => [
-    { type: SkyDocsToolsOptions, decorators: [{ type: Optional }] }
-];
-__decorate([
-    Input()
-], SkyDocsModuleInfoComponent.prototype, "gitRepoUrl", null);
-__decorate([
-    Input()
-], SkyDocsModuleInfoComponent.prototype, "moduleName", void 0);
-__decorate([
-    Input()
-], SkyDocsModuleInfoComponent.prototype, "packageName", null);
-__decorate([
-    Input()
-], SkyDocsModuleInfoComponent.prototype, "packageUrl", null);
-SkyDocsModuleInfoComponent = __decorate([
-    Component({
-        selector: 'sky-docs-module-info',
-        template: "<div class=\"sky-docs-module-info\">\n  <sky-definition-list\n    defaultValue=\"\"\n    labelWidth=\"120px\"\n  >\n    <sky-definition-list-content *ngIf=\"moduleName\">\n      <sky-definition-list-label>\n        Defined in\n      </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>\n        NPM package\n      </sky-definition-list-label>\n      <sky-definition-list-value>\n        <span class=\"sky-docs-module-info-package-name\"><sky-code>{{ packageName }}</sky-code></span>\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\">&nbsp;| </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 package. Also, after you install the package, you must add the module as an export in your SPA's main module to make exports available to your SPA. If you use the SKY UX SDK, the main module is <sky-code>app-sky.module.ts</sky-code>.\n        </sky-popover>\n        <div class=\"sky-docs-module-info-installation-command\">\n          <span class=\"sky-docs-module-info-installation-command-code\" #copyTarget>\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\n    class=\"sky-docs-module-info-additional-content\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        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}"]
-    }),
-    __param(0, Optional())
-], SkyDocsModuleInfoComponent);
-
-let SkyDocsModuleInfoModule = class SkyDocsModuleInfoModule {
-};
-SkyDocsModuleInfoModule = __decorate([
-    NgModule({
-        imports: [
+}
+SkyDocsModuleInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsModuleInfoComponent, deps: [{ token: SkyDocsToolsOptions, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsModuleInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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{margin-right:10px}.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: ["copyTarget", "buttonText", "buttonClickedText"] }], 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: "12.2.16", ngImport: i0, type: SkyDocsModuleInfoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-module-info',
+                    templateUrl: './module-info.component.html',
+                    styleUrls: ['./module-info.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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: "12.2.16", ngImport: i0, type: SkyDocsModuleInfoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsModuleInfoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsModuleInfoModule, declarations: [SkyDocsModuleInfoComponent], imports: [CommonModule,
+        SkyCodeModule,
+        SkyClipboardModule,
+        SkyDefinitionListModule,
+        SkyHelpInlineModule,
+        SkyPopoverModule], exports: [SkyDocsModuleInfoComponent] });
+SkyDocsModuleInfoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsModuleInfoModule, imports: [[
             CommonModule,
             SkyCodeModule,
             SkyClipboardModule,
             SkyDefinitionListModule,
             SkyHelpInlineModule,
-            SkyPopoverModule
-        ],
-        declarations: [
-            SkyDocsModuleInfoComponent
-        ],
-        exports: [
-            SkyDocsModuleInfoComponent
-        ]
-    })
-], SkyDocsModuleInfoModule);
-
-let SkyDocsSafeHtmlComponent = class SkyDocsSafeHtmlComponent {
+            SkyPopoverModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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.ctorParameters = () => [
-    { type: DomSanitizer }
-];
-__decorate([
-    Input()
-], SkyDocsSafeHtmlComponent.prototype, "innerHtml", void 0);
-SkyDocsSafeHtmlComponent = __decorate([
-    Component({
-        selector: 'sky-docs-safe-html',
-        template: "<div\n  class=\"sky-docs-safe-html\"\n  [innerHtml]=\"getTrustedHtml(innerHtml)\"\n></div>",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], SkyDocsSafeHtmlComponent);
-
-let SkyDocsSafeHtmlModule = class SkyDocsSafeHtmlModule {
-};
-SkyDocsSafeHtmlModule = __decorate([
-    NgModule({
-        declarations: [
-            SkyDocsSafeHtmlComponent
-        ],
-        imports: [
-            CommonModule
-        ],
-        exports: [
-            SkyDocsSafeHtmlComponent
-        ]
-    })
-], SkyDocsSafeHtmlModule);
-
-let SkyDocsTypeDefinitionsProvider = class SkyDocsTypeDefinitionsProvider {
-};
-SkyDocsTypeDefinitionsProvider = __decorate([
-    Injectable()
-], SkyDocsTypeDefinitionsProvider);
-
-/**
- * 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');
 }
-let SkyDocsAnchorLinkService = 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.ctorParameters = () => [
-    { type: SkyDocsTypeDefinitionsProvider }
-];
-SkyDocsAnchorLinkService = __decorate([
-    Injectable()
-], SkyDocsAnchorLinkService);
+SkyDocsSafeHtmlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsSafeHtmlComponent, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsSafeHtmlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsSafeHtmlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-safe-html',
+                    templateUrl: './safe-html.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$4.DomSanitizer }]; }, propDecorators: { innerHtml: [{
+                type: Input
+            }] } });
+
+class SkyDocsSafeHtmlModule {
+}
+SkyDocsSafeHtmlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsSafeHtmlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsSafeHtmlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsSafeHtmlModule, declarations: [SkyDocsSafeHtmlComponent], imports: [CommonModule], exports: [SkyDocsSafeHtmlComponent] });
+SkyDocsSafeHtmlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsSafeHtmlModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsSafeHtmlModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyDocsSafeHtmlComponent],
+                    imports: [CommonModule],
+                    exports: [SkyDocsSafeHtmlComponent],
+                }]
+        }] });
 
 /**
  * Formats type definitions into HTML-compatible strings.
  */
-let SkyDocsTypeDefinitionsFormatService = class SkyDocsTypeDefinitionsFormatService {
+class SkyDocsTypeDefinitionsFormatService {
     /**
      * Returns an HTML-formatted representation of the provided interface config.
      */
     getInterfaceSourceCode(definition) {
         const typeParameters = this.getFormattedTypeParameters(definition.typeParameters);
         const config = {
-            escapeSpecialCharacters: false
+            escapeSpecialCharacters: false,
         };
         let signature = `interface ${definition.name}${typeParameters} {`;
         signature += this.getFormattedInterfaceProperties(definition, config);
@@ -1421,7 +1282,7 @@ let SkyDocsTypeDefinitionsFormatService = class SkyDocsTypeDefinitionsFormatServ
      */
     getMethodSourceCode(definition) {
         const config = {
-            escapeSpecialCharacters: false
+            escapeSpecialCharacters: false,
         };
         const typeArguments = this.getFormattedTypeArguments(definition.type, config);
         const callSignature = definition.type.callSignature;
@@ -1429,7 +1290,7 @@ let SkyDocsTypeDefinitionsFormatService = class SkyDocsTypeDefinitionsFormatServ
         let params = '';
         if (callSignature.parameters) {
             params += callSignature.parameters
-                .map(p => this.getFormattedParameterName(p, config))
+                .map((p) => this.getFormattedParameterName(p, config))
                 .join(', ');
         }
         return `public ${definition.name}${typeArguments}(${params}): ${returnType}`;
@@ -1439,19 +1300,19 @@ let SkyDocsTypeDefinitionsFormatService = class SkyDocsTypeDefinitionsFormatServ
      */
     getTypeAliasSourceCode(definition) {
         const config = {
-            escapeSpecialCharacters: false
+            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
+                escapeSpecialCharacters: false,
             });
         }
         else if (definition.type.indexSignature) {
             const indexSignature = definition.type.indexSignature;
             const type = this.getFormattedType(indexSignature.type, {
-                escapeSpecialCharacters: false
+                escapeSpecialCharacters: false,
             });
             signature += `{\n  [${indexSignature.key.name}: string]: ${type};\n}`;
         }
@@ -1467,9 +1328,9 @@ let SkyDocsTypeDefinitionsFormatService = class SkyDocsTypeDefinitionsFormatServ
      * Returns a formatted string representing a parameter's name and value. For example: `'foo: string'`.
      */
     getFormattedParameterName(parameter, config = {
-        escapeSpecialCharacters: true
+        escapeSpecialCharacters: true,
     }) {
-        const optionalMarker = (parameter.isOptional) ? '?' : '';
+        const optionalMarker = parameter.isOptional ? '?' : '';
         const parameterType = this.getFormattedType(parameter.type, config);
         let signature = `${parameter.name}${optionalMarker}: ${parameterType}`;
         if (config.escapeSpecialCharacters) {
@@ -1528,7 +1389,7 @@ let SkyDocsTypeDefinitionsFormatService = class SkyDocsTypeDefinitionsFormatServ
      * Returns a formatted string representing the provided type.
      */
     getFormattedType(type, config = {
-        escapeSpecialCharacters: true
+        escapeSpecialCharacters: true,
     }) {
         let formatted = 'any';
         if (!type) {
@@ -1564,21 +1425,23 @@ let SkyDocsTypeDefinitionsFormatService = class SkyDocsTypeDefinitionsFormatServ
         return value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
     }
     getFormattedCallSignature(callSignature, config = {
-        escapeSpecialCharacters: true
+        escapeSpecialCharacters: true,
     }) {
         const returnType = this.getFormattedType(callSignature.returnType, config);
         if (!callSignature.parameters) {
             return `() => ${returnType}`;
         }
         const formattedParams = callSignature.parameters
-            .map(p => this.getFormattedParameterName(p, config))
+            .map((p) => this.getFormattedParameterName(p, config))
             .join(', ');
         return `(${formattedParams}) => ${returnType}`;
     }
     getFormattedUnion(typeConfig, config) {
-        return typeConfig.unionTypes.map(t => {
+        return typeConfig.unionTypes
+            .map((t) => {
             return this.getFormattedType(t, config);
-        }).join(' | ');
+        })
+            .join(' | ');
     }
     /**
      * Parse any type arguments e.g. `<T, F>`.
@@ -1587,7 +1450,7 @@ let SkyDocsTypeDefinitionsFormatService = class SkyDocsTypeDefinitionsFormatServ
         if (!typeConfig.typeArguments) {
             return '';
         }
-        const typeArguments = typeConfig.typeArguments.map(typeArgument => {
+        const typeArguments = typeConfig.typeArguments.map((typeArgument) => {
             if (typeArgument.type === 'array') {
                 return `${typeArgument.name}[]`;
             }
@@ -1602,7 +1465,7 @@ let SkyDocsTypeDefinitionsFormatService = class SkyDocsTypeDefinitionsFormatServ
         if (!typeParameters) {
             return '';
         }
-        const formatted = typeParameters.map(typeParameter => {
+        const formatted = typeParameters.map((typeParameter) => {
             let result = typeParameter.name;
             if (typeParameter.type && typeParameter.type.type === 'reference') {
                 result += ` extends ${typeParameter.type.name}`;
@@ -1613,9 +1476,9 @@ let SkyDocsTypeDefinitionsFormatService = class SkyDocsTypeDefinitionsFormatServ
     }
     getFormattedInterfaceProperties(definition, config) {
         let signature = '';
-        definition.properties.forEach(property => {
+        definition.properties.forEach((property) => {
             const indexSignature = property.type.indexSignature;
-            const optionalIndicator = (property.isOptional && !indexSignature) ? '?' : '';
+            const optionalIndicator = property.isOptional && !indexSignature ? '?' : '';
             const propertyType = this.getFormattedType(property.type, config);
             let name;
             if (indexSignature) {
@@ -1628,21 +1491,161 @@ let SkyDocsTypeDefinitionsFormatService = class SkyDocsTypeDefinitionsFormatServ
         });
         return signature;
     }
-};
-SkyDocsTypeDefinitionsFormatService = __decorate([
-    Injectable()
-], SkyDocsTypeDefinitionsFormatService);
+}
+SkyDocsTypeDefinitionsFormatService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsTypeDefinitionsFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsTypeDefinitionsFormatService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsTypeDefinitionsFormatService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsTypeDefinitionsFormatService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class SkyDocsTypeDefinitionsProvider {
+}
+SkyDocsTypeDefinitionsProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsTypeDefinitionsProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsTypeDefinitionsProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsTypeDefinitionsProvider });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsTypeDefinitionsProvider, decorators: [{
+            type: Injectable
+        }] });
 
 /**
- * "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.
- */
-let SkyDocsCallSignatureDefinitionComponent = class SkyDocsCallSignatureDefinitionComponent {
-    constructor(formatService) {
-        this.formatService = formatService;
-    }
-    set config(value) {
-        this._config = value;
+ * 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: "12.2.16", ngImport: i0, type: SkyDocsAnchorLinkService, deps: [{ token: SkyDocsTypeDefinitionsProvider }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsAnchorLinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsAnchorLinkService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsTypeAnchorLinksPipe, deps: [{ token: SkyDocsAnchorLinkService }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyDocsTypeAnchorLinksPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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() {
@@ -1650,61 +1653,122 @@ let SkyDocsCallSignatureDefinitionComponent = class SkyDocsCallSignatureDefiniti
     }
     updateView() {
         var _a, _b, _c;
-        this.parameters = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.parameters) === null || _b === void 0 ? void 0 : _b.map(p => {
+        this.parameters = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.parameters) === null || _b === void 0 ? void 0 : _b.map((p) => {
             const vm = {
                 defaultValue: p.defaultValue,
                 description: p.description,
                 formattedName: this.formatService.getFormattedParameterName(p),
-                isOptional: p.isOptional
+                isOptional: p.isOptional,
             };
             return vm;
         });
         this.returnTypeFormatted = this.formatService.getFormattedType((_c = this.config) === null || _c === void 0 ? void 0 : _c.returnType);
     }
-};
-SkyDocsCallSignatureDefinitionComponent.ctorParameters = () => [
-    { type: SkyDocsTypeDefinitionsFormatService }
-];
-__decorate([
-    Input()
-], SkyDocsCallSignatureDefinitionComponent.prototype, "config", null);
-SkyDocsCallSignatureDefinitionComponent = __decorate([
-    Component({
-        selector: 'sky-docs-call-signature-definition',
-        template: "<div *ngIf=\"config\"\n  class=\"sky-docs-call-signature-definition\"\n>\n  <ng-container *ngIf=\"parameters\">\n    <h4\n      class=\"sky-docs-call-signature-definition-heading\"\n    >\n      Parameters\n    </h4>\n    <table\n      class=\"sky-docs-parameter-definitions\"\n    >\n      <tbody>\n        <tr *ngFor=\"let parameter of parameters\">\n          <th\n            class=\"sky-docs-parameter-definition-header\"\n          >\n            <sky-code><span\n              [innerHtml]=\"parameter.formattedName | skyDocsTypeAnchorLinks:'no-code-tags'\"\n            ></span></sky-code>\n          </th>\n          <td\n            class=\"sky-docs-parameter-definition-body\"\n          >\n            <div *ngIf=\"parameter.description\"\n              class=\"sky-docs-parameter-definition-description\"\n            >\n              <sky-docs-safe-html *ngIf=\"parameter.description\"\n                [innerHtml]=\"parameter.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n              ></sky-docs-safe-html>\n            </div>\n            <div *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><span\n                  [innerHtml]=\"parameter.defaultValue | skyDocsTypeAnchorLinks:'no-code-tags'\"\n                ></span></sky-code>.\n              </ng-container>\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </ng-container>\n\n  <ng-container *ngIf=\"returnTypeFormatted\">\n    <h4\n      class=\"sky-docs-call-signature-definition-heading\"\n    >\n      Returns\n    </h4>\n\n    <div\n      class=\"sky-docs-call-signature-definition-return-type\"\n    >\n      <sky-code><span\n        [innerHtml]=\"returnTypeFormatted | skyDocsTypeAnchorLinks:'no-code-tags'\"\n      ></span></sky-code>\n    </div>\n  </ng-container>\n\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-docs-call-signature-definition-heading{line-height:1.1;font-family:\"Blackbaud Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#212327;margin:0 0 10px;font-weight:600;font-size:15px}.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 td,.sky-docs-parameter-definitions th{padding:10px;border-bottom:1px dotted #cdcfd2;vertical-align:top;text-align:left}.sky-docs-parameter-definitions td ::ng-deep:first-child .sky-code,.sky-docs-parameter-definitions th ::ng-deep:first-child .sky-code{display:inline-block;white-space:normal}.sky-docs-parameter-definitions td ::ng-deep p,.sky-docs-parameter-definitions th ::ng-deep p{margin:10px 0}.sky-docs-parameter-definitions td ::ng-deep p:first-child,.sky-docs-parameter-definitions th ::ng-deep p:first-child{margin-top:0!important}.sky-docs-parameter-definitions td ::ng-deep p:last-child,.sky-docs-parameter-definitions th ::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>td,.sky-docs-parameter-definitions tr:first-child>th{padding-top:0}.sky-docs-parameter-definitions tr:last-child>td,.sky-docs-parameter-definitions tr:last-child>th{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}"]
-    })
-], SkyDocsCallSignatureDefinitionComponent);
-
-let SkyDocsDirectiveDefinitionComponent = class SkyDocsDirectiveDefinitionComponent {
-};
-__decorate([
-    Input()
-], SkyDocsDirectiveDefinitionComponent.prototype, "config", void 0);
-SkyDocsDirectiveDefinitionComponent = __decorate([
-    Component({
-        selector: 'sky-docs-directive-definition',
-        template: "<div *ngIf=\"config\" class=\"sky-docs-directive-definition sky-docs-type-definition-wrapper\">\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html *ngIf=\"config.description\" class=\"sky-docs-directive-definition-description\" [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"></sky-docs-safe-html>\n\n  <h4 class=\"sky-docs-directive-definition-h4\">\n    Selector\n  </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\">\n      Example\n    </h4>\n    <sky-code-block class=\"sky-docs-code-block\" [code]=\"config.codeExample\" [hideHeader]=\"true\" [languageType]=\"config.codeExampleLanguage\" ngPreserveWhitespaces=\"true\">\n    </sky-code-block>\n  </ng-container>\n\n  <sky-docs-property-definitions *ngIf=\"config.inputProperties?.length\" propertyType=\"Input\" [config]=\"{\n      properties: config.inputProperties\n    }\"></sky-docs-property-definitions>\n\n  <sky-docs-property-definitions *ngIf=\"config.eventProperties?.length\" propertyType=\"Event\" [config]=\"{\n      properties: config.eventProperties\n    }\"></sky-docs-property-definitions>\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-docs-directive-definition-h4{line-height:1.1;font-family:\"Blackbaud Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#212327;margin:0 0 10px;font-weight:600;font-size:15px}.sky-docs-directive-selector{margin-left:15px!important;margin-top:10px!important}"]
-    })
-], SkyDocsDirectiveDefinitionComponent);
-
-let SkyDocsEnumerationDefinitionComponent = class SkyDocsEnumerationDefinitionComponent {
-};
-__decorate([
-    Input()
-], SkyDocsEnumerationDefinitionComponent.prototype, "config", void 0);
-SkyDocsEnumerationDefinitionComponent = __decorate([
-    Component({
-        selector: 'sky-docs-enumeration-definition',
-        template: "<div *ngIf=\"config\"\n  class=\"sky-docs-enumeration-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor\n    headingLevel=\"3\"\n    [anchorId]=\"config.anchorId\"\n  >\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html *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 *ngIf=\"config.members\"\n    propertyType=\"Member\"\n    [config]=\"{ properties: config.members }\"\n    [showOptionalStatus]=\"false\"\n  ></sky-docs-property-definitions>\n</div>",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], SkyDocsEnumerationDefinitionComponent);
-
-let SkyDocsInterfaceDefinitionComponent = class SkyDocsInterfaceDefinitionComponent {
+}
+SkyDocsCallSignatureDefinitionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsCallSignatureDefinitionComponent, deps: [{ token: SkyDocsTypeDefinitionsFormatService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsCallSignatureDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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:normal}.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: "12.2.16", ngImport: i0, type: SkyDocsCallSignatureDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-call-signature-definition',
+                    templateUrl: './call-signature-definition.component.html',
+                    styleUrls: ['./call-signature-definition.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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() {
+        var _a, _b;
+        this.properties = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.map((property) => {
+            var _a;
+            const vm = {
+                callSignature: (_a = property.type) === null || _a === void 0 ? void 0 : _a.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: "12.2.16", 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: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsPropertyDefinitionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-property-definitions',
+                    templateUrl: './property-definitions.component.html',
+                    styleUrls: ['./property-definitions.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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: "12.2.16", ngImport: i0, type: SkyDocsDirectiveDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDirectiveDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDirectiveDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-directive-definition',
+                    templateUrl: './directive-definition.component.html',
+                    styleUrls: ['./directive-definition.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class SkyDocsEnumerationDefinitionComponent {
+}
+SkyDocsEnumerationDefinitionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsEnumerationDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsEnumerationDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsEnumerationDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-enumeration-definition',
+                    templateUrl: './enumeration-definition.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class SkyDocsInterfaceDefinitionComponent {
     constructor(formatService) {
         this.formatService = formatService;
     }
@@ -1716,24 +1780,25 @@ let SkyDocsInterfaceDefinitionComponent = class SkyDocsInterfaceDefinitionCompon
         return this._config;
     }
     updateView() {
-        this.sourceCode = (this.config) ? this.formatService.getInterfaceSourceCode(this.config) : undefined;
+        this.sourceCode = this.config
+            ? this.formatService.getInterfaceSourceCode(this.config)
+            : undefined;
     }
-};
-SkyDocsInterfaceDefinitionComponent.ctorParameters = () => [
-    { type: SkyDocsTypeDefinitionsFormatService }
-];
-__decorate([
-    Input()
-], SkyDocsInterfaceDefinitionComponent.prototype, "config", null);
-SkyDocsInterfaceDefinitionComponent = __decorate([
-    Component({
-        selector: 'sky-docs-interface-definition',
-        template: "<div *ngIf=\"config\" class=\"sky-docs-interface-definition sky-docs-type-definition-wrapper\">\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html *ngIf=\"config.description\" class=\"sky-docs-interface-definition-description\" [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"></sky-docs-safe-html>\n\n  <sky-code-block *ngIf=\"sourceCode\" class=\"sky-docs-code-block\" languageType=\"typescript\" [code]=\"sourceCode\" [hideHeader]=\"true\" ngPreserveWhitespaces=\"true\"></sky-code-block>\n\n  <sky-docs-property-definitions *ngIf=\"config.properties\" [config]=\"{ properties: config.properties }\" [showOptionalStatus]=\"false\"></sky-docs-property-definitions>\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], SkyDocsInterfaceDefinitionComponent);
-
-let SkyDocsMethodDefinitionsComponent = class SkyDocsMethodDefinitionsComponent {
+}
+SkyDocsInterfaceDefinitionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsInterfaceDefinitionComponent, deps: [{ token: SkyDocsTypeDefinitionsFormatService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsInterfaceDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsInterfaceDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-interface-definition',
+                    templateUrl: './interface-definition.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: SkyDocsTypeDefinitionsFormatService }]; }, propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class SkyDocsMethodDefinitionsComponent {
     constructor(changeDetector, formatService, mediaQueryService) {
         this.changeDetector = changeDetector;
         this.formatService = formatService;
@@ -1750,13 +1815,13 @@ let SkyDocsMethodDefinitionsComponent = class SkyDocsMethodDefinitionsComponent
     }
     ngOnInit() {
         this.mediaQueryService.subscribe((breakpoints) => {
-            this.isMobile = (breakpoints <= SkyMediaBreakpoints.sm);
+            this.isMobile = breakpoints <= SkyMediaBreakpoints.sm;
             this.changeDetector.markForCheck();
         });
     }
     updateView() {
         var _a, _b;
-        this.methods = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.methods) === null || _b === void 0 ? void 0 : _b.map(method => {
+        this.methods = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.methods) === null || _b === void 0 ? void 0 : _b.map((method) => {
             const vm = {
                 callSignature: method.type.callSignature,
                 codeExample: method.codeExample,
@@ -1764,161 +1829,378 @@ let SkyDocsMethodDefinitionsComponent = class SkyDocsMethodDefinitionsComponent
                 deprecationWarning: method.deprecationWarning,
                 description: method.description,
                 formattedName: this.formatService.getFormattedMethodName(method),
-                sourceCode: this.formatService.getMethodSourceCode(method)
+                sourceCode: this.formatService.getMethodSourceCode(method),
             };
             return vm;
         });
     }
-};
-SkyDocsMethodDefinitionsComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: SkyDocsTypeDefinitionsFormatService },
-    { type: SkyMediaQueryService }
-];
-__decorate([
-    Input()
-], SkyDocsMethodDefinitionsComponent.prototype, "config", null);
-SkyDocsMethodDefinitionsComponent = __decorate([
-    Component({
-        selector: 'sky-docs-method-definitions',
-        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 class=\"sky-docs-table-column-header sky-docs-table-column-header-name\">\n        Methods\n      </th>\n      <th class=\"sky-docs-table-column-header sky-docs-table-column-header-description\">\n        Description\n      </th>\n    </tr>\n    <tr *ngFor=\"let method of methods\" class=\"sky-docs-table-row\">\n      <td class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-name\">\n        <ng-template [ngTemplateOutlet]=\"nameTemplate\" [ngTemplateOutletContext]=\"{$implicit: method}\"></ng-template>\n      </td>\n      <td class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-description\">\n        <ng-template [ngTemplateOutlet]=\"descriptionTemplate\" [ngTemplateOutletContext]=\"{$implicit: method}\"></ng-template>\n      </td>\n    </tr>\n  </table>\n\n  <ng-template #mobileTemplate>\n    <dl class=\"sky-docs-method-definition-list\">\n      <div *ngFor=\"let method of methods\" class=\"sky-docs-method-definition-list-item\">\n        <dt class=\"sky-field-label\">\n          Methods\n        </dt>\n        <dd class=\"sky-docs-method-definitions-dd-name\">\n          <ng-template [ngTemplateOutlet]=\"nameTemplate\" [ngTemplateOutletContext]=\"{$implicit: method}\"></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-method-definitions-dd-description\">\n          <ng-template [ngTemplateOutlet]=\"descriptionTemplate\" [ngTemplateOutletContext]=\"{$implicit: method}\"></ng-template>\n        </dd>\n      </div>\n    </dl>\n  </ng-template>\n</div>\n\n<ng-template let-method #nameTemplate>\n  <sky-code><span [innerHtml]=\"method.formattedName | skyDocsTypeAnchorLinks:'no-code-tags'\"></span></sky-code>\n</ng-template>\n\n<ng-template let-method #descriptionTemplate>\n\n  <sky-docs-safe-html *ngIf=\"method.deprecationWarning !== undefined\" class=\"sky-docs-method-definition-deprecation-warning\" [innerHtml]=\"deprecationWarningPrefix + method.deprecationWarning | skyDocsTypeAnchorLinks | skyDocsMarkdown\"></sky-docs-safe-html>\n\n  <sky-docs-safe-html *ngIf=\"method.description\" class=\"sky-docs-method-definition-description\" [innerHtml]=\"method.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"></sky-docs-safe-html>\n\n  <sky-code-block *ngIf=\"method.sourceCode\" class=\"sky-docs-code-block\" languageType=\"typescript\" [code]=\"method.sourceCode\" [hideHeader]=\"true\" ngPreserveWhitespaces=\"true\"></sky-code-block>\n\n  <sky-docs-call-signature-definition *ngIf=\"method.callSignature\" [config]=\"method.callSignature\"></sky-docs-call-signature-definition>\n\n  <ng-container *ngIf=\"method.codeExample\">\n    <h4 class=\"sky-docs-method-definition-heading\">\n      Example\n    </h4>\n    <sky-code-block *ngIf=\"method.codeExample\" class=\"sky-docs-code-block\" languageType=\"method.codeExampleLanguage\" [code]=\"method.codeExample\" [hideHeader]=\"true\" ngPreserveWhitespaces=\"true\"></sky-code-block>\n  </ng-container>\n</ng-template>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        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}"]
-    })
-], SkyDocsMethodDefinitionsComponent);
-
-let SkyDocsPipeDefinitionComponent = class SkyDocsPipeDefinitionComponent {
-};
-__decorate([
-    Input()
-], SkyDocsPipeDefinitionComponent.prototype, "config", void 0);
-SkyDocsPipeDefinitionComponent = __decorate([
-    Component({
-        selector: 'sky-docs-pipe-definition',
-        template: "<div *ngIf=\"config\" class=\"sky-docs-pipe-definition sky-docs-type-definition-wrapper\">\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html *ngIf=\"config.description\" [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"></sky-docs-safe-html>\n\n  <ng-container *ngIf=\"config.codeExample\">\n    <h4 class=\"sky-docs-pipe-definition-heading\">\n      Example\n    </h4>\n    <sky-code-block class=\"sky-docs-code-block\" [code]=\"config.codeExample\" [hideHeader]=\"true\" [languageType]=\"config.codeExampleLanguage\" ngPreserveWhitespaces=\"true\"></sky-code-block>\n  </ng-container>\n\n  <sky-docs-method-definitions [config]=\"{\n      methods: [config.transformMethod]\n    }\"></sky-docs-method-definitions>\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-docs-pipe-definition-heading{line-height:1.1;font-family:\"Blackbaud Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#212327;margin:0 0 10px;font-weight:600;font-size:15px}"]
-    })
-], SkyDocsPipeDefinitionComponent);
-
-let SkyDocsPropertyDefinitionsComponent = class SkyDocsPropertyDefinitionsComponent {
-    constructor(changeDetector, formatService, mediaQueryService) {
-        this.changeDetector = changeDetector;
+}
+SkyDocsMethodDefinitionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsMethodDefinitionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-method-definitions',
+                    templateUrl: './method-definitions.component.html',
+                    styleUrls: ['./method-definitions.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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: "12.2.16", ngImport: i0, type: SkyDocsPipeDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsPipeDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsPipeDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-pipe-definition',
+                    templateUrl: './pipe-definition.component.html',
+                    styleUrls: ['./pipe-definition.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class SkyDocsClassDefinitionComponent {
+}
+SkyDocsClassDefinitionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsClassDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsClassDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsClassDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-class-definition',
+                    templateUrl: './class-definition.component.html',
+                    styleUrls: ['./class-definition.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class SkyDocsTypeAliasDefinitionComponent {
+    constructor(formatService) {
         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();
-        });
+        return this._config;
     }
     updateView() {
-        var _a, _b;
-        this.properties = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.map(property => {
-            var _a;
-            const vm = {
-                callSignature: (_a = property.type) === null || _a === void 0 ? void 0 : _a.callSignature,
-                defaultValue: this.formatService.escapeSpecialCharacters(property.defaultValue || ''),
-                deprecationWarning: property.deprecationWarning,
-                description: property.description,
-                formattedName: this.formatService.getFormattedPropertyName(property),
-                isOptional: property.isOptional
-            };
-            return vm;
+        this.sourceCode = this.config
+            ? this.formatService.getTypeAliasSourceCode(this.config)
+            : undefined;
+    }
+}
+SkyDocsTypeAliasDefinitionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsTypeAliasDefinitionComponent, deps: [{ token: SkyDocsTypeDefinitionsFormatService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsTypeAliasDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsTypeAliasDefinitionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-type-alias-definition',
+                    templateUrl: './type-alias-definition.component.html',
+                    styleUrls: ['./type-alias-definition.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: SkyDocsTypeDefinitionsFormatService }]; }, propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class SkyDocsTypeDefinitionsModule {
+}
+SkyDocsTypeDefinitionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsTypeDefinitionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsTypeDefinitionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsTypeDefinitionsModule, imports: [[
+            CommonModule,
+            RouterModule,
+            SkyCodeBlockModule,
+            SkyCodeModule,
+            SkyDefinitionListModule,
+            SkyDocsHeadingAnchorModule,
+            SkyDocsMarkdownModule,
+            SkyDocsSafeHtmlModule,
+            SkyIconModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDemoPageSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoPageSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDemoPageSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-demo-page-section',
+                    templateUrl: './demo-page-section.component.html',
+                    styleUrls: ['./demo-page-section.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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: "12.2.16", ngImport: i0, type: SkyDocsDemoPageSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoPageSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDemoPageSummaryComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-demo-page-summary',
+                    templateUrl: './demo-page-summary.component.html',
+                    styleUrls: ['./demo-page-summary.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class SkyDocsDesignGuidelinesComponent {
+}
+SkyDocsDesignGuidelinesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsDesignGuidelinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDesignGuidelinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDesignGuidelinesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-design-guidelines',
+                    templateUrl: './design-guidelines.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+/**
+ * @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);
+            }
         });
     }
-};
-SkyDocsPropertyDefinitionsComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: SkyDocsTypeDefinitionsFormatService },
-    { type: SkyMediaQueryService }
-];
-__decorate([
-    Input()
-], SkyDocsPropertyDefinitionsComponent.prototype, "config", null);
-__decorate([
-    Input()
-], SkyDocsPropertyDefinitionsComponent.prototype, "propertyType", void 0);
-__decorate([
-    Input()
-], SkyDocsPropertyDefinitionsComponent.prototype, "showOptionalStatus", void 0);
-SkyDocsPropertyDefinitionsComponent = __decorate([
-    Component({
-        selector: 'sky-docs-property-definitions',
-        template: "<div *ngIf=\"properties\"\n  class=\"sky-docs-property-definitions\"\n>\n  <table *ngIf=\"!isMobile else mobileTemplate\"\n    class=\"sky-docs-table\"\n  >\n    <tr\n      class=\"sky-docs-table-row\"\n    >\n      <th\n        class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n      >\n        {{ propertyType }}\n      </th>\n      <th\n        class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n      >\n        Description\n      </th>\n    </tr>\n    <tr *ngFor=\"let property of properties\"\n      class=\"sky-docs-table-row\"\n    >\n      <td\n        class=\"sky-docs-table-cell sky-docs-property-definitions-table-cell-name\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"nameTemplate\"\n          [ngTemplateOutletContext]=\"{$implicit: property}\"\n        ></ng-template>\n      </td>\n      <td\n        class=\"sky-docs-table-cell sky-docs-property-definitions-table-cell-description\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"descriptionTemplate\"\n          [ngTemplateOutletContext]=\"{$implicit: property}\"\n        ></ng-template>\n      </td>\n    </tr>\n  </table>\n\n  <ng-template #mobileTemplate>\n    <dl\n      class=\"sky-docs-property-definition-list\"\n    >\n      <div *ngFor=\"let property of properties\"\n        class=\"sky-docs-property-definition-list-item\"\n      >\n        <dt\n          class=\"sky-field-label\"\n        >{{ propertyType }}</dt>\n        <dd\n          class=\"sky-docs-property-definitions-dd-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{$implicit: property}\"\n          ></ng-template>\n        </dd>\n        <dt\n          class=\"sky-field-label\"\n        >Description</dt>\n        <dd\n          class=\"sky-docs-property-definitions-dd-description\"\n        >\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><span\n    [innerHtml]=\"property.formattedName | skyDocsTypeAnchorLinks:'no-code-tags'\"\n  ></span></sky-code>\n</ng-template>\n\n<ng-template let-property #descriptionTemplate>\n  <div *ngIf=\"!property.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label sky-text-danger\"\n  >Required.</div>\n\n  <sky-docs-safe-html *ngIf=\"property.deprecationWarning !== undefined\"\n    class=\"sky-docs-property-definitions-deprecation-warning\"\n    [innerHtml]=\"deprecationWarningPrefix + property.deprecationWarning | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-docs-safe-html *ngIf=\"property.description\"\n    class=\"sky-docs-property-definitions-description\"\n    [innerHtml]=\"property.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <div *ngIf=\"property.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label sky-docs-property-definition-label-optional\"\n  >\n    Optional. <ng-container *ngIf=\"property.defaultValue\">Default is <sky-code><span\n    [innerHtml]=\"property.defaultValue | skyDocsTypeAnchorLinks:'no-code-tags'\"\n    ></span></sky-code>.</ng-container>\n  </div>\n\n  <sky-docs-call-signature-definition *ngIf=\"property.callSignature\"\n    [config]=\"property.callSignature\"\n  ></sky-docs-call-signature-definition>\n</ng-template>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        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}"]
-    })
-], SkyDocsPropertyDefinitionsComponent);
-
-let SkyDocsClassDefinitionComponent = class SkyDocsClassDefinitionComponent {
-};
-__decorate([
-    Input()
-], SkyDocsClassDefinitionComponent.prototype, "config", void 0);
-SkyDocsClassDefinitionComponent = __decorate([
-    Component({
-        selector: 'sky-docs-class-definition',
-        template: "<div *ngIf=\"config\"\n  class=\"sky-docs-class-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor\n    headingLevel=\"3\"\n    [anchorId]=\"config.anchorId\"\n  >\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html *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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-docs-class-definition-heading{line-height:1.1;font-family:\"Blackbaud Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#212327;margin:0 0 10px;font-weight:600;font-size:15px}.sky-docs-class-definition-return-type{margin-left:15px}"]
-    })
-], SkyDocsClassDefinitionComponent);
-
-let SkyDocsTypeAliasDefinitionComponent = class SkyDocsTypeAliasDefinitionComponent {
-    constructor(formatService) {
-        this.formatService = formatService;
+    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: "12.2.16", ngImport: i0, type: SkyDocsDemoPageDomAdapterService, deps: [{ token: i2$4.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsDemoPageDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsDemoPageDomAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsDemoPageDomAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i2$4.SkyAppWindowRef }]; } });
+
+class SkyDocsSupportalService {
+    constructor(http) {
+        this.http = http;
     }
-    set config(value) {
-        this._config = value;
-        this.updateView();
+    getComponentsInfo() {
+        return this.http
+            .get('https://sky-pusa01.app.blackbaud.net/skysp/v1/docs/components-info')
+            .pipe(map((results) => results.components), share());
     }
-    get config() {
-        return this._config;
+}
+SkyDocsSupportalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsSupportalService, deps: [{ token: i1$5.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsSupportalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsSupportalService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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;
     }
-    updateView() {
-        this.sourceCode = (this.config) ? this.formatService.getTypeAliasSourceCode(this.config) : undefined;
+    setTitle(...parts) {
+        let windowTitle = 'SKY UX';
+        if (parts && parts.length > 0) {
+            parts.push(windowTitle);
+            windowTitle = parts.join(' - ');
+        }
+        this.title.setTitle(windowTitle);
     }
-};
-SkyDocsTypeAliasDefinitionComponent.ctorParameters = () => [
-    { type: SkyDocsTypeDefinitionsFormatService }
-];
-__decorate([
-    Input()
-], SkyDocsTypeAliasDefinitionComponent.prototype, "config", null);
-SkyDocsTypeAliasDefinitionComponent = __decorate([
-    Component({
-        selector: 'sky-docs-type-alias-definition',
-        template: "<div *ngIf=\"config\" class=\"sky-docs-type-alias-definition sky-docs-type-definition-wrapper\">\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html *ngIf=\"config.description\" class=\"sky-docs-type-alias-definition-description\" [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"></sky-docs-safe-html>\n\n  <sky-code-block *ngIf=\"sourceCode\" class=\"sky-docs-code-block\" languageType=\"typescript\" [code]=\"sourceCode\" [hideHeader]=\"true\" ngPreserveWhitespaces=\"true\"></sky-code-block>\n\n  <sky-docs-call-signature-definition *ngIf=\"config.type.callSignature\" [config]=\"config.type.callSignature\"></sky-docs-call-signature-definition>\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-docs-type-alias-definition-heading{line-height:1.1;font-family:\"Blackbaud Sans\",\"Helvetica Neue\",Arial,sans-serif;color:#212327;margin:0 0 10px;font-weight:600;font-size:15px}.sky-docs-type-alias-definition-return-type{margin-left:15px}"]
-    })
-], SkyDocsTypeAliasDefinitionComponent);
+}
+SkyDocsDemoPageTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsDemoPageTitleService, deps: [{ token: i1$4.Title }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsDemoPageTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsDemoPageTitleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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.
  */
-let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
+class SkyDocsTypeDocAdapterService {
     constructor(typeDefinitionsProvider) {
         this.typeDefinitionsProvider = typeDefinitionsProvider;
     }
     toClassDefinition(entry) {
         const definition = {
             anchorId: this.getAnchorId(entry),
-            name: entry.name
+            name: entry.name,
         };
         const tags = this.getCommentTags(entry.comment);
         this.applyCommentTagValues(definition, tags);
@@ -1936,16 +2218,16 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
         const definition = {
             anchorId: this.getAnchorId(entry),
             name: entry.name,
-            selector: this.getSelector(entry)
+            selector: this.getSelector(entry),
         };
         const tags = this.getCommentTags(entry.comment);
         this.applyCommentTagValues(definition, tags);
         const properties = this.getClassProperties(entry);
-        const eventProperties = properties.filter(p => { var _a; return ((_a = p.decorator) === null || _a === void 0 ? void 0 : _a.name) === 'Output'; });
+        const eventProperties = properties.filter((p) => { var _a; return ((_a = p.decorator) === null || _a === void 0 ? void 0 : _a.name) === 'Output'; });
         if (eventProperties.length) {
             definition.eventProperties = eventProperties;
         }
-        const inputProperties = properties.filter(p => { var _a; return ((_a = p.decorator) === null || _a === void 0 ? void 0 : _a.name) === 'Input'; });
+        const inputProperties = properties.filter((p) => { var _a; return ((_a = p.decorator) === null || _a === void 0 ? void 0 : _a.name) === 'Input'; });
         if (inputProperties.length) {
             definition.inputProperties = inputProperties;
         }
@@ -1956,7 +2238,7 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
         const definition = {
             anchorId: this.getAnchorId(entry),
             members,
-            name: entry.name
+            name: entry.name,
         };
         const tags = this.getCommentTags(entry.comment);
         this.applyCommentTagValues(definition, tags);
@@ -1967,7 +2249,7 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
         const definition = {
             anchorId: this.getAnchorId(entry),
             name: entry.name,
-            properties
+            properties,
         };
         const tags = this.getCommentTags(entry.comment);
         this.applyCommentTagValues(definition, tags);
@@ -1979,26 +2261,29 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
     }
     toPipeDefinition(entry) {
         const methods = this.getClassMethods(entry);
-        const transformMethod = methods.find(m => m.name === 'transform');
+        const transformMethod = methods.find((m) => m.name === 'transform');
         const definition = {
             anchorId: this.getAnchorId(entry),
             name: entry.name,
-            transformMethod
+            transformMethod,
         };
         const tags = this.getCommentTags(entry.comment);
         this.applyCommentTagValues(definition, tags);
         return definition;
     }
     toTypeAliasDefinition(entry) {
+        var _a;
         const definition = {
             anchorId: this.getAnchorId(entry),
             name: entry.name,
             type: this.getTypeDefinition({
                 comment: entry.comment,
-                type: entry.type
-            })
+                type: entry.type,
+            }),
         };
-        const tags = this.getCommentTags(entry.comment);
+        const tags = this.getCommentTags(((_a = entry.type.declaration) === null || _a === void 0 ? void 0 : _a.signatures)
+            ? entry.type.declaration.signatures[0].comment
+            : entry.comment);
         this.applyCommentTagValues(definition, tags);
         const typeParameters = this.getTypeParameterDefinitions(entry.typeParameter);
         if (typeParameters.length) {
@@ -2008,31 +2293,88 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
     }
     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];
+        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 => {
-            const tags = this.getCommentTags(child.comment);
-            const definition = {
-                isOptional: !tags.extras.required,
+            .filter((child) => child.kindString === 'Property' || child.kindString === 'Accessor')
+            .map((child) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            let definition = {
+                isOptional: true,
                 name: this.getPropertyName(child),
-                type: this.getTypeDefinition(child)
+                type: this.getTypeDefinition(child),
             };
-            this.applyCommentTagValues(definition, tags);
+            let defaultValue;
+            /* Ensure we are properly capturing definitions which use a getter/setter. Final check is a sanity check */
+            if (child.kindString === 'Accessor' &&
+                !((_a = child.comment) === null || _a === void 0 ? void 0 : _a.shortText) &&
+                (((_b = child.setSignature) === null || _b === void 0 ? void 0 : _b.length) > 0 || child.getSignature.length > 0)) {
+                const mainTags = this.getCommentTags(child.comment);
+                this.applyCommentTagValues(definition, mainTags);
+                if (((_c = child.getSignature) === null || _c === void 0 ? void 0 : _c.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 (((_d = child.setSignature) === null || _d === void 0 ? void 0 : _d.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' &&
+                    !((_e = child.comment) === null || _e === void 0 ? void 0 : _e.shortText) &&
+                    ((_g = (_f = child.type.declaration) === null || _f === void 0 ? void 0 : _f.signatures) === null || _g === void 0 ? void 0 : _g.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;
             }
-            const defaultValue = this.getDefaultValue(child, tags);
-            if (defaultValue) {
-                definition.defaultValue = defaultValue;
+            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;
         });
@@ -2043,11 +2385,11 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
             return [];
         }
         const methods = entry.children
-            .filter(child => child.kindString === 'Method' && /^ng/.test(child.name) === false)
-            .map(child => {
+            .filter((child) => child.kindString === 'Method' && /^ng/.test(child.name) === false)
+            .map((child) => {
             const definition = {
                 name: this.getPropertyName(child),
-                type: this.getTypeDefinition(child)
+                type: this.getTypeDefinition(child),
             };
             // Comments for methods are stored in a different location.
             const comment = child.signatures[0].comment;
@@ -2066,13 +2408,19 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
         if (!entry.children && !entry.indexSignature) {
             return [];
         }
-        const definitions = ((_a = entry.children) === null || _a === void 0 ? void 0 : _a.map(child => {
+        const definitions = ((_a = entry.children) === null || _a === void 0 ? void 0 : _a.map((child) => {
             var _a;
-            const tags = this.getCommentTags(child.comment);
+            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 : !!((_a = child.flags) === null || _a === void 0 ? void 0 : _a.isOptional),
+                isOptional: tags.extras.required ? false : !!((_a = child.flags) === null || _a === void 0 ? void 0 : _a.isOptional),
                 name: this.getPropertyName(child),
-                type: this.getTypeDefinition(child)
+                type: this.getTypeDefinition(child),
             };
             this.applyCommentTagValues(definition, tags);
             return definition;
@@ -2080,13 +2428,13 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
         const sorted = orderBy(definitions, ['isOptional', 'name'], ['asc', 'asc']);
         // Add any index signatures, e.g. `[_: string]: any`
         if (entry.indexSignature) {
-            const indexSignature = entry.indexSignature[0];
+            const indexSignature = entry.indexSignature;
             const definition = {
                 isOptional: true,
                 name: indexSignature.name,
                 type: {
-                    indexSignature: this.getIndexSignatureDefinition(indexSignature)
-                }
+                    indexSignature: this.getIndexSignatureDefinition(indexSignature),
+                },
             };
             const tags = this.getCommentTags(indexSignature.comment);
             this.applyCommentTagValues(definition, tags);
@@ -2098,9 +2446,9 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
         if (!entry.children) {
             return [];
         }
-        return entry.children.map(child => {
+        return entry.children.map((child) => {
             const definition = {
-                name: child.name
+                name: child.name,
             };
             const tags = this.getCommentTags(child.comment);
             this.applyCommentTagValues(definition, tags);
@@ -2120,20 +2468,20 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
             case 'Method':
                 definition = {
                     callSignature: this.getCallSignatureDefinition(child.signatures[0], this.getCommentTags(child.comment)),
-                    name: child.signatures[0].name
+                    name: child.signatures[0].name,
                 };
                 return definition;
             default:
                 let name = child.type.name || ((_a = child.type.elementType) === null || _a === void 0 ? void 0 : _a.name) || child.type.value;
                 definition = {
-                    type: child.type.type
+                    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 }));
+                    definition.unionTypes = child.type.types.map((t) => this.getTypeDefinition({ type: t }));
                 }
                 // Convert reflection types.
                 if (child.type.type === 'reflection') {
@@ -2144,14 +2492,15 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
                             definition.callSignature = this.getCallSignatureDefinition(declaration.signatures[0], this.getCommentTags(child.comment));
                         }
                         else if (declaration.indexSignature) {
-                            const indexSignature = declaration.indexSignature[0];
-                            definition.indexSignature = this.getIndexSignatureDefinition(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
-                                })
+                                    children: declaration.children,
+                                }),
                             };
                         }
                     }
@@ -2169,7 +2518,7 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
         if (!callSignature.parameters) {
             return [];
         }
-        const parameters = callSignature.parameters.map(p => {
+        const parameters = callSignature.parameters.map((p) => {
             var _a;
             const tags = this.getParameterCommentTags(p, parentTags);
             const defaultValue = this.getDefaultValue(p, tags);
@@ -2177,7 +2526,7 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
             const parameter = {
                 isOptional: !!(defaultValue || !!((_a = p.flags) === null || _a === void 0 ? void 0 : _a.isOptional)),
                 name: p.name,
-                type: this.getTypeDefinition(p)
+                type: this.getTypeDefinition(p),
             };
             if (defaultValue !== undefined) {
                 parameter.defaultValue = defaultValue;
@@ -2202,7 +2551,7 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
     }
     getCallSignatureDefinition(callSignature, tags) {
         const definition = {
-            returnType: this.getTypeDefinition(callSignature)
+            returnType: this.getTypeDefinition(callSignature),
         };
         const parameters = this.getParameterDefinitions(callSignature, tags);
         if (parameters.length) {
@@ -2214,22 +2563,22 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
         return {
             key: {
                 name: signature.parameters[0].name,
-                type: this.getTypeDefinition(signature.parameters[0])
+                type: this.getTypeDefinition(signature.parameters[0]),
             },
-            type: this.getTypeDefinition(signature)
+            type: this.getTypeDefinition(signature),
         };
     }
     getTypeParameterDefinitions(typeParameters) {
         if (!typeParameters) {
             return [];
         }
-        return typeParameters.map(typeParam => {
+        return typeParameters.map((typeParam) => {
             const definition = {
-                name: typeParam.name
+                name: typeParam.name,
             };
             if (typeParam.type) {
                 definition.type = this.getTypeDefinition({
-                    type: typeParam.type
+                    type: typeParam.type,
                 });
             }
             return definition;
@@ -2245,7 +2594,7 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
         const extras = {};
         if (comment) {
             if (comment.tags) {
-                comment.tags.forEach(tag => {
+                comment.tags.forEach((tag) => {
                     switch (tag.tag) {
                         case 'deprecated':
                             deprecationWarning = tag.text.trim();
@@ -2266,7 +2615,7 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
                             parameters = parameters || [];
                             parameters.push({
                                 name: tag.param,
-                                description: tag.text.trim()
+                                description: tag.text.trim(),
                             });
                             break;
                         default:
@@ -2284,7 +2633,7 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
             deprecationWarning,
             description,
             extras,
-            parameters
+            parameters,
         };
     }
     /**
@@ -2293,12 +2642,14 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
     getParameterCommentTags(parameter, parentTags) {
         const tags = this.getCommentTags(parameter.comment);
         const paramTags = parentTags.parameters;
-        const tagParam = (paramTags) ? paramTags.find((param) => param.name === parameter.name) : undefined;
+        const tagParam = paramTags
+            ? paramTags.find((param) => param.name === parameter.name)
+            : undefined;
         if (!tagParam || !tagParam.description) {
             return tags;
         }
         return Object.assign(Object.assign({}, tags), {
-            description: tagParam.description
+            description: tagParam.description,
         });
     }
     /**
@@ -2345,21 +2696,26 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
     }
     getAnchorId(entry) {
         var _a;
-        return entry.anchorId || ((_a = this.typeDefinitionsProvider) === null || _a === void 0 ? void 0 : _a.anchorIds[entry.name]) || '';
+        return (entry.anchorId ||
+            ((_a = this.typeDefinitionsProvider) === null || _a === void 0 ? void 0 : _a.anchorIds[entry.name]) ||
+            '');
     }
-};
-SkyDocsTypeDocAdapterService.ctorParameters = () => [
-    { type: SkyDocsTypeDefinitionsProvider, decorators: [{ type: Optional }] }
-];
-SkyDocsTypeDocAdapterService = __decorate([
-    Injectable(),
-    __param(0, Optional())
-], SkyDocsTypeDocAdapterService);
+}
+SkyDocsTypeDocAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsTypeDocAdapterService, deps: [{ token: SkyDocsTypeDefinitionsProvider, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsTypeDocAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsTypeDocAdapterService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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.
  */
-let SkyDocsTypeDefinitionsService = class SkyDocsTypeDefinitionsService {
+class SkyDocsTypeDefinitionsService {
     constructor(typeDefinitionsProvider, adapter) {
         this.typeDefinitionsProvider = typeDefinitionsProvider;
         this.adapter = adapter;
@@ -2369,14 +2725,19 @@ let SkyDocsTypeDefinitionsService = class SkyDocsTypeDefinitionsService {
      * @param sourceCodePath The directory of the source code you wish to pull type definitions from,
      * relative to the application's root directory.
      */
-    getTypeDefinitions(sourceCodePath) {
-        if (sourceCodePath.charAt(sourceCodePath.length - 1) !== '/') {
-            throw new Error('The source code path must end with a forward slash (`/`).');
-        }
+    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 requestedDir = sourceCodePath
-            .replace(/src\/app\/public\//, '')
-            .replace(/^\//, ''); // remove first slash.
         const types = {
             classes: [],
             components: [],
@@ -2385,323 +2746,98 @@ let SkyDocsTypeDefinitionsService = class SkyDocsTypeDefinitionsService {
             interfaces: [],
             pipes: [],
             services: [],
-            typeAliases: []
+            typeAliases: [],
         };
         if (!allDefinitions) {
             console.warn(`No types were found for this project!`);
             return types;
         }
-        // Only process types that match the requested source code location.
-        const typeDefinitions = allDefinitions.filter((i) => 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;
-                    }
+        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.ctorParameters = () => [
-    { type: SkyDocsTypeDefinitionsProvider },
-    { type: SkyDocsTypeDocAdapterService }
-];
-SkyDocsTypeDefinitionsService = __decorate([
-    Injectable()
-], SkyDocsTypeDefinitionsService);
-
-/**
- * Adds same-page anchor tags around known TypeScript types.
- */
-let SkyDocsTypeAnchorLinksPipe = class SkyDocsTypeAnchorLinksPipe {
-    constructor(anchorLinkService) {
-        this.anchorLinkService = anchorLinkService;
-    }
-    transform(value, formatType) {
-        const anchorLinkConfig = {
-            applyCodeFormatting: (formatType !== 'no-code-tags')
-        };
-        return this.anchorLinkService.applyTypeAnchorLinks(value, anchorLinkConfig);
-    }
-};
-SkyDocsTypeAnchorLinksPipe.ctorParameters = () => [
-    { type: SkyDocsAnchorLinkService }
-];
-SkyDocsTypeAnchorLinksPipe = __decorate([
-    Pipe({
-        name: 'skyDocsTypeAnchorLinks',
-        pure: true
-    })
-], SkyDocsTypeAnchorLinksPipe);
-
-let SkyDocsTypeDefinitionsModule = class SkyDocsTypeDefinitionsModule {
-};
-SkyDocsTypeDefinitionsModule = __decorate([
-    NgModule({
-        imports: [
-            CommonModule,
-            RouterModule,
-            SkyCodeBlockModule,
-            SkyCodeModule,
-            SkyDefinitionListModule,
-            SkyDocsHeadingAnchorModule,
-            SkyDocsMarkdownModule,
-            SkyDocsSafeHtmlModule,
-            SkyIconModule,
-            SkyMediaQueryModule
-        ],
-        declarations: [
-            SkyDocsCallSignatureDefinitionComponent,
-            SkyDocsClassDefinitionComponent,
-            SkyDocsDirectiveDefinitionComponent,
-            SkyDocsEnumerationDefinitionComponent,
-            SkyDocsInterfaceDefinitionComponent,
-            SkyDocsMethodDefinitionsComponent,
-            SkyDocsPipeDefinitionComponent,
-            SkyDocsPropertyDefinitionsComponent,
-            SkyDocsTypeAliasDefinitionComponent,
-            SkyDocsTypeAnchorLinksPipe
-        ],
-        exports: [
-            SkyDocsCallSignatureDefinitionComponent,
-            SkyDocsClassDefinitionComponent,
-            SkyDocsDirectiveDefinitionComponent,
-            SkyDocsEnumerationDefinitionComponent,
-            SkyDocsInterfaceDefinitionComponent,
-            SkyDocsMethodDefinitionsComponent,
-            SkyDocsPipeDefinitionComponent,
-            SkyDocsPropertyDefinitionsComponent,
-            SkyDocsTypeAliasDefinitionComponent,
-            SkyDocsTypeAnchorLinksPipe
-        ],
-        providers: [
-            SkyDocsAnchorLinkService,
-            SkyDocsTypeAnchorLinksPipe,
-            SkyDocsTypeDefinitionsFormatService,
-            SkyDocsTypeDefinitionsProvider,
-            SkyDocsTypeDefinitionsService,
-            SkyDocsTypeDocAdapterService
-        ]
-    })
-], SkyDocsTypeDefinitionsModule);
-
-/**
- * Specifies a section of page content.
- * @example
- * ```
- * <sky-docs-demo-page-section
- *   heading="Section heading"
- * >
- *   Section content here.
- * </sky-docs-demo-page-section>
- * ```
- */
-let SkyDocsDemoPageSectionComponent = 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;
-    }
-};
-__decorate([
-    Input()
-], SkyDocsDemoPageSectionComponent.prototype, "heading", void 0);
-SkyDocsDemoPageSectionComponent = __decorate([
-    Component({
-        selector: 'sky-docs-demo-page-section',
-        template: "<div class=\"sky-docs-demo-page-section sky-rounded-corners\">\n  <div *ngIf=\"heading\"\n    class=\"sky-docs-demo-page-section-header\"\n  >\n    <sky-docs-heading-anchor\n      headingLevel=\"2\"\n      [anchorId]=\"anchorId\"\n    >\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>",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-docs-demo-page-section{margin-bottom:50px}"]
-    })
-], SkyDocsDemoPageSectionComponent);
-
-/**
- * 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>
- * ```
- */
-let SkyDocsDemoPageSummaryComponent = class SkyDocsDemoPageSummaryComponent {
-};
-SkyDocsDemoPageSummaryComponent = __decorate([
-    Component({
-        selector: 'sky-docs-demo-page-summary',
-        template: "<div class=\"sky-docs-demo-page-summary\">\n  <ng-content></ng-content>\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-docs-demo-page-summary{margin-bottom:20px}"]
-    })
-], SkyDocsDemoPageSummaryComponent);
-
-/**
- * @internal
- */
-let SkyDocsDemoPageTitleService = 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.ctorParameters = () => [
-    { type: Title }
-];
-SkyDocsDemoPageTitleService = __decorate([
-    Injectable()
-], SkyDocsDemoPageTitleService);
-
-let SkyDocsDesignGuidelinesComponent = class SkyDocsDesignGuidelinesComponent {
-};
-SkyDocsDesignGuidelinesComponent = __decorate([
-    Component({
-        selector: 'sky-docs-design-guidelines',
-        template: "<div class=\"sky-docs-design-guidelines\">\n  <ng-content></ng-content>\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], SkyDocsDesignGuidelinesComponent);
-
-let SkyDocsSupportalService = 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.ctorParameters = () => [
-    { type: HttpClient }
-];
-SkyDocsSupportalService = __decorate([
-    Injectable()
-], SkyDocsSupportalService);
+}
+SkyDocsTypeDefinitionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsTypeDefinitionsService, deps: [{ token: SkyDocsTypeDefinitionsProvider }, { token: SkyDocsTypeDocAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsTypeDefinitionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsTypeDefinitionsService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsTypeDefinitionsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ type: SkyDocsTypeDefinitionsProvider }, { type: SkyDocsTypeDocAdapterService }]; } });
 
 /**
  * @internal
  */
-let SkyDocsDemoPageDomAdapterService = 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);
-            }
-        });
+class SkyDocsDemoPageTypeDefinitionsComponent {
+    constructor(typeDefinitionService) {
+        this.typeDefinitionService = typeDefinitionService;
     }
-    removeClickEventListeners() {
-        for (let index = 0; index < this.anchorLinks.length; index++) {
-            const anchor = this.anchorLinks[index];
-            anchor.removeEventListener('click', this.eventListener);
+    ngOnInit() {
+        if (this.moduleSourceCodePath) {
+            this.types = this.typeDefinitionService.getTypeDefinitions(this.moduleSourceCodePath, this.additionalSourceCodePaths);
         }
     }
-};
-SkyDocsDemoPageDomAdapterService.ctorParameters = () => [
-    { type: SkyAppWindowRef }
-];
-SkyDocsDemoPageDomAdapterService = __decorate([
-    Injectable()
-], SkyDocsDemoPageDomAdapterService);
+}
+SkyDocsDemoPageTypeDefinitionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsDemoPageTypeDefinitionsComponent, deps: [{ token: SkyDocsTypeDefinitionsService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoPageTypeDefinitionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDemoPageTypeDefinitionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-demo-page-type-definitions',
+                    templateUrl: './demo-page-type-definitions.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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.
@@ -2714,7 +2850,7 @@ SkyDocsDemoPageDomAdapterService = __decorate([
  * </sky-docs-demo-page>
  * ```
  */
-let SkyDocsDemoPageComponent = class SkyDocsDemoPageComponent {
+class SkyDocsDemoPageComponent {
     constructor(activatedRoute, changeDetector, router, skyAppConfig, domAdapter, supportalService, titleService) {
         this.activatedRoute = activatedRoute;
         this.changeDetector = changeDetector;
@@ -2738,20 +2874,22 @@ let SkyDocsDemoPageComponent = class SkyDocsDemoPageComponent {
         this.supportalService
             .getComponentsInfo()
             .subscribe((results) => {
-            this.sidebarRoutes = [{
+            this.sidebarRoutes = [
+                {
                     name: 'Components',
                     path: 'https://developer.blackbaud.com/skyux/components',
                     children: results.map((component) => ({
                         name: component.name,
-                        path: this.getPath(component.url, currentHostUrl)
-                    }))
-                }];
+                        path: this.getPath(component.url, currentHostUrl),
+                    })),
+                },
+            ];
             this.changeDetector.markForCheck();
         });
     }
     ngAfterContentInit() {
-        this.enableCodeExamples = (this.codeExampleComponents.length > 0);
-        this.enableTabLayout = !!(this.designGuidelinesComponent);
+        this.enableCodeExamples = this.codeExampleComponents.length > 0;
+        this.enableTabLayout = !!this.designGuidelinesComponent;
     }
     ngAfterViewInit() {
         // Watch for route fragment to change and scroll to heading.
@@ -2768,7 +2906,7 @@ let SkyDocsDemoPageComponent = class SkyDocsDemoPageComponent {
             const fragment = anchorLink.href.split('#')[1];
             this.router.navigate([], {
                 fragment,
-                queryParamsHandling: 'merge'
+                queryParamsHandling: 'merge',
             });
             if (this.activatedRoute.snapshot.fragment === fragment) {
                 this.domAdapter.scrollToFragment(fragment);
@@ -2776,6 +2914,7 @@ let SkyDocsDemoPageComponent = class SkyDocsDemoPageComponent {
         });
     }
     updateTitle() {
+        /*istanbul ignore else*/
         if (this.pageTitle) {
             this.titleService.setTitle(this.pageTitle, 'Components');
         }
@@ -2790,93 +2929,76 @@ let SkyDocsDemoPageComponent = class SkyDocsDemoPageComponent {
             return url;
         }
     }
-};
-SkyDocsDemoPageComponent.ctorParameters = () => [
-    { type: ActivatedRoute },
-    { type: ChangeDetectorRef },
-    { type: Router },
-    { type: SkyAppConfig },
-    { type: SkyDocsDemoPageDomAdapterService },
-    { type: SkyDocsSupportalService },
-    { type: SkyDocsDemoPageTitleService }
-];
-__decorate([
-    Input()
-], SkyDocsDemoPageComponent.prototype, "gitRepoUrl", void 0);
-__decorate([
-    Input()
-], SkyDocsDemoPageComponent.prototype, "moduleName", void 0);
-__decorate([
-    Input()
-], SkyDocsDemoPageComponent.prototype, "moduleSourceCodePath", void 0);
-__decorate([
-    Input()
-], SkyDocsDemoPageComponent.prototype, "packageName", void 0);
-__decorate([
-    Input()
-], SkyDocsDemoPageComponent.prototype, "packageUrl", void 0);
-__decorate([
-    Input()
-], SkyDocsDemoPageComponent.prototype, "pageTitle", void 0);
-__decorate([
-    ContentChild(SkyDocsDesignGuidelinesComponent)
-], SkyDocsDemoPageComponent.prototype, "designGuidelinesComponent", void 0);
-__decorate([
-    ContentChildren(SkyDocsCodeExamplesComponent)
-], SkyDocsDemoPageComponent.prototype, "codeExampleComponents", void 0);
-SkyDocsDemoPageComponent = __decorate([
-    Component({
-        selector: 'sky-docs-demo-page',
-        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\n      select=\"sky-docs-demo-page-summary\"\n    ></ng-content>\n\n    <ng-content\n      select=\"sky-docs-demo\"\n    ></ng-content>\n\n    <div\n      class=\"sky-docs-demo-page-main\"\n    >\n      <sky-tabset *ngIf=\"enableTabLayout else content\"\n        permalinkId=\"docs\"\n      >\n        <sky-tab tabHeading=\"Design\">\n          <ng-content\n            select=\"sky-docs-design-guidelines\"\n          ></ng-content>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Development\">\n          <ng-container\n            [ngTemplateOutlet]=\"content\"\n          ></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\"\n    heading=\"Installation\"\n  >\n    <sky-docs-module-info\n      [gitRepoUrl]=\"gitRepoUrl\"\n      [moduleName]=\"moduleName\"\n      [packageName]=\"packageName\"\n      [packageUrl]=\"packageUrl\"\n    >\n      <ng-content\n        select=\"sky-docs-demo-page-module-info\"\n      ></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    [moduleSourceCodePath]=\"moduleSourceCodePath\"\n  >\n  </sky-docs-demo-page-type-definitions>\n\n  <sky-docs-demo-page-section *ngIf=\"enableCodeExamples\"\n    heading=\"Code examples\"\n  >\n    <ng-content\n      select=\"sky-docs-code-examples\"\n    ></ng-content>\n  </sky-docs-demo-page-section>\n</ng-template>",
-        providers: [
-            SkyDocsDemoPageDomAdapterService
-        ],
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        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:0 0;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}"]
-    })
-], SkyDocsDemoPageComponent);
-
-let SkyDocsDemoPageModuleInfoComponent = class SkyDocsDemoPageModuleInfoComponent {
-};
-SkyDocsDemoPageModuleInfoComponent = __decorate([
-    Component({
-        selector: 'sky-docs-demo-page-module-info',
-        template: '<ng-content></ng-content>'
-    })
-], SkyDocsDemoPageModuleInfoComponent);
-
-/**
- * @internal
- */
-let SkyDocsDemoPageTypeDefinitionsComponent = class SkyDocsDemoPageTypeDefinitionsComponent {
-    constructor(typeDefinitionService) {
-        this.typeDefinitionService = typeDefinitionService;
-    }
-    ngOnInit() {
-        if (this.moduleSourceCodePath) {
-            this.types = this.typeDefinitionService.getTypeDefinitions(this.moduleSourceCodePath);
-        }
-    }
-};
-SkyDocsDemoPageTypeDefinitionsComponent.ctorParameters = () => [
-    { type: SkyDocsTypeDefinitionsService }
-];
-__decorate([
-    Input()
-], SkyDocsDemoPageTypeDefinitionsComponent.prototype, "moduleSourceCodePath", void 0);
-SkyDocsDemoPageTypeDefinitionsComponent = __decorate([
-    Component({
-        selector: 'sky-docs-demo-page-type-definitions',
-        template: "<ng-template [ngIf]=\"types\">\n  <sky-docs-demo-page-section *ngIf=\"types.components.length\"\n    heading=\"Components\"\n  >\n    <sky-docs-directive-definition *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 *ngIf=\"types.directives.length\"\n    heading=\"Directives\"\n  >\n    <sky-docs-directive-definition *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\"\n    heading=\"Pipes\"\n  >\n    <sky-docs-pipe-definition *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\"\n    heading=\"Services\"\n  >\n    <sky-docs-class-definition *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\"\n    heading=\"Classes\"\n  >\n    <sky-docs-class-definition *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 *ngIf=\"types.interfaces.length\"\n    heading=\"Interfaces\"\n  >\n    <sky-docs-interface-definition *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 *ngIf=\"types.enumerations.length\"\n    heading=\"Enumerations\"\n  >\n    <sky-docs-enumeration-definition *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 *ngIf=\"types.typeAliases.length\"\n    heading=\"Type aliases\"\n  >\n    <sky-docs-type-alias-definition *ngFor=\"let config of types.typeAliases\"\n      [config]=\"config\"\n    ></sky-docs-type-alias-definition>\n  </sky-docs-demo-page-section>\n</ng-template>",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], SkyDocsDemoPageTypeDefinitionsComponent);
-
-let SkyDocsDemoPageModule = class SkyDocsDemoPageModule {
-};
-SkyDocsDemoPageModule = __decorate([
-    NgModule({
-        imports: [
+}
+SkyDocsDemoPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDemoPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-demo-page',
+                    templateUrl: './demo-page.component.html',
+                    styleUrls: ['./demo-page.component.scss'],
+                    providers: [SkyDocsDemoPageDomAdapterService],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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: "12.2.16", ngImport: i0, type: SkyDocsDemoPageModuleInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoPageModuleInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDemoPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsDemoPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDemoPageModule, imports: [[
             CommonModule,
             RouterModule,
             SkyCodeBlockModule,
@@ -2888,110 +3010,115 @@ SkyDocsDemoPageModule = __decorate([
             SkyDocsTypeDefinitionsModule,
             SkyTabsModule,
             StachePageSummaryModule,
-            StacheWrapperModule
-        ],
-        declarations: [
-            SkyDocsDemoPageComponent,
-            SkyDocsDemoPageModuleInfoComponent,
-            SkyDocsDemoPageSectionComponent,
-            SkyDocsDemoPageSummaryComponent,
-            SkyDocsDemoPageTypeDefinitionsComponent
-        ],
-        exports: [
-            SkyDocsDemoPageComponent,
-            SkyDocsDemoPageModuleInfoComponent,
-            SkyDocsDemoPageSectionComponent,
-            SkyDocsDemoPageSummaryComponent,
-            SkyDocsDemoPageTypeDefinitionsComponent
-        ],
-        providers: [
-            SkyDocsDemoPageTitleService
-        ]
-    })
-], SkyDocsDemoPageModule);
-
-let SkyDocsThumbnailComponent = class SkyDocsThumbnailComponent {
+            StacheWrapperModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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;
     }
-};
-__decorate([
-    Input()
-], SkyDocsThumbnailComponent.prototype, "caption", void 0);
-__decorate([
-    Input()
-], SkyDocsThumbnailComponent.prototype, "captionType", void 0);
-__decorate([
-    Input()
-], SkyDocsThumbnailComponent.prototype, "imageAlt", void 0);
-__decorate([
-    Input()
-], SkyDocsThumbnailComponent.prototype, "imageSource", void 0);
-__decorate([
-    Input()
-], SkyDocsThumbnailComponent.prototype, "showBorder", void 0);
-__decorate([
-    Input()
-], SkyDocsThumbnailComponent.prototype, "videoSource", void 0);
-SkyDocsThumbnailComponent = __decorate([
-    Component({
-        selector: 'sky-docs-thumbnail',
-        template: "<div class=\"sky-docs-thumbnail\">\n  <sky-image *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 *ngIf=\"videoSource\"\n    class=\"sky-docs-video\"\n    [ngClass]=\"{\n      'sky-docs-video-border': showBorder\n    }\"\n  >\n    <video controls>\n      <source\n        [attr.src]=\"videoSource\"\n        type=\"video/mp4\"\n      />\n    </video>\n  </div>\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        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}"]
-    })
-], SkyDocsThumbnailComponent);
-
-let SkyDocsThumbnailModule = class SkyDocsThumbnailModule {
-};
-SkyDocsThumbnailModule = __decorate([
-    NgModule({
-        imports: [
-            CommonModule,
-            SkyImageModule
-        ],
-        exports: [
-            SkyDocsThumbnailComponent
-        ],
-        declarations: [
-            SkyDocsThumbnailComponent
-        ]
-    })
-], SkyDocsThumbnailModule);
-
-let SkyDocsDesignGuidelineThumbnailComponent = class SkyDocsDesignGuidelineThumbnailComponent {
+}
+SkyDocsThumbnailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsThumbnailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsThumbnailComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-thumbnail',
+                    templateUrl: './thumbnail.component.html',
+                    styleUrls: ['./thumbnail.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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: "12.2.16", ngImport: i0, type: SkyDocsThumbnailModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsThumbnailModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsThumbnailModule, declarations: [SkyDocsThumbnailComponent], imports: [CommonModule, SkyImageModule], exports: [SkyDocsThumbnailComponent] });
+SkyDocsThumbnailModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsThumbnailModule, imports: [[CommonModule, SkyImageModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsThumbnailModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SkyImageModule],
+                    exports: [SkyDocsThumbnailComponent],
+                    declarations: [SkyDocsThumbnailComponent],
+                }]
+        }] });
+
+class SkyDocsDesignGuidelineThumbnailComponent {
     constructor() {
         this.showBorder = false;
     }
-};
-__decorate([
-    Input()
-], SkyDocsDesignGuidelineThumbnailComponent.prototype, "caption", void 0);
-__decorate([
-    Input()
-], SkyDocsDesignGuidelineThumbnailComponent.prototype, "captionType", void 0);
-__decorate([
-    Input()
-], SkyDocsDesignGuidelineThumbnailComponent.prototype, "imageAlt", void 0);
-__decorate([
-    Input()
-], SkyDocsDesignGuidelineThumbnailComponent.prototype, "imageSource", void 0);
-__decorate([
-    Input()
-], SkyDocsDesignGuidelineThumbnailComponent.prototype, "videoSource", void 0);
-__decorate([
-    Input()
-], SkyDocsDesignGuidelineThumbnailComponent.prototype, "showBorder", void 0);
-SkyDocsDesignGuidelineThumbnailComponent = __decorate([
-    Component({
-        selector: 'sky-docs-design-guideline-thumbnail',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        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}"]
-    })
-], SkyDocsDesignGuidelineThumbnailComponent);
-
-let SkyDocsDesignGuidelineComponent = class SkyDocsDesignGuidelineComponent {
+}
+SkyDocsDesignGuidelineThumbnailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsDesignGuidelineThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDesignGuidelineThumbnailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDesignGuidelineThumbnailComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-design-guideline-thumbnail',
+                    templateUrl: './design-guideline-thumbnail.component.html',
+                    styleUrls: ['./design-guideline-thumbnail.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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;
@@ -3004,71 +3131,87 @@ let SkyDocsDesignGuidelineComponent = class SkyDocsDesignGuidelineComponent {
     ngAfterContentInit() {
         this.hasThumbnails = !!this.thumbnails.length;
     }
-};
-__decorate([
-    Input()
-], SkyDocsDesignGuidelineComponent.prototype, "heading", void 0);
-__decorate([
-    Input()
-], SkyDocsDesignGuidelineComponent.prototype, "headingStyle", void 0);
-__decorate([
-    ContentChildren(SkyDocsDesignGuidelineThumbnailComponent)
-], SkyDocsDesignGuidelineComponent.prototype, "thumbnails", void 0);
-SkyDocsDesignGuidelineComponent = __decorate([
-    Component({
-        selector: 'sky-docs-design-guideline',
-        template: "<div class=\"sky-docs-design-guideline\">\n  <h3 *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\n      screenSmall=\"6\"\n      screenMedium=\"5\"\n      screenLarge=\"4\"\n    >\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </sky-column>\n    <sky-column\n      screenSmall=\"6\"\n      screenMedium=\"7\"\n      screenLarge=\"8\"\n    >\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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-docs-design-guideline-heading{line-height:1.1;font-family:\"Blackbaud 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}"]
-    })
-], SkyDocsDesignGuidelineComponent);
-
-let SkyDocsDesignGuidelinesModule = class SkyDocsDesignGuidelinesModule {
-};
-SkyDocsDesignGuidelinesModule = __decorate([
-    NgModule({
-        imports: [
-            CommonModule,
-            SkyDocsThumbnailModule,
-            SkyFluidGridModule
-        ],
-        declarations: [
-            SkyDocsDesignGuidelineComponent,
-            SkyDocsDesignGuidelineThumbnailComponent,
-            SkyDocsDesignGuidelinesComponent
-        ],
-        exports: [
-            SkyDocsDesignGuidelineComponent,
-            SkyDocsDesignGuidelineThumbnailComponent,
-            SkyDocsDesignGuidelinesComponent
-        ]
-    })
-], SkyDocsDesignGuidelinesModule);
+}
+SkyDocsDesignGuidelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsDesignGuidelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDesignGuidelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDesignGuidelineComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-docs-design-guideline',
+                    templateUrl: './design-guideline.component.html',
+                    styleUrls: ['./design-guideline.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { heading: [{
+                type: Input
+            }], headingStyle: [{
+                type: Input
+            }], thumbnails: [{
+                type: ContentChildren,
+                args: [SkyDocsDesignGuidelineThumbnailComponent]
+            }] } });
+
+class SkyDocsDesignGuidelinesModule {
+}
+SkyDocsDesignGuidelinesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsDesignGuidelinesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsDesignGuidelinesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyDocsDesignGuidelinesModule, imports: [[CommonModule, SkyDocsThumbnailModule, SkyFluidGridModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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.
  */
-let SkyDocsToolsModule = class SkyDocsToolsModule {
-};
-SkyDocsToolsModule = __decorate([
-    NgModule({
-        exports: [
-            SkyAuthHttpClientModule,
-            SkyDocsAnatomyModule,
-            SkyDocsCodeExamplesModule,
-            SkyDocsDemoModule,
-            SkyDocsDemoPageModule,
-            SkyDocsDesignGuidelinesModule
-        ],
-        providers: [
-            SkyDocsSupportalService
-        ]
-    })
-], SkyDocsToolsModule);
+class SkyDocsToolsModule {
+}
+SkyDocsToolsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsToolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsToolsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsToolsModule, exports: [SkyAuthHttpClientModule,
+        SkyDocsAnatomyModule,
+        SkyDocsCodeExamplesModule,
+        SkyDocsDemoModule,
+        SkyDocsDemoPageModule,
+        SkyDocsDesignGuidelinesModule] });
+SkyDocsToolsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDocsToolsModule, imports: [SkyAuthHttpClientModule,
+        SkyDocsAnatomyModule,
+        SkyDocsCodeExamplesModule,
+        SkyDocsDemoModule,
+        SkyDocsDemoPageModule,
+        SkyDocsDesignGuidelinesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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, SkyDocsAnatomyComponent as ɵa, SkyDocsAnatomyItemComponent as ɵb, SkyDocsMethodDefinitionsComponent as ɵba, SkyDocsPipeDefinitionComponent as ɵbb, SkyDocsPropertyDefinitionsComponent as ɵbc, SkyDocsTypeAliasDefinitionComponent as ɵbd, SkyDocsTypeAnchorLinksPipe as ɵbe, SkyDocsAnchorLinkService as ɵbf, SkyDocsTypeDocAdapterService as ɵbg, SkyDocsDemoPageComponent as ɵbh, SkyDocsDemoPageDomAdapterService as ɵbi, SkyDocsDesignGuidelinesComponent as ɵbj, SkyDocsDemoPageTitleService as ɵbk, SkyDocsDemoPageModuleInfoComponent as ɵbl, SkyDocsDemoPageSectionComponent as ɵbm, SkyDocsDemoPageSummaryComponent as ɵbn, SkyDocsDemoPageTypeDefinitionsComponent as ɵbo, SkyDocsThumbnailComponent as ɵbp, SkyDocsDesignGuidelineComponent as ɵbq, SkyDocsDesignGuidelineThumbnailComponent as ɵbr, SkyDocsSourceCodeModule as ɵc, SkyDocsSourceCodeService as ɵd, SkyDocsToolsResourcesModule as ɵe, SkyDocsToolsResourcesProvider as ɵf, SkyDocsCodeExampleComponent as ɵg, SkyDocsCodeExamplesComponent as ɵh, SkyDocsCodeExamplesEditorService as ɵi, SkyDocsDemoComponent as ɵj, SkyDocsDemoThemeService as ɵk, SkyDocsDemoControlPanelComponent as ɵl, SkyDocsDemoControlPanelRadioGroupComponent as ɵm, SkyDocsDemoControlPanelCheckboxComponent as ɵn, SkyDocsDemoControlPanelSectionComponent as ɵo, SkyDocsDemoControlPanelThemeComponent as ɵp, SkyDocsHeadingAnchorComponent as ɵq, SkyDocsModuleInfoComponent as ɵr, SkyDocsSafeHtmlModule as ɵs, SkyDocsSafeHtmlComponent as ɵt, SkyDocsCallSignatureDefinitionComponent as ɵu, SkyDocsTypeDefinitionsFormatService as ɵv, SkyDocsClassDefinitionComponent as ɵw, SkyDocsDirectiveDefinitionComponent as ɵx, SkyDocsEnumerationDefinitionComponent as ɵy, SkyDocsInterfaceDefinitionComponent as ɵz };
+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.js.map