feat(atomic-commerce): products-per-page

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts

@@ -13,6 +13,7 @@ AtomicCategoryFacet,
 AtomicColorFacet,
 AtomicCommerceFacets,
 AtomicCommerceLoadMoreProducts,
+AtomicCommerceProductsPerPage,
 AtomicCommerceSearchBox,
 AtomicComponentError,
 AtomicDidYouMean,
@@ -113,6 +114,7 @@ AtomicCategoryFacet,
 AtomicColorFacet,
 AtomicCommerceFacets,
 AtomicCommerceLoadMoreProducts,
+AtomicCommerceProductsPerPage,
 AtomicCommerceSearchBox,
 AtomicComponentError,
 AtomicDidYouMean,

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts

@@ -181,6 +181,32 @@ export class AtomicCommerceLoadMoreProducts {
 export declare interface AtomicCommerceLoadMoreProducts extends Components.AtomicCommerceLoadMoreProducts {}
 
 
+@ProxyCmp({
+  inputs: ['choicesDisplayed', 'initialChoice']
+})
+@Component({
+  selector: 'atomic-commerce-products-per-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['choicesDisplayed', 'initialChoice'],
+})
+export class AtomicCommerceProductsPerPage {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['atomic/scrollToTop']);
+  }
+}
+
+
+export declare interface AtomicCommerceProductsPerPage extends Components.AtomicCommerceProductsPerPage {
+
+  'atomic/scrollToTop': EventEmitter<CustomEvent<any>>;
+}
+
+
 @ProxyCmp({
   inputs: ['clearFilters', 'disableSearch', 'minimumQueryLength', 'numberOfQueries', 'redirectionUrl', 'suggestionDelay', 'suggestionTimeout']
 })

packages/atomic-react/src/components/stencil-generated/commerce/index.ts

@@ -18,6 +18,7 @@ export const AtomicCommerceNoProducts = /*@__PURE__*/createReactComponent<JSX.At
 export const AtomicCommerceNumericFacet = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceNumericFacet, HTMLAtomicCommerceNumericFacetElement>('atomic-commerce-numeric-facet');
 export const AtomicCommercePager = /*@__PURE__*/createReactComponent<JSX.AtomicCommercePager, HTMLAtomicCommercePagerElement>('atomic-commerce-pager');
 export const AtomicCommerceProductList = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceProductList, HTMLAtomicCommerceProductListElement>('atomic-commerce-product-list');
+export const AtomicCommerceProductsPerPage = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceProductsPerPage, HTMLAtomicCommerceProductsPerPageElement>('atomic-commerce-products-per-page');
 export const AtomicCommerceRecommendationInterface = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceRecommendationInterface, HTMLAtomicCommerceRecommendationInterfaceElement>('atomic-commerce-recommendation-interface');
 export const AtomicCommerceRecommendationList = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceRecommendationList, HTMLAtomicCommerceRecommendationListElement>('atomic-commerce-recommendation-list');
 export const AtomicCommerceSearchBox = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceSearchBox, HTMLAtomicCommerceSearchBoxElement>('atomic-commerce-search-box');

packages/atomic/src/components.d.ts

@@ -458,6 +458,21 @@ export namespace Components {
          */
         "setRenderFunction": (productRenderingFunction: ItemRenderingFunction) => Promise<void>;
     }
+    /**
+     * The `atomic-commerce-products-per-page` component determines how many products to display per page.
+     * @alpha 
+     */
+    interface AtomicCommerceProductsPerPage {
+        /**
+          * A list of choices for the number of products to display per page, separated by commas.
+         */
+        "choicesDisplayed": string;
+        /**
+          * The initial selection for the number of product per page. This should be part of the `choicesDisplayed` option. By default, this is set to the first value in `choicesDisplayed`.
+          * @type {number}
+         */
+        "initialChoice"?: number;
+    }
     /**
      * The `atomic-commerce-query-error` component handles fatal errors when performing a query on the Commerce API. When the error is known, it displays a link to relevant documentation for debugging purposes. When the error is unknown, it displays a small text area with the JSON content of the error.
      */
@@ -3295,6 +3310,10 @@ export interface AtomicCommercePagerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAtomicCommercePagerElement;
 }
+export interface AtomicCommerceProductsPerPageCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAtomicCommerceProductsPerPageElement;
+}
 export interface AtomicCommerceSearchBoxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAtomicCommerceSearchBoxElement;
@@ -3575,6 +3594,27 @@ declare global {
         prototype: HTMLAtomicCommerceProductListElement;
         new (): HTMLAtomicCommerceProductListElement;
     };
+    interface HTMLAtomicCommerceProductsPerPageElementEventMap {
+        "atomic/scrollToTop": any;
+    }
+    /**
+     * The `atomic-commerce-products-per-page` component determines how many products to display per page.
+     * @alpha 
+     */
+    interface HTMLAtomicCommerceProductsPerPageElement extends Components.AtomicCommerceProductsPerPage, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAtomicCommerceProductsPerPageElementEventMap>(type: K, listener: (this: HTMLAtomicCommerceProductsPerPageElement, ev: AtomicCommerceProductsPerPageCustomEvent<HTMLAtomicCommerceProductsPerPageElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLAtomicCommerceProductsPerPageElementEventMap>(type: K, listener: (this: HTMLAtomicCommerceProductsPerPageElement, ev: AtomicCommerceProductsPerPageCustomEvent<HTMLAtomicCommerceProductsPerPageElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLAtomicCommerceProductsPerPageElement: {
+        prototype: HTMLAtomicCommerceProductsPerPageElement;
+        new (): HTMLAtomicCommerceProductsPerPageElement;
+    };
     /**
      * The `atomic-commerce-query-error` component handles fatal errors when performing a query on the Commerce API. When the error is known, it displays a link to relevant documentation for debugging purposes. When the error is unknown, it displays a small text area with the JSON content of the error.
      */
@@ -5312,6 +5352,7 @@ declare global {
         "atomic-commerce-numeric-facet": HTMLAtomicCommerceNumericFacetElement;
         "atomic-commerce-pager": HTMLAtomicCommercePagerElement;
         "atomic-commerce-product-list": HTMLAtomicCommerceProductListElement;
+        "atomic-commerce-products-per-page": HTMLAtomicCommerceProductsPerPageElement;
         "atomic-commerce-query-error": HTMLAtomicCommerceQueryErrorElement;
         "atomic-commerce-query-summary": HTMLAtomicCommerceQuerySummaryElement;
         "atomic-commerce-recommendation-interface": HTMLAtomicCommerceRecommendationInterfaceElement;
@@ -5856,6 +5897,22 @@ declare namespace LocalJSX {
          */
         "numberOfPlaceholders"?: number;
     }
+    /**
+     * The `atomic-commerce-products-per-page` component determines how many products to display per page.
+     * @alpha 
+     */
+    interface AtomicCommerceProductsPerPage {
+        /**
+          * A list of choices for the number of products to display per page, separated by commas.
+         */
+        "choicesDisplayed"?: string;
+        /**
+          * The initial selection for the number of product per page. This should be part of the `choicesDisplayed` option. By default, this is set to the first value in `choicesDisplayed`.
+          * @type {number}
+         */
+        "initialChoice"?: number;
+        "onAtomic/scrollToTop"?: (event: AtomicCommerceProductsPerPageCustomEvent<any>) => void;
+    }
     /**
      * The `atomic-commerce-query-error` component handles fatal errors when performing a query on the Commerce API. When the error is known, it displays a link to relevant documentation for debugging purposes. When the error is unknown, it displays a small text area with the JSON content of the error.
      */
@@ -8569,6 +8626,7 @@ declare namespace LocalJSX {
         "atomic-commerce-numeric-facet": AtomicCommerceNumericFacet;
         "atomic-commerce-pager": AtomicCommercePager;
         "atomic-commerce-product-list": AtomicCommerceProductList;
+        "atomic-commerce-products-per-page": AtomicCommerceProductsPerPage;
         "atomic-commerce-query-error": AtomicCommerceQueryError;
         "atomic-commerce-query-summary": AtomicCommerceQuerySummary;
         "atomic-commerce-recommendation-interface": AtomicCommerceRecommendationInterface;
@@ -8816,6 +8874,11 @@ declare module "@stencil/core" {
              */
             "atomic-commerce-pager": LocalJSX.AtomicCommercePager & JSXBase.HTMLAttributes<HTMLAtomicCommercePagerElement>;
             "atomic-commerce-product-list": LocalJSX.AtomicCommerceProductList & JSXBase.HTMLAttributes<HTMLAtomicCommerceProductListElement>;
+            /**
+             * The `atomic-commerce-products-per-page` component determines how many products to display per page.
+             * @alpha 
+             */
+            "atomic-commerce-products-per-page": LocalJSX.AtomicCommerceProductsPerPage & JSXBase.HTMLAttributes<HTMLAtomicCommerceProductsPerPageElement>;
             /**
              * The `atomic-commerce-query-error` component handles fatal errors when performing a query on the Commerce API. When the error is known, it displays a link to relevant documentation for debugging purposes. When the error is unknown, it displays a small text area with the JSON content of the error.
              */

packages/atomic/src/components/commerce/atomic-commerce-pager/atomic-commerce-pager.tsx

@@ -109,7 +109,7 @@ export class AtomicCommercePager
     return (
       <PagerGuard
         hasError={false}
-        hasResults={this.pagerState.totalPages > 1}
+        hasItems={this.pagerState.totalPages > 1}
         isAppLoaded={this.bindings.store.isAppLoaded()}
       >
         <PagerNavigation i18n={this.bindings.i18n}>

packages/atomic/src/components/commerce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.new.stories.tsx

@@ -0,0 +1,66 @@
+import {
+  playExecuteFirstSearch,
+  wrapInCommerceInterface,
+} from '@coveo/atomic/storybookUtils/commerce-interface-wrapper';
+import {parameters} from '@coveo/atomic/storybookUtils/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/render-component';
+import type {Meta, StoryObj as Story} from '@storybook/web-components';
+import {html} from 'lit/static-html.js';
+
+const {decorator, play} = wrapInCommerceInterface({skipFirstSearch: true});
+
+const meta: Meta = {
+  component: 'atomic-commerce-products-per-page',
+  title: 'Atomic-Commerce/ProductsPerPage',
+  id: 'atomic-commerce-products-per-page',
+
+  render: renderComponent,
+  decorators: [decorator],
+  parameters,
+  play: async (context) => {
+    await play(context);
+    await playExecuteFirstSearch(context);
+  },
+};
+
+export default meta;
+
+export const Default: Story = {
+  name: 'atomic-commerce-products-per-page',
+};
+
+export const InPage: Story = {
+  name: 'In a page',
+  decorators: [
+    (story) =>
+      html` <atomic-commerce-layout>
+        <atomic-layout-section section="search"> </atomic-layout-section>
+        <atomic-layout-section section="facets">
+          <atomic-commerce-facets></atomic-commerce-facets>
+        </atomic-layout-section>
+        <atomic-layout-section section="main">
+          <atomic-layout-section section="status">
+            <atomic-commerce-query-summary></atomic-commerce-query-summary>
+            <atomic-commerce-sort-dropdown></atomic-commerce-sort-dropdown>
+          </atomic-layout-section>
+          <atomic-layout-section section="products">
+            <atomic-commerce-product-list
+              display="grid"
+              density="compact"
+              image-size="small"
+            >
+            </atomic-commerce-product-list>
+            <atomic-commerce-query-error></atomic-commerce-query-error>
+          </atomic-layout-section>
+          <atomic-layout-section section="pagination">
+            <atomic-commerce-pager></atomic-commerce-pager>
+            ${story()}
+          </atomic-layout-section>
+        </atomic-layout-section>
+      </atomic-commerce-layout>`,
+  ],
+  play: async (context) => {
+    await play(context);
+    await playExecuteFirstSearch(context);
+  },
+};

packages/atomic/src/components/commerce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.pcss

@@ -0,0 +1,5 @@
+@import '../../../global/global.pcss';
+
+.btn-page {
+  @apply w-10 h-10;
+}