@coveo/atomic 3.47.1 → 3.49.0

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

@@ -0,0 +1,167 @@
+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 AtomicInsightResultQuickviewAction_1;
+import { Schema, StringValue } from '@coveo/bueno';
+import { buildQuickview } from '@coveo/headless';
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { createRef } from 'lit/directives/ref.js';
+import { when } from 'lit/directives/when.js';
+import { renderIconButton } from "../../common/icon-button";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
+import "../../search/atomic-quickview-modal/atomic-quickview-modal";
+import { createResultContextController } from "../../search/result-template-component-utils/context/result-context-controller";
+import { bindStateToController } from "../../../decorators/bind-state";
+import { bindings } from "../../../decorators/bindings";
+import { LightDomMixin } from "../../../mixins/light-dom";
+import { AriaLiveRegionController, FocusTargetController, } from "../../../utils/accessibility-utils";
+const QuickviewIcon = "<svg width=\"27\" height=\"26\" viewBox=\"0 0 27 26\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M25.9125 13.05C23.5625 8.3 18.6625 5 13.0125 5C7.3625 5 2.4625 8.3 0.1125 13.05C-0.0375 13.35 -0.0375 13.7 0.1125 13.95C2.4625 18.7 7.3625 22 13.0125 22C18.6625 22 23.5625 18.7 25.9125 13.95C26.0625 13.65 26.0625 13.35 25.9125 13.05ZM13.0125 19C9.9625 19 7.5125 16.55 7.5125 13.5C7.5125 10.45 9.9625 8 13.0125 8C16.0625 8 18.5125 10.45 18.5125 13.5C18.5125 16.55 16.0625 19 13.0125 19ZM13.0125 10C11.0625 10 9.5125 11.55 9.5125 13.5C9.5125 15.45 11.0625 17 13.0125 17C14.9625 17 16.5125 15.45 16.5125 13.5C16.5125 11.55 14.9625 10 13.0125 10Z\"/>\n</svg>\n";
+/**
+ * The `atomic-insight-result-quickview-action` component renders a button that, when clicked,
+ * opens a modal containing a preview of the result document. This allows users to quickly
+ * view the content of a document without navigating away from the insight panel.
+ *
+ * This component must be used inside an `atomic-insight-result-template` component.
+ *
+ * @part result-action-container - The container wrapping the button.
+ * @part result-action-button - The button that opens the quickview modal.
+ * @part result-action-icon - The icon displayed in the button.
+ */
+let AtomicInsightResultQuickviewAction = AtomicInsightResultQuickviewAction_1 = class AtomicInsightResultQuickviewAction extends LightDomMixin(LitElement) {
+    constructor() {
+        super();
+        /**
+         * The `sandbox` attribute to apply to the quickview iframe.
+         *
+         * The quickview is loaded inside an iframe with a [`sandbox`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox) attribute for security reasons.
+         *
+         * This attribute exists primarily to protect against potential XSS attacks that could originate from the document being displayed.
+         *
+         * By default, the sandbox attributes are: `allow-popups allow-top-navigation allow-same-origin`.
+         *
+         * `allow-same-origin` is not optional, and must always be included in the list of allowed capabilities for the component to function properly.
+         */
+        this.sandbox = 'allow-popups allow-top-navigation allow-same-origin';
+        this.resultContext = createResultContextController(this);
+        this.ariaLiveRegion = new AriaLiveRegionController(this, 'quickview');
+        this.buttonRef = createRef();
+        this.nextQuickviewHandler = (evt) => {
+            evt.stopImmediatePropagation();
+            this.quickview.next();
+        };
+        this.previousQuickviewHandler = (evt) => {
+            evt.stopImmediatePropagation();
+            this.quickview.previous();
+        };
+        new ValidatePropsController(this, () => ({ sandbox: this.sandbox }), AtomicInsightResultQuickviewAction_1.propsSchema);
+    }
+    initialize() {
+        const item = this.resultContext?.item;
+        if (!item) {
+            return;
+        }
+        this.result = 'result' in item ? item.result : item;
+        this.buttonFocusTarget = new FocusTargetController(this, this.bindings);
+        this.quickview = buildQuickview(this.bindings.engine, {
+            options: { result: this.result },
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.body.addEventListener('atomic/quickview/next', this.nextQuickviewHandler);
+        document.body.addEventListener('atomic/quickview/previous', this.previousQuickviewHandler);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.body.removeEventListener('atomic/quickview/next', this.nextQuickviewHandler);
+        document.body.removeEventListener('atomic/quickview/previous', this.previousQuickviewHandler);
+    }
+    addQuickviewModalIfNeeded() {
+        if (this.quickviewModalRef || !this.bindings?.interfaceElement) {
+            return;
+        }
+        const quickviewModal = this.bindings.interfaceElement.querySelector('atomic-quickview-modal');
+        if (quickviewModal) {
+            this.quickviewModalRef = quickviewModal;
+            return;
+        }
+        this.quickviewModalRef = document.createElement('atomic-quickview-modal');
+        this.quickviewModalRef.setAttribute('sandbox', this.sandbox);
+        this.bindings.interfaceElement.appendChild(this.quickviewModalRef);
+    }
+    updateModalContent() {
+        if (this.quickviewModalRef && this.quickview.state.content) {
+            this.quickviewModalRef.content = this.quickview.state.content;
+            this.quickviewModalRef.result = this.result;
+            this.quickviewModalRef.total = this.quickviewState.totalResults;
+            this.quickviewModalRef.current = this.quickviewState.currentResult;
+            this.quickviewModalRef.modalCloseCallback = () => this.buttonFocusTarget.focus();
+            this.ariaLiveRegion.message = this.quickviewState.isLoading
+                ? this.bindings.i18n.t('quickview-loading')
+                : this.bindings.i18n.t('quickview-loaded', {
+                    first: this.quickviewState.currentResult,
+                    last: this.quickviewState.totalResults,
+                    title: this.result.title,
+                });
+        }
+    }
+    onClick(event) {
+        event?.stopPropagation();
+        this.quickview.fetchResultContent();
+    }
+    get shouldRenderQuickview() {
+        return this.quickviewState?.resultHasPreview;
+    }
+    updated() {
+        this.addQuickviewModalIfNeeded();
+        if (this.quickviewState) {
+            this.updateModalContent();
+        }
+        if (this.buttonRef.value && this.buttonFocusTarget) {
+            this.buttonFocusTarget.setTarget(this.buttonRef.value);
+        }
+    }
+    render() {
+        return when(this.shouldRenderQuickview, () => renderIconButton({
+            props: {
+                partPrefix: 'result-action',
+                style: 'outline-neutral',
+                buttonRef: this.buttonRef,
+                icon: QuickviewIcon,
+                title: this.bindings.i18n.t('quickview'),
+                onClick: (event) => this.onClick(event),
+            },
+        }));
+    }
+};
+AtomicInsightResultQuickviewAction.propsSchema = new Schema({
+    sandbox: new StringValue({
+        required: true,
+        regex: /allow-same-origin/,
+    }),
+});
+__decorate([
+    property({ type: String })
+], AtomicInsightResultQuickviewAction.prototype, "sandbox", void 0);
+__decorate([
+    state()
+], AtomicInsightResultQuickviewAction.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightResultQuickviewAction.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicInsightResultQuickviewAction.prototype, "result", void 0);
+__decorate([
+    bindStateToController('quickview'),
+    state()
+], AtomicInsightResultQuickviewAction.prototype, "quickviewState", void 0);
+AtomicInsightResultQuickviewAction = AtomicInsightResultQuickviewAction_1 = __decorate([
+    customElement('atomic-insight-result-quickview-action'),
+    bindings()
+], AtomicInsightResultQuickviewAction);
+export { AtomicInsightResultQuickviewAction };

package/dist/atomic/components/components/insight/atomic-insight-search-box/atomic-insight-search-box.js

@@ -25,6 +25,7 @@ const SearchSlimIcon = "<svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fi
 import "../../common/atomic-icon/atomic-icon";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import styles from './atomic-insight-search-box.tw.css';
+import '@coveo/atomic-legacy/atomic-suggestion-renderer';
 /**
  * The `atomic-insight-search-box` component allows users to enter and submit search queries within the Insight interface.
  * It provides query suggestions as the user types.

package/dist/atomic/components/components/insight/atomic-insight-smart-snippet/atomic-insight-smart-snippet.js

@@ -0,0 +1,203 @@
+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 { buildSmartSnippet as buildInsightSmartSnippet, } from '@coveo/headless/insight';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { getAttributesFromLinkSlotContent } from "../../common/item-link/attributes-slot";
+import { renderSnippetFooter } from "../../common/smart-snippets/atomic-smart-snippet/snippet-footer";
+import { renderSnippetQuestion } from "../../common/smart-snippets/atomic-smart-snippet/snippet-question";
+import { renderSnippetWrapper } from "../../common/smart-snippets/atomic-smart-snippet/snippet-wrapper";
+import { renderSmartSnippetFeedbackBanner } from "../../common/smart-snippets/smart-snippet-feedback-banner";
+import { bindStateToController } from "../../../decorators/bind-state";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { randomID } from "../../../utils/utils";
+import "../../common/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper";
+import "../../common/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer";
+import "../../common/atomic-smart-snippet-source/atomic-smart-snippet-source";
+import { when } from 'lit/directives/when.js';
+import "../atomic-insight-smart-snippet-feedback-modal/atomic-insight-smart-snippet-feedback-modal";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+import styles from './atomic-insight-smart-snippet.tw.css.js';
+/**
+ * The `atomic-insight-smart-snippet` component displays a smart snippet for an Insight Panel query.
+ * Smart snippets are generated answers extracted from relevant documents.
+ *
+ * @part smart-snippet - The container for the smart snippet.
+ * @part body - The expandable answer body.
+ * @part feedback-banner - The feedback banner container.
+ * @part feedback-inquiry - The feedback inquiry text.
+ * @part feedback-buttons - The container for feedback buttons.
+ * @part feedback-like-button - The like button.
+ * @part feedback-dislike-button - The dislike button.
+ * @part feedback-thank-you-wrapper - The thank you message wrapper.
+ * @part feedback-thank-you - The thank you message.
+ * @part feedback-explain-why-button - The explain why button.
+ *
+ * @slot source-anchor-attributes - Slot for attributes to apply to the source anchor element.
+ */
+let AtomicInsightSmartSnippet = class AtomicInsightSmartSnippet extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.feedbackSent = false;
+        this.feedbackSentHandler = () => {
+            this.feedbackSent = true;
+        };
+        /**
+         * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the question at the top of the snippet, from 1 to 5.
+         */
+        this.headingLevel = 0;
+        /**
+         * The maximum height (in pixels) a snippet can have before the component truncates it and displays a "show more" button.
+         */
+        this.maximumHeight = 250;
+        /**
+         * When the answer is partly hidden, how much of its height (in pixels) should be visible.
+         */
+        this.collapsedHeight = 180;
+    }
+    initialize() {
+        this.smartSnippetId ||= randomID();
+        this.smartSnippet = buildInsightSmartSnippet(this.bindings.engine);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.modalRef) {
+            this.modalRef.removeEventListener('feedbackSent', this.feedbackSentHandler);
+        }
+    }
+    willUpdate() {
+        if (!this.smartSnippetState) {
+            return;
+        }
+        if (!(this.smartSnippetState.liked || this.smartSnippetState.disliked)) {
+            this.feedbackSent = false;
+        }
+    }
+    loadModal() {
+        if (this.modalRef) {
+            return;
+        }
+        const modalRef = document.createElement('atomic-insight-smart-snippet-feedback-modal');
+        modalRef.addEventListener('feedbackSent', this.feedbackSentHandler);
+        this.modalRef = modalRef;
+        this.renderRoot.parentElement?.insertAdjacentElement('beforebegin', modalRef);
+    }
+    renderSource() {
+        const source = this.smartSnippetState.source;
+        if (!source) {
+            return nothing;
+        }
+        return html `<atomic-smart-snippet-source
+      .anchorAttributes=${getAttributesFromLinkSlotContent(this, 'source-anchor-attributes')}
+      .onBeginDelayedSelectSource=${this.smartSnippet.beginDelayedSelectSource}
+      .onCancelPendingSelectSource=${this.smartSnippet.cancelPendingSelectSource}
+      .onSelectSource=${this.smartSnippet.selectSource}
+      .source=${source}
+    ></atomic-smart-snippet-source>`;
+    }
+    renderFeedbackBanner() {
+        const explainWhyRef = (button) => {
+            if (this.modalRef && button) {
+                this.modalRef.source = button;
+            }
+        };
+        return renderSmartSnippetFeedbackBanner({
+            props: {
+                disliked: this.smartSnippetState.disliked,
+                explainWhyRef,
+                feedbackSent: this.feedbackSent,
+                id: this.smartSnippetId,
+                i18n: this.bindings.i18n,
+                liked: this.smartSnippetState.liked,
+                onDislike: () => {
+                    this.loadModal();
+                    this.smartSnippet.dislike();
+                },
+                onLike: () => this.smartSnippet.like(),
+                onPressExplainWhy: () => {
+                    if (this.modalRef) {
+                        this.modalRef.isOpen = true;
+                    }
+                },
+            },
+        });
+    }
+    render() {
+        const shouldDisplay = this.smartSnippetState?.answerFound ?? false;
+        this.classList.toggle('atomic-hidden', !shouldDisplay);
+        return html `
+    ${when(shouldDisplay, () => renderSnippetWrapper({
+            props: {
+                headingLevel: this.headingLevel,
+                i18n: this.bindings.i18n,
+            },
+        })(html `
+        <atomic-smart-snippet-collapse-wrapper>
+          ${renderSnippetQuestion({
+            props: {
+                headingLevel: this.headingLevel,
+                question: this.smartSnippetState.question,
+            },
+        })}
+          <atomic-smart-snippet-expandable-answer
+            .collapsedHeight=${this.collapsedHeight}
+            .expanded=${this.smartSnippetState.expanded}
+            exportparts="answer,show-more-button,show-less-button,truncated-answer"
+            .htmlContent=${this.smartSnippetState.answer}
+            .maximumHeight=${this.maximumHeight}
+            @collapse=${() => this.smartSnippet.collapse()}
+            @expand=${() => this.smartSnippet.expand()}
+            part="body"
+            .snippetStyle=${this.snippetStyle}
+          ></atomic-smart-snippet-expandable-answer>
+          ${renderSnippetFooter({
+            props: {
+                i18n: this.bindings.i18n,
+            },
+        })(html ` ${this.renderSource()} ${this.renderFeedbackBanner()} `)}
+        </atomic-smart-snippet-collapse-wrapper>
+      `))}`;
+    }
+};
+AtomicInsightSmartSnippet.styles = styles;
+__decorate([
+    state()
+], AtomicInsightSmartSnippet.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightSmartSnippet.prototype, "error", void 0);
+__decorate([
+    bindStateToController('smartSnippet'),
+    state()
+], AtomicInsightSmartSnippet.prototype, "smartSnippetState", void 0);
+__decorate([
+    state()
+], AtomicInsightSmartSnippet.prototype, "feedbackSent", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'heading-level' })
+], AtomicInsightSmartSnippet.prototype, "headingLevel", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'maximum-height' })
+], AtomicInsightSmartSnippet.prototype, "maximumHeight", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'collapsed-height' })
+], AtomicInsightSmartSnippet.prototype, "collapsedHeight", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'snippet-style' })
+], AtomicInsightSmartSnippet.prototype, "snippetStyle", void 0);
+__decorate([
+    errorGuard(),
+    bindingGuard()
+], AtomicInsightSmartSnippet.prototype, "render", null);
+AtomicInsightSmartSnippet = __decorate([
+    customElement('atomic-insight-smart-snippet'),
+    bindings(),
+    withTailwindStyles
+], AtomicInsightSmartSnippet);
+export { AtomicInsightSmartSnippet };

package/dist/atomic/components/components/insight/atomic-insight-smart-snippet/atomic-insight-smart-snippet.tw.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+const styles = css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */[part=source-url]{color:var(--atomic-on-background);--font-size:var(--atomic-text-base);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);&:focus-visible,&:hover{color:var(--atomic-primary);text-decoration:underline}&:focus{outline:none}&:visited{color:var(--atomic-visited)}}[part=source-title]{color:var(--atomic-on-background);--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);margin-bottom:calc(var(--spacing, .25rem)*6);&:focus-visible,&:hover{color:var(--atomic-primary);text-decoration:underline}&:focus{outline:none}&:visited{color:var(--atomic-visited)}}footer:before{background-color:var(--atomic-neutral);content:" ";display:block;height:1px;margin-bottom:1.5rem}`;
+export default styles;

package/dist/atomic/components/components/insight/atomic-insight-smart-snippet-suggestions/atomic-insight-smart-snippet-suggestions.js

@@ -0,0 +1,198 @@
+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 AtomicInsightSmartSnippetSuggestions_1;
+import { NumberValue, Schema } from '@coveo/bueno';
+import { buildSmartSnippetQuestionsList } from '@coveo/headless/insight';
+import { html, LitElement, nothing } 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";
+import { renderAnswerAndSourceWrapper } from "../../common/smart-snippets/atomic-smart-snippet-suggestions/answer-and-source-wrapper";
+import { renderFooter } from "../../common/smart-snippets/atomic-smart-snippet-suggestions/footer";
+import { getQuestionPart } from "../../common/smart-snippets/atomic-smart-snippet-suggestions/get-question-part";
+import { renderQuestion } from "../../common/smart-snippets/atomic-smart-snippet-suggestions/question";
+import { renderQuestionWrapper } from "../../common/smart-snippets/atomic-smart-snippet-suggestions/question-wrapper";
+import { renderSuggestionsWrapper } from "../../common/smart-snippets/atomic-smart-snippet-suggestions/suggestions-wrapper";
+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";
+const ArrowDown = "<svg width=\"11\" height=\"6\" viewBox=\"0 0 11 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1.18998 0.52682L5.43262 4.76946L9.67526 0.526821\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
+const ArrowRight = "<svg viewBox=\"0 0 7 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1.09619 10.5962L5.69239 6L1.09619 1.40381\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
+import { randomID } from "../../../utils/utils";
+import "../../common/atomic-icon/atomic-icon";
+import "../../common/atomic-smart-snippet-source/atomic-smart-snippet-source";
+import "../../common/atomic-smart-snippet-answer/atomic-smart-snippet-answer";
+import styles from './atomic-insight-smart-snippet-suggestions.tw.css';
+/**
+ * The `atomic-insight-smart-snippet-suggestions` component displays an accordion of questions related to the query with their corresponding answers.
+ *
+ * You can style the snippets either with the `snippetStyle` prop, or by inserting a template element like this:
+ * ```html
+ * <atomic-insight-smart-snippet-suggestions>
+ *   <template>
+ *     <style>
+ *       b {
+ *         color: blue;
+ *       }
+ *     </style>
+ *   </template>
+ * </atomic-insight-smart-snippet-suggestions>
+ * ```
+ *
+ * @slot source-anchor-attributes - Lets you pass [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) down to anchor elements, overriding other attributes.
+ * To be used exclusively in anchor elements, such as: `<a slot="source-anchor-attributes" target="_blank"></a>`.
+ *
+ * @part container - The wrapper with a border around the entire component.
+ * @part heading - The heading above the list of related questions.
+ * @part questions - The list of related questions.
+ * @part question-answer-expanded - An expanded related question.
+ * @part question-answer-collapsed - A collapsed related question.
+ * @part question-button-expanded - The button to collapse a related question.
+ * @part question-button-collapsed - The button to expand a related question.
+ * @part question-icon-expanded - The caret of an expanded related question.
+ * @part question-icon-collapsed - The caret of a collapsed related question.
+ * @part question-text-expanded - The title of an expanded related question.
+ * @part question-text-collapsed - The title of a collapsed related question.
+ * @part answer-and-source - The wrapper around the answer and source of a related question.
+ * @part answer - The container displaying the full document excerpt of a related question's answer.
+ * @part footer - The wrapper around the source of a related question's answer.
+ * @part source-url - The URL to the document a related question's answer is extracted from.
+ * @part source-title - The title of the document a related question's answer is extracted from.
+ */
+let AtomicInsightSmartSnippetSuggestions = AtomicInsightSmartSnippetSuggestions_1 = class AtomicInsightSmartSnippetSuggestions extends LitElement {
+    constructor() {
+        super();
+        /**
+         * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the "People also ask" heading over the snippets, from 1 to 5.
+         */
+        this.headingLevel = 0;
+        new ValidatePropsController(this, () => ({ headingLevel: this.headingLevel }), AtomicInsightSmartSnippetSuggestions_1.propsSchema, false);
+    }
+    initialize() {
+        this.accordionId = randomID('atomic-smart-snippet-suggestions-');
+        this.smartSnippetQuestionsList = buildSmartSnippetQuestionsList(this.bindings.engine);
+    }
+    render() {
+        const shouldDisplay = this.smartSnippetQuestionsListState.questions.length > 0;
+        return html `${when(shouldDisplay, () => renderSuggestionsWrapper({
+            props: {
+                headingLevel: this.headingLevel,
+                i18n: this.bindings.i18n,
+            },
+        })(html `
+          ${this.smartSnippetQuestionsListState.questions.map((relatedQuestion, i) => this.renderRelatedQuestion(relatedQuestion, i))}
+        `), () => nothing)}`;
+    }
+    renderRelatedQuestion(relatedQuestion, index) {
+        return renderQuestionWrapper({
+            props: {
+                expanded: relatedQuestion.expanded,
+                key: relatedQuestion.questionAnswerId,
+            },
+        })(html `
+      ${this.renderQuestionButton(relatedQuestion, index)}
+      ${when(relatedQuestion.expanded, () => this.renderAnswer(relatedQuestion, index))}
+    `);
+    }
+    renderQuestionButton(relatedQuestion, index) {
+        return renderQuestion({
+            props: {
+                ariaControls: `${this.accordionId}-${index}`,
+                expanded: relatedQuestion.expanded,
+                headingLevel: this.headingLevel,
+                onClick: () => this.toggleQuestion(relatedQuestion),
+                question: relatedQuestion.question,
+            },
+        })(html `
+      <atomic-icon
+        .icon=${relatedQuestion.expanded ? ArrowDown : ArrowRight}
+        part=${getQuestionPart('icon', relatedQuestion.expanded)}
+        class="mr-3 w-2.5 stroke-[1.25]"
+      ></atomic-icon>
+    `);
+    }
+    renderAnswer(relatedQuestion, index) {
+        return renderAnswerAndSourceWrapper({
+            props: {
+                id: `${this.accordionId}-${index}`,
+            },
+        })(html `
+      <atomic-smart-snippet-answer
+        exportparts="answer"
+        .htmlContent=${relatedQuestion.answer}
+        .innerStyle=${this.computedSnippetStyle}
+        @selectInlineLink=${(e) => this.smartSnippetQuestionsList.selectInlineLink(relatedQuestion.questionAnswerId, e.detail)}
+        @beginDelayedSelectInlineLink=${(e) => this.smartSnippetQuestionsList.beginDelayedSelectInlineLink(relatedQuestion.questionAnswerId, e.detail)}
+        @cancelPendingSelectInlineLink=${(e) => this.smartSnippetQuestionsList.cancelPendingSelectInlineLink(relatedQuestion.questionAnswerId, e.detail)}
+      ></atomic-smart-snippet-answer>
+      ${when(relatedQuestion.source, () => this.renderSource(relatedQuestion.questionAnswerId, relatedQuestion.source))}
+    `);
+    }
+    renderSource(questionAnswerId, source) {
+        return renderFooter({
+            props: {
+                i18n: this.bindings.i18n,
+            },
+        })(html `
+      <atomic-smart-snippet-source
+        .anchorAttributes=${getAttributesFromLinkSlotContent(this, 'source-anchor-attributes')}
+        @beginDelayedSelectSource=${() => this.smartSnippetQuestionsList.beginDelayedSelectSource(questionAnswerId)}
+        @cancelPendingSelectSource=${() => this.smartSnippetQuestionsList.cancelPendingSelectSource(questionAnswerId)}
+        @selectSource=${() => this.smartSnippetQuestionsList.selectSource(questionAnswerId)}
+        .source=${source}
+      ></atomic-smart-snippet-source>
+    `);
+    }
+    get computedSnippetStyle() {
+        const styleTag = this.querySelector('template')?.content.querySelector('style');
+        if (!styleTag) {
+            return this.snippetStyle;
+        }
+        return styleTag.innerHTML;
+    }
+    toggleQuestion(relatedQuestion) {
+        if (relatedQuestion.expanded) {
+            this.smartSnippetQuestionsList.collapse(relatedQuestion.questionAnswerId);
+        }
+        else {
+            this.smartSnippetQuestionsList.expand(relatedQuestion.questionAnswerId);
+        }
+    }
+};
+AtomicInsightSmartSnippetSuggestions.propsSchema = new Schema({
+    headingLevel: new NumberValue({ min: 0, max: 5, required: false }),
+});
+AtomicInsightSmartSnippetSuggestions.styles = styles;
+__decorate([
+    state()
+], AtomicInsightSmartSnippetSuggestions.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightSmartSnippetSuggestions.prototype, "error", void 0);
+__decorate([
+    bindStateToController('smartSnippetQuestionsList'),
+    state()
+], AtomicInsightSmartSnippetSuggestions.prototype, "smartSnippetQuestionsListState", void 0);
+__decorate([
+    property({ reflect: true, type: Number, attribute: 'heading-level' })
+], AtomicInsightSmartSnippetSuggestions.prototype, "headingLevel", void 0);
+__decorate([
+    property({ type: String, attribute: 'snippet-style' })
+], AtomicInsightSmartSnippetSuggestions.prototype, "snippetStyle", void 0);
+__decorate([
+    errorGuard(),
+    bindingGuard()
+], AtomicInsightSmartSnippetSuggestions.prototype, "render", null);
+AtomicInsightSmartSnippetSuggestions = AtomicInsightSmartSnippetSuggestions_1 = __decorate([
+    customElement('atomic-insight-smart-snippet-suggestions'),
+    bindings(),
+    withTailwindStyles
+], AtomicInsightSmartSnippetSuggestions);
+export { AtomicInsightSmartSnippetSuggestions };

package/dist/atomic/components/components/insight/atomic-insight-smart-snippet-suggestions/atomic-insight-smart-snippet-suggestions.tw.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+const styles = css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */:host{display:block}:host [part=footer]:before{background-color:var(--atomic-neutral);content:" ";display:block;height:1px;margin-bottom:1.5rem}[part=answer-and-source]{margin-top:-.5rem}[part=source-title],[part=source-url]{color:var(--atomic-on-background);display:block;&:focus-visible,&:hover{color:var(--atomic-primary);text-decoration:underline}&:focus{outline:none}&:visited{color:var(--atomic-visited)}}[part=source-url]{--font-size:var(--atomic-text-base);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio))}[part=source-title],[part=source-url]{font-size:var(--font-size);line-height:var(--line-height)}[part=source-title]{--font-size:var(--atomic-text-xl);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio))}`;
+export default styles;