@itcenteratunihelsinki/huds-lib 0.5.46 → 0.6.0
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.
- package/dist/cjs/color-box_8.cjs.entry.js +1 -1
- package/dist/cjs/huds-lib.cjs.js +1 -1
- package/dist/cjs/{hy-accordion-container_91.cjs.entry.js → hy-accordion-container_89.cjs.entry.js} +3 -492
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{utils-eeb7b089.js → utils-00f72b1e.js} +0 -2
- package/dist/collection/collection-manifest.json +0 -4
- package/dist/collection/components/hy-main/hy-main.css +3 -2
- package/dist/collection/components/navigation/menu/menu.js +1 -1
- package/dist/collection/components/navigation/menu-item/menu-item.js +1 -17
- package/dist/collection/components/navigation/menu-level-container/menu-level-container.css +0 -236
- package/dist/collection/components/navigation/menu-level-container/menu-level-container.js +1 -48
- package/dist/collection/components/site-header/site-header.js +1 -1
- package/dist/collection/utils/utils.js +0 -2
- package/dist/esm/color-box_8.entry.js +1 -1
- package/dist/esm/huds-lib.js +1 -1
- package/dist/esm/{hy-accordion-container_91.entry.js → hy-accordion-container_89.entry.js} +4 -491
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{utils-966ffdb5.js → utils-159098a4.js} +0 -2
- package/dist/huds-lib/huds-lib.esm.js +1 -1
- package/dist/huds-lib/{p-77f7df4b.entry.js → p-152d3e8d.entry.js} +54 -54
- package/dist/huds-lib/{p-d3ced29c.entry.js → p-2efc8ca0.entry.js} +1 -1
- package/dist/huds-lib/{p-cd2316f0.js → p-d9dc337b.js} +1 -1
- package/dist/types/components.d.ts +0 -200
- package/dist/types/utils/utils.d.ts +0 -2
- package/package.json +1 -1
- package/dist/collection/components/navigation/menu-item-sidebar/menu-item-sidebar.css +0 -399
- package/dist/collection/components/navigation/menu-item-sidebar/menu-item-sidebar.js +0 -580
- package/dist/collection/components/navigation/menu-sidebar/menu-sidebar.css +0 -337
- package/dist/collection/components/navigation/menu-sidebar/menu-sidebar.js +0 -677
- package/dist/types/components/navigation/menu-item-sidebar/menu-item-sidebar.d.ts +0 -34
- package/dist/types/components/navigation/menu-sidebar/menu-sidebar.d.ts +0 -90
package/dist/cjs/{hy-accordion-container_91.cjs.entry.js → hy-accordion-container_89.cjs.entry.js}
RENAMED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-dfc917d9.js');
|
|
6
|
-
const utils = require('./utils-
|
|
6
|
+
const utils = require('./utils-00f72b1e.js');
|
|
7
7
|
const globalScript = require('./globalScript-6b592153.js');
|
|
8
8
|
|
|
9
9
|
const accordionContainerCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#f9a21a;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-accordion-container{width:100%}";
|
|
@@ -5474,7 +5474,7 @@ let HyLogoGridItem = class {
|
|
|
5474
5474
|
};
|
|
5475
5475
|
HyLogoGridItem.style = hyLogoGridCss;
|
|
5476
5476
|
|
|
5477
|
-
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:#f9a21a;--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
|
|
5477
|
+
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:#f9a21a;--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}}";
|
|
5478
5478
|
|
|
5479
5479
|
let HyMain = class {
|
|
5480
5480
|
constructor(hostRef) {
|
|
@@ -5738,176 +5738,12 @@ let MenuItem = class {
|
|
|
5738
5738
|
'is-external': this.isExternal,
|
|
5739
5739
|
first: this.depth == 1,
|
|
5740
5740
|
} }, this.depth !== 1 && !this.isHeading && index.h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }), index.h("span", { class: 'hy-menu-item__label' }, this.label, this.isExternal && index.h("hy-icon", { icon: 'hy-icon-arrow-right', size: 12 }))), this.hasChildren && (index.h("button", { "aria-haspopup": 'true', "aria-label": `Open submenu for ${this.label}`, onClick: () => this.handleClick(), class: 'hy-menu-item__button' }, index.h("hy-icon", { icon: 'hy-icon-caret-right', size: 16 }))), this.hasChildren && index.h("slot", null)));
|
|
5741
|
-
case utils.MenuType.sidenav:
|
|
5742
|
-
let classAttributes = [
|
|
5743
|
-
'hy-menu-item--sidenav',
|
|
5744
|
-
this.isDemo ? 'is-demo' : '',
|
|
5745
|
-
this.isActive ? 'is-active' : '',
|
|
5746
|
-
this.isParent ? 'is-parent' : '',
|
|
5747
|
-
this.isActiveChild ? 'is-active--child' : '',
|
|
5748
|
-
this.inActiveTrail ? 'in-active-trail' : '',
|
|
5749
|
-
this.depth != null ? 'hy-menu-item--level-' + this.depth : '',
|
|
5750
|
-
this.isActive && this.hasChildren ? 'is-active--heading' : '',
|
|
5751
|
-
];
|
|
5752
|
-
let anchorClassAttributes = [...classAttributes, this.isHeading ? 'is-heading' : ''];
|
|
5753
|
-
classAttributes = [...classAttributes, 'hy-menu-item'];
|
|
5754
|
-
return (index.h("li", { class: classAttributes.join(' ') }, index.h("a", { class: anchorClassAttributes.join(' '), href: this.url }, this.label), this.hasChildren && index.h("slot", null)));
|
|
5755
5741
|
}
|
|
5756
5742
|
}
|
|
5757
5743
|
get el() { return index.getElement(this); }
|
|
5758
5744
|
};
|
|
5759
5745
|
MenuItem.style = menuItemCss;
|
|
5760
5746
|
|
|
5761
|
-
const menuItemSidebarCss = ":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:#f9a21a;--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-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level) .hy-menu-item-sidebar__label,.hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level) .hy-menu-item__label__icon,.hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level) .hy-menu-item-sidebar__label,.hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level) .hy-menu-item__label__icon{background:-webkit-gradient(linear, right top, left top, from(#f5f5f5), to(#f8f8f8));background:linear-gradient(270deg, #f5f5f5 0%, #f8f8f8 100%)}.hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar.is-parent .hy-menu-item-sidebar__label,.hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar.is-parent .hy-menu-item-sidebar__label{background-color:none !important}.hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item-sidebar__label:hover,.hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item-sidebar__label:hover{background:var(--hover-gray) !important;text-decoration:underline}.hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon:not([aria-expanded=true]):hover,.hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon:not([aria-expanded=true]):hover{background:var(--hover-gray) !important;cursor:pointer}.hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon:not([aria-expanded=true]):hover svg,.hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon:not([aria-expanded=true]):hover svg{width:22px;height:22px}.hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon[aria-expanded=true]:hover,.hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon[aria-expanded=true]:hover{background:var(--brand-main);cursor:pointer;-webkit-transition:all 0.25s ease;transition:all 0.25s ease}.hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon[aria-expanded=true]:hover .hy-menu-item__label__icon__svg,.hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon[aria-expanded=true]:hover .hy-menu-item__label__icon__svg{-webkit-transform:rotate(180deg) translateX(2px);transform:rotate(180deg) translateX(2px)}.hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon[aria-expanded=true]:hover svg,.hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon[aria-expanded=true]:hover svg{width:22px;height:22px}.hy-menu-sidebar--container:not(.sidebar-open) .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item-sidebar__label:hover{border:1px solid var(--brand-main);margin:-1px;text-decoration:underline}.hy-menu-sidebar--container:not(.sidebar-open) .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon:hover{border:1px solid var(--brand-main);margin:-1px;margin-left:7px;text-decoration:underline;cursor:pointer}.hy-menu-sidebar--container:not(.sidebar-open) .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon:hover svg{width:22px;height:22px}.hy-menu-item-sidebar{list-style-type:none;margin-bottom:6px;}.hy-menu-item-sidebar--label-container{font-size:0.875rem;line-height:20px;font-weight:600;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brand-main-light);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;min-height:48px;padding:0;word-break:break-word}@media (min-width: 1601px){.hy-menu-item-sidebar--label-container{font-size:1rem;line-height:22px}}.hy-menu-item-sidebar:focus{outline-offset:4px}.hy-menu-item-sidebar>.hy-menu-level-container.hy-menu-level-container--sidepanel{display:none}.hy-menu-item-sidebar.hy-menu-item-sidebar--sidepanel.in-active-trail>.hy-menu-item-sidebar--label-container{border:1px solid var(--brand-main-light);text-decoration:none}.hy-menu-item-sidebar.hy-menu-item-sidebar--sidepanel.in-active-trail>.hy-menu-item-sidebar--label-container>.hy-menu-item__label__icon{background-color:var(--brand-main-light);border:none}.hy-menu-item-sidebar.hy-menu-item-sidebar--sidepanel.in-active-trail>.hy-menu-item-sidebar--label-container>.hy-menu-item__label__icon svg{fill:var(--grayscale-white)}.hy-menu-item-sidebar.hy-menu-item-sidebar--sidepanel.in-active-trail>.hy-menu-level-container--sidepanel{display:-webkit-box;display:-ms-flexbox;display:flex}.hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level).is-active-item>.hy-menu-item-sidebar--label-container{background:var(--grayscale-white) !important;text-decoration:none}.hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level).is-active-item>.hy-menu-item-sidebar--label-container>a.hy-menu-item-sidebar__label{border:1px solid var(--brand-main-light);border-right:0}.hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level).is-active-item>.hy-menu-item-sidebar--label-container>.hy-menu-item__label__icon{background:var(--brand-main-light);border:none;margin-left:4px}.hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level).is-active-item>.hy-menu-item-sidebar--label-container>.hy-menu-item__label__icon svg{fill:var(--grayscale-white)}.hy-menu-item-sidebar__label{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);color:var(--brand-main-light);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;padding:8px 10px 8px 20px;text-decoration:none;width:100%;word-break:break-word}.hy-menu-item-sidebar__label:focus{outline:none;-webkit-box-shadow:0 0 1px 1px rgba(55, 148, 224, 0.5);box-shadow:0 0 1px 1px rgba(55, 148, 224, 0.5);border-radius:none}.hy-menu-item-sidebar .hy-menu-item__label__icon{border-top:0;border-right:0;border-bottom:0;background:var(--grayscale-white);border-left:1px solid var(--brand-main-light);color:var(--brand-main-light);display:inline-block;position:relative;width:61.5px;margin-left:6px;min-height:48px}.hy-menu-item-sidebar .hy-menu-item__label__icon svg{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.hy-menu-item-sidebar .hy-menu-item__label__icon:focus{outline:none;-webkit-box-shadow:0 0 1px 1px rgba(55, 148, 224, 0.5);box-shadow:0 0 1px 1px rgba(55, 148, 224, 0.5);border-radius:none}.hy-menu-item-sidebar.is-parent{-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-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin-bottom:10px;max-width:280px;padding-bottom:10px;width:calc(100% - 25px)}.hy-menu-item-sidebar.is-parent .hy-menu-item-sidebar--label-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:none;color:var(--brand-main-light);display:-webkit-box;display:-ms-flexbox;display:flex}.hy-menu-item-sidebar.is-parent .hy-menu-item-sidebar--label-container .hy-menu-item-sidebar__label{font-size:1.625rem;line-height:26px;background-color:transparent !important;font-family:var(--main-font-family);font-weight:bold;letter-spacing:-0.81px;padding:0;text-decoration:none;text-transform:uppercase}.hy-menu-item-sidebar.is-parent:hover span{background:none;border:none;margin:0}.hy-menu-item-sidebar.is-parent:hover a{border:none;color:var(--brand-main) !important;text-decoration:underline;margin:0}.hy-menu-item-sidebar.is-parent:hover .hy-menu-item__parent__icon__svg{fill:var(--brand-main-nearly-black)}.hy-menu-item-sidebar.is-parent .hy-menu-item__parent__icon{-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-direction:row;flex-direction:row;height:26px}.hy-menu-item-sidebar.is-parent .hy-menu-item__parent__icon__svg svg{fill:var(--brand-main-light)}.hy-menu-item-sidebar.is-parent.is-parent--sub-level{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;background:none;border-bottom:1px solid var(--brand-main-light);display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:12px;padding-bottom:18px;position:absolute;-webkit-transform:translateY(calc(-100% - 12px));transform:translateY(calc(-100% - 12px));width:calc(100% - 25px)}.hy-menu-item-sidebar.is-parent.is-parent--sub-level .hy-menu-item-parent__icon{bottom:20px;left:-20px;position:absolute}.hy-menu-item-sidebar.is-parent.is-parent--sub-level *{text-transform:uppercase}.hy-menu-item-sidebar.is-parent.is-parent--sub-level svg{fill:var(--brand-main-light)}.hy-menu-item-sidebar.is-parent.is-parent--sub-level .hy-menu-item-sidebar__label:hover{background:none !important;text-decoration:underline}.hy-menu-item-sidebar.is-parent.is-parent--sub-level>.hy-menu-item-sidebar--label-container{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;margin:0 0 0 0.5rem;padding:0}.hy-menu-item-sidebar.is-current-page span.hy-menu-item-sidebar__label{border-left:4px solid var(--grayscale-black);color:var(--grayscale-black);padding:8px 10px 8px 6px !important}.hy-menu-item-sidebar.is-current-page.is-parent .hy-menu-item__parent__icon{display:none}";
|
|
5762
|
-
|
|
5763
|
-
let MenuItemSidebar = class {
|
|
5764
|
-
constructor(hostRef) {
|
|
5765
|
-
index.registerInstance(this, hostRef);
|
|
5766
|
-
this.addBreadcrumb = index.createEvent(this, "addBreadcrumb", 7);
|
|
5767
|
-
this.menuContainerActiveTrail = index.createEvent(this, "menuContainerActiveTrail", 7);
|
|
5768
|
-
this.menuContainerToggled = index.createEvent(this, "menuContainerToggled", 7);
|
|
5769
|
-
this.routeClicked = index.createEvent(this, "routeClicked", 7);
|
|
5770
|
-
this.inActiveTrail = false;
|
|
5771
|
-
this.isActive = false;
|
|
5772
|
-
this.isActiveChild = false;
|
|
5773
|
-
this.isHeading = false;
|
|
5774
|
-
this.isParent = false;
|
|
5775
|
-
this.isDemo = false;
|
|
5776
|
-
this.menuItemAlternative = false;
|
|
5777
|
-
this.menuLinkId = '';
|
|
5778
|
-
this.menuType = utils.MenuType.sidenav;
|
|
5779
|
-
this.pageSize = utils.MenuType.mobile;
|
|
5780
|
-
this.menuButtonSubmenuExpand = '';
|
|
5781
|
-
this.menuIsOpen = false;
|
|
5782
|
-
this.ariaExpanded = false;
|
|
5783
|
-
this.depth = 0;
|
|
5784
|
-
this.hasChildren = null;
|
|
5785
|
-
this.label = '';
|
|
5786
|
-
this.parentAsHeading = '';
|
|
5787
|
-
this.parentExpanded = false;
|
|
5788
|
-
this.url = '';
|
|
5789
|
-
}
|
|
5790
|
-
sidebarTopLevelToggle(e) {
|
|
5791
|
-
if (this.depth !== 0) {
|
|
5792
|
-
return;
|
|
5793
|
-
}
|
|
5794
|
-
const body = document.querySelector('body');
|
|
5795
|
-
const container = document.querySelector('.hy-menu-sidebar--container');
|
|
5796
|
-
const menuItem = e.target.closest('.hy-menu-item-sidebar');
|
|
5797
|
-
if (container.classList.contains('sidebar-open') && menuItem.classList.contains('is-active-item')) {
|
|
5798
|
-
container.classList.remove('sidebar-open');
|
|
5799
|
-
body.classList.remove('hy-menu-sidebar__no-scroll');
|
|
5800
|
-
}
|
|
5801
|
-
else {
|
|
5802
|
-
container.classList.add('sidebar-open');
|
|
5803
|
-
body.classList.add('hy-menu-sidebar__no-scroll');
|
|
5804
|
-
}
|
|
5805
|
-
e.preventDefault();
|
|
5806
|
-
}
|
|
5807
|
-
async componentWillLoad() {
|
|
5808
|
-
this.ro = new ResizeObserver$1((entries) => {
|
|
5809
|
-
for (const entry of entries) {
|
|
5810
|
-
this.applySize(entry.contentRect.width);
|
|
5811
|
-
}
|
|
5812
|
-
});
|
|
5813
|
-
this.ro.observe(document.body);
|
|
5814
|
-
// If is-active class is added by system, add it to menu component as well.
|
|
5815
|
-
if (this.el.classList.contains('is-active')) {
|
|
5816
|
-
this.isActive = true;
|
|
5817
|
-
}
|
|
5818
|
-
// If current menu item is active, trigger all parent menuLevelContainer
|
|
5819
|
-
// elements in the same active-trail to open the menu.
|
|
5820
|
-
if (this.isActive) {
|
|
5821
|
-
const getParents = (elem) => {
|
|
5822
|
-
let parents = [];
|
|
5823
|
-
while (elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'hy-menu-sidebar') {
|
|
5824
|
-
elem = elem.parentNode;
|
|
5825
|
-
parents.push(elem);
|
|
5826
|
-
}
|
|
5827
|
-
return parents;
|
|
5828
|
-
};
|
|
5829
|
-
const parents = getParents(this.el);
|
|
5830
|
-
for (let i = 0; i < parents.length; i++) {
|
|
5831
|
-
const element = parents[i];
|
|
5832
|
-
if (element.tagName.toLowerCase() === 'hy-menu-item-sidebar') {
|
|
5833
|
-
element.classList.add('is-hidden--child');
|
|
5834
|
-
this.menuContainerActiveTrail.emit({
|
|
5835
|
-
triggerItem: element.getAttribute('menu-link-id'),
|
|
5836
|
-
});
|
|
5837
|
-
}
|
|
5838
|
-
}
|
|
5839
|
-
// If current active menu item have children, set the child
|
|
5840
|
-
// menu-level-container open.
|
|
5841
|
-
if (this.el.children.length > 0) {
|
|
5842
|
-
this.el.children[0].setAttribute('class', 'is-open-on-top');
|
|
5843
|
-
}
|
|
5844
|
-
}
|
|
5845
|
-
if (this.inActiveTrail) {
|
|
5846
|
-
const currentParent = this.el.parentNode;
|
|
5847
|
-
if (this.menuType === utils.MenuType.sidepanel) {
|
|
5848
|
-
currentParent.classList.add('is-open');
|
|
5849
|
-
const childList = this.el.querySelector('.hy-menu-level-container');
|
|
5850
|
-
if (childList) {
|
|
5851
|
-
childList.classList.add('is-open');
|
|
5852
|
-
}
|
|
5853
|
-
}
|
|
5854
|
-
}
|
|
5855
|
-
// Assign depth value to current menu item instance; 1st level, 2nd level, etc.
|
|
5856
|
-
this.hasChildren = this.el.getElementsByTagName('hy-menu-level-container').length >= 1;
|
|
5857
|
-
if (this.menuType === utils.MenuType.sidenav) {
|
|
5858
|
-
let parentMenuItem = this.el.closest('hy-menu-item-sidebar');
|
|
5859
|
-
let nextParentMenuItem;
|
|
5860
|
-
if (parentMenuItem) {
|
|
5861
|
-
nextParentMenuItem = parentMenuItem.parentElement.closest('hy-menu-item-sidebar');
|
|
5862
|
-
if (nextParentMenuItem === parentMenuItem) {
|
|
5863
|
-
return;
|
|
5864
|
-
}
|
|
5865
|
-
else {
|
|
5866
|
-
if (nextParentMenuItem !== null) {
|
|
5867
|
-
this.parentAsHeading = nextParentMenuItem;
|
|
5868
|
-
}
|
|
5869
|
-
}
|
|
5870
|
-
}
|
|
5871
|
-
}
|
|
5872
|
-
}
|
|
5873
|
-
applySize(size) {
|
|
5874
|
-
// Set the menu-type based on the width of the browser.
|
|
5875
|
-
if (size <= 960) {
|
|
5876
|
-
this.pageSize = utils.MenuType.mobile;
|
|
5877
|
-
}
|
|
5878
|
-
else {
|
|
5879
|
-
this.pageSize = utils.MenuType.desktop;
|
|
5880
|
-
}
|
|
5881
|
-
}
|
|
5882
|
-
componentWillRender() {
|
|
5883
|
-
if (this.pageSize === utils.MenuType.mobile)
|
|
5884
|
-
return;
|
|
5885
|
-
}
|
|
5886
|
-
render() {
|
|
5887
|
-
let classAttributes = [
|
|
5888
|
-
'hy-menu-item-sidebar',
|
|
5889
|
-
this.menuType ? `hy-menu-item-sidebar--${this.menuType}` : '',
|
|
5890
|
-
this.depth != null ? 'hy-menu-item--level-' + this.depth : '',
|
|
5891
|
-
this.isDemo ? 'is-demo' : '',
|
|
5892
|
-
this.isActive ? 'is-current-page' : '',
|
|
5893
|
-
this.isParent ? 'is-parent' : '',
|
|
5894
|
-
this.hasChildren ? 'has-children' : '',
|
|
5895
|
-
this.inActiveTrail ? 'is-active-item' : '',
|
|
5896
|
-
this.isActive && this.hasChildren ? 'is-active--heading' : '',
|
|
5897
|
-
];
|
|
5898
|
-
let anchorClassAttributes = ['hy-menu-item-sidebar__label'];
|
|
5899
|
-
classAttributes = [...classAttributes];
|
|
5900
|
-
if (this.url) {
|
|
5901
|
-
return (index.h("li", { "data-link-id": `menu-link-sidebar-${this.menuLinkId}`, class: classAttributes.join(' '), "aria-current": this.isActive ? 'true' : 'false', "item-level": this.depth }, this.isParent && (index.h("span", { class: 'hy-menu-item__parent__icon' }, index.h("hy-icon", { class: 'hy-menu-item__parent__icon__svg', icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }))), index.h("div", { class: "hy-menu-item-sidebar--label-container" }, this.isActive ? (index.h("span", { class: anchorClassAttributes.join(' ') }, this.label)) : (index.h("a", { class: anchorClassAttributes.join(' '), href: this.url }, this.label)), this.hasChildren && (index.h("button", { "aria-labelledby": this.label, "aria-expanded": this.inActiveTrail && !this.isActive ? 'true' : 'false', type: "button", class: 'hy-menu-item__label__icon', onClick: (e) => this.sidebarTopLevelToggle(e) }, index.h("hy-icon", { class: 'hy-menu-item__label__icon__svg', icon: 'hy-icon-caret-right', fill: 'currentColor', size: 18 })))), this.hasChildren && index.h("slot", null)));
|
|
5902
|
-
}
|
|
5903
|
-
else {
|
|
5904
|
-
return;
|
|
5905
|
-
}
|
|
5906
|
-
}
|
|
5907
|
-
get el() { return index.getElement(this); }
|
|
5908
|
-
};
|
|
5909
|
-
MenuItemSidebar.style = menuItemSidebarCss;
|
|
5910
|
-
|
|
5911
5747
|
const menuLanguageCss = ":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:#f9a21a;--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}.menu-language{position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}.menu-language__toggle{font-size:1rem;line-height:16px;font-weight:700;color:var(--grayscale-black);-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:0;display:inline-grid;font-family:var(--main-font-family);gap:4px;grid-template-columns:repeat(2, auto);letter-spacing:-0.7px;margin:0;padding:14px 10px;text-transform:uppercase;height:100%}@media (min-width: 75.0625rem){.menu-language__toggle{font-size:0.75rem;line-height:24px;font-weight:400;color:var(--brand-main-nearly-black);letter-spacing:-0.5px;grid-template-columns:repeat(3, auto);padding:0}}@media (min-width: 1601px){.menu-language__toggle{font-size:0.875rem;line-height:24px}}.menu-language__toggle:hover{color:var(--brand-main);cursor:pointer}.menu-language__toggle:hover svg{fill:var(--brand-main)}.menu-language__toggle:focus{outline:solid 2px var(--additional-yellow);outline-offset:2px}.menu-language__toggle hy-icon:first-of-type{display:none !important}@media (min-width: 75.0625rem){.menu-language__toggle hy-icon:first-of-type{display:-webkit-inline-box !important;display:-ms-inline-flexbox !important;display:inline-flex !important}}.menu-language__toggle[aria-expanded=true]{position:relative}.menu-language__toggle[aria-expanded=true]:after{content:\"\";position:absolute;height:4px;right:0;bottom:-1px;left:0;background-color:var(--grayscale-black)}.menu-language__toggle[aria-expanded=true] span+hy-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.is-group .menu-language__toggle{color:var(--grayscale-white)}.is-group .menu-language__toggle:hover{color:var(--grayscale-medium);cursor:pointer}.is-group .menu-language__toggle:hover svg{fill:var(--grayscale-medium)}.menu-language__dropdown{background-color:var(--grayscale-white);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);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;right:-15px;margin:0;padding:8px;position:absolute;text-transform:uppercase;visibility:visible;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:100;min-width:160px}.menu-language__dropdown[aria-hidden=true]{display:none}@media (min-width: 75.0625rem){.menu-language__dropdown{left:-15px;right:0}}.menu-language__links{margin:0;padding:0;list-style:none;display:grid;gap:4px}";
|
|
5912
5748
|
|
|
5913
5749
|
let MenuLanguage = class {
|
|
@@ -6009,7 +5845,7 @@ let SiteLanguage = class {
|
|
|
6009
5845
|
};
|
|
6010
5846
|
SiteLanguage.style = menuLanguageItemCss;
|
|
6011
5847
|
|
|
6012
|
-
const menuLevelContainerCss = ":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:#f9a21a;--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-menu-level-container--mobile{background-color:var(--grayscale-white);display:block;height:0;left:0;position:absolute;top:0;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:visibility 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:visibility 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;transition:transform 0.3s ease-in-out, visibility 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;visibility:hidden !important;width:100%}.hy-menu-level-container--mobile.is-open{height:auto;-webkit-transform:translateX(0);transform:translateX(0);visibility:visible !important;padding-bottom:96px}.hy-menu-level-container--mobile.hy-menu-level-container--level-0{padding-top:8px;position:relative}.hy-menu-level-container--mobile.hy-menu-level-container--level-0:before{background-color:var(--brand-main-light);content:\"\";display:block;height:3px;left:0;position:absolute;right:0;top:0}.hy-menu-level-container--mobile:focus{outline:0}.hy-menu-level-container--desktop{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;width:100%}.hy-menu-level-container--desktop.is-open{display:block;visibility:visible}.hy-menu-level-container--desktop:not(.hy-menu-level-container--level-0):not(.hy-menu-level-container--level-2){display:none}.hy-menu-level-container--desktop.hy-menu-level-container--level-2{background-color:var(--grayscale-background-box)}
|
|
5848
|
+
const menuLevelContainerCss = ":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:#f9a21a;--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-menu-level-container--mobile{background-color:var(--grayscale-white);display:block;height:0;left:0;position:absolute;top:0;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:visibility 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:visibility 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;transition:transform 0.3s ease-in-out, visibility 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;visibility:hidden !important;width:100%}.hy-menu-level-container--mobile.is-open{height:auto;-webkit-transform:translateX(0);transform:translateX(0);visibility:visible !important;padding-bottom:96px}.hy-menu-level-container--mobile.hy-menu-level-container--level-0{padding-top:8px;position:relative}.hy-menu-level-container--mobile.hy-menu-level-container--level-0:before{background-color:var(--brand-main-light);content:\"\";display:block;height:3px;left:0;position:absolute;right:0;top:0}.hy-menu-level-container--mobile:focus{outline:0}.hy-menu-level-container--desktop{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;width:100%}.hy-menu-level-container--desktop.is-open{display:block;visibility:visible}.hy-menu-level-container--desktop:not(.hy-menu-level-container--level-0):not(.hy-menu-level-container--level-2){display:none}.hy-menu-level-container--desktop.hy-menu-level-container--level-2{background-color:var(--grayscale-background-box)}";
|
|
6013
5849
|
|
|
6014
5850
|
let MenuLevelContainer = class {
|
|
6015
5851
|
constructor(hostRef) {
|
|
@@ -6081,18 +5917,6 @@ let MenuLevelContainer = class {
|
|
|
6081
5917
|
this.triggerItem = 'home';
|
|
6082
5918
|
}
|
|
6083
5919
|
}
|
|
6084
|
-
// Set is-active-child and menu-level attributes to all sibling menu-items.
|
|
6085
|
-
if (this.menuType === utils.MenuType.sidenav) {
|
|
6086
|
-
const parentMenuItem = this.el.closest('hy-menu-item-sidebar');
|
|
6087
|
-
if (parentMenuItem && parentMenuItem.classList.contains('is-active')) {
|
|
6088
|
-
this.menuIsOpen = true;
|
|
6089
|
-
const items = Array.from(this.el.children);
|
|
6090
|
-
items.forEach((item) => {
|
|
6091
|
-
item.setAttribute('is-active-child', 'true');
|
|
6092
|
-
item.setAttribute('menu-level', this.menuLevel.toString());
|
|
6093
|
-
});
|
|
6094
|
-
}
|
|
6095
|
-
}
|
|
6096
5920
|
}
|
|
6097
5921
|
render() {
|
|
6098
5922
|
let classAttributes = ['hy-menu-level-container', 'hy-menu-level-container--level-' + this.depth];
|
|
@@ -6110,28 +5934,6 @@ let MenuLevelContainer = class {
|
|
|
6110
5934
|
classAttributes = [...classAttributes, this.menuIsOpen ? 'is-open' : null];
|
|
6111
5935
|
return (index.h(index.Host, { "aria-expanded": this.menuIsOpen.toString(), class: classAttributes.join(' '), tabindex: '-1' }, index.h("hy-menu-item", { label: this.headingItem.label, url: this.headingItem.url, isHeading: true, isActive: this.headingItem.isActive, "menu-type": 'mobile', depth: this.menuLevel }), index.h("slot", null), index.h("slot", { name: "shortcuts" })));
|
|
6112
5936
|
}
|
|
6113
|
-
case utils.MenuType.sidenav:
|
|
6114
|
-
if (this.depth === 0) {
|
|
6115
|
-
const shouldBeHidden = this.depth != null && this.depth === 0 ? 'is-open' : '';
|
|
6116
|
-
classAttributes = [...classAttributes, 'hy-menu-level-container--sidenav', shouldBeHidden];
|
|
6117
|
-
return (index.h("ul", { "data-menu-level": this.menuLevel, "data-depth": this.menuLevel, class: classAttributes.join(' ') }, index.h("slot", null)));
|
|
6118
|
-
}
|
|
6119
|
-
else {
|
|
6120
|
-
const isMenuOpen = this.menuIsOpen ? 'is-open_is-open__sub-level' : null;
|
|
6121
|
-
const shouldBeHidden = this.depth != null && this.depth === 0 ? 'is-open' : '';
|
|
6122
|
-
const parentMenuItem = this.el.closest('hy-menu-item-sidebar');
|
|
6123
|
-
const parentClone = parentMenuItem !== null ? parentMenuItem.cloneNode(true) : null;
|
|
6124
|
-
const parentLink = parentClone ? parentClone.querySelector('.hy-menu-item-sidebar__label') : null;
|
|
6125
|
-
classAttributes = [...classAttributes, 'hy-menu-level-container--sidenav', shouldBeHidden, isMenuOpen];
|
|
6126
|
-
return (index.h("ul", { "data-menu-level": this.menuLevel, "data-depth": this.menuLevel, class: classAttributes.join(' ') }, parentLink && (index.h("li", { class: "hy-menu-item-sidebar is-parent is-parent--sub-level" }, index.h("hy-icon", { class: 'hy-menu-item-parent__icon', icon: 'hy-icon-dot-arrow-right', fill: 'currentColor', size: 20 }), index.h("span", { "aria-level": this.depth, role: "heading", class: "hy-menu-item-sidebar--label-container", innerHTML: parentLink.outerHTML }))), index.h("slot", null)));
|
|
6127
|
-
}
|
|
6128
|
-
case utils.MenuType.sidepanel:
|
|
6129
|
-
//const shouldBeHidden = (this.depth != null && this.depth === 1) ? 'is-open' : '';
|
|
6130
|
-
classAttributes = [...classAttributes, 'hy-menu-level-container--sidepanel'];
|
|
6131
|
-
const parentMenuItem = this.el.closest('hy-menu-item-sidebar');
|
|
6132
|
-
const parentClone = parentMenuItem ? parentMenuItem.cloneNode(true) : null;
|
|
6133
|
-
const parentLink = parentClone ? parentClone.querySelector('.hy-menu-item-sidebar__label') : null;
|
|
6134
|
-
return (index.h("ul", { "data-menu-level": this.depth, "data-depth": this.menuLevel, class: classAttributes.join(' ') }, parentLink ? (index.h("li", { class: "hy-menu-item-sidebar is-parent is-parent--sub-level" }, index.h("hy-icon", { class: 'hy-menu-item-parent__icon', icon: 'hy-icon-dot-arrow-right', fill: 'currentColor', size: 20 }), index.h("span", { "aria-level": this.depth, role: "heading", class: "hy-menu-item-sidebar--label-container", innerHTML: parentLink.outerHTML }))) : (index.h("li", { class: "hy-menu-item-sidebar is-parent is-parent--sub-level is-parent--frontpage" }, index.h("span", { class: 'hy-menu-item__parent__icon' }, index.h("hy-icon", { class: 'hy-menu-item__parent__icon__svg', icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 })), index.h("div", { class: "hy-menu-item-sidebar--label-container" }, index.h("a", { class: "hy-menu-item-sidebar__label", href: this.frontUrl }, this.frontLabel)))), index.h("slot", null)));
|
|
6135
5937
|
}
|
|
6136
5938
|
}
|
|
6137
5939
|
get el() { return index.getElement(this); }
|
|
@@ -6298,295 +6100,6 @@ let MenuMobileBreadcrumb = class {
|
|
|
6298
6100
|
};
|
|
6299
6101
|
MenuMobileBreadcrumb.style = menuMobileBreadcrumbCss;
|
|
6300
6102
|
|
|
6301
|
-
const menuSidebarCss = ":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:#f9a21a;--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-menu-sidebar--container{background:none;position:relative}.hy-menu-sidebar--container.sidebar-open{background:linear-gradient(to right, #fff 380px, rgba(0, 0, 0, 0.5) 10%);bottom:0;display:block;height:auto;left:16px;overflow:auto;position:absolute;right:0;top:-96px;-webkit-transition:all 0.25s ease-in;transition:all 0.25s ease-in;z-index:15}.hy-menu-sidebar--container.sidebar-open .hy-menu-sidebar__logo{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:96px;margin-bottom:40px;margin-top:-8px}.hy-menu-sidebar--container.sidebar-open .hy-menu-sidebar__logo .hy-site-logo__label{max-width:200px}.hy-menu-sidebar--container.sidebar-open .hy-menu-sidebar__panel-toggle{display:-webkit-box;display:-ms-flexbox;display:flex}.hy-menu-sidebar--container .hy-menu-sidebar__panel-toggle,.hy-menu-sidebar--container .hy-menu-sidebar__logo{display:none}.hy-menu-sidepanel--container{-webkit-animation-direction:normal;animation-direction:normal;-webkit-animation-duration:0.25s;animation-duration:0.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:sidepanel-moveout;animation-name:sidepanel-moveout;bottom:0;display:none;left:0;overflow:auto;position:absolute;right:0;top:-96px;-webkit-transform:translateX(-105%);transform:translateX(-105%);visibility:hidden;z-index:124}.hy-menu-sidepanel--container.sidepanel-open{-webkit-animation-direction:normal;animation-direction:normal;-webkit-animation-duration:0.35s;animation-duration:0.35s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:sidepanel-movein;animation-name:sidepanel-movein;display:-webkit-box;display:-ms-flexbox;display:flex;height:auto;min-height:100vh;width:100%}.hy-menu-sidepanel--container.sidepanel-open :not(.is-parent):not(.in-active-trail):not(.is-active-item).hy-menu-item-sidebar .hy-menu-item-sidebar--label-container{background:-webkit-gradient(linear, right top, left top, from(#f5f5f5), to(#f8f8f8));background:linear-gradient(270deg, #f5f5f5 0%, #f8f8f8 100%)}.hy-menu-sidepanel--container.sidepanel-open .hy-menu-sidepanel__logo{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:96px;margin-bottom:46px;margin-top:-26px;margin-left:-4px}.hy-menu-sidepanel--container.sidepanel-open .hy-menu-sidepanel__logo .hy-site-logo__label{max-width:200px}.hy-menu-sidebar{display:none}@media (min-width: 75.0625rem){.hy-menu-sidebar{display:block;max-width:calc(320px - 16px)}.hy-menu-sidebar[aria-hidden=false]{padding-right:12px;min-height:var(--minHeight);width:20vw}.hy-menu-sidebar[aria-hidden=false] .hy-menu-item-sidebar.hy-menu-item-sidebar--sidenav.hy-menu-item--level-1.is-parent{border-bottom:1px solid var(--brand-main-light) !important}}.hy-menu-sidebar__panel-toggle{font-size:0.875rem;line-height:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:none;color:var(--brand-main-light);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);font-weight:600;letter-spacing:-0.5px;margin-bottom:1rem;text-decoration:none}.hy-menu-sidebar__panel-toggle:hover{cursor:pointer;color:var(--brand-main);text-decoration:underline}.hy-menu-sidebar__panel-toggle svg{fill:var(--brand-main-light)}.hy-menu-sidebar__panel-toggle hy-icon:last-child{margin-right:0.75rem}.hy-menu-sidepanel__logo-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:150px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:20px;position:relative;z-index:125}@-webkit-keyframes sidepanel-movein{from{display:none;-webkit-transform:translateX(-105%);transform:translateX(-105%);visibility:hidden}5%{display:-webkit-box;display:flex}50%{background-color:rgba(0, 0, 0, 0)}to{background-color:rgba(0, 0, 0, 0.5);-webkit-transform:translateX(0);transform:translateX(0);visibility:visible}}@keyframes sidepanel-movein{from{display:none;-webkit-transform:translateX(-105%);transform:translateX(-105%);visibility:hidden}5%{display:-webkit-box;display:-ms-flexbox;display:flex}50%{background-color:rgba(0, 0, 0, 0)}to{background-color:rgba(0, 0, 0, 0.5);-webkit-transform:translateX(0);transform:translateX(0);visibility:visible}}@-webkit-keyframes sidepanel-moveout{from{background-color:rgba(0, 0, 0, 0.5);-webkit-transform:translateX(0);transform:translateX(0);visibility:visible}75%{background-color:rgba(0, 0, 0, 0)}90%{-webkit-transform:translateX(-105%);transform:translateX(-105%)}to{display:none;visibility:hidden}}@keyframes sidepanel-moveout{from{background-color:rgba(0, 0, 0, 0.5);-webkit-transform:translateX(0);transform:translateX(0);visibility:visible}75%{background-color:rgba(0, 0, 0, 0)}90%{-webkit-transform:translateX(-105%);transform:translateX(-105%)}to{display:none;visibility:hidden}}";
|
|
6302
|
-
|
|
6303
|
-
let sidebarClickTimeout = null;
|
|
6304
|
-
let sidepanelClickTimeout = null;
|
|
6305
|
-
let MenuSidebar = class {
|
|
6306
|
-
constructor(hostRef) {
|
|
6307
|
-
index.registerInstance(this, hostRef);
|
|
6308
|
-
/**
|
|
6309
|
-
* Is menu open boolean.
|
|
6310
|
-
*/
|
|
6311
|
-
this.menuIsOpen = false;
|
|
6312
|
-
/**
|
|
6313
|
-
* Menu type. Defaults to sidenav.
|
|
6314
|
-
*/
|
|
6315
|
-
this.menuType = utils.MenuType.sidenav;
|
|
6316
|
-
this.pageSize = utils.MenuType.mobile;
|
|
6317
|
-
/**
|
|
6318
|
-
* Upper menus panel boolean.
|
|
6319
|
-
*/
|
|
6320
|
-
this.panelOpen = false;
|
|
6321
|
-
/**
|
|
6322
|
-
* Logo size
|
|
6323
|
-
*/
|
|
6324
|
-
this.size = utils.SiteLogoSize.big;
|
|
6325
|
-
/**
|
|
6326
|
-
* Isdemo
|
|
6327
|
-
*/
|
|
6328
|
-
this.isDemo = false;
|
|
6329
|
-
/**
|
|
6330
|
-
* Should have link to front page or show full menu button
|
|
6331
|
-
*/
|
|
6332
|
-
this.noChildren = false;
|
|
6333
|
-
/**
|
|
6334
|
-
* IsResearchGroup
|
|
6335
|
-
*/
|
|
6336
|
-
this.isResearchGroup = false;
|
|
6337
|
-
/**
|
|
6338
|
-
* is Active helps to define how to render Research Group link.
|
|
6339
|
-
*/
|
|
6340
|
-
this.isActive = false;
|
|
6341
|
-
this.minHeight = null;
|
|
6342
|
-
}
|
|
6343
|
-
panelToggle(e) {
|
|
6344
|
-
if (this.menuIsOpen) {
|
|
6345
|
-
this.closeWholeTree();
|
|
6346
|
-
this.panelOpen = !this.panelOpen;
|
|
6347
|
-
}
|
|
6348
|
-
else {
|
|
6349
|
-
this.panelOpen = !this.panelOpen;
|
|
6350
|
-
}
|
|
6351
|
-
e.preventDefault();
|
|
6352
|
-
e.stopPropagation();
|
|
6353
|
-
}
|
|
6354
|
-
async componentWillLoad() {
|
|
6355
|
-
if (this.pageSize === utils.MenuType.mobile)
|
|
6356
|
-
return;
|
|
6357
|
-
const sideBar = document.querySelector('.layout-sidebar-first');
|
|
6358
|
-
if (sideBar) {
|
|
6359
|
-
if (this.menuIsOpen) {
|
|
6360
|
-
sideBar.classList.add('menu-is-open');
|
|
6361
|
-
}
|
|
6362
|
-
else if (sideBar.classList.contains('menu-is-open')) {
|
|
6363
|
-
sideBar.classList.remove('menu-is-open');
|
|
6364
|
-
}
|
|
6365
|
-
}
|
|
6366
|
-
}
|
|
6367
|
-
componentDidLoad() {
|
|
6368
|
-
this.ro = new ResizeObserver$1((entries) => {
|
|
6369
|
-
for (const entry of entries) {
|
|
6370
|
-
this.applySize(entry.contentRect.width);
|
|
6371
|
-
}
|
|
6372
|
-
});
|
|
6373
|
-
this.ro.observe(document.body);
|
|
6374
|
-
const panels = document.querySelectorAll('.hy-menu-level-container');
|
|
6375
|
-
if (panels) {
|
|
6376
|
-
const height = Math.max.apply(Math, [...panels].map((panel) => panel.scrollHeight));
|
|
6377
|
-
this.minHeight = height;
|
|
6378
|
-
}
|
|
6379
|
-
}
|
|
6380
|
-
applySize(size) {
|
|
6381
|
-
// Set the menu-type based on the width of the browser.
|
|
6382
|
-
if (size <= 960) {
|
|
6383
|
-
this.pageSize = utils.MenuType.mobile;
|
|
6384
|
-
}
|
|
6385
|
-
else {
|
|
6386
|
-
this.pageSize = utils.MenuType.desktop;
|
|
6387
|
-
}
|
|
6388
|
-
}
|
|
6389
|
-
handlePanel(e) {
|
|
6390
|
-
const target = e.target;
|
|
6391
|
-
const targetElement = target.tagName.toLowerCase();
|
|
6392
|
-
const possibleTags = [targetElement].some((r) => ['svg', 'path'].indexOf(r) >= 0);
|
|
6393
|
-
if (target.classList.contains('hy-menu-item__label__icon') || possibleTags) {
|
|
6394
|
-
const menuItem = target.closest('.hy-menu-item-sidebar');
|
|
6395
|
-
const menuItemId = menuItem.getAttribute('data-link-id');
|
|
6396
|
-
const menuItemLevel = menuItem.getAttribute('item-level');
|
|
6397
|
-
const menuPanel = menuItem.closest('.hy-menu-level-container');
|
|
6398
|
-
const childList = menuItem.querySelector('.hy-menu-level-container');
|
|
6399
|
-
const menu = target.closest('.hy-menu');
|
|
6400
|
-
if (menu.classList.contains('hy-menu-sidepanel') && !this.previousPanel) {
|
|
6401
|
-
const sameLevelItem = menuPanel.querySelector('.is-active-item');
|
|
6402
|
-
if (sameLevelItem) {
|
|
6403
|
-
const sameLevelChildList = sameLevelItem.querySelector('.hy-menu-level-container');
|
|
6404
|
-
this.updatePrevious(menuPanel, sameLevelItem);
|
|
6405
|
-
this.togglePanel(sameLevelItem, sameLevelChildList, true);
|
|
6406
|
-
this.togglePanel(menuItem, childList);
|
|
6407
|
-
return;
|
|
6408
|
-
}
|
|
6409
|
-
}
|
|
6410
|
-
// If no previous, as in first time clicking menu
|
|
6411
|
-
if (!this.previousPanel) {
|
|
6412
|
-
this.updatePrevious(menuPanel, menuItem);
|
|
6413
|
-
this.togglePanel(menuItem, childList);
|
|
6414
|
-
return;
|
|
6415
|
-
}
|
|
6416
|
-
const prevId = this.previousItem.dataset.linkId;
|
|
6417
|
-
const prevLevel = this.previousItem.getAttribute('item-level');
|
|
6418
|
-
// If clicking same menu item again.
|
|
6419
|
-
if (menuItemId === prevId) {
|
|
6420
|
-
if (menuItem.classList.contains('is-active-item')) {
|
|
6421
|
-
this.togglePanel(menuItem, childList, true);
|
|
6422
|
-
if (menuItemLevel == 0) {
|
|
6423
|
-
this.menuIsOpen = false;
|
|
6424
|
-
this.toggleSidebarBg();
|
|
6425
|
-
}
|
|
6426
|
-
}
|
|
6427
|
-
else {
|
|
6428
|
-
this.togglePanel(menuItem, childList);
|
|
6429
|
-
}
|
|
6430
|
-
return;
|
|
6431
|
-
}
|
|
6432
|
-
// If clicking menu item on same level or going back up
|
|
6433
|
-
if (menuItemLevel <= prevLevel) {
|
|
6434
|
-
// If clicking already active, close children
|
|
6435
|
-
if (menuItem.classList.contains('is-active-item')) {
|
|
6436
|
-
this.togglePanel(menuItem, childList, true);
|
|
6437
|
-
this.updatePrevious(menuPanel, menuItem);
|
|
6438
|
-
return;
|
|
6439
|
-
}
|
|
6440
|
-
// Close previous panels
|
|
6441
|
-
this.togglePanel(this.previousItem, menuPanel, true);
|
|
6442
|
-
// Open newly clicked panel
|
|
6443
|
-
this.togglePanel(menuItem, childList);
|
|
6444
|
-
// Update previous
|
|
6445
|
-
this.updatePrevious(menuPanel, menuItem);
|
|
6446
|
-
}
|
|
6447
|
-
else if (menuItemLevel > prevLevel) {
|
|
6448
|
-
this.togglePanel(menuItem, childList);
|
|
6449
|
-
this.updatePrevious(menuPanel, menuItem);
|
|
6450
|
-
}
|
|
6451
|
-
}
|
|
6452
|
-
e.stopImmediatePropagation();
|
|
6453
|
-
e.stopPropagation();
|
|
6454
|
-
}
|
|
6455
|
-
updatePrevious(panel, item) {
|
|
6456
|
-
this.previousPanel = panel;
|
|
6457
|
-
this.previousItem = item;
|
|
6458
|
-
}
|
|
6459
|
-
closeWholeTree() {
|
|
6460
|
-
const sidebarLevel1 = document.querySelector('.hy-menu-level-container--level-0');
|
|
6461
|
-
let firstItem = document.querySelector('.hy-menu-item-sidebar--sidenav.hy-menu-item--level-0.has-children.is-active-item');
|
|
6462
|
-
if (firstItem) {
|
|
6463
|
-
this.togglePanel(firstItem, sidebarLevel1, true);
|
|
6464
|
-
}
|
|
6465
|
-
else {
|
|
6466
|
-
firstItem = document.querySelector('.hy-menu-item-sidebar--sidenav.hy-menu-item--level-0.is-active-item');
|
|
6467
|
-
}
|
|
6468
|
-
const body = document.querySelector('body');
|
|
6469
|
-
const container = document.querySelector('.hy-menu-sidebar--container');
|
|
6470
|
-
if (container.classList.contains('sidebar-open') && firstItem) {
|
|
6471
|
-
container.classList.remove('sidebar-open');
|
|
6472
|
-
body.classList.remove('hy-menu-sidebar__no-scroll');
|
|
6473
|
-
}
|
|
6474
|
-
}
|
|
6475
|
-
togglePanel(menuItem, panel, shouldClose = false) {
|
|
6476
|
-
const buttonElement = menuItem.querySelector('button');
|
|
6477
|
-
const level = menuItem.getAttribute('item-level');
|
|
6478
|
-
if (level == 0 && !this.menuIsOpen) {
|
|
6479
|
-
if (window.pageYOffset > 50 && !this.isDemo) {
|
|
6480
|
-
window.scrollTo({ top: 0 });
|
|
6481
|
-
}
|
|
6482
|
-
this.menuIsOpen = true;
|
|
6483
|
-
}
|
|
6484
|
-
if (shouldClose) {
|
|
6485
|
-
const children = panel.querySelectorAll('.hy-menu-item-sidebar');
|
|
6486
|
-
const activeChild = [...children].filter((c) => c.classList.contains('is-active-item'));
|
|
6487
|
-
if (level == 0 && activeChild) {
|
|
6488
|
-
this.menuIsOpen = false;
|
|
6489
|
-
this.toggleSidebarBg();
|
|
6490
|
-
}
|
|
6491
|
-
if (activeChild.length > 0) {
|
|
6492
|
-
for (let i = 0; i < activeChild.length; i++) {
|
|
6493
|
-
const element = activeChild[i];
|
|
6494
|
-
this.closeChildren(element);
|
|
6495
|
-
}
|
|
6496
|
-
}
|
|
6497
|
-
if (buttonElement) {
|
|
6498
|
-
buttonElement.setAttribute('aria-expanded', 'false');
|
|
6499
|
-
}
|
|
6500
|
-
this.closeChildren(menuItem);
|
|
6501
|
-
return;
|
|
6502
|
-
}
|
|
6503
|
-
buttonElement.setAttribute('aria-expanded', 'true');
|
|
6504
|
-
panel.classList.add('is-open');
|
|
6505
|
-
menuItem.classList.add('is-active-item');
|
|
6506
|
-
}
|
|
6507
|
-
closeChildren(menuItem) {
|
|
6508
|
-
if (menuItem.classList.contains('is-active-item')) {
|
|
6509
|
-
menuItem.classList.remove('is-active-item');
|
|
6510
|
-
}
|
|
6511
|
-
if (menuItem.classList.contains('has-children')) {
|
|
6512
|
-
const menuButton = menuItem.querySelector('button');
|
|
6513
|
-
menuButton.setAttribute('aria-expanded', 'false');
|
|
6514
|
-
const childList = menuItem.querySelector('.hy-menu-level-container');
|
|
6515
|
-
childList.classList.remove('is-open');
|
|
6516
|
-
const childItems = childList.querySelectorAll('.hy-menu-item-sidebar');
|
|
6517
|
-
if (childList.classList.contains('is-active')) {
|
|
6518
|
-
childList.classList.remove('is-active');
|
|
6519
|
-
}
|
|
6520
|
-
childItems.forEach((element) => {
|
|
6521
|
-
element.classList.remove('is-active-item');
|
|
6522
|
-
if (element.classList.contains('has-children')) {
|
|
6523
|
-
const menuButton = element.querySelector('button');
|
|
6524
|
-
menuButton.setAttribute('aria-expanded', 'false');
|
|
6525
|
-
this.closeChildren(element);
|
|
6526
|
-
}
|
|
6527
|
-
else {
|
|
6528
|
-
return;
|
|
6529
|
-
}
|
|
6530
|
-
});
|
|
6531
|
-
}
|
|
6532
|
-
}
|
|
6533
|
-
toggleSidebarBg() {
|
|
6534
|
-
const sideBar = document.querySelector('.layout-sidebar-first');
|
|
6535
|
-
if (this.menuIsOpen) {
|
|
6536
|
-
sideBar.classList.add('menu-is-open');
|
|
6537
|
-
}
|
|
6538
|
-
else if (sideBar.classList.contains('menu-is-open')) {
|
|
6539
|
-
sideBar.classList.remove('menu-is-open');
|
|
6540
|
-
}
|
|
6541
|
-
}
|
|
6542
|
-
render() {
|
|
6543
|
-
const sidebarContainer = document.querySelector('.hy-menu-sidebar--container');
|
|
6544
|
-
if (sidebarContainer) {
|
|
6545
|
-
sidebarContainer.addEventListener('click', (e) => {
|
|
6546
|
-
clearTimeout(sidebarClickTimeout);
|
|
6547
|
-
sidebarClickTimeout = setTimeout(() => {
|
|
6548
|
-
if (e.target.classList.contains('sidebar-open')) {
|
|
6549
|
-
this.closeWholeTree();
|
|
6550
|
-
}
|
|
6551
|
-
}, 250);
|
|
6552
|
-
});
|
|
6553
|
-
}
|
|
6554
|
-
const sidepanelContainer = document.querySelector('.hy-menu-sidepanel--container');
|
|
6555
|
-
if (sidepanelContainer) {
|
|
6556
|
-
sidepanelContainer.addEventListener('click', (e) => {
|
|
6557
|
-
clearTimeout(sidepanelClickTimeout);
|
|
6558
|
-
sidepanelClickTimeout = setTimeout(() => {
|
|
6559
|
-
if (e.target.classList.contains('sidepanel-open')) {
|
|
6560
|
-
this.panelToggle(e);
|
|
6561
|
-
}
|
|
6562
|
-
}, 250);
|
|
6563
|
-
});
|
|
6564
|
-
}
|
|
6565
|
-
const logoColor = utils.ColorVariant.black;
|
|
6566
|
-
const panelClassAttributes = ['hy-menu-sidepanel--container', this.panelOpen ? 'sidepanel-open' : ''].join(' ');
|
|
6567
|
-
switch (this.menuType) {
|
|
6568
|
-
case utils.MenuType.sidepanel:
|
|
6569
|
-
return (index.h("div", { class: "hy-menu-sidebar__container", style: {
|
|
6570
|
-
'--minHeight': `${this.minHeight}px`,
|
|
6571
|
-
} }, this.noChildren && this.isResearchGroup && this.isActive && (index.h("a", { "aria-label": this.frontLabel, class: "hy-menu-sidebar__panel-toggle", href: this.frontUrl }, index.h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), this.frontLabel)), this.noChildren && this.isResearchGroup && !this.isActive && (index.h("a", { "aria-label": this.frontLabel, class: "hy-menu-sidebar__panel-toggle", href: this.frontUrl }, index.h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), index.h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), this.frontLabel)), this.noChildren && !this.isResearchGroup && (index.h("a", { "aria-label": this.frontLabel, class: "hy-menu-sidebar__panel-toggle", href: this.frontUrl }, index.h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), index.h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), this.frontLabel)), !this.noChildren && (index.h("button", { "aria-label": this.panelToggleAriaLabel, class: "hy-menu-sidebar__panel-toggle", onClick: (e) => this.panelToggle(e) }, index.h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), index.h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), this.panelToggleLabel)), index.h("div", { class: panelClassAttributes, "aria-hidden": this.panelOpen ? 'false' : 'true', "aria-expanded": this.panelOpen ? 'true' : 'false' }, index.h("div", { class: "hy-menu-sidepanel__nav-container" }, index.h("div", { class: "hy-menu-sidepanel__logo-container" }, index.h("div", { class: "hy-menu-sidepanel__logo", "aria-hidden": this.panelOpen ? 'false' : 'true', tabindex: this.panelOpen ? '0' : '-1' }, index.h("hy-site-logo", { size: 56, color: logoColor, url: this.logoUrl, label: this.logoLabel })), index.h("button", { "aria-label": this.panelToggleCloseAriaLabel, "aria-hidden": this.panelOpen ? 'false' : 'true', tabindex: this.panelOpen ? '0' : '-1', class: "hy-menu-sidebar__panel-toggle", onClick: (e) => this.panelToggle(e) }, index.h("hy-icon", { icon: 'hy-icon-remove', fill: 'currentColor', size: 10 }), this.panelToggleCloseLabel)), index.h("nav", { role: 'navigation', "aria-hidden": this.panelOpen ? 'false' : 'true', tabindex: this.panelOpen ? '0' : '-1', class: {
|
|
6572
|
-
'hy-menu': true,
|
|
6573
|
-
'hy-menu-sidepanel': true,
|
|
6574
|
-
'is-demo': this.isDemo,
|
|
6575
|
-
} }, index.h("slot", null))))));
|
|
6576
|
-
case utils.MenuType.sidenav:
|
|
6577
|
-
return (index.h("div", { class: "hy-menu-sidebar--container", style: {
|
|
6578
|
-
'--minHeight': `${this.minHeight}px`,
|
|
6579
|
-
} }, index.h("div", { class: "hy-menu-sidebar__logo" }, index.h("hy-site-logo", { size: 56, color: logoColor, url: this.logoUrl, label: this.logoLabel })), index.h("button", { "aria-label": this.panelToggleAriaLabel, class: "hy-menu-sidebar__panel-toggle", onClick: (e) => this.panelToggle(e) }, index.h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), index.h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), this.panelToggleLabel), index.h("nav", { role: 'navigation', "aria-hidden": this.menuIsOpen ? 'false' : 'true', class: {
|
|
6580
|
-
'hy-menu': true,
|
|
6581
|
-
'hy-menu-sidebar': true,
|
|
6582
|
-
'is-demo': this.isDemo,
|
|
6583
|
-
} }, index.h("slot", null))));
|
|
6584
|
-
}
|
|
6585
|
-
}
|
|
6586
|
-
get el() { return index.getElement(this); }
|
|
6587
|
-
};
|
|
6588
|
-
MenuSidebar.style = menuSidebarCss;
|
|
6589
|
-
|
|
6590
6103
|
const mobileMenuShortcutsCss = ":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:#f9a21a;--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(.hy-mobile-menu-shortcuts){margin-top:24px}:host(.hy-mobile-menu-shortcuts)>h2{font-size:1rem;line-height:20px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.32px;margin:0 15px 8px}:host(.hy-mobile-menu-shortcuts.is-hidden){visibility:hidden !important}:host(.hy-mobile-menu-shortcuts.is-hidden):focus{outline:none}.hy-mobile-menu-shortcuts__links{list-style:none;margin:0;padding:0;display:grid;gap:4px}.hy-mobile-menu-shortcuts__link{font-size:1rem;line-height:20px;font-weight:600;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);letter-spacing:-0.5px;text-decoration:none;width:100%;padding:12px 16px}.hy-mobile-menu-shortcuts__link:focus{outline:solid 2px var(--additional-yellow);outline-offset:-2px}.hy-mobile-menu-shortcuts__link:hover{text-decoration:underline}.hy-mobile-menu-shortcuts__link>hy-icon{-ms-flex-item-align:start;align-self:flex-start;margin-top:10px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.hy-mobile-menu-shortcuts__link>hy-icon+span{margin-left:10px}.hy-mobile-menu-shortcuts__link span hy-icon{display:-webkit-inline-box !important;display:-ms-inline-flexbox !important;display:inline-flex !important;margin-left:6px;margin-right:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.hy-mobile-menu-shortcuts__link span hy-icon svg{fill:var(--brand-main)}";
|
|
6591
6104
|
|
|
6592
6105
|
let HyMobileMenuShortcuts = class {
|
|
@@ -8111,13 +7624,11 @@ exports.hy_main = HyMain;
|
|
|
8111
7624
|
exports.hy_main_content_wrapper = HyMainContentWrapper;
|
|
8112
7625
|
exports.hy_menu = Menu;
|
|
8113
7626
|
exports.hy_menu_item = MenuItem;
|
|
8114
|
-
exports.hy_menu_item_sidebar = MenuItemSidebar;
|
|
8115
7627
|
exports.hy_menu_language = MenuLanguage;
|
|
8116
7628
|
exports.hy_menu_language_item = SiteLanguage;
|
|
8117
7629
|
exports.hy_menu_level_container = MenuLevelContainer;
|
|
8118
7630
|
exports.hy_menu_main_group = HyMenuMainGroup;
|
|
8119
7631
|
exports.hy_menu_mobile_breadcrumb = MenuMobileBreadcrumb;
|
|
8120
|
-
exports.hy_menu_sidebar = MenuSidebar;
|
|
8121
7632
|
exports.hy_mobile_menu_shortcuts = HyMobileMenuShortcuts;
|
|
8122
7633
|
exports.hy_opening_hours = HyOpeningHours;
|
|
8123
7634
|
exports.hy_opening_hours_content = HyOpeningHoursContent;
|