@coveo/atomic 3.42.0 → 3.42.1

package/dist/atomic/components/components/search/atomic-did-you-mean/atomic-did-you-mean.js

@@ -0,0 +1,147 @@
+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 { Schema, StringValue } from '@coveo/bueno';
+import { buildDidYouMean, buildQueryTrigger, } from '@coveo/headless';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
+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 { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+import { renderAutoCorrection } from '../../common/query-correction/auto-correction';
+import { renderCorrection } from '../../common/query-correction/correction';
+import { renderTriggerCorrection } from '../../common/query-correction/trigger-correction';
+/**
+ * The `atomic-did-you-mean` component is responsible for handling query corrections. When a query returns no result but finds a possible query correction, the component either suggests the correction or automatically triggers a new query with the suggested term.
+ *
+ * @part no-results - The text displayed when there are no results.
+ * @part auto-corrected - The text displayed for the automatically corrected query.
+ * @part showing-results-for - The first paragraph of the text displayed when a query trigger changes a query.
+ * @part search-instead-for - The second paragraph of the text displayed when a query trigger changes a query.
+ * @part did-you-mean - The text displayed around the button to manually correct a query.
+ * @part correction-btn - The button used to manually correct a query.
+ * @part undo-btn - The button used to undo a query changed by a query trigger.
+ * @part highlight - The query highlights.
+ */
+let AtomicDidYouMean = class AtomicDidYouMean extends LitElement {
+    constructor() {
+        super();
+        /**
+         * Whether to automatically apply corrections for queries that would otherwise return no results.
+         * When `automaticallyCorrectQuery` is `true`, the component automatically triggers a new query using the suggested term.
+         * When `automaticallyCorrectQuery` is `false`, the component returns the suggested term without triggering a new query.
+         *
+         * The default value is `true`.
+         */
+        this.automaticallyCorrectQuery = true;
+        /**
+         * Define which query correction system to use
+         *
+         * `legacy`: Query correction is powered by the legacy index system. This system relies on an algorithm using solely the index content to compute the suggested terms.
+         * `next`: Query correction is powered by a machine learning system, requiring a valid query suggestion model configured in your Coveo environment to function properly. This system relies on machine learning algorithms to compute the suggested terms.
+         *
+         * Default value is `next`.
+         */
+        this.queryCorrectionMode = 'next';
+        new ValidatePropsController(this, () => ({
+            queryCorrectionMode: this.queryCorrectionMode,
+        }), new Schema({
+            queryCorrectionMode: new StringValue({
+                constrainTo: ['legacy', 'next'],
+            }),
+        }), false);
+    }
+    initialize() {
+        this.didYouMean = buildDidYouMean(this.bindings.engine, {
+            options: {
+                automaticallyCorrectQuery: this.automaticallyCorrectQuery,
+                queryCorrectionMode: this.queryCorrectionMode,
+            },
+        });
+        this.queryTrigger = buildQueryTrigger(this.bindings.engine);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('queryCorrectionMode')) {
+            this.didYouMean?.updateQueryCorrectionMode(this.queryCorrectionMode);
+        }
+    }
+    get content() {
+        const { hasQueryCorrection, wasAutomaticallyCorrected } = this.didYouMeanState;
+        const hasTrigger = this.queryTriggerState.wasQueryModified;
+        if (hasQueryCorrection && wasAutomaticallyCorrected) {
+            return renderAutoCorrection({
+                props: {
+                    correctedTo: this.didYouMeanState.wasCorrectedTo,
+                    originalQuery: this.didYouMeanState.originalQuery,
+                    i18n: this.bindings.i18n,
+                },
+            });
+        }
+        if (hasQueryCorrection) {
+            return renderCorrection({
+                props: {
+                    correctedQuery: this.didYouMeanState.queryCorrection.correctedQuery,
+                    i18n: this.bindings.i18n,
+                    onClick: () => this.didYouMean.applyCorrection(),
+                },
+            });
+        }
+        if (hasTrigger) {
+            return renderTriggerCorrection({
+                props: {
+                    i18n: this.bindings.i18n,
+                    i18nKeyShowingItemsFor: 'showing-results-for',
+                    correctedQuery: this.queryTriggerState.newQuery,
+                    originalQuery: this.queryTriggerState.originalQuery,
+                    onClick: () => this.queryTrigger.undo(),
+                },
+            });
+        }
+        return nothing;
+    }
+    render() {
+        const hasCorrection = this.didYouMeanState.hasQueryCorrection ||
+            this.queryTriggerState.wasQueryModified;
+        return html `${when(hasCorrection, () => this.content)}`;
+    }
+};
+__decorate([
+    bindStateToController('didYouMean'),
+    state()
+], AtomicDidYouMean.prototype, "didYouMeanState", void 0);
+__decorate([
+    bindStateToController('queryTrigger'),
+    state()
+], AtomicDidYouMean.prototype, "queryTriggerState", void 0);
+__decorate([
+    state()
+], AtomicDidYouMean.prototype, "error", void 0);
+__decorate([
+    property({
+        reflect: true,
+        type: Boolean,
+        converter: booleanConverter,
+        attribute: 'automatically-correct-query',
+    })
+], AtomicDidYouMean.prototype, "automaticallyCorrectQuery", void 0);
+__decorate([
+    property({ reflect: true, type: String, attribute: 'query-correction-mode' })
+], AtomicDidYouMean.prototype, "queryCorrectionMode", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicDidYouMean.prototype, "render", null);
+AtomicDidYouMean = __decorate([
+    customElement('atomic-did-you-mean'),
+    withTailwindStyles,
+    bindings()
+], AtomicDidYouMean);
+export { AtomicDidYouMean };

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

@@ -0,0 +1,373 @@
+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 { ArrayValue, NumberValue, Schema, StringValue } from '@coveo/bueno';
+import { buildFoldedResultList, buildInteractiveResult, buildResultsPerPage, buildTabManager, } from '@coveo/headless';
+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 listDisplayStyles from "../../common/item-list/styles/list-display.tw.css";
+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 { renderTabWrapper } from "../../common/tabs/tab-wrapper";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
+import { arrayConverter } from "../../../converters/array-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 { 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-result/atomic-result";
+import "../atomic-result-template/atomic-result-template";
+/**
+ * The `atomic-folded-result-list` component is responsible for displaying folded query results, by applying one or more result templates for up to three layers (that is, to the result, child, and grandchild).
+ *
+ * @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 AtomicFoldedResultList = class AtomicFoldedResultList 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 tabs on which the folded result list can be displayed. This property should not be used at the same time as `tabs-excluded`.
+         *
+         * Set this property as a stringified JSON array, for example:
+         * ```html
+         *  <atomic-folded-result-list tabs-included='["tabIDA", "tabIDB"]'></atomic-folded-result-list>
+         * ```
+         * If you don't set this property, the folded result list can be displayed on any tab. Otherwise, the folded result list can only be displayed on the specified tabs.
+         */
+        this.tabsIncluded = [];
+        /**
+         * The tabs on which this folded result list must not be displayed. This property should not be used at the same time as `tabs-included`.
+         *
+         * Set this property as a stringified JSON array, for example:
+         * ```html
+         *  <atomic-folded-result-list tabs-excluded='["tabIDA", "tabIDB"]'></atomic-folded-result-list>
+         * ```
+         * If you don't set this property, the folded result list can be displayed on any tab. Otherwise, the folded result list won't be displayed on any of the specified tabs.
+         */
+        this.tabsExcluded = [];
+        /**
+         * The initial number of child results to request for each folded collection, before expansion.
+         *
+         * @defaultValue `2`
+         *
+         * @example For an email thread with a total of 20 messages, using the default value of `2` will request the top two child messages, based on the current sort criteria and query, to be returned as children of the parent message.
+         * The user can then click to expand the collection and see the remaining messages that match the current query (that is, not necessarily all remaining 18 messages). Those messages will be sorted based on the current sort criteria (that is, not necessarily by date).
+         * For more info on Result Folding, see [Result Folding](https://docs.coveo.com/en/1884).
+         */
+        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,
+            tabsIncluded: this.tabsIncluded,
+            tabsExcluded: this.tabsExcluded,
+            numberOfFoldedResults: this.numberOfFoldedResults,
+        }), new Schema({
+            density: new StringValue({
+                constrainTo: ['normal', 'comfortable', 'compact'],
+            }),
+            imageSize: new StringValue({
+                constrainTo: ['small', 'large', 'icon', 'none'],
+            }),
+            tabsIncluded: new ArrayValue({
+                each: new StringValue({}),
+            }),
+            tabsExcluded: new ArrayValue({
+                each: new StringValue({}),
+            }),
+            numberOfFoldedResults: new NumberValue({ min: 0 }),
+        }));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('atomic/resolveFoldedResultList', this.handleResolveFoldedResultList);
+        this.removeEventListener('atomic/loadCollection', this.handleLoadCollection);
+    }
+    initialize() {
+        this.foldedResultList = this.initFolding();
+        this.resultsPerPage = buildResultsPerPage(this.bindings.engine);
+        this.tabManager = buildTabManager(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('tabManagerState')) {
+            const oldState = changedProperties.get('tabManagerState');
+            if (this.tabManagerState?.activeTab !== oldState?.activeTab) {
+                this.bindings.store.unsetLoadingFlag(this.loadingFlag);
+            }
+        }
+        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();
+    }
+    async updateResultReadyState() {
+        if (this.isAppLoaded &&
+            !this.isEveryResultReady &&
+            this.foldedResultListState?.firstSearchExecuted &&
+            this.foldedResultListState?.results?.length > 0) {
+            await this.getUpdateComplete();
+            this.isEveryResultReady = true;
+        }
+    }
+    render() {
+        return html `${renderTabWrapper({
+            props: {
+                tabsIncluded: this.tabsIncluded,
+                tabsExcluded: this.tabsExcluded,
+                activeTab: this.tabManagerState?.activeTab,
+            },
+        })(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,
+                },
+            })))}
+            `;
+        })}`))}`;
+    }
+    initFolding(props = { options: {} }) {
+        return buildFoldedResultList(this.bindings.engine, {
+            options: {
+                ...props.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-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-result
+            part="outline"
+            ${ref((element) => element instanceof HTMLElement &&
+                this.resultListCommon.setNewResultRef(element, index))}
+            .content=${this.getContent(collection)}
+            .density=${this.density}
+            .display=${this.display}
+            .imageSize=${this.imageSize}
+            .interactiveResult=${this.getInteractiveResult(collection)}
+            .loadingFlag=${this.loadingFlag}
+            .result=${collection}
+            .renderingFunction=${this.itemRenderingFunction}
+            .store=${this.bindings.store}
+          ></atomic-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 buildInteractiveResult(this.bindings.engine, {
+            options: { result },
+        });
+    }
+    getResultId(collection) {
+        const result = extractUnfoldedItem(collection);
+        return this.resultListCommon.getResultId(result.uniqueId, this.foldedResultListState.searchResponseId, this.density, this.imageSize);
+    }
+};
+AtomicFoldedResultList.styles = [placeholderStyles, listDisplayStyles];
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicFoldedResultList.prototype, "density", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'image-size', type: String })
+], AtomicFoldedResultList.prototype, "imageSize", void 0);
+__decorate([
+    property({
+        attribute: 'tabs-included',
+        converter: arrayConverter,
+        type: Array,
+    })
+], AtomicFoldedResultList.prototype, "tabsIncluded", void 0);
+__decorate([
+    property({
+        attribute: 'tabs-excluded',
+        converter: arrayConverter,
+        type: Array,
+    })
+], AtomicFoldedResultList.prototype, "tabsExcluded", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'collection-field', type: String })
+], AtomicFoldedResultList.prototype, "collectionField", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'parent-field', type: String })
+], AtomicFoldedResultList.prototype, "parentField", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'child-field', type: String })
+], AtomicFoldedResultList.prototype, "childField", void 0);
+__decorate([
+    property({
+        reflect: true,
+        attribute: 'number-of-folded-results',
+        type: Number,
+    })
+], AtomicFoldedResultList.prototype, "numberOfFoldedResults", void 0);
+__decorate([
+    state()
+], AtomicFoldedResultList.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicFoldedResultList.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicFoldedResultList.prototype, "isAppLoaded", void 0);
+__decorate([
+    state()
+], AtomicFoldedResultList.prototype, "isEveryResultReady", void 0);
+__decorate([
+    state()
+], AtomicFoldedResultList.prototype, "resultTemplateRegistered", void 0);
+__decorate([
+    state()
+], AtomicFoldedResultList.prototype, "templateHasError", void 0);
+__decorate([
+    bindStateToController('foldedResultList'),
+    state()
+], AtomicFoldedResultList.prototype, "foldedResultListState", void 0);
+__decorate([
+    bindStateToController('resultsPerPage'),
+    state()
+], AtomicFoldedResultList.prototype, "resultsPerPageState", void 0);
+__decorate([
+    bindStateToController('tabManager'),
+    state()
+], AtomicFoldedResultList.prototype, "tabManagerState", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicFoldedResultList.prototype, "render", null);
+AtomicFoldedResultList = __decorate([
+    customElement('atomic-folded-result-list'),
+    bindings(),
+    withTailwindStyles
+], AtomicFoldedResultList);
+export { AtomicFoldedResultList };

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

@@ -0,0 +1,124 @@
+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 AtomicNotifications_1;
+import { NumberValue, Schema } from '@coveo/bueno';
+import { buildNotifyTrigger, } from '@coveo/headless';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { renderHeading } from "../../common/heading";
+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 InfoIcon = "<svg viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<circle cx=\"14\" cy=\"14\" r=\"13.5\" stroke=\"currentColor\" stroke-linecap=\"round\"/>\n<path d=\"M14.5 21.5L14.5 9.5L11.5 9.5M14.5 21.5L10.5 21.5M14.5 21.5L18.5 21.5M14.5 6.5L14.5 5.5\" stroke=\"currentColor\" stroke-linecap=\"round\"/>\n</svg>\n";
+import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
+import { AriaLiveRegionController } from "../../../utils/accessibility-utils";
+/**
+ * The `atomic-notifications` component is responsible for displaying notifications generated by the Coveo Search API (see [Trigger](https://docs.coveo.com/en/1458)).
+ *
+ * @part notifications - The wrapper around the notifications.
+ * @part notification - The wrapper around a single notification.
+ * @part icon - The icon of the notification.
+ * @part text - The text of the notification.
+ */
+let AtomicNotifications = AtomicNotifications_1 = class AtomicNotifications extends InitializeBindingsMixin(LitElement) {
+    constructor() {
+        super();
+        /**
+         * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use above the notifications, from 1 to 6.
+         */
+        this.headingLevel = 0;
+        this.ariaMessage = new AriaLiveRegionController(this, 'notifications');
+        new ValidatePropsController(this, () => ({
+            headingLevel: this.headingLevel,
+        }), AtomicNotifications_1.schema, 
+        // TODO V4: KIT-5197 - Remove false
+        false);
+    }
+    initialize() {
+        this.notifyTrigger = buildNotifyTrigger(this.bindings.engine);
+    }
+    get notifications() {
+        return this.notifyTriggerState?.notifications || [];
+    }
+    generateAriaMessage() {
+        if (this.notifications.length === 1) {
+            return this.notifications[0];
+        }
+        return this.notifications
+            .map((text, i) => this.bindings.i18n.t('notification-n', { n: i + 1, text }))
+            .join('\n');
+    }
+    renderNotification(text) {
+        return html `
+      <div
+        part="notification"
+        class="bg-background border-neutral-dark flex items-center rounded-md border p-6 shadow-lg"
+      >
+        <atomic-icon
+          icon=${this.icon ?? InfoIcon}
+          part="icon"
+          class="text-neutral-dark mr-6 h-7 w-7"
+        ></atomic-icon>
+        <span part="text" class="text-on-background text-base leading-5">
+          ${text}
+        </span>
+      </div>
+    `;
+    }
+    renderNotifications() {
+        return html `
+      <div part="notifications" class="flex flex-col gap-4">
+        ${map(this.notifications, (text) => this.renderNotification(text))}
+      </div>
+    `;
+    }
+    render() {
+        if (!this.notifications.length) {
+            return html `${nothing}`;
+        }
+        this.ariaMessage.message = this.generateAriaMessage();
+        return html `
+      ${renderHeading({
+            props: { level: this.headingLevel, class: 'sr-only' },
+        })(html `${this.bindings.i18n.t('notifications')}`)}
+      ${this.renderNotifications()}
+    `;
+    }
+};
+AtomicNotifications.schema = new Schema({
+    headingLevel: new NumberValue({ min: 0, max: 6, required: false }),
+});
+__decorate([
+    state()
+], AtomicNotifications.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicNotifications.prototype, "error", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'heading-level' })
+], AtomicNotifications.prototype, "headingLevel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AtomicNotifications.prototype, "icon", void 0);
+__decorate([
+    bindStateToController('notifyTrigger'),
+    state()
+], AtomicNotifications.prototype, "notifyTriggerState", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicNotifications.prototype, "render", null);
+AtomicNotifications = AtomicNotifications_1 = __decorate([
+    customElement('atomic-notifications'),
+    bindings(),
+    withTailwindStyles
+], AtomicNotifications);
+export { AtomicNotifications };