@itcenteratunihelsinki/huds-lib 0.8.43 → 0.8.45

package/components/hy-list-item.js

@@ -0,0 +1,293 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as ListItemVariants } from './utils.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const hyListItemCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-list-item{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);text-decoration:none}.hy-list-item__default{margin-bottom:28px}@media (min-width: 60rem){.hy-list-item__default{margin-bottom:32px}}.hy-list-item__default__info-container__header{font-size:0.75rem;line-height:14px;color:var(--grayscale-dark);letter-spacing:0;margin-bottom:4px}@media (min-width: 30rem){.hy-list-item__default__info-container__header{font-size:0.875rem;line-height:18px;margin-bottom:2px}}.hy-list-item__default__info-container__title{font-size:1.125rem;line-height:22px;font-weight:700;color:var(--brand-main-light);letter-spacing:-0.56px;margin-bottom:6px}@media (min-width: 30rem){.hy-list-item__default__info-container__title{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;margin-bottom:10px}}@media (min-width: 1601px){.hy-list-item__default__info-container__title{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;margin-bottom:8px}}@media (min-width: 75.0625rem){.hy-list-item__default__info-container__title__large{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;margin-bottom:8px}}.hy-list-item__default__info-container__link-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:6px}@media (min-width: 30rem){.hy-list-item__default__info-container__link-container{margin-bottom:8px}}.hy-list-item__default__info-container__link{font-size:0.75rem;line-height:16px;color:var(--grayscale-dark);letter-spacing:-0.07px;margin-left:4px}@media (min-width: 30rem){.hy-list-item__default__info-container__link{margin-left:5px}}.hy-list-item__default__info-container__link__icon svg{fill:var(--grayscale-dark)}.hy-list-item__default__info-container__description{font-size:0.875rem;line-height:20px;color:var(--grayscale-black);letter-spacing:0}@media (min-width: 30rem){.hy-list-item__default__info-container__description{font-size:1rem;line-height:24px}}.hy-list-item__position{background:radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 30rem){.hy-list-item__position{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-list-item__position__info-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:0;padding:12px;position:relative}@media (min-width: 60rem){.hy-list-item__position__info-container{padding:12px 16px}}@media (min-width: 1601px){.hy-list-item__position__info-container{padding:20px 24px}}.hy-list-item__position__info-container__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;color:var(--brand-main);font-family:var(--main-font-family);font-size:14px;font-weight:600;letter-spacing:-0.2px;line-height:14px;margin-bottom:14px}.hy-list-item__position__info-container__header .icon{margin-right:0.75rem}.hy-list-item__position__info-container__header .icon svg{fill:var(--brand-main)}@media (min-width: 75.0625rem){.hy-list-item__position__info-container__large{padding:20px 24px}}.hy-list-item__position__info-container__data{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-list-item__position__info-container__title{font-size:1.125rem;line-height:20px;font-weight:700;font-family:var(--main-font-family);color:var(--grayscale-black);margin-bottom:12px;letter-spacing:-0.45px;line-height:22px}@media (min-width: 30rem){.hy-list-item__position__info-container__title{letter-spacing:-0.5px}}.hy-list-item__position__info-container__description{font-size:0.875rem;color:var(--grayscale-dark-text);display:none;font-family:var(--main-font-family);letter-spacing:0.8px;margin-bottom:14px;line-height:20px}@media (min-width: 30rem){.hy-list-item__position__info-container__description{display:block}}.hy-list-item__position__info-container__outgoing-link{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;position:relative;padding:0 24px 24px 12px}@media (min-width: 30rem){.hy-list-item__position__info-container__outgoing-link{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0 24px 24px 0}}.hy-list-item__position__info-container__outgoing-link .label{color:var(--link-blue);font-family:var(--main-font-family);font-size:16px;font-weight:600;letter-spacing:-0.3px;line-height:20px}.hy-list-item__position__info-container__outgoing-link .icon{margin-right:4px;margin-bottom:2px}.hy-list-item__position__info-container__outgoing-link .icon svg{fill:var(--link-blue)}.hy-list-item__degree{background:radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 30rem){.hy-list-item__degree{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-list-item__degree__image-container{display:block;position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1}@media (min-width: 30rem){.hy-list-item__degree__image-container{-webkit-box-flex:0;-ms-flex:0 0 24%;flex:0 0 24%}}.hy-list-item__degree__image-container__image{vertical-align:bottom;max-width:100%;height:100%}.hy-list-item__degree__image-container__image img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.hy-list-item__degree__image-container span{font-weight:600;font-size:0.75rem;line-height:14px;background-color:var(--additional-yellow);-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.05);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.05);color:var(--grayscale-black);left:-4px;letter-spacing:-0.07px;padding:5px 8px;position:absolute;top:16px;text-transform:uppercase}@media (min-width: 30rem){.hy-list-item__degree__image-container span{left:-8px}}@media (min-width: 60rem){.hy-list-item__degree__image-container span{top:22px}}.hy-list-item__degree__info-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:0;padding:12px;position:relative}@media (min-width: 60rem){.hy-list-item__degree__info-container{padding:12px 16px}}@media (min-width: 1601px){.hy-list-item__degree__info-container{padding:20px 24px}}@media (min-width: 75.0625rem){.hy-list-item__degree__info-container__large{padding:20px 24px}}.hy-list-item__degree__info-container__data{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-list-item__degree__info-container__title{font-size:1.125rem;line-height:22px;font-weight:700;color:var(--link-blue);letter-spacing:-0.54px;margin-bottom:8px}@media (min-width: 60rem){.hy-list-item__degree__info-container__title{font-size:1.125rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 1601px){.hy-list-item__degree__info-container__title{font-size:1.25rem;line-height:26px;letter-spacing:-0.6px}}@media (min-width: 75.0625rem){.hy-list-item__degree__info-container__title__large{font-size:1.25rem;line-height:26px;letter-spacing:-0.6px}}.hy-list-item__degree__info-container__description{font-size:0.875rem;line-height:18px;color:var(--grayscale-dark);letter-spacing:0;margin-bottom:16px}@media (min-width: 60rem){.hy-list-item__degree__info-container__description{letter-spacing:-0.2}}@media (min-width: 1601px){.hy-list-item__degree__info-container__description{font-size:1rem;line-height:20px;letter-spacing:-0.25px}}@media (min-width: 75.0625rem){.hy-list-item__degree__info-container__description__large{font-size:1rem;line-height:20px;letter-spacing:-0.25px}}.hy-list-item__degree__info-container__metadata-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-top:16px;width:100%}@media (min-width: 30rem){.hy-list-item__degree__info-container__metadata-wrapper{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}.hy-list-item__degree__info-container__metadata-wrapper.link-only{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.hy-list-item__degree__info-container__additional-info{width:100%}.hy-list-item__degree__info-container__additional-info__item{font-size:0.75rem;line-height:16px;font-weight:300;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;letter-spacing:-0.2px}@media (min-width: 1601px){.hy-list-item__degree__info-container__additional-info__item{font-size:0.875rem;line-height:16px}}@media (min-width: 75.0625rem){.hy-list-item__degree__info-container__additional-info__item__large{font-size:0.875rem;line-height:16px}}.hy-list-item__degree__info-container__additional-info__item.active::before{content:\" \";-webkit-box-sizing:border-box;box-sizing:border-box;height:14px;width:14px;border:3px solid #ffffff;border-radius:50%;background-color:#f9a21a;left:-7px;position:absolute}@media (min-width: 30rem){.hy-list-item__degree__info-container__additional-info__item.active::before{border:none;height:8px;margin-right:6px;width:8px;left:0;position:relative}}.hy-list-item__degree__info-container__outgoing-link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;position:relative;width:100%}.hy-list-item__degree__info-container__outgoing-link a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;bottom:0;top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;position:relative;right:-18px;text-decoration:none}@media (min-width: 60rem){.hy-list-item__degree__info-container__outgoing-link a{right:-22px}}@media (min-width: 1601px){.hy-list-item__degree__info-container__outgoing-link a{right:-30px}}.hy-list-item__degree__info-container__outgoing-link a .label{font-size:0.875rem;line-height:16px;font-weight:700;color:var(--link-blue);letter-spacing:-0.5px;margin-right:8px;text-align:right}.hy-list-item__degree__info-container__outgoing-link a .icon-wrapper{background-color:var(--brand-main-light);z-index:10}.hy-list-item__degree__info-container__outgoing-link a .icon-wrapper .icon{position:relative;overflow:hidden}.hy-list-item__degree__info-container__outgoing-link a .icon-wrapper .icon svg{background-color:transparent;-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);fill:var(--grayscale-white);padding:6.4px}@media (min-width: 1601px){.hy-list-item__degree__info-container__outgoing-link a .icon-wrapper .icon svg{height:36px;width:36px;padding:7.2px}}@media (min-width: 75.0625rem){.hy-list-item__degree__info-container__outgoing-link__large svg{height:36px;width:36px;padding:7.2px}}.hy-list-item-wrapper{font-family:var(--main-font-family)}.hy-list-item-wrapper__degree{margin-bottom:16px}@media (min-width: 30rem){.hy-list-item-wrapper__degree{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:24px}}@media (min-width: 60rem){.hy-list-item-wrapper__degree{margin-bottom:28px}}@media (min-width: 1601px){.hy-list-item-wrapper__degree{margin-bottom:32px}}@media (min-width: 75.0625rem){.hy-list-item-wrapper__degree__large{margin-bottom:32px}}.hy-list-item-wrapper__degree__related-info{background:radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);margin-top:4px;padding:0 12px 0 16px}@media (min-width: 30rem){.hy-list-item-wrapper__degree__related-info{padding:0 24px 0 16px}}@media (min-width: 60rem){.hy-list-item-wrapper__degree__related-info{margin-top:6px;padding:0 24px 0 24px}}@media (min-width: 1601px){.hy-list-item-wrapper__degree__related-info{margin-top:8px}}@media (min-width: 75.0625rem){.hy-list-item-wrapper__degree__related-info__large{margin-top:8px}}.hy-list-item-wrapper__degree__related-info__heading__link{text-decoration:none}.hy-list-item-wrapper__degree__related-info__heading__button{font-size:0.75rem;line-height:16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);border:none;color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-family:var(--main-font-family);letter-spacing:-0.2px;height:100%;padding:8px 0;text-align:left;width:100%}@media (min-width: 30rem){.hy-list-item-wrapper__degree__related-info__heading__button{font-size:0.75rem;line-height:20px;padding:14px 0}}@media (min-width: 60rem){.hy-list-item-wrapper__degree__related-info__heading__button{font-size:0.875rem;line-height:20px;letter-spacing:-0.4px;padding:18px 0}}.hy-list-item-wrapper__degree__related-info__heading__button:hover{cursor:pointer}.hy-list-item-wrapper__degree__related-info__heading__button__is-open svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-list-item-wrapper__degree__related-info__heading__icon{margin-right:0.5rem;z-index:0}@media (min-width: 60rem){.hy-list-item-wrapper__degree__related-info__heading__icon{margin-right:12px}}.hy-list-item-wrapper__degree__related-info__heading__icon svg{fill:var(--brand-main);height:14px;width:14px}@media (min-width: 60rem){.hy-list-item-wrapper__degree__related-info__heading__icon svg{height:18px;width:18px}}.hy-list-item-wrapper__degree__related-info__content{display:none}.hy-list-item-wrapper__degree__related-info__content__is-open{border-top:1px solid #d2d2d2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:20px 8px 5px 8px}@media (min-width: 60rem){.hy-list-item-wrapper__degree__related-info__content__is-open{padding:20px 0 14px 0}}.hy-list-item-wrapper__degree__related-info__link{font-size:0.875rem;line-height:16px;font-weight:700;color:var(--link-blue);letter-spacing:-0.4px;margin-bottom:16px;text-decoration:none}";
+
+let keys = {
+  enter: "Enter",
+  space: "Space",
+};
+const HyListItem$1 = /*@__PURE__*/ proxyCustomElement(class HyListItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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);
+    }
+    else {
+      this._relatedLinks = newValue;
+    }
+  }
+  additionalInfoWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._additionalInfo = JSON.parse(newValue);
+    }
+    else {
+      this._additionalInfo = newValue;
+    }
+  }
+  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();
+    }
+  }
+  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();
+    }
+  }
+  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";
+      }
+    }
+    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;
+          }
+        });
+      }
+    }
+  }
+  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;
+    }
+    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("article", null, 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,
+        ].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));
+          }))))),
+        ];
+      }
+      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 }))))));
+      }
+    }
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "relatedLinks": ["relatedLinksWatcher"],
+    "additionalInfo": ["additionalInfoWatcher"],
+    "sourceSet": ["srcSetWatcher"]
+  }; }
+  static get style() { return hyListItemCss; }
+}, [0, "hy-list-item", {
+    "variant": [1],
+    "itemType": [1, "item-type"],
+    "itemTitle": [1, "item-title"],
+    "itemDescription": [8, "item-description"],
+    "url": [1],
+    "isExternal": [4, "is-external"],
+    "scLabel": [1, "sc-label"],
+    "itemImageUrl": [1, "item-image-url"],
+    "itemImageAlt": [1, "item-image-alt"],
+    "disableLazy": [4, "disable-lazy"],
+    "relatedLinksBlockTitle": [1, "related-links-block-title"],
+    "relatedLinks": [1, "related-links"],
+    "imageLabel": [1, "image-label"],
+    "outGoingUrlLabel": [1, "out-going-url-label"],
+    "additionalInfo": [1, "additional-info"],
+    "headerstyle": [1],
+    "sourceSet": [1, "source-set"],
+    "truncateDescription": [4, "truncate-description"],
+    "truncateLimit": [2, "truncate-limit"],
+    "isExpandedRelatedContent": [32],
+    "_imageMinHeight": [32],
+    "_imageMinWidth": [32]
+  }, [[0, "keydown", "handleKeyDown"], [0, "click", "handleClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-list-item", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyListItem$1);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyListItem = HyListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyListItem, defineCustomElement };

package/components/hy-logo-grid-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyLogoGridItem extends Components.HyLogoGridItem, HTMLElement {}
+export const HyLogoGridItem: {
+  prototype: HyLogoGridItem;
+  new (): HyLogoGridItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-logo-grid-item.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const hyLogoGridCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-logo-grid{padding:78px 0 92px}.hy-logo-grid__title{font-size:1.75rem;line-height:32px;letter-spacing:-0.7px;font-family:var(--main-font-family);margin:0 0 24px;text-transform:uppercase}@media (min-width: 30rem){.hy-logo-grid__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.85px;margin:0 0 32px}}@media (min-width: 1601px){.without-sidebar .hy-logo-grid__title{font-size:2.625rem;line-height:48px;letter-spacing:-1.05px;margin:0 0 40px}}@media (min-width: 75.0625rem){.with-sidebar .hy-logo-grid__title{font-size:2.625rem;line-height:48px;letter-spacing:-1.05px;margin:0 0 40px}}.hy-logo-grid__images{display:grid;gap:24px 36px;grid-template-columns:repeat(2, 1fr);padding:0 8px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (min-width: 30rem){.hy-logo-grid__images{grid-template-columns:repeat(3, 25%);padding:0;gap:28px 0}}@media (min-width: 60rem){.without-sidebar .hy-logo-grid__images{grid-template-columns:repeat(4, 20%);gap:32px 0}}@media (min-width: 75.0625rem){.without-sidebar .hy-logo-grid__images{gap:40px 0}}@media (min-width: 75.0625rem){.with-sidebar .hy-logo-grid__images{grid-template-columns:repeat(4, 20%);gap:32px 0}}@media (min-width: 1601px){.with-sidebar .hy-logo-grid__images{gap:40px 0}}.hy-logo-grid__figure{margin:0;padding:0;position:relative}.hy-logo-grid__figure:after{content:\"\";display:block;padding-bottom:100%}.hy-logo-grid__figure picture{position:absolute;inset:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-logo-grid__figure img{max-width:100%;-o-object-fit:scale-down;object-fit:scale-down;height:100%}";
+
+const HyLogoGridItem$1 = /*@__PURE__*/ proxyCustomElement(class HyLogoGridItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.link = undefined;
+    this.image = undefined;
+  }
+  render() {
+    const parsedImage = JSON.parse(this.image);
+    const parsedLink = this.link ? JSON.parse(this.link) : null;
+    return parsedImage.map(({ image_sources: sources, image_url: fallback_url, image_alt: alt }) => {
+      const parsedSources = JSON.parse(sources);
+      const elementContent = (h("figure", { class: "hy-logo-grid__figure" }, parsedSources && (h("picture", null, parsedSources.map(({ src, media, type, sizes }) => (h("source", { srcSet: src, media: media, type: type, sizes: sizes ? sizes : "" }))), h("img", { alt: alt, src: fallback_url }))), !parsedSources && h("img", { alt: alt, src: fallback_url })));
+      if (parsedLink) {
+        const { url, target } = parsedLink;
+        const targetValue = target === "_blank" ? target : "_self";
+        return (h("a", { href: url, target: targetValue, class: "hy-logo-grid__link" }, elementContent));
+      }
+      return elementContent;
+    });
+  }
+  static get style() { return hyLogoGridCss; }
+}, [0, "hy-logo-grid-item", {
+    "link": [1],
+    "image": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-logo-grid-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-logo-grid-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyLogoGridItem$1);
+      }
+      break;
+  } });
+}
+
+const HyLogoGridItem = HyLogoGridItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyLogoGridItem, defineCustomElement };

package/components/hy-logo-grid.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyLogoGrid extends Components.HyLogoGrid, HTMLElement {}
+export const HyLogoGrid: {
+  prototype: HyLogoGrid;
+  new (): HyLogoGrid;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-logo-grid.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const hyLogoGridCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-logo-grid{padding:78px 0 92px}.hy-logo-grid__title{font-size:1.75rem;line-height:32px;letter-spacing:-0.7px;font-family:var(--main-font-family);margin:0 0 24px;text-transform:uppercase}@media (min-width: 30rem){.hy-logo-grid__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.85px;margin:0 0 32px}}@media (min-width: 1601px){.without-sidebar .hy-logo-grid__title{font-size:2.625rem;line-height:48px;letter-spacing:-1.05px;margin:0 0 40px}}@media (min-width: 75.0625rem){.with-sidebar .hy-logo-grid__title{font-size:2.625rem;line-height:48px;letter-spacing:-1.05px;margin:0 0 40px}}.hy-logo-grid__images{display:grid;gap:24px 36px;grid-template-columns:repeat(2, 1fr);padding:0 8px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (min-width: 30rem){.hy-logo-grid__images{grid-template-columns:repeat(3, 25%);padding:0;gap:28px 0}}@media (min-width: 60rem){.without-sidebar .hy-logo-grid__images{grid-template-columns:repeat(4, 20%);gap:32px 0}}@media (min-width: 75.0625rem){.without-sidebar .hy-logo-grid__images{gap:40px 0}}@media (min-width: 75.0625rem){.with-sidebar .hy-logo-grid__images{grid-template-columns:repeat(4, 20%);gap:32px 0}}@media (min-width: 1601px){.with-sidebar .hy-logo-grid__images{gap:40px 0}}.hy-logo-grid__figure{margin:0;padding:0;position:relative}.hy-logo-grid__figure:after{content:\"\";display:block;padding-bottom:100%}.hy-logo-grid__figure picture{position:absolute;inset:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-logo-grid__figure img{max-width:100%;-o-object-fit:scale-down;object-fit:scale-down;height:100%}";
+
+const HyLogoGrid$1 = /*@__PURE__*/ proxyCustomElement(class HyLogoGrid extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.headingVariant = undefined;
+    this.logoGridTitle = undefined;
+  }
+  render() {
+    const HeadingVariant = this.headingVariant;
+    return (h("div", { class: "hy-logo-grid", role: "complementary" }, this.logoGridTitle && h(HeadingVariant, { class: "hy-logo-grid__title" }, this.logoGridTitle), h("div", { class: "hy-logo-grid__images" }, h("slot", null))));
+  }
+  static get style() { return hyLogoGridCss; }
+}, [4, "hy-logo-grid", {
+    "headingVariant": [1, "heading-variant"],
+    "logoGridTitle": [1, "logo-grid-title"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-logo-grid"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-logo-grid":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyLogoGrid$1);
+      }
+      break;
+  } });
+}
+
+const HyLogoGrid = HyLogoGrid$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyLogoGrid, defineCustomElement };

package/components/hy-main-content-wrapper.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyMainContentWrapper extends Components.HyMainContentWrapper, HTMLElement {}
+export const HyMainContentWrapper: {
+  prototype: HyMainContentWrapper;
+  new (): HyMainContentWrapper;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-main-content-wrapper.js

@@ -0,0 +1,6 @@
+import { H as HyMainContentWrapper$1, d as defineCustomElement$1 } from './hy-main-content-wrapper2.js';
+
+const HyMainContentWrapper = HyMainContentWrapper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyMainContentWrapper, defineCustomElement };

package/components/hy-main-content-wrapper2.js

@@ -0,0 +1,30 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const hyMainContentWrapperCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.with-sidebar .hy-main-content-wrapper{margin:0 auto;max-width:100%;padding:0 1rem;position:relative}@media (min-width: 30rem){.with-sidebar .hy-main-content-wrapper{padding:0 2rem}}@media (min-width: 1601px){.with-sidebar .hy-main-content-wrapper{max-width:1216px;padding:0}}.without-sidebar .hy-main-content-wrapper{margin:0 auto;max-width:100%;padding:0 1rem;position:relative}@media (min-width: 30rem){.without-sidebar .hy-main-content-wrapper{padding:0 2rem}}@media (min-width: 75.0625rem){.without-sidebar .hy-main-content-wrapper{max-width:1216px;padding:0}}";
+
+const HyMainContentWrapper = /*@__PURE__*/ proxyCustomElement(class HyMainContentWrapper extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    const classAttributes = ["hy-main-content-wrapper"].join(" ");
+    return (h(Host, null, h("div", { class: classAttributes }, h("slot", null))));
+  }
+  static get style() { return hyMainContentWrapperCss; }
+}, [4, "hy-main-content-wrapper"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-main-content-wrapper"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-main-content-wrapper":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyMainContentWrapper);
+      }
+      break;
+  } });
+}
+
+export { HyMainContentWrapper as H, defineCustomElement as d };

package/components/hy-main.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyMain extends Components.HyMain, HTMLElement {}
+export const HyMain: {
+  prototype: HyMain;
+  new (): HyMain;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-main.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const hyMainCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-main{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 auto;max-width:120.0625rem;padding:0;width:100%}.hy-main .layout-content{padding:0;width:100%}.hy-main .layout-user-login-page{padding:0 var(--gutter-medium);width:100%}.hy-main .layout-user-login-page div[id^=block-breadcrumbs]{display:none}.hy-main__common{position:relative}@media (min-width: 30rem){.hy-main__common .layout-content{margin:0 auto;width:100%}}@media (min-width: 75.0625rem){.hy-main__common .layout-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:80%}}@media (min-width: 1601px){.hy-main__common .layout-content{padding:0 2rem}}.hy-main__common .layout-sidebar-first{display:none}@media (min-width: 75.0625rem){.hy-main__common .layout-sidebar-first{background:var(--grayscale-white);border-top:1px solid var(--grayscale-black);border-right:1px solid var(--grayscale-medium);display:block;max-width:320px;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;padding:var(--gutter-extrawide) 13px;width:20%;height:auto}.hy-main__common .layout-sidebar-first.menu-is-open{background:var(--grayscale-white);min-height:100vh;overflow:auto}}.hy-main__large .layout-content{padding:0;width:100%}@media (min-width: 75.0625rem){.hy-main__large .layout-content{padding:0 2rem}}";
+
+const HyMain$1 = /*@__PURE__*/ proxyCustomElement(class HyMain extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.hasSidebar = false;
+  }
+  render() {
+    const classAttributes = [
+      "hy-main",
+      this.hasSidebar ? "with-sidebar" : "without-sidebar",
+      this.hasSidebar ? "hy-main__common" : "hy-main__large",
+    ].join(" ");
+    return (h("div", { class: classAttributes }, h("slot", null)));
+  }
+  static get style() { return hyMainCss; }
+}, [4, "hy-main", {
+    "hasSidebar": [4, "has-sidebar"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-main"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-main":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyMain$1);
+      }
+      break;
+  } });
+}
+
+const HyMain = HyMain$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyMain, defineCustomElement };

package/components/hy-menu-language-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyMenuLanguageItem extends Components.HyMenuLanguageItem, HTMLElement {}
+export const HyMenuLanguageItem: {
+  prototype: HyMenuLanguageItem;
+  new (): HyMenuLanguageItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-menu-language-item.js

@@ -0,0 +1,6 @@
+import { S as SiteLanguage, d as defineCustomElement$1 } from './menu-language-item.js';
+
+const HyMenuLanguageItem = SiteLanguage;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyMenuLanguageItem, defineCustomElement };

package/components/hy-menu-language.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyMenuLanguage extends Components.HyMenuLanguage, HTMLElement {}
+export const HyMenuLanguage: {
+  prototype: HyMenuLanguage;
+  new (): HyMenuLanguage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-menu-language.js

@@ -0,0 +1,6 @@
+import { M as MenuLanguage, d as defineCustomElement$1 } from './menu-language.js';
+
+const HyMenuLanguage = MenuLanguage;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyMenuLanguage, defineCustomElement };

package/components/hy-menu-main-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyMenuMainGroup extends Components.HyMenuMainGroup, HTMLElement {}
+export const HyMenuMainGroup: {
+  prototype: HyMenuMainGroup;
+  new (): HyMenuMainGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-menu-main-group.js

@@ -0,0 +1,6 @@
+import { H as HyMenuMainGroup$1, d as defineCustomElement$1 } from './hy-menu-main-group2.js';
+
+const HyMenuMainGroup = HyMenuMainGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyMenuMainGroup, defineCustomElement };