@coveo/atomic 3.28.0-pre.4f3f990ed7 → 3.28.0-pre.51bfa6a7cd

package/dist/atomic/components/atomic-result-table-placeholder2.js

@@ -18,7 +18,7 @@ const AtomicResultTablePlaceholder = /*@__PURE__*/ proxyCustomElement(class Atom
         return getItemDisplayClasses('table', this.density, this.imageSize);
     }
     render() {
-        return (h("table", { key: 'db3a9b9d55eb8d3417e60b89f13f07636c8196f9', class: `list-root animate-pulse ${this.getClasses().join(' ')}` }, h("thead", { key: '5dc2f253b16ec6302fbafa604d7bffac41670dd0' }, h("tr", { key: 'fd20bb0566ddadfaf855f9624d58aadb942e772d' }, h("th", { key: '85875071396ae899dc8479dfa52ec16bd3ea2e19' }, h("div", { key: 'b6707df93ed8d964755a539966f109c20f5e9f5f', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '14.5rem' } })), h("th", { key: 'ee7cc8149bd3eee23225a3e2622f999acf030385' }, h("div", { key: '07ec2fa2f4625c63e353a842680d04540c94e85e', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '9.75rem' } })), h("th", { key: 'c24de3a80547bc1af784a238e68c931ea2586167' }, h("div", { key: 'fed9db9f0174e5961845d5f3cec4806f395c6722', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '6.5rem' } })))), h("tbody", { key: 'e1a3e36e69c633186d4530cc499dcd5a29b1fdb8' }, Array.from({ length: this.rows }, () => (h("tr", null, h("td", null, h("div", { class: `mb-6 h-8 ${placeholderClasses}`, style: { width: '22.875rem' } }), h("div", { class: `mb-2 h-5 ${placeholderClasses}`, style: { width: '23.75rem' } }), h("div", { class: `h-5 ${placeholderClasses}`, style: { width: '11.5rem' } })), h("td", null, h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '11rem' } })), h("td", null, h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '4.875rem' } }))))))));
+        return (h("table", { key: '983adfb713e79003cfa21dead66b825d322ef4cc', class: `list-root animate-pulse ${this.getClasses().join(' ')}` }, h("thead", { key: '583cdcc694237102118be5088bd1c9953d916ecb' }, h("tr", { key: '8329e5ac6601877352902efd4fcf27ff328db3e0' }, h("th", { key: '08efb7d6770dc4a92ab96a021aebab33430b96ad' }, h("div", { key: 'e184a34cd625342bb698733fecee1528f8fbecf6', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '14.5rem' } })), h("th", { key: '63c3a8475479bfe8212b67e1c6d39274206360d3' }, h("div", { key: '88214bac36ccb1173112d3fe47db8f883a8c3377', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '9.75rem' } })), h("th", { key: '52c9ef0c4d4f69dec6dc4a217c03db16b64bec60' }, h("div", { key: '657aacd576ac96e41166dffb3f3610fb7cd1773e', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '6.5rem' } })))), h("tbody", { key: 'e48e39258c678df97c98a71e428dceb3d4a0253a' }, Array.from({ length: this.rows }, () => (h("tr", null, h("td", null, h("div", { class: `mb-6 h-8 ${placeholderClasses}`, style: { width: '22.875rem' } }), h("div", { class: `mb-2 h-5 ${placeholderClasses}`, style: { width: '23.75rem' } }), h("div", { class: `h-5 ${placeholderClasses}`, style: { width: '11.5rem' } })), h("td", null, h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '11rem' } })), h("td", null, h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '4.875rem' } }))))))));
     }
     static get style() { return AtomicResultTablePlaceholderStyle0; }
 }, [1, "atomic-result-table-placeholder", {

package/dist/atomic/components/atomic-result-text2.js

@@ -1,12 +1,55 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { h, Fragment, Host, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
 import { ResultTemplatesHelpers, HighlightUtils } from '@coveo/headless';
 import { g as getFieldValueCaption } from './field-utils.js';
 import { I as InitializeBindings } from './initialization-utils.js';
 import { g as getStringValueFromResultOrNull } from './result-utils.js';
-import { I as ItemTextFallback, a as ItemTextHighlighted } from './stencil-item-text-highlighted.js';
+import { isArray, isUndefined } from '@coveo/bueno';
 import { R as ResultContext } from './result-template-decorators.js';
 import { d as defineCustomElement$1 } from './atomic-text2.js';
 
+function possiblyWarnOnBadFieldType(field, itemValueRaw, host, logger) {
+    if (isArray(itemValueRaw)) {
+        logger.error(`${host.nodeName.toLowerCase()} cannot be used with multi value field "${field}" with values "${itemValueRaw}".`, host);
+    }
+}
+
+const ItemTextFallback = ({ field, host, logger, defaultValue, item, getProperty }, children) => {
+    const raw = getProperty(item, field);
+    possiblyWarnOnBadFieldType(field, raw, host, logger);
+    if (isUndefined(defaultValue)) {
+        host.remove();
+        return null;
+    }
+    else {
+        return h(Fragment, null, children);
+    }
+};
+
+function renderWithHighlights(value, highlights, highlightString) {
+    const openingDelimiter = '_openingDelimiter_';
+    const closingDelimiter = '_closingDelimiter_';
+    const highlightedValue = highlightString({
+        content: value,
+        openingDelimiter,
+        closingDelimiter,
+        highlights,
+    });
+    return highlightedValue
+        .replace(new RegExp(openingDelimiter, 'g'), '<b>')
+        .replace(new RegExp(closingDelimiter, 'g'), '</b>');
+}
+
+const ItemTextHighlighted = ({ highlightKeywords, highlightString, onError, textValue }) => {
+    try {
+        const highlightedValue = renderWithHighlights(textValue, highlightKeywords, highlightString);
+        // deepcode ignore ReactSetInnerHtml: This is not React code
+        return h(Host, { innerHTML: highlightedValue });
+    }
+    catch (error) {
+        onError(error);
+    }
+};
+
 var __decorate = (undefined && undefined.__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")

package/dist/atomic/components/atomic-result-text2.js.map

@@ -1 +1 @@
-{"file":"atomic-result-text2.js","mappings":";;;;;;;;;;;;;;;;;;;MAoBa,gBAAgB;;;;;;;QAiBG,oBAAe,GAAG,IAAI,CAAC;;;+BAAL,IAAI;;;IAO7C,MAAM;QACX,MAAM,mBAAmB,GAAG,8BAA8B,CACxD,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,KAAK,CACX,CAAC;QAEF,IAAI,mBAAmB,KAAK,IAAI,EAAE;YAChC,QACE,EAAC,gBAAgB,IACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,EACnC,YAAY,EAAE,IAAI,CAAC,OAAO,EAC1B,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,WAAW,EAAE,sBAAsB,CAAC,iBAAiB,IAErD,mBACE,KAAK,EAAE,oBAAoB,CACzB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,OAAQ,EACb,IAAI,CAAC,QAAQ,CAAC,IAAI,CACnB,GACY,CACE,EACnB;SACH;QAED,MAAM,SAAS,GAAG,GAAG,mBAAmB,EAAE,CAAC;QAC3C,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,iBAAiB,CAChE,IAAI,CAAC,MAAM,EACX,GAAG,IAAI,CAAC,KAAK,YAAY,CACW,CAAC;QAEvC,OAAO,IAAI,CAAC,eAAe,IAAI,iBAAiB,IAC9C,EAAC,mBAAmB,IAClB,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,cAAc,CAAC,eAAe,EAC/C,OAAO,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,GACnB,KAEvB,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAChE,CAAC;KACH;;;;;;;;AAlE4B;IAA5B,kBAAkB,EAAE;kDAA4B;AACxB;IAAxB,aAAa,EAAE;gDAAyB;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/search/result-template-components/atomic-result-text/atomic-result-text.tsx"],"sourcesContent":["import {HighlightUtils, Result, ResultTemplatesHelpers} from '@coveo/headless';\nimport {Component, Prop, h, Element, State} from '@stencil/core';\nimport {getFieldValueCaption} from '../../../../utils/field-utils';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {getStringValueFromResultOrNull} from '../../../../utils/result-utils';\nimport {ItemTextFallback} from '../../../common/item-text/stencil-item-text-fallback';\nimport {ItemTextHighlighted} from '../../../common/item-text/stencil-item-text-highlighted';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\nimport {ResultContext} from '../result-template-decorators';\n\n/**\n * The `atomic-result-text` component renders the value of a string result field.\n */\n@Component({\n  tag: 'atomic-result-text',\n  shadow: false,\n})\nexport class AtomicResultText implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  @ResultContext() private result!: Result;\n\n  @Element() private host!: HTMLElement;\n\n  @State() public error!: Error;\n\n  /**\n   * The result field which the component should use.\n   * This will look in the Result object first, and then in the Result.raw object for the fields.\n   * It is important to include the necessary field in the `atomic-search-interface` component.\n   */\n  @Prop({reflect: true}) public field!: string;\n  /**\n   * When this is set to `true`, the component attempts to highlight text based on the highlighting properties provided by the search API response.\n   */\n  @Prop({reflect: true}) public shouldHighlight = true;\n\n  /**\n   * The locale key for the text to display when the configured field has no value.\n   */\n  @Prop({reflect: true}) public default?: string;\n\n  public render() {\n    const resultValueAsString = getStringValueFromResultOrNull(\n      this.result,\n      this.field\n    );\n\n    if (resultValueAsString === null) {\n      return (\n        <ItemTextFallback\n          field={this.field}\n          host={this.host}\n          logger={this.bindings.engine.logger}\n          defaultValue={this.default}\n          item={this.result}\n          getProperty={ResultTemplatesHelpers.getResultProperty}\n        >\n          <atomic-text\n            value={getFieldValueCaption(\n              this.field,\n              this.default!,\n              this.bindings.i18n\n            )}\n          ></atomic-text>\n        </ItemTextFallback>\n      );\n    }\n\n    const textValue = `${resultValueAsString}`;\n    const highlightKeywords = ResultTemplatesHelpers.getResultProperty(\n      this.result,\n      `${this.field}Highlights`\n    ) as HighlightUtils.HighlightKeyword[];\n\n    return this.shouldHighlight && highlightKeywords ? (\n      <ItemTextHighlighted\n        textValue={textValue}\n        highlightKeywords={highlightKeywords}\n        highlightString={HighlightUtils.highlightString}\n        onError={(error) => (this.error = error)}\n      ></ItemTextHighlighted>\n    ) : (\n      getFieldValueCaption(this.field, textValue, this.bindings.i18n)\n    );\n  }\n}\n"],"version":3}
+{"file":"atomic-result-text2.js","mappings":"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","names":[],"sources":["src/components/common/item-text/field-warning.ts","src/components/common/item-text/stencil-item-text-fallback.tsx","src/components/common/item-text/render-highlights.ts","src/components/common/item-text/stencil-item-text-highlighted.tsx","src/components/search/result-template-components/atomic-result-text/atomic-result-text.tsx"],"sourcesContent":["import {isArray} from '@coveo/bueno';\n\nexport function possiblyWarnOnBadFieldType(\n  field: string,\n  itemValueRaw: unknown,\n  host: HTMLElement,\n  logger: Pick<Console, 'error'>\n) {\n  if (isArray(itemValueRaw)) {\n    logger.error(\n      `${host.nodeName.toLowerCase()} cannot be used with multi value field \"${field}\" with values \"${itemValueRaw}\".`,\n      host\n    );\n  }\n}\n","import {isUndefined} from '@coveo/bueno';\nimport {Fragment, FunctionalComponent, VNode, h} from '@stencil/core';\nimport {possiblyWarnOnBadFieldType} from './field-warning';\n\nexport interface ItemTextProps<T> {\n  logger: Pick<Console, 'error'>;\n  host: HTMLElement;\n  defaultValue: string | undefined;\n  field: string;\n  item: T;\n  getProperty: (result: T, property: string) => unknown;\n}\n\nexport const ItemTextFallback = <T,>(\n  {field, host, logger, defaultValue, item, getProperty}: ItemTextProps<T>,\n  children: VNode[]\n): FunctionalComponent<ItemTextProps<T>> | null => {\n  const raw = getProperty(item, field);\n  possiblyWarnOnBadFieldType(field, raw, host, logger);\n\n  if (isUndefined(defaultValue)) {\n    host.remove();\n    return null;\n  } else {\n    return <Fragment>{children}</Fragment>;\n  }\n};\n","export type HighlightKeywords = {\n  offset: number;\n  length: number;\n};\n\nexport type HighlightString = (params: {\n  content: string;\n  openingDelimiter: string;\n  closingDelimiter: string;\n  highlights: HighlightKeywords[];\n}) => string;\n\nexport function renderWithHighlights(\n  value: string,\n  highlights: HighlightKeywords[],\n  highlightString: HighlightString\n) {\n  const openingDelimiter = '_openingDelimiter_';\n  const closingDelimiter = '_closingDelimiter_';\n  const highlightedValue = highlightString({\n    content: value,\n    openingDelimiter,\n    closingDelimiter,\n    highlights,\n  });\n  return highlightedValue\n    .replace(new RegExp(openingDelimiter, 'g'), '<b>')\n    .replace(new RegExp(closingDelimiter, 'g'), '</b>');\n}\n","import {FunctionalComponent, h, Host} from '@stencil/core';\nimport {\n  HighlightKeywords,\n  HighlightString,\n  renderWithHighlights,\n} from './render-highlights';\n\nexport interface ItemTextHighlightedProps {\n  textValue: string;\n  highlightKeywords: HighlightKeywords[];\n  onError: (error: Error) => void;\n  highlightString: HighlightString;\n}\n\nexport const ItemTextHighlighted: FunctionalComponent<\n  ItemTextHighlightedProps\n> = ({highlightKeywords, highlightString, onError, textValue}) => {\n  try {\n    const highlightedValue = renderWithHighlights(\n      textValue,\n      highlightKeywords,\n      highlightString\n    );\n\n    // deepcode ignore ReactSetInnerHtml: This is not React code\n    return <Host innerHTML={highlightedValue}></Host>;\n  } catch (error) {\n    onError(error as Error);\n  }\n};\n","import {HighlightUtils, Result, ResultTemplatesHelpers} from '@coveo/headless';\nimport {Component, Prop, h, Element, State} from '@stencil/core';\nimport {getFieldValueCaption} from '../../../../utils/field-utils';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../../utils/initialization-utils';\nimport {getStringValueFromResultOrNull} from '../../../../utils/result-utils';\nimport {ItemTextFallback} from '../../../common/item-text/stencil-item-text-fallback';\nimport {ItemTextHighlighted} from '../../../common/item-text/stencil-item-text-highlighted';\nimport {Bindings} from '../../atomic-search-interface/atomic-search-interface';\nimport {ResultContext} from '../result-template-decorators';\n\n/**\n * The `atomic-result-text` component renders the value of a string result field.\n */\n@Component({\n  tag: 'atomic-result-text',\n  shadow: false,\n})\nexport class AtomicResultText implements InitializableComponent {\n  @InitializeBindings() public bindings!: Bindings;\n  @ResultContext() private result!: Result;\n\n  @Element() private host!: HTMLElement;\n\n  @State() public error!: Error;\n\n  /**\n   * The result field which the component should use.\n   * This will look in the Result object first, and then in the Result.raw object for the fields.\n   * It is important to include the necessary field in the `atomic-search-interface` component.\n   */\n  @Prop({reflect: true}) public field!: string;\n  /**\n   * When this is set to `true`, the component attempts to highlight text based on the highlighting properties provided by the search API response.\n   */\n  @Prop({reflect: true}) public shouldHighlight = true;\n\n  /**\n   * The locale key for the text to display when the configured field has no value.\n   */\n  @Prop({reflect: true}) public default?: string;\n\n  public render() {\n    const resultValueAsString = getStringValueFromResultOrNull(\n      this.result,\n      this.field\n    );\n\n    if (resultValueAsString === null) {\n      return (\n        <ItemTextFallback\n          field={this.field}\n          host={this.host}\n          logger={this.bindings.engine.logger}\n          defaultValue={this.default}\n          item={this.result}\n          getProperty={ResultTemplatesHelpers.getResultProperty}\n        >\n          <atomic-text\n            value={getFieldValueCaption(\n              this.field,\n              this.default!,\n              this.bindings.i18n\n            )}\n          ></atomic-text>\n        </ItemTextFallback>\n      );\n    }\n\n    const textValue = `${resultValueAsString}`;\n    const highlightKeywords = ResultTemplatesHelpers.getResultProperty(\n      this.result,\n      `${this.field}Highlights`\n    ) as HighlightUtils.HighlightKeyword[];\n\n    return this.shouldHighlight && highlightKeywords ? (\n      <ItemTextHighlighted\n        textValue={textValue}\n        highlightKeywords={highlightKeywords}\n        highlightString={HighlightUtils.highlightString}\n        onError={(error) => (this.error = error)}\n      ></ItemTextHighlighted>\n    ) : (\n      getFieldValueCaption(this.field, textValue, this.bindings.i18n)\n    );\n  }\n}\n"],"version":3}

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

@@ -129,7 +129,7 @@ const AtomicResultsPerPage$1 = /*@__PURE__*/ proxyCustomElement(class AtomicResu
         return this.bindings.i18n.t('results-per-page');
     }
     render() {
-        return (h(PagerGuard, { key: 'b0fe31054e793cf60358ec7b1edbcea450175443', hasError: this.searchStatusState.hasError, hasItems: this.searchStatusState.hasResults, isAppLoaded: this.isAppLoaded }, h("div", { key: '165171b0faa9d0fb0377035828682cd99b862766', class: "flex items-center", role: "toolbar", "aria-label": this.label }, h(Label, { key: 'c210230840e71fd5b58264f3e062901e531dd2e2' }, this.label), h(FieldsetGroup, { key: 'e36ca5f11d489f371d1917b04bb502bef29ca7fc', label: this.label }, h(Choices, { key: '2c3c5a568de2c50b1eb361c68f4acf7311969887', label: this.label, groupName: this.radioGroupName, pageSize: this.resultPerPageState.numberOfResults, choices: this.choices, lang: this.bindings.i18n.language, scrollToTopEvent: this.scrollToTopEvent.emit, setItemSize: this.resultPerPage.set, focusOnFirstResultAfterNextSearch: () => this.bindings.store.state.resultList?.focusOnFirstResultAfterNextSearch(), focusOnNextNewResult: () => this.bindings.store.state.resultList?.focusOnNextNewResult() })))));
+        return (h(PagerGuard, { key: '9bdeae829b99345de8d10beabcfc528ec5e577f9', hasError: this.searchStatusState.hasError, hasItems: this.searchStatusState.hasResults, isAppLoaded: this.isAppLoaded }, h("div", { key: '407cf91584da76c751c7609d040dbfbf9465bba6', class: "flex items-center", role: "toolbar", "aria-label": this.label }, h(Label, { key: '45922224c37ac5300459ba07683485c2326d0017' }, this.label), h(FieldsetGroup, { key: '01f272af73c746043c8737b977dd0e517a25b492', label: this.label }, h(Choices, { key: '9fb01d7ec187e9a872f37d257b0cc13956021aef', label: this.label, groupName: this.radioGroupName, pageSize: this.resultPerPageState.numberOfResults, choices: this.choices, lang: this.bindings.i18n.language, scrollToTopEvent: this.scrollToTopEvent.emit, setItemSize: this.resultPerPage.set, focusOnFirstResultAfterNextSearch: () => this.bindings.store.state.resultList?.focusOnFirstResultAfterNextSearch(), focusOnNextNewResult: () => this.bindings.store.state.resultList?.focusOnNextNewResult() })))));
     }
     static get style() { return AtomicResultsPerPageStyle0; }
 }, [1, "atomic-results-per-page", {

package/dist/atomic/components/atomic-search-box-query-suggestions2.js

@@ -60,7 +60,7 @@ const AtomicSearchBoxQuerySuggestions = /*@__PURE__*/ proxyCustomElement(class A
     }
     render() {
         if (this.error) {
-            return (h("atomic-component-error", { key: '8bf7ca4f0c8c9a4bda7a0af471b2ee3881e65e7b', element: this.host, error: this.error }));
+            return (h("atomic-component-error", { key: '2cca74061385ba775c03563bcd5d3bd89fe24b34', element: this.host, error: this.error }));
         }
     }
     get host() { return this; }

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

@@ -154,7 +154,7 @@ const AtomicSearchBoxRecentQueries = /*@__PURE__*/ proxyCustomElement(class Atom
     }
     render() {
         if (this.error) {
-            return (h("atomic-component-error", { key: '35b831a2e561510f9fe3d15cf956e46d35fb965e', element: this.host, error: this.error }));
+            return (h("atomic-component-error", { key: '201d091a547fafd368881fe3c77d40577c766c98', element: this.host, error: this.error }));
         }
     }
     get host() { return this; }

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

@@ -423,18 +423,18 @@ const AtomicSearchBox$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSearchBox
         if (!this.suggestionManager.suggestions.length) {
             this.registerSearchboxSuggestionEvents();
         }
-        return (h(Host, { key: '2b41f9ebbc7d074c79b4f9ffbf7502644aeda85f' }, this.renderAbsolutePositionSpacer(), [
-            h(SearchBoxWrapper, { key: '51627c6c4604f1f343ced6b3caa5d537f17ee731', disabled: isDisabled, onFocusout: (event) => {
+        return (h(Host, { key: '749e092220c5beb6e02a32ffceff725a47ca96f3' }, this.renderAbsolutePositionSpacer(), [
+            h(SearchBoxWrapper, { key: '5d98dc49bcf840bf0dea10721dfe1a59643ff4ed', disabled: isDisabled, onFocusout: (event) => {
                     if (!isFocusingOut(event)) {
                         return;
                     }
                     this.suggestionManager.clearSuggestions();
                     this.isExpanded = false;
-                } }, this.renderTextBox(searchLabel), h(SubmitButton, { key: '079bcc8068e8c021465cf52eb0e1f25bb3f4746b', bindings: this.bindings, disabled: isDisabled, onClick: () => {
+                } }, this.renderTextBox(searchLabel), h(SubmitButton, { key: '7c5b666de85a5e00c4a6ec119204191194afb18b', bindings: this.bindings, disabled: isDisabled, onClick: () => {
                     this.searchBox.submit();
                     this.suggestionManager.clearSuggestions();
                 } }), this.renderSuggestions()),
-            !this.suggestionManager.suggestions.length && (h("slot", { key: 'e9fba98f79ee57e181ade72c43c907696812a80e' }, h("atomic-search-box-recent-queries", { key: 'e092cce8ec33ee745a7605e1e28bdebcecf042cd' }), h("atomic-search-box-query-suggestions", { key: '54078dfa8f0feef509ec90b6ef030c622609d10e' }))),
+            !this.suggestionManager.suggestions.length && (h("slot", { key: '48f1627d07c58961567b895fb68a1897cbc843b6' }, h("atomic-search-box-recent-queries", { key: '06859756b1889852be45df8055989925574509fc' }), h("atomic-search-box-query-suggestions", { key: 'dd3dc3584aab3547314deb079138bfa836af5b1d' }))),
         ]));
     }
     get host() { return this; }

package/dist/atomic/components/atomic-smart-snippet-answer2.js

@@ -89,7 +89,7 @@ const AtomicSmartSnippetAnswer = /*@__PURE__*/ proxyCustomElement(class AtomicSm
             }), ref: (element) => element && this.bindAnalyticsToLinks(element), part: "answer", class: "margin" })));
     }
     render() {
-        return (h(Host, { key: '73c8cecf140de750245c315c15bd9cc024c03af6' }, this.renderStyle(), this.renderContent()));
+        return (h(Host, { key: '1326f8babb77089bfa824f03fa599a9be3dd642c' }, this.renderStyle(), this.renderContent()));
     }
     get host() { return this; }
     static get style() { return AtomicSmartSnippetAnswerStyle0; }

package/dist/atomic/components/atomic-smart-snippet-collapse-wrapper2.js

@@ -56,11 +56,11 @@ const AtomicSmartSnippetCollapseWrapper = /*@__PURE__*/ proxyCustomElement(class
         return (h("button", { onClick: () => (this.isExpanded = !this.isExpanded), class: "text-primary mb-4 hover:underline", part: this.isExpanded ? 'show-less-button' : 'show-more-button' }, this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more'), h("atomic-icon", { icon: ArrowDown, class: "ml-2 w-3 align-baseline" })));
     }
     render() {
-        return (h(Host, { key: 'b8f301063f02330064468da7a49d94f1755fe037', class: this.fullHeight || !this.shouldRenderButton
+        return (h(Host, { key: 'ea579e57dc0fcd007cf517294e02582803b94cde', class: this.fullHeight || !this.shouldRenderButton
                 ? this.isExpanded
                     ? 'expanded'
                     : ''
-                : 'invisible' }, h("div", { key: 'c47cad3b2d4fc5aa5b094bb6c9c1be7a8a60a1d7', part: "smart-snippet-collapse-wrapper", class: "block overflow-hidden" }, h("slot", { key: '0d89b70ec983b53febd1fcf7abe3f2af62c51d64' })), this.shouldRenderButton && this.renderButton()));
+                : 'invisible' }, h("div", { key: '869c9ced31db1fa805b9df668707e6e21d8677e3', part: "smart-snippet-collapse-wrapper", class: "block overflow-hidden" }, h("slot", { key: 'e00cd4922f3c4442e53d612afb722de091629912' })), this.shouldRenderButton && this.renderButton()));
     }
     get host() { return this; }
     static get style() { return AtomicSmartSnippetCollapseWrapperStyle0; }

package/dist/atomic/components/atomic-smart-snippet-expandable-answer2.js

@@ -87,7 +87,7 @@ const AtomicSmartSnippetExpandableAnswer = /*@__PURE__*/ proxyCustomElement(clas
         return (h("button", { onClick: () => this.isExpanded ? this.collapse.emit() : this.expand.emit(), class: "text-primary mb-4 hover:underline", part: this.isExpanded ? 'show-less-button' : 'show-more-button' }, this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more'), h("atomic-icon", { icon: ArrowDown, class: "ml-2 w-3 align-baseline" })));
     }
     render() {
-        return (h("div", { key: '45ce0b38e5913223969a508a9c36fc7bd67c22e1', class: this.isExpanded ? 'expanded' : '' }, this.renderAnswer(), this.renderButton()));
+        return (h("div", { key: 'b3c33a5746cda5e4e9ca3789c6ada0fc2afdfa4b', class: this.isExpanded ? 'expanded' : '' }, this.renderAnswer(), this.renderButton()));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/atomic/components/atomic-smart-snippet-feedback-modal2.js

@@ -45,9 +45,9 @@ const AtomicSmartSnippetFeedbackModal = /*@__PURE__*/ proxyCustomElement(class A
     }
     render() {
         updateBreakpoints(this.host);
-        return (h("atomic-modal", { key: '5cf1d8a60b5e1a0f1442d1b91d99932b5800b478', fullscreen: false, source: this.source, container: this.host, isOpen: this.isOpen, close: () => this.close(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, h(SmartSnippetFeedbackModalHeader, { key: '4b66d05fa6b314e4bc8d4f078d3b11dd1150c714', i18n: this.bindings.i18n }), h(SmartSnippetFeedbackModalBody, { key: 'a28995cd1fe46db2a92397f2f4e8a8fb381ff7ed', formId: this.formId, onSubmit: (e) => this.sendFeedback(e) }, h(SmartSnippetFeebackModalOptions, { key: 'fc9faf4362a240b0c1abc53db51b0595c2e58d19', i18n: this.bindings.i18n }, smartSnippetFeedbackOptions.map(({ id, localeKey, correspondingAnswer }) => (h(SmartSnippetFeedbackModalOption, { correspondingAnswer: correspondingAnswer, currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, id: id, localeKey: localeKey, onChange: () => {
+        return (h("atomic-modal", { key: '83bc425dcde86fceab88333f67d6fa9198035965', fullscreen: false, source: this.source, container: this.host, isOpen: this.isOpen, close: () => this.close(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, h(SmartSnippetFeedbackModalHeader, { key: '700932a925e55b38cc6917d3a2fc4a5505124b76', i18n: this.bindings.i18n }), h(SmartSnippetFeedbackModalBody, { key: 'cd02ade10d6e45f4776816ba1348c2ce1e0ae78e', formId: this.formId, onSubmit: (e) => this.sendFeedback(e) }, h(SmartSnippetFeebackModalOptions, { key: '1effe1360a380a389a0e6a9a186fd4dd98ae0871', i18n: this.bindings.i18n }, smartSnippetFeedbackOptions.map(({ id, localeKey, correspondingAnswer }) => (h(SmartSnippetFeedbackModalOption, { correspondingAnswer: correspondingAnswer, currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, id: id, localeKey: localeKey, onChange: () => {
                 this.currentAnswer = correspondingAnswer;
-            } })))), h(SmartSnippetFeedbackModalDetails, { key: '89a037be724a072e556a39afdff53c15526eaa31', currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, setDetailsInputRef: (ref) => (this.detailsInputRef = ref) })), h(SmartSnippetFeedbackModalFooter, { key: '067d01b5d56eac0396dc7b41a585f28f80e29c54', formId: this.formId, i18n: this.bindings.i18n, onClick: () => this.close() })));
+            } })))), h(SmartSnippetFeedbackModalDetails, { key: '5d202f8f92e679132c4a4a5d61ab841298f82e7d', currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, setDetailsInputRef: (ref) => (this.detailsInputRef = ref) })), h(SmartSnippetFeedbackModalFooter, { key: 'd89d362b8c06402c76b4f2f823c66633727f930f', formId: this.formId, i18n: this.bindings.i18n, onClick: () => this.close() })));
     }
     close() {
         this.isOpen = false;

package/dist/atomic/components/atomic-smart-snippet-source2.js

@@ -33,7 +33,7 @@ const AtomicSmartSnippetSource = /*@__PURE__*/ proxyCustomElement(class AtomicSm
         }
     }
     render() {
-        return (h(Host, { key: '4dc8d05126261d39232c7d0ea634ea90ddcb4d90' }, h(LinkWithItemAnalytics, { key: '030fa73af4fb26fa2acd56717dc00173688b301e', title: this.source.clickUri, href: this.source.clickUri, className: "block truncate", part: "source-url", attributes: this.anchorAttributes, onSelect: () => this.selectSource.emit(), onBeginDelayedSelect: () => this.beginDelayedSelectSource.emit(), onCancelPendingSelect: () => this.cancelPendingSelectSource.emit() }, this.source.clickUri), h(LinkWithItemAnalytics, { key: '5b114abb56a754597a285e3c6ba4758a6aac3a6b', title: this.source.title, href: this.source.clickUri, attributes: this.anchorAttributes, className: "block", part: "source-title", onSelect: () => this.selectSource.emit(), onBeginDelayedSelect: () => this.beginDelayedSelectSource.emit(), onCancelPendingSelect: () => this.cancelPendingSelectSource.emit() }, h("atomic-result-text", { field: "title", default: "no-title", key: this.source.uniqueId }))));
+        return (h(Host, { key: '5bc7f5fde9a6cfad07def1d2d4b2e3b05dc35c8a' }, h(LinkWithItemAnalytics, { key: '505fda21e13950313b91b6f1a012dae7f4420d7f', title: this.source.clickUri, href: this.source.clickUri, className: "block truncate", part: "source-url", attributes: this.anchorAttributes, onSelect: () => this.selectSource.emit(), onBeginDelayedSelect: () => this.beginDelayedSelectSource.emit(), onCancelPendingSelect: () => this.cancelPendingSelectSource.emit() }, this.source.clickUri), h(LinkWithItemAnalytics, { key: '58cef9bf2d4fc66734c08c44ab129c2c7f9192e5', title: this.source.title, href: this.source.clickUri, attributes: this.anchorAttributes, className: "block", part: "source-title", onSelect: () => this.selectSource.emit(), onBeginDelayedSelect: () => this.beginDelayedSelectSource.emit(), onCancelPendingSelect: () => this.cancelPendingSelectSource.emit() }, h("atomic-result-text", { field: "title", default: "no-title", key: this.source.uniqueId }))));
     }
 }, [0, "atomic-smart-snippet-source", {
         "source": [1040],

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

@@ -114,8 +114,8 @@ const AtomicSortDropdown$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSortDr
         const { hasError, hasResults, firstSearchExecuted } = this.searchStatusState;
         const { bindings: { i18n }, id, } = this;
         return [
-            h(SortGuard, { key: 'c7edd6b76765d787e983d8ef6987f6d96b9a1609', firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: hasResults }, h(SortContainer, { key: '01d4f576f03430102f345b684d9806c821220db6' }, h(SortLabel, { key: '19c612f4a7fb08f99280bfd6747a7cc5b9d0a73c', i18n: i18n, id: id }), h(SortSelect, { key: '3386c33ee148385019a38706b5a20b9866ebf2fc', i18n: i18n, id: id, onSelect: (evt) => this.select(evt) }, this.options.map(({ label, criteria, expression }) => (h(SortOption, { i18n: i18n, label: label, selected: this.sort.isSortedBy(criteria), value: expression })))))),
-            h("slot", { key: '348514a7299aafded22fa1fc9b6fe3b2b14ffb29' }),
+            h(SortGuard, { key: 'b0aa032d52f3ac18b7c9b9cc87ad7c3793118e00', firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: hasResults }, h(SortContainer, { key: '2cb0671502ec77362056821da1fb2d38ec8d9423' }, h(SortLabel, { key: '09fdf55c8185fc2df004ddbfc4722707c0104548', i18n: i18n, id: id }), h(SortSelect, { key: 'f65074c745c1eb4b7ec5ff2bd032f4563b99eba4', i18n: i18n, id: id, onSelect: (evt) => this.select(evt) }, this.options.map(({ label, criteria, expression }) => (h(SortOption, { i18n: i18n, label: label, selected: this.sort.isSortedBy(criteria), value: expression })))))),
+            h("slot", { key: '925fc1459ae2f40b01fa8a0bc7d14e957a99b5b7' }),
         ];
     }
     get host() { return this; }

package/dist/atomic/components/atomic-sort-expression.js

@@ -47,7 +47,7 @@ const AtomicSortExpression$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSort
         const dropdownComponent = 'atomic-sort-dropdown';
         if (!this.host.closest(dropdownComponent)) {
             const error = new Error(`The "${this.host.nodeName.toLowerCase()}" component has to be used inside an ${dropdownComponent} element.`);
-            return (h("atomic-component-error", { key: 'e471a621d6a1d6753663297763b5c3a0a09bb43e', element: this.host, error: error }));
+            return (h("atomic-component-error", { key: '0be2d839110b0d15421e2ea40891390c2818b978', element: this.host, error: error }));
         }
     }
     get host() { return this; }

package/dist/atomic/components/atomic-suggestion-renderer2.js

@@ -73,7 +73,7 @@ const AtomicSuggestionRenderer = /*@__PURE__*/ proxyCustomElement(class AtomicSu
     }
     render() {
         const isButton = !!(this.suggestion.onSelect || this.suggestion.query);
-        return (h(Host, { key: '65b5d84340d508712073522ae4ff19d4274fafeb', class: "contents" }, isButton ? (h("button", { id: this.id, key: this.suggestion.key, part: this.parts, class: this.classes, onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClick?.(e), onMouseOver: (e) => this.onMouseOver?.(e), "data-query": this.suggestion.query, "aria-label": this.ariaLabel(isButton), ref: (el) => {
+        return (h(Host, { key: '5184cc95eba894699448d7ea685032e43a430f91', class: "contents" }, isButton ? (h("button", { id: this.id, key: this.suggestion.key, part: this.parts, class: this.classes, onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClick?.(e), onMouseOver: (e) => this.onMouseOver?.(e), "data-query": this.suggestion.query, "aria-label": this.ariaLabel(isButton), ref: (el) => {
                 if (!el) {
                     return;
                 }

package/dist/atomic/components/atomic-tab-manager.js

@@ -59,7 +59,7 @@ const AtomicTabManager$1 = /*@__PURE__*/ proxyCustomElement(class AtomicTabManag
         });
     }
     render() {
-        return (h(Host, { key: '99cf133406539520a02364ea9a04ec5df9c35332' }, h("atomic-tab-bar", { key: '7f63a5f0a65e8f30bfdbb9cf19943de4e6ccb0d5' }, h("div", { key: 'a1a69340dc6111bb64d18d0b2de01f9c4ef042f1', role: "list", "aria-label": "tab-area", part: "tab-area", class: "border-neutral mb-2 flex w-full flex-row border-b" }, this.tabs.map((tab) => (h("atomic-tab-button", { active: this.tabManagerState.activeTab === tab.name, label: this.bindings.i18n.t(tab.label, {
+        return (h(Host, { key: '918a1b844986e8a731cfa6a48b042b368a29e3b5' }, h("atomic-tab-bar", { key: '7d17f77778b55302505b22be9d5f57d1225e440c' }, h("div", { key: 'dd99c956c13bfb94df8ab9f7243d5cffa6147f03', role: "list", "aria-label": "tab-area", part: "tab-area", class: "border-neutral mb-2 flex w-full flex-row border-b" }, this.tabs.map((tab) => (h("atomic-tab-button", { active: this.tabManagerState.activeTab === tab.name, label: this.bindings.i18n.t(tab.label, {
                 defaultValue: tab.label,
             }), select: () => {
                 if (!tab.tabController.state.isActive) {

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

@@ -11,8 +11,8 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { DEFAULT_MOBILE_BREAKPOINT } from '../../../utils/replace-breakpoint';
 import styles from './atomic-commerce-layout.tw.css';
 /**
- * @alpha
  * The `atomic-commerce-layout` helps organize elements in the commerce page.
+ * @alpha
  */
 let AtomicCommerceLayout = class AtomicCommerceLayout extends CommerceLayoutMixin(LitElement, unsafeCSS(styles)) {
     constructor() {

package/dist/atomic/components/components/commerce/atomic-commerce-no-products/atomic-commerce-no-products.js

@@ -0,0 +1,95 @@
+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 { bindStateToController } from "../../../decorators/bind-state.js";
+import { bindings } from "../../../decorators/bindings.js";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { AriaLiveRegionController } from "../../../utils/accessibility-utils.js";
+import { buildSearch, buildProductListing, } from '@coveo/headless/commerce';
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { renderNoItemsContainer } from '../../common/no-items/container.js';
+import { noItemsGuard } from '../../common/no-items/guard.js';
+import { renderMagnifyingGlass } from '../../common/no-items/magnifying-glass.js';
+import { renderNoItems } from '../../common/no-items/no-items.js';
+import { renderSearchTips } from '../../common/no-items/tips.js';
+import { getSummary } from '../../common/no-items/utils.js';
+import { errorGuard } from "../../../decorators/error-guard.js";
+import { bindingGuard } from "../../../decorators/binding-guard.js";
+/**
+ * @alpha
+ *
+ * The `atomic-commerce-no-products` component displays search tips when there are no products. Any additional content slotted inside of its element will be displayed as well.
+ *
+ * @part no-results - The text indicating that no products were found for the search.
+ * @part search-tips - The search tips to help the user correct the query.
+ * @part highlight - The highlighted query.
+ * @part icon - The magnifying glass icon.
+ *
+ * @slot default - Any additional content slotted inside of its element will be displayed as well.
+ */
+let AtomicCommerceNoProducts = class AtomicCommerceNoProducts extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.ariaMessage = new AriaLiveRegionController(this, 'no-products');
+    }
+    initialize() {
+        const controller = this.bindings.interfaceElement.type === 'search'
+            ? buildSearch(this.bindings.engine)
+            : buildProductListing(this.bindings.engine);
+        this.summary = controller.summary();
+    }
+    render() {
+        const { bindings: { i18n }, } = this;
+        const query = 'query' in this.summaryState ? this.summaryState.query : '';
+        this.ariaMessage.message = getSummary(i18n, query, this.summary.state.hasProducts, 'no-products');
+        return html `${noItemsGuard({
+            isLoading: this.summaryState.isLoading,
+            firstSearchExecuted: this.summaryState.firstRequestExecuted,
+            hasResults: this.summaryState.hasProducts,
+        }, () => renderNoItemsContainer()(html `
+          ${renderMagnifyingGlass()} 
+          ${this.renderNoItems()}
+          ${this.renderSearchTips()}
+        `))}`;
+    }
+    renderNoItems() {
+        return renderNoItems({
+            props: {
+                query: 'query' in this.summaryState ? this.summaryState.query : '',
+                i18n: this.bindings.i18n,
+                i18nKey: 'no-products',
+            },
+        });
+    }
+    renderSearchTips() {
+        return renderSearchTips({
+            props: {
+                i18n: this.bindings.i18n,
+            },
+        });
+    }
+};
+__decorate([
+    state()
+], AtomicCommerceNoProducts.prototype, "bindings", void 0);
+__decorate([
+    bindStateToController('summary'),
+    state()
+], AtomicCommerceNoProducts.prototype, "summaryState", void 0);
+__decorate([
+    state()
+], AtomicCommerceNoProducts.prototype, "error", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicCommerceNoProducts.prototype, "render", null);
+AtomicCommerceNoProducts = __decorate([
+    customElement('atomic-commerce-no-products'),
+    bindings(),
+    withTailwindStyles
+], AtomicCommerceNoProducts);
+export { AtomicCommerceNoProducts };

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

@@ -71,7 +71,7 @@ let AtomicCommerceProductsPerPage = class AtomicCommerceProductsPerPage extends
             },
         })(html `
         <div class="flex items-center">
-          ${renderLabel({ props: {} })(html `${this.label}`)}
+          ${renderLabel()(html `${this.label}`)}
           ${renderFieldsetGroup({
             props: {
                 label: this.label,

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

@@ -11,9 +11,9 @@ import { property, customElement, state } from 'lit/decorators.js';
 import { makeMatchConditions } from '../../common/product-template/product-template-common';
 import { ProductTemplateController } from '../../common/product-template/product-template-controller';
 import '../atomic-commerce-text/atomic-commerce-text';
+import '../atomic-product-text/atomic-product-text';
 import '../atomic-product/atomic-product';
 /**
- * @alpha
  * * A product template determines the format of the query results, depending on the conditions that are defined for each template.
  *
  * A `template` element must be the child of an `atomic-product-template`. Furthermore, an `atomic-commerce-product-list`, `atomic-commerce-recommendation-list`, or `atomic-commerce-search-box-instant-products` must be the parent of each `atomic-product-template`.
@@ -23,6 +23,8 @@ import '../atomic-product/atomic-product';
  * @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/commerce/atomic-product-text/atomic-product-text.js

@@ -0,0 +1,135 @@
+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 { booleanConverter } from "../../../converters/boolean-converter";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { createProductContextController } from "../../../decorators/commerce/product-template-decorators.js";
+import { errorGuard } from "../../../decorators/error-guard";
+import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
+import { ProductTemplatesHelpers, HighlightUtils, } from '@coveo/headless/commerce';
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { getFieldValueCaption } from '../../../utils/field-utils';
+import { renderItemTextFallback } from '../../common/item-text/item-text-fallback.js';
+import { renderItemTextHighlighted } from '../../common/item-text/item-text-highlighted.js';
+import '../atomic-commerce-text/atomic-commerce-text';
+import { getStringValueFromProductOrNull } from '../product-template-component-utils/product-utils.js';
+/**
+ * The `atomic-product-text` component renders the value of a string field for a given product.
+ */
+let AtomicProductText = class AtomicProductText extends InitializeBindingsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether to highlight the string field value.
+         *
+         * Only works if the `field` property is set to `excerpt` or `ec_name`.
+         */
+        this.shouldHighlight = true;
+        this.productController = createProductContextController(this);
+    }
+    initialize() {
+        if (!this.product && this.productController.item) {
+            this.product = this.productController.item;
+        }
+    }
+    get shouldRenderHighlights() {
+        return this.shouldHighlight && this.isFieldSupportedForHighlighting();
+    }
+    isFieldSupportedForHighlighting() {
+        return ['ec_name', 'excerpt'].includes(this.field);
+    }
+    get highlightKeywords() {
+        if (!this.shouldRenderHighlights) {
+            return null;
+        }
+        return ProductTemplatesHelpers.getProductProperty(this.product, this.field === 'ec_name' ? 'nameHighlights' : 'excerptHighlights');
+    }
+    renderFallback() {
+        if (!this.default) {
+            return nothing;
+        }
+        return renderItemTextFallback({
+            props: {
+                field: this.field,
+                host: this,
+                logger: this.bindings.engine.logger,
+                defaultValue: this.default,
+                item: this.product,
+                getProperty: (result, property) => ProductTemplatesHelpers.getProductProperty(result, property),
+            },
+        })(html `
+      <atomic-commerce-text
+        .value=${getFieldValueCaption(this.field, this.default, this.bindings.i18n)}
+      ></atomic-commerce-text>
+    `);
+    }
+    renderProductText(textValue) {
+        const highlightKeywords = this.highlightKeywords;
+        return this.shouldRenderHighlights &&
+            highlightKeywords &&
+            highlightKeywords.length > 0
+            ? renderItemTextHighlighted({
+                props: {
+                    textValue,
+                    highlightKeywords,
+                    highlightString: HighlightUtils.highlightString,
+                    onError: (error) => (this.error = error),
+                },
+            })
+            : html `
+          <atomic-commerce-text
+            .value=${getFieldValueCaption(this.field, textValue, this.bindings.i18n)}
+          ></atomic-commerce-text>
+        `;
+    }
+    renderProductTextValue() {
+        const productValueAsString = getStringValueFromProductOrNull(this.product, this.field);
+        if (productValueAsString === null) {
+            return this.renderFallback();
+        }
+        return this.renderProductText(`${productValueAsString}`);
+    }
+    render() {
+        return html `
+      ${when(this.product && this.field, () => this.renderProductTextValue(), () => nothing)}
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], AtomicProductText.prototype, "field", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        attribute: 'should-highlight',
+        reflect: true,
+        converter: booleanConverter,
+    })
+], AtomicProductText.prototype, "shouldHighlight", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AtomicProductText.prototype, "default", void 0);
+__decorate([
+    state()
+], AtomicProductText.prototype, "product", void 0);
+__decorate([
+    state()
+], AtomicProductText.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicProductText.prototype, "error", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicProductText.prototype, "render", null);
+AtomicProductText = __decorate([
+    bindings(),
+    customElement('atomic-product-text')
+], AtomicProductText);
+export { AtomicProductText };

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

@@ -3,6 +3,7 @@ export { AtomicCommerceBreadbox } from './atomic-commerce-breadbox/atomic-commer
 export { AtomicCommerceDidYouMean } from './atomic-commerce-did-you-mean/atomic-commerce-did-you-mean.js';
 export { AtomicCommerceInterface } from './atomic-commerce-interface/atomic-commerce-interface.js';
 export { AtomicCommerceLayout } from './atomic-commerce-layout/atomic-commerce-layout.js';
+export { AtomicCommerceNoProducts } from './atomic-commerce-no-products/atomic-commerce-no-products.js';
 export { AtomicCommercePager } from './atomic-commerce-pager/atomic-commerce-pager.js';
 export { AtomicCommerceProductList } from './atomic-commerce-product-list/atomic-commerce-product-list.js';
 export { AtomicCommerceProductsPerPage } from './atomic-commerce-products-per-page/atomic-commerce-products-per-page.js';
@@ -16,3 +17,4 @@ export { AtomicCommerceSortDropdown } from './atomic-commerce-sort-dropdown/atom
 export { AtomicCommerceText } from './atomic-commerce-text/atomic-commerce-text.js';
 export { AtomicProduct } from './atomic-product/atomic-product.js';
 export { AtomicProductTemplate } from './atomic-product-template/atomic-product-template.js';
+export { AtomicProductText } from './atomic-product-text/atomic-product-text.js';

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

@@ -4,6 +4,7 @@ export default {
     'atomic-commerce-did-you-mean': async () => await import('./atomic-commerce-did-you-mean/atomic-commerce-did-you-mean.js'),
     'atomic-commerce-interface': async () => await import('./atomic-commerce-interface/atomic-commerce-interface.js'),
     'atomic-commerce-layout': async () => await import('./atomic-commerce-layout/atomic-commerce-layout.js'),
+    'atomic-commerce-no-products': async () => await import('./atomic-commerce-no-products/atomic-commerce-no-products.js'),
     'atomic-commerce-pager': async () => await import('./atomic-commerce-pager/atomic-commerce-pager.js'),
     'atomic-commerce-product-list': async () => await import('./atomic-commerce-product-list/atomic-commerce-product-list.js'),
     'atomic-commerce-products-per-page': async () => await import('./atomic-commerce-products-per-page/atomic-commerce-products-per-page.js'),
@@ -17,4 +18,5 @@ export default {
     'atomic-commerce-text': async () => await import('./atomic-commerce-text/atomic-commerce-text.js'),
     'atomic-product': async () => await import('./atomic-product/atomic-product.js'),
     'atomic-product-template': async () => await import('./atomic-product-template/atomic-product-template.js'),
+    'atomic-product-text': async () => await import('./atomic-product-text/atomic-product-text.js'),
 };

package/dist/atomic/components/components/commerce/product-template-component-utils/error.js

@@ -0,0 +1,6 @@
+export class FieldValueIsNaNError extends Error {
+    constructor(field, value) {
+        super(`Could not parse "${value}" from field "${field}" as a number.`);
+        this.name = 'FieldValueIsNaNError';
+    }
+}