@spectric/ui 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectric/ui",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

package/src/components/query_bar/QueryBar.ts

@@ -52,6 +52,11 @@ export interface IQueryProps {
    * Callback that will provide values for specific fields
    */
   getValuesForField: (field: string, text: string) => Promise<string[]>;
+
+  /**
+   * Input placeholder
+   */
+  placeholder: string;
 }
 type LabelValue = {
   label?: string;
@@ -85,6 +90,8 @@ const DateOperators: Record<string, LabelValue> = Object.fromEntries(Object.entr
 @customElement('spectric-query')
 export class SpectricQuery extends LitElement implements IQueryProps {
   private uuid: string;
+  @property({ type: String, reflect: true })
+  placeholder: string = "";
   constructor() {
     super()
     this.uuid = crypto.randomUUID()
@@ -226,6 +233,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
                     }}>${v}</a>`)}
                     </div>
                   <spectric-input variant="datetime-local" @change=${(e: any) => {
+
                         if (!e.target) {
                           return
                         }
@@ -265,8 +273,13 @@ export class SpectricQuery extends LitElement implements IQueryProps {
     }
     this.completions = completions
     if (this.completions.length && this._autocomplete) {
-      let { width } = this._input.getBoundingClientRect();
+      let { width, left, bottom } = this._input.getBoundingClientRect();
       this._autocomplete.showPopover();
+      //Older firefox doesn't support anchor positions using css properties so manually position here
+      if (!("anchorName" in document.documentElement.style)) {
+        this._autocomplete.style.left = `${left + 3.75}px`
+        this._autocomplete.style.top = `${bottom}px`
+      }
       this._autocomplete.style.width = `${width - 15}px`;
     }
   }
@@ -340,7 +353,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
   }
   protected render() {
     return html`
-      <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=${(e: Event) => e.stopPropagation()}></spectric-input>
       <div class="autocomplete" popover style=${`position-anchor: --${this.uuid};`}>
       ${this.completions.map((option: Completion, index) =>
       html`<div @click=${() => {