@spectric/ui 0.0.20 → 0.0.22

package/src/components/query_bar/QueryBar.ts

@@ -1,39 +1,54 @@
 import { html, LitElement, PropertyValues } from "lit";
-import * as kuery from "./querylanguage/kuery"
-import { customElement, property, query, queryAsync, state } from "lit/decorators.js";
+import * as kuery from "./querylanguage/kuery";
+import {
+  customElement,
+  property,
+  query,
+  queryAsync,
+  state,
+} from "lit/decorators.js";
 import { SpectricInput } from "../input";
 import { JsonObject } from "./types";
-import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from "../types";
-import "./QueryBar.css"
-import { DialogElement } from "../dialog";
-import { createRef, ref } from "lit/directives/ref.js";
-import { SpectricButton } from "../Button";
+import {
+  HTMLElementTagWithEvents,
+  ReactElementWithPropsAndEvents,
+} from "../types";
+import "./QueryBar.css";
 import { PopoverElement } from "../tooltip/popover";
+
+import { DateTimePopup } from "./dateTimePopup";
+import { GeoJSONPopup } from "./geojsonPopup";
+import { DELETE, EDIT } from "../symbols";
 export type FieldTypes = {
   name: string;
-  type: "string" | "number" | "boolean"
-  format?: "date-time"
-}
-type SuggestionType = 'conjunction' | "field" | 'operator' | 'value'
+  type: "string" | "number" | "boolean" | "integer" | "object";
+  format?: "date-time" | "geojson";
+};
+type SuggestionType =
+  | "conjunction"
+  | "field"
+  | "operator"
+  | "value"
+  | "geo_value";
 type Suggestion = {
-  fieldName: string
-  end: number
-  prefix: string
-  start: number
-  suffix: string
-  suggestionTypes: (SuggestionType)[]
-  text: string
-  type: "cursor"
-}
+  fieldName: string;
+  end: number;
+  prefix: string;
+  start: number;
+  suffix: string;
+  suggestionTypes: SuggestionType[];
+  text: string;
+  type: "cursor";
+};
 export enum SupportedLanguages {
   MONGO = "toMongo",
   CQL = "toCql",
   DSL = "toDSL",
-  AST = "AST"
+  AST = "AST",
 }
-type SupportedLanguagesTypes = `${SupportedLanguages}`
+type SupportedLanguagesTypes = `${SupportedLanguages}`;
 interface QueryEventMap {
-  "change": (event: CustomEvent<string | kuery.KueryNode | JsonObject>) => void;
+  change: (event: CustomEvent<string | kuery.KueryNode | JsonObject>) => void;
 }
 
 export interface IQueryProps {
@@ -52,7 +67,10 @@ export interface IQueryProps {
   /**
    * Callback that will provide values for specific fields
    */
-  getValuesForField?: (field: string, text: string) => Promise<string[]>;
+  getValuesForField?: (
+    field: string,
+    text: string
+  ) => Promise<LabelValuesOrStrings>;
 
   /**
    * Input placeholder
@@ -62,55 +80,81 @@ export interface IQueryProps {
 type LabelValue = {
   label?: string;
   value: string;
-}
+};
+export type LabelValueOrString = LabelValue | string;
+export type LabelValuesOrStrings = (LabelValue | string)[];
 type Completion = LabelValue & {
   start: number;
   end: number;
-  type: SuggestionType
-  onSelect?: () => Promise<string | undefined | number>
-}
+  type: SuggestionType;
+  onSelect?: () => Promise<string | undefined | number | LabelValue>;
+};
+export const toLabelValue = (value: LabelValueOrString) => {
+  if (typeof value === "string") {
+    return { label: value, value };
+  }
+  return { label: value.label || value.value, value: value.value };
+};
+
 const NumberOperators: Record<string, LabelValue> = {
-  "eq": { value: " : ", label: " equals some value" },
-  "gt": { value: " > ", label: " is greater than some value" },
-  "lt": { value: " < ", label: " is less than some value" },
-  "gte": { value: " >= ", label: " is greater than or equal to some value" },
-  "lte": { value: " <= ", label: " is less than or equal to some value" }
-}
+  eq: { value: " : ", label: " equals some value" },
+  gt: { value: " > ", label: " is greater than some value" },
+  lt: { value: " < ", label: " is less than some value" },
+  gte: { value: " >= ", label: " is greater than or equal to some value" },
+  lte: { value: " <= ", label: " is less than or equal to some value" },
+};
+const GeospatialOperators: Record<string, LabelValue> = {
+  within: { value: " <@ ", label: " is contained within geometry" },
+};
+const ObjectOperators: Record<string, LabelValue> = {
+  exists: { value: ": *", label: " exists in any form" },
+};
 const StringOperators: Record<string, LabelValue> = {
-  "eq": { value: ": ", label: " equals some value" },
-  "exists": { value: ": *", label: " exists in any form" }
-}
-const BoolOperators: LabelValue[] = [{ value: ": true", label: " value is true" },
-{ value: ": false", label: "value is false" }
-]
+  eq: { value: ": ", label: " equals some value" },
+  exists: { value: ": *", label: " exists in any form" },
+};
+const BoolOperators: LabelValue[] = [
+  { value: ": true", label: " value is true" },
+  { value: ": false", label: "value is false" },
+];
 //Date operators are the same as number but we want a string value
-const DateOperators: Record<string, LabelValue> = Object.fromEntries(Object.entries(NumberOperators).map(([key, labelValue]) => [key, { value: labelValue.value, label: (labelValue.label || "").replace("value", "date-time") }]))
+const DateOperators: Record<string, LabelValue> = Object.fromEntries(
+  Object.entries(NumberOperators).map(([key, labelValue]) => [
+    key,
+    {
+      value: labelValue.value,
+      label: (labelValue.label || "").replace("value", "date-time"),
+    },
+  ])
+);
 /**
  * The Query component will take Opensearch Dashboard Query language and transform it into various outputs
  */
-@customElement('spectric-query')
+@customElement("spectric-query")
 export class SpectricQuery extends LitElement implements IQueryProps {
   private uuid: string;
   @property({ type: String, reflect: true })
   placeholder: string = "";
+  @state()
+  valueHelper: any;
   constructor() {
-    super()
-    this.uuid = crypto.randomUUID()
+    super();
+    this.uuid = crypto.randomUUID();
   }
   protected createRenderRoot(): HTMLElement | DocumentFragment {
-    return this
+    return this;
   }
 
   /**
-  * The internal value.
-  */
-  protected _value: string = '';
+   * The internal value.
+   */
+  protected _value: string = "";
   private suggestion?: Suggestion;
   /**
    * The value of the input.
    */
   @property({ type: String, reflect: true })
-  value = ""
+  value = "";
   @property({ type: String, reflect: true })
   outputLanguage: SupportedLanguagesTypes = "AST";
   @state()
@@ -121,264 +165,472 @@ export class SpectricQuery extends LitElement implements IQueryProps {
   fields: FieldTypes[] = [];
 
   @query(".autocomplete")
-  _autocomplete?: PopoverElement
+  _autocomplete?: PopoverElement;
+  @query(".valueHelper")
+  _valueHelper?: PopoverElement;
 
   @queryAsync(".autocomplete")
   //@ts-expect-error
-  _asyncAutocomplete: Promise<HTMLDivElement>
+  _asyncAutocomplete: Promise<HTMLDivElement>;
 
   /**
-  * The underlying input element
-  */
-  @query('spectric-input')
+   * The underlying input element
+   */
+  @query("spectric-input")
   protected _input!: SpectricInput;
+  _checkClickLocation = async (e: MouseEvent) => {
+    console.log(e);
+    let suggestion: Suggestion | null = null;
+    try {
+      suggestion = this._getSuggestion();
+    } catch (error) {
+      console.log(error);
+    }
+    if (!suggestion) {
+      return;
+    }
+    this._showValueHelper(suggestion);
+  };
+  _setValue = (value: string | undefined, suggestion: Suggestion) => {
+    if (value !== undefined) {
+      this.value =
+        this.value.substring(0, suggestion.start) +
+        value +
+        this.value.substring(suggestion.end);
+
+      //Important if the underlying inputs value hasn't been set the setSelectionRange will fail to set a range greater than the inputs current value
+      this._input.value = this.value;
+      this._input.setSelectionRange(
+        suggestion.start + value.length,
+        suggestion.start + value.length
+      );
+      if (this._valueHelper) {
+        this._valueHelper.hidePopover();
+      }
+    }
+  };
+  /**
+   * Value helper is a popover above the query bar that will help users set/change/clear the value if it is complex (like date time or geoshape)
+   * @param suggestion
+   */
+  _showValueHelper = async (suggestion: Suggestion) => {
+    this.valueHelper = undefined;
+    if (!suggestion || suggestion.start === suggestion.end) {
+      return;
+    }
+    let field = this.fields.find(
+      (field) => field.name === suggestion.fieldName
+    );
+
+    if (!field) {
+      return;
+    }
+    let values = await this.getValuesForField(
+      suggestion.fieldName,
+      suggestion.prefix
+    );
+    if (field.format === "date-time" && !values.length) {
+      values = ["now-1m", "now-1d", "now-1M"];
+    }
+    let modalFunction:
+      | ((values: LabelValuesOrStrings) => Promise<string | undefined>)
+      | undefined = undefined;
+    if (field.format == "date-time") {
+      modalFunction = DateTimePopup;
+    } else if (field.format == "geojson") {
+      modalFunction = GeoJSONPopup;
+    }
+    if (!this.completions.length && !this._autocomplete?.isOpen()) {
+      this.valueHelper = html`<div>
+        <spectric-button
+          tooltip="Delete Value"
+          tooltipPosition="top"
+          icon
+          size="xsmall"
+          @click=${() => {
+            this._setValue("", suggestion);
+          }}
+          >${DELETE}</spectric-button
+        >
+        ${modalFunction
+          ? html`<spectric-button
+              icon
+              tooltip="Edit Value"
+              tooltipPosition="top"
+              size="xsmall"
+              @click=${async () => {
+                this._setValue(await modalFunction(values), suggestion);
+              }}
+              >${EDIT}</spectric-button
+            >`
+          : null}
+      </div>`;
+      this._valueHelper?.showPopover();
+    }
+  };
+  _getSuggestion = () => {
+    let value = this.value;
+    if (this._input.selectionStart !== null) {
+      value =
+        value.substring(0, this._input.selectionStart) +
+        "©kuery-cursor©" +
+        value.substring(this._input.selectionStart);
+    }
+    //FIXME: make auto complete work well.
+    let suggestion = kuery.parse(value, {
+      parseCursor: true,
+      cursorSymbol: "©kuery-cursor©",
+      allowLeadingWildcards: false,
+    }) as unknown as Suggestion;
+    this._showValueHelper(suggestion);
+    return suggestion;
+  };
   _parseQuery = (e: InputEvent | undefined = undefined) => {
     let ast;
     if (e && e?.currentTarget) {
-      this.value = (e.currentTarget as HTMLInputElement).value
+      this.value = (e.currentTarget as HTMLInputElement).value;
     }
     if (this.value) {
       try {
         if (e && e.data == "(") {
           //Auto close parentheses or parsing and suggestions fail
-          this.value = this.value + " )"
-          this._input.setSelectionRange(this.value.length - 2, this.value.length - 2)
-        }
-        let value = this.value;
-        if (this._input.selectionStart !== null) {
-          value = value.substring(0, this._input.selectionStart) + "@kuery-cursor@" + value.substring(this._input.selectionStart)
+          this.value = this.value + " )";
+          this._input.setSelectionRange(
+            this.value.length - 2,
+            this.value.length - 2
+          );
         }
-        //FIXME: make auto complete work well.
-        let suggestions = kuery.parse(value, { parseCursor: true, cursorSymbol: "@kuery-cursor@", allowLeadingWildcards: false }) as unknown as Suggestion;
-        this.autoComplete(suggestions)
+        let suggestions = this._getSuggestion();
+        this.autoComplete(suggestions);
       } catch (error: any) {
         // this.completions = []
         // this._input.invalid = true;
         // let [expect, _, arrow] = e.message.split("\n")
         // this._input.invalidText = html`&#160;&#160;${arrow} ${expect}`;
-        return
+        return;
       }
     }
     try {
       ast = kuery.parse(this.value, { allowLeadingWildcards: false });
     } catch (error: any) {
-      return
+      return;
     }
-    let output
+    let output;
     if (this.outputLanguage == "AST") {
-      output = ast
+      output = ast;
     } else {
-      output = kuery[this.outputLanguage](ast, this.fields)
+      output = kuery[this.outputLanguage](ast, this.fields);
     }
-    let event = new CustomEvent("change", { detail: output })
-    this.dispatchEvent(event)
-  }
+    let event = new CustomEvent("change", { detail: output });
+    this.dispatchEvent(event);
+  };
 
-  getValuesForField = async (field: string, text: string): Promise<string[]> => {
-    console.log("getValuesForField isn't set no values returned", field, text)
-    return []
-  }
+  getValuesForField = async (
+    field: string,
+    text: string
+  ): Promise<LabelValuesOrStrings> => {
+    console.log("getValuesForField isn't set no values returned", field, text);
+    return [];
+  };
   async autoComplete(suggestion: Suggestion) {
-    this.completions = []
+    this.completions = [];
     if (suggestion.type !== "cursor") {
-      return
+      return;
     }
-    let completions: Completion[] = []
-    this.suggestion = suggestion
-    let { start, end } = suggestion
+    let completions: Completion[] = [];
+    this.suggestion = suggestion;
+    let { start, end } = suggestion;
     for (let type of suggestion.suggestionTypes) {
-      if (type == "conjunction" && suggestion.text.endsWith(' ')) {
-        completions.push(...["and ", "or "].map(value => ({ type, value, start: end, end: end })))
+      if (type == "conjunction" && suggestion.text.endsWith(" ")) {
+        completions.push(
+          ...["and ", "or "].map((value) => ({
+            type,
+            value,
+            start: end,
+            end: end,
+          }))
+        );
       }
       if (type === "field") {
-        let fieldCompletions = this.fields.filter(field => field.name.includes(suggestion.fieldName) || field.name.includes(suggestion.prefix)).map(f => {
-          return [{ type, value: f.name, start, end }]
-        }).flat()
-        completions.push(...fieldCompletions)
+        let fieldCompletions = this.fields
+          .filter(
+            (field) =>
+              field.name.includes(suggestion.fieldName) ||
+              field.name.includes(suggestion.prefix)
+          )
+          .map((f) => {
+            return [{ type, value: f.name, start, end }];
+          })
+          .flat();
+        completions.push(...fieldCompletions);
       }
       if (type === "operator") {
-        let fieldType = this.fields.find(field => field.name === suggestion.fieldName);
+        let fieldType = this.fields.find(
+          (field) => field.name === suggestion.fieldName
+        );
         if (fieldType) {
-          if (fieldType.type === "number") {
-            completions.push(...Object.values(NumberOperators).map(value => ({ type, ...value, start: end, end: end })))
+          if (["number", "integer"].includes(fieldType.type)) {
+            completions.push(
+              ...Object.values(NumberOperators).map((value) => ({
+                type,
+                ...value,
+                start: end,
+                end: end,
+              }))
+            );
+          } else if (fieldType.type === "object") {
+            if (fieldType.format == "geojson") {
+              completions.push(
+                ...Object.values(GeospatialOperators).map((value) => ({
+                  type,
+                  ...value,
+                  start: end,
+                  end: end,
+                  onSelect: async () => {
+                    let values = await this.getValuesForField(
+                      suggestion.fieldName,
+                      suggestion.prefix
+                    );
+                    return await GeoJSONPopup(values);
+                  },
+                }))
+              );
+            }
+            completions.push(
+              ...Object.values(ObjectOperators).map((value) => ({
+                type,
+                ...value,
+                start: end,
+                end: end,
+              }))
+            );
           } else if (fieldType.type === "string") {
             if (fieldType.format === "date-time") {
-              completions.push(...Object.values(DateOperators).map(value => ({
-                type, ...value, start: end, end: end, onSelect: async () => {
-                  let values = await this.getValuesForField(suggestion.fieldName, suggestion.prefix);
-                  if (values.length === 0) {
-                    values = ["now-1m", "now-1d", "now-1M",]
-                  }
-                  let value: string | undefined;
-                  let buttonRef = createRef<SpectricButton>()
-                  await new Promise((resolve) => {
-                    let dialog = DialogElement.display({}, html`
-                    <div class="query-bar-date-quick-select">
-                    ${values.map(v => html`<a href="#" @click=${(e: MouseEvent) => {
-                      e.preventDefault()
-                      value = `"${v}"`;
-                      resolve(value); dialog.open = false
-                    }}>${v}</a>`)}
-                    </div>
-                  <spectric-input variant="datetime-local" @change=${(e: any) => {
-
-                        if (!e.target) {
-                          return
-                        }
-                        let date = (new Date(e.target.value + ":00.000Z")).toISOString()
-                        value = `"${date}"`
-                        buttonRef.value!.disabled = value === undefined
-                      }}></spectric-input>
-              <spectric-button ${ref(buttonRef)} .disabled=${true} @click=${() => { resolve(value); dialog.open = false }}>Submit</spectric-button>
-              `)
-                  })
-                  return value
-                }
-              })))
+              completions.push(
+                ...Object.values(DateOperators).map((value) => ({
+                  type,
+                  ...value,
+                  start: end,
+                  end: end,
+                  onSelect: async () => {
+                    let values = await this.getValuesForField(
+                      suggestion.fieldName,
+                      suggestion.prefix
+                    );
+                    if (values.length === 0) {
+                      values = ["now-1m", "now-1d", "now-1M"];
+                    }
+                    let value = await DateTimePopup(values);
+                    return value;
+                  },
+                }))
+              );
             } else {
-              completions.push(...Object.values(StringOperators).map(value => ({ type, ...value, start: end, end: end })))
+              completions.push(
+                ...Object.values(StringOperators).map((value) => ({
+                  type,
+                  ...value,
+                  start: end,
+                  end: end,
+                }))
+              );
             }
           } else if (fieldType.type === "boolean") {
-            completions.push(...BoolOperators.map(value => ({ type, ...value, start: end, end: end })))
+            completions.push(
+              ...BoolOperators.map((value) => ({
+                type,
+                ...value,
+                start: end,
+                end: end,
+              }))
+            );
           }
         }
       }
       if (type === "value") {
-        let fieldType = this.fields.find(field => field.name === suggestion.fieldName);
-        if (fieldType && fieldType.type == "boolean") {
-          completions.push({ type, value: "true", start, end }, { type, value: "false", start, end })
+        let fieldType = this.fields.find(
+          (field) => field.name === suggestion.fieldName
+        );
+        if (
+          (fieldType && fieldType.type == "number") ||
+          fieldType?.type == "integer"
+        ) {
+          //Do nothing for numbers... Maybe show a  min/max?
+        } else if (fieldType && fieldType.type == "boolean") {
+          completions.push(
+            { type, value: "true", start, end },
+            { type, value: "false", start, end }
+          );
         } else {
-          console.log(`invoke callback to get values for ${suggestion.fieldName}`)
-          let values = await this.getValuesForField(suggestion.fieldName, suggestion.prefix);
+          console.log(
+            `invoke callback to get values for ${suggestion.fieldName}`
+          );
+          let values = await this.getValuesForField(
+            suggestion.fieldName,
+            suggestion.prefix
+          );
           if (fieldType?.type === "string") {
             //quote the values
-            values = values.map(v => `"${v}"`)
+            values = values.map((v) => `"${v}"`);
           }
-          completions.push(...values.map(value => ({ type, value, start, end })))
+          completions.push(
+            ...values
+              .map(toLabelValue)
+              .map((value) => ({ type, value: value.value, start, end }))
+          );
         }
-
       }
     }
-    this.completions = completions
+    this.completions = completions;
     if (this.completions.length && this._autocomplete) {
+      this._valueHelper?.hidePopover();
       let { width } = this._input.getBoundingClientRect();
-      this._autocomplete.maxWidth = width
+      this._autocomplete.maxWidth = width;
       this._autocomplete.showPopover();
 
       this._autocomplete.style.width = `${width - 15}px`;
-      let popover = this._autocomplete.querySelector<HTMLElement>("[popover]")
+      let popover = this._autocomplete.querySelector<HTMLElement>("[popover]");
       if (popover) {
         popover.style.width = `${width - 15}px`;
       }
     } else {
-      this._autocomplete?.hidePopover()
+      this._autocomplete?.hidePopover();
     }
   }
   protected updated(changed: PropertyValues): void {
     if (changed.has("outputLanguage")) {
-      this._parseQuery()
+      this._parseQuery();
     }
   }
   _selectCompletion = async () => {
     if (!this.suggestion) {
-      return
+      return;
     }
-    let completion = this.completions[this.completionIndex]
+    let completion = this.completions[this.completionIndex];
 
-    let prefix = this.value.substring(0, completion.start) +
-      completion.value
-    let insertIndex = prefix.length
-    let afterStart = this.value.substring(completion.end)
+    let prefix = this.value.substring(0, completion.start) + completion.value;
+    let insertIndex = prefix.length;
+    let afterStart = this.value.substring(completion.end);
     if (completion.value.includes(afterStart)) {
-      this.value = prefix
+      this.value = prefix;
     } else {
-      this.value = prefix + this.value.substring(completion.end)
+      this.value = prefix + this.value.substring(completion.end);
     }
     //Important if the underlying inputs value hasn't been set the setSelectionRange will fail to set a range greater than the inputs current value
-    this._input.value = this.value
-    this._input.setSelectionRange(insertIndex, insertIndex)
+    this._input.value = this.value;
+    this._input.setSelectionRange(insertIndex, insertIndex);
     if (completion.onSelect) {
-      let value = await completion.onSelect()
+      let value = await completion.onSelect();
       if (value !== undefined) {
-        this.value += value
-        setTimeout(() => { this._input.focus(); })
+        this.value += value;
+        setTimeout(() => {
+          this._input.focus();
+          this._showValueHelper(this._getSuggestion());
+        });
       }
     }
+    this._autocomplete?.hidePopover();
     this.completionIndex = 0;
-    this.completions = []
-    this._parseQuery()
-    this._input.focus()
-  }
+    this.completions = [];
+    this._parseQuery();
+    this._input.focus();
+  };
   _handleArrows = (e: KeyboardEvent) => {
     if (e.key === "Escape") {
       this.completions = []; //Escape closes the popover toplayer lets ensure the completions aren't selectable
     }
     if (e.key == "ArrowLeft" || e.key === "ArrowRight") {
-      setTimeout(this._parseQuery, 100)
+      setTimeout(this._parseQuery, 100);
     }
     if (!this.completions.length) {
-      return
+      return;
     }
-    if (["ArrowUp", "ArrowDown", 'Enter', "Tab"].includes(e.key) && this.suggestion) {
+    if (
+      ["ArrowUp", "ArrowDown", "Enter", "Tab"].includes(e.key) &&
+      this.suggestion
+    ) {
       e.preventDefault();
       if (e.key === "ArrowDown" || e.key === "Tab") {
         this.completionIndex += 1;
         if (this.completionIndex > this.completions.length - 1) {
-          this.completionIndex = 0
+          this.completionIndex = 0;
         }
       }
       if (e.key === "ArrowUp") {
         this.completionIndex -= 1;
         if (this.completionIndex < 0) {
-          this.completionIndex = this.completions.length - 1
+          this.completionIndex = this.completions.length - 1;
         }
       }
 
-      this._asyncAutocomplete?.then(element => {
+      this._asyncAutocomplete?.then((element) => {
         let active = element.querySelector(".option.active");
         if (active) {
-          active.scrollIntoView({ block: "nearest" })
+          active.scrollIntoView({ block: "nearest" });
         }
-      })
+      });
 
       if (e.key === "Enter") {
-        this._selectCompletion()
+        this._selectCompletion();
       }
     }
-  }
+  };
   protected render() {
     return html`
-      <spectric-input .value=${this.value} .placeholder=${this.placeholder} style=${`anchor-name:--${this.uuid};`} autocomplete="off" @input=${this._parseQuery} @keydown=${this._handleArrows} @change=${(e: Event) => e.stopPropagation()}></spectric-input>
-      <spectric-popover position="bottom"  class="autocomplete" .text=${this.completions.map((option: Completion, index) =>
-      html`<div @click=${() => {
-        this.completionIndex = index;
-        this._selectCompletion()
-      }} 
-      class=${this.completionIndex == index ? "option active" : "option"}>
-      <span class="optiontype ${option.type}">${option.type}</span> 
-      <span class="value">${option.value}</span> 
-      <span class="label">${option.label}</span>
-      </div>
-`
-    )
-      }>
-
-    </spectric-popover>
-      `
+      <spectric-input
+        .value=${this.value}
+        .placeholder=${this.placeholder}
+        style=${`anchor-name:--${this.uuid};`}
+        autocomplete="off"
+        @input=${this._parseQuery}
+        @keydown=${this._handleArrows}
+        @change=${(e: Event) => e.stopPropagation()}
+        @click=${this._checkClickLocation}
+      ></spectric-input>
+      <spectric-popover
+        class="valueHelper"
+        .text=${this.valueHelper}
+        position="top"
+      ></spectric-popover>
+      <spectric-popover
+        position="bottom"
+        class="autocomplete"
+        .text=${this.completions.map(
+          (option: Completion, index) =>
+            html`<div
+              @click=${() => {
+                this.completionIndex = index;
+                this._selectCompletion();
+              }}
+              class=${this.completionIndex == index
+                ? "option active"
+                : "option"}
+            >
+              <span class="optiontype ${option.type}">${option.type}</span>
+              <span class="value">${option.value}</span>
+              <span class="label">${option.label}</span>
+            </div> `
+        )}
+      >
+      </spectric-popover>
+    `;
   }
 }
 
-
 declare global {
   interface HTMLElementTagNameMap {
-    "spectric-query": HTMLElementTagWithEvents<SpectricQuery, QueryEventMap>
+    "spectric-query": HTMLElementTagWithEvents<SpectricQuery, QueryEventMap>;
   }
   namespace JSX {
     interface IntrinsicElements {
       /**
        * {@link SpectricQuery}
        */
-      "spectric-query": ReactElementWithPropsAndEvents<SpectricQuery, IQueryProps, QueryEventMap>
+      "spectric-query": ReactElementWithPropsAndEvents<
+        SpectricQuery,
+        IQueryProps,
+        QueryEventMap
+      >;
     }
   }
   namespace React {
@@ -387,7 +639,11 @@ declare global {
         /**
          * {@link SpectricQuery}
          */
-        "spectric-query": ReactElementWithPropsAndEvents<SpectricQuery, IQueryProps, QueryEventMap>;
+        "spectric-query": ReactElementWithPropsAndEvents<
+          SpectricQuery,
+          IQueryProps,
+          QueryEventMap
+        >;
       }
     }
   }