@coveo/atomic 3.34.0-pre.3832d9ea2f → 3.34.0-pre.4a147a2f19

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

@@ -0,0 +1,188 @@
+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 AtomicPager_1;
+import { NumberValue, Schema } from '@coveo/bueno';
+import { buildPager, buildSearchStatus, } from '@coveo/headless';
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { when } from 'lit/directives/when.js';
+import { createAppLoadedListener } from "../../common/interface/store";
+import { renderPagerNavigation } from "../../common/pager/pager-navigation";
+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 { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
+import { randomID } from "../../../utils/utils";
+const ArrowLeftIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.5 4.8-4.3 4.5c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0s.3-.9 0-1.3l-3.7-4 3.7-3.9c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z\"/></svg>";
+const ArrowRightIcon = "<svg viewBox=\"0 0 20 20\"><path d=\"m8.5 15.2 4.3-4.6c.3-.4.3-.9 0-1.3l-4.4-4.5c-.3-.4-.9-.4-1.2 0s-.3.9 0 1.3l3.7 4-3.7 3.9c-.3.4-.3.9 0 1.3.4.3 1 .3 1.3-.1z\"/></svg>";
+import { renderPageButtons, renderPagerNextButton, renderPagerPageButton, renderPagerPreviousButton, } from '../../common/pager/pager-buttons';
+/**
+ * The `atomic-pager` provides buttons that allow the end user to navigate through the different result pages.
+ *
+ * @part buttons - The list of the next/previous buttons and page-buttons.
+ * @part page-buttons - The list of page buttons.
+ * @part page-button - The individual page buttons.
+ * @part active-page-button - The active page button.
+ * @part previous-button - The previous page button.
+ * @part next-button - The next page button.
+ * @part previous-button-icon - The icon displayed on the "previous page" button.
+ * @part next-button-icon - The icon displayed on the "next page" button.
+ *
+ * @event atomic/scrollToTop - Emitted when the user clicks any of the buttons rendered by the component.
+ */
+let AtomicPager = AtomicPager_1 = class AtomicPager extends InitializeBindingsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.isAppLoaded = false;
+        /**
+         * The maximum number of page buttons to display in the pager.
+         */
+        this.numberOfPages = 5;
+        /**
+         * The SVG icon to render on the "previous page" button.
+         *
+         * - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location.
+         * - Use a value that starts with `assets://`, to display an icon from the Atomic package.
+         * - Use a stringified SVG to display it directly.
+         */
+        this.previousButtonIcon = ArrowLeftIcon;
+        /**
+         * The SVG icon to render on the "next page" button.
+         *
+         * - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location.
+         * - Use a value that starts with `assets://`, to display an icon from the Atomic package.
+         * - Use a stringified SVG to display it directly.
+         */
+        this.nextButtonIcon = ArrowRightIcon;
+        this.radioGroupName = randomID('atomic-pager-');
+    }
+    initialize() {
+        this.validateProps();
+        this.searchStatus = buildSearchStatus(this.bindings.engine);
+        this.pager = buildPager(this.bindings.engine, {
+            options: { numberOfPages: this.numberOfPages },
+        });
+        createAppLoadedListener(this.bindings.store, (isAppLoaded) => {
+            this.isAppLoaded = isAppLoaded;
+        });
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('numberOfPages')) {
+            this.validateProps();
+        }
+    }
+    render() {
+        const currentGroupName = `${this.radioGroupName}-${this.pagerState.currentPages.join('-')}`;
+        return html `${when(!this.searchStatusState.hasError &&
+            this.searchStatusState.hasResults &&
+            this.isAppLoaded, () => html `
+      ${renderPagerNavigation({
+            props: {
+                i18n: this.bindings.i18n,
+            },
+        })(html `
+          ${renderPagerPreviousButton({
+            props: {
+                icon: this.previousButtonIcon,
+                disabled: !this.pagerState.hasPreviousPage,
+                i18n: this.bindings.i18n,
+                onClick: () => {
+                    this.pager.previousPage();
+                    this.focusOnFirstResultAndScrollToTop();
+                },
+            },
+        })}
+          ${renderPageButtons({
+            props: {
+                i18n: this.bindings.i18n,
+            },
+        })(html `${this.pagerState.currentPages.map((pageNumber, index) => keyed(`page-${pageNumber}-${index}`, renderPagerPageButton({
+            props: {
+                isSelected: this.pager.isCurrentPage(pageNumber),
+                ariaLabel: this.bindings.i18n.t('page-number', {
+                    pageNumber,
+                }),
+                onChecked: () => {
+                    this.pager.selectPage(pageNumber);
+                    this.focusOnFirstResultAndScrollToTop();
+                },
+                page: pageNumber,
+                groupName: currentGroupName,
+                text: pageNumber.toLocaleString(this.bindings.i18n.language),
+            },
+        })))}`)}
+          ${renderPagerNextButton({
+            props: {
+                icon: this.nextButtonIcon,
+                disabled: !this.pagerState.hasNextPage,
+                i18n: this.bindings.i18n,
+                onClick: () => {
+                    this.pager.nextPage();
+                    this.focusOnFirstResultAndScrollToTop();
+                },
+            },
+        })}
+        `)}`)}`;
+    }
+    validateProps() {
+        try {
+            AtomicPager_1.propsSchema.validate({
+                numberOfPages: this.numberOfPages,
+            });
+        }
+        catch (error) {
+            this.error = error;
+            return;
+        }
+    }
+    async focusOnFirstResultAndScrollToTop() {
+        await this.bindings.store.state.resultList?.focusOnFirstResultAfterNextSearch();
+        this.dispatchEvent(new CustomEvent('atomic/scrollToTop'));
+    }
+};
+AtomicPager.propsSchema = new Schema({
+    numberOfPages: new NumberValue({ min: 0 }),
+});
+__decorate([
+    state()
+], AtomicPager.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicPager.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicPager.prototype, "isAppLoaded", void 0);
+__decorate([
+    bindStateToController('pager'),
+    state()
+], AtomicPager.prototype, "pagerState", void 0);
+__decorate([
+    bindStateToController('searchStatus'),
+    state()
+], AtomicPager.prototype, "searchStatusState", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'number-of-pages', type: Number })
+], AtomicPager.prototype, "numberOfPages", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'previous-button-icon', type: String })
+], AtomicPager.prototype, "previousButtonIcon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'next-button-icon', type: String })
+], AtomicPager.prototype, "nextButtonIcon", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicPager.prototype, "render", null);
+AtomicPager = AtomicPager_1 = __decorate([
+    customElement('atomic-pager'),
+    bindings(),
+    withTailwindStyles
+], AtomicPager);
+export { AtomicPager };

package/dist/atomic/components/components/search/index.js

@@ -1,4 +1,5 @@
 // Auto-generated file
+export { AtomicPager } from './atomic-pager/atomic-pager.js';
 export { AtomicQuerySummary } from './atomic-query-summary/atomic-query-summary.js';
 export { AtomicResultsPerPage } from './atomic-results-per-page/atomic-results-per-page.js';
 export { AtomicSearchInterface } from './atomic-search-interface/atomic-search-interface.js';

package/dist/atomic/components/components/search/lazy-index.js

@@ -1,5 +1,6 @@
 // Auto-generated file
 export default {
+    'atomic-pager': async () => await import('./atomic-pager/atomic-pager.js'),
     'atomic-query-summary': async () => await import('./atomic-query-summary/atomic-query-summary.js'),
     'atomic-results-per-page': async () => await import('./atomic-results-per-page/atomic-results-per-page.js'),
     'atomic-search-interface': async () => await import('./atomic-search-interface/atomic-search-interface.js'),

package/dist/atomic/components/generated-answer-common.js

@@ -1,6 +1,6 @@
 import { h } from '@stencil/core/internal/client';
 import { a as SafeStorage, S as StorageItems } from './local-storage-utils.js';
-import { a as getNamedSlotFromHost } from './slot-utils.js';
+import { a as getNamedSlotContent } from './slot-utils.js';
 import { H as Heading } from './stencil-heading.js';
 import { B as Button } from './stencil-button.js';
 import { D as DOMPurify } from './purify.js';
@@ -2746,8 +2746,7 @@ class GeneratedAnswerCommon {
             : this.props.getBindings().i18n.t('generated-answer-copied');
     }
     get hasCustomNoAnswerMessage() {
-        const slot = getNamedSlotFromHost(this.props.host, 'no-answer-message');
-        return !!slot;
+        return getNamedSlotContent(this.props.host, 'no-answer-message').length > 0;
     }
     async copyToClipboard(answer) {
         try {