@nyaruka/temba-components 0.46.0 → 0.47.0

package/src/contacts/ContactFieldEditor.ts

@@ -5,6 +5,7 @@ import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { TextInput } from '../textinput/TextInput';
 import { Icon } from '../vectoricon';
+import { getClasses } from '../utils';
 
 export class ContactFieldEditor extends RapidElement {
   @property({ type: String })
@@ -28,37 +29,43 @@ export class ContactFieldEditor extends RapidElement {
   @property({ type: String })
   iconClass = '';
 
+  @property({ type: Boolean })
+  disabled = false;
+
   static get styles() {
     return css`
       .wrapper {
         --widget-box-shadow: none;
+        --temba-textinput-padding: 1.4em 0.8em 0.4em 0.8em;
+        --disabled-opacity: 1;
+        position: relative;
       }
 
       .prefix {
-        background: rgba(0, 0, 0, 0.05);
         border-top-left-radius: var(--curvature-widget);
         border-bottom-left-radius: var(--curvature-widget);
         color: #888;
         cursor: pointer;
-        width: 200px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         display: flex;
         padding: 0em 0.5em;
+        position: absolute;
+        margin-top: 0.2em;
       }
 
       .wrapper {
-        margin-bottom: -1px;
+        margin-bottom: 0.5em;
       }
 
       .prefix .name {
-        padding: 0.5em 0em;
-        color: #888;
-        width: 200px;
+        padding: 0em 0.4em;
+        color: #999;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        font-size: 0.8em;
       }
 
       .postfix {
@@ -104,6 +111,16 @@ export class ContactFieldEditor extends RapidElement {
         transform: scale(1);
       }
 
+      .disabled temba-textinput .postfix {
+        display: none;
+      }
+
+      .disabled {
+        --color-widget-border: transparent;
+        padding-bottom: 0.4em;
+        border-bottom: 1px solid #e6e6e6;
+      }
+
       .unset temba-textinput:focus .popper,
       .unset temba-textinput:hover .popper {
         opacity: 0;
@@ -122,7 +139,6 @@ export class ContactFieldEditor extends RapidElement {
       }
 
       temba-datepicker {
-        --curvature: 0px;
         position: relative;
       }
     `;
@@ -186,13 +202,21 @@ export class ContactFieldEditor extends RapidElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="wrapper ${this.value ? 'set' : 'unset'}">
+      <div
+        class=${getClasses({
+          wrapper: true,
+          set: !!this.value,
+          unset: !this.value,
+          disabled: this.disabled,
+        })}
+      >
         ${this.type === 'datetime'
           ? html`
               <temba-datepicker
                 timezone=${this.timezone}
                 value="${this.value ? this.value : ''}"
                 @change=${this.handleSubmit}
+                ?disabled=${this.disabled}
                 time
               >
                 <div class="prefix" slot="prefix">
@@ -206,6 +230,7 @@ export class ContactFieldEditor extends RapidElement {
                 @blur=${this.handleSubmit}
                 @keydown=${this.handleInput}
                 @change=${this.handleChange}
+                ?disabled=${this.disabled}
               >
                 <div class="prefix" slot="prefix">
                   <div class="name">${this.name}</div>

package/src/contacts/ContactFields.ts

@@ -1,6 +1,6 @@
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import { postJSON } from '../utils';
+import { getClasses, postJSON } from '../utils';
 import { ContactFieldEditor } from './ContactFieldEditor';
 import { ContactStoreElement } from './ContactStoreElement';
 import { Checkbox } from '../checkbox/Checkbox';
@@ -11,11 +11,9 @@ export class ContactFields extends ContactStoreElement {
   static get styles() {
     return css`
       :host {
-        --curvature-widget: 0px;
       }
 
       .fields {
-        box-shadow: var(--widget-box-shadow);
       }
 
       .field {
@@ -66,12 +64,15 @@ export class ContactFields extends ContactStoreElement {
       temba-contact-field {
       }
 
-      .footer {
-        margin-bottom: 0;
+      .toggle {
         display: flex;
         background: #fff;
         align-items: center;
-        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+      }
+
+      .disabled .toggle {
+        display: none;
       }
     `;
   }
@@ -91,6 +92,9 @@ export class ContactFields extends ContactStoreElement {
   @property({ type: String })
   timezone: string;
 
+  @property({ type: Boolean })
+  disabled = false;
+
   connectedCallback(): void {
     super.connectedCallback();
     this.handleFieldChanged = this.handleFieldChanged.bind(this);
@@ -160,27 +164,32 @@ export class ContactFields extends ContactStoreElement {
           type=${field.value_type}
           @change=${this.handleFieldChanged}
           timezone=${this.timezone}
+          ?disabled=${this.disabled}
         ></temba-contact-field>`;
       });
 
       return html`
-        <div class="fields ${this.showAll || this.featured ? 'show-all' : ''}">
-          ${fields}
+        <div class=${getClasses({ disabled: this.disabled })}>
+          ${!this.featured &&
+          Object.keys(this.data.fields).length >= MIN_FOR_FILTER
+            ? html`<div class="toggle">
+                <div style="flex-grow: 1"></div>
+                <div>
+                  <temba-checkbox
+                    ?checked=${this.showAll}
+                    @change=${this.handleToggle}
+                    label="Show All"
+                  />
+                </div>
+              </div>`
+            : null}
+
+          <div
+            class="fields ${this.showAll || this.featured ? 'show-all' : ''}"
+          >
+            ${fields}
+          </div>
         </div>
-
-        ${!this.featured &&
-        Object.keys(this.data.fields).length >= MIN_FOR_FILTER
-          ? html`<div class="footer">
-              <div style="flex-grow: 1"></div>
-              <div>
-                <temba-checkbox
-                  ?checked=${this.showAll}
-                  @change=${this.handleToggle}
-                  label="Show All"
-                />
-              </div>
-            </div>`
-          : null}
       `;
     }
 

package/src/datepicker/DatePicker.ts

@@ -17,11 +17,13 @@ export default class DatePicker extends FormElement {
         display: flex;
         cursor: pointer;
         box-shadow: var(--widget-box-shadow);
+        flex-wrap: wrap;
+        overflow: hidden;
       }
 
       .input-wrapper {
         padding: var(--temba-textinput-padding);
-        flex-grow: 1;
+        flex-grow: 20;
       }
 
       .tz {
@@ -36,7 +38,7 @@ export default class DatePicker extends FormElement {
         padding: 0em 1em;
         font-weight: 400;
         cursor: pointer;
-        margin: auto;
+        margin: auto 0;
       }
 
       .tz .label {
@@ -53,11 +55,11 @@ export default class DatePicker extends FormElement {
 
       .tz-wrapper {
         background: #efefef;
-        border-top-right-radius: var(--curvature);
-        border-bottom-right-radius: var(--curvature);
         display: flex;
         flex-direction: row;
         align-items: center;
+        flex-grow: 1;
+        padding: 0.4em 0em;
       }
 
       .container:focus-within {
@@ -91,6 +93,14 @@ export default class DatePicker extends FormElement {
         outline: none;
       }
 
+      .disabled ::-webkit-calendar-picker-indicator {
+        display: none;
+      }
+
+      .disabled .tz-wrapper {
+        border-radius: var(--curvature);
+      }
+
       ::-webkit-calendar-picker-indicator {
         background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23bbbbbb" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
         cursor: pointer;
@@ -202,6 +212,7 @@ export default class DatePicker extends FormElement {
 
     return html`
       <temba-field
+        class=${getClasses({ disabled: this.disabled })}
         name=${this.name}
         .label="${this.label}"
         .helpText="${this.helpText}"

package/src/formfield/FormField.ts

@@ -58,7 +58,7 @@ export class FormField extends LitElement {
       }
 
       .disabled {
-        opacity: 0.6 !important;
+        opacity: var(--disabled-opacity) !important;
         pointer-events: none !important;
       }
     `;

package/src/list/TembaList.ts

@@ -138,7 +138,7 @@ export class TembaList extends RapidElement {
       this.refreshTop();
     }
 
-    if (changedProperties.has('mostRecentItem')) {
+    if (changedProperties.has('mostRecentItem') && this.mostRecentItem) {
       this.fireCustomEvent(CustomEventType.Refreshed);
     }
 

package/static/css/temba-components.css

@@ -23,7 +23,8 @@
     --selection-dark-rgb: 180, 180, 180;
   
     --select-input-height: inherit;
-  
+
+    --disabled-opacity: 0.6;
     --curvature: 6px;
     --curvature-widget: 6px;
     --color-focus: #a4cafe;