@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

package/dist/collection/components/hy-link-box/link-box.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-box.spec.js","sourceRoot":"","sources":["../../../src/components/hy-link-box/link-box.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAC;AAEnC,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;EAC3B,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE;IAChB,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC;EACrC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {LinkBox} from \"./link-box\";\n\ndescribe(\"hy-link-box\", () => {\n  it(\"builds\", () => {\n    expect(new LinkBox()).toBeTruthy();\n  });\n});\n"]}

package/dist/collection/components/hy-link-box-list/link-box-list.js

@@ -0,0 +1,141 @@
+import { h, Host } from "@stencil/core";
+import { LinkBoxVariants } from "../../utils/utils";
+import { jsonParserWorker } from "../../global/globalScript";
+export class LinkBoxList {
+  constructor() {
+    this.headerstyle = "common";
+    this.variant = LinkBoxVariants.default;
+    this.readMoreLabel = undefined;
+    this.dataItems = undefined;
+  }
+  async componentWillLoad() {
+    this._dataItems = await jsonParserWorker(this.dataItems);
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    const classAttributes = [
+      "hy-link-box-list",
+      this.variant,
+      `hy-link-box-list__${this.variant}`,
+      `hy-link-box-list__${this.headerstyle}`,
+    ].join(" ");
+    /*
+    - Logic:
+    - 3 items: big
+    - 4 items: small
+    - 5 items: big
+    - 6 items: big
+    - 7 items: small
+    - 8 items: small
+    - 9 items: big
+    * */
+    const classItemAttributes = [this.variant, `hy-link-box__${this.variant}`].join(" ");
+    return (h(Host, null, h("ul", { class: classAttributes }, this._dataItems.map((x) => {
+      return (h("li", null, h("hy-link-box", { class: classItemAttributes, variant: this.variant, "source-set": x.imageSets, "image-url": x.imageUrl, "image-alt": x.imageAlt, "text-title": x.heading, "text-description": x.description, "show-logo": x.showLogo, url: x.boxUrl, "is-external": x.isExternal, "sc-label": x.ariaLabel, "read-more-label": this.readMoreLabel })));
+    })), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+  }
+  static get is() { return "hy-link-box-list"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["link-box-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["link-box-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "headerstyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "headerstyle",
+        "reflect": false,
+        "defaultValue": "\"common\""
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "LinkBoxVariants",
+          "resolved": "LinkBoxVariants.default | LinkBoxVariants.landingPage",
+          "references": {
+            "LinkBoxVariants": {
+              "location": "import",
+              "path": "../../utils/utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "LinkBoxVariants.default"
+      },
+      "readMoreLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "read-more-label",
+        "reflect": false
+      },
+      "dataItems": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "LinkBox[] | string",
+          "resolved": "LinkBox[] | string",
+          "references": {
+            "LinkBox": {
+              "location": "local",
+              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-link-box-list/link-box-list.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data-items",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=link-box-list.js.map

package/dist/collection/components/hy-link-box-list/link-box-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-box-list.js","sourceRoot":"","sources":["../../../src/components/hy-link-box-list/link-box-list.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AACpF,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAO3D,MAAM,OAAO,WAAW;;uBAEQ,QAAQ;mBACH,eAAe,CAAC,OAAO;;;;EAM1D,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,UAAU,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EAC3D,CAAC;EAED,gBAAgB;IACd,IAAI,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5C,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;QACjD,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;OAC5B;KACF;EACH,CAAC;EAED,MAAM;IACJ,MAAM,eAAe,GAAG;MACtB,kBAAkB;MAClB,IAAI,CAAC,OAAO;MACZ,qBAAqB,IAAI,CAAC,OAAO,EAAE;MACnC,qBAAqB,IAAI,CAAC,WAAW,EAAE;KACxC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ;;;;;;;;;QASI;IACJ,MAAM,mBAAmB,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrF,OAAO,CACL,EAAC,IAAI;MACH,UAAI,KAAK,EAAE,eAAe,IACvB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;QACzB,OAAO,CACL;UACE,mBACE,KAAK,EAAE,mBAAmB,EAC1B,OAAO,EAAE,IAAI,CAAC,OAAO,gBACT,CAAC,CAAC,SAAS,eACZ,CAAC,CAAC,QAAQ,eACV,CAAC,CAAC,QAAQ,gBACT,CAAC,CAAC,OAAO,sBACH,CAAC,CAAC,WAAW,eACpB,CAAC,CAAC,QAAQ,EACrB,GAAG,EAAE,CAAC,CAAC,MAAM,iBACA,CAAC,CAAC,UAAU,cACf,CAAC,CAAC,SAAS,qBACJ,IAAI,CAAC,aAAa,GACnC,CACC,CACN,CAAC;MACJ,CAAC,CAAC,CACC;MACL,cAAQ,EAAE,EAAC,oBAAoB,GAAG,CAC7B,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["export interface LinkBox {\n  heading: string;\n  description: string;\n  imageSets: string | null;\n  imageUrl: string;\n  imageAlt: string;\n  boxUrl: string;\n  isExternal: boolean;\n  showLogo: boolean;\n  ariaLabel: string;\n}\n\nimport {Component, ComponentInterface, Prop, h, Host, Element} from \"@stencil/core\";\nimport {LinkBoxVariants} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n  tag: \"hy-link-box-list\",\n  styleUrl: \"link-box-list.scss\",\n  shadow: false,\n})\nexport class LinkBoxList implements ComponentInterface {\n  @Element() el: HTMLElement;\n  @Prop() headerstyle: string = \"common\";\n  @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;\n  @Prop() readMoreLabel: string;\n\n  private _dataItems: LinkBox[];\n  @Prop() dataItems: LinkBox[] | string;\n\n  async componentWillLoad() {\n    this._dataItems = await jsonParserWorker(this.dataItems);\n  }\n\n  componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n  }\n\n  render() {\n    const classAttributes = [\n      \"hy-link-box-list\",\n      this.variant,\n      `hy-link-box-list__${this.variant}`,\n      `hy-link-box-list__${this.headerstyle}`,\n    ].join(\" \");\n\n    /*\n    - Logic:\n    - 3 items: big\n    - 4 items: small\n    - 5 items: big\n    - 6 items: big\n    - 7 items: small\n    - 8 items: small\n    - 9 items: big\n    * */\n    const classItemAttributes = [this.variant, `hy-link-box__${this.variant}`].join(\" \");\n    return (\n      <Host>\n        <ul class={classAttributes}>\n          {this._dataItems.map((x) => {\n            return (\n              <li>\n                <hy-link-box\n                  class={classItemAttributes}\n                  variant={this.variant}\n                  source-set={x.imageSets}\n                  image-url={x.imageUrl}\n                  image-alt={x.imageAlt}\n                  text-title={x.heading}\n                  text-description={x.description}\n                  show-logo={x.showLogo}\n                  url={x.boxUrl}\n                  is-external={x.isExternal}\n                  sc-label={x.ariaLabel}\n                  read-more-label={this.readMoreLabel}\n                />\n              </li>\n            );\n          })}\n        </ul>\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.js

@@ -0,0 +1,415 @@
+import { Host, h } from "@stencil/core";
+import { ColorVariant, SiteLogoSize } from "../../../utils/utils";
+import { jsonParserWorker } from "../../../global/globalScript";
+let keys = {
+  enter: "Enter",
+};
+export class HyMenuMainGroup {
+  constructor() {
+    this.menuLabel = "University main menu";
+    this.menuLabelClose = "Close";
+    this.dataMainMenu = undefined;
+    this.isMobile = false;
+    this.logoUrl = undefined;
+    this.logoLabel = undefined;
+    this.siteLabel = undefined;
+    this.siteUrl = undefined;
+    this.donate = undefined;
+    this.isMenuOpen = false;
+  }
+  handleComponentClick(event) {
+    event.stopPropagation();
+    this.emitEvent();
+    this.isMenuOpen = !this.isMenuOpen;
+    if (this.isMenuOpen) {
+      this.adjustMainMenuPosition(event.target);
+    }
+  }
+  handleComponentKeyDown(event) {
+    event.stopPropagation();
+    const key = event.code;
+    let target = event.target;
+    if (key === "Escape" && this.isMenuOpen) {
+      this.isMenuOpen = false;
+      this.emitEvent();
+    }
+    if (target && [keys.enter].includes(key)) {
+      this.isMenuOpen = !this.isMenuOpen;
+      if (this.isMenuOpen) {
+        this.emitEvent();
+        this.adjustMainMenuPosition(target);
+      }
+    }
+  }
+  emitEvent() {
+    // Close other panels if they are open (lang menu, search, main menu, ..).
+    this.universityMainMenuToggled.emit();
+    this.mobileMenuTopToggle.emit();
+  }
+  adjustMainMenuPosition(target) {
+    let hyTopHeader = this.el.closest(".hy-site-header__content-top");
+    if (hyTopHeader && !hyTopHeader.hasAttribute("is-mobile")) {
+      let mainMenuToggle = target.shadowRoot.querySelector(".menu--main-group__toggle");
+      let mainMenuDropdown = target.shadowRoot.querySelector(".menu--main-group__dropdown");
+      let mainMenuList = target.shadowRoot.querySelector(".list");
+      if (mainMenuDropdown && mainMenuList && mainMenuToggle) {
+        let rectHeader = hyTopHeader.getBoundingClientRect();
+        let rectMenuToggle = mainMenuToggle.getBoundingClientRect();
+        mainMenuDropdown.style.top = `${rectHeader.height}px`;
+        mainMenuList.style.left = `${rectMenuToggle.left}px`;
+      }
+      let headerHeight = hyTopHeader.offsetHeight + 270;
+      this.showBackdropShadow("open", headerHeight);
+    }
+  }
+  showBackdropShadow(state = "close", top = 0) {
+    let hyHeader = this.el.closest(".hy-site-header");
+    let hyBackdropDiv = hyHeader.children[0];
+    if (hyBackdropDiv) {
+      if (state === "open") {
+        let me = window.outerHeight - top;
+        hyBackdropDiv.style.height = `${me}px`;
+        hyBackdropDiv.style.top = `${top}px`;
+        hyBackdropDiv.style.position = "absolute";
+        hyBackdropDiv.classList.add("is-active");
+      }
+      else {
+        hyBackdropDiv.removeAttribute("style");
+        hyBackdropDiv.classList.remove("is-active");
+      }
+    }
+  }
+  async componentWillLoad() {
+    this._dataMainMenu = await jsonParserWorker(this.dataMainMenu);
+  }
+  handleTopMenuClose(event) {
+    this.isMenuOpen = false;
+    this.mobileMenuTopToggle.emit();
+    this.showBackdropShadow();
+    event.stopPropagation();
+  }
+  // Close the University main menu if user clicks anywhere outside the component.
+  handleOutsideMenuClick(event) {
+    if (this.isMenuOpen) {
+      this.isMenuOpen = false;
+      this.handleTopMenuClose(event);
+    }
+    event.stopPropagation();
+  }
+  // CLose the University main menu if user opens the desktop menu panel.
+  desktopMenuToggled() {
+    this.isMenuOpen = false;
+  }
+  // CLose the University main menu if user opens the search panel
+  searchPanelToggled() {
+    this.isMenuOpen = false;
+  }
+  // CLose the University main menu if user opens the language menu panel.
+  languageMenuToggled() {
+    this.isMenuOpen = false;
+  }
+  render() {
+    const white = "var(--grayscale-white)";
+    const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;
+    const logoColorGroup = ColorVariant.white;
+    return this.isMobile ? (h(Host, { class: {
+        "menu--main-group--mobile": true,
+        "menu--main-group--mobile__is-open": this.isMenuOpen,
+      } }, h("button", { "aria-label": this.menuLabel, class: {
+        "menu--main-group__mobile-toggle": true,
+        "is-open": this.isMenuOpen,
+      } }, h("hy-icon", { icon: "hy-icon-slim-hamburger-menu", size: 20, fill: white })), h("nav", { role: "navigation", "aria-hidden": this.isMenuOpen ? "false" : "true", class: {
+        "menu--main-group__dropdown--mobile": true,
+        "is-open": this.isMenuOpen,
+      } }, h("div", { class: "menu--main-group__dropdown__top" }, h("div", { class: "menu--main-group__logo-container", id: "menu-logo" }, h("hy-site-logo", { "is-group": true, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), h("button", { "aria-label": `Close ${this.menuLabel}`, class: "menu--main-group__dropdown__close", onClick: (e) => this.handleTopMenuClose(e) }, h("hy-icon", { icon: "hy-icon-remove", size: 20, fill: white }))), h("div", { class: "menu--main-group__dropdown__items" }, this._dataMainMenu.map((item) => {
+      return (h("a", { href: item.url, class: { "menu-main-link": true } }, h("span", { class: "menu--main-group__label" }, item.label)));
+    })), h("div", { class: "menu--main-group__dropdown__donate" }, this.donate &&
+      this.donate.map((i) => {
+        return (h("a", { class: "menu--secondary__item hy-link__donate group", href: i.url }, h("hy-icon", { icon: "hy-icon-heart-support", size: 14, fill: logoColorGroup }), h("span", { class: "hy-link__donate__label group" }, i.label)));
+      }))))) : (h(Host, { class: {
+        "menu--main-group": true,
+        "menu--main-group__is-open": this.isMenuOpen,
+      } }, h("button", { class: {
+        "menu--main-group__toggle": true,
+        "is-open": this.isMenuOpen,
+      }, "aria-expanded": this.isMenuOpen ? "true" : "false", "aria-haspopup": "menu" }, this.isMenuOpen ? (h("hy-icon", { class: "toggle__close", icon: "hy-icon-remove", size: 8, fill: white })) : (h("hy-icon", { class: "toggle__caret", icon: "hy-icon-slim-hamburger-menu", size: 8, fill: white })), h("span", null, this.menuLabel)), h("div", { class: {
+        "menu--main-group__dropdown": true,
+        "is-open": this.isMenuOpen,
+      } }, h("div", { class: "list" }, this._dataMainMenu.map((item) => {
+      return (h("a", { href: item.url, class: { "menu-main-link": true } }, h("span", { class: "heading-icon" }, h("hy-icon", { icon: "hy-icon-caret-right", size: 10, fill: white })), h("span", { class: "menu--main-group__label" }, item.label)));
+    })), h("button", { onClick: (e) => this.handleComponentClick(e), class: {
+        "panel-toggle": true,
+      }, "aria-label": "Close menu" }, h("span", { class: "panel-toggle__label" }, h("span", { class: "panel-toggle__label__title" }, this.menuLabelClose), h("hy-icon", { icon: "hy-icon-remove", size: 20, fill: ColorVariant.white }))))));
+  }
+  static get is() { return "hy-menu-main-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["hy-menu-main-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-menu-main-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "menuLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "menu-label",
+        "reflect": false,
+        "defaultValue": "\"University main menu\""
+      },
+      "menuLabelClose": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "menu-label-close",
+        "reflect": false,
+        "defaultValue": "\"Close\""
+      },
+      "dataMainMenu": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "MainMenu[] | string",
+          "resolved": "MainMenu[] | string",
+          "references": {
+            "MainMenu": {
+              "location": "local",
+              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data-main-menu",
+        "reflect": false
+      },
+      "isMobile": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-mobile",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "logoUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "logo-url",
+        "reflect": false
+      },
+      "logoLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "logo-label",
+        "reflect": false
+      },
+      "siteLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "site-label",
+        "reflect": false
+      },
+      "siteUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "site-url",
+        "reflect": false
+      },
+      "donate": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DonateLink[]",
+          "resolved": "DonateLink[]",
+          "references": {
+            "DonateLink": {
+              "location": "local",
+              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isMenuOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "universityMainMenuToggled",
+        "name": "universityMainMenuToggled",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "mobileMenuTopToggle",
+        "name": "mobileMenuTopToggle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleComponentClick",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "handleComponentKeyDown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "handleOutsideMenuClick",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "headerScrollDown",
+        "method": "handleOutsideMenuClick",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "headerScrollUp",
+        "method": "handleOutsideMenuClick",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "menuDesktopToggled",
+        "method": "desktopMenuToggled",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "searchPanelToggled",
+        "method": "searchPanelToggled",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "menuLanguageToggled",
+        "method": "languageMenuToggled",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=hy-menu-main-group.js.map

package/dist/collection/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-menu-main-group.js","sourceRoot":"","sources":["../../../../src/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.tsx"],"names":[],"mappings":"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","sourcesContent":["export interface MainMenu {\n  label: string;\n  url: string;\n  menuLinkId: string;\n}\n\nexport interface DonateLink {\n  url: string;\n  label: string;\n}\n\nimport {Component, Host, h, Element, Prop, State, Listen, Event, EventEmitter} from \"@stencil/core\";\nimport {ColorVariant, SiteLogoSize} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\nlet keys = {\n  enter: \"Enter\",\n};\n\n@Component({\n  tag: \"hy-menu-main-group\",\n  styleUrl: \"hy-menu-main-group.scss\",\n  shadow: true,\n})\nexport class HyMenuMainGroup {\n  @Element() el: HTMLElement;\n  @Prop() menuLabel: string = \"University main menu\";\n  @Prop() menuLabelClose: string = \"Close\";\n  @Prop() dataMainMenu: MainMenu[] | string;\n  @Prop() isMobile: boolean = false;\n  @Prop() logoUrl?: string;\n  @Prop() logoLabel?: string;\n  @Prop() siteLabel?: string;\n  @Prop() siteUrl?: string;\n  @Prop() donate: DonateLink[];\n  @State() isMenuOpen: boolean = false;\n\n  @Event() universityMainMenuToggled: EventEmitter;\n  @Event() mobileMenuTopToggle: EventEmitter;\n\n  private _dataMainMenu: MainMenu[];\n\n  @Listen(\"click\", {capture: true})\n  handleComponentClick(event) {\n    event.stopPropagation();\n    this.emitEvent();\n\n    this.isMenuOpen = !this.isMenuOpen;\n    if (this.isMenuOpen) {\n      this.adjustMainMenuPosition(event.target);\n    }\n  }\n\n  @Listen(\"keydown\")\n  handleComponentKeyDown(event: KeyboardEvent) {\n    event.stopPropagation();\n    const key = event.code;\n    let target = event.target as HTMLButtonElement;\n\n    if (key === \"Escape\" && this.isMenuOpen) {\n      this.isMenuOpen = false;\n      this.emitEvent();\n    }\n\n    if (target && [keys.enter].includes(key)) {\n      this.isMenuOpen = !this.isMenuOpen;\n\n      if (this.isMenuOpen) {\n        this.emitEvent();\n        this.adjustMainMenuPosition(target);\n      }\n    }\n  }\n\n  emitEvent() {\n    // Close other panels if they are open (lang menu, search, main menu, ..).\n    this.universityMainMenuToggled.emit();\n    this.mobileMenuTopToggle.emit();\n  }\n\n  adjustMainMenuPosition(target) {\n    let hyTopHeader = this.el.closest(\".hy-site-header__content-top\") as HTMLElement;\n\n    if (hyTopHeader && !hyTopHeader.hasAttribute(\"is-mobile\")) {\n      let mainMenuToggle = target.shadowRoot.querySelector(\".menu--main-group__toggle\") as HTMLElement;\n      let mainMenuDropdown = target.shadowRoot.querySelector(\".menu--main-group__dropdown\") as HTMLElement;\n      let mainMenuList = target.shadowRoot.querySelector(\".list\") as HTMLElement;\n      if (mainMenuDropdown && mainMenuList && mainMenuToggle) {\n        let rectHeader = hyTopHeader.getBoundingClientRect();\n        let rectMenuToggle = mainMenuToggle.getBoundingClientRect();\n        mainMenuDropdown.style.top = `${rectHeader.height}px`;\n\n        mainMenuList.style.left = `${rectMenuToggle.left}px`;\n      }\n      let headerHeight = hyTopHeader.offsetHeight + 270;\n\n      this.showBackdropShadow(\"open\", headerHeight);\n    }\n  }\n\n  showBackdropShadow(state = \"close\", top = 0) {\n    let hyHeader = this.el.closest(\".hy-site-header\") as HTMLElement;\n    let hyBackdropDiv = hyHeader.children[0] as HTMLElement;\n\n    if (hyBackdropDiv) {\n      if (state === \"open\") {\n        let me = window.outerHeight - top;\n        hyBackdropDiv.style.height = `${me}px`;\n        hyBackdropDiv.style.top = `${top}px`;\n        hyBackdropDiv.style.position = \"absolute\";\n        hyBackdropDiv.classList.add(\"is-active\");\n      } else {\n        hyBackdropDiv.removeAttribute(\"style\");\n        hyBackdropDiv.classList.remove(\"is-active\");\n      }\n    }\n  }\n\n  async componentWillLoad() {\n    this._dataMainMenu = await jsonParserWorker(this.dataMainMenu);\n  }\n\n  handleTopMenuClose(event) {\n    this.isMenuOpen = false;\n    this.mobileMenuTopToggle.emit();\n    this.showBackdropShadow();\n    event.stopPropagation();\n  }\n\n  // Close the University main menu if user clicks anywhere outside the component.\n  @Listen(\"click\", {target: \"window\"})\n  @Listen(\"headerScrollDown\", {target: \"window\"})\n  @Listen(\"headerScrollUp\", {target: \"window\"})\n  handleOutsideMenuClick(event) {\n    if (this.isMenuOpen) {\n      this.isMenuOpen = false;\n      this.handleTopMenuClose(event);\n    }\n    event.stopPropagation();\n  }\n\n  // CLose the University main menu if user opens the desktop menu panel.\n  @Listen(\"menuDesktopToggled\", {target: \"document\"})\n  desktopMenuToggled() {\n    this.isMenuOpen = false;\n  }\n\n  // CLose the University main menu if user opens the search panel\n  @Listen(\"searchPanelToggled\", {target: \"document\"})\n  searchPanelToggled() {\n    this.isMenuOpen = false;\n  }\n\n  // CLose the University main menu if user opens the language menu panel.\n  @Listen(\"menuLanguageToggled\", {target: \"document\"})\n  languageMenuToggled() {\n    this.isMenuOpen = false;\n  }\n\n  render() {\n    const white = \"var(--grayscale-white)\";\n    const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;\n    const logoColorGroup = ColorVariant.white;\n\n    return this.isMobile ? (\n      <Host\n        class={{\n          \"menu--main-group--mobile\": true,\n          \"menu--main-group--mobile__is-open\": this.isMenuOpen,\n        }}\n      >\n        <button\n          aria-label={this.menuLabel}\n          class={{\n            \"menu--main-group__mobile-toggle\": true,\n            \"is-open\": this.isMenuOpen,\n          }}\n        >\n          <hy-icon icon={\"hy-icon-slim-hamburger-menu\"} size={20} fill={white} />\n        </button>\n        <nav\n          role=\"navigation\"\n          aria-hidden={this.isMenuOpen ? \"false\" : \"true\"}\n          class={{\n            \"menu--main-group__dropdown--mobile\": true,\n            \"is-open\": this.isMenuOpen,\n          }}\n        >\n          <div class=\"menu--main-group__dropdown__top\">\n            <div class={\"menu--main-group__logo-container\"} id={\"menu-logo\"}>\n              <hy-site-logo\n                is-group={true}\n                size={logoSizeGroup}\n                color={logoColorGroup}\n                url={this.siteUrl}\n                label={this.siteLabel}\n              />\n            </div>\n            <button\n              aria-label={`Close ${this.menuLabel}`}\n              class=\"menu--main-group__dropdown__close\"\n              onClick={(e) => this.handleTopMenuClose(e)}\n            >\n              <hy-icon icon={\"hy-icon-remove\"} size={20} fill={white} />\n            </button>\n          </div>\n          <div class=\"menu--main-group__dropdown__items\">\n            {this._dataMainMenu.map((item) => {\n              return (\n                <a href={item.url} class={{\"menu-main-link\": true}}>\n                  <span class={\"menu--main-group__label\"}>{item.label}</span>\n                </a>\n              );\n            })}\n          </div>\n          <div class=\"menu--main-group__dropdown__donate\">\n            {this.donate &&\n              this.donate.map((i) => {\n                return (\n                  <a class={\"menu--secondary__item hy-link__donate group\"} href={i.url}>\n                    <hy-icon icon={\"hy-icon-heart-support\"} size={14} fill={logoColorGroup} />\n                    <span class={\"hy-link__donate__label group\"}>{i.label}</span>\n                  </a>\n                );\n              })}\n          </div>\n        </nav>\n      </Host>\n    ) : (\n      <Host\n        class={{\n          \"menu--main-group\": true,\n          \"menu--main-group__is-open\": this.isMenuOpen,\n        }}\n      >\n        <button\n          class={{\n            \"menu--main-group__toggle\": true,\n            \"is-open\": this.isMenuOpen,\n          }}\n          aria-expanded={this.isMenuOpen ? \"true\" : \"false\"}\n          aria-haspopup=\"menu\"\n          //aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}\n        >\n          {this.isMenuOpen ? (\n            <hy-icon class={\"toggle__close\"} icon={\"hy-icon-remove\"} size={8} fill={white} />\n          ) : (\n            <hy-icon class={\"toggle__caret\"} icon={\"hy-icon-slim-hamburger-menu\"} size={8} fill={white} />\n          )}\n          <span>{this.menuLabel}</span>\n        </button>\n        <div\n          class={{\n            \"menu--main-group__dropdown\": true,\n            \"is-open\": this.isMenuOpen,\n          }}\n        >\n          <div class=\"list\">\n            {this._dataMainMenu.map((item) => {\n              return (\n                <a href={item.url} class={{\"menu-main-link\": true}}>\n                  <span class=\"heading-icon\">\n                    <hy-icon icon={\"hy-icon-caret-right\"} size={10} fill={white} />\n                  </span>\n                  <span class={\"menu--main-group__label\"}>{item.label}</span>\n                </a>\n              );\n            })}\n          </div>\n          <button\n            onClick={(e) => this.handleComponentClick(e)}\n            class={{\n              \"panel-toggle\": true,\n            }}\n            aria-label=\"Close menu\"\n          >\n            <span class=\"panel-toggle__label\">\n              <span class=\"panel-toggle__label__title\">{this.menuLabelClose}</span>\n              <hy-icon icon={\"hy-icon-remove\"} size={20} fill={ColorVariant.white} />\n            </span>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}