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

package/esm2020/modules/code-examples/code-examples.component.mjs

@@ -0,0 +1,97 @@
+import { ChangeDetectionStrategy, Component, ContentChildren, Input, } from '@angular/core';
+import { SkyDocsCodeExampleComponent } from './code-example.component';
+import * as i0 from "@angular/core";
+import * as i1 from "./code-examples-editor.service";
+import * as i2 from "../source-code/source-code.service";
+import * as i3 from "@skyux/lists";
+import * as i4 from "@skyux/tabs";
+import * as i5 from "@blackbaud/skyux-lib-code-block";
+import * as i6 from "@skyux/indicators";
+import * as i7 from "@angular/common";
+import * as i8 from "@skyux/i18n";
+/**
+ * Wraps all code examples and handles their configuration and styles.
+ * @example
+ * ```
+ * <sky-docs-code-examples
+ *   [packageDependencies]="{
+ *     "foobar": "*",
+ *     "baz": "1.2.3"
+ *   }"
+ * >
+ *   <sky-docs-code-example>
+ *   </sky-docs-code-example>
+ * </sky-docs-code-examples>
+ * ```
+ */
+export class SkyDocsCodeExamplesComponent {
+    constructor(editorService, sourceCodeService) {
+        this.editorService = editorService;
+        this.sourceCodeService = sourceCodeService;
+        this.stylesheets = [];
+        this.codeExamples = [];
+    }
+    /**
+     * Any extra NPM package dependencies that are needed for the editor to run the code example.
+     * @default {}
+     */
+    set packageDependencies(value) {
+        this._packageDependencies = value;
+    }
+    get packageDependencies() {
+        return this._packageDependencies || {};
+    }
+    ngAfterContentInit() {
+        this.codeExampleComponents.forEach((component) => {
+            // Make sure the source code path ends in a slash, so that similarly named directories aren't included.
+            let sourceCodePath = component.sourceCodePath;
+            if (sourceCodePath.slice(-1) !== '/') {
+                sourceCodePath += '/';
+            }
+            const sourceCode = this.sourceCodeService.getSourceCode(sourceCodePath);
+            if (!sourceCode.length) {
+                console.warn(`Source code not found at location "${sourceCodePath}" for "${component.heading}"!`);
+                return;
+            }
+            this.codeExamples.push({
+                heading: component.heading,
+                packageDependencies: this.packageDependencies,
+                sourceCode,
+                stylesheets: this.stylesheets,
+                theme: component.theme,
+            });
+        });
+    }
+    launchEditor(codeExample) {
+        this.editorService.launchEditor(codeExample);
+    }
+    /**
+     * Returns a string representing one of PrismJS's supported language types.
+     * See: https://prismjs.com/#supported-languages
+     */
+    parseCodeLanguageType(fileName) {
+        const extension = fileName.split('.').pop().toLowerCase();
+        switch (extension) {
+            case 'ts':
+                return 'typescript';
+            case 'html':
+                return 'markup';
+            default:
+                return extension;
+        }
+    }
+}
+SkyDocsCodeExamplesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExamplesComponent, deps: [{ token: i1.SkyDocsCodeExamplesEditorService }, { token: i2.SkyDocsSourceCodeService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsCodeExamplesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsCodeExamplesComponent, selector: "sky-docs-code-examples", inputs: { packageDependencies: "packageDependencies", stylesheets: "stylesheets" }, queries: [{ propertyName: "codeExampleComponents", predicate: SkyDocsCodeExampleComponent }], ngImport: i0, template: "<div *ngIf=\"codeExamples && codeExamples.length\" class=\"sky-docs-code-examples\">\n  <sky-repeater\n    *ngIf=\"codeExamples.length > 1; else singleCodeExample\"\n    expandMode=\"multiple\"\n  >\n    <sky-repeater-item\n      *ngFor=\"let codeExample of codeExamples\"\n      [isExpanded]=\"false\"\n    >\n      <sky-repeater-item-title>\n        <ng-container\n          *ngTemplateOutlet=\"\n            codeExampleHeaderTemplate;\n            context: { $implicit: codeExample }\n          \"\n        >\n        </ng-container>\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        <ng-container\n          *ngTemplateOutlet=\"\n            codeExampleTemplate;\n            context: { $implicit: codeExample }\n          \"\n        >\n        </ng-container>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  </sky-repeater>\n</div>\n\n<ng-template>\n  <ng-content select=\"sky-docs-code-example\"> </ng-content>\n</ng-template>\n\n<ng-template let-item #codeExampleTemplate>\n  <div class=\"sky-docs-code-example-wrapper\">\n    <sky-vertical-tabset *ngIf=\"item.sourceCode && item.sourceCode.length\">\n      <sky-vertical-tab\n        *ngFor=\"let file of item.sourceCode; let i = index\"\n        [active]=\"i === 0\"\n        [tabHeading]=\"file.fileName\"\n      >\n        <sky-code-block\n          [code]=\"file.rawContents\"\n          [languageType]=\"parseCodeLanguageType(file.fileName)\"\n        >\n        </sky-code-block>\n      </sky-vertical-tab>\n    </sky-vertical-tabset>\n  </div>\n</ng-template>\n\n<ng-template #singleCodeExample>\n  <ng-container\n    *ngTemplateOutlet=\"\n      codeExampleHeaderTemplate;\n      context: { $implicit: codeExamples[0] }\n    \"\n  >\n  </ng-container>\n  <ng-container\n    *ngTemplateOutlet=\"\n      codeExampleTemplate;\n      context: { $implicit: codeExamples[0] }\n    \"\n  >\n  </ng-container>\n</ng-template>\n\n<ng-template let-codeExample #codeExampleHeaderTemplate>\n  <div class=\"sky-docs-code-example-header\">\n    <div class=\"sky-docs-code-example-header-title sky-emphasized\">\n      {{ codeExample.heading }}\n    </div>\n    <div class=\"sky-docs-code-example-header-controls\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"launchEditor(codeExample); $event.stopPropagation()\"\n      >\n        <sky-icon icon=\"pencil\"></sky-icon>\n        {{ 'sky-docs-code-example-launch-button-label' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-docs-code-example-header{display:flex;align-items:baseline}.sky-docs-code-example-header-title{flex-grow:1}.sky-docs-code-example-header-controls{flex-grow:0}.sky-docs-code-example-header-controls .sky-btn{font-weight:400}.sky-docs-code-example-wrapper{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;margin-top:10px}.sky-docs-code-example-wrapper ::ng-deep .sky-vertical-tabset-content{margin:0}.sky-docs-code-example-wrapper ::ng-deep sky-code-block{margin:0!important}.sky-docs-code-example-wrapper ::ng-deep .sky-code-block-header{border:0}.sky-docs-code-example-wrapper ::ng-deep .sky-code-output{border-left:0;border-right:0;border-bottom:0}\n"], components: [{ type: i3.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { type: i3.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { type: i3.λ12, selector: "sky-repeater-item-title" }, { type: i3.λ8, selector: "sky-repeater-item-content" }, { type: i4.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { type: i4.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }, { type: i5.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i8.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExamplesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-code-examples', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"codeExamples && codeExamples.length\" class=\"sky-docs-code-examples\">\n  <sky-repeater\n    *ngIf=\"codeExamples.length > 1; else singleCodeExample\"\n    expandMode=\"multiple\"\n  >\n    <sky-repeater-item\n      *ngFor=\"let codeExample of codeExamples\"\n      [isExpanded]=\"false\"\n    >\n      <sky-repeater-item-title>\n        <ng-container\n          *ngTemplateOutlet=\"\n            codeExampleHeaderTemplate;\n            context: { $implicit: codeExample }\n          \"\n        >\n        </ng-container>\n      </sky-repeater-item-title>\n      <sky-repeater-item-content>\n        <ng-container\n          *ngTemplateOutlet=\"\n            codeExampleTemplate;\n            context: { $implicit: codeExample }\n          \"\n        >\n        </ng-container>\n      </sky-repeater-item-content>\n    </sky-repeater-item>\n  </sky-repeater>\n</div>\n\n<ng-template>\n  <ng-content select=\"sky-docs-code-example\"> </ng-content>\n</ng-template>\n\n<ng-template let-item #codeExampleTemplate>\n  <div class=\"sky-docs-code-example-wrapper\">\n    <sky-vertical-tabset *ngIf=\"item.sourceCode && item.sourceCode.length\">\n      <sky-vertical-tab\n        *ngFor=\"let file of item.sourceCode; let i = index\"\n        [active]=\"i === 0\"\n        [tabHeading]=\"file.fileName\"\n      >\n        <sky-code-block\n          [code]=\"file.rawContents\"\n          [languageType]=\"parseCodeLanguageType(file.fileName)\"\n        >\n        </sky-code-block>\n      </sky-vertical-tab>\n    </sky-vertical-tabset>\n  </div>\n</ng-template>\n\n<ng-template #singleCodeExample>\n  <ng-container\n    *ngTemplateOutlet=\"\n      codeExampleHeaderTemplate;\n      context: { $implicit: codeExamples[0] }\n    \"\n  >\n  </ng-container>\n  <ng-container\n    *ngTemplateOutlet=\"\n      codeExampleTemplate;\n      context: { $implicit: codeExamples[0] }\n    \"\n  >\n  </ng-container>\n</ng-template>\n\n<ng-template let-codeExample #codeExampleHeaderTemplate>\n  <div class=\"sky-docs-code-example-header\">\n    <div class=\"sky-docs-code-example-header-title sky-emphasized\">\n      {{ codeExample.heading }}\n    </div>\n    <div class=\"sky-docs-code-example-header-controls\">\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"launchEditor(codeExample); $event.stopPropagation()\"\n      >\n        <sky-icon icon=\"pencil\"></sky-icon>\n        {{ 'sky-docs-code-example-launch-button-label' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-docs-code-example-header{display:flex;align-items:baseline}.sky-docs-code-example-header-title{flex-grow:1}.sky-docs-code-example-header-controls{flex-grow:0}.sky-docs-code-example-header-controls .sky-btn{font-weight:400}.sky-docs-code-example-wrapper{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;margin-top:10px}.sky-docs-code-example-wrapper ::ng-deep .sky-vertical-tabset-content{margin:0}.sky-docs-code-example-wrapper ::ng-deep sky-code-block{margin:0!important}.sky-docs-code-example-wrapper ::ng-deep .sky-code-block-header{border:0}.sky-docs-code-example-wrapper ::ng-deep .sky-code-output{border-left:0;border-right:0;border-bottom:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.SkyDocsCodeExamplesEditorService }, { type: i2.SkyDocsSourceCodeService }]; }, propDecorators: { packageDependencies: [{
+                type: Input
+            }], stylesheets: [{
+                type: Input
+            }], codeExampleComponents: [{
+                type: ContentChildren,
+                args: [SkyDocsCodeExampleComponent]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29kZS1leGFtcGxlcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2NzLXRvb2xzL3NyYy9tb2R1bGVzL2NvZGUtZXhhbXBsZXMvY29kZS1leGFtcGxlcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2NzLXRvb2xzL3NyYy9tb2R1bGVzL2NvZGUtZXhhbXBsZXMvY29kZS1leGFtcGxlcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxlQUFlLEVBQ2YsS0FBSyxHQUVOLE1BQU0sZUFBZSxDQUFDO0FBTXZCLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLDBCQUEwQixDQUFDOzs7Ozs7Ozs7O0FBTXZFOzs7Ozs7Ozs7Ozs7OztHQWNHO0FBT0gsTUFBTSxPQUFPLDRCQUE0QjtJQXdCdkMsWUFDVSxhQUErQyxFQUMvQyxpQkFBMkM7UUFEM0Msa0JBQWEsR0FBYixhQUFhLENBQWtDO1FBQy9DLHNCQUFpQixHQUFqQixpQkFBaUIsQ0FBMEI7UUFYOUMsZ0JBQVcsR0FBYSxFQUFFLENBQUM7UUFFM0IsaUJBQVksR0FBeUIsRUFBRSxDQUFDO0lBVTVDLENBQUM7SUExQko7OztPQUdHO0lBQ0gsSUFDVyxtQkFBbUIsQ0FBQyxLQUEyQztRQUN4RSxJQUFJLENBQUMsb0JBQW9CLEdBQUcsS0FBSyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxJQUFXLG1CQUFtQjtRQUM1QixPQUFPLElBQUksQ0FBQyxvQkFBb0IsSUFBSSxFQUFFLENBQUM7SUFDekMsQ0FBQztJQWlCTSxrQkFBa0I7UUFDdkIsSUFBSSxDQUFDLHFCQUFxQixDQUFDLE9BQU8sQ0FBQyxDQUFDLFNBQVMsRUFBRSxFQUFFO1lBQy9DLHVHQUF1RztZQUN2RyxJQUFJLGNBQWMsR0FBRyxTQUFTLENBQUMsY0FBYyxDQUFDO1lBQzlDLElBQUksY0FBYyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLEdBQUcsRUFBRTtnQkFDcEMsY0FBYyxJQUFJLEdBQUcsQ0FBQzthQUN2QjtZQUVELE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsY0FBYyxDQUFDLENBQUM7WUFFeEUsSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLEVBQUU7Z0JBQ3RCLE9BQU8sQ0FBQyxJQUFJLENBQ1Ysc0NBQXNDLGNBQWMsVUFBVSxTQUFTLENBQUMsT0FBTyxJQUFJLENBQ3BGLENBQUM7Z0JBQ0YsT0FBTzthQUNSO1lBRUQsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUM7Z0JBQ3JCLE9BQU8sRUFBRSxTQUFTLENBQUMsT0FBTztnQkFDMUIsbUJBQW1CLEVBQUUsSUFBSSxDQUFDLG1CQUFtQjtnQkFDN0MsVUFBVTtnQkFDVixXQUFXLEVBQUUsSUFBSSxDQUFDLFdBQVc7Z0JBQzdCLEtBQUssRUFBRSxTQUFTLENBQUMsS0FBSzthQUN2QixDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFTSxZQUFZLENBQUMsV0FBK0I7UUFDakQsSUFBSSxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDL0MsQ0FBQztJQUVEOzs7T0FHRztJQUNJLHFCQUFxQixDQUFDLFFBQWdCO1FBQzNDLE1BQU0sU0FBUyxHQUFHLFFBQVEsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxFQUFFLENBQUMsV0FBVyxFQUFFLENBQUM7UUFFMUQsUUFBUSxTQUFTLEVBQUU7WUFDakIsS0FBSyxJQUFJO2dCQUNQLE9BQU8sWUFBWSxDQUFDO1lBQ3RCLEtBQUssTUFBTTtnQkFDVCxPQUFPLFFBQVEsQ0FBQztZQUNsQjtnQkFDRSxPQUFPLFNBQVMsQ0FBQztTQUNwQjtJQUNILENBQUM7OzBIQTNFVSw0QkFBNEI7OEdBQTVCLDRCQUE0Qix3TEFtQnRCLDJCQUEyQiw2QkMzRDlDLCsvRUF1RkE7NEZEL0NhLDRCQUE0QjtrQkFOeEMsU0FBUzsrQkFDRSx3QkFBd0IsbUJBR2pCLHVCQUF1QixDQUFDLE1BQU07OEpBUXBDLG1CQUFtQjtzQkFEN0IsS0FBSztnQkFVQyxXQUFXO3NCQURqQixLQUFLO2dCQU1FLHFCQUFxQjtzQkFENUIsZUFBZTt1QkFBQywyQkFBMkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlckNvbnRlbnRJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGRyZW4sXG4gIElucHV0LFxuICBRdWVyeUxpc3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBTa3lEb2NzU291cmNlQ29kZVNlcnZpY2UgfSBmcm9tICcuLi9zb3VyY2UtY29kZS9zb3VyY2UtY29kZS5zZXJ2aWNlJztcblxuaW1wb3J0IHsgU2t5RG9jc0NvZGVFeGFtcGxlc0VkaXRvclNlcnZpY2UgfSBmcm9tICcuL2NvZGUtZXhhbXBsZXMtZWRpdG9yLnNlcnZpY2UnO1xuXG5pbXBvcnQgeyBTa3lEb2NzQ29kZUV4YW1wbGVDb21wb25lbnQgfSBmcm9tICcuL2NvZGUtZXhhbXBsZS5jb21wb25lbnQnO1xuXG5pbXBvcnQgeyBTa3lEb2NzQ29kZUV4YW1wbGVNb2R1bGVEZXBlbmRlbmNpZXMgfSBmcm9tICcuL2NvZGUtZXhhbXBsZS1tb2R1bGUtZGVwZW5kZW5jaWVzJztcblxuaW1wb3J0IHsgU2t5RG9jc0NvZGVFeGFtcGxlIH0gZnJvbSAnLi9jb2RlLWV4YW1wbGUnO1xuXG4vKipcbiAqIFdyYXBzIGFsbCBjb2RlIGV4YW1wbGVzIGFuZCBoYW5kbGVzIHRoZWlyIGNvbmZpZ3VyYXRpb24gYW5kIHN0eWxlcy5cbiAqIEBleGFtcGxlXG4gKiBgYGBcbiAqIDxza3ktZG9jcy1jb2RlLWV4YW1wbGVzXG4gKiAgIFtwYWNrYWdlRGVwZW5kZW5jaWVzXT1cIntcbiAqICAgICBcImZvb2JhclwiOiBcIipcIixcbiAqICAgICBcImJhelwiOiBcIjEuMi4zXCJcbiAqICAgfVwiXG4gKiA+XG4gKiAgIDxza3ktZG9jcy1jb2RlLWV4YW1wbGU+XG4gKiAgIDwvc2t5LWRvY3MtY29kZS1leGFtcGxlPlxuICogPC9za3ktZG9jcy1jb2RlLWV4YW1wbGVzPlxuICogYGBgXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NreS1kb2NzLWNvZGUtZXhhbXBsZXMnLFxuICB0ZW1wbGF0ZVVybDogJy4vY29kZS1leGFtcGxlcy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NvZGUtZXhhbXBsZXMuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFNreURvY3NDb2RlRXhhbXBsZXNDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0IHtcbiAgLyoqXG4gICAqIEFueSBleHRyYSBOUE0gcGFja2FnZSBkZXBlbmRlbmNpZXMgdGhhdCBhcmUgbmVlZGVkIGZvciB0aGUgZWRpdG9yIHRvIHJ1biB0aGUgY29kZSBleGFtcGxlLlxuICAgKiBAZGVmYXVsdCB7fVxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIHNldCBwYWNrYWdlRGVwZW5kZW5jaWVzKHZhbHVlOiBTa3lEb2NzQ29kZUV4YW1wbGVNb2R1bGVEZXBlbmRlbmNpZXMpIHtcbiAgICB0aGlzLl9wYWNrYWdlRGVwZW5kZW5jaWVzID0gdmFsdWU7XG4gIH1cblxuICBwdWJsaWMgZ2V0IHBhY2thZ2VEZXBlbmRlbmNpZXMoKTogU2t5RG9jc0NvZGVFeGFtcGxlTW9kdWxlRGVwZW5kZW5jaWVzIHtcbiAgICByZXR1cm4gdGhpcy5fcGFja2FnZURlcGVuZGVuY2llcyB8fCB7fTtcbiAgfVxuXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBzdHlsZXNoZWV0czogc3RyaW5nW10gPSBbXTtcblxuICBwdWJsaWMgY29kZUV4YW1wbGVzOiBTa3lEb2NzQ29kZUV4YW1wbGVbXSA9IFtdO1xuXG4gIEBDb250ZW50Q2hpbGRyZW4oU2t5RG9jc0NvZGVFeGFtcGxlQ29tcG9uZW50KVxuICBwcml2YXRlIGNvZGVFeGFtcGxlQ29tcG9uZW50czogUXVlcnlMaXN0PFNreURvY3NDb2RlRXhhbXBsZUNvbXBvbmVudD47XG5cbiAgcHJpdmF0ZSBfcGFja2FnZURlcGVuZGVuY2llczogU2t5RG9jc0NvZGVFeGFtcGxlTW9kdWxlRGVwZW5kZW5jaWVzO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgZWRpdG9yU2VydmljZTogU2t5RG9jc0NvZGVFeGFtcGxlc0VkaXRvclNlcnZpY2UsXG4gICAgcHJpdmF0ZSBzb3VyY2VDb2RlU2VydmljZTogU2t5RG9jc1NvdXJjZUNvZGVTZXJ2aWNlXG4gICkge31cblxuICBwdWJsaWMgbmdBZnRlckNvbnRlbnRJbml0KCk6IHZvaWQge1xuICAgIHRoaXMuY29kZUV4YW1wbGVDb21wb25lbnRzLmZvckVhY2goKGNvbXBvbmVudCkgPT4ge1xuICAgICAgLy8gTWFrZSBzdXJlIHRoZSBzb3VyY2UgY29kZSBwYXRoIGVuZHMgaW4gYSBzbGFzaCwgc28gdGhhdCBzaW1pbGFybHkgbmFtZWQgZGlyZWN0b3JpZXMgYXJlbid0IGluY2x1ZGVkLlxuICAgICAgbGV0IHNvdXJjZUNvZGVQYXRoID0gY29tcG9uZW50LnNvdXJjZUNvZGVQYXRoO1xuICAgICAgaWYgKHNvdXJjZUNvZGVQYXRoLnNsaWNlKC0xKSAhPT0gJy8nKSB7XG4gICAgICAgIHNvdXJjZUNvZGVQYXRoICs9ICcvJztcbiAgICAgIH1cblxuICAgICAgY29uc3Qgc291cmNlQ29kZSA9IHRoaXMuc291cmNlQ29kZVNlcnZpY2UuZ2V0U291cmNlQ29kZShzb3VyY2VDb2RlUGF0aCk7XG5cbiAgICAgIGlmICghc291cmNlQ29kZS5sZW5ndGgpIHtcbiAgICAgICAgY29uc29sZS53YXJuKFxuICAgICAgICAgIGBTb3VyY2UgY29kZSBub3QgZm91bmQgYXQgbG9jYXRpb24gXCIke3NvdXJjZUNvZGVQYXRofVwiIGZvciBcIiR7Y29tcG9uZW50LmhlYWRpbmd9XCIhYFxuICAgICAgICApO1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIHRoaXMuY29kZUV4YW1wbGVzLnB1c2goe1xuICAgICAgICBoZWFkaW5nOiBjb21wb25lbnQuaGVhZGluZyxcbiAgICAgICAgcGFja2FnZURlcGVuZGVuY2llczogdGhpcy5wYWNrYWdlRGVwZW5kZW5jaWVzLFxuICAgICAgICBzb3VyY2VDb2RlLFxuICAgICAgICBzdHlsZXNoZWV0czogdGhpcy5zdHlsZXNoZWV0cyxcbiAgICAgICAgdGhlbWU6IGNvbXBvbmVudC50aGVtZSxcbiAgICAgIH0pO1xuICAgIH0pO1xuICB9XG5cbiAgcHVibGljIGxhdW5jaEVkaXRvcihjb2RlRXhhbXBsZTogU2t5RG9jc0NvZGVFeGFtcGxlKTogdm9pZCB7XG4gICAgdGhpcy5lZGl0b3JTZXJ2aWNlLmxhdW5jaEVkaXRvcihjb2RlRXhhbXBsZSk7XG4gIH1cblxuICAvKipcbiAgICogUmV0dXJucyBhIHN0cmluZyByZXByZXNlbnRpbmcgb25lIG9mIFByaXNtSlMncyBzdXBwb3J0ZWQgbGFuZ3VhZ2UgdHlwZXMuXG4gICAqIFNlZTogaHR0cHM6Ly9wcmlzbWpzLmNvbS8jc3VwcG9ydGVkLWxhbmd1YWdlc1xuICAgKi9cbiAgcHVibGljIHBhcnNlQ29kZUxhbmd1YWdlVHlwZShmaWxlTmFtZTogc3RyaW5nKTogc3RyaW5nIHtcbiAgICBjb25zdCBleHRlbnNpb24gPSBmaWxlTmFtZS5zcGxpdCgnLicpLnBvcCgpLnRvTG93ZXJDYXNlKCk7XG5cbiAgICBzd2l0Y2ggKGV4dGVuc2lvbikge1xuICAgICAgY2FzZSAndHMnOlxuICAgICAgICByZXR1cm4gJ3R5cGVzY3JpcHQnO1xuICAgICAgY2FzZSAnaHRtbCc6XG4gICAgICAgIHJldHVybiAnbWFya3VwJztcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIHJldHVybiBleHRlbnNpb247XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2ICpuZ0lmPVwiY29kZUV4YW1wbGVzICYmIGNvZGVFeGFtcGxlcy5sZW5ndGhcIiBjbGFzcz1cInNreS1kb2NzLWNvZGUtZXhhbXBsZXNcIj5cbiAgPHNreS1yZXBlYXRlclxuICAgICpuZ0lmPVwiY29kZUV4YW1wbGVzLmxlbmd0aCA+IDE7IGVsc2Ugc2luZ2xlQ29kZUV4YW1wbGVcIlxuICAgIGV4cGFuZE1vZGU9XCJtdWx0aXBsZVwiXG4gID5cbiAgICA8c2t5LXJlcGVhdGVyLWl0ZW1cbiAgICAgICpuZ0Zvcj1cImxldCBjb2RlRXhhbXBsZSBvZiBjb2RlRXhhbXBsZXNcIlxuICAgICAgW2lzRXhwYW5kZWRdPVwiZmFsc2VcIlxuICAgID5cbiAgICAgIDxza3ktcmVwZWF0ZXItaXRlbS10aXRsZT5cbiAgICAgICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAgICpuZ1RlbXBsYXRlT3V0bGV0PVwiXG4gICAgICAgICAgICBjb2RlRXhhbXBsZUhlYWRlclRlbXBsYXRlO1xuICAgICAgICAgICAgY29udGV4dDogeyAkaW1wbGljaXQ6IGNvZGVFeGFtcGxlIH1cbiAgICAgICAgICBcIlxuICAgICAgICA+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgPC9za3ktcmVwZWF0ZXItaXRlbS10aXRsZT5cbiAgICAgIDxza3ktcmVwZWF0ZXItaXRlbS1jb250ZW50PlxuICAgICAgICA8bmctY29udGFpbmVyXG4gICAgICAgICAgKm5nVGVtcGxhdGVPdXRsZXQ9XCJcbiAgICAgICAgICAgIGNvZGVFeGFtcGxlVGVtcGxhdGU7XG4gICAgICAgICAgICBjb250ZXh0OiB7ICRpbXBsaWNpdDogY29kZUV4YW1wbGUgfVxuICAgICAgICAgIFwiXG4gICAgICAgID5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICA8L3NreS1yZXBlYXRlci1pdGVtLWNvbnRlbnQ+XG4gICAgPC9za3ktcmVwZWF0ZXItaXRlbT5cbiAgPC9za3ktcmVwZWF0ZXI+XG48L2Rpdj5cblxuPG5nLXRlbXBsYXRlPlxuICA8bmctY29udGVudCBzZWxlY3Q9XCJza3ktZG9jcy1jb2RlLWV4YW1wbGVcIj4gPC9uZy1jb250ZW50PlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlIGxldC1pdGVtICNjb2RlRXhhbXBsZVRlbXBsYXRlPlxuICA8ZGl2IGNsYXNzPVwic2t5LWRvY3MtY29kZS1leGFtcGxlLXdyYXBwZXJcIj5cbiAgICA8c2t5LXZlcnRpY2FsLXRhYnNldCAqbmdJZj1cIml0ZW0uc291cmNlQ29kZSAmJiBpdGVtLnNvdXJjZUNvZGUubGVuZ3RoXCI+XG4gICAgICA8c2t5LXZlcnRpY2FsLXRhYlxuICAgICAgICAqbmdGb3I9XCJsZXQgZmlsZSBvZiBpdGVtLnNvdXJjZUNvZGU7IGxldCBpID0gaW5kZXhcIlxuICAgICAgICBbYWN0aXZlXT1cImkgPT09IDBcIlxuICAgICAgICBbdGFiSGVhZGluZ109XCJmaWxlLmZpbGVOYW1lXCJcbiAgICAgID5cbiAgICAgICAgPHNreS1jb2RlLWJsb2NrXG4gICAgICAgICAgW2NvZGVdPVwiZmlsZS5yYXdDb250ZW50c1wiXG4gICAgICAgICAgW2xhbmd1YWdlVHlwZV09XCJwYXJzZUNvZGVMYW5ndWFnZVR5cGUoZmlsZS5maWxlTmFtZSlcIlxuICAgICAgICA+XG4gICAgICAgIDwvc2t5LWNvZGUtYmxvY2s+XG4gICAgICA8L3NreS12ZXJ0aWNhbC10YWI+XG4gICAgPC9za3ktdmVydGljYWwtdGFic2V0PlxuICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjc2luZ2xlQ29kZUV4YW1wbGU+XG4gIDxuZy1jb250YWluZXJcbiAgICAqbmdUZW1wbGF0ZU91dGxldD1cIlxuICAgICAgY29kZUV4YW1wbGVIZWFkZXJUZW1wbGF0ZTtcbiAgICAgIGNvbnRleHQ6IHsgJGltcGxpY2l0OiBjb2RlRXhhbXBsZXNbMF0gfVxuICAgIFwiXG4gID5cbiAgPC9uZy1jb250YWluZXI+XG4gIDxuZy1jb250YWluZXJcbiAgICAqbmdUZW1wbGF0ZU91dGxldD1cIlxuICAgICAgY29kZUV4YW1wbGVUZW1wbGF0ZTtcbiAgICAgIGNvbnRleHQ6IHsgJGltcGxpY2l0OiBjb2RlRXhhbXBsZXNbMF0gfVxuICAgIFwiXG4gID5cbiAgPC9uZy1jb250YWluZXI+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgbGV0LWNvZGVFeGFtcGxlICNjb2RlRXhhbXBsZUhlYWRlclRlbXBsYXRlPlxuICA8ZGl2IGNsYXNzPVwic2t5LWRvY3MtY29kZS1leGFtcGxlLWhlYWRlclwiPlxuICAgIDxkaXYgY2xhc3M9XCJza3ktZG9jcy1jb2RlLWV4YW1wbGUtaGVhZGVyLXRpdGxlIHNreS1lbXBoYXNpemVkXCI+XG4gICAgICB7eyBjb2RlRXhhbXBsZS5oZWFkaW5nIH19XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInNreS1kb2NzLWNvZGUtZXhhbXBsZS1oZWFkZXItY29udHJvbHNcIj5cbiAgICAgIDxidXR0b25cbiAgICAgICAgY2xhc3M9XCJza3ktYnRuIHNreS1idG4tZGVmYXVsdFwiXG4gICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAoY2xpY2spPVwibGF1bmNoRWRpdG9yKGNvZGVFeGFtcGxlKTsgJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpXCJcbiAgICAgID5cbiAgICAgICAgPHNreS1pY29uIGljb249XCJwZW5jaWxcIj48L3NreS1pY29uPlxuICAgICAgICB7eyAnc2t5LWRvY3MtY29kZS1leGFtcGxlLWxhdW5jaC1idXR0b24tbGFiZWwnIHwgc2t5TGliUmVzb3VyY2VzIH19XG4gICAgICA8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19

package/esm2020/modules/code-examples/code-examples.module.mjs

@@ -0,0 +1,43 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SkyCodeBlockModule } from '@blackbaud/skyux-lib-code-block';
+import { SkyIconModule } from '@skyux/indicators';
+import { SkyRepeaterModule } from '@skyux/lists';
+import { SkyVerticalTabsetModule } from '@skyux/tabs';
+import { SkyDocsToolsResourcesModule } from '../shared/sky-docs-tools-resources.module';
+import { SkyDocsCodeExampleComponent } from './code-example.component';
+import { SkyDocsCodeExamplesComponent } from './code-examples.component';
+import * as i0 from "@angular/core";
+export class SkyDocsCodeExamplesModule {
+}
+SkyDocsCodeExamplesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExamplesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDocsCodeExamplesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExamplesModule, declarations: [SkyDocsCodeExampleComponent, SkyDocsCodeExamplesComponent], imports: [CommonModule,
+        SkyCodeBlockModule,
+        SkyDocsToolsResourcesModule,
+        SkyIconModule,
+        SkyRepeaterModule,
+        SkyVerticalTabsetModule], exports: [SkyDocsCodeExampleComponent, SkyDocsCodeExamplesComponent] });
+SkyDocsCodeExamplesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExamplesModule, imports: [[
+            CommonModule,
+            SkyCodeBlockModule,
+            SkyDocsToolsResourcesModule,
+            SkyIconModule,
+            SkyRepeaterModule,
+            SkyVerticalTabsetModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsCodeExamplesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        SkyCodeBlockModule,
+                        SkyDocsToolsResourcesModule,
+                        SkyIconModule,
+                        SkyRepeaterModule,
+                        SkyVerticalTabsetModule,
+                    ],
+                    declarations: [SkyDocsCodeExampleComponent, SkyDocsCodeExamplesComponent],
+                    exports: [SkyDocsCodeExampleComponent, SkyDocsCodeExamplesComponent],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29kZS1leGFtcGxlcy5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2NzLXRvb2xzL3NyYy9tb2R1bGVzL2NvZGUtZXhhbXBsZXMvY29kZS1leGFtcGxlcy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRS9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFekMsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFFckUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBRWxELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUVqRCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFFdEQsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sMkNBQTJDLENBQUM7QUFFeEYsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFFdkUsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0sMkJBQTJCLENBQUM7O0FBY3pFLE1BQU0sT0FBTyx5QkFBeUI7O3VIQUF6Qix5QkFBeUI7d0hBQXpCLHlCQUF5QixpQkFIckIsMkJBQTJCLEVBQUUsNEJBQTRCLGFBUHRFLFlBQVk7UUFDWixrQkFBa0I7UUFDbEIsMkJBQTJCO1FBQzNCLGFBQWE7UUFDYixpQkFBaUI7UUFDakIsdUJBQXVCLGFBR2YsMkJBQTJCLEVBQUUsNEJBQTRCO3dIQUV4RCx5QkFBeUIsWUFYM0I7WUFDUCxZQUFZO1lBQ1osa0JBQWtCO1lBQ2xCLDJCQUEyQjtZQUMzQixhQUFhO1lBQ2IsaUJBQWlCO1lBQ2pCLHVCQUF1QjtTQUN4Qjs0RkFJVSx5QkFBeUI7a0JBWnJDLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFO3dCQUNQLFlBQVk7d0JBQ1osa0JBQWtCO3dCQUNsQiwyQkFBMkI7d0JBQzNCLGFBQWE7d0JBQ2IsaUJBQWlCO3dCQUNqQix1QkFBdUI7cUJBQ3hCO29CQUNELFlBQVksRUFBRSxDQUFDLDJCQUEyQixFQUFFLDRCQUE0QixDQUFDO29CQUN6RSxPQUFPLEVBQUUsQ0FBQywyQkFBMkIsRUFBRSw0QkFBNEIsQ0FBQztpQkFDckUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5pbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBTa3lDb2RlQmxvY2tNb2R1bGUgfSBmcm9tICdAYmxhY2tiYXVkL3NreXV4LWxpYi1jb2RlLWJsb2NrJztcblxuaW1wb3J0IHsgU2t5SWNvbk1vZHVsZSB9IGZyb20gJ0Bza3l1eC9pbmRpY2F0b3JzJztcblxuaW1wb3J0IHsgU2t5UmVwZWF0ZXJNb2R1bGUgfSBmcm9tICdAc2t5dXgvbGlzdHMnO1xuXG5pbXBvcnQgeyBTa3lWZXJ0aWNhbFRhYnNldE1vZHVsZSB9IGZyb20gJ0Bza3l1eC90YWJzJztcblxuaW1wb3J0IHsgU2t5RG9jc1Rvb2xzUmVzb3VyY2VzTW9kdWxlIH0gZnJvbSAnLi4vc2hhcmVkL3NreS1kb2NzLXRvb2xzLXJlc291cmNlcy5tb2R1bGUnO1xuXG5pbXBvcnQgeyBTa3lEb2NzQ29kZUV4YW1wbGVDb21wb25lbnQgfSBmcm9tICcuL2NvZGUtZXhhbXBsZS5jb21wb25lbnQnO1xuXG5pbXBvcnQgeyBTa3lEb2NzQ29kZUV4YW1wbGVzQ29tcG9uZW50IH0gZnJvbSAnLi9jb2RlLWV4YW1wbGVzLmNvbXBvbmVudCc7XG5cbkBOZ01vZHVsZSh7XG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgU2t5Q29kZUJsb2NrTW9kdWxlLFxuICAgIFNreURvY3NUb29sc1Jlc291cmNlc01vZHVsZSxcbiAgICBTa3lJY29uTW9kdWxlLFxuICAgIFNreVJlcGVhdGVyTW9kdWxlLFxuICAgIFNreVZlcnRpY2FsVGFic2V0TW9kdWxlLFxuICBdLFxuICBkZWNsYXJhdGlvbnM6IFtTa3lEb2NzQ29kZUV4YW1wbGVDb21wb25lbnQsIFNreURvY3NDb2RlRXhhbXBsZXNDb21wb25lbnRdLFxuICBleHBvcnRzOiBbU2t5RG9jc0NvZGVFeGFtcGxlQ29tcG9uZW50LCBTa3lEb2NzQ29kZUV4YW1wbGVzQ29tcG9uZW50XSxcbn0pXG5leHBvcnQgY2xhc3MgU2t5RG9jc0NvZGVFeGFtcGxlc01vZHVsZSB7fVxuIl19

package/esm2020/modules/demo/demo-control-panel-checkbox.component.mjs

@@ -0,0 +1,80 @@
+import { ChangeDetectionStrategy, Component, Input, } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "@skyux/forms";
+import * as i2 from "@angular/forms";
+/**
+ * Renders a checkbox control within the control panel.
+ * @example
+ * ```markup
+ * <sky-docs-demo-control-panel-checkbox
+ *   label="Show title"
+ *   [checked]="true"
+ *   [propertyName]="showTitle"
+ * >
+ * </sky-docs-demo-control-panel-checkbox>
+ * ```
+ */
+export class SkyDocsDemoControlPanelCheckboxComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        /**
+         * Indicates whether to disable the checkbox.
+         */
+        this.disabled = false;
+        this.selectionChange = new Subject();
+        this.initialState = {};
+    }
+    /**
+     * The checked status of the checkbox.
+     * @default false
+     */
+    set checked(value) {
+        if (value !== undefined && this._checked === undefined) {
+            this.initialState.checked = value;
+        }
+        this._checked = value;
+    }
+    get checked() {
+        return this._checked || false;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.initialState.checked = this.checked;
+            this.notifyChange();
+        });
+    }
+    ngOnDestroy() {
+        this.selectionChange.complete();
+    }
+    onModelChange() {
+        this.notifyChange();
+    }
+    resetState() {
+        if (this.initialState.checked !== this.checked) {
+            this.checked = !!this.initialState.checked;
+            this.notifyChange();
+            this.changeDetector.markForCheck();
+        }
+    }
+    notifyChange() {
+        this.selectionChange.next({
+            [this.propertyName]: this.checked,
+        });
+    }
+}
+SkyDocsDemoControlPanelCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoControlPanelCheckboxComponent, selector: "sky-docs-demo-control-panel-checkbox", inputs: { checked: "checked", disabled: "disabled", label: "label", propertyName: "propertyName" }, ngImport: i0, template: "<sky-checkbox\n  [disabled]=\"disabled\"\n  [name]=\"propertyName\"\n  [(ngModel)]=\"checked\"\n  (change)=\"onModelChange()\"\n>\n  <sky-checkbox-label>{{ label }}</sky-checkbox-label>\n</sky-checkbox>\n", components: [{ type: i1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i1.λ4, selector: "sky-checkbox-label" }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-demo-control-panel-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-checkbox\n  [disabled]=\"disabled\"\n  [name]=\"propertyName\"\n  [(ngModel)]=\"checked\"\n  (change)=\"onModelChange()\"\n>\n  <sky-checkbox-label>{{ label }}</sky-checkbox-label>\n</sky-checkbox>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], propertyName: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby1jb250cm9sLXBhbmVsLWNoZWNrYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RvY3MtdG9vbHMvc3JjL21vZHVsZXMvZGVtby9kZW1vLWNvbnRyb2wtcGFuZWwtY2hlY2tib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZG9jcy10b29scy9zcmMvbW9kdWxlcy9kZW1vL2RlbW8tY29udHJvbC1wYW5lbC1jaGVja2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxLQUFLLEdBR04sTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQzs7OztBQUkvQjs7Ozs7Ozs7Ozs7R0FXRztBQU1ILE1BQU0sT0FBTyx3Q0FBd0M7SUFnRG5ELFlBQW9CLGNBQWlDO1FBQWpDLG1CQUFjLEdBQWQsY0FBYyxDQUFtQjtRQTVCckQ7O1dBRUc7UUFFSSxhQUFRLEdBQVksS0FBSyxDQUFDO1FBZ0IxQixvQkFBZSxHQUFHLElBQUksT0FBTyxFQUFpQyxDQUFDO1FBRTlELGlCQUFZLEdBRWhCLEVBQUUsQ0FBQztJQUlpRCxDQUFDO0lBN0N6RDs7O09BR0c7SUFDSCxJQUNXLE9BQU8sQ0FBQyxLQUFjO1FBQy9CLElBQUksS0FBSyxLQUFLLFNBQVMsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFLLFNBQVMsRUFBRTtZQUN0RCxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7U0FDbkM7UUFFRCxJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztJQUN4QixDQUFDO0lBRUQsSUFBVyxPQUFPO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLFFBQVEsSUFBSSxLQUFLLENBQUM7SUFDaEMsQ0FBQztJQWdDTSxRQUFRO1FBQ2IsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUM7WUFDekMsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3RCLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVNLFdBQVc7UUFDaEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNsQyxDQUFDO0lBRU0sYUFBYTtRQUNsQixJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVNLFVBQVU7UUFDZixJQUFJLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDOUMsSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUM7WUFDM0MsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQ3BCLElBQUksQ0FBQyxjQUFjLENBQUMsWUFBWSxFQUFFLENBQUM7U0FDcEM7SUFDSCxDQUFDO0lBRU8sWUFBWTtRQUNsQixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQztZQUN4QixDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsRUFBRSxJQUFJLENBQUMsT0FBTztTQUNsQyxDQUFDLENBQUM7SUFDTCxDQUFDOztzSUE3RVUsd0NBQXdDOzBIQUF4Qyx3Q0FBd0MsZ0xDOUJyRCw4TUFRQTs0RkRzQmEsd0NBQXdDO2tCQUxwRCxTQUFTOytCQUNFLHNDQUFzQyxtQkFFL0IsdUJBQXVCLENBQUMsTUFBTTt3R0FVcEMsT0FBTztzQkFEakIsS0FBSztnQkFpQkMsUUFBUTtzQkFEZCxLQUFLO2dCQVFDLEtBQUs7c0JBRFgsS0FBSztnQkFRQyxZQUFZO3NCQURsQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHsgU2t5RG9jc0RlbW9Db250cm9sUGFuZWxDaGFuZ2UgfSBmcm9tICcuL2RlbW8tY29udHJvbC1wYW5lbC1jaGFuZ2UnO1xuXG4vKipcbiAqIFJlbmRlcnMgYSBjaGVja2JveCBjb250cm9sIHdpdGhpbiB0aGUgY29udHJvbCBwYW5lbC5cbiAqIEBleGFtcGxlXG4gKiBgYGBtYXJrdXBcbiAqIDxza3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWwtY2hlY2tib3hcbiAqICAgbGFiZWw9XCJTaG93IHRpdGxlXCJcbiAqICAgW2NoZWNrZWRdPVwidHJ1ZVwiXG4gKiAgIFtwcm9wZXJ0eU5hbWVdPVwic2hvd1RpdGxlXCJcbiAqID5cbiAqIDwvc2t5LWRvY3MtZGVtby1jb250cm9sLXBhbmVsLWNoZWNrYm94PlxuICogYGBgXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NreS1kb2NzLWRlbW8tY29udHJvbC1wYW5lbC1jaGVja2JveCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9kZW1vLWNvbnRyb2wtcGFuZWwtY2hlY2tib3guY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgU2t5RG9jc0RlbW9Db250cm9sUGFuZWxDaGVja2JveENvbXBvbmVudFxuICBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95XG57XG4gIC8qKlxuICAgKiBUaGUgY2hlY2tlZCBzdGF0dXMgb2YgdGhlIGNoZWNrYm94LlxuICAgKiBAZGVmYXVsdCBmYWxzZVxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIHNldCBjaGVja2VkKHZhbHVlOiBib29sZWFuKSB7XG4gICAgaWYgKHZhbHVlICE9PSB1bmRlZmluZWQgJiYgdGhpcy5fY2hlY2tlZCA9PT0gdW5kZWZpbmVkKSB7XG4gICAgICB0aGlzLmluaXRpYWxTdGF0ZS5jaGVja2VkID0gdmFsdWU7XG4gICAgfVxuXG4gICAgdGhpcy5fY2hlY2tlZCA9IHZhbHVlO1xuICB9XG5cbiAgcHVibGljIGdldCBjaGVja2VkKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9jaGVja2VkIHx8IGZhbHNlO1xuICB9XG5cbiAgLyoqXG4gICAqIEluZGljYXRlcyB3aGV0aGVyIHRvIGRpc2FibGUgdGhlIGNoZWNrYm94LlxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFRoZSB0ZXh0IGxhYmVsIG9mIHRoZSBjaGVja2JveC5cbiAgICogQHJlcXVpcmVkXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgbGFiZWw6IHN0cmluZztcblxuICAvKipcbiAgICogVGhlIG5hbWUgb2YgdGhlIGNvbXBvbmVudCBwcm9wZXJ0eSB0aGF0IGlzIGFmZmVjdGVkIGJ5IHRoaXMgY29udHJvbC5cbiAgICogQHJlcXVpcmVkXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgcHJvcGVydHlOYW1lOiBzdHJpbmc7XG5cbiAgcHVibGljIHNlbGVjdGlvbkNoYW5nZSA9IG5ldyBTdWJqZWN0PFNreURvY3NEZW1vQ29udHJvbFBhbmVsQ2hhbmdlPigpO1xuXG4gIHByaXZhdGUgaW5pdGlhbFN0YXRlOiB7XG4gICAgY2hlY2tlZD86IGJvb2xlYW47XG4gIH0gPSB7fTtcblxuICBwcml2YXRlIF9jaGVja2VkOiBib29sZWFuO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2hhbmdlRGV0ZWN0b3I6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuaW5pdGlhbFN0YXRlLmNoZWNrZWQgPSB0aGlzLmNoZWNrZWQ7XG4gICAgICB0aGlzLm5vdGlmeUNoYW5nZSgpO1xuICAgIH0pO1xuICB9XG5cbiAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuc2VsZWN0aW9uQ2hhbmdlLmNvbXBsZXRlKCk7XG4gIH1cblxuICBwdWJsaWMgb25Nb2RlbENoYW5nZSgpOiB2b2lkIHtcbiAgICB0aGlzLm5vdGlmeUNoYW5nZSgpO1xuICB9XG5cbiAgcHVibGljIHJlc2V0U3RhdGUoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuaW5pdGlhbFN0YXRlLmNoZWNrZWQgIT09IHRoaXMuY2hlY2tlZCkge1xuICAgICAgdGhpcy5jaGVja2VkID0gISF0aGlzLmluaXRpYWxTdGF0ZS5jaGVja2VkO1xuICAgICAgdGhpcy5ub3RpZnlDaGFuZ2UoKTtcbiAgICAgIHRoaXMuY2hhbmdlRGV0ZWN0b3IubWFya0ZvckNoZWNrKCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBub3RpZnlDaGFuZ2UoKTogdm9pZCB7XG4gICAgdGhpcy5zZWxlY3Rpb25DaGFuZ2UubmV4dCh7XG4gICAgICBbdGhpcy5wcm9wZXJ0eU5hbWVdOiB0aGlzLmNoZWNrZWQsXG4gICAgfSk7XG4gIH1cbn1cbiIsIjxza3ktY2hlY2tib3hcbiAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgW25hbWVdPVwicHJvcGVydHlOYW1lXCJcbiAgWyhuZ01vZGVsKV09XCJjaGVja2VkXCJcbiAgKGNoYW5nZSk9XCJvbk1vZGVsQ2hhbmdlKClcIlxuPlxuICA8c2t5LWNoZWNrYm94LWxhYmVsPnt7IGxhYmVsIH19PC9za3ktY2hlY2tib3gtbGFiZWw+XG48L3NreS1jaGVja2JveD5cbiJdfQ==

package/{esm2015/modules/demo/demo-control-panel-radio-choice.js → esm2020/modules/demo/demo-control-panel-radio-choice.mjs}

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby1jb250cm9sLXBhbmVsLXJhZGlvLWNob2ljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RvY3MtdG9vbHMvc3JjL21vZHVsZXMvZGVtby9kZW1vLWNvbnRyb2wtcGFuZWwtcmFkaW8tY2hvaWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFRoZSBjb25maWd1cmF0aW9uIGZvciBhIGdpdmVuIHJhZGlvIGNvbnRyb2wuXG4gKi9cbmV4cG9ydCBpbnRlcmZhY2UgU2t5RG9jc0RlbW9Db250cm9sUGFuZWxSYWRpb0Nob2ljZSB7XG5cbiAgLyoqXG4gICAqIFRoZSB0ZXh0IGxhYmVsIG9mIHRoZSByYWRpby5cbiAgICovXG4gIGxhYmVsOiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIFRoZSB2YWx1ZSBvZiB0aGUgcmFkaW8uXG4gICAqL1xuICB2YWx1ZTogYW55O1xuXG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby1jb250cm9sLXBhbmVsLXJhZGlvLWNob2ljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RvY3MtdG9vbHMvc3JjL21vZHVsZXMvZGVtby9kZW1vLWNvbnRyb2wtcGFuZWwtcmFkaW8tY2hvaWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFRoZSBjb25maWd1cmF0aW9uIGZvciBhIGdpdmVuIHJhZGlvIGNvbnRyb2wuXG4gKi9cbmV4cG9ydCBpbnRlcmZhY2UgU2t5RG9jc0RlbW9Db250cm9sUGFuZWxSYWRpb0Nob2ljZSB7XG4gIC8qKlxuICAgKiBUaGUgdGV4dCBsYWJlbCBvZiB0aGUgcmFkaW8uXG4gICAqL1xuICBsYWJlbDogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBUaGUgdmFsdWUgb2YgdGhlIHJhZGlvLlxuICAgKi9cbiAgdmFsdWU6IGFueTtcbn1cbiJdfQ==

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

@@ -0,0 +1,75 @@
+import { ChangeDetectionStrategy, Component, Input, } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "@skyux/forms";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+/**
+ * Renders a radio control group.
+ * @example
+ * ```markup
+ * <sky-docs-demo-control-panel-radio-group
+ *   [choices]="[
+ *     { 'label': 'Red', value: '#f00' },
+ *     { 'label': 'Green', value: '#0f0' },
+ *     { 'label': 'Blue', value: '#00f' }
+ *   ]"
+ *   heading="Choose a color"
+ *   initialValue="Red"
+ *   propertyName="color"
+ * >
+ * </sky-docs-demo-control-panel-radio-group>
+ * ```
+ */
+export class SkyDocsDemoControlPanelRadioGroupComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        /**
+         * Indicates whether to disable the radio group.
+         */
+        this.disabled = false;
+        /**
+         * @internal
+         */
+        this.selectionChange = new Subject();
+    }
+    ngOnInit() {
+        this.value = this.cloneValue(this.initialValue);
+    }
+    ngOnDestroy() {
+        this.selectionChange.complete();
+    }
+    onModelChange(value) {
+        this.value = value;
+        this.selectionChange.next({
+            [this.propertyName]: this.value,
+        });
+    }
+    resetValue() {
+        this.value = this.cloneValue(this.initialValue);
+        this.changeDetector.markForCheck();
+    }
+    cloneValue(value) {
+        if (typeof value === 'object') {
+            return JSON.parse(JSON.stringify(value));
+        }
+        return value;
+    }
+}
+SkyDocsDemoControlPanelRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoControlPanelRadioGroupComponent, selector: "sky-docs-demo-control-panel-radio-group", inputs: { choices: "choices", disabled: "disabled", heading: "heading", initialValue: "initialValue", propertyName: "propertyName" }, ngImport: i0, template: "<div class=\"sky-demo-control-panel-radio-group\">\n  <strong *ngIf=\"heading\">{{ heading }}</strong>\n  <sky-radio-group\n    [disabled]=\"disabled\"\n    [name]=\"propertyName\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onModelChange($event)\"\n  >\n    <ul class=\"sky-list-unstyled\">\n      <li *ngFor=\"let choice of choices\">\n        <sky-radio [value]=\"choice.value\">\n          <sky-radio-label>{{ choice.label }}</sky-radio-label>\n        </sky-radio>\n      </li>\n    </ul>\n  </sky-radio-group>\n</div>\n", styles: [".sky-demo-control-panel-radio-group{margin-bottom:20px}ul{margin:0}\n"], components: [{ type: i1.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "name", "required", "value", "tabIndex"] }, { type: i1.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "icon", "radioType"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i1.λ12, selector: "sky-radio-label" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-demo-control-panel-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-demo-control-panel-radio-group\">\n  <strong *ngIf=\"heading\">{{ heading }}</strong>\n  <sky-radio-group\n    [disabled]=\"disabled\"\n    [name]=\"propertyName\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onModelChange($event)\"\n  >\n    <ul class=\"sky-list-unstyled\">\n      <li *ngFor=\"let choice of choices\">\n        <sky-radio [value]=\"choice.value\">\n          <sky-radio-label>{{ choice.label }}</sky-radio-label>\n        </sky-radio>\n      </li>\n    </ul>\n  </sky-radio-group>\n</div>\n", styles: [".sky-demo-control-panel-radio-group{margin-bottom:20px}ul{margin:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { choices: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }], initialValue: [{
+                type: Input
+            }], propertyName: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby1jb250cm9sLXBhbmVsLXJhZGlvLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RvY3MtdG9vbHMvc3JjL21vZHVsZXMvZGVtby9kZW1vLWNvbnRyb2wtcGFuZWwtcmFkaW8tZ3JvdXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZG9jcy10b29scy9zcmMvbW9kdWxlcy9kZW1vL2RlbW8tY29udHJvbC1wYW5lbC1yYWRpby1ncm91cC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxLQUFLLEdBR04sTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQzs7Ozs7QUFNL0I7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQkc7QUFPSCxNQUFNLE9BQU8sMENBQTBDO0lBNkNyRCxZQUFvQixjQUFpQztRQUFqQyxtQkFBYyxHQUFkLGNBQWMsQ0FBbUI7UUFuQ3JEOztXQUVHO1FBRUksYUFBUSxHQUFZLEtBQUssQ0FBQztRQXFCakM7O1dBRUc7UUFDSSxvQkFBZSxHQUFHLElBQUksT0FBTyxFQUFpQyxDQUFDO0lBT2QsQ0FBQztJQUVsRCxRQUFRO1FBQ2IsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUNsRCxDQUFDO0lBRU0sV0FBVztRQUNoQixJQUFJLENBQUMsZUFBZSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ2xDLENBQUM7SUFFTSxhQUFhLENBQUMsS0FBVTtRQUM3QixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztRQUNuQixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQztZQUN4QixDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsRUFBRSxJQUFJLENBQUMsS0FBSztTQUNoQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRU0sVUFBVTtRQUNmLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7UUFDaEQsSUFBSSxDQUFDLGNBQWMsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUNyQyxDQUFDO0lBRU8sVUFBVSxDQUFDLEtBQVU7UUFDM0IsSUFBSSxPQUFPLEtBQUssS0FBSyxRQUFRLEVBQUU7WUFDN0IsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztTQUMxQztRQUVELE9BQU8sS0FBSyxDQUFDO0lBQ2YsQ0FBQzs7d0lBekVVLDBDQUEwQzs0SEFBMUMsMENBQTBDLHFOQ3RDdkQsbWhCQWlCQTs0RkRxQmEsMENBQTBDO2tCQU50RCxTQUFTOytCQUNFLHlDQUF5QyxtQkFHbEMsdUJBQXVCLENBQUMsTUFBTTt3R0FVeEMsT0FBTztzQkFEYixLQUFLO2dCQU9DLFFBQVE7c0JBRGQsS0FBSztnQkFPQyxPQUFPO3NCQURiLEtBQUs7Z0JBT0MsWUFBWTtzQkFEbEIsS0FBSztnQkFRQyxZQUFZO3NCQURsQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBPbkluaXQsXG4gIE9uRGVzdHJveSxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHsgU2t5RG9jc0RlbW9Db250cm9sUGFuZWxDaGFuZ2UgfSBmcm9tICcuL2RlbW8tY29udHJvbC1wYW5lbC1jaGFuZ2UnO1xuXG5pbXBvcnQgeyBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbFJhZGlvQ2hvaWNlIH0gZnJvbSAnLi9kZW1vLWNvbnRyb2wtcGFuZWwtcmFkaW8tY2hvaWNlJztcblxuLyoqXG4gKiBSZW5kZXJzIGEgcmFkaW8gY29udHJvbCBncm91cC5cbiAqIEBleGFtcGxlXG4gKiBgYGBtYXJrdXBcbiAqIDxza3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWwtcmFkaW8tZ3JvdXBcbiAqICAgW2Nob2ljZXNdPVwiW1xuICogICAgIHsgJ2xhYmVsJzogJ1JlZCcsIHZhbHVlOiAnI2YwMCcgfSxcbiAqICAgICB7ICdsYWJlbCc6ICdHcmVlbicsIHZhbHVlOiAnIzBmMCcgfSxcbiAqICAgICB7ICdsYWJlbCc6ICdCbHVlJywgdmFsdWU6ICcjMDBmJyB9XG4gKiAgIF1cIlxuICogICBoZWFkaW5nPVwiQ2hvb3NlIGEgY29sb3JcIlxuICogICBpbml0aWFsVmFsdWU9XCJSZWRcIlxuICogICBwcm9wZXJ0eU5hbWU9XCJjb2xvclwiXG4gKiA+XG4gKiA8L3NreS1kb2NzLWRlbW8tY29udHJvbC1wYW5lbC1yYWRpby1ncm91cD5cbiAqIGBgYFxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWwtcmFkaW8tZ3JvdXAnLFxuICB0ZW1wbGF0ZVVybDogJy4vZGVtby1jb250cm9sLXBhbmVsLXJhZGlvLWdyb3VwLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGVtby1jb250cm9sLXBhbmVsLXJhZGlvLWdyb3VwLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbFJhZGlvR3JvdXBDb21wb25lbnRcbiAgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveVxue1xuICAvKipcbiAgICogVGhlIHBvc3NpYmxlIGNob2ljZXMgdG8gYmUgcmVwcmVzZW50ZWQgYnkgcmFkaW8gY29udHJvbHMuXG4gICAqIEByZXF1aXJlZFxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIGNob2ljZXM6IFNreURvY3NEZW1vQ29udHJvbFBhbmVsUmFkaW9DaG9pY2VbXTtcblxuICAvKipcbiAgICogSW5kaWNhdGVzIHdoZXRoZXIgdG8gZGlzYWJsZSB0aGUgcmFkaW8gZ3JvdXAuXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKipcbiAgICogVGhlIGhlYWRpbmcgdGV4dCB0byBhcHBlYXIgYWJvdmUgdGhlIHJhZGlvIGdyb3VwLlxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIGhlYWRpbmc6IHN0cmluZztcblxuICAvKipcbiAgICogVGhlIGluaXRpYWwgdmFsdWUgb2YgdGhlIHJhZGlvIGdyb3VwLlxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIGluaXRpYWxWYWx1ZTogYW55O1xuXG4gIC8qKlxuICAgKiBUaGUgbmFtZSBvZiB0aGUgY29tcG9uZW50IHByb3BlcnR5IHRoYXQgaXMgYWZmZWN0ZWQgYnkgdGhpcyByYWRpbyBncm91cC5cbiAgICogQHJlcXVpcmVkXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgcHJvcGVydHlOYW1lOiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIEBpbnRlcm5hbFxuICAgKi9cbiAgcHVibGljIHNlbGVjdGlvbkNoYW5nZSA9IG5ldyBTdWJqZWN0PFNreURvY3NEZW1vQ29udHJvbFBhbmVsQ2hhbmdlPigpO1xuXG4gIC8qKlxuICAgKiBAaW50ZXJuYWxcbiAgICovXG4gIHB1YmxpYyB2YWx1ZTogYW55O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2hhbmdlRGV0ZWN0b3I6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnZhbHVlID0gdGhpcy5jbG9uZVZhbHVlKHRoaXMuaW5pdGlhbFZhbHVlKTtcbiAgfVxuXG4gIHB1YmxpYyBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLnNlbGVjdGlvbkNoYW5nZS5jb21wbGV0ZSgpO1xuICB9XG5cbiAgcHVibGljIG9uTW9kZWxDaGFuZ2UodmFsdWU6IGFueSk6IHZvaWQge1xuICAgIHRoaXMudmFsdWUgPSB2YWx1ZTtcbiAgICB0aGlzLnNlbGVjdGlvbkNoYW5nZS5uZXh0KHtcbiAgICAgIFt0aGlzLnByb3BlcnR5TmFtZV06IHRoaXMudmFsdWUsXG4gICAgfSk7XG4gIH1cblxuICBwdWJsaWMgcmVzZXRWYWx1ZSgpOiB2b2lkIHtcbiAgICB0aGlzLnZhbHVlID0gdGhpcy5jbG9uZVZhbHVlKHRoaXMuaW5pdGlhbFZhbHVlKTtcbiAgICB0aGlzLmNoYW5nZURldGVjdG9yLm1hcmtGb3JDaGVjaygpO1xuICB9XG5cbiAgcHJpdmF0ZSBjbG9uZVZhbHVlKHZhbHVlOiBhbnkpOiBhbnkge1xuICAgIGlmICh0eXBlb2YgdmFsdWUgPT09ICdvYmplY3QnKSB7XG4gICAgICByZXR1cm4gSlNPTi5wYXJzZShKU09OLnN0cmluZ2lmeSh2YWx1ZSkpO1xuICAgIH1cblxuICAgIHJldHVybiB2YWx1ZTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInNreS1kZW1vLWNvbnRyb2wtcGFuZWwtcmFkaW8tZ3JvdXBcIj5cbiAgPHN0cm9uZyAqbmdJZj1cImhlYWRpbmdcIj57eyBoZWFkaW5nIH19PC9zdHJvbmc+XG4gIDxza3ktcmFkaW8tZ3JvdXBcbiAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgIFtuYW1lXT1cInByb3BlcnR5TmFtZVwiXG4gICAgW25nTW9kZWxdPVwidmFsdWVcIlxuICAgIChuZ01vZGVsQ2hhbmdlKT1cIm9uTW9kZWxDaGFuZ2UoJGV2ZW50KVwiXG4gID5cbiAgICA8dWwgY2xhc3M9XCJza3ktbGlzdC11bnN0eWxlZFwiPlxuICAgICAgPGxpICpuZ0Zvcj1cImxldCBjaG9pY2Ugb2YgY2hvaWNlc1wiPlxuICAgICAgICA8c2t5LXJhZGlvIFt2YWx1ZV09XCJjaG9pY2UudmFsdWVcIj5cbiAgICAgICAgICA8c2t5LXJhZGlvLWxhYmVsPnt7IGNob2ljZS5sYWJlbCB9fTwvc2t5LXJhZGlvLWxhYmVsPlxuICAgICAgICA8L3NreS1yYWRpbz5cbiAgICAgIDwvbGk+XG4gICAgPC91bD5cbiAgPC9za3ktcmFkaW8tZ3JvdXA+XG48L2Rpdj5cbiJdfQ==

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

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Renders a section within the control panel.
+ * @example
+ * ```markup
+ * <sky-docs-demo-control-panel>
+ *   <sky-docs-demo-control-panel-section>
+ *     Section content here.
+ *   </sky-docs-demo-control-panel-section>
+ * </sky-docs-demo-control-panel>
+ * ```
+ */
+export class SkyDocsDemoControlPanelSectionComponent {
+}
+SkyDocsDemoControlPanelSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoControlPanelSectionComponent, selector: "sky-docs-demo-control-panel-section", ngImport: i0, template: "<div class=\"sky-demo-control-panel-section\">\n  <ng-content select=\"sky-docs-demo-control-panel-radio-group\"></ng-content>\n  <ng-content select=\"sky-docs-demo-control-panel-checkbox\"></ng-content>\n</div>\n", styles: [".sky-demo-control-panel-section{padding-right:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-demo-control-panel-section', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-demo-control-panel-section\">\n  <ng-content select=\"sky-docs-demo-control-panel-radio-group\"></ng-content>\n  <ng-content select=\"sky-docs-demo-control-panel-checkbox\"></ng-content>\n</div>\n", styles: [".sky-demo-control-panel-section{padding-right:20px}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby1jb250cm9sLXBhbmVsLXNlY3Rpb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZG9jcy10b29scy9zcmMvbW9kdWxlcy9kZW1vL2RlbW8tY29udHJvbC1wYW5lbC1zZWN0aW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RvY3MtdG9vbHMvc3JjL21vZHVsZXMvZGVtby9kZW1vLWNvbnRyb2wtcGFuZWwtc2VjdGlvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQUVuRTs7Ozs7Ozs7OztHQVVHO0FBUUgsTUFBTSxPQUFPLHVDQUF1Qzs7cUlBQXZDLHVDQUF1Qzt5SEFBdkMsdUNBQXVDLDJFQ3BCcEQsdU5BSUE7NEZEZ0JhLHVDQUF1QztrQkFObkQsU0FBUzsrQkFDRSxxQ0FBcUMsbUJBRzlCLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogUmVuZGVycyBhIHNlY3Rpb24gd2l0aGluIHRoZSBjb250cm9sIHBhbmVsLlxuICogQGV4YW1wbGVcbiAqIGBgYG1hcmt1cFxuICogPHNreS1kb2NzLWRlbW8tY29udHJvbC1wYW5lbD5cbiAqICAgPHNreS1kb2NzLWRlbW8tY29udHJvbC1wYW5lbC1zZWN0aW9uPlxuICogICAgIFNlY3Rpb24gY29udGVudCBoZXJlLlxuICogICA8L3NreS1kb2NzLWRlbW8tY29udHJvbC1wYW5lbC1zZWN0aW9uPlxuICogPC9za3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWw+XG4gKiBgYGBcbiAqL1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWwtc2VjdGlvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9kZW1vLWNvbnRyb2wtcGFuZWwtc2VjdGlvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2RlbW8tY29udHJvbC1wYW5lbC1zZWN0aW9uLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbFNlY3Rpb25Db21wb25lbnQge31cbiIsIjxkaXYgY2xhc3M9XCJza3ktZGVtby1jb250cm9sLXBhbmVsLXNlY3Rpb25cIj5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic2t5LWRvY3MtZGVtby1jb250cm9sLXBhbmVsLXJhZGlvLWdyb3VwXCI+PC9uZy1jb250ZW50PlxuICA8bmctY29udGVudCBzZWxlY3Q9XCJza3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWwtY2hlY2tib3hcIj48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==

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

@@ -0,0 +1,85 @@
+import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, Output, } from '@angular/core';
+import { merge, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { SkyDocsDemoControlPanelCheckboxComponent } from './demo-control-panel-checkbox.component';
+import { SkyDocsDemoControlPanelRadioGroupComponent } from './demo-control-panel-radio-group.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@skyux/i18n";
+/**
+ * Handles the appearance and configuration of the behavior demo control panel.
+ * @example
+ * ```markup
+ * <sky-docs-demo-control-panel
+ *   (selectionChange)="onSelectionChange($event)"
+ * >
+ *   Control panel content here.
+ * </sky-docs-demo-control-panel>
+ * ```
+ */
+export class SkyDocsDemoControlPanelComponent {
+    constructor() {
+        /**
+         * Fires when the user clicks the reset button.
+         */
+        this.reset = new EventEmitter();
+        /**
+         * Fires when a user makes a selection from one of the controls in the panel.
+         */
+        this.selectionChange = new EventEmitter();
+        this.ngUnsubscribe = new Subject();
+    }
+    ngAfterContentInit() {
+        this.addEventListeners();
+        merge(this.checkboxes.changes, this.radioGroups.changes)
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.addEventListeners();
+        });
+    }
+    ngOnDestroy() {
+        this.reset.complete();
+        this.selectionChange.complete();
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    onResetButtonClick() {
+        this.radioGroups.forEach((radioGroup) => {
+            radioGroup.resetValue();
+        });
+        this.checkboxes.forEach((checkbox) => {
+            checkbox.resetState();
+        });
+        this.reset.emit();
+    }
+    addEventListeners() {
+        if (this.eventListeners) {
+            this.eventListeners.unsubscribe();
+        }
+        this.eventListeners = merge(...this.checkboxes.map((c) => c.selectionChange), ...this.radioGroups.map((c) => c.selectionChange))
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((change) => {
+            this.selectionChange.next(change);
+        });
+    }
+}
+SkyDocsDemoControlPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoControlPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoControlPanelComponent, selector: "sky-docs-demo-control-panel", outputs: { reset: "reset", selectionChange: "selectionChange" }, queries: [{ propertyName: "radioGroups", predicate: SkyDocsDemoControlPanelRadioGroupComponent, descendants: true }, { propertyName: "checkboxes", predicate: SkyDocsDemoControlPanelCheckboxComponent, descendants: true }], ngImport: i0, template: "<div class=\"sky-docs-demo-control-panel\">\n  <div class=\"sky-docs-demo-control-panel-row sky-rounded-corners\">\n    <div\n      class=\"\n        sky-docs-demo-control-panel-column\n        sky-docs-demo-control-panel-sections-column\n      \"\n    >\n      <ng-content select=\"sky-docs-demo-control-panel-section\"></ng-content>\n    </div>\n\n    <div\n      class=\"\n        sky-docs-demo-control-panel-column\n        sky-docs-demo-control-panel-button-column\n      \"\n    >\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        [attr.data-test-selector]=\"'sky-docs-demo-control-panel-reset-button'\"\n        (click)=\"onResetButtonClick()\"\n      >\n        {{ 'sky-docs-demo-control-panel-reset-button-label' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".sky-docs-demo-control-panel{margin-bottom:20px;margin-top:-1px;margin-left:-15px}.sky-docs-demo-control-panel-row{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;padding:15px;background-color:#fff;display:inline-flex;min-width:220px}.sky-docs-demo-control-panel-sections-column{display:flex}.sky-docs-demo-control-panel-sections-column ::ng-deep sky-docs-demo-control-panel-section{min-width:120px}.sky-docs-demo-control-panel-button-column{align-self:flex-end}.sky-docs-demo-control-panel-button-column .sky-btn{border:0}\n"], pipes: { "skyLibResources": i1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-demo-control-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-demo-control-panel\">\n  <div class=\"sky-docs-demo-control-panel-row sky-rounded-corners\">\n    <div\n      class=\"\n        sky-docs-demo-control-panel-column\n        sky-docs-demo-control-panel-sections-column\n      \"\n    >\n      <ng-content select=\"sky-docs-demo-control-panel-section\"></ng-content>\n    </div>\n\n    <div\n      class=\"\n        sky-docs-demo-control-panel-column\n        sky-docs-demo-control-panel-button-column\n      \"\n    >\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        [attr.data-test-selector]=\"'sky-docs-demo-control-panel-reset-button'\"\n        (click)=\"onResetButtonClick()\"\n      >\n        {{ 'sky-docs-demo-control-panel-reset-button-label' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".sky-docs-demo-control-panel{margin-bottom:20px;margin-top:-1px;margin-left:-15px}.sky-docs-demo-control-panel-row{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;padding:15px;background-color:#fff;display:inline-flex;min-width:220px}.sky-docs-demo-control-panel-sections-column{display:flex}.sky-docs-demo-control-panel-sections-column ::ng-deep sky-docs-demo-control-panel-section{min-width:120px}.sky-docs-demo-control-panel-button-column{align-self:flex-end}.sky-docs-demo-control-panel-button-column .sky-btn{border:0}\n"] }]
+        }], propDecorators: { reset: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], radioGroups: [{
+                type: ContentChildren,
+                args: [SkyDocsDemoControlPanelRadioGroupComponent, {
+                        descendants: true,
+                    }]
+            }], checkboxes: [{
+                type: ContentChildren,
+                args: [SkyDocsDemoControlPanelCheckboxComponent, {
+                        descendants: true,
+                    }]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby1jb250cm9sLXBhbmVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RvY3MtdG9vbHMvc3JjL21vZHVsZXMvZGVtby9kZW1vLWNvbnRyb2wtcGFuZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZG9jcy10b29scy9zcmMvbW9kdWxlcy9kZW1vL2RlbW8tY29udHJvbC1wYW5lbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxlQUFlLEVBQ2YsWUFBWSxFQUVaLE1BQU0sR0FFUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBZ0IsTUFBTSxNQUFNLENBQUM7QUFFcEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTNDLE9BQU8sRUFBRSx3Q0FBd0MsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBRW5HLE9BQU8sRUFBRSwwQ0FBMEMsRUFBRSxNQUFNLDRDQUE0QyxDQUFDOzs7QUFJeEc7Ozs7Ozs7Ozs7R0FVRztBQU9ILE1BQU0sT0FBTyxnQ0FBZ0M7SUFON0M7UUFTRTs7V0FFRztRQUdJLFVBQUssR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBRXhDOztXQUVHO1FBRUksb0JBQWUsR0FBRyxJQUFJLFlBQVksRUFBaUMsQ0FBQztRQWFuRSxrQkFBYSxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7S0E2QzdDO0lBM0NRLGtCQUFrQjtRQUN2QixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztRQUV6QixLQUFLLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUM7YUFDckQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7YUFDbkMsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1FBQzNCLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVNLFdBQVc7UUFDaEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUN0QixJQUFJLENBQUMsZUFBZSxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQ2hDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDMUIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNoQyxDQUFDO0lBRU0sa0JBQWtCO1FBQ3ZCLElBQUksQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLENBQUMsVUFBVSxFQUFFLEVBQUU7WUFDdEMsVUFBVSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQzFCLENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxRQUFRLEVBQUUsRUFBRTtZQUNuQyxRQUFRLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDeEIsQ0FBQyxDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3BCLENBQUM7SUFFTyxpQkFBaUI7UUFDdkIsSUFBSSxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxjQUFjLENBQUMsV0FBVyxFQUFFLENBQUM7U0FDbkM7UUFFRCxJQUFJLENBQUMsY0FBYyxHQUFHLEtBQUssQ0FDekIsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLGVBQWUsQ0FBQyxFQUNoRCxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsZUFBZSxDQUFDLENBQ2xEO2FBQ0UsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7YUFDbkMsU0FBUyxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUU7WUFDcEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDcEMsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDOzs4SEF2RVUsZ0NBQWdDO2tIQUFoQyxnQ0FBZ0MsZ0tBZ0IxQiwwQ0FBMEMsZ0VBSzFDLHdDQUF3QyxnREMzRDNELGcwQkE0QkE7NEZEVWEsZ0NBQWdDO2tCQU41QyxTQUFTOytCQUNFLDZCQUE2QixtQkFHdEIsdUJBQXVCLENBQUMsTUFBTTs4QkFVeEMsS0FBSztzQkFGWCxNQUFNO2dCQVFBLGVBQWU7c0JBRHJCLE1BQU07Z0JBTUMsV0FBVztzQkFIbEIsZUFBZTt1QkFBQywwQ0FBMEMsRUFBRTt3QkFDM0QsV0FBVyxFQUFFLElBQUk7cUJBQ2xCO2dCQU1PLFVBQVU7c0JBSGpCLGVBQWU7dUJBQUMsd0NBQXdDLEVBQUU7d0JBQ3pELFdBQVcsRUFBRSxJQUFJO3FCQUNsQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEFmdGVyQ29udGVudEluaXQsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZHJlbixcbiAgRXZlbnRFbWl0dGVyLFxuICBPbkRlc3Ryb3ksXG4gIE91dHB1dCxcbiAgUXVlcnlMaXN0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgbWVyZ2UsIFN1YmplY3QsIFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuXG5pbXBvcnQgeyB0YWtlVW50aWwgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbmltcG9ydCB7IFNreURvY3NEZW1vQ29udHJvbFBhbmVsQ2hlY2tib3hDb21wb25lbnQgfSBmcm9tICcuL2RlbW8tY29udHJvbC1wYW5lbC1jaGVja2JveC5jb21wb25lbnQnO1xuXG5pbXBvcnQgeyBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbFJhZGlvR3JvdXBDb21wb25lbnQgfSBmcm9tICcuL2RlbW8tY29udHJvbC1wYW5lbC1yYWRpby1ncm91cC5jb21wb25lbnQnO1xuXG5pbXBvcnQgeyBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbENoYW5nZSB9IGZyb20gJy4vZGVtby1jb250cm9sLXBhbmVsLWNoYW5nZSc7XG5cbi8qKlxuICogSGFuZGxlcyB0aGUgYXBwZWFyYW5jZSBhbmQgY29uZmlndXJhdGlvbiBvZiB0aGUgYmVoYXZpb3IgZGVtbyBjb250cm9sIHBhbmVsLlxuICogQGV4YW1wbGVcbiAqIGBgYG1hcmt1cFxuICogPHNreS1kb2NzLWRlbW8tY29udHJvbC1wYW5lbFxuICogICAoc2VsZWN0aW9uQ2hhbmdlKT1cIm9uU2VsZWN0aW9uQ2hhbmdlKCRldmVudClcIlxuICogPlxuICogICBDb250cm9sIHBhbmVsIGNvbnRlbnQgaGVyZS5cbiAqIDwvc2t5LWRvY3MtZGVtby1jb250cm9sLXBhbmVsPlxuICogYGBgXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NreS1kb2NzLWRlbW8tY29udHJvbC1wYW5lbCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9kZW1vLWNvbnRyb2wtcGFuZWwuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kZW1vLWNvbnRyb2wtcGFuZWwuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFNreURvY3NEZW1vQ29udHJvbFBhbmVsQ29tcG9uZW50XG4gIGltcGxlbWVudHMgT25EZXN0cm95LCBBZnRlckNvbnRlbnRJbml0XG57XG4gIC8qKlxuICAgKiBGaXJlcyB3aGVuIHRoZSB1c2VyIGNsaWNrcyB0aGUgcmVzZXQgYnV0dG9uLlxuICAgKi9cbiAgQE91dHB1dCgpXG4gIC8qZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9uby1vdXRwdXQtbmF0aXZlICovXG4gIHB1YmxpYyByZXNldCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICAvKipcbiAgICogRmlyZXMgd2hlbiBhIHVzZXIgbWFrZXMgYSBzZWxlY3Rpb24gZnJvbSBvbmUgb2YgdGhlIGNvbnRyb2xzIGluIHRoZSBwYW5lbC5cbiAgICovXG4gIEBPdXRwdXQoKVxuICBwdWJsaWMgc2VsZWN0aW9uQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbENoYW5nZT4oKTtcblxuICBAQ29udGVudENoaWxkcmVuKFNreURvY3NEZW1vQ29udHJvbFBhbmVsUmFkaW9Hcm91cENvbXBvbmVudCwge1xuICAgIGRlc2NlbmRhbnRzOiB0cnVlLFxuICB9KVxuICBwcml2YXRlIHJhZGlvR3JvdXBzOiBRdWVyeUxpc3Q8U2t5RG9jc0RlbW9Db250cm9sUGFuZWxSYWRpb0dyb3VwQ29tcG9uZW50PjtcblxuICBAQ29udGVudENoaWxkcmVuKFNreURvY3NEZW1vQ29udHJvbFBhbmVsQ2hlY2tib3hDb21wb25lbnQsIHtcbiAgICBkZXNjZW5kYW50czogdHJ1ZSxcbiAgfSlcbiAgcHJpdmF0ZSBjaGVja2JveGVzOiBRdWVyeUxpc3Q8U2t5RG9jc0RlbW9Db250cm9sUGFuZWxDaGVja2JveENvbXBvbmVudD47XG5cbiAgcHJpdmF0ZSBldmVudExpc3RlbmVyczogU3Vic2NyaXB0aW9uO1xuICBwcml2YXRlIG5nVW5zdWJzY3JpYmUgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gIHB1YmxpYyBuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5hZGRFdmVudExpc3RlbmVycygpO1xuXG4gICAgbWVyZ2UodGhpcy5jaGVja2JveGVzLmNoYW5nZXMsIHRoaXMucmFkaW9Hcm91cHMuY2hhbmdlcylcbiAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLm5nVW5zdWJzY3JpYmUpKVxuICAgICAgLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICAgIHRoaXMuYWRkRXZlbnRMaXN0ZW5lcnMoKTtcbiAgICAgIH0pO1xuICB9XG5cbiAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMucmVzZXQuY29tcGxldGUoKTtcbiAgICB0aGlzLnNlbGVjdGlvbkNoYW5nZS5jb21wbGV0ZSgpO1xuICAgIHRoaXMubmdVbnN1YnNjcmliZS5uZXh0KCk7XG4gICAgdGhpcy5uZ1Vuc3Vic2NyaWJlLmNvbXBsZXRlKCk7XG4gIH1cblxuICBwdWJsaWMgb25SZXNldEJ1dHRvbkNsaWNrKCk6IHZvaWQge1xuICAgIHRoaXMucmFkaW9Hcm91cHMuZm9yRWFjaCgocmFkaW9Hcm91cCkgPT4ge1xuICAgICAgcmFkaW9Hcm91cC5yZXNldFZhbHVlKCk7XG4gICAgfSk7XG5cbiAgICB0aGlzLmNoZWNrYm94ZXMuZm9yRWFjaCgoY2hlY2tib3gpID0+IHtcbiAgICAgIGNoZWNrYm94LnJlc2V0U3RhdGUoKTtcbiAgICB9KTtcblxuICAgIHRoaXMucmVzZXQuZW1pdCgpO1xuICB9XG5cbiAgcHJpdmF0ZSBhZGRFdmVudExpc3RlbmVycygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5ldmVudExpc3RlbmVycykge1xuICAgICAgdGhpcy5ldmVudExpc3RlbmVycy51bnN1YnNjcmliZSgpO1xuICAgIH1cblxuICAgIHRoaXMuZXZlbnRMaXN0ZW5lcnMgPSBtZXJnZShcbiAgICAgIC4uLnRoaXMuY2hlY2tib3hlcy5tYXAoKGMpID0+IGMuc2VsZWN0aW9uQ2hhbmdlKSxcbiAgICAgIC4uLnRoaXMucmFkaW9Hcm91cHMubWFwKChjKSA9PiBjLnNlbGVjdGlvbkNoYW5nZSlcbiAgICApXG4gICAgICAucGlwZSh0YWtlVW50aWwodGhpcy5uZ1Vuc3Vic2NyaWJlKSlcbiAgICAgIC5zdWJzY3JpYmUoKGNoYW5nZSkgPT4ge1xuICAgICAgICB0aGlzLnNlbGVjdGlvbkNoYW5nZS5uZXh0KGNoYW5nZSk7XG4gICAgICB9KTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInNreS1kb2NzLWRlbW8tY29udHJvbC1wYW5lbFwiPlxuICA8ZGl2IGNsYXNzPVwic2t5LWRvY3MtZGVtby1jb250cm9sLXBhbmVsLXJvdyBza3ktcm91bmRlZC1jb3JuZXJzXCI+XG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJcbiAgICAgICAgc2t5LWRvY3MtZGVtby1jb250cm9sLXBhbmVsLWNvbHVtblxuICAgICAgICBza3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWwtc2VjdGlvbnMtY29sdW1uXG4gICAgICBcIlxuICAgID5cbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInNreS1kb2NzLWRlbW8tY29udHJvbC1wYW5lbC1zZWN0aW9uXCI+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJcbiAgICAgICAgc2t5LWRvY3MtZGVtby1jb250cm9sLXBhbmVsLWNvbHVtblxuICAgICAgICBza3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWwtYnV0dG9uLWNvbHVtblxuICAgICAgXCJcbiAgICA+XG4gICAgICA8YnV0dG9uXG4gICAgICAgIGNsYXNzPVwic2t5LWJ0biBza3ktYnRuLWxpbmtcIlxuICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgW2F0dHIuZGF0YS10ZXN0LXNlbGVjdG9yXT1cIidza3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWwtcmVzZXQtYnV0dG9uJ1wiXG4gICAgICAgIChjbGljayk9XCJvblJlc2V0QnV0dG9uQ2xpY2soKVwiXG4gICAgICA+XG4gICAgICAgIHt7ICdza3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWwtcmVzZXQtYnV0dG9uLWxhYmVsJyB8IHNreUxpYlJlc291cmNlcyB9fVxuICAgICAgPC9idXR0b24+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=

package/esm2020/modules/demo/demo.component.mjs

@@ -0,0 +1,53 @@
+import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, Input, } from '@angular/core';
+import { SkyDocsDemoControlPanelComponent } from './demo-control-panel.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@skyux/indicators";
+import * as i2 from "@angular/common";
+import * as i3 from "@skyux/i18n";
+/**
+ * Wraps all behavior demo components and handles the configuration and appearance of the behavior demo.
+ * @example
+ * ```markup
+ * <sky-docs-demo>
+ *   Demo content here.
+ * </sky-docs-demo>
+ * ```
+ */
+export class SkyDocsDemoComponent {
+    constructor() {
+        this.areOptionsVisible = false;
+    }
+    /**
+     * Specifies the horizontal alignment of the demo contents.
+     * @default 'left'
+     */
+    set alignContents(value) {
+        this._alignContents = value;
+    }
+    get alignContents() {
+        return this._alignContents || 'left';
+    }
+    get hasOptions() {
+        return this.controlPanels && this.controlPanels.length > 0;
+    }
+    get toggleOptionsButtonIcon() {
+        return this.areOptionsVisible ? 'chevron-up' : 'chevron-down';
+    }
+    onToggleOptionsButtonClick() {
+        this.areOptionsVisible = !this.areOptionsVisible;
+    }
+}
+SkyDocsDemoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDocsDemoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoComponent, selector: "sky-docs-demo", inputs: { alignContents: "alignContents", heading: "heading" }, queries: [{ propertyName: "controlPanels", predicate: SkyDocsDemoControlPanelComponent, read: ElementRef }], ngImport: i0, template: "<div class=\"sky-docs-demo\">\n  <div aria-level=\"3\" class=\"sky-docs-demo-heading\" role=\"heading\">\n    <span\n      class=\"sky-section-heading\"\n      [attr.data-test-selector]=\"'sky-docs-demo-heading-text'\"\n    >\n      {{ heading || ('sky-docs-demo-heading' | skyLibResources) }}\n    </span>\n\n    <div class=\"sky-docs-demo-control-panel-wrapper\">\n      <div class=\"sky-docs-demo-control-panel-wrapper-header\">\n        <button\n          *ngIf=\"hasOptions\"\n          class=\"sky-btn\"\n          type=\"button\"\n          [attr.data-test-selector]=\"'sky-docs-demo-heading-button'\"\n          [ngClass]=\"{\n            'sky-docs-demo-heading-btn-open': areOptionsVisible\n          }\"\n          (click)=\"onToggleOptionsButtonClick()\"\n        >\n          <sky-icon [icon]=\"toggleOptionsButtonIcon\"></sky-icon>\n          <ng-container *ngIf=\"areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-off' | skyLibResources }}\n          </ng-container>\n          <ng-container *ngIf=\"!areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-on' | skyLibResources }}\n          </ng-container>\n        </button>\n      </div>\n      <div class=\"sky-docs-demo-control-panel-wrapper-body\">\n        <ng-container *ngIf=\"areOptionsVisible\">\n          <ng-container *ngTemplateOutlet=\"controlPanels\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"sky-docs-demo-viewport\"\n    [ngClass]=\"'sky-docs-demo-viewport-align-' + alignContents\"\n  >\n    <div class=\"sky-docs-demo-viewport-gutter\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #controlPanels>\n  <ng-content select=\"sky-docs-demo-control-panel\"></ng-content>\n</ng-template>\n", styles: [".sky-docs-demo{margin-bottom:20px}.sky-docs-demo-heading{margin-bottom:10px;display:flex;flex-direction:row}.sky-docs-demo-heading .sky-docs-demo-heading-btn-open{border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;position:relative}.sky-docs-demo-control-panel-wrapper{display:flex;flex-direction:column}.sky-section-heading{margin-right:10px}.sky-docs-demo-viewport{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;margin-bottom:10px;padding:15px}.sky-docs-demo-viewport-align-center{display:flex;align-items:center;justify-content:center}\n"], components: [{ type: i1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-docs-demo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-demo\">\n  <div aria-level=\"3\" class=\"sky-docs-demo-heading\" role=\"heading\">\n    <span\n      class=\"sky-section-heading\"\n      [attr.data-test-selector]=\"'sky-docs-demo-heading-text'\"\n    >\n      {{ heading || ('sky-docs-demo-heading' | skyLibResources) }}\n    </span>\n\n    <div class=\"sky-docs-demo-control-panel-wrapper\">\n      <div class=\"sky-docs-demo-control-panel-wrapper-header\">\n        <button\n          *ngIf=\"hasOptions\"\n          class=\"sky-btn\"\n          type=\"button\"\n          [attr.data-test-selector]=\"'sky-docs-demo-heading-button'\"\n          [ngClass]=\"{\n            'sky-docs-demo-heading-btn-open': areOptionsVisible\n          }\"\n          (click)=\"onToggleOptionsButtonClick()\"\n        >\n          <sky-icon [icon]=\"toggleOptionsButtonIcon\"></sky-icon>\n          <ng-container *ngIf=\"areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-off' | skyLibResources }}\n          </ng-container>\n          <ng-container *ngIf=\"!areOptionsVisible\">\n            {{ 'sky-docs-demo-toggle-button-on' | skyLibResources }}\n          </ng-container>\n        </button>\n      </div>\n      <div class=\"sky-docs-demo-control-panel-wrapper-body\">\n        <ng-container *ngIf=\"areOptionsVisible\">\n          <ng-container *ngTemplateOutlet=\"controlPanels\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"sky-docs-demo-viewport\"\n    [ngClass]=\"'sky-docs-demo-viewport-align-' + alignContents\"\n  >\n    <div class=\"sky-docs-demo-viewport-gutter\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #controlPanels>\n  <ng-content select=\"sky-docs-demo-control-panel\"></ng-content>\n</ng-template>\n", styles: [".sky-docs-demo{margin-bottom:20px}.sky-docs-demo-heading{margin-bottom:10px;display:flex;flex-direction:row}.sky-docs-demo-heading .sky-docs-demo-heading-btn-open{border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0;position:relative}.sky-docs-demo-control-panel-wrapper{display:flex;flex-direction:column}.sky-section-heading{margin-right:10px}.sky-docs-demo-viewport{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;margin-bottom:10px;padding:15px}.sky-docs-demo-viewport-align-center{display:flex;align-items:center;justify-content:center}\n"] }]
+        }], propDecorators: { alignContents: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }], controlPanels: [{
+                type: ContentChildren,
+                args: [SkyDocsDemoControlPanelComponent, { read: ElementRef }]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2NzLXRvb2xzL3NyYy9tb2R1bGVzL2RlbW8vZGVtby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kb2NzLXRvb2xzL3NyYy9tb2R1bGVzL2RlbW8vZGVtby5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxlQUFlLEVBQ2YsVUFBVSxFQUNWLEtBQUssR0FFTixNQUFNLGVBQWUsQ0FBQztBQUl2QixPQUFPLEVBQUUsZ0NBQWdDLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQzs7Ozs7QUFFbEY7Ozs7Ozs7O0dBUUc7QUFPSCxNQUFNLE9BQU8sb0JBQW9CO0lBTmpDO1FBcUNTLHNCQUFpQixHQUFHLEtBQUssQ0FBQztLQU9sQztJQXJDQzs7O09BR0c7SUFDSCxJQUNXLGFBQWEsQ0FBQyxLQUFrQztRQUN6RCxJQUFJLENBQUMsY0FBYyxHQUFHLEtBQUssQ0FBQztJQUM5QixDQUFDO0lBRUQsSUFBVyxhQUFhO1FBQ3RCLE9BQU8sSUFBSSxDQUFDLGNBQWMsSUFBSSxNQUFNLENBQUM7SUFDdkMsQ0FBQztJQVFELElBQVcsVUFBVTtRQUNuQixPQUFPLElBQUksQ0FBQyxhQUFhLElBQUksSUFBSSxDQUFDLGFBQWEsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDO0lBQzdELENBQUM7SUFLRCxJQUFXLHVCQUF1QjtRQUNoQyxPQUFPLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxjQUFjLENBQUM7SUFDaEUsQ0FBQztJQU1NLDBCQUEwQjtRQUMvQixJQUFJLENBQUMsaUJBQWlCLEdBQUcsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUM7SUFDbkQsQ0FBQzs7a0hBckNVLG9CQUFvQjtzR0FBcEIsb0JBQW9CLG1KQXdCZCxnQ0FBZ0MsUUFBVSxVQUFVLDZCQ3BEdkUsNnZEQW1EQTs0RkR2QmEsb0JBQW9CO2tCQU5oQyxTQUFTOytCQUNFLGVBQWUsbUJBR1IsdUJBQXVCLENBQUMsTUFBTTs4QkFRcEMsYUFBYTtzQkFEdkIsS0FBSztnQkFhQyxPQUFPO3NCQURiLEtBQUs7Z0JBUUUsYUFBYTtzQkFEcEIsZUFBZTt1QkFBQyxnQ0FBZ0MsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGRyZW4sXG4gIEVsZW1lbnRSZWYsXG4gIElucHV0LFxuICBRdWVyeUxpc3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBTa3lEb2NzRGVtb0NvbnRlbnRBbGlnbm1lbnQgfSBmcm9tICcuL2RlbW8tY29udGVudC1hbGlnbm1lbnQnO1xuXG5pbXBvcnQgeyBTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbENvbXBvbmVudCB9IGZyb20gJy4vZGVtby1jb250cm9sLXBhbmVsLmNvbXBvbmVudCc7XG5cbi8qKlxuICogV3JhcHMgYWxsIGJlaGF2aW9yIGRlbW8gY29tcG9uZW50cyBhbmQgaGFuZGxlcyB0aGUgY29uZmlndXJhdGlvbiBhbmQgYXBwZWFyYW5jZSBvZiB0aGUgYmVoYXZpb3IgZGVtby5cbiAqIEBleGFtcGxlXG4gKiBgYGBtYXJrdXBcbiAqIDxza3ktZG9jcy1kZW1vPlxuICogICBEZW1vIGNvbnRlbnQgaGVyZS5cbiAqIDwvc2t5LWRvY3MtZGVtbz5cbiAqIGBgYFxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktZG9jcy1kZW1vJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2RlbW8uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kZW1vLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lEb2NzRGVtb0NvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBTcGVjaWZpZXMgdGhlIGhvcml6b250YWwgYWxpZ25tZW50IG9mIHRoZSBkZW1vIGNvbnRlbnRzLlxuICAgKiBAZGVmYXVsdCAnbGVmdCdcbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBzZXQgYWxpZ25Db250ZW50cyh2YWx1ZTogU2t5RG9jc0RlbW9Db250ZW50QWxpZ25tZW50KSB7XG4gICAgdGhpcy5fYWxpZ25Db250ZW50cyA9IHZhbHVlO1xuICB9XG5cbiAgcHVibGljIGdldCBhbGlnbkNvbnRlbnRzKCk6IFNreURvY3NEZW1vQ29udGVudEFsaWdubWVudCB7XG4gICAgcmV0dXJuIHRoaXMuX2FsaWduQ29udGVudHMgfHwgJ2xlZnQnO1xuICB9XG5cbiAgLyoqXG4gICAqIEN1c3RvbSBoZWFkaW5nIHRleHQgZm9yIHRoZSBkZW1vLlxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIGhlYWRpbmc6IHN0cmluZztcblxuICBwdWJsaWMgZ2V0IGhhc09wdGlvbnMoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuY29udHJvbFBhbmVscyAmJiB0aGlzLmNvbnRyb2xQYW5lbHMubGVuZ3RoID4gMDtcbiAgfVxuXG4gIEBDb250ZW50Q2hpbGRyZW4oU2t5RG9jc0RlbW9Db250cm9sUGFuZWxDb21wb25lbnQsIHsgcmVhZDogRWxlbWVudFJlZiB9KVxuICBwcml2YXRlIGNvbnRyb2xQYW5lbHM6IFF1ZXJ5TGlzdDxTa3lEb2NzRGVtb0NvbnRyb2xQYW5lbENvbXBvbmVudD47XG5cbiAgcHVibGljIGdldCB0b2dnbGVPcHRpb25zQnV0dG9uSWNvbigpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmFyZU9wdGlvbnNWaXNpYmxlID8gJ2NoZXZyb24tdXAnIDogJ2NoZXZyb24tZG93bic7XG4gIH1cblxuICBwdWJsaWMgYXJlT3B0aW9uc1Zpc2libGUgPSBmYWxzZTtcblxuICBwcml2YXRlIF9hbGlnbkNvbnRlbnRzOiBTa3lEb2NzRGVtb0NvbnRlbnRBbGlnbm1lbnQ7XG5cbiAgcHVibGljIG9uVG9nZ2xlT3B0aW9uc0J1dHRvbkNsaWNrKCk6IHZvaWQge1xuICAgIHRoaXMuYXJlT3B0aW9uc1Zpc2libGUgPSAhdGhpcy5hcmVPcHRpb25zVmlzaWJsZTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInNreS1kb2NzLWRlbW9cIj5cbiAgPGRpdiBhcmlhLWxldmVsPVwiM1wiIGNsYXNzPVwic2t5LWRvY3MtZGVtby1oZWFkaW5nXCIgcm9sZT1cImhlYWRpbmdcIj5cbiAgICA8c3BhblxuICAgICAgY2xhc3M9XCJza3ktc2VjdGlvbi1oZWFkaW5nXCJcbiAgICAgIFthdHRyLmRhdGEtdGVzdC1zZWxlY3Rvcl09XCInc2t5LWRvY3MtZGVtby1oZWFkaW5nLXRleHQnXCJcbiAgICA+XG4gICAgICB7eyBoZWFkaW5nIHx8ICgnc2t5LWRvY3MtZGVtby1oZWFkaW5nJyB8IHNreUxpYlJlc291cmNlcykgfX1cbiAgICA8L3NwYW4+XG5cbiAgICA8ZGl2IGNsYXNzPVwic2t5LWRvY3MtZGVtby1jb250cm9sLXBhbmVsLXdyYXBwZXJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJza3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWwtd3JhcHBlci1oZWFkZXJcIj5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICpuZ0lmPVwiaGFzT3B0aW9uc1wiXG4gICAgICAgICAgY2xhc3M9XCJza3ktYnRuXCJcbiAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICBbYXR0ci5kYXRhLXRlc3Qtc2VsZWN0b3JdPVwiJ3NreS1kb2NzLWRlbW8taGVhZGluZy1idXR0b24nXCJcbiAgICAgICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICAgICAnc2t5LWRvY3MtZGVtby1oZWFkaW5nLWJ0bi1vcGVuJzogYXJlT3B0aW9uc1Zpc2libGVcbiAgICAgICAgICB9XCJcbiAgICAgICAgICAoY2xpY2spPVwib25Ub2dnbGVPcHRpb25zQnV0dG9uQ2xpY2soKVwiXG4gICAgICAgID5cbiAgICAgICAgICA8c2t5LWljb24gW2ljb25dPVwidG9nZ2xlT3B0aW9uc0J1dHRvbkljb25cIj48L3NreS1pY29uPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJhcmVPcHRpb25zVmlzaWJsZVwiPlxuICAgICAgICAgICAge3sgJ3NreS1kb2NzLWRlbW8tdG9nZ2xlLWJ1dHRvbi1vZmYnIHwgc2t5TGliUmVzb3VyY2VzIH19XG4gICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFhcmVPcHRpb25zVmlzaWJsZVwiPlxuICAgICAgICAgICAge3sgJ3NreS1kb2NzLWRlbW8tdG9nZ2xlLWJ1dHRvbi1vbicgfCBza3lMaWJSZXNvdXJjZXMgfX1cbiAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJza3ktZG9jcy1kZW1vLWNvbnRyb2wtcGFuZWwtd3JhcHBlci1ib2R5XCI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJhcmVPcHRpb25zVmlzaWJsZVwiPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250cm9sUGFuZWxzXCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuXG4gIDxkaXZcbiAgICBjbGFzcz1cInNreS1kb2NzLWRlbW8tdmlld3BvcnRcIlxuICAgIFtuZ0NsYXNzXT1cIidza3ktZG9jcy1kZW1vLXZpZXdwb3J0LWFsaWduLScgKyBhbGlnbkNvbnRlbnRzXCJcbiAgPlxuICAgIDxkaXYgY2xhc3M9XCJza3ktZG9jcy1kZW1vLXZpZXdwb3J0LWd1dHRlclwiPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI2NvbnRyb2xQYW5lbHM+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cInNreS1kb2NzLWRlbW8tY29udHJvbC1wYW5lbFwiPjwvbmctY29udGVudD5cbjwvbmctdGVtcGxhdGU+XG4iXX0=