@sapudex/web-components 2.14.0 → 2.15.0

package/src/themes/MediaPlayer.css

@@ -17,10 +17,9 @@
   --udex-media-player-fullscreen-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M486 0q11 0 18.5 7.5T512 26v108q0 11-7.5 18.5T486 160t-18-7.5-7-18.5V87l-97 97q-8 8-18 8-11 0-18.5-7.5T320 166q0-10 8-18l97-97h-47q-11 0-18.5-7T352 26t7.5-18.5T378 0h108zM230 32q11 0 18.5 7.5T256 58t-7.5 18-18.5 7H90q-7 0-7 7v140q0 11-7 18.5T58 256t-18.5-7.5T32 230V90q0-24 17-41t41-17h140zm224 224q11 0 18.5 7.5T480 282v140q0 24-17 41t-41 17H282q-11 0-18.5-7.5T256 454t7.5-18 18.5-7h140q7 0 7-7V282q0-11 7-18.5t18-7.5zm-306 71q7-7 18-7t18.5 7.5T192 346t-7 18l-98 97h47q11 0 18.5 7t7.5 18-7.5 18.5T134 512H26q-11 0-18.5-7.5T0 486V378q0-11 7.5-18.5T26 352t18 7.5 7 18.5v47z"></path></svg>');
   --udex-media-player-exit-fullscreen-icon: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M8.53125 14.1562C8.875 14.1562 9.15625 14.2812 9.375 14.5312C9.625 14.75 9.75 15.0312 9.75 15.375V21.375C9.75 21.7188 9.625 22 9.375 22.2188C9.15625 22.4375 8.875 22.5469 8.53125 22.5469C8.1875 22.5469 7.90625 22.4375 7.6875 22.2188C7.46875 22 7.35938 21.7188 7.35938 21.375V18.2812L4.03125 21.5625C3.8125 21.7812 3.53125 21.8906 3.1875 21.8906C2.84375 21.8906 2.5625 21.7812 2.34375 21.5625C2.09375 21.3125 1.96875 21.0312 1.96875 20.7188C1.96875 20.4062 2.09375 20.125 2.34375 19.875L5.625 16.5938H2.53125C2.1875 16.5938 1.90625 16.4844 1.6875 16.2656C1.46875 16.0156 1.35938 15.7188 1.35938 15.375C1.35938 15.0312 1.46875 14.75 1.6875 14.5312C1.90625 14.2812 2.1875 14.1562 2.53125 14.1562H8.53125ZM21.7031 6.98438C22.0469 6.98438 22.3281 7.10938 22.5469 7.35938C22.7969 7.57812 22.9219 7.85938 22.9219 8.20312C22.9219 8.54688 22.7969 8.82812 22.5469 9.04688C22.3281 9.26562 22.0469 9.375 21.7031 9.375H15.75C15.4062 9.375 15.1094 9.26562 14.8594 9.04688C14.6406 8.82812 14.5312 8.54688 14.5312 8.20312V2.20312C14.5312 1.85938 14.6406 1.57812 14.8594 1.35938C15.1094 1.10937 15.4062 0.984375 15.75 0.984375C16.0938 0.984375 16.375 1.10937 16.5938 1.35938C16.8125 1.57812 16.9219 1.85938 16.9219 2.20312V5.29688L20.2031 2.01562C20.4531 1.76562 20.7344 1.64062 21.0469 1.64062C21.3906 1.64062 21.6875 1.76562 21.9375 2.01562C22.1562 2.26562 22.2656 2.54688 22.2656 2.85938C22.2656 3.17188 22.1562 3.45312 21.9375 3.70312L18.6094 6.98438H21.7031ZM4.92188 10.5C4.54688 10.5 4.23438 10.3906 3.98438 10.1719C3.76562 9.95312 3.65625 9.65625 3.65625 9.28125V6.75C3.65625 5.6875 4.01562 4.79688 4.73438 4.07812C5.45312 3.35938 6.34375 3 7.40625 3H9.89062C10.2656 3 10.5625 3.125 10.7812 3.375C11.0312 3.59375 11.1562 3.89062 11.1562 4.26562C11.1562 4.64062 11.0312 4.95312 10.7812 5.20312C10.5625 5.42188 10.2656 5.53125 9.89062 5.53125H7.40625C6.59375 5.53125 6.1875 5.9375 6.1875 6.75V9.28125C6.1875 9.65625 6.0625 9.95312 5.8125 10.1719C5.59375 10.3906 5.29688 10.5 4.92188 10.5ZM20.5312 13.4531C20.9062 13.4531 21.2031 13.5781 21.4219 13.8281C21.6406 14.0469 21.75 14.3438 21.75 14.7188V17.2031C21.75 18.2656 21.3906 19.1562 20.6719 19.875C19.9844 20.5938 19.0938 20.9531 18 20.9531H15.5156C15.1406 20.9531 14.8438 20.8438 14.625 20.625C14.4062 20.375 14.2969 20.0625 14.2969 19.6875C14.2969 19.3125 14.4062 19.0156 14.625 18.7969C14.8438 18.5469 15.1406 18.4219 15.5156 18.4219H18.0469C18.3906 18.4219 18.6719 18.3125 18.8906 18.0938C19.1406 17.875 19.2656 17.5781 19.2656 17.2031V14.6719C19.2656 14.2969 19.375 14 19.5938 13.7812C19.8438 13.5625 20.1562 13.4531 20.5312 13.4531Z" fill="white"/></svg>');
   --udex-media-player-close-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="m292 256 117 116q7 7 7 18 0 12-7.5 19t-18.5 7q-10 0-18-8L256 292 140 408q-8 8-18 8-11 0-18.5-7.5T96 390q0-10 8-18l116-116-116-116q-8-8-8-18 0-11 7.5-18.5T122 96t18 7l116 117 116-117q7-7 18-7t18.5 7.5T416 122t-7 18z"></path></svg>');
-  --udex-media-player-big-play-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M256 0q53 0 100 20t81.5 54.5T492 156t20 100-20 100-54.5 81.5T356 492t-100 20-100-20-81.5-54.5T20 356 0 256t20-100 54.5-81.5T156 20 256 0zm0 461q43 0 80.5-16t65-44 43.5-65 16-80-16-80.5-43.5-65-65-43.5T256 51t-80 16-65 43.5-44 65T51 256t16 80 44 65 65 44 80 16zm85-226q11 8 11 21t-11 21l-109 77q-7 5-14 5-11 0-18.5-7.5T192 333V179q0-11 7.5-18.5T218 153q7 0 14 5z"></path></svg>')
+  --udex-media-player-big-play-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M256 0q53 0 100 20t81.5 54.5T492 156t20 100-20 100-54.5 81.5T356 492t-100 20-100-20-81.5-54.5T20 356 0 256t20-100 54.5-81.5T156 20 256 0zm0 461q43 0 80.5-16t65-44 43.5-65 16-80-16-80.5-43.5-65-65-43.5T256 51t-80 16-65 43.5-44 65T51 256t16 80 44 65 65 44 80 16zm85-226q11 8 11 21t-11 21l-109 77q-7 5-14 5-11 0-18.5-7.5T192 333V179q0-11 7.5-18.5T218 153q7 0 14 5z"></path></svg>');
 }
 
-
 .udex-media-player__container {
   display: flex;
   align-items: center;
@@ -32,7 +31,6 @@
   height: var(--udex-media-player-height);
 }
 
-
 /* Video-js library styles */
 
 .vjs-svg-icon {
@@ -45,14 +43,17 @@
 }
 
 .vjs-svg-icon:before {
-  content: none!important
+  content: none !important;
 }
 
 .vjs-control:focus .vjs-svg-icon,.vjs-svg-icon:hover {
   filter: drop-shadow(0 0 .25em #fff)
 }
 
-.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-modal-dialog,.vjs-button>.vjs-icon-placeholder:before,.vjs-modal-dialog .vjs-modal-dialog-content {
+.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
+.video-js .vjs-modal-dialog,
+.vjs-button>.vjs-icon-placeholder:before,
+.vjs-modal-dialog .vjs-modal-dialog-content {
   height: 100%;
   left: 0;
   position: absolute;
@@ -60,7 +61,8 @@
   width: 100%
 }
 
-.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.vjs-button>.vjs-icon-placeholder:before {
+.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
+.vjs-button>.vjs-icon-placeholder:before {
   text-align: center
 }
 
@@ -86,15 +88,17 @@
 }
 
 .video-js:-webkit-full-screen {
-  height: 100%!important;
-  width: 100%!important
+  height: 100% !important;
+  width: 100% !important
 }
 
 .video-js[tabindex="-1"] {
   outline: none
 }
 
-.video-js *,.video-js :after,.video-js :before {
+.video-js *,
+.video-js :after,
+.video-js :before {
   box-sizing: inherit
 }
 
@@ -106,12 +110,20 @@
   margin: 0
 }
 
-.video-js.vjs-1-1,.video-js.vjs-16-9,.video-js.vjs-4-3,.video-js.vjs-9-16,.video-js.vjs-fluid {
+.video-js.vjs-1-1,
+.video-js.vjs-16-9,
+.video-js.vjs-4-3,
+.video-js.vjs-9-16,
+.video-js.vjs-fluid {
   max-width: 100%;
   width: 100%
 }
 
-.video-js.vjs-1-1:not(.vjs-audio),.video-js.vjs-16-9:not(.vjs-audio),.video-js.vjs-4-3:not(.vjs-audio),.video-js.vjs-9-16:not(.vjs-audio),.video-js.vjs-fluid:not(.vjs-audio){
+.video-js.vjs-1-1:not(.vjs-audio),
+.video-js.vjs-16-9:not(.vjs-audio),
+.video-js.vjs-4-3:not(.vjs-audio),
+.video-js.vjs-9-16:not(.vjs-audio),
+.video-js.vjs-fluid:not(.vjs-audio) {
   height: 0
 }
 
@@ -137,11 +149,6 @@
   width: 100%
 }
 
-
-.video-js.vjs-audio .vjs-tech {
-  display: none
-}
-
 .vjs-lock-showing {
   display: block!important;
   opacity: 1!important;
@@ -174,22 +181,13 @@
   width: 1em
 }
 
-.vjs-controls-disabled .vjs-big-play-button,
-.vjs-error .vjs-big-play-button,
-.vjs-has-started .vjs-big-play-button,
-.vjs-using-native-controls .vjs-big-play-button {
-  display: none;
-}
-
-.vjs-has-started.vjs-paused:not(.vjs-audio):not(.vjs-controls-disabled) .vjs-big-play-button {
-  display: block;
-}
-
+.vjs-has-started.vjs-paused:not(.vjs-audio):not(.vjs-controls-disabled) .vjs-big-play-button,
 .vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking,.vjs-scrubbing,.vjs-error) .vjs-big-play-button {
   display: block;
 }
 
-.js-focus-visible .vjs-menu :not(.vjs-selected):focus:not(.focus-visible),.video-js .vjs-menu :not(.vjs-selected):focus:not(:focus-visible) {
+.js-focus-visible .vjs-menu :not(.vjs-selected):focus:not(.focus-visible),
+.video-js .vjs-menu :not(.vjs-selected):focus:not(:focus-visible) {
   background: none
 }
 
@@ -200,7 +198,8 @@
   visibility: visible
 }
 
-.video-js .vjs-control:focus,.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before {
+.video-js .vjs-control:focus,.video-js .vjs-control:focus:before,
+.video-js .vjs-control:hover:before {
   text-shadow: 0 0 1em #fff
 }
 
@@ -248,19 +247,10 @@
   }
 }
 
-.video-js.vjs-audio .vjs-captions-button {
-  display: none
-}
-
 .vjs-chapters-button .vjs-menu ul {
   width: 24em
 }
 
-.video-js.vjs-audio .vjs-descriptions-button {
-  display: none
-}
-
-
 @supports (display: grid) {
   .vjs-text-track-settings .vjs-modal-dialog-content {
       display:grid;
@@ -277,7 +267,9 @@
       grid-column: 1/-1
   }
 
-  .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content {
+  .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,
+  .vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content,
+  .vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content {
       grid-template-columns: 1fr
   }
 }
@@ -313,7 +305,10 @@
 }
 
 @media (max-width: 520px) {
-  .vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-now-playing-text,.vjs-mouse.vjs-playlist .vjs-up-next .vjs-up-next-text,.vjs-playlist .vjs-selected .vjs-playlist-now-playing-text,.vjs-playlist .vjs-up-next .vjs-up-next-text {
+  .vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-now-playing-text,
+  .vjs-mouse.vjs-playlist .vjs-up-next .vjs-up-next-text,
+  .vjs-playlist .vjs-selected .vjs-playlist-now-playing-text,
+  .vjs-playlist .vjs-up-next .vjs-up-next-text {
       display:none
   }
 }
@@ -331,7 +326,8 @@
 }
 
 
-.vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog {
+.vjs-modal-dialog .vjs-modal-dialog-content,
+.video-js .vjs-modal-dialog {
   position: absolute;
   top: 0;
   left: 0;
@@ -378,7 +374,11 @@
   max-width: 100%;
 }
 
-.video-js.vjs-1-1,.video-js.vjs-16-9,.video-js.vjs-4-3,.video-js.vjs-9-16,.video-js.vjs-fluid {
+.video-js.vjs-1-1,
+.video-js.vjs-16-9,
+.video-js.vjs-4-3,
+.video-js.vjs-9-16,
+.video-js.vjs-fluid {
   max-width: 100%;
   width: 100%
 }
@@ -459,15 +459,13 @@ body.vjs-pip-window .video-js {
 .video-js .vjs-big-play-button:focus,
 .video-js .vjs-big-play-button:focus-within,
 .video-js .vjs-big-play-button:focus:not(:focus-visible) {
-  outline: var(--udexColorBlue9) auto 2px;
+  box-shadow: 0 0 0 2px var(--udexColorBlue9);
 }
 
 .video-js .vjs-big-play-button {
-  font-size: 3em;
   height: 20%;
   max-height: 100px;
   max-width: 100px;
-  width: auto;
   display: block;
   position: absolute;
   top: 50%;
@@ -479,7 +477,27 @@ body.vjs-pip-window .video-js {
   background-color: rgba(0, 0, 0, 0.4);
   border-radius: 50%;
   transition: all 0.4s;
-  line-height: 0;
+}
+
+.video-js .vjs-big-play-button .vjs-icon-placeholder {
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-radius: 50%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
+  content: var(--udex-media-player-big-play-icon);
+  border-radius: 50%;
+  right: 0;
+  bottom: 0;
+  display: block;
+  text-align: inherit;
 }
 
 .video-js .vjs-big-play-button [ui5-icon] {
@@ -503,28 +521,11 @@ body.vjs-pip-window .video-js {
   width: calc(20% / 0.5625);
 }
 
-.video-js .vjs-big-play-button:before {
-  line-height: inherit;
-  vertical-align: middle;
-}
-.video-js .vjs-big-play-button:before {
-  content: var(--udex-media-player-big-play-icon);
-  width: 100%;
-  height: 100%;
-}
-
 .video-js:hover .vjs-big-play-button,
 .video-js .vjs-big-play-button:focus {
   transition: all 0s;
 }
 
-.vjs-controls-disabled .vjs-big-play-button,
-.vjs-has-started .vjs-big-play-button,
-.vjs-using-native-controls .vjs-big-play-button,
-.vjs-error .vjs-big-play-button {
-  display: none;
-}
-
 .vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking, .vjs-scrubbing, .vjs-error) .vjs-big-play-button {
   display: block;
 }
@@ -582,10 +583,6 @@ body.vjs-pip-window .video-js {
   cursor: default;
 }
 
-.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu {
-  display: none;
-}
-
 .vjs-menu .vjs-menu-content {
   display: block;
   padding: 0;
@@ -597,10 +594,6 @@ body.vjs-pip-window .video-js {
   box-sizing: border-box;
 }
 
-.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
-  display: none;
-}
-
 .vjs-menu li {
   display: flex;
   justify-content: center;
@@ -875,10 +868,6 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   background-image: var(--udex-media-player-close-icon);
 }
 
-.vjs-playback-rate > .vjs-icon-placeholder:before {
-  display: none;
-}
-
 .vjs-button > .vjs-icon-placeholder {
   display: block;
 }
@@ -903,10 +892,6 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   width: 1px;
 }
 
-.video-js .vjs-custom-control-spacer {
-  display: none;
-}
-
 .video-js .vjs-progress-control {
   cursor: pointer;
   flex: auto;
@@ -920,10 +905,6 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   cursor: default;
 }
 
-.vjs-live .vjs-progress-control {
-  display: none;
-}
-
 .vjs-liveui .vjs-progress-control {
   display: flex;
   align-items: center;
@@ -1014,10 +995,6 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   z-index: 1;
 }
 
-.video-js .vjs-progress-holder:focus .vjs-time-tooltip {
-  display: none;
-}
-
 .video-js .vjs-progress-control:hover .vjs-time-tooltip,
 .video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
   display: block;
@@ -1309,11 +1286,6 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   height: 100%;
 }
 
-.vjs-has-started .vjs-poster,
-.vjs-using-native-controls .vjs-poster {
-  display: none;
-}
-
 .vjs-audio.vjs-has-started .vjs-poster,
 .vjs-has-started.vjs-audio-poster-mode .vjs-poster,
 .vjs-pip-container.vjs-has-started .vjs-poster {
@@ -1335,11 +1307,6 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   line-height: 3em;
 }
 
-.video-js:not(.vjs-live) .vjs-live-control,
-.video-js.vjs-liveui .vjs-live-control {
-  display: none;
-}
-
 .video-js .vjs-seek-to-live-control {
   align-items: center;
   cursor: pointer;
@@ -1354,11 +1321,6 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   min-width: 4em;
 }
 
-.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,
-.video-js:not(.vjs-live) .vjs-seek-to-live-control {
-  display: none;
-}
-
 .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge {
   cursor: auto;
 }
@@ -1395,13 +1357,6 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   width: auto;
 }
 
-.vjs-live .vjs-time-control,
-.vjs-live .vjs-time-divider,
-.video-js .vjs-current-time,
-.video-js .vjs-duration {
-  display: none;
-}
-
 .vjs-time-divider {
   display: none;
   line-height: 3em;
@@ -1424,10 +1379,6 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
   pointer-events: none;
 }
 
-.vjs-error .vjs-text-track-display {
-  display: none;
-}
-
 .video-js.vjs-controls-disabled .vjs-text-track-display,
 .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
   bottom: var(--udex-media-player-controls-bar-height);
@@ -1465,19 +1416,11 @@ video::-webkit-media-text-track-display {
   flex: none;
 }
 
-.vjs-pip-window .vjs-picture-in-picture-control {
-  display: none;
-}
-
 .video-js .vjs-fullscreen-control {
   cursor: pointer;
   flex: none;
 }
 
-.vjs-pip-window .vjs-fullscreen-control {
-  display: none;
-}
-
 .vjs-playback-rate > .vjs-menu-button,
 .vjs-playback-rate .vjs-playback-rate-value {
   position: absolute;
@@ -1522,10 +1465,6 @@ video::-webkit-media-text-track-display {
   width: 5em
 }
 
-.vjs-seeking.vjs-paused .vjs-loading-spinner, .vjs-waiting.vjs-paused .vjs-loading-spinner, .vjs-paused .vjs-loading-spinner {
-  display: none;
-}
-
 .vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner {
   align-items: center;
   animation: vjs-spinner-show 0s linear .3s forwards;
@@ -1533,10 +1472,6 @@ video::-webkit-media-text-track-display {
   justify-content: center
 }
 
-.vjs-error .vjs-loading-spinner {
-  display: none
-}
-
 .vjs-loading-spinner:after,.vjs-loading-spinner:before {
   border: inherit;
   border-color: #fff #0000 #0000;
@@ -1584,31 +1519,11 @@ video::-webkit-media-text-track-display {
   margin-bottom: -0.1em;
 }
 
-.video-js.vjs-layout-small .vjs-current-time,
-.video-js.vjs-layout-small .vjs-time-divider,
-.video-js.vjs-layout-small .vjs-duration,
-.video-js.vjs-layout-small .vjs-remaining-time,
-.video-js.vjs-layout-small .vjs-playback-rate,
-.video-js.vjs-layout-small .vjs-volume-control, .video-js.vjs-layout-x-small .vjs-current-time,
-.video-js.vjs-layout-x-small .vjs-time-divider,
-.video-js.vjs-layout-x-small .vjs-duration,
-.video-js.vjs-layout-x-small .vjs-remaining-time,
-.video-js.vjs-layout-x-small .vjs-playback-rate,
-.video-js.vjs-layout-x-small .vjs-volume-control, .video-js.vjs-layout-tiny .vjs-current-time,
-.video-js.vjs-layout-tiny .vjs-time-divider,
-.video-js.vjs-layout-tiny .vjs-duration,
-.video-js.vjs-layout-tiny .vjs-remaining-time,
-.video-js.vjs-layout-tiny .vjs-playback-rate,
-.video-js.vjs-layout-tiny .vjs-volume-control {
-  display: none;
-}
 .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover {
   width: auto;
   width: initial;
 }
-.video-js.vjs-layout-x-small .vjs-progress-control, .video-js.vjs-layout-tiny .vjs-progress-control {
-  display: none;
-}
+
 .video-js.vjs-layout-x-small .vjs-custom-control-spacer {
   flex: auto;
   display: block;
@@ -1621,10 +1536,6 @@ video::-webkit-media-text-track-display {
   height: 70%;
 }
 
-.vjs-error .vjs-text-track-settings {
-  display: none;
-}
-
 .vjs-text-track-settings .vjs-modal-dialog-content {
   display: table;
 }
@@ -1711,10 +1622,6 @@ video::-webkit-media-text-track-display {
   width: 100%;
 }
 
-.vjs-error .vjs-title-bar {
-  display: none;
-}
-
 .vjs-title-bar-title,
 .vjs-title-bar-description {
   margin: 0;
@@ -1733,21 +1640,11 @@ video::-webkit-media-text-track-display {
   transition: opacity 1s;
 }
 
-.video-js .vjs-skip-forward-5 {
-  cursor: pointer;
-}
-.video-js .vjs-skip-forward-10 {
-  cursor: pointer;
-}
-.video-js .vjs-skip-forward-30 {
-  cursor: pointer;
-}
-.video-js .vjs-skip-backward-5 {
-  cursor: pointer;
-}
-.video-js .vjs-skip-backward-10 {
-  cursor: pointer;
-}
+.video-js .vjs-skip-forward-5,
+.video-js .vjs-skip-forward-10,
+.video-js .vjs-skip-forward-30,
+.video-js .vjs-skip-backward-5,
+.video-js .vjs-skip-backward-10,
 .video-js .vjs-skip-backward-30 {
   cursor: pointer;
 }
@@ -1762,19 +1659,11 @@ video::-webkit-media-text-track-display {
   z-index: -1000;
 }
 
+.video-js *:focus:not(:focus-visible),
 .js-focus-visible .video-js *:focus:not(.focus-visible) {
   outline: none;
 }
 
-.video-js *:focus:not(:focus-visible) {
-  outline: none;
-}
-
-.vjs-audio .vjs-big-play-button
-{
-  display: none;
-}
-
 .vjs-audio .vjs-control-bar{
   display: flex;
 }
@@ -1792,14 +1681,15 @@ video::-webkit-media-text-track-display {
 .udex-media-player__iframe-poster .udex-media-player__vjs-poster {
   display: inline-block;
   vertical-align: middle;
-  margin: 0px;
-  padding: 0px;
-  inset: 0px;
+  margin: 0;
+  padding: 0;
+  inset: 0;
 }
 
 .udex-media-player__iframe-poster .udex-media-player__vjs-poster .vjs-big-play-button{
   cursor: pointer;
 }
+
 .udex-media-player__iframe-poster .udex-media-player__vjs-poster .vjs-big-play-button:before {
   content: '';
 }
@@ -1911,6 +1801,61 @@ video::-webkit-media-text-track-display {
   position: relative;
 }
 
+.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu,
+.vjs-playback-rate > .vjs-icon-placeholder:before,
+.video-js .vjs-custom-control-spacer,
+.vjs-live .vjs-progress-control,
+.video-js .vjs-progress-holder:focus .vjs-time-tooltip,
+.vjs-has-started .vjs-poster,
+.vjs-using-native-controls .vjs-poster,
+.video-js:not(.vjs-live) .vjs-live-control,
+.video-js.vjs-liveui .vjs-live-control,
+.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,
+.video-js:not(.vjs-live) .vjs-seek-to-live-control,
+.vjs-live .vjs-time-control,
+.vjs-live .vjs-time-divider,
+.video-js .vjs-current-time,
+.video-js .vjs-duration,
+.vjs-error .vjs-text-track-display,
+.vjs-pip-window .vjs-picture-in-picture-control,
+.vjs-pip-window .vjs-fullscreen-control,
+.vjs-error .vjs-loading-spinner,
+.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu,
+.vjs-seeking.vjs-paused .vjs-loading-spinner,
+.vjs-waiting.vjs-paused .vjs-loading-spinner,
+.vjs-paused .vjs-loading-spinner,
+.video-js.vjs-layout-small .vjs-current-time,
+.video-js.vjs-layout-small .vjs-time-divider,
+.video-js.vjs-layout-small .vjs-duration,
+.video-js.vjs-layout-small .vjs-remaining-time,
+.video-js.vjs-layout-small .vjs-playback-rate,
+.video-js.vjs-layout-small .vjs-volume-control,
+.video-js.vjs-layout-x-small .vjs-current-time,
+.video-js.vjs-layout-x-small .vjs-time-divider,
+.video-js.vjs-layout-x-small .vjs-duration,
+.video-js.vjs-layout-x-small .vjs-remaining-time,
+.video-js.vjs-layout-x-small .vjs-playback-rate,
+.video-js.vjs-layout-x-small .vjs-volume-control,
+.video-js.vjs-layout-tiny .vjs-current-time,
+.video-js.vjs-layout-tiny .vjs-time-divider,
+.video-js.vjs-layout-tiny .vjs-duration,
+.video-js.vjs-layout-tiny .vjs-remaining-time,
+.video-js.vjs-layout-tiny .vjs-playback-rate,
+.video-js.vjs-layout-tiny .vjs-volume-control,
+.video-js.vjs-layout-x-small .vjs-progress-control,
+.video-js.vjs-layout-tiny .vjs-progress-control,
+.vjs-error .vjs-text-track-settings,
+.vjs-error .vjs-title-bar,
+.vjs-audio .vjs-big-play-button,
+.video-js.vjs-audio .vjs-tech,
+.vjs-controls-disabled .vjs-big-play-button,
+.vjs-has-started .vjs-big-play-button,
+.vjs-using-native-controls .vjs-big-play-button,
+.video-js.vjs-audio .vjs-descriptions-button,
+.video-js.vjs-audio .vjs-captions-button,
+.vjs-error .vjs-big-play-button {
+  display: none;
+}
 
 @media (width < 680px) {
   .vjs-modal-dialog.vjs-text-track-settings .vjs-modal-dialog-content {
@@ -1920,7 +1865,9 @@ video::-webkit-media-text-track-display {
     right: var(--udexSpacer24);
     top: var(--udexSpacer16);
   }
-  .vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-colors, .vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-font, .vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls {
+  .vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-colors,
+  .vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-font,
+  .vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls {
     gap: var(--udexSpacer8);
   }
   .vjs-modal-dialog.vjs-text-track-settings legend {

package/src/utils/sanitizeString.ts

@@ -0,0 +1,13 @@
+const sanitizeString = (str: string) => {
+  const sanitized = str
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+
+  return sanitized.replace(/&lt;b&gt;/g, "<b>")
+    .replace(/&lt;\/b&gt;/g, "</b>");
+};
+
+export default sanitizeString;

package/dist/generated/templates/BreadcrumbsPopoverTemplate.lit.d.ts

@@ -1,3 +0,0 @@
-type BreadcrumbsPopover = any;
-declare function template(this: BreadcrumbsPopover): import("lit-html").TemplateResult;
-export default template;

package/dist/generated/templates/BreadcrumbsPopoverTemplate.lit.js

@@ -1,12 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import { html, repeat, ifDefined, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getCustomElementsScopingSuffix } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
-function block0(context, tags, suffix) { return suffix ? html `<${scopeTag("udex-dropdown", tags, suffix)} id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}" @close="${this._afterDropdownClose}" @open="${this._afterDropdownOpen}"><div class="udex-breadcrumbs__popover-content">${repeat(this._dropdownItems, (item, index) => item._id || index, (item, index) => block1.call(this, context, tags, suffix, item, index))}</div></${scopeTag("udex-dropdown", tags, suffix)}>` : html `<udex-dropdown id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}" @close="${this._afterDropdownClose}" @open="${this._afterDropdownOpen}"><div class="udex-breadcrumbs__popover-content">${repeat(this._dropdownItems, (item, index) => item._id || index, (item, index) => block1.call(this, context, tags, suffix, item, index))}</div></udex-dropdown>`; }
-function block1(context, tags, suffix, item, index) { return html `${item.icon ? block2.call(this, context, tags, suffix, item, index) : block3.call(this, context, tags, suffix, item, index)}`; }
-function block2(context, tags, suffix, item, index) { return suffix ? html `<${scopeTag("udex-link", tags, suffix)} index="${index}" id="${ifDefined(item._id)}-li" @ui5-click="${ifDefined(this._onDropdownLinkPress)}" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--with-icon udex-breadcrumbs__item--hidden udex-breadcrumbs__item--${index}" icon="${ifDefined(item.icon)}" accessible-name="${ifDefined(item.textContent)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</${scopeTag("udex-link", tags, suffix)}>` : html `<udex-link index="${index}" id="${ifDefined(item._id)}-li" @ui5-click="${ifDefined(this._onDropdownLinkPress)}" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--with-icon udex-breadcrumbs__item--hidden udex-breadcrumbs__item--${index}" icon="${ifDefined(item.icon)}" accessible-name="${ifDefined(item.textContent)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</udex-link>`; }
-function block3(context, tags, suffix, item, index) { return html `${item._isCurrentPageItem ? block4.call(this, context, tags, suffix, item, index) : block5.call(this, context, tags, suffix, item, index)}`; }
-function block4(context, tags, suffix, item, index) { return html `<span id="${ifDefined(item._id)}-li" class="udex-breadcrumbs__item udex-breadcrumb__item--current udex-breadcrumbs__item--hidden udex-breadcrumbs__item--${index}" accessible-name="${ifDefined(item.accessibleName)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</span>`; }
-function block5(context, tags, suffix, item, index) { return suffix ? html `<${scopeTag("udex-link", tags, suffix)} index="${index}" id="${ifDefined(item._id)}-li" @ui5-click="${ifDefined(this._onDropdownLinkPress)}" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--hidden udex-breadcrumbs__item--${index}" accessible-name="${ifDefined(item.accessibleName)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</${scopeTag("udex-link", tags, suffix)}>` : html `<udex-link index="${index}" id="${ifDefined(item._id)}-li" @ui5-click="${ifDefined(this._onDropdownLinkPress)}" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--hidden udex-breadcrumbs__item--${index}" accessible-name="${ifDefined(item.accessibleName)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</udex-link>`; }
-function template() { return block0.call(this, this, this.constructor.tagsToScope, getCustomElementsScopingSuffix()); }
-export default template;
-//# sourceMappingURL=BreadcrumbsPopoverTemplate.lit.js.map