@coveo/atomic 3.47.1 → 3.49.0

package/dist/atomic/components/components/insight/atomic-insight-folded-result-list/atomic-insight-folded-result-list.js

@@ -0,0 +1,309 @@
+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;
+};
+var AtomicInsightFoldedResultList_1;
+import { NumberValue, Schema, StringValue } from '@coveo/bueno';
+import { buildFoldedResultList as buildInsightFoldedResultList, buildInteractiveResult as buildInsightInteractiveResult, buildResultsPerPage as buildInsightResultsPerPage, } from '@coveo/headless/insight';
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { map } from 'lit/directives/map.js';
+import { ref } from 'lit/directives/ref.js';
+import { when } from 'lit/directives/when.js';
+import { renderItemPlaceholders } from "../../common/atomic-result-placeholder/item-placeholders";
+import { createAppLoadedListener } from "../../common/interface/store";
+import { renderDisplayWrapper } from "../../common/item-list/display-wrapper";
+import { renderItemList } from "../../common/item-list/item-list";
+import { ItemListCommon, } from "../../common/item-list/item-list-common";
+import { ResultTemplateProvider } from "../../common/item-list/result-template-provider";
+import placeholderStyles from "../../common/item-list/styles/placeholders.tw.css";
+import { extractUnfoldedItem } from "../../common/item-list/unfolded-item";
+import { getItemListDisplayClasses, } from "../../common/layout/item-layout-utils";
+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";
+import { errorGuard } from "../../../decorators/error-guard";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
+import { FocusTargetController } from "../../../utils/accessibility-utils";
+import { randomID } from "../../../utils/utils";
+import "../atomic-insight-result/atomic-insight-result";
+import "../atomic-insight-result-template/atomic-insight-result-template";
+import listDisplayStyles from '../atomic-insight-result-list/insight-list-display.tw.css';
+/**
+ * The `atomic-insight-folded-result-list` component is responsible for displaying folded query results in an insight panel,
+ * by applying one or more result templates.
+ *
+ * @slot default - The default slot where the result templates are inserted.
+ * @part result-list - The element containing every result of a result list
+ * @part outline - The element displaying an outline or a divider around a result
+ */
+let AtomicInsightFoldedResultList = AtomicInsightFoldedResultList_1 = class AtomicInsightFoldedResultList extends ChildrenUpdateCompleteMixin(LitElement) {
+    constructor() {
+        super();
+        this.loadingFlag = randomID('firstResultLoaded-');
+        this.display = 'list';
+        /**
+         * The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.
+         */
+        this.density = 'normal';
+        /**
+         * The expected size of the image displayed in the results.
+         */
+        this.imageSize = 'icon';
+        /**
+         * The initial number of child results to request for each folded collection, before expansion.
+         *
+         * @defaultValue `2`
+         */
+        this.numberOfFoldedResults = 2;
+        this.isAppLoaded = false;
+        this.isEveryResultReady = false;
+        this.resultTemplateRegistered = false;
+        this.templateHasError = false;
+        this.handleResolveFoldedResultList = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            event.detail(this.foldedResultList);
+        };
+        this.handleLoadCollection = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.foldedResultList.loadCollection(event.detail);
+        };
+        new ValidatePropsController(this, () => ({
+            density: this.density,
+            imageSize: this.imageSize,
+            numberOfFoldedResults: this.numberOfFoldedResults,
+        }), AtomicInsightFoldedResultList_1.propsSchema);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('atomic/resolveFoldedResultList', this.handleResolveFoldedResultList);
+        this.removeEventListener('atomic/loadCollection', this.handleLoadCollection);
+    }
+    initialize() {
+        this.foldedResultList = this.initFolding();
+        this.resultsPerPage = buildInsightResultsPerPage(this.bindings.engine);
+        this.initResultTemplateProvider();
+        this.initResultListCommon();
+        createAppLoadedListener(this.bindings.store, (isAppLoaded) => {
+            this.isAppLoaded = isAppLoaded;
+        });
+        this.addEventListener('atomic/resolveFoldedResultList', this.handleResolveFoldedResultList);
+        this.addEventListener('atomic/loadCollection', this.handleLoadCollection);
+    }
+    /**
+     * Sets a rendering function to bypass the standard HTML template mechanism for rendering results.
+     * You can use this function while working with web frameworks that don't use plain HTML syntax such as React, Angular, or Vue.
+     *
+     * Do not use this method if you integrate Atomic in a plain HTML deployment.
+     */
+    async setRenderFunction(resultRenderingFunction) {
+        this.itemRenderingFunction = resultRenderingFunction;
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('foldedResultListState')) {
+            const oldState = changedProperties.get('foldedResultListState');
+            if (this.foldedResultListState.firstSearchExecuted) {
+                this.bindings.store.unsetLoadingFlag(this.loadingFlag);
+            }
+            if (!oldState?.isLoading && this.foldedResultListState.isLoading) {
+                this.isEveryResultReady = false;
+            }
+        }
+        this.updateResultReadyState();
+    }
+    render() {
+        return html `${renderItemList({
+            props: {
+                hasError: this.foldedResultListState.hasError,
+                hasItems: this.foldedResultListState.hasResults,
+                hasTemplate: this.resultTemplateRegistered,
+                firstRequestExecuted: this.foldedResultListState.firstSearchExecuted,
+                templateHasError: this.templateHasError,
+            },
+        })(html `${when(this.templateHasError, () => html `<slot></slot>`, () => {
+            const listClasses = this.computeListDisplayClasses();
+            const resultClasses = `${listClasses} ${!this.isEveryResultReady && 'hidden'}`;
+            return html `
+            ${when(this.isAppLoaded, () => renderDisplayWrapper({
+                props: {
+                    listClasses: resultClasses,
+                    display: this.display,
+                },
+            })(html `${this.renderList()}`))}
+            ${when(!this.isEveryResultReady, () => renderDisplayWrapper({
+                props: { listClasses, display: this.display },
+            })(renderItemPlaceholders({
+                props: {
+                    density: this.density,
+                    display: this.display,
+                    imageSize: this.imageSize,
+                    numberOfPlaceholders: this.resultsPerPageState.numberOfResults || 10,
+                },
+            })))}
+          `;
+        })}`)}`;
+    }
+    async updateResultReadyState() {
+        if (this.isAppLoaded &&
+            !this.isEveryResultReady &&
+            this.foldedResultListState?.firstSearchExecuted &&
+            this.foldedResultListState?.results?.length > 0) {
+            await this.getUpdateComplete();
+            this.isEveryResultReady = true;
+        }
+    }
+    initFolding() {
+        return buildInsightFoldedResultList(this.bindings.engine, {
+            options: {
+                folding: {
+                    collectionField: this.collectionField,
+                    parentField: this.parentField,
+                    childField: this.childField,
+                    numberOfFoldedResults: this.numberOfFoldedResults,
+                },
+            },
+        });
+    }
+    initResultTemplateProvider() {
+        this.resultTemplateProvider = new ResultTemplateProvider({
+            includeDefaultTemplate: true,
+            templateElements: Array.from(this.querySelectorAll('atomic-insight-result-template')),
+            getResultTemplateRegistered: () => this.resultTemplateRegistered,
+            getTemplateHasError: () => this.templateHasError,
+            setResultTemplateRegistered: (value) => {
+                this.resultTemplateRegistered = value;
+            },
+            setTemplateHasError: (value) => {
+                this.templateHasError = value;
+            },
+            bindings: this.bindings,
+        });
+    }
+    initResultListCommon() {
+        this.resultListCommon = new ItemListCommon({
+            engineSubscribe: this.bindings.engine.subscribe,
+            getCurrentNumberOfItems: () => this.foldedResultListState.results.length,
+            getIsLoading: () => this.foldedResultListState.isLoading,
+            host: this,
+            loadingFlag: this.loadingFlag,
+            nextNewItemTarget: this.focusTarget,
+            store: this.bindings.store,
+        });
+    }
+    computeListDisplayClasses() {
+        const displayPlaceholders = !(this.isAppLoaded && this.isEveryResultReady);
+        return getItemListDisplayClasses(this.display, this.density, this.imageSize, this.foldedResultListState?.isLoading, displayPlaceholders);
+    }
+    renderList() {
+        return html `${map(this.foldedResultListState.results, (collection, index) => {
+            return html `${keyed(this.getResultId(collection), html `<atomic-insight-result
+            part="outline"
+            ${ref((element) => element instanceof HTMLElement &&
+                this.resultListCommon.setNewResultRef(element, index))}
+            .content=${this.getContent(collection)}
+            .density=${this.density}
+            .imageSize=${this.imageSize}
+            .interactiveResult=${this.getInteractiveResult(collection)}
+            .loadingFlag=${this.loadingFlag}
+            .result=${collection}
+            .renderingFunction=${this.itemRenderingFunction}
+            .store=${this.bindings.store}
+          ></atomic-insight-result>`)}`;
+        })}`;
+    }
+    get focusTarget() {
+        if (!this.nextNewResultTarget) {
+            this.nextNewResultTarget = new FocusTargetController(this, this.bindings);
+        }
+        return this.nextNewResultTarget;
+    }
+    getContent(collection) {
+        const result = extractUnfoldedItem(collection);
+        return this.resultTemplateProvider.getTemplateContent(result);
+    }
+    getInteractiveResult(collection) {
+        const result = extractUnfoldedItem(collection);
+        return buildInsightInteractiveResult(this.bindings.engine, {
+            options: { result },
+        });
+    }
+    getResultId(collection) {
+        const result = extractUnfoldedItem(collection);
+        return this.resultListCommon.getResultId(result.uniqueId, this.foldedResultListState.searchResponseId, this.density, this.imageSize);
+    }
+};
+AtomicInsightFoldedResultList.styles = [placeholderStyles, listDisplayStyles];
+AtomicInsightFoldedResultList.propsSchema = new Schema({
+    density: new StringValue({
+        constrainTo: ['normal', 'comfortable', 'compact'],
+    }),
+    imageSize: new StringValue({
+        constrainTo: ['small', 'large', 'icon', 'none'],
+    }),
+    numberOfFoldedResults: new NumberValue({ min: 0 }),
+});
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicInsightFoldedResultList.prototype, "density", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'image-size', type: String })
+], AtomicInsightFoldedResultList.prototype, "imageSize", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'collection-field', type: String })
+], AtomicInsightFoldedResultList.prototype, "collectionField", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'parent-field', type: String })
+], AtomicInsightFoldedResultList.prototype, "parentField", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'child-field', type: String })
+], AtomicInsightFoldedResultList.prototype, "childField", void 0);
+__decorate([
+    property({
+        reflect: true,
+        attribute: 'number-of-folded-results',
+        type: Number,
+    })
+], AtomicInsightFoldedResultList.prototype, "numberOfFoldedResults", void 0);
+__decorate([
+    state()
+], AtomicInsightFoldedResultList.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightFoldedResultList.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicInsightFoldedResultList.prototype, "isAppLoaded", void 0);
+__decorate([
+    state()
+], AtomicInsightFoldedResultList.prototype, "isEveryResultReady", void 0);
+__decorate([
+    state()
+], AtomicInsightFoldedResultList.prototype, "resultTemplateRegistered", void 0);
+__decorate([
+    state()
+], AtomicInsightFoldedResultList.prototype, "templateHasError", void 0);
+__decorate([
+    bindStateToController('foldedResultList'),
+    state()
+], AtomicInsightFoldedResultList.prototype, "foldedResultListState", void 0);
+__decorate([
+    bindStateToController('resultsPerPage'),
+    state()
+], AtomicInsightFoldedResultList.prototype, "resultsPerPageState", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicInsightFoldedResultList.prototype, "render", null);
+AtomicInsightFoldedResultList = AtomicInsightFoldedResultList_1 = __decorate([
+    customElement('atomic-insight-folded-result-list'),
+    bindings(),
+    withTailwindStyles
+], AtomicInsightFoldedResultList);
+export { AtomicInsightFoldedResultList };

package/dist/atomic/components/components/insight/atomic-insight-refine-modal/atomic-insight-refine-modal.js

@@ -0,0 +1,211 @@
+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 { buildBreadcrumbManager as buildInsightBreadcrumbManager, buildQuerySummary as buildInsightQuerySummary, } from '@coveo/headless/insight';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { renderButton } from "../../common/button";
+import { getClonedFacetElements } from "../../common/refine-modal/cloned-facet-elements";
+import { renderRefineModal } from "../../common/refine-modal/modal";
+import { booleanConverter } from "../../../converters/boolean-converter";
+import { bindStateToController } from "../../../decorators/bind-state";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { watch } from "../../../decorators/watch";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+import { rectEquals } from "../../../utils/dom-utils";
+/**
+ * The `atomic-insight-refine-modal` component displays a modal with filters for refining search results.
+ *
+ * This component should not be used directly. It is internally used by the `atomic-insight-refine-toggle` component to display the refine modal.
+ *
+ * @part title - The title of the modal.
+ * @part close-button - The button in the header that closes the modal.
+ * @part close-icon - The icon of the close button.
+ * @part content - The wrapper around the content inside the body of the modal.
+ * @part section-title - The title for each section.
+ * @part section-filters-title - The title for the filters section.
+ * @part filter-section - The section containing facets and the "filters" title.
+ * @part filter-clear-all - The button that resets all actively selected facet values.
+ * @part footer-content - The wrapper around the content inside the footer of the modal, containing the button to view results.
+ * @part footer-button - The button in the footer that closes the modal.
+ * @part footer-button-text - The text inside the button in the footer that closes the modal.
+ * @part footer-button-count - The count inside the button in the footer that closes the modal.
+ * @part footer-wrapper - The wrapper with a shadow or background color around the footer.
+ * @part footer - The footer 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 header-wrapper - The wrapper around the header.
+ * @part header - The header of the modal, containing the title.
+ * @part container - The modal's outermost container.
+ */
+let AtomicInsightRefineModal = class AtomicInsightRefineModal extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the modal is open.
+         */
+        this.isOpen = false;
+        this.backdropStyleSheet = new CSSStyleSheet();
+    }
+    initialize() {
+        this.querySummary = buildInsightQuerySummary(this.bindings.engine);
+        this.breadcrumbManager = buildInsightBreadcrumbManager(this.bindings.engine);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.style.display = '';
+        this.shadowRoot?.adoptedStyleSheets.push(this.backdropStyleSheet);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.animationFrameId) {
+            window.cancelAnimationFrame(this.animationFrameId);
+        }
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('interfaceDimensions')) {
+            this.updateBackdropStyles();
+        }
+    }
+    watchEnabled() {
+        if (this.isOpen) {
+            if (!this.querySelector('div[slot="facets"]')) {
+                this.appendChild(getClonedFacetElements(this.bindings.store.getFacetElements(), 0, this.bindings.interfaceElement));
+            }
+            this.onAnimationFrame();
+        }
+    }
+    onAnimationFrame() {
+        if (!this.isOpen) {
+            return;
+        }
+        if (this.dimensionChanged()) {
+            this.updateDimensions();
+        }
+        this.animationFrameId = window.requestAnimationFrame(() => this.onAnimationFrame());
+    }
+    dimensionChanged() {
+        if (!this.interfaceDimensions) {
+            return true;
+        }
+        return !rectEquals(this.interfaceDimensions, this.bindings.interfaceElement.getBoundingClientRect());
+    }
+    updateDimensions() {
+        this.interfaceDimensions =
+            this.bindings.interfaceElement.getBoundingClientRect();
+        this.updateBackdropStyles();
+    }
+    updateBackdropStyles() {
+        if (this.interfaceDimensions) {
+            this.backdropStyleSheet.replaceSync(`
+        atomic-modal::part(backdrop) {
+          top: ${this.interfaceDimensions.top}px;
+          left: ${this.interfaceDimensions.left}px;
+          width: ${this.interfaceDimensions.width}px;
+          height: ${this.interfaceDimensions.height}px;
+        }
+      `);
+        }
+        else {
+            this.backdropStyleSheet.replaceSync('');
+        }
+    }
+    renderHeader() {
+        if (!this.breadcrumbManagerState.hasBreadcrumbs) {
+            return nothing;
+        }
+        return html `
+      <div class="mb-3 flex w-full justify-between">
+        ${renderButton({
+            props: {
+                onClick: () => this.breadcrumbManager.deselectAll(),
+                style: 'text-primary',
+                text: this.bindings.i18n.t('clear-all-filters'),
+                class: 'px-2 py-1',
+            },
+        })(nothing)}
+      </div>
+    `;
+    }
+    renderBody() {
+        if (!this.bindings.store.getFacetElements().length) {
+            return nothing;
+        }
+        return html `
+      <aside
+        slot="body"
+        class="flex w-full flex-col"
+        aria-label=${this.bindings.i18n.t('refine-modal-content')}
+      >
+        ${this.renderHeader()}
+        <slot name="facets"></slot>
+      </aside>
+    `;
+    }
+    render() {
+        return html `
+      ${renderRefineModal({
+            props: {
+                i18n: this.bindings.i18n,
+                i18nFooterButtonTextKey: 'view-results',
+                host: this,
+                isOpen: this.isOpen,
+                onClose: () => {
+                    this.isOpen = false;
+                },
+                title: this.bindings.i18n.t('filters'),
+                numberOfItems: this.querySummaryState.total,
+                openButton: this.openButton,
+                scope: this.bindings.interfaceElement,
+            },
+        })(this.renderBody())}
+    `;
+    }
+};
+__decorate([
+    state()
+], AtomicInsightRefineModal.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightRefineModal.prototype, "error", void 0);
+__decorate([
+    bindStateToController('querySummary'),
+    state()
+], AtomicInsightRefineModal.prototype, "querySummaryState", void 0);
+__decorate([
+    bindStateToController('breadcrumbManager'),
+    state()
+], AtomicInsightRefineModal.prototype, "breadcrumbManagerState", void 0);
+__decorate([
+    state()
+], AtomicInsightRefineModal.prototype, "interfaceDimensions", void 0);
+__decorate([
+    property({ attribute: 'open-button', type: Object })
+], AtomicInsightRefineModal.prototype, "openButton", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        converter: booleanConverter,
+        reflect: true,
+        attribute: 'is-open',
+    })
+], AtomicInsightRefineModal.prototype, "isOpen", void 0);
+__decorate([
+    watch('isOpen')
+], AtomicInsightRefineModal.prototype, "watchEnabled", null);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicInsightRefineModal.prototype, "render", null);
+AtomicInsightRefineModal = __decorate([
+    customElement('atomic-insight-refine-modal'),
+    bindings(),
+    withTailwindStyles
+], AtomicInsightRefineModal);
+export { AtomicInsightRefineModal };

package/dist/atomic/components/components/insight/atomic-insight-refine-toggle/atomic-insight-refine-toggle.js

@@ -15,6 +15,7 @@ import { errorGuard } from "../../../decorators/error-guard";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 const FilterIcon = "<svg width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.87501 6.12835C8.86388 6.13837 8.8532 6.14889 8.84301 6.15987C8.62114 6.399 8.5 6.71441 8.5 7.03922L8.5 12.2222C8.5 12.3929 8.37108 12.4999 8.25 12.4999L5.74999 12.4999C5.62891 12.4999 5.49999 12.3929 5.5 12.2222V7.03921C5.5 6.7144 5.37885 6.39899 5.15698 6.15986C5.14679 6.14888 5.13612 6.13836 5.12499 6.12834L0.56512 2.02315C0.524585 1.9736 0.499999 1.9077 0.5 1.83654L0.500008 0.777776C0.500009 0.607068 0.628921 0.5 0.750007 0.5L13.25 0.500025C13.3711 0.500025 13.5 0.607095 13.5 0.777806L13.5 1.83656C13.5 1.90773 13.4754 1.97362 13.4349 2.02317L8.87501 6.12835Z\" stroke=\"currentColor\" stroke-linejoin=\"round\"/>\n</svg>\n";
 import { refineToggleGuard } from '../../common/refine-modal/guard';
+import "../atomic-insight-refine-modal/atomic-insight-refine-modal";
 /**
  * The `atomic-insight-refine-toggle` component displays a button that opens a modal containing the facets and the sort components.
  *

package/dist/atomic/components/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.js

@@ -0,0 +1,20 @@
+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 { css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
+/**
+ * The `atomic-insight-result-action-bar` component displays an action bar for an Insight result and hosts action buttons such as share, open, or more options related to the result.
+ *
+ * @slot (default) - Action buttons to display in the action bar.
+ */
+let AtomicInsightResultActionBar = class AtomicInsightResultActionBar extends ItemSectionMixin(LitElement, css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@layer properties;atomic-insight-result-action-bar{display:flex;position:absolute;right:calc(var(--spacing, .25rem)*6);top:calc(var(--spacing, .25rem)*-4);visibility:hidden}atomic-insight-result-action-bar>:not(:last-child) button{border-bottom-right-radius:0;border-right-style:var(--tw-border-style);border-right-width:0;border-top-right-radius:0}atomic-insight-result-action-bar>:not(:last-child) button:hover{border-right-style:var(--tw-border-style);border-right-width:1px}atomic-insight-result-action-bar>:not(:first-child) button{border-bottom-left-radius:0;border-top-left-radius:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid}}}`) {
+};
+AtomicInsightResultActionBar = __decorate([
+    customElement('atomic-insight-result-action-bar')
+], AtomicInsightResultActionBar);
+export { AtomicInsightResultActionBar };

package/dist/atomic/components/components/insight/atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.js

@@ -0,0 +1,75 @@
+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 { buildAttachToCase, } from '@coveo/headless/insight';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { ItemContextController } from "../../common/item-list/context/item-context-controller";
+import { bindStateToController } from "../../../decorators/bind-state";
+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 AttachIcon = "<svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.8125 18.3125C9.1125 18.6125 9.5625 18.5625 9.8625 18.3125L14.8625 13.3125C15.2125 12.9625 15.8125 12.9125 16.2625 13.3125C16.7125 13.7125 16.6625 14.4125 16.2625 14.8125L10.1125 20.8625C8.7625 22.2125 6.5125 22.2125 5.1625 20.8625L5.1125 20.8125C3.7625 19.4625 3.7625 17.2125 5.1125 15.8625L15.9625 5.0125C17.3125 3.6625 19.5625 3.6625 20.9125 5.0125L20.9625 5.0625C22.3125 6.4125 22.3125 8.6625 20.9625 10.0125L20.9125 10.0625C20.6625 10.3125 20.6125 10.6625 20.8125 10.9625C21.1125 11.5125 21.3625 12.1125 21.5125 12.7125C21.6125 13.1125 22.0625 13.2125 22.3625 12.9625C22.7625 12.5625 23.1125 12.1625 23.1125 12.1625C25.6625 9.6125 25.6625 5.4625 23.1125 2.9125H23.0125C20.4625 0.3625 16.3125 0.3625 13.7625 2.9125L2.9125 13.7125C0.3625 16.2625 0.3625 20.4125 2.9125 22.9625L3.0125 23.0625C5.5625 25.6125 9.6625 25.6125 12.2125 23.0625L18.4125 16.9125C20.0125 15.3125 19.9625 12.7125 18.3125 11.1125C16.7125 9.5625 14.1125 9.6625 12.5625 11.2625L7.6625 16.1625C7.3625 16.4625 7.3625 16.9625 7.6625 17.2625L8.8125 18.3125Z\"/>\n</svg>\n";
+/**
+ * The `atomic-insight-result-attach-to-case-indicator` component can be included inside a result template to indicate whether a result is attached to the current case.
+ *
+ * @part icon - The icon that indicates whether the result is attached to the case.
+ */
+let AtomicInsightResultAttachToCaseIndicator = class AtomicInsightResultAttachToCaseIndicator extends LitElement {
+    constructor() {
+        super();
+        this.itemContextController = new ItemContextController(this, {
+            parentName: 'atomic-insight-result',
+        });
+    }
+    initialize() {
+        const result = this.itemContextController.item;
+        if (!result) {
+            return;
+        }
+        const caseId = this.bindings.engine.state.insightCaseContext?.caseId || '';
+        this.attachToCase = buildAttachToCase(this.bindings.engine, {
+            options: {
+                result,
+                caseId,
+            },
+        });
+    }
+    render() {
+        if (!this.attachToCase?.isAttached()) {
+            return nothing;
+        }
+        return html `
+      <atomic-icon
+        part="icon"
+        class="flex w-5 justify-center"
+        .icon=${AttachIcon}
+        title=${this.bindings.i18n.t('result-is-attached')}
+      ></atomic-icon>
+    `;
+    }
+};
+__decorate([
+    state()
+], AtomicInsightResultAttachToCaseIndicator.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightResultAttachToCaseIndicator.prototype, "error", void 0);
+__decorate([
+    bindStateToController('attachToCase'),
+    state()
+], AtomicInsightResultAttachToCaseIndicator.prototype, "attachToCaseState", void 0);
+__decorate([
+    errorGuard(),
+    bindingGuard()
+], AtomicInsightResultAttachToCaseIndicator.prototype, "render", null);
+AtomicInsightResultAttachToCaseIndicator = __decorate([
+    customElement('atomic-insight-result-attach-to-case-indicator'),
+    bindings(),
+    withTailwindStyles
+], AtomicInsightResultAttachToCaseIndicator);
+export { AtomicInsightResultAttachToCaseIndicator };