@coveo/atomic 3.47.0 → 3.48.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-user-actions-modal/atomic-insight-user-actions-modal.js

@@ -0,0 +1,204 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import "../../common/atomic-modal/atomic-modal";
+import "../atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline";
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { ATOMIC_MODAL_EXPORT_PARTS } from "../../common/atomic-modal/export-parts";
+import { renderButton } from "../../common/button";
+import { booleanConverter } from "../../../converters/boolean-converter";
+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 { rectEquals } from "../../../utils/dom-utils";
+const CloseIcon = "<svg viewBox=\"0 0 22 22\"><g transform=\"matrix(.7071 -.7071 .7071 .7071 -3.142 11)\"><path d=\"m9-3.4h2v26.9h-2z\"/><path d=\"m-3.4 9h26.9v2h-26.9z\"/></g></svg>";
+/**
+ * The `atomic-insight-user-actions-modal` is automatically created as a child of the `atomic-insight-interface` when the `atomic-insight-user-actions-toggle` is initialized.
+ *
+ * When the modal is opened, the CSS class `atomic-modal-opened` is added to the interface element and the body, allowing further customization.
+ *
+ * @internal
+ *
+ * @part title - The title element displaying "user-actions" text.
+ * @part close-button - The button used to close the modal.
+ * @part close-icon - The close icon within the close button.
+ *
+ * @part backdrop - The transparent backdrop hiding the content behind the modal (inherited from atomic-modal).
+ * @part container - The modal's outermost container with the outline and background (inherited from atomic-modal).
+ * @part header-wrapper - The wrapper around the header (inherited from atomic-modal).
+ * @part header - The header at the top of the modal (inherited from atomic-modal).
+ * @part header-ruler - The horizontal ruler underneath the header (inherited from atomic-modal).
+ * @part body-wrapper - The wrapper around the body (inherited from atomic-modal).
+ * @part body - The body of the modal, between the header and the footer (inherited from atomic-modal).
+ * @part footer-wrapper - The wrapper with a shadow or background color around the footer (inherited from atomic-modal).
+ * @part footer - The footer at the bottom of the modal (inherited from atomic-modal).
+ */
+let AtomicInsightUserActionsModal = class AtomicInsightUserActionsModal extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the modal is open.
+         */
+        this.isOpen = false;
+        /**
+         * The names of custom events to exclude.
+         */
+        this.excludedCustomActions = [];
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.animationFrameId !== undefined) {
+            window.cancelAnimationFrame(this.animationFrameId);
+        }
+    }
+    initialize() {
+        // Noop
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('isOpen') && this.isOpen) {
+            this.onAnimationFrame();
+        }
+    }
+    render() {
+        return html `
+      ${when(this.interfaceDimensions, () => html `
+          <style>
+            atomic-modal::part(backdrop) {
+              top: ${this.interfaceDimensions.top}px;
+              left: ${this.interfaceDimensions.left}px;
+              width: ${this.interfaceDimensions.width}px;
+              height: ${this.interfaceDimensions.height}px;
+            }
+          </style>
+        `)}
+      <atomic-modal
+        .fullscreen=${true}
+        .isOpen=${this.isOpen}
+        .source=${this.openButton}
+        .container=${this}
+        .close=${() => {
+            this.isOpen = false;
+        }}
+        exportparts=${ATOMIC_MODAL_EXPORT_PARTS}
+        .scope=${this.bindings.interfaceElement}
+      >
+        ${this.renderHeader()} ${this.renderBody()}
+      </atomic-modal>
+    `;
+    }
+    renderHeader() {
+        return html `
+      <div slot="header" class="contents">
+        <div part="title" class="font-light truncate">
+          ${this.bindings.i18n.t('user-actions')}
+        </div>
+        ${renderButton({
+            props: {
+                style: 'text-transparent',
+                class: 'grid place-items-center',
+                part: 'close-button',
+                onClick: () => {
+                    this.isOpen = false;
+                },
+                ariaLabel: this.bindings.i18n.t('close'),
+            },
+        })(html `
+          <atomic-icon
+            part="close-icon"
+            class="w-5 h-5"
+            .icon=${CloseIcon}
+          ></atomic-icon>
+        `)}
+      </div>
+    `;
+    }
+    renderBody() {
+        return html `
+      <aside
+        style="height: 100%"
+        slot="body"
+        class="flex flex-col w-full px-2"
+        aria-label=${this.bindings.i18n.t('user-actions-content')}
+      >
+        <atomic-insight-user-actions-timeline
+          .userId=${this.userId}
+          .ticketCreationDateTime=${this.ticketCreationDateTime}
+          .excludedCustomActions=${this.excludedCustomActions}
+          class="flex-1"
+        ></atomic-insight-user-actions-timeline>
+      </aside>
+    `;
+    }
+    onAnimationFrame() {
+        if (!this.isOpen) {
+            this.animationFrameId = undefined;
+            return;
+        }
+        if (this.dimensionChanged()) {
+            this.updateDimensions();
+        }
+        this.animationFrameId = window.requestAnimationFrame(() => this.onAnimationFrame());
+    }
+    dimensionChanged() {
+        if (!this.interfaceDimensions) {
+            return true;
+        }
+        if (!this.bindings?.interfaceElement) {
+            return false;
+        }
+        return !rectEquals(this.interfaceDimensions, this.bindings.interfaceElement.getBoundingClientRect());
+    }
+    updateDimensions() {
+        if (!this.bindings?.interfaceElement) {
+            return;
+        }
+        this.interfaceDimensions =
+            this.bindings.interfaceElement.getBoundingClientRect();
+    }
+};
+AtomicInsightUserActionsModal.styles = css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */atomic-modal::part(body-wrapper),atomic-modal::part(footer-wrapper){padding:2px}`;
+__decorate([
+    state()
+], AtomicInsightUserActionsModal.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightUserActionsModal.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicInsightUserActionsModal.prototype, "interfaceDimensions", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], AtomicInsightUserActionsModal.prototype, "openButton", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'is-open',
+    })
+], AtomicInsightUserActionsModal.prototype, "isOpen", void 0);
+__decorate([
+    property({ type: String, attribute: 'user-id' })
+], AtomicInsightUserActionsModal.prototype, "userId", void 0);
+__decorate([
+    property({ type: String, attribute: 'ticket-creation-date-time' })
+], AtomicInsightUserActionsModal.prototype, "ticketCreationDateTime", void 0);
+__decorate([
+    property({ type: Array, attribute: 'excluded-custom-actions' })
+], AtomicInsightUserActionsModal.prototype, "excludedCustomActions", void 0);
+__decorate([
+    errorGuard(),
+    bindingGuard()
+], AtomicInsightUserActionsModal.prototype, "render", null);
+AtomicInsightUserActionsModal = __decorate([
+    customElement('atomic-insight-user-actions-modal'),
+    bindings(),
+    withTailwindStyles
+], AtomicInsightUserActionsModal);
+export { AtomicInsightUserActionsModal };