@nyaruka/temba-components 0.25.2 → 0.26.2

package/src/FormElement.ts

@@ -1,5 +1,5 @@
 import { RapidElement } from './RapidElement';
-import { property } from 'lit-element';
+import { property } from 'lit/decorators';
 
 /**
  * FormElement is a component that appends a hidden input (outside of

package/src/RapidElement.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 import { CustomEventType } from './interfaces';
 
 export interface EventHandler {

package/src/alert/Alert.ts

@@ -1,4 +1,5 @@
-import { css, html, LitElement, property, TemplateResult } from 'lit-element';
+import { css, html, LitElement, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
 
 export class Alert extends LitElement {
   static get styles() {
@@ -9,11 +10,10 @@ export class Alert extends LitElement {
 
       .temba-alert {
         color: rgba(0, 0, 0, 0.8);
-        padding: 0.65em 1em;
+        padding: 0.65rem 1rem;
         border: 1px solid rgba(0, 0, 0, 0.35);
         border-left: 10px solid rgba(0, 0, 0, 0.35);
         border-radius: var(--curvature-widget);
-        font-size: 14px;
         box-shadow: var(--shadow);
       }
 

package/src/aliaseditor/AliasEditor.ts

@@ -1,11 +1,12 @@
-/* eslint-disable @typescript-eslint/camelcase */
-import { css, html, LitElement, property, TemplateResult } from 'lit-element';
+import { css, html, LitElement, TemplateResult } from 'lit';
 import { FeatureProperties } from '../interfaces';
 import { getUrl, postJSON, WebResponse } from '../utils';
 import { TextInput } from '../textinput/TextInput';
 import { styleMap } from 'lit-html/directives/style-map';
 import { FormElement } from '../FormElement';
 
+import { property } from 'lit/decorators';
+
 export class AliasEditor extends LitElement {
   static get styles() {
     return css`
@@ -258,7 +259,7 @@ export class AliasEditor extends LitElement {
                       evt.stopPropagation();
                     }}
                   >
-                    <temba-icon name="edit" path-prefix="/sitestatic" />
+                    <temba-icon name="edit" />
                   </div>
                 `
               : ''}

package/src/anchor/Anchor.ts

@@ -1,4 +1,5 @@
-import { LitElement, TemplateResult, html, css, property } from 'lit-element';
+import { LitElement, TemplateResult, html, css } from 'lit';
+import { property } from 'lit/decorators';
 
 export class Anchor extends LitElement {
   static get styles() {

package/src/button/Button.ts

@@ -1,6 +1,8 @@
-import { LitElement, TemplateResult, html, css, property } from 'lit-element';
+import { LitElement, TemplateResult, html, css } from 'lit';
 import { getClasses } from '../utils';
 
+import { property } from 'lit/decorators';
+
 export class Button extends LitElement {
   static get styles() {
     return css`

package/src/charcount/CharCount.ts

@@ -1,7 +1,8 @@
-import { css, html, property, TemplateResult } from 'lit-element';
+import { css, html, TemplateResult } from 'lit';
 import { RapidElement } from '../RapidElement';
 import { splitSMS } from '../sms';
 import { getExtendedCharacters } from './helpers';
+import { property } from 'lit/decorators';
 
 export class CharCount extends RapidElement {
   static get styles() {

package/src/checkbox/Checkbox.ts

@@ -1,5 +1,6 @@
-import { TemplateResult, html, css, property } from 'lit-element';
+import { TemplateResult, html, css } from 'lit';
 import { FormElement } from '../FormElement';
+import { property } from 'lit/decorators';
 
 export class Checkbox extends FormElement {
   static get styles() {
@@ -96,6 +97,7 @@ export class Checkbox extends FormElement {
 
   public click(): void {
     this.handleClick();
+    super.click();
   }
 
   public render(): TemplateResult {

package/src/completion/Completion.ts

@@ -1,4 +1,5 @@
-import { TemplateResult, css, property, html } from 'lit-element';
+import { TemplateResult, css, html } from 'lit';
+import { property } from 'lit/decorators';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { TextInput } from '../textinput/TextInput';
 import {

package/src/completion/helpers.ts

@@ -1,5 +1,6 @@
-import { html, directive, Part, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'lit';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { directive, Directive, Part, PartInfo, PartType } from 'lit/directive';
 import ExcellentParser, { Expression } from './ExcellentParser';
 import {
   CompletionOption,
@@ -38,9 +39,34 @@ const sessionParser = new ExcellentParser('@', [
   'resume',
 ]);
 
-export const renderMarkdown = directive((contents: string) => (part: Part) => {
-  part.setValue(unsafeHTML(md.render(contents)));
-});
+// Class-based directive API
+export class RenderMarkdown extends Directive {
+  // State stored in class field
+  value: string | undefined;
+  constructor(partInfo: PartInfo) {
+    super(partInfo);
+    // When necessary, validate part in constructor using `part.type`
+    if (partInfo.type !== PartType.CHILD) {
+      throw new Error('renderMarkdown only supports child expressions');
+    }
+  }
+  // Optional: override update to perform any direct DOM manipulation
+  // DirectiveParameters<this>
+  update(part: Part, [initialValue]: any) {
+    /* Any imperative updates to DOM/parts would go here */
+    return this.render(initialValue);
+  }
+  // Do SSR-compatible rendering (arguments are passed from call site)
+  render(initialValue: string) {
+    // Previous state available on class field
+    if (this.value === undefined) {
+      this.value = initialValue;
+    }
+    return html`${unsafeHTML(md.render(this.value))}`;
+  }
+}
+
+export const renderMarkdown = directive(RenderMarkdown);
 
 export const renderCompletionOption = (
   option: CompletionOption,

package/src/contacts/ContactChat.ts

@@ -1,4 +1,5 @@
-import { css, html, property, TemplateResult } from 'lit-element';
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
 import { RapidElement } from '../RapidElement';
 import { Contact, CustomEventType, Ticket } from '../interfaces';
 import { COOKIE_KEYS, getCookieBoolean, postJSON, setCookie } from '../utils';
@@ -13,35 +14,36 @@ const DEFAULT_REFRESH = 10000;
 export class ContactChat extends RapidElement {
   public static get styles() {
     return css`
-      :host {
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2),
-          0 1px 2px 0 rgba(0, 0, 0, 0.06);
-
-        height: 100%;
-        border-radius: var(--curvature);
-
-        flex-grow: 1;
-        width: 100%;
-        display: block;
-        background: #f2f2f2;
-        overflow: hidden;
-      }
-
       .left-pane {
         box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);
         transition: box-shadow 600ms linear;
       }
 
       .left-pane.open {
-        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0.15);
         z-index: 1000;
       }
 
+      :host {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: row;
+        min-height: 0;
+        border-radius: var(--curvature);
+      }
+
       .chat-wrapper {
         display: flex;
+        flex-grow: 1;
         flex-direction: column;
-        height: 100%;
         overflow: hidden;
+        min-height: 0;
+      }
+
+      temba-contact-history {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
       }
 
       .chatbox {
@@ -52,6 +54,11 @@ export class ContactChat extends RapidElement {
         flex-direction: column;
         z-index: 3;
         border-bottom-left-radius: var(--curvature);
+        border-bottom-right-radius: var(--curvature);
+      }
+
+      .chatbox.full {
+        border-bottom-right-radius: 0 !important;
       }
 
       .closed-footer {
@@ -175,6 +182,9 @@ export class ContactChat extends RapidElement {
   @property({ type: Boolean })
   showDetails = true;
 
+  @property({ type: Boolean })
+  toolbar = false;
+
   @property({ type: Boolean })
   monitor = false;
 
@@ -320,14 +330,13 @@ export class ContactChat extends RapidElement {
 
   public render(): TemplateResult {
     return html`
-      <div style="display: flex; height: 100%;">
-        <div
-          style="flex-grow: 1; margin-right: 0em;"
-          class="left-pane  ${this.showDetails ? 'open' : ''}"
-        >
-          <div class="chat-wrapper">
-            ${this.currentContact
-              ? html` <temba-contact-history
+      <div
+        style="flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;"
+        class="left-pane  ${this.showDetails ? 'open' : ''}"
+      >
+        <div class="chat-wrapper">
+          ${this.currentContact
+            ? html`<temba-contact-history
                     .uuid=${this.currentContact.uuid}
                     .contact=${this.currentContact}
                     .ticket=${
@@ -348,7 +357,9 @@ export class ContactChat extends RapidElement {
                             @click=${this.handleReopen}
                           ></temba-button>
                         </div>`
-                      : html` <div class="chatbox">
+                      : html` <div
+                          class="chatbox ${this.toolbar ? 'full' : ''}"
+                        >
                           <temba-completion
                             @change=${this.handleChatChange}
                             .value=${this.currentChat}
@@ -374,81 +385,88 @@ export class ContactChat extends RapidElement {
                         </div>`
                   }
                   </div>`
-              : null}
-          </div>
+            : null}
         </div>
-        ${this.currentContact
-          ? html`<temba-contact-details
-              style="z-index: 10"
-              class="${this.showDetails ? '' : 'hidden'}"
-              showGroups="true"
-              .visible=${this.showDetails}
-              .ticket=${this.currentTicket}
-              .contact=${this.currentContact}
-            ></temba-contact-details>`
-          : null}
+      </div>
+
+      ${this.toolbar
+        ? html`${
+            this.currentContact
+              ? html`<temba-contact-details
+                  style="z-index: 10"
+                  class="${this.showDetails ? '' : 'hidden'}"
+                  showGroups="true"
+                  .visible=${this.showDetails}
+                  .ticket=${this.currentTicket}
+                  .contact=${this.currentContact}
+                ></temba-contact-details>`
+              : null
+          }
 
         <div class="toolbar ${this.showDetails ? '' : 'closed'}">
-          ${this.currentContact
-            ? html`
-                <temba-tip
-                  style="margin-top:5px"
-                  text="${this.showDetails ? 'Hide Details' : 'Show Details'}"
-                  position="left"
-                  hideOnChange
-                >
-                  <temba-icon
-                    id="details-button"
-                    name="${this.showDetails ? 'chevrons-left' : 'sidebar'}"
-                    @click="${this.handleDetailSlider}"
-                    clickable
-                    animatechange="spin"
-                  ></temba-icon>
-                </temba-tip>
-
-                ${this.currentTicket
-                  ? html`<temba-tip
-                        style="margin-top:5px"
-                        text="Assign"
-                        position="left"
-                      >
-                        <temba-icon
-                          id="assign-button"
-                          name="user"
-                          @click="${() => {
-                            const modax = this.shadowRoot.getElementById(
-                              'assign-dialog'
-                            ) as Modax;
-                            modax.open = true;
-                          }}"
-                          clickable
-                        ></temba-icon>
-                      </temba-tip>
-                      <temba-tip
-                        style="margin-top:5px"
-                        text="Add Note"
-                        position="left"
-                      >
-                        <temba-icon
-                          id="add-note-button"
-                          name="edit"
-                          @click="${() => {
-                            const note = this.shadowRoot.getElementById(
-                              'note-dialog'
-                            ) as Modax;
-                            note.open = true;
-                          }}"
-                          clickable
-                        ></temba-icon>
-                      </temba-tip>`
-                  : null}
-              `
-            : null}
+          ${
+            this.currentContact
+              ? html`
+                  <temba-tip
+                    style="margin-top:5px"
+                    text="${this.showDetails ? 'Hide Details' : 'Show Details'}"
+                    position="left"
+                    hideOnChange
+                  >
+                    <temba-icon
+                      id="details-button"
+                      name="${this.showDetails ? 'chevrons-left' : 'sidebar'}"
+                      @click="${this.handleDetailSlider}"
+                      clickable
+                      animatechange="spin"
+                    ></temba-icon>
+                  </temba-tip>
+
+                  ${this.currentTicket
+                    ? html`<temba-tip
+                          style="margin-top:5px"
+                          text="Assign"
+                          position="left"
+                        >
+                          <temba-icon
+                            id="assign-button"
+                            name="user"
+                            @click="${() => {
+                              const modax = this.shadowRoot.getElementById(
+                                'assign-dialog'
+                              ) as Modax;
+                              modax.open = true;
+                            }}"
+                            clickable
+                          ></temba-icon>
+                        </temba-tip>
+                        <temba-tip
+                          style="margin-top:5px"
+                          text="Add Note"
+                          position="left"
+                        >
+                          <temba-icon
+                            id="add-note-button"
+                            name="edit"
+                            @click="${() => {
+                              const note = this.shadowRoot.getElementById(
+                                'note-dialog'
+                              ) as Modax;
+                              note.open = true;
+                            }}"
+                            clickable
+                          ></temba-icon>
+                        </temba-tip>`
+                    : null}
+                `
+              : null
+          }
         </div>
       </div>
 
-      ${this.currentTicket
-        ? html`<temba-modax
+      ${
+        this.currentTicket
+          ? html`<temba-modax
               header="Add Note"
               id="note-dialog"
               @temba-submitted=${this.refresh}
@@ -460,6 +478,8 @@ export class ContactChat extends RapidElement {
               @temba-submitted=${this.handleTicketAssigned}
               endpoint="/ticket/assign/${this.currentTicket.uuid}/"
             /></temba-modax>`
+          : null
+      }`
         : null}
     `;
   }

package/src/contacts/ContactDetails.ts

@@ -1,4 +1,5 @@
-import { css, html, property, TemplateResult } from 'lit-element';
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
 import { Contact, Group, Ticket } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { isDate, timeSince, truncate } from '../utils';