@coveo/atomic 3.32.3-pre.d8395b7e5a → 3.32.3-pre.e4b54e25d0

package/dist/atomic/components/components/commerce/atomic-commerce-numeric-facet/atomic-commerce-numeric-facet.js

@@ -42,9 +42,6 @@ import styles from './atomic-commerce-numeric-facet.tw.css';
  * @part label-end - The label for the maximum value input field.
  * @part input-end - The input field to enter the maximum numeric value.
  * @part input-apply-button - The button to apply custom numeric range values.
- *
- * @internal
- *
  */
 let AtomicCommerceNumericFacet = class AtomicCommerceNumericFacet extends InitializeBindingsMixin(LitElement) {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-commerce-pager/atomic-commerce-pager.js

@@ -34,7 +34,6 @@ import { getCurrentPagesRange } from './commerce-pager-utils';
  * @part next-button-icon - The "next page" button icon.
  *
  * @event atomic/scrollToTop - Emitted when the user clicks the next or previous button, or a page button.
- * @alpha
  */
 let AtomicCommercePager = class AtomicCommercePager extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.js

@@ -46,8 +46,6 @@ import styles from './atomic-commerce-product-list.tw.css';
  * @part result-table-cell - The td elements nested under each tbody > tr when the display prop is set to "table".
  *
  * @slot default - The default slot where the product templates are defined.
- *
- * @alpha
  */
 let AtomicCommerceProductList = class AtomicCommerceProductList extends ChildrenUpdateCompleteMixin(LitElement) {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.js

@@ -26,8 +26,6 @@ import { randomID } from "../../../utils/utils.js";
  * @part buttons - The list of buttons.
  * @part button - The individual products per page buttons.
  * @part active-button - The active products per page button.
- *
- * @alpha
  */
 let AtomicCommerceProductsPerPage = class AtomicCommerceProductsPerPage extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-commerce-query-error/atomic-commerce-query-error.js

@@ -32,8 +32,6 @@ import { getAriaMessageFromErrorType } from '../../common/query-error/utils';
  * @part doc-link - A link to the relevant documentation.
  * @part more-info-btn - A button to request additional error information.
  * @part error-info - Additional error information.
- *
- * @alpha
  */
 let AtomicCommerceQueryError = class AtomicCommerceQueryError extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-commerce-query-summary/atomic-commerce-query-summary.js

@@ -24,8 +24,6 @@ import { getProductQuerySummaryI18nParameters } from '../../common/query-summary
  * @part highlight - The summary highlights.
  * @part query - The summary highlighted query.
  * @part placeholder - The query summary placeholder used while the search interface is initializing.
- *
- * @alpha
  */
 let AtomicCommerceQuerySummary = class AtomicCommerceQuerySummary extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.js

@@ -22,8 +22,10 @@ import { createCommerceRecommendationStore, } from './store.js';
 /**
  * The `atomic-commerce-recommendation-interface` component is meant to be used
  * as the parent of one or more `atomic-commerce-recommendation-list`
- * components. It handles the headless search engine and localization
+ * components. It handles the headless engine and localization
  * configurations.
+ *
+ * @slot default - The default slot where you can add child components to the interface.
  */
 let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationInterface extends ChildrenUpdateCompleteMixin(LitElement) {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.js

@@ -32,7 +32,6 @@ import { randomID } from "../../../utils/utils";
 import styles from './atomic-commerce-recommendation-list.tw.css';
 /**
  * The `atomic-commerce-recommendation-list` component displays a list of product recommendations by applying one or more product templates.
- * @alpha
  *
  * @part result-list - The element containing the list of product recommendations.
  * @part result-list-grid-clickable-container - The parent of a recommended product and the clickable link encompassing it.

package/dist/atomic/components/components/commerce/atomic-commerce-refine-toggle/atomic-commerce-refine-toggle.js

@@ -21,8 +21,6 @@ import { refineToggleGuard } from '../../common/refine-modal/guard';
  *
  * @part button - The refine toggle button.
  * @part placeholder - The placeholder shown while the first request is being executed.
- *
- * @alpha
  */
 let AtomicCommerceRefineToggle = class AtomicCommerceRefineToggle extends LitElement {
     initialize() {

package/dist/atomic/components/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.js

@@ -73,8 +73,6 @@ import '../atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-
  * @part instant-results-show-all-button - The button inside the clickable suggestion from the `atomic-commerce-search-box-instant-products` component.
  *
  * @event redirect - Event that is emitted when a standalone search box redirection is triggered. By default, the search box will directly change the URL and redirect accordingly, so if you want to handle the redirection differently, use this event.
- *
- * @alpha
  */
 let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.js

@@ -15,9 +15,7 @@ import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js"
 import { encodeForDomAttribute } from "../../../utils/string-utils";
 import { ProductTemplateProvider } from '../product-list/product-template-provider';
 /**
- * The `atomic-commerce-search-box-instant-products` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of instant products behavior.
- *
- * This component does not support accessibility out-of-the-box. To do so, see [Instant Results Accessibility](https://docs.coveo.com/en/atomic/latest/usage/accessibility/#instant-results-accessibility).
+ * The `atomic-commerce-search-box-instant-products` component can be added as a child of an `atomic-commerce-search-box` component, allowing for the configuration of instant products behavior.
  *
  * This component is not supported on mobile.
  *
@@ -25,7 +23,6 @@ import { ProductTemplateProvider } from '../product-list/product-template-provid
  * @part instant-results-item - The individual instant product item.
  *
  * @slot default - The default slot where the instant products are rendered.
- * @alpha
  */
 let AtomicCommerceSearchBoxInstantProducts = class AtomicCommerceSearchBoxInstantProducts extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions.js

@@ -12,8 +12,7 @@ import { dispatchSearchBoxSuggestionsEvent, } from "../../common/suggestions/sug
 import { errorGuard } from "../../../decorators/error-guard";
 const SearchIcon = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.4 0c3.5 0 6.4 2.9 6.4 6.4 0 1.4-.4 2.7-1.2 3.7l4 4c.4.4.4 1 .1 1.5l-.1.1c-.2.2-.5.3-.8.3s-.6-.1-.8-.3l-4-4c-1 .7-2.3 1.2-3.7 1.2-3.4-.1-6.3-3-6.3-6.5s2.9-6.4 6.4-6.4zm0 2.1c-2.3 0-4.3 1.9-4.3 4.3s1.9 4.3 4.3 4.3 4.3-1.9 4.3-4.3-1.9-4.3-4.3-4.3z\"/></svg>";
 /**
- * The `atomic-commerce-search-box-query-suggestions` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of query suggestion behavior.
- * @alpha
+ * The `atomic-commerce-search-box-query-suggestions` component can be added as a child of an `atomic-commerce-search-box` component, allowing for the configuration of query suggestion behavior.
  */
 let AtomicCommerceSearchBoxQuerySuggestions = class AtomicCommerceSearchBoxQuerySuggestions extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries.js

@@ -15,8 +15,6 @@ import { getPartialRecentQueryClearElement, getPartialRecentQueryElement, render
 import { dispatchSearchBoxSuggestionsEvent, } from '../../common/suggestions/suggestions-common';
 /**
  * The `atomic-commerce-search-box-recent-queries` component can be added as a child of an `atomic-commerce-search-box` component, allowing for the configuration of recent query suggestions.
- *
- * @alpha
  */
 let AtomicCommerceSearchBoxRecentQueries = class AtomicCommerceSearchBoxRecentQueries extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-commerce-sort-dropdown/atomic-commerce-sort-dropdown.js

@@ -27,8 +27,6 @@ import { getSortByLabel, renderCommerceSortOption } from '../sort/option';
  * @part select - The `<select>` element of the dropdown list.
  * @part select-separator - The element separating the select from the icon.
  * @part placeholder - The dropdown placeholder for while the interface is initializing.
- *
- * @alpha
  */
 let AtomicCommerceSortDropdown = class AtomicCommerceSortDropdown extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-commerce-timeframe-facet/atomic-commerce-timeframe-facet.js

@@ -42,8 +42,6 @@ import styles from './atomic-commerce-timeframe-facet.tw.css';
  * @part input-start - The start date input field.
  * @part input-end - The end date input field.
  * @part input-apply-button - The button to apply date range selection.
- *
- * @internal
  */
 let AtomicCommerceTimeframeFacet = class AtomicCommerceTimeframeFacet extends InitializeBindingsMixin(LitElement) {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-product-field-condition/atomic-product-field-condition.js

@@ -16,8 +16,6 @@ import { makeDefinedConditions, makeMatchConditions, } from '../../common/produc
  * The condition properties can be based on any top-level product property of the `product` object, not restricted to fields (e.g., `ec_name`).
  *
  * @slot default - The content to render if the conditions are met.
- *
- * @alpha
  */
 let AtomicProductFieldCondition = class AtomicProductFieldCondition extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-product-link/atomic-product-link.js

@@ -22,7 +22,8 @@ import '../atomic-product-text/atomic-product-text';
 import { SlotsForNoShadowDOMMixin, } from "../../../mixins/slots-for-no-shadow-dom-mixin";
 import styles from './atomic-product-link.tw.css';
 /**
- * The `atomic-product-link` component automatically transforms a search product title into a clickable link that points to the original item.
+ * The `atomic-product-link` component automatically transforms a product `ec_name` into a clickable link that points to the original item.
+ *
  * @slot default - The content to display inside the link.
  * @slot attributes - Use `<a slot="attributes" target="_blank"></a>` to pass custom attributes to the generated link.
  */

package/dist/atomic/components/components/commerce/atomic-product-multi-value-text/atomic-product-multi-value-text.js

@@ -15,8 +15,6 @@ import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
 import { getFieldValueCaption } from '../../../utils/field-utils';
 import { titleToKebab } from '../../../utils/utils';
 /**
- * @alpha
- *
  * The `atomic-product-multi-value-text` component renders the values of a multi-value string field.
  *
  * @part product-multi-value-text-list - The list of field values.

package/dist/atomic/components/components/commerce/atomic-product-numeric-field-value/atomic-product-numeric-field-value.js

@@ -18,7 +18,6 @@ import { parseValue } from '../product-template-component-utils/product-utils.js
  * The `atomic-product-numeric-field-value` component renders the value of a number product field.
  *
  * The number can be formatted by adding a `atomic-format-number`, `atomic-format-currency` or `atomic-format-unit` component into this component.
- * @alpha
  */
 let AtomicProductNumericFieldValue = class AtomicProductNumericFieldValue extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-product-price/atomic-product-price.js

@@ -20,7 +20,6 @@ import { defaultCurrencyFormatter } from '../../common/formats/format-common.js'
 import { parseValue } from '../product-template-component-utils/product-utils.js';
 /**
  * The `atomic-product-price` component renders the price of a product.
- * @alpha
  */
 let AtomicProductPrice = class AtomicProductPrice extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-product-rating/atomic-product-rating.js

@@ -24,8 +24,6 @@ import { computeNumberOfStars, renderRating, } from '../../common/atomic-rating/
  * @cssprop --atomic-rating-icon-active-color - Color of the icon when active.
  * @cssprop --atomic-rating-icon-inactive-color - Color of the icon when inactive.
  * @cssprop --atomic-rating-icon-outline - Outline color of the icon.
- *
- * @alpha
  */
 let AtomicProductRating = class AtomicProductRating extends LitElement {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-product-template/atomic-product-template.js

@@ -33,8 +33,6 @@ import '../atomic-product-rating/atomic-product-rating';
  * @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that must not be matched by a product item for the template to apply. For example, a template with the following attribute only applies to product items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
  * @slot default - The default slot where to insert the template element.
  * @slot link - A `template` element that contains a single `atomic-product-link` component.
- *
- * @alpha
  */
 let AtomicProductTemplate = class AtomicProductTemplate extends LitElement {
     constructor() {

package/dist/atomic/components/components/common/facets/facet-value-checkbox/facet-value-checkbox.js

@@ -12,6 +12,7 @@ export const renderFacetValueCheckbox = ({ props }) => (children) => {
     const ariaLabelAttributes = {
         value: props.displayValue,
         count: props.numberOfResults,
+        formattedCount: count,
         interpolation: { escapeValue: false },
     };
     const selectedAriaLabel = props.i18n.t('facet-value', ariaLabelAttributes);

package/dist/atomic/components/components/common/facets/facet-value-link/facet-value-link.js

@@ -7,6 +7,7 @@ export const renderFacetValueLink = ({ props }) => (children) => {
     const ariaLabel = props.i18n.t('facet-value', {
         value: props.displayValue,
         count: props.numberOfResults,
+        formattedCount: count,
         interpolation: { escapeValue: false },
     });
     let part = props.part ??

package/dist/atomic/components/components/search/atomic-results-per-page/atomic-results-per-page.js

@@ -0,0 +1,140 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { buildResultsPerPage, buildSearchStatus, } from '@coveo/headless';
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { renderFieldsetGroup } from "../../common/fieldset-group.js";
+import { createAppLoadedListener } from "../../common/interface/store.js";
+import { renderChoices } from "../../common/items-per-page/choices.js";
+import { ChoiceIsNaNError, InitialChoiceNotInChoicesError, } from "../../common/items-per-page/error.js";
+import { renderLabel } from "../../common/items-per-page/label.js";
+import { convertChoicesToNumbers, validateInitialChoice, } from "../../common/items-per-page/validate.js";
+import { renderPagerGuard } from "../../common/pager/pager-guard.js";
+import { bindStateToController } from "../../../decorators/bind-state.js";
+import { bindingGuard } from "../../../decorators/binding-guard.js";
+import { bindings } from "../../../decorators/bindings.js";
+import { errorGuard } from "../../../decorators/error-guard.js";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin.js";
+import { randomID } from "../../../utils/utils.js";
+/**
+ * The `atomic-results-per-page` component determines how many results to display per page.
+ *
+ * @part label - The "Results per page" label.
+ * @part buttons - The list of buttons.
+ * @part button - The result per page button.
+ * @part active-button - The active result per page button.
+ */
+let AtomicResultsPerPage = class AtomicResultsPerPage extends InitializeBindingsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.radioGroupName = randomID('atomic-results-per-page-');
+        this.isAppLoaded = false;
+        /**
+         * A list of choices for the number of results to display per page, separated by commas.
+         */
+        this.choicesDisplayed = '10,25,50,100';
+    }
+    initialize() {
+        try {
+            this.choices = convertChoicesToNumbers(this.choicesDisplayed);
+            this.initialChoice = this.initialChoice ?? this.choices[0];
+            validateInitialChoice(this.initialChoice, this.choices);
+        }
+        catch (error) {
+            if (error instanceof ChoiceIsNaNError ||
+                error instanceof InitialChoiceNotInChoicesError) {
+                this.bindings.engine.logger.error(error.message, this);
+                throw error;
+            }
+        }
+        this.searchStatus = buildSearchStatus(this.bindings.engine);
+        this.resultPerPage = buildResultsPerPage(this.bindings.engine, {
+            initialState: { numberOfResults: this.initialChoice },
+        });
+        createAppLoadedListener(this.bindings.store, (isAppLoaded) => {
+            this.isAppLoaded = isAppLoaded;
+        });
+    }
+    scrollToTopEvent() {
+        this.dispatchEvent(new CustomEvent('atomic/scrollToTop', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    get label() {
+        return this.bindings.i18n.t('results-per-page');
+    }
+    render() {
+        if (!this.searchStatusState) {
+            return html ``;
+        }
+        return html `
+      ${renderPagerGuard({
+            props: {
+                hasError: this.searchStatusState.hasError,
+                hasItems: this.searchStatusState.hasResults,
+                isAppLoaded: this.isAppLoaded,
+            },
+        })(html `
+        <div class="flex items-center" role="toolbar" aria-label=${this.label}>
+          ${renderLabel()(html `${this.label}`)}
+          ${renderFieldsetGroup({
+            props: {
+                label: this.label,
+            },
+        })(renderChoices({
+            props: {
+                label: this.label,
+                groupName: this.radioGroupName,
+                pageSize: this.resultPerPageState.numberOfResults,
+                choices: this.choices,
+                lang: this.bindings.i18n.language,
+                scrollToTopEvent: () => this.scrollToTopEvent(),
+                setItemSize: (size) => this.resultPerPage.set(size),
+                focusOnFirstResultAfterNextSearch: () => this.bindings.store.state.resultList?.focusOnFirstResultAfterNextSearch(),
+                focusOnNextNewResult: () => this.bindings.store.state.resultList?.focusOnNextNewResult(),
+            },
+        }))}
+        </div>
+      `)}
+    `;
+    }
+};
+__decorate([
+    state()
+], AtomicResultsPerPage.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicResultsPerPage.prototype, "error", void 0);
+__decorate([
+    state(),
+    bindStateToController('resultPerPage')
+], AtomicResultsPerPage.prototype, "resultPerPageState", void 0);
+__decorate([
+    bindStateToController('searchStatus'),
+    state()
+], AtomicResultsPerPage.prototype, "searchStatusState", void 0);
+__decorate([
+    state()
+], AtomicResultsPerPage.prototype, "isAppLoaded", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'choices-displayed' })
+], AtomicResultsPerPage.prototype, "choicesDisplayed", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'initial-choice' })
+], AtomicResultsPerPage.prototype, "initialChoice", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicResultsPerPage.prototype, "render", null);
+AtomicResultsPerPage = __decorate([
+    customElement('atomic-results-per-page'),
+    bindings(),
+    withTailwindStyles
+], AtomicResultsPerPage);
+export { AtomicResultsPerPage };

package/dist/atomic/components/components/search/atomic-search-interface/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/atomic/components/components/search/index.js

@@ -1 +1,2 @@
-export {};
+// Auto-generated file
+export { AtomicResultsPerPage } from './atomic-results-per-page/atomic-results-per-page.js';

package/dist/atomic/components/components/search/lazy-index.js

@@ -1,2 +1,4 @@
 // Auto-generated file
-export default {};
+export default {
+    'atomic-results-per-page': async () => await import('./atomic-results-per-page/atomic-results-per-page.js'),
+};

package/dist/atomic/components/generated-answer-common.js

@@ -1,4 +1,3 @@
-import { Schema, Value, BooleanValue } from '@coveo/bueno';
 import { h } from '@stencil/core/internal/client';
 import { a as SafeStorage, S as StorageItems } from './local-storage-utils.js';
 import { a as getNamedSlotFromHost } from './slot-utils.js';
@@ -2921,28 +2920,6 @@ class GeneratedAnswerCommon {
             h("aside", { class: contentClasses, part: "container" },
                 h("article", null, this.renderContent()))));
     }
-    validateProps() {
-        const schema = new Schema({
-            host: new Value({ required: true }),
-            withToggle: new BooleanValue({ required: false, default: true }),
-            collapsible: new BooleanValue({ required: false, default: true }),
-            disableCitationAnchoring: new BooleanValue({
-                required: false,
-                default: false,
-            }),
-            getGeneratedAnswer: new Value({ required: true }),
-            getGeneratedAnswerState: new Value({ required: true }),
-            getSearchStatusState: new Value({ required: true }),
-            getBindings: new Value({ required: true }),
-            getCopied: new Value({ required: true }),
-            setCopied: new Value({ required: true }),
-            getCopyError: new Value({ required: true }),
-            setCopyError: new Value({ required: true }),
-            setAriaMessage: new Value({ required: true }),
-            buildInteractiveCitation: new Value({ required: true }),
-        });
-        schema.validate(this.props);
-    }
 }
 
 export { GeneratedAnswerCommon as G };