@coveo/atomic 3.45.0 → 3.46.0

package/dist/atomic/components/components/search/atomic-quickview-modal/atomic-quickview-modal.js

@@ -0,0 +1,342 @@
+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 "../../common/atomic-modal/atomic-modal";
+import { buildInteractiveResult, } from '@coveo/headless';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ATOMIC_MODAL_EXPORT_PARTS } from "../../common/atomic-modal/export-parts";
+import { renderButton } from "../../common/button";
+import { renderIconButton } from "../../common/icon-button";
+import { renderLinkWithItemAnalytics } from "../../common/item-link/item-link";
+import { renderQuickviewSidebar } from "../result-template-components/atomic-quickview-sidebar/atomic-quickview-sidebar";
+import { renderQuickviewIframe } from "../result-template-components/quickview-iframe/quickview-iframe";
+import { buildQuickviewPreviewBar } from "../result-template-components/quickview-preview-bar/quickview-preview-bar";
+import { getWordsHighlights, HIGHLIGHT_PREFIX, } from "../result-template-components/quickview-word-highlight/quickview-word-highlight";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+const CloseIcon = "<svg viewBox=\"0 0 22 22\"><g transform=\"matrix(.7071 -.7071 .7071 .7071 -3.142 11)\"><path d=\"m9-3.4h2v26.9h-2z\"/><path d=\"m-3.4 9h26.9v2h-26.9z\"/></g></svg>";
+/**
+ * The `atomic-quickview-modal` component is the modal opened when clicking a quickview button.
+ * Do not use this component directly; use `atomic-quickview` instead.
+ *
+ * @slot header - The header slot containing the result title and close button.
+ * @slot body - The body slot containing the quickview sidebar and iframe content.
+ * @slot footer - The footer slot containing the navigation buttons.
+ *
+ * @part backdrop - The transparent backdrop hiding the content behind the modal.
+ * @part container - The modal's outermost container with the outline and background.
+ * @part header-wrapper - The wrapper around the header.
+ * @part header - The header at the top of the modal.
+ * @part header-ruler - The horizontal ruler underneath the header.
+ * @part body-wrapper - The wrapper around the body.
+ * @part body - The body of the modal, between the header and the footer.
+ * @part footer-wrapper - The wrapper with a shadow or background color around the footer.
+ * @part footer - The footer at the bottom of the modal.
+ * @part quickview-modal-header-icon - The close icon of the modal.
+ * @part quickview-modal-header-title - The title of the modal.
+ *
+ * @event atomic/quickview/next - Dispatched when the next button is clicked.
+ * @event atomic/quickview/previous - Dispatched when the previous button is clicked.
+ */
+let AtomicQuickviewModal = class AtomicQuickviewModal extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.highlightKeywords = {
+            highlightNone: false,
+            keywords: {},
+        };
+        this.minimizeSidebar = false;
+        this.words = {};
+        this.highlightStyleSheets = new Map();
+    }
+    initialize() {
+        this.minimizeSidebar = this.bindings.store.isMobile();
+    }
+    /**
+     * Resets the modal to its initial state.
+     */
+    async reset() {
+        this.highlightKeywords = {
+            highlightNone: false,
+            keywords: {},
+        };
+        this.minimizeSidebar = false;
+        this.iframeRef = undefined;
+        this.content = undefined;
+        this.result = undefined;
+        this.interactiveResult = undefined;
+        this.highlightStyleSheets.clear();
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('highlightKeywords')) {
+            this.handleHighlightsScripts();
+        }
+    }
+    renderHeader() {
+        if (!this.result) {
+            return html `<div slot="header"></div>`;
+        }
+        this.interactiveResult = buildInteractiveResult(this.bindings.engine, {
+            options: { result: this.result },
+        });
+        return html `
+      <div slot="header" class="flex w-full items-center justify-between">
+        ${renderLinkWithItemAnalytics({
+            props: {
+                href: this.result.clickUri,
+                onSelect: () => this.interactiveResult?.select(),
+                onBeginDelayedSelect: () => this.interactiveResult?.beginDelayedSelect(),
+                onCancelPendingSelect: () => this.interactiveResult?.cancelPendingSelect(),
+                className: 'truncate',
+                part: 'quickview-modal-header-title',
+            },
+        })(html `${this.result.title}`)}
+        ${renderIconButton({
+            props: {
+                partPrefix: 'quickview-modal-header',
+                icon: CloseIcon,
+                onClick: () => this.onClose(),
+                ariaLabel: this.bindings.i18n.t('close'),
+                style: 'text-transparent',
+                title: this.bindings.i18n.t('close'),
+            },
+        })}
+      </div>
+    `;
+    }
+    renderBody() {
+        return html `
+      <div slot="body" class="grid h-full grid-cols-[min-content_auto]">
+        <div
+          class="h-full overflow-y-auto"
+          style="background-color: var(--atomic-neutral-light)"
+        >
+          ${renderQuickviewSidebar({
+            props: {
+                words: this.words,
+                i18n: this.bindings.i18n,
+                highlightKeywords: this.highlightKeywords,
+                onHighlightKeywords: (highlight) => {
+                    this.highlightKeywords = highlight;
+                },
+                minimized: this.minimizeSidebar,
+                onMinimize: (minimize) => {
+                    this.minimizeSidebar = minimize;
+                },
+            },
+        })}
+        </div>
+        <div class="relative overflow-auto">
+          ${renderQuickviewIframe({
+            props: {
+                title: this.result?.title ??
+                    this.bindings.i18n.t('preview-modal-title'),
+                logger: this.logger,
+                src: this.quickviewSrc,
+                sandbox: this.sandbox,
+                uniqueIdentifier: this.quickviewUniqueIdentifier,
+                content: this.content,
+                onSetIframeRef: async (ref) => {
+                    this.iframeRef = ref;
+                    this.words = getWordsHighlights(this.termsToHighlight, this.iframeRef);
+                    this.handleHighlightsScripts();
+                },
+            },
+        })}
+          ${buildQuickviewPreviewBar(this.words, this.highlightKeywords, this.iframeRef)}
+        </div>
+      </div>
+    `;
+    }
+    renderFooter() {
+        return html `
+      <div slot="footer" class="flex items-center gap-2">
+        ${renderButton({
+            props: {
+                class: 'p-2',
+                style: 'square-neutral',
+                onClick: () => {
+                    this.dispatchEvent(new CustomEvent('atomic/quickview/previous', { bubbles: true }));
+                },
+                disabled: this.current === 1,
+                text: this.bindings.i18n.t('quickview-previous'),
+            },
+        })(nothing)}
+        <p class="text-center text-on-background">
+          ${this.bindings.i18n.t('showing-results-of', {
+            first: this.current,
+            total: this.total,
+        })}
+        </p>
+        ${renderButton({
+            props: {
+                class: 'p-2',
+                style: 'square-neutral',
+                onClick: () => {
+                    this.dispatchEvent(new CustomEvent('atomic/quickview/next', { bubbles: true }));
+                },
+                disabled: this.current === this.total,
+                text: this.bindings.i18n.t('quickview-next'),
+            },
+        })(nothing)}
+      </div>
+    `;
+    }
+    onClose() {
+        this.content = undefined;
+        this.result = undefined;
+        this.modalCloseCallback?.();
+    }
+    get isOpen() {
+        return !!this.content && !!this.result;
+    }
+    get logger() {
+        return this.bindings.engine.logger;
+    }
+    get quickviewSrc() {
+        return this.bindings.engine.state.resultPreview?.contentURL;
+    }
+    enableHighlights() {
+        this.removeDisableHighlightStyleSheet();
+    }
+    enableHighlightsSpecificKeyword(identifier) {
+        this.removeDisableHighlightStyleSheet(identifier);
+    }
+    disableHighlights() {
+        this.createDisableHighlightStyleSheet();
+    }
+    disableHighlightsSpecificKeyword(identifier) {
+        this.createDisableHighlightStyleSheet(identifier);
+    }
+    removeDisableHighlightStyleSheet(identifier) {
+        const doc = this.iframeRef?.contentWindow?.document;
+        if (!doc) {
+            return;
+        }
+        const key = identifier ?? '';
+        const sheet = this.highlightStyleSheets.get(key);
+        if (!sheet) {
+            return;
+        }
+        doc.adoptedStyleSheets = doc.adoptedStyleSheets.filter((s) => s !== sheet);
+        this.highlightStyleSheets.delete(key);
+    }
+    createDisableHighlightStyleSheet(identifier) {
+        const doc = this.iframeRef?.contentWindow?.document;
+        if (!doc) {
+            return;
+        }
+        const key = identifier ?? '';
+        if (this.highlightStyleSheets.has(key)) {
+            return;
+        }
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(`[id^="${HIGHLIGHT_PREFIX}${identifier ? `:${identifier}` : ''}"] {
+        background-color: inherit !important;
+        color: inherit !important;
+      }`);
+        this.highlightStyleSheets.set(key, sheet);
+        doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, sheet];
+    }
+    get termsToHighlight() {
+        const flatPhrasesToHighlight = {};
+        const phrasesToHighlight = this.bindings.engine.state.search.response.phrasesToHighlight;
+        Object.entries(phrasesToHighlight).forEach(([phrase, keywords]) => {
+            flatPhrasesToHighlight[phrase] = Object.entries(keywords).flatMap(([keywordEntry, keywordStemming]) => {
+                return [keywordEntry, ...keywordStemming];
+            });
+        });
+        return {
+            ...this.bindings.engine.state.search.response.termsToHighlight,
+            ...flatPhrasesToHighlight,
+        };
+    }
+    get requestId() {
+        return this.bindings.engine.state.search.requestId;
+    }
+    get quickviewUniqueIdentifier() {
+        if (!this.result?.uniqueId) {
+            return this.requestId;
+        }
+        return this.result.uniqueId + this.requestId;
+    }
+    handleHighlightsScripts() {
+        if (!this.highlightKeywords.highlightNone) {
+            this.enableHighlights();
+        }
+        else {
+            this.disableHighlights();
+        }
+        Object.values(this.highlightKeywords.keywords).forEach((word) => {
+            if (word.enabled) {
+                this.enableHighlightsSpecificKeyword(word.indexIdentifier);
+            }
+            else {
+                this.disableHighlightsSpecificKeyword(word.indexIdentifier);
+            }
+        });
+    }
+    render() {
+        return html `
+      <atomic-modal
+        .fullscreen=${this.bindings.store.isMobile()}
+        class="atomic-quickview-modal"
+        .isOpen=${this.isOpen}
+        .close=${() => this.onClose()}
+        exportparts=${ATOMIC_MODAL_EXPORT_PARTS}
+      >
+        ${this.renderHeader()} ${this.renderBody()} ${this.renderFooter()}
+      </atomic-modal>
+    `;
+    }
+};
+AtomicQuickviewModal.styles = css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */.atomic-quickview-modal{&::part(backdrop){grid-template-columns:1fr max(80vw,30rem) 1fr}&::part(body),&::part(footer),&::part(header){max-width:100%}&::part(footer){display:flex;justify-content:center}&::part(body-wrapper){height:100%;overflow:hidden;padding:calc(var(--spacing, .25rem)*0)}&::part(body){height:100%}&::part(backdrop){grid-template-rows:1fr 100% 3fr}&::part(header-wrapper){background-color:var(--atomic-neutral-light)}a{color:var(--atomic-on-background);&:focus-visible,&:hover{color:var(--atomic-primary);text-decoration:underline}&:focus{outline:none}&:visited{color:var(--atomic-visited)}}}`;
+__decorate([
+    state()
+], AtomicQuickviewModal.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicQuickviewModal.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicQuickviewModal.prototype, "highlightKeywords", void 0);
+__decorate([
+    state()
+], AtomicQuickviewModal.prototype, "minimizeSidebar", void 0);
+__decorate([
+    state()
+], AtomicQuickviewModal.prototype, "words", void 0);
+__decorate([
+    property({ type: String, attribute: false })
+], AtomicQuickviewModal.prototype, "content", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], AtomicQuickviewModal.prototype, "result", void 0);
+__decorate([
+    property({ type: Number })
+], AtomicQuickviewModal.prototype, "current", void 0);
+__decorate([
+    property({ type: Number })
+], AtomicQuickviewModal.prototype, "total", void 0);
+__decorate([
+    property({ type: String })
+], AtomicQuickviewModal.prototype, "sandbox", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], AtomicQuickviewModal.prototype, "modalCloseCallback", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicQuickviewModal.prototype, "render", null);
+AtomicQuickviewModal = __decorate([
+    customElement('atomic-quickview-modal'),
+    bindings(),
+    withTailwindStyles
+], AtomicQuickviewModal);
+export { AtomicQuickviewModal };

package/dist/atomic/components/components/search/atomic-quickview-modal/highlight-keywords.js

@@ -0,0 +1 @@
+export {};

package/dist/atomic/components/components/search/atomic-rating-facet/atomic-rating-facet.js

@@ -308,7 +308,7 @@ let AtomicRatingFacet = AtomicRatingFacet_1 = class AtomicRatingFacet extends Li
     }
     render() {
         if (this.searchStatusState.hasError || !this.facet.state.enabled) {
-            return html `${nothing}`;
+            return nothing;
         }
         if (!this.searchStatusState.firstSearchExecuted) {
             return html `${renderFacetPlaceholder({
@@ -319,7 +319,7 @@ let AtomicRatingFacet = AtomicRatingFacet_1 = class AtomicRatingFacet extends Li
             })}`;
         }
         if (!this.valuesToRender.length) {
-            return html `${nothing}`;
+            return nothing;
         }
         return renderFacetContainer()(html `
       ${this.renderHeader()}

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

@@ -9,6 +9,7 @@ import { Schema, StringValue } from '@coveo/bueno';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { resultComponentClass, } from "../../common/item-list/item-list-common";
 import { CustomRenderController } from "../../common/layout/custom-render-controller";
 import { ItemLayoutController } from "../../common/layout/item-layout-controller";
@@ -165,9 +166,10 @@ let AtomicResult = AtomicResult_1 = class AtomicResult extends ChildrenUpdateCom
       <div class=${resultComponentClass}>
         <div
           class="result-root ${this.itemLayoutController.getCombinedClasses().join(' ')}"
-          .innerHTML=${this.getContentHTML()}
-        ></div>
-        <div class="link-container" .innerHTML=${this.getLinkHTML()}></div>
+        >
+          ${unsafeHTML(this.getContentHTML())}
+        </div>
+        <div class="link-container">${unsafeHTML(this.getLinkHTML())}</div>
       </div>
     `;
     }

package/dist/atomic/components/components/search/atomic-result-children-template/atomic-result-children-template.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { ResultTemplatesHelpers } from '@coveo/headless';
-import { html, LitElement, nothing } from 'lit';
+import { LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ResultTemplateController } from "../../common/result-templates/result-template-controller";
 import { makeMatchConditions } from "../../common/template-controller/template-utils";
@@ -37,7 +37,7 @@ let AtomicResultChildrenTemplate = class AtomicResultChildrenTemplate extends Li
         this.resultTemplateController.matchConditions = makeMatchConditions(this.mustMatch, this.mustNotMatch, ResultTemplatesHelpers);
     }
     render() {
-        return html `${nothing}`;
+        return nothing;
     }
     /**
      * Gets the appropriate result template based on conditions applied.

package/dist/atomic/components/components/search/atomic-result-icon/atomic-result-icon.js

@@ -62,7 +62,7 @@ let AtomicResultIcon = class AtomicResultIcon extends LitElement {
     }
     render() {
         if (this.resultController.hasError) {
-            return html `${nothing}`;
+            return nothing;
         }
         return when(this.icon, () => this.renderIcon(), () => html `<slot>${this.renderIcon()}</slot>`);
     }

package/dist/atomic/components/components/search/atomic-result-link/atomic-result-link.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { isUndefined } from '@coveo/bueno';
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import { getAttributesFromLinkSlotContent } from "../../common/item-link/attributes-slot";
@@ -20,6 +20,7 @@ import { SlotsForNoShadowDOMMixin, } from "../../../mixins/slots-for-no-shadow-d
 import { buildCustomEvent } from "../../../utils/event-utils";
 import { buildStringTemplateFromResult } from "../../../utils/result-utils";
 import "../atomic-result-text/atomic-result-text";
+import styles from './atomic-result-link.tw.css';
 /**
  * The `atomic-result-link` component automatically transforms a search result title into a clickable link that points to the original item.
  * @slot default - Lets you display alternative content inside the link
@@ -75,7 +76,6 @@ let AtomicResultLink = class AtomicResultLink extends LightDomMixin(SlotsForNoSh
                     onCancelPendingSelect: () => interactiveResult.cancelPendingSelect(),
                     attributes: this.linkAttributes,
                     stopPropagation: this.stopPropagation,
-                    className: 'link-style',
                     onInitializeLink: (cleanupCallback) => {
                         if (this.removeLinkEventHandlers) {
                             this.removeLinkEventHandlers();
@@ -84,15 +84,15 @@ let AtomicResultLink = class AtomicResultLink extends LightDomMixin(SlotsForNoSh
                     },
                 },
             })(html `
-          ${this.renderDefaultSlotContent(html `<atomic-result-text
+        ${this.renderDefaultSlotContent(html `<atomic-result-text
             field="title"
             default="no-title"
           ></atomic-result-text>`)}
-        `);
+      `);
         })}`;
     }
 };
-AtomicResultLink.styles = css``;
+AtomicResultLink.styles = styles;
 __decorate([
     property({ reflect: true, attribute: 'href-template' })
 ], AtomicResultLink.prototype, "hrefTemplate", void 0);

package/dist/atomic/components/components/search/atomic-result-link/atomic-result-link.tw.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+const styles = css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */atomic-result-link a{color:var(--atomic-on-background);text-decoration:none;&:focus-visible,&:hover{color:var(--atomic-primary);text-decoration:underline}&:focus{outline:none}&:visited{color:var(--atomic-visited)}}`;
+export default styles;

package/dist/atomic/components/components/search/atomic-result-multi-value-text/atomic-result-multi-value-text.js

@@ -35,7 +35,7 @@ let AtomicResultMultiValueText = AtomicResultMultiValueText_1 = class AtomicResu
         super();
         /**
          * The maximum number of field values to display.
-         * If there are _n_ more values than the specified maximum, the last displayed value will be "_n_ more...".
+         * If there are `n` more values than the specified maximum, the last displayed value will be "`n` more...".
          */
         this.maxValuesToDisplay = 3;
         /**

package/dist/atomic/components/components/search/atomic-result-printable-uri/atomic-result-printable-uri.js

@@ -159,7 +159,7 @@ let AtomicResultPrintableUri = AtomicResultPrintableUri_1 = class AtomicResultPr
                 attributes: this.linkAttributes,
                 ref: shouldSetTarget
                     ? (el) => {
-                        if (el) {
+                        if (el instanceof HTMLAnchorElement) {
                             this.expandedPartElement = el;
                         }
                     }

package/dist/atomic/components/components/search/atomic-result-section-bottom-metadata/atomic-result-section-bottom-metadata.js

@@ -12,7 +12,7 @@ import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
  *
  * Behavior:
  * * Has a maximum height of two lines.
- * ** We recommend that you use `atomic-result-fields-list` to ensure that the fields in this section don’t overflow.
+ * ** We recommend that you use `atomic-result-fields-list` to ensure that the fields in this section don't overflow.
  * * Exposes the `--line-height` variable so child elements can adjust to the current line height.
  * * Has a defined CSS `color` property for text.
  * * Has a font weight.

package/dist/atomic/components/components/search/atomic-result-template/atomic-result-template.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { ResultTemplatesHelpers } from '@coveo/headless';
-import { html, LitElement, nothing } from 'lit';
+import { LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ResultTemplateController } from "../../common/result-templates/result-template-controller";
 import { makeMatchConditions } from "../../common/template-controller/template-utils";
@@ -45,7 +45,7 @@ let AtomicResultTemplate = class AtomicResultTemplate extends LitElement {
         this.resultTemplateController.matchConditions = makeMatchConditions(this.mustMatch, this.mustNotMatch, ResultTemplatesHelpers);
     }
     render() {
-        return html `${nothing}`;
+        return nothing;
     }
     /**
      * Gets the appropriate result template based on conditions applied.