kempo 1.1.1 → 1.1.2

package/dist/components/CodeEditor.js

@@ -1 +1 @@
-import Component from"./Component.js";import hljs from"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js";import{escapeHTML}from"../utils/string.js";const keyDownHandler=Symbol(),lastValue=Symbol();export default class CodeEditor extends Component{constructor(){super(),this[lastValue]="",this[keyDownHandler]=e=>{const{key:t}=e;"Tab"==t?(e.preventDefault(),document.execCommand("insertText",!1,"  ")):(e.ctrlKey||e.metaKey)&&"z"===e.key&&(e.preventDefault(),document.execCommand("undo",!1,null))},this.registerAttribute("language","")}async connectedCallback(){super.connectedCallback();this.shadowRoot.getElementById("editor").addEventListener("keydown",this[keyDownHandler]),this.addEventListener("blur",this.highlight),this.value=escapeHTML(this.textContent.trim())}disconnectedCallback(){super.disconnectedCallback(),this.shadowRoot.getElementById("editor").removeEventListener("keydown",this[keyDownHandler])}highlight(){let e;this.value!==this[lastValue]&&this.dispatchEvent(new CustomEvent("change")),e=this.language?hljs.highlight(this.value,{language:this.language}):hljs.highlightAuto(this.value),this.shadowRoot.getElementById("editor").innerHTML=e.value.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this[lastValue]=this.value}get value(){return[...this.shadowRoot.getElementById("editor").querySelectorAll(".line")].map((e=>e.textContent)).join("\n")}set value(e){this.shadowRoot.getElementById("editor").innerHTML=e.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this.highlight()}get shadowTemplate(){return'\n      <link rel="stylesheet" href="../kempo/kempo-hljs.css" />\n      <pre id="editor" contenteditable="true"></pre>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :root {\n        --d_caret: white;\n        --l_caret: black;\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: light) { \n        :root:not([theme="dark"]) {\n          --caret: var(--l_caret);\n        }\n      }\n      :root[theme="light"] {\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: dark) {\n        :root:not([theme="light"]) {\n          --caret: var(--d_caret);\n        }\n      }\n      :root[theme="dark"] {\n        --caret: var(--d_caret);\n      }\n      :host {\n        display: block;\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        max-height: 20rem;\n        overflow: auto;\n        caret-color: var(--caret);\n      }\n      :host(:focus-within){\n        box-shadow: var(--focus_shadow);\n      }\n      #editor {\n        min-height: 6rem;\n        outline: none;\n        font-family: var(--ff_mono);\n        resize: vertical;\n        padding: var(--spacer);\n        margin-bottom: 0;\n        resize: vertical;\n        counter-reset: line-number;\n        white-space: pre-wrap;\n        padding-left: 2.5rem;\n        position: relative;\n      }\n      #editor .line::before {\n        content: counter(line-number); /* Use the counter value as content */\n        counter-increment: line-number; /* Increment the counter */\n        display: inline-block;\n        width: 2rem;\n        text-align: right; /* Align numbers to the right */\n        opacity: 0.65;\n        position: absolute;\n        left: 0;\n        user-select: none;\n      }\n      .line {\n        width: 100%;\n        overflow-wrap: break-word;\n        word-break: break-all;\n      }\n    `}}window.customElements.define("k-code-editor",CodeEditor);
+import Component from"./Component.js";import{escapeHTML}from"../utils/string.js";const keyDownHandler=Symbol(),lastValue=Symbol();export default class CodeEditor extends Component{constructor(){super(),this[lastValue]="",this[keyDownHandler]=e=>{const{key:t}=e;"Tab"==t?(e.preventDefault(),document.execCommand("insertText",!1,"  ")):(e.ctrlKey||e.metaKey)&&"z"===e.key&&(e.preventDefault(),document.execCommand("undo",!1,null))},this.registerAttribute("language","")}async connectedCallback(){super.connectedCallback();this.shadowRoot.getElementById("editor").addEventListener("keydown",this[keyDownHandler]),this.addEventListener("blur",this.highlight),this.value=escapeHTML(this.textContent.trim())}disconnectedCallback(){super.disconnectedCallback(),this.shadowRoot.getElementById("editor").removeEventListener("keydown",this[keyDownHandler])}highlight(){let e;this.value!==this[lastValue]&&this.dispatchEvent(new CustomEvent("change")),e="undefined"!=typeof hljs?this.language?hljs.highlight(this.value,{language:this.language}).value:hljs.highlightAuto(this.value).value:this.value,this.shadowRoot.getElementById("editor").innerHTML=e.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this[lastValue]=this.value}get value(){return[...this.shadowRoot.getElementById("editor").querySelectorAll(".line")].map((e=>e.textContent)).join("\n")}set value(e){this.shadowRoot.getElementById("editor").innerHTML=e.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this.highlight()}get shadowTemplate(){return'\n      <link rel="stylesheet" href="../kempo/kempo-hljs.css" />\n      <pre id="editor" contenteditable="true"></pre>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :root {\n        --d_caret: white;\n        --l_caret: black;\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: light) { \n        :root:not([theme="dark"]) {\n          --caret: var(--l_caret);\n        }\n      }\n      :root[theme="light"] {\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: dark) {\n        :root:not([theme="light"]) {\n          --caret: var(--d_caret);\n        }\n      }\n      :root[theme="dark"] {\n        --caret: var(--d_caret);\n      }\n      :host {\n        display: block;\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        max-height: 20rem;\n        overflow: auto;\n        caret-color: var(--caret);\n      }\n      :host(:focus-within){\n        box-shadow: var(--focus_shadow);\n      }\n      #editor {\n        min-height: 6rem;\n        outline: none;\n        font-family: var(--ff_mono);\n        resize: vertical;\n        padding: var(--spacer);\n        margin-bottom: 0;\n        resize: vertical;\n        counter-reset: line-number;\n        white-space: pre-wrap;\n        padding-left: 2.5rem;\n        position: relative;\n      }\n      #editor .line::before {\n        content: counter(line-number); /* Use the counter value as content */\n        counter-increment: line-number; /* Increment the counter */\n        display: inline-block;\n        width: 2rem;\n        text-align: right; /* Align numbers to the right */\n        opacity: 0.65;\n        position: absolute;\n        left: 0;\n        user-select: none;\n      }\n      .line {\n        width: 100%;\n        overflow-wrap: break-word;\n        word-break: break-all;\n      }\n    `}}window.customElements.define("k-code-editor",CodeEditor);

package/dist/components/Dialog.js

@@ -1 +1 @@
-import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:n=!1,closeBtn:e=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:a="",cancelClasses:c="",cancelAction:l=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:n,closeBtn:e,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:a,cancelClasses:c}),this.registerProps({confirmAction:s,cancelAction:l,closeCallback:r,previousFocus:null,_clickHandler:n=>{const{target:{id:e}}=n;"overlay"==e&&this.overlayClose||"close"==e?this.close():"cancel"==e?(this.cancelAction(n),n.defaultPrevented||this.close()):"confirm"==e&&(this.confirmAction(n),n.defaultPrevented||this.close())},_keydownHandler:({keyCode:n})=>{27===n&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(n,e,t){super.attributeChangedCallback(n,e,t),"opened"===name&&dispatchEvent(this,t?"opened":"closed")}open(){this.opened=!0;const n=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);n&&n.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const n=firstFocusable(this.shadowRoot);n&&(this.previousFocus=document.activeElement,n.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 0;\n        width: 0;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 2rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 2rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(n="",e={}){const t=new Dialog({opened:!0,...e});onEvent(t,"close",t.remove),n instanceof HTMLElement||n instanceof DocumentFragment?t.appendChild(n):n instanceof NodeList?n.forEach((n=>t.appendChild(n))):t.innerHTML=n,document.body.appendChild(t)}static confirm(n,e,t={title:"Confirm"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${n}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>e(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>e(!1)})}static error(n,e,t={title:"Error"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${n}</p>\n    `,{...t,cancelText:"Ok"})}}window.customElements.define("k-dialog",Dialog);
+import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:a="",cancelClasses:l="",cancelAction:c=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:a,cancelClasses:l}),this.registerProps({confirmAction:s,cancelAction:c,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"closed")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 1px;\n        width: 1px;\n        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n        top: 0;\n        left: 0;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 2rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 2rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){const t=new Dialog({opened:!0,...n});onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,document.body.prepend(t),t.open()}static confirm(e,n,t={title:"Confirm"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,cancelText:"Ok"})}}window.customElements.define("k-dialog",Dialog);

package/docs/kempo/components/CodeEditor.js

@@ -1 +1 @@
-import Component from"./Component.js";import hljs from"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js";import{escapeHTML}from"../utils/string.js";const keyDownHandler=Symbol(),lastValue=Symbol();export default class CodeEditor extends Component{constructor(){super(),this[lastValue]="",this[keyDownHandler]=e=>{const{key:t}=e;"Tab"==t?(e.preventDefault(),document.execCommand("insertText",!1,"  ")):(e.ctrlKey||e.metaKey)&&"z"===e.key&&(e.preventDefault(),document.execCommand("undo",!1,null))},this.registerAttribute("language","")}async connectedCallback(){super.connectedCallback();this.shadowRoot.getElementById("editor").addEventListener("keydown",this[keyDownHandler]),this.addEventListener("blur",this.highlight),this.value=escapeHTML(this.textContent.trim())}disconnectedCallback(){super.disconnectedCallback(),this.shadowRoot.getElementById("editor").removeEventListener("keydown",this[keyDownHandler])}highlight(){let e;this.value!==this[lastValue]&&this.dispatchEvent(new CustomEvent("change")),e=this.language?hljs.highlight(this.value,{language:this.language}):hljs.highlightAuto(this.value),this.shadowRoot.getElementById("editor").innerHTML=e.value.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this[lastValue]=this.value}get value(){return[...this.shadowRoot.getElementById("editor").querySelectorAll(".line")].map((e=>e.textContent)).join("\n")}set value(e){this.shadowRoot.getElementById("editor").innerHTML=e.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this.highlight()}get shadowTemplate(){return'\n      <link rel="stylesheet" href="../kempo/kempo-hljs.css" />\n      <pre id="editor" contenteditable="true"></pre>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :root {\n        --d_caret: white;\n        --l_caret: black;\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: light) { \n        :root:not([theme="dark"]) {\n          --caret: var(--l_caret);\n        }\n      }\n      :root[theme="light"] {\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: dark) {\n        :root:not([theme="light"]) {\n          --caret: var(--d_caret);\n        }\n      }\n      :root[theme="dark"] {\n        --caret: var(--d_caret);\n      }\n      :host {\n        display: block;\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        max-height: 20rem;\n        overflow: auto;\n        caret-color: var(--caret);\n      }\n      :host(:focus-within){\n        box-shadow: var(--focus_shadow);\n      }\n      #editor {\n        min-height: 6rem;\n        outline: none;\n        font-family: var(--ff_mono);\n        resize: vertical;\n        padding: var(--spacer);\n        margin-bottom: 0;\n        resize: vertical;\n        counter-reset: line-number;\n        white-space: pre-wrap;\n        padding-left: 2.5rem;\n        position: relative;\n      }\n      #editor .line::before {\n        content: counter(line-number); /* Use the counter value as content */\n        counter-increment: line-number; /* Increment the counter */\n        display: inline-block;\n        width: 2rem;\n        text-align: right; /* Align numbers to the right */\n        opacity: 0.65;\n        position: absolute;\n        left: 0;\n        user-select: none;\n      }\n      .line {\n        width: 100%;\n        overflow-wrap: break-word;\n        word-break: break-all;\n      }\n    `}}window.customElements.define("k-code-editor",CodeEditor);
+import Component from"./Component.js";import{escapeHTML}from"../utils/string.js";const keyDownHandler=Symbol(),lastValue=Symbol();export default class CodeEditor extends Component{constructor(){super(),this[lastValue]="",this[keyDownHandler]=e=>{const{key:t}=e;"Tab"==t?(e.preventDefault(),document.execCommand("insertText",!1,"  ")):(e.ctrlKey||e.metaKey)&&"z"===e.key&&(e.preventDefault(),document.execCommand("undo",!1,null))},this.registerAttribute("language","")}async connectedCallback(){super.connectedCallback();this.shadowRoot.getElementById("editor").addEventListener("keydown",this[keyDownHandler]),this.addEventListener("blur",this.highlight),this.value=escapeHTML(this.textContent.trim())}disconnectedCallback(){super.disconnectedCallback(),this.shadowRoot.getElementById("editor").removeEventListener("keydown",this[keyDownHandler])}highlight(){let e;this.value!==this[lastValue]&&this.dispatchEvent(new CustomEvent("change")),e="undefined"!=typeof hljs?this.language?hljs.highlight(this.value,{language:this.language}).value:hljs.highlightAuto(this.value).value:this.value,this.shadowRoot.getElementById("editor").innerHTML=e.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this[lastValue]=this.value}get value(){return[...this.shadowRoot.getElementById("editor").querySelectorAll(".line")].map((e=>e.textContent)).join("\n")}set value(e){this.shadowRoot.getElementById("editor").innerHTML=e.split("\n").map((e=>`<div class="line">${e}</div>`)).join(""),this.highlight()}get shadowTemplate(){return'\n      <link rel="stylesheet" href="../kempo/kempo-hljs.css" />\n      <pre id="editor" contenteditable="true"></pre>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :root {\n        --d_caret: white;\n        --l_caret: black;\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: light) { \n        :root:not([theme="dark"]) {\n          --caret: var(--l_caret);\n        }\n      }\n      :root[theme="light"] {\n        --caret: var(--l_caret);\n      }\n      @media (prefers-color-scheme: dark) {\n        :root:not([theme="light"]) {\n          --caret: var(--d_caret);\n        }\n      }\n      :root[theme="dark"] {\n        --caret: var(--d_caret);\n      }\n      :host {\n        display: block;\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        max-height: 20rem;\n        overflow: auto;\n        caret-color: var(--caret);\n      }\n      :host(:focus-within){\n        box-shadow: var(--focus_shadow);\n      }\n      #editor {\n        min-height: 6rem;\n        outline: none;\n        font-family: var(--ff_mono);\n        resize: vertical;\n        padding: var(--spacer);\n        margin-bottom: 0;\n        resize: vertical;\n        counter-reset: line-number;\n        white-space: pre-wrap;\n        padding-left: 2.5rem;\n        position: relative;\n      }\n      #editor .line::before {\n        content: counter(line-number); /* Use the counter value as content */\n        counter-increment: line-number; /* Increment the counter */\n        display: inline-block;\n        width: 2rem;\n        text-align: right; /* Align numbers to the right */\n        opacity: 0.65;\n        position: absolute;\n        left: 0;\n        user-select: none;\n      }\n      .line {\n        width: 100%;\n        overflow-wrap: break-word;\n        word-break: break-all;\n      }\n    `}}window.customElements.define("k-code-editor",CodeEditor);

package/docs/kempo/components/Dialog.js

@@ -1 +1 @@
-import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:n=!1,closeBtn:e=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:a="",cancelClasses:c="",cancelAction:l=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:n,closeBtn:e,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:a,cancelClasses:c}),this.registerProps({confirmAction:s,cancelAction:l,closeCallback:r,previousFocus:null,_clickHandler:n=>{const{target:{id:e}}=n;"overlay"==e&&this.overlayClose||"close"==e?this.close():"cancel"==e?(this.cancelAction(n),n.defaultPrevented||this.close()):"confirm"==e&&(this.confirmAction(n),n.defaultPrevented||this.close())},_keydownHandler:({keyCode:n})=>{27===n&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(n,e,t){super.attributeChangedCallback(n,e,t),"opened"===name&&dispatchEvent(this,t?"opened":"closed")}open(){this.opened=!0;const n=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);n&&n.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const n=firstFocusable(this.shadowRoot);n&&(this.previousFocus=document.activeElement,n.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 0;\n        width: 0;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 2rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 2rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(n="",e={}){const t=new Dialog({opened:!0,...e});onEvent(t,"close",t.remove),n instanceof HTMLElement||n instanceof DocumentFragment?t.appendChild(n):n instanceof NodeList?n.forEach((n=>t.appendChild(n))):t.innerHTML=n,document.body.appendChild(t)}static confirm(n,e,t={title:"Confirm"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${n}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>e(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>e(!1)})}static error(n,e,t={title:"Error"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${n}</p>\n    `,{...t,cancelText:"Ok"})}}window.customElements.define("k-dialog",Dialog);
+import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:a="",cancelClasses:l="",cancelAction:c=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:a,cancelClasses:l}),this.registerProps({confirmAction:s,cancelAction:c,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"closed")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 1px;\n        width: 1px;\n        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n        top: 0;\n        left: 0;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 2rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 2rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){const t=new Dialog({opened:!0,...n});onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,document.body.prepend(t),t.open()}static confirm(e,n,t={title:"Confirm"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,cancelText:"Ok"})}}window.customElements.define("k-dialog",Dialog);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "type": "module",
   "description": "A web component library",
   "main": "dist/index.js",

package/scripts/build.js

@@ -93,13 +93,6 @@ const minifiedMain = (await minify(main)).code;
 console.log('Saving minified main entry file');
 await fs.writeFile('./dist/index.js', minifiedMain, 'utf-8');
 
-console.log('Loading kempo.js');
-const kempoJS = await fs.readFile('./src/kempo.js', 'utf-8');
-console.log('Minifying kempo.js');
-const minifiedKempoJs = (await minify(kempoJS)).code;
-console.log('Saving minfiied kempo.js');
-await fs.writeFile('./dist/kempo.js', minifiedKempoJs, 'utf-8');
-
 console.log('Loading kempo-vars.css');
 const kempoVarsCSS = await fs.readFile('./src/kempo-vars.css', 'utf-8');
 console.log('Minifying kempo-vars.css');

package/src/components/CodeEditor.js

@@ -1,5 +1,4 @@
 import Component from './Component.js';
-import hljs from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js';
 import {
   escapeHTML
 } from '../utils/string.js';
@@ -45,15 +44,19 @@ export default class CodeEditor extends Component {
       this.dispatchEvent(new CustomEvent('change'));
     }
     let result;
-    if(this.language){
-      result = hljs.highlight(
-        this.value,
-        { language: this.language }
-      )
+    if(typeof(hljs) !== 'undefined'){
+      if(this.language){
+        result = (hljs.highlight(
+          this.value,
+          { language: this.language }
+        )).value;
+      } else {
+        result = (hljs.highlightAuto(this.value)).value;
+      }
     } else {
-      result = hljs.highlightAuto(this.value);
+      result = this.value;
     }
-    this.shadowRoot.getElementById('editor').innerHTML = result.value.split('\n').map(p=>`<div class="line">${p}</div>`).join('');
+    this.shadowRoot.getElementById('editor').innerHTML = result.split('\n').map(p=>`<div class="line">${p}</div>`).join('');
     this[lastValue] = this.value;
   }
 

package/src/kempo.js

@@ -1,48 +0,0 @@
-const components = {
-  'k-card': 'Card',
-  'k-code-editor': 'CodeEditor',
-  'k-dialog': 'Dialog',
-  'k-icon': 'Icon',
-  'k-import': 'Import',
-  'k-resize': 'Resize',
-  'k-search': 'Search',
-  'k-show-more': 'ShowMore',
-  'k-side-menu': 'SideMenu',
-  'k-split': 'Split',
-  'k-tabs': 'Tabs',
-  'k-web-snippet-editor': 'WebSnippetEditor'
-}
-const lookFor = new Set(Object.keys(components));
-window.kempo = Object.assign({}, {
-  pathToRoot: './',
-  pathToKempoFromRoot: './kempo/',
-  pathToIconsFromRoot: './kempo/icons/',
-  autoLoadComponents: () => {
-    lookFor.forEach( async component => {
-      if(document.querySelector(component)){
-        const path = `${kempo.pathToRoot}${kempo.pathToKempoFromRoot}components/${components[component]}.js`;
-        console.log(path);
-        import(path);
-        lookFor.delete(component);
-      }
-    });
-  },
-  _darkModeQuery: window.matchMedia('(prefers-color-scheme: dark)'),
-  _theme: 'auto',
-  _themeListener: (e) => {
-    if(window.kempo._theme === 'auto'){
-      document.documentElement.setAttribute('theme', e.matches?'dark':'light');
-    }
-  },
-  setTheme: (theme) => {
-    window.kempo._theme = theme;
-    if(window.kempo._theme === 'auto'){
-      document.documentElement.setAttribute('theme', window.kempo._darkModeQuery.matches?'dark':'light');
-    } else {
-      document.documentElement.setAttribute('theme', theme);
-    }
-  }
-}, window.kempo || {});
-window.kempo.autoLoadComponents();
-window.kempo._darkModeQuery.addEventListener('change', window.kempo._themeListener);
-window.kempo.setTheme(document.documentElement.getAttribute('theme') || 'auto');