npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.57 → 0.8.59 - Mend

@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1260) hide show

package/dist/cjs/hy-menu-main-group.cjs.entry.js ADDED Viewed

@@ -0,0 +1,160 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-32830401.js');
+const utils = require('./utils-bfc1127a.js');
+const globalScript = require('./globalScript-9994473d.js');
+const hyMenuMainGroupCss = ":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}:host(.menu--main-group){-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;margin-left:28px}@media (min-width: 75.0625rem){:host(.menu--main-group){margin-right:auto}}.menu--main-group__toggle{font-size:0.875rem;line-height:16px;font-weight:600;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--grayscale-black);border:0 none;color:var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;font-family:var(--main-font-family);letter-spacing:-0.44px;margin:0 -4px;padding:0;position:relative}.menu--main-group__toggle:focus{outline:none}.menu--main-group__toggle:hover{cursor:pointer}.menu--main-group__toggle:hover span{color:var(--grayscale-medium)}.menu--main-group__toggle:hover svg{fill:var(--grayscale-medium)}@media (min-width: 60rem){.menu--main-group__toggle .toggle__caret svg{height:15.27px;width:3px}}@media (min-width: 75.0625rem){.menu--main-group__toggle .toggle__caret svg{height:14px;width:3px}}@media (min-width: 60rem){.menu--main-group__toggle span{margin-left:17px}}.menu--main-group__toggle.is-open:after{border-bottom:3px solid white;bottom:-10px;content:\" \";position:absolute;width:100%}@media (min-width: 60rem){.menu--main-group__toggle.is-open .toggle__close{height:15px;width:15px}.menu--main-group__toggle.is-open .toggle__close svg{height:15px;width:15px}}@media (min-width: 60rem){.menu--main-group__toggle.is-open span{margin-left:10px}}.menu--main-group__dropdown{display:none;visibility:hidden}.menu--main-group__dropdown.is-open{background-color:var(--grayscale-black);border-radius:0 0 5px 5px;-webkit-box-shadow:0 10px 10px rgba(0, 0, 0, 0.2);box-shadow:0 10px 10px rgba(0, 0, 0, 0.2);color:var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);left:0;margin:0;padding:6px 0 20px;position:absolute;top:0;visibility:visible;width:100%;z-index:511}.menu--main-group__dropdown.is-open .list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;justify-items:center;padding-top:14px;position:relative}.menu--main-group__dropdown.is-open .panel-toggle{background-color:transparent;border:none;position:absolute;right:0;top:0}@media (min-width: 60rem){.menu--main-group__dropdown.is-open .panel-toggle{padding:26px 32px}}.menu--main-group__dropdown.is-open .panel-toggle__label{font-size:1rem;line-height:20px;font-weight:700;color:var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);letter-spacing:-0.5px;text-transform:uppercase}.menu--main-group__dropdown.is-open .panel-toggle__label__title{padding-right:12px}.menu--main-group__dropdown.is-open .panel-toggle__label:hover{cursor:pointer}.menu--main-group__dropdown.is-open .panel-toggle__label:hover span{color:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .panel-toggle__label:hover svg{fill:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .menu-main-link{font-size:1rem;line-height:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:20px;text-decoration:none}@media (min-width: 75.0625rem){.menu--main-group__dropdown.is-open .menu-main-link{font-size:0.875rem;line-height:18px}}.menu--main-group__dropdown.is-open .menu-main-link:hover span{color:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .menu-main-link:hover svg{fill:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .menu--main-group__label{color:var(--grayscale-white);margin-left:12px}:host(.menu--main-group--mobile){-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;position:relative}.menu--main-group__mobile-toggle{border:none;background:transparent;padding:15px 12px}.menu--main-group__mobile-toggle:hover{cursor:pointer}.menu--main-group__dropdown__top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:23px}.menu--main-group__dropdown__close{border:none;background-color:transparent;padding:0;margin:0}.menu--main-group__dropdown__close:hover{cursor:pointer}.menu--main-group__logo-container .hy-site-logo__label.group{max-width:250px}.menu--main-group__dropdown__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.menu--main-group__dropdown__items .menu-main-link{font-size:0.9375rem;line-height:20px;background-color:var(--grayscale-dark-text);color:var(--grayscale-white);font-family:var(--main-font-family);letter-spacing:-0.5px;margin-bottom:8px;padding:14px 20px;text-decoration:none;width:100%}.menu--main-group__dropdown__items .menu-main-link:hover{text-decoration:underline}.menu--main-group__dropdown__donate{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--grayscale-dark-text);position:fixed;bottom:0;margin-left:-20px;width:100%}.menu--main-group__dropdown__donate .hy-link__donate.group{font-size:1rem;line-height:16px;font-weight:600;display:-webkit-box;display:-ms-flexbox;display:flex;color:var(--grayscale-white);font-family:var(--main-font-family);margin:20px auto 16px auto;text-decoration:none}.menu--main-group__dropdown__donate .hy-link__donate.group .hy-link__donate__label{margin-left:6px}.menu--main-group__dropdown--mobile{-webkit-box-direction:normal;-webkit-box-orient:vertical;background-color:var(--grayscale-black);bottom:0px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-items:space-between;max-width:400px;overflow:hidden;padding:0px;place-items:stretch;position:fixed;right:0px;top:0px;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;visibility:hidden;width:0px}.menu--main-group__dropdown--mobile.is-open{padding:50px 20px 20px;-webkit-transform:translateX(0px);transform:translateX(0px);-webkit-transition:-webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);transition:-webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0, 0, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);visibility:visible;width:90%;z-index:101}.menu--main-group__dropdown--mobile.is-open::after{opacity:1;visibility:visible}";
+let keys = {
+  enter: "Enter",
+};
+const HyMenuMainGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.universityMainMenuToggled = index.createEvent(this, "universityMainMenuToggled", 7);
+    this.mobileMenuTopToggle = index.createEvent(this, "mobileMenuTopToggle", 7);
+    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 globalScript.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 ? utils.SiteLogoSize.small : utils.SiteLogoSize.small;
+    const logoColorGroup = utils.ColorVariant.white;
+    return this.isMobile ? (index.h(index.Host, { class: {
+        "menu--main-group--mobile": true,
+        "menu--main-group--mobile__is-open": this.isMenuOpen,
+      } }, index.h("button", { "aria-label": this.menuLabel, class: {
+        "menu--main-group__mobile-toggle": true,
+        "is-open": this.isMenuOpen,
+      } }, index.h("hy-icon", { icon: "hy-icon-slim-hamburger-menu", size: 20, fill: white })), index.h("nav", { role: "navigation", "aria-hidden": this.isMenuOpen ? "false" : "true", class: {
+        "menu--main-group__dropdown--mobile": true,
+        "is-open": this.isMenuOpen,
+      } }, index.h("div", { class: "menu--main-group__dropdown__top" }, index.h("div", { class: "menu--main-group__logo-container", id: "menu-logo" }, index.h("hy-site-logo", { "is-group": true, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), index.h("button", { "aria-label": `Close ${this.menuLabel}`, class: "menu--main-group__dropdown__close", onClick: (e) => this.handleTopMenuClose(e) }, index.h("hy-icon", { icon: "hy-icon-remove", size: 20, fill: white }))), index.h("div", { class: "menu--main-group__dropdown__items" }, this._dataMainMenu.map((item) => {
+      return (index.h("a", { href: item.url, class: { "menu-main-link": true } }, index.h("span", { class: "menu--main-group__label" }, item.label)));
+    })), index.h("div", { class: "menu--main-group__dropdown__donate" }, this.donate &&
+      this.donate.map((i) => {
+        return (index.h("a", { class: "menu--secondary__item hy-link__donate group", href: i.url }, index.h("hy-icon", { icon: "hy-icon-heart-support", size: 14, fill: logoColorGroup }), index.h("span", { class: "hy-link__donate__label group" }, i.label)));
+      }))))) : (index.h(index.Host, { class: {
+        "menu--main-group": true,
+        "menu--main-group__is-open": this.isMenuOpen,
+      } }, index.h("button", { class: {
+        "menu--main-group__toggle": true,
+        "is-open": this.isMenuOpen,
+      }, "aria-expanded": this.isMenuOpen ? "true" : "false", "aria-haspopup": "menu" }, this.isMenuOpen ? (index.h("hy-icon", { class: "toggle__close", icon: "hy-icon-remove", size: 8, fill: white })) : (index.h("hy-icon", { class: "toggle__caret", icon: "hy-icon-slim-hamburger-menu", size: 8, fill: white })), index.h("span", null, this.menuLabel)), index.h("div", { class: {
+        "menu--main-group__dropdown": true,
+        "is-open": this.isMenuOpen,
+      } }, index.h("div", { class: "list" }, this._dataMainMenu.map((item) => {
+      return (index.h("a", { href: item.url, class: { "menu-main-link": true } }, index.h("span", { class: "heading-icon" }, index.h("hy-icon", { icon: "hy-icon-caret-right", size: 10, fill: white })), index.h("span", { class: "menu--main-group__label" }, item.label)));
+    })), index.h("button", { onClick: (e) => this.handleComponentClick(e), class: {
+        "panel-toggle": true,
+      }, "aria-label": "Close menu" }, index.h("span", { class: "panel-toggle__label" }, index.h("span", { class: "panel-toggle__label__title" }, this.menuLabelClose), index.h("hy-icon", { icon: "hy-icon-remove", size: 20, fill: utils.ColorVariant.white }))))));
+  }
+  get el() { return index.getElement(this); }
+};
+HyMenuMainGroup.style = hyMenuMainGroupCss;
+exports.hy_menu_main_group = HyMenuMainGroup;
+//# sourceMappingURL=hy-menu-main-group.cjs.entry.js.map

package/dist/cjs/hy-menu-main-group.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"hy-menu-main-group.entry.cjs.js","mappings":"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","names":["jsonParserWorker","SiteLogoSize","ColorVariant","h","Host"],"sources":["./src/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.scss?tag=hy-menu-main-group&encapsulation=shadow","./src/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host(.menu--main-group) {\n align-items: center;\n display: flex;\n flex-flow: row;\n margin-left: 28px;\n\n @include breakpoint($extrawide) {\n margin-right: auto;\n }\n}\n\n.menu--main-group__toggle {\n @include font-size(14px, 16px);\n @include font-weight($semibold);\n align-items: center;\n background: var(--grayscale-black);\n border: 0 none;\n color: var(--grayscale-white);\n display: flex;\n flex-flow: row;\n font-family: var(--main-font-family);\n letter-spacing: -0.44px;\n margin: 0 -4px;\n padding: 0;\n position: relative;\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n cursor: pointer;\n\n span {\n color: var(--grayscale-medium);\n }\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n\n .toggle__caret {\n svg {\n @include breakpoint($wide) {\n height: 15.27px;\n width: 3px;\n }\n @include breakpoint($extrawide) {\n height: 14px;\n width: 3px;\n }\n }\n }\n\n span {\n @include breakpoint($wide) {\n margin-left: 17px;\n }\n }\n\n &.is-open {\n &:after {\n border-bottom: 3px solid white;\n bottom: -10px;\n content: \" \";\n position: absolute;\n width: 100%;\n }\n\n .toggle__close {\n @include breakpoint($wide) {\n height: 15px;\n width: 15px;\n\n svg {\n height: 15px;\n width: 15px;\n }\n }\n }\n\n span {\n @include breakpoint($wide) {\n margin-left: 10px;\n }\n }\n }\n}\n\n.menu--main-group__dropdown {\n display: none;\n visibility: hidden;\n\n &.is-open {\n background-color: var(--grayscale-black);\n border-radius: 0 0 5px 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);\n color: var(--grayscale-white);\n display: flex;\n font-family: var(--main-font-family);\n left: 0;\n margin: 0;\n padding: 6px 0 20px;\n position: absolute;\n top: 0;\n visibility: visible;\n width: 100%;\n z-index: 511;\n\n .list {\n display: flex;\n flex-flow: column;\n justify-items: center;\n padding-top: 14px;\n position: relative;\n }\n\n .panel-toggle {\n background-color: transparent;\n border: none;\n position: absolute;\n right: 0;\n top: 0;\n\n @include breakpoint($wide) {\n padding: 26px 32px;\n }\n\n &__label {\n @include font-size(16px, 20px);\n @include font-weight($bold);\n color: var(--grayscale-white);\n display: flex;\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n text-transform: uppercase;\n\n &__title {\n padding-right: 12px;\n }\n\n &:hover {\n cursor: pointer;\n span {\n color: var(--grayscale-medium);\n }\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n }\n\n .menu-main-link {\n @include font-size(16px, 20px);\n align-items: center;\n display: flex;\n font-family: var(--main-font-family);\n flex-direction: row;\n margin-bottom: 20px;\n text-decoration: none;\n\n @include breakpoint($extrawide) {\n @include font-size(14px, 18px);\n }\n\n &:hover {\n span {\n color: var(--grayscale-medium);\n }\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n .menu--main-group__label {\n color: var(--grayscale-white);\n margin-left: 12px;\n }\n }\n}\n\n:host(.menu--main-group--mobile) {\n align-items: center;\n display: flex;\n flex-flow: row;\n position: relative;\n}\n\n.menu--main-group__mobile-toggle {\n border: none;\n background: transparent;\n padding: 15px 12px;\n\n &:hover {\n cursor: pointer;\n }\n}\n\n.menu--main-group__dropdown__top {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: 23px;\n}\n\n.menu--main-group__dropdown__close {\n border: none;\n background-color: transparent;\n padding: 0;\n margin: 0;\n\n &:hover {\n cursor: pointer;\n }\n}\n\n.menu--main-group__logo-container .hy-site-logo__label.group {\n max-width: 250px;\n}\n\n.menu--main-group__dropdown__items {\n display: flex;\n flex-direction: column;\n\n .menu-main-link {\n @include font-size(15px, 20px);\n\n background-color: var(--grayscale-dark-text);\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n margin-bottom: 8px;\n padding: 14px 20px;\n text-decoration: none;\n width: 100%;\n\n &:hover {\n text-decoration: underline;\n }\n }\n}\n\n.menu--main-group__dropdown__donate {\n display: flex;\n flex-direction: row;\n justify-content: center;\n background-color: var(--grayscale-dark-text);\n position: fixed;\n bottom: 0;\n margin-left: -20px;\n width: 100%;\n\n .hy-link__donate.group {\n @include font-size(16px, 16px);\n @include font-weight($semibold);\n\n display: flex;\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n margin: 20px auto 16px auto;\n text-decoration: none;\n\n .hy-link__donate__label {\n margin-left: 6px;\n }\n }\n}\n\n.menu--main-group__dropdown--mobile {\n -webkit-box-direction: normal;\n -webkit-box-orient: vertical;\n background-color: var(--grayscale-black);\n bottom: 0px;\n display: flex;\n flex-direction: column;\n justify-items: space-between;\n max-width: 400px;\n overflow: hidden;\n padding: 0px;\n place-items: stretch;\n position: fixed;\n right: 0px;\n top: 0px;\n transform: translateX(100%);\n transition: all 0.3s ease 0s;\n visibility: hidden;\n width: 0px;\n\n &.is-open {\n padding: 50px 20px 20px;\n transform: translateX(0px);\n transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);\n visibility: visible;\n width: 90%;\n z-index: 101;\n\n &::after {\n opacity: 1;\n visibility: visible;\n }\n }\n}\n","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"],"version":3}

package/dist/cjs/hy-opening-hours_2.cjs.entry.js ADDED Viewed

@@ -0,0 +1,82 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-32830401.js');
+const utils = require('./utils-bfc1127a.js');
+const hyOpeningHoursCss = ":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-open-hours--container{font-family:var(--main-font-family);max-width:50rem;overflow:hidden}.hy-open-hours--container--exceptional{max-width:100%}.open-hours__title{text-transform:uppercase;margin-bottom:0.75rem}.open-hours__date-change{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-background-box);color:var(--brand-main);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.open-hours__date-change--title{font-size:1.25rem;line-height:24px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.5px;text-align:center;text-transform:uppercase}.open-hours__date-change .open-hours__prev-date,.open-hours__date-change .open-hours__next-date{background:none;border:0;color:var(--brand-main);display:-webkit-box;display:-ms-flexbox;display:flex;height:44px;outline:5px solid var(--grayscale-white);position:relative;width:44px}.open-hours__date-change .open-hours__prev-date:hover,.open-hours__date-change .open-hours__next-date:hover{background-color:var(--hover-gray);color:var(--brand-main-active);cursor:pointer}.open-hours__date-change .open-hours__prev-date:focus,.open-hours__date-change .open-hours__next-date:focus{background-color:var(--hover-gray);color:var(--brand-main-active)}.open-hours__date-change .open-hours__prev-date:disabled,.open-hours__date-change .open-hours__next-date:disabled{cursor:none}.open-hours__date-change .open-hours__prev-date hy-icon,.open-hours__date-change .open-hours__next-date hy-icon{color:var(--link-blue);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.open-hours__date-change .open-hours__prev-date svg,.open-hours__date-change .open-hours__next-date svg{fill:currentColor;height:20px;width:20px}.open-hours__date-change .open-hours__prev-date{border-right:1px solid var(--link-blue)}.open-hours__date-change .open-hours__next-date{border-left:1px solid var(--link-blue)}.open-hours__content__top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:0.9rem;font-weight:700;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:0.5rem 0}.open-hours__content__top-label{margin:0.5rem 0 0.5rem 0;text-align:left;width:33.3333333333vw;word-break:break-word}.open-hours__content__top-label:first-child(){margin-right:1rem}.open-hours__content__top-label.luomus{width:50vw}.open-hours__content__top-label.building.luomus{text-align:center}.open-hours__content{position:relative}.open-hours__content.open-hours__loading:after{-webkit-animation-duration:1s;animation-duration:1s;font-size:3.2rem;position:absolute;left:45%;top:35%;z-index:2}.open-hours__content.slide-left{-webkit-animation:slide-left 0.2s ease-in-out both;animation:slide-left 0.2s ease-in-out both}.open-hours__content.slide-left-reverse{-webkit-animation:slide-left-reverse 0.2s ease-in-out reverse both;animation:slide-left-reverse 0.2s ease-in-out reverse both}.open-hours__content.slide-right{-webkit-animation:slide-right 0.2s ease-in-out both;animation:slide-right 0.2s ease-in-out both}.open-hours__content.slide-right-reverse{-webkit-animation:slide-right-reverse 0.2s ease-in-out reverse both;animation:slide-right-reverse 0.2s ease-in-out reverse both}.open-hours__links{margin:1.5rem 0 1rem 0}.open-hours__links .open-hours__link .hy-cta-link{width:100% !important;-webkit-box-pack:start !important;-ms-flex-pack:start !important;justify-content:flex-start !important}.open-hours__links .open-hours__link .hy-cta-link .text{width:100% !important}@-webkit-keyframes slide-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(200px);transform:translateX(200px);opacity:0}}@keyframes slide-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(200px);transform:translateX(200px);opacity:0}}@-webkit-keyframes slide-right-reverse{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(200px);transform:translateX(200px);opacity:0}}@keyframes slide-right-reverse{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(200px);transform:translateX(200px);opacity:0}}@-webkit-keyframes slide-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-200px);transform:translateX(-200px);opacity:0}}@keyframes slide-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-200px);transform:translateX(-200px);opacity:0}}@-webkit-keyframes slide-left-reverse{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-200px);transform:translateX(-200px);opacity:0}}@keyframes slide-left-reverse{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-200px);transform:translateX(-200px);opacity:0}}";
+const HyOpeningHours = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.blockTitle = null;
+    this.language = undefined;
+    this.venueType = "libraries";
+    this.blockId = undefined;
+    this.nextLabel = undefined;
+    this.prevLabel = undefined;
+    this.listLabel = undefined;
+    this.buildingLabel = undefined;
+    this.customerServiceLabel = undefined;
+    this.date = null;
+    this.dateTitle = null;
+    this.dateType = "day";
+    this.multiple = false;
+    this.customLinkTitle = null;
+    this.customLink = null;
+    this.exceptional = false;
+  }
+  render() {
+    const containerClasses = [
+      "hy-open-hours--container",
+      this.exceptional ? "hy-open-hours--container--exceptional" : "",
+    ].join(" ");
+    const listClasses = ["open-hours__content__top-label", this.venueType].join(" ");
+    const buildingClasses = ["open-hours__content__top-label building", this.venueType].join(" ");
+    return (index.h(index.Host, null, index.h("div", { class: containerClasses, "data-lang": this.language, "data-id": this.blockId, "data-date": this.date, "data-type": this.dateType, "data-multiple": this.multiple }, this.blockTitle && index.h("h3", { class: "open-hours__title" }, this.blockTitle), !this.exceptional && (index.h("div", { class: "open-hours__date-change" }, index.h("button", { "aria-label": this.prevLabel, class: "icon--arrow-left open-hours__prev-date" }, index.h("hy-icon", { icon: "hy-icon-caret-left", size: 18 })), index.h("span", { class: "open-hours__date-change--title" }, this.dateTitle), index.h("button", { "aria-label": this.nextLabel, class: "icon--arrow-right open-hours__next-date" }, index.h("hy-icon", { icon: "hy-icon-caret-right", size: 18 })))), index.h("div", { class: "open-hours__content__top" }, index.h("span", { class: listClasses }, this.listLabel), index.h("span", { class: buildingClasses }, this.buildingLabel), this.customerServiceLabel && index.h("span", { class: listClasses }, this.customerServiceLabel)), index.h("div", { class: "open-hours__content" }, index.h("slot", null)), this.customLink && (index.h("div", { class: "open-hours__links" }, index.h("hy-cta-link", { "full-width": true, "link-content": this.customLinkTitle, "sc-label": this.customLinkTitle, url: this.customLink, variant: utils.CtaLinkVariants.linkList })))), index.h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+  }
+};
+HyOpeningHours.style = hyOpeningHoursCss;
+const hyOpeningHoursContentCss = ":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}.open-hours__list-item{border-top:1px solid var(--grayscale-medium);color:var(--grayscale-dark-text);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:0.875rem;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:0.5rem 0;font-family:var(--main-font-family);text-align:start}.open-hours__list-item--today{background-color:var(--grayscale-light)}.open-hours__list-item--today span:first-child{margin-left:4px;padding-left:4px;margin-right:-8px;font-weight:bold;border-left:2px solid var(--grayscale-black)}.open-hours__list-item>span:not(.luomus){text-align:left;width:33.3333333333vw}.open-hours__list-item>span.luomus{width:50vw}.open-hours__list-item--date{margin-right:1rem}.open-hours__list-item--hours{margin-right:0.2rem}.open-hours__list-item--hours.luomus{text-align:center}";
+const HyOpeningHoursContent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.multiple = false;
+    this.selfServiceLabel = null;
+    this.venueType = "libraries";
+    this.dataItems = undefined;
+  }
+  dataItemsWatcher(data) {
+    this._dataItems = typeof data === "string" ? JSON.parse(data) : data;
+  }
+  componentWillLoad() {
+    this.dataItemsWatcher(this.dataItems);
+  }
+  render() {
+    return (index.h(index.Host, null, this._dataItems.map((item) => {
+      if (!item.service)
+        return;
+      const itemClasses = ["open-hours__list-item", item.today ? "open-hours__list-item--today" : ""].join(" ");
+      return (index.h("div", { class: itemClasses }, index.h("span", { class: "open-hours__list-item--office" }, item.today ? item.today : item.dateLibrary), index.h("span", { class: "open-hours__list-item--hours" }, item.building), index.h("span", { class: "open-hours__list-item--service" }, item.service)));
+    }), this.selfServiceLabel && (index.h("div", { class: "open-hours__content__top" }, index.h("span", { class: "open-hours__content__top-label" }, this.selfServiceLabel))), this._dataItems.map((item) => {
+      if (item.service)
+        return;
+      const itemClasses = ["open-hours__list-item", item.today ? "open-hours__list-item--today" : ""].join(" ");
+      const hoursClasses = ["open-hours__list-item--hours", this.venueType].join(" ");
+      const officeClasses = ["open-hours__list-item--office", this.venueType].join(" ");
+      return (index.h("div", { class: itemClasses }, index.h("span", { class: officeClasses }, item.today ? item.today : item.dateLibrary), index.h("span", { class: hoursClasses }, item.building), this.venueType !== "luomus" && index.h("span", { class: "open-hours__list-item--service" }, "-")));
+    })));
+  }
+  static get watchers() { return {
+    "dataItems": ["dataItemsWatcher"]
+  }; }
+};
+HyOpeningHoursContent.style = hyOpeningHoursContentCss;
+exports.hy_opening_hours = HyOpeningHours;
+exports.hy_opening_hours_content = HyOpeningHoursContent;
+//# sourceMappingURL=hy-opening-hours_2.cjs.entry.js.map

package/dist/cjs/hy-opening-hours_2.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"hy-opening-hours.hy-opening-hours-content.entry.cjs.js","mappings":"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","names":["h","Host","CtaLinkVariants"],"sources":["./src/components/hy-opening-hours/hy-opening-hours.scss?tag=hy-opening-hours","./src/components/hy-opening-hours/hy-opening-hours.tsx","./src/components/hy-opening-hours-content/hy-opening-hours-content.scss?tag=hy-opening-hours-content","./src/components/hy-opening-hours-content/hy-opening-hours-content.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-open-hours--container {\n font-family: var(--main-font-family);\n max-width: 50rem;\n overflow: hidden;\n\n &--exceptional {\n max-width: 100%;\n }\n}\n\n.open-hours__title {\n text-transform: uppercase;\n margin-bottom: .75rem;\n}\n\n.open-hours__date-change {\n align-items: center;\n background-color: var(--grayscale-background-box);\n color: var(--brand-main);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n &--title {\n @include font-size(20px, 24px);\n @include font-weight($bold);\n\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n text-align: center;\n text-transform: uppercase;\n }\n\n .open-hours__prev-date,\n .open-hours__next-date {\n background: none;\n border: 0;\n color: var(--brand-main);\n display: flex;\n height: 44px;\n outline: 5px solid var(--grayscale-white);\n position: relative;\n width: 44px;\n\n &:hover {\n background-color: var(--hover-gray);\n color: var(--brand-main-active);\n cursor: pointer;\n }\n\n &:focus {\n background-color: var(--hover-gray);\n color: var(--brand-main-active);\n }\n\n &:disabled {\n cursor: none;\n }\n\n hy-icon {\n color: var(--link-blue);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n svg {\n fill: currentColor;\n height: 20px;\n width: 20px;\n }\n }\n .open-hours__prev-date {\n border-right: 1px solid var(--link-blue);\n }\n .open-hours__next-date {\n border-left: 1px solid var(--link-blue);\n }\n}\n\n.open-hours__content__top {\n display: flex;\n flex-direction: row;\n font-size: 0.9rem;\n font-weight: 700;\n justify-content: space-between;\n padding: 0.5rem 0;\n}\n\n.open-hours__content__top-label {\n margin: 0.5rem 0 0.5rem 0;\n text-align: left;\n width: calc(100vw / 3);\n word-break: break-word;\n\n &:first-child() {\n margin-right: 1rem;\n }\n}\n\n.open-hours__content__top-label.luomus {\n width: calc(100vw / 2);\n}\n.open-hours__content__top-label.building.luomus {\n text-align: center;\n}\n\n.open-hours__content {\n position: relative;\n\n &.open-hours__loading {\n &:after {\n animation-duration: 1s;\n font-size: 3.2rem;\n position: absolute;\n left: 45%;\n top: 35%;\n z-index: 2;\n }\n }\n\n $animation-duraction: 0.2s;\n\n &.slide-left {\n -webkit-animation: slide-left $animation-duraction ease-in-out both;\n animation: slide-left $animation-duraction ease-in-out both;\n }\n\n &.slide-left-reverse {\n -webkit-animation: slide-left-reverse $animation-duraction ease-in-out reverse both;\n animation: slide-left-reverse $animation-duraction ease-in-out reverse both;\n }\n\n &.slide-right {\n -webkit-animation: slide-right $animation-duraction ease-in-out both;\n animation: slide-right $animation-duraction ease-in-out both;\n }\n\n &.slide-right-reverse {\n -webkit-animation: slide-right-reverse $animation-duraction ease-in-out reverse both;\n animation: slide-right-reverse $animation-duraction ease-in-out reverse both;\n }\n}\n\n.open-hours__links {\n margin: 1.5rem 0 1rem 0;\n\n .open-hours__link .hy-cta-link {\n width: 100% !important;\n justify-content: flex-start !important;\n\n .text {\n width: 100% !important;\n }\n }\n}\n\n@-webkit-keyframes slide-right {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n -webkit-transform: translateX(200px);\n transform: translateX(200px);\n opacity: 0;\n }\n}\n@keyframes slide-right {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n -webkit-transform: translateX(200px);\n transform: translateX(200px);\n opacity: 0;\n }\n}\n\n@-webkit-keyframes slide-right-reverse {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n -webkit-transform: translateX(200px);\n transform: translateX(200px);\n opacity: 0;\n }\n}\n@keyframes slide-right-reverse {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n -webkit-transform: translateX(200px);\n transform: translateX(200px);\n opacity: 0;\n }\n}\n\n@-webkit-keyframes slide-left {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n -webkit-transform: translateX(-200px);\n transform: translateX(-200px);\n opacity: 0;\n }\n}\n@keyframes slide-left {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n -webkit-transform: translateX(-200px);\n transform: translateX(-200px);\n opacity: 0;\n }\n}\n\n@-webkit-keyframes slide-left-reverse {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n -webkit-transform: translateX(-200px);\n transform: translateX(-200px);\n opacity: 0;\n }\n}\n@keyframes slide-left-reverse {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n -webkit-transform: translateX(-200px);\n transform: translateX(-200px);\n opacity: 0;\n }\n}\n","import {Component, Host, h, Prop} from \"@stencil/core\";\nimport {CtaLinkVariants} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-opening-hours\",\n styleUrl: \"hy-opening-hours.scss\",\n shadow: false,\n})\nexport class HyOpeningHours {\n @Prop() blockTitle: string = null;\n @Prop() language?: string;\n @Prop() venueType: string = \"libraries\";\n @Prop() blockId?: string;\n @Prop() nextLabel?: string;\n @Prop() prevLabel?: string;\n @Prop() listLabel?: string;\n @Prop() buildingLabel?: string;\n @Prop() customerServiceLabel?: string;\n @Prop() date: string = null;\n @Prop() dateTitle: string = null;\n @Prop() dateType: string = \"day\";\n @Prop() multiple: boolean = false;\n @Prop() customLinkTitle: string = null;\n @Prop() customLink: string = null;\n @Prop() exceptional: boolean = false;\n\n render() {\n const containerClasses = [\n \"hy-open-hours--container\",\n this.exceptional ? \"hy-open-hours--container--exceptional\" : \"\",\n ].join(\" \");\n\n const listClasses = [\"open-hours__content__top-label\", this.venueType].join(\" \");\n const buildingClasses = [\"open-hours__content__top-label building\", this.venueType].join(\" \");\n return (\n <Host>\n <div\n class={containerClasses}\n data-lang={this.language}\n data-id={this.blockId}\n data-date={this.date}\n data-type={this.dateType}\n data-multiple={this.multiple}\n >\n {this.blockTitle && <h3 class=\"open-hours__title\">{this.blockTitle}</h3>}\n {!this.exceptional && (\n <div class=\"open-hours__date-change\">\n <button aria-label={this.prevLabel} class=\"icon--arrow-left open-hours__prev-date\">\n <hy-icon icon={\"hy-icon-caret-left\"} size={18} />\n </button>\n <span class=\"open-hours__date-change--title\">{this.dateTitle}</span>\n <button aria-label={this.nextLabel} class=\"icon--arrow-right open-hours__next-date\">\n <hy-icon icon={\"hy-icon-caret-right\"} size={18} />\n </button>\n </div>\n )}\n <div class=\"open-hours__content__top\">\n <span class={listClasses}>{this.listLabel}</span>\n <span class={buildingClasses}>{this.buildingLabel}</span>\n {this.customerServiceLabel && <span class={listClasses}>{this.customerServiceLabel}</span>}\n </div>\n <div class=\"open-hours__content\">\n <slot />\n </div>\n {this.customLink && (\n <div class=\"open-hours__links\">\n <hy-cta-link\n full-width\n link-content={this.customLinkTitle}\n sc-label={this.customLinkTitle}\n url={this.customLink}\n variant={CtaLinkVariants.linkList}\n >\n </hy-cta-link>\n </div>\n )}\n </div>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n",":host {\n display: block;\n}\n\n.open-hours__list-item {\n border-top: 1px solid var(--grayscale-medium);\n color: var(--grayscale-dark-text);\n display: flex;\n flex-direction: row;\n font-size: 0.875rem;\n justify-content: space-between;\n padding: 0.5rem 0;\n font-family: var(--main-font-family);\n text-align: start;\n\n &--today {\n background-color: var(--grayscale-light);\n\n span:first-child {\n margin-left: 4px;\n padding-left: 4px;\n margin-right: -8px;\n font-weight: bold;\n border-left: 2px solid var(--grayscale-black);\n }\n }\n\n & > span:not(.luomus) {\n text-align: left;\n width: calc(100vw / 3);\n }\n & > span.luomus {\n width: calc(100vw / 2);\n }\n\n &--date {\n margin-right: 1rem;\n }\n\n &--hours {\n margin-right: 0.2rem;\n }\n\n &--hours.luomus {\n text-align: center;\n }\n}\n","export interface items {\n dateLibrary: string;\n building: string;\n service: string;\n today: string;\n}\n\nimport {Component, Host, h, Prop, Watch} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-opening-hours-content\",\n styleUrl: \"hy-opening-hours-content.scss\",\n shadow: false,\n})\nexport class HyOpeningHoursContent {\n @Prop() multiple: boolean = false;\n @Prop() selfServiceLabel: string = null;\n @Prop() venueType: string = \"libraries\";\n\n private _dataItems: items[];\n\n @Prop() dataItems: items[] | string;\n\n @Watch(\"dataItems\") dataItemsWatcher(data: items[] | string) {\n this._dataItems = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n componentWillLoad() {\n this.dataItemsWatcher(this.dataItems);\n }\n\n render() {\n return (\n <Host>\n {this._dataItems.map((item) => {\n if (!item.service) return;\n const itemClasses = [\"open-hours__list-item\", item.today ? \"open-hours__list-item--today\" : \"\"].join(\" \");\n return (\n <div class={itemClasses}>\n <span class=\"open-hours__list-item--office\">{item.today ? item.today : item.dateLibrary}</span>\n <span class=\"open-hours__list-item--hours\">{item.building}</span>\n <span class=\"open-hours__list-item--service\">{item.service}</span>\n </div>\n );\n })}\n {this.selfServiceLabel && (\n <div class=\"open-hours__content__top\">\n <span class=\"open-hours__content__top-label\">{this.selfServiceLabel}</span>\n </div>\n )}\n {this._dataItems.map((item) => {\n if (item.service) return;\n const itemClasses = [\"open-hours__list-item\", item.today ? \"open-hours__list-item--today\" : \"\"].join(\" \");\n\n const hoursClasses = [\"open-hours__list-item--hours\", this.venueType].join(\" \");\n const officeClasses = [\"open-hours__list-item--office\", this.venueType].join(\" \");\n return (\n <div class={itemClasses}>\n <span class={officeClasses}>{item.today ? item.today : item.dateLibrary}</span>\n <span class={hoursClasses}>{item.building}</span>\n {this.venueType !== \"luomus\" && <span class=\"open-hours__list-item--service\">-</span>}\n </div>\n );\n })}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/hy-pager_2.cjs.entry.js ADDED Viewed

@@ -0,0 +1,64 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-32830401.js');
+const utils = require('./utils-bfc1127a.js');
+const hyPagerCss = ":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-pager{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;font-family:var(--main-font-family);list-style:none;padding:0}";
+const HyPager = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    const classAttributes = ["hy-pager"].join(" ");
+    return (index.h("ul", { class: classAttributes }, index.h("slot", null)));
+  }
+};
+HyPager.style = hyPagerCss;
+const hyPagerItemCss = ":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-pager__item{font-size:0.875rem;line-height:24px;font-weight:700;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main-light);color:var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-family:var(--main-font-family);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;letter-spacing:-0.4px;margin-bottom:4px;margin-right:4px;min-height:36px;min-width:36px;text-align:center}@media (min-width: 60rem){.hy-pager__item{margin-right:6px;min-height:40px;min-width:40px}}.hy-pager__item a{font-size:0.875rem;line-height:24px;font-weight:700;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;letter-spacing:-0.4px;min-height:36px;min-width:36px;text-decoration:none}@media (min-width: 60rem){.hy-pager__item a{font-size:1rem;line-height:24px;letter-spacing:-0.5px;min-height:40px;min-width:40px}}.hy-pager__item a:not([aria-current=true]):hover{background-color:var(--brand-main);cursor:pointer}.hy-pager__item__current{background-color:var(--grayscale-white);-webkit-box-sizing:border-box;box-sizing:border-box;border:2px solid var(--grayscale-black)}.hy-pager__item__current a{color:var(--brand-main-nearly-black)}.hy-pager__item__current a:hover{background-color:var(--grayscale-white)}.hy-pager__item__ellipsis{background-color:var(--grayscale-white);color:var(--brand-main-nearly-black);min-width:auto;min-height:auto}.hy-pager__item__next a,.hy-pager__item__previous a{padding:7px 12px 5px 12px}@media (min-width: 60rem){.hy-pager__item__next a,.hy-pager__item__previous a{padding:8px 12px}}.hy-pager__item__next .hy-icon-wrapper,.hy-pager__item__previous .hy-icon-wrapper{margin:0 4px}@media (min-width: 60rem){.hy-pager__item__next .hy-icon-wrapper,.hy-pager__item__previous .hy-icon-wrapper{margin:0 6px}}.hy-pager__item__next .hy-icon-wrapper svg,.hy-pager__item__previous .hy-icon-wrapper svg{fill:var(--grayscale-white)}";
+const HyPagerItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.variant = utils.PaginationItemVariants.default;
+    this.itemLabel = undefined;
+    this.itemUrl = undefined;
+    this.scAriaLabel = undefined;
+  }
+  render() {
+    let classAttributes = ["hy-pager__item"].join(" ");
+    switch (this.variant) {
+      case utils.PaginationItemVariants.current: {
+        classAttributes = ["hy-pager__item", "hy-pager__item__current"].join(" ");
+        return (index.h("li", { class: classAttributes }, index.h("a", { href: this.itemUrl, "aria-current": "true" }, this.itemLabel)));
+      }
+      case utils.PaginationItemVariants.next: {
+        classAttributes = ["hy-pager__item", "hy-pager__item__next"].join(" ");
+        const iconClassAttributes = ["link-icon"].join(" ");
+        return (index.h("li", { class: classAttributes }, index.h("a", { href: this.itemUrl, "aria-label": this.scAriaLabel }, this.itemLabel, index.h("span", { class: "hy-icon-wrapper" }, index.h("div", { class: iconClassAttributes }, index.h("hy-icon", { icon: "hy-icon-arrow-to-right", size: 12 }))))));
+      }
+      case utils.PaginationItemVariants.previous: {
+        classAttributes = ["hy-pager__item", "hy-pager__item__previous"].join(" ");
+        const iconClassAttributes = ["link-icon"].join(" ");
+        return (index.h("li", { class: classAttributes }, index.h("a", { href: this.itemUrl, "aria-label": this.scAriaLabel }, index.h("span", { class: "hy-icon-wrapper" }, index.h("div", { class: iconClassAttributes }, index.h("hy-icon", { icon: "hy-icon-arrow-left", size: 12 }))), this.itemLabel)));
+      }
+      case utils.PaginationItemVariants.ellipsis: {
+        classAttributes = ["hy-pager__item", "hy-pager__item__ellipsis"].join(" ");
+        return index.h("li", { class: classAttributes }, "...");
+      }
+      default: {
+        classAttributes = ["hy-pager__item"].join(" ");
+        return (index.h("li", { class: classAttributes }, index.h("a", { href: this.itemUrl, "aria-label": this.scAriaLabel }, this.itemLabel)));
+      }
+    }
+  }
+};
+HyPagerItem.style = hyPagerItemCss;
+exports.hy_pager = HyPager;
+exports.hy_pager_item = HyPagerItem;
+//# sourceMappingURL=hy-pager_2.cjs.entry.js.map

package/dist/cjs/hy-pager_2.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"hy-pager.hy-pager-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,+jDAA+jD;;MCOrkD,OAAO;;;;EAClB,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE/C,QACEA,gBAAI,KAAK,EAAE,eAAe,IACxBA,qBAAa,CACV,EACL;GACH;;;;AChBH,MAAM,cAAc,GAAG,m6GAAm6G;;MCQ76G,WAAW;;;mBACoBC,4BAAsB,CAAC,OAAO;;;;;EAKxE,MAAM;IACJ,IAAI,eAAe,GAAG,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnD,QAAQ,IAAI,CAAC,OAAO;MAClB,KAAKA,4BAAsB,CAAC,OAAO,EAAE;QACnC,eAAe,GAAG,CAAC,gBAAgB,EAAE,yBAAyB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC1E,QACED,gBAAI,KAAK,EAAE,eAAe,IACxBA,eAAG,IAAI,EAAE,IAAI,CAAC,OAAO,kBAAe,MAAM,IACvC,IAAI,CAAC,SAAS,CACb,CACD,EACL;OACH;MACD,KAAKC,4BAAsB,CAAC,IAAI,EAAE;QAChC,eAAe,GAAG,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACvE,MAAM,mBAAmB,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACpD,QACED,gBAAI,KAAK,EAAE,eAAe,IACxBA,eAAG,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAc,IAAI,CAAC,WAAW,IAChD,IAAI,CAAC,SAAS,EACfA,kBAAM,KAAK,EAAE,iBAAiB,IAC5BA,iBAAK,KAAK,EAAE,mBAAmB,IAC7BA,qBAAS,IAAI,EAAE,wBAAwB,EAAE,IAAI,EAAE,EAAE,GAAI,CACjD,CACD,CACL,CACD,EACL;OACH;MACD,KAAKC,4BAAsB,CAAC,QAAQ,EAAE;QACpC,eAAe,GAAG,CAAC,gBAAgB,EAAE,0BAA0B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3E,MAAM,mBAAmB,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACpD,QACED,gBAAI,KAAK,EAAE,eAAe,IACxBA,eAAG,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAc,IAAI,CAAC,WAAW,IACjDA,kBAAM,KAAK,EAAE,iBAAiB,IAC5BA,iBAAK,KAAK,EAAE,mBAAmB,IAC7BA,qBAAS,IAAI,EAAE,oBAAoB,EAAE,IAAI,EAAE,EAAE,GAAI,CAC7C,CACD,EACN,IAAI,CAAC,SAAS,CACb,CACD,EACL;OACH;MACD,KAAKC,4BAAsB,CAAC,QAAQ,EAAE;QACpC,eAAe,GAAG,CAAC,gBAAgB,EAAE,0BAA0B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3E,OAAOD,gBAAI,KAAK,EAAE,eAAe,UAAU,CAAC;OAC7C;MACD,SAAS;QACP,eAAe,GAAG,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC/C,QACEA,gBAAI,KAAK,EAAE,eAAe,IACxBA,eAAG,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAc,IAAI,CAAC,WAAW,IAChD,IAAI,CAAC,SAAS,CACb,CACD,EACL;OACH;KACF;GACF;;;;;;;","names":["h","PaginationItemVariants"],"sources":["./src/components/hy-pagination/hy-pager/hy-pager.scss?tag=hy-pager&encapsulation=shadow","./src/components/hy-pagination/hy-pager/hy-pager.tsx","./src/components/hy-pagination/hy-pager-item/hy-pager-item.scss?tag=hy-pager-item&encapsulation=shadow","./src/components/hy-pagination/hy-pager-item/hy-pager-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-pager {\n align-items: center;\n display: flex;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n font-family: var(--main-font-family);\n list-style: none;\n padding: 0;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-pager\",\n styleUrl: \"hy-pager.scss\",\n shadow: true,\n})\nexport class HyPager {\n render() {\n const classAttributes = [\"hy-pager\"].join(\" \");\n\n return (\n <ul class={classAttributes}>\n <slot></slot>\n </ul>\n );\n }\n}\n",":host {\n display: block;\n}\n\n.hy-pager__item {\n @include font-size(14px, 24px);\n @include font-weight($bold);\n align-items: center;\n background-color: var(--brand-main-light);\n color: var(--grayscale-white);\n display: flex;\n flex-direction: row;\n font-family: var(--main-font-family);\n justify-content: center;\n letter-spacing: -0.4px;\n margin-bottom: 4px;\n margin-right: 4px;\n min-height: 36px;\n min-width: 36px;\n text-align: center;\n\n @include breakpoint($wide) {\n margin-right: 6px;\n min-height: 40px;\n min-width: 40px;\n }\n\n a {\n @include font-size(14px, 24px);\n @include font-weight($bold);\n align-items: center;\n color: var(--grayscale-white);\n display: flex;\n flex-direction: row;\n justify-content: center;\n letter-spacing: -0.4px;\n min-height: 36px;\n min-width: 36px;\n text-decoration: none;\n\n @include breakpoint($wide) {\n @include font-size(16px, 24px);\n letter-spacing: -0.5px;\n min-height: 40px;\n min-width: 40px;\n }\n\n &:not([aria-current=\"true\"]):hover {\n background-color: var(--brand-main);\n cursor: pointer;\n }\n }\n\n &__current {\n background-color: var(--grayscale-white);\n box-sizing: border-box;\n border: 2px solid var(--grayscale-black);\n a {\n color: var(--brand-main-nearly-black);\n &:hover {\n background-color: var(--grayscale-white);\n }\n }\n }\n\n &__ellipsis {\n background-color: var(--grayscale-white);\n color: var(--brand-main-nearly-black);\n min-width: auto;\n min-height: auto;\n }\n\n &__next,\n &__previous {\n a {\n padding: 7px 12px 5px 12px;\n\n @include breakpoint($wide) {\n padding: 8px 12px;\n }\n }\n\n .hy-icon-wrapper {\n margin: 0 4px;\n @include breakpoint($wide) {\n margin: 0 6px;\n }\n\n svg {\n fill: var(--grayscale-white);\n }\n }\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {PaginationItemVariants} from \"../../../utils/utils\";\n\n@Component({\n tag: \"hy-pager-item\",\n styleUrl: \"hy-pager-item.scss\",\n shadow: true,\n})\nexport class HyPagerItem {\n @Prop() variant: PaginationItemVariants = PaginationItemVariants.default;\n @Prop() itemLabel?: string;\n @Prop() itemUrl?: string;\n @Prop() scAriaLabel?: string;\n\n render() {\n let classAttributes = [\"hy-pager__item\"].join(\" \");\n switch (this.variant) {\n case PaginationItemVariants.current: {\n classAttributes = [\"hy-pager__item\", \"hy-pager__item__current\"].join(\" \");\n return (\n <li class={classAttributes}>\n <a href={this.itemUrl} aria-current=\"true\">\n {this.itemLabel}\n </a>\n </li>\n );\n }\n case PaginationItemVariants.next: {\n classAttributes = [\"hy-pager__item\", \"hy-pager__item__next\"].join(\" \");\n const iconClassAttributes = [\"link-icon\"].join(\" \");\n return (\n <li class={classAttributes}>\n <a href={this.itemUrl} aria-label={this.scAriaLabel}>\n {this.itemLabel}\n <span class={\"hy-icon-wrapper\"}>\n <div class={iconClassAttributes}>\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={12} />\n </div>\n </span>\n </a>\n </li>\n );\n }\n case PaginationItemVariants.previous: {\n classAttributes = [\"hy-pager__item\", \"hy-pager__item__previous\"].join(\" \");\n const iconClassAttributes = [\"link-icon\"].join(\" \");\n return (\n <li class={classAttributes}>\n <a href={this.itemUrl} aria-label={this.scAriaLabel}>\n <span class={\"hy-icon-wrapper\"}>\n <div class={iconClassAttributes}>\n <hy-icon icon={\"hy-icon-arrow-left\"} size={12} />\n </div>\n </span>\n {this.itemLabel}\n </a>\n </li>\n );\n }\n case PaginationItemVariants.ellipsis: {\n classAttributes = [\"hy-pager__item\", \"hy-pager__item__ellipsis\"].join(\" \");\n return <li class={classAttributes}>...</li>;\n }\n default: {\n classAttributes = [\"hy-pager__item\"].join(\" \");\n return (\n <li class={classAttributes}>\n <a href={this.itemUrl} aria-label={this.scAriaLabel}>\n {this.itemLabel}\n </a>\n </li>\n );\n }\n }\n }\n}\n"],"version":3}

package/dist/cjs/hy-paragraph-text.cjs.entry.js ADDED Viewed

@@ -0,0 +1,48 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-32830401.js');
+const paragraphTextContentCss = ":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-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:16px}}@media (min-width: 60rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:32px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:32px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:40px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{padding-bottom:16px;padding-top:32px}}";
+const defaultParagraphTextCss = ":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-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:16px}}@media (min-width: 60rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:32px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:32px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:40px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:32px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:16px;padding-top:40px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{padding-bottom:16px;padding-top:48px}}.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{padding-bottom:16px;padding-top:40px}}:host{display:block}.hy-paragraph-text{font-size:0.9375rem;line-height:22px;color:var(--grayscale-dark-text);font-family:var(--main-font-family);letter-spacing:0;width:100%}@media (min-width: 30rem){.hy-paragraph-text{font-size:1rem;line-height:24px}}@media (min-width: 60rem){.hy-paragraph-text{width:91.46%}}@media (min-width: 1601px){.hy-paragraph-text{font-size:1.0625rem;line-height:26px;width:82.89%}}@media (min-width: 75.0625rem){.hy-paragraph-text__large{font-size:1.0625rem;line-height:26px;width:82.89%}}@media (min-width: 1601px){.hy-paragraph-text__large{width:74.17%}}@media (min-width: 60rem){.hy-paragraph-text.degree_programme_group{width:91.46%}}@media (min-width: 60rem){.hy-paragraph-text.main_front_page,.hy-paragraph-text.landing_page,.hy-paragraph-text.faculty,.hy-paragraph-text.generic_site_group,.hy-paragraph-text.degree_programme_group,.hy-paragraph-text.research_group{width:100%}}.hy-paragraph-text h1,.hy-paragraph-text h2,.hy-paragraph-text h3,.hy-paragraph-text h4,.hy-paragraph-text h5,.hy-paragraph-text h6{color:var(--grayscale-black);font-family:var(--main-font-family);font-weight:700;margin:0;width:100%}.hy-paragraph-text h1.negative,.hy-paragraph-text h2.negative,.hy-paragraph-text h3.negative,.hy-paragraph-text h4.negative,.hy-paragraph-text h5.negative,.hy-paragraph-text h6.negative{color:var(--grayscale-white)}.hy-paragraph-text a{font-size:0.875rem;line-height:20px;color:var(--link-blue);font-family:var(--main-font-family);font-weight:600}@media (min-width: 30rem){.hy-paragraph-text a{font-size:1rem;line-height:24px;letter-spacing:-0.1px}}@media (min-width: 1601px){.hy-paragraph-text a{font-size:1.0625rem;line-height:26px}}.hy-paragraph-text a:hover{color:var(--brand-main)}.hy-paragraph-text a[target=_blank]:after{display:inline-block;vertical-align:middle;width:12px;height:12px;margin-left:3px;background-size:contain;content:\"\";background-image: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>\");-webkit-transform:rotate(315deg);transform:rotate(315deg)}.hy-paragraph-text a[target=_blank]:after:hover{background-image: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-paragraph-text a[target=_blank]:hover:after{background-image: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-paragraph-text p{margin-top:0;padding-top:0}.hy-paragraph-text p:last-of-type{margin-bottom:0}.hy-paragraph-text:first-child{margin-top:0 !important}hy-paragraph-text+hy-link-list{display:block;margin-top:32px}";
+const paragraphTextLandingCss = ":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-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:32px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:16px;padding-top:40px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{padding-bottom:16px;padding-top:48px}}.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{padding-bottom:16px;padding-top:40px}}";
+const ParagraphText = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.variant = undefined;
+    this.placement = "internal";
+    this.headerstyle = "default";
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    const classAttributes = [
+      "hy-paragraph-text",
+      `hy-paragraph-text__${this.headerstyle}`,
+      `${this.variant}`,
+      `${this.placement}`,
+      `${this.headerstyle}`,
+    ].join(" ");
+    return (index.h(index.Host, null, index.h("div", { class: classAttributes }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+};
+ParagraphText.style = {
+  content: paragraphTextContentCss,
+  default: defaultParagraphTextCss,
+  landing: paragraphTextLandingCss
+};
+exports.hy_paragraph_text = ParagraphText;
+//# sourceMappingURL=hy-paragraph-text.cjs.entry.js.map

package/dist/cjs/hy-paragraph-text.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"hy-paragraph-text.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,uBAAuB,GAAG,yiIAAyiI;;ACAzkI,MAAM,uBAAuB,GAAG,8wSAA8wS;;ACA9yS,MAAM,uBAAuB,GAAG,6mGAA6mG;;MCWhoG,aAAa;;;;qBAEI,UAAU;uBACR,SAAS;;EAGvC,gBAAgB;IACd,IAAI,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5C,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;QACjD,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;OAC5B;KACF;GACF;EAED,MAAM;IACJ,MAAM,eAAe,GAAG;MACtB,mBAAmB;MACnB,sBAAsB,IAAI,CAAC,WAAW,EAAE;MACxC,GAAG,IAAI,CAAC,OAAO,EAAE;MACjB,GAAG,IAAI,CAAC,SAAS,EAAE;MACnB,GAAG,IAAI,CAAC,WAAW,EAAE;KACtB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,eAAe,IACzBA,qBAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/hy-paragraph-text/paragraph-text-content.scss?tag=hy-paragraph-text&mode=content","./src/components/hy-paragraph-text/paragraph-text.scss?tag=hy-paragraph-text&mode=default","./src/components/hy-paragraph-text/paragraph-text-landing.scss?tag=hy-paragraph-text&mode=landing","./src/components/hy-paragraph-text/paragraph-text.tsx"],"sourcesContent":["//overrides for Content pages\n\n/*\n* Common styles for text plus mobile & tablet & small desktop\n* in Content Pages and Field of science pages.\n*/\n.hy-paragraph-text.content_page.external,\n.hy-paragraph-text.field_of_science.external {\n margin-top: 24px; //total gap between heading h2 and paragraph content is 48px\n\n @include breakpoint($narrow) {\n margin-top: 16px; //total gap 40px\n }\n @include breakpoint($wide) {\n margin-top: 32px; //total gap 56px\n }\n}\n\n// There is a sidebar on the Content page\n.hy-paragraph-text.content_page.external.default,\n.hy-paragraph-text.field_of_science.external.default {\n @include breakpoint($extrawide) {\n margin-top: 32px; //total gap 56px\n }\n @include breakpoint($xlarge) {\n margin-top: 40px; //total gap 64px\n }\n}\n\n// No sidebar on the Content page\n.hy-paragraph-text.content_page.external.large,\n.hy-paragraph-text.field_of_science.external.large {\n @include breakpoint($extrawide) {\n margin-top: 40px; //total gap 64px\n }\n @include breakpoint($xlarge) {\n margin-top: 40px; //total gap 64px\n }\n}\n\n.hy-paragraph-text.content_page,\n.hy-paragraph-text.field_of_science {\n h3 {\n // text H3 small\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H3 Medium size\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h4 {\n // text H4 small\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H4 Medium size\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h5 {\n // text H5 small\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H5 Medium size\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h6 {\n // text H6 small\n @include font-size(14px, 16px);\n letter-spacing: -0.44px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H6 Medium size\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n}\n","@import \"./paragraph-text-content.scss\";\n@import \"./paragraph-text-landing.scss\";\n\n:host {\n display: block;\n}\n\n// General styles for text paragraph\n.hy-paragraph-text {\n @include font-size(15px, 22px); // Paragraph Small size\n color: var(--grayscale-dark-text);\n font-family: var(--main-font-family);\n letter-spacing: 0;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px); // Paragraph Medium size\n }\n @include breakpoint($wide) {\n width: 91.46%; // 11 col\n }\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n width: 82.89%; // 10 col\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(17px, 26px); // Paragraph Large size\n width: 82.89%; // 10 col\n }\n @include breakpoint($xlarge) {\n width: 74.17%; // 9 col\n }\n }\n\n &.degree_programme_group {\n @include breakpoint($wide) {\n width: 91.46%; // 11 col\n }\n }\n\n &.main_front_page,\n &.landing_page,\n &.faculty,\n &.generic_site_group,\n &.degree_programme_group,\n &.research_group {\n @include breakpoint($wide) {\n width: 100%;\n }\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n font-weight: 700;\n margin: 0;\n width: 100%;\n\n &.negative {\n color: var(--grayscale-white);\n }\n }\n\n // link within paragraph (Open sans semibold)\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\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: inline-block;\n vertical-align: middle;\n width: 12px;\n height: 12px;\n margin-left: 3px;\n background-size: contain;\n content: \"\";\n background-image: 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 transform: rotate(315deg);\n\n &:hover {\n background-image: 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 background-image: 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 p {\n margin-top: 0;\n padding-top: 0;\n\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n\n // When hy-paragraph-text is the first child it will not add spacing to top. Will fix heading + text spacing issue.\n &:first-child {\n margin-top: 0 !important;\n }\n}\n\nhy-paragraph-text + hy-link-list {\n display: block;\n margin-top: 32px;\n}\n","//overrides for Landing pages and Front page\n\n// Common styles for text plus mobile & tablet & small desktop in Landing Pages\n.hy-paragraph-text.landing_page,\n.hy-paragraph-text.main_front_page {\n h3 {\n // text H3 small\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n\n padding-bottom: 12px;\n padding-top: 32px;\n\n @include breakpoint($narrow) {\n // text H3 Medium size\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n\n padding-bottom: 16px;\n padding-top: 40px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 48px;\n }\n }\n\n h4 {\n // text H4 small\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H4 Medium size\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n\n h5 {\n // text H5 small\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H5 Medium size\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n\n h6 {\n // text H6 small\n @include font-size(14px, 16px);\n letter-spacing: -0.44px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H6 Medium size\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-paragraph-text\",\n styleUrls: {\n default: \"paragraph-text.scss\",\n content: \"paragraph-text-content.scss\",\n landing: \"paragraph-text-landing.scss\",\n },\n shadow: false,\n})\nexport class ParagraphText {\n @Prop() variant: string;\n @Prop() placement: string = \"internal\";\n @Prop() headerstyle: string = \"default\";\n @Element() el: HTMLElement;\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n }\n\n render() {\n const classAttributes = [\n \"hy-paragraph-text\",\n `hy-paragraph-text__${this.headerstyle}`,\n `${this.variant}`,\n `${this.placement}`,\n `${this.headerstyle}`,\n ].join(\" \");\n\n return (\n <Host>\n <div class={classAttributes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}