fix clicks for atomic-recs-list and atomic-ipx-recs-list

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

@@ -1187,14 +1187,14 @@ export declare interface AtomicRecsList extends Components.AtomicRecsList {}
 
 
 @ProxyCmp({
-  inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'result', 'stopPropagation']
+  inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'linkContent', 'result', 'stopPropagation']
 })
 @Component({
   selector: 'atomic-recs-result',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'result', 'stopPropagation'],
+  inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'linkContent', 'result', 'stopPropagation'],
 })
 export class AtomicRecsResult {
   protected el: HTMLElement;

packages/atomic/src/components.d.ts

@@ -2453,6 +2453,11 @@ export namespace Components {
           * The InteractiveResult item.
          */
         "interactiveResult": RecsInteractiveResult;
+        /**
+          * The result link to use when the result is clicked in a grid layout.
+          * @default - An `atomic-result-link` without any customization.
+         */
+        "linkContent": ParentNode;
         "loadingFlag"?: string;
         /**
           * Internal function used by atomic-recs-list in advanced setups, which lets you bypass the standard HTML template system. Particularly useful for Atomic React
@@ -8050,6 +8055,11 @@ declare namespace LocalJSX {
           * The InteractiveResult item.
          */
         "interactiveResult": RecsInteractiveResult;
+        /**
+          * The result link to use when the result is clicked in a grid layout.
+          * @default - An `atomic-result-link` without any customization.
+         */
+        "linkContent"?: ParentNode;
         "loadingFlag"?: string;
         /**
           * Internal function used by atomic-recs-list in advanced setups, which lets you bypass the standard HTML template system. Particularly useful for Atomic React

packages/atomic/src/components/ipx/atomic-ipx-recs-list/atomic-recs-list/atomic-ipx-recs-list.tsx

@@ -361,6 +361,8 @@ export class AtomicIPXRecsList implements InitializableComponent<RecsBindings> {
         this.imageSize
       ),
       content: this.itemTemplateProvider.getTemplateContent(recommendation),
+      linkContent:
+        this.itemTemplateProvider.getLinkTemplateContent(recommendation),
       store: this.bindings.store,
       density: this.density,
       display: this.display,

packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx

@@ -335,6 +335,8 @@ export class AtomicRecsList implements InitializableComponent<RecsBindings> {
         this.imageSize
       ),
       content: this.itemTemplateProvider.getTemplateContent(recommendation),
+      linkContent:
+        this.itemTemplateProvider.getLinkTemplateContent(recommendation),
       store: this.bindings.store,
       density: this.density,
       display: this.display,

packages/atomic/src/components/recommendations/atomic-recs-result/atomic-recs-result.tsx

@@ -1,5 +1,6 @@
 import {Component, h, Prop, Element, Listen, Host} from '@stencil/core';
 import {RecsInteractiveResult, RecsResult} from '..';
+import {parentNodeToString} from '../../../utils/dom-utils';
 import {applyFocusVisiblePolyfill} from '../../../utils/initialization-utils';
 import {
   InteractiveItemContextEvent,
@@ -29,6 +30,7 @@ import {AtomicRecsStore} from '../atomic-recs-interface/store';
 export class AtomicRecsResult {
   private layout!: ItemLayout;
   private resultRootRef?: HTMLElement;
+  private linkContainerRef?: HTMLElement;
   private executedRenderingFunctionOnce = false;
   @Element() host!: HTMLElement;
 
@@ -37,6 +39,13 @@ export class AtomicRecsResult {
    */
   @Prop() stopPropagation?: boolean;
 
+  /**
+   * The result link to use when the result is clicked in a grid layout.
+   *
+   * @default - An `atomic-result-link` without any customization.
+   */
+  @Prop() linkContent: ParentNode = new DocumentFragment();
+
   /**
    * The result item.
    */
@@ -94,6 +103,18 @@ export class AtomicRecsResult {
    */
   @Prop() renderingFunction: ItemRenderingFunction;
 
+  @Listen('click')
+  public handleClick(event: MouseEvent) {
+    if (this.stopPropagation) {
+      event.stopPropagation();
+    }
+    this.host
+      .shadowRoot!.querySelector<HTMLAnchorElement>(
+        '.link-container > atomic-result-link a:not([slot])'
+      )
+      ?.click();
+  }
+
   @Listen('atomic/resolveResult')
   public resolveResult(event: ItemContextEvent<RecsResult>) {
     event.preventDefault();
@@ -133,11 +154,12 @@ export class AtomicRecsResult {
   }
 
   private getContentHTML() {
-    return Array.from(this.content!.children)
-      .map((child) => child.outerHTML)
-      .join('');
+    return parentNodeToString(this.content!);
   }
 
+  private getLinkHTML() {
+    return parentNodeToString(this.linkContent);
+  }
   private get isCustomRenderFunctionMode() {
     return this.renderingFunction !== undefined;
   }
@@ -158,6 +180,10 @@ export class AtomicRecsResult {
             class="result-root"
             ref={(ref) => (this.resultRootRef = ref)}
           ></div>
+          <div
+            class="link-container"
+            ref={(ref) => (this.linkContainerRef = ref)}
+          ></div>
         </Host>
       );
     }
@@ -171,6 +197,7 @@ export class AtomicRecsResult {
             .join(' ')}`}
           innerHTML={this.getContentHTML()}
         ></div>
+        <div class="link-container" innerHTML={this.getLinkHTML()}></div>
       </Host>
     );
   }
@@ -186,7 +213,8 @@ export class AtomicRecsResult {
     if (this.shouldExecuteRenderFunction()) {
       const customRenderOutputAsString = this.renderingFunction!(
         this.result,
-        this.resultRootRef!
+        this.resultRootRef!,
+        this.linkContainerRef!
       );
 
       this.resultRootRef!.className += ` ${this.layout

packages/atomic/src/pages/index.html

@@ -231,7 +231,6 @@
               </atomic-result-template>
 
               <atomic-result-template>
-                <template slot="link"> </template>
                 <template>
                   <style>
                     .field {