@nyaruka/temba-components 0.25.1 → 0.26.1

package/src/omnibox/Omnibox.ts

@@ -1,4 +1,5 @@
-import { TemplateResult, html, css, property } from 'lit-element';
+import { TemplateResult, html, css } from 'lit';
+import { property } from 'lit/decorators';
 import { styleMap } from 'lit-html/directives/style-map';
 import { RapidElement } from '../RapidElement';
 import { Select } from '../select/Select';

package/src/options/Options.ts

@@ -1,4 +1,5 @@
-import { TemplateResult, html, property, css } from 'lit-element';
+import { TemplateResult, html, css } from 'lit';
+import { property } from 'lit/decorators';
 import { CustomEventType } from '../interfaces';
 import { RapidElement, EventHandler } from '../RapidElement';
 import { styleMap } from 'lit-html/directives/style-map';
@@ -153,7 +154,7 @@ export class Options extends RapidElement {
         align-items: center;
         background: #eee;
         max-height: 0;
-        transition: max-height 200ms ease-in-out;
+        transition: max-height var(--transition-speed) ease-in-out;
         border-bottom-left-radius: var(--curvature-widget);
         border-bottom-right-radius: var(--curvature-widget);
         display: flex;
@@ -605,7 +606,11 @@ export class Options extends RapidElement {
 
     return html`
       <div class=${classes} style=${styleMap(containerStyle)}>
-        <div class="options-scroll" @scroll=${this.handleInnerScroll}>
+        <div
+          class="options-scroll"
+          @scroll=${this.handleInnerScroll}
+          @mousedown=${this.handleMouseDown}
+        >
           <div class="${classesInner}" style=${styleMap(optionsStyle)}>
             ${options.map((option, index) => {
               return html`<div

package/src/remote/Remote.ts

@@ -1,10 +1,5 @@
-import {
-  css,
-  customElement,
-  html,
-  property,
-  TemplateResult,
-} from 'lit-element';
+import { css, html, TemplateResult } from 'lit';
+import { property, customElement } from 'lit/decorators';
 import { RapidElement } from '../RapidElement';
 
 @customElement('temba-remote')

package/src/select/Select.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { TemplateResult, html, css, property } from 'lit-element';
+import { TemplateResult, html, css } from 'lit';
+import { property } from 'lit/decorators';
 import {
   getUrl,
   getClasses,
@@ -28,7 +29,7 @@ export class Select extends FormElement {
     return css`
       :host {
         font-family: var(--font-family);
-        transition: all ease-in-out 200ms;
+        transition: all ease-in-out var(--transition-speed);
         display: inline;
         line-height: normal;
         outline: none;
@@ -82,7 +83,7 @@ export class Select extends FormElement {
         flex-wrap: nowrap;
         align-items: center;
         border: 1px solid var(--color-widget-border);
-        transition: all ease-in-out 200ms;
+        transition: all ease-in-out var(--transition-speed);
         cursor: pointer;
         border-radius: var(--curvature-widget);
         background: var(--color-widget-bg);
@@ -314,7 +315,7 @@ export class Select extends FormElement {
 
       .info-text {
         opacity: 1;
-        transition: margin 200ms ease-in-out;
+        transition: margin var(--transition-speed) ease-in-out;
         margin-bottom: 16px;
         margin-top: -1em;
         padding: 0.5em 1em;
@@ -469,19 +470,19 @@ export class Select extends FormElement {
     html``;
 
   @property({ attribute: false })
-  renderSelectedItem: (option: any) => TemplateResult = this
-    .renderSelectedItemDefault;
+  renderSelectedItem: (option: any) => TemplateResult =
+    this.renderSelectedItemDefault;
 
   @property({ attribute: false })
-  createArbitraryOption: (input: string, options: any[]) => any = this
-    .createArbitraryOptionDefault;
+  createArbitraryOption: (input: string, options: any[]) => any =
+    this.createArbitraryOptionDefault;
 
   @property({ attribute: false })
   getOptions: (response: WebResponse) => any[] = this.getOptionsDefault;
 
   @property({ attribute: false })
-  isComplete: (newestOptions: any[], response: WebResponse) => boolean = this
-    .isCompleteDefault;
+  isComplete: (newestOptions: any[], response: WebResponse) => boolean =
+    this.isCompleteDefault;
 
   @property({ type: Array, attribute: 'options' })
   private staticOptions: any[] = [];

package/src/shadowless/Shadowless.ts

@@ -1,5 +1,5 @@
-import { customElement, property } from 'lit-element/lib/decorators';
-import { TemplateResult, LitElement } from 'lit-element';
+import { customElement, property } from 'lit/decorators';
+import { TemplateResult, LitElement } from 'lit';
 
 @customElement('temba-shadowless')
 export default class Shadowless extends LitElement {

package/src/store/Store.ts

@@ -1,4 +1,5 @@
-import { LitElement, property } from 'lit-element';
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators';
 import { getUrl, getAssets, Asset, WebResponse } from '../utils';
 import {
   ContactField,

package/src/textinput/TextInput.ts

@@ -1,4 +1,5 @@
-import { TemplateResult, html, css, property } from 'lit-element';
+import { TemplateResult, html, css } from 'lit';
+import { property } from 'lit/decorators';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { styleMap } from 'lit-html/directives/style-map';
 import { FormElement } from '../FormElement';
@@ -15,7 +16,7 @@ export class TextInput extends FormElement {
         cursor: text;
         background: var(--color-widget-bg);
         border: 1px solid var(--color-widget-border);
-        transition: all ease-in-out 200ms;
+        transition: all ease-in-out var(--transition-speed);
         display: flex;
         flex-direction: row;
         align-items: stretch;

package/src/tip/Tip.ts

@@ -1,5 +1,5 @@
-import { css, property } from 'lit-element';
-import { html, TemplateResult } from 'lit-html';
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
 import { styleMap } from 'lit-html/directives/style-map';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';

package/src/vectoricon/VectorIcon.ts

@@ -1,14 +1,18 @@
-import { property, LitElement, TemplateResult, html, css } from 'lit-element';
+import { LitElement, TemplateResult, html, css } from 'lit';
+import { property } from 'lit/decorators';
 
 import { getClasses } from '../utils';
 
 // for cache busting, increase whenever the icon set changes
-const ICON_VERSION = 5;
+const ICON_VERSION = 6;
 
 export class VectorIcon extends LitElement {
   @property({ type: String })
   name: string;
 
+  @property({ type: String })
+  prefix: string;
+
   // same as name but without implicit coloring
   @property({ type: String })
   id: string;
@@ -100,7 +104,7 @@ export class VectorIcon extends LitElement {
         display: flex;
         flex-direction: column;
         border-radius: 999px;
-        transition: background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
+        transition: background 200ms linear,
           transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
           padding 150ms linear, margin 150ms linear;
       }
@@ -110,8 +114,14 @@ export class VectorIcon extends LitElement {
       }
 
       .wrapper.clickable:hover {
-        padding: 0.35em;
-        margin: -0.35em;
+        --icon-circle-size: 0.35em;
+        --icon-background: var(--icon-color-circle-hover);
+      }
+
+      .wrapper.clickable {
+        padding: var(--icon-circle-size);
+        margin: calc(-1 * var(--icon-circle-size));
+        background: var(--icon-background);
       }
     `;
   }
@@ -188,7 +198,9 @@ export class VectorIcon extends LitElement {
           })}"
         >
           <use
-            href="/sitestatic/icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${this
+            href="${this.prefix ||
+            (window as any).static_url ||
+            '/static/'}icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${this
               .lastName ||
             this.name ||
             this.id}"

package/static/css/temba-components.css

@@ -99,6 +99,8 @@ html input {
 
     --icon-color: var(--text-color);
     --icon-color-hover: var(--icon-color);
+    --icon-color-circle-hover: rgb(245, 245, 245);
+
     --transition-speed: 250ms;
     --event-padding: 0.5em 1em;
     --temba-select-selected-padding: 9px;
@@ -116,6 +118,7 @@ html input {
 
     --options-block-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
     --options-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --dropdown-shadow: rgb(0 0 0 / 30%) 0px 0px 60px, rgb(0 0 0 / 12%) 0px 6px 12px;
     
     --label-size: 14px;
 
@@ -174,4 +177,12 @@ html input {
     margin-top: 28px;
     margin-bottom: 28px;
     margin-left: -13px;
+  }
+
+  temba-dropdown {
+    opacity: 0;
+  }
+  
+  temba-dropdown:defined {
+    opacity: 1;
   }

package/static/icons/Read Me.txt

@@ -4,7 +4,7 @@ If you prefer using PNGs, PDFs, or CSS sprites, refer to the Preferences panel o
 
 *demo.html* lists the icons that you selected. To insert your icons as inline SVGs (with the <use> element), copy the <svg> element (that contains symbol definitions) from the source of the demo.html file, below your own HTML's <body> tag. After copying this SVG, you can reference your glyphs like the following:
 
-<svg class="icon icon-zapier"><use xlink:href="#icon-zapier"></use></svg>
+<svg class="icon icon-pause"><use xlink:href="#icon-pause"></use></svg>
 
 You can get this code from the SVG tab of the IcoMoon app, or by referring to the source of the demo.html file. To see how you can change the color/size of your icons using CSS, refer to the example provided in the *style.css* file.
 

package/static/icons/SVG/pause.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>pause</title>
+<path d="M6 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM7 5h2v14h-2zM14 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM15 5h2v14h-2z"></path>
+</svg>

package/static/icons/SVG/play.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>play</title>
+<path d="M5.541 2.159c-0.153-0.1-0.34-0.159-0.541-0.159-0.552 0-1 0.448-1 1v18c-0.001 0.182 0.050 0.372 0.159 0.541 0.299 0.465 0.917 0.599 1.382 0.3l14-9c0.114-0.072 0.219-0.174 0.3-0.3 0.299-0.465 0.164-1.083-0.3-1.382zM6 4.832l11.151 7.168-11.151 7.168z"></path>
+</svg>

package/static/icons/SVG/{upload-cloud.svg → publish.svg}

@@ -1,5 +1,5 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<title>upload-cloud</title>
+<title>publish</title>
 <path d="M11 14.414v6.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6.586l2.293 2.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-4-4c-0.092-0.092-0.202-0.166-0.324-0.217s-0.253-0.076-0.383-0.076c-0.256 0-0.512 0.098-0.707 0.293l-4 4c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM20.869 19.268c1.454-0.793 2.451-2.102 2.884-3.574s0.305-3.112-0.488-4.566c-0.679-1.245-1.737-2.155-2.959-2.663-0.724-0.301-1.505-0.46-2.299-0.465h-0.527c-0.725-2.057-2.144-3.708-3.917-4.752-1.983-1.168-4.415-1.581-6.821-0.959s-4.333 2.162-5.502 4.145-1.581 4.415-0.959 6.821c0.372 1.437 1.073 2.709 1.975 3.713 0.369 0.411 1.002 0.444 1.412 0.075s0.444-1.002 0.075-1.412c-0.688-0.765-1.235-1.75-1.526-2.877-0.484-1.872-0.164-3.761 0.746-5.305s2.407-2.74 4.279-3.224 3.761-0.164 5.305 0.746 2.74 2.407 3.224 4.279c0.116 0.435 0.506 0.75 0.969 0.75h1.253c0.536 0.004 1.061 0.111 1.545 0.312 0.815 0.339 1.517 0.943 1.97 1.773 0.529 0.97 0.615 2.061 0.325 3.044s-0.953 1.854-1.923 2.382c-0.485 0.264-0.664 0.872-0.399 1.357s0.872 0.664 1.357 0.399z"></path>
 </svg>

package/static/icons/SVG/user-x.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>user-x</title>
+<path d="M17 21v-2c0-1.38-0.561-2.632-1.464-3.536s-2.156-1.464-3.536-1.464h-7c-1.38 0-2.632 0.561-3.536 1.464s-1.464 2.156-1.464 3.536v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.829 0.335-1.577 0.879-2.121s1.292-0.879 2.121-0.879h7c0.829 0 1.577 0.335 2.121 0.879s0.879 1.292 0.879 2.121v2c0 0.552 0.448 1 1 1s1-0.448 1-1zM13.5 7c0-1.38-0.561-2.632-1.464-3.536s-2.156-1.464-3.536-1.464-2.632 0.561-3.536 1.464-1.464 2.156-1.464 3.536 0.561 2.632 1.464 3.536 2.156 1.464 3.536 1.464 2.632-0.561 3.536-1.464 1.464-2.156 1.464-3.536zM11.5 7c0 0.829-0.335 1.577-0.879 2.121s-1.292 0.879-2.121 0.879-1.577-0.335-2.121-0.879-0.879-1.292-0.879-2.121 0.335-1.577 0.879-2.121 1.292-0.879 2.121-0.879 1.577 0.335 2.121 0.879 0.879 1.292 0.879 2.121zM22.293 7.293l-1.793 1.793-1.793-1.793c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l1.793 1.793-1.793 1.793c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l1.793-1.793 1.793 1.793c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.793-1.793 1.793-1.793c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z"></path>
+</svg>