@nyaruka/temba-components 0.129.1 → 0.129.3

package/src/{contactsearch → form}/ContactSearch.ts

@@ -2,14 +2,14 @@ import { TemplateResult, html, css, PropertyValueMap } from 'lit';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { property } from 'lit/decorators.js';
 import { getClasses, postJSON, stopEvent, WebResponse } from '../utils';
-import { TextInput } from '../textinput/TextInput';
-import '../alert/Alert';
+import { TextInput } from './TextInput';
+import '../display/Alert';
 import { Contact, CustomEventType } from '../interfaces';
-import { FormElement } from '../FormElement';
-import { Checkbox } from '../checkbox/Checkbox';
+import { FormElement } from './FormElement';
+import { Checkbox } from './Checkbox';
 import { msg } from '@lit/localize';
-import { OmniOption } from '../omnibox/Omnibox';
-import { Select } from '../select/Select';
+import { OmniOption } from './select/Omnibox';
+import { Select } from './select/Select';
 
 const QUEIT_MILLIS = 2000;
 

package/src/{datepicker → form}/DatePicker.ts

@@ -1,6 +1,6 @@
 import { TemplateResult, html, css, PropertyValueMap } from 'lit';
 import { property } from 'lit/decorators.js';
-import { FormElement } from '../FormElement';
+import { FormElement } from './FormElement';
 import { getClasses } from '../utils';
 import { DateTime } from 'luxon';
 

package/src/{FormElement.ts → form/FormElement.ts}

@@ -1,4 +1,4 @@
-import { RapidElement } from './RapidElement';
+import { RapidElement } from '../RapidElement';
 import { property } from 'lit/decorators.js';
 
 /**

package/src/{imagepicker → form}/ImagePicker.ts

@@ -2,8 +2,8 @@
 import { html, css, PropertyValueMap } from 'lit';
 import { CroppieCSS } from './CroppieCSS';
 import { property } from 'lit/decorators.js';
-import { Icon } from '../vectoricon';
-import { FormElement } from '../FormElement';
+import { Icon } from '../Icons';
+import { FormElement } from './FormElement';
 
 export class ImagePicker extends FormElement {
   static styles = css`

package/src/{mediapicker → form}/MediaPicker.ts

@@ -2,7 +2,7 @@ import { TemplateResult, css, html } from 'lit';
 import { RapidElement } from '../RapidElement';
 import { property } from 'lit/decorators.js';
 import { Attachment, CustomEventType } from '../interfaces';
-import { Icon } from '../vectoricon';
+import { Icon } from '../Icons';
 import {
   DEFAULT_MEDIA_ENDPOINT,
   WebResponse,

package/src/{datepicker → form}/RangePicker.ts

@@ -464,8 +464,9 @@ export class RangePicker extends RapidElement {
     super.updated(changed);
 
     if (
-      (changed.has('startDate') && changed.has('endDate') && !this.startDate) ||
-      !this.endDate
+      changed.has('startDate') &&
+      changed.has('endDate') &&
+      (!this.startDate || !this.endDate)
     ) {
       this.setRange('M');
     }

package/src/{slider → form}/TembaSlider.ts

@@ -1,7 +1,7 @@
 import { css, html, TemplateResult } from 'lit';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { property } from 'lit/decorators.js';
-import { FormElement } from '../FormElement';
+import { FormElement } from './FormElement';
 import { getClasses } from '../utils';
 
 export class TembaSlider extends FormElement {

package/src/{templates → form}/TemplateEditor.ts

@@ -1,8 +1,8 @@
 import { property } from 'lit/decorators.js';
-import { FormElement } from '../FormElement';
+import { FormElement } from './FormElement';
 import { TemplateResult, html, css, LitElement } from 'lit';
 import { CustomEventType } from '../interfaces';
-import { MediaPicker } from '../mediapicker/MediaPicker';
+import { MediaPicker } from './MediaPicker';
 import { getClasses } from '../utils';
 
 interface Component {

package/src/{textinput → form}/TextInput.ts

@@ -2,10 +2,10 @@ import { TemplateResult, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
-import { FormElement } from '../FormElement';
-import { Modax } from '../dialog/Modax';
-import { sanitize } from './helpers';
-import { CharCount } from '../charcount/CharCount';
+import { FormElement } from './FormElement';
+import { Modax } from '../layout/Modax';
+import { sanitizeUnintendedUnicode } from '../utils';
+import { CharCount } from '../display/CharCount';
 
 export enum InputType {
   Text = 'text',
@@ -265,7 +265,7 @@ export class TextInput extends FormElement {
   }
 
   private sanitizeGSM(text: string): string {
-    return this.gsm ? sanitize(text) : text;
+    return this.gsm ? sanitizeUnintendedUnicode(text) : text;
   }
 
   private handleChange(update: any): void {

package/src/{omnibox → form/select}/Omnibox.ts

@@ -1,8 +1,8 @@
 import { TemplateResult, html, PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
-import { Select, SelectOption } from '../select/Select';
-import { Icon } from '../vectoricon';
+import { Select, SelectOption } from './Select';
+import { Icon } from '../../Icons';
 
 enum OmniType {
   Group = 'group',

package/src/{select → form/select}/PopupSelect.ts

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { RapidElement } from '../RapidElement';
+import { RapidElement } from '../../RapidElement';
 import { property } from 'lit/decorators.js';
 
 export class PopupSelect extends RapidElement {

package/src/{select → form/select}/Select.ts

@@ -7,22 +7,22 @@ import {
   fetchResults,
   WebResponse,
   postJSON
-} from '../utils';
-import '../options/Options';
-import '../list/SortableList';
-import { EventHandler } from '../RapidElement';
-import { FormElement } from '../FormElement';
+} from '../../utils';
+import '../../display/Options';
+import '../../list/SortableList';
+import { EventHandler } from '../../RapidElement';
+import { FormElement } from '../../form/FormElement';
 
 import { lru } from 'tiny-lru';
-import { CompletionOption, CustomEventType, Position } from '../interfaces';
+import { CompletionOption, CustomEventType, Position } from '../../interfaces';
 import {
   renderCompletionOption,
   updateInputElementWithCompletion,
   executeCompletionQuery
-} from '../completion/helpers';
-import { Store } from '../store/Store';
+} from '../../excellent/helpers';
+import { Store } from '../../store/Store';
 import { StyleInfo, styleMap } from 'lit-html/directives/style-map.js';
-import { Icon } from '../vectoricon';
+import { Icon } from '../../Icons';
 import { msg } from '@lit/localize';
 
 const LOOK_AHEAD = 20;
@@ -1615,59 +1615,27 @@ export class Select<T extends SelectOption> extends FormElement {
         `
       : placeholderDiv;
 
-    return html`
-            
-      <temba-field
-        name=${this.name}
-        .label=${this.label}
-        .helpText=${this.helpText}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .hideErrors=${this.hideErrors}
-        ?disabled=${this.disabled}
-      >
-        <slot></slot>
-        <div class="wrapper-bg">
-        
-        <div
-          tabindex="0"
-          class="select-container ${classes}"
-          @click=${this.handleContainerClick}
-        > 
-          <div class="left-side" >
-          <slot name="prefix"></slot>
-            <div class="selected" >
-              ${
-                this.resolving
-                  ? html`<temba-loading
-                      style="margin-left:1em"
-                    ></temba-loading>`
-                  : null
-              }
-              ${!this.multi && !this.resolving ? input : null}
-              ${
-                this.multi && this.values.length > 1
-                  ? html`
-                      <temba-sortable-list
-                        horizontal
-                        @temba-order-changed=${this.handleOrderChanged}
-                        .prepareGhost=${(item: any) => {
-                          item.style.transform = 'scale(1)';
-                          item.querySelector('.remove-item').style.display =
-                            'none';
-                        }}
-                      >
-                        ${this.values.map(
-                          (selected: any, index: number) => html`
-                            <div
-                              class="selected-item sortable ${index ===
-                              this.selectedIndex
-                                ? 'focused'
-                                : ''} ${this.draggingId === `selected-${index}`
-                                ? 'dragging'
-                                : ''}"
-                              id="selected-${index}"
-                              style="
+    const items = html`${!this.multi && !this.resolving ? input : null}
+    ${this.multi && this.values.length > 1
+      ? html`
+          <temba-sortable-list
+            horizontal
+            @temba-order-changed=${this.handleOrderChanged}
+            .prepareGhost=${(item: any) => {
+              item.style.transform = 'scale(1)';
+              item.querySelector('.remove-item').style.display = 'none';
+            }}
+          >
+            ${this.values.map(
+              (selected: any, index: number) => html`
+                <div
+                  class="selected-item sortable ${index === this.selectedIndex
+                    ? 'focused'
+                    : ''} ${this.draggingId === `selected-${index}`
+                    ? 'dragging'
+                    : ''}"
+                  id="selected-${index}"
+                  style="
                                 vertical-align: middle;
                                 background: rgba(100,100,100,0.1);
                                 user-select: none;
@@ -1682,18 +1650,18 @@ export class Select<T extends SelectOption> extends FormElement {
                                 line-height: var(--temba-select-selected-line-height);
                                 --icon-color: var(--color-text-dark);
                                 ${index === this.selectedIndex
-                                ? 'background: rgba(100,100,100,0.3);'
-                                : ''}
+                    ? 'background: rgba(100,100,100,0.3);'
+                    : ''}
                                 ${this.draggingId === `selected-${index}`
-                                ? 'opacity: 0.5;'
-                                : ''}
+                    ? 'opacity: 0.5;'
+                    : ''}
                               "
-                            >
-                              ${this.multi
-                                ? html`
-                                    <div
-                                      class="remove-item"
-                                      style="
+                >
+                  ${this.multi
+                    ? html`
+                        <div
+                          class="remove-item"
+                          style="
                                         cursor: pointer;
                                         display: inline-block;
                                         padding: 3px 6px;
@@ -1702,47 +1670,47 @@ export class Select<T extends SelectOption> extends FormElement {
                                         background: rgba(100,100,100,0.05);
                                         margin-top:1px;
                                       "
-                                      @click=${(evt: MouseEvent) => {
-                                        evt.preventDefault();
-                                        evt.stopPropagation();
-                                        this.handleRemoveSelection(selected);
-                                      }}
-                                    >
-                                      <temba-icon
-                                        name="${Icon.delete_small}"
-                                        size="1"
-                                      ></temba-icon>
-                                    </div>
-                                  `
-                                : null}
-                              ${this.renderSelectedItem(selected)}
-                            </div>
-                          `
-                        )}
-                      </temba-sortable-list>
-                    `
-                  : this.values.map(
-                      (selected: any, index: number) => html`
-                        <div
-                          class="selected-item ${index === this.selectedIndex
-                            ? 'focused'
-                            : ''}"
-                          style="
+                          @click=${(evt: MouseEvent) => {
+                            evt.preventDefault();
+                            evt.stopPropagation();
+                            this.handleRemoveSelection(selected);
+                          }}
+                        >
+                          <temba-icon
+                            name="${Icon.delete_small}"
+                            size="1"
+                          ></temba-icon>
+                        </div>
+                      `
+                    : null}
+                  ${this.renderSelectedItem(selected)}
+                </div>
+              `
+            )}
+          </temba-sortable-list>
+        `
+      : this.values.map(
+          (selected: any, index: number) => html`
+            <div
+              class="selected-item ${index === this.selectedIndex
+                ? 'focused'
+                : ''}"
+              style="
                             display: flex;
                             overflow: hidden;
                             color: var(--color-widget-text);
                             line-height: var(--temba-select-selected-line-height);
                             --icon-color: var(--color-text-dark);
                             ${index === this.selectedIndex
-                            ? 'background: rgba(100,100,100,0.3);'
-                            : ''}
+                ? 'background: rgba(100,100,100,0.3);'
+                : ''}
                           "
-                        >
-                          ${this.multi
-                            ? html`
-                                <div
-                                  class="remove-item"
-                                  style="
+            >
+              ${this.multi
+                ? html`
+                    <div
+                      class="remove-item"
+                      style="
                                     cursor: pointer;
                                     display: inline-block;
                                     padding: 3px 6px;
@@ -1751,27 +1719,57 @@ export class Select<T extends SelectOption> extends FormElement {
                                     background: rgba(100,100,100,0.05);
                                     margin-top:1px;
                                   "
-                                  @click=${(evt: MouseEvent) => {
-                                    evt.preventDefault();
-                                    evt.stopPropagation();
-                                    this.handleRemoveSelection(selected);
-                                  }}
-                                >
-                                  <temba-icon
-                                    name="${Icon.delete_small}"
-                                    size="1"
-                                  ></temba-icon>
-                                </div>
-                              `
-                            : null}
-                          ${!this.input || this.multi
-                            ? this.renderSelectedItem(selected)
-                            : null}
-                        </div>
-                      `
-                    )
+                      @click=${(evt: MouseEvent) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                        this.handleRemoveSelection(selected);
+                      }}
+                    >
+                      <temba-icon
+                        name="${Icon.delete_small}"
+                        size="1"
+                      ></temba-icon>
+                    </div>
+                  `
+                : null}
+              ${!this.input || this.multi
+                ? this.renderSelectedItem(selected)
+                : null}
+            </div>
+          `
+        )}
+    ${this.multi ? input : null}`;
+
+    return html`
+            
+      <temba-field
+        name=${this.name}
+        .label=${this.label}
+        .helpText=${this.helpText}
+        .errors=${this.errors}
+        .widgetOnly=${this.widgetOnly}
+        .hideErrors=${this.hideErrors}
+        ?disabled=${this.disabled}
+      >
+        <slot></slot>
+        <div class="wrapper-bg">
+        
+        <div
+          tabindex="0"
+          class="select-container ${classes}"
+          @click=${this.handleContainerClick}
+        > 
+          <div class="left-side" >
+          <slot name="prefix"></slot>
+            <div class="selected" >
+              ${
+                this.resolving
+                  ? html`<temba-loading
+                      style="margin-left:1em"
+                    ></temba-loading>`
+                  : items
               }
-              ${this.multi ? input : null}
+              
             </div>
 
           </div>

package/src/{select → form/select}/UserSelect.ts

@@ -1,7 +1,7 @@
 import { css, CSSResultArray, html, TemplateResult } from 'lit';
 import { Select, SelectOption } from './Select';
 import { property } from 'lit/decorators.js';
-import { getFullName } from '../user/TembaUser';
+import { getFullName } from '../../display/TembaUser';
 
 export interface UserOption extends SelectOption {
   email: string;

package/src/{select → form/select}/WorkspaceSelect.ts

@@ -1,7 +1,7 @@
 import { css, CSSResultArray, html, TemplateResult } from 'lit';
 import { Select, SelectOption } from './Select';
 import { property } from 'lit/decorators.js';
-import { getScrollParent } from '../utils';
+import { getScrollParent } from '../../utils';
 
 export interface WorkspaceOption extends SelectOption {
   name: string;

package/src/interfaces.ts

@@ -286,5 +286,6 @@ export enum CustomEventType {
   Opened = 'temba-opened',
   TicketUpdated = 'temba-ticket-updated',
   Moved = 'temba-moved',
-  DateRangeChanged = 'temba-date-range-changed'
+  DateRangeChanged = 'temba-date-range-changed',
+  NodeDeleted = 'temba-node-deleted'
 }

package/src/{dialog → layout}/Dialog.ts

@@ -1,6 +1,6 @@
 import { property } from 'lit/decorators.js';
 import { TemplateResult, html, css } from 'lit';
-import { Button } from '../button/Button';
+import { Button } from '../display/Button';
 import { CustomEventType } from '../interfaces';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { getClasses } from '../utils';

package/src/list/NotificationList.ts

@@ -1,7 +1,7 @@
 import { css, html, TemplateResult } from 'lit';
 import { TembaList } from './TembaList';
-import { Options } from '../options/Options';
-import { Icon } from '../vectoricon';
+import { Options } from '../display/Options';
+import { Icon } from '../Icons';
 
 interface Notification {
   created_on: string;

package/src/list/RunList.ts

@@ -1,9 +1,9 @@
 import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import { Checkbox } from '../checkbox/Checkbox';
-import { Select } from '../select/Select';
+import { Checkbox } from '../form/Checkbox';
+import { Select } from '../form/select/Select';
 import { capitalize } from '../utils';
-import { Icon } from '../vectoricon';
+import { Icon } from '../Icons';
 import { TembaList } from './TembaList';
 
 const FLOW_COLOR = 'rgb(223, 65, 159)';

package/src/list/ShortcutList.ts

@@ -2,7 +2,7 @@ import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Shortcut } from '../interfaces';
 import { StoreMonitorElement } from '../store/StoreMonitorElement';
-import { Options } from '../options/Options';
+import { Options } from '../display/Options';
 
 export class ShortcutList extends StoreMonitorElement {
   static get styles() {

package/src/list/TembaMenu.ts

@@ -3,8 +3,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { debounce, fetchResults, getClasses, renderAvatar } from '../utils';
-import { Icon } from '../vectoricon';
-import { Dropdown } from '../dropdown/Dropdown';
+import { Icon } from '../Icons';
+import { Dropdown } from '../display/Dropdown';
 import { NotificationList } from './NotificationList';
 import { ResizeElement } from '../ResizeElement';
 import { Store } from '../store/Store';

package/src/list/TicketList.ts

@@ -2,7 +2,7 @@ import { html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { TembaList } from './TembaList';
 import { Contact } from '../interfaces';
-import { Icon } from '../vectoricon';
+import { Icon } from '../Icons';
 
 export class TicketList extends TembaList {
   @property({ type: String })

package/src/{aliaseditor → live}/AliasEditor.ts

@@ -1,12 +1,12 @@
 import { css, html, LitElement, TemplateResult } from 'lit';
 import { FeatureProperties } from '../interfaces';
 import { getUrl, postJSON, WebResponse } from '../utils';
-import { TextInput } from '../textinput/TextInput';
+import { TextInput } from '../form/TextInput';
 import { styleMap } from 'lit-html/directives/style-map.js';
-import { Icon } from '../vectoricon';
+import { Icon } from '../Icons';
 
 import { property } from 'lit/decorators.js';
-import { Select } from '../select/Select';
+import { Select } from '../form/select/Select';
 
 export class AliasEditor extends LitElement {
   static get styles() {

package/src/{contacts → live}/ContactBadges.ts

@@ -2,7 +2,7 @@ import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Group } from '../interfaces';
 import { debounce, getClasses } from '../utils';
-import { Icon } from '../vectoricon';
+import { Icon } from '../Icons';
 import { ContactStoreElement } from './ContactStoreElement';
 
 const STATUS = {