@limetech/kompendium 1.1.1

package/dist/collection/components/component/component.css

@@ -0,0 +1,383 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default padding */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a class attribute */
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img {
+  max-width: 100%;
+}
+
+/* Natural flow and rhythm in articles by default */
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+:root {
+  --width-nav-panel: 16rem;
+}
+
+p,
+a,
+li {
+  font-size: 0.9375rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 0.5rem;
+  font-weight: normal;
+  font-weight: 500;
+}
+
+h1 {
+  font-size: 2rem;
+  line-height: 2.25rem;
+  margin-top: 1.5rem;
+  letter-spacing: -0.0625rem;
+  font-weight: 400;
+}
+
+h2 {
+  font-size: 1.625rem;
+  line-height: 1.25rem;
+  margin-top: 1.25rem;
+  margin-bottom: 1rem;
+}
+
+h3 {
+  font-size: 1.375rem;
+  line-height: 1.5rem;
+  margin-top: 1rem;
+}
+
+h4 {
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+  margin-top: 1rem;
+}
+
+h5 {
+  font-size: 1.125rem;
+  line-height: 1.125rem;
+  margin-top: 0.75rem;
+}
+
+h6 {
+  font-size: 1rem;
+  font-variant: all-small-caps;
+  letter-spacing: 0.0625rem;
+}
+
+p,
+blockquote {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+p:only-child,
+blockquote:only-child {
+  margin-bottom: 0;
+}
+
+a {
+  transition: color 0.2s ease;
+  color: rgb(var(--kompendium-color-blue-default));
+  text-decoration: none;
+  border-radius: 0.125rem;
+}
+a:hover {
+  color: rgb(var(--kompendium-color-blue-light));
+}
+a:focus {
+  outline: none;
+}
+a:focus-visible {
+  outline: none;
+  box-shadow: var(--kompendium-shadow-depth-8-focused);
+}
+
+ul {
+  list-style: none;
+}
+ul li {
+  position: relative;
+  margin-left: 0.75rem;
+}
+ul li:before {
+  content: "";
+  position: absolute;
+  left: -0.5rem;
+  top: 0.625rem;
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 50%;
+  background-color: rgb(var(--kompendium-contrast-700));
+  display: block;
+}
+
+ol {
+  list-style: decimal inside;
+}
+
+ol,
+ul {
+  padding-left: 0;
+  margin-top: 0;
+}
+
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin: 0.9375rem 0 0.9375rem 1.875rem;
+  font-size: 90%;
+}
+
+li {
+  margin-bottom: 0.625rem;
+}
+
+th,
+td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid rgb(var(--kompendium-contrast-600));
+}
+
+th:first-child,
+td:first-child {
+  padding-left: 0;
+}
+
+th:last-child,
+td:last-child {
+  padding-right: 0;
+}
+
+hr {
+  margin: 1.75rem 0 2rem 0;
+  border-width: 0;
+  border-top: 1px solid rgb(var(--kompendium-contrast-600));
+}
+
+kbd {
+  font-family: var(--kompendium-font-code);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(var(--kompendium-contrast-1000));
+  background-color: rgb(var(--kompendium-contrast-200));
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: normal;
+  padding: 0.125rem 0.5rem;
+  margin: 0 0.25rem;
+  box-shadow: var(--kompendium-button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--kompendium-contrast-100), 0.5) inset;
+  border-radius: 0.25rem;
+  border-style: solid;
+  border-color: rgba(var(--kompendium-contrast-600), 0.8);
+  border-width: 0 1px 0.125rem 1px;
+}
+@media (prefers-color-scheme: dark) {
+  kbd:not([data-theme=force-light]) {
+    background-color: rgb(var(--kompendium-contrast-200));
+    color: rgb(var(--kompendium-contrast-1100));
+    border-color: rgba(var(--kompendium-contrast-500), 0.8);
+  }
+}
+kbd[data-theme=force-dark] {
+  background-color: rgb(var(--kompendium-contrast-200));
+  color: rgb(var(--kompendium-contrast-1100));
+  border-color: rgba(var(--kompendium-contrast-500), 0.8);
+}
+@media (prefers-color-scheme: dark) {
+  :host(:not([data-theme=force-light])) kbd {
+    background-color: rgb(var(--kompendium-contrast-200));
+    color: rgb(var(--kompendium-contrast-1100));
+    border-color: rgba(var(--kompendium-contrast-500), 0.8);
+  }
+}
+:host([data-theme=force-dark]) kbd {
+  background-color: rgb(var(--kompendium-contrast-200));
+  color: rgb(var(--kompendium-contrast-1100));
+  border-color: rgba(var(--kompendium-contrast-500), 0.8);
+}
+
+kompendium-playground {
+  width: 100%;
+}
+
+.docs-layout-section-heading {
+  transition: border-color 0.3s ease 0.05s;
+  padding-top: 2.5rem;
+  margin: 2.5rem 0 1.25rem 0;
+  border-top: 1px solid rgb(var(--kompendium-contrast-500));
+}
+.docs-layout-section-heading:before {
+  content: "";
+  width: 0.125rem;
+  height: 0.75rem;
+  display: inline-block;
+  background-color: rgba(var(--kompendium-color-code-blue), 0.4);
+  border-radius: 0.0625rem;
+  transform: translateX(-0.5rem);
+}
+
+.props-events-layout .markdown-props {
+  display: grid;
+  grid-gap: 1.25rem;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr 1fr;
+}
+
+@media (max-width: 800px) {
+  .props-events-layout .markdown-props {
+    grid-gap: 0.75rem;
+    grid-auto-flow: row;
+    grid-template-columns: unset;
+  }
+}
+.methods-layout {
+  border-radius: 0.375rem;
+  margin-bottom: 2.5rem;
+  background-color: rgb(var(--kompendium-contrast-400));
+}
+
+.methods-title {
+  margin: 0;
+  border-radius: 0.375rem 0.375rem 0 0;
+  padding: 0.75rem 1rem;
+  background-color: rgb(var(--kompendium-contrast-500));
+  font-size: 1.0625rem;
+}
+
+.methods-content {
+  display: grid;
+  grid-gap: 1.25rem;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr 1fr;
+  padding: 1rem 1.25rem 1.5rem 1.25rem;
+}
+
+.methods-returns {
+  padding: 1rem 1.25rem 1.5rem 1.25rem;
+  border-radius: 0 0 0.375rem 0.375rem;
+  border-top: 1px solid rgb(var(--kompendium-contrast-600));
+}
+.methods-returns h5 {
+  margin-top: 0;
+}
+
+@media (max-width: 800px) {
+  .methods-content {
+    grid-gap: 0.75rem;
+    grid-auto-flow: row;
+    grid-template-columns: unset;
+  }
+}
+.styles-layout {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 0 0.75rem;
+  border: solid rgb(var(--kompendium-contrast-500));
+  border-width: 1px 1px 0 1px;
+  padding: 0.5rem;
+  background-color: rgb(var(--kompendium-contrast-300));
+}
+.styles-layout:first-of-type {
+  border-top-right-radius: 0.375rem;
+  border-top-left-radius: 0.375rem;
+}
+.styles-layout:last-of-type {
+  border-bottom-right-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+  border-bottom-width: 1px;
+}
+.styles-layout:nth-of-type(odd) {
+  background-color: rgb(var(--kompendium-contrast-400));
+}
+
+.styles-title code {
+  font-family: var(--kompendium-font-code);
+  border-radius: 0.25rem;
+  border: 1px solid rgba(var(--kompendium-contrast-1100), 0.1);
+  font-size: 0.6875rem;
+  white-space: pre-wrap;
+  color: rgb(var(--kompendium-contrast-1100));
+  padding: 0.125rem 0.3125rem;
+  margin: 0 0.125rem;
+  background: rgba(var(--kompendium-contrast-1100), 0.05);
+}
+
+@media (max-width: 800px) {
+  .styles-layout {
+    grid-auto-flow: row;
+    grid-template-columns: unset;
+    grid-gap: 0.75rem 0;
+  }
+}
+:host {
+  display: block;
+}
+
+.docs kompendium-markdown {
+  display: block;
+  width: 100%;
+  max-width: 60rem;
+}

package/dist/collection/components/component/component.js

@@ -0,0 +1,191 @@
+import { h } from "@stencil/core";
+import { PropertyList } from "./templates/props";
+import { EventList } from "./templates/events";
+import { MethodList } from "./templates/methods";
+import { SlotList } from "./templates/slots";
+import { StyleList } from "./templates/style";
+import { ExampleList } from "./templates/examples";
+import negate from "lodash/negate";
+import { getRoute, scrollToElement } from "../anchor-scroll";
+export class KompendiumComponent {
+    constructor() {
+        this.scrollToOnNextUpdate = null;
+        this.handleRouteChange = this.handleRouteChange.bind(this);
+    }
+    connectedCallback() {
+        window.addEventListener('hashchange', this.handleRouteChange);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('hashchange', this.handleRouteChange);
+    }
+    componentDidLoad() {
+        const route = getRoute().split('#')[0];
+        scrollToElement(this.host.shadowRoot, route);
+    }
+    componentDidUpdate() {
+        if (this.scrollToOnNextUpdate) {
+            const route = this.scrollToOnNextUpdate.split('#')[0];
+            scrollToElement(this.host.shadowRoot, route);
+            this.scrollToOnNextUpdate = null;
+        }
+    }
+    handleRouteChange() {
+        this.scrollToOnNextUpdate = getRoute().split('#')[0];
+    }
+    render() {
+        const tag = this.match.params.name;
+        const component = findComponent(tag, this.docs);
+        return (h("article", { key: 'e36149fd654bbc9851c25d6e4b9bb5a34b84f0a7', class: "component" }, h("section", { key: '844f6154fa86b4f84e6eb2a73d7e7ff13491f594', class: "docs" }, this.renderDocs(tag, component))));
+    }
+    renderDocs(tag, component) {
+        let title = tag.split('-').slice(1).join(' ');
+        title = title[0].toLocaleUpperCase() + title.slice(1);
+        const examples = findExamples(component, this.docs);
+        const tags = component.docsTags
+            .filter(negate(isTag('slot')))
+            .filter(negate(isTag('exampleComponent')));
+        const schema = this.schemas.find((s) => s.$id === tag);
+        return [
+            h("h1", { id: this.getId() }, title),
+            h("kompendium-markdown", { text: component.docs }),
+            h("kompendium-taglist", { tags: tags }),
+            h(ExampleList, { examples: examples, id: this.getId('examples'), schema: schema, propsFactory: this.examplePropsFactory }),
+            h(PropertyList, { props: component.props, id: this.getId('properties') }),
+            h(EventList, { events: component.events, id: this.getId('events') }),
+            h(MethodList, { methods: component.methods, id: this.getId('methods') }),
+            h(SlotList, { slots: component.slots, id: this.getId('slots') }),
+            h(StyleList, { styles: component.styles, id: this.getId('styles') }),
+        ];
+    }
+    getId(name) {
+        const route = getRoute().split('#')[0].split('/').slice(0, 3).join('/');
+        return [route, name].filter((item) => !!item).join('/') + '/';
+    }
+    static get is() { return "kompendium-component"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["component.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "docs": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "JsonDocs",
+                    "resolved": "JsonDocs",
+                    "references": {
+                        "JsonDocs": {
+                            "location": "import",
+                            "path": "@stencil/core/internal",
+                            "id": "node_modules::JsonDocs"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The generated documentation data"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "schemas": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<Record<string, any>>",
+                    "resolved": "Record<string, any>[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Component schemas"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "match": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MatchResults",
+                    "resolved": "MatchResults",
+                    "references": {
+                        "MatchResults": {
+                            "location": "import",
+                            "path": "@limetech/stencil-router",
+                            "id": "node_modules::MatchResults"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Matched route parameters"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "examplePropsFactory": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PropsFactory",
+                    "resolved": "(name: string) => Record<string, unknown>",
+                    "references": {
+                        "PropsFactory": {
+                            "location": "import",
+                            "path": "../playground/playground.types",
+                            "id": "src/components/playground/playground.types.ts::PropsFactory"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Factory for creating props for example components"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+function findExamples(component, docs) {
+    return component.docsTags
+        .filter(isTag('exampleComponent'))
+        .map(findComponentByTag(docs));
+}
+function findComponent(tag, docs) {
+    return docs.components.find((doc) => doc.tag === tag);
+}
+const findComponentByTag = (docs) => (tag) => {
+    return docs.components.find((component) => component.tag === tag.text);
+};
+const isTag = (name) => (tag) => {
+    return tag.name === name;
+};
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/component/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\nimport {\n    JsonDocs,\n    JsonDocsComponent,\n    JsonDocsTag,\n} from '@stencil/core/internal';\nimport { MatchResults } from '@limetech/stencil-router';\nimport { PropertyList } from './templates/props';\nimport { EventList } from './templates/events';\nimport { MethodList } from './templates/methods';\nimport { SlotList } from './templates/slots';\nimport { StyleList } from './templates/style';\nimport { ExampleList } from './templates/examples';\nimport negate from 'lodash/negate';\nimport { PropsFactory } from '../playground/playground.types';\nimport { getRoute, scrollToElement } from '../anchor-scroll';\n\n@Component({\n    tag: 'kompendium-component',\n    shadow: true,\n    styleUrl: 'component.scss',\n})\nexport class KompendiumComponent {\n    /**\n     * The generated documentation data\n     */\n    @Prop()\n    public docs: JsonDocs;\n\n    /**\n     * Component schemas\n     */\n    @Prop()\n    public schemas: Array<Record<string, any>>;\n\n    /**\n     * Matched route parameters\n     */\n    @Prop()\n    public match: MatchResults;\n\n    /**\n     * Factory for creating props for example components\n     */\n    @Prop()\n    public examplePropsFactory: PropsFactory;\n\n    @Element()\n    private host: HTMLKompendiumComponentElement;\n\n    private scrollToOnNextUpdate: string = null;\n\n    constructor() {\n        this.handleRouteChange = this.handleRouteChange.bind(this);\n    }\n\n    protected connectedCallback(): void {\n        window.addEventListener('hashchange', this.handleRouteChange);\n    }\n\n    protected disconnectedCallback(): void {\n        window.removeEventListener('hashchange', this.handleRouteChange);\n    }\n\n    protected componentDidLoad(): void {\n        const route = getRoute().split('#')[0];\n        scrollToElement(this.host.shadowRoot, route);\n    }\n\n    protected componentDidUpdate(): void {\n        if (this.scrollToOnNextUpdate) {\n            const route = this.scrollToOnNextUpdate.split('#')[0];\n            scrollToElement(this.host.shadowRoot, route);\n            this.scrollToOnNextUpdate = null;\n        }\n    }\n\n    private handleRouteChange() {\n        this.scrollToOnNextUpdate = getRoute().split('#')[0];\n    }\n\n    public render(): HTMLElement {\n        const tag = this.match.params.name;\n        const component = findComponent(tag, this.docs);\n\n        return (\n            <article class=\"component\">\n                <section class=\"docs\">\n                    {this.renderDocs(tag, component)}\n                </section>\n            </article>\n        );\n    }\n\n    private renderDocs(tag: string, component: JsonDocsComponent) {\n        let title = tag.split('-').slice(1).join(' ');\n        title = title[0].toLocaleUpperCase() + title.slice(1);\n        const examples = findExamples(component, this.docs);\n        const tags = component.docsTags\n            .filter(negate(isTag('slot')))\n            .filter(negate(isTag('exampleComponent')));\n        const schema = this.schemas.find((s) => s.$id === tag);\n\n        return [\n            <h1 id={this.getId()}>{title}</h1>,\n            <kompendium-markdown text={component.docs} />,\n            <kompendium-taglist tags={tags} />,\n            <ExampleList\n                examples={examples}\n                id={this.getId('examples')}\n                schema={schema}\n                propsFactory={this.examplePropsFactory}\n            />,\n            <PropertyList\n                props={component.props}\n                id={this.getId('properties')}\n            />,\n            <EventList events={component.events} id={this.getId('events')} />,\n            <MethodList\n                methods={component.methods}\n                id={this.getId('methods')}\n            />,\n            <SlotList slots={component.slots} id={this.getId('slots')} />,\n            <StyleList styles={component.styles} id={this.getId('styles')} />,\n        ];\n    }\n\n    private getId(name?: string) {\n        const route = getRoute().split('#')[0].split('/').slice(0, 3).join('/');\n\n        return [route, name].filter((item) => !!item).join('/') + '/';\n    }\n}\n\nfunction findExamples(component: JsonDocsComponent, docs: JsonDocs) {\n    return component.docsTags\n        .filter(isTag('exampleComponent'))\n        .map(findComponentByTag(docs));\n}\n\nfunction findComponent(tag: string, docs: JsonDocs) {\n    return docs.components.find((doc) => doc.tag === tag);\n}\n\nconst findComponentByTag = (docs: JsonDocs) => (tag: JsonDocsTag) => {\n    return docs.components.find((component) => component.tag === tag.text);\n};\n\nconst isTag = (name: string) => (tag: JsonDocsTag) => {\n    return tag.name === name;\n};\n"]}

package/dist/collection/components/component/templates/events.js

@@ -0,0 +1,32 @@
+import { h } from "@stencil/core";
+export function EventList({ events, id, }) {
+    if (!events.length) {
+        return;
+    }
+    return [
+        h("h3", { class: "docs-layout-section-heading", id: id }, "Events"),
+        ...events.map(renderEvent),
+    ];
+}
+function renderEvent(event) {
+    const items = [
+        {
+            key: 'Detail',
+            value: event.detail,
+        },
+        {
+            key: 'Bubbles',
+            value: String(event.bubbles),
+        },
+        {
+            key: 'Cancelable',
+            value: String(event.cancelable),
+        },
+        {
+            key: 'Composed',
+            value: String(event.composed),
+        },
+    ];
+    return (h("div", { class: "props-events-layout" }, h("h4", null, event.event), h("kompendium-taglist", { tags: event.docsTags }), h("div", { class: "markdown-props" }, h("kompendium-markdown", { text: event.docs }), h("kompendium-proplist", { items: items }))));
+}
+//# sourceMappingURL=events.js.map

package/dist/collection/components/component/templates/events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../../src/components/component/templates/events.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,MAAM,UAAU,SAAS,CAAC,EACtB,MAAM,EACN,EAAE,GAIL;IACG,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACjB,OAAO;IACX,CAAC;IAED,OAAO;QACH,UAAI,KAAK,EAAC,6BAA6B,EAAC,EAAE,EAAE,EAAE,aAEzC;QACL,GAAG,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC;KAC7B,CAAC;AACN,CAAC;AAED,SAAS,WAAW,CAAC,KAAoB;IACrC,MAAM,KAAK,GAAmB;QAC1B;YACI,GAAG,EAAE,QAAQ;YACb,KAAK,EAAE,KAAK,CAAC,MAAM;SACtB;QACD;YACI,GAAG,EAAE,SAAS;YACd,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;SAC/B;QACD;YACI,GAAG,EAAE,YAAY;YACjB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC;SAClC;QACD;YACI,GAAG,EAAE,UAAU;YACf,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC;SAChC;KACJ,CAAC;IAEF,OAAO,CACH,WAAK,KAAK,EAAC,qBAAqB;QAC5B,cAAK,KAAK,CAAC,KAAK,CAAM;QACtB,0BAAoB,IAAI,EAAE,KAAK,CAAC,QAAQ,GAAI;QAC5C,WAAK,KAAK,EAAC,gBAAgB;YACvB,2BAAqB,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI;YACzC,2BAAqB,KAAK,EAAE,KAAK,GAAI,CACnC,CACJ,CACT,CAAC;AACN,CAAC","sourcesContent":["import { JsonDocsEvent } from '@stencil/core/internal';\nimport { h } from '@stencil/core';\nimport { ProplistItem } from '../../proplist/proplist';\n\nexport function EventList({\n    events,\n    id,\n}: {\n    id: string;\n    events: JsonDocsEvent[];\n}): HTMLElement[] {\n    if (!events.length) {\n        return;\n    }\n\n    return [\n        <h3 class=\"docs-layout-section-heading\" id={id}>\n            Events\n        </h3>,\n        ...events.map(renderEvent),\n    ];\n}\n\nfunction renderEvent(event: JsonDocsEvent) {\n    const items: ProplistItem[] = [\n        {\n            key: 'Detail',\n            value: event.detail,\n        },\n        {\n            key: 'Bubbles',\n            value: String(event.bubbles),\n        },\n        {\n            key: 'Cancelable',\n            value: String(event.cancelable),\n        },\n        {\n            key: 'Composed',\n            value: String(event.composed),\n        },\n    ];\n\n    return (\n        <div class=\"props-events-layout\">\n            <h4>{event.event}</h4>\n            <kompendium-taglist tags={event.docsTags} />\n            <div class=\"markdown-props\">\n                <kompendium-markdown text={event.docs} />\n                <kompendium-proplist items={items} />\n            </div>\n        </div>\n    );\n}\n"]}

package/dist/collection/components/component/templates/examples.js

@@ -0,0 +1,17 @@
+import { h } from "@stencil/core";
+export function ExampleList({ examples, id, schema, propsFactory, }) {
+    if (!examples.length) {
+        return;
+    }
+    return [
+        h("h3", { class: "docs-layout-section-heading", id: id }, "Examples"),
+        examples.map(renderExample(schema, propsFactory)),
+    ];
+}
+const renderExample = (schema, factory) => (example) => {
+    return (h("kompendium-playground", { component: example, schema: schema, propsFactory: factory }));
+};
+export const isExampleTag = (name) => (tag) => {
+    return tag.text.startsWith(name);
+};
+//# sourceMappingURL=examples.js.map

package/dist/collection/components/component/templates/examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.js","sourceRoot":"","sources":["../../../../src/components/component/templates/examples.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,MAAM,UAAU,WAAW,CAAC,EACxB,QAAQ,EACR,EAAE,EACF,MAAM,EACN,YAAY,GAMf;IACG,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;QACnB,OAAO;IACX,CAAC;IAED,OAAO;QACH,UAAI,KAAK,EAAC,6BAA6B,EAAC,EAAE,EAAE,EAAE,eAEzC;QACL,QAAQ,CAAC,GAAG,CAAC,aAAa,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;KACpD,CAAC;AACN,CAAC;AAED,MAAM,aAAa,GACf,CAAC,MAA2B,EAAE,OAAqB,EAAE,EAAE,CACvD,CAAC,OAA0B,EAAE,EAAE;IAC3B,OAAO,CACH,6BACI,SAAS,EAAE,OAAO,EAClB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,GACvB,CACL,CAAC;AACN,CAAC,CAAC;AAEN,MAAM,CAAC,MAAM,YAAY,GACrB,CAAC,IAAY,EAAE,EAAE,CACjB,CAAC,GAAgB,EAAW,EAAE;IAC1B,OAAO,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AACrC,CAAC,CAAC","sourcesContent":["import { JsonDocsComponent, JsonDocsTag } from '@stencil/core/internal';\nimport { h } from '@stencil/core';\nimport { PropsFactory } from '../../playground/playground.types';\n\nexport function ExampleList({\n    examples,\n    id,\n    schema,\n    propsFactory,\n}: {\n    id: string;\n    examples: JsonDocsComponent[];\n    schema: Record<string, any>;\n    propsFactory?: PropsFactory;\n}): HTMLElement[] {\n    if (!examples.length) {\n        return;\n    }\n\n    return [\n        <h3 class=\"docs-layout-section-heading\" id={id}>\n            Examples\n        </h3>,\n        examples.map(renderExample(schema, propsFactory)),\n    ];\n}\n\nconst renderExample =\n    (schema: Record<string, any>, factory: PropsFactory) =>\n    (example: JsonDocsComponent) => {\n        return (\n            <kompendium-playground\n                component={example}\n                schema={schema}\n                propsFactory={factory}\n            />\n        );\n    };\n\nexport const isExampleTag =\n    (name: string) =>\n    (tag: JsonDocsTag): boolean => {\n        return tag.text.startsWith(name);\n    };\n"]}