jupiter-dynamic-forms 1.19.1 → 1.19.2

package/dist/index.mjs

@@ -1760,7 +1760,14 @@ const field$1 = {
   editText: "Edit",
   save: "Save",
   cancel: "Cancel",
-  characters: "characters"
+  characters: "characters",
+  editPeriod: "Edit Period",
+  from: "From",
+  to: "To",
+  date: "Date",
+  unit: "Unit",
+  selectUnit: "Select Unit",
+  leaveBlankForInf: "Leave blank for INF"
 };
 const admin$1 = {
   title: "Configure Roles",
@@ -1935,7 +1942,14 @@ const field = {
   editText: "Bewerken",
   save: "Opslaan",
   cancel: "Annuleren",
-  characters: "tekens"
+  characters: "tekens",
+  editPeriod: "Periode bewerken",
+  from: "Van",
+  to: "Tot",
+  date: "Datum",
+  unit: "Eenheid",
+  selectUnit: "Selecteer eenheid",
+  leaveBlankForInf: "Leeg laten voor INF"
 };
 const admin = {
   title: "Rollen configureren",
@@ -3882,7 +3896,7 @@ let JupiterFormField = class extends LitElement {
     if (this.field.periodType === "instant") {
       return html`
         <div class="period-controls">
-          <label>Date:</label>
+          <label>${I18n.t("field.date")}:</label>
           <div class="date-wrapper">
             <input
               type="date"
@@ -3901,7 +3915,7 @@ let JupiterFormField = class extends LitElement {
     } else if (this.field.periodType === "duration") {
       return html`
         <div class="period-controls">
-          <label>From:</label>
+          <label>${I18n.t("field.from")}:</label>
           <div class="date-wrapper">
             <input
               type="date"
@@ -3915,7 +3929,7 @@ let JupiterFormField = class extends LitElement {
                     a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
             </svg>
             </div>
-          <label>To:</label>
+          <label>${I18n.t("field.to")}:</label>
           <div class="date-wrapper">
             <input
               type="date"
@@ -3939,7 +3953,7 @@ let JupiterFormField = class extends LitElement {
       <div class="period-popup-overlay" @click="${this._handlePopupOverlayClick}">
         <div class="period-popup" @click="${(e2) => e2.stopPropagation()}">
           <div class="period-popup-header">
-            <div class="period-popup-title">Edit Period</div>
+            <div class="period-popup-title">${I18n.t("field.editPeriod")}</div>
             <button class="period-popup-close" @click="${this._closePeriodPopup}">
               ×
             </button>
@@ -3948,7 +3962,7 @@ let JupiterFormField = class extends LitElement {
           <div class="period-popup-content">
             ${this.field.periodType === "instant" ? html`
               <div class="period-controls">
-                <label>Date:</label>
+                <label>${I18n.t("field.date")}:</label>
                 <div class="date-wrapper">
                   <input
                     type="date"
@@ -3965,7 +3979,7 @@ let JupiterFormField = class extends LitElement {
               </div>
             ` : html`
               <div class="period-controls">
-                <label>From:</label>
+                <label>${I18n.t("field.from")}:</label>
                 <div class="date-wrapper">
                   <input
                     type="date"
@@ -3983,7 +3997,7 @@ let JupiterFormField = class extends LitElement {
                 </div>
               </div>
               <div class="period-controls">
-                <label>To:</label>
+                <label>${I18n.t("field.to")}:</label>
                 <div class="date-wrapper">
                   <input
                     type="date"
@@ -4002,14 +4016,14 @@ let JupiterFormField = class extends LitElement {
             
             ${this._availableUnits.length > 0 ? html`
               <div class="period-controls">
-                <label>Unit:</label>
+                <label>${I18n.t("field.unit")}:</label>
                 <select
                   .value="${this.unit || ""}"
                   @change="${this._handleUnitChange}"
                   ?disabled="${this.disabled}"
                   class="unit-select"
                 >
-                  <option value="">Select Unit</option>
+                  <option value="">${I18n.t("field.selectUnit")}</option>
                   ${this._availableUnits.map((unit) => html`
                     <option value="${unit.id}" ?selected="${this.unit === unit.id}">
                       ${unit.label || unit.id}
@@ -4026,7 +4040,7 @@ let JupiterFormField = class extends LitElement {
                   type="number"
                   min="0"
                   class="typed-member-input"
-                  placeholder="Leave blank for INF"
+                  placeholder="${I18n.t("field.leaveBlankForInf")}"
                   .value="${this.decimals !== void 0 && this.decimals !== null && this.decimals !== "" ? this.decimals : this.globalDecimals !== "INF" ? this.globalDecimals : ""}"
                   @input="${this._handleDecimalsChange}"
                   ?disabled="${this.disabled}"
@@ -7162,6 +7176,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
     __defProp$1(target, key, result);
   return result;
 };
+let _lastViewWasAdvancedFilter = false;
 let JupiterFilterRolesDialog = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -7186,6 +7201,7 @@ let JupiterFilterRolesDialog = class extends LitElement {
     this._showAdvancedFilter = false;
     this._showFactsOnly = false;
     this._conceptSearchText = "";
+    this._collapsedRoles = /* @__PURE__ */ new Set();
   }
   connectedCallback() {
     super.connectedCallback();
@@ -7203,9 +7219,8 @@ let JupiterFilterRolesDialog = class extends LitElement {
       this._initializePeriodPreferences();
     }
     if (changedProperties.has("open")) {
-      if (!this.open) {
-        this._showAdvancedFilter = false;
-      } else {
+      if (this.open) {
+        this._showAdvancedFilter = _lastViewWasAdvancedFilter;
         this._showFactsOnly = this.showFactsOnly;
         this._conceptSearchText = this.conceptSearchText;
       }
@@ -7705,11 +7720,22 @@ let JupiterFilterRolesDialog = class extends LitElement {
     this._tempPeriodPreferences = newPreferences;
     this.requestUpdate();
   }
+  _toggleRoleCollapse(roleId) {
+    const next = new Set(this._collapsedRoles);
+    if (next.has(roleId)) {
+      next.delete(roleId);
+    } else {
+      next.add(roleId);
+    }
+    this._collapsedRoles = next;
+  }
   _switchToAdvancedFilter() {
+    _lastViewWasAdvancedFilter = true;
     this._showAdvancedFilter = true;
     this._searchQuery = "";
   }
   _switchToFilterRoles() {
+    _lastViewWasAdvancedFilter = false;
     this._showAdvancedFilter = false;
   }
   _handleFilterChange(e2) {
@@ -8108,94 +8134,100 @@ let JupiterFilterRolesDialog = class extends LitElement {
               </div>
             ` : html`
               ${this._filteredRoles.map((role) => {
-      var _a;
       const isSelected = this._tempSelectedRoles.has(role.id);
-      role.showPeriodControl === true;
       const preferences = this._tempPeriodPreferences[role.id] || { showDuration: true, showInstant: true };
-      console.log("🎨 [Render] Processing role:", role.title, "ID:", role.id);
       const dimensions = this._getDimensionsForRole(role.id);
       const hasDimensions = dimensions.length > 0;
-      console.log("🎨 [Render] Role:", role.title, "- Has dimensions:", hasDimensions, "- Count:", dimensions.length);
+      const isCollapsed = this._collapsedRoles.has(role.id);
       return html`
                   <div class="role-item">
-                    <input
-                      type="checkbox"
-                      class="role-checkbox"
-                      .checked="${isSelected}"
-                      @change="${(e2) => this._handleCheckboxChange(e2, role.id)}"
-                    />
-                    <div class="role-info">
-                      <h4 class="role-title">${role.title}</h4>
-                      ${((_a = role.metadata) == null ? void 0 : _a.roleURI) ? html`
-                        <p class="role-description">${I18n.t("filter.uri")}: ${role.metadata.roleURI}</p>
-                      ` : ""}
-                      
-                      <div class="period-controls">
-                        <p class="period-controls-label">${I18n.t("filter.additionalOptions")}</p>
-                        <div class="period-checkboxes">
-                          <label class="period-checkbox-item">
-                            <input
-                              type="checkbox"
-                              class="period-checkbox"
-                              .checked="${preferences.showPreviousYear}"
-                              @change="${(e2) => this._handlePeriodCheckboxChange(e2, role.id, "previousYear")}"
-                            />
-                            <span class="period-checkbox-label">${I18n.t("filter.showPreviousYear")}</span>
-                          </label>
+                    <div class="role-item-header" @click="${() => this._toggleRoleCollapse(role.id)}">
+                      <input
+                        type="checkbox"
+                        class="role-checkbox"
+                        .checked="${isSelected}"
+                        @change="${(e2) => {
+        e2.stopPropagation();
+        this._handleCheckboxChange(e2, role.id);
+      }}"
+                        @click="${(e2) => e2.stopPropagation()}"
+                      />
+                      <h5 class="role-title">${role.title}</h5>
+                      <button class="role-collapse-btn" title="${isCollapsed ? "Expand" : "Collapse"}">
+                        <svg class="role-collapse-chevron ${isCollapsed ? "collapsed" : ""}" viewBox="0 0 24 24">
+                          <path d="M7 10l5 5 5-5z"/>
+                        </svg>
+                      </button>
+                    </div>
+
+                    ${!isCollapsed ? html`
+                      <div class="role-item-body">
+                        <div class="period-controls">
+                          <p class="period-controls-label">${I18n.t("filter.additionalOptions")}</p>
+                          <div class="period-checkboxes">
+                            <label class="period-checkbox-item">
+                              <input
+                                type="checkbox"
+                                class="period-checkbox"
+                                .checked="${preferences.showPreviousYear}"
+                                @change="${(e2) => this._handlePeriodCheckboxChange(e2, role.id, "previousYear")}"
+                              />
+                              <span class="period-checkbox-label">${I18n.t("filter.showPreviousYear")}</span>
+                            </label>
+                          </div>
                         </div>
-                      </div>
 
-                      ${hasDimensions ? html`
-                        <div class="dimension-section">
-                          <div class="dimension-header">📊 ${I18n.t("filter.dimensionMemberSelection")}</div>
-                          ${dimensions.map((dimension) => {
-        var _a2, _b;
+                        ${hasDimensions ? html`
+                          <div class="dimension-section">
+                            <div class="dimension-header">📊 ${I18n.t("filter.dimensionMemberSelection")}</div>
+                            ${dimensions.map((dimension) => {
+        var _a, _b;
         const allMembers = this._getAllDimensionMembers(dimension.members);
-        if (allMembers.length === 0) {
+        if (allMembers.length === 0)
           return html``;
-        }
-        const dimensionLabel = ((_b = (_a2 = dimension.labels) == null ? void 0 : _a2.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _b.label) || dimension.conceptName;
+        const dimensionLabel = ((_b = (_a = dimension.labels) == null ? void 0 : _a.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _b.label) || dimension.conceptName;
         return html`
-                              <div class="dimension-group">
-                                <div class="dimension-label">${dimensionLabel}</div>
-                                <div class="dimension-members">
-                                  ${allMembers.map((member) => {
-          var _a3, _b2;
-          const memberLabel = ((_b2 = (_a3 = member.labels) == null ? void 0 : _a3.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _b2.label) || member.conceptName;
+                                <div class="dimension-group">
+                                  <div class="dimension-label">${dimensionLabel}</div>
+                                  <div class="dimension-members">
+                                    ${allMembers.map((member) => {
+          var _a2, _b2;
+          const memberLabel = ((_b2 = (_a2 = member.labels) == null ? void 0 : _a2.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _b2.label) || member.conceptName;
           const isChecked = this._isDimensionMemberSelected(role.id, dimension.id, member.id);
           return html`
-                                      <label class="member-checkbox-item">
-                                        <input
-                                          type="checkbox"
-                                          class="member-checkbox"
-                                          .checked="${isChecked}"
-                                          @change="${(e2) => this._handleDimensionMemberChange(e2, role.id, dimension.id, member.id)}"
-                                        />
-                                        <span class="member-checkbox-label">${memberLabel}</span>
-                                      </label>
-                                    `;
+                                        <label class="member-checkbox-item">
+                                          <input
+                                            type="checkbox"
+                                            class="member-checkbox"
+                                            .checked="${isChecked}"
+                                            @change="${(e2) => this._handleDimensionMemberChange(e2, role.id, dimension.id, member.id)}"
+                                          />
+                                          <span class="member-checkbox-label">${memberLabel}</span>
+                                        </label>
+                                      `;
         })}
+                                  </div>
+                                  <div class="member-select-controls">
+                                    <button
+                                      class="member-select-btn"
+                                      @click="${() => this._selectAllDimensionMembers(role.id, dimension.id)}"
+                                    >
+                                      ${I18n.t("filter.selectAllMembers")}
+                                    </button>
+                                    <button
+                                      class="member-select-btn"
+                                      @click="${() => this._deselectAllDimensionMembers(role.id, dimension.id)}"
+                                    >
+                                      ${I18n.t("filter.clearMembers")}
+                                    </button>
+                                  </div>
                                 </div>
-                                <div class="member-select-controls">
-                                  <button 
-                                    class="member-select-btn"
-                                    @click="${() => this._selectAllDimensionMembers(role.id, dimension.id)}"
-                                  >
-                                    ${I18n.t("filter.selectAllMembers")}
-                                  </button>
-                                  <button 
-                                    class="member-select-btn"
-                                    @click="${() => this._deselectAllDimensionMembers(role.id, dimension.id)}"
-                                  >
-                                    ${I18n.t("filter.clearMembers")}
-                                  </button>
-                                </div>
-                              </div>
-                            `;
+                              `;
       })}
-                        </div>
-                      ` : ""}
-                    </div>
+                          </div>
+                        ` : ""}
+                      </div>
+                    ` : ""}
                   </div>
                 `;
     })}
@@ -8441,8 +8473,7 @@ JupiterFilterRolesDialog.styles = css`
 
     .role-item {
       display: flex;
-      align-items: flex-start;
-      gap: 12px;
+      flex-direction: column;
       padding: 8px;
       border-radius: 4px;
       transition: background-color 0.2s ease;
@@ -8452,11 +8483,52 @@ JupiterFilterRolesDialog.styles = css`
       background: var(--menuBgColorLighter, var(--jupiter-hover-background, #f5f5f5));
     }
 
+    .role-item-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .role-item-body {
+      padding-left: 28px;
+      margin-top: 8px;
+    }
+
     .role-checkbox {
-      margin-top: 2px;
       cursor: pointer;
+      flex-shrink: 0;
     }
-    
+
+    .role-collapse-btn {
+      background: none;
+      border: none;
+      padding: 2px;
+      cursor: pointer;
+      color: var(--primaryTextColor, var(--jupiter-text-secondary, #666));
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      border-radius: 2px;
+      transition: color 0.15s ease;
+    }
+
+    .role-collapse-btn:hover {
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
+    }
+
+    .role-collapse-chevron {
+      width: 14px;
+      height: 14px;
+      fill: currentColor;
+      transition: transform 0.2s ease;
+    }
+
+    .role-collapse-chevron.collapsed {
+      transform: rotate(-90deg);
+    }
+
     .role-info * {
       color: var(--primaryTextColor, var(--jupiter-text-primary, #333)) !important;
     }
@@ -8469,9 +8541,10 @@ JupiterFilterRolesDialog.styles = css`
     .role-title {
       font-weight: 500;
       color: var(--jupiter-text-primary, #333);
-      margin: 0 0 4px 0;
+      margin: 0;
       word-wrap: break-word;
       line-height: 1.3;
+      flex: 1;
     }
 
     .role-description {
@@ -8867,6 +8940,9 @@ __decorateClass$1([
 __decorateClass$1([
   r()
 ], JupiterFilterRolesDialog.prototype, "_conceptSearchText", 2);
+__decorateClass$1([
+  r()
+], JupiterFilterRolesDialog.prototype, "_collapsedRoles", 2);
 JupiterFilterRolesDialog = __decorateClass$1([
   t$1("jupiter-filter-roles-dialog")
 ], JupiterFilterRolesDialog);