@coveo/atomic 3.30.0-pre.e8e95b2dbe → 3.30.1-pre.227ba19df3

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

@@ -0,0 +1,171 @@
+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 { ProductTemplatesHelpers } from '@coveo/headless/commerce';
+import { html, LitElement, nothing, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { bindings } from "../../../decorators/bindings";
+import { createProductContextController } from "../../../decorators/commerce/product-template-decorators";
+import { errorGuard } from "../../../decorators/error-guard";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { filterProtocol } from '../../../utils/xss-utils';
+import { renderButton } from '../../common/button';
+import styles from './atomic-product-children.tw.css';
+import '../atomic-commerce-text/atomic-commerce-text';
+import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom";
+import { multiClassMap, tw } from "../../../directives/multi-class-map";
+/**
+ * The `atomic-product-children` component renders a section that allows the user to select a nested product (e.g., a color variant of a given product).
+ *
+ * This component leverages the [product grouping](https://docs.coveo.com/en/l78i2152/) feature.
+ * @alpha
+ */
+let AtomicProductChildren = class AtomicProductChildren extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.productController = createProductContextController(this);
+        this.childProducts = [];
+        this.activeChildId = '';
+        /**
+         * The i18n key for the localized label to display for the product children section.
+         *
+         * Set this to an empty string if you do not want to render the label at all.
+         */
+        this.label = 'available-in';
+        /**
+         * The child product field to use to render product children images. Fields in the `additionalFields` property of the child products are supported.
+         *
+         * This field should be defined on each child product, and its value should be an image URL (or an array of image URLs, in which case the component will use the first one in the array).
+         */
+        this.field = 'ec_thumbnails';
+        /**
+         * The fallback image URL to use when the specified `field` is not defined on a given child product, or when its value is invalid.
+         */
+        this.fallback = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"%3E%3Crect width="50" height="50" fill="none" stroke="gray"%3E%3C/rect%3E%3C/svg%3E';
+    }
+    initialize() {
+        const product = this.productController.item;
+        if (product) {
+            this.activeChildId = product.permanentid;
+            this.childProducts = product.children ?? [];
+        }
+    }
+    onSelectChild(child) {
+        this.activeChildId = child.permanentid;
+        this.dispatchEvent(new CustomEvent('atomic/selectChildProduct', {
+            detail: { child },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    getImageUrl(child) {
+        const value = ProductTemplatesHelpers.getProductProperty(child, this.field);
+        if (typeof value === 'string') {
+            return filterProtocol(value);
+        }
+        if (Array.isArray(value) && typeof value[0] === 'string') {
+            return filterProtocol(value[0]);
+        }
+        return filterProtocol(this.fallback);
+    }
+    renderChild(child) {
+        const childName = child.ec_name ?? '';
+        const buttonClasses = tw({
+            'product-child': true,
+            'box-border rounded border border-primary': child.permanentid === this.activeChildId,
+        });
+        return html `
+      <button
+        class="${multiClassMap(buttonClasses)}"
+        title=${childName}
+        @keypress=${(event) => event.key === 'Enter' && this.onSelectChild(child)}
+        @mouseenter=${() => this.onSelectChild(child)}
+        @touchstart=${(event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            this.onSelectChild(child);
+        }}
+      >
+        <img
+          class="aspect-square p-1"
+          src=${this.getImageUrl(child)}
+          alt=${childName}
+          loading="lazy"
+        />
+      </button>
+    `;
+    }
+    renderLabel() {
+        return html `
+      <div class="text-neutral-dark my-2 font-semibold">
+        <atomic-commerce-text
+          .value=${this.bindings.i18n.t(this.label)}
+        ></atomic-commerce-text>
+      </div>
+    `;
+    }
+    /**
+     * Gets the total count of items, including the parent item itself.
+     *
+     * The calculation subtracts the number of child items from the total number of children,
+     * then adds 1 to include the parent item in the count. This is necessary because
+     * `children.length` only represents the number of children of the parent, while
+     * the parent is also included in the `atomic-product-children` component.
+     *
+     * @returns The total count of items, including the parent.
+     */
+    get count() {
+        return (this.productController.item?.totalNumberOfChildren -
+            this.productController.item?.children.length +
+            1);
+    }
+    render() {
+        if (this.childProducts.length === 0) {
+            return html `${nothing}`;
+        }
+        return html `
+      ${this.label.trim() !== '' ? this.renderLabel() : nothing}
+      <div class="children-container">
+        ${this.childProducts.map((child) => this.renderChild(child))}
+        ${renderButton({
+            props: {
+                style: 'text-primary',
+                class: 'product-child plus-button',
+            },
+        })(html `+${this.count}`)}
+      </div>
+    `;
+    }
+};
+AtomicProductChildren.styles = unsafeCSS(styles);
+__decorate([
+    state()
+], AtomicProductChildren.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicProductChildren.prototype, "childProducts", void 0);
+__decorate([
+    state()
+], AtomicProductChildren.prototype, "activeChildId", void 0);
+__decorate([
+    property()
+], AtomicProductChildren.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], AtomicProductChildren.prototype, "field", void 0);
+__decorate([
+    property({ reflect: true })
+], AtomicProductChildren.prototype, "fallback", void 0);
+__decorate([
+    errorGuard()
+], AtomicProductChildren.prototype, "render", null);
+AtomicProductChildren = __decorate([
+    customElement('atomic-product-children'),
+    bindings(),
+    injectStylesForNoShadowDOM,
+    withTailwindStyles
+], AtomicProductChildren);
+export { AtomicProductChildren };

package/dist/atomic/components/components/commerce/atomic-product-children/atomic-product-children.tw.css.js

@@ -0,0 +1,2 @@
+const css = `atomic-product-children .children-container{flex-wrap:wrap;display:flex}atomic-product-children .children-container .plus-button,.display-grid atomic-product-children .children-container .product-child:nth-child(n+6){display:none}.display-grid atomic-product-children .children-container .product-child:nth-child(6)~.plus-button{display:block}.display-grid atomic-product-children .children-container .product-child:nth-child(6):last-child~.plus-button{display:none}`;
+export default [css];

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

@@ -0,0 +1,81 @@
+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 { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { bindingGuard } from "../../../decorators/binding-guard.js";
+import { bindings } from "../../../decorators/bindings.js";
+import { createProductContextController } from "../../../decorators/commerce/product-template-decorators.js";
+import { errorGuard } from "../../../decorators/error-guard.js";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { defaultNumberFormatter, } from '../../common/formats/format-common.js';
+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() {
+        super(...arguments);
+        this.productController = createProductContextController(this);
+        this.formatter = defaultNumberFormatter;
+        this.setFormat = (event) => {
+            const customEvent = event;
+            customEvent.preventDefault();
+            customEvent.stopPropagation();
+            this.formatter = customEvent.detail;
+        };
+    }
+    createRenderRoot() {
+        return this;
+    }
+    initialize() {
+        this.addEventListener('atomic/numberFormat', this.setFormat);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('atomic/numberFormat', this.setFormat);
+    }
+    get value() {
+        const product = this.productController.item;
+        if (!product) {
+            return null;
+        }
+        const value = parseValue(product, this.field);
+        if (value === null) {
+            return null;
+        }
+        return this.formatter(value, this.bindings.i18n.languages);
+    }
+    render() {
+        return html `${when(this.value !== null, () => html `${this.value}`)}`;
+    }
+};
+__decorate([
+    state()
+], AtomicProductNumericFieldValue.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicProductNumericFieldValue.prototype, "error", void 0);
+__decorate([
+    property({ reflect: true })
+], AtomicProductNumericFieldValue.prototype, "field", void 0);
+__decorate([
+    state()
+], AtomicProductNumericFieldValue.prototype, "formatter", void 0);
+__decorate([
+    errorGuard(),
+    bindingGuard()
+], AtomicProductNumericFieldValue.prototype, "render", null);
+AtomicProductNumericFieldValue = __decorate([
+    customElement('atomic-product-numeric-field-value'),
+    bindings(),
+    withTailwindStyles
+], AtomicProductNumericFieldValue);
+export { AtomicProductNumericFieldValue };

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

@@ -13,6 +13,8 @@ import { ProductTemplateController } from '../../common/product-template/product
 import '../atomic-commerce-text/atomic-commerce-text';
 import '../atomic-product-text/atomic-product-text';
 import '../atomic-product/atomic-product';
+import '../atomic-product-children/atomic-product-children';
+import '../atomic-product-numeric-field-value/atomic-product-numeric-field-value';
 /**
  * * A product template determines the format of the query results, depending on the conditions that are defined for each template.
  *

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

@@ -8,6 +8,7 @@ export { AtomicCommerceNoProducts } from './atomic-commerce-no-products/atomic-c
 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';
+export { AtomicCommerceQueryError } from './atomic-commerce-query-error/atomic-commerce-query-error.js';
 export { AtomicCommerceQuerySummary } from './atomic-commerce-query-summary/atomic-commerce-query-summary.js';
 export { AtomicCommerceRecommendationInterface } from './atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.js';
 export { AtomicCommerceRecommendationList } from './atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.js';
@@ -20,5 +21,7 @@ export { AtomicCommerceSearchBoxRecentQueries } from './atomic-commerce-search-b
 export { AtomicCommerceSortDropdown } from './atomic-commerce-sort-dropdown/atomic-commerce-sort-dropdown.js';
 export { AtomicCommerceText } from './atomic-commerce-text/atomic-commerce-text.js';
 export { AtomicProduct } from './atomic-product/atomic-product.js';
+export { AtomicProductChildren } from './atomic-product-children/atomic-product-children.js';
+export { AtomicProductNumericFieldValue } from './atomic-product-numeric-field-value/atomic-product-numeric-field-value.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

@@ -9,6 +9,7 @@ export default {
     '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'),
+    'atomic-commerce-query-error': async () => await import('./atomic-commerce-query-error/atomic-commerce-query-error.js'),
     'atomic-commerce-query-summary': async () => await import('./atomic-commerce-query-summary/atomic-commerce-query-summary.js'),
     'atomic-commerce-recommendation-interface': async () => await import('./atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.js'),
     'atomic-commerce-recommendation-list': async () => await import('./atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.js'),
@@ -21,6 +22,8 @@ export default {
     'atomic-commerce-sort-dropdown': async () => await import('./atomic-commerce-sort-dropdown/atomic-commerce-sort-dropdown.js'),
     '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-children': async () => await import('./atomic-product-children/atomic-product-children.js'),
+    'atomic-product-numeric-field-value': async () => await import('./atomic-product-numeric-field-value/atomic-product-numeric-field-value.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/common/atomic-icon/atomic-icon.js

@@ -11,7 +11,7 @@ import { guard } from 'lit/directives/guard.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { errorGuard } from "../../../decorators/error-guard";
-import { injectStylesForNoShadowDOM } from "../../../decorators/light-dom";
+import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom";
 import { watch } from "../../../decorators/watch";
 import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
 import { parseAssetURL } from "../../../utils/asset-path-utils";

package/dist/atomic/components/components/common/atomic-icon/atomic-icon.tw.css.js

@@ -1,2 +1,2 @@
-const css = `@layer components{atomic-icon{fill:currentColor;aspect-ratio:1;height:auto;display:inline-block;@supports not (aspect-ratio:1/1){&{height:auto}}&>svg{aspect-ratio:1;width:100%;height:auto;max-height:100%}}}`;
+const css = `@layer components{atomic-icon{fill:currentColor;aspect-ratio:1;height:auto;display:inline-block;@supports not (aspect-ratio:1 / 1){&{height:auto}}&>svg{aspect-ratio:1;width:100%;height:auto;max-height:100%}}}`;
 export default [css];

package/dist/atomic/components/components/common/query-error/container.js

@@ -0,0 +1,4 @@
+import { html } from 'lit';
+export const renderQueryErrorContainer = () => (children) => {
+    return html `<div class="p-8 text-center">${children}</div>`;
+};

package/dist/atomic/components/components/common/query-error/description.js

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+import { getErrorDescriptionFromErrorType } from './utils';
+export const renderQueryErrorDescription = ({ props, }) => {
+    const { errorType, i18n, url, organizationId } = props;
+    return html `
+    <p part="description" class="text-neutral-dark mt-2.5 text-lg">
+      ${getErrorDescriptionFromErrorType(i18n, organizationId, url, errorType)}
+    </p>
+  `;
+};

package/dist/atomic/components/components/common/query-error/details.js

@@ -0,0 +1,11 @@
+import { html, nothing } from 'lit';
+export const renderQueryErrorDetails = ({ props }) => {
+    if (!props.show) {
+        return nothing;
+    }
+    return html `<pre
+    part="error-info"
+    class="border-neutral bg-neutral-light mt-8 rounded border p-3 text-left whitespace-pre-wrap"
+  ><code>${JSON.stringify(props.error, null, 2)}</code></pre
+  >`;
+};