@itcenteratunihelsinki/huds-lib 0.8.73 → 0.8.74

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

@@ -1,23 +1,22 @@
-import { r as registerInstance, h } from './index-f84f2a7d.js';
+import { r as registerInstance, h } from './index-e2e165ed.js';
 
 const hyMainCss = ":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-main{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 auto;max-width:120.0625rem;padding:0;width:100%}.hy-main .layout-content{padding:0;width:100%}.hy-main .layout-user-login-page{padding:0 var(--gutter-medium);width:100%}.hy-main .layout-user-login-page div[id^=block-breadcrumbs]{display:none}.hy-main__common{position:relative}@media (min-width: 30rem){.hy-main__common .layout-content{margin:0 auto;width:100%}}@media (min-width: 75.0625rem){.hy-main__common .layout-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:80%}}@media (min-width: 1601px){.hy-main__common .layout-content{padding:0 2rem}}.hy-main__common .layout-sidebar-first{display:none}@media (min-width: 75.0625rem){.hy-main__common .layout-sidebar-first{background:var(--grayscale-white);border-top:1px solid var(--grayscale-black);border-right:1px solid var(--grayscale-medium);display:block;max-width:320px;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;padding:var(--gutter-extrawide) 13px;width:20%;height:auto}.hy-main__common .layout-sidebar-first.menu-is-open{background:var(--grayscale-white);min-height:100vh;overflow:auto}}.hy-main__large .layout-content{padding:0;width:100%}@media (min-width: 75.0625rem){.hy-main__large .layout-content{padding:0 2rem}}";
+const HyMainStyle0 = hyMainCss;
 
 const HyMain = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.hasSidebar = false;
-  }
-  render() {
-    const classAttributes = [
-      "hy-main",
-      this.hasSidebar ? "with-sidebar" : "without-sidebar",
-      this.hasSidebar ? "hy-main__common" : "hy-main__large",
-    ].join(" ");
-    return (h("div", { class: classAttributes }, h("slot", null)));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hasSidebar = false;
+    }
+    render() {
+        const classAttributes = [
+            "hy-main",
+            this.hasSidebar ? "with-sidebar" : "without-sidebar",
+            this.hasSidebar ? "hy-main__common" : "hy-main__large",
+        ].join(" ");
+        return (h("div", { key: '9cc19343248f4c5263fb2557c54b955aee3351a6', class: classAttributes }, h("slot", { key: '7d89528471e2dfaf52a2ed080e7b64da5e5386ec' })));
+    }
 };
-HyMain.style = hyMainCss;
+HyMain.style = HyMainStyle0;
 
 export { HyMain as hy_main };
-
-//# sourceMappingURL=hy-main.entry.js.map

package/dist/esm/hy-menu-main-group.entry.js

@@ -1,149 +1,148 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f84f2a7d.js';
-import { C as ColorVariant, S as SiteLogoSize } from './utils-2819fd7e.js';
-import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e2e165ed.js';
+import { C as ColorVariant, S as SiteLogoSize } from './utils-1e7f5184.js';
+import { j as jsonParserWorker } from './globalScript-0c14426d.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}";
+const HyMenuMainGroupStyle0 = hyMenuMainGroupCss;
 
 let keys = {
-  enter: "Enter",
+    enter: "Enter",
 };
 const HyMenuMainGroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.universityMainMenuToggled = createEvent(this, "universityMainMenuToggled", 7);
-    this.mobileMenuTopToggle = 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;
-  }
-  async componentWillLoad() {
-    this._dataMainMenu = await jsonParserWorker(this.dataMainMenu);
-  }
-  handleComponentClick(event) {
-    this.isMenuOpen = !this.isMenuOpen;
-    this.emitEvent();
-    if (this.isMenuOpen) {
-      this.adjustMainMenuPosition(event.target);
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.universityMainMenuToggled = createEvent(this, "universityMainMenuToggled", 7);
+        this.mobileMenuTopToggle = 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;
     }
-    if (!this.isMenuOpen) {
-      this.showBackdropShadow('close');
+    async componentWillLoad() {
+        this._dataMainMenu = await jsonParserWorker(this.dataMainMenu);
     }
-    event.stopPropagation();
-  }
-  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) {
+    handleComponentClick(event) {
+        this.isMenuOpen = !this.isMenuOpen;
         this.emitEvent();
-        this.adjustMainMenuPosition(target);
-      }
+        if (this.isMenuOpen) {
+            this.adjustMainMenuPosition(event.target);
+        }
+        if (!this.isMenuOpen) {
+            this.showBackdropShadow('close');
+        }
+        event.stopPropagation();
+    }
+    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);
+            }
+        }
+    }
+    // Handle events that should close the menu.
+    handleOutsideMenuClick(event) {
+        if (this.isMenuOpen) {
+            this.isMenuOpen = false;
+            this.handleTopMenuClose(event);
+        }
+        event.stopPropagation();
     }
-  }
-  // Handle events that should close the menu.
-  handleOutsideMenuClick(event) {
-    if (this.isMenuOpen) {
-      this.isMenuOpen = false;
-      this.handleTopMenuClose(event);
+    emitEvent() {
+        // Close other panels if they are open (lang menu, search, main menu, ..).
+        this.universityMainMenuToggled.emit();
+        this.mobileMenuTopToggle.emit();
     }
-    event.stopPropagation();
-  }
-  emitEvent() {
-    // Close other panels if they are open (lang menu, search, main menu, ..).
-    this.universityMainMenuToggled.emit();
-    this.mobileMenuTopToggle.emit();
-  }
-  // TODO: Cleanup this. Find cleaner way to do positioning.
-  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);
+    // TODO: Cleanup this. Find cleaner way to do positioning.
+    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);
+        }
     }
-  }
-  // TODO: Handle backdrop with CSS.
-  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");
-      }
+    // TODO: Handle backdrop with CSS.
+    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");
+            }
+        }
     }
-  }
-  handleTopMenuClose(event) {
-    this.isMenuOpen = false;
-    this.mobileMenuTopToggle.emit();
-    this.showBackdropShadow('close');
-    event.stopPropagation();
-  }
-  render() {
-    const white = "var(--grayscale-white)";
-    const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;
-    const logoColorGroup = ColorVariant.white;
-    return this.isMobile ? (h(Host, { class: {
-        "menu--main-group--mobile": true,
-        "menu--main-group--mobile__is-open": this.isMenuOpen,
-      } }, h("button", { "aria-label": this.menuLabel, class: {
-        "menu--main-group__mobile-toggle": true,
-        "is-open": this.isMenuOpen,
-      } }, h("hy-icon", { icon: "hy-icon-slim-hamburger-menu", size: 20, fill: white })), h("nav", { role: "navigation", "aria-hidden": this.isMenuOpen ? "false" : "true", class: {
-        "menu--main-group__dropdown--mobile": true,
-        "is-open": this.isMenuOpen,
-      } }, h("div", { class: "menu--main-group__dropdown__top" }, h("div", { class: "menu--main-group__logo-container", id: "menu-logo" }, h("hy-site-logo", { "is-group": true, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), h("button", { "aria-label": `Close ${this.menuLabel}`, class: "menu--main-group__dropdown__close", onClick: (e) => this.handleTopMenuClose(e) }, h("hy-icon", { icon: "hy-icon-remove", size: 20, fill: white }))), h("div", { class: "menu--main-group__dropdown__items" }, this._dataMainMenu.map((item) => {
-      return (h("a", { href: item.url, class: { "menu-main-link": true } }, h("span", { class: "menu--main-group__label" }, item.label)));
-    })), h("div", { class: "menu--main-group__dropdown__donate" }, this.donate &&
-      this.donate.map((i) => {
-        return (h("a", { class: "menu--secondary__item hy-link__donate group", href: i.url }, h("hy-icon", { icon: "hy-icon-heart-support", size: 14, fill: logoColorGroup }), h("span", { class: "hy-link__donate__label group" }, i.label)));
-      }))))) : (h(Host, { class: {
-        "menu--main-group": true,
-        "menu--main-group__is-open": this.isMenuOpen,
-      } }, h("button", { class: {
-        "menu--main-group__toggle": true,
-        "is-open": this.isMenuOpen,
-      }, "aria-expanded": this.isMenuOpen ? "true" : "false", "aria-haspopup": "menu" }, this.isMenuOpen ? (h("hy-icon", { class: "toggle__close", icon: "hy-icon-remove", size: 8, fill: white })) : (h("hy-icon", { class: "toggle__caret", icon: "hy-icon-slim-hamburger-menu", size: 8, fill: white })), h("span", null, this.menuLabel)), h("div", { class: {
-        "menu--main-group__dropdown": true,
-        "is-open": this.isMenuOpen,
-      } }, h("div", { class: "list" }, this._dataMainMenu.map((item) => {
-      return (h("a", { href: item.url, class: { "menu-main-link": true } }, h("span", { class: "heading-icon" }, h("hy-icon", { icon: "hy-icon-caret-right", size: 10, fill: white })), h("span", { class: "menu--main-group__label" }, item.label)));
-    })), h("button", { onClick: (e) => this.handleComponentClick(e), class: {
-        "panel-toggle": true,
-      }, "aria-label": "Close menu" }, h("span", { class: "panel-toggle__label" }, h("span", { class: "panel-toggle__label__title" }, this.menuLabelClose), h("hy-icon", { icon: "hy-icon-remove", size: 20, fill: ColorVariant.white }))))));
-  }
-  get el() { return getElement(this); }
+    handleTopMenuClose(event) {
+        this.isMenuOpen = false;
+        this.mobileMenuTopToggle.emit();
+        this.showBackdropShadow('close');
+        event.stopPropagation();
+    }
+    render() {
+        const white = "var(--grayscale-white)";
+        const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;
+        const logoColorGroup = ColorVariant.white;
+        return this.isMobile ? (h(Host, { class: {
+                "menu--main-group--mobile": true,
+                "menu--main-group--mobile__is-open": this.isMenuOpen,
+            } }, h("button", { "aria-label": this.menuLabel, class: {
+                "menu--main-group__mobile-toggle": true,
+                "is-open": this.isMenuOpen,
+            } }, h("hy-icon", { icon: "hy-icon-slim-hamburger-menu", size: 20, fill: white })), h("nav", { role: "navigation", "aria-hidden": this.isMenuOpen ? "false" : "true", class: {
+                "menu--main-group__dropdown--mobile": true,
+                "is-open": this.isMenuOpen,
+            } }, h("div", { class: "menu--main-group__dropdown__top" }, h("div", { class: "menu--main-group__logo-container", id: "menu-logo" }, h("hy-site-logo", { "is-group": true, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), h("button", { "aria-label": `Close ${this.menuLabel}`, class: "menu--main-group__dropdown__close", onClick: (e) => this.handleTopMenuClose(e) }, h("hy-icon", { icon: "hy-icon-remove", size: 20, fill: white }))), h("div", { class: "menu--main-group__dropdown__items" }, this._dataMainMenu.map((item) => {
+            return (h("a", { href: item.url, class: { "menu-main-link": true } }, h("span", { class: "menu--main-group__label" }, item.label)));
+        })), h("div", { class: "menu--main-group__dropdown__donate" }, this.donate &&
+            this.donate.map((i) => {
+                return (h("a", { class: "menu--secondary__item hy-link__donate group", href: i.url }, h("hy-icon", { icon: "hy-icon-heart-support", size: 14, fill: logoColorGroup }), h("span", { class: "hy-link__donate__label group" }, i.label)));
+            }))))) : (h(Host, { class: {
+                "menu--main-group": true,
+                "menu--main-group__is-open": this.isMenuOpen,
+            } }, h("button", { class: {
+                "menu--main-group__toggle": true,
+                "is-open": this.isMenuOpen,
+            }, "aria-expanded": this.isMenuOpen ? "true" : "false", "aria-haspopup": "menu" }, this.isMenuOpen ? (h("hy-icon", { class: "toggle__close", icon: "hy-icon-remove", size: 8, fill: white })) : (h("hy-icon", { class: "toggle__caret", icon: "hy-icon-slim-hamburger-menu", size: 8, fill: white })), h("span", null, this.menuLabel)), h("div", { class: {
+                "menu--main-group__dropdown": true,
+                "is-open": this.isMenuOpen,
+            } }, h("div", { class: "list" }, this._dataMainMenu.map((item) => {
+            return (h("a", { href: item.url, class: { "menu-main-link": true } }, h("span", { class: "heading-icon" }, h("hy-icon", { icon: "hy-icon-caret-right", size: 10, fill: white })), h("span", { class: "menu--main-group__label" }, item.label)));
+        })), h("button", { onClick: (e) => this.handleComponentClick(e), class: {
+                "panel-toggle": true,
+            }, "aria-label": "Close menu" }, h("span", { class: "panel-toggle__label" }, h("span", { class: "panel-toggle__label__title" }, this.menuLabelClose), h("hy-icon", { icon: "hy-icon-remove", size: 20, fill: ColorVariant.white }))))));
+    }
+    get el() { return getElement(this); }
 };
-HyMenuMainGroup.style = hyMenuMainGroupCss;
+HyMenuMainGroup.style = HyMenuMainGroupStyle0;
 
 export { HyMenuMainGroup as hy_menu_main_group };
-
-//# sourceMappingURL=hy-menu-main-group.entry.js.map

package/dist/esm/hy-opening-hours_2.entry.js

@@ -1,77 +1,77 @@
-import { r as registerInstance, h, H as Host } from './index-f84f2a7d.js';
-import { h as CtaLinkVariants } from './utils-2819fd7e.js';
+import { r as registerInstance, h, H as Host } from './index-e2e165ed.js';
+import { h as CtaLinkVariants } from './utils-1e7f5184.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 HyOpeningHoursStyle0 = hyOpeningHoursCss;
 
 const HyOpeningHours = class {
-  constructor(hostRef) {
-    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 (h(Host, null, 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 && h("h3", { class: "open-hours__title" }, this.blockTitle), !this.exceptional && (h("div", { class: "open-hours__date-change" }, h("button", { "aria-label": this.prevLabel, class: "icon--arrow-left open-hours__prev-date" }, h("hy-icon", { icon: "hy-icon-caret-left", size: 18 })), h("span", { class: "open-hours__date-change--title" }, this.dateTitle), h("button", { "aria-label": this.nextLabel, class: "icon--arrow-right open-hours__next-date" }, h("hy-icon", { icon: "hy-icon-caret-right", size: 18 })))), h("div", { class: "open-hours__content__top" }, h("span", { class: listClasses }, this.listLabel), h("span", { class: buildingClasses }, this.buildingLabel), this.customerServiceLabel && h("span", { class: listClasses }, this.customerServiceLabel)), h("div", { class: "open-hours__content" }, h("slot", null)), this.customLink && (h("div", { class: "open-hours__links" }, h("hy-cta-link", { "full-width": true, "link-content": this.customLinkTitle, "sc-label": this.customLinkTitle, url: this.customLink, variant: CtaLinkVariants.linkList })))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
-  }
+    constructor(hostRef) {
+        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 (h(Host, { key: 'd876f06d312e55391addf8646da0f5ab313dc4ea' }, h("div", { key: 'a97a07ee0209e95d30a955e8e398a6a396782b6e', class: containerClasses, "data-lang": this.language, "data-id": this.blockId, "data-date": this.date, "data-type": this.dateType, "data-multiple": this.multiple }, this.blockTitle && h("h3", { key: '37ef25b28660605c7c693eb85ecce31a117a7b62', class: "open-hours__title" }, this.blockTitle), !this.exceptional && (h("div", { key: '7c1c76bd22bf1457e61bd8e274c42463751219e3', class: "open-hours__date-change" }, h("button", { key: 'f042f35f644fb6a4fb175e37937213dd2aa7ce31', "aria-label": this.prevLabel, class: "icon--arrow-left open-hours__prev-date" }, h("hy-icon", { key: 'ca4af5b86aa02e71996349194ab3d068cb0783dc', icon: "hy-icon-caret-left", size: 18 })), h("span", { key: '7daa93c84a0c3410c6fe7b5f55272082345e00c3', class: "open-hours__date-change--title" }, this.dateTitle), h("button", { key: 'ec5e278c086921b836cbc94858c163801299146a', "aria-label": this.nextLabel, class: "icon--arrow-right open-hours__next-date" }, h("hy-icon", { key: '9706a55abe9bf097457b9e329d12df529753e160', icon: "hy-icon-caret-right", size: 18 })))), h("div", { key: '9624deefa42e7316bbb780fd018ea91d762fb8e4', class: "open-hours__content__top" }, h("span", { key: '848bc133bc9900c79403b221fe804725f033a2d5', class: listClasses }, this.listLabel), h("span", { key: '8d7b2a2b5264bef5229081ca51773e9549029f34', class: buildingClasses }, this.buildingLabel), this.customerServiceLabel && h("span", { key: '40f91e38e84a58a293db1eb55de1d795a7ff9b72', class: listClasses }, this.customerServiceLabel)), h("div", { key: 'c313408d1a3a15bcf82c42b7e83755a8f2429a71', class: "open-hours__content" }, h("slot", { key: '03f45f9e0e06fb70b493c5eaa1b67b3adb347299' })), this.customLink && (h("div", { key: 'aed69bdc6eac1863cb2dfac00edb16fc09a4936b', class: "open-hours__links" }, h("hy-cta-link", { key: 'f45dfa62ca740349e4ba94c9c132c28beac2da72', "full-width": true, "link-content": this.customLinkTitle, "sc-label": this.customLinkTitle, url: this.customLink, variant: CtaLinkVariants.linkList })))), h("hy-box", { key: 'be72e04bc743b802e275a92a7172519ef4d2366e', mb: "1.75, 1.75, 2, 2.5" })));
+    }
 };
-HyOpeningHours.style = hyOpeningHoursCss;
+HyOpeningHours.style = HyOpeningHoursStyle0;
 
 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 HyOpeningHoursContentStyle0 = hyOpeningHoursContentCss;
 
 const HyOpeningHoursContent = class {
-  constructor(hostRef) {
-    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 (h(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 (h("div", { class: itemClasses }, h("span", { class: "open-hours__list-item--office" }, item.today ? item.today : item.dateLibrary), h("span", { class: "open-hours__list-item--hours" }, item.building), h("span", { class: "open-hours__list-item--service" }, item.service)));
-    }), this.selfServiceLabel && (h("div", { class: "open-hours__content__top" }, 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 (h("div", { class: itemClasses }, h("span", { class: officeClasses }, item.today ? item.today : item.dateLibrary), h("span", { class: hoursClasses }, item.building), this.venueType !== "luomus" && h("span", { class: "open-hours__list-item--service" }, "-")));
-    })));
-  }
-  static get watchers() { return {
-    "dataItems": ["dataItemsWatcher"]
-  }; }
+    constructor(hostRef) {
+        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 (h(Host, { key: '00885a2c042415671c4679d9cd14701992f5ac0b' }, this._dataItems.map((item) => {
+            if (!item.service)
+                return;
+            const itemClasses = ["open-hours__list-item", item.today ? "open-hours__list-item--today" : ""].join(" ");
+            return (h("div", { class: itemClasses }, h("span", { class: "open-hours__list-item--office" }, item.today ? item.today : item.dateLibrary), h("span", { class: "open-hours__list-item--hours" }, item.building), h("span", { class: "open-hours__list-item--service" }, item.service)));
+        }), this.selfServiceLabel && (h("div", { key: '2921d7bc78f58a45e10bfb2ce1e44c9fdbf56357', class: "open-hours__content__top" }, h("span", { key: '4ec1c520d1731538ec6332fb26fe7abb9a23e7a3', 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 (h("div", { class: itemClasses }, h("span", { class: officeClasses }, item.today ? item.today : item.dateLibrary), h("span", { class: hoursClasses }, item.building), this.venueType !== "luomus" && h("span", { class: "open-hours__list-item--service" }, "-")));
+        })));
+    }
+    static get watchers() { return {
+        "dataItems": ["dataItemsWatcher"]
+    }; }
 };
-HyOpeningHoursContent.style = hyOpeningHoursContentCss;
+HyOpeningHoursContent.style = HyOpeningHoursContentStyle0;
 
 export { HyOpeningHours as hy_opening_hours, HyOpeningHoursContent as hy_opening_hours_content };
-
-//# sourceMappingURL=hy-opening-hours_2.entry.js.map