@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
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-daaf0985.js';
|
|
2
|
-
import { A as AccordionVariants, C as CtaLinkButtonVariants, B as BreadcrumbVariants, d as CheckboxVariants, e as CourseStateVariants, f as CourseVariants, g as CtaLinkVariants, h as ColorVariant, L as ListStyleVariants, F as FooterLinkItemColor, S as SiteLogoSize, i as FooterVariant, H as HeadingVarians, j as FooterLinkVariants, k as HeadingSectionVariants, l as GeneralListTypes, m as HeroTypeVariant, n as HeroGroupTypeVariant, o as HeroColorVariant, p as HeroSizeVariant, K as KeyHighlightVariants, q as LinkVariants, r as LinkBoxVariants, s as ListItemVariants, M as MenuType, P as PaginationItemVariants, t as PersonCardVariants, u as ProcessFlowBoxVariants } from './utils-
|
|
2
|
+
import { A as AccordionVariants, C as CtaLinkButtonVariants, B as BreadcrumbVariants, d as CheckboxVariants, e as CourseStateVariants, f as CourseVariants, g as CtaLinkVariants, h as ColorVariant, L as ListStyleVariants, F as FooterLinkItemColor, S as SiteLogoSize, i as FooterVariant, H as HeadingVarians, j as FooterLinkVariants, k as HeadingSectionVariants, l as GeneralListTypes, m as HeroTypeVariant, n as HeroGroupTypeVariant, o as HeroColorVariant, p as HeroSizeVariant, K as KeyHighlightVariants, q as LinkVariants, r as LinkBoxVariants, s as ListItemVariants, M as MenuType, P as PaginationItemVariants, t as PersonCardVariants, u as ProcessFlowBoxVariants } from './utils-159098a4.js';
|
|
3
3
|
import { j as jsonParserWorker } from './globalScript-9d045b36.js';
|
|
4
4
|
|
|
5
5
|
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%}";
|
|
@@ -5470,7 +5470,7 @@ let HyLogoGridItem = class {
|
|
|
5470
5470
|
};
|
|
5471
5471
|
HyLogoGridItem.style = hyLogoGridCss;
|
|
5472
5472
|
|
|
5473
|
-
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
|
|
5473
|
+
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}}";
|
|
5474
5474
|
|
|
5475
5475
|
let HyMain = class {
|
|
5476
5476
|
constructor(hostRef) {
|
|
@@ -5734,176 +5734,12 @@ let MenuItem = class {
|
|
|
5734
5734
|
'is-external': this.isExternal,
|
|
5735
5735
|
first: this.depth == 1,
|
|
5736
5736
|
} }, this.depth !== 1 && !this.isHeading && h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }), h("span", { class: 'hy-menu-item__label' }, this.label, this.isExternal && h("hy-icon", { icon: 'hy-icon-arrow-right', size: 12 }))), this.hasChildren && (h("button", { "aria-haspopup": 'true', "aria-label": `Open submenu for ${this.label}`, onClick: () => this.handleClick(), class: 'hy-menu-item__button' }, h("hy-icon", { icon: 'hy-icon-caret-right', size: 16 }))), this.hasChildren && h("slot", null)));
|
|
5737
|
-
case MenuType.sidenav:
|
|
5738
|
-
let classAttributes = [
|
|
5739
|
-
'hy-menu-item--sidenav',
|
|
5740
|
-
this.isDemo ? 'is-demo' : '',
|
|
5741
|
-
this.isActive ? 'is-active' : '',
|
|
5742
|
-
this.isParent ? 'is-parent' : '',
|
|
5743
|
-
this.isActiveChild ? 'is-active--child' : '',
|
|
5744
|
-
this.inActiveTrail ? 'in-active-trail' : '',
|
|
5745
|
-
this.depth != null ? 'hy-menu-item--level-' + this.depth : '',
|
|
5746
|
-
this.isActive && this.hasChildren ? 'is-active--heading' : '',
|
|
5747
|
-
];
|
|
5748
|
-
let anchorClassAttributes = [...classAttributes, this.isHeading ? 'is-heading' : ''];
|
|
5749
|
-
classAttributes = [...classAttributes, 'hy-menu-item'];
|
|
5750
|
-
return (h("li", { class: classAttributes.join(' ') }, h("a", { class: anchorClassAttributes.join(' '), href: this.url }, this.label), this.hasChildren && h("slot", null)));
|
|
5751
5737
|
}
|
|
5752
5738
|
}
|
|
5753
5739
|
get el() { return getElement(this); }
|
|
5754
5740
|
};
|
|
5755
5741
|
MenuItem.style = menuItemCss;
|
|
5756
5742
|
|
|
5757
|
-
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}";
|
|
5758
|
-
|
|
5759
|
-
let MenuItemSidebar = class {
|
|
5760
|
-
constructor(hostRef) {
|
|
5761
|
-
registerInstance(this, hostRef);
|
|
5762
|
-
this.addBreadcrumb = createEvent(this, "addBreadcrumb", 7);
|
|
5763
|
-
this.menuContainerActiveTrail = createEvent(this, "menuContainerActiveTrail", 7);
|
|
5764
|
-
this.menuContainerToggled = createEvent(this, "menuContainerToggled", 7);
|
|
5765
|
-
this.routeClicked = createEvent(this, "routeClicked", 7);
|
|
5766
|
-
this.inActiveTrail = false;
|
|
5767
|
-
this.isActive = false;
|
|
5768
|
-
this.isActiveChild = false;
|
|
5769
|
-
this.isHeading = false;
|
|
5770
|
-
this.isParent = false;
|
|
5771
|
-
this.isDemo = false;
|
|
5772
|
-
this.menuItemAlternative = false;
|
|
5773
|
-
this.menuLinkId = '';
|
|
5774
|
-
this.menuType = MenuType.sidenav;
|
|
5775
|
-
this.pageSize = MenuType.mobile;
|
|
5776
|
-
this.menuButtonSubmenuExpand = '';
|
|
5777
|
-
this.menuIsOpen = false;
|
|
5778
|
-
this.ariaExpanded = false;
|
|
5779
|
-
this.depth = 0;
|
|
5780
|
-
this.hasChildren = null;
|
|
5781
|
-
this.label = '';
|
|
5782
|
-
this.parentAsHeading = '';
|
|
5783
|
-
this.parentExpanded = false;
|
|
5784
|
-
this.url = '';
|
|
5785
|
-
}
|
|
5786
|
-
sidebarTopLevelToggle(e) {
|
|
5787
|
-
if (this.depth !== 0) {
|
|
5788
|
-
return;
|
|
5789
|
-
}
|
|
5790
|
-
const body = document.querySelector('body');
|
|
5791
|
-
const container = document.querySelector('.hy-menu-sidebar--container');
|
|
5792
|
-
const menuItem = e.target.closest('.hy-menu-item-sidebar');
|
|
5793
|
-
if (container.classList.contains('sidebar-open') && menuItem.classList.contains('is-active-item')) {
|
|
5794
|
-
container.classList.remove('sidebar-open');
|
|
5795
|
-
body.classList.remove('hy-menu-sidebar__no-scroll');
|
|
5796
|
-
}
|
|
5797
|
-
else {
|
|
5798
|
-
container.classList.add('sidebar-open');
|
|
5799
|
-
body.classList.add('hy-menu-sidebar__no-scroll');
|
|
5800
|
-
}
|
|
5801
|
-
e.preventDefault();
|
|
5802
|
-
}
|
|
5803
|
-
async componentWillLoad() {
|
|
5804
|
-
this.ro = new ResizeObserver$1((entries) => {
|
|
5805
|
-
for (const entry of entries) {
|
|
5806
|
-
this.applySize(entry.contentRect.width);
|
|
5807
|
-
}
|
|
5808
|
-
});
|
|
5809
|
-
this.ro.observe(document.body);
|
|
5810
|
-
// If is-active class is added by system, add it to menu component as well.
|
|
5811
|
-
if (this.el.classList.contains('is-active')) {
|
|
5812
|
-
this.isActive = true;
|
|
5813
|
-
}
|
|
5814
|
-
// If current menu item is active, trigger all parent menuLevelContainer
|
|
5815
|
-
// elements in the same active-trail to open the menu.
|
|
5816
|
-
if (this.isActive) {
|
|
5817
|
-
const getParents = (elem) => {
|
|
5818
|
-
let parents = [];
|
|
5819
|
-
while (elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'hy-menu-sidebar') {
|
|
5820
|
-
elem = elem.parentNode;
|
|
5821
|
-
parents.push(elem);
|
|
5822
|
-
}
|
|
5823
|
-
return parents;
|
|
5824
|
-
};
|
|
5825
|
-
const parents = getParents(this.el);
|
|
5826
|
-
for (let i = 0; i < parents.length; i++) {
|
|
5827
|
-
const element = parents[i];
|
|
5828
|
-
if (element.tagName.toLowerCase() === 'hy-menu-item-sidebar') {
|
|
5829
|
-
element.classList.add('is-hidden--child');
|
|
5830
|
-
this.menuContainerActiveTrail.emit({
|
|
5831
|
-
triggerItem: element.getAttribute('menu-link-id'),
|
|
5832
|
-
});
|
|
5833
|
-
}
|
|
5834
|
-
}
|
|
5835
|
-
// If current active menu item have children, set the child
|
|
5836
|
-
// menu-level-container open.
|
|
5837
|
-
if (this.el.children.length > 0) {
|
|
5838
|
-
this.el.children[0].setAttribute('class', 'is-open-on-top');
|
|
5839
|
-
}
|
|
5840
|
-
}
|
|
5841
|
-
if (this.inActiveTrail) {
|
|
5842
|
-
const currentParent = this.el.parentNode;
|
|
5843
|
-
if (this.menuType === MenuType.sidepanel) {
|
|
5844
|
-
currentParent.classList.add('is-open');
|
|
5845
|
-
const childList = this.el.querySelector('.hy-menu-level-container');
|
|
5846
|
-
if (childList) {
|
|
5847
|
-
childList.classList.add('is-open');
|
|
5848
|
-
}
|
|
5849
|
-
}
|
|
5850
|
-
}
|
|
5851
|
-
// Assign depth value to current menu item instance; 1st level, 2nd level, etc.
|
|
5852
|
-
this.hasChildren = this.el.getElementsByTagName('hy-menu-level-container').length >= 1;
|
|
5853
|
-
if (this.menuType === MenuType.sidenav) {
|
|
5854
|
-
let parentMenuItem = this.el.closest('hy-menu-item-sidebar');
|
|
5855
|
-
let nextParentMenuItem;
|
|
5856
|
-
if (parentMenuItem) {
|
|
5857
|
-
nextParentMenuItem = parentMenuItem.parentElement.closest('hy-menu-item-sidebar');
|
|
5858
|
-
if (nextParentMenuItem === parentMenuItem) {
|
|
5859
|
-
return;
|
|
5860
|
-
}
|
|
5861
|
-
else {
|
|
5862
|
-
if (nextParentMenuItem !== null) {
|
|
5863
|
-
this.parentAsHeading = nextParentMenuItem;
|
|
5864
|
-
}
|
|
5865
|
-
}
|
|
5866
|
-
}
|
|
5867
|
-
}
|
|
5868
|
-
}
|
|
5869
|
-
applySize(size) {
|
|
5870
|
-
// Set the menu-type based on the width of the browser.
|
|
5871
|
-
if (size <= 960) {
|
|
5872
|
-
this.pageSize = MenuType.mobile;
|
|
5873
|
-
}
|
|
5874
|
-
else {
|
|
5875
|
-
this.pageSize = MenuType.desktop;
|
|
5876
|
-
}
|
|
5877
|
-
}
|
|
5878
|
-
componentWillRender() {
|
|
5879
|
-
if (this.pageSize === MenuType.mobile)
|
|
5880
|
-
return;
|
|
5881
|
-
}
|
|
5882
|
-
render() {
|
|
5883
|
-
let classAttributes = [
|
|
5884
|
-
'hy-menu-item-sidebar',
|
|
5885
|
-
this.menuType ? `hy-menu-item-sidebar--${this.menuType}` : '',
|
|
5886
|
-
this.depth != null ? 'hy-menu-item--level-' + this.depth : '',
|
|
5887
|
-
this.isDemo ? 'is-demo' : '',
|
|
5888
|
-
this.isActive ? 'is-current-page' : '',
|
|
5889
|
-
this.isParent ? 'is-parent' : '',
|
|
5890
|
-
this.hasChildren ? 'has-children' : '',
|
|
5891
|
-
this.inActiveTrail ? 'is-active-item' : '',
|
|
5892
|
-
this.isActive && this.hasChildren ? 'is-active--heading' : '',
|
|
5893
|
-
];
|
|
5894
|
-
let anchorClassAttributes = ['hy-menu-item-sidebar__label'];
|
|
5895
|
-
classAttributes = [...classAttributes];
|
|
5896
|
-
if (this.url) {
|
|
5897
|
-
return (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 && (h("span", { class: 'hy-menu-item__parent__icon' }, h("hy-icon", { class: 'hy-menu-item__parent__icon__svg', icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }))), h("div", { class: "hy-menu-item-sidebar--label-container" }, this.isActive ? (h("span", { class: anchorClassAttributes.join(' ') }, this.label)) : (h("a", { class: anchorClassAttributes.join(' '), href: this.url }, this.label)), this.hasChildren && (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) }, h("hy-icon", { class: 'hy-menu-item__label__icon__svg', icon: 'hy-icon-caret-right', fill: 'currentColor', size: 18 })))), this.hasChildren && h("slot", null)));
|
|
5898
|
-
}
|
|
5899
|
-
else {
|
|
5900
|
-
return;
|
|
5901
|
-
}
|
|
5902
|
-
}
|
|
5903
|
-
get el() { return getElement(this); }
|
|
5904
|
-
};
|
|
5905
|
-
MenuItemSidebar.style = menuItemSidebarCss;
|
|
5906
|
-
|
|
5907
5743
|
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}";
|
|
5908
5744
|
|
|
5909
5745
|
let MenuLanguage = class {
|
|
@@ -6005,7 +5841,7 @@ let SiteLanguage = class {
|
|
|
6005
5841
|
};
|
|
6006
5842
|
SiteLanguage.style = menuLanguageItemCss;
|
|
6007
5843
|
|
|
6008
|
-
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)}
|
|
5844
|
+
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)}";
|
|
6009
5845
|
|
|
6010
5846
|
let MenuLevelContainer = class {
|
|
6011
5847
|
constructor(hostRef) {
|
|
@@ -6077,18 +5913,6 @@ let MenuLevelContainer = class {
|
|
|
6077
5913
|
this.triggerItem = 'home';
|
|
6078
5914
|
}
|
|
6079
5915
|
}
|
|
6080
|
-
// Set is-active-child and menu-level attributes to all sibling menu-items.
|
|
6081
|
-
if (this.menuType === MenuType.sidenav) {
|
|
6082
|
-
const parentMenuItem = this.el.closest('hy-menu-item-sidebar');
|
|
6083
|
-
if (parentMenuItem && parentMenuItem.classList.contains('is-active')) {
|
|
6084
|
-
this.menuIsOpen = true;
|
|
6085
|
-
const items = Array.from(this.el.children);
|
|
6086
|
-
items.forEach((item) => {
|
|
6087
|
-
item.setAttribute('is-active-child', 'true');
|
|
6088
|
-
item.setAttribute('menu-level', this.menuLevel.toString());
|
|
6089
|
-
});
|
|
6090
|
-
}
|
|
6091
|
-
}
|
|
6092
5916
|
}
|
|
6093
5917
|
render() {
|
|
6094
5918
|
let classAttributes = ['hy-menu-level-container', 'hy-menu-level-container--level-' + this.depth];
|
|
@@ -6106,28 +5930,6 @@ let MenuLevelContainer = class {
|
|
|
6106
5930
|
classAttributes = [...classAttributes, this.menuIsOpen ? 'is-open' : null];
|
|
6107
5931
|
return (h(Host, { "aria-expanded": this.menuIsOpen.toString(), class: classAttributes.join(' '), tabindex: '-1' }, h("hy-menu-item", { label: this.headingItem.label, url: this.headingItem.url, isHeading: true, isActive: this.headingItem.isActive, "menu-type": 'mobile', depth: this.menuLevel }), h("slot", null), h("slot", { name: "shortcuts" })));
|
|
6108
5932
|
}
|
|
6109
|
-
case MenuType.sidenav:
|
|
6110
|
-
if (this.depth === 0) {
|
|
6111
|
-
const shouldBeHidden = this.depth != null && this.depth === 0 ? 'is-open' : '';
|
|
6112
|
-
classAttributes = [...classAttributes, 'hy-menu-level-container--sidenav', shouldBeHidden];
|
|
6113
|
-
return (h("ul", { "data-menu-level": this.menuLevel, "data-depth": this.menuLevel, class: classAttributes.join(' ') }, h("slot", null)));
|
|
6114
|
-
}
|
|
6115
|
-
else {
|
|
6116
|
-
const isMenuOpen = this.menuIsOpen ? 'is-open_is-open__sub-level' : null;
|
|
6117
|
-
const shouldBeHidden = this.depth != null && this.depth === 0 ? 'is-open' : '';
|
|
6118
|
-
const parentMenuItem = this.el.closest('hy-menu-item-sidebar');
|
|
6119
|
-
const parentClone = parentMenuItem !== null ? parentMenuItem.cloneNode(true) : null;
|
|
6120
|
-
const parentLink = parentClone ? parentClone.querySelector('.hy-menu-item-sidebar__label') : null;
|
|
6121
|
-
classAttributes = [...classAttributes, 'hy-menu-level-container--sidenav', shouldBeHidden, isMenuOpen];
|
|
6122
|
-
return (h("ul", { "data-menu-level": this.menuLevel, "data-depth": this.menuLevel, class: classAttributes.join(' ') }, parentLink && (h("li", { class: "hy-menu-item-sidebar is-parent is-parent--sub-level" }, h("hy-icon", { class: 'hy-menu-item-parent__icon', icon: 'hy-icon-dot-arrow-right', fill: 'currentColor', size: 20 }), h("span", { "aria-level": this.depth, role: "heading", class: "hy-menu-item-sidebar--label-container", innerHTML: parentLink.outerHTML }))), h("slot", null)));
|
|
6123
|
-
}
|
|
6124
|
-
case MenuType.sidepanel:
|
|
6125
|
-
//const shouldBeHidden = (this.depth != null && this.depth === 1) ? 'is-open' : '';
|
|
6126
|
-
classAttributes = [...classAttributes, 'hy-menu-level-container--sidepanel'];
|
|
6127
|
-
const parentMenuItem = this.el.closest('hy-menu-item-sidebar');
|
|
6128
|
-
const parentClone = parentMenuItem ? parentMenuItem.cloneNode(true) : null;
|
|
6129
|
-
const parentLink = parentClone ? parentClone.querySelector('.hy-menu-item-sidebar__label') : null;
|
|
6130
|
-
return (h("ul", { "data-menu-level": this.depth, "data-depth": this.menuLevel, class: classAttributes.join(' ') }, parentLink ? (h("li", { class: "hy-menu-item-sidebar is-parent is-parent--sub-level" }, h("hy-icon", { class: 'hy-menu-item-parent__icon', icon: 'hy-icon-dot-arrow-right', fill: 'currentColor', size: 20 }), h("span", { "aria-level": this.depth, role: "heading", class: "hy-menu-item-sidebar--label-container", innerHTML: parentLink.outerHTML }))) : (h("li", { class: "hy-menu-item-sidebar is-parent is-parent--sub-level is-parent--frontpage" }, h("span", { class: 'hy-menu-item__parent__icon' }, h("hy-icon", { class: 'hy-menu-item__parent__icon__svg', icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 })), h("div", { class: "hy-menu-item-sidebar--label-container" }, h("a", { class: "hy-menu-item-sidebar__label", href: this.frontUrl }, this.frontLabel)))), h("slot", null)));
|
|
6131
5933
|
}
|
|
6132
5934
|
}
|
|
6133
5935
|
get el() { return getElement(this); }
|
|
@@ -6294,295 +6096,6 @@ let MenuMobileBreadcrumb = class {
|
|
|
6294
6096
|
};
|
|
6295
6097
|
MenuMobileBreadcrumb.style = menuMobileBreadcrumbCss;
|
|
6296
6098
|
|
|
6297
|
-
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}}";
|
|
6298
|
-
|
|
6299
|
-
let sidebarClickTimeout = null;
|
|
6300
|
-
let sidepanelClickTimeout = null;
|
|
6301
|
-
let MenuSidebar = class {
|
|
6302
|
-
constructor(hostRef) {
|
|
6303
|
-
registerInstance(this, hostRef);
|
|
6304
|
-
/**
|
|
6305
|
-
* Is menu open boolean.
|
|
6306
|
-
*/
|
|
6307
|
-
this.menuIsOpen = false;
|
|
6308
|
-
/**
|
|
6309
|
-
* Menu type. Defaults to sidenav.
|
|
6310
|
-
*/
|
|
6311
|
-
this.menuType = MenuType.sidenav;
|
|
6312
|
-
this.pageSize = MenuType.mobile;
|
|
6313
|
-
/**
|
|
6314
|
-
* Upper menus panel boolean.
|
|
6315
|
-
*/
|
|
6316
|
-
this.panelOpen = false;
|
|
6317
|
-
/**
|
|
6318
|
-
* Logo size
|
|
6319
|
-
*/
|
|
6320
|
-
this.size = SiteLogoSize.big;
|
|
6321
|
-
/**
|
|
6322
|
-
* Isdemo
|
|
6323
|
-
*/
|
|
6324
|
-
this.isDemo = false;
|
|
6325
|
-
/**
|
|
6326
|
-
* Should have link to front page or show full menu button
|
|
6327
|
-
*/
|
|
6328
|
-
this.noChildren = false;
|
|
6329
|
-
/**
|
|
6330
|
-
* IsResearchGroup
|
|
6331
|
-
*/
|
|
6332
|
-
this.isResearchGroup = false;
|
|
6333
|
-
/**
|
|
6334
|
-
* is Active helps to define how to render Research Group link.
|
|
6335
|
-
*/
|
|
6336
|
-
this.isActive = false;
|
|
6337
|
-
this.minHeight = null;
|
|
6338
|
-
}
|
|
6339
|
-
panelToggle(e) {
|
|
6340
|
-
if (this.menuIsOpen) {
|
|
6341
|
-
this.closeWholeTree();
|
|
6342
|
-
this.panelOpen = !this.panelOpen;
|
|
6343
|
-
}
|
|
6344
|
-
else {
|
|
6345
|
-
this.panelOpen = !this.panelOpen;
|
|
6346
|
-
}
|
|
6347
|
-
e.preventDefault();
|
|
6348
|
-
e.stopPropagation();
|
|
6349
|
-
}
|
|
6350
|
-
async componentWillLoad() {
|
|
6351
|
-
if (this.pageSize === MenuType.mobile)
|
|
6352
|
-
return;
|
|
6353
|
-
const sideBar = document.querySelector('.layout-sidebar-first');
|
|
6354
|
-
if (sideBar) {
|
|
6355
|
-
if (this.menuIsOpen) {
|
|
6356
|
-
sideBar.classList.add('menu-is-open');
|
|
6357
|
-
}
|
|
6358
|
-
else if (sideBar.classList.contains('menu-is-open')) {
|
|
6359
|
-
sideBar.classList.remove('menu-is-open');
|
|
6360
|
-
}
|
|
6361
|
-
}
|
|
6362
|
-
}
|
|
6363
|
-
componentDidLoad() {
|
|
6364
|
-
this.ro = new ResizeObserver$1((entries) => {
|
|
6365
|
-
for (const entry of entries) {
|
|
6366
|
-
this.applySize(entry.contentRect.width);
|
|
6367
|
-
}
|
|
6368
|
-
});
|
|
6369
|
-
this.ro.observe(document.body);
|
|
6370
|
-
const panels = document.querySelectorAll('.hy-menu-level-container');
|
|
6371
|
-
if (panels) {
|
|
6372
|
-
const height = Math.max.apply(Math, [...panels].map((panel) => panel.scrollHeight));
|
|
6373
|
-
this.minHeight = height;
|
|
6374
|
-
}
|
|
6375
|
-
}
|
|
6376
|
-
applySize(size) {
|
|
6377
|
-
// Set the menu-type based on the width of the browser.
|
|
6378
|
-
if (size <= 960) {
|
|
6379
|
-
this.pageSize = MenuType.mobile;
|
|
6380
|
-
}
|
|
6381
|
-
else {
|
|
6382
|
-
this.pageSize = MenuType.desktop;
|
|
6383
|
-
}
|
|
6384
|
-
}
|
|
6385
|
-
handlePanel(e) {
|
|
6386
|
-
const target = e.target;
|
|
6387
|
-
const targetElement = target.tagName.toLowerCase();
|
|
6388
|
-
const possibleTags = [targetElement].some((r) => ['svg', 'path'].indexOf(r) >= 0);
|
|
6389
|
-
if (target.classList.contains('hy-menu-item__label__icon') || possibleTags) {
|
|
6390
|
-
const menuItem = target.closest('.hy-menu-item-sidebar');
|
|
6391
|
-
const menuItemId = menuItem.getAttribute('data-link-id');
|
|
6392
|
-
const menuItemLevel = menuItem.getAttribute('item-level');
|
|
6393
|
-
const menuPanel = menuItem.closest('.hy-menu-level-container');
|
|
6394
|
-
const childList = menuItem.querySelector('.hy-menu-level-container');
|
|
6395
|
-
const menu = target.closest('.hy-menu');
|
|
6396
|
-
if (menu.classList.contains('hy-menu-sidepanel') && !this.previousPanel) {
|
|
6397
|
-
const sameLevelItem = menuPanel.querySelector('.is-active-item');
|
|
6398
|
-
if (sameLevelItem) {
|
|
6399
|
-
const sameLevelChildList = sameLevelItem.querySelector('.hy-menu-level-container');
|
|
6400
|
-
this.updatePrevious(menuPanel, sameLevelItem);
|
|
6401
|
-
this.togglePanel(sameLevelItem, sameLevelChildList, true);
|
|
6402
|
-
this.togglePanel(menuItem, childList);
|
|
6403
|
-
return;
|
|
6404
|
-
}
|
|
6405
|
-
}
|
|
6406
|
-
// If no previous, as in first time clicking menu
|
|
6407
|
-
if (!this.previousPanel) {
|
|
6408
|
-
this.updatePrevious(menuPanel, menuItem);
|
|
6409
|
-
this.togglePanel(menuItem, childList);
|
|
6410
|
-
return;
|
|
6411
|
-
}
|
|
6412
|
-
const prevId = this.previousItem.dataset.linkId;
|
|
6413
|
-
const prevLevel = this.previousItem.getAttribute('item-level');
|
|
6414
|
-
// If clicking same menu item again.
|
|
6415
|
-
if (menuItemId === prevId) {
|
|
6416
|
-
if (menuItem.classList.contains('is-active-item')) {
|
|
6417
|
-
this.togglePanel(menuItem, childList, true);
|
|
6418
|
-
if (menuItemLevel == 0) {
|
|
6419
|
-
this.menuIsOpen = false;
|
|
6420
|
-
this.toggleSidebarBg();
|
|
6421
|
-
}
|
|
6422
|
-
}
|
|
6423
|
-
else {
|
|
6424
|
-
this.togglePanel(menuItem, childList);
|
|
6425
|
-
}
|
|
6426
|
-
return;
|
|
6427
|
-
}
|
|
6428
|
-
// If clicking menu item on same level or going back up
|
|
6429
|
-
if (menuItemLevel <= prevLevel) {
|
|
6430
|
-
// If clicking already active, close children
|
|
6431
|
-
if (menuItem.classList.contains('is-active-item')) {
|
|
6432
|
-
this.togglePanel(menuItem, childList, true);
|
|
6433
|
-
this.updatePrevious(menuPanel, menuItem);
|
|
6434
|
-
return;
|
|
6435
|
-
}
|
|
6436
|
-
// Close previous panels
|
|
6437
|
-
this.togglePanel(this.previousItem, menuPanel, true);
|
|
6438
|
-
// Open newly clicked panel
|
|
6439
|
-
this.togglePanel(menuItem, childList);
|
|
6440
|
-
// Update previous
|
|
6441
|
-
this.updatePrevious(menuPanel, menuItem);
|
|
6442
|
-
}
|
|
6443
|
-
else if (menuItemLevel > prevLevel) {
|
|
6444
|
-
this.togglePanel(menuItem, childList);
|
|
6445
|
-
this.updatePrevious(menuPanel, menuItem);
|
|
6446
|
-
}
|
|
6447
|
-
}
|
|
6448
|
-
e.stopImmediatePropagation();
|
|
6449
|
-
e.stopPropagation();
|
|
6450
|
-
}
|
|
6451
|
-
updatePrevious(panel, item) {
|
|
6452
|
-
this.previousPanel = panel;
|
|
6453
|
-
this.previousItem = item;
|
|
6454
|
-
}
|
|
6455
|
-
closeWholeTree() {
|
|
6456
|
-
const sidebarLevel1 = document.querySelector('.hy-menu-level-container--level-0');
|
|
6457
|
-
let firstItem = document.querySelector('.hy-menu-item-sidebar--sidenav.hy-menu-item--level-0.has-children.is-active-item');
|
|
6458
|
-
if (firstItem) {
|
|
6459
|
-
this.togglePanel(firstItem, sidebarLevel1, true);
|
|
6460
|
-
}
|
|
6461
|
-
else {
|
|
6462
|
-
firstItem = document.querySelector('.hy-menu-item-sidebar--sidenav.hy-menu-item--level-0.is-active-item');
|
|
6463
|
-
}
|
|
6464
|
-
const body = document.querySelector('body');
|
|
6465
|
-
const container = document.querySelector('.hy-menu-sidebar--container');
|
|
6466
|
-
if (container.classList.contains('sidebar-open') && firstItem) {
|
|
6467
|
-
container.classList.remove('sidebar-open');
|
|
6468
|
-
body.classList.remove('hy-menu-sidebar__no-scroll');
|
|
6469
|
-
}
|
|
6470
|
-
}
|
|
6471
|
-
togglePanel(menuItem, panel, shouldClose = false) {
|
|
6472
|
-
const buttonElement = menuItem.querySelector('button');
|
|
6473
|
-
const level = menuItem.getAttribute('item-level');
|
|
6474
|
-
if (level == 0 && !this.menuIsOpen) {
|
|
6475
|
-
if (window.pageYOffset > 50 && !this.isDemo) {
|
|
6476
|
-
window.scrollTo({ top: 0 });
|
|
6477
|
-
}
|
|
6478
|
-
this.menuIsOpen = true;
|
|
6479
|
-
}
|
|
6480
|
-
if (shouldClose) {
|
|
6481
|
-
const children = panel.querySelectorAll('.hy-menu-item-sidebar');
|
|
6482
|
-
const activeChild = [...children].filter((c) => c.classList.contains('is-active-item'));
|
|
6483
|
-
if (level == 0 && activeChild) {
|
|
6484
|
-
this.menuIsOpen = false;
|
|
6485
|
-
this.toggleSidebarBg();
|
|
6486
|
-
}
|
|
6487
|
-
if (activeChild.length > 0) {
|
|
6488
|
-
for (let i = 0; i < activeChild.length; i++) {
|
|
6489
|
-
const element = activeChild[i];
|
|
6490
|
-
this.closeChildren(element);
|
|
6491
|
-
}
|
|
6492
|
-
}
|
|
6493
|
-
if (buttonElement) {
|
|
6494
|
-
buttonElement.setAttribute('aria-expanded', 'false');
|
|
6495
|
-
}
|
|
6496
|
-
this.closeChildren(menuItem);
|
|
6497
|
-
return;
|
|
6498
|
-
}
|
|
6499
|
-
buttonElement.setAttribute('aria-expanded', 'true');
|
|
6500
|
-
panel.classList.add('is-open');
|
|
6501
|
-
menuItem.classList.add('is-active-item');
|
|
6502
|
-
}
|
|
6503
|
-
closeChildren(menuItem) {
|
|
6504
|
-
if (menuItem.classList.contains('is-active-item')) {
|
|
6505
|
-
menuItem.classList.remove('is-active-item');
|
|
6506
|
-
}
|
|
6507
|
-
if (menuItem.classList.contains('has-children')) {
|
|
6508
|
-
const menuButton = menuItem.querySelector('button');
|
|
6509
|
-
menuButton.setAttribute('aria-expanded', 'false');
|
|
6510
|
-
const childList = menuItem.querySelector('.hy-menu-level-container');
|
|
6511
|
-
childList.classList.remove('is-open');
|
|
6512
|
-
const childItems = childList.querySelectorAll('.hy-menu-item-sidebar');
|
|
6513
|
-
if (childList.classList.contains('is-active')) {
|
|
6514
|
-
childList.classList.remove('is-active');
|
|
6515
|
-
}
|
|
6516
|
-
childItems.forEach((element) => {
|
|
6517
|
-
element.classList.remove('is-active-item');
|
|
6518
|
-
if (element.classList.contains('has-children')) {
|
|
6519
|
-
const menuButton = element.querySelector('button');
|
|
6520
|
-
menuButton.setAttribute('aria-expanded', 'false');
|
|
6521
|
-
this.closeChildren(element);
|
|
6522
|
-
}
|
|
6523
|
-
else {
|
|
6524
|
-
return;
|
|
6525
|
-
}
|
|
6526
|
-
});
|
|
6527
|
-
}
|
|
6528
|
-
}
|
|
6529
|
-
toggleSidebarBg() {
|
|
6530
|
-
const sideBar = document.querySelector('.layout-sidebar-first');
|
|
6531
|
-
if (this.menuIsOpen) {
|
|
6532
|
-
sideBar.classList.add('menu-is-open');
|
|
6533
|
-
}
|
|
6534
|
-
else if (sideBar.classList.contains('menu-is-open')) {
|
|
6535
|
-
sideBar.classList.remove('menu-is-open');
|
|
6536
|
-
}
|
|
6537
|
-
}
|
|
6538
|
-
render() {
|
|
6539
|
-
const sidebarContainer = document.querySelector('.hy-menu-sidebar--container');
|
|
6540
|
-
if (sidebarContainer) {
|
|
6541
|
-
sidebarContainer.addEventListener('click', (e) => {
|
|
6542
|
-
clearTimeout(sidebarClickTimeout);
|
|
6543
|
-
sidebarClickTimeout = setTimeout(() => {
|
|
6544
|
-
if (e.target.classList.contains('sidebar-open')) {
|
|
6545
|
-
this.closeWholeTree();
|
|
6546
|
-
}
|
|
6547
|
-
}, 250);
|
|
6548
|
-
});
|
|
6549
|
-
}
|
|
6550
|
-
const sidepanelContainer = document.querySelector('.hy-menu-sidepanel--container');
|
|
6551
|
-
if (sidepanelContainer) {
|
|
6552
|
-
sidepanelContainer.addEventListener('click', (e) => {
|
|
6553
|
-
clearTimeout(sidepanelClickTimeout);
|
|
6554
|
-
sidepanelClickTimeout = setTimeout(() => {
|
|
6555
|
-
if (e.target.classList.contains('sidepanel-open')) {
|
|
6556
|
-
this.panelToggle(e);
|
|
6557
|
-
}
|
|
6558
|
-
}, 250);
|
|
6559
|
-
});
|
|
6560
|
-
}
|
|
6561
|
-
const logoColor = ColorVariant.black;
|
|
6562
|
-
const panelClassAttributes = ['hy-menu-sidepanel--container', this.panelOpen ? 'sidepanel-open' : ''].join(' ');
|
|
6563
|
-
switch (this.menuType) {
|
|
6564
|
-
case MenuType.sidepanel:
|
|
6565
|
-
return (h("div", { class: "hy-menu-sidebar__container", style: {
|
|
6566
|
-
'--minHeight': `${this.minHeight}px`,
|
|
6567
|
-
} }, this.noChildren && this.isResearchGroup && this.isActive && (h("a", { "aria-label": this.frontLabel, class: "hy-menu-sidebar__panel-toggle", href: this.frontUrl }, h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), this.frontLabel)), this.noChildren && this.isResearchGroup && !this.isActive && (h("a", { "aria-label": this.frontLabel, class: "hy-menu-sidebar__panel-toggle", href: this.frontUrl }, h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), this.frontLabel)), this.noChildren && !this.isResearchGroup && (h("a", { "aria-label": this.frontLabel, class: "hy-menu-sidebar__panel-toggle", href: this.frontUrl }, h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), this.frontLabel)), !this.noChildren && (h("button", { "aria-label": this.panelToggleAriaLabel, class: "hy-menu-sidebar__panel-toggle", onClick: (e) => this.panelToggle(e) }, h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), this.panelToggleLabel)), h("div", { class: panelClassAttributes, "aria-hidden": this.panelOpen ? 'false' : 'true', "aria-expanded": this.panelOpen ? 'true' : 'false' }, h("div", { class: "hy-menu-sidepanel__nav-container" }, h("div", { class: "hy-menu-sidepanel__logo-container" }, h("div", { class: "hy-menu-sidepanel__logo", "aria-hidden": this.panelOpen ? 'false' : 'true', tabindex: this.panelOpen ? '0' : '-1' }, h("hy-site-logo", { size: 56, color: logoColor, url: this.logoUrl, label: this.logoLabel })), 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) }, h("hy-icon", { icon: 'hy-icon-remove', fill: 'currentColor', size: 10 }), this.panelToggleCloseLabel)), h("nav", { role: 'navigation', "aria-hidden": this.panelOpen ? 'false' : 'true', tabindex: this.panelOpen ? '0' : '-1', class: {
|
|
6568
|
-
'hy-menu': true,
|
|
6569
|
-
'hy-menu-sidepanel': true,
|
|
6570
|
-
'is-demo': this.isDemo,
|
|
6571
|
-
} }, h("slot", null))))));
|
|
6572
|
-
case MenuType.sidenav:
|
|
6573
|
-
return (h("div", { class: "hy-menu-sidebar--container", style: {
|
|
6574
|
-
'--minHeight': `${this.minHeight}px`,
|
|
6575
|
-
} }, h("div", { class: "hy-menu-sidebar__logo" }, h("hy-site-logo", { size: 56, color: logoColor, url: this.logoUrl, label: this.logoLabel })), h("button", { "aria-label": this.panelToggleAriaLabel, class: "hy-menu-sidebar__panel-toggle", onClick: (e) => this.panelToggle(e) }, h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }), this.panelToggleLabel), h("nav", { role: 'navigation', "aria-hidden": this.menuIsOpen ? 'false' : 'true', class: {
|
|
6576
|
-
'hy-menu': true,
|
|
6577
|
-
'hy-menu-sidebar': true,
|
|
6578
|
-
'is-demo': this.isDemo,
|
|
6579
|
-
} }, h("slot", null))));
|
|
6580
|
-
}
|
|
6581
|
-
}
|
|
6582
|
-
get el() { return getElement(this); }
|
|
6583
|
-
};
|
|
6584
|
-
MenuSidebar.style = menuSidebarCss;
|
|
6585
|
-
|
|
6586
6099
|
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)}";
|
|
6587
6100
|
|
|
6588
6101
|
let HyMobileMenuShortcuts = class {
|
|
@@ -8050,4 +7563,4 @@ let HyVideo = class {
|
|
|
8050
7563
|
};
|
|
8051
7564
|
HyVideo.style = hyVideoCss;
|
|
8052
7565
|
|
|
8053
|
-
export { AccordionContainer as hy_accordion_container, AccordionItem as hy_accordion_item, AdjacentImageText as hy_adjacent_image_text, HyAnchorLinkList as hy_anchor_link_list, HyBadge as hy_badge, HyBanner as hy_banner, Baseline as hy_baseline, HyBox as hy_box, HyBoxContainer as hy_box_container, HyBreadcrumbs as hy_breadcrumbs, HyCheckbox as hy_checkbox, HyCollaboration as hy_collaboration, HyContentList as hy_content_list, HyContentLstItem as hy_content_list_item, HyCrisisBanner as hy_crisis_banner, CtaButton as hy_cta_button, CtaLink as hy_cta_link, HyDesktopMenuLinks as hy_desktop_menu_links, HyDropdown as hy_dropdown, HyDropdownPanel as hy_dropdown_panel, HyDropdownPanelItem as hy_dropdown_panel_item, HyFilterGroup as hy_filter_group, HyFilterGroupItem as hy_filter_group_item, HyFilterListType as hy_filter_list_type, HyFilterVisibilityTool as hy_filter_visibility_tool, HyFilterVisibilityToolReset as hy_filter_visibility_tool_reset, HyFilterVisibilityToolToggle as hy_filter_visibility_tool_toggle, HyFooter as hy_footer, HyFooterAction as hy_footer_action, HyFooterBase as hy_footer_base, HyFooterInfo as hy_footer_info, HyFooterLinkItem as hy_footer_link_item, HyGeneralList as hy_general_list, HyGeneralListItem as hy_general_list_item, Heading as hy_heading, HyHero as hy_hero, Icon as hy_icon, Image as hy_image, Ingress as hy_ingress, HyIntroduction as hy_introduction, HyKeyFigure as hy_key_figure, HyKeyFigureGroup as hy_key_figure_group, HyKeyHighlight as hy_key_highlight, HyKeyHighlightGroup as hy_key_highlight_group, HyLargeProcessFlow as hy_large_process_flow, HyLargeProcessFlowPhase as hy_large_process_flow_phase, Link as hy_link, LinkBox as hy_link_box, LinkBoxList as hy_link_box_list, HyLinkList as hy_link_list, HyListItem as hy_list_item, HyLogoGrid as hy_logo_grid, HyLogoGridItem as hy_logo_grid_item, HyMain as hy_main, HyMainContentWrapper as hy_main_content_wrapper, Menu as hy_menu, MenuItem as hy_menu_item,
|
|
7566
|
+
export { AccordionContainer as hy_accordion_container, AccordionItem as hy_accordion_item, AdjacentImageText as hy_adjacent_image_text, HyAnchorLinkList as hy_anchor_link_list, HyBadge as hy_badge, HyBanner as hy_banner, Baseline as hy_baseline, HyBox as hy_box, HyBoxContainer as hy_box_container, HyBreadcrumbs as hy_breadcrumbs, HyCheckbox as hy_checkbox, HyCollaboration as hy_collaboration, HyContentList as hy_content_list, HyContentLstItem as hy_content_list_item, HyCrisisBanner as hy_crisis_banner, CtaButton as hy_cta_button, CtaLink as hy_cta_link, HyDesktopMenuLinks as hy_desktop_menu_links, HyDropdown as hy_dropdown, HyDropdownPanel as hy_dropdown_panel, HyDropdownPanelItem as hy_dropdown_panel_item, HyFilterGroup as hy_filter_group, HyFilterGroupItem as hy_filter_group_item, HyFilterListType as hy_filter_list_type, HyFilterVisibilityTool as hy_filter_visibility_tool, HyFilterVisibilityToolReset as hy_filter_visibility_tool_reset, HyFilterVisibilityToolToggle as hy_filter_visibility_tool_toggle, HyFooter as hy_footer, HyFooterAction as hy_footer_action, HyFooterBase as hy_footer_base, HyFooterInfo as hy_footer_info, HyFooterLinkItem as hy_footer_link_item, HyGeneralList as hy_general_list, HyGeneralListItem as hy_general_list_item, Heading as hy_heading, HyHero as hy_hero, Icon as hy_icon, Image as hy_image, Ingress as hy_ingress, HyIntroduction as hy_introduction, HyKeyFigure as hy_key_figure, HyKeyFigureGroup as hy_key_figure_group, HyKeyHighlight as hy_key_highlight, HyKeyHighlightGroup as hy_key_highlight_group, HyLargeProcessFlow as hy_large_process_flow, HyLargeProcessFlowPhase as hy_large_process_flow_phase, Link as hy_link, LinkBox as hy_link_box, LinkBoxList as hy_link_box_list, HyLinkList as hy_link_list, HyListItem as hy_list_item, HyLogoGrid as hy_logo_grid, HyLogoGridItem as hy_logo_grid_item, HyMain as hy_main, HyMainContentWrapper as hy_main_content_wrapper, Menu as hy_menu, MenuItem as hy_menu_item, MenuLanguage as hy_menu_language, SiteLanguage as hy_menu_language_item, MenuLevelContainer as hy_menu_level_container, HyMenuMainGroup as hy_menu_main_group, MenuMobileBreadcrumb as hy_menu_mobile_breadcrumb, HyMobileMenuShortcuts as hy_mobile_menu_shortcuts, HyOpeningHours as hy_opening_hours, HyOpeningHoursContent as hy_opening_hours_content, HyPager as hy_pager, HyPagerItem as hy_pager_item, ParagraphText as hy_paragraph_text, HyPersonCard as hy_person_card, PersonProfile$1 as hy_person_profile, PersonProfile as hy_person_profile_listing, Process as hy_process, ProcessFlowBox as hy_process_flow_box, HyProminentImage as hy_prominent_image, HyQuote as hy_quote, Row as hy_row, HySearchField as hy_search_field, HyShortcuts as hy_shortcuts, SiteHeader as hy_site_header, SiteLogo as hy_site_logo, SiteSearch as hy_site_search, HyTableContainer as hy_table_container, HyTabs as hy_tabs, HyTabsItem as hy_tabs_item, HyTag as hy_tag, HyTwitterFeed as hy_twitter_feed, HyTwoColumns as hy_two_columns, HyUserLoginForm as hy_user_login_form, HyVideo as hy_video };
|