jupiter-dynamic-forms 1.8.0 → 1.8.1

package/dist/index.mjs

@@ -2701,6 +2701,7 @@ let JupiterFormSection = class extends LitElement {
     this.disabled = false;
     this.collapsible = true;
     this.locale = "en-US";
+    this.isFirstSection = false;
     this.availableDimensions = [];
     this._expanded = true;
     this._showAddColumnDialog = false;
@@ -2712,6 +2713,22 @@ let JupiterFormSection = class extends LitElement {
     super.connectedCallback();
     this._expanded = this.section.expanded !== false;
     this._determinePeriodType();
+    this._checkAndExpandFirstSection();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("isFirstSection") || changedProperties.has("section")) {
+      this._checkAndExpandFirstSection();
+    }
+  }
+  _checkAndExpandFirstSection() {
+    if (this.isFirstSection && this.section && this.section.concepts) {
+      this._expanded = true;
+      setTimeout(() => {
+        this._expandAllTrees();
+        console.log("🎯 First section detected - expanded section and tree by default");
+      }, 0);
+    }
   }
   _determinePeriodType() {
     const nonAbstractConcepts = this._getAllNonAbstractConcepts(this.section.concepts);
@@ -3339,6 +3356,9 @@ __decorateClass$2([
 __decorateClass$2([
   n2({ type: String })
 ], JupiterFormSection.prototype, "locale", 2);
+__decorateClass$2([
+  n2({ type: Boolean })
+], JupiterFormSection.prototype, "isFirstSection", 2);
 __decorateClass$2([
   n2({ type: Array })
 ], JupiterFormSection.prototype, "availableDimensions", 2);
@@ -3611,12 +3631,6 @@ let JupiterFilterRolesDialog = class extends LitElement {
                     />
                     <div class="role-info">
                       <h4 class="role-title">${role.title}</h4>
-                      ${role.description ? html`
-                        <p class="role-description">${role.description}</p>
-                      ` : ""}
-                      ${role.id !== role.title ? html`
-                        <p class="role-description">ID: ${role.id}</p>
-                      ` : ""}
                       ${((_a = role.metadata) == null ? void 0 : _a.roleURI) ? html`
                         <p class="role-description">URI: ${role.metadata.roleURI}</p>
                       ` : ""}
@@ -4017,10 +4031,17 @@ let JupiterDynamicForm = class extends LitElement {
         );
         console.log("✅ Generated schema with sections:", this._currentSchema.sections.length);
         this._allSections = [...this._currentSchema.sections];
-        if (this._allSections.length > 10 && this._selectedRoleIds.length === 0) {
-          this._selectedRoleIds = this._allSections.slice(0, 10).map((section) => section.id);
-        } else if (this._selectedRoleIds.length === 0) {
-          this._selectedRoleIds = this._allSections.map((section) => section.id);
+        if (this._selectedRoleIds.length === 0) {
+          if (this._allSections.length > 10) {
+            this._selectedRoleIds = [];
+            this._showFilterDialog = true;
+            this._currentSchema = {
+              ...this._currentSchema,
+              sections: []
+            };
+          } else {
+            this._selectedRoleIds = this._allSections.map((section) => section.id);
+          }
         }
         this._applyRoleFilter();
         this._columns = [
@@ -4081,6 +4102,15 @@ let JupiterDynamicForm = class extends LitElement {
   _applyRoleFilter() {
     if (!this._currentSchema || !this._allSections.length)
       return;
+    console.log(`🔍 Applying role filter: ${this._selectedRoleIds.length} selected out of ${this._allSections.length} total`);
+    if (this._selectedRoleIds.length === 0) {
+      console.log(`📝 No roles selected - showing empty form`);
+      this._currentSchema = {
+        ...this._currentSchema,
+        sections: []
+      };
+      return;
+    }
     this._preserveDataForHiddenSections();
     const filteredSections = this._allSections.filter(
       (section) => this._selectedRoleIds.includes(section.id)
@@ -4163,12 +4193,14 @@ let JupiterDynamicForm = class extends LitElement {
   }
   _handleFilterDialogCancel() {
     this._showFilterDialog = false;
+    console.log(`🚫 Filter dialog cancelled. Current selection: ${this._selectedRoleIds.length}/${this._allSections.length}`);
   }
   _handleRoleFilterApply(event) {
     const { selectedRoleIds } = event.detail;
     this._selectedRoleIds = selectedRoleIds;
     this._applyRoleFilter();
     this._showFilterDialog = false;
+    console.log(`🎯 Applied role filter: ${selectedRoleIds.length}/${this._allSections.length} roles selected`);
     this.dispatchEvent(new CustomEvent("roles-filter-changed", {
       detail: {
         selectedRoleIds,
@@ -5007,8 +5039,14 @@ let JupiterDynamicForm = class extends LitElement {
             </div>
           ` : ""}
 
-          <!-- Form Sections -->
-          ${schema.sections.map((section) => html`
+          <!-- Form Sections or No Selection Message -->
+          ${schema.sections.length === 0 && this._allSections.length > 10 ? html`
+            <div class="no-roles-message">
+              <h3>No Roles Selected</h3>
+              <p>Please use the "Filter Roles" button below to select which sections you want to work with.</p>
+              <p>Available roles: ${this._allSections.length}</p>
+            </div>
+          ` : schema.sections.map((section, index) => html`
             <jupiter-form-section
               .section="${section}"
               .columns="${section.columns || this._columns}"
@@ -5017,6 +5055,7 @@ let JupiterDynamicForm = class extends LitElement {
               .disabled="${this.disabled || this.readonly}"
               .collapsible="${config.collapsibleSections !== false}"
               .locale="${config.locale || "en-US"}"
+              .isFirstSection="${index === 0}"
               .availableDimensions="${this._getAvailableDimensionsForSection(section.id)}"
               @field-change="${this._handleFieldChange}"
               @typed-member-change="${this._handleTypedMemberChange}"
@@ -5040,7 +5079,7 @@ let JupiterDynamicForm = class extends LitElement {
               <svg class="filter-icon" viewBox="0 0 24 24">
                 <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
               </svg>
-              Filter Roles
+              ${this._selectedRoleIds.length === 0 ? "Select Roles" : "Filter Roles"}
               <span class="roles-count">${this._selectedRoleIds.length}/${this._allSections.length}</span>
             </button>
           ` : ""}
@@ -5254,6 +5293,25 @@ JupiterDynamicForm.styles = css`
       min-width: 18px;
       justify-content: center;
     }
+
+    .no-roles-message {
+      padding: 40px;
+      text-align: center;
+      color: var(--jupiter-text-secondary, #666);
+      background: var(--jupiter-background-light, #f8f9fa);
+      border-radius: 8px;
+      margin: 20px 0;
+    }
+
+    .no-roles-message h3 {
+      margin: 0 0 16px 0;
+      color: var(--jupiter-text-primary, #333);
+    }
+
+    .no-roles-message p {
+      margin: 8px 0;
+      line-height: 1.5;
+    }
   `;
 __decorateClass([
   n2({ type: Object })