@itcenteratunihelsinki/huds-lib 0.8.72 → 0.8.74

package/components/hy-video.js

@@ -1,158 +1,157 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './index3.js';
 import { H as HeadingVarians } from './utils.js';
 import { d as defineCustomElement$4 } from './hy-box2.js';
 import { d as defineCustomElement$3 } from './heading.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const hyVideoCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}a.hy-video{text-decoration:none}.hy-video__video-container{aspect-ratio:16/9;display:inline-block;margin-bottom:22px;position:relative;width:100%}.hy-video__video-container iframe{border:0;height:100%;overflow:hidden;width:100%}@supports (aspect-ratio: 16/9){.hy-video__video-container iframe{aspect-ratio:16/9;height:auto}}.hy-video__video-container .hy-video__preview-image{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.hy-video__video-container .hy-video__play{background-color:var(--grayscale-white);left:50%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.hy-video__video-container .hy-video__play button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:transparent;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:24px}@media (min-width: 30rem){.hy-video__video-container .hy-video__play button{padding:36px}}.hy-video__video-container .hy-video__play button:hover{cursor:pointer}.hy-video__video-container .hy-video__play button .hy-video__button-label{font-size:0.9375rem;line-height:18px;color:var(--link-blue);font-family:var(--main-font-family);font-weight:bold;letter-spacing:-0.1px;text-align:center;text-transform:uppercase}@media (min-width: 30rem){.hy-video__video-container .hy-video__play button .hy-video__button-label{font-size:1.0625rem;line-height:20px;letter-spacing:-0.14px}}@media (min-width: 75.0625rem){.hy-video__video-container .hy-video__play button .hy-video__button-label{font-size:1.0625rem;line-height:20px;letter-spacing:-0.16px}}.hy-video__video-container .hy-video__play button svg{fill:var(--link-blue);height:44px;width:44px}@media (min-width: 60rem){.hy-video__video-container .hy-video__play button svg{height:80px;width:80px}}.hy-video__video-container .hy-video__play__simple{background-color:rgba(0, 0, 0, 0.2);position:absolute;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.hy-video__video-container .hy-video__play__simple:hover{cursor:pointer}.hy-video__video-container .hy-video__play__simple button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:transparent;border:none;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-video__video-container .hy-video__play__simple button svg{fill:var(--grayscale-white);height:44px;width:44px}@media (min-width: 60rem){.hy-video__video-container .hy-video__play__simple button svg{height:80px;width:80px}}.hy-video:not(.hy-video--horizontal){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 1601px){.hy-video:not(.hy-video--horizontal):not(.hy-video__default,.hy-video--list){max-width:66%}}.hy-video--list .hy-video__meta__details{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;gap:32px;margin:0}.hy-video--list .hy-video__meta__details--item{margin-right:0;padding-right:0}.hy-video__label{font-size:0.75rem;line-height:14px;display:inline-block;background-color:var(--grayscale-black);color:var(--grayscale-white);font-family:var(--main-font-family);font-weight:bold;letter-spacing:-0.5px;padding:6px 8px;margin:0 0 22px;text-transform:uppercase}.hy-video.hy-video--horizontal{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (min-width: 60rem){.hy-video.hy-video--horizontal{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-video.hy-video--horizontal .hy-video__meta{padding-left:0;width:100%}@media (min-width: 60rem){.hy-video.hy-video--horizontal .hy-video__meta{padding-left:2.5%;width:57.24%}}.hy-video__meta__title h2.hy-heading,.hy-video__meta__title h3.hy-heading{border:none;margin:8px 0 12px 0 !important;-ms-hyphens:auto;hyphens:auto;word-break:break-word;padding:0 !important}@media (min-width: 60rem){.hy-video__meta__title h2.hy-heading,.hy-video__meta__title h3.hy-heading{margin:0 0 16px 0 !important}}.hy-video__meta__details{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:12px}@media (min-width: 60rem){.hy-video__meta__details{margin-bottom:16px}}.hy-video__meta__details--item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-right:44px;min-width:87px;padding-right:46px;place-content:center space-between}.hy-video__meta__description__content{font-size:0.9375rem;line-height:22px;color:var(--grayscale-black);display:block;font-family:var(--main-font-family);letter-spacing:0;width:100%}@media (min-width: 30rem){.hy-video__meta__description__content{font-size:1.0625rem;line-height:26px}}.hy-video__meta__description__more-button{font-size:1rem;line-height:24px;color:var(--brand-main-light);font-family:var(--main-font-family)}.hy-video__meta__description__more-button:hover{cursor:pointer}.hy-video__meta__label{font-size:0.9375rem;line-height:18px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);margin-bottom:4px}.hy-video__meta__content{font-size:0.9375rem;line-height:22px;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.5px}@media (min-width: 30rem){.hy-video__meta__content{font-size:1.0625rem;line-height:26px;letter-spacing:-0.56px}}";
+const HyVideoStyle0 = hyVideoCss;
 
-const HyVideo$1 = /*@__PURE__*/ proxyCustomElement(class HyVideo extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.renderPreviewWithLink = () => {
-      return this.linkToVideo ? (h("a", { title: this.videoTitle, href: this.linkToVideo, class: "hy-video__link-to-video" }, h("img", { loading: this.disableLazy ? "eager" : "lazy", class: "hy-video__preview-image", src: this.previewImageUrl, alt: this.videoTitle }))) : (h("img", { loading: this.disableLazy ? "eager" : "lazy", class: "hy-video__preview-image", src: this.previewImageUrl, alt: this.videoTitle }));
-    };
-    this.renderPlayButton = () => {
-      if (this.simplePlayButton) {
-        return (h("span", { class: "hy-video__play__simple" }, h("button", { type: "button" }, h("hy-icon", { icon: "hy-icon-video", class: "hy-video__play-icon", size: 20 }))));
-      }
-      else {
-        return (h("span", { class: "hy-video__play" }, h("button", { type: "button" }, h("hy-icon", { icon: "hy-icon-video", class: "hy-video__play-icon", size: 20 }), h("span", { class: "hy-video__button-label" }, this.playButtonLabel))));
-      }
-    };
-    this.truncate = (str, n) => {
-      return str.length > n ? str.substr(0, n - 1) + "..." : str;
-    };
-    this.videoTitle = undefined;
-    this.videoDescription = undefined;
-    this.contextLabel = undefined;
-    this.contextLabelVisible = false;
-    this.previewImageUrl = undefined;
-    this.linkToVideo = undefined;
-    this.playButtonLabel = undefined;
-    this.playButtonVisible = false;
-    this.seriesLabel = "In this series";
-    this.seriesCount = null;
-    this.views = undefined;
-    this.viewsLabel = undefined;
-    this.duration = undefined;
-    this.durationLabel = undefined;
-    this.dateAdded = undefined;
-    this.dateAddedLabel = undefined;
-    this.horizontal = false;
-    this.disableLazy = false;
-    this.headerstyle = "default";
-    this.showMoreLabel = "Show more";
-    this.showLessLabel = "Show less";
-    this.simplePlayButton = false;
-    this.styleList = false;
-    this.descCollapsed = false;
-  }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest(".hy-main");
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains("with-sidebar")) {
-        this.headerstyle = "large";
-      }
+const HyVideo$1 = /*@__PURE__*/ proxyCustomElement(class HyVideo extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.renderPreviewWithLink = () => {
+            return this.linkToVideo ? (h("a", { title: this.videoTitle, href: this.linkToVideo, class: "hy-video__link-to-video" }, h("img", { loading: this.disableLazy ? "eager" : "lazy", class: "hy-video__preview-image", src: this.previewImageUrl, alt: this.videoTitle }))) : (h("img", { loading: this.disableLazy ? "eager" : "lazy", class: "hy-video__preview-image", src: this.previewImageUrl, alt: this.videoTitle }));
+        };
+        this.renderPlayButton = () => {
+            if (this.simplePlayButton) {
+                return (h("span", { class: "hy-video__play__simple" }, h("button", { type: "button" }, h("hy-icon", { icon: "hy-icon-video", class: "hy-video__play-icon", size: 20 }))));
+            }
+            else {
+                return (h("span", { class: "hy-video__play" }, h("button", { type: "button" }, h("hy-icon", { icon: "hy-icon-video", class: "hy-video__play-icon", size: 20 }), h("span", { class: "hy-video__button-label" }, this.playButtonLabel))));
+            }
+        };
+        this.truncate = (str, n) => {
+            return str.length > n ? str.substr(0, n - 1) + "..." : str;
+        };
+        this.videoTitle = undefined;
+        this.videoDescription = undefined;
+        this.contextLabel = undefined;
+        this.contextLabelVisible = false;
+        this.previewImageUrl = undefined;
+        this.linkToVideo = undefined;
+        this.playButtonLabel = undefined;
+        this.playButtonVisible = false;
+        this.seriesLabel = "In this series";
+        this.seriesCount = null;
+        this.views = undefined;
+        this.viewsLabel = undefined;
+        this.duration = undefined;
+        this.durationLabel = undefined;
+        this.dateAdded = undefined;
+        this.dateAddedLabel = undefined;
+        this.horizontal = false;
+        this.disableLazy = false;
+        this.headerstyle = "default";
+        this.showMoreLabel = "Show more";
+        this.showLessLabel = "Show less";
+        this.simplePlayButton = false;
+        this.styleList = false;
+        this.descCollapsed = false;
     }
-    if (this.videoDescription && this.videoDescription.match(/\S/g).length > 255) {
-      this.descCollapsed = true;
+    componentDidLoad() {
+        let hyMainDiv = this.el.closest(".hy-main");
+        if (hyMainDiv) {
+            if (!hyMainDiv.classList.contains("with-sidebar")) {
+                this.headerstyle = "large";
+            }
+        }
+        if (this.videoDescription && this.videoDescription.match(/\S/g).length > 255) {
+            this.descCollapsed = true;
+        }
     }
-  }
-  render() {
-    const classAttributes = [
-      "hy-video",
-      this.horizontal ? "hy-video--horizontal" : "",
-      !this.styleList ? `hy-video__${this.headerstyle}` : "",
-      this.styleList ? "hy-video--list" : "",
-    ].join(" ");
-    const maxChars = 255;
-    const charCount = this.videoDescription ? this.videoDescription.match(/\S/g).length : 0;
-    if (this.linkToVideo && this.styleList) {
-      return [
-        h("a", { href: this.linkToVideo, class: classAttributes }, this.videoTitle && !this.horizontal && !this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h2 }, this.videoTitle)), h("div", { class: "hy-video__video-container" }, this.previewImageUrl ? (h("div", null, this.renderPreviewWithLink(), h("slot", { name: "video" }))) : (h("slot", { name: "video" })), this.playButtonVisible && this.renderPlayButton()), h("div", { class: "hy-video__meta" }, (this.videoTitle && this.horizontal) ||
-          (this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h3 }, this.videoTitle))), this.contextLabelVisible && h("span", { class: "hy-video__label" }, this.contextLabel), (this.duration || this.views || this.dateAdded || this.seriesCount) && (h("div", { class: "hy-video__meta__details" }, this.duration && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.durationLabel), h("span", { class: "hy-video__meta__content" }, this.duration))), this.views && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.viewsLabel), h("span", { class: "hy-video__meta__content" }, this.views))), this.dateAdded && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.dateAddedLabel), h("span", { class: "hy-video__meta__content" }, this.dateAdded))), !this.views && this.seriesCount && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.seriesLabel), h("span", { class: "hy-video__meta__content" }, this.seriesCount))))), this.videoDescription && (h("div", { class: "hy-video__meta__description", "aria-expanded": this.descCollapsed ? "false" : "true" }, h("div", { class: "hy-video__meta__description__content" }, this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription), charCount > maxChars && (h("span", { class: "hy-video__meta__description__more-button", role: "button", tabindex: "0", "aria-expanded": this.descCollapsed ? "false" : "true", onClick: () => (this.descCollapsed = !this.descCollapsed), onKeyDown: (e) => {
-            if (e.key != " ")
-              return;
-            e.preventDefault();
-            this.descCollapsed = !this.descCollapsed;
-          } }, this.descCollapsed ? this.showMoreLabel : this.showLessLabel)))))),
-      ];
+    render() {
+        const classAttributes = [
+            "hy-video",
+            this.horizontal ? "hy-video--horizontal" : "",
+            !this.styleList ? `hy-video__${this.headerstyle}` : "",
+            this.styleList ? "hy-video--list" : "",
+        ].join(" ");
+        const maxChars = 255;
+        const charCount = this.videoDescription ? this.videoDescription.match(/\S/g).length : 0;
+        if (this.linkToVideo && this.styleList) {
+            return [
+                h("a", { href: this.linkToVideo, class: classAttributes }, this.videoTitle && !this.horizontal && !this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h2 }, this.videoTitle)), h("div", { class: "hy-video__video-container" }, this.previewImageUrl ? (h("div", null, this.renderPreviewWithLink(), h("slot", { name: "video" }))) : (h("slot", { name: "video" })), this.playButtonVisible && this.renderPlayButton()), h("div", { class: "hy-video__meta" }, (this.videoTitle && this.horizontal) ||
+                    (this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h3 }, this.videoTitle))), this.contextLabelVisible && h("span", { class: "hy-video__label" }, this.contextLabel), (this.duration || this.views || this.dateAdded || this.seriesCount) && (h("div", { class: "hy-video__meta__details" }, this.duration && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.durationLabel), h("span", { class: "hy-video__meta__content" }, this.duration))), this.views && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.viewsLabel), h("span", { class: "hy-video__meta__content" }, this.views))), this.dateAdded && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.dateAddedLabel), h("span", { class: "hy-video__meta__content" }, this.dateAdded))), !this.views && this.seriesCount && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.seriesLabel), h("span", { class: "hy-video__meta__content" }, this.seriesCount))))), this.videoDescription && (h("div", { class: "hy-video__meta__description", "aria-expanded": this.descCollapsed ? "false" : "true" }, h("div", { class: "hy-video__meta__description__content" }, this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription), charCount > maxChars && (h("span", { class: "hy-video__meta__description__more-button", role: "button", tabindex: "0", "aria-expanded": this.descCollapsed ? "false" : "true", onClick: () => (this.descCollapsed = !this.descCollapsed), onKeyDown: (e) => {
+                        if (e.key != " ")
+                            return;
+                        e.preventDefault();
+                        this.descCollapsed = !this.descCollapsed;
+                    } }, this.descCollapsed ? this.showMoreLabel : this.showLessLabel)))))),
+            ];
+        }
+        else {
+            return [
+                h("div", { class: classAttributes }, this.videoTitle && !this.horizontal && !this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h2 }, this.videoTitle)), h("div", { class: "hy-video__video-container" }, this.previewImageUrl ? (h("div", null, this.renderPreviewWithLink(), h("slot", { name: "video" }))) : (h("slot", { name: "video" })), this.playButtonVisible && this.renderPlayButton()), h("div", { class: "hy-video__meta" }, (this.videoTitle && this.horizontal) ||
+                    (this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h2 }, this.videoTitle))), this.contextLabelVisible && h("span", { class: "hy-video__label" }, this.contextLabel), (this.duration || this.views || this.dateAdded) && (h("div", { class: "hy-video__meta__details" }, this.duration && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.durationLabel), h("span", { class: "hy-video__meta__content" }, this.duration))), this.views && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.viewsLabel), h("span", { class: "hy-video__meta__content" }, this.views))), this.dateAdded && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.dateAddedLabel), h("span", { class: "hy-video__meta__content" }, this.dateAdded))))), this.videoDescription && (h("div", { class: "hy-video__meta__description", "aria-expanded": this.descCollapsed ? "false" : "true" }, h("div", { class: "hy-video__meta__description__content" }, this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription), charCount > maxChars && (h("span", { class: "hy-video__meta__description__more-button", role: "button", tabindex: "0", "aria-expanded": this.descCollapsed ? "false" : "true", onClick: () => (this.descCollapsed = !this.descCollapsed), onKeyDown: (e) => {
+                        if (e.key != " ")
+                            return;
+                        e.preventDefault();
+                        this.descCollapsed = !this.descCollapsed;
+                    } }, this.descCollapsed ? this.showMoreLabel : this.showLessLabel)))))),
+                h("hy-box", { mb: "1.75, 1.75, 2, 2.5" }),
+            ];
+        }
     }
-    else {
-      return [
-        h("div", { class: classAttributes }, this.videoTitle && !this.horizontal && !this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h2 }, this.videoTitle)), h("div", { class: "hy-video__video-container" }, this.previewImageUrl ? (h("div", null, this.renderPreviewWithLink(), h("slot", { name: "video" }))) : (h("slot", { name: "video" })), this.playButtonVisible && this.renderPlayButton()), h("div", { class: "hy-video__meta" }, (this.videoTitle && this.horizontal) ||
-          (this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h2 }, this.videoTitle))), this.contextLabelVisible && h("span", { class: "hy-video__label" }, this.contextLabel), (this.duration || this.views || this.dateAdded) && (h("div", { class: "hy-video__meta__details" }, this.duration && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.durationLabel), h("span", { class: "hy-video__meta__content" }, this.duration))), this.views && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.viewsLabel), h("span", { class: "hy-video__meta__content" }, this.views))), this.dateAdded && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.dateAddedLabel), h("span", { class: "hy-video__meta__content" }, this.dateAdded))))), this.videoDescription && (h("div", { class: "hy-video__meta__description", "aria-expanded": this.descCollapsed ? "false" : "true" }, h("div", { class: "hy-video__meta__description__content" }, this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription), charCount > maxChars && (h("span", { class: "hy-video__meta__description__more-button", role: "button", tabindex: "0", "aria-expanded": this.descCollapsed ? "false" : "true", onClick: () => (this.descCollapsed = !this.descCollapsed), onKeyDown: (e) => {
-            if (e.key != " ")
-              return;
-            e.preventDefault();
-            this.descCollapsed = !this.descCollapsed;
-          } }, this.descCollapsed ? this.showMoreLabel : this.showLessLabel)))))),
-        h("hy-box", { mb: "1.75, 1.75, 2, 2.5" }),
-      ];
-    }
-  }
-  get el() { return this; }
-  static get style() { return hyVideoCss; }
+    get el() { return this; }
+    static get style() { return HyVideoStyle0; }
 }, [4, "hy-video", {
-    "videoTitle": [1, "video-title"],
-    "videoDescription": [1, "video-description"],
-    "contextLabel": [1, "context-label"],
-    "contextLabelVisible": [4, "context-label-visible"],
-    "previewImageUrl": [1, "preview-image-url"],
-    "linkToVideo": [1, "link-to-video"],
-    "playButtonLabel": [1, "play-button-label"],
-    "playButtonVisible": [4, "play-button-visible"],
-    "seriesLabel": [1, "series-label"],
-    "seriesCount": [1, "series-count"],
-    "views": [1],
-    "viewsLabel": [1, "views-label"],
-    "duration": [1],
-    "durationLabel": [1, "duration-label"],
-    "dateAdded": [1, "date-added"],
-    "dateAddedLabel": [1, "date-added-label"],
-    "horizontal": [4],
-    "disableLazy": [4, "disable-lazy"],
-    "headerstyle": [1],
-    "showMoreLabel": [1, "show-more-label"],
-    "showLessLabel": [1, "show-less-label"],
-    "simplePlayButton": [4, "simple-play-button"],
-    "styleList": [4, "style-list"],
-    "descCollapsed": [32]
-  }]);
+        "videoTitle": [1, "video-title"],
+        "videoDescription": [1, "video-description"],
+        "contextLabel": [1, "context-label"],
+        "contextLabelVisible": [4, "context-label-visible"],
+        "previewImageUrl": [1, "preview-image-url"],
+        "linkToVideo": [1, "link-to-video"],
+        "playButtonLabel": [1, "play-button-label"],
+        "playButtonVisible": [4, "play-button-visible"],
+        "seriesLabel": [1, "series-label"],
+        "seriesCount": [1, "series-count"],
+        "views": [1],
+        "viewsLabel": [1, "views-label"],
+        "duration": [1],
+        "durationLabel": [1, "duration-label"],
+        "dateAdded": [1, "date-added"],
+        "dateAddedLabel": [1, "date-added-label"],
+        "horizontal": [4],
+        "disableLazy": [4, "disable-lazy"],
+        "headerstyle": [1],
+        "showMoreLabel": [1, "show-more-label"],
+        "showLessLabel": [1, "show-less-label"],
+        "simplePlayButton": [4, "simple-play-button"],
+        "styleList": [4, "style-list"],
+        "descCollapsed": [32]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-video", "hy-box", "hy-heading", "hy-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-video":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, HyVideo$1);
-      }
-      break;
-    case "hy-box":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "hy-heading":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "hy-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hy-video", "hy-box", "hy-heading", "hy-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hy-video":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, HyVideo$1);
+            }
+            break;
+        case "hy-box":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "hy-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "hy-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const HyVideo = HyVideo$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { HyVideo, defineCustomElement };
-
-//# sourceMappingURL=hy-video.js.map