@spectric/ui 0.0.4

package/src/components/input.ts

@@ -0,0 +1,312 @@
+import { html, LitElement, TemplateResult } from 'lit';
+import "./input.css"
+import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { ReactElementWithPropsAndEvents } from './types';
+
+export enum InputVariants {
+  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
+  email = "email",
+  file = "file",//display drop area
+  hidden = "hidden",//display drop area
+  password = "password",
+
+}
+type InputVariantsTypes = `${InputVariants}`
+export interface InputProps {
+  /** Input type */
+  variant: InputVariantsTypes;
+  /**Label to display above the input */
+  label: string,
+  /**placeholder text to display*/
+  placeholder: string,
+  /* should be disabled?*/
+  disabled: boolean,
+  /* should be readonly*/
+  readonly: boolean,
+  /**
+ * The helper text.
+ */
+
+  helperText: string,
+  /**
+   * Specify if the currently value is invalid.
+   */
+  invalid: boolean,
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: string | TemplateResult<1>,
+  /**
+   * Max character count allowed for input. This is needed in order for enableCounter to display
+   */
+  maxCount: number,
+  /**
+* Boolean property to set the required status
+*/
+  required?: boolean,
+  /**
+* Shows a button to display the password
+*/
+  showPasswordVisibilityToggle?: boolean;
+
+  /**
+ * Name for the input used for form data events //TODO make sure this works
+ */
+  name?: string;
+
+  /**
+   * Pattern to validate the input against for HTML validity checking
+   */
+
+  pattern?: string;
+  /**
+   * The sets the autocomplete for the input.
+   */
+  autocomplete: HTMLInputElement['autocomplete'];
+}
+@customElement('spectric-input')
+export class SpectricInput extends LitElement implements InputProps {
+  //static styles?: CSSResultGroup | undefined = style;
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this
+  }
+  @property({ type: String, reflect: true })
+  placeholder: string = "";
+  @property({ type: Boolean, reflect: true })
+  readonly: boolean = false;
+  @property({ type: String, reflect: true })
+  variant: InputVariantsTypes = "text";
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false;
+  @property({ type: String, reflect: true })
+  label: string = "";
+
+  /**
+  * "Hide password" tooltip text on password visibility toggle
+  */
+  @property()
+  hidePasswordLabel = 'Hide';
+
+  /**
+   * "Show password" tooltip text on password visibility toggle
+   */
+  @property()
+  showPasswordLabel = 'Show';
+
+  /**
+   * Boolean property to render password visibility toggle
+   */
+  @property({
+    type: Boolean,
+    reflect: true,
+  })
+  showPasswordVisibilityToggle = true;
+
+  /**
+   * The helper text.
+   */
+  @property({ type: String, reflect: true })
+  helperText = '';
+
+  /**
+   * Specify if the currently value is invalid.
+   */
+  @property({ type: Boolean, reflect: true })
+  invalid = false;
+
+  /**
+   * Boolean property to set the required status
+   */
+  @property({ type: Boolean, reflect: true })
+  required = false;
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  @property({ type: String, reflect: true })
+  invalidText: InputProps["invalidText"] = '';
+  /**
+   * Name for the input used for form data events //TODO make sure this works
+   */
+  @property()
+  name = '';
+
+  /**
+   * Pattern to validate the input against for HTML validity checking
+   */
+  @property()
+  pattern = '';
+  @property({ type: Number, reflect: true })
+  maxCount: InputProps['maxCount'] = 0;
+  /**
+* 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'] = "";
+  get selectionStart() {
+    return this._input.selectionStart
+  }
+  /**
+   * The value of the input.
+   */
+  @property({ reflect: true })
+  get value() {
+    //pull directly from the input
+    if (this._input) {
+      if (this.variant == InputVariants.number) {
+        return parseFloat(this._input.value)
+      }
+      return this._input.value;
+    }
+    // but before then _value will work fine
+    return this._value;
+  }
+
+  set value(value) {
+    const oldValue = this._value;
+    this._value = value;
+    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) {
+      this._input.value = String(value);
+    }
+  }
+
+  setSelectionRange(start: number, end: number, direction: "forward" | "backward" | "none" = "none") {
+    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
+  }
+  /**
+  * The underlying input element
+  */
+  @query('input')
+  protected _input!: HTMLInputElement;
+
+  private handleTogglePasswordVisibility = () => {
+    this._showPassword = !this._showPassword;
+    this.requestUpdate()
+  }
+  protected render(): unknown {
+    switch (this.variant) {
+      case InputVariants.Text:
+      case InputVariants.password:
+      case InputVariants.number:
+      //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.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}
+                    </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.dispatchEvent(new Event("change", { bubbles: true }))
+          }}
+                    />
+                    
+                  ${this.variant === String(InputVariants.password) && this.showPasswordVisibilityToggle
+            ? html`
+                        <spectric-button
+                        size="small"
+                          type="button"
+                          ?disabled="${this.disabled}"
+                          @click=${this.handleTogglePasswordVisibility}>
+                          ${this._showPassword ? this.hidePasswordLabel : this.showPasswordLabel}
+                        </spectric-button>
+                      `
+            : null}
+                </div>
+                <div
+                    id="helper-text"
+                    >
+                    <slot name="helper-text"> ${this.invalid ? this.invalidText : this.helperText} </slot>
+                    </div>
+
+              </div>
+            </div>
+          `;
+
+      case InputVariants.hidden:
+        return html`<input type="hidden"></input>`
+      default:
+        break;
+    }
+    return `Not yet implemented ${this.variant}`
+  }
+}
+
+
+
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "spectric-input": SpectricInput
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * {@link SpectricInput}
+       */
+      "spectric-input": ReactElementWithPropsAndEvents<SpectricInput, InputProps>
+    }
+  }
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        /**
+         * {@link SpectricInput}
+         */
+        "spectric-input": ReactElementWithPropsAndEvents<SpectricInput, InputProps>;
+      }
+    }
+  }
+}
+
+
+const ifNonEmpty = (value: any) =>
+  ifDefined(value === '' ? undefined : (value ?? undefined));

package/src/components/page.css.ts

@@ -0,0 +1,158 @@
+import { css } from "lit";
+export default css`
+
+:host {
+  height:100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  line-height: 24px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    --spectric-background: var(--background,#ffffff);
+    --spectric-background-hover:var(--background-hover,rgba(141, 141, 141, 0.12));
+    --spectric-background-inverse: var(--background-inverse,#f4f4f4);
+    --spectric-background-inverse-hover: var(--background-inverse-hover,#474747);
+    --spectric-border-radius: var(--border-radius,.4em);
+    --spectric-primary:var(--primary,#1ea7fd);
+    --spectric-secondary: var(--secondary,#77878b);
+    --spectric-tertiary: var(--tertiary,#0f62fe);
+    --spectric-disabled: var(--disabled,#c6c6c6);
+
+    /* panel */
+    --panel-color:var(--spectric-background-inverse);
+    --panel-color-inverse:var(--spectric-background);
+    --spectric-border-disabled: var(--disabled);
+
+    /*inputs*/
+    --spectric-input-color: var(--panel-color-inverse);
+    --spectric-input-bottom: var(--panel-color);
+
+    --spectric-text-on-color: var(--text-on-color,#ffffff);
+    --spectric-text-on-color-disabled: var(--text-on-color-disabled,#8d8d8d);
+    --spectric-text-placeholder: var(--text-placeholder,rgba(22, 22, 22, 0.4));
+    --spectric-text-primary: var(--text-primary,#161616);
+    --spectric-text-secondary: var(--text-secondary,#525252);
+    /* Buttons */
+    --spectric-button-separator: #e0e0e0;
+    --spectric-button-primary: var(--primary,#1ea7fd);
+    --spectric-button-secondary: var(--secondary,#77878b);
+    --spectric-button-tertiary: var(--tertiary);
+    --spectric-button-danger-primary: #da1e28;
+    --spectric-button-danger-secondary: #da1e28;
+    --spectric-button-danger-active: #750e13;
+    --spectric-button-primary-active: #002d9c;
+    --spectric-button-secondary-active: #6f6f6f;
+    --spectric-button-tertiary-active: #002d9c;
+    --spectric-button-danger-hover: #b81921;
+    --spectric-button-primary-hover: #0050e6;
+    --spectric-button-secondary-hover: #474747;
+    --spectric-button-tertiary-hover: #0050e6;
+    --spectric-text-on-color-disabled: var(--disabled,#c6c6c6)
+    --spectric-button-disabled: #c6c6c6;
+}
+*{
+  color: var(--spectric-text-primary);
+  background-color: var(--spectric-background,rgb(255 255 255 / 60%));
+}
+article{
+  flex-grow:1;
+  overflow-y:auto;
+  padding-left: calc(var(--spectric-border-radius, 0.4em) + 2px);
+  padding-right: calc(var(--spectric-border-radius, 0.4em) + 2px);
+}
+ h2 {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0 4px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+ p {
+  margin: 1em 0;
+}
+
+ a {
+  color: var(--primary);
+  text-decoration: var(--primary);
+}
+
+ ul {
+  margin: 1em 0;
+  padding-left: 30px;
+}
+
+ li {
+  margin-bottom: 8px;
+}
+::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+    background: var(--spectric-background-inverse,#393939);
+    border-radius: var(--spectric-border-radius,4em);
+    -webkit-border-radius: var(--spectric-border-radius,4em);
+    padding-top: 1px;
+    padding-bottom: 1px;
+    box-shadow: 0 0 1px  var(--spectric-primary,#242424) inset;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: var(--spectric-primary,#009eb3); 
+}
+
+
+    ::-webkit-scrollbar-button:single-button {
+  background-color: transparent;
+  display: block;
+  border-style: solid;
+}
+/* Up */
+::-webkit-scrollbar-button:single-button:vertical:decrement {
+  border-width: 0 5px 5px 5px;
+  border-color: var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-background-inverse,#393939) var(--spectric-background, #ffffff);
+}
+::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
+  border-color: var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-primary,#009eb3) var(--spectric-background, #ffffff);
+}
+/* Down */
+::-webkit-scrollbar-button:single-button:vertical:increment {
+  border-width: 5px 5px 0 5px;
+  border-color: var(--spectric-background-inverse,#393939) var(--spectric-background, #ffffff) transparent var(--spectric-background, #ffffff);
+}
+
+::-webkit-scrollbar-button:vertical:single-button:increment:hover {
+  border-color: var(--spectric-primary,#009eb3) var(--spectric-background, #ffffff) transparent var(--spectric-background, #ffffff);
+}
+
+/* Left */
+::-webkit-scrollbar-button:single-button:horizontal:decrement {
+    border-width: 5px 5px 5px 0;
+    border-color:var(--spectric-background, #ffffff) var(--spectric-background-inverse,#393939) var(--spectric-background, #ffffff) var(--spectric-background, #ffffff);
+
+}
+
+::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
+    border-width: 5px 5px 5px 0;
+    border-color:var(--spectric-background, #ffffff) var(--spectric-primary,#009eb3) var(--spectric-background, #ffffff) var(--spectric-background, #ffffff);
+
+}
+
+
+
+/* Right */
+::-webkit-scrollbar-button:single-button:horizontal:increment {
+    border-width: 5px 0 5px 5px;
+    border-color:var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-primary,#009eb3);
+
+}
+
+::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
+    border-width: 5px 0 5px 5px;
+    border-color:var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-background, #ffffff) var(--spectric-background-inverse-hover,#474747);
+
+}
+
+`;

package/src/components/panel.css.ts

@@ -0,0 +1,44 @@
+import { css } from "lit";
+
+const even = css`
+    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);
+    color:var(--text-secondary,#3c4c5b);
+    --spectric-text-primary:var(--text-primary);
+    --spectric-text-secondary:var(--text-secondary);
+    filter: drop-shadow(0px 1px 3px color-mix(in srgb, var(--text-secondary, #3c4c5b), transparent 50%));
+`
+const odd = css`
+    border-color: color-mix(in hsl, var(--panel-color-inverse,#f4f4f4), var(--spectric-input-color, #000000) 3%);
+    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);
+    filter: drop-shadow(0px 1px 3px color-mix(in srgb, var(--text-primary, #3c4c5b), transparent 70%));
+    `
+export default css`
+:host{
+    display:block;
+    border:2px solid black;
+    margin: 5px;
+    border-radius:var(--spectric-border-radius,0.4em);
+    padding: calc(var(--spectric-border-radius,0.4em) + 2px);
+
+}
+:host(spectric-panel[level='0']) {
+    ${even};
+}
+
+:host(spectric-panel[level='1']) {
+   ${odd};
+}
+
+:host(spectric-panel[level='2']) {
+    ${even};
+}
+:host(spectric-panel[level='3']) {
+    ${odd};
+}
+`

package/src/components/query_bar/QueryBar.css

@@ -0,0 +1,48 @@
+spectric-query {
+    font-family: monospace
+}
+
+
+
+spectric-query .autocomplete {
+    color: var(--spectric-text-primary, #161616);
+    border-radius: .0em 0em var(--spectric-border-radius, .4em) var(--spectric-border-radius, .4em);
+    background-color: var(--spectric-background, #ffffff);
+    border: 1px solid var(--spectric-background-hover, rgba(141, 141, 141, 0.12));
+    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 .optiontype {
+    float: left;
+    max-width: 10px;
+    /*todo should we display an icon instead of text?*/
+}
+
+spectric-query .autocomplete .label {
+    position: absolute;
+    right: 0;
+}
+
+spectric-query .autocomplete .option.active,
+spectric-query .autocomplete .option:hover {
+    background-color: var(--spectric-background-hover, rgba(141, 141, 141, 0.12));
+    border-bottom: 1px solid var(--primary, #1ea7fd);
+}
+
+spectric-query .autocomplete .option {
+    border-bottom: 1px solid transparent;
+    padding: 8px;
+}
+
+.query-bar-date-quick-select {
+    display: flex;
+    justify-content: space-evenly;
+}