@nyaruka/temba-components 0.46.0 → 0.47.0

package/CHANGELOG.md

@@ -4,8 +4,14 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.47.0](https://github.com/nyaruka/temba-components/compare/v0.46.0...v0.47.0)
+
+- Add disabled option for contact field editing [`#299`](https://github.com/nyaruka/temba-components/pull/299)
+
 #### [v0.46.0](https://github.com/nyaruka/temba-components/compare/v0.45.0...v0.46.0)
 
+> 5 April 2023
+
 - Move tickets out of contact chat [`#298`](https://github.com/nyaruka/temba-components/pull/298)
 - Remove tickets from contact chat [`0eab01e`](https://github.com/nyaruka/temba-components/commit/0eab01e7df9a7e00ee4f857e17e279124fbb0e3f)
 - remove ticket tests from contact chat [`8d07356`](https://github.com/nyaruka/temba-components/commit/8d073563c85f47c0a9c40416bc08adf5ed73afbf)

package/dist/{041a136a.js → df04e47b.js}

@@ -1714,7 +1714,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       }
 
       .disabled {
-        opacity: 0.6 !important;
+        opacity: var(--disabled-opacity) !important;
         pointer-events: none !important;
       }
     `}render(){const t=this.hideErrors?[]:(this.errors||[]).map((t=>D` <div class="alert-error">${t}</div> `));return this.widgetOnly?D`
@@ -2824,7 +2824,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         width: 100%;
         flex-grow: 1;
       }
-    `}constructor(){super(),this.items=[],this.cursorIndex=-1,this.tabIndex=1,this.valueKey="id",this.loading=!1,this.paused=!1,this.refreshKey="0",this.reverseRefresh=!0,this.nextPage=null,this.pages=0,this.pending=[],this.refreshInterval=null,this.store=document.querySelector("temba-store"),this.handleSelection.bind(this)}reset(){this.selected=null,this.nextPage=null,this.cursorIndex=-1,this.mostRecentItem=null,this.items=[]}connectedCallback(){super.connectedCallback(),this.refreshInterval=setInterval((()=>{this.paused||(this.refreshKey="default_"+(new Date).getTime())}),1e4)}disconnectedCallback(){clearInterval(this.refreshInterval)}updated(t){super.updated(t),t.has("endpoint")&&this.endpoint&&(this.reset(),this.loading=!0,this.fetchItems()),t.has("loading")&&(this.loading||this.fireCustomEvent(_t.FetchComplete)),t.has("refreshKey")&&!t.has("endpoint")&&this.refreshTop(),t.has("mostRecentItem")&&this.fireCustomEvent(_t.Refreshed),t.has("cursorIndex")&&this.cursorIndex>-1&&(this.selected=this.items[this.cursorIndex],this.handleSelected(this.selected))}handleSelected(t){const e=new Event("change",{bubbles:!0});this.dispatchEvent(e)}getValue(t){if(!t)return null;const e=this.valueKey.split(".");let i=t;for(;e.length>0;){i=i[e.shift()]}return i}setSelection(t){const e=this.items.findIndex((e=>this.getValue(e)===t));this.cursorIndex=e,this.selected=this.items[e];const i=new Event("change",{bubbles:!0});this.dispatchEvent(i)}getItemIndex(t){return this.items.findIndex((e=>this.getValue(e)===t))}removeItem(t){const e=this.getItemIndex(t);this.items.splice(e,1),this.items=[...this.items],this.cursorIndex=Math.max(0,Math.min(this.items.length-1,this.cursorIndex-1)),this.requestUpdate("cursorIndex"),this.requestUpdate("items")}getSelection(){return this.selected}refresh(){this.refreshKey="requested_"+(new Date).getTime()}setEndpoint(t,e=null){this.endpoint=t,this.nextSelection=e}getRefreshEndpoint(){return this.endpoint}async refreshTop(){if(!this.getRefreshEndpoint())return;for(;this.pending.length>0;){this.pending.pop().abort()}const t=new AbortController;this.pending.push(t);const e=this.items[this.cursorIndex];try{const i=await ne(this.getRefreshEndpoint(),t),n=[...this.items];if(i.results){i.results.forEach((t=>{this.sanitizeOption&&this.sanitizeOption(t);const e=this.getValue(t),i=n.findIndex((t=>this.getValue(t)===e));i>-1&&n.splice(i,1)}));let t=i.results;this.reverseRefresh&&(t=i.results.reverse());const o=[...t,...n],s=o[0];if(this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(s)||(this.mostRecentItem=s),e){const t=o[this.cursorIndex],i=this.getValue(e);if(i!==this.getValue(t)){const t=o.findIndex((t=>this.getValue(t)===i));this.cursorIndex=t,window.setTimeout((()=>{const t=this.shadowRoot.querySelector("temba-options");if(t){t.shadowRoot.querySelector(".option.focused").scrollIntoView({block:"end",inline:"nearest"})}}),0)}}this.items=o}}catch(t){console.error(t)}}async fetchItems(){for(;this.pending.length>0;){this.pending.pop().abort()}let t=this.endpoint,e=this.pages||1,i=0,n=null,o=[];for(;e>0&&t;){const s=new AbortController;this.pending.push(s);try{const r=await ne(t,s);this.sanitizeOption&&r.results.forEach(this.sanitizeOption),r.results&&(o=o.concat(r.results)),n=r.next,t=n,e--,i++}catch(t){return this.reset(),void console.log(t)}this.nextPage=n}this.pages=i;const s=o[0];this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(s)||(this.mostRecentItem=s);const r=o[this.cursorIndex];if(!this.nextSelection&&this.selected&&r&&this.getValue(r)!==this.getValue(this.selected)){const t=o.findIndex((t=>this.getValue(t)===this.getValue(this.selected)));t>-1?this.cursorIndex=t:0===this.cursorIndex?this.requestUpdate("cursorIndex"):this.cursorIndex=0}return this.items=o,this.loading=!1,this.pending=[],this.nextSelection?(this.setSelection(this.nextSelection),this.nextSelection=!1):-1===this.cursorIndex&&(this.cursorIndex=0),this.value&&(this.setSelection(this.value),this.value=null),Promise.resolve()}handleScrollThreshold(){this.nextPage&&!this.loading&&(this.loading=!0,ne(this.nextPage).then((t=>{this.sanitizeOption&&t.results.forEach(this.sanitizeOption),this.items=[...this.items,...t.results],this.nextPage=t.next,this.pages++,this.loading=!1})))}renderHeader(){return null}renderFooter(){return null}getListStyle(){return""}handleSelection(t){const{selected:e,index:i}=t.detail;this.selected=e,this.cursorIndex=i,t.stopPropagation(),t.preventDefault()}render(){return D`
+    `}constructor(){super(),this.items=[],this.cursorIndex=-1,this.tabIndex=1,this.valueKey="id",this.loading=!1,this.paused=!1,this.refreshKey="0",this.reverseRefresh=!0,this.nextPage=null,this.pages=0,this.pending=[],this.refreshInterval=null,this.store=document.querySelector("temba-store"),this.handleSelection.bind(this)}reset(){this.selected=null,this.nextPage=null,this.cursorIndex=-1,this.mostRecentItem=null,this.items=[]}connectedCallback(){super.connectedCallback(),this.refreshInterval=setInterval((()=>{this.paused||(this.refreshKey="default_"+(new Date).getTime())}),1e4)}disconnectedCallback(){clearInterval(this.refreshInterval)}updated(t){super.updated(t),t.has("endpoint")&&this.endpoint&&(this.reset(),this.loading=!0,this.fetchItems()),t.has("loading")&&(this.loading||this.fireCustomEvent(_t.FetchComplete)),t.has("refreshKey")&&!t.has("endpoint")&&this.refreshTop(),t.has("mostRecentItem")&&this.mostRecentItem&&this.fireCustomEvent(_t.Refreshed),t.has("cursorIndex")&&this.cursorIndex>-1&&(this.selected=this.items[this.cursorIndex],this.handleSelected(this.selected))}handleSelected(t){const e=new Event("change",{bubbles:!0});this.dispatchEvent(e)}getValue(t){if(!t)return null;const e=this.valueKey.split(".");let i=t;for(;e.length>0;){i=i[e.shift()]}return i}setSelection(t){const e=this.items.findIndex((e=>this.getValue(e)===t));this.cursorIndex=e,this.selected=this.items[e];const i=new Event("change",{bubbles:!0});this.dispatchEvent(i)}getItemIndex(t){return this.items.findIndex((e=>this.getValue(e)===t))}removeItem(t){const e=this.getItemIndex(t);this.items.splice(e,1),this.items=[...this.items],this.cursorIndex=Math.max(0,Math.min(this.items.length-1,this.cursorIndex-1)),this.requestUpdate("cursorIndex"),this.requestUpdate("items")}getSelection(){return this.selected}refresh(){this.refreshKey="requested_"+(new Date).getTime()}setEndpoint(t,e=null){this.endpoint=t,this.nextSelection=e}getRefreshEndpoint(){return this.endpoint}async refreshTop(){if(!this.getRefreshEndpoint())return;for(;this.pending.length>0;){this.pending.pop().abort()}const t=new AbortController;this.pending.push(t);const e=this.items[this.cursorIndex];try{const i=await ne(this.getRefreshEndpoint(),t),n=[...this.items];if(i.results){i.results.forEach((t=>{this.sanitizeOption&&this.sanitizeOption(t);const e=this.getValue(t),i=n.findIndex((t=>this.getValue(t)===e));i>-1&&n.splice(i,1)}));let t=i.results;this.reverseRefresh&&(t=i.results.reverse());const o=[...t,...n],s=o[0];if(this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(s)||(this.mostRecentItem=s),e){const t=o[this.cursorIndex],i=this.getValue(e);if(i!==this.getValue(t)){const t=o.findIndex((t=>this.getValue(t)===i));this.cursorIndex=t,window.setTimeout((()=>{const t=this.shadowRoot.querySelector("temba-options");if(t){t.shadowRoot.querySelector(".option.focused").scrollIntoView({block:"end",inline:"nearest"})}}),0)}}this.items=o}}catch(t){console.error(t)}}async fetchItems(){for(;this.pending.length>0;){this.pending.pop().abort()}let t=this.endpoint,e=this.pages||1,i=0,n=null,o=[];for(;e>0&&t;){const s=new AbortController;this.pending.push(s);try{const r=await ne(t,s);this.sanitizeOption&&r.results.forEach(this.sanitizeOption),r.results&&(o=o.concat(r.results)),n=r.next,t=n,e--,i++}catch(t){return this.reset(),void console.log(t)}this.nextPage=n}this.pages=i;const s=o[0];this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(s)||(this.mostRecentItem=s);const r=o[this.cursorIndex];if(!this.nextSelection&&this.selected&&r&&this.getValue(r)!==this.getValue(this.selected)){const t=o.findIndex((t=>this.getValue(t)===this.getValue(this.selected)));t>-1?this.cursorIndex=t:0===this.cursorIndex?this.requestUpdate("cursorIndex"):this.cursorIndex=0}return this.items=o,this.loading=!1,this.pending=[],this.nextSelection?(this.setSelection(this.nextSelection),this.nextSelection=!1):-1===this.cursorIndex&&(this.cursorIndex=0),this.value&&(this.setSelection(this.value),this.value=null),Promise.resolve()}handleScrollThreshold(){this.nextPage&&!this.loading&&(this.loading=!0,ne(this.nextPage).then((t=>{this.sanitizeOption&&t.results.forEach(this.sanitizeOption),this.items=[...this.items,...t.results],this.nextPage=t.next,this.pages++,this.loading=!1})))}renderHeader(){return null}renderFooter(){return null}getListStyle(){return""}handleSelection(t){const{selected:e,index:i}=t.detail;this.selected=e,this.cursorIndex=i,t.stopPropagation(),t.preventDefault()}render(){return D`
       ${this.renderHeader()}
       <temba-options
         style="${this.getListStyle()}"
@@ -4477,13 +4477,11 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         height="${this.size}em"
         src="${this.prefix||window.static_url||"/static/"}img/schemes/${t}.svg"
       />
-    `}}t([st({type:String})],ul.prototype,"urn",void 0),t([st({type:String})],ul.prototype,"scheme",void 0),t([st({type:Number})],ul.prototype,"size",void 0);class pl extends Oa{static get styles(){return r`
+    `}}t([st({type:String})],ul.prototype,"urn",void 0),t([st({type:String})],ul.prototype,"scheme",void 0),t([st({type:Number})],ul.prototype,"size",void 0);class pl extends Oa{constructor(){super(...arguments),this.disabled=!1}static get styles(){return r`
       :host {
-        --curvature-widget: 0px;
       }
 
       .fields {
-        box-shadow: var(--widget-box-shadow);
       }
 
       .field {
@@ -4534,12 +4532,15 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       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;
       }
     `}connectedCallback(){super.connectedCallback(),this.handleFieldChanged=this.handleFieldChanged.bind(this)}updated(t){super.updated(t),t.has("data")&&Object.keys(this.data.fields).length<=10&&(this.showAll=!0)}handleFieldChanged(t){const e=t.currentTarget,i=e.value;le("/api/v2/contacts.json?uuid="+this.data.uuid,{fields:{[e.key]:i}}).then((t=>{this.setContact(t.json)}))}handleToggle(t){const e=t.currentTarget;this.showAll=e.checked}render(){if(this.data){const t=Object.entries(this.data.fields).filter((t=>this.featured&&this.store.getContactField(t[0]).featured||!this.featured&&!this.store.getContactField(t[0]).featured)).sort(((t,e)=>{const[i]=t,[n]=e,o=this.store.getContactField(n).priority-this.store.getContactField(i).priority;return 0!==o?o:i.localeCompare(n)}));if(0==t.length)return D`<slot name="empty"></slot>`;const e=t.map((t=>{const[e,i]=t,n=this.store.getContactField(e);return D`<temba-contact-field
           class=${i?"set":"unset"}
@@ -4549,51 +4550,59 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
           type=${n.value_type}
           @change=${this.handleFieldChanged}
           timezone=${this.timezone}
+          ?disabled=${this.disabled}
         ></temba-contact-field>`}));return D`
-        <div class="fields ${this.showAll||this.featured?"show-all":""}">
-          ${e}
-        </div>
+        <div class=${ie({disabled:this.disabled})}>
+          ${!this.featured&&Object.keys(this.data.fields).length>=10?D`<div class="toggle">
+                <div style="flex-grow: 1"></div>
+                <div>
+                  <temba-checkbox
+                    ?checked=${this.showAll}
+                    @change=${this.handleToggle}
+                    label="Show All"
+                  />
+                </div>
+              </div>`:null}
 
-        ${!this.featured&&Object.keys(this.data.fields).length>=10?D`<div class="footer">
-              <div style="flex-grow: 1"></div>
-              <div>
-                <temba-checkbox
-                  ?checked=${this.showAll}
-                  @change=${this.handleToggle}
-                  label="Show All"
-                />
-              </div>
-            </div>`:null}
-      `}return super.render()}}t([st({type:Boolean})],pl.prototype,"featured",void 0),t([st({type:Boolean})],pl.prototype,"system",void 0),t([st({type:Boolean})],pl.prototype,"dirty",void 0),t([st({type:Boolean})],pl.prototype,"showAll",void 0),t([st({type:String})],pl.prototype,"timezone",void 0);class ml extends nt{constructor(){super(...arguments),this.icon=navigator.clipboard?at.copy:"",this.iconClass=""}static get styles(){return r`
+          <div
+            class="fields ${this.showAll||this.featured?"show-all":""}"
+          >
+            ${e}
+          </div>
+        </div>
+      `}return super.render()}}t([st({type:Boolean})],pl.prototype,"featured",void 0),t([st({type:Boolean})],pl.prototype,"system",void 0),t([st({type:Boolean})],pl.prototype,"dirty",void 0),t([st({type:Boolean})],pl.prototype,"showAll",void 0),t([st({type:String})],pl.prototype,"timezone",void 0),t([st({type:Boolean})],pl.prototype,"disabled",void 0);class ml extends nt{constructor(){super(...arguments),this.icon=navigator.clipboard?at.copy:"",this.iconClass="",this.disabled=!1}static get styles(){return r`
       .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 {
@@ -4639,6 +4648,16 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         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;
@@ -4657,16 +4676,18 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       }
 
       temba-datepicker {
-        --curvature: 0px;
         position: relative;
       }
     `}connectedCallback(){super.connectedCallback(),this.handleInput=this.handleInput.bind(this),this.handleSubmit=this.handleSubmit.bind(this)}handleIconClick(t){const e=t.target.getAttribute("icon-action"),i=this.shadowRoot.querySelector("temba-textinput");"copy"===e&&navigator.clipboard&&(this.iconClass="clicked",navigator.clipboard.writeText(i.getDisplayValue()).then((()=>{window.setTimeout((()=>{this.iconClass=""}),300)}))),"search"===e&&this.fireCustomEvent(_t.ButtonClicked,{key:this.key,value:this.value}),t.preventDefault(),t.stopPropagation()}handleSubmit(){const t=this.shadowRoot.querySelector("temba-textinput, temba-datepicker");t.value!==this.value&&(this.value=t.value,this.fireEvent("change")),this.icon=navigator.clipboard?"copy":""}handleChange(t){t.preventDefault(),t.stopPropagation()}handleInput(t){if("Enter"===t.key){t.currentTarget.blur()}}render(){return D`
-      <div class="wrapper ${this.value?"set":"unset"}">
+      <div
+        class=${ie({wrapper:!0,set:!!this.value,unset:!this.value,disabled:this.disabled})}
+      >
         ${"datetime"===this.type?D`
               <temba-datepicker
                 timezone=${this.timezone}
                 value="${this.value?this.value:""}"
                 @change=${this.handleSubmit}
+                ?disabled=${this.disabled}
                 time
               >
                 <div class="prefix" slot="prefix">
@@ -4679,6 +4700,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
                 @blur=${this.handleSubmit}
                 @keydown=${this.handleInput}
                 @change=${this.handleChange}
+                ?disabled=${this.disabled}
               >
                 <div class="prefix" slot="prefix">
                   <div class="name">${this.name}</div>
@@ -4709,7 +4731,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
               </temba-textinput>
             `}
       </div>
-    `}}t([st({type:String})],ml.prototype,"key",void 0),t([st({type:String})],ml.prototype,"value",void 0),t([st({type:String})],ml.prototype,"name",void 0),t([st({type:String})],ml.prototype,"type",void 0),t([st({type:String})],ml.prototype,"timezone",void 0),t([st({type:String})],ml.prototype,"icon",void 0),t([st({type:String})],ml.prototype,"iconClass",void 0);const fl={stopped:{name:"Stopped"},blocked:{name:"Blocked"},archived:{name:"Archived"}};class gl extends Oa{constructor(){super(...arguments),this.hasMore=!1,this.expanded=!1}static get styles(){return r`
+    `}}t([st({type:String})],ml.prototype,"key",void 0),t([st({type:String})],ml.prototype,"value",void 0),t([st({type:String})],ml.prototype,"name",void 0),t([st({type:String})],ml.prototype,"type",void 0),t([st({type:String})],ml.prototype,"timezone",void 0),t([st({type:String})],ml.prototype,"icon",void 0),t([st({type:String})],ml.prototype,"iconClass",void 0),t([st({type:Boolean})],ml.prototype,"disabled",void 0);const fl={stopped:{name:"Stopped"},blocked:{name:"Blocked"},archived:{name:"Archived"}};class gl extends Oa{constructor(){super(...arguments),this.hasMore=!1,this.expanded=!1}static get styles(){return r`
       .wrapper {
         display: flex;
         flex-direction: column;
@@ -5365,11 +5387,13 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         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 {
@@ -5384,7 +5408,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         padding: 0em 1em;
         font-weight: 400;
         cursor: pointer;
-        margin: auto;
+        margin: auto 0;
       }
 
       .tz .label {
@@ -5401,11 +5425,11 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
 
       .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 {
@@ -5439,6 +5463,14 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         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;
@@ -5454,6 +5486,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       }
     `}serializeValue(t){return t}constructor(){super(),this.timezone="",this.timezoneFriendly="",this.datetime=null,this.time=!1}firstUpdated(t){if(t.has("value"))if(this.time){if(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.value){let t=Ss.fromSQL(this.value).setZone(this.timezone);t.invalid&&(t=Ss.fromISO(this.value).setZone(this.timezone)),this.datetime=t,this.setValue(this.datetime.toUTC().toISO())}}else this.datetime=Ss.fromSQL(this.value),this.setValue(this.datetime.toISODate())}updated(t){super.updated(t),t.has("timezone")&&this.time&&(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.requestUpdate("value"))}handleChange(t){t.preventDefault(),t.stopPropagation()}handleBlur(t){this.time?(this.datetime=Ss.fromISO(t.target.value,{zone:this.timezone}),this.setValue(this.datetime.toUTC().toISO())):this.setValue(t.target.value),this.fireEvent("change")}handleClicked(){this.shadowRoot.querySelector("input").focus()}render(){const t=ie({unset:!this.value});let e=null;return this.time&&this.datetime&&!this.datetime.invalid?e=this.datetime.toFormat("yyyy-LL-dd'T'HH:mm"):this.time||(e=this.value),D`
       <temba-field
+        class=${ie({disabled:this.disabled})}
         name=${this.name}
         .label="${this.label}"
         .helpText="${this.helpText}"

package/dist/index.js

@@ -1714,7 +1714,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       }
 
       .disabled {
-        opacity: 0.6 !important;
+        opacity: var(--disabled-opacity) !important;
         pointer-events: none !important;
       }
     `}render(){const t=this.hideErrors?[]:(this.errors||[]).map((t=>D` <div class="alert-error">${t}</div> `));return this.widgetOnly?D`
@@ -2824,7 +2824,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         width: 100%;
         flex-grow: 1;
       }
-    `}constructor(){super(),this.items=[],this.cursorIndex=-1,this.tabIndex=1,this.valueKey="id",this.loading=!1,this.paused=!1,this.refreshKey="0",this.reverseRefresh=!0,this.nextPage=null,this.pages=0,this.pending=[],this.refreshInterval=null,this.store=document.querySelector("temba-store"),this.handleSelection.bind(this)}reset(){this.selected=null,this.nextPage=null,this.cursorIndex=-1,this.mostRecentItem=null,this.items=[]}connectedCallback(){super.connectedCallback(),this.refreshInterval=setInterval((()=>{this.paused||(this.refreshKey="default_"+(new Date).getTime())}),1e4)}disconnectedCallback(){clearInterval(this.refreshInterval)}updated(t){super.updated(t),t.has("endpoint")&&this.endpoint&&(this.reset(),this.loading=!0,this.fetchItems()),t.has("loading")&&(this.loading||this.fireCustomEvent(_t.FetchComplete)),t.has("refreshKey")&&!t.has("endpoint")&&this.refreshTop(),t.has("mostRecentItem")&&this.fireCustomEvent(_t.Refreshed),t.has("cursorIndex")&&this.cursorIndex>-1&&(this.selected=this.items[this.cursorIndex],this.handleSelected(this.selected))}handleSelected(t){const e=new Event("change",{bubbles:!0});this.dispatchEvent(e)}getValue(t){if(!t)return null;const e=this.valueKey.split(".");let i=t;for(;e.length>0;){i=i[e.shift()]}return i}setSelection(t){const e=this.items.findIndex((e=>this.getValue(e)===t));this.cursorIndex=e,this.selected=this.items[e];const i=new Event("change",{bubbles:!0});this.dispatchEvent(i)}getItemIndex(t){return this.items.findIndex((e=>this.getValue(e)===t))}removeItem(t){const e=this.getItemIndex(t);this.items.splice(e,1),this.items=[...this.items],this.cursorIndex=Math.max(0,Math.min(this.items.length-1,this.cursorIndex-1)),this.requestUpdate("cursorIndex"),this.requestUpdate("items")}getSelection(){return this.selected}refresh(){this.refreshKey="requested_"+(new Date).getTime()}setEndpoint(t,e=null){this.endpoint=t,this.nextSelection=e}getRefreshEndpoint(){return this.endpoint}async refreshTop(){if(!this.getRefreshEndpoint())return;for(;this.pending.length>0;){this.pending.pop().abort()}const t=new AbortController;this.pending.push(t);const e=this.items[this.cursorIndex];try{const i=await ne(this.getRefreshEndpoint(),t),n=[...this.items];if(i.results){i.results.forEach((t=>{this.sanitizeOption&&this.sanitizeOption(t);const e=this.getValue(t),i=n.findIndex((t=>this.getValue(t)===e));i>-1&&n.splice(i,1)}));let t=i.results;this.reverseRefresh&&(t=i.results.reverse());const o=[...t,...n],s=o[0];if(this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(s)||(this.mostRecentItem=s),e){const t=o[this.cursorIndex],i=this.getValue(e);if(i!==this.getValue(t)){const t=o.findIndex((t=>this.getValue(t)===i));this.cursorIndex=t,window.setTimeout((()=>{const t=this.shadowRoot.querySelector("temba-options");if(t){t.shadowRoot.querySelector(".option.focused").scrollIntoView({block:"end",inline:"nearest"})}}),0)}}this.items=o}}catch(t){console.error(t)}}async fetchItems(){for(;this.pending.length>0;){this.pending.pop().abort()}let t=this.endpoint,e=this.pages||1,i=0,n=null,o=[];for(;e>0&&t;){const s=new AbortController;this.pending.push(s);try{const r=await ne(t,s);this.sanitizeOption&&r.results.forEach(this.sanitizeOption),r.results&&(o=o.concat(r.results)),n=r.next,t=n,e--,i++}catch(t){return this.reset(),void console.log(t)}this.nextPage=n}this.pages=i;const s=o[0];this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(s)||(this.mostRecentItem=s);const r=o[this.cursorIndex];if(!this.nextSelection&&this.selected&&r&&this.getValue(r)!==this.getValue(this.selected)){const t=o.findIndex((t=>this.getValue(t)===this.getValue(this.selected)));t>-1?this.cursorIndex=t:0===this.cursorIndex?this.requestUpdate("cursorIndex"):this.cursorIndex=0}return this.items=o,this.loading=!1,this.pending=[],this.nextSelection?(this.setSelection(this.nextSelection),this.nextSelection=!1):-1===this.cursorIndex&&(this.cursorIndex=0),this.value&&(this.setSelection(this.value),this.value=null),Promise.resolve()}handleScrollThreshold(){this.nextPage&&!this.loading&&(this.loading=!0,ne(this.nextPage).then((t=>{this.sanitizeOption&&t.results.forEach(this.sanitizeOption),this.items=[...this.items,...t.results],this.nextPage=t.next,this.pages++,this.loading=!1})))}renderHeader(){return null}renderFooter(){return null}getListStyle(){return""}handleSelection(t){const{selected:e,index:i}=t.detail;this.selected=e,this.cursorIndex=i,t.stopPropagation(),t.preventDefault()}render(){return D`
+    `}constructor(){super(),this.items=[],this.cursorIndex=-1,this.tabIndex=1,this.valueKey="id",this.loading=!1,this.paused=!1,this.refreshKey="0",this.reverseRefresh=!0,this.nextPage=null,this.pages=0,this.pending=[],this.refreshInterval=null,this.store=document.querySelector("temba-store"),this.handleSelection.bind(this)}reset(){this.selected=null,this.nextPage=null,this.cursorIndex=-1,this.mostRecentItem=null,this.items=[]}connectedCallback(){super.connectedCallback(),this.refreshInterval=setInterval((()=>{this.paused||(this.refreshKey="default_"+(new Date).getTime())}),1e4)}disconnectedCallback(){clearInterval(this.refreshInterval)}updated(t){super.updated(t),t.has("endpoint")&&this.endpoint&&(this.reset(),this.loading=!0,this.fetchItems()),t.has("loading")&&(this.loading||this.fireCustomEvent(_t.FetchComplete)),t.has("refreshKey")&&!t.has("endpoint")&&this.refreshTop(),t.has("mostRecentItem")&&this.mostRecentItem&&this.fireCustomEvent(_t.Refreshed),t.has("cursorIndex")&&this.cursorIndex>-1&&(this.selected=this.items[this.cursorIndex],this.handleSelected(this.selected))}handleSelected(t){const e=new Event("change",{bubbles:!0});this.dispatchEvent(e)}getValue(t){if(!t)return null;const e=this.valueKey.split(".");let i=t;for(;e.length>0;){i=i[e.shift()]}return i}setSelection(t){const e=this.items.findIndex((e=>this.getValue(e)===t));this.cursorIndex=e,this.selected=this.items[e];const i=new Event("change",{bubbles:!0});this.dispatchEvent(i)}getItemIndex(t){return this.items.findIndex((e=>this.getValue(e)===t))}removeItem(t){const e=this.getItemIndex(t);this.items.splice(e,1),this.items=[...this.items],this.cursorIndex=Math.max(0,Math.min(this.items.length-1,this.cursorIndex-1)),this.requestUpdate("cursorIndex"),this.requestUpdate("items")}getSelection(){return this.selected}refresh(){this.refreshKey="requested_"+(new Date).getTime()}setEndpoint(t,e=null){this.endpoint=t,this.nextSelection=e}getRefreshEndpoint(){return this.endpoint}async refreshTop(){if(!this.getRefreshEndpoint())return;for(;this.pending.length>0;){this.pending.pop().abort()}const t=new AbortController;this.pending.push(t);const e=this.items[this.cursorIndex];try{const i=await ne(this.getRefreshEndpoint(),t),n=[...this.items];if(i.results){i.results.forEach((t=>{this.sanitizeOption&&this.sanitizeOption(t);const e=this.getValue(t),i=n.findIndex((t=>this.getValue(t)===e));i>-1&&n.splice(i,1)}));let t=i.results;this.reverseRefresh&&(t=i.results.reverse());const o=[...t,...n],s=o[0];if(this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(s)||(this.mostRecentItem=s),e){const t=o[this.cursorIndex],i=this.getValue(e);if(i!==this.getValue(t)){const t=o.findIndex((t=>this.getValue(t)===i));this.cursorIndex=t,window.setTimeout((()=>{const t=this.shadowRoot.querySelector("temba-options");if(t){t.shadowRoot.querySelector(".option.focused").scrollIntoView({block:"end",inline:"nearest"})}}),0)}}this.items=o}}catch(t){console.error(t)}}async fetchItems(){for(;this.pending.length>0;){this.pending.pop().abort()}let t=this.endpoint,e=this.pages||1,i=0,n=null,o=[];for(;e>0&&t;){const s=new AbortController;this.pending.push(s);try{const r=await ne(t,s);this.sanitizeOption&&r.results.forEach(this.sanitizeOption),r.results&&(o=o.concat(r.results)),n=r.next,t=n,e--,i++}catch(t){return this.reset(),void console.log(t)}this.nextPage=n}this.pages=i;const s=o[0];this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(s)||(this.mostRecentItem=s);const r=o[this.cursorIndex];if(!this.nextSelection&&this.selected&&r&&this.getValue(r)!==this.getValue(this.selected)){const t=o.findIndex((t=>this.getValue(t)===this.getValue(this.selected)));t>-1?this.cursorIndex=t:0===this.cursorIndex?this.requestUpdate("cursorIndex"):this.cursorIndex=0}return this.items=o,this.loading=!1,this.pending=[],this.nextSelection?(this.setSelection(this.nextSelection),this.nextSelection=!1):-1===this.cursorIndex&&(this.cursorIndex=0),this.value&&(this.setSelection(this.value),this.value=null),Promise.resolve()}handleScrollThreshold(){this.nextPage&&!this.loading&&(this.loading=!0,ne(this.nextPage).then((t=>{this.sanitizeOption&&t.results.forEach(this.sanitizeOption),this.items=[...this.items,...t.results],this.nextPage=t.next,this.pages++,this.loading=!1})))}renderHeader(){return null}renderFooter(){return null}getListStyle(){return""}handleSelection(t){const{selected:e,index:i}=t.detail;this.selected=e,this.cursorIndex=i,t.stopPropagation(),t.preventDefault()}render(){return D`
       ${this.renderHeader()}
       <temba-options
         style="${this.getListStyle()}"
@@ -4477,13 +4477,11 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         height="${this.size}em"
         src="${this.prefix||window.static_url||"/static/"}img/schemes/${t}.svg"
       />
-    `}}t([st({type:String})],ul.prototype,"urn",void 0),t([st({type:String})],ul.prototype,"scheme",void 0),t([st({type:Number})],ul.prototype,"size",void 0);class pl extends Oa{static get styles(){return r`
+    `}}t([st({type:String})],ul.prototype,"urn",void 0),t([st({type:String})],ul.prototype,"scheme",void 0),t([st({type:Number})],ul.prototype,"size",void 0);class pl extends Oa{constructor(){super(...arguments),this.disabled=!1}static get styles(){return r`
       :host {
-        --curvature-widget: 0px;
       }
 
       .fields {
-        box-shadow: var(--widget-box-shadow);
       }
 
       .field {
@@ -4534,12 +4532,15 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       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;
       }
     `}connectedCallback(){super.connectedCallback(),this.handleFieldChanged=this.handleFieldChanged.bind(this)}updated(t){super.updated(t),t.has("data")&&Object.keys(this.data.fields).length<=10&&(this.showAll=!0)}handleFieldChanged(t){const e=t.currentTarget,i=e.value;le("/api/v2/contacts.json?uuid="+this.data.uuid,{fields:{[e.key]:i}}).then((t=>{this.setContact(t.json)}))}handleToggle(t){const e=t.currentTarget;this.showAll=e.checked}render(){if(this.data){const t=Object.entries(this.data.fields).filter((t=>this.featured&&this.store.getContactField(t[0]).featured||!this.featured&&!this.store.getContactField(t[0]).featured)).sort(((t,e)=>{const[i]=t,[n]=e,o=this.store.getContactField(n).priority-this.store.getContactField(i).priority;return 0!==o?o:i.localeCompare(n)}));if(0==t.length)return D`<slot name="empty"></slot>`;const e=t.map((t=>{const[e,i]=t,n=this.store.getContactField(e);return D`<temba-contact-field
           class=${i?"set":"unset"}
@@ -4549,51 +4550,59 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
           type=${n.value_type}
           @change=${this.handleFieldChanged}
           timezone=${this.timezone}
+          ?disabled=${this.disabled}
         ></temba-contact-field>`}));return D`
-        <div class="fields ${this.showAll||this.featured?"show-all":""}">
-          ${e}
-        </div>
+        <div class=${ie({disabled:this.disabled})}>
+          ${!this.featured&&Object.keys(this.data.fields).length>=10?D`<div class="toggle">
+                <div style="flex-grow: 1"></div>
+                <div>
+                  <temba-checkbox
+                    ?checked=${this.showAll}
+                    @change=${this.handleToggle}
+                    label="Show All"
+                  />
+                </div>
+              </div>`:null}
 
-        ${!this.featured&&Object.keys(this.data.fields).length>=10?D`<div class="footer">
-              <div style="flex-grow: 1"></div>
-              <div>
-                <temba-checkbox
-                  ?checked=${this.showAll}
-                  @change=${this.handleToggle}
-                  label="Show All"
-                />
-              </div>
-            </div>`:null}
-      `}return super.render()}}t([st({type:Boolean})],pl.prototype,"featured",void 0),t([st({type:Boolean})],pl.prototype,"system",void 0),t([st({type:Boolean})],pl.prototype,"dirty",void 0),t([st({type:Boolean})],pl.prototype,"showAll",void 0),t([st({type:String})],pl.prototype,"timezone",void 0);class ml extends nt{constructor(){super(...arguments),this.icon=navigator.clipboard?at.copy:"",this.iconClass=""}static get styles(){return r`
+          <div
+            class="fields ${this.showAll||this.featured?"show-all":""}"
+          >
+            ${e}
+          </div>
+        </div>
+      `}return super.render()}}t([st({type:Boolean})],pl.prototype,"featured",void 0),t([st({type:Boolean})],pl.prototype,"system",void 0),t([st({type:Boolean})],pl.prototype,"dirty",void 0),t([st({type:Boolean})],pl.prototype,"showAll",void 0),t([st({type:String})],pl.prototype,"timezone",void 0),t([st({type:Boolean})],pl.prototype,"disabled",void 0);class ml extends nt{constructor(){super(...arguments),this.icon=navigator.clipboard?at.copy:"",this.iconClass="",this.disabled=!1}static get styles(){return r`
       .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 {
@@ -4639,6 +4648,16 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         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;
@@ -4657,16 +4676,18 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       }
 
       temba-datepicker {
-        --curvature: 0px;
         position: relative;
       }
     `}connectedCallback(){super.connectedCallback(),this.handleInput=this.handleInput.bind(this),this.handleSubmit=this.handleSubmit.bind(this)}handleIconClick(t){const e=t.target.getAttribute("icon-action"),i=this.shadowRoot.querySelector("temba-textinput");"copy"===e&&navigator.clipboard&&(this.iconClass="clicked",navigator.clipboard.writeText(i.getDisplayValue()).then((()=>{window.setTimeout((()=>{this.iconClass=""}),300)}))),"search"===e&&this.fireCustomEvent(_t.ButtonClicked,{key:this.key,value:this.value}),t.preventDefault(),t.stopPropagation()}handleSubmit(){const t=this.shadowRoot.querySelector("temba-textinput, temba-datepicker");t.value!==this.value&&(this.value=t.value,this.fireEvent("change")),this.icon=navigator.clipboard?"copy":""}handleChange(t){t.preventDefault(),t.stopPropagation()}handleInput(t){if("Enter"===t.key){t.currentTarget.blur()}}render(){return D`
-      <div class="wrapper ${this.value?"set":"unset"}">
+      <div
+        class=${ie({wrapper:!0,set:!!this.value,unset:!this.value,disabled:this.disabled})}
+      >
         ${"datetime"===this.type?D`
               <temba-datepicker
                 timezone=${this.timezone}
                 value="${this.value?this.value:""}"
                 @change=${this.handleSubmit}
+                ?disabled=${this.disabled}
                 time
               >
                 <div class="prefix" slot="prefix">
@@ -4679,6 +4700,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
                 @blur=${this.handleSubmit}
                 @keydown=${this.handleInput}
                 @change=${this.handleChange}
+                ?disabled=${this.disabled}
               >
                 <div class="prefix" slot="prefix">
                   <div class="name">${this.name}</div>
@@ -4709,7 +4731,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
               </temba-textinput>
             `}
       </div>
-    `}}t([st({type:String})],ml.prototype,"key",void 0),t([st({type:String})],ml.prototype,"value",void 0),t([st({type:String})],ml.prototype,"name",void 0),t([st({type:String})],ml.prototype,"type",void 0),t([st({type:String})],ml.prototype,"timezone",void 0),t([st({type:String})],ml.prototype,"icon",void 0),t([st({type:String})],ml.prototype,"iconClass",void 0);const fl={stopped:{name:"Stopped"},blocked:{name:"Blocked"},archived:{name:"Archived"}};class gl extends Oa{constructor(){super(...arguments),this.hasMore=!1,this.expanded=!1}static get styles(){return r`
+    `}}t([st({type:String})],ml.prototype,"key",void 0),t([st({type:String})],ml.prototype,"value",void 0),t([st({type:String})],ml.prototype,"name",void 0),t([st({type:String})],ml.prototype,"type",void 0),t([st({type:String})],ml.prototype,"timezone",void 0),t([st({type:String})],ml.prototype,"icon",void 0),t([st({type:String})],ml.prototype,"iconClass",void 0),t([st({type:Boolean})],ml.prototype,"disabled",void 0);const fl={stopped:{name:"Stopped"},blocked:{name:"Blocked"},archived:{name:"Archived"}};class gl extends Oa{constructor(){super(...arguments),this.hasMore=!1,this.expanded=!1}static get styles(){return r`
       .wrapper {
         display: flex;
         flex-direction: column;
@@ -5365,11 +5387,13 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         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 {
@@ -5384,7 +5408,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         padding: 0em 1em;
         font-weight: 400;
         cursor: pointer;
-        margin: auto;
+        margin: auto 0;
       }
 
       .tz .label {
@@ -5401,11 +5425,11 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
 
       .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 {
@@ -5439,6 +5463,14 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         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;
@@ -5454,6 +5486,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       }
     `}serializeValue(t){return t}constructor(){super(),this.timezone="",this.timezoneFriendly="",this.datetime=null,this.time=!1}firstUpdated(t){if(t.has("value"))if(this.time){if(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.value){let t=Ss.fromSQL(this.value).setZone(this.timezone);t.invalid&&(t=Ss.fromISO(this.value).setZone(this.timezone)),this.datetime=t,this.setValue(this.datetime.toUTC().toISO())}}else this.datetime=Ss.fromSQL(this.value),this.setValue(this.datetime.toISODate())}updated(t){super.updated(t),t.has("timezone")&&this.time&&(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.requestUpdate("value"))}handleChange(t){t.preventDefault(),t.stopPropagation()}handleBlur(t){this.time?(this.datetime=Ss.fromISO(t.target.value,{zone:this.timezone}),this.setValue(this.datetime.toUTC().toISO())):this.setValue(t.target.value),this.fireEvent("change")}handleClicked(){this.shadowRoot.querySelector("input").focus()}render(){const t=ie({unset:!this.value});let e=null;return this.time&&this.datetime&&!this.datetime.invalid?e=this.datetime.toFormat("yyyy-LL-dd'T'HH:mm"):this.time||(e=this.value),D`
       <temba-field
+        class=${ie({disabled:this.disabled})}
         name=${this.name}
         .label="${this.label}"
         .helpText="${this.helpText}"

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const l=e=>o(e,i),f={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>f[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"041a136a.js",revision:"aff6ee4042394b36cd3b90fab4441403"},{url:"templates/components-body.html",revision:"1f8f52ccde63fce8eb1dd523e501ff57"},{url:"templates/components-head.html",revision:"88f90114b613458d968ac323b1d56af1"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const l=e=>o(e,i),f={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>f[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"df04e47b.js",revision:"fcf56d76b99f7b731008cf3d3179bfb9"},{url:"templates/components-body.html",revision:"14c9b7ec2de8e9684b880be7b97d2aa0"},{url:"templates/components-head.html",revision:"8a6bdfb057917960592231fb99997fae"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
 //# sourceMappingURL=sw.js.map

package/dist/sw.js.map

@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../../tmp/4f3aa99fd9d4de0a533bbe20291f5b64/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"041a136a.js\",\n    \"revision\": \"aff6ee4042394b36cd3b90fab4441403\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"1f8f52ccde63fce8eb1dd523e501ff57\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"88f90114b613458d968ac323b1d56af1\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/6f4797727c175b089a439883b46011e4/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"df04e47b.js\",\n    \"revision\": \"fcf56d76b99f7b731008cf3d3179bfb9\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"14c9b7ec2de8e9684b880be7b97d2aa0\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"8a6bdfb057917960592231fb99997fae\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/041a136a.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.46.0"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/df04e47b.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.47.0"</script>

package/dist/templates/components-head.html

@@ -1 +1 @@
-<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/041a136a.js" crossorigin="anonymous">
+<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/df04e47b.js" crossorigin="anonymous">