eck-autocomplete - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

eck-autocomplete-component/eck-autocomplete-component.d.ts

@@ -1,2 +0,2 @@
-import { CustomElement } from '../utils/custom-element';
+import type { CustomElement } from '../utils/custom-element';
 export declare class EckAutocomplete extends HTMLElement implements CustomElement {
@@ -3,0 +3,0 @@ #private;

eck-autocomplete-component/eck-autocomplete-component.js

@@ -1,84 +0,10 @@
-// eck-autocomplete/eck-autocomplete-component/eck-autocomplete-component.html?raw
-var eck_autocomplete_component_default = '<div class="option-container has-children">\n  <slot></slot>\n</div>\n';
+// build-artifacts/eck-autocomplete-component/eck-autocomplete-component.html?raw
+var eck_autocomplete_component_default = '<div class="has-children option-container"><slot></slot></div>';
 
-// eck-autocomplete/eck-autocomplete-component/eck-autocomplete-component.css
-var eck_autocomplete_component_default2 = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  display: none;\n  position: absolute;\n  background-color: #fff;\n}\n\n.option-container.has-children {\n  width: 100%;\n  overflow: auto;\n  border: 1px solid black;\n}\n";
+// build-artifacts/eck-autocomplete-component/eck-autocomplete-component.css
+var eck_autocomplete_component_default2 = "*{box-sizing:border-box}:host{display:none;position:absolute;background-color:#fff}.option-container.has-children{width:100%;overflow:auto;border:1px solid black}\n";
 
-// eck-autocomplete/eck-autocomplete-option-component/eck-autocomplete-option-component.html?raw
-var eck_autocomplete_option_component_default = "<slot></slot>\n";
-
-// eck-autocomplete/eck-autocomplete-option-component/eck-autocomplete-option-component.css
-var eck_autocomplete_option_component_default2 = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n  padding: 5px;\n}\n\n:host(:hover),\n:host(.highlighted) {\n  background-color: #b3e5fc;\n  cursor: pointer;\n}\n";
-
-// eck-autocomplete/eck-autocomplete-option-component/eck-autocomplete-option-component.ts
+// build-artifacts/eck-autocomplete-component/eck-autocomplete-component.ts
 var template = document.createElement("template");
-template.innerHTML = `<style>${eck_autocomplete_option_component_default2}</style>${eck_autocomplete_option_component_default}`;
-var EckAutocompleteOption = class extends HTMLElement {
-  value;
-  label;
-  hasKeyboardHighlight = false;
-  #clickEventListenerAbortController = new AbortController();
-  #clickEventListenerAbortSignal = this.#clickEventListenerAbortController.signal;
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-  }
-  static get tagName() {
-    return "eck-autocomplete-option";
-  }
-  static get observedAttributes() {
-    return ["value", "label"];
-  }
-  connectedCallback() {
-    this.shadowRoot?.appendChild(template.content.cloneNode(true));
-    this.shadowRoot?.host.addEventListener("mousedown", (e) => {
-      e.preventDefault();
-    });
-    this.shadowRoot?.host.addEventListener("click", () => {
-      this.fireSelectionEvent();
-    }, {
-      signal: this.#clickEventListenerAbortSignal
-    });
-  }
-  disconnectedCallback() {
-    this.#clickEventListenerAbortController.abort();
-  }
-  attributeChangedCallback(attrName, oldVal, newVal) {
-    if (attrName === "value") {
-      this.value = newVal;
-    } else if (attrName === "label") {
-      this.label = newVal;
-    }
-  }
-  highlight(highlight) {
-    this.hasKeyboardHighlight = highlight;
-    if (highlight) {
-      this.shadowRoot?.host.classList.add("highlighted");
-    } else {
-      this.shadowRoot?.host.classList.remove("highlighted");
-    }
-  }
-  fireSelectionEvent() {
-    const valueEvent = new CustomEvent("eck-option-selected", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        value: this.value,
-        label: this.#getLabel()
-      }
-    });
-    this.shadowRoot?.dispatchEvent(valueEvent);
-  }
-  #getLabel() {
-    if (this.label !== void 0) {
-      return this.label;
-    } else {
-      return this.shadowRoot?.host.innerHTML;
-    }
-  }
-};
-
-// eck-autocomplete/eck-autocomplete-component/eck-autocomplete-component.ts
-var template2 = document.createElement("template");
-template2.innerHTML = `<style>${eck_autocomplete_component_default2}</style>${eck_autocomplete_component_default}`;
+template.innerHTML = `<style>${eck_autocomplete_component_default2}</style>${eck_autocomplete_component_default}`;
 var EckAutocomplete = class extends HTMLElement {
@@ -103,3 +29,3 @@ #connectedToId;
   connectedCallback() {
-    this.shadowRoot?.appendChild(template2.content.cloneNode(true));
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
     this.#slotRef = this.shadowRoot?.querySelector("slot");
@@ -156,3 +82,3 @@ this.#connectedInputRef = document.querySelector(`#${this.#connectedToId}`);
       this.#slotRef?.assignedNodes().forEach((node) => {
-        if (node instanceof EckAutocompleteOption) {
+        if (node.nodeName === "ECK-AUTOCOMPLETE-OPTION") {
           this.#numberOfOptions++;
@@ -223,3 +149,3 @@ node.highlight(false);
       for (let i = 0; i < nodes.length; i++) {
-        if (nodes[i] instanceof EckAutocompleteOption) {
+        if (nodes[i].nodeName === "ECK-AUTOCOMPLETE-OPTION") {
           nodes[i].highlight(true);
@@ -235,3 +161,3 @@ this.#highlightedOptionRef = nodes[i];
     if (Array.isArray(nodes)) {
-      nodes = nodes.filter((node) => node instanceof EckAutocompleteOption);
+      nodes = nodes.filter((node) => node.nodeName === "ECK-AUTOCOMPLETE-OPTION");
       if (this.#highlightedOptionRef === void 0) {
@@ -238,0 +164,0 @@ if (direction === "up") {

eck-autocomplete-option-component/eck-autocomplete-option-component.d.ts

@@ -1,2 +0,2 @@
-import { CustomElement } from '../utils/custom-element';
+import type { CustomElement } from '../utils/custom-element';
 export interface EckOptionSelected {
@@ -3,0 +3,0 @@ value: unknown;

eck-autocomplete-option-component/eck-autocomplete-option-component.js

@@ -1,8 +0,8 @@
-// eck-autocomplete/eck-autocomplete-option-component/eck-autocomplete-option-component.html?raw
-var eck_autocomplete_option_component_default = "<slot></slot>\n";
+// build-artifacts/eck-autocomplete-option-component/eck-autocomplete-option-component.html?raw
+var eck_autocomplete_option_component_default = "<slot></slot>";
 
-// eck-autocomplete/eck-autocomplete-option-component/eck-autocomplete-option-component.css
-var eck_autocomplete_option_component_default2 = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n  padding: 5px;\n}\n\n:host(:hover),\n:host(.highlighted) {\n  background-color: #b3e5fc;\n  cursor: pointer;\n}\n";
+// build-artifacts/eck-autocomplete-option-component/eck-autocomplete-option-component.css
+var eck_autocomplete_option_component_default2 = "*{box-sizing:border-box}:host{display:block;padding:5px}:host(:hover),:host(.highlighted){background-color:#b3e5fc;cursor:pointer}\n";
 
-// eck-autocomplete/eck-autocomplete-option-component/eck-autocomplete-option-component.ts
+// build-artifacts/eck-autocomplete-option-component/eck-autocomplete-option-component.ts
 var template = document.createElement("template");
@@ -9,0 +9,0 @@ template.innerHTML = `<style>${eck_autocomplete_option_component_default2}</style>${eck_autocomplete_option_component_default}`;

eck-autocomplete.js

@@ -1,84 +0,10 @@
-// eck-autocomplete/eck-autocomplete-component/eck-autocomplete-component.html?raw
-var eck_autocomplete_component_default = '<div class="option-container has-children">\n  <slot></slot>\n</div>\n';
+// build-artifacts/eck-autocomplete-component/eck-autocomplete-component.html?raw
+var eck_autocomplete_component_default = '<div class="has-children option-container"><slot></slot></div>';
 
-// eck-autocomplete/eck-autocomplete-component/eck-autocomplete-component.css
-var eck_autocomplete_component_default2 = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  display: none;\n  position: absolute;\n  background-color: #fff;\n}\n\n.option-container.has-children {\n  width: 100%;\n  overflow: auto;\n  border: 1px solid black;\n}\n";
+// build-artifacts/eck-autocomplete-component/eck-autocomplete-component.css
+var eck_autocomplete_component_default2 = "*{box-sizing:border-box}:host{display:none;position:absolute;background-color:#fff}.option-container.has-children{width:100%;overflow:auto;border:1px solid black}\n";
 
-// eck-autocomplete/eck-autocomplete-option-component/eck-autocomplete-option-component.html?raw
-var eck_autocomplete_option_component_default = "<slot></slot>\n";
-
-// eck-autocomplete/eck-autocomplete-option-component/eck-autocomplete-option-component.css
-var eck_autocomplete_option_component_default2 = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n  padding: 5px;\n}\n\n:host(:hover),\n:host(.highlighted) {\n  background-color: #b3e5fc;\n  cursor: pointer;\n}\n";
-
-// eck-autocomplete/eck-autocomplete-option-component/eck-autocomplete-option-component.ts
+// build-artifacts/eck-autocomplete-component/eck-autocomplete-component.ts
 var template = document.createElement("template");
-template.innerHTML = `<style>${eck_autocomplete_option_component_default2}</style>${eck_autocomplete_option_component_default}`;
-var EckAutocompleteOption = class extends HTMLElement {
-  value;
-  label;
-  hasKeyboardHighlight = false;
-  #clickEventListenerAbortController = new AbortController();
-  #clickEventListenerAbortSignal = this.#clickEventListenerAbortController.signal;
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-  }
-  static get tagName() {
-    return "eck-autocomplete-option";
-  }
-  static get observedAttributes() {
-    return ["value", "label"];
-  }
-  connectedCallback() {
-    this.shadowRoot?.appendChild(template.content.cloneNode(true));
-    this.shadowRoot?.host.addEventListener("mousedown", (e) => {
-      e.preventDefault();
-    });
-    this.shadowRoot?.host.addEventListener("click", () => {
-      this.fireSelectionEvent();
-    }, {
-      signal: this.#clickEventListenerAbortSignal
-    });
-  }
-  disconnectedCallback() {
-    this.#clickEventListenerAbortController.abort();
-  }
-  attributeChangedCallback(attrName, oldVal, newVal) {
-    if (attrName === "value") {
-      this.value = newVal;
-    } else if (attrName === "label") {
-      this.label = newVal;
-    }
-  }
-  highlight(highlight) {
-    this.hasKeyboardHighlight = highlight;
-    if (highlight) {
-      this.shadowRoot?.host.classList.add("highlighted");
-    } else {
-      this.shadowRoot?.host.classList.remove("highlighted");
-    }
-  }
-  fireSelectionEvent() {
-    const valueEvent = new CustomEvent("eck-option-selected", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        value: this.value,
-        label: this.#getLabel()
-      }
-    });
-    this.shadowRoot?.dispatchEvent(valueEvent);
-  }
-  #getLabel() {
-    if (this.label !== void 0) {
-      return this.label;
-    } else {
-      return this.shadowRoot?.host.innerHTML;
-    }
-  }
-};
-
-// eck-autocomplete/eck-autocomplete-component/eck-autocomplete-component.ts
-var template2 = document.createElement("template");
-template2.innerHTML = `<style>${eck_autocomplete_component_default2}</style>${eck_autocomplete_component_default}`;
+template.innerHTML = `<style>${eck_autocomplete_component_default2}</style>${eck_autocomplete_component_default}`;
 var EckAutocomplete = class extends HTMLElement {
@@ -103,3 +29,3 @@ #connectedToId;
   connectedCallback() {
-    this.shadowRoot?.appendChild(template2.content.cloneNode(true));
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
     this.#slotRef = this.shadowRoot?.querySelector("slot");
@@ -156,3 +82,3 @@ this.#connectedInputRef = document.querySelector(`#${this.#connectedToId}`);
       this.#slotRef?.assignedNodes().forEach((node) => {
-        if (node instanceof EckAutocompleteOption) {
+        if (node.nodeName === "ECK-AUTOCOMPLETE-OPTION") {
           this.#numberOfOptions++;
@@ -223,3 +149,3 @@ node.highlight(false);
       for (let i = 0; i < nodes.length; i++) {
-        if (nodes[i] instanceof EckAutocompleteOption) {
+        if (nodes[i].nodeName === "ECK-AUTOCOMPLETE-OPTION") {
           nodes[i].highlight(true);
@@ -235,3 +161,3 @@ this.#highlightedOptionRef = nodes[i];
     if (Array.isArray(nodes)) {
-      nodes = nodes.filter((node) => node instanceof EckAutocompleteOption);
+      nodes = nodes.filter((node) => node.nodeName === "ECK-AUTOCOMPLETE-OPTION");
       if (this.#highlightedOptionRef === void 0) {
@@ -274,3 +200,77 @@ if (direction === "up") {
 
-// eck-autocomplete/eck-autocomplete.ts
+// build-artifacts/eck-autocomplete-option-component/eck-autocomplete-option-component.html?raw
+var eck_autocomplete_option_component_default = "<slot></slot>";
+
+// build-artifacts/eck-autocomplete-option-component/eck-autocomplete-option-component.css
+var eck_autocomplete_option_component_default2 = "*{box-sizing:border-box}:host{display:block;padding:5px}:host(:hover),:host(.highlighted){background-color:#b3e5fc;cursor:pointer}\n";
+
+// build-artifacts/eck-autocomplete-option-component/eck-autocomplete-option-component.ts
+var template2 = document.createElement("template");
+template2.innerHTML = `<style>${eck_autocomplete_option_component_default2}</style>${eck_autocomplete_option_component_default}`;
+var EckAutocompleteOption = class extends HTMLElement {
+  value;
+  label;
+  hasKeyboardHighlight = false;
+  #clickEventListenerAbortController = new AbortController();
+  #clickEventListenerAbortSignal = this.#clickEventListenerAbortController.signal;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  static get tagName() {
+    return "eck-autocomplete-option";
+  }
+  static get observedAttributes() {
+    return ["value", "label"];
+  }
+  connectedCallback() {
+    this.shadowRoot?.appendChild(template2.content.cloneNode(true));
+    this.shadowRoot?.host.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+    });
+    this.shadowRoot?.host.addEventListener("click", () => {
+      this.fireSelectionEvent();
+    }, {
+      signal: this.#clickEventListenerAbortSignal
+    });
+  }
+  disconnectedCallback() {
+    this.#clickEventListenerAbortController.abort();
+  }
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    if (attrName === "value") {
+      this.value = newVal;
+    } else if (attrName === "label") {
+      this.label = newVal;
+    }
+  }
+  highlight(highlight) {
+    this.hasKeyboardHighlight = highlight;
+    if (highlight) {
+      this.shadowRoot?.host.classList.add("highlighted");
+    } else {
+      this.shadowRoot?.host.classList.remove("highlighted");
+    }
+  }
+  fireSelectionEvent() {
+    const valueEvent = new CustomEvent("eck-option-selected", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        value: this.value,
+        label: this.#getLabel()
+      }
+    });
+    this.shadowRoot?.dispatchEvent(valueEvent);
+  }
+  #getLabel() {
+    if (this.label !== void 0) {
+      return this.label;
+    } else {
+      return this.shadowRoot?.host.innerHTML;
+    }
+  }
+};
+
+// build-artifacts/eck-autocomplete.ts
 if (customElements.get(EckAutocompleteOption.tagName) === void 0) {
@@ -277,0 +277,0 @@ customElements.define(EckAutocompleteOption.tagName, EckAutocompleteOption);

min/eck-autocomplete-component/eck-autocomplete-component.js

@@ -1,35 +0,3 @@
-var l=`<div class="option-container has-children">
-  <slot></slot>
-</div>
-`;var h=`* {
-  box-sizing: border-box;
-}
-
-:host {
-  display: none;
-  position: absolute;
-  background-color: #fff;
-}
-
-.option-container.has-children {
-  width: 100%;
-  overflow: auto;
-  border: 1px solid black;
-}
-`;var a=`<slot></slot>
-`;var r=`* {
-  box-sizing: border-box;
-}
-
-:host {
-  display: block;
-  padding: 5px;
-}
-
-:host(:hover),
-:host(.highlighted) {
-  background-color: #b3e5fc;
-  cursor: pointer;
-}
-`;var d=document.createElement("template");d.innerHTML=`<style>${r}</style>${a}`;var s=class extends HTMLElement{value;label;hasKeyboardHighlight=!1;#i=new AbortController;#o=this.#i.signal;constructor(){super();this.attachShadow({mode:"open"})}static get tagName(){return"eck-autocomplete-option"}static get observedAttributes(){return["value","label"]}connectedCallback(){this.shadowRoot?.appendChild(d.content.cloneNode(!0)),this.shadowRoot?.host.addEventListener("mousedown",t=>{t.preventDefault()}),this.shadowRoot?.host.addEventListener("click",()=>{this.fireSelectionEvent()},{signal:this.#o})}disconnectedCallback(){this.#i.abort()}attributeChangedCallback(t,e,i){t==="value"?this.value=i:t==="label"&&(this.label=i)}highlight(t){this.hasKeyboardHighlight=t,t?this.shadowRoot?.host.classList.add("highlighted"):this.shadowRoot?.host.classList.remove("highlighted")}fireSelectionEvent(){let t=new CustomEvent("eck-option-selected",{bubbles:!0,composed:!0,detail:{value:this.value,label:this.#t()}});this.shadowRoot?.dispatchEvent(t)}#t(){return this.label!==void 0?this.label:this.shadowRoot?.host.innerHTML}};var c=document.createElement("template");c.innerHTML=`<style>${h}</style>${l}`;var b=class extends HTMLElement{#i;#o=!1;#t;#s;#l=0;#n=!0;#e;constructor(){super();this.attachShadow({mode:"open"})}static get tagName(){return"eck-autocomplete"}static get observedAttributes(){return["connected-to-id","highlight-first-option"]}connectedCallback(){this.shadowRoot?.appendChild(c.content.cloneNode(!0)),this.#s=this.shadowRoot?.querySelector("slot"),this.#t=document.querySelector(`#${this.#i}`),this.#c(),this.#t?.addEventListener("focus",()=>{this.#h()}),this.#t?.addEventListener("input",()=>{this.#h()}),this.#t?.addEventListener("blur",()=>{this.#a()}),this.#t?.addEventListener("keydown",t=>{switch(t.key){case"Enter":this.#p(t);break;case"Escape":t.preventDefault(),this.#a();break;case"ArrowUp":t.preventDefault(),this.#n?this.#h():this.#d("up");break;case"ArrowDown":t.preventDefault(),this.#n?this.#h():this.#d("down");break}})}attributeChangedCallback(t,e,i){t==="connected-to-id"?this.#i=i:t==="highlight-first-option"&&(this.#o=i==="true")}#c(){this.#s?.addEventListener("slotchange",()=>{this.#l=0,this.#s?.assignedNodes().forEach(t=>{t instanceof s&&(this.#l++,t.highlight(!1),this.#e=void 0,t.addEventListener("eck-option-selected",e=>{this.#t&&(this.#t.value=e.detail.label);let i=new CustomEvent("optionSelected",{bubbles:!0,composed:!0,detail:{option:e.detail}});this.shadowRoot?.dispatchEvent(i),this.#a()}))}),this.#o&&this.#r(),this.#l===0?this.shadowRoot?.querySelector(".option-container")?.classList.remove("has-children"):this.shadowRoot?.querySelector(".option-container")?.classList.add("has-children")})}#h(){this.#u(),this.#e?.highlight(!1),this.#e=void 0,this.#o&&this.#r(),(this.shadowRoot?.host).style.display="block",this.#n=!1}#a(){(this.shadowRoot?.host).style.display="none",this.#n=!0}#u(){let t=this.#t?.getBoundingClientRect().width;(this.shadowRoot?.host).style.width=`${t}px`;let e=this.#t?.getBoundingClientRect().x,i=this.#t?.getBoundingClientRect().bottom;e&&i&&(e+=window.scrollX,i+=window.scrollY),(this.shadowRoot?.host).style.left=`${e}px`,(this.shadowRoot?.host).style.top=`${i}px`}#p(t){this.#n||this.#e===void 0||this.#l===0||(t.preventDefault(),this.#e?.fireSelectionEvent())}#r(){let t=this.#s?.assignedNodes();if(Array.isArray(t)){for(let e=0;e<t.length;e++)if(t[e]instanceof s){t[e].highlight(!0),this.#e=t[e];break}}}#d(t){let e=this.#s?.assignedNodes();if(Array.isArray(e)){if(e=e.filter(i=>i instanceof s),this.#e===void 0){t==="up"?(e[e.length-1].highlight(!0),this.#e=e[e.length-1]):t==="down"&&(e[0].highlight(!0),this.#e=e[0]);return}for(let i=0;i<e.length;i++){let n=e[i];if(n.hasKeyboardHighlight){n.highlight(!1);let o=0;t==="up"?i>0?o=i-1:o=e.length-1:t==="down"&&(i<e.length-1?o=i+1:o=0),e[o].highlight(!0),this.#e=e[o];break}}}}};export{b as EckAutocomplete};
+var n='<div class="has-children option-container"><slot></slot></div>';var h=`*{box-sizing:border-box}:host{display:none;position:absolute;background-color:#fff}.option-container.has-children{width:100%;overflow:auto;border:1px solid black}
+`;var l=document.createElement("template");l.innerHTML=`<style>${h}</style>${n}`;var r=class extends HTMLElement{#a;#h=!1;#t;#i;#s=0;#o=!0;#e;constructor(){super();this.attachShadow({mode:"open"})}static get tagName(){return"eck-autocomplete"}static get observedAttributes(){return["connected-to-id","highlight-first-option"]}connectedCallback(){this.shadowRoot?.appendChild(l.content.cloneNode(!0)),this.#i=this.shadowRoot?.querySelector("slot"),this.#t=document.querySelector(`#${this.#a}`),this.#c(),this.#t?.addEventListener("focus",()=>{this.#n()}),this.#t?.addEventListener("input",()=>{this.#n()}),this.#t?.addEventListener("blur",()=>{this.#l()}),this.#t?.addEventListener("keydown",e=>{switch(e.key){case"Enter":this.#u(e);break;case"Escape":e.preventDefault(),this.#l();break;case"ArrowUp":e.preventDefault(),this.#o?this.#n():this.#r("up");break;case"ArrowDown":e.preventDefault(),this.#o?this.#n():this.#r("down");break}})}attributeChangedCallback(e,t,i){e==="connected-to-id"?this.#a=i:e==="highlight-first-option"&&(this.#h=i==="true")}#c(){this.#i?.addEventListener("slotchange",()=>{this.#s=0,this.#i?.assignedNodes().forEach(e=>{e.nodeName==="ECK-AUTOCOMPLETE-OPTION"&&(this.#s++,e.highlight(!1),this.#e=void 0,e.addEventListener("eck-option-selected",t=>{this.#t&&(this.#t.value=t.detail.label);let i=new CustomEvent("optionSelected",{bubbles:!0,composed:!0,detail:{option:t.detail}});this.shadowRoot?.dispatchEvent(i),this.#l()}))}),this.#h&&this.#d(),this.#s===0?this.shadowRoot?.querySelector(".option-container")?.classList.remove("has-children"):this.shadowRoot?.querySelector(".option-container")?.classList.add("has-children")})}#n(){this.#p(),this.#e?.highlight(!1),this.#e=void 0,this.#h&&this.#d(),(this.shadowRoot?.host).style.display="block",this.#o=!1}#l(){(this.shadowRoot?.host).style.display="none",this.#o=!0}#p(){let e=this.#t?.getBoundingClientRect().width;(this.shadowRoot?.host).style.width=`${e}px`;let t=this.#t?.getBoundingClientRect().x,i=this.#t?.getBoundingClientRect().bottom;t&&i&&(t+=window.scrollX,i+=window.scrollY),(this.shadowRoot?.host).style.left=`${t}px`,(this.shadowRoot?.host).style.top=`${i}px`}#u(e){this.#o||this.#e===void 0||this.#s===0||(e.preventDefault(),this.#e?.fireSelectionEvent())}#d(){let e=this.#i?.assignedNodes();if(Array.isArray(e)){for(let t=0;t<e.length;t++)if(e[t].nodeName==="ECK-AUTOCOMPLETE-OPTION"){e[t].highlight(!0),this.#e=e[t];break}}}#r(e){let t=this.#i?.assignedNodes();if(Array.isArray(t)){if(t=t.filter(i=>i.nodeName==="ECK-AUTOCOMPLETE-OPTION"),this.#e===void 0){e==="up"?(t[t.length-1].highlight(!0),this.#e=t[t.length-1]):e==="down"&&(t[0].highlight(!0),this.#e=t[0]);return}for(let i=0;i<t.length;i++){let s=t[i];if(s.hasKeyboardHighlight){s.highlight(!1);let o=0;e==="up"?i>0?o=i-1:o=t.length-1:e==="down"&&(i<t.length-1?o=i+1:o=0),t[o].highlight(!0),this.#e=t[o];break}}}}};export{r as EckAutocomplete};
 //# sourceMappingURL=eck-autocomplete-component.js.map

min/eck-autocomplete-option-component/eck-autocomplete-option-component.js

@@ -1,17 +0,3 @@
-var o=`<slot></slot>
-`;var s=`* {
-  box-sizing: border-box;
-}
-
-:host {
-  display: block;
-  padding: 5px;
-}
-
-:host(:hover),
-:host(.highlighted) {
-  background-color: #b3e5fc;
-  cursor: pointer;
-}
+var o="<slot></slot>";var s=`*{box-sizing:border-box}:host{display:block;padding:5px}:host(:hover),:host(.highlighted){background-color:#b3e5fc;cursor:pointer}
 `;var l=document.createElement("template");l.innerHTML=`<style>${s}</style>${o}`;var a=class extends HTMLElement{value;label;hasKeyboardHighlight=!1;#e=new AbortController;#t=this.#e.signal;constructor(){super();this.attachShadow({mode:"open"})}static get tagName(){return"eck-autocomplete-option"}static get observedAttributes(){return["value","label"]}connectedCallback(){this.shadowRoot?.appendChild(l.content.cloneNode(!0)),this.shadowRoot?.host.addEventListener("mousedown",e=>{e.preventDefault()}),this.shadowRoot?.host.addEventListener("click",()=>{this.fireSelectionEvent()},{signal:this.#t})}disconnectedCallback(){this.#e.abort()}attributeChangedCallback(e,h,t){e==="value"?this.value=t:e==="label"&&(this.label=t)}highlight(e){this.hasKeyboardHighlight=e,e?this.shadowRoot?.host.classList.add("highlighted"):this.shadowRoot?.host.classList.remove("highlighted")}fireSelectionEvent(){let e=new CustomEvent("eck-option-selected",{bubbles:!0,composed:!0,detail:{value:this.value,label:this.#o()}});this.shadowRoot?.dispatchEvent(e)}#o(){return this.label!==void 0?this.label:this.shadowRoot?.host.innerHTML}};export{a as EckAutocompleteOption};
 //# sourceMappingURL=eck-autocomplete-option-component.js.map

min/eck-autocomplete.js

@@ -1,35 +0,4 @@
-var h=`<div class="option-container has-children">
-  <slot></slot>
-</div>
-`;var a=`* {
-  box-sizing: border-box;
-}
-
-:host {
-  display: none;
-  position: absolute;
-  background-color: #fff;
-}
-
-.option-container.has-children {
-  width: 100%;
-  overflow: auto;
-  border: 1px solid black;
-}
-`;var r=`<slot></slot>
-`;var d=`* {
-  box-sizing: border-box;
-}
-
-:host {
-  display: block;
-  padding: 5px;
-}
-
-:host(:hover),
-:host(.highlighted) {
-  background-color: #b3e5fc;
-  cursor: pointer;
-}
-`;var c=document.createElement("template");c.innerHTML=`<style>${d}</style>${r}`;var o=class extends HTMLElement{value;label;hasKeyboardHighlight=!1;#i=new AbortController;#o=this.#i.signal;constructor(){super();this.attachShadow({mode:"open"})}static get tagName(){return"eck-autocomplete-option"}static get observedAttributes(){return["value","label"]}connectedCallback(){this.shadowRoot?.appendChild(c.content.cloneNode(!0)),this.shadowRoot?.host.addEventListener("mousedown",t=>{t.preventDefault()}),this.shadowRoot?.host.addEventListener("click",()=>{this.fireSelectionEvent()},{signal:this.#o})}disconnectedCallback(){this.#i.abort()}attributeChangedCallback(t,e,i){t==="value"?this.value=i:t==="label"&&(this.label=i)}highlight(t){this.hasKeyboardHighlight=t,t?this.shadowRoot?.host.classList.add("highlighted"):this.shadowRoot?.host.classList.remove("highlighted")}fireSelectionEvent(){let t=new CustomEvent("eck-option-selected",{bubbles:!0,composed:!0,detail:{value:this.value,label:this.#t()}});this.shadowRoot?.dispatchEvent(t)}#t(){return this.label!==void 0?this.label:this.shadowRoot?.host.innerHTML}};var u=document.createElement("template");u.innerHTML=`<style>${a}</style>${h}`;var n=class extends HTMLElement{#i;#o=!1;#t;#s;#l=0;#n=!0;#e;constructor(){super();this.attachShadow({mode:"open"})}static get tagName(){return"eck-autocomplete"}static get observedAttributes(){return["connected-to-id","highlight-first-option"]}connectedCallback(){this.shadowRoot?.appendChild(u.content.cloneNode(!0)),this.#s=this.shadowRoot?.querySelector("slot"),this.#t=document.querySelector(`#${this.#i}`),this.#c(),this.#t?.addEventListener("focus",()=>{this.#h()}),this.#t?.addEventListener("input",()=>{this.#h()}),this.#t?.addEventListener("blur",()=>{this.#a()}),this.#t?.addEventListener("keydown",t=>{switch(t.key){case"Enter":this.#p(t);break;case"Escape":t.preventDefault(),this.#a();break;case"ArrowUp":t.preventDefault(),this.#n?this.#h():this.#d("up");break;case"ArrowDown":t.preventDefault(),this.#n?this.#h():this.#d("down");break}})}attributeChangedCallback(t,e,i){t==="connected-to-id"?this.#i=i:t==="highlight-first-option"&&(this.#o=i==="true")}#c(){this.#s?.addEventListener("slotchange",()=>{this.#l=0,this.#s?.assignedNodes().forEach(t=>{t instanceof o&&(this.#l++,t.highlight(!1),this.#e=void 0,t.addEventListener("eck-option-selected",e=>{this.#t&&(this.#t.value=e.detail.label);let i=new CustomEvent("optionSelected",{bubbles:!0,composed:!0,detail:{option:e.detail}});this.shadowRoot?.dispatchEvent(i),this.#a()}))}),this.#o&&this.#r(),this.#l===0?this.shadowRoot?.querySelector(".option-container")?.classList.remove("has-children"):this.shadowRoot?.querySelector(".option-container")?.classList.add("has-children")})}#h(){this.#u(),this.#e?.highlight(!1),this.#e=void 0,this.#o&&this.#r(),(this.shadowRoot?.host).style.display="block",this.#n=!1}#a(){(this.shadowRoot?.host).style.display="none",this.#n=!0}#u(){let t=this.#t?.getBoundingClientRect().width;(this.shadowRoot?.host).style.width=`${t}px`;let e=this.#t?.getBoundingClientRect().x,i=this.#t?.getBoundingClientRect().bottom;e&&i&&(e+=window.scrollX,i+=window.scrollY),(this.shadowRoot?.host).style.left=`${e}px`,(this.shadowRoot?.host).style.top=`${i}px`}#p(t){this.#n||this.#e===void 0||this.#l===0||(t.preventDefault(),this.#e?.fireSelectionEvent())}#r(){let t=this.#s?.assignedNodes();if(Array.isArray(t)){for(let e=0;e<t.length;e++)if(t[e]instanceof o){t[e].highlight(!0),this.#e=t[e];break}}}#d(t){let e=this.#s?.assignedNodes();if(Array.isArray(e)){if(e=e.filter(i=>i instanceof o),this.#e===void 0){t==="up"?(e[e.length-1].highlight(!0),this.#e=e[e.length-1]):t==="down"&&(e[0].highlight(!0),this.#e=e[0]);return}for(let i=0;i<e.length;i++){let l=e[i];if(l.hasKeyboardHighlight){l.highlight(!1);let s=0;t==="up"?i>0?s=i-1:s=e.length-1:t==="down"&&(i<e.length-1?s=i+1:s=0),e[s].highlight(!0),this.#e=e[s];break}}}}};customElements.get(o.tagName)===void 0&&customElements.define(o.tagName,o);customElements.get(n.tagName)===void 0&&customElements.define(n.tagName,n);
+var h='<div class="has-children option-container"><slot></slot></div>';var a=`*{box-sizing:border-box}:host{display:none;position:absolute;background-color:#fff}.option-container.has-children{width:100%;overflow:auto;border:1px solid black}
+`;var r=document.createElement("template");r.innerHTML=`<style>${a}</style>${h}`;var s=class extends HTMLElement{#o;#i=!1;#t;#s;#l=0;#n=!0;#e;constructor(){super();this.attachShadow({mode:"open"})}static get tagName(){return"eck-autocomplete"}static get observedAttributes(){return["connected-to-id","highlight-first-option"]}connectedCallback(){this.shadowRoot?.appendChild(r.content.cloneNode(!0)),this.#s=this.shadowRoot?.querySelector("slot"),this.#t=document.querySelector(`#${this.#o}`),this.#c(),this.#t?.addEventListener("focus",()=>{this.#h()}),this.#t?.addEventListener("input",()=>{this.#h()}),this.#t?.addEventListener("blur",()=>{this.#a()}),this.#t?.addEventListener("keydown",t=>{switch(t.key){case"Enter":this.#p(t);break;case"Escape":t.preventDefault(),this.#a();break;case"ArrowUp":t.preventDefault(),this.#n?this.#h():this.#d("up");break;case"ArrowDown":t.preventDefault(),this.#n?this.#h():this.#d("down");break}})}attributeChangedCallback(t,e,o){t==="connected-to-id"?this.#o=o:t==="highlight-first-option"&&(this.#i=o==="true")}#c(){this.#s?.addEventListener("slotchange",()=>{this.#l=0,this.#s?.assignedNodes().forEach(t=>{t.nodeName==="ECK-AUTOCOMPLETE-OPTION"&&(this.#l++,t.highlight(!1),this.#e=void 0,t.addEventListener("eck-option-selected",e=>{this.#t&&(this.#t.value=e.detail.label);let o=new CustomEvent("optionSelected",{bubbles:!0,composed:!0,detail:{option:e.detail}});this.shadowRoot?.dispatchEvent(o),this.#a()}))}),this.#i&&this.#r(),this.#l===0?this.shadowRoot?.querySelector(".option-container")?.classList.remove("has-children"):this.shadowRoot?.querySelector(".option-container")?.classList.add("has-children")})}#h(){this.#u(),this.#e?.highlight(!1),this.#e=void 0,this.#i&&this.#r(),(this.shadowRoot?.host).style.display="block",this.#n=!1}#a(){(this.shadowRoot?.host).style.display="none",this.#n=!0}#u(){let t=this.#t?.getBoundingClientRect().width;(this.shadowRoot?.host).style.width=`${t}px`;let e=this.#t?.getBoundingClientRect().x,o=this.#t?.getBoundingClientRect().bottom;e&&o&&(e+=window.scrollX,o+=window.scrollY),(this.shadowRoot?.host).style.left=`${e}px`,(this.shadowRoot?.host).style.top=`${o}px`}#p(t){this.#n||this.#e===void 0||this.#l===0||(t.preventDefault(),this.#e?.fireSelectionEvent())}#r(){let t=this.#s?.assignedNodes();if(Array.isArray(t)){for(let e=0;e<t.length;e++)if(t[e].nodeName==="ECK-AUTOCOMPLETE-OPTION"){t[e].highlight(!0),this.#e=t[e];break}}}#d(t){let e=this.#s?.assignedNodes();if(Array.isArray(e)){if(e=e.filter(o=>o.nodeName==="ECK-AUTOCOMPLETE-OPTION"),this.#e===void 0){t==="up"?(e[e.length-1].highlight(!0),this.#e=e[e.length-1]):t==="down"&&(e[0].highlight(!0),this.#e=e[0]);return}for(let o=0;o<e.length;o++){let l=e[o];if(l.hasKeyboardHighlight){l.highlight(!1);let i=0;t==="up"?o>0?i=o-1:i=e.length-1:t==="down"&&(o<e.length-1?i=o+1:i=0),e[i].highlight(!0),this.#e=e[i];break}}}}};var d="<slot></slot>";var c=`*{box-sizing:border-box}:host{display:block;padding:5px}:host(:hover),:host(.highlighted){background-color:#b3e5fc;cursor:pointer}
+`;var u=document.createElement("template");u.innerHTML=`<style>${c}</style>${d}`;var n=class extends HTMLElement{value;label;hasKeyboardHighlight=!1;#o=new AbortController;#i=this.#o.signal;constructor(){super();this.attachShadow({mode:"open"})}static get tagName(){return"eck-autocomplete-option"}static get observedAttributes(){return["value","label"]}connectedCallback(){this.shadowRoot?.appendChild(u.content.cloneNode(!0)),this.shadowRoot?.host.addEventListener("mousedown",t=>{t.preventDefault()}),this.shadowRoot?.host.addEventListener("click",()=>{this.fireSelectionEvent()},{signal:this.#i})}disconnectedCallback(){this.#o.abort()}attributeChangedCallback(t,e,o){t==="value"?this.value=o:t==="label"&&(this.label=o)}highlight(t){this.hasKeyboardHighlight=t,t?this.shadowRoot?.host.classList.add("highlighted"):this.shadowRoot?.host.classList.remove("highlighted")}fireSelectionEvent(){let t=new CustomEvent("eck-option-selected",{bubbles:!0,composed:!0,detail:{value:this.value,label:this.#t()}});this.shadowRoot?.dispatchEvent(t)}#t(){return this.label!==void 0?this.label:this.shadowRoot?.host.innerHTML}};customElements.get(n.tagName)===void 0&&customElements.define(n.tagName,n);customElements.get(s.tagName)===void 0&&customElements.define(s.tagName,s);
 //# sourceMappingURL=eck-autocomplete.js.map

package.json

 {
   "name": "eck-autocomplete",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Autocomplete web component. Suggests options for an input.",
@@ -5,0 +5,0 @@ "author": "Leon Eck",

README.md

@@ -31,3 +31,3 @@ <h1 align="center">
   type="module"
-  src="https://unpkg.com/eck-autocomplete@0.0.6/min/eck-autocomplete.js"
+  src="https://unpkg.com/eck-autocomplete@0.0.7/min/eck-autocomplete.js"
 ></script>
@@ -34,0 +34,0 @@ ```

No alert changes

Worsened metrics

Total package byte prevSize

101077

decreased by-10.6%

Lines of code

629

decreased by-18.42%

No dependency changes