chore (atomic): migrated atomic-result-template to lit

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

@@ -69,6 +69,7 @@ AtomicResultSectionExcerpt,
 AtomicResultSectionTitle,
 AtomicResultSectionTitleMetadata,
 AtomicResultSectionVisual,
+AtomicResultTemplate,
 AtomicResultsPerPage,
 AtomicSearchBoxInstantResults,
 AtomicSearchBoxQuerySuggestions,
@@ -129,7 +130,6 @@ AtomicResultMultiValueText,
 AtomicResultNumber,
 AtomicResultPrintableUri,
 AtomicResultRating,
-AtomicResultTemplate,
 AtomicResultText,
 AtomicResultTimespan,
 AtomicSearchBox,
@@ -214,6 +214,7 @@ AtomicResultSectionExcerpt,
 AtomicResultSectionTitle,
 AtomicResultSectionTitleMetadata,
 AtomicResultSectionVisual,
+AtomicResultTemplate,
 AtomicResultsPerPage,
 AtomicSearchBoxInstantResults,
 AtomicSearchBoxQuerySuggestions,
@@ -274,7 +275,6 @@ AtomicResultMultiValueText,
 AtomicResultNumber,
 AtomicResultPrintableUri,
 AtomicResultRating,
-AtomicResultTemplate,
 AtomicResultText,
 AtomicResultTimespan,
 AtomicSearchBox,

packages/atomic/src/components.d.ts

@@ -2099,37 +2099,6 @@ export namespace Components {
         "imageSize": ItemDisplayImageSize;
         "rows": number;
     }
-    /**
-     * A [result template](https://docs.coveo.com/en/atomic/latest/usage/displaying-results#defining-a-result-template) determines the format of the query results, depending on the conditions that are defined for each template.
-     * @MapProp name: mustMatch;attr: must-match;docs: The field and values that define which result items the condition must be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`;type: Record<string, string[]> ;default: {}
-     * @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that define which result items the condition must not be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
-     */
-    interface AtomicResultTemplate {
-        /**
-          * A function that must return true on results for the result template to apply. Set programmatically before initialization, not via attribute.  For example, the following targets a template and sets a condition to make it apply only to results whose `title` contains `singapore`: `document.querySelector('#target-template').conditions = [(result) => /singapore/i.test(result.title)];`
-         */
-        "conditions": ResultTemplateCondition[];
-        /**
-          * Gets the appropriate result template based on conditions applied.
-         */
-        "getTemplate": () => Promise<ResultTemplate<DocumentFragment> | null>;
-        /**
-          * Verifies whether the specified fields match the specified values.
-          * @type {Record<string, string[]>}
-         */
-        "mustMatch": Record<
-    string,
-    string[]
-  >;
-        /**
-          * Verifies whether the specified fields do not match the specified values.
-          * @type {Record<string, string[]>}
-         */
-        "mustNotMatch": Record<
-    string,
-    string[]
-  >;
-    }
     /**
      * The `atomic-result-text` component renders the value of a string result field.
      */
@@ -3628,17 +3597,6 @@ declare global {
         prototype: HTMLAtomicResultTablePlaceholderElement;
         new (): HTMLAtomicResultTablePlaceholderElement;
     };
-    /**
-     * A [result template](https://docs.coveo.com/en/atomic/latest/usage/displaying-results#defining-a-result-template) determines the format of the query results, depending on the conditions that are defined for each template.
-     * @MapProp name: mustMatch;attr: must-match;docs: The field and values that define which result items the condition must be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`;type: Record<string, string[]> ;default: {}
-     * @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that define which result items the condition must not be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
-     */
-    interface HTMLAtomicResultTemplateElement extends Components.AtomicResultTemplate, HTMLStencilElement {
-    }
-    var HTMLAtomicResultTemplateElement: {
-        prototype: HTMLAtomicResultTemplateElement;
-        new (): HTMLAtomicResultTemplateElement;
-    };
     /**
      * The `atomic-result-text` component renders the value of a string result field.
      */
@@ -4054,7 +4012,6 @@ declare global {
         "atomic-result-printable-uri": HTMLAtomicResultPrintableUriElement;
         "atomic-result-rating": HTMLAtomicResultRatingElement;
         "atomic-result-table-placeholder": HTMLAtomicResultTablePlaceholderElement;
-        "atomic-result-template": HTMLAtomicResultTemplateElement;
         "atomic-result-text": HTMLAtomicResultTextElement;
         "atomic-result-timespan": HTMLAtomicResultTimespanElement;
         "atomic-search-box": HTMLAtomicSearchBoxElement;
@@ -6072,33 +6029,6 @@ declare namespace LocalJSX {
         "imageSize": ItemDisplayImageSize;
         "rows": number;
     }
-    /**
-     * A [result template](https://docs.coveo.com/en/atomic/latest/usage/displaying-results#defining-a-result-template) determines the format of the query results, depending on the conditions that are defined for each template.
-     * @MapProp name: mustMatch;attr: must-match;docs: The field and values that define which result items the condition must be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`;type: Record<string, string[]> ;default: {}
-     * @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that define which result items the condition must not be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
-     */
-    interface AtomicResultTemplate {
-        /**
-          * A function that must return true on results for the result template to apply. Set programmatically before initialization, not via attribute.  For example, the following targets a template and sets a condition to make it apply only to results whose `title` contains `singapore`: `document.querySelector('#target-template').conditions = [(result) => /singapore/i.test(result.title)];`
-         */
-        "conditions"?: ResultTemplateCondition[];
-        /**
-          * Verifies whether the specified fields match the specified values.
-          * @type {Record<string, string[]>}
-         */
-        "mustMatch"?: Record<
-    string,
-    string[]
-  >;
-        /**
-          * Verifies whether the specified fields do not match the specified values.
-          * @type {Record<string, string[]>}
-         */
-        "mustNotMatch"?: Record<
-    string,
-    string[]
-  >;
-    }
     /**
      * The `atomic-result-text` component renders the value of a string result field.
      */
@@ -6662,7 +6592,6 @@ declare namespace LocalJSX {
         "atomic-result-printable-uri": AtomicResultPrintableUri;
         "atomic-result-rating": AtomicResultRating;
         "atomic-result-table-placeholder": AtomicResultTablePlaceholder;
-        "atomic-result-template": AtomicResultTemplate;
         "atomic-result-text": AtomicResultText;
         "atomic-result-timespan": AtomicResultTimespan;
         "atomic-search-box": AtomicSearchBox;
@@ -7063,12 +6992,6 @@ declare module "@stencil/core" {
              * The `atomic-result-table-placeholder` component provides an intermediate visual state that is rendered before the first results are available.
              */
             "atomic-result-table-placeholder": LocalJSX.AtomicResultTablePlaceholder & JSXBase.HTMLAttributes<HTMLAtomicResultTablePlaceholderElement>;
-            /**
-             * A [result template](https://docs.coveo.com/en/atomic/latest/usage/displaying-results#defining-a-result-template) determines the format of the query results, depending on the conditions that are defined for each template.
-             * @MapProp name: mustMatch;attr: must-match;docs: The field and values that define which result items the condition must be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`;type: Record<string, string[]> ;default: {}
-             * @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that define which result items the condition must not be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
-             */
-            "atomic-result-template": LocalJSX.AtomicResultTemplate & JSXBase.HTMLAttributes<HTMLAtomicResultTemplateElement>;
             /**
              * The `atomic-result-text` component renders the value of a string result field.
              */

packages/atomic/src/components/commerce/atomic-product-template/atomic-product-template.mdx

@@ -14,7 +14,8 @@ import { AtomicDocTemplate } from '../../../../storybook-utils/documentation/ato
 >
 
 This component defines the UI display of your products. 
-It can be used inside `atomic-commerce-product-list`, `atomic-commerce-recommendation-list`, or `atomic-search-box-instant-products`, and it must have a `<template>` as its child.
+A `template` element must be the child of an `atomic-product-template`. Furthermore, an `atomic-commerce-product-list`, `atomic-commerce-recommendation-list`, or `atomic-commerce-search-box-instant-products` must be the parent of each `atomic-product-template`.
+* **Note:** Any `<script>` tags that are defined inside a `<template>` element will not be executed when the products are being rendered.
 
 Example using the `atomic-commerce-product-list`:
 ```html
@@ -53,5 +54,110 @@ Example using the `atomic-commerce-product-list`:
 </atomic-commerce-product-list>
 ```
 
+## Template Conditions
+
+You can use conditions to display different templates based on product properties. You can specify as many `must-match-*` and `must-not-match-*` attributes as you want on a template, each targeting a different field. Each attribute can accept multiple comma-separated values.
+
+**Comma represents OR:** Within a single attribute, comma-separated values represent a logical OR. For example, `must-match-ec_brand="Nike,Adidas"` means the brand must be Nike OR Adidas.
+
+**Multiple attributes represent AND:** All conditions from different attributes must be met (logical AND) for the template to apply to a product.
+
+If you set both `must-match-*` and `must-not-match-*` for the same field and there is any overlap in values, the template will be ignored (it will never match any product).
+
+**Order of declaration matters:** The first template whose conditions are met will be applied. If a default template (without conditions) is declared first, it will apply to all products, even if other templates with conditions are declared later.
+
+**Examples:**
+
+```html
+<!-- Template applies if brand is Nike or Adidas, and product is in stock -->
+<atomic-product-template
+  must-match-ec_brand="Nike,Adidas"
+  must-match-ec_in_stock="true"
+>
+  <template>
+    <!-- ... -->
+  </template>
+</atomic-product-template>
+
+<!-- This template will never apply, because the same value is required and forbidden -->
+<atomic-product-template
+  must-match-ec_brand="Nike"
+  must-not-match-ec_brand="Nike"
+>
+  <template>
+    <!-- ... -->
+  </template>
+</atomic-product-template>
+```
+
+```html
+<atomic-commerce-product-list>
+  <!-- Template for luxury brands -->
+  <atomic-product-template must-match-ec_brand="Gucci,Prada,Louis Vuitton">
+    <template>
+      <atomic-product-section-name>
+        <atomic-product-link class="font-bold text-gold"></atomic-product-link>
+      </atomic-product-section-name>
+
+      <atomic-product-section-metadata>
+        <atomic-product-text field="ec_brand" class="block text-luxury-gold"></atomic-product-text>
+        <span class="luxury-badge">✨ Luxury</span>
+      </atomic-product-section-metadata>
+
+      <atomic-product-section-emphasized>
+        <atomic-product-price currency="USD" class="text-gold"></atomic-product-price>
+      </atomic-product-section-emphasized>
+    </template>
+  </atomic-product-template>
+
+  <!-- Template for out-of-stock products -->
+  <atomic-product-template must-match-ec_in_stock="false">
+    <template>
+      <atomic-product-section-name>
+        <atomic-product-link class="font-bold opacity-60"></atomic-product-link>
+      </atomic-product-section-name>
+
+      <atomic-product-section-metadata>
+        <atomic-product-field-condition if-defined="ec_brand">
+          <atomic-product-text field="ec_brand" class="block text-neutral-dark"></atomic-product-text>
+        </atomic-product-field-condition>
+        <span class="out-of-stock-badge text-red-600">Out of Stock</span>
+      </atomic-product-section-metadata>
+
+      <atomic-product-section-emphasized>
+        <atomic-product-price currency="USD" class="opacity-60"></atomic-product-price>
+      </atomic-product-section-emphasized>
+    </template>
+  </atomic-product-template>
+
+  <!-- Default template for all other products -->
+  <atomic-product-template>
+    <template>
+      <atomic-product-section-name>
+        <atomic-product-link class="font-bold"></atomic-product-link>
+      </atomic-product-section-name>
+
+      <atomic-product-section-metadata>
+        <atomic-product-field-condition if-defined="ec_brand">
+          <atomic-product-text field="ec_brand" class="block text-neutral-dark"></atomic-product-text>
+        </atomic-product-field-condition>
+
+        <atomic-product-field-condition if-defined="ec_rating">
+          <atomic-product-rating field="ec_rating"></atomic-product-rating>
+        </atomic-product-field-condition>
+      </atomic-product-section-metadata>
+
+      <atomic-product-section-description>
+        <atomic-product-text field="excerpt" class="block text-neutral-dark"></atomic-product-text>
+      </atomic-product-section-description>
+
+      <atomic-product-section-emphasized>
+        <atomic-product-price currency="USD"></atomic-product-price>
+      </atomic-product-section-emphasized>
+    </template>
+  </atomic-product-template>
+</atomic-commerce-product-list>
+```
+
 </AtomicDocTemplate>
 

packages/atomic/src/components/commerce/atomic-product-template/atomic-product-template.ts

@@ -14,11 +14,8 @@ import '../atomic-product/atomic-product';
 import {arrayConverter} from '@/src/converters/array-converter';
 
 /**
- * * A product template determines the format of the products, depending on the conditions that are defined for each template.
+ * A product template determines the format of the products, depending on the conditions that are defined for each template.
  *
- * A `template` element must be the child of an `atomic-product-template`. Furthermore, an `atomic-commerce-product-list`, `atomic-commerce-recommendation-list`, or `atomic-commerce-search-box-instant-products` must be the parent of each `atomic-product-template`.
- *
- * **Note:** Any `<script>` tags that are defined inside a `<template>` element will not be executed when the products are being rendered.
  * @MapProp name: mustMatch;attr: must-match;docs: The field and values that must be matched by a product item for the template to apply. For example, a template with the following attribute only applies to product items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`;type: Record<string, string[]> ;default: {}
  * @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that must not be matched by a product item for the template to apply. For example, a template with the following attribute only applies to product items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
  * @slot default - The default slot where to insert the template element.