@coveo/quantic 3.44.3 → 3.45.0

package/docs/out/quantic-docs.json

@@ -1060,6 +1060,35 @@
                     }
                 ]
             },
+            {
+                "name": "QuanticLoadMoreResults",
+                "attribute": "quantic-load-more-results",
+                "description": "<p>The <code>QuanticLoadMoreResults</code> component allows the user to load additional results if more are available.</p>\n<p>This component is an alternative to the <code>quantic-pager</code> component: use one or the other, not both on the same page.</p>",
+                "categories": [
+                    "Search",
+                    "Insight Panel"
+                ],
+                "fires": "",
+                "examples": [
+                    "<c-quantic-load-more-results engine-id={engineId}></c-quantic-load-more-results>"
+                ],
+                "xmlMeta": {
+                    "apiVersion": "64.0",
+                    "isExposed": "false",
+                    "targets": []
+                },
+                "properties": [
+                    {
+                        "name": "engineId",
+                        "attribute": "engine-id",
+                        "access": "@api",
+                        "description": "<p>The ID of the engine instance the component registers to.</p>",
+                        "required": true,
+                        "defaultValue": "",
+                        "type": "string"
+                    }
+                ]
+            },
             {
                 "name": "QuanticModal",
                 "attribute": "quantic-modal",
@@ -4984,6 +5013,35 @@
                     }
                 ]
             },
+            {
+                "name": "QuanticLoadMoreResults",
+                "attribute": "quantic-load-more-results",
+                "description": "<p>The <code>QuanticLoadMoreResults</code> component allows the user to load additional results if more are available.</p>\n<p>This component is an alternative to the <code>quantic-pager</code> component: use one or the other, not both on the same page.</p>",
+                "categories": [
+                    "Search",
+                    "Insight Panel"
+                ],
+                "fires": "",
+                "examples": [
+                    "<c-quantic-load-more-results engine-id={engineId}></c-quantic-load-more-results>"
+                ],
+                "xmlMeta": {
+                    "apiVersion": "64.0",
+                    "isExposed": "false",
+                    "targets": []
+                },
+                "properties": [
+                    {
+                        "name": "engineId",
+                        "attribute": "engine-id",
+                        "access": "@api",
+                        "description": "<p>The ID of the engine instance the component registers to.</p>",
+                        "required": true,
+                        "defaultValue": "",
+                        "type": "string"
+                    }
+                ]
+            },
             {
                 "name": "QuanticModal",
                 "attribute": "quantic-modal",

package/force-app/main/default/labels/CustomLabels.labels-meta.xml

@@ -1750,4 +1750,32 @@
     <protected>false</protected>
     <shortDescription>Dislike</shortDescription>
   </labels>
+  <labels>
+    <fullName>quantic_LoadMoreResults</fullName>
+    <value>Load more results</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>Load more results</shortDescription>
+  </labels>
+  <labels>
+    <fullName>quantic_ShowingResultsOfLoadMore</fullName>
+    <value>Showing {{0}} of {{1}} result</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>ex: Showing 10 of 123 result</shortDescription>
+  </labels>
+  <labels>
+    <fullName>quantic_ShowingResultsOfLoadMore_plural</fullName>
+    <value>Showing {{0}} of {{1}} results</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>ex: Showing 10 of 123 results</shortDescription>
+  </labels>
+  <labels>
+    <fullName>quantic_AllResultsLoaded</fullName>
+    <value>All results have been loaded.</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>All results have been loaded.</shortDescription>
+  </labels>
 </CustomLabels>

package/force-app/main/default/lwc/quanticLoadMoreResults/quanticLoadMoreResults.css

@@ -0,0 +1,5 @@
+.load-more-results__progress-bar {
+  width: 18rem;
+  max-width: 100%;
+  margin-inline: auto;
+}

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

@@ -0,0 +1,30 @@
+<template>
+  <template lwc:if={hasInitializationError}>
+    <c-quantic-component-error component-name={template.host.localName}>
+    </c-quantic-component-error>
+  </template>
+    <template lwc:elseif={hasResults}>
+      <div class="slds-text-align_center">
+        <p class="slds-text-color_weak slds-m-bottom_x-small" data-testid="summary">
+          {summaryLabel}
+        </p>
+        <div class="load-more-results__progress-bar slds-var-m-bottom_small">
+          <lightning-progress-bar
+            value={progressPercentage}
+            size="x-small"
+            variant="circular"
+            data-testid="progress-bar"
+          ></lightning-progress-bar>
+        </div>
+        <template lwc:if={moreResultsAvailable}>
+          <lightning-button
+            variant="neutral"
+            label={labels.loadMoreResults}
+            title={labels.loadMoreResults}
+            onclick={fetchMoreResults}
+            data-testid="load-more-results-button"
+          ></lightning-button>
+        </template>
+      </div>
+    </template>
+</template>

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

@@ -0,0 +1,162 @@
+import LOCALE from '@salesforce/i18n/locale';
+import allResultsLoaded from '@salesforce/label/c.quantic_AllResultsLoaded';
+import loadMoreResults from '@salesforce/label/c.quantic_LoadMoreResults';
+import showingResultsOfLoadMore from '@salesforce/label/c.quantic_ShowingResultsOfLoadMore';
+import showingResultsOfLoadMore_plural from '@salesforce/label/c.quantic_ShowingResultsOfLoadMore_plural';
+import {
+  registerComponentForInit,
+  initializeWithHeadless,
+  getHeadlessBundle,
+} from 'c/quanticHeadlessLoader';
+import {AriaLiveRegion, I18nUtils} from 'c/quanticUtils';
+import {LightningElement, api, track} from 'lwc';
+
+/** @typedef {import("coveo").SearchEngine} SearchEngine */
+/** @typedef {import("coveo").ResultList} ResultList */
+/** @typedef {import("coveo").ResultListState} ResultListState */
+/** @typedef {import("coveo").QuerySummary} QuerySummary */
+/** @typedef {import("coveo").QuerySummaryState} QuerySummaryState */
+
+/**
+ * The `QuanticLoadMoreResults` component allows the user to load additional results if more are available.
+ *
+ * This component is an alternative to the `quantic-pager` component: use one or the other, not both on the same page.
+ * @category Search
+ * @category Insight Panel
+ * @example
+ * <c-quantic-load-more-results engine-id={engineId}></c-quantic-load-more-results>
+ */
+export default class QuanticLoadMoreResults extends LightningElement {
+  /**
+   * The ID of the engine instance the component registers to.
+   * @api
+   * @type {string}
+   */
+  @api engineId;
+
+  /** @type {ResultListState} */
+  @track resultListState;
+  /** @type {QuerySummaryState} */
+  @track querySummaryState;
+
+  /** @type {ResultList} */
+  resultList;
+  /** @type {QuerySummary} */
+  querySummary;
+  /** @type {Function} */
+  unsubscribeResultList;
+  /** @type {Function} */
+  unsubscribeQuerySummary;
+  /** @type {ResultListState} */
+  previousResultListState;
+  /** @type {AnyHeadless} */
+  headless;
+  /** @type {import('c/quanticUtils').AriaLiveUtils} */
+  allResultsLoadedAriaMessage;
+  /** @type {boolean} */
+  hasInitializationError = false;
+
+  labels = {
+    allResultsLoaded,
+    loadMoreResults,
+    showingResultsOfLoadMore,
+    showingResultsOfLoadMore_plural,
+  };
+
+  connectedCallback() {
+    registerComponentForInit(this, this.engineId);
+  }
+
+  renderedCallback() {
+    initializeWithHeadless(this, this.engineId, this.initialize);
+  }
+
+  /**
+   * @param {SearchEngine} engine
+   */
+  initialize = (engine) => {
+    this.headless = getHeadlessBundle(this.engineId);
+    this.resultList = this.headless.buildResultList(engine);
+    this.querySummary = this.headless.buildQuerySummary(engine);
+    this.allResultsLoadedAriaMessage = AriaLiveRegion('loadMoreResults', this);
+    this.unsubscribeResultList = this.resultList.subscribe(() =>
+      this.updateResultListState()
+    );
+    this.unsubscribeQuerySummary = this.querySummary.subscribe(() =>
+      this.updateQuerySummaryState()
+    );
+  };
+
+  disconnectedCallback() {
+    this.unsubscribeResultList?.();
+    this.unsubscribeQuerySummary?.();
+  }
+
+  updateResultListState() {
+    this.previousResultListState = this.resultListState;
+    this.resultListState = this.resultList.state;
+    this.announceWhenAllResultsAreLoaded();
+  }
+
+  updateQuerySummaryState() {
+    this.querySummaryState = this.querySummary.state;
+  }
+
+  announceWhenAllResultsAreLoaded() {
+    const isLastBatchLoaded =
+      this.previousResultListState?.moreResultsAvailable === true &&
+      this.resultListState?.moreResultsAvailable === false &&
+      this.previousResultListState?.searchResponseId ===
+        this.resultListState?.searchResponseId;
+
+    if (isLastBatchLoaded) {
+      this.allResultsLoadedAriaMessage.dispatchMessage(
+        this.labels.allResultsLoaded
+      );
+    }
+  }
+
+  fetchMoreResults() {
+    this.resultList.fetchMoreResults();
+  }
+
+  get hasResults() {
+    return !!this.resultListState?.hasResults;
+  }
+
+  get moreResultsAvailable() {
+    return !!this.resultListState?.moreResultsAvailable;
+  }
+
+  get summaryLabel() {
+    const labelName = I18nUtils.getLabelNameWithCount(
+      'showingResultsOfLoadMore',
+      this.querySummaryState?.lastResult
+    );
+    return I18nUtils.format(
+      this.labels[labelName],
+      Intl.NumberFormat(LOCALE)
+        .format(this.querySummaryState?.lastResult)
+        .toString(),
+      Intl.NumberFormat(LOCALE).format(this.querySummaryState?.total).toString()
+    );
+  }
+
+  /**
+   * @returns {number}
+   */
+  get progressPercentage() {
+    const total = this.querySummaryState?.total;
+    if (!total) {
+      return 0;
+    }
+    return Math.min(100, (this.querySummaryState?.lastResult / total) * 100);
+  }
+
+  /**
+   * Sets the component in the initialization error state.
+   */
+  setInitializationError() {
+    this.hasInitializationError = true;
+  }
+}

package/force-app/main/default/lwc/quanticLoadMoreResults/quanticLoadMoreResults.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>64.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>

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

@@ -9,9 +9,9 @@ import {NavigationMixin} from 'lightning/navigation';
 import {LightningElement, api} from 'lwc';
 
 /**
- * Some document types cannot be opened directly in Salesforce, but we need to open their parent record, as is the case for the Case Comment document type.
+ * Some document types cannot be opened directly in Salesforce, so we navigate to their parent record (e.g., CaseComment and FeedComment).
  */
-const documentTypesRequiringParentRecord = ['CaseComment'];
+const documentTypesRequiringParentRecord = ['CaseComment', 'FeedComment'];
 
 /** @typedef {import("coveo").Result} Result */
 /** @typedef {import("coveo").SearchEngine} SearchEngine */