@nyaruka/temba-components 0.157.1 → 0.158.0

package/dist/temba-components.js

@@ -73,9 +73,11 @@ const Ye=1,Ke=2,Ge=t=>(...e)=>({_$litDirective$:t,values:e});let Xe=class{constr
     /* neutrals */
     --bg: #f6f7f9;
     --surface: #ffffff;
+    --surface-note: #fff9c2;
     --sunken: #f1f3f5;
     --border: #e6e8ec;
     --border-strong: #d2d6dc;
+    --border-note: #ebdf6f;
     --text-1: #1a1f26;
     --text-2: #4d5664;
     --text-3: #7b8593;
@@ -3500,7 +3502,7 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
       </div>`:V`<div style=${Eh}>
         Cleared ${Ch(t.field)}
       </div>`)(t);break;case xh.CONTACT_GROUPS_CHANGED:i=(t=>t.groups_added?Th("Added to","Added to",t.groups_added):t.groups_removed?Th("Removed from","Removed from",t.groups_removed):void 0)(t);break;case xh.CONTACT_LANGUAGE_CHANGED:i=(t=>t.language?V`<div style=${Eh}>
-    Language updated to ${$h(t.language)}
+    Language updated to ${$h(Nl(t.language))}
   </div>`:V`<div style=${Eh}>Cleared language</div>`)(t);break;case xh.CONTACT_NAME_CHANGED:i=(t=>t.name?V`<div style=${Eh}>
     Updated name to ${$h(t.name)}
   </div>`:V`<div style=${Eh}>Cleared name</div>`)(t);break;case xh.CONTACT_STATUS_CHANGED:i=(t=>t.status?V`<div style=${Eh}>
@@ -3530,9 +3532,7 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
       Sent broadcast: "${e[i].text}"
     </div>`:V`<div>Sent broadcast</div>`})(t);break;case xh.SESSION_TRIGGERED:i=(t=>{const e=t.flow;return e?V`<div>Started somebody else in ${kh(e)}</div>`:null})(t);break;case xh.RESTHOOK_CALLED:i=(t=>V`<div>
     Triggered flow event <strong>${t.resthook}</strong>
-  </div>`)(t);break;case xh.WEBHOOK_CALLED:i=(t=>{const e=t.url&&t.url.length>50?t.url.slice(0,50)+"...":t.url;return V`<div>Called <strong>${e}</strong></div>`})(t);break;case xh.SERVICE_CALLED:i=(t=>{const e=t.service;return"classifier"===e?V`<div>Called classifier</div>`:V`<div>Called <strong>${e}</strong></div>`})(t);break;case xh.TICKET_ASSIGNEE_CHANGED:i=(t=>{var e;const i=(null===(e=t.ticket)||void 0===e?void 0:e.uuid)||t.ticket_uuid,o=V`<a href="/ticket/all/open/${i}/"
-    >ticket</a
-  >`,n=V`<a href="/ticket/all/open/${i}/"
+  </div>`)(t);break;case xh.WEBHOOK_CALLED:i=(t=>{const e=t.url&&t.url.length>50?t.url.slice(0,50)+"...":t.url;return V`<div>Called <strong>${e}</strong></div>`})(t);break;case xh.SERVICE_CALLED:i=(t=>{const e=t.service;return"classifier"===e?V`<div>Called classifier</div>`:V`<div>Called <strong>${e}</strong></div>`})(t);break;case xh.TICKET_ASSIGNEE_CHANGED:i=(t=>{var e;const i=(null===(e=t.ticket)||void 0===e?void 0:e.uuid)||t.ticket_uuid,o=V`<a href="/ticket/all/open/${i}/">ticket</a>`,n=V`<a href="/ticket/all/open/${i}/"
     >This ticket</a
   >`;if(t._user)return t.assignee?t._user.uuid&&t._user.uuid===t.assignee.uuid||t._user.email&&t._user.email===t.assignee.email?V`<div style=${Eh}>
           ${Ah(t._user)} took this ${o}
@@ -3557,11 +3557,11 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
         display: flex;
         flex-direction: row;
         min-height: 0;
+        margin-top: var(--gap);
         --compose-shadow: none;
         --compose-border: none;
         --compose-padding: 3px;
         --compose-curvature: none;
-        border-top: 1px inset rgba(0, 0, 0, 0.05);
       }
 
       .chat-wrapper {
@@ -3569,7 +3569,11 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
         flex-grow: 1;
         flex-direction: column;
         min-height: 0;
-        background: #fff;
+        background: var(--surface);
+        border: 1px solid var(--border-strong);
+        border-radius: var(--r-sm);
+        box-shadow: var(--shadow-2);
+        overflow: hidden;
       }
 
       temba-contact-history {
@@ -5651,7 +5655,7 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
           </div>
         </div>
       </div>
-    `}}e([gt({type:Boolean})],Kh.prototype,"open",void 0),e([gt({type:Boolean})],Kh.prototype,"dormant",void 0),e([gt({type:Number})],Kh.prototype,"arrowSize",void 0),e([gt({type:Number})],Kh.prototype,"margin",void 0),e([gt({type:Boolean})],Kh.prototype,"mask",void 0);class Gh extends Ze{constructor(){super(...arguments),this.embedded=!1,this.collapses=!1,this.unselect=!1,this.focusedName=!1,this.index=-1,this.refresh="",this.options=[]}static get styles(){return l`
+    `}}e([gt({type:Boolean})],Kh.prototype,"open",void 0),e([gt({type:Boolean})],Kh.prototype,"dormant",void 0),e([gt({type:Number})],Kh.prototype,"arrowSize",void 0),e([gt({type:Number})],Kh.prototype,"margin",void 0),e([gt({type:Boolean})],Kh.prototype,"mask",void 0);class Gh extends Ze{constructor(){super(...arguments),this.collapses=!1,this.unselect=!1,this.focusedName=!1,this.index=-1,this.refresh="",this.options=[]}static get styles(){return l`
       :host {
         display: flex;
         flex-direction: column;
@@ -5662,43 +5666,48 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
       .options {
         display: flex;
         align-items: stretch;
-        padding: var(--temba-tabs-options-padding, 0);
-        border-bottom: none;
+        gap: 4px;
+        border-bottom: 1px solid var(--border);
       }
 
       .option {
         user-select: none;
-        padding: 0.5em 0.7em;
-        margin: 0em 0em;
-        cursor: pointer;
         display: flex;
-        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;
-
-        color: var(--color-text-dark);
-        --icon-color: var(--color-text-dark);
+        cursor: pointer;
+        padding: 8px 14px 10px;
+        margin-bottom: -1px;
+        background: transparent;
+        color: var(--text-2);
+        --icon-color: var(--text-2);
+        font-size: 13px;
+        font-weight: var(--w-medium);
+        border-bottom: 2px solid transparent;
         white-space: nowrap;
-        transition: all 100ms linear;
+        transition:
+          color 100ms linear,
+          border-color 100ms linear;
       }
 
-      .focusedname .option .name {
-        transition: all 0s linear !important;
+      .option:hover {
+        color: var(--text-1);
+        --icon-color: var(--text-1);
       }
 
-      .focusedname .option.selected .name {
-        transition: all 200ms linear !important;
+      .option.selected,
+      .option.selected:hover {
+        cursor: default;
+        color: var(--accent-700);
+        --icon-color: var(--accent-700);
+        border-bottom-color: var(--accent-600);
       }
 
-      .option.hidden {
-        display: none;
+      .unselect .option.selected {
+        cursor: pointer;
       }
 
-      .option temba-icon {
+      .option.hidden {
+        display: none;
       }
 
       .option .name {
@@ -5714,6 +5723,9 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
 
       .option .badge {
         margin-left: 0.4em;
+        margin-right: -6px;
+        display: inline-flex;
+        align-items: center;
       }
 
       @media (max-width: 900px) {
@@ -5729,9 +5741,6 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
         }
       }
 
-      .focusedname .option.selected {
-      }
-
       .focusedname .option .name {
         max-width: 0px;
         margin: 0;
@@ -5745,153 +5754,96 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
         max-width: 200px;
       }
 
-      .option {
-        transform: scale(0.9) translateY(0em);
-        --icon-color: rgba(0, 0, 0, 0.5);
-        color: rgba(0, 0, 0, 0.5);
-      }
-
-      .option.selected {
-      }
-
-      .option.selected,
-      .option.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(1px);
-        --icon-color: #666;
-        color: #666;
-        border: 1px inset rgba(0, 0, 0, 0.15);
-        border-bottom: 0px;
-      }
-
-      .option.selected .dot {
-        display: none;
-      }
-
-      .unselect .option.selected {
-        cursor: pointer;
+      .focusedname .option .name {
+        transition: all 0s linear !important;
       }
 
-      .unselect .option.selected:hover {
-        background: var(--unselect-tab-color, #eee);
+      .focusedname .option.selected .name {
+        transition: all 200ms linear !important;
       }
 
-      .option:hover {
-        --icon-color: #666;
-        color: #666;
-        background: rgba(0, 0, 0, 0.02);
+      .option.dirty {
+        font-weight: var(--w-semibold);
       }
 
-      .option.dirty {
-        font-weight: 500;
+      .option.alert {
+        color: var(--danger);
+        --icon-color: var(--danger);
       }
 
       .pane {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
-        background: var(--focused-tab-color, #fff);
-        border-bottom-left-radius: var(--curvature);
-        border-bottom-right-radius: var(--curvature);
-        overflow: hidden;
-
-        box-shadow: var(
-          --tabs-shadow,
-          rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
-          rgba(0, 0, 0, 0.03) 0px 1px 2px 0px
-        );
         min-height: 0;
-      }
-
-      .pane.first {
-        border-top-left-radius: 0px;
         overflow: hidden;
       }
 
       .count {
-        border-radius: 99px;
-        background: rgba(0, 0, 0, 0.1);
-        color: rgba(0, 0, 0, 0.5);
-        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;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 16px;
+        padding: 0 2px;
+        color: inherit;
+        opacity: 0.6;
+        font-size: 11px;
+        font-weight: var(--w-medium);
+        font-variant-numeric: tabular-nums;
       }
 
-      .alert {
-        color: var(--color-alert);
-        --icon-color: var(--color-alert);
+      .option.selected .count,
+      .option.alert .count {
+        min-width: 16px;
+        padding: 0 4px;
+        border-radius: 999px;
+        opacity: 1;
       }
 
-      .embedded.pane {
-        box-shadow: none;
-        margin: 0;
-        border-left: none !important;
-        border-right: none !important;
-        border-bottom: none !important;
+      .option.selected .count {
+        background: var(--accent-100);
+        color: var(--accent-700);
+        font-weight: var(--w-semibold);
       }
 
-      .embedded .option {
-        border-bottom: none !important;
-        border-radius: 0em;
-        border-top: none !important;
+      .option.alert .count {
+        background: var(--danger-bg);
+        color: var(--danger);
       }
 
-      .embedded .option.first {
-        margin-left: 0em;
-        border-top: none !important;
-        border-left: none;
+      .dot {
+        height: 0.5em;
+        width: 0.5em;
+        margin-left: 0.2em;
+        background: var(--accent-600);
+        border-radius: 99px;
       }
 
-      .embedded.options .option.selected {
-        box-shadow: none !important;
+      .option.selected .dot {
+        display: none;
       }
 
       .check {
         margin-left: 0.4em;
       }
-
-      .pane {
-        display: flex;
-      }
-    `}handleTabClick(t){const e=parseInt(t.currentTarget.dataset.index);this.unselect&&this.index===e?this.index=-1:this.index=e,t.preventDefault(),t.stopPropagation(),this.requestUpdate("index")}handleSlotChange(){const t=[];for(const e of this.children)if("TEMBA-TAB"===e.tagName){const i=e;t.push(i)}this.options=t,this.index=0}firstUpdated(t){super.firstUpdated(t),this.shadowRoot.addEventListener("slotchange",this.handleSlotChange.bind(this))}updated(t){if(super.updated(t),t.has("options")&&this.options.forEach((t,e)=>{t.selected=e==this.index}),t.has("index")&&this.options.length>=0&&this.index!==t.get("index")&&(this.options.forEach((t,e)=>{t.selected=e==this.index}),this.fireEvent(Uo.ContextChanged)),this.index>this.options.length){const t=this.options[this.index];if(t&&t.hidden)for(let t=0;t<this.options.length;t++){const e=this.options[t];if(e&&!e.hidden)return void(this.index=t)}}}focusTab(t){const e=this.options.findIndex(e=>e.name===t);if(e>=0)return this.index=e,this.getTab(e)}setTabDetails(t,e){if(t<this.options.length){const i=this.options[t];i.count=e.count,i.hidden=e.hidden,this.requestUpdate()}else setTimeout(()=>{this.setTabDetails(t,e)},100)}getCurrentTab(){return this.options[this.index]}getTab(t){return this.options[t]}handleTabContentChanged(){this.requestUpdate()}handleTabDetailsChanged(){this.requestUpdate()}render(){const t=this.options[this.index];return V`
+    `}handleTabClick(t){const e=parseInt(t.currentTarget.dataset.index);this.unselect&&this.index===e?this.index=-1:this.index=e,t.preventDefault(),t.stopPropagation(),this.requestUpdate("index")}handleSlotChange(){const t=[];for(const e of this.children)if("TEMBA-TAB"===e.tagName){const i=e;t.push(i)}this.options=t,this.index=0}firstUpdated(t){super.firstUpdated(t),this.shadowRoot.addEventListener("slotchange",this.handleSlotChange.bind(this))}updated(t){if(super.updated(t),t.has("options")&&this.options.forEach((t,e)=>{t.selected=e==this.index}),t.has("index")&&this.options.length>=0&&this.index!==t.get("index")&&(this.options.forEach((t,e)=>{t.selected=e==this.index}),this.fireEvent(Uo.ContextChanged)),this.index>this.options.length){const t=this.options[this.index];if(t&&t.hidden)for(let t=0;t<this.options.length;t++){const e=this.options[t];if(e&&!e.hidden)return void(this.index=t)}}}focusTab(t){const e=this.options.findIndex(e=>e.name===t);if(e>=0)return this.index=e,this.getTab(e)}setTabDetails(t,e){if(t<this.options.length){const i=this.options[t];i.count=e.count,i.hidden=e.hidden,this.requestUpdate()}else setTimeout(()=>{this.setTabDetails(t,e)},100)}getCurrentTab(){return this.options[this.index]}getTab(t){return this.options[t]}handleTabContentChanged(){this.requestUpdate()}handleTabDetailsChanged(){this.requestUpdate()}render(){return V`
       <div
-        class="${ge({options:!0,collapses:this.collapses,embedded:this.embedded,focusedname:this.focusedName,unselect:this.unselect})}"
+        class="${ge({options:!0,collapses:this.collapses,focusedname:this.focusedName,unselect:this.unselect})}"
       >
         ${this.options.map((t,e)=>V`
             <div
               @click=${this.handleTabClick}
               data-index=${e}
-              class="${ge({option:!0,first:0==e,selected:e==this.index,hidden:t.hidden,notify:t.notify,alert:t.alert,dirty:t.dirty})}"
-              style="${t.selectionColor&&e==this.index?`color:${t.selectionColor};--icon-color:${t.selectionColor};`:""} ${t.selectionBackground&&e==this.index?`background-color:${t.selectionBackground};`:""}"
+              class="${ge({option:!0,first:0==e,selected:e==this.index,hidden:t.hidden,alert:t.alert,dirty:t.dirty})}"
             >
               ${t.icon?V`<temba-icon name=${t.icon} />`:null}
               <div class="name">${t.name} ${t.dirty?" *":""}</div>
               ${t.hasBadge()?V`
                     <div class="badge">
                       ${t.count>0&&!t.activity?V`<div class="count">
-                            ${t.activity?"":t.count.toLocaleString()}
+                            ${t.count.toLocaleString()}
                           </div>`:null}
-                      ${t.activity&&t.count>0&&!t.dirty?V`<div
-                            class="dot"
-                            style="background:${t.activityColor}"
-                          ></div>`:null}
+                      ${t.activity&&t.count>0&&!t.dirty?V`<div class="dot"></div>`:null}
                     </div>
                   `:null}
               ${t.checked&&!t.alert?V`<temba-icon class="check" name="check"></temba-icon>`:null}
@@ -5903,15 +5855,11 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
           <slot name="tab-right"></slot>
         </div>
       </div>
-      <div
-        @temba-details-changed=${this.handleTabDetailsChanged}
-        style="${(null==t?void 0:t.borderColor)?`\n            border-top: var(--temba-tabs-border-top, 1px solid ${(null==t?void 0:t.borderColor)||"var(--color-widget-border)"});\n\n            border-left: var(--temba-tabs-border-left, 1px solid ${(null==t?void 0:t.borderColor)||"var(--color-widget-border)"});\n\n            border-bottom: var(--temba-tabs-border-bottom, 1px solid ${(null==t?void 0:t.borderColor)||"var(--color-widget-border)"});\n\n            border-right: var(--temba-tabs-border-right, 1px solid ${(null==t?void 0:t.borderColor)||"var(--color-widget-border)"});\n\n            `:""} ${(null==t?void 0:t.selectionBackground)?`background:${null==t?void 0:t.selectionBackground};`:""}"
-        class="pane ${ge({first:0==this.index,embedded:this.embedded})}"
-      >
+      <div @temba-details-changed=${this.handleTabDetailsChanged} class="pane">
         <slot></slot>
         <slot name="pane-bottom"></slot>
       </div>
-    `}}e([gt({type:Boolean})],Gh.prototype,"embedded",void 0),e([gt({type:Boolean})],Gh.prototype,"collapses",void 0),e([gt({type:Boolean})],Gh.prototype,"unselect",void 0),e([gt({type:Boolean})],Gh.prototype,"focusedName",void 0),e([gt({type:Number})],Gh.prototype,"index",void 0),e([gt({type:String})],Gh.prototype,"refresh",void 0),e([gt({type:Array,attribute:!1})],Gh.prototype,"options",void 0);class Xh extends Ze{constructor(){super(...arguments),this.borderColor="var(--color-widget-border)",this.activityColor="var(--color-link-primary)",this.selected=!1,this.notify=!1,this.alert=!1,this.hidden=!1,this.hideEmpty=!1,this.activity=!1,this.count=0,this.checked=!1,this.dirty=!1}static get styles(){return l`
+    `}}e([gt({type:Boolean})],Gh.prototype,"collapses",void 0),e([gt({type:Boolean})],Gh.prototype,"unselect",void 0),e([gt({type:Boolean})],Gh.prototype,"focusedName",void 0),e([gt({type:Number})],Gh.prototype,"index",void 0),e([gt({type:String})],Gh.prototype,"refresh",void 0),e([gt({type:Array,attribute:!1})],Gh.prototype,"options",void 0);class Xh extends Ze{constructor(){super(...arguments),this.selected=!1,this.alert=!1,this.hidden=!1,this.hideEmpty=!1,this.activity=!1,this.count=0,this.checked=!1,this.dirty=!1}static get styles(){return l`
       :host {
         display: none;
         flex-direction: column;
@@ -5927,7 +5875,7 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
     `}updated(t){super.updated(t),t.has("selected")&&this.classList.toggle("selected",this.selected)}hasBadge(){return this.count>0}handleDetailsChanged(t){"dirty"in t.detail&&(this.dirty=t.detail.dirty),"count"in t.detail&&(this.count=t.detail.count,this.hideEmpty&&(this.hidden=0===this.count))}render(){return V`<slot
       @temba-details-changed=${this.handleDetailsChanged}
       class="${ge({selected:this.selected})}"
-    ></slot> `}}e([gt({type:String})],Xh.prototype,"name",void 0),e([gt({type:String})],Xh.prototype,"icon",void 0),e([gt({type:String})],Xh.prototype,"selectionColor",void 0),e([gt({type:String})],Xh.prototype,"selectionBackground",void 0),e([gt({type:String})],Xh.prototype,"borderColor",void 0),e([gt({type:String})],Xh.prototype,"activityColor",void 0),e([gt({type:Boolean})],Xh.prototype,"selected",void 0),e([gt({type:Boolean})],Xh.prototype,"notify",void 0),e([gt({type:Boolean})],Xh.prototype,"alert",void 0),e([gt({type:Boolean})],Xh.prototype,"hidden",void 0),e([gt({type:Boolean})],Xh.prototype,"hideEmpty",void 0),e([gt({type:Boolean})],Xh.prototype,"activity",void 0),e([gt({type:Number})],Xh.prototype,"count",void 0),e([gt({type:Boolean})],Xh.prototype,"checked",void 0),e([gt({type:Boolean})],Xh.prototype,"dirty",void 0);let Qh=class extends ct{static get styles(){return l`
+    ></slot> `}}e([gt({type:String})],Xh.prototype,"name",void 0),e([gt({type:String})],Xh.prototype,"icon",void 0),e([gt({type:Boolean})],Xh.prototype,"selected",void 0),e([gt({type:Boolean})],Xh.prototype,"alert",void 0),e([gt({type:Boolean})],Xh.prototype,"hidden",void 0),e([gt({type:Boolean})],Xh.prototype,"hideEmpty",void 0),e([gt({type:Boolean})],Xh.prototype,"activity",void 0),e([gt({type:Number})],Xh.prototype,"count",void 0),e([gt({type:Boolean})],Xh.prototype,"checked",void 0),e([gt({type:Boolean})],Xh.prototype,"dirty",void 0);let Qh=class extends ct{static get styles(){return l`
       ${Do}
 
       :host {
@@ -6205,9 +6153,8 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
 
       .toggle {
         display: flex;
-        background: #fff;
         align-items: center;
-        margin-bottom: 0.5em;
+        margin-top: 0.5em;
       }
 
       .disabled .toggle {
@@ -6282,51 +6229,34 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
         --color-widget-border: rgb(235, 235, 235);
       }
 
-      .prefix {
-        border-top-left-radius: var(--curvature-widget);
-        border-bottom-left-radius: var(--curvature-widget);
-        cursor: pointer !important;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: flex;
-        /* Pin to the top-left of the host (temba-select :host is
-           position: relative). Using top rather than margin-top keeps
-           the absolute element out of the flex flow of .left-side so
-           it doesn't push the selected value down. */
-        position: absolute;
-        top: -0.6em;
-        left: 0.5em;
-        pointer-events: none;
-        background: #fff;
-        border-radius: var(--curvature);
-      }
-
-      temba-select .prefix {
-        top: -0.7em;
-      }
-
       .wrapper {
         margin-bottom: 0.5em;
       }
 
-      .prefix .name,
-      .label .name {
-        padding: 0em 0.4em;
-        color: rgba(100, 100, 100, 0.7);
+      .field-label {
+        display: block;
+        font-size: 12px;
+        font-weight: var(--w-medium);
+        color: var(--text-2);
+        margin: 0 0 4px 2px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        font-size: 0.8em;
+      }
+
+      .label .name {
+        color: var(--text-2);
+        font-size: 12px;
+        font-weight: var(--w-medium);
       }
 
       .disabled .name {
-        margin-top: 1em;
-        margin-left: 0.75em;
+        margin-top: 0.25em;
+        margin-left: 0.25em;
       }
 
       .disabled .value {
-        margin-left: 0.9em;
+        margin-left: 0.25em;
         margin-top: 0.1em;
         min-height: 1.75em;
       }
@@ -6503,23 +6433,26 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
 
       temba-option {
       }
-    `}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(Uo.ButtonClicked,{key:this.key,value:this.value}),t.preventDefault(),t.stopPropagation()}handleResponse(t){200===t.status?(this.value=t.json.fields[this.key],this.status=iu.Ready,this.dirty=!1):(this.status=iu.Failure,this.dirty=!1)}handleSelectChange(t){const e=t.currentTarget;let i="";t.preventDefault(),t.stopPropagation(),e.values.length>0&&(i=e.values[0].path),i!==this.value&&(this.dirty=!0,this.status=iu.Saving,this.value=i,this.fireEvent("change"))}handleSubmit(){const t=this.shadowRoot.querySelector("temba-textinput, temba-datepicker");t.value!==this.value&&(this.dirty=!0,this.status=iu.Saving,this.value=t.value,this.fireEvent("change"))}handleChange(t){t.preventDefault(),t.stopPropagation()}handleDateChange(t){t.preventDefault(),t.stopPropagation(),this.dirty=!0}handleInput(t){const e=t.currentTarget;"Enter"===t.key?(e.blur(),this.handleSubmit()):e.value!==this.value&&(this.dirty=!0)}getInputType(t){return"numeric"===t?No.Number:No.Text}renderDateField(t){return V` <temba-datepicker
-      timezone=${this.timezone}
-      value="${this.value?this.value:""}"
-      @change=${this.handleDateChange}
-      ?disabled=${this.disabled}
-      time
-    >
-      <div class="prefix" slot="prefix">
-        <div class="name">${this.name}</div>
-      </div>
-      <div class="postfix" slot="postfix">
-        <div class="popper ${this.status}  ${this.dirty?"dirty":""}">
-          ${t}
+    `}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(Uo.ButtonClicked,{key:this.key,value:this.value}),t.preventDefault(),t.stopPropagation()}handleResponse(t){200===t.status?(this.value=t.json.fields[this.key],this.status=iu.Ready,this.dirty=!1):(this.status=iu.Failure,this.dirty=!1)}handleSelectChange(t){const e=t.currentTarget;let i="";t.preventDefault(),t.stopPropagation(),e.values.length>0&&(i=e.values[0].path),i!==this.value&&(this.dirty=!0,this.status=iu.Saving,this.value=i,this.fireEvent("change"))}handleSubmit(){const t=this.shadowRoot.querySelector("temba-textinput, temba-datepicker");t.value!==this.value&&(this.dirty=!0,this.status=iu.Saving,this.value=t.value,this.fireEvent("change"))}handleChange(t){t.preventDefault(),t.stopPropagation()}handleDateChange(t){t.preventDefault(),t.stopPropagation(),this.dirty=!0}handleInput(t){const e=t.currentTarget;"Enter"===t.key?(e.blur(),this.handleSubmit()):e.value!==this.value&&(this.dirty=!0)}getInputType(t){return"numeric"===t?No.Number:No.Text}renderDateField(t){return V`
+      <label id="field-label" class="field-label">${this.name}</label>
+      <temba-datepicker
+        aria-labelledby="field-label"
+        timezone=${this.timezone}
+        value="${this.value?this.value:""}"
+        @change=${this.handleDateChange}
+        ?disabled=${this.disabled}
+        time
+      >
+        <div class="postfix" slot="postfix">
+          <div class="popper ${this.status}  ${this.dirty?"dirty":""}">
+            ${t}
+          </div>
         </div>
-      </div>
-    </temba-datepicker>`}renderTextField(t){return V`
+      </temba-datepicker>
+    `}renderTextField(t){return V`
+      <label id="field-label" class="field-label">${this.name}</label>
       <temba-textinput
+        aria-labelledby="field-label"
         class="${this.status} ${this.dirty?"dirty":""}"
         value="${this.value?this.value:""}"
         @keyup=${this.handleInput}
@@ -6527,10 +6460,6 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
         type=${this.getInputType(this.type)}
         ?disabled=${this.disabled}
       >
-        <div class="prefix" slot="prefix">
-          <div class="name">${this.name}</div>
-        </div>
-
         <div class="postfix">
           <div
             class="popper ${this.iconClass} ${this.status}  ${this.dirty?"dirty":""}"
@@ -6561,7 +6490,9 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
         <span>${t.path}</span>
       </div>
     `:null}renderLocationField(t="state"){return V`
+      <label id="field-label" class="field-label">${this.name}</label>
       <temba-select
+        aria-labelledby="field-label"
         endpoint="/api/internal/locations.json?level=${t}"
         nameKey="path"
         valueKey="path"
@@ -6571,12 +6502,8 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
         queryParam="query"
         searchable
         clearable
-        inpsutStyle=${JSON.stringify({"margin-top":"1.1em !important;"})}
         values=${this.value?JSON.stringify([{path:this.value,osm_id:this.value}]):"[]"}
       >
-        <div class="prefix" slot="prefix">
-          <div class="name">${this.name}</div>
-        </div>
       </temba-select>
     `}render(){if(this.disabled)return V`<div
         class=${this.status+" "+ge({wrapper:!0,set:!!this.value,unset:!this.value,disabled:this.disabled,mutable:!this.disabled,dirty:this.dirty})}
@@ -6797,6 +6724,7 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
         display: flex;
         flex-direction: row;
         align-items: center;
+        background: var(--surface);
         box-shadow:
           0 0 8px 1px rgba(0, 0, 0, 0.055),
           0 0 0px 1px rgba(0, 0, 0, 0.02);
@@ -7165,6 +7093,7 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
       .container {
         border-radius: var(--curvature);
         border: 1px solid var(--color-widget-border);
+        background: var(--color-widget-bg);
         display: flex;
         cursor: pointer;
         box-shadow: var(--widget-box-shadow);
@@ -7205,7 +7134,7 @@ const{I:nh}=at,sh=t=>t,rh=()=>document.createComment(""),ah=(t,e,i)=>{const o=t.
       }
 
       .tz-wrapper {
-        background: #efefef;
+        background: var(--sunken);
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -9354,7 +9283,7 @@ background: #ccc;
           ${this.renderUploader()}
         </div>
       </div>
-    </div>`}}e([gt({type:String,attribute:!1})],Bu.prototype,"endpoint",void 0),e([gt({type:Boolean})],Bu.prototype,"pendingDrop",void 0),e([gt({type:Boolean})],Bu.prototype,"ignoreDrops",void 0),e([gt({type:String})],Bu.prototype,"icon",void 0),e([gt({type:String})],Bu.prototype,"accept",void 0),e([gt({type:Number})],Bu.prototype,"max",void 0),e([gt({type:Array})],Bu.prototype,"attachments",void 0),e([gt({type:Boolean,attribute:!1})],Bu.prototype,"uploading",void 0);let Fu="dev";try{Fu="0.157.1"}catch(t){}const qu=Fu,Uu=[{type:"has_any_word",name:"has any of the words",operands:1},{type:"has_all_words",name:"has all of the words",operands:1},{type:"has_phrase",name:"has the phrase",operands:1},{type:"has_only_phrase",name:"has only the phrase",operands:1},{type:"has_beginning",name:"starts with",operands:1},{type:"has_text",name:"has some text",operands:0,categoryName:"Has Text"},{type:"has_number",name:"has a number",operands:0,categoryName:"Has Number"},{type:"has_number_between",name:"has a number between",operands:2},{type:"has_number_lt",name:"has a number below",operands:1},{type:"has_number_lte",name:"has a number at or below",operands:1},{type:"has_number_eq",name:"has a number equal to",operands:1},{type:"has_number_gte",name:"has a number at or above",operands:1},{type:"has_number_gt",name:"has a number above",operands:1},{type:"has_date",name:"has a date",operands:0,categoryName:"Has Date"},{type:"has_date_lt",name:"has a date before",operands:1},{type:"has_date_eq",name:"has a date equal to",operands:1},{type:"has_date_gt",name:"has a date after",operands:1},{type:"has_time",name:"has a time",operands:0,categoryName:"Has Time"},{type:"has_phone",name:"has a phone number",operands:0,categoryName:"Has Phone"},{type:"has_email",name:"has an email",operands:0,categoryName:"Has Email"},{type:"has_state",name:"has state",operands:0,categoryName:"Has State",filter:"locations"},{type:"has_district",name:"has district",operands:1,categoryName:"Has District",filter:"locations"},{type:"has_ward",name:"has ward",operands:2,categoryName:"Has Ward",filter:"locations"},{type:"has_group",name:"is in the group",operands:1,visibility:"hidden"},{type:"has_category",name:"has the category",operands:0,visibility:"hidden"},{type:"has_error",name:"has an error",operands:0,categoryName:"Has Error",visibility:"hidden"},{type:"has_value",name:"is not empty",operands:0,categoryName:"Not Empty",visibility:"hidden"},{type:"has_pattern",name:"matches regex",operands:1}],ju=t=>Uu.filter(e=>"hidden"!==e.visibility&&(!e.filter||!!t&&t.includes(e.filter))),Hu=new Set(["has_beginning","has_number","has_number_between","has_number_lt","has_number_lte","has_number_eq","has_number_gte","has_number_gt","has_pattern"]),Wu=t=>Uu.find(e=>e.type===t),Vu=t=>t.map(t=>({value:t.type,name:t.name})),Zu={type:"text",required:!1,maxLength:64,placeholder:"(optional)",helpText:"The name to use to reference this result in the flow"},Yu={type:"checkbox",label:"Require rules to be localized",helpText:"Each language must specify its own rules for this node"},Ku={type:"checkbox",label:"Require categories to be localized",helpText:t=>{var e;const i=null===(e=t.result_name)||void 0===e?void 0:e.trim();if(i){return`Only enable if you plan to use @results.${i.toLowerCase().replace(/\s+/g,"_")}.category_localized`}return"Only enable if you plan to use category_localized in your expressions for this result"},conditions:{visible:t=>!!t.result_name}},Gu={label:"Save Result",localizable:!1,items:["result_name"],collapsed:t=>!(t._isNew&&t.result_name),getValueCount:t=>!!t.result_name},Xu={type:"accordion",multi:!0,sections:[Gu,{label:"Localization",localizable:!1,items:["localizeRules","localizeCategories"],collapsed:!0,getValueCount:t=>!(!t.localizeRules&&!t.localizeCategories)}]},Qu={type:"accordion",multi:!0,sections:[Gu]},Ju={type:"accordion",multi:!0,sections:[Gu,{label:"Localization",localizable:!1,items:["localizeCategories"],collapsed:!0,getValueCount:t=>!!t.localizeCategories}]};function tp(t,e){var i,o;const n=(null===(i=t.router)||void 0===i?void 0:i.categories)||[],s={};n.forEach(t=>{const i=t.uuid,o=e[i];s[i]={originalName:t.name,localizedName:o&&o.name?Array.isArray(o.name)?o.name[0]||"":o.name:""}});const r=(null===(o=t.router)||void 0===o?void 0:o.cases)||[],a={};return r.forEach(t=>{var i,o;if(!(null===(i=t.arguments)||void 0===i?void 0:i.length)||!t.arguments.some(t=>t))return;const n=e[t.uuid],s=(null===(o=Wu(t.type))||void 0===o?void 0:o.name)||t.type;a[t.uuid]={operatorName:s,originalArguments:[...t.arguments],localizedArguments:(null==n?void 0:n.arguments)?[...n.arguments]:t.arguments.map(()=>"")}}),{categories:s,rules:a}}function ep(t,e){const i={};return t.categories&&Object.keys(t.categories).forEach(e=>{var o,n;const s=t.categories[e],r=(null===(o=s.localizedName)||void 0===o?void 0:o.trim())||"",a=(null===(n=s.originalName)||void 0===n?void 0:n.trim())||"";r&&r!==a&&(i[e]={name:[r]})}),t.rules&&Object.keys(t.rules).forEach(e=>{const o=t.rules[e],n=o.localizedArguments||[],s=o.originalArguments||[],r=n.some((t,e)=>(null==t?void 0:t.trim())&&t.trim()!==(s[e]||""));r&&(i[e]={arguments:n.map(t=>(null==t?void 0:t.trim())||"")})}),i}function ip(t,e,i,o=[]){const n=[],s=[],r=[];return t.forEach(t=>{const a=re(e,t.name),l=a?i.find(t=>t.uuid===a.exit_uuid):null,d=(null==l?void 0:l.uuid)||Gt(),c=(null==a?void 0:a.uuid)||Gt();if(n.push({uuid:c,name:t.name,exit_uuid:d}),s.push({uuid:d,destination_uuid:(null==l?void 0:l.destination_uuid)||null}),t.case){const e=t.case.arguments[0],i=o.find(t=>{var i;return(null===(i=t.arguments)||void 0===i?void 0:i[0])===e});r.push({uuid:(null==i?void 0:i.uuid)||Gt(),type:t.case.type,arguments:t.case.arguments,category_uuid:c})}}),{categories:n,exits:s,cases:r}}function op(t,e,i,o,n){const s=n.some(t=>se(t,"Other"))?null:re(i,"Other"),r=s?o.find(t=>t.uuid===s.exit_uuid):null,a=(null==r?void 0:r.uuid)||Gt(),l=(null==s?void 0:s.uuid)||Gt();return t.push({uuid:l,name:"Other",exit_uuid:a}),e.push({uuid:a,destination_uuid:(null==r?void 0:r.destination_uuid)||null}),l}function np(t){return e=>{const i={};return t(e,i),{valid:0===Object.keys(i).length,errors:i}}}function sp(t){return t.toLocalizationFormData?t.toLocalizationFormData:"categories"===t.localizable?tp:Array.isArray(t.localizable)?(e=t.localizable,(t,i)=>{const o={uuid:t.uuid};return e.forEach(t=>{const e=i[t];o[t]=Array.isArray(e)&&e[0]||""}),o}):void 0;var e}function rp(t){return t.fromLocalizationFormData?t.fromLocalizationFormData:"categories"===t.localizable?ep:Array.isArray(t.localizable)?(e=t.localizable,(t,i)=>{const o={};return e.forEach(e=>{const n=t[e];n&&""!==n.trim()&&n!==i[e]&&(o[e]=[n])}),o}):void 0;var e}const ap="undefined"!=typeof navigator&&/Mac|iPod|iPhone|iPad/.test(navigator.platform);function lp(t){return 0!==t.button||!(!ap||!t.ctrlKey)}function dp(t){if(t.dependency){const e=t.dependency.name||t.dependency.key;return`Cannot find a ${t.dependency.type} for ${e}`}return t.description}function cp(t){const e=20*Math.round(t/20);return Math.max(e,0)}const hp="font-family:SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;font-size:0.95em",up={[nc.ExpressionPrefix]:`color:${Cc.expression};font-weight:600;${hp}`,[nc.Identifier]:`color:${Cc.expression};${hp}`,[nc.FunctionName]:`color:${Cc.fn};font-weight:900;${hp}`,[nc.StringLiteral]:`color:${Cc.string};${hp}`,[nc.NumberLiteral]:`color:${Cc.number};${hp}`,[nc.Keyword]:`color:${Cc.keyword};${hp}`,[nc.Operator]:`color:${Cc.operator};${hp}`,[nc.ContextRef]:`color:${Cc.expression};${hp}`,[nc.Separator]:`color:${Cc.operator};${hp}`,[nc.Arrow]:`color:${Cc.operator};${hp}`,[nc.Bracket]:`color:${Cc.operator};${hp}`,[nc.Paren]:`color:${Cc.paren};${hp}`,[nc.Whitespace]:hp},pp=[[/claude|anthropic/i,"anthropic"],[/gpt|openai|o1|o3|o4/i,"openai"],[/gemini|google/i,"gemini"],[/azure|microsoft/i,"azure"],[/deepseek/i,"deepseek"]],mp=(t,e=!1)=>{const i=cc(t||"",e?Gd:Kd),o=[];for(const t of i){const e=!!up[t.type],i=o[o.length-1];i&&i.isExpr===e?i.tokens.push(t):o.push({isExpr:e,tokens:[t]})}const n=t=>{const e=up[t.type];if(!e){const e=t.text.split("\n");return V`${e.map((t,e)=>V`${e>0?V`<br />`:null}${t}`)}`}const i=t.text.split("\n");return V`${i.map((t,i)=>V`${i>0?V`<br />`:null}${t?V`<span style="${e}">${t}</span>`:null}`)}`};return V`${o.map(t=>{const e=V`${t.tokens.map(n)}`;return t.isExpr?V`<span style="hyphens:none">${e}</span>`:e})}`},gp=(t,e,i=3)=>V`<div
+    </div>`}}e([gt({type:String,attribute:!1})],Bu.prototype,"endpoint",void 0),e([gt({type:Boolean})],Bu.prototype,"pendingDrop",void 0),e([gt({type:Boolean})],Bu.prototype,"ignoreDrops",void 0),e([gt({type:String})],Bu.prototype,"icon",void 0),e([gt({type:String})],Bu.prototype,"accept",void 0),e([gt({type:Number})],Bu.prototype,"max",void 0),e([gt({type:Array})],Bu.prototype,"attachments",void 0),e([gt({type:Boolean,attribute:!1})],Bu.prototype,"uploading",void 0);let Fu="dev";try{Fu="0.158.0"}catch(t){}const qu=Fu,Uu=[{type:"has_any_word",name:"has any of the words",operands:1},{type:"has_all_words",name:"has all of the words",operands:1},{type:"has_phrase",name:"has the phrase",operands:1},{type:"has_only_phrase",name:"has only the phrase",operands:1},{type:"has_beginning",name:"starts with",operands:1},{type:"has_text",name:"has some text",operands:0,categoryName:"Has Text"},{type:"has_number",name:"has a number",operands:0,categoryName:"Has Number"},{type:"has_number_between",name:"has a number between",operands:2},{type:"has_number_lt",name:"has a number below",operands:1},{type:"has_number_lte",name:"has a number at or below",operands:1},{type:"has_number_eq",name:"has a number equal to",operands:1},{type:"has_number_gte",name:"has a number at or above",operands:1},{type:"has_number_gt",name:"has a number above",operands:1},{type:"has_date",name:"has a date",operands:0,categoryName:"Has Date"},{type:"has_date_lt",name:"has a date before",operands:1},{type:"has_date_eq",name:"has a date equal to",operands:1},{type:"has_date_gt",name:"has a date after",operands:1},{type:"has_time",name:"has a time",operands:0,categoryName:"Has Time"},{type:"has_phone",name:"has a phone number",operands:0,categoryName:"Has Phone"},{type:"has_email",name:"has an email",operands:0,categoryName:"Has Email"},{type:"has_state",name:"has state",operands:0,categoryName:"Has State",filter:"locations"},{type:"has_district",name:"has district",operands:1,categoryName:"Has District",filter:"locations"},{type:"has_ward",name:"has ward",operands:2,categoryName:"Has Ward",filter:"locations"},{type:"has_group",name:"is in the group",operands:1,visibility:"hidden"},{type:"has_category",name:"has the category",operands:0,visibility:"hidden"},{type:"has_error",name:"has an error",operands:0,categoryName:"Has Error",visibility:"hidden"},{type:"has_value",name:"is not empty",operands:0,categoryName:"Not Empty",visibility:"hidden"},{type:"has_pattern",name:"matches regex",operands:1}],ju=t=>Uu.filter(e=>"hidden"!==e.visibility&&(!e.filter||!!t&&t.includes(e.filter))),Hu=new Set(["has_beginning","has_number","has_number_between","has_number_lt","has_number_lte","has_number_eq","has_number_gte","has_number_gt","has_pattern"]),Wu=t=>Uu.find(e=>e.type===t),Vu=t=>t.map(t=>({value:t.type,name:t.name})),Zu={type:"text",required:!1,maxLength:64,placeholder:"(optional)",helpText:"The name to use to reference this result in the flow"},Yu={type:"checkbox",label:"Require rules to be localized",helpText:"Each language must specify its own rules for this node"},Ku={type:"checkbox",label:"Require categories to be localized",helpText:t=>{var e;const i=null===(e=t.result_name)||void 0===e?void 0:e.trim();if(i){return`Only enable if you plan to use @results.${i.toLowerCase().replace(/\s+/g,"_")}.category_localized`}return"Only enable if you plan to use category_localized in your expressions for this result"},conditions:{visible:t=>!!t.result_name}},Gu={label:"Save Result",localizable:!1,items:["result_name"],collapsed:t=>!(t._isNew&&t.result_name),getValueCount:t=>!!t.result_name},Xu={type:"accordion",multi:!0,sections:[Gu,{label:"Localization",localizable:!1,items:["localizeRules","localizeCategories"],collapsed:!0,getValueCount:t=>!(!t.localizeRules&&!t.localizeCategories)}]},Qu={type:"accordion",multi:!0,sections:[Gu]},Ju={type:"accordion",multi:!0,sections:[Gu,{label:"Localization",localizable:!1,items:["localizeCategories"],collapsed:!0,getValueCount:t=>!!t.localizeCategories}]};function tp(t,e){var i,o;const n=(null===(i=t.router)||void 0===i?void 0:i.categories)||[],s={};n.forEach(t=>{const i=t.uuid,o=e[i];s[i]={originalName:t.name,localizedName:o&&o.name?Array.isArray(o.name)?o.name[0]||"":o.name:""}});const r=(null===(o=t.router)||void 0===o?void 0:o.cases)||[],a={};return r.forEach(t=>{var i,o;if(!(null===(i=t.arguments)||void 0===i?void 0:i.length)||!t.arguments.some(t=>t))return;const n=e[t.uuid],s=(null===(o=Wu(t.type))||void 0===o?void 0:o.name)||t.type;a[t.uuid]={operatorName:s,originalArguments:[...t.arguments],localizedArguments:(null==n?void 0:n.arguments)?[...n.arguments]:t.arguments.map(()=>"")}}),{categories:s,rules:a}}function ep(t,e){const i={};return t.categories&&Object.keys(t.categories).forEach(e=>{var o,n;const s=t.categories[e],r=(null===(o=s.localizedName)||void 0===o?void 0:o.trim())||"",a=(null===(n=s.originalName)||void 0===n?void 0:n.trim())||"";r&&r!==a&&(i[e]={name:[r]})}),t.rules&&Object.keys(t.rules).forEach(e=>{const o=t.rules[e],n=o.localizedArguments||[],s=o.originalArguments||[],r=n.some((t,e)=>(null==t?void 0:t.trim())&&t.trim()!==(s[e]||""));r&&(i[e]={arguments:n.map(t=>(null==t?void 0:t.trim())||"")})}),i}function ip(t,e,i,o=[]){const n=[],s=[],r=[];return t.forEach(t=>{const a=re(e,t.name),l=a?i.find(t=>t.uuid===a.exit_uuid):null,d=(null==l?void 0:l.uuid)||Gt(),c=(null==a?void 0:a.uuid)||Gt();if(n.push({uuid:c,name:t.name,exit_uuid:d}),s.push({uuid:d,destination_uuid:(null==l?void 0:l.destination_uuid)||null}),t.case){const e=t.case.arguments[0],i=o.find(t=>{var i;return(null===(i=t.arguments)||void 0===i?void 0:i[0])===e});r.push({uuid:(null==i?void 0:i.uuid)||Gt(),type:t.case.type,arguments:t.case.arguments,category_uuid:c})}}),{categories:n,exits:s,cases:r}}function op(t,e,i,o,n){const s=n.some(t=>se(t,"Other"))?null:re(i,"Other"),r=s?o.find(t=>t.uuid===s.exit_uuid):null,a=(null==r?void 0:r.uuid)||Gt(),l=(null==s?void 0:s.uuid)||Gt();return t.push({uuid:l,name:"Other",exit_uuid:a}),e.push({uuid:a,destination_uuid:(null==r?void 0:r.destination_uuid)||null}),l}function np(t){return e=>{const i={};return t(e,i),{valid:0===Object.keys(i).length,errors:i}}}function sp(t){return t.toLocalizationFormData?t.toLocalizationFormData:"categories"===t.localizable?tp:Array.isArray(t.localizable)?(e=t.localizable,(t,i)=>{const o={uuid:t.uuid};return e.forEach(t=>{const e=i[t];o[t]=Array.isArray(e)&&e[0]||""}),o}):void 0;var e}function rp(t){return t.fromLocalizationFormData?t.fromLocalizationFormData:"categories"===t.localizable?ep:Array.isArray(t.localizable)?(e=t.localizable,(t,i)=>{const o={};return e.forEach(e=>{const n=t[e];n&&""!==n.trim()&&n!==i[e]&&(o[e]=[n])}),o}):void 0;var e}const ap="undefined"!=typeof navigator&&/Mac|iPod|iPhone|iPad/.test(navigator.platform);function lp(t){return 0!==t.button||!(!ap||!t.ctrlKey)}function dp(t){if(t.dependency){const e=t.dependency.name||t.dependency.key;return`Cannot find a ${t.dependency.type} for ${e}`}return t.description}function cp(t){const e=20*Math.round(t/20);return Math.max(e,0)}const hp="font-family:SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;font-size:0.95em",up={[nc.ExpressionPrefix]:`color:${Cc.expression};font-weight:600;${hp}`,[nc.Identifier]:`color:${Cc.expression};${hp}`,[nc.FunctionName]:`color:${Cc.fn};font-weight:900;${hp}`,[nc.StringLiteral]:`color:${Cc.string};${hp}`,[nc.NumberLiteral]:`color:${Cc.number};${hp}`,[nc.Keyword]:`color:${Cc.keyword};${hp}`,[nc.Operator]:`color:${Cc.operator};${hp}`,[nc.ContextRef]:`color:${Cc.expression};${hp}`,[nc.Separator]:`color:${Cc.operator};${hp}`,[nc.Arrow]:`color:${Cc.operator};${hp}`,[nc.Bracket]:`color:${Cc.operator};${hp}`,[nc.Paren]:`color:${Cc.paren};${hp}`,[nc.Whitespace]:hp},pp=[[/claude|anthropic/i,"anthropic"],[/gpt|openai|o1|o3|o4/i,"openai"],[/gemini|google/i,"gemini"],[/azure|microsoft/i,"azure"],[/deepseek/i,"deepseek"]],mp=(t,e=!1)=>{const i=cc(t||"",e?Gd:Kd),o=[];for(const t of i){const e=!!up[t.type],i=o[o.length-1];i&&i.isExpr===e?i.tokens.push(t):o.push({isExpr:e,tokens:[t]})}const n=t=>{const e=up[t.type];if(!e){const e=t.text.split("\n");return V`${e.map((t,e)=>V`${e>0?V`<br />`:null}${t}`)}`}const i=t.text.split("\n");return V`${i.map((t,i)=>V`${i>0?V`<br />`:null}${t?V`<span style="${e}">${t}</span>`:null}`)}`};return V`${o.map(t=>{const e=V`${t.tokens.map(n)}`;return t.isExpr?V`<span style="hyphens:none">${e}</span>`:e})}`},gp=(t,e,i=3)=>V`<div
     style="display: -webkit-box; -webkit-line-clamp: ${i}; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
     title="${e}"
   >
@@ -9370,6 +9299,7 @@ background: #ccc;
       >`)}return o},yp=t=>{const e=[],i=4===t.length?4:Math.min(3,t.length);for(let o=0;o<i;o++){const i=t[o];i.uuid&&i.eventType?e.push(xp({uuid:i.uuid,name:i.name},i.eventType,i.icon)):e.push(vp(i.name,i.icon,i.content))}if(t.length>3&&4!==t.length){const i=t.length-3;e.push(V`<temba-label type="neutral" style=${fp}
         >+${i} more</temba-label
       >`)}return e},xp=(t,e,i)=>{const o=Ic(i);return V`<temba-label
+    class="linked-pill"
     icon=${i||""}
     type=${o||"neutral"}
     clickable
@@ -9999,13 +9929,18 @@ background: #ccc;
         background: repeating-linear-gradient(120deg, tomato, tomato 6px, #ff7056 0, #ff7056 18px) !important;
       }
 
-      /* Disable links on actions/nodes with issues */
+      /* Disable links on actions/nodes with issues so clicks fall through
+         to open the editor instead of navigating. */
       .action-content.has-issues .linked-name div,
       .node.has-issues > .router .linked-name div {
         text-decoration: none !important;
         cursor: default !important;
         pointer-events: none;
       }
+      .action-content.has-issues .linked-pill,
+      .node.has-issues > .router .linked-pill {
+        pointer-events: none;
+      }
 
       .action.sortable {
         display: flex;
@@ -10359,7 +10294,7 @@ background: #ccc;
       .touch-device .add-action-button {
         opacity: 0.8 !important;
       }
-  }`}constructor(){super(),this.exitRemovalTimeouts=new Map,this.connectionTimeout=null,this.exitRemovingState=new Set,this.actionRemovalTimeouts=new Map,this.actionRemovingState=new Set,this.actionClickStartPos=null,this.pendingActionClick=null,this.nodeClickStartPos=null,this.pendingNodeClick=null,this.draggedActionHeight=0,this.resizeObserver=null,this.externalDragInfo=null,this.showLastActionPlaceholder=!1,this.lastActionPlaceholderHeight=60,this.handleActionOrderChanged=this.handleActionOrderChanged.bind(this),this.handleActionDragStart=this.handleActionDragStart.bind(this),this.handleActionDragExternal=this.handleActionDragExternal.bind(this),this.handleActionDragInternal=this.handleActionDragInternal.bind(this),this.handleActionDragStop=this.handleActionDragStop.bind(this),this.handleExternalActionDragOver=this.handleExternalActionDragOver.bind(this),this.handleExternalActionDrop=this.handleExternalActionDrop.bind(this),this.handleExternalActionDragLeave=this.handleExternalActionDragLeave.bind(this),this.handleActionShowGhost=this.handleActionShowGhost.bind(this),this.handleActionHideGhost=this.handleActionHideGhost.bind(this),this.handleActionShowOriginal=this.handleActionShowOriginal.bind(this),this.handleActionHideOriginal=this.handleActionHideOriginal.bind(this)}connectedCallback(){super.connectedCallback(),this.addEventListener("action-drag-over",this.handleExternalActionDragOver),this.addEventListener("action-drop",this.handleExternalActionDrop),this.addEventListener("action-drag-leave",this.handleExternalActionDragLeave),this.addEventListener("action-show-ghost",this.handleActionShowGhost),this.addEventListener("action-hide-ghost",this.handleActionHideGhost),this.addEventListener("action-show-original",this.handleActionShowOriginal),this.addEventListener("action-hide-original",this.handleActionHideOriginal),this.resizeObserver=new ResizeObserver(()=>{this.plumber&&this.node&&this.plumber.revalidate([this.node.uuid])}),this.resizeObserver.observe(this)}updated(t){var e;if(super.updated(t),t.get("ui")&&t.has("ui"))for(let t=25;t<=350;t+=25)setTimeout(()=>{this.plumber.revalidate([this.node.uuid])},t);if(t.has("node")){if(this.plumber){this.connectionTimeout&&clearTimeout(this.connectionTimeout);const t=this.node.exits.map(t=>t.uuid);this.plumber.removeNodeConnections(this.node.uuid,t),this.connectionTimeout=window.setTimeout(()=>{var t;if("terminal"!==(null===(t=this.ui)||void 0===t?void 0:t.type))for(const t of this.node.exits)this.plumber.makeSource(t.uuid),t.destination_uuid&&this.plumber.connectIds(this.node.uuid,t.uuid,t.destination_uuid);this.connectionTimeout=null,this.plumber.revalidate([this.node.uuid])},0)}const t=this.parentElement;if(t&&this.ui){const i=t.getBoundingClientRect();null===(e=Fd())||void 0===e||e.getState().expandCanvas(this.ui.position.left+i.width,this.ui.position.top+i.height)}}}disconnectedCallback(){this.plumber&&this.node&&(this.connectionTimeout&&(clearTimeout(this.connectionTimeout),this.connectionTimeout=null),this.plumber.forgetNode(this.node.uuid)),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),super.disconnectedCallback(),this.removeEventListener("action-drag-over",this.handleExternalActionDragOver),this.removeEventListener("action-drop",this.handleExternalActionDrop),this.removeEventListener("action-drag-leave",this.handleExternalActionDragLeave),this.removeEventListener("action-show-ghost",this.handleActionShowGhost),this.removeEventListener("action-hide-ghost",this.handleActionHideGhost),this.removeEventListener("action-show-original",this.handleActionShowOriginal),this.removeEventListener("action-hide-original",this.handleActionHideOriginal),this.exitRemovalTimeouts.forEach(t=>{clearTimeout(t)}),this.exitRemovalTimeouts.clear(),this.actionRemovalTimeouts.forEach(t=>{clearTimeout(t)}),this.actionRemovalTimeouts.clear(),this.exitRemovingState.clear(),this.actionRemovingState.clear(),this.plumber&&this.plumber.removeNodeConnections(this.node.uuid,this.node.exits.map(t=>t.uuid))}handleExitClick(t,e){t.preventDefault(),t.stopPropagation();const i=e.uuid;if(!e.destination_uuid)return;if(this.exitRemovingState.has(i))return void this.disconnectExit(e);this.exitRemovingState.add(i),this.requestUpdate(),this.plumber.setConnectionRemovingState(i,!0),this.exitRemovalTimeouts.has(i)&&clearTimeout(this.exitRemovalTimeouts.get(i));const o=window.setTimeout(()=>{this.exitRemovingState.delete(i),this.exitRemovalTimeouts.delete(i),this.plumber.setConnectionRemovingState(i,!1),this.requestUpdate()},1500);this.exitRemovalTimeouts.set(i,o)}disconnectExit(t){var e;const i=t.uuid;this.exitRemovingState.delete(i),this.plumber.setConnectionRemovingState(i,!1),this.exitRemovalTimeouts.has(i)&&(clearTimeout(this.exitRemovalTimeouts.get(i)),this.exitRemovalTimeouts.delete(i)),this.plumber.removeExitConnection(i);const o={...t,destination_uuid:null},n=this.node.exits.map(t=>t.uuid===i?o:t),s={...this.node,exits:n};null===(e=Fd())||void 0===e||e.getState().updateNode(this.node.uuid,s),this.requestUpdate()}handleActionRemoveClick(t,e,i){t.preventDefault(),t.stopPropagation();const o=e.uuid;if(this.actionRemovingState.has(o))return void this.removeAction(e,i);this.actionRemovingState.add(o),this.requestUpdate(),this.actionRemovalTimeouts.has(o)&&clearTimeout(this.actionRemovalTimeouts.get(o));const n=window.setTimeout(()=>{this.actionRemovingState.delete(o),this.actionRemovalTimeouts.delete(o),this.requestUpdate()},1e3);this.actionRemovalTimeouts.set(o,n)}removeAction(t,e){var i;const o=t.uuid;this.actionRemovingState.delete(o),this.actionRemovalTimeouts.has(o)&&(clearTimeout(this.actionRemovalTimeouts.get(o)),this.actionRemovalTimeouts.delete(o));const n=this.node.actions.filter(t=>t.uuid!==o);if(0===n.length)this.fireCustomEvent(Uo.NodeDeleted,{uuid:this.node.uuid});else{const t={...this.node,actions:n};null===(i=Fd())||void 0===i||i.getState().updateNode(this.node.uuid,t),this.requestUpdate()}}handleNodeRemoveClick(t){t.preventDefault(),t.stopPropagation();const e=this.node.uuid;if(this.actionRemovingState.has(e))return void this.removeNode();this.actionRemovingState.add(e),this.requestUpdate(),this.actionRemovalTimeouts.has(e)&&clearTimeout(this.actionRemovalTimeouts.get(e));const i=window.setTimeout(()=>{this.actionRemovingState.delete(e),this.actionRemovalTimeouts.delete(e),this.requestUpdate()},1e3);this.actionRemovalTimeouts.set(e,i)}removeNode(){const t=this.node.uuid;this.actionRemovingState.delete(t),this.actionRemovalTimeouts.has(t)&&(clearTimeout(this.actionRemovalTimeouts.get(t)),this.actionRemovalTimeouts.delete(t)),this.fireCustomEvent(Uo.NodeDeleted,{uuid:this.node.uuid})}handleActionOrderChanged(t){var e;const[i,o]=t.detail.swap;if(this.externalDragInfo)return;const n=[...this.node.actions],s=n.splice(i,1)[0];n.splice(o,0,s),this.node={...this.node,actions:n},null===(e=Fd())||void 0===e||e.getState().updateNode(this.node.uuid,{...this.node,actions:n})}handleActionDragStart(t){const e=t.detail.id,i=this.querySelector(`#${e}`);this.draggedActionHeight=i?i.offsetHeight:60,1===this.node.actions.length&&(this.showLastActionPlaceholder=!0,this.lastActionPlaceholderHeight=this.draggedActionHeight,this.requestUpdate())}handleActionDragExternal(t){t.stopPropagation();const e=t.detail.id.split("-");if(e.length<2||isNaN(parseInt(e[1],10)))return;const i=parseInt(e[1],10),o=this.node.actions[i],n=1===this.node.actions.length;this.fireCustomEvent(Uo.DragExternal,{action:o,nodeUuid:this.node.uuid,actionIndex:i,mouseX:t.detail.mouseX,mouseY:t.detail.mouseY,actionHeight:this.draggedActionHeight,isLastAction:n})}handleActionDragInternal(t){t.stopPropagation(),this.fireCustomEvent(Uo.DragInternal,{})}handleActionDragStop(t){const e=t.detail.isExternal;if(this.showLastActionPlaceholder=!1,e){t.stopPropagation();const e=t.detail.id.split("-");if(e.length<2||isNaN(Number(e[1])))return;const i=parseInt(e[1],10),o=this.node.actions[i],n=1===this.node.actions.length;this.fireCustomEvent(Uo.DragStop,{action:o,nodeUuid:this.node.uuid,actionIndex:i,isExternal:!0,isLastAction:n,mouseX:t.detail.mouseX,mouseY:t.detail.mouseY})}this.requestUpdate()}getTopCenter(t){const e=t.getBoundingClientRect();return{x:e.left+e.width/2,y:e.top}}isActiveLink(t,e){var i,o,n;return!!t.closest(".linked-name")&&(e?!(null===(i=this.issuesByAction)||void 0===i?void 0:i.has(e.uuid)):!((null===(o=this.issuesByNode)||void 0===o?void 0:o.has(this.node.uuid))||(null===(n=this.node.actions)||void 0===n?void 0:n.some(t=>{var e;return null===(e=this.issuesByAction)||void 0===e?void 0:e.has(t.uuid)}))))}handleActionMouseDown(t,e){if(lp(t))return;const i=t.target;i.closest(".remove-button")||i.closest(".drag-handle")||this.isActiveLink(i,e)||this.actionRemovingState.has(e.uuid)||(this.actionClickStartPos={x:t.clientX,y:t.clientY},this.pendingActionClick={action:e,event:t})}handleActionMouseUp(t,e){if(!this.pendingActionClick||this.pendingActionClick.action.uuid!==e.uuid)return this.actionClickStartPos=null,void(this.pendingActionClick=null);const i=t.target;if(i.closest(".remove-button")||i.closest(".drag-handle")||this.isActiveLink(i,e)||this.actionRemovingState.has(e.uuid))return this.actionClickStartPos=null,void(this.pendingActionClick=null);if(this.actionClickStartPos){const i=t.clientX-this.actionClickStartPos.x,o=t.clientY-this.actionClickStartPos.y,n=Math.sqrt(i*i+o*o),s=this.closest("temba-flow-editor"),r=null==s?void 0:s.dragging;if(n<=5&&(!s||!r)){const i=t.currentTarget,o=i?this.getTopCenter(i):{x:t.clientX,y:t.clientY};this.fireCustomEvent(Uo.ActionEditRequested,{action:e,nodeUuid:this.node.uuid,originX:o.x,originY:o.y})}}this.actionClickStartPos=null,this.pendingActionClick=null}handleActionTouchStart(t,e){const i=t.target;if(i.closest(".remove-button")||i.closest(".drag-handle")||this.isActiveLink(i,e)||this.actionRemovingState.has(e.uuid))return;const o=t.touches[0];o&&(this.actionClickStartPos={x:o.clientX,y:o.clientY},this.pendingActionClick={action:e,event:t})}handleActionTouchEnd(t,e){if(!this.pendingActionClick||this.pendingActionClick.action.uuid!==e.uuid)return this.actionClickStartPos=null,void(this.pendingActionClick=null);const i=t.target;if(i.closest(".remove-button")||i.closest(".drag-handle")||this.isActiveLink(i,e)||this.actionRemovingState.has(e.uuid))return this.actionClickStartPos=null,void(this.pendingActionClick=null);const o=t.changedTouches[0];if(this.actionClickStartPos&&o){const i=o.clientX-this.actionClickStartPos.x,n=o.clientY-this.actionClickStartPos.y,s=Math.sqrt(i*i+n*n),r=this.closest("temba-flow-editor"),a=null==r?void 0:r.dragging;if(s<=5&&(!r||!a)){const i=t.currentTarget,n=i?this.getTopCenter(i):{x:o.clientX,y:o.clientY};this.fireCustomEvent(Uo.ActionEditRequested,{action:e,nodeUuid:this.node.uuid,originX:n.x,originY:n.y})}}this.actionClickStartPos=null,this.pendingActionClick=null}handleActionClick(t,e){t.preventDefault(),t.stopPropagation();t.target.closest(".remove-button")||this.actionRemovingState.has(e.uuid)||this.fireCustomEvent(Uo.ActionEditRequested,{action:e,nodeUuid:this.node.uuid})}handleNodeEditClick(t){t.preventDefault(),t.stopPropagation();t.target.closest(".remove-button")||this.actionRemovingState.has(this.node.uuid)||this.node.router&&(this.node.actions&&1===this.node.actions.length?this.fireCustomEvent(Uo.ActionEditRequested,{action:this.node.actions[0],nodeUuid:this.node.uuid}):this.fireCustomEvent(Uo.NodeEditRequested,{node:this.node,nodeUI:this.ui}))}handleNodeMouseDown(t){if(lp(t))return;const e=t.target;e.closest(".remove-button")||e.closest(".exit")||e.closest(".exit-wrapper")||e.closest(".drag-handle")||this.isActiveLink(e)||this.actionRemovingState.has(this.node.uuid)||(this.nodeClickStartPos={x:t.clientX,y:t.clientY},this.pendingNodeClick={event:t})}handleNodeMouseUp(t){if(!this.pendingNodeClick)return this.nodeClickStartPos=null,void(this.pendingNodeClick=null);const e=t.target;if(e.closest(".remove-button")||e.closest(".exit")||e.closest(".exit-wrapper")||e.closest(".drag-handle")||this.isActiveLink(e)||this.actionRemovingState.has(this.node.uuid))return this.nodeClickStartPos=null,void(this.pendingNodeClick=null);if(this.nodeClickStartPos){const e=t.clientX-this.nodeClickStartPos.x,i=t.clientY-this.nodeClickStartPos.y,o=Math.sqrt(e*e+i*i),n=this.closest("temba-flow-editor"),s=null==n?void 0:n.dragging;if(o<=5&&(!n||!s)&&this.node.router){const t=this.getTopCenter(this);this.node.actions&&1===this.node.actions.length?this.fireCustomEvent(Uo.ActionEditRequested,{action:this.node.actions[0],nodeUuid:this.node.uuid,originX:t.x,originY:t.y}):this.fireCustomEvent(Uo.NodeEditRequested,{node:this.node,nodeUI:this.ui,originX:t.x,originY:t.y})}}this.nodeClickStartPos=null,this.pendingNodeClick=null}handleNodeTouchStart(t){const e=t.target;if(e.closest(".remove-button")||e.closest(".exit")||e.closest(".exit-wrapper")||e.closest(".drag-handle")||this.isActiveLink(e)||this.actionRemovingState.has(this.node.uuid))return;const i=t.touches[0];i&&(this.nodeClickStartPos={x:i.clientX,y:i.clientY},this.pendingNodeClick={event:t})}handleNodeTouchEnd(t){if(!this.pendingNodeClick)return this.nodeClickStartPos=null,void(this.pendingNodeClick=null);const e=t.target;if(e.closest(".remove-button")||e.closest(".exit")||e.closest(".exit-wrapper")||e.closest(".drag-handle")||this.isActiveLink(e)||this.actionRemovingState.has(this.node.uuid))return this.nodeClickStartPos=null,void(this.pendingNodeClick=null);const i=t.changedTouches[0];if(this.nodeClickStartPos&&i){const t=i.clientX-this.nodeClickStartPos.x,e=i.clientY-this.nodeClickStartPos.y,o=Math.sqrt(t*t+e*e),n=this.closest("temba-flow-editor"),s=null==n?void 0:n.dragging;if(o<=5&&(!n||!s)&&this.node.router){const t=this.getTopCenter(this);this.node.actions&&1===this.node.actions.length?this.fireCustomEvent(Uo.ActionEditRequested,{action:this.node.actions[0],nodeUuid:this.node.uuid,originX:t.x,originY:t.y}):this.fireCustomEvent(Uo.NodeEditRequested,{node:this.node,nodeUI:this.ui,originX:t.x,originY:t.y})}}this.nodeClickStartPos=null,this.pendingNodeClick=null}handleAddActionClick(t){t.preventDefault(),t.stopPropagation(),this.fireCustomEvent(Uo.AddActionRequested,{nodeUuid:this.node.uuid})}calculateDropIndex(t){var e,i;const o=this.querySelector("temba-sortable-list");if(!o||!this.node.actions)return null!==(i=null===(e=this.node.actions)||void 0===e?void 0:e.length)&&void 0!==i?i:0;const n=Array.from(o.querySelectorAll(".action.sortable:not(.drop-placeholder)"));if(0===n.length)return 0;for(let e=0;e<n.length;e++){const i=n[e].getBoundingClientRect();if(t<i.top+i.height/2)return e}return n.length}handleExternalActionDragOver(t){if("execute_actions"!==this.ui.type)return;const{action:e,sourceNodeUuid:i,actionIndex:o,mouseY:n,actionHeight:s}=t.detail;if(i===this.node.uuid)return;const r=this.calculateDropIndex(n);this.externalDragInfo={action:e,sourceNodeUuid:i,actionIndex:o,dropIndex:r,actionHeight:s||60},this.requestUpdate()}handleExternalActionDragLeave(t){this.externalDragInfo=null,this.requestUpdate()}handleActionShowGhost(t){if(this.querySelector("temba-sortable-list")){const t=document.querySelector(".ghost");t&&(t.style.display="block")}}handleActionHideGhost(t){if(this.querySelector("temba-sortable-list")){const t=document.querySelector(".ghost");t&&(t.style.display="none")}}handleActionShowOriginal(t){const e=this.querySelector("temba-sortable-list");null==e||e.setOriginalVisible(!0),this.showLastActionPlaceholder=!1,this.requestUpdate()}handleActionHideOriginal(t){const e=this.querySelector("temba-sortable-list");null==e||e.setOriginalVisible(!1),1===this.node.actions.length&&(this.showLastActionPlaceholder=!0),this.requestUpdate()}handleExternalActionDrop(t){var e,i,o,n,s,r,a;if("execute_actions"!==this.ui.type)return;const{action:l,sourceNodeUuid:d,actionIndex:c,isCopy:h}=t.detail;if(d===this.node.uuid)return;const u=null!==(n=null!==(i=null===(e=this.externalDragInfo)||void 0===e?void 0:e.dropIndex)&&void 0!==i?i:null===(o=this.node.actions)||void 0===o?void 0:o.length)&&void 0!==n?n:0;this.externalDragInfo=null;const p=Fd();if(!p)return;const m=p.getState().flowDefinition;if(!m)return;const g=m.nodes.find(t=>t.uuid===d);if(!g)return;const f=h?{...l,uuid:Gt()}:l,v=[...this.node.actions];v.splice(u,0,f);const b={...this.node,actions:v};if(null===(s=Fd())||void 0===s||s.getState().updateNode(this.node.uuid,b),h){const t=m.localization;if(t)for(const e of Object.keys(t)){const i=null===(r=t[e])||void 0===r?void 0:r[l.uuid];i&&p.getState().updateLocalization(e,f.uuid,JSON.parse(JSON.stringify(i)))}}if(!h){const t=g.actions.filter((t,e)=>e!==c);if(0===t.length)this.fireCustomEvent(Uo.NodeDeleted,{uuid:d});else{const e={...g,actions:t};null===(a=Fd())||void 0===a||a.getState().updateNode(d,e)}}this.requestUpdate(),this.fireCustomEvent(Uo.SizeChanged,{uuid:this.node.uuid})}renderTitle(t,e,i,o=!1){var n,s,r,a,l;const d=t.group?null===(n=Rp[t.group])||void 0===n?void 0:n.color:"#aaaaaa",c="terminal"===(null===(s=this.ui)||void 0===s?void 0:s.type);return V`<div class="cn-title" style="background:${d}">
+  }`}constructor(){super(),this.exitRemovalTimeouts=new Map,this.connectionTimeout=null,this.exitRemovingState=new Set,this.actionRemovalTimeouts=new Map,this.actionRemovingState=new Set,this.actionClickStartPos=null,this.pendingActionClick=null,this.nodeClickStartPos=null,this.pendingNodeClick=null,this.draggedActionHeight=0,this.resizeObserver=null,this.externalDragInfo=null,this.showLastActionPlaceholder=!1,this.lastActionPlaceholderHeight=60,this.handleActionOrderChanged=this.handleActionOrderChanged.bind(this),this.handleActionDragStart=this.handleActionDragStart.bind(this),this.handleActionDragExternal=this.handleActionDragExternal.bind(this),this.handleActionDragInternal=this.handleActionDragInternal.bind(this),this.handleActionDragStop=this.handleActionDragStop.bind(this),this.handleExternalActionDragOver=this.handleExternalActionDragOver.bind(this),this.handleExternalActionDrop=this.handleExternalActionDrop.bind(this),this.handleExternalActionDragLeave=this.handleExternalActionDragLeave.bind(this),this.handleActionShowGhost=this.handleActionShowGhost.bind(this),this.handleActionHideGhost=this.handleActionHideGhost.bind(this),this.handleActionShowOriginal=this.handleActionShowOriginal.bind(this),this.handleActionHideOriginal=this.handleActionHideOriginal.bind(this)}connectedCallback(){super.connectedCallback(),this.addEventListener("action-drag-over",this.handleExternalActionDragOver),this.addEventListener("action-drop",this.handleExternalActionDrop),this.addEventListener("action-drag-leave",this.handleExternalActionDragLeave),this.addEventListener("action-show-ghost",this.handleActionShowGhost),this.addEventListener("action-hide-ghost",this.handleActionHideGhost),this.addEventListener("action-show-original",this.handleActionShowOriginal),this.addEventListener("action-hide-original",this.handleActionHideOriginal),this.resizeObserver=new ResizeObserver(()=>{this.plumber&&this.node&&this.plumber.revalidate([this.node.uuid])}),this.resizeObserver.observe(this)}updated(t){var e;if(super.updated(t),t.get("ui")&&t.has("ui"))for(let t=25;t<=350;t+=25)setTimeout(()=>{this.plumber.revalidate([this.node.uuid])},t);if(t.has("node")){if(this.plumber){this.connectionTimeout&&clearTimeout(this.connectionTimeout);const t=this.node.exits.map(t=>t.uuid);this.plumber.removeNodeConnections(this.node.uuid,t),this.connectionTimeout=window.setTimeout(()=>{var t;if("terminal"!==(null===(t=this.ui)||void 0===t?void 0:t.type))for(const t of this.node.exits)this.plumber.makeSource(t.uuid),t.destination_uuid&&this.plumber.connectIds(this.node.uuid,t.uuid,t.destination_uuid);this.connectionTimeout=null,this.plumber.revalidate([this.node.uuid])},0)}const t=this.parentElement;if(t&&this.ui){const i=t.getBoundingClientRect();null===(e=Fd())||void 0===e||e.getState().expandCanvas(this.ui.position.left+i.width,this.ui.position.top+i.height)}}}disconnectedCallback(){this.plumber&&this.node&&(this.connectionTimeout&&(clearTimeout(this.connectionTimeout),this.connectionTimeout=null),this.plumber.forgetNode(this.node.uuid)),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),super.disconnectedCallback(),this.removeEventListener("action-drag-over",this.handleExternalActionDragOver),this.removeEventListener("action-drop",this.handleExternalActionDrop),this.removeEventListener("action-drag-leave",this.handleExternalActionDragLeave),this.removeEventListener("action-show-ghost",this.handleActionShowGhost),this.removeEventListener("action-hide-ghost",this.handleActionHideGhost),this.removeEventListener("action-show-original",this.handleActionShowOriginal),this.removeEventListener("action-hide-original",this.handleActionHideOriginal),this.exitRemovalTimeouts.forEach(t=>{clearTimeout(t)}),this.exitRemovalTimeouts.clear(),this.actionRemovalTimeouts.forEach(t=>{clearTimeout(t)}),this.actionRemovalTimeouts.clear(),this.exitRemovingState.clear(),this.actionRemovingState.clear(),this.plumber&&this.plumber.removeNodeConnections(this.node.uuid,this.node.exits.map(t=>t.uuid))}handleExitClick(t,e){t.preventDefault(),t.stopPropagation();const i=e.uuid;if(!e.destination_uuid)return;if(this.exitRemovingState.has(i))return void this.disconnectExit(e);this.exitRemovingState.add(i),this.requestUpdate(),this.plumber.setConnectionRemovingState(i,!0),this.exitRemovalTimeouts.has(i)&&clearTimeout(this.exitRemovalTimeouts.get(i));const o=window.setTimeout(()=>{this.exitRemovingState.delete(i),this.exitRemovalTimeouts.delete(i),this.plumber.setConnectionRemovingState(i,!1),this.requestUpdate()},1500);this.exitRemovalTimeouts.set(i,o)}disconnectExit(t){var e;const i=t.uuid;this.exitRemovingState.delete(i),this.plumber.setConnectionRemovingState(i,!1),this.exitRemovalTimeouts.has(i)&&(clearTimeout(this.exitRemovalTimeouts.get(i)),this.exitRemovalTimeouts.delete(i)),this.plumber.removeExitConnection(i);const o={...t,destination_uuid:null},n=this.node.exits.map(t=>t.uuid===i?o:t),s={...this.node,exits:n};null===(e=Fd())||void 0===e||e.getState().updateNode(this.node.uuid,s),this.requestUpdate()}handleActionRemoveClick(t,e,i){t.preventDefault(),t.stopPropagation();const o=e.uuid;if(this.actionRemovingState.has(o))return void this.removeAction(e,i);this.actionRemovingState.add(o),this.requestUpdate(),this.actionRemovalTimeouts.has(o)&&clearTimeout(this.actionRemovalTimeouts.get(o));const n=window.setTimeout(()=>{this.actionRemovingState.delete(o),this.actionRemovalTimeouts.delete(o),this.requestUpdate()},1e3);this.actionRemovalTimeouts.set(o,n)}removeAction(t,e){var i;const o=t.uuid;this.actionRemovingState.delete(o),this.actionRemovalTimeouts.has(o)&&(clearTimeout(this.actionRemovalTimeouts.get(o)),this.actionRemovalTimeouts.delete(o));const n=this.node.actions.filter(t=>t.uuid!==o);if(0===n.length)this.fireCustomEvent(Uo.NodeDeleted,{uuid:this.node.uuid});else{const t={...this.node,actions:n};null===(i=Fd())||void 0===i||i.getState().updateNode(this.node.uuid,t),this.requestUpdate()}}handleNodeRemoveClick(t){t.preventDefault(),t.stopPropagation();const e=this.node.uuid;if(this.actionRemovingState.has(e))return void this.removeNode();this.actionRemovingState.add(e),this.requestUpdate(),this.actionRemovalTimeouts.has(e)&&clearTimeout(this.actionRemovalTimeouts.get(e));const i=window.setTimeout(()=>{this.actionRemovingState.delete(e),this.actionRemovalTimeouts.delete(e),this.requestUpdate()},1e3);this.actionRemovalTimeouts.set(e,i)}removeNode(){const t=this.node.uuid;this.actionRemovingState.delete(t),this.actionRemovalTimeouts.has(t)&&(clearTimeout(this.actionRemovalTimeouts.get(t)),this.actionRemovalTimeouts.delete(t)),this.fireCustomEvent(Uo.NodeDeleted,{uuid:this.node.uuid})}handleActionOrderChanged(t){var e;const[i,o]=t.detail.swap;if(this.externalDragInfo)return;const n=[...this.node.actions],s=n.splice(i,1)[0];n.splice(o,0,s),this.node={...this.node,actions:n},null===(e=Fd())||void 0===e||e.getState().updateNode(this.node.uuid,{...this.node,actions:n})}handleActionDragStart(t){const e=t.detail.id,i=this.querySelector(`#${e}`);this.draggedActionHeight=i?i.offsetHeight:60,1===this.node.actions.length&&(this.showLastActionPlaceholder=!0,this.lastActionPlaceholderHeight=this.draggedActionHeight,this.requestUpdate())}handleActionDragExternal(t){t.stopPropagation();const e=t.detail.id.split("-");if(e.length<2||isNaN(parseInt(e[1],10)))return;const i=parseInt(e[1],10),o=this.node.actions[i],n=1===this.node.actions.length;this.fireCustomEvent(Uo.DragExternal,{action:o,nodeUuid:this.node.uuid,actionIndex:i,mouseX:t.detail.mouseX,mouseY:t.detail.mouseY,actionHeight:this.draggedActionHeight,isLastAction:n})}handleActionDragInternal(t){t.stopPropagation(),this.fireCustomEvent(Uo.DragInternal,{})}handleActionDragStop(t){const e=t.detail.isExternal;if(this.showLastActionPlaceholder=!1,e){t.stopPropagation();const e=t.detail.id.split("-");if(e.length<2||isNaN(Number(e[1])))return;const i=parseInt(e[1],10),o=this.node.actions[i],n=1===this.node.actions.length;this.fireCustomEvent(Uo.DragStop,{action:o,nodeUuid:this.node.uuid,actionIndex:i,isExternal:!0,isLastAction:n,mouseX:t.detail.mouseX,mouseY:t.detail.mouseY})}this.requestUpdate()}getTopCenter(t){const e=t.getBoundingClientRect();return{x:e.left+e.width/2,y:e.top}}isActiveLink(t,e){var i,o,n;return!(!t.closest(".linked-name")&&!t.closest(".linked-pill"))&&(e?!(null===(i=this.issuesByAction)||void 0===i?void 0:i.has(e.uuid)):!((null===(o=this.issuesByNode)||void 0===o?void 0:o.has(this.node.uuid))||(null===(n=this.node.actions)||void 0===n?void 0:n.some(t=>{var e;return null===(e=this.issuesByAction)||void 0===e?void 0:e.has(t.uuid)}))))}handleActionMouseDown(t,e){if(lp(t))return;const i=t.target;i.closest(".remove-button")||i.closest(".drag-handle")||this.isActiveLink(i,e)||this.actionRemovingState.has(e.uuid)||(this.actionClickStartPos={x:t.clientX,y:t.clientY},this.pendingActionClick={action:e,event:t})}handleActionMouseUp(t,e){if(!this.pendingActionClick||this.pendingActionClick.action.uuid!==e.uuid)return this.actionClickStartPos=null,void(this.pendingActionClick=null);const i=t.target;if(i.closest(".remove-button")||i.closest(".drag-handle")||this.isActiveLink(i,e)||this.actionRemovingState.has(e.uuid))return this.actionClickStartPos=null,void(this.pendingActionClick=null);if(this.actionClickStartPos){const i=t.clientX-this.actionClickStartPos.x,o=t.clientY-this.actionClickStartPos.y,n=Math.sqrt(i*i+o*o),s=this.closest("temba-flow-editor"),r=null==s?void 0:s.dragging;if(n<=5&&(!s||!r)){const i=t.currentTarget,o=i?this.getTopCenter(i):{x:t.clientX,y:t.clientY};this.fireCustomEvent(Uo.ActionEditRequested,{action:e,nodeUuid:this.node.uuid,originX:o.x,originY:o.y})}}this.actionClickStartPos=null,this.pendingActionClick=null}handleActionTouchStart(t,e){const i=t.target;if(i.closest(".remove-button")||i.closest(".drag-handle")||this.isActiveLink(i,e)||this.actionRemovingState.has(e.uuid))return;const o=t.touches[0];o&&(this.actionClickStartPos={x:o.clientX,y:o.clientY},this.pendingActionClick={action:e,event:t})}handleActionTouchEnd(t,e){if(!this.pendingActionClick||this.pendingActionClick.action.uuid!==e.uuid)return this.actionClickStartPos=null,void(this.pendingActionClick=null);const i=t.target;if(i.closest(".remove-button")||i.closest(".drag-handle")||this.isActiveLink(i,e)||this.actionRemovingState.has(e.uuid))return this.actionClickStartPos=null,void(this.pendingActionClick=null);const o=t.changedTouches[0];if(this.actionClickStartPos&&o){const i=o.clientX-this.actionClickStartPos.x,n=o.clientY-this.actionClickStartPos.y,s=Math.sqrt(i*i+n*n),r=this.closest("temba-flow-editor"),a=null==r?void 0:r.dragging;if(s<=5&&(!r||!a)){const i=t.currentTarget,n=i?this.getTopCenter(i):{x:o.clientX,y:o.clientY};this.fireCustomEvent(Uo.ActionEditRequested,{action:e,nodeUuid:this.node.uuid,originX:n.x,originY:n.y})}}this.actionClickStartPos=null,this.pendingActionClick=null}handleActionClick(t,e){t.preventDefault(),t.stopPropagation();t.target.closest(".remove-button")||this.actionRemovingState.has(e.uuid)||this.fireCustomEvent(Uo.ActionEditRequested,{action:e,nodeUuid:this.node.uuid})}handleNodeEditClick(t){t.preventDefault(),t.stopPropagation();t.target.closest(".remove-button")||this.actionRemovingState.has(this.node.uuid)||this.node.router&&(this.node.actions&&1===this.node.actions.length?this.fireCustomEvent(Uo.ActionEditRequested,{action:this.node.actions[0],nodeUuid:this.node.uuid}):this.fireCustomEvent(Uo.NodeEditRequested,{node:this.node,nodeUI:this.ui}))}handleNodeMouseDown(t){if(lp(t))return;const e=t.target;e.closest(".remove-button")||e.closest(".exit")||e.closest(".exit-wrapper")||e.closest(".drag-handle")||this.isActiveLink(e)||this.actionRemovingState.has(this.node.uuid)||(this.nodeClickStartPos={x:t.clientX,y:t.clientY},this.pendingNodeClick={event:t})}handleNodeMouseUp(t){if(!this.pendingNodeClick)return this.nodeClickStartPos=null,void(this.pendingNodeClick=null);const e=t.target;if(e.closest(".remove-button")||e.closest(".exit")||e.closest(".exit-wrapper")||e.closest(".drag-handle")||this.isActiveLink(e)||this.actionRemovingState.has(this.node.uuid))return this.nodeClickStartPos=null,void(this.pendingNodeClick=null);if(this.nodeClickStartPos){const e=t.clientX-this.nodeClickStartPos.x,i=t.clientY-this.nodeClickStartPos.y,o=Math.sqrt(e*e+i*i),n=this.closest("temba-flow-editor"),s=null==n?void 0:n.dragging;if(o<=5&&(!n||!s)&&this.node.router){const t=this.getTopCenter(this);this.node.actions&&1===this.node.actions.length?this.fireCustomEvent(Uo.ActionEditRequested,{action:this.node.actions[0],nodeUuid:this.node.uuid,originX:t.x,originY:t.y}):this.fireCustomEvent(Uo.NodeEditRequested,{node:this.node,nodeUI:this.ui,originX:t.x,originY:t.y})}}this.nodeClickStartPos=null,this.pendingNodeClick=null}handleNodeTouchStart(t){const e=t.target;if(e.closest(".remove-button")||e.closest(".exit")||e.closest(".exit-wrapper")||e.closest(".drag-handle")||this.isActiveLink(e)||this.actionRemovingState.has(this.node.uuid))return;const i=t.touches[0];i&&(this.nodeClickStartPos={x:i.clientX,y:i.clientY},this.pendingNodeClick={event:t})}handleNodeTouchEnd(t){if(!this.pendingNodeClick)return this.nodeClickStartPos=null,void(this.pendingNodeClick=null);const e=t.target;if(e.closest(".remove-button")||e.closest(".exit")||e.closest(".exit-wrapper")||e.closest(".drag-handle")||this.isActiveLink(e)||this.actionRemovingState.has(this.node.uuid))return this.nodeClickStartPos=null,void(this.pendingNodeClick=null);const i=t.changedTouches[0];if(this.nodeClickStartPos&&i){const t=i.clientX-this.nodeClickStartPos.x,e=i.clientY-this.nodeClickStartPos.y,o=Math.sqrt(t*t+e*e),n=this.closest("temba-flow-editor"),s=null==n?void 0:n.dragging;if(o<=5&&(!n||!s)&&this.node.router){const t=this.getTopCenter(this);this.node.actions&&1===this.node.actions.length?this.fireCustomEvent(Uo.ActionEditRequested,{action:this.node.actions[0],nodeUuid:this.node.uuid,originX:t.x,originY:t.y}):this.fireCustomEvent(Uo.NodeEditRequested,{node:this.node,nodeUI:this.ui,originX:t.x,originY:t.y})}}this.nodeClickStartPos=null,this.pendingNodeClick=null}handleAddActionClick(t){t.preventDefault(),t.stopPropagation(),this.fireCustomEvent(Uo.AddActionRequested,{nodeUuid:this.node.uuid})}calculateDropIndex(t){var e,i;const o=this.querySelector("temba-sortable-list");if(!o||!this.node.actions)return null!==(i=null===(e=this.node.actions)||void 0===e?void 0:e.length)&&void 0!==i?i:0;const n=Array.from(o.querySelectorAll(".action.sortable:not(.drop-placeholder)"));if(0===n.length)return 0;for(let e=0;e<n.length;e++){const i=n[e].getBoundingClientRect();if(t<i.top+i.height/2)return e}return n.length}handleExternalActionDragOver(t){if("execute_actions"!==this.ui.type)return;const{action:e,sourceNodeUuid:i,actionIndex:o,mouseY:n,actionHeight:s}=t.detail;if(i===this.node.uuid)return;const r=this.calculateDropIndex(n);this.externalDragInfo={action:e,sourceNodeUuid:i,actionIndex:o,dropIndex:r,actionHeight:s||60},this.requestUpdate()}handleExternalActionDragLeave(t){this.externalDragInfo=null,this.requestUpdate()}handleActionShowGhost(t){if(this.querySelector("temba-sortable-list")){const t=document.querySelector(".ghost");t&&(t.style.display="block")}}handleActionHideGhost(t){if(this.querySelector("temba-sortable-list")){const t=document.querySelector(".ghost");t&&(t.style.display="none")}}handleActionShowOriginal(t){const e=this.querySelector("temba-sortable-list");null==e||e.setOriginalVisible(!0),this.showLastActionPlaceholder=!1,this.requestUpdate()}handleActionHideOriginal(t){const e=this.querySelector("temba-sortable-list");null==e||e.setOriginalVisible(!1),1===this.node.actions.length&&(this.showLastActionPlaceholder=!0),this.requestUpdate()}handleExternalActionDrop(t){var e,i,o,n,s,r,a;if("execute_actions"!==this.ui.type)return;const{action:l,sourceNodeUuid:d,actionIndex:c,isCopy:h}=t.detail;if(d===this.node.uuid)return;const u=null!==(n=null!==(i=null===(e=this.externalDragInfo)||void 0===e?void 0:e.dropIndex)&&void 0!==i?i:null===(o=this.node.actions)||void 0===o?void 0:o.length)&&void 0!==n?n:0;this.externalDragInfo=null;const p=Fd();if(!p)return;const m=p.getState().flowDefinition;if(!m)return;const g=m.nodes.find(t=>t.uuid===d);if(!g)return;const f=h?{...l,uuid:Gt()}:l,v=[...this.node.actions];v.splice(u,0,f);const b={...this.node,actions:v};if(null===(s=Fd())||void 0===s||s.getState().updateNode(this.node.uuid,b),h){const t=m.localization;if(t)for(const e of Object.keys(t)){const i=null===(r=t[e])||void 0===r?void 0:r[l.uuid];i&&p.getState().updateLocalization(e,f.uuid,JSON.parse(JSON.stringify(i)))}}if(!h){const t=g.actions.filter((t,e)=>e!==c);if(0===t.length)this.fireCustomEvent(Uo.NodeDeleted,{uuid:d});else{const e={...g,actions:t};null===(a=Fd())||void 0===a||a.getState().updateNode(d,e)}}this.requestUpdate(),this.fireCustomEvent(Uo.SizeChanged,{uuid:this.node.uuid})}renderTitle(t,e,i,o=!1){var n,s,r,a,l;const d=t.group?null===(n=Rp[t.group])||void 0===n?void 0:n.color:"#aaaaaa",c="terminal"===(null===(s=this.ui)||void 0===s?void 0:s.type);return V`<div class="cn-title" style="background:${d}">
       ${c?V`<div class="title-spacer"></div>`:"execute_actions"===(null===(r=this.ui)||void 0===r?void 0:r.type)||(null===(l=null===(a=this.node)||void 0===a?void 0:a.actions)||void 0===l?void 0:l.length)>1?V`<temba-icon
               class="drag-handle ${this.isReadOnly()?"read-only-hidden":""}"
               name="sort"
@@ -10497,7 +10432,7 @@ background: #ccc;
               <temba-icon name="add"></temba-icon>
             </div>`}
       </div>
-    `}}e([gt({type:Object})],vg.prototype,"plumber",void 0),e([gt({type:Object})],vg.prototype,"node",void 0),e([gt({type:Object})],vg.prototype,"ui",void 0),e([Nd(Rd,t=>t.isTranslating)],vg.prototype,"isTranslating",void 0),e([Nd(Rd,t=>t.languageCode)],vg.prototype,"languageCode",void 0),e([Nd(Rd,t=>t.viewingRevision)],vg.prototype,"viewingRevision",void 0),e([Nd(Rd,t=>t.flowDefinition)],vg.prototype,"flowDefinition",void 0),e([Nd(Rd,t=>t.getCurrentActivity())],vg.prototype,"activity",void 0),e([Nd(Rd,t=>t.issuesByNode)],vg.prototype,"issuesByNode",void 0),e([Nd(Rd,t=>t.issuesByAction)],vg.prototype,"issuesByAction",void 0);class bg{constructor(t){this.editor=t,this.isMouseDown=!1,this.shiftDragCopy=!1,this.currentDragIsCopy=!1,this.dragStartPos={x:0,y:0},this.originalDragItem=null,this.originalSelectedItems=null,this.dragHintTimer=null,this.autoScrollAnimationId=null,this.autoScrollDeltaX=0,this.autoScrollDeltaY=0,this.lastPointerPos=null,this.activeDragIsTouch=!1,this.isTouchDevice=!1,this.isTwoFingerPanning=!1,this.twoFingerDidPan=!1,this.twoFingerStartMidX=0,this.twoFingerStartMidY=0,this.twoFingerOnCanvas=!1,this.lastPanX=0,this.lastPanY=0,this.canvasMouseDown=!1,this.boundMouseMove=this.handleMouseMove.bind(this),this.boundMouseUp=this.handleMouseUp.bind(this),this.boundGlobalMouseDown=this.handleGlobalMouseDown.bind(this),this.boundKeyDown=this.handleKeyDown.bind(this),this.boundKeyUp=this.handleKeyUp.bind(this),this.boundWindowBlur=this.handleWindowBlur.bind(this),this.boundTouchMove=this.handleTouchMove.bind(this),this.boundTouchEnd=this.handleTouchEnd.bind(this),this.boundTouchCancel=this.handleTouchCancel.bind(this),this.boundCanvasTouchStart=this.handleCanvasTouchStart.bind(this)}setupListeners(){document.addEventListener("mousemove",this.boundMouseMove),document.addEventListener("mouseup",this.boundMouseUp),document.addEventListener("mousedown",this.boundGlobalMouseDown),document.addEventListener("keydown",this.boundKeyDown),document.addEventListener("keyup",this.boundKeyUp),window.addEventListener("blur",this.boundWindowBlur),document.addEventListener("touchmove",this.boundTouchMove,{passive:!1}),document.addEventListener("touchend",this.boundTouchEnd),document.addEventListener("touchcancel",this.boundTouchCancel);const t=this.editor.querySelector("#canvas");null==t||t.addEventListener("touchstart",this.boundCanvasTouchStart,{passive:!1})}teardownListeners(){document.removeEventListener("mousemove",this.boundMouseMove),document.removeEventListener("mouseup",this.boundMouseUp),document.removeEventListener("mousedown",this.boundGlobalMouseDown),document.removeEventListener("keydown",this.boundKeyDown),document.removeEventListener("keyup",this.boundKeyUp),window.removeEventListener("blur",this.boundWindowBlur),document.removeEventListener("touchmove",this.boundTouchMove),document.removeEventListener("touchend",this.boundTouchEnd),document.removeEventListener("touchcancel",this.boundTouchCancel);const t=this.editor.querySelector("#canvas");null==t||t.removeEventListener("touchstart",this.boundCanvasTouchStart),this.stopAutoScroll(),this.hideDragHint()}getPosition(t,e){var i,o,n;return"node"===e?null===(i=this.editor.definition._ui.nodes[t])||void 0===i?void 0:i.position:null===(n=null===(o=this.editor.definition._ui.stickies)||void 0===o?void 0:o[t])||void 0===n?void 0:n.position}handleMouseDown(t){if(lp(t))return;if(this.editor.isReadOnly())return;this.blurActiveContentEditable();const e=t.currentTarget,i=t.target;if(i.classList.contains("exit")||i.closest(".exit")||i.closest(".linked-name"))return;const o=e.getAttribute("uuid"),n="TEMBA-FLOW-NODE"===e.tagName?"node":"sticky",s=this.getPosition(o,n);s&&(this.editor.selectedItems.has(o)||t.ctrlKey||t.metaKey?this.editor.selectedItems.has(o)||this.editor.selectedItems.add(o):this.editor.selectedItems.clear(),this.isMouseDown=!0,this.activeDragIsTouch=!1,this.shiftDragCopy=t.shiftKey,this.dragStartPos={x:t.clientX,y:t.clientY},this.editor.currentDragItem={uuid:o,position:s,element:e,type:n},t.preventDefault(),t.stopPropagation())}markTouchDevice(){var t,e;this.isTouchDevice||(this.isTouchDevice=!0,null===(t=this.editor.querySelector("#canvas"))||void 0===t||t.classList.add("touch-device"),null===(e=this.editor.querySelector("#editor"))||void 0===e||e.classList.add("touch-device"))}handleItemTouchStart(t){if(this.markTouchDevice(),this.editor.isReadOnly())return;this.blurActiveContentEditable();const e=t.touches[0];if(!e)return;const i=t.currentTarget,o=t.target;if(o.classList.contains("exit")||o.closest(".exit")||o.closest(".linked-name"))return;const n=i.getAttribute("uuid"),s="TEMBA-FLOW-NODE"===i.tagName?"node":"sticky",r=this.getPosition(n,s);r&&(this.editor.selectedItems.has(n)||this.editor.selectedItems.clear(),this.isMouseDown=!0,this.activeDragIsTouch=!0,this.dragStartPos={x:e.clientX,y:e.clientY},this.editor.currentDragItem={uuid:n,position:r,element:i,type:s},t.stopPropagation())}handleGlobalMouseDown(t){var e;if(lp(t))return;const i=null===(e=this.editor.querySelector("#grid"))||void 0===e?void 0:e.getBoundingClientRect();if(!i)return;if(!(t.clientX>=i.left&&t.clientX<=i.right&&t.clientY>=i.top&&t.clientY<=i.bottom))return;t.target.closest(".draggable")||this.handleCanvasMouseDown(t)}blurActiveContentEditable(){var t;let e=document.activeElement;for(;null===(t=null==e?void 0:e.shadowRoot)||void 0===t?void 0:t.activeElement;)e=e.shadowRoot.activeElement;e instanceof HTMLElement&&"true"===e.getAttribute("contenteditable")&&e.blur()}handleCanvasMouseDown(t){var e;if(this.editor.isReadOnly())return;this.blurActiveContentEditable();const i=t.target;if("canvas"===i.id||"grid"===i.id){this.canvasMouseDown=!0,this.dragStartPos={x:t.clientX,y:t.clientY};const i=null===(e=this.editor.querySelector("#canvas"))||void 0===e?void 0:e.getBoundingClientRect();if(i){this.editor.selectedItems.clear();const e=(t.clientX-i.left)/this.editor.zoom,o=(t.clientY-i.top)/this.editor.zoom;this.editor.selectionBox={startX:e,startY:o,endX:e,endY:o}}t.preventDefault()}}showDragHint(){if(this.editor.isReadOnly())return;const t=this.editor.querySelector("#drag-hint");t&&(this.dragHintTimer=setTimeout(()=>{t.classList.add("visible"),this.dragHintTimer=null},600))}hideDragHint(){this.dragHintTimer&&(clearTimeout(this.dragHintTimer),this.dragHintTimer=null);const t=this.editor.querySelector("#drag-hint");t&&t.classList.remove("visible")}handleKeyDown(t){var e;"Shift"===t.key&&(null===(e=this.editor.querySelector("#canvas"))||void 0===e||e.classList.add("shift-held"),this.editor.isDragging&&!this.currentDragIsCopy&&(this.hideDragHint(),this.performShiftDragCopy(),requestAnimationFrame(()=>{this.markCopyElements(),this.updateDragPositions()}))),this.editor.handleKeyDown(t)}handleKeyUp(t){var e;"Shift"===t.key&&(null===(e=this.editor.querySelector("#canvas"))||void 0===e||e.classList.remove("shift-held"),this.editor.isDragging&&this.currentDragIsCopy&&(this.revertShiftDragCopy(),requestAnimationFrame(()=>this.updateDragPositions()))),this.editor.handleKeyUp(t)}handleWindowBlur(){var t;null===(t=this.editor.querySelector("#canvas"))||void 0===t||t.classList.remove("shift-held"),this.editor.isDragging&&this.currentDragIsCopy&&(this.revertShiftDragCopy(),requestAnimationFrame(()=>this.updateDragPositions())),this.editor.handleWindowBlur()}updateSelectionBox(t){var e;if(!this.editor.selectionBox||!this.canvasMouseDown)return;const i=null===(e=this.editor.querySelector("#canvas"))||void 0===e?void 0:e.getBoundingClientRect();if(!i)return;const o=(t.clientX-i.left)/this.editor.zoom,n=(t.clientY-i.top)/this.editor.zoom;this.editor.selectionBox={...this.editor.selectionBox,endX:o,endY:n},this.updateSelectedItemsFromBox()}updateSelectedItemsFromBox(){var t,e,i;if(!this.editor.selectionBox)return;const o=new Set,n=Math.min(this.editor.selectionBox.startX,this.editor.selectionBox.endX),s=Math.min(this.editor.selectionBox.startY,this.editor.selectionBox.endY),r=Math.max(this.editor.selectionBox.startX,this.editor.selectionBox.endX),a=Math.max(this.editor.selectionBox.startY,this.editor.selectionBox.endY);null===(t=this.editor.definition)||void 0===t||t.nodes.forEach(t=>{var e,i,l;const d=this.editor.querySelector(`[id="${t.uuid}"]`);if(d){const c=null===(i=null===(e=this.editor.definition._ui)||void 0===e?void 0:e.nodes[t.uuid])||void 0===i?void 0:i.position;if(c){if(null===(l=this.editor.querySelector("#canvas"))||void 0===l?void 0:l.getBoundingClientRect()){const e=c.left,i=c.top,l=e+d.offsetWidth,h=i+d.offsetHeight;n<l&&r>e&&s<h&&a>i&&o.add(t.uuid)}}}});const l=(null===(i=null===(e=this.editor.definition)||void 0===e?void 0:e._ui)||void 0===i?void 0:i.stickies)||{};Object.entries(l).forEach(([t,e])=>{if(e.position){const i=this.editor.querySelector(`temba-sticky-note[uuid="${t}"]`);if(i){const l=i.clientWidth,d=i.clientHeight,c=e.position.left,h=e.position.top;n<c+l&&r>c&&s<h+d&&a>h&&o.add(t)}}}),this.editor.selectedItems=o}renderSelectionBox(){if(!this.editor.selectionBox||!this.editor.isSelecting)return"";const t=Math.min(this.editor.selectionBox.startX,this.editor.selectionBox.endX),e=Math.min(this.editor.selectionBox.startY,this.editor.selectionBox.endY),i=Math.abs(this.editor.selectionBox.endX-this.editor.selectionBox.startX),o=Math.abs(this.editor.selectionBox.endY-this.editor.selectionBox.startY);return V`<div
+    `}}e([gt({type:Object})],vg.prototype,"plumber",void 0),e([gt({type:Object})],vg.prototype,"node",void 0),e([gt({type:Object})],vg.prototype,"ui",void 0),e([Nd(Rd,t=>t.isTranslating)],vg.prototype,"isTranslating",void 0),e([Nd(Rd,t=>t.languageCode)],vg.prototype,"languageCode",void 0),e([Nd(Rd,t=>t.viewingRevision)],vg.prototype,"viewingRevision",void 0),e([Nd(Rd,t=>t.flowDefinition)],vg.prototype,"flowDefinition",void 0),e([Nd(Rd,t=>t.getCurrentActivity())],vg.prototype,"activity",void 0),e([Nd(Rd,t=>t.issuesByNode)],vg.prototype,"issuesByNode",void 0),e([Nd(Rd,t=>t.issuesByAction)],vg.prototype,"issuesByAction",void 0);class bg{constructor(t){this.editor=t,this.isMouseDown=!1,this.shiftDragCopy=!1,this.currentDragIsCopy=!1,this.dragStartPos={x:0,y:0},this.originalDragItem=null,this.originalSelectedItems=null,this.dragHintTimer=null,this.autoScrollAnimationId=null,this.autoScrollDeltaX=0,this.autoScrollDeltaY=0,this.lastPointerPos=null,this.activeDragIsTouch=!1,this.isTouchDevice=!1,this.isTwoFingerPanning=!1,this.twoFingerDidPan=!1,this.twoFingerStartMidX=0,this.twoFingerStartMidY=0,this.twoFingerOnCanvas=!1,this.lastPanX=0,this.lastPanY=0,this.canvasMouseDown=!1,this.boundMouseMove=this.handleMouseMove.bind(this),this.boundMouseUp=this.handleMouseUp.bind(this),this.boundGlobalMouseDown=this.handleGlobalMouseDown.bind(this),this.boundKeyDown=this.handleKeyDown.bind(this),this.boundKeyUp=this.handleKeyUp.bind(this),this.boundWindowBlur=this.handleWindowBlur.bind(this),this.boundTouchMove=this.handleTouchMove.bind(this),this.boundTouchEnd=this.handleTouchEnd.bind(this),this.boundTouchCancel=this.handleTouchCancel.bind(this),this.boundCanvasTouchStart=this.handleCanvasTouchStart.bind(this)}setupListeners(){document.addEventListener("mousemove",this.boundMouseMove),document.addEventListener("mouseup",this.boundMouseUp),document.addEventListener("mousedown",this.boundGlobalMouseDown),document.addEventListener("keydown",this.boundKeyDown),document.addEventListener("keyup",this.boundKeyUp),window.addEventListener("blur",this.boundWindowBlur),document.addEventListener("touchmove",this.boundTouchMove,{passive:!1}),document.addEventListener("touchend",this.boundTouchEnd),document.addEventListener("touchcancel",this.boundTouchCancel);const t=this.editor.querySelector("#canvas");null==t||t.addEventListener("touchstart",this.boundCanvasTouchStart,{passive:!1})}teardownListeners(){document.removeEventListener("mousemove",this.boundMouseMove),document.removeEventListener("mouseup",this.boundMouseUp),document.removeEventListener("mousedown",this.boundGlobalMouseDown),document.removeEventListener("keydown",this.boundKeyDown),document.removeEventListener("keyup",this.boundKeyUp),window.removeEventListener("blur",this.boundWindowBlur),document.removeEventListener("touchmove",this.boundTouchMove),document.removeEventListener("touchend",this.boundTouchEnd),document.removeEventListener("touchcancel",this.boundTouchCancel);const t=this.editor.querySelector("#canvas");null==t||t.removeEventListener("touchstart",this.boundCanvasTouchStart),this.stopAutoScroll(),this.hideDragHint()}getPosition(t,e){var i,o,n;return"node"===e?null===(i=this.editor.definition._ui.nodes[t])||void 0===i?void 0:i.position:null===(n=null===(o=this.editor.definition._ui.stickies)||void 0===o?void 0:o[t])||void 0===n?void 0:n.position}handleMouseDown(t){if(lp(t))return;if(this.editor.isReadOnly())return;this.blurActiveContentEditable();const e=t.currentTarget,i=t.target;if(i.classList.contains("exit")||i.closest(".exit")||i.closest(".linked-name")||i.closest(".linked-pill"))return;const o=e.getAttribute("uuid"),n="TEMBA-FLOW-NODE"===e.tagName?"node":"sticky",s=this.getPosition(o,n);s&&(this.editor.selectedItems.has(o)||t.ctrlKey||t.metaKey?this.editor.selectedItems.has(o)||this.editor.selectedItems.add(o):this.editor.selectedItems.clear(),this.isMouseDown=!0,this.activeDragIsTouch=!1,this.shiftDragCopy=t.shiftKey,this.dragStartPos={x:t.clientX,y:t.clientY},this.editor.currentDragItem={uuid:o,position:s,element:e,type:n},t.preventDefault(),t.stopPropagation())}markTouchDevice(){var t,e;this.isTouchDevice||(this.isTouchDevice=!0,null===(t=this.editor.querySelector("#canvas"))||void 0===t||t.classList.add("touch-device"),null===(e=this.editor.querySelector("#editor"))||void 0===e||e.classList.add("touch-device"))}handleItemTouchStart(t){if(this.markTouchDevice(),this.editor.isReadOnly())return;this.blurActiveContentEditable();const e=t.touches[0];if(!e)return;const i=t.currentTarget,o=t.target;if(o.classList.contains("exit")||o.closest(".exit")||o.closest(".linked-name")||o.closest(".linked-pill"))return;const n=i.getAttribute("uuid"),s="TEMBA-FLOW-NODE"===i.tagName?"node":"sticky",r=this.getPosition(n,s);r&&(this.editor.selectedItems.has(n)||this.editor.selectedItems.clear(),this.isMouseDown=!0,this.activeDragIsTouch=!0,this.dragStartPos={x:e.clientX,y:e.clientY},this.editor.currentDragItem={uuid:n,position:r,element:i,type:s},t.stopPropagation())}handleGlobalMouseDown(t){var e;if(lp(t))return;const i=null===(e=this.editor.querySelector("#grid"))||void 0===e?void 0:e.getBoundingClientRect();if(!i)return;if(!(t.clientX>=i.left&&t.clientX<=i.right&&t.clientY>=i.top&&t.clientY<=i.bottom))return;t.target.closest(".draggable")||this.handleCanvasMouseDown(t)}blurActiveContentEditable(){var t;let e=document.activeElement;for(;null===(t=null==e?void 0:e.shadowRoot)||void 0===t?void 0:t.activeElement;)e=e.shadowRoot.activeElement;e instanceof HTMLElement&&"true"===e.getAttribute("contenteditable")&&e.blur()}handleCanvasMouseDown(t){var e;if(this.editor.isReadOnly())return;this.blurActiveContentEditable();const i=t.target;if("canvas"===i.id||"grid"===i.id){this.canvasMouseDown=!0,this.dragStartPos={x:t.clientX,y:t.clientY};const i=null===(e=this.editor.querySelector("#canvas"))||void 0===e?void 0:e.getBoundingClientRect();if(i){this.editor.selectedItems.clear();const e=(t.clientX-i.left)/this.editor.zoom,o=(t.clientY-i.top)/this.editor.zoom;this.editor.selectionBox={startX:e,startY:o,endX:e,endY:o}}t.preventDefault()}}showDragHint(){if(this.editor.isReadOnly())return;const t=this.editor.querySelector("#drag-hint");t&&(this.dragHintTimer=setTimeout(()=>{t.classList.add("visible"),this.dragHintTimer=null},600))}hideDragHint(){this.dragHintTimer&&(clearTimeout(this.dragHintTimer),this.dragHintTimer=null);const t=this.editor.querySelector("#drag-hint");t&&t.classList.remove("visible")}handleKeyDown(t){var e;"Shift"===t.key&&(null===(e=this.editor.querySelector("#canvas"))||void 0===e||e.classList.add("shift-held"),this.editor.isDragging&&!this.currentDragIsCopy&&(this.hideDragHint(),this.performShiftDragCopy(),requestAnimationFrame(()=>{this.markCopyElements(),this.updateDragPositions()}))),this.editor.handleKeyDown(t)}handleKeyUp(t){var e;"Shift"===t.key&&(null===(e=this.editor.querySelector("#canvas"))||void 0===e||e.classList.remove("shift-held"),this.editor.isDragging&&this.currentDragIsCopy&&(this.revertShiftDragCopy(),requestAnimationFrame(()=>this.updateDragPositions()))),this.editor.handleKeyUp(t)}handleWindowBlur(){var t;null===(t=this.editor.querySelector("#canvas"))||void 0===t||t.classList.remove("shift-held"),this.editor.isDragging&&this.currentDragIsCopy&&(this.revertShiftDragCopy(),requestAnimationFrame(()=>this.updateDragPositions())),this.editor.handleWindowBlur()}updateSelectionBox(t){var e;if(!this.editor.selectionBox||!this.canvasMouseDown)return;const i=null===(e=this.editor.querySelector("#canvas"))||void 0===e?void 0:e.getBoundingClientRect();if(!i)return;const o=(t.clientX-i.left)/this.editor.zoom,n=(t.clientY-i.top)/this.editor.zoom;this.editor.selectionBox={...this.editor.selectionBox,endX:o,endY:n},this.updateSelectedItemsFromBox()}updateSelectedItemsFromBox(){var t,e,i;if(!this.editor.selectionBox)return;const o=new Set,n=Math.min(this.editor.selectionBox.startX,this.editor.selectionBox.endX),s=Math.min(this.editor.selectionBox.startY,this.editor.selectionBox.endY),r=Math.max(this.editor.selectionBox.startX,this.editor.selectionBox.endX),a=Math.max(this.editor.selectionBox.startY,this.editor.selectionBox.endY);null===(t=this.editor.definition)||void 0===t||t.nodes.forEach(t=>{var e,i,l;const d=this.editor.querySelector(`[id="${t.uuid}"]`);if(d){const c=null===(i=null===(e=this.editor.definition._ui)||void 0===e?void 0:e.nodes[t.uuid])||void 0===i?void 0:i.position;if(c){if(null===(l=this.editor.querySelector("#canvas"))||void 0===l?void 0:l.getBoundingClientRect()){const e=c.left,i=c.top,l=e+d.offsetWidth,h=i+d.offsetHeight;n<l&&r>e&&s<h&&a>i&&o.add(t.uuid)}}}});const l=(null===(i=null===(e=this.editor.definition)||void 0===e?void 0:e._ui)||void 0===i?void 0:i.stickies)||{};Object.entries(l).forEach(([t,e])=>{if(e.position){const i=this.editor.querySelector(`temba-sticky-note[uuid="${t}"]`);if(i){const l=i.clientWidth,d=i.clientHeight,c=e.position.left,h=e.position.top;n<c+l&&r>c&&s<h+d&&a>h&&o.add(t)}}}),this.editor.selectedItems=o}renderSelectionBox(){if(!this.editor.selectionBox||!this.editor.isSelecting)return"";const t=Math.min(this.editor.selectionBox.startX,this.editor.selectionBox.endX),e=Math.min(this.editor.selectionBox.startY,this.editor.selectionBox.endY),i=Math.abs(this.editor.selectionBox.endX-this.editor.selectionBox.startX),o=Math.abs(this.editor.selectionBox.endY-this.editor.selectionBox.startY);return V`<div
       class="selection-box"
       style="left: ${t}px; top: ${e}px; width: ${i}px; height: ${o}px;"
     ></div>`}handleCanvasTouchStart(t){var e;this.markTouchDevice();const i=t.touches[0];if(!i)return;const o=t.target;if(o.closest(".draggable"))return;if("canvas"!==o.id&&"grid"!==o.id)return;if(t.touches.length>=2)return this.canvasMouseDown=!1,this.editor.isSelecting=!1,this.editor.selectionBox=null,this.isTwoFingerPanning=!0,this.twoFingerOnCanvas=!0,this.twoFingerDidPan=!1,this.twoFingerStartMidX=(t.touches[0].clientX+t.touches[1].clientX)/2,this.twoFingerStartMidY=(t.touches[0].clientY+t.touches[1].clientY)/2,this.lastPanX=this.twoFingerStartMidX,void(this.lastPanY=this.twoFingerStartMidY);if(this.editor.isReadOnly())return;this.canvasMouseDown=!0,this.dragStartPos={x:i.clientX,y:i.clientY};const n=null===(e=this.editor.querySelector("#canvas"))||void 0===e?void 0:e.getBoundingClientRect();if(n){this.editor.selectedItems.clear();const t=(i.clientX-n.left)/this.editor.zoom,e=(i.clientY-n.top)/this.editor.zoom;this.editor.selectionBox={startX:t,startY:e,endX:t,endY:e}}t.preventDefault()}handleMouseMove(t){if(this.canvasMouseDown&&!this.isMouseDown)return this.editor.isSelecting=!0,this.updateSelectionBox(t),void this.editor.requestUpdate();if(this.editor.plumber.connectionDragging){this.activeDragIsTouch=!1,this.lastPointerPos={clientX:t.clientX,clientY:t.clientY},this.startAutoScroll();const e=document.querySelector("temba-flow-node:hover");if(document.querySelectorAll("temba-flow-node").forEach(t=>{t.classList.remove("connection-target-valid","connection-target-invalid")}),e)this.editor.targetId=e.getAttribute("uuid"),this.editor.isValidTarget=this.editor.targetId!==this.editor.dragFromNodeId,this.editor.isValidTarget?e.classList.add("connection-target-valid"):e.classList.add("connection-target-invalid"),this.editor.connectionPlaceholder=null;else{this.editor.targetId=null,this.editor.isValidTarget=!0;const e=this.editor.querySelector("#canvas");if(e){const i=e.getBoundingClientRect(),o=(t.clientX-i.left)/this.editor.zoom,n=(t.clientY-i.top)/this.editor.zoom,s=200,r=64,a=13,l=1,d=null!=this.editor.connectionSourceY&&n<this.editor.connectionSourceY;let c;c=d?n+l-r:n-l+a,this.editor.connectionPlaceholder={position:{left:o-s/2,top:c},visible:!0,dragUp:d}}}this.editor.requestUpdate()}if(!this.isMouseDown||!this.editor.currentDragItem)return;this.lastPointerPos={clientX:t.clientX,clientY:t.clientY};const e=t.clientX-this.dragStartPos.x+this.autoScrollDeltaX,i=t.clientY-this.dragStartPos.y+this.autoScrollDeltaY,o=Math.sqrt(e*e+i*i);!this.editor.isDragging&&o>5&&(this.editor.isDragging=!0,this.startAutoScroll(),this.originalDragItem={...this.editor.currentDragItem},this.originalSelectedItems=new Set(this.editor.selectedItems),this.shiftDragCopy||t.shiftKey?(this.performShiftDragCopy(),this.shiftDragCopy=!1):this.showDragHint()),this.editor.isDragging&&this.updateDragPositions()}performShiftDragCopy(){var t,e,i,o,n;if(!this.originalDragItem)return;const s=(null===(t=this.originalSelectedItems)||void 0===t?void 0:t.has(this.originalDragItem.uuid))&&(null!==(i=null===(e=this.originalSelectedItems)||void 0===e?void 0:e.size)&&void 0!==i?i:0)>1?Array.from(this.originalSelectedItems):[this.originalDragItem.uuid];if(0===s.length)return;const r=Fd().getState().duplicateNodes(s);for(const t of s){const e=r[t];e&&!this.editor.copiedItemUuids.includes(e)&&this.editor.copiedItemUuids.push(e)}this.currentDragIsCopy=!0;for(const t of s){const e=this.editor.querySelector(`[uuid="${t}"]`),i="TEMBA-FLOW-NODE"===(null==e?void 0:e.tagName)?"node":"sticky",o=this.getPosition(t,i);e&&o&&(e.style.left=`${o.left}px`,e.style.top=`${o.top}px`)}this.editor.plumber.revalidate(s);for(const t of s){const e=this.editor.querySelector(`[uuid="${t}"]`);e&&(e.offsetHeight,e.classList.remove("dragging"))}const a=r[this.originalDragItem.uuid];if(a&&(this.editor.currentDragItem={...this.originalDragItem,uuid:a}),(null!==(n=null===(o=this.originalSelectedItems)||void 0===o?void 0:o.size)&&void 0!==n?n:0)>1){const t=new Set;for(const e of this.originalSelectedItems){const i=r[e];t.add(i||e)}this.editor.selectedItems=t}}markCopyElements(){for(const t of this.editor.copiedItemUuids){const e=this.editor.querySelector(`[uuid="${t}"]`);null==e||e.classList.add("drag-copy")}}revertShiftDragCopy(){if(this.originalDragItem){if(this.editor.copiedItemUuids.length>0){const t=this.editor.copiedItemUuids.filter(t=>this.editor.definition.nodes.some(e=>e.uuid===t)),e=this.editor.copiedItemUuids.filter(t=>{var e,i;return null===(i=null===(e=this.editor.definition._ui)||void 0===e?void 0:e.stickies)||void 0===i?void 0:i[t]});t.length>0&&Fd().getState().removeNodes(t),e.length>0&&Fd().getState().removeStickyNotes(e),this.editor.copiedItemUuids=[]}this.currentDragIsCopy=!1,Fd().getState().setDirtyDate(null),this.editor.currentDragItem={...this.originalDragItem},this.originalSelectedItems&&(this.editor.selectedItems=new Set(this.originalSelectedItems))}}updateDragPositions(){if(!this.editor.currentDragItem||!this.lastPointerPos)return;const t=(this.lastPointerPos.clientX-this.dragStartPos.x+this.autoScrollDeltaX)/this.editor.zoom,e=(this.lastPointerPos.clientY-this.dragStartPos.y+this.autoScrollDeltaY)/this.editor.zoom,i=this.editor.selectedItems.has(this.editor.currentDragItem.uuid)&&this.editor.selectedItems.size>1?Array.from(this.editor.selectedItems):[this.editor.currentDragItem.uuid];i.forEach(i=>{const o=this.editor.querySelector(`[uuid="${i}"]`);if(o){const n="TEMBA-FLOW-NODE"===o.tagName?"node":"sticky",s=this.getPosition(i,n);s&&(o.style.left=`${s.left+t}px`,o.style.top=`${s.top+e}px`,o.classList.add("dragging"),this.currentDragIsCopy&&o.classList.add("drag-copy"))}}),this.editor.plumber.revalidate(i)}startAutoScroll(){if(null!==this.autoScrollAnimationId)return;const t=this.editor.querySelector("#editor");if(!t)return;const e=()=>{var i,o,n;if(!this.editor.isDragging&&!(null===(i=this.editor.plumber)||void 0===i?void 0:i.connectionDragging)||!this.lastPointerPos)return void(this.autoScrollAnimationId=null);const s=t.getBoundingClientRect(),r=this.lastPointerPos.clientX,a=this.lastPointerPos.clientY,l=this.activeDragIsTouch?40:150;let d=0,c=0;const h=r-s.left;if(h<l){const t=h<0;d=-Math.min(1,1-h/l)*(15*(t?5:1))}const u=s.right-r;if(u<l){const t=u<0;d=Math.min(1,1-u/l)*(15*(t?5:1))}const p=a-s.top;if(p<l){const t=p<0;c=-Math.min(1,1-p/l)*(15*(t?5:1))}const m=s.bottom-a;if(m<l){const t=m<0;c=Math.min(1,1-m/l)*(15*(t?5:1))}if(0!==d||0!==c){const e=t.scrollLeft,i=t.scrollTop;if(d>0||c>0){const e=(t.scrollLeft+t.clientWidth+d)/this.editor.zoom,i=(t.scrollTop+t.clientHeight+c)/this.editor.zoom;null===(n=null===(o=Fd())||void 0===o?void 0:o.getState())||void 0===n||n.expandCanvas(e,i)}t.scrollLeft+=d,t.scrollTop+=c;const s=t.scrollLeft-e,r=t.scrollTop-i;this.autoScrollDeltaX+=s,this.autoScrollDeltaY+=r,0===s&&0===r||this.updateDragPositions()}this.autoScrollAnimationId=requestAnimationFrame(e)};this.autoScrollAnimationId=requestAnimationFrame(e)}stopAutoScroll(){null!==this.autoScrollAnimationId&&(cancelAnimationFrame(this.autoScrollAnimationId),this.autoScrollAnimationId=null)}handleMouseUp(t){if(this.canvasMouseDown&&this.editor.isSelecting)return this.editor.isSelecting=!1,this.editor.selectionBox=null,this.canvasMouseDown=!1,void this.editor.requestUpdate();if(!this.canvasMouseDown||this.editor.isSelecting){if(this.isMouseDown&&this.editor.currentDragItem){if(this.stopAutoScroll(),this.editor.isDragging){const e=(t.clientX-this.dragStartPos.x+this.autoScrollDeltaX)/this.editor.zoom,i=(t.clientY-this.dragStartPos.y+this.autoScrollDeltaY)/this.editor.zoom,o=this.editor.selectedItems.has(this.editor.currentDragItem.uuid)&&this.editor.selectedItems.size>1?Array.from(this.editor.selectedItems):[this.editor.currentDragItem.uuid],n={};o.forEach(t=>{const o=this.editor.definition.nodes.find(e=>e.uuid===t)?"node":"sticky",s=this.getPosition(t,o);if(s){const o=s.left+e,r=s.top+i,a=cp(o),l=cp(r),d={left:a,top:l};n[t]=d;const c=this.editor.querySelector(`[uuid="${t}"]`);c&&(c.classList.remove("dragging","drag-copy"),c.style.left=`${a}px`,c.style.top=`${l}px`)}}),Object.keys(n).length>0&&(this.currentDragIsCopy&&(this.editor.pendingTimer.pending=!0,this.editor.capturePositionsOnce()),Fd().getState().updateCanvasPositions(n),setTimeout(()=>{this.editor.checkCollisionsAndReflow(o),this.editor.plumber.repaintEverything()},0)),this.currentDragIsCopy&&this.editor.pendingTimer.start(),this.editor.selectedItems.clear()}this.hideDragHint(),this.editor.isDragging=!1,this.isMouseDown=!1,this.shiftDragCopy=!1,this.currentDragIsCopy=!1,this.editor.currentDragItem=null,this.originalDragItem=null,this.originalSelectedItems=null,this.canvasMouseDown=!1,this.autoScrollDeltaX=0,this.autoScrollDeltaY=0,this.lastPointerPos=null}}else this.canvasMouseDown=!1}handleTouchMove(t){var e;if(t.touches.length>=2){t.preventDefault();const e=(t.touches[0].clientX+t.touches[1].clientX)/2,i=(t.touches[0].clientY+t.touches[1].clientY)/2;if(this.isTwoFingerPanning){const t=this.lastPanX-e,o=this.lastPanY-i;(Math.abs(t)>2||Math.abs(o)>2)&&(this.twoFingerDidPan=!0);const n=this.editor.querySelector("#editor");n&&n.scrollBy(t,o)}return this.canvasMouseDown=!1,this.editor.isSelecting=!1,this.editor.selectionBox=null,this.isTwoFingerPanning=!0,this.lastPanX=e,void(this.lastPanY=i)}const i=t.touches[0];if(!i)return;if(this.canvasMouseDown&&!this.isMouseDown){t.preventDefault(),this.editor.isSelecting=!0;const o=null===(e=this.editor.querySelector("#canvas"))||void 0===e?void 0:e.getBoundingClientRect();return o&&this.editor.selectionBox&&(this.editor.selectionBox={...this.editor.selectionBox,endX:(i.clientX-o.left)/this.editor.zoom,endY:(i.clientY-o.top)/this.editor.zoom},this.updateSelectedItemsFromBox()),void this.editor.requestUpdate()}if(this.editor.plumber.connectionDragging){t.preventDefault();const e=this.editor.findTargetNodeAt(i.clientX,i.clientY);if(document.querySelectorAll("temba-flow-node").forEach(t=>{t.classList.remove("connection-target-valid","connection-target-invalid")}),e)this.editor.targetId=e.getAttribute("uuid"),this.editor.isValidTarget=this.editor.targetId!==this.editor.dragFromNodeId,this.editor.isValidTarget?e.classList.add("connection-target-valid"):e.classList.add("connection-target-invalid"),this.editor.connectionPlaceholder=null;else{this.editor.targetId=null,this.editor.isValidTarget=!0;const t=this.editor.querySelector("#canvas");if(t){const e=t.getBoundingClientRect(),o=(i.clientX-e.left)/this.editor.zoom,n=(i.clientY-e.top)/this.editor.zoom,s=200,r=64,a=13,l=1,d=null!=this.editor.connectionSourceY&&n<this.editor.connectionSourceY;let c;c=d?n+l-r:n-l+a,this.editor.connectionPlaceholder={position:{left:o-s/2,top:c},visible:!0,dragUp:d}}}return void this.editor.requestUpdate()}if(!this.isMouseDown||!this.editor.currentDragItem)return;this.lastPointerPos={clientX:i.clientX,clientY:i.clientY};const o=i.clientX-this.dragStartPos.x+this.autoScrollDeltaX,n=i.clientY-this.dragStartPos.y+this.autoScrollDeltaY,s=Math.sqrt(o*o+n*n);!this.editor.isDragging&&s>5&&(this.editor.isDragging=!0,this.startAutoScroll()),this.editor.isDragging&&(t.preventDefault(),this.updateDragPositions())}handleTouchEnd(t){if(this.isTwoFingerPanning){if(0===t.touches.length){const t=this.twoFingerDidPan,e=this.twoFingerOnCanvas,i=this.twoFingerStartMidX,o=this.twoFingerStartMidY;this.isTwoFingerPanning=!1,this.twoFingerOnCanvas=!1,this.twoFingerDidPan=!1,!t&&e&&this.editor.showContextMenuAt(i,o)}return}const e=t.changedTouches[0];if(this.canvasMouseDown&&this.editor.isSelecting)return this.editor.isSelecting=!1,this.editor.selectionBox=null,this.canvasMouseDown=!1,void this.editor.requestUpdate();if(!this.canvasMouseDown||this.editor.isSelecting){if(this.editor.plumber.connectionDragging){if(e){const t=this.editor.findTargetNodeAt(e.clientX,e.clientY);t&&(this.editor.targetId=t.getAttribute("uuid"),this.editor.isValidTarget=this.editor.targetId!==this.editor.dragFromNodeId)}}else if(this.isMouseDown&&this.editor.currentDragItem){if(this.stopAutoScroll(),this.editor.isDragging&&e){const t=(e.clientX-this.dragStartPos.x+this.autoScrollDeltaX)/this.editor.zoom,i=(e.clientY-this.dragStartPos.y+this.autoScrollDeltaY)/this.editor.zoom,o=this.editor.selectedItems.has(this.editor.currentDragItem.uuid)&&this.editor.selectedItems.size>1?Array.from(this.editor.selectedItems):[this.editor.currentDragItem.uuid],n={};o.forEach(e=>{const o=this.editor.definition.nodes.find(t=>t.uuid===e)?"node":"sticky",s=this.getPosition(e,o);if(s){const o=s.left+t,r=s.top+i,a=cp(o),l=cp(r);n[e]={left:a,top:l};const d=this.editor.querySelector(`[uuid="${e}"]`);d&&(d.classList.remove("dragging"),d.style.left=`${a}px`,d.style.top=`${l}px`)}}),Object.keys(n).length>0&&(Fd().getState().updateCanvasPositions(n),setTimeout(()=>{this.editor.checkCollisionsAndReflow(o),this.editor.plumber.repaintEverything()},0)),this.editor.selectedItems.clear()}this.editor.isDragging=!1,this.isMouseDown=!1,this.editor.currentDragItem=null,this.canvasMouseDown=!1,this.autoScrollDeltaX=0,this.autoScrollDeltaY=0,this.lastPointerPos=null}}else this.canvasMouseDown=!1}handleTouchCancel(){if(this.isTwoFingerPanning=!1,this.editor.isSelecting=!1,this.editor.selectionBox=null,this.canvasMouseDown=!1,this.editor.isDragging&&this.editor.currentDragItem){(this.editor.selectedItems.has(this.editor.currentDragItem.uuid)&&this.editor.selectedItems.size>1?Array.from(this.editor.selectedItems):[this.editor.currentDragItem.uuid]).forEach(t=>{const e=this.editor.querySelector(`[uuid="${t}"]`);e&&e.classList.remove("dragging")})}this.stopAutoScroll(),this.editor.isDragging=!1,this.isMouseDown=!1,this.editor.currentDragItem=null,this.autoScrollDeltaX=0,this.autoScrollDeltaY=0,this.lastPointerPos=null,document.querySelectorAll("temba-flow-node").forEach(t=>{t.classList.remove("connection-target-valid","connection-target-invalid")}),this.editor.connectionPlaceholder=null,this.editor.requestUpdate()}}class yg extends Ze{constructor(){super(...arguments),this.color="#6B7280",this.order=0,this.top=100,this.hidden=!1,this.saving=!1,this.active=!1}static get styles(){return l`
@@ -12345,9 +12280,12 @@ background: #ccc;
         </div>
       </div>
     `}}e([gt({type:Boolean,reflect:!0})],Ag.prototype,"open",void 0),e([gt({type:String})],Ag.prototype,"mode",void 0),e([gt({type:String})],Ag.prototype,"flowType",void 0),e([gt({type:Array})],Ag.prototype,"features",void 0),e([ft()],Ag.prototype,"clickPosition",void 0),e([ft()],Ag.prototype,"searchQuery",void 0),e([ft()],Ag.prototype,"highlightedIndex",void 0);class $g extends oh{constructor(){super(...arguments),this.dirtyMessage="You have unsaved changes to the contact notepad. Are you sure you want to contiunue?"}static get styles(){return l`
+      ${Do}
+
       :host {
         height: 100%;
         display: flex;
+        margin-top: var(--gap);
       }
 
       .wrapper {
@@ -12355,9 +12293,13 @@ background: #ccc;
         --color-widget-bg: transparent;
         --color-widget-bg-focused: transparent;
         outline: none;
-        border-radius: var(--curvature);
         display: flex;
         flex-direction: column;
+        background: var(--surface-note);
+        border: 1px solid var(--border-note);
+        border-radius: var(--r-sm);
+        box-shadow: var(--shadow-2);
+        overflow: hidden;
       }
 
       .notepad {
@@ -16582,51 +16524,56 @@ function(t){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.
         </tbody>
       </table>
     `}}function BC(t,e){window.customElements.get(t)||window.customElements.define(t,e)}NC.ATTACHMENT_ICONS={image:zo.attachment_image,audio:zo.attachment_audio,video:zo.attachment_video,application:zo.attachment_document},e([Nd(Rd,t=>t.flowDefinition)],NC.prototype,"definition",void 0),e([Nd(Rd,t=>t.languageCode)],NC.prototype,"languageCode",void 0),e([Nd(Rd,t=>t.isTranslating)],NC.prototype,"isTranslating",void 0),BC("temba-anchor",Yh),BC("temba-alert",Bh),BC("temba-store",qd),BC("temba-textinput",jo),BC("temba-datepicker",pu),BC("temba-range-picker",Zk),BC("temba-date",wu),BC("temba-completion",Rc),BC("temba-checkbox",Io),BC("temba-select",Pc),BC("temba-options",Ud),BC("temba-loading",jc),BC("temba-lightbox",ku),BC("temba-button",Uc),BC("temba-omnibox",Hh),BC("temba-tip",Wh),BC("temba-contact-name",Jh),BC("temba-contact-name-fetch",uu),BC("temba-contact-field",ou),BC("temba-contact-fields",eu),BC("temba-field-manager",fu),BC("temba-urn",tu),BC("temba-content-menu",yu),BC("temba-dialog",Fc),BC("temba-modax",qc),BC("temba-charcount",th),BC("temba-contact-chat",zh),BC("temba-contact-details",class extends oh{static get styles(){return l`
-      .urn {
-        display: flex;
-        padding: 0.4em 1em 0.8em 1em;
-        border-bottom: 1px solid #e6e6e6;
-        margin-bottom: 0.5em;
+      .wrapper {
+        padding-top: 0em;
       }
 
-      .urn .path {
-        margin-left: 0.2em;
+      /* Mirrors the disabled <temba-contact-field> row so the Groups
+         entry reads as just another field — same label color/size,
+         same horizontal inset, same bottom separator. Margin matches
+         the combined .wrapper + :host margins of contact-field
+         (0.5em + 1em) so spacing between rows stays uniform. */
+      .row {
+        padding-bottom: 0.6em;
+        border-bottom: 1px solid #ececec;
+        margin-bottom: 1.5em;
       }
 
-      .wrapper {
-        padding-top: 0em;
+      .row .label {
+        color: var(--text-2);
+        font-size: 12px;
+        font-weight: var(--w-medium);
+        margin-top: 0.25em;
+        margin-left: 0.25em;
       }
 
-      .groups {
-        padding: 0.4em 0.5em 0.6em 0.5em;
-        border-bottom: 1px solid #e6e6e6;
-        margin-bottom: 0.4em;
-      }
-      .group {
-        margin-right: 0.7em;
-        margin-bottom: 0.7em;
+      .row .value {
+        margin-left: 0.25em;
+        margin-top: 0.1em;
+        min-height: 1.75em;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.4em;
       }
 
-      .label {
-        font-size: 0.8em;
-        color: rgb(136, 136, 136);
-        margin-left: 0.5em;
-        margin-bottom: 0.4em;
+      .group {
       }
     `}render(){if(!this.data)return;const t=Nl(this.data.language);return V`
       <div class="wrapper">
-        ${this.data.groups.length>0?V` <div class="groups">
+        ${this.data.groups.length>0?V` <div class="row">
               <div class="label">Groups</div>
-              ${this.data.groups.map(t=>V`<temba-label
-                  class="group"
-                  onclick="goto(event)"
-                  href="/contact/group/${t.uuid}/"
-                  icon=${t.is_dynamic?zo.group_smart:zo.group}
-                  type="group"
-                  clickable
-                >
-                  ${t.name}
-                </temba-label>`)}
+              <div class="value">
+                ${this.data.groups.map(t=>V`<temba-label
+                    class="group"
+                    onclick="goto(event)"
+                    href="/contact/group/${t.uuid}/"
+                    icon=${t.is_dynamic?zo.group_smart:zo.group}
+                    type="group"
+                    clickable
+                  >
+                    ${t.name}
+                  </temba-label>`)}
+              </div>
             </div>`:null}
         ${this.data.urns.map(t=>{const e=t.split(":");let i=Nh[e[0]];return i||(i=Oe(e[0])),V`<temba-contact-field
             name=${i}