npm - @carbon/ibmdotcom-web-components - Versions diffs - 1.26.0-rc.1 → 1.26.0-rc.3 - Mend

@carbon/ibmdotcom-web-components 1.26.0-rc.1 → 1.26.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (788) hide show

package/es/components/cta/card-cta.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card-cta.js","names":["html","property","customElement","settings","ddsSettings","ifNonNull","PlayVideo","formatVideoCaption","KalturaPlayerAPI","DDSCard","CTAMixin","VideoCTAMixin","CTA_TYPE","styles","prefix","stablePrefix","ddsPrefix","DDSCardCTA","ctaType","videoName","formatVideoCaptionInEffect","VIDEO","caption","name","dispatchEvent","CustomEvent","constructor","eventVideoTitleUpdated","bubbles","composed","videoThumbnailUrl","thumbnail","_hasImage","hasImage","noPoster","image","undefined","slot","_handleSlotChange","reflect","attribute","REGULAR","type","Number","Boolean","changedProperties","footer","querySelector","selectorFooter","has","videoDuration","videoDescription","formatVideoDuration","formatVideoDurationInEffect","headingText","textContent","copyText","ariaTitle","ariaDuration","getMediaDurationFormatted","altAriaLabel"],"sources":["components/cta/card-cta.ts"],"sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2020, 2022\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html, property, customElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport ifNonNull from '@carbon/carbon-web-components/es/globals/directives/if-non-null.js';\nimport PlayVideo from '@carbon/ibmdotcom-styles/icons/svg/play-video.svg';\nimport {\n formatVideoCaption,\n formatVideoDuration,\n} from '@carbon/ibmdotcom-utilities/es/utilities/formatVideoCaption/formatVideoCaption.js';\nimport KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayer/KalturaPlayer';\nimport DDSCard from '../card/card';\nimport '../card/card-heading';\nimport './card-cta-image';\nimport CTAMixin from '../../component-mixins/cta/cta';\nimport VideoCTAMixin from '../../component-mixins/cta/video';\nimport DDSCardCTAFooter from './card-cta-footer';\nimport './card-cta-footer';\nimport { CTA_TYPE } from './defs';\nimport styles from './cta.scss';\n\nexport { CTA_TYPE };\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/\n Card CTA.\n \n @element dds-card-cta\n /\n@customElement(`${ddsPrefix}-card-cta`)\nclass DDSCardCTA extends VideoCTAMixin(CTAMixin(DDSCard)) {\n protected _renderHeading() {\n const {\n ctaType,\n videoName,\n formatVideoCaption: formatVideoCaptionInEffect,\n } = this;\n if (ctaType !== CTA_TYPE.VIDEO) {\n return super._renderHeading();\n }\n const caption = formatVideoCaptionInEffect({ name: videoName });\n\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof DDSCardCTA).eventVideoTitleUpdated,\n {\n bubbles: true,\n composed: true,\n }\n )\n );\n return html`\n <slot name=\"heading\"></slot\n ><dds-card-heading>${caption}</dds-card-heading>\n `;\n }\n\n protected _renderImage() {\n const {\n ctaType,\n videoName,\n videoThumbnailUrl,\n thumbnail,\n _hasImage: hasImage,\n noPoster,\n } = this;\n const image =\n hasImage \|\| ctaType !== CTA_TYPE.VIDEO \|\| noPoster\n ? undefined\n : html`\n <dds-card-cta-image\n class=\"${prefix}--card__video-thumbnail\"\n alt=\"${ifNonNull(videoName)}\"\n default-src=\"${ifNonNull(thumbnail \|\| videoThumbnailUrl)}\"\n >\n ${PlayVideo({ slot: 'icon' })}\n </dds-card-cta-image>\n `;\n return html`\n <slot name=\"image\" @slotchange=\"${this._handleSlotChange}\"></slot>${image}\n `;\n }\n\n /\n The CTA type.\n /\n @property({ reflect: true, attribute: 'cta-type' })\n ctaType = CTA_TYPE.REGULAR;\n\n /\n The formatter for the video caption, composed with the video name and the video duration.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatVideoCaption = formatVideoCaption;\n\n /\n The formatter for the video duration.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatVideoDuration?: typeof formatVideoDuration;\n\n /\n The video duration.\n /\n @property({ type: Number, attribute: 'video-duration' })\n videoDuration?: number;\n\n /\n The video name.\n /\n @property({ attribute: 'video-name' })\n videoName?: string;\n\n /\n The custom video description.\n /\n @property({ attribute: 'video-description' })\n videoDescription?: string;\n\n /\n The video thumbnail URL.\n /\n @property({ attribute: 'video-thumbnail-url' })\n videoThumbnailUrl?: string;\n\n /\n Optional custom video thumbnail\n /\n @property({ reflect: true, attribute: 'thumbnail' })\n thumbnail?: '';\n\n /\n Set `true` if Poster Video Image should not be shown.\n /\n @property({ type: Boolean, reflect: true, attribute: 'no-poster' })\n noPoster = false;\n\n updated(changedProperties) {\n super.updated(changedProperties);\n const footer = this.querySelector(\n (this.constructor as typeof DDSCardCTA).selectorFooter\n );\n if (\n changedProperties.has('ctaType') \|\|\n changedProperties.has('formatCaption') \|\|\n changedProperties.has('formatDuration') \|\|\n changedProperties.has('videoDuration') \|\|\n changedProperties.has('videoName')\n ) {\n const {\n ctaType,\n videoDuration,\n videoName,\n videoDescription,\n formatVideoCaption: formatVideoCaptionInEffect,\n formatVideoDuration: formatVideoDurationInEffect,\n } = this;\n const headingText = this.querySelector(\n `${ddsPrefix}-card-heading`\n )?.textContent;\n const copyText = this.textContent;\n if (footer) {\n const ariaTitle = videoName \|\| headingText \|\| copyText;\n let ariaDuration = '';\n if (videoDuration !== undefined) {\n ariaDuration = `, DURATION ${KalturaPlayerAPI.getMediaDurationFormatted(\n videoDuration,\n false\n )}`;\n }\n (\n footer as DDSCardCTAFooter\n ).altAriaLabel = `${ariaTitle}${ariaDuration}`;\n (footer as DDSCardCTAFooter).ctaType = ctaType;\n (footer as DDSCardCTAFooter).videoDuration = videoDuration;\n (footer as DDSCardCTAFooter).videoName = videoName;\n (footer as DDSCardCTAFooter).videoDescription = videoDescription;\n if (formatVideoCaptionInEffect) {\n (footer as DDSCardCTAFooter).formatVideoCaption =\n formatVideoCaptionInEffect;\n }\n if (formatVideoDurationInEffect) {\n (footer as DDSCardCTAFooter).formatVideoDuration =\n formatVideoDurationInEffect;\n }\n }\n }\n }\n\n static get stableSelector() {\n return `${ddsPrefix}--card-cta`;\n }\n\n /\n The name of the custom event fired when the video title is updated\n /\n static get eventVideoTitleUpdated() {\n return `${ddsPrefix}-card-cta-video-title-updated`;\n }\n\n /\n A selector that will return the child footer.\n /\n static get selectorFooter() {\n return `${ddsPrefix}-card-cta-footer`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/ @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSCardCTA;\n"],"mappings":"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"}
1	+ {"version":3,"file":"card-cta.js","names":["html","property","customElement","settings","ddsSettings","ifNonNull","PlayVideo","formatVideoCaption","KalturaPlayerAPI","DDSCard","CTAMixin","VideoCTAMixin","CTA_TYPE","styles","prefix","stablePrefix","ddsPrefix","DDSCardCTA","ctaType","videoName","formatVideoCaptionInEffect","VIDEO","caption","name","dispatchEvent","CustomEvent","constructor","eventVideoTitleUpdated","bubbles","composed","videoThumbnailUrl","thumbnail","_hasImage","hasImage","noPoster","image","undefined","slot","_handleSlotChange","reflect","attribute","REGULAR","type","Number","Boolean","changedProperties","footer","querySelector","selectorFooter","has","videoDuration","videoDescription","formatVideoDuration","formatVideoDurationInEffect","headingText","textContent","copyText","ariaTitle","ariaDuration","getMediaDurationFormatted","altAriaLabel"],"sources":["components/cta/card-cta.ts"],"sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2020, 2022\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html, property, customElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport ifNonNull from '@carbon/web-components/es/globals/directives/if-non-null.js';\nimport PlayVideo from '@carbon/ibmdotcom-styles/icons/svg/play-video.svg';\nimport {\n formatVideoCaption,\n formatVideoDuration,\n} from '@carbon/ibmdotcom-utilities/es/utilities/formatVideoCaption/formatVideoCaption.js';\nimport KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayer/KalturaPlayer';\nimport DDSCard from '../card/card';\nimport '../card/card-heading';\nimport './card-cta-image';\nimport CTAMixin from '../../component-mixins/cta/cta';\nimport VideoCTAMixin from '../../component-mixins/cta/video';\nimport DDSCardCTAFooter from './card-cta-footer';\nimport './card-cta-footer';\nimport { CTA_TYPE } from './defs';\nimport styles from './cta.scss';\n\nexport { CTA_TYPE };\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/\n Card CTA.\n \n @element dds-card-cta\n /\n@customElement(`${ddsPrefix}-card-cta`)\nclass DDSCardCTA extends VideoCTAMixin(CTAMixin(DDSCard)) {\n protected _renderHeading() {\n const {\n ctaType,\n videoName,\n formatVideoCaption: formatVideoCaptionInEffect,\n } = this;\n if (ctaType !== CTA_TYPE.VIDEO) {\n return super._renderHeading();\n }\n const caption = formatVideoCaptionInEffect({ name: videoName });\n\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof DDSCardCTA).eventVideoTitleUpdated,\n {\n bubbles: true,\n composed: true,\n }\n )\n );\n return html`\n <slot name=\"heading\"></slot\n ><dds-card-heading>${caption}</dds-card-heading>\n `;\n }\n\n protected _renderImage() {\n const {\n ctaType,\n videoName,\n videoThumbnailUrl,\n thumbnail,\n _hasImage: hasImage,\n noPoster,\n } = this;\n const image =\n hasImage \|\| ctaType !== CTA_TYPE.VIDEO \|\| noPoster\n ? undefined\n : html`\n <dds-card-cta-image\n class=\"${prefix}--card__video-thumbnail\"\n alt=\"${ifNonNull(videoName)}\"\n default-src=\"${ifNonNull(thumbnail \|\| videoThumbnailUrl)}\"\n >\n ${PlayVideo({ slot: 'icon' })}\n </dds-card-cta-image>\n `;\n return html`\n <slot name=\"image\" @slotchange=\"${this._handleSlotChange}\"></slot>${image}\n `;\n }\n\n /\n The CTA type.\n /\n @property({ reflect: true, attribute: 'cta-type' })\n ctaType = CTA_TYPE.REGULAR;\n\n /\n The formatter for the video caption, composed with the video name and the video duration.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatVideoCaption = formatVideoCaption;\n\n /\n The formatter for the video duration.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatVideoDuration?: typeof formatVideoDuration;\n\n /\n The video duration.\n /\n @property({ type: Number, attribute: 'video-duration' })\n videoDuration?: number;\n\n /\n The video name.\n /\n @property({ attribute: 'video-name' })\n videoName?: string;\n\n /\n The custom video description.\n /\n @property({ attribute: 'video-description' })\n videoDescription?: string;\n\n /\n The video thumbnail URL.\n /\n @property({ attribute: 'video-thumbnail-url' })\n videoThumbnailUrl?: string;\n\n /\n Optional custom video thumbnail\n /\n @property({ reflect: true, attribute: 'thumbnail' })\n thumbnail?: '';\n\n /\n Set `true` if Poster Video Image should not be shown.\n /\n @property({ type: Boolean, reflect: true, attribute: 'no-poster' })\n noPoster = false;\n\n updated(changedProperties) {\n super.updated(changedProperties);\n const footer = this.querySelector(\n (this.constructor as typeof DDSCardCTA).selectorFooter\n );\n if (\n changedProperties.has('ctaType') \|\|\n changedProperties.has('formatCaption') \|\|\n changedProperties.has('formatDuration') \|\|\n changedProperties.has('videoDuration') \|\|\n changedProperties.has('videoName')\n ) {\n const {\n ctaType,\n videoDuration,\n videoName,\n videoDescription,\n formatVideoCaption: formatVideoCaptionInEffect,\n formatVideoDuration: formatVideoDurationInEffect,\n } = this;\n const headingText = this.querySelector(\n `${ddsPrefix}-card-heading`\n )?.textContent;\n const copyText = this.textContent;\n if (footer) {\n const ariaTitle = videoName \|\| headingText \|\| copyText;\n let ariaDuration = '';\n if (videoDuration !== undefined) {\n ariaDuration = `, DURATION ${KalturaPlayerAPI.getMediaDurationFormatted(\n videoDuration,\n false\n )}`;\n }\n (\n footer as DDSCardCTAFooter\n ).altAriaLabel = `${ariaTitle}${ariaDuration}`;\n (footer as DDSCardCTAFooter).ctaType = ctaType;\n (footer as DDSCardCTAFooter).videoDuration = videoDuration;\n (footer as DDSCardCTAFooter).videoName = videoName;\n (footer as DDSCardCTAFooter).videoDescription = videoDescription;\n if (formatVideoCaptionInEffect) {\n (footer as DDSCardCTAFooter).formatVideoCaption =\n formatVideoCaptionInEffect;\n }\n if (formatVideoDurationInEffect) {\n (footer as DDSCardCTAFooter).formatVideoDuration =\n formatVideoDurationInEffect;\n }\n }\n }\n }\n\n static get stableSelector() {\n return `${ddsPrefix}--card-cta`;\n }\n\n /\n The name of the custom event fired when the video title is updated\n /\n static get eventVideoTitleUpdated() {\n return `${ddsPrefix}-card-cta-video-title-updated`;\n }\n\n /\n A selector that will return the child footer.\n /\n static get selectorFooter() {\n return `${ddsPrefix}-card-cta-footer`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/ @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSCardCTA;\n"],"mappings":"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"}

package/es/components/cta/feature-cta.d.ts CHANGED Viewed

@@ -28,7 +28,10 @@ declare const DDSFeatureCTA_base: ((abstract new (...args: any[]) => {
     videoDuration?: number | undefined;
     videoName?: string | undefined;
     videoDescription?: string | undefined;
-    videoThumbnailUrl?: string | undefined;
+    videoThumbnailUrl?: string | undefined; /**
+     * The formatter for the video duration.
+     * Should be changed upon the locale the UI is rendered with.
+     */
     updated(changedProperties: any): void;
     accessKey: string;
     readonly accessKeyLabel: string;

package/es/components/cta/feature-cta.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/cta/feature-cta.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAWH,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAI1D,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAGlC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKpB;;;;GAIG;AACH,cACM,aAAc,SAAQ,kBAAuC;IACjE,SAAS,CAAC,WAAW;IA2BrB,SAAS,CAAC,YAAY;IAuBtB;;OAEG;IAEH,cAAc,MAAC;IAEf;;OAEG;IAEH,OAAO,WAAoB;IAE3B;;;OAGG;IAEH,kBAAkB,MAAsB;IAExC;;;OAGG;IAEH,mBAAmB,MAAuB;IAE1C;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,CAAC,EAAE,EAAE,CAAC;IAEf;;OAEG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,OAAO,CAAC,iBAAiB,KAAA;IAyBzB;;OAEG;IACH,MAAM,KAAK,eAAe,WAEzB;IAED;;OAEG;IACH,MAAM,KAAK,cAAc,WAExB;IAED,MAAM,KAAK,cAAc,WAExB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAGD,eAAe,aAAa,CAAC","file":"feature-cta.d.ts","sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2020, 2022\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { property, customElement, html } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport ifNonNull from '@carbon/~~carbon-~~web-components/es/globals/directives/if-non-null.js';\nimport PlayVideo from '@carbon/ibmdotcom-styles/icons/svg/play-video.svg';\nimport {\n formatVideoCaption,\n formatVideoDuration,\n} from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js';\nimport DDSFeatureCard from '../feature-card/feature-card';\nimport CTAMixin from '../../component-mixins/cta/cta';\nimport VideoCTAMixin from '../../component-mixins/cta/video';\nimport DDSFeatureCTAFooter from './feature-cta-footer';\nimport './feature-cta-footer';\nimport { CTA_TYPE } from './defs';\nimport styles from './cta.scss';\n\nimport '../card/card-eyebrow';\nimport '../card/card-heading';\nimport '../image/image';\n\nexport { CTA_TYPE };\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/\n Feature CTA.\n \n @element dds-feature-cta\n /\n@customElement(`${ddsPrefix}-feature-cta`)\nclass DDSFeatureCTA extends VideoCTAMixin(CTAMixin(DDSFeatureCard)) {\n protected _renderCopy() {\n const {\n ctaType,\n videoDuration,\n videoName,\n formatVideoCaption: formatCaptionInEffect,\n formatVideoDuration: formatDurationInEffect,\n } = this;\n if (ctaType !== CTA_TYPE.VIDEO) {\n return super._renderCopy();\n }\n const caption = formatCaptionInEffect({\n duration: formatDurationInEffect({\n duration: !videoDuration ? videoDuration : videoDuration 1000,\n }),\n name: videoName,\n });\n\n this.captionHeading = caption;\n\n return html`\n <div class=\"${prefix}--card__copy\">\n <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n </div>\n `;\n }\n\n protected _renderImage() {\n const { ctaType, noPoster, thumbnail, videoName, videoThumbnailUrl } = this;\n const image =\n ctaType !== CTA_TYPE.VIDEO \|\| noPoster\n ? undefined\n : html`\n <dds-image\n alt=\"${ifNonNull(videoName)}\"\n default-src=\"${ifNonNull(thumbnail \|\| videoThumbnailUrl)}\"\n slot=\"image\"\n >\n ${PlayVideo({ slot: 'icon' })}\n </dds-image>\n `;\n return noPoster\n ? undefined\n : html`\n <slot name=\"image\" @slotchange=\"${this._handleSlotChange}\"\n >${image}</slot\n >\n `;\n }\n\n /*\n The video caption to replace the heading with.\n /\n @property({ attribute: false })\n captionHeading;\n\n /\n The CTA type.\n /\n @property({ reflect: true, attribute: 'cta-type' })\n ctaType = CTA_TYPE.REGULAR;\n\n /\n The formatter for the video caption, composed with the video name and the video duration.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatVideoCaption = formatVideoCaption;\n\n /\n The formatter for the video duration.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatVideoDuration = formatVideoDuration;\n\n /\n Set `true` if Poster Video Image should not be shown.\n /\n @property({ type: Boolean, reflect: true, attribute: 'no-poster' })\n noPoster = false;\n\n /\n Optional custom video thumbnail\n /\n @property({ reflect: true, attribute: 'thumbnail' })\n thumbnail?: '';\n\n /\n The video duration.\n /\n @property({ type: Number, attribute: 'video-duration' })\n videoDuration?: number;\n\n /\n The video name.\n /\n @property({ attribute: 'video-name' })\n videoName?: string;\n\n /\n The custom video description.\n /\n @property({ attribute: 'video-description' })\n videoDescription?: string;\n\n /\n The video thumbnail URL.\n /\n videoThumbnailUrl?: string;\n\n updated(changedProperties) {\n super.updated(changedProperties);\n const { selectorFooter } = this.constructor as typeof DDSFeatureCTA;\n if (\n changedProperties.has('ctaType') \|\|\n changedProperties.has('videoName') \|\|\n changedProperties.has('captionHeading')\n ) {\n const { ctaType, videoName, videoDescription } = this;\n const footer = this.querySelector(selectorFooter);\n if (footer) {\n (footer as DDSFeatureCTAFooter).ctaType = ctaType;\n (footer as DDSFeatureCTAFooter).altAriaLabel =\n this.videoName \|\| this.captionHeading;\n (footer as DDSFeatureCTAFooter).videoName = videoName;\n (footer as DDSFeatureCTAFooter).videoDescription = videoDescription;\n }\n }\n if (changedProperties.has('captionHeading')) {\n (this.querySelector(\n (this.constructor as typeof DDSFeatureCTA).selectorHeading\n ) as HTMLElement)!.innerText = this.captionHeading;\n }\n }\n\n /\n A selector that will return the child heading.\n /\n static get selectorHeading() {\n return `${ddsPrefix}-card-heading`;\n }\n\n /\n A selector that will return the child footer.\n /\n static get selectorFooter() {\n return `${ddsPrefix}-feature-cta-footer`;\n }\n\n static get stableSelector() {\n return `${ddsPrefix}--feature-cta`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/ @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSFeatureCTA;\n"]}
1	+ {"version":3,"sources":["components/cta/feature-cta.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAWH,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAI1D,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAGlC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;;;;;;;4CAiFlB;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/EL;;;;GAIG;AACH,cACM,aAAc,SAAQ,kBAAuC;IACjE,SAAS,CAAC,WAAW;IA2BrB,SAAS,CAAC,YAAY;IAuBtB;;OAEG;IAEH,cAAc,MAAC;IAEf;;OAEG;IAEH,OAAO,WAAoB;IAE3B;;;OAGG;IAEH,kBAAkB,MAAsB;IAExC;;;OAGG;IAEH,mBAAmB,MAAuB;IAE1C;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,CAAC,EAAE,EAAE,CAAC;IAEf;;OAEG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,OAAO,CAAC,iBAAiB,KAAA;IAyBzB;;OAEG;IACH,MAAM,KAAK,eAAe,WAEzB;IAED;;OAEG;IACH,MAAM,KAAK,cAAc,WAExB;IAED,MAAM,KAAK,cAAc,WAExB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAGD,eAAe,aAAa,CAAC","file":"feature-cta.d.ts","sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2020, 2022\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { property, customElement, html } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport ifNonNull from '@carbon/web-components/es/globals/directives/if-non-null.js';\nimport PlayVideo from '@carbon/ibmdotcom-styles/icons/svg/play-video.svg';\nimport {\n formatVideoCaption,\n formatVideoDuration,\n} from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js';\nimport DDSFeatureCard from '../feature-card/feature-card';\nimport CTAMixin from '../../component-mixins/cta/cta';\nimport VideoCTAMixin from '../../component-mixins/cta/video';\nimport DDSFeatureCTAFooter from './feature-cta-footer';\nimport './feature-cta-footer';\nimport { CTA_TYPE } from './defs';\nimport styles from './cta.scss';\n\nimport '../card/card-eyebrow';\nimport '../card/card-heading';\nimport '../image/image';\n\nexport { CTA_TYPE };\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/\n Feature CTA.\n \n @element dds-feature-cta\n /\n@customElement(`${ddsPrefix}-feature-cta`)\nclass DDSFeatureCTA extends VideoCTAMixin(CTAMixin(DDSFeatureCard)) {\n protected _renderCopy() {\n const {\n ctaType,\n videoDuration,\n videoName,\n formatVideoCaption: formatCaptionInEffect,\n formatVideoDuration: formatDurationInEffect,\n } = this;\n if (ctaType !== CTA_TYPE.VIDEO) {\n return super._renderCopy();\n }\n const caption = formatCaptionInEffect({\n duration: formatDurationInEffect({\n duration: !videoDuration ? videoDuration : videoDuration 1000,\n }),\n name: videoName,\n });\n\n this.captionHeading = caption;\n\n return html`\n <div class=\"${prefix}--card__copy\">\n <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n </div>\n `;\n }\n\n protected _renderImage() {\n const { ctaType, noPoster, thumbnail, videoName, videoThumbnailUrl } = this;\n const image =\n ctaType !== CTA_TYPE.VIDEO \|\| noPoster\n ? undefined\n : html`\n <dds-image\n alt=\"${ifNonNull(videoName)}\"\n default-src=\"${ifNonNull(thumbnail \|\| videoThumbnailUrl)}\"\n slot=\"image\"\n >\n ${PlayVideo({ slot: 'icon' })}\n </dds-image>\n `;\n return noPoster\n ? undefined\n : html`\n <slot name=\"image\" @slotchange=\"${this._handleSlotChange}\"\n >${image}</slot\n >\n `;\n }\n\n /*\n The video caption to replace the heading with.\n /\n @property({ attribute: false })\n captionHeading;\n\n /\n The CTA type.\n /\n @property({ reflect: true, attribute: 'cta-type' })\n ctaType = CTA_TYPE.REGULAR;\n\n /\n The formatter for the video caption, composed with the video name and the video duration.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatVideoCaption = formatVideoCaption;\n\n /\n The formatter for the video duration.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatVideoDuration = formatVideoDuration;\n\n /\n Set `true` if Poster Video Image should not be shown.\n /\n @property({ type: Boolean, reflect: true, attribute: 'no-poster' })\n noPoster = false;\n\n /\n Optional custom video thumbnail\n /\n @property({ reflect: true, attribute: 'thumbnail' })\n thumbnail?: '';\n\n /\n The video duration.\n /\n @property({ type: Number, attribute: 'video-duration' })\n videoDuration?: number;\n\n /\n The video name.\n /\n @property({ attribute: 'video-name' })\n videoName?: string;\n\n /\n The custom video description.\n /\n @property({ attribute: 'video-description' })\n videoDescription?: string;\n\n /\n The video thumbnail URL.\n /\n videoThumbnailUrl?: string;\n\n updated(changedProperties) {\n super.updated(changedProperties);\n const { selectorFooter } = this.constructor as typeof DDSFeatureCTA;\n if (\n changedProperties.has('ctaType') \|\|\n changedProperties.has('videoName') \|\|\n changedProperties.has('captionHeading')\n ) {\n const { ctaType, videoName, videoDescription } = this;\n const footer = this.querySelector(selectorFooter);\n if (footer) {\n (footer as DDSFeatureCTAFooter).ctaType = ctaType;\n (footer as DDSFeatureCTAFooter).altAriaLabel =\n this.videoName \|\| this.captionHeading;\n (footer as DDSFeatureCTAFooter).videoName = videoName;\n (footer as DDSFeatureCTAFooter).videoDescription = videoDescription;\n }\n }\n if (changedProperties.has('captionHeading')) {\n (this.querySelector(\n (this.constructor as typeof DDSFeatureCTA).selectorHeading\n ) as HTMLElement)!.innerText = this.captionHeading;\n }\n }\n\n /\n A selector that will return the child heading.\n /\n static get selectorHeading() {\n return `${ddsPrefix}-card-heading`;\n }\n\n /\n A selector that will return the child footer.\n /\n static get selectorFooter() {\n return `${ddsPrefix}-feature-cta-footer`;\n }\n\n static get stableSelector() {\n return `${ddsPrefix}--feature-cta`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/ @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSFeatureCTA;\n"]}

package/es/components/cta/feature-cta.js CHANGED Viewed

@@ -17,7 +17,7 @@ let _ = t => t,
 import { property, customElement, html } from 'lit-element';
 import settings from 'carbon-components/es/globals/js/settings.js';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import ifNonNull from '@carbon/carbon-web-components/es/globals/directives/if-non-null.js';
+import ifNonNull from '@carbon/web-components/es/globals/directives/if-non-null.js';
 import PlayVideo from "../../icons/play-video.js";
 import { formatVideoCaption, formatVideoDuration } from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js';
 import DDSFeatureCard from "../feature-card/feature-card.js";

package/es/components/cta/feature-cta.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"feature-cta.js","names":["property","customElement","html","settings","ddsSettings","ifNonNull","PlayVideo","formatVideoCaption","formatVideoDuration","DDSFeatureCard","CTAMixin","VideoCTAMixin","CTA_TYPE","styles","prefix","stablePrefix","ddsPrefix","DDSFeatureCTA","ctaType","videoDuration","videoName","formatCaptionInEffect","formatDurationInEffect","VIDEO","caption","duration","name","captionHeading","_handleSlotChange","noPoster","thumbnail","videoThumbnailUrl","image","undefined","slot","attribute","reflect","REGULAR","type","Boolean","Number","changedProperties","selectorFooter","constructor","has","videoDescription","footer","querySelector","altAriaLabel","selectorHeading","innerText"],"sources":["components/cta/feature-cta.ts"],"sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2020, 2022\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { property, customElement, html } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport ifNonNull from '@carbon/carbon-web-components/es/globals/directives/if-non-null.js';\nimport PlayVideo from '@carbon/ibmdotcom-styles/icons/svg/play-video.svg';\nimport {\n formatVideoCaption,\n formatVideoDuration,\n} from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js';\nimport DDSFeatureCard from '../feature-card/feature-card';\nimport CTAMixin from '../../component-mixins/cta/cta';\nimport VideoCTAMixin from '../../component-mixins/cta/video';\nimport DDSFeatureCTAFooter from './feature-cta-footer';\nimport './feature-cta-footer';\nimport { CTA_TYPE } from './defs';\nimport styles from './cta.scss';\n\nimport '../card/card-eyebrow';\nimport '../card/card-heading';\nimport '../image/image';\n\nexport { CTA_TYPE };\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/\n Feature CTA.\n \n @element dds-feature-cta\n /\n@customElement(`${ddsPrefix}-feature-cta`)\nclass DDSFeatureCTA extends VideoCTAMixin(CTAMixin(DDSFeatureCard)) {\n protected _renderCopy() {\n const {\n ctaType,\n videoDuration,\n videoName,\n formatVideoCaption: formatCaptionInEffect,\n formatVideoDuration: formatDurationInEffect,\n } = this;\n if (ctaType !== CTA_TYPE.VIDEO) {\n return super._renderCopy();\n }\n const caption = formatCaptionInEffect({\n duration: formatDurationInEffect({\n duration: !videoDuration ? videoDuration : videoDuration 1000,\n }),\n name: videoName,\n });\n\n this.captionHeading = caption;\n\n return html`\n <div class=\"${prefix}--card__copy\">\n <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n </div>\n `;\n }\n\n protected _renderImage() {\n const { ctaType, noPoster, thumbnail, videoName, videoThumbnailUrl } = this;\n const image =\n ctaType !== CTA_TYPE.VIDEO \|\| noPoster\n ? undefined\n : html`\n <dds-image\n alt=\"${ifNonNull(videoName)}\"\n default-src=\"${ifNonNull(thumbnail \|\| videoThumbnailUrl)}\"\n slot=\"image\"\n >\n ${PlayVideo({ slot: 'icon' })}\n </dds-image>\n `;\n return noPoster\n ? undefined\n : html`\n <slot name=\"image\" @slotchange=\"${this._handleSlotChange}\"\n >${image}</slot\n >\n `;\n }\n\n /*\n The video caption to replace the heading with.\n /\n @property({ attribute: false })\n captionHeading;\n\n /\n The CTA type.\n /\n @property({ reflect: true, attribute: 'cta-type' })\n ctaType = CTA_TYPE.REGULAR;\n\n /\n The formatter for the video caption, composed with the video name and the video duration.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatVideoCaption = formatVideoCaption;\n\n /\n The formatter for the video duration.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatVideoDuration = formatVideoDuration;\n\n /\n Set `true` if Poster Video Image should not be shown.\n /\n @property({ type: Boolean, reflect: true, attribute: 'no-poster' })\n noPoster = false;\n\n /\n Optional custom video thumbnail\n /\n @property({ reflect: true, attribute: 'thumbnail' })\n thumbnail?: '';\n\n /\n The video duration.\n /\n @property({ type: Number, attribute: 'video-duration' })\n videoDuration?: number;\n\n /\n The video name.\n /\n @property({ attribute: 'video-name' })\n videoName?: string;\n\n /\n The custom video description.\n /\n @property({ attribute: 'video-description' })\n videoDescription?: string;\n\n /\n The video thumbnail URL.\n /\n videoThumbnailUrl?: string;\n\n updated(changedProperties) {\n super.updated(changedProperties);\n const { selectorFooter } = this.constructor as typeof DDSFeatureCTA;\n if (\n changedProperties.has('ctaType') \|\|\n changedProperties.has('videoName') \|\|\n changedProperties.has('captionHeading')\n ) {\n const { ctaType, videoName, videoDescription } = this;\n const footer = this.querySelector(selectorFooter);\n if (footer) {\n (footer as DDSFeatureCTAFooter).ctaType = ctaType;\n (footer as DDSFeatureCTAFooter).altAriaLabel =\n this.videoName \|\| this.captionHeading;\n (footer as DDSFeatureCTAFooter).videoName = videoName;\n (footer as DDSFeatureCTAFooter).videoDescription = videoDescription;\n }\n }\n if (changedProperties.has('captionHeading')) {\n (this.querySelector(\n (this.constructor as typeof DDSFeatureCTA).selectorHeading\n ) as HTMLElement)!.innerText = this.captionHeading;\n }\n }\n\n /\n A selector that will return the child heading.\n /\n static get selectorHeading() {\n return `${ddsPrefix}-card-heading`;\n }\n\n /\n A selector that will return the child footer.\n /\n static get selectorFooter() {\n return `${ddsPrefix}-feature-cta-footer`;\n }\n\n static get stableSelector() {\n return `${ddsPrefix}--feature-cta`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/ @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSFeatureCTA;\n"],"mappings":"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"}
1	+ {"version":3,"file":"feature-cta.js","names":["property","customElement","html","settings","ddsSettings","ifNonNull","PlayVideo","formatVideoCaption","formatVideoDuration","DDSFeatureCard","CTAMixin","VideoCTAMixin","CTA_TYPE","styles","prefix","stablePrefix","ddsPrefix","DDSFeatureCTA","ctaType","videoDuration","videoName","formatCaptionInEffect","formatDurationInEffect","VIDEO","caption","duration","name","captionHeading","_handleSlotChange","noPoster","thumbnail","videoThumbnailUrl","image","undefined","slot","attribute","reflect","REGULAR","type","Boolean","Number","changedProperties","selectorFooter","constructor","has","videoDescription","footer","querySelector","altAriaLabel","selectorHeading","innerText"],"sources":["components/cta/feature-cta.ts"],"sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2020, 2022\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { property, customElement, html } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport ifNonNull from '@carbon/web-components/es/globals/directives/if-non-null.js';\nimport PlayVideo from '@carbon/ibmdotcom-styles/icons/svg/play-video.svg';\nimport {\n formatVideoCaption,\n formatVideoDuration,\n} from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js';\nimport DDSFeatureCard from '../feature-card/feature-card';\nimport CTAMixin from '../../component-mixins/cta/cta';\nimport VideoCTAMixin from '../../component-mixins/cta/video';\nimport DDSFeatureCTAFooter from './feature-cta-footer';\nimport './feature-cta-footer';\nimport { CTA_TYPE } from './defs';\nimport styles from './cta.scss';\n\nimport '../card/card-eyebrow';\nimport '../card/card-heading';\nimport '../image/image';\n\nexport { CTA_TYPE };\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/\n Feature CTA.\n \n @element dds-feature-cta\n /\n@customElement(`${ddsPrefix}-feature-cta`)\nclass DDSFeatureCTA extends VideoCTAMixin(CTAMixin(DDSFeatureCard)) {\n protected _renderCopy() {\n const {\n ctaType,\n videoDuration,\n videoName,\n formatVideoCaption: formatCaptionInEffect,\n formatVideoDuration: formatDurationInEffect,\n } = this;\n if (ctaType !== CTA_TYPE.VIDEO) {\n return super._renderCopy();\n }\n const caption = formatCaptionInEffect({\n duration: formatDurationInEffect({\n duration: !videoDuration ? videoDuration : videoDuration 1000,\n }),\n name: videoName,\n });\n\n this.captionHeading = caption;\n\n return html`\n <div class=\"${prefix}--card__copy\">\n <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n </div>\n `;\n }\n\n protected _renderImage() {\n const { ctaType, noPoster, thumbnail, videoName, videoThumbnailUrl } = this;\n const image =\n ctaType !== CTA_TYPE.VIDEO \|\| noPoster\n ? undefined\n : html`\n <dds-image\n alt=\"${ifNonNull(videoName)}\"\n default-src=\"${ifNonNull(thumbnail \|\| videoThumbnailUrl)}\"\n slot=\"image\"\n >\n ${PlayVideo({ slot: 'icon' })}\n </dds-image>\n `;\n return noPoster\n ? undefined\n : html`\n <slot name=\"image\" @slotchange=\"${this._handleSlotChange}\"\n >${image}</slot\n >\n `;\n }\n\n /*\n The video caption to replace the heading with.\n /\n @property({ attribute: false })\n captionHeading;\n\n /\n The CTA type.\n /\n @property({ reflect: true, attribute: 'cta-type' })\n ctaType = CTA_TYPE.REGULAR;\n\n /\n The formatter for the video caption, composed with the video name and the video duration.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatVideoCaption = formatVideoCaption;\n\n /\n The formatter for the video duration.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatVideoDuration = formatVideoDuration;\n\n /\n Set `true` if Poster Video Image should not be shown.\n /\n @property({ type: Boolean, reflect: true, attribute: 'no-poster' })\n noPoster = false;\n\n /\n Optional custom video thumbnail\n /\n @property({ reflect: true, attribute: 'thumbnail' })\n thumbnail?: '';\n\n /\n The video duration.\n /\n @property({ type: Number, attribute: 'video-duration' })\n videoDuration?: number;\n\n /\n The video name.\n /\n @property({ attribute: 'video-name' })\n videoName?: string;\n\n /\n The custom video description.\n /\n @property({ attribute: 'video-description' })\n videoDescription?: string;\n\n /\n The video thumbnail URL.\n /\n videoThumbnailUrl?: string;\n\n updated(changedProperties) {\n super.updated(changedProperties);\n const { selectorFooter } = this.constructor as typeof DDSFeatureCTA;\n if (\n changedProperties.has('ctaType') \|\|\n changedProperties.has('videoName') \|\|\n changedProperties.has('captionHeading')\n ) {\n const { ctaType, videoName, videoDescription } = this;\n const footer = this.querySelector(selectorFooter);\n if (footer) {\n (footer as DDSFeatureCTAFooter).ctaType = ctaType;\n (footer as DDSFeatureCTAFooter).altAriaLabel =\n this.videoName \|\| this.captionHeading;\n (footer as DDSFeatureCTAFooter).videoName = videoName;\n (footer as DDSFeatureCTAFooter).videoDescription = videoDescription;\n }\n }\n if (changedProperties.has('captionHeading')) {\n (this.querySelector(\n (this.constructor as typeof DDSFeatureCTA).selectorHeading\n ) as HTMLElement)!.innerText = this.captionHeading;\n }\n }\n\n /\n A selector that will return the child heading.\n /\n static get selectorHeading() {\n return `${ddsPrefix}-card-heading`;\n }\n\n /\n A selector that will return the child footer.\n /\n static get selectorFooter() {\n return `${ddsPrefix}-feature-cta-footer`;\n }\n\n static get stableSelector() {\n return `${ddsPrefix}--feature-cta`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/ @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSFeatureCTA;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,EAAEC,aAAa,EAAEC,IAAI,QAAQ,aAAa;AAC3D,OAAOC,QAAQ,MAAM,6CAA6C;AAClE,OAAOC,WAAW,MAAM,+DAA+D;AACvF,OAAOC,SAAS,MAAM,6DAA6D;AACnF,OAAOC,SAAS,MAAM,2BAAmD;AACzE,SACEC,kBAAkB,EAClBC,mBAAmB,QACd,sGAAsG;AAC7G,OAAOC,cAAc,MAAM,iCAA8B;AACzD,OAAOC,QAAQ,MAAM,mCAAgC;AACrD,OAAOC,aAAa,MAAM,qCAAkC;AAE5D,OAAO,yBAAsB;AAC7B,SAASC,QAAQ,QAAQ,WAAQ;AACjC,OAAOC,MAAM,MAAM,gBAAY;AAE/B,OAAO,yBAAsB;AAC7B,OAAO,yBAAsB;AAC7B,OAAO,mBAAgB;AAEvB,SAASD,QAAQ;AAEjB,MAAM;EAAEE;AAAO,CAAC,GAAGX,QAAQ;AAC3B,MAAM;EAAEY,YAAY,EAAEC;AAAU,CAAC,GAAGZ,WAAW;;AAE/C;AACA;AACA;AACA;AACA;AAJA,IAMMa,aAAa,cADlBhB,aAAa,CAAE,GAAEe,SAAU,cAAa,CAAC;EAA1C,MACMC,aAAa,wBAAiD;IAAA;MAAA;MAAA;IAAA;EA4JpE;EAAC;IAAA,GA5JKA,aAAa;IAAA;MAAA;MAAA;MAAA,OACjB,uBAAwB;QACtB,MAAM;UACJC,OAAO;UACPC,aAAa;UACbC,SAAS;UACTb,kBAAkB,EAAEc,qBAAqB;UACzCb,mBAAmB,EAAEc;QACvB,CAAC,GAAG,IAAI;QACR,IAAIJ,OAAO,KAAKN,QAAQ,CAACW,KAAK,EAAE;UAC9B,4BAVAN,aAAa;QAWf;QACA,MAAMO,OAAO,GAAGH,qBAAqB,CAAC;UACpCI,QAAQ,EAAEH,sBAAsB,CAAC;YAC/BG,QAAQ,EAAE,CAACN,aAAa,GAAGA,aAAa,GAAGA,aAAa,GAAG;UAC7D,CAAC,CAAC;UACFO,IAAI,EAAEN;QACR,CAAC,CAAC;QAEF,IAAI,CAACO,cAAc,GAAGH,OAAO;QAE7B,OAAOtB,IAAI,cAAC;AAChB,oBAAkB,CAAS;AAC3B,6BAA2B,CAAyB;AACpD;AACA,KAAI,GAHgBY,MAAM,EACG,IAAI,CAACc,iBAAiB;MAGjD;IAAC;MAAA;MAAA;MAAA,OAED,wBAAyB;QACvB,MAAM;UAAEV,OAAO;UAAEW,QAAQ;UAAEC,SAAS;UAAEV,SAAS;UAAEW;QAAkB,CAAC,GAAG,IAAI;QAC3E,MAAMC,KAAK,GACTd,OAAO,KAAKN,QAAQ,CAACW,KAAK,IAAIM,QAAQ,GAClCI,SAAS,GACT/B,IAAI,gBAAC;AACf;AACA,qBAAmB,CAAuB;AAC1C,6BAA2B,CAA4C;AACvE;AACA;AACA,gBAAc,CAA8B;AAC5C;AACA,WAAU,GANWG,SAAS,CAACe,SAAS,CAAC,EACZf,SAAS,CAACyB,SAAS,IAAIC,iBAAiB,CAAC,EAGtDzB,SAAS,CAAC;UAAE4B,IAAI,EAAE;QAAO,CAAC,CAAC,CAEhC;QACP,OAAOL,QAAQ,GACXI,SAAS,GACT/B,IAAI,gBAAC;AACb,4CAA0C,CAAyB;AACnE,eAAa,CAAQ;AACrB;AACA,SAAQ,GAHoC,IAAI,CAAC0B,iBAAiB,EACnDI,KAAK,CAEX;MACP;;MAEA;AACF;AACA;IAFE;MAAA;MAAA,aAGChC,QAAQ,CAAC;QAAEmC,SAAS,EAAE;MAAM,CAAC,CAAC;MAAA;MAAA;IAAA;MAAA;MAAA,aAM9BnC,QAAQ,CAAC;QAAEoC,OAAO,EAAE,IAAI;QAAED,SAAS,EAAE;MAAW,CAAC,CAAC;MAAA;MAAA;QAAA,OACzCvB,QAAQ,CAACyB,OAAO;MAAA;IAAA;MAAA;MAAA,aAMzBrC,QAAQ,CAAC;QAAEmC,SAAS,EAAE;MAAM,CAAC,CAAC;MAAA;MAAA;QAAA,OACV5B,kBAAkB;MAAA;IAAA;MAAA;MAAA,aAMtCP,QAAQ,CAAC;QAAEmC,SAAS,EAAE;MAAM,CAAC,CAAC;MAAA;MAAA;QAAA,OACT3B,mBAAmB;MAAA;IAAA;MAAA;MAAA,aAKxCR,QAAQ,CAAC;QAAEsC,IAAI,EAAEC,OAAO;QAAEH,OAAO,EAAE,IAAI;QAAED,SAAS,EAAE;MAAY,CAAC,CAAC;MAAA;MAAA;QAAA,OACxD,KAAK;MAAA;IAAA;MAAA;MAAA,aAKfnC,QAAQ,CAAC;QAAEoC,OAAO,EAAE,IAAI;QAAED,SAAS,EAAE;MAAY,CAAC,CAAC;MAAA;MAAA;IAAA;MAAA;MAAA,aAMnDnC,QAAQ,CAAC;QAAEsC,IAAI,EAAEE,MAAM;QAAEL,SAAS,EAAE;MAAiB,CAAC,CAAC;MAAA;MAAA;IAAA;MAAA;MAAA,aAMvDnC,QAAQ,CAAC;QAAEmC,SAAS,EAAE;MAAa,CAAC,CAAC;MAAA;MAAA;IAAA;MAAA;MAAA,aAMrCnC,QAAQ,CAAC;QAAEmC,SAAS,EAAE;MAAoB,CAAC,CAAC;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;MA/C7C;AACF;AACA;MAIE;AACF;AACA;AACA;MAIE;AACF;AACA;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MASE,iBAAQM,iBAAiB,EAAE;QACzB,qBAjHExB,aAAa,yCAiHDwB,iBAAiB;QAC/B,MAAM;UAAEC;QAAe,CAAC,GAAG,IAAI,CAACC,WAAmC;QACnE,IACEF,iBAAiB,CAACG,GAAG,CAAC,SAAS,CAAC,IAChCH,iBAAiB,CAACG,GAAG,CAAC,WAAW,CAAC,IAClCH,iBAAiB,CAACG,GAAG,CAAC,gBAAgB,CAAC,EACvC;UACA,MAAM;YAAE1B,OAAO;YAAEE,SAAS;YAAEyB;UAAiB,CAAC,GAAG,IAAI;UACrD,MAAMC,MAAM,GAAG,IAAI,CAACC,aAAa,CAACL,cAAc,CAAC;UACjD,IAAII,MAAM,EAAE;YACTA,MAAM,CAAyB5B,OAAO,GAAGA,OAAO;YAChD4B,MAAM,CAAyBE,YAAY,GAC1C,IAAI,CAAC5B,SAAS,IAAI,IAAI,CAACO,cAAc;YACtCmB,MAAM,CAAyB1B,SAAS,GAAGA,SAAS;YACpD0B,MAAM,CAAyBD,gBAAgB,GAAGA,gBAAgB;UACrE;QACF;QACA,IAAIJ,iBAAiB,CAACG,GAAG,CAAC,gBAAgB,CAAC,EAAE;UAC1C,IAAI,CAACG,aAAa,CAChB,IAAI,CAACJ,WAAW,CAA0BM,eAAe,CAC3D,CAAkBC,SAAS,GAAG,IAAI,CAACvB,cAAc;QACpD;MACF;;MAEA;AACF;AACA;IAFE;MAAA;MAAA;MAAA;MAAA,OAGA,2BAA6B;QAC3B,OAAQ,GAAEX,SAAU,eAAc;MACpC;;MAEA;AACF;AACA;IAFE;MAAA;MAAA;MAAA;MAAA,OAGA,0BAA4B;QAC1B,OAAQ,GAAEA,SAAU,qBAAoB;MAC1C;IAAC;MAAA;MAAA;MAAA;MAAA,OAED,0BAA4B;QAC1B,OAAQ,GAAEA,SAAU,eAAc;MACpC;IAAC;MAAA;MAAA;MAAA;MAAA;QAAA,OAEeH,MAAM;MAAA;IAAA;EAAA;AAAA,GA3JIF,aAAa,CAACD,QAAQ,CAACD,cAAc,CAAC,CAAC,GA8JnE;AACA,eAAeQ,aAAa"}

package/es/components/cta/video-cta-composite.d.ts CHANGED Viewed

@@ -325,7 +325,7 @@ declare const DDSVideoCTAComposite_base: ((abstract new (...args: any[]) => {
     readonly selectorContainer: string;
 }) & {
     new (...args: any[]): {
-        _handles: Set<import("@carbon/carbon-web-components/es/globals/internal/handle").default>;
+        _handles: Set<import("@carbon/web-components/es/globals/internal/handle").default>;
         connectedCallback(): void;
         disconnectedCallback(): void;
         accessKey: string;
@@ -356,6 +356,9 @@ declare const DDSVideoCTAComposite_base: ((abstract new (...args: any[]) => {
         readonly classList: DOMTokenList;
         className: string;
         readonly clientHeight: number;
+        /**
+         * The video custom name.
+         */
         readonly clientLeft: number;
         readonly clientTop: number;
         readonly clientWidth: number;
@@ -368,11 +371,6 @@ declare const DDSVideoCTAComposite_base: ((abstract new (...args: any[]) => {
         readonly ownerDocument: Document;
         readonly part: DOMTokenList;
         readonly prefix: string | null;
-        /**
-         * Handles `${ddsPrefix}-cta-request-video-data` event.
-         *
-         * @param event The event.
-         */
         readonly scrollHeight: number;
         scrollLeft: number;
         scrollTop: number;
@@ -390,6 +388,11 @@ declare const DDSVideoCTAComposite_base: ((abstract new (...args: any[]) => {
         getAttributeNode(qualifiedName: string): Attr | null;
         getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
         getBoundingClientRect(): DOMRect;
+        /**
+         * Handles `${ddsPrefix}-cta-run-action` event.
+         *
+         * @param event The event.
+         */
         getClientRects(): DOMRectList;
         getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
         getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;

package/es/components/cta/video-cta-composite.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/cta/video-cta-composite.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAwC,UAAU,EAAE,MAAM,aAAa,CAAC;AAQ/E,OAAO,EAAE,SAAS,EAAE,MAAM,iFAAiF,CAAC;AAI5G,OAAO,0DAA0D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA6DhE;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1DL;;;;GAIG;AACH,cACM,oBAAqB,SAAQ,yBAElC;IAgBC;;OAEG;IAEH,OAAO,CAAC,cAAc,CAAC,CAAS;IAEhC;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAC,CAAS;IAE5B;;OAEG;IAEH,OAAO,CAAC,iBAAiB,CAAC,CAAS;IAEnC;;OAEG;IACH,OAAO,CAAC,YAAY,CAAuB;IAE3C;;OAEG;IACH,OAAO,CAAC,uBAAuB,CAE7B;IAEF;;;;OAIG;YAGW,uBAAuB;IAkBrC;;;;OAIG;IAGH,OAAO,CAAC,gBAAgB;IASxB;;OAEG;IACH,SAAS,KAAK,YAAY,mBASzB;IAED;;OAEG;IAEH,cAAc,CAAC,EAAE;QAAE,CAAC,OAAO,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAE5C;;OAEG;IAEH,SAAS,CAAC,EAAE;QAAE,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IAE7C,oBAAoB;IAOpB,OAAO,CAAC,iBAAiB,KAAA;IAmBzB;;OAEG;IACH,WAAW;IAwBX,MAAM;IAIN;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,oCAAoC,WAE9C;IAED;;OAEG;IACH,MAAM,KAAK,kBAAkB,WAE5B;IAED;;OAEG;IACH,MAAM,KAAK,qBAAqB,WAE/B;IAED;;OAEG;IACH,MAAM,KAAK,cAAc,WAExB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAGD,eAAe,oBAAoB,CAAC","file":"video-cta-composite.d.ts","sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2020, 2022\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html, property, state, customElement, LitElement } from 'lit-element';\nimport on from 'carbon-components/es/globals/js/misc/on.js';\nimport ifNonNull from '@carbon/~~carbon-~~web-components/es/globals/directives/if-non-null.js';\nimport HostListener from '@carbon/~~carbon-~~web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/~~carbon-~~web-components/es/globals/mixins/host-listener.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';\nimport ModalRenderMixin from '../../globals/mixins/modal-render';\nimport { MediaData } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/kalturaPlayerAPI.d';\nimport Handle from '../../globals/internal/handle';\nimport DDSLightboxVideoPlayerComposite from '../lightbox-media-viewer/lightbox-video-player-composite';\n// Above import is interface-only ref and thus code won't be brought into the build\nimport '../lightbox-media-viewer/lightbox-video-player-composite';\nimport { CTA_TYPE } from './defs';\nimport { VideoCTAMixinImpl } from '../../component-mixins/cta/video';\nimport styles from './video-cta-composite.scss';\n\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/\n Component that handles video CTAs in app.\n \n @element dds-video-cta-composite\n /\n@customElement(`${ddsPrefix}-video-cta-composite`)\nclass DDSVideoCTAComposite extends ModalRenderMixin(\n HostListenerMixin(LitElement)\n) {\n /\n The placeholder for `_embedMedia()` action that may be mixed in.\n \n @internal\n /\n @state()\n _embedMedia?: (videoId: string) => Promise<any>;\n\n /\n The placeholder for `_loadVideoData()` Redux action that may be mixed in.\n \n @internal\n /\n _loadVideoData?: (videoId: string) => Promise<MediaData>;\n\n /\n `true` to show the video player.\n /\n @state()\n private _activeVideoId?: string;\n\n /\n The video custom name.\n /\n @state()\n private _videoName?: string;\n\n /\n The video custom description.\n /\n @state()\n private _videoDescription?: string;\n\n /\n The handle for the listener of `${ddsPrefix}-expressive-modal-closed` event.\n /\n private _hCloseModal: Handle \| null = null;\n\n /\n Handles the user gesture of closing video player modal.\n /\n private _handleCloseVideoPlayer = () => {\n this._activeVideoId = undefined;\n };\n\n /\n Handles `${ddsPrefix}-cta-request-video-data` event.\n \n @param event The event.\n /\n @HostListener('eventRequestVideoData')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private async _handleRequestVideoData(event: CustomEvent) {\n const { href, videoName: customVideoName, videoDescription } = event.detail;\n (event.target as VideoCTAMixinImpl).videoThumbnailUrl =\n KalturaPlayerAPI.getThumbnailUrl({\n mediaId: href,\n width: (event?.target as HTMLElement)?.offsetWidth,\n });\n const videoData = await this._loadVideoData?.(href);\n if (videoData) {\n const { duration, name } = videoData;\n const videoName = customVideoName \|\| name;\n\n (event.target as VideoCTAMixinImpl).videoName = videoName;\n (event.target as VideoCTAMixinImpl).videoDescription = videoDescription;\n (event.target as VideoCTAMixinImpl).videoDuration = duration;\n }\n }\n\n /\n Handles `${ddsPrefix}-cta-run-action` event.\n \n @param event The event.\n /\n @HostListener('eventRunAction')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleRunAction(event: CustomEvent) {\n const { ctaType, href, videoName, videoDescription } = event.detail;\n if (ctaType === CTA_TYPE.VIDEO) {\n this._activeVideoId = href;\n this._videoName = videoName;\n this._videoDescription = videoDescription;\n }\n }\n\n /\n The video player.\n /\n protected get _videoPlayer() {\n const { selectorVideoPlayer, selectorLightboxVideoPlayerComposite } = this\n .constructor as typeof DDSVideoCTAComposite;\n const lightbox = (this.modalRenderRoot as Element)?.querySelector(\n selectorLightboxVideoPlayerComposite\n );\n return (\n (lightbox as DDSLightboxVideoPlayerComposite)?.modalRenderRoot as Element\n )?.querySelector(selectorVideoPlayer);\n }\n\n /\n The embedded Kaltura player element (that has `.sendNotification()`, etc. APIs), keyed by the video ID.\n /\n @property({ attribute: false })\n embeddedVideos?: { [videoId: string]: any };\n\n /\n The video data, keyed by the video ID.\n /\n @property({ attribute: false })\n mediaData?: { [videoId: string]: MediaData };\n\n disconnectedCallback() {\n if (this._hCloseModal) {\n this._hCloseModal = this._hCloseModal.release();\n }\n super.disconnectedCallback();\n }\n\n updated(changedProperties) {\n super.updated(changedProperties);\n if (!this._hCloseModal) {\n const { selectorLightboxVideoPlayerComposite } = this\n .constructor as typeof DDSVideoCTAComposite;\n const videoPlayerComposite = (\n this.modalRenderRoot as Element\n ).querySelector(\n selectorLightboxVideoPlayerComposite\n ) as DDSLightboxVideoPlayerComposite;\n // Manually hooks the event listeners on the modal render root to make the event names configurable\n this._hCloseModal = on(\n videoPlayerComposite.modalRenderRoot,\n (this.constructor as typeof DDSVideoCTAComposite).eventCloseLightbox,\n this._handleCloseVideoPlayer as EventListener\n );\n }\n }\n\n /\n @returns The media viewer lightbox for `type=\"video\"`.\n /\n renderModal() {\n const {\n embeddedVideos,\n mediaData,\n _videoName: videoName,\n _activeVideoId: activeVideoId,\n _embedMedia: embedMedia,\n _videoDescription: videoDescription,\n } = this;\n return html`\n <dds-lightbox-video-player-composite\n ?open=\"${Boolean(activeVideoId)}\"\n video-cta-lightbox=\"true\"\n custom-video-name=\"${ifNonNull(videoName)}\"\n custom-video-description=\"${ifNonNull(videoDescription)}\"\n video-id=\"${ifNonNull(activeVideoId)}\"\n .embeddedVideos=\"${ifNonNull(embeddedVideos)}\"\n .mediaData=\"${ifNonNull(mediaData)}\"\n ._embedMedia=\"${ifNonNull(embedMedia)}\"\n >\n </dds-lightbox-video-player-composite>\n `;\n }\n\n render() {\n return html` <slot></slot> `;\n }\n\n /\n A selector selecting the video player component.\n /\n static get selectorVideoPlayer() {\n return `${ddsPrefix}-lightbox-video-player`;\n }\n\n /\n A selector selecting the video player composite component.\n /\n static get selectorLightboxVideoPlayerComposite() {\n return `${ddsPrefix}-lightbox-video-player-composite`;\n }\n\n /\n The name of the custom event fired after the lightbox is closed upon a user gesture.\n /\n static get eventCloseLightbox() {\n return `${ddsPrefix}-expressive-modal-closed`;\n }\n\n /\n The name of the custom event fired when there is a user gesture to run the action.\n /\n static get eventRequestVideoData() {\n return `${ddsPrefix}-cta-request-video-data`;\n }\n\n /\n The name of the custom event fired when there is a user gesture to run the action.\n /\n static get eventRunAction() {\n return `${ddsPrefix}-cta-run-action`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/ @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSVideoCTAComposite;\n"]}
1	+ {"version":3,"sources":["components/cta/video-cta-composite.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAwC,UAAU,EAAE,MAAM,aAAa,CAAC;AAQ/E,OAAO,EAAE,SAAS,EAAE,MAAM,iFAAiF,CAAC;AAI5G,OAAO,0DAA0D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAqChE;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA+CH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAnFL;;;;GAIG;AACH,cACM,oBAAqB,SAAQ,yBAElC;IAgBC;;OAEG;IAEH,OAAO,CAAC,cAAc,CAAC,CAAS;IAEhC;;OAEG;IAEH,OAAO,CAAC,UAAU,CAAC,CAAS;IAE5B;;OAEG;IAEH,OAAO,CAAC,iBAAiB,CAAC,CAAS;IAEnC;;OAEG;IACH,OAAO,CAAC,YAAY,CAAuB;IAE3C;;OAEG;IACH,OAAO,CAAC,uBAAuB,CAE7B;IAEF;;;;OAIG;YAGW,uBAAuB;IAkBrC;;;;OAIG;IAGH,OAAO,CAAC,gBAAgB;IASxB;;OAEG;IACH,SAAS,KAAK,YAAY,mBASzB;IAED;;OAEG;IAEH,cAAc,CAAC,EAAE;QAAE,CAAC,OAAO,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAE5C;;OAEG;IAEH,SAAS,CAAC,EAAE;QAAE,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IAE7C,oBAAoB;IAOpB,OAAO,CAAC,iBAAiB,KAAA;IAmBzB;;OAEG;IACH,WAAW;IAwBX,MAAM;IAIN;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,oCAAoC,WAE9C;IAED;;OAEG;IACH,MAAM,KAAK,kBAAkB,WAE5B;IAED;;OAEG;IACH,MAAM,KAAK,qBAAqB,WAE/B;IAED;;OAEG;IACH,MAAM,KAAK,cAAc,WAExB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAGD,eAAe,oBAAoB,CAAC","file":"video-cta-composite.d.ts","sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2020, 2022\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html, property, state, customElement, LitElement } from 'lit-element';\nimport on from 'carbon-components/es/globals/js/misc/on.js';\nimport ifNonNull from '@carbon/web-components/es/globals/directives/if-non-null.js';\nimport HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';\nimport ModalRenderMixin from '../../globals/mixins/modal-render';\nimport { MediaData } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/kalturaPlayerAPI.d';\nimport Handle from '../../globals/internal/handle';\nimport DDSLightboxVideoPlayerComposite from '../lightbox-media-viewer/lightbox-video-player-composite';\n// Above import is interface-only ref and thus code won't be brought into the build\nimport '../lightbox-media-viewer/lightbox-video-player-composite';\nimport { CTA_TYPE } from './defs';\nimport { VideoCTAMixinImpl } from '../../component-mixins/cta/video';\nimport styles from './video-cta-composite.scss';\n\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/\n Component that handles video CTAs in app.\n \n @element dds-video-cta-composite\n /\n@customElement(`${ddsPrefix}-video-cta-composite`)\nclass DDSVideoCTAComposite extends ModalRenderMixin(\n HostListenerMixin(LitElement)\n) {\n /\n The placeholder for `_embedMedia()` action that may be mixed in.\n \n @internal\n /\n @state()\n _embedMedia?: (videoId: string) => Promise<any>;\n\n /\n The placeholder for `_loadVideoData()` Redux action that may be mixed in.\n \n @internal\n /\n _loadVideoData?: (videoId: string) => Promise<MediaData>;\n\n /\n `true` to show the video player.\n /\n @state()\n private _activeVideoId?: string;\n\n /\n The video custom name.\n /\n @state()\n private _videoName?: string;\n\n /\n The video custom description.\n /\n @state()\n private _videoDescription?: string;\n\n /\n The handle for the listener of `${ddsPrefix}-expressive-modal-closed` event.\n /\n private _hCloseModal: Handle \| null = null;\n\n /\n Handles the user gesture of closing video player modal.\n /\n private _handleCloseVideoPlayer = () => {\n this._activeVideoId = undefined;\n };\n\n /\n Handles `${ddsPrefix}-cta-request-video-data` event.\n \n @param event The event.\n /\n @HostListener('eventRequestVideoData')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private async _handleRequestVideoData(event: CustomEvent) {\n const { href, videoName: customVideoName, videoDescription } = event.detail;\n (event.target as VideoCTAMixinImpl).videoThumbnailUrl =\n KalturaPlayerAPI.getThumbnailUrl({\n mediaId: href,\n width: (event?.target as HTMLElement)?.offsetWidth,\n });\n const videoData = await this._loadVideoData?.(href);\n if (videoData) {\n const { duration, name } = videoData;\n const videoName = customVideoName \|\| name;\n\n (event.target as VideoCTAMixinImpl).videoName = videoName;\n (event.target as VideoCTAMixinImpl).videoDescription = videoDescription;\n (event.target as VideoCTAMixinImpl).videoDuration = duration;\n }\n }\n\n /\n Handles `${ddsPrefix}-cta-run-action` event.\n \n @param event The event.\n /\n @HostListener('eventRunAction')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleRunAction(event: CustomEvent) {\n const { ctaType, href, videoName, videoDescription } = event.detail;\n if (ctaType === CTA_TYPE.VIDEO) {\n this._activeVideoId = href;\n this._videoName = videoName;\n this._videoDescription = videoDescription;\n }\n }\n\n /\n The video player.\n /\n protected get _videoPlayer() {\n const { selectorVideoPlayer, selectorLightboxVideoPlayerComposite } = this\n .constructor as typeof DDSVideoCTAComposite;\n const lightbox = (this.modalRenderRoot as Element)?.querySelector(\n selectorLightboxVideoPlayerComposite\n );\n return (\n (lightbox as DDSLightboxVideoPlayerComposite)?.modalRenderRoot as Element\n )?.querySelector(selectorVideoPlayer);\n }\n\n /\n The embedded Kaltura player element (that has `.sendNotification()`, etc. APIs), keyed by the video ID.\n /\n @property({ attribute: false })\n embeddedVideos?: { [videoId: string]: any };\n\n /\n The video data, keyed by the video ID.\n /\n @property({ attribute: false })\n mediaData?: { [videoId: string]: MediaData };\n\n disconnectedCallback() {\n if (this._hCloseModal) {\n this._hCloseModal = this._hCloseModal.release();\n }\n super.disconnectedCallback();\n }\n\n updated(changedProperties) {\n super.updated(changedProperties);\n if (!this._hCloseModal) {\n const { selectorLightboxVideoPlayerComposite } = this\n .constructor as typeof DDSVideoCTAComposite;\n const videoPlayerComposite = (\n this.modalRenderRoot as Element\n ).querySelector(\n selectorLightboxVideoPlayerComposite\n ) as DDSLightboxVideoPlayerComposite;\n // Manually hooks the event listeners on the modal render root to make the event names configurable\n this._hCloseModal = on(\n videoPlayerComposite.modalRenderRoot,\n (this.constructor as typeof DDSVideoCTAComposite).eventCloseLightbox,\n this._handleCloseVideoPlayer as EventListener\n );\n }\n }\n\n /\n @returns The media viewer lightbox for `type=\"video\"`.\n /\n renderModal() {\n const {\n embeddedVideos,\n mediaData,\n _videoName: videoName,\n _activeVideoId: activeVideoId,\n _embedMedia: embedMedia,\n _videoDescription: videoDescription,\n } = this;\n return html`\n <dds-lightbox-video-player-composite\n ?open=\"${Boolean(activeVideoId)}\"\n video-cta-lightbox=\"true\"\n custom-video-name=\"${ifNonNull(videoName)}\"\n custom-video-description=\"${ifNonNull(videoDescription)}\"\n video-id=\"${ifNonNull(activeVideoId)}\"\n .embeddedVideos=\"${ifNonNull(embeddedVideos)}\"\n .mediaData=\"${ifNonNull(mediaData)}\"\n ._embedMedia=\"${ifNonNull(embedMedia)}\"\n >\n </dds-lightbox-video-player-composite>\n `;\n }\n\n render() {\n return html` <slot></slot> `;\n }\n\n /\n A selector selecting the video player component.\n /\n static get selectorVideoPlayer() {\n return `${ddsPrefix}-lightbox-video-player`;\n }\n\n /\n A selector selecting the video player composite component.\n /\n static get selectorLightboxVideoPlayerComposite() {\n return `${ddsPrefix}-lightbox-video-player-composite`;\n }\n\n /\n The name of the custom event fired after the lightbox is closed upon a user gesture.\n /\n static get eventCloseLightbox() {\n return `${ddsPrefix}-expressive-modal-closed`;\n }\n\n /\n The name of the custom event fired when there is a user gesture to run the action.\n /\n static get eventRequestVideoData() {\n return `${ddsPrefix}-cta-request-video-data`;\n }\n\n /\n The name of the custom event fired when there is a user gesture to run the action.\n /\n static get eventRunAction() {\n return `${ddsPrefix}-cta-run-action`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/ @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSVideoCTAComposite;\n"]}

package/es/components/cta/video-cta-composite.js CHANGED Viewed

@@ -15,9 +15,9 @@ let _ = t => t,
 import { html, property, state, customElement, LitElement } from 'lit-element';
 import on from 'carbon-components/es/globals/js/misc/on.js';
-import ifNonNull from '@carbon/carbon-web-components/es/globals/directives/if-non-null.js';
-import HostListener from '@carbon/carbon-web-components/es/globals/decorators/host-listener.js';
-import HostListenerMixin from '@carbon/carbon-web-components/es/globals/mixins/host-listener.js';
+import ifNonNull from '@carbon/web-components/es/globals/directives/if-non-null.js';
+import HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';
+import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
 import ddsSettings from "../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js";
 import KalturaPlayerAPI from "../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer.js";
 import ModalRenderMixin from "../../globals/mixins/modal-render.js";

package/es/components/cta/video-cta-composite.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"video-cta-composite.js","names":["html","property","state","customElement","LitElement","on","ifNonNull","HostListener","HostListenerMixin","ddsSettings","KalturaPlayerAPI","ModalRenderMixin","CTA_TYPE","styles","stablePrefix","ddsPrefix","DDSVideoCTAComposite","_activeVideoId","undefined","event","href","videoName","customVideoName","videoDescription","detail","target","videoThumbnailUrl","getThumbnailUrl","mediaId","width","offsetWidth","videoData","_loadVideoData","duration","name","videoDuration","ctaType","VIDEO","_videoName","_videoDescription","selectorVideoPlayer","selectorLightboxVideoPlayerComposite","constructor","lightbox","modalRenderRoot","querySelector","attribute","_hCloseModal","release","changedProperties","videoPlayerComposite","eventCloseLightbox","_handleCloseVideoPlayer","embeddedVideos","mediaData","activeVideoId","_embedMedia","embedMedia","Boolean"],"sources":["components/cta/video-cta-composite.ts"],"sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2020, 2022\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html, property, state, customElement, LitElement } from 'lit-element';\nimport on from 'carbon-components/es/globals/js/misc/on.js';\nimport ifNonNull from '@carbon/carbon-web-components/es/globals/directives/if-non-null.js';\nimport HostListener from '@carbon/carbon-web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/carbon-web-components/es/globals/mixins/host-listener.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';\nimport ModalRenderMixin from '../../globals/mixins/modal-render';\nimport { MediaData } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/kalturaPlayerAPI.d';\nimport Handle from '../../globals/internal/handle';\nimport DDSLightboxVideoPlayerComposite from '../lightbox-media-viewer/lightbox-video-player-composite';\n// Above import is interface-only ref and thus code won't be brought into the build\nimport '../lightbox-media-viewer/lightbox-video-player-composite';\nimport { CTA_TYPE } from './defs';\nimport { VideoCTAMixinImpl } from '../../component-mixins/cta/video';\nimport styles from './video-cta-composite.scss';\n\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/\n Component that handles video CTAs in app.\n \n @element dds-video-cta-composite\n /\n@customElement(`${ddsPrefix}-video-cta-composite`)\nclass DDSVideoCTAComposite extends ModalRenderMixin(\n HostListenerMixin(LitElement)\n) {\n /\n The placeholder for `_embedMedia()` action that may be mixed in.\n \n @internal\n /\n @state()\n _embedMedia?: (videoId: string) => Promise<any>;\n\n /\n The placeholder for `_loadVideoData()` Redux action that may be mixed in.\n \n @internal\n /\n _loadVideoData?: (videoId: string) => Promise<MediaData>;\n\n /\n `true` to show the video player.\n /\n @state()\n private _activeVideoId?: string;\n\n /\n The video custom name.\n /\n @state()\n private _videoName?: string;\n\n /\n The video custom description.\n /\n @state()\n private _videoDescription?: string;\n\n /\n The handle for the listener of `${ddsPrefix}-expressive-modal-closed` event.\n /\n private _hCloseModal: Handle \| null = null;\n\n /\n Handles the user gesture of closing video player modal.\n /\n private _handleCloseVideoPlayer = () => {\n this._activeVideoId = undefined;\n };\n\n /\n Handles `${ddsPrefix}-cta-request-video-data` event.\n \n @param event The event.\n /\n @HostListener('eventRequestVideoData')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private async _handleRequestVideoData(event: CustomEvent) {\n const { href, videoName: customVideoName, videoDescription } = event.detail;\n (event.target as VideoCTAMixinImpl).videoThumbnailUrl =\n KalturaPlayerAPI.getThumbnailUrl({\n mediaId: href,\n width: (event?.target as HTMLElement)?.offsetWidth,\n });\n const videoData = await this._loadVideoData?.(href);\n if (videoData) {\n const { duration, name } = videoData;\n const videoName = customVideoName \|\| name;\n\n (event.target as VideoCTAMixinImpl).videoName = videoName;\n (event.target as VideoCTAMixinImpl).videoDescription = videoDescription;\n (event.target as VideoCTAMixinImpl).videoDuration = duration;\n }\n }\n\n /\n Handles `${ddsPrefix}-cta-run-action` event.\n \n @param event The event.\n /\n @HostListener('eventRunAction')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleRunAction(event: CustomEvent) {\n const { ctaType, href, videoName, videoDescription } = event.detail;\n if (ctaType === CTA_TYPE.VIDEO) {\n this._activeVideoId = href;\n this._videoName = videoName;\n this._videoDescription = videoDescription;\n }\n }\n\n /\n The video player.\n /\n protected get _videoPlayer() {\n const { selectorVideoPlayer, selectorLightboxVideoPlayerComposite } = this\n .constructor as typeof DDSVideoCTAComposite;\n const lightbox = (this.modalRenderRoot as Element)?.querySelector(\n selectorLightboxVideoPlayerComposite\n );\n return (\n (lightbox as DDSLightboxVideoPlayerComposite)?.modalRenderRoot as Element\n )?.querySelector(selectorVideoPlayer);\n }\n\n /\n The embedded Kaltura player element (that has `.sendNotification()`, etc. APIs), keyed by the video ID.\n /\n @property({ attribute: false })\n embeddedVideos?: { [videoId: string]: any };\n\n /\n The video data, keyed by the video ID.\n /\n @property({ attribute: false })\n mediaData?: { [videoId: string]: MediaData };\n\n disconnectedCallback() {\n if (this._hCloseModal) {\n this._hCloseModal = this._hCloseModal.release();\n }\n super.disconnectedCallback();\n }\n\n updated(changedProperties) {\n super.updated(changedProperties);\n if (!this._hCloseModal) {\n const { selectorLightboxVideoPlayerComposite } = this\n .constructor as typeof DDSVideoCTAComposite;\n const videoPlayerComposite = (\n this.modalRenderRoot as Element\n ).querySelector(\n selectorLightboxVideoPlayerComposite\n ) as DDSLightboxVideoPlayerComposite;\n // Manually hooks the event listeners on the modal render root to make the event names configurable\n this._hCloseModal = on(\n videoPlayerComposite.modalRenderRoot,\n (this.constructor as typeof DDSVideoCTAComposite).eventCloseLightbox,\n this._handleCloseVideoPlayer as EventListener\n );\n }\n }\n\n /\n @returns The media viewer lightbox for `type=\"video\"`.\n /\n renderModal() {\n const {\n embeddedVideos,\n mediaData,\n _videoName: videoName,\n _activeVideoId: activeVideoId,\n _embedMedia: embedMedia,\n _videoDescription: videoDescription,\n } = this;\n return html`\n <dds-lightbox-video-player-composite\n ?open=\"${Boolean(activeVideoId)}\"\n video-cta-lightbox=\"true\"\n custom-video-name=\"${ifNonNull(videoName)}\"\n custom-video-description=\"${ifNonNull(videoDescription)}\"\n video-id=\"${ifNonNull(activeVideoId)}\"\n .embeddedVideos=\"${ifNonNull(embeddedVideos)}\"\n .mediaData=\"${ifNonNull(mediaData)}\"\n ._embedMedia=\"${ifNonNull(embedMedia)}\"\n >\n </dds-lightbox-video-player-composite>\n `;\n }\n\n render() {\n return html` <slot></slot> `;\n }\n\n /\n A selector selecting the video player component.\n /\n static get selectorVideoPlayer() {\n return `${ddsPrefix}-lightbox-video-player`;\n }\n\n /\n A selector selecting the video player composite component.\n /\n static get selectorLightboxVideoPlayerComposite() {\n return `${ddsPrefix}-lightbox-video-player-composite`;\n }\n\n /\n The name of the custom event fired after the lightbox is closed upon a user gesture.\n /\n static get eventCloseLightbox() {\n return `${ddsPrefix}-expressive-modal-closed`;\n }\n\n /\n The name of the custom event fired when there is a user gesture to run the action.\n /\n static get eventRequestVideoData() {\n return `${ddsPrefix}-cta-request-video-data`;\n }\n\n /\n The name of the custom event fired when there is a user gesture to run the action.\n /\n static get eventRunAction() {\n return `${ddsPrefix}-cta-run-action`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/ @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSVideoCTAComposite;\n"],"mappings":"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"}
1	+ {"version":3,"file":"video-cta-composite.js","names":["html","property","state","customElement","LitElement","on","ifNonNull","HostListener","HostListenerMixin","ddsSettings","KalturaPlayerAPI","ModalRenderMixin","CTA_TYPE","styles","stablePrefix","ddsPrefix","DDSVideoCTAComposite","_activeVideoId","undefined","event","href","videoName","customVideoName","videoDescription","detail","target","videoThumbnailUrl","getThumbnailUrl","mediaId","width","offsetWidth","videoData","_loadVideoData","duration","name","videoDuration","ctaType","VIDEO","_videoName","_videoDescription","selectorVideoPlayer","selectorLightboxVideoPlayerComposite","constructor","lightbox","modalRenderRoot","querySelector","attribute","_hCloseModal","release","changedProperties","videoPlayerComposite","eventCloseLightbox","_handleCloseVideoPlayer","embeddedVideos","mediaData","activeVideoId","_embedMedia","embedMedia","Boolean"],"sources":["components/cta/video-cta-composite.ts"],"sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2020, 2022\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html, property, state, customElement, LitElement } from 'lit-element';\nimport on from 'carbon-components/es/globals/js/misc/on.js';\nimport ifNonNull from '@carbon/web-components/es/globals/directives/if-non-null.js';\nimport HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';\nimport ModalRenderMixin from '../../globals/mixins/modal-render';\nimport { MediaData } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/kalturaPlayerAPI.d';\nimport Handle from '../../globals/internal/handle';\nimport DDSLightboxVideoPlayerComposite from '../lightbox-media-viewer/lightbox-video-player-composite';\n// Above import is interface-only ref and thus code won't be brought into the build\nimport '../lightbox-media-viewer/lightbox-video-player-composite';\nimport { CTA_TYPE } from './defs';\nimport { VideoCTAMixinImpl } from '../../component-mixins/cta/video';\nimport styles from './video-cta-composite.scss';\n\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/\n Component that handles video CTAs in app.\n \n @element dds-video-cta-composite\n /\n@customElement(`${ddsPrefix}-video-cta-composite`)\nclass DDSVideoCTAComposite extends ModalRenderMixin(\n HostListenerMixin(LitElement)\n) {\n /\n The placeholder for `_embedMedia()` action that may be mixed in.\n \n @internal\n /\n @state()\n _embedMedia?: (videoId: string) => Promise<any>;\n\n /\n The placeholder for `_loadVideoData()` Redux action that may be mixed in.\n \n @internal\n /\n _loadVideoData?: (videoId: string) => Promise<MediaData>;\n\n /\n `true` to show the video player.\n /\n @state()\n private _activeVideoId?: string;\n\n /\n The video custom name.\n /\n @state()\n private _videoName?: string;\n\n /\n The video custom description.\n /\n @state()\n private _videoDescription?: string;\n\n /\n The handle for the listener of `${ddsPrefix}-expressive-modal-closed` event.\n /\n private _hCloseModal: Handle \| null = null;\n\n /\n Handles the user gesture of closing video player modal.\n /\n private _handleCloseVideoPlayer = () => {\n this._activeVideoId = undefined;\n };\n\n /\n Handles `${ddsPrefix}-cta-request-video-data` event.\n \n @param event The event.\n /\n @HostListener('eventRequestVideoData')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private async _handleRequestVideoData(event: CustomEvent) {\n const { href, videoName: customVideoName, videoDescription } = event.detail;\n (event.target as VideoCTAMixinImpl).videoThumbnailUrl =\n KalturaPlayerAPI.getThumbnailUrl({\n mediaId: href,\n width: (event?.target as HTMLElement)?.offsetWidth,\n });\n const videoData = await this._loadVideoData?.(href);\n if (videoData) {\n const { duration, name } = videoData;\n const videoName = customVideoName \|\| name;\n\n (event.target as VideoCTAMixinImpl).videoName = videoName;\n (event.target as VideoCTAMixinImpl).videoDescription = videoDescription;\n (event.target as VideoCTAMixinImpl).videoDuration = duration;\n }\n }\n\n /\n Handles `${ddsPrefix}-cta-run-action` event.\n \n @param event The event.\n /\n @HostListener('eventRunAction')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleRunAction(event: CustomEvent) {\n const { ctaType, href, videoName, videoDescription } = event.detail;\n if (ctaType === CTA_TYPE.VIDEO) {\n this._activeVideoId = href;\n this._videoName = videoName;\n this._videoDescription = videoDescription;\n }\n }\n\n /\n The video player.\n /\n protected get _videoPlayer() {\n const { selectorVideoPlayer, selectorLightboxVideoPlayerComposite } = this\n .constructor as typeof DDSVideoCTAComposite;\n const lightbox = (this.modalRenderRoot as Element)?.querySelector(\n selectorLightboxVideoPlayerComposite\n );\n return (\n (lightbox as DDSLightboxVideoPlayerComposite)?.modalRenderRoot as Element\n )?.querySelector(selectorVideoPlayer);\n }\n\n /\n The embedded Kaltura player element (that has `.sendNotification()`, etc. APIs), keyed by the video ID.\n /\n @property({ attribute: false })\n embeddedVideos?: { [videoId: string]: any };\n\n /\n The video data, keyed by the video ID.\n /\n @property({ attribute: false })\n mediaData?: { [videoId: string]: MediaData };\n\n disconnectedCallback() {\n if (this._hCloseModal) {\n this._hCloseModal = this._hCloseModal.release();\n }\n super.disconnectedCallback();\n }\n\n updated(changedProperties) {\n super.updated(changedProperties);\n if (!this._hCloseModal) {\n const { selectorLightboxVideoPlayerComposite } = this\n .constructor as typeof DDSVideoCTAComposite;\n const videoPlayerComposite = (\n this.modalRenderRoot as Element\n ).querySelector(\n selectorLightboxVideoPlayerComposite\n ) as DDSLightboxVideoPlayerComposite;\n // Manually hooks the event listeners on the modal render root to make the event names configurable\n this._hCloseModal = on(\n videoPlayerComposite.modalRenderRoot,\n (this.constructor as typeof DDSVideoCTAComposite).eventCloseLightbox,\n this._handleCloseVideoPlayer as EventListener\n );\n }\n }\n\n /\n @returns The media viewer lightbox for `type=\"video\"`.\n /\n renderModal() {\n const {\n embeddedVideos,\n mediaData,\n _videoName: videoName,\n _activeVideoId: activeVideoId,\n _embedMedia: embedMedia,\n _videoDescription: videoDescription,\n } = this;\n return html`\n <dds-lightbox-video-player-composite\n ?open=\"${Boolean(activeVideoId)}\"\n video-cta-lightbox=\"true\"\n custom-video-name=\"${ifNonNull(videoName)}\"\n custom-video-description=\"${ifNonNull(videoDescription)}\"\n video-id=\"${ifNonNull(activeVideoId)}\"\n .embeddedVideos=\"${ifNonNull(embeddedVideos)}\"\n .mediaData=\"${ifNonNull(mediaData)}\"\n ._embedMedia=\"${ifNonNull(embedMedia)}\"\n >\n </dds-lightbox-video-player-composite>\n `;\n }\n\n render() {\n return html` <slot></slot> `;\n }\n\n /\n A selector selecting the video player component.\n /\n static get selectorVideoPlayer() {\n return `${ddsPrefix}-lightbox-video-player`;\n }\n\n /\n A selector selecting the video player composite component.\n /\n static get selectorLightboxVideoPlayerComposite() {\n return `${ddsPrefix}-lightbox-video-player-composite`;\n }\n\n /\n The name of the custom event fired after the lightbox is closed upon a user gesture.\n /\n static get eventCloseLightbox() {\n return `${ddsPrefix}-expressive-modal-closed`;\n }\n\n /\n The name of the custom event fired when there is a user gesture to run the action.\n /\n static get eventRequestVideoData() {\n return `${ddsPrefix}-cta-request-video-data`;\n }\n\n /\n The name of the custom event fired when there is a user gesture to run the action.\n /\n static get eventRunAction() {\n return `${ddsPrefix}-cta-run-action`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/ @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSVideoCTAComposite;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,aAAa,EAAEC,UAAU,QAAQ,aAAa;AAC9E,OAAOC,EAAE,MAAM,4CAA4C;AAC3D,OAAOC,SAAS,MAAM,6DAA6D;AACnF,OAAOC,YAAY,MAAM,+DAA+D;AACxF,OAAOC,iBAAiB,MAAM,2DAA2D;AACzF,OAAOC,WAAW,MAAM,kFAA+E;AACvG,OAAOC,gBAAgB,MAAM,0FAAuF;AACpH,OAAOC,gBAAgB,MAAM,sCAAmC;AAIhE;AAAA;AACA,OAAO,6DAA0D;AACjE,SAASC,QAAQ,QAAQ,WAAQ;AAEjC,OAAOC,MAAM,MAAM,gCAA4B;AAE/C,MAAM;EAAEC,YAAY,EAAEC;AAAU,CAAC,GAAGN,WAAW;;AAE/C;AACA;AACA;AACA;AACA;AAJA,IAMMO,oBAAoB,cADzBb,aAAa,CAAE,GAAEY,SAAU,sBAAqB,CAAC;EAAlD,MACMC,oBAAoB,2BAExB;IAAA;MAAA;MAAA;IAAA;EA8MF;EAAC;IAAA,GAhNKA,oBAAoB;IAAA;MAAA;MAAA,aAQvBd,KAAK,EAAE;MAAA;MAAA;IAAA;MAAA;MAAA,aAaPA,KAAK,EAAE;MAAA;MAAA;IAAA;MAAA;MAAA,aAMPA,KAAK,EAAE;MAAA;MAAA;IAAA;MAAA;MAAA,aAMPA,KAAK,EAAE;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;QAAA,OAM8B,IAAI;MAAA;IAAA;MAAA;MAAA;MAAA;QAAA,OAKR,MAAM;UACtC,IAAI,CAACe,cAAc,GAAGC,SAAS;QACjC,CAAC;MAAA;IAAA;MAAA;MAAA,aAOAX,YAAY,CAAC,uBAAuB,CAAC;MAAA;MAAA;MAlDtC;AACF;AACA;AACA;AACA;;MAWE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAGE;AACF;AACA;;MAKE;AACF;AACA;AACA;AACA;MACE,uCAEsCY,KAAkB,EAAE;QAAA;QACxD,MAAM;UAAEC,IAAI;UAAEC,SAAS,EAAEC,eAAe;UAAEC;QAAiB,CAAC,GAAGJ,KAAK,CAACK,MAAM;QAC1EL,KAAK,CAACM,MAAM,CAAuBC,iBAAiB,GACnDhB,gBAAgB,CAACiB,eAAe,CAAC;UAC/BC,OAAO,EAAER,IAAI;UACbS,KAAK,EAAGV,KAAK,aAALA,KAAK,wCAALA,KAAK,CAAEM,MAAM,kDAAd,cAAgCK;QACzC,CAAC,CAAC;QACJ,MAAMC,SAAS,GAAG,+BAAM,IAAI,CAACC,cAAc,yDAAnB,8BAAI,EAAkBZ,IAAI,CAAC;QACnD,IAAIW,SAAS,EAAE;UACb,MAAM;YAAEE,QAAQ;YAAEC;UAAK,CAAC,GAAGH,SAAS;UACpC,MAAMV,SAAS,GAAGC,eAAe,IAAIY,IAAI;UAExCf,KAAK,CAACM,MAAM,CAAuBJ,SAAS,GAAGA,SAAS;UACxDF,KAAK,CAACM,MAAM,CAAuBF,gBAAgB,GAAGA,gBAAgB;UACtEJ,KAAK,CAACM,MAAM,CAAuBU,aAAa,GAAGF,QAAQ;QAC9D;MACF;;MAEA;AACF;AACA;AACA;AACA;IAJE;MAAA;MAAA,aAKC1B,YAAY,CAAC,gBAAgB,CAAC;MAAA;MAAA,OAA/B,0BAEyBY,KAAkB,EAAE;QAC3C,MAAM;UAAEiB,OAAO;UAAEhB,IAAI;UAAEC,SAAS;UAAEE;QAAiB,CAAC,GAAGJ,KAAK,CAACK,MAAM;QACnE,IAAIY,OAAO,KAAKxB,QAAQ,CAACyB,KAAK,EAAE;UAC9B,IAAI,CAACpB,cAAc,GAAGG,IAAI;UAC1B,IAAI,CAACkB,UAAU,GAAGjB,SAAS;UAC3B,IAAI,CAACkB,iBAAiB,GAAGhB,gBAAgB;QAC3C;MACF;;MAEA;AACF;AACA;IAFE;MAAA;MAAA;MAAA,OAGA,wBAA6B;QAAA;QAC3B,MAAM;UAAEiB,mBAAmB;UAAEC;QAAqC,CAAC,GAAG,IAAI,CACvEC,WAA0C;QAC7C,MAAMC,QAAQ,4BAAI,IAAI,CAACC,eAAe,0DAArB,sBAAmCC,aAAa,CAC/DJ,oCAAoC,CACrC;QACD,OACGE,QAAQ,aAARA,QAAQ,2CAARA,QAAQ,CAAsCC,eAAe,qDADzD,iBAEJC,aAAa,CAACL,mBAAmB,CAAC;MACvC;;MAEA;AACF;AACA;IAFE;MAAA;MAAA,aAGCvC,QAAQ,CAAC;QAAE6C,SAAS,EAAE;MAAM,CAAC,CAAC;MAAA;MAAA;IAAA;MAAA;MAAA,aAM9B7C,QAAQ,CAAC;QAAE6C,SAAS,EAAE;MAAM,CAAC,CAAC;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;MAH/B;AACF;AACA;MAIE,gCAAuB;QACrB,IAAI,IAAI,CAACC,YAAY,EAAE;UACrB,IAAI,CAACA,YAAY,GAAG,IAAI,CAACA,YAAY,CAACC,OAAO,EAAE;QACjD;QACA,qBAvHEhC,oBAAoB;MAwHxB;IAAC;MAAA;MAAA;MAAA,OAED,iBAAQiC,iBAAiB,EAAE;QACzB,qBA3HEjC,oBAAoB,yCA2HRiC,iBAAiB;QAC/B,IAAI,CAAC,IAAI,CAACF,YAAY,EAAE;UACtB,MAAM;YAAEN;UAAqC,CAAC,GAAG,IAAI,CAClDC,WAA0C;UAC7C,MAAMQ,oBAAoB,GACxB,IAAI,CAACN,eAAe,CACpBC,aAAa,CACbJ,oCAAoC,CACF;UACpC;UACA,IAAI,CAACM,YAAY,GAAG1C,EAAE,CACpB6C,oBAAoB,CAACN,eAAe,EACnC,IAAI,CAACF,WAAW,CAAiCS,kBAAkB,EACpE,IAAI,CAACC,uBAAuB,CAC7B;QACH;MACF;;MAEA;AACF;AACA;IAFE;MAAA;MAAA;MAAA,OAGA,uBAAc;QACZ,MAAM;UACJC,cAAc;UACdC,SAAS;UACThB,UAAU,EAAEjB,SAAS;UACrBJ,cAAc,EAAEsC,aAAa;UAC7BC,WAAW,EAAEC,UAAU;UACvBlB,iBAAiB,EAAEhB;QACrB,CAAC,GAAG,IAAI;QACR,OAAOvB,IAAI,cAAC;AAChB;AACA,iBAAe,CAAyB;AACxC;AACA,6BAA2B,CAAuB;AAClD,oCAAkC,CAA8B;AAChE,oBAAkB,CAA2B;AAC7C,2BAAyB,CAA4B;AACrD,sBAAoB,CAAuB;AAC3C,wBAAsB,CAAwB;AAC9C;AACA;AACA,KAAI,GAVa0D,OAAO,CAACH,aAAa,CAAC,EAEVjD,SAAS,CAACe,SAAS,CAAC,EACbf,SAAS,CAACiB,gBAAgB,CAAC,EAC3CjB,SAAS,CAACiD,aAAa,CAAC,EACjBjD,SAAS,CAAC+C,cAAc,CAAC,EAC9B/C,SAAS,CAACgD,SAAS,CAAC,EAClBhD,SAAS,CAACmD,UAAU,CAAC;MAI3C;IAAC;MAAA;MAAA;MAAA,OAED,kBAAS;QACP,OAAOzD,IAAI,gBAAC,iBAAe;MAC7B;;MAEA;AACF;AACA;IAFE;MAAA;MAAA;MAAA;MAAA,OAGA,+BAAiC;QAC/B,OAAQ,GAAEe,SAAU,wBAAuB;MAC7C;;MAEA;AACF;AACA;IAFE;MAAA;MAAA;MAAA;MAAA,OAGA,gDAAkD;QAChD,OAAQ,GAAEA,SAAU,kCAAiC;MACvD;;MAEA;AACF;AACA;IAFE;MAAA;MAAA;MAAA;MAAA,OAGA,8BAAgC;QAC9B,OAAQ,GAAEA,SAAU,0BAAyB;MAC/C;;MAEA;AACF;AACA;IAFE;MAAA;MAAA;MAAA;MAAA,OAGA,iCAAmC;QACjC,OAAQ,GAAEA,SAAU,yBAAwB;MAC9C;;MAEA;AACF;AACA;IAFE;MAAA;MAAA;MAAA;MAAA,OAGA,0BAA4B;QAC1B,OAAQ,GAAEA,SAAU,iBAAgB;MACtC;IAAC;MAAA;MAAA;MAAA;MAAA;QAAA,OAEeF,MAAM;MAAA;IAAA;EAAA;AAAA,GA/MWF,gBAAgB,CACjDH,iBAAiB,CAACJ,UAAU,CAAC,CAC9B,GAgND;AACA,eAAeY,oBAAoB"}

package/es/components/dotcom-shell/__stories__/data/content.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/dotcom-shell/__stories__/data/content.ts"],"names":[],"mappings":"AACA;;;;;GAKG;AAKH,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAE5D,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,2BAA2B,CAAC;AACnC,OAAO,8BAA8B,CAAC;AACtC,OAAO,wCAAwC,CAAC;AAChD,OAAO,wCAAwC,CAAC;AAChD,OAAO,0BAA0B,CAAC;AAClC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gCAAgC,CAAC;AACxC,OAAO,0BAA0B,CAAC;AAClC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAClC,OAAO,8BAA8B,CAAC;AACtC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kCAAkC,CAAC;AAU1C,eAAO,MAAM,KAAK,sCAajB,CAAC;AAEF,eAAO,MAAM,0BAA0B,sCA2BtC,CAAC;AAEF,eAAO,MAAM,mCAAmC,sCAkB/C,CAAC;AAEF,eAAO,MAAM,qBAAqB,sCA4BjC,CAAC;AAEF,eAAO,MAAM,eAAe,yDAmB3B,CAAC;AAEF,eAAO,MAAM,cAAc,sCAU1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,sCA4B5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,sCAuBlC,CAAC;AAEF,eAAO,MAAM,UAAU,sCA4LtB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;0CAwCxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,4CA6K3B,CAAC;;;;;;;;;AAEJ,wBAAmD","file":"content.d.ts","sourcesContent":["/* eslint-disable max-len /\n/\n Copyright IBM Corp. 2016, 2022\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html } from 'lit-element';\nimport ArrowRight20 from '@carbon/carbon-web-components/es/icons/arrow--right/20';\nimport logosGroup from '../../../logo-grid/__stories__/data/logos.js';\nimport { TOC_TYPES } from '../../../table-of-contents/defs';\n\nimport '../../../card/index';\nimport '../../../cta/index';\nimport '../../../card-group/index';\nimport '../../../content-block/index';\nimport '../../../content-block-segmented/index';\nimport '../../../content-item-horizontal/index';\nimport '../../../leadspace/index';\nimport '../../../image/index';\nimport '../../../leadspace-block/index';\nimport '../../../link-list/index';\nimport '../../../quote/index';\nimport '../../../cta-block/index';\nimport '../../../callout-quote/index';\nimport '../../../callout-with-media/index';\nimport '../../../table-of-contents/index';\n\nimport imgSm16x9 from '../../../../../../storybook-images/assets/320/fpo--16x9--320x180--002.jpg';\nimport imgMd16x9 from '../../../../../../storybook-images/assets/480/fpo--16x9--480x270--002.jpg';\nimport imgLg16x9 from '../../../../../../storybook-images/assets/720/fpo--16x9--720x405--002.jpg';\nimport imgLg1x1 from '../../../../../../storybook-images/assets/720/fpo--1x1--720x720--005.jpg';\nimport imgXlg4x3 from '../../../../../../storybook-images/assets/1312/fpo--4x3--1312x984--003.jpg';\n\nimport leadspaceImg from '../../../../../../storybook-images/assets/leadspace/fpo--leadspace--1584x560--002.jpg';\n\nexport const image = html`\n <dds-image\n alt=\"Image alt text\"\n default-src=\"${imgLg16x9}\"\n heading=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n >\n <dds-image-item media=\"(min-width: 672px)\" srcset=\"${imgLg16x9}\">\n </dds-image-item>\n <dds-image-item media=\"(min-width: 400px)\" srcset=\"${imgMd16x9}\">\n </dds-image-item>\n <dds-image-item media=\"(min-width: 320px)\" srcset=\"${imgSm16x9}\">\n </dds-image-item>\n </dds-image>\n`;\n\nexport const contentBlockSegmentedItems = html`\n <dds-content-block-segmented-item>\n <dds-content-group-heading\n >A scelerisque purus semper eget duis at tellus.\n </dds-content-group-heading>\n <dds-content-item-copy\n >Elementum nibh tellus molestie nunc non. Habitant morbi tristique\n senectus et netus et malesuada fames.\n </dds-content-item-copy>\n <dds-text-cta\n slot=\"footer\"\n cta-type=\"local\"\n icon-placement=\"right\"\n href=\"https://example.com\"\n >Lorem Ipsum dolor sit</dds-text-cta\n >\n </dds-content-block-segmented-item>\n\n <dds-content-block-segmented-item>\n <dds-content-group-heading\n >A scelerisque purus semper eget duis at tellus.\n </dds-content-group-heading>\n <dds-content-item-copy\n >Elementum nibh tellus molestie nunc non. Habitant morbi tristique\n senectus et netus et malesuada fames.\n </dds-content-item-copy>\n </dds-content-block-segmented-item>\n`;\n\nexport const contentBlockSegmentedItemsWithImage = html`\n <dds-content-block-segmented-item>\n <dds-content-group-heading\n >A scelerisque purus semper eget duis at tellus.\n </dds-content-group-heading>\n <dds-content-item-copy\n >Elementum nibh tellus molestie nunc non. Habitant morbi tristique\n senectus et netus et malesuada fames.\n </dds-content-item-copy>\n ${image}\n <dds-text-cta\n slot=\"footer\"\n cta-type=\"local\"\n icon-placement=\"right\"\n href=\"https://example.com\"\n >Lorem Ipsum dolor sit</dds-text-cta\n >\n </dds-content-block-segmented-item>\n`;\n\nexport const contentItemHorizontal = html`\n <dds-content-item-horizontal>\n <dds-content-item-horizontal-eyebrow\n >Lorem ipsum</dds-content-item-horizontal-eyebrow\n >\n <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>\n <dds-content-item-horizontal-copy\n >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et\n ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit\n sollicitudin.</dds-content-item-horizontal-copy\n >\n <dds-link-list slot=\"footer\" type=\"vertical\">\n <dds-link-list-item-cta\n icon-placement=\"right\"\n href=\"https://www.ibm.com\"\n cta-type=\"local\"\n >\n Link text\n </dds-link-list-item-cta>\n <dds-link-list-item-cta\n icon-placement=\"right\"\n href=\"https://www.ibm.com\"\n cta-type=\"external\"\n >\n External link text\n </dds-link-list-item-cta>\n </dds-link-list>\n </dds-content-item-horizontal>\n`;\n\nexport const universalBanner = (srcImage) => html`\n <dds-universal-banner image-width=\"4-col\">\n <dds-universal-banner-image\n slot=\"image\"\n default-src=\"${srcImage}\"\n ></dds-universal-banner-image>\n <dds-universal-banner-heading slot=\"heading\"\n >heading</dds-universal-banner-heading\n >\n <dds-universal-banner-copy slot=\"copy\">copy</dds-universal-banner-copy>\n <dds-button-cta\n slot=\"cta\"\n cta-type=\"local\"\n kind=\"tertiary\"\n href=\"https://www.example.com\"\n >\n cta copy\n </dds-button-cta>\n </dds-universal-banner>\n`;\n\nexport const cardGroupItems = html`\n <dds-card-group-item href=\"https://example.com\">\n <dds-image slot=\"image\" alt=\"Image alt text\" default-src=\"${imgXlg4x3}\">\n </dds-image>\n <dds-card-eyebrow>Topic</dds-card-eyebrow>\n <dds-card-heading>Natural Language Processing.</dds-card-heading>\n <dds-card-cta-footer slot=\"footer\">\n ${ArrowRight20({ slot: 'icon' })}\n </dds-card-cta-footer>\n </dds-card-group-item>\n`;\n\nexport const contentLeadspace = html`\n <dds-leadspace\n size=\"medium\"\n gradient-style-scheme=\"true\"\n alt=\"\"\n default-src=\"${leadspaceImg}\"\n >\n <dds-leadspace-heading>Leadspace Title</dds-leadspace-heading>\n Use this area for a short line of copy to support the title\n <dds-button-group slot=\"action\">\n <dds-button-group-item aria-label=\"\" href=\"\">test</dds-button-group-item>\n </dds-button-group>\n <dds-image\n slot=\"image\"\n class=\"bx--image\"\n alt=\"\"\n default-src=\"${leadspaceImg}\"\n >\n <dds-image-item\n media=\"(min-width: 672px)\"\n srcset=\"${leadspaceImg}\"\n ></dds-image-item>\n <dds-image-item\n media=\"(min-width: 0)\"\n srcset=\"${leadspaceImg}\"\n ></dds-image-item>\n </dds-image>\n </dds-leadspace>\n`;\n\nexport const contentLeadspaceSearch = html`\n <dds-leadspace-with-search adjacent-theme=\"white-and-g10\" scroll-behavior>\n <dds-leadspace-with-search-heading\n >Find a product</dds-leadspace-with-search-heading\n >\n <dds-leadspace-with-search-content>\n <dds-leadspace-with-search-content-heading\n >Innovate like a startup, scale for the\n enterprise</dds-leadspace-with-search-content-heading\n >\n <dds-leadspace-with-search-content-copy>\n Automate your software release process with continuous delivery (CD)—the\n most critical part of adopting DevOps. Build, test, and deploy code\n changes quickly, ensuring software is always ready for deployment.\n </dds-leadspace-with-search-content-copy>\n </dds-leadspace-with-search-content>\n <dds-search-with-typeahead\n slot=\"search\"\n leadspace-search\n active\n should-remain-open\n ></dds-search-with-typeahead>\n </dds-leadspace-with-search>\n`;\n\nexport const tocContent = html`\n <a name=\"1\" data-title=\"Lorem ipsum dolor sit amet\"></a>\n <dds-leadspace-block>\n <dds-leadspace-block-heading\n >Lorem ipsum dolor sit amet</dds-leadspace-block-heading\n >\n <dds-leadspace-block-content>\n <dds-content-block-heading>\n Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.\n </dds-content-block-heading>\n <dds-content-block-copy slot=\"copy\"\n >Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi\n ut aliquip ex ea commodo consequat.\n </dds-content-block-copy>\n <dds-leadspace-block-media slot=\"media\">\n <dds-video-player-container\n video-id=\"1_9h94wo6b\"\n ></dds-video-player-container>\n </dds-leadspace-block-media>\n <dds-link-list type=\"end\">\n <dds-link-list-heading>Featured products</dds-link-list-heading>\n <dds-link-list-item href=\"https://example.com\">\n IBM Cloud Continuous Delivery ${ArrowRight20({ slot: 'icon' })}\n </dds-link-list-item>\n <dds-link-list-item href=\"https://example.com\">\n UrbanCode ${ArrowRight20({ slot: 'icon' })}\n </dds-link-list-item>\n <dds-link-list-item href=\"https://example.com\">\n View all products ${ArrowRight20({ slot: 'icon' })}\n </dds-link-list-item>\n </dds-link-list>\n <dds-leadspace-block-cta>\n <dds-button-group-item href=\"www.ibm.com\"\n >Contact sales\n ${ArrowRight20({\n slot: 'icon',\n })}</dds-button-group-item\n >\n </dds-leadspace-block-cta>\n </dds-leadspace-block-content>\n </dds-leadspace-block>\n\n <a name=\"2\" data-title=\"Pharetra pharetra massa massa ultricies mi quis.\"></a>\n <dds-content-block-segmented>\n <dds-content-block-heading\n >Pharetra pharetra massa massa ultricies mi\n quis.</dds-content-block-heading\n >\n ${Array.from([1, 2]).map(() => contentBlockSegmentedItems)}\n </dds-content-block-segmented>\n <dds-feature-card size=\"large\" href=\"https://example.com\">\n <dds-image slot=\"image\" alt=\"Image alt text\" default-src=\"${imgLg1x1}\">\n <dds-image-item\n media=\"(min-width: 991px)\"\n srcset=\"${imgLg1x1}\"\n ></dds-image-item>\n </dds-image>\n <dds-card-eyebrow>scelerisque purus</dds-card-eyebrow>\n <dds-card-heading>Elementum nibh tellus molestie nunc?</dds-card-heading>\n <p>\n Habitant morbi tristique senectus et netus et malesuada fames. Habitant\n morbu tristique.\n </p>\n <dds-feature-card-footer>\n ${ArrowRight20({ slot: 'icon' })}\n </dds-feature-card-footer>\n </dds-feature-card>\n\n <a name=\"3\" data-title=\"Elementum nibh tellus molestie nunc non.\"></a>\n <dds-content-block-segmented>\n <dds-content-block-heading\n >Elementum nibh tellus molestie nunc non.\n </dds-content-block-heading>\n ${Array.from([1, 2]).map(() => contentBlockSegmentedItemsWithImage)}\n <dds-card-cta slot=\"footer\" cta-type=\"local\" href=\"https://example.com\">\n Lorem ipsum dolor\n <dds-card-cta-footer></dds-card-cta-footer>\n </dds-card-cta>\n </dds-content-block-segmented>\n\n <dds-callout-with-media>\n <dds-content-block-heading slot=\"heading\"\n >Mauris ultrices eros in cursus</dds-content-block-heading\n >\n <dds-callout-with-media-copy size=\"sm\"\n >Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada\n proin libero nunc consequat. In est ante in nibh mauris cursus mattis.\n Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est\n velit egestas dui.\n </dds-callout-with-media-copy>\n <dds-callout-with-media-video\n video-id=\"1_9h94wo6b\"\n ></dds-callout-with-media-video>\n </dds-callout-with-media>\n\n <a name=\"4\" data-title=\"Tincidunt ornare massa\"></a>\n <dds-content-block-horizontal>\n <dds-content-block-heading\n >Tincidunt ornare massa</dds-content-block-heading\n >\n ${Array.from([1, 2]).map(() => contentItemHorizontal)}\n </dds-content-block-horizontal>\n\n <a name=\"5\" data-title=\"Lobortis elementum nibh tellus\"></a>\n <dds-logo-grid ?hide-border=\"true\">\n <dds-content-block-heading\n >Lobortis elementum nibh tellus</dds-content-block-heading\n >\n ${logosGroup &&\n logosGroup.map(\n (elem) => html`\n <dds-logo-grid-item\n default-src=\"${elem.imgSrc}\"\n alt=\"${elem.altText}\"\n ></dds-logo-grid-item>\n `\n )}\n </dds-logo-grid>\n\n <a name=\"6\" data-title=\"Aliquam condimentum interdum\"></a>\n <dds-content-block-cards>\n <dds-content-block-heading\n >Aliquam condimentum interdum</dds-content-block-heading\n >\n <dds-card-group>\n ${Array.from([1, 2, 3]).map(() => cardGroupItems)}\n </dds-card-group>\n </dds-content-block-cards>\n <dds-callout-quote>\n Duis aute irure dolor in reprehenderit\n <dds-quote-source-heading>\n Lorem ipsum dolor sit amet\n </dds-quote-source-heading>\n <dds-quote-source-copy> consectetur adipiscing elit </dds-quote-source-copy>\n <dds-quote-source-bottom-copy> IBM Cloud </dds-quote-source-bottom-copy>\n <dds-callout-link-with-icon slot=\"footer\" href=\"https://example.com\">\n Link with Icon ${ArrowRight20({ slot: 'icon' })}\n </dds-callout-link-with-icon>\n </dds-callout-quote>\n\n <a name=\"7\" data-title=\"Duis aute irure dolor in reprehenderit\"></a>\n <dds-cta-block no-border>\n <dds-content-block-heading>Take the next step</dds-content-block-heading>\n <dds-content-block-copy\n >Want to discuss your options with a DevOps expert? <br />\n Contact our sales team to evaluate your needs.</dds-content-block-copy\n >\n <dds-button-group slot=\"action\">\n <dds-button-group-item href=\"https://example.com\">\n Secondary Button ${ArrowRight20({ slot: 'icon' })}\n </dds-button-group-item>\n <dds-button-group-item href=\"https://example.com\">\n Primary button ${ArrowRight20({ slot: 'icon' })}\n </dds-button-group-item>\n </dds-button-group>\n <dds-cta-block-item-row no-border>\n <dds-cta-block-item>\n <dds-content-item-heading>Get connected</dds-content-item-heading>\n <dds-content-item-copy\n >IBM DevOps partners have a wide range of expertise. Find one to build\n the right solution for you.</dds-content-item-copy\n >\n <dds-text-cta\n slot=\"footer\"\n cta-type=\"local\"\n icon-placement=\"right\"\n href=\"example.com\"\n >\n Find a partner\n </dds-text-cta>\n </dds-cta-block-item>\n <dds-cta-block-item>\n <dds-content-item-heading>Learn how</dds-content-item-heading>\n <dds-content-item-copy\n >IBM DevOps partners have a wide range of\n expertise</dds-content-item-copy\n >\n <dds-text-cta\n slot=\"footer\"\n cta-type=\"local\"\n icon-placement=\"right\"\n href=\"example.com\"\n >\n Browse tutorials\n </dds-text-cta>\n </dds-cta-block-item>\n </dds-cta-block-item-row>\n </dds-cta-block>\n`;\n\nexport const StoryContent = (\n config = {\n l1: false,\n leadspace: false,\n tocLayout: TOC_TYPES.DEFAULT,\n }\n) => {\n const mainClasses = [\n 'bx--content',\n 'dds-ce-demo-devenv--ui-shell-content',\n config?.l1 ? 'has-l1' : null,\n config?.leadspace ? 'has-leadspace' : null,\n ]\n .filter((className) => className != null)\n .join(' ');\n\n return html`\n <div class=\"${mainClasses}\">\n ${config?.leadspace ? contentLeadspace : null}\n ${config?.tocLayout === TOC_TYPES.HORIZONTAL\n ? html`\n <dds-table-of-contents\n stickyOffset=\"48\"\n toc-layout=${config.tocLayout}\n >\n <div class=\"bx--row\">\n <div class=\"bx--col-lg-12\">${tocContent}</div>\n </div>\n </dds-table-of-contents>\n `\n : html`\n <dds-table-of-contents\n stickyOffset=\"48\"\n toc-layout=${config.tocLayout}\n >\n ${tocContent}\n </dds-table-of-contents>\n `}\n </div>\n `;\n};\n\nexport const StoryContentNoToC = () =>\n html`\n <div\n class=\"dds-ce-demo-devenv--ui-shell-content\"\n style=\"padding-right:1rem\"\n >\n <div class=\"bx--grid bx--col-lg-8\">\n ${contentLeadspaceSearch}\n\n <dds-content-block-segmented>\n <dds-content-block-heading\n >Pharetra pharetra massa massa ultricies mi\n quis.</dds-content-block-heading\n >\n ${Array.from([1, 2]).map(() => contentBlockSegmentedItems)}\n </dds-content-block-segmented>\n\n <dds-feature-card size=\"large\" href=\"https://example.com\">\n <dds-image\n slot=\"image\"\n alt=\"Image alt text\"\n default-src=\"${imgLg1x1}\"\n >\n <dds-image-item\n media=\"(min-width: 991px)\"\n srcset=\"${imgLg1x1}\"\n ></dds-image-item>\n </dds-image>\n <dds-card-eyebrow>scelerisque purus</dds-card-eyebrow>\n <dds-card-heading\n >Elementum nibh tellus molestie nunc?</dds-card-heading\n >\n <p>\n Habitant morbi tristique senectus et netus et malesuada fames.\n Habitant morbu tristique.\n </p>\n <dds-feature-card-footer>\n ${ArrowRight20({ slot: 'icon' })}\n </dds-feature-card-footer>\n </dds-feature-card>\n\n <dds-content-block-segmented>\n <dds-content-block-heading\n >Elementum nibh tellus molestie nunc non.\n </dds-content-block-heading>\n ${Array.from([1, 2]).map(() => contentBlockSegmentedItemsWithImage)}\n <dds-card-cta\n slot=\"footer\"\n cta-type=\"local\"\n href=\"https://example.com\"\n >\n Lorem ipsum dolor\n <dds-card-cta-footer></dds-card-cta-footer>\n </dds-card-cta>\n </dds-content-block-segmented>\n\n <dds-callout-with-media>\n <dds-content-block-heading slot=\"heading\"\n >Mauris ultrices eros in cursus</dds-content-block-heading\n >\n <dds-callout-with-media-copy size=\"sm\"\n >Porttitor eget dolor morbi non arcu. Et ligula ullamcorper\n malesuada proin libero nunc consequat. In est ante in nibh mauris\n cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel\n facilisis volutpat est velit egestas dui.\n </dds-callout-with-media-copy>\n <dds-callout-with-media-video\n video-id=\"1_9h94wo6b\"\n ></dds-callout-with-media-video>\n </dds-callout-with-media>\n\n <dds-content-block-horizontal>\n <dds-content-block-heading\n >Tincidunt ornare massa</dds-content-block-heading\n >\n ${Array.from([1, 2]).map(() => contentItemHorizontal)}\n </dds-content-block-horizontal>\n\n <dds-logo-grid ?hide-border=\"true\">\n <dds-content-block-heading\n >Lobortis elementum nibh tellus</dds-content-block-heading\n >\n ${logosGroup &&\n logosGroup.map(\n (elem) => html`\n <dds-logo-grid-item\n default-src=\"${elem.imgSrc}\"\n alt=\"${elem.altText}\"\n ></dds-logo-grid-item>\n `\n )}\n </dds-logo-grid>\n\n <dds-content-block-cards>\n <dds-content-block-heading\n >Aliquam condimentum interdum</dds-content-block-heading\n >\n <dds-card-group>\n ${Array.from([1, 2, 3]).map(() => cardGroupItems)}\n </dds-card-group>\n </dds-content-block-cards>\n\n <dds-callout-quote>\n Duis aute irure dolor in reprehenderit\n <dds-quote-source-heading>\n Lorem ipsum dolor sit amet\n </dds-quote-source-heading>\n <dds-quote-source-copy>\n consectetur adipiscing elit\n </dds-quote-source-copy>\n <dds-quote-source-bottom-copy>\n IBM Cloud\n </dds-quote-source-bottom-copy>\n <dds-callout-link-with-icon slot=\"footer\" href=\"https://example.com\">\n Link with Icon ${ArrowRight20({ slot: 'icon' })}\n </dds-callout-link-with-icon>\n </dds-callout-quote>\n\n <dds-cta-block no-border>\n <dds-content-block-heading\n >Take the next step</dds-content-block-heading\n >\n <dds-content-block-copy\n >Want to discuss your options with a DevOps expert? <br />\n Contact our sales team to evaluate your\n needs.</dds-content-block-copy\n >\n\n <dds-button-group slot=\"action\">\n <dds-button-group-item href=\"https://example.com\">\n Secondary Button ${ArrowRight20({ slot: 'icon' })}\n </dds-button-group-item>\n <dds-button-group-item href=\"https://example.com\">\n Primary button ${ArrowRight20({ slot: 'icon' })}\n </dds-button-group-item>\n </dds-button-group>\n\n <dds-cta-block-item-row no-border>\n <dds-cta-block-item>\n <dds-content-item-heading>Get connected</dds-content-item-heading>\n <dds-content-item-copy\n >IBM DevOps partners have a wide range of expertise. Find one to\n build the right solution for you.</dds-content-item-copy\n >\n <dds-text-cta\n slot=\"footer\"\n cta-type=\"local\"\n icon-placement=\"right\"\n href=\"example.com\"\n >\n Find a partner\n </dds-text-cta>\n </dds-cta-block-item>\n\n <dds-cta-block-item>\n <dds-content-item-heading>Learn how</dds-content-item-heading>\n <dds-content-item-copy\n >IBM DevOps partners have a wide range of\n expertise</dds-content-item-copy\n >\n <dds-text-cta\n slot=\"footer\"\n cta-type=\"local\"\n icon-placement=\"right\"\n href=\"example.com\"\n >\n Browse tutorials\n </dds-text-cta>\n </dds-cta-block-item>\n </dds-cta-block-item-row>\n </dds-cta-block>\n </div>\n </div>\n `;\n\nexport default { StoryContent, StoryContentNoToC };\n/ eslint-enable max-len */\n"]}
1	+ {"version":3,"sources":["components/dotcom-shell/__stories__/data/content.ts"],"names":[],"mappings":"AACA;;;;;GAKG;AAKH,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAE5D,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,2BAA2B,CAAC;AACnC,OAAO,8BAA8B,CAAC;AACtC,OAAO,wCAAwC,CAAC;AAChD,OAAO,wCAAwC,CAAC;AAChD,OAAO,0BAA0B,CAAC;AAClC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gCAAgC,CAAC;AACxC,OAAO,0BAA0B,CAAC;AAClC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAClC,OAAO,8BAA8B,CAAC;AACtC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kCAAkC,CAAC;AAU1C,eAAO,MAAM,KAAK,sCAajB,CAAC;AAEF,eAAO,MAAM,0BAA0B,sCA2BtC,CAAC;AAEF,eAAO,MAAM,mCAAmC,sCAkB/C,CAAC;AAEF,eAAO,MAAM,qBAAqB,sCA4BjC,CAAC;AAEF,eAAO,MAAM,eAAe,yDAmB3B,CAAC;AAEF,eAAO,MAAM,cAAc,sCAU1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,sCA4B5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,sCAuBlC,CAAC;AAEF,eAAO,MAAM,UAAU,sCA4LtB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;0CAwCxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,4CA6K3B,CAAC;;;;;;;;;AAEJ,wBAAmD","file":"content.d.ts","sourcesContent":["/* eslint-disable max-len /\n/\n Copyright IBM Corp. 2016, 2022\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html } from 'lit-element';\nimport ArrowRight20 from '@carbon/web-components/es/icons/arrow--right/20';\nimport logosGroup from '../../../logo-grid/__stories__/data/logos.js';\nimport { TOC_TYPES } from '../../../table-of-contents/defs';\n\nimport '../../../card/index';\nimport '../../../cta/index';\nimport '../../../card-group/index';\nimport '../../../content-block/index';\nimport '../../../content-block-segmented/index';\nimport '../../../content-item-horizontal/index';\nimport '../../../leadspace/index';\nimport '../../../image/index';\nimport '../../../leadspace-block/index';\nimport '../../../link-list/index';\nimport '../../../quote/index';\nimport '../../../cta-block/index';\nimport '../../../callout-quote/index';\nimport '../../../callout-with-media/index';\nimport '../../../table-of-contents/index';\n\nimport imgSm16x9 from '../../../../../../storybook-images/assets/320/fpo--16x9--320x180--002.jpg';\nimport imgMd16x9 from '../../../../../../storybook-images/assets/480/fpo--16x9--480x270--002.jpg';\nimport imgLg16x9 from '../../../../../../storybook-images/assets/720/fpo--16x9--720x405--002.jpg';\nimport imgLg1x1 from '../../../../../../storybook-images/assets/720/fpo--1x1--720x720--005.jpg';\nimport imgXlg4x3 from '../../../../../../storybook-images/assets/1312/fpo--4x3--1312x984--003.jpg';\n\nimport leadspaceImg from '../../../../../../storybook-images/assets/leadspace/fpo--leadspace--1584x560--002.jpg';\n\nexport const image = html`\n <dds-image\n alt=\"Image alt text\"\n default-src=\"${imgLg16x9}\"\n heading=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n >\n <dds-image-item media=\"(min-width: 672px)\" srcset=\"${imgLg16x9}\">\n </dds-image-item>\n <dds-image-item media=\"(min-width: 400px)\" srcset=\"${imgMd16x9}\">\n </dds-image-item>\n <dds-image-item media=\"(min-width: 320px)\" srcset=\"${imgSm16x9}\">\n </dds-image-item>\n </dds-image>\n`;\n\nexport const contentBlockSegmentedItems = html`\n <dds-content-block-segmented-item>\n <dds-content-group-heading\n >A scelerisque purus semper eget duis at tellus.\n </dds-content-group-heading>\n <dds-content-item-copy\n >Elementum nibh tellus molestie nunc non. Habitant morbi tristique\n senectus et netus et malesuada fames.\n </dds-content-item-copy>\n <dds-text-cta\n slot=\"footer\"\n cta-type=\"local\"\n icon-placement=\"right\"\n href=\"https://example.com\"\n >Lorem Ipsum dolor sit</dds-text-cta\n >\n </dds-content-block-segmented-item>\n\n <dds-content-block-segmented-item>\n <dds-content-group-heading\n >A scelerisque purus semper eget duis at tellus.\n </dds-content-group-heading>\n <dds-content-item-copy\n >Elementum nibh tellus molestie nunc non. Habitant morbi tristique\n senectus et netus et malesuada fames.\n </dds-content-item-copy>\n </dds-content-block-segmented-item>\n`;\n\nexport const contentBlockSegmentedItemsWithImage = html`\n <dds-content-block-segmented-item>\n <dds-content-group-heading\n >A scelerisque purus semper eget duis at tellus.\n </dds-content-group-heading>\n <dds-content-item-copy\n >Elementum nibh tellus molestie nunc non. Habitant morbi tristique\n senectus et netus et malesuada fames.\n </dds-content-item-copy>\n ${image}\n <dds-text-cta\n slot=\"footer\"\n cta-type=\"local\"\n icon-placement=\"right\"\n href=\"https://example.com\"\n >Lorem Ipsum dolor sit</dds-text-cta\n >\n </dds-content-block-segmented-item>\n`;\n\nexport const contentItemHorizontal = html`\n <dds-content-item-horizontal>\n <dds-content-item-horizontal-eyebrow\n >Lorem ipsum</dds-content-item-horizontal-eyebrow\n >\n <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>\n <dds-content-item-horizontal-copy\n >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et\n ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit\n sollicitudin.</dds-content-item-horizontal-copy\n >\n <dds-link-list slot=\"footer\" type=\"vertical\">\n <dds-link-list-item-cta\n icon-placement=\"right\"\n href=\"https://www.ibm.com\"\n cta-type=\"local\"\n >\n Link text\n </dds-link-list-item-cta>\n <dds-link-list-item-cta\n icon-placement=\"right\"\n href=\"https://www.ibm.com\"\n cta-type=\"external\"\n >\n External link text\n </dds-link-list-item-cta>\n </dds-link-list>\n </dds-content-item-horizontal>\n`;\n\nexport const universalBanner = (srcImage) => html`\n <dds-universal-banner image-width=\"4-col\">\n <dds-universal-banner-image\n slot=\"image\"\n default-src=\"${srcImage}\"\n ></dds-universal-banner-image>\n <dds-universal-banner-heading slot=\"heading\"\n >heading</dds-universal-banner-heading\n >\n <dds-universal-banner-copy slot=\"copy\">copy</dds-universal-banner-copy>\n <dds-button-cta\n slot=\"cta\"\n cta-type=\"local\"\n kind=\"tertiary\"\n href=\"https://www.example.com\"\n >\n cta copy\n </dds-button-cta>\n </dds-universal-banner>\n`;\n\nexport const cardGroupItems = html`\n <dds-card-group-item href=\"https://example.com\">\n <dds-image slot=\"image\" alt=\"Image alt text\" default-src=\"${imgXlg4x3}\">\n </dds-image>\n <dds-card-eyebrow>Topic</dds-card-eyebrow>\n <dds-card-heading>Natural Language Processing.</dds-card-heading>\n <dds-card-cta-footer slot=\"footer\">\n ${ArrowRight20({ slot: 'icon' })}\n </dds-card-cta-footer>\n </dds-card-group-item>\n`;\n\nexport const contentLeadspace = html`\n <dds-leadspace\n size=\"medium\"\n gradient-style-scheme=\"true\"\n alt=\"\"\n default-src=\"${leadspaceImg}\"\n >\n <dds-leadspace-heading>Leadspace Title</dds-leadspace-heading>\n Use this area for a short line of copy to support the title\n <dds-button-group slot=\"action\">\n <dds-button-group-item aria-label=\"\" href=\"\">test</dds-button-group-item>\n </dds-button-group>\n <dds-image\n slot=\"image\"\n class=\"bx--image\"\n alt=\"\"\n default-src=\"${leadspaceImg}\"\n >\n <dds-image-item\n media=\"(min-width: 672px)\"\n srcset=\"${leadspaceImg}\"\n ></dds-image-item>\n <dds-image-item\n media=\"(min-width: 0)\"\n srcset=\"${leadspaceImg}\"\n ></dds-image-item>\n </dds-image>\n </dds-leadspace>\n`;\n\nexport const contentLeadspaceSearch = html`\n <dds-leadspace-with-search adjacent-theme=\"white-and-g10\" scroll-behavior>\n <dds-leadspace-with-search-heading\n >Find a product</dds-leadspace-with-search-heading\n >\n <dds-leadspace-with-search-content>\n <dds-leadspace-with-search-content-heading\n >Innovate like a startup, scale for the\n enterprise</dds-leadspace-with-search-content-heading\n >\n <dds-leadspace-with-search-content-copy>\n Automate your software release process with continuous delivery (CD)—the\n most critical part of adopting DevOps. Build, test, and deploy code\n changes quickly, ensuring software is always ready for deployment.\n </dds-leadspace-with-search-content-copy>\n </dds-leadspace-with-search-content>\n <dds-search-with-typeahead\n slot=\"search\"\n leadspace-search\n active\n should-remain-open\n ></dds-search-with-typeahead>\n </dds-leadspace-with-search>\n`;\n\nexport const tocContent = html`\n <a name=\"1\" data-title=\"Lorem ipsum dolor sit amet\"></a>\n <dds-leadspace-block>\n <dds-leadspace-block-heading\n >Lorem ipsum dolor sit amet</dds-leadspace-block-heading\n >\n <dds-leadspace-block-content>\n <dds-content-block-heading>\n Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.\n </dds-content-block-heading>\n <dds-content-block-copy slot=\"copy\"\n >Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi\n ut aliquip ex ea commodo consequat.\n </dds-content-block-copy>\n <dds-leadspace-block-media slot=\"media\">\n <dds-video-player-container\n video-id=\"1_9h94wo6b\"\n ></dds-video-player-container>\n </dds-leadspace-block-media>\n <dds-link-list type=\"end\">\n <dds-link-list-heading>Featured products</dds-link-list-heading>\n <dds-link-list-item href=\"https://example.com\">\n IBM Cloud Continuous Delivery ${ArrowRight20({ slot: 'icon' })}\n </dds-link-list-item>\n <dds-link-list-item href=\"https://example.com\">\n UrbanCode ${ArrowRight20({ slot: 'icon' })}\n </dds-link-list-item>\n <dds-link-list-item href=\"https://example.com\">\n View all products ${ArrowRight20({ slot: 'icon' })}\n </dds-link-list-item>\n </dds-link-list>\n <dds-leadspace-block-cta>\n <dds-button-group-item href=\"www.ibm.com\"\n >Contact sales\n ${ArrowRight20({\n slot: 'icon',\n })}</dds-button-group-item\n >\n </dds-leadspace-block-cta>\n </dds-leadspace-block-content>\n </dds-leadspace-block>\n\n <a name=\"2\" data-title=\"Pharetra pharetra massa massa ultricies mi quis.\"></a>\n <dds-content-block-segmented>\n <dds-content-block-heading\n >Pharetra pharetra massa massa ultricies mi\n quis.</dds-content-block-heading\n >\n ${Array.from([1, 2]).map(() => contentBlockSegmentedItems)}\n </dds-content-block-segmented>\n <dds-feature-card size=\"large\" href=\"https://example.com\">\n <dds-image slot=\"image\" alt=\"Image alt text\" default-src=\"${imgLg1x1}\">\n <dds-image-item\n media=\"(min-width: 991px)\"\n srcset=\"${imgLg1x1}\"\n ></dds-image-item>\n </dds-image>\n <dds-card-eyebrow>scelerisque purus</dds-card-eyebrow>\n <dds-card-heading>Elementum nibh tellus molestie nunc?</dds-card-heading>\n <p>\n Habitant morbi tristique senectus et netus et malesuada fames. Habitant\n morbu tristique.\n </p>\n <dds-feature-card-footer>\n ${ArrowRight20({ slot: 'icon' })}\n </dds-feature-card-footer>\n </dds-feature-card>\n\n <a name=\"3\" data-title=\"Elementum nibh tellus molestie nunc non.\"></a>\n <dds-content-block-segmented>\n <dds-content-block-heading\n >Elementum nibh tellus molestie nunc non.\n </dds-content-block-heading>\n ${Array.from([1, 2]).map(() => contentBlockSegmentedItemsWithImage)}\n <dds-card-cta slot=\"footer\" cta-type=\"local\" href=\"https://example.com\">\n Lorem ipsum dolor\n <dds-card-cta-footer></dds-card-cta-footer>\n </dds-card-cta>\n </dds-content-block-segmented>\n\n <dds-callout-with-media>\n <dds-content-block-heading slot=\"heading\"\n >Mauris ultrices eros in cursus</dds-content-block-heading\n >\n <dds-callout-with-media-copy size=\"sm\"\n >Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada\n proin libero nunc consequat. In est ante in nibh mauris cursus mattis.\n Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est\n velit egestas dui.\n </dds-callout-with-media-copy>\n <dds-callout-with-media-video\n video-id=\"1_9h94wo6b\"\n ></dds-callout-with-media-video>\n </dds-callout-with-media>\n\n <a name=\"4\" data-title=\"Tincidunt ornare massa\"></a>\n <dds-content-block-horizontal>\n <dds-content-block-heading\n >Tincidunt ornare massa</dds-content-block-heading\n >\n ${Array.from([1, 2]).map(() => contentItemHorizontal)}\n </dds-content-block-horizontal>\n\n <a name=\"5\" data-title=\"Lobortis elementum nibh tellus\"></a>\n <dds-logo-grid ?hide-border=\"true\">\n <dds-content-block-heading\n >Lobortis elementum nibh tellus</dds-content-block-heading\n >\n ${logosGroup &&\n logosGroup.map(\n (elem) => html`\n <dds-logo-grid-item\n default-src=\"${elem.imgSrc}\"\n alt=\"${elem.altText}\"\n ></dds-logo-grid-item>\n `\n )}\n </dds-logo-grid>\n\n <a name=\"6\" data-title=\"Aliquam condimentum interdum\"></a>\n <dds-content-block-cards>\n <dds-content-block-heading\n >Aliquam condimentum interdum</dds-content-block-heading\n >\n <dds-card-group>\n ${Array.from([1, 2, 3]).map(() => cardGroupItems)}\n </dds-card-group>\n </dds-content-block-cards>\n <dds-callout-quote>\n Duis aute irure dolor in reprehenderit\n <dds-quote-source-heading>\n Lorem ipsum dolor sit amet\n </dds-quote-source-heading>\n <dds-quote-source-copy> consectetur adipiscing elit </dds-quote-source-copy>\n <dds-quote-source-bottom-copy> IBM Cloud </dds-quote-source-bottom-copy>\n <dds-callout-link-with-icon slot=\"footer\" href=\"https://example.com\">\n Link with Icon ${ArrowRight20({ slot: 'icon' })}\n </dds-callout-link-with-icon>\n </dds-callout-quote>\n\n <a name=\"7\" data-title=\"Duis aute irure dolor in reprehenderit\"></a>\n <dds-cta-block no-border>\n <dds-content-block-heading>Take the next step</dds-content-block-heading>\n <dds-content-block-copy\n >Want to discuss your options with a DevOps expert? <br />\n Contact our sales team to evaluate your needs.</dds-content-block-copy\n >\n <dds-button-group slot=\"action\">\n <dds-button-group-item href=\"https://example.com\">\n Secondary Button ${ArrowRight20({ slot: 'icon' })}\n </dds-button-group-item>\n <dds-button-group-item href=\"https://example.com\">\n Primary button ${ArrowRight20({ slot: 'icon' })}\n </dds-button-group-item>\n </dds-button-group>\n <dds-cta-block-item-row no-border>\n <dds-cta-block-item>\n <dds-content-item-heading>Get connected</dds-content-item-heading>\n <dds-content-item-copy\n >IBM DevOps partners have a wide range of expertise. Find one to build\n the right solution for you.</dds-content-item-copy\n >\n <dds-text-cta\n slot=\"footer\"\n cta-type=\"local\"\n icon-placement=\"right\"\n href=\"example.com\"\n >\n Find a partner\n </dds-text-cta>\n </dds-cta-block-item>\n <dds-cta-block-item>\n <dds-content-item-heading>Learn how</dds-content-item-heading>\n <dds-content-item-copy\n >IBM DevOps partners have a wide range of\n expertise</dds-content-item-copy\n >\n <dds-text-cta\n slot=\"footer\"\n cta-type=\"local\"\n icon-placement=\"right\"\n href=\"example.com\"\n >\n Browse tutorials\n </dds-text-cta>\n </dds-cta-block-item>\n </dds-cta-block-item-row>\n </dds-cta-block>\n`;\n\nexport const StoryContent = (\n config = {\n l1: false,\n leadspace: false,\n tocLayout: TOC_TYPES.DEFAULT,\n }\n) => {\n const mainClasses = [\n 'bx--content',\n 'dds-ce-demo-devenv--ui-shell-content',\n config?.l1 ? 'has-l1' : null,\n config?.leadspace ? 'has-leadspace' : null,\n ]\n .filter((className) => className != null)\n .join(' ');\n\n return html`\n <div class=\"${mainClasses}\">\n ${config?.leadspace ? contentLeadspace : null}\n ${config?.tocLayout === TOC_TYPES.HORIZONTAL\n ? html`\n <dds-table-of-contents\n stickyOffset=\"48\"\n toc-layout=${config.tocLayout}\n >\n <div class=\"bx--row\">\n <div class=\"bx--col-lg-12\">${tocContent}</div>\n </div>\n </dds-table-of-contents>\n `\n : html`\n <dds-table-of-contents\n stickyOffset=\"48\"\n toc-layout=${config.tocLayout}\n >\n ${tocContent}\n </dds-table-of-contents>\n `}\n </div>\n `;\n};\n\nexport const StoryContentNoToC = () =>\n html`\n <div\n class=\"dds-ce-demo-devenv--ui-shell-content\"\n style=\"padding-right:1rem\"\n >\n <div class=\"bx--grid bx--col-lg-8\">\n ${contentLeadspaceSearch}\n\n <dds-content-block-segmented>\n <dds-content-block-heading\n >Pharetra pharetra massa massa ultricies mi\n quis.</dds-content-block-heading\n >\n ${Array.from([1, 2]).map(() => contentBlockSegmentedItems)}\n </dds-content-block-segmented>\n\n <dds-feature-card size=\"large\" href=\"https://example.com\">\n <dds-image\n slot=\"image\"\n alt=\"Image alt text\"\n default-src=\"${imgLg1x1}\"\n >\n <dds-image-item\n media=\"(min-width: 991px)\"\n srcset=\"${imgLg1x1}\"\n ></dds-image-item>\n </dds-image>\n <dds-card-eyebrow>scelerisque purus</dds-card-eyebrow>\n <dds-card-heading\n >Elementum nibh tellus molestie nunc?</dds-card-heading\n >\n <p>\n Habitant morbi tristique senectus et netus et malesuada fames.\n Habitant morbu tristique.\n </p>\n <dds-feature-card-footer>\n ${ArrowRight20({ slot: 'icon' })}\n </dds-feature-card-footer>\n </dds-feature-card>\n\n <dds-content-block-segmented>\n <dds-content-block-heading\n >Elementum nibh tellus molestie nunc non.\n </dds-content-block-heading>\n ${Array.from([1, 2]).map(() => contentBlockSegmentedItemsWithImage)}\n <dds-card-cta\n slot=\"footer\"\n cta-type=\"local\"\n href=\"https://example.com\"\n >\n Lorem ipsum dolor\n <dds-card-cta-footer></dds-card-cta-footer>\n </dds-card-cta>\n </dds-content-block-segmented>\n\n <dds-callout-with-media>\n <dds-content-block-heading slot=\"heading\"\n >Mauris ultrices eros in cursus</dds-content-block-heading\n >\n <dds-callout-with-media-copy size=\"sm\"\n >Porttitor eget dolor morbi non arcu. Et ligula ullamcorper\n malesuada proin libero nunc consequat. In est ante in nibh mauris\n cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel\n facilisis volutpat est velit egestas dui.\n </dds-callout-with-media-copy>\n <dds-callout-with-media-video\n video-id=\"1_9h94wo6b\"\n ></dds-callout-with-media-video>\n </dds-callout-with-media>\n\n <dds-content-block-horizontal>\n <dds-content-block-heading\n >Tincidunt ornare massa</dds-content-block-heading\n >\n ${Array.from([1, 2]).map(() => contentItemHorizontal)}\n </dds-content-block-horizontal>\n\n <dds-logo-grid ?hide-border=\"true\">\n <dds-content-block-heading\n >Lobortis elementum nibh tellus</dds-content-block-heading\n >\n ${logosGroup &&\n logosGroup.map(\n (elem) => html`\n <dds-logo-grid-item\n default-src=\"${elem.imgSrc}\"\n alt=\"${elem.altText}\"\n ></dds-logo-grid-item>\n `\n )}\n </dds-logo-grid>\n\n <dds-content-block-cards>\n <dds-content-block-heading\n >Aliquam condimentum interdum</dds-content-block-heading\n >\n <dds-card-group>\n ${Array.from([1, 2, 3]).map(() => cardGroupItems)}\n </dds-card-group>\n </dds-content-block-cards>\n\n <dds-callout-quote>\n Duis aute irure dolor in reprehenderit\n <dds-quote-source-heading>\n Lorem ipsum dolor sit amet\n </dds-quote-source-heading>\n <dds-quote-source-copy>\n consectetur adipiscing elit\n </dds-quote-source-copy>\n <dds-quote-source-bottom-copy>\n IBM Cloud\n </dds-quote-source-bottom-copy>\n <dds-callout-link-with-icon slot=\"footer\" href=\"https://example.com\">\n Link with Icon ${ArrowRight20({ slot: 'icon' })}\n </dds-callout-link-with-icon>\n </dds-callout-quote>\n\n <dds-cta-block no-border>\n <dds-content-block-heading\n >Take the next step</dds-content-block-heading\n >\n <dds-content-block-copy\n >Want to discuss your options with a DevOps expert? <br />\n Contact our sales team to evaluate your\n needs.</dds-content-block-copy\n >\n\n <dds-button-group slot=\"action\">\n <dds-button-group-item href=\"https://example.com\">\n Secondary Button ${ArrowRight20({ slot: 'icon' })}\n </dds-button-group-item>\n <dds-button-group-item href=\"https://example.com\">\n Primary button ${ArrowRight20({ slot: 'icon' })}\n </dds-button-group-item>\n </dds-button-group>\n\n <dds-cta-block-item-row no-border>\n <dds-cta-block-item>\n <dds-content-item-heading>Get connected</dds-content-item-heading>\n <dds-content-item-copy\n >IBM DevOps partners have a wide range of expertise. Find one to\n build the right solution for you.</dds-content-item-copy\n >\n <dds-text-cta\n slot=\"footer\"\n cta-type=\"local\"\n icon-placement=\"right\"\n href=\"example.com\"\n >\n Find a partner\n </dds-text-cta>\n </dds-cta-block-item>\n\n <dds-cta-block-item>\n <dds-content-item-heading>Learn how</dds-content-item-heading>\n <dds-content-item-copy\n >IBM DevOps partners have a wide range of\n expertise</dds-content-item-copy\n >\n <dds-text-cta\n slot=\"footer\"\n cta-type=\"local\"\n icon-placement=\"right\"\n href=\"example.com\"\n >\n Browse tutorials\n </dds-text-cta>\n </dds-cta-block-item>\n </dds-cta-block-item-row>\n </dds-cta-block>\n </div>\n </div>\n `;\n\nexport default { StoryContent, StoryContentNoToC };\n/ eslint-enable max-len */\n"]}

package/es/components/dotcom-shell/__stories__/data/content.js CHANGED Viewed

@@ -23,7 +23,7 @@ let _ = t => t,
  */
 import { html } from 'lit-element';
-import ArrowRight20 from '@carbon/carbon-web-components/es/icons/arrow--right/20';
+import ArrowRight20 from '@carbon/web-components/es/icons/arrow--right/20';
 import logosGroup from '../../../logo-grid/__stories__/data/logos.js';
 import { TOC_TYPES } from "../../../table-of-contents/defs.js";
 import "../../../card/index.js";