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

@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

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

Files changed (1260) hide show

package/dist/esm/hy-list-item.entry.js ADDED Viewed

@@ -0,0 +1,249 @@
+import { r as registerInstance, h, g as getElement } from './index-f84f2a7d.js';
+import { L as ListItemVariants } from './utils-7438924c.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+  static get watchers() { return {
+    "relatedLinks": ["relatedLinksWatcher"],
+    "additionalInfo": ["additionalInfoWatcher"],
+    "sourceSet": ["srcSetWatcher"]
+  }; }
+};
+HyListItem.style = hyListItemCss;
+export { HyListItem as hy_list_item };
+//# sourceMappingURL=hy-list-item.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"hy-list-item.entry.js","mappings":"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","names":[],"sources":["./src/components/hy-list-item/hy-list-item.scss?tag=hy-list-item","./src/components/hy-list-item/hy-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-list-item {\n display: flex;\n font-family: var(--main-font-family);\n text-decoration: none;\n\n &__default {\n margin-bottom: 28px;\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n\n &__info-container {\n &__header {\n @include font-size(12px, 14px);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 4px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n margin-bottom: 2px;\n }\n }\n\n &__title {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n color: var(--brand-main-light);\n letter-spacing: -0.56px;\n margin-bottom: 6px;\n\n @include breakpoint($narrow) {\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n margin-bottom: 10px;\n }\n @include breakpoint($xlarge) {\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n margin-bottom: 8px;\n }\n\n &__large {\n // >1200 no sidebar;\n @include breakpoint($extrawide) {\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n margin-bottom: 8px;\n }\n }\n }\n\n &__link-container {\n align-items: center;\n display: flex;\n margin-bottom: 6px;\n\n @include breakpoint($narrow) {\n margin-bottom: 8px;\n }\n }\n\n &__link {\n @include font-size(12px, 16px);\n color: var(--grayscale-dark);\n letter-spacing: -0.07px;\n margin-left: 4px;\n\n @include breakpoint($narrow) {\n margin-left: 5px;\n }\n\n &__icon {\n svg {\n fill: var(--grayscale-dark);\n }\n }\n }\n\n &__description {\n @include font-size(14px, 20px);\n color: var(--grayscale-black);\n letter-spacing: 0;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n }\n }\n }\n\n // Opem position\n &__position {\n background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);\n flex-direction: column;\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &__info-container {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n margin: 0;\n padding: 12px;\n position: relative;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n padding: 12px 16px;\n }\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n padding: 20px 24px;\n }\n\n &__header {\n display: flex;\n align-items: center;\n flex-direction: row;\n color: var(--brand-main);\n font-family: var(--main-font-family);\n font-size: 14px;\n font-weight: 600;\n letter-spacing: -0.2px;\n line-height: 14px;\n margin-bottom: 14px;\n\n .icon {\n margin-right: 0.75rem;\n\n svg {\n fill: var(--brand-main);\n }\n }\n }\n\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n padding: 20px 24px;\n }\n }\n\n &__data {\n display: flex;\n flex-direction: column;\n }\n\n &__title {\n @include font-size(18px, 20px);\n @include font-weight($bold);\n font-family: var(--main-font-family);\n color: var(--grayscale-black);\n margin-bottom: 12px;\n letter-spacing: -0.45px;\n line-height: 22px;\n\n @include breakpoint($narrow) {\n letter-spacing: -0.5px;\n }\n }\n\n &__description {\n @include font-size(14px);\n color: var(--grayscale-dark-text);\n display: none;\n font-family: var(--main-font-family);\n letter-spacing: 0.8px;\n margin-bottom: 14px;\n line-height: 20px;\n\n @include breakpoint($narrow) {\n display: block;\n }\n }\n\n &__outgoing-link {\n align-items: flex-end;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n position: relative;\n padding: 0 24px 24px 12px;\n\n @include breakpoint($narrow) {\n justify-content: center;\n padding: 0 24px 24px 0;\n }\n\n .label {\n color: var(--link-blue);\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 600;\n letter-spacing: -0.3px;\n line-height: 20px;\n }\n\n .icon {\n margin-right: 4px;\n margin-bottom: 2px;\n\n svg {\n fill: var(--link-blue);\n }\n }\n }\n }\n }\n\n // Degree programmes.\n &__degree {\n background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);\n flex-direction: column;\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &__image-container {\n display: block;\n position: relative;\n flex: 1;\n\n @include breakpoint($narrow) {\n flex: 0 0 24%;\n }\n\n &__image {\n vertical-align: bottom;\n max-width: 100%;\n height: 100%;\n\n img {\n object-fit: cover;\n width: 100%;\n height: 100%;\n }\n }\n\n span {\n @include font-weight($semibold);\n @include font-size(12px, 14px);\n background-color: var(--additional-yellow);\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);\n color: var(--grayscale-black);\n left: -4px;\n letter-spacing: -0.07px;\n padding: 5px 8px;\n position: absolute;\n top: 16px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n left: -8px;\n }\n @include breakpoint($wide) {\n top: 22px;\n }\n }\n }\n\n &__info-container {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n margin: 0;\n padding: 12px;\n position: relative;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n padding: 12px 16px;\n }\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n padding: 20px 24px;\n }\n\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n padding: 20px 24px;\n }\n }\n\n &__data {\n display: flex;\n flex-direction: column;\n }\n\n &__title {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.54px;\n margin-bottom: 8px;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n @include font-size(18px, 24px);\n letter-spacing: -0.5px;\n }\n\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n @include font-size(20px, 26px);\n letter-spacing: -0.6px;\n }\n\n &__large {\n // >1200 no sidebar;\n @include breakpoint($extrawide) {\n @include font-size(20px, 26px);\n letter-spacing: -0.6px;\n }\n }\n }\n\n &__description {\n @include font-size(14px, 18px);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 16px;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n letter-spacing: -0.2;\n }\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n @include font-size(16px, 20px);\n letter-spacing: -0.25px;\n }\n\n &__large {\n // >1200 no sidebar;\n @include breakpoint($extrawide) {\n @include font-size(16px, 20px);\n letter-spacing: -0.25px;\n }\n }\n }\n\n &__metadata-wrapper {\n display: flex;\n flex-direction: column;\n margin-top: 16px;\n width: 100%;\n\n @include breakpoint($narrow) {\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n }\n\n &.link-only {\n justify-content: flex-end;\n }\n }\n\n &__additional-info {\n width: 100%;\n\n &__item {\n @include font-size(12px, 16px);\n @include font-weight($light);\n align-items: center;\n color: var(--grayscale-black);\n display: flex;\n flex-direction: row;\n letter-spacing: -0.2px;\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 16px);\n }\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(14px, 16px);\n }\n }\n }\n &__item.active::before {\n content: \" \";\n box-sizing: border-box;\n height: 14px;\n width: 14px;\n border: 3px solid #ffffff;\n border-radius: 50%;\n background-color: #f9a21a;\n left: -7px;\n position: absolute;\n\n @include breakpoint($narrow) {\n border: none;\n height: 8px;\n margin-right: 6px;\n width: 8px;\n left: 0;\n position: relative;\n }\n }\n }\n\n &__outgoing-link {\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n position: relative;\n width: 100%;\n\n a {\n align-items: center;\n bottom: 0;\n top: 0;\n display: flex;\n flex-direction: row;\n position: relative;\n right: -18px;\n text-decoration: none;\n\n @include breakpoint($wide) {\n right: -22px;\n }\n @include breakpoint($xlarge) {\n right: -30px;\n }\n\n .label {\n @include font-size(14px, 16px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.5px;\n margin-right: 8px;\n text-align: right;\n }\n\n .icon-wrapper {\n background-color: var(--brand-main-light);\n z-index: 10;\n\n .icon {\n position: relative;\n overflow: hidden;\n\n svg {\n background-color: transparent;\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);\n fill: var(--grayscale-white);\n padding: 6.4px;\n\n @include breakpoint($xlarge) {\n height: 36px;\n width: 36px;\n padding: 7.2px;\n }\n }\n }\n }\n }\n\n // >1200 no sidebar;\n &__large {\n svg {\n @include breakpoint($extrawide) {\n height: 36px;\n width: 36px;\n padding: 7.2px;\n }\n }\n }\n }\n }\n }\n}\n\n.hy-list-item-wrapper {\n font-family: var(--main-font-family);\n\n &__degree {\n margin-bottom: 16px;\n @include breakpoint($narrow) {\n flex-direction: row;\n margin-bottom: 24px;\n }\n @include breakpoint($wide) {\n margin-bottom: 28px;\n }\n @include breakpoint($xlarge) {\n margin-bottom: 32px;\n }\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n margin-bottom: 32px;\n }\n }\n\n &__related-info {\n background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n margin-top: 4px;\n padding: 0 12px 0 16px;\n\n @include breakpoint($narrow) {\n padding: 0 24px 0 16px;\n }\n @include breakpoint($wide) {\n margin-top: 6px;\n padding: 0 24px 0 24px;\n }\n @include breakpoint($xlarge) {\n margin-top: 8px;\n }\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n margin-top: 8px;\n }\n }\n\n &__heading {\n &__link {\n text-decoration: none;\n }\n\n &__button {\n @include font-size(12px, 16px);\n align-items: center;\n background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n border: none;\n color: var(--grayscale-black);\n display: flex;\n flex-direction: row;\n font-family: var(--main-font-family);\n letter-spacing: -0.2px;\n height: 100%;\n padding: 8px 0;\n text-align: left;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(12px, 20px);\n padding: 14px 0;\n }\n @include breakpoint($wide) {\n @include font-size(14px, 20px);\n letter-spacing: -0.4px;\n padding: 18px 0;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &__is-open {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n &__icon {\n margin-right: 0.5rem;\n z-index: 0;\n\n @include breakpoint($wide) {\n margin-right: 12px;\n }\n\n svg {\n fill: var(--brand-main);\n height: 14px;\n width: 14px;\n\n @include breakpoint($wide) {\n height: 18px;\n width: 18px;\n }\n }\n }\n }\n\n &__content {\n display: none;\n\n &__is-open {\n border-top: 1px solid #d2d2d2;\n display: flex;\n flex-direction: column;\n padding: 20px 8px 5px 8px;\n\n @include breakpoint($wide) {\n padding: 20px 0 14px 0;\n }\n }\n }\n\n &__link {\n @include font-size(14px, 16px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.4px;\n margin-bottom: 16px;\n text-decoration: none;\n }\n }\n }\n}\n","export interface RelatedLink {\n label: string;\n url: string;\n isExternal: boolean;\n scLabel: string;\n}\n\nexport interface AdditionalInfo {\n text: string;\n isActive: boolean;\n}\n\nexport interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string | null;\n}\n\nimport {Component, h, Prop, Watch, State, Listen, Element} from \"@stencil/core\";\nimport {ListItemVariants} from \"../../utils/utils\";\n\nlet keys = {\n enter: \"Enter\",\n space: \"Space\",\n};\n\n@Component({\n tag: \"hy-list-item\",\n styleUrl: \"hy-list-item.scss\",\n shadow: false,\n})\nexport class HyListItem {\n @Element() el: HTMLElement;\n @State() isExpandedRelatedContent: boolean = false;\n @Prop() variant: ListItemVariants = ListItemVariants.default;\n @Prop() itemType?: string;\n @Prop() itemTitle?: string;\n @Prop() itemDescription?: any;\n @Prop() url?: string;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() itemImageUrl?: string;\n @Prop() itemImageAlt?: string;\n @Prop() disableLazy: boolean = false;\n @Prop() relatedLinksBlockTitle?: string;\n private _relatedLinks: RelatedLink[];\n @Prop() relatedLinks?: RelatedLink[] | string;\n @Prop() imageLabel?: string;\n @Prop() outGoingUrlLabel?: string = \"Go to programme page\";\n private _additionalInfo: AdditionalInfo[];\n @Prop() additionalInfo?: AdditionalInfo[] | string;\n @Prop() headerstyle: string = \"common\";\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] | string;\n @Prop() truncateDescription: boolean = false;\n @Prop() truncateLimit: number = 140;\n\n @State() _imageMinHeight: number = 0;\n @State() _imageMinWidth: number = 0;\n\n @Watch(\"relatedLinks\")\n relatedLinksWatcher(newValue: RelatedLink[] | string) {\n if (typeof newValue === \"string\") {\n this._relatedLinks = JSON.parse(newValue);\n } else {\n this._relatedLinks = newValue;\n }\n }\n\n @Watch(\"additionalInfo\")\n additionalInfoWatcher(newValue: AdditionalInfo[] | string) {\n if (typeof newValue === \"string\") {\n this._additionalInfo = JSON.parse(newValue);\n } else {\n this._additionalInfo = newValue;\n }\n }\n\n @Watch(\"sourceSet\") srcSetWatcher(data: ImageSrcSet[] | string) {\n this._sourceSet = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n expandRelatedInfoPanel(target) {\n let contentSelector = `hy-list-item-wrapper__${this.variant}__related-info__content`;\n let targetButtonClass = \"hy-list-item-wrapper__degree__related-info__heading__button\";\n let contentSection = document.querySelectorAll(`[aria-labelledBy=\"${target.id}\"]`)[0] as HTMLElement;\n if (contentSection) {\n if (!this.isExpandedRelatedContent) {\n contentSection.classList.add(`${contentSelector}__is-open`);\n target.classList.add(`${targetButtonClass}__is-open`);\n } else {\n contentSection.classList.remove(`${contentSelector}__is-open`);\n target.classList.remove(`${targetButtonClass}__is-open`);\n }\n this.isExpandedRelatedContent = !this.isExpandedRelatedContent;\n }\n }\n\n @Listen(\"keydown\")\n handleKeyDown(event: KeyboardEvent) {\n const key = event.code;\n let target = event.target as HTMLButtonElement;\n\n const targetElement = target.tagName.toLowerCase();\n const possibleTags = [targetElement].some((r) => [\"svg\", \"path\", \"button\", \"a\"].indexOf(r) >= 0);\n\n if (\n target &&\n possibleTags &&\n !target.classList.contains(\"hy-list-item-wrapper__degree__related-info__link\") &&\n [keys.enter, keys.space].includes(key)\n ) {\n if (targetElement !== \"button\") {\n target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);\n }\n this.expandRelatedInfoPanel(target);\n event.preventDefault();\n }\n }\n\n @Listen(\"click\")\n handleClick(event) {\n let target = event.target as HTMLElement;\n const targetElement = target.tagName.toLowerCase();\n const possibleTags = [targetElement].some((r) => [\"svg\", \"path\", \"button\", \"a\"].indexOf(r) >= 0);\n\n if (target && possibleTags && !target.classList.contains(\"hy-list-item-wrapper__degree__related-info__link\")) {\n if (targetElement !== \"button\") {\n target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);\n }\n this.expandRelatedInfoPanel(target);\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n componentWillLoad() {\n this.relatedLinksWatcher(this.relatedLinks);\n this.additionalInfoWatcher(this.additionalInfo);\n this.srcSetWatcher(this.sourceSet);\n }\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n if (this.variant == ListItemVariants.degreeProgramme) {\n const image = document.querySelector(\".hy-list-item__degree__image-container__image img\") as any;\n\n if (image) {\n image.addEventListener(\"load\", function () {\n const outputImageAspectRatio = 1;\n const imageHeight = image.naturalHeight;\n const imageWidth = image.naturalWidth;\n const inputImageAspectRatio = imageWidth / imageHeight;\n this._imageMinWidth = imageWidth;\n this._imageMinHeight = imageHeight;\n if (inputImageAspectRatio > outputImageAspectRatio) {\n this._imageMinWidth = imageHeight * outputImageAspectRatio;\n } else if (inputImageAspectRatio < outputImageAspectRatio) {\n this._imageMinHeight = imageWidth / outputImageAspectRatio;\n }\n });\n }\n }\n }\n\n render() {\n const classWrapperAttributes = [\n \"hy-list-item-wrapper\",\n `hy-list-item-wrapper__${this.variant}`,\n `hy-list-item-wrapper__${this.variant}__${this.headerstyle}`,\n ].join(\" \");\n const classAttributes = [\"hy-list-item\", `hy-list-item__${this.variant}`].join(\" \");\n const classInfoContainerAttributes = [\n `hy-list-item__${this.variant}__info-container`,\n `hy-list-item__${this.variant}__info-container__${this.headerstyle}`,\n ].join(\" \");\n /*const classInfoContainerDataAttributes = [\n `hy-list-item__${this.variant}__info-container__data`,\n `hy-list-item__${this.variant}__info-container__data__${this.headerstyle}`,\n ].join(' ');*/\n const classInfoContainerHeader = [\n `hy-list-item__${this.variant}__info-container__header`,\n `hy-list-item__${this.variant}__info-container__header__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerTitle = [\n `hy-list-item__${this.variant}__info-container__title`,\n `hy-list-item__${this.variant}__info-container__title__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerDescription = [\n `hy-list-item__${this.variant}__info-container__description`,\n `hy-list-item__${this.variant}__info-container__description__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerLinkContainer = [`hy-list-item__${this.variant}__info-container__link-container`].join(\" \");\n const classInfoContainerLinkIcon = [`hy-list-item__${this.variant}__info-container__link__icon`].join(\" \");\n const classInfoContainerLink = [`hy-list-item__${this.variant}__info-container__link`].join(\" \");\n\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n function truncate(str, n) {\n return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n }\n\n switch (this.variant) {\n case ListItemVariants.position: {\n const classInfoContainerOutgoingLink = [\n `hy-list-item__${this.variant}__info-container__outgoing-link`,\n `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,\n ].join(\" \");\n return (\n <article>\n <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>\n <div class={classInfoContainerAttributes}>\n <div class={classInfoContainerHeader}>\n <div class=\"icon\">\n <hy-icon icon={\"hy-icon-units-and-faculties\"} size={18} />\n </div>\n {this.itemType}\n </div>\n <div class={classInfoContainerTitle}>{this.itemTitle}</div>\n\n {this.itemDescription && (\n <div\n class={classInfoContainerDescription}\n innerHTML={\n this.truncateDescription\n ? truncate(this.itemDescription, this.truncateLimit)\n : this.itemDescription\n }\n ></div>\n )}\n </div>\n <div class={classInfoContainerOutgoingLink}>\n <span class=\"icon\">\n <hy-icon icon={\"hy-icon-done\"} size={14}></hy-icon>\n </span>\n <span class=\"label\">{this.outGoingUrlLabel}</span>\n </div>\n </a>\n </article>\n );\n }\n case ListItemVariants.degreeProgramme: {\n const classImageContainerAttributes = [`hy-list-item__${this.variant}__image-container`].join(\" \");\n const classImageContainerImage = [`hy-list-item__${this.variant}__image-container__image`].join(\" \");\n\n const classInfoContainerAdditionalInfoAttributes = [\n `hy-list-item__${this.variant}__info-container__additional-info`,\n `hy-list-item__${this.variant}__info-container__additional-info__${this.headerstyle}`,\n ].join(\" \");\n\n const withAdditionalInfo = this._additionalInfo && this._additionalInfo.length > 0 ? \"\" : \"link-only\";\n const classMetadataWrapper = [\n `hy-list-item__${this.variant}__info-container__metadata-wrapper`,\n withAdditionalInfo,\n ].join(\" \");\n const classContentWrapper = [`hy-list-item__${this.variant}__info-container__content-wrapper`].join(\" \");\n\n const classInfoContainerOutgoingLink = [\n `hy-list-item__${this.variant}__info-container__outgoing-link`,\n `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerOutgoingLinkUrl = [\n `hy-list-item__${this.variant}__info-container__outgoing-link__link`,\n ].join(\" \");\n\n const classRelatedInfoContainer = [\n `hy-list-item-wrapper__${this.variant}__related-info`,\n `hy-list-item-wrapper__${this.variant}__related-info__${this.headerstyle}`,\n ].join(\" \");\n const classRelatedInfoHeading = [`hy-list-item-wrapper__${this.variant}__related-info__heading`].join(\" \");\n const classRelatedInfoHeadingLink = [`hy-list-item-wrapper__${this.variant}__related-info__heading__link`].join(\n \" \"\n );\n const classRelatedInfoHeadingButton = [\n `hy-list-item-wrapper__${this.variant}__related-info__heading__button`,\n ].join(\" \");\n const classRelatedInfoHeadingIcon = [`hy-list-item-wrapper__${this.variant}__related-info__heading__icon`].join(\n \" \"\n );\n const classRelatedInfoContent = [`hy-list-item-wrapper__${this.variant}__related-info__content`].join(\" \");\n const classRelatedInfoLink = [`hy-list-item-wrapper__${this.variant}__related-info__link`].join(\" \");\n\n const titleAsId =\n this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0\n ? `${this.itemTitle}-${this.relatedLinksBlockTitle}`.toLowerCase().replace(/\\W/g, \"-\")\n : \"\";\n const accordionItemHref = \"#\" + titleAsId + \"--title\";\n\n const relatedLinksCount =\n this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0 ? this._relatedLinks.length : \"\";\n\n return [\n <article class={classWrapperAttributes}>\n <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>\n <div class={classImageContainerAttributes}>\n <div class={classImageContainerImage}>\n {this._sourceSet ? (\n <picture>\n {this._sourceSet.map((item) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.itemImageUrl}\n alt={this.itemImageAlt}\n style={{\n \"--minheight\": `${this._imageMinHeight}px` as \"minHeight\",\n \"--minwidth\": `${this._imageMinWidth}px` as \"minWidth\",\n }}\n />\n </picture>\n ) : (\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.itemImageUrl}\n alt={this.itemImageAlt}\n style={{\n \"--minheight\": `${this._imageMinHeight}px` as \"minHeight\",\n \"--minwidth\": `${this._imageMinWidth}px` as \"minWidth\",\n }}\n />\n )}\n </div>\n {this.imageLabel && <span>{this.imageLabel}</span>}\n </div>\n <div class={classInfoContainerAttributes}>\n <div class={classContentWrapper}>\n <div class={classInfoContainerTitle}>{this.itemTitle}</div>\n {this.itemDescription && (\n <div class={classInfoContainerDescription} innerHTML={this.itemDescription}></div>\n )}\n </div>\n <div class={classMetadataWrapper}>\n {this._additionalInfo && (\n <div class={classInfoContainerAdditionalInfoAttributes}>\n {this._additionalInfo.map((x) => {\n let classInfoContainerAdditionalInfoItem = [\n `hy-list-item__${this.variant}__info-container__additional-info__item`,\n `hy-list-item__${this.variant}__info-container__additional-info__item__${this.headerstyle}`,\n `${x.isActive.toString() == \"true\" ? \"active\" : \"\"}`,\n ].join(\" \");\n return <div class={classInfoContainerAdditionalInfoItem}>{x.text}</div>;\n })}\n </div>\n )}\n <div class={classInfoContainerOutgoingLink}>\n <a\n href={this.url}\n target={target}\n aria-label={this.scLabel}\n class={classInfoContainerOutgoingLinkUrl}\n tabindex=\"-1\"\n >\n <span class=\"label\">{this.outGoingUrlLabel}</span>\n <span class=\"icon-wrapper\">\n <div class=\"icon\">\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={32} />\n </div>\n </span>\n </a>\n </div>\n </div>\n </div>\n </a>\n {this.relatedLinksBlockTitle && (\n <div class={classRelatedInfoContainer}>\n <div class={classRelatedInfoHeading}>\n <a href={accordionItemHref} class={classRelatedInfoHeadingLink} tabindex=\"-1\">\n <button\n aria-expanded=\"false\"\n aria-controls={`${titleAsId}--content`}\n class={classRelatedInfoHeadingButton}\n id={`${titleAsId}--title`}\n >\n <span class={classRelatedInfoHeadingIcon}>\n <hy-icon icon={\"hy-icon-caret-down\"} size={14} />\n </span>\n {this.relatedLinksBlockTitle} ({relatedLinksCount})\n </button>\n </a>\n </div>\n <div\n class={classRelatedInfoContent}\n aria-labelledBy={`${titleAsId}--title`}\n id={`${titleAsId}--content`}\n role=\"region\"\n aria-hidden=\"true\"\n >\n {this._relatedLinks.map((x) => {\n let relatedLinkTarget = x.isExternal ? \"_blank\" : \"_self\";\n return (\n <a class={classRelatedInfoLink} href={x.url} target={target} aria-label={relatedLinkTarget}>\n {x.label}\n </a>\n );\n })}\n </div>\n </div>\n )}\n </article>,\n ];\n }\n default: {\n return (\n <article>\n <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>\n <div class={classInfoContainerAttributes}>\n <div class={classInfoContainerHeader}>{this.itemType}</div>\n <div class={classInfoContainerTitle}>{this.itemTitle}</div>\n\n <div class={classInfoContainerLinkContainer}>\n <span class={classInfoContainerLinkIcon}>\n <hy-icon icon={\"hy-icon-link\"} size={15} />\n </span>\n <div class={classInfoContainerLink}>{this.url}</div>\n </div>\n\n {this.itemDescription && (\n <div class={classInfoContainerDescription} innerHTML={this.itemDescription}></div>\n )}\n </div>\n </a>\n </article>\n );\n }\n }\n }\n}\n"],"version":3}

package/dist/esm/hy-logo-grid_2.entry.js ADDED Viewed

@@ -0,0 +1,45 @@
+import { r as registerInstance, h } from './index-f84f2a7d.js';
+const hyLogoGridCss$1 = ":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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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))));
+  }
+};
+HyLogoGrid.style = hyLogoGridCss$1;
+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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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;
+    });
+  }
+};
+HyLogoGridItem.style = hyLogoGridCss;
+export { HyLogoGrid as hy_logo_grid, HyLogoGridItem as hy_logo_grid_item };
+//# sourceMappingURL=hy-logo-grid_2.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"hy-logo-grid.hy-logo-grid-item.entry.js","mappings":";;AAAA,MAAMA,eAAa,GAAG,g3FAAg3F;;MCOz3F,UAAU;;;;;;EAIrB,MAAM;IACJ,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;IAE3C,QACE,WAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,eAAe,IAC3C,IAAI,CAAC,aAAa,IAAI,EAAC,cAAc,IAAC,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,aAAa,CAAkB,EACxG,WAAK,KAAK,EAAC,sBAAsB,IAC/B,eAAQ,CACJ,CACF,EACN;GACH;;;;ACtBH,MAAM,aAAa,GAAG,g3FAAg3F;;MCOz3F,cAAc;;;;;;EAIzB,MAAM;IACJ,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAE5D,OAAO,WAAW,CAAC,GAAG,CAAC,CAAC,EAAC,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAC;MACvF,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;MAE1C,MAAM,cAAc,IAClB,cAAQ,KAAK,EAAC,sBAAsB,IACjC,aAAa,KACZ,mBACG,aAAa,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAC,MAC3C,cAAQ,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,GAAG,EAAE,GAAI,CAC7E,CAAC,EACF,WAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,YAAY,GAAI,CAC5B,CACX,EACA,CAAC,aAAa,IAAI,WAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,YAAY,GAAI,CAChD,CACV,CAAC;MAEF,IAAI,UAAU,EAAE;QACd,MAAM,EAAC,GAAG,EAAE,MAAM,EAAC,GAAG,UAAU,CAAC;QACjC,MAAM,WAAW,GAAG,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;QAE3D,QACE,SAAG,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAC,oBAAoB,IAC1D,cAAc,CACb,EACJ;OACH;MAED,OAAO,cAAc,CAAC;KACvB,CAAC,CAAC;GACJ;;;;;;","names":["hyLogoGridCss"],"sources":["./src/components/hy-logo-grid/hy-logo-grid.scss?tag=hy-logo-grid","./src/components/hy-logo-grid/hy-logo-grid.tsx","./src/components/hy-logo-grid/hy-logo-grid.scss?tag=hy-logo-grid-item","./src/components/hy-logo-grid/hy-logo-grid.item.tsx"],"sourcesContent":[".hy-logo-grid {\n padding: 78px 0 92px;\n}\n\n.hy-logo-grid__title {\n @include font-size(28px, 32px);\n letter-spacing: -0.7px;\n font-family: var(--main-font-family);\n margin: 0 0 24px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(34px, 40px);\n letter-spacing: -0.85px;\n margin: 0 0 32px;\n }\n\n .without-sidebar & {\n @include breakpoint($xlarge) {\n @include font-size(42px, 48px);\n letter-spacing: -1.05px;\n margin: 0 0 40px;\n }\n }\n\n .with-sidebar & {\n @include breakpoint($extrawide) {\n @include font-size(42px, 48px);\n letter-spacing: -1.05px;\n margin: 0 0 40px;\n }\n }\n}\n\n.hy-logo-grid__images {\n display: grid;\n gap: 24px 36px;\n grid-template-columns: repeat(2, 1fr);\n padding: 0 8px;\n justify-content: space-between;\n\n @include breakpoint($narrow) {\n grid-template-columns: repeat(3, 25%);\n padding: 0;\n gap: 28px 0;\n }\n\n .without-sidebar & {\n @include breakpoint($wide) {\n grid-template-columns: repeat(4, 20%);\n gap: 32px 0;\n }\n\n @include breakpoint($extrawide) {\n gap: 40px 0;\n }\n }\n\n .with-sidebar & {\n @include breakpoint($extrawide) {\n grid-template-columns: repeat(4, 20%);\n gap: 32px 0;\n }\n\n @include breakpoint($xlarge) {\n gap: 40px 0;\n }\n }\n}\n\n.hy-logo-grid__figure {\n margin: 0;\n padding: 0;\n position: relative;\n\n &:after {\n content: \"\";\n display: block;\n padding-bottom: 100%;\n }\n\n picture {\n position: absolute;\n inset: 0;\n align-items: center;\n justify-content: center;\n display: flex;\n }\n\n img {\n max-width: 100%;\n object-fit: scale-down;\n height: 100%;\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-logo-grid\",\n styleUrl: \"hy-logo-grid.scss\",\n shadow: false,\n})\nexport class HyLogoGrid {\n @Prop() headingVariant?: string;\n @Prop() logoGridTitle?: string;\n\n render() {\n const HeadingVariant = this.headingVariant;\n\n return (\n <div class=\"hy-logo-grid\" role=\"complementary\">\n {this.logoGridTitle && <HeadingVariant class=\"hy-logo-grid__title\">{this.logoGridTitle}</HeadingVariant>}\n <div class=\"hy-logo-grid__images\">\n <slot />\n </div>\n </div>\n );\n }\n}\n",".hy-logo-grid {\n padding: 78px 0 92px;\n}\n\n.hy-logo-grid__title {\n @include font-size(28px, 32px);\n letter-spacing: -0.7px;\n font-family: var(--main-font-family);\n margin: 0 0 24px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(34px, 40px);\n letter-spacing: -0.85px;\n margin: 0 0 32px;\n }\n\n .without-sidebar & {\n @include breakpoint($xlarge) {\n @include font-size(42px, 48px);\n letter-spacing: -1.05px;\n margin: 0 0 40px;\n }\n }\n\n .with-sidebar & {\n @include breakpoint($extrawide) {\n @include font-size(42px, 48px);\n letter-spacing: -1.05px;\n margin: 0 0 40px;\n }\n }\n}\n\n.hy-logo-grid__images {\n display: grid;\n gap: 24px 36px;\n grid-template-columns: repeat(2, 1fr);\n padding: 0 8px;\n justify-content: space-between;\n\n @include breakpoint($narrow) {\n grid-template-columns: repeat(3, 25%);\n padding: 0;\n gap: 28px 0;\n }\n\n .without-sidebar & {\n @include breakpoint($wide) {\n grid-template-columns: repeat(4, 20%);\n gap: 32px 0;\n }\n\n @include breakpoint($extrawide) {\n gap: 40px 0;\n }\n }\n\n .with-sidebar & {\n @include breakpoint($extrawide) {\n grid-template-columns: repeat(4, 20%);\n gap: 32px 0;\n }\n\n @include breakpoint($xlarge) {\n gap: 40px 0;\n }\n }\n}\n\n.hy-logo-grid__figure {\n margin: 0;\n padding: 0;\n position: relative;\n\n &:after {\n content: \"\";\n display: block;\n padding-bottom: 100%;\n }\n\n picture {\n position: absolute;\n inset: 0;\n align-items: center;\n justify-content: center;\n display: flex;\n }\n\n img {\n max-width: 100%;\n object-fit: scale-down;\n height: 100%;\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-logo-grid-item\",\n styleUrl: \"hy-logo-grid.scss\",\n shadow: false,\n})\nexport class HyLogoGridItem {\n @Prop() link?: string;\n @Prop() image: string;\n\n render() {\n const parsedImage = JSON.parse(this.image);\n const parsedLink = this.link ? JSON.parse(this.link) : null;\n\n return parsedImage.map(({image_sources: sources, image_url: fallback_url, image_alt: alt}) => {\n const parsedSources = JSON.parse(sources);\n\n const elementContent = (\n <figure class=\"hy-logo-grid__figure\">\n {parsedSources && (\n <picture>\n {parsedSources.map(({src, media, type, sizes}) => (\n <source srcSet={src} media={media} type={type} sizes={sizes ? sizes : \"\"} />\n ))}\n <img alt={alt} src={fallback_url} />\n </picture>\n )}\n {!parsedSources && <img alt={alt} src={fallback_url} />}\n </figure>\n );\n\n if (parsedLink) {\n const {url, target} = parsedLink;\n const targetValue = target === \"_blank\" ? target : \"_self\";\n\n return (\n <a href={url} target={targetValue} class=\"hy-logo-grid__link\">\n {elementContent}\n </a>\n );\n }\n\n return elementContent;\n });\n }\n}\n"],"version":3}

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

@@ -0,0 +1,23 @@
+import { r as registerInstance, h } from './index-f84f2a7d.js';
+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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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)));
+  }
+};
+HyMain.style = hyMainCss;
+export { HyMain as hy_main };
+//# sourceMappingURL=hy-main.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"hy-main.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,g9EAAg9E;;MCOr9E,MAAM;;;sBACa,KAAK;;EAEnC,MAAM;IACJ,MAAM,eAAe,GAAG;MACtB,SAAS;MACT,IAAI,CAAC,UAAU,GAAG,cAAc,GAAG,iBAAiB;MACpD,IAAI,CAAC,UAAU,GAAG,iBAAiB,GAAG,gBAAgB;KACvD,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,QACE,WAAK,KAAK,EAAE,eAAe,IACzB,eAAQ,CACJ,EACN;GACH;;;;;;","names":[],"sources":["./src/components/hy-main/hy-main.scss?tag=hy-main","./src/components/hy-main/hy-main.tsx"],"sourcesContent":[".hy-main {\n display: flex;\n margin: 0 auto;\n max-width: $fullhd;\n padding: 0;\n width: 100%;\n\n .layout-content {\n padding: 0;\n width: 100%;\n }\n\n .layout-user-login-page {\n padding: 0 var(--gutter-medium);\n width: 100%;\n\n div[id^=\"block-breadcrumbs\"] {\n display: none;\n }\n }\n\n &__common {\n position: relative;\n .layout-content {\n @include breakpoint($narrow) {\n margin: 0 auto;\n width: 100%;\n }\n @include breakpoint($extrawide) {\n flex-grow: 1;\n order: 2;\n width: 80%;\n }\n @include breakpoint($xlarge) {\n padding: 0 2rem;\n }\n }\n\n .layout-sidebar-first {\n display: none;\n\n @include breakpoint($extrawide) {\n background: var(--grayscale-white);\n border-top: 1px solid var(--grayscale-black);\n border-right: 1px solid var(--grayscale-medium);\n display: block;\n max-width: 320px;\n order: 1;\n padding: var(--gutter-extrawide) 13px;\n width: 20%;\n height: auto;\n\n &.menu-is-open {\n background: var(--grayscale-white);\n min-height: 100vh;\n overflow: auto;\n }\n }\n }\n }\n\n &__large {\n .layout-content {\n padding: 0;\n width: 100%;\n @include breakpoint($extrawide) {\n padding: 0 2rem;\n }\n }\n }\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-main\",\n styleUrl: \"hy-main.scss\",\n shadow: false,\n})\nexport class HyMain {\n @Prop() hasSidebar: boolean = false;\n\n render() {\n const classAttributes = [\n \"hy-main\",\n this.hasSidebar ? \"with-sidebar\" : \"without-sidebar\",\n this.hasSidebar ? \"hy-main__common\" : \"hy-main__large\",\n ].join(\" \");\n\n return (\n <div class={classAttributes}>\n <slot />\n </div>\n );\n }\n}\n"],"version":3}