@nyaruka/temba-components 0.25.2 → 0.26.2

package/src/tabpane/TabPane.ts

@@ -0,0 +1,113 @@
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { RapidElement } from '../RapidElement';
+import { Tab } from './Tab';
+
+export class TabPane extends RapidElement {
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+      }
+
+      .tabs {
+        display: flex;
+      }
+
+      .tab {
+        padding: 0.5em 1em;
+        margin: 0em 0em;
+        cursor: pointer;
+        display: flex;
+        border-radius: var(--curvature);
+        border-bottom-right-radius: 0px;
+        border-bottom-left-radius: 0px;
+        border: 0px solid rgba(0, 0, 0, 0.45);
+        color: var(--color-text-dark);
+        --icon-color: var(--color-text-dark);
+      }
+
+      .tab temba-icon {
+        margin-right: 0.4em;
+      }
+
+      .tab.selected {
+        cursor: default;
+        box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);
+        background: #fff;
+      }
+
+      .pane {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        background: #fff;
+        border-radius: var(--curvature);
+        box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),
+          3px 3px 2px 1px rgba(0, 0, 0, 0.05);
+        min-height: 0;
+      }
+
+      .pane.first {
+        border-top-left-radius: 0px;
+      }
+    `;
+  }
+
+  @property({ type: Number })
+  index = 0;
+
+  private handleTabClick(event: MouseEvent): void {
+    this.index = parseInt(
+      (event.currentTarget as HTMLDivElement).dataset.index
+    );
+    this.requestUpdate('index');
+  }
+
+  public updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('index')) {
+      if (this.children.length > this.index) {
+        for (let i = 0; i < this.children.length; i++) {
+          const tab = this.children[i] as Tab;
+          tab.selected = i == this.index;
+
+          if (tab.selected) {
+            tab.style.display = 'flex';
+          } else {
+            tab.style.display = 'none';
+          }
+        }
+      }
+    }
+  }
+
+  public render(): TemplateResult {
+    const tabs: Tab[] = [];
+    for (const tab of this.children) {
+      tabs.push(tab as Tab);
+    }
+
+    return html`
+      <div class="tabs">
+        ${tabs.map(
+          (tab, index) => html`
+            <div
+              @click=${this.handleTabClick}
+              data-index=${index}
+              class="tab ${index == this.index ? 'selected' : ''}"
+            >
+              ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}
+              ${tab.name}
+            </div>
+          `
+        )}
+      </div>
+      <div class="pane ${this.index === 0 ? 'first' : null}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}

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>