@itcenteratunihelsinki/huds-lib 0.8.73 → 0.8.74

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

@@ -1,635 +1,638 @@
 import { h } from "@stencil/core";
 import { ListItemVariants } from "../../utils/utils";
 let keys = {
-  enter: "Enter",
-  space: "Space",
+    enter: "Enter",
+    space: "Space",
 };
 export class HyListItem {
-  constructor() {
-    this.isExpandedRelatedContent = false;
-    this.variant = ListItemVariants.default;
-    this.itemType = undefined;
-    this.itemTitle = undefined;
-    this.itemDescription = undefined;
-    this.url = undefined;
-    this.isExternal = false;
-    this.scLabel = undefined;
-    this.itemImageUrl = undefined;
-    this.itemImageAlt = undefined;
-    this.disableLazy = false;
-    this.relatedLinksBlockTitle = undefined;
-    this.relatedLinks = undefined;
-    this.imageLabel = undefined;
-    this.outGoingUrlLabel = "Go to programme page";
-    this.additionalInfo = undefined;
-    this.headerstyle = "common";
-    this.sourceSet = undefined;
-    this.truncateDescription = false;
-    this.truncateLimit = 140;
-    this._imageMinHeight = 0;
-    this._imageMinWidth = 0;
-  }
-  relatedLinksWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._relatedLinks = JSON.parse(newValue);
+    constructor() {
+        this.isExpandedRelatedContent = false;
+        this.variant = ListItemVariants.default;
+        this.itemType = undefined;
+        this.itemTitle = undefined;
+        this.itemDescription = undefined;
+        this.url = undefined;
+        this.isExternal = false;
+        this.scLabel = undefined;
+        this.itemImageUrl = undefined;
+        this.itemImageAlt = undefined;
+        this.disableLazy = false;
+        this.relatedLinksBlockTitle = undefined;
+        this.relatedLinks = undefined;
+        this.imageLabel = undefined;
+        this.outGoingUrlLabel = "Go to programme page";
+        this.additionalInfo = undefined;
+        this.headerstyle = "common";
+        this.sourceSet = undefined;
+        this.truncateDescription = false;
+        this.truncateLimit = 140;
+        this._imageMinHeight = 0;
+        this._imageMinWidth = 0;
     }
-    else {
-      this._relatedLinks = newValue;
+    relatedLinksWatcher(newValue) {
+        if (typeof newValue === "string") {
+            this._relatedLinks = JSON.parse(newValue);
+        }
+        else {
+            this._relatedLinks = newValue;
+        }
     }
-  }
-  additionalInfoWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._additionalInfo = JSON.parse(newValue);
+    additionalInfoWatcher(newValue) {
+        if (typeof newValue === "string") {
+            this._additionalInfo = JSON.parse(newValue);
+        }
+        else {
+            this._additionalInfo = newValue;
+        }
     }
-    else {
-      this._additionalInfo = newValue;
+    srcSetWatcher(data) {
+        this._sourceSet = typeof data === "string" ? JSON.parse(data) : data;
     }
-  }
-  srcSetWatcher(data) {
-    this._sourceSet = typeof data === "string" ? JSON.parse(data) : data;
-  }
-  expandRelatedInfoPanel(target) {
-    let contentSelector = `hy-list-item-wrapper__${this.variant}__related-info__content`;
-    let targetButtonClass = "hy-list-item-wrapper__degree__related-info__heading__button";
-    let contentSection = document.querySelectorAll(`[aria-labelledBy="${target.id}"]`)[0];
-    if (contentSection) {
-      if (!this.isExpandedRelatedContent) {
-        contentSection.classList.add(`${contentSelector}__is-open`);
-        target.classList.add(`${targetButtonClass}__is-open`);
-      }
-      else {
-        contentSection.classList.remove(`${contentSelector}__is-open`);
-        target.classList.remove(`${targetButtonClass}__is-open`);
-      }
-      this.isExpandedRelatedContent = !this.isExpandedRelatedContent;
-    }
-  }
-  handleKeyDown(event) {
-    const key = event.code;
-    let target = event.target;
-    const targetElement = target.tagName.toLowerCase();
-    const possibleTags = [targetElement].some((r) => ["svg", "path", "button", "a"].indexOf(r) >= 0);
-    if (target &&
-      possibleTags &&
-      !target.classList.contains("hy-list-item-wrapper__degree__related-info__link") &&
-      [keys.enter, keys.space].includes(key)) {
-      if (targetElement !== "button") {
-        target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);
-      }
-      this.expandRelatedInfoPanel(target);
-      event.preventDefault();
+    expandRelatedInfoPanel(target) {
+        let contentSelector = `hy-list-item-wrapper__${this.variant}__related-info__content`;
+        let targetButtonClass = "hy-list-item-wrapper__degree__related-info__heading__button";
+        let contentSection = document.querySelectorAll(`[aria-labelledBy="${target.id}"]`)[0];
+        if (contentSection) {
+            if (!this.isExpandedRelatedContent) {
+                contentSection.classList.add(`${contentSelector}__is-open`);
+                target.classList.add(`${targetButtonClass}__is-open`);
+            }
+            else {
+                contentSection.classList.remove(`${contentSelector}__is-open`);
+                target.classList.remove(`${targetButtonClass}__is-open`);
+            }
+            this.isExpandedRelatedContent = !this.isExpandedRelatedContent;
+        }
     }
-  }
-  handleClick(event) {
-    let target = event.target;
-    const targetElement = target.tagName.toLowerCase();
-    const possibleTags = [targetElement].some((r) => ["svg", "path", "button", "a"].indexOf(r) >= 0);
-    if (target && possibleTags && !target.classList.contains("hy-list-item-wrapper__degree__related-info__link")) {
-      if (targetElement !== "button") {
-        target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);
-      }
-      this.expandRelatedInfoPanel(target);
-      event.preventDefault();
-      event.stopImmediatePropagation();
+    handleKeyDown(event) {
+        const key = event.code;
+        let target = event.target;
+        const targetElement = target.tagName.toLowerCase();
+        const possibleTags = [targetElement].some((r) => ["svg", "path", "button", "a"].indexOf(r) >= 0);
+        if (target &&
+            possibleTags &&
+            !target.classList.contains("hy-list-item-wrapper__degree__related-info__link") &&
+            [keys.enter, keys.space].includes(key)) {
+            if (targetElement !== "button") {
+                target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);
+            }
+            this.expandRelatedInfoPanel(target);
+            event.preventDefault();
+        }
     }
-  }
-  componentWillLoad() {
-    this.relatedLinksWatcher(this.relatedLinks);
-    this.additionalInfoWatcher(this.additionalInfo);
-    this.srcSetWatcher(this.sourceSet);
-  }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest(".hy-main");
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains("with-sidebar")) {
-        this.headerstyle = "large";
-      }
+    handleClick(event) {
+        let target = event.target;
+        const targetElement = target.tagName.toLowerCase();
+        const possibleTags = [targetElement].some((r) => ["svg", "path", "button", "a"].indexOf(r) >= 0);
+        if (target && possibleTags && !target.classList.contains("hy-list-item-wrapper__degree__related-info__link")) {
+            if (targetElement !== "button") {
+                target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);
+            }
+            this.expandRelatedInfoPanel(target);
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
     }
-    if (this.variant == ListItemVariants.degreeProgramme) {
-      const image = document.querySelector(".hy-list-item__degree__image-container__image img");
-      if (image) {
-        image.addEventListener("load", function () {
-          const outputImageAspectRatio = 1;
-          const imageHeight = image.naturalHeight;
-          const imageWidth = image.naturalWidth;
-          const inputImageAspectRatio = imageWidth / imageHeight;
-          this._imageMinWidth = imageWidth;
-          this._imageMinHeight = imageHeight;
-          if (inputImageAspectRatio > outputImageAspectRatio) {
-            this._imageMinWidth = imageHeight * outputImageAspectRatio;
-          }
-          else if (inputImageAspectRatio < outputImageAspectRatio) {
-            this._imageMinHeight = imageWidth / outputImageAspectRatio;
-          }
-        });
-      }
+    componentWillLoad() {
+        this.relatedLinksWatcher(this.relatedLinks);
+        this.additionalInfoWatcher(this.additionalInfo);
+        this.srcSetWatcher(this.sourceSet);
     }
-  }
-  render() {
-    const classWrapperAttributes = [
-      "hy-list-item-wrapper",
-      `hy-list-item-wrapper__${this.variant}`,
-      `hy-list-item-wrapper__${this.variant}__${this.headerstyle}`,
-    ].join(" ");
-    const classAttributes = ["hy-list-item", `hy-list-item__${this.variant}`].join(" ");
-    const classInfoContainerAttributes = [
-      `hy-list-item__${this.variant}__info-container`,
-      `hy-list-item__${this.variant}__info-container__${this.headerstyle}`,
-    ].join(" ");
-    /*const classInfoContainerDataAttributes = [
-      `hy-list-item__${this.variant}__info-container__data`,
-      `hy-list-item__${this.variant}__info-container__data__${this.headerstyle}`,
-    ].join(' ');*/
-    const classInfoContainerHeader = [
-      `hy-list-item__${this.variant}__info-container__header`,
-      `hy-list-item__${this.variant}__info-container__header__${this.headerstyle}`,
-    ].join(" ");
-    const classInfoContainerTitle = [
-      `hy-list-item__${this.variant}__info-container__title`,
-      `hy-list-item__${this.variant}__info-container__title__${this.headerstyle}`,
-    ].join(" ");
-    const classInfoContainerDescription = [
-      `hy-list-item__${this.variant}__info-container__description`,
-      `hy-list-item__${this.variant}__info-container__description__${this.headerstyle}`,
-    ].join(" ");
-    const classInfoContainerLinkContainer = [`hy-list-item__${this.variant}__info-container__link-container`].join(" ");
-    const classInfoContainerLinkIcon = [`hy-list-item__${this.variant}__info-container__link__icon`].join(" ");
-    const classInfoContainerLink = [`hy-list-item__${this.variant}__info-container__link`].join(" ");
-    const target = this.isExternal ? "_blank" : "_self";
-    function truncate(str, n) {
-      return str.length > n ? str.substr(0, n - 1) + "..." : str;
+    componentDidLoad() {
+        let hyMainDiv = this.el.closest(".hy-main");
+        if (hyMainDiv) {
+            if (!hyMainDiv.classList.contains("with-sidebar")) {
+                this.headerstyle = "large";
+            }
+        }
+        if (this.variant == ListItemVariants.degreeProgramme) {
+            const image = document.querySelector(".hy-list-item__degree__image-container__image img");
+            if (image) {
+                image.addEventListener("load", function () {
+                    const outputImageAspectRatio = 1;
+                    const imageHeight = image.naturalHeight;
+                    const imageWidth = image.naturalWidth;
+                    const inputImageAspectRatio = imageWidth / imageHeight;
+                    this._imageMinWidth = imageWidth;
+                    this._imageMinHeight = imageHeight;
+                    if (inputImageAspectRatio > outputImageAspectRatio) {
+                        this._imageMinWidth = imageHeight * outputImageAspectRatio;
+                    }
+                    else if (inputImageAspectRatio < outputImageAspectRatio) {
+                        this._imageMinHeight = imageWidth / outputImageAspectRatio;
+                    }
+                });
+            }
+        }
     }
-    switch (this.variant) {
-      case ListItemVariants.position: {
-        const classInfoContainerOutgoingLink = [
-          `hy-list-item__${this.variant}__info-container__outgoing-link`,
-          `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,
-        ].join(" ");
-        return (h("div", { class: "hy-list-item__wrapper" }, h("a", { class: classAttributes, href: this.url, target: target, "aria-label": this.scLabel }, h("div", { class: classInfoContainerAttributes }, h("div", { class: classInfoContainerHeader }, h("div", { class: "icon" }, h("hy-icon", { icon: "hy-icon-units-and-faculties", size: 18 })), this.itemType), h("div", { class: classInfoContainerTitle }, this.itemTitle), this.itemDescription && (h("div", { class: classInfoContainerDescription, innerHTML: this.truncateDescription
-            ? truncate(this.itemDescription, this.truncateLimit)
-            : this.itemDescription }))), h("div", { class: classInfoContainerOutgoingLink }, h("span", { class: "icon" }, h("hy-icon", { icon: "hy-icon-done", size: 14 })), h("span", { class: "label" }, this.outGoingUrlLabel)))));
-      }
-      case ListItemVariants.degreeProgramme: {
-        const classImageContainerAttributes = [`hy-list-item__${this.variant}__image-container`].join(" ");
-        const classImageContainerImage = [`hy-list-item__${this.variant}__image-container__image`].join(" ");
-        const classInfoContainerAdditionalInfoAttributes = [
-          `hy-list-item__${this.variant}__info-container__additional-info`,
-          `hy-list-item__${this.variant}__info-container__additional-info__${this.headerstyle}`,
-        ].join(" ");
-        const withAdditionalInfo = this._additionalInfo && this._additionalInfo.length > 0 ? "" : "link-only";
-        const classMetadataWrapper = [
-          `hy-list-item__${this.variant}__info-container__metadata-wrapper`,
-          withAdditionalInfo,
+    render() {
+        const classWrapperAttributes = [
+            "hy-list-item-wrapper",
+            `hy-list-item-wrapper__${this.variant}`,
+            `hy-list-item-wrapper__${this.variant}__${this.headerstyle}`,
         ].join(" ");
-        const classContentWrapper = [`hy-list-item__${this.variant}__info-container__content-wrapper`].join(" ");
-        const classInfoContainerOutgoingLink = [
-          `hy-list-item__${this.variant}__info-container__outgoing-link`,
-          `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,
+        const classAttributes = ["hy-list-item", `hy-list-item__${this.variant}`].join(" ");
+        const classInfoContainerAttributes = [
+            `hy-list-item__${this.variant}__info-container`,
+            `hy-list-item__${this.variant}__info-container__${this.headerstyle}`,
         ].join(" ");
-        const classInfoContainerOutgoingLinkUrl = [
-          `hy-list-item__${this.variant}__info-container__outgoing-link__link`,
+        /*const classInfoContainerDataAttributes = [
+          `hy-list-item__${this.variant}__info-container__data`,
+          `hy-list-item__${this.variant}__info-container__data__${this.headerstyle}`,
+        ].join(' ');*/
+        const classInfoContainerHeader = [
+            `hy-list-item__${this.variant}__info-container__header`,
+            `hy-list-item__${this.variant}__info-container__header__${this.headerstyle}`,
         ].join(" ");
-        const classRelatedInfoContainer = [
-          `hy-list-item-wrapper__${this.variant}__related-info`,
-          `hy-list-item-wrapper__${this.variant}__related-info__${this.headerstyle}`,
+        const classInfoContainerTitle = [
+            `hy-list-item__${this.variant}__info-container__title`,
+            `hy-list-item__${this.variant}__info-container__title__${this.headerstyle}`,
         ].join(" ");
-        const classRelatedInfoHeading = [`hy-list-item-wrapper__${this.variant}__related-info__heading`].join(" ");
-        const classRelatedInfoHeadingLink = [`hy-list-item-wrapper__${this.variant}__related-info__heading__link`].join(" ");
-        const classRelatedInfoHeadingButton = [
-          `hy-list-item-wrapper__${this.variant}__related-info__heading__button`,
+        const classInfoContainerDescription = [
+            `hy-list-item__${this.variant}__info-container__description`,
+            `hy-list-item__${this.variant}__info-container__description__${this.headerstyle}`,
         ].join(" ");
-        const classRelatedInfoHeadingIcon = [`hy-list-item-wrapper__${this.variant}__related-info__heading__icon`].join(" ");
-        const classRelatedInfoContent = [`hy-list-item-wrapper__${this.variant}__related-info__content`].join(" ");
-        const classRelatedInfoLink = [`hy-list-item-wrapper__${this.variant}__related-info__link`].join(" ");
-        const titleAsId = this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0
-          ? `${this.itemTitle}-${this.relatedLinksBlockTitle}`.toLowerCase().replace(/\W/g, "-")
-          : "";
-        const accordionItemHref = "#" + titleAsId + "--title";
-        const relatedLinksCount = this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0 ? this._relatedLinks.length : "";
-        return [
-          h("article", { class: classWrapperAttributes }, h("a", { class: classAttributes, href: this.url, target: target, "aria-label": this.scLabel }, h("div", { class: classImageContainerAttributes }, h("div", { class: classImageContainerImage }, this._sourceSet ? (h("picture", null, this._sourceSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : "" }))), h("img", { loading: this.disableLazy ? "eager" : "lazy", "aria-hidden": "true", src: this.itemImageUrl, alt: this.itemImageAlt, style: {
-              "--minheight": `${this._imageMinHeight}px`,
-              "--minwidth": `${this._imageMinWidth}px`,
-            } }))) : (h("img", { loading: this.disableLazy ? "eager" : "lazy", "aria-hidden": "true", src: this.itemImageUrl, alt: this.itemImageAlt, style: {
-              "--minheight": `${this._imageMinHeight}px`,
-              "--minwidth": `${this._imageMinWidth}px`,
-            } }))), this.imageLabel && h("span", null, this.imageLabel)), h("div", { class: classInfoContainerAttributes }, h("div", { class: classContentWrapper }, h("div", { class: classInfoContainerTitle }, this.itemTitle), this.itemDescription && (h("div", { class: classInfoContainerDescription, innerHTML: this.itemDescription }))), h("div", { class: classMetadataWrapper }, this._additionalInfo && (h("div", { class: classInfoContainerAdditionalInfoAttributes }, this._additionalInfo.map((x) => {
-            let classInfoContainerAdditionalInfoItem = [
-              `hy-list-item__${this.variant}__info-container__additional-info__item`,
-              `hy-list-item__${this.variant}__info-container__additional-info__item__${this.headerstyle}`,
-              `${x.isActive.toString() == "true" ? "active" : ""}`,
-            ].join(" ");
-            return h("div", { class: classInfoContainerAdditionalInfoItem }, x.text);
-          }))), h("div", { class: classInfoContainerOutgoingLink }, h("a", { href: this.url, target: target, "aria-label": this.scLabel, class: classInfoContainerOutgoingLinkUrl, tabindex: "-1" }, h("span", { class: "label" }, this.outGoingUrlLabel), h("span", { class: "icon-wrapper" }, h("div", { class: "icon" }, h("hy-icon", { icon: "hy-icon-arrow-to-right", size: 32 })))))))), this.relatedLinksBlockTitle && (h("div", { class: classRelatedInfoContainer }, h("div", { class: classRelatedInfoHeading }, h("a", { href: accordionItemHref, class: classRelatedInfoHeadingLink, tabindex: "-1" }, h("button", { "aria-expanded": "false", "aria-controls": `${titleAsId}--content`, class: classRelatedInfoHeadingButton, id: `${titleAsId}--title` }, h("span", { class: classRelatedInfoHeadingIcon }, h("hy-icon", { icon: "hy-icon-caret-down", size: 14 })), this.relatedLinksBlockTitle, " (", relatedLinksCount, ")"))), h("div", { class: classRelatedInfoContent, "aria-labelledBy": `${titleAsId}--title`, id: `${titleAsId}--content`, role: "region", "aria-hidden": "true" }, this._relatedLinks.map((x) => {
-            let relatedLinkTarget = x.isExternal ? "_blank" : "_self";
-            return (h("a", { class: classRelatedInfoLink, href: x.url, target: target, "aria-label": relatedLinkTarget }, x.label));
-          }))))),
-        ];
-      }
-      default: {
-        return (h("article", null, h("a", { class: classAttributes, href: this.url, target: target, "aria-label": this.scLabel }, h("div", { class: classInfoContainerAttributes }, h("div", { class: classInfoContainerHeader }, this.itemType), h("div", { class: classInfoContainerTitle }, this.itemTitle), h("div", { class: classInfoContainerLinkContainer }, h("span", { class: classInfoContainerLinkIcon }, h("hy-icon", { icon: "hy-icon-link", size: 15 })), h("div", { class: classInfoContainerLink }, this.url)), this.itemDescription && (h("div", { class: classInfoContainerDescription, innerHTML: this.itemDescription }))))));
-      }
-    }
-  }
-  static get is() { return "hy-list-item"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["hy-list-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["hy-list-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ListItemVariants",
-          "resolved": "ListItemVariants.default | ListItemVariants.degreeProgramme | ListItemVariants.position",
-          "references": {
-            "ListItemVariants": {
-              "location": "import",
-              "path": "../../utils/utils"
+        const classInfoContainerLinkContainer = [`hy-list-item__${this.variant}__info-container__link-container`].join(" ");
+        const classInfoContainerLinkIcon = [`hy-list-item__${this.variant}__info-container__link__icon`].join(" ");
+        const classInfoContainerLink = [`hy-list-item__${this.variant}__info-container__link`].join(" ");
+        const target = this.isExternal ? "_blank" : "_self";
+        function truncate(str, n) {
+            return str.length > n ? str.substr(0, n - 1) + "..." : str;
+        }
+        switch (this.variant) {
+            case ListItemVariants.position: {
+                const classInfoContainerOutgoingLink = [
+                    `hy-list-item__${this.variant}__info-container__outgoing-link`,
+                    `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,
+                ].join(" ");
+                return (h("div", { class: "hy-list-item__wrapper" }, h("a", { class: classAttributes, href: this.url, target: target, "aria-label": this.scLabel }, h("div", { class: classInfoContainerAttributes }, h("div", { class: classInfoContainerHeader }, h("div", { class: "icon" }, h("hy-icon", { icon: "hy-icon-units-and-faculties", size: 18 })), this.itemType), h("div", { class: classInfoContainerTitle }, this.itemTitle), this.itemDescription && (h("div", { class: classInfoContainerDescription, innerHTML: this.truncateDescription
+                        ? truncate(this.itemDescription, this.truncateLimit)
+                        : this.itemDescription }))), h("div", { class: classInfoContainerOutgoingLink }, h("span", { class: "icon" }, h("hy-icon", { icon: "hy-icon-done", size: 14 })), h("span", { class: "label" }, this.outGoingUrlLabel)))));
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "ListItemVariants.default"
-      },
-      "itemType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "item-type",
-        "reflect": false
-      },
-      "itemTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "item-title",
-        "reflect": false
-      },
-      "itemDescription": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "item-description",
-        "reflect": false
-      },
-      "url": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "url",
-        "reflect": false
-      },
-      "isExternal": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-external",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "scLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "sc-label",
-        "reflect": false
-      },
-      "itemImageUrl": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "item-image-url",
-        "reflect": false
-      },
-      "itemImageAlt": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "item-image-alt",
-        "reflect": false
-      },
-      "disableLazy": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disable-lazy",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "relatedLinksBlockTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "related-links-block-title",
-        "reflect": false
-      },
-      "relatedLinks": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "RelatedLink[] | string",
-          "resolved": "RelatedLink[] | string",
-          "references": {
-            "RelatedLink": {
-              "location": "local",
-              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-list-item/hy-list-item.tsx"
+            case ListItemVariants.degreeProgramme: {
+                const classImageContainerAttributes = [`hy-list-item__${this.variant}__image-container`].join(" ");
+                const classImageContainerImage = [`hy-list-item__${this.variant}__image-container__image`].join(" ");
+                const classInfoContainerAdditionalInfoAttributes = [
+                    `hy-list-item__${this.variant}__info-container__additional-info`,
+                    `hy-list-item__${this.variant}__info-container__additional-info__${this.headerstyle}`,
+                ].join(" ");
+                const withAdditionalInfo = this._additionalInfo && this._additionalInfo.length > 0 ? "" : "link-only";
+                const classMetadataWrapper = [
+                    `hy-list-item__${this.variant}__info-container__metadata-wrapper`,
+                    withAdditionalInfo,
+                ].join(" ");
+                const classContentWrapper = [`hy-list-item__${this.variant}__info-container__content-wrapper`].join(" ");
+                const classInfoContainerOutgoingLink = [
+                    `hy-list-item__${this.variant}__info-container__outgoing-link`,
+                    `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,
+                ].join(" ");
+                const classInfoContainerOutgoingLinkUrl = [
+                    `hy-list-item__${this.variant}__info-container__outgoing-link__link`,
+                ].join(" ");
+                const classRelatedInfoContainer = [
+                    `hy-list-item-wrapper__${this.variant}__related-info`,
+                    `hy-list-item-wrapper__${this.variant}__related-info__${this.headerstyle}`,
+                ].join(" ");
+                const classRelatedInfoHeading = [`hy-list-item-wrapper__${this.variant}__related-info__heading`].join(" ");
+                const classRelatedInfoHeadingLink = [`hy-list-item-wrapper__${this.variant}__related-info__heading__link`].join(" ");
+                const classRelatedInfoHeadingButton = [
+                    `hy-list-item-wrapper__${this.variant}__related-info__heading__button`,
+                ].join(" ");
+                const classRelatedInfoHeadingIcon = [`hy-list-item-wrapper__${this.variant}__related-info__heading__icon`].join(" ");
+                const classRelatedInfoContent = [`hy-list-item-wrapper__${this.variant}__related-info__content`].join(" ");
+                const classRelatedInfoLink = [`hy-list-item-wrapper__${this.variant}__related-info__link`].join(" ");
+                const titleAsId = this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0
+                    ? `${this.itemTitle}-${this.relatedLinksBlockTitle}`.toLowerCase().replace(/\W/g, "-")
+                    : "";
+                const accordionItemHref = "#" + titleAsId + "--title";
+                const relatedLinksCount = this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0 ? this._relatedLinks.length : "";
+                return [
+                    h("article", { class: classWrapperAttributes }, h("a", { class: classAttributes, href: this.url, target: target, "aria-label": this.scLabel }, h("div", { class: classImageContainerAttributes }, h("div", { class: classImageContainerImage }, this._sourceSet ? (h("picture", null, this._sourceSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : "" }))), h("img", { loading: this.disableLazy ? "eager" : "lazy", "aria-hidden": "true", src: this.itemImageUrl, alt: this.itemImageAlt, style: {
+                            "--minheight": `${this._imageMinHeight}px`,
+                            "--minwidth": `${this._imageMinWidth}px`,
+                        } }))) : (h("img", { loading: this.disableLazy ? "eager" : "lazy", "aria-hidden": "true", src: this.itemImageUrl, alt: this.itemImageAlt, style: {
+                            "--minheight": `${this._imageMinHeight}px`,
+                            "--minwidth": `${this._imageMinWidth}px`,
+                        } }))), this.imageLabel && h("span", null, this.imageLabel)), h("div", { class: classInfoContainerAttributes }, h("div", { class: classContentWrapper }, h("div", { class: classInfoContainerTitle }, this.itemTitle), this.itemDescription && (h("div", { class: classInfoContainerDescription, innerHTML: this.itemDescription }))), h("div", { class: classMetadataWrapper }, this._additionalInfo && (h("div", { class: classInfoContainerAdditionalInfoAttributes }, this._additionalInfo.map((x) => {
+                        let classInfoContainerAdditionalInfoItem = [
+                            `hy-list-item__${this.variant}__info-container__additional-info__item`,
+                            `hy-list-item__${this.variant}__info-container__additional-info__item__${this.headerstyle}`,
+                            `${x.isActive.toString() == "true" ? "active" : ""}`,
+                        ].join(" ");
+                        return h("div", { class: classInfoContainerAdditionalInfoItem }, x.text);
+                    }))), h("div", { class: classInfoContainerOutgoingLink }, h("a", { href: this.url, target: target, "aria-label": this.scLabel, class: classInfoContainerOutgoingLinkUrl, tabindex: "-1" }, h("span", { class: "label" }, this.outGoingUrlLabel), h("span", { class: "icon-wrapper" }, h("div", { class: "icon" }, h("hy-icon", { icon: "hy-icon-arrow-to-right", size: 32 })))))))), this.relatedLinksBlockTitle && (h("div", { class: classRelatedInfoContainer }, h("div", { class: classRelatedInfoHeading }, h("a", { href: accordionItemHref, class: classRelatedInfoHeadingLink, tabindex: "-1" }, h("button", { "aria-expanded": "false", "aria-controls": `${titleAsId}--content`, class: classRelatedInfoHeadingButton, id: `${titleAsId}--title` }, h("span", { class: classRelatedInfoHeadingIcon }, h("hy-icon", { icon: "hy-icon-caret-down", size: 14 })), this.relatedLinksBlockTitle, " (", relatedLinksCount, ")"))), h("div", { class: classRelatedInfoContent, "aria-labelledBy": `${titleAsId}--title`, id: `${titleAsId}--content`, role: "region", "aria-hidden": "true" }, this._relatedLinks.map((x) => {
+                        let relatedLinkTarget = x.isExternal ? "_blank" : "_self";
+                        return (h("a", { class: classRelatedInfoLink, href: x.url, target: target, "aria-label": relatedLinkTarget }, x.label));
+                    }))))),
+                ];
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "related-links",
-        "reflect": false
-      },
-      "imageLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "image-label",
-        "reflect": false
-      },
-      "outGoingUrlLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "out-going-url-label",
-        "reflect": false,
-        "defaultValue": "\"Go to programme page\""
-      },
-      "additionalInfo": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "AdditionalInfo[] | string",
-          "resolved": "AdditionalInfo[] | string",
-          "references": {
-            "AdditionalInfo": {
-              "location": "local",
-              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-list-item/hy-list-item.tsx"
+            default: {
+                return (h("article", null, h("a", { class: classAttributes, href: this.url, target: target, "aria-label": this.scLabel }, h("div", { class: classInfoContainerAttributes }, h("div", { class: classInfoContainerHeader }, this.itemType), h("div", { class: classInfoContainerTitle }, this.itemTitle), h("div", { class: classInfoContainerLinkContainer }, h("span", { class: classInfoContainerLinkIcon }, h("hy-icon", { icon: "hy-icon-link", size: 15 })), h("div", { class: classInfoContainerLink }, this.url)), this.itemDescription && (h("div", { class: classInfoContainerDescription, innerHTML: this.itemDescription }))))));
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "additional-info",
-        "reflect": false
-      },
-      "headerstyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "headerstyle",
-        "reflect": false,
-        "defaultValue": "\"common\""
-      },
-      "sourceSet": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ImageSrcSet[] | string",
-          "resolved": "ImageSrcSet[] | string",
-          "references": {
-            "ImageSrcSet": {
-              "location": "local",
-              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-list-item/hy-list-item.tsx"
+        }
+    }
+    static get is() { return "hy-list-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["hy-list-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["hy-list-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ListItemVariants",
+                    "resolved": "ListItemVariants.default | ListItemVariants.degreeProgramme | ListItemVariants.position",
+                    "references": {
+                        "ListItemVariants": {
+                            "location": "import",
+                            "path": "../../utils/utils",
+                            "id": "src/utils/utils.ts::ListItemVariants"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "ListItemVariants.default"
+            },
+            "itemType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "item-type",
+                "reflect": false
+            },
+            "itemTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "item-title",
+                "reflect": false
+            },
+            "itemDescription": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "item-description",
+                "reflect": false
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "isExternal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-external",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "scLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "sc-label",
+                "reflect": false
+            },
+            "itemImageUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "item-image-url",
+                "reflect": false
+            },
+            "itemImageAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "item-image-alt",
+                "reflect": false
+            },
+            "disableLazy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-lazy",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "relatedLinksBlockTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "related-links-block-title",
+                "reflect": false
+            },
+            "relatedLinks": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RelatedLink[] | string",
+                    "resolved": "RelatedLink[] | string",
+                    "references": {
+                        "RelatedLink": {
+                            "location": "local",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-list-item/hy-list-item.tsx",
+                            "id": "src/components/hy-list-item/hy-list-item.tsx::RelatedLink"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "related-links",
+                "reflect": false
+            },
+            "imageLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "image-label",
+                "reflect": false
+            },
+            "outGoingUrlLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "out-going-url-label",
+                "reflect": false,
+                "defaultValue": "\"Go to programme page\""
+            },
+            "additionalInfo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AdditionalInfo[] | string",
+                    "resolved": "AdditionalInfo[] | string",
+                    "references": {
+                        "AdditionalInfo": {
+                            "location": "local",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-list-item/hy-list-item.tsx",
+                            "id": "src/components/hy-list-item/hy-list-item.tsx::AdditionalInfo"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "additional-info",
+                "reflect": false
+            },
+            "headerstyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "headerstyle",
+                "reflect": false,
+                "defaultValue": "\"common\""
+            },
+            "sourceSet": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ImageSrcSet[] | string",
+                    "resolved": "ImageSrcSet[] | string",
+                    "references": {
+                        "ImageSrcSet": {
+                            "location": "local",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-list-item/hy-list-item.tsx",
+                            "id": "src/components/hy-list-item/hy-list-item.tsx::ImageSrcSet"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "source-set",
+                "reflect": false
+            },
+            "truncateDescription": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "truncate-description",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "truncateLimit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "truncate-limit",
+                "reflect": false,
+                "defaultValue": "140"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "source-set",
-        "reflect": false
-      },
-      "truncateDescription": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "truncate-description",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "truncateLimit": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "truncate-limit",
-        "reflect": false,
-        "defaultValue": "140"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isExpandedRelatedContent": {},
-      "_imageMinHeight": {},
-      "_imageMinWidth": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "relatedLinks",
-        "methodName": "relatedLinksWatcher"
-      }, {
-        "propName": "additionalInfo",
-        "methodName": "additionalInfoWatcher"
-      }, {
-        "propName": "sourceSet",
-        "methodName": "srcSetWatcher"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "click",
-        "method": "handleClick",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "isExpandedRelatedContent": {},
+            "_imageMinHeight": {},
+            "_imageMinWidth": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "relatedLinks",
+                "methodName": "relatedLinksWatcher"
+            }, {
+                "propName": "additionalInfo",
+                "methodName": "additionalInfoWatcher"
+            }, {
+                "propName": "sourceSet",
+                "methodName": "srcSetWatcher"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
-//# sourceMappingURL=hy-list-item.js.map