kempo 1.2.6 → 1.4.0

package/dist/components/Icon.js

@@ -1 +1 @@
-import Component from"./Component.js";export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}async render(t){if(await super.render(t)){if(this.src){const t=await fetch(this.src);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await fetch(`${Icon.pathToIcons}/${this.name}.svg`);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){["src","name"].includes(t)&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons="/icons";static fallback='\n    <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>\n  '}window.customElements.define("k-icon",Icon);
+import Component from"./Component.js";const getIconByName=t=>{const e=async e=>{try{const n=await fetch(`${e}/${t}.svg`);if(200===n.status)return await n.text()}catch(t){console.log(t)}return!1};return new Promise((async(t,n)=>{let s;for(let t=0;t<Icon.pathToIcons.length&&!s;t++)s=await e(Icon.pathToIcons[t]);s?t(s):n("Icon not found")}))};export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}connectedCallback(){}async render(t){if(await super.render(t)){if(this.src){const t=await fetch(this.src);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await getIconByName(this.name);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){super.attributeChangedCallback(t,e,n),["src","name"].includes(t)&&n&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons=["/icons"];static fallback='\n    <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>\n  '}window.customElements.define("k-icon",Icon);

package/dist/components/Tags.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const tagsInputChangeHandler=Symbol(),tagsInputCommaHandler=Symbol();export default class Tags extends Component{constructor(){super(),this[tagsInputChangeHandler]=()=>{const t=this.shadowRoot.getElementById("tagsInput"),n=t.value;n&&(this.addTag(n),t.value="")},this[tagsInputCommaHandler]=t=>{if(","===t.data||"insertFromPaste"===t.inputType){const t=this.shadowRoot.getElementById("tagsInput"),n=t.value.split(",").filter((t=>!!t));n.length&&(n.forEach((t=>this.addTag(t))),t.value="")}},this.registerAttributes({value:"",allowedTags:"",disallowedTags:""})}attributeChangedCallback(t,n,e){if(super.attributeChangedCallback(t,n,e),"value"===t){const t=this.validateTags();t!==e?this.value=t:(dispatchEvent(this,"change",{oldValue:n,newValue:e}),this.renderTags())}else if(["allowed-tags","disallowed-tags"].includes(t)){const a=this.validateTags();a!==e?this.value=a:(dispatchEvent(this,`${t.replace("-","")}change`,{oldValue:n,newValue:e}),this.renderTags())}}async render(t){if(await super.render(t)){const t=this.shadowRoot.getElementById("tagsInput");return onEvent(t,"change",this[tagsInputChangeHandler]),onEvent(t,"input",this[tagsInputCommaHandler]),!0}return!1}disconnectedCallback(){super.disconnectedCallback();const t=this.shadowRoot.getElementById("tagsInput");offEvent(t,"change",this[tagsInputChangeHandler]),offEvent(t,"input",this[tagsInputCommaHandler])}async renderTags(){this.render(!1),await window.customElements.whenDefined("k-tag");const t=this.shadowRoot.getElementById("tags");t.innerHTML="";const n=this.value;n&&n.split(",").forEach((n=>{t.appendChild(new Tag(n))}))}addTag(t){const n=new Set(this.value.split(",").filter((t=>!!t)));n.add(t),this.value=[...n].filter((t=>!!t)).join(","),dispatchEvent(this,"addtag",{tag:t})}removeTag(t){const n=new Set(this.value.split(",").filter((t=>!!t)));n.delete(t),this.value=[...n].join(","),dispatchEvent(this,"removetag",{tag:t})}validateTags(){return this.value.split(",").map((t=>t.trim())).map((t=>{const n=new Set(this.allowedTags.split(",").filter((t=>!!t)));if(n.size)return n.has(t)?t:"";const e=new Set(this.disallowedTags.split(",").filter((t=>!!t)));return e.size&&e.has(t)?"":t})).filter((t=>!!t)).join(",")}get shadowTemplate(){return`\n      <label for="tagsInput">\n        ${super.shadowTemplate}\n        <div id="tagsHolder">\n          <span id="tags"></span>\n          <input id="tagsInput" />\n        </div>\n      </label>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        \n      }\n      #tagsHolder {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-start;\n        width: 100%;\n        background-color: var(--input_bg);\n        color: var(--input_tc);\n        border: var(--input_border_width) solid var(--c_border);\n        padding: 0;\n        margin-bottom: var(--spacer);\n        border-radius: var(--radius);\n        outline: none;\n        transition: box-shadow var(--animation_ms);\n        cursor: default;\n      }\n      #tagsHolder:focus-within {\n        box-shadow: var(--focus_shadow);\n      }\n      #tags {\n        display: contents;\n      }\n      #tagsInput {\n        display: inline-block;\n        min-width: 5rem;\n        width: auto;\n        max-width: 100%;\n        background-color: transparent;\n        color: inherit;\n        border: 0 solid transparent;\n        margin-bottom: 0;\n        border-radius: 0;\n        transition: none;\n      }\n      #tagsInput {\n        box-shadow: 0 0 0 transparent;\n      }\n    `}static observedAttributes=[...Component.observedAttributes,"value","allowed-tags","disallowed-tags"]}window.customElements.define("k-tags",Tags);const tagClickHandler=Symbol();class Tag extends Component{constructor(t){super(),this[tagClickHandler]=()=>{this.getRootNode().host.removeTag(t)},this.innerHTML=t}async render(t){return!!await super.render(t)&&(onEvent(this,"click",this[tagClickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this,"click",this[tagClickHandler])}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline-block;\n        width: min-content;\n        margin: var(--spacer_q);\n        padding: var(--spacer_q) var(--spacer_h);\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        cursor: pointer;\n      }\n      :host(:hover) {\n        text-decoration: line-through;\n      }\n    `}}window.customElements.define("k-tag",Tag);

package/dist/index.js

@@ -1 +1 @@
-import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Tabs from"./components/Tabs.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import WebSnippetEditor from"./components/WebSnippetEditor.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};
+import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import WebSnippetEditor from"./components/WebSnippetEditor.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};

package/docs/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/docs/index.html

@@ -8,6 +8,9 @@
 </head>
 <body>
   <k-import src="./nav.inc.html"></k-import>
+  <main>
+    
+  </main>
   <script type="module" src="./kempo/components/Import.js"></script>
 </body>
 </html>

package/docs/kempo/components/Icon.js

@@ -1 +1 @@
-import Component from"./Component.js";export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}async render(t){if(await super.render(t)){if(this.src){const t=await fetch(this.src);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await fetch(`${Icon.pathToIcons}/${this.name}.svg`);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){["src","name"].includes(t)&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons="/icons";static fallback='\n    <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>\n  '}window.customElements.define("k-icon",Icon);
+import Component from"./Component.js";const getIconByName=t=>{const e=async e=>{try{const n=await fetch(`${e}/${t}.svg`);if(200===n.status)return await n.text()}catch(t){console.log(t)}return!1};return new Promise((async(t,n)=>{let s;for(let t=0;t<Icon.pathToIcons.length&&!s;t++)s=await e(Icon.pathToIcons[t]);s?t(s):n("Icon not found")}))};export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}connectedCallback(){}async render(t){if(await super.render(t)){if(this.src){const t=await fetch(this.src);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await getIconByName(this.name);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){super.attributeChangedCallback(t,e,n),["src","name"].includes(t)&&n&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons=["/icons"];static fallback='\n    <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>\n  '}window.customElements.define("k-icon",Icon);

package/docs/kempo/components/Tags.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const tagsInputChangeHandler=Symbol(),tagsInputCommaHandler=Symbol();export default class Tags extends Component{constructor(){super(),this[tagsInputChangeHandler]=()=>{const t=this.shadowRoot.getElementById("tagsInput"),n=t.value;n&&(this.addTag(n),t.value="")},this[tagsInputCommaHandler]=t=>{if(","===t.data||"insertFromPaste"===t.inputType){const t=this.shadowRoot.getElementById("tagsInput"),n=t.value.split(",").filter((t=>!!t));n.length&&(n.forEach((t=>this.addTag(t))),t.value="")}},this.registerAttributes({value:"",allowedTags:"",disallowedTags:""})}attributeChangedCallback(t,n,e){if(super.attributeChangedCallback(t,n,e),"value"===t){const t=this.validateTags();t!==e?this.value=t:(dispatchEvent(this,"change",{oldValue:n,newValue:e}),this.renderTags())}else if(["allowed-tags","disallowed-tags"].includes(t)){const a=this.validateTags();a!==e?this.value=a:(dispatchEvent(this,`${t.replace("-","")}change`,{oldValue:n,newValue:e}),this.renderTags())}}async render(t){if(await super.render(t)){const t=this.shadowRoot.getElementById("tagsInput");return onEvent(t,"change",this[tagsInputChangeHandler]),onEvent(t,"input",this[tagsInputCommaHandler]),!0}return!1}disconnectedCallback(){super.disconnectedCallback();const t=this.shadowRoot.getElementById("tagsInput");offEvent(t,"change",this[tagsInputChangeHandler]),offEvent(t,"input",this[tagsInputCommaHandler])}async renderTags(){this.render(!1),await window.customElements.whenDefined("k-tag");const t=this.shadowRoot.getElementById("tags");t.innerHTML="";const n=this.value;n&&n.split(",").forEach((n=>{t.appendChild(new Tag(n))}))}addTag(t){const n=new Set(this.value.split(",").filter((t=>!!t)));n.add(t),this.value=[...n].filter((t=>!!t)).join(","),dispatchEvent(this,"addtag",{tag:t})}removeTag(t){const n=new Set(this.value.split(",").filter((t=>!!t)));n.delete(t),this.value=[...n].join(","),dispatchEvent(this,"removetag",{tag:t})}validateTags(){return this.value.split(",").map((t=>t.trim())).map((t=>{const n=new Set(this.allowedTags.split(",").filter((t=>!!t)));if(n.size)return n.has(t)?t:"";const e=new Set(this.disallowedTags.split(",").filter((t=>!!t)));return e.size&&e.has(t)?"":t})).filter((t=>!!t)).join(",")}get shadowTemplate(){return`\n      <label for="tagsInput">\n        ${super.shadowTemplate}\n        <div id="tagsHolder">\n          <span id="tags"></span>\n          <input id="tagsInput" />\n        </div>\n      </label>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        \n      }\n      #tagsHolder {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-start;\n        width: 100%;\n        background-color: var(--input_bg);\n        color: var(--input_tc);\n        border: var(--input_border_width) solid var(--c_border);\n        padding: 0;\n        margin-bottom: var(--spacer);\n        border-radius: var(--radius);\n        outline: none;\n        transition: box-shadow var(--animation_ms);\n        cursor: default;\n      }\n      #tagsHolder:focus-within {\n        box-shadow: var(--focus_shadow);\n      }\n      #tags {\n        display: contents;\n      }\n      #tagsInput {\n        display: inline-block;\n        min-width: 5rem;\n        width: auto;\n        max-width: 100%;\n        background-color: transparent;\n        color: inherit;\n        border: 0 solid transparent;\n        margin-bottom: 0;\n        border-radius: 0;\n        transition: none;\n      }\n      #tagsInput {\n        box-shadow: 0 0 0 transparent;\n      }\n    `}static observedAttributes=[...Component.observedAttributes,"value","allowed-tags","disallowed-tags"]}window.customElements.define("k-tags",Tags);const tagClickHandler=Symbol();class Tag extends Component{constructor(t){super(),this[tagClickHandler]=()=>{this.getRootNode().host.removeTag(t)},this.innerHTML=t}async render(t){return!!await super.render(t)&&(onEvent(this,"click",this[tagClickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this,"click",this[tagClickHandler])}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline-block;\n        width: min-content;\n        margin: var(--spacer_q);\n        padding: var(--spacer_q) var(--spacer_h);\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n        cursor: pointer;\n      }\n      :host(:hover) {\n        text-decoration: line-through;\n      }\n    `}}window.customElements.define("k-tag",Tag);

package/docs/kempo/index.js

@@ -1 +1 @@
-import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Tabs from"./components/Tabs.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import WebSnippetEditor from"./components/WebSnippetEditor.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};
+import Card from"./components/Card.js";import CodeEditor from"./components/CodeEditor.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import WebSnippetEditor from"./components/WebSnippetEditor.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";export default{Card:Card,CodeEditor:CodeEditor,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,WebSnippetEditor:WebSnippetEditor,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};

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.2.6",
+  "version": "1.4.0",
   "type": "module",
   "description": "A web component library",
   "main": "dist/index.js",

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/Tags.js

@@ -0,0 +1,224 @@
+import Component from './Component.js';
+import {
+  onEvent,
+  offEvent,
+  dispatchEvent
+} from '../utils/element.js';
+
+const tagsInputChangeHandler = Symbol(),
+      tagsInputCommaHandler = Symbol();
+export default class Tags extends Component {
+  constructor(){
+    super();
+
+    this[tagsInputChangeHandler] = () => {
+      const $tagsInput = this.shadowRoot.getElementById('tagsInput');
+      const tag = $tagsInput.value;
+      if(tag){
+        this.addTag(tag);
+        $tagsInput.value = '';
+      }
+    }
+    this[tagsInputCommaHandler] = (event) => {
+      if(event.data === ',' || event.inputType === 'insertFromPaste'){
+        const $tagsInput = this.shadowRoot.getElementById('tagsInput');
+        const tags = $tagsInput.value.split(',').filter(i=>!!i);
+        if(tags.length){
+          tags.forEach(tag=>this.addTag(tag));
+          $tagsInput.value = '';
+        }
+      }
+    }
+
+    this.registerAttributes({
+      value: '',
+      allowedTags: '',
+      disallowedTags: ''
+    });
+  }
+  attributeChangedCallback(name, oldValue, newValue){
+    super.attributeChangedCallback(name, oldValue, newValue);
+    if(name === 'value'){
+      const validTags = this.validateTags();
+      if(validTags !== newValue){
+        this.value = validTags;
+      } else {
+        dispatchEvent(this, 'change', {
+          oldValue,
+          newValue
+        });
+        this.renderTags();
+      }
+    } else if(['allowed-tags', 'disallowed-tags'].includes(name)){
+      const validTags = this.validateTags();
+      if(validTags !== newValue){
+        this.value = validTags;
+      } else {
+        dispatchEvent(this, `${name.replace('-','')}change`, {
+          oldValue,
+          newValue
+        });
+        this.renderTags();
+      }
+    }
+  }
+  async render(force){
+    if(await super.render(force)){
+      const $tagsInput = this.shadowRoot.getElementById('tagsInput');
+      onEvent($tagsInput, 'change', this[tagsInputChangeHandler]);
+      onEvent($tagsInput, 'input', this[tagsInputCommaHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    const $tagsInput = this.shadowRoot.getElementById('tagsInput');
+    offEvent($tagsInput, 'change', this[tagsInputChangeHandler]);
+    offEvent($tagsInput, 'input', this[tagsInputCommaHandler]);
+  }
+  async renderTags(){
+    this.render(false);
+    await window.customElements.whenDefined('k-tag');
+    const $tags = this.shadowRoot.getElementById('tags');
+    $tags.innerHTML = '';
+    const v = this.value;
+    if(v) v.split(',').forEach(tag => {
+      $tags.appendChild(new Tag(tag));
+    });
+  }
+  addTag(tag){
+    const tags = new Set(this.value.split(',').filter(i=>!!i));
+    tags.add(tag);
+    this.value = [...tags].filter(i=>!!i).join(',');
+    dispatchEvent(this, 'addtag', {tag});
+  }
+  removeTag(tag){
+    const tags = new Set(this.value.split(',').filter(i=>!!i));
+    tags.delete(tag);
+    this.value = [...tags].join(',');
+    dispatchEvent(this, 'removetag', {tag});
+  }
+  validateTags(){
+    return this.value
+      .split(',')
+      .map(t=>t.trim())
+      .map(tag => {
+        const allowed = new Set(this.allowedTags.split(',').filter(i=>!!i));
+        if(allowed.size) return allowed.has(tag)?tag:'';
+        const disallowed = new Set(this.disallowedTags.split(',').filter(i=>!!i));
+        if(disallowed.size) return disallowed.has(tag)?'':tag;
+        return tag;
+      })
+      .filter(i=>!!i).join(',');
+  }
+
+  get shadowTemplate(){
+    return /*html*/`
+      <label for="tagsInput">
+        ${super.shadowTemplate}
+        <div id="tagsHolder">
+          <span id="tags"></span>
+          <input id="tagsInput" />
+        </div>
+      </label>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        
+      }
+      #tagsHolder {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        width: 100%;
+        background-color: var(--input_bg);
+        color: var(--input_tc);
+        border: var(--input_border_width) solid var(--c_border);
+        padding: 0;
+        margin-bottom: var(--spacer);
+        border-radius: var(--radius);
+        outline: none;
+        transition: box-shadow var(--animation_ms);
+        cursor: default;
+      }
+      #tagsHolder:focus-within {
+        box-shadow: var(--focus_shadow);
+      }
+      #tags {
+        display: contents;
+      }
+      #tagsInput {
+        display: inline-block;
+        min-width: 5rem;
+        width: auto;
+        max-width: 100%;
+        background-color: transparent;
+        color: inherit;
+        border: 0 solid transparent;
+        margin-bottom: 0;
+        border-radius: 0;
+        transition: none;
+      }
+      #tagsInput {
+        box-shadow: 0 0 0 transparent;
+      }
+    `;
+  }
+
+  static observedAttributes = [
+    ...Component.observedAttributes,
+    'value',
+    'allowed-tags',
+    'disallowed-tags'
+  ];
+}
+window.customElements.define('k-tags', Tags);
+
+const tagClickHandler = Symbol();
+class Tag extends Component {
+  constructor(tag){
+    super();
+
+    /* Private Methods */
+    this[tagClickHandler] = () => {
+      this.getRootNode().host.removeTag(tag);
+    }
+
+    /* init */
+    this.innerHTML = tag;
+  }
+  async render(force){
+    if(await super.render(force)){
+      onEvent(this, 'click', this[tagClickHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this, 'click', this[tagClickHandler]);
+  }
+
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        display: inline-block;
+        width: min-content;
+        margin: var(--spacer_q);
+        padding: var(--spacer_q) var(--spacer_h);
+        border: 1px solid var(--c_border);
+        border-radius: var(--radius);
+        cursor: pointer;
+      }
+      :host(:hover) {
+        text-decoration: line-through;
+      }
+    `;
+  }
+}
+window.customElements.define('k-tag', Tag);