jupiter-dynamic-forms 1.7.3 → 1.8.0

package/dist/index.mjs

@@ -2706,6 +2706,7 @@ let JupiterFormSection = class extends LitElement {
     this._showAddColumnDialog = false;
     this._sectionPeriodType = "duration";
     this._expandedConcepts = /* @__PURE__ */ new Set();
+    this._allTreeExpanded = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -2843,6 +2844,50 @@ let JupiterFormSection = class extends LitElement {
     }
     return result;
   }
+  _getAllConceptIds(concepts) {
+    const result = [];
+    for (const concept of concepts) {
+      if (concept.children && concept.children.length > 0) {
+        result.push(concept.id);
+        result.push(...this._getAllConceptIds(concept.children));
+      }
+    }
+    return result;
+  }
+  _expandAllTrees() {
+    const allConceptIds = this._getAllConceptIds(this.section.concepts || []);
+    allConceptIds.forEach((id) => this._expandedConcepts.add(id));
+    this._allTreeExpanded = true;
+    this.requestUpdate();
+  }
+  _collapseAllTrees() {
+    this._expandedConcepts.clear();
+    this._allTreeExpanded = false;
+    this.requestUpdate();
+  }
+  _toggleAllTrees(event) {
+    event.stopPropagation();
+    if (!this._expanded) {
+      this._expanded = true;
+    }
+    if (this._allTreeExpanded) {
+      this._collapseAllTrees();
+    } else {
+      this._expandAllTrees();
+    }
+  }
+  _handleTreeCheckboxChange(event) {
+    event.stopPropagation();
+    const checkbox = event.target;
+    if (!this._expanded) {
+      this._expanded = true;
+    }
+    if (checkbox.checked) {
+      this._expandAllTrees();
+    } else {
+      this._collapseAllTrees();
+    }
+  }
   _handleConceptExpand(event) {
     event.stopPropagation();
     const { conceptId, expanded } = event.detail;
@@ -2851,6 +2896,8 @@ let JupiterFormSection = class extends LitElement {
     } else {
       this._expandedConcepts.delete(conceptId);
     }
+    const allConceptIds = this._getAllConceptIds(this.section.concepts || []);
+    this._allTreeExpanded = allConceptIds.length > 0 && allConceptIds.every((id) => this._expandedConcepts.has(id));
     this.requestUpdate();
     this.dispatchEvent(new CustomEvent("concept-expand", {
       detail: event.detail,
@@ -2885,8 +2932,10 @@ let JupiterFormSection = class extends LitElement {
               <p class="section-description">${this.section.description}</p>
             ` : ""}
           </div>
-          <div class="section-toggle ${this.collapsible ? this._expanded ? "expanded" : "" : "hidden"}">
-            ${this.collapsible ? "▶" : ""}
+          <div class="section-header-controls">
+            <div class="section-toggle ${this.collapsible ? this._expanded ? "expanded" : "" : "hidden"}">
+              ${this.collapsible ? "▶" : ""}
+            </div>
           </div>
         </div>
         
@@ -2906,8 +2955,19 @@ let JupiterFormSection = class extends LitElement {
             <p class="section-description">${this.section.description}</p>
           ` : ""}
         </div>
-        <div class="section-toggle ${this.collapsible ? this._expanded ? "expanded" : "" : "hidden"}">
-          ${this.collapsible ? "▶" : ""}
+        <div class="section-header-controls">
+          <div class="tree-control">
+            <input
+              type="checkbox"
+              class="tree-control-checkbox"
+              .checked="${this._allTreeExpanded}"
+              @change="${this._handleTreeCheckboxChange}"
+            />
+            <span class="tree-control-label" @click="${this._toggleAllTrees}">${this._allTreeExpanded ? "Collapse Tree" : "Expand Tree"}</span>
+          </div>
+          <div class="section-toggle ${this.collapsible ? this._expanded ? "expanded" : "" : "hidden"}">
+            ${this.collapsible ? "▶" : ""}
+          </div>
         </div>
       </div>
 
@@ -3063,6 +3123,43 @@ JupiterFormSection.styles = css`
       visibility: hidden;
     }
 
+    .section-header-controls {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .tree-control {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: var(--jupiter-text-secondary, #666);
+      background: var(--jupiter-button-background, #fff);
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      padding: 4px 8px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    .tree-control:hover {
+      background: var(--jupiter-button-hover-background, #f5f5f5);
+      border-color: var(--jupiter-primary-color, #007bff);
+    }
+
+    .tree-control-checkbox {
+      width: 14px;
+      height: 14px;
+      cursor: pointer;
+    }
+
+    .tree-control-label {
+      cursor: pointer;
+      font-weight: 500;
+      white-space: nowrap;
+    }
+
     .section-content {
       display: block;
       transition: max-height 0.3s ease;
@@ -3257,6 +3354,9 @@ __decorateClass$2([
 __decorateClass$2([
   r()
 ], JupiterFormSection.prototype, "_expandedConcepts", 2);
+__decorateClass$2([
+  r()
+], JupiterFormSection.prototype, "_allTreeExpanded", 2);
 JupiterFormSection = __decorateClass$2([
   t$1("jupiter-form-section")
 ], JupiterFormSection);