@itcenteratunihelsinki/huds-lib 0.8.72 → 0.8.74

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

@@ -1,238 +1,238 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f84f2a7d.js';
-import { A as AccordionVariants } from './utils-2819fd7e.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-e2e165ed.js';
+import { A as AccordionVariants } from './utils-1e7f5184.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 HyAccordionContainerStyle0 = accordionContainerCss;
 
 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" })));
-  }
+    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, { key: 'cf18d25850bff7a73c954b5dd2468cade6a65e04' }, h("div", { key: '9936b10c4097a482ccd29966fd0a3c1d89a44bfd', id: id, class: classAttributes.join(" "), "data-allow-multiple": "true", "data-allow-toggle": "true" }, h("slot", { key: '3ac4cd288bcb33f976336a295cae8e3a0616531c' })), h("hy-box", { key: '68cddc4af8be48fc63b39d55edd9eb4a1072aed5', mb: "1.75, 1.75, 2, 2.5" })));
+    }
 };
-AccordionContainer.style = accordionContainerCss;
+AccordionContainer.style = HyAccordionContainerStyle0;
 
 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}";
+const HyAccordionItemStyle0 = accordionItemCss;
 
 let keys = {
-  enter: "Enter",
-  tab: "Tab",
-  pageUp: "PageUp",
-  pageDown: "PageDown",
-  arrowUp: "ArrowUp",
-  arrowDown: "ArrowDown",
-  home: "Home",
-  end: "End", //35
+    enter: "Enter", //13
+    tab: "Tab", //9
+    pageUp: "PageUp", //33
+    pageDown: "PageDown", //34
+    arrowUp: "ArrowUp", // 38
+    arrowDown: "ArrowDown", //40
+    home: "Home", //36
+    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);
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.accordiontitle = undefined;
+        this.variant = AccordionVariants.default;
+        this.headerstyle = "common";
+        this.showOpen = false;
+        this.ready = false;
     }
-  }
-  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;
+    componentDidLoad() {
+        this.ready = true;
+        let hyMainDiv = this.el.closest(".hy-main");
+        if (hyMainDiv) {
+            if (!hyMainDiv.classList.contains("with-sidebar")) {
+                this.headerstyle = "large";
+            }
         }
-        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");
+    componentDidRender() {
+        if (window.location.hash) {
+            this.expandPanelByAnchor(window.location.hash);
         }
-        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");
+        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);
         }
-      }
-      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");
+    }
+    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();
+            }
         }
-        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");
-          }
+    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();
         }
-      }
-    }, 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");
+    }
+    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", { key: '507abb2a7d6aa29f2980524e94f2f18e6b6e08ec', class: classAttributes }, h("div", { key: '87336553ef852fd594050d4de3298f904e71d5c1', class: classInnerWrapper }, h("h3", { key: '84da70a9e2902851046c6079fb0ebbd11d856bfc', class: classHeadingAttributes }, h("a", { key: '3a9530633be1c6d127bd9c15d081d19e8f26fb6a', href: accordionItemHref, class: "hy-accordion__link", tabindex: "-1" }, h("button", { key: '378c62e3b67330c507f4bc6a2a9e1728fedcea33', "aria-expanded": ariaExpanded, "aria-controls": `${titleAsId}--content`, class: `hy-accordion__button hy-accordion__button--${this.headerstyle}`, id: `${titleAsId}--title` }, h("span", { key: 'e37e74995e1afe6b45faf0bcae6f8e765f6c60fd', class: "hy-accordion--heading__icon" }, h("hy-icon", { key: '620d28c44285cd806b64cabbba8245d7ec24e7af', icon: "hy-icon-caret-down", size: 16 })), h("span", { key: '6f8dd1038151384d7e0077ac174aff1eb509a530' }, this.accordiontitle)))), h("div", { key: '1c36473eae3a8e99c89a474039c786d3169cbc41', "aria-labelledBy": `${titleAsId}--title`, class: classContentAttributes, id: `${titleAsId}--content`, role: "region", "aria-hidden": ariaHidden, "data-collapsed": dataCollapsed, style: { display: "none" } }, h("div", { key: '2371237420458cc3b34dca567fd2e42610318fe1', class: classContentInnerWrapper }, h("slot", { key: '28847ba8e2964c20384e741bbe21272ee0645d01' }))))));
     }
-    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); }
+    get el() { return getElement(this); }
 };
-AccordionItem.style = accordionItemCss;
+AccordionItem.style = HyAccordionItemStyle0;
 
 export { AccordionContainer as hy_accordion_container, AccordionItem as hy_accordion_item };
-
-//# sourceMappingURL=hy-accordion-container_2.entry.js.map

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

@@ -1,57 +1,56 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f84f2a7d.js';
-import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-e2e165ed.js';
+import { j as jsonParserWorker } from './globalScript-0c14426d.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 HyAdjacentImageTextStyle0 = adjacentImageTextCss;
 
 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";
-      }
+    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;
     }
-  }
-  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); }
+    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, { key: '090c5d0a531f27b5f4ea185f02f9a0f0c31c5152' }, h("div", { key: 'ce5f94319299b9df4248f4e8bd90552b3f0aadbb', class: classAttributes }, h("div", { key: '71c2bbc486cf32854ae00d9537461e3951e4561e', 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", { key: '546fccda4f5b8dfe05881d9c43313a7d7fd83d3a', class: contentClassAttributes }, h("div", { key: '6e17f418f38cf0d670e063ee57ac7a6676a55b4d', class: "hy-adjacent-image-text__text-container__info-wrapper" }, h("div", { key: '86cbd91d0b3d4bc09171fd2bb20727f68d52a0dd', class: "hy-adjacent-image-text__text-container__title" }, this.textTitle), h("p", { key: 'd5a1152b446804c3264f72f364c98ef10081560a', class: `hy-adjacent-image-text__text-container__description hy-adjacent-image-text__text-container__description__${this.headerstyle}` }, this.textDescription)), h("div", { key: '4fbd863ce7db9c81437d0b9668dd5985ab909b0a', class: "hy-adjacent-image-text__text-container__links-wrapper" }, this.mainUrl && (h("div", { key: '2299dead2840bf0b56e13f7f67148be43c89f10b', class: "hy-adjacent-image-text__text-container__link" }, h("hy-cta-link", { key: 'f9ba1bea370fc869b87dd421265b60f9c8b06190', "link-content": this.mainUrlTitle, "sc-label": this.mainUrlAriaLabel, url: this.mainUrl, "is-external": this.mainUrlIsExternal }))), this.mainUrl2 && (h("div", { key: 'b3613ab7bc5f85fc5606a70aa1e8d995cbbfab79', class: "hy-adjacent-image-text__text-container__link" }, h("hy-cta-link", { key: 'f09326deaf1830494354f251d6d2b7e00b76e239', "link-content": this.mainUrlTitle2, "sc-label": this.mainUrlAriaLabel2, url: this.mainUrl2, "is-external": this.mainUrlIsExternal2 })))))), h("hy-box", { key: 'a10b4262cd81e4c889fcc94d9579fe66f8912042', mb: "1.75, 1.75, 2, 2.5" })));
+    }
+    get el() { return getElement(this); }
 };
-AdjacentImageText.style = adjacentImageTextCss;
+AdjacentImageText.style = HyAdjacentImageTextStyle0;
 
 export { AdjacentImageText as hy_adjacent_image_text };
-
-//# sourceMappingURL=hy-adjacent-image-text.entry.js.map