Merge branch 'master' into renovate/major-all

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

@@ -17,6 +17,8 @@ AtomicCommerceFacets,
 AtomicCommerceLoadMoreProducts,
 AtomicCommercePager,
 AtomicCommerceQuerySummary,
+AtomicCommerceRefineModal,
+AtomicCommerceRefineToggle,
 AtomicCommerceSearchBox,
 AtomicComponentError,
 AtomicDidYouMean,
@@ -121,6 +123,8 @@ AtomicCommerceFacets,
 AtomicCommerceLoadMoreProducts,
 AtomicCommercePager,
 AtomicCommerceQuerySummary,
+AtomicCommerceRefineModal,
+AtomicCommerceRefineToggle,
 AtomicCommerceSearchBox,
 AtomicComponentError,
 AtomicDidYouMean,

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

@@ -139,13 +139,14 @@ export declare interface AtomicColorFacet extends Components.AtomicColorFacet {}
 
 
 @ProxyCmp({
+  inputs: ['facet', 'field', 'isCollapsed', 'summary']
 })
 @Component({
   selector: 'atomic-commerce-category-facet',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [],
+  inputs: ['facet', 'field', 'isCollapsed', 'summary'],
 })
 export class AtomicCommerceCategoryFacet {
   protected el: HTMLElement;
@@ -160,13 +161,14 @@ export declare interface AtomicCommerceCategoryFacet extends Components.AtomicCo
 
 
 @ProxyCmp({
+  inputs: ['facet', 'field', 'isCollapsed', 'summary']
 })
 @Component({
   selector: 'atomic-commerce-facet',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [],
+  inputs: ['facet', 'field', 'isCollapsed', 'summary'],
 })
 export class AtomicCommerceFacet {
   protected el: HTMLElement;
@@ -270,6 +272,49 @@ export class AtomicCommerceQuerySummary {
 export declare interface AtomicCommerceQuerySummary extends Components.AtomicCommerceQuerySummary {}
 
 
+@ProxyCmp({
+  inputs: ['collapseFacetsAfter', 'isOpen', 'openButton']
+})
+@Component({
+  selector: 'atomic-commerce-refine-modal',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['collapseFacetsAfter', 'isOpen', 'openButton'],
+})
+export class AtomicCommerceRefineModal {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface AtomicCommerceRefineModal extends Components.AtomicCommerceRefineModal {}
+
+
+@ProxyCmp({
+})
+@Component({
+  selector: 'atomic-commerce-refine-toggle',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [],
+})
+export class AtomicCommerceRefineToggle {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface AtomicCommerceRefineToggle extends Components.AtomicCommerceRefineToggle {}
+
+
 @ProxyCmp({
   inputs: ['clearFilters', 'disableSearch', 'minimumQueryLength', 'numberOfQueries', 'redirectionUrl', 'suggestionDelay', 'suggestionTimeout']
 })

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

@@ -23,6 +23,8 @@ export const AtomicCommerceProductList = /*@__PURE__*/createReactComponent<JSX.A
 export const AtomicCommerceQuerySummary = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceQuerySummary, HTMLAtomicCommerceQuerySummaryElement>('atomic-commerce-query-summary');
 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 AtomicCommerceRefineModal = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceRefineModal, HTMLAtomicCommerceRefineModalElement>('atomic-commerce-refine-modal');
+export const AtomicCommerceRefineToggle = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceRefineToggle, HTMLAtomicCommerceRefineToggleElement>('atomic-commerce-refine-toggle');
 export const AtomicCommerceSearchBox = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceSearchBox, HTMLAtomicCommerceSearchBoxElement>('atomic-commerce-search-box');
 export const AtomicCommerceSearchBoxInstantProducts = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceSearchBoxInstantProducts, HTMLAtomicCommerceSearchBoxInstantProductsElement>('atomic-commerce-search-box-instant-products');
 export const AtomicCommerceSearchBoxQuerySuggestions = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceSearchBoxQuerySuggestions, HTMLAtomicCommerceSearchBoxQuerySuggestionsElement>('atomic-commerce-search-box-query-suggestions');

packages/atomic/src/components.d.ts

@@ -307,7 +307,6 @@ export namespace Components {
     interface AtomicCommerceFacet {
         /**
           * The facet controller instance.
-          * @
          */
         "facet": RegularFacet;
         /**
@@ -587,6 +586,26 @@ export namespace Components {
          */
         "slotId": string;
     }
+    /**
+     * The `atomic-commerce-refine-modal` is automatically created as a child of the `atomic-commerce-search-interface` when the `atomic-commerce-refine-toggle` is initialized.
+     * When the modal is opened, the class `atomic-modal-opened` is added to the interface element and the body, allowing further customization.
+     * @alpha 
+     */
+    interface AtomicCommerceRefineModal {
+        /**
+          * The number of expanded facets inside the refine modal. Remaining facets are automatically collapsed.  Using the value `0` collapses all facets.
+         */
+        "collapseFacetsAfter": number;
+        "isOpen": boolean;
+        "openButton"?: HTMLElement;
+    }
+    /**
+     * The `atomic-commerce-refine-toggle` component displays a button that opens a modal containing the facets and the sort components.
+     * When this component is added to the `atomic-commerce-search-interface`, an `atomic-commerce-refine-modal` component is automatically created.
+     * @alpha 
+     */
+    interface AtomicCommerceRefineToggle {
+    }
     /**
      * The `atomic-commerce-search-box` component creates a search box with built-in support for suggestions.
      * @alpha 
@@ -3656,6 +3675,28 @@ declare global {
         prototype: HTMLAtomicCommerceRecommendationListElement;
         new (): HTMLAtomicCommerceRecommendationListElement;
     };
+    /**
+     * The `atomic-commerce-refine-modal` is automatically created as a child of the `atomic-commerce-search-interface` when the `atomic-commerce-refine-toggle` is initialized.
+     * When the modal is opened, the class `atomic-modal-opened` is added to the interface element and the body, allowing further customization.
+     * @alpha 
+     */
+    interface HTMLAtomicCommerceRefineModalElement extends Components.AtomicCommerceRefineModal, HTMLStencilElement {
+    }
+    var HTMLAtomicCommerceRefineModalElement: {
+        prototype: HTMLAtomicCommerceRefineModalElement;
+        new (): HTMLAtomicCommerceRefineModalElement;
+    };
+    /**
+     * The `atomic-commerce-refine-toggle` component displays a button that opens a modal containing the facets and the sort components.
+     * When this component is added to the `atomic-commerce-search-interface`, an `atomic-commerce-refine-modal` component is automatically created.
+     * @alpha 
+     */
+    interface HTMLAtomicCommerceRefineToggleElement extends Components.AtomicCommerceRefineToggle, HTMLStencilElement {
+    }
+    var HTMLAtomicCommerceRefineToggleElement: {
+        prototype: HTMLAtomicCommerceRefineToggleElement;
+        new (): HTMLAtomicCommerceRefineToggleElement;
+    };
     interface HTMLAtomicCommerceSearchBoxElementEventMap {
         "redirect": RedirectionPayload;
     }
@@ -5365,6 +5406,8 @@ declare global {
         "atomic-commerce-query-summary": HTMLAtomicCommerceQuerySummaryElement;
         "atomic-commerce-recommendation-interface": HTMLAtomicCommerceRecommendationInterfaceElement;
         "atomic-commerce-recommendation-list": HTMLAtomicCommerceRecommendationListElement;
+        "atomic-commerce-refine-modal": HTMLAtomicCommerceRefineModalElement;
+        "atomic-commerce-refine-toggle": HTMLAtomicCommerceRefineToggleElement;
         "atomic-commerce-search-box": HTMLAtomicCommerceSearchBoxElement;
         "atomic-commerce-search-box-instant-products": HTMLAtomicCommerceSearchBoxInstantProductsElement;
         "atomic-commerce-search-box-query-suggestions": HTMLAtomicCommerceSearchBoxQuerySuggestionsElement;
@@ -5769,7 +5812,6 @@ declare namespace LocalJSX {
     interface AtomicCommerceFacet {
         /**
           * The facet controller instance.
-          * @
          */
         "facet": RegularFacet;
         /**
@@ -6011,6 +6053,26 @@ declare namespace LocalJSX {
          */
         "slotId"?: string;
     }
+    /**
+     * The `atomic-commerce-refine-modal` is automatically created as a child of the `atomic-commerce-search-interface` when the `atomic-commerce-refine-toggle` is initialized.
+     * When the modal is opened, the class `atomic-modal-opened` is added to the interface element and the body, allowing further customization.
+     * @alpha 
+     */
+    interface AtomicCommerceRefineModal {
+        /**
+          * The number of expanded facets inside the refine modal. Remaining facets are automatically collapsed.  Using the value `0` collapses all facets.
+         */
+        "collapseFacetsAfter"?: number;
+        "isOpen"?: boolean;
+        "openButton"?: HTMLElement;
+    }
+    /**
+     * The `atomic-commerce-refine-toggle` component displays a button that opens a modal containing the facets and the sort components.
+     * When this component is added to the `atomic-commerce-search-interface`, an `atomic-commerce-refine-modal` component is automatically created.
+     * @alpha 
+     */
+    interface AtomicCommerceRefineToggle {
+    }
     /**
      * The `atomic-commerce-search-box` component creates a search box with built-in support for suggestions.
      * @alpha 
@@ -8658,6 +8720,8 @@ declare namespace LocalJSX {
         "atomic-commerce-query-summary": AtomicCommerceQuerySummary;
         "atomic-commerce-recommendation-interface": AtomicCommerceRecommendationInterface;
         "atomic-commerce-recommendation-list": AtomicCommerceRecommendationList;
+        "atomic-commerce-refine-modal": AtomicCommerceRefineModal;
+        "atomic-commerce-refine-toggle": AtomicCommerceRefineToggle;
         "atomic-commerce-search-box": AtomicCommerceSearchBox;
         "atomic-commerce-search-box-instant-products": AtomicCommerceSearchBoxInstantProducts;
         "atomic-commerce-search-box-query-suggestions": AtomicCommerceSearchBoxQuerySuggestions;
@@ -8922,6 +8986,18 @@ declare module "@stencil/core" {
              * The `atomic-commerce-recommendation-list` component displays a list of product recommendations by applying one or more product templates.
              */
             "atomic-commerce-recommendation-list": LocalJSX.AtomicCommerceRecommendationList & JSXBase.HTMLAttributes<HTMLAtomicCommerceRecommendationListElement>;
+            /**
+             * The `atomic-commerce-refine-modal` is automatically created as a child of the `atomic-commerce-search-interface` when the `atomic-commerce-refine-toggle` is initialized.
+             * When the modal is opened, the class `atomic-modal-opened` is added to the interface element and the body, allowing further customization.
+             * @alpha 
+             */
+            "atomic-commerce-refine-modal": LocalJSX.AtomicCommerceRefineModal & JSXBase.HTMLAttributes<HTMLAtomicCommerceRefineModalElement>;
+            /**
+             * The `atomic-commerce-refine-toggle` component displays a button that opens a modal containing the facets and the sort components.
+             * When this component is added to the `atomic-commerce-search-interface`, an `atomic-commerce-refine-modal` component is automatically created.
+             * @alpha 
+             */
+            "atomic-commerce-refine-toggle": LocalJSX.AtomicCommerceRefineToggle & JSXBase.HTMLAttributes<HTMLAtomicCommerceRefineToggleElement>;
             /**
              * The `atomic-commerce-search-box` component creates a search box with built-in support for suggestions.
              * @alpha 

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

@@ -118,7 +118,7 @@ atomic-commerce-layout {
       justify-self: end;
     }
 
-    atomic-refine-toggle {
+    atomic-commerce-refine-toggle {
       grid-area: atomic-sort;
     }
 

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

@@ -19,6 +19,8 @@ export function buildCommerceLayout(
     layoutWebComponentTagName,
     containerWebComponentTagName,
     noProductsSelector,
-    errorSelector
+    errorSelector,
+    'atomic-commerce-refine-toggle',
+    'atomic-commerce-sort-dropdown'
   );
 }

packages/atomic/src/components/commerce/atomic-commerce-refine-modal/atomic-commerce-refine-modal.pcss

@@ -0,0 +1,10 @@
+@import '../../common/refine-modal/refine-modal-common.pcss';
+
+:host {
+  position: absolute;
+}
+
+select:hover + div,
+select:focus-visible + div {
+  @apply text-primary-light;
+}