@nyaruka/temba-components 0.129.2 → 0.129.4

package/src/flow/EditorNode.ts

@@ -1,318 +0,0 @@
-import { css, html, PropertyValueMap, TemplateResult } from 'lit';
-import { EDITOR_CONFIG, UIConfig } from './config';
-import { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';
-import { property } from 'lit/decorators.js';
-import { RapidElement } from '../RapidElement';
-import { getClasses } from '../utils';
-import { Plumber } from './Plumber';
-import { getStore } from '../store/Store';
-
-export class EditorNode extends RapidElement {
-  createRenderRoot() {
-    return this;
-  }
-
-  @property({ type: Object })
-  private plumber: Plumber;
-
-  @property({ type: Object })
-  private node: Node;
-
-  @property({ type: Object })
-  private ui: NodeUI;
-
-  static get styles() {
-    return css`
-
-      .node {
-        background-color: #fff;
-        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-        min-width: 200px;
-        border-radius: calc(var(--curvature) * 1.5);
-        overflow: hidden;
-        color: #333;
-        cursor: move;
-        user-select: none;
-
-      }
-
-      .node:hover {
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-      }
-
-      .node.dragging {
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
-        transform: scale(1.02);
-        z-index: 1000;
-      }
-        
-      .action {
-        max-width: 200px;
-        position: relative;
-      }
-
-      .action.sortable {
-        display: flex;
-        align-items: stretch;
-      }
-
-      .action .action-content {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .action .body {
-        padding: 1em;
-      }
-
-      .action .drag-handle {
-        opacity: 0;
-        transition: all 200ms ease-in-out;
-        cursor: move;
-        background: rgba(0, 0, 0, 0.02);
-        max-width:0px;
-        position: absolute;
-      }
-
-      .action:hover .drag-handle {
-        opacity: 0.5;
-        padding: 0.25em;
-        max-width: 20px;
-      }
-
-      .action .drag-handle:hover {
-        opacity: 1;
-        
-      }
-
-      .action .title,
-      .router .title {
-        display: flex;
-        color: #fff;
-        padding: 5px 1px;
-        text-align: center;
-        font-size: 1em;
-        font-weight: normal;
-
-      }
-
-      .title .name {
-        flex-grow: 1;
-        }
-
-      .quick-replies {
-        margin-top: 0.5em;
-      }
-
-      .quick-reply {
-        background-color: #f0f0f0;
-        border: 1px solid #e0e0e0;
-        border-radius: calc(var(--curvature) * 1.5);
-        padding: 0.2em 1em;
-        display: inline-block;
-        font-size: 0.8em;
-        margin: 0.2em;
-      }
-
-      .categories {
-        display: flex;
-        flex-direction: row;
-
-      }
-
-      .category {
-        margin:-1px -0.5px;
-        border: 1px solid #f3f3f3;
-        padding: 0.75em;
-        flex-grow:1;
-        text-align: center;
-      }
-
-      .action-exits {
-        padding-bottom: 0.75em;
-        margin-top: -0.75em;
-      }
-
-      .category .title {
-        font-weight: normal;
-        font-size: 1em;
-      }
-
-      .router .body {
-        padding: 0.75em;
-      }
-
-      .result-name {
-        font-weight: bold;
-        display: inline-block;
-      }
-      
-      .exit {
-        padding-top: 10px;
-        margin-bottom: -10px;
-      }
-  }`;
-  }
-
-  constructor() {
-    super();
-    this.handleActionOrderChanged = this.handleActionOrderChanged.bind(this);
-  }
-
-  protected updated(
-    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
-  ): void {
-    super.updated(changes);
-    if (changes.has('node')) {
-      // make our initial connections
-      if (changes.get('node') === undefined) {
-        // this.plumber.makeTarget(this.node.uuid);
-        for (const exit of this.node.exits) {
-          if (!exit.destination_uuid) {
-            this.plumber.makeSource(exit.uuid);
-          } else {
-            this.plumber.connectIds(exit.uuid, exit.destination_uuid);
-          }
-        }
-      }
-
-      const ele = this.parentElement;
-      const rect = ele.getBoundingClientRect();
-
-      getStore()
-        ?.getState()
-        .expandCanvas(
-          this.ui.position.left + rect.width,
-          this.ui.position.top + rect.height
-        );
-    }
-  }
-
-  private handleActionOrderChanged(event: CustomEvent) {
-    const [fromIdx, toIdx] = event.detail.swap;
-
-    // swap our actions
-    const newActions = [...this.node.actions];
-    const movedAction = newActions.splice(fromIdx, 1)[0];
-    newActions.splice(toIdx, 0, movedAction);
-
-    // udate our internal reprensentation, this isn't strictly necessary
-    // since the editor will update us from it's definition subscription
-    // but it makes testing a lot easier
-    this.node = { ...this.node, actions: newActions };
-
-    getStore()
-      ?.getState()
-      .updateNode(this.node.uuid, { ...this.node, actions: newActions });
-  }
-
-  private renderTitle(config: UIConfig) {
-    return html`<div class="title" style="background:${config.color}">
-      ${this.node?.actions?.length > 1
-        ? html`<temba-icon class="drag-handle" name="sort"></temba-icon>`
-        : null}
-
-      <div class="name">${config.name}</div>
-    </div>`;
-  }
-
-  private renderAction(node: Node, action: Action, index: number) {
-    const config = EDITOR_CONFIG[action.type];
-
-    if (config) {
-      return html`<div
-        class="action sortable ${action.type}"
-        id="action-${index}"
-      >
-        <div class="action-content">
-          ${this.renderTitle(config)}
-          <div class="body">
-            ${config.render
-              ? config.render(node, action)
-              : html`<pre>${action.type}</pre>`}
-          </div>
-        </div>
-      </div>`;
-    }
-    return html`<div class="action sortable" id="action-${index}">
-      ${action.type}
-    </div>`;
-  }
-
-  private renderRouter(router: Router, ui: NodeUI) {
-    const config = EDITOR_CONFIG[ui.type];
-    if (config) {
-      return html`<div class="router">
-        ${this.renderTitle(config)}
-        ${router.result_name
-          ? html`<div class="body">
-              Save as
-              <div class="result-name">${router.result_name}</div>
-            </div>`
-          : null}
-      </div>`;
-    }
-  }
-
-  private renderCategories(node: Node) {
-    if (!node.router || !node.router.categories) {
-      return null;
-    }
-    const categories = node.router.categories.map((category) => {
-      const exit = node.exits.find(
-        (exit: Exit) => exit.uuid == category.exit_uuid
-      );
-
-      return html`<div class="category">
-        <div class="title">${category.name}</div>
-        ${this.renderExit(exit)}
-      </div>`;
-    });
-
-    return html`<div class="categories">${categories}</div>`;
-  }
-
-  private renderExit(exit: Exit): TemplateResult {
-    return html`<div
-      id="${exit.uuid}"
-      class=${getClasses({
-        exit: true,
-        connected: !!exit.destination_uuid
-      })}
-    ></div>`;
-  }
-
-  public render() {
-    if (!this.node || !this.ui) {
-      return html`<div class="node">Loading...</div>`;
-    }
-
-    return html`
-      <div
-        id="${this.node.uuid}"
-        class="node"
-        style="left:${this.ui.position.left}px;top:${this.ui.position.top}px"
-      >
-        ${this.node.actions.length > 0
-          ? html`<temba-sortable-list
-              dragHandle="drag-handle"
-              @temba-order-changed="${this.handleActionOrderChanged}"
-            >
-              ${this.node.actions.map((actionSpec, index) => {
-                return this.renderAction(this.node, actionSpec, index);
-              })}
-            </temba-sortable-list>`
-          : ''}
-        ${this.node.router
-          ? html` ${this.renderRouter(this.node.router, this.ui)}
-            ${this.renderCategories(this.node)}`
-          : html`<div class="action-exits">
-              ${this.node.exits.map((exit) => {
-                return this.renderExit(exit);
-              })}
-            </div>`}
-      </div>
-    `;
-  }
-}

package/src/flow/render.ts

@@ -1,56 +0,0 @@
-import { html } from 'lit-html';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-
-import {
-  AddToGroup,
-  CallWebhook,
-  Node,
-  NamedObject,
-  SendMsg,
-  SetContactName,
-  SetRunResult
-} from '../store/flow-definition';
-
-const renderNamedObjects = (assets: NamedObject[], icon?: string) => {
-  return assets.map((asset) => {
-    return html`<div style="display:flex;items-align:center">
-      ${icon
-        ? html`<temba-icon
-            name=${icon}
-            style="margin-right:0.5em"
-          ></temba-icon>`
-        : null}
-      <div>${asset.name}</div>
-    </div>`;
-  });
-};
-
-export const renderSendMsg = (node: Node, action: SendMsg) => {
-  const text = action.text.replace(/\n/g, '<br>');
-  return html`
-    ${unsafeHTML(text)}
-    ${action.quick_replies.length > 0
-      ? html`<div class="quick-replies">
-          ${action.quick_replies.map((reply) => {
-            return html`<div class="quick-reply">${reply}</div>`;
-          })}
-        </div>`
-      : null}
-  `;
-};
-
-export const renderSetContactName = (node: Node, action: SetContactName) => {
-  return html`<div>Set contact name to <b>${action.name}</b></div>`;
-};
-
-export const renderSetRunResult = (node: Node, action: SetRunResult) => {
-  return html`<div>Save ${action.value} as <b>${action.name}</b></div>`;
-};
-
-export const renderCallWebhook = (node: Node, action: CallWebhook) => {
-  return html`<div style="word-break: break-all">${action.url}</div>`;
-};
-
-export const renderAddToGroups = (node: Node, action: AddToGroup) => {
-  return html`<div>${renderNamedObjects(action.groups, 'group')}</div>`;
-};

package/src/formfield/FormField.ts

@@ -1,134 +0,0 @@
-import { TemplateResult, html, css, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import { renderMarkdown } from '../markdown';
-
-/**
- * A small wrapper to display labels and help text in a smartmin style.
- * This exists so we can display things consistently before restyling.
- */
-export class FormField extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        font-family: var(--font-family);
-      }
-
-      label {
-        margin-bottom: 5px;
-        margin-left: 4px;
-        display: block;
-        font-weight: 400;
-        font-size: var(--label-size);
-        letter-spacing: 0.05em;
-        line-height: normal;
-        color: #777;
-      }
-
-      .help-text {
-        font-size: var(--help-text-size);
-        line-height: normal;
-        color: var(--color-text-help);
-        margin-left: var(--help-text-margin-left);
-        margin-top: -16px;
-        opacity: 0;
-        transition: opacity ease-in-out 100ms, margin-top ease-in-out 200ms;
-        pointer-events: none;
-      }
-
-      .help-text.help-always {
-        opacity: 1;
-        margin-top: 6px;
-        margin-left: var(--help-text-margin-left);
-      }
-
-      .field:focus-within .help-text {
-        margin-top: 6px;
-        opacity: 1;
-      }
-
-      .alert-error {
-        background: rgba(255, 181, 181, 0.17);
-        border: none;
-        border-left: 0px solid var(--color-error);
-        color: var(--color-error);
-        padding: 10px;
-        margin: 15px 0px;
-        border-radius: var(--curvature);
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
-          0 1px 2px 0 rgba(0, 0, 0, 0.06);
-      }
-
-      .disabled {
-        opacity: var(--disabled-opacity) !important;
-        pointer-events: none !important;
-      }
-    `;
-  }
-
-  @property({ type: Boolean, attribute: 'hide_label' })
-  hideLabel = false;
-
-  @property({ type: Boolean, attribute: 'widget_only' })
-  widgetOnly = false;
-
-  @property({ type: Array, attribute: false })
-  errors: string[] = [];
-
-  @property({ type: Boolean })
-  hideErrors = false;
-
-  @property({ type: String, attribute: 'help_text' })
-  helpText = '';
-
-  @property({ type: Boolean, attribute: 'help_always' })
-  helpAlways = true;
-
-  @property({ type: String })
-  label = '';
-
-  @property({ type: String })
-  name = '';
-
-  @property({ type: Boolean })
-  disabled = false;
-
-  public render(): TemplateResult {
-    const errors = !this.hideErrors
-      ? (this.errors || []).map((error: string) => {
-          return html`
-            <div class="alert-error">${renderMarkdown(error)}</div>
-          `;
-        })
-      : [];
-
-    if (this.widgetOnly) {
-      return html`
-        <div class="${this.disabled ? 'disabled' : ''}"><slot></slot></div>
-        ${errors}
-      `;
-    }
-
-    return html`
-      <div class="field ${this.disabled ? 'disabled' : ''}">
-        ${!!this.name && !this.hideLabel && !!this.label
-          ? html`
-              <label class="control-label" for="${this.name}"
-                >${this.label}</label
-              >
-            `
-          : null}
-        <div class="widget">
-          <slot></slot>
-        </div>
-        ${this.helpText && this.helpText !== 'None'
-          ? html`
-              <div class="help-text ${this.helpAlways ? 'help-always' : null}">
-                ${this.helpText}
-              </div>
-            `
-          : null}
-        ${errors}
-      </div>
-    `;
-  }
-}

package/src/leafletmap/helpers.ts

@@ -1,18 +0,0 @@
-export const normalFeature = {
-  weight: 1,
-  opacity: 1,
-  color: 'white',
-  fillOpacity: 0.7,
-  fillColor: '#2387ca'
-};
-
-export const highlightedFeature = {
-  weight: 3,
-  color: 'white',
-  fillOpacity: 1,
-  fillColor: '#2387ca'
-};
-
-export const visibleStyle = () => {
-  return normalFeature;
-};

package/src/options/helpers.ts

@@ -1,37 +0,0 @@
-export const getScrollParent = (element: HTMLElement) => {
-  if (!element) {
-    return window;
-  }
-  let style = getComputedStyle(element);
-  const excludeStaticParent = style.position === 'absolute';
-  const overflowRegex = /(auto|scroll)/;
-
-  if (style.position === 'fixed') {
-    return window;
-  }
-
-  let parent = element.parentElement;
-
-  while (parent) {
-    if (parent.tagName === 'BODY') {
-      break;
-    }
-
-    style = getComputedStyle(parent);
-
-    if (excludeStaticParent && style.position === 'static') {
-      parent = parent.parentElement;
-      continue;
-    }
-
-    if (
-      overflowRegex.test(style.overflow + style.overflowY + style.overflowX)
-    ) {
-      return parent;
-    }
-
-    parent = parent.parentElement;
-  }
-
-  return window;
-};

package/src/shadowless/Shadowless.ts

@@ -1,32 +0,0 @@
-import { customElement, property } from 'lit/decorators.js';
-import { TemplateResult, LitElement } from 'lit';
-
-@customElement('temba-shadowless')
-export default class Shadowless extends LitElement {
-  createRenderRoot() {
-    for (const child of this.childNodes) {
-      if ((child as any).className == 'content') {
-        return child;
-      }
-    }
-
-    const root = document.createElement('div');
-    root.className = 'content';
-    this.appendChild(root);
-    return root as any;
-  }
-
-  createRenderRoots() {
-    const root = document.createElement('div');
-    root.className = 'content';
-    this.appendChild(root);
-    return root;
-  }
-
-  @property({ type: Object })
-  body: any;
-
-  public render(): TemplateResult {
-    return this.body;
-  }
-}

package/src/textinput/helpers.ts

@@ -1,11 +0,0 @@
-export const sanitize = (text: string): string => {
-  if (text) {
-    return text
-      .replace(/[\u2018\u2019]/g, "'") // Smart single quotes
-      .replace(/[\u201C\u201D]/g, '"') // Smart double quotes
-      .replace(/[\u2013\u2014]/g, '-') // En/em dash
-      .replace(/\u2026/g, '...') // Horizontal ellipsis
-      .replace(/\u2002/g, ' '); // En space
-  }
-  return text;
-};

package/src/tip/helpers.ts

@@ -1,7 +0,0 @@
-export const getMiddle = (a: DOMRect, b: DOMRect) => {
-  return a.top + a.height / 2 - b.height / 2;
-};
-
-export const getCenter = (a: DOMRect, b: DOMRect) => {
-  return a.left + a.width / 2 - b.width / 2;
-};