@itcenteratunihelsinki/huds-lib 0.8.68 → 0.8.69

package/dist/huds-lib/hy-video.entry.js

@@ -1,2 +1,2 @@
-import{r as i,h as e,g as t}from"./index-f84f2a7d.js";import{f as a}from"./utils-2819fd7e.js";const o=':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{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__video-container>*:not(.hy-video__label,.hy-video__play,.hy-video__play__simple){bottom:0;left:0;position:absolute;right:0;top:0}.hy-video__video-container:after{content:"";display:block;padding-top:56.25%}.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 s=class{constructor(t){i(this,t);this.renderPreviewWithLink=()=>this.linkToVideo?e("a",{title:this.videoTitle,href:this.linkToVideo,class:"hy-video__link-to-video"},e("img",{loading:this.disableLazy?"eager":"lazy",class:"hy-video__preview-image",src:this.previewImageUrl,alt:this.videoTitle})):e("img",{loading:this.disableLazy?"eager":"lazy",class:"hy-video__preview-image",src:this.previewImageUrl,alt:this.videoTitle});this.renderPlayButton=()=>{if(this.simplePlayButton){return e("span",{class:"hy-video__play__simple"},e("button",{type:"button"},e("hy-icon",{icon:"hy-icon-video",class:"hy-video__play-icon",size:20})))}else{return e("span",{class:"hy-video__play"},e("button",{type:"button"},e("hy-icon",{icon:"hy-icon-video",class:"hy-video__play-icon",size:20}),e("span",{class:"hy-video__button-label"},this.playButtonLabel)))}};this.truncate=(i,e)=>i.length>e?i.substr(0,e-1)+"...":i;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 i=this.el.closest(".hy-main");if(i){if(!i.classList.contains("with-sidebar")){this.headerstyle="large"}}if(this.videoDescription&&this.videoDescription.match(/\S/g).length>255){this.descCollapsed=true}}render(){const i=["hy-video",this.horizontal?"hy-video--horizontal":"",!this.styleList?`hy-video__${this.headerstyle}`:"",this.styleList?"hy-video--list":""].join(" ");const t=255;const o=this.videoDescription?this.videoDescription.match(/\S/g).length:0;if(this.linkToVideo&&this.styleList){return[e("a",{href:this.linkToVideo,class:i},this.videoTitle&&!this.horizontal&&!this.styleList&&e("hy-heading",{class:"hy-video__meta__title",heading:a.h2},this.videoTitle),e("div",{class:"hy-video__video-container"},this.previewImageUrl?e("div",null,this.renderPreviewWithLink(),e("slot",{name:"video"})):e("slot",{name:"video"}),this.playButtonVisible&&this.renderPlayButton()),e("div",{class:"hy-video__meta"},this.videoTitle&&this.horizontal||this.styleList&&e("hy-heading",{class:"hy-video__meta__title",heading:a.h3},this.videoTitle),this.contextLabelVisible&&e("span",{class:"hy-video__label"},this.contextLabel),(this.duration||this.views||this.dateAdded||this.seriesCount)&&e("div",{class:"hy-video__meta__details"},this.duration&&e("div",{class:"hy-video__meta__details--item"},e("span",{class:"hy-video__meta__label"},this.durationLabel),e("span",{class:"hy-video__meta__content"},this.duration)),this.views&&e("div",{class:"hy-video__meta__details--item"},e("span",{class:"hy-video__meta__label"},this.viewsLabel),e("span",{class:"hy-video__meta__content"},this.views)),this.dateAdded&&e("div",{class:"hy-video__meta__details--item"},e("span",{class:"hy-video__meta__label"},this.dateAddedLabel),e("span",{class:"hy-video__meta__content"},this.dateAdded)),!this.views&&this.seriesCount&&e("div",{class:"hy-video__meta__details--item"},e("span",{class:"hy-video__meta__label"},this.seriesLabel),e("span",{class:"hy-video__meta__content"},this.seriesCount))),this.videoDescription&&e("div",{class:"hy-video__meta__description","aria-expanded":this.descCollapsed?"false":"true"},e("div",{class:"hy-video__meta__description__content"},this.descCollapsed?this.truncate(this.videoDescription,255):this.videoDescription),o>t&&e("span",{class:"hy-video__meta__description__more-button",role:"button",tabindex:"0","aria-expanded":this.descCollapsed?"false":"true",onClick:()=>this.descCollapsed=!this.descCollapsed,onKeyDown:i=>{if(i.key!=" ")return;i.preventDefault();this.descCollapsed=!this.descCollapsed}},this.descCollapsed?this.showMoreLabel:this.showLessLabel))))]}else{return[e("div",{class:i},this.videoTitle&&!this.horizontal&&!this.styleList&&e("hy-heading",{class:"hy-video__meta__title",heading:a.h2},this.videoTitle),e("div",{class:"hy-video__video-container"},this.previewImageUrl?e("div",null,this.renderPreviewWithLink(),e("slot",{name:"video"})):e("slot",{name:"video"}),this.playButtonVisible&&this.renderPlayButton()),e("div",{class:"hy-video__meta"},this.videoTitle&&this.horizontal||this.styleList&&e("hy-heading",{class:"hy-video__meta__title",heading:a.h2},this.videoTitle),this.contextLabelVisible&&e("span",{class:"hy-video__label"},this.contextLabel),(this.duration||this.views||this.dateAdded)&&e("div",{class:"hy-video__meta__details"},this.duration&&e("div",{class:"hy-video__meta__details--item"},e("span",{class:"hy-video__meta__label"},this.durationLabel),e("span",{class:"hy-video__meta__content"},this.duration)),this.views&&e("div",{class:"hy-video__meta__details--item"},e("span",{class:"hy-video__meta__label"},this.viewsLabel),e("span",{class:"hy-video__meta__content"},this.views)),this.dateAdded&&e("div",{class:"hy-video__meta__details--item"},e("span",{class:"hy-video__meta__label"},this.dateAddedLabel),e("span",{class:"hy-video__meta__content"},this.dateAdded))),this.videoDescription&&e("div",{class:"hy-video__meta__description","aria-expanded":this.descCollapsed?"false":"true"},e("div",{class:"hy-video__meta__description__content"},this.descCollapsed?this.truncate(this.videoDescription,255):this.videoDescription),o>t&&e("span",{class:"hy-video__meta__description__more-button",role:"button",tabindex:"0","aria-expanded":this.descCollapsed?"false":"true",onClick:()=>this.descCollapsed=!this.descCollapsed,onKeyDown:i=>{if(i.key!=" ")return;i.preventDefault();this.descCollapsed=!this.descCollapsed}},this.descCollapsed?this.showMoreLabel:this.showLessLabel)))),e("hy-box",{mb:"1.75, 1.75, 2, 2.5"})]}}get el(){return t(this)}};s.style=o;export{s as hy_video};
+import{r as i,h as e,g as t}from"./index-f84f2a7d.js";import{f as a}from"./utils-2819fd7e.js";const o=":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 s=class{constructor(t){i(this,t);this.renderPreviewWithLink=()=>this.linkToVideo?e("a",{title:this.videoTitle,href:this.linkToVideo,class:"hy-video__link-to-video"},e("img",{loading:this.disableLazy?"eager":"lazy",class:"hy-video__preview-image",src:this.previewImageUrl,alt:this.videoTitle})):e("img",{loading:this.disableLazy?"eager":"lazy",class:"hy-video__preview-image",src:this.previewImageUrl,alt:this.videoTitle});this.renderPlayButton=()=>{if(this.simplePlayButton){return e("span",{class:"hy-video__play__simple"},e("button",{type:"button"},e("hy-icon",{icon:"hy-icon-video",class:"hy-video__play-icon",size:20})))}else{return e("span",{class:"hy-video__play"},e("button",{type:"button"},e("hy-icon",{icon:"hy-icon-video",class:"hy-video__play-icon",size:20}),e("span",{class:"hy-video__button-label"},this.playButtonLabel)))}};this.truncate=(i,e)=>i.length>e?i.substr(0,e-1)+"...":i;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 i=this.el.closest(".hy-main");if(i){if(!i.classList.contains("with-sidebar")){this.headerstyle="large"}}if(this.videoDescription&&this.videoDescription.match(/\S/g).length>255){this.descCollapsed=true}}render(){const i=["hy-video",this.horizontal?"hy-video--horizontal":"",!this.styleList?`hy-video__${this.headerstyle}`:"",this.styleList?"hy-video--list":""].join(" ");const t=255;const o=this.videoDescription?this.videoDescription.match(/\S/g).length:0;if(this.linkToVideo&&this.styleList){return[e("a",{href:this.linkToVideo,class:i},this.videoTitle&&!this.horizontal&&!this.styleList&&e("hy-heading",{class:"hy-video__meta__title",heading:a.h2},this.videoTitle),e("div",{class:"hy-video__video-container"},this.previewImageUrl?e("div",null,this.renderPreviewWithLink(),e("slot",{name:"video"})):e("slot",{name:"video"}),this.playButtonVisible&&this.renderPlayButton()),e("div",{class:"hy-video__meta"},this.videoTitle&&this.horizontal||this.styleList&&e("hy-heading",{class:"hy-video__meta__title",heading:a.h3},this.videoTitle),this.contextLabelVisible&&e("span",{class:"hy-video__label"},this.contextLabel),(this.duration||this.views||this.dateAdded||this.seriesCount)&&e("div",{class:"hy-video__meta__details"},this.duration&&e("div",{class:"hy-video__meta__details--item"},e("span",{class:"hy-video__meta__label"},this.durationLabel),e("span",{class:"hy-video__meta__content"},this.duration)),this.views&&e("div",{class:"hy-video__meta__details--item"},e("span",{class:"hy-video__meta__label"},this.viewsLabel),e("span",{class:"hy-video__meta__content"},this.views)),this.dateAdded&&e("div",{class:"hy-video__meta__details--item"},e("span",{class:"hy-video__meta__label"},this.dateAddedLabel),e("span",{class:"hy-video__meta__content"},this.dateAdded)),!this.views&&this.seriesCount&&e("div",{class:"hy-video__meta__details--item"},e("span",{class:"hy-video__meta__label"},this.seriesLabel),e("span",{class:"hy-video__meta__content"},this.seriesCount))),this.videoDescription&&e("div",{class:"hy-video__meta__description","aria-expanded":this.descCollapsed?"false":"true"},e("div",{class:"hy-video__meta__description__content"},this.descCollapsed?this.truncate(this.videoDescription,255):this.videoDescription),o>t&&e("span",{class:"hy-video__meta__description__more-button",role:"button",tabindex:"0","aria-expanded":this.descCollapsed?"false":"true",onClick:()=>this.descCollapsed=!this.descCollapsed,onKeyDown:i=>{if(i.key!=" ")return;i.preventDefault();this.descCollapsed=!this.descCollapsed}},this.descCollapsed?this.showMoreLabel:this.showLessLabel))))]}else{return[e("div",{class:i},this.videoTitle&&!this.horizontal&&!this.styleList&&e("hy-heading",{class:"hy-video__meta__title",heading:a.h2},this.videoTitle),e("div",{class:"hy-video__video-container"},this.previewImageUrl?e("div",null,this.renderPreviewWithLink(),e("slot",{name:"video"})):e("slot",{name:"video"}),this.playButtonVisible&&this.renderPlayButton()),e("div",{class:"hy-video__meta"},this.videoTitle&&this.horizontal||this.styleList&&e("hy-heading",{class:"hy-video__meta__title",heading:a.h2},this.videoTitle),this.contextLabelVisible&&e("span",{class:"hy-video__label"},this.contextLabel),(this.duration||this.views||this.dateAdded)&&e("div",{class:"hy-video__meta__details"},this.duration&&e("div",{class:"hy-video__meta__details--item"},e("span",{class:"hy-video__meta__label"},this.durationLabel),e("span",{class:"hy-video__meta__content"},this.duration)),this.views&&e("div",{class:"hy-video__meta__details--item"},e("span",{class:"hy-video__meta__label"},this.viewsLabel),e("span",{class:"hy-video__meta__content"},this.views)),this.dateAdded&&e("div",{class:"hy-video__meta__details--item"},e("span",{class:"hy-video__meta__label"},this.dateAddedLabel),e("span",{class:"hy-video__meta__content"},this.dateAdded))),this.videoDescription&&e("div",{class:"hy-video__meta__description","aria-expanded":this.descCollapsed?"false":"true"},e("div",{class:"hy-video__meta__description__content"},this.descCollapsed?this.truncate(this.videoDescription,255):this.videoDescription),o>t&&e("span",{class:"hy-video__meta__description__more-button",role:"button",tabindex:"0","aria-expanded":this.descCollapsed?"false":"true",onClick:()=>this.descCollapsed=!this.descCollapsed,onKeyDown:i=>{if(i.key!=" ")return;i.preventDefault();this.descCollapsed=!this.descCollapsed}},this.descCollapsed?this.showMoreLabel:this.showLessLabel)))),e("hy-box",{mb:"1.75, 1.75, 2, 2.5"})]}}get el(){return t(this)}};s.style=o;export{s as hy_video};
 //# sourceMappingURL=hy-video.entry.js.map

package/dist/huds-lib/hy-video.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["hyVideoCss","HyVideo","this","renderPreviewWithLink","linkToVideo","h","title","videoTitle","href","class","loading","disableLazy","src","previewImageUrl","alt","renderPlayButton","simplePlayButton","type","icon","size","playButtonLabel","truncate","str","n","length","substr","componentDidLoad","hyMainDiv","el","closest","classList","contains","headerstyle","videoDescription","match","descCollapsed","render","classAttributes","horizontal","styleList","join","maxChars","charCount","heading","HeadingVarians","h2","name","playButtonVisible","h3","contextLabelVisible","contextLabel","duration","views","dateAdded","seriesCount","durationLabel","viewsLabel","dateAddedLabel","seriesLabel","role","tabindex","onClick","onKeyDown","e","key","preventDefault","showMoreLabel","showLessLabel","mb"],"sources":["./src/components/hy-video/hy-video.scss?tag=hy-video","./src/components/hy-video/hy-video.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\na.hy-video {\n  text-decoration: none;\n}\n\n.hy-video__video-container {\n  display: inline-block;\n  margin-bottom: 22px;\n  position: relative;\n  width: 100%;\n\n  iframe {\n    border: 0;\n    height: 100%;\n    overflow: hidden;\n    width: 100%;\n\n    @supports (aspect-ratio: 16 / 9) {\n      aspect-ratio: 16 / 9;\n      height: auto;\n    }\n  }\n\n  .hy-video__preview-image {\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  .hy-video__play {\n    background-color: var(--grayscale-white);\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translateX(-50%) translateY(-50%);\n\n    button {\n      align-items: center;\n      background: transparent;\n      border: none;\n      display: flex;\n      flex-direction: column;\n      padding: 24px;\n\n      @include breakpoint($narrow) {\n        padding: 36px;\n      }\n\n      &:hover {\n        cursor: pointer;\n      }\n    }\n\n    button .hy-video__button-label {\n      @include font-size(15px, 18px);\n\n      color: var(--link-blue);\n      font-family: var(--main-font-family);\n      font-weight: bold;\n      letter-spacing: -0.1px;\n      text-align: center;\n      text-transform: uppercase;\n\n      @include breakpoint($narrow) {\n        @include font-size(17px, 20px);\n\n        letter-spacing: -0.14px;\n      }\n\n      @include breakpoint($extrawide) {\n        @include font-size(17px, 20px);\n\n        letter-spacing: -0.16px;\n      }\n    }\n\n    button svg {\n      fill: var(--link-blue);\n      height: 44px;\n      width: 44px;\n\n      @include breakpoint($wide) {\n        height: 80px;\n        width: 80px;\n      }\n    }\n  }\n\n  .hy-video__play__simple {\n    background-color: rgba(#000000, 0.2);\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    button {\n      align-items: center;\n      background: transparent;\n      border: none;\n      display: flex;\n    }\n\n    button svg {\n      fill: var(--grayscale-white);\n      height: 44px;\n      width: 44px;\n\n      @include breakpoint($wide) {\n        height: 80px;\n        width: 80px;\n      }\n    }\n  }\n\n  > *:not(.hy-video__label, .hy-video__play, .hy-video__play__simple) {\n    bottom: 0;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n\n  &:after {\n    content: \"\";\n    display: block;\n    // 16:9 ratio\n    padding-top: calc(9 / 16) * 100%;\n  }\n}\n\n.hy-video:not(.hy-video--horizontal) {\n  display: flex;\n  flex-direction: column;\n\n  &:not(.hy-video__default, .hy-video--list) {\n    @include breakpoint($xlarge) {\n      max-width: 66%;\n    }\n  }\n}\n\n.hy-video--list {\n  .hy-video__meta__details {\n    justify-content: flex-start;\n    gap: 32px;\n    margin: 0;\n  }\n  .hy-video__meta__details--item {\n    margin-right: 0;\n    padding-right: 0;\n  }\n}\n\n.hy-video__label {\n  // font: h5 small size\n  @include font-size(12px, 14px);\n  display: inline-block;\n  background-color: var(--grayscale-black);\n  color: var(--grayscale-white);\n  font-family: var(--main-font-family);\n  font-weight: bold;\n  letter-spacing: -0.5px;\n  padding: 6px 8px;\n  margin: 0 0 22px;\n  text-transform: uppercase;\n}\n\n.hy-video.hy-video--horizontal {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  @include breakpoint($wide) {\n    flex-direction: row;\n  }\n\n  .hy-video__meta {\n    padding-left: 0;\n    width: 100%;\n\n    @include breakpoint($wide) {\n      padding-left: 2.5%;\n      width: 57.24%;\n    }\n  }\n}\n\n.hy-video__meta__title {\n  h2.hy-heading,\n  h3.hy-heading {\n    border: none;\n    margin: 8px 0 12px 0 !important;\n    hyphens: auto;\n    word-break: break-word;\n    padding: 0 !important;\n\n    @include breakpoint($wide) {\n      margin: 0 0 16px 0 !important;\n    }\n  }\n}\n\n.hy-video__meta__details {\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 12px;\n\n  @include breakpoint($wide) {\n    margin-bottom: 16px;\n  }\n}\n\n.hy-video__meta__details--item {\n  display: flex;\n  flex-direction: column;\n  margin-right: 44px;\n  min-width: 87px;\n  padding-right: 46px;\n  place-content: center space-between;\n}\n\n.hy-video__meta__description__content {\n  @include font-size(15px, 22px);\n\n  color: var(--grayscale-black);\n  display: block;\n  font-family: var(--main-font-family);\n  letter-spacing: 0;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    @include font-size(17px, 26px);\n  }\n}\n\n.hy-video__meta__description__more-button {\n  @include font-size(16px, 24px);\n  color: var(--brand-main-light);\n  font-family: var(--main-font-family);\n\n  &:hover {\n    cursor: pointer;\n  }\n}\n\n.hy-video__meta__label {\n  @include font-size(15px, 18px);\n  @include font-weight($bold);\n  color: var(--grayscale-black);\n  font-family: var(--main-font-family);\n  margin-bottom: 4px;\n}\n\n.hy-video__meta__content {\n  @include font-size(15px, 22px);\n\n  color: var(--grayscale-black);\n  font-family: var(--main-font-family);\n  letter-spacing: -0.5px;\n\n  @include breakpoint($narrow) {\n    @include font-size(17px, 26px);\n\n    letter-spacing: -0.56px;\n  }\n}\n","import {Component, Prop, h, Element, State} from \"@stencil/core\";\nimport {HeadingVarians} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-video\",\n  styleUrl: \"hy-video.scss\",\n  shadow: false,\n})\nexport class HyVideo {\n  @Element() el: HTMLElement;\n\n  /** Video title */\n  @Prop() videoTitle: string;\n  /** Video description */\n  @Prop() videoDescription: string;\n  /** Context label */\n  @Prop() contextLabel: string;\n  /** Should context label be visible */\n  @Prop() contextLabelVisible: boolean = false;\n  /** Preview image url */\n  @Prop() previewImageUrl: string;\n  /** Url to video, used with preview image */\n  @Prop() linkToVideo: string;\n  /** Label for play button if preview image is provided */\n  @Prop() playButtonLabel: string;\n  /** Should play button be visible */\n  @Prop() playButtonVisible: boolean = false;\n  /** Series label */\n  @Prop() seriesLabel: string = \"In this series\";\n  /** Series count */\n  @Prop() seriesCount: string = null;\n  /** Views count number */\n  @Prop() views: string;\n  /** Label for views number */\n  @Prop() viewsLabel: string;\n  /** Duration number */\n  @Prop() duration: string;\n  /** Label for duration number */\n  @Prop() durationLabel: string;\n  /** Date added date as string */\n  @Prop() dateAdded: string;\n  /** Label for date added */\n  @Prop() dateAddedLabel: string;\n  /** Use horizontal layout where metadata is on side */\n  @Prop() horizontal: boolean = false;\n\n  @Prop() disableLazy: boolean = false;\n\n  @Prop() headerstyle: string = \"default\";\n\n  @Prop() showMoreLabel: string = \"Show more\";\n\n  @Prop() showLessLabel: string = \"Show less\";\n\n  @Prop() simplePlayButton: boolean = false;\n\n  @Prop() styleList: boolean = false;\n\n  @State() descCollapsed: boolean = false;\n\n  componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n\n    if (this.videoDescription && this.videoDescription.match(/\\S/g).length > 255) {\n      this.descCollapsed = true;\n    }\n  }\n\n  renderPreviewWithLink = () => {\n    return this.linkToVideo ? (\n      <a title={this.videoTitle} href={this.linkToVideo} class=\"hy-video__link-to-video\">\n        <img\n          loading={this.disableLazy ? \"eager\" : \"lazy\"}\n          class=\"hy-video__preview-image\"\n          src={this.previewImageUrl}\n          alt={this.videoTitle}\n        />\n      </a>\n    ) : (\n      <img\n        loading={this.disableLazy ? \"eager\" : \"lazy\"}\n        class=\"hy-video__preview-image\"\n        src={this.previewImageUrl}\n        alt={this.videoTitle}\n      />\n    );\n  };\n\n  renderPlayButton = () => {\n    if (this.simplePlayButton) {\n      return (\n        <span class=\"hy-video__play__simple\">\n          <button type=\"button\">\n            <hy-icon icon={\"hy-icon-video\"} class={\"hy-video__play-icon\"} size={20} />\n          </button>\n        </span>\n      );\n    } else {\n      return (\n        <span class=\"hy-video__play\">\n          <button type=\"button\">\n            <hy-icon icon={\"hy-icon-video\"} class={\"hy-video__play-icon\"} size={20} />\n            <span class=\"hy-video__button-label\">{this.playButtonLabel}</span>\n          </button>\n        </span>\n      );\n    }\n  };\n\n  truncate = (str, n) => {\n    return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n  };\n\n  render() {\n    const classAttributes = [\n      \"hy-video\",\n      this.horizontal ? \"hy-video--horizontal\" : \"\",\n      !this.styleList ? `hy-video__${this.headerstyle}` : \"\",\n      this.styleList ? \"hy-video--list\" : \"\",\n    ].join(\" \");\n\n    const maxChars = 255;\n    const charCount = this.videoDescription ? this.videoDescription.match(/\\S/g).length : 0;\n\n    if (this.linkToVideo && this.styleList) {\n      return [\n        <a href={this.linkToVideo} class={classAttributes}>\n          {this.videoTitle && !this.horizontal && !this.styleList && (\n            <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h2}>\n              {this.videoTitle}\n            </hy-heading>\n          )}\n          <div class=\"hy-video__video-container\">\n            {this.previewImageUrl ? (\n              <div>\n                {this.renderPreviewWithLink()}\n                <slot name=\"video\"></slot>\n              </div>\n            ) : (\n              <slot name=\"video\"></slot>\n            )}\n            {this.playButtonVisible && this.renderPlayButton()}\n          </div>\n          <div class=\"hy-video__meta\">\n            {(this.videoTitle && this.horizontal) ||\n              (this.styleList && (\n                <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h3}>\n                  {this.videoTitle}\n                </hy-heading>\n              ))}\n            {this.contextLabelVisible && <span class=\"hy-video__label\">{this.contextLabel}</span>}\n            {(this.duration || this.views || this.dateAdded || this.seriesCount) && (\n              <div class=\"hy-video__meta__details\">\n                {this.duration && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.durationLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.duration}</span>\n                  </div>\n                )}\n                {this.views && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.viewsLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.views}</span>\n                  </div>\n                )}\n                {this.dateAdded && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.dateAddedLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.dateAdded}</span>\n                  </div>\n                )}\n                {!this.views && this.seriesCount && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.seriesLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.seriesCount}</span>\n                  </div>\n                )}\n              </div>\n            )}\n            {this.videoDescription && (\n              <div class=\"hy-video__meta__description\" aria-expanded={this.descCollapsed ? \"false\" : \"true\"}>\n                <div class=\"hy-video__meta__description__content\">\n                  {this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription}\n                </div>\n                {charCount > maxChars && (\n                  <span\n                    class=\"hy-video__meta__description__more-button\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-expanded={this.descCollapsed ? \"false\" : \"true\"}\n                    onClick={() => (this.descCollapsed = !this.descCollapsed)}\n                    onKeyDown={(e) => {\n                      if (e.key != \" \") return;\n                      e.preventDefault();\n                      this.descCollapsed = !this.descCollapsed;\n                    }}\n                  >\n                    {this.descCollapsed ? this.showMoreLabel : this.showLessLabel}\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n        </a>,\n      ];\n    } else {\n      return [\n        <div class={classAttributes}>\n          {this.videoTitle && !this.horizontal && !this.styleList && (\n            <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h2}>\n              {this.videoTitle}\n            </hy-heading>\n          )}\n          <div class=\"hy-video__video-container\">\n            {this.previewImageUrl ? (\n              <div>\n                {this.renderPreviewWithLink()}\n                <slot name=\"video\"></slot>\n              </div>\n            ) : (\n              <slot name=\"video\"></slot>\n            )}\n            {this.playButtonVisible && this.renderPlayButton()}\n          </div>\n          <div class=\"hy-video__meta\">\n            {(this.videoTitle && this.horizontal) ||\n              (this.styleList && (\n                <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h2}>\n                  {this.videoTitle}\n                </hy-heading>\n              ))}\n            {this.contextLabelVisible && <span class=\"hy-video__label\">{this.contextLabel}</span>}\n            {(this.duration || this.views || this.dateAdded) && (\n              <div class=\"hy-video__meta__details\">\n                {this.duration && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.durationLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.duration}</span>\n                  </div>\n                )}\n                {this.views && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.viewsLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.views}</span>\n                  </div>\n                )}\n                {this.dateAdded && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.dateAddedLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.dateAdded}</span>\n                  </div>\n                )}\n              </div>\n            )}\n            {this.videoDescription && (\n              <div class=\"hy-video__meta__description\" aria-expanded={this.descCollapsed ? \"false\" : \"true\"}>\n                <div class=\"hy-video__meta__description__content\">\n                  {this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription}\n                </div>\n                {charCount > maxChars && (\n                  <span\n                    class=\"hy-video__meta__description__more-button\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-expanded={this.descCollapsed ? \"false\" : \"true\"}\n                    onClick={() => (this.descCollapsed = !this.descCollapsed)}\n                    onKeyDown={(e) => {\n                      if (e.key != \" \") return;\n                      e.preventDefault();\n                      this.descCollapsed = !this.descCollapsed;\n                    }}\n                  >\n                    {this.descCollapsed ? this.showMoreLabel : this.showLessLabel}\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n        </div>,\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />,\n      ];\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["hyVideoCss","HyVideo","this","renderPreviewWithLink","linkToVideo","h","title","videoTitle","href","class","loading","disableLazy","src","previewImageUrl","alt","renderPlayButton","simplePlayButton","type","icon","size","playButtonLabel","truncate","str","n","length","substr","componentDidLoad","hyMainDiv","el","closest","classList","contains","headerstyle","videoDescription","match","descCollapsed","render","classAttributes","horizontal","styleList","join","maxChars","charCount","heading","HeadingVarians","h2","name","playButtonVisible","h3","contextLabelVisible","contextLabel","duration","views","dateAdded","seriesCount","durationLabel","viewsLabel","dateAddedLabel","seriesLabel","role","tabindex","onClick","onKeyDown","e","key","preventDefault","showMoreLabel","showLessLabel","mb"],"sources":["./src/components/hy-video/hy-video.scss?tag=hy-video","./src/components/hy-video/hy-video.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\na.hy-video {\n  text-decoration: none;\n}\n\n.hy-video__video-container {\n  aspect-ratio: 16 / 9;\n  display: inline-block;\n  margin-bottom: 22px;\n  position: relative;\n  width: 100%;\n\n  iframe {\n    border: 0;\n    height: 100%;\n    overflow: hidden;\n    width: 100%;\n\n    @supports (aspect-ratio: 16 / 9) {\n      aspect-ratio: 16 / 9;\n      height: auto;\n    }\n  }\n\n  .hy-video__preview-image {\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  .hy-video__play {\n    background-color: var(--grayscale-white);\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translateX(-50%) translateY(-50%);\n\n    button {\n      align-items: center;\n      background: transparent;\n      border: none;\n      display: flex;\n      flex-direction: column;\n      padding: 24px;\n\n      @include breakpoint($narrow) {\n        padding: 36px;\n      }\n\n      &:hover {\n        cursor: pointer;\n      }\n    }\n\n    button .hy-video__button-label {\n      @include font-size(15px, 18px);\n\n      color: var(--link-blue);\n      font-family: var(--main-font-family);\n      font-weight: bold;\n      letter-spacing: -0.1px;\n      text-align: center;\n      text-transform: uppercase;\n\n      @include breakpoint($narrow) {\n        @include font-size(17px, 20px);\n\n        letter-spacing: -0.14px;\n      }\n\n      @include breakpoint($extrawide) {\n        @include font-size(17px, 20px);\n\n        letter-spacing: -0.16px;\n      }\n    }\n\n    button svg {\n      fill: var(--link-blue);\n      height: 44px;\n      width: 44px;\n\n      @include breakpoint($wide) {\n        height: 80px;\n        width: 80px;\n      }\n    }\n  }\n\n  .hy-video__play__simple {\n    background-color: rgba(#000000, 0.2);\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    button {\n      align-items: center;\n      background: transparent;\n      border: none;\n      display: flex;\n    }\n\n    button svg {\n      fill: var(--grayscale-white);\n      height: 44px;\n      width: 44px;\n\n      @include breakpoint($wide) {\n        height: 80px;\n        width: 80px;\n      }\n    }\n  }\n}\n\n.hy-video:not(.hy-video--horizontal) {\n  display: flex;\n  flex-direction: column;\n\n  &:not(.hy-video__default, .hy-video--list) {\n    @include breakpoint($xlarge) {\n      max-width: 66%;\n    }\n  }\n}\n\n.hy-video--list {\n  .hy-video__meta__details {\n    justify-content: flex-start;\n    gap: 32px;\n    margin: 0;\n  }\n  .hy-video__meta__details--item {\n    margin-right: 0;\n    padding-right: 0;\n  }\n}\n\n.hy-video__label {\n  // font: h5 small size\n  @include font-size(12px, 14px);\n  display: inline-block;\n  background-color: var(--grayscale-black);\n  color: var(--grayscale-white);\n  font-family: var(--main-font-family);\n  font-weight: bold;\n  letter-spacing: -0.5px;\n  padding: 6px 8px;\n  margin: 0 0 22px;\n  text-transform: uppercase;\n}\n\n.hy-video.hy-video--horizontal {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  @include breakpoint($wide) {\n    flex-direction: row;\n  }\n\n  .hy-video__meta {\n    padding-left: 0;\n    width: 100%;\n\n    @include breakpoint($wide) {\n      padding-left: 2.5%;\n      width: 57.24%;\n    }\n  }\n}\n\n.hy-video__meta__title {\n  h2.hy-heading,\n  h3.hy-heading {\n    border: none;\n    margin: 8px 0 12px 0 !important;\n    hyphens: auto;\n    word-break: break-word;\n    padding: 0 !important;\n\n    @include breakpoint($wide) {\n      margin: 0 0 16px 0 !important;\n    }\n  }\n}\n\n.hy-video__meta__details {\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 12px;\n\n  @include breakpoint($wide) {\n    margin-bottom: 16px;\n  }\n}\n\n.hy-video__meta__details--item {\n  display: flex;\n  flex-direction: column;\n  margin-right: 44px;\n  min-width: 87px;\n  padding-right: 46px;\n  place-content: center space-between;\n}\n\n.hy-video__meta__description__content {\n  @include font-size(15px, 22px);\n\n  color: var(--grayscale-black);\n  display: block;\n  font-family: var(--main-font-family);\n  letter-spacing: 0;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    @include font-size(17px, 26px);\n  }\n}\n\n.hy-video__meta__description__more-button {\n  @include font-size(16px, 24px);\n  color: var(--brand-main-light);\n  font-family: var(--main-font-family);\n\n  &:hover {\n    cursor: pointer;\n  }\n}\n\n.hy-video__meta__label {\n  @include font-size(15px, 18px);\n  @include font-weight($bold);\n  color: var(--grayscale-black);\n  font-family: var(--main-font-family);\n  margin-bottom: 4px;\n}\n\n.hy-video__meta__content {\n  @include font-size(15px, 22px);\n\n  color: var(--grayscale-black);\n  font-family: var(--main-font-family);\n  letter-spacing: -0.5px;\n\n  @include breakpoint($narrow) {\n    @include font-size(17px, 26px);\n\n    letter-spacing: -0.56px;\n  }\n}\n","import {Component, Prop, h, Element, State} from \"@stencil/core\";\nimport {HeadingVarians} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-video\",\n  styleUrl: \"hy-video.scss\",\n  shadow: false,\n})\nexport class HyVideo {\n  @Element() el: HTMLElement;\n\n  /** Video title */\n  @Prop() videoTitle: string;\n  /** Video description */\n  @Prop() videoDescription: string;\n  /** Context label */\n  @Prop() contextLabel: string;\n  /** Should context label be visible */\n  @Prop() contextLabelVisible: boolean = false;\n  /** Preview image url */\n  @Prop() previewImageUrl: string;\n  /** Url to video, used with preview image */\n  @Prop() linkToVideo: string;\n  /** Label for play button if preview image is provided */\n  @Prop() playButtonLabel: string;\n  /** Should play button be visible */\n  @Prop() playButtonVisible: boolean = false;\n  /** Series label */\n  @Prop() seriesLabel: string = \"In this series\";\n  /** Series count */\n  @Prop() seriesCount: string = null;\n  /** Views count number */\n  @Prop() views: string;\n  /** Label for views number */\n  @Prop() viewsLabel: string;\n  /** Duration number */\n  @Prop() duration: string;\n  /** Label for duration number */\n  @Prop() durationLabel: string;\n  /** Date added date as string */\n  @Prop() dateAdded: string;\n  /** Label for date added */\n  @Prop() dateAddedLabel: string;\n  /** Use horizontal layout where metadata is on side */\n  @Prop() horizontal: boolean = false;\n\n  @Prop() disableLazy: boolean = false;\n\n  @Prop() headerstyle: string = \"default\";\n\n  @Prop() showMoreLabel: string = \"Show more\";\n\n  @Prop() showLessLabel: string = \"Show less\";\n\n  @Prop() simplePlayButton: boolean = false;\n\n  @Prop() styleList: boolean = false;\n\n  @State() descCollapsed: boolean = false;\n\n  componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n\n    if (this.videoDescription && this.videoDescription.match(/\\S/g).length > 255) {\n      this.descCollapsed = true;\n    }\n  }\n\n  renderPreviewWithLink = () => {\n    return this.linkToVideo ? (\n      <a title={this.videoTitle} href={this.linkToVideo} class=\"hy-video__link-to-video\">\n        <img\n          loading={this.disableLazy ? \"eager\" : \"lazy\"}\n          class=\"hy-video__preview-image\"\n          src={this.previewImageUrl}\n          alt={this.videoTitle}\n        />\n      </a>\n    ) : (\n      <img\n        loading={this.disableLazy ? \"eager\" : \"lazy\"}\n        class=\"hy-video__preview-image\"\n        src={this.previewImageUrl}\n        alt={this.videoTitle}\n      />\n    );\n  };\n\n  renderPlayButton = () => {\n    if (this.simplePlayButton) {\n      return (\n        <span class=\"hy-video__play__simple\">\n          <button type=\"button\">\n            <hy-icon icon={\"hy-icon-video\"} class={\"hy-video__play-icon\"} size={20} />\n          </button>\n        </span>\n      );\n    } else {\n      return (\n        <span class=\"hy-video__play\">\n          <button type=\"button\">\n            <hy-icon icon={\"hy-icon-video\"} class={\"hy-video__play-icon\"} size={20} />\n            <span class=\"hy-video__button-label\">{this.playButtonLabel}</span>\n          </button>\n        </span>\n      );\n    }\n  };\n\n  truncate = (str, n) => {\n    return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n  };\n\n  render() {\n    const classAttributes = [\n      \"hy-video\",\n      this.horizontal ? \"hy-video--horizontal\" : \"\",\n      !this.styleList ? `hy-video__${this.headerstyle}` : \"\",\n      this.styleList ? \"hy-video--list\" : \"\",\n    ].join(\" \");\n\n    const maxChars = 255;\n    const charCount = this.videoDescription ? this.videoDescription.match(/\\S/g).length : 0;\n\n    if (this.linkToVideo && this.styleList) {\n      return [\n        <a href={this.linkToVideo} class={classAttributes}>\n          {this.videoTitle && !this.horizontal && !this.styleList && (\n            <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h2}>\n              {this.videoTitle}\n            </hy-heading>\n          )}\n          <div class=\"hy-video__video-container\">\n            {this.previewImageUrl ? (\n              <div>\n                {this.renderPreviewWithLink()}\n                <slot name=\"video\"></slot>\n              </div>\n            ) : (\n              <slot name=\"video\"></slot>\n            )}\n            {this.playButtonVisible && this.renderPlayButton()}\n          </div>\n          <div class=\"hy-video__meta\">\n            {(this.videoTitle && this.horizontal) ||\n              (this.styleList && (\n                <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h3}>\n                  {this.videoTitle}\n                </hy-heading>\n              ))}\n            {this.contextLabelVisible && <span class=\"hy-video__label\">{this.contextLabel}</span>}\n            {(this.duration || this.views || this.dateAdded || this.seriesCount) && (\n              <div class=\"hy-video__meta__details\">\n                {this.duration && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.durationLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.duration}</span>\n                  </div>\n                )}\n                {this.views && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.viewsLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.views}</span>\n                  </div>\n                )}\n                {this.dateAdded && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.dateAddedLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.dateAdded}</span>\n                  </div>\n                )}\n                {!this.views && this.seriesCount && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.seriesLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.seriesCount}</span>\n                  </div>\n                )}\n              </div>\n            )}\n            {this.videoDescription && (\n              <div class=\"hy-video__meta__description\" aria-expanded={this.descCollapsed ? \"false\" : \"true\"}>\n                <div class=\"hy-video__meta__description__content\">\n                  {this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription}\n                </div>\n                {charCount > maxChars && (\n                  <span\n                    class=\"hy-video__meta__description__more-button\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-expanded={this.descCollapsed ? \"false\" : \"true\"}\n                    onClick={() => (this.descCollapsed = !this.descCollapsed)}\n                    onKeyDown={(e) => {\n                      if (e.key != \" \") return;\n                      e.preventDefault();\n                      this.descCollapsed = !this.descCollapsed;\n                    }}\n                  >\n                    {this.descCollapsed ? this.showMoreLabel : this.showLessLabel}\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n        </a>,\n      ];\n    } else {\n      return [\n        <div class={classAttributes}>\n          {this.videoTitle && !this.horizontal && !this.styleList && (\n            <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h2}>\n              {this.videoTitle}\n            </hy-heading>\n          )}\n          <div class=\"hy-video__video-container\">\n            {this.previewImageUrl ? (\n              <div>\n                {this.renderPreviewWithLink()}\n                <slot name=\"video\"></slot>\n              </div>\n            ) : (\n              <slot name=\"video\"></slot>\n            )}\n            {this.playButtonVisible && this.renderPlayButton()}\n          </div>\n          <div class=\"hy-video__meta\">\n            {(this.videoTitle && this.horizontal) ||\n              (this.styleList && (\n                <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h2}>\n                  {this.videoTitle}\n                </hy-heading>\n              ))}\n            {this.contextLabelVisible && <span class=\"hy-video__label\">{this.contextLabel}</span>}\n            {(this.duration || this.views || this.dateAdded) && (\n              <div class=\"hy-video__meta__details\">\n                {this.duration && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.durationLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.duration}</span>\n                  </div>\n                )}\n                {this.views && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.viewsLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.views}</span>\n                  </div>\n                )}\n                {this.dateAdded && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.dateAddedLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.dateAdded}</span>\n                  </div>\n                )}\n              </div>\n            )}\n            {this.videoDescription && (\n              <div class=\"hy-video__meta__description\" aria-expanded={this.descCollapsed ? \"false\" : \"true\"}>\n                <div class=\"hy-video__meta__description__content\">\n                  {this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription}\n                </div>\n                {charCount > maxChars && (\n                  <span\n                    class=\"hy-video__meta__description__more-button\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-expanded={this.descCollapsed ? \"false\" : \"true\"}\n                    onClick={() => (this.descCollapsed = !this.descCollapsed)}\n                    onKeyDown={(e) => {\n                      if (e.key != \" \") return;\n                      e.preventDefault();\n                      this.descCollapsed = !this.descCollapsed;\n                    }}\n                  >\n                    {this.descCollapsed ? this.showMoreLabel : this.showLessLabel}\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n        </div>,\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />,\n      ];\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/types/components/footer/hy-footer-base/hy-footer-base.d.ts

@@ -5,6 +5,11 @@ export interface FooterBaseLinks {
   mainlink?: boolean;
   items: Array<FooterBaseLinks>;
 }
+export interface FooterPostSectionLinks {
+  label: string;
+  url: string;
+  external: boolean;
+}
 export interface FooterBaseSome {
   label: string;
   url: string;
@@ -39,10 +44,15 @@ export declare class HyFooterBase implements ComponentInterface {
   copyrightText: string;
   private _dataFooterBaseLinks;
   private _dataFooterBaseSome;
+  private _dataFooterPostSectionLinks;
   /**
    * Footer links to be displayed
    */
   dataFooterBaseLinks: FooterBaseLinks[] | string;
+  /**
+   * Footer post section links
+   */
+  dataFooterPostSectionLinks: FooterPostSectionLinks[] | string;
   /**
    * Footer some links
    */

package/dist/types/components.d.ts

@@ -12,7 +12,7 @@ import { Breadcrumb } from "./components/hy-breadcrumbs/hy-breadcrumbs";
 import { TagValue } from "./components/hy-content-lists/hy-content-list-item/hy-content-list-item";
 import { IDropdownItem } from "./components/hy-dropdown/hy-dropdown";
 import { IFilterGroupFilter } from "./components/hy-filter-group/hy-filter-group";
-import { FooterBaseLinks, FooterBaseSome } from "./components/footer/hy-footer-base/hy-footer-base";
+import { FooterBaseLinks, FooterBaseSome, FooterPostSectionLinks } from "./components/footer/hy-footer-base/hy-footer-base";
 import { FooterInfoLinks, LuomusFooterContent } from "./components/footer/hy-footer-info/hy-footer-info";
 import { ListItemValue } from "./components/hy-general-list/hy-general-list";
 import { ImageSrcSet as ImageSrcSet1 } from "./components/hy-hero/hy-hero";
@@ -43,7 +43,7 @@ export { Breadcrumb } from "./components/hy-breadcrumbs/hy-breadcrumbs";
 export { TagValue } from "./components/hy-content-lists/hy-content-list-item/hy-content-list-item";
 export { IDropdownItem } from "./components/hy-dropdown/hy-dropdown";
 export { IFilterGroupFilter } from "./components/hy-filter-group/hy-filter-group";
-export { FooterBaseLinks, FooterBaseSome } from "./components/footer/hy-footer-base/hy-footer-base";
+export { FooterBaseLinks, FooterBaseSome, FooterPostSectionLinks } from "./components/footer/hy-footer-base/hy-footer-base";
 export { FooterInfoLinks, LuomusFooterContent } from "./components/footer/hy-footer-info/hy-footer-info";
 export { ListItemValue } from "./components/hy-general-list/hy-general-list";
 export { ImageSrcSet as ImageSrcSet1 } from "./components/hy-hero/hy-hero";
@@ -355,6 +355,10 @@ export namespace Components {
           * Footer some links
          */
         "dataFooterBaseSome": FooterBaseSome[] | string;
+        /**
+          * Footer post section links
+         */
+        "dataFooterPostSectionLinks": FooterPostSectionLinks[] | string;
         /**
           * Logo label
          */
@@ -1838,6 +1842,10 @@ declare namespace LocalJSX {
           * Footer some links
          */
         "dataFooterBaseSome"?: FooterBaseSome[] | string;
+        /**
+          * Footer post section links
+         */
+        "dataFooterPostSectionLinks"?: FooterPostSectionLinks[] | string;
         /**
           * Logo label
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcenteratunihelsinki/huds-lib",
-  "version": "0.8.68",
+  "version": "0.8.69",
   "description": "Helsinki University Design System library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -68,5 +68,5 @@
       "pre-commit": "pretty-quick --staged"
     }
   },
-  "gitHead": "7a2ac708c199b2f97637924fd4214b6be98519a0"
+  "gitHead": "6db78439796ed46213531878763b896e9dc7c423"
 }