[Pricing-Table]: Allow for flexible placement of slot CTA so that <dds-video-cta-container> can be used

Engineering info:

Innovation Team engineer: @andy-blum
Innovation Team JIRA Ticket: https://jsw.ibm.com/browse/HC-2502
DPO consulting engineer: N/A

Description

The AEM team is currently integrating the Pricing Table component into the CMS and noticed that when wrapping the using the <dds-video-cta-container> component to get the video lightbox media viewer, the <dds-pricing-table-header-cell-cta>.
This is happening because the slot="cta" is being loaded to the <dds-pricing-table-header-cell-cta> and not on the parent level when the CTA type is equal to video.

From AEM dev

The tag does allow us to use "video" as a "cta-type" attribute and the icon will appear in button. However, no action will occur when clicking on the button. I did try wrapping the around the tag. But, the button will not display because the dds-video-cta-container only has a slot in its shadow root and dds-pricing-table-header-cell-cta has "slot='cta'" automatically being applied to it. See screenshot below:

See PR thread: https://github.ibm.com/CHQ-Marketing-Products-and-Platforms/adobe-cms/pull/1368#issuecomment-45628527

Screen Shot 2022-06-29 at 9 58 58 AM

Component(s) impacted

Pricing-Table - <dds-pricing-table-header-cell-cta>

Browser

Chrome, Safari, Firefox, Microsoft Edge

Carbon for IBM.com version

v1.35.0

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

AEM

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://codesandbox.io/s/lucid-satoshi-sqvbri?file=/index.html:3986-4304

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)