eck-autocomplete - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

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

@@ -0,3 +1,4 @@
+import { BaseComponent } from '../utils/baseComponent';
 import type { CustomElement } from '../utils/custom-element';
-export declare class EckAutocomplete extends HTMLElement implements CustomElement {
+export declare class EckAutocomplete extends BaseComponent implements CustomElement {
     /**
@@ -8,6 +9,14 @@ * ID of the input that we are attached to
     /**
-     * Highlight first option
+     * Highlight first option.
+     * Default: false
      */
     private _shouldHighlightFirstOption;
     /**
+     * Sets the value of the input to the highlighted option.
+     * When pressing ESC the value will be reset. Closing the panel in any other
+     * way will preserve the value.
+     * Default: true
+     */
+    private _selectHighlightedOption;
+    /**
      * Reference to the input element we are attached to
@@ -33,13 +42,32 @@ */
     /**
-     * CSS position value for panel.
+     * We get a cleanup method from floating-ui that we need to call when
+     * hiding the panel to stop event listeners that would reposition it.
      */
-    private _positionStrategy;
+    private _positionerCleanup;
+    /**
+     * When the component is set to select highlighted options it needs to be able
+     * to reset the input value if ESC is pressed. Therefore, we store the value
+     * before highlighting.
+     */
+    private _inputValueBeforeHighlight;
+    /**
+     * These handlers are later used in addEventListeners.
+     * We need to store them here to reuse the in removeEventListener calls.
+     * Calls to remove need to pass in the exact same function which we achieve
+     * by storing a reference here.
+     */
+    private _showHandler;
+    private _hideHandler;
+    private _inputKeydownHandler;
+    private _inputHandler;
+    static get observedAttributes(): string[];
     constructor();
-    static get tagName(): string;
-    static get observedAttributes(): string[];
+    attributeChangedCallback(attrName: string, oldVal: string | null, newVal: string | null): void;
     connectedCallback(): void;
-    attributeChangedCallback(attrName: string, oldVal: string | null, newVal: string | null): void;
+    disconnectedCallback(): void;
+    setInputRef(element: HTMLInputElement): void;
     private _init;
     private _show;
     private _hide;
+    private _inputHandle;
     private _positionPanel;
@@ -55,2 +83,7 @@ /**
     private _changeHighlight;
+    private _highlightOption;
+    private _startPositioner;
+    private _stopPositioner;
+    private _inputKeydown;
+    private _slotChange;
 }

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

 // build-artifacts/eck-autocomplete-component/eck-autocomplete-component.html?raw
 var eck_autocomplete_component_default = "<slot></slot>";
 
-// build-artifacts/eck-autocomplete-component/eck-autocomplete-component.css
-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/eck-autocomplete-component/eck-autocomplete-component.scss
+var eck_autocomplete_component_default2 = `
+:host{display:none;position:fixed;box-sizing:border-box;max-height:256px;overflow:auto;background-color:#fff}:host([has-children]){border:1px solid #000}`;
 
+// build-artifacts/utils/baseComponent.ts
+var BaseComponent = class extends HTMLElement {
+  injectCSS(css) {
+    const cssTemplate = document.createElement("template");
+    cssTemplate.innerHTML = `<style>${css}</style>`;
+    this.shadowRoot.appendChild(cssTemplate.content.cloneNode(true));
+  }
+};
+
 // build-artifacts/utils/coerceBoolean.ts
@@ -13,7 +23,16 @@ var coerceBoolean = (value) => {
 // build-artifacts/eck-autocomplete-component/eck-autocomplete-component.ts
+import { autoUpdate, computePosition, flip } from "@floating-ui/dom";
+
+// build-artifacts/utils/hasModifierKey.ts
+function hasModifierKey(event) {
+  return event.altKey || event.shiftKey || event.ctrlKey || event.metaKey;
+}
+
+// build-artifacts/eck-autocomplete-component/eck-autocomplete-component.ts
 var template = document.createElement("template");
 template.innerHTML = `<style>${eck_autocomplete_component_default2}</style>${eck_autocomplete_component_default}`;
-var EckAutocomplete = class extends HTMLElement {
+var EckAutocomplete = class extends BaseComponent {
   _connectedToId;
   _shouldHighlightFirstOption = false;
+  _selectHighlightedOption = true;
   _connectedInputRef;
@@ -24,3 +43,15 @@ _slotRef;
   _highlightedOptionRef;
-  _positionStrategy = "absolute";
+  _positionerCleanup;
+  _inputValueBeforeHighlight = null;
+  _showHandler = this._show.bind(this);
+  _hideHandler = this._hide.bind(this);
+  _inputKeydownHandler = this._inputKeydown.bind(this);
+  _inputHandler = this._inputHandle.bind(this);
+  static get observedAttributes() {
+    return [
+      "connected-to-id",
+      "highlight-first-option",
+      "select-highlighted-option"
+    ];
+  }
   constructor() {
@@ -30,37 +61,3 @@ super();
     this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-  static get tagName() {
-    return "eck-autocomplete";
-  }
-  static get observedAttributes() {
-    return ["connected-to-id", "highlight-first-option", "position-strategy"];
-  }
-  connectedCallback() {
     this._slotRef = this.shadowRoot.querySelector("slot");
-    this._connectedInputRef = document.querySelector(`#${this._connectedToId}`);
-    this._init();
-    this._connectedInputRef.addEventListener("focus", () => {
-      this._show();
-    });
-    this._connectedInputRef.addEventListener("input", () => {
-      this._show();
-    });
-    this._connectedInputRef.addEventListener("blur", () => {
-      this._hide();
-    });
-    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);
-        }
-      }
-    });
   }
@@ -72,44 +69,44 @@ attributeChangedCallback(attrName, oldVal, newVal) {
       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";
-      }
+    } else if (attrName === "select-highlighted-option") {
+      this._selectHighlightedOption = coerceBoolean(newVal);
     }
   }
+  connectedCallback() {
+    const connectToIdRef = document.querySelector(`#${this._connectedToId}`);
+    if (connectToIdRef) {
+      this._connectedInputRef = connectToIdRef;
+      this._init();
+    }
+  }
+  disconnectedCallback() {
+    this._stopPositioner();
+    this._connectedInputRef.removeEventListener("focus", this._showHandler);
+    this._connectedInputRef.removeEventListener("click", this._showHandler);
+    this._connectedInputRef.removeEventListener("input", this._inputHandler);
+    this._connectedInputRef.removeEventListener("blur", this._hideHandler);
+    this._connectedInputRef.removeEventListener("keydown", this._inputKeydownHandler);
+  }
+  setInputRef(element) {
+    this._connectedInputRef = element;
+    this._init();
+  }
   _init() {
     this._slotRef.addEventListener("slotchange", () => {
-      this._numberOfOptions = 0;
-      this._slotRef.assignedNodes().forEach((node) => {
-        if (node.nodeName === "ECK-AUTOCOMPLETE-OPTION") {
-          this._numberOfOptions++;
-          node.highlight(false);
-          this._highlightedOptionRef = void 0;
-          node.addEventListener("eck-option-selected", (value) => {
-            this._connectedInputRef.value = value.detail.label;
-            this.shadowRoot.dispatchEvent(new CustomEvent("optionSelected", {
-              bubbles: true,
-              composed: true,
-              detail: {
-                option: value.detail
-              }
-            }));
-            this._hide();
-          });
-        }
-      });
-      this._highlightFirstOption();
-      this.shadowRoot.host.toggleAttribute("has-children", this._numberOfOptions !== 0);
+      this._slotChange();
     });
+    this._connectedInputRef.addEventListener("focus", this._showHandler);
+    this._connectedInputRef.addEventListener("click", this._showHandler);
+    this._connectedInputRef.addEventListener("input", this._inputHandler);
+    this._connectedInputRef.addEventListener("blur", this._hideHandler);
+    this._connectedInputRef.addEventListener("keydown", this._inputKeydownHandler);
   }
   _show() {
-    this._positionPanel();
-    this._highlightedOptionRef?.highlight(false);
-    this._highlightedOptionRef = void 0;
-    this._highlightFirstOption();
-    this.shadowRoot.host.style.display = "block";
-    this._panelHidden = false;
+    if (this._panelHidden) {
+      this._panelHidden = false;
+      this._startPositioner();
+      this._highlightOption(this._highlightedOptionRef, false);
+      this._highlightedOptionRef = void 0;
+      this._highlightFirstOption();
+      this.shadowRoot.host.style.display = "block";
+    }
   }
@@ -119,24 +116,21 @@ _hide() {
     this._panelHidden = true;
+    this._stopPositioner();
+    this._inputValueBeforeHighlight = null;
   }
+  _inputHandle() {
+    this._inputValueBeforeHighlight = this._connectedInputRef.value;
+    this._show();
+  }
   _positionPanel() {
     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`;
+    computePosition(this._connectedInputRef, this.shadowRoot.host, {
+      middleware: [flip()],
+      strategy: "fixed"
+    }).then(({ x, y }) => {
+      Object.assign(this.shadowRoot.host.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+    });
   }
@@ -152,52 +146,105 @@ _handleEnterOnInput(e) {
       return;
-    const nodes = this._slotRef.assignedNodes();
-    if (Array.isArray(nodes)) {
-      for (let i = 0; i < nodes.length; i++) {
-        if (nodes[i].nodeName === "ECK-AUTOCOMPLETE-OPTION") {
-          nodes[i].highlight(true);
-          this._highlightedOptionRef = nodes[i];
-          break;
-        }
-      }
+    const elements = this._slotRef.assignedElements();
+    if (elements[0]) {
+      this._highlightOption(elements[0], true, true);
+      this._highlightedOptionRef = elements[0];
     }
   }
   _changeHighlight(direction) {
-    let nodes = this._slotRef.assignedNodes();
-    if (Array.isArray(nodes)) {
-      nodes = nodes.filter((node) => node.nodeName === "ECK-AUTOCOMPLETE-OPTION");
-      if (this._highlightedOptionRef === void 0) {
+    const elements = this._slotRef.assignedElements();
+    if (this._highlightedOptionRef === void 0) {
+      if (direction === "ArrowUp") {
+        this._highlightOption(elements[elements.length - 1], true);
+        this._highlightedOptionRef = elements[elements.length - 1];
+      } else if (direction === "ArrowDown") {
+        this._highlightOption(elements[0], true);
+        this._highlightedOptionRef = elements[0];
+      }
+      return;
+    }
+    for (let i = 0; i < elements.length; i++) {
+      const optionNode = elements[i];
+      if (optionNode.getAttribute("highlighted") === "") {
+        this._highlightOption(optionNode, false);
+        let indexToHighlight = 0;
         if (direction === "ArrowUp") {
-          nodes[nodes.length - 1].highlight(true);
-          this._highlightedOptionRef = nodes[nodes.length - 1];
+          if (i > 0) {
+            indexToHighlight = i - 1;
+          } else {
+            indexToHighlight = elements.length - 1;
+          }
         } else if (direction === "ArrowDown") {
-          nodes[0].highlight(true);
-          this._highlightedOptionRef = nodes[0];
-        }
-        return;
-      }
-      for (let i = 0; i < nodes.length; i++) {
-        const optionNode = nodes[i];
-        if (optionNode.hasKeyboardHighlight) {
-          optionNode.highlight(false);
-          let indexToHighlight = 0;
-          if (direction === "ArrowUp") {
-            if (i > 0) {
-              indexToHighlight = i - 1;
-            } else {
-              indexToHighlight = nodes.length - 1;
-            }
-          } else if (direction === "ArrowDown") {
-            if (i < nodes.length - 1) {
-              indexToHighlight = i + 1;
-            } else {
-              indexToHighlight = 0;
-            }
+          if (i < elements.length - 1) {
+            indexToHighlight = i + 1;
+          } else {
+            indexToHighlight = 0;
           }
-          nodes[indexToHighlight].highlight(true);
-          this._highlightedOptionRef = nodes[indexToHighlight];
-          break;
         }
+        this._highlightOption(elements[indexToHighlight], true);
+        this._highlightedOptionRef = elements[indexToHighlight];
+        break;
       }
     }
   }
+  _highlightOption(option, value, triggeredByHighlightFirstOption = false) {
+    if (this._inputValueBeforeHighlight === null && value) {
+      this._inputValueBeforeHighlight = this._connectedInputRef.value;
+    }
+    option?.highlight(value, triggeredByHighlightFirstOption);
+    if (value) {
+      option?.scrollIntoView({
+        block: "nearest"
+      });
+    }
+  }
+  _startPositioner() {
+    this._stopPositioner();
+    this._positionPanel();
+    this._positionerCleanup = autoUpdate(this._connectedInputRef, this.shadowRoot.host, this._positionPanel.bind(this));
+  }
+  _stopPositioner() {
+    if (this._positionerCleanup) {
+      this._positionerCleanup();
+      this._positionerCleanup = void 0;
+    }
+  }
+  _inputKeydown(event) {
+    if (hasModifierKey(event))
+      return;
+    if (event.key === "Enter") {
+      this._handleEnterOnInput(event);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      if (this._inputValueBeforeHighlight !== null) {
+        this._connectedInputRef.value = this._inputValueBeforeHighlight;
+      }
+      this._hide();
+    } else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      if (this._panelHidden) {
+        this._show();
+      } else {
+        this._changeHighlight(event.key);
+      }
+    }
+  }
+  _slotChange() {
+    this._numberOfOptions = 0;
+    this._slotRef.assignedElements().forEach((element) => {
+      this._numberOfOptions++;
+      this._highlightOption(element, false);
+      this._highlightedOptionRef = void 0;
+      element.addEventListener("eck-autocomplete-option-selected", (value) => {
+        this._connectedInputRef.value = value.detail.label;
+        this._hide();
+      });
+      element.addEventListener("eck-autocomplete-option-highlighted", (value) => {
+        if (!this._panelHidden && this._selectHighlightedOption && !value.detail._tbhfo) {
+          this._connectedInputRef.value = value.detail.label;
+        }
+      });
+    });
+    this._highlightFirstOption();
+    this.shadowRoot.host.toggleAttribute("has-children", this._numberOfOptions !== 0);
+  }
 };
@@ -204,0 +251,0 @@ export {

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

@@ -0,11 +1,15 @@
+import { BaseComponent } from '../utils/baseComponent';
 import type { CustomElement } from '../utils/custom-element';
-export interface EckOptionSelected {
+export interface EckAutocompleteOptionSelectEvent {
     value: unknown;
     label: string;
 }
-export declare class EckAutocompleteOption extends HTMLElement implements CustomElement {
+export interface EckAutocompleteOptionHighlightEvent extends EckAutocompleteOptionSelectEvent {
+    _tbhfo: boolean;
+}
+export declare class EckAutocompleteOption extends BaseComponent implements CustomElement {
     /**
      * Optional data that is attached to an option.
      */
-    private _value;
+    value: unknown;
     /**
@@ -17,12 +21,7 @@ * Optional string that is used to display the option in contexts
     private _label;
-    /**
-     * True if the option is highlighted by the keyboard.
-     */
-    hasKeyboardHighlight: boolean;
+    static get observedAttributes(): string[];
     constructor();
-    static get tagName(): string;
-    static get observedAttributes(): string[];
+    attributeChangedCallback(attrName: string, oldVal: string | null, newVal: string | null): void;
     connectedCallback(): void;
-    attributeChangedCallback(attrName: string, oldVal: string | null, newVal: string | null): void;
-    highlight(highlight: boolean): void;
+    highlight(highlight: boolean, triggeredByHighlightFirstOption: boolean): void;
     fireSelectionEvent(): void;
@@ -29,0 +28,0 @@ /**

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

 // 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 = ":host{box-sizing:border-box;display:block;padding:5px;color:#000}:host(:hover),:host([highlighted]){background-color:#b3e5fc;cursor:pointer}";
+// build-artifacts/eck-autocomplete-option-component/eck-autocomplete-option-component.scss
+var eck_autocomplete_option_component_default2 = `
+:host{display:block;box-sizing:border-box;padding:5px;color:#000}:host(:hover),:host([highlighted]){background-color:#b3e5fc;cursor:pointer}`;
 
+// build-artifacts/utils/baseComponent.ts
+var BaseComponent = class extends HTMLElement {
+  injectCSS(css) {
+    const cssTemplate = document.createElement("template");
+    cssTemplate.innerHTML = `<style>${css}</style>`;
+    this.shadowRoot.appendChild(cssTemplate.content.cloneNode(true));
+  }
+};
+
 // build-artifacts/eck-autocomplete-option-component/eck-autocomplete-option-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;
+var EckAutocompleteOption = class extends BaseComponent {
+  value;
   _label;
-  hasKeyboardHighlight = false;
+  static get observedAttributes() {
+    return ["label"];
+  }
   constructor() {
@@ -19,8 +31,7 @@ super();
   }
-  static get tagName() {
-    return "eck-autocomplete-option";
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    if (attrName === "label") {
+      this._label = newVal ? newVal : void 0;
+    }
   }
-  static get observedAttributes() {
-    return ["value", "label"];
-  }
   connectedCallback() {
@@ -34,19 +45,21 @@ this.shadowRoot.host.addEventListener("mousedown", (e) => {
   }
-  attributeChangedCallback(attrName, oldVal, newVal) {
-    if (attrName === "value") {
-      this._value = newVal;
-    } else if (attrName === "label") {
-      this._label = newVal ? newVal : void 0;
+  highlight(highlight, triggeredByHighlightFirstOption) {
+    this.shadowRoot.host.toggleAttribute("highlighted", highlight);
+    if (highlight) {
+      this.shadowRoot.dispatchEvent(new CustomEvent("eck-autocomplete-option-highlighted", {
+        composed: true,
+        detail: {
+          value: this.value,
+          label: this._getLabel(),
+          _tbhfo: triggeredByHighlightFirstOption
+        }
+      }));
     }
   }
-  highlight(highlight) {
-    this.hasKeyboardHighlight = highlight;
-    this.shadowRoot.host.toggleAttribute("highlighted", highlight);
-  }
   fireSelectionEvent() {
-    this.shadowRoot.dispatchEvent(new CustomEvent("eck-option-selected", {
+    this.shadowRoot.dispatchEvent(new CustomEvent("eck-autocomplete-option-selected", {
+      composed: true,
       bubbles: true,
-      composed: true,
       detail: {
-        value: this._value,
+        value: this.value,
         label: this._getLabel()
@@ -53,0 +66,0 @@ }

eck-autocomplete.js

 // build-artifacts/eck-autocomplete-component/eck-autocomplete-component.html?raw
 var eck_autocomplete_component_default = "<slot></slot>";
 
-// build-artifacts/eck-autocomplete-component/eck-autocomplete-component.css
-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/eck-autocomplete-component/eck-autocomplete-component.scss
+var eck_autocomplete_component_default2 = `
+:host{display:none;position:fixed;box-sizing:border-box;max-height:256px;overflow:auto;background-color:#fff}:host([has-children]){border:1px solid #000}`;
 
+// build-artifacts/utils/baseComponent.ts
+var BaseComponent = class extends HTMLElement {
+  injectCSS(css) {
+    const cssTemplate = document.createElement("template");
+    cssTemplate.innerHTML = `<style>${css}</style>`;
+    this.shadowRoot.appendChild(cssTemplate.content.cloneNode(true));
+  }
+};
+
 // build-artifacts/utils/coerceBoolean.ts
@@ -13,7 +23,16 @@ var coerceBoolean = (value) => {
 // build-artifacts/eck-autocomplete-component/eck-autocomplete-component.ts
+import { autoUpdate, computePosition, flip } from "@floating-ui/dom";
+
+// build-artifacts/utils/hasModifierKey.ts
+function hasModifierKey(event) {
+  return event.altKey || event.shiftKey || event.ctrlKey || event.metaKey;
+}
+
+// build-artifacts/eck-autocomplete-component/eck-autocomplete-component.ts
 var template = document.createElement("template");
 template.innerHTML = `<style>${eck_autocomplete_component_default2}</style>${eck_autocomplete_component_default}`;
-var EckAutocomplete = class extends HTMLElement {
+var EckAutocomplete = class extends BaseComponent {
   _connectedToId;
   _shouldHighlightFirstOption = false;
+  _selectHighlightedOption = true;
   _connectedInputRef;
@@ -24,3 +43,15 @@ _slotRef;
   _highlightedOptionRef;
-  _positionStrategy = "absolute";
+  _positionerCleanup;
+  _inputValueBeforeHighlight = null;
+  _showHandler = this._show.bind(this);
+  _hideHandler = this._hide.bind(this);
+  _inputKeydownHandler = this._inputKeydown.bind(this);
+  _inputHandler = this._inputHandle.bind(this);
+  static get observedAttributes() {
+    return [
+      "connected-to-id",
+      "highlight-first-option",
+      "select-highlighted-option"
+    ];
+  }
   constructor() {
@@ -30,37 +61,3 @@ super();
     this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-  static get tagName() {
-    return "eck-autocomplete";
-  }
-  static get observedAttributes() {
-    return ["connected-to-id", "highlight-first-option", "position-strategy"];
-  }
-  connectedCallback() {
     this._slotRef = this.shadowRoot.querySelector("slot");
-    this._connectedInputRef = document.querySelector(`#${this._connectedToId}`);
-    this._init();
-    this._connectedInputRef.addEventListener("focus", () => {
-      this._show();
-    });
-    this._connectedInputRef.addEventListener("input", () => {
-      this._show();
-    });
-    this._connectedInputRef.addEventListener("blur", () => {
-      this._hide();
-    });
-    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);
-        }
-      }
-    });
   }
@@ -72,44 +69,44 @@ attributeChangedCallback(attrName, oldVal, newVal) {
       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";
-      }
+    } else if (attrName === "select-highlighted-option") {
+      this._selectHighlightedOption = coerceBoolean(newVal);
     }
   }
+  connectedCallback() {
+    const connectToIdRef = document.querySelector(`#${this._connectedToId}`);
+    if (connectToIdRef) {
+      this._connectedInputRef = connectToIdRef;
+      this._init();
+    }
+  }
+  disconnectedCallback() {
+    this._stopPositioner();
+    this._connectedInputRef.removeEventListener("focus", this._showHandler);
+    this._connectedInputRef.removeEventListener("click", this._showHandler);
+    this._connectedInputRef.removeEventListener("input", this._inputHandler);
+    this._connectedInputRef.removeEventListener("blur", this._hideHandler);
+    this._connectedInputRef.removeEventListener("keydown", this._inputKeydownHandler);
+  }
+  setInputRef(element) {
+    this._connectedInputRef = element;
+    this._init();
+  }
   _init() {
     this._slotRef.addEventListener("slotchange", () => {
-      this._numberOfOptions = 0;
-      this._slotRef.assignedNodes().forEach((node) => {
-        if (node.nodeName === "ECK-AUTOCOMPLETE-OPTION") {
-          this._numberOfOptions++;
-          node.highlight(false);
-          this._highlightedOptionRef = void 0;
-          node.addEventListener("eck-option-selected", (value) => {
-            this._connectedInputRef.value = value.detail.label;
-            this.shadowRoot.dispatchEvent(new CustomEvent("optionSelected", {
-              bubbles: true,
-              composed: true,
-              detail: {
-                option: value.detail
-              }
-            }));
-            this._hide();
-          });
-        }
-      });
-      this._highlightFirstOption();
-      this.shadowRoot.host.toggleAttribute("has-children", this._numberOfOptions !== 0);
+      this._slotChange();
     });
+    this._connectedInputRef.addEventListener("focus", this._showHandler);
+    this._connectedInputRef.addEventListener("click", this._showHandler);
+    this._connectedInputRef.addEventListener("input", this._inputHandler);
+    this._connectedInputRef.addEventListener("blur", this._hideHandler);
+    this._connectedInputRef.addEventListener("keydown", this._inputKeydownHandler);
   }
   _show() {
-    this._positionPanel();
-    this._highlightedOptionRef?.highlight(false);
-    this._highlightedOptionRef = void 0;
-    this._highlightFirstOption();
-    this.shadowRoot.host.style.display = "block";
-    this._panelHidden = false;
+    if (this._panelHidden) {
+      this._panelHidden = false;
+      this._startPositioner();
+      this._highlightOption(this._highlightedOptionRef, false);
+      this._highlightedOptionRef = void 0;
+      this._highlightFirstOption();
+      this.shadowRoot.host.style.display = "block";
+    }
   }
@@ -119,24 +116,21 @@ _hide() {
     this._panelHidden = true;
+    this._stopPositioner();
+    this._inputValueBeforeHighlight = null;
   }
+  _inputHandle() {
+    this._inputValueBeforeHighlight = this._connectedInputRef.value;
+    this._show();
+  }
   _positionPanel() {
     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`;
+    computePosition(this._connectedInputRef, this.shadowRoot.host, {
+      middleware: [flip()],
+      strategy: "fixed"
+    }).then(({ x, y }) => {
+      Object.assign(this.shadowRoot.host.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+    });
   }
@@ -152,52 +146,105 @@ _handleEnterOnInput(e) {
       return;
-    const nodes = this._slotRef.assignedNodes();
-    if (Array.isArray(nodes)) {
-      for (let i = 0; i < nodes.length; i++) {
-        if (nodes[i].nodeName === "ECK-AUTOCOMPLETE-OPTION") {
-          nodes[i].highlight(true);
-          this._highlightedOptionRef = nodes[i];
-          break;
-        }
-      }
+    const elements = this._slotRef.assignedElements();
+    if (elements[0]) {
+      this._highlightOption(elements[0], true, true);
+      this._highlightedOptionRef = elements[0];
     }
   }
   _changeHighlight(direction) {
-    let nodes = this._slotRef.assignedNodes();
-    if (Array.isArray(nodes)) {
-      nodes = nodes.filter((node) => node.nodeName === "ECK-AUTOCOMPLETE-OPTION");
-      if (this._highlightedOptionRef === void 0) {
+    const elements = this._slotRef.assignedElements();
+    if (this._highlightedOptionRef === void 0) {
+      if (direction === "ArrowUp") {
+        this._highlightOption(elements[elements.length - 1], true);
+        this._highlightedOptionRef = elements[elements.length - 1];
+      } else if (direction === "ArrowDown") {
+        this._highlightOption(elements[0], true);
+        this._highlightedOptionRef = elements[0];
+      }
+      return;
+    }
+    for (let i = 0; i < elements.length; i++) {
+      const optionNode = elements[i];
+      if (optionNode.getAttribute("highlighted") === "") {
+        this._highlightOption(optionNode, false);
+        let indexToHighlight = 0;
         if (direction === "ArrowUp") {
-          nodes[nodes.length - 1].highlight(true);
-          this._highlightedOptionRef = nodes[nodes.length - 1];
+          if (i > 0) {
+            indexToHighlight = i - 1;
+          } else {
+            indexToHighlight = elements.length - 1;
+          }
         } else if (direction === "ArrowDown") {
-          nodes[0].highlight(true);
-          this._highlightedOptionRef = nodes[0];
-        }
-        return;
-      }
-      for (let i = 0; i < nodes.length; i++) {
-        const optionNode = nodes[i];
-        if (optionNode.hasKeyboardHighlight) {
-          optionNode.highlight(false);
-          let indexToHighlight = 0;
-          if (direction === "ArrowUp") {
-            if (i > 0) {
-              indexToHighlight = i - 1;
-            } else {
-              indexToHighlight = nodes.length - 1;
-            }
-          } else if (direction === "ArrowDown") {
-            if (i < nodes.length - 1) {
-              indexToHighlight = i + 1;
-            } else {
-              indexToHighlight = 0;
-            }
+          if (i < elements.length - 1) {
+            indexToHighlight = i + 1;
+          } else {
+            indexToHighlight = 0;
           }
-          nodes[indexToHighlight].highlight(true);
-          this._highlightedOptionRef = nodes[indexToHighlight];
-          break;
         }
+        this._highlightOption(elements[indexToHighlight], true);
+        this._highlightedOptionRef = elements[indexToHighlight];
+        break;
       }
     }
   }
+  _highlightOption(option, value, triggeredByHighlightFirstOption = false) {
+    if (this._inputValueBeforeHighlight === null && value) {
+      this._inputValueBeforeHighlight = this._connectedInputRef.value;
+    }
+    option?.highlight(value, triggeredByHighlightFirstOption);
+    if (value) {
+      option?.scrollIntoView({
+        block: "nearest"
+      });
+    }
+  }
+  _startPositioner() {
+    this._stopPositioner();
+    this._positionPanel();
+    this._positionerCleanup = autoUpdate(this._connectedInputRef, this.shadowRoot.host, this._positionPanel.bind(this));
+  }
+  _stopPositioner() {
+    if (this._positionerCleanup) {
+      this._positionerCleanup();
+      this._positionerCleanup = void 0;
+    }
+  }
+  _inputKeydown(event) {
+    if (hasModifierKey(event))
+      return;
+    if (event.key === "Enter") {
+      this._handleEnterOnInput(event);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      if (this._inputValueBeforeHighlight !== null) {
+        this._connectedInputRef.value = this._inputValueBeforeHighlight;
+      }
+      this._hide();
+    } else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      if (this._panelHidden) {
+        this._show();
+      } else {
+        this._changeHighlight(event.key);
+      }
+    }
+  }
+  _slotChange() {
+    this._numberOfOptions = 0;
+    this._slotRef.assignedElements().forEach((element) => {
+      this._numberOfOptions++;
+      this._highlightOption(element, false);
+      this._highlightedOptionRef = void 0;
+      element.addEventListener("eck-autocomplete-option-selected", (value) => {
+        this._connectedInputRef.value = value.detail.label;
+        this._hide();
+      });
+      element.addEventListener("eck-autocomplete-option-highlighted", (value) => {
+        if (!this._panelHidden && this._selectHighlightedOption && !value.detail._tbhfo) {
+          this._connectedInputRef.value = value.detail.label;
+        }
+      });
+    });
+    this._highlightFirstOption();
+    this.shadowRoot.host.toggleAttribute("has-children", this._numberOfOptions !== 0);
+  }
 };
@@ -208,4 +255,5 @@
 
-// build-artifacts/eck-autocomplete-option-component/eck-autocomplete-option-component.css
-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}";
+// build-artifacts/eck-autocomplete-option-component/eck-autocomplete-option-component.scss
+var eck_autocomplete_option_component_default2 = `
+:host{display:block;box-sizing:border-box;padding:5px;color:#000}:host(:hover),:host([highlighted]){background-color:#b3e5fc;cursor:pointer}`;
 
@@ -215,6 +263,8 @@ // build-artifacts/eck-autocomplete-option-component/eck-autocomplete-option-component.ts
 template2.innerHTML = `<style>${eck_autocomplete_option_component_default2}</style>${eck_autocomplete_option_component_default}`;
-var EckAutocompleteOption = class extends HTMLElement {
-  _value;
+var EckAutocompleteOption = class extends BaseComponent {
+  value;
   _label;
-  hasKeyboardHighlight = false;
+  static get observedAttributes() {
+    return ["label"];
+  }
   constructor() {
@@ -225,8 +275,7 @@ super();
   }
-  static get tagName() {
-    return "eck-autocomplete-option";
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    if (attrName === "label") {
+      this._label = newVal ? newVal : void 0;
+    }
   }
-  static get observedAttributes() {
-    return ["value", "label"];
-  }
   connectedCallback() {
@@ -240,19 +289,21 @@ this.shadowRoot.host.addEventListener("mousedown", (e) => {
   }
-  attributeChangedCallback(attrName, oldVal, newVal) {
-    if (attrName === "value") {
-      this._value = newVal;
-    } else if (attrName === "label") {
-      this._label = newVal ? newVal : void 0;
+  highlight(highlight, triggeredByHighlightFirstOption) {
+    this.shadowRoot.host.toggleAttribute("highlighted", highlight);
+    if (highlight) {
+      this.shadowRoot.dispatchEvent(new CustomEvent("eck-autocomplete-option-highlighted", {
+        composed: true,
+        detail: {
+          value: this.value,
+          label: this._getLabel(),
+          _tbhfo: triggeredByHighlightFirstOption
+        }
+      }));
     }
   }
-  highlight(highlight) {
-    this.hasKeyboardHighlight = highlight;
-    this.shadowRoot.host.toggleAttribute("highlighted", highlight);
-  }
   fireSelectionEvent() {
-    this.shadowRoot.dispatchEvent(new CustomEvent("eck-option-selected", {
+    this.shadowRoot.dispatchEvent(new CustomEvent("eck-autocomplete-option-selected", {
+      composed: true,
       bubbles: true,
-      composed: true,
       detail: {
-        value: this._value,
+        value: this.value,
         label: this._getLabel()
@@ -272,8 +323,4 @@ }
 // build-artifacts/eck-autocomplete.ts
-if (customElements.get(EckAutocompleteOption.tagName) === void 0) {
-  customElements.define(EckAutocompleteOption.tagName, EckAutocompleteOption);
-}
-if (customElements.get(EckAutocomplete.tagName) === void 0) {
-  customElements.define(EckAutocomplete.tagName, EckAutocomplete);
-}
+customElements.define("eck-autocomplete-option", EckAutocompleteOption);
+customElements.define("eck-autocomplete", EckAutocomplete);
 //# sourceMappingURL=eck-autocomplete.js.map

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

@@ -1,2 +0,3 @@
-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;i;o=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.i=this.shadowRoot.querySelector("slot"),this.t=document.querySelector(`#${this.r}`),this.d(),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.c(t):t.key==="Escape"?(t.preventDefault(),this.h()):(t.key==="ArrowUp"||t.key==="ArrowDown")&&(t.preventDefault(),this.s?this.l():this.u(t.key))})}attributeChangedCallback(t,e,i){t==="connected-to-id"?this.r=i:t==="highlight-first-option"?this.a=r(i):t==="position-strategy"&&(i==="fixed"?(this.shadowRoot.host.style.position="fixed",this.n="fixed"):(this.shadowRoot.host.style.position="absolute",this.n="absolute"))}d(){this.i.addEventListener("slotchange",()=>{this.o=0,this.i.assignedNodes().forEach(t=>{t.nodeName==="ECK-AUTOCOMPLETE-OPTION"&&(this.o++,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.p(),this.shadowRoot.host.toggleAttribute("has-children",this.o!==0)})}l(){this.f(),this.e?.highlight(!1),this.e=void 0,this.p(),this.shadowRoot.host.style.display="block",this.s=!1}h(){this.shadowRoot.host.style.display="none",this.s=!0}f(){let t=this.t.getBoundingClientRect().width;this.shadowRoot.host.style.width=`${t}px`;let e,i;this.n==="absolute"?(e=this.t.offsetLeft,i=this.t.offsetTop+this.t.getBoundingClientRect().height):this.t.offsetParent.style.position==="absolute"?(e=this.t.offsetLeft,i=this.t.getBoundingClientRect().top-this.t.offsetParent.getBoundingClientRect().top+this.t.getBoundingClientRect().height):(e=this.t.getBoundingClientRect().x,i=this.t.getBoundingClientRect().bottom,e+=window.scrollX,i+=window.scrollY),this.shadowRoot.host.style.left=`${e}px`,this.shadowRoot.host.style.top=`${i}px`}c(t){this.s||this.e===void 0||this.o===0||(t.preventDefault(),this.e?.fireSelectionEvent())}p(){if(!this.a)return;let t=this.i.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}}}u(t){let e=this.i.assignedNodes();if(Array.isArray(e)){if(e=e.filter(i=>i.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 i=0;i<e.length;i++){let n=e[i];if(n.hasKeyboardHighlight){n.highlight(!1);let o=0;t==="ArrowUp"?i>0?o=i-1:o=e.length-1:t==="ArrowDown"&&(i<e.length-1?o=i+1:o=0),e[o].highlight(!0),this.e=e[o];break}}}}};export{c as EckAutocomplete};
+var Q="<slot></slot>";var Z=`
+:host{display:none;position:fixed;box-sizing:border-box;max-height:256px;overflow:auto;background-color:#fff}:host([has-children]){border:1px solid #000}`;var I=class extends HTMLElement{injectCSS(e){let n=document.createElement("template");n.innerHTML=`<style>${e}</style>`,this.shadowRoot.appendChild(n.content.cloneNode(!0))}};var z=t=>t!==null&&t!=="false";function U(t){return t.split("-")[0]}function nt(t){return t.split("-")[1]}function ot(t){return["top","bottom"].includes(U(t))?"x":"y"}function it(t){return t==="y"?"height":"width"}function tt(t,e,n){let{reference:o,floating:i}=t,s=o.x+o.width/2-i.width/2,r=o.y+o.height/2-i.height/2,c=ot(e),l=it(c),a=o[l]/2-i[l]/2,d=U(e),f=c==="x",u;switch(d){case"top":u={x:s,y:o.y-i.height};break;case"bottom":u={x:s,y:o.y+o.height};break;case"right":u={x:o.x+o.width,y:r};break;case"left":u={x:o.x-i.width,y:r};break;default:u={x:o.x,y:o.y}}switch(nt(e)){case"start":u[c]-=a*(n&&f?-1:1);break;case"end":u[c]+=a*(n&&f?-1:1);break}return u}var st=async(t,e,n)=>{let{placement:o="bottom",strategy:i="absolute",middleware:s=[],platform:r}=n,c=await(r.isRTL==null?void 0:r.isRTL(e)),l=await r.getElementRects({reference:t,floating:e,strategy:i}),{x:a,y:d}=tt(l,o,c),f=o,u={},v=0;for(let m=0;m<s.length;m++){let{name:p,fn:y}=s[m],{x:h,y:g,data:T,reset:w}=await y({x:a,y:d,initialPlacement:o,placement:f,strategy:i,middlewareData:u,rects:l,platform:r,elements:{reference:t,floating:e}});if(a=h??a,d=g??d,u={...u,[p]:{...u[p],...T}},w){typeof w=="object"&&(w.placement&&(f=w.placement),w.rects&&(l=w.rects===!0?await r.getElementRects({reference:t,floating:e,strategy:i}):w.rects),{x:a,y:d}=tt(l,f,c)),m=-1;continue}}return{x:a,y:d,placement:f,strategy:i,middlewareData:u}};function At(t){return{top:0,right:0,bottom:0,left:0,...t}}function Rt(t){return typeof t!="number"?At(t):{top:t,right:t,bottom:t,left:t}}function k(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function rt(t,e){var n;e===void 0&&(e={});let{x:o,y:i,platform:s,rects:r,elements:c,strategy:l}=t,{boundary:a="clippingAncestors",rootBoundary:d="viewport",elementContext:f="floating",altBoundary:u=!1,padding:v=0}=e,m=Rt(v),y=c[u?f==="floating"?"reference":"floating":f],h=k(await s.getClippingRect({element:(n=await(s.isElement==null?void 0:s.isElement(y)))==null||n?y:y.contextElement||await(s.getDocumentElement==null?void 0:s.getDocumentElement(c.floating)),boundary:a,rootBoundary:d,strategy:l})),g=k(s.convertOffsetParentRelativeRectToViewportRelativeRect?await s.convertOffsetParentRelativeRectToViewportRelativeRect({rect:f==="floating"?{...r.floating,x:o,y:i}:r.reference,offsetParent:await(s.getOffsetParent==null?void 0:s.getOffsetParent(c.floating)),strategy:l}):r[f]);return{top:h.top-g.top+m.top,bottom:g.bottom-h.bottom+m.bottom,left:h.left-g.left+m.left,right:g.right-h.right+m.right}}var Ot={left:"right",right:"left",bottom:"top",top:"bottom"};function N(t){return t.replace(/left|right|bottom|top/g,e=>Ot[e])}function Lt(t,e,n){n===void 0&&(n=!1);let o=nt(t),i=ot(t),s=it(i),r=i==="x"?o===(n?"end":"start")?"right":"left":o==="start"?"bottom":"top";return e.reference[s]>e.floating[s]&&(r=N(r)),{main:r,cross:N(r)}}var Ct={start:"end",end:"start"};function et(t){return t.replace(/start|end/g,e=>Ct[e])}function Tt(t){let e=N(t);return[et(t),e,et(e)]}var j=function(t){return t===void 0&&(t={}),{name:"flip",options:t,async fn(e){var n;let{placement:o,middlewareData:i,rects:s,initialPlacement:r,platform:c,elements:l}=e,{mainAxis:a=!0,crossAxis:d=!0,fallbackPlacements:f,fallbackStrategy:u="bestFit",flipAlignment:v=!0,...m}=t,p=U(o),h=f||(p===r||!v?[N(r)]:Tt(r)),g=[r,...h],T=await rt(e,m),w=[],M=((n=i.flip)==null?void 0:n.overflows)||[];if(a&&w.push(T[p]),d){let{main:C,cross:H}=Lt(o,s,await(c.isRTL==null?void 0:c.isRTL(l.floating)));w.push(T[C],T[H])}if(M=[...M,{placement:o,overflows:w}],!w.every(C=>C<=0)){var Y,q;let C=((Y=(q=i.flip)==null?void 0:q.index)!=null?Y:0)+1,H=g[C];if(H)return{data:{index:C,overflows:M},reset:{placement:H}};let D="bottom";switch(u){case"bestFit":{var G;let J=(G=M.slice().sort((yt,bt)=>yt.overflows.filter(L=>L>0).reduce((L,F)=>L+F,0)-bt.overflows.filter(L=>L>0).reduce((L,F)=>L+F,0))[0])==null?void 0:G.placement;J&&(D=J);break}case"initialPlacement":D=r;break}if(o!==D)return{reset:{placement:D}}}return{}}}};function ut(t){return t&&t.document&&t.location&&t.alert&&t.setInterval}function A(t){if(t==null)return window;if(!ut(t)){let e=t.ownerDocument;return e&&e.defaultView||window}return t}function S(t){return A(t).getComputedStyle(t)}function b(t){return ut(t)?"":t?(t.nodeName||"").toLowerCase():""}function x(t){return t instanceof A(t).HTMLElement}function R(t){return t instanceof A(t).Element}function kt(t){return t instanceof A(t).Node}function K(t){let e=A(t).ShadowRoot;return t instanceof e||t instanceof ShadowRoot}function _(t){let{overflow:e,overflowX:n,overflowY:o}=S(t);return/auto|scroll|overlay|hidden/.test(e+o+n)}function Pt(t){return["table","td","th"].includes(b(t))}function ht(t){let e=navigator.userAgent.toLowerCase().includes("firefox"),n=S(t);return n.transform!=="none"||n.perspective!=="none"||n.contain==="paint"||["transform","perspective"].includes(n.willChange)||e&&n.willChange==="filter"||e&&(n.filter?n.filter!=="none":!1)}function dt(){return!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)}var ct=Math.min,P=Math.max,B=Math.round;function E(t,e,n){e===void 0&&(e=!1),n===void 0&&(n=!1);let o=t.getBoundingClientRect(),i=1,s=1;e&&x(t)&&(i=t.offsetWidth>0&&B(o.width)/t.offsetWidth||1,s=t.offsetHeight>0&&B(o.height)/t.offsetHeight||1);let r=R(t)?A(t):window,c=!dt()&&n,l=(o.left+(c?r.visualViewport.offsetLeft:0))/i,a=(o.top+(c?r.visualViewport.offsetTop:0))/s,d=o.width/i,f=o.height/s;return{width:d,height:f,top:a,right:l+d,bottom:a+f,left:l,x:l,y:a}}function O(t){return((kt(t)?t.ownerDocument:t.document)||window.document).documentElement}function W(t){return R(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function mt(t){return E(O(t)).left+W(t).scrollLeft}function St(t){let e=E(t);return B(e.width)!==t.offsetWidth||B(e.height)!==t.offsetHeight}function Mt(t,e,n){let o=x(e),i=O(e),s=E(t,o&&St(e),n==="fixed"),r={scrollLeft:0,scrollTop:0},c={x:0,y:0};if(o||!o&&n!=="fixed")if((b(e)!=="body"||_(i))&&(r=W(e)),x(e)){let l=E(e,!0);c.x=l.x+e.clientLeft,c.y=l.y+e.clientTop}else i&&(c.x=mt(i));return{x:s.left+r.scrollLeft-c.x,y:s.top+r.scrollTop-c.y,width:s.width,height:s.height}}function X(t){return b(t)==="html"?t:t.assignedSlot||t.parentNode||(K(t)?t.host:null)||O(t)}function lt(t){return!x(t)||getComputedStyle(t).position==="fixed"?null:t.offsetParent}function Ht(t){let e=X(t);for(K(e)&&(e=e.host);x(e)&&!["html","body"].includes(b(e));){if(ht(e))return e;e=e.parentNode}return null}function $(t){let e=A(t),n=lt(t);for(;n&&Pt(n)&&getComputedStyle(n).position==="static";)n=lt(n);return n&&(b(n)==="html"||b(n)==="body"&&getComputedStyle(n).position==="static"&&!ht(n))?e:n||Ht(t)||e}function at(t){if(x(t))return{width:t.offsetWidth,height:t.offsetHeight};let e=E(t);return{width:e.width,height:e.height}}function Dt(t){let{rect:e,offsetParent:n,strategy:o}=t,i=x(n),s=O(n);if(n===s)return e;let r={scrollLeft:0,scrollTop:0},c={x:0,y:0};if((i||!i&&o!=="fixed")&&((b(n)!=="body"||_(s))&&(r=W(n)),x(n))){let l=E(n,!0);c.x=l.x+n.clientLeft,c.y=l.y+n.clientTop}return{...e,x:e.x-r.scrollLeft+c.x,y:e.y-r.scrollTop+c.y}}function Nt(t,e){let n=A(t),o=O(t),i=n.visualViewport,s=o.clientWidth,r=o.clientHeight,c=0,l=0;if(i){s=i.width,r=i.height;let a=dt();(a||!a&&e==="fixed")&&(c=i.offsetLeft,l=i.offsetTop)}return{width:s,height:r,x:c,y:l}}function Bt(t){var e;let n=O(t),o=W(t),i=(e=t.ownerDocument)==null?void 0:e.body,s=P(n.scrollWidth,n.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0),r=P(n.scrollHeight,n.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0),c=-o.scrollLeft+mt(t),l=-o.scrollTop;return S(i||n).direction==="rtl"&&(c+=P(n.clientWidth,i?i.clientWidth:0)-s),{width:s,height:r,x:c,y:l}}function pt(t){let e=X(t);return["html","body","#document"].includes(b(e))?t.ownerDocument.body:x(e)&&_(e)?e:pt(e)}function V(t,e){var n;e===void 0&&(e=[]);let o=pt(t),i=o===((n=t.ownerDocument)==null?void 0:n.body),s=A(o),r=i?[s].concat(s.visualViewport||[],_(o)?o:[]):o,c=e.concat(r);return i?c:c.concat(V(X(r)))}function Vt(t,e){let n=e.getRootNode==null?void 0:e.getRootNode();if(t.contains(e))return!0;if(n&&K(n)){let o=e;do{if(o&&t===o)return!0;o=o.parentNode||o.host}while(o)}return!1}function _t(t,e){let n=E(t,!1,e==="fixed"),o=n.top+t.clientTop,i=n.left+t.clientLeft;return{top:o,left:i,x:i,y:o,right:i+t.clientWidth,bottom:o+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}function ft(t,e,n){return e==="viewport"?k(Nt(t,n)):R(e)?_t(e,n):k(Bt(O(t)))}function Wt(t){let e=V(t),o=["absolute","fixed"].includes(S(t).position)&&x(t)?$(t):t;return R(o)?e.filter(i=>R(i)&&Vt(i,o)&&b(i)!=="body"):[]}function Ft(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t,r=[...n==="clippingAncestors"?Wt(e):[].concat(n),o],c=r[0],l=r.reduce((a,d)=>{let f=ft(e,d,i);return a.top=P(f.top,a.top),a.right=ct(f.right,a.right),a.bottom=ct(f.bottom,a.bottom),a.left=P(f.left,a.left),a},ft(e,c,i));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}}var It={getClippingRect:Ft,convertOffsetParentRelativeRectToViewportRelativeRect:Dt,isElement:R,getDimensions:at,getOffsetParent:$,getDocumentElement:O,getElementRects:t=>{let{reference:e,floating:n,strategy:o}=t;return{reference:Mt(e,$(n),o),floating:{...at(n),x:0,y:0}}},getClientRects:t=>Array.from(t.getClientRects()),isRTL:t=>S(t).direction==="rtl"};function gt(t,e,n,o){o===void 0&&(o={});let{ancestorScroll:i=!0,ancestorResize:s=!0,elementResize:r=!0,animationFrame:c=!1}=o,l=!1,a=i&&!c,d=s&&!c,f=r&&!c,u=a||d?[...R(t)?V(t):[],...V(e)]:[];u.forEach(h=>{a&&h.addEventListener("scroll",n,{passive:!0}),d&&h.addEventListener("resize",n)});let v=null;f&&(v=new ResizeObserver(n),R(t)&&v.observe(t),v.observe(e));let m,p=c?E(t):null;c&&y();function y(){if(l)return;let h=E(t);p&&(h.x!==p.x||h.y!==p.y||h.width!==p.width||h.height!==p.height)&&n(),p=h,m=requestAnimationFrame(y)}return()=>{var h;l=!0,u.forEach(g=>{a&&g.removeEventListener("scroll",n),d&&g.removeEventListener("resize",n)}),(h=v)==null||h.disconnect(),v=null,c&&cancelAnimationFrame(m)}}var wt=(t,e,n)=>st(t,e,{platform:It,...n});function vt(t){return t.altKey||t.shiftKey||t.ctrlKey||t.metaKey}var xt=document.createElement("template");xt.innerHTML=`<style>${Z}</style>${Q}`;var zt=class extends I{h;d=!1;m=!0;t;s;r=0;o=!0;e;c;i=null;l=this.a.bind(this);p=this.f.bind(this);g=this.A.bind(this);w=this.R.bind(this);static get observedAttributes(){return["connected-to-id","highlight-first-option","select-highlighted-option"]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(xt.content.cloneNode(!0)),this.s=this.shadowRoot.querySelector("slot")}attributeChangedCallback(e,n,o){e==="connected-to-id"?this.h=o:e==="highlight-first-option"?this.d=z(o):e==="select-highlighted-option"&&(this.m=z(o))}connectedCallback(){let e=document.querySelector(`#${this.h}`);e&&(this.t=e,this.v())}disconnectedCallback(){this.u(),this.t.removeEventListener("focus",this.l),this.t.removeEventListener("click",this.l),this.t.removeEventListener("input",this.w),this.t.removeEventListener("blur",this.p),this.t.removeEventListener("keydown",this.g)}setInputRef(e){this.t=e,this.v()}v(){this.s.addEventListener("slotchange",()=>{this.O()}),this.t.addEventListener("focus",this.l),this.t.addEventListener("click",this.l),this.t.addEventListener("input",this.w),this.t.addEventListener("blur",this.p),this.t.addEventListener("keydown",this.g)}a(){this.o&&(this.o=!1,this.L(),this.n(this.e,!1),this.e=void 0,this.b(),this.shadowRoot.host.style.display="block")}f(){this.shadowRoot.host.style.display="none",this.o=!0,this.u(),this.i=null}R(){this.i=this.t.value,this.a()}E(){let e=this.t.getBoundingClientRect().width;this.shadowRoot.host.style.width=`${e}px`,wt(this.t,this.shadowRoot.host,{middleware:[j()],strategy:"fixed"}).then(({x:n,y:o})=>{Object.assign(this.shadowRoot.host.style,{left:`${n}px`,top:`${o}px`})})}C(e){this.o||this.e===void 0||this.r===0||(e.preventDefault(),this.e?.fireSelectionEvent())}b(){if(!this.d)return;let e=this.s.assignedElements();e[0]&&(this.n(e[0],!0,!0),this.e=e[0])}T(e){let n=this.s.assignedElements();if(this.e===void 0){e==="ArrowUp"?(this.n(n[n.length-1],!0),this.e=n[n.length-1]):e==="ArrowDown"&&(this.n(n[0],!0),this.e=n[0]);return}for(let o=0;o<n.length;o++){let i=n[o];if(i.getAttribute("highlighted")===""){this.n(i,!1);let s=0;e==="ArrowUp"?o>0?s=o-1:s=n.length-1:e==="ArrowDown"&&(o<n.length-1?s=o+1:s=0),this.n(n[s],!0),this.e=n[s];break}}}n(e,n,o=!1){this.i===null&&n&&(this.i=this.t.value),e?.highlight(n,o),n&&e?.scrollIntoView({block:"nearest"})}L(){this.u(),this.E(),this.c=gt(this.t,this.shadowRoot.host,this.E.bind(this))}u(){this.c&&(this.c(),this.c=void 0)}A(e){vt(e)||(e.key==="Enter"?this.C(e):e.key==="Escape"?(e.preventDefault(),this.i!==null&&(this.t.value=this.i),this.f()):(e.key==="ArrowUp"||e.key==="ArrowDown")&&(e.preventDefault(),this.o?this.a():this.T(e.key)))}O(){this.r=0,this.s.assignedElements().forEach(e=>{this.r++,this.n(e,!1),this.e=void 0,e.addEventListener("eck-autocomplete-option-selected",n=>{this.t.value=n.detail.label,this.f()}),e.addEventListener("eck-autocomplete-option-highlighted",n=>{!this.o&&this.m&&!n.detail.k&&(this.t.value=n.detail.label)})}),this.b(),this.shadowRoot.host.toggleAttribute("has-children",this.r!==0)}};export{zt as EckAutocomplete};
 //# sourceMappingURL=eck-autocomplete-component.js.map

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

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

min/eck-autocomplete.js

@@ -1,2 +0,4 @@
-var r="<slot></slot>";var a=":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 p=document.createElement("template");p.innerHTML=`<style>${a}</style>${r}`;var s=class extends HTMLElement{a;d=!1;t;o;i=0;s=!0;e;n="absolute";constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(p.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.a}`),this.u(),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.m(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.a=o:t==="highlight-first-option"?this.d=d(o):t==="position-strategy"&&(o==="fixed"?(this.shadowRoot.host.style.position="fixed",this.n="fixed"):(this.shadowRoot.host.style.position="absolute",this.n="absolute"))}u(){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.p(),this.shadowRoot.host.toggleAttribute("has-children",this.i!==0)})}l(){this.g(),this.e?.highlight(!1),this.e=void 0,this.p(),this.shadowRoot.host.style.display="block",this.s=!1}h(){this.shadowRoot.host.style.display="none",this.s=!0}g(){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`}m(t){this.s||this.e===void 0||this.i===0||(t.preventDefault(),this.e?.fireSelectionEvent())}p(){if(!this.d)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 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 c="<slot></slot>";var u=":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>${u}</style>${c}`;var n=class extends HTMLElement{c;r;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.c=o:t==="label"&&(this.r=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.c,label:this.E()}}))}E(){return this.r!==void 0?this.r: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 tt="<slot></slot>";var et=`
+:host{display:none;position:fixed;box-sizing:border-box;max-height:256px;overflow:auto;background-color:#fff}:host([has-children]){border:1px solid #000}`;var T=class extends HTMLElement{injectCSS(e){let n=document.createElement("template");n.innerHTML=`<style>${e}</style>`,this.shadowRoot.appendChild(n.content.cloneNode(!0))}};var z=t=>t!==null&&t!=="false";function U(t){return t.split("-")[0]}function it(t){return t.split("-")[1]}function st(t){return["top","bottom"].includes(U(t))?"x":"y"}function rt(t){return t==="y"?"height":"width"}function nt(t,e,n){let{reference:o,floating:i}=t,s=o.x+o.width/2-i.width/2,r=o.y+o.height/2-i.height/2,l=st(e),c=rt(l),a=o[c]/2-i[c]/2,d=U(e),f=l==="x",u;switch(d){case"top":u={x:s,y:o.y-i.height};break;case"bottom":u={x:s,y:o.y+o.height};break;case"right":u={x:o.x+o.width,y:r};break;case"left":u={x:o.x-i.width,y:r};break;default:u={x:o.x,y:o.y}}switch(it(e)){case"start":u[l]-=a*(n&&f?-1:1);break;case"end":u[l]+=a*(n&&f?-1:1);break}return u}var lt=async(t,e,n)=>{let{placement:o="bottom",strategy:i="absolute",middleware:s=[],platform:r}=n,l=await(r.isRTL==null?void 0:r.isRTL(e)),c=await r.getElementRects({reference:t,floating:e,strategy:i}),{x:a,y:d}=nt(c,o,l),f=o,u={},v=0;for(let m=0;m<s.length;m++){let{name:p,fn:y}=s[m],{x:h,y:g,data:C,reset:w}=await y({x:a,y:d,initialPlacement:o,placement:f,strategy:i,middlewareData:u,rects:c,platform:r,elements:{reference:t,floating:e}});if(a=h??a,d=g??d,u={...u,[p]:{...u[p],...C}},w){typeof w=="object"&&(w.placement&&(f=w.placement),w.rects&&(c=w.rects===!0?await r.getElementRects({reference:t,floating:e,strategy:i}):w.rects),{x:a,y:d}=nt(c,f,l)),m=-1;continue}}return{x:a,y:d,placement:f,strategy:i,middlewareData:u}};function Ct(t){return{top:0,right:0,bottom:0,left:0,...t}}function Tt(t){return typeof t!="number"?Ct(t):{top:t,right:t,bottom:t,left:t}}function P(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function ct(t,e){var n;e===void 0&&(e={});let{x:o,y:i,platform:s,rects:r,elements:l,strategy:c}=t,{boundary:a="clippingAncestors",rootBoundary:d="viewport",elementContext:f="floating",altBoundary:u=!1,padding:v=0}=e,m=Tt(v),y=l[u?f==="floating"?"reference":"floating":f],h=P(await s.getClippingRect({element:(n=await(s.isElement==null?void 0:s.isElement(y)))==null||n?y:y.contextElement||await(s.getDocumentElement==null?void 0:s.getDocumentElement(l.floating)),boundary:a,rootBoundary:d,strategy:c})),g=P(s.convertOffsetParentRelativeRectToViewportRelativeRect?await s.convertOffsetParentRelativeRectToViewportRelativeRect({rect:f==="floating"?{...r.floating,x:o,y:i}:r.reference,offsetParent:await(s.getOffsetParent==null?void 0:s.getOffsetParent(l.floating)),strategy:c}):r[f]);return{top:h.top-g.top+m.top,bottom:g.bottom-h.bottom+m.bottom,left:h.left-g.left+m.left,right:g.right-h.right+m.right}}var Pt={left:"right",right:"left",bottom:"top",top:"bottom"};function B(t){return t.replace(/left|right|bottom|top/g,e=>Pt[e])}function St(t,e,n){n===void 0&&(n=!1);let o=it(t),i=st(t),s=rt(i),r=i==="x"?o===(n?"end":"start")?"right":"left":o==="start"?"bottom":"top";return e.reference[s]>e.floating[s]&&(r=B(r)),{main:r,cross:B(r)}}var Ht={start:"end",end:"start"};function ot(t){return t.replace(/start|end/g,e=>Ht[e])}function Mt(t){let e=B(t);return[ot(t),e,ot(e)]}var $=function(t){return t===void 0&&(t={}),{name:"flip",options:t,async fn(e){var n;let{placement:o,middlewareData:i,rects:s,initialPlacement:r,platform:l,elements:c}=e,{mainAxis:a=!0,crossAxis:d=!0,fallbackPlacements:f,fallbackStrategy:u="bestFit",flipAlignment:v=!0,...m}=t,p=U(o),h=f||(p===r||!v?[B(r)]:Mt(r)),g=[r,...h],C=await ct(e,m),w=[],M=((n=i.flip)==null?void 0:n.overflows)||[];if(a&&w.push(C[p]),d){let{main:L,cross:D}=St(o,s,await(l.isRTL==null?void 0:l.isRTL(c.floating)));w.push(C[L],C[D])}if(M=[...M,{placement:o,overflows:w}],!w.every(L=>L<=0)){var G,J;let L=((G=(J=i.flip)==null?void 0:J.index)!=null?G:0)+1,D=g[L];if(D)return{data:{index:L,overflows:M},reset:{placement:D}};let N="bottom";switch(u){case"bestFit":{var Q;let Z=(Q=M.slice().sort((Ot,kt)=>Ot.overflows.filter(k=>k>0).reduce((k,I)=>k+I,0)-kt.overflows.filter(k=>k>0).reduce((k,I)=>k+I,0))[0])==null?void 0:Q.placement;Z&&(N=Z);break}case"initialPlacement":N=r;break}if(o!==N)return{reset:{placement:N}}}return{}}}};function dt(t){return t&&t.document&&t.location&&t.alert&&t.setInterval}function A(t){if(t==null)return window;if(!dt(t)){let e=t.ownerDocument;return e&&e.defaultView||window}return t}function H(t){return A(t).getComputedStyle(t)}function b(t){return dt(t)?"":t?(t.nodeName||"").toLowerCase():""}function x(t){return t instanceof A(t).HTMLElement}function R(t){return t instanceof A(t).Element}function Dt(t){return t instanceof A(t).Node}function K(t){let e=A(t).ShadowRoot;return t instanceof e||t instanceof ShadowRoot}function W(t){let{overflow:e,overflowX:n,overflowY:o}=H(t);return/auto|scroll|overlay|hidden/.test(e+o+n)}function Nt(t){return["table","td","th"].includes(b(t))}function mt(t){let e=navigator.userAgent.toLowerCase().includes("firefox"),n=H(t);return n.transform!=="none"||n.perspective!=="none"||n.contain==="paint"||["transform","perspective"].includes(n.willChange)||e&&n.willChange==="filter"||e&&(n.filter?n.filter!=="none":!1)}function pt(){return!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)}var at=Math.min,S=Math.max,_=Math.round;function E(t,e,n){e===void 0&&(e=!1),n===void 0&&(n=!1);let o=t.getBoundingClientRect(),i=1,s=1;e&&x(t)&&(i=t.offsetWidth>0&&_(o.width)/t.offsetWidth||1,s=t.offsetHeight>0&&_(o.height)/t.offsetHeight||1);let r=R(t)?A(t):window,l=!pt()&&n,c=(o.left+(l?r.visualViewport.offsetLeft:0))/i,a=(o.top+(l?r.visualViewport.offsetTop:0))/s,d=o.width/i,f=o.height/s;return{width:d,height:f,top:a,right:c+d,bottom:a+f,left:c,x:c,y:a}}function O(t){return((Dt(t)?t.ownerDocument:t.document)||window.document).documentElement}function F(t){return R(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function gt(t){return E(O(t)).left+F(t).scrollLeft}function Bt(t){let e=E(t);return _(e.width)!==t.offsetWidth||_(e.height)!==t.offsetHeight}function _t(t,e,n){let o=x(e),i=O(e),s=E(t,o&&Bt(e),n==="fixed"),r={scrollLeft:0,scrollTop:0},l={x:0,y:0};if(o||!o&&n!=="fixed")if((b(e)!=="body"||W(i))&&(r=F(e)),x(e)){let c=E(e,!0);l.x=c.x+e.clientLeft,l.y=c.y+e.clientTop}else i&&(l.x=gt(i));return{x:s.left+r.scrollLeft-l.x,y:s.top+r.scrollTop-l.y,width:s.width,height:s.height}}function X(t){return b(t)==="html"?t:t.assignedSlot||t.parentNode||(K(t)?t.host:null)||O(t)}function ft(t){return!x(t)||getComputedStyle(t).position==="fixed"?null:t.offsetParent}function Vt(t){let e=X(t);for(K(e)&&(e=e.host);x(e)&&!["html","body"].includes(b(e));){if(mt(e))return e;e=e.parentNode}return null}function j(t){let e=A(t),n=ft(t);for(;n&&Nt(n)&&getComputedStyle(n).position==="static";)n=ft(n);return n&&(b(n)==="html"||b(n)==="body"&&getComputedStyle(n).position==="static"&&!mt(n))?e:n||Vt(t)||e}function ut(t){if(x(t))return{width:t.offsetWidth,height:t.offsetHeight};let e=E(t);return{width:e.width,height:e.height}}function Wt(t){let{rect:e,offsetParent:n,strategy:o}=t,i=x(n),s=O(n);if(n===s)return e;let r={scrollLeft:0,scrollTop:0},l={x:0,y:0};if((i||!i&&o!=="fixed")&&((b(n)!=="body"||W(s))&&(r=F(n)),x(n))){let c=E(n,!0);l.x=c.x+n.clientLeft,l.y=c.y+n.clientTop}return{...e,x:e.x-r.scrollLeft+l.x,y:e.y-r.scrollTop+l.y}}function Ft(t,e){let n=A(t),o=O(t),i=n.visualViewport,s=o.clientWidth,r=o.clientHeight,l=0,c=0;if(i){s=i.width,r=i.height;let a=pt();(a||!a&&e==="fixed")&&(l=i.offsetLeft,c=i.offsetTop)}return{width:s,height:r,x:l,y:c}}function It(t){var e;let n=O(t),o=F(t),i=(e=t.ownerDocument)==null?void 0:e.body,s=S(n.scrollWidth,n.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0),r=S(n.scrollHeight,n.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0),l=-o.scrollLeft+gt(t),c=-o.scrollTop;return H(i||n).direction==="rtl"&&(l+=S(n.clientWidth,i?i.clientWidth:0)-s),{width:s,height:r,x:l,y:c}}function wt(t){let e=X(t);return["html","body","#document"].includes(b(e))?t.ownerDocument.body:x(e)&&W(e)?e:wt(e)}function V(t,e){var n;e===void 0&&(e=[]);let o=wt(t),i=o===((n=t.ownerDocument)==null?void 0:n.body),s=A(o),r=i?[s].concat(s.visualViewport||[],W(o)?o:[]):o,l=e.concat(r);return i?l:l.concat(V(X(r)))}function zt(t,e){let n=e.getRootNode==null?void 0:e.getRootNode();if(t.contains(e))return!0;if(n&&K(n)){let o=e;do{if(o&&t===o)return!0;o=o.parentNode||o.host}while(o)}return!1}function Ut(t,e){let n=E(t,!1,e==="fixed"),o=n.top+t.clientTop,i=n.left+t.clientLeft;return{top:o,left:i,x:i,y:o,right:i+t.clientWidth,bottom:o+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}function ht(t,e,n){return e==="viewport"?P(Ft(t,n)):R(e)?Ut(e,n):P(It(O(t)))}function $t(t){let e=V(t),o=["absolute","fixed"].includes(H(t).position)&&x(t)?j(t):t;return R(o)?e.filter(i=>R(i)&&zt(i,o)&&b(i)!=="body"):[]}function jt(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t,r=[...n==="clippingAncestors"?$t(e):[].concat(n),o],l=r[0],c=r.reduce((a,d)=>{let f=ht(e,d,i);return a.top=S(f.top,a.top),a.right=at(f.right,a.right),a.bottom=at(f.bottom,a.bottom),a.left=S(f.left,a.left),a},ht(e,l,i));return{width:c.right-c.left,height:c.bottom-c.top,x:c.left,y:c.top}}var Kt={getClippingRect:jt,convertOffsetParentRelativeRectToViewportRelativeRect:Wt,isElement:R,getDimensions:ut,getOffsetParent:j,getDocumentElement:O,getElementRects:t=>{let{reference:e,floating:n,strategy:o}=t;return{reference:_t(e,j(n),o),floating:{...ut(n),x:0,y:0}}},getClientRects:t=>Array.from(t.getClientRects()),isRTL:t=>H(t).direction==="rtl"};function vt(t,e,n,o){o===void 0&&(o={});let{ancestorScroll:i=!0,ancestorResize:s=!0,elementResize:r=!0,animationFrame:l=!1}=o,c=!1,a=i&&!l,d=s&&!l,f=r&&!l,u=a||d?[...R(t)?V(t):[],...V(e)]:[];u.forEach(h=>{a&&h.addEventListener("scroll",n,{passive:!0}),d&&h.addEventListener("resize",n)});let v=null;f&&(v=new ResizeObserver(n),R(t)&&v.observe(t),v.observe(e));let m,p=l?E(t):null;l&&y();function y(){if(c)return;let h=E(t);p&&(h.x!==p.x||h.y!==p.y||h.width!==p.width||h.height!==p.height)&&n(),p=h,m=requestAnimationFrame(y)}return()=>{var h;c=!0,u.forEach(g=>{a&&g.removeEventListener("scroll",n),d&&g.removeEventListener("resize",n)}),(h=v)==null||h.disconnect(),v=null,l&&cancelAnimationFrame(m)}}var xt=(t,e,n)=>lt(t,e,{platform:Kt,...n});function yt(t){return t.altKey||t.shiftKey||t.ctrlKey||t.metaKey}var bt=document.createElement("template");bt.innerHTML=`<style>${et}</style>${tt}`;var Y=class extends T{d;m=!1;p=!0;t;s;r=0;o=!0;e;l;i=null;c=this.a.bind(this);g=this.f.bind(this);w=this.O.bind(this);v=this.k.bind(this);static get observedAttributes(){return["connected-to-id","highlight-first-option","select-highlighted-option"]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(bt.content.cloneNode(!0)),this.s=this.shadowRoot.querySelector("slot")}attributeChangedCallback(e,n,o){e==="connected-to-id"?this.d=o:e==="highlight-first-option"?this.m=z(o):e==="select-highlighted-option"&&(this.p=z(o))}connectedCallback(){let e=document.querySelector(`#${this.d}`);e&&(this.t=e,this.b())}disconnectedCallback(){this.u(),this.t.removeEventListener("focus",this.c),this.t.removeEventListener("click",this.c),this.t.removeEventListener("input",this.v),this.t.removeEventListener("blur",this.g),this.t.removeEventListener("keydown",this.w)}setInputRef(e){this.t=e,this.b()}b(){this.s.addEventListener("slotchange",()=>{this.L()}),this.t.addEventListener("focus",this.c),this.t.addEventListener("click",this.c),this.t.addEventListener("input",this.v),this.t.addEventListener("blur",this.g),this.t.addEventListener("keydown",this.w)}a(){this.o&&(this.o=!1,this.C(),this.n(this.e,!1),this.e=void 0,this.E(),this.shadowRoot.host.style.display="block")}f(){this.shadowRoot.host.style.display="none",this.o=!0,this.u(),this.i=null}k(){this.i=this.t.value,this.a()}A(){let e=this.t.getBoundingClientRect().width;this.shadowRoot.host.style.width=`${e}px`,xt(this.t,this.shadowRoot.host,{middleware:[$()],strategy:"fixed"}).then(({x:n,y:o})=>{Object.assign(this.shadowRoot.host.style,{left:`${n}px`,top:`${o}px`})})}T(e){this.o||this.e===void 0||this.r===0||(e.preventDefault(),this.e?.fireSelectionEvent())}E(){if(!this.m)return;let e=this.s.assignedElements();e[0]&&(this.n(e[0],!0,!0),this.e=e[0])}P(e){let n=this.s.assignedElements();if(this.e===void 0){e==="ArrowUp"?(this.n(n[n.length-1],!0),this.e=n[n.length-1]):e==="ArrowDown"&&(this.n(n[0],!0),this.e=n[0]);return}for(let o=0;o<n.length;o++){let i=n[o];if(i.getAttribute("highlighted")===""){this.n(i,!1);let s=0;e==="ArrowUp"?o>0?s=o-1:s=n.length-1:e==="ArrowDown"&&(o<n.length-1?s=o+1:s=0),this.n(n[s],!0),this.e=n[s];break}}}n(e,n,o=!1){this.i===null&&n&&(this.i=this.t.value),e?.highlight(n,o),n&&e?.scrollIntoView({block:"nearest"})}C(){this.u(),this.A(),this.l=vt(this.t,this.shadowRoot.host,this.A.bind(this))}u(){this.l&&(this.l(),this.l=void 0)}O(e){yt(e)||(e.key==="Enter"?this.T(e):e.key==="Escape"?(e.preventDefault(),this.i!==null&&(this.t.value=this.i),this.f()):(e.key==="ArrowUp"||e.key==="ArrowDown")&&(e.preventDefault(),this.o?this.a():this.P(e.key)))}L(){this.r=0,this.s.assignedElements().forEach(e=>{this.r++,this.n(e,!1),this.e=void 0,e.addEventListener("eck-autocomplete-option-selected",n=>{this.t.value=n.detail.label,this.f()}),e.addEventListener("eck-autocomplete-option-highlighted",n=>{!this.o&&this.p&&!n.detail.S&&(this.t.value=n.detail.label)})}),this.E(),this.shadowRoot.host.toggleAttribute("has-children",this.r!==0)}};var Et="<slot></slot>";var At=`
+:host{display:block;box-sizing:border-box;padding:5px;color:#000}:host(:hover),:host([highlighted]){background-color:#b3e5fc;cursor:pointer}`;var Rt=document.createElement("template");Rt.innerHTML=`<style>${At}</style>${Et}`;var q=class extends T{value;h;static get observedAttributes(){return["label"]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(Rt.content.cloneNode(!0))}attributeChangedCallback(e,n,o){e==="label"&&(this.h=o||void 0)}connectedCallback(){this.shadowRoot.host.addEventListener("mousedown",e=>{e.preventDefault()}),this.shadowRoot.host.addEventListener("click",()=>{this.fireSelectionEvent()})}highlight(e,n){this.shadowRoot.host.toggleAttribute("highlighted",e),e&&this.shadowRoot.dispatchEvent(new CustomEvent("eck-autocomplete-option-highlighted",{composed:!0,detail:{value:this.value,label:this.R(),S:n}}))}fireSelectionEvent(){this.shadowRoot.dispatchEvent(new CustomEvent("eck-autocomplete-option-selected",{composed:!0,bubbles:!0,detail:{value:this.value,label:this.R()}}))}R(){return this.h!==void 0?this.h:this.shadowRoot.host.innerHTML}};customElements.define("eck-autocomplete-option",q);customElements.define("eck-autocomplete",Y);
 //# sourceMappingURL=eck-autocomplete.js.map

package.json

 {
   "name": "eck-autocomplete",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Autocomplete web component. Suggests options for an input.",
@@ -12,2 +12,5 @@ "author": "Leon Eck",
   "homepage": "https://eck-autocomplete.leoneck.de",
+  "dependencies": {
+    "@floating-ui/dom": "0.4.2"
+  },
   "type": "module",
@@ -14,0 +17,0 @@ "main": "eck-autocomplete.js",

README.md

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

utils/custom-element.d.ts

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

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

290127

increased by160.07%

Number of package files

23

increased by9.52%

Lines of code

891

increased by33.58%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@floating-ui/dom@0.4.2

• + Added@floating-ui/core@0.6.2(transitive)

• + Added@floating-ui/dom@0.4.2(transitive)