@limetech/kompendium 1.1.1

package/dist/collection/components/proplist/proplist.css

@@ -0,0 +1,334 @@
+/* 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;
+  }
+}
+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);
+}
+
+:host {
+  display: block;
+}
+
+pre,
+code {
+  font-family: var(--kompendium-font-code);
+  border-radius: 0.25rem;
+  font-size: 0.6875rem;
+}
+pre a,
+code a {
+  font-size: 0.6875rem;
+}
+
+code {
+  background: rgba(var(--kompendium-contrast-1100), 0.05);
+  border: 1px solid rgba(var(--kompendium-contrast-1100), 0.1);
+  padding: 0.125rem 0.3125rem;
+  margin: 0 0.125rem;
+  white-space: pre-wrap;
+  color: rgb(var(--kompendium-contrast-1100));
+}
+
+pre > code {
+  display: block;
+  padding: 0.625rem 0.6375rem;
+  white-space: pre-wrap;
+}
+
+.value--false code {
+  color: rgb(var(--kompendium-color-code-magenta));
+  border-color: rgba(var(--kompendium-color-code-magenta), 0.2);
+  background-color: rgba(var(--kompendium-color-code-magenta), 0.1);
+}
+
+.value--true code {
+  color: rgb(var(--kompendium-color-code-green-dark));
+  border-color: rgba(var(--kompendium-color-code-green-dark), 0.2);
+  background-color: rgba(var(--kompendium-color-code-green-dark), 0.1);
+}
+
+dl {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: 1fr;
+  margin-bottom: 2rem;
+  border: 1px solid rgb(var(--kompendium-contrast-500));
+  border-radius: 0.375rem;
+  background-color: rgb(var(--kompendium-contrast-300));
+}
+dl dt,
+dl dd {
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+}
+dl dt:nth-of-type(even),
+dl dd:nth-of-type(even) {
+  background-color: rgb(var(--kompendium-contrast-400));
+}
+dl dt:first-child {
+  border-top-left-radius: 0.375rem;
+}
+dl dt:last-child {
+  border-bottom-left-radius: 0.375rem;
+}
+dl dd:first-child {
+  border-top-right-radius: 0.375rem;
+}
+dl dd:last-child {
+  border-bottom-right-radius: 0.375rem;
+}
+
+dl,
+dt,
+dd {
+  transition: background-color 0.3s ease 0.05s, border-color 0.3s ease 0.05s;
+}

package/dist/collection/components/proplist/proplist.js

@@ -0,0 +1,53 @@
+import { h } from "@stencil/core";
+export class Proplist {
+    render() {
+        return h("dl", { key: 'e0d431f2ef5b105af7436d0a9b46a3ad2886a96b' }, this.items.map(this.renderProperty));
+    }
+    renderProperty(property) {
+        const { key, value } = property;
+        return [
+            h("dt", null, key),
+            h("dd", { class: `value--${value}` }, h("kompendium-markdown", { text: `\`${value}\`` })),
+        ];
+    }
+    static get is() { return "kompendium-proplist"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["proplist.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["proplist.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ProplistItem[]",
+                    "resolved": "ProplistItem[]",
+                    "references": {
+                        "ProplistItem": {
+                            "location": "local",
+                            "path": "/private/tmp/kompendium/src/components/proplist/proplist.tsx",
+                            "id": "src/components/proplist/proplist.tsx::ProplistItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "List of properties"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=proplist.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"proplist.js","sourceRoot":"","sources":["../../../src/components/proplist/proplist.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAYnD,MAAM,OAAO,QAAQ;IAOjB,MAAM;QACF,OAAO,6DAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAM,CAAC;IAC1D,CAAC;IAEO,cAAc,CAAC,QAAsB;QACzC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC;QAEhC,OAAO;YACH,cAAK,GAAG,CAAM;YACd,UAAI,KAAK,EAAE,UAAU,KAAK,EAAE;gBACxB,2BAAqB,IAAI,EAAE,KAAK,KAAK,IAAI,GAAI,CAC5C;SACR,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\nexport interface ProplistItem {\n    key: string;\n    value: string;\n}\n\n@Component({\n    tag: 'kompendium-proplist',\n    shadow: true,\n    styleUrl: 'proplist.scss',\n})\nexport class Proplist {\n    /**\n     * List of properties\n     */\n    @Prop()\n    public items: ProplistItem[];\n\n    render(): HTMLElement {\n        return <dl>{this.items.map(this.renderProperty)}</dl>;\n    }\n\n    private renderProperty(property: ProplistItem) {\n        const { key, value } = property;\n\n        return [\n            <dt>{key}</dt>,\n            <dd class={`value--${value}`}>\n                <kompendium-markdown text={`\\`${value}\\``} />\n            </dd>,\n        ];\n    }\n}\n"]}

package/dist/collection/components/search/search.css

@@ -0,0 +1,183 @@
+/* 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;
+  }
+}
+:host {
+  display: block;
+}
+
+:host(:focus) .result.has-results,
+:host(:focus-within) .result.has-results {
+  display: block;
+}
+
+@keyframes display-search-results {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -1.25rem, -1rem) rotateX(10deg);
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, 0, 0) rotateX(0);
+  }
+}
+.search-box {
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  perspective: 60rem;
+}
+.search-box .result.has-results {
+  animation: display-search-results 0.28s ease-out forwards;
+  position: absolute;
+  background: rgb(var(--kompendium-contrast-200));
+  padding: 0.5rem;
+  margin-top: 2rem;
+  width: 100%;
+  border-radius: 5px;
+  box-shadow: var(--kompendium-shadow-depth-16);
+  display: none;
+  max-height: calc(100vh - 6rem);
+  overflow-y: auto;
+}
+.search-box .result.has-results li a {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+}
+.search-box .result.has-results li a:hover {
+  box-shadow: var(--kompendium-button-shadow-hovered);
+}
+.search-box .result.has-results li a:active {
+  box-shadow: var(--kompendium-button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.search-box .result.has-results li a:focus {
+  outline: none;
+}
+.search-box .result.has-results li a:focus-visible {
+  outline: none;
+  box-shadow: var(--kompendium-shadow-depth-8-focused);
+}
+.search-box .result.has-results li a {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.25rem;
+}
+.search-box .result.has-results li:hover a {
+  background: rgb(var(--kompendium-contrast-100));
+}
+
+input {
+  transition: background-color 0.2s ease;
+  border: 0;
+  border-radius: 0.25rem;
+  padding: 0 0.25rem 0 2.25rem;
+  color: rgb(var(--kompendium-contrast-1200));
+  height: 2rem;
+  line-height: 2rem;
+  -webkit-appearance: textfield;
+  background-color: rgb(var(--kompendium-contrast-300));
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" clip-rule="evenodd" viewBox="0 0 400 400"><defs/><path fill="none" d="M0 0h400v400H0z"/><path d="M275.621 258.31l-16.962 16.979 50.965 50.964.008.009c4.637 4.637 12.268 4.637 16.905 0l.032-.033c4.687-4.687 4.642-12.33.025-16.946l-50.964-50.965-.009-.008z" fill="rgb(48,48,66)"/><circle cx="200" cy="200" r="99.5" fill="rgb(33,150,243)" fill-opacity=".3" stroke="rgb(48,48,66)" stroke-width="13.27" transform="translate(19.096 19.096) scale(.90452)"/><ellipse cx="163.443" cy="186.777" rx="32.324" ry="22.133" fill="rgb(255,255,255)" fill-opacity=".3" transform="rotate(-45 128.405 173.5)"/></svg>');
+  background-repeat: no-repeat;
+  background-position: left center;
+}
+input::placeholder {
+  color: rgb(var(--kompendium-contrast-800));
+}
+input:active, input:focus, input:hover {
+  background-color: rgb(var(--kompendium-contrast-200));
+}
+input:focus {
+  outline: none;
+}
+input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  transition: background-color 0.2s ease;
+  height: 1.25rem;
+  width: 1.25rem;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: rgb(var(--kompendium-contrast-800));
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 0.75rem;
+  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs/><path fill='rgb(255,255,255)' d='M7.219 5.781L5.78 7.22 14.563 16 5.78 24.781 7.22 26.22 16 17.437l8.781 8.782 1.438-1.438L17.437 16l8.782-8.781L24.78 5.78 16 14.563z'/></svg>");
+}
+input::-webkit-search-cancel-button:hover {
+  background-color: rgb(var(--kompendium-contrast-1000));
+}
+
+a {
+  text-decoration: none;
+  color: unset;
+}
+a:hover, a.active {
+  color: rgb(var(--kompendium-color-blue-default));
+}

package/dist/collection/components/search/search.js

@@ -0,0 +1,76 @@
+import { h } from "@stencil/core";
+import debounce from "lodash/debounce";
+export class Search {
+    constructor() {
+        this.documents = [];
+        this.renderDocument = (document) => {
+            return (h("li", null, h("a", { href: '#' + document.path, onClick: this.handleLinkClick }, h("span", { class: "link-text" }, document.title))));
+        };
+        this.handleChangeInput = (event) => {
+            const query = event.target.value;
+            this.search(query);
+        };
+        this.handleLinkClick = () => {
+            var _a;
+            (_a = this.host.shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+        };
+        this.search = debounce(this.search, 300);
+    }
+    componentDidLoad() {
+        this.host.shadowRoot.querySelector('input').focus();
+    }
+    render() {
+        const classList = {
+            result: true,
+            'has-results': this.documents.length > 0,
+        };
+        return (h("div", { key: '8085f45b0d1f5e7b50d20de0df3aa95068598fa2', class: "search-box" }, h("input", { key: 'cc001b093b727306c6ea4e8ac078a4f408a0a6c9', type: "search", autoFocus: true, placeholder: "Search", onInput: this.handleChangeInput }), h("ul", { key: '7b293d633cd2493c85db58d84f8308e98061ab42', class: classList }, this.documents.map(this.renderDocument))));
+    }
+    search(query) {
+        const index = this.index;
+        const result = index.search(query);
+        this.documents = result.map((doc) => doc.item).slice(0, 10);
+    }
+    static get is() { return "kompendium-search"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["search.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["search.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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 {
+            "documents": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=search.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","sourceRoot":"","sources":["../../../src/components/search/search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGnE,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AAOvC,MAAM,OAAO,MAAM;IAaf;QALQ,cAAS,GAAyB,EAAE,CAAC;QAkCrC,mBAAc,GAAG,CAAC,QAA4B,EAAE,EAAE;YACtD,OAAO,CACH;gBACI,SAAG,IAAI,EAAE,GAAG,GAAG,QAAQ,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe;oBACvD,YAAM,KAAK,EAAC,WAAW,IAAE,QAAQ,CAAC,KAAK,CAAQ,CAC/C,CACH,CACR,CAAC;QACN,CAAC,CAAC;QAEM,sBAAiB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC9C,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;YACvD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC;QASM,oBAAe,GAAG,GAAG,EAAE;;YAC3B,MAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAA6B,0CAAE,IAAI,EAAE,CAAC;QAChE,CAAC,CAAC;QApDE,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KAC5C;IAED,gBAAgB;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC;IACxD,CAAC;IAED,MAAM;QACF,MAAM,SAAS,GAAG;YACd,MAAM,EAAE,IAAI;YACZ,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC;SAC3C,CAAC;QAEF,OAAO,CACH,4DAAK,KAAK,EAAC,YAAY;YACnB,8DACI,IAAI,EAAC,QAAQ,EACb,SAAS,QACT,WAAW,EAAC,QAAQ,EACpB,OAAO,EAAE,IAAI,CAAC,iBAAiB,GACjC;YACF,2DAAI,KAAK,EAAE,SAAS,IACf,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CACvC,CACH,CACT,CAAC;IACN,CAAC;IAiBO,MAAM,CAAC,KAAa;QACxB,MAAM,KAAK,GAA6B,IAAI,CAAC,KAAK,CAAC;QACnD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAEnC,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAChE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKJ","sourcesContent":["import { Component, h, Element, Prop, State } from '@stencil/core';\nimport Fuse from 'fuse.js';\nimport { KompendiumDocument } from '../../types';\nimport debounce from 'lodash/debounce';\n\n@Component({\n    tag: 'kompendium-search',\n    styleUrl: 'search.scss',\n    shadow: true,\n})\nexport class Search {\n    /**\n     * Index containing searchable documents\n     */\n    @Prop()\n    public index: any;\n\n    @State()\n    private documents: KompendiumDocument[] = [];\n\n    @Element()\n    private host: HTMLKompendiumSearchElement;\n\n    constructor() {\n        this.search = debounce(this.search, 300);\n    }\n\n    componentDidLoad(): void {\n        this.host.shadowRoot.querySelector('input').focus();\n    }\n\n    render(): HTMLElement {\n        const classList = {\n            result: true,\n            'has-results': this.documents.length > 0,\n        };\n\n        return (\n            <div class=\"search-box\">\n                <input\n                    type=\"search\"\n                    autoFocus\n                    placeholder=\"Search\"\n                    onInput={this.handleChangeInput}\n                />\n                <ul class={classList}>\n                    {this.documents.map(this.renderDocument)}\n                </ul>\n            </div>\n        );\n    }\n\n    private renderDocument = (document: KompendiumDocument) => {\n        return (\n            <li>\n                <a href={'#' + document.path} onClick={this.handleLinkClick}>\n                    <span class=\"link-text\">{document.title}</span>\n                </a>\n            </li>\n        );\n    };\n\n    private handleChangeInput = (event: InputEvent) => {\n        const query = (event.target as HTMLInputElement).value;\n        this.search(query);\n    };\n\n    private search(query: string) {\n        const index: Fuse<KompendiumDocument> = this.index;\n        const result = index.search(query);\n\n        this.documents = result.map((doc) => doc.item).slice(0, 10);\n    }\n\n    private handleLinkClick = () => {\n        (this.host.shadowRoot.activeElement as HTMLElement)?.blur();\n    };\n}\n"]}