npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.57 → 0.8.59 - Mend

@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1260) hide show

package/dist/esm/hy-tiny-text.entry.js ADDED Viewed

@@ -0,0 +1,18 @@
+import { r as registerInstance, h } from './index-f84f2a7d.js';
+const tinyTextCss = ":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}.hy-tiny-text{color:var(--grayscale-dark);font-family:var(--main-font-family);font-size:12px;letter-spacing:-0.07px;line-height:16px}";
+const TinyText = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const classAttributes = ["hy-tiny-text"];
+    return (h("div", { class: classAttributes.join(" ") }, h("slot", null)));
+  }
+};
+TinyText.style = tinyTextCss;
+export { TinyText as hy_tiny_text };
+//# sourceMappingURL=hy-tiny-text.entry.js.map

package/dist/esm/hy-tiny-text.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"hy-tiny-text.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,0zCAA0zC;;MCOj0C,QAAQ;;;;EACnB,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,cAAc,CAAC,CAAC;IACzC,QACE,WAAK,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IACnC,eAAa,CACT,EACN;GACH;;;;;;","names":[],"sources":["./src/components/hy-tiny-text/tiny-text.scss?tag=hy-tiny-text&encapsulation=shadow","./src/components/hy-tiny-text/tiny-text.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-tiny-text {\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n font-size: 12px;\n letter-spacing: -0.07px;\n line-height: 16px;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-tiny-text\",\n styleUrl: \"tiny-text.scss\",\n shadow: true,\n})\nexport class TinyText {\n render() {\n const classAttributes = [\"hy-tiny-text\"];\n return (\n <div class={classAttributes.join(\" \")}>\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/hy-twitter-feed.entry.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { r as registerInstance, h } from './index-f84f2a7d.js';
+const hyTwitterFeedCss = ":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}.hy-twitter-feed{margin:40px 0}.hy-twitter-feed__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:24px}@media (min-width: 30rem){.hy-twitter-feed__header{margin-bottom:32px}}@media (min-width: 75.0625rem){.without-sidebar .hy-twitter-feed__header{margin-bottom:41px}}@media (min-width: 1601px){.with-sidebar .hy-twitter-feed__header{margin-bottom:41px}}.hy-twitter-feed__title{font-weight:700;font-family:var(--main-font-family);margin-top:0;margin-bottom:0;margin-right:8px}@media (min-width: 30rem){.hy-twitter-feed__title{margin-right:12px}}@media (min-width: 75.0625rem){.without-sidebar .hy-twitter-feed__title{margin-right:16px}}@media (min-width: 1601px){.with-sidebar .hy-twitter-feed__title{margin-right:16px}}h2.hy-twitter-feed__title{font-size:1.625rem;line-height:32px;letter-spacing:-0.82px}@media (min-width: 30rem){h2.hy-twitter-feed__title{font-size:1.875rem;line-height:36px;letter-spacing:-0.6px}}@media (min-width: 75.0625rem){.without-sidebar h2.hy-twitter-feed__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}@media (min-width: 1601px){.with-sidebar h2.hy-twitter-feed__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}.is-front-page h2.hy-twitter-feed__title,.is-landing-page h2.hy-twitter-feed__title{font-size:1.75rem;line-height:32px;letter-spacing:-0.7px;text-transform:uppercase}@media (min-width: 30rem){.is-front-page h2.hy-twitter-feed__title,.is-landing-page h2.hy-twitter-feed__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.85px}}@media (min-width: 60rem){.without-sidebar .is-front-page h2.hy-twitter-feed__title,.without-sidebar .is-landing-page h2.hy-twitter-feed__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}@media (min-width: 75.0625rem){.without-sidebar .is-front-page h2.hy-twitter-feed__title,.without-sidebar .is-landing-page h2.hy-twitter-feed__title{font-size:2.625rem;line-height:48px;letter-spacing:-1.05px}}@media (min-width: 75.0625rem){.with-sidebar .is-front-page h2.hy-twitter-feed__title,.with-sidebar .is-landing-page h2.hy-twitter-feed__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}@media (min-width: 1601px){.with-sidebar .is-front-page h2.hy-twitter-feed__title,.with-sidebar .is-landing-page h2.hy-twitter-feed__title{font-size:2.625rem;line-height:48px;letter-spacing:-1.05px}}h3.hy-twitter-feed__title{font-size:1.3125rem;line-height:28px;letter-spacing:-0.42px}@media (min-width: 30rem){h3.hy-twitter-feed__title{font-size:1.5625rem;line-height:32px;letter-spacing:-0.5px}}.is-front-page h3.hy-twitter-feed__title,.is-landing-page h3.hy-twitter-feed__title{font-size:1.625rem;line-height:32px;letter-spacing:-0.52px}@media (min-width: 30rem){.is-front-page h3.hy-twitter-feed__title,.is-landing-page h3.hy-twitter-feed__title{font-size:1.875rem;line-height:36px;letter-spacing:-0.6px}}@media (min-width: 60rem){.without-sidebar .is-front-page h3.hy-twitter-feed__title,.without-sidebar .is-landing-page h3.hy-twitter-feed__title{font-size:1.875rem;line-height:36px;letter-spacing:-0.6px}}@media (min-width: 75.0625rem){.without-sidebar .is-front-page h3.hy-twitter-feed__title,.without-sidebar .is-landing-page h3.hy-twitter-feed__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}@media (min-width: 75.0625rem){.with-sidebar .is-front-page h3.hy-twitter-feed__title,.with-sidebar .is-landing-page h3.hy-twitter-feed__title{font-size:1.875rem;line-height:36px;letter-spacing:-0.6px}}@media (min-width: 1601px){.with-sidebar .is-front-page h3.hy-twitter-feed__title,.with-sidebar .is-landing-page h3.hy-twitter-feed__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}.hy-twitter-feed__keyword{font-size:0.9375rem;line-height:22px;margin:0;font-weight:400;font-family:var(--main-font-family);color:var(--grayscale-dark-text);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hy-twitter-feed__keyword hy-icon{margin-right:4px}@media (min-width: 30rem){.hy-twitter-feed__keyword hy-icon{margin-right:6px}}@media (min-width: 30rem){.hy-twitter-feed__keyword hy-icon svg{width:24px;height:24px}}@media (min-width: 30rem){.hy-twitter-feed__keyword{font-size:1rem;line-height:24px}}@media (min-width: 75.0625rem){.without-sidebar .hy-twitter-feed__keyword{font-size:1.0625rem;line-height:24px}}@media (min-width: 75.0625rem){.without-sidebar .hy-twitter-feed__keyword hy-icon svg{width:32px;height:32px}}@media (min-width: 1601px){.with-sidebar .hy-twitter-feed__keyword{font-size:1.0625rem;line-height:24px}}@media (min-width: 1601px){.with-sidebar .hy-twitter-feed__keyword hy-icon svg{width:32px;height:32px}}.hy-twitter-feed__keyword+a{font-size:0.9375rem;line-height:18px;margin:0 0 0 8px;font-weight:600;font-family:var(--main-font-family);color:var(--link-blue);letter-spacing:-0.28px;text-decoration:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.hy-twitter-feed__keyword+a:hover{text-decoration:underline}.hy-twitter-feed__keyword+a hy-icon{margin-right:6px}.hy-twitter-feed__keyword+a hy-icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-twitter-feed__keyword+a{font-size:0.875rem;line-height:18px;letter-spacing:-0.26px;margin:0 0 0 12px}}@media (min-width: 75.0625rem){.without-sidebar .hy-twitter-feed__keyword+a{font-size:1rem;line-height:20px;letter-spacing:-0.3px;margin:0 0 0 16px}}@media (min-width: 1601px){.with-sidebar .hy-twitter-feed__keyword+a{font-size:1rem;line-height:20px;letter-spacing:-0.3px;margin:0 0 0 16px}}.hy-twitter-feed__tweets{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:16px}@media (min-width: 30rem){.hy-twitter-feed__tweets{grid-template-columns:repeat(2, 1fr);gap:24px}}@media (min-width: 60rem){.without-sidebar .hy-twitter-feed__tweets{grid-template-columns:repeat(3, 1fr)}}@media (min-width: 75.0625rem){.with-sidebar .hy-twitter-feed__tweets{grid-template-columns:repeat(3, 1fr)}}.hy-twitter-tweet{background-color:var(--grayscale-background-box);height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}.hy-twitter-tweet__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:-8px;padding-top:12px;margin-bottom:8px}@media (min-width: 30rem){.hy-twitter-tweet__header{padding-top:16px}}.hy-twitter-tweet__profile-image img{height:70px;width:70px}@media (min-width: 75.0625rem){.without-sidebar .hy-twitter-tweet__profile-image img{height:80px;width:80px}}@media (min-width: 1601px){.with-sidebar .hy-twitter-tweet__profile-image img{height:80px;width:80px}}.hy-twitter-tweet__header-content{margin-left:8px}.hy-twitter-tweet__header-content time{font-size:0.75rem;line-height:14px;font-weight:400;font-family:var(--main-font-family);color:var(--grayscale-black);letter-spacing:-0.1px}.hy-twitter-tweet__header-content p{font-size:0.9375rem;line-height:18px;font-weight:700;font-family:var(--main-font-family);color:var(--brand-main-nearly-black);letter-spacing:-0.3px;margin:4px 0 2px}@media (min-width: 30rem){.hy-twitter-tweet__header-content p{font-size:1rem;line-height:20px;letter-spacing:-0.32px}}.hy-twitter-tweet__header-content a{font-size:0.75rem;line-height:16px;font-weight:600;font-family:var(--main-font-family);color:var(--link-blue);letter-spacing:-0.1px;text-decoration:none;position:relative;z-index:10}.hy-twitter-tweet__header-content a:hover{text-decoration:underline}.hy-twitter-tweet__content-wrapper{height:100%;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}.hy-twitter-tweet__content{padding:0 16px}.hy-twitter-tweet__content p{font-size:0.9375rem;line-height:20px;font-weight:400;font-family:var(--main-font-family);color:var(--grayscale-dark-text);letter-spacing:-0.03px;margin:0 0 8px}@media (min-width: 30rem){.hy-twitter-tweet__content p{font-size:0.875rem;line-height:18px;letter-spacing:-0.08px}}.hy-twitter-tweet__tweet-link{font-size:0.75rem;line-height:16px;font-weight:600;font-family:var(--main-font-family);color:var(--link-blue);letter-spacing:-0.1px;text-decoration:none}.hy-twitter-tweet__tweet-link span{position:absolute;inset:0}.hy-twitter-tweet__tweet-link:hover{text-decoration:underline}.hy-twitter-tweet__statistics{margin-top:16px;padding:0 16px 16px}.hy-twitter-tweet__statistics .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.hy-twitter-tweet__statistics p{font-size:0.75rem;line-height:14px;font-weight:400;font-family:var(--main-font-family);color:var(--grayscale-dark);letter-spacing:-0.1px;margin:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hy-twitter-tweet__statistics p:not(:first-of-type){margin-left:16px}.hy-twitter-tweet__statistics p hy-icon{margin-right:4px}.hy-twitter-tweet__statistics p hy-icon svg{fill:var(--grayscale-dark)}";
+const HyTwitterFeed = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.headingVariant = undefined;
+    this.paragraphTitle = undefined;
+    this.twitterFeedKeyword = undefined;
+    this.tweetType = undefined;
+    this.tweets = undefined;
+  }
+  render() {
+    const parsedTweets = JSON.parse(this.tweets);
+    const HeadingVariant = this.headingVariant.toLowerCase();
+    if (this.tweetType === "Hashtag" && this.twitterFeedKeyword.charAt(0) === "#") {
+      this.twitterFeedKeyword = this.twitterFeedKeyword.substring(1);
+    }
+    return (h("section", { class: "hy-twitter-feed" }, h("div", { class: "hy-twitter-feed__header" }, h(HeadingVariant, { class: "hy-twitter-feed__title" }, this.paragraphTitle || "Twitter"), h("p", { class: "hy-twitter-feed__keyword" }, h("hy-icon", { icon: `hy-icon-some-twitter`, size: 20 }), this.tweetType === "Hashtag" ? `#${this.twitterFeedKeyword}` : `@${this.twitterFeedKeyword}`), this.tweetType === "Username" && (h("a", { href: `https://twitter.com/${this.twitterFeedKeyword}`, target: "_blank" }, h("hy-icon", { icon: `hy-icon-plus`, size: 12 }), "Follow"))), h("ul", { class: "hy-twitter-feed__tweets" }, parsedTweets.map(({ tweet_text, tweet_created, tweet_absolute_url, tweet_like_count, tweet_retweet_count, user_name, user_username, user_profile_image_url, }) => {
+      const dateFormatted = new Intl.DateTimeFormat("fi-FI").format(new Date(tweet_created));
+      return (h("li", { class: "hy-twitter-feed__item" }, h("article", { class: "hy-twitter-tweet" }, h("header", { class: "hy-twitter-tweet__header" }, h("figure", { class: "hy-twitter-tweet__profile-image", role: "complementary" }, h("img", { src: user_profile_image_url, alt: "" })), h("div", { class: "hy-twitter-tweet__header-content" }, h("time", { dateTime: tweet_created }, dateFormatted), h("p", null, user_name), h("a", { class: "hy-twitter-tweet__user-link", href: `https://twitter.com/${user_username}`, target: "_blank" }, "@", user_username))), h("div", { class: "hy-twitter-tweet__content-wrapper" }, h("div", { class: "hy-twitter-tweet__content" }, h("p", null, tweet_text.length > 113 ? `${tweet_text.substr(0, 113)}...` : tweet_text), h("a", { class: "hy-twitter-tweet__tweet-link", href: tweet_absolute_url, target: "_blank" }, h("span", { "aria-hidden": "true" }), `${tweet_absolute_url.substr(0, 24)}...`)), h("div", { class: "hy-twitter-tweet__statistics", role: "complementary" }, h("p", null, h("span", { class: "visually-hidden" }, "Tweet like count: "), h("hy-icon", { icon: `hy-icon-some-twitter-like`, size: 16 }), tweet_like_count), h("p", null, h("span", { class: "visually-hidden" }, "Tweet retweet count: "), h("hy-icon", { icon: `hy-icon-some-twitter-retweet`, size: 16 }), tweet_retweet_count))))));
+    }))));
+  }
+};
+HyTwitterFeed.style = hyTwitterFeedCss;
+export { HyTwitterFeed as hy_twitter_feed };
+//# sourceMappingURL=hy-twitter-feed.entry.js.map

package/dist/esm/hy-twitter-feed.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"hy-twitter-feed.entry.js","mappings":"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","names":[],"sources":["./src/components/hy-twitter-feed/hy-twitter-feed.scss?tag=hy-twitter-feed","./src/components/hy-twitter-feed/hy-twitter-feed.tsx"],"sourcesContent":[".hy-twitter-feed {\n margin: 40px 0;\n}\n\n.hy-twitter-feed__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n margin-bottom: 24px;\n\n @include breakpoint($narrow) {\n margin-bottom: 32px;\n }\n\n .without-sidebar & {\n @include breakpoint($extrawide) {\n margin-bottom: 41px;\n }\n }\n\n .with-sidebar & {\n @include breakpoint($xlarge) {\n margin-bottom: 41px;\n }\n }\n}\n\n.hy-twitter-feed__title {\n font-weight: $bold;\n font-family: var(--main-font-family);\n margin-top: 0;\n margin-bottom: 0;\n margin-right: 8px;\n\n @include breakpoint($narrow) {\n margin-right: 12px;\n }\n\n .without-sidebar & {\n @include breakpoint($extrawide) {\n margin-right: 16px;\n }\n }\n\n .with-sidebar & {\n @include breakpoint($xlarge) {\n margin-right: 16px;\n }\n }\n}\n\nh2.hy-twitter-feed__title {\n @include font-size(26px, 32px);\n letter-spacing: -0.82px;\n\n @include breakpoint($narrow) {\n @include font-size(30px, 36px);\n letter-spacing: -0.6px;\n }\n\n .without-sidebar & {\n @include breakpoint($extrawide) {\n @include font-size(34px, 40px);\n letter-spacing: -0.68px;\n }\n }\n\n .with-sidebar & {\n @include breakpoint($xlarge) {\n @include font-size(34px, 40px);\n letter-spacing: -0.68px;\n }\n }\n\n .is-front-page &,\n .is-landing-page & {\n @include font-size(28px, 32px);\n letter-spacing: -0.7px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(34px, 40px);\n letter-spacing: -0.85px;\n }\n\n .without-sidebar & {\n @include breakpoint($wide) {\n @include font-size(34px, 40px);\n letter-spacing: -0.68px;\n }\n\n @include breakpoint($extrawide) {\n @include font-size(42px, 48px);\n letter-spacing: -1.05px;\n }\n }\n\n .with-sidebar & {\n @include breakpoint($extrawide) {\n @include font-size(34px, 40px);\n letter-spacing: -0.68px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(42px, 48px);\n letter-spacing: -1.05px;\n }\n }\n }\n}\n\nh3.hy-twitter-feed__title {\n @include font-size(21px, 28px);\n letter-spacing: -0.42px;\n\n @include breakpoint($narrow) {\n @include font-size(25px, 32px);\n letter-spacing: -0.5px;\n }\n\n .is-front-page &,\n .is-landing-page & {\n @include font-size(26px, 32px);\n letter-spacing: -0.52px;\n\n @include breakpoint($narrow) {\n @include font-size(30px, 36px);\n letter-spacing: -0.6px;\n }\n\n .without-sidebar & {\n @include breakpoint($wide) {\n @include font-size(30px, 36px);\n letter-spacing: -0.6px;\n }\n\n @include breakpoint($extrawide) {\n @include font-size(34px, 40px);\n letter-spacing: -0.68px;\n }\n }\n\n .with-sidebar & {\n @include breakpoint($extrawide) {\n @include font-size(30px, 36px);\n letter-spacing: -0.6px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(34px, 40px);\n letter-spacing: -0.68px;\n }\n }\n }\n}\n\n.hy-twitter-feed__keyword {\n @include font-size(15px, 22px);\n margin: 0;\n font-weight: $regular;\n font-family: var(--main-font-family);\n color: var(--grayscale-dark-text);\n display: inline-flex;\n align-items: center;\n\n hy-icon {\n margin-right: 4px;\n\n @include breakpoint($narrow) {\n margin-right: 6px;\n }\n\n svg {\n @include breakpoint($narrow) {\n width: 24px;\n height: 24px;\n }\n }\n }\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n\n .without-sidebar & {\n @include breakpoint($extrawide) {\n @include font-size(17px, 24px);\n }\n\n hy-icon {\n svg {\n @include breakpoint($extrawide) {\n width: 32px;\n height: 32px;\n }\n }\n }\n }\n\n .with-sidebar & {\n @include breakpoint($xlarge) {\n @include font-size(17px, 24px);\n }\n\n hy-icon {\n svg {\n @include breakpoint($xlarge) {\n width: 32px;\n height: 32px;\n }\n }\n }\n }\n\n + a {\n @include font-size(15px, 18px);\n margin: 0 0 0 8px;\n font-weight: $semibold;\n font-family: var(--main-font-family);\n color: var(--link-blue);\n letter-spacing: -0.28px;\n text-decoration: none;\n align-items: center;\n display: inline-flex;\n\n &:hover {\n text-decoration: underline;\n }\n\n hy-icon {\n margin-right: 6px;\n\n svg {\n fill: var(--link-blue);\n }\n }\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n letter-spacing: -0.26px;\n margin: 0 0 0 12px;\n }\n\n .without-sidebar & {\n @include breakpoint($extrawide) {\n @include font-size(16px, 20px);\n letter-spacing: -0.3px;\n margin: 0 0 0 16px;\n }\n }\n\n .with-sidebar & {\n @include breakpoint($xlarge) {\n @include font-size(16px, 20px);\n letter-spacing: -0.3px;\n margin: 0 0 0 16px;\n }\n }\n }\n}\n\n.hy-twitter-feed__tweets {\n list-style: none;\n padding: 0;\n margin: 0;\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n\n @include breakpoint($narrow) {\n grid-template-columns: repeat(2, 1fr);\n gap: 24px;\n }\n\n .without-sidebar & {\n @include breakpoint($wide) {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n\n .with-sidebar & {\n @include breakpoint($extrawide) {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n}\n\n.hy-twitter-tweet {\n background-color: var(--grayscale-background-box);\n height: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n\n.hy-twitter-tweet__header {\n display: flex;\n align-items: center;\n margin-left: -8px;\n padding-top: 12px;\n margin-bottom: 8px;\n\n @include breakpoint($narrow) {\n padding-top: 16px;\n }\n}\n\n.hy-twitter-tweet__profile-image {\n img {\n height: 70px;\n width: 70px;\n\n .without-sidebar & {\n @include breakpoint($extrawide) {\n height: 80px;\n width: 80px;\n }\n }\n\n .with-sidebar & {\n @include breakpoint($xlarge) {\n height: 80px;\n width: 80px;\n }\n }\n }\n}\n\n.hy-twitter-tweet__header-content {\n margin-left: 8px;\n\n time {\n @include font-size(12px, 14px);\n font-weight: $regular;\n font-family: var(--main-font-family);\n color: var(--grayscale-black);\n letter-spacing: -0.1px;\n }\n\n p {\n @include font-size(15px, 18px);\n font-weight: $bold;\n font-family: var(--main-font-family);\n color: var(--brand-main-nearly-black);\n letter-spacing: -0.3px;\n margin: 4px 0 2px;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 20px);\n letter-spacing: -0.32px;\n }\n }\n\n a {\n @include font-size(12px, 16px);\n font-weight: $semibold;\n font-family: var(--main-font-family);\n color: var(--link-blue);\n letter-spacing: -0.1px;\n text-decoration: none;\n position: relative;\n z-index: 10;\n\n &:hover {\n text-decoration: underline;\n }\n }\n}\n\n.hy-twitter-tweet__content-wrapper {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.hy-twitter-tweet__content {\n padding: 0 16px;\n\n p {\n @include font-size(15px, 20px);\n font-weight: $regular;\n font-family: var(--main-font-family);\n color: var(--grayscale-dark-text);\n letter-spacing: -0.03px;\n margin: 0 0 8px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n letter-spacing: -0.08px;\n }\n }\n}\n\n.hy-twitter-tweet__tweet-link {\n @include font-size(12px, 16px);\n font-weight: $semibold;\n font-family: var(--main-font-family);\n color: var(--link-blue);\n letter-spacing: -0.1px;\n text-decoration: none;\n\n span {\n position: absolute;\n inset: 0;\n }\n\n &:hover {\n text-decoration: underline;\n }\n}\n\n.hy-twitter-tweet__statistics {\n margin-top: 16px;\n padding: 0 16px 16px;\n\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n\n p {\n @include font-size(12px, 14px);\n font-weight: $regular;\n font-family: var(--main-font-family);\n color: var(--grayscale-dark);\n letter-spacing: -0.1px;\n margin: 0;\n display: inline-flex;\n align-items: center;\n\n &:not(:first-of-type) {\n margin-left: 16px;\n }\n\n hy-icon {\n margin-right: 4px;\n\n svg {\n fill: var(--grayscale-dark);\n }\n }\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-twitter-feed\",\n styleUrl: \"hy-twitter-feed.scss\",\n shadow: false,\n})\nexport class HyTwitterFeed {\n @Prop() headingVariant: string;\n @Prop() paragraphTitle?: string;\n @Prop() twitterFeedKeyword: string;\n @Prop() tweetType: string;\n @Prop() tweets: string;\n\n render() {\n const parsedTweets = JSON.parse(this.tweets);\n const HeadingVariant = this.headingVariant.toLowerCase();\n\n if (this.tweetType === \"Hashtag\" && this.twitterFeedKeyword.charAt(0) === \"#\") {\n this.twitterFeedKeyword = this.twitterFeedKeyword.substring(1);\n }\n\n return (\n <section class=\"hy-twitter-feed\">\n <div class=\"hy-twitter-feed__header\">\n <HeadingVariant class=\"hy-twitter-feed__title\">{this.paragraphTitle || \"Twitter\"}</HeadingVariant>\n <p class=\"hy-twitter-feed__keyword\">\n <hy-icon icon={`hy-icon-some-twitter`} size={20} />\n {this.tweetType === \"Hashtag\" ? `#${this.twitterFeedKeyword}` : `@${this.twitterFeedKeyword}`}\n </p>\n {this.tweetType === \"Username\" && (\n <a href={`https://twitter.com/${this.twitterFeedKeyword}`} target=\"_blank\">\n <hy-icon icon={`hy-icon-plus`} size={12} />\n Follow\n </a>\n )}\n </div>\n <ul class=\"hy-twitter-feed__tweets\">\n {parsedTweets.map(\n ({\n tweet_text,\n tweet_created,\n tweet_absolute_url,\n tweet_like_count,\n tweet_retweet_count,\n user_name,\n user_username,\n user_profile_image_url,\n }) => {\n const dateFormatted = new Intl.DateTimeFormat(\"fi-FI\").format(new Date(tweet_created));\n\n return (\n <li class=\"hy-twitter-feed__item\">\n <article class=\"hy-twitter-tweet\">\n <header class=\"hy-twitter-tweet__header\">\n <figure class=\"hy-twitter-tweet__profile-image\" role=\"complementary\">\n <img src={user_profile_image_url} alt=\"\" />\n </figure>\n <div class=\"hy-twitter-tweet__header-content\">\n <time dateTime={tweet_created}>{dateFormatted}</time>\n <p>{user_name}</p>\n <a\n class=\"hy-twitter-tweet__user-link\"\n href={`https://twitter.com/${user_username}`}\n target=\"_blank\"\n >\n @{user_username}\n </a>\n </div>\n </header>\n <div class=\"hy-twitter-tweet__content-wrapper\">\n <div class=\"hy-twitter-tweet__content\">\n <p>{tweet_text.length > 113 ? `${tweet_text.substr(0, 113)}...` : tweet_text}</p>\n <a class=\"hy-twitter-tweet__tweet-link\" href={tweet_absolute_url} target=\"_blank\">\n <span aria-hidden=\"true\"></span>\n {`${tweet_absolute_url.substr(0, 24)}...`}\n </a>\n </div>\n <div class=\"hy-twitter-tweet__statistics\" role=\"complementary\">\n <p>\n <span class=\"visually-hidden\">Tweet like count: </span>\n <hy-icon icon={`hy-icon-some-twitter-like`} size={16} />\n {tweet_like_count}\n </p>\n <p>\n <span class=\"visually-hidden\">Tweet retweet count: </span>\n <hy-icon icon={`hy-icon-some-twitter-retweet`} size={16} />\n {tweet_retweet_count}\n </p>\n </div>\n </div>\n </article>\n </li>\n );\n }\n )}\n </ul>\n </section>\n );\n }\n}\n"],"version":3}

package/dist/esm/hy-two-columns.entry.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, H as Host } from './index-f84f2a7d.js';
+const hyTwoColumnsCss = ":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}.hy-two-columns{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-two-columns h2,.hy-two-columns h3,.hy-two-columns h4,.hy-two-columns h5,.hy-two-columns h6{margin-top:0}.hy-two-columns p{margin-top:0}@media (min-width: 30rem){.hy-two-columns{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-two-columns--reversed{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 30rem){.hy-two-columns--reversed{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.hy-two-columns--reversed .hy-two-columns__item--side{margin-left:0;margin-right:0}@media (min-width: 30rem){.hy-two-columns--reversed .hy-two-columns__item--side{margin-right:5.79%}}@media (min-width: 60rem){.hy-two-columns--reversed .hy-two-columns__item--side{margin-right:8.5%}}.hy-two-columns__item{width:100%}.hy-two-columns__item [slot=main]{width:100%}.hy-two-columns__item [slot=main] .hy-paragraph-text{width:100% !important}.hy-two-columns__item [slot=side]{width:100%}.hy-two-columns__item--main{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-preferred-size:100%;flex-basis:100%;width:100%}@media (min-width: 30rem){.hy-two-columns__item--main{-ms-flex-preferred-size:67.01%;flex-basis:67.01%}}@media (min-width: 60rem){.hy-two-columns__item--main{-ms-flex-preferred-size:63%;flex-basis:63%}}.hy-two-columns__item--side{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-preferred-size:100%;flex-basis:100%;margin-left:0;margin-right:0;padding-left:0;padding-right:0;width:100%}@media (min-width: 30rem){.hy-two-columns__item--side{-ms-flex-preferred-size:32.99%;flex-basis:32.99%;margin-left:5.79%}}@media (min-width: 60rem){.hy-two-columns__item--side{-ms-flex-preferred-size:37%;flex-basis:37%;margin-left:8.5%;padding:0}}.hy-two-columns__item--side hy-key-figure{padding:0 10.67%}@media (min-width: 30rem){.hy-two-columns__item--side hy-key-figure{padding:0}}";
+const HyTwoColumns = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.reversed = false;
+  }
+  render() {
+    const classAttributes = ["hy-two-columns", this.reversed ? "hy-two-columns--reversed" : ""].join(" ");
+    return (h(Host, null, h("div", { class: classAttributes }, h("div", { class: "hy-two-columns__item hy-two-columns__item--main" }, h("slot", { name: "main" })), h("div", { class: "hy-two-columns__item hy-two-columns__item--side" }, h("slot", { name: "side" })))));
+  }
+};
+HyTwoColumns.style = hyTwoColumnsCss;
+export { HyTwoColumns as hy_two_columns };
+//# sourceMappingURL=hy-two-columns.entry.js.map

package/dist/esm/hy-two-columns.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"hy-two-columns.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,y2GAAy2G;;MCOp3G,YAAY;;;oBACK,KAAK;;EAEjC,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,GAAG,0BAA0B,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEtG,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,eAAe,IACzB,WAAK,KAAK,EAAC,iDAAiD,IAC1D,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,WAAK,KAAK,EAAC,iDAAiD,IAC1D,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACF,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/hy-two-columns/hy-two-columns.scss?tag=hy-two-columns","./src/components/hy-two-columns/hy-two-columns.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-two-columns {\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-top: 0;\n }\n p {\n margin-top: 0;\n }\n\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &--reversed {\n flex-direction: column;\n\n @include breakpoint($narrow) {\n flex-direction: row-reverse;\n }\n\n .hy-two-columns__item--side {\n margin-left: 0;\n margin-right: 0;\n\n @include breakpoint($narrow) {\n margin-right: 5.79%;\n }\n\n @include breakpoint($wide) {\n margin-right: 8.5%;\n }\n }\n }\n}\n\n.hy-two-columns__item {\n width: 100%;\n\n [slot=\"main\"] {\n width: 100%;\n\n .hy-paragraph-text {\n width: 100% !important;\n }\n }\n\n [slot=\"side\"] {\n width: 100%;\n }\n\n &--main {\n display: flex;\n flex-basis: 100%;\n width: 100%;\n\n @include breakpoint($narrow) {\n flex-basis: 67.01%;\n }\n\n @include breakpoint($wide) {\n flex-basis: 63%;\n }\n }\n\n &--side {\n display: flex;\n flex-basis: 100%;\n margin-left: 0;\n margin-right: 0;\n padding-left: 0;\n padding-right: 0;\n width: 100%;\n\n @include breakpoint($narrow) {\n flex-basis: 32.99%; // sidebar width is always 4.5 column of the global 12-col content area grid.\n margin-left: 5.79%; // (half of the column+gutter) of global 12-col grid = gap between main and sidebar\n }\n\n @include breakpoint($wide) {\n flex-basis: 37%;\n margin-left: 8.5%; // (1 column + gutter) of global 12-col grid = gap between main and sidebar\n padding: 0;\n }\n\n // Key figure block inside Sidebar\n hy-key-figure {\n padding: 0 10.67%;\n @include breakpoint($narrow) {\n padding: 0;\n }\n }\n }\n}\n","import {Component, Host, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-two-columns\",\n styleUrl: \"hy-two-columns.scss\",\n shadow: false,\n})\nexport class HyTwoColumns {\n @Prop() reversed: boolean = false;\n\n render() {\n const classAttributes = [\"hy-two-columns\", this.reversed ? \"hy-two-columns--reversed\" : \"\"].join(\" \");\n\n return (\n <Host>\n <div class={classAttributes}>\n <div class=\"hy-two-columns__item hy-two-columns__item--main\">\n <slot name=\"main\"></slot>\n </div>\n <div class=\"hy-two-columns__item hy-two-columns__item--side\">\n <slot name=\"side\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/hy-user-login-form.entry.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { r as registerInstance, h } from './index-f84f2a7d.js';
+import { S as SiteLogoSize, C as ColorVariant } from './utils-7438924c.js';
+const hyUserLoginFormCss = ":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}.hy-user-login-form{font-family:var(--main-font-family)}.hy-user-login-form .user-login-form{position:relative}.hy-user-login-form .user-login-form .hy-login-label{margin-top:16px}.hy-user-login-form .user-login-form input{display:block;margin:8px 0 0 0;min-height:32px}.hy-user-login-form .user-login-form label{font-size:1rem;line-height:16px;font-weight:700;display:block}.hy-user-login-form .user-login-form label:before{content:\"*\";padding-right:3px}.hy-user-login-form .user-login-form div#edit-name--description,.hy-user-login-form .user-login-form div#edit-pass--description{display:none}.hy-user-login-form .user-login-form div.form-item-pass{margin-top:28px}.hy-user-login-form .user-login-form div#edit-actions{margin-top:32px}";
+const HyUserLoginForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.logoUrl = undefined;
+    this.logoLabel = undefined;
+  }
+  render() {
+    const classAttributes = "hy-user-login-form";
+    const logoSize = SiteLogoSize.large;
+    const logoColor = ColorVariant.black;
+    return (h("div", { class: classAttributes }, h("div", { class: "hy-site-header__logo-container" }, h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel })), h("slot", null)));
+  }
+};
+HyUserLoginForm.style = hyUserLoginFormCss;
+export { HyUserLoginForm as hy_user_login_form };
+//# sourceMappingURL=hy-user-login-form.entry.js.map

package/dist/esm/hy-user-login-form.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"hy-user-login-form.entry.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,y5DAAy5D;;MCQv6D,eAAe;;;;;;EAI1B,MAAM;IACJ,MAAM,eAAe,GAAG,oBAAoB,CAAC;IAE7C,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC;IACpC,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC;IAErC,QACE,WAAK,KAAK,EAAE,eAAe,IACzB,WAAK,KAAK,EAAE,gCAAgC,IAC1C,oBAAc,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,GAAI,CACxF,EAEN,eAAQ,CACJ,EACN;GACH;;;;;;","names":[],"sources":["./src/components/hy-user-login-form/hy-user-login-form.scss?tag=hy-user-login-form","./src/components/hy-user-login-form/hy-user-login-form.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-user-login-form {\n font-family: var(--main-font-family);\n\n .user-login-form {\n position: relative;\n\n .hy-login-label {\n margin-top: 16px;\n }\n\n input {\n display: block;\n margin: 8px 0 0 0;\n min-height: 32px;\n }\n\n label {\n @include font-size(16px, 16px);\n @include font-weight($bold);\n display: block;\n }\n\n label:before {\n content: \"*\";\n padding-right: 3px;\n }\n\n div#edit-name--description,\n div#edit-pass--description {\n display: none;\n }\n\n div.form-item-pass {\n margin-top: 28px;\n }\n\n div#edit-actions {\n margin-top: 32px;\n }\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {ColorVariant, SiteLogoSize} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-user-login-form\",\n styleUrl: \"hy-user-login-form.scss\",\n shadow: false,\n})\nexport class HyUserLoginForm {\n @Prop() logoUrl?: string;\n @Prop() logoLabel?: string;\n\n render() {\n const classAttributes = \"hy-user-login-form\";\n\n const logoSize = SiteLogoSize.large;\n const logoColor = ColorVariant.black;\n\n return (\n <div class={classAttributes}>\n <div class={\"hy-site-header__logo-container\"}>\n <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />\n </div>\n\n <slot />\n </div>\n );\n }\n}\n"],"version":3}

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

@@ -0,0 +1,98 @@
+import { r as registerInstance, h, g as getElement } from './index-f84f2a7d.js';
+import { f as HeadingVarians } from './utils-7438924c.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{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 HyVideo = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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";
+      }
+    }
+    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)))))),
+      ];
+    }
+    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 getElement(this); }
+};
+HyVideo.style = hyVideoCss;
+export { HyVideo as hy_video };
+//# sourceMappingURL=hy-video.entry.js.map

package/dist/esm/hy-video.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"hy-video.entry.js","mappings":"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","names":[],"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"],"version":3}