jupiter-dynamic-forms 1.16.9 → 1.17.0

package/dist/index.mjs

@@ -1658,7 +1658,10 @@ const filter$1 = {
   advancedFilter: "Advanced Filter",
   backToFilterRoles: "← Back",
   showFactsOnly: "Show facts only",
-  showFactsOnlyDescription: "Hide all blank rows and sections. Only roles and rows with at least one filled value will be shown."
+  showFactsOnlyDescription: "Hide all blank rows and sections. Only roles and rows with at least one filled value will be shown.",
+  searchByConcept: "Search by concept",
+  searchByConceptDescription: "Type concept name or label to filter roles and rows. Press Apply Filter to apply.",
+  searchByConceptPlaceholder: "Type concept name or label and press Apply Filter..."
 };
 const column$1 = {
   addColumn: "Add Column",
@@ -1808,7 +1811,10 @@ const filter = {
   advancedFilter: "Geavanceerd filter",
   backToFilterRoles: "← Terug",
   showFactsOnly: "Alleen feiten weergeven",
-  showFactsOnlyDescription: "Verberg alle lege rijen en secties. Alleen rollen en rijen met minimaal één ingevulde waarde worden weergegeven."
+  showFactsOnlyDescription: "Verberg alle lege rijen en secties. Alleen rollen en rijen met minimaal één ingevulde waarde worden weergegeven.",
+  searchByConcept: "Zoeken op concept",
+  searchByConceptDescription: "Typ een conceptnaam of label om rollen en rijen te filteren. Druk op Filter toepassen om te activeren.",
+  searchByConceptPlaceholder: "Typ conceptnaam of label en druk op Filter toepassen..."
 };
 const column = {
   addColumn: "Kolom toevoegen",
@@ -5727,7 +5733,14 @@ let JupiterFormSection = class extends LitElement {
               </tr>
             </thead>
             <tbody class="table-body">
-              ${this._flattenConcepts(this.section.concepts, this._expandedConcepts).filter((concept) => this.mode !== "readonly" && !this.showFactsOnly || !this._isConceptRowBlank(concept)).flatMap((concept) => this._renderConceptRows(concept))}
+              ${this._flattenConcepts(this.section.concepts, this._expandedConcepts).filter((concept) => {
+      var _a;
+      if (((_a = this.conceptMatchIds) == null ? void 0 : _a.size) && !this.conceptMatchIds.has(concept.originalConceptId))
+        return false;
+      if (this.mode === "readonly" || this.showFactsOnly)
+        return !this._isConceptRowBlank(concept);
+      return true;
+    }).flatMap((concept) => this._renderConceptRows(concept))}
             </tbody>
           </table>
         </div>
@@ -6063,6 +6076,9 @@ __decorateClass$3([
 __decorateClass$3([
   n2({ type: Boolean })
 ], JupiterFormSection.prototype, "showFactsOnly", 2);
+__decorateClass$3([
+  n2({ type: Object })
+], JupiterFormSection.prototype, "conceptMatchIds", 2);
 __decorateClass$3([
   n2({ type: Object })
 ], JupiterFormSection.prototype, "masterData", 2);
@@ -6117,11 +6133,40 @@ let JupiterAdvancedFilter = class extends LitElement {
   constructor() {
     super(...arguments);
     this.showFactsOnly = false;
+    this.conceptSearchText = "";
+    this._localConceptSearchText = "";
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("conceptSearchText") && this.conceptSearchText !== this._localConceptSearchText) {
+      this._localConceptSearchText = this.conceptSearchText;
+    }
   }
   _handleShowFactsOnlyChange(e2) {
     const checked = e2.target.checked;
-    this.dispatchEvent(new CustomEvent("facts-filter-change", {
-      detail: { showFactsOnly: checked },
+    this.dispatchEvent(new CustomEvent("filter-change", {
+      detail: { showFactsOnly: checked, conceptSearchText: this._localConceptSearchText },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _handleConceptSearchInput(e2) {
+    this._localConceptSearchText = e2.target.value;
+    this.dispatchEvent(new CustomEvent("filter-change", {
+      detail: { showFactsOnly: this.showFactsOnly, conceptSearchText: this._localConceptSearchText },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _clearConceptSearch() {
+    var _a;
+    this._localConceptSearchText = "";
+    const input = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".concept-search-input");
+    if (input) {
+      input.value = "";
+      input.focus();
+    }
+    this.dispatchEvent(new CustomEvent("filter-change", {
+      detail: { showFactsOnly: this.showFactsOnly, conceptSearchText: "" },
       bubbles: true,
       composed: true
     }));
@@ -6129,7 +6174,7 @@ let JupiterAdvancedFilter = class extends LitElement {
   render() {
     return html`
       <div class="filter-options">
-        <label class="filter-option">
+        <label class="filter-option clickable">
           <input
             type="checkbox"
             .checked="${this.showFactsOnly}"
@@ -6140,6 +6185,29 @@ let JupiterAdvancedFilter = class extends LitElement {
             <p class="filter-option-description">${I18n.t("filter.showFactsOnlyDescription")}</p>
           </div>
         </label>
+
+        <div class="filter-option">
+          <div class="filter-option-body">
+            <div class="filter-option-label">${I18n.t("filter.searchByConcept")}</div>
+            <p class="filter-option-description">${I18n.t("filter.searchByConceptDescription")}</p>
+            <div class="concept-search-input-wrapper">
+              <input
+                type="text"
+                class="concept-search-input"
+                placeholder="${I18n.t("filter.searchByConceptPlaceholder")}"
+                .value="${this._localConceptSearchText}"
+                @input="${this._handleConceptSearchInput}"
+              />
+              ${this._localConceptSearchText ? html`
+                <button
+                  class="concept-search-clear"
+                  @click="${this._clearConceptSearch}"
+                  title="${I18n.t("filter.clearSearch")}"
+                >×</button>
+              ` : ""}
+            </div>
+          </div>
+        </div>
       </div>
     `;
   }
@@ -6152,6 +6220,9 @@ JupiterAdvancedFilter.styles = css`
 
     .filter-options {
       padding: 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
     }
 
     .filter-option {
@@ -6161,11 +6232,14 @@ JupiterAdvancedFilter.styles = css`
       padding: 16px;
       border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       border-radius: 6px;
-      cursor: pointer;
       transition: background-color 0.2s ease;
     }
 
-    .filter-option:hover {
+    .filter-option.clickable {
+      cursor: pointer;
+    }
+
+    .filter-option.clickable:hover {
       background: var(--menuBgColorLighter, var(--jupiter-hover-background, #f5f5f5));
     }
 
@@ -6195,10 +6269,58 @@ JupiterAdvancedFilter.styles = css`
       margin: 4px 0 0 0;
       line-height: 1.5;
     }
+
+    .concept-search-input-wrapper {
+      position: relative;
+      margin-top: 10px;
+    }
+
+    .concept-search-input {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 8px 36px 8px 10px;
+      border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
+      border-radius: 4px;
+      font-size: 13px;
+      font-family: inherit;
+      background: transparent;
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
+      transition: border-color 0.2s ease;
+    }
+
+    .concept-search-input::placeholder {
+      color: var(--primaryTextColor, var(--jupiter-text-secondary, #999));
+    }
+
+    .concept-search-clear {
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 2px 4px;
+      border-radius: 2px;
+      color: var(--jupiter-text-secondary, #666);
+      font-size: 16px;
+      line-height: 1;
+      transition: color 0.2s ease;
+    }
+
+    .concept-search-clear:hover {
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
+    }
   `;
 __decorateClass$2([
   n2({ type: Boolean })
 ], JupiterAdvancedFilter.prototype, "showFactsOnly", 2);
+__decorateClass$2([
+  n2({ type: String })
+], JupiterAdvancedFilter.prototype, "conceptSearchText", 2);
+__decorateClass$2([
+  r()
+], JupiterAdvancedFilter.prototype, "_localConceptSearchText", 2);
 JupiterAdvancedFilter = __decorateClass$2([
   t$1("jupiter-advanced-filter")
 ], JupiterAdvancedFilter);
@@ -6223,6 +6345,7 @@ let JupiterFilterRolesDialog = class extends LitElement {
     this.mode = "inputForm";
     this.hypercubeData = null;
     this.showFactsOnly = false;
+    this.conceptSearchText = "";
     this._tempSelectedRoles = /* @__PURE__ */ new Set();
     this._searchQuery = "";
     this._filteredRoles = [];
@@ -6235,6 +6358,7 @@ let JupiterFilterRolesDialog = class extends LitElement {
     this._chosenRoleOrder = [];
     this._showAdvancedFilter = false;
     this._showFactsOnly = false;
+    this._conceptSearchText = "";
   }
   connectedCallback() {
     super.connectedCallback();
@@ -6256,6 +6380,7 @@ let JupiterFilterRolesDialog = class extends LitElement {
         this._showAdvancedFilter = false;
       } else {
         this._showFactsOnly = this.showFactsOnly;
+        this._conceptSearchText = this.conceptSearchText;
       }
     }
   }
@@ -6680,12 +6805,13 @@ let JupiterFilterRolesDialog = class extends LitElement {
   _switchToFilterRoles() {
     this._showAdvancedFilter = false;
   }
-  _handleFactsFilterChange(e2) {
+  _handleFilterChange(e2) {
     this._showFactsOnly = e2.detail.showFactsOnly;
+    this._conceptSearchText = e2.detail.conceptSearchText ?? "";
   }
   _handleAdvancedFilterApply() {
     this.dispatchEvent(new CustomEvent("advanced-filter-apply", {
-      detail: { showFactsOnly: this._showFactsOnly },
+      detail: { showFactsOnly: this._showFactsOnly, conceptSearchText: this._conceptSearchText },
       bubbles: true
     }));
   }
@@ -6982,7 +7108,8 @@ let JupiterFilterRolesDialog = class extends LitElement {
           ` : this._showAdvancedFilter ? html`
             <jupiter-advanced-filter
               .showFactsOnly="${this._showFactsOnly}"
-              @facts-filter-change="${this._handleFactsFilterChange}"
+              .conceptSearchText="${this._conceptSearchText}"
+              @filter-change="${this._handleFilterChange}"
             ></jupiter-advanced-filter>
           ` : html`
           <p class="description">
@@ -7775,6 +7902,9 @@ __decorateClass$1([
 __decorateClass$1([
   n2({ type: Boolean })
 ], JupiterFilterRolesDialog.prototype, "showFactsOnly", 2);
+__decorateClass$1([
+  n2({ type: String })
+], JupiterFilterRolesDialog.prototype, "conceptSearchText", 2);
 __decorateClass$1([
   r()
 ], JupiterFilterRolesDialog.prototype, "_tempSelectedRoles", 2);
@@ -7811,6 +7941,9 @@ __decorateClass$1([
 __decorateClass$1([
   r()
 ], JupiterFilterRolesDialog.prototype, "_showFactsOnly", 2);
+__decorateClass$1([
+  r()
+], JupiterFilterRolesDialog.prototype, "_conceptSearchText", 2);
 JupiterFilterRolesDialog = __decorateClass$1([
   t$1("jupiter-filter-roles-dialog")
 ], JupiterFilterRolesDialog);
@@ -7865,6 +7998,7 @@ let JupiterDynamicForm = class extends LitElement {
     this._selectedRoleIds = [];
     this._showFilterDialog = false;
     this._showFactsOnly = false;
+    this._conceptSearchText = "";
     this._periodPreferences = {};
     this._activeSidePanelRoleId = null;
     this._sidePanelSearchQuery = "";
@@ -8556,6 +8690,7 @@ let JupiterDynamicForm = class extends LitElement {
   }
   _handleAdvancedFilterApply(event) {
     this._showFactsOnly = event.detail.showFactsOnly;
+    this._conceptSearchText = event.detail.conceptSearchText ?? "";
     this._showFilterDialog = false;
   }
   _handleFilterDialogCancel() {
@@ -10722,6 +10857,53 @@ let JupiterDynamicForm = class extends LitElement {
     };
     return !hasValue(section2.concepts);
   }
+  _getConceptSearchMatchIds(searchText) {
+    var _a, _b, _c;
+    const result = /* @__PURE__ */ new Set();
+    if (!searchText.trim() || !((_b = (_a = this.xbrlInput) == null ? void 0 : _a.presentation) == null ? void 0 : _b.length)) {
+      return result;
+    }
+    const query = searchText.toLowerCase().trim();
+    const walkConcepts = (concepts) => {
+      var _a2, _b2, _c2;
+      for (const concept of concepts) {
+        let matches = ((_a2 = concept.conceptName) == null ? void 0 : _a2.toLowerCase().includes(query)) || ((_b2 = concept.id) == null ? void 0 : _b2.toLowerCase().includes(query));
+        if (!matches && Array.isArray(concept.labels)) {
+          matches = concept.labels.some((l2) => {
+            var _a3;
+            return (_a3 = l2.label) == null ? void 0 : _a3.toLowerCase().includes(query);
+          });
+        }
+        if (matches) {
+          result.add(concept.id);
+        }
+        if ((_c2 = concept.children) == null ? void 0 : _c2.length) {
+          walkConcepts(concept.children);
+        }
+      }
+    };
+    for (const presentationData of this.xbrlInput.presentation) {
+      for (const role of presentationData.roles || []) {
+        walkConcepts(((_c = role.presentationLinkbase) == null ? void 0 : _c.concepts) || []);
+      }
+    }
+    return result;
+  }
+  _isSectionConceptSearchMatch(section2, matchIds) {
+    if (matchIds.size === 0)
+      return false;
+    const checkConcepts = (concepts) => {
+      var _a;
+      for (const concept of concepts) {
+        if (matchIds.has(concept.originalConceptId))
+          return true;
+        if (((_a = concept.children) == null ? void 0 : _a.length) && checkConcepts(concept.children))
+          return true;
+      }
+      return false;
+    };
+    return checkConcepts(section2.concepts);
+  }
   _filterSidePanelSections(sections) {
     if (!this._sidePanelSearchQuery.trim()) {
       return sections;
@@ -11114,9 +11296,19 @@ let JupiterDynamicForm = class extends LitElement {
             <p>${I18n.t("filter.selectRoles")}</p>
             <p>${I18n.t("filter.roles")}: ${this._allSections.length}</p>
           </div>
-        ` : (this.mode === "readonly" || this._showFactsOnly ? schema.sections.filter((s2) => !this._isSectionBlank(s2)) : schema.sections).map((section2, index) => {
-      var _a;
-      return html`
+        ` : (() => {
+      const conceptMatchIds = this._getConceptSearchMatchIds(this._conceptSearchText);
+      const hasConceptSearch = this._conceptSearchText.trim().length > 0;
+      let sections = schema.sections;
+      if (this.mode === "readonly" || this._showFactsOnly) {
+        sections = sections.filter((s2) => !this._isSectionBlank(s2));
+      }
+      if (hasConceptSearch) {
+        sections = sections.filter((s2) => this._isSectionConceptSearchMatch(s2, conceptMatchIds));
+      }
+      return sections.map((section2, index) => {
+        var _a;
+        return html`
           <jupiter-form-section
             section-id="${section2.id}"
             .section="${section2}"
@@ -11135,6 +11327,7 @@ let JupiterDynamicForm = class extends LitElement {
             .availableDimensions="${this._getAvailableDimensionsForSection(section2.id)}"
             .mode="${this.mode}"
             .showFactsOnly="${this._showFactsOnly}"
+            .conceptMatchIds="${hasConceptSearch ? conceptMatchIds : void 0}"
             .masterData="${this.masterData}"
             .periodStartDate="${this.periodStartDate}"
             .periodEndDate="${this.periodEndDate}"
@@ -11149,13 +11342,19 @@ let JupiterDynamicForm = class extends LitElement {
             @column-add-request="${this._handleColumnAddRequest}"
           ></jupiter-form-section>
         `;
-    })}
+      });
+    })()}
       </div>
     `;
   }
   _renderSidePanelLayout(schema, config, showValidationSummary, errorCount) {
     var _a;
-    const visibleSections = this.mode === "readonly" || this._showFactsOnly ? schema.sections.filter((s2) => !this._isSectionBlank(s2)) : schema.sections;
+    const conceptMatchIds = this._getConceptSearchMatchIds(this._conceptSearchText);
+    const hasConceptSearch = this._conceptSearchText.trim().length > 0;
+    let visibleSections = this.mode === "readonly" || this._showFactsOnly ? schema.sections.filter((s2) => !this._isSectionBlank(s2)) : schema.sections;
+    if (hasConceptSearch) {
+      visibleSections = visibleSections.filter((s2) => this._isSectionConceptSearchMatch(s2, conceptMatchIds));
+    }
     const filteredSections = this._filterSidePanelSections(visibleSections);
     if (!this._activeSidePanelRoleId || !filteredSections.find((s2) => s2.id === this._activeSidePanelRoleId)) {
       this._activeSidePanelRoleId = filteredSections.length > 0 ? filteredSections[0].id : null;
@@ -11269,6 +11468,7 @@ let JupiterDynamicForm = class extends LitElement {
                 .availableDimensions="${this._getAvailableDimensionsForSection(activeSection.id)}"
                 .mode="${this.mode}"
                 .showFactsOnly="${this._showFactsOnly}"
+                .conceptMatchIds="${hasConceptSearch ? conceptMatchIds : void 0}"
                 .masterData="${this.masterData}"
                 .periodStartDate="${this.periodStartDate}"
                 .periodEndDate="${this.periodEndDate}"
@@ -11422,6 +11622,7 @@ let JupiterDynamicForm = class extends LitElement {
             .hypercubeData="${(_a = this.xbrlInput) == null ? void 0 : _a.hypercubes}"
             .mode="${this.mode}"
             .showFactsOnly="${this._showFactsOnly}"
+            .conceptSearchText="${this._conceptSearchText}"
             @dialog-cancel="${this._handleFilterDialogCancel}"
             @roles-filter-apply="${this._handleRoleFilterApply}"
             @advanced-filter-apply="${this._handleAdvancedFilterApply}"
@@ -12387,6 +12588,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_showFactsOnly", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_conceptSearchText", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_periodPreferences", 2);