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

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

@@ -60,6 +60,7 @@ AtomicProductSectionVisual,
 AtomicProductTemplate,
 AtomicProductText,
 AtomicQuerySummary,
+AtomicResultTemplate,
 AtomicResultsPerPage,
 AtomicSearchBoxInstantResults,
 AtomicSearchBoxQuerySuggestions,
@@ -129,7 +130,6 @@ AtomicResultSectionExcerpt,
 AtomicResultSectionTitle,
 AtomicResultSectionTitleMetadata,
 AtomicResultSectionVisual,
-AtomicResultTemplate,
 AtomicResultText,
 AtomicResultTimespan,
 AtomicSearchBox,
@@ -205,6 +205,7 @@ AtomicProductSectionVisual,
 AtomicProductTemplate,
 AtomicProductText,
 AtomicQuerySummary,
+AtomicResultTemplate,
 AtomicResultsPerPage,
 AtomicSearchBoxInstantResults,
 AtomicSearchBoxQuerySuggestions,
@@ -274,7 +275,6 @@ AtomicResultSectionExcerpt,
 AtomicResultSectionTitle,
 AtomicResultSectionTitleMetadata,
 AtomicResultSectionVisual,
-AtomicResultTemplate,
 AtomicResultText,
 AtomicResultTimespan,
 AtomicSearchBox,

packages/atomic/src/components.d.ts

@@ -2193,37 +2193,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.
      */
@@ -3848,17 +3817,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.
      */
@@ -4283,7 +4241,6 @@ declare global {
         "atomic-result-section-title-metadata": HTMLAtomicResultSectionTitleMetadataElement;
         "atomic-result-section-visual": HTMLAtomicResultSectionVisualElement;
         "atomic-result-table-placeholder": HTMLAtomicResultTablePlaceholderElement;
-        "atomic-result-template": HTMLAtomicResultTemplateElement;
         "atomic-result-text": HTMLAtomicResultTextElement;
         "atomic-result-timespan": HTMLAtomicResultTimespanElement;
         "atomic-search-box": HTMLAtomicSearchBoxElement;
@@ -6395,33 +6352,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.
      */
@@ -6994,7 +6924,6 @@ declare namespace LocalJSX {
         "atomic-result-section-title-metadata": AtomicResultSectionTitleMetadata;
         "atomic-result-section-visual": AtomicResultSectionVisual;
         "atomic-result-table-placeholder": AtomicResultTablePlaceholder;
-        "atomic-result-template": AtomicResultTemplate;
         "atomic-result-text": AtomicResultText;
         "atomic-result-timespan": AtomicResultTimespan;
         "atomic-search-box": AtomicSearchBox;
@@ -7476,12 +7405,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/search/atomic-result-template/atomic-result-template.mdx

@@ -0,0 +1,117 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as AtomicResultTemplateStories from './atomic-result-template.new.stories';
+import { AtomicDocTemplate } from '../../../../storybook-utils/documentation/atomic-doc-template';
+
+
+<Meta of={AtomicResultTemplateStories} />
+
+<AtomicDocTemplate
+  stories={AtomicResultTemplateStories}
+  defaultStory="Default"
+  githubPath="search/atomic-result-template/atomic-result-template.ts"
+  tagName="atomic-result-template"
+  className="AtomicResultTemplate"
+>
+
+This component defines the UI display of your search results. 
+It can be used inside `atomic-result-list`, `atomic-folded-result-list`, or `atomic-search-box-instant-results`, and it must have a `<template>` as its child.
+
+Example using the `atomic-result-list`:
+```html
+<atomic-result-list>
+  <atomic-result-template>
+    <template>
+      <atomic-result-section-visual>
+        <atomic-result-image field="ytthumbnailurl" fallback="https://picsum.photos/350"></atomic-result-image>
+      </atomic-result-section-visual>
+
+      <atomic-result-section-badges>
+        <atomic-field-condition must-match-sourcetype="YouTube">
+          <atomic-result-badge
+            label="YouTube"
+            class="youtube-badge"
+          ></atomic-result-badge>
+        </atomic-field-condition>
+
+        <atomic-result-badge
+          icon="https://raw.githubusercontent.com/Rush/Font-Awesome-SVG-PNG/master/black/svg/language.svg"
+        >
+          <atomic-result-multi-value-text
+            field="language"
+          ></atomic-result-multi-value-text>
+        </atomic-result-badge>
+      </atomic-result-section-badges>
+
+      <atomic-result-section-title>
+        <atomic-result-link></atomic-result-link>
+      </atomic-result-section-title>
+
+      <atomic-result-section-excerpt>
+        <atomic-result-text field="excerpt"></atomic-result-text>
+      </atomic-result-section-excerpt>
+
+      <atomic-result-section-bottom-metadata>
+        <atomic-result-fields-list>
+          <atomic-field-condition class="field" if-defined="source">
+            <span class="field-label">
+              <atomic-text value="source"></atomic-text>:
+            </span>
+            <atomic-result-text field="source"></atomic-result-text>
+          </atomic-field-condition>
+
+          <atomic-field-condition class="field" if-defined="author">
+            <span class="field-label">
+              <atomic-text value="author"></atomic-text>:
+            </span>
+            <atomic-result-text field="author"></atomic-result-text>
+          </atomic-field-condition>
+
+          <atomic-field-condition class="field" if-defined="date">
+            <span class="field-label">
+              <atomic-text value="date"></atomic-text>:
+            </span>
+            <atomic-result-date></atomic-result-date>
+          </atomic-field-condition>
+        </atomic-result-fields-list>
+      </atomic-result-section-bottom-metadata>
+    </template>
+  </atomic-result-template>
+</atomic-result-list>
+```
+
+## Template Conditions
+
+You can use conditions to display different templates based on result properties:
+
+```html
+<atomic-result-list>
+  <!-- Template for YouTube videos -->
+  <atomic-result-template must-match-sourcetype="YouTube">
+    <template>
+      <atomic-result-section-visual>
+        <atomic-result-image field="ytthumbnailurl"></atomic-result-image>
+      </atomic-result-section-visual>
+      <atomic-result-section-title>
+        <atomic-result-link></atomic-result-link>
+      </atomic-result-section-title>
+      <atomic-result-section-excerpt>
+        <atomic-result-text field="excerpt"></atomic-result-text>
+      </atomic-result-section-excerpt>
+    </template>
+  </atomic-result-template>
+
+  <!-- Default template for all other results -->
+  <atomic-result-template>
+    <template>
+      <atomic-result-section-title>
+        <atomic-result-link></atomic-result-link>
+      </atomic-result-section-title>
+      <atomic-result-section-excerpt>
+        <atomic-result-text field="excerpt"></atomic-result-text>
+      </atomic-result-section-excerpt>
+    </template>
+  </atomic-result-template>
+</atomic-result-list>
+```
+
+</AtomicDocTemplate>