@coveo/atomic 3.34.0-pre.00dc0c9faa → 3.34.0-pre.0b99d4077d

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

@@ -8,6 +8,15 @@ import { NumberValue, Schema } from '@coveo/bueno';
 import { buildContext, buildProductListing, buildSearch, } from '@coveo/headless/commerce';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { renderBreadcrumbButton } from "../../common/breadbox/breadcrumb-button";
+import { renderBreadcrumbClearAll } from "../../common/breadbox/breadcrumb-clear-all";
+import { renderBreadcrumbContainer } from "../../common/breadbox/breadcrumb-container";
+import { renderBreadcrumbContent } from "../../common/breadbox/breadcrumb-content";
+import { renderBreadcrumbShowLess } from "../../common/breadbox/breadcrumb-show-less";
+import { renderBreadcrumbShowMore } from "../../common/breadbox/breadcrumb-show-more";
+import { formatHumanReadable } from "../../common/facets/numeric-facet/formatter";
+import { defaultCurrencyFormatter, defaultNumberFormatter, } from "../../common/formats/format-common";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
 import { bindStateToController } from "../../../decorators/bind-state";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
@@ -16,14 +25,6 @@ import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js"
 import { FocusTargetController } from "../../../utils/accessibility-utils";
 import { parseDate } from "../../../utils/date-utils";
 import { getFieldValueCaption } from "../../../utils/field-utils";
-import { renderBreadcrumbButton } from '../../common/breadbox/breadcrumb-button';
-import { renderBreadcrumbClearAll } from '../../common/breadbox/breadcrumb-clear-all';
-import { renderBreadcrumbContainer } from '../../common/breadbox/breadcrumb-container';
-import { renderBreadcrumbContent } from '../../common/breadbox/breadcrumb-content';
-import { renderBreadcrumbShowLess } from '../../common/breadbox/breadcrumb-show-less';
-import { renderBreadcrumbShowMore } from '../../common/breadbox/breadcrumb-show-more';
-import { formatHumanReadable } from '../../common/facets/numeric-facet/formatter';
-import { defaultCurrencyFormatter, defaultNumberFormatter, } from '../../common/formats/format-common';
 import styles from './atomic-commerce-breadbox.tw.css';
 /**
  * The `atomic-commerce-breadbox` component creates breadcrumbs that display a summary of the currently active facet values.
@@ -42,7 +43,7 @@ import styles from './atomic-commerce-breadbox.tw.css';
  */
 let AtomicCommerceBreadbox = class AtomicCommerceBreadbox extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.lastRemovedBreadcrumbIndex = 0;
         this.numberOfBreadcrumbs = 0;
         this.numberOfCollapsedBreadcrumbs = 0;
@@ -96,9 +97,15 @@ let AtomicCommerceBreadbox = class AtomicCommerceBreadbox extends LitElement {
                 }
             }
         };
+        new ValidatePropsController(this, () => ({ pathLimit: this.pathLimit }), new Schema({
+            pathLimit: new NumberValue({
+                default: 3,
+                min: 1,
+                required: false,
+            }),
+        }));
     }
     initialize() {
-        this.validateProps();
         if (this.bindings.interfaceElement.type === 'product-listing') {
             this.searchOrListing = buildProductListing(this.bindings.engine);
         }
@@ -115,31 +122,9 @@ let AtomicCommerceBreadbox = class AtomicCommerceBreadbox extends LitElement {
         this.breadcrumbShowMoreFocus = new FocusTargetController(this, this.bindings);
         this.breadcrumbShowLessFocus = new FocusTargetController(this, this.bindings);
     }
-    willUpdate(changedProperties) {
-        if (changedProperties.has('pathLimit')) {
-            this.validateProps();
-        }
-    }
     updated() {
         this.adaptBreadcrumbs();
     }
-    validateProps() {
-        try {
-            new Schema({
-                pathLimit: new NumberValue({
-                    default: 3,
-                    min: 1,
-                    required: false,
-                }),
-            }).validate({
-                pathLimit: this.pathLimit,
-            });
-        }
-        catch (error) {
-            this.error = error;
-            return;
-        }
-    }
     disconnectedCallback() {
         this.resizeObserver?.disconnect();
     }

package/dist/atomic/components/components/common/atomic-layout-section/layout.js

@@ -1,4 +1,4 @@
-import { findSection, sectionSelector } from './sections';
+import { findSection, sectionSelector } from './atomic-layout-section-utils';
 export function makeDesktopQuery(mobileBreakpoint) {
     return `only screen and (min-width: ${mobileBreakpoint})`;
 }

package/dist/atomic/components/components/common/layout/display-options.js

@@ -1,4 +1,4 @@
-import { containsSections } from './sections';
+import { containsSections, } from './item-layout-sections';
 function getDisplayClass(display) {
     switch (display) {
         case 'grid':

package/dist/atomic/components/components/common/layout/{sections.js → item-layout-sections.js}

@@ -1,4 +1,4 @@
-import { isElementNode } from '../../../utils/utils';
+import { isElementNode } from "../../../utils/utils";
 const resultSectionTags = new Set([
     'atomic-result-section-visual',
     'atomic-result-section-badges',

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

@@ -2,7 +2,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/sections';
+import { isResultSectionNode } from '../layout/item-layout-sections';
 export function getTemplateNodeType(node) {
     if (isResultSectionNode(node)) {
         return 'section';

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/insight/atomic-insight-interface/analytics-config.js

@@ -0,0 +1,31 @@
+import { augmentAnalyticsWithAtomicVersion, augmentWithExternalMiddleware, getNextAnalyticsConfig, } from '../../common/interface/analytics-config';
+export function getAnalyticsConfig(searchEngineConfig, enabled) {
+    switch (searchEngineConfig.analytics?.analyticsMode) {
+        case 'next':
+            return getNextAnalyticsConfig(searchEngineConfig, enabled);
+        default:
+            return getLegacyAnalyticsConfig(searchEngineConfig, enabled);
+    }
+}
+function getLegacyAnalyticsConfig(searchEngineConfig, enabled) {
+    const analyticsClientMiddleware = (event, payload) => augmentAnalytics(event, payload, searchEngineConfig);
+    const defaultConfiguration = {
+        analyticsClientMiddleware,
+        enabled,
+        documentLocation: document.location.href,
+        ...(document.referrer && { originLevel3: document.referrer }),
+    };
+    if (searchEngineConfig.analytics) {
+        return {
+            ...defaultConfiguration,
+            ...searchEngineConfig.analytics,
+            analyticsClientMiddleware,
+        };
+    }
+    return defaultConfiguration;
+}
+function augmentAnalytics(event, payload, config) {
+    let result = augmentWithExternalMiddleware(event, payload, config);
+    result = augmentAnalyticsWithAtomicVersion(result);
+    return result;
+}

package/dist/atomic/components/components/insight/atomic-insight-interface/atomic-insight-interface.js

@@ -0,0 +1,258 @@
+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 { VERSION as HEADLESS_VERSION } from '@coveo/headless'; // TODO - KIT-4886 import from @coveo/headless/insight
+import { buildInsightEngine, buildResultsPerPage as buildInsightResultsPerPage, loadFieldActions, } from '@coveo/headless/insight';
+import { provide } from '@lit/context';
+import i18next from 'i18next';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { InterfaceController, } from "../../common/interface/interface-controller";
+import { bindingsContext } from "../../context/bindings-context";
+import { booleanConverter } from "../../../converters/boolean-converter";
+import { errorGuard } from "../../../decorators/error-guard";
+import { watch } from "../../../decorators/watch";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
+import { markParentAsReady } from "../../../utils/init-queue";
+import { getAnalyticsConfig } from './analytics-config.js';
+import { createInsightStore } from './store.js';
+const FirstInsightRequestExecutedFlag = 'firstInsightRequestExecuted';
+/**
+ * The `atomic-insight-interface` component is the parent to all other atomic insight components in an insight page.
+ * It handles the headless insight engine and localization configurations.
+ *
+ * @slot default - The default slot where you can add child components to the interface.
+ * @slot full-search - A slot for components that should be positioned absolutely in the top-right corner.
+ */
+let AtomicInsightInterface = class AtomicInsightInterface extends ChildrenUpdateCompleteMixin(LitElement) {
+    constructor() {
+        super();
+        this.bindings = {};
+        this.initialized = false;
+        this.interfaceController = new InterfaceController(this, 'CoveoAtomic', HEADLESS_VERSION);
+        // TODO - KIT-4994: add disableAnalytics prop
+        // TODO - KIT-4994: deprecate in favor of disableAnalytics
+        // TODO - KIT-4990: remove
+        /**
+         * Whether analytics should be enabled.
+         */
+        this.analytics = true;
+        /**
+         * The service insight interface language.
+         */
+        this.language = 'en';
+        /**
+         * The language assets path. By default, this will be a relative URL pointing to `./lang`.
+         *
+         * Example: "/mypublicpath/languages"
+         *
+         */
+        this.languageAssetsPath = './lang';
+        /**
+         * The icon assets path. By default, this will be a relative URL pointing to `./assets`.
+         *
+         * Example: "/mypublicpath/icons"
+         *
+         */
+        this.iconAssetsPath = './assets';
+        /**
+         * A list of non-default fields to include in the query results.
+         *
+         * Specify the property as an array using a JSON string representation:
+         * ```html
+         * <atomic-insight-interface fields-to-include='["fieldA", "fieldB"]'></atomic-insight-interface>
+         * ```
+         */
+        this.fieldsToInclude = [];
+        /**
+         * The number of results per page. By default, this is set to `5`.
+         */
+        this.resultsPerPage = 5;
+        this.handleInitialization = (event) => {
+            this.interfaceController.onComponentInitializing(event);
+        };
+        this.store = createInsightStore();
+        const { promise, resolve } = Promise.withResolvers();
+        this.i18Initialized = promise;
+        this.i18n = i18next.createInstance(undefined, resolve);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.store.setLoadingFlag(FirstInsightRequestExecutedFlag);
+        this.addEventListener('atomic/initializeComponent', this.handleInitialization);
+    }
+    /**
+     * Initializes the connection with the headless insight engine using options for `accessToken` (required), `organizationId` (required), `environment` (defaults to `prod`), and `renewAccessToken`.
+     */
+    initialize(options) {
+        return this.internalInitialization(() => this.initEngine(options));
+    }
+    /**
+     * Initializes the connection with an already preconfigured headless insight engine.
+     */
+    initializeWithInsightEngine(engine) {
+        return this.internalInitialization(() => {
+            this.engine = engine;
+        });
+    }
+    /**
+     * Executes the first search and logs the interface load event to analytics, after initializing connection to the headless search engine.
+     */
+    async executeFirstSearch() {
+        if (!this.interfaceController.engineIsCreated(this.engine)) {
+            return;
+        }
+        if (!this.initialized) {
+            console.error('You have to wait until the "initialize" promise is fulfilled before executing a search.', this);
+            return;
+        }
+        this.engine.executeFirstSearch();
+    }
+    // TODO - KIT-4994 / KIT-4990: adjust
+    toggleAnalytics() {
+        this.interfaceController.onAnalyticsChange();
+    }
+    updateIconAssetsPath() {
+        this.store.state.iconAssetsPath = this.iconAssetsPath;
+    }
+    updateLanguage() {
+        return this.interfaceController.onLanguageChange();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('atomic/initializeComponent', this.handleInitialization);
+    }
+    render() {
+        return html `
+      <slot name="full-search"></slot>
+      <slot></slot>
+    `;
+    }
+    getBindings() {
+        return {
+            engine: this.engine,
+            i18n: this.i18n,
+            store: this.store,
+            interfaceElement: this,
+            // TODO - KIT-4839: Remove once atomic-insight-layout migration is complete.
+            createStyleElement: () => {
+                const styleTag = document.createElement('style');
+                return styleTag;
+            },
+            // TODO - KIT-4839: Remove once atomic-insight-layout migration is complete.
+            createScriptElement: () => {
+                const scriptTag = document.createElement('script');
+                return scriptTag;
+            },
+        };
+    }
+    // TODO - KIT-4994 / KIT-4990: adjust
+    initEngine(options) {
+        const analyticsConfig = getAnalyticsConfig(options, this.analytics);
+        try {
+            this.engine = buildInsightEngine({
+                configuration: {
+                    ...options,
+                    analytics: analyticsConfig,
+                },
+                loggerOptions: {
+                    level: this.logLevel,
+                },
+            });
+        }
+        catch (error) {
+            this.error = error;
+            throw error;
+        }
+    }
+    initResultsPerPage() {
+        if (!this.interfaceController.engineIsCreated(this.engine)) {
+            return;
+        }
+        buildInsightResultsPerPage(this.bindings.engine, {
+            initialState: { numberOfResults: this.resultsPerPage },
+        });
+    }
+    async internalInitialization(initEngine) {
+        await Promise.all([
+            this.interfaceController.onInitialization(initEngine),
+            this.i18Initialized,
+        ]);
+        this.updateLanguage();
+        this.bindings = this.getBindings();
+        markParentAsReady(this);
+        this.initResultsPerPage();
+        this.registerFieldsToInclude();
+        this.store.unsetLoadingFlag(FirstInsightRequestExecutedFlag);
+        await this.getUpdateComplete();
+        this.initialized = true;
+    }
+    // TODO - (v4) KIT-5008: Make private
+    registerFieldsToInclude() {
+        if (this.fieldsToInclude.length) {
+            this.engine.dispatch(loadFieldActions(this.engine).registerFieldsToInclude([
+                ...this.fieldsToInclude,
+            ]));
+        }
+    }
+};
+AtomicInsightInterface.styles = css`:host{position:relative}slot[name=full-search]{display:block;position:absolute;right:0;top:0}`;
+__decorate([
+    state(),
+    provide({ context: bindingsContext })
+], AtomicInsightInterface.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightInterface.prototype, "error", void 0);
+__decorate([
+    property({ type: Object })
+], AtomicInsightInterface.prototype, "engine", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        converter: booleanConverter,
+        reflect: true,
+    })
+], AtomicInsightInterface.prototype, "analytics", void 0);
+__decorate([
+    property({ type: Object })
+], AtomicInsightInterface.prototype, "i18n", void 0);
+__decorate([
+    property({ type: String, attribute: 'log-level', reflect: true })
+], AtomicInsightInterface.prototype, "logLevel", void 0);
+__decorate([
+    property({ type: String, attribute: 'language', reflect: true })
+], AtomicInsightInterface.prototype, "language", void 0);
+__decorate([
+    property({ type: String, attribute: 'language-assets-path', reflect: true })
+], AtomicInsightInterface.prototype, "languageAssetsPath", void 0);
+__decorate([
+    property({ type: String, attribute: 'icon-assets-path', reflect: true })
+], AtomicInsightInterface.prototype, "iconAssetsPath", void 0);
+__decorate([
+    property({ type: Array, attribute: 'fields-to-include' })
+], AtomicInsightInterface.prototype, "fieldsToInclude", void 0);
+__decorate([
+    property({ type: Number, attribute: 'results-per-page', reflect: true })
+], AtomicInsightInterface.prototype, "resultsPerPage", void 0);
+__decorate([
+    watch('analytics')
+], AtomicInsightInterface.prototype, "toggleAnalytics", null);
+__decorate([
+    watch('iconAssetsPath')
+], AtomicInsightInterface.prototype, "updateIconAssetsPath", null);
+__decorate([
+    watch('language')
+], AtomicInsightInterface.prototype, "updateLanguage", null);
+__decorate([
+    errorGuard()
+], AtomicInsightInterface.prototype, "render", null);
+AtomicInsightInterface = __decorate([
+    customElement('atomic-insight-interface'),
+    withTailwindStyles
+], AtomicInsightInterface);
+export { AtomicInsightInterface };

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

@@ -1,4 +1,4 @@
-import { findSection, sectionSelector, } from '../../common/atomic-layout-section/sections';
+import { findSection, sectionSelector, } from '../../common/atomic-layout-section/atomic-layout-section-utils';
 const tabsSelector = 'atomic-insight-tabs';
 const refineModalSelector = 'atomic-insight-refine-modal';
 const searchBoxSelector = 'atomic-insight-search-box';

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

@@ -1 +1,2 @@
-export {};
+// Auto-generated file
+export { AtomicInsightInterface } from './atomic-insight-interface/atomic-insight-interface.js';

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

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

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 };