@skyux/docs-tools 9.1.5 → 9.2.0

package/fesm2022/skyux-docs-tools.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, ContentChildren, NgModule, Optional, VERSION, Injectable, EventEmitter, Output, ElementRef, Pipe, ContentChild } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, ContentChildren, NgModule, Optional, VERSION, Injectable, EventEmitter, Output, ElementRef, Pipe, inject, ContentChild } from '@angular/core';
 import * as i3 from '@blackbaud/skyux-lib-media';
 import { SkyImageModule } from '@blackbaud/skyux-lib-media';
 import * as i5 from '@skyux/layout';
@@ -9,7 +9,7 @@ import { SkyFluidGridModule, SkyDescriptionListModule, SkyDefinitionListModule }
 import * as i4 from '@blackbaud/skyux-lib-code-block';
 import { SkyCodeBlockModule, SkyCodeModule } from '@blackbaud/skyux-lib-code-block';
 import * as i5$1 from '@skyux/indicators';
-import { SkyIconModule, SkyHelpInlineModule } from '@skyux/indicators';
+import { SkyIconModule, SkyHelpInlineModule, SkyStatusIndicatorModule, SkyAlertModule } from '@skyux/indicators';
 import * as i6 from '@skyux/lists';
 import { SkyRepeaterModule } from '@skyux/lists';
 import * as i7 from '@skyux/tabs';
@@ -28,7 +28,7 @@ import * as i1$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3$1 from '@skyux/forms';
 import { SkyCheckboxModule, SkyRadioModule } from '@skyux/forms';
-import * as i10 from '@blackbaud/skyux-lib-stache';
+import * as i12 from '@blackbaud/skyux-lib-stache';
 import { StachePageSummaryModule, StacheWrapperModule } from '@blackbaud/skyux-lib-stache';
 import * as i1$3 from '@angular/router';
 import { RouterModule } from '@angular/router';
@@ -41,6 +41,8 @@ import * as i1$4 from '@angular/platform-browser';
 import * as i2$1 from '@skyux/config';
 import * as i1$5 from '@angular/common/http';
 import orderBy from 'lodash.orderby';
+import * as i9 from '@skyux/router';
+import { SkyAppLinkModule } from '@skyux/router';
 import { SkyAuthHttpClientModule } from '@skyux/http';
 
 class SkyDocsAnatomyItemComponent {
@@ -1783,6 +1785,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                 type: Input
             }] } });
 
+class SkyDocsPreviewIndicatorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyDocsPreviewIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkyDocsPreviewIndicatorComponent, isStandalone: true, selector: "sky-docs-preview-feature-indicator", ngImport: i0, template: "<sky-status-indicator indicatorType=\"warning\" descriptionType=\"warning\"\n  >Preview. This feature may not be fully represented in the design\n  documentation, the demo, or code examples.</sky-status-indicator\n>\n", dependencies: [{ kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i5$1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyDocsPreviewIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-preview-feature-indicator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SkyStatusIndicatorModule], template: "<sky-status-indicator indicatorType=\"warning\" descriptionType=\"warning\"\n  >Preview. This feature may not be fully represented in the design\n  documentation, the demo, or code examples.</sky-status-indicator\n>\n" }]
+        }] });
+
 class SkyDocsPropertyDefinitionsComponent {
     set config(value) {
         this._config = value;
@@ -1817,16 +1828,17 @@ class SkyDocsPropertyDefinitionsComponent {
                 formattedName: this.formatService.getFormattedPropertyName(property),
                 isOutput: property.decorator?.name === 'Output',
                 isOptional: property.isOptional,
+                isPreview: property.isPreview,
             };
             return vm;
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyDocsPropertyDefinitionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDocsTypeDefinitionsFormatService }, { token: i2.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkyDocsPropertyDefinitionsComponent, selector: "sky-docs-property-definitions", inputs: { config: "config", propertyType: "propertyType", showOptionalStatus: "showOptionalStatus" }, ngImport: i0, template: "<div *ngIf=\"properties\" class=\"sky-docs-property-definitions\">\n  <table *ngIf=\"!isMobile; else mobileTemplate\" class=\"sky-docs-table\">\n    <tr class=\"sky-docs-table-row\">\n      <th\n        class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n      >\n        {{ propertyType }}\n      </th>\n      <th\n        class=\"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\" class=\"sky-docs-table-row\">\n      <td\n        class=\"sky-docs-table-cell sky-docs-property-definitions-table-cell-name\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"nameTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: property }\"\n        ></ng-template>\n      </td>\n      <td\n        class=\"sky-docs-table-cell sky-docs-property-definitions-table-cell-description\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"descriptionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: property }\"\n        ></ng-template>\n      </td>\n    </tr>\n  </table>\n\n  <ng-template #mobileTemplate>\n    <dl class=\"sky-docs-property-definition-list\">\n      <div\n        *ngFor=\"let property of properties\"\n        class=\"sky-docs-property-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">{{ propertyType }}</dt>\n        <dd class=\"sky-docs-property-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-property-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n  </ng-template>\n</div>\n\n<ng-template let-property #nameTemplate>\n  <sky-code\n    ><span\n      [innerHtml]=\"\n        property.formattedName | skyDocsTypeAnchorLinks : 'no-code-tags'\n      \"\n    ></span\n  ></sky-code>\n</ng-template>\n\n<ng-template let-property #descriptionTemplate>\n  <div\n    *ngIf=\"!property.isOutput && !property.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label sky-text-danger\"\n  >\n    Required.\n  </div>\n\n  <sky-docs-safe-html\n    *ngIf=\"property.deprecationWarning !== undefined\"\n    class=\"sky-docs-property-definitions-deprecation-warning\"\n    [innerHtml]=\"\n      deprecationWarningPrefix + property.deprecationWarning\n        | skyDocsTypeAnchorLinks\n        | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <sky-docs-safe-html\n    *ngIf=\"property.description\"\n    class=\"sky-docs-property-definitions-description\"\n    [innerHtml]=\"\n      property.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <div\n    *ngIf=\"!property.isOutput && property.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label sky-docs-property-definition-label-optional\"\n  >\n    Optional.\n    <ng-container *ngIf=\"property.defaultValue\"\n      >Default is\n      <sky-code\n        ><span\n          [innerHtml]=\"\n            property.defaultValue | skyDocsTypeAnchorLinks : 'no-code-tags'\n          \"\n        ></span></sky-code\n      >.</ng-container\n    >\n  </div>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"property.callSignature\"\n    [config]=\"property.callSignature\"\n  ></sky-docs-call-signature-definition>\n</ng-template>\n", styles: [":host{margin:15px 0}.sky-docs-property-definitions{width:100%;max-width:100%;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"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.λ1, selector: "sky-code" }, { kind: "component", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { kind: "component", type: SkyDocsCallSignatureDefinitionComponent, selector: "sky-docs-call-signature-definition", inputs: ["config"] }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "pipe", type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkyDocsPropertyDefinitionsComponent, selector: "sky-docs-property-definitions", inputs: { config: "config", propertyType: "propertyType", showOptionalStatus: "showOptionalStatus" }, ngImport: i0, template: "<div *ngIf=\"properties\" class=\"sky-docs-property-definitions\">\n  <table *ngIf=\"!isMobile; else mobileTemplate\" class=\"sky-docs-table\">\n    <tr class=\"sky-docs-table-row\">\n      <th\n        class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n      >\n        {{ propertyType }}\n      </th>\n      <th\n        class=\"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\" class=\"sky-docs-table-row\">\n      <td\n        class=\"sky-docs-table-cell sky-docs-property-definitions-table-cell-name\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"nameTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: property }\"\n        ></ng-template>\n      </td>\n      <td\n        class=\"sky-docs-table-cell sky-docs-property-definitions-table-cell-description\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"descriptionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: property }\"\n        ></ng-template>\n      </td>\n    </tr>\n  </table>\n\n  <ng-template #mobileTemplate>\n    <dl class=\"sky-docs-property-definition-list\">\n      <div\n        *ngFor=\"let property of properties\"\n        class=\"sky-docs-property-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">{{ propertyType }}</dt>\n        <dd class=\"sky-docs-property-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-property-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n  </ng-template>\n</div>\n\n<ng-template let-property #nameTemplate>\n  <sky-code\n    ><span\n      [innerHtml]=\"\n        property.formattedName | skyDocsTypeAnchorLinks : 'no-code-tags'\n      \"\n    ></span\n  ></sky-code>\n</ng-template>\n\n<ng-template let-property #descriptionTemplate>\n  <div\n    *ngIf=\"!property.isOutput && !property.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label\"\n  >\n    <sky-status-indicator indicatorType=\"danger\" descriptionType=\"danger\"\n      >Required.</sky-status-indicator\n    >\n  </div>\n  <div\n    *ngIf=\"property.isPreview\"\n    class=\"sky-docs-property-definition-preview-warning sky-docs-property-definition-label\"\n  >\n    <sky-docs-preview-feature-indicator></sky-docs-preview-feature-indicator>\n  </div>\n\n  <sky-docs-safe-html\n    *ngIf=\"property.deprecationWarning !== undefined\"\n    class=\"sky-docs-property-definitions-deprecation-warning\"\n    [innerHtml]=\"\n      deprecationWarningPrefix + property.deprecationWarning\n        | skyDocsTypeAnchorLinks\n        | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <sky-docs-safe-html\n    *ngIf=\"property.description\"\n    class=\"sky-docs-property-definitions-description\"\n    [innerHtml]=\"\n      property.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <div\n    *ngIf=\"!property.isOutput && property.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label sky-docs-property-definition-label-optional\"\n  >\n    Optional.\n    <ng-container *ngIf=\"property.defaultValue\"\n      >Default is\n      <sky-code\n        ><span\n          [innerHtml]=\"\n            property.defaultValue | skyDocsTypeAnchorLinks : 'no-code-tags'\n          \"\n        ></span></sky-code\n      >.</ng-container\n    >\n  </div>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"property.callSignature\"\n    [config]=\"property.callSignature\"\n  ></sky-docs-call-signature-definition>\n</ng-template>\n", styles: [":host{margin:15px 0}.sky-docs-property-definitions{width:100%;max-width:100%;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"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.λ1, selector: "sky-code" }, { kind: "component", type: SkyDocsPreviewIndicatorComponent, selector: "sky-docs-preview-feature-indicator" }, { kind: "component", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { kind: "component", type: i5$1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { kind: "component", type: SkyDocsCallSignatureDefinitionComponent, selector: "sky-docs-call-signature-definition", inputs: ["config"] }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "pipe", type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyDocsPropertyDefinitionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-docs-property-definitions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"properties\" class=\"sky-docs-property-definitions\">\n  <table *ngIf=\"!isMobile; else mobileTemplate\" class=\"sky-docs-table\">\n    <tr class=\"sky-docs-table-row\">\n      <th\n        class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n      >\n        {{ propertyType }}\n      </th>\n      <th\n        class=\"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\" class=\"sky-docs-table-row\">\n      <td\n        class=\"sky-docs-table-cell sky-docs-property-definitions-table-cell-name\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"nameTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: property }\"\n        ></ng-template>\n      </td>\n      <td\n        class=\"sky-docs-table-cell sky-docs-property-definitions-table-cell-description\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"descriptionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: property }\"\n        ></ng-template>\n      </td>\n    </tr>\n  </table>\n\n  <ng-template #mobileTemplate>\n    <dl class=\"sky-docs-property-definition-list\">\n      <div\n        *ngFor=\"let property of properties\"\n        class=\"sky-docs-property-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">{{ propertyType }}</dt>\n        <dd class=\"sky-docs-property-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-property-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n  </ng-template>\n</div>\n\n<ng-template let-property #nameTemplate>\n  <sky-code\n    ><span\n      [innerHtml]=\"\n        property.formattedName | skyDocsTypeAnchorLinks : 'no-code-tags'\n      \"\n    ></span\n  ></sky-code>\n</ng-template>\n\n<ng-template let-property #descriptionTemplate>\n  <div\n    *ngIf=\"!property.isOutput && !property.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label sky-text-danger\"\n  >\n    Required.\n  </div>\n\n  <sky-docs-safe-html\n    *ngIf=\"property.deprecationWarning !== undefined\"\n    class=\"sky-docs-property-definitions-deprecation-warning\"\n    [innerHtml]=\"\n      deprecationWarningPrefix + property.deprecationWarning\n        | skyDocsTypeAnchorLinks\n        | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <sky-docs-safe-html\n    *ngIf=\"property.description\"\n    class=\"sky-docs-property-definitions-description\"\n    [innerHtml]=\"\n      property.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <div\n    *ngIf=\"!property.isOutput && property.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label sky-docs-property-definition-label-optional\"\n  >\n    Optional.\n    <ng-container *ngIf=\"property.defaultValue\"\n      >Default is\n      <sky-code\n        ><span\n          [innerHtml]=\"\n            property.defaultValue | skyDocsTypeAnchorLinks : 'no-code-tags'\n          \"\n        ></span></sky-code\n      >.</ng-container\n    >\n  </div>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"property.callSignature\"\n    [config]=\"property.callSignature\"\n  ></sky-docs-call-signature-definition>\n</ng-template>\n", styles: [":host{margin:15px 0}.sky-docs-property-definitions{width:100%;max-width:100%;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"] }]
+            args: [{ selector: 'sky-docs-property-definitions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"properties\" class=\"sky-docs-property-definitions\">\n  <table *ngIf=\"!isMobile; else mobileTemplate\" class=\"sky-docs-table\">\n    <tr class=\"sky-docs-table-row\">\n      <th\n        class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n      >\n        {{ propertyType }}\n      </th>\n      <th\n        class=\"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\" class=\"sky-docs-table-row\">\n      <td\n        class=\"sky-docs-table-cell sky-docs-property-definitions-table-cell-name\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"nameTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: property }\"\n        ></ng-template>\n      </td>\n      <td\n        class=\"sky-docs-table-cell sky-docs-property-definitions-table-cell-description\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"descriptionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: property }\"\n        ></ng-template>\n      </td>\n    </tr>\n  </table>\n\n  <ng-template #mobileTemplate>\n    <dl class=\"sky-docs-property-definition-list\">\n      <div\n        *ngFor=\"let property of properties\"\n        class=\"sky-docs-property-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">{{ propertyType }}</dt>\n        <dd class=\"sky-docs-property-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-property-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: property }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n  </ng-template>\n</div>\n\n<ng-template let-property #nameTemplate>\n  <sky-code\n    ><span\n      [innerHtml]=\"\n        property.formattedName | skyDocsTypeAnchorLinks : 'no-code-tags'\n      \"\n    ></span\n  ></sky-code>\n</ng-template>\n\n<ng-template let-property #descriptionTemplate>\n  <div\n    *ngIf=\"!property.isOutput && !property.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label\"\n  >\n    <sky-status-indicator indicatorType=\"danger\" descriptionType=\"danger\"\n      >Required.</sky-status-indicator\n    >\n  </div>\n  <div\n    *ngIf=\"property.isPreview\"\n    class=\"sky-docs-property-definition-preview-warning sky-docs-property-definition-label\"\n  >\n    <sky-docs-preview-feature-indicator></sky-docs-preview-feature-indicator>\n  </div>\n\n  <sky-docs-safe-html\n    *ngIf=\"property.deprecationWarning !== undefined\"\n    class=\"sky-docs-property-definitions-deprecation-warning\"\n    [innerHtml]=\"\n      deprecationWarningPrefix + property.deprecationWarning\n        | skyDocsTypeAnchorLinks\n        | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <sky-docs-safe-html\n    *ngIf=\"property.description\"\n    class=\"sky-docs-property-definitions-description\"\n    [innerHtml]=\"\n      property.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <div\n    *ngIf=\"!property.isOutput && property.isOptional && showOptionalStatus\"\n    class=\"sky-docs-property-definition-label sky-docs-property-definition-label-optional\"\n  >\n    Optional.\n    <ng-container *ngIf=\"property.defaultValue\"\n      >Default is\n      <sky-code\n        ><span\n          [innerHtml]=\"\n            property.defaultValue | skyDocsTypeAnchorLinks : 'no-code-tags'\n          \"\n        ></span></sky-code\n      >.</ng-container\n    >\n  </div>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"property.callSignature\"\n    [config]=\"property.callSignature\"\n  ></sky-docs-call-signature-definition>\n</ng-template>\n", styles: [":host{margin:15px 0}.sky-docs-property-definitions{width:100%;max-width:100%;overflow:auto}.sky-docs-table-column-header-name{width:25%}.sky-docs-property-definition-label-optional{color:#686c73;margin-bottom:10px}.sky-docs-property-definition-list{margin:0}.sky-docs-property-definition-list-item{border-bottom:1px dotted #cdcfd2;margin:10px 0}.sky-docs-property-definition-list-item .sky-field-label{margin:10px 0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDocsTypeDefinitionsFormatService }, { type: i2.SkyMediaQueryService }]; }, propDecorators: { config: [{
                 type: Input
             }], propertyType: [{
@@ -1922,6 +1934,7 @@ class SkyDocsMethodDefinitionsComponent {
                     formattedName: this.#formatService.getFormattedMethodName(method),
                     sourceCode: this.#formatService.getMethodSourceCode(method),
                     isStatic: method.isStatic,
+                    isPreview: method.isPreview,
                 };
                 if (vm.isStatic) {
                     this.staticMethods.push(vm);
@@ -1933,11 +1946,11 @@ class SkyDocsMethodDefinitionsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyDocsMethodDefinitionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDocsTypeDefinitionsFormatService }, { token: i2.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkyDocsMethodDefinitionsComponent, selector: "sky-docs-method-definitions", inputs: { config: "config" }, ngImport: i0, template: "<div\n  *ngIf=\"methods?.length > 0 || staticMethods?.length > 0\"\n  class=\"sky-docs-method-definitions\"\n>\n  <ng-container *ngIf=\"!isMobile; else mobileTemplate\">\n    <table\n      class=\"sky-docs-table sky-docs-static-method-definitions\"\n      *ngIf=\"staticMethods?.length > 0\"\n    >\n      <tr class=\"sky-docs-table-row\">\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n        >\n          Static methods\n        </th>\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n        >\n          Description\n        </th>\n      </tr>\n      <tr *ngFor=\"let method of staticMethods\" class=\"sky-docs-table-row\">\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-description\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n      </tr>\n    </table>\n    <table\n      class=\"sky-docs-table sky-docs-standard-method-definitions\"\n      *ngIf=\"methods?.length > 0\"\n    >\n      <tr class=\"sky-docs-table-row\">\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n        >\n          Methods\n        </th>\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n        >\n          Description\n        </th>\n      </tr>\n      <tr *ngFor=\"let method of methods\" class=\"sky-docs-table-row\">\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-description\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n      </tr>\n    </table>\n  </ng-container>\n\n  <ng-template #mobileTemplate>\n    <dl\n      class=\"sky-docs-method-definition-list sky-docs-static-method-definitions\"\n      *ngIf=\"staticMethods?.length > 0\"\n    >\n      <div\n        *ngFor=\"let method of staticMethods\"\n        class=\"sky-docs-method-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">Static methods</dt>\n        <dd class=\"sky-docs-method-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-method-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n    <dl\n      class=\"sky-docs-method-definition-list sky-docs-standard-method-definitions\"\n      *ngIf=\"methods?.length > 0\"\n    >\n      <div\n        *ngFor=\"let method of methods\"\n        class=\"sky-docs-method-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">Methods</dt>\n        <dd class=\"sky-docs-method-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-method-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n  </ng-template>\n</div>\n\n<ng-template let-method #nameTemplate>\n  <sky-code\n    ><span\n      [innerHtml]=\"\n        method.formattedName | skyDocsTypeAnchorLinks : 'no-code-tags'\n      \"\n    ></span\n  ></sky-code>\n</ng-template>\n\n<ng-template let-method #descriptionTemplate>\n  <sky-docs-safe-html\n    *ngIf=\"method.deprecationWarning !== undefined\"\n    class=\"sky-docs-method-definition-deprecation-warning\"\n    [innerHtml]=\"\n      deprecationWarningPrefix + method.deprecationWarning\n        | skyDocsTypeAnchorLinks\n        | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <sky-docs-safe-html\n    *ngIf=\"method.description\"\n    class=\"sky-docs-method-definition-description\"\n    [innerHtml]=\"method.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block\n    *ngIf=\"method.sourceCode\"\n    class=\"sky-docs-code-block\"\n    languageType=\"typescript\"\n    [code]=\"method.sourceCode\"\n    [hideHeader]=\"true\"\n  ></sky-code-block>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"method.callSignature\"\n    [config]=\"method.callSignature\"\n  ></sky-docs-call-signature-definition>\n\n  <ng-container *ngIf=\"method.codeExample\">\n    <h4 class=\"sky-docs-method-definition-heading\">Example</h4>\n    <sky-code-block\n      *ngIf=\"method.codeExample\"\n      class=\"sky-docs-code-block\"\n      languageType=\"method.codeExampleLanguage\"\n      [code]=\"method.codeExample\"\n      [hideHeader]=\"true\"\n    ></sky-code-block>\n  </ng-container>\n</ng-template>\n", styles: [":host{margin:15px 0}.sky-docs-method-definitions{width:100%;max-width:100%;overflow:auto}.sky-docs-table-column-header-name{width:25%}.sky-docs-method-definition-label-optional{color:#686c73}.sky-docs-method-definition-list{margin:0}.sky-docs-method-definition-list-item{border-bottom:1px dotted #cdcfd2;margin:10px 0}.sky-docs-method-definition-list-item .sky-field-label{margin:10px 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { kind: "component", type: i4.λ1, selector: "sky-code" }, { kind: "component", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { kind: "component", type: SkyDocsCallSignatureDefinitionComponent, selector: "sky-docs-call-signature-definition", inputs: ["config"] }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "pipe", type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkyDocsMethodDefinitionsComponent, selector: "sky-docs-method-definitions", inputs: { config: "config" }, ngImport: i0, template: "<div\n  *ngIf=\"methods?.length > 0 || staticMethods?.length > 0\"\n  class=\"sky-docs-method-definitions\"\n>\n  <ng-container *ngIf=\"!isMobile; else mobileTemplate\">\n    <table\n      class=\"sky-docs-table sky-docs-static-method-definitions\"\n      *ngIf=\"staticMethods?.length > 0\"\n    >\n      <tr class=\"sky-docs-table-row\">\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n        >\n          Static methods\n        </th>\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n        >\n          Description\n        </th>\n      </tr>\n      <tr *ngFor=\"let method of staticMethods\" class=\"sky-docs-table-row\">\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-description\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n      </tr>\n    </table>\n    <table\n      class=\"sky-docs-table sky-docs-standard-method-definitions\"\n      *ngIf=\"methods?.length > 0\"\n    >\n      <tr class=\"sky-docs-table-row\">\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n        >\n          Methods\n        </th>\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n        >\n          Description\n        </th>\n      </tr>\n      <tr *ngFor=\"let method of methods\" class=\"sky-docs-table-row\">\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-description\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n      </tr>\n    </table>\n  </ng-container>\n\n  <ng-template #mobileTemplate>\n    <dl\n      class=\"sky-docs-method-definition-list sky-docs-static-method-definitions\"\n      *ngIf=\"staticMethods?.length > 0\"\n    >\n      <div\n        *ngFor=\"let method of staticMethods\"\n        class=\"sky-docs-method-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">Static methods</dt>\n        <dd class=\"sky-docs-method-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-method-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n    <dl\n      class=\"sky-docs-method-definition-list sky-docs-standard-method-definitions\"\n      *ngIf=\"methods?.length > 0\"\n    >\n      <div\n        *ngFor=\"let method of methods\"\n        class=\"sky-docs-method-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">Methods</dt>\n        <dd class=\"sky-docs-method-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-method-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n  </ng-template>\n</div>\n\n<ng-template let-method #nameTemplate>\n  <sky-code\n    ><span\n      [innerHtml]=\"\n        method.formattedName | skyDocsTypeAnchorLinks : 'no-code-tags'\n      \"\n    ></span\n  ></sky-code>\n</ng-template>\n\n<ng-template let-method #descriptionTemplate>\n  <div\n    *ngIf=\"method.isPreview\"\n    class=\"sky-docs-method-definition-preview-warning sky-docs-property-definition-label\"\n  >\n    <sky-docs-preview-feature-indicator></sky-docs-preview-feature-indicator>\n  </div>\n\n  <sky-docs-safe-html\n    *ngIf=\"method.deprecationWarning !== undefined\"\n    class=\"sky-docs-method-definition-deprecation-warning\"\n    [innerHtml]=\"\n      deprecationWarningPrefix + method.deprecationWarning\n        | skyDocsTypeAnchorLinks\n        | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <sky-docs-safe-html\n    *ngIf=\"method.description\"\n    class=\"sky-docs-method-definition-description\"\n    [innerHtml]=\"method.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block\n    *ngIf=\"method.sourceCode\"\n    class=\"sky-docs-code-block\"\n    languageType=\"typescript\"\n    [code]=\"method.sourceCode\"\n    [hideHeader]=\"true\"\n  ></sky-code-block>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"method.callSignature\"\n    [config]=\"method.callSignature\"\n  ></sky-docs-call-signature-definition>\n\n  <ng-container *ngIf=\"method.codeExample\">\n    <h4 class=\"sky-docs-method-definition-heading\">Example</h4>\n    <sky-code-block\n      *ngIf=\"method.codeExample\"\n      class=\"sky-docs-code-block\"\n      languageType=\"method.codeExampleLanguage\"\n      [code]=\"method.codeExample\"\n      [hideHeader]=\"true\"\n    ></sky-code-block>\n  </ng-container>\n</ng-template>\n", styles: [":host{margin:15px 0}.sky-docs-method-definitions{width:100%;max-width:100%;overflow:auto}.sky-docs-table-column-header-name{width:25%}.sky-docs-method-definition-label-optional{color:#686c73}.sky-docs-method-definition-list{margin:0}.sky-docs-method-definition-list-item{border-bottom:1px dotted #cdcfd2;margin:10px 0}.sky-docs-method-definition-list-item .sky-field-label{margin:10px 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { kind: "component", type: i4.λ1, selector: "sky-code" }, { kind: "component", type: SkyDocsPreviewIndicatorComponent, selector: "sky-docs-preview-feature-indicator" }, { kind: "component", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { kind: "component", type: SkyDocsCallSignatureDefinitionComponent, selector: "sky-docs-call-signature-definition", inputs: ["config"] }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "pipe", type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyDocsMethodDefinitionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-docs-method-definitions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"methods?.length > 0 || staticMethods?.length > 0\"\n  class=\"sky-docs-method-definitions\"\n>\n  <ng-container *ngIf=\"!isMobile; else mobileTemplate\">\n    <table\n      class=\"sky-docs-table sky-docs-static-method-definitions\"\n      *ngIf=\"staticMethods?.length > 0\"\n    >\n      <tr class=\"sky-docs-table-row\">\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n        >\n          Static methods\n        </th>\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n        >\n          Description\n        </th>\n      </tr>\n      <tr *ngFor=\"let method of staticMethods\" class=\"sky-docs-table-row\">\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-description\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n      </tr>\n    </table>\n    <table\n      class=\"sky-docs-table sky-docs-standard-method-definitions\"\n      *ngIf=\"methods?.length > 0\"\n    >\n      <tr class=\"sky-docs-table-row\">\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n        >\n          Methods\n        </th>\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n        >\n          Description\n        </th>\n      </tr>\n      <tr *ngFor=\"let method of methods\" class=\"sky-docs-table-row\">\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-description\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n      </tr>\n    </table>\n  </ng-container>\n\n  <ng-template #mobileTemplate>\n    <dl\n      class=\"sky-docs-method-definition-list sky-docs-static-method-definitions\"\n      *ngIf=\"staticMethods?.length > 0\"\n    >\n      <div\n        *ngFor=\"let method of staticMethods\"\n        class=\"sky-docs-method-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">Static methods</dt>\n        <dd class=\"sky-docs-method-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-method-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n    <dl\n      class=\"sky-docs-method-definition-list sky-docs-standard-method-definitions\"\n      *ngIf=\"methods?.length > 0\"\n    >\n      <div\n        *ngFor=\"let method of methods\"\n        class=\"sky-docs-method-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">Methods</dt>\n        <dd class=\"sky-docs-method-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-method-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n  </ng-template>\n</div>\n\n<ng-template let-method #nameTemplate>\n  <sky-code\n    ><span\n      [innerHtml]=\"\n        method.formattedName | skyDocsTypeAnchorLinks : 'no-code-tags'\n      \"\n    ></span\n  ></sky-code>\n</ng-template>\n\n<ng-template let-method #descriptionTemplate>\n  <sky-docs-safe-html\n    *ngIf=\"method.deprecationWarning !== undefined\"\n    class=\"sky-docs-method-definition-deprecation-warning\"\n    [innerHtml]=\"\n      deprecationWarningPrefix + method.deprecationWarning\n        | skyDocsTypeAnchorLinks\n        | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <sky-docs-safe-html\n    *ngIf=\"method.description\"\n    class=\"sky-docs-method-definition-description\"\n    [innerHtml]=\"method.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block\n    *ngIf=\"method.sourceCode\"\n    class=\"sky-docs-code-block\"\n    languageType=\"typescript\"\n    [code]=\"method.sourceCode\"\n    [hideHeader]=\"true\"\n  ></sky-code-block>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"method.callSignature\"\n    [config]=\"method.callSignature\"\n  ></sky-docs-call-signature-definition>\n\n  <ng-container *ngIf=\"method.codeExample\">\n    <h4 class=\"sky-docs-method-definition-heading\">Example</h4>\n    <sky-code-block\n      *ngIf=\"method.codeExample\"\n      class=\"sky-docs-code-block\"\n      languageType=\"method.codeExampleLanguage\"\n      [code]=\"method.codeExample\"\n      [hideHeader]=\"true\"\n    ></sky-code-block>\n  </ng-container>\n</ng-template>\n", styles: [":host{margin:15px 0}.sky-docs-method-definitions{width:100%;max-width:100%;overflow:auto}.sky-docs-table-column-header-name{width:25%}.sky-docs-method-definition-label-optional{color:#686c73}.sky-docs-method-definition-list{margin:0}.sky-docs-method-definition-list-item{border-bottom:1px dotted #cdcfd2;margin:10px 0}.sky-docs-method-definition-list-item .sky-field-label{margin:10px 0}\n"] }]
+            args: [{ selector: 'sky-docs-method-definitions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"methods?.length > 0 || staticMethods?.length > 0\"\n  class=\"sky-docs-method-definitions\"\n>\n  <ng-container *ngIf=\"!isMobile; else mobileTemplate\">\n    <table\n      class=\"sky-docs-table sky-docs-static-method-definitions\"\n      *ngIf=\"staticMethods?.length > 0\"\n    >\n      <tr class=\"sky-docs-table-row\">\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n        >\n          Static methods\n        </th>\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n        >\n          Description\n        </th>\n      </tr>\n      <tr *ngFor=\"let method of staticMethods\" class=\"sky-docs-table-row\">\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-description\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n      </tr>\n    </table>\n    <table\n      class=\"sky-docs-table sky-docs-standard-method-definitions\"\n      *ngIf=\"methods?.length > 0\"\n    >\n      <tr class=\"sky-docs-table-row\">\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-name\"\n        >\n          Methods\n        </th>\n        <th\n          class=\"sky-docs-table-column-header sky-docs-table-column-header-description\"\n        >\n          Description\n        </th>\n      </tr>\n      <tr *ngFor=\"let method of methods\" class=\"sky-docs-table-row\">\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-name\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n        <td\n          class=\"sky-docs-table-cell sky-docs-method-definitions-table-cell-description\"\n        >\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </td>\n      </tr>\n    </table>\n  </ng-container>\n\n  <ng-template #mobileTemplate>\n    <dl\n      class=\"sky-docs-method-definition-list sky-docs-static-method-definitions\"\n      *ngIf=\"staticMethods?.length > 0\"\n    >\n      <div\n        *ngFor=\"let method of staticMethods\"\n        class=\"sky-docs-method-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">Static methods</dt>\n        <dd class=\"sky-docs-method-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-method-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n    <dl\n      class=\"sky-docs-method-definition-list sky-docs-standard-method-definitions\"\n      *ngIf=\"methods?.length > 0\"\n    >\n      <div\n        *ngFor=\"let method of methods\"\n        class=\"sky-docs-method-definition-list-item\"\n      >\n        <dt class=\"sky-field-label\">Methods</dt>\n        <dd class=\"sky-docs-method-definitions-dd-name\">\n          <ng-template\n            [ngTemplateOutlet]=\"nameTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n        <dt class=\"sky-field-label\">Description</dt>\n        <dd class=\"sky-docs-method-definitions-dd-description\">\n          <ng-template\n            [ngTemplateOutlet]=\"descriptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: method }\"\n          ></ng-template>\n        </dd>\n      </div>\n    </dl>\n  </ng-template>\n</div>\n\n<ng-template let-method #nameTemplate>\n  <sky-code\n    ><span\n      [innerHtml]=\"\n        method.formattedName | skyDocsTypeAnchorLinks : 'no-code-tags'\n      \"\n    ></span\n  ></sky-code>\n</ng-template>\n\n<ng-template let-method #descriptionTemplate>\n  <div\n    *ngIf=\"method.isPreview\"\n    class=\"sky-docs-method-definition-preview-warning sky-docs-property-definition-label\"\n  >\n    <sky-docs-preview-feature-indicator></sky-docs-preview-feature-indicator>\n  </div>\n\n  <sky-docs-safe-html\n    *ngIf=\"method.deprecationWarning !== undefined\"\n    class=\"sky-docs-method-definition-deprecation-warning\"\n    [innerHtml]=\"\n      deprecationWarningPrefix + method.deprecationWarning\n        | skyDocsTypeAnchorLinks\n        | skyDocsMarkdown\n    \"\n  ></sky-docs-safe-html>\n\n  <sky-docs-safe-html\n    *ngIf=\"method.description\"\n    class=\"sky-docs-method-definition-description\"\n    [innerHtml]=\"method.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block\n    *ngIf=\"method.sourceCode\"\n    class=\"sky-docs-code-block\"\n    languageType=\"typescript\"\n    [code]=\"method.sourceCode\"\n    [hideHeader]=\"true\"\n  ></sky-code-block>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"method.callSignature\"\n    [config]=\"method.callSignature\"\n  ></sky-docs-call-signature-definition>\n\n  <ng-container *ngIf=\"method.codeExample\">\n    <h4 class=\"sky-docs-method-definition-heading\">Example</h4>\n    <sky-code-block\n      *ngIf=\"method.codeExample\"\n      class=\"sky-docs-code-block\"\n      languageType=\"method.codeExampleLanguage\"\n      [code]=\"method.codeExample\"\n      [hideHeader]=\"true\"\n    ></sky-code-block>\n  </ng-container>\n</ng-template>\n", styles: [":host{margin:15px 0}.sky-docs-method-definitions{width:100%;max-width:100%;overflow:auto}.sky-docs-table-column-header-name{width:25%}.sky-docs-method-definition-label-optional{color:#686c73}.sky-docs-method-definition-list{margin:0}.sky-docs-method-definition-list-item{border-bottom:1px dotted #cdcfd2;margin:10px 0}.sky-docs-method-definition-list-item .sky-field-label{margin:10px 0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDocsTypeDefinitionsFormatService }, { type: i2.SkyMediaQueryService }]; }, propDecorators: { config: [{
                 type: Input
             }] } });
@@ -1981,11 +1994,11 @@ class SkyDocsTypeAliasDefinitionComponent {
             : undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyDocsTypeAliasDefinitionComponent, deps: [{ token: SkyDocsTypeDefinitionsFormatService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkyDocsTypeAliasDefinitionComponent, selector: "sky-docs-type-alias-definition", inputs: { config: "config" }, ngImport: i0, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-type-alias-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    class=\"sky-docs-type-alias-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block\n    *ngIf=\"sourceCode\"\n    class=\"sky-docs-code-block\"\n    languageType=\"typescript\"\n    [code]=\"sourceCode\"\n    [hideHeader]=\"true\"\n  ></sky-code-block>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"config.type.callSignature\"\n    [config]=\"config.type.callSignature\"\n  ></sky-docs-call-signature-definition>\n</div>\n", styles: [".sky-docs-type-alias-definition-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}.sky-docs-type-alias-definition-return-type{margin-left:15px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { kind: "component", type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }, { kind: "component", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { kind: "component", type: SkyDocsCallSignatureDefinitionComponent, selector: "sky-docs-call-signature-definition", inputs: ["config"] }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "pipe", type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkyDocsTypeAliasDefinitionComponent, selector: "sky-docs-type-alias-definition", inputs: { config: "config" }, ngImport: i0, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-type-alias-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <div\n    *ngIf=\"config.isPreview\"\n    class=\"sky-docs-type-alias-preview-warning sky-docs-property-definition-label\"\n  >\n    <sky-docs-preview-feature-indicator></sky-docs-preview-feature-indicator>\n  </div>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    class=\"sky-docs-type-alias-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block\n    *ngIf=\"sourceCode\"\n    class=\"sky-docs-code-block\"\n    languageType=\"typescript\"\n    [code]=\"sourceCode\"\n    [hideHeader]=\"true\"\n  ></sky-code-block>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"config.type.callSignature\"\n    [config]=\"config.type.callSignature\"\n  ></sky-docs-call-signature-definition>\n</div>\n", styles: [".sky-docs-type-alias-definition-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}.sky-docs-type-alias-definition-return-type{margin-left:15px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { kind: "component", type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }, { kind: "component", type: SkyDocsPreviewIndicatorComponent, selector: "sky-docs-preview-feature-indicator" }, { kind: "component", type: SkyDocsSafeHtmlComponent, selector: "sky-docs-safe-html", inputs: ["innerHtml"] }, { kind: "component", type: SkyDocsCallSignatureDefinitionComponent, selector: "sky-docs-call-signature-definition", inputs: ["config"] }, { kind: "pipe", type: SkyDocsMarkdownPipe, name: "skyDocsMarkdown" }, { kind: "pipe", type: SkyDocsTypeAnchorLinksPipe, name: "skyDocsTypeAnchorLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyDocsTypeAliasDefinitionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-docs-type-alias-definition', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-type-alias-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    class=\"sky-docs-type-alias-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block\n    *ngIf=\"sourceCode\"\n    class=\"sky-docs-code-block\"\n    languageType=\"typescript\"\n    [code]=\"sourceCode\"\n    [hideHeader]=\"true\"\n  ></sky-code-block>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"config.type.callSignature\"\n    [config]=\"config.type.callSignature\"\n  ></sky-docs-call-signature-definition>\n</div>\n", styles: [".sky-docs-type-alias-definition-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}.sky-docs-type-alias-definition-return-type{margin-left:15px}\n"] }]
+            args: [{ selector: 'sky-docs-type-alias-definition', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"config\"\n  class=\"sky-docs-type-alias-definition sky-docs-type-definition-wrapper\"\n>\n  <sky-docs-heading-anchor headingLevel=\"3\" [anchorId]=\"config.anchorId\">\n    {{ config.name }}\n  </sky-docs-heading-anchor>\n\n  <div\n    *ngIf=\"config.isPreview\"\n    class=\"sky-docs-type-alias-preview-warning sky-docs-property-definition-label\"\n  >\n    <sky-docs-preview-feature-indicator></sky-docs-preview-feature-indicator>\n  </div>\n\n  <sky-docs-safe-html\n    *ngIf=\"config.description\"\n    class=\"sky-docs-type-alias-definition-description\"\n    [innerHtml]=\"config.description | skyDocsTypeAnchorLinks | skyDocsMarkdown\"\n  ></sky-docs-safe-html>\n\n  <sky-code-block\n    *ngIf=\"sourceCode\"\n    class=\"sky-docs-code-block\"\n    languageType=\"typescript\"\n    [code]=\"sourceCode\"\n    [hideHeader]=\"true\"\n  ></sky-code-block>\n\n  <sky-docs-call-signature-definition\n    *ngIf=\"config.type.callSignature\"\n    [config]=\"config.type.callSignature\"\n  ></sky-docs-call-signature-definition>\n</div>\n", styles: [".sky-docs-type-alias-definition-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;font-weight:400;font-weight:600;font-size:15px;margin:0 0 10px}.sky-docs-type-alias-definition-return-type{margin-left:15px}\n"] }]
         }], ctorParameters: function () { return [{ type: SkyDocsTypeDefinitionsFormatService }]; }, propDecorators: { config: [{
                 type: Input
             }] } });
@@ -2008,8 +2021,10 @@ class SkyDocsTypeDefinitionsModule {
             SkyDefinitionListModule,
             SkyDocsHeadingAnchorModule,
             SkyDocsMarkdownModule,
+            SkyDocsPreviewIndicatorComponent,
             SkyDocsSafeHtmlModule,
-            SkyIconModule], exports: [SkyDocsCallSignatureDefinitionComponent,
+            SkyIconModule,
+            SkyStatusIndicatorModule], exports: [SkyDocsCallSignatureDefinitionComponent,
             SkyDocsClassDefinitionComponent,
             SkyDocsDirectiveDefinitionComponent,
             SkyDocsEnumerationDefinitionComponent,
@@ -2026,8 +2041,10 @@ class SkyDocsTypeDefinitionsModule {
             SkyDefinitionListModule,
             SkyDocsHeadingAnchorModule,
             SkyDocsMarkdownModule,
+            SkyDocsPreviewIndicatorComponent,
             SkyDocsSafeHtmlModule,
-            SkyIconModule] }); }
+            SkyIconModule,
+            SkyStatusIndicatorModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyDocsTypeDefinitionsModule, decorators: [{
             type: NgModule,
@@ -2040,8 +2057,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         SkyDefinitionListModule,
                         SkyDocsHeadingAnchorModule,
                         SkyDocsMarkdownModule,
+                        SkyDocsPreviewIndicatorComponent,
                         SkyDocsSafeHtmlModule,
                         SkyIconModule,
+                        SkyStatusIndicatorModule,
                     ],
                     declarations: [
                         SkyDocsCallSignatureDefinitionComponent,
@@ -2208,6 +2227,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: i2.SkyAppWindowRef }]; } });
 
+class SkyDocsToolsSiteOptions {
+}
+
 class SkyDocsSupportalService {
     constructor(http) {
         this.http = http;
@@ -2297,6 +2319,7 @@ class SkyDocsTypeDocAdapterService {
         const definition = {
             anchorId: this.getAnchorId(entry),
             name: entry.name,
+            hasPreviewFeatures: false,
         };
         const tags = this.getCommentTags(entry.comment);
         this.applyCommentTagValues(definition, tags);
@@ -2308,6 +2331,9 @@ class SkyDocsTypeDocAdapterService {
         if (properties.length) {
             definition.properties = properties;
         }
+        definition.hasPreviewFeatures =
+            !!definition.methods?.some((method) => method.isPreview) ||
+                !!definition.properties?.some((property) => property.isPreview);
         return definition;
     }
     toDirectiveDefinition(entry) {
@@ -2315,6 +2341,7 @@ class SkyDocsTypeDocAdapterService {
             anchorId: this.getAnchorId(entry),
             name: entry.name,
             selector: this.getSelector(entry),
+            hasPreviewFeatures: false,
         };
         const tags = this.getCommentTags(entry.comment);
         this.applyCommentTagValues(definition, tags);
@@ -2327,6 +2354,9 @@ class SkyDocsTypeDocAdapterService {
         if (inputProperties.length) {
             definition.inputProperties = inputProperties;
         }
+        definition.hasPreviewFeatures =
+            !!definition.inputProperties?.some((property) => property.isPreview) ||
+                !!definition.eventProperties?.some((property) => property.isPreview);
         return definition;
     }
     toEnumerationDefinition(entry) {
@@ -2335,6 +2365,7 @@ class SkyDocsTypeDocAdapterService {
             anchorId: this.getAnchorId(entry),
             members,
             name: entry.name,
+            hasPreviewFeatures: !!members.find((member) => member.isPreview),
         };
         const tags = this.getCommentTags(entry.comment);
         this.applyCommentTagValues(definition, tags);
@@ -2345,6 +2376,7 @@ class SkyDocsTypeDocAdapterService {
         const definition = {
             anchorId: this.getAnchorId(entry),
             name: entry.name,
+            hasPreviewFeatures: !!properties.find((member) => member.isPreview),
             properties,
         };
         const tags = this.getCommentTags(entry.comment);
@@ -2371,6 +2403,7 @@ class SkyDocsTypeDocAdapterService {
         const definition = {
             anchorId: this.getAnchorId(entry),
             name: entry.name,
+            isPreview: false,
             type: this.getTypeDefinition({
                 comment: entry.comment,
                 type: entry.type,
@@ -2412,6 +2445,7 @@ class SkyDocsTypeDocAdapterService {
             .map((child) => {
             let definition = {
                 isOptional: true,
+                isPreview: false,
                 name: this.getPropertyName(child),
                 type: this.getTypeDefinition(child),
             };
@@ -2499,6 +2533,7 @@ class SkyDocsTypeDocAdapterService {
                 name: this.getPropertyName(child),
                 type: this.getTypeDefinition(child),
                 isStatic: !!child.flags?.isStatic,
+                isPreview: false,
                 parentName: entry.name,
             };
             // Comments for methods are stored in a different location.
@@ -2531,6 +2566,7 @@ class SkyDocsTypeDocAdapterService {
             }
             const definition = {
                 isOptional: tags.extras.required ? false : !!child.flags?.isOptional,
+                isPreview: false,
                 name: this.getPropertyName(child),
                 type: this.getTypeDefinition(child),
             };
@@ -2543,6 +2579,7 @@ class SkyDocsTypeDocAdapterService {
             const indexSignature = entry.indexSignature;
             const definition = {
                 isOptional: true,
+                isPreview: false,
                 name: indexSignature.name,
                 type: {
                     indexSignature: this.getIndexSignatureDefinition(indexSignature),
@@ -2567,6 +2604,7 @@ class SkyDocsTypeDocAdapterService {
         return entry.children.map((child) => {
             const definition = {
                 name: child.name,
+                isPreview: false,
             };
             const tags = this.getCommentTags(child.comment);
             this.applyCommentTagValues(definition, tags);
@@ -2764,6 +2802,9 @@ class SkyDocsTypeDocAdapterService {
                                     .trim(),
                             });
                             break;
+                        case '@preview':
+                            extras['preview'] = true;
+                            break;
                         case '@required':
                             extras['required'] = true;
                             break;
@@ -2821,6 +2862,9 @@ class SkyDocsTypeDocAdapterService {
         if (tags.description) {
             definition.description = tags.description;
         }
+        if (tags.extras?.preview) {
+            definition.isPreview = tags.extras?.preview;
+        }
     }
     getDecorator(child) {
         const name = child.decorators && child.decorators[0] && child.decorators[0].name;
@@ -2900,6 +2944,7 @@ class SkyDocsTypeDefinitionsService {
             pipes: [],
             services: [],
             typeAliases: [],
+            hasPreviewFeatures: false,
         };
         if (!allDefinitions) {
             console.warn(`No types were found for this project!`);
@@ -2919,34 +2964,50 @@ class SkyDocsTypeDefinitionsService {
                 const kind = item.kind;
                 switch (decorator) {
                     case 'Component':
-                        types.components.push(this.adapter.toDirectiveDefinition(item));
+                        const componentType = this.adapter.toDirectiveDefinition(item);
+                        types.components.push(componentType);
+                        types.hasPreviewFeatures ||= componentType.hasPreviewFeatures;
                         break;
                     case 'Directive':
-                        types.directives.push(this.adapter.toDirectiveDefinition(item));
+                        const directiveType = this.adapter.toDirectiveDefinition(item);
+                        types.directives.push(directiveType);
+                        types.hasPreviewFeatures ||= directiveType.hasPreviewFeatures;
                         break;
                     case 'Injectable':
-                        types.services.push(this.adapter.toClassDefinition(item));
+                        const serviceType = this.adapter.toClassDefinition(item);
+                        types.services.push(serviceType);
+                        types.hasPreviewFeatures ||= serviceType.hasPreviewFeatures;
                         break;
                     case 'NgModule':
                         // Don't document modules.
                         break;
                     case 'Pipe':
-                        types.pipes.push(this.adapter.toPipeDefinition(item));
+                        const pipeType = this.adapter.toPipeDefinition(item);
+                        types.pipes.push(pipeType);
+                        types.hasPreviewFeatures ||= pipeType.transformMethod.isPreview;
                         break;
                     default:
                         /*tslint:disable-next-line:switch-default*/
                         switch (kind) {
                             case TypeDocKind.Class:
-                                types.classes.push(this.adapter.toClassDefinition(item));
+                                const classType = this.adapter.toClassDefinition(item);
+                                types.classes.push(classType);
+                                types.hasPreviewFeatures ||= classType.hasPreviewFeatures;
                                 break;
                             case TypeDocKind.Interface:
-                                types.interfaces.push(this.adapter.toInterfaceDefinition(item));
+                                const interfaceType = this.adapter.toInterfaceDefinition(item);
+                                types.interfaces.push(interfaceType);
+                                types.hasPreviewFeatures ||= interfaceType.hasPreviewFeatures;
                                 break;
                             case TypeDocKind.Enum:
-                                types.enumerations.push(this.adapter.toEnumerationDefinition(item));
+                                const enumType = this.adapter.toEnumerationDefinition(item);
+                                types.enumerations.push(enumType);
+                                types.hasPreviewFeatures ||= enumType.hasPreviewFeatures;
                                 break;
                             case TypeDocKind.TypeAlias:
-                                types.typeAliases.push(this.adapter.toTypeAliasDefinition(item));
+                                const typeAliasType = this.adapter.toTypeAliasDefinition(item);
+                                types.typeAliases.push(typeAliasType);
+                                types.hasPreviewFeatures ||= !!typeAliasType.isPreview;
                                 break;
                         }
                 }
@@ -3046,6 +3107,8 @@ class SkyDocsDemoPageComponent {
          * @internal
          */
         this.enableTabLayout = false;
+        this.hasPreviewFeatures = false;
+        this.siteOptions = inject(SkyDocsToolsSiteOptions, { optional: true });
     }
     ngOnInit() {
         const currentHostUrl = this.skyAppConfig.skyux.host.url + '/' + this.skyAppConfig.skyux.name;
@@ -3117,11 +3180,11 @@ class SkyDocsDemoPageComponent {
         this.enableTestingTab = Object.values(this.testingTypeDefinitions).some((value) => value && value.length > 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyDocsDemoPageComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i1$3.Router }, { token: i2$1.SkyAppConfig }, { token: SkyDocsDemoPageDomAdapterService }, { token: SkyDocsSupportalService }, { token: SkyDocsDemoPageTitleService }, { token: SkyDocsTypeDefinitionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkyDocsDemoPageComponent, selector: "sky-docs-demo-page", inputs: { additionalSourceCodePaths: "additionalSourceCodePaths", additionalTestingSourceCodePaths: "additionalTestingSourceCodePaths", gitRepoUrl: "gitRepoUrl", moduleName: "moduleName", moduleSourceCodePath: "moduleSourceCodePath", packageName: "packageName", packageUrl: "packageUrl", pageTitle: "pageTitle" }, providers: [SkyDocsDemoPageDomAdapterService], queries: [{ propertyName: "designGuidelinesComponent", first: true, predicate: SkyDocsDesignGuidelinesComponent, descendants: true }, { propertyName: "codeExampleComponents", predicate: SkyDocsCodeExamplesComponent }], ngImport: i0, template: "<div class=\"sky-docs-demo-page\">\n  <stache\n    layout=\"sidebar\"\n    [pageTitle]=\"pageTitle\"\n    [showBreadcrumbs]=\"false\"\n    [showTableOfContents]=\"false\"\n    [sidebarRoutes]=\"sidebarRoutes\"\n  >\n    <ng-content select=\"sky-docs-demo-page-summary\"></ng-content>\n\n    <ng-content select=\"sky-docs-demo\"></ng-content>\n\n    <div class=\"sky-docs-demo-page-main\">\n      <sky-tabset *ngIf=\"enableTabLayout; else content\" permalinkId=\"docs\">\n        <sky-tab tabHeading=\"Design\" *ngIf=\"!!designGuidelinesComponent\">\n          <ng-content select=\"sky-docs-design-guidelines\"></ng-content>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Development\">\n          <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Testing\" *ngIf=\"enableTestingTab\">\n          <sky-docs-demo-page-section heading=\"Test harnesses\">\n            <p>\n              SKY UX test harnesses are built upon Angular CDK component\n              harnesses. For more information see the\n              <a href=\"https://material.angular.io/cdk/test-harnesses/overview\"\n                >Angular CDK component harness documentation</a\n              >.\n            </p>\n          </sky-docs-demo-page-section>\n          <sky-docs-demo-page-type-definitions [types]=\"testingTypeDefinitions\">\n          </sky-docs-demo-page-type-definitions>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Code examples\" *ngIf=\"enableCodeExamples\">\n          <ng-content select=\"sky-docs-code-examples\"></ng-content>\n        </sky-tab>\n      </sky-tabset>\n    </div>\n  </stache>\n</div>\n\n<ng-template #content>\n  <sky-docs-demo-page-section\n    *ngIf=\"moduleName || packageName\"\n    heading=\"Installation\"\n  >\n    <sky-docs-module-info\n      [gitRepoUrl]=\"gitRepoUrl\"\n      [moduleName]=\"moduleName\"\n      [packageName]=\"packageName\"\n      [packageUrl]=\"packageUrl\"\n    >\n      <ng-content select=\"sky-docs-demo-page-module-info\"></ng-content>\n    </sky-docs-module-info>\n  </sky-docs-demo-page-section>\n\n  <ng-content></ng-content>\n\n  <sky-docs-demo-page-type-definitions [types]=\"moduleTypeDefinitions\">\n  </sky-docs-demo-page-type-definitions>\n</ng-template>\n", styles: [".sky-docs-demo-page ::ng-deep p{margin:15px 0}.sky-docs-demo-page ::ng-deep .stache-max-width-container{max-width:none;margin:0}.sky-docs-demo-page ::ng-deep .sky-docs-code-block{margin:15px 0;display:block}.sky-docs-demo-page ::ng-deep .sky-docs-code-block .sky-code-block{font-size:13.5px}.sky-docs-demo-page ::ng-deep .sky-docs-code-block .sky-code-output{margin:-2px 0 0;padding:0 0 0 15px;background:transparent;border:0}.sky-docs-demo-page ::ng-deep .sky-definition-list{margin:0}.sky-docs-demo-page ::ng-deep .sky-definition-list .sky-docs-code-block{margin:0}.sky-docs-demo-page ::ng-deep .sky-docs-type-definition-wrapper{margin-bottom:40px}.sky-docs-demo-page-main{padding:30px 0}.sky-docs-demo-page-main table{margin-top:15px;margin-bottom:15px}.sky-docs-demo-page-main ::ng-deep .sky-tabset{margin-left:-45px;margin-right:-45px;padding-left:45px;padding-right:45px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyDocsModuleInfoComponent, selector: "sky-docs-module-info", inputs: ["gitRepoUrl", "moduleName", "packageName", "packageUrl"] }, { kind: "component", type: i7.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndex", "layout"], outputs: ["close"] }, { kind: "component", type: i7.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "component", type: i10.λ30, selector: "stache", inputs: ["pageTitle", "windowTitle", "navTitle", "layout", "sidebarRoutes", "breadcrumbsRoutes", "showBreadcrumbs", "showEditButton", "showFooter", "showTableOfContents", "showBackToTop", "showInNav", "inPageRoutes"] }, { kind: "component", type: SkyDocsDemoPageSectionComponent, selector: "sky-docs-demo-page-section", inputs: ["heading"] }, { kind: "component", type: SkyDocsDemoPageTypeDefinitionsComponent, selector: "sky-docs-demo-page-type-definitions", inputs: ["types"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SkyDocsDemoPageComponent, selector: "sky-docs-demo-page", inputs: { additionalSourceCodePaths: "additionalSourceCodePaths", additionalTestingSourceCodePaths: "additionalTestingSourceCodePaths", gitRepoUrl: "gitRepoUrl", moduleName: "moduleName", moduleSourceCodePath: "moduleSourceCodePath", packageName: "packageName", packageUrl: "packageUrl", pageTitle: "pageTitle" }, providers: [SkyDocsDemoPageDomAdapterService], queries: [{ propertyName: "designGuidelinesComponent", first: true, predicate: SkyDocsDesignGuidelinesComponent, descendants: true }, { propertyName: "codeExampleComponents", predicate: SkyDocsCodeExamplesComponent }], ngImport: i0, template: "<div class=\"sky-docs-demo-page\">\n  <stache\n    layout=\"sidebar\"\n    [pageTitle]=\"pageTitle\"\n    [showBreadcrumbs]=\"false\"\n    [showTableOfContents]=\"false\"\n    [sidebarRoutes]=\"sidebarRoutes\"\n  >\n    <ng-content select=\"sky-docs-demo-page-summary\"></ng-content>\n\n    <sky-alert\n      *ngIf=\"\n        moduleTypeDefinitions?.hasPreviewFeatures ||\n        testingTypeDefinitions?.hasPreviewFeatures\n      \"\n      class=\"sky-docs-demo-page-preview-alert sky-margin-stacked-lg\"\n      >This component currently has preview features available that may not be\n      fully represented in the design documentation, the demo, or code examples.\n      <ng-container *ngIf=\"siteOptions?.previewFeaturesUrl\"\n        >Learn more about this work\n        <a [skyAppLink]=\"siteOptions?.previewFeaturesUrl\"\n          >here.</a\n        ></ng-container\n      ></sky-alert\n    >\n\n    <ng-content select=\"sky-docs-demo\"></ng-content>\n\n    <div class=\"sky-docs-demo-page-main\">\n      <sky-tabset *ngIf=\"enableTabLayout; else content\" permalinkId=\"docs\">\n        <sky-tab tabHeading=\"Design\" *ngIf=\"!!designGuidelinesComponent\">\n          <ng-content select=\"sky-docs-design-guidelines\"></ng-content>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Development\">\n          <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Testing\" *ngIf=\"enableTestingTab\">\n          <sky-docs-demo-page-section heading=\"Test harnesses\">\n            <p>\n              SKY UX test harnesses are built upon Angular CDK component\n              harnesses. For more information see the\n              <a href=\"https://material.angular.io/cdk/test-harnesses/overview\"\n                >Angular CDK component harness documentation</a\n              >.\n            </p>\n          </sky-docs-demo-page-section>\n          <sky-docs-demo-page-type-definitions [types]=\"testingTypeDefinitions\">\n          </sky-docs-demo-page-type-definitions>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Code examples\" *ngIf=\"enableCodeExamples\">\n          <ng-content select=\"sky-docs-code-examples\"></ng-content>\n        </sky-tab>\n      </sky-tabset>\n    </div>\n  </stache>\n</div>\n\n<ng-template #content>\n  <sky-docs-demo-page-section\n    *ngIf=\"moduleName || packageName\"\n    heading=\"Installation\"\n  >\n    <sky-docs-module-info\n      [gitRepoUrl]=\"gitRepoUrl\"\n      [moduleName]=\"moduleName\"\n      [packageName]=\"packageName\"\n      [packageUrl]=\"packageUrl\"\n    >\n      <ng-content select=\"sky-docs-demo-page-module-info\"></ng-content>\n    </sky-docs-module-info>\n  </sky-docs-demo-page-section>\n\n  <ng-content></ng-content>\n\n  <sky-docs-demo-page-type-definitions [types]=\"moduleTypeDefinitions\">\n  </sky-docs-demo-page-type-definitions>\n</ng-template>\n", styles: [".sky-docs-demo-page ::ng-deep p{margin:15px 0}.sky-docs-demo-page ::ng-deep .stache-max-width-container{max-width:none;margin:0}.sky-docs-demo-page ::ng-deep .sky-docs-code-block{margin:15px 0;display:block}.sky-docs-demo-page ::ng-deep .sky-docs-code-block .sky-code-block{font-size:13.5px}.sky-docs-demo-page ::ng-deep .sky-docs-code-block .sky-code-output{margin:-2px 0 0;padding:0 0 0 15px;background:transparent;border:0}.sky-docs-demo-page ::ng-deep .sky-definition-list{margin:0}.sky-docs-demo-page ::ng-deep .sky-definition-list .sky-docs-code-block{margin:0}.sky-docs-demo-page ::ng-deep .sky-docs-type-definition-wrapper{margin-bottom:40px}.sky-docs-demo-page-main{padding:30px 0}.sky-docs-demo-page-main table{margin-top:15px;margin-bottom:15px}.sky-docs-demo-page-main ::ng-deep .sky-tabset{margin-left:-45px;margin-right:-45px;padding-left:45px;padding-right:45px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "directive", type: i9.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: SkyDocsModuleInfoComponent, selector: "sky-docs-module-info", inputs: ["gitRepoUrl", "moduleName", "packageName", "packageUrl"] }, { kind: "component", type: i7.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndex", "layout"], outputs: ["close"] }, { kind: "component", type: i7.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "component", type: i12.λ30, selector: "stache", inputs: ["pageTitle", "windowTitle", "navTitle", "layout", "sidebarRoutes", "breadcrumbsRoutes", "showBreadcrumbs", "showEditButton", "showFooter", "showTableOfContents", "showBackToTop", "showInNav", "inPageRoutes"] }, { kind: "component", type: SkyDocsDemoPageSectionComponent, selector: "sky-docs-demo-page-section", inputs: ["heading"] }, { kind: "component", type: SkyDocsDemoPageTypeDefinitionsComponent, selector: "sky-docs-demo-page-type-definitions", inputs: ["types"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyDocsDemoPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-docs-demo-page', providers: [SkyDocsDemoPageDomAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-demo-page\">\n  <stache\n    layout=\"sidebar\"\n    [pageTitle]=\"pageTitle\"\n    [showBreadcrumbs]=\"false\"\n    [showTableOfContents]=\"false\"\n    [sidebarRoutes]=\"sidebarRoutes\"\n  >\n    <ng-content select=\"sky-docs-demo-page-summary\"></ng-content>\n\n    <ng-content select=\"sky-docs-demo\"></ng-content>\n\n    <div class=\"sky-docs-demo-page-main\">\n      <sky-tabset *ngIf=\"enableTabLayout; else content\" permalinkId=\"docs\">\n        <sky-tab tabHeading=\"Design\" *ngIf=\"!!designGuidelinesComponent\">\n          <ng-content select=\"sky-docs-design-guidelines\"></ng-content>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Development\">\n          <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Testing\" *ngIf=\"enableTestingTab\">\n          <sky-docs-demo-page-section heading=\"Test harnesses\">\n            <p>\n              SKY UX test harnesses are built upon Angular CDK component\n              harnesses. For more information see the\n              <a href=\"https://material.angular.io/cdk/test-harnesses/overview\"\n                >Angular CDK component harness documentation</a\n              >.\n            </p>\n          </sky-docs-demo-page-section>\n          <sky-docs-demo-page-type-definitions [types]=\"testingTypeDefinitions\">\n          </sky-docs-demo-page-type-definitions>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Code examples\" *ngIf=\"enableCodeExamples\">\n          <ng-content select=\"sky-docs-code-examples\"></ng-content>\n        </sky-tab>\n      </sky-tabset>\n    </div>\n  </stache>\n</div>\n\n<ng-template #content>\n  <sky-docs-demo-page-section\n    *ngIf=\"moduleName || packageName\"\n    heading=\"Installation\"\n  >\n    <sky-docs-module-info\n      [gitRepoUrl]=\"gitRepoUrl\"\n      [moduleName]=\"moduleName\"\n      [packageName]=\"packageName\"\n      [packageUrl]=\"packageUrl\"\n    >\n      <ng-content select=\"sky-docs-demo-page-module-info\"></ng-content>\n    </sky-docs-module-info>\n  </sky-docs-demo-page-section>\n\n  <ng-content></ng-content>\n\n  <sky-docs-demo-page-type-definitions [types]=\"moduleTypeDefinitions\">\n  </sky-docs-demo-page-type-definitions>\n</ng-template>\n", styles: [".sky-docs-demo-page ::ng-deep p{margin:15px 0}.sky-docs-demo-page ::ng-deep .stache-max-width-container{max-width:none;margin:0}.sky-docs-demo-page ::ng-deep .sky-docs-code-block{margin:15px 0;display:block}.sky-docs-demo-page ::ng-deep .sky-docs-code-block .sky-code-block{font-size:13.5px}.sky-docs-demo-page ::ng-deep .sky-docs-code-block .sky-code-output{margin:-2px 0 0;padding:0 0 0 15px;background:transparent;border:0}.sky-docs-demo-page ::ng-deep .sky-definition-list{margin:0}.sky-docs-demo-page ::ng-deep .sky-definition-list .sky-docs-code-block{margin:0}.sky-docs-demo-page ::ng-deep .sky-docs-type-definition-wrapper{margin-bottom:40px}.sky-docs-demo-page-main{padding:30px 0}.sky-docs-demo-page-main table{margin-top:15px;margin-bottom:15px}.sky-docs-demo-page-main ::ng-deep .sky-tabset{margin-left:-45px;margin-right:-45px;padding-left:45px;padding-right:45px}\n"] }]
+            args: [{ selector: 'sky-docs-demo-page', providers: [SkyDocsDemoPageDomAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-demo-page\">\n  <stache\n    layout=\"sidebar\"\n    [pageTitle]=\"pageTitle\"\n    [showBreadcrumbs]=\"false\"\n    [showTableOfContents]=\"false\"\n    [sidebarRoutes]=\"sidebarRoutes\"\n  >\n    <ng-content select=\"sky-docs-demo-page-summary\"></ng-content>\n\n    <sky-alert\n      *ngIf=\"\n        moduleTypeDefinitions?.hasPreviewFeatures ||\n        testingTypeDefinitions?.hasPreviewFeatures\n      \"\n      class=\"sky-docs-demo-page-preview-alert sky-margin-stacked-lg\"\n      >This component currently has preview features available that may not be\n      fully represented in the design documentation, the demo, or code examples.\n      <ng-container *ngIf=\"siteOptions?.previewFeaturesUrl\"\n        >Learn more about this work\n        <a [skyAppLink]=\"siteOptions?.previewFeaturesUrl\"\n          >here.</a\n        ></ng-container\n      ></sky-alert\n    >\n\n    <ng-content select=\"sky-docs-demo\"></ng-content>\n\n    <div class=\"sky-docs-demo-page-main\">\n      <sky-tabset *ngIf=\"enableTabLayout; else content\" permalinkId=\"docs\">\n        <sky-tab tabHeading=\"Design\" *ngIf=\"!!designGuidelinesComponent\">\n          <ng-content select=\"sky-docs-design-guidelines\"></ng-content>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Development\">\n          <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Testing\" *ngIf=\"enableTestingTab\">\n          <sky-docs-demo-page-section heading=\"Test harnesses\">\n            <p>\n              SKY UX test harnesses are built upon Angular CDK component\n              harnesses. For more information see the\n              <a href=\"https://material.angular.io/cdk/test-harnesses/overview\"\n                >Angular CDK component harness documentation</a\n              >.\n            </p>\n          </sky-docs-demo-page-section>\n          <sky-docs-demo-page-type-definitions [types]=\"testingTypeDefinitions\">\n          </sky-docs-demo-page-type-definitions>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Code examples\" *ngIf=\"enableCodeExamples\">\n          <ng-content select=\"sky-docs-code-examples\"></ng-content>\n        </sky-tab>\n      </sky-tabset>\n    </div>\n  </stache>\n</div>\n\n<ng-template #content>\n  <sky-docs-demo-page-section\n    *ngIf=\"moduleName || packageName\"\n    heading=\"Installation\"\n  >\n    <sky-docs-module-info\n      [gitRepoUrl]=\"gitRepoUrl\"\n      [moduleName]=\"moduleName\"\n      [packageName]=\"packageName\"\n      [packageUrl]=\"packageUrl\"\n    >\n      <ng-content select=\"sky-docs-demo-page-module-info\"></ng-content>\n    </sky-docs-module-info>\n  </sky-docs-demo-page-section>\n\n  <ng-content></ng-content>\n\n  <sky-docs-demo-page-type-definitions [types]=\"moduleTypeDefinitions\">\n  </sky-docs-demo-page-type-definitions>\n</ng-template>\n", styles: [".sky-docs-demo-page ::ng-deep p{margin:15px 0}.sky-docs-demo-page ::ng-deep .stache-max-width-container{max-width:none;margin:0}.sky-docs-demo-page ::ng-deep .sky-docs-code-block{margin:15px 0;display:block}.sky-docs-demo-page ::ng-deep .sky-docs-code-block .sky-code-block{font-size:13.5px}.sky-docs-demo-page ::ng-deep .sky-docs-code-block .sky-code-output{margin:-2px 0 0;padding:0 0 0 15px;background:transparent;border:0}.sky-docs-demo-page ::ng-deep .sky-definition-list{margin:0}.sky-docs-demo-page ::ng-deep .sky-definition-list .sky-docs-code-block{margin:0}.sky-docs-demo-page ::ng-deep .sky-docs-type-definition-wrapper{margin-bottom:40px}.sky-docs-demo-page-main{padding:30px 0}.sky-docs-demo-page-main table{margin-top:15px;margin-bottom:15px}.sky-docs-demo-page-main ::ng-deep .sky-tabset{margin-left:-45px;margin-right:-45px;padding-left:45px;padding-right:45px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i1$3.Router }, { type: i2$1.SkyAppConfig }, { type: SkyDocsDemoPageDomAdapterService }, { type: SkyDocsSupportalService }, { type: SkyDocsDemoPageTitleService }, { type: SkyDocsTypeDefinitionsService }]; }, propDecorators: { additionalSourceCodePaths: [{
                 type: Input
             }], additionalTestingSourceCodePaths: [{
@@ -3166,6 +3229,8 @@ class SkyDocsDemoPageModule {
             SkyDocsDemoPageSummaryComponent,
             SkyDocsDemoPageTypeDefinitionsComponent], imports: [CommonModule,
             RouterModule,
+            SkyAlertModule,
+            SkyAppLinkModule,
             SkyCodeBlockModule,
             SkyCodeModule,
             SkyDocsDemoModule,
@@ -3182,6 +3247,8 @@ class SkyDocsDemoPageModule {
             SkyDocsDemoPageTypeDefinitionsComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SkyDocsDemoPageModule, imports: [CommonModule,
             RouterModule,
+            SkyAlertModule,
+            SkyAppLinkModule,
             SkyCodeBlockModule,
             SkyCodeModule,
             SkyDocsDemoModule,
@@ -3199,6 +3266,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     imports: [
                         CommonModule,
                         RouterModule,
+                        SkyAlertModule,
+                        SkyAppLinkModule,
                         SkyCodeBlockModule,
                         SkyCodeModule,
                         SkyDocsDemoModule,
@@ -3341,5 +3410,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SkyDocsAnatomyModule, SkyDocsCodeExampleTheme, SkyDocsCodeExamplesModule, SkyDocsDemoModule, SkyDocsDemoPageModule, SkyDocsDesignGuidelinesModule, SkyDocsHeadingAnchorModule, SkyDocsMarkdownModule, SkyDocsMarkdownPipe, SkyDocsModuleInfoModule, SkyDocsSourceCodeProvider, SkyDocsSupportalService, SkyDocsThumbnailModule, SkyDocsToolsModule, SkyDocsToolsOptions, SkyDocsTypeDefinitionsModule, SkyDocsTypeDefinitionsProvider, SkyDocsTypeDefinitionsService, SkyDocsAnatomyItemComponent as λ1, SkyDocsDemoPageModuleInfoComponent as λ10, SkyDocsDemoPageSectionComponent as λ11, SkyDocsDemoPageSummaryComponent as λ12, SkyDocsDemoPageTypeDefinitionsComponent as λ13, SkyDocsDemoPageComponent as λ14, SkyDocsDesignGuidelineThumbnailComponent as λ15, SkyDocsDesignGuidelineComponent as λ16, SkyDocsDesignGuidelinesComponent as λ17, SkyDocsHeadingAnchorComponent as λ18, SkyDocsModuleInfoComponent as λ19, SkyDocsAnatomyComponent as λ2, SkyDocsThumbnailComponent as λ20, SkyDocsCallSignatureDefinitionComponent as λ21, SkyDocsClassDefinitionComponent as λ22, SkyDocsDirectiveDefinitionComponent as λ23, SkyDocsEnumerationDefinitionComponent as λ24, SkyDocsInterfaceDefinitionComponent as λ25, SkyDocsMethodDefinitionsComponent as λ26, SkyDocsPipeDefinitionComponent as λ27, SkyDocsPropertyDefinitionsComponent as λ28, SkyDocsTypeAliasDefinitionComponent as λ29, SkyDocsCodeExampleComponent as λ3, SkyDocsTypeAnchorLinksPipe as λ30, SkyDocsAnatomyThumbnailComponent as λ31, SkyDocsCodeExamplesComponent as λ4, SkyDocsDemoControlPanelCheckboxComponent as λ5, SkyDocsDemoControlPanelRadioGroupComponent as λ6, SkyDocsDemoControlPanelSectionComponent as λ7, SkyDocsDemoControlPanelComponent as λ8, SkyDocsDemoComponent as λ9 };
+export { SkyDocsAnatomyModule, SkyDocsCodeExampleTheme, SkyDocsCodeExamplesModule, SkyDocsDemoModule, SkyDocsDemoPageModule, SkyDocsDesignGuidelinesModule, SkyDocsHeadingAnchorModule, SkyDocsMarkdownModule, SkyDocsMarkdownPipe, SkyDocsModuleInfoModule, SkyDocsSourceCodeProvider, SkyDocsSupportalService, SkyDocsThumbnailModule, SkyDocsToolsModule, SkyDocsToolsOptions, SkyDocsToolsSiteOptions, SkyDocsTypeDefinitionsModule, SkyDocsTypeDefinitionsProvider, SkyDocsTypeDefinitionsService, SkyDocsAnatomyItemComponent as λ1, SkyDocsDemoPageModuleInfoComponent as λ10, SkyDocsDemoPageSectionComponent as λ11, SkyDocsDemoPageSummaryComponent as λ12, SkyDocsDemoPageTypeDefinitionsComponent as λ13, SkyDocsDemoPageComponent as λ14, SkyDocsDesignGuidelineThumbnailComponent as λ15, SkyDocsDesignGuidelineComponent as λ16, SkyDocsDesignGuidelinesComponent as λ17, SkyDocsHeadingAnchorComponent as λ18, SkyDocsModuleInfoComponent as λ19, SkyDocsAnatomyComponent as λ2, SkyDocsThumbnailComponent as λ20, SkyDocsCallSignatureDefinitionComponent as λ21, SkyDocsClassDefinitionComponent as λ22, SkyDocsDirectiveDefinitionComponent as λ23, SkyDocsEnumerationDefinitionComponent as λ24, SkyDocsInterfaceDefinitionComponent as λ25, SkyDocsMethodDefinitionsComponent as λ26, SkyDocsPipeDefinitionComponent as λ27, SkyDocsPropertyDefinitionsComponent as λ28, SkyDocsTypeAliasDefinitionComponent as λ29, SkyDocsCodeExampleComponent as λ3, SkyDocsTypeAnchorLinksPipe as λ30, SkyDocsAnatomyThumbnailComponent as λ31, SkyDocsCodeExamplesComponent as λ4, SkyDocsDemoControlPanelCheckboxComponent as λ5, SkyDocsDemoControlPanelRadioGroupComponent as λ6, SkyDocsDemoControlPanelSectionComponent as λ7, SkyDocsDemoControlPanelComponent as λ8, SkyDocsDemoComponent as λ9 };
 //# sourceMappingURL=skyux-docs-tools.mjs.map