jupiter-dynamic-forms 1.16.9 → 1.17.1

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",
@@ -3529,31 +3535,49 @@ let JupiterFormField = class extends LitElement {
       return html`
         <div class="period-controls">
           <label>Date:</label>
-          <input
-            type="date"
-            .value="${this.periodInstantDate || this.field.periodInstantDate || ""}"
-            @change="${(e2) => this._handlePeriodChange(e2, "instant")}"
-            ?disabled="${this.disabled}"
-          />
+          <div class="date-wrapper">
+            <input
+              type="date"
+              .value="${this.periodInstantDate || this.field.periodInstantDate || ""}"
+              @change="${(e2) => this._handlePeriodChange(e2, "instant")}"
+              ?disabled="${this.disabled}"
+            />
+            <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                    a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                    a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+          </div>
         </div>
       `;
     } else if (this.field.periodType === "duration") {
       return html`
         <div class="period-controls">
           <label>From:</label>
-          <input
-            type="date"
-            .value="${this.periodStartDate || this.field.periodStartDate || ""}"
-            @change="${(e2) => this._handlePeriodChange(e2, "start")}"
-            ?disabled="${this.disabled}"
-          />
+            <div class="date-wrapper">
+              <input
+                type="date"
+                .value="${this.periodStartDate || this.field.periodStartDate || ""}"
+                @change="${(e2) => this._handlePeriodChange(e2, "start")}"
+                ?disabled="${this.disabled}"
+              />
+              <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                    a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                    a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+            </div>
           <label>To:</label>
-          <input
-            type="date"
-            .value="${this.periodEndDate || this.field.periodEndDate || ""}"
-            @change="${(e2) => this._handlePeriodChange(e2, "end")}"
-            ?disabled="${this.disabled}"
-          />
+          <div class="date-wrapper">
+            <input
+              type="date"
+              .value="${this.periodEndDate || this.field.periodEndDate || ""}"
+              @change="${(e2) => this._handlePeriodChange(e2, "end")}"
+              ?disabled="${this.disabled}"
+            />
+            <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                    a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                    a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+          </div>
         </div>
       `;
     }
@@ -3574,31 +3598,51 @@ let JupiterFormField = class extends LitElement {
             ${this.field.periodType === "instant" ? html`
               <div class="period-controls">
                 <label>Date:</label>
-                <input
-                  type="date"
-                  .value="${this.periodInstantDate || this.field.periodInstantDate || ""}"
-                  @change="${(e2) => this._handlePeriodChange(e2, "instant")}"
-                  ?disabled="${this.disabled}"
-                />
+                <div class="date-wrapper">
+                  <input
+                    type="date"
+                    .value="${this.periodInstantDate || this.field.periodInstantDate || ""}"
+                    @change="${(e2) => this._handlePeriodChange(e2, "instant")}"
+                    ?disabled="${this.disabled}"
+                  />
+                  <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+                    <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                          a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                          a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                </div>
               </div>
             ` : html`
               <div class="period-controls">
                 <label>From:</label>
-                <input
-                  type="date"
-                  .value="${this.periodStartDate || this.field.periodStartDate || ""}"
-                  @change="${(e2) => this._handlePeriodChange(e2, "start")}"
-                  ?disabled="${this.disabled}"
-                />
+                <div class="date-wrapper">
+                  <input
+                    type="date"
+                    .value="${this.periodStartDate || this.field.periodStartDate || ""}"
+                    @change="${(e2) => this._handlePeriodChange(e2, "start")}"
+                    ?disabled="${this.disabled}"
+                  />
+                    <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+                    <path
+                      fill="currentColor"
+                      d="M19 4h-1V2h-2v2H8V2H6v2H5
+                        a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                        a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                </div>
               </div>
               <div class="period-controls">
                 <label>To:</label>
-                <input
-                  type="date"
-                  .value="${this.periodEndDate || this.field.periodEndDate || ""}"
-                  @change="${(e2) => this._handlePeriodChange(e2, "end")}"
-                  ?disabled="${this.disabled}"
-                />
+                <div class="date-wrapper">
+                  <input
+                    type="date"
+                    .value="${this.periodEndDate || this.field.periodEndDate || ""}"
+                    @change="${(e2) => this._handlePeriodChange(e2, "end")}"
+                    ?disabled="${this.disabled}"
+                  />
+                  <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+                    <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                          a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                          a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                </div>
               </div>
             `}
             
@@ -3819,7 +3863,7 @@ JupiterFormField.styles = css`
     }
 
     .period-popup {
-      background: white;
+      background: var(--bg-color-2, var(--jupiter-card-background, #fff));
       border-radius: 8px;
       padding: 24px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
@@ -3837,10 +3881,11 @@ JupiterFormField.styles = css`
     .period-popup-title {
       font-size: 18px;
       font-weight: 600;
-      color: var(--jupiter-text-primary, #333);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
     }
 
     .period-popup-close {
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       background: transparent;
       border: none;
       font-size: 24px;
@@ -3856,7 +3901,7 @@ JupiterFormField.styles = css`
     }
 
     .period-popup-close:hover {
-      background-color: rgba(0, 0, 0, 0.05);
+      opacity: 0.9;
     }
 
     .period-popup-content {
@@ -3876,17 +3921,45 @@ JupiterFormField.styles = css`
     .period-popup-content .period-controls label {
       font-size: 14px;
       font-weight: 500;
-      color: var(--jupiter-text-primary, #333);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       text-align: right;
       white-space: normal;
       word-break: break-word;
     }
 
+    .date-wrapper {
+    position: relative;
+    width: min-content;
+    }
+
+       /* hide native icon */
+    input[type="date"]::-webkit-calendar-picker-indicator {
+      opacity: 0;
+      position: absolute;
+      right: 10px;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+
+       .calendar-icon-svg {
+      position: absolute;
+    right: 3px;
+    top: 18px;
+      transform: translateY(-50%);
+      width: 20px;
+      height: 20px;
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
+      pointer-events: none;
+    }
+
     .period-popup-content .period-controls input[type="date"] {
       padding: 8px 10px;
       font-size: 14px;
-      border: 1px solid var(--jupiter-border-color, #ddd);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
+      border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       border-radius: 4px;
+      background: var(--bg-color-2, var(--jupiter-card-background, #fff));
     }
 
     .period-popup-content .period-controls input[type="date"]:focus {
@@ -3898,16 +3971,15 @@ JupiterFormField.styles = css`
     .period-popup-content .period-controls .unit-select {
       padding: 8px 10px;
       font-size: 14px;
-      border: 1px solid var(--jupiter-border-color, #ddd);
+      border: 1px solid  var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       border-radius: 4px;
-      background: var(--jupiter-input-background, #fff);
-      color: var(--jupiter-text-primary, #333);
+      background: var(--bg-color-2, var(--jupiter-input-background, #fff));
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       cursor: pointer;
     }
 
     .period-popup-content .period-controls .unit-select:focus {
       outline: none;
-      border-color: var(--jupiter-primary-color, #1976d2);
       box-shadow: 0 0 0 2px var(--jupiter-primary-color-light, rgba(25, 118, 210, 0.2));
     }
 
@@ -4043,6 +4115,10 @@ JupiterFormField.styles = css`
       width: auto;
     }
 
+ 
+
+ 
+
     .period-controls {
       margin-top: 4px;
       display: flex;
@@ -4716,35 +4792,53 @@ let JupiterAddColumnDialog = class extends LitElement {
           ${this.periodType === "instant" ? html`
             <div class="form-group">
               <label class="form-label required">${I18n.t("column.instantDate")}</label>
-              <input 
-                type="date" 
-                class="form-input"
-                .value="${this._instantDate}"
-                @change="${this._handleInstantDateChange}"
-                required
-              />
-            </div>
-          ` : html`
-            <div class="form-group date-row">
-              <div class="date-field">
-                <label class="form-label required">${I18n.t("column.startPeriodDate")}</label>
+              <div class="date-wrapper">
                 <input 
                   type="date" 
                   class="form-input"
-                  .value="${this._startDate}"
-                  @change="${this._handleStartDateChange}"
+                  .value="${this._instantDate}"
+                  @change="${this._handleInstantDateChange}"
                   required
                 />
+                <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+                  <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                        a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                        a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+              </div>
+            </div>
+          ` : html`
+            <div class="form-group date-row">
+              <div class="date-field">
+                <label class="form-label required">${I18n.t("column.startPeriodDate")}</label>
+                <div class="date-wrapper">
+                  <input 
+                    type="date" 
+                    class="form-input"
+                    .value="${this._startDate}"
+                    @change="${this._handleStartDateChange}"
+                    required
+                  />
+                  <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+                    <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                          a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                          a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                </div>
               </div>
               <div class="date-field">
                 <label class="form-label required">${I18n.t("column.endPeriodDate")}</label>
-                <input 
-                  type="date" 
-                  class="form-input"
-                  .value="${this._endDate}"
-                  @change="${this._handleEndDateChange}"
-                  required
-                />
+                <div class="date-wrapper">
+                  <input 
+                    type="date" 
+                    class="form-input"
+                    .value="${this._endDate}"
+                    @change="${this._handleEndDateChange}"
+                    required
+                  />
+                  <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+                    <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                          a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                          a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                </div>
               </div>
             </div>
           `}
@@ -4904,6 +4998,32 @@ JupiterAddColumnDialog.styles = css`
       max-height: calc(90vh - 160px);
     }
 
+      .date-wrapper {
+    position: relative;
+    width: min-content;
+    }
+
+       /* hide native icon */
+    input[type="date"]::-webkit-calendar-picker-indicator {
+      opacity: 0;
+      position: absolute;
+      right: 10px;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+      
+       .calendar-icon-svg {
+      position: absolute;
+    right: 3px;
+    top: 18px;
+      transform: translateY(-50%);
+      width: 20px;
+      height: 20px;
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
+      pointer-events: none;
+    }
+
     .form-group {
       margin-bottom: 16px;
     }
@@ -4980,18 +5100,18 @@ JupiterAddColumnDialog.styles = css`
       background: transparent;
     }
 
-    // .btn-cancel:hover {
-    //   background: var(--jupiter-neutral-background-hover, #e0e0e0);
-    // }
+    .btn-cancel:hover {
+      opacity: 0.9;
+    }
 
     .btn-primary {
       background: var(--buttonBgColor, var(--jupiter-primary-color, #1976d2));
       color: var(--buttonTextColor, white);
     }
 
-    // .btn-primary:hover {
-    //   background: var(--jupiter-primary-color-dark, #5a6fd8);
-    // }
+    .btn-primary:hover {
+      opacity: 0.9;
+    }
 
     // .btn-primary:disabled {
     //   background: var(--jupiter-disabled-background, #ccc);
@@ -5727,7 +5847,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>
@@ -5914,10 +6041,10 @@ JupiterFormSection.styles = css`
       position: absolute;
       top: 32px;
       right: 4px;
-      background: white;
-      border: 1px solid var(--jupiter-border-color, #ddd);
+      background: var(--bg-color-2, var(--jupiter-card-background, #fff));
+      border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       border-radius: 4px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       z-index: 1000;
       min-width: 150px;
       padding: 4px 0;
@@ -5927,7 +6054,7 @@ JupiterFormSection.styles = css`
       padding: 8px 16px;
       cursor: pointer;
       font-size: 14px;
-      color: var(--jupiter-text-primary, #333);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       transition: background 0.2s ease;
       border: none;
       background: transparent;
@@ -5937,7 +6064,7 @@ JupiterFormSection.styles = css`
     }
 
     .column-context-menu-item:hover {
-      background: var(--jupiter-background-light, #f5f5f5);
+      opacity: 0.9;
     }
 
     .column-context-menu-item.remove {
@@ -6063,6 +6190,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 +6247,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 +6288,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 +6299,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 +6334,9 @@ JupiterAdvancedFilter.styles = css`
 
     .filter-options {
       padding: 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
     }
 
     .filter-option {
@@ -6161,11 +6346,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 +6383,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 +6459,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 +6472,7 @@ let JupiterFilterRolesDialog = class extends LitElement {
     this._chosenRoleOrder = [];
     this._showAdvancedFilter = false;
     this._showFactsOnly = false;
+    this._conceptSearchText = "";
   }
   connectedCallback() {
     super.connectedCallback();
@@ -6256,6 +6494,7 @@ let JupiterFilterRolesDialog = class extends LitElement {
         this._showAdvancedFilter = false;
       } else {
         this._showFactsOnly = this.showFactsOnly;
+        this._conceptSearchText = this.conceptSearchText;
       }
     }
   }
@@ -6680,12 +6919,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 +7222,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">
@@ -7257,9 +7498,9 @@ JupiterFilterRolesDialog.styles = css`
       transition: background-color 0.2s ease;
     }
 
-    // .close-button:hover {
-    //   background: var(--jupiter-hover-background, #f5f5f5);
-    // }
+    .close-button:hover {
+      opacity: 0.9;
+    }
 
     .dialog-content {
       background: var(--bg-color-2, var(--jupiter-form-content-background, #fff));
@@ -7373,10 +7614,9 @@ JupiterFilterRolesDialog.styles = css`
       transition: all 0.2s ease;
     }
 
-    // .selection-control:hover {
-    //   background: var(--menuBgColorLighter, var(--jupiter-primary-color, #1976d2));
-    //   color: white;
-    // }
+    .selection-control:hover {
+      opacity: 0.9;
+    }
 
     .roles-list {
       display: flex;
@@ -7597,9 +7837,9 @@ JupiterFilterRolesDialog.styles = css`
       color: var(--buttonTextColor, white);
     }
 
-    // .btn-primary:hover:not(:disabled) {
-    //   background: var(--jupiter-primary-color-dark, #1565c0);
-    // }
+    .btn-primary:hover:not(:disabled) {
+      opacity: 0.9;
+    }
 
     .btn-secondary {
       color: var(--buttonBgColor, var(--jupiter-primary-color, #1976d2));
@@ -7607,9 +7847,9 @@ JupiterFilterRolesDialog.styles = css`
       background: transparent;
     }
 
-    // .btn-secondary:hover:not(:disabled) {
-    //   background: var(--jupiter-hover-background, #f5f5f5);
-    // }
+    .btn-secondary:hover:not(:disabled) {
+      opacity: 0.9;
+    }
 
     button:disabled {
       opacity: 0.6;
@@ -7775,6 +8015,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 +8054,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 +8111,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 +8803,7 @@ let JupiterDynamicForm = class extends LitElement {
   }
   _handleAdvancedFilterApply(event) {
     this._showFactsOnly = event.detail.showFactsOnly;
+    this._conceptSearchText = event.detail.conceptSearchText ?? "";
     this._showFilterDialog = false;
   }
   _handleFilterDialogCancel() {
@@ -10722,6 +10970,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 +11409,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 +11440,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 +11455,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 +11581,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 +11735,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}"
@@ -11610,9 +11924,9 @@ JupiterDynamicForm.styles = css`
       background: transparent;
     }
 
-    // .btn-secondary:hover:not(:disabled) {
-    //   background: var(--jupiter-secondary-color-dark, #616161);
-    // }
+    .btn-secondary:hover:not(:disabled) {
+      opacity: 0.9;
+    }
 
     .btn-outline {
       background: transparent;
@@ -11691,10 +12005,9 @@ JupiterDynamicForm.styles = css`
       margin-right: auto;
     }
 
-    // .filter-roles-button:hover:not(:disabled) {
-    //   background: var(--jupiter-primary-color, #1976d2);
-    //   color: white;
-    // }
+    .filter-roles-button:hover:not(:disabled) {
+      opacity: 0.9;
+    }
 
     .filter-roles-button .filter-icon {
       width: 16px;
@@ -11888,9 +12201,9 @@ JupiterDynamicForm.styles = css`
       line-height: 1.4;
     }
 
-    // .side-panel-role-item:hover {
-    //   background: var(--jupiter-hover-background, #e8e8e8);
-    // }
+    .side-panel-role-item:hover {
+      opacity: 0.9;
+    }
 
     .side-panel-role-item.active {
       background: var(--light-color-1, var(--jupiter-primary-color, #1976d2));
@@ -12387,6 +12700,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_showFactsOnly", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_conceptSearchText", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_periodPreferences", 2);