@spectric/ui 0.0.5 → 0.0.6

package/dist/components/query_bar/QueryBar.d.ts

@@ -46,12 +46,17 @@ export interface IQueryProps {
      * Callback that will provide values for specific fields
      */
     getValuesForField: (field: string, text: string) => Promise<string[]>;
+    /**
+     * Input placeholder
+     */
+    placeholder: string;
 }
 /**
  * The Query component will take Opensearch Dashboard Query language and transform it into various outputs
  */
 export declare class SpectricQuery extends LitElement implements IQueryProps {
     private uuid;
+    placeholder: string;
     constructor();
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     /**

package/dist/custom-elements.json

@@ -1816,7 +1816,7 @@
     },
     {
       "name": "spectric-query",
-      "description": "The Query component will take Opensearch Dashboard Query language and transform it into various outputs\n\nEvents:\n\n  * `change` {`CustomEvent<any>`} - \n\nAttributes:\n\n  * `outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\"`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\nProperties:\n\n  * `_value` {`string`} - The internal value.\n\n  * `suggestion` {`Suggestion | undefined`} - \n\n  * `completions` {`Completion[]`} - \n\n  * `completionIndex` {`number`} - \n\n  * `_autocomplete` {`HTMLDivElement | undefined`} - \n\n  * `_asyncAutocomplete` {`Promise<HTMLDivElement>`} - \n\n  * `_input` {`SpectricInput`} - The underlying input element\n\n  * `_parseQuery` - \n\n  * `_selectCompletion` - \n\n  * `_handleArrows` - \n\n  * `uuid` {`string`} - \n\n  * `outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\"`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\n  * `getValuesForField` - Callback that will provide values for specific fields",
+      "description": "The Query component will take Opensearch Dashboard Query language and transform it into various outputs\n\nEvents:\n\n  * `change` {`CustomEvent<any>`} - \n\nAttributes:\n\n  * `outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\"`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\n  * `placeholder` {`string`} - Input placeholder\n\nProperties:\n\n  * `_value` {`string`} - The internal value.\n\n  * `suggestion` {`Suggestion | undefined`} - \n\n  * `completions` {`Completion[]`} - \n\n  * `completionIndex` {`number`} - \n\n  * `_autocomplete` {`HTMLDivElement | undefined`} - \n\n  * `_asyncAutocomplete` {`Promise<HTMLDivElement>`} - \n\n  * `_input` {`SpectricInput`} - The underlying input element\n\n  * `_parseQuery` - \n\n  * `_selectCompletion` - \n\n  * `_handleArrows` - \n\n  * `uuid` {`string`} - \n\n  * `outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\"`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\n  * `getValuesForField` - Callback that will provide values for specific fields\n\n  * `placeholder` {`string`} - Input placeholder",
       "attributes": [
         {
           "name": "outputLanguage",
@@ -1844,6 +1844,10 @@
           "name": "fields",
           "description": "`fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\nProperty: fields\n\nDefault: "
         },
+        {
+          "name": "placeholder",
+          "description": "`placeholder` {`string`} - Input placeholder\n\nProperty: placeholder\n\nDefault: "
+        },
         {
           "name": "onchange",
           "description": "`change` {`CustomEvent<any>`} - "

package/dist/index.es.js

@@ -761,7 +761,7 @@ opacity:1
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Q = (s) => (r, o) => {
+const I = (s) => (r, o) => {
   o !== void 0 ? o.addInitializer(() => {
     customElements.define(s, r);
   }) : customElements.define(s, r);
@@ -849,7 +849,7 @@ const on = {
   secondary: "spectric-button--secondary",
   text: "spectric-button--text"
 };
-let G = class extends L {
+let J = class extends L {
   constructor() {
     super(...arguments), this.variant = "primary", this.disabled = !1, this.size = "large", this.label = "", this.danger = !1, this._onClick = (s) => {
       if (s instanceof CustomEvent)
@@ -884,28 +884,28 @@ let G = class extends L {
     `;
   }
 };
-G.styles = Go;
+J.styles = Go;
 ge([
   v({ type: String, reflect: !0 })
-], G.prototype, "variant", 2);
+], J.prototype, "variant", 2);
 ge([
   v({ type: Boolean, reflect: !0 })
-], G.prototype, "disabled", 2);
+], J.prototype, "disabled", 2);
 ge([
   v({ type: String, reflect: !0 })
-], G.prototype, "backgroundColor", 2);
+], J.prototype, "backgroundColor", 2);
 ge([
   v({ type: String, reflect: !0 })
-], G.prototype, "size", 2);
+], J.prototype, "size", 2);
 ge([
   v({ type: String, reflect: !0 })
-], G.prototype, "label", 2);
+], J.prototype, "label", 2);
 ge([
   v({ type: Boolean, reflect: !0 })
-], G.prototype, "danger", 2);
-G = ge([
-  Q("spectric-button")
-], G);
+], J.prototype, "danger", 2);
+J = ge([
+  I("spectric-button")
+], J);
 /**
  * @license
  * Copyright 2020 Google LLC
@@ -1090,7 +1090,7 @@ var dn = Object.defineProperty, fn = Object.getOwnPropertyDescriptor, ve = (s, r
   return i && c && dn(r, o, c), c;
 };
 const hn = ["mousemove", "click", "dblclick", "mousedown", "mouseup", "contextmenu"], at = { width: 200, height: 200 }, bt = { width: 10, height: 10 };
-let J = class extends Fs {
+let V = class extends Fs {
   constructor() {
     super(), this.arrayBuffer = new ArrayBuffer(0), this.frameWidth = 100, this.scale = 1, this.width = 200, this.height = 200, this.state = {}, this.yStart = 0, this.xStart = 0, this.refs = {
       viewport: ut(),
@@ -1210,7 +1210,7 @@ let J = class extends Fs {
 `;
   }
 };
-J.styles = K`
+V.styles = K`
     :host{
         position: relative;
         --border-radius: var(--spectric-border-radius,4em);
@@ -1309,25 +1309,25 @@ J.styles = K`
     `;
 ve([
   v({ type: Object, attribute: !1 })
-], J.prototype, "arrayBuffer", 2);
+], V.prototype, "arrayBuffer", 2);
 ve([
   v({ type: Number })
-], J.prototype, "frameWidth", 2);
+], V.prototype, "frameWidth", 2);
 ve([
   v({ type: Number })
-], J.prototype, "scale", 2);
+], V.prototype, "scale", 2);
 ve([
   v({ type: Number })
-], J.prototype, "width", 2);
+], V.prototype, "width", 2);
 ve([
   v({ type: Number })
-], J.prototype, "height", 2);
+], V.prototype, "height", 2);
 ve([
   $t("canvas")
-], J.prototype, "_canvas", 2);
-J = ve([
-  Q("spectric-bit-display")
-], J);
+], V.prototype, "_canvas", 2);
+V = ve([
+  I("spectric-bit-display")
+], V);
 const bn = K`.spectric-header {
   display: flex;
   justify-content: space-between;
@@ -1425,7 +1425,7 @@ _t([
   v({ type: String, reflect: !0 })
 ], Ee.prototype, "username", 2);
 Ee = _t([
-  Q("spectric-header")
+  I("spectric-header")
 ], Ee);
 var yn = Object.defineProperty, mn = Object.getOwnPropertyDescriptor, Te = (s, r, o, i) => {
   for (var c = i > 1 ? void 0 : i ? mn(r, o) : r, t = s.length - 1, p; t >= 0; t--)
@@ -1481,7 +1481,7 @@ Te([
   v({ state: !0, type: Boolean, attribute: !1 })
 ], he.prototype, "_dismissed", 2);
 he = Te([
-  Q("spectric-banner")
+  I("spectric-banner")
 ], he);
 const _n = K`
 
@@ -1864,7 +1864,7 @@ Z([
   v({ type: String, reflect: !0 })
 ], B.prototype, "theme", 2);
 B = Z([
-  Q("spectric-page")
+  I("spectric-page")
 ], B);
 var kn = Object.defineProperty, Sn = Object.getOwnPropertyDescriptor, O = (s, r, o, i) => {
   for (var c = i > 1 ? void 0 : i ? Sn(r, o) : r, t = s.length - 1, p; t >= 0; t--)
@@ -2022,7 +2022,7 @@ O([
   We("input")
 ], E.prototype, "_input", 2);
 E = O([
-  Q("spectric-input")
+  I("spectric-input")
 ], E);
 const Ae = (s) => Wt(s === "" ? void 0 : s ?? void 0), En = "end of input", On = {
   fieldName: "field name",
@@ -2082,25 +2082,25 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       return ko;
     }, x = function(e, n) {
       const l = [e, n].find((u) => u.type === "cursor");
-      return l || W("or", [e, n]);
+      return l || Y("or", [e, n]);
     }, _ = function(e, n) {
       const l = [e, n].find((u) => u.type === "cursor");
-      return l || W("and", [e, n]);
+      return l || Y("and", [e, n]);
     }, k = function(e) {
-      return e.type === "cursor" ? e : W("not", [e]);
-    }, S = "(", j = { type: "literal", value: "(", description: '"("' }, Ye = ")", te = { type: "literal", value: ")", description: '")"' }, I = function(e, n) {
+      return e.type === "cursor" ? e : Y("not", [e]);
+    }, S = "(", j = { type: "literal", value: "(", description: '"("' }, Ye = ")", te = { type: "literal", value: ")", description: '")"' }, H = function(e, n) {
       return n.type === "cursor" ? {
         ...n,
         suggestionTypes: ["conjunction"]
       } : e;
-    }, H = ":", R = { type: "literal", value: ":", description: '":"' }, ye = "{", xt = { type: "literal", value: "{", description: '"{"' }, At = "}", kt = { type: "literal", value: "}", description: '"}"' }, Gs = function(e, n, l) {
+    }, q = ":", R = { type: "literal", value: ":", description: '":"' }, ye = "{", xt = { type: "literal", value: "{", description: '"{"' }, At = "}", kt = { type: "literal", value: "}", description: '"}"' }, Gs = function(e, n, l) {
       return n.type === "cursor" ? {
         ...n,
         nestedPath: n.nestedPath ? `${e.value}.${n.nestedPath}` : e.value
       } : l.type === "cursor" ? {
         ...l,
         suggestionTypes: ["conjunction"]
-      } : W("nested", [e, n]);
+      } : Y("nested", [e, n]);
     }, Js = { type: "other", description: "fieldName" }, Vs = function(e, n, l) {
       if (l.type === "cursor")
         return {
@@ -2108,7 +2108,7 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
           suggestionTypes: ["conjunction"]
         };
       const u = To(n, l);
-      return W("range", [e, u]);
+      return Y("range", [e, u]);
     }, ei = function(e, n) {
       return n.type === "cursor" ? {
         ...n,
@@ -2136,27 +2136,27 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       return l ? {
         ...l,
         suggestionTypes: ["value"]
-      } : (u) => W("or", [e(u), n(u)]);
+      } : (u) => Y("or", [e(u), n(u)]);
     }, ii = function(e, n) {
       const l = [e, n].find((u) => u.type === "cursor");
       return l ? {
         ...l,
         suggestionTypes: ["value"]
-      } : (u) => W("and", [e(u), n(u)]);
+      } : (u) => Y("and", [e(u), n(u)]);
     }, oi = function(e) {
       return e.type === "cursor" ? {
         ...list,
         suggestionTypes: ["value"]
-      } : (n) => W("not", [e(n)]);
+      } : (n) => Y("not", [e(n)]);
     }, ni = { type: "other", description: "value" }, ai = function(e) {
       if (e.type === "cursor") return e;
       const n = re(!0);
-      return (l) => W("is", [l, e, n]);
+      return (l) => Y("is", [l, e, n]);
     }, ci = function(e) {
       if (e.type === "cursor") return e;
       !Eo && e.type === "wildcard" && le.wildcard.hasLeadingWildcard(e) && M("Leading wildcards are disabled. See query:allowLeadingWildcards in Advanced Settings.");
       const n = re(!1);
-      return (l) => W("is", [l, e, n]);
+      return (l) => Y("is", [l, e, n]);
     }, li = { type: "other", description: "OR" }, nr = "or", ar = { type: "literal", value: "or", description: '"or"' }, ui = { type: "other", description: "AND" }, cr = "and", lr = { type: "literal", value: "and", description: '"and"' }, pi = { type: "other", description: "NOT" }, ur = "not", pr = { type: "literal", value: "not", description: '"not"' }, di = { type: "other", description: "literal" }, Pe = '"', Le = { type: "literal", value: '"', description: '"\\""' }, St = function(e, n, l) {
       const { start: u, end: f } = ro();
       return {
@@ -2221,7 +2221,7 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       M("LuceneBoost");
     }, Gi = function() {
       return char;
-    }, Ji = "=", Vi = { type: "literal", value: "=", description: '"="' }, Fr = "[", Qr = { type: "literal", value: "[", description: '"["' }, Ir = "]", Hr = { type: "literal", value: "]", description: '"]"' }, qr = "TO", eo = { type: "literal", value: "TO", description: '"TO"' }, a = 0, $ = 0, Ge = [{ line: 1, column: 1, seenCR: !1 }], q = 0, Pt = [], d = 0, Je;
+    }, Ji = "=", Vi = { type: "literal", value: "=", description: '"="' }, Fr = "[", Qr = { type: "literal", value: "[", description: '"["' }, Ir = "]", Hr = { type: "literal", value: "]", description: '"]"' }, qr = "TO", eo = { type: "literal", value: "TO", description: '"TO"' }, a = 0, $ = 0, Ge = [{ line: 1, column: 1, seenCR: !1 }], W = 0, Pt = [], d = 0, Je;
     if ("startRule" in c) {
       if (!(c.startRule in p))
         throw new Error(`Can't start parsing from rule "` + c.startRule + '".');
@@ -2272,7 +2272,7 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       };
     }
     function h(e) {
-      a < q || (a > q && (q = a, Pt = []), Pt.push(e));
+      a < W || (a > W && (W = a, Pt = []), Pt.push(e));
     }
     function Yr(e, n, l, u) {
       function f(T) {
@@ -2284,17 +2284,17 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       }
       function m(T, P) {
         function se(Po) {
-          function nt(X) {
-            return X.charCodeAt(0).toString(16).toUpperCase();
+          function nt(G) {
+            return G.charCodeAt(0).toString(16).toUpperCase();
           }
-          return Po.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\x08/g, "\\b").replace(/\t/g, "\\t").replace(/\n/g, "\\n").replace(/\f/g, "\\f").replace(/\r/g, "\\r").replace(/[\x00-\x07\x0B\x0E\x0F]/g, function(X) {
-            return "\\x0" + nt(X);
-          }).replace(/[\x10-\x1F\x80-\xFF]/g, function(X) {
-            return "\\x" + nt(X);
-          }).replace(/[\u0100-\u0FFF]/g, function(X) {
-            return "\\u0" + nt(X);
-          }).replace(/[\u1000-\uFFFF]/g, function(X) {
-            return "\\u" + nt(X);
+          return Po.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\x08/g, "\\b").replace(/\t/g, "\\t").replace(/\n/g, "\\n").replace(/\f/g, "\\f").replace(/\r/g, "\\r").replace(/[\x00-\x07\x0B\x0E\x0F]/g, function(G) {
+            return "\\x0" + nt(G);
+          }).replace(/[\x10-\x1F\x80-\xFF]/g, function(G) {
+            return "\\x" + nt(G);
+          }).replace(/[\u0100-\u0FFF]/g, function(G) {
+            return "\\u0" + nt(G);
+          }).replace(/[\u1000-\uFFFF]/g, function(G) {
+            return "\\u" + nt(G);
           });
         }
         var z = new Array(T.length), ps, ds, Re;
@@ -2332,7 +2332,7 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       if (e = a, i.charCodeAt(a) === 40 ? (n = S, a++) : (n = t, d === 0 && h(j)), n !== t) {
         for (l = [], u = y(); u !== t; )
           l.push(u), u = y();
-        l !== t ? (u = et(), u !== t ? (f = it(), f !== t ? (i.charCodeAt(a) === 41 ? (m = Ye, a++) : (m = t, d === 0 && h(te)), m !== t ? ($ = e, n = I(u, f), e = n) : (a = e, e = t)) : (a = e, e = t)) : (a = e, e = t)) : (a = e, e = t);
+        l !== t ? (u = et(), u !== t ? (f = it(), f !== t ? (i.charCodeAt(a) === 41 ? (m = Ye, a++) : (m = t, d === 0 && h(te)), m !== t ? ($ = e, n = H(u, f), e = n) : (a = e, e = t)) : (a = e, e = t)) : (a = e, e = t)) : (a = e, e = t);
       } else
         a = e, e = t;
       return e === t && (e = so()), e;
@@ -2343,7 +2343,7 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
         for (l = [], u = y(); u !== t; )
           l.push(u), u = y();
         if (l !== t)
-          if (i.charCodeAt(a) === 58 ? (u = H, a++) : (u = t, d === 0 && h(R)), u !== t) {
+          if (i.charCodeAt(a) === 58 ? (u = q, a++) : (u = t, d === 0 && h(R)), u !== t) {
             for (f = [], m = y(); m !== t; )
               f.push(m), m = y();
             if (f !== t)
@@ -2395,7 +2395,7 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
         for (l = [], u = y(); u !== t; )
           l.push(u), u = y();
         if (l !== t)
-          if (i.charCodeAt(a) === 58 ? (u = H, a++) : (u = t, d === 0 && h(R)), u !== t) {
+          if (i.charCodeAt(a) === 58 ? (u = q, a++) : (u = t, d === 0 && h(R)), u !== t) {
             for (f = [], m = y(); m !== t; )
               f.push(m), m = y();
             f !== t ? (m = Dt(), m !== t ? ($ = e, n = ei(n, m), e = n) : (a = e, e = t)) : (a = e, e = t);
@@ -2650,7 +2650,7 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
         for (l = [], u = y(); u !== t; )
           l.push(u), u = y();
         if (l !== t)
-          if (i.charCodeAt(a) === 58 ? (u = H, a++) : (u = t, d === 0 && h(R)), u !== t) {
+          if (i.charCodeAt(a) === 58 ? (u = q, a++) : (u = t, d === 0 && h(R)), u !== t) {
             for (f = [], m = y(); m !== t; )
               f.push(m), m = y();
             f !== t ? (m = ns(), m !== t ? (n = [n, l, u, f, m], e = n) : (a = e, e = t)) : (a = e, e = t);
@@ -2672,7 +2672,7 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
         for (l = [], u = y(); u !== t; )
           l.push(u), u = y();
         if (l !== t)
-          if (i.charCodeAt(a) === 58 ? (u = H, a++) : (u = t, d === 0 && h(R)), u !== t) {
+          if (i.charCodeAt(a) === 58 ? (u = q, a++) : (u = t, d === 0 && h(R)), u !== t) {
             for (f = [], m = y(); m !== t; )
               f.push(m), m = y();
             f !== t ? (m = xe(), m !== t ? ($ = e, n = qi(), e = n) : (a = e, e = t)) : (a = e, e = t);
@@ -2792,7 +2792,7 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     }
     function cs() {
       var e;
-      return i.charCodeAt(a) === 43 ? (e = Sr, a++) : (e = t, d === 0 && h(Cr)), e === t && (i.charCodeAt(a) === 45 ? (e = Er, a++) : (e = t, d === 0 && h(Or)), e === t && (i.charCodeAt(a) === 61 ? (e = Ji, a++) : (e = t, d === 0 && h(Vi)), e === t && (i.charCodeAt(a) === 62 ? (e = $r, a++) : (e = t, d === 0 && h(_r)), e === t && (i.charCodeAt(a) === 60 ? (e = yr, a++) : (e = t, d === 0 && h(mr)), e === t && (i.charCodeAt(a) === 33 ? (e = Pr, a++) : (e = t, d === 0 && h(Lr)), e === t && (i.charCodeAt(a) === 40 ? (e = S, a++) : (e = t, d === 0 && h(j)), e === t && (i.charCodeAt(a) === 41 ? (e = Ye, a++) : (e = t, d === 0 && h(te)), e === t && (i.charCodeAt(a) === 123 ? (e = ye, a++) : (e = t, d === 0 && h(xt)), e === t && (i.charCodeAt(a) === 125 ? (e = At, a++) : (e = t, d === 0 && h(kt)), e === t && (i.charCodeAt(a) === 91 ? (e = Fr, a++) : (e = t, d === 0 && h(Qr)), e === t && (i.charCodeAt(a) === 93 ? (e = Ir, a++) : (e = t, d === 0 && h(Hr)), e === t && (i.charCodeAt(a) === 94 ? (e = Mr, a++) : (e = t, d === 0 && h(zr)), e === t && (i.charCodeAt(a) === 34 ? (e = Pe, a++) : (e = t, d === 0 && h(Le)), e === t && (i.charCodeAt(a) === 126 ? (e = Ot, a++) : (e = t, d === 0 && h(Tt)), e === t && (i.charCodeAt(a) === 42 ? (e = Ze, a++) : (e = t, d === 0 && h(Xe)), e === t && (i.charCodeAt(a) === 63 ? (e = jr, a++) : (e = t, d === 0 && h(Rr)), e === t && (i.charCodeAt(a) === 58 ? (e = H, a++) : (e = t, d === 0 && h(R)), e === t && (i.charCodeAt(a) === 92 ? (e = Ne, a++) : (e = t, d === 0 && h(De)), e === t && (i.charCodeAt(a) === 47 ? (e = Ct, a++) : (e = t, d === 0 && h(Et))))))))))))))))))))), e;
+      return i.charCodeAt(a) === 43 ? (e = Sr, a++) : (e = t, d === 0 && h(Cr)), e === t && (i.charCodeAt(a) === 45 ? (e = Er, a++) : (e = t, d === 0 && h(Or)), e === t && (i.charCodeAt(a) === 61 ? (e = Ji, a++) : (e = t, d === 0 && h(Vi)), e === t && (i.charCodeAt(a) === 62 ? (e = $r, a++) : (e = t, d === 0 && h(_r)), e === t && (i.charCodeAt(a) === 60 ? (e = yr, a++) : (e = t, d === 0 && h(mr)), e === t && (i.charCodeAt(a) === 33 ? (e = Pr, a++) : (e = t, d === 0 && h(Lr)), e === t && (i.charCodeAt(a) === 40 ? (e = S, a++) : (e = t, d === 0 && h(j)), e === t && (i.charCodeAt(a) === 41 ? (e = Ye, a++) : (e = t, d === 0 && h(te)), e === t && (i.charCodeAt(a) === 123 ? (e = ye, a++) : (e = t, d === 0 && h(xt)), e === t && (i.charCodeAt(a) === 125 ? (e = At, a++) : (e = t, d === 0 && h(kt)), e === t && (i.charCodeAt(a) === 91 ? (e = Fr, a++) : (e = t, d === 0 && h(Qr)), e === t && (i.charCodeAt(a) === 93 ? (e = Ir, a++) : (e = t, d === 0 && h(Hr)), e === t && (i.charCodeAt(a) === 94 ? (e = Mr, a++) : (e = t, d === 0 && h(zr)), e === t && (i.charCodeAt(a) === 34 ? (e = Pe, a++) : (e = t, d === 0 && h(Le)), e === t && (i.charCodeAt(a) === 126 ? (e = Ot, a++) : (e = t, d === 0 && h(Tt)), e === t && (i.charCodeAt(a) === 42 ? (e = Ze, a++) : (e = t, d === 0 && h(Xe)), e === t && (i.charCodeAt(a) === 63 ? (e = jr, a++) : (e = t, d === 0 && h(Rr)), e === t && (i.charCodeAt(a) === 58 ? (e = q, a++) : (e = t, d === 0 && h(R)), e === t && (i.charCodeAt(a) === 92 ? (e = Ne, a++) : (e = t, d === 0 && h(De)), e === t && (i.charCodeAt(a) === 47 ? (e = Ct, a++) : (e = t, d === 0 && h(Et))))))))))))))))))))), e;
     }
     function ls() {
       var e, n, l, u, f;
@@ -2823,14 +2823,14 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       var e;
       return i.charCodeAt(a) === 93 ? (e = Ir, a++) : (e = t, d === 0 && h(Hr)), e === t && (i.charCodeAt(a) === 125 ? (e = At, a++) : (e = t, d === 0 && h(kt))), e;
     }
-    const { errorOnLuceneSyntax: ko, parseCursor: So, cursorSymbol: Co, allowLeadingWildcards: Eo = !0, helpers: { nodeTypes: le } } = c, W = le.function.buildNodeWithArgumentNodes, re = le.literal.buildNode, Oo = le.wildcard.buildNode, To = le.namedArg.buildNode, { wildcardSymbol: us } = le.wildcard;
+    const { errorOnLuceneSyntax: ko, parseCursor: So, cursorSymbol: Co, allowLeadingWildcards: Eo = !0, helpers: { nodeTypes: le } } = c, Y = le.function.buildNodeWithArgumentNodes, re = le.literal.buildNode, Oo = le.wildcard.buildNode, To = le.namedArg.buildNode, { wildcardSymbol: us } = le.wildcard;
     if (Je = b(), Je !== t && a === i.length)
       return Je;
     throw Je !== t && a < i.length && h({ type: "end", description: "end of input" }), Yr(
       null,
       Pt,
-      q < i.length ? i.charAt(q) : null,
-      q < i.length ? Ve(q, q + 1) : Ve(q, q)
+      W < i.length ? i.charAt(W) : null,
+      W < i.length ? Ve(W, W + 1) : Ve(W, W)
     );
   }
   return {
@@ -2860,7 +2860,7 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   } catch (r) {
     return r.message.startsWith("Lucene");
   }
-}, N = (s, r, o, i) => (r = void 0, !s || !s.type || !ne[s.type] ? N(ne.function.buildNode("and", []), r) : ne[s.type].toOpenSearchQuery(s, r, o, i)), V = "@kuery-wildcard@";
+}, N = (s, r, o, i) => (r = void 0, !s || !s.type || !ne[s.type] ? N(ne.function.buildNode("and", []), r) : ne[s.type].toOpenSearchQuery(s, r, o, i)), ee = "@kuery-wildcard@";
 function Ln(s) {
   return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
@@ -2868,26 +2868,26 @@ function Nn(s) {
   return s.replace(/[+-=&|><!(){}[\]^"~*?:\\/]/g, "\\$&");
 }
 function Dn(s) {
-  return s.includes(V) ? {
+  return s.includes(ee) ? {
     type: "wildcard",
     value: s
   } : Oe(s);
 }
 function Hs(s, r) {
-  const { value: o } = s, i = o.split(V).map(Ln).join("[\\s\\S]*");
+  const { value: o } = s, i = o.split(ee).map(Ln).join("[\\s\\S]*");
   return new RegExp(`^${i}$`).test(r);
 }
 function jn(s) {
   const { value: r } = s;
-  return r.split(V).join("*");
+  return r.split(ee).join("*");
 }
 function Kt(s) {
   const { value: r } = s;
-  return r.split(V).map(Nn).join("*");
+  return r.split(ee).map(Nn).join("*");
 }
 function Rn(s) {
   const { value: r } = s;
-  return r.startsWith(V) && r.replace(V, "").length > 0;
+  return r.startsWith(ee) && r.replace(ee, "").length > 0;
 }
 const Bn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -2896,7 +2896,7 @@ const Bn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   test: Hs,
   toOpenSearchQuery: jn,
   toQueryStringQuery: Kt,
-  wildcardSymbol: V
+  wildcardSymbol: ee
 }, Symbol.toStringTag, { value: "Module" }));
 function sr(s, r) {
   if (!r) return [];
@@ -2970,45 +2970,45 @@ function Mn(s, r, o = {}, i = {}) {
   const k = t.type === "wildcard" && w === "*", S = b.type === "wildcard" && g === "*" || _ && r && _.length === r.fields.length;
   return k && S ? { match_all: {} } : {
     bool: {
-      should: _.reduce((te, I) => {
-        const H = (R) => {
+      should: _.reduce((te, H) => {
+        const q = (R) => {
           var ye;
-          return b.type !== "wildcard" || !((ye = I.subType) != null && ye.nested) || i != null && i.nested ? R : {
+          return b.type !== "wildcard" || !((ye = H.subType) != null && ye.nested) || i != null && i.nested ? R : {
             nested: {
-              path: I.subType.nested.path,
+              path: H.subType.nested.path,
               query: R,
               score_mode: "none"
             }
           };
         };
-        if (I.scripted)
+        if (H.scripted)
           return [];
         if (k)
           return [
             ...te,
-            H({
+            q({
               exists: {
-                field: I.name
+                field: H.name
               }
             })
           ];
         if (t.type === "wildcard")
           return [
             ...te,
-            H({
+            q({
               query_string: {
-                fields: [I.name],
+                fields: [H.name],
                 query: Kt(t)
               }
             })
           ];
-        if (I.type === "date") {
+        if (H.type === "date") {
           const R = o.dateFormatTZ ? { time_zone: o.dateFormatTZ } : {};
           return [
             ...te,
-            H({
+            q({
               range: {
-                [I.name]: {
+                [H.name]: {
                   gte: w,
                   lte: w,
                   ...R
@@ -3020,9 +3020,9 @@ function Mn(s, r, o = {}, i = {}) {
           const R = x === "phrase" ? "match_phrase" : "match";
           return [
             ...te,
-            H({
+            q({
               [R]: {
-                [I.name]: w
+                [H.name]: w
               }
             })
           ];
@@ -3269,7 +3269,7 @@ const fa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   literal: Tn,
   namedArg: fa,
   wildcard: Bn
-}, ha = V, ba = (s, r) => "(" + (s.arguments || []).map((i) => be(i, r)).join(" AND ") + ")", ga = (s, r) => {
+}, ha = ee, ba = (s, r) => "(" + (s.arguments || []).map((i) => be(i, r)).join(" AND ") + ")", ga = (s, r) => {
   var {
     arguments: [o, i, c]
   } = s;
@@ -3314,7 +3314,7 @@ const fa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 }, be = (s, r) => {
   const o = Aa[s.type];
   return o(s, r);
-}, ka = V, Sa = (s) => ({ $and: (s.arguments || []).map((i) => ae(i)) }), Ca = (s) => {
+}, ka = ee, Sa = (s) => ({ $and: (s.arguments || []).map((i) => ae(i)) }), Ca = (s) => {
   const {
     arguments: [r, o]
   } = s;
@@ -3507,9 +3507,9 @@ ce([
   $t("dialog")
 ], F.prototype, "dialogElement", 2);
 F = ce([
-  Q(Ys)
+  I(Ys)
 ], F);
-var Ma = Object.defineProperty, za = Object.getOwnPropertyDescriptor, ee = (s, r, o, i) => {
+var Ma = Object.defineProperty, za = Object.getOwnPropertyDescriptor, X = (s, r, o, i) => {
   for (var c = i > 1 ? void 0 : i ? za(r, o) : r, t = s.length - 1, p; t >= 0; t--)
     (p = s[t]) && (c = (i ? p(r, o, c) : p(c)) || c);
   return i && c && Ma(r, o, c), c;
@@ -3527,9 +3527,9 @@ const Ks = {
   { value: ": true", label: " value is true" },
   { value: ": false", label: "value is false" }
 ], Ha = Object.fromEntries(Object.entries(Ks).map(([s, r]) => [s, { value: r.value, label: (r.label || "").replace("value", "date-time") }]));
-let Y = class extends L {
+let Q = class extends L {
   constructor() {
-    super(), this._value = "", this.outputLanguage = "AST", this.completions = [], this.completionIndex = 0, this.fields = [], this._parseQuery = (s = void 0) => {
+    super(), this.placeholder = "", this._value = "", this.outputLanguage = "AST", this.completions = [], this.completionIndex = 0, this.fields = [], this._parseQuery = (s = void 0) => {
       let r;
       if (this.value == "")
         return;
@@ -3627,8 +3627,8 @@ let Y = class extends L {
       }
     }
     if (this.completions = r, this.completions.length && this._autocomplete) {
-      let { width: c } = this._input.getBoundingClientRect();
-      this._autocomplete.showPopover(), this._autocomplete.style.width = `${c - 15}px`;
+      let { width: c, left: t, bottom: p } = this._input.getBoundingClientRect();
+      this._autocomplete.showPopover(), "anchorName" in document.documentElement.style || (this._autocomplete.style.left = `${t + 3.75}px`, this._autocomplete.style.top = `${p}px`), this._autocomplete.style.width = `${c - 15}px`;
     }
   }
   updated(s) {
@@ -3636,7 +3636,7 @@ let Y = class extends L {
   }
   render() {
     return A`
-      <spectric-input style=${`anchor-name:--${this.uuid};`} autocomplete="off" @input=${this._parseQuery} @keydown=${this._handleArrows}></spectric-input>
+      <spectric-input .placeholder=${this.placeholder} style=${`anchor-name:--${this.uuid};`} autocomplete="off" @input=${this._parseQuery} @keydown=${this._handleArrows} @change=${(s) => s.stopPropagation()}></spectric-input>
       <div class="autocomplete" popover style=${`position-anchor: --${this.uuid};`}>
       ${this.completions.map(
       (s, r) => A`<div @click=${() => {
@@ -3646,33 +3646,36 @@ let Y = class extends L {
       </div>`;
   }
 };
-ee([
+X([
+  v({ type: String, reflect: !0 })
+], Q.prototype, "placeholder", 2);
+X([
   v({ type: String, reflect: !0 })
-], Y.prototype, "value", 1);
-ee([
+], Q.prototype, "value", 1);
+X([
   v({ type: String, reflect: !0 })
-], Y.prototype, "outputLanguage", 2);
-ee([
+], Q.prototype, "outputLanguage", 2);
+X([
   mt()
-], Y.prototype, "completions", 2);
-ee([
+], Q.prototype, "completions", 2);
+X([
   mt()
-], Y.prototype, "completionIndex", 2);
-ee([
+], Q.prototype, "completionIndex", 2);
+X([
   v({ type: Array, reflect: !0 })
-], Y.prototype, "fields", 2);
-ee([
+], Q.prototype, "fields", 2);
+X([
   We(".autocomplete")
-], Y.prototype, "_autocomplete", 2);
-ee([
+], Q.prototype, "_autocomplete", 2);
+X([
   $t(".autocomplete")
-], Y.prototype, "_asyncAutocomplete", 2);
-ee([
+], Q.prototype, "_asyncAutocomplete", 2);
+X([
   We("spectric-input")
-], Y.prototype, "_input", 2);
-Y = ee([
-  Q("spectric-query")
-], Y);
+], Q.prototype, "_input", 2);
+Q = X([
+  I("spectric-query")
+], Q);
 const As = K`
     border-color: color-mix(in hsl, var(--panel-color, #0b0b0b), var(--spectric-input-color, #000000) 3%);
     background-color: var(--panel-color,#0b0b0b);
@@ -3754,7 +3757,7 @@ or([
   v({ attribute: !1 })
 ], He.prototype, "layers", 2);
 He = or([
-  Q("spectric-panel")
+  I("spectric-panel")
 ], He);
 var Ka = Object.defineProperty, Za = Object.getOwnPropertyDescriptor, Zs = (s, r, o, i) => {
   for (var c = i > 1 ? void 0 : i ? Za(r, o) : r, t = s.length - 1, p; t >= 0; t--)
@@ -3941,7 +3944,7 @@ Zs([
   v({ reflect: !0 })
 ], vt.prototype, "theme", 2);
 vt = Zs([
-  Q("spectric-theme")
+  I("spectric-theme")
 ], vt);
 const Ga = K`
     :host {
@@ -4109,10 +4112,10 @@ U([
   We("slot[name='panel2']")
 ], D.prototype, "_panel2", 2);
 D = U([
-  Q(tc)
+  I(tc)
 ], D);
 export {
-  J as BitDisplayCanvas,
+  V as BitDisplayCanvas,
   rn as ButtonSizes,
   sn as ButtonVariants,
   ac as CSSPropsControls,
@@ -4122,11 +4125,11 @@ export {
   Ee as Header,
   Cn as InputVariants,
   ec as Orientations,
-  G as SpectricButton,
+  J as SpectricButton,
   E as SpectricInput,
   B as SpectricPage,
   He as SpectricPanel,
-  Y as SpectricQuery,
+  Q as SpectricQuery,
   vt as SpectricThemeProvider,
   D as SplitView,
   Fa as SupportedLanguages,