feat(cta): pass slotted CTA data to lightbox

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>
     `;
   }