@itcenteratunihelsinki/huds-lib 0.8.69 → 0.8.71

package/components/hy-dropdown.js

@@ -1,24 +1,29 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { j as jsonParserWorker } from './globalScript.js';
-import { d as defineCustomElement$4 } from './hy-dropdown.panel.js';
-import { d as defineCustomElement$3 } from './hy-dropdown.panel.item.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const hyDropdownCss = ":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-dropdown{display:inline-block;min-width:100%;position:relative}@media (min-width: 30rem){.hy-dropdown{min-width:48.3%}}@media (min-width: 75.0625rem){.hy-dropdown{min-width:23.03%}}.hy-dropdown label.hy-dropdown__button-label{font-size:1rem;line-height:20px;font-weight:700;display:block;font-family:var(--main-font-family);letter-spacing:-0.32px;margin-bottom:8px}.hy-dropdown--single .hy-dropdown__panel{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:330px;min-width:100%}.hy-dropdown__toggle{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;height:auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 0 0 16px;text-align:left;max-width:280px;width:100%}@media (min-width: 30rem){.hy-dropdown__toggle{font-size:1rem;line-height:24px;min-height:44px}}@media (min-width: 75.0625rem){.hy-dropdown__toggle{min-height:48px}}.hy-dropdown__toggle:hover{border-color:var(--brand-main-light);cursor:pointer}.hy-dropdown__toggle:focus{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}.hy-dropdown__toggle svg{pointer-events:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon{background-color:var(--brand-main-light);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-dropdown__toggle.is-open .hy-dropdown__icon::before{display:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon svg{fill:var(--grayscale-white)}.hy-dropdown__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 0 0 16px;position:relative;width:40px}.hy-dropdown__icon::before{border-left:0.5px solid var(--grayscale-medium-dark);content:\"\";display:inline-block;height:65%;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width: 30rem){.hy-dropdown__icon{height:44px;width:44px}}@media (min-width: 75.0625rem){.hy-dropdown__icon{height:48px;width:48px}}.hy-dropdown__icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-dropdown__icon svg{height:16px;width:16px}}.hy-dropdown__panel{background-color:var(--grayscale-white);-webkit-box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);list-style:none;margin:0;padding:6px;position:absolute;width:100%;z-index:11}.hy-dropdown__panel.is-hidden{display:none;visibility:hidden}.hy-dropdown__panel-item{position:relative}.hy-dropdown__panel-item:not(.is-last){margin-bottom:6px}.hy-dropdown__label{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 16px;text-align:left;width:100%}@media (min-width: 30rem){.hy-dropdown__label{font-size:1rem;line-height:24px}}.hy-dropdown__label-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none !important;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;visibility:hidden;width:40px}.hy-dropdown__checkbox{height:100%;margin:0;opacity:0;position:absolute;width:100%;z-index:10}.hy-dropdown__checkbox:checked+label{border-color:var(--grayscale-black);border-style:solid inset solid solid;border-width:2px;color:var(--grayscale-black);outline:0;text-indent:-1px}.hy-dropdown__checkbox:checked+label .hy-dropdown__label-icon{display:-webkit-inline-box !important;display:-ms-inline-flexbox !important;display:inline-flex !important;visibility:visible}.hy-dropdown__checkbox:hover{cursor:pointer}.hy-dropdown__checkbox:hover+label{border-color:var(--brand-main-light)}.hy-dropdown__checkbox:focus+label{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}";
+const hyDropdownCss = ":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-dropdown{display:inline-block;min-width:100%;position:relative}@media (min-width: 30rem){.hy-dropdown{min-width:48.3%}}@media (min-width: 75.0625rem){.hy-dropdown{min-width:23.03%}}.hy-dropdown label.hy-dropdown__button-label{font-size:1rem;line-height:20px;font-weight:700;display:block;font-family:var(--main-font-family);letter-spacing:-0.32px;margin-bottom:8px}.hy-dropdown--single .hy-dropdown__panel{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:330px;min-width:100%}.hy-dropdown .hy-dropdown__hidden-input{display:none;height:0;font-size:0}.hy-dropdown__toggle{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;height:auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 0 0 16px;text-align:left;max-width:280px;width:100%}@media (min-width: 30rem){.hy-dropdown__toggle{font-size:1rem;line-height:24px;min-height:44px}}@media (min-width: 75.0625rem){.hy-dropdown__toggle{min-height:48px}}.hy-dropdown__toggle:hover{border-color:var(--brand-main-light);cursor:pointer}.hy-dropdown__toggle:focus{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}.hy-dropdown__toggle svg{pointer-events:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon{background-color:var(--brand-main-light);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-dropdown__toggle.is-open .hy-dropdown__icon::before{display:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon svg{fill:var(--grayscale-white)}.hy-dropdown__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 0 0 16px;position:relative;width:40px}.hy-dropdown__icon::before{border-left:0.5px solid var(--grayscale-medium-dark);content:\"\";display:inline-block;height:65%;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width: 30rem){.hy-dropdown__icon{height:44px;width:44px}}@media (min-width: 75.0625rem){.hy-dropdown__icon{height:48px;width:48px}}.hy-dropdown__icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-dropdown__icon svg{height:16px;width:16px}}.hy-dropdown__panel{background-color:var(--grayscale-white);-webkit-box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);list-style:none;margin:0;padding:6px;position:absolute;width:100%;z-index:11}.hy-dropdown__panel.is-hidden{display:none;visibility:hidden}.hy-dropdown__panel-item{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;position:relative;padding:0;text-align:left;width:100%}@media (min-width: 30rem){.hy-dropdown__panel-item{font-size:1rem;line-height:24px}}.hy-dropdown__panel-item:not(.is-last){margin-bottom:6px}.hy-dropdown__panel-item[aria-selected=true] .hy-dropdown__checkbox{border-color:var(--grayscale-black);border-style:solid inset solid solid;border-width:2px;color:var(--grayscale-black);outline:0;text-indent:-1px}.hy-dropdown__panel-item[aria-selected=true] .hy-dropdown__checkbox .hy-dropdown__label-icon{display:-webkit-inline-box !important;display:-ms-inline-flexbox !important;display:inline-flex !important;visibility:visible}.hy-dropdown__panel-item--focused{cursor:pointer;border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}.hy-dropdown__label-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none !important;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;visibility:hidden;width:40px}.hy-dropdown__checkbox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:40px;height:100%;margin:0;padding:0 16px;width:100%;z-index:10}.hy-dropdown__checkbox:hover{cursor:pointer;border-color:var(--brand-main-active)}.hy-dropdown__checkbox:focus-within{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}";
 
 const HyDropdown$1 = /*@__PURE__*/ proxyCustomElement(class HyDropdown extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.dropdownPanelToggled = createEvent(this, "dropdownPanelToggled", 7);
+    this.dropdropValueChange = createEvent(this, "dropdownValueChanged", 7);
+    this.dropdropMultiValueChange = createEvent(this, "dropdownMultiValueChanged", 7);
+    this.dropdownKeyPress = createEvent(this, "dropdownKeyPress", 7);
     this.single = false;
     this.dropdownLabel = null;
     this.dropdownId = "dropdownToggle";
     this.dropdownOptions = undefined;
     this.defaultLabel = "All";
+    this.type = null;
     this.defaultOption = null;
     this.isPanelOpen = false;
     this.isChecked = false;
     this.currentSingle = [{ id: 0, label: this.defaultLabel, value: 0 }];
+    this.currentMulti = undefined;
+    this.focusedOptionIndex = 0;
   }
   async componentWillLoad() {
     this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);
@@ -49,59 +54,162 @@ const HyDropdown$1 = /*@__PURE__*/ proxyCustomElement(class HyDropdown extends H
       });
     }
   }
-  handlePanelToggle() {
-    this.isPanelOpen = !this.isPanelOpen;
-  }
-  handleClick(event) {
-    const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`);
-    const dropdownPanelElement = this.el.querySelector(".hy-dropdown__panel");
-    const dropdownPanelCheckboxElements = this.el.querySelectorAll(".hy-dropdown__checkbox");
-    const dropdownToggleButtonIconElement = this.el.querySelector(".hy-dropdown__icon");
-    const { target } = event;
-    const allowedElements = [
-      dropdownToggleButtonElement,
-      dropdownPanelElement,
-      dropdownToggleButtonIconElement,
-      ...dropdownPanelCheckboxElements, // Spread ("copy") items to allowedElement array.
-    ];
-    if (this.isPanelOpen && !allowedElements.includes(target)) {
+  panelListener(e) {
+    if (this.isPanelOpen && e.detail.dropdownId !== this.dropdownId) {
       this.isPanelOpen = false;
     }
+  }
+  handleMultiClick(event, option) {
     event.stopPropagation();
+    const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
+    Array.from(dropdownPanelCheckboxElements).filter((i) => {
+      const item = i.closest("li");
+      if (item.dataset.id == option.id && !item.hasAttribute("aria-selected")) {
+        item.setAttribute("aria-selected", "true");
+        this.currentMulti =
+          this.currentMulti && this.currentMulti.length > 0 ? [...this.currentMulti, option] : [option];
+        return;
+      }
+      if (item.dataset.id === option.id && item.hasAttribute("aria-selected")) {
+        item.removeAttribute("aria-selected");
+        if (this.currentMulti.length > 0) {
+          const index = this.currentMulti.indexOf(option);
+          this.currentMulti = this.currentMulti.splice(index, 1);
+        }
+        return;
+      }
+      return null;
+    });
   }
-  handleSingleClick(event) {
+  handleSingleClick(event, option) {
     if (!this.single || !this.isPanelOpen)
       return;
     const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
-    const allowedElements = [...dropdownPanelCheckboxElements];
-    const { target } = event;
-    if (!allowedElements.includes(target))
-      return;
-    Array.from(dropdownPanelCheckboxElements).filter((item) => {
-      if (item.id == target.id) {
-        if (!item.checked) {
+    event.stopPropagation();
+    Array.from(dropdownPanelCheckboxElements).filter((i) => {
+      const item = i.closest("li");
+      if (item.dataset.id == option.id) {
+        if (item.hasAttribute("aria-selected")) {
+          item.removeAttribute("aria-selected");
           this.currentSingle = [{ id: null, label: this.defaultLabel, value: null }];
           return;
         }
-        this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id);
+        item.setAttribute("aria-selected", "true");
+        this.currentSingle = this._dropdownOptions.filter((o) => o.id == option.id);
         return;
       }
-      if (item.id !== target.id && item.checked) {
-        item.checked = false;
+      if (item.dataset.id !== option.id && item.hasAttribute("aria-selected")) {
+        item.removeAttribute("aria-selected");
         return;
       }
       return null;
     });
+  }
+  handleKeyDown(event) {
     event.stopPropagation();
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!this.isPanelOpen) {
+          this.handlePanelToggle(event);
+          return;
+        }
+        this.focusedOptionIndex = (this.focusedOptionIndex + 1) % this._dropdownOptions.length;
+        break;
+      case "ArrowUp":
+        this.focusedOptionIndex =
+          (this.focusedOptionIndex - 1 + this._dropdownOptions.length) % this._dropdownOptions.length;
+        event.preventDefault();
+        break;
+      case "Enter":
+      case " ":
+        if (!this.isPanelOpen) {
+          event.preventDefault();
+          this.handlePanelToggle(event);
+          return;
+        }
+        if (this.single) {
+          this.handleOptionSingleClick(event, this._dropdownOptions[this.focusedOptionIndex]);
+        }
+        else {
+          this.handleMultiOptionClick(event, this._dropdownOptions[this.focusedOptionIndex]);
+        }
+        const emitDetails = {
+          id: this.dropdownId,
+          type: this.type,
+          data: this._dropdownOptions[this.focusedOptionIndex],
+        };
+        this.dropdownKeyPress.emit(emitDetails);
+        event.preventDefault();
+        break;
+      case "Escape":
+      case "Tab":
+        this.isPanelOpen = false;
+        break;
+    }
+  }
+  handlePanelToggle(e) {
+    e.stopPropagation();
+    this.isPanelOpen = !this.isPanelOpen;
+    const emitDetails = {
+      dropdownId: this.dropdownId,
+      panelOpen: this.isPanelOpen,
+    };
+    this.dropdownPanelToggled.emit(emitDetails);
+  }
+  handlePanelClickOutside(e) {
+    e.stopPropagation();
+    const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`);
+    const dropdownPanelElement = this.el.querySelector(".hy-dropdown__panel");
+    const dropdownPanelCheckboxElements = this.el.querySelectorAll(".hy-dropdown__panel-item");
+    const dropdownPanelCheckboxes = this.el.querySelectorAll(".hy-dropdown__checkbox");
+    const dropdownToggleButtonIconElement = this.el.querySelectorAll(".hy-dropdown__icon");
+    const { target } = e;
+    const allowedElements = [
+      this.el,
+      dropdownToggleButtonElement,
+      dropdownPanelElement,
+      ...dropdownPanelCheckboxes,
+      dropdownToggleButtonIconElement,
+      ...dropdownPanelCheckboxElements, // Spread ("copy") items to allowedElement array.
+    ];
+    if (this.isPanelOpen && !allowedElements.includes(target)) {
+      this.isPanelOpen = false;
+    }
+  }
+  handleOptionSingleClick(event, option) {
+    event.stopPropagation();
+    this.handleSingleClick(event, option);
+    const emitDetails = {
+      id: this.dropdownId,
+      type: this.type,
+      data: option,
+    };
+    this.dropdropValueChange.emit(emitDetails);
+  }
+  handleMultiOptionClick(event, option) {
+    event.stopPropagation();
+    this.handleMultiClick(event, option);
+    const emitDetails = {
+      id: this.dropdownId,
+      type: this.type,
+      data: this.currentMulti,
+    };
+    this.dropdropMultiValueChange.emit(emitDetails);
+  }
+  handleOptionHover(index) {
+    this.focusedOptionIndex = index;
   }
   render() {
     const { label: currentLabel, id: currentId, value: currentValue } = this.currentSingle[0];
     const classAttributes = ["hy-dropdown", this.single ? "hy-dropdown--single" : ""].join(" ");
     if (this.single) {
-      return (h(Host, { class: classAttributes }, this.dropdownLabel && (h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": this.dropdownLabel, "data-current-id": currentId, "data-current-value": currentValue, value: currentId, type: "button" }, currentLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
+      return (h(Host, { class: classAttributes }, this.dropdownLabel && (h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), h("div", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-controls": "dropdownPanel", "aria-haspopup": "listbox", role: "combobox", onClick: (event) => this.handlePanelToggle(event), onKeyDown: (event) => this.handleKeyDown(event), "aria-label": this.dropdownLabel, "data-current-id": currentId, "data-current-value": currentValue, "data-value": currentId, tabIndex: 0 }, h("input", { "aria-hidden": "true", class: "hy-dropdown__hidden-input", type: "hidden", value: currentId }), currentLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), h("ul", { "checkbox-checked": this.isChecked ? "true" : "false", id: "dropdownPanel", class: `hy-dropdown__panel ${!this.isPanelOpen ? "is-hidden" : ""}`, "aria-expanded": `${!this.isPanelOpen || false}`, role: "listbox", "aria-labelledby": "dropdownToggle" }, this._dropdownOptions.map(({ id, label, value }, index, items) => (h("li", { key: id, "data-id": `${id}`, role: "option", class: `hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? "is-last" : ""}
+                  ${this.focusedOptionIndex === index ? "hy-dropdown__panel-item--focused" : ""}`, onClick: (event) => this.handleOptionSingleClick(event, items[index]), onMouseEnter: () => this.handleOptionHover(index) }, h("span", { "data-id": `${id}`, class: "hy-dropdown__checkbox", "data-value": `${value}` }, label, h("hy-icon", { class: "hy-dropdown__label-icon", icon: "hy-icon-done", size: 14, "aria-hidden": "true" }))))))));
     }
     else {
-      return (h(Host, { class: classAttributes }, h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": this.dropdownLabel, type: "button" }, this.dropdownLabel && this.dropdownLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
+      return (h(Host, { class: classAttributes }, h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-controls": "dropdownPanel", "aria-haspopup": "listbox", role: "combobox", onClick: (event) => this.handlePanelToggle(event), "aria-label": this.dropdownLabel, type: "button" }, this.dropdownLabel && this.dropdownLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), h("ul", { "checkbox-checked": this.isChecked ? "true" : "false", id: "dropdownPanel", class: `hy-dropdown__panel ${!this.isPanelOpen ? "is-hidden" : ""}`, "aria-expanded": `${!this.isPanelOpen || false}`, role: "listbox", "aria-labelledby": "dropdownToggle" }, this._dropdownOptions.map(({ id, label, value }, index, items) => (h("li", { key: id, "data-id": `${id}`, role: "option", class: `hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? "is-last" : ""}
+                  ${this.focusedOptionIndex === index ? "hy-dropdown__panel-item--focused" : ""}`, onClick: (event) => this.handleMultiOptionClick(event, items[index]), onMouseEnter: () => this.handleOptionHover(index) }, h("span", { "data-id": `${id}`, class: "hy-dropdown__checkbox", "data-value": `${value}` }, label, h("hy-icon", { class: "hy-dropdown__label-icon", icon: "hy-icon-done", size: 14, "aria-hidden": "true" }))))))));
     }
   }
   get el() { return this; }
@@ -115,32 +223,25 @@ const HyDropdown$1 = /*@__PURE__*/ proxyCustomElement(class HyDropdown extends H
     "dropdownId": [1, "dropdown-id"],
     "dropdownOptions": [1, "dropdown-options"],
     "defaultLabel": [1, "default-label"],
+    "type": [1],
     "defaultOption": [1032, "default-option"],
     "isPanelOpen": [32],
     "isChecked": [32],
-    "currentSingle": [32]
-  }, [[8, "click", "handleClick"], [2, "click", "handleSingleClick"]]]);
+    "currentSingle": [32],
+    "currentMulti": [32],
+    "focusedOptionIndex": [32]
+  }, [[8, "dropdownPanelToggled", "panelListener"], [0, "keydown", "handleKeyDown"], [8, "click", "handlePanelClickOutside"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["hy-dropdown", "hy-dropdown-panel", "hy-dropdown-panel-item", "hy-icon"];
+  const components = ["hy-dropdown", "hy-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "hy-dropdown":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, HyDropdown$1);
       }
       break;
-    case "hy-dropdown-panel":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "hy-dropdown-panel-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
     case "hy-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();

package/components/hy-dropdown.js.map

@@ -1 +1 @@
-{"file":"hy-dropdown.js","mappings":"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","names":["HyDropdown"],"sources":["./src/components/hy-dropdown/hy-dropdown.scss?tag=hy-dropdown","./src/components/hy-dropdown/hy-dropdown.tsx"],"sourcesContent":[".hy-dropdown {\n  display: inline-block;\n  min-width: 100%;\n  position: relative;\n\n  @include breakpoint($narrow) {\n    min-width: 48.3%;\n  }\n\n  @include breakpoint($extrawide) {\n    min-width: 23.03%;\n  }\n\n  label.hy-dropdown__button-label {\n    @include font-size(16px, 20px);\n    @include font-weight($bold);\n\n    display: block;\n    font-family: var(--main-font-family);\n    letter-spacing: -0.32px;\n    margin-bottom: 8px;\n  }\n\n  &--single {\n    .hy-dropdown__panel {\n      width: max-content;\n      max-width: 330px;\n      min-width: 100%;\n    }\n  }\n}\n\n.hy-dropdown__toggle {\n  @include font-size(14px, 24px);\n  align-items: center;\n  background-color: var(--grayscale-white);\n  border-radius: 0;\n  border: 1px solid var(--grayscale-medium-dark);\n  color: var(--link-blue);\n  display: inline-flex;\n  font-family: var(--main-font-family);\n  font-weight: $semibold;\n  min-height: 40px;\n  height: auto;\n  justify-content: space-between;\n  letter-spacing: normal;\n  padding: 0 0 0 16px;\n  text-align: left;\n  max-width: 280px;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 24px);\n    min-height: 44px;\n  }\n\n  @include breakpoint($extrawide) {\n    min-height: 48px;\n  }\n\n  &:hover {\n    border-color: var(--brand-main-light);\n    cursor: pointer;\n  }\n\n  &:focus {\n    border-color: var(--brand-main-light);\n    border-style: solid inset solid solid;\n    border-width: 2px;\n    outline: 0;\n    text-indent: -1px; // Text stays in place.\n  }\n\n  svg {\n    pointer-events: none;\n  }\n\n  &.is-open {\n    .hy-dropdown__icon {\n      background-color: var(--brand-main-light);\n      transform: rotate(180deg);\n\n      &::before {\n        display: none;\n      }\n\n      svg {\n        fill: var(--grayscale-white);\n      }\n    }\n  }\n}\n\n.hy-dropdown__icon {\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  height: 40px;\n  justify-content: center;\n  margin: 0 0 0 16px;\n  position: relative;\n  width: 40px;\n\n  &::before {\n    //border-left: 1px dashed var(--grayscale-medium-dark);\n    //Line weight 0,5 px; Line color #979797\n    border-left: 0.5px solid var(--grayscale-medium-dark);\n    content: \"\";\n    display: inline-block;\n    height: 65%;\n    left: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  @include breakpoint($narrow) {\n    height: 44px;\n    width: 44px;\n  }\n\n  @include breakpoint($extrawide) {\n    height: 48px;\n    width: 48px;\n  }\n\n  svg {\n    fill: var(--link-blue);\n\n    @include breakpoint($narrow) {\n      height: 16px;\n      width: 16px;\n    }\n  }\n}\n\n.hy-dropdown__panel {\n  background-color: var(--grayscale-white);\n  box-shadow: 0 10px 20px 0 rgba(0, 49, 70, 0.2);\n  list-style: none;\n  margin: 0;\n  padding: 6px;\n  position: absolute;\n  width: 100%;\n  z-index: 11;\n\n  &.is-hidden {\n    display: none;\n    visibility: hidden;\n  }\n}\n\n.hy-dropdown__panel-item {\n  position: relative;\n\n  &:not(.is-last) {\n    margin-bottom: 6px;\n  }\n}\n\n.hy-dropdown__label {\n  @include font-size(14px, 24px);\n  align-items: center;\n  background-color: var(--grayscale-white);\n  border-radius: 0;\n  border: 1px solid var(--grayscale-medium-dark);\n  color: var(--link-blue);\n  display: inline-flex;\n  font-family: var(--main-font-family);\n  font-weight: $semibold;\n  min-height: 40px;\n  justify-content: space-between;\n  letter-spacing: normal;\n  padding: 0 16px;\n  text-align: left;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 24px);\n  }\n}\n\n.hy-dropdown__label-icon {\n  align-items: center;\n  display: none !important;\n  flex-shrink: 0;\n  height: 40px;\n  justify-content: center;\n  position: relative;\n  visibility: hidden;\n  width: 40px;\n}\n\n.hy-dropdown__checkbox {\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  width: 100%;\n  z-index: 10;\n\n  &:checked {\n    & + label {\n      border-color: var(--grayscale-black);\n      border-style: solid inset solid solid;\n      border-width: 2px;\n      color: var(--grayscale-black);\n      outline: 0;\n      text-indent: -1px; // Text stays in place.\n\n      .hy-dropdown__label-icon {\n        display: inline-flex !important;\n        visibility: visible;\n      }\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n\n    & + label {\n      border-color: var(--brand-main-light);\n    }\n  }\n\n  &:focus {\n    & + label {\n      border-color: var(--brand-main-light);\n      border-style: solid inset solid solid;\n      border-width: 2px;\n      outline: 0;\n      text-indent: -1px; // Text stays in place.\n    }\n  }\n}\n","import {Component, Element, Host, h, State, Listen, Prop, Watch} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\nexport interface IDropdownItem {\n  id: string | number;\n  label: string;\n  value: string | number;\n}\n\nexport interface DefaultValue {\n  id: string | number;\n  label: string;\n  value: string | number;\n}\n\n@Component({\n  tag: \"hy-dropdown\",\n  styleUrl: \"hy-dropdown.scss\",\n  shadow: false,\n})\nexport class HyDropdown {\n  private _dropdownOptions: IDropdownItem[];\n  @Element() el: HTMLElement;\n  @Prop() single: boolean = false;\n  @Prop() dropdownLabel: string = null;\n  @Prop() dropdownId: string = \"dropdownToggle\";\n  @Prop() dropdownOptions: IDropdownItem[] | string;\n  @Prop() defaultLabel: string = \"All\";\n  @Prop({mutable: true}) defaultOption: string | number = null;\n  @State() isPanelOpen: boolean = false;\n  @State() isChecked: boolean = false;\n  @State() currentSingle: DefaultValue[] = [{id: 0, label: this.defaultLabel, value: 0}];\n\n  async componentWillLoad() {\n    this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);\n  }\n\n  componentWillUpdate() {\n    const items = this.el.querySelectorAll(\".hy-dropdown__checkbox\") as any;\n    if (items) {\n      if ([...items].some((item) => item.checked == true)) {\n        this.isChecked = true;\n      } else {\n        this.isChecked = false;\n      }\n    }\n  }\n\n  @Watch(\"defaultOption\")\n  watchPropHandler(newValue: string | number, oldValue: string | number) {\n    if (!this.single) return;\n\n    if (newValue !== oldValue) {\n      const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n        HTMLInputElement\n      >;\n\n      Array.from(dropdownPanelCheckboxElements).filter((item) => {\n        if (item.id == newValue) {\n          item.checked = true;\n          this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue) as any;\n          return;\n        }\n        return null;\n      });\n    }\n  }\n\n  handlePanelToggle() {\n    this.isPanelOpen = !this.isPanelOpen;\n  }\n\n  @Listen(\"click\", {target: \"window\"})\n  handleClick(event) {\n    const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`) as HTMLButtonElement;\n    const dropdownPanelElement = this.el.querySelector(\".hy-dropdown__panel\") as HTMLElement;\n    const dropdownPanelCheckboxElements = this.el.querySelectorAll(\".hy-dropdown__checkbox\");\n    const dropdownToggleButtonIconElement = this.el.querySelector(\".hy-dropdown__icon\") as HTMLElement;\n\n    const {target} = event;\n\n    const allowedElements = [\n      dropdownToggleButtonElement,\n      dropdownPanelElement,\n      dropdownToggleButtonIconElement,\n      ...dropdownPanelCheckboxElements, // Spread (\"copy\") items to allowedElement array.\n    ];\n\n    if (this.isPanelOpen && !allowedElements.includes(target)) {\n      this.isPanelOpen = false;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"click\", {capture: true})\n  handleSingleClick(event) {\n    if (!this.single || !this.isPanelOpen) return;\n    const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n      HTMLInputElement\n    >;\n    const allowedElements = [...dropdownPanelCheckboxElements];\n    const {target} = event;\n    if (!allowedElements.includes(target)) return;\n    Array.from(dropdownPanelCheckboxElements).filter((item) => {\n      if (item.id == target.id) {\n        if (!item.checked) {\n          this.currentSingle = [{id: null, label: this.defaultLabel, value: null}];\n          return;\n        }\n        this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id) as any;\n        return;\n      }\n      if (item.id !== target.id && item.checked) {\n        item.checked = false;\n        return;\n      }\n      return null;\n    });\n\n    event.stopPropagation();\n  }\n\n  render() {\n    const {label: currentLabel, id: currentId, value: currentValue} = this.currentSingle[0];\n    const classAttributes = [\"hy-dropdown\", this.single ? \"hy-dropdown--single\" : \"\"].join(\" \");\n\n    if (this.single) {\n      return (\n        <Host class={classAttributes}>\n          {this.dropdownLabel && (\n            <label class=\"hy-dropdown__button-label\" htmlFor={this.dropdownId}>\n              {this.dropdownLabel}\n            </label>\n          )}\n          <button\n            id={this.dropdownId}\n            class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n            aria-expanded={`${this.isPanelOpen || false}`}\n            aria-controls=\"dropdownPanel\"\n            onClick={() => this.handlePanelToggle()}\n            aria-label={this.dropdownLabel}\n            data-current-id={currentId}\n            data-current-value={currentValue}\n            value={currentId}\n            type=\"button\"\n          >\n            {currentLabel}\n            <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n          </button>\n          <hy-dropdown-panel checkbox-checked={this.isChecked ? \"true\" : \"false\"} is-hidden={!this.isPanelOpen}>\n            {this._dropdownOptions.map(({id, label, value}, index) => (\n              <hy-dropdown-panel-item\n                dropdown-item-id={id}\n                dropdown-item-label={label}\n                dropdown-item-value={value}\n                is-last={this._dropdownOptions.length - 1 === index}\n              />\n            ))}\n          </hy-dropdown-panel>\n        </Host>\n      );\n    } else {\n      return (\n        <Host class={classAttributes}>\n          <button\n            id={this.dropdownId}\n            class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n            aria-expanded={`${this.isPanelOpen || false}`}\n            aria-controls=\"dropdownPanel\"\n            onClick={() => this.handlePanelToggle()}\n            aria-label={this.dropdownLabel}\n            type=\"button\"\n          >\n            {this.dropdownLabel && this.dropdownLabel}\n            <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n          </button>\n          <hy-dropdown-panel checkbox-checked={this.isChecked ? \"true\" : \"false\"} is-hidden={!this.isPanelOpen}>\n            {this._dropdownOptions.map(({id, label, value}, index) => (\n              <hy-dropdown-panel-item\n                dropdown-item-id={id}\n                dropdown-item-label={label}\n                dropdown-item-value={value}\n                is-last={this._dropdownOptions.length - 1 === index}\n              />\n            ))}\n          </hy-dropdown-panel>\n        </Host>\n      );\n    }\n  }\n}\n"],"version":3}
+{"file":"hy-dropdown.js","mappings":"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","names":["HyDropdown"],"sources":["./src/components/hy-dropdown/hy-dropdown.scss?tag=hy-dropdown","./src/components/hy-dropdown/hy-dropdown.tsx"],"sourcesContent":[".hy-dropdown {\n  display: inline-block;\n  min-width: 100%;\n  position: relative;\n\n  @include breakpoint($narrow) {\n    min-width: 48.3%;\n  }\n\n  @include breakpoint($extrawide) {\n    min-width: 23.03%;\n  }\n\n  label.hy-dropdown__button-label {\n    @include font-size(16px, 20px);\n    @include font-weight($bold);\n\n    display: block;\n    font-family: var(--main-font-family);\n    letter-spacing: -0.32px;\n    margin-bottom: 8px;\n  }\n\n  &--single {\n    .hy-dropdown__panel {\n      width: max-content;\n      max-width: 330px;\n      min-width: 100%;\n    }\n  }\n\n  .hy-dropdown__hidden-input {\n    display: none;\n    height: 0;\n    font-size: 0;\n  }\n}\n\n.hy-dropdown__toggle {\n  @include font-size(14px, 24px);\n  align-items: center;\n  background-color: var(--grayscale-white);\n  border-radius: 0;\n  border: 1px solid var(--grayscale-medium-dark);\n  color: var(--link-blue);\n  display: inline-flex;\n  font-family: var(--main-font-family);\n  font-weight: $semibold;\n  min-height: 40px;\n  height: auto;\n  justify-content: space-between;\n  letter-spacing: normal;\n  padding: 0 0 0 16px;\n  text-align: left;\n  max-width: 280px;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 24px);\n    min-height: 44px;\n  }\n\n  @include breakpoint($extrawide) {\n    min-height: 48px;\n  }\n\n  &:hover {\n    border-color: var(--brand-main-light);\n    cursor: pointer;\n  }\n\n  &:focus {\n    border-color: var(--brand-main-light);\n    border-style: solid inset solid solid;\n    border-width: 2px;\n    outline: 0;\n    text-indent: -1px; // Text stays in place.\n  }\n\n  svg {\n    pointer-events: none;\n  }\n\n  &.is-open {\n    .hy-dropdown__icon {\n      background-color: var(--brand-main-light);\n      transform: rotate(180deg);\n\n      &::before {\n        display: none;\n      }\n\n      svg {\n        fill: var(--grayscale-white);\n      }\n    }\n  }\n}\n\n.hy-dropdown__icon {\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  height: 40px;\n  justify-content: center;\n  margin: 0 0 0 16px;\n  position: relative;\n  width: 40px;\n\n  &::before {\n    //border-left: 1px dashed var(--grayscale-medium-dark);\n    //Line weight 0,5 px; Line color #979797\n    border-left: 0.5px solid var(--grayscale-medium-dark);\n    content: \"\";\n    display: inline-block;\n    height: 65%;\n    left: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  @include breakpoint($narrow) {\n    height: 44px;\n    width: 44px;\n  }\n\n  @include breakpoint($extrawide) {\n    height: 48px;\n    width: 48px;\n  }\n\n  svg {\n    fill: var(--link-blue);\n\n    @include breakpoint($narrow) {\n      height: 16px;\n      width: 16px;\n    }\n  }\n}\n\n.hy-dropdown__panel {\n  background-color: var(--grayscale-white);\n  box-shadow: 0 10px 20px 0 rgba(0, 49, 70, 0.2);\n  list-style: none;\n  margin: 0;\n  padding: 6px;\n  position: absolute;\n  width: 100%;\n  z-index: 11;\n\n  &.is-hidden {\n    display: none;\n    visibility: hidden;\n  }\n}\n\n.hy-dropdown__panel-item {\n  @include font-size(14px, 24px);\n  align-items: center;\n  background-color: var(--grayscale-white);\n  border-radius: 0;\n  border: 1px solid var(--grayscale-medium-dark);\n  color: var(--link-blue);\n  display: inline-flex;\n  font-family: var(--main-font-family);\n  font-weight: $semibold;\n  min-height: 40px;\n  justify-content: space-between;\n  letter-spacing: normal;\n  position: relative;\n  padding: 0;\n  text-align: left;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 24px);\n  }\n\n  &:not(.is-last) {\n    margin-bottom: 6px;\n  }\n\n  &[aria-selected=\"true\"] .hy-dropdown__checkbox {\n    border-color: var(--grayscale-black);\n    border-style: solid inset solid solid;\n    border-width: 2px;\n    color: var(--grayscale-black);\n    outline: 0;\n    text-indent: -1px; // Text stays in place.\n\n    .hy-dropdown__label-icon {\n      display: inline-flex !important;\n      visibility: visible;\n    }\n  }\n\n  &--focused {\n    cursor: pointer;\n    border-color: var(--brand-main-light);\n    border-style: solid inset solid solid;\n    border-width: 2px;\n    outline: 0;\n    text-indent: -1px; // Text stays in place.\n  }\n}\n\n.hy-dropdown__label-icon {\n  align-items: center;\n  display: none !important;\n  flex-shrink: 0;\n  height: 40px;\n  justify-content: center;\n  position: relative;\n  visibility: hidden;\n  width: 40px;\n}\n\n.hy-dropdown__checkbox {\n  display: flex;\n  align-items: center;\n  min-height: 40px;\n  height: 100%;\n  margin: 0;\n  padding: 0 16px;\n  width: 100%;\n  z-index: 10;\n\n  &:hover {\n    cursor: pointer;\n    border-color: var(--brand-main-active);\n  }\n\n  &:focus-within {\n    & {\n      border-color: var(--brand-main-light);\n      border-style: solid inset solid solid;\n      border-width: 2px;\n      outline: 0;\n      text-indent: -1px; // Text stays in place.\n    }\n  }\n}\n","import {Component, Element, Host, Listen, Event, EventEmitter, h, State, Prop, Watch} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\nexport interface IDropdownItem {\n  id: string | number;\n  label: string;\n  value: string | number;\n}\n\nexport interface DefaultValue {\n  id: string | number;\n  label: string;\n  value: string | number;\n}\n\n@Component({\n  tag: \"hy-dropdown\",\n  styleUrl: \"hy-dropdown.scss\",\n  shadow: false,\n})\nexport class HyDropdown {\n  private _dropdownOptions: IDropdownItem[];\n  @Element() el: HTMLElement;\n  @Prop() single: boolean = false;\n  @Prop() dropdownLabel: string = null;\n  @Prop() dropdownId: string = \"dropdownToggle\";\n  @Prop() dropdownOptions: IDropdownItem[] | string;\n  @Prop() defaultLabel: string = \"All\";\n  @Prop() type: string = null;\n  @Prop({mutable: true}) defaultOption: string | number = null;\n  @State() isPanelOpen: boolean = false;\n  @State() isChecked: boolean = false;\n  @State() currentSingle: DefaultValue[] = [{id: 0, label: this.defaultLabel, value: 0}];\n  @State() currentMulti: IDropdownItem[];\n\n  @State() focusedOptionIndex: number = 0;\n\n  @Event({\n    eventName: `dropdownPanelToggled`,\n    composed: true,\n    bubbles: true,\n  })\n  dropdownPanelToggled: EventEmitter;\n\n  @Event({\n    eventName: `dropdownValueChanged`,\n    composed: true,\n  })\n  dropdropValueChange: EventEmitter;\n\n  @Event({\n    eventName: `dropdownMultiValueChanged`,\n    composed: true,\n  })\n  dropdropMultiValueChange: EventEmitter;\n\n  @Event({\n    eventName: `dropdownKeyPress`,\n    composed: true,\n  })\n  dropdownKeyPress: EventEmitter;\n\n  async componentWillLoad() {\n    this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);\n  }\n\n  componentWillUpdate() {\n    const items = this.el.querySelectorAll(\".hy-dropdown__checkbox\") as any;\n    if (items) {\n      if ([...items].some((item) => item.checked == true)) {\n        this.isChecked = true;\n      } else {\n        this.isChecked = false;\n      }\n    }\n  }\n\n  @Watch(\"defaultOption\")\n  watchPropHandler(newValue: string | number, oldValue: string | number) {\n    if (!this.single) return;\n\n    if (newValue !== oldValue) {\n      const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n        HTMLInputElement\n      >;\n\n      Array.from(dropdownPanelCheckboxElements).filter((item) => {\n        if (item.id == newValue) {\n          item.checked = true;\n          this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue) as any;\n          return;\n        }\n        return null;\n      });\n    }\n  }\n\n  @Listen(\"dropdownPanelToggled\", {target: \"window\"})\n  panelListener(e) {\n    if (this.isPanelOpen && e.detail.dropdownId !== this.dropdownId) {\n      this.isPanelOpen = false;\n    }\n  }\n\n  private handleMultiClick(event, option) {\n    event.stopPropagation();\n    const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n      HTMLInputElement\n    >;\n    Array.from(dropdownPanelCheckboxElements).filter((i) => {\n      const item = i.closest(\"li\");\n      if (item.dataset.id == option.id && !item.hasAttribute(\"aria-selected\")) {\n        item.setAttribute(\"aria-selected\", \"true\");\n        this.currentMulti =\n          this.currentMulti && this.currentMulti.length > 0 ? [...this.currentMulti, option] : [option];\n        return;\n      }\n      if (item.dataset.id === option.id && item.hasAttribute(\"aria-selected\")) {\n        item.removeAttribute(\"aria-selected\");\n        if (this.currentMulti.length > 0) {\n          const index = this.currentMulti.indexOf(option);\n          this.currentMulti = this.currentMulti.splice(index, 1);\n        }\n        return;\n      }\n      return null;\n    });\n  }\n\n  private handleSingleClick(event, option) {\n    if (!this.single || !this.isPanelOpen) return;\n    const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n      HTMLInputElement\n    >;\n    event.stopPropagation();\n\n    Array.from(dropdownPanelCheckboxElements).filter((i) => {\n      const item = i.closest(\"li\");\n      if (item.dataset.id == option.id) {\n        if (item.hasAttribute(\"aria-selected\")) {\n          item.removeAttribute(\"aria-selected\");\n          this.currentSingle = [{id: null, label: this.defaultLabel, value: null}];\n          return;\n        }\n        item.setAttribute(\"aria-selected\", \"true\");\n        this.currentSingle = this._dropdownOptions.filter((o) => o.id == option.id) as any;\n        return;\n      }\n      if (item.dataset.id !== option.id && item.hasAttribute(\"aria-selected\")) {\n        item.removeAttribute(\"aria-selected\");\n        return;\n      }\n      return null;\n    });\n  }\n\n  @Listen(\"keydown\", {capture: false})\n  handleKeyDown(event: KeyboardEvent) {\n    event.stopPropagation();\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        if (!this.isPanelOpen) {\n          this.handlePanelToggle(event);\n          return;\n        }\n        this.focusedOptionIndex = (this.focusedOptionIndex + 1) % this._dropdownOptions.length;\n        break;\n      case \"ArrowUp\":\n        this.focusedOptionIndex =\n          (this.focusedOptionIndex - 1 + this._dropdownOptions.length) % this._dropdownOptions.length;\n        event.preventDefault();\n        break;\n      case \"Enter\":\n      case \" \":\n        if (!this.isPanelOpen) {\n          event.preventDefault();\n          this.handlePanelToggle(event);\n          return;\n        }\n        if (this.single) {\n          this.handleOptionSingleClick(event, this._dropdownOptions[this.focusedOptionIndex]);\n        } else {\n          this.handleMultiOptionClick(event, this._dropdownOptions[this.focusedOptionIndex]);\n        }\n        const emitDetails = {\n          id: this.dropdownId,\n          type: this.type,\n          data: this._dropdownOptions[this.focusedOptionIndex],\n        };\n        this.dropdownKeyPress.emit(emitDetails);\n        event.preventDefault();\n        break;\n      case \"Escape\":\n      case \"Tab\":\n        this.isPanelOpen = false;\n        break;\n      default:\n        break;\n    }\n  }\n\n  private handlePanelToggle(e) {\n    e.stopPropagation();\n    this.isPanelOpen = !this.isPanelOpen;\n\n    const emitDetails = {\n      dropdownId: this.dropdownId,\n      panelOpen: this.isPanelOpen,\n    };\n    this.dropdownPanelToggled.emit(emitDetails);\n  }\n\n  @Listen(\"click\", {target: \"window\"})\n  handlePanelClickOutside(e) {\n    e.stopPropagation();\n    const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`) as HTMLButtonElement;\n    const dropdownPanelElement = this.el.querySelector(\".hy-dropdown__panel\") as HTMLElement;\n    const dropdownPanelCheckboxElements = this.el.querySelectorAll(\".hy-dropdown__panel-item\");\n    const dropdownPanelCheckboxes = this.el.querySelectorAll(\".hy-dropdown__checkbox\");\n    const dropdownToggleButtonIconElement = this.el.querySelectorAll(\".hy-dropdown__icon\");\n\n    const {target} = e;\n\n    const allowedElements = [\n      this.el,\n      dropdownToggleButtonElement,\n      dropdownPanelElement,\n      ...dropdownPanelCheckboxes,\n      dropdownToggleButtonIconElement,\n      ...dropdownPanelCheckboxElements, // Spread (\"copy\") items to allowedElement array.\n    ];\n\n    if (this.isPanelOpen && !allowedElements.includes(target)) {\n      this.isPanelOpen = false;\n    }\n  }\n\n  private handleOptionSingleClick(event, option) {\n    event.stopPropagation();\n    this.handleSingleClick(event, option);\n    const emitDetails = {\n      id: this.dropdownId,\n      type: this.type,\n      data: option,\n    };\n    this.dropdropValueChange.emit(emitDetails);\n  }\n\n  private handleMultiOptionClick(event, option) {\n    event.stopPropagation();\n    this.handleMultiClick(event, option);\n    const emitDetails = {\n      id: this.dropdownId,\n      type: this.type,\n      data: this.currentMulti,\n    };\n    this.dropdropMultiValueChange.emit(emitDetails);\n  }\n\n  private handleOptionHover(index) {\n    this.focusedOptionIndex = index;\n  }\n\n  render() {\n    const {label: currentLabel, id: currentId, value: currentValue} = this.currentSingle[0];\n    const classAttributes = [\"hy-dropdown\", this.single ? \"hy-dropdown--single\" : \"\"].join(\" \");\n    if (this.single) {\n      return (\n        <Host class={classAttributes}>\n          {this.dropdownLabel && (\n            <label class=\"hy-dropdown__button-label\" htmlFor={this.dropdownId}>\n              {this.dropdownLabel}\n            </label>\n          )}\n          <div\n            id={this.dropdownId}\n            class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n            aria-expanded={`${this.isPanelOpen || false}`}\n            aria-controls=\"dropdownPanel\"\n            aria-haspopup=\"listbox\"\n            role=\"combobox\"\n            onClick={(event) => this.handlePanelToggle(event)}\n            onKeyDown={(event) => this.handleKeyDown(event)}\n            aria-label={this.dropdownLabel}\n            data-current-id={currentId}\n            data-current-value={currentValue}\n            data-value={currentId}\n            tabIndex={0}\n          >\n            <input aria-hidden=\"true\" class=\"hy-dropdown__hidden-input\" type=\"hidden\" value={currentId}></input>\n            {currentLabel}\n            <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n          </div>\n          <ul\n            checkbox-checked={this.isChecked ? \"true\" : \"false\"}\n            id=\"dropdownPanel\"\n            class={`hy-dropdown__panel ${!this.isPanelOpen ? \"is-hidden\" : \"\"}`}\n            aria-expanded={`${!this.isPanelOpen || false}`}\n            role=\"listbox\"\n            aria-labelledby=\"dropdownToggle\"\n          >\n            {this._dropdownOptions.map(({id, label, value}, index, items) => (\n              <li\n                key={id}\n                data-id={`${id}`}\n                role=\"option\"\n                class={`hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? \"is-last\" : \"\"}\n                  ${this.focusedOptionIndex === index ? \"hy-dropdown__panel-item--focused\" : \"\"}`}\n                onClick={(event) => this.handleOptionSingleClick(event, items[index])}\n                onMouseEnter={() => this.handleOptionHover(index)}\n              >\n                <span data-id={`${id}`} class=\"hy-dropdown__checkbox\" data-value={`${value}`}>\n                  {label}\n                  <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n                </span>\n              </li>\n            ))}\n          </ul>\n        </Host>\n      );\n    } else {\n      return (\n        <Host class={classAttributes}>\n          <button\n            id={this.dropdownId}\n            class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n            aria-expanded={`${this.isPanelOpen || false}`}\n            aria-controls=\"dropdownPanel\"\n            aria-haspopup=\"listbox\"\n            role=\"combobox\"\n            onClick={(event) => this.handlePanelToggle(event)}\n            aria-label={this.dropdownLabel}\n            type=\"button\"\n          >\n            {this.dropdownLabel && this.dropdownLabel}\n            <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n          </button>\n          <ul\n            checkbox-checked={this.isChecked ? \"true\" : \"false\"}\n            id=\"dropdownPanel\"\n            class={`hy-dropdown__panel ${!this.isPanelOpen ? \"is-hidden\" : \"\"}`}\n            aria-expanded={`${!this.isPanelOpen || false}`}\n            role=\"listbox\"\n            aria-labelledby=\"dropdownToggle\"\n          >\n            {this._dropdownOptions.map(({id, label, value}, index, items) => (\n              <li\n                key={id}\n                data-id={`${id}`}\n                role=\"option\"\n                class={`hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? \"is-last\" : \"\"}\n                  ${this.focusedOptionIndex === index ? \"hy-dropdown__panel-item--focused\" : \"\"}`}\n                onClick={(event) => this.handleMultiOptionClick(event, items[index])}\n                onMouseEnter={() => this.handleOptionHover(index)}\n              >\n                <span data-id={`${id}`} class=\"hy-dropdown__checkbox\" data-value={`${value}`}>\n                  {label}\n                  <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n                </span>\n              </li>\n            ))}\n          </ul>\n        </Host>\n      );\n    }\n  }\n}\n"],"version":3}

package/components/hy-footer-info.js

@@ -11,7 +11,7 @@ import { d as defineCustomElement$4 } from './heading.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './site-logo.js';
 
-const hyFooterInfoCss = ":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-footer-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:auto;padding:0 16px 40px 16px;place-content:center space-between}@media (min-width: 30rem){.hy-footer-info{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0 auto;max-width:120.0625rem;padding:0 24px 32px 24px}}@media (min-width: 60rem){.hy-footer-info{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:0 32px 36px 32px}}@media (min-width: 75.0625rem){.hy-footer-info{padding:0 32px 40px 32px}}.hy-footer-info__content{margin-bottom:24px;width:100%}@media (min-width: 30rem){.hy-footer-info__content{margin-bottom:32px;width:100%}}@media (min-width: 60rem){.hy-footer-info__content{width:31.11%}}.hy-footer-info__content .hy-heading{padding-top:0 !important}.hy-footer-info__ingress{font-size:0.9375rem;line-height:20px;font-weight:400;letter-spacing:-0.09px;color:var(--grayscale-black);font-family:var(--main-font-family);padding-bottom:24px}@media (min-width: 60rem){.hy-footer-info__ingress{font-size:1rem;line-height:22px;letter-spacing:-0.1px;padding-bottom:16px}}@media (min-width: 1601px){.hy-footer-info__ingress{font-size:1.0625rem;line-height:26px}}@media (min-width: 75.0625rem){.hy-footer-info__ingress{padding-bottom:24px}}.hy-footer-info__ingress a{font-size:0.875rem;line-height:20px;color:var(--link-blue);font-family:var(--main-font-family);font-weight:600;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}@media (min-width: 30rem){.hy-footer-info__ingress a{font-size:1rem;line-height:24px;letter-spacing:-0.1px}}@media (min-width: 1601px){.hy-footer-info__ingress a{font-size:1.0625rem;line-height:26px}}.hy-footer-info__ingress a:hover{color:var(--brand-main)}.hy-footer-info__ingress a[target=_blank]:after{display:block;content:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");margin-left:3px;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.hy-footer-info__ingress a[target=_blank]:after:hover{content:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\")}.hy-footer-info__ingress a[target=_blank]:hover:after{content:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\")}.hy-footer-info__links{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;max-height:auto;overflow:hidden;width:100%}@media (min-width: 30rem){.hy-footer-info__links{-ms-flex-line-pack:justify;align-content:space-between;max-height:555px;width:100%}}@media (min-width: 60rem){.hy-footer-info__links{max-height:530px;width:65.56%}}@media (min-width: 87.5rem){.hy-footer-info__links{max-height:460px}}@media (min-width: 30rem){.hy-footer-info__links.is-group:not(.luomus){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;max-height:none}}.hy-footer-info .hy-accordion__content--inner-wrapper{width:100%}.hy-footer-info.luomus{background-color:var(--grayscale-black);color:var(--grayscale-white);padding-top:40px}.hy-footer-info.luomus .hy-footer-info__logo{font-size:1.125rem;line-height:16px;font-family:var(--main-font-family);font-weight:bold;letter-spacing:-0.9px}.hy-footer-info.luomus .hy-footer-info__logo .hy-site-logo__label{max-width:100%}.hy-footer-info.luomus .hy-footer-info__branding{padding:22px 0 62px}.hy-footer-info.luomus .hy-footer-info__branding a img{height:32px;width:148px}.hy-footer-info.luomus .luomus-footer-content{color:var(--grayscale-white);margin:8px 0}.hy-footer-info.luomus .luomus-footer-content__link{font-size:1.125rem;line-height:24px;font-weight:700;color:var(--grayscale-white);font-family:var(--main-font-family);font-style:normal;letter-spacing:-0.36px;text-decoration:none}.hy-footer-info.luomus .luomus-footer-content__description{font-size:1rem;line-height:22px;font-weight:400;color:var(--grayscale-white);font-family:var(--main-font-family);font-style:normal;letter-spacing:-0.1px;padding-bottom:32px}";
+const hyFooterInfoCss = ":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-footer-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:auto;padding:0 16px 40px 16px;place-content:center space-between}@media (min-width: 30rem){.hy-footer-info{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0 auto;max-width:120.0625rem;padding:0 24px 32px 24px}}@media (min-width: 60rem){.hy-footer-info{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:0 32px 36px 32px}}@media (min-width: 75.0625rem){.hy-footer-info{padding:0 32px 40px 32px}}.hy-footer-info__content{margin-bottom:24px;width:100%}@media (min-width: 30rem){.hy-footer-info__content{margin-bottom:32px;width:100%}}@media (min-width: 60rem){.hy-footer-info__content{width:31.11%}}.hy-footer-info__content .hy-heading{padding-top:0 !important}.hy-footer-info__ingress{font-size:0.9375rem;line-height:20px;font-weight:400;letter-spacing:-0.09px;color:var(--grayscale-black);font-family:var(--main-font-family);padding-bottom:24px}@media (min-width: 60rem){.hy-footer-info__ingress{font-size:1rem;line-height:22px;letter-spacing:-0.1px;padding-bottom:16px}}@media (min-width: 1601px){.hy-footer-info__ingress{font-size:1.0625rem;line-height:26px}}@media (min-width: 75.0625rem){.hy-footer-info__ingress{padding-bottom:24px}}.hy-footer-info__ingress a{font-size:0.875rem;line-height:20px;color:var(--link-blue);font-family:var(--main-font-family);font-weight:600;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}@media (min-width: 30rem){.hy-footer-info__ingress a{font-size:1rem;line-height:24px;letter-spacing:-0.1px}}@media (min-width: 1601px){.hy-footer-info__ingress a{font-size:1.0625rem;line-height:26px}}.hy-footer-info__ingress a:hover{color:var(--brand-main)}.hy-footer-info__ingress a[target=_blank]:after{display:block;content:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");margin-left:3px;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.hy-footer-info__ingress a[target=_blank]:after:hover{content:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\")}.hy-footer-info__ingress a[target=_blank]:hover:after{content:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\")}.hy-footer-info__links{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;max-height:auto;overflow:hidden;width:100%}@media (min-width: 30rem){.hy-footer-info__links{-ms-flex-line-pack:justify;align-content:space-between;max-height:555px;width:100%}}@media (min-width: 60rem){.hy-footer-info__links{max-height:555px;width:65.56%}}@media (min-width: 87.5rem){.hy-footer-info__links{max-height:530px}}@media (min-width: 30rem){.hy-footer-info__links.is-group:not(.luomus){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;max-height:none}}.hy-footer-info .hy-accordion__content--inner-wrapper{width:100%}.hy-footer-info.luomus{background-color:var(--grayscale-black);color:var(--grayscale-white);padding-top:40px}.hy-footer-info.luomus .hy-footer-info__logo{font-size:1.125rem;line-height:16px;font-family:var(--main-font-family);font-weight:bold;letter-spacing:-0.9px}.hy-footer-info.luomus .hy-footer-info__logo .hy-site-logo__label{max-width:100%}.hy-footer-info.luomus .hy-footer-info__branding{padding:22px 0 62px}.hy-footer-info.luomus .hy-footer-info__branding a img{height:32px;width:148px}.hy-footer-info.luomus .luomus-footer-content{color:var(--grayscale-white);margin:8px 0}.hy-footer-info.luomus .luomus-footer-content__link{font-size:1.125rem;line-height:24px;font-weight:700;color:var(--grayscale-white);font-family:var(--main-font-family);font-style:normal;letter-spacing:-0.36px;text-decoration:none}.hy-footer-info.luomus .luomus-footer-content__description{font-size:1rem;line-height:22px;font-weight:400;color:var(--grayscale-white);font-family:var(--main-font-family);font-style:normal;letter-spacing:-0.1px;padding-bottom:32px}";
 
 const HyFooterInfo$1 = /*@__PURE__*/ proxyCustomElement(class HyFooterInfo extends HTMLElement {
   constructor() {

package/components/hy-footer-info.js.map

@@ -1 +1 @@
-{"file":"hy-footer-info.js","mappings":"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","names":["HyFooterInfo"],"sources":["./src/components/footer/hy-footer-info/hy-footer-info.scss?tag=hy-footer-info","./src/components/footer/hy-footer-info/hy-footer-info.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-footer-info {\n  display: flex;\n  flex-direction: column;\n  max-height: auto;\n  padding: 0 16px 40px 16px;\n  place-content: center space-between;\n\n  @include breakpoint($narrow) {\n    flex-direction: column;\n    margin: 0 auto;\n    max-width: $fullhd;\n    padding: 0 24px 32px 24px;\n  }\n\n  @include breakpoint($wide) {\n    flex-direction: row;\n    padding: 0 32px 36px 32px;\n  }\n\n  @include breakpoint($extrawide) {\n    padding: 0 32px 40px 32px;\n  }\n\n  &__content {\n    margin-bottom: 24px;\n    width: 100%;\n\n    @include breakpoint($narrow) {\n      margin-bottom: 32px;\n      width: 100%;\n    }\n\n    @include breakpoint($wide) {\n      width: 31.11%;\n    }\n\n    .hy-heading {\n      padding-top: 0 !important;\n    }\n  }\n\n  &__ingress {\n    @include font-size(15px, 20px);\n    @include font-weight($regular);\n    letter-spacing: -0.09px;\n\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    padding-bottom: 24px;\n\n    @include breakpoint($wide) {\n      @include font-size(16px, 22px);\n      letter-spacing: -0.1px;\n      padding-bottom: 16px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(17px, 26px); // Paragraph Large size\n    }\n\n    @include breakpoint($extrawide) {\n      padding-bottom: 24px;\n    }\n\n    a {\n      @include font-size(14px, 20px); // Paragraph Small size\n      color: var(--link-blue);\n      font-family: var(--main-font-family);\n      font-weight: 600;\n      display: inline-flex;\n\n      @include breakpoint($narrow) {\n        @include font-size(16px, 24px);\n        letter-spacing: -0.1px;\n      }\n\n      @include breakpoint($xlarge) {\n        @include font-size(17px, 26px); // Paragraph Large size\n      }\n\n      &:hover {\n        color: var(--brand-main);\n      }\n    }\n\n    a[target=\"_blank\"]:after {\n      display: block;\n      content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n      margin-left: 3px;\n      transform: rotate(315deg);\n\n      &:hover {\n        content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n      }\n    }\n\n    a[target=\"_blank\"]:hover {\n      &:after {\n        content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n      }\n    }\n  }\n\n  &__links {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    max-height: auto;\n    overflow: hidden;\n    width: 100%;\n\n    @include breakpoint($narrow) {\n      align-content: space-between;\n      max-height: 555px;\n      width: 100%;\n    }\n    @include breakpoint($wide) {\n      max-height: 530px;\n      width: 65.56%;\n    }\n    @include breakpoint($overwide) {\n      max-height: 460px;\n    }\n\n    &.is-group:not(.luomus) {\n      @include breakpoint($narrow) {\n        flex-direction: row;\n        max-height: none;\n      }\n    }\n  }\n\n  .hy-accordion__content--inner-wrapper {\n    width: 100%;\n  }\n}\n\n.hy-footer-info.luomus {\n  background-color: var(--grayscale-black);\n  color: var(--grayscale-white);\n  padding-top: 40px;\n\n  .hy-footer-info__logo {\n    @include font-size(18px, 16px);\n    font-family: var(--main-font-family);\n    font-weight: bold;\n    letter-spacing: -0.9px;\n\n    .hy-site-logo__label {\n      max-width: 100%;\n    }\n  }\n\n  .hy-footer-info__branding {\n    padding: 22px 0 62px;\n    a {\n      img {\n        height: 32px;\n        width: 148px;\n      }\n    }\n  }\n\n  .luomus-footer-content {\n    color: var(--grayscale-white);\n    margin: 8px 0;\n\n    &__link {\n      @include font-size(18px, 24px);\n      @include font-weight($bold);\n\n      color: var(--grayscale-white);\n      font-family: var(--main-font-family);\n      font-style: normal;\n      letter-spacing: -0.36px;\n      text-decoration: none;\n    }\n\n    &__description {\n      @include font-size(16px, 22px);\n      @include font-weight($regular);\n\n      color: var(--grayscale-white);\n      font-family: var(--main-font-family);\n      font-style: normal;\n      letter-spacing: -0.1px;\n      padding-bottom: 32px;\n    }\n  }\n}\n","export interface FooterInfoLinks {\n  label: string;\n  url: string;\n  isExternal: string;\n  isActive?: boolean;\n  mainlink?: boolean;\n  items: Array<FooterInfoLinks>;\n}\n\nexport interface LuomusFooterContent {\n  heading: string;\n  url: string;\n  content?: string;\n}\n\nimport {Component, ComponentInterface, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport ResizeObserver from \"resize-observer-polyfill\";\nimport {\n  ColorVariant,\n  CtaLinkButtonVariants,\n  FooterLinkItemColor,\n  FooterLinkVariants,\n  FooterVariant,\n  HeadingSectionVariants,\n  HeadingVarians,\n} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n  tag: \"hy-footer-info\",\n  styleUrl: \"hy-footer-info.scss\",\n  shadow: false,\n})\nexport class HyFooterInfo implements ComponentInterface {\n  @Element() el: HTMLElement;\n  /**\n   * Content area title.\n   */\n  @Prop() textTitle: string;\n  /**\n   * Content area text.\n   */\n  @Prop() textDescription: string;\n  /**\n   * Content area link button text.\n   */\n  @Prop() linkText: string;\n  /**\n   * Content area link button url.\n   */\n  @Prop() linkUrl: string;\n  @Prop() linkIsExternal: boolean = false;\n  @Prop() linkScLabel?: string;\n\n  /**\n   * Logo url\n   */\n  @Prop() logoUrl?: string;\n  /**\n   * Logo label\n   */\n  @Prop() logoLabel?: string;\n\n  /**\n   * Luomus group Logo url for footer\n   */\n  @Prop() groupLogoUrl?: string;\n\n  @Prop() isGroup: boolean;\n  @Prop() isLuomusGroup: boolean = false;\n  @State() isMobile: boolean;\n\n  private ro: ResizeObserver;\n  private _dataFooterInfoLinks: FooterInfoLinks[];\n  private _dataLuomusFooterContent: LuomusFooterContent[];\n  /**\n   * Data for links to be displayed.\n   */\n  @Prop() dataFooterInfoLinks: FooterInfoLinks[] | string;\n\n  @Prop() luomusFooterContent: LuomusFooterContent[] | string;\n\n  async componentWillLoad() {\n    this._dataFooterInfoLinks = await jsonParserWorker(this.dataFooterInfoLinks);\n    this._dataLuomusFooterContent = await jsonParserWorker(this.luomusFooterContent);\n  }\n\n  componentDidLoad() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.checkForMobile(entry.contentRect.width);\n      }\n    });\n    this.ro.observe(document.body);\n  }\n\n  disconnectedCallback() {\n    this.ro.disconnect();\n  }\n\n  checkForMobile(size: number) {\n    this.isMobile = size <= 479 ? true : false;\n  }\n\n  render() {\n    const links = this._dataFooterInfoLinks as Array<FooterInfoLinks>;\n    const luomusFooterContentItems = this._dataLuomusFooterContent as Array<LuomusFooterContent>;\n\n    const variant = this.isGroup ? FooterLinkVariants.group : FooterLinkVariants.campus;\n    const section = this.isGroup ? HeadingSectionVariants.groupFooterInfo : HeadingSectionVariants.defaultFooterInfo;\n\n    const footerLinkItemClass = this.isGroup ? \"group\" : \"campus\";\n\n    const scLabel = this.linkScLabel && this.linkScLabel.length > 0 ? this.linkScLabel : this.linkText;\n    const logoColor = ColorVariant.white;\n    const linksColor = this.isLuomusGroup ? FooterLinkItemColor.white : FooterLinkItemColor.black;\n\n    return (\n      <Host\n        class={{\n          \"hy-footer-info\": true,\n          luomus: this.isLuomusGroup,\n        }}\n      >\n        <div\n          class={{\n            \"hy-footer-info__content\": true,\n            \"is-group\": this.isGroup,\n          }}\n        >\n          {!this.isLuomusGroup && (\n            <hy-heading heading={HeadingVarians.h2} section={section}>\n              {this.textTitle}\n            </hy-heading>\n          )}\n          {this.isLuomusGroup && (\n            <div class=\"hy-footer-info__logo\">\n              <hy-site-logo\n                type={FooterVariant.footer}\n                isGroup={this.isGroup}\n                color={logoColor}\n                url={this.logoUrl}\n                label={this.logoLabel}\n              />\n            </div>\n          )}\n          {this.isLuomusGroup && (\n            <div class={\"hy-footer-info__branding\"}>\n              <a href={this.groupLogoUrl}>\n                <img src={this.groupLogoUrl} alt={\"Luomus logo\"} />\n              </a>\n            </div>\n          )}\n          {!this.isLuomusGroup && (\n            <div\n              class={{\n                \"hy-footer-info__ingress\": true,\n                \"is-group\": this.isGroup,\n              }}\n              innerHTML={this.textDescription}\n            ></div>\n          )}\n          {!this.isLuomusGroup && this.linkUrl && (\n            <hy-cta-button\n              link-content={this.linkText}\n              sc-label={scLabel}\n              is-external={this.linkIsExternal}\n              url={this.linkUrl}\n              variant={CtaLinkButtonVariants.onWhiteBkgd}\n            />\n          )}\n          {this.isLuomusGroup &&\n            luomusFooterContentItems &&\n            luomusFooterContentItems.map((item) => {\n              return (\n                <div class=\"luomus-footer-content\">\n                  <a href={item.url} class=\"luomus-footer-content__link\">\n                    {item.heading}\n                  </a>\n                  {item.content && <div class=\"luomus-footer-content__description\" innerHTML={item.content}></div>}\n                </div>\n              );\n            })}\n        </div>\n        {this.isMobile && this.isGroup === false ? (\n          <div\n            class={{\n              \"hy-footer-info__links\": true,\n              \"is-group\": this.isGroup,\n              luomus: this.isLuomusGroup,\n            }}\n          >\n            <hy-accordion-container accordionid={\"test\"}>\n              {links &&\n                links.map((link) => {\n                  return (\n                    <hy-accordion-item accordiontitle={link.label}>\n                      <hy-footer-link-item\n                        class={footerLinkItemClass}\n                        variant={variant}\n                        color={linksColor}\n                        label={link.label}\n                        url={link.url}\n                        main-link={link.mainlink}\n                        items={link.items}\n                        isMobile={this.isMobile}\n                      ></hy-footer-link-item>\n                    </hy-accordion-item>\n                  );\n                })}\n            </hy-accordion-container>\n          </div>\n        ) : (\n          <div\n            class={{\n              \"hy-footer-info__links\": true,\n              \"is-group\": this.isGroup,\n              luomus: this.isLuomusGroup,\n            }}\n          >\n            {links &&\n              links.map((link) => {\n                const external_link = link.isExternal === \"external\";\n                return (\n                  <hy-footer-link-item\n                    is-luomus-group={this.isLuomusGroup}\n                    class={footerLinkItemClass}\n                    variant={variant}\n                    color={linksColor}\n                    label={link.label}\n                    url={link.url}\n                    is-external={external_link}\n                    main-link={link.mainlink}\n                    items={link.items}\n                    isMobile={this.isMobile}\n                  ></hy-footer-link-item>\n                );\n              })}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"hy-footer-info.js","mappings":"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","names":["HyFooterInfo"],"sources":["./src/components/footer/hy-footer-info/hy-footer-info.scss?tag=hy-footer-info","./src/components/footer/hy-footer-info/hy-footer-info.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-footer-info {\n  display: flex;\n  flex-direction: column;\n  max-height: auto;\n  padding: 0 16px 40px 16px;\n  place-content: center space-between;\n\n  @include breakpoint($narrow) {\n    flex-direction: column;\n    margin: 0 auto;\n    max-width: $fullhd;\n    padding: 0 24px 32px 24px;\n  }\n\n  @include breakpoint($wide) {\n    flex-direction: row;\n    padding: 0 32px 36px 32px;\n  }\n\n  @include breakpoint($extrawide) {\n    padding: 0 32px 40px 32px;\n  }\n\n  &__content {\n    margin-bottom: 24px;\n    width: 100%;\n\n    @include breakpoint($narrow) {\n      margin-bottom: 32px;\n      width: 100%;\n    }\n\n    @include breakpoint($wide) {\n      width: 31.11%;\n    }\n\n    .hy-heading {\n      padding-top: 0 !important;\n    }\n  }\n\n  &__ingress {\n    @include font-size(15px, 20px);\n    @include font-weight($regular);\n    letter-spacing: -0.09px;\n\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    padding-bottom: 24px;\n\n    @include breakpoint($wide) {\n      @include font-size(16px, 22px);\n      letter-spacing: -0.1px;\n      padding-bottom: 16px;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(17px, 26px); // Paragraph Large size\n    }\n\n    @include breakpoint($extrawide) {\n      padding-bottom: 24px;\n    }\n\n    a {\n      @include font-size(14px, 20px); // Paragraph Small size\n      color: var(--link-blue);\n      font-family: var(--main-font-family);\n      font-weight: 600;\n      display: inline-flex;\n\n      @include breakpoint($narrow) {\n        @include font-size(16px, 24px);\n        letter-spacing: -0.1px;\n      }\n\n      @include breakpoint($xlarge) {\n        @include font-size(17px, 26px); // Paragraph Large size\n      }\n\n      &:hover {\n        color: var(--brand-main);\n      }\n    }\n\n    a[target=\"_blank\"]:after {\n      display: block;\n      content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n      margin-left: 3px;\n      transform: rotate(315deg);\n\n      &:hover {\n        content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n      }\n    }\n\n    a[target=\"_blank\"]:hover {\n      &:after {\n        content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n      }\n    }\n  }\n\n  &__links {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    max-height: auto;\n    overflow: hidden;\n    width: 100%;\n\n    @include breakpoint($narrow) {\n      align-content: space-between;\n      max-height: 555px;\n      width: 100%;\n    }\n    @include breakpoint($wide) {\n      max-height: 555px;\n      width: 65.56%;\n    }\n    @include breakpoint($overwide) {\n      max-height: 530px;\n    }\n\n    &.is-group:not(.luomus) {\n      @include breakpoint($narrow) {\n        flex-direction: row;\n        max-height: none;\n      }\n    }\n  }\n\n  .hy-accordion__content--inner-wrapper {\n    width: 100%;\n  }\n}\n\n.hy-footer-info.luomus {\n  background-color: var(--grayscale-black);\n  color: var(--grayscale-white);\n  padding-top: 40px;\n\n  .hy-footer-info__logo {\n    @include font-size(18px, 16px);\n    font-family: var(--main-font-family);\n    font-weight: bold;\n    letter-spacing: -0.9px;\n\n    .hy-site-logo__label {\n      max-width: 100%;\n    }\n  }\n\n  .hy-footer-info__branding {\n    padding: 22px 0 62px;\n    a {\n      img {\n        height: 32px;\n        width: 148px;\n      }\n    }\n  }\n\n  .luomus-footer-content {\n    color: var(--grayscale-white);\n    margin: 8px 0;\n\n    &__link {\n      @include font-size(18px, 24px);\n      @include font-weight($bold);\n\n      color: var(--grayscale-white);\n      font-family: var(--main-font-family);\n      font-style: normal;\n      letter-spacing: -0.36px;\n      text-decoration: none;\n    }\n\n    &__description {\n      @include font-size(16px, 22px);\n      @include font-weight($regular);\n\n      color: var(--grayscale-white);\n      font-family: var(--main-font-family);\n      font-style: normal;\n      letter-spacing: -0.1px;\n      padding-bottom: 32px;\n    }\n  }\n}\n","export interface FooterInfoLinks {\n  label: string;\n  url: string;\n  isExternal: string;\n  isActive?: boolean;\n  mainlink?: boolean;\n  items: Array<FooterInfoLinks>;\n}\n\nexport interface LuomusFooterContent {\n  heading: string;\n  url: string;\n  content?: string;\n}\n\nimport {Component, ComponentInterface, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport ResizeObserver from \"resize-observer-polyfill\";\nimport {\n  ColorVariant,\n  CtaLinkButtonVariants,\n  FooterLinkItemColor,\n  FooterLinkVariants,\n  FooterVariant,\n  HeadingSectionVariants,\n  HeadingVarians,\n} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n  tag: \"hy-footer-info\",\n  styleUrl: \"hy-footer-info.scss\",\n  shadow: false,\n})\nexport class HyFooterInfo implements ComponentInterface {\n  @Element() el: HTMLElement;\n  /**\n   * Content area title.\n   */\n  @Prop() textTitle: string;\n  /**\n   * Content area text.\n   */\n  @Prop() textDescription: string;\n  /**\n   * Content area link button text.\n   */\n  @Prop() linkText: string;\n  /**\n   * Content area link button url.\n   */\n  @Prop() linkUrl: string;\n  @Prop() linkIsExternal: boolean = false;\n  @Prop() linkScLabel?: string;\n\n  /**\n   * Logo url\n   */\n  @Prop() logoUrl?: string;\n  /**\n   * Logo label\n   */\n  @Prop() logoLabel?: string;\n\n  /**\n   * Luomus group Logo url for footer\n   */\n  @Prop() groupLogoUrl?: string;\n\n  @Prop() isGroup: boolean;\n  @Prop() isLuomusGroup: boolean = false;\n  @State() isMobile: boolean;\n\n  private ro: ResizeObserver;\n  private _dataFooterInfoLinks: FooterInfoLinks[];\n  private _dataLuomusFooterContent: LuomusFooterContent[];\n  /**\n   * Data for links to be displayed.\n   */\n  @Prop() dataFooterInfoLinks: FooterInfoLinks[] | string;\n\n  @Prop() luomusFooterContent: LuomusFooterContent[] | string;\n\n  async componentWillLoad() {\n    this._dataFooterInfoLinks = await jsonParserWorker(this.dataFooterInfoLinks);\n    this._dataLuomusFooterContent = await jsonParserWorker(this.luomusFooterContent);\n  }\n\n  componentDidLoad() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.checkForMobile(entry.contentRect.width);\n      }\n    });\n    this.ro.observe(document.body);\n  }\n\n  disconnectedCallback() {\n    this.ro.disconnect();\n  }\n\n  checkForMobile(size: number) {\n    this.isMobile = size <= 479 ? true : false;\n  }\n\n  render() {\n    const links = this._dataFooterInfoLinks as Array<FooterInfoLinks>;\n    const luomusFooterContentItems = this._dataLuomusFooterContent as Array<LuomusFooterContent>;\n\n    const variant = this.isGroup ? FooterLinkVariants.group : FooterLinkVariants.campus;\n    const section = this.isGroup ? HeadingSectionVariants.groupFooterInfo : HeadingSectionVariants.defaultFooterInfo;\n\n    const footerLinkItemClass = this.isGroup ? \"group\" : \"campus\";\n\n    const scLabel = this.linkScLabel && this.linkScLabel.length > 0 ? this.linkScLabel : this.linkText;\n    const logoColor = ColorVariant.white;\n    const linksColor = this.isLuomusGroup ? FooterLinkItemColor.white : FooterLinkItemColor.black;\n\n    return (\n      <Host\n        class={{\n          \"hy-footer-info\": true,\n          luomus: this.isLuomusGroup,\n        }}\n      >\n        <div\n          class={{\n            \"hy-footer-info__content\": true,\n            \"is-group\": this.isGroup,\n          }}\n        >\n          {!this.isLuomusGroup && (\n            <hy-heading heading={HeadingVarians.h2} section={section}>\n              {this.textTitle}\n            </hy-heading>\n          )}\n          {this.isLuomusGroup && (\n            <div class=\"hy-footer-info__logo\">\n              <hy-site-logo\n                type={FooterVariant.footer}\n                isGroup={this.isGroup}\n                color={logoColor}\n                url={this.logoUrl}\n                label={this.logoLabel}\n              />\n            </div>\n          )}\n          {this.isLuomusGroup && (\n            <div class={\"hy-footer-info__branding\"}>\n              <a href={this.groupLogoUrl}>\n                <img src={this.groupLogoUrl} alt={\"Luomus logo\"} />\n              </a>\n            </div>\n          )}\n          {!this.isLuomusGroup && (\n            <div\n              class={{\n                \"hy-footer-info__ingress\": true,\n                \"is-group\": this.isGroup,\n              }}\n              innerHTML={this.textDescription}\n            ></div>\n          )}\n          {!this.isLuomusGroup && this.linkUrl && (\n            <hy-cta-button\n              link-content={this.linkText}\n              sc-label={scLabel}\n              is-external={this.linkIsExternal}\n              url={this.linkUrl}\n              variant={CtaLinkButtonVariants.onWhiteBkgd}\n            />\n          )}\n          {this.isLuomusGroup &&\n            luomusFooterContentItems &&\n            luomusFooterContentItems.map((item) => {\n              return (\n                <div class=\"luomus-footer-content\">\n                  <a href={item.url} class=\"luomus-footer-content__link\">\n                    {item.heading}\n                  </a>\n                  {item.content && <div class=\"luomus-footer-content__description\" innerHTML={item.content}></div>}\n                </div>\n              );\n            })}\n        </div>\n        {this.isMobile && this.isGroup === false ? (\n          <div\n            class={{\n              \"hy-footer-info__links\": true,\n              \"is-group\": this.isGroup,\n              luomus: this.isLuomusGroup,\n            }}\n          >\n            <hy-accordion-container accordionid={\"test\"}>\n              {links &&\n                links.map((link) => {\n                  return (\n                    <hy-accordion-item accordiontitle={link.label}>\n                      <hy-footer-link-item\n                        class={footerLinkItemClass}\n                        variant={variant}\n                        color={linksColor}\n                        label={link.label}\n                        url={link.url}\n                        main-link={link.mainlink}\n                        items={link.items}\n                        isMobile={this.isMobile}\n                      ></hy-footer-link-item>\n                    </hy-accordion-item>\n                  );\n                })}\n            </hy-accordion-container>\n          </div>\n        ) : (\n          <div\n            class={{\n              \"hy-footer-info__links\": true,\n              \"is-group\": this.isGroup,\n              luomus: this.isLuomusGroup,\n            }}\n          >\n            {links &&\n              links.map((link) => {\n                const external_link = link.isExternal === \"external\";\n                return (\n                  <hy-footer-link-item\n                    is-luomus-group={this.isLuomusGroup}\n                    class={footerLinkItemClass}\n                    variant={variant}\n                    color={linksColor}\n                    label={link.label}\n                    url={link.url}\n                    is-external={external_link}\n                    main-link={link.mainlink}\n                    items={link.items}\n                    isMobile={this.isMobile}\n                  ></hy-footer-link-item>\n                );\n              })}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/hy-footer-link-item2.js

@@ -3,7 +3,7 @@ import { F as FooterLinkItemColor, g as FooterLinkVariants, H as HeadingVarians
 import { d as defineCustomElement$2 } from './heading.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const hyFooterLinkItemCss = ":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-footer-link-item:not([main-link]){width:100%}@media (min-width: 48rem){hy-footer-link-item:not([main-link]){width:50%}}hy-footer-link-item[main-link]{-ms-hyphens:auto;hyphens:auto;min-width:200px;width:100%}@media (min-width: 30rem){hy-footer-link-item[main-link]{width:50%}}hy-footer-link-item.group[main-link]:not([is-luomus-group]){-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:1rem}@media (min-width: 30rem){hy-footer-link-item.group[main-link]:not([is-luomus-group]){-ms-flex-preferred-size:50%;flex-basis:50%;margin:0}}.hy-footer-link-item--container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 48rem){.hy-footer-link-item--container{margin-bottom:1rem}}.hy-footer-link-item--container .hy-footer-link-item:last-child{margin-bottom:16px}.hy-footer-link-item{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);margin-left:0;margin-right:0;position:relative;text-decoration:none}@media (min-width: 30rem){.hy-footer-link-item{margin-left:0;margin-right:24px}}@media (min-width: 60rem){.hy-footer-link-item{margin-left:32px;margin-right:0}}@media (min-width: 1601px){.hy-footer-link-item{margin-left:48px}}.hy-footer-link-item__main{border:0;padding:0;margin-right:-32px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.hy-footer-link-item__main .hy-heading__container>h3.hy-heading{font-size:1rem;line-height:16px;letter-spacing:-0.45px;padding:1.5rem 0 1px 0 !important;text-transform:uppercase}@media (min-width: 30rem){.hy-footer-link-item__main .hy-heading__container>h3.hy-heading{letter-spacing:-0.44px}}.hy-footer-link-item__main .hy-heading__container>h3.hy-heading .hy-footer-link-item__link{color:var(--grayscale-white);font-family:var(--main-font-family);text-decoration:none;margin-bottom:8px}@media (min-width: 48rem){.hy-footer-link-item__main .hy-heading__container>h3.hy-heading .hy-footer-link-item__link{margin-bottom:12px}}.hy-footer-link-item__color-black{font-size:0.875rem;line-height:18px;font-weight:400;border-bottom:1px solid var(--grayscale-black);color:var(--grayscale-black);letter-spacing:-0.5px;padding:16px 20px 14px 0}.hy-footer-link-item__color-black .hy-footer-link-item__icon svg{fill:var(--brand-main-nearly-black);height:12px;margin-right:2px;width:12px}.hy-footer-link-item__color-black .hy-heading__container>h3.hy-headinga.hy-footer-link-item__link:hover{color:var(--brand-main) !important;text-decoration:underline}.hy-footer-link-item__color-black .hy-heading__container>h3.hy-headinga.hy-footer-link-item__link:hover svg{fill:var(--brand-main)}.hy-footer-link-item__color-white{font-size:0.9375rem;line-height:18px;font-weight:600;border-bottom:1px solid var(--grayscale-white);color:var(--grayscale-white);letter-spacing:-0.5px;padding:15px 20px 15px 0}.hy-footer-link-item__color-white:hover,.hy-footer-link-item__color-white:focus-within{text-decoration:underline}.hy-footer-link-item__color-white .hy-footer-link-item__icon svg{fill:var(--grayscale-white)}.hy-footer-link-item__color-white .hy-heading__container>h3.hy-heading .hy-footer-link-item__link:hover{color:var(--grayscale-medium) !important}.hy-footer-link-item__color-white .hy-heading__container>h3.hy-heading .hy-footer-link-item__link:hover svg{fill:var(--grayscale-medium)}.hy-footer-link-item__icon{position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}";
+const hyFooterLinkItemCss = ":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-footer-link-item:not([main-link]){width:100%}@media (min-width: 48rem){hy-footer-link-item:not([main-link]){width:50%}}hy-footer-link-item[main-link]{-ms-hyphens:auto;hyphens:auto;min-width:200px;width:100%}@media (min-width: 30rem){hy-footer-link-item[main-link]{width:50%}}hy-footer-link-item.group[main-link]:not([is-luomus-group]){-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:1rem}@media (min-width: 30rem){hy-footer-link-item.group[main-link]:not([is-luomus-group]){-ms-flex-preferred-size:50%;flex-basis:50%;margin:0}}.hy-footer-link-item--container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 48rem){.hy-footer-link-item--container{margin-bottom:1rem}}.hy-footer-link-item--container .hy-footer-link-item:last-child{margin-bottom:16px}.hy-footer-link-item{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);margin-left:0;margin-right:0;position:relative;text-decoration:none}@media (min-width: 30rem){.hy-footer-link-item{margin-left:0;margin-right:24px}}@media (min-width: 60rem){.hy-footer-link-item{margin-left:32px;margin-right:0}}@media (min-width: 1601px){.hy-footer-link-item{margin-left:48px}}.hy-footer-link-item__main{border:0;padding:0;margin-right:-32px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.hy-footer-link-item__main .hy-heading__container>h3.hy-heading{font-size:1rem;line-height:16px;letter-spacing:-0.45px;padding:1.5rem 0 1px 0 !important;text-transform:uppercase}@media (min-width: 30rem){.hy-footer-link-item__main .hy-heading__container>h3.hy-heading{letter-spacing:-0.44px}}.hy-footer-link-item__main .hy-heading__container>h3.hy-heading .hy-footer-link-item__link[data-color=white]{color:var(--grayscale-white)}.hy-footer-link-item__main .hy-heading__container>h3.hy-heading .hy-footer-link-item__link[data-color=black]{color:var(--grayscale-black)}.hy-footer-link-item__main .hy-heading__container>h3.hy-heading .hy-footer-link-item__link{font-family:var(--main-font-family);text-decoration:none;margin-bottom:8px}@media (min-width: 48rem){.hy-footer-link-item__main .hy-heading__container>h3.hy-heading .hy-footer-link-item__link{margin-bottom:12px}}.hy-footer-link-item__color-black{font-size:0.875rem;line-height:18px;font-weight:400;border-bottom:1px solid var(--grayscale-black);color:var(--grayscale-black);letter-spacing:-0.5px;padding:16px 20px 14px 0}.hy-footer-link-item__color-black .hy-footer-link-item__icon svg{fill:var(--brand-main-nearly-black);height:12px;margin-right:2px;width:12px}.hy-footer-link-item__color-black .hy-heading__container>h3.hy-headinga.hy-footer-link-item__link:hover{color:var(--brand-main) !important;text-decoration:underline}.hy-footer-link-item__color-black .hy-heading__container>h3.hy-headinga.hy-footer-link-item__link:hover svg{fill:var(--brand-main)}.hy-footer-link-item__color-white{font-size:0.9375rem;line-height:18px;font-weight:600;border-bottom:1px solid var(--grayscale-white);color:var(--grayscale-white);letter-spacing:-0.5px;padding:15px 20px 15px 0}.hy-footer-link-item__color-white:hover,.hy-footer-link-item__color-white:focus-within{text-decoration:underline}.hy-footer-link-item__color-white .hy-footer-link-item__icon svg{fill:var(--grayscale-white)}.hy-footer-link-item__color-white .hy-heading__container>h3.hy-heading .hy-footer-link-item__link:hover{color:var(--grayscale-medium) !important}.hy-footer-link-item__color-white .hy-heading__container>h3.hy-heading .hy-footer-link-item__link:hover svg{fill:var(--grayscale-medium)}.hy-footer-link-item__icon{position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}";
 
 const HyFooterLinkItem = /*@__PURE__*/ proxyCustomElement(class HyFooterLinkItem extends HTMLElement {
   constructor() {
@@ -49,7 +49,7 @@ const HyFooterLinkItem = /*@__PURE__*/ proxyCustomElement(class HyFooterLinkItem
         })));
       }
       else {
-        return (h("div", { class: containerClassAttributes }, h("hy-heading", { class: headingClassAttributes, heading: HeadingVarians.h3 }, this.url.length > 0 && (h("a", { class: "hy-footer-link-item__link", href: this.url, style: { color: this.color } }, this.label)), this.url.length == 0 && h("div", { class: "hy-footer-link-item__link" }, this.label)), this.items.map((item) => {
+        return (h("div", { class: containerClassAttributes }, h("hy-heading", { class: headingClassAttributes, heading: HeadingVarians.h3 }, this.url.length > 0 && (h("a", { class: "hy-footer-link-item__link", href: this.url, style: { color: this.color } }, this.label)), this.url.length == 0 && (h("div", { "data-color": this.color, class: "hy-footer-link-item__link" }, this.label))), this.items.map((item) => {
           const target = item.isExternal === "external" ? "_blank" : "_self";
           return (h("a", { class: linkClassAttributes, href: item.url, target: target, style: { color: this.color } }, item.label, h("hy-icon", { class: "hy-footer-link-item__icon", icon: "hy-icon-arrow-right", size: 16 })));
         })));