@carbon/ibmdotcom-web-components 2.50.0 → 2.51.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 +7 -2
- package/dist/dotcom-shell.js +1 -1
- package/dist/dotcom-shell.min.js +1 -1
- package/dist/ibmdotcom-web-components-dotcom-shell.js +1 -1
- package/dist/ibmdotcom-web-components-dotcom-shell.min.js +1 -1
- package/dist/{index-514478b8.js → index-378e695a.js} +220 -94
- package/dist/{index-9732faeb.js → index-e8da1f64.js} +330 -324
- package/dist/{left-nav-menu-2f5322ac.js → left-nav-menu-7afd3489.js} +1 -1
- package/dist/{left-nav-menu-746ad81a.js → left-nav-menu-a30b7586.js} +1 -1
- package/dist/{left-nav-menu-category-heading-22762753.js → left-nav-menu-category-heading-1cc6f53b.js} +1 -1
- package/dist/{left-nav-menu-category-heading-0e98a8c6.js → left-nav-menu-category-heading-86f9b8b1.js} +1 -1
- package/dist/{left-nav-menu-item-a08c2ca0.js → left-nav-menu-item-58ba2f40.js} +1 -1
- package/dist/{left-nav-menu-item-252b6d0e.js → left-nav-menu-item-bba9ffad.js} +1 -1
- package/dist/{left-nav-menu-section-a6f52f70.js → left-nav-menu-section-311eab0b.js} +1 -1
- package/dist/{left-nav-menu-section-40ae6c75.js → left-nav-menu-section-75d1d952.js} +1 -1
- package/dist/{left-nav-overlay-6f936f5f.js → left-nav-overlay-83e00d5c.js} +1 -1
- package/dist/{left-nav-overlay-dfce57ab.js → left-nav-overlay-da8a776f.js} +1 -1
- package/dist/{megamenu-category-group-fe150fbc.js → megamenu-category-group-369b0922.js} +1 -1
- package/dist/{megamenu-category-group-copy-1e261d94.js → megamenu-category-group-copy-33e70c67.js} +1 -1
- package/dist/{megamenu-category-group-copy-419d6ebe.js → megamenu-category-group-copy-97d6b9b7.js} +1 -1
- package/dist/{megamenu-category-group-b63f1f2d.js → megamenu-category-group-fcf8d5ab.js} +1 -1
- package/dist/{megamenu-category-heading-46c39931.js → megamenu-category-heading-093efb47.js} +1 -1
- package/dist/{megamenu-category-heading-9c2eccbf.js → megamenu-category-heading-39694e3f.js} +1 -1
- package/dist/{megamenu-category-link-986b3de3.js → megamenu-category-link-c0931241.js} +1 -1
- package/dist/{megamenu-category-link-7fa288d5.js → megamenu-category-link-c71dbc10.js} +1 -1
- package/dist/{megamenu-category-link-group-1392a46f.js → megamenu-category-link-group-fb586779.js} +1 -1
- package/dist/{megamenu-category-link-group-f76ba2ac.js → megamenu-category-link-group-fce4b6b1.js} +1 -1
- package/dist/{megamenu-left-navigation-55ebdf48.js → megamenu-left-navigation-bb4c3166.js} +1 -1
- package/dist/{megamenu-left-navigation-eb44aef8.js → megamenu-left-navigation-e01bb2d1.js} +1 -1
- package/dist/{megamenu-overlay-c4637474.js → megamenu-overlay-41b74260.js} +1 -1
- package/dist/{megamenu-overlay-5c4848c7.js → megamenu-overlay-c81a5cce.js} +1 -1
- package/dist/{megamenu-tab-c2772b72.js → megamenu-tab-7b45e4b8.js} +1 -1
- package/dist/{megamenu-tab-b48fbb7c.js → megamenu-tab-d3445c0a.js} +1 -1
- package/es/components/back-to-top/__stories__/back-to-top.stories.css.js +1 -1
- package/es/components/card/card.css.js +1 -1
- package/es/components/card/card.d.ts +1 -1
- package/es/components/card/card.js +8 -2
- package/es/components/card/card.js.map +1 -1
- package/es/components/card-group/card-group-item.d.ts +3 -1
- package/es/components/card-group/card-group-item.js +21 -1
- package/es/components/card-group/card-group-item.js.map +1 -1
- package/es/components/card-group/card-group.css.js +1 -1
- package/es/components/card-section-offset/card-section-offset.css.js +1 -1
- package/es/components/card-section-simple/card-section-simple.css.js +1 -1
- package/es/components/content-block/content-block.css.js +1 -1
- package/es/components/content-block-cards/content-block-cards.css.js +1 -1
- package/es/components/content-block-media/content-block-media.css.js +1 -1
- package/es/components/content-section/content-section.css.js +1 -1
- package/es/components/cta-block/cta-block.css.js +1 -1
- package/es/components/cta-section/cta-section.css.js +1 -1
- package/es/components/dotcom-shell/dotcom-shell.css.js +1 -1
- package/es/components/footer/footer.css.js +1 -1
- package/es/components/global-banner/global-banner.css.js +1 -1
- package/es/components/leadspace/leadspace.css.js +1 -1
- package/es/components/leadspace-with-search/leadspace-with-search.css.js +1 -1
- package/es/components/lightbox-media-viewer/lightbox-image-viewer.d.ts +3 -0
- package/es/components/lightbox-media-viewer/lightbox-image-viewer.js +28 -1
- package/es/components/lightbox-media-viewer/lightbox-image-viewer.js.map +1 -1
- package/es/components/lightbox-media-viewer/lightbox-media-viewer-body.d.ts +1 -1
- package/es/components/lightbox-media-viewer/lightbox-media-viewer-body.js +3 -6
- 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 +1 -0
- package/es/components/lightbox-media-viewer/lightbox-media-viewer.js +2 -1
- package/es/components/lightbox-media-viewer/lightbox-media-viewer.js.map +1 -1
- package/es/components/lightbox-media-viewer/lightbox-video-player.d.ts +2 -0
- package/es/components/lightbox-media-viewer/lightbox-video-player.js +10 -6
- package/es/components/lightbox-media-viewer/lightbox-video-player.js.map +1 -1
- package/es/components/link-list-section/link-list-section.css.js +1 -1
- package/es/components/locale-modal/locale-modal.css.js +1 -1
- package/es/components/masthead/masthead-cart.js +4 -1
- package/es/components/masthead/masthead-cart.js.map +1 -1
- package/es/components/masthead/masthead-l1.css.js +1 -1
- package/es/components/masthead/masthead.css.js +1 -1
- package/es/components/notice-choice/notice-choice.d.ts +1 -0
- package/es/components/notice-choice/notice-choice.js +22 -9
- package/es/components/notice-choice/notice-choice.js.map +1 -1
- package/es/components/notice-choice/services.d.ts +1 -1
- package/es/components/notice-choice/services.js +3 -2
- package/es/components/notice-choice/services.js.map +1 -1
- package/es/components/table-of-contents/table-of-contents-cdn.css.js +1 -1
- package/es/components/table-of-contents/table-of-contents.css.js +1 -1
- package/es/globals/scss/themes.css.js +1 -1
- package/package.json +6 -6
- package/scss/components/card/card.scss +17 -1
- package/scss/components/card-group/card-group.scss +17 -1
|
@@ -28,6 +28,7 @@ declare class C4DLightboxImageViewer extends C4DLightboxMediaViewerBody {
|
|
|
28
28
|
_renderDescription(): import("lit-html").TemplateResult<1>;
|
|
29
29
|
_renderMedia(): import("lit-html").TemplateResult<1>;
|
|
30
30
|
_renderTitle(): import("lit-html").TemplateResult<1>;
|
|
31
|
+
_renderCTAs(): import("lit-html").TemplateResult<1>;
|
|
31
32
|
/**
|
|
32
33
|
* The alternate text.
|
|
33
34
|
*/
|
|
@@ -44,6 +45,8 @@ declare class C4DLightboxImageViewer extends C4DLightboxMediaViewerBody {
|
|
|
44
45
|
* The media title.
|
|
45
46
|
*/
|
|
46
47
|
title: string;
|
|
48
|
+
private _ctaContents?;
|
|
49
|
+
connectedCallback(): void;
|
|
47
50
|
}
|
|
48
51
|
export default C4DLightboxImageViewer;
|
|
49
52
|
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import _decorate from "@babel/runtime/helpers/esm/decorate";
|
|
2
|
+
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
3
|
+
import _get from "@babel/runtime/helpers/esm/get";
|
|
2
4
|
let _ = t => t,
|
|
3
5
|
_t,
|
|
4
6
|
_t2,
|
|
5
|
-
_t3
|
|
7
|
+
_t3,
|
|
8
|
+
_t4;
|
|
9
|
+
function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
|
|
6
10
|
/**
|
|
7
11
|
* @license
|
|
8
12
|
*
|
|
@@ -85,6 +89,12 @@ let C4DLightboxImageViewer = _decorate([customElement(`${c4dPrefix}-lightbox-ima
|
|
|
85
89
|
} = this;
|
|
86
90
|
return html(_t3 || (_t3 = _` <slot name="title">${0}</slot> `), title);
|
|
87
91
|
}
|
|
92
|
+
}, {
|
|
93
|
+
kind: "method",
|
|
94
|
+
key: "_renderCTAs",
|
|
95
|
+
value: function _renderCTAs() {
|
|
96
|
+
return html(_t4 || (_t4 = _` <slot name="cta">${0}</slot> `), this._ctaContents);
|
|
97
|
+
}
|
|
88
98
|
|
|
89
99
|
/**
|
|
90
100
|
* The alternate text.
|
|
@@ -119,6 +129,23 @@ let C4DLightboxImageViewer = _decorate([customElement(`${c4dPrefix}-lightbox-ima
|
|
|
119
129
|
value() {
|
|
120
130
|
return '';
|
|
121
131
|
}
|
|
132
|
+
}, {
|
|
133
|
+
kind: "method",
|
|
134
|
+
key: "connectedCallback",
|
|
135
|
+
value:
|
|
136
|
+
/**
|
|
137
|
+
* The image source.
|
|
138
|
+
*/
|
|
139
|
+
/**
|
|
140
|
+
* The media description.
|
|
141
|
+
*/
|
|
142
|
+
/**
|
|
143
|
+
* The media title.
|
|
144
|
+
*/
|
|
145
|
+
function connectedCallback() {
|
|
146
|
+
_superPropGet(C4DLightboxImageViewer, "connectedCallback", this, 3)([]);
|
|
147
|
+
this._ctaContents = this.querySelector('[slot="cta"]') || undefined;
|
|
148
|
+
}
|
|
122
149
|
}]
|
|
123
150
|
};
|
|
124
151
|
}, C4DLightboxMediaViewerBody);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lightbox-image-viewer.js","names":["html","property","ifDefined","settings","C4DLightboxMediaViewerBody","carbonElement","customElement","stablePrefix","c4dPrefix","C4DLightboxImageViewer","_decorate","_initialize","_C4DLightboxMediaView","constructor","args","F","d","kind","key","value","_renderDescription","description","_t","_","_renderMedia","alt","defaultSrc","_t2","_renderTitle","title","_t3","decorators","attribute"],"sources":["components/lightbox-media-viewer/lightbox-image-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 } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport C4DLightboxMediaViewerBody from './lightbox-media-viewer-body';\nimport '../expressive-modal/expressive-modal';\nimport '../expressive-modal/expressive-modal-close-button';\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-image-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 image - The image displayed in the lightbox image viewer. Usage: `c4d-lightbox-video-player::part(image)`\n */\n@customElement(`${c4dPrefix}-lightbox-image-viewer`)\nclass C4DLightboxImageViewer extends C4DLightboxMediaViewerBody {\n _renderDescription() {\n const { description } = this;\n return html` <slot name=\"description\">${description}</slot> `;\n }\n\n // eslint-disable-next-line class-methods-use-this\n _renderMedia() {\n const { alt, defaultSrc } = this;\n return html`\n <img\n class=\"${c4dPrefix}--image__img\"\n alt=\"${ifDefined(alt)}\"\n src=\"${ifDefined(defaultSrc)}\"\n loading=\"lazy\"\n part=\"image\" />\n `;\n }\n\n _renderTitle() {\n const { title } = this;\n return html` <slot name=\"title\">${title}</slot> `;\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\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default C4DLightboxImageViewer;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"lightbox-image-viewer.js","names":["html","property","ifDefined","settings","C4DLightboxMediaViewerBody","carbonElement","customElement","stablePrefix","c4dPrefix","C4DLightboxImageViewer","_decorate","_initialize","_C4DLightboxMediaView","constructor","args","F","d","kind","key","value","_renderDescription","description","_t","_","_renderMedia","alt","defaultSrc","_t2","_renderTitle","title","_t3","_renderCTAs","_t4","_ctaContents","decorators","attribute","connectedCallback","_superPropGet","querySelector","undefined"],"sources":["components/lightbox-media-viewer/lightbox-image-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 } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport C4DLightboxMediaViewerBody from './lightbox-media-viewer-body';\nimport '../expressive-modal/expressive-modal';\nimport '../expressive-modal/expressive-modal-close-button';\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-image-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 image - The image displayed in the lightbox image viewer. Usage: `c4d-lightbox-video-player::part(image)`\n */\n@customElement(`${c4dPrefix}-lightbox-image-viewer`)\nclass C4DLightboxImageViewer extends C4DLightboxMediaViewerBody {\n _renderDescription() {\n const { description } = this;\n return html` <slot name=\"description\">${description}</slot> `;\n }\n\n // eslint-disable-next-line class-methods-use-this\n _renderMedia() {\n const { alt, defaultSrc } = this;\n return html`\n <img\n class=\"${c4dPrefix}--image__img\"\n alt=\"${ifDefined(alt)}\"\n src=\"${ifDefined(defaultSrc)}\"\n loading=\"lazy\"\n part=\"image\" />\n `;\n }\n\n _renderTitle() {\n const { title } = this;\n return html` <slot name=\"title\">${title}</slot> `;\n }\n\n _renderCTAs() {\n return html` <slot name=\"cta\">${this._ctaContents}</slot> `;\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 private _ctaContents?: HTMLElement;\n\n connectedCallback() {\n super.connectedCallback();\n this._ctaContents = this.querySelector('[slot=\"cta\"]') || undefined;\n }\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default C4DLightboxImageViewer;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -355,7 +355,7 @@ declare abstract class C4DLightboxMediaViewerBody extends C4DLightboxMediaViewer
|
|
|
355
355
|
/**
|
|
356
356
|
* @returns The CTA content.
|
|
357
357
|
*/
|
|
358
|
-
_renderCTAs(): TemplateResult | string | void;
|
|
358
|
+
abstract _renderCTAs(): TemplateResult | string | void;
|
|
359
359
|
render(): TemplateResult<1>;
|
|
360
360
|
static styles: any;
|
|
361
361
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
2
|
let _ = t => t,
|
|
3
|
-
_t
|
|
4
|
-
_t2;
|
|
3
|
+
_t;
|
|
5
4
|
/**
|
|
6
5
|
* @license
|
|
7
6
|
*
|
|
@@ -38,11 +37,9 @@ class C4DLightboxMediaViewerBody extends FocusMixin(LitElement) {
|
|
|
38
37
|
/**
|
|
39
38
|
* @returns The CTA content.
|
|
40
39
|
*/
|
|
41
|
-
|
|
42
|
-
return html(_t || (_t = _`<slot name="cta"></slot>`));
|
|
43
|
-
}
|
|
40
|
+
|
|
44
41
|
render() {
|
|
45
|
-
return html(
|
|
42
|
+
return html(_t || (_t = _`
|
|
46
43
|
<div
|
|
47
44
|
class="${0}--lightbox-media-viewer__container"
|
|
48
45
|
part="container">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lightbox-media-viewer-body.js","names":["html","LitElement","FocusMixin","settings","styles","stablePrefix","c4dPrefix","C4DLightboxMediaViewerBody","
|
|
1
|
+
{"version":3,"file":"lightbox-media-viewer-body.js","names":["html","LitElement","FocusMixin","settings","styles","stablePrefix","c4dPrefix","C4DLightboxMediaViewerBody","render","_t","_","_renderMedia","_renderTitle","_renderDescription","_renderCTAs","_defineProperty"],"sources":["components/lightbox-media-viewer/lightbox-media-viewer-body.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, LitElement, TemplateResult } from 'lit';\nimport FocusMixin from '@carbon/web-components/es/globals/mixins/focus.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport styles from './lightbox-media-viewer.scss';\n\nconst { stablePrefix: c4dPrefix } = settings;\n\n/**\n * Media viewer modal body.\n */\nabstract class C4DLightboxMediaViewerBody extends FocusMixin(LitElement) {\n /**\n * @returns The description content.\n */\n abstract _renderDescription(): TemplateResult | string | void;\n\n /**\n * @returns The media content.\n */\n abstract _renderMedia(): TemplateResult | string | void;\n\n /**\n * @returns The title content.\n */\n abstract _renderTitle(): TemplateResult | string | void;\n\n /**\n * @returns The CTA content.\n */\n abstract _renderCTAs(): TemplateResult | string | void;\n\n render() {\n return html`\n <div\n class=\"${c4dPrefix}--lightbox-media-viewer__container\"\n part=\"container\">\n <div class=\"${c4dPrefix}--lightbox-media-viewer__row\" part=\"row\">\n <div class=\"${c4dPrefix}--lightbox-media-viewer__media\" part=\"media\">\n ${this._renderMedia()}\n </div>\n <div\n class=\"${c4dPrefix}--lightbox-media-viewer__media-description\"\n part=\"content-wrapper\">\n <div\n class=\"${c4dPrefix}--lightbox-media-viewer__content\"\n part=\"content\">\n <div\n part=\"title\"\n class=\"${c4dPrefix}--lightbox-media-viewer__content__title\"\n data-autoid=\"${c4dPrefix}--lightbox-media-viewer__content__title\">\n ${this._renderTitle()}\n </div>\n <div\n part=\"description\"\n class=\"${c4dPrefix}--lightbox-media-viewer__content__desc\"\n data-autoid=\"${c4dPrefix}--lightbox-media-viewer__content__desc\">\n ${this._renderDescription()}\n </div>\n <div\n part=\"cta\"\n class=\"${c4dPrefix}--lightbox-media-viewer__content__cta\"\n data-autoid=\"${c4dPrefix}--lightbox-media-viewer__content__cta\">\n ${this._renderCTAs()}\n </div>\n </div>\n </div>\n </div>\n </div>\n `;\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 C4DLightboxMediaViewerBody;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,UAAU,QAAwB,KAAK;AACtD,OAAOC,UAAU,MAAM,mDAAmD;AAC1E,OAAOC,QAAQ,MAAM,+DAA+D;AACpF,OAAOC,MAAM,MAAM,kCAA8B;AAEjD,MAAM;EAAEC,YAAY,EAAEC;AAAU,CAAC,GAAGH,QAAQ;;AAE5C;AACA;AACA;AACA,MAAeI,0BAA0B,SAASL,UAAU,CAACD,UAAU,CAAC,CAAC;EACvE;AACF;AACA;;EAGE;AACF;AACA;;EAGE;AACF;AACA;;EAGE;AACF;AACA;;EAGEO,MAAMA,CAAA,EAAG;IACP,OAAOR,IAAI,CAAAS,EAAA,KAAAA,EAAA,GAAAC,CAAA;AACf;AACA,iBAFe;AACf;AACA,sBAFe;AACf,wBADe;AACf,cADe;AACf;AACA;AACA,qBAHe;AACf;AACA;AACA,uBAHe;AACf;AACA;AACA;AACA,yBAJe;AACf,+BADe;AACf,kBADe;AACf;AACA;AACA;AACA,yBAJe;AACf,+BADe;AACf,kBADe;AACf;AACA;AACA;AACA,yBAJe;AACf,+BADe;AACf,kBADe;AACf;AACA;AACA;AACA;AACA;AACA,KANe,GAEEJ,SAAS,EAEJA,SAAS,EACPA,SAAS,EACnB,IAAI,CAACK,YAAY,CAAC,CAAC,EAGZL,SAAS,EAGPA,SAAS,EAIPA,SAAS,EACHA,SAAS,EACtB,IAAI,CAACM,YAAY,CAAC,CAAC,EAIZN,SAAS,EACHA,SAAS,EACtB,IAAI,CAACO,kBAAkB,CAAC,CAAC,EAIlBP,SAAS,EACHA,SAAS,EACtB,IAAI,CAACQ,WAAW,CAAC,CAAC;EAOlC;;EAEwB;AAC1B;;AAEA;AAAAC,eAAA,CAhEeR,0BAA0B,YA6DvBH,MAAM;AAIxB,eAAeG,0BAA0B","ignoreList":[]}
|
|
@@ -32,6 +32,7 @@ declare class C4DLightboxMediaViewer extends C4DLightboxMediaViewerBody {
|
|
|
32
32
|
private _mediaWindow;
|
|
33
33
|
private _containingCarousel?;
|
|
34
34
|
private _containingModal?;
|
|
35
|
+
private _ctaContents?;
|
|
35
36
|
private _handleSlotChange;
|
|
36
37
|
private _intersectionObserver?;
|
|
37
38
|
private _handleOutOfCarouselView;
|
|
@@ -86,7 +86,7 @@ let C4DLightboxMediaViewer = _decorate([customElement(`${c4dPrefix}-lightbox-med
|
|
|
86
86
|
kind: "method",
|
|
87
87
|
key: "_renderCTAs",
|
|
88
88
|
value: function _renderCTAs() {
|
|
89
|
-
return html(_t4 || (_t4 = _` <slot name="cta"
|
|
89
|
+
return html(_t4 || (_t4 = _` <slot name="cta">${0}</slot> `), this._ctaContents);
|
|
90
90
|
}
|
|
91
91
|
}, {
|
|
92
92
|
kind: "field",
|
|
@@ -170,6 +170,7 @@ let C4DLightboxMediaViewer = _decorate([customElement(`${c4dPrefix}-lightbox-med
|
|
|
170
170
|
key: "connectedCallback",
|
|
171
171
|
value: function connectedCallback() {
|
|
172
172
|
_superPropGet(C4DLightboxMediaViewer, "connectedCallback", this, 3)([]);
|
|
173
|
+
this._ctaContents = this.querySelector('[slot="cta"]') || undefined;
|
|
173
174
|
this._containingCarousel = this.closest(`${c4dPrefix}-carousel`) || undefined;
|
|
174
175
|
this._containingModal = this.closest(`${c4dPrefix}-expressive-modal`) || undefined;
|
|
175
176
|
}
|
|
@@ -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","_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":[]}
|
|
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","_ctaContents","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","querySelector","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\">${this._ctaContents}</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 _ctaContents?: HTMLElement;\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._ctaContents = this.querySelector('[slot=\"cta\"]') || undefined;\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":[]}
|
|
@@ -27,9 +27,11 @@ import C4DLightboxMediaViewerBody from './lightbox-media-viewer-body';
|
|
|
27
27
|
declare class C4DLightboxVideoPlayer extends C4DLightboxMediaViewerBody {
|
|
28
28
|
_renderDescription(): import("lit-html").TemplateResult<1>;
|
|
29
29
|
_renderMedia(): import("lit-html").TemplateResult<1>;
|
|
30
|
+
_renderCTAs(): import("lit-html").TemplateResult<1>;
|
|
30
31
|
_renderTitle(): import("lit-html").TemplateResult<1>;
|
|
31
32
|
updated(changedProperties: any): void;
|
|
32
33
|
connectedCallback(): void;
|
|
34
|
+
private _ctaContents?;
|
|
33
35
|
/**
|
|
34
36
|
* The media description.
|
|
35
37
|
*/
|
|
@@ -4,7 +4,8 @@ import _get from "@babel/runtime/helpers/esm/get";
|
|
|
4
4
|
let _ = t => t,
|
|
5
5
|
_t,
|
|
6
6
|
_t2,
|
|
7
|
-
_t3
|
|
7
|
+
_t3,
|
|
8
|
+
_t4;
|
|
8
9
|
function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
|
|
9
10
|
/**
|
|
10
11
|
* @license
|
|
@@ -79,6 +80,12 @@ let C4DLightboxVideoPlayer = _decorate([customElement(`${c4dPrefix}-lightbox-vid
|
|
|
79
80
|
</div>
|
|
80
81
|
`), c4dPrefix, c4dPrefix);
|
|
81
82
|
}
|
|
83
|
+
}, {
|
|
84
|
+
kind: "method",
|
|
85
|
+
key: "_renderCTAs",
|
|
86
|
+
value: function _renderCTAs() {
|
|
87
|
+
return html(_t3 || (_t3 = _` <slot name="cta">${0}</slot> `), this._ctaContents);
|
|
88
|
+
}
|
|
82
89
|
}, {
|
|
83
90
|
kind: "method",
|
|
84
91
|
key: "_renderTitle",
|
|
@@ -102,7 +109,7 @@ let C4DLightboxVideoPlayer = _decorate([customElement(`${c4dPrefix}-lightbox-vid
|
|
|
102
109
|
formattedDuration = `${minutes}:${String(seconds).padStart(2, '0')}`;
|
|
103
110
|
}
|
|
104
111
|
}
|
|
105
|
-
return html(
|
|
112
|
+
return html(_t4 || (_t4 = _`
|
|
106
113
|
<slot name="title">
|
|
107
114
|
<h2 style="all: inherit;" part="h2">
|
|
108
115
|
${0}
|
|
@@ -126,12 +133,9 @@ let C4DLightboxVideoPlayer = _decorate([customElement(`${c4dPrefix}-lightbox-vid
|
|
|
126
133
|
key: "connectedCallback",
|
|
127
134
|
value: function connectedCallback() {
|
|
128
135
|
this.setAttribute('role', 'dialog');
|
|
136
|
+
this._ctaContents = this.querySelector('[slot="cta"]') || undefined;
|
|
129
137
|
_superPropGet(C4DLightboxVideoPlayer, "connectedCallback", this, 3)([]);
|
|
130
138
|
}
|
|
131
|
-
|
|
132
|
-
/**
|
|
133
|
-
* The media description.
|
|
134
|
-
*/
|
|
135
139
|
}, {
|
|
136
140
|
kind: "field",
|
|
137
141
|
decorators: [property()],
|
|
@@ -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","name","formattedDuration","totalSeconds","Math","floor","hours","minutes","seconds","String","padStart","
|
|
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","_renderCTAs","_t3","_ctaContents","_renderTitle","duration","formatCaption","name","formattedDuration","totalSeconds","Math","floor","hours","minutes","seconds","String","padStart","_t4","updated","changedProperties","has","setAttribute","connectedCallback","querySelector","undefined","_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 _renderCTAs() {\n return html` <slot name=\"cta\">${this._ctaContents}</slot> `;\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 this._ctaContents = this.querySelector('[slot=\"cta\"]') || undefined;\n super.connectedCallback();\n }\n\n private _ctaContents?: HTMLElement;\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":"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","ignoreList":[]}
|