@itcenteratunihelsinki/huds-lib 0.8.42 → 0.8.44

package/dist/collection/components/hy-tabs/hy-tabs.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 // For easy reference
 let keys = {
   end: 35,
@@ -22,76 +22,76 @@ let scrollTimeout;
 export class HyTabs {
   constructor() {
     this.tabId = undefined;
-    this.tabListLabel = '';
+    this.tabListLabel = "";
     this.focusTimeoutCleared = true;
     this.tabButtonTitles = undefined;
     this.tabPanelsState = undefined;
     this.tabButtons = undefined;
     this.tabList = undefined;
-    this.headerstyle = 'common';
+    this.headerstyle = "common";
   }
   componentWillLoad() {
-    const tabItems = this.el.querySelectorAll('hy-tabs-item');
+    const tabItems = this.el.querySelectorAll("hy-tabs-item");
     if (tabItems) {
       this.tabButtonTitles = Array.from(tabItems).map((panel) => {
         return {
-          title: panel.getAttribute('tab-title'),
-          id: panel.getAttribute('tab-title').toLowerCase().replace(/\W/g, '-'),
+          title: panel.getAttribute("tab-title"),
+          id: panel.getAttribute("tab-title").toLowerCase().replace(/\W/g, "-"),
         };
       });
     }
   }
   componentDidLoad() {
-    let hyMainDiv = this.el.closest('.hy-main');
+    let hyMainDiv = this.el.closest(".hy-main");
     if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains('with-sidebar')) {
-        this.headerstyle = 'large';
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
       }
     }
-    const tabContainer = this.el.querySelector('.hy-tabs__container');
+    const tabContainer = this.el.querySelector(".hy-tabs__container");
     if (tabContainer) {
       this.generateArrays(tabContainer);
-      const leftButton = this.el.querySelectorAll('.hy-tab-scroll__left')[0];
-      const rightButton = this.el.querySelectorAll('.hy-tab-scroll__right')[0];
+      const leftButton = this.el.querySelectorAll(".hy-tab-scroll__left")[0];
+      const rightButton = this.el.querySelectorAll(".hy-tab-scroll__right")[0];
       const tabList = this.tabList;
       this.checkScrollHidden(tabList, leftButton, rightButton);
-      tabList.addEventListener('scroll', () => {
+      tabList.addEventListener("scroll", () => {
         scrollTimeout = setTimeout(() => {
           window.clearTimeout(scrollTimeout);
           this.checkScrollHidden(tabList, leftButton, rightButton);
         }, 250);
       }, false);
       if (tabList.offSetWidth <= document.body.scrollWidth) {
-        leftButton.classList.add('is-hidden');
-        rightButton.classList.add('is-hidden');
+        leftButton.classList.add("is-hidden");
+        rightButton.classList.add("is-hidden");
       }
       const oneTabWidth = 250;
-      rightButton.addEventListener('click', (e) => {
+      rightButton.addEventListener("click", (e) => {
         e.preventDefault();
-        rightButton.classList.add('is-disabled');
+        rightButton.classList.add("is-disabled");
         tabList.scrollBy({
           top: 0,
           left: +oneTabWidth,
-          behavior: 'smooth',
+          behavior: "smooth",
         });
         checkTimeout = window.setTimeout(() => {
           window.clearTimeout(checkTimeout);
           this.checkScrollHidden(tabList, leftButton, rightButton);
-          rightButton.classList.remove('is-disabled');
+          rightButton.classList.remove("is-disabled");
         }, 250);
       });
-      leftButton.addEventListener('click', (e) => {
+      leftButton.addEventListener("click", (e) => {
         e.preventDefault();
-        leftButton.classList.add('is-disabled');
+        leftButton.classList.add("is-disabled");
         tabList.scrollBy({
           top: 0,
           left: -oneTabWidth,
-          behavior: 'smooth',
+          behavior: "smooth",
         });
         checkTimeout = window.setTimeout(() => {
           window.clearTimeout(checkTimeout);
           this.checkScrollHidden(tabList, leftButton, rightButton);
-          leftButton.classList.remove('is-disabled');
+          leftButton.classList.remove("is-disabled");
         }, 250);
       });
     }
@@ -108,8 +108,8 @@ export class HyTabs {
   addListeners(tabs, index) {
     if (tabs.length > 1) {
       for (let i = 0; i < tabs.length; ++i) {
-        tabs[index].addEventListener('click', this.clickEventListener);
-        tabs[index].addEventListener('keydown', this.keydownEventListener);
+        tabs[index].addEventListener("click", this.clickEventListener);
+        tabs[index].addEventListener("keydown", this.keydownEventListener);
         //tabs[index].addEventListener('keyup', this.keyupEventListener);
         tabs[index].index = index;
       }
@@ -117,16 +117,16 @@ export class HyTabs {
   }
   checkScrollHidden(tablist, leftButton, rightButton) {
     if (tablist.scrollLeft === 0) {
-      leftButton.classList.add('is-hidden');
+      leftButton.classList.add("is-hidden");
     }
     else {
-      leftButton.classList.remove('is-hidden');
+      leftButton.classList.remove("is-hidden");
     }
     if (tablist.scrollLeft + tablist.clientWidth >= tablist.scrollWidth - 1) {
-      rightButton.classList.add('is-hidden');
+      rightButton.classList.add("is-hidden");
     }
     else {
-      rightButton.classList.remove('is-hidden');
+      rightButton.classList.remove("is-hidden");
     }
   }
   // When a tab is clicked, activateTab is fired to activate it
@@ -175,7 +175,7 @@ export class HyTabs {
     switch (key) {
       case keys.left:
       case keys.right:
-        if (event.target.role === 'tab') {
+        if (event.target.role === "tab") {
           event.preventDefault();
           if (this.focusTimeoutCleared) {
             this.determineOrientation(event);
@@ -187,12 +187,12 @@ export class HyTabs {
     event.stopImmediatePropagation();
   }
   determineOrientation(event) {
-    const leftButton = this.el.querySelectorAll('.hy-tab-scroll__left')[0];
-    const rightButton = this.el.querySelectorAll('.hy-tab-scroll__right')[0];
+    const leftButton = this.el.querySelectorAll(".hy-tab-scroll__left")[0];
+    const rightButton = this.el.querySelectorAll(".hy-tab-scroll__right")[0];
     const tabList = this.tabList;
     this.checkScrollHidden(tabList, leftButton, rightButton);
     const key = event.keyCode;
-    const vertical = tabList.getAttribute('aria-orientation') == 'vertical';
+    const vertical = tabList.getAttribute("aria-orientation") == "vertical";
     let proceed = false;
     if (vertical) {
       if (key === keys.up || key === keys.down) {
@@ -240,10 +240,10 @@ export class HyTabs {
     // Deactivate all other tabs
     this.deactivateTabs(this.tabButtons);
     // Remove tabindex attribute
-    tab.removeAttribute('tabindex');
-    tab.setAttribute('aria-selected', 'true');
-    const controls = tab.getAttribute('aria-controls');
-    this.el.querySelector(`#${controls}`).removeAttribute('hidden');
+    tab.removeAttribute("tabindex");
+    tab.setAttribute("aria-selected", "true");
+    const controls = tab.getAttribute("aria-controls");
+    this.el.querySelector(`#${controls}`).removeAttribute("hidden");
     if (setFocus) {
       tab.focus();
     }
@@ -251,13 +251,13 @@ export class HyTabs {
   // Deactivate all tabs and tab panels
   deactivateTabs(tabs) {
     for (let t = 0; t < tabs.length; t++) {
-      tabs[t].setAttribute('tabindex', '-1');
-      tabs[t].setAttribute('aria-selected', 'false');
-      tabs[t].removeEventListener('focus', this.focusEventHandler);
+      tabs[t].setAttribute("tabindex", "-1");
+      tabs[t].setAttribute("aria-selected", "false");
+      tabs[t].removeEventListener("focus", this.focusEventHandler);
     }
     const panels = this.tabPanelsState[0];
     for (let p = 0; p < panels.length; p++) {
-      panels[p].setAttribute('hidden', 'hidden');
+      panels[p].setAttribute("hidden", "hidden");
     }
   }
   focusEventHandler(tab) {
@@ -273,30 +273,30 @@ export class HyTabs {
     }, 250);
   }
   render() {
-    const classComponentAttributes = ['hy-tabs__container', `hy-tabs__container__${this.headerstyle}`].join(' ');
-    const id = this.tabId.toLowerCase().replace(/\W/g, '-');
+    const classComponentAttributes = ["hy-tabs__container", `hy-tabs__container__${this.headerstyle}`].join(" ");
+    const id = this.tabId.toLowerCase().replace(/\W/g, "-");
     if (window.location.hash) {
       const tabHash = window.location.hash.substring(1);
-      const isUrlHashed = this.tabButtonTitles.some((tab) => tab['id'] === tabHash);
+      const isUrlHashed = this.tabButtonTitles.some((tab) => tab["id"] === tabHash);
       if (isUrlHashed) {
         const hashElement = document.getElementById(tabHash);
         if (hashElement) {
           this.activateTab(hashElement, true);
           const hashElementRect = hashElement.getBoundingClientRect();
-          window.scrollTo({ top: window.scrollY + hashElementRect.top - 200, behavior: 'smooth' });
+          window.scrollTo({ top: window.scrollY + hashElementRect.top - 200, behavior: "smooth" });
         }
       }
     }
     return [
       h("hy-box", { pt: "1.25, 1.25, 1.5, 2.5" }),
-      h("div", { id: id, class: classComponentAttributes }, h("div", { class: "hy-tablist-container" }, h("button", { tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__left is-hidden", "aria-hidden": "true" }, h("span", null, h("hy-icon", { icon: 'hy-icon-caret-left', size: 16 }))), h("div", { role: "tablist", "aria-label": this.tabListLabel }, this.tabButtonTitles &&
+      h("div", { id: id, class: classComponentAttributes }, h("div", { class: "hy-tablist-container" }, h("button", { tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__left is-hidden", "aria-hidden": "true" }, h("span", null, h("hy-icon", { icon: "hy-icon-caret-left", size: 16 }))), h("div", { role: "tablist", "aria-label": this.tabListLabel }, this.tabButtonTitles &&
         this.tabButtonTitles.map((item) => {
           const title = Object.values(item)[0];
-          const id = title.toLowerCase().replace(/\W/g, '-');
-          const titleAsId = title.toLowerCase().replace(/\W/g, '-');
-          const tabItemHref = '#' + titleAsId;
+          const id = title.toLowerCase().replace(/\W/g, "-");
+          const titleAsId = title.toLowerCase().replace(/\W/g, "-");
+          const tabItemHref = "#" + titleAsId;
           return (h("a", { href: tabItemHref, tabindex: "-1" }, h("button", { "aria-selected": "false", "aria-controls": `${id}-tab`, class: this.headerstyle, role: "tab", id: id }, h("span", null, title))));
-        })), h("button", { tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__right", "aria-hidden": "true" }, h("span", null, h("hy-icon", { icon: 'hy-icon-caret-right', size: 16 })))), h("slot", null)),
+        })), h("button", { tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__right", "aria-hidden": "true" }, h("span", null, h("hy-icon", { icon: "hy-icon-caret-right", size: 16 })))), h("slot", null)),
       h("hy-box", { mb: "1.75, 1.75, 2, 2.5" }),
     ];
   }
@@ -346,7 +346,7 @@ export class HyTabs {
         },
         "attribute": "tab-list-label",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "headerstyle": {
         "type": "string",
@@ -364,7 +364,7 @@ export class HyTabs {
         },
         "attribute": "headerstyle",
         "reflect": false,
-        "defaultValue": "'common'"
+        "defaultValue": "\"common\""
       }
     };
   }
@@ -406,4 +406,3 @@ export class HyTabs {
       }];
   }
 }
-//# sourceMappingURL=hy-tabs.js.map

package/dist/collection/components/hy-tabs-item/hy-tabs-item.js

@@ -1,10 +1,10 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class HyTabsItem {
   constructor() {
     this.tabTitle = undefined;
   }
   render() {
-    const id = this.tabTitle.toLowerCase().replace(/\W/g, '-');
+    const id = this.tabTitle.toLowerCase().replace(/\W/g, "-");
     return (h("div", { tabindex: "0", role: "tabpanel", id: `${id}-tab`, "aria-labelledby": id, hidden: true }, h("slot", null)));
   }
   static get is() { return "hy-tabs-item"; }
@@ -40,4 +40,3 @@ export class HyTabsItem {
     };
   }
 }
-//# sourceMappingURL=hy-tabs-item.js.map

package/dist/collection/components/hy-tag/hy-tag.js

@@ -1,7 +1,7 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class HyTag {
   render() {
-    const classAttributes = ['hy-tag'].join(' ');
+    const classAttributes = ["hy-tag"].join(" ");
     return (h(Host, null, h("div", { class: classAttributes }, h("span", null, h("slot", null)))));
   }
   static get is() { return "hy-tag"; }
@@ -17,4 +17,3 @@ export class HyTag {
     };
   }
 }
-//# sourceMappingURL=hy-tag.js.map

package/dist/collection/components/hy-twitter-feed/hy-twitter-feed.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class HyTwitterFeed {
   constructor() {
     this.headingVariant = undefined;
@@ -10,11 +10,11 @@ export class HyTwitterFeed {
   render() {
     const parsedTweets = JSON.parse(this.tweets);
     const HeadingVariant = this.headingVariant.toLowerCase();
-    if (this.tweetType === 'Hashtag' && this.twitterFeedKeyword.charAt(0) === '#') {
+    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("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))))));
     }))));
   }
@@ -119,4 +119,3 @@ export class HyTwitterFeed {
     };
   }
 }
-//# sourceMappingURL=hy-twitter-feed.js.map

package/dist/collection/components/hy-two-columns/hy-two-columns.js

@@ -1,10 +1,10 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class HyTwoColumns {
   constructor() {
     this.reversed = false;
   }
   render() {
-    const classAttributes = ['hy-two-columns', this.reversed ? 'hy-two-columns--reversed' : ''].join(' ');
+    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" })))));
   }
   static get is() { return "hy-two-columns"; }
@@ -41,4 +41,3 @@ export class HyTwoColumns {
     };
   }
 }
-//# sourceMappingURL=hy-two-columns.js.map

package/dist/collection/components/hy-user-login-form/hy-user-login-form.js

@@ -1,15 +1,15 @@
-import { h } from '@stencil/core';
-import { ColorVariant, SiteLogoSize } from '../../utils/utils';
+import { h } from "@stencil/core";
+import { ColorVariant, SiteLogoSize } from "../../utils/utils";
 export class HyUserLoginForm {
   constructor() {
     this.logoUrl = undefined;
     this.logoLabel = undefined;
   }
   render() {
-    const classAttributes = 'hy-user-login-form';
+    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)));
+    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)));
   }
   static get is() { return "hy-user-login-form"; }
   static get originalStyleUrls() {
@@ -61,4 +61,3 @@ export class HyUserLoginForm {
     };
   }
 }
-//# sourceMappingURL=hy-user-login-form.js.map

package/dist/collection/components/hy-video/hy-video.js

@@ -1,20 +1,20 @@
-import { h } from '@stencil/core';
-import { HeadingVarians } from '../../utils/utils';
+import { h } from "@stencil/core";
+import { HeadingVarians } from "../../utils/utils";
 export class HyVideo {
   constructor() {
     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 }));
+      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 }))));
+        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))));
+        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;
+      return str.length > n ? str.substr(0, n - 1) + "..." : str;
     };
     this.videoTitle = undefined;
     this.videoDescription = undefined;
@@ -24,7 +24,7 @@ export class HyVideo {
     this.linkToVideo = undefined;
     this.playButtonLabel = undefined;
     this.playButtonVisible = false;
-    this.seriesLabel = 'In this series';
+    this.seriesLabel = "In this series";
     this.seriesCount = null;
     this.views = undefined;
     this.viewsLabel = undefined;
@@ -34,18 +34,18 @@ export class HyVideo {
     this.dateAddedLabel = undefined;
     this.horizontal = false;
     this.disableLazy = false;
-    this.headerstyle = 'default';
-    this.showMoreLabel = 'Show more';
-    this.showLessLabel = 'Show less';
+    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');
+    let hyMainDiv = this.el.closest(".hy-main");
     if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains('with-sidebar')) {
-        this.headerstyle = 'large';
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
       }
     }
     if (this.videoDescription && this.videoDescription.match(/\S/g).length > 255) {
@@ -54,18 +54,18 @@ export class HyVideo {
   }
   render() {
     const classAttributes = [
-      'hy-video',
-      this.horizontal ? 'hy-video--horizontal' : '',
-      !this.styleList ? `hy-video__${this.headerstyle}` : '',
-      this.styleList ? 'hy-video--list' : '',
-    ].join(' ');
+      "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 != ' ')
+          (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;
@@ -75,8 +75,8 @@ export class HyVideo {
     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 != ' ')
+          (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;
@@ -252,7 +252,7 @@ export class HyVideo {
         },
         "attribute": "series-label",
         "reflect": false,
-        "defaultValue": "'In this series'"
+        "defaultValue": "\"In this series\""
       },
       "seriesCount": {
         "type": "string",
@@ -426,7 +426,7 @@ export class HyVideo {
         },
         "attribute": "headerstyle",
         "reflect": false,
-        "defaultValue": "'default'"
+        "defaultValue": "\"default\""
       },
       "showMoreLabel": {
         "type": "string",
@@ -444,7 +444,7 @@ export class HyVideo {
         },
         "attribute": "show-more-label",
         "reflect": false,
-        "defaultValue": "'Show more'"
+        "defaultValue": "\"Show more\""
       },
       "showLessLabel": {
         "type": "string",
@@ -462,7 +462,7 @@ export class HyVideo {
         },
         "attribute": "show-less-label",
         "reflect": false,
-        "defaultValue": "'Show less'"
+        "defaultValue": "\"Show less\""
       },
       "simplePlayButton": {
         "type": "boolean",
@@ -509,4 +509,3 @@ export class HyVideo {
   }
   static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=hy-video.js.map

package/dist/collection/components/icon/AddToTodoList.js

@@ -3,4 +3,3 @@ function SvgAddToTodoList(props) {
   return (h("svg", Object.assign({ viewBox: "0 0 1000 1000" }, props), h("path", { d: "M774 871H226V161h548v129h97V65H129v903h742V742h-97v129zm65-387v-97h-65v97h-97v64h97v97h65v-97h96v-64h-96zm-484 97h258v64H355v-64zm0 96h258v65H355v-65zm0-387h258v65H355v-65zm0 97h258v65H355v-65z" })));
 }
 export default SvgAddToTodoList;
-//# sourceMappingURL=AddToTodoList.js.map

package/dist/collection/components/icon/Alert.js

@@ -1,6 +1,5 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 function SvgAlert(props) {
   return (h("svg", Object.assign({ viewBox: "0 0 32 32" }, props), h("circle", { cx: "16", cy: "16", r: "16" }), h("path", { d: "M17.6,18.79H15l-.55-10.5h3.72Zm-3.21,3.67a1.8,1.8,0,0,1,.48-1.36,2,2,0,0,1,1.41-.46,1.94,1.94,0,0,1,1.38.47,1.83,1.83,0,0,1,.49,1.35,1.79,1.79,0,0,1-.5,1.34,1.84,1.84,0,0,1-1.37.49,1.93,1.93,0,0,1-1.4-.48A1.79,1.79,0,0,1,14.39,22.46Z" })));
 }
 export default SvgAlert;
-//# sourceMappingURL=Alert.js.map

package/dist/collection/components/icon/Archive.js

@@ -1,6 +1,5 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 function SvgArchive(props) {
   return (h("svg", Object.assign({ viewBox: "0 0 28 34" }, props), h("path", { id: "Shape", d: "M28,8.9H0V34H28ZM24.71,30.76H3.29V12.14H24.71Z" }), h("polygon", { id: "Shape-2", points: "20.3 15.66 17.01 15.66 17.01 17.53 10.99 17.53 10.99 15.66 7.7 15.66 7.7 20.76 20.3 20.76 20.3 15.66" }), h("rect", { x: "3.71", y: "4.45", width: "20.59", height: "3.24" }), h("rect", { x: "5.76", width: "16.47", height: "3.24" })));
 }
 export default SvgArchive;
-//# sourceMappingURL=Archive.js.map

package/dist/collection/components/icon/Arrow.js

@@ -3,4 +3,3 @@ function SvgArrow(props) {
   return (h("svg", Object.assign({ viewBox: "0 0 1000 1000" }, props), h("path", { d: "M290 35L181 158l393 345-393 339 109 123 533-462z" })));
 }
 export default SvgArrow;
-//# sourceMappingURL=Arrow.js.map

package/dist/collection/components/icon/ArrowDown.js

@@ -3,4 +3,3 @@ function SvgArrowDown(props) {
   return (h("svg", Object.assign({ viewBox: "0 0 1000 1000" }, props), h("path", { d: "M513 965l419-475 23-22-100-87-23-23-261 294V6H410v649L171 384l-19-23-26 20-74 67-26 20 461 522z" })));
 }
 export default SvgArrowDown;
-//# sourceMappingURL=ArrowDown.js.map

package/dist/collection/components/icon/ArrowRight.js

@@ -1,6 +1,5 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 function SvgArrowRight(props) {
   return (h("svg", Object.assign({ width: "109px", height: "111px", viewBox: "0 0 109 111", version: "1.1" }, props), h("g", { id: "Page-1", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linejoin": "round" }, h("g", { filter: "url(#filter-1)", id: "Icon/arrow/to_right" }, h("g", { transform: "translate(10.000000, 9.000000)" }, h("g", { id: "Path" }, h("use", { fill: "#FFFFFF", "fill-opacity": "1", filter: "url(#filter-3)" }), h("use", { stroke: "#000222", "stroke-width": "4", fill: "#FFFFFF", "fill-rule": "evenodd" })))))));
 }
 export default SvgArrowRight;
-//# sourceMappingURL=ArrowRight.js.map

package/dist/collection/components/icon/ArrowUp.js

@@ -3,4 +3,3 @@ function SvgArrowUp(props) {
   return (h("svg", Object.assign({ viewBox: "0 0 1000 1000" }, props), h("path", { d: "M468 32L48 506l-19 23 23 23 77 64 19 23 26-26 239-268v645h161V342l236 271 22 22 123-106-20-26L516 32 497 6z" })));
 }
 export default SvgArrowUp;
-//# sourceMappingURL=ArrowUp.js.map

package/dist/collection/components/icon/Avatar.js

@@ -3,4 +3,3 @@ function SvgAvatar(props) {
   return (h("svg", Object.assign({ viewBox: "0 0 1000 1000" }, props), h("path", { d: "M274 387q0 61 31 113t82 82 113 31 113-31 83-82 30-113-30-113-83-83-113-30-113 30-82 83-31 113zm220 548q-143 0-281-74l90-171q102 53 207 49 94-5 184-55l96 168q-133 79-271 83h-25z" })));
 }
 export default SvgAvatar;
-//# sourceMappingURL=Avatar.js.map

package/dist/collection/components/icon/AvatarGroup.js

@@ -3,4 +3,3 @@ function SvgAvatarGroup(props) {
   return (h("svg", Object.assign({ viewBox: "0 0 1000 1000" }, props), h("path", { d: "M190 387q0 61 31 113t82 82 113 31 113-31 83-82 30-113-30-113-83-83-113-30-113 30-82 83-31 113zm220 552q-142 0-281-74l90-171q102 53 207 48 94-5 184-55l96 168q-136 76-271 80-9 4-25 4zm329-758q-40 0-62 13 52 39 81 97t26 125q0 19-3 29 41-15 67-49t26-77q2-36-16-68t-49-50-70-20zm116 300q-17 8-41 15-14 4-43 10-20 75-71 126h52q82-10 148-38z" })));
 }
 export default SvgAvatarGroup;
-//# sourceMappingURL=AvatarGroup.js.map

package/dist/collection/components/icon/Bachelor.js

@@ -3,4 +3,3 @@ function SvgBachelor(props) {
   return (h("svg", Object.assign({ viewBox: "0 0 1000 1000" }, props), h("path", { d: "M339 784q-9-5-17-9-22-11-46-18-33-10-67-13-41-2-80 8l8 7q10 9 24 17 19 10 41 16 28 7 59 6 37-1 78-14zm-42-39q0-4 1-9 0-11-3-24-4-17-13-34-11-21-30-40-23-22-55-41l2 18q4 22 13 43 11 28 30 49 23 26 55 38zM158 442l-6 6q-7 8-12 19-7 14-8 31-2 20 5 43 8 27 28 56l5-14q6-16 8-35 4-25 0-49-4-30-20-57zm-29 0q5-4 9-9 12-11 22-25 15-20 25-44 13-29 18-61l-16 10q-19 12-33 27-20 21-27 44-9 28 2 58zm26-139q11-2 21-4 26-5 49-14 33-13 54-31 26-22 34-51l-19 3q-23 5-44 13-30 12-53 30-28 23-42 54zm-49 81q6-35-2-65-7-24-22-45-11-15-25-27l-12-8q0 37 7 66 5 24 15 42 8 14 18 24 7 7 15 10zm97-303q-4 6-9 13-11 16-17 34-10 26-9 51 0 31 16 60l8-11q10-14 16-31 9-23 9-49 0-33-14-67zm123 9q-8 4-15 9-18 10-34 24-22 18-37 38-18 25-24 52l23-5q26-8 46-19 29-16 40-37 14-27 1-62zm-181 68q-5 7-9 13-11 16-17 35-10 25-9 50 0 31 16 60l6-10q10-14 16-30 8-24 9-50 0-33-12-68zm100 561q-26-24-65-38-30-11-67-14-26-3-53-1l-21 2q47 29 86 45 33 13 59 18 21 3 37 0 11-2 19-7zm-58-45q3-26-17-50-17-18-49-34-22-11-50-19l-23-6q27 37 55 63 22 20 44 32 15 9 29 12zM0 455q9 29 29 52 16 19 39 34 16 11 34 18l14 6q3-27-14-50-14-19-40-34-19-11-42-20zm106 32q9-23-1-49-9-21-29-42-15-16-34-30l-16-11q-5 34 7 63 9 22 28 40 14 13 31 22zm552 310l-6-7q12-16 16-35 4-14 2-30-2-10-5-20l-4-8q-58 17-58 119l-6 7q-20 12-71 38l-29 13q-20-6-29-13-46-20-81-45 0-37-8-63-14-44-50-56l-3 8q-4 10-5 20-1 16 3 30 5 19 18 35l-3 4q-28-3-63 3-26 5-54 14l-22 8q63 22 114 21 38-2 63-14 23 16 81 48 2 0 4 2l3 1-13 4q-4 0-11 1l-9 2q-3 0-9 2t-10 1h-32v26h35q3 0 10-1t10-2 10-2l12-5q13-6 23-6 2 0 6-2t7-5q1 2 6 4t6 3l13 4q6 2 10 3t11 3 12 2 10 3 9 1h32v-26h-32q-10 0-16-3-3 0-9-1t-11-2l-12-4q2 0 4-1l2-2q58-32 77-48 78 26 175-10 3 2-3 0-97-26-18-5-16-4-30-7-19-4-36-6-20-2-36-1zm3-13q41 13 78 14 31 1 59-6 22-6 41-16 14-8 24-17l8-7q-39-10-80-8-34 3-67 13-24 7-46 18zm142-187q-33 19-56 41-19 19-31 40-9 17-12 34-2 13-2 24l1 9q32-12 55-38 19-21 30-49 9-21 13-43zm39-155q-16 27-20 57-4 24 0 49 2 19 8 35l5 14q20-29 28-56 7-23 5-43-1-17-8-31-5-11-12-19zm-45-139q5 32 18 61 10 24 25 44 10 14 22 25l9 9q11-30 2-58-7-23-27-44-14-15-33-27zM687 203q8 29 34 51 21 18 54 31 23 9 49 14l21 4q-14-31-42-54-23-18-53-30-21-8-44-13zm207 181q3-1 6-3 8-3 15-10 10-10 18-24 10-18 15-42 7-29 7-66l-12 8q-14 12-25 27-15 21-22 45-8 30-2 65zM797 81q-14 34-14 67 0 26 9 49 6 17 16 31l8 11q16-29 16-60 1-25-9-51-6-18-17-34zm-13 132q-7-27-25-52-15-20-37-38-16-14-33-24l-15-9q-13 35 1 62 11 21 40 37 20 11 46 19zm71-55q-13 34-13 67 0 26 8 50 6 16 16 30l8 11q17-28 18-59 0-24-9-50-7-19-18-36zM755 719q3 3 6 5 8 5 19 7 16 3 38 0 26-5 59-18 38-16 84-45l-22-3q-27-2-53 1-37 3-68 14-38 14-63 39zm200-154q-12 3-23 6-28 8-50 19-32 16-48 34-21 24-18 50 5 0 17-4 23-8 49-28 37-29 73-77zm-71 0q7-3 15-6 18-7 34-18 23-15 39-34 20-23 28-52l-20 6q-23 9-42 20-26 15-40 34-17 23-14 50zm10-78l14-6q17-9 31-21 20-18 29-41 13-29 9-64-2 0-18 11-19 14-34 30-21 21-30 42-10 26-1 49z" })));
 }
 export default SvgBachelor;
-//# sourceMappingURL=Bachelor.js.map

package/dist/collection/components/icon/BulletList.js

@@ -3,4 +3,3 @@ function SvgBulletList(props) {
   return (h("svg", Object.assign({ viewBox: "0 0 1000 1000" }, props), h("path", { d: "M0 0h250v250H0V0zm375 62h625v125H375V62zM0 375h250v250H0V375zm375 62h625v125H375V437zM0 750h250v250H0V750zm375 62h625v125H375V812z" })));
 }
 export default SvgBulletList;
-//# sourceMappingURL=BulletList.js.map

package/dist/collection/components/icon/Camera.js

@@ -3,4 +3,3 @@ function SvgCamera(props) {
   return (h("svg", Object.assign({ viewBox: "0 0 1000 1000" }, props), h("path", { d: "M32 161v678h936V161H32zm452 549q-57 0-105-29t-77-76-28-105 28-105 77-77 105-28 105 28 77 77 28 105-28 105-77 76-105 29zm290-339q-26 0-45-19t-19-46 19-45 46-19 45 19 19 45-19 46-46 19z" })));
 }
 export default SvgCamera;
-//# sourceMappingURL=Camera.js.map

package/dist/collection/components/icon/CaretDown.js

@@ -3,4 +3,3 @@ function SvgCaretDown(props) {
   return (h("svg", Object.assign({ viewBox: "0 0 1000 1000" }, props), h("path", { d: "M503 819l462-532-123-110-339 394-345-394L35 287z" })));
 }
 export default SvgCaretDown;
-//# sourceMappingURL=CaretDown.js.map

package/dist/collection/components/icon/CaretLeft.js

@@ -3,4 +3,3 @@ function SvgCaretLeft(props) {
   return (h("svg", Object.assign({ viewBox: "0 0 1000 1000" }, props), h("path", { d: "M181 503l532 462 110-123-394-339 394-345L713 35z" })));
 }
 export default SvgCaretLeft;
-//# sourceMappingURL=CaretLeft.js.map