@skyux/docs-tools 5.0.0-beta.1 → 5.0.0-beta.5

package/fesm2015/skyux-docs-tools.js

@@ -1,171 +1,159 @@
-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.13", ngImport: i0, type: SkyDocsAnatomyItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsAnatomyItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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\"\n      class=\"sky-deemphasized\"\n    >&nbsp;(optional)</span>\n  </div>\n</div>", 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.13", 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: [
+}
+SkyDocsAnatomyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsAnatomyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsAnatomyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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\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>", 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.13", 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.13", ngImport: i0, type: SkyDocsAnatomyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsAnatomyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0, type: SkyDocsAnatomyModule, 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);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0, type: SkyDocsToolsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsToolsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsToolsResourcesModule, exports: [SkyI18nModule] });
+SkyDocsToolsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", 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.13", 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,7 +172,7 @@ 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.
@@ -215,40 +203,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.13", 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.13", 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.13", 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';
         const defaultDependencies = {
             '@angular/animations': angularVersion,
             '@angular/common': angularVersion,
@@ -272,10 +258,8 @@ 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',
+            'rxjs': '^6.6.0',
+            'tslib': '^2.3.0',
             'zone.js': '~0.11.4'
         };
         const mergedDependencies = Object.assign({}, defaultDependencies, codeExample.packageDependencies);
@@ -298,8 +282,7 @@ let SkyDocsCodeExamplesEditorService = class SkyDocsCodeExamplesEditorService {
         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 = [
@@ -401,7 +384,7 @@ 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...
@@ -430,9 +413,7 @@ 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';` : ``}
@@ -461,15 +442,24 @@ body {
         }, 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;
@@ -503,10 +493,65 @@ body {
         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.13", ngImport: i0, type: SkyDocsCodeExamplesEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsCodeExamplesEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsCodeExamplesEditorService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsCodeExamplesEditorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class SkyDocsSourceCodeProvider {
+}
+SkyDocsSourceCodeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsSourceCodeProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsSourceCodeProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsSourceCodeProvider, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0, type: SkyDocsSourceCodeService, deps: [{ token: SkyDocsSourceCodeProvider }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsSourceCodeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsSourceCodeService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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,7 +568,7 @@ SkyDocsCodeExamplesEditorService = __decorate([
  * </sky-docs-code-examples>
  * ```
  */
-let SkyDocsCodeExamplesComponent = class SkyDocsCodeExamplesComponent {
+class SkyDocsCodeExamplesComponent {
     constructor(editorService, sourceCodeService) {
         this.editorService = editorService;
         this.sourceCodeService = sourceCodeService;
@@ -577,52 +622,64 @@ 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.13", ngImport: i0, type: SkyDocsCodeExamplesComponent, deps: [{ token: SkyDocsCodeExamplesEditorService }, { token: SkyDocsSourceCodeService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsCodeExamplesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDocsCodeExamplesComponent, selector: "sky-docs-code-examples", inputs: { packageDependencies: "packageDependencies" }, queries: [{ propertyName: "codeExampleComponents", predicate: SkyDocsCodeExampleComponent }], ngImport: i0, template: "<div *ngIf=\"codeExamples && codeExamples.length\"\n  class=\"sky-docs-code-examples\"\n>\n  <sky-repeater *ngIf=\"codeExamples.length > 1 else singleCodeExample\"\n    expandMode=\"multiple\"\n  >\n    <sky-repeater-item *ngFor=\"let codeExample of codeExamples\"\n      [isExpanded]=\"false\"\n    >\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\n    select=\"sky-docs-code-example\"\n  >\n  </ng-content>\n</ng-template>\n\n<ng-template\n  let-item\n  #codeExampleTemplate\n>\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;\"\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\n  #singleCodeExample\n>\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\n  let-codeExample\n  #codeExampleHeaderTemplate\n>\n  <div\n    class=\"sky-docs-code-example-header\"\n  >\n    <div\n      class=\"sky-docs-code-example-header-title sky-emphasized\"\n    >\n      {{ codeExample.heading }}\n    </div>\n    <div\n      class=\"sky-docs-code-example-header-controls\"\n    >\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"launchEditor(codeExample);$event.stopPropagation();\"\n      >\n        <sky-icon\n          icon=\"pencil\"\n        ></sky-icon>\n        {{ 'sky-docs-code-example-launch-button-label' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</ng-template>", 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: ["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.13", 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
+            }], codeExampleComponents: [{
+                type: ContentChildren,
+                args: [SkyDocsCodeExampleComponent]
+            }] } });
+
+class SkyDocsCodeExamplesModule {
+}
+SkyDocsCodeExamplesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsCodeExamplesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsCodeExamplesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0, type: SkyDocsCodeExamplesModule, imports: [[
             CommonModule,
             SkyCodeBlockModule,
-            SkyDocsSourceCodeModule,
             SkyDocsToolsResourcesModule,
             SkyIconModule,
             SkyRepeaterModule,
             SkyVerticalTabsetModule
-        ],
-        declarations: [
-            SkyDocsCodeExampleComponent,
-            SkyDocsCodeExamplesComponent
-        ],
-        exports: [
-            SkyDocsCodeExampleComponent,
-            SkyDocsCodeExamplesComponent
-        ],
-        providers: [
-            SkyDocsCodeExamplesEditorService
-        ]
-    })
-], SkyDocsCodeExamplesModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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;
         /**
@@ -683,29 +740,25 @@ let SkyDocsDemoControlPanelCheckboxComponent = class SkyDocsDemoControlPanelChec
             [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.13", ngImport: i0, type: SkyDocsDemoControlPanelCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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.13", 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;
         /**
@@ -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.13", ngImport: i0, type: SkyDocsDemoControlPanelRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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\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", 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.13", 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,9 +880,6 @@ let SkyDocsDemoControlPanelComponent = class SkyDocsDemoControlPanelComponent {
         });
         this.reset.emit();
     }
-    onThemeSettingsChange(themeSettings) {
-        this.demoThemeSvc.themeSettings.next(themeSettings);
-    }
     addEventListeners() {
         if (this.eventListeners) {
             this.eventListeners.unsubscribe();
@@ -856,30 +890,28 @@ let SkyDocsDemoControlPanelComponent = class SkyDocsDemoControlPanelComponent {
             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.13", ngImport: i0, type: SkyDocsDemoControlPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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 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  </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.13", 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 +922,8 @@ SkyDocsDemoControlPanelComponent = __decorate([
  * </sky-docs-demo>
  * ```
  */
-let SkyDocsDemoComponent = class SkyDocsDemoComponent {
-    constructor(demoThemeSvc) {
-        this.demoThemeSvc = demoThemeSvc;
+class SkyDocsDemoComponent {
+    constructor() {
         this.areOptionsVisible = false;
     }
     /**
@@ -905,11 +936,8 @@ 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';
@@ -917,31 +945,25 @@ let SkyDocsDemoComponent = class SkyDocsDemoComponent {
     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.13", ngImport: i0, type: SkyDocsDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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\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  >\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.13", 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 +976,168 @@ 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.13", ngImport: i0, type: SkyDocsDemoControlPanelSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDocsDemoControlPanelSectionComponent, selector: "sky-docs-demo-control-panel-section", ngImport: i0, 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</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.13", 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.13", ngImport: i0, type: SkyDocsDemoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsDemoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", 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.13", 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 {
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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: [
+}
+SkyDocsHeadingAnchorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsHeadingAnchorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsHeadingAnchorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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 *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>", 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.13", 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.13", ngImport: i0, type: SkyDocsHeadingAnchorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsHeadingAnchorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsHeadingAnchorModule, declarations: [SkyDocsHeadingAnchorComponent], imports: [CommonModule,
+        RouterModule,
+        SkyIconModule], exports: [SkyDocsHeadingAnchorComponent] });
+SkyDocsHeadingAnchorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsHeadingAnchorModule, imports: [[
             CommonModule,
             RouterModule,
             SkyIconModule
-        ],
-        exports: [
-            SkyDocsHeadingAnchorComponent
-        ]
-    })
-], SkyDocsHeadingAnchorModule);
-
-let SkyDocsMarkdownPipe = class SkyDocsMarkdownPipe {
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0, type: SkyDocsMarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SkyDocsMarkdownPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsMarkdownPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDocsMarkdown'
+                }]
+        }] });
+
+class SkyDocsMarkdownModule {
+}
+SkyDocsMarkdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsMarkdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsMarkdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsMarkdownModule, declarations: [SkyDocsMarkdownPipe], exports: [SkyDocsMarkdownPipe] });
+SkyDocsMarkdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsMarkdownModule, providers: [
+        SkyDocsMarkdownPipe
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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;
     }
@@ -1215,194 +1187,113 @@ 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.13", ngImport: i0, type: SkyDocsModuleInfoComponent, deps: [{ token: SkyDocsToolsOptions, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsModuleInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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\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", 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.13", 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.13", ngImport: i0, type: SkyDocsModuleInfoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsModuleInfoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0, type: SkyDocsModuleInfoModule, imports: [[
             CommonModule,
             SkyCodeModule,
             SkyClipboardModule,
             SkyDefinitionListModule,
             SkyHelpInlineModule,
             SkyPopoverModule
-        ],
-        declarations: [
-            SkyDocsModuleInfoComponent
-        ],
-        exports: [
-            SkyDocsModuleInfoComponent
-        ]
-    })
-], SkyDocsModuleInfoModule);
-
-let SkyDocsSafeHtmlComponent = class SkyDocsSafeHtmlComponent {
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0, type: SkyDocsSafeHtmlComponent, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsSafeHtmlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: { innerHtml: "innerHtml" }, ngImport: i0, template: "<div\n  class=\"sky-docs-safe-html\"\n  [innerHtml]=\"getTrustedHtml(innerHtml)\"\n></div>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0, type: SkyDocsSafeHtmlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsSafeHtmlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsSafeHtmlModule, declarations: [SkyDocsSafeHtmlComponent], imports: [CommonModule], exports: [SkyDocsSafeHtmlComponent] });
+SkyDocsSafeHtmlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsSafeHtmlModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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.
      */
@@ -1628,16 +1519,148 @@ let SkyDocsTypeDefinitionsFormatService = class SkyDocsTypeDefinitionsFormatServ
         });
         return signature;
     }
-};
-SkyDocsTypeDefinitionsFormatService = __decorate([
-    Injectable()
-], SkyDocsTypeDefinitionsFormatService);
+}
+SkyDocsTypeDefinitionsFormatService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsTypeDefinitionsFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsTypeDefinitionsFormatService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsTypeDefinitionsFormatService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsTypeDefinitionsFormatService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class SkyDocsTypeDefinitionsProvider {
+}
+SkyDocsTypeDefinitionsProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsTypeDefinitionsProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsTypeDefinitionsProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsTypeDefinitionsProvider });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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.
+ * 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.
  */
-let SkyDocsCallSignatureDefinitionComponent = class SkyDocsCallSignatureDefinitionComponent {
+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.13", ngImport: i0, type: SkyDocsAnchorLinkService, deps: [{ token: SkyDocsTypeDefinitionsProvider }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsAnchorLinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsAnchorLinkService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0, type: SkyDocsTypeAnchorLinksPipe, deps: [{ token: SkyDocsAnchorLinkService }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyDocsTypeAnchorLinksPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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;
     }
@@ -1661,50 +1684,111 @@ let SkyDocsCallSignatureDefinitionComponent = class SkyDocsCallSignatureDefiniti
         });
         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.13", ngImport: i0, type: SkyDocsCallSignatureDefinitionComponent, deps: [{ token: SkyDocsTypeDefinitionsFormatService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsCallSignatureDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDocsCallSignatureDefinitionComponent, selector: "sky-docs-call-signature-definition", inputs: { config: "config" }, ngImport: i0, 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", 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.13", 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.13", 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.13", type: SkyDocsPropertyDefinitionsComponent, selector: "sky-docs-property-definitions", inputs: { config: "config", propertyType: "propertyType", showOptionalStatus: "showOptionalStatus" }, ngImport: i0, 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", 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.13", 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.13", ngImport: i0, type: SkyDocsDirectiveDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDirectiveDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDocsDirectiveDefinitionComponent, selector: "sky-docs-directive-definition", inputs: { config: "config" }, ngImport: i0, template: "<div *ngIf=\"config\"\n  class=\"sky-docs-directive-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-directive-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <h4\n    class=\"sky-docs-directive-definition-h4\"\n  >\n    Selector\n  </h4>\n\n  <p\n    class=\"sky-docs-directive-selector\"\n  >\n    <sky-code>{{ config.selector }}</sky-code>\n  </p>\n\n  <ng-container *ngIf=\"config.codeExample\">\n    <h4\n      class=\"sky-docs-directive-definition-h4\"\n    >\n      Example\n    </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 *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 *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.13", 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.13", ngImport: i0, type: SkyDocsEnumerationDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsEnumerationDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDocsEnumerationDefinitionComponent, selector: "sky-docs-enumeration-definition", inputs: { config: "config" }, ngImport: i0, 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>", 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.13", 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;
     }
@@ -1718,22 +1802,21 @@ let SkyDocsInterfaceDefinitionComponent = class SkyDocsInterfaceDefinitionCompon
     updateView() {
         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.13", ngImport: i0, type: SkyDocsInterfaceDefinitionComponent, deps: [{ token: SkyDocsTypeDefinitionsFormatService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsInterfaceDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDocsInterfaceDefinitionComponent, selector: "sky-docs-interface-definition", inputs: { config: "config" }, ngImport: i0, template: "<div *ngIf=\"config\"\n  class=\"sky-docs-interface-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-interface-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block *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 *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.13", 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;
@@ -1769,149 +1852,363 @@ let SkyDocsMethodDefinitionsComponent = class SkyDocsMethodDefinitionsComponent
             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.13", 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.13", type: SkyDocsMethodDefinitionsComponent, selector: "sky-docs-method-definitions", inputs: { config: "config" }, ngImport: i0, template: "<div *ngIf=\"methods\"\n  class=\"sky-docs-method-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        Methods\n      </th>\n      <th\n        class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n      >\n        Description\n      </th>\n    </tr>\n    <tr *ngFor=\"let method of methods\"\n      class=\"sky-docs-table-row\"\n    >\n      <td\n        class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-name\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"nameTemplate\"\n          [ngTemplateOutletContext]=\"{$implicit: method}\"\n        ></ng-template>\n      </td>\n      <td\n        class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-description\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"descriptionTemplate\"\n          [ngTemplateOutletContext]=\"{$implicit: method}\"\n        ></ng-template>\n      </td>\n    </tr>\n  </table>\n\n  <ng-template #mobileTemplate>\n    <dl\n      class=\"sky-docs-method-definition-list\"\n    >\n      <div *ngFor=\"let method of methods\"\n        class=\"sky-docs-method-definition-list-item\"\n      >\n        <dt\n          class=\"sky-field-label\"\n        >\n          Methods\n        </dt>\n        <dd\n          class=\"sky-docs-method-definitions-dd-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{$implicit: method}\"\n          ></ng-template>\n        </dd>\n        <dt\n          class=\"sky-field-label\"\n        >Description</dt>\n        <dd\n          class=\"sky-docs-method-definitions-dd-description\"\n        >\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><span\n    [innerHtml]=\"method.formattedName | skyDocsTypeAnchorLinks:'no-code-tags'\"\n  ></span></sky-code>\n</ng-template>\n\n<ng-template let-method #descriptionTemplate>\n\n  <sky-docs-safe-html *ngIf=\"method.deprecationWarning !== undefined\"\n    class=\"sky-docs-method-definition-deprecation-warning\"\n    [innerHtml]=\"deprecationWarningPrefix + method.deprecationWarning | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-docs-safe-html *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 *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 *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\">\n      Example\n    </h4>\n    <sky-code-block *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.13", 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.13", ngImport: i0, type: SkyDocsPipeDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsPipeDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDocsPipeDefinitionComponent, selector: "sky-docs-pipe-definition", inputs: { config: "config" }, ngImport: i0, template: "<div *ngIf=\"config\"\n  class=\"sky-docs-pipe-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    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <ng-container *ngIf=\"config.codeExample\">\n    <h4\n      class=\"sky-docs-pipe-definition-heading\"\n    >\n      Example\n    </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.13", 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.13", ngImport: i0, type: SkyDocsClassDefinitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsClassDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDocsClassDefinitionComponent, selector: "sky-docs-class-definition", inputs: { config: "config" }, ngImport: i0, 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", 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.13", 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.13", ngImport: i0, type: SkyDocsTypeAliasDefinitionComponent, deps: [{ token: SkyDocsTypeDefinitionsFormatService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsTypeAliasDefinitionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDocsTypeAliasDefinitionComponent, selector: "sky-docs-type-alias-definition", inputs: { config: "config" }, ngImport: i0, template: "<div *ngIf=\"config\"\n  class=\"sky-docs-type-alias-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-type-alias-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block *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 *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.13", 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.13", ngImport: i0, type: SkyDocsTypeDefinitionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsTypeDefinitionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0, type: SkyDocsTypeDefinitionsModule, imports: [[
+            CommonModule,
+            RouterModule,
+            SkyCodeBlockModule,
+            SkyCodeModule,
+            SkyDefinitionListModule,
+            SkyDocsHeadingAnchorModule,
+            SkyDocsMarkdownModule,
+            SkyDocsSafeHtmlModule,
+            SkyIconModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0, type: SkyDocsDemoPageSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoPageSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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\"\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>", 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.13", 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.13", ngImport: i0, type: SkyDocsDemoPageSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoPageSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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.13", 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.13", ngImport: i0, type: SkyDocsDesignGuidelinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDesignGuidelinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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.13", 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);
+        }
     }
-    set config(value) {
-        this._config = value;
-        this.updateView();
+}
+SkyDocsDemoPageDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsDemoPageDomAdapterService, deps: [{ token: i2$4.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsDemoPageDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsDemoPageDomAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsDemoPageDomAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i2$4.SkyAppWindowRef }]; } });
+
+class SkyDocsSupportalService {
+    constructor(http) {
+        this.http = http;
     }
-    get config() {
-        return this._config;
+    getComponentsInfo() {
+        return this.http
+            .get('https://sky-pusa01.app.blackbaud.net/skysp/v1/docs/components-info')
+            .pipe(map((results) => results.components), share());
     }
-    updateView() {
-        this.sourceCode = (this.config) ? this.formatService.getTypeAliasSourceCode(this.config) : undefined;
+}
+SkyDocsSupportalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsSupportalService, deps: [{ token: i1$5.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsSupportalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsSupportalService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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;
     }
-};
-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);
+    setTitle(...parts) {
+        let windowTitle = 'SKY UX';
+        if (parts && parts.length > 0) {
+            parts.push(windowTitle);
+            windowTitle = parts.join(' - ');
+        }
+        this.title.setTitle(windowTitle);
+    }
+}
+SkyDocsDemoPageTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsDemoPageTitleService, deps: [{ token: i1$4.Title }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsDemoPageTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsDemoPageTitleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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;
     }
@@ -2019,21 +2316,43 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
         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,
+            var _a, _b, _c;
+            let definition = {
+                isOptional: true,
                 name: this.getPropertyName(child),
                 type: this.getTypeDefinition(child)
             };
-            this.applyCommentTagValues(definition, tags);
-            const decorator = this.getDecorator(child);
-            if (decorator) {
-                definition.decorator = decorator;
+            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.getSignature) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                const mainTags = this.getCommentTags(child.comment);
+                const getTags = this.getCommentTags(child.getSignature[0].comment);
+                this.applyCommentTagValues(definition, mainTags);
+                this.applyCommentTagValues(definition, getTags);
+                if (((_c = child.setSignature) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+                    const setTags = this.getCommentTags(child.setSignature[0].comment);
+                    this.applyCommentTagValues(definition, setTags);
+                    definition.isOptional = !setTags.extras.required;
+                    defaultValue = this.getDefaultValue(child, setTags);
+                }
+                else {
+                    definition.isOptional = !mainTags.extras.required;
+                    defaultValue = this.getDefaultValue(child, mainTags);
+                }
+            }
+            else {
+                const tags = this.getCommentTags(child.comment);
+                definition.isOptional = !tags.extras.required;
+                this.applyCommentTagValues(definition, tags);
+                defaultValue = this.getDefaultValue(child, tags);
             }
-            const defaultValue = this.getDefaultValue(child, tags);
             if (defaultValue) {
                 definition.defaultValue = defaultValue;
             }
+            const decorator = this.getDecorator(child);
+            if (decorator) {
+                definition.decorator = decorator;
+            }
             return definition;
         });
         return orderBy(definitions, ['isOptional', 'name'], ['asc', 'asc']);
@@ -2147,7 +2466,7 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
                             const indexSignature = declaration.indexSignature;
                             definition.indexSignature = this.getIndexSignatureDefinition(indexSignature);
                         }
-                        else if (declaration.children) {
+                        else /* istanbul ignore else */ if (declaration.children) {
                             definition.typeLiteral = {
                                 properties: this.getInterfaceProperties({
                                     children: declaration.children
@@ -2347,19 +2666,22 @@ let SkyDocsTypeDocAdapterService = class SkyDocsTypeDocAdapterService {
         var _a;
         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.13", ngImport: i0, type: SkyDocsTypeDocAdapterService, deps: [{ token: SkyDocsTypeDefinitionsProvider, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsTypeDocAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsTypeDocAdapterService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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;
@@ -2392,7 +2714,7 @@ let SkyDocsTypeDefinitionsService = class SkyDocsTypeDefinitionsService {
             return types;
         }
         // Only process types that match the requested source code location.
-        const typeDefinitions = allDefinitions.filter((i) => i.sources[0].fileName.match(requestedDir));
+        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}`);
         }
@@ -2435,273 +2757,41 @@ let SkyDocsTypeDefinitionsService = class SkyDocsTypeDefinitionsService {
         });
         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.13", ngImport: i0, type: SkyDocsTypeDefinitionsService, deps: [{ token: SkyDocsTypeDefinitionsProvider }, { token: SkyDocsTypeDocAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDocsTypeDefinitionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsTypeDefinitionsService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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);
         }
     }
-};
-SkyDocsDemoPageDomAdapterService.ctorParameters = () => [
-    { type: SkyAppWindowRef }
-];
-SkyDocsDemoPageDomAdapterService = __decorate([
-    Injectable()
-], SkyDocsDemoPageDomAdapterService);
+}
+SkyDocsDemoPageTypeDefinitionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsDemoPageTypeDefinitionsComponent, deps: [{ token: SkyDocsTypeDefinitionsService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoPageTypeDefinitionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDocsDemoPageTypeDefinitionsComponent, selector: "sky-docs-demo-page-type-definitions", inputs: { moduleSourceCodePath: "moduleSourceCodePath" }, ngImport: i0, 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>", 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.13", 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: { moduleSourceCodePath: [{
+                type: Input
+            }] } });
 
 /**
  * The demo page component wraps all documentation components and handles the configuration and layout of the page.
@@ -2714,7 +2804,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;
@@ -2776,6 +2866,7 @@ let SkyDocsDemoPageComponent = class SkyDocsDemoPageComponent {
         });
     }
     updateTitle() {
+        /*istanbul ignore else*/
         if (this.pageTitle) {
             this.titleService.setTitle(this.pageTitle, 'Components');
         }
@@ -2790,93 +2881,78 @@ 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.13", 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.13", type: SkyDocsDemoPageComponent, selector: "sky-docs-demo-page", inputs: { 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\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>", 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: ["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.13", 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: { 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.13", ngImport: i0, type: SkyDocsDemoPageModuleInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoPageModuleInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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.13", 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.13", ngImport: i0, type: SkyDocsDemoPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsDemoPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0, type: SkyDocsDemoPageModule, imports: [[
             CommonModule,
             RouterModule,
             SkyCodeBlockModule,
@@ -2889,109 +2965,125 @@ SkyDocsDemoPageModule = __decorate([
             SkyTabsModule,
             StachePageSummaryModule,
             StacheWrapperModule
-        ],
-        declarations: [
-            SkyDocsDemoPageComponent,
-            SkyDocsDemoPageModuleInfoComponent,
-            SkyDocsDemoPageSectionComponent,
-            SkyDocsDemoPageSummaryComponent,
-            SkyDocsDemoPageTypeDefinitionsComponent
-        ],
-        exports: [
-            SkyDocsDemoPageComponent,
-            SkyDocsDemoPageModuleInfoComponent,
-            SkyDocsDemoPageSectionComponent,
-            SkyDocsDemoPageSummaryComponent,
-            SkyDocsDemoPageTypeDefinitionsComponent
-        ],
-        providers: [
-            SkyDocsDemoPageTitleService
-        ]
-    })
-], SkyDocsDemoPageModule);
-
-let SkyDocsThumbnailComponent = class SkyDocsThumbnailComponent {
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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: [
+}
+SkyDocsThumbnailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsThumbnailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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 *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", 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.13", 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.13", ngImport: i0, type: SkyDocsThumbnailModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsThumbnailModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsThumbnailModule, declarations: [SkyDocsThumbnailComponent], imports: [CommonModule,
+        SkyImageModule], exports: [SkyDocsThumbnailComponent] });
+SkyDocsThumbnailModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsThumbnailModule, imports: [[
             CommonModule,
             SkyImageModule
-        ],
-        exports: [
-            SkyDocsThumbnailComponent
-        ],
-        declarations: [
-            SkyDocsThumbnailComponent
-        ]
-    })
-], SkyDocsThumbnailModule);
-
-let SkyDocsDesignGuidelineThumbnailComponent = class SkyDocsDesignGuidelineThumbnailComponent {
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0, type: SkyDocsDesignGuidelineThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDesignGuidelineThumbnailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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.13", 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 +3096,97 @@ 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: [
+}
+SkyDocsDesignGuidelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsDesignGuidelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDesignGuidelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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 *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", 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.13", 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.13", ngImport: i0, type: SkyDocsDesignGuidelinesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsDesignGuidelinesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0, type: SkyDocsDesignGuidelinesModule, imports: [[
             CommonModule,
             SkyDocsThumbnailModule,
             SkyFluidGridModule
-        ],
-        declarations: [
-            SkyDocsDesignGuidelineComponent,
-            SkyDocsDesignGuidelineThumbnailComponent,
-            SkyDocsDesignGuidelinesComponent
-        ],
-        exports: [
-            SkyDocsDesignGuidelineComponent,
-            SkyDocsDesignGuidelineThumbnailComponent,
-            SkyDocsDesignGuidelinesComponent
-        ]
-    })
-], SkyDocsDesignGuidelinesModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0, type: SkyDocsToolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsToolsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsToolsModule, exports: [SkyAuthHttpClientModule,
+        SkyDocsAnatomyModule,
+        SkyDocsCodeExamplesModule,
+        SkyDocsDemoModule,
+        SkyDocsDemoPageModule,
+        SkyDocsDesignGuidelinesModule] });
+SkyDocsToolsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDocsToolsModule, imports: [SkyAuthHttpClientModule,
+        SkyDocsAnatomyModule,
+        SkyDocsCodeExamplesModule,
+        SkyDocsDemoModule,
+        SkyDocsDemoPageModule,
+        SkyDocsDesignGuidelinesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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