@nyaruka/temba-components 0.63.2 → 0.64.0

package/src/contacts/events.ts

@@ -1230,11 +1230,11 @@ export const renderChannelEvent = (event: ChannelEvent): TemplateResult => {
     eventMessage = 'Incoming Phone call';
   } else if (event.event.type == 'optin') {
     eventMessage = html`Opted in to
-      <span class="attn">${event.event.optin.name}</span>`;
+      <span class="attn">${event.event.optin?.name}</span>`;
     icon = Icon.optin;
   } else if (event.event.type == 'optout') {
     eventMessage = html`Opted out of
-      <span class="attn">${event.event.optin.name}</span>`;
+      <span class="attn">${event.event.optin?.name}</span>`;
     icon = Icon.optout;
   }
 

package/src/select/Select.ts

@@ -516,7 +516,14 @@ export class Select extends FormElement {
 
     if (changedProperties.has('values')) {
       this.updateInputs();
-      if (this.multi || this.values.length === 1) {
+      if (
+        this.multi ||
+        this.values.length === 1 ||
+        // fire change if being cleared
+        (this.values.length == 0 &&
+          changedProperties.get('values') &&
+          changedProperties.get('values').length > 0)
+      ) {
         this.fireEvent('change');
       }
     }

package/src/tabpane/Tab.ts

@@ -49,6 +49,9 @@ export class Tab extends RapidElement {
   @property({ type: Number })
   count = 0;
 
+  @property({ type: Boolean })
+  checked = false;
+
   public hasBadge() {
     return this.count > 0;
   }

package/src/tabpane/TabPane.ts

@@ -56,7 +56,6 @@ export class TabPane extends RapidElement {
       .tab .name {
         margin-left: 0.4em;
         max-width: 80px;
-        margin-right: 0.4em;
         overflow: hidden;
         transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;
         white-space: nowrap;
@@ -93,7 +92,6 @@ export class TabPane extends RapidElement {
       .focusedname .tab.selected .name {
         margin-left: 0.4em;
         max-width: 200px;
-        margin-right: 0.4em;
       }
 
       .tab {
@@ -194,6 +192,10 @@ export class TabPane extends RapidElement {
       .embedded.pane {
         // padding: 0.3em;
       }
+
+      .check {
+        margin-left: 0.4em;
+      }
     `;
   }
 
@@ -338,6 +340,9 @@ export class TabPane extends RapidElement {
                     </div>
                   `
                 : null}
+              ${tab.checked
+                ? html`<temba-icon class="check" name="check"></temba-icon>`
+                : null}
             </div>
           `
         )}

package/src/vectoricon/index.ts

@@ -1,5 +1,5 @@
 // for cache busting we dynamically generate a fingerprint, use yarn svg to update
-export const SVG_FINGERPRINT = '8dab8ee62610a33e1b9643402301d455';
+export const SVG_FINGERPRINT = 'fb06525f01e92b0e6e6a0d726d7c1177';
 
 // only icons below are included in the sprite sheet
 export enum Icon {
@@ -184,7 +184,7 @@ export enum Icon {
   trigger_inbound_call = 'phone-incoming-01',
   trigger_missed_call = 'phone-hang-up',
   trigger_schedule = 'calendar',
-  trigger_new_conversation = 'conversation',
+  trigger_new_conversation = 'message-chat-square',
   trigger_referral = 'user-right-01',
   trigger_closed_ticket = 'agent',
   trigger_opt_in = 'message-check-circle',