@nyaruka/temba-components 0.102.2 → 0.104.0

package/src/tabpane/TabPane.ts

@@ -26,12 +26,14 @@ export class TabPane extends RapidElement {
         margin: 0em 0em;
         cursor: pointer;
         display: flex;
-        font-size: 1.01em;
+        font-size: 1.1em;
         align-items: center;
+        border: 1px inset transparent;
+        border-bottom: 0px;
         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);
         white-space: nowrap;
@@ -95,9 +97,9 @@ export class TabPane extends RapidElement {
       }
 
       .tab {
-        transform: scale(0.9) translate(0em, -0.05em);
-        --icon-color: #aaa;
-        color: #aaa;
+        transform: scale(0.9) translateY(0em);
+        --icon-color: rgba(0, 0, 0, 0.5);
+        color: rgba(0, 0, 0, 0.5);
       }
 
       .tab.selected {
@@ -107,10 +109,22 @@ export class TabPane extends RapidElement {
       .tab.selected:hover {
         cursor: default;
         box-shadow: 0px -3px 3px 1px rgba(0, 0, 0, 0.02);
+
         background: var(--focused-tab-color, #fff);
-        transform: scale(1) translateY(0em);
+        transform: scale(1) translateY(1px);
         --icon-color: #666;
         color: #666;
+        border: 1px inset rgba(0, 0, 0, 0.15);
+        border-bottom: 0px;
+      }
+
+      .embedded .tab.selected {
+        border: none;
+        transform: none;
+      }
+
+      .tab.selected .dot {
+        display: none;
       }
 
       .bottom .tab.selected {
@@ -130,6 +144,10 @@ export class TabPane extends RapidElement {
         background: rgba(0, 0, 0, 0.02);
       }
 
+      .tab.dirty {
+        font-weight: 500;
+      }
+
       .pane {
         display: flex;
         flex-direction: column;
@@ -154,15 +172,22 @@ export class TabPane extends RapidElement {
 
       .count {
         border-radius: 99px;
-        background: rgba(0, 0, 0, 0.05);
+        background: rgba(0, 0, 0, 0.1);
         color: rgba(0, 0, 0, 0.5);
-        font-size: 0.6em;
-        font-weight: 400;
-        padding: 0.1em 0.4em;
-        min-width: 1em;
+        font-size: 0.7em;
+        font-weight: 500;
+        min-width: 1.5em;
         text-align: center;
       }
 
+      .dot {
+        height: 0.5em;
+        width: 0.5em;
+        margin-left: 0.2em;
+        background: var(--color-primary-dark);
+        border-radius: 99px;
+      }
+
       .notify .count {
         background: var(--color-alert);
         color: #fff;
@@ -336,7 +361,12 @@ export class TabPane extends RapidElement {
     this.requestUpdate();
   }
 
+  public handleTabDetailsChanged() {
+    this.requestUpdate();
+  }
+
   public render(): TemplateResult {
+    const activeTab = this.tabs[this.index];
     return html`
       ${this.bottom
         ? html`<div
@@ -371,7 +401,8 @@ export class TabPane extends RapidElement {
                 selected: index == this.index,
                 hidden: tab.hidden,
                 notify: tab.notify,
-                alert: tab.alert
+                alert: tab.alert,
+                dirty: tab.dirty
               })}"
               style="${tab.selectionColor && index == this.index
                 ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`
@@ -380,15 +411,21 @@ export class TabPane extends RapidElement {
                 : ''}"
             >
               ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}
-              <div class="name">${tab.name}</div>
+              <div class="name">${tab.name} ${tab.dirty ? ` *` : ``}</div>
               ${tab.hasBadge()
                 ? html`
                     <div class="badge">
-                      ${tab.count > 0
+                      ${tab.count > 0 && !tab.activity
                         ? html`<div class="count">
-                            ${tab.count.toLocaleString()}
+                            ${tab.activity ? '' : tab.count.toLocaleString()}
                           </div>`
                         : null}
+                      ${tab.activity && tab.count > 0 && !tab.dirty
+                        ? html`<div
+                            class="dot"
+                            style="background:${tab.activityColor}"
+                          ></div>`
+                        : null}
                     </div>
                   `
                 : null}
@@ -406,6 +443,8 @@ export class TabPane extends RapidElement {
       </div>
       ${!this.bottom
         ? html`<div
+            @temba-details-changed=${this.handleTabDetailsChanged}
+            style="border: 1px solid ${activeTab?.borderColor};background:${activeTab?.selectionBackground}"
             class="pane ${getClasses({
               first: this.index == 0,
               embedded: this.embedded,

package/src/vectoricon/index.ts

@@ -108,6 +108,7 @@ export enum Icon {
   missed_call = 'phone-x',
   new = 'plus',
   next_schedule = 'alarm-clock',
+  notes = 'edit-03',
   notification = 'bell-01',
   number = 'hash-01',
   optin_requested = 'message-notification-circle',

package/temba-modules.ts

@@ -57,6 +57,7 @@ import { TemplateEditor } from './src/templates/TemplateEditor';
 import { Toast } from './src/toast/Toast';
 import { Chat } from './src/chat/Chat';
 import { MediaPicker } from './src/mediapicker/MediaPicker';
+import { ContactNotepad } from './src/contacts/ContactNotepad';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -124,3 +125,4 @@ addCustomElement('temba-template-editor', TemplateEditor);
 addCustomElement('temba-toast', Toast);
 addCustomElement('temba-chat', Chat);
 addCustomElement('temba-media-picker', MediaPicker);
+addCustomElement('temba-contact-notepad', ContactNotepad);

package/out-tsc/src/store/StoreElement.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StoreElement.js","sourceRoot":"","sources":["../../../src/store/StoreElement.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;;GAGG;AACH,MAAM,OAAO,YAAa,SAAQ,mBAAmB;IAArD;;QAKE,gBAAW,GAAG,KAAK,CAAC;IA8CtB,CAAC;IAvCC,WAAW,CAAC,IAAS;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,OAAO;QACZ,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE;YAC/B,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,KAAK,EAAE,IAAI;SACZ,CAAC,CAAC;IACL,CAAC;IAES,YAAY,CAAC,KAAkB;QACvC,IAAI,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,EAAE,CAAC;YAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;YAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;YAC9B,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,SAAS,EAAE;gBAC9C,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;gBACvB,QAAQ;aACT,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAES,OAAO,CACf,UAA6D;QAE7D,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAC1B,IAAI,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1B,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;gBACb,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;YACtE,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACnB,CAAC;QACH,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,CAAC;CACF;AAjDC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACR;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0CACnC","sourcesContent":["import { PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\n\nimport { Store } from './Store';\nimport { StoreMonitorElement } from './StoreMonitorElement';\n\n/**\n * StoreElement is a listener for a given endpoint that re-renders\n * when the underlying store element changes\n */\nexport class StoreElement extends StoreMonitorElement {\n  @property({ type: String })\n  url: string;\n\n  @property({ type: Boolean })\n  showLoading = false;\n\n  @property({ type: Object, attribute: false })\n  data: any;\n\n  store: Store;\n\n  prepareData(data: any): any {\n    return data;\n  }\n\n  public refresh() {\n    this.store.makeRequest(this.url, {\n      prepareData: this.prepareData,\n      force: true\n    });\n  }\n\n  protected storeUpdated(event: CustomEvent) {\n    if (event.detail.url === this.url) {\n      const previous = this.data;\n      this.data = event.detail.data;\n      this.fireCustomEvent(CustomEventType.Refreshed, {\n        data: event.detail.data,\n        previous\n      });\n    }\n  }\n\n  protected updated(\n    properties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(properties);\n    if (properties.has('url')) {\n      if (this.url) {\n        this.store.makeRequest(this.url, { prepareData: this.prepareData });\n      } else {\n        this.data = null;\n      }\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.prepareData = this.prepareData.bind(this);\n  }\n}\n"]}