@nyaruka/temba-components 0.142.0 → 0.142.2

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

@@ -150,6 +150,25 @@ export class NodeEditor extends RapidElement {
         overflow: hidden;
       }
 
+      .form-group.no-border {
+        border: none;
+      }
+
+      .form-group.no-border > .form-group-header {
+        background: none;
+        border-bottom: none;
+        padding-left: 11px; /* 1px border + 10px padding to align with bordered groups */
+      }
+
+      .form-group.no-border > .form-group-header:hover {
+        background: none;
+      }
+
+      .form-group.no-border > .form-group-content {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
       .form-group.has-errors {
         border-color: var(--color-error, tomato);
       }
@@ -314,6 +333,135 @@ export class NodeEditor extends RapidElement {
         align-items: center;
       }
 
+      /* Accordion styles */
+      .accordion {
+        border: 1px solid #e0e0e0;
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      .accordion-section {
+        border-bottom: 1px solid #e0e0e0;
+      }
+
+      .accordion-section:last-child {
+        border-bottom: none;
+      }
+
+      .accordion-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 6px 10px;
+        cursor: pointer;
+        user-select: none;
+        background: #f8f9fa;
+        transition: background 0.15s ease;
+      }
+
+      .accordion-header:hover {
+        background: #f0f1f2;
+      }
+
+      .accordion-section.expanded > .accordion-header {
+        border-bottom: 1px solid #e0e0e0;
+      }
+
+      .accordion-title {
+        font-weight: 500;
+        font-size: 13px;
+        color: var(--color-label, #777);
+      }
+
+      .accordion-toggle-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+      }
+
+      .accordion-toggle-icon {
+        color: #999;
+        transition:
+          transform 0.2s ease,
+          opacity 0.3s ease;
+      }
+
+      .accordion-toggle-icon.expanded {
+        transform: rotate(90deg);
+      }
+
+      .accordion-toggle-icon.faded {
+        opacity: 0;
+      }
+
+      .accordion-count-bubble {
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        font-weight: 600;
+        padding: 3px;
+        min-width: 10px;
+        min-height: 10px;
+        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);
+      }
+
+      .accordion-count-bubble.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .accordion-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.15em;
+      }
+
+      .accordion-checkmark-icon.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .accordion-content {
+        padding: 8px 10px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        overflow: hidden;
+        transition: all 0.2s ease-in-out;
+        opacity: 1;
+      }
+
+      .accordion-content.collapsed {
+        max-height: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+        opacity: 0;
+      }
+
+      .accordion-error-icon {
+        color: var(--color-error, tomato);
+        margin-right: 6px;
+      }
+
       .gutter-fields {
         display: flex;
         flex-direction: column;
@@ -1041,14 +1189,20 @@ export class NodeEditor extends RapidElement {
             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
+                // Skip reveal groups that have been expanded — they are one-way
                 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
-                        };
+                    if (item.reveal && this.groupCollapseState[label] === false) {
+                        // Reveal group was manually expanded — don't re-collapse
+                    }
+                    else {
+                        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
@@ -1058,6 +1212,22 @@ export class NodeEditor extends RapidElement {
                 // Recursively check items in rows
                 this.updateGroupCollapseStatesRecursive(item.items);
             }
+            else if (typeof item === 'object' && item.type === 'accordion') {
+                // Check each accordion section
+                item.sections.forEach((section) => {
+                    const stateKey = `accordion:${section.label}`;
+                    if (typeof section.collapsed === 'function') {
+                        const newCollapsedState = section.collapsed(this.formData);
+                        if (this.groupCollapseState[stateKey] !== newCollapsedState) {
+                            this.groupCollapseState = {
+                                ...this.groupCollapseState,
+                                [stateKey]: newCollapsedState
+                            };
+                        }
+                    }
+                    this.updateGroupCollapseStatesRecursive(section.items);
+                });
+            }
         });
     }
     updateComputedFields(changedFieldName) {
@@ -1242,6 +1412,10 @@ export class NodeEditor extends RapidElement {
                     const url = ((_b = (_a = picker.attachments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.url) || '';
                     this.handleNewFieldChange(fieldName, url);
                 }
+                else if (fieldName && config.type === 'template-editor') {
+                    // Special handling for template editor (manages template + template_variables)
+                    this.handleTemplateEditorChange(fieldName, e);
+                }
                 else {
                     // Default handling for most field types
                     this.handleFormFieldChange(fieldName, e);
@@ -1250,7 +1424,8 @@ export class NodeEditor extends RapidElement {
             showLabel: true,
             formData: this.formData,
             additionalData: {
-                attachments: this.formData.attachments || []
+                attachments: this.formData.attachments || [],
+                template_variables: this.formData.template_variables || []
             }
         });
     }
@@ -1298,6 +1473,20 @@ export class NodeEditor extends RapidElement {
                 // Recursively check items in rows
                 this.expandGroupsWithErrorsRecursive(item.items, errorFields);
             }
+            else if (typeof item === 'object' && item.type === 'accordion') {
+                // Check each accordion section for errors
+                item.sections.forEach((section) => {
+                    const fieldsInSection = this.collectFieldsFromItems(section.items);
+                    const sectionHasErrors = fieldsInSection.some((fieldName) => errorFields.has(fieldName));
+                    if (sectionHasErrors) {
+                        this.groupCollapseState = {
+                            ...this.groupCollapseState,
+                            [`accordion:${section.label}`]: false
+                        };
+                    }
+                    this.expandGroupsWithErrorsRecursive(section.items, errorFields);
+                });
+            }
         });
     }
     renderLayoutItem(item, config, renderedFields) {
@@ -1321,6 +1510,8 @@ export class NodeEditor extends RapidElement {
                 return this.renderRow(item, config, renderedFields);
             case 'group':
                 return this.renderGroup(item, config, renderedFields);
+            case 'accordion':
+                return this.renderAccordion(item, config, renderedFields);
             case 'spacer':
                 return html ``;
             case 'text':
@@ -1416,7 +1607,7 @@ export class NodeEditor extends RapidElement {
     }
     renderGroup(groupConfig, config, renderedFields) {
         var _a, _b;
-        const { label, items, collapsible = false, collapsed = false, helpText, contentPadding, getGroupValueCount } = groupConfig;
+        const { label, items, collapsible = false, collapsed = false, helpText, contentPadding, bordered = true, reveal = false, getGroupValueCount } = groupConfig;
         // Initialize collapse state if not set
         if (collapsible && !(label in this.groupCollapseState)) {
             // Evaluate collapsed property - can be boolean or function
@@ -1429,6 +1620,10 @@ export class NodeEditor extends RapidElement {
         const isCollapsed = collapsible
             ? (_a = this.groupCollapseState[label]) !== null && _a !== void 0 ? _a : (typeof collapsed === 'function' ? collapsed(this.formData) : collapsed)
             : false;
+        // Reveal mode: once expanded, render items directly without any group wrapper
+        if (reveal && !isCollapsed) {
+            return html `${items.map((item) => this.renderLayoutItem(item, config, renderedFields))}`;
+        }
         // Check if any field in this group has errors
         const fieldsInGroup = this.collectFieldsFromItems(items);
         const groupHasErrors = fieldsInGroup.some((fieldName) => this.errors[fieldName]);
@@ -1463,7 +1658,7 @@ export class NodeEditor extends RapidElement {
             ? 'has-errors'
             : ''} ${isCollapsed ? 'collapsed' : 'expanded'} ${hasValue
             ? 'has-bubble'
-            : ''}"
+            : ''} ${!bordered ? 'no-border' : ''}"
       >
         <div
           class="form-group-header ${collapsible ? 'clickable' : ''}"
@@ -1528,6 +1723,129 @@ export class NodeEditor extends RapidElement {
       </div>
     `;
     }
+    renderAccordion(accordionConfig, config, renderedFields) {
+        const { sections, multi = false } = accordionConfig;
+        return html `
+      <div class="accordion">
+        ${sections.map((section) => {
+            var _a, _b;
+            const { label, collapsed = true, getValueCount } = section;
+            const stateKey = `accordion:${label}`;
+            // Initialize collapse state if not set
+            if (!(stateKey in this.groupCollapseState)) {
+                const initialCollapsed = typeof collapsed === 'function'
+                    ? collapsed(this.formData)
+                    : collapsed;
+                this.groupCollapseState = {
+                    ...this.groupCollapseState,
+                    [stateKey]: initialCollapsed
+                };
+            }
+            const isCollapsed = (_a = this.groupCollapseState[stateKey]) !== null && _a !== void 0 ? _a : true;
+            const isHovered = (_b = this.groupHoverState[stateKey]) !== null && _b !== void 0 ? _b : false;
+            // Check for errors in this section
+            const fieldsInSection = this.collectFieldsFromItems(section.items);
+            const sectionHasErrors = fieldsInSection.some((fieldName) => this.errors[fieldName]);
+            // Value count / checkmark display
+            let valueCount = 0;
+            let showBubble = false;
+            let showCheckmark = false;
+            let hasValue = false;
+            if (getValueCount) {
+                try {
+                    const result = getValueCount(this.formData);
+                    if (typeof result === 'boolean') {
+                        hasValue = result;
+                        showCheckmark = result && isCollapsed && !isHovered;
+                    }
+                    else if (typeof result === 'number') {
+                        valueCount = result;
+                        hasValue = valueCount > 0;
+                        showBubble = valueCount > 0 && isCollapsed && !isHovered;
+                    }
+                }
+                catch (error) {
+                    // ignore
+                }
+            }
+            return html `
+            <div
+              class="accordion-section ${isCollapsed
+                ? 'collapsed'
+                : 'expanded'} ${hasValue ? 'has-value' : ''}"
+            >
+              <div
+                class="accordion-header"
+                @click=${() => this.handleAccordionToggle(stateKey, sections, multi)}
+                @mouseenter=${() => this.handleGroupMouseEnter(stateKey)}
+                @mouseleave=${() => this.handleGroupMouseLeave(stateKey)}
+              >
+                <div class="accordion-title">${label}</div>
+                ${sectionHasErrors
+                ? html `<temba-icon
+                      name="alert_warning"
+                      class="accordion-error-icon"
+                      size="1.2"
+                    ></temba-icon>`
+                : html `<div class="accordion-toggle-container">
+                      <temba-icon
+                        name="arrow_right"
+                        size="1.2"
+                        class="accordion-toggle-icon ${isCollapsed
+                    ? 'collapsed'
+                    : 'expanded'} ${showBubble || showCheckmark
+                    ? 'faded'
+                    : ''}"
+                      ></temba-icon>
+                      ${showCheckmark
+                    ? html `<temba-icon
+                            name="check"
+                            size="0.8"
+                            class="accordion-checkmark-icon"
+                          ></temba-icon>`
+                    : showBubble
+                        ? html `<div
+                              class="accordion-count-bubble ${!showBubble
+                            ? 'hidden'
+                            : ''}"
+                            >
+                              ${valueCount}
+                            </div>`
+                        : ''}
+                    </div>`}
+              </div>
+              <div
+                class="accordion-content ${isCollapsed ? 'collapsed' : 'expanded'}"
+              >
+                ${section.items.map((item) => this.renderLayoutItem(item, config, renderedFields))}
+              </div>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+    handleAccordionToggle(stateKey, sections, multi) {
+        var _a;
+        const isCurrentlyCollapsed = (_a = this.groupCollapseState[stateKey]) !== null && _a !== void 0 ? _a : true;
+        if (multi) {
+            // Multi mode: just toggle this section
+            this.groupCollapseState = {
+                ...this.groupCollapseState,
+                [stateKey]: !isCurrentlyCollapsed
+            };
+        }
+        else {
+            // Single mode: collapse all other sections, toggle this one
+            const newState = { ...this.groupCollapseState };
+            sections.forEach((section) => {
+                const key = `accordion:${section.label}`;
+                newState[key] = true; // collapse all
+            });
+            newState[stateKey] = !isCurrentlyCollapsed; // toggle clicked
+            this.groupCollapseState = newState;
+        }
+    }
     collectFieldsFromItems(items) {
         const fields = [];
         items.forEach((item) => {
@@ -1543,6 +1861,11 @@ export class NodeEditor extends RapidElement {
             else if (item.type === 'group') {
                 fields.push(...this.collectFieldsFromItems(item.items));
             }
+            else if (item.type === 'accordion') {
+                item.sections.forEach((section) => {
+                    fields.push(...this.collectFieldsFromItems(section.items));
+                });
+            }
         });
         return fields;
     }
@@ -1570,6 +1893,19 @@ export class NodeEditor extends RapidElement {
         // Trigger re-render
         this.requestUpdate();
     }
+    handleTemplateEditorChange(fieldName, event) {
+        const customEvent = event;
+        const detail = customEvent.detail;
+        this.formData = {
+            ...this.formData,
+            [fieldName]: detail.template
+                ? { uuid: detail.template.uuid, name: detail.template.name }
+                : null,
+            template_variables: detail.variables || []
+        };
+        this.updateGroupCollapseStates();
+        this.requestUpdate();
+    }
     handleMessageEditorChange(fieldName, event) {
         const target = event.target;
         // Update both text and attachments from the message editor