@coveo/atomic 3.45.1 → 3.46.1

package/dist/atomic/components/components/search/result-template-components/atomic-quickview-sidebar/keywords.js

@@ -0,0 +1,110 @@
+import { html } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { renderFieldsetGroup } from "../../../common/fieldset-group";
+import { renderIconButton } from "../../../common/icon-button";
+import { multiClassMap, tw } from "../../../../directives/multi-class-map";
+const Add = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" aria-label=\"add\" role=\"img\" style=\"vertical-align: text-bottom;\"><circle cx=\"16\" cy=\"16\" r=\"13.5\" stroke=\"currentColor\"></circle><path d=\"M9 16H23M16 9V23\" stroke=\"currentColor\" stroke-linecap=\"round\"></path></svg>";
+const ArrowDown = "<svg viewBox=\"0 0 12.6 7.2\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.421 7.04c-.3 0-.5-.1-.7-.3l-4.6-4.6-4.6 4.6c-.4.4-1 .4-1.4 0s-.4-1 0-1.4l5.2-5.2c.4-.4 1.2-.4 1.6 0l5.2 5.2c.4.4.4 1 0 1.4-.2.2-.4.3-.7.3\" transform=\"matrix(-1 0 0 -1 12.366 7.086)\"/></svg>";
+const ArrowUp = "<svg viewBox=\"0 0 12.6 7.2\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.3 7.04c-.3 0-.5-.1-.7-.3l-4.6-4.6-4.6 4.6c-.4.4-1 .4-1.4 0s-.4-1 0-1.4l5.2-5.2c.4-.4 1.2-.4 1.6 0l5.2 5.2c.4.4.4 1 0 1.4-.2.2-.4.3-.7.3\"/></svg>";
+const Remove = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" aria-label=\"remove\" role=\"img\" style=\"vertical-align: text-bottom;\"><circle cx=\"16\" cy=\"16\" r=\"13.5\" stroke=\"currentColor\"></circle><path d=\"M9 16H23\" stroke=\"currentColor\" stroke-linecap=\"round\"></path></svg>";
+export const identifierKeywordsSection = 'coveo-quickview-sidebar-keywords';
+export const renderKeywords = ({ props }) => {
+    return html `
+    <div id=${identifierKeywordsSection}>
+      ${repeat(Object.values(props.words), (keyword) => keyword.text, (keyword) => {
+        const wordIsEnabled = !props.highlightKeywords.highlightNone &&
+            (props.highlightKeywords.keywords[keyword.text] === undefined ||
+                props.highlightKeywords.keywords[keyword.text].enabled === true);
+        const keywordContainerClasses = tw({
+            'bg-background border-neutral flex grow items-center overflow-x-auto rounded-lg border': true,
+            'pointer-events-none opacity-50': !wordIsEnabled,
+        });
+        const navigationLabel = props.i18n.t('quickview-navigate-keywords', {
+            occurrences: keyword.occurrences,
+            keyword: keyword.text,
+        });
+        const formattedOccurrences = new Intl.NumberFormat(props.i18n.language, {
+            notation: 'compact',
+        }).format(keyword.occurrences);
+        const toggleLabel = props.i18n.t('quickview-remove-word');
+        const ariaPressed = (!wordIsEnabled ? 'true' : 'false');
+        const tabIndex = props.highlightKeywords.highlightNone ? -1 : 0;
+        return html `
+            <div class="my-4 flex w-100 items-center justify-between gap-x-2">
+              <div class=${multiClassMap(keywordContainerClasses)}>
+                <div
+                  class="flex grow items-center border-r p-4"
+                  aria-hidden="true"
+                >
+                  <div
+                    class="mr-2 h-5 w-5 flex-none"
+                    style=${styleMap({ backgroundColor: keyword.color })}
+                  ></div>
+                  <div class="mr-2 grow whitespace-nowrap">
+                    ${keyword.text}
+                  </div>
+                  <div class="flex-none">
+                    (${formattedOccurrences})
+                  </div>
+                </div>
+                ${renderFieldsetGroup({ props: { label: navigationLabel } })(html `
+                  <div class="flex px-2">
+                    ${renderIconButton({
+            props: {
+                partPrefix: 'sidebar-next',
+                icon: ArrowDown,
+                disabled: !wordIsEnabled,
+                style: 'text-transparent',
+                class: 'border-0',
+                ariaLabel: props.i18n.t('next'),
+                title: props.i18n.t('next'),
+                onClick: () => keyword.navigateForward(),
+            },
+        })}
+                    ${renderIconButton({
+            props: {
+                partPrefix: 'sidebar-previous',
+                icon: ArrowUp,
+                disabled: !wordIsEnabled,
+                style: 'text-transparent',
+                class: 'border-0',
+                ariaLabel: props.i18n.t('previous'),
+                title: props.i18n.t('previous'),
+                onClick: () => keyword.navigateBackward(),
+            },
+        })}
+                  </div>
+                `)}
+              </div>
+              ${renderIconButton({
+            props: {
+                partPrefix: 'sidebar-remove-word',
+                class: props.highlightKeywords.highlightNone
+                    ? 'pointer-events-none opacity-50'
+                    : '',
+                tabIndex,
+                ariaPressed,
+                style: 'text-transparent',
+                icon: wordIsEnabled ? Remove : Add,
+                ariaLabel: toggleLabel,
+                onClick: () => {
+                    props.onHighlightKeywords({
+                        ...props.highlightKeywords,
+                        keywords: {
+                            ...props.highlightKeywords.keywords,
+                            [keyword.text]: {
+                                enabled: !wordIsEnabled,
+                                indexIdentifier: keyword.indexIdentifier,
+                            },
+                        },
+                    });
+                },
+            },
+        })}
+            </div>
+          `;
+    })}
+    </div>
+  `;
+};

package/dist/atomic/components/components/search/result-template-components/atomic-quickview-sidebar/minimize-button.js

@@ -0,0 +1,23 @@
+import { html } from 'lit';
+import { renderIconButton } from "../../../common/icon-button";
+const MinimizeIcon = "<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" aria-label=\"menu\" role=\"img\" style=\"vertical-align: text-bottom;\"><line x1=\"6.5\" y1=\"10.5\" x2=\"25.5\" y2=\"10.5\" stroke=\"currentColor\" stroke-linecap=\"round\"></line><line x1=\"6.5\" y1=\"22.5\" x2=\"25.5\" y2=\"22.5\" stroke=\"currentColor\" stroke-linecap=\"round\"></line><line x1=\"10.5\" y1=\"16.5\" x2=\"21.5\" y2=\"16.5\" stroke=\"currentColor\" stroke-linecap=\"round\"></line></svg>";
+import { identifierKeywordsSection } from './keywords';
+export const renderMinimizeButton = ({ props, }) => {
+    const className = props.minimized ? 'w-fit' : 'ml-auto w-fit';
+    return renderIconButton({
+        props: {
+            partPrefix: 'sidebar-minimize',
+            icon: MinimizeIcon,
+            style: 'text-transparent',
+            title: props.i18n.t('quickview-toggle-navigation'),
+            ariaLabel: props.i18n.t('quickview-toggle-navigation'),
+            onClick: () => props.onMinimize(!props.minimized),
+            badge: props.highlightKeywords && props.minimized
+                ? html `<slot>${props.wordsLength}</slot>`
+                : undefined,
+            class: className,
+            ariaExpanded: (!props.minimized).toString(),
+            ariaControls: identifierKeywordsSection,
+        },
+    });
+};

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

@@ -0,0 +1,92 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { ref } from 'lit/directives/ref.js';
+import { eventPromise } from "../../../../utils/event-utils";
+const documentIdentifierInIframe = 'CoveoDocIdentifier';
+const writeDocument = (documentWriter, content) => {
+    documentWriter.open();
+    documentWriter.write(content);
+    documentWriter.close();
+    if (documentWriter.scrollingElement) {
+        documentWriter.scrollingElement.scrollTop = 0;
+    }
+};
+const currentResultAlreadyWrittenToDocument = (documentWriter, uniqueIdentifier) => {
+    const currentDocIdentifier = documentWriter.getElementById(documentIdentifierInIframe);
+    return currentDocIdentifier?.textContent === uniqueIdentifier;
+};
+const ensureSameResultIsNotOverwritten = (documentWriter, uniqueIdentifier) => {
+    const docIdentifier = documentWriter.createElement('div');
+    docIdentifier.style.display = 'none';
+    docIdentifier.setAttribute('aria-hidden', 'true');
+    docIdentifier.id = documentIdentifierInIframe;
+    docIdentifier.textContent = uniqueIdentifier;
+    documentWriter.body.appendChild(docIdentifier);
+};
+const warnAboutLimitedUsageQuickview = (logger) => {
+    logger?.warn('Quickview initialized in restricted mode due to incompatible sandboxing environment. Keywords hit navigation will be disabled.');
+};
+// We can't access iframe.contentDocument until the element is added to the parent doc
+//
+// There are only 2 safe ways to get a callback when the iframe is added:
+//   - Adding a MutationObserver on the parent document. Works, but very verbose, needs to be de-registered, and could interfere with other frameworks
+//   - Adding a load event listener on the iframe. This is technically after the iframe loads its src, but since src is about:blank, it boils down to what we want.
+const iframeConnectedEvent = async (iframe, logger) => {
+    if (iframe.isConnected) {
+        // The iframe is already connected.
+        // There would likely be no load event to catch anyway.
+        return;
+    }
+    // There could be edge cases where the iframe never loads, so add a timeout to gracefully handle errors.
+    const timeoutMs = 1000;
+    await eventPromise(iframe, 'load', timeoutMs).catch(() => {
+        logger?.warn('Quickview timed out waiting for the iframe to load.');
+    });
+};
+export const renderQuickviewIframe = ({ props }) => {
+    const { title, onSetIframeRef, uniqueIdentifier, content, sandbox, src, logger, } = props;
+    // When a document is written with document.open/document.write/document.close
+    // it is not synchronous and the content of the iframe is only available to be queried at the end of the current call stack.
+    // This adds a "wait" (setTimeout 0) before calling the `onSetIframeRef` from the parent modal quickview
+    const waitForIframeContentToBeWritten = () => {
+        return new Promise((resolve) => setTimeout(resolve));
+    };
+    const handleRef = (el) => {
+        if (!el)
+            return;
+        const iframeRef = el;
+        if (!uniqueIdentifier || !content) {
+            return;
+        }
+        // Wait for iframe to be ready before accessing contentDocument
+        const writeContentWhenReady = async () => {
+            await iframeConnectedEvent(iframeRef, logger);
+            const documentWriter = iframeRef.contentDocument;
+            if (!documentWriter) {
+                if (src) {
+                    warnAboutLimitedUsageQuickview(logger);
+                    iframeRef.src = src;
+                }
+                return;
+            }
+            if (currentResultAlreadyWrittenToDocument(documentWriter, uniqueIdentifier)) {
+                return;
+            }
+            writeDocument(documentWriter, content);
+            ensureSameResultIsNotOverwritten(documentWriter, uniqueIdentifier);
+            await waitForIframeContentToBeWritten();
+            onSetIframeRef(iframeRef);
+        };
+        // Execute async operation without blocking
+        writeContentWhenReady();
+    };
+    return html `<iframe
+    title=${title}
+    src="about:blank"
+    class="h-full w-full"
+    sandbox=${
+    // biome-ignore lint/suspicious/noExplicitAny: ifDefined requires 'any' for optional HTML attributes
+    ifDefined(sandbox)}
+    ${ref(handleRef)}
+  ></iframe>`;
+};

package/dist/atomic/components/components/search/result-template-components/quickview-preview-bar/quickview-preview-bar.js

@@ -0,0 +1,51 @@
+export const buildQuickviewPreviewBar = (words, highlightKeywords, iframe) => {
+    if (!iframe) {
+        return;
+    }
+    const documentWriter = iframe.contentDocument;
+    if (!documentWriter) {
+        return;
+    }
+    const bar = buildPreviewBar(documentWriter);
+    if (highlightKeywords.highlightNone) {
+        bar.remove();
+        return;
+    }
+    const docHeight = documentWriter.body.scrollHeight;
+    Object.values(words).forEach((word) => {
+        word.elements.forEach((wordElement) => {
+            const previewUnit = buildPreviewUnit(documentWriter, word, wordElement, docHeight, highlightKeywords);
+            bar.appendChild(previewUnit);
+        });
+    });
+    documentWriter.body.appendChild(bar);
+};
+const buildPreviewBar = (documentWriter) => {
+    const previewBarId = 'CoveoPreviewBar';
+    const bar = documentWriter.getElementById(previewBarId) ||
+        documentWriter.createElement('div');
+    bar.id = previewBarId;
+    bar.innerHTML = '';
+    bar.style.position = 'fixed';
+    bar.style.top = '0';
+    bar.style.right = '0';
+    bar.style.width = '15px';
+    bar.style.height = '100%';
+    bar.setAttribute('aria-hidden', 'true');
+    return bar;
+};
+const buildPreviewUnit = (documentWriter, word, wordElement, docHeight, highlightKeywords) => {
+    const previewUnit = documentWriter.createElement('div');
+    if (highlightKeywords.keywords[word.text]?.enabled === false) {
+        previewUnit.style.display = 'none';
+        return previewUnit;
+    }
+    const elementPosition = wordElement.getBoundingClientRect().top;
+    previewUnit.style.position = 'absolute';
+    previewUnit.style.top = `${(elementPosition / docHeight) * 100}%`;
+    previewUnit.style.width = '100%';
+    previewUnit.style.height = '1px';
+    previewUnit.style.border = `1px solid ${word.previewBorderColor}`;
+    previewUnit.style.backgroundColor = word.color;
+    return previewUnit;
+};

package/dist/atomic/components/components/search/result-template-components/quickview-word-highlight/color-parser.js

@@ -0,0 +1,37 @@
+import { hsvToRgb, rgbToHsv } from "../../../../utils/color-utils";
+/**
+ * @internal
+ */
+export class ColorParser {
+    constructor(color) {
+        this.color = color;
+        this.red = 255;
+        this.green = 255;
+        this.blue = 255;
+        const rgb = this.color.match(ColorParser.REGEX);
+        if (rgb) {
+            this.red = parseInt(rgb[1], 10);
+            this.green = parseInt(rgb[2], 10);
+            this.blue = parseInt(rgb[3], 10);
+        }
+    }
+    rgb() {
+        return this.rgbString(this.red, this.green, this.blue);
+    }
+    rgbInverted() {
+        return this.rgbString(255 - this.red, 255 - this.green, 255 - this.blue);
+    }
+    rgbSaturated() {
+        const { h, s, v } = rgbToHsv(this.red, this.green, this.blue);
+        let newSaturation = s * 2;
+        if (newSaturation > 1) {
+            newSaturation = 1;
+        }
+        const { r, g, b } = hsvToRgb(h, newSaturation, v);
+        return this.rgbString(r, g, b);
+    }
+    rgbString(r, g, b) {
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+}
+ColorParser.REGEX = /\s*rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/i;

package/dist/atomic/components/components/search/result-template-components/quickview-word-highlight/iframe-parser.js

@@ -0,0 +1,61 @@
+import { QuickviewWordHighlight } from './quickview-word-highlight';
+import { TextParser } from './text-parser';
+export const HIGHLIGHT_PREFIX = 'CoveoHighlight';
+function findHighlightedElements(iframe) {
+    const root = iframe?.contentDocument?.body;
+    if (!root)
+        return [];
+    // Collect tagged word elements as well as elements whose id starts with
+    // the highlight prefix. Tagged words (`<coveotaggedword>`) must be
+    // considered so that invalid identifiers (for example id="invalid") are
+    // discovered and cause the appropriate error in the parser.
+    const selector = `[id^="${HIGHLIGHT_PREFIX}"]`;
+    const query = root.querySelectorAll(selector);
+    return Array.from(query);
+}
+/**
+ * @internal
+ */
+export class IframeParser {
+    constructor(stemmingInfoFromIndex, iframe) {
+        this.stemmingInfoFromIndex = stemmingInfoFromIndex;
+        this.iframe = iframe;
+        this.textParser = new TextParser(this.stemmingInfoFromIndex);
+        this.wordsHighlights = {};
+    }
+    parse() {
+        const elements = findHighlightedElements(this.iframe);
+        for (const element of elements) {
+            const identifier = this.parseIdentifier(element);
+            if (!identifier) {
+                throw new Error('Invalid keyword identifier for quickview');
+            }
+            const text = this.textParser.parse(element);
+            if (!text) {
+                continue;
+            }
+            const alreadyScannedKeyword = this.wordsHighlights[identifier];
+            if (alreadyScannedKeyword) {
+                alreadyScannedKeyword.addElement(element);
+                continue;
+            }
+            const color = element.style.backgroundColor;
+            const highlight = new QuickviewWordHighlight(identifier, text, color, element);
+            this.wordsHighlights[identifier] = highlight;
+        }
+        return this.wordsHighlights;
+    }
+    parseIdentifier(element) {
+        const parts = element.id
+            .substring(HIGHLIGHT_PREFIX.length + 1)
+            .match(/^([0-9]+)\.([0-9]+)\.([0-9]+)$/);
+        if (!parts || parts.length <= 3) {
+            return null;
+        }
+        return parts[1];
+    }
+}
+export const getWordsHighlights = (stemmingInfoFromIndex, iframe) => {
+    const parser = new IframeParser(stemmingInfoFromIndex, iframe);
+    return parser.parse();
+};

package/dist/atomic/components/components/search/result-template-components/quickview-word-highlight/quickview-word-highlight.js

@@ -0,0 +1,53 @@
+import { ColorParser } from './color-parser';
+export { getWordsHighlights, HIGHLIGHT_PREFIX } from './iframe-parser';
+export class QuickviewWordHighlight {
+    constructor(indexIdentifier, text, color, element) {
+        this.indexIdentifier = indexIdentifier;
+        this.text = text;
+        this.color = color;
+        this.elements = [];
+        this.currentNavigationPosition = -1;
+        this.addElement(element);
+        const colorParser = new ColorParser(color);
+        this.focusedColor = colorParser.rgbInverted();
+        this.previewBorderColor = colorParser.rgbSaturated();
+    }
+    addElement(element) {
+        this.elements.push(element);
+    }
+    get occurrences() {
+        return this.elements.length;
+    }
+    navigateForward() {
+        this.currentNavigationPosition++;
+        if (this.currentNavigationPosition >= this.elements.length) {
+            this.currentNavigationPosition = 0;
+        }
+        this.highlightNavigation();
+        this.putElementIntoView();
+        return this.elements[this.currentNavigationPosition];
+    }
+    navigateBackward() {
+        this.currentNavigationPosition--;
+        if (this.currentNavigationPosition < 0) {
+            this.currentNavigationPosition = this.elements.length - 1;
+        }
+        this.highlightNavigation();
+        this.putElementIntoView();
+        return this.elements[this.currentNavigationPosition];
+    }
+    highlightNavigation() {
+        const currentElement = this.elements[this.currentNavigationPosition];
+        const otherElements = this.elements.filter((el) => el !== currentElement);
+        currentElement.style.color = this.color;
+        currentElement.style.backgroundColor = this.focusedColor;
+        otherElements.forEach((element) => {
+            element.style.color = '';
+            element.style.backgroundColor = this.color;
+        });
+    }
+    putElementIntoView() {
+        const element = this.elements[this.currentNavigationPosition];
+        element.scrollIntoView();
+    }
+}

package/dist/atomic/components/components/search/result-template-components/quickview-word-highlight/text-parser.js

@@ -0,0 +1,46 @@
+/**
+ * @internal
+ */
+export class TextParser {
+    constructor(stemmingInfoFromIndex) {
+        this.stemmingInfoFromIndex = stemmingInfoFromIndex;
+    }
+    parse(element) {
+        const innerTextOfHTMLElement = this.getHighlightedInnerText(element);
+        return this.resolveOriginalTerm(innerTextOfHTMLElement).trim();
+    }
+    isTaggedWord(element) {
+        return element.nodeName.toLowerCase() === 'coveotaggedword';
+    }
+    getHighlightedInnerText(element) {
+        if (!this.isTaggedWord(element)) {
+            return this.getTextOfHTMLElement(element);
+        }
+        const children = Array.from(element.children);
+        if (children.length >= 1) {
+            return this.getTextOfHTMLElement(children[0]);
+        }
+        return '';
+    }
+    getTextOfHTMLElement(el) {
+        return el.innerText || el.textContent || '';
+    }
+    resolveOriginalTerm(highlight) {
+        // First try to find either an exact match between the highlight and the original non-stemmed keyword.
+        // Otherwise try to find a match between the highlight and the stemming keyword expansions
+        // If nothing is found (which should not normally happen...), simply return the highlight keyword as is.
+        const found = Object.keys(this.stemmingInfoFromIndex).find((originalTerm) => {
+            const originalTermMatch = originalTerm.toLowerCase() === highlight.toLowerCase();
+            if (originalTermMatch) {
+                return true;
+            }
+            const stemmingExpansions = this.stemmingInfoFromIndex[originalTerm];
+            if (!stemmingExpansions) {
+                return false;
+            }
+            const stemmingExpansionMatch = stemmingExpansions.find((stemmingExpansion) => stemmingExpansion.toLowerCase() === highlight.toLowerCase());
+            return stemmingExpansionMatch;
+        });
+        return found || highlight;
+    }
+}

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

@@ -1,9 +1,33 @@
+import { h, Fragment } from '@stencil/core/internal/client';
 import { u as updateBreakpoints } from './replace-breakpoint-utils.js';
 import { g as getFirstFocusableDescendant } from './stencil-accessibility-utils.js';
 import { o as once, d as defer } from './utils.js';
-import { c as containsSections } from './item-layout-sections.js';
+import './purify.js';
+
+/**
+ * @deprecated should only be used for Stencil components.
+ */
+const ItemDisplayGuard = (props, children) => {
+    if (!props.hasItems || !props.firstRequestExecuted) {
+        return;
+    }
+    return h(Fragment, null, ...children);
+};
+
+/**
+ * @deprecated should only be used for Stencil components.
+ */
+const DisplayWrapper = ({ display, listClasses }, children) => {
+    if (display === 'table') {
+        return h(ListWrapper, { listClasses: listClasses }, ...children);
+    }
+    return (h(ListWrapper, { listClasses: listClasses },
+        h("div", { class: `list-root ${listClasses}`, part: "result-list" }, children)));
+};
+const ListWrapper = ({ listClasses }, children) => {
+    return h("div", { class: `list-wrapper ${listClasses}` }, ...children);
+};
 
-const resultComponentClass = 'result-component';
 class ItemListCommon {
     constructor(props) {
         this.props = props;
@@ -110,50 +134,12 @@ function getItemDisplayClasses(display, density, image) {
     ];
     return classes;
 }
-function getSection(children, section) {
-    return Array.from(children).find((element) => element.tagName.toLowerCase() === section);
-}
-function getImageSizeFromSections(children) {
-    const imageSize = getSection(children, 'atomic-result-section-visual')?.getAttribute('image-size');
-    if (!imageSize) {
-        return undefined;
-    }
-    return imageSize;
-}
-function getItemLayoutClasses(config, HTMLContent) {
-    const classes = getItemDisplayClasses(config.display, config.density, getImageSizeFromSections(config.children) ?? config.imageSize);
-    if (HTMLContent
-        ? containsSections(HTMLContent)
-        : containsSections(config.children)) {
-        classes.push('with-sections');
-    }
-    return classes;
-}
 
 /**
  * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.
  */
 const getItemListDisplayClasses = getItemListDisplayClasses$1;
-/**
- * @deprecated Use only for Stencil components. For Lit components, use `getItemLayoutClasses` with `ItemLayoutConfig` from `packages/atomic/src/components/common/layout/item-layout-utils.ts` instead.
- */
-class ItemLayout {
-    constructor(children, display, density, imageSize) {
-        this.children = children;
-        this.display = display;
-        this.density = density;
-        this.imageSize = imageSize;
-    }
-    getClasses(HTMLContent) {
-        return getItemLayoutClasses({
-            children: this.children,
-            display: this.display,
-            density: this.density,
-            imageSize: this.imageSize,
-        }, HTMLContent);
-    }
-}
 
-export { ItemListCommon as I, ItemLayout as a, getItemListDisplayClasses as g, resultComponentClass as r };
+export { DisplayWrapper as D, ItemListCommon as I, ItemDisplayGuard as a, getItemListDisplayClasses as g };
 
 //# sourceMappingURL=display-options.js.map

package/dist/atomic/components/display-options.js.map

@@ -1 +1 @@
-{"file":"display-options.js","mappings":"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","names":["getItemListDisplayClasses","getItemListDisplayClassesImport"],"sources":["src/components/common/item-list/stencil-item-list-common.tsx","src/components/common/layout/item-layout-utils.ts","src/components/common/layout/display-options.ts"],"sourcesContent":["import {updateBreakpoints} from '../../../utils/replace-breakpoint-utils';\nimport {\n  FocusTargetController,\n  getFirstFocusableDescendant,\n} from '../../../utils/stencil-accessibility-utils';\nimport {defer, once} from '../../../utils/utils';\nimport {CommerceStore} from '../../commerce/atomic-commerce-interface/store';\nimport {CommerceRecommendationStore} from '../../commerce/atomic-commerce-recommendation-interface/store';\nimport {InsightStore} from '../../insight/atomic-insight-interface/store';\nimport {RecsStore} from '../../recommendations/atomic-recs-interface/store';\nimport {SearchStore} from '../../search/atomic-search-interface/store';\nimport {AnyItem} from './unfolded-item';\nimport {\n  ItemDisplayDensity,\n  ItemDisplayImageSize,\n} from '../layout/display-options';\n\nexport const resultComponentClass = 'result-component';\n\nexport type ItemRenderingFunction<SpecificResult extends AnyItem = AnyItem> =\n  | ((\n      result: SpecificResult,\n      root: HTMLElement,\n      linkContainer?: HTMLElement\n    ) => string)\n  | undefined;\n\nexport interface ItemListCommonProps {\n  store:\n    | CommerceStore\n    | CommerceRecommendationStore\n    | RecsStore\n    | InsightStore\n    | SearchStore;\n  loadingFlag: string;\n  host: HTMLElement;\n  nextNewItemTarget: FocusTargetController;\n  getCurrentNumberOfItems: () => number;\n  getIsLoading: () => boolean;\n  engineSubscribe: (cb: () => void) => () => void;\n}\n\nexport class ItemListCommon {\n  private indexOfResultToFocus?: number;\n  private firstResultEl?: HTMLElement;\n  private updateBreakpointsOnce: () => void;\n\n  constructor(private props: ItemListCommonProps) {\n    this.props.store.setLoadingFlag(this.props.loadingFlag);\n    this.props.store.state.resultList = this;\n    this.updateBreakpointsOnce = once(() => updateBreakpoints(this.props.host));\n    this.props.nextNewItemTarget.registerFocusCallback(() => {\n      this.indexOfResultToFocus = undefined;\n    });\n  }\n\n  public updateBreakpoints() {\n    this.updateBreakpointsOnce();\n  }\n\n  public getResultId(\n    uniqueIdOnResult: string,\n    searchResponseId: string,\n    density: ItemDisplayDensity,\n    imageSize: ItemDisplayImageSize\n  ) {\n    return `${uniqueIdOnResult}${searchResponseId}${density}${imageSize}`;\n  }\n\n  public setNewResultRef(element: HTMLElement, resultIndex: number) {\n    if (resultIndex === 0) {\n      this.firstResultEl = element;\n    }\n    if (resultIndex !== this.indexOfResultToFocus) {\n      return;\n    }\n\n    if (!element.children.length && !element.shadowRoot?.children.length) {\n      return;\n    }\n\n    this.indexOfResultToFocus = undefined;\n    const elementToFocus = getFirstFocusableDescendant(element) ?? element;\n    this.props.nextNewItemTarget.setTarget(elementToFocus);\n  }\n\n  public focusOnNextNewResult() {\n    this.indexOfResultToFocus = this.props.getCurrentNumberOfItems();\n    this.props.nextNewItemTarget.focusOnNextTarget();\n  }\n\n  public async focusOnFirstResultAfterNextSearch() {\n    await defer();\n    return new Promise<void>((resolve) => {\n      if (this.props.getIsLoading()) {\n        this.firstResultEl = undefined;\n      }\n\n      const unsub = this.props.engineSubscribe(async () => {\n        await defer();\n        if (!this.props.getIsLoading() && this.firstResultEl) {\n          const elementToFocus =\n            getFirstFocusableDescendant(this.firstResultEl) ??\n            this.firstResultEl;\n          this.props.nextNewItemTarget.setTarget(elementToFocus);\n          this.props.nextNewItemTarget.focus();\n          this.firstResultEl = undefined;\n          unsub();\n          resolve();\n        }\n      });\n    });\n  }\n}\n","import {\n  containsSections,\n  type ItemSectionTagName,\n} from './item-layout-sections';\n\nexport interface ItemLayoutConfig {\n  children: HTMLCollection;\n  display: ItemDisplayLayout;\n  density: ItemDisplayDensity;\n  imageSize: ItemDisplayImageSize;\n}\n\nexport type ItemDisplayBasicLayout = 'list' | 'grid';\nexport type ItemDisplayLayout = ItemDisplayBasicLayout | 'table';\nexport type ItemDisplayDensity = 'comfortable' | 'normal' | 'compact';\nexport type ItemDisplayImageSize = 'large' | 'small' | 'icon' | 'none';\nexport type ItemTarget = '_self' | '_blank' | '_parent' | '_top';\n\nfunction getDisplayClass(display: ItemDisplayLayout) {\n  switch (display) {\n    case 'grid':\n      return 'display-grid';\n    case 'table':\n      return 'display-table';\n    default:\n      return 'display-list';\n  }\n}\n\nfunction getDensityClass(density: ItemDisplayDensity) {\n  switch (density) {\n    case 'comfortable':\n      return 'density-comfortable';\n    case 'compact':\n      return 'density-compact';\n    default:\n      return 'density-normal';\n  }\n}\n\nfunction getImageClass(image: ItemDisplayImageSize) {\n  switch (image) {\n    case 'large':\n      return 'image-large';\n    case 'small':\n      return 'image-small';\n    case 'none':\n      return 'image-none';\n    default:\n      return 'image-icon';\n  }\n}\n\nexport function getItemListDisplayClasses(\n  display: ItemDisplayLayout,\n  density: ItemDisplayDensity,\n  image: ItemDisplayImageSize,\n  isLoading: boolean,\n  isAppLoading: boolean\n) {\n  const classes = getItemDisplayClasses(display, density, image);\n\n  if (isLoading) {\n    classes.push('loading');\n  }\n\n  if (isAppLoading) {\n    classes.push('placeholder');\n  }\n  return classes.join(' ');\n}\n\nexport function getItemDisplayClasses(\n  display: ItemDisplayLayout,\n  density: ItemDisplayDensity,\n  image: ItemDisplayImageSize\n) {\n  const classes = [\n    getDisplayClass(display),\n    getDensityClass(density),\n    getImageClass(image),\n  ];\n  return classes;\n}\n\nfunction getSection(\n  children: HTMLCollection,\n  section: ItemSectionTagName\n): Element | undefined {\n  return Array.from(children).find(\n    (element) => element.tagName.toLowerCase() === section\n  );\n}\n\nfunction getImageSizeFromSections(\n  children: HTMLCollection\n): ItemDisplayImageSize | undefined {\n  const imageSize = getSection(\n    children,\n    'atomic-result-section-visual'\n  )?.getAttribute('image-size');\n  if (!imageSize) {\n    return undefined;\n  }\n  return imageSize as ItemDisplayImageSize;\n}\n\nexport function getItemLayoutClasses(\n  config: ItemLayoutConfig,\n  HTMLContent?: string\n): string[] {\n  const classes = getItemDisplayClasses(\n    config.display,\n    config.density,\n    getImageSizeFromSections(config.children) ?? config.imageSize\n  );\n  if (\n    HTMLContent\n      ? containsSections(HTMLContent)\n      : containsSections(config.children)\n  ) {\n    classes.push('with-sections');\n  }\n  return classes;\n}\n","import {\n  getItemDisplayClasses as getItemDisplayClassesImport,\n  getItemLayoutClasses,\n  getItemListDisplayClasses as getItemListDisplayClassesImport,\n  type ItemDisplayBasicLayout as ItemDisplayBasicLayoutImport,\n  type ItemDisplayDensity as ItemDisplayDensityImport,\n  type ItemDisplayImageSize as ItemDisplayImageSizeImport,\n  type ItemDisplayLayout as ItemDisplayLayoutImport,\n  type ItemTarget as ItemTargetImport,\n} from './item-layout-utils';\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.\n */\nexport type ItemDisplayBasicLayout = ItemDisplayBasicLayoutImport;\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.\n */\nexport type ItemDisplayDensity = ItemDisplayDensityImport;\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.\n */\nexport type ItemDisplayImageSize = ItemDisplayImageSizeImport;\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.\n */\nexport type ItemDisplayLayout = ItemDisplayLayoutImport;\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.\n */\nexport type ItemTarget = ItemTargetImport;\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.\n */\nexport const getItemDisplayClasses: typeof getItemDisplayClassesImport =\n  getItemDisplayClassesImport;\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.\n */\nexport const getItemListDisplayClasses: typeof getItemListDisplayClassesImport =\n  getItemListDisplayClassesImport;\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, use `getItemLayoutClasses` with `ItemLayoutConfig` from `packages/atomic/src/components/common/layout/item-layout-utils.ts` instead.\n */\nexport class ItemLayout {\n  private children: HTMLCollection;\n  private density: ItemDisplayDensity;\n  private imageSize: ItemDisplayImageSize;\n  private display: ItemDisplayLayout;\n\n  constructor(\n    children: HTMLCollection,\n    display: ItemDisplayLayout,\n    density: ItemDisplayDensity,\n    imageSize: ItemDisplayImageSize\n  ) {\n    this.children = children;\n    this.display = display;\n    this.density = density;\n    this.imageSize = imageSize;\n  }\n\n  public getClasses(HTMLContent?: string) {\n    return getItemLayoutClasses(\n      {\n        children: this.children,\n        display: this.display,\n        density: this.density,\n        imageSize: this.imageSize,\n      },\n      HTMLContent\n    );\n  }\n}\n"],"version":3}
+{"file":"display-options.js","mappings":"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","names":["getItemListDisplayClasses","getItemListDisplayClassesImport"],"sources":["src/components/common/item-list/stencil-item-display-guard.tsx","src/components/common/item-list/stencil-display-wrapper.tsx","src/components/common/item-list/stencil-item-list-common.tsx","src/components/common/layout/item-layout-utils.ts","src/components/common/layout/display-options.ts"],"sourcesContent":["import {FunctionalComponent, h, Fragment} from '@stencil/core';\n\ninterface ItemDisplayGuardProps {\n  firstRequestExecuted: boolean;\n  hasItems: boolean;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const ItemDisplayGuard: FunctionalComponent<ItemDisplayGuardProps> = (\n  props,\n  children\n) => {\n  if (!props.hasItems || !props.firstRequestExecuted) {\n    return;\n  }\n\n  return <Fragment>{...children}</Fragment>;\n};\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {ItemDisplayLayout} from '../layout/display-options.js';\n\ninterface DisplayWrapperProps {\n  display: ItemDisplayLayout;\n  listClasses: string;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const DisplayWrapper: FunctionalComponent<DisplayWrapperProps> = (\n  {display, listClasses},\n  children\n) => {\n  if (display === 'table') {\n    return <ListWrapper listClasses={listClasses}>{...children}</ListWrapper>;\n  }\n\n  return (\n    <ListWrapper listClasses={listClasses}>\n      <div class={`list-root ${listClasses}`} part=\"result-list\">\n        {children}\n      </div>\n    </ListWrapper>\n  );\n};\n\nconst ListWrapper: FunctionalComponent<\n  Pick<DisplayWrapperProps, 'listClasses'>\n> = ({listClasses}, children) => {\n  return <div class={`list-wrapper ${listClasses}`}>{...children}</div>;\n};\n","import {updateBreakpoints} from '../../../utils/replace-breakpoint-utils';\nimport {\n  FocusTargetController,\n  getFirstFocusableDescendant,\n} from '../../../utils/stencil-accessibility-utils';\nimport {defer, once} from '../../../utils/utils';\nimport {CommerceStore} from '../../commerce/atomic-commerce-interface/store';\nimport {CommerceRecommendationStore} from '../../commerce/atomic-commerce-recommendation-interface/store';\nimport {InsightStore} from '../../insight/atomic-insight-interface/store';\nimport {RecsStore} from '../../recommendations/atomic-recs-interface/store';\nimport {SearchStore} from '../../search/atomic-search-interface/store';\nimport {AnyItem} from './unfolded-item';\nimport {\n  ItemDisplayDensity,\n  ItemDisplayImageSize,\n} from '../layout/display-options';\n\nexport const resultComponentClass = 'result-component';\n\nexport type ItemRenderingFunction<SpecificResult extends AnyItem = AnyItem> =\n  | ((\n      result: SpecificResult,\n      root: HTMLElement,\n      linkContainer?: HTMLElement\n    ) => string)\n  | undefined;\n\nexport interface ItemListCommonProps {\n  store:\n    | CommerceStore\n    | CommerceRecommendationStore\n    | RecsStore\n    | InsightStore\n    | SearchStore;\n  loadingFlag: string;\n  host: HTMLElement;\n  nextNewItemTarget: FocusTargetController;\n  getCurrentNumberOfItems: () => number;\n  getIsLoading: () => boolean;\n  engineSubscribe: (cb: () => void) => () => void;\n}\n\nexport class ItemListCommon {\n  private indexOfResultToFocus?: number;\n  private firstResultEl?: HTMLElement;\n  private updateBreakpointsOnce: () => void;\n\n  constructor(private props: ItemListCommonProps) {\n    this.props.store.setLoadingFlag(this.props.loadingFlag);\n    this.props.store.state.resultList = this;\n    this.updateBreakpointsOnce = once(() => updateBreakpoints(this.props.host));\n    this.props.nextNewItemTarget.registerFocusCallback(() => {\n      this.indexOfResultToFocus = undefined;\n    });\n  }\n\n  public updateBreakpoints() {\n    this.updateBreakpointsOnce();\n  }\n\n  public getResultId(\n    uniqueIdOnResult: string,\n    searchResponseId: string,\n    density: ItemDisplayDensity,\n    imageSize: ItemDisplayImageSize\n  ) {\n    return `${uniqueIdOnResult}${searchResponseId}${density}${imageSize}`;\n  }\n\n  public setNewResultRef(element: HTMLElement, resultIndex: number) {\n    if (resultIndex === 0) {\n      this.firstResultEl = element;\n    }\n    if (resultIndex !== this.indexOfResultToFocus) {\n      return;\n    }\n\n    if (!element.children.length && !element.shadowRoot?.children.length) {\n      return;\n    }\n\n    this.indexOfResultToFocus = undefined;\n    const elementToFocus = getFirstFocusableDescendant(element) ?? element;\n    this.props.nextNewItemTarget.setTarget(elementToFocus);\n  }\n\n  public focusOnNextNewResult() {\n    this.indexOfResultToFocus = this.props.getCurrentNumberOfItems();\n    this.props.nextNewItemTarget.focusOnNextTarget();\n  }\n\n  public async focusOnFirstResultAfterNextSearch() {\n    await defer();\n    return new Promise<void>((resolve) => {\n      if (this.props.getIsLoading()) {\n        this.firstResultEl = undefined;\n      }\n\n      const unsub = this.props.engineSubscribe(async () => {\n        await defer();\n        if (!this.props.getIsLoading() && this.firstResultEl) {\n          const elementToFocus =\n            getFirstFocusableDescendant(this.firstResultEl) ??\n            this.firstResultEl;\n          this.props.nextNewItemTarget.setTarget(elementToFocus);\n          this.props.nextNewItemTarget.focus();\n          this.firstResultEl = undefined;\n          unsub();\n          resolve();\n        }\n      });\n    });\n  }\n}\n","import {\n  containsSections,\n  type ItemSectionTagName,\n} from './item-layout-sections';\n\nexport interface ItemLayoutConfig {\n  children: HTMLCollection;\n  display: ItemDisplayLayout;\n  density: ItemDisplayDensity;\n  imageSize: ItemDisplayImageSize;\n}\n\nexport type ItemDisplayBasicLayout = 'list' | 'grid';\nexport type ItemDisplayLayout = ItemDisplayBasicLayout | 'table';\nexport type ItemDisplayDensity = 'comfortable' | 'normal' | 'compact';\nexport type ItemDisplayImageSize = 'large' | 'small' | 'icon' | 'none';\nexport type ItemTarget = '_self' | '_blank' | '_parent' | '_top';\n\nfunction getDisplayClass(display: ItemDisplayLayout) {\n  switch (display) {\n    case 'grid':\n      return 'display-grid';\n    case 'table':\n      return 'display-table';\n    default:\n      return 'display-list';\n  }\n}\n\nfunction getDensityClass(density: ItemDisplayDensity) {\n  switch (density) {\n    case 'comfortable':\n      return 'density-comfortable';\n    case 'compact':\n      return 'density-compact';\n    default:\n      return 'density-normal';\n  }\n}\n\nfunction getImageClass(image: ItemDisplayImageSize) {\n  switch (image) {\n    case 'large':\n      return 'image-large';\n    case 'small':\n      return 'image-small';\n    case 'none':\n      return 'image-none';\n    default:\n      return 'image-icon';\n  }\n}\n\nexport function getItemListDisplayClasses(\n  display: ItemDisplayLayout,\n  density: ItemDisplayDensity,\n  image: ItemDisplayImageSize,\n  isLoading: boolean,\n  isAppLoading: boolean\n) {\n  const classes = getItemDisplayClasses(display, density, image);\n\n  if (isLoading) {\n    classes.push('loading');\n  }\n\n  if (isAppLoading) {\n    classes.push('placeholder');\n  }\n  return classes.join(' ');\n}\n\nexport function getItemDisplayClasses(\n  display: ItemDisplayLayout,\n  density: ItemDisplayDensity,\n  image: ItemDisplayImageSize\n) {\n  const classes = [\n    getDisplayClass(display),\n    getDensityClass(density),\n    getImageClass(image),\n  ];\n  return classes;\n}\n\nfunction getSection(\n  children: HTMLCollection,\n  section: ItemSectionTagName\n): Element | undefined {\n  return Array.from(children).find(\n    (element) => element.tagName.toLowerCase() === section\n  );\n}\n\nfunction getImageSizeFromSections(\n  children: HTMLCollection\n): ItemDisplayImageSize | undefined {\n  const imageSize = getSection(\n    children,\n    'atomic-result-section-visual'\n  )?.getAttribute('image-size');\n  if (!imageSize) {\n    return undefined;\n  }\n  return imageSize as ItemDisplayImageSize;\n}\n\nexport function getItemLayoutClasses(\n  config: ItemLayoutConfig,\n  HTMLContent?: string\n): string[] {\n  const classes = getItemDisplayClasses(\n    config.display,\n    config.density,\n    getImageSizeFromSections(config.children) ?? config.imageSize\n  );\n  if (\n    HTMLContent\n      ? containsSections(HTMLContent)\n      : containsSections(config.children)\n  ) {\n    classes.push('with-sections');\n  }\n  return classes;\n}\n","import {\n  getItemDisplayClasses as getItemDisplayClassesImport,\n  getItemLayoutClasses,\n  getItemListDisplayClasses as getItemListDisplayClassesImport,\n  type ItemDisplayBasicLayout as ItemDisplayBasicLayoutImport,\n  type ItemDisplayDensity as ItemDisplayDensityImport,\n  type ItemDisplayImageSize as ItemDisplayImageSizeImport,\n  type ItemDisplayLayout as ItemDisplayLayoutImport,\n  type ItemTarget as ItemTargetImport,\n} from './item-layout-utils';\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.\n */\nexport type ItemDisplayBasicLayout = ItemDisplayBasicLayoutImport;\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.\n */\nexport type ItemDisplayDensity = ItemDisplayDensityImport;\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.\n */\nexport type ItemDisplayImageSize = ItemDisplayImageSizeImport;\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.\n */\nexport type ItemDisplayLayout = ItemDisplayLayoutImport;\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.\n */\nexport type ItemTarget = ItemTargetImport;\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.\n */\nexport const getItemDisplayClasses: typeof getItemDisplayClassesImport =\n  getItemDisplayClassesImport;\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.\n */\nexport const getItemListDisplayClasses: typeof getItemListDisplayClassesImport =\n  getItemListDisplayClassesImport;\n\n/**\n * @deprecated Use only for Stencil components. For Lit components, use `getItemLayoutClasses` with `ItemLayoutConfig` from `packages/atomic/src/components/common/layout/item-layout-utils.ts` instead.\n */\nexport class ItemLayout {\n  private children: HTMLCollection;\n  private density: ItemDisplayDensity;\n  private imageSize: ItemDisplayImageSize;\n  private display: ItemDisplayLayout;\n\n  constructor(\n    children: HTMLCollection,\n    display: ItemDisplayLayout,\n    density: ItemDisplayDensity,\n    imageSize: ItemDisplayImageSize\n  ) {\n    this.children = children;\n    this.display = display;\n    this.density = density;\n    this.imageSize = imageSize;\n  }\n\n  public getClasses(HTMLContent?: string) {\n    return getItemLayoutClasses(\n      {\n        children: this.children,\n        display: this.display,\n        density: this.density,\n        imageSize: this.imageSize,\n      },\n      HTMLContent\n    );\n  }\n}\n"],"version":3}