@coveo/quantic 3.18.0-pre.f855ccdaab → 3.18.0

package/force-app/main/default/lwc/jsconfig.json

@@ -38,6 +38,9 @@
       "c/quanticResultList": ["quanticResultList/quanticResultList.js"],
       "c/quanticResultLink": ["quanticResultLink/quanticResultLink.js"],
       "c/quanticSort": ["quanticSort/quanticSort.js"],
+      "c/quanticInsightInterface": [
+        "quanticInsightInterface/quanticInsightInterface.js"
+      ],
       "c/quanticSummary": ["quanticSummary/quanticSummary.js"],
       "c/quanticFacetValue": ["quanticFacetValue/quanticFacetValue.js"],
       "c/quanticNumericFacet": ["quanticNumericFacet/quanticNumericFacet.js"],

package/force-app/main/default/lwc/quanticFacetValue/quanticFacetValue.html

@@ -8,6 +8,7 @@
     tabindex="0"
     onkeydown={onKeyDown}
     aria-label={ariaLabelValue}
+    data-testid="facet__value"
   >
     <template if:false={displayAsLink}>
       <lightning-input
@@ -38,7 +39,6 @@
         <span
           class="slds-truncate slds-var-m-right_xx-small slds-var-m-top_xxx-small facet__value-text facet__value_idle"
           title={formattedFacetValue}
-          data-testid="facet__value"
         >
           <lightning-formatted-rich-text value={item.highlightedResult} disable-linkify></lightning-formatted-rich-text>
         </span>
@@ -47,7 +47,6 @@
         <span
           class="slds-truncate slds-var-m-right_xx-small slds-var-m-top_xxx-small facet__value-text facet__value_idle"
           title={formattedFacetValue}
-          data-testid="facet__value"
         >
           {formattedFacetValue}
         </span>

package/force-app/main/default/lwc/quanticInsightInterface/quanticInsightInterface.js

@@ -44,11 +44,14 @@ export default class QuanticInsightInterface extends LightningElement {
   hasRendered = false;
   /** @type {boolean} */
   ariaLiveEventsBound = false;
+  /** @type {function} */
+  unsubscribeInsightInterface;
 
   /** @type {string} */
   analyticsOriginContext = 'InsightPanel';
 
   disconnectedCallback() {
+    this.unsubscribeInsightInterface?.();
     destroyEngine(this.engineId);
     if (this.ariaLiveEventsBound) {
       this.removeEventListener(
@@ -133,19 +136,36 @@ export default class QuanticInsightInterface extends LightningElement {
     if (this.initialized) {
       return;
     }
-    this.dispatchEvent(
-      new CustomEvent(`quantic__insightinterfaceinitialized`, {
-        detail: {
-          engineId: this.engineId,
-          insightId: this.insightId,
-        },
-        bubbles: true,
-        composed: true,
-      })
+    const engine = getHeadlessBindings(this.engineId).engine;
+    this.insightInterface = CoveoHeadlessInsight.buildInsightInterface(engine);
+    this.unsubscribeInsightInterface = this.insightInterface.subscribe(() =>
+      this.updateInsightInterfaceState()
     );
-    this.initialized = true;
   };
 
+  updateInsightInterfaceState() {
+    if (this.initialized) {
+      return;
+    }
+    this.isInsightInterfaceReady =
+      !this.insightInterface.state.loading &&
+      !!this.insightInterface.state.config;
+
+    if (this.isInsightInterfaceReady) {
+      this.dispatchEvent(
+        new CustomEvent(`quantic__insightinterfaceinitialized`, {
+          detail: {
+            engineId: this.engineId,
+            insightId: this.insightId,
+          },
+          bubbles: true,
+          composed: true,
+        })
+      );
+      this.initialized = true;
+    }
+  }
+
   /**
    * @returns {HTMLInputElement}
    */

package/force-app/main/default/lwc/quanticNumericFacet/quanticNumericFacet.html

@@ -5,7 +5,7 @@
   </template>
   <template lwc:else>
     <template lwc:if={isFacetEnabled}>
-      <div data-test="facet-content">
+      <div data-testid="facet-content">
         <template if:true={showPlaceholder}>
           <c-quantic-placeholder
             variant="card"
@@ -35,6 +35,7 @@
               </lightning-button-icon>
               <template if:true={hasActiveValues}>
                 <button
+                  data-testid="clear-selection-button"
                   class="facet__clear-filter slds-button slds-grid slds-grid_vertical-align-center slds-var-p-horizontal_x-small slds-m-top_small"
                   onclick={clearSelections}
                   title={clearFilterLabel}
@@ -53,11 +54,13 @@
               </template>
               <template if:false={isCollapsed}>
                 <div
+                  data-testid="facet__body"
                   class="slds-has-dividers_around-space slds-var-m-top_medium"
                 >
                   <template if:true={withInput}>
                     <div class="slds-p-horizontal_x-small">
                       <form
+                        data-testid="facet__search-form"
                         onsubmit={onApply}
                         class="facet__search-form slds-grid slds-gutters slds-var-p-bottom_small"
                       >

package/force-app/main/default/lwc/quanticNumericFacet/quanticNumericFacet.js

@@ -15,7 +15,6 @@ import numberInputMinimum from '@salesforce/label/c.quantic_NumberInputMinimum';
 import {
   registerComponentForInit,
   initializeWithHeadless,
-  getHeadlessBindings,
   registerToStore,
   getHeadlessBundle,
   getBueno,
@@ -34,6 +33,7 @@ import {LightningElement, track, api} from 'lwc';
 /** @typedef {import("coveo").NumericFacetValue} NumericFacetValue */
 /** @typedef {import("coveo").SearchStatus} SearchStatus */
 /** @typedef {import("coveo").SearchEngine} SearchEngine */
+/** @typedef {import("coveo").InsightEngine} InsightEngine */
 /** @typedef {import("coveo").FacetConditionsManager} FacetConditionsManager */
 /** @typedef {import('../quanticUtils/facetDependenciesUtils').DependsOn} DependsOn */
 /**
@@ -223,6 +223,8 @@ export default class QuanticNumericFacet extends LightningElement {
   numericFacetConditionsManager;
   /** @type {FacetConditionsManager} */
   numericFilterConditionsManager;
+  /** @type {SearchEngine | InsightEngine} */
+  engine;
 
   /** @type {string} */
   start;
@@ -262,9 +264,10 @@ export default class QuanticNumericFacet extends LightningElement {
   }
 
   /**
-   * @param {SearchEngine} engine
+   * @param {SearchEngine | InsightEngine} engine
    */
   initialize = (engine) => {
+    this.engine = engine;
     this.validateDependsOnProperty();
     this.headless = getHeadlessBundle(this.engineId);
     this.searchStatus = this.headless.buildSearchStatus(engine);
@@ -273,15 +276,11 @@ export default class QuanticNumericFacet extends LightningElement {
     );
 
     if (this.numberOfValues > 0) {
-      this.initializeFacet(engine);
+      this.initializeFacet();
     }
     if (this.withInput) {
-      this.initializeFilter(engine);
+      this.initializeFilter();
     }
-    this.searchStatus = this.headless.buildSearchStatus(engine);
-    this.unsubscribeSearchStatus = this.searchStatus.subscribe(() =>
-      this.updateState()
-    );
     registerToStore(this.engineId, Store.facetTypes.NUMERICFACETS, {
       label: this.label,
       facetId: this.facet?.state.facetId ?? this.field,
@@ -310,11 +309,8 @@ export default class QuanticNumericFacet extends LightningElement {
     }
   }
 
-  /**
-   * @param {import("coveo").SearchEngine} engine
-   */
-  initializeFacet(engine) {
-    this.facet = this.headless.buildNumericFacet(engine, {
+  initializeFacet() {
+    this.facet = this.headless.buildNumericFacet(this.engine, {
       options: {
         field: this.field,
         generateAutomaticRanges: true,
@@ -327,17 +323,14 @@ export default class QuanticNumericFacet extends LightningElement {
     this.unsubscribe = this.facet.subscribe(() => this.updateState());
     if (this.dependsOn) {
       this.numericFacetConditionsManager = this.initFacetConditionManager(
-        engine,
+        this.engine,
         this.facet.state?.facetId
       );
     }
   }
 
-  /**
-   * @param {import("coveo").SearchEngine} engine
-   */
-  initializeFilter(engine) {
-    this.numericFilter = this.headless.buildNumericFilter(engine, {
+  initializeFilter() {
+    this.numericFilter = this.headless.buildNumericFilter(this.engine, {
       options: {
         field: this.field,
         facetId: this.facet?.state.facetId
@@ -350,7 +343,7 @@ export default class QuanticNumericFacet extends LightningElement {
     );
     if (this.dependsOn) {
       this.numericFilterConditionsManager = this.initFacetConditionManager(
-        engine,
+        this.engine,
         this.numericFilter.state?.facetId
       );
     }
@@ -580,10 +573,9 @@ export default class QuanticNumericFacet extends LightningElement {
     }
 
     if (this.numberOfValues > 0) {
-      const engine = getHeadlessBindings(this.engineId).engine;
-      engine.dispatch(
+      this.engine.dispatch(
         this.headless
-          .loadNumericFacetSetActions(engine)
+          .loadNumericFacetSetActions(this.engine)
           .deselectAllNumericFacetValues(this.facet.state.facetId)
       );
     }

package/force-app/main/default/lwc/quanticResultAction/quanticResultAction.html

@@ -11,7 +11,7 @@
       </button>
     </template>
     <template if:false={loading}>
-      <lightning-button-icon-stateful onclick={handleClick} aria-label={displayedLabel} variant="border-filled"
+      <lightning-button-icon-stateful data-testid="result-action-button" onclick={handleClick} aria-label={displayedLabel} variant="border-filled"
         class={resultActionOrderClasses} icon-name={displayedIcon} selected={_selected}>
       </lightning-button-icon-stateful>
     </template>

package/force-app/main/default/lwc/quanticTimeframeFacet/quanticTimeframeFacet.html

@@ -6,7 +6,7 @@
   <template lwc:else>
     <slot><!-- Timeframes --></slot>
     <template lwc:if={isFacetEnabled}>
-      <div data-test="facet-content">
+      <div data-testid="facet-content">
         <template if:true={showPlaceholder}>
           <c-quantic-placeholder
             variant="card"
@@ -34,6 +34,7 @@
 
                 <template if:true={hasActiveValues}>
                   <button
+                    data-testid="clear-selection-button"
                     class="facet__clear-filter slds-button slds-grid slds-grid_vertical-align-center slds-p-horizontal_x-small slds-m-top_small"
                     onclick={clearSelections}
                     title={clearFilterLabel}
@@ -52,95 +53,97 @@
                 </template>
 
                 <template if:false={isCollapsed}>
-                  <template if:true={shouldDisplayDatePicker}>
-                    <div
-                      class="slds-grid slds-gutters slds-grid_vertical slds-p-around_x-small"
-                    >
-                      <form data-testid="facet__date-picker" onsubmit={handleApply}>
-                        <div class="slds-col slds-grid slds-gutters">
-                          <div
-                            class="slds-col slds-size_1-of-5 slds-var-p-top_xx-small slds-var-m-top_xxx-small"
-                          >
-                            <span class="timeframe-facet__input-label"
-                              >{labels.startLabel}</span
-                            >
-                          </div>
-                          <div class="slds-col slds-size_4-of-5">
-                            <lightning-input
-                              type="date"
-                              class="timeframe-facet__start-input"
-                              label="Start"
-                              variant="label-hidden"
-                              date-style="short"
-                              min="1401-01-01"
-                              placeholder={datepickerFormat}
-                              value={startDateNoTime}
-                              onchange={handleStartDateChange}
-                              onblur={handleStartDateBlur}
+                  <div data-testid="facet__body">
+                    <template if:true={shouldDisplayDatePicker}>
+                      <div
+                        class="slds-grid slds-gutters slds-grid_vertical slds-p-around_x-small"
+                      >
+                        <form data-testid="facet__date-picker" onsubmit={handleApply}>
+                          <div class="slds-col slds-grid slds-gutters">
+                            <div
+                              class="slds-col slds-size_1-of-5 slds-var-p-top_xx-small slds-var-m-top_xxx-small"
                             >
-                            </lightning-input>
+                              <span class="timeframe-facet__input-label"
+                                >{labels.startLabel}</span
+                              >
+                            </div>
+                            <div class="slds-col slds-size_4-of-5">
+                              <lightning-input
+                                type="date"
+                                class="timeframe-facet__start-input"
+                                label="Start"
+                                variant="label-hidden"
+                                date-style="short"
+                                min="1401-01-01"
+                                placeholder={datepickerFormat}
+                                value={startDateNoTime}
+                                onchange={handleStartDateChange}
+                                onblur={handleStartDateBlur}
+                              >
+                              </lightning-input>
+                            </div>
                           </div>
-                        </div>
-                        <div
-                          class="slds-col slds-grid slds-gutters slds-p-top_x-small"
-                        >
                           <div
-                            class="slds-col slds-size_1-of-5 slds-var-p-top_xx-small slds-var-m-top_xxx-small"
+                            class="slds-col slds-grid slds-gutters slds-p-top_x-small"
                           >
-                            <span class="timeframe-facet__input-label"
-                              >{labels.endLabel}</span
+                            <div
+                              class="slds-col slds-size_1-of-5 slds-var-p-top_xx-small slds-var-m-top_xxx-small"
                             >
+                              <span class="timeframe-facet__input-label"
+                                >{labels.endLabel}</span
+                              >
+                            </div>
+                            <div class="slds-col slds-size_4-of-5">
+                              <lightning-input
+                                type="date"
+                                class="timeframe-facet__end-input"
+                                label="End"
+                                variant="label-hidden"
+                                date-style="short"
+                                placeholder={datepickerFormat}
+                                value={endDateNoTime}
+                                onchange={handleEndDateChange}
+                                onblur={handleEndDateBlur}
+                              >
+                              </lightning-input>
+                            </div>
                           </div>
-                          <div class="slds-col slds-size_4-of-5">
-                            <lightning-input
-                              type="date"
-                              class="timeframe-facet__end-input"
-                              label="End"
-                              variant="label-hidden"
-                              date-style="short"
-                              placeholder={datepickerFormat}
-                              value={endDateNoTime}
-                              onchange={handleEndDateChange}
-                              onblur={handleEndDateBlur}
+                          <div class="slds-col slds-p-top_x-small">
+                            <button
+                              class="slds-button slds-button_neutral slds-button_stretch timeframe-facet__apply"
+                              onblur={resetRangeValidation}
+                              aria-label={ariaLabelValue}
                             >
-                            </lightning-input>
+                              {labels.apply}
+                            </button>
                           </div>
-                        </div>
-                        <div class="slds-col slds-p-top_x-small">
-                          <button
-                            class="slds-button slds-button_neutral slds-button_stretch timeframe-facet__apply"
-                            onblur={resetRangeValidation}
-                            aria-label={ariaLabelValue}
-                          >
-                            {labels.apply}
-                          </button>
-                        </div>
-                      </form>
-                    </div>
-                  </template>
-
-                  <template if:true={showValues}>
-                    <fieldset>
-                      <legend class="slds-assistive-text">{field}</legend>
-                      <ul
-                        class="slds-has-dividers_around-space slds-m-top_medium"
-                      >
-                        <template for:each={formattedValues} for:item="v">
-                          <li class="slds-grid" key={v.key}>
-                            <c-quantic-facet-value
-                              item={v}
-                              is-checked={v.selected}
-                              onquantic__selectvalue={onSelectValue}
-                              formatting-function={formatFacetValue}
-                              display-as-link
-                              is-range-facet
-                            >
-                            </c-quantic-facet-value>
-                          </li>
-                        </template>
-                      </ul>
-                    </fieldset>
-                  </template>
+                        </form>
+                      </div>
+                    </template>
+  
+                    <template if:true={showValues}>
+                      <fieldset>
+                        <legend class="slds-assistive-text">{field}</legend>
+                        <ul
+                          class="slds-has-dividers_around-space slds-m-top_medium"
+                        >
+                          <template for:each={formattedValues} for:item="v">
+                            <li class="slds-grid" key={v.key}>
+                              <c-quantic-facet-value
+                                item={v}
+                                is-checked={v.selected}
+                                onquantic__selectvalue={onSelectValue}
+                                formatting-function={formatFacetValue}
+                                display-as-link
+                                is-range-facet
+                              >
+                              </c-quantic-facet-value>
+                            </li>
+                          </template>
+                        </ul>
+                      </fieldset>
+                    </template>
+                  </div>
                 </template>
               </c-quantic-card-container>
             </div>

package/force-app/main/default/lwc/quanticTimeframeFacet/quanticTimeframeFacet.js

@@ -7,7 +7,6 @@ import expandFacet from '@salesforce/label/c.quantic_ExpandFacet';
 import startLabel from '@salesforce/label/c.quantic_StartLabel';
 import timeframeInputApply from '@salesforce/label/c.quantic_TimeframeInputApply';
 import {
-  getHeadlessBindings,
   getHeadlessBundle,
   initializeWithHeadless,
   registerComponentForInit,
@@ -25,6 +24,7 @@ import {
 import {api, LightningElement, track} from 'lwc';
 
 /** @typedef {import("coveo").SearchEngine} SearchEngine */
+/** @typedef {import("coveo").InsightEngine} InsightEngine */
 /** @typedef {import("coveo").SearchStatus} SearchStatus */
 /** @typedef {import("coveo").DateFacet} DateFacet */
 /** @typedef {import("coveo").DateFacetState} DateFacetState */
@@ -214,6 +214,8 @@ export default class QuanticTimeframeFacet extends LightningElement {
   dateFacetConditionsManager;
   /** @type {FacetConditionsManager} */
   dateFilterConditionsManager;
+  /** @type {SearchEngine | InsightEngine} */
+  engine;
 
   _isCollapsed = false;
   _showValues = true;
@@ -257,15 +259,14 @@ export default class QuanticTimeframeFacet extends LightningElement {
    * Gets whether to show the facet.
    */
   get showFacet() {
-    const facetIsActivated =
-      this.hasActiveValues || !!this.dateFilterState?.range;
     const canRefineWithCustomRange =
       this.hasResults && this.shouldDisplayDatePicker;
     const canRefineWithTimeframes =
       this.hasResults && this.formattedValues.length > 0;
-
     return (
-      facetIsActivated || canRefineWithCustomRange || canRefineWithTimeframes
+      this.hasActiveValues ||
+      canRefineWithCustomRange ||
+      canRefineWithTimeframes
     );
   }
 
@@ -333,7 +334,7 @@ export default class QuanticTimeframeFacet extends LightningElement {
   get currentValues() {
     return this.timeframes.map((timeframe) => {
       return timeframe.period === 'past'
-        ? getHeadlessBundle(this.engineId).buildDateRange({
+        ? this.headless.buildDateRange({
             start: {
               period: timeframe.period,
               unit: timeframe.unit,
@@ -341,7 +342,7 @@ export default class QuanticTimeframeFacet extends LightningElement {
             },
             end: {period: 'now'},
           })
-        : getHeadlessBundle(this.engineId).buildDateRange({
+        : this.headless.buildDateRange({
             start: {period: 'now'},
             end: {
               period: timeframe.period,
@@ -386,10 +387,7 @@ export default class QuanticTimeframeFacet extends LightningElement {
   }
 
   get hasActiveValues() {
-    return (
-      this.formattedValues.some((v) => v.selected) ||
-      !!this.dateFilterState?.range
-    );
+    return this.facetState?.hasActiveValues || !!this.dateFilterState?.range;
   }
 
   get clearFilterLabel() {
@@ -435,11 +433,14 @@ export default class QuanticTimeframeFacet extends LightningElement {
    * @param {SearchEngine} engine
    */
   initialize = (engine) => {
+    this.engine = engine;
     this.validateDependsOnProperty();
     this.headless = getHeadlessBundle(this.engineId);
     this.initializeSearchStatusController(engine);
     this.initializeFacetController(engine);
-    this.initializeDateFilterController(engine);
+    if (this.withDatePicker) {
+      this.initializeDateFilterController(engine);
+    }
     registerToStore(this.engineId, Store.facetTypes.DATEFACETS, {
       label: this.label,
       facetId: this.facet.state.facetId,
@@ -798,15 +799,14 @@ export default class QuanticTimeframeFacet extends LightningElement {
   }
 
   updateRangeInHeadless(startDate, endDate) {
-    const engine = getHeadlessBindings(this.engineId).engine;
-    engine.dispatch(
-      getHeadlessBundle(this.engineId)
-        .loadDateFacetSetActions(engine)
+    this.engine.dispatch(
+      this.headless
+        .loadDateFacetSetActions(this.engine)
         .deselectAllDateFacetValues(this.facet.state.facetId)
     );
 
     this.dateFilter.setRange(
-      getHeadlessBundle(this.engineId).buildDateRange({
+      this.headless.buildDateRange({
         start: DateUtils.toLocalSearchApiDate(startDate),
         end: DateUtils.toLocalSearchApiDate(endDate),
       })