@coveo/atomic 3.34.0-pre.b099da8035 → 3.34.0-pre.b429ebe8aa

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

@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { ProductTemplatesHelpers } from '@coveo/headless/commerce';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { bindings } from "../../../decorators/bindings";
@@ -11,7 +12,7 @@ import { createProductContextController } from "../../../decorators/commerce/pro
 import { errorGuard } from "../../../decorators/error-guard";
 import { LightDomMixin } from "../../../mixins/light-dom";
 import { mapProperty } from "../../../utils/props-utils";
-import { makeDefinedConditions, makeMatchConditions, } from '../../common/product-template/product-template-common';
+import { makeDefinedConditions, makeMatchConditions, } from '../../common/template-controller/template-utils';
 /**
  * The `atomic-product-field-condition` component renders its children only when all of the conditions specified through its props are satisfied.
  * The condition properties can be based on any top-level product property of the `product` object, not restricted to fields (e.g., `ec_name`).
@@ -26,8 +27,8 @@ let AtomicProductFieldCondition = class AtomicProductFieldCondition extends Ligh
     initialize() { }
     get conditions() {
         return [
-            ...makeDefinedConditions(this.ifDefined, this.ifNotDefined),
-            ...makeMatchConditions(this.mustMatch, this.mustNotMatch),
+            ...makeDefinedConditions(this.ifDefined, this.ifNotDefined, ProductTemplatesHelpers),
+            ...makeMatchConditions(this.mustMatch, this.mustNotMatch, ProductTemplatesHelpers),
         ];
     }
     render() {

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

@@ -4,12 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { ProductTemplatesHelpers } from '@coveo/headless/commerce';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { errorGuard } from "../../../decorators/error-guard";
 import { mapProperty } from "../../../utils/props-utils";
-import { makeMatchConditions } from '../../common/product-template/product-template-common';
 import { ProductTemplateController } from '../../common/product-template/product-template-controller';
+import { makeMatchConditions } from '../../common/template-controller/template-utils';
 import '../atomic-product/atomic-product';
 /**
  * * A product template determines the format of the products, depending on the conditions that are defined for each template.
@@ -43,7 +44,7 @@ let AtomicProductTemplate = class AtomicProductTemplate extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.productTemplateController.matchConditions = makeMatchConditions(this.mustMatch, this.mustNotMatch);
+        this.productTemplateController.matchConditions = makeMatchConditions(this.mustMatch, this.mustNotMatch, ProductTemplatesHelpers);
     }
     /**
      * Gets the product template to apply based on the evaluated conditions.

package/dist/atomic/components/components/common/item-list/table-layout.js

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import { keyed } from 'lit/directives/keyed.js';
 import { map } from 'lit/directives/map.js';
 import { ref } from 'lit/directives/ref.js';
-import { tableElementTagName } from '../../search/atomic-table-result/table-element-utils';
+import { tableElementTagName } from '../table-element-utils';
 export const renderTableLayout = ({ props }) => {
     const { host, listClasses, logger } = props;
     const fieldColumns = getFieldTableColumns(props);

package/dist/atomic/components/components/common/product-template/product-template-controller.js

@@ -1,94 +1,29 @@
-import { aggregate } from '../../../utils/utils';
-import { getTemplateNodeType } from './product-template-common';
-export class ProductTemplateController {
+import { BaseTemplateController, } from "../template-controller/base-template-controller";
+export class ProductTemplateController extends BaseTemplateController {
     constructor(host, validParents, allowEmpty = false) {
-        this.host = host;
-        this.validParents = validParents;
-        this.allowEmpty = allowEmpty;
-        this.matchConditions = [];
-        this.host.addController(this);
-    }
-    hostConnected() {
-        this.validateTemplate();
-    }
-    setError(error) {
-        this.host.error = error;
-    }
-    validateTemplate() {
-        const hasValidParent = this.validParents
-            .map((p) => p.toUpperCase())
-            .includes(this.parentElement?.nodeName || '');
-        const tagName = this.host.nodeName.toLowerCase();
-        if (!hasValidParent) {
-            this.setError(new Error(ProductTemplateController.ERRORS.invalidParent(tagName, this.validParents)));
-            return;
-        }
-        if (this.parentAttr('display') === 'grid') {
-            this.gridCellLinkTarget = this.parentAttr('grid-cell-link-target');
-        }
-        if (!this.template) {
-            this.setError(new Error(ProductTemplateController.ERRORS.missingTemplate(tagName)));
-            return;
-        }
-        if (!this.allowEmpty && !this.template.innerHTML.trim()) {
-            this.setError(new Error(ProductTemplateController.ERRORS.emptyTemplate(tagName)));
-            return;
-        }
-        if (this.template.content.querySelector('script')) {
-            console.warn(ProductTemplateController.WARNINGS.scriptTag, this.host);
-        }
-        const { section, other } = groupNodesByType(this.template.content.childNodes);
-        if (section?.length && other?.length) {
-            console.warn(ProductTemplateController.WARNINGS.sectionMix, this.host, {
-                section,
-                other,
-            });
-        }
+        super(host, validParents, allowEmpty);
     }
     getTemplate(conditions) {
-        if (this.host.error) {
+        const baseTemplate = this.getBaseTemplate(conditions);
+        if (!baseTemplate) {
             return null;
         }
         return {
-            conditions: conditions.concat(this.matchConditions),
-            content: getTemplateElement(this.host).content,
-            linkContent: this.getLinkTemplateElement(this.host).content,
-            priority: 1,
+            conditions: baseTemplate.conditions,
+            content: baseTemplate.content,
+            linkContent: baseTemplate.linkContent,
+            priority: baseTemplate.priority,
+        };
+    }
+    getWarnings() {
+        return {
+            scriptTag: 'Any "script" tags defined inside of "template" elements are not supported and will not be executed when the products are rendered.',
+            sectionMix: 'Product templates should only contain section elements or non-section elements, not both. Future updates could unpredictably affect this product template.',
         };
     }
     getDefaultLinkTemplateElement() {
         const linkTemplate = document.createElement('template');
-        linkTemplate.innerHTML = `<atomic-product-link>${this.gridCellLinkTarget ? `<a slot="attributes" target="${this.gridCellLinkTarget}"></a>` : ''}</atomic-product-link>`;
+        linkTemplate.innerHTML = `<atomic-product-link>${this.currentGridCellLinkTarget ? `<a slot="attributes" target="${this.currentGridCellLinkTarget}"></a>` : ''}</atomic-product-link>`;
         return linkTemplate;
     }
-    getLinkTemplateElement(host) {
-        return (host.querySelector('template[slot="link"]') ??
-            this.getDefaultLinkTemplateElement());
-    }
-    get parentElement() {
-        return this.host.parentElement;
-    }
-    get template() {
-        return this.host.querySelector('template');
-    }
-    parentAttr(attribute) {
-        return this.parentElement?.attributes.getNamedItem(attribute)?.value;
-    }
-}
-ProductTemplateController.ERRORS = {
-    invalidParent: (tagName, validParents) => `The "${tagName}" component has to be the child of one of the following: ${validParents
-        .map((p) => `"${p.toLowerCase()}"`)
-        .join(', ')}.`,
-    missingTemplate: (tagName) => `The "${tagName}" component must contain a "template" element as a child.`,
-    emptyTemplate: (tagName) => `The "template" tag inside "${tagName}" cannot be empty.`,
-};
-ProductTemplateController.WARNINGS = {
-    scriptTag: 'Any "script" tags defined inside of "template" elements are not supported and will not be executed when the products are rendered.',
-    sectionMix: 'Product templates should only contain section elements or non-section elements. Future updates could unpredictably affect this product template.',
-};
-function getTemplateElement(host) {
-    return host.querySelector('template:not([slot])');
-}
-function groupNodesByType(nodes) {
-    return aggregate(Array.from(nodes), (node) => getTemplateNodeType(node));
 }

package/dist/atomic/components/components/common/template-controller/base-template-controller.js

@@ -0,0 +1,89 @@
+import { aggregate } from "../../../utils/utils";
+import { getTemplateNodeType } from './template-utils';
+export class BaseTemplateController {
+    constructor(host, validParents, allowEmpty = false) {
+        this.host = host;
+        this.validParents = validParents;
+        this.allowEmpty = allowEmpty;
+        this.matchConditions = [];
+        this.host.addController(this);
+    }
+    hostConnected() {
+        this.validateTemplate();
+    }
+    getLinkTemplateElement(host) {
+        return (host.querySelector('template[slot="link"]') ??
+            this.getDefaultLinkTemplateElement());
+    }
+    setError(error) {
+        this.host.error = error;
+    }
+    getBaseTemplate(conditions) {
+        if (this.host.error) {
+            return null;
+        }
+        return {
+            conditions: conditions.concat(this.matchConditions),
+            content: getTemplateElement(this.host).content,
+            linkContent: this.getLinkTemplateElement(this.host).content,
+            priority: 1,
+        };
+    }
+    get parentElement() {
+        return this.host.parentElement;
+    }
+    get template() {
+        return this.host.querySelector('template');
+    }
+    parentAttr(attribute) {
+        return this.parentElement?.attributes.getNamedItem(attribute)?.value;
+    }
+    get currentGridCellLinkTarget() {
+        return this.gridCellLinkTarget;
+    }
+    validateTemplate() {
+        const hasValidParent = this.validParents
+            .map((p) => p.toUpperCase())
+            .includes(this.parentElement?.nodeName || '');
+        const tagName = this.host.nodeName.toLowerCase();
+        if (!hasValidParent) {
+            this.setError(new Error(BaseTemplateController.ERRORS.invalidParent(tagName, this.validParents)));
+            return;
+        }
+        if (this.parentAttr('display') === 'grid') {
+            this.gridCellLinkTarget = this.parentAttr('grid-cell-link-target');
+        }
+        if (!this.template) {
+            this.setError(new Error(BaseTemplateController.ERRORS.missingTemplate(tagName)));
+            return;
+        }
+        if (!this.allowEmpty && !this.template.innerHTML.trim()) {
+            this.setError(new Error(BaseTemplateController.ERRORS.emptyTemplate(tagName)));
+            return;
+        }
+        const warnings = this.getWarnings();
+        if (this.template.content.querySelector('script')) {
+            console.warn(warnings.scriptTag, this.host);
+        }
+        const { section, other } = groupNodesByType(this.template.content.childNodes);
+        if (section?.length && other?.length) {
+            console.warn(warnings.sectionMix, this.host, {
+                section,
+                other,
+            });
+        }
+    }
+}
+BaseTemplateController.ERRORS = {
+    invalidParent: (tagName, validParents) => `The "${tagName}" component has to be the child of one of the following: ${validParents
+        .map((p) => `"${p.toLowerCase()}"`)
+        .join(', ')}.`,
+    missingTemplate: (tagName) => `The "${tagName}" component must contain a "template" element as a child.`,
+    emptyTemplate: (tagName) => `The "template" tag inside "${tagName}" cannot be empty.`,
+};
+function getTemplateElement(host) {
+    return host.querySelector('template:not([slot])');
+}
+function groupNodesByType(nodes) {
+    return aggregate(Array.from(nodes), (node) => getTemplateNodeType(node));
+}

package/dist/atomic/components/components/common/{product-template/product-template-common.js → template-controller/template-utils.js}

@@ -1,8 +1,7 @@
-import { ProductTemplatesHelpers, } from '@coveo/headless/commerce';
-import { intersection } from '../../../utils/set';
-import { isElementNode, isVisualNode } from '../../../utils/utils';
-import { tableElementTagName } from '../../search/atomic-table-result/table-element-utils';
-import { isResultSectionNode } from '../layout/item-layout-sections';
+import { isResultSectionNode } from "../layout/item-layout-sections";
+import { tableElementTagName } from "../table-element-utils";
+import { intersection } from "../../../utils/set";
+import { isElementNode, isVisualNode } from "../../../utils/utils";
 export function getTemplateNodeType(node) {
     if (isResultSectionNode(node)) {
         return 'section';
@@ -16,7 +15,7 @@ export function getTemplateNodeType(node) {
     }
     return 'other';
 }
-export function makeMatchConditions(mustMatch, mustNotMatch) {
+export function makeMatchConditions(mustMatch, mustNotMatch, helpers) {
     const conditions = [];
     for (const field in mustMatch) {
         if (mustNotMatch[field]) {
@@ -25,25 +24,25 @@ export function makeMatchConditions(mustMatch, mustNotMatch) {
             const commonValues = intersection(mustNotMatchValues, mustMatchValues);
             if (commonValues.size > 0) {
                 console.error(`Conflicting match conditions for field ${field}, the template will be ignored.`, commonValues);
-                return [() => false];
+                return [(() => false)];
             }
         }
-        conditions.push(ProductTemplatesHelpers.fieldMustMatch(field, mustMatch[field]));
+        conditions.push(helpers.fieldMustMatch(field, mustMatch[field]));
     }
     for (const field in mustNotMatch) {
-        conditions.push(ProductTemplatesHelpers.fieldMustNotMatch(field, mustNotMatch[field]));
+        conditions.push(helpers.fieldMustNotMatch(field, mustNotMatch[field]));
     }
     return conditions;
 }
-export function makeDefinedConditions(ifDefined, ifNotDefined) {
+export function makeDefinedConditions(ifDefined, ifNotDefined, helpers) {
     const conditions = [];
     if (ifDefined) {
         const fieldNames = ifDefined.split(',');
-        conditions.push(ProductTemplatesHelpers.fieldsMustBeDefined(fieldNames));
+        conditions.push(helpers.fieldsMustBeDefined(fieldNames));
     }
     if (ifNotDefined) {
         const fieldNames = ifNotDefined.split(',');
-        conditions.push(ProductTemplatesHelpers.fieldsMustNotBeDefined(fieldNames));
+        conditions.push(helpers.fieldsMustNotBeDefined(fieldNames));
     }
     return conditions;
 }

package/dist/atomic/components/components/common/validate-props-controller/validate-props-controller.js

@@ -0,0 +1,50 @@
+import { deepEqual } from "../../../utils/compare-utils";
+/**
+ * A reactive controller that validates the props of a Lit component against a
+ * provided Bueno schema.
+ *
+ * It validates the props when the host is connected to the DOM and whenever
+ * the host updates, revalidating only if the props have changed since the last
+ * validation.
+ *
+ * If validation fails, the controller sets the `error` property on the host.
+ */
+export class ValidatePropsController {
+    /**
+     * Creates a `ValidatePropsController`.
+     *
+     * @param host The host element.
+     * @param getProps A function that returns the current props to validate.
+     * @param schema The Bueno schema to validate the props against.
+     */
+    constructor(host, getProps, schema) {
+        this.host = host;
+        this.getProps = getProps;
+        this.schema = schema;
+        host.addController(this);
+    }
+    hostConnected() {
+        this.currentProps = this.getProps();
+        this._validateProps();
+    }
+    hostUpdate() {
+        this.currentProps = this.getProps();
+        if (deepEqual(this.currentProps, this.previousProps)) {
+            return;
+        }
+        // @ts-expect-error: we need to clear the error.
+        this.host.error = undefined;
+        this._validateProps();
+    }
+    _validateProps() {
+        try {
+            this.schema.validate(this.currentProps);
+        }
+        catch (error) {
+            this.host.error = error;
+        }
+        finally {
+            this.previousProps = this.currentProps;
+        }
+    }
+}

package/dist/atomic/components/components/search/atomic-relevance-inspector/atomic-relevance-inspector.js

@@ -0,0 +1,100 @@
+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 { getOrganizationEndpoint } from '@coveo/headless';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { renderButton } from "../../common/button";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import "../../common/atomic-modal/atomic-modal";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+/**
+ * The `atomic-relevance-inspector` component is used internally to offer insight on search page relevance, as well as information to help troubleshoot issues during development.
+ *
+ * @internal
+ */
+let AtomicRelevanceInspector = class AtomicRelevanceInspector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.initialize = () => {
+            this.bindings.interfaceElement.addEventListener('dblclick', this.handleRelevanceInspectorDoubleClick);
+        };
+        this.handleRelevanceInspectorDoubleClick = (e) => {
+            if (e.altKey) {
+                this.open = !this.open;
+            }
+        };
+    }
+    disconnectedCallback() {
+        this.bindings.interfaceElement.removeEventListener('dblclick', this.handleRelevanceInspectorDoubleClick);
+    }
+    render() {
+        return html `
+      <atomic-modal
+        .isOpen=${this.open}
+        @close=${() => this.handleCloseRelevanceInspector()}
+        exportparts="footer"
+      >
+        <p slot="header">Open the relevance inspector</p>
+        <p slot="body">
+          The Relevance Inspector will open in the Coveo Administration Console.
+        </p>
+        <div slot="footer" class="flex w-full items-center justify-end">
+          ${renderButton({
+            props: {
+                style: 'outline-primary',
+                class: 'mr-2 p-2',
+                onClick: () => this.handleCloseRelevanceInspector(),
+                text: 'Ignore',
+            },
+        })(nothing)}
+          ${renderButton({
+            props: {
+                style: 'primary',
+                class: 'p-2',
+                onClick: () => {
+                    window.open(this.adminHref, '_blank');
+                    this.handleCloseRelevanceInspector();
+                },
+                text: 'Open',
+            },
+        })(nothing)}
+        </div>
+      </atomic-modal>
+    `;
+    }
+    handleCloseRelevanceInspector() {
+        this.open = false;
+    }
+    get adminHref() {
+        const { organizationId, environment } = this.bindings.engine.state.configuration;
+        const admin = getOrganizationEndpoint(organizationId, environment, 'admin');
+        const { searchResponseId } = this.bindings.engine.state.search;
+        return `${admin}/admin/#/${organizationId}/search/relevanceInspector/${searchResponseId}`;
+    }
+};
+__decorate([
+    state()
+], AtomicRelevanceInspector.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicRelevanceInspector.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicRelevanceInspector.prototype, "open", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicRelevanceInspector.prototype, "render", null);
+AtomicRelevanceInspector = __decorate([
+    customElement('atomic-relevance-inspector'),
+    bindings(),
+    withTailwindStyles
+], AtomicRelevanceInspector);
+export { AtomicRelevanceInspector };

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

@@ -0,0 +1,137 @@
+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 { buildRecentQueriesList, } from '@coveo/headless';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { errorGuard } from "../../../decorators/error-guard";
+import { SafeStorage, StorageItems } from "../../../utils/local-storage-utils";
+import { once } from "../../../utils/utils";
+const Clock = "<svg fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-linecap=\"round\"  viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"8\" cy=\"8\" r=\"7.5\"/><path d=\"m8.5 4.5v4\"/><path d=\"m10.3066 10.1387-1.80932-1.5768\"/></svg>";
+import { getPartialRecentQueryClearElement, getPartialRecentQueryElement, renderRecentQuery, renderRecentQueryClear, } from '../../common/suggestions/recent-queries';
+import { dispatchSearchBoxSuggestionsEvent } from '../../common/suggestions/suggestions-events';
+/**
+ * The `atomic-search-box-recent-queries` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of recent query suggestions.
+ */
+let AtomicSearchBoxRecentQueries = class AtomicSearchBoxRecentQueries extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The maximum number of suggestions to display when the user types in the input field.
+         */
+        this.maxWithQuery = 3;
+        this.warnUser = once(() => this.bindings.engine.logger.warn('The recent queries feature is deactivated because analytics are disabled.'));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        try {
+            dispatchSearchBoxSuggestionsEvent((bindings) => {
+                this.bindings = bindings;
+                return this.initialize();
+            }, this, ['atomic-search-box']);
+        }
+        catch (error) {
+            this.error = error;
+        }
+    }
+    initialize() {
+        this.storage = new SafeStorage();
+        this.recentQueriesList = buildRecentQueriesList(this.bindings.engine, {
+            initialState: { queries: this.retrieveLocalStorage() },
+            options: {
+                maxLength: 1000,
+                clearFilters: this.bindings.clearFilters,
+            },
+        });
+        this.recentQueriesList.subscribe(() => this.updateLocalStorage());
+        return {
+            position: Array.from(this.parentNode.children).indexOf(this),
+            renderItems: () => this.renderItems(),
+        };
+    }
+    retrieveLocalStorage() {
+        return this.storage.getParsedJSON(StorageItems.RECENT_QUERIES, []);
+    }
+    updateLocalStorage() {
+        if (!this.recentQueriesList.state.analyticsEnabled) {
+            return this.disableFeature();
+        }
+        return this.storage.setJSON(StorageItems.RECENT_QUERIES, this.recentQueriesList.state.queries);
+    }
+    disableFeature() {
+        this.warnUser();
+        this.storage.removeItem(StorageItems.RECENT_QUERIES);
+    }
+    renderItems() {
+        if (!this.recentQueriesList.state.analyticsEnabled) {
+            return [];
+        }
+        const query = this.bindings.searchBoxController.state.value;
+        const hasQuery = query !== '';
+        const max = hasQuery ? this.maxWithQuery : this.maxWithoutQuery;
+        const filteredQueries = this.recentQueriesList.state.queries
+            .filter((recentQuery) => recentQuery.toLowerCase().startsWith(query.toLowerCase()))
+            .slice(0, max);
+        const suggestionElements = filteredQueries.map((value) => this.renderItem(value));
+        if (suggestionElements.length) {
+            suggestionElements.unshift(this.renderClear());
+        }
+        return suggestionElements;
+    }
+    renderClear() {
+        const partialItem = getPartialRecentQueryClearElement(this.bindings.i18n);
+        return {
+            ...partialItem,
+            content: renderRecentQueryClear({ i18n: this.bindings.i18n }),
+            onSelect: () => {
+                this.recentQueriesList.clear();
+                this.bindings.triggerSuggestions();
+            },
+        };
+    }
+    renderItem(value) {
+        const query = this.bindings.searchBoxController.state.value;
+        const partialItem = getPartialRecentQueryElement(value, this.bindings.i18n);
+        return {
+            ...partialItem,
+            content: renderRecentQuery({
+                icon: this.icon || Clock,
+                query,
+                value,
+            }),
+            onSelect: () => {
+                if (this.bindings.isStandalone) {
+                    this.bindings.searchBoxController.updateText(value);
+                    this.bindings.searchBoxController.submit();
+                    return;
+                }
+                this.recentQueriesList.executeRecentQuery(this.recentQueriesList.state.queries.indexOf(value));
+            },
+        };
+    }
+    render() {
+        return html `${nothing}`;
+    }
+};
+__decorate([
+    state()
+], AtomicSearchBoxRecentQueries.prototype, "error", void 0);
+__decorate([
+    property()
+], AtomicSearchBoxRecentQueries.prototype, "icon", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-with-query', reflect: true })
+], AtomicSearchBoxRecentQueries.prototype, "maxWithQuery", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-without-query', reflect: true })
+], AtomicSearchBoxRecentQueries.prototype, "maxWithoutQuery", void 0);
+__decorate([
+    errorGuard()
+], AtomicSearchBoxRecentQueries.prototype, "render", null);
+AtomicSearchBoxRecentQueries = __decorate([
+    customElement('atomic-search-box-recent-queries')
+], AtomicSearchBoxRecentQueries);
+export { AtomicSearchBoxRecentQueries };