@limetech/kompendium 1.1.1

package/dist/collection/components/markdown/markdown.js

@@ -0,0 +1,83 @@
+import { h } from "@stencil/core";
+import { markdownToHtml } from "../../kompendium/markdown";
+import { getTypes } from "./markdown-types";
+import { scrollToAnchor } from "../anchor-scroll";
+/**
+ * This component renders markdown
+ * @exampleComponent kompendium-example-markdown
+ */
+export class Markdown {
+    constructor() {
+        this.renderSeq = 0;
+        this.handleHashChange = this.handleHashChange.bind(this);
+    }
+    connectedCallback() {
+        window.addEventListener('hashchange', this.handleHashChange);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('hashchange', this.handleHashChange);
+    }
+    componentDidLoad() {
+        this.renderMarkdown();
+    }
+    componentDidUpdate() {
+        this.renderMarkdown();
+    }
+    handleHashChange() {
+        scrollToAnchor(this.host.shadowRoot);
+    }
+    async renderMarkdown() {
+        const renderSeq = ++this.renderSeq;
+        const currentText = this.text;
+        const types = getTypes();
+        const file = await markdownToHtml(currentText, types);
+        // Abort if a newer render has started or text has changed
+        if (renderSeq !== this.renderSeq || currentText !== this.text) {
+            return;
+        }
+        this.host.shadowRoot.querySelector('#root').innerHTML =
+            file === null || file === void 0 ? void 0 : file.toString();
+        // After content renders, scroll to anchor if present in URL
+        scrollToAnchor(this.host.shadowRoot);
+    }
+    render() {
+        return h("div", { key: 'a234f58eaafe3daab181a26ec522739b62109f1a', id: "root" });
+    }
+    static get is() { return "kompendium-markdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["markdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["markdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to render"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=markdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD;;;GAGG;AAMH,MAAM,OAAO,QAAQ;IAYjB;QAXQ,cAAS,GAAG,CAAC,CAAC;QAYlB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC5D;IAES,iBAAiB;QACvB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACjE,CAAC;IAES,oBAAoB;QAC1B,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACpE,CAAC;IAES,gBAAgB;QACtB,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAES,kBAAkB;QACxB,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAEO,gBAAgB;QACpB,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC;IAEO,KAAK,CAAC,cAAc;QACxB,MAAM,SAAS,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC;QACnC,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;QAC9B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;QACzB,MAAM,IAAI,GAAG,MAAM,cAAc,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QAEtD,0DAA0D;QAC1D,IAAI,SAAS,KAAK,IAAI,CAAC,SAAS,IAAI,WAAW,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;YAC5D,OAAO;QACX,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS;YACjD,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,EAAE,CAAC;QAErB,4DAA4D;QAC5D,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC;IAED,MAAM;QACF,OAAO,4DAAK,EAAE,EAAC,MAAM,GAAG,CAAC;IAC7B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\nimport { markdownToHtml } from '../../kompendium/markdown';\nimport { getTypes } from './markdown-types';\nimport { scrollToAnchor } from '../anchor-scroll';\n\n/**\n * This component renders markdown\n * @exampleComponent kompendium-example-markdown\n */\n@Component({\n    tag: 'kompendium-markdown',\n    shadow: true,\n    styleUrl: 'markdown.scss',\n})\nexport class Markdown {\n    private renderSeq = 0;\n\n    /**\n     * The text to render\n     */\n    @Prop()\n    public text: string;\n\n    @Element()\n    private host: HTMLKompendiumMarkdownElement;\n\n    constructor() {\n        this.handleHashChange = this.handleHashChange.bind(this);\n    }\n\n    protected connectedCallback(): void {\n        window.addEventListener('hashchange', this.handleHashChange);\n    }\n\n    protected disconnectedCallback(): void {\n        window.removeEventListener('hashchange', this.handleHashChange);\n    }\n\n    protected componentDidLoad(): void {\n        this.renderMarkdown();\n    }\n\n    protected componentDidUpdate(): void {\n        this.renderMarkdown();\n    }\n\n    private handleHashChange(): void {\n        scrollToAnchor(this.host.shadowRoot);\n    }\n\n    private async renderMarkdown() {\n        const renderSeq = ++this.renderSeq;\n        const currentText = this.text;\n        const types = getTypes();\n        const file = await markdownToHtml(currentText, types);\n\n        // Abort if a newer render has started or text has changed\n        if (renderSeq !== this.renderSeq || currentText !== this.text) {\n            return;\n        }\n\n        this.host.shadowRoot.querySelector('#root').innerHTML =\n            file?.toString();\n\n        // After content renders, scroll to anchor if present in URL\n        scrollToAnchor(this.host.shadowRoot);\n    }\n\n    render(): HTMLElement {\n        return <div id=\"root\" />;\n    }\n}\n"]}

package/dist/collection/components/navigation/navigation.css

@@ -0,0 +1,403 @@
+/* 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;
+}
+
+:host {
+  display: block;
+  font-family: var(--kompendium-font-primary);
+  --size-show-nav-panel-button: 2.25rem;
+}
+
+header a {
+  text-decoration: none;
+  color: unset;
+}
+
+.nav-panel-scrim {
+  display: none;
+  z-index: 99;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.nav-panel {
+  transition: transform 0.44s cubic-bezier(1, 0.12, 0.2, 0.88), background-color 0.3s ease;
+  width: var(--width-nav-panel);
+  height: 100vh;
+  position: fixed;
+  background-color: rgb(var(--kompendium-contrast-400));
+  display: flex;
+  flex-direction: column;
+}
+.nav-panel .panel-header {
+  transition: border 0.3s ease;
+  flex-direction: row;
+  padding: 1rem;
+  border-bottom: 1px solid rgb(var(--kompendium-contrast-600));
+  margin-bottom: 0.5rem;
+}
+.nav-panel .panel-list {
+  overflow-y: auto;
+  list-style: none;
+}
+.nav-panel .panel-list:not(.chapters) {
+  padding: 0 0.75rem 2rem 0.75rem;
+}
+.nav-panel .panel-list li {
+  margin-left: 0;
+}
+.nav-panel .panel-list li::before {
+  content: none;
+  display: none;
+}
+.nav-panel.display-nav-panel {
+  z-index: 100;
+}
+
+.branding-and-mode {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+.branding-and-mode h1 {
+  all: unset;
+  font-size: 1rem;
+  font-weight: normal;
+  color: rgb(var(--kompendium-contrast-900));
+  flex-grow: 1;
+  line-height: 1;
+}
+.branding-and-mode a {
+  border-radius: 0.125rem;
+}
+.branding-and-mode a:focus {
+  outline: none;
+}
+.branding-and-mode a:focus-visible {
+  outline: none;
+  box-shadow: var(--kompendium-shadow-depth-8-focused);
+}
+.branding-and-mode kompendium-darkmode-switch {
+  position: relative;
+  flex-shrink: 0;
+  margin-left: 0.75rem;
+  padding-left: 0.5rem;
+}
+.branding-and-mode kompendium-darkmode-switch:before {
+  transition: background-color 0.3s ease;
+  content: "";
+  position: absolute;
+  background-color: rgb(var(--kompendium-contrast-600));
+  border-radius: 0.5rem;
+  height: 1.25rem;
+  width: 0.125rem;
+  left: 0.0625rem;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+.powered-by {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  font-size: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  background-color: rgba(var(--kompendium-contrast-100), 0.4);
+  backdrop-filter: blur(0.25rem);
+  width: 100%;
+}
+.powered-by p {
+  padding-left: 1.75rem;
+  font-size: 0.75rem;
+  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 148 80" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path fill="none" d="M-.003 0h148v80h-148z"/><path d="M148.008 20c0-11.038-8.96-20-19.999-20H19.977c-11.038 0-20 8.962-20 20v40c0 11.038 8.962 20 20 20H128.01c11.038 0 20-8.962 20-20V20z" fill="rgb(36,71,88)"/><path d="M26.564 43.651v14.604H19.26V43.65h7.304zm0-7.302H19.26V21.745h7.304V36.35z" fill="rgb(255,160,0)"/><path d="M106.82 58.254v-7.303h7.304V43.65h7.304v-7.301h-7.304v-7.303h-7.304v-7.302h7.304v7.302h7.304v7.303h7.293v7.301h-7.293v7.302h-7.304v7.303h-7.304zm-43.812 0v-7.303h7.304V43.65h7.304v-7.301h7.303v-7.303h7.293v-7.302h7.304v7.302h-7.304v7.303H84.92v7.301h-7.303v7.302h-7.304v7.303h-7.304zm-14.597 0v-7.303h-7.304V43.65h-7.304v-7.301h7.304v-7.303h7.304v-7.302h7.293v7.302H48.41v7.303h-7.304v7.301h7.304v7.302h7.293v7.303H48.41z" fill="rgb(0,200,82)"/></svg>');
+  background-position: left center;
+  background-repeat: no-repeat;
+  background-size: 1.5rem;
+}
+.powered-by a {
+  transition: color 0.2s ease;
+  color: rgb(var(--kompendium-color-blue-default));
+  text-decoration: none;
+  font-size: 0.75rem;
+}
+.powered-by a:hover {
+  color: rgb(var(--kompendium-color-blue-light));
+}
+
+.nav-panel__responsive-menu {
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  box-shadow: var(--kompendium-button-shadow-normal);
+}
+.nav-panel__responsive-menu:hover {
+  box-shadow: var(--kompendium-button-shadow-hovered);
+}
+.nav-panel__responsive-menu:active {
+  box-shadow: var(--kompendium-button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.nav-panel__responsive-menu:focus {
+  outline: none;
+}
+.nav-panel__responsive-menu:focus-visible {
+  outline: none;
+  box-shadow: var(--kompendium-shadow-depth-8-focused);
+}
+.nav-panel__responsive-menu {
+  transition: all 0.2s ease;
+  display: none;
+  cursor: pointer;
+  position: absolute;
+  top: 0.75rem;
+  right: calc(var(--size-show-nav-panel-button) * -1 - 1rem);
+  width: var(--size-show-nav-panel-button);
+  height: var(--size-show-nav-panel-button);
+  margin: 0.25rem;
+  border-radius: 50%;
+  text-align: center;
+  font-weight: bold;
+  background-color: rgba(var(--kompendium-contrast-200), 0.7);
+  backdrop-filter: blur(0.25rem);
+  color: rgb(var(--kompendium-contrast-900));
+}
+.nav-panel__responsive-menu span {
+  transition: background-color 0.2s ease, transform 0.2s ease 0.3s, opacity 0.15s ease 0.3s;
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  height: 0.125rem;
+  width: 1rem;
+  border-radius: 0.25rem;
+  background-color: rgb(var(--kompendium-contrast-900));
+}
+.nav-panel__responsive-menu span:nth-child(1) {
+  top: 0.75rem;
+}
+.nav-panel__responsive-menu span:nth-child(2), .nav-panel__responsive-menu span:nth-child(3) {
+  top: 0;
+  bottom: 0;
+}
+.nav-panel__responsive-menu span:nth-child(4) {
+  bottom: 0.75rem;
+}
+.nav-panel__responsive-menu:hover span {
+  background-color: rgb(var(--kompendium-contrast-1200));
+}
+
+@media (max-width: 1000px) {
+  .nav-panel-scrim.display-nav-panel {
+    display: block;
+  }
+  .nav-panel {
+    transform: translate3d(calc(var(--width-nav-panel) * -1), 0, 0);
+  }
+  .nav-panel.display-nav-panel {
+    transform: translate3d(0, 0, 0);
+    box-shadow: 0 0.09375rem 0.225rem 0 rgba(0, 0, 0, 0.232), 0 0.01875rem 0.05625rem 0 rgba(0, 0, 0, 0.208);
+  }
+  .nav-panel.display-nav-panel .nav-panel__responsive-menu {
+    right: calc(var(--size-show-nav-panel-button) * -1 - 0.3125rem);
+    border-radius: 0 0.5rem 0.5rem 0;
+  }
+  .nav-panel.display-nav-panel .nav-panel__responsive-menu span:nth-child(1), .nav-panel.display-nav-panel .nav-panel__responsive-menu span:nth-child(4) {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+  .nav-panel.display-nav-panel .nav-panel__responsive-menu span:nth-child(2) {
+    transform: rotate(45deg);
+  }
+  .nav-panel.display-nav-panel .nav-panel__responsive-menu span:nth-child(3) {
+    transform: rotate(-45deg);
+  }
+  .nav-panel__responsive-menu {
+    display: block;
+  }
+}
+.panel-item {
+  transition: opacity 0.2s ease;
+  width: 100%;
+  border-radius: 0.375rem;
+}
+.panel-item.active {
+  background-color: rgb(var(--kompendium-contrast-100), 0.5);
+}
+
+.panel-link {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr 1.75rem;
+  line-height: 1.75rem;
+  color: rgb(var(--kompendium-contrast-900));
+  text-decoration: none;
+  border-radius: 0.375rem;
+}
+.panel-link:hover, .panel-link.active {
+  color: rgb(var(--kompendium-color-blue-default));
+}
+.panel-link.active svg {
+  transform: scale(0.64) rotate(-90deg);
+}
+.panel-link:focus {
+  outline: none;
+}
+.panel-link:focus-visible {
+  outline: none;
+  box-shadow: var(--kompendium-shadow-depth-8-focused);
+}
+.panel-link svg {
+  visibility: hidden;
+  transition: transform 0.2s ease;
+  transform: scale(0.64) rotate(90deg);
+  height: 2rem;
+}
+.panel-link.has-children svg {
+  visibility: visible;
+}
+
+.link-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+  padding-left: 0.5rem;
+}
+
+.chapters {
+  height: 0;
+}
+.chapters > .panel-item {
+  padding: 0 0.5rem;
+}
+.chapters:not(.active) {
+  visibility: hidden;
+}
+.chapters.active {
+  transition: height 0.2s ease;
+  height: 100%;
+}
+.chapters.active .panel-item {
+  opacity: 1;
+  transition-delay: 0.2s;
+}
+.chapters.active .panel-item:nth-child(1) {
+  transition-delay: 0s;
+}
+.chapters.active .panel-item:nth-child(2) {
+  transition-delay: 0.04s;
+}
+.chapters.active .panel-item:nth-child(3) {
+  transition-delay: 0.06s;
+}
+.chapters.active .panel-item:nth-child(4) {
+  transition-delay: 0.08s;
+}
+.chapters.active .panel-item:nth-child(5) {
+  transition-delay: 0.1s;
+}
+.chapters.active .panel-item:nth-child(6) {
+  transition-delay: 0.12s;
+}
+.chapters.active .panel-item:nth-child(7) {
+  transition-delay: 0.14s;
+}
+.chapters.active .panel-item:nth-child(8) {
+  transition-delay: 0.15s;
+}
+.chapters.active .panel-item:nth-child(9) {
+  transition-delay: 0.16s;
+}
+.chapters.active .panel-item:nth-child(10) {
+  transition-delay: 0.17s;
+}
+.chapters.active .panel-item:nth-child(11) {
+  transition-delay: 0.18s;
+}
+.chapters.active .panel-item:nth-child(12) {
+  transition-delay: 0.19s;
+}
+.chapters.active .panel-item:last-child {
+  margin-bottom: 0.5rem;
+}
+.chapters .panel-link.has-children svg {
+  visibility: hidden;
+}
+.chapters .panel-item {
+  opacity: 0;
+}
+.chapters .panel-item .chapters {
+  font-size: 0.8125rem;
+  padding-left: 0.5rem;
+}
+.chapters .panel-item .chapters:first-child {
+  margin-top: 0.25rem;
+}

package/dist/collection/components/navigation/navigation.js

@@ -0,0 +1,184 @@
+import { h } from "@stencil/core";
+/**
+ * @private
+ */
+export class Navigation {
+    constructor() {
+        this.route = '';
+        this.displayNavPanel = false;
+        this.toggleMenu = () => {
+            this.displayNavPanel = !this.displayNavPanel;
+        };
+        this.stopPropagationOfNavClick = (event) => {
+            event.stopPropagation();
+        };
+        this.setRoute = this.setRoute.bind(this);
+        this.renderMenuItem = this.renderMenuItem.bind(this);
+    }
+    connectedCallback() {
+        window.addEventListener('hashchange', this.setRoute);
+        this.setRoute();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('hashchange', this.setRoute);
+    }
+    setRoute() {
+        this.route = location.hash.substr(1);
+    }
+    render() {
+        return [
+            h("div", { key: '0abf57dba46d2c55f777e6b0a62756f1531b716a', class: {
+                    'nav-panel-scrim': true,
+                    'display-nav-panel': this.displayNavPanel,
+                }, onClick: this.toggleMenu }),
+            h("nav", { key: '47f1e62abae92f0ee5a90a980f79b5cec0508364', class: {
+                    'nav-panel': true,
+                    'display-nav-panel': this.displayNavPanel,
+                }, onClick: this.stopPropagationOfNavClick }, h("a", { key: '25fd2d738007fc596447cf4ac0a2bbbcf92df332', class: "nav-panel__responsive-menu", onClick: this.toggleMenu }, h("span", { key: '2b4056f7793e879a86bd0ed40ce45366d891cf5a' }), h("span", { key: 'c2174de261be61fa807e8b6dadcf6b7119bbec30' }), h("span", { key: 'd755597e3c961b057f7ed4cb042aa45c8ca336c1' }), h("span", { key: 'a3442946e847e5b870afc0dcce8baf47cc4fb03a' })), h("header", { key: '46a15de390a19d9cb9b0bd8973e82b4c33bb6d62', class: "panel-header" }, h("div", { key: '3c280f8409cef9848c3e58c6ac907a4e6ae53a8e', class: "branding-and-mode" }, h("h1", { key: 'c38675cafe5bdf1a119a3e06cdca78f5d5ad5b25' }, this.renderHeader()), h("kompendium-darkmode-switch", { key: 'ec6564ee68633fffabc3deecf34a09d431d7634a' })), h("kompendium-search", { key: '8aa459ff257cc6a1adb726ca4b6b4cdf397ccb57', index: this.index })), this.renderChapters(this.menu)),
+        ];
+    }
+    renderHeader() {
+        let content = this.header;
+        if (this.logo) {
+            content = h("img", { alt: this.header, src: this.logo });
+        }
+        return h("a", { href: "#" }, content);
+    }
+    renderChapters(menu) {
+        if (!menu || !menu.length) {
+            return;
+        }
+        return (h("ul", { class: "panel-list" }, menu.map(this.renderMenuItem), h("div", { class: "powered-by" }, h("p", null, "Powered by\u00A0", h("a", { href: "https://github.com/jgroth/kompendium" }, "Kompendium")))));
+    }
+    renderMenuItem(item) {
+        const itemClassList = {
+            active: this.isRouteActive(item.path),
+            'panel-item': true,
+        };
+        const chapterClassList = {
+            active: this.isRouteActive(item.path),
+            chapters: true,
+            'panel-list': true,
+        };
+        const chapters = item.children || [];
+        const anchorClassList = {
+            'panel-link': true,
+            active: this.isRouteActive(item.path),
+            'has-children': !!chapters.length,
+        };
+        const anchorAdditionalProps = {};
+        if (!chapters.length) {
+            anchorAdditionalProps.onClick = this.toggleMenu;
+        }
+        return (h("li", { class: itemClassList }, h("a", { class: anchorClassList, href: '#' + item.path, ...anchorAdditionalProps }, h("span", { class: "link-text" }, item.title), h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, h("path", { fill: "none", d: "M0 0h24v24H0z" }), h("path", { id: "arrow", d: "M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z", fill: "currentColor" }))), h("ul", { class: chapterClassList }, chapters.map(this.renderMenuItem))));
+    }
+    isRouteActive(route) {
+        return this.route.startsWith(route);
+    }
+    static get is() { return "kompendium-navigation"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["navigation.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["navigation.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "menu": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MenuItem[]",
+                    "resolved": "MenuItem[]",
+                    "references": {
+                        "MenuItem": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::MenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The menu to display"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title to display at the top of the navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header"
+            },
+            "logo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional logo to display instead of the header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo"
+            },
+            "index": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Index containing searchable documents"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "route": {},
+            "displayNavPanel": {}
+        };
+    }
+}
+// function hasContent(item: MenuItem) {
+//     return item.children?.length > 0;
+// }
+//# sourceMappingURL=navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../src/components/navigation/navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { MenuItem } from '../../types';\n\n/**\n * @private\n */\n@Component({\n    tag: 'kompendium-navigation',\n    styleUrl: 'navigation.scss',\n    shadow: true,\n})\nexport class Navigation {\n    /**\n     * The menu to display\n     */\n    @Prop()\n    public menu: MenuItem[];\n\n    /**\n     * Title to display at the top of the navigation\n     */\n    @Prop()\n    public header: string;\n\n    /**\n     * Optional logo to display instead of the header\n     */\n    @Prop()\n    public logo: string;\n\n    /**\n     * Index containing searchable documents\n     */\n    @Prop()\n    public index: any;\n\n    @State()\n    private route = '';\n\n    @State()\n    private displayNavPanel = false;\n\n    constructor() {\n        this.setRoute = this.setRoute.bind(this);\n        this.renderMenuItem = this.renderMenuItem.bind(this);\n    }\n\n    protected connectedCallback(): void {\n        window.addEventListener('hashchange', this.setRoute);\n        this.setRoute();\n    }\n\n    protected disconnectedCallback(): void {\n        window.removeEventListener('hashchange', this.setRoute);\n    }\n\n    private setRoute() {\n        this.route = location.hash.substr(1);\n    }\n\n    public render(): HTMLElement[] {\n        return [\n            <div\n                class={{\n                    'nav-panel-scrim': true,\n                    'display-nav-panel': this.displayNavPanel,\n                }}\n                onClick={this.toggleMenu}\n            ></div>,\n            <nav\n                class={{\n                    'nav-panel': true,\n                    'display-nav-panel': this.displayNavPanel,\n                }}\n                onClick={this.stopPropagationOfNavClick}\n            >\n                <a class=\"nav-panel__responsive-menu\" onClick={this.toggleMenu}>\n                    <span></span>\n                    <span></span>\n                    <span></span>\n                    <span></span>\n                </a>\n                <header class=\"panel-header\">\n                    <div class=\"branding-and-mode\">\n                        <h1>{this.renderHeader()}</h1>\n                        <kompendium-darkmode-switch />\n                    </div>\n                    <kompendium-search index={this.index} />\n                </header>\n                {this.renderChapters(this.menu)}\n            </nav>,\n        ];\n    }\n\n    private renderHeader() {\n        let content = this.header;\n\n        if (this.logo) {\n            content = <img alt={this.header} src={this.logo} />;\n        }\n\n        return <a href=\"#\">{content}</a>;\n    }\n\n    private toggleMenu = () => {\n        this.displayNavPanel = !this.displayNavPanel;\n    };\n\n    private renderChapters(menu: MenuItem[]) {\n        if (!menu || !menu.length) {\n            return;\n        }\n\n        return (\n            <ul class=\"panel-list\">\n                {menu.map(this.renderMenuItem)}\n                <div class=\"powered-by\">\n                    <p>\n                        Powered by&nbsp;\n                        <a href=\"https://github.com/jgroth/kompendium\">\n                            Kompendium\n                        </a>\n                    </p>\n                </div>\n            </ul>\n        );\n    }\n\n    private renderMenuItem(item: MenuItem) {\n        const itemClassList = {\n            active: this.isRouteActive(item.path),\n            'panel-item': true,\n        };\n        const chapterClassList = {\n            active: this.isRouteActive(item.path),\n            chapters: true,\n            'panel-list': true,\n        };\n        const chapters = item.children || [];\n        const anchorClassList = {\n            'panel-link': true,\n            active: this.isRouteActive(item.path),\n            'has-children': !!chapters.length,\n        };\n        const anchorAdditionalProps: any = {};\n        if (!chapters.length) {\n            anchorAdditionalProps.onClick = this.toggleMenu;\n        }\n\n        return (\n            <li class={itemClassList}>\n                <a\n                    class={anchorClassList}\n                    href={'#' + item.path}\n                    {...anchorAdditionalProps}\n                >\n                    <span class=\"link-text\">{item.title}</span>\n                    <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 24 24\"\n                        width=\"24\"\n                        height=\"24\"\n                    >\n                        <path fill=\"none\" d=\"M0 0h24v24H0z\" />\n                        <path\n                            id=\"arrow\"\n                            d=\"M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z\"\n                            fill=\"currentColor\"\n                        />\n                    </svg>\n                </a>\n                <ul class={chapterClassList}>\n                    {chapters.map(this.renderMenuItem)}\n                </ul>\n            </li>\n        );\n    }\n\n    private isRouteActive(route: string) {\n        return this.route.startsWith(route);\n    }\n\n    private stopPropagationOfNavClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n}\n\n// function hasContent(item: MenuItem) {\n//     return item.children?.length > 0;\n// }\n"]}