kempo 1.3.0 → 1.5.0

package/docs/nav-1.inc.html

@@ -49,6 +49,7 @@
       <a href="../components/show-more.html">Show More</a>
       <a href="../components/sidemenu.html">Side Menu</a>
       <a href="../components/split.html">Split</a>
+      <a href="../components/table.html">Table</a>
       <a href="../components/tabs.html">Tabs</a>
       <a href="../components/toggle.html">Toggle</a>
       <a href="../components/websnippeteditor.html">Web Snippet Editor</a>

package/docs/nav.inc.html

@@ -49,6 +49,7 @@
       <a href="./components/show-more.html">Show More</a>
       <a href="./components/sidemenu.html">Side Menu</a>
       <a href="./components/split.html">Split</a>
+      <a href="./components/table.html">Table</a>
       <a href="./components/tabs.html">Tabs</a>
       <a href="./components/toggle.html">Toggle</a>
       <a href="./components/websnippeteditor.html">Web Snippet Editor</a>

package/docs/search.json

@@ -29,6 +29,17 @@
       "content"
     ]
   },
+  "/components/table.html": {
+    "name": "Components > Table",
+    "terms": [
+      "component",
+      "table",
+      "content",
+      "records",
+      "fields",
+      "data"
+    ]
+  },
   "/components/tabs.html": {
     "name": "Components > Tabs",
     "terms": [

package/docs/styles/displays-layouts.html

@@ -148,5 +148,7 @@
     <p><i>Additional styles may be added to the example output (borders, spacing, colors) for demonstration.</i></p>
   </main>
   <script type="module" src="../kempo/components/Import.js"></script> 
+  <script type="module" src="../kempo/components/Card.js"></script> 
+  <script type="module" src="../kempo/components/Resize.js"></script> 
 </body>
 </html>

package/docs/styles/embed-1.html

@@ -27,5 +27,6 @@
     </div>
   </div>
   <script type="module" src="../kempo/components/Import.js"></script> 
+  <script type="module" src="../kempo/components/ThemeSwitcher.js"></script>
 </body>
 </html>

package/icons/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>

package/package.json

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

package/scripts/build.js

@@ -115,10 +115,7 @@ console.log('Saving kempo-hljs.css');
 await fs.writeFile('./dist/kempo-hljs.css', minifiedKempoHljsCSS, 'utf-8');
 
 console.log('Copying dist/ to docs/');
-await fse.ensureDir('./docs/icons'); // will also ensure docs/kempo
+await fse.ensureDir('./docs/'); // will also ensure docs/kempo
 await fse.copy('./dist', './docs/kempo')
 
-console.log('Copying icons/ to docs/icons/');
-await fse.copy('./icons', './docs/icons')
-
 console.log('Build Complete');

package/src/components/Icon.js

@@ -1,5 +1,29 @@
 import Component from './Component.js';
 
+const getIconByName = (name) => {
+  const tryDir = async (dir) => {
+    try {
+      const response = await fetch(`${dir}/${name}.svg`);
+      if(response.status === 200) return await (response).text();
+    } catch(e){
+      console.log(e);
+    }
+    return false;
+  }
+
+  return new Promise( async (resolve, reject) => {
+    let svg;
+    for(let i=0; i < Icon.pathToIcons.length && !svg; i++){
+      svg = await tryDir(Icon.pathToIcons[i]);
+    }
+    if(svg){
+      resolve(svg);
+    } else {
+      reject('Icon not found');
+    }
+  });
+}
+
 export default class Icon extends Component {
   constructor(){
     super();
@@ -8,6 +32,11 @@ export default class Icon extends Component {
       name: ''
     });
   }
+  connectedCallback(){
+    // super.connectedCallback();
+    // do not call super.connectedCallback because it will attempt to render and then again on attribute change
+    // so we are overwriting the parent method and not calling it
+  }
   async render(force){
     if(await super.render(force)){
       if(this.src){
@@ -17,9 +46,9 @@ export default class Icon extends Component {
           this.fixSVG();
         } else if(!this.innerHTML.length) this.innerHTML = Icon.fallback;
       } else if(this.name){
-        const response = await fetch(`${Icon.pathToIcons}/${this.name}.svg`);
-        if(response.status === 200){
-          this.innerHTML = await (response).text();
+        const svg = await getIconByName(this.name);
+        if(svg){
+          this.innerHTML = svg;
           this.fixSVG();
         } else if(!this.innerHTML.length) this.innerHTML = Icon.fallback;
       } else {
@@ -31,7 +60,8 @@ export default class Icon extends Component {
     return false;
   }
   attributeChangedCallback(n, oV, nV){
-    if(['src', 'name'].includes(n)){
+    super.attributeChangedCallback(n, oV, nV);
+    if(['src', 'name'].includes(n) && nV){
       this.render(true);
     }
   }
@@ -61,7 +91,9 @@ export default class Icon extends Component {
     'src'
   ];
 
-  static pathToIcons = '/icons';
+  static pathToIcons = [
+    '/icons'
+  ];
   static fallback = /*html*/`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>
   `;

package/src/components/Table.js

@@ -0,0 +1,71 @@
+import Component from './Component.js';
+import { toTitleCase } from '../utils/string.js';
+
+export default class Table extends Component {
+  constructor(data = false, fields = false){
+    super();
+
+    this.registerProps({
+      fields: [],
+      records: []
+    });
+
+    /* Init */
+    if(data){
+      this.setData(data, fields);
+    }
+  }
+  async render(force){
+    if(await super.render(force)){
+      this.renderFields();
+      this.renderRecords();
+      return true;
+    }
+    return false;
+  }
+  renderFields(){
+    this.shadowRoot.getElementById('fields').innerHTML = this.fields.map(({label})=>`<th>${label}</th>`).join('');
+  }
+  renderRecords(){
+    this.shadowRoot.getElementById('records').innerHTML = this.records.map((record) => {
+      return `<tr>${this.fields.map(({name})=>`<td>${record[name] || ''}</td>`).join('')}</tr>`;
+    }).join('');
+  }
+  
+  setData(records, fields = false){
+    this.records = records;
+    this.fields = fields || Table.extractFieldsFromRecords(this.records);
+    this.renderFields();
+    this.renderRecords();
+  }
+
+  get shadowTemplate(){
+    return /*html*/`
+      ${super.shadowTemplate}
+      <div class="responsive-table">
+        <table>
+          <thead id="fields"></thead>
+          <tbody id="records"></tbody>
+        </table>
+      </div>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        display: block;
+        margin-bottom: var(--spacer);
+      }
+    `;
+  }
+
+  static extractFieldsFromRecords(records, recordLimit = 100){
+    const names = new Set();
+    records.slice(0, recordLimit).forEach( record => {
+      Object.keys(record).forEach( name => names.add(name) )
+    });
+    return [...names].map(name=>({name,label:toTitleCase(name)}));
+  }
+}
+window.customElements.define('k-table', Table);

package/src/kempo-styles.css

@@ -216,7 +216,7 @@ mark {
   background-color: var(--c_highlight);
   color: inherit;
 }
-pre, code {
+.ff-mono, pre, code {
   font-family: var(--ff_mono);
 }
 code {
@@ -258,6 +258,11 @@ a:focus,
 .link:focus-visible {
   box-shadow: var(--focus_shadow);
 }
+.no-link,
+.no-link:hover {
+  text-decoration: none;
+  color: inherit;
+}
 hr {
   border: none;
   border-top: 1px solid var(--c_border);
@@ -463,7 +468,7 @@ input[type="button"],
 input[type="submit"],
 input[type="reset"] {
   display: inline-block;
-  padding: var(--spacer_h) var(--spacer);
+  padding: var(--btn_padding);
   background-color: var(--btn_bg);
   border: 1px solid var(--btn_border);
   cursor: pointer;
@@ -641,7 +646,7 @@ textarea {
   background-color: var(--input_bg);
   color: var(--input_tc);
   border: var(--input_border_width) solid var(--c_border);
-  padding: var(--spacer_h) var(--spacer);
+  padding: var(--input_padding);
   margin-bottom: var(--spacer);
   border-radius: var(--radius);
   outline: none;

package/src/kempo-vars.css

@@ -21,7 +21,9 @@
   --animation_ms: 256ms;
   --radius: 0.25rem;
   --link_decoration: underline;
+  --input_padding: var(--spacer_h) var(--spacer);
   --input_border_width: 2px;
+  --btn_padding: var(--spacer_h) var(--spacer);
 }
 
 :root,

package/src/utils/string.js

@@ -52,6 +52,7 @@ export const unescapeHTML = str => str.replace(/&|<|>|"|'|&#x
 });
 export const trim = (str, chars) => str.replace(new RegExp(`^[${chars}]+|[${chars}]+$`, 'g'), '');
 export const compoundKey = keys => trim(keys.join('.'), '.');
+export const toTitleCase = (input) => input.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/_/g, ' ').trim().replace(/\s+/g, ' ').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ');
 
 export default {
   camelToDash,

package/dist/components/CodeEditor.js

@@ -1 +0,0 @@
-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/WebSnippetEditor.js

@@ -1 +0,0 @@
-import Component from"./Component.js";import{escapeHTML,unescapeHTML}from"../utils/string.js";import"./Split.js";import"./Tabs.js";import"./CodeEditor.js";const changeHandler=Symbol();export default class WebSnippetEditor extends Component{constructor(){super(),this[changeHandler]=()=>{this.renderResults()},this.registerAttributes({useKempo:!1,showHtml:!0,showCss:!0,showJs:!0,scripts:""})}async render(){await super.render();const t=this.querySelector('pre[for="html"]'),e=this.shadowRoot.getElementById("html");e.addEventListener("change",this[changeHandler]),e.value=escapeHTML(t?t.textContent:"<div>\n  \n</div>");const n=this.querySelector('pre[for="css"]'),s=this.shadowRoot.getElementById("css");s.addEventListener("change",this[changeHandler]),s.value=n?n.textContent:"div {\n  \n}";const o=this.querySelector('pre[for="js"]'),a=this.shadowRoot.getElementById("js");a.addEventListener("change",this[changeHandler]),a.value=o?o.textContent:"",this.renderResults()}renderResults(){const t=this.shadowRoot.getElementById("html").value,e=this.shadowRoot.getElementById("css").value,n=this.shadowRoot.getElementById("js").value,s=this.shadowRoot.getElementById("results");s.innerHTML="";const o=document.createElement("iframe");o.frameBorder="0",s.appendChild(o);const a=o.contentDocument||o.contentWindow.document;a.body.innerHTML=`\n      ${this.useKempo?'<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />':""}\n      <style>\n        body, html {\n          background-color: transparent;\n        }\n        body {\n          overflow-y: auto;\n          padding: var(--spacer_q, 4px);\n        }\n        ${e}\n      </style>\n      ${t}\n    `,this.useKempo&&this.scripts&&this.scripts.split(",").forEach((t=>{const e=document.createElement("script");e.type="module",e.src=t,a.head.appendChild(e)}));const r=document.createElement("script");r.textContent=n,a.head.appendChild(r)}get shadowTemplate(){return`\n      <k-split id="split">\n        <k-tabs class="ml">\n          ${this.showHtml?'<k-tab for="html">HTML</k-tab>':""}\n          ${this.showCss?'<k-tab for="css">CSS</k-tab>':""}\n          ${this.showJs?'<k-tab for="js">JS</k-tab>':""}\n          <k-tab-content name="html">\n            <k-code-editor\n              id="html"\n              language="xml"\n              class="my"\n            ></k-code-editor>\n          </k-tab-content>\n          <k-tab-content name="css">\n            <k-code-editor\n              id="css"\n              language="css"\n              class="my"\n            ></k-code-editor>\n          </k-tab-content>\n          <k-tab-content name="js">\n            <k-code-editor\n              id="js"\n              language="js"\n              class="my"\n            ></k-code-editor>\n          </k-tab-content>\n        </k-tabs>\n        <div\n          id="results"\n          slot="right"\n        ></div>\n      </k-split>\n    `}get shadowStyles(){return"\n      :host {\n        --min-height: auto;\n        --height: auto;\n        --max-height: auto;\n        display: block;\n      }\n      k-tab-content {\n        min-height: var(--min-height);\n        height: var(--height);\n        max-height: var(--max-height);\n      }\n      k-code-editor {\n        max-height: calc(100% - (2 * var(--spacer)));\n      }\n      #results,\n      iframe {\n        width: 100%;\n        height: 100%;\n        background-color: transparent;\n      }\n    "}}window.customElements.define("k-web-snippet-editor",WebSnippetEditor);

package/dist/kempo.css

@@ -1 +0,0 @@
-:root,[theme="light"]{color-scheme:light;--c_bg:#f9f9f9;--c_bg__inv:#333;--c_bg__alt:#eee;--c_overscroll:white;--c_border:#ccc;--c_border__inv:var(--d_c_bg_border);--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--btn_bg:#f0f0f0;--btn_bg__hover:#e9e9e9;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333);--link_decoration:underline;--input_border_width:2px}[theme="dark"]{color-scheme:dark;--c_bg:#333;--c_bg__inv:#f9f9f9;--c_bg__alt:#222;--c_overscroll:black;--c_border:#777;--c_border__inv:#ccc;--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#8ab4f8;--tc_secondary:#b6f;--tc_success:#6b6;--tc_warning:#f93;--tc_danger:#f57;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--btn_bg:#aaa;--btn_bg__hover:#bbb;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--input_border_width:2px}@import './kempo-styles.css';

package/dist/kempo.js

@@ -1 +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"},lookFor=new Set(Object.keys(components));window.kempo=Object.assign({},{pathToRoot:"./",pathToKempoFromRoot:"./kempo/",pathToIconsFromRoot:"./kempo/icons/",autoLoadComponents:()=>{lookFor.forEach((async e=>{if(document.querySelector(e)){const o=`${kempo.pathToRoot}${kempo.pathToKempoFromRoot}components/${components[e]}.js`;console.log(o),import(o),lookFor.delete(e)}}))},_darkModeQuery:window.matchMedia("(prefers-color-scheme: dark)"),_theme:"auto",_themeListener:e=>{"auto"===window.kempo._theme&&document.documentElement.setAttribute("theme",e.matches?"dark":"light")},setTheme:e=>{window.kempo._theme=e,"auto"===window.kempo._theme?document.documentElement.setAttribute("theme",window.kempo._darkModeQuery.matches?"dark":"light"):document.documentElement.setAttribute("theme",e)}},window.kempo||{}),window.kempo.autoLoadComponents(),window.kempo._darkModeQuery.addEventListener("change",window.kempo._themeListener),window.kempo.setTheme(document.documentElement.getAttribute("theme")||"auto");

package/docs/kempo/components/CodeEditor.js

@@ -1 +0,0 @@
-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/WebSnippetEditor.js

@@ -1 +0,0 @@
-import Component from"./Component.js";import{escapeHTML,unescapeHTML}from"../utils/string.js";import"./Split.js";import"./Tabs.js";import"./CodeEditor.js";const changeHandler=Symbol();export default class WebSnippetEditor extends Component{constructor(){super(),this[changeHandler]=()=>{this.renderResults()},this.registerAttributes({useKempo:!1,showHtml:!0,showCss:!0,showJs:!0,scripts:""})}async render(){await super.render();const t=this.querySelector('pre[for="html"]'),e=this.shadowRoot.getElementById("html");e.addEventListener("change",this[changeHandler]),e.value=escapeHTML(t?t.textContent:"<div>\n  \n</div>");const n=this.querySelector('pre[for="css"]'),s=this.shadowRoot.getElementById("css");s.addEventListener("change",this[changeHandler]),s.value=n?n.textContent:"div {\n  \n}";const o=this.querySelector('pre[for="js"]'),a=this.shadowRoot.getElementById("js");a.addEventListener("change",this[changeHandler]),a.value=o?o.textContent:"",this.renderResults()}renderResults(){const t=this.shadowRoot.getElementById("html").value,e=this.shadowRoot.getElementById("css").value,n=this.shadowRoot.getElementById("js").value,s=this.shadowRoot.getElementById("results");s.innerHTML="";const o=document.createElement("iframe");o.frameBorder="0",s.appendChild(o);const a=o.contentDocument||o.contentWindow.document;a.body.innerHTML=`\n      ${this.useKempo?'<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />':""}\n      <style>\n        body, html {\n          background-color: transparent;\n        }\n        body {\n          overflow-y: auto;\n          padding: var(--spacer_q, 4px);\n        }\n        ${e}\n      </style>\n      ${t}\n    `,this.useKempo&&this.scripts&&this.scripts.split(",").forEach((t=>{const e=document.createElement("script");e.type="module",e.src=t,a.head.appendChild(e)}));const r=document.createElement("script");r.textContent=n,a.head.appendChild(r)}get shadowTemplate(){return`\n      <k-split id="split">\n        <k-tabs class="ml">\n          ${this.showHtml?'<k-tab for="html">HTML</k-tab>':""}\n          ${this.showCss?'<k-tab for="css">CSS</k-tab>':""}\n          ${this.showJs?'<k-tab for="js">JS</k-tab>':""}\n          <k-tab-content name="html">\n            <k-code-editor\n              id="html"\n              language="xml"\n              class="my"\n            ></k-code-editor>\n          </k-tab-content>\n          <k-tab-content name="css">\n            <k-code-editor\n              id="css"\n              language="css"\n              class="my"\n            ></k-code-editor>\n          </k-tab-content>\n          <k-tab-content name="js">\n            <k-code-editor\n              id="js"\n              language="js"\n              class="my"\n            ></k-code-editor>\n          </k-tab-content>\n        </k-tabs>\n        <div\n          id="results"\n          slot="right"\n        ></div>\n      </k-split>\n    `}get shadowStyles(){return"\n      :host {\n        --min-height: auto;\n        --height: auto;\n        --max-height: auto;\n        display: block;\n      }\n      k-tab-content {\n        min-height: var(--min-height);\n        height: var(--height);\n        max-height: var(--max-height);\n      }\n      k-code-editor {\n        max-height: calc(100% - (2 * var(--spacer)));\n      }\n      #results,\n      iframe {\n        width: 100%;\n        height: 100%;\n        background-color: transparent;\n      }\n    "}}window.customElements.define("k-web-snippet-editor",WebSnippetEditor);

package/docs/kempo/kempo.css

@@ -1 +0,0 @@
-:root,[theme="light"]{color-scheme:light;--c_bg:#f9f9f9;--c_bg__inv:#333;--c_bg__alt:#eee;--c_overscroll:white;--c_border:#ccc;--c_border__inv:var(--d_c_bg_border);--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--btn_bg:#f0f0f0;--btn_bg__hover:#e9e9e9;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333);--link_decoration:underline;--input_border_width:2px}[theme="dark"]{color-scheme:dark;--c_bg:#333;--c_bg__inv:#f9f9f9;--c_bg__alt:#222;--c_overscroll:black;--c_border:#777;--c_border__inv:#ccc;--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#8ab4f8;--tc_secondary:#b6f;--tc_success:#6b6;--tc_warning:#f93;--tc_danger:#f57;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--btn_bg:#aaa;--btn_bg__hover:#bbb;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--input_border_width:2px}@import './kempo-styles.css';

package/docs/kempo/kempo.js

@@ -1 +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"},lookFor=new Set(Object.keys(components));window.kempo=Object.assign({},{pathToRoot:"./",pathToKempoFromRoot:"./kempo/",pathToIconsFromRoot:"./kempo/icons/",autoLoadComponents:()=>{lookFor.forEach((async e=>{if(document.querySelector(e)){const o=`${kempo.pathToRoot}${kempo.pathToKempoFromRoot}components/${components[e]}.js`;console.log(o),import(o),lookFor.delete(e)}}))},_darkModeQuery:window.matchMedia("(prefers-color-scheme: dark)"),_theme:"auto",_themeListener:e=>{"auto"===window.kempo._theme&&document.documentElement.setAttribute("theme",e.matches?"dark":"light")},setTheme:e=>{window.kempo._theme=e,"auto"===window.kempo._theme?document.documentElement.setAttribute("theme",window.kempo._darkModeQuery.matches?"dark":"light"):document.documentElement.setAttribute("theme",e)}},window.kempo||{}),window.kempo.autoLoadComponents(),window.kempo._darkModeQuery.addEventListener("change",window.kempo._themeListener),window.kempo.setTheme(document.documentElement.getAttribute("theme")||"auto");

package/src/components/CodeEditor.js

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