@spectric/ui 0.0.18 → 0.0.19

package/src/components/input.ts

@@ -1,69 +1,75 @@
-import { html, LitElement, PropertyValues, TemplateResult } from 'lit';
-import "./input.css"
-import { customElement, eventOptions, property, query } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { ReactElementWithPropsAndEvents } from './types';
-import { ButtonSizesTypes } from './Button';
-import { DomEvent } from './table';
-import { SpectricColorPicker } from './color_picker/ColorPicker';
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import "./input.css";
+import {
+  customElement,
+  eventOptions,
+  property,
+  query,
+} from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { ReactElementWithPropsAndEvents } from "./types";
+import { ButtonSizesTypes } from "./Button";
+import { DomEvent } from "./table";
+import { SpectricColorPicker } from "./color_picker/ColorPicker";
+import { PopoverElement } from "./tooltip/popover";
 
 export enum InputVariants {
-  Text = 'text',
-  TextArea = 'text-area',
-  number = 'number',
+  Text = "text",
+  TextArea = "text-area",
+  number = "number",
   //checkbox = "checkbox",
   color = "color",
-  date = "date",//replace default eventually with custom
-  datetime = "datetime-local",//replace default eventually with custom
+  date = "date", //replace default eventually with custom
+  datePopup = "popup-date",
+  datetime = "datetime-local", //replace default eventually with custom
   email = "email",
-  file = "file",//display drop area
-  hidden = "hidden",//display drop area
+  file = "file", //display drop area
+  hidden = "hidden", //display drop area
   password = "password",
   checkbox = "checkbox",
-  range = "range"
-
+  range = "range",
 }
-type InputVariantsTypes = `${InputVariants}`
+type InputVariantsTypes = `${InputVariants}`;
 export interface InputProps {
   /** Input type */
   variant?: InputVariantsTypes;
   /**Label to display above the input */
-  label?: string,
+  label?: string;
   /**placeholder text to display*/
-  placeholder?: string,
+  placeholder?: string;
   /* should be disabled?*/
-  disabled?: boolean,
+  disabled?: boolean;
   /* should be readonly*/
-  readonly?: boolean,
+  readonly?: boolean;
   /**
- * The helper text.
- */
+   * The helper text.
+   */
 
-  helperText?: string,
+  helperText?: string;
   /**
    * Specify if the currently value is invalid.
    */
-  invalid?: boolean,
+  invalid?: boolean;
   /**
    * Message which is displayed if the value is invalid.
    */
-  invalidText?: string | TemplateResult<1>,
+  invalidText?: string | TemplateResult<1>;
   /**
    * Max character count allowed for input. This is needed in order for enableCounter to display
    */
-  maxCount?: number,
+  maxCount?: number;
   /**
-* Boolean property to set the required status
-*/
-  required?: boolean,
+   * Boolean property to set the required status
+   */
+  required?: boolean;
   /**
-* Shows a button to display the password
-*/
+   * Shows a button to display the password
+   */
   showPasswordVisibilityToggle?: boolean;
 
   /**
- * Name for the input used for form data events //TODO make sure this works
- */
+   * Name for the input used for form data events //TODO make sure this works
+   */
   name?: string;
 
   /**
@@ -74,16 +80,17 @@ export interface InputProps {
   /**
    * The sets the autocomplete for the input.
    */
-  autocomplete?: HTMLInputElement['autocomplete'];
+  autocomplete?: HTMLInputElement["autocomplete"];
 }
-@customElement('spectric-input')
+@customElement("spectric-input")
 export class SpectricInput extends LitElement implements InputProps {
   @property({ type: Boolean, reflect: true })
   checked?: boolean;
   size?: ButtonSizesTypes;
+  files: FileList | null = null;
   //static styles?: CSSResultGroup | undefined = style;
   protected createRenderRoot(): HTMLElement | DocumentFragment {
-    return this
+    return this;
   }
   @property({ type: String, reflect: true })
   placeholder: string = "";
@@ -97,16 +104,16 @@ export class SpectricInput extends LitElement implements InputProps {
   label: string = "";
 
   /**
-  * "Hide password" tooltip text on password visibility toggle
-  */
+   * "Hide password" tooltip text on password visibility toggle
+   */
   @property()
-  hidePasswordLabel = 'Hide';
+  hidePasswordLabel = "Hide";
 
   /**
    * "Show password" tooltip text on password visibility toggle
    */
   @property()
-  showPasswordLabel = 'Show';
+  showPasswordLabel = "Show";
 
   /**
    * Boolean property to render password visibility toggle
@@ -121,7 +128,7 @@ export class SpectricInput extends LitElement implements InputProps {
    * The helper text.
    */
   @property({ type: String, reflect: true })
-  helperText = '';
+  helperText = "";
 
   /**
    * Specify if the currently value is invalid.
@@ -138,35 +145,35 @@ export class SpectricInput extends LitElement implements InputProps {
    * Message which is displayed if the value is invalid.
    */
   @property({ type: String, reflect: true })
-  invalidText: InputProps["invalidText"] = '';
+  invalidText: InputProps["invalidText"] = "";
   /**
    * Name for the input used for form data events //TODO make sure this works
    */
   @property()
-  name = '';
+  name = "";
 
   /**
    * Pattern to validate the input against for HTML validity checking
    */
   @property()
-  pattern = '';
+  pattern = "";
   @property({ type: Number, reflect: true })
   maxCount: number = 0;
   /**
-* The internal value.
-*/
-  protected _value: string | boolean | number = '';
+   * The internal value.
+   */
+  protected _value: string | boolean | number = "";
   private _showPassword: boolean = false;
   /**
    * The sets the autocomplete for the input.
    */
   @property({ reflect: true })
-  autocomplete: HTMLInputElement['autocomplete'] = "off";
+  autocomplete: HTMLInputElement["autocomplete"] = "off";
   get selectionStart() {
     if (!this._input) {
-      return null
+      return null;
     }
-    return this._input.selectionStart
+    return this._input.selectionStart;
   }
   /**
    * The value of the input.
@@ -176,7 +183,7 @@ export class SpectricInput extends LitElement implements InputProps {
     //pull directly from the input
     if (this._input) {
       if (this.variant == InputVariants.number) {
-        return parseFloat(this._input.value)
+        return parseFloat(this._input.value);
       }
       return this._input.value;
     }
@@ -187,7 +194,7 @@ export class SpectricInput extends LitElement implements InputProps {
   set value(value) {
     const oldValue = this._value;
     this._value = value;
-    this.requestUpdate('value', oldValue);
+    this.requestUpdate("value", oldValue);
     // we set the value directly on the input (when available)
     // so that programatic manipulation updates the UI correctly
     if (this._input) {
@@ -196,51 +203,72 @@ export class SpectricInput extends LitElement implements InputProps {
   }
   blur(): void {
     if (this._input) {
-      this._input.blur()
+      this._input.blur();
     }
   }
   focus(options?: FocusOptions): void {
     if (this._input) {
       //Sometimes the input will get auto focused after a modal closes but the cursor isn't set. we need to blur then refocus to get the cursor
-      this._input.blur()
-      this._input.focus(options)
+      this._input.blur();
+      this._input.focus(options);
     }
   }
-  setSelectionRange(start: number, end: number, direction: "forward" | "backward" | "none" = "none") {
+  setSelectionRange(
+    start: number,
+    end: number,
+    direction: "forward" | "backward" | "none" = "none"
+  ) {
     if (!this._input) {
-      return
+      return;
     }
-    this._input.setSelectionRange(start, end, direction)
+    this._input.setSelectionRange(start, end, direction);
   }
   /**
- * Handles `oninput` event on the `<input>`.
- */
-  protected _handleInput = ({ target }: Event) => {
-    const input = (target as HTMLInputElement)
-    this.value = input.value;
-    this.invalid = !input.validity.valid
-  }
+   * Handles `oninput` event on the `<input>`.
+   */
+  protected _handleInput = ({ target }: DomEvent<HTMLInputElement>) => {
+    const input = target;
+    if (this.variant == InputVariants.file) {
+      this.files = input.files;
+    } else {
+      this.value = input.value;
+    }
+    this.invalid = !input.validity.valid;
+  };
   /**
-  * The underlying input element
-  */
-  @query('input')
+   * The underlying input element
+   */
+  @query("input")
   protected _input?: HTMLInputElement;
 
   private handleTogglePasswordVisibility = () => {
     this._showPassword = !this._showPassword;
-    this.requestUpdate()
-  }
+    this.requestUpdate();
+  };
   protected updated(changedProperties: PropertyValues): void {
     if (changedProperties.has("checked")) {
-      this.dispatchEvent(new Event("change", { bubbles: true }))
+      this.dispatchEvent(new Event("change", { bubbles: true }));
     }
   }
   @eventOptions({ capture: true })
-  _handleChange(e: Event) {
-    e.stopPropagation()
-    this.dispatchEvent(new Event("change", { bubbles: true }))
+  _handleChange(e: DomEvent<HTMLInputElement | SpectricColorPicker>) {
+    e.stopPropagation();
+    if (this.variant === InputVariants.file) {
+      this.files = (e.target as HTMLInputElement).files;
+    } else {
+      this.value = e.target.value;
+    }
+    this.dispatchEvent(new Event("change", { bubbles: true }));
   }
   protected render(): unknown {
+    const calendar = html`<spectric-calendar 
+                        .popup=${this.variant === InputVariants.datePopup}
+                        @select=${(e: CustomEvent<Date>) => {
+        this.value = e.detail.toISOString();
+        this.querySelector<PopoverElement>("spectric-popover")?.hidePopover()
+      }
+      }>
+              </spectric-calendar>`
     switch (this.variant) {
       case InputVariants.Text:
       case InputVariants.password:
@@ -248,88 +276,118 @@ export class SpectricInput extends LitElement implements InputProps {
       //case InputVariants.checkbox:
       case InputVariants.email:
       //cases below should be replaces with a custom input for uniformity across browsers
-      case InputVariants.date://replace with custom date picker 
-      case InputVariants.datetime://replace with custom date picker 
-      case InputVariants.file://replace with drag and drop location and custom select file button
+      case InputVariants.date: //replace with custom date picker
+      case InputVariants.datePopup: //replace with custom date picker
+      case InputVariants.datetime: //replace with custom date picker
+      case InputVariants.file: //replace with drag and drop location and custom select file button
       case InputVariants.range:
         return html`
-            <div class="inputWrapper">
-                <div class="text-input__label-helper-wrapper">
-                    <div class="--text-input__label-wrapper">
-                        ${this.label} ${this.maxCount > 0 && this._value ? `${(this._value as String).length}/${this.maxCount}` : null}
-                    </div> 
-                </div>
-              <div class="fieldwrapper">
-                <div ?data-invalid="${this.invalid}" class="inputContainer">
-                  <input
-                    ?data-invalid="${this.invalid}"
-                    ?disabled="${this.disabled}"
-                    aria-describedby="helper-text"
-                    id="input"
-                    name="${ifNonEmpty(this.name)}"
-                    pattern="${ifNonEmpty(this.pattern)}"
-                    placeholder="${ifNonEmpty(this.placeholder)}"
-                    autocomplete="${ifNonEmpty(this.autocomplete)}"
-                    ?readonly="${this.readonly}"
-                    ?required="${this.required}"
-                    type="${ifNonEmpty(
-          this.variant !== InputVariants.password ?
-            this.variant :
-            this._showPassword ? InputVariants.Text : InputVariants.password)}"
-                    .value="${this._value as string}"
-                    maxlength="${ifNonEmpty(this.maxCount > 0 ? this.maxCount : undefined)}"
-                    @input="${this._handleInput}" 
-                    @change=${this._handleChange}
-                    />
-                    
-                  ${this.variant === String(InputVariants.password) && this.showPasswordVisibilityToggle
+          <div class="inputWrapper">
+            <div class="text-input__label-helper-wrapper">
+              <div class="--text-input__label-wrapper">
+                ${this.label}
+                ${this.maxCount > 0 && this._value
+            ? `${(this._value as String).length}/${this.maxCount}`
+            : null}
+              </div>
+            </div>
+            <div class="fieldwrapper">
+              <div ?data-invalid="${this.invalid}" class="inputContainer">
+                ${this.variant === "date" ? calendar : null}
+                <input
+                  ?data-invalid="${this.invalid}"
+                  ?disabled="${this.disabled}"
+                  aria-describedby="helper-text"
+                  id="input"
+                  name="${ifNonEmpty(this.name)}"
+                  pattern="${ifNonEmpty(this.pattern)}"
+                  placeholder="${ifNonEmpty(this.placeholder)}"
+                  autocomplete="${ifNonEmpty(this.autocomplete)}"
+                  ?readonly="${this.readonly}"
+                  ?required="${this.required}"
+                  type="${ifNonEmpty(
+              this.variant !== InputVariants.password
+                ? this.variant !== InputVariants.date ? this.variant : InputVariants.Text
+                : this._showPassword
+                  ? InputVariants.Text
+                  : InputVariants.password
+            )}"
+                  .value="${this._value as string}"
+                  maxlength="${ifNonEmpty(
+              this.maxCount > 0 ? this.maxCount : undefined
+            )}"
+                  @input="${this._handleInput}"
+                  @change=${this._handleChange}
+                />
+
+            ${this.variant === String(InputVariants.datePopup) ? calendar : null}
+                ${this.variant === String(InputVariants.password) &&
+            this.showPasswordVisibilityToggle
             ? html`
-                        <spectric-button
+                      <spectric-button
+                        icon
+                        class="input-button-right"
                         size="small"
-                          type="button"
-                          ?disabled="${this.disabled}"
-                          @click=${this.handleTogglePasswordVisibility}>
-                          ${this._showPassword ? this.hidePasswordLabel : this.showPasswordLabel}
-                        </spectric-button>
-                      `
+                        type="button"
+                        ?disabled="${this.disabled}"
+                        @click=${this.handleTogglePasswordVisibility}
+                      >
+                        ${this._showPassword
+                ? this.hidePasswordLabel
+                : this.showPasswordLabel}
+                      </spectric-button>
+                    `
             : null}
-                </div>
-                <div
-                    id="helper-text"
-                    class="${this.helperText || this.invalid ? "" : "hidden"}"
-                    >
-                    <slot name="helper-text"> ${this.invalid ? this.invalidText : this.helperText} </slot>
-                    </div>
-
+              </div>
+              <div
+                id="helper-text"
+                class="${this.helperText || this.invalid ? "" : "hidden"}"
+              >
+                <slot name="helper-text">
+                  ${this.invalid ? this.invalidText : this.helperText}
+                </slot>
               </div>
             </div>
-          `;
+          </div>
+        `;
 
       case InputVariants.color: //replace with custom color picker
         return html`<div class="inputWrapper">
                 <div class="text-input__label-helper-wrapper">
                     <div class="--text-input__label-wrapper">
-                        ${this.label} ${this.maxCount > 0 && this._value ? `${(this._value as String).length}/${this.maxCount}` : null}
+                        ${this.label} ${this.maxCount > 0 && this._value
+            ? `${(this._value as String).length}/${this.maxCount}`
+            : null
+          }
                     </div> 
                 </div>
               <div class="fieldwrapper">
                 <div ?data-invalid="${this.invalid}" class="inputContainer">
-                  <spectric-colorpicker @change=${(e: DomEvent<SpectricColorPicker>) => { this.value = e.target.value; this._handleChange(e) }}></spectric-colorpicker>
+                  <input type="hidden" .value=${String(this.value)} > </input>
+                  <spectric-colorpicker 
+                  @cancel=${(e: DomEvent<SpectricColorPicker>) => {
+            this.value = e.target.value;
+          }}
+                  @change=${(e: DomEvent<SpectricColorPicker>) => {
+            e.stopPropagation();
+            this.value = e.target.value;
+            this._handleChange(e);
+          }} .value=${String(this.value)}></spectric-colorpicker>
                 </div>
                 <div
                     id="helper-text"
                     class="${this.helperText || this.invalid ? "" : "hidden"}"
                     >
-                    <slot name="helper-text"> ${this.invalid ? this.invalidText : this.helperText} </slot>
+                    <slot name="helper-text"> ${this.invalid ? this.invalidText : this.helperText
+          } </slot>
                   </div>
 
               </div>
-            </div>`
+            </div>`;
       case InputVariants.hidden:
-        return html`<input type="hidden"/>`
+        return html`<input type="hidden" />`;
 
       case InputVariants.checkbox:
-
         return html`
         <div class="checkbox">
         <spectric-button 
@@ -337,32 +395,33 @@ export class SpectricInput extends LitElement implements InputProps {
         @click=${() => {
             this.checked = !this.checked;
             this.value = Boolean(this.checked);
-          }} icon size=${this.size || "xxsmall"} variant=${this.checked ? "primary" : "secondary"}>${this.checked ? '✓' : "\u00A0"}</spectric-button>
+          }} icon size=${this.size || "xxsmall"} variant=${this.checked ? "primary" : "secondary"
+          }>${this.checked ? "✓" : "\u00A0"}</spectric-button>
           
           ${this.label}
         </div>
         </label>
-        `
+        `;
       default:
         break;
     }
-    return `Not yet implemented ${this.variant}`
+    return `Not yet implemented ${this.variant}`;
   }
 }
 
-
-
-
 declare global {
   interface HTMLElementTagNameMap {
-    "spectric-input": SpectricInput
+    "spectric-input": SpectricInput;
   }
   namespace JSX {
     interface IntrinsicElements {
       /**
        * {@link SpectricInput}
        */
-      "spectric-input": ReactElementWithPropsAndEvents<SpectricInput, InputProps>
+      "spectric-input": ReactElementWithPropsAndEvents<
+        SpectricInput,
+        InputProps
+      >;
     }
   }
   namespace React {
@@ -371,12 +430,14 @@ declare global {
         /**
          * {@link SpectricInput}
          */
-        "spectric-input": ReactElementWithPropsAndEvents<SpectricInput, InputProps>;
+        "spectric-input": ReactElementWithPropsAndEvents<
+          SpectricInput,
+          InputProps
+        >;
       }
     }
   }
 }
 
-
 const ifNonEmpty = (value: any) =>
-  ifDefined(value === '' ? undefined : (value ?? undefined));
+  ifDefined(value === "" ? undefined : value ?? undefined);

package/src/components/panel.css.ts

@@ -1,12 +1,14 @@
 import { css } from "lit";
 
 const even = css`
+    --panel-color: var(--spectric-background,#f4f4f4);
+    --panel-color-inverse: var(--spectric-background-inverse,#ffffff);
     border-color: color-mix(in hsl, var(--panel-color, #0b0b0b), var(--spectric-input-color, #000000) 3%);
     background-color: var(--panel-color,#0b0b0b);
-    --spectric-input-color: var(--spectric-background);
+    --spectric-input-color: var(--panel-color-inverse);
     color:var(--text-secondary,#3c4c5b);
-    --spectric-text-primary:var(--text-primary);
-    --spectric-text-secondary:var(--text-secondary);
+    --spectric-text-primary:var(--text-primary,#161616);
+    --spectric-text-secondary:var(--text-secondary,#525252);
     filter: drop-shadow(0px 1px 3px color-mix(in srgb, var(--text-secondary, #3c4c5b), transparent 50%));
 `
 const odd = css`
@@ -14,8 +16,8 @@ const odd = css`
     background-color: var(--panel-color-inverse,#0b0b0b);
     color:var(--text-primary,#3c4c5b);
     --spectric-input-color: var(--panel-color);
-    --spectric-text-primary:var(--text-secondary);
-    --spectric-text-secondary:var(--text-primary);
+    --spectric-text-primary:var(--text-secondary,#525252);
+    --spectric-text-secondary:var(--text-primary,#161616);
     filter: drop-shadow(0px 1px 3px color-mix(in srgb, var(--text-primary, #3c4c5b), transparent 70%));
     `
 export default css`

package/src/components/query_bar/QueryBar.css

@@ -12,14 +12,18 @@ spectric-query .autocomplete {
     max-height: 300px;
     border-top: 0px;
     margin: 0px;
-    margin-top: -18px;
     /*Input helper text is 18px we can cover that with the popover*/
     position: fixed;
     top: anchor(bottom);
     justify-self: anchor-center;
     text-align: center;
 }
-
+spectric-query .autocomplete [popover]{
+   overflow: visible;
+}
+spectric-query .autocomplete .tooltip-content{
+    width: 100%;
+}
 spectric-query .autocomplete .optiontype {
     float: left;
     max-width: 10px;