feat(atomic Commerce): add AtomicCommerceSortDropdown

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

@@ -35,7 +35,6 @@ AtomicCommerceSearchBox,
 AtomicCommerceSearchBoxInstantProducts,
 AtomicCommerceSearchBoxQuerySuggestions,
 AtomicCommerceSearchBoxRecentQueries,
-AtomicCommerceSortDropdown,
 AtomicCommerceText,
 AtomicCommerceTimeframeFacet,
 AtomicComponentError,
@@ -142,7 +141,8 @@ AtomicTabManager,
 AtomicTableElement,
 AtomicText,
 AtomicTimeframe,
-AtomicTimeframeFacet
+AtomicTimeframeFacet,
+StencilAtomicCommerceSortDropdown
 } from './components';
 
 
@@ -181,7 +181,6 @@ AtomicCommerceSearchBox,
 AtomicCommerceSearchBoxInstantProducts,
 AtomicCommerceSearchBoxQuerySuggestions,
 AtomicCommerceSearchBoxRecentQueries,
-AtomicCommerceSortDropdown,
 AtomicCommerceText,
 AtomicCommerceTimeframeFacet,
 AtomicComponentError,
@@ -288,7 +287,8 @@ AtomicTabManager,
 AtomicTableElement,
 AtomicText,
 AtomicTimeframe,
-AtomicTimeframeFacet
+AtomicTimeframeFacet,
+StencilAtomicCommerceSortDropdown
 ]
 
 

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

@@ -697,27 +697,6 @@ export class AtomicCommerceSearchBoxRecentQueries {
 export declare interface AtomicCommerceSearchBoxRecentQueries extends Components.AtomicCommerceSearchBoxRecentQueries {}
 
 
-@ProxyCmp({
-})
-@Component({
-  selector: 'atomic-commerce-sort-dropdown',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [],
-})
-export class AtomicCommerceSortDropdown {
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface AtomicCommerceSortDropdown extends Components.AtomicCommerceSortDropdown {}
-
-
 @ProxyCmp({
   inputs: ['count', 'value']
 })
@@ -3106,3 +3085,24 @@ export class AtomicTimeframeFacet {
 export declare interface AtomicTimeframeFacet extends Components.AtomicTimeframeFacet {}
 
 
+@ProxyCmp({
+})
+@Component({
+  selector: 'stencil-atomic-commerce-sort-dropdown',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [],
+})
+export class StencilAtomicCommerceSortDropdown {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface StencilAtomicCommerceSortDropdown extends Components.StencilAtomicCommerceSortDropdown {}
+
+

packages/atomic/src/autoloader/index.ts

@@ -1,6 +1,11 @@
-//@ts-expect-error TODO: Simplify path to target some kind of index file?
+//@ts-ignore
+//TODO: Simplify path to target some kind of index file?
+import commerceElementMap from '../components/components/commerce/lazy-index.js';
+//@ts-ignore
 import searchElementMap from '../components/components/search/lazy-index.js';
 
+const elementMap = {...searchElementMap, ...commerceElementMap};
+
 if (typeof window !== 'undefined') {
   /**
    * Checks a node for undefined elements and attempts to register them.
@@ -47,7 +52,7 @@ if (typeof window !== 'undefined') {
       return Promise.resolve();
     }
 
-    return searchElementMap[tagName]?.();
+    return elementMap[tagName]?.();
   };
 
   const observer = new MutationObserver((mutations) => {

packages/atomic/src/components.d.ts

@@ -7,10 +7,9 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { AutomaticFacet, CategoryFacetSortCriterion, DateFilterRange, DateRangeRequest, FacetResultsMustMatch, FacetSortCriterion, FoldedResult, GeneratedAnswer, GeneratedAnswerCitation, InlineLink, InteractiveCitation, InteractiveResult, LogLevel as LogLevel1, RangeFacetRangeAlgorithm, RangeFacetSortCriterion, Result, ResultTemplate, ResultTemplateCondition, SearchEngine, SearchStatus } from "@coveo/headless";
 import { CategoryFacet, CommerceEngine, DateFacet, InteractiveProduct, LogLevel, NumericFacet, Product, ProductListing, ProductListingSummaryState, ProductTemplate, ProductTemplateCondition, RegularFacet, Search, SearchSummaryState, Summary } from "@coveo/headless/commerce";
-import { CommerceBindings as Bindings } from "./components/commerce/atomic-commerce-interface/atomic-commerce-interface";
+import { CommerceBindings as Bindings, CommerceInitializationOptions } from "./components/commerce/atomic-commerce-interface/lit-stencil-common-types";
 import { Range } from "./components/commerce/facets/facet-number-input/atomic-commerce-facet-number-input";
 import { i18n } from "i18next";
-import { CommerceInitializationOptions } from "./components/commerce/atomic-commerce-interface/atomic-commerce-interface";
 import { StandaloneSearchBoxData } from "./utils/local-storage-utils";
 import { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout } from "./components/common/layout/display-options";
 import { ItemRenderingFunction } from "./components/common/item-list/item-list-common";
@@ -41,10 +40,9 @@ import { AriaLabelGenerator as AriaLabelGenerator1 } from "./components/search/s
 import { InitializationOptions } from "./components/search/atomic-search-interface/atomic-search-interface";
 export { AutomaticFacet, CategoryFacetSortCriterion, DateFilterRange, DateRangeRequest, FacetResultsMustMatch, FacetSortCriterion, FoldedResult, GeneratedAnswer, GeneratedAnswerCitation, InlineLink, InteractiveCitation, InteractiveResult, LogLevel as LogLevel1, RangeFacetRangeAlgorithm, RangeFacetSortCriterion, Result, ResultTemplate, ResultTemplateCondition, SearchEngine, SearchStatus } from "@coveo/headless";
 export { CategoryFacet, CommerceEngine, DateFacet, InteractiveProduct, LogLevel, NumericFacet, Product, ProductListing, ProductListingSummaryState, ProductTemplate, ProductTemplateCondition, RegularFacet, Search, SearchSummaryState, Summary } from "@coveo/headless/commerce";
-export { CommerceBindings as Bindings } from "./components/commerce/atomic-commerce-interface/atomic-commerce-interface";
+export { CommerceBindings as Bindings, CommerceInitializationOptions } from "./components/commerce/atomic-commerce-interface/lit-stencil-common-types";
 export { Range } from "./components/commerce/facets/facet-number-input/atomic-commerce-facet-number-input";
 export { i18n } from "i18next";
-export { CommerceInitializationOptions } from "./components/commerce/atomic-commerce-interface/atomic-commerce-interface";
 export { StandaloneSearchBoxData } from "./utils/local-storage-utils";
 export { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout } from "./components/common/layout/display-options";
 export { ItemRenderingFunction } from "./components/common/item-list/item-list-common";
@@ -754,12 +752,6 @@ export namespace Components {
          */
         "maxWithoutQuery"?: number;
     }
-    /**
-     * The `atomic-commerce-sort-dropdown` component renders a dropdown that the end user can interact with to select the criteria to use when sorting products.
-     * @alpha 
-     */
-    interface AtomicCommerceSortDropdown {
-    }
     /**
      * @alpha The `atomic-commerce-text` component leverages the I18n translation module through the atomic-commerce-interface.
      */
@@ -3825,6 +3817,12 @@ export namespace Components {
          */
         "withDatePicker": boolean;
     }
+    /**
+     * The `atomic-commerce-sort-dropdown` component renders a dropdown that the end user can interact with to select the criteria to use when sorting products.
+     * @alpha 
+     */
+    interface StencilAtomicCommerceSortDropdown {
+    }
 }
 export interface AtomicCommerceFacetNumberInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -4286,16 +4284,6 @@ declare global {
         prototype: HTMLAtomicCommerceSearchBoxRecentQueriesElement;
         new (): HTMLAtomicCommerceSearchBoxRecentQueriesElement;
     };
-    /**
-     * The `atomic-commerce-sort-dropdown` component renders a dropdown that the end user can interact with to select the criteria to use when sorting products.
-     * @alpha 
-     */
-    interface HTMLAtomicCommerceSortDropdownElement extends Components.AtomicCommerceSortDropdown, HTMLStencilElement {
-    }
-    var HTMLAtomicCommerceSortDropdownElement: {
-        prototype: HTMLAtomicCommerceSortDropdownElement;
-        new (): HTMLAtomicCommerceSortDropdownElement;
-    };
     /**
      * @alpha The `atomic-commerce-text` component leverages the I18n translation module through the atomic-commerce-interface.
      */
@@ -6099,6 +6087,16 @@ declare global {
         prototype: HTMLAtomicTimeframeFacetElement;
         new (): HTMLAtomicTimeframeFacetElement;
     };
+    /**
+     * The `atomic-commerce-sort-dropdown` component renders a dropdown that the end user can interact with to select the criteria to use when sorting products.
+     * @alpha 
+     */
+    interface HTMLStencilAtomicCommerceSortDropdownElement extends Components.StencilAtomicCommerceSortDropdown, HTMLStencilElement {
+    }
+    var HTMLStencilAtomicCommerceSortDropdownElement: {
+        prototype: HTMLStencilAtomicCommerceSortDropdownElement;
+        new (): HTMLStencilAtomicCommerceSortDropdownElement;
+    };
     interface HTMLElementTagNameMap {
         "atomic-aria-live": HTMLAtomicAriaLiveElement;
         "atomic-automatic-facet": HTMLAtomicAutomaticFacetElement;
@@ -6131,7 +6129,6 @@ declare global {
         "atomic-commerce-search-box-instant-products": HTMLAtomicCommerceSearchBoxInstantProductsElement;
         "atomic-commerce-search-box-query-suggestions": HTMLAtomicCommerceSearchBoxQuerySuggestionsElement;
         "atomic-commerce-search-box-recent-queries": HTMLAtomicCommerceSearchBoxRecentQueriesElement;
-        "atomic-commerce-sort-dropdown": HTMLAtomicCommerceSortDropdownElement;
         "atomic-commerce-text": HTMLAtomicCommerceTextElement;
         "atomic-commerce-timeframe-facet": HTMLAtomicCommerceTimeframeFacetElement;
         "atomic-component-error": HTMLAtomicComponentErrorElement;
@@ -6300,6 +6297,7 @@ declare global {
         "atomic-text": HTMLAtomicTextElement;
         "atomic-timeframe": HTMLAtomicTimeframeElement;
         "atomic-timeframe-facet": HTMLAtomicTimeframeFacetElement;
+        "stencil-atomic-commerce-sort-dropdown": HTMLStencilAtomicCommerceSortDropdownElement;
     }
 }
 declare namespace LocalJSX {
@@ -6948,12 +6946,6 @@ declare namespace LocalJSX {
          */
         "maxWithoutQuery"?: number;
     }
-    /**
-     * The `atomic-commerce-sort-dropdown` component renders a dropdown that the end user can interact with to select the criteria to use when sorting products.
-     * @alpha 
-     */
-    interface AtomicCommerceSortDropdown {
-    }
     /**
      * @alpha The `atomic-commerce-text` component leverages the I18n translation module through the atomic-commerce-interface.
      */
@@ -9920,6 +9912,12 @@ declare namespace LocalJSX {
          */
         "withDatePicker"?: boolean;
     }
+    /**
+     * The `atomic-commerce-sort-dropdown` component renders a dropdown that the end user can interact with to select the criteria to use when sorting products.
+     * @alpha 
+     */
+    interface StencilAtomicCommerceSortDropdown {
+    }
     interface IntrinsicElements {
         "atomic-aria-live": AtomicAriaLive;
         "atomic-automatic-facet": AtomicAutomaticFacet;
@@ -9952,7 +9950,6 @@ declare namespace LocalJSX {
         "atomic-commerce-search-box-instant-products": AtomicCommerceSearchBoxInstantProducts;
         "atomic-commerce-search-box-query-suggestions": AtomicCommerceSearchBoxQuerySuggestions;
         "atomic-commerce-search-box-recent-queries": AtomicCommerceSearchBoxRecentQueries;
-        "atomic-commerce-sort-dropdown": AtomicCommerceSortDropdown;
         "atomic-commerce-text": AtomicCommerceText;
         "atomic-commerce-timeframe-facet": AtomicCommerceTimeframeFacet;
         "atomic-component-error": AtomicComponentError;
@@ -10121,6 +10118,7 @@ declare namespace LocalJSX {
         "atomic-text": AtomicText;
         "atomic-timeframe": AtomicTimeframe;
         "atomic-timeframe-facet": AtomicTimeframeFacet;
+        "stencil-atomic-commerce-sort-dropdown": StencilAtomicCommerceSortDropdown;
     }
 }
 export { LocalJSX as JSX };
@@ -10287,11 +10285,6 @@ declare module "@stencil/core" {
              * @alpha 
              */
             "atomic-commerce-search-box-recent-queries": LocalJSX.AtomicCommerceSearchBoxRecentQueries & JSXBase.HTMLAttributes<HTMLAtomicCommerceSearchBoxRecentQueriesElement>;
-            /**
-             * The `atomic-commerce-sort-dropdown` component renders a dropdown that the end user can interact with to select the criteria to use when sorting products.
-             * @alpha 
-             */
-            "atomic-commerce-sort-dropdown": LocalJSX.AtomicCommerceSortDropdown & JSXBase.HTMLAttributes<HTMLAtomicCommerceSortDropdownElement>;
             /**
              * @alpha The `atomic-commerce-text` component leverages the I18n translation module through the atomic-commerce-interface.
              */
@@ -11013,6 +11006,11 @@ declare module "@stencil/core" {
              * An `atomic-timeframe-facet` displays a facet of the results for the current query as date intervals.
              */
             "atomic-timeframe-facet": LocalJSX.AtomicTimeframeFacet & JSXBase.HTMLAttributes<HTMLAtomicTimeframeFacetElement>;
+            /**
+             * The `atomic-commerce-sort-dropdown` component renders a dropdown that the end user can interact with to select the criteria to use when sorting products.
+             * @alpha 
+             */
+            "stencil-atomic-commerce-sort-dropdown": LocalJSX.StencilAtomicCommerceSortDropdown & JSXBase.HTMLAttributes<HTMLStencilAtomicCommerceSortDropdownElement>;
         }
     }
 }

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

@@ -39,7 +39,7 @@ import {
   defaultNumberFormatter,
 } from '../../common/formats/format-common';
 import {Hidden} from '../../common/hidden';
-import {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';
+import {CommerceBindings} from '../atomic-commerce-interface/lit-stencil-common-types';
 
 type AnyFacetValue =
   | RegularFacetValue

packages/atomic/src/components/commerce/atomic-commerce-did-you-mean/atomic-commerce-did-you-mean.tsx

@@ -16,7 +16,7 @@ import {AutoCorrection} from '../../common/query-correction/auto-correction';
 import {Correction} from '../../common/query-correction/correction';
 import {QueryCorrectionGuard} from '../../common/query-correction/guard';
 import {TriggerCorrection} from '../../common/query-correction/trigger-correction';
-import {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';
+import {CommerceBindings} from '../atomic-commerce-interface/lit-stencil-common-types';
 
 /**
  * @alpha

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

@@ -6,7 +6,6 @@ import {
   buildSearch,
   loadQueryActions,
   CommerceEngine,
-  CommerceEngineConfiguration,
   buildCommerceEngine,
   buildProductListing,
   ProductListing,
@@ -34,7 +33,6 @@ import {
   StandaloneSearchBoxData,
   StorageItems,
 } from '../../../utils/local-storage-utils';
-import {CommonBindings, NonceBindings} from '../../common/interface/bindings';
 import {
   BaseAtomicInterface,
   CommonAtomicInterfaceHelper,
@@ -45,18 +43,14 @@ import {
   noProductsSelector,
 } from '../atomic-commerce-layout/commerce-layout';
 import {getAnalyticsConfig} from './analytics-config';
+import type {
+  CommerceBindings,
+  CommerceInitializationOptions,
+} from './lit-stencil-common-types';
 import {CommerceStore, createCommerceStore} from './store';
 
 const FirstRequestExecutedFlag = 'firstRequestExecuted';
 
-export type CommerceInitializationOptions = CommerceEngineConfiguration;
-export type CommerceBindings = CommonBindings<
-  CommerceEngine,
-  CommerceStore,
-  HTMLAtomicCommerceInterfaceElement
-> &
-  NonceBindings;
-
 /**
  * @alpha
  * The `atomic-commerce-interface` component is the parent to all other atomic commerce components in a commerce page

packages/atomic/src/components/commerce/atomic-commerce-interface/lit-stencil-common-types.ts

@@ -0,0 +1,14 @@
+import {
+  CommerceEngine,
+  CommerceEngineConfiguration,
+} from '@coveo/headless/commerce';
+import {CommonBindings, NonceBindings} from '../../common/interface/bindings';
+import {CommerceStore} from './store';
+
+export type CommerceInitializationOptions = CommerceEngineConfiguration;
+export type CommerceBindings = CommonBindings<
+  CommerceEngine,
+  CommerceStore,
+  HTMLAtomicCommerceInterfaceElement
+> &
+  NonceBindings;

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

@@ -5,7 +5,7 @@ import {
 } from '../../../utils/initialization-utils';
 import {DEFAULT_MOBILE_BREAKPOINT} from '../../../utils/replace-breakpoint';
 import {randomID} from '../../../utils/utils';
-import {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';
+import {CommerceBindings} from '../atomic-commerce-interface/lit-stencil-common-types';
 import {buildCommerceLayout} from './commerce-layout';
 
 /**

packages/atomic/src/components/commerce/atomic-commerce-load-more-products/atomic-commerce-load-more-products.tsx

@@ -19,7 +19,7 @@ import {LoadMoreContainer} from '../../common/load-more/container';
 import {LoadMoreGuard} from '../../common/load-more/guard';
 import {LoadMoreProgressBar} from '../../common/load-more/progress-bar';
 import {LoadMoreSummary} from '../../common/load-more/summary';
-import {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';
+import {CommerceBindings} from '../atomic-commerce-interface/lit-stencil-common-types';
 
 /**
  * The `atomic-commerce-load-more-products` component allows the user to load additional products if more are available.

packages/atomic/src/components/commerce/atomic-commerce-no-products/atomic-commerce-no-products.tsx

@@ -18,7 +18,7 @@ import {MagnifyingGlass} from '../../common/no-items/magnifying-glass';
 import {NoItems} from '../../common/no-items/no-items';
 import {SearchTips} from '../../common/no-items/tips';
 import {getSummary} from '../../common/no-items/utils';
-import {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';
+import {CommerceBindings} from '../atomic-commerce-interface/lit-stencil-common-types';
 
 /**
  * @alpha

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

@@ -26,7 +26,7 @@ import {
 } from '../../common/pager/pager-buttons';
 import {PagerGuard} from '../../common/pager/pager-guard';
 import {PagerNavigation} from '../../common/pager/pager-navigation';
-import {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';
+import {CommerceBindings} from '../atomic-commerce-interface/lit-stencil-common-types';
 import {getCurrentPagesRange} from './commerce-pager-utils';
 
 /**

packages/atomic/src/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.tsx

@@ -46,7 +46,7 @@ import {
   ItemDisplayLayout,
   getItemListDisplayClasses,
 } from '../../common/layout/display-options';
-import {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';
+import {CommerceBindings} from '../atomic-commerce-interface/lit-stencil-common-types';
 import {ProductTemplateProvider} from '../product-list/product-template-provider';
 import {SelectChildProductEventArgs} from '../product-template-components/atomic-product-children/atomic-product-children';