feat(cta): pass slotted CTA data to lightbox (#12587)

### Description
This PR introduces a new feature that enhances the CTA component by enabling slotted CTA data to be passed to the lightbox component. The implementation modifies the core CTA and video mixins to properly handle and forward slotted content data, ensuring that when users interact with video CTAs, the lightbox receives all necessary information from the slotted elements.


### Changelog

**New**

- The CTA (video mode) passes  slotted CTA data to be passed lightbox component which renders it on the cta slot

Author: marcelojcs

packages/web-components/src/component-mixins/cta/cta.ts

@@ -89,7 +89,14 @@ const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
      * @param event The event.
      */
     _handleClick(event: MouseEvent) {
-      const { ctaType, disabled, href, videoDescription, videoName } = this;
+      const {
+        ctaType,
+        disabled,
+        href,
+        videoDescription,
+        videoName,
+        ctaContents,
+      } = this;
 
       if (ctaType === CTA_TYPE.VIDEO) {
         event.preventDefault(); // Stop following the link
@@ -107,6 +114,7 @@ const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
               ctaType,
               videoName,
               videoDescription,
+              ctaContents,
             },
           })
         );
@@ -172,6 +180,12 @@ const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
     @property({ attribute: 'video-name', reflect: true })
     videoName?: string;
 
+    /**
+     *The CTA slotted content
+     */
+    @property()
+    ctaContents?: HTMLElement;
+
     /**
      * The video description.
      */
@@ -214,6 +228,8 @@ const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
       // Check for the URL trigger meant to fire eventRunAction.
       if (ctaType === CTA_TYPE.VIDEO && href) {
         this._checkUrlVideoTrigger();
+        this.ctaContents =
+          (this.querySelector('[slot="cta"]') as HTMLElement) || undefined;
       }
     }
 
@@ -369,7 +385,14 @@ const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
      * clicks on the CTA.
      */
     _checkUrlVideoTrigger() {
-      const { ctaType, disabled, href, videoDescription, videoName } = this;
+      const {
+        ctaType,
+        disabled,
+        href,
+        videoDescription,
+        videoName,
+        ctaContents,
+      } = this;
       // Without a video id, or if the button is disabled, there is nothing to
       // do here.
       if (ctaType !== CTA_TYPE.VIDEO || !href || disabled) {
@@ -394,6 +417,7 @@ const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
               ctaType,
               videoName,
               videoDescription,
+              ctaContents,
             },
           })
         );

packages/web-components/src/component-mixins/cta/video.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2024
+ * Copyright IBM Corp. 2020, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -43,7 +43,14 @@ const VideoCTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
      */
     _handleClick(event: MouseEvent) {
       this.focus();
-      const { ctaType, disabled, href, videoName, videoDescription } = this;
+      const {
+        ctaType,
+        disabled,
+        href,
+        videoName,
+        videoDescription,
+        ctaContents,
+      } = this;
       if (ctaType === CTA_TYPE.VIDEO) {
         event.preventDefault(); // Stop following the link
       }
@@ -59,6 +66,7 @@ const VideoCTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
               ctaType,
               videoName,
               videoDescription,
+              ctaContents,
             },
           })
         );
@@ -116,15 +124,26 @@ const VideoCTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
      */
     abstract videoThumbnailUrl?: never | string;
 
+    /**
+     * The HTML element of the cta slotted content container
+     */
+    abstract ctaContents?: never | HTMLElement;
+
     /**
      * Handles `.updated()` method of `lit-element`.
      */
     updated(changedProperties) {
       // Declaring this mixin as it extends `LitElement` seems to cause a TS error
       // @ts-ignore
       super.updated(changedProperties);
-      const { ctaType, videoName, videoDescription, href, videoDuration } =
-        this;
+      const {
+        ctaType,
+        videoName,
+        videoDescription,
+        href,
+        videoDuration,
+        ctaContents,
+      } = this;
       const { eventRequestVideoData } = this
         .constructor as typeof VideoCTAMixinImpl;
       if (changedProperties.has('ctaType') && ctaType === CTA_TYPE.VIDEO) {
@@ -138,6 +157,7 @@ const VideoCTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
                 href,
                 videoName,
                 videoDescription,
+                ctaContents,
               },
             })
           );

packages/web-components/src/components/cta/__stories__/cta.stories.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2024
+ * Copyright IBM Corp. 2020, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -221,6 +221,28 @@ export const Default = (args) => {
   `;
 };
 
+export const VideoWithSlottedCTA = () => {
+  return html`
+    <c4d-cta
+      cta-style="text"
+      cta-type="video"
+      href="0_ibuqxqbe"
+      video-name="Meet Mombo"
+      video-description="This is a custom video description with CTA buttons that will be forwarded to the lightbox.">
+      Video Link
+      <div slot="cta">
+        <c4d-button href="https://example.com" cta-type="local">
+          Follow Link
+        </c4d-button>
+      </div>
+    </c4d-cta>
+  `;
+};
+
+VideoWithSlottedCTA.story = {
+  parameters: {},
+};
+
 Default.story = {
   parameters: {
     gridContentClasses: 'cds--col-sm-4 cds--col-lg-8',

packages/web-components/src/components/cta/video-cta-composite.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2024
+ * Copyright IBM Corp. 2020, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -126,11 +126,23 @@ class C4DVideoCTAComposite extends ModalRenderMixin(
   @HostListener('eventRunAction')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleRunAction(event: CustomEvent) {
-    const { ctaType, href, videoName, videoDescription } = event.detail;
+    const { ctaType, href, videoName, videoDescription, ctaContents } =
+      event.detail;
+    const { selectorLightboxVideoPlayerComposite } = this
+      .constructor as typeof C4DVideoCTAComposite;
     if (ctaType === CTA_TYPE.VIDEO) {
       this._activeVideoId = href;
       this._videoName = videoName;
       this._videoDescription = videoDescription;
+      this._ctaContents = ctaContents;
+      if (ctaContents) {
+        const videoPlayerComposite = (
+          this.modalRenderRoot as Element
+        ).querySelector(
+          selectorLightboxVideoPlayerComposite
+        ) as C4DLightboxVideoPlayerComposite;
+        videoPlayerComposite.ctaElement = this._ctaContents;
+      }
     }
   }
 
@@ -160,6 +172,12 @@ class C4DVideoCTAComposite extends ModalRenderMixin(
   @property({ attribute: false })
   mediaData?: { [videoId: string]: MediaData };
 
+  /**
+   *The CTA slotted content
+   */
+  @property()
+  _ctaContents?: HTMLElement;
+
   disconnectedCallback() {
     if (this._hCloseModal) {
       this._hCloseModal = this._hCloseModal.release();
@@ -178,6 +196,7 @@ class C4DVideoCTAComposite extends ModalRenderMixin(
         selectorLightboxVideoPlayerComposite
       ) as C4DLightboxVideoPlayerComposite;
       // Manually hooks the event listeners on the modal render root to make the event names configurable
+      videoPlayerComposite.ctaElement = this._ctaContents;
       this._hCloseModal = on(
         videoPlayerComposite.modalRenderRoot,
         (this.constructor as typeof C4DVideoCTAComposite).eventCloseLightbox,
@@ -197,6 +216,7 @@ class C4DVideoCTAComposite extends ModalRenderMixin(
       _activeVideoId: activeVideoId,
       _embedMedia: embedMedia,
       _videoDescription: videoDescription,
+      _ctaContents: ctaContents,
     } = this;
     return html`
       <c4d-lightbox-video-player-composite
@@ -208,6 +228,7 @@ class C4DVideoCTAComposite extends ModalRenderMixin(
         .embeddedVideos="${ifDefined(embeddedVideos)}"
         .mediaData="${ifDefined(mediaData)}"
         ._embedMedia="${ifDefined(embedMedia)}">
+        ${ctaContents}
       </c4d-lightbox-video-player-composite>
     `;
   }