@nyaruka/temba-components 0.158.3 → 0.159.0

package/static/svg/work/traced/chevron-down-double.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.596 5.126 C 6.199 5.286,5.927 5.834,6.037 6.253 C 6.075 6.399,7.347 7.752,8.864 9.259 C 10.877 11.261,11.723 12.000,12.000 12.000 C 12.277 12.000,13.123 11.261,15.136 9.259 C 16.653 7.752,17.925 6.399,17.963 6.253 C 18.162 5.493,17.288 4.783,16.590 5.137 C 16.397 5.235,15.286 6.260,14.120 7.415 L 12.000 9.516 9.880 7.415 C 8.073 5.625,7.249 4.922,7.011 4.970 C 6.983 4.976,6.796 5.046,6.596 5.126 M6.325 12.315 C 5.683 13.024,5.870 13.318,8.829 16.264 C 10.871 18.296,11.720 19.040,11.998 19.040 C 12.275 19.040,13.091 18.333,15.002 16.440 C 16.445 15.010,17.718 13.660,17.831 13.440 C 18.056 13.001,18.006 12.707,17.634 12.280 C 17.092 11.657,16.687 11.898,14.292 14.273 L 12.000 16.546 9.708 14.273 C 7.282 11.868,6.919 11.658,6.325 12.315 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/traced/chevron-up-double.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.600 5.118 C 11.424 5.192,10.101 6.439,8.660 7.888 C 5.884 10.680,5.694 10.989,6.325 11.685 C 6.919 12.342,7.282 12.132,9.708 9.727 L 12.000 7.454 14.292 9.727 C 16.718 12.132,17.081 12.342,17.675 11.685 C 18.311 10.983,18.123 10.683,15.260 7.836 C 13.775 6.359,12.416 5.113,12.240 5.067 C 12.064 5.021,11.776 5.044,11.600 5.118 M8.864 14.741 C 7.347 16.248,6.075 17.601,6.037 17.747 C 5.856 18.438,6.577 19.154,7.246 18.949 C 7.441 18.890,8.590 17.863,9.800 16.668 L 12.000 14.495 14.200 16.668 C 15.410 17.863,16.559 18.890,16.754 18.949 C 17.423 19.154,18.144 18.438,17.963 17.747 C 17.925 17.601,16.653 16.248,15.136 14.741 C 13.123 12.739,12.277 12.000,12.000 12.000 C 11.723 12.000,10.877 12.739,8.864 14.741 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/used/chevron-down-double.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 13L12 18L17 13M7 6L12 11L17 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/static/svg/work/used/chevron-up-double.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 18L12 13L7 18M17 11L12 6L7 11" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/temba-modules.ts

@@ -31,7 +31,7 @@ import { ContactFields } from './src/live/ContactFields';
 import { ContactFieldEditor } from './src/live/ContactFieldEditor';
 
 import { ContactBadges } from './src/live/ContactBadges';
-import { ContactPending } from './src/live/ContactPending';
+import { ContactEvents } from './src/live/ContactEvents';
 import { TembaSlider } from './src/form/TembaSlider';
 import { RunList } from './src/list/RunList';
 import { FlowStoreElement } from './src/store/FlowStoreElement';
@@ -48,6 +48,7 @@ import { Resizer } from './src/layout/Resizer';
 import { Thumbnail } from './src/display/Thumbnail';
 import { NotificationList } from './src/list/NotificationList';
 import { ContentList } from './src/list/ContentList';
+import { PageHeader } from './src/layout/PageHeader';
 import { MsgList } from './src/list/MsgList';
 import { ContactList } from './src/list/ContactList';
 import { FlowList } from './src/list/FlowList';
@@ -132,6 +133,7 @@ addCustomElement('temba-contact-details', ContactDetails);
 addCustomElement('temba-ticket-list', TicketList);
 addCustomElement('temba-notification-list', NotificationList);
 addCustomElement('temba-content-list', ContentList);
+addCustomElement('temba-page-header', PageHeader);
 addCustomElement('temba-msg-list', MsgList);
 addCustomElement('temba-contact-list', ContactList);
 addCustomElement('temba-flow-list', FlowList);
@@ -147,7 +149,7 @@ addCustomElement('temba-dropdown', Dropdown);
 addCustomElement('temba-tabs', TabPane);
 addCustomElement('temba-tab', Tab);
 addCustomElement('temba-contact-badges', ContactBadges);
-addCustomElement('temba-contact-pending', ContactPending);
+addCustomElement('temba-contact-events', ContactEvents);
 addCustomElement('temba-slider', TembaSlider);
 addCustomElement('temba-content-menu', ContentMenu);
 addCustomElement('temba-compose', Compose);

package/web-dev-server.config.mjs

@@ -291,6 +291,15 @@ function applyDemoListAction(body, items, labels, idKey) {
 
 export default {
   nodeResolve: true,
+  middleware: [
+    // Permissive CORS so this dev server can be loaded as a cross-origin
+    // module source by a rapidpro instance running on a different localhost
+    // port (e.g. Nautilus/run-pair.sh launching rapidpro:8001 + components:3011).
+    (ctx, next) => {
+      ctx.set('Access-Control-Allow-Origin', '*');
+      return next();
+    },
+  ],
   plugins: [
     replacePlugin({
       preventAssignment: true,

package/src/live/ContactPending.ts

@@ -1,247 +0,0 @@
-import { css, html, PropertyValueMap, TemplateResult } from 'lit';
-import { property } from 'lit/decorators.js';
-import {
-  CustomEventType,
-  ScheduledEvent,
-  ScheduledEventType
-} from '../interfaces';
-import { EndpointMonitorElement } from '../store/EndpointMonitorElement';
-import { Icon } from '../Icons';
-
-const ICONS = {
-  [ScheduledEventType.CampaignEvent]: Icon.campaign,
-  [ScheduledEventType.ScheduledBroadcast]: Icon.message,
-  [ScheduledEventType.ScheduledTrigger]: Icon.trigger
-};
-
-export class ContactPending extends EndpointMonitorElement {
-  @property({ type: String })
-  contact: string;
-
-  @property({ type: Object, attribute: false })
-  data: ScheduledEvent[];
-
-  @property({ type: String })
-  lang_weekly = 'Weekly';
-
-  @property({ type: String })
-  lang_daily = 'Daily';
-
-  @property({ type: String })
-  lang_once = 'Once';
-
-  REPEAT_PERIOD = {
-    O: this.lang_once,
-    D: this.lang_daily,
-    W: this.lang_weekly
-  };
-
-  static get styles() {
-    return css`
-      :host {
-      }
-
-      a,
-      .linked {
-        color: var(--color-link-primary);
-        cursor: pointer;
-      }
-
-      a:hover,
-      .linked:hover {
-        text-decoration: underline;
-        color: var(--color-link-primary-hover);
-      }
-
-      .type {
-        background: rgba(0, 0, 0, 0.02);
-        padding: 1em;
-        display: flex;
-        align-self: stretch;
-        --icon-color: rgba(50, 50, 50, 0.25);
-        border-top-left-radius: var(--curvature);
-        border-bottom-left-radius: var(--curvature);
-      }
-
-      .details {
-        display: flex;
-        flex-direction: column;
-        padding: 0.5em 1em;
-        flex-grow: 1;
-      }
-
-      .campaign {
-        display: flex;
-        color: var(--text-color);
-        --icon-color: var(--text-color);
-        align-self: center;
-        white-space: nowrap;
-      }
-
-      .message {
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        padding: 0.1em;
-      }
-
-      .event {
-        margin-bottom: 0.5em;
-        border-radius: var(--curvature);
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        background: var(--surface);
-        box-shadow:
-          0 0 8px 1px rgba(0, 0, 0, 0.055),
-          0 0 0px 1px rgba(0, 0, 0, 0.02);
-      }
-
-      .event:hover {
-        cursor: pointer;
-        box-shadow:
-          0 0 8px 1px rgba(0, 0, 0, 0.055),
-          0 0 0px 2px var(--color-link-primary);
-      }
-
-      .time {
-        white-space: nowrap;
-        background: rgba(0, 0, 0, 0.02);
-        border-top-right-radius: var(--curvature);
-        border-bottom-right-radius: var(--curvature);
-        display: flex;
-        align-self: stretch;
-        padding: 0 1em;
-        min-width: 5em;
-      }
-
-      .duration {
-        align-self: center;
-        flex-grow: 1;
-        text-align: center;
-      }
-
-      .flow {
-        display: inline-block;
-      }
-
-      temba-tip {
-        cursor: default;
-      }
-
-      .scheduled-by {
-        font-size: 0.85em;
-        display: flex;
-        color: var(--text-color);
-        --icon-color: var(--text-color);
-      }
-
-      .scheduled-by temba-icon {
-        margin-right: 0.25em;
-      }
-
-      .scheduled-by .name {
-        flex-grow: 1;
-      }
-    `;
-  }
-
-  constructor() {
-    super();
-    this.handleEventClicked = this.handleEventClicked.bind(this);
-  }
-
-  protected updated(
-    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
-  ): void {
-    super.updated(changes);
-    if (changes.has('contact')) {
-      if (this.contact) {
-        this.url = `/contact/scheduled/${this.contact}/`;
-      } else {
-        this.url = null;
-      }
-    }
-
-    if (changes.has('data')) {
-      this.fireCustomEvent(CustomEventType.DetailsChanged, {
-        count: this.data.length
-      });
-    }
-  }
-
-  public handleEventClicked(event: ScheduledEvent) {
-    this.fireCustomEvent(CustomEventType.Selection, event);
-  }
-
-  public renderEvent(scheduledEvent: ScheduledEvent) {
-    return html`
-      <div
-        class="event ${scheduledEvent.type}"
-        @click="${() => this.handleEventClicked(scheduledEvent)}"
-      >
-        <div class="type">
-          <temba-icon
-            size="2"
-            name="${scheduledEvent.message ? Icon.message : Icon.flow}"
-          ></temba-icon>
-        </div>
-
-        <div class="details">
-          <div>
-            ${scheduledEvent.flow
-              ? html` Start ${scheduledEvent.flow.name}`
-              : null}
-            ${scheduledEvent.message
-              ? html` <div class="message">${scheduledEvent.message}</div> `
-              : null}
-          </div>
-
-          <div class="scheduled-by">
-            ${scheduledEvent.campaign
-              ? html`<div style="display:flex">
-                  <temba-icon name="${Icon.campaign}"></temba-icon>
-                  <div class="name">${scheduledEvent.campaign.name}</div>
-                </div>`
-              : html`
-                  ${scheduledEvent.type === ScheduledEventType.ScheduledTrigger
-                    ? html`<temba-icon
-                        name="${ICONS[scheduledEvent.type]}"
-                      ></temba-icon>`
-                    : null}
-                  <div class="name">
-                    ${this.REPEAT_PERIOD[scheduledEvent.repeat_period]}
-                  </div>
-                `}
-          </div>
-        </div>
-
-        <div class="time">
-          <div class="duration">
-            <temba-tip
-              text=${this.store.formatDate(scheduledEvent.scheduled)}
-              position="left"
-            >
-              ${this.store.getShortDurationFromIso(scheduledEvent.scheduled)}
-            </temba-tip>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  public render(): TemplateResult {
-    if (this.data) {
-      if (this.data.length > 0) {
-        return html`
-          ${this.data.map((event) => {
-            return this.renderEvent(event);
-          })}
-        `;
-      } else {
-        return html`<slot name="empty"></slot>`;
-      }
-    }
-  }
-}