@spectric/ui 0.0.6 → 0.0.7

package/dist/components/input.d.ts

@@ -118,6 +118,8 @@ export declare class SpectricInput extends LitElement implements InputProps {
      */
     get value(): string | number | boolean;
     set value(value: string | number | boolean);
+    blur(): void;
+    focus(options?: FocusOptions): void;
     setSelectionRange(start: number, end: number, direction?: "forward" | "backward" | "none"): void;
     /**
    * Handles `oninput` event on the `<input>`.
@@ -126,7 +128,7 @@ export declare class SpectricInput extends LitElement implements InputProps {
     /**
     * The underlying input element
     */
-    protected _input: HTMLInputElement;
+    protected _input?: HTMLInputElement;
     private handleTogglePasswordVisibility;
     protected render(): unknown;
 }

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

@@ -37,7 +37,7 @@ export interface IQueryProps {
     /**
      * The output of the query
      */
-    value: string;
+    value?: string;
     /**
      * Fields that are used for the auto complete
      */
@@ -67,8 +67,7 @@ export declare class SpectricQuery extends LitElement implements IQueryProps {
     /**
      * The value of the input.
      */
-    get value(): string;
-    set value(value: string);
+    value: string;
     outputLanguage: SupportedLanguagesTypes;
     private completions;
     private completionIndex;

package/dist/custom-elements.json

@@ -392,7 +392,7 @@
     },
     {
       "name": "spectric-input",
-      "description": "Events:\n\n  * `change` {`Event`} - \n\nAttributes:\n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1>`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.\n\nProperties:\n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `_value` {`string | number | boolean`} - The internal value.\n\n  * `_showPassword` {`boolean`} - \n\n  * `selectionStart` {`number | null`} - \n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `_handleInput` - Handles `oninput` event on the `<input>`.\n\n  * `_input` {`HTMLInputElement`} - The underlying input element\n\n  * `handleTogglePasswordVisibility` - \n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1>`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.",
+      "description": "Events:\n\n  * `change` {`Event`} - \n\nAttributes:\n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1>`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.\n\nProperties:\n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `_value` {`string | number | boolean`} - The internal value.\n\n  * `_showPassword` {`boolean`} - \n\n  * `selectionStart` {`number | null`} - \n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `_handleInput` - Handles `oninput` event on the `<input>`.\n\n  * `_input` {`HTMLInputElement | undefined`} - The underlying input element\n\n  * `handleTogglePasswordVisibility` - \n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1>`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.",
       "attributes": [
         {
           "name": "hidePasswordLabel",
@@ -1838,7 +1838,7 @@
         },
         {
           "name": "value",
-          "description": "`value` {`string`} - The value of the input.\n\nProperty: value"
+          "description": "`value` {`string`} - The value of the input.\n\nProperty: value\n\nDefault: "
         },
         {
           "name": "fields",

package/dist/index.es.js

@@ -1885,7 +1885,7 @@ let E = class extends L {
     return this;
   }
   get selectionStart() {
-    return this._input.selectionStart;
+    return this._input ? this._input.selectionStart : null;
   }
   get value() {
     return this._input ? this.variant == "number" ? parseFloat(this._input.value) : this._input.value : this._value;
@@ -1894,8 +1894,14 @@ let E = class extends L {
     const r = this._value;
     this._value = s, this.requestUpdate("value", r), this._input && (this._input.value = String(s));
   }
+  blur() {
+    this._input && this._input.blur();
+  }
+  focus(s) {
+    this._input && (this._input.blur(), this._input.focus(s));
+  }
   setSelectionRange(s, r, o = "none") {
-    this._input.setSelectionRange(s, r, o);
+    this._input && this._input.setSelectionRange(s, r, o);
   }
   render() {
     switch (this.variant) {
@@ -3529,9 +3535,9 @@ const Ks = {
 ], Ha = Object.fromEntries(Object.entries(Ks).map(([s, r]) => [s, { value: r.value, label: (r.label || "").replace("value", "date-time") }]));
 let Q = class extends L {
   constructor() {
-    super(), this.placeholder = "", this._value = "", this.outputLanguage = "AST", this.completions = [], this.completionIndex = 0, this.fields = [], this._parseQuery = (s = void 0) => {
+    super(), this.placeholder = "", this._value = "", this.value = "", this.outputLanguage = "AST", this.completions = [], this.completionIndex = 0, this.fields = [], this._parseQuery = (s = void 0) => {
       let r;
-      if (this.value == "")
+      if (s && (s != null && s.currentTarget) && s.currentTarget.value && (this.value = s.currentTarget.value), this.value == "")
         return;
       try {
         s && s.data == "(" && (this.value = this.value + " )", this._input.setSelectionRange(this.value.length - 2, this.value.length - 2));
@@ -3552,7 +3558,9 @@ let Q = class extends L {
       let s = this.completions[this.completionIndex], r = this.value.substring(0, s.start) + s.value, o = r.length, i = this.value.substring(s.end);
       if (s.value.includes(i) ? this.value = r : this.value = r + this.value.substring(s.end), this._input.setSelectionRange(o, o), s.onSelect) {
         let c = await s.onSelect();
-        c !== void 0 && (this.value += c);
+        c !== void 0 && (this.value += c, setTimeout(() => {
+          this._input.focus();
+        }));
       }
       this.completionIndex = 0, this.completions = [], this._parseQuery();
     }, this._handleArrows = (s) => {
@@ -3566,13 +3574,6 @@ let Q = class extends L {
   createRenderRoot() {
     return this;
   }
-  get value() {
-    return this._input ? String(this._input.value) : this._value;
-  }
-  set value(s) {
-    const r = this._value;
-    this._value = s, this.requestUpdate("value", r), this._input && (this._input.value = String(s));
-  }
   async autoComplete(s) {
     if (this.completions = [], s.type !== "cursor")
       return;
@@ -3636,7 +3637,7 @@ let Q = class extends L {
   }
   render() {
     return A`
-      <spectric-input .placeholder=${this.placeholder} style=${`anchor-name:--${this.uuid};`} autocomplete="off" @input=${this._parseQuery} @keydown=${this._handleArrows} @change=${(s) => s.stopPropagation()}></spectric-input>
+      <spectric-input .value=${this.value} .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=${() => {
@@ -3651,7 +3652,7 @@ X([
 ], Q.prototype, "placeholder", 2);
 X([
   v({ type: String, reflect: !0 })
-], Q.prototype, "value", 1);
+], Q.prototype, "value", 2);
 X([
   v({ type: String, reflect: !0 })
 ], Q.prototype, "outputLanguage", 2);