@nyaruka/temba-components 0.49.1 → 0.49.2

package/src/colorpicker/ColorPicker.ts

@@ -0,0 +1,260 @@
+import { html, css } from 'lit';
+import { FormElement } from '../FormElement';
+import { property } from 'lit/decorators.js';
+import { getClasses, hslToHex } from '../utils';
+import { TextInput } from '../textinput/TextInput';
+
+export class ColorPicker extends FormElement {
+  @property({ type: Boolean })
+  expanded = false;
+
+  @property({ type: String })
+  previewColor = '#ffffff';
+
+  @property({ type: String })
+  labelColor = '#ffffffee';
+
+  @property({ type: Boolean })
+  selecting = false;
+
+  @property({ type: Number }) hue: number;
+  @property({ type: Number }) saturation = 100;
+  @property({ type: Number }) lightness = 50;
+  @property({ type: String }) hex = '';
+
+  static get styles() {
+    return css`
+      :host {
+        color: var(--color-text);
+        display: inline-block;
+        --curvature: 0.55em;
+        width: 100%;
+
+        --temba-textinput-padding: 0.4em;
+      }
+
+      temba-textinput {
+        margin-left: 0.3em;
+        width: 5em;
+      }
+
+      temba-field {
+        display: block;
+        width: 100%;
+      }
+
+      .wrapper {
+        border: 1px solid var(--color-widget-border);
+        padding: calc(var(--curvature) / 2);
+        border-radius: calc(var(--curvature) * 1.5);
+        transition: all calc(var(--transition-speed) * 2) var(--bounce);
+
+        display: flex;
+        flex-grow: 0;
+      }
+
+      .picker-wrapper {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        transition: all calc(var(--transition-speed) * 2) var(--bounce);
+        flex-grow: 0;
+      }
+
+      .preview {
+        width: initial;
+        border-radius: var(--curvature);
+        padding: 0.2em 0.5em;
+        font-weight: 400;
+        border: 2px solid rgba(0, 0, 0, 0.1);
+        white-space: nowrap;
+        cursor: pointer;
+        transition: transform calc(var(--transition-speed) * 0.5) var(--bounce);
+      }
+
+      .preview.selecting {
+        transform: scale(1.05);
+      }
+
+      .wrapper.expanded {
+        flex-grow: 1 !important;
+      }
+
+      .wrapper.expanded .picker-wrapper {
+        flex-grow: 1 !important;
+      }
+
+      .wrapper.expanded .preview {
+        pointer-events: none;
+      }
+
+      .wrapper.expanded .color-picker {
+        margin-left: calc(var(--curvature) / 2);
+      }
+
+      .wrapper.expanded temba-textinput {
+        display: block;
+      }
+
+      .color-picker {
+        border-radius: var(--curvature);
+        cursor: pointer;
+        transition: all calc(var(--transition-speed) * 2) var(--bounce);
+        flex-grow: 1;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        background-image: linear-gradient(
+            to bottom,
+            rgba(0, 0, 0, 0) 60%,
+            rgba(0, 0, 0, 0.5) 90%,
+            rgba(0, 0, 0, 1)
+          ),
+          linear-gradient(
+            to top,
+            rgba(255, 255, 255, 0) 60%,
+            rgba(255, 255, 255, 0.8) 90%,
+            rgba(255, 255, 255, 1)
+          ),
+          linear-gradient(
+            to right,
+            hsla(0, 100%, 50%, 1),
+            hsla(60, 100%, 50%, 1),
+            hsla(120, 100%, 50%, 1),
+            hsla(180, 100%, 50%, 1),
+            hsla(240, 100%, 50%, 1),
+            hsla(300, 100%, 50%, 1),
+            hsla(360, 100%, 50%, 1)
+          );
+        mix-blend-mode: multiply;
+      }
+
+      .color-picker:focus {
+        outline: none;
+      }
+    `;
+  }
+
+  public updated(changed: Map<string, any>): void {
+    super.updated(changed);
+
+    if (changed.has('value')) {
+      this.previewColor = this.value || '#9c9c9c';
+      this.hex = this.value;
+    }
+
+    if (changed.has('selecting')) {
+      if (this.selecting) {
+        window.setTimeout(() => {
+          this.selecting = false;
+        }, 100);
+      }
+    }
+
+    if (changed.has('previewLabel') && this.hue) {
+      this.hex = hslToHex(this.hue, this.saturation, this.lightness);
+    }
+  }
+
+  private handleBlur(event: FocusEvent) {
+    if (this.expanded) {
+      this.expanded = false;
+    }
+  }
+
+  private handleMouseOut(event: MouseEvent) {
+    this.previewColor = this.value;
+    this.hex = this.value;
+  }
+
+  private handleMouseMove(event: MouseEvent) {
+    if (this.expanded) {
+      const rect = (event.target as HTMLElement).getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      this.hue = (x / rect.width) * 360;
+      this.lightness = 100 - (y / rect.height) * 100;
+      this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;
+      this.hex = hslToHex(this.hue, this.saturation, this.lightness);
+    }
+  }
+
+  private handlePreviewClick(event: MouseEvent) {
+    this.expanded = !this.expanded;
+    this.selecting = true;
+    (this.shadowRoot.querySelector('.color-picker') as HTMLDivElement).focus();
+  }
+
+  private handleColorClick(event: MouseEvent) {
+    if (this.expanded) {
+      const rect = (event.target as HTMLElement).getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      this.hue = (x / rect.width) * 360;
+      this.lightness = 100 - (y / rect.height) * 100;
+      this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;
+      this.setValue(this.hex);
+      this.selecting = true;
+      this.expanded = false;
+    }
+
+    if (!this.expanded) {
+      //
+    }
+  }
+
+  private handleHexInput(event: InputEvent) {
+    const hex = (event.target as TextInput).value;
+    if (hex.startsWith('#')) {
+      this.previewColor = hex;
+      this.setValue(hex);
+    }
+  }
+
+  public serializeValue(value: any): string {
+    return value;
+  }
+
+  public render() {
+    return html`
+      <temba-field
+        name=${this.name}
+        .helpText=${this.helpText}
+        .errors=${this.errors}
+        .widgetOnly=${this.widgetOnly}
+        .hideLabel=${this.hideLabel}
+        .disabled=${this.disabled}
+      >
+        <div style="display:flex" tabindex="0">
+          <div class=${getClasses({ wrapper: true, expanded: this.expanded })}>
+            <div class=${getClasses({ 'picker-wrapper': true })}>
+              <div
+                class=${getClasses({
+                  preview: true,
+                  selecting: this.selecting,
+                })}
+                style="color:${this.labelColor};background:${this.previewColor}"
+                @click=${this.handlePreviewClick}
+              >
+                ${this.label}
+              </div>
+              <div
+                class="color-picker"
+                tabindex="0"
+                @blur=${this.handleBlur}
+                @mousemove=${this.handleMouseMove}
+                @mouseout=${this.handleMouseOut}
+                @click=${this.handleColorClick}
+              ></div>
+            </div>
+            <temba-textinput
+              value=${this.hex}
+              @input=${this.handleHexInput}
+              placeholder="#000000"
+            ></temba-textinput>
+          </div>
+        </div>
+      </temba-field>
+    `;
+  }
+}

package/src/list/TembaMenu.ts

@@ -679,11 +679,6 @@ export class TembaMenu extends RapidElement {
             this.wait = true;
           }
 
-          // once we've set our items check if we need to auto-select
-          if (event && item.items.length > 0) {
-            this.handleItemClicked(event, item.items[0]);
-          }
-
           this.requestUpdate('root');
           this.scrollSelectedIntoView();
         }

package/src/untyped.d.ts

@@ -15,5 +15,6 @@ declare function waitFor(millis: number);
 declare function moveMouse(x: number, y: number);
 declare function mouseDown();
 declare function mouseUp();
+declare function mouseClick(x: number, y: number);
 declare function setViewport({}: any);
 declare function waitForNetworkIdle();

package/src/utils/index.ts

@@ -647,6 +647,19 @@ export const getFullName = (user: User) => {
   return user.email;
 };
 
+export const hslToHex = (h, s, l) => {
+  l /= 100;
+  const a = (s * Math.min(l, 1 - l)) / 100;
+  const f = n => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, '0'); // convert to Hex and prefix "0" if needed
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+};
+
 export const renderAvatar = (input: {
   name?: string;
   user?: User;

package/src/vectoricon/index.ts

@@ -1,5 +1,5 @@
 // for cache busting we dynamically generate a fingerprint, use yarn svg to update
-export const SVG_FINGERPRINT = 'cda7f9d00330ac4f7aa18ecf16bc26b1';
+export const SVG_FINGERPRINT = 'f469b4b2409b0601ce9d11e1ca9e36e2';
 
 // only icons below are included in the sprite sheet
 export enum Icon {
@@ -49,6 +49,7 @@ export enum Icon {
   checkbox = 'square',
   checkbox_checked = 'check-square',
   compose = 'send-01',
+  colors = 'palette',
   contact = 'user-01',
   contact_archived = 'archive',
   contact_blocked = 'message-x-square',
@@ -76,6 +77,7 @@ export enum Icon {
   group_smart = 'atom-01',
   help = 'help-circle',
   home = 'settings-02',
+  image = 'image-01',
   inbox = 'inbox-01',
   info = 'user-square',
   label = 'tag-01',
@@ -146,4 +148,11 @@ export enum Icon {
   bothub = 'bothub',
   chatbase = 'chatbase',
   dtone = 'dtone',
+
+  // demo
+  default = 'list',
+  datepicker = 'calendar',
+  slider = 'sliders-02',
+  select = 'browser',
+  input = 'edit-05',
 }