@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

package/dist/esm/hy-accordion-container_2.entry.js

@@ -0,0 +1,238 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f84f2a7d.js';
+import { A as AccordionVariants } from './utils-7438924c.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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" })));
+  }
+};
+AccordionContainer.style = accordionContainerCss;
+
+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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+};
+AccordionItem.style = accordionItemCss;
+
+export { AccordionContainer as hy_accordion_container, AccordionItem as hy_accordion_item };
+
+//# sourceMappingURL=hy-accordion-container_2.entry.js.map

package/dist/esm/hy-accordion-container_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-accordion-container.hy-accordion-item.entry.js","mappings":"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","names":[],"sources":["./src/components/hy-accordion-container/accordion-container.scss?tag=hy-accordion-container","./src/components/hy-accordion-container/accordion-container.tsx","./src/components/hy-accordion-item/accordion-item.scss?tag=hy-accordion-item","./src/components/hy-accordion-item/accordion-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-accordion-container {\n  width: 100%;\n}\n","import {Component, Prop, h, Host} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-accordion-container\",\n  styleUrl: \"accordion-container.scss\",\n  shadow: false,\n})\nexport class AccordionContainer {\n  @Prop() accordionid?: string;\n\n  /*\n  * data-allow-toggle\n    Allow for each toggle to both open and close individually\n\n  data-allow-multiple\n    Allow for multiple accordion sections to be expanded at the same time.\n    Assumes data-allow-toggle otherwise you would not be able to close any of the accordions\n  */\n\n  render() {\n    const classAttributes = [\"hy-accordion-container\", \"js-hy-accordion\"];\n    const id = this.accordionid.toLowerCase().replace(/\\W/g, \"-\");\n    return (\n      <Host>\n        <div id={id} class={classAttributes.join(\" \")} data-allow-multiple=\"true\" data-allow-toggle=\"true\">\n          <slot></slot>\n        </div>\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.hy-accordion__item {\n  margin-bottom: 12px;\n\n  &__is-open {\n    border: 1px solid var(--grayscale-dark);\n\n    .hy-accordion--heading {\n      margin: 0 auto;\n\n      .hy-accordion--heading__icon {\n        transform: rotateX(180deg);\n      }\n    }\n  }\n}\n\n.hy-accordion__item.mini {\n  margin-bottom: 1rem;\n  margin-top: 1rem;\n}\n.hy-accordion__item__is-open.mini {\n  margin-bottom: 0;\n  margin-top: 0;\n\n  .hy-accordion__item--container {\n    border-bottom: 1px solid var(--grayscale-medium-dark);\n    border-top: 1px solid var(--grayscale-medium-dark);\n    padding-top: 16px;\n    padding-bottom: 32px;\n    margin-top: -1px;\n    transition: padding 0.5s ease-in-out;\n\n    @include breakpoint($narrow) {\n      padding-top: 28px;\n      padding-bottom: 30px;\n    }\n    @include breakpoint($wide) {\n      padding-top: 32px;\n      padding-bottom: 40px;\n    }\n  }\n}\n\n.hy-accordion__item.hy-accordion__item__is-open.mini {\n  background-color: var(--grayscale-white);\n  border: none;\n  box-shadow: 0 -10px 10px -10px rgba(0, 49, 70, 0.05);\n}\n\n.hy-accordion--heading {\n  justify-content: flex-start;\n  letter-spacing: -0.69px;\n  line-height: 28px;\n  margin: 0 auto;\n  transition: all 0.25s ease-in-out;\n  width: 100%;\n\n  .hy-accordion__link {\n    text-decoration: none;\n    &:hover {\n      text-decoration: none;\n    }\n  }\n\n  .hy-accordion__button {\n    @include font-size(18px, 22px);\n    @include font-weight($bold);\n    align-items: flex-start;\n    background-color: var(--grayscale-background-box);\n    border: none;\n    color: var(--brand-main-nearly-black);\n    display: flex;\n    flex-direction: row;\n    font-family: var(--main-font-family);\n    height: 100%;\n    justify-content: flex-start;\n    letter-spacing: -0.45px;\n    padding: 13px 20px 13px 16px;\n    transition: all 0.35s ease-in;\n    width: 100%;\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    @include breakpoint($narrow) {\n      padding: 1rem 2rem 1rem 1.25rem;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(20px, 24px);\n      letter-spacing: -0.5px;\n    }\n\n    &--large {\n      @include breakpoint($extrawide) {\n        @include font-size(20px, 24px);\n        letter-spacing: -0.5px;\n      }\n\n      .hy-accordion--heading__icon svg {\n        @include breakpoint($extrawide) {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    span {\n      text-align: left;\n    }\n\n    // When accordion item is open.\n    &[aria-expanded=\"true\"] {\n      background: none;\n      position: relative;\n\n      &:after {\n        background-color: var(--grayscale-medium-dark);\n        bottom: 0;\n        content: \"\";\n        height: 1px;\n        left: 16px;\n        position: absolute;\n        right: 20px;\n      }\n    }\n\n    * {\n      pointer-events: none;\n    }\n  }\n\n  .hy-accordion--heading__icon {\n    align-items: center;\n    display: inline-flex;\n    height: 22px; // Same as text line-height.\n    margin-right: 8px;\n    z-index: 0;\n\n    svg {\n      fill: var(--brand-main);\n\n      @include breakpoint($narrow) {\n        height: 18px;\n        width: 18px;\n      }\n\n      @include breakpoint($xlarge) {\n        height: 20px;\n        width: 20px;\n      }\n    }\n  }\n}\n\n.hy-accordion--heading.mini {\n  // accordion clickable header\n  .hy-accordion__button {\n    @include font-size(18px, 22px);\n    background-color: var(--grayscale-white);\n    color: var(--link-blue);\n    letter-spacing: -0.56px;\n    padding: 0;\n\n    @include breakpoint($narrow) {\n      @include font-size(22px, 28px);\n      letter-spacing: -0.69px;\n      padding: 0;\n    }\n\n    &[aria-expanded=\"true\"] {\n      color: var(--grayscale-black);\n      margin-bottom: 20px;\n\n      @include breakpoint($narrow) {\n        margin-bottom: 28px;\n      }\n\n      @include breakpoint($wide) {\n        margin-bottom: 32px;\n      }\n    }\n  }\n\n  //accordion arrow\n  .hy-accordion--heading__icon {\n    margin-right: 0.5rem;\n    z-index: 0;\n\n    @include breakpoint($narrow) {\n      margin-right: 10px;\n    }\n\n    svg {\n      fill: var(--brand-main-light);\n      height: 14px;\n      width: 14px;\n      @include breakpoint($narrow) {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n}\n\n.hy-accordion__content {\n  display: block;\n  height: 0;\n  padding: 0;\n  overflow: hidden;\n  transition: all 0.25s ease-in-out;\n\n  &--inner-wrapper {\n    display: block;\n    padding: 16px 12px;\n\n    @include breakpoint($narrow) {\n      padding: 15px 16px;\n    }\n\n    @include breakpoint($wide) {\n      padding: 16px;\n    }\n\n    @include breakpoint($extrawide) {\n      // without sidebar\n      &--large {\n        padding: 24px 20px;\n      }\n    }\n\n    @include breakpoint($xlarge) {\n      padding: 24px 20px;\n    }\n\n    &--mini {\n      padding: 0;\n      .course-heading {\n        h4 {\n          padding-top: 0 !important;\n        }\n      }\n    }\n  }\n}\n","import {Component, Listen, Prop, State, Element, h} from \"@stencil/core\";\nimport {AccordionVariants} from \"../../utils/utils\";\n\nlet keys = {\n  enter: \"Enter\", //13\n  tab: \"Tab\", //9\n  pageUp: \"PageUp\", //33\n  pageDown: \"PageDown\", //34\n  arrowUp: \"ArrowUp\", // 38\n  arrowDown: \"ArrowDown\", //40\n  home: \"Home\", //36\n  end: \"End\", //35\n};\n\n@Component({\n  tag: \"hy-accordion-item\",\n  styleUrl: \"accordion-item.scss\",\n  shadow: false,\n})\nexport class AccordionItem {\n  @Element() el: HTMLElement;\n  @Prop() accordiontitle?: string;\n  @Prop() variant: AccordionVariants = AccordionVariants.default;\n  @Prop() headerstyle: string = \"common\";\n  @Prop() showOpen: boolean = false;\n  @State() ready: boolean = false;\n\n  componentDidLoad() {\n    this.ready = true;\n\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  }\n\n  componentDidRender() {\n    if (window.location.hash) {\n      this.expandPanelByAnchor(window.location.hash);\n    }\n\n    document.querySelectorAll(\".hy-accordion__content\").forEach(function (accordion) {\n      let showOpen = accordion.classList.contains(\"open\");\n      let element = accordion as HTMLElement;\n      if (showOpen) {\n        element.style.display = \"block\";\n        element.style.height = element.scrollHeight + \"px\";\n      } else {\n        element.style.height = 0 + \"px\";\n        element.style.display = \"none\";\n      }\n    });\n  }\n\n  @Listen(\"hashchange\", {target: \"window\"})\n  onHashChange() {\n    if (window.location.hash) {\n      this.expandPanelByAnchor(window.location.hash);\n    }\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent) {\n    const containerId = this.el.parentElement.id;\n    let accordion = document.querySelectorAll(`#${containerId}`)[0];\n\n    const triggers = Array.prototype.slice.call(accordion.querySelectorAll(\".hy-accordion__button\"));\n    let target = event.target as HTMLButtonElement;\n    const key = event.code;\n\n    const ctrlModifier = event.ctrlKey && [keys.pageDown, keys.pageUp].includes(key); //key.match(/33|34/);\n\n    if (target.classList.contains(\"hy-accordion__button\")) {\n      // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations\n      if ([keys.arrowDown, keys.arrowUp].includes(key) || ctrlModifier) {\n        const index = triggers.indexOf(target);\n        const direction = [keys.arrowDown, keys.pageDown].includes(key) ? 1 : -1;\n        const length = triggers.length;\n        const newIndex = (index + length + direction) % length;\n        triggers[newIndex].focus();\n\n        event.preventDefault();\n      } else if ([keys.home, keys.end].includes(key)) {\n        switch (key) {\n          // Go to first accordion\n          case keys.home:\n            triggers[0].focus();\n            break;\n          // Go to last accordion\n          case keys.end:\n            triggers[triggers.length - 1].focus();\n            break;\n        }\n        event.preventDefault();\n      }\n    }\n  }\n\n  @Listen(\"click\")\n  handleClick(event) {\n    const target = event.target as HTMLTextAreaElement;\n    const accordionContainer = this.el.parentElement;\n    const allowMultiple = accordionContainer.hasAttribute(\"data-allow-multiple\");\n    const allowToggle = allowMultiple ? allowMultiple : accordionContainer.hasAttribute(\"data-allow-toggle\");\n\n    if (target && target.tagName.toLowerCase() === \"button\") {\n      let targetParent = target.closest(\".hy-accordion__item\");\n      let targetContent = targetParent.getElementsByClassName(\"hy-accordion__content\")[0];\n      const isExpanded = target.getAttribute(\"aria-expanded\") === \"true\";\n      const activeButtonElement = accordionContainer.querySelector('[aria-expanded=\"true\"]');\n\n      if (!allowMultiple && activeButtonElement && activeButtonElement !== target) {\n        activeButtonElement.setAttribute(\"aria-expanded\", \"false\");\n        this.collapseSection(targetContent);\n        if (targetParent.classList.contains(\"hy-accordion__item__is-open\")) {\n          targetParent.classList.remove(\"hy-accordion__item__is-open\");\n        }\n\n        accordionContainer\n          .querySelector(`#${activeButtonElement.getAttribute(\"aria-controls\")}`)\n          .setAttribute(\"aria-hidden\", \"true\");\n\n        if (!allowToggle) {\n          activeButtonElement.removeAttribute(\"aria-disabled\");\n        }\n      }\n\n      if (!isExpanded) {\n        this.expandSection(targetContent);\n        target.setAttribute(\"aria-expanded\", \"true\");\n        targetParent.classList.add(\"hy-accordion__item__is-open\");\n\n        accordionContainer\n          .querySelector(`#${target.getAttribute(\"aria-controls\")}`)\n          .setAttribute(\"aria-hidden\", \"false\");\n\n        if (!allowToggle) {\n          target.setAttribute(\"aria-disabled\", \"true\");\n        }\n      } else if (allowToggle && isExpanded) {\n        target.setAttribute(\"aria-expanded\", \"false\");\n\n        this.collapseSection(targetContent);\n\n        if (targetParent.classList.contains(\"hy-accordion__item__is-open\")) {\n          targetParent.classList.remove(\"hy-accordion__item__is-open\");\n        }\n\n        accordionContainer\n          .querySelector(`#${target.getAttribute(\"aria-controls\")}`)\n          .setAttribute(\"aria-hidden\", \"true\");\n      }\n\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  expandPanelByAnchor(anchor) {\n    setTimeout(() => {\n      if (anchor.length > 0) {\n        anchor = anchor.substr(1);\n        let target = document.querySelectorAll(`[id=${anchor}]`)[0];\n        if (target && target.classList.contains(\"hy-accordion__button\")) {\n          let targetParent = target.closest(\".hy-accordion__item\");\n\n          let targetContent = targetParent.querySelectorAll(\".hy-accordion__content\")[0];\n\n          this.expandSection(targetContent);\n          target.setAttribute(\"aria-expanded\", \"true\");\n          targetParent.classList.add(\"hy-accordion__item__is-open\");\n\n          const targetElementRect = target.getBoundingClientRect();\n          window.scrollTo({top: window.scrollY + targetElementRect.top - 200, behavior: \"smooth\"});\n\n          const containerId = targetParent.parentElement.parentElement.id;\n\n          if (containerId.length > 0) {\n            let accordion = document.querySelectorAll(`#${containerId}`)[0];\n            accordion.querySelector(`#${target.getAttribute(\"aria-controls\")}`).setAttribute(\"aria-hidden\", \"false\");\n          }\n        }\n      }\n    }, 200);\n  }\n\n  collapseSection(element) {\n    element.style.height = 0 + \"px\";\n    element.setAttribute(\"data-collapsed\", \"true\");\n    setTimeout(() => {\n      element.style.display = \"none\";\n    }, 250);\n  }\n\n  expandSection(element) {\n    element.style.display = \"block\";\n    element.style.height = element.scrollHeight + \"px\";\n    element.setAttribute(\"data-collapsed\", \"false\");\n  }\n\n  render() {\n    const containerId = this.el.parentElement.id;\n\n    if (this.ready && containerId.length > 0) {\n      document.querySelectorAll(`#${containerId}`).forEach(function (accordion) {\n        if (accordion) {\n          accordion.querySelectorAll(\".hy-accordion__button\").forEach(function (trigger) {\n            trigger.addEventListener(\"focus\", function () {\n              trigger.classList.add(\"focus\");\n            });\n            trigger.addEventListener(\"blur\", function () {\n              trigger.classList.remove(\"focus\");\n            });\n          });\n        }\n      });\n    }\n\n    const classIsOpen = this.showOpen ? \"hy-accordion__item__is-open\" : \"\";\n    const classContentIsOpen = this.showOpen ? \"open\" : \"\";\n    const classAttributes = [\"hy-accordion__item\", this.variant, classIsOpen].join(\" \");\n    const classInnerWrapper = [\"hy-accordion__item--container\", this.variant].join(\" \");\n    const classHeadingAttributes = [\"hy-accordion--heading\", this.variant].join(\" \");\n    const classContentAttributes = [\n      \"hy-accordion__content\",\n      `hy-accordion__content--${this.variant}`,\n      this.variant,\n      classContentIsOpen,\n    ].join(\" \");\n    const classContentInnerWrapper = [\n      \"hy-accordion__content--inner-wrapper\",\n      `hy-accordion__content--inner-wrapper--${this.headerstyle}`,\n      `hy-accordion__content--inner-wrapper--${this.variant}`,\n    ].join(\" \");\n\n    const titleAsId = this.accordiontitle.toLowerCase().replace(/\\W/g, \"-\");\n    const accordionItemHref = \"#\" + titleAsId + \"--title\";\n\n    const ariaExpanded = this.showOpen ? \"true\" : \"false\";\n    const ariaHidden = this.showOpen ? \"false\" : \"true\";\n    const dataCollapsed = this.showOpen ? \"false\" : \"true\";\n\n    return (\n      <div class={classAttributes}>\n        <div class={classInnerWrapper}>\n          <h3 class={classHeadingAttributes}>\n            <a href={accordionItemHref} class=\"hy-accordion__link\" tabindex=\"-1\">\n              <button\n                aria-expanded={ariaExpanded}\n                aria-controls={`${titleAsId}--content`}\n                class={`hy-accordion__button hy-accordion__button--${this.headerstyle}`}\n                id={`${titleAsId}--title`}\n              >\n                <span class=\"hy-accordion--heading__icon\">\n                  <hy-icon icon={\"hy-icon-caret-down\"} size={16} />\n                </span>\n                <span>{this.accordiontitle}</span>\n              </button>\n            </a>\n          </h3>\n          <div\n            aria-labelledBy={`${titleAsId}--title`}\n            class={classContentAttributes}\n            id={`${titleAsId}--content`}\n            role=\"region\"\n            aria-hidden={ariaHidden}\n            data-collapsed={dataCollapsed}\n            style={{display: \"none\"}}\n          >\n            <div class={classContentInnerWrapper}>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hy-adjacent-image-text.entry.js

@@ -0,0 +1,57 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f84f2a7d.js';
+import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
+
+const adjacentImageTextCss = ":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-adjacent-image-text{background:var(--grayscale-background-box);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}@media (min-width: 30rem){.hy-adjacent-image-text{background:transparent}}@media (min-width: 60rem){.hy-adjacent-image-text{background:var(--grayscale-background-box);-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-adjacent-image-text__image-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;margin-bottom:0;min-height:10rem;position:relative;padding-bottom:32px}@media (min-width: 30rem){.hy-adjacent-image-text__image-container{padding-bottom:0}}@media (min-width: 60rem){.hy-adjacent-image-text__image-container{-ms-flex-preferred-size:50%;flex-basis:50%;margin:0 calc(var(--gutter-wide) * -1) 0 0;z-index:1}}@media (min-width: 75.0625rem){.hy-adjacent-image-text__image-container{margin:0 calc(var(--gutter-extrawide) * -1) 0 0}}.hy-adjacent-image-text__image-container img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}@media (min-width: 30rem){.hy-adjacent-image-text__image-container img{max-height:420px;min-height:160px}}@media (min-width: 60rem){.hy-adjacent-image-text__image-container img{max-height:100%}}.hy-adjacent-image-text__text-container{background:var(--grayscale-background-box);border-image:none;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-border-image:none;-moz-border-image:none;-o-border-image:none}@media (min-width: 30rem){.hy-adjacent-image-text__text-container{border-left:1px solid transparent;border-image:-webkit-gradient(linear, left top, left bottom, from(var(--grayscale-medium-dark)), to(rgba(0, 0, 0, 0))) 1 0 0 100%;border-image:linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;margin-left:66px;margin-top:-63px;padding-top:38px;position:relative;z-index:98;-moz-border-image:linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;-o-border-image:linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%}}@media (min-width: 60rem){.hy-adjacent-image-text__text-container{border-image:none;border-left:none;-ms-flex-preferred-size:50%;flex-basis:50%;margin-left:0;margin-top:0;padding-top:0;z-index:0;-webkit-border-image:none;-moz-border-image:none;-o-border-image:none}}.hy-adjacent-image-text__text-container__links-wrapper{padding-left:1rem}@media (min-width: 30rem){.hy-adjacent-image-text__text-container__links-wrapper{padding-left:50px}}@media (min-width: 60rem){.hy-adjacent-image-text__text-container__links-wrapper{margin:0 0 0 14%;padding:0}}.hy-adjacent-image-text__text-container__info-wrapper{padding-left:0;padding-right:0}@media (min-width: 30rem){.hy-adjacent-image-text__text-container__info-wrapper{padding-left:50px}}@media (min-width: 60rem){.hy-adjacent-image-text__text-container__info-wrapper{margin:0 7% 0 14%;padding:0}}.hy-adjacent-image-text__text-container__title{font-size:1.375rem;line-height:28px;font-weight:700;color:var(--brand-main-nearly-black);font-family:var(--main-font-family);letter-spacing:-0.69px;margin-top:32px;padding:0 1rem}@media (min-width: 30rem){.hy-adjacent-image-text__text-container__title{font-size:2rem;line-height:40px;letter-spacing:-1px;margin-top:41px;padding:0}}.hy-adjacent-image-text__text-container__description{font-size:0.9375rem;line-height:22px;font-weight:400;color:var(--grayscale-dark);font-family:var(--main-font-family);margin:20px 0 32px 0;padding:0 1rem}@media (min-width: 30rem){.hy-adjacent-image-text__text-container__description{font-size:1rem;line-height:24px;margin:20px 0 61px 0;padding:0}}@media (min-width: 1601px){.hy-adjacent-image-text__text-container__description{font-size:1.0625rem;line-height:26px;margin-bottom:40px}}@media (min-width: 75.0625rem){.hy-adjacent-image-text__text-container__description__large{font-size:1.0625rem;line-height:26px}}.hy-adjacent-image-text__text-container__link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-bottom:12px;margin-right:-6px}.hy-adjacent-image-text::after{content:\"\";clear:both}";
+
+const AdjacentImageText = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.headerstyle = "default";
+    this.imageUrl = null;
+    this.imageAlt = "";
+    this.disableLazy = false;
+    this.textTitle = undefined;
+    this.textDescription = null;
+    this.mainUrl = undefined;
+    this.mainUrlTitle = undefined;
+    this.mainUrlAriaLabel = undefined;
+    this.mainUrlIsExternal = false;
+    this.mainUrl2 = undefined;
+    this.mainUrlTitle2 = undefined;
+    this.mainUrlAriaLabel2 = undefined;
+    this.mainUrlIsExternal2 = false;
+    this.sourceSet = undefined;
+  }
+  async componentWillLoad() {
+    this._sourceSet = await jsonParserWorker(this.sourceSet);
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    const classAttributes = ["hy-adjacent-image-text", `hy-adjacent-image-text__${this.headerstyle}`].join(" ");
+    const contentClassAttributes = [
+      "hy-adjacent-image-text__text-container",
+      "hy-adjacent-image-text__text-container--left",
+    ].join(" ");
+    const imageLeftClassAttributes = ["hy-adjacent-image-text__image-container"].join(" ");
+    const aspectRatioWidth = 6;
+    const aspectRatioHeight = 4;
+    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
+    const aspectRatio = {
+      "--aspectRatio": `${aspect}%`,
+    };
+    return (h(Host, null, h("div", { class: classAttributes }, h("div", { class: imageLeftClassAttributes, style: aspectRatio }, 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", alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl }))) : (h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl }))), h("div", { class: contentClassAttributes }, h("div", { class: "hy-adjacent-image-text__text-container__info-wrapper" }, h("div", { class: "hy-adjacent-image-text__text-container__title" }, this.textTitle), h("p", { class: `hy-adjacent-image-text__text-container__description hy-adjacent-image-text__text-container__description__${this.headerstyle}` }, this.textDescription)), h("div", { class: "hy-adjacent-image-text__text-container__links-wrapper" }, this.mainUrl && (h("div", { class: "hy-adjacent-image-text__text-container__link" }, h("hy-cta-link", { "link-content": this.mainUrlTitle, "sc-label": this.mainUrlAriaLabel, url: this.mainUrl, "is-external": this.mainUrlIsExternal }))), this.mainUrl2 && (h("div", { class: "hy-adjacent-image-text__text-container__link" }, h("hy-cta-link", { "link-content": this.mainUrlTitle2, "sc-label": this.mainUrlAriaLabel2, url: this.mainUrl2, "is-external": this.mainUrlIsExternal2 })))))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+  }
+  get el() { return getElement(this); }
+};
+AdjacentImageText.style = adjacentImageTextCss;
+
+export { AdjacentImageText as hy_adjacent_image_text };
+
+//# sourceMappingURL=hy-adjacent-image-text.entry.js.map

package/dist/esm/hy-adjacent-image-text.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-adjacent-image-text.entry.js","mappings":"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","names":[],"sources":["./src/components/hy-adjacent-image-text/adjacent-image-text.scss?tag=hy-adjacent-image-text","./src/components/hy-adjacent-image-text/adjacent-image-text.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n$margin-mobile: 16px;\n$margin-narrow: 32px;\n\n.hy-adjacent-image-text {\n  background: var(--grayscale-background-box);\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  @include breakpoint($narrow) {\n    background: transparent;\n  }\n\n  @include breakpoint($wide) {\n    background: var(--grayscale-background-box);\n    flex-direction: row;\n  }\n}\n\n.hy-adjacent-image-text__image-container {\n  display: flex;\n  flex: 1;\n  justify-content: stretch;\n  margin-bottom: 0;\n  min-height: 10rem;\n  position: relative;\n  padding-bottom: $margin-narrow;\n\n  @include breakpoint($narrow) {\n    padding-bottom: 0;\n  }\n\n  @include breakpoint($wide) {\n    flex-basis: 50%;\n    margin: 0 calc(#{var(--gutter-wide)} * -1) 0 0;\n    z-index: 1;\n  }\n\n  @include breakpoint($extrawide) {\n    margin: 0 calc(#{var(--gutter-extrawide)} * -1) 0 0;\n  }\n\n  img {\n    height: 100%;\n    object-fit: cover;\n    width: 100%;\n\n    @include breakpoint($narrow) {\n      max-height: 420px;\n      min-height: 160px;\n    }\n\n    @include breakpoint($wide) {\n      max-height: 100%;\n    }\n  }\n}\n\n.hy-adjacent-image-text__text-container {\n  background: var(--grayscale-background-box);\n  border-image: none;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  -webkit-border-image: none;\n  -moz-border-image: none;\n  -o-border-image: none;\n\n  @include breakpoint($narrow) {\n    border-left: 1px solid transparent;\n    border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;\n    margin-left: 66px;\n    margin-top: -63px;\n    padding-top: 38px;\n    position: relative;\n    z-index: 98;\n    -webkit-border-image: -webkit-linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;\n    -moz-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;\n    -o-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;\n  }\n\n  @include breakpoint($wide) {\n    border-image: none;\n    border-left: none;\n    flex-basis: 50%;\n    margin-left: 0;\n    margin-top: 0;\n    padding-top: 0;\n    z-index: 0;\n    -webkit-border-image: none;\n    -moz-border-image: none;\n    -o-border-image: none;\n  }\n}\n\n.hy-adjacent-image-text__text-container__links-wrapper {\n  padding-left: 1rem;\n  @include breakpoint($narrow) {\n    padding-left: 50px;\n  }\n  @include breakpoint($wide) {\n    margin: 0 0 0 14%;\n    padding: 0;\n  }\n}\n\n.hy-adjacent-image-text__text-container__info-wrapper {\n  padding-left: 0;\n  padding-right: 0;\n\n  @include breakpoint($narrow) {\n    padding-left: 50px;\n  }\n\n  @include breakpoint($wide) {\n    margin: 0 7% 0 14%;\n    padding: 0;\n  }\n}\n\n.hy-adjacent-image-text__text-container__title {\n  @include font-size(22px, 28px);\n  @include font-weight($bold);\n  color: var(--brand-main-nearly-black);\n  font-family: var(--main-font-family);\n  letter-spacing: -0.69px;\n  margin-top: 32px;\n  padding: 0 1rem;\n\n  @include breakpoint($narrow) {\n    @include font-size(32px, 40px);\n    letter-spacing: -1px;\n    margin-top: 41px;\n    padding: 0;\n  }\n}\n\n.hy-adjacent-image-text__text-container__description {\n  @include font-size(15px, 22px);\n  @include font-weight($regular);\n  color: var(--grayscale-dark);\n  font-family: var(--main-font-family);\n  margin: 20px 0 32px 0;\n  padding: 0 1rem;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 24px);\n    margin: 20px 0 61px 0;\n    padding: 0;\n  }\n\n  @include breakpoint($xlarge) {\n    @include font-size(17px, 26px);\n    margin-bottom: 40px;\n  }\n\n  &__large {\n    @include breakpoint($extrawide) {\n      @include font-size(17px, 26px);\n    }\n  }\n}\n\n.hy-adjacent-image-text__text-container__link {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 12px;\n  margin-right: -6px;\n}\n\n.hy-adjacent-image-text::after {\n  content: \"\";\n  clear: both;\n}\n","export interface ImageSrcSet {\n  src: any;\n  media: string;\n  type: string;\n  sizes: string | null;\n}\n\nimport {Component, ComponentInterface, Prop, h, Host, Element} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n  tag: \"hy-adjacent-image-text\",\n  styleUrl: \"adjacent-image-text.scss\",\n  shadow: false,\n})\nexport class AdjacentImageText implements ComponentInterface {\n  @Element() el: HTMLElement;\n  @Prop() headerstyle: string = \"default\";\n  @Prop() imageUrl: string = null;\n  @Prop() imageAlt: string = \"\";\n  @Prop() disableLazy: boolean = false;\n  @Prop() textTitle?: string;\n  @Prop() textDescription: string = null;\n\n  @Prop() mainUrl?: string;\n  @Prop() mainUrlTitle?: string;\n  @Prop() mainUrlAriaLabel?: string;\n  @Prop() mainUrlIsExternal: boolean = false;\n\n  @Prop() mainUrl2?: string;\n  @Prop() mainUrlTitle2?: string;\n  @Prop() mainUrlAriaLabel2?: string;\n  @Prop() mainUrlIsExternal2: boolean = false;\n\n  private _sourceSet: ImageSrcSet[];\n  @Prop() sourceSet: ImageSrcSet[] | string;\n\n  async componentWillLoad() {\n    this._sourceSet = await jsonParserWorker(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  }\n\n  render() {\n    const classAttributes = [\"hy-adjacent-image-text\", `hy-adjacent-image-text__${this.headerstyle}`].join(\" \");\n    const contentClassAttributes = [\n      \"hy-adjacent-image-text__text-container\",\n      \"hy-adjacent-image-text__text-container--left\",\n    ].join(\" \");\n\n    const imageLeftClassAttributes = [\"hy-adjacent-image-text__image-container\"].join(\" \");\n\n    const aspectRatioWidth = 6;\n    const aspectRatioHeight = 4;\n    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n    const aspectRatio = {\n      \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n    };\n\n    return (\n      <Host>\n        <div class={classAttributes}>\n          <div class={imageLeftClassAttributes} style={aspectRatio}>\n            {this._sourceSet ? (\n              <picture>\n                {this._sourceSet.map((item) => (\n                  <source srcSet={item.src} media={item.media} type={item.type} sizes={item.sizes ? item.sizes : \"\"} />\n                ))}\n                <img\n                  loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                  alt={this.imageAlt}\n                  class=\"hy-image__image\"\n                  src={this.imageUrl}\n                />\n              </picture>\n            ) : (\n              <img\n                loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                alt={this.imageAlt}\n                class=\"hy-image__image\"\n                src={this.imageUrl}\n              />\n            )}\n          </div>\n          <div class={contentClassAttributes}>\n            <div class=\"hy-adjacent-image-text__text-container__info-wrapper\">\n              <div class=\"hy-adjacent-image-text__text-container__title\">{this.textTitle}</div>\n              <p\n                class={`hy-adjacent-image-text__text-container__description hy-adjacent-image-text__text-container__description__${this.headerstyle}`}\n              >\n                {this.textDescription}\n              </p>\n            </div>\n            <div class=\"hy-adjacent-image-text__text-container__links-wrapper\">\n              {this.mainUrl && (\n                <div class=\"hy-adjacent-image-text__text-container__link\">\n                  <hy-cta-link\n                    link-content={this.mainUrlTitle}\n                    sc-label={this.mainUrlAriaLabel}\n                    url={this.mainUrl}\n                    is-external={this.mainUrlIsExternal}\n                  />\n                </div>\n              )}\n              {this.mainUrl2 && (\n                <div class=\"hy-adjacent-image-text__text-container__link\">\n                  <hy-cta-link\n                    link-content={this.mainUrlTitle2}\n                    sc-label={this.mainUrlAriaLabel2}\n                    url={this.mainUrl2}\n                    is-external={this.mainUrlIsExternal2}\n                  />\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hy-anchor-link-list.entry.js

@@ -0,0 +1,49 @@
+import { r as registerInstance, h, H as Host } from './index-f84f2a7d.js';
+import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
+
+const hyAnchorLinkListCss = ":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-anchor-link-list{border:1px solid var(--brand-main);display:block;width:100%}@media (min-width: 30rem){.hy-anchor-link-list{margin-bottom:1.75rem}}@media (min-width: 48rem){.hy-anchor-link-list{margin-bottom:1.75rem}}@media (min-width: 60rem){.hy-anchor-link-list{margin-bottom:2rem}}@media (min-width: 1601px){.hy-anchor-link-list{margin-bottom:2.5rem}}.hy-anchor-link-list.is-open{border:1px solid var(--grayscale-dark)}.hy-anchor-link-list__button{border:none;background:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px 20px;width:100%}@media (min-width: 48rem){.hy-anchor-link-list__button{padding:18px 20px}}.hy-anchor-link-list__button:hover{cursor:pointer}.hy-anchor-link-list__button.is-open .label-close-icon svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-anchor-link-list__button--title{font-size:1.0625rem;line-height:20px;font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);font-family:var(--main-font-family);letter-spacing:-0.32px}.hy-anchor-link-list__button--title svg{margin-right:12px}.hy-anchor-link-list__button--label{font-size:1rem;line-height:20px;font-weight:600;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--link-blue);font-family:var(--main-font-family);letter-spacing:-0.3px;text-align:right}.hy-anchor-link-list__button--label svg{margin-left:7px}.hy-anchor-link-list__container{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:18px 0;margin:0 20px}.hy-anchor-link-list__container.is-open{display:-webkit-box;display:-ms-flexbox;display:flex;border-top:1px solid var(--grayscale-dark)}.hy-anchor-link-list__item{font-size:1rem;line-height:20px;font-weight:600;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--link-blue);font-family:var(--main-font-family);font-size:16px;font-weight:600;letter-spacing:-0.5px;line-height:20px;margin-bottom:16px;text-decoration:none}.hy-anchor-link-list__item:hover{cursor:pointer;text-decoration:underline}.hy-anchor-link-list__item svg{margin-right:12px}";
+
+const HyAnchorLinkList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.listTitle = undefined;
+    this.openLabel = undefined;
+    this.closeLabel = undefined;
+    this.anchorItems = undefined;
+    this.isOpen = false;
+  }
+  async componentWillLoad() {
+    this._anchorItems = await jsonParserWorker(this.anchorItems);
+  }
+  handleLinkClick(e) {
+    const targetId = e.target.getAttribute("href");
+    if (targetId) {
+      const targetElement = document.getElementById(targetId.substring(1));
+      const targetRect = targetElement.getBoundingClientRect();
+      window.scrollTo({ top: window.scrollY + targetRect.top - 100, behavior: "smooth" });
+      targetElement.setAttribute("tabIndex", "-1");
+      targetElement.focus({ preventScroll: true });
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  render() {
+    const classAttributes = ["hy-anchor-link-list"].join(" ");
+    const buttonClasses = {
+      "hy-anchor-link-list__button": true,
+      "is-open": this.isOpen,
+    };
+    const containerClasses = {
+      "hy-anchor-link-list__container": true,
+      "is-open": this.isOpen,
+    };
+    const items = this._anchorItems;
+    return (h(Host, { class: classAttributes }, h("button", { "aria-label": this.listTitle, onClick: () => (this.isOpen = !this.isOpen), class: buttonClasses }, h("span", { class: "hy-anchor-link-list__button--title" }, h("hy-icon", { icon: "hy-icon-bullet-list", size: 18, fill: "var(--brand-main)" }), this.listTitle), h("span", { class: "hy-anchor-link-list__button--label" }, this.isOpen ? this.closeLabel : this.openLabel, h("hy-icon", { class: "label-close-icon", icon: "hy-icon-caret-down", size: 16, fill: "var(--brand-main)" }))), h("div", { "aria-hidden": this.isOpen ? "false" : "true", class: containerClasses }, items &&
+      items.map((item) => (h("a", { class: "hy-anchor-link-list__item", href: item.url, onClick: this.handleLinkClick }, h("hy-icon", { icon: "hy-icon-arrow-down", size: 12, fill: "var(--brand-main)" }), item.title))))));
+  }
+};
+HyAnchorLinkList.style = hyAnchorLinkListCss;
+
+export { HyAnchorLinkList as hy_anchor_link_list };
+
+//# sourceMappingURL=hy-anchor-link-list.entry.js.map

package/dist/esm/hy-anchor-link-list.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-anchor-link-list.entry.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,yjHAAyjH;;MCaxkH,gBAAgB;;;;;;;kBAoBA,KAAK;;EAEhC,MAAM,iBAAiB;IACrB,IAAI,CAAC,YAAY,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC9D;EAGD,eAAe,CAAC,CAAC;IACf,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IAC/C,IAAI,QAAQ,EAAE;MACZ,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;MACrE,MAAM,UAAU,GAAG,aAAa,CAAC,qBAAqB,EAAE,CAAC;MACzD,MAAM,CAAC,QAAQ,CAAC,EAAC,GAAG,EAAE,MAAM,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,GAAG,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC,CAAC;MAClF,aAAa,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;MAC7C,aAAa,CAAC,KAAK,CAAC,EAAC,aAAa,EAAE,IAAI,EAAC,CAAC,CAAC;KAC5C;IACD,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,CAAC,CAAC,eAAe,EAAE,CAAC;GACrB;EAED,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG;MACpB,6BAA6B,EAAE,IAAI;MACnC,SAAS,EAAE,IAAI,CAAC,MAAM;KACvB,CAAC;IACF,MAAM,gBAAgB,GAAG;MACvB,gCAAgC,EAAE,IAAI;MACtC,SAAS,EAAE,IAAI,CAAC,MAAM;KACvB,CAAC;IACF,MAAM,KAAK,GAAG,IAAI,CAAC,YAAiC,CAAC;IAErD,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,IAC1B,4BAAoB,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,aAAa,IACnG,YAAM,KAAK,EAAC,oCAAoC,IAC9C,eAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,mBAAmB,GAAI,EAC5E,IAAI,CAAC,SAAS,CACV,EACP,YAAM,KAAK,EAAC,oCAAoC,IAC7C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,SAAS,EAC/C,eAAS,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,oBAAoB,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,mBAAmB,GAAI,CAChG,CACA,EACT,0BAAkB,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,KAAK,EAAE,gBAAgB,IACtE,KAAK;MACJ,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACb,SAAG,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IAChF,eAAS,IAAI,EAAE,oBAAoB,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,mBAAmB,GAAI,EAC3E,IAAI,CAAC,KAAK,CACT,CACL,CAAC,CACA,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/hy-anchor-link-list/hy-anchor-link-list.scss?tag=hy-anchor-link-list","./src/components/hy-anchor-link-list/hy-anchor-link-list.tsx"],"sourcesContent":[".hy-anchor-link-list {\n  border: 1px solid var(--brand-main);\n  display: block;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    margin-bottom: 1.75rem;\n  }\n\n  @include breakpoint($medium) {\n    margin-bottom: 1.75rem;\n  }\n\n  @include breakpoint($wide) {\n    margin-bottom: 2rem;\n  }\n\n  @include breakpoint($xlarge) {\n    margin-bottom: 2.5rem;\n  }\n\n  &.is-open {\n    border: 1px solid var(--grayscale-dark);\n  }\n}\n\n.hy-anchor-link-list__button {\n  border: none;\n  background: none;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 15px 20px;\n  width: 100%;\n\n  @include breakpoint($medium) {\n    padding: 18px 20px;\n  }\n  &:hover {\n    cursor: pointer;\n  }\n\n  &.is-open {\n    .label-close-icon svg {\n      transform: rotate(180deg);\n    }\n  }\n\n  &--title {\n    @include font-size(17px, 20px);\n    @include font-weight($bold);\n    display: flex;\n    align-items: center;\n    color: var(--brand-main);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.32px;\n\n    svg {\n      margin-right: 12px;\n    }\n  }\n\n  &--label {\n    @include font-size(16px, 20px);\n    @include font-weight($semibold);\n    display: flex;\n    align-items: center;\n    color: var(--link-blue);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.3px;\n    text-align: right;\n\n    svg {\n      margin-left: 7px;\n    }\n  }\n}\n\n.hy-anchor-link-list__container {\n  display: none;\n  flex-direction: column;\n  padding: 18px 0;\n  margin: 0 20px;\n\n  &.is-open {\n    display: flex;\n    border-top: 1px solid var(--grayscale-dark);\n  }\n}\n\n.hy-anchor-link-list__item {\n  @include font-size(16px, 20px);\n  @include font-weight($semibold);\n\n  display: flex;\n  align-items: center;\n  color: var(--link-blue);\n  font-family: var(--main-font-family);\n  font-size: 16px;\n  font-weight: 600;\n  letter-spacing: -0.5px;\n  line-height: 20px;\n  margin-bottom: 16px;\n  text-decoration: none;\n\n  &:hover {\n    cursor: pointer;\n    text-decoration: underline;\n  }\n\n  svg {\n    margin-right: 12px;\n  }\n}\n","import {Component, Host, h, Prop, State, Listen} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\nexport interface AnchorItem {\n  title: string;\n  url: string;\n}\n\n@Component({\n  tag: \"hy-anchor-link-list\",\n  styleUrl: \"hy-anchor-link-list.scss\",\n  shadow: false,\n})\nexport class HyAnchorLinkList {\n  private _anchorItems: AnchorItem[];\n\n  /**\n   * Title for content list button\n   */\n  @Prop() listTitle?: string;\n  /**\n   * Open state label\n   */\n  @Prop() openLabel?: string;\n  /**\n   * Close state label\n   */\n  @Prop() closeLabel?: string;\n  /**\n   * Array of anchor items\n   */\n  @Prop() anchorItems: AnchorItem[] | string;\n\n  @State() isOpen: boolean = false;\n\n  async componentWillLoad() {\n    this._anchorItems = await jsonParserWorker(this.anchorItems);\n  }\n\n  @Listen(\"handleLinkClick\")\n  handleLinkClick(e) {\n    const targetId = e.target.getAttribute(\"href\");\n    if (targetId) {\n      const targetElement = document.getElementById(targetId.substring(1));\n      const targetRect = targetElement.getBoundingClientRect();\n      window.scrollTo({top: window.scrollY + targetRect.top - 100, behavior: \"smooth\"});\n      targetElement.setAttribute(\"tabIndex\", \"-1\");\n      targetElement.focus({preventScroll: true});\n    }\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  render() {\n    const classAttributes = [\"hy-anchor-link-list\"].join(\" \");\n    const buttonClasses = {\n      \"hy-anchor-link-list__button\": true,\n      \"is-open\": this.isOpen,\n    };\n    const containerClasses = {\n      \"hy-anchor-link-list__container\": true,\n      \"is-open\": this.isOpen,\n    };\n    const items = this._anchorItems as Array<AnchorItem>;\n\n    return (\n      <Host class={classAttributes}>\n        <button aria-label={this.listTitle} onClick={() => (this.isOpen = !this.isOpen)} class={buttonClasses}>\n          <span class=\"hy-anchor-link-list__button--title\">\n            <hy-icon icon={\"hy-icon-bullet-list\"} size={18} fill={\"var(--brand-main)\"} />\n            {this.listTitle}\n          </span>\n          <span class=\"hy-anchor-link-list__button--label\">\n            {this.isOpen ? this.closeLabel : this.openLabel}\n            <hy-icon class=\"label-close-icon\" icon={\"hy-icon-caret-down\"} size={16} fill={\"var(--brand-main)\"} />\n          </span>\n        </button>\n        <div aria-hidden={this.isOpen ? \"false\" : \"true\"} class={containerClasses}>\n          {items &&\n            items.map((item) => (\n              <a class=\"hy-anchor-link-list__item\" href={item.url} onClick={this.handleLinkClick}>\n                <hy-icon icon={\"hy-icon-arrow-down\"} size={12} fill={\"var(--brand-main)\"} />\n                {item.title}\n              </a>\n            ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hy-badge.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, H as Host } from './index-f84f2a7d.js';
+
+const hyBadgeCss = ":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}span.hy-badge{border-radius:15px;padding:0.25rem 1rem;text-align:center;color:black;font-weight:bold;font-family:var(--main-font-family);font-size:0.6rem}span.hy-badge.primary{background-color:var(--brand-main-light);color:white}span.hy-badge.warn{background-color:var(--additional-red-dark);color:white}span.hy-badge.success{background-color:var(--additional-green-dark);color:white}span.hy-badge.disabled{background-color:var(--grayscale-medium-dark);color:black}";
+
+const HyBadge = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = "primary";
+  }
+  render() {
+    const classAttributes = ["hy-badge", this.variant];
+    return (h(Host, null, h("span", { class: classAttributes.join(" ") }, h("slot", null))));
+  }
+};
+HyBadge.style = hyBadgeCss;
+
+export { HyBadge as hy_badge };
+
+//# sourceMappingURL=hy-badge.entry.js.map

package/dist/esm/hy-badge.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-badge.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,soDAAsoD;;MCO5oD,OAAO;;;mBAC6C,SAAS;;EAExE,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACnD,QACE,EAAC,IAAI,QACH,YAAM,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IACpC,eAAa,CACR,CACF,EACP;GACH;;;;;;","names":[],"sources":["./src/components/hy-badge/hy-badge.scss?tag=hy-badge&encapsulation=shadow","./src/components/hy-badge/hy-badge.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nspan.hy-badge {\n  border-radius: 15px;\n  padding: 0.25rem 1rem;\n  text-align: center;\n  color: black;\n  font-weight: bold;\n  font-family: var(--main-font-family);\n  font-size: 0.6rem;\n\n  &.primary {\n    background-color: var(--brand-main-light);\n    color: white;\n  }\n  &.warn {\n    background-color: var(--additional-red-dark);\n    color: white;\n  }\n  &.success {\n    background-color: var(--additional-green-dark);\n    color: white;\n  }\n  &.disabled {\n    background-color: var(--grayscale-medium-dark);\n    color: black;\n  }\n}\n","import {Component, ComponentInterface, Host, h, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-badge\",\n  styleUrl: \"hy-badge.scss\",\n  shadow: true,\n})\nexport class HyBadge implements ComponentInterface {\n  @Prop() variant: \"primary\" | \"warn\" | \"success\" | \"disabled\" = \"primary\";\n\n  render() {\n    const classAttributes = [\"hy-badge\", this.variant];\n    return (\n      <Host>\n        <span class={classAttributes.join(\" \")}>\n          <slot></slot>\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hy-banner.entry.js

@@ -0,0 +1,47 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f84f2a7d.js';
+import { d as CtaLinkButtonVariants } from './utils-7438924c.js';
+
+const hyBannerCss = ":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-banner{background-color:var(--brand-main-light);padding:28px 0 24px 0}@media (min-width: 30rem){.hy-banner{padding:40px 0 32px 0}}@media (min-width: 60rem){.hy-banner{padding:48px 0 40px 0;margin-left:8px;margin-right:8px}}@media (min-width: 75.0625rem){.hy-banner{padding-left:20px;padding-right:20px;margin-left:0;margin-right:0}}@media (min-width: 1601px){.hy-banner{padding:64px 32px 48px 32px}}@media (min-width: 1664px){.hy-banner{margin-left:0;margin-right:0}}@media (min-width: 75.0625rem){.hy-banner__large{padding:64px 30px 48px 30px;margin-left:-20px;margin-right:-20px}}@media (min-width: 1344px){.hy-banner__large{margin-left:0;margin-right:0}}@media (min-width: 60rem){.hy-banner__info-container{margin-left:-8px;margin-right:-8px}}@media (min-width: 1601px){.hy-banner__info-container{margin-left:0;margin-right:0}}.hy-banner__info-container__title{font-size:1.5rem;line-height:24px;color:var(--grayscale-white);font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.8px;margin-bottom:16px;text-transform:uppercase}@media (min-width: 30rem){.hy-banner__info-container__title{font-size:2rem;line-height:32px;letter-spacing:-1.07px;margin-bottom:24px;max-width:92%}}@media (min-width: 75.0625rem){.hy-banner__info-container__title{font-size:2rem;line-height:32px;letter-spacing:-1.07px;margin-bottom:24px;max-width:92%}}@media (min-width: 1601px){.hy-banner__info-container__title{font-size:2.25rem;line-height:36px;letter-spacing:-1.2px;max-width:83%}}@media (min-width: 75.0625rem){.hy-banner__info-container__title__large{font-size:2.25rem;line-height:36px;letter-spacing:-1.2px;max-width:83%}}@media (min-width: 1601px){.hy-banner__info-container__title__large{font-size:2.5rem;line-height:40px;letter-spacing:-1.33px;margin-bottom:32px}}.hy-banner__info-container__description{color:var(--grayscale-white);font-family:var(--main-font-family);font-weight:500;font-size:14px;letter-spacing:-0.7px;line-height:20px;margin-bottom:24px}@media (min-width: 30rem){.hy-banner__info-container__description{font-size:1rem;line-height:24px;letter-spacing:-0.08px;margin-bottom:28px;max-width:92%}}@media (min-width: 60rem){.hy-banner__info-container__description{margin-bottom:32px}}@media (min-width: 1601px){.hy-banner__info-container__description{font-size:1.125rem;line-height:24px;letter-spacing:-0.09px;margin-bottom:36px;max-width:83%}}@media (min-width: 75.0625rem){.hy-banner__info-container__description__large{font-size:1.125rem;line-height:24px;letter-spacing:-0.09px;margin-bottom:36px;max-width:83%}}@media (min-width: 1601px){.hy-banner__info-container__description__large{margin-bottom:44px}}";
+
+const HyBanner = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.textTitle = undefined;
+    this.textDescription = null;
+    this.url = undefined;
+    this.scLabel = undefined;
+    this.urlTitle = undefined;
+    this.headerstyle = "common";
+    this.isExternal = false;
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    const hyBannerClass = ["hy-banner", `hy-banner__${this.headerstyle}`, this.headerstyle].join(" ");
+    const hyBannerWrapperClass = ["hy-banner__info-container"].join(" ");
+    const hyBannerTitle = [
+      "hy-banner__info-container__title",
+      `hy-banner__info-container__title__${this.headerstyle}`,
+      this.headerstyle,
+    ].join(" ");
+    const hyBannerDescription = [
+      "hy-banner__info-container__description",
+      `hy-banner__info-container__description__${this.headerstyle}`,
+      this.headerstyle,
+    ].join(" ");
+    const variant = CtaLinkButtonVariants.onBlueBkgd;
+    return (h(Host, null, h("hy-box", { pt: "1.25, 1.25, 1.5, 2.5" }), h("div", { class: hyBannerClass }, h("hy-main-content-wrapper", null, h("div", { class: hyBannerWrapperClass }, h("div", { class: hyBannerTitle }, this.textTitle), h("div", { class: hyBannerDescription }, this.textDescription), this.url && (h("div", { class: "hy-banner__info-container__link" }, h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant })))))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+  }
+  get el() { return getElement(this); }
+};
+HyBanner.style = hyBannerCss;
+
+export { HyBanner as hy_banner };
+
+//# sourceMappingURL=hy-banner.entry.js.map

package/dist/esm/hy-banner.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-banner.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,+vHAA+vH;;MCQtwH,QAAQ;;;;2BAEe,IAAI;;;;uBAIR,QAAQ;sBACR,KAAK;;EAGnC,gBAAgB;IACd,IAAI,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5C,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;QACjD,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;OAC5B;KACF;GACF;EAED,MAAM;IACJ,MAAM,aAAa,GAAG,CAAC,WAAW,EAAE,cAAc,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAElG,MAAM,oBAAoB,GAAG,CAAC,2BAA2B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrE,MAAM,aAAa,GAAG;MACpB,kCAAkC;MAClC,qCAAqC,IAAI,CAAC,WAAW,EAAE;MACvD,IAAI,CAAC,WAAW;KACjB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACZ,MAAM,mBAAmB,GAAG;MAC1B,wCAAwC;MACxC,2CAA2C,IAAI,CAAC,WAAW,EAAE;MAC7D,IAAI,CAAC,WAAW;KACjB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,MAAM,OAAO,GAAG,qBAAqB,CAAC,UAAU,CAAC;IAEjD,QACE,EAAC,IAAI,QACH,cAAQ,EAAE,EAAC,sBAAsB,GAAG,EACpC,WAAK,KAAK,EAAE,aAAa,IACvB,mCACE,WAAK,KAAK,EAAE,oBAAoB,IAC9B,WAAK,KAAK,EAAE,aAAa,IAAG,IAAI,CAAC,SAAS,CAAO,EACjD,WAAK,KAAK,EAAE,mBAAmB,IAAG,IAAI,CAAC,eAAe,CAAO,EAC5D,IAAI,CAAC,GAAG,KACP,WAAK,KAAK,EAAC,iCAAiC,IAC1C,qCACgB,IAAI,CAAC,QAAQ,cACjB,IAAI,CAAC,OAAO,EACtB,GAAG,EAAE,IAAI,CAAC,GAAG,iBACA,IAAI,CAAC,UAAU,EAC5B,OAAO,EAAE,OAAO,GAChB,CACE,CACP,CACG,CACkB,CACtB,EACN,cAAQ,EAAE,EAAC,oBAAoB,GAAG,CAC7B,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/hy-banner/hy-banner.scss?tag=hy-banner","./src/components/hy-banner/hy-banner.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-banner {\n  background-color: var(--brand-main-light);\n  padding: 28px 0 24px 0;\n\n  @include breakpoint($narrow) {\n    padding: 40px 0 32px 0;\n  }\n\n  @include breakpoint($wide) {\n    padding: 48px 0 40px 0;\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n\n  @include breakpoint($extrawide) {\n    padding-left: 20px;\n    padding-right: 20px;\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  @include breakpoint($xlarge) {\n    padding: 64px 32px 48px 32px;\n  }\n\n  @include breakpoint(1664px) {\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  &__large {\n    @include breakpoint($extrawide) {\n      padding: 64px 30px 48px 30px;\n      margin-left: -20px;\n      margin-right: -20px;\n    }\n    @include breakpoint(1344px) {\n      margin-left: 0;\n      margin-right: 0;\n    }\n  }\n\n  &__info-container {\n    @include breakpoint($wide) {\n      margin-left: -8px;\n      margin-right: -8px;\n    }\n    @include breakpoint($xlarge) {\n      margin-left: 0;\n      margin-right: 0;\n    }\n    &__title {\n      @include font-size(24px, 24px);\n      color: var(--grayscale-white);\n      font-family: var(--main-font-family);\n      font-weight: 600;\n      letter-spacing: -0.8px;\n      margin-bottom: 16px;\n      text-transform: uppercase;\n\n      @include breakpoint($narrow) {\n        @include font-size(32px, 32px);\n        letter-spacing: -1.07px;\n        margin-bottom: 24px;\n        max-width: 92%;\n      }\n\n      @include breakpoint($extrawide) {\n        @include font-size(32px, 32px);\n        letter-spacing: -1.07px;\n        margin-bottom: 24px;\n        max-width: 92%;\n      }\n\n      @include breakpoint($xlarge) {\n        @include font-size(36px, 36px);\n        letter-spacing: -1.2px;\n        max-width: 83%;\n      }\n\n      &__large {\n        @include breakpoint($extrawide) {\n          @include font-size(36px, 36px);\n          letter-spacing: -1.2px;\n          max-width: 83%;\n        }\n        @include breakpoint($xlarge) {\n          @include font-size(40px, 40px);\n          letter-spacing: -1.33px;\n          margin-bottom: 32px;\n        }\n      }\n    }\n\n    &__description {\n      color: var(--grayscale-white);\n      font-family: var(--main-font-family);\n      font-weight: 500;\n      font-size: 14px;\n      letter-spacing: -0.7px;\n      line-height: 20px;\n      margin-bottom: 24px;\n\n      @include breakpoint($narrow) {\n        @include font-size(16px, 24px);\n        letter-spacing: -0.08px;\n        margin-bottom: 28px;\n        max-width: 92%;\n      }\n\n      @include breakpoint($wide) {\n        margin-bottom: 32px;\n      }\n\n      @include breakpoint($xlarge) {\n        @include font-size(18px, 24px);\n        letter-spacing: -0.09px;\n        margin-bottom: 36px;\n        max-width: 83%;\n      }\n\n      &__large {\n        @include breakpoint($extrawide) {\n          @include font-size(18px, 24px);\n          letter-spacing: -0.09px;\n          margin-bottom: 36px;\n          max-width: 83%;\n        }\n        @include breakpoint($xlarge) {\n          margin-bottom: 44px;\n        }\n      }\n    }\n  }\n}\n","import {Component, Element, Prop, h, Host} from \"@stencil/core\";\nimport {CtaLinkButtonVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-banner\",\n  styleUrl: \"hy-banner.scss\",\n  shadow: false,\n})\nexport class HyBanner {\n  @Prop() textTitle?: string;\n  @Prop() textDescription: string = null;\n  @Prop() url?: string;\n  @Prop() scLabel?: string;\n  @Prop() urlTitle?: string;\n  @Prop() headerstyle: string = \"common\";\n  @Prop() isExternal: boolean = false;\n  @Element() el: HTMLElement;\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  }\n\n  render() {\n    const hyBannerClass = [\"hy-banner\", `hy-banner__${this.headerstyle}`, this.headerstyle].join(\" \");\n\n    const hyBannerWrapperClass = [\"hy-banner__info-container\"].join(\" \");\n    const hyBannerTitle = [\n      \"hy-banner__info-container__title\",\n      `hy-banner__info-container__title__${this.headerstyle}`,\n      this.headerstyle,\n    ].join(\" \");\n    const hyBannerDescription = [\n      \"hy-banner__info-container__description\",\n      `hy-banner__info-container__description__${this.headerstyle}`,\n      this.headerstyle,\n    ].join(\" \");\n\n    const variant = CtaLinkButtonVariants.onBlueBkgd;\n\n    return (\n      <Host>\n        <hy-box pt=\"1.25, 1.25, 1.5, 2.5\" />\n        <div class={hyBannerClass}>\n          <hy-main-content-wrapper>\n            <div class={hyBannerWrapperClass}>\n              <div class={hyBannerTitle}>{this.textTitle}</div>\n              <div class={hyBannerDescription}>{this.textDescription}</div>\n              {this.url && (\n                <div class=\"hy-banner__info-container__link\">\n                  <hy-cta-button\n                    link-content={this.urlTitle}\n                    sc-label={this.scLabel}\n                    url={this.url}\n                    is-external={this.isExternal}\n                    variant={variant}\n                  />\n                </div>\n              )}\n            </div>\n          </hy-main-content-wrapper>\n        </div>\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}