@carbon/ibmdotcom-web-components 2.43.0 → 2.45.0

package/es/components/video-player-v7/video-player-container.js

@@ -0,0 +1,392 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _decorate from "@babel/runtime/helpers/esm/decorate";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { bindActionCreators } from 'redux';
+import 'lit';
+import { property } from 'lit/decorators.js';
+import KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayerV7/KalturaPlayer.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import store from '../../internal/vendor/@carbon/ibmdotcom-services-store/store.js';
+import { loadMediaData } from '../../internal/vendor/@carbon/ibmdotcom-services-store/actions/kalturaPlayerAPIv7.js';
+import ConnectMixin from "../../globals/mixins/connect.js";
+import StableSelectorMixin from "../../globals/mixins/stable-selector.js";
+import C4DVideoPlayerComposite from "./video-player-composite.js";
+import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import { LocaleAPI } from '@carbon/ibmdotcom-services/es/services/Locale/index';
+const {
+  stablePrefix: c4dPrefix
+} = settings;
+
+/**
+ * The Redux state used for `<c4d-video-player-container-v7>`.
+ */
+
+/**
+ * The properties for `<c4d-video-player-container-v7>` from Redux state.
+ */
+
+/**
+ * @param state The Redux state for video player.
+ * @returns The converted version of the given state, tailored for `<c4d-video-player-container-v7>`.
+ */
+export function mapStateToProps(state) {
+  const {
+    kalturaPlayerAPI
+  } = state;
+  const {
+    mediaData
+  } = kalturaPlayerAPI !== null && kalturaPlayerAPI !== void 0 ? kalturaPlayerAPI : {};
+  return !mediaData ? {} : {
+    mediaData
+  };
+}
+
+/**
+ * @param dispatch The Redux `dispatch()` API.
+ * @returns The methods in `<c4d-video-player-container-v7>` to dispatch Redux actions.
+ */
+export function mapDispatchToProps(dispatch) {
+  return bindActionCreators({
+    _loadVideoData: loadMediaData
+  }, dispatch // TS definition of `bindActionCreators()` seems to have no templated `Dispatch`
+  );
+}
+
+/**
+ * @param Base The base class.
+ * @returns A mix-in that implements video embedding API calls.
+ */
+export const C4DVideoPlayerContainerMixin = Base => {
+  /**
+   * A mix-in class that sets up and cleans up event listeners defined by `@HostListener` decorator.
+   */
+  let C4DVideoPlayerContainerMixinImpl = _decorate(null, function (_initialize, _StableSelectorMixin) {
+    class C4DVideoPlayerContainerMixinImpl extends _StableSelectorMixin {
+      constructor(...args) {
+        super(...args);
+        _initialize(this);
+      }
+    }
+    return {
+      F: C4DVideoPlayerContainerMixinImpl,
+      d: [{
+        kind: "field",
+        key: "_requestsEmbedVideo",
+        value() {
+          return {};
+        }
+      }, {
+        kind: "field",
+        decorators: [property({
+          type: String,
+          attribute: 'customvideoname'
+        })],
+        key: "customVideoName",
+        value() {
+          return '';
+        }
+      }, {
+        kind: "field",
+        decorators: [property()],
+        key: "lc",
+        value() {
+          return '';
+        }
+      }, {
+        kind: "method",
+        key: "_setRequestEmbedVideoInProgress",
+        value:
+        /**
+         * The video player.
+         */
+
+        /**
+         * The embedded Kaltura player element (that has APIs), keyed by the video ID.
+         */
+
+        /**
+         * The request for the embedded Kaltura player element (that has APIs), keyed by the video ID.
+         *
+         * @protected
+         */
+        // Not using TypeScript `private` due to: microsoft/TypeScript#17744
+
+        /**
+         * Custom video name
+         */
+
+        /**
+         * Language code
+         */
+
+        /**
+         * Sets the state that the API call for embedding the video for the given video ID is in progress.
+         *
+         * @param videoId The video ID.
+         * @param request The promise of the API call for embedding the video of the given video ID that is in progress.
+         * @private
+         */
+        // Not using TypeScript `private` due to: microsoft/TypeScript#17744
+        function _setRequestEmbedVideoInProgress(videoId, request) {
+          const {
+            _requestsEmbedVideo: oldRequestsEmbedVideo
+          } = this;
+          this._requestsEmbedVideo = _objectSpread(_objectSpread({}, oldRequestsEmbedVideo), {}, {
+            [videoId]: request
+          });
+        }
+
+        /**
+         * Set the state that the API call for embedding the video for the given video ID is failed.
+         *
+         * @param videoId The video ID.
+         * @param error An error from the API call for embedding the video of the given video ID.
+         * @private
+         */
+        // Not using TypeScript `private` due to: microsoft/TypeScript#17744
+      }, {
+        kind: "method",
+        key: "_setErrorRequestEmbedVideo",
+        value: function _setErrorRequestEmbedVideo(videoId, error) {
+          this._setRequestEmbedVideoInProgress(videoId, Promise.reject(error));
+        }
+
+        /**
+         * Sets the given embedded Kaltura player element (that has APIs) for the given video ID.
+         *
+         * @param videoId The video ID.
+         * @param kalturaPlayer The embedded Kaltura player element (that has APIs).
+         * @private
+         */
+        // Not using TypeScript `private` due to: microsoft/TypeScript#17744
+      }, {
+        kind: "method",
+        key: "_setEmbeddedVideo",
+        value: function _setEmbeddedVideo(videoId, kalturaPlayer) {
+          this._setRequestEmbedVideoInProgress(videoId, Promise.resolve(kalturaPlayer));
+          const {
+            embeddedVideos: oldEmbeddedVideos
+          } = this;
+          this.embeddedVideos = _objectSpread(_objectSpread({}, oldEmbeddedVideos), {}, {
+            [videoId]: kalturaPlayer
+          });
+        }
+      }, {
+        kind: "method",
+        key: "_setAutoplayPreference",
+        value: function _setAutoplayPreference(preference) {
+          const updatedValue = preference ? '1' : '0';
+          localStorage.setItem(`${this.prefersAutoplayStorageKey}`, updatedValue);
+        }
+      }, {
+        kind: "method",
+        key: "_getAutoplayPreference",
+        value: function _getAutoplayPreference() {
+          const storedValue = localStorage.getItem(`${this.prefersAutoplayStorageKey}`);
+          if (storedValue === null) {
+            return !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+          } else {
+            return Boolean(parseInt(storedValue, 10));
+          }
+        }
+      }, {
+        kind: "method",
+        key: "_getPlayerOptions",
+        value: function _getPlayerOptions() {
+          const {
+            backgroundMode,
+            intersectionMode,
+            autoPlay,
+            muted
+          } = this;
+          /**
+           * The overwritten media title.
+           *
+           * Quick and dirty turn around as C4DVideoPlayerComposite uses caption
+           * and C4DLightboxVideoPlayer uses customVideoName and none are
+           * part of the same type
+           *
+           * <c4d-video-player-container-v7 customVideoName="overwritten media title here">...
+           *
+           */
+
+          let mediaTitle;
+          if (this.lc.toLowerCase() === 'en') {
+            mediaTitle = (this === null || this === void 0 ? void 0 : this['customVideoName']) || (this === null || this === void 0 ? void 0 : this['caption']);
+          } else {
+            mediaTitle = ' ';
+          }
+          let playerOptions = {};
+          const autoplayPreference = this._getAutoplayPreference();
+
+          // GET BACK HERE
+          switch (true) {
+            case autoPlay:
+              playerOptions = {
+                muted,
+                autoPlay: autoplayPreference
+              };
+              break;
+            case backgroundMode || intersectionMode:
+              playerOptions = {
+                playerMode: 'background',
+                loop: true,
+                muted: true,
+                autoPlay: autoplayPreference
+              };
+              break;
+            default:
+              playerOptions = {
+                muted
+              };
+              break;
+          }
+          if (mediaTitle) {
+            playerOptions = _objectSpread(_objectSpread({}, playerOptions), {}, {
+              mediaTitle
+            });
+          }
+
+          /**
+           * In the video player, the player type
+           * will always be video
+           */
+          playerOptions.playerType = 'VIDEO';
+          return playerOptions;
+        }
+
+        /**
+         * Sets up and sends the API call for embedding video for the given video ID.
+         *
+         * @param videoId The video ID.
+         * @private
+         */
+        // Not using TypeScript `private` due to: microsoft/TypeScript#17744
+      }, {
+        kind: "method",
+        key: "_embedVideoImpl",
+        value: async function _embedVideoImpl(videoId) {
+          var _getElementById;
+          const doc = Object.prototype.hasOwnProperty.call(this, 'getRootNode') ? this.getRootNode() : this.ownerDocument;
+          // Given Kaltura replaces the `<div>` here with `<iframe>` with the video player,
+          // rendering this `<div>` in `renderLightDOM()` will cause the video player being clobbered
+          const playerId = Math.random().toString(36).slice(2);
+          const div = document.createElement('div');
+          div.id = playerId;
+          div.className = `${c4dPrefix}--video-player__video`;
+          const {
+            _videoPlayer: videoPlayer
+          } = this;
+          if (!videoPlayer) {
+            throw new TypeError('Cannot find the video player component to put the video content into.');
+          }
+          videoPlayer.appendChild(div);
+          const embedVideoHandle = await KalturaPlayerAPI.embedMedia(videoId, playerId, this._getPlayerOptions());
+          const {
+            width,
+            height
+          } = await KalturaPlayerAPI.api(videoId);
+          videoPlayer.style.setProperty('--native-file-width', `${width}px`);
+          videoPlayer.style.setProperty('--native-file-height', `${height}px`);
+          videoPlayer.style.setProperty('--native-file-aspect-ratio', `${width} / ${height}`);
+          doc.getElementById(playerId).dataset.videoId = videoId;
+          const videoEmbed = (_getElementById = doc.getElementById(playerId)) === null || _getElementById === void 0 ? void 0 : _getElementById.firstElementChild;
+          if (videoEmbed) {
+            videoEmbed.focus();
+          }
+          return embedVideoHandle;
+        }
+
+        /**
+         * Sends the API call for embedding video for the given video ID, and tracks the progress and the error of the REST call.
+         *
+         * @param videoId The video ID.
+         * @internal
+         */
+      }, {
+        kind: "field",
+        key: "_embedMedia",
+        value() {
+          return async videoId => {
+            const {
+              _requestsEmbedVideo: requestsEmbedVideo
+            } = this;
+            const requestEmbedVideo = requestsEmbedVideo[videoId];
+            if (requestEmbedVideo) {
+              return requestEmbedVideo;
+            }
+            const promiseEmbedVideo = this._embedVideoImpl(videoId);
+            this._setRequestEmbedVideoInProgress(videoId, promiseEmbedVideo);
+            try {
+              this._setEmbeddedVideo(videoId, await promiseEmbedVideo);
+            } catch (error) {
+              this._setErrorRequestEmbedVideo(videoId, error);
+            }
+            return promiseEmbedVideo;
+          };
+        }
+      }, {
+        kind: "method",
+        key: "firstUpdated",
+        value:
+        /**
+         * Calls the data-* attribute transpose function to target `c4d-video-player`'s button element.
+         */
+        async function firstUpdated() {
+          window.requestAnimationFrame(() => {
+            var _this$querySelector;
+            const button = (_this$querySelector = this.querySelector('c4d-video-player-v7')) === null || _this$querySelector === void 0 || (_this$querySelector = _this$querySelector.shadowRoot) === null || _this$querySelector === void 0 ? void 0 : _this$querySelector.querySelector('button');
+            if (!this.getAttribute('href') && this.getAttribute('video-id')) {
+              this.setAttribute('href', `https://mediacenter.ibm.com/id/${this.getAttribute('video-id')}`);
+            }
+            this.transposeAttributes(button, ['href']);
+          });
+
+          //get LC
+          const {
+            lc
+          } = await LocaleAPI.getLocale();
+          this.lc = lc;
+        }
+      }, {
+        kind: "field",
+        key: "prefersAutoplayStorageKey",
+        value() {
+          return `${c4dPrefix}-background-video-prefers-autoplay`;
+        }
+      }]
+    };
+  }, StableSelectorMixin(Base));
+  return C4DVideoPlayerContainerMixinImpl;
+};
+
+/**
+ * Container component for video player.
+ *
+ * @element c4d-video-player-container-v7
+ */
+let C4DVideoPlayerContainer = _decorate([customElement(`${c4dPrefix}-video-player-container-v7`)], function (_initialize2, _ConnectMixin) {
+  class C4DVideoPlayerContainer extends _ConnectMixin {
+    constructor(...args) {
+      super(...args);
+      _initialize2(this);
+    }
+  }
+  return {
+    F: C4DVideoPlayerContainer,
+    d: []
+  };
+}, ConnectMixin(store, mapStateToProps, mapDispatchToProps)(C4DVideoPlayerContainerMixin(C4DVideoPlayerComposite)));
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DVideoPlayerContainer;
+//# sourceMappingURL=video-player-container.js.map

package/es/components/video-player-v7/video-player-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-player-container.js","names":["bindActionCreators","property","KalturaPlayerAPI","settings","store","loadMediaData","ConnectMixin","StableSelectorMixin","C4DVideoPlayerComposite","carbonElement","customElement","LocaleAPI","stablePrefix","c4dPrefix","mapStateToProps","state","kalturaPlayerAPI","mediaData","mapDispatchToProps","dispatch","_loadVideoData","C4DVideoPlayerContainerMixin","Base","C4DVideoPlayerContainerMixinImpl","_decorate","_initialize","_StableSelectorMixin","constructor","args","F","d","kind","key","value","decorators","type","String","attribute","_setRequestEmbedVideoInProgress","videoId","request","_requestsEmbedVideo","oldRequestsEmbedVideo","_objectSpread","_setErrorRequestEmbedVideo","error","Promise","reject","_setEmbeddedVideo","kalturaPlayer","resolve","embeddedVideos","oldEmbeddedVideos","_setAutoplayPreference","preference","updatedValue","localStorage","setItem","prefersAutoplayStorageKey","_getAutoplayPreference","storedValue","getItem","window","matchMedia","matches","Boolean","parseInt","_getPlayerOptions","backgroundMode","intersectionMode","autoPlay","muted","mediaTitle","lc","toLowerCase","playerOptions","autoplayPreference","playerMode","loop","playerType","_embedVideoImpl","_getElementById","doc","Object","prototype","hasOwnProperty","call","getRootNode","ownerDocument","playerId","Math","random","toString","slice","div","document","createElement","id","className","_videoPlayer","videoPlayer","TypeError","appendChild","embedVideoHandle","embedMedia","width","height","api","style","setProperty","getElementById","dataset","videoEmbed","firstElementChild","focus","requestsEmbedVideo","requestEmbedVideo","promiseEmbedVideo","firstUpdated","requestAnimationFrame","_this$querySelector","button","querySelector","shadowRoot","getAttribute","setAttribute","transposeAttributes","getLocale","C4DVideoPlayerContainer","_initialize2","_ConnectMixin"],"sources":["components/video-player-v7/video-player-container.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2025\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 {\n  ActionCreatorsMapObject,\n  Dispatch,\n  Store,\n  bindActionCreators,\n} from 'redux';\nimport {} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayerV7/KalturaPlayer.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport store from '../../internal/vendor/@carbon/ibmdotcom-services-store/store.js';\nimport {\n  MediaData,\n  MediaPlayerAPIState,\n} from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/kalturaPlayerAPI';\nimport { loadMediaData } from '../../internal/vendor/@carbon/ibmdotcom-services-store/actions/kalturaPlayerAPIv7.js';\nimport { MediaPlayerAPIActions } from '../../internal/vendor/@carbon/ibmdotcom-services-store/actions/kalturaPlayerAPIv7';\nimport { Constructor } from '../../globals/defs';\nimport ConnectMixin from '../../globals/mixins/connect';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport C4DVideoPlayerComposite from './video-player-composite';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { LocaleAPI } from '@carbon/ibmdotcom-services/es/services/Locale/index';\n\nconst { stablePrefix: c4dPrefix } = settings;\n\n/**\n * The Redux state used for `<c4d-video-player-container-v7>`.\n */\nexport interface VideoPlayerContainerState {\n  /**\n   * The Redux state for `KalturaPlayerAPI`.\n   */\n  kalturaPlayerAPI?: MediaPlayerAPIState;\n}\n\n/**\n * The properties for `<c4d-video-player-container-v7>` from Redux state.\n */\nexport interface VideoPlayerContainerStateProps {\n  /**\n   * The video data, keyed by the video ID.\n   */\n  mediaData?: { [videoId: string]: MediaData };\n}\n\nexport type VideoPlayerActions = ReturnType<typeof loadMediaData>;\n\n/**\n * @param state The Redux state for video player.\n * @returns The converted version of the given state, tailored for `<c4d-video-player-container-v7>`.\n */\nexport function mapStateToProps(\n  state: VideoPlayerContainerState\n): VideoPlayerContainerStateProps {\n  const { kalturaPlayerAPI } = state;\n  const { mediaData } = kalturaPlayerAPI ?? {};\n  return !mediaData ? {} : { mediaData };\n}\n\n/**\n * @param dispatch The Redux `dispatch()` API.\n * @returns The methods in `<c4d-video-player-container-v7>` to dispatch Redux actions.\n */\nexport function mapDispatchToProps(dispatch: Dispatch<MediaPlayerAPIActions>) {\n  return bindActionCreators<\n    VideoPlayerActions,\n    ActionCreatorsMapObject<VideoPlayerActions>\n  >(\n    {\n      _loadVideoData: loadMediaData,\n    },\n    dispatch as Dispatch // TS definition of `bindActionCreators()` seems to have no templated `Dispatch`\n  );\n}\n\n/**\n * @param Base The base class.\n * @returns A mix-in that implements video embedding API calls.\n */\nexport const C4DVideoPlayerContainerMixin = <\n  T extends Constructor<HTMLElement>\n>(\n  Base: T\n) => {\n  /**\n   * A mix-in class that sets up and cleans up event listeners defined by `@HostListener` decorator.\n   */\n  abstract class C4DVideoPlayerContainerMixinImpl extends StableSelectorMixin(\n    Base\n  ) {\n    /**\n     * The video player.\n     */\n    abstract _videoPlayer?: HTMLElement;\n\n    /**\n     * The embedded Kaltura player element (that has APIs), keyed by the video ID.\n     */\n    abstract embeddedVideos?: { [videoId: string]: any };\n\n    /**\n     * The request for the embedded Kaltura player element (that has APIs), keyed by the video ID.\n     *\n     * @protected\n     */\n    // Not using TypeScript `private` due to: microsoft/TypeScript#17744\n    _requestsEmbedVideo: { [videoId: string]: Promise<any> } = {};\n\n    /**\n     * Custom video name\n     */\n    @property({ type: String, attribute: 'customvideoname' })\n    customVideoName = '';\n\n    /**\n     * Language code\n     */\n    @property()\n    lc = '';\n\n    /**\n     * Sets the state that the API call for embedding the video for the given video ID is in progress.\n     *\n     * @param videoId The video ID.\n     * @param request The promise of the API call for embedding the video of the given video ID that is in progress.\n     * @private\n     */\n    // Not using TypeScript `private` due to: microsoft/TypeScript#17744\n    _setRequestEmbedVideoInProgress(videoId: string, request: Promise<any>) {\n      const { _requestsEmbedVideo: oldRequestsEmbedVideo } = this;\n      this._requestsEmbedVideo = {\n        ...oldRequestsEmbedVideo,\n        [videoId]: request,\n      };\n    }\n\n    /**\n     * Set the state that the API call for embedding the video for the given video ID is failed.\n     *\n     * @param videoId The video ID.\n     * @param error An error from the API call for embedding the video of the given video ID.\n     * @private\n     */\n    // Not using TypeScript `private` due to: microsoft/TypeScript#17744\n    _setErrorRequestEmbedVideo(videoId: string, error: Error) {\n      this._setRequestEmbedVideoInProgress(videoId, Promise.reject(error));\n    }\n\n    /**\n     * Sets the given embedded Kaltura player element (that has APIs) for the given video ID.\n     *\n     * @param videoId The video ID.\n     * @param kalturaPlayer The embedded Kaltura player element (that has APIs).\n     * @private\n     */\n    // Not using TypeScript `private` due to: microsoft/TypeScript#17744\n    _setEmbeddedVideo(videoId: string, kalturaPlayer: any) {\n      this._setRequestEmbedVideoInProgress(\n        videoId,\n        Promise.resolve(kalturaPlayer)\n      );\n      const { embeddedVideos: oldEmbeddedVideos } = this;\n      this.embeddedVideos = {\n        ...oldEmbeddedVideos,\n        [videoId]: kalturaPlayer,\n      };\n    }\n\n    _setAutoplayPreference(preference: boolean) {\n      const updatedValue = preference ? '1' : '0';\n      localStorage.setItem(`${this.prefersAutoplayStorageKey}`, updatedValue);\n    }\n\n    _getAutoplayPreference() {\n      const storedValue = localStorage.getItem(\n        `${this.prefersAutoplayStorageKey}`\n      );\n\n      if (storedValue === null) {\n        return !window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n      } else {\n        return Boolean(parseInt(storedValue, 10));\n      }\n    }\n\n    _getPlayerOptions() {\n      const { backgroundMode, intersectionMode, autoPlay, muted } =\n        this as unknown as C4DVideoPlayerComposite;\n      /**\n       * The overwritten media title.\n       *\n       * Quick and dirty turn around as C4DVideoPlayerComposite uses caption\n       * and C4DLightboxVideoPlayer uses customVideoName and none are\n       * part of the same type\n       *\n       * <c4d-video-player-container-v7 customVideoName=\"overwritten media title here\">...\n       *\n       */\n\n      let mediaTitle: string;\n\n      if (this.lc.toLowerCase() === 'en') {\n        mediaTitle = this?.['customVideoName'] || this?.['caption'];\n      } else {\n        mediaTitle = ' ';\n      }\n\n      let playerOptions: any = {};\n      const autoplayPreference = this._getAutoplayPreference();\n\n      // GET BACK HERE\n      switch (true) {\n        case autoPlay:\n          playerOptions = {\n            muted,\n            autoPlay: autoplayPreference,\n          };\n          break;\n\n        case backgroundMode || intersectionMode:\n          playerOptions = {\n            playerMode: 'background',\n            loop: true,\n            muted: true,\n            autoPlay: autoplayPreference,\n          };\n          break;\n\n        default:\n          playerOptions = {\n            muted,\n          };\n          break;\n      }\n\n      if (mediaTitle) {\n        playerOptions = {\n          ...playerOptions,\n          mediaTitle,\n        };\n      }\n\n      /**\n       * In the video player, the player type\n       * will always be video\n       */\n      playerOptions.playerType = 'VIDEO';\n\n      return playerOptions;\n    }\n\n    /**\n     * Sets up and sends the API call for embedding video for the given video ID.\n     *\n     * @param videoId The video ID.\n     * @private\n     */\n    // Not using TypeScript `private` due to: microsoft/TypeScript#17744\n    async _embedVideoImpl(videoId: string) {\n      const doc = Object.prototype.hasOwnProperty.call(this, 'getRootNode')\n        ? (this.getRootNode() as Document | ShadowRoot)\n        : this.ownerDocument;\n      // Given Kaltura replaces the `<div>` here with `<iframe>` with the video player,\n      // rendering this `<div>` in `renderLightDOM()` will cause the video player being clobbered\n      const playerId = Math.random().toString(36).slice(2);\n      const div = document.createElement('div');\n      div.id = playerId;\n      div.className = `${c4dPrefix}--video-player__video`;\n      const { _videoPlayer: videoPlayer } = this;\n      if (!videoPlayer) {\n        throw new TypeError(\n          'Cannot find the video player component to put the video content into.'\n        );\n      }\n      videoPlayer.appendChild(div);\n\n      const embedVideoHandle = await KalturaPlayerAPI.embedMedia(\n        videoId,\n        playerId,\n        this._getPlayerOptions()\n      );\n      const { width, height } = await KalturaPlayerAPI.api(videoId);\n      videoPlayer.style.setProperty('--native-file-width', `${width}px`);\n      videoPlayer.style.setProperty('--native-file-height', `${height}px`);\n      videoPlayer.style.setProperty(\n        '--native-file-aspect-ratio',\n        `${width} / ${height}`\n      );\n\n      doc!.getElementById(playerId)!.dataset.videoId = videoId;\n      const videoEmbed = doc!.getElementById(playerId)?.firstElementChild;\n      if (videoEmbed) {\n        (videoEmbed as HTMLElement).focus();\n      }\n      return embedVideoHandle;\n    }\n\n    /**\n     * Sends the API call for embedding video for the given video ID, and tracks the progress and the error of the REST call.\n     *\n     * @param videoId The video ID.\n     * @internal\n     */\n    _embedMedia = async (videoId: string) => {\n      const { _requestsEmbedVideo: requestsEmbedVideo } = this;\n      const requestEmbedVideo = requestsEmbedVideo[videoId];\n\n      if (requestEmbedVideo) {\n        return requestEmbedVideo;\n      }\n\n      const promiseEmbedVideo = this._embedVideoImpl(videoId);\n\n      this._setRequestEmbedVideoInProgress(videoId, promiseEmbedVideo);\n      try {\n        this._setEmbeddedVideo(videoId, await promiseEmbedVideo);\n      } catch (error) {\n        this._setErrorRequestEmbedVideo(videoId, error as Error);\n      }\n      return promiseEmbedVideo;\n    };\n\n    /**\n     * Calls the data-* attribute transpose function to target `c4d-video-player`'s button element.\n     */\n    async firstUpdated() {\n      window.requestAnimationFrame(() => {\n        const button = this.querySelector(\n          'c4d-video-player-v7'\n        )?.shadowRoot?.querySelector('button');\n        if (!this.getAttribute('href') && this.getAttribute('video-id')) {\n          this.setAttribute(\n            'href',\n            `https://mediacenter.ibm.com/id/${this.getAttribute('video-id')}`\n          );\n        }\n        this.transposeAttributes(button, ['href']);\n      });\n\n      //get LC\n      const { lc } = await LocaleAPI.getLocale();\n      this.lc = lc;\n    }\n\n    prefersAutoplayStorageKey = `${c4dPrefix}-background-video-prefers-autoplay`;\n  }\n\n  return C4DVideoPlayerContainerMixinImpl;\n};\n\n/**\n * Container component for video player.\n *\n * @element c4d-video-player-container-v7\n */\n@customElement(`${c4dPrefix}-video-player-container-v7`)\nclass C4DVideoPlayerContainer extends ConnectMixin<\n  VideoPlayerContainerState,\n  MediaPlayerAPIActions,\n  VideoPlayerContainerStateProps,\n  ActionCreatorsMapObject<VideoPlayerActions>\n>(\n  store as Store<VideoPlayerContainerState, MediaPlayerAPIActions>,\n  mapStateToProps,\n  mapDispatchToProps\n)(C4DVideoPlayerContainerMixin(C4DVideoPlayerComposite)) {}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default C4DVideoPlayerContainer;\n"],"mappings":"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","ignoreList":[]}

package/es/components/video-player-v7/video-player.css.js

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+export default css([
+  ':root{--cds-grid-gutter:2rem;--cds-grid-columns:4;--cds-grid-margin:0}@media (min-width:42rem){:root{--cds-grid-columns:8;--cds-grid-margin:1rem}}@media (min-width:66rem){:root{--cds-grid-columns:16}}@media (min-width:99rem){:root{--cds-grid-margin:1.5rem}}.cds--css-grid{--cds-grid-gutter-start:calc(var(--cds-grid-gutter)/2);--cds-grid-gutter-end:calc(var(--cds-grid-gutter)/2);--cds-grid-column-hang:calc(var(--cds-grid-gutter)/2);display:grid;grid-template-columns:repeat(var(--cds-grid-columns),minmax(0,1fr));inline-size:100%;margin-inline:auto;max-inline-size:99rem;padding-inline:var(--cds-grid-margin)}.cds--css-grid--full-width{max-inline-size:100%}.cds--css-grid-column{--cds-grid-mode-start:var(--cds-grid-gutter-start);--cds-grid-mode-end:var(--cds-grid-gutter-end);margin-inline:var(--cds-grid-gutter-start) var(--cds-grid-gutter-end)}[dir=rtl] .cds--css-grid-column{margin-inline:var(--cds-grid-gutter-end) var(--cds-grid-gutter-start)}.cds--css-grid--narrow{--cds-grid-gutter-start:0}.cds--css-grid--condensed{--cds-grid-gutter:0.0625rem;--cds-grid-column-hang:0.96875rem}.cds--subgrid{display:grid;grid-template-columns:repeat(var(--cds-grid-columns),minmax(0,1fr));margin-inline:calc(var(--cds-grid-mode-start)*-1) calc(var(--cds-grid-mode-end)*-1)}[dir=rtl] .cds--subgrid{margin-inline:calc(var(--cds-grid-mode-end)*-1) calc(var(--cds-grid-mode-start)*-1)}.cds--subgrid--wide{--cds-grid-gutter-start:1rem;--cds-grid-gutter-end:1rem;--cds-grid-column-hang:0}.cds--subgrid--narrow{--cds-grid-gutter-start:0;--cds-grid-gutter-end:1rem;--cds-grid-column-hang:1rem}.cds--subgrid--condensed{--cds-grid-gutter-start:0.03125rem;--cds-grid-gutter-end:0.03125rem;--cds-grid-column-hang:0.96875rem}.cds--grid-column-hang{margin-inline-start:var(--cds-grid-column-hang)}[dir=rtl] .cds--grid-column-hang{margin-inline:initial var(--cds-grid-column-hang)}.cds--col-span-0{display:none}.cds--col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--col-span-5{--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--col-span-6{--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--col-span-7{--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--col-span-8{--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--col-span-9{--cds-grid-columns:9;display:block;grid-column:span 9/span 9}.cds--col-span-10{--cds-grid-columns:10;display:block;grid-column:span 10/span 10}.cds--col-span-11{--cds-grid-columns:11;display:block;grid-column:span 11/span 11}.cds--col-span-12{--cds-grid-columns:12;display:block;grid-column:span 12/span 12}.cds--col-span-13{--cds-grid-columns:13;display:block;grid-column:span 13/span 13}.cds--col-span-14{--cds-grid-columns:14;display:block;grid-column:span 14/span 14}.cds--col-span-15{--cds-grid-columns:15;display:block;grid-column:span 15/span 15}.cds--col-span-16{--cds-grid-columns:16;display:block;grid-column:span 16/span 16}.cds--sm\\:col-span-0{display:none}.cds--sm\\:col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--sm\\:col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--sm\\:col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--sm\\:col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--sm\\:col-span-auto{grid-column:auto}.cds--sm\\:col-span-100{grid-column:1/-1}.cds--sm\\:col-span-75{--cds-grid-columns:3;grid-column:span 3/span 3}.cds--sm\\:col-span-50{--cds-grid-columns:2;grid-column:span 2/span 2}.cds--sm\\:col-span-25{--cds-grid-columns:1;grid-column:span 1/span 1}@media (min-width:42rem){.cds--md\\:col-span-0{display:none}.cds--md\\:col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--md\\:col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--md\\:col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--md\\:col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--md\\:col-span-5{--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--md\\:col-span-6{--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--md\\:col-span-7{--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--md\\:col-span-8{--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--md\\:col-span-auto{grid-column:auto}.cds--md\\:col-span-100{grid-column:1/-1}.cds--md\\:col-span-75{--cds-grid-columns:6;grid-column:span 6/span 6}.cds--md\\:col-span-50{--cds-grid-columns:4;grid-column:span 4/span 4}.cds--md\\:col-span-25{--cds-grid-columns:2;grid-column:span 2/span 2}}@media (min-width:66rem){.cds--lg\\:col-span-0{display:none}.cds--lg\\:col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--lg\\:col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--lg\\:col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--lg\\:col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--lg\\:col-span-5{--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--lg\\:col-span-6{--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--lg\\:col-span-7{--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--lg\\:col-span-8{--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--lg\\:col-span-9{--cds-grid-columns:9;display:block;grid-column:span 9/span 9}.cds--lg\\:col-span-10{--cds-grid-columns:10;display:block;grid-column:span 10/span 10}.cds--lg\\:col-span-11{--cds-grid-columns:11;display:block;grid-column:span 11/span 11}.cds--lg\\:col-span-12{--cds-grid-columns:12;display:block;grid-column:span 12/span 12}.cds--lg\\:col-span-13{--cds-grid-columns:13;display:block;grid-column:span 13/span 13}.cds--lg\\:col-span-14{--cds-grid-columns:14;display:block;grid-column:span 14/span 14}.cds--lg\\:col-span-15{--cds-grid-columns:15;display:block;grid-column:span 15/span 15}.cds--lg\\:col-span-16{--cds-grid-columns:16;display:block;grid-column:span 16/span 16}.cds--lg\\:col-span-auto{grid-column:auto}.cds--lg\\:col-span-100{grid-column:1/-1}.cds--lg\\:col-span-75{--cds-grid-columns:12;grid-column:span 12/span 12}.cds--lg\\:col-span-50{--cds-grid-columns:8;grid-column:span 8/span 8}.cds--lg\\:col-span-25{--cds-grid-columns:4;grid-column:span 4/span 4}}@media (min-width:82rem){.cds--xlg\\:col-span-0{display:none}.cds--xlg\\:col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--xlg\\:col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--xlg\\:col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--xlg\\:col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--xlg\\:col-span-5{--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--xlg\\:col-span-6{--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--xlg\\:col-span-7{--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--xlg\\:col-span-8{--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--xlg\\:col-span-9{--cds-grid-columns:9;display:block;grid-column:span 9/span 9}.cds--xlg\\:col-span-10{--cds-grid-columns:10;display:block;grid-column:span 10/span 10}.cds--xlg\\:col-span-11{--cds-grid-columns:11;display:block;grid-column:span 11/span 11}.cds--xlg\\:col-span-12{--cds-grid-columns:12;display:block;grid-column:span 12/span 12}.cds--xlg\\:col-span-13{--cds-grid-columns:13;display:block;grid-column:span 13/span 13}.cds--xlg\\:col-span-14{--cds-grid-columns:14;display:block;grid-column:span 14/span 14}.cds--xlg\\:col-span-15{--cds-grid-columns:15;display:block;grid-column:span 15/span 15}.cds--xlg\\:col-span-16{--cds-grid-columns:16;display:block;grid-column:span 16/span 16}.cds--xlg\\:col-span-auto{grid-column:auto}.cds--xlg\\:col-span-100{grid-column:1/-1}.cds--xlg\\:col-span-75{--cds-grid-columns:12;grid-column:span 12/span 12}.cds--xlg\\:col-span-50{--cds-grid-columns:8;grid-column:span 8/span 8}.cds--xlg\\:col-span-25{--cds-grid-columns:4;grid-column:span 4/span 4}}@media (min-width:99rem){.cds--max\\:col-span-0{display:none}.cds--max\\:col-span-1{--cds-grid-columns:1;display:block;grid-column:span 1/span 1}.cds--max\\:col-span-2{--cds-grid-columns:2;display:block;grid-column:span 2/span 2}.cds--max\\:col-span-3{--cds-grid-columns:3;display:block;grid-column:span 3/span 3}.cds--max\\:col-span-4{--cds-grid-columns:4;display:block;grid-column:span 4/span 4}.cds--max\\:col-span-5{--cds-grid-columns:5;display:block;grid-column:span 5/span 5}.cds--max\\:col-span-6{--cds-grid-columns:6;display:block;grid-column:span 6/span 6}.cds--max\\:col-span-7{--cds-grid-columns:7;display:block;grid-column:span 7/span 7}.cds--max\\:col-span-8{--cds-grid-columns:8;display:block;grid-column:span 8/span 8}.cds--max\\:col-span-9{--cds-grid-columns:9;display:block;grid-column:span 9/span 9}.cds--max\\:col-span-10{--cds-grid-columns:10;display:block;grid-column:span 10/span 10}.cds--max\\:col-span-11{--cds-grid-columns:11;display:block;grid-column:span 11/span 11}.cds--max\\:col-span-12{--cds-grid-columns:12;display:block;grid-column:span 12/span 12}.cds--max\\:col-span-13{--cds-grid-columns:13;display:block;grid-column:span 13/span 13}.cds--max\\:col-span-14{--cds-grid-columns:14;display:block;grid-column:span 14/span 14}.cds--max\\:col-span-15{--cds-grid-columns:15;display:block;grid-column:span 15/span 15}.cds--max\\:col-span-16{--cds-grid-columns:16;display:block;grid-column:span 16/span 16}.cds--max\\:col-span-auto{grid-column:auto}.cds--max\\:col-span-100{grid-column:1/-1}.cds--max\\:col-span-75{--cds-grid-columns:12;grid-column:span 12/span 12}.cds--max\\:col-span-50{--cds-grid-columns:8;grid-column:span 8/span 8}.cds--max\\:col-span-25{--cds-grid-columns:4;grid-column:span 4/span 4}}.cds--col-span-auto{grid-column:auto}.cds--col-span-100{grid-column:1/-1}.cds--col-span-75{--cds-grid-columns:3;grid-column:span 3/span 3}@media (min-width:42rem){.cds--col-span-75{--cds-grid-columns:6;grid-column:span 6/span 6}}@media (min-width:66rem){.cds--col-span-75{--cds-grid-columns:12;grid-column:span 12/span 12}}.cds--col-span-50{--cds-grid-columns:2;grid-column:span 2/span 2}@media (min-width:42rem){.cds--col-span-50{--cds-grid-columns:4;grid-column:span 4/span 4}}@media (min-width:66rem){.cds--col-span-50{--cds-grid-columns:8;grid-column:span 8/span 8}}.cds--col-span-25{--cds-grid-columns:1;grid-column:span 1/span 1}@media (min-width:42rem){.cds--col-span-25{--cds-grid-columns:2;grid-column:span 2/span 2}}@media (min-width:66rem){.cds--col-span-25{--cds-grid-columns:4;grid-column:span 4/span 4}}.cds--col-start-1{grid-column-start:1}.cds--col-start-2{grid-column-start:2}.cds--col-start-3{grid-column-start:3}.cds--col-start-4{grid-column-start:4}.cds--col-start-5{grid-column-start:5}.cds--col-start-6{grid-column-start:6}.cds--col-start-7{grid-column-start:7}.cds--col-start-8{grid-column-start:8}.cds--col-start-9{grid-column-start:9}.cds--col-start-10{grid-column-start:10}.cds--col-start-11{grid-column-start:11}.cds--col-start-12{grid-column-start:12}.cds--col-start-13{grid-column-start:13}.cds--col-start-14{grid-column-start:14}.cds--col-start-15{grid-column-start:15}.cds--col-start-16{grid-column-start:16}.cds--col-end-2{grid-column-end:2}.cds--col-end-3{grid-column-end:3}.cds--col-end-4{grid-column-end:4}.cds--col-end-5{grid-column-end:5}.cds--col-end-6{grid-column-end:6}.cds--col-end-7{grid-column-end:7}.cds--col-end-8{grid-column-end:8}.cds--col-end-9{grid-column-end:9}.cds--col-end-10{grid-column-end:10}.cds--col-end-11{grid-column-end:11}.cds--col-end-12{grid-column-end:12}.cds--col-end-13{grid-column-end:13}.cds--col-end-14{grid-column-end:14}.cds--col-end-15{grid-column-end:15}.cds--col-end-16{grid-column-end:16}.cds--col-end-17{grid-column-end:17}.cds--col-start-auto{grid-column-start:auto}.cds--col-end-auto{grid-column-end:auto}.cds--sm\\:col-start-1{grid-column-start:1}.cds--sm\\:col-start-2{grid-column-start:2}.cds--sm\\:col-start-3{grid-column-start:3}.cds--sm\\:col-start-4{grid-column-start:4}.cds--sm\\:col-start-5{grid-column-start:5}.cds--sm\\:col-start-6{grid-column-start:6}.cds--sm\\:col-start-7{grid-column-start:7}.cds--sm\\:col-start-8{grid-column-start:8}.cds--sm\\:col-start-9{grid-column-start:9}.cds--sm\\:col-start-10{grid-column-start:10}.cds--sm\\:col-start-11{grid-column-start:11}.cds--sm\\:col-start-12{grid-column-start:12}.cds--sm\\:col-start-13{grid-column-start:13}.cds--sm\\:col-start-14{grid-column-start:14}.cds--sm\\:col-start-15{grid-column-start:15}.cds--sm\\:col-start-16{grid-column-start:16}.cds--sm\\:col-end-2{grid-column-end:2}.cds--sm\\:col-end-3{grid-column-end:3}.cds--sm\\:col-end-4{grid-column-end:4}.cds--sm\\:col-end-5{grid-column-end:5}.cds--sm\\:col-end-6{grid-column-end:6}.cds--sm\\:col-end-7{grid-column-end:7}.cds--sm\\:col-end-8{grid-column-end:8}.cds--sm\\:col-end-9{grid-column-end:9}.cds--sm\\:col-end-10{grid-column-end:10}.cds--sm\\:col-end-11{grid-column-end:11}.cds--sm\\:col-end-12{grid-column-end:12}.cds--sm\\:col-end-13{grid-column-end:13}.cds--sm\\:col-end-14{grid-column-end:14}.cds--sm\\:col-end-15{grid-column-end:15}.cds--sm\\:col-end-16{grid-column-end:16}.cds--sm\\:col-end-17{grid-column-end:17}.cds--sm\\:col-start-auto{grid-column-start:auto}.cds--sm\\:col-end-auto{grid-column-end:auto}@media (min-width:42rem){.cds--md\\:col-start-1{grid-column-start:1}.cds--md\\:col-start-2{grid-column-start:2}.cds--md\\:col-start-3{grid-column-start:3}.cds--md\\:col-start-4{grid-column-start:4}.cds--md\\:col-start-5{grid-column-start:5}.cds--md\\:col-start-6{grid-column-start:6}.cds--md\\:col-start-7{grid-column-start:7}.cds--md\\:col-start-8{grid-column-start:8}.cds--md\\:col-start-9{grid-column-start:9}.cds--md\\:col-start-10{grid-column-start:10}.cds--md\\:col-start-11{grid-column-start:11}.cds--md\\:col-start-12{grid-column-start:12}.cds--md\\:col-start-13{grid-column-start:13}.cds--md\\:col-start-14{grid-column-start:14}.cds--md\\:col-start-15{grid-column-start:15}.cds--md\\:col-start-16{grid-column-start:16}.cds--md\\:col-end-2{grid-column-end:2}.cds--md\\:col-end-3{grid-column-end:3}.cds--md\\:col-end-4{grid-column-end:4}.cds--md\\:col-end-5{grid-column-end:5}.cds--md\\:col-end-6{grid-column-end:6}.cds--md\\:col-end-7{grid-column-end:7}.cds--md\\:col-end-8{grid-column-end:8}.cds--md\\:col-end-9{grid-column-end:9}.cds--md\\:col-end-10{grid-column-end:10}.cds--md\\:col-end-11{grid-column-end:11}.cds--md\\:col-end-12{grid-column-end:12}.cds--md\\:col-end-13{grid-column-end:13}.cds--md\\:col-end-14{grid-column-end:14}.cds--md\\:col-end-15{grid-column-end:15}.cds--md\\:col-end-16{grid-column-end:16}.cds--md\\:col-end-17{grid-column-end:17}.cds--md\\:col-start-auto{grid-column-start:auto}.cds--md\\:col-end-auto{grid-column-end:auto}}@media (min-width:66rem){.cds--lg\\:col-start-1{grid-column-start:1}.cds--lg\\:col-start-2{grid-column-start:2}.cds--lg\\:col-start-3{grid-column-start:3}.cds--lg\\:col-start-4{grid-column-start:4}.cds--lg\\:col-start-5{grid-column-start:5}.cds--lg\\:col-start-6{grid-column-start:6}.cds--lg\\:col-start-7{grid-column-start:7}.cds--lg\\:col-start-8{grid-column-start:8}.cds--lg\\:col-start-9{grid-column-start:9}.cds--lg\\:col-start-10{grid-column-start:10}.cds--lg\\:col-start-11{grid-column-start:11}.cds--lg\\:col-start-12{grid-column-start:12}.cds--lg\\:col-start-13{grid-column-start:13}.cds--lg\\:col-start-14{grid-column-start:14}.cds--lg\\:col-start-15{grid-column-start:15}.cds--lg\\:col-start-16{grid-column-start:16}.cds--lg\\:col-end-2{grid-column-end:2}.cds--lg\\:col-end-3{grid-column-end:3}.cds--lg\\:col-end-4{grid-column-end:4}.cds--lg\\:col-end-5{grid-column-end:5}.cds--lg\\:col-end-6{grid-column-end:6}.cds--lg\\:col-end-7{grid-column-end:7}.cds--lg\\:col-end-8{grid-column-end:8}.cds--lg\\:col-end-9{grid-column-end:9}.cds--lg\\:col-end-10{grid-column-end:10}.cds--lg\\:col-end-11{grid-column-end:11}.cds--lg\\:col-end-12{grid-column-end:12}.cds--lg\\:col-end-13{grid-column-end:13}.cds--lg\\:col-end-14{grid-column-end:14}.cds--lg\\:col-end-15{grid-column-end:15}.cds--lg\\:col-end-16{grid-column-end:16}.cds--lg\\:col-end-17{grid-column-end:17}.cds--lg\\:col-start-auto{grid-column-start:auto}.cds--lg\\:col-end-auto{grid-column-end:auto}}@media (min-width:82rem){.cds--xlg\\:col-start-1{grid-column-start:1}.cds--xlg\\:col-start-2{grid-column-start:2}.cds--xlg\\:col-start-3{grid-column-start:3}.cds--xlg\\:col-start-4{grid-column-start:4}.cds--xlg\\:col-start-5{grid-column-start:5}.cds--xlg\\:col-start-6{grid-column-start:6}.cds--xlg\\:col-start-7{grid-column-start:7}.cds--xlg\\:col-start-8{grid-column-start:8}.cds--xlg\\:col-start-9{grid-column-start:9}.cds--xlg\\:col-start-10{grid-column-start:10}.cds--xlg\\:col-start-11{grid-column-start:11}.cds--xlg\\:col-start-12{grid-column-start:12}.cds--xlg\\:col-start-13{grid-column-start:13}.cds--xlg\\:col-start-14{grid-column-start:14}.cds--xlg\\:col-start-15{grid-column-start:15}.cds--xlg\\:col-start-16{grid-column-start:16}.cds--xlg\\:col-end-2{grid-column-end:2}.cds--xlg\\:col-end-3{grid-column-end:3}.cds--xlg\\:col-end-4{grid-column-end:4}.cds--xlg\\:col-end-5{grid-column-end:5}.cds--xlg\\:col-end-6{grid-column-end:6}.cds--xlg\\:col-end-7{grid-column-end:7}.cds--xlg\\:col-end-8{grid-column-end:8}.cds--xlg\\:col-end-9{grid-column-end:9}.cds--xlg\\:col-end-10{grid-column-end:10}.cds--xlg\\:col-end-11{grid-column-end:11}.cds--xlg\\:col-end-12{grid-column-end:12}.cds--xlg\\:col-end-13{grid-column-end:13}.cds--xlg\\:col-end-14{grid-column-end:14}.cds--xlg\\:col-end-15{grid-column-end:15}.cds--xlg\\:col-end-16{grid-column-end:16}.cds--xlg\\:col-end-17{grid-column-end:17}.cds--xlg\\:col-start-auto{grid-column-start:auto}.cds--xlg\\:col-end-auto{grid-column-end:auto}}@media (min-width:99rem){.cds--max\\:col-start-1{grid-column-start:1}.cds--max\\:col-start-2{grid-column-start:2}.cds--max\\:col-start-3{grid-column-start:3}.cds--max\\:col-start-4{grid-column-start:4}.cds--max\\:col-start-5{grid-column-start:5}.cds--max\\:col-start-6{grid-column-start:6}.cds--max\\:col-start-7{grid-column-start:7}.cds--max\\:col-start-8{grid-column-start:8}.cds--max\\:col-start-9{grid-column-start:9}.cds--max\\:col-start-10{grid-column-start:10}.cds--max\\:col-start-11{grid-column-start:11}.cds--max\\:col-start-12{grid-column-start:12}.cds--max\\:col-start-13{grid-column-start:13}.cds--max\\:col-start-14{grid-column-start:14}.cds--max\\:col-start-15{grid-column-start:15}.cds--max\\:col-start-16{grid-column-start:16}.cds--max\\:col-end-2{grid-column-end:2}.cds--max\\:col-end-3{grid-column-end:3}.cds--max\\:col-end-4{grid-column-end:4}.cds--max\\:col-end-5{grid-column-end:5}.cds--max\\:col-end-6{grid-column-end:6}.cds--max\\:col-end-7{grid-column-end:7}.cds--max\\:col-end-8{grid-column-end:8}.cds--max\\:col-end-9{grid-column-end:9}.cds--max\\:col-end-10{grid-column-end:10}.cds--max\\:col-end-11{grid-column-end:11}.cds--max\\:col-end-12{grid-column-end:12}.cds--max\\:col-end-13{grid-column-end:13}.cds--max\\:col-end-14{grid-column-end:14}.cds--max\\:col-end-15{grid-column-end:15}.cds--max\\:col-end-16{grid-column-end:16}.cds--max\\:col-end-17{grid-column-end:17}.cds--max\\:col-start-auto{grid-column-start:auto}.cds--max\\:col-end-auto{grid-column-end:auto}}@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds--assistive-text,.cds--visually-hidden{clip:rect(0,0,0,0);block-size:1px;border:0;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;visibility:inherit;white-space:nowrap}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-background,#fff);color:var(--cds-text-primary,#161616);line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;text-rendering:optimizeLegibility}code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-heading-06-font-size,2.625rem);font-weight:var(--cds-heading-06-font-weight,300);letter-spacing:var(--cds-heading-06-letter-spacing,0);line-height:var(--cds-heading-06-line-height,1.199)}h2{font-size:var(--cds-heading-05-font-size,2rem);font-weight:var(--cds-heading-05-font-weight,400);letter-spacing:var(--cds-heading-05-letter-spacing,0);line-height:var(--cds-heading-05-line-height,1.25)}h3{font-size:var(--cds-heading-04-font-size,1.75rem);font-weight:var(--cds-heading-04-font-weight,400);letter-spacing:var(--cds-heading-04-letter-spacing,0);line-height:var(--cds-heading-04-line-height,1.28572)}h4{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}h5{font-size:var(--cds-heading-02-font-size,1rem);font-weight:var(--cds-heading-02-font-weight,600);letter-spacing:var(--cds-heading-02-letter-spacing,0);line-height:var(--cds-heading-02-line-height,1.5)}h6{font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);letter-spacing:var(--cds-heading-01-letter-spacing,.16px);line-height:var(--cds-heading-01-line-height,1.42857)}p{font-size:var(--cds-body-02-font-size,1rem);font-weight:var(--cds-body-02-font-weight,400);letter-spacing:var(--cds-body-02-letter-spacing,0);line-height:var(--cds-body-02-line-height,1.5)}a{color:var(--cds-link-primary,#0062fe)}em{font-style:italic}:host(c4d-video-player-container){display:block}.c4d--video-player,:host(c4d-video-player){color:var(--c4d--video-caption--color,var(--cds-text-secondary,#525252))}.c4d--video-player .c4d--image__img,:host(c4d-video-player) .c4d--image__img{block-size:100%;inline-size:100%}.c4d--video-player c4d-image,:host(c4d-video-player) c4d-image{padding-block-start:0}.c4d--video-player[background-mode] .c4d--video-player__video-container,:host(c4d-video-player[background-mode]) .c4d--video-player__video-container{block-size:100%}.c4d--video-player[background-mode] .c4d--video-player__video,.c4d--video-player[background-mode] ::slotted(.c4d--video-player__video),:host(c4d-video-player[background-mode]) .c4d--video-player__video,:host(c4d-video-player[background-mode]) ::slotted(.c4d--video-player__video){aspect-ratio:var(--native-file-aspect-ratio,16/9);inset:50% 0 0 50%;min-block-size:100%;min-inline-size:100%;translate:-50% -50%}.c4d--video-player[background-mode] .c4d--video-player__video[dir-mode=rtl],.c4d--video-player[background-mode] ::slotted(.c4d--video-player__video[dir-mode=rtl]),:host(c4d-video-player[background-mode]) .c4d--video-player__video[dir-mode=rtl],:host(c4d-video-player[background-mode]) ::slotted(.c4d--video-player__video[dir-mode=rtl]){inset:50% -50% 0 50%}@media (max-width:65.98rem){.c4d--video-player[background-mode] .c4d--video-player__video[dir-mode=rtl],.c4d--video-player[background-mode] ::slotted(.c4d--video-player__video[dir-mode=rtl]),:host(c4d-video-player[background-mode]) .c4d--video-player__video[dir-mode=rtl],:host(c4d-video-player[background-mode]) ::slotted(.c4d--video-player__video[dir-mode=rtl]){inset:50% -67% 0 50%}}.c4d--video-player .c4d--video-player__image-overlay:focus:before{border:1px solid var(--cds-focus-inverse,#fff);content:" ";inset:.125rem;outline:.125rem solid var(--cds-focus,#0f62fe);position:absolute;z-index:1}.c4d--video-player .c4d--image,:host(c4d-video-player) c4d-image{block-size:100%;inline-size:100%;position:relative}.c4d--video-player .c4d--image:before,:host(c4d-video-player) c4d-image:before{background-color:var(--cds-border-inverse,#161616);block-size:100%;content:"";inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:0;position:absolute;transition:opacity .15s cubic-bezier(.2,0,.38,.9);z-index:1}@media screen and (prefers-reduced-motion:reduce){.c4d--video-player .c4d--image:before,:host(c4d-video-player) c4d-image:before{transition:none}}.c4d--video-player .c4d--image:hover:before,:host(c4d-video-player) c4d-image:hover:before{opacity:.08}.c4d--video-player__video-container{block-size:0;display:block;inline-size:100%;overflow:hidden;padding-block-start:56.25%;position:relative}.c4d--video-player__video-container:focus{outline:none}.c4d--video-player__video-container .c4d--video-player__video,.c4d--video-player__video-container ::slotted(.c4d--video-player__video){inset:0;position:absolute}.c4d--video-player__video-container.c4d--video-player__aspect-ratio--16x9{block-size:0;overflow:hidden;overflow:visible;padding-block-start:56.25%;position:relative}.c4d--video-player__video-container.c4d--video-player__aspect-ratio--9x16{block-size:0;overflow:hidden;overflow:visible;padding-block-start:177.7777777778%;position:relative}.c4d--video-player__video-container.c4d--video-player__aspect-ratio--2x1{block-size:0;overflow:hidden;overflow:visible;padding-block-start:50%;position:relative}.c4d--video-player__video-container.c4d--video-player__aspect-ratio--1x2{block-size:0;overflow:hidden;overflow:visible;padding-block-start:200%;position:relative}.c4d--video-player__video-container.c4d--video-player__aspect-ratio--4x3{block-size:0;overflow:hidden;overflow:visible;padding-block-start:75%;position:relative}.c4d--video-player__video-container.c4d--video-player__aspect-ratio--3x4{block-size:0;overflow:hidden;overflow:visible;padding-block-start:133.3333333333%;position:relative}.c4d--video-player__video-container.c4d--video-player__aspect-ratio--1x1{block-size:0;overflow:hidden;overflow:visible;padding-block-start:100%;position:relative}.c4d--video-player__video-caption{font-size:var(--cds-caption-02-font-size,.875rem);font-weight:var(--cds-caption-02-font-weight,400);letter-spacing:var(--cds-caption-02-letter-spacing,.32px);line-height:var(--cds-caption-02-line-height,1.28572);max-inline-size:90%;padding-block-start:var(--c4d--video-caption--padding,.5rem)}.c4d--video-player__video-caption[dir=rtl]{direction:rtl;text-align:end;unicode-bidi:-moz-plaintext;unicode-bidi:plaintext}.c4d--video-player__image-overlay{block-size:100%;border:none;cursor:pointer;inline-size:100%;padding:0}.c4d--video-player__image-overlay:focus{outline:3px solid var(--cds-focus,#0f62fe);outline-offset:1px}.c4d--video-player__image-overlay:active svg circle,.c4d--video-player__image-overlay:hover svg circle{fill:#161616;opacity:.9}.c4d--video-player__image-overlay:active svg path,.c4d--video-player__image-overlay:hover svg path{fill:var(--cds-icon-on-color,#fff)}.c4d--video-player__image-overlay svg{inset-block-start:calc(50% - 2rem);inset-inline-end:calc(50% - 2rem);position:absolute}.c4d--video-player__image-overlay svg circle,.c4d--video-player__image-overlay svg path{transition:fill .15s cubic-bezier(.2,0,.38,.9),opacity .15s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.c4d--video-player__image-overlay svg circle,.c4d--video-player__image-overlay svg path{transition:none}}.c4d--video-player__image-overlay svg circle{opacity:.8}.c4d--video-player .c4d--video-player__image-overlay:active .c4d--image:before,.c4d--video-player .c4d--video-player__image-overlay:active c4d-image:before,:host(c4d-video-player) .c4d--video-player__image-overlay:active .c4d--image:before,:host(c4d-video-player) .c4d--video-player__image-overlay:active c4d-image:before{opacity:.12}.c4d--video-player__toggle-playback{background-color:var(--cds-overlay,rgba(0,0,0,.6));block-size:3rem;border:0;color:#fff;inline-size:3rem;padding:.875rem;position:absolute;z-index:100}.c4d--video-player__toggle-playback--top-left{inset-block-start:0;inset-inline-start:0}.c4d--video-player__toggle-playback--top-right{inset-block-start:0;inset-inline-end:0}.c4d--video-player__toggle-playback--bottom-right{inset-block-end:0;inset-inline-end:0}.c4d--video-player__toggle-playback--bottom-left{inset-block-end:0;inset-inline-start:0}.c4d--video-player__toggle-playback:hover{background-color:hsla(0,0%,9%,.9);cursor:pointer}.c4d--video-player__toggle-playback:focus{outline:2px solid var(--cds-focus,#0f62fe)}:host(c4d-video-player[intersection-mode]) ::slotted(.c4d--video-player__video){pointer-events:none}',
+]);