eck-autocomplete - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

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

@@ -8,3 +8,3 @@ import type { CustomElement } from '../utils/custom-element';
     connectedCallback(): void;
-    attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void;
+    attributeChangedCallback(attrName: string, oldVal: string | null, newVal: string | null): void;
 }

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

 // build-artifacts/eck-autocomplete-component/eck-autocomplete-component.html?raw
-var eck_autocomplete_component_default = '<div class="has-children option-container"><slot></slot></div>';
+var eck_autocomplete_component_default = "<slot></slot>";
 
 // 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";
+var eck_autocomplete_component_default2 = ":host{box-sizing:border-box;display:none;position:absolute;background-color:#fff;overflow:auto;max-height:256px}:host([has-children]){border:1px solid black}";
 
+// build-artifacts/utils/coerceBoolean.ts
+var coerceBoolean = (value) => {
+  return value !== null && value !== "false";
+};
+
 // build-artifacts/eck-autocomplete-component/eck-autocomplete-component.ts
@@ -18,5 +23,7 @@ var template = document.createElement("template");
   #highlightedOptionRef;
+  #positionStrategy = "absolute";
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
@@ -27,43 +34,30 @@ static get tagName() {
   static get observedAttributes() {
-    return ["connected-to-id", "highlight-first-option"];
+    return ["connected-to-id", "highlight-first-option", "position-strategy"];
   }
   connectedCallback() {
-    this.shadowRoot?.appendChild(template.content.cloneNode(true));
-    this.#slotRef = this.shadowRoot?.querySelector("slot");
+    this.#slotRef = this.shadowRoot.querySelector("slot");
     this.#connectedInputRef = document.querySelector(`#${this.#connectedToId}`);
     this.#init();
-    this.#connectedInputRef?.addEventListener("focus", () => {
+    this.#connectedInputRef.addEventListener("focus", () => {
       this.#show();
     });
-    this.#connectedInputRef?.addEventListener("input", () => {
+    this.#connectedInputRef.addEventListener("input", () => {
       this.#show();
     });
-    this.#connectedInputRef?.addEventListener("blur", () => {
+    this.#connectedInputRef.addEventListener("blur", () => {
       this.#hide();
     });
-    this.#connectedInputRef?.addEventListener("keydown", (e) => {
-      switch (e.key) {
-        case "Enter":
-          this.#handleEnterOnInput(e);
-          break;
-        case "Escape":
-          e.preventDefault();
-          this.#hide();
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          if (this.#panelHidden) {
-            this.#show();
-          } else {
-            this.#changeHighlight("up");
-          }
-          break;
-        case "ArrowDown":
-          e.preventDefault();
-          if (this.#panelHidden) {
-            this.#show();
-          } else {
-            this.#changeHighlight("down");
-          }
-          break;
+    this.#connectedInputRef.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        this.#handleEnterOnInput(e);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        this.#hide();
+      } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+        e.preventDefault();
+        if (this.#panelHidden) {
+          this.#show();
+        } else {
+          this.#changeHighlight(e.key);
+        }
       }
@@ -76,9 +70,17 @@ });
     } else if (attrName === "highlight-first-option") {
-      this.#shouldHighlightFirstOption = newVal === "true";
+      this.#shouldHighlightFirstOption = coerceBoolean(newVal);
+    } else if (attrName === "position-strategy") {
+      if (newVal === "fixed") {
+        this.shadowRoot.host.style.position = "fixed";
+        this.#positionStrategy = "fixed";
+      } else {
+        this.shadowRoot.host.style.position = "absolute";
+        this.#positionStrategy = "absolute";
+      }
     }
   }
   #init() {
-    this.#slotRef?.addEventListener("slotchange", () => {
+    this.#slotRef.addEventListener("slotchange", () => {
       this.#numberOfOptions = 0;
-      this.#slotRef?.assignedNodes().forEach((node) => {
+      this.#slotRef.assignedNodes().forEach((node) => {
         if (node.nodeName === "ECK-AUTOCOMPLETE-OPTION") {
@@ -89,6 +91,4 @@ this.#numberOfOptions++;
           node.addEventListener("eck-option-selected", (value) => {
-            if (this.#connectedInputRef) {
-              this.#connectedInputRef.value = value.detail.label;
-            }
-            const optionSelectedEvent = new CustomEvent("optionSelected", {
+            this.#connectedInputRef.value = value.detail.label;
+            this.shadowRoot.dispatchEvent(new CustomEvent("optionSelected", {
               bubbles: true,
@@ -99,4 +99,3 @@ composed: true,
               }
-            });
-            this.shadowRoot?.dispatchEvent(optionSelectedEvent);
+            }));
             this.#hide();
@@ -106,10 +105,4 @@ });
       });
-      if (this.#shouldHighlightFirstOption) {
-        this.#highlightFirstOption();
-      }
-      if (this.#numberOfOptions === 0) {
-        this.shadowRoot?.querySelector(".option-container")?.classList.remove("has-children");
-      } else {
-        this.shadowRoot?.querySelector(".option-container")?.classList.add("has-children");
-      }
+      this.#highlightFirstOption();
+      this.shadowRoot.host.toggleAttribute("has-children", this.#numberOfOptions !== 0);
     });
@@ -121,23 +114,31 @@ }
     this.#highlightedOptionRef = void 0;
-    if (this.#shouldHighlightFirstOption) {
-      this.#highlightFirstOption();
-    }
-    (this.shadowRoot?.host).style.display = "block";
+    this.#highlightFirstOption();
+    this.shadowRoot.host.style.display = "block";
     this.#panelHidden = false;
   }
   #hide() {
-    (this.shadowRoot?.host).style.display = "none";
+    this.shadowRoot.host.style.display = "none";
     this.#panelHidden = true;
   }
   #positionPanel() {
-    const inputWidth = this.#connectedInputRef?.getBoundingClientRect().width;
-    (this.shadowRoot?.host).style.width = `${inputWidth}px`;
-    let inputLeftX = this.#connectedInputRef?.getBoundingClientRect().x;
-    let inputBottomY = this.#connectedInputRef?.getBoundingClientRect().bottom;
-    if (inputLeftX && inputBottomY) {
-      inputLeftX += window.scrollX;
-      inputBottomY += window.scrollY;
+    const inputWidth = this.#connectedInputRef.getBoundingClientRect().width;
+    this.shadowRoot.host.style.width = `${inputWidth}px`;
+    let inputLeftX;
+    let inputBottomY;
+    if (this.#positionStrategy === "absolute") {
+      inputLeftX = this.#connectedInputRef.offsetLeft;
+      inputBottomY = this.#connectedInputRef.offsetTop + this.#connectedInputRef.getBoundingClientRect().height;
+    } else {
+      if (this.#connectedInputRef.offsetParent.style.position === "absolute") {
+        inputLeftX = this.#connectedInputRef.offsetLeft;
+        inputBottomY = this.#connectedInputRef.getBoundingClientRect().top - this.#connectedInputRef.offsetParent.getBoundingClientRect().top + this.#connectedInputRef.getBoundingClientRect().height;
+      } else {
+        inputLeftX = this.#connectedInputRef.getBoundingClientRect().x;
+        inputBottomY = this.#connectedInputRef.getBoundingClientRect().bottom;
+        inputLeftX += window.scrollX;
+        inputBottomY += window.scrollY;
+      }
     }
-    (this.shadowRoot?.host).style.left = `${inputLeftX}px`;
-    (this.shadowRoot?.host).style.top = `${inputBottomY}px`;
+    this.shadowRoot.host.style.left = `${inputLeftX}px`;
+    this.shadowRoot.host.style.top = `${inputBottomY}px`;
   }
@@ -151,3 +152,5 @@ #handleEnterOnInput(e) {
   #highlightFirstOption() {
-    const nodes = this.#slotRef?.assignedNodes();
+    if (!this.#shouldHighlightFirstOption)
+      return;
+    const nodes = this.#slotRef.assignedNodes();
     if (Array.isArray(nodes)) {
@@ -164,10 +167,10 @@ for (let i = 0; i < nodes.length; i++) {
   #changeHighlight(direction) {
-    let nodes = this.#slotRef?.assignedNodes();
+    let nodes = this.#slotRef.assignedNodes();
     if (Array.isArray(nodes)) {
       nodes = nodes.filter((node) => node.nodeName === "ECK-AUTOCOMPLETE-OPTION");
       if (this.#highlightedOptionRef === void 0) {
-        if (direction === "up") {
+        if (direction === "ArrowUp") {
           nodes[nodes.length - 1].highlight(true);
           this.#highlightedOptionRef = nodes[nodes.length - 1];
-        } else if (direction === "down") {
+        } else if (direction === "ArrowDown") {
           nodes[0].highlight(true);
@@ -183,3 +186,3 @@ this.#highlightedOptionRef = nodes[0];
           let indexToHighlight = 0;
-          if (direction === "up") {
+          if (direction === "ArrowUp") {
             if (i > 0) {
@@ -190,3 +193,3 @@ indexToHighlight = i - 1;
             }
-          } else if (direction === "down") {
+          } else if (direction === "ArrowDown") {
             if (i < nodes.length - 1) {
@@ -193,0 +196,0 @@ indexToHighlight = i + 1;

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

@@ -26,6 +26,5 @@ import type { CustomElement } from '../utils/custom-element';
     connectedCallback(): void;
-    disconnectedCallback(): void;
-    attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void;
+    attributeChangedCallback(attrName: string, oldVal: string | null, newVal: string | null): void;
     highlight(highlight: boolean): void;
     fireSelectionEvent(): void;
 }

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

@@ -5,3 +5,3 @@ // build-artifacts/eck-autocomplete-option-component/eck-autocomplete-option-component.html?raw
 // 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";
+var eck_autocomplete_option_component_default2 = ":host{box-sizing:border-box;display:block;padding:5px;color:#000}:host(:hover),:host([highlighted]){background-color:#b3e5fc;cursor:pointer}";
 
@@ -15,7 +15,6 @@ // build-artifacts/eck-autocomplete-option-component/eck-autocomplete-option-component.ts
   hasKeyboardHighlight = false;
-  #clickEventListenerAbortController = new AbortController();
-  #clickEventListenerAbortSignal = this.#clickEventListenerAbortController.signal;
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
@@ -29,15 +28,9 @@ static get tagName() {
   connectedCallback() {
-    this.shadowRoot?.appendChild(template.content.cloneNode(true));
-    this.shadowRoot?.host.addEventListener("mousedown", (e) => {
+    this.shadowRoot.host.addEventListener("mousedown", (e) => {
       e.preventDefault();
     });
-    this.shadowRoot?.host.addEventListener("click", () => {
+    this.shadowRoot.host.addEventListener("click", () => {
       this.fireSelectionEvent();
-    }, {
-      signal: this.#clickEventListenerAbortSignal
     });
   }
-  disconnectedCallback() {
-    this.#clickEventListenerAbortController.abort();
-  }
   attributeChangedCallback(attrName, oldVal, newVal) {
@@ -47,3 +40,3 @@ if (attrName === "value") {
     } else if (attrName === "label") {
-      this.label = newVal;
+      this.label = newVal ? newVal : void 0;
     }
@@ -53,10 +46,6 @@ }
     this.hasKeyboardHighlight = highlight;
-    if (highlight) {
-      this.shadowRoot?.host.classList.add("highlighted");
-    } else {
-      this.shadowRoot?.host.classList.remove("highlighted");
-    }
+    this.shadowRoot.host.toggleAttribute("highlighted", highlight);
   }
   fireSelectionEvent() {
-    const valueEvent = new CustomEvent("eck-option-selected", {
+    this.shadowRoot.dispatchEvent(new CustomEvent("eck-option-selected", {
       bubbles: true,
@@ -68,4 +57,3 @@ composed: true,
       }
-    });
-    this.shadowRoot?.dispatchEvent(valueEvent);
+    }));
   }
@@ -76,3 +64,3 @@ #getLabel() {
     } else {
-      return this.shadowRoot?.host.innerHTML;
+      return this.shadowRoot.host.innerHTML;
     }
@@ -79,0 +67,0 @@ }

eck-autocomplete.js

 // build-artifacts/eck-autocomplete-component/eck-autocomplete-component.html?raw
-var eck_autocomplete_component_default = '<div class="has-children option-container"><slot></slot></div>';
+var eck_autocomplete_component_default = "<slot></slot>";
 
 // 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";
+var eck_autocomplete_component_default2 = ":host{box-sizing:border-box;display:none;position:absolute;background-color:#fff;overflow:auto;max-height:256px}:host([has-children]){border:1px solid black}";
 
+// build-artifacts/utils/coerceBoolean.ts
+var coerceBoolean = (value) => {
+  return value !== null && value !== "false";
+};
+
 // build-artifacts/eck-autocomplete-component/eck-autocomplete-component.ts
@@ -18,5 +23,7 @@ var template = document.createElement("template");
   #highlightedOptionRef;
+  #positionStrategy = "absolute";
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
@@ -27,43 +34,30 @@ static get tagName() {
   static get observedAttributes() {
-    return ["connected-to-id", "highlight-first-option"];
+    return ["connected-to-id", "highlight-first-option", "position-strategy"];
   }
   connectedCallback() {
-    this.shadowRoot?.appendChild(template.content.cloneNode(true));
-    this.#slotRef = this.shadowRoot?.querySelector("slot");
+    this.#slotRef = this.shadowRoot.querySelector("slot");
     this.#connectedInputRef = document.querySelector(`#${this.#connectedToId}`);
     this.#init();
-    this.#connectedInputRef?.addEventListener("focus", () => {
+    this.#connectedInputRef.addEventListener("focus", () => {
       this.#show();
     });
-    this.#connectedInputRef?.addEventListener("input", () => {
+    this.#connectedInputRef.addEventListener("input", () => {
       this.#show();
     });
-    this.#connectedInputRef?.addEventListener("blur", () => {
+    this.#connectedInputRef.addEventListener("blur", () => {
       this.#hide();
     });
-    this.#connectedInputRef?.addEventListener("keydown", (e) => {
-      switch (e.key) {
-        case "Enter":
-          this.#handleEnterOnInput(e);
-          break;
-        case "Escape":
-          e.preventDefault();
-          this.#hide();
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          if (this.#panelHidden) {
-            this.#show();
-          } else {
-            this.#changeHighlight("up");
-          }
-          break;
-        case "ArrowDown":
-          e.preventDefault();
-          if (this.#panelHidden) {
-            this.#show();
-          } else {
-            this.#changeHighlight("down");
-          }
-          break;
+    this.#connectedInputRef.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        this.#handleEnterOnInput(e);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        this.#hide();
+      } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+        e.preventDefault();
+        if (this.#panelHidden) {
+          this.#show();
+        } else {
+          this.#changeHighlight(e.key);
+        }
       }
@@ -76,9 +70,17 @@ });
     } else if (attrName === "highlight-first-option") {
-      this.#shouldHighlightFirstOption = newVal === "true";
+      this.#shouldHighlightFirstOption = coerceBoolean(newVal);
+    } else if (attrName === "position-strategy") {
+      if (newVal === "fixed") {
+        this.shadowRoot.host.style.position = "fixed";
+        this.#positionStrategy = "fixed";
+      } else {
+        this.shadowRoot.host.style.position = "absolute";
+        this.#positionStrategy = "absolute";
+      }
     }
   }
   #init() {
-    this.#slotRef?.addEventListener("slotchange", () => {
+    this.#slotRef.addEventListener("slotchange", () => {
       this.#numberOfOptions = 0;
-      this.#slotRef?.assignedNodes().forEach((node) => {
+      this.#slotRef.assignedNodes().forEach((node) => {
         if (node.nodeName === "ECK-AUTOCOMPLETE-OPTION") {
@@ -89,6 +91,4 @@ this.#numberOfOptions++;
           node.addEventListener("eck-option-selected", (value) => {
-            if (this.#connectedInputRef) {
-              this.#connectedInputRef.value = value.detail.label;
-            }
-            const optionSelectedEvent = new CustomEvent("optionSelected", {
+            this.#connectedInputRef.value = value.detail.label;
+            this.shadowRoot.dispatchEvent(new CustomEvent("optionSelected", {
               bubbles: true,
@@ -99,4 +99,3 @@ composed: true,
               }
-            });
-            this.shadowRoot?.dispatchEvent(optionSelectedEvent);
+            }));
             this.#hide();
@@ -106,10 +105,4 @@ });
       });
-      if (this.#shouldHighlightFirstOption) {
-        this.#highlightFirstOption();
-      }
-      if (this.#numberOfOptions === 0) {
-        this.shadowRoot?.querySelector(".option-container")?.classList.remove("has-children");
-      } else {
-        this.shadowRoot?.querySelector(".option-container")?.classList.add("has-children");
-      }
+      this.#highlightFirstOption();
+      this.shadowRoot.host.toggleAttribute("has-children", this.#numberOfOptions !== 0);
     });
@@ -121,23 +114,31 @@ }
     this.#highlightedOptionRef = void 0;
-    if (this.#shouldHighlightFirstOption) {
-      this.#highlightFirstOption();
-    }
-    (this.shadowRoot?.host).style.display = "block";
+    this.#highlightFirstOption();
+    this.shadowRoot.host.style.display = "block";
     this.#panelHidden = false;
   }
   #hide() {
-    (this.shadowRoot?.host).style.display = "none";
+    this.shadowRoot.host.style.display = "none";
     this.#panelHidden = true;
   }
   #positionPanel() {
-    const inputWidth = this.#connectedInputRef?.getBoundingClientRect().width;
-    (this.shadowRoot?.host).style.width = `${inputWidth}px`;
-    let inputLeftX = this.#connectedInputRef?.getBoundingClientRect().x;
-    let inputBottomY = this.#connectedInputRef?.getBoundingClientRect().bottom;
-    if (inputLeftX && inputBottomY) {
-      inputLeftX += window.scrollX;
-      inputBottomY += window.scrollY;
+    const inputWidth = this.#connectedInputRef.getBoundingClientRect().width;
+    this.shadowRoot.host.style.width = `${inputWidth}px`;
+    let inputLeftX;
+    let inputBottomY;
+    if (this.#positionStrategy === "absolute") {
+      inputLeftX = this.#connectedInputRef.offsetLeft;
+      inputBottomY = this.#connectedInputRef.offsetTop + this.#connectedInputRef.getBoundingClientRect().height;
+    } else {
+      if (this.#connectedInputRef.offsetParent.style.position === "absolute") {
+        inputLeftX = this.#connectedInputRef.offsetLeft;
+        inputBottomY = this.#connectedInputRef.getBoundingClientRect().top - this.#connectedInputRef.offsetParent.getBoundingClientRect().top + this.#connectedInputRef.getBoundingClientRect().height;
+      } else {
+        inputLeftX = this.#connectedInputRef.getBoundingClientRect().x;
+        inputBottomY = this.#connectedInputRef.getBoundingClientRect().bottom;
+        inputLeftX += window.scrollX;
+        inputBottomY += window.scrollY;
+      }
     }
-    (this.shadowRoot?.host).style.left = `${inputLeftX}px`;
-    (this.shadowRoot?.host).style.top = `${inputBottomY}px`;
+    this.shadowRoot.host.style.left = `${inputLeftX}px`;
+    this.shadowRoot.host.style.top = `${inputBottomY}px`;
   }
@@ -151,3 +152,5 @@ #handleEnterOnInput(e) {
   #highlightFirstOption() {
-    const nodes = this.#slotRef?.assignedNodes();
+    if (!this.#shouldHighlightFirstOption)
+      return;
+    const nodes = this.#slotRef.assignedNodes();
     if (Array.isArray(nodes)) {
@@ -164,10 +167,10 @@ for (let i = 0; i < nodes.length; i++) {
   #changeHighlight(direction) {
-    let nodes = this.#slotRef?.assignedNodes();
+    let nodes = this.#slotRef.assignedNodes();
     if (Array.isArray(nodes)) {
       nodes = nodes.filter((node) => node.nodeName === "ECK-AUTOCOMPLETE-OPTION");
       if (this.#highlightedOptionRef === void 0) {
-        if (direction === "up") {
+        if (direction === "ArrowUp") {
           nodes[nodes.length - 1].highlight(true);
           this.#highlightedOptionRef = nodes[nodes.length - 1];
-        } else if (direction === "down") {
+        } else if (direction === "ArrowDown") {
           nodes[0].highlight(true);
@@ -183,3 +186,3 @@ this.#highlightedOptionRef = nodes[0];
           let indexToHighlight = 0;
-          if (direction === "up") {
+          if (direction === "ArrowUp") {
             if (i > 0) {
@@ -190,3 +193,3 @@ indexToHighlight = i - 1;
             }
-          } else if (direction === "down") {
+          } else if (direction === "ArrowDown") {
             if (i < nodes.length - 1) {
@@ -211,3 +214,3 @@ indexToHighlight = i + 1;
 // 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";
+var eck_autocomplete_option_component_default2 = ":host{box-sizing:border-box;display:block;padding:5px;color:#000}:host(:hover),:host([highlighted]){background-color:#b3e5fc;cursor:pointer}";
 
@@ -221,7 +224,6 @@ // build-artifacts/eck-autocomplete-option-component/eck-autocomplete-option-component.ts
   hasKeyboardHighlight = false;
-  #clickEventListenerAbortController = new AbortController();
-  #clickEventListenerAbortSignal = this.#clickEventListenerAbortController.signal;
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(template2.content.cloneNode(true));
   }
@@ -235,15 +237,9 @@ static get tagName() {
   connectedCallback() {
-    this.shadowRoot?.appendChild(template2.content.cloneNode(true));
-    this.shadowRoot?.host.addEventListener("mousedown", (e) => {
+    this.shadowRoot.host.addEventListener("mousedown", (e) => {
       e.preventDefault();
     });
-    this.shadowRoot?.host.addEventListener("click", () => {
+    this.shadowRoot.host.addEventListener("click", () => {
       this.fireSelectionEvent();
-    }, {
-      signal: this.#clickEventListenerAbortSignal
     });
   }
-  disconnectedCallback() {
-    this.#clickEventListenerAbortController.abort();
-  }
   attributeChangedCallback(attrName, oldVal, newVal) {
@@ -253,3 +249,3 @@ if (attrName === "value") {
     } else if (attrName === "label") {
-      this.label = newVal;
+      this.label = newVal ? newVal : void 0;
     }
@@ -259,10 +255,6 @@ }
     this.hasKeyboardHighlight = highlight;
-    if (highlight) {
-      this.shadowRoot?.host.classList.add("highlighted");
-    } else {
-      this.shadowRoot?.host.classList.remove("highlighted");
-    }
+    this.shadowRoot.host.toggleAttribute("highlighted", highlight);
   }
   fireSelectionEvent() {
-    const valueEvent = new CustomEvent("eck-option-selected", {
+    this.shadowRoot.dispatchEvent(new CustomEvent("eck-option-selected", {
       bubbles: true,
@@ -274,4 +266,3 @@ composed: true,
       }
-    });
-    this.shadowRoot?.dispatchEvent(valueEvent);
+    }));
   }
@@ -282,3 +273,3 @@ #getLabel() {
     } else {
-      return this.shadowRoot?.host.innerHTML;
+      return this.shadowRoot.host.innerHTML;
     }
@@ -285,0 +276,0 @@ }

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

@@ -1,3 +0,2 @@
-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};
+var l="<slot></slot>";var h=":host{box-sizing:border-box;display:none;position:absolute;background-color:#fff;overflow:auto;max-height:256px}:host([has-children]){border:1px solid black}";var r=s=>s!==null&&s!=="false";var a=document.createElement("template");a.innerHTML=`<style>${h}</style>${l}`;var c=class extends HTMLElement{#r;#a=!1;#t;#o;#i=0;#s=!0;#e;#n="absolute";constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(a.content.cloneNode(!0))}static get tagName(){return"eck-autocomplete"}static get observedAttributes(){return["connected-to-id","highlight-first-option","position-strategy"]}connectedCallback(){this.#o=this.shadowRoot.querySelector("slot"),this.#t=document.querySelector(`#${this.#r}`),this.#p(),this.#t.addEventListener("focus",()=>{this.#l()}),this.#t.addEventListener("input",()=>{this.#l()}),this.#t.addEventListener("blur",()=>{this.#h()}),this.#t.addEventListener("keydown",t=>{t.key==="Enter"?this.#u(t):t.key==="Escape"?(t.preventDefault(),this.#h()):(t.key==="ArrowUp"||t.key==="ArrowDown")&&(t.preventDefault(),this.#s?this.#l():this.#f(t.key))})}attributeChangedCallback(t,e,o){t==="connected-to-id"?this.#r=o:t==="highlight-first-option"?this.#a=r(o):t==="position-strategy"&&(o==="fixed"?(this.shadowRoot.host.style.position="fixed",this.#n="fixed"):(this.shadowRoot.host.style.position="absolute",this.#n="absolute"))}#p(){this.#o.addEventListener("slotchange",()=>{this.#i=0,this.#o.assignedNodes().forEach(t=>{t.nodeName==="ECK-AUTOCOMPLETE-OPTION"&&(this.#i++,t.highlight(!1),this.#e=void 0,t.addEventListener("eck-option-selected",e=>{this.#t.value=e.detail.label,this.shadowRoot.dispatchEvent(new CustomEvent("optionSelected",{bubbles:!0,composed:!0,detail:{option:e.detail}})),this.#h()}))}),this.#d(),this.shadowRoot.host.toggleAttribute("has-children",this.#i!==0)})}#l(){this.#c(),this.#e?.highlight(!1),this.#e=void 0,this.#d(),this.shadowRoot.host.style.display="block",this.#s=!1}#h(){this.shadowRoot.host.style.display="none",this.#s=!0}#c(){let t=this.#t.getBoundingClientRect().width;this.shadowRoot.host.style.width=`${t}px`;let e,o;this.#n==="absolute"?(e=this.#t.offsetLeft,o=this.#t.offsetTop+this.#t.getBoundingClientRect().height):this.#t.offsetParent.style.position==="absolute"?(e=this.#t.offsetLeft,o=this.#t.getBoundingClientRect().top-this.#t.offsetParent.getBoundingClientRect().top+this.#t.getBoundingClientRect().height):(e=this.#t.getBoundingClientRect().x,o=this.#t.getBoundingClientRect().bottom,e+=window.scrollX,o+=window.scrollY),this.shadowRoot.host.style.left=`${e}px`,this.shadowRoot.host.style.top=`${o}px`}#u(t){this.#s||this.#e===void 0||this.#i===0||(t.preventDefault(),this.#e?.fireSelectionEvent())}#d(){if(!this.#a)return;let t=this.#o.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}}}#f(t){let e=this.#o.assignedNodes();if(Array.isArray(e)){if(e=e.filter(o=>o.nodeName==="ECK-AUTOCOMPLETE-OPTION"),this.#e===void 0){t==="ArrowUp"?(e[e.length-1].highlight(!0),this.#e=e[e.length-1]):t==="ArrowDown"&&(e[0].highlight(!0),this.#e=e[0]);return}for(let o=0;o<e.length;o++){let n=e[o];if(n.hasKeyboardHighlight){n.highlight(!1);let i=0;t==="ArrowUp"?o>0?i=o-1:i=e.length-1:t==="ArrowDown"&&(o<e.length-1?i=o+1:i=0),e[i].highlight(!0),this.#e=e[i];break}}}}};export{c as EckAutocomplete};
 //# sourceMappingURL=eck-autocomplete-component.js.map

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

@@ -1,3 +0,2 @@
-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};
+var o="<slot></slot>";var l=":host{box-sizing:border-box;display:block;padding:5px;color:#000}:host(:hover),:host([highlighted]){background-color:#b3e5fc;cursor:pointer}";var s=document.createElement("template");s.innerHTML=`<style>${l}</style>${o}`;var a=class extends HTMLElement{value;label;hasKeyboardHighlight=!1;constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(s.content.cloneNode(!0))}static get tagName(){return"eck-autocomplete-option"}static get observedAttributes(){return["value","label"]}connectedCallback(){this.shadowRoot.host.addEventListener("mousedown",e=>{e.preventDefault()}),this.shadowRoot.host.addEventListener("click",()=>{this.fireSelectionEvent()})}attributeChangedCallback(e,h,t){e==="value"?this.value=t:e==="label"&&(this.label=t||void 0)}highlight(e){this.hasKeyboardHighlight=e,this.shadowRoot.host.toggleAttribute("highlighted",e)}fireSelectionEvent(){this.shadowRoot.dispatchEvent(new CustomEvent("eck-option-selected",{bubbles:!0,composed:!0,detail:{value:this.value,label:this.#e()}}))}#e(){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,4 +0,2 @@
-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);
+var a="<slot></slot>";var r=":host{box-sizing:border-box;display:none;position:absolute;background-color:#fff;overflow:auto;max-height:256px}:host([has-children]){border:1px solid black}";var d=l=>l!==null&&l!=="false";var c=document.createElement("template");c.innerHTML=`<style>${r}</style>${a}`;var s=class extends HTMLElement{#i;#r=!1;#t;#o;#s=0;#n=!0;#e;#l="absolute";constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(c.content.cloneNode(!0))}static get tagName(){return"eck-autocomplete"}static get observedAttributes(){return["connected-to-id","highlight-first-option","position-strategy"]}connectedCallback(){this.#o=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=>{t.key==="Enter"?this.#p(t):t.key==="Escape"?(t.preventDefault(),this.#a()):(t.key==="ArrowUp"||t.key==="ArrowDown")&&(t.preventDefault(),this.#n?this.#h():this.#m(t.key))})}attributeChangedCallback(t,e,o){t==="connected-to-id"?this.#i=o:t==="highlight-first-option"?this.#r=d(o):t==="position-strategy"&&(o==="fixed"?(this.shadowRoot.host.style.position="fixed",this.#l="fixed"):(this.shadowRoot.host.style.position="absolute",this.#l="absolute"))}#c(){this.#o.addEventListener("slotchange",()=>{this.#s=0,this.#o.assignedNodes().forEach(t=>{t.nodeName==="ECK-AUTOCOMPLETE-OPTION"&&(this.#s++,t.highlight(!1),this.#e=void 0,t.addEventListener("eck-option-selected",e=>{this.#t.value=e.detail.label,this.shadowRoot.dispatchEvent(new CustomEvent("optionSelected",{bubbles:!0,composed:!0,detail:{option:e.detail}})),this.#a()}))}),this.#d(),this.shadowRoot.host.toggleAttribute("has-children",this.#s!==0)})}#h(){this.#u(),this.#e?.highlight(!1),this.#e=void 0,this.#d(),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,o;this.#l==="absolute"?(e=this.#t.offsetLeft,o=this.#t.offsetTop+this.#t.getBoundingClientRect().height):this.#t.offsetParent.style.position==="absolute"?(e=this.#t.offsetLeft,o=this.#t.getBoundingClientRect().top-this.#t.offsetParent.getBoundingClientRect().top+this.#t.getBoundingClientRect().height):(e=this.#t.getBoundingClientRect().x,o=this.#t.getBoundingClientRect().bottom,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.#s===0||(t.preventDefault(),this.#e?.fireSelectionEvent())}#d(){if(!this.#r)return;let t=this.#o.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}}}#m(t){let e=this.#o.assignedNodes();if(Array.isArray(e)){if(e=e.filter(o=>o.nodeName==="ECK-AUTOCOMPLETE-OPTION"),this.#e===void 0){t==="ArrowUp"?(e[e.length-1].highlight(!0),this.#e=e[e.length-1]):t==="ArrowDown"&&(e[0].highlight(!0),this.#e=e[0]);return}for(let o=0;o<e.length;o++){let h=e[o];if(h.hasKeyboardHighlight){h.highlight(!1);let i=0;t==="ArrowUp"?o>0?i=o-1:i=e.length-1:t==="ArrowDown"&&(o<e.length-1?i=o+1:i=0),e[i].highlight(!0),this.#e=e[i];break}}}}};var u="<slot></slot>";var p=":host{box-sizing:border-box;display:block;padding:5px;color:#000}:host(:hover),:host([highlighted]){background-color:#b3e5fc;cursor:pointer}";var m=document.createElement("template");m.innerHTML=`<style>${p}</style>${u}`;var n=class extends HTMLElement{value;label;hasKeyboardHighlight=!1;constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(m.content.cloneNode(!0))}static get tagName(){return"eck-autocomplete-option"}static get observedAttributes(){return["value","label"]}connectedCallback(){this.shadowRoot.host.addEventListener("mousedown",t=>{t.preventDefault()}),this.shadowRoot.host.addEventListener("click",()=>{this.fireSelectionEvent()})}attributeChangedCallback(t,e,o){t==="value"?this.value=o:t==="label"&&(this.label=o||void 0)}highlight(t){this.hasKeyboardHighlight=t,this.shadowRoot.host.toggleAttribute("highlighted",t)}fireSelectionEvent(){this.shadowRoot.dispatchEvent(new CustomEvent("eck-option-selected",{bubbles:!0,composed:!0,detail:{value:this.value,label:this.#i()}}))}#i(){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.7",
+  "version": "0.0.8",
   "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.7/min/eck-autocomplete.js"
+  src="https://unpkg.com/eck-autocomplete@0.0.8/min/eck-autocomplete.js"
 ></script>
@@ -34,0 +34,0 @@ ```

utils/custom-element.d.ts

 export interface CustomElement {
     connectedCallback?(): void;
-    attributeChangedCallback?(attrName: string, oldVal: string, newVal: string): void;
+    attributeChangedCallback?(attrName: string, oldVal: string | null, newVal: string | null): void;
     disconnectedCallback?(): void;
 }

No alert changes

Improved metrics

Total package byte prevSize

109287

increased by8.12%

Number of package files

21

increased by5%

Worsened metrics

Lines of code

620

decreased by-1.43%

No dependency changes