@skyux/docs-tools 10.1.0 → 10.2.0

package/esm2022/modules/demo/demo-control-panel-radio-group.component.mjs

@@ -60,10 +60,10 @@ export class SkyDocsDemoControlPanelRadioGroupComponent {
             [this.propertyName]: this.value,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoControlPanelRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SkyDocsDemoControlPanelRadioGroupComponent, selector: "sky-docs-demo-control-panel-radio-group", inputs: { choices: "choices", disabled: "disabled", heading: "heading", initialValue: "initialValue", propertyName: "propertyName" }, ngImport: i0, template: "<div class=\"sky-demo-control-panel-radio-group\">\n  <strong *ngIf=\"heading\">{{ heading }}</strong>\n  <sky-radio-group\n    [disabled]=\"disabled\"\n    [name]=\"propertyName\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onModelChange($event)\"\n  >\n    <ul class=\"sky-list-unstyled\">\n      <li *ngFor=\"let choice of choices\">\n        <sky-radio [value]=\"choice.value\">\n          <sky-radio-label>{{ choice.label }}</sky-radio-label>\n        </sky-radio>\n      </li>\n    </ul>\n  </sky-radio-group>\n</div>\n", styles: [".sky-demo-control-panel-radio-group{margin-bottom:20px}ul{margin:0}\n"], 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "icon", "radioType"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i3.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "name", "required", "value", "tabIndex", "labelText", "labelHidden"] }, { kind: "component", type: i3.λ12, selector: "sky-radio-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoControlPanelRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: SkyDocsDemoControlPanelRadioGroupComponent, selector: "sky-docs-demo-control-panel-radio-group", inputs: { choices: "choices", disabled: "disabled", heading: "heading", initialValue: "initialValue", propertyName: "propertyName" }, ngImport: i0, template: "<div class=\"sky-demo-control-panel-radio-group\">\n  <strong *ngIf=\"heading\">{{ heading }}</strong>\n  <sky-radio-group\n    [disabled]=\"disabled\"\n    [name]=\"propertyName\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onModelChange($event)\"\n  >\n    <ul class=\"sky-list-unstyled\">\n      <li *ngFor=\"let choice of choices\">\n        <sky-radio [value]=\"choice.value\">\n          <sky-radio-label>{{ choice.label }}</sky-radio-label>\n        </sky-radio>\n      </li>\n    </ul>\n  </sky-radio-group>\n</div>\n", styles: [".sky-demo-control-panel-radio-group{margin-bottom:20px}ul{margin:0}\n"], 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "helpPopoverContent", "helpPopoverTitle", "icon", "radioType", "labelText", "labelHidden", "hintText"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i3.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "name", "required", "stacked", "value", "tabIndex", "labelText", "labelHidden", "hintText", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i3.λ12, selector: "sky-radio-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoControlPanelRadioGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoControlPanelRadioGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-docs-demo-control-panel-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-demo-control-panel-radio-group\">\n  <strong *ngIf=\"heading\">{{ heading }}</strong>\n  <sky-radio-group\n    [disabled]=\"disabled\"\n    [name]=\"propertyName\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onModelChange($event)\"\n  >\n    <ul class=\"sky-list-unstyled\">\n      <li *ngFor=\"let choice of choices\">\n        <sky-radio [value]=\"choice.value\">\n          <sky-radio-label>{{ choice.label }}</sky-radio-label>\n        </sky-radio>\n      </li>\n    </ul>\n  </sky-radio-group>\n</div>\n", styles: [".sky-demo-control-panel-radio-group{margin-bottom:20px}ul{margin:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { choices: [{

package/esm2022/modules/demo/demo-control-panel-section.component.mjs

@@ -12,10 +12,10 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class SkyDocsDemoControlPanelSectionComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoControlPanelSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SkyDocsDemoControlPanelSectionComponent, selector: "sky-docs-demo-control-panel-section", ngImport: i0, template: "<div class=\"sky-demo-control-panel-section\">\n  <ng-content select=\"sky-docs-demo-control-panel-radio-group\"></ng-content>\n  <ng-content select=\"sky-docs-demo-control-panel-checkbox\"></ng-content>\n</div>\n", styles: [".sky-demo-control-panel-section{padding-right:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoControlPanelSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: SkyDocsDemoControlPanelSectionComponent, selector: "sky-docs-demo-control-panel-section", ngImport: i0, template: "<div class=\"sky-demo-control-panel-section\">\n  <ng-content select=\"sky-docs-demo-control-panel-radio-group\"></ng-content>\n  <ng-content select=\"sky-docs-demo-control-panel-checkbox\"></ng-content>\n</div>\n", styles: [".sky-demo-control-panel-section{padding-right:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoControlPanelSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoControlPanelSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-docs-demo-control-panel-section', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-demo-control-panel-section\">\n  <ng-content select=\"sky-docs-demo-control-panel-radio-group\"></ng-content>\n  <ng-content select=\"sky-docs-demo-control-panel-checkbox\"></ng-content>\n</div>\n", styles: [".sky-demo-control-panel-section{padding-right:20px}\n"] }]
         }] });

package/esm2022/modules/demo/demo-control-panel.component.mjs

@@ -61,10 +61,10 @@ export class SkyDocsDemoControlPanelComponent {
             this.selectionChange.next(change);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoControlPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SkyDocsDemoControlPanelComponent, selector: "sky-docs-demo-control-panel", outputs: { reset: "reset", selectionChange: "selectionChange" }, queries: [{ propertyName: "radioGroups", predicate: SkyDocsDemoControlPanelRadioGroupComponent, descendants: true }, { propertyName: "checkboxes", predicate: SkyDocsDemoControlPanelCheckboxComponent, descendants: true }], ngImport: i0, template: "<div class=\"sky-docs-demo-control-panel\">\n  <div class=\"sky-docs-demo-control-panel-row sky-rounded-corners\">\n    <div\n      class=\"sky-docs-demo-control-panel-column sky-docs-demo-control-panel-sections-column\"\n    >\n      <ng-content select=\"sky-docs-demo-control-panel-section\"></ng-content>\n    </div>\n\n    <div\n      class=\"sky-docs-demo-control-panel-column sky-docs-demo-control-panel-button-column\"\n    >\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        [attr.data-test-selector]=\"'sky-docs-demo-control-panel-reset-button'\"\n        (click)=\"onResetButtonClick()\"\n      >\n        {{ 'sky-docs-demo-control-panel-reset-button-label' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".sky-docs-demo-control-panel{margin-bottom:20px;margin-top:-1px;margin-left:-15px}.sky-docs-demo-control-panel-row{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;padding:15px;background-color:#fff;display:inline-flex;min-width:220px}.sky-docs-demo-control-panel-sections-column{display:flex}.sky-docs-demo-control-panel-sections-column ::ng-deep sky-docs-demo-control-panel-section{min-width:120px}.sky-docs-demo-control-panel-button-column{align-self:flex-end}.sky-docs-demo-control-panel-button-column .sky-btn{border:0}\n"], dependencies: [{ kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoControlPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: SkyDocsDemoControlPanelComponent, selector: "sky-docs-demo-control-panel", outputs: { reset: "reset", selectionChange: "selectionChange" }, queries: [{ propertyName: "radioGroups", predicate: SkyDocsDemoControlPanelRadioGroupComponent, descendants: true }, { propertyName: "checkboxes", predicate: SkyDocsDemoControlPanelCheckboxComponent, descendants: true }], ngImport: i0, template: "<div class=\"sky-docs-demo-control-panel\">\n  <div class=\"sky-docs-demo-control-panel-row sky-rounded-corners\">\n    <div\n      class=\"sky-docs-demo-control-panel-column sky-docs-demo-control-panel-sections-column\"\n    >\n      <ng-content select=\"sky-docs-demo-control-panel-section\"></ng-content>\n    </div>\n\n    <div\n      class=\"sky-docs-demo-control-panel-column sky-docs-demo-control-panel-button-column\"\n    >\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        [attr.data-test-selector]=\"'sky-docs-demo-control-panel-reset-button'\"\n        (click)=\"onResetButtonClick()\"\n      >\n        {{ 'sky-docs-demo-control-panel-reset-button-label' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".sky-docs-demo-control-panel{margin-bottom:20px;margin-top:-1px;margin-left:-15px}.sky-docs-demo-control-panel-row{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;padding:15px;background-color:#fff;display:inline-flex;min-width:220px}.sky-docs-demo-control-panel-sections-column{display:flex}.sky-docs-demo-control-panel-sections-column ::ng-deep sky-docs-demo-control-panel-section{min-width:120px}.sky-docs-demo-control-panel-button-column{align-self:flex-end}.sky-docs-demo-control-panel-button-column .sky-btn{border:0}\n"], dependencies: [{ kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoControlPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoControlPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-docs-demo-control-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-demo-control-panel\">\n  <div class=\"sky-docs-demo-control-panel-row sky-rounded-corners\">\n    <div\n      class=\"sky-docs-demo-control-panel-column sky-docs-demo-control-panel-sections-column\"\n    >\n      <ng-content select=\"sky-docs-demo-control-panel-section\"></ng-content>\n    </div>\n\n    <div\n      class=\"sky-docs-demo-control-panel-column sky-docs-demo-control-panel-button-column\"\n    >\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        [attr.data-test-selector]=\"'sky-docs-demo-control-panel-reset-button'\"\n        (click)=\"onResetButtonClick()\"\n      >\n        {{ 'sky-docs-demo-control-panel-reset-button-label' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".sky-docs-demo-control-panel{margin-bottom:20px;margin-top:-1px;margin-left:-15px}.sky-docs-demo-control-panel-row{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;padding:15px;background-color:#fff;display:inline-flex;min-width:220px}.sky-docs-demo-control-panel-sections-column{display:flex}.sky-docs-demo-control-panel-sections-column ::ng-deep sky-docs-demo-control-panel-section{min-width:120px}.sky-docs-demo-control-panel-button-column{align-self:flex-end}.sky-docs-demo-control-panel-button-column .sky-btn{border:0}\n"] }]
         }], propDecorators: { reset: [{

package/esm2022/modules/demo/demo-custom-control-panel.component.mjs

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Renders a custom control panel in the "Show options" dropdown above the demo.
+ */
+export class SkyDocsDemoCustomControlPanelComponent {
+    constructor() {
+        this.classes = 'sky-rounded-corners';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoCustomControlPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: SkyDocsDemoCustomControlPanelComponent, selector: "sky-docs-demo-custom-control-panel", host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;padding:15px;background-color:#fff;display:inline-flex;min-width:220px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoCustomControlPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-demo-custom-control-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;padding:15px;background-color:#fff;display:inline-flex;min-width:220px}\n"] }]
+        }], propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby1jdXN0b20tY29udHJvbC1wYW5lbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2NzLXRvb2xzL3NyYy9tb2R1bGVzL2RlbW8vZGVtby1jdXN0b20tY29udHJvbC1wYW5lbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2NzLXRvb2xzL3NyYy9tb2R1bGVzL2RlbW8vZGVtby1jdXN0b20tY29udHJvbC1wYW5lbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFFaEY7O0dBRUc7QUFPSCxNQUFNLE9BQU8sc0NBQXNDO0lBTm5EO1FBUXFCLFlBQU8sR0FBRyxxQkFBcUIsQ0FBQztLQUNwRDs4R0FIWSxzQ0FBc0M7a0dBQXRDLHNDQUFzQyw2SENYbkQsa0JBQ0E7OzJGRFVhLHNDQUFzQztrQkFObEQsU0FBUzsrQkFDRSxvQ0FBb0MsbUJBRzdCLHVCQUF1QixDQUFDLE1BQU07OEJBSTVCLE9BQU87c0JBRHpCLFdBQVc7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEhvc3RCaW5kaW5nIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogUmVuZGVycyBhIGN1c3RvbSBjb250cm9sIHBhbmVsIGluIHRoZSBcIlNob3cgb3B0aW9uc1wiIGRyb3Bkb3duIGFib3ZlIHRoZSBkZW1vLlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktZG9jcy1kZW1vLWN1c3RvbS1jb250cm9sLXBhbmVsJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2RlbW8tY3VzdG9tLWNvbnRyb2wtcGFuZWwuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vZGVtby1jdXN0b20tY29udHJvbC1wYW5lbC5jb21wb25lbnQuc2NzcycsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lEb2NzRGVtb0N1c3RvbUNvbnRyb2xQYW5lbENvbXBvbmVudCB7XG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBwcm90ZWN0ZWQgcmVhZG9ubHkgY2xhc3NlcyA9ICdza3ktcm91bmRlZC1jb3JuZXJzJztcbn1cbiIsIjxuZy1jb250ZW50IC8+XG4iXX0=

package/esm2022/modules/demo/demo.component.mjs

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, Input, } from '@angular/core';
 import { SkyDocsDemoControlPanelComponent } from './demo-control-panel.component';
+import { SkyDocsDemoCustomControlPanelComponent } from './demo-custom-control-panel.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@skyux/indicators";
@@ -28,7 +29,8 @@ export class SkyDocsDemoComponent {
         return this._alignContents || 'left';
     }
     get hasOptions() {
-        return this.controlPanels && this.controlPanels.length > 0;
+        return ((this.controlPanels && this.controlPanels.length > 0) ||
+            (this.customControlPanels && this.customControlPanels.length > 0));
     }
     get toggleOptionsButtonIcon() {
         return this.areOptionsVisible ? 'chevron-up' : 'chevron-down';
@@ -36,12 +38,12 @@ export class SkyDocsDemoComponent {
     onToggleOptionsButtonClick() {
         this.areOptionsVisible = !this.areOptionsVisible;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SkyDocsDemoComponent, selector: "sky-docs-demo", inputs: { alignContents: "alignContents", heading: "heading" }, queries: [{ propertyName: "controlPanels", predicate: SkyDocsDemoControlPanelComponent, read: ElementRef }], ngImport: i0, template: "<div class=\"sky-docs-demo\">\n  <div aria-level=\"3\" class=\"sky-docs-demo-heading\" role=\"heading\">\n    <span\n      class=\"sky-section-heading\"\n      [attr.data-test-selector]=\"'sky-docs-demo-heading-text'\"\n    >\n      {{ heading || ('sky-docs-demo-heading' | skyLibResources) }}\n    </span>\n\n    <div class=\"sky-docs-demo-control-panel-wrapper\">\n      <div class=\"sky-docs-demo-control-panel-wrapper-header\">\n        <button\n          *ngIf=\"hasOptions\"\n          class=\"sky-btn\"\n          type=\"button\"\n          [attr.data-test-selector]=\"'sky-docs-demo-heading-button'\"\n          [ngClass]=\"{\n            'sky-docs-demo-heading-btn-open': areOptionsVisible\n          }\"\n          (click)=\"onToggleOptionsButtonClick()\"\n        >\n          <sky-icon [icon]=\"toggleOptionsButtonIcon\"></sky-icon>\n          <ng-container *ngIf=\"areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-off' | skyLibResources }}\n          </ng-container>\n          <ng-container *ngIf=\"!areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-on' | skyLibResources }}\n          </ng-container>\n        </button>\n      </div>\n      <div class=\"sky-docs-demo-control-panel-wrapper-body\">\n        <ng-container *ngIf=\"areOptionsVisible\">\n          <ng-container *ngTemplateOutlet=\"controlPanels\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"sky-docs-demo-viewport\"\n    [ngClass]=\"'sky-docs-demo-viewport-align-' + alignContents\"\n  >\n    <div class=\"sky-docs-demo-viewport-gutter\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #controlPanels>\n  <ng-content select=\"sky-docs-demo-control-panel\"></ng-content>\n</ng-template>\n", styles: [".sky-docs-demo{margin-bottom:20px}.sky-docs-demo-heading{margin-bottom:10px;display:flex;flex-direction:row}.sky-docs-demo-heading .sky-docs-demo-heading-btn-open{border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;position:relative}.sky-docs-demo-control-panel-wrapper{display:flex;flex-direction:column}.sky-section-heading{margin-right:10px}.sky-docs-demo-viewport{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;margin-bottom:10px;padding:15px}.sky-docs-demo-viewport-align-center{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: SkyDocsDemoComponent, selector: "sky-docs-demo", inputs: { alignContents: "alignContents", heading: "heading" }, queries: [{ propertyName: "controlPanels", predicate: SkyDocsDemoControlPanelComponent, read: ElementRef }, { propertyName: "customControlPanels", predicate: SkyDocsDemoCustomControlPanelComponent, read: ElementRef }], ngImport: i0, template: "<div class=\"sky-docs-demo\">\n  <div aria-level=\"3\" class=\"sky-docs-demo-heading\" role=\"heading\">\n    <span\n      class=\"sky-section-heading\"\n      [attr.data-test-selector]=\"'sky-docs-demo-heading-text'\"\n    >\n      {{ heading || ('sky-docs-demo-heading' | skyLibResources) }}\n    </span>\n\n    <div class=\"sky-docs-demo-control-panel-wrapper\">\n      <div class=\"sky-docs-demo-control-panel-wrapper-header\">\n        <button\n          *ngIf=\"hasOptions\"\n          class=\"sky-btn\"\n          type=\"button\"\n          [attr.data-test-selector]=\"'sky-docs-demo-heading-button'\"\n          [ngClass]=\"{\n            'sky-docs-demo-heading-btn-open': areOptionsVisible\n          }\"\n          (click)=\"onToggleOptionsButtonClick()\"\n        >\n          <sky-icon [icon]=\"toggleOptionsButtonIcon\"></sky-icon>\n          <ng-container *ngIf=\"areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-off' | skyLibResources }}\n          </ng-container>\n          <ng-container *ngIf=\"!areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-on' | skyLibResources }}\n          </ng-container>\n        </button>\n      </div>\n      <div class=\"sky-docs-demo-control-panel-wrapper-body\">\n        <ng-container *ngIf=\"areOptionsVisible\">\n          <ng-container *ngTemplateOutlet=\"controlPanels\"></ng-container>\n          <ng-container *ngTemplateOutlet=\"customControlPanels\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"sky-docs-demo-viewport\"\n    [ngClass]=\"'sky-docs-demo-viewport-align-' + alignContents\"\n  >\n    <div class=\"sky-docs-demo-viewport-gutter\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #controlPanels>\n  <ng-content select=\"sky-docs-demo-control-panel\" />\n</ng-template>\n\n<ng-template #customControlPanels>\n  <ng-content select=\"sky-docs-demo-custom-control-panel\" />\n</ng-template>\n", styles: [".sky-docs-demo{margin-bottom:20px}.sky-docs-demo-heading{margin-bottom:10px;display:flex;flex-direction:row}.sky-docs-demo-heading .sky-docs-demo-heading-btn-open{border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;position:relative}.sky-docs-demo-control-panel-wrapper{display:flex;flex-direction:column}.sky-section-heading{margin-right:10px}.sky-docs-demo-viewport{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;margin-bottom:10px;padding:15px}.sky-docs-demo-viewport-align-center{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-docs-demo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-demo\">\n  <div aria-level=\"3\" class=\"sky-docs-demo-heading\" role=\"heading\">\n    <span\n      class=\"sky-section-heading\"\n      [attr.data-test-selector]=\"'sky-docs-demo-heading-text'\"\n    >\n      {{ heading || ('sky-docs-demo-heading' | skyLibResources) }}\n    </span>\n\n    <div class=\"sky-docs-demo-control-panel-wrapper\">\n      <div class=\"sky-docs-demo-control-panel-wrapper-header\">\n        <button\n          *ngIf=\"hasOptions\"\n          class=\"sky-btn\"\n          type=\"button\"\n          [attr.data-test-selector]=\"'sky-docs-demo-heading-button'\"\n          [ngClass]=\"{\n            'sky-docs-demo-heading-btn-open': areOptionsVisible\n          }\"\n          (click)=\"onToggleOptionsButtonClick()\"\n        >\n          <sky-icon [icon]=\"toggleOptionsButtonIcon\"></sky-icon>\n          <ng-container *ngIf=\"areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-off' | skyLibResources }}\n          </ng-container>\n          <ng-container *ngIf=\"!areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-on' | skyLibResources }}\n          </ng-container>\n        </button>\n      </div>\n      <div class=\"sky-docs-demo-control-panel-wrapper-body\">\n        <ng-container *ngIf=\"areOptionsVisible\">\n          <ng-container *ngTemplateOutlet=\"controlPanels\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"sky-docs-demo-viewport\"\n    [ngClass]=\"'sky-docs-demo-viewport-align-' + alignContents\"\n  >\n    <div class=\"sky-docs-demo-viewport-gutter\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #controlPanels>\n  <ng-content select=\"sky-docs-demo-control-panel\"></ng-content>\n</ng-template>\n", styles: [".sky-docs-demo{margin-bottom:20px}.sky-docs-demo-heading{margin-bottom:10px;display:flex;flex-direction:row}.sky-docs-demo-heading .sky-docs-demo-heading-btn-open{border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;position:relative}.sky-docs-demo-control-panel-wrapper{display:flex;flex-direction:column}.sky-section-heading{margin-right:10px}.sky-docs-demo-viewport{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;margin-bottom:10px;padding:15px}.sky-docs-demo-viewport-align-center{display:flex;align-items:center;justify-content:center}\n"] }]
+            args: [{ selector: 'sky-docs-demo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-demo\">\n  <div aria-level=\"3\" class=\"sky-docs-demo-heading\" role=\"heading\">\n    <span\n      class=\"sky-section-heading\"\n      [attr.data-test-selector]=\"'sky-docs-demo-heading-text'\"\n    >\n      {{ heading || ('sky-docs-demo-heading' | skyLibResources) }}\n    </span>\n\n    <div class=\"sky-docs-demo-control-panel-wrapper\">\n      <div class=\"sky-docs-demo-control-panel-wrapper-header\">\n        <button\n          *ngIf=\"hasOptions\"\n          class=\"sky-btn\"\n          type=\"button\"\n          [attr.data-test-selector]=\"'sky-docs-demo-heading-button'\"\n          [ngClass]=\"{\n            'sky-docs-demo-heading-btn-open': areOptionsVisible\n          }\"\n          (click)=\"onToggleOptionsButtonClick()\"\n        >\n          <sky-icon [icon]=\"toggleOptionsButtonIcon\"></sky-icon>\n          <ng-container *ngIf=\"areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-off' | skyLibResources }}\n          </ng-container>\n          <ng-container *ngIf=\"!areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-on' | skyLibResources }}\n          </ng-container>\n        </button>\n      </div>\n      <div class=\"sky-docs-demo-control-panel-wrapper-body\">\n        <ng-container *ngIf=\"areOptionsVisible\">\n          <ng-container *ngTemplateOutlet=\"controlPanels\"></ng-container>\n          <ng-container *ngTemplateOutlet=\"customControlPanels\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"sky-docs-demo-viewport\"\n    [ngClass]=\"'sky-docs-demo-viewport-align-' + alignContents\"\n  >\n    <div class=\"sky-docs-demo-viewport-gutter\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #controlPanels>\n  <ng-content select=\"sky-docs-demo-control-panel\" />\n</ng-template>\n\n<ng-template #customControlPanels>\n  <ng-content select=\"sky-docs-demo-custom-control-panel\" />\n</ng-template>\n", styles: [".sky-docs-demo{margin-bottom:20px}.sky-docs-demo-heading{margin-bottom:10px;display:flex;flex-direction:row}.sky-docs-demo-heading .sky-docs-demo-heading-btn-open{border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;position:relative}.sky-docs-demo-control-panel-wrapper{display:flex;flex-direction:column}.sky-section-heading{margin-right:10px}.sky-docs-demo-viewport{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;margin-bottom:10px;padding:15px}.sky-docs-demo-viewport-align-center{display:flex;align-items:center;justify-content:center}\n"] }]
         }], propDecorators: { alignContents: [{
                 type: Input
             }], heading: [{
@@ -49,5 +51,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
             }], controlPanels: [{
                 type: ContentChildren,
                 args: [SkyDocsDemoControlPanelComponent, { read: ElementRef }]
+            }], customControlPanels: [{
+                type: ContentChildren,
+                args: [SkyDocsDemoCustomControlPanelComponent, { read: ElementRef }]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2NzLXRvb2xzL3NyYy9tb2R1bGVzL2RlbW8vZGVtby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2NzLXRvb2xzL3NyYy9tb2R1bGVzL2RlbW8vZGVtby5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxlQUFlLEVBQ2YsVUFBVSxFQUNWLEtBQUssR0FFTixNQUFNLGVBQWUsQ0FBQztBQUl2QixPQUFPLEVBQUUsZ0NBQWdDLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQzs7Ozs7QUFFbEY7Ozs7Ozs7O0dBUUc7QUFPSCxNQUFNLE9BQU8sb0JBQW9CO0lBTmpDO1FBcUNTLHNCQUFpQixHQUFHLEtBQUssQ0FBQztLQU9sQztJQXJDQzs7O09BR0c7SUFDSCxJQUNXLGFBQWEsQ0FBQyxLQUFrQztRQUN6RCxJQUFJLENBQUMsY0FBYyxHQUFHLEtBQUssQ0FBQztJQUM5QixDQUFDO0lBRUQsSUFBVyxhQUFhO1FBQ3RCLE9BQU8sSUFBSSxDQUFDLGNBQWMsSUFBSSxNQUFNLENBQUM7SUFDdkMsQ0FBQztJQVFELElBQVcsVUFBVTtRQUNuQixPQUFPLElBQUksQ0FBQyxhQUFhLElBQUksSUFBSSxDQUFDLGFBQWEsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDO0lBQzdELENBQUM7SUFLRCxJQUFXLHVCQUF1QjtRQUNoQyxPQUFPLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxjQUFjLENBQUM7SUFDaEUsQ0FBQztJQU1NLDBCQUEwQjtRQUMvQixJQUFJLENBQUMsaUJBQWlCLEdBQUcsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUM7SUFDbkQsQ0FBQzs4R0FyQ1Usb0JBQW9CO2tHQUFwQixvQkFBb0IsbUpBd0JkLGdDQUFnQyxRQUFVLFVBQVUsNkJDcER2RSw2dkRBbURBOzsyRkR2QmEsb0JBQW9CO2tCQU5oQyxTQUFTOytCQUNFLGVBQWUsbUJBR1IsdUJBQXVCLENBQUMsTUFBTTs4QkFRcEMsYUFBYTtzQkFEdkIsS0FBSztnQkFhQyxPQUFPO3NCQURiLEtBQUs7Z0JBUUUsYUFBYTtzQkFEcEIsZUFBZTt1QkFBQyxnQ0FBZ0MsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGRyZW4sXG4gIEVsZW1lbnRSZWYsXG4gIElucHV0LFxuICBRdWVyeUxpc3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBTa3lEb2NzRGVtb0NvbnRlbnRBbGlnbm1lbnQgfSBmcm9tICcuL2RlbW8tY29udGVudC1hbGlnbm1lbnQnO1xuXG5pbXBvcnQgeyBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbENvbXBvbmVudCB9IGZyb20gJy4vZGVtby1jb250cm9sLXBhbmVsLmNvbXBvbmVudCc7XG5cbi8qKlxuICogV3JhcHMgYWxsIGJlaGF2aW9yIGRlbW8gY29tcG9uZW50cyBhbmQgaGFuZGxlcyB0aGUgY29uZmlndXJhdGlvbiBhbmQgYXBwZWFyYW5jZSBvZiB0aGUgYmVoYXZpb3IgZGVtby5cbiAqIEBleGFtcGxlXG4gKiBgYGBtYXJrdXBcbiAqIDxza3ktZG9jcy1kZW1vPlxuICogICBEZW1vIGNvbnRlbnQgaGVyZS5cbiAqIDwvc2t5LWRvY3MtZGVtbz5cbiAqIGBgYFxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktZG9jcy1kZW1vJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2RlbW8uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kZW1vLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lEb2NzRGVtb0NvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBTcGVjaWZpZXMgdGhlIGhvcml6b250YWwgYWxpZ25tZW50IG9mIHRoZSBkZW1vIGNvbnRlbnRzLlxuICAgKiBAZGVmYXVsdCAnbGVmdCdcbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBzZXQgYWxpZ25Db250ZW50cyh2YWx1ZTogU2t5RG9jc0RlbW9Db250ZW50QWxpZ25tZW50KSB7XG4gICAgdGhpcy5fYWxpZ25Db250ZW50cyA9IHZhbHVlO1xuICB9XG5cbiAgcHVibGljIGdldCBhbGlnbkNvbnRlbnRzKCk6IFNreURvY3NEZW1vQ29udGVudEFsaWdubWVudCB7XG4gICAgcmV0dXJuIHRoaXMuX2FsaWduQ29udGVudHMgfHwgJ2xlZnQnO1xuICB9XG5cbiAgLyoqXG4gICAqIEN1c3RvbSBoZWFkaW5nIHRleHQgZm9yIHRoZSBkZW1vLlxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIGhlYWRpbmc6IHN0cmluZztcblxuICBwdWJsaWMgZ2V0IGhhc09wdGlvbnMoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuY29udHJvbFBhbmVscyAmJiB0aGlzLmNvbnRyb2xQYW5lbHMubGVuZ3RoID4gMDtcbiAgfVxuXG4gIEBDb250ZW50Q2hpbGRyZW4oU2t5RG9jc0RlbW9Db250cm9sUGFuZWxDb21wb25lbnQsIHsgcmVhZDogRWxlbWVudFJlZiB9KVxuICBwcml2YXRlIGNvbnRyb2xQYW5lbHM6IFF1ZXJ5TGlzdDxTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbENvbXBvbmVudD47XG5cbiAgcHVibGljIGdldCB0b2dnbGVPcHRpb25zQnV0dG9uSWNvbigpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmFyZU9wdGlvbnNWaXNpYmxlID8gJ2NoZXZyb24tdXAnIDogJ2NoZXZyb24tZG93bic7XG4gIH1cblxuICBwdWJsaWMgYXJlT3B0aW9uc1Zpc2libGUgPSBmYWxzZTtcblxuICBwcml2YXRlIF9hbGlnbkNvbnRlbnRzOiBTa3lEb2NzRGVtb0NvbnRlbnRBbGlnbm1lbnQ7XG5cbiAgcHVibGljIG9uVG9nZ2xlT3B0aW9uc0J1dHRvbkNsaWNrKCk6IHZvaWQge1xuICAgIHRoaXMuYXJlT3B0aW9uc1Zpc2libGUgPSAhdGhpcy5hcmVPcHRpb25zVmlzaWJsZTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInNreS1kb2NzLWRlbW9cIj5cbiAgPGRpdiBhcmlhLWxldmVsPVwiM1wiIGNsYXNzPVwic2t5LWRvY3MtZGVtby1oZWFkaW5nXCIgcm9sZT1cImhlYWRpbmdcIj5cbiAgICA8c3BhblxuICAgICAgY2xhc3M9XCJza3ktc2VjdGlvbi1oZWFkaW5nXCJcbiAgICAgIFthdHRyLmRhdGEtdGVzdC1zZWxlY3Rvcl09XCInc2t5LWRvY3MtZGVtby1oZWFkaW5nLXRleHQnXCJcbiAgICA+XG4gICAgICB7eyBoZWFkaW5nIHx8ICgnc2t5LWRvY3MtZGVtby1oZWFkaW5nJyB8IHNreUxpYlJlc291cmNlcykgfX1cbiAgICA8L3NwYW4+XG5cbiAgICA8ZGl2IGNsYXNzPVwic2t5LWRvY3MtZGVtby1jb250cm9sLXBhbmVsLXdyYXBwZXJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJza3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWwtd3JhcHBlci1oZWFkZXJcIj5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICpuZ0lmPVwiaGFzT3B0aW9uc1wiXG4gICAgICAgICAgY2xhc3M9XCJza3ktYnRuXCJcbiAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICBbYXR0ci5kYXRhLXRlc3Qtc2VsZWN0b3JdPVwiJ3NreS1kb2NzLWRlbW8taGVhZGluZy1idXR0b24nXCJcbiAgICAgICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICAgICAnc2t5LWRvY3MtZGVtby1oZWFkaW5nLWJ0bi1vcGVuJzogYXJlT3B0aW9uc1Zpc2libGVcbiAgICAgICAgICB9XCJcbiAgICAgICAgICAoY2xpY2spPVwib25Ub2dnbGVPcHRpb25zQnV0dG9uQ2xpY2soKVwiXG4gICAgICAgID5cbiAgICAgICAgICA8c2t5LWljb24gW2ljb25dPVwidG9nZ2xlT3B0aW9uc0J1dHRvbkljb25cIj48L3NreS1pY29uPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJhcmVPcHRpb25zVmlzaWJsZVwiPlxuICAgICAgICAgICAge3sgJ3NreS1kb2NzLWRlbW8tdG9nZ2xlLWJ1dHRvbi1vZmYnIHwgc2t5TGliUmVzb3VyY2VzIH19XG4gICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFhcmVPcHRpb25zVmlzaWJsZVwiPlxuICAgICAgICAgICAge3sgJ3NreS1kb2NzLWRlbW8tdG9nZ2xlLWJ1dHRvbi1vbicgfCBza3lMaWJSZXNvdXJjZXMgfX1cbiAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJza3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWwtd3JhcHBlci1ib2R5XCI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJhcmVPcHRpb25zVmlzaWJsZVwiPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250cm9sUGFuZWxzXCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuXG4gIDxkaXZcbiAgICBjbGFzcz1cInNreS1kb2NzLWRlbW8tdmlld3BvcnRcIlxuICAgIFtuZ0NsYXNzXT1cIidza3ktZG9jcy1kZW1vLXZpZXdwb3J0LWFsaWduLScgKyBhbGlnbkNvbnRlbnRzXCJcbiAgPlxuICAgIDxkaXYgY2xhc3M9XCJza3ktZG9jcy1kZW1vLXZpZXdwb3J0LWd1dHRlclwiPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI2NvbnRyb2xQYW5lbHM+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cInNreS1kb2NzLWRlbW8tY29udHJvbC1wYW5lbFwiPjwvbmctY29udGVudD5cbjwvbmctdGVtcGxhdGU+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2NzLXRvb2xzL3NyYy9tb2R1bGVzL2RlbW8vZGVtby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2NzLXRvb2xzL3NyYy9tb2R1bGVzL2RlbW8vZGVtby5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxlQUFlLEVBQ2YsVUFBVSxFQUNWLEtBQUssR0FFTixNQUFNLGVBQWUsQ0FBQztBQUl2QixPQUFPLEVBQUUsZ0NBQWdDLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNsRixPQUFPLEVBQUUsc0NBQXNDLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQzs7Ozs7QUFFL0Y7Ozs7Ozs7O0dBUUc7QUFPSCxNQUFNLE9BQU8sb0JBQW9CO0lBTmpDO1FBMkNTLHNCQUFpQixHQUFHLEtBQUssQ0FBQztLQU9sQztJQTNDQzs7O09BR0c7SUFDSCxJQUNXLGFBQWEsQ0FBQyxLQUFrQztRQUN6RCxJQUFJLENBQUMsY0FBYyxHQUFHLEtBQUssQ0FBQztJQUM5QixDQUFDO0lBRUQsSUFBVyxhQUFhO1FBQ3RCLE9BQU8sSUFBSSxDQUFDLGNBQWMsSUFBSSxNQUFNLENBQUM7SUFDdkMsQ0FBQztJQVFELElBQVcsVUFBVTtRQUNuQixPQUFPLENBQ0wsQ0FBQyxJQUFJLENBQUMsYUFBYSxJQUFJLElBQUksQ0FBQyxhQUFhLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztZQUNyRCxDQUFDLElBQUksQ0FBQyxtQkFBbUIsSUFBSSxJQUFJLENBQUMsbUJBQW1CLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUNsRSxDQUFDO0lBQ0osQ0FBQztJQVFELElBQVcsdUJBQXVCO1FBQ2hDLE9BQU8sSUFBSSxDQUFDLGlCQUFpQixDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLGNBQWMsQ0FBQztJQUNoRSxDQUFDO0lBTU0sMEJBQTBCO1FBQy9CLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQztJQUNuRCxDQUFDOzhHQTNDVSxvQkFBb0I7a0dBQXBCLG9CQUFvQixtSkEyQmQsZ0NBQWdDLFFBQVUsVUFBVSxzREFHcEQsc0NBQXNDLFFBQVUsVUFBVSw2QkMzRDdFLDI3REF3REE7OzJGRDNCYSxvQkFBb0I7a0JBTmhDLFNBQVM7K0JBQ0UsZUFBZSxtQkFHUix1QkFBdUIsQ0FBQyxNQUFNOzhCQVFwQyxhQUFhO3NCQUR2QixLQUFLO2dCQWFDLE9BQU87c0JBRGIsS0FBSztnQkFXRSxhQUFhO3NCQURwQixlQUFlO3VCQUFDLGdDQUFnQyxFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRTtnQkFJL0QsbUJBQW1CO3NCQUQxQixlQUFlO3VCQUFDLHNDQUFzQyxFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZHJlbixcbiAgRWxlbWVudFJlZixcbiAgSW5wdXQsXG4gIFF1ZXJ5TGlzdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFNreURvY3NEZW1vQ29udGVudEFsaWdubWVudCB9IGZyb20gJy4vZGVtby1jb250ZW50LWFsaWdubWVudCc7XG5cbmltcG9ydCB7IFNreURvY3NEZW1vQ29udHJvbFBhbmVsQ29tcG9uZW50IH0gZnJvbSAnLi9kZW1vLWNvbnRyb2wtcGFuZWwuY29tcG9uZW50JztcbmltcG9ydCB7IFNreURvY3NEZW1vQ3VzdG9tQ29udHJvbFBhbmVsQ29tcG9uZW50IH0gZnJvbSAnLi9kZW1vLWN1c3RvbS1jb250cm9sLXBhbmVsLmNvbXBvbmVudCc7XG5cbi8qKlxuICogV3JhcHMgYWxsIGJlaGF2aW9yIGRlbW8gY29tcG9uZW50cyBhbmQgaGFuZGxlcyB0aGUgY29uZmlndXJhdGlvbiBhbmQgYXBwZWFyYW5jZSBvZiB0aGUgYmVoYXZpb3IgZGVtby5cbiAqIEBleGFtcGxlXG4gKiBgYGBtYXJrdXBcbiAqIDxza3ktZG9jcy1kZW1vPlxuICogICBEZW1vIGNvbnRlbnQgaGVyZS5cbiAqIDwvc2t5LWRvY3MtZGVtbz5cbiAqIGBgYFxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktZG9jcy1kZW1vJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2RlbW8uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kZW1vLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lEb2NzRGVtb0NvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBTcGVjaWZpZXMgdGhlIGhvcml6b250YWwgYWxpZ25tZW50IG9mIHRoZSBkZW1vIGNvbnRlbnRzLlxuICAgKiBAZGVmYXVsdCAnbGVmdCdcbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBzZXQgYWxpZ25Db250ZW50cyh2YWx1ZTogU2t5RG9jc0RlbW9Db250ZW50QWxpZ25tZW50KSB7XG4gICAgdGhpcy5fYWxpZ25Db250ZW50cyA9IHZhbHVlO1xuICB9XG5cbiAgcHVibGljIGdldCBhbGlnbkNvbnRlbnRzKCk6IFNreURvY3NEZW1vQ29udGVudEFsaWdubWVudCB7XG4gICAgcmV0dXJuIHRoaXMuX2FsaWduQ29udGVudHMgfHwgJ2xlZnQnO1xuICB9XG5cbiAgLyoqXG4gICAqIEN1c3RvbSBoZWFkaW5nIHRleHQgZm9yIHRoZSBkZW1vLlxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIGhlYWRpbmc6IHN0cmluZztcblxuICBwdWJsaWMgZ2V0IGhhc09wdGlvbnMoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIChcbiAgICAgICh0aGlzLmNvbnRyb2xQYW5lbHMgJiYgdGhpcy5jb250cm9sUGFuZWxzLmxlbmd0aCA+IDApIHx8XG4gICAgICAodGhpcy5jdXN0b21Db250cm9sUGFuZWxzICYmIHRoaXMuY3VzdG9tQ29udHJvbFBhbmVscy5sZW5ndGggPiAwKVxuICAgICk7XG4gIH1cblxuICBAQ29udGVudENoaWxkcmVuKFNreURvY3NEZW1vQ29udHJvbFBhbmVsQ29tcG9uZW50LCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSlcbiAgcHJpdmF0ZSBjb250cm9sUGFuZWxzOiBRdWVyeUxpc3Q8U2t5RG9jc0RlbW9Db250cm9sUGFuZWxDb21wb25lbnQ+O1xuXG4gIEBDb250ZW50Q2hpbGRyZW4oU2t5RG9jc0RlbW9DdXN0b21Db250cm9sUGFuZWxDb21wb25lbnQsIHsgcmVhZDogRWxlbWVudFJlZiB9KVxuICBwcml2YXRlIGN1c3RvbUNvbnRyb2xQYW5lbHM6IFF1ZXJ5TGlzdDxTa3lEb2NzRGVtb0N1c3RvbUNvbnRyb2xQYW5lbENvbXBvbmVudD47XG5cbiAgcHVibGljIGdldCB0b2dnbGVPcHRpb25zQnV0dG9uSWNvbigpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmFyZU9wdGlvbnNWaXNpYmxlID8gJ2NoZXZyb24tdXAnIDogJ2NoZXZyb24tZG93bic7XG4gIH1cblxuICBwdWJsaWMgYXJlT3B0aW9uc1Zpc2libGUgPSBmYWxzZTtcblxuICBwcml2YXRlIF9hbGlnbkNvbnRlbnRzOiBTa3lEb2NzRGVtb0NvbnRlbnRBbGlnbm1lbnQ7XG5cbiAgcHVibGljIG9uVG9nZ2xlT3B0aW9uc0J1dHRvbkNsaWNrKCk6IHZvaWQge1xuICAgIHRoaXMuYXJlT3B0aW9uc1Zpc2libGUgPSAhdGhpcy5hcmVPcHRpb25zVmlzaWJsZTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInNreS1kb2NzLWRlbW9cIj5cbiAgPGRpdiBhcmlhLWxldmVsPVwiM1wiIGNsYXNzPVwic2t5LWRvY3MtZGVtby1oZWFkaW5nXCIgcm9sZT1cImhlYWRpbmdcIj5cbiAgICA8c3BhblxuICAgICAgY2xhc3M9XCJza3ktc2VjdGlvbi1oZWFkaW5nXCJcbiAgICAgIFthdHRyLmRhdGEtdGVzdC1zZWxlY3Rvcl09XCInc2t5LWRvY3MtZGVtby1oZWFkaW5nLXRleHQnXCJcbiAgICA+XG4gICAgICB7eyBoZWFkaW5nIHx8ICgnc2t5LWRvY3MtZGVtby1oZWFkaW5nJyB8IHNreUxpYlJlc291cmNlcykgfX1cbiAgICA8L3NwYW4+XG5cbiAgICA8ZGl2IGNsYXNzPVwic2t5LWRvY3MtZGVtby1jb250cm9sLXBhbmVsLXdyYXBwZXJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJza3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWwtd3JhcHBlci1oZWFkZXJcIj5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICpuZ0lmPVwiaGFzT3B0aW9uc1wiXG4gICAgICAgICAgY2xhc3M9XCJza3ktYnRuXCJcbiAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICBbYXR0ci5kYXRhLXRlc3Qtc2VsZWN0b3JdPVwiJ3NreS1kb2NzLWRlbW8taGVhZGluZy1idXR0b24nXCJcbiAgICAgICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICAgICAnc2t5LWRvY3MtZGVtby1oZWFkaW5nLWJ0bi1vcGVuJzogYXJlT3B0aW9uc1Zpc2libGVcbiAgICAgICAgICB9XCJcbiAgICAgICAgICAoY2xpY2spPVwib25Ub2dnbGVPcHRpb25zQnV0dG9uQ2xpY2soKVwiXG4gICAgICAgID5cbiAgICAgICAgICA8c2t5LWljb24gW2ljb25dPVwidG9nZ2xlT3B0aW9uc0J1dHRvbkljb25cIj48L3NreS1pY29uPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJhcmVPcHRpb25zVmlzaWJsZVwiPlxuICAgICAgICAgICAge3sgJ3NreS1kb2NzLWRlbW8tdG9nZ2xlLWJ1dHRvbi1vZmYnIHwgc2t5TGliUmVzb3VyY2VzIH19XG4gICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFhcmVPcHRpb25zVmlzaWJsZVwiPlxuICAgICAgICAgICAge3sgJ3NreS1kb2NzLWRlbW8tdG9nZ2xlLWJ1dHRvbi1vbicgfCBza3lMaWJSZXNvdXJjZXMgfX1cbiAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJza3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWwtd3JhcHBlci1ib2R5XCI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJhcmVPcHRpb25zVmlzaWJsZVwiPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250cm9sUGFuZWxzXCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImN1c3RvbUNvbnRyb2xQYW5lbHNcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG5cbiAgPGRpdlxuICAgIGNsYXNzPVwic2t5LWRvY3MtZGVtby12aWV3cG9ydFwiXG4gICAgW25nQ2xhc3NdPVwiJ3NreS1kb2NzLWRlbW8tdmlld3BvcnQtYWxpZ24tJyArIGFsaWduQ29udGVudHNcIlxuICA+XG4gICAgPGRpdiBjbGFzcz1cInNreS1kb2NzLWRlbW8tdmlld3BvcnQtZ3V0dGVyXCI+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG5cbjxuZy10ZW1wbGF0ZSAjY29udHJvbFBhbmVscz5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic2t5LWRvY3MtZGVtby1jb250cm9sLXBhbmVsXCIgLz5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjY3VzdG9tQ29udHJvbFBhbmVscz5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic2t5LWRvY3MtZGVtby1jdXN0b20tY29udHJvbC1wYW5lbFwiIC8+XG48L25nLXRlbXBsYXRlPlxuIl19

package/esm2022/modules/demo/demo.module.mjs

@@ -10,14 +10,16 @@ import { SkyDocsDemoControlPanelCheckboxComponent } from './demo-control-panel-c
 import { SkyDocsDemoControlPanelComponent } from './demo-control-panel.component';
 import { SkyDocsDemoControlPanelRadioGroupComponent } from './demo-control-panel-radio-group.component';
 import { SkyDocsDemoControlPanelSectionComponent } from './demo-control-panel-section.component';
+import { SkyDocsDemoCustomControlPanelComponent } from './demo-custom-control-panel.component';
 import * as i0 from "@angular/core";
 export class SkyDocsDemoModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoModule, declarations: [SkyDocsDemoComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoModule, declarations: [SkyDocsDemoComponent,
             SkyDocsDemoControlPanelCheckboxComponent,
             SkyDocsDemoControlPanelComponent,
             SkyDocsDemoControlPanelRadioGroupComponent,
-            SkyDocsDemoControlPanelSectionComponent], imports: [CommonModule,
+            SkyDocsDemoControlPanelSectionComponent,
+            SkyDocsDemoCustomControlPanelComponent], imports: [CommonModule,
             FormsModule,
             SkyCheckboxModule,
             SkyDocsToolsResourcesModule,
@@ -27,8 +29,9 @@ export class SkyDocsDemoModule {
             SkyDocsDemoControlPanelCheckboxComponent,
             SkyDocsDemoControlPanelComponent,
             SkyDocsDemoControlPanelRadioGroupComponent,
-            SkyDocsDemoControlPanelSectionComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoModule, imports: [CommonModule,
+            SkyDocsDemoControlPanelSectionComponent,
+            SkyDocsDemoCustomControlPanelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoModule, imports: [CommonModule,
             FormsModule,
             SkyCheckboxModule,
             SkyDocsToolsResourcesModule,
@@ -36,7 +39,7 @@ export class SkyDocsDemoModule {
             SkyRadioModule,
             SkyThemeModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -54,6 +57,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                         SkyDocsDemoControlPanelComponent,
                         SkyDocsDemoControlPanelRadioGroupComponent,
                         SkyDocsDemoControlPanelSectionComponent,
+                        SkyDocsDemoCustomControlPanelComponent
                     ],
                     exports: [
                         SkyDocsDemoComponent,
@@ -61,7 +65,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                         SkyDocsDemoControlPanelComponent,
                         SkyDocsDemoControlPanelRadioGroupComponent,
                         SkyDocsDemoControlPanelSectionComponent,
+                        SkyDocsDemoCustomControlPanelComponent
                     ],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2NzLXRvb2xzL3NyYy9tb2R1bGVzL2RlbW8vZGVtby5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRS9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFekMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTdDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxjQUFjLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFFakUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBRWxELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFFOUMsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sMkNBQTJDLENBQUM7QUFFeEYsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFFeEQsT0FBTyxFQUFFLHdDQUF3QyxFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFFbkcsT0FBTyxFQUFFLGdDQUFnQyxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFFbEYsT0FBTyxFQUFFLDBDQUEwQyxFQUFFLE1BQU0sNENBQTRDLENBQUM7QUFFeEcsT0FBTyxFQUFFLHVDQUF1QyxFQUFFLE1BQU0sd0NBQXdDLENBQUM7O0FBMkJqRyxNQUFNLE9BQU8saUJBQWlCOzhHQUFqQixpQkFBaUI7K0dBQWpCLGlCQUFpQixpQkFkMUIsb0JBQW9CO1lBQ3BCLHdDQUF3QztZQUN4QyxnQ0FBZ0M7WUFDaEMsMENBQTBDO1lBQzFDLHVDQUF1QyxhQWJ2QyxZQUFZO1lBQ1osV0FBVztZQUNYLGlCQUFpQjtZQUNqQiwyQkFBMkI7WUFDM0IsYUFBYTtZQUNiLGNBQWM7WUFDZCxjQUFjLGFBVWQsb0JBQW9CO1lBQ3BCLHdDQUF3QztZQUN4QyxnQ0FBZ0M7WUFDaEMsMENBQTBDO1lBQzFDLHVDQUF1QzsrR0FHOUIsaUJBQWlCLFlBdkIxQixZQUFZO1lBQ1osV0FBVztZQUNYLGlCQUFpQjtZQUNqQiwyQkFBMkI7WUFDM0IsYUFBYTtZQUNiLGNBQWM7WUFDZCxjQUFjOzsyRkFpQkwsaUJBQWlCO2tCQXpCN0IsUUFBUTttQkFBQztvQkFDUixPQUFPLEVBQUU7d0JBQ1AsWUFBWTt3QkFDWixXQUFXO3dCQUNYLGlCQUFpQjt3QkFDakIsMkJBQTJCO3dCQUMzQixhQUFhO3dCQUNiLGNBQWM7d0JBQ2QsY0FBYztxQkFDZjtvQkFDRCxZQUFZLEVBQUU7d0JBQ1osb0JBQW9CO3dCQUNwQix3Q0FBd0M7d0JBQ3hDLGdDQUFnQzt3QkFDaEMsMENBQTBDO3dCQUMxQyx1Q0FBdUM7cUJBQ3hDO29CQUNELE9BQU8sRUFBRTt3QkFDUCxvQkFBb0I7d0JBQ3BCLHdDQUF3Qzt3QkFDeEMsZ0NBQWdDO3dCQUNoQywwQ0FBMEM7d0JBQzFDLHVDQUF1QztxQkFDeEM7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5pbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuaW1wb3J0IHsgU2t5Q2hlY2tib3hNb2R1bGUsIFNreVJhZGlvTW9kdWxlIH0gZnJvbSAnQHNreXV4L2Zvcm1zJztcblxuaW1wb3J0IHsgU2t5SWNvbk1vZHVsZSB9IGZyb20gJ0Bza3l1eC9pbmRpY2F0b3JzJztcblxuaW1wb3J0IHsgU2t5VGhlbWVNb2R1bGUgfSBmcm9tICdAc2t5dXgvdGhlbWUnO1xuXG5pbXBvcnQgeyBTa3lEb2NzVG9vbHNSZXNvdXJjZXNNb2R1bGUgfSBmcm9tICcuLi9zaGFyZWQvc2t5LWRvY3MtdG9vbHMtcmVzb3VyY2VzLm1vZHVsZSc7XG5cbmltcG9ydCB7IFNreURvY3NEZW1vQ29tcG9uZW50IH0gZnJvbSAnLi9kZW1vLmNvbXBvbmVudCc7XG5cbmltcG9ydCB7IFNreURvY3NEZW1vQ29udHJvbFBhbmVsQ2hlY2tib3hDb21wb25lbnQgfSBmcm9tICcuL2RlbW8tY29udHJvbC1wYW5lbC1jaGVja2JveC5jb21wb25lbnQnO1xuXG5pbXBvcnQgeyBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbENvbXBvbmVudCB9IGZyb20gJy4vZGVtby1jb250cm9sLXBhbmVsLmNvbXBvbmVudCc7XG5cbmltcG9ydCB7IFNreURvY3NEZW1vQ29udHJvbFBhbmVsUmFkaW9Hcm91cENvbXBvbmVudCB9IGZyb20gJy4vZGVtby1jb250cm9sLXBhbmVsLXJhZGlvLWdyb3VwLmNvbXBvbmVudCc7XG5cbmltcG9ydCB7IFNreURvY3NEZW1vQ29udHJvbFBhbmVsU2VjdGlvbkNvbXBvbmVudCB9IGZyb20gJy4vZGVtby1jb250cm9sLXBhbmVsLXNlY3Rpb24uY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgICBGb3Jtc01vZHVsZSxcbiAgICBTa3lDaGVja2JveE1vZHVsZSxcbiAgICBTa3lEb2NzVG9vbHNSZXNvdXJjZXNNb2R1bGUsXG4gICAgU2t5SWNvbk1vZHVsZSxcbiAgICBTa3lSYWRpb01vZHVsZSxcbiAgICBTa3lUaGVtZU1vZHVsZSxcbiAgXSxcbiAgZGVjbGFyYXRpb25zOiBbXG4gICAgU2t5RG9jc0RlbW9Db21wb25lbnQsXG4gICAgU2t5RG9jc0RlbW9Db250cm9sUGFuZWxDaGVja2JveENvbXBvbmVudCxcbiAgICBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbENvbXBvbmVudCxcbiAgICBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbFJhZGlvR3JvdXBDb21wb25lbnQsXG4gICAgU2t5RG9jc0RlbW9Db250cm9sUGFuZWxTZWN0aW9uQ29tcG9uZW50LFxuICBdLFxuICBleHBvcnRzOiBbXG4gICAgU2t5RG9jc0RlbW9Db21wb25lbnQsXG4gICAgU2t5RG9jc0RlbW9Db250cm9sUGFuZWxDaGVja2JveENvbXBvbmVudCxcbiAgICBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbENvbXBvbmVudCxcbiAgICBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbFJhZGlvR3JvdXBDb21wb25lbnQsXG4gICAgU2t5RG9jc0RlbW9Db250cm9sUGFuZWxTZWN0aW9uQ29tcG9uZW50LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lEb2NzRGVtb01vZHVsZSB7fVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2NzLXRvb2xzL3NyYy9tb2R1bGVzL2RlbW8vZGVtby5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRS9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFekMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTdDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxjQUFjLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFFakUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBRWxELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFFOUMsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sMkNBQTJDLENBQUM7QUFFeEYsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFFeEQsT0FBTyxFQUFFLHdDQUF3QyxFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFFbkcsT0FBTyxFQUFFLGdDQUFnQyxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFFbEYsT0FBTyxFQUFFLDBDQUEwQyxFQUFFLE1BQU0sNENBQTRDLENBQUM7QUFFeEcsT0FBTyxFQUFFLHVDQUF1QyxFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDakcsT0FBTyxFQUFFLHNDQUFzQyxFQUFFLE1BQU0sdUNBQXVDLENBQUM7O0FBNkIvRixNQUFNLE9BQU8saUJBQWlCOzhHQUFqQixpQkFBaUI7K0dBQWpCLGlCQUFpQixpQkFoQjFCLG9CQUFvQjtZQUNwQix3Q0FBd0M7WUFDeEMsZ0NBQWdDO1lBQ2hDLDBDQUEwQztZQUMxQyx1Q0FBdUM7WUFDdkMsc0NBQXNDLGFBZHRDLFlBQVk7WUFDWixXQUFXO1lBQ1gsaUJBQWlCO1lBQ2pCLDJCQUEyQjtZQUMzQixhQUFhO1lBQ2IsY0FBYztZQUNkLGNBQWMsYUFXZCxvQkFBb0I7WUFDcEIsd0NBQXdDO1lBQ3hDLGdDQUFnQztZQUNoQywwQ0FBMEM7WUFDMUMsdUNBQXVDO1lBQ3ZDLHNDQUFzQzsrR0FHN0IsaUJBQWlCLFlBekIxQixZQUFZO1lBQ1osV0FBVztZQUNYLGlCQUFpQjtZQUNqQiwyQkFBMkI7WUFDM0IsYUFBYTtZQUNiLGNBQWM7WUFDZCxjQUFjOzsyRkFtQkwsaUJBQWlCO2tCQTNCN0IsUUFBUTttQkFBQztvQkFDUixPQUFPLEVBQUU7d0JBQ1AsWUFBWTt3QkFDWixXQUFXO3dCQUNYLGlCQUFpQjt3QkFDakIsMkJBQTJCO3dCQUMzQixhQUFhO3dCQUNiLGNBQWM7d0JBQ2QsY0FBYztxQkFDZjtvQkFDRCxZQUFZLEVBQUU7d0JBQ1osb0JBQW9CO3dCQUNwQix3Q0FBd0M7d0JBQ3hDLGdDQUFnQzt3QkFDaEMsMENBQTBDO3dCQUMxQyx1Q0FBdUM7d0JBQ3ZDLHNDQUFzQztxQkFDdkM7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLG9CQUFvQjt3QkFDcEIsd0NBQXdDO3dCQUN4QyxnQ0FBZ0M7d0JBQ2hDLDBDQUEwQzt3QkFDMUMsdUNBQXVDO3dCQUN2QyxzQ0FBc0M7cUJBQ3ZDO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbmltcG9ydCB7IFNreUNoZWNrYm94TW9kdWxlLCBTa3lSYWRpb01vZHVsZSB9IGZyb20gJ0Bza3l1eC9mb3Jtcyc7XG5cbmltcG9ydCB7IFNreUljb25Nb2R1bGUgfSBmcm9tICdAc2t5dXgvaW5kaWNhdG9ycyc7XG5cbmltcG9ydCB7IFNreVRoZW1lTW9kdWxlIH0gZnJvbSAnQHNreXV4L3RoZW1lJztcblxuaW1wb3J0IHsgU2t5RG9jc1Rvb2xzUmVzb3VyY2VzTW9kdWxlIH0gZnJvbSAnLi4vc2hhcmVkL3NreS1kb2NzLXRvb2xzLXJlc291cmNlcy5tb2R1bGUnO1xuXG5pbXBvcnQgeyBTa3lEb2NzRGVtb0NvbXBvbmVudCB9IGZyb20gJy4vZGVtby5jb21wb25lbnQnO1xuXG5pbXBvcnQgeyBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbENoZWNrYm94Q29tcG9uZW50IH0gZnJvbSAnLi9kZW1vLWNvbnRyb2wtcGFuZWwtY2hlY2tib3guY29tcG9uZW50JztcblxuaW1wb3J0IHsgU2t5RG9jc0RlbW9Db250cm9sUGFuZWxDb21wb25lbnQgfSBmcm9tICcuL2RlbW8tY29udHJvbC1wYW5lbC5jb21wb25lbnQnO1xuXG5pbXBvcnQgeyBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbFJhZGlvR3JvdXBDb21wb25lbnQgfSBmcm9tICcuL2RlbW8tY29udHJvbC1wYW5lbC1yYWRpby1ncm91cC5jb21wb25lbnQnO1xuXG5pbXBvcnQgeyBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbFNlY3Rpb25Db21wb25lbnQgfSBmcm9tICcuL2RlbW8tY29udHJvbC1wYW5lbC1zZWN0aW9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTa3lEb2NzRGVtb0N1c3RvbUNvbnRyb2xQYW5lbENvbXBvbmVudCB9IGZyb20gJy4vZGVtby1jdXN0b20tY29udHJvbC1wYW5lbC5jb21wb25lbnQnO1xuXG5ATmdNb2R1bGUoe1xuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEZvcm1zTW9kdWxlLFxuICAgIFNreUNoZWNrYm94TW9kdWxlLFxuICAgIFNreURvY3NUb29sc1Jlc291cmNlc01vZHVsZSxcbiAgICBTa3lJY29uTW9kdWxlLFxuICAgIFNreVJhZGlvTW9kdWxlLFxuICAgIFNreVRoZW1lTW9kdWxlLFxuICBdLFxuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBTa3lEb2NzRGVtb0NvbXBvbmVudCxcbiAgICBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbENoZWNrYm94Q29tcG9uZW50LFxuICAgIFNreURvY3NEZW1vQ29udHJvbFBhbmVsQ29tcG9uZW50LFxuICAgIFNreURvY3NEZW1vQ29udHJvbFBhbmVsUmFkaW9Hcm91cENvbXBvbmVudCxcbiAgICBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbFNlY3Rpb25Db21wb25lbnQsXG4gICAgU2t5RG9jc0RlbW9DdXN0b21Db250cm9sUGFuZWxDb21wb25lbnRcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIFNreURvY3NEZW1vQ29tcG9uZW50LFxuICAgIFNreURvY3NEZW1vQ29udHJvbFBhbmVsQ2hlY2tib3hDb21wb25lbnQsXG4gICAgU2t5RG9jc0RlbW9Db250cm9sUGFuZWxDb21wb25lbnQsXG4gICAgU2t5RG9jc0RlbW9Db250cm9sUGFuZWxSYWRpb0dyb3VwQ29tcG9uZW50LFxuICAgIFNreURvY3NEZW1vQ29udHJvbFBhbmVsU2VjdGlvbkNvbXBvbmVudCxcbiAgICBTa3lEb2NzRGVtb0N1c3RvbUNvbnRyb2xQYW5lbENvbXBvbmVudFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lEb2NzRGVtb01vZHVsZSB7fVxuIl19

package/esm2022/modules/demo-page/demo-page-dom-adapter.service.mjs

@@ -66,10 +66,10 @@ export class SkyDocsDemoPageDomAdapterService {
             anchor.removeEventListener('click', this.eventListener);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageDomAdapterService, deps: [{ token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageDomAdapterService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageDomAdapterService, deps: [{ token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageDomAdapterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageDomAdapterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageDomAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.SkyAppWindowRef }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby1wYWdlLWRvbS1hZGFwdGVyLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2NzLXRvb2xzL3NyYy9tb2R1bGVzL2RlbW8tcGFnZS9kZW1vLXBhZ2UtZG9tLWFkYXB0ZXIuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBSXRELE9BQU8sRUFBYyxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7OztBQUkzQzs7R0FFRztBQUVILE1BQU0sT0FBTyxnQ0FBZ0M7SUFDM0MsSUFBWSxXQUFXO1FBQ3JCLE9BQU8sUUFBUSxDQUFDLGdCQUFnQixDQUFDLHdCQUF3QixDQUFDLENBQUM7SUFDN0QsQ0FBQztJQUVELElBQVksVUFBVTtRQUNwQixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ2pFLENBQUM7SUFJRCxZQUFvQixTQUEwQjtRQUExQixjQUFTLEdBQVQsU0FBUyxDQUFpQjtRQUZ0QyxxQkFBZ0IsR0FBRyxJQUFJLE9BQU8sRUFBcUIsQ0FBQztRQXFEcEQsa0JBQWEsR0FBRyxDQUFDLENBQVEsRUFBRSxFQUFFO1lBQ25DLENBQUMsQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUNuQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDO2dCQUN6QixJQUFJLEVBQUcsQ0FBQyxDQUFDLE1BQTRCLENBQUMsSUFBSTthQUMzQyxDQUFDLENBQUM7UUFDTCxDQUFDLENBQUM7SUF4RCtDLENBQUM7SUFFM0MsV0FBVztRQUNoQixJQUFJLENBQUMseUJBQXlCLEVBQUUsQ0FBQztJQUNuQyxDQUFDO0lBRU0sZ0JBQWdCO1FBQ3JCLEtBQUssSUFBSSxLQUFLLEdBQUcsQ0FBQyxFQUFFLEtBQUssR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLE1BQU0sRUFBRSxLQUFLLEVBQUUsRUFBRSxDQUFDO1lBQzdELE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDdkMsTUFBTSxRQUFRLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDM0MsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQztZQUM1QixNQUFNLElBQUksR0FBRyxHQUFHLEdBQUcsSUFBSSxRQUFRLEVBQUUsQ0FBQztZQUNsQyxNQUFNLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztRQUNyQixDQUFDO0lBQ0gsQ0FBQztJQUVELElBQVcsZUFBZTtRQUN4QixJQUFJLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxTQUFTLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQ2pELElBQUksQ0FBQyxzQkFBc0IsRUFBRSxDQUFDO1FBQ2hDLENBQUM7YUFBTSxDQUFDO1lBQ04sSUFBSSxDQUFDLHlCQUF5QixFQUFFLENBQUM7UUFDbkMsQ0FBQztRQUNELE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDO0lBQy9CLENBQUM7SUFFTSxnQkFBZ0IsQ0FBQyxRQUFnQjtRQUN0QyxJQUFJLENBQUMsU0FBUyxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQzFDLE1BQU0sT0FBTyxHQUFHLFFBQVEsQ0FBQyxjQUFjLENBQUMsUUFBUSxDQUFDLENBQUM7WUFDbEQsSUFBSSxPQUFPLEVBQUUsQ0FBQztnQkFDWixJQUFJLENBQUMsU0FBUyxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FBQyxFQUFFLE9BQU8sQ0FBQyxTQUFTLENBQUMsQ0FBQztZQUM3RCxDQUFDO1FBQ0gsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDO0lBQ1YsQ0FBQztJQUVPLHNCQUFzQjtRQUM1QixzREFBc0Q7UUFDdEQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxZQUFZLENBQUMsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUMxQyxLQUFLLElBQUksS0FBSyxHQUFHLENBQUMsRUFBRSxLQUFLLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQztnQkFDN0QsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQztnQkFDdkMsTUFBTSxDQUFDLGdCQUFnQixDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7WUFDdkQsQ0FBQztRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVPLHlCQUF5QjtRQUMvQixLQUFLLElBQUksS0FBSyxHQUFHLENBQUMsRUFBRSxLQUFLLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQztZQUM3RCxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ3ZDLE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQzFELENBQUM7SUFDSCxDQUFDOzhHQTVEVSxnQ0FBZ0M7a0hBQWhDLGdDQUFnQzs7MkZBQWhDLGdDQUFnQztrQkFENUMsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUsIE9uRGVzdHJveSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBTa3lBcHBXaW5kb3dSZWYgfSBmcm9tICdAc2t5dXgvY29yZSc7XG5cbmltcG9ydCB7IE9ic2VydmFibGUsIFN1YmplY3QgfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHsgU2t5RG9jc0FuY2hvckxpbmsgfSBmcm9tICcuLi90eXBlLWRlZmluaXRpb25zL2FuY2hvci1saW5rJztcblxuLyoqXG4gKiBAaW50ZXJuYWxcbiAqL1xuQEluamVjdGFibGUoKVxuZXhwb3J0IGNsYXNzIFNreURvY3NEZW1vUGFnZURvbUFkYXB0ZXJTZXJ2aWNlIGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgcHJpdmF0ZSBnZXQgYW5jaG9yTGlua3MoKTogTm9kZUxpc3RPZjxIVE1MQW5jaG9yRWxlbWVudD4ge1xuICAgIHJldHVybiBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCdhLnNreS1kb2NzLWFuY2hvci1saW5rJyk7XG4gIH1cblxuICBwcml2YXRlIGdldCBjdXJyZW50VXJsKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMud2luZG93UmVmLm5hdGl2ZVdpbmRvdy5sb2NhdGlvbi5ocmVmLnNwbGl0KCcjJylbMF07XG4gIH1cblxuICBwcml2YXRlIF9hbmNob3JMaW5rQ2xpY2sgPSBuZXcgU3ViamVjdDxTa3lEb2NzQW5jaG9yTGluaz4oKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHdpbmRvd1JlZjogU2t5QXBwV2luZG93UmVmKSB7fVxuXG4gIHB1YmxpYyBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLnJlbW92ZUNsaWNrRXZlbnRMaXN0ZW5lcnMoKTtcbiAgfVxuXG4gIHB1YmxpYyBzZXR1cEFuY2hvckxpbmtzKCk6IHZvaWQge1xuICAgIGZvciAobGV0IGluZGV4ID0gMDsgaW5kZXggPCB0aGlzLmFuY2hvckxpbmtzLmxlbmd0aDsgaW5kZXgrKykge1xuICAgICAgY29uc3QgYW5jaG9yID0gdGhpcy5hbmNob3JMaW5rc1tpbmRleF07XG4gICAgICBjb25zdCBmcmFnbWVudCA9IGFuY2hvci5ocmVmLnNwbGl0KCcjJylbMV07XG4gICAgICBjb25zdCB1cmwgPSB0aGlzLmN1cnJlbnRVcmw7XG4gICAgICBjb25zdCBocmVmID0gYCR7dXJsfSMke2ZyYWdtZW50fWA7XG4gICAgICBhbmNob3IuaHJlZiA9IGhyZWY7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIGdldCBhbmNob3JMaW5rQ2xpY2soKTogT2JzZXJ2YWJsZTxTa3lEb2NzQW5jaG9yTGluaz4ge1xuICAgIGlmICh0aGlzLl9hbmNob3JMaW5rQ2xpY2sub2JzZXJ2ZXJzLmxlbmd0aCA9PT0gMCkge1xuICAgICAgdGhpcy5hZGRDbGlja0V2ZW50TGlzdGVuZXJzKCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMucmVtb3ZlQ2xpY2tFdmVudExpc3RlbmVycygpO1xuICAgIH1cbiAgICByZXR1cm4gdGhpcy5fYW5jaG9yTGlua0NsaWNrO1xuICB9XG5cbiAgcHVibGljIHNjcm9sbFRvRnJhZ21lbnQoZnJhZ21lbnQ6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMud2luZG93UmVmLm5hdGl2ZVdpbmRvdy5zZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIGNvbnN0IGVsZW1lbnQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChmcmFnbWVudCk7XG4gICAgICBpZiAoZWxlbWVudCkge1xuICAgICAgICB0aGlzLndpbmRvd1JlZi5uYXRpdmVXaW5kb3cuc2Nyb2xsVG8oMCwgZWxlbWVudC5vZmZzZXRUb3ApO1xuICAgICAgfVxuICAgIH0sIDI1MCk7XG4gIH1cblxuICBwcml2YXRlIGFkZENsaWNrRXZlbnRMaXN0ZW5lcnMoKTogdm9pZCB7XG4gICAgLy8gV2FpdCBmb3IgYSB0aWNrIHRvIGFsbG93IGFsbCBhbmNob3JzIHRvIGJlIHdyaXR0ZW4uXG4gICAgdGhpcy53aW5kb3dSZWYubmF0aXZlV2luZG93LnNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgZm9yIChsZXQgaW5kZXggPSAwOyBpbmRleCA8IHRoaXMuYW5jaG9yTGlua3MubGVuZ3RoOyBpbmRleCsrKSB7XG4gICAgICAgIGNvbnN0IGFuY2hvciA9IHRoaXMuYW5jaG9yTGlua3NbaW5kZXhdO1xuICAgICAgICBhbmNob3IuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCB0aGlzLmV2ZW50TGlzdGVuZXIpO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG5cbiAgcHJpdmF0ZSByZW1vdmVDbGlja0V2ZW50TGlzdGVuZXJzKCk6IHZvaWQge1xuICAgIGZvciAobGV0IGluZGV4ID0gMDsgaW5kZXggPCB0aGlzLmFuY2hvckxpbmtzLmxlbmd0aDsgaW5kZXgrKykge1xuICAgICAgY29uc3QgYW5jaG9yID0gdGhpcy5hbmNob3JMaW5rc1tpbmRleF07XG4gICAgICBhbmNob3IucmVtb3ZlRXZlbnRMaXN0ZW5lcignY2xpY2snLCB0aGlzLmV2ZW50TGlzdGVuZXIpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgZXZlbnRMaXN0ZW5lciA9IChlOiBFdmVudCkgPT4ge1xuICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICB0aGlzLl9hbmNob3JMaW5rQ2xpY2submV4dCh7XG4gICAgICBocmVmOiAoZS50YXJnZXQgYXMgSFRNTEFuY2hvckVsZW1lbnQpLmhyZWYsXG4gICAgfSk7XG4gIH07XG59XG4iXX0=

package/esm2022/modules/demo-page/demo-page-module-info.component.mjs

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class SkyDocsDemoPageModuleInfoComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageModuleInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SkyDocsDemoPageModuleInfoComponent, selector: "sky-docs-demo-page-module-info", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageModuleInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: SkyDocsDemoPageModuleInfoComponent, selector: "sky-docs-demo-page-module-info", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageModuleInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageModuleInfoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-docs-demo-page-module-info',

package/esm2022/modules/demo-page/demo-page-section.component.mjs

@@ -31,10 +31,10 @@ export class SkyDocsDemoPageSectionComponent {
             .replace(/--/g, '-');
         return sanitized;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SkyDocsDemoPageSectionComponent, selector: "sky-docs-demo-page-section", inputs: { heading: "heading" }, ngImport: i0, template: "<div class=\"sky-docs-demo-page-section sky-rounded-corners\">\n  <div *ngIf=\"heading\" class=\"sky-docs-demo-page-section-header\">\n    <sky-docs-heading-anchor headingLevel=\"2\" [anchorId]=\"anchorId\">\n      {{ heading }}\n    </sky-docs-heading-anchor>\n  </div>\n  <div class=\"sky-docs-demo-page-section-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-docs-demo-page-section{margin-bottom:50px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: SkyDocsDemoPageSectionComponent, selector: "sky-docs-demo-page-section", inputs: { heading: "heading" }, ngImport: i0, template: "<div class=\"sky-docs-demo-page-section sky-rounded-corners\">\n  <div *ngIf=\"heading\" class=\"sky-docs-demo-page-section-header\">\n    <sky-docs-heading-anchor headingLevel=\"2\" [anchorId]=\"anchorId\">\n      {{ heading }}\n    </sky-docs-heading-anchor>\n  </div>\n  <div class=\"sky-docs-demo-page-section-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-docs-demo-page-section{margin-bottom:50px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingLevel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-docs-demo-page-section', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-demo-page-section sky-rounded-corners\">\n  <div *ngIf=\"heading\" class=\"sky-docs-demo-page-section-header\">\n    <sky-docs-heading-anchor headingLevel=\"2\" [anchorId]=\"anchorId\">\n      {{ heading }}\n    </sky-docs-heading-anchor>\n  </div>\n  <div class=\"sky-docs-demo-page-section-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-docs-demo-page-section{margin-bottom:50px}\n"] }]
         }], propDecorators: { heading: [{

package/esm2022/modules/demo-page/demo-page-summary.component.mjs

@@ -11,10 +11,10 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class SkyDocsDemoPageSummaryComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SkyDocsDemoPageSummaryComponent, selector: "sky-docs-demo-page-summary", ngImport: i0, template: "<div class=\"sky-docs-demo-page-summary\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-docs-demo-page-summary{margin-bottom:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: SkyDocsDemoPageSummaryComponent, selector: "sky-docs-demo-page-summary", ngImport: i0, template: "<div class=\"sky-docs-demo-page-summary\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-docs-demo-page-summary{margin-bottom:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageSummaryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageSummaryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-docs-demo-page-summary', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-demo-page-summary\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-docs-demo-page-summary{margin-bottom:20px}\n"] }]
         }] });

package/esm2022/modules/demo-page/demo-page-title.service.mjs

@@ -16,10 +16,10 @@ export class SkyDocsDemoPageTitleService {
         }
         this.title.setTitle(windowTitle);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageTitleService, deps: [{ token: i1.Title }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageTitleService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageTitleService, deps: [{ token: i1.Title }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageTitleService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageTitleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageTitleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/esm2022/modules/demo-page/demo-page-type-definitions.component.mjs

@@ -12,10 +12,10 @@ import * as i8 from "./demo-page-section.component";
  * @internal
  */
 export class SkyDocsDemoPageTypeDefinitionsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageTypeDefinitionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SkyDocsDemoPageTypeDefinitionsComponent, selector: "sky-docs-demo-page-type-definitions", inputs: { types: "types" }, ngImport: i0, template: "<ng-template [ngIf]=\"types\">\n  <sky-docs-demo-page-section\n    *ngIf=\"types.components.length\"\n    heading=\"Components\"\n  >\n    <sky-docs-directive-definition\n      *ngFor=\"let config of types.components\"\n      [config]=\"config\"\n    ></sky-docs-directive-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.directives.length\"\n    heading=\"Directives\"\n  >\n    <sky-docs-directive-definition\n      *ngFor=\"let config of types.directives\"\n      [config]=\"config\"\n    ></sky-docs-directive-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section *ngIf=\"types.pipes.length\" heading=\"Pipes\">\n    <sky-docs-pipe-definition\n      *ngFor=\"let config of types.pipes\"\n      [config]=\"config\"\n    ></sky-docs-pipe-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section *ngIf=\"types.services.length\" heading=\"Services\">\n    <sky-docs-class-definition\n      *ngFor=\"let config of types.services\"\n      [config]=\"config\"\n    ></sky-docs-class-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section *ngIf=\"types.classes.length\" heading=\"Classes\">\n    <sky-docs-class-definition\n      *ngFor=\"let config of types.classes\"\n      [config]=\"config\"\n    ></sky-docs-class-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.interfaces.length\"\n    heading=\"Interfaces\"\n  >\n    <sky-docs-interface-definition\n      *ngFor=\"let config of types.interfaces\"\n      [config]=\"config\"\n    ></sky-docs-interface-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.enumerations.length\"\n    heading=\"Enumerations\"\n  >\n    <sky-docs-enumeration-definition\n      *ngFor=\"let config of types.enumerations\"\n      [config]=\"config\"\n    ></sky-docs-enumeration-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.typeAliases.length\"\n    heading=\"Type aliases\"\n  >\n    <sky-docs-type-alias-definition\n      *ngFor=\"let config of types.typeAliases\"\n      [config]=\"config\"\n    ></sky-docs-type-alias-definition>\n  </sky-docs-demo-page-section>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SkyDocsClassDefinitionComponent, selector: "sky-docs-class-definition", inputs: ["config"] }, { kind: "component", type: i3.SkyDocsDirectiveDefinitionComponent, selector: "sky-docs-directive-definition", inputs: ["config"] }, { kind: "component", type: i4.SkyDocsEnumerationDefinitionComponent, selector: "sky-docs-enumeration-definition", inputs: ["config"] }, { kind: "component", type: i5.SkyDocsInterfaceDefinitionComponent, selector: "sky-docs-interface-definition", inputs: ["config"] }, { kind: "component", type: i6.SkyDocsPipeDefinitionComponent, selector: "sky-docs-pipe-definition", inputs: ["config"] }, { kind: "component", type: i7.SkyDocsTypeAliasDefinitionComponent, selector: "sky-docs-type-alias-definition", inputs: ["config"] }, { kind: "component", type: i8.SkyDocsDemoPageSectionComponent, selector: "sky-docs-demo-page-section", inputs: ["heading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageTypeDefinitionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: SkyDocsDemoPageTypeDefinitionsComponent, selector: "sky-docs-demo-page-type-definitions", inputs: { types: "types" }, ngImport: i0, template: "<ng-template [ngIf]=\"types\">\n  <sky-docs-demo-page-section\n    *ngIf=\"types.components.length\"\n    heading=\"Components\"\n  >\n    <sky-docs-directive-definition\n      *ngFor=\"let config of types.components\"\n      [config]=\"config\"\n    ></sky-docs-directive-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.directives.length\"\n    heading=\"Directives\"\n  >\n    <sky-docs-directive-definition\n      *ngFor=\"let config of types.directives\"\n      [config]=\"config\"\n    ></sky-docs-directive-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section *ngIf=\"types.pipes.length\" heading=\"Pipes\">\n    <sky-docs-pipe-definition\n      *ngFor=\"let config of types.pipes\"\n      [config]=\"config\"\n    ></sky-docs-pipe-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section *ngIf=\"types.services.length\" heading=\"Services\">\n    <sky-docs-class-definition\n      *ngFor=\"let config of types.services\"\n      [config]=\"config\"\n    ></sky-docs-class-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section *ngIf=\"types.classes.length\" heading=\"Classes\">\n    <sky-docs-class-definition\n      *ngFor=\"let config of types.classes\"\n      [config]=\"config\"\n    ></sky-docs-class-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.interfaces.length\"\n    heading=\"Interfaces\"\n  >\n    <sky-docs-interface-definition\n      *ngFor=\"let config of types.interfaces\"\n      [config]=\"config\"\n    ></sky-docs-interface-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.enumerations.length\"\n    heading=\"Enumerations\"\n  >\n    <sky-docs-enumeration-definition\n      *ngFor=\"let config of types.enumerations\"\n      [config]=\"config\"\n    ></sky-docs-enumeration-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.typeAliases.length\"\n    heading=\"Type aliases\"\n  >\n    <sky-docs-type-alias-definition\n      *ngFor=\"let config of types.typeAliases\"\n      [config]=\"config\"\n    ></sky-docs-type-alias-definition>\n  </sky-docs-demo-page-section>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SkyDocsClassDefinitionComponent, selector: "sky-docs-class-definition", inputs: ["config"] }, { kind: "component", type: i3.SkyDocsDirectiveDefinitionComponent, selector: "sky-docs-directive-definition", inputs: ["config"] }, { kind: "component", type: i4.SkyDocsEnumerationDefinitionComponent, selector: "sky-docs-enumeration-definition", inputs: ["config"] }, { kind: "component", type: i5.SkyDocsInterfaceDefinitionComponent, selector: "sky-docs-interface-definition", inputs: ["config"] }, { kind: "component", type: i6.SkyDocsPipeDefinitionComponent, selector: "sky-docs-pipe-definition", inputs: ["config"] }, { kind: "component", type: i7.SkyDocsTypeAliasDefinitionComponent, selector: "sky-docs-type-alias-definition", inputs: ["config"] }, { kind: "component", type: i8.SkyDocsDemoPageSectionComponent, selector: "sky-docs-demo-page-section", inputs: ["heading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageTypeDefinitionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageTypeDefinitionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-docs-demo-page-type-definitions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngIf]=\"types\">\n  <sky-docs-demo-page-section\n    *ngIf=\"types.components.length\"\n    heading=\"Components\"\n  >\n    <sky-docs-directive-definition\n      *ngFor=\"let config of types.components\"\n      [config]=\"config\"\n    ></sky-docs-directive-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.directives.length\"\n    heading=\"Directives\"\n  >\n    <sky-docs-directive-definition\n      *ngFor=\"let config of types.directives\"\n      [config]=\"config\"\n    ></sky-docs-directive-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section *ngIf=\"types.pipes.length\" heading=\"Pipes\">\n    <sky-docs-pipe-definition\n      *ngFor=\"let config of types.pipes\"\n      [config]=\"config\"\n    ></sky-docs-pipe-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section *ngIf=\"types.services.length\" heading=\"Services\">\n    <sky-docs-class-definition\n      *ngFor=\"let config of types.services\"\n      [config]=\"config\"\n    ></sky-docs-class-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section *ngIf=\"types.classes.length\" heading=\"Classes\">\n    <sky-docs-class-definition\n      *ngFor=\"let config of types.classes\"\n      [config]=\"config\"\n    ></sky-docs-class-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.interfaces.length\"\n    heading=\"Interfaces\"\n  >\n    <sky-docs-interface-definition\n      *ngFor=\"let config of types.interfaces\"\n      [config]=\"config\"\n    ></sky-docs-interface-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.enumerations.length\"\n    heading=\"Enumerations\"\n  >\n    <sky-docs-enumeration-definition\n      *ngFor=\"let config of types.enumerations\"\n      [config]=\"config\"\n    ></sky-docs-enumeration-definition>\n  </sky-docs-demo-page-section>\n\n  <sky-docs-demo-page-section\n    *ngIf=\"types.typeAliases.length\"\n    heading=\"Type aliases\"\n  >\n    <sky-docs-type-alias-definition\n      *ngFor=\"let config of types.typeAliases\"\n      [config]=\"config\"\n    ></sky-docs-type-alias-definition>\n  </sky-docs-demo-page-section>\n</ng-template>\n" }]
         }], propDecorators: { types: [{

package/esm2022/modules/demo-page/demo-page.component.mjs

@@ -158,10 +158,10 @@ export class SkyDocsDemoPageComponent {
         this.testingTypeDefinitions = this.typeDefinitionService.getTypeDefinitions(this.testingSourceCodePath, this.additionalTestingSourceCodePaths);
         this.enableTestingTab = Object.values(this.testingTypeDefinitions).some((value) => value && value.length > 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageComponent, deps: [{ token: i1.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: i2.SkyAppConfig }, { token: i3.SkyDocsDemoPageDomAdapterService }, { token: i4.SkyDocsSupportalService }, { token: i5.SkyDocsDemoPageTitleService }, { token: i6.SkyDocsTypeDefinitionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", 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: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "directive", type: i9.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i10.SkyDocsModuleInfoComponent, selector: "sky-docs-module-info", inputs: ["gitRepoUrl", "moduleName", "packageName", "packageUrl"] }, { kind: "component", type: i11.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i11.λ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: i13.SkyDocsDemoPageSectionComponent, selector: "sky-docs-demo-page-section", inputs: ["heading"] }, { kind: "component", type: i14.SkyDocsDemoPageTypeDefinitionsComponent, selector: "sky-docs-demo-page-type-definitions", inputs: ["types"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageComponent, deps: [{ token: i1.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: i2.SkyAppConfig }, { token: i3.SkyDocsDemoPageDomAdapterService }, { token: i4.SkyDocsSupportalService }, { token: i5.SkyDocsDemoPageTitleService }, { token: i6.SkyDocsTypeDefinitionsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", 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: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "directive", type: i9.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i10.SkyDocsModuleInfoComponent, selector: "sky-docs-module-info", inputs: ["gitRepoUrl", "moduleName", "packageName", "packageUrl"] }, { kind: "component", type: i11.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i11.λ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: i13.SkyDocsDemoPageSectionComponent, selector: "sky-docs-demo-page-section", inputs: ["heading"] }, { kind: "component", type: i14.SkyDocsDemoPageTypeDefinitionsComponent, selector: "sky-docs-demo-page-type-definitions", inputs: ["types"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", 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    <sky-alert\n      *ngIf=\"\n        moduleTypeDefinitions?.hasPreviewFeatures ||\n        testingTypeDefinitions?.hasPreviewFeatures\n      \"\n      class=\"sky-docs-demo-page-preview-alert sky-margin-stacked-lg\"\n      >This component currently has preview features available that may not be\n      fully represented in the design documentation, the demo, or code examples.\n      <ng-container *ngIf=\"siteOptions?.previewFeaturesUrl\"\n        >Learn more about this work\n        <a [skyAppLink]=\"siteOptions?.previewFeaturesUrl\"\n          >here.</a\n        ></ng-container\n      ></sky-alert\n    >\n\n    <ng-content select=\"sky-docs-demo\"></ng-content>\n\n    <div class=\"sky-docs-demo-page-main\">\n      <sky-tabset *ngIf=\"enableTabLayout; else content\" permalinkId=\"docs\">\n        <sky-tab tabHeading=\"Design\" *ngIf=\"!!designGuidelinesComponent\">\n          <ng-content select=\"sky-docs-design-guidelines\"></ng-content>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Development\">\n          <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Testing\" *ngIf=\"enableTestingTab\">\n          <sky-docs-demo-page-section heading=\"Test harnesses\">\n            <p>\n              SKY UX test harnesses are built upon Angular CDK component\n              harnesses. For more information see the\n              <a href=\"https://material.angular.io/cdk/test-harnesses/overview\"\n                >Angular CDK component harness documentation</a\n              >.\n            </p>\n          </sky-docs-demo-page-section>\n          <sky-docs-demo-page-type-definitions [types]=\"testingTypeDefinitions\">\n          </sky-docs-demo-page-type-definitions>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Code examples\" *ngIf=\"enableCodeExamples\">\n          <ng-content select=\"sky-docs-code-examples\"></ng-content>\n        </sky-tab>\n      </sky-tabset>\n    </div>\n  </stache>\n</div>\n\n<ng-template #content>\n  <sky-docs-demo-page-section\n    *ngIf=\"moduleName || packageName\"\n    heading=\"Installation\"\n  >\n    <sky-docs-module-info\n      [gitRepoUrl]=\"gitRepoUrl\"\n      [moduleName]=\"moduleName\"\n      [packageName]=\"packageName\"\n      [packageUrl]=\"packageUrl\"\n    >\n      <ng-content select=\"sky-docs-demo-page-module-info\"></ng-content>\n    </sky-docs-module-info>\n  </sky-docs-demo-page-section>\n\n  <ng-content></ng-content>\n\n  <sky-docs-demo-page-type-definitions [types]=\"moduleTypeDefinitions\">\n  </sky-docs-demo-page-type-definitions>\n</ng-template>\n", styles: [".sky-docs-demo-page ::ng-deep p{margin:15px 0}.sky-docs-demo-page ::ng-deep .stache-max-width-container{max-width:none;margin:0}.sky-docs-demo-page ::ng-deep .sky-docs-code-block{margin:15px 0;display:block}.sky-docs-demo-page ::ng-deep .sky-docs-code-block .sky-code-block{font-size:13.5px}.sky-docs-demo-page ::ng-deep .sky-docs-code-block .sky-code-output{margin:-2px 0 0;padding:0 0 0 15px;background:transparent;border:0}.sky-docs-demo-page ::ng-deep .sky-definition-list{margin:0}.sky-docs-demo-page ::ng-deep .sky-definition-list .sky-docs-code-block{margin:0}.sky-docs-demo-page ::ng-deep .sky-docs-type-definition-wrapper{margin-bottom:40px}.sky-docs-demo-page-main{padding:30px 0}.sky-docs-demo-page-main table{margin-top:15px;margin-bottom:15px}.sky-docs-demo-page-main ::ng-deep .sky-tabset{margin-left:-45px;margin-right:-45px;padding-left:45px;padding-right:45px}\n"] }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: i2.SkyAppConfig }, { type: i3.SkyDocsDemoPageDomAdapterService }, { type: i4.SkyDocsSupportalService }, { type: i5.SkyDocsDemoPageTitleService }, { type: i6.SkyDocsTypeDefinitionsService }], propDecorators: { additionalSourceCodePaths: [{

package/esm2022/modules/demo-page/demo-page.module.mjs

@@ -18,8 +18,8 @@ import { SkyAlertModule } from '@skyux/indicators';
 import { SkyAppLinkModule } from '@skyux/router';
 import * as i0 from "@angular/core";
 export class SkyDocsDemoPageModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageModule, declarations: [SkyDocsDemoPageComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageModule, declarations: [SkyDocsDemoPageComponent,
             SkyDocsDemoPageModuleInfoComponent,
             SkyDocsDemoPageSectionComponent,
             SkyDocsDemoPageSummaryComponent,
@@ -41,7 +41,7 @@ export class SkyDocsDemoPageModule {
             SkyDocsDemoPageSectionComponent,
             SkyDocsDemoPageSummaryComponent,
             SkyDocsDemoPageTypeDefinitionsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageModule, imports: [CommonModule,
             RouterModule,
             SkyAlertModule,
             SkyAppLinkModule,
@@ -56,7 +56,7 @@ export class SkyDocsDemoPageModule {
             StachePageSummaryModule,
             StacheWrapperModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDemoPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDemoPageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/modules/design-guidelines/design-guideline-thumbnail.component.mjs

@@ -5,10 +5,10 @@ export class SkyDocsDesignGuidelineThumbnailComponent {
     constructor() {
         this.showBorder = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDesignGuidelineThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SkyDocsDesignGuidelineThumbnailComponent, selector: "sky-docs-design-guideline-thumbnail", inputs: { caption: "caption", captionType: "captionType", imageAlt: "imageAlt", imageSource: "imageSource", videoSource: "videoSource", showBorder: "showBorder" }, ngImport: i0, template: "<div class=\"sky-docs-design-guideline-thumbnail\">\n  <sky-docs-thumbnail\n    [caption]=\"caption\"\n    [captionType]=\"captionType\"\n    [imageAlt]=\"imageAlt\"\n    [imageSource]=\"imageSource\"\n    [videoSource]=\"videoSource\"\n    [showBorder]=\"showBorder\"\n  ></sky-docs-thumbnail>\n</div>\n", styles: [".sky-docs-design-guideline-thumbnail{margin-bottom:50px}.sky-docs-design-guideline-video video{max-width:100%}.sky-docs-design-guideline-video-border video{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4}\n"], dependencies: [{ kind: "component", type: i1.SkyDocsThumbnailComponent, selector: "sky-docs-thumbnail", inputs: ["caption", "captionType", "imageAlt", "imageSource", "showBorder", "videoSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDesignGuidelineThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: SkyDocsDesignGuidelineThumbnailComponent, selector: "sky-docs-design-guideline-thumbnail", inputs: { caption: "caption", captionType: "captionType", imageAlt: "imageAlt", imageSource: "imageSource", videoSource: "videoSource", showBorder: "showBorder" }, ngImport: i0, template: "<div class=\"sky-docs-design-guideline-thumbnail\">\n  <sky-docs-thumbnail\n    [caption]=\"caption\"\n    [captionType]=\"captionType\"\n    [imageAlt]=\"imageAlt\"\n    [imageSource]=\"imageSource\"\n    [videoSource]=\"videoSource\"\n    [showBorder]=\"showBorder\"\n  ></sky-docs-thumbnail>\n</div>\n", styles: [".sky-docs-design-guideline-thumbnail{margin-bottom:50px}.sky-docs-design-guideline-video video{max-width:100%}.sky-docs-design-guideline-video-border video{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4}\n"], dependencies: [{ kind: "component", type: i1.SkyDocsThumbnailComponent, selector: "sky-docs-thumbnail", inputs: ["caption", "captionType", "imageAlt", "imageSource", "showBorder", "videoSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDesignGuidelineThumbnailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDesignGuidelineThumbnailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-docs-design-guideline-thumbnail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-design-guideline-thumbnail\">\n  <sky-docs-thumbnail\n    [caption]=\"caption\"\n    [captionType]=\"captionType\"\n    [imageAlt]=\"imageAlt\"\n    [imageSource]=\"imageSource\"\n    [videoSource]=\"videoSource\"\n    [showBorder]=\"showBorder\"\n  ></sky-docs-thumbnail>\n</div>\n", styles: [".sky-docs-design-guideline-thumbnail{margin-bottom:50px}.sky-docs-design-guideline-video video{max-width:100%}.sky-docs-design-guideline-video-border video{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4}\n"] }]
         }], propDecorators: { caption: [{

package/esm2022/modules/design-guidelines/design-guideline.component.mjs

@@ -16,10 +16,10 @@ export class SkyDocsDesignGuidelineComponent {
     ngAfterContentInit() {
         this.hasThumbnails = !!this.thumbnails.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDesignGuidelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SkyDocsDesignGuidelineComponent, selector: "sky-docs-design-guideline", inputs: { heading: "heading", headingStyle: "headingStyle" }, queries: [{ propertyName: "thumbnails", predicate: SkyDocsDesignGuidelineThumbnailComponent }], ngImport: i0, template: "<div class=\"sky-docs-design-guideline\">\n  <h3\n    *ngIf=\"heading\"\n    class=\"sky-docs-design-guideline-heading\"\n    [ngClass]=\"classNames\"\n  >\n    {{ heading }}\n  </h3>\n  <sky-row *ngIf=\"hasThumbnails; else content\">\n    <sky-column screenSmall=\"6\" screenMedium=\"5\" screenLarge=\"4\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </sky-column>\n    <sky-column screenSmall=\"6\" screenMedium=\"7\" screenLarge=\"8\">\n      <div class=\"sky-docs-design-guideline-thumbnails\">\n        <ng-container *ngTemplateOutlet=\"thumbnails\"></ng-container>\n      </div>\n    </sky-column>\n  </sky-row>\n</div>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #thumbnails>\n  <ng-content select=\"sky-docs-design-guideline-thumbnail\"></ng-content>\n</ng-template>\n", styles: [".sky-docs-design-guideline-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;margin:30px 0 15px;font-size:19px;font-weight:400}.sky-docs-design-guideline-thumbnails{display:flex;flex-wrap:wrap}.sky-docs-design-guideline-thumbnails ::ng-deep sky-docs-design-guideline-thumbnail:first-child{padding-right:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i2.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDesignGuidelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: SkyDocsDesignGuidelineComponent, selector: "sky-docs-design-guideline", inputs: { heading: "heading", headingStyle: "headingStyle" }, queries: [{ propertyName: "thumbnails", predicate: SkyDocsDesignGuidelineThumbnailComponent }], ngImport: i0, template: "<div class=\"sky-docs-design-guideline\">\n  <h3\n    *ngIf=\"heading\"\n    class=\"sky-docs-design-guideline-heading\"\n    [ngClass]=\"classNames\"\n  >\n    {{ heading }}\n  </h3>\n  <sky-row *ngIf=\"hasThumbnails; else content\">\n    <sky-column screenSmall=\"6\" screenMedium=\"5\" screenLarge=\"4\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </sky-column>\n    <sky-column screenSmall=\"6\" screenMedium=\"7\" screenLarge=\"8\">\n      <div class=\"sky-docs-design-guideline-thumbnails\">\n        <ng-container *ngTemplateOutlet=\"thumbnails\"></ng-container>\n      </div>\n    </sky-column>\n  </sky-row>\n</div>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #thumbnails>\n  <ng-content select=\"sky-docs-design-guideline-thumbnail\"></ng-content>\n</ng-template>\n", styles: [".sky-docs-design-guideline-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;margin:30px 0 15px;font-size:19px;font-weight:400}.sky-docs-design-guideline-thumbnails{display:flex;flex-wrap:wrap}.sky-docs-design-guideline-thumbnails ::ng-deep sky-docs-design-guideline-thumbnail:first-child{padding-right:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i2.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyDocsDesignGuidelineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SkyDocsDesignGuidelineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-docs-design-guideline', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-design-guideline\">\n  <h3\n    *ngIf=\"heading\"\n    class=\"sky-docs-design-guideline-heading\"\n    [ngClass]=\"classNames\"\n  >\n    {{ heading }}\n  </h3>\n  <sky-row *ngIf=\"hasThumbnails; else content\">\n    <sky-column screenSmall=\"6\" screenMedium=\"5\" screenLarge=\"4\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </sky-column>\n    <sky-column screenSmall=\"6\" screenMedium=\"7\" screenLarge=\"8\">\n      <div class=\"sky-docs-design-guideline-thumbnails\">\n        <ng-container *ngTemplateOutlet=\"thumbnails\"></ng-container>\n      </div>\n    </sky-column>\n  </sky-row>\n</div>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #thumbnails>\n  <ng-content select=\"sky-docs-design-guideline-thumbnail\"></ng-content>\n</ng-template>\n", styles: [".sky-docs-design-guideline-heading{line-height:1.1;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:#212327;margin:30px 0 15px;font-size:19px;font-weight:400}.sky-docs-design-guideline-thumbnails{display:flex;flex-wrap:wrap}.sky-docs-design-guideline-thumbnails ::ng-deep sky-docs-design-guideline-thumbnail:first-child{padding-right:20px}\n"] }]
         }], propDecorators: { heading: [{