@nyaruka/temba-components 0.129.7 → 0.129.8

package/out-tsc/src/display/Thumbnail.js

@@ -59,7 +59,8 @@ export class Thumbnail extends RapidElement {
         background-repeat: no-repeat;
         border-radius: var(--curvature);
         max-height: calc(var(--thumb-size, 4em) * 2);
-        width: var(--thumb-size, 4em);
+        max-width: calc(var(--thumb-size, 4em) * 2);
+        height: var(--thumb-size, 4em);
         display: flex;
         align-items: center;
         justify-content: center;

package/out-tsc/src/display/Thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../src/display/Thumbnail.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValueMap, css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\nimport { getClasses } from '../utils';\nimport { Lightbox } from './Lightbox';\nimport { WebChatIcon } from '../webchat';\n\nenum ThumbnailContentType {\n  IMAGE = 'image',\n  AUDIO = 'audio',\n  VIDEO = 'video',\n  DOCUMENT = 'document',\n  OTHER = 'other'\n}\n\nconst ThumbnailIcons = {\n  [ThumbnailContentType.IMAGE]: WebChatIcon.attachment_image,\n  [ThumbnailContentType.AUDIO]: WebChatIcon.attachment_audio,\n  [ThumbnailContentType.VIDEO]: WebChatIcon.attachment_video,\n  [ThumbnailContentType.DOCUMENT]: WebChatIcon.attachment_document,\n  [ThumbnailContentType.OTHER]: WebChatIcon.attachment\n};\n\nexport class Thumbnail extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        display: inline;\n      }\n\n      .wrapper {\n        padding: var(--thumb-padding, 0.4em);\n        background: var(--thumb-background, #fff);\n        box-shadow: var(--widget-box-shadow);\n        cursor: pointer;\n        border-radius: calc(var(--curvature) * 1.5);\n        border: 0px solid #f3f3f3;\n      }\n\n      .wrapper.zoom {\n        border: none;\n        padding: 0 !important;\n        border-radius: 0 !important;\n        overflow: hidden !important;\n      }\n\n      .zoom .thumb {\n        border-radius: 0px !important;\n        width: calc(var(--thumb-size, 4em) + 0.8em);\n        max-height: calc(90vh - 10em);\n      }\n\n      .thumb {\n        background-size: cover;\n        background-position: center;\n        background-repeat: no-repeat;\n        border-radius: var(--curvature);\n        max-height: calc(var(--thumb-size, 4em) * 2);\n        width: var(--thumb-size, 4em);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-weight: 400;\n        color: var(--thumb-icon, #bbb);\n      }\n\n      .thumb.document,\n      .thumb.audio,\n      .thumb.video {\n        border: 1px solid #eee;\n      }\n\n      .wrapper:hover .thumb.icon {\n      }\n\n      .viewer {\n        display: block;\n      }\n\n      .zoom .viewer {\n        display: block;\n      }\n\n      .download {\n        display: none;\n        position: absolute;\n        right: 0em;\n        bottom: 0em;\n        border-radius: var(--curvature);\n        transform: scale(0.2) translate(3em, 3em);\n        padding: 0.4em;\n      }\n\n      .zoom .download {\n        display: block;\n        background: rgba(0, 0, 0, 0.5);\n      }\n\n      .zoom .download:hover {\n        background: rgba(0, 0, 0, 0.6);\n        cursor: pointer;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  url: string;\n\n  @property({ type: String })\n  attachment: string;\n\n  @property({ type: Number })\n  ratio: number = 0;\n\n  @property({ type: Boolean })\n  preview: boolean = true;\n\n  @property({ type: Boolean, attribute: false })\n  zoom: boolean;\n\n  @property({ type: String, attribute: true })\n  contentType: string;\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n\n    if (\n      changes.has('contentType') &&\n      this.contentType === ThumbnailContentType.IMAGE\n    ) {\n      const toObserve = this.shadowRoot.querySelector('.observe');\n      if (toObserve) {\n        new ResizeObserver((e, observer) => {\n          if (toObserve.clientHeight > 0 && toObserve.clientWidth > 0) {\n            this.ratio = toObserve.clientHeight / toObserve.clientWidth;\n            this.preview =\n              this.ratio === 0 || (this.ratio > 0.25 && this.ratio <= 1.5);\n            observer.disconnect();\n          }\n        }).observe(toObserve);\n      }\n    }\n\n    // convert our attachment to a url and label\n    if (changes.has('attachment')) {\n      if (this.attachment) {\n        const splitIndex = this.attachment.indexOf(':');\n        if (splitIndex === -1) {\n          this.url = this.attachment;\n        } else {\n          const contentType = this.attachment.substring(0, splitIndex);\n          this.url = this.attachment.substring(splitIndex + 1);\n\n          if (contentType.startsWith('image')) {\n            this.contentType = ThumbnailContentType.IMAGE;\n          } else if (contentType.startsWith('audio')) {\n            this.contentType = ThumbnailContentType.AUDIO;\n          } else if (contentType.startsWith('video')) {\n            this.contentType = ThumbnailContentType.VIDEO;\n          } else if (contentType.startsWith('application')) {\n            this.contentType = ThumbnailContentType.DOCUMENT;\n          } else {\n            this.contentType = ThumbnailContentType.OTHER;\n          }\n        }\n      }\n    }\n  }\n\n  public handleThumbnailClicked() {\n    if (this.contentType === ThumbnailContentType.IMAGE && this.preview) {\n      window.setTimeout(() => {\n        const lightbox = document.querySelector('temba-lightbox') as Lightbox;\n        lightbox.showElement(this);\n      }, 100);\n    } else {\n      window.open(this.url, '_blank');\n    }\n  }\n\n  public handleDownload(e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n\n    // open this.url in another tab\n    window.open(this.url, '_blank');\n  }\n\n  public render() {\n    return html`\n      <div\n        @click=${this.handleThumbnailClicked.bind(this)}\n        class=\"${getClasses({ wrapper: true, zoom: this.zoom })}\"\n        url=${this.url}\n      >\n        ${this.contentType === ThumbnailContentType.IMAGE && this.preview\n          ? html`<div class=\"\"><div class=\"download\" @click=${this.handleDownload.bind(\n              this\n            )}><temba-icon size=\"1\" style=\"color:#fff;\" name=\"download\"></temba-icon></div><img\n          class=\"observe thumb ${this.contentType}\"\n          src=\"${this.url}\"\n        ></img></div>`\n          : html`<div\n              style=\"padding:1em; background:rgba(0,0,0,.05);border-radius:var(--curvature);\"\n            >\n              <temba-icon\n                size=\"1.5\"\n                name=\"${ThumbnailIcons[this.contentType]}\"\n              ></temba-icon>\n            </div>`}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../src/display/Thumbnail.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValueMap, css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\nimport { getClasses } from '../utils';\nimport { Lightbox } from './Lightbox';\nimport { WebChatIcon } from '../webchat';\n\nenum ThumbnailContentType {\n  IMAGE = 'image',\n  AUDIO = 'audio',\n  VIDEO = 'video',\n  DOCUMENT = 'document',\n  OTHER = 'other'\n}\n\nconst ThumbnailIcons = {\n  [ThumbnailContentType.IMAGE]: WebChatIcon.attachment_image,\n  [ThumbnailContentType.AUDIO]: WebChatIcon.attachment_audio,\n  [ThumbnailContentType.VIDEO]: WebChatIcon.attachment_video,\n  [ThumbnailContentType.DOCUMENT]: WebChatIcon.attachment_document,\n  [ThumbnailContentType.OTHER]: WebChatIcon.attachment\n};\n\nexport class Thumbnail extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        display: inline;\n      }\n\n      .wrapper {\n        padding: var(--thumb-padding, 0.4em);\n        background: var(--thumb-background, #fff);\n        box-shadow: var(--widget-box-shadow);\n        cursor: pointer;\n        border-radius: calc(var(--curvature) * 1.5);\n        border: 0px solid #f3f3f3;\n      }\n\n      .wrapper.zoom {\n        border: none;\n        padding: 0 !important;\n        border-radius: 0 !important;\n        overflow: hidden !important;\n      }\n\n      .zoom .thumb {\n        border-radius: 0px !important;\n        width: calc(var(--thumb-size, 4em) + 0.8em);\n        max-height: calc(90vh - 10em);\n      }\n\n      .thumb {\n        background-size: cover;\n        background-position: center;\n        background-repeat: no-repeat;\n        border-radius: var(--curvature);\n        max-height: calc(var(--thumb-size, 4em) * 2);\n        max-width: calc(var(--thumb-size, 4em) * 2);\n        height: var(--thumb-size, 4em);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-weight: 400;\n        color: var(--thumb-icon, #bbb);\n      }\n\n      .thumb.document,\n      .thumb.audio,\n      .thumb.video {\n        border: 1px solid #eee;\n      }\n\n      .wrapper:hover .thumb.icon {\n      }\n\n      .viewer {\n        display: block;\n      }\n\n      .zoom .viewer {\n        display: block;\n      }\n\n      .download {\n        display: none;\n        position: absolute;\n        right: 0em;\n        bottom: 0em;\n        border-radius: var(--curvature);\n        transform: scale(0.2) translate(3em, 3em);\n        padding: 0.4em;\n      }\n\n      .zoom .download {\n        display: block;\n        background: rgba(0, 0, 0, 0.5);\n      }\n\n      .zoom .download:hover {\n        background: rgba(0, 0, 0, 0.6);\n        cursor: pointer;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  url: string;\n\n  @property({ type: String })\n  attachment: string;\n\n  @property({ type: Number })\n  ratio: number = 0;\n\n  @property({ type: Boolean })\n  preview: boolean = true;\n\n  @property({ type: Boolean, attribute: false })\n  zoom: boolean;\n\n  @property({ type: String, attribute: true })\n  contentType: string;\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n\n    if (\n      changes.has('contentType') &&\n      this.contentType === ThumbnailContentType.IMAGE\n    ) {\n      const toObserve = this.shadowRoot.querySelector('.observe');\n      if (toObserve) {\n        new ResizeObserver((e, observer) => {\n          if (toObserve.clientHeight > 0 && toObserve.clientWidth > 0) {\n            this.ratio = toObserve.clientHeight / toObserve.clientWidth;\n            this.preview =\n              this.ratio === 0 || (this.ratio > 0.25 && this.ratio <= 1.5);\n            observer.disconnect();\n          }\n        }).observe(toObserve);\n      }\n    }\n\n    // convert our attachment to a url and label\n    if (changes.has('attachment')) {\n      if (this.attachment) {\n        const splitIndex = this.attachment.indexOf(':');\n        if (splitIndex === -1) {\n          this.url = this.attachment;\n        } else {\n          const contentType = this.attachment.substring(0, splitIndex);\n          this.url = this.attachment.substring(splitIndex + 1);\n\n          if (contentType.startsWith('image')) {\n            this.contentType = ThumbnailContentType.IMAGE;\n          } else if (contentType.startsWith('audio')) {\n            this.contentType = ThumbnailContentType.AUDIO;\n          } else if (contentType.startsWith('video')) {\n            this.contentType = ThumbnailContentType.VIDEO;\n          } else if (contentType.startsWith('application')) {\n            this.contentType = ThumbnailContentType.DOCUMENT;\n          } else {\n            this.contentType = ThumbnailContentType.OTHER;\n          }\n        }\n      }\n    }\n  }\n\n  public handleThumbnailClicked() {\n    if (this.contentType === ThumbnailContentType.IMAGE && this.preview) {\n      window.setTimeout(() => {\n        const lightbox = document.querySelector('temba-lightbox') as Lightbox;\n        lightbox.showElement(this);\n      }, 100);\n    } else {\n      window.open(this.url, '_blank');\n    }\n  }\n\n  public handleDownload(e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n\n    // open this.url in another tab\n    window.open(this.url, '_blank');\n  }\n\n  public render() {\n    return html`\n      <div\n        @click=${this.handleThumbnailClicked.bind(this)}\n        class=\"${getClasses({ wrapper: true, zoom: this.zoom })}\"\n        url=${this.url}\n      >\n        ${this.contentType === ThumbnailContentType.IMAGE && this.preview\n          ? html`<div class=\"\"><div class=\"download\" @click=${this.handleDownload.bind(\n              this\n            )}><temba-icon size=\"1\" style=\"color:#fff;\" name=\"download\"></temba-icon></div><img\n          class=\"observe thumb ${this.contentType}\"\n          src=\"${this.url}\"\n        ></img></div>`\n          : html`<div\n              style=\"padding:1em; background:rgba(0,0,0,.05);border-radius:var(--curvature);\"\n            >\n              <temba-icon\n                size=\"1.5\"\n                name=\"${ThumbnailIcons[this.contentType]}\"\n              ></temba-icon>\n            </div>`}\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/events.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.js","sourceRoot":"","sources":["../../src/events.ts"],"names":[],"mappings":"","sourcesContent":["import { Msg, ObjectReference, User } from './interfaces';\n\nexport interface EventGroup {\n  type: string;\n  events: ContactEvent[];\n  open: boolean;\n}\n\nexport interface ContactEvent {\n  uuid?: string;\n  type: string;\n  created_on: string;\n  created_by?: User;\n}\n\nexport interface ChannelEvent extends ContactEvent {\n  channel_event_type: string;\n  duration: number;\n\n  event: {\n    type: string;\n    channel: { uuid: string; name: string };\n    duration?: number;\n    optin?: {\n      uuid: string;\n      name: string;\n    };\n  };\n}\n\nexport interface ContactLanguageChangedEvent extends ContactEvent {\n  language: string;\n  step_uuid: string;\n  session_uuid: string;\n}\n\nexport interface OptinRequestedEvent extends ContactEvent {\n  optin: {\n    uuid: string;\n    name: string;\n  };\n}\n\nexport interface MsgEvent extends ContactEvent {\n  msg: Msg;\n  status: string;\n  failed_reason?: string;\n  failed_reason_display?: string;\n  logs_url: string;\n  recipient_count?: number;\n  created_by?: User;\n  optin?: ObjectReference;\n}\n\nexport interface FlowEvent extends ContactEvent {\n  flow: ObjectReference;\n  status: string;\n}\n\nexport interface URNsChangedEvent extends ContactEvent {\n  urns: string[];\n}\n\nexport interface TicketEvent extends ContactEvent {\n  note?: string;\n  assignee?: User;\n  ticket: {\n    uuid: string;\n    topic?: ObjectReference;\n    closed_on?: string;\n    opened_on?: string;\n  };\n  topic?: ObjectReference;\n  created_by?: User;\n}\n\nexport interface NameChangedEvent extends ContactEvent {\n  name: string;\n}\n\nexport interface UpdateFieldEvent extends ContactEvent {\n  field: { key: string; name: string };\n  value: { text: string };\n}\n\nexport interface ContactGroupsEvent extends ContactEvent {\n  groups_added: ObjectReference[];\n  groups_removed: ObjectReference[];\n}\n\nexport interface AirtimeTransferredEvent extends ContactEvent {\n  sender: string;\n  recipient: string;\n  currency: string;\n  amount: string;\n}\n\nexport type CallStartedEvent = ContactEvent;\n\nexport interface ContactHistoryPage {\n  has_older: boolean;\n  recent_only: boolean;\n  next_before: number;\n  next_after: number;\n  start_date: Date;\n  events: ContactEvent[];\n}\n"]}
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../src/events.ts"],"names":[],"mappings":"","sourcesContent":["import { Msg, ObjectReference, User } from './interfaces';\n\nexport interface EventGroup {\n  type: string;\n  events: ContactEvent[];\n  open: boolean;\n}\n\nexport interface ContactEvent {\n  uuid?: string;\n  type: string;\n  created_on: string;\n  created_by?: User;\n}\n\nexport interface ChannelEvent extends ContactEvent {\n  channel_event_type: string;\n  duration: number;\n\n  event: {\n    type: string;\n    channel: { uuid: string; name: string };\n    duration?: number;\n    optin?: {\n      uuid: string;\n      name: string;\n    };\n  };\n}\n\nexport interface ContactLanguageChangedEvent extends ContactEvent {\n  language: string;\n  step_uuid: string;\n  session_uuid: string;\n}\n\nexport interface OptinRequestedEvent extends ContactEvent {\n  optin: {\n    uuid: string;\n    name: string;\n  };\n}\n\nexport interface MsgEvent extends ContactEvent {\n  msg: Msg;\n  status: string;\n  failed_reason?: string;\n  failed_reason_display?: string;\n  logs_url: string;\n  recipient_count?: number;\n  created_by?: User;\n  optin?: ObjectReference;\n}\n\nexport interface FlowEvent extends ContactEvent {\n  flow: ObjectReference;\n  status: string;\n}\n\nexport interface RunEvent extends ContactEvent {\n  flow: ObjectReference;\n  status: string;\n}\n\nexport interface URNsChangedEvent extends ContactEvent {\n  urns: string[];\n}\n\nexport interface TicketEvent extends ContactEvent {\n  note?: string;\n  assignee?: User;\n  ticket: {\n    uuid: string;\n    topic?: ObjectReference;\n    closed_on?: string;\n    opened_on?: string;\n  };\n  topic?: ObjectReference;\n  created_by?: User;\n}\n\nexport interface NameChangedEvent extends ContactEvent {\n  name: string;\n}\n\nexport interface UpdateFieldEvent extends ContactEvent {\n  field: { key: string; name: string };\n  value: { text: string };\n}\n\nexport interface ContactGroupsEvent extends ContactEvent {\n  groups_added: ObjectReference[];\n  groups_removed: ObjectReference[];\n}\n\nexport interface AirtimeTransferredEvent extends ContactEvent {\n  sender: string;\n  recipient: string;\n  currency: string;\n  amount: string;\n}\n\nexport type CallStartedEvent = ContactEvent;\n\nexport interface ContactHistoryPage {\n  has_older: boolean;\n  recent_only: boolean;\n  next_before: number;\n  next_after: number;\n  start_date: Date;\n  events: ContactEvent[];\n}\n"]}

package/out-tsc/src/flow/NodeEditor.js

@@ -13,6 +13,7 @@ export class NodeEditor extends RapidElement {
         this.originalFormData = {};
         this.errors = {};
         this.groupCollapseState = {};
+        this.groupHoverState = {};
     }
     static get styles() {
         return css `
@@ -23,6 +24,10 @@ export class NodeEditor extends RapidElement {
         gap: 15px;
         min-width: 400px;
         padding-bottom: 40px;
+
+        --color-bubble-bg: rgba(255, 255, 255, 0.8);
+        --color-bubble-border: #999;
+        --color-bubble-text: #777;
       }
 
       .form-field {
@@ -31,10 +36,6 @@ export class NodeEditor extends RapidElement {
       }
 
       .form-field label {
-        font-weight: 500;
-        margin-bottom: 6px;
-        color: #333;
-        font-size: 14px;
       }
 
       .field-errors {
@@ -95,10 +96,16 @@ export class NodeEditor extends RapidElement {
         border-color: var(--color-error, tomato);
       }
 
+      .form-group.has-bubble {
+        border-width: 1px;
+        border-color: var(--color-bubble-border, #aaa);
+      }
+
       .form-group-header {
         background: #f8f9fa;
-        padding: 12px 15px;
+        padding: 8px 10px;
         border-bottom: 1px solid #e0e0e0;
+
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -106,6 +113,17 @@ export class NodeEditor extends RapidElement {
         user-select: none;
       }
 
+      .form-group.has-bubble .form-group-header {
+      }
+
+      .collapsed .form-group-header {
+        border: none;
+      }
+
+      .form-group-header:hover {
+        background: rgba(0, 0, 0, 0.05);
+      }
+
       .form-group-header.collapsible:hover {
         background: #f1f3f4;
       }
@@ -116,7 +134,7 @@ export class NodeEditor extends RapidElement {
 
       .form-group-title {
         font-weight: 500;
-        color: #333;
+        color: var(--color-label, #777);
         font-size: 14px;
         display: flex;
       }
@@ -139,13 +157,13 @@ export class NodeEditor extends RapidElement {
       }
 
       .form-group-content {
-        padding: 15px;
+        padding: 6px;
         display: flex;
         flex-direction: column;
         gap: 15px;
         overflow: hidden;
-        transition: all 0.3s ease;
-        max-height: 1000px; /* Large enough to accommodate most content */
+        transition: all 0.2s ease-in-out;
+
         opacity: 1;
       }
 
@@ -158,9 +176,14 @@ export class NodeEditor extends RapidElement {
 
       .group-toggle-icon {
         color: #666;
-        transition: transform 0.3s ease;
+        transition: transform 0.3s ease, opacity 0.3s ease;
         cursor: pointer;
         transform: rotate(0deg);
+        opacity: 1;
+      }
+
+      .group-toggle-icon.faded {
+        opacity: 0;
       }
 
       .group-toggle-icon.expanded {
@@ -179,6 +202,58 @@ export class NodeEditor extends RapidElement {
         color: var(--color-error, tomato);
         margin-right: 8px;
       }
+
+      .group-count-bubble {
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 11px;
+        font-weight: 600;
+        padding: 4px;
+        min-width: 12px;
+        min-height: 12px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        line-height: 0px;
+        opacity: 1;
+        transition: opacity 0.3s ease;
+        background: var(--color-bubble-bg, #fff);
+        border: 1px solid var(--color-bubble-border, #777);
+        color: var(--color-bubble-text, #000);
+      }
+
+      .group-count-bubble.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .group-checkmark-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 1;
+        transition: opacity 0.3s ease;
+        border-radius: 50%;
+        color: var(--color-bubble-text, #000);
+        background: var(--color-bubble-bg, #fff);
+        border: 1px solid var(--color-bubble-border, #777);
+        padding: 0.2em;
+      }
+
+      .group-checkmark-icon.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .group-toggle-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+      }
     `;
     }
     connectedCallback() {
@@ -206,6 +281,7 @@ export class NodeEditor extends RapidElement {
         this.formData = {};
         this.errors = {};
         this.groupCollapseState = {};
+        this.groupHoverState = {};
     }
     initializeFormData() {
         if (this.action) {
@@ -417,7 +493,7 @@ export class NodeEditor extends RapidElement {
                     // Check required fields
                     if (fieldConfig.required &&
                         (!value || (Array.isArray(value) && value.length === 0))) {
-                        errors[fieldName] = `${fieldConfig.label || fieldName} is required`;
+                        errors[fieldName] = `${fieldConfig.label || fieldName} is required.`;
                     }
                     // Check minLength for text fields
                     if (typeof value === 'string' &&
@@ -437,6 +513,9 @@ export class NodeEditor extends RapidElement {
             if (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.validate) {
                 // Convert form data back to action for validation
                 let actionForValidation;
+                if (actionConfig.sanitize) {
+                    actionConfig.sanitize(this.formData);
+                }
                 if (actionConfig.fromFormData) {
                     actionForValidation = actionConfig.fromFormData(this.formData);
                 }
@@ -693,9 +772,43 @@ export class NodeEditor extends RapidElement {
         }
         // Check for computed values in dependent fields
         this.updateComputedFields(propertyName);
+        // Re-evaluate group collapse states that depend on form data
+        this.updateGroupCollapseStates();
         // Trigger re-render to handle conditional field visibility
         this.requestUpdate();
     }
+    updateGroupCollapseStates() {
+        if (!this.action)
+            return;
+        const config = ACTION_CONFIG[this.action.type];
+        if (!(config === null || config === void 0 ? void 0 : config.layout))
+            return;
+        this.updateGroupCollapseStatesRecursive(config.layout);
+    }
+    updateGroupCollapseStatesRecursive(items) {
+        items.forEach((item) => {
+            if (typeof item === 'object' && item.type === 'group') {
+                const { label, collapsed, collapsible } = item;
+                // Only update if the group is collapsible and has a function-based collapsed property
+                if (collapsible && typeof collapsed === 'function') {
+                    const newCollapsedState = collapsed(this.formData);
+                    // Only update if the state has changed to avoid unnecessary re-renders
+                    if (this.groupCollapseState[label] !== newCollapsedState) {
+                        this.groupCollapseState = {
+                            ...this.groupCollapseState,
+                            [label]: newCollapsedState
+                        };
+                    }
+                }
+                // Recursively check nested items
+                this.updateGroupCollapseStatesRecursive(item.items);
+            }
+            else if (typeof item === 'object' && item.type === 'row') {
+                // Recursively check items in rows
+                this.updateGroupCollapseStatesRecursive(item.items);
+            }
+        });
+    }
     updateComputedFields(changedFieldName) {
         if (!this.action)
             return;
@@ -813,6 +926,7 @@ export class NodeEditor extends RapidElement {
           nameKey="${selectConfig.nameKey || 'name'}"
           endpoint="${selectConfig.endpoint || ''}"
           .helpText="${config.helpText || ''}"
+          flavor="${selectConfig.flavor || 'small'}"
           @change="${(e) => this.handleFormFieldChange(fieldName, e)}"
         >
           ${(_a = selectConfig.options) === null || _a === void 0 ? void 0 : _a.map((option) => {
@@ -860,8 +974,10 @@ export class NodeEditor extends RapidElement {
             .sortable="${config.sortable}"
             .itemLabel="${config.itemLabel || 'Item'}"
             .minItems="${config.minItems || 0}"
+            .maxItems="${config.maxItems || 0}"
             .onItemChange="${config.onItemChange}"
-            @change="${(e) => this.handleNewFieldChange(fieldName, e.detail.value)}"
+            .isEmptyItemFn="${config.isEmptyItem}"
+            @change="${(e) => this.handleNewFieldChange(fieldName, e.target.value)}"
           ></temba-array-editor>
           ${errors.length
                     ? html `<div class="field-errors">${errors.join(', ')}</div>`
@@ -885,6 +1001,28 @@ export class NodeEditor extends RapidElement {
                     ? html `<div class="field-errors">${errors.join(', ')}</div>`
                     : ''}
         </div>`;
+            }
+            case 'message-editor': {
+                const messageConfig = config;
+                return html `<temba-message-editor
+          name="${fieldName}"
+          label="${config.label}"
+          ?required="${config.required}"
+          .errors="${errors}"
+          .value="${value || ''}"
+          .attachments="${this.formData.attachments || []}"
+          placeholder="${messageConfig.placeholder || ''}"
+          .helpText="${config.helpText || ''}"
+          ?autogrow="${messageConfig.autogrow}"
+          ?gsm="${messageConfig.gsm}"
+          ?disableCompletion="${messageConfig.disableCompletion}"
+          counter="${messageConfig.counter || ''}"
+          accept="${messageConfig.accept || ''}"
+          endpoint="${messageConfig.endpoint || ''}"
+          max-attachments="${messageConfig.maxAttachments || 3}"
+          minHeight="${messageConfig.minHeight || 60}"
+          @change="${(e) => this.handleMessageEditorChange(fieldName, e)}"
+        ></temba-message-editor>`;
             }
             default:
                 return html `<div>Unsupported field type: ${config.type}</div>`;
@@ -896,6 +1034,18 @@ export class NodeEditor extends RapidElement {
             [groupLabel]: !this.groupCollapseState[groupLabel]
         };
     }
+    handleGroupMouseEnter(groupLabel) {
+        this.groupHoverState = {
+            ...this.groupHoverState,
+            [groupLabel]: true
+        };
+    }
+    handleGroupMouseLeave(groupLabel) {
+        this.groupHoverState = {
+            ...this.groupHoverState,
+            [groupLabel]: false
+        };
+    }
     expandGroupsWithErrors(errors) {
         if (!this.action)
             return;
@@ -969,25 +1119,54 @@ export class NodeEditor extends RapidElement {
     `;
     }
     renderGroup(groupConfig, config, renderedFields) {
-        var _a;
-        const { label, items, collapsible = false, collapsed = false, helpText } = groupConfig;
+        var _a, _b;
+        const { label, items, collapsible = false, collapsed = false, helpText, getGroupValueCount } = groupConfig;
         // Initialize collapse state if not set
         if (collapsible && !(label in this.groupCollapseState)) {
+            // Evaluate collapsed property - can be boolean or function
+            const initialCollapsed = typeof collapsed === 'function' ? collapsed(this.formData) : collapsed;
             this.groupCollapseState = {
                 ...this.groupCollapseState,
-                [label]: collapsed
+                [label]: initialCollapsed
             };
         }
         const isCollapsed = collapsible
-            ? (_a = this.groupCollapseState[label]) !== null && _a !== void 0 ? _a : collapsed
+            ? (_a = this.groupCollapseState[label]) !== null && _a !== void 0 ? _a : (typeof collapsed === 'function' ? collapsed(this.formData) : collapsed)
             : false;
         // Check if any field in this group has errors
         const fieldsInGroup = this.collectFieldsFromItems(items);
         const groupHasErrors = fieldsInGroup.some((fieldName) => this.errors[fieldName]);
+        // Calculate count for bubble display
+        let valueCount = 0;
+        let showBubble = false;
+        let showCheckmark = false;
+        let hasValue = false;
+        const isHovered = (_b = this.groupHoverState[label]) !== null && _b !== void 0 ? _b : false;
+        if (getGroupValueCount && collapsible) {
+            try {
+                const result = getGroupValueCount(this.formData);
+                if (typeof result === 'boolean') {
+                    // Boolean result - show checkmark when true
+                    showCheckmark = result && isCollapsed && !isHovered;
+                    hasValue = result;
+                }
+                else if (typeof result === 'number') {
+                    // Numeric result - show count bubble
+                    valueCount = result;
+                    showBubble = valueCount > 0 && isCollapsed && !isHovered;
+                    hasValue = valueCount > 0;
+                }
+            }
+            catch (error) {
+                console.error(`Error calculating group value count for ${label}:`, error);
+            }
+        }
         return html `
       <div
         class="form-group ${collapsible ? 'collapsible' : ''} ${groupHasErrors
             ? 'has-errors'
+            : ''} ${isCollapsed ? 'collapsed' : 'expanded'} ${hasValue
+            ? 'has-bubble'
             : ''}"
       >
         <div
@@ -995,6 +1174,12 @@ export class NodeEditor extends RapidElement {
           @click=${collapsible
             ? () => this.handleGroupToggle(label)
             : undefined}
+          @mouseenter=${collapsible
+            ? () => this.handleGroupMouseEnter(label)
+            : undefined}
+          @mouseleave=${collapsible
+            ? () => this.handleGroupMouseLeave(label)
+            : undefined}
         >
           <div class="form-group-info">
             <div class="form-group-title">${label}</div>
@@ -1010,13 +1195,28 @@ export class NodeEditor extends RapidElement {
               ></temba-icon>`
             : ''}
           ${collapsible && !groupHasErrors
-            ? html `<temba-icon
-                name="arrow_right"
-                size="1.5"
-                class="group-toggle-icon ${isCollapsed
+            ? html `<div class="group-toggle-container">
+                <temba-icon
+                  name="arrow_right"
+                  size="1.5"
+                  class="group-toggle-icon ${isCollapsed
                 ? 'collapsed'
-                : 'expanded'}"
-              ></temba-icon>`
+                : 'expanded'} ${showBubble || showCheckmark ? 'faded' : ''}"
+                ></temba-icon>
+                ${showCheckmark
+                ? html `<temba-icon
+                      name="check"
+                      size="1"
+                      class="group-checkmark-icon"
+                    ></temba-icon>`
+                : showBubble
+                    ? html `<div
+                      class="group-count-bubble ${!showBubble ? 'hidden' : ''}"
+                    >
+                      ${valueCount}
+                    </div>`
+                    : ''}
+              </div>`
             : ''}
         </div>
         <div
@@ -1064,6 +1264,26 @@ export class NodeEditor extends RapidElement {
             delete newErrors[fieldName];
             this.errors = newErrors;
         }
+        // Re-evaluate group collapse states that depend on form data
+        this.updateGroupCollapseStates();
+        // Trigger re-render
+        this.requestUpdate();
+    }
+    handleMessageEditorChange(fieldName, event) {
+        const target = event.target;
+        // Update both text and attachments from the message editor
+        this.formData = {
+            ...this.formData,
+            [fieldName]: target.value,
+            attachments: target.attachments || []
+        };
+        // Clear any existing errors for both fields
+        if (this.errors[fieldName]) {
+            const newErrors = { ...this.errors };
+            delete newErrors[fieldName];
+            delete newErrors.attachments;
+            this.errors = newErrors;
+        }
         // Trigger re-render
         this.requestUpdate();
     }
@@ -1208,4 +1428,7 @@ __decorate([
 __decorate([
     state()
 ], NodeEditor.prototype, "groupCollapseState", void 0);
+__decorate([
+    state()
+], NodeEditor.prototype, "groupHoverState", void 0);
 //# sourceMappingURL=NodeEditor.js.map