@coveo/atomic 3.34.0-pre.e940bd417f → 3.34.0-pre.ebcb0fe404

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: 'e6f4618bff3c867c11f3abc7d0d8916bed9d9490', element: this.host, error: error }));
+            return (h("atomic-component-error", { key: '2e02e5bfb81dbf81e48bf860248f6252d9b611f1', element: this.host, error: error }));
         }
     }
     get host() { return this; }

package/dist/atomic/components/atomic-stencil-facet-date-input.js

@@ -66,13 +66,13 @@ const FacetDateInput = /*@__PURE__*/ proxyCustomElement(class FacetDateInput ext
         // Fallback for Safari < 14.1, date with format yyyy-mm-dd over 1400 (API limit)
         const pattern = '^(1[4-9]\\d{2}|2\\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$';
         const range = this.rangeGetter();
-        return (h("form", { key: '60acc60ec8b30e3eaa4d0e2e1426732925ff352c', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
+        return (h("form", { key: 'a6dac71a63ec89c9d2db4a2193c314457e7259e3', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: 'a43bd6b7f3ae352a7592e9de3390e5b8e180cb29', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: '7908bdd17fb8d035d2b75ab02417b13cd1516bd2', id: `${this.facetId}_start`, part: "input-start", type: "date", ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": startAria, placeholder: placeholder, pattern: pattern, required: true,
+            } }, h("label", { key: '0245d6a038e4c839d6589fdef9605c8d0cd89266', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: 'f1d063272bb432fe5f3d1d0868df4a11f0d9cb5e', id: `${this.facetId}_start`, part: "input-start", type: "date", ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": startAria, placeholder: placeholder, pattern: pattern, required: true,
             // API/Index minimum supported date
-            min: this.min || this.formattedDateValue('1401-01-01'), max: this.end ? this.formattedDateValue(this.end) : this.max, value: this.formattedDateValue(range?.start), onInput: (e) => (this.start = parseDate(e.target.value).toDate()) }), h("label", { key: 'd5d35be72e99ae7488fae004a61682d597ab7d7f', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: 'b6b30c327c78cecef22c0b6eeec8cbf29b1d711a', id: `${this.facetId}_end`, part: "input-end", type: "date", ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": endAria, placeholder: placeholder, pattern: pattern, required: true, min: this.formattedDateValue(this.start) || this.min, max: this.max, value: this.formattedDateValue(range?.end), onInput: (e) => (this.end = parseDate(e.target.value).toDate()) }), h(Button, { key: 'd0b34163e43a90cf982155bf7eeb315212c9e1d2', style: "outline-primary", type: "submit", part: "input-apply-button", class: "col-span-2 truncate p-2.5", ariaLabel: applyAria, text: apply })));
+            min: this.min || this.formattedDateValue('1401-01-01'), max: this.end ? this.formattedDateValue(this.end) : this.max, value: this.formattedDateValue(range?.start), onInput: (e) => (this.start = parseDate(e.target.value).toDate()) }), h("label", { key: 'e99a0845acd01318f12fab4a0769071ea2cb0a22', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: '184d0c3a6517439f943709b5d27936ab8f3fb0f7', id: `${this.facetId}_end`, part: "input-end", type: "date", ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": endAria, placeholder: placeholder, pattern: pattern, required: true, min: this.formattedDateValue(this.start) || this.min, max: this.max, value: this.formattedDateValue(range?.end), onInput: (e) => (this.end = parseDate(e.target.value).toDate()) }), h(Button, { key: '7ac776c5c63e63a141ab9d89d493ba1d50fec2eb', style: "outline-primary", type: "submit", part: "input-apply-button", class: "col-span-2 truncate p-2.5", ariaLabel: applyAria, text: apply })));
     }
 }, [0, "atomic-stencil-facet-date-input", {
         "bindings": [16],

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

@@ -80,7 +80,7 @@ const AtomicSuggestionRenderer = /*@__PURE__*/ proxyCustomElement(class AtomicSu
     }
     render() {
         const isButton = !!(this.suggestion.onSelect || this.suggestion.query);
-        return (h(Host, { key: 'c332ae13efeac08cbbad4bdb4d86f15f3400ea60', 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: '7dffaca3c750d3d48a18b9c068cfd0d03b9604f8', 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: '0c04e8919712039a5c273b61e2e5babb21ed4354' }, h("atomic-tab-bar", { key: '13dde2d89d24822933497d3f0c283deee6144b82' }, h("div", { key: 'ff96e6a1c77b0e2579839a81c20dfbaeb0db54a3', 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: '7b157f6de05ddb410305bb19055b6e59918cb7b0' }, h("atomic-tab-bar", { key: '4794ec3402090dc945ed6049fed67369cfa8bc52' }, h("div", { key: '25cf89a90b4ae88c45ac2c5c5a90bc0a4221036f', 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-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/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/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 };