@carbon/ibmdotcom-web-components 2.48.0 → 2.50.0-rc.0
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.
- package/custom-elements.json +19 -10
- package/dist/dotcom-shell.js +7 -7
- package/dist/dotcom-shell.min.js +7 -7
- package/dist/ibmdotcom-web-components-dotcom-shell.js +7 -7
- package/dist/ibmdotcom-web-components-dotcom-shell.min.js +7 -7
- package/dist/{index-b819eefc.js → index-514478b8.js} +25 -87
- package/dist/{index-7073ec78.js → index-9732faeb.js} +10 -10
- package/dist/{left-nav-menu-0ddb90d7.js → left-nav-menu-2f5322ac.js} +7 -7
- package/dist/{left-nav-menu-e9108438.js → left-nav-menu-746ad81a.js} +7 -7
- package/dist/{left-nav-menu-category-heading-08d18557.js → left-nav-menu-category-heading-0e98a8c6.js} +7 -7
- package/dist/{left-nav-menu-category-heading-e2592d0d.js → left-nav-menu-category-heading-22762753.js} +7 -7
- package/dist/{left-nav-menu-item-a604b8db.js → left-nav-menu-item-252b6d0e.js} +7 -7
- package/dist/{left-nav-menu-item-dcdac62f.js → left-nav-menu-item-a08c2ca0.js} +7 -7
- package/dist/{left-nav-menu-section-3a22d6a2.js → left-nav-menu-section-40ae6c75.js} +7 -7
- package/dist/{left-nav-menu-section-763d7ada.js → left-nav-menu-section-a6f52f70.js} +7 -7
- package/dist/{left-nav-overlay-53202cdc.js → left-nav-overlay-6f936f5f.js} +7 -7
- package/dist/{left-nav-overlay-f079f5bd.js → left-nav-overlay-dfce57ab.js} +7 -7
- package/dist/{megamenu-category-group-916e8a0d.js → megamenu-category-group-b63f1f2d.js} +7 -7
- package/dist/{megamenu-category-group-copy-ee79d5dc.js → megamenu-category-group-copy-1e261d94.js} +7 -7
- package/dist/{megamenu-category-group-copy-af2a7de6.js → megamenu-category-group-copy-419d6ebe.js} +7 -7
- package/dist/{megamenu-category-group-7334a77c.js → megamenu-category-group-fe150fbc.js} +7 -7
- package/dist/{megamenu-category-heading-53b9be81.js → megamenu-category-heading-46c39931.js} +7 -7
- package/dist/{megamenu-category-heading-c102de05.js → megamenu-category-heading-9c2eccbf.js} +7 -7
- package/dist/{megamenu-category-link-800dad5a.js → megamenu-category-link-7fa288d5.js} +7 -7
- package/dist/{megamenu-category-link-defb1bd6.js → megamenu-category-link-986b3de3.js} +7 -7
- package/dist/{megamenu-category-link-group-1cce18e8.js → megamenu-category-link-group-1392a46f.js} +7 -7
- package/dist/{megamenu-category-link-group-d67bfe11.js → megamenu-category-link-group-f76ba2ac.js} +7 -7
- package/dist/{megamenu-left-navigation-a328f9e5.js → megamenu-left-navigation-55ebdf48.js} +7 -7
- package/dist/{megamenu-left-navigation-e98850ab.js → megamenu-left-navigation-eb44aef8.js} +7 -7
- package/dist/{megamenu-overlay-406f9d65.js → megamenu-overlay-5c4848c7.js} +7 -7
- package/dist/{megamenu-overlay-613423d7.js → megamenu-overlay-c4637474.js} +7 -7
- package/dist/{megamenu-tab-e2c7e080.js → megamenu-tab-b48fbb7c.js} +7 -7
- package/dist/{megamenu-tab-0b6918ac.js → megamenu-tab-c2772b72.js} +7 -7
- package/es/components/background-media/background-media.d.ts +1 -1
- package/es/components/background-media/background-media.js.map +1 -1
- package/es/components/lightbox-media-viewer/lightbox-media-viewer-body.d.ts +5 -1
- package/es/components/lightbox-media-viewer/lightbox-media-viewer-body.js +17 -4
- package/es/components/lightbox-media-viewer/lightbox-media-viewer-body.js.map +1 -1
- package/es/components/lightbox-media-viewer/lightbox-media-viewer.d.ts +3 -1
- package/es/components/lightbox-media-viewer/lightbox-media-viewer.js +13 -5
- package/es/components/lightbox-media-viewer/lightbox-media-viewer.js.map +1 -1
- package/es/components/lightbox-media-viewer/lightbox-video-player-composite.d.ts +1 -1
- package/es/components/lightbox-media-viewer/lightbox-video-player-composite.js +2 -2
- package/es/components/lightbox-media-viewer/lightbox-video-player-composite.js.map +1 -1
- package/es/components/lightbox-media-viewer/lightbox-video-player-container.d.ts +3 -3
- package/es/components/lightbox-media-viewer/lightbox-video-player-container.js +1 -1
- package/es/components/lightbox-media-viewer/lightbox-video-player-container.js.map +1 -1
- package/es/components/lightbox-media-viewer/lightbox-video-player.d.ts +1 -1
- package/es/components/lightbox-media-viewer/lightbox-video-player.js +16 -5
- package/es/components/lightbox-media-viewer/lightbox-video-player.js.map +1 -1
- package/es/components/masthead/masthead-cart.d.ts +0 -13
- package/es/components/masthead/masthead-cart.js +15 -72
- package/es/components/masthead/masthead-cart.js.map +1 -1
- package/es/components/notice-choice/notice-choice.d.ts +1 -0
- package/es/components/notice-choice/notice-choice.js +31 -10
- package/es/components/notice-choice/notice-choice.js.map +1 -1
- package/es/components/notice-choice/utils.js +2 -1
- package/es/components/notice-choice/utils.js.map +1 -1
- package/es/components-react/lightbox-media-viewer/lightbox-media-viewer.d.ts +1 -0
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lightbox-media-viewer.js","names":["html","property","query","settings","C4DLightboxMediaViewerBody","C4DVideoPlayerContainer","C4DExpressiveModal","carbonElement","customElement","stablePrefix","c4dPrefix","C4DLightboxMediaViewer","_decorate","_initialize","_C4DLightboxMediaView","constructor","args","F","d","kind","key","value","_renderDescription","description","_t","_","_renderMedia","_t2","_handleSlotChange","_renderTitle","title","_t3","decorators","event","_containingModal","containingModal","media","target","assignedNodes","_mediaItem","_intersectionObserver","IntersectionObserver","disconnect","undefined","_boundModalClosedHandler","removeEventListener","eventBeforeClose","_mediaWindow","mediaWindow","_containingCarousel","containingCarousel","callback","_handleOutOfCarouselView","bind","root","rootMargin","threshold","observe","_handleModalClosed","addEventListener","entries","forEach","entry","intersectionRatio","_pauseVideo","mediaItem","pauseAllVideos","connectedCallback","_superPropGet","closest","update","changedProperties","videoId","caption","hideCaption","thumbnail","innerHTML","alt","defaultSrc","attribute","static"],"sources":["components/lightbox-media-viewer/lightbox-media-viewer.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2024\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';\nimport { property, query } from 'lit/decorators.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport C4DLightboxMediaViewerBody from './lightbox-media-viewer-body';\nimport C4DVideoPlayerContainer from '../video-player/video-player-container';\nimport C4DCarousel from '../carousel/carousel';\nimport C4DExpressiveModal from '../expressive-modal/expressive-modal';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\nconst { stablePrefix: c4dPrefix } = settings;\n\n/**\n * The image content of lightbox media viewer.\n *\n * @element c4d-lightbox-media-viewer\n * @slot title - The title content.\n * @slot description - The description content.\n * @csspart container - The wrapper around the lightbox media. Usage: `c4d-lightbox-video-player::part(container)`\n * @csspart row - The wrapper around the row. Usage: `c4d-lightbox-video-player::part(row)`\n * @csspart media - The wrapper around media. Usage: `c4d-lightbox-video-player::part(media)`\n * @csspart content-wrapper - The wrapper around content. Usage: `c4d-lightbox-video-player::part(content-wrapper)`\n * @csspart content - The inner wrapper around content. Usage: `c4d-lightbox-video-player::part(content)`\n * @csspart title - The title of the media. Usage: `c4d-lightbox-video-player::part(title)`\n * @csspart description - The description of the media. Usage: `c4d-lightbox-video-player::part(description)`\n * @csspart h2 - The h2 element that holds the title. Usage: `c4d-lightbox-video-player::part(h2)`\n */\n@customElement(`${c4dPrefix}-lightbox-media-viewer`)\nclass C4DLightboxMediaViewer extends C4DLightboxMediaViewerBody {\n _renderDescription() {\n const { description } = this;\n return html` <slot name=\"description\">${description}</slot> `;\n }\n\n _renderMedia() {\n return html`\n <slot name=\"media\" @slotchange=\"${this._handleSlotChange}\"></slot>\n `;\n }\n\n _renderTitle() {\n const { title } = this;\n return html`\n <slot name=\"title\"\n ><h2 part=\"h2\" style=\"all: inherit;\">${title}</h2></slot\n >\n `;\n }\n\n private _mediaItem?: HTMLElement;\n\n @query(`.${c4dPrefix}--lightbox-media-viewer__media`)\n private _mediaWindow!: HTMLDivElement;\n\n private _containingCarousel?: C4DCarousel;\n\n private _containingModal?: C4DExpressiveModal;\n\n private _handleSlotChange(event: Event) {\n const { _containingModal: containingModal } = this;\n const [media] = (event.target as HTMLSlotElement).assignedNodes();\n this._mediaItem = media as HTMLImageElement | C4DVideoPlayerContainer;\n\n // Disconnect & delete intersection observer\n if (this._intersectionObserver instanceof IntersectionObserver) {\n this._intersectionObserver.disconnect();\n this._intersectionObserver = undefined;\n }\n\n // Remove modal closed listeners from the containing modal\n if (containingModal && this._boundModalClosedHandler) {\n containingModal.removeEventListener(\n C4DExpressiveModal.eventBeforeClose,\n this._boundModalClosedHandler\n );\n this._boundModalClosedHandler = undefined;\n }\n\n if (media instanceof C4DVideoPlayerContainer) {\n const {\n _mediaWindow: mediaWindow,\n _containingCarousel: containingCarousel,\n } = this;\n\n // Watch for out-of-view if we're in a carousel\n if (mediaWindow && containingCarousel) {\n const callback = this._handleOutOfCarouselView.bind(this);\n this._intersectionObserver = new IntersectionObserver(callback, {\n root: containingCarousel,\n rootMargin: '999px 0px 999px 0px',\n threshold: 1,\n });\n\n this._intersectionObserver.observe(mediaWindow);\n }\n\n // Watch for modal close\n if (containingModal) {\n this._boundModalClosedHandler = this._handleModalClosed.bind(this);\n\n containingModal.addEventListener(\n C4DExpressiveModal.eventBeforeClose,\n this._boundModalClosedHandler\n );\n }\n }\n }\n\n private _intersectionObserver?: IntersectionObserver;\n\n private _handleOutOfCarouselView(entries) {\n entries.forEach((entry) => {\n if (entry.intersectionRatio < 1) {\n this._pauseVideo();\n }\n });\n }\n\n private _handleModalClosed() {\n this._pauseVideo();\n }\n\n private _pauseVideo() {\n const { _mediaItem: mediaItem } = this;\n\n if (mediaItem instanceof C4DVideoPlayerContainer) {\n mediaItem.pauseAllVideos();\n }\n }\n\n _boundModalClosedHandler?: EventListenerOrEventListenerObject;\n\n connectedCallback() {\n super.connectedCallback();\n\n this._containingCarousel =\n (this.closest(`${c4dPrefix}-carousel`) as C4DCarousel) || undefined;\n this._containingModal =\n (this.closest(`${c4dPrefix}-expressive-modal`) as C4DExpressiveModal) ||\n undefined;\n }\n\n update(changedProperties) {\n if (this.videoId) {\n const { videoId, caption, hideCaption, thumbnail } = this;\n this.innerHTML = `\n <c4d-video-player-container\n playing-mode=\"inline\"\n video-id=\"${videoId}\"\n caption=\"${caption}\"\n ?hide-caption=\"${hideCaption}\"\n thumbnail=\"${thumbnail}\"\n slot=\"media\"\n ></c4d-video-player-container>\n `;\n } else {\n const { alt, defaultSrc } = this;\n this.innerHTML = `\n <img\n class=\"${c4dPrefix}--image__img\"\n alt=\"${alt}\"\n src=\"${defaultSrc}\"\n loading=\"lazy\"\n slot=\"media\"\n style=\"max-width:100%;max-height:100%\"\n />\n `;\n }\n super.update(changedProperties);\n }\n\n /**\n * The alternate text.\n */\n @property()\n alt = '';\n\n /**\n * The image source.\n */\n @property({ attribute: 'default-src' })\n defaultSrc = '';\n\n /**\n * The media description.\n */\n @property()\n description = '';\n\n /**\n * The media title.\n */\n @property()\n title = '';\n\n @property({ attribute: 'video-id' })\n videoId = '';\n\n @property()\n caption = '';\n\n @property()\n hideCaption = false;\n\n @property()\n thumbnail = '';\n\n /**\n * The name of the custom event fired before this modal is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this modal.\n */\n static get eventBeforeModalClose() {\n return `${c4dPrefix}-expressive-modal-beingclosed`;\n }\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default C4DLightboxMediaViewer;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"lightbox-media-viewer.js","names":["html","property","query","settings","C4DLightboxMediaViewerBody","C4DVideoPlayerContainer","C4DExpressiveModal","carbonElement","customElement","stablePrefix","c4dPrefix","C4DLightboxMediaViewer","_decorate","_initialize","_C4DLightboxMediaView","constructor","args","F","d","kind","key","value","_renderDescription","description","_t","_","_renderMedia","_t2","_handleSlotChange","_renderTitle","title","_t3","_renderCTAs","_t4","decorators","event","_containingModal","containingModal","media","target","assignedNodes","_mediaItem","_intersectionObserver","IntersectionObserver","disconnect","undefined","_boundModalClosedHandler","removeEventListener","eventBeforeClose","_mediaWindow","mediaWindow","_containingCarousel","containingCarousel","callback","_handleOutOfCarouselView","bind","root","rootMargin","threshold","observe","_handleModalClosed","addEventListener","entries","forEach","entry","intersectionRatio","_pauseVideo","mediaItem","pauseAllVideos","connectedCallback","_superPropGet","closest","update","changedProperties","videoId","caption","hideCaption","thumbnail","innerHTML","alt","defaultSrc","attribute","static"],"sources":["components/lightbox-media-viewer/lightbox-media-viewer.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2026\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';\nimport { property, query } from 'lit/decorators.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport C4DLightboxMediaViewerBody from './lightbox-media-viewer-body';\nimport C4DVideoPlayerContainer from '../video-player-v7/video-player-container';\nimport C4DCarousel from '../carousel/carousel';\nimport C4DExpressiveModal from '../expressive-modal/expressive-modal';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\nconst { stablePrefix: c4dPrefix } = settings;\n\n/**\n * The image content of lightbox media viewer.\n *\n * @element c4d-lightbox-media-viewer\n * @slot title - The title content.\n * @slot description - The description content.\n * @slot cta - The CTA content.\n * @csspart container - The wrapper around the lightbox media. Usage: `c4d-lightbox-video-player::part(container)`\n * @csspart row - The wrapper around the row. Usage: `c4d-lightbox-video-player::part(row)`\n * @csspart media - The wrapper around media. Usage: `c4d-lightbox-video-player::part(media)`\n * @csspart content-wrapper - The wrapper around content. Usage: `c4d-lightbox-video-player::part(content-wrapper)`\n * @csspart content - The inner wrapper around content. Usage: `c4d-lightbox-video-player::part(content)`\n * @csspart title - The title of the media. Usage: `c4d-lightbox-video-player::part(title)`\n * @csspart description - The description of the media. Usage: `c4d-lightbox-video-player::part(description)`\n * @csspart h2 - The h2 element that holds the title. Usage: `c4d-lightbox-video-player::part(h2)`\n */\n@customElement(`${c4dPrefix}-lightbox-media-viewer`)\nclass C4DLightboxMediaViewer extends C4DLightboxMediaViewerBody {\n _renderDescription() {\n const { description } = this;\n return html` <slot name=\"description\">${description}</slot> `;\n }\n\n _renderMedia() {\n return html`\n <slot name=\"media\" @slotchange=\"${this._handleSlotChange}\"></slot>\n `;\n }\n\n _renderTitle() {\n const { title } = this;\n return html`\n <slot name=\"title\"\n ><h2 part=\"h2\" style=\"all: inherit;\">${title}</h2></slot\n >\n `;\n }\n\n _renderCTAs() {\n return html` <slot name=\"cta\"></slot> `;\n }\n\n private _mediaItem?: HTMLElement;\n\n @query(`.${c4dPrefix}--lightbox-media-viewer__media`)\n private _mediaWindow!: HTMLDivElement;\n\n private _containingCarousel?: C4DCarousel;\n\n private _containingModal?: C4DExpressiveModal;\n\n private _handleSlotChange(event: Event) {\n const { _containingModal: containingModal } = this;\n const [media] = (event.target as HTMLSlotElement).assignedNodes();\n this._mediaItem = media as HTMLImageElement | C4DVideoPlayerContainer;\n\n // Disconnect & delete intersection observer\n if (this._intersectionObserver instanceof IntersectionObserver) {\n this._intersectionObserver.disconnect();\n this._intersectionObserver = undefined;\n }\n\n // Remove modal closed listeners from the containing modal\n if (containingModal && this._boundModalClosedHandler) {\n containingModal.removeEventListener(\n C4DExpressiveModal.eventBeforeClose,\n this._boundModalClosedHandler\n );\n this._boundModalClosedHandler = undefined;\n }\n\n if (media instanceof C4DVideoPlayerContainer) {\n const {\n _mediaWindow: mediaWindow,\n _containingCarousel: containingCarousel,\n } = this;\n\n // Watch for out-of-view if we're in a carousel\n if (mediaWindow && containingCarousel) {\n const callback = this._handleOutOfCarouselView.bind(this);\n this._intersectionObserver = new IntersectionObserver(callback, {\n root: containingCarousel,\n rootMargin: '999px 0px 999px 0px',\n threshold: 1,\n });\n\n this._intersectionObserver.observe(mediaWindow);\n }\n\n // Watch for modal close\n if (containingModal) {\n this._boundModalClosedHandler = this._handleModalClosed.bind(this);\n\n containingModal.addEventListener(\n C4DExpressiveModal.eventBeforeClose,\n this._boundModalClosedHandler\n );\n }\n }\n }\n\n private _intersectionObserver?: IntersectionObserver;\n\n private _handleOutOfCarouselView(entries) {\n entries.forEach((entry) => {\n if (entry.intersectionRatio < 1) {\n this._pauseVideo();\n }\n });\n }\n\n private _handleModalClosed() {\n this._pauseVideo();\n }\n\n private _pauseVideo() {\n const { _mediaItem: mediaItem } = this;\n\n if (mediaItem instanceof C4DVideoPlayerContainer) {\n mediaItem.pauseAllVideos();\n }\n }\n\n _boundModalClosedHandler?: EventListenerOrEventListenerObject;\n\n connectedCallback() {\n super.connectedCallback();\n\n this._containingCarousel =\n (this.closest(`${c4dPrefix}-carousel`) as C4DCarousel) || undefined;\n this._containingModal =\n (this.closest(`${c4dPrefix}-expressive-modal`) as C4DExpressiveModal) ||\n undefined;\n }\n\n update(changedProperties) {\n if (this.videoId) {\n const { videoId, caption, hideCaption, thumbnail } = this;\n this.innerHTML = `\n <c4d-video-player-container-v7\n playing-mode=\"inline\"\n video-id=\"${videoId}\"\n caption=\"${caption}\"\n ?hide-caption=\"${hideCaption}\"\n thumbnail=\"${thumbnail}\"\n slot=\"media\"\n ></c4d-video-player-container-v7>\n `;\n } else {\n const { alt, defaultSrc } = this;\n this.innerHTML = `\n <img\n class=\"${c4dPrefix}--image__img\"\n alt=\"${alt}\"\n src=\"${defaultSrc}\"\n loading=\"lazy\"\n slot=\"media\"\n style=\"max-width:100%;max-height:100%\"\n />\n `;\n }\n super.update(changedProperties);\n }\n\n /**\n * The alternate text.\n */\n @property()\n alt = '';\n\n /**\n * The image source.\n */\n @property({ attribute: 'default-src' })\n defaultSrc = '';\n\n /**\n * The media description.\n */\n @property()\n description = '';\n\n /**\n * The media title.\n */\n @property()\n title = '';\n\n @property({ attribute: 'video-id' })\n videoId = '';\n\n @property()\n caption = '';\n\n @property()\n hideCaption = false;\n\n @property()\n thumbnail = '';\n\n /**\n * The name of the custom event fired before this modal is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this modal.\n */\n static get eventBeforeModalClose() {\n return `${c4dPrefix}-expressive-modal-beingclosed`;\n }\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default C4DLightboxMediaViewer;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
|
-
import C4DVideoPlayerComposite from '../video-player/video-player-composite';
|
|
9
|
+
import C4DVideoPlayerComposite from '../video-player-v7/video-player-composite';
|
|
10
10
|
import '../expressive-modal/expressive-modal';
|
|
11
11
|
import '../expressive-modal/expressive-modal-close-button';
|
|
12
12
|
import './lightbox-video-player';
|
|
@@ -21,10 +21,10 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
21
21
|
import HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';
|
|
22
22
|
import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
|
|
23
23
|
import ModalRenderMixin from "../../globals/mixins/modal-render.js";
|
|
24
|
-
import C4DVideoPlayerComposite from "../video-player/video-player-composite.js";
|
|
24
|
+
import C4DVideoPlayerComposite from "../video-player-v7/video-player-composite.js";
|
|
25
25
|
import "../expressive-modal/expressive-modal.js";
|
|
26
26
|
import "../expressive-modal/expressive-modal-close-button.js";
|
|
27
|
-
import { VIDEO_PLAYER_CONTENT_STATE, VIDEO_PLAYER_PLAYING_MODE } from "../video-player/video-player.js";
|
|
27
|
+
import { VIDEO_PLAYER_CONTENT_STATE, VIDEO_PLAYER_PLAYING_MODE } from "../video-player-v7/video-player.js";
|
|
28
28
|
import "./lightbox-video-player.js";
|
|
29
29
|
import styles from "././lightbox-media-viewer.css.js";
|
|
30
30
|
import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lightbox-video-player-composite.js","names":["html","property","on","ifDefined","HostListener","settings","ModalRenderMixin","C4DVideoPlayerComposite","VIDEO_PLAYER_CONTENT_STATE","VIDEO_PLAYER_PLAYING_MODE","styles","carbonElement","customElement","stablePrefix","c4dPrefix","C4DLightboxVideoPlayerComposite","_decorate","_initialize","_ModalRenderMixin","constructor","args","F","d","kind","key","value","_videoPlayer","videoPlayer","iFrame","querySelector","open","_iFrame$contentWindow","contentWindow","document","removeAttribute","_iFrame$contentWindow2","setAttribute","error","console","log","selectorEmbeddedVideoContainer","elems","Array","prototype","slice","call","querySelectorAll","forEach","element","toggleAttribute","dataset","videoId","embeddedVideos","currentEmbeddedVideo","sendNotification","_handleAriaAndHiddenState","_handleContentStateChange","_","decorators","event","contentState","playingMode","requestedVideoId","name","customVideoDescription","detail","videoCtaLightBox","VIDEO","LIGHTBOX","customVideoName","_this$modalRenderRoot","_this$modalRenderRoot2","selectorVideoPlayer","modalRenderRoot","type","Boolean","reflect","attribute","connectedCallback","_superPropGet","createModalRenderRoot","_hCloseModal","eventCloseModal","_handleCloseModal","disconnectedCallback","release","updated","changedProperties","has","_activateEmbeddedVideo","_this$_loadVideoData","_loadVideoData","_this$_embedMedia","_embedMedia","renderLightDOM","_t","_2","renderModal","formatCaption","formatDuration","hideCaption","mediaData","currentVideoData","description","duration","videoName","videoDescription","_t2","static"],"sources":["components/lightbox-media-viewer/lightbox-video-player-composite.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2024\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';\nimport { property } from 'lit/decorators.js';\nimport on from '@carbon/web-components/es/globals/mixins/on.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport { MediaData } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/kalturaPlayerAPI';\nimport ModalRenderMixin from '../../globals/mixins/modal-render';\nimport Handle from '../../globals/internal/handle';\nimport C4DVideoPlayerComposite from '../video-player/video-player-composite';\nimport '../expressive-modal/expressive-modal';\nimport '../expressive-modal/expressive-modal-close-button';\nimport {\n VIDEO_PLAYER_CONTENT_STATE,\n VIDEO_PLAYER_PLAYING_MODE,\n} from '../video-player/video-player';\nimport './lightbox-video-player';\nimport styles from './lightbox-media-viewer.scss';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\nconst { stablePrefix: c4dPrefix } = settings;\n\n/**\n * Component that renders lightbox media viewer for video from its metadata, etc.\n *\n * @element c4d-lightbox-video-player-composite\n */\n@customElement(`${c4dPrefix}-lightbox-video-player-composite`)\nclass C4DLightboxVideoPlayerComposite extends ModalRenderMixin(\n C4DVideoPlayerComposite\n) {\n /**\n * The handle for the listener of `${c4dPrefix}-expressive-modal-closed` event.\n */\n private _hCloseModal: Handle | null = null;\n\n /**\n * Handles aria state depending on the modal's state.\n */\n private _handleAriaAndHiddenState = () => {\n const { _videoPlayer: videoPlayer } = this;\n const iFrame = videoPlayer?.querySelector('iframe');\n\n // Handles edge case where screen reader still reads video title within iFrame\n try {\n if (this.open) {\n iFrame?.contentWindow?.document\n .querySelector('.topBarContainer')\n ?.removeAttribute('aria-hidden');\n } else {\n iFrame?.contentWindow?.document\n .querySelector('.topBarContainer')\n ?.setAttribute('aria-hidden', 'true');\n }\n } catch (error) {\n // eslint-disable-next-line no-console\n console.log('Failed to access element in iframe');\n throw error;\n }\n\n const { selectorEmbeddedVideoContainer } = this\n .constructor as typeof C4DLightboxVideoPlayerComposite;\n\n const elems = Array.prototype.slice.call(\n videoPlayer?.querySelectorAll(selectorEmbeddedVideoContainer)\n );\n\n elems.forEach((element) => {\n element.toggleAttribute(\n 'hidden',\n (element as HTMLElement).dataset.videoId !== this.videoId\n );\n });\n };\n\n /**\n * The handler of `${c4dPrefix}-expressive-modal-closed` event from `<c4d-expressive-modal>`.\n */\n private _handleCloseModal = () => {\n const { embeddedVideos = {}, videoId } = this;\n const { [videoId]: currentEmbeddedVideo } = embeddedVideos;\n if (currentEmbeddedVideo) {\n currentEmbeddedVideo.sendNotification('doStop');\n }\n this.open = false;\n this._handleAriaAndHiddenState();\n };\n\n // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars\n protected _handleContentStateChange(_: CustomEvent) {}\n\n @HostListener('document:eventContentStateChange')\n protected _handleContentStateChangeDocument = (event: CustomEvent) => {\n const {\n contentState,\n playingMode,\n videoId: requestedVideoId,\n name,\n customVideoDescription,\n } = event.detail;\n if (this.videoCtaLightBox === false) {\n this.videoId = requestedVideoId;\n const { videoId } = this;\n if (\n contentState === VIDEO_PLAYER_CONTENT_STATE.VIDEO &&\n videoId === requestedVideoId &&\n playingMode === VIDEO_PLAYER_PLAYING_MODE.LIGHTBOX\n ) {\n this.customVideoName = name;\n this.open = true;\n this.customVideoDescription = customVideoDescription;\n }\n }\n };\n\n /**\n * The video player.\n */\n protected get _videoPlayer() {\n const { selectorVideoPlayer } = this\n .constructor as typeof C4DLightboxVideoPlayerComposite;\n return (this.modalRenderRoot as Element)?.querySelector?.(\n selectorVideoPlayer\n );\n }\n\n /**\n * `true` if the modal should be open.\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n *\n */\n @property({ attribute: 'custom-video-name' })\n customVideoName?: string;\n\n /**\n *\n */\n @property({ attribute: 'custom-video-description' })\n customVideoDescription?: string;\n\n /**\n * `true` if the modal is rendered for video cta component.\n */\n @property({ type: Boolean, attribute: 'video-cta-lightbox' })\n videoCtaLightBox = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.modalRenderRoot = this.createModalRenderRoot(); // Creates modal render root up-front to hook the event listener\n // Manually hooks the event listeners on the modal render root to make the event names configurable\n this._hCloseModal = on(\n this.modalRenderRoot,\n (this.constructor as typeof C4DLightboxVideoPlayerComposite)\n .eventCloseModal,\n this._handleCloseModal as EventListener\n );\n }\n\n disconnectedCallback() {\n if (this._hCloseModal) {\n this._hCloseModal = this._hCloseModal.release();\n }\n super.disconnectedCallback();\n }\n\n updated(changedProperties) {\n if (changedProperties.has('open') || changedProperties.has('videoId')) {\n const { open, videoId } = this;\n this._activateEmbeddedVideo(!open ? '' : videoId);\n if (videoId) {\n this._loadVideoData?.(videoId);\n if (open) {\n this._embedMedia?.(videoId);\n this._handleAriaAndHiddenState();\n }\n }\n }\n }\n\n renderLightDOM() {\n // In this class we render that in modal instead of in light DOM.\n // Overriding `.renderLightDOM()` here\n // to prevent the parent `<c4d-video-player-composite>` from rendering `<c4d-video-player>` in light DOM.\n return html``;\n }\n\n renderModal() {\n const {\n formatCaption,\n formatDuration,\n customVideoName,\n hideCaption,\n open,\n mediaData = {},\n videoId,\n customVideoDescription,\n } = this;\n const { [videoId]: currentVideoData = {} as MediaData } = mediaData;\n const { description, duration, name } = currentVideoData;\n const videoName = customVideoName || name;\n const videoDescription = customVideoDescription || description;\n return html`\n <c4d-expressive-modal\n ?open=\"${open}\"\n expressive-size=\"full-width\"\n mode=\"lightbox\"\n part=\"modal\">\n <c4d-expressive-modal-close-button\n part=\"close-button\"></c4d-expressive-modal-close-button>\n <c4d-lightbox-video-player\n description=\"${ifDefined(videoDescription)}\"\n duration=\"${ifDefined(duration)}\"\n name=\"${ifDefined(videoName)}\"\n ?hide-caption=\"${hideCaption}\"\n .formatCaption=\"${ifDefined(formatCaption)}\"\n .formatDuration=\"${ifDefined(formatDuration)}\"\n part=\"lightbox-video-player\">\n </c4d-lightbox-video-player>\n </c4d-expressive-modal>\n `;\n }\n\n /**\n * A selector selecting the video player component.\n */\n static get selectorVideoPlayer() {\n return `${c4dPrefix}-lightbox-video-player`;\n }\n\n /**\n * The name of the custom event fired after the modal is closed upon a user gesture.\n */\n static get eventCloseModal() {\n return `${c4dPrefix}-expressive-modal-closed`;\n }\n\n /**\n * A selector selecting the container DOM elements for embedding video.\n */\n static get selectorEmbeddedVideoContainer() {\n return '[data-video-id]';\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 C4DLightboxVideoPlayerComposite;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"lightbox-video-player-composite.js","names":["html","property","on","ifDefined","HostListener","settings","ModalRenderMixin","C4DVideoPlayerComposite","VIDEO_PLAYER_CONTENT_STATE","VIDEO_PLAYER_PLAYING_MODE","styles","carbonElement","customElement","stablePrefix","c4dPrefix","C4DLightboxVideoPlayerComposite","_decorate","_initialize","_ModalRenderMixin","constructor","args","F","d","kind","key","value","_videoPlayer","videoPlayer","iFrame","querySelector","open","_iFrame$contentWindow","contentWindow","document","removeAttribute","_iFrame$contentWindow2","setAttribute","error","console","log","selectorEmbeddedVideoContainer","elems","Array","prototype","slice","call","querySelectorAll","forEach","element","toggleAttribute","dataset","videoId","embeddedVideos","currentEmbeddedVideo","sendNotification","_handleAriaAndHiddenState","_handleContentStateChange","_","decorators","event","contentState","playingMode","requestedVideoId","name","customVideoDescription","detail","videoCtaLightBox","VIDEO","LIGHTBOX","customVideoName","_this$modalRenderRoot","_this$modalRenderRoot2","selectorVideoPlayer","modalRenderRoot","type","Boolean","reflect","attribute","connectedCallback","_superPropGet","createModalRenderRoot","_hCloseModal","eventCloseModal","_handleCloseModal","disconnectedCallback","release","updated","changedProperties","has","_activateEmbeddedVideo","_this$_loadVideoData","_loadVideoData","_this$_embedMedia","_embedMedia","renderLightDOM","_t","_2","renderModal","formatCaption","formatDuration","hideCaption","mediaData","currentVideoData","description","duration","videoName","videoDescription","_t2","static"],"sources":["components/lightbox-media-viewer/lightbox-video-player-composite.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2024\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';\nimport { property } from 'lit/decorators.js';\nimport on from '@carbon/web-components/es/globals/mixins/on.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport { MediaData } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/kalturaPlayerAPI';\nimport ModalRenderMixin from '../../globals/mixins/modal-render';\nimport Handle from '../../globals/internal/handle';\nimport C4DVideoPlayerComposite from '../video-player-v7/video-player-composite';\nimport '../expressive-modal/expressive-modal';\nimport '../expressive-modal/expressive-modal-close-button';\nimport {\n VIDEO_PLAYER_CONTENT_STATE,\n VIDEO_PLAYER_PLAYING_MODE,\n} from '../video-player-v7/video-player';\nimport './lightbox-video-player';\nimport styles from './lightbox-media-viewer.scss';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\nconst { stablePrefix: c4dPrefix } = settings;\n\n/**\n * Component that renders lightbox media viewer for video from its metadata, etc.\n *\n * @element c4d-lightbox-video-player-composite\n */\n@customElement(`${c4dPrefix}-lightbox-video-player-composite`)\nclass C4DLightboxVideoPlayerComposite extends ModalRenderMixin(\n C4DVideoPlayerComposite\n) {\n /**\n * The handle for the listener of `${c4dPrefix}-expressive-modal-closed` event.\n */\n private _hCloseModal: Handle | null = null;\n\n /**\n * Handles aria state depending on the modal's state.\n */\n private _handleAriaAndHiddenState = () => {\n const { _videoPlayer: videoPlayer } = this;\n const iFrame = videoPlayer?.querySelector('iframe');\n\n // Handles edge case where screen reader still reads video title within iFrame\n try {\n if (this.open) {\n iFrame?.contentWindow?.document\n .querySelector('.topBarContainer')\n ?.removeAttribute('aria-hidden');\n } else {\n iFrame?.contentWindow?.document\n .querySelector('.topBarContainer')\n ?.setAttribute('aria-hidden', 'true');\n }\n } catch (error) {\n // eslint-disable-next-line no-console\n console.log('Failed to access element in iframe');\n throw error;\n }\n\n const { selectorEmbeddedVideoContainer } = this\n .constructor as typeof C4DLightboxVideoPlayerComposite;\n\n const elems = Array.prototype.slice.call(\n videoPlayer?.querySelectorAll(selectorEmbeddedVideoContainer)\n );\n\n elems.forEach((element) => {\n element.toggleAttribute(\n 'hidden',\n (element as HTMLElement).dataset.videoId !== this.videoId\n );\n });\n };\n\n /**\n * The handler of `${c4dPrefix}-expressive-modal-closed` event from `<c4d-expressive-modal>`.\n */\n private _handleCloseModal = () => {\n const { embeddedVideos = {}, videoId } = this;\n const { [videoId]: currentEmbeddedVideo } = embeddedVideos;\n if (currentEmbeddedVideo) {\n currentEmbeddedVideo.sendNotification('doStop');\n }\n this.open = false;\n this._handleAriaAndHiddenState();\n };\n\n // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars\n protected _handleContentStateChange(_: CustomEvent) {}\n\n @HostListener('document:eventContentStateChange')\n protected _handleContentStateChangeDocument = (event: CustomEvent) => {\n const {\n contentState,\n playingMode,\n videoId: requestedVideoId,\n name,\n customVideoDescription,\n } = event.detail;\n if (this.videoCtaLightBox === false) {\n this.videoId = requestedVideoId;\n const { videoId } = this;\n if (\n contentState === VIDEO_PLAYER_CONTENT_STATE.VIDEO &&\n videoId === requestedVideoId &&\n playingMode === VIDEO_PLAYER_PLAYING_MODE.LIGHTBOX\n ) {\n this.customVideoName = name;\n this.open = true;\n this.customVideoDescription = customVideoDescription;\n }\n }\n };\n\n /**\n * The video player.\n */\n protected get _videoPlayer() {\n const { selectorVideoPlayer } = this\n .constructor as typeof C4DLightboxVideoPlayerComposite;\n return (this.modalRenderRoot as Element)?.querySelector?.(\n selectorVideoPlayer\n );\n }\n\n /**\n * `true` if the modal should be open.\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n *\n */\n @property({ attribute: 'custom-video-name' })\n customVideoName?: string;\n\n /**\n *\n */\n @property({ attribute: 'custom-video-description' })\n customVideoDescription?: string;\n\n /**\n * `true` if the modal is rendered for video cta component.\n */\n @property({ type: Boolean, attribute: 'video-cta-lightbox' })\n videoCtaLightBox = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.modalRenderRoot = this.createModalRenderRoot(); // Creates modal render root up-front to hook the event listener\n // Manually hooks the event listeners on the modal render root to make the event names configurable\n this._hCloseModal = on(\n this.modalRenderRoot,\n (this.constructor as typeof C4DLightboxVideoPlayerComposite)\n .eventCloseModal,\n this._handleCloseModal as EventListener\n );\n }\n\n disconnectedCallback() {\n if (this._hCloseModal) {\n this._hCloseModal = this._hCloseModal.release();\n }\n super.disconnectedCallback();\n }\n\n updated(changedProperties) {\n if (changedProperties.has('open') || changedProperties.has('videoId')) {\n const { open, videoId } = this;\n this._activateEmbeddedVideo(!open ? '' : videoId);\n if (videoId) {\n this._loadVideoData?.(videoId);\n if (open) {\n this._embedMedia?.(videoId);\n this._handleAriaAndHiddenState();\n }\n }\n }\n }\n\n renderLightDOM() {\n // In this class we render that in modal instead of in light DOM.\n // Overriding `.renderLightDOM()` here\n // to prevent the parent `<c4d-video-player-composite>` from rendering `<c4d-video-player>` in light DOM.\n return html``;\n }\n\n renderModal() {\n const {\n formatCaption,\n formatDuration,\n customVideoName,\n hideCaption,\n open,\n mediaData = {},\n videoId,\n customVideoDescription,\n } = this;\n const { [videoId]: currentVideoData = {} as MediaData } = mediaData;\n const { description, duration, name } = currentVideoData;\n const videoName = customVideoName || name;\n const videoDescription = customVideoDescription || description;\n return html`\n <c4d-expressive-modal\n ?open=\"${open}\"\n expressive-size=\"full-width\"\n mode=\"lightbox\"\n part=\"modal\">\n <c4d-expressive-modal-close-button\n part=\"close-button\"></c4d-expressive-modal-close-button>\n <c4d-lightbox-video-player\n description=\"${ifDefined(videoDescription)}\"\n duration=\"${ifDefined(duration)}\"\n name=\"${ifDefined(videoName)}\"\n ?hide-caption=\"${hideCaption}\"\n .formatCaption=\"${ifDefined(formatCaption)}\"\n .formatDuration=\"${ifDefined(formatDuration)}\"\n part=\"lightbox-video-player\">\n </c4d-lightbox-video-player>\n </c4d-expressive-modal>\n `;\n }\n\n /**\n * A selector selecting the video player component.\n */\n static get selectorVideoPlayer() {\n return `${c4dPrefix}-lightbox-video-player`;\n }\n\n /**\n * The name of the custom event fired after the modal is closed upon a user gesture.\n */\n static get eventCloseModal() {\n return `${c4dPrefix}-expressive-modal-closed`;\n }\n\n /**\n * A selector selecting the container DOM elements for embedding video.\n */\n static get selectorEmbeddedVideoContainer() {\n return '[data-video-id]';\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 C4DLightboxVideoPlayerComposite;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
|
-
import { VideoPlayerContainerState } from '../video-player/video-player-container';
|
|
9
|
+
import { VideoPlayerContainerState } from '../video-player-v7/video-player-container';
|
|
10
10
|
import C4DLightboxVideoPlayerComposite from './lightbox-video-player-composite';
|
|
11
11
|
declare const C4DLightboxVideoPlayerContainer_base: {
|
|
12
12
|
new (...args: any[]): {
|
|
@@ -354,10 +354,10 @@ declare const C4DLightboxVideoPlayerContainer_base: {
|
|
|
354
354
|
lc: string;
|
|
355
355
|
_setRequestEmbedVideoInProgress(videoId: string, request: Promise<any>): void;
|
|
356
356
|
_setErrorRequestEmbedVideo(videoId: string, error: Error): void;
|
|
357
|
-
_setEmbeddedVideo(videoId: string,
|
|
357
|
+
_setEmbeddedVideo(videoId: string, kalturaPlayer: any): void;
|
|
358
358
|
_setAutoplayPreference(preference: boolean): void;
|
|
359
359
|
_getAutoplayPreference(): boolean;
|
|
360
|
-
_getPlayerOptions():
|
|
360
|
+
_getPlayerOptions(): any;
|
|
361
361
|
_embedVideoImpl(videoId: string): Promise<any>;
|
|
362
362
|
_embedMedia: (videoId: string) => Promise<any>;
|
|
363
363
|
firstUpdated(): Promise<void>;
|
|
@@ -11,7 +11,7 @@ import _decorate from "@babel/runtime/helpers/esm/decorate";
|
|
|
11
11
|
import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
|
|
12
12
|
import store from '../../internal/vendor/@carbon/ibmdotcom-services-store/store.js';
|
|
13
13
|
import ConnectMixin from "../../globals/mixins/connect.js";
|
|
14
|
-
import { C4DVideoPlayerContainerMixin, mapStateToProps, mapDispatchToProps } from "../video-player/video-player-container.js";
|
|
14
|
+
import { C4DVideoPlayerContainerMixin, mapStateToProps, mapDispatchToProps } from "../video-player-v7/video-player-container.js";
|
|
15
15
|
import C4DLightboxVideoPlayerComposite from "./lightbox-video-player-composite.js";
|
|
16
16
|
import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
|
|
17
17
|
const {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lightbox-video-player-container.js","names":["settings","store","ConnectMixin","C4DVideoPlayerContainerMixin","mapStateToProps","mapDispatchToProps","C4DLightboxVideoPlayerComposite","carbonElement","customElement","stablePrefix","c4dPrefix","C4DLightboxVideoPlayerContainer","_decorate","_initialize","_ConnectMixin","constructor","args","F","d"],"sources":["components/lightbox-media-viewer/lightbox-video-player-container.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2024\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 { ActionCreatorsMapObject, Store } from 'redux';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport store from '../../internal/vendor/@carbon/ibmdotcom-services-store/store.js';\nimport { MediaPlayerAPIActions } from '../../internal/vendor/@carbon/ibmdotcom-services-store/actions/kalturaPlayerAPI';\nimport ConnectMixin from '../../globals/mixins/connect';\nimport {\n VideoPlayerContainerState,\n VideoPlayerContainerStateProps,\n VideoPlayerActions,\n C4DVideoPlayerContainerMixin,\n mapStateToProps,\n mapDispatchToProps,\n} from '../video-player/video-player-container';\nimport C4DLightboxVideoPlayerComposite from './lightbox-video-player-composite';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\nconst { stablePrefix: c4dPrefix } = settings;\n\n/**\n * Container component for lightbox media viewer, works with video data.\n *\n * @element c4d-lightbox-video-player-container\n */\n@customElement(`${c4dPrefix}-lightbox-video-player-container`)\nclass C4DLightboxVideoPlayerContainer extends ConnectMixin<\n VideoPlayerContainerState,\n MediaPlayerAPIActions,\n VideoPlayerContainerStateProps,\n ActionCreatorsMapObject<VideoPlayerActions>\n>(\n store as Store<VideoPlayerContainerState, MediaPlayerAPIActions>,\n mapStateToProps,\n mapDispatchToProps\n)(C4DVideoPlayerContainerMixin(C4DLightboxVideoPlayerComposite)) {}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default C4DLightboxVideoPlayerContainer;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,OAAOA,QAAQ,MAAM,+DAA+D;AACpF,OAAOC,KAAK,MAAM,iEAAiE;AAEnF,OAAOC,YAAY,MAAM,iCAA8B;AACvD,SAIEC,4BAA4B,EAC5BC,eAAe,EACfC,kBAAkB,QACb,
|
|
1
|
+
{"version":3,"file":"lightbox-video-player-container.js","names":["settings","store","ConnectMixin","C4DVideoPlayerContainerMixin","mapStateToProps","mapDispatchToProps","C4DLightboxVideoPlayerComposite","carbonElement","customElement","stablePrefix","c4dPrefix","C4DLightboxVideoPlayerContainer","_decorate","_initialize","_ConnectMixin","constructor","args","F","d"],"sources":["components/lightbox-media-viewer/lightbox-video-player-container.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2024\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 { ActionCreatorsMapObject, Store } from 'redux';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport store from '../../internal/vendor/@carbon/ibmdotcom-services-store/store.js';\nimport { MediaPlayerAPIActions } from '../../internal/vendor/@carbon/ibmdotcom-services-store/actions/kalturaPlayerAPI';\nimport ConnectMixin from '../../globals/mixins/connect';\nimport {\n VideoPlayerContainerState,\n VideoPlayerContainerStateProps,\n VideoPlayerActions,\n C4DVideoPlayerContainerMixin,\n mapStateToProps,\n mapDispatchToProps,\n} from '../video-player-v7/video-player-container';\nimport C4DLightboxVideoPlayerComposite from './lightbox-video-player-composite';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\nconst { stablePrefix: c4dPrefix } = settings;\n\n/**\n * Container component for lightbox media viewer, works with video data.\n *\n * @element c4d-lightbox-video-player-container\n */\n@customElement(`${c4dPrefix}-lightbox-video-player-container`)\nclass C4DLightboxVideoPlayerContainer extends ConnectMixin<\n VideoPlayerContainerState,\n MediaPlayerAPIActions,\n VideoPlayerContainerStateProps,\n ActionCreatorsMapObject<VideoPlayerActions>\n>(\n store as Store<VideoPlayerContainerState, MediaPlayerAPIActions>,\n mapStateToProps,\n mapDispatchToProps\n)(C4DVideoPlayerContainerMixin(C4DLightboxVideoPlayerComposite)) {}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default C4DLightboxVideoPlayerContainer;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,OAAOA,QAAQ,MAAM,+DAA+D;AACpF,OAAOC,KAAK,MAAM,iEAAiE;AAEnF,OAAOC,YAAY,MAAM,iCAA8B;AACvD,SAIEC,4BAA4B,EAC5BC,eAAe,EACfC,kBAAkB,QACb,8CAA2C;AAClD,OAAOC,+BAA+B,MAAM,sCAAmC;AAC/E,SAASC,aAAa,IAAIC,aAAa,QAAQ,gEAAgE;AAE/G,MAAM;EAAEC,YAAY,EAAEC;AAAU,CAAC,GAAGV,QAAQ;;AAE5C;AACA;AACA;AACA;AACA;AAJA,IAMMW,+BAA+B,GAAAC,SAAA,EADpCJ,aAAa,CAAC,GAAGE,SAAS,kCAAkC,CAAC,aAAAG,WAAA,EAAAC,aAAA;EAA9D,MACMH,+BAA+B,SAAAG,aAAA,CAS4B;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAAC;EAAC;IAAAI,CAAA,EAT7DN,+BAA+B;IAAAO,CAAA;EAAA;AAAA,GAAShB,YAAY,CAMxDD,KAAK,EACLG,eAAe,EACfC,kBACF,CAAC,CAACF,4BAA4B,CAACG,+BAA+B,CAAC,CAAC;AAEhE;AACA,eAAeK,+BAA+B","ignoreList":[]}
|
|
@@ -9,7 +9,7 @@ function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prot
|
|
|
9
9
|
/**
|
|
10
10
|
* @license
|
|
11
11
|
*
|
|
12
|
-
* Copyright IBM Corp. 2020,
|
|
12
|
+
* Copyright IBM Corp. 2020, 2026
|
|
13
13
|
*
|
|
14
14
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
15
15
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -86,9 +86,22 @@ let C4DLightboxVideoPlayer = _decorate([customElement(`${c4dPrefix}-lightbox-vid
|
|
|
86
86
|
const {
|
|
87
87
|
duration,
|
|
88
88
|
formatCaption,
|
|
89
|
-
formatDuration,
|
|
90
89
|
name
|
|
91
90
|
} = this;
|
|
91
|
+
let formattedDuration = '';
|
|
92
|
+
if (duration != null) {
|
|
93
|
+
const totalSeconds = Math.floor(duration);
|
|
94
|
+
const hours = Math.floor(totalSeconds / 3600);
|
|
95
|
+
const minutes = Math.floor(totalSeconds % 3600 / 60);
|
|
96
|
+
const seconds = totalSeconds % 60;
|
|
97
|
+
if (hours > 0) {
|
|
98
|
+
// format as HH:MM:SS
|
|
99
|
+
formattedDuration = `${hours}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
|
100
|
+
} else {
|
|
101
|
+
// formatt as MM:SS
|
|
102
|
+
formattedDuration = `${minutes}:${String(seconds).padStart(2, '0')}`;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
92
105
|
return html(_t3 || (_t3 = _`
|
|
93
106
|
<slot name="title">
|
|
94
107
|
<h2 style="all: inherit;" part="h2">
|
|
@@ -96,9 +109,7 @@ let C4DLightboxVideoPlayer = _decorate([customElement(`${c4dPrefix}-lightbox-vid
|
|
|
96
109
|
</h2>
|
|
97
110
|
</slot>
|
|
98
111
|
`), formatCaption({
|
|
99
|
-
duration:
|
|
100
|
-
duration: !duration ? duration : duration * 1000
|
|
101
|
-
}),
|
|
112
|
+
duration: formattedDuration,
|
|
102
113
|
name
|
|
103
114
|
}));
|
|
104
115
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lightbox-video-player.js","names":["html","property","removeHtmlTagEntities","settings","formatVideoCaption","formatVideoDuration","C4DLightboxMediaViewerBody","carbonElement","customElement","stablePrefix","c4dPrefix","C4DLightboxVideoPlayer","_decorate","_initialize","_C4DLightboxMediaView","constructor","args","F","d","kind","key","value","_renderDescription","description","_t","_","_renderMedia","_t2","_renderTitle","duration","formatCaption","
|
|
1
|
+
{"version":3,"file":"lightbox-video-player.js","names":["html","property","removeHtmlTagEntities","settings","formatVideoCaption","formatVideoDuration","C4DLightboxMediaViewerBody","carbonElement","customElement","stablePrefix","c4dPrefix","C4DLightboxVideoPlayer","_decorate","_initialize","_C4DLightboxMediaView","constructor","args","F","d","kind","key","value","_renderDescription","description","_t","_","_renderMedia","_t2","_renderTitle","duration","formatCaption","name","formattedDuration","totalSeconds","Math","floor","hours","minutes","seconds","String","padStart","_t3","updated","changedProperties","has","setAttribute","connectedCallback","_superPropGet","decorators","type","Number","attribute"],"sources":["components/lightbox-media-viewer/lightbox-video-player.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2026\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';\nimport { property } from 'lit/decorators.js';\nimport removeHtmlTagEntities from '@carbon/ibmdotcom-utilities/es/utilities/removeHtmlTagEntities/removeHtmlTagEntities.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport {\n formatVideoCaption,\n formatVideoDuration,\n} from '@carbon/ibmdotcom-utilities/es/utilities/formatVideoCaption/formatVideoCaption.js';\nimport C4DLightboxMediaViewerBody from './lightbox-media-viewer-body';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\nconst { stablePrefix: c4dPrefix } = settings;\n\n/**\n * The video content of lightbox media viewer.\n *\n * @element c4d-lightbox-video-player\n * @slot title - The title content.\n * @slot description - The description content.\n * @csspart container - The wrapper around the lightbox media. Usage: `c4d-lightbox-video-player::part(container)`\n * @csspart row - The wrapper around the row. Usage: `c4d-lightbox-video-player::part(row)`\n * @csspart media - The wrapper around media. Usage: `c4d-lightbox-video-player::part(media)`\n * @csspart content-wrapper - The wrapper around content. Usage: `c4d-lightbox-video-player::part(content-wrapper)`\n * @csspart content - The inner wrapper around content. Usage: `c4d-lightbox-video-player::part(content)`\n * @csspart title - The title of the media. Usage: `c4d-lightbox-video-player::part(title)`\n * @csspart description - The description of the media. Usage: `c4d-lightbox-video-player::part(description)`\n * @csspart video-player - The wrapper around the video player. Usage: `c4d-lightbox-video-player::part(video-player)`\n * @csspart video-container - The inner wrapper around the slotted video player. Usage: `c4d-lightbox-video-player::part(video-container)`\n * @csspart h2 - The h2 element that holds the title. Usage: `c4d-lightbox-video-player::part(h2)`\n */\n@customElement(`${c4dPrefix}-lightbox-video-player`)\nclass C4DLightboxVideoPlayer extends C4DLightboxMediaViewerBody {\n _renderDescription() {\n const { description } = this;\n return html`\n <slot name=\"description\">${removeHtmlTagEntities(description)}</slot>\n `;\n }\n\n // eslint-disable-next-line class-methods-use-this\n _renderMedia() {\n return html`\n <div class=\"${c4dPrefix}--video-player\" part=\"video-player\">\n <div\n class=\"${c4dPrefix}--video-player__video-container\"\n part=\"video-container\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n _renderTitle() {\n const { duration, formatCaption, name } = this;\n\n let formattedDuration = '';\n\n if (duration != null) {\n const totalSeconds = Math.floor(duration);\n\n const hours = Math.floor(totalSeconds / 3600);\n const minutes = Math.floor((totalSeconds % 3600) / 60);\n const seconds = totalSeconds % 60;\n\n if (hours > 0) {\n // format as HH:MM:SS\n formattedDuration = `${hours}:${String(minutes).padStart(\n 2,\n '0'\n )}:${String(seconds).padStart(2, '0')}`;\n } else {\n // formatt as MM:SS\n formattedDuration = `${minutes}:${String(seconds).padStart(2, '0')}`;\n }\n }\n\n return html`\n <slot name=\"title\">\n <h2 style=\"all: inherit;\" part=\"h2\">\n ${formatCaption({\n duration: formattedDuration,\n name,\n })}\n </h2>\n </slot>\n `;\n }\n\n updated(changedProperties) {\n if (changedProperties.has('name')) {\n this.setAttribute('aria-label', this.name);\n }\n }\n\n connectedCallback() {\n this.setAttribute('role', 'dialog');\n super.connectedCallback();\n }\n\n /**\n * The media description.\n */\n @property()\n description = '';\n\n /**\n * The video duration.\n */\n @property({ type: Number })\n duration?: number;\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 formatCaption = 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 formatDuration = formatVideoDuration;\n\n /**\n * The video name.\n */\n @property()\n name = '';\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default C4DLightboxVideoPlayer;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,KAAK;AAC1B,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,OAAOC,qBAAqB,MAAM,yFAAyF;AAC3H,OAAOC,QAAQ,MAAM,+DAA+D;AACpF,SACEC,kBAAkB,EAClBC,mBAAmB,QACd,mFAAmF;AAC1F,OAAOC,0BAA0B,MAAM,iCAA8B;AACrE,SAASC,aAAa,IAAIC,aAAa,QAAQ,gEAAgE;AAE/G,MAAM;EAAEC,YAAY,EAAEC;AAAU,CAAC,GAAGP,QAAQ;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAhBA,IAkBMQ,sBAAsB,GAAAC,SAAA,EAD3BJ,aAAa,CAAC,GAAGE,SAAS,wBAAwB,CAAC,aAAAG,WAAA,EAAAC,qBAAA;EAApD,MACMH,sBAAsB,SAAAG,qBAAA,CAAoC;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAmGhE;EAAC;IAAAI,CAAA,EAnGKN,sBAAsB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAC1B,SAAAC,kBAAkBA,CAAA,EAAG;QACnB,MAAM;UAAEC;QAAY,CAAC,GAAG,IAAI;QAC5B,OAAOvB,IAAI,CAAAwB,EAAA,KAAAA,EAAA,GAAAC,CAAA;AACf,iCADe;AACf,KADe,GACkBvB,qBAAqB,CAACqB,WAAW,CAAC;MAEjE;;MAEA;IAAA;MAAAJ,IAAA;MAAAC,GAAA;MAAAC,KAAA,EACA,SAAAK,YAAYA,CAAA,EAAG;QACb,OAAO1B,IAAI,CAAA2B,GAAA,KAAAA,GAAA,GAAAF,CAAA;AACf,oBADe;AACf;AACA,mBAFe;AACf;AACA;AACA;AACA;AACA,KALe,GACKf,SAAS,EAEVA,SAAS;MAM1B;IAAC;MAAAS,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAAO,YAAYA,CAAA,EAAG;QACb,MAAM;UAAEC,QAAQ;UAAEC,aAAa;UAAEC;QAAK,CAAC,GAAG,IAAI;QAE9C,IAAIC,iBAAiB,GAAG,EAAE;QAE1B,IAAIH,QAAQ,IAAI,IAAI,EAAE;UACpB,MAAMI,YAAY,GAAGC,IAAI,CAACC,KAAK,CAACN,QAAQ,CAAC;UAEzC,MAAMO,KAAK,GAAGF,IAAI,CAACC,KAAK,CAACF,YAAY,GAAG,IAAI,CAAC;UAC7C,MAAMI,OAAO,GAAGH,IAAI,CAACC,KAAK,CAAEF,YAAY,GAAG,IAAI,GAAI,EAAE,CAAC;UACtD,MAAMK,OAAO,GAAGL,YAAY,GAAG,EAAE;UAEjC,IAAIG,KAAK,GAAG,CAAC,EAAE;YACb;YACAJ,iBAAiB,GAAG,GAAGI,KAAK,IAAIG,MAAM,CAACF,OAAO,CAAC,CAACG,QAAQ,CACtD,CAAC,EACD,GACF,CAAC,IAAID,MAAM,CAACD,OAAO,CAAC,CAACE,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE;UACzC,CAAC,MAAM;YACL;YACAR,iBAAiB,GAAG,GAAGK,OAAO,IAAIE,MAAM,CAACD,OAAO,CAAC,CAACE,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE;UACtE;QACF;QAEA,OAAOxC,IAAI,CAAAyC,GAAA,KAAAA,GAAA,GAAAhB,CAAA;AACf;AACA;AACA,YAHe;AACf;AACA;AACA,KAHe,GAGHK,aAAa,CAAC;UACdD,QAAQ,EAAEG,iBAAiB;UAC3BD;QACF,CAAC,CAAC;MAIV;IAAC;MAAAZ,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAAqB,OAAOA,CAACC,iBAAiB,EAAE;QACzB,IAAIA,iBAAiB,CAACC,GAAG,CAAC,MAAM,CAAC,EAAE;UACjC,IAAI,CAACC,YAAY,CAAC,YAAY,EAAE,IAAI,CAACd,IAAI,CAAC;QAC5C;MACF;IAAC;MAAAZ,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAAyB,iBAAiBA,CAAA,EAAG;QAClB,IAAI,CAACD,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC;QACnCE,aAAA,CAjEEpC,sBAAsB;MAkE1B;;MAEA;AACF;AACA;IAFE;MAAAQ,IAAA;MAAA6B,UAAA,GAGC/C,QAAQ,CAAC,CAAC;MAAAmB,GAAA;MAAAC,MAAA;QAAA,OACG,EAAE;MAAA;IAAA;MAAAF,IAAA;MAAA6B,UAAA,GAKf/C,QAAQ,CAAC;QAAEgD,IAAI,EAAEC;MAAO,CAAC,CAAC;MAAA9B,GAAA;MAAAC,KAAA;IAAA;MAAAF,IAAA;MAAA6B,UAAA,GAO1B/C,QAAQ,CAAC;QAAEkD,SAAS,EAAE;MAAM,CAAC,CAAC;MAAA/B,GAAA;MAAAC,MAAA;QAAA,OACfjB,kBAAkB;MAAA;IAAA;MAAAe,IAAA;MAAA6B,UAAA,GAMjC/C,QAAQ,CAAC;QAAEkD,SAAS,EAAE;MAAM,CAAC,CAAC;MAAA/B,GAAA;MAAAC,MAAA;QAAA,OACdhB,mBAAmB;MAAA;IAAA;MAAAc,IAAA;MAAA6B,UAAA,GAKnC/C,QAAQ,CAAC,CAAC;MAAAmB,GAAA;MAAAC,MAAA;QAAA,OACJ,EAAE;MAAA;IAAA;EAAA;AAAA,GAlG0Bf,0BAA0B;AAqG/D;AACA,eAAeK,sBAAsB","ignoreList":[]}
|
|
@@ -371,19 +371,6 @@ declare class C4DMastheadCart extends C4DMastheadCart_base {
|
|
|
371
371
|
cc: string;
|
|
372
372
|
};
|
|
373
373
|
connectedCallback(): void;
|
|
374
|
-
disconnectedCallback(): void;
|
|
375
|
-
/**
|
|
376
|
-
* Updates cart state
|
|
377
|
-
*/
|
|
378
|
-
updateCart: () => void;
|
|
379
|
-
/**
|
|
380
|
-
* Checks if the user has an active cart and retries a few times if the cart cookie is not available yet.
|
|
381
|
-
*/
|
|
382
|
-
checkCartWithRetry(retries?: number, delay?: number): void;
|
|
383
|
-
/**
|
|
384
|
-
* Filter the correct checkout URL based on locale and country code.
|
|
385
|
-
*/
|
|
386
|
-
handleURL(cc: string, lc: string): string;
|
|
387
374
|
updated(changedProperties: any): void;
|
|
388
375
|
render(): import("lit-html").TemplateResult<1>;
|
|
389
376
|
static get stableSelector(): string;
|
|
@@ -93,82 +93,14 @@ let C4DMastheadCart = _decorate([customElement(`${c4dPrefix}-masthead-cart`)], f
|
|
|
93
93
|
|
|
94
94
|
function connectedCallback() {
|
|
95
95
|
_superPropGet(C4DMastheadCart, "connectedCallback", this, 3)([]);
|
|
96
|
+
// Check the relevant cookie for whether the user has an active cart.
|
|
97
|
+
this.hasActiveCart = SAPCommerceAPI.hasActiveCart();
|
|
96
98
|
|
|
97
|
-
//
|
|
98
|
-
this.updateCart();
|
|
99
|
-
|
|
100
|
-
// Fallback retry
|
|
101
|
-
this.checkCartWithRetry();
|
|
102
|
-
|
|
103
|
-
// Listen for cross-tab updates
|
|
104
|
-
window.addEventListener('storage', this.updateCart);
|
|
105
|
-
|
|
106
|
-
// Fetch locale
|
|
99
|
+
// Fetch the locale for the page.
|
|
107
100
|
LocaleAPI.getLocale().then(locale => {
|
|
108
101
|
this.locale = locale;
|
|
109
102
|
});
|
|
110
103
|
}
|
|
111
|
-
}, {
|
|
112
|
-
kind: "method",
|
|
113
|
-
key: "disconnectedCallback",
|
|
114
|
-
value: function disconnectedCallback() {
|
|
115
|
-
_superPropGet(C4DMastheadCart, "disconnectedCallback", this, 3)([]);
|
|
116
|
-
window.removeEventListener('storage', this.updateCart);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/**
|
|
120
|
-
* Updates cart state
|
|
121
|
-
*/
|
|
122
|
-
}, {
|
|
123
|
-
kind: "field",
|
|
124
|
-
key: "updateCart",
|
|
125
|
-
value() {
|
|
126
|
-
return () => {
|
|
127
|
-
console.log('Checking for activeCartId...');
|
|
128
|
-
const hasCart = SAPCommerceAPI.hasActiveCart();
|
|
129
|
-
this.hasActiveCart = hasCart;
|
|
130
|
-
};
|
|
131
|
-
}
|
|
132
|
-
}, {
|
|
133
|
-
kind: "method",
|
|
134
|
-
key: "checkCartWithRetry",
|
|
135
|
-
value:
|
|
136
|
-
/**
|
|
137
|
-
* Checks if the user has an active cart and retries a few times if the cart cookie is not available yet.
|
|
138
|
-
*/
|
|
139
|
-
function checkCartWithRetry(retries = 5, delay = 200) {
|
|
140
|
-
const check = () => {
|
|
141
|
-
const hasCart = SAPCommerceAPI.hasActiveCart();
|
|
142
|
-
if (hasCart) {
|
|
143
|
-
this.hasActiveCart = true;
|
|
144
|
-
return;
|
|
145
|
-
}
|
|
146
|
-
if (retries > 0) {
|
|
147
|
-
retries--;
|
|
148
|
-
setTimeout(check, delay);
|
|
149
|
-
}
|
|
150
|
-
};
|
|
151
|
-
check();
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
/**
|
|
155
|
-
* Filter the correct checkout URL based on locale and country code.
|
|
156
|
-
*/
|
|
157
|
-
}, {
|
|
158
|
-
kind: "method",
|
|
159
|
-
key: "handleURL",
|
|
160
|
-
value: function handleURL(cc, lc) {
|
|
161
|
-
switch (cc) {
|
|
162
|
-
case 'uk':
|
|
163
|
-
return `/store/en/gb/checkout`;
|
|
164
|
-
case 'ae':
|
|
165
|
-
return `/store/en/ae/checkout`;
|
|
166
|
-
case 'sa':
|
|
167
|
-
return `/store/en/sa/checkout`;
|
|
168
|
-
default:
|
|
169
|
-
return `/store/${lc}/${cc}/checkout`;
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
104
|
}, {
|
|
173
105
|
kind: "method",
|
|
174
106
|
key: "updated",
|
|
@@ -192,6 +124,17 @@ let C4DMastheadCart = _decorate([customElement(`${c4dPrefix}-masthead-cart`)], f
|
|
|
192
124
|
lc
|
|
193
125
|
}
|
|
194
126
|
} = this;
|
|
127
|
+
let href;
|
|
128
|
+
if (cc === 'uk') {
|
|
129
|
+
href = '/store/en/gb/checkout';
|
|
130
|
+
} else if (cc === 'ae') {
|
|
131
|
+
href = '/store/en/ae/checkout';
|
|
132
|
+
} else if (cc === 'sa') {
|
|
133
|
+
href = '/store/en/sa/checkout';
|
|
134
|
+
} else {
|
|
135
|
+
href = `/store/${lc}/${cc}/checkout`;
|
|
136
|
+
}
|
|
137
|
+
console.log(href);
|
|
195
138
|
return html(_t || (_t = _`
|
|
196
139
|
<a
|
|
197
140
|
part="cart-link"
|
|
@@ -200,7 +143,7 @@ let C4DMastheadCart = _decorate([customElement(`${c4dPrefix}-masthead-cart`)], f
|
|
|
200
143
|
aria-label="${0}"
|
|
201
144
|
>${0}</a
|
|
202
145
|
>
|
|
203
|
-
`),
|
|
146
|
+
`), href, prefix, prefix, linkLabel, ShoppingCart20());
|
|
204
147
|
}
|
|
205
148
|
}, {
|
|
206
149
|
kind: "get",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"masthead-cart.js","names":["StableSelectorMixin","html","LitElement","property","state","settings","carbonElement","customElement","ShoppingCart20","styles","LocaleAPI","SAPCommerceAPI","prefix","stablePrefix","c4dPrefix","C4DMastheadCart","_decorate","_initialize","_StableSelectorMixin","constructor","args","F","d","kind","decorators","attribute","key","value","lc","cc","connectedCallback","_superPropGet","
|
|
1
|
+
{"version":3,"file":"masthead-cart.js","names":["StableSelectorMixin","html","LitElement","property","state","settings","carbonElement","customElement","ShoppingCart20","styles","LocaleAPI","SAPCommerceAPI","prefix","stablePrefix","c4dPrefix","C4DMastheadCart","_decorate","_initialize","_StableSelectorMixin","constructor","args","F","d","kind","decorators","attribute","key","value","lc","cc","connectedCallback","_superPropGet","hasActiveCart","getLocale","then","locale","updated","changedProperties","has","hidden","render","linkLabel","href","console","log","_t","_","static"],"sources":["components/masthead/masthead-cart.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2024, 2026\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 StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport ShoppingCart20 from '@carbon/web-components/es/icons/shopping--cart/20.js';\nimport styles from './masthead.scss';\nimport LocaleAPI from '@carbon/ibmdotcom-services/es/services/Locale/Locale.js';\nimport SAPCommerceAPI from '@carbon/ibmdotcom-services/es/services/SAPCommerce/SAPCommerce.js';\n\nconst { prefix, stablePrefix: c4dPrefix } = settings;\n\n/**\n * The Cart icon in the masthead.\n *\n * @element c4d-masthead-cart\n * @csspart cart-link - The masthead cart link. Usage: `c4d-masthead-cart::part(cart-link)`\n */\n@customElement(`${c4dPrefix}-masthead-cart`)\nclass C4DMastheadCart extends StableSelectorMixin(LitElement) {\n /**\n * The `aria-label` attribute for the link.\n */\n @property({ attribute: 'link-label' })\n linkLabel = 'Cart';\n\n /**\n * Tracks whether the user has an active cart to control the display.\n */\n @state()\n hasActiveCart = false;\n\n /**\n * Store the locale. Defaults to en-us.\n */\n @state()\n locale = { lc: 'en', cc: 'us' };\n\n connectedCallback() {\n super.connectedCallback();\n // Check the relevant cookie for whether the user has an active cart.\n this.hasActiveCart = SAPCommerceAPI.hasActiveCart();\n\n // Fetch the locale for the page.\n LocaleAPI.getLocale().then((locale) => {\n this.locale = locale;\n });\n }\n\n updated(changedProperties) {\n super.updated(changedProperties);\n const { hasActiveCart } = this;\n if (changedProperties.has('hasActiveCart')) {\n this.hidden = !hasActiveCart;\n }\n }\n\n render() {\n const {\n linkLabel,\n locale: { cc, lc },\n } = this;\n\n let href;\n\n if (cc === 'uk') {\n href = '/store/en/gb/checkout';\n } else if (cc === 'ae') {\n href = '/store/en/ae/checkout';\n } else if (cc === 'sa') {\n href = '/store/en/sa/checkout';\n } else {\n href = `/store/${lc}/${cc}/checkout`;\n }\n\n console.log(href);\n\n return html`\n <a\n part=\"cart-link\"\n href=\"${href}\"\n class=\"${prefix}--header__menu-item ${prefix}--header__menu-title\"\n aria-label=\"${linkLabel}\"\n >${ShoppingCart20()}</a\n >\n `;\n }\n\n static get stableSelector() {\n return `${c4dPrefix}--masthead-cart`;\n }\n\n static styles = styles;\n}\n\nexport default C4DMastheadCart;\n"],"mappings":"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","ignoreList":[]}
|