@itcenteratunihelsinki/huds-lib 0.5.43 → 0.5.46

package/dist/esm/hy-video.entry.js

@@ -1,63 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-083c8c8a.js';
-import { H as HeadingVarians } from './utils-708bbefe.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:#f9a21a;--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}.hy-video__video-container{display:inline-block;margin-bottom:22px;position:relative;width:100%}.hy-video__video-container iframe{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>*:not(.hy-video__label):not(.hy-video__play){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){max-width:66%}}.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{border:none;margin:8px 0 12px 0 !important;padding:0 !important}@media (min-width: 60rem){.hy-video__meta__title h2.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 HyVideo = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /** Should context label be visible */
-    this.contextLabelVisible = false;
-    /** Should play button be visible */
-    this.playButtonVisible = false;
-    /** Use horizontal layout where metadata is on side */
-    this.horizontal = false;
-    this.disableLazy = false;
-    this.headerstyle = 'default';
-    this.showMoreLabel = 'Show more';
-    this.showLessLabel = 'Show less';
-    this.descCollapsed = false;
-    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 = () => {
-      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;
-    };
-  }
-  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' : '',
-      `hy-video__${this.headerstyle}`,
-    ].join(' ');
-    const maxChars = 255;
-    const charCount = this.videoDescription ? this.videoDescription.match(/\S/g).length : 0;
-    return [
-      h("div", { class: classAttributes }, this.videoTitle && !this.horizontal && (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 && (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 getElement(this); }
-};
-HyVideo.style = hyVideoCss;
-
-export { HyVideo as hy_video };