@itcenteratunihelsinki/huds-lib 0.8.42 → 0.8.44

package/components/accordion-container.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './hy-box2.js';
+
+const accordionContainerCss = ":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-accordion-container{width:100%}";
+
+const AccordionContainer = /*@__PURE__*/ proxyCustomElement(class AccordionContainer extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.accordionid = undefined;
+  }
+  /*
+  * data-allow-toggle
+    Allow for each toggle to both open and close individually
+
+  data-allow-multiple
+    Allow for multiple accordion sections to be expanded at the same time.
+    Assumes data-allow-toggle otherwise you would not be able to close any of the accordions
+  */
+  render() {
+    const classAttributes = ["hy-accordion-container", "js-hy-accordion"];
+    const id = this.accordionid.toLowerCase().replace(/\W/g, "-");
+    return (h(Host, null, h("div", { id: id, class: classAttributes.join(" "), "data-allow-multiple": "true", "data-allow-toggle": "true" }, h("slot", null)), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+  }
+  static get style() { return accordionContainerCss; }
+}, [4, "hy-accordion-container", {
+    "accordionid": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-accordion-container", "hy-box"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-accordion-container":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AccordionContainer);
+      }
+      break;
+    case "hy-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { AccordionContainer as A, defineCustomElement as d };

package/components/accordion-item.js

@@ -0,0 +1,239 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { A as AccordionVariants } from './utils.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const accordionItemCss = ":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-accordion__item{margin-bottom:12px}.hy-accordion__item__is-open{border:1px solid var(--grayscale-dark)}.hy-accordion__item__is-open .hy-accordion--heading{margin:0 auto}.hy-accordion__item__is-open .hy-accordion--heading .hy-accordion--heading__icon{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.hy-accordion__item.mini{margin-bottom:1rem;margin-top:1rem}.hy-accordion__item__is-open.mini{margin-bottom:0;margin-top:0}.hy-accordion__item__is-open.mini .hy-accordion__item--container{border-bottom:1px solid var(--grayscale-medium-dark);border-top:1px solid var(--grayscale-medium-dark);padding-top:16px;padding-bottom:32px;margin-top:-1px;-webkit-transition:padding 0.5s ease-in-out;transition:padding 0.5s ease-in-out}@media (min-width: 30rem){.hy-accordion__item__is-open.mini .hy-accordion__item--container{padding-top:28px;padding-bottom:30px}}@media (min-width: 60rem){.hy-accordion__item__is-open.mini .hy-accordion__item--container{padding-top:32px;padding-bottom:40px}}.hy-accordion__item.hy-accordion__item__is-open.mini{background-color:var(--grayscale-white);border:none;-webkit-box-shadow:0 -10px 10px -10px rgba(0, 49, 70, 0.05);box-shadow:0 -10px 10px -10px rgba(0, 49, 70, 0.05)}.hy-accordion--heading{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;letter-spacing:-0.69px;line-height:28px;margin:0 auto;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;width:100%}.hy-accordion--heading .hy-accordion__link{text-decoration:none}.hy-accordion--heading .hy-accordion__link:hover{text-decoration:none}.hy-accordion--heading .hy-accordion__button{font-size:1.125rem;line-height:22px;font-weight:700;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;background-color:var(--grayscale-background-box);border:none;color:var(--brand-main-nearly-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);height:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;letter-spacing:-0.45px;padding:13px 20px 13px 16px;-webkit-transition:all 0.35s ease-in;transition:all 0.35s ease-in;width:100%}.hy-accordion--heading .hy-accordion__button:hover{cursor:pointer}@media (min-width: 30rem){.hy-accordion--heading .hy-accordion__button{padding:1rem 2rem 1rem 1.25rem}}@media (min-width: 1601px){.hy-accordion--heading .hy-accordion__button{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-accordion--heading .hy-accordion__button--large{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-accordion--heading .hy-accordion__button--large .hy-accordion--heading__icon svg{height:20px;width:20px}}.hy-accordion--heading .hy-accordion__button span{text-align:left}.hy-accordion--heading .hy-accordion__button[aria-expanded=true]{background:none;position:relative}.hy-accordion--heading .hy-accordion__button[aria-expanded=true]:after{background-color:var(--grayscale-medium-dark);bottom:0;content:\"\";height:1px;left:16px;position:absolute;right:20px}.hy-accordion--heading .hy-accordion__button *{pointer-events:none}.hy-accordion--heading .hy-accordion--heading__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:22px;margin-right:8px;z-index:0}.hy-accordion--heading .hy-accordion--heading__icon svg{fill:var(--brand-main)}@media (min-width: 30rem){.hy-accordion--heading .hy-accordion--heading__icon svg{height:18px;width:18px}}@media (min-width: 1601px){.hy-accordion--heading .hy-accordion--heading__icon svg{height:20px;width:20px}}.hy-accordion--heading.mini .hy-accordion__button{font-size:1.125rem;line-height:22px;background-color:var(--grayscale-white);color:var(--link-blue);letter-spacing:-0.56px;padding:0}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion__button{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding:0}}.hy-accordion--heading.mini .hy-accordion__button[aria-expanded=true]{color:var(--grayscale-black);margin-bottom:20px}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion__button[aria-expanded=true]{margin-bottom:28px}}@media (min-width: 60rem){.hy-accordion--heading.mini .hy-accordion__button[aria-expanded=true]{margin-bottom:32px}}.hy-accordion--heading.mini .hy-accordion--heading__icon{margin-right:0.5rem;z-index:0}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion--heading__icon{margin-right:10px}}.hy-accordion--heading.mini .hy-accordion--heading__icon svg{fill:var(--brand-main-light);height:14px;width:14px}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion--heading__icon svg{height:16px;width:16px}}.hy-accordion__content{display:block;height:0;padding:0;overflow:hidden;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out}.hy-accordion__content--inner-wrapper{display:block;padding:16px 12px}@media (min-width: 30rem){.hy-accordion__content--inner-wrapper{padding:15px 16px}}@media (min-width: 60rem){.hy-accordion__content--inner-wrapper{padding:16px}}@media (min-width: 75.0625rem){.hy-accordion__content--inner-wrapper--large{padding:24px 20px}}@media (min-width: 1601px){.hy-accordion__content--inner-wrapper{padding:24px 20px}}.hy-accordion__content--inner-wrapper--mini{padding:0}.hy-accordion__content--inner-wrapper--mini .course-heading h4{padding-top:0 !important}";
+
+let keys = {
+  enter: "Enter",
+  tab: "Tab",
+  pageUp: "PageUp",
+  pageDown: "PageDown",
+  arrowUp: "ArrowUp",
+  arrowDown: "ArrowDown",
+  home: "Home",
+  end: "End", //35
+};
+const AccordionItem = /*@__PURE__*/ proxyCustomElement(class AccordionItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.accordiontitle = undefined;
+    this.variant = AccordionVariants.default;
+    this.headerstyle = "common";
+    this.showOpen = false;
+    this.ready = false;
+  }
+  componentDidLoad() {
+    this.ready = true;
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  componentDidRender() {
+    if (window.location.hash) {
+      this.expandPanelByAnchor(window.location.hash);
+    }
+    document.querySelectorAll(".hy-accordion__content").forEach(function (accordion) {
+      let showOpen = accordion.classList.contains("open");
+      let element = accordion;
+      if (showOpen) {
+        element.style.display = "block";
+        element.style.height = element.scrollHeight + "px";
+      }
+      else {
+        element.style.height = 0 + "px";
+        element.style.display = "none";
+      }
+    });
+  }
+  onHashChange() {
+    if (window.location.hash) {
+      this.expandPanelByAnchor(window.location.hash);
+    }
+  }
+  handleKeyDown(event) {
+    const containerId = this.el.parentElement.id;
+    let accordion = document.querySelectorAll(`#${containerId}`)[0];
+    const triggers = Array.prototype.slice.call(accordion.querySelectorAll(".hy-accordion__button"));
+    let target = event.target;
+    const key = event.code;
+    const ctrlModifier = event.ctrlKey && [keys.pageDown, keys.pageUp].includes(key); //key.match(/33|34/);
+    if (target.classList.contains("hy-accordion__button")) {
+      // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
+      if ([keys.arrowDown, keys.arrowUp].includes(key) || ctrlModifier) {
+        const index = triggers.indexOf(target);
+        const direction = [keys.arrowDown, keys.pageDown].includes(key) ? 1 : -1;
+        const length = triggers.length;
+        const newIndex = (index + length + direction) % length;
+        triggers[newIndex].focus();
+        event.preventDefault();
+      }
+      else if ([keys.home, keys.end].includes(key)) {
+        switch (key) {
+          // Go to first accordion
+          case keys.home:
+            triggers[0].focus();
+            break;
+          // Go to last accordion
+          case keys.end:
+            triggers[triggers.length - 1].focus();
+            break;
+        }
+        event.preventDefault();
+      }
+    }
+  }
+  handleClick(event) {
+    const target = event.target;
+    const accordionContainer = this.el.parentElement;
+    const allowMultiple = accordionContainer.hasAttribute("data-allow-multiple");
+    const allowToggle = allowMultiple ? allowMultiple : accordionContainer.hasAttribute("data-allow-toggle");
+    if (target && target.tagName.toLowerCase() === "button") {
+      let targetParent = target.closest(".hy-accordion__item");
+      let targetContent = targetParent.getElementsByClassName("hy-accordion__content")[0];
+      const isExpanded = target.getAttribute("aria-expanded") === "true";
+      const activeButtonElement = accordionContainer.querySelector('[aria-expanded="true"]');
+      if (!allowMultiple && activeButtonElement && activeButtonElement !== target) {
+        activeButtonElement.setAttribute("aria-expanded", "false");
+        this.collapseSection(targetContent);
+        if (targetParent.classList.contains("hy-accordion__item__is-open")) {
+          targetParent.classList.remove("hy-accordion__item__is-open");
+        }
+        accordionContainer
+          .querySelector(`#${activeButtonElement.getAttribute("aria-controls")}`)
+          .setAttribute("aria-hidden", "true");
+        if (!allowToggle) {
+          activeButtonElement.removeAttribute("aria-disabled");
+        }
+      }
+      if (!isExpanded) {
+        this.expandSection(targetContent);
+        target.setAttribute("aria-expanded", "true");
+        targetParent.classList.add("hy-accordion__item__is-open");
+        accordionContainer
+          .querySelector(`#${target.getAttribute("aria-controls")}`)
+          .setAttribute("aria-hidden", "false");
+        if (!allowToggle) {
+          target.setAttribute("aria-disabled", "true");
+        }
+      }
+      else if (allowToggle && isExpanded) {
+        target.setAttribute("aria-expanded", "false");
+        this.collapseSection(targetContent);
+        if (targetParent.classList.contains("hy-accordion__item__is-open")) {
+          targetParent.classList.remove("hy-accordion__item__is-open");
+        }
+        accordionContainer
+          .querySelector(`#${target.getAttribute("aria-controls")}`)
+          .setAttribute("aria-hidden", "true");
+      }
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+  expandPanelByAnchor(anchor) {
+    setTimeout(() => {
+      if (anchor.length > 0) {
+        anchor = anchor.substr(1);
+        let target = document.querySelectorAll(`[id=${anchor}]`)[0];
+        if (target && target.classList.contains("hy-accordion__button")) {
+          let targetParent = target.closest(".hy-accordion__item");
+          let targetContent = targetParent.querySelectorAll(".hy-accordion__content")[0];
+          this.expandSection(targetContent);
+          target.setAttribute("aria-expanded", "true");
+          targetParent.classList.add("hy-accordion__item__is-open");
+          const targetElementRect = target.getBoundingClientRect();
+          window.scrollTo({ top: window.scrollY + targetElementRect.top - 200, behavior: "smooth" });
+          const containerId = targetParent.parentElement.parentElement.id;
+          if (containerId.length > 0) {
+            let accordion = document.querySelectorAll(`#${containerId}`)[0];
+            accordion.querySelector(`#${target.getAttribute("aria-controls")}`).setAttribute("aria-hidden", "false");
+          }
+        }
+      }
+    }, 200);
+  }
+  collapseSection(element) {
+    element.style.height = 0 + "px";
+    element.setAttribute("data-collapsed", "true");
+    setTimeout(() => {
+      element.style.display = "none";
+    }, 250);
+  }
+  expandSection(element) {
+    element.style.display = "block";
+    element.style.height = element.scrollHeight + "px";
+    element.setAttribute("data-collapsed", "false");
+  }
+  render() {
+    const containerId = this.el.parentElement.id;
+    if (this.ready && containerId.length > 0) {
+      document.querySelectorAll(`#${containerId}`).forEach(function (accordion) {
+        if (accordion) {
+          accordion.querySelectorAll(".hy-accordion__button").forEach(function (trigger) {
+            trigger.addEventListener("focus", function () {
+              trigger.classList.add("focus");
+            });
+            trigger.addEventListener("blur", function () {
+              trigger.classList.remove("focus");
+            });
+          });
+        }
+      });
+    }
+    const classIsOpen = this.showOpen ? "hy-accordion__item__is-open" : "";
+    const classContentIsOpen = this.showOpen ? "open" : "";
+    const classAttributes = ["hy-accordion__item", this.variant, classIsOpen].join(" ");
+    const classInnerWrapper = ["hy-accordion__item--container", this.variant].join(" ");
+    const classHeadingAttributes = ["hy-accordion--heading", this.variant].join(" ");
+    const classContentAttributes = [
+      "hy-accordion__content",
+      `hy-accordion__content--${this.variant}`,
+      this.variant,
+      classContentIsOpen,
+    ].join(" ");
+    const classContentInnerWrapper = [
+      "hy-accordion__content--inner-wrapper",
+      `hy-accordion__content--inner-wrapper--${this.headerstyle}`,
+      `hy-accordion__content--inner-wrapper--${this.variant}`,
+    ].join(" ");
+    const titleAsId = this.accordiontitle.toLowerCase().replace(/\W/g, "-");
+    const accordionItemHref = "#" + titleAsId + "--title";
+    const ariaExpanded = this.showOpen ? "true" : "false";
+    const ariaHidden = this.showOpen ? "false" : "true";
+    const dataCollapsed = this.showOpen ? "false" : "true";
+    return (h("div", { class: classAttributes }, h("div", { class: classInnerWrapper }, h("h3", { class: classHeadingAttributes }, h("a", { href: accordionItemHref, class: "hy-accordion__link", tabindex: "-1" }, h("button", { "aria-expanded": ariaExpanded, "aria-controls": `${titleAsId}--content`, class: `hy-accordion__button hy-accordion__button--${this.headerstyle}`, id: `${titleAsId}--title` }, h("span", { class: "hy-accordion--heading__icon" }, h("hy-icon", { icon: "hy-icon-caret-down", size: 16 })), h("span", null, this.accordiontitle)))), h("div", { "aria-labelledBy": `${titleAsId}--title`, class: classContentAttributes, id: `${titleAsId}--content`, role: "region", "aria-hidden": ariaHidden, "data-collapsed": dataCollapsed, style: { display: "none" } }, h("div", { class: classContentInnerWrapper }, h("slot", null))))));
+  }
+  get el() { return this; }
+  static get style() { return accordionItemCss; }
+}, [4, "hy-accordion-item", {
+    "accordiontitle": [1],
+    "variant": [1],
+    "headerstyle": [1],
+    "showOpen": [4, "show-open"],
+    "ready": [32]
+  }, [[8, "hashchange", "onHashChange"], [0, "keydown", "handleKeyDown"], [0, "click", "handleClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-accordion-item", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-accordion-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AccordionItem);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { AccordionItem as A, defineCustomElement as d };

package/components/color-box.d.ts

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

package/components/color-box.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const colorBoxCss = ":host{display:block}";
+
+const ColorBox$1 = /*@__PURE__*/ proxyCustomElement(class ColorBox extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return colorBoxCss; }
+}, [1, "color-box"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["color-box"];
+  components.forEach(tagName => { switch (tagName) {
+    case "color-box":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ColorBox$1);
+      }
+      break;
+  } });
+}
+
+const ColorBox = ColorBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ColorBox, defineCustomElement };

package/components/cta-button.js

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as CtaLinkButtonVariants } from './utils.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const ctaButtonCss = ":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-cta-button-container{display:-webkit-box;display:-ms-flexbox;display:flex}.hy-cta-button{cursor:pointer;font-family:var(--main-font-family);font-weight:700;position:relative;text-decoration:none}.hy-cta-button.transparent-background,.hy-cta-button.black-background,.hy-cta-button.blue-background,.hy-cta-button.white-background,.hy-cta-button.hero-white,.hy-cta-button.hero-blue,.hy-cta-button.hero-black,.hy-cta-button.dark-blue-background{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;max-width:328px;padding:13px 16px}.hy-cta-button.transparent-background .text,.hy-cta-button.black-background .text,.hy-cta-button.blue-background .text,.hy-cta-button.white-background .text,.hy-cta-button.hero-white .text,.hy-cta-button.hero-blue .text,.hy-cta-button.hero-black .text,.hy-cta-button.dark-blue-background .text{font-size:1rem;line-height:18px;letter-spacing:-0.3px}.hy-cta-button.transparent-background .link-icon,.hy-cta-button.black-background .link-icon,.hy-cta-button.blue-background .link-icon,.hy-cta-button.white-background .link-icon,.hy-cta-button.hero-white .link-icon,.hy-cta-button.hero-blue .link-icon,.hy-cta-button.hero-black .link-icon,.hy-cta-button.dark-blue-background .link-icon{margin-left:8px}.hy-cta-button.transparent-background .link-icon svg,.hy-cta-button.black-background .link-icon svg,.hy-cta-button.blue-background .link-icon svg,.hy-cta-button.white-background .link-icon svg,.hy-cta-button.hero-white .link-icon svg,.hy-cta-button.hero-blue .link-icon svg,.hy-cta-button.hero-black .link-icon svg,.hy-cta-button.dark-blue-background .link-icon svg{height:16px;width:16px}.hy-cta-button.dark-blue-background{background-color:var(--brand-main-dark);border:4px solid var(--grayscale-white);color:var(--grayscale-white)}.hy-cta-button.dark-blue-background .link-icon svg{background-color:var(--brand-main-dark);fill:var(--grayscale-white)}.hy-cta-button.dark-blue-background .text{color:var(--grayscale-white)}.hy-cta-button.transparent-background{background-color:var(--grayscale-white);border:4px solid var(--grayscale-black);color:var(--grayscale-black)}.hy-cta-button.transparent-background .link-icon svg{background-color:var(--grayscale-white);fill:var(--grayscale-black)}.hy-cta-button.transparent-background .text{color:var(--grayscale-black)}.hy-cta-button.black-background{background-color:var(--grayscale-black);border:4px solid var(--grayscale-white);color:var(--grayscale-white)}.hy-cta-button.black-background .link-icon svg{background-color:var(--grayscale-black);fill:var(--grayscale-white)}.hy-cta-button.black-background .text{color:var(--grayscale-white)}.hy-cta-button.black-background:hover{background-color:var(--brand-main-active)}.hy-cta-button.black-background:hover .link-icon svg{background-color:var(--brand-main-active)}.hy-cta-button.black-background:focus{background-color:var(--brand-main)}.hy-cta-button.black-background:focus .link-icon svg{background-color:var(--brand-main)}.hy-cta-button.blue-background{background-color:var(--brand-main-light);border:4px solid var(--grayscale-white);color:var(--grayscale-white)}.hy-cta-button.blue-background .link-icon svg{background-color:var(--brand-main-light);fill:var(--grayscale-white)}.hy-cta-button.blue-background .text{color:var(--grayscale-white)}.hy-cta-button.blue-background:hover{background-color:var(--brand-main)}.hy-cta-button.blue-background:hover .link-icon svg{background-color:var(--brand-main)}.hy-cta-button.blue-background:focus{background-color:var(--brand-main-active)}.hy-cta-button.blue-background:focus .link-icon svg{background-color:var(--brand-main-active)}.hy-cta-button.white-background{background-color:var(--grayscale-white);border:4px solid var(--brand-main-light);color:var(--brand-main-light)}.hy-cta-button.white-background .link-icon svg{background-color:var(--grayscale-white);fill:var(--brand-main-light)}.hy-cta-button.white-background .text{color:var(--brand-main-light)}.hy-cta-button.white-background:hover{border-color:var(--brand-main-active)}.hy-cta-button.white-background:hover .text{color:var(--brand-main-active)}.hy-cta-button.white-background:hover .link-icon svg{fill:var(--brand-main-active)}.hy-cta-button.white-background:focus{border-color:var(--brand-main-active)}.hy-cta-button.white-background:focus .text{color:var(--brand-main-active)}.hy-cta-button.white-background:focus .link-icon svg{fill:var(--brand-main-active)}.hy-cta-button.hero-white{background-color:var(--brand-main-light);color:var(--grayscale-white)}.hy-cta-button.hero-white .link-icon svg{background-color:var(--brand-main-light);fill:var(--grayscale-white)}.hy-cta-button.hero-white .text{color:var(--grayscale-white)}.hy-cta-button.hero-white:hover{background-color:var(--brand-main-active)}.hy-cta-button.hero-white:hover .link-icon svg{background-color:var(--brand-main-active)}.hy-cta-button.hero-white:focus{background-color:var(--brand-main-active)}.hy-cta-button.hero-white:focus .link-icon svg{background-color:var(--brand-main-active)}.hy-cta-button.hero-black{background-color:var(--grayscale-black);border:4px solid var(--grayscale-white);color:var(--grayscale-white)}.hy-cta-button.hero-black .link-icon svg{background-color:var(--grayscale-black);fill:var(--grayscale-white)}.hy-cta-button.hero-black .text{color:var(--grayscale-white)}.hy-cta-button.hero-black:hover{border-color:var(--brand-main-soft)}.hy-cta-button.hero-black:hover .text{color:var(--brand-main-soft)}.hy-cta-button.hero-black:hover .link-icon svg{fill:var(--brand-main-soft)}.hy-cta-button.hero-black:focus{border-color:var(--brand-main-soft)}.hy-cta-button.hero-black:focus .text{color:var(--brand-main-soft)}.hy-cta-button.hero-black:focus .link-icon svg{fill:var(--brand-main-soft)}.hy-cta-button.hero-blue{background-color:var(--brand-main);border:4px solid var(--grayscale-white);color:var(--grayscale-white)}.hy-cta-button.hero-blue .link-icon svg{background-color:var(--brand-main);fill:var(--grayscale-white)}.hy-cta-button.hero-blue .text{color:var(--grayscale-white)}.hy-cta-button.hero-blue:hover{border-color:var(--brand-main-soft)}.hy-cta-button.hero-blue:hover .text{color:var(--brand-main-soft)}.hy-cta-button.hero-blue:hover .link-icon svg{fill:var(--brand-main-soft)}.hy-cta-button.hero-blue:focus{border-color:var(--brand-main-soft)}.hy-cta-button.hero-blue:focus .text{color:var(--brand-main-soft)}.hy-cta-button.hero-blue:focus .link-icon svg{fill:var(--brand-main-soft)}";
+
+const CtaButton = /*@__PURE__*/ proxyCustomElement(class CtaButton extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.variant = CtaLinkButtonVariants.onBlueBkgd;
+    this.linkContent = "";
+    this.typeButton = false;
+    this.url = undefined;
+    this.scLabel = undefined;
+    this.isExternal = false;
+    this.headerstyle = "common";
+  }
+  render() {
+    const classAttributes = ["hy-cta-button", this.variant, this.headerstyle].join(" ");
+    const containerClassAttributes = ["hy-cta-button-container"].join(" ");
+    const textClassAttributes = ["text"].join(" ");
+    const iconClassAttributes = ["link-icon"].join(" ");
+    const target = this.isExternal ? "_blank" : "_self";
+    return (h("span", { class: containerClassAttributes }, !this.typeButton ? (h("a", { "aria-label": this.scLabel, class: classAttributes, href: this.url, target: target }, h("span", { class: textClassAttributes }, this.linkContent.length === 0 ? h("slot", null) : this.linkContent), h("span", { class: iconClassAttributes }, h("hy-icon", { icon: "hy-icon-arrow-right", size: 48 })))) : (h("button", { "aria-label": this.scLabel, class: classAttributes }, h("span", { class: textClassAttributes }, this.linkContent.length === 0 ? h("slot", null) : this.linkContent), h("span", { class: iconClassAttributes }, h("hy-icon", { icon: "hy-icon-arrow-right", size: 48 }))))));
+  }
+  get el() { return this; }
+  static get style() { return ctaButtonCss; }
+}, [4, "hy-cta-button", {
+    "variant": [1],
+    "linkContent": [1, "link-content"],
+    "typeButton": [4, "type-button"],
+    "url": [1],
+    "scLabel": [1, "sc-label"],
+    "isExternal": [4, "is-external"],
+    "headerstyle": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-cta-button", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-cta-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CtaButton);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { CtaButton as C, defineCustomElement as d };

package/components/cta-link.js

@@ -0,0 +1,50 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { C as CtaLinkVariants } from './utils.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const ctaLinkCss = ":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-cta-link{font-weight:600;font-size:1rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);display:inline-grid;font-family:var(--main-font-family);gap:16px;grid-auto-flow:column;letter-spacing:-0.5px;overflow:hidden;text-decoration:none}.hy-cta-link:hover,.hy-cta-link:focus{text-decoration:underline}.hy-cta-link:hover .hy-cta-link__icon,.hy-cta-link:focus .hy-cta-link__icon{background-color:var(--brand-main-active)}.hy-cta-link__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main-light);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px}.hy-cta-link__icon svg{fill:var(--grayscale-white)}.hy-cta-link__icon--external svg{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}";
+
+const CtaLink = /*@__PURE__*/ proxyCustomElement(class CtaLink extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.variant = CtaLinkVariants.default;
+    this.linkContent = "";
+    this.url = undefined;
+    this.scLabel = undefined;
+    this.isExternal = false;
+  }
+  render() {
+    const iconClassAttributes = ["hy-cta-link__icon", this.isExternal && "hy-cta-link__icon--external"].join(" ");
+    const target = this.isExternal ? "_blank" : "_self";
+    return (h("a", { "aria-label": this.scLabel, href: this.url, target: target, class: `hy-cta-link hy-cta-link--${this.variant}` }, this.variant == CtaLinkVariants.linkList && (h("span", { class: iconClassAttributes }, h("hy-icon", { icon: "hy-icon-arrow-to-right", size: 24 }))), h("span", null, this.linkContent), this.variant == CtaLinkVariants.default && (h("span", { class: iconClassAttributes }, h("hy-icon", { icon: "hy-icon-arrow-to-right", size: 24 })))));
+  }
+  get el() { return this; }
+  static get style() { return ctaLinkCss; }
+}, [0, "hy-cta-link", {
+    "variant": [1],
+    "linkContent": [1, "link-content"],
+    "url": [1],
+    "scLabel": [1, "sc-label"],
+    "isExternal": [4, "is-external"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-cta-link", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-cta-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CtaLink);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { CtaLink as C, defineCustomElement as d };

package/components/custom-elements.d.ts

@@ -0,0 +1,2 @@
+export * from "./index";
+export * from "../dist/types/components";