@limetech/kompendium 1.1.1

package/dist/collection/components/playground/playground.css

@@ -0,0 +1,198 @@
+:root {
+  --width-nav-panel: 16rem;
+}
+
+:host {
+  display: block;
+}
+
+.tab-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.tab-bar {
+  display: flex;
+  padding: 0.1875rem 1rem 0 1rem;
+  overflow-y: auto;
+}
+.tab-bar .tab span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  width: 100%;
+  padding: 0.125rem 0;
+}
+.tab-bar .tab {
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  text-align: center;
+  line-height: 0.9375rem;
+  color: rgb(var(--kompendium-contrast-1000));
+  font-size: 1rem;
+  border-radius: 0.5rem 0.5rem 0 0;
+  margin: 0 0.125rem;
+  min-width: 3.75rem;
+}
+.tab-bar .tab:before, .tab-bar .tab:after {
+  transition: background-color 0.2s ease;
+  content: "";
+  display: block;
+  width: 0.625rem;
+  height: 0.625rem;
+  position: absolute;
+  bottom: 0;
+  -webkit-mask-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>");
+  mask-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>");
+  background: transparent;
+}
+.tab-bar .tab:before {
+  left: -0.625rem;
+  transform: rotateY(180deg);
+}
+.tab-bar .tab:after {
+  right: -0.625rem;
+}
+.tab-bar .tab:hover {
+  background-color: rgb(var(--kompendium-contrast-100));
+}
+.tab-bar .tab:hover:before, .tab-bar .tab:hover:after {
+  background-color: rgb(var(--kompendium-contrast-100));
+}
+.tab-bar .tab.active {
+  z-index: 1;
+  color: rgb(var(--kompendium-contrast-1100));
+  background: rgb(var(--kompendium-color-code-background));
+}
+.tab-bar .tab.active:before, .tab-bar .tab.active:after {
+  background: rgb(var(--kompendium-color-code-background));
+}
+
+.tab-items {
+  display: flex;
+  max-height: 31.25rem;
+}
+.tab-items .tab-item {
+  width: 100%;
+  display: none;
+}
+.tab-items .tab-item.active {
+  display: flex;
+}
+
+kompendium-code {
+  display: block;
+}
+kompendium-code:before, kompendium-code:after {
+  content: "";
+  z-index: 1;
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  border-radius: 0.5625rem;
+  pointer-events: none;
+}
+kompendium-code:before {
+  top: 2.4375rem;
+  height: 1.5rem;
+  background-image: linear-gradient(rgb(var(--kompendium-color-code-background)), rgba(var(--kompendium-color-code-background), 0));
+}
+kompendium-code:after {
+  bottom: 0;
+  height: 2rem;
+  background-image: linear-gradient(rgba(var(--kompendium-color-code-background), 0), rgb(var(--kompendium-color-code-background)));
+}
+
+section.example {
+  transition: border-color 0.3s ease 0.05s;
+  padding-bottom: 2.5rem;
+  margin-bottom: 2.5rem;
+  border-bottom: 1px solid rgb(var(--kompendium-contrast-500));
+}
+section.example .result,
+section.example .code {
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: top;
+  width: 50%;
+}
+section.example .result {
+  padding-right: 2.5rem;
+}
+section.example .result kompendium-markdown {
+  margin-bottom: 2rem;
+}
+section.example .code {
+  position: sticky;
+  top: 0;
+}
+
+@media (max-width: 1000px) {
+  section.example .result,
+  section.example .code {
+    width: 100%;
+    padding-right: 0;
+    margin-bottom: 5rem;
+  }
+  section.example .code {
+    position: relative;
+    margin-bottom: 2.5rem;
+  }
+}
+.show-case_description {
+  padding: 0.75rem;
+}
+
+.show-case_component {
+  font-family: var(--kompendium-example-font-family, inherit);
+  font-size: var(--kompendium-example-font-size, inherit);
+  line-height: var(--kompendium-example-line-height, inherit);
+  color: var(--kompendium-example-color, inherit);
+  padding: 1.25rem;
+  border-radius: 0.875rem;
+  background-color: rgb(var(--kompendium-contrast-100));
+  border: 1px solid rgb(var(--kompendium-contrast-300));
+  box-shadow: var(--shadow-showcase);
+}
+
+.debug {
+  display: flex;
+  justify-content: flex-end;
+}
+.debug a.debug-link {
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+}
+.debug a.debug-link:hover {
+  box-shadow: var(--kompendium-button-shadow-hovered);
+}
+.debug a.debug-link:active {
+  box-shadow: var(--kompendium-button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.debug a.debug-link:focus {
+  outline: none;
+}
+.debug a.debug-link:focus-visible {
+  outline: none;
+  box-shadow: var(--kompendium-shadow-depth-8-focused);
+}
+.debug a.debug-link {
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out, opacity 0.2s ease;
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 0;
+  margin: -3.25rem -1rem 0 0;
+  border-radius: 50%;
+  color: rgb(var(--kompendium-contrast-1200));
+  opacity: 0.6;
+}
+.debug a.debug-link:hover {
+  opacity: 1;
+  background-color: rgb(var(--kompendium-contrast-100));
+}

package/dist/collection/components/playground/playground.js

@@ -0,0 +1,174 @@
+import { h, Host } from "@stencil/core";
+import { THEME_EVENT_NAME } from "../darkmode-switch/types";
+export class Playground {
+    constructor() {
+        /**
+         * Factory for creating props for example components
+         * @returns {Record<string, unknown>} props
+         */
+        this.propsFactory = () => ({});
+        this.activateTab = (id) => () => {
+            this.activeTab = id;
+        };
+        this.themeListener = (event) => {
+            this.theme = event.detail;
+        };
+        this.renderTab = this.renderTab.bind(this);
+        this.renderItem = this.renderItem.bind(this);
+    }
+    connectedCallback() {
+        this.theme = document.querySelector('html').dataset.theme;
+        document.addEventListener(THEME_EVENT_NAME, this.themeListener);
+    }
+    disconnectedCallback() {
+        document.removeEventListener(THEME_EVENT_NAME, this.themeListener);
+    }
+    render() {
+        if (!this.component) {
+            return;
+        }
+        const sources = this.component.sources || [];
+        return (h(Host, { "data-theme": this.theme }, h("section", { class: "example" }, h("div", { class: "result" }, this.renderResult()), h("aside", { class: "code" }, h("nav", { class: "tab-bar" }, this.renderTabs(sources)), h("div", { class: "tab-items" }, this.renderItems(sources))))));
+    }
+    renderTabs(sources) {
+        return sources.map(this.renderTab);
+    }
+    renderTab(source, index) {
+        const classList = {
+            tab: true,
+            active: this.isTabActive(source, index),
+        };
+        return (h("a", { class: classList, onClick: this.activateTab(source.filename) }, h("span", null, source.filename)));
+    }
+    renderItems(sources) {
+        return sources.map(this.renderItem);
+    }
+    renderResult() {
+        const ExampleComponent = this.component.tag;
+        const text = '##### ' + this.component.docs;
+        const factory = this.propsFactory;
+        const props = {
+            schema: this.schema,
+            ...factory(ExampleComponent),
+        };
+        return (h("div", { class: "show-case" }, h("div", { class: "show-case_description" }, h("kompendium-markdown", { text: text })), h("div", { class: "show-case_component" }, this.renderDebugButton(this.component.tag), h(ExampleComponent, { ...props }))));
+    }
+    renderItem(source, index) {
+        const classList = {
+            'tab-item': true,
+            active: this.isTabActive(source, index),
+        };
+        const code = source.source.replace(/\/\*\*.+?\*\//gms, '');
+        const key = [this.component.tag, source.filename].join('/');
+        return (h("kompendium-code", { class: classList, language: source.type, key: key }, code));
+    }
+    renderDebugButton(tag) {
+        if (!['localhost', '127.0.0.1'].includes(location.hostname)) {
+            return;
+        }
+        const href = `#/debug/${tag}`;
+        return (h("div", { class: "debug" }, h("a", { class: "debug-link", href: href, title: "Debug" }, h("svg", { viewBox: "0 0 400 400", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-miterlimit": "1.5" }, h("path", { fill: "none", d: "M0 0h400v400H0z" }), h("path", { d: "M194.97 254.84h77.555", fill: "none", stroke: "currentColor", "stroke-opacity": ".6", "stroke-width": "20" }), h("path", { d: "M127.474 145.16l54.84 54.84M182.315 200l-54.84 54.84", fill: "none", stroke: "currentColor", "stroke-width": "20" })))));
+    }
+    isTabActive(source, index) {
+        let isActive = this.activeTab === source.filename;
+        if (!isActive) {
+            isActive = index === 0 && !this.activeTab;
+        }
+        return isActive;
+    }
+    static get is() { return "kompendium-playground"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["playground.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["playground.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "component": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "JsonDocsComponent",
+                    "resolved": "JsonDocsComponent",
+                    "references": {
+                        "JsonDocsComponent": {
+                            "location": "import",
+                            "path": "@stencil/core/internal",
+                            "id": "node_modules::JsonDocsComponent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The component to display"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "schema": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, any>",
+                    "resolved": "{ [x: string]: any; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Schema for the component"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "propsFactory": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PropsFactory",
+                    "resolved": "(name: string) => Record<string, unknown>",
+                    "references": {
+                        "PropsFactory": {
+                            "location": "import",
+                            "path": "./playground.types",
+                            "id": "src/components/playground/playground.types.ts::PropsFactory"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "returns",
+                            "text": "props"
+                        }],
+                    "text": "Factory for creating props for example components"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "() => ({})"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeTab": {},
+            "theme": {}
+        };
+    }
+}
+//# sourceMappingURL=playground.js.map

package/dist/collection/components/playground/playground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playground.js","sourceRoot":"","sources":["../../../src/components/playground/playground.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGhE,OAAO,EAAS,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAQnE,MAAM,OAAO,UAAU;IA0BnB;QAbA;;;WAGG;QAEI,iBAAY,GAAkB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QA4IxC,gBAAW,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,GAAG,EAAE;YACvC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;QACxB,CAAC,CAAC;QAWM,kBAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;YAClD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;QAC9B,CAAC,CAAC;QAlJE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChD;IAEM,iBAAiB;QACpB,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,KAAc,CAAC;QACnE,QAAQ,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACpE,CAAC;IAEM,oBAAoB;QACvB,QAAQ,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACvE,CAAC;IAEM,MAAM;QACT,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YAClB,OAAO;QACX,CAAC;QAED,MAAM,OAAO,GAAsB,IAAI,CAAC,SAAiB,CAAC,OAAO,IAAI,EAAE,CAAC;QAExE,OAAO,CACH,EAAC,IAAI,kBAAa,IAAI,CAAC,KAAK;YACxB,eAAS,KAAK,EAAC,SAAS;gBACpB,WAAK,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,YAAY,EAAE,CAAO;gBAE/C,aAAO,KAAK,EAAC,MAAM;oBACf,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAO;oBACrD,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAO,CACpD,CACF,CACP,CACV,CAAC;IACN,CAAC;IAEO,UAAU,CAAC,OAAyB;QACxC,OAAO,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC;IAEO,SAAS,CAAC,MAAsB,EAAE,KAAa;QACnD,MAAM,SAAS,GAAG;YACd,GAAG,EAAE,IAAI;YACT,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC;SAC1C,CAAC;QAEF,OAAO,CACH,SAAG,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC;YAC3D,gBAAO,MAAM,CAAC,QAAQ,CAAQ,CAC9B,CACP,CAAC;IACN,CAAC;IAEO,WAAW,CAAC,OAAyB;QACzC,OAAO,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,CAAC;IAEO,YAAY;QAChB,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC;QAC5C,MAAM,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;QAClC,MAAM,KAAK,GAAG;YACV,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,GAAG,OAAO,CAAC,gBAAgB,CAAC;SAC/B,CAAC;QAEF,OAAO,CACH,WAAK,KAAK,EAAC,WAAW;YAClB,WAAK,KAAK,EAAC,uBAAuB;gBAC9B,2BAAqB,IAAI,EAAE,IAAI,GAAI,CACjC;YACN,WAAK,KAAK,EAAC,qBAAqB;gBAC3B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC;gBAC3C,EAAC,gBAAgB,OAAK,KAAK,GAAI,CAC7B,CACJ,CACT,CAAC;IACN,CAAC;IAEO,UAAU,CAAC,MAAsB,EAAE,KAAa;QACpD,MAAM,SAAS,GAAG;YACd,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC;SAC1C,CAAC;QACF,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAC;QAC3D,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5D,OAAO,CACH,uBAAiB,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,IAC7D,IAAI,CACS,CACrB,CAAC;IACN,CAAC;IAEO,iBAAiB,CAAC,GAAW;QACjC,IAAI,CAAC,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1D,OAAO;QACX,CAAC;QAED,MAAM,IAAI,GAAG,WAAW,GAAG,EAAE,CAAC;QAE9B,OAAO,CACH,WAAK,KAAK,EAAC,OAAO;YACd,SAAG,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,OAAO;gBAC3C,WACI,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,4BAA4B,eACxB,SAAS,eACT,SAAS,oBACJ,OAAO,qBACN,OAAO,uBACL,KAAK;oBAEvB,YAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,iBAAiB,GAAG;oBACxC,YACI,CAAC,EAAC,uBAAuB,EACzB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,oBACN,IAAI,kBACN,IAAI,GACnB;oBACF,YACI,CAAC,EAAC,sDAAsD,EACxD,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,IAAI,GACnB,CACA,CACN,CACF,CACT,CAAC;IACN,CAAC;IAMO,WAAW,CAAC,MAAsB,EAAE,KAAa;QACrD,IAAI,QAAQ,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC,QAAQ,CAAC;QAClD,IAAI,CAAC,QAAQ,EAAE,CAAC;YACZ,QAAQ,GAAG,KAAK,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;QAC9C,CAAC;QAED,OAAO,QAAQ,CAAC;IACpB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKJ","sourcesContent":["import { Component, h, Host, Prop, State } from '@stencil/core';\nimport { JsonDocsComponent } from '@stencil/core/internal';\nimport { JsonDocsSource } from '../../kompendium/source';\nimport { Theme, THEME_EVENT_NAME } from '../darkmode-switch/types';\nimport { PropsFactory } from './playground.types';\n\n@Component({\n    tag: 'kompendium-playground',\n    styleUrl: 'playground.scss',\n    shadow: true,\n})\nexport class Playground {\n    /**\n     * The component to display\n     */\n    @Prop()\n    public component: JsonDocsComponent;\n\n    /**\n     * Schema for the component\n     */\n    @Prop()\n    public schema: Record<string, any>;\n\n    /**\n     * Factory for creating props for example components\n     * @returns {Record<string, unknown>} props\n     */\n    @Prop()\n    public propsFactory?: PropsFactory = () => ({});\n\n    @State()\n    private activeTab: string;\n\n    @State()\n    private theme: Theme;\n\n    constructor() {\n        this.renderTab = this.renderTab.bind(this);\n        this.renderItem = this.renderItem.bind(this);\n    }\n\n    public connectedCallback() {\n        this.theme = document.querySelector('html').dataset.theme as Theme;\n        document.addEventListener(THEME_EVENT_NAME, this.themeListener);\n    }\n\n    public disconnectedCallback() {\n        document.removeEventListener(THEME_EVENT_NAME, this.themeListener);\n    }\n\n    public render(): HTMLElement {\n        if (!this.component) {\n            return;\n        }\n\n        const sources: JsonDocsSource[] = (this.component as any).sources || [];\n\n        return (\n            <Host data-theme={this.theme}>\n                <section class=\"example\">\n                    <div class=\"result\">{this.renderResult()}</div>\n\n                    <aside class=\"code\">\n                        <nav class=\"tab-bar\">{this.renderTabs(sources)}</nav>\n                        <div class=\"tab-items\">{this.renderItems(sources)}</div>\n                    </aside>\n                </section>\n            </Host>\n        );\n    }\n\n    private renderTabs(sources: JsonDocsSource[]) {\n        return sources.map(this.renderTab);\n    }\n\n    private renderTab(source: JsonDocsSource, index: number) {\n        const classList = {\n            tab: true,\n            active: this.isTabActive(source, index),\n        };\n\n        return (\n            <a class={classList} onClick={this.activateTab(source.filename)}>\n                <span>{source.filename}</span>\n            </a>\n        );\n    }\n\n    private renderItems(sources: JsonDocsSource[]) {\n        return sources.map(this.renderItem);\n    }\n\n    private renderResult() {\n        const ExampleComponent = this.component.tag;\n        const text = '##### ' + this.component.docs;\n        const factory = this.propsFactory;\n        const props = {\n            schema: this.schema,\n            ...factory(ExampleComponent),\n        };\n\n        return (\n            <div class=\"show-case\">\n                <div class=\"show-case_description\">\n                    <kompendium-markdown text={text} />\n                </div>\n                <div class=\"show-case_component\">\n                    {this.renderDebugButton(this.component.tag)}\n                    <ExampleComponent {...props} />\n                </div>\n            </div>\n        );\n    }\n\n    private renderItem(source: JsonDocsSource, index: number) {\n        const classList = {\n            'tab-item': true,\n            active: this.isTabActive(source, index),\n        };\n        const code = source.source.replace(/\\/\\*\\*.+?\\*\\//gms, '');\n        const key = [this.component.tag, source.filename].join('/');\n\n        return (\n            <kompendium-code class={classList} language={source.type} key={key}>\n                {code}\n            </kompendium-code>\n        );\n    }\n\n    private renderDebugButton(tag: string) {\n        if (!['localhost', '127.0.0.1'].includes(location.hostname)) {\n            return;\n        }\n\n        const href = `#/debug/${tag}`;\n\n        return (\n            <div class=\"debug\">\n                <a class=\"debug-link\" href={href} title=\"Debug\">\n                    <svg\n                        viewBox=\"0 0 400 400\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        stroke-miterlimit=\"1.5\"\n                    >\n                        <path fill=\"none\" d=\"M0 0h400v400H0z\" />\n                        <path\n                            d=\"M194.97 254.84h77.555\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            stroke-opacity=\".6\"\n                            stroke-width=\"20\"\n                        />\n                        <path\n                            d=\"M127.474 145.16l54.84 54.84M182.315 200l-54.84 54.84\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"20\"\n                        />\n                    </svg>\n                </a>\n            </div>\n        );\n    }\n\n    private activateTab = (id: string) => () => {\n        this.activeTab = id;\n    };\n\n    private isTabActive(source: JsonDocsSource, index: number): boolean {\n        let isActive = this.activeTab === source.filename;\n        if (!isActive) {\n            isActive = index === 0 && !this.activeTab;\n        }\n\n        return isActive;\n    }\n\n    private themeListener = (event: CustomEvent<Theme>) => {\n        this.theme = event.detail;\n    };\n}\n"]}

package/dist/collection/components/playground/playground.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=playground.types.js.map

package/dist/collection/components/playground/playground.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playground.types.js","sourceRoot":"","sources":["../../../src/components/playground/playground.types.ts"],"names":[],"mappings":"","sourcesContent":["export type PropsFactory = (name: string) => Record<string, unknown>;\n"]}