@itcenteratunihelsinki/huds-lib 0.6.5 → 0.6.7
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/huds-lib.cjs.js +1 -1
- package/dist/cjs/{hy-accordion-container_89.cjs.entry.js → hy-accordion-container_83.cjs.entry.js} +610 -1317
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +0 -12
- package/dist/collection/components/cta-button/cta-button.js +26 -5
- package/dist/collection/components/hy-dropdown/hy-dropdown.js +2 -2
- package/dist/collection/components/navigation/hy-menu-main-group/hy-menu-main-group.js +20 -1
- package/dist/collection/components/site-header/site-header.css +16 -1
- package/dist/collection/components/site-header/site-header.js +15 -37
- package/dist/esm/huds-lib.js +1 -1
- package/dist/esm/{hy-accordion-container_89.entry.js → hy-accordion-container_83.entry.js} +612 -1313
- package/dist/esm/loader.js +1 -1
- package/dist/huds-lib/huds-lib.esm.js +1 -1
- package/dist/huds-lib/p-f86741ed.entry.js +86 -0
- package/dist/types/components/cta-button/cta-button.d.ts +1 -0
- package/dist/types/components/navigation/hy-menu-main-group/hy-menu-main-group.d.ts +1 -0
- package/dist/types/components/site-header/site-header.d.ts +0 -1
- package/dist/types/components.d.ts +5 -212
- package/package.json +1 -1
- package/dist/collection/components/navigation/menu/menu.css +0 -262
- package/dist/collection/components/navigation/menu/menu.js +0 -431
- package/dist/collection/components/navigation/menu-item/menu-item.css +0 -348
- package/dist/collection/components/navigation/menu-item/menu-item.js +0 -557
- package/dist/collection/components/navigation/menu-level-container/menu-level-container.css +0 -129
- package/dist/collection/components/navigation/menu-level-container/menu-level-container.js +0 -300
- package/dist/collection/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.css +0 -90
- package/dist/collection/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.js +0 -151
- package/dist/collection/components/navigation/mobile-menu-shortcuts/mobile-menu-shortcuts.css +0 -140
- package/dist/collection/components/navigation/mobile-menu-shortcuts/mobile-menu-shortcuts.js +0 -68
- package/dist/collection/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.css +0 -469
- package/dist/collection/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.js +0 -482
- package/dist/huds-lib/p-fd0fd0ea.entry.js +0 -86
- package/dist/types/components/navigation/menu/menu.d.ts +0 -30
- package/dist/types/components/navigation/menu-item/menu-item.d.ts +0 -31
- package/dist/types/components/navigation/menu-level-container/menu-level-container.d.ts +0 -27
- package/dist/types/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.d.ts +0 -12
- package/dist/types/components/navigation/mobile-menu-shortcuts/mobile-menu-shortcuts.d.ts +0 -13
- package/dist/types/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.d.ts +0 -60
|
@@ -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,
|
|
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, P as PaginationItemVariants, t as PersonCardVariants, u as ProcessFlowBoxVariants, M as MenuType } 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%}";
|
|
@@ -26,7 +26,7 @@ AccordionContainer.style = accordionContainerCss;
|
|
|
26
26
|
|
|
27
27
|
const accordionItemCss = ":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__item{margin-bottom:12px}.hy-accordion__item__is-open{border:1px solid var(--grayscale-dark)}.hy-accordion__item__is-open .hy-accordion--heading{margin:0 auto}.hy-accordion__item__is-open .hy-accordion--heading .hy-accordion--heading__icon{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.hy-accordion__item.mini{margin-bottom:1rem;margin-top:1rem}.hy-accordion__item__is-open.mini{margin-bottom:0;margin-top:0}.hy-accordion__item__is-open.mini .hy-accordion__item--container{border-bottom:1px solid var(--grayscale-medium-dark);border-top:1px solid var(--grayscale-medium-dark);padding-top:16px;padding-bottom:32px;margin-top:-1px;-webkit-transition:padding 0.5s ease-in-out;transition:padding 0.5s ease-in-out}@media (min-width: 30rem){.hy-accordion__item__is-open.mini .hy-accordion__item--container{padding-top:28px;padding-bottom:30px}}@media (min-width: 60rem){.hy-accordion__item__is-open.mini .hy-accordion__item--container{padding-top:32px;padding-bottom:40px}}.hy-accordion__item.hy-accordion__item__is-open.mini{background-color:var(--grayscale-white);border:none;-webkit-box-shadow:0 -10px 10px -10px rgba(0, 49, 70, 0.05);box-shadow:0 -10px 10px -10px rgba(0, 49, 70, 0.05)}.hy-accordion--heading{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;letter-spacing:-0.69px;line-height:28px;margin:0 auto;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;width:100%}.hy-accordion--heading .hy-accordion__link{text-decoration:none}.hy-accordion--heading .hy-accordion__link:hover{text-decoration:none}.hy-accordion--heading .hy-accordion__button{font-size:1.125rem;line-height:22px;font-weight:700;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;background-color:var(--grayscale-background-box);border:none;color:var(--brand-main-nearly-black);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);height:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;letter-spacing:-0.45px;padding:13px 20px 13px 16px;-webkit-transition:all 0.35s ease-in;transition:all 0.35s ease-in;width:100%}.hy-accordion--heading .hy-accordion__button:hover{cursor:pointer}@media (min-width: 30rem){.hy-accordion--heading .hy-accordion__button{padding:1rem 2rem 1rem 1.25rem}}@media (min-width: 1601px){.hy-accordion--heading .hy-accordion__button{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-accordion--heading .hy-accordion__button--large{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-accordion--heading .hy-accordion__button--large .hy-accordion--heading__icon svg{height:20px;width:20px}}.hy-accordion--heading .hy-accordion__button span{text-align:left}.hy-accordion--heading .hy-accordion__button[aria-expanded=true]{background:none;position:relative}.hy-accordion--heading .hy-accordion__button[aria-expanded=true]:after{background-color:var(--grayscale-medium-dark);bottom:0;content:\"\";height:1px;left:16px;position:absolute;right:20px}.hy-accordion--heading .hy-accordion__button *{pointer-events:none}.hy-accordion--heading .hy-accordion--heading__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:22px;margin-right:8px;z-index:0}.hy-accordion--heading .hy-accordion--heading__icon svg{fill:var(--brand-main)}@media (min-width: 30rem){.hy-accordion--heading .hy-accordion--heading__icon svg{height:18px;width:18px}}@media (min-width: 1601px){.hy-accordion--heading .hy-accordion--heading__icon svg{height:20px;width:20px}}.hy-accordion--heading.mini .hy-accordion__button{font-size:1.125rem;line-height:22px;background-color:var(--grayscale-white);color:var(--link-blue);letter-spacing:-0.56px;padding:0}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion__button{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding:0}}.hy-accordion--heading.mini .hy-accordion__button[aria-expanded=true]{color:var(--grayscale-black);margin-bottom:20px}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion__button[aria-expanded=true]{margin-bottom:28px}}@media (min-width: 60rem){.hy-accordion--heading.mini .hy-accordion__button[aria-expanded=true]{margin-bottom:32px}}.hy-accordion--heading.mini .hy-accordion--heading__icon{margin-right:0.5rem;z-index:0}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion--heading__icon{margin-right:10px}}.hy-accordion--heading.mini .hy-accordion--heading__icon svg{fill:var(--brand-main-light);height:14px;width:14px}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion--heading__icon svg{height:16px;width:16px}}.hy-accordion__content{display:block;height:0;padding:0;overflow:hidden;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out}.hy-accordion__content--inner-wrapper{display:block;padding:16px 12px}@media (min-width: 30rem){.hy-accordion__content--inner-wrapper{padding:15px 16px}}@media (min-width: 60rem){.hy-accordion__content--inner-wrapper{padding:16px}}@media (min-width: 75.0625rem){.hy-accordion__content--inner-wrapper--large{padding:24px 20px}}@media (min-width: 1601px){.hy-accordion__content--inner-wrapper{padding:24px 20px}}.hy-accordion__content--inner-wrapper--mini{padding:0}.hy-accordion__content--inner-wrapper--mini .course-heading h4{padding-top:0 !important}";
|
|
28
28
|
|
|
29
|
-
let keys$
|
|
29
|
+
let keys$4 = {
|
|
30
30
|
enter: 'Enter',
|
|
31
31
|
tab: 'Tab',
|
|
32
32
|
pageUp: 'PageUp',
|
|
@@ -81,25 +81,25 @@ let AccordionItem = class {
|
|
|
81
81
|
const triggers = Array.prototype.slice.call(accordion.querySelectorAll('.hy-accordion__button'));
|
|
82
82
|
let target = event.target;
|
|
83
83
|
const key = event.code;
|
|
84
|
-
const ctrlModifier = event.ctrlKey && [keys$
|
|
84
|
+
const ctrlModifier = event.ctrlKey && [keys$4.pageDown, keys$4.pageUp].includes(key); //key.match(/33|34/);
|
|
85
85
|
if (target.classList.contains('hy-accordion__button')) {
|
|
86
86
|
// Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
|
|
87
|
-
if ([keys$
|
|
87
|
+
if ([keys$4.arrowDown, keys$4.arrowUp].includes(key) || ctrlModifier) {
|
|
88
88
|
const index = triggers.indexOf(target);
|
|
89
|
-
const direction = [keys$
|
|
89
|
+
const direction = [keys$4.arrowDown, keys$4.pageDown].includes(key) ? 1 : -1;
|
|
90
90
|
const length = triggers.length;
|
|
91
91
|
const newIndex = (index + length + direction) % length;
|
|
92
92
|
triggers[newIndex].focus();
|
|
93
93
|
event.preventDefault();
|
|
94
94
|
}
|
|
95
|
-
else if ([keys$
|
|
95
|
+
else if ([keys$4.home, keys$4.end].includes(key)) {
|
|
96
96
|
switch (key) {
|
|
97
97
|
// Go to first accordion
|
|
98
|
-
case keys$
|
|
98
|
+
case keys$4.home:
|
|
99
99
|
triggers[0].focus();
|
|
100
100
|
break;
|
|
101
101
|
// Go to last accordion
|
|
102
|
-
case keys$
|
|
102
|
+
case keys$4.end:
|
|
103
103
|
triggers[triggers.length - 1].focus();
|
|
104
104
|
break;
|
|
105
105
|
}
|
|
@@ -2328,7 +2328,7 @@ HyContentList.style = hyContentListCss;
|
|
|
2328
2328
|
|
|
2329
2329
|
const hyContentListItemCss = ":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{background:radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:16px;position:relative}@media (min-width: 30rem){:host{margin-bottom:24px}}:host([variant=row]),:host(.row){max-width:100%;padding:21px 0 60px 12px;width:100%}@media (min-width: 30rem){:host([variant=row]),:host(.row){padding:21px 0 12px 24px}}@media (min-width: 60rem){:host([variant=row]),:host(.row){margin-bottom:16px}}:host(.grid){max-width:100%;padding:21px 0 60px 12px;width:100%}@media (min-width: 30rem){:host(.grid){margin-right:var(--gutter-medium);max-width:calc(((100% - var(--gutter-medium) * 11) / 12) * 6 + var(--gutter-medium) * 5);padding:21px 0 60px 12px;width:calc(((100% - var(--gutter-medium) * 11) / 12) * 6 + var(--gutter-medium) * 5)}}@media (min-width: 60rem){:host(.grid){margin-bottom:27px;margin-right:var(--gutter-wide);max-width:calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3);width:calc(((100% - var(--gutter-wide) * 11) / 12) * 4 + var(--gutter-wide) * 3)}}@media (min-width: 75.0625rem){:host(.grid){margin-bottom:32px;margin-right:var(--gutter-extrawide);max-width:calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3);width:calc(((100% - var(--gutter-extrawide) * 11) / 12) * 4 + var(--gutter-extrawide) * 3)}}@media (min-width: 30rem){:host(.grid:nth-of-type(2n+0)){margin-right:0}}@media (min-width: 60rem){:host(.grid:nth-of-type(2n+0)){margin-right:var(--gutter-wide)}}@media (min-width: 75.0625rem){:host(.grid:nth-of-type(2n+0)){margin-right:var(--gutter-extrawide)}}@media (min-width: 60rem){:host(.grid:nth-of-type(3n+0)){margin-right:0}}.hy-content-list-item{font-family:var(--main-font-family);position:relative;width:100%}.hy-content-list-item a{text-decoration:none}.hy-content-list-item--container{cursor:pointer}.hy-content-list-item--item-name{color:var(--link-blue);font-size:1.25rem;line-height:24px;font-weight:700;letter-spacing:-0.6px;margin-bottom:16px;word-break:break-word}.hy-content-list-item--item-name--past-courses{color:var(--grayscale-dark)}.hy-content-list-item--metadata{font-size:0.875rem;line-height:16px;font-weight:600;color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;letter-spacing:-0.44px;line-height:16px;margin-bottom:19px;padding-bottom:0}.hy-content-list-item--metadata--item{padding-bottom:6px}@media (min-width: 30rem){.hy-content-list-item--metadata{padding-bottom:1rem}}@media (min-width: 75.0625rem){.hy-content-list-item--metadata{padding-bottom:0}}.hy-content-list-item--metadata--item:after{content:\"|\";padding:0 8px}.hy-content-list-item--metadata--item--last:after{content:\" \"}.hy-content-list-item .cancelled span{font-size:0.75rem;line-height:12px;font-weight:700;background-color:var(--additional-red-light);color:var(--grayscale-white);letter-spacing:-0.5px;padding:6px 8px;text-transform:uppercase}.hy-content-list-item .cancelled--past-courses span{background-color:var(--grayscale-dark)}.hy-content-list-item .cancelled:not(.mobile){display:none}.hy-content-list-item .cancelled.mobile{bottom:-50px;display:block;margin:0;padding-bottom:12px;position:absolute}@media (min-width: 30rem){.hy-content-list-item .cancelled{margin-right:8px}.hy-content-list-item .cancelled.mobile{display:none}.hy-content-list-item .cancelled:not(.mobile){display:block}}.hy-content-list-item--link{position:absolute;right:-6px}.hy-content-list-item--link a{-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;text-decoration:none}.hy-content-list-item--link a .label{font-size:1rem;line-height:16px;font-weight:700;color:var(--link-blue);letter-spacing:-0.5px;line-height:16px;margin-right:8px;text-align:right}.hy-content-list-item--link a .icon-wrapper{background-color:var(--brand-main-light);z-index:10}.hy-content-list-item--link a .icon-wrapper .icon{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);position:relative;overflow:hidden}.hy-content-list-item--link a .icon-wrapper .icon svg{background-color:transparent;-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);fill:var(--grayscale-white);padding:10.29px}.hy-content-list-item.row .hy-content-list-item--link{bottom:-60px;padding-bottom:12px}@media (min-width: 30rem){.hy-content-list-item.row .hy-content-list-item--link{bottom:0;padding-bottom:0}}.hy-content-list-item.row .hy-content-list-item--tags{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}@media (min-width: 60rem){.hy-content-list-item.row .hy-content-list-item--tags{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-right:200px}}.hy-content-list-item.grid .hy-content-list-item--link{bottom:-60px;padding-bottom:12px}.hy-content-list-item.grid .hy-content-list-item--tags{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}";
|
|
2330
2330
|
|
|
2331
|
-
let keys$
|
|
2331
|
+
let keys$3 = {
|
|
2332
2332
|
enter: 'Enter',
|
|
2333
2333
|
};
|
|
2334
2334
|
let HyContentLstItem = class {
|
|
@@ -2356,7 +2356,7 @@ let HyContentLstItem = class {
|
|
|
2356
2356
|
}
|
|
2357
2357
|
handleKeyDown(event) {
|
|
2358
2358
|
const key = event.code;
|
|
2359
|
-
if (key == keys$
|
|
2359
|
+
if (key == keys$3.enter) {
|
|
2360
2360
|
let card = this.el;
|
|
2361
2361
|
window.open(card.dataset.location, '_blank', 'noopener');
|
|
2362
2362
|
}
|
|
@@ -2406,6 +2406,7 @@ let CtaButton = class {
|
|
|
2406
2406
|
registerInstance(this, hostRef);
|
|
2407
2407
|
this.variant = CtaLinkButtonVariants.onBlueBkgd;
|
|
2408
2408
|
this.linkContent = '';
|
|
2409
|
+
this.typeButton = false;
|
|
2409
2410
|
this.isExternal = false;
|
|
2410
2411
|
this.headerstyle = 'common';
|
|
2411
2412
|
}
|
|
@@ -2415,7 +2416,7 @@ let CtaButton = class {
|
|
|
2415
2416
|
const textClassAttributes = ['text'].join(' ');
|
|
2416
2417
|
const iconClassAttributes = ['link-icon'].join(' ');
|
|
2417
2418
|
const target = this.isExternal ? '_blank' : '_self';
|
|
2418
|
-
return (h("span", { class: containerClassAttributes }, h("a", { "aria-label": this.scLabel, class: classAttributes, href: this.url, target: target }, h("span", { class: textClassAttributes }, this.linkContent.length === 0 ? h("slot", null) : this.linkContent), h("span", { class: iconClassAttributes }, h("hy-icon", { icon: 'hy-icon-arrow-right', size: 48 })))));
|
|
2419
|
+
return (h("span", { class: containerClassAttributes }, !this.typeButton ? (h("a", { "aria-label": this.scLabel, class: classAttributes, href: this.url, target: target }, h("span", { class: textClassAttributes }, this.linkContent.length === 0 ? h("slot", null) : this.linkContent), h("span", { class: iconClassAttributes }, h("hy-icon", { icon: 'hy-icon-arrow-right', size: 48 })))) : (h("button", { "aria-label": this.scLabel, class: classAttributes }, h("span", { class: textClassAttributes }, this.linkContent.length === 0 ? h("slot", null) : this.linkContent), h("span", { class: iconClassAttributes }, h("hy-icon", { icon: 'hy-icon-arrow-right', size: 48 }))))));
|
|
2419
2420
|
}
|
|
2420
2421
|
get el() { return getElement(this); }
|
|
2421
2422
|
};
|
|
@@ -2439,220 +2440,501 @@ let CtaLink = class {
|
|
|
2439
2440
|
};
|
|
2440
2441
|
CtaLink.style = ctaLinkCss;
|
|
2441
2442
|
|
|
2442
|
-
|
|
2443
|
-
* A collection of shims that provided minimal
|
|
2444
|
-
* support of WeakMap and Map classes.
|
|
2445
|
-
*
|
|
2446
|
-
* These implementations are not meant to be used outside of
|
|
2447
|
-
* ResizeObserver modules as they cover only a limited range
|
|
2448
|
-
* of use cases.
|
|
2449
|
-
*/
|
|
2450
|
-
|
|
2451
|
-
/* eslint-disable require-jsdoc */
|
|
2452
|
-
const hasNativeCollections =
|
|
2453
|
-
typeof window.WeakMap === 'function' &&
|
|
2454
|
-
typeof window.Map === 'function';
|
|
2455
|
-
|
|
2456
|
-
const WeakMap = (() => {
|
|
2457
|
-
if (hasNativeCollections) {
|
|
2458
|
-
return window.WeakMap;
|
|
2459
|
-
}
|
|
2460
|
-
|
|
2461
|
-
function getIndex(arr, key) {
|
|
2462
|
-
let result = -1;
|
|
2463
|
-
|
|
2464
|
-
arr.some((entry, index) => {
|
|
2465
|
-
let matches = entry[0] === key;
|
|
2466
|
-
|
|
2467
|
-
if (matches) {
|
|
2468
|
-
result = index;
|
|
2469
|
-
}
|
|
2470
|
-
|
|
2471
|
-
return matches;
|
|
2472
|
-
});
|
|
2473
|
-
|
|
2474
|
-
return result;
|
|
2475
|
-
}
|
|
2476
|
-
|
|
2477
|
-
return class {
|
|
2478
|
-
constructor() {
|
|
2479
|
-
this.__entries__ = [];
|
|
2480
|
-
}
|
|
2481
|
-
|
|
2482
|
-
get(key) {
|
|
2483
|
-
let index = getIndex(this.__entries__, key);
|
|
2484
|
-
|
|
2485
|
-
return this.__entries__[index][1];
|
|
2486
|
-
}
|
|
2487
|
-
|
|
2488
|
-
set(key, value) {
|
|
2489
|
-
let index = getIndex(this.__entries__, key);
|
|
2490
|
-
|
|
2491
|
-
if (~index) {
|
|
2492
|
-
this.__entries__[index][1] = value;
|
|
2493
|
-
} else {
|
|
2494
|
-
this.__entries__.push([key, value]);
|
|
2495
|
-
}
|
|
2496
|
-
}
|
|
2497
|
-
|
|
2498
|
-
delete(key) {
|
|
2499
|
-
let entries = this.__entries__,
|
|
2500
|
-
index = getIndex(entries, key);
|
|
2501
|
-
|
|
2502
|
-
if (~index) {
|
|
2503
|
-
entries.splice(index, 1);
|
|
2504
|
-
}
|
|
2505
|
-
}
|
|
2506
|
-
|
|
2507
|
-
has(key) {
|
|
2508
|
-
return !!~getIndex(this.__entries__, key);
|
|
2509
|
-
}
|
|
2510
|
-
};
|
|
2511
|
-
})();
|
|
2512
|
-
|
|
2513
|
-
const Map = (() => {
|
|
2514
|
-
if (hasNativeCollections) {
|
|
2515
|
-
return window.Map;
|
|
2516
|
-
}
|
|
2517
|
-
|
|
2518
|
-
return class extends WeakMap {
|
|
2519
|
-
get size() {
|
|
2520
|
-
return this.__entries__.length;
|
|
2521
|
-
}
|
|
2522
|
-
|
|
2523
|
-
clear() {
|
|
2524
|
-
this.__entries__.splice(0, this.__entries__.length);
|
|
2525
|
-
}
|
|
2526
|
-
|
|
2527
|
-
entries() {
|
|
2528
|
-
return this.__entries__.slice();
|
|
2529
|
-
}
|
|
2530
|
-
|
|
2531
|
-
keys() {
|
|
2532
|
-
return this.__entries__.map(entry => entry[0]);
|
|
2533
|
-
}
|
|
2534
|
-
|
|
2535
|
-
values() {
|
|
2536
|
-
return this.__entries__.map(entry => entry[1]);
|
|
2537
|
-
}
|
|
2538
|
-
|
|
2539
|
-
forEach(callback, ctx = null) {
|
|
2540
|
-
for (const entry of this.__entries__) {
|
|
2541
|
-
callback.call(ctx, entry[1], entry[0]);
|
|
2542
|
-
}
|
|
2543
|
-
}
|
|
2544
|
-
};
|
|
2545
|
-
})();
|
|
2443
|
+
const hyDropdownCss = ":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-dropdown{display:inline-block;min-width:100%;position:relative}@media (min-width: 30rem){.hy-dropdown{min-width:48.3%}}@media (min-width: 75.0625rem){.hy-dropdown{min-width:23.03%}}.hy-dropdown label.hy-dropdown__button-label{font-size:1rem;line-height:20px;font-weight:700;display:block;font-family:var(--main-font-family);letter-spacing:-0.32px;margin-bottom:8px}.hy-dropdown--single .hy-dropdown__panel{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:330px;min-width:100%}.hy-dropdown__toggle{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;height:auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 0 0 16px;text-align:left;max-width:280px;width:100%}@media (min-width: 30rem){.hy-dropdown__toggle{font-size:1rem;line-height:24px;min-height:44px}}@media (min-width: 75.0625rem){.hy-dropdown__toggle{min-height:48px}}.hy-dropdown__toggle:hover{border-color:var(--brand-main-light);cursor:pointer}.hy-dropdown__toggle:focus{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}.hy-dropdown__toggle svg{pointer-events:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon{background-color:var(--brand-main-light);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-dropdown__toggle.is-open .hy-dropdown__icon::before{display:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon svg{fill:var(--grayscale-white)}.hy-dropdown__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 0 0 16px;position:relative;width:40px}.hy-dropdown__icon::before{border-left:0.5px solid var(--grayscale-medium-dark);content:\"\";display:inline-block;height:65%;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width: 30rem){.hy-dropdown__icon{height:44px;width:44px}}@media (min-width: 75.0625rem){.hy-dropdown__icon{height:48px;width:48px}}.hy-dropdown__icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-dropdown__icon svg{height:16px;width:16px}}.hy-dropdown__panel{background-color:var(--grayscale-white);-webkit-box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);list-style:none;margin:0;padding:6px;position:absolute;width:100%;z-index:11}.hy-dropdown__panel.is-hidden{display:none;visibility:hidden}.hy-dropdown__panel-item{position:relative}.hy-dropdown__panel-item:not(.is-last){margin-bottom:6px}.hy-dropdown__label{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 16px;text-align:left;width:100%}@media (min-width: 30rem){.hy-dropdown__label{font-size:1rem;line-height:24px}}.hy-dropdown__label-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none !important;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;visibility:hidden;width:40px}.hy-dropdown__checkbox{height:100%;margin:0;opacity:0;position:absolute;width:100%;z-index:10}.hy-dropdown__checkbox:checked+label{border-color:var(--grayscale-black);border-style:solid inset solid solid;border-width:2px;color:var(--grayscale-black);outline:0;text-indent:-1px}.hy-dropdown__checkbox:checked+label .hy-dropdown__label-icon{display:-webkit-inline-box !important;display:-ms-inline-flexbox !important;display:inline-flex !important;visibility:visible}.hy-dropdown__checkbox:hover{cursor:pointer}.hy-dropdown__checkbox:hover+label{border-color:var(--brand-main-light)}.hy-dropdown__checkbox:focus+label{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}";
|
|
2546
2444
|
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
|
|
2562
|
-
|
|
2445
|
+
let HyDropdown = class {
|
|
2446
|
+
constructor(hostRef) {
|
|
2447
|
+
registerInstance(this, hostRef);
|
|
2448
|
+
this.single = false;
|
|
2449
|
+
this.dropdownLabel = null;
|
|
2450
|
+
this.dropdownId = 'dropdownToggle';
|
|
2451
|
+
this.defaultLabel = 'All';
|
|
2452
|
+
this.defaultOption = null;
|
|
2453
|
+
this.isPanelOpen = false;
|
|
2454
|
+
this.isChecked = false;
|
|
2455
|
+
this.currentSingle = [{ id: 0, label: this.defaultLabel, value: 0 }];
|
|
2456
|
+
}
|
|
2457
|
+
async componentWillLoad() {
|
|
2458
|
+
this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);
|
|
2459
|
+
}
|
|
2460
|
+
componentWillUpdate() {
|
|
2461
|
+
const items = this.el.querySelectorAll('.hy-dropdown__checkbox');
|
|
2462
|
+
if (items) {
|
|
2463
|
+
if ([...items].some((item) => item.checked == true)) {
|
|
2464
|
+
this.isChecked = true;
|
|
2465
|
+
}
|
|
2466
|
+
else {
|
|
2467
|
+
this.isChecked = false;
|
|
2468
|
+
}
|
|
2469
|
+
}
|
|
2470
|
+
}
|
|
2471
|
+
watchPropHandler(newValue, oldValue) {
|
|
2472
|
+
if (!this.single)
|
|
2473
|
+
return;
|
|
2474
|
+
if (newValue !== oldValue) {
|
|
2475
|
+
const dropdownPanelCheckboxElements = this.el.getElementsByClassName('hy-dropdown__checkbox');
|
|
2476
|
+
Array.from(dropdownPanelCheckboxElements).filter((item) => {
|
|
2477
|
+
if (item.id == newValue) {
|
|
2478
|
+
item.checked = true;
|
|
2479
|
+
this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue);
|
|
2480
|
+
return;
|
|
2481
|
+
}
|
|
2482
|
+
return null;
|
|
2483
|
+
});
|
|
2484
|
+
}
|
|
2485
|
+
}
|
|
2486
|
+
handlePanelToggle() {
|
|
2487
|
+
this.isPanelOpen = !this.isPanelOpen;
|
|
2488
|
+
}
|
|
2489
|
+
handleClick(event) {
|
|
2490
|
+
const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`);
|
|
2491
|
+
const dropdownPanelElement = this.el.querySelector('.hy-dropdown__panel');
|
|
2492
|
+
const dropdownPanelCheckboxElements = this.el.querySelectorAll('.hy-dropdown__checkbox');
|
|
2493
|
+
const dropdownToggleButtonIconElement = this.el.querySelector('.hy-dropdown__icon');
|
|
2494
|
+
const { target } = event;
|
|
2495
|
+
const allowedElements = [
|
|
2496
|
+
dropdownToggleButtonElement,
|
|
2497
|
+
dropdownPanelElement,
|
|
2498
|
+
dropdownToggleButtonIconElement,
|
|
2499
|
+
...dropdownPanelCheckboxElements, // Spread ("copy") items to allowedElement array.
|
|
2500
|
+
];
|
|
2501
|
+
if (this.isPanelOpen && !allowedElements.includes(target)) {
|
|
2502
|
+
this.isPanelOpen = false;
|
|
2503
|
+
}
|
|
2504
|
+
event.stopPropagation();
|
|
2505
|
+
}
|
|
2506
|
+
handleSingleClick(event) {
|
|
2507
|
+
if (!this.single || !this.isPanelOpen)
|
|
2508
|
+
return;
|
|
2509
|
+
const dropdownPanelCheckboxElements = this.el.getElementsByClassName('hy-dropdown__checkbox');
|
|
2510
|
+
const allowedElements = [...dropdownPanelCheckboxElements];
|
|
2511
|
+
const { target } = event;
|
|
2512
|
+
if (!allowedElements.includes(target))
|
|
2513
|
+
return;
|
|
2514
|
+
Array.from(dropdownPanelCheckboxElements).filter((item) => {
|
|
2515
|
+
if (item.id == target.id) {
|
|
2516
|
+
if (!item.checked) {
|
|
2517
|
+
this.currentSingle = [{ id: null, label: this.defaultLabel, value: null }];
|
|
2518
|
+
return;
|
|
2519
|
+
}
|
|
2520
|
+
this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id);
|
|
2521
|
+
return;
|
|
2522
|
+
}
|
|
2523
|
+
if (item.id !== target.id && item.checked) {
|
|
2524
|
+
item.checked = false;
|
|
2525
|
+
return;
|
|
2526
|
+
}
|
|
2527
|
+
return null;
|
|
2528
|
+
});
|
|
2529
|
+
event.stopPropagation();
|
|
2530
|
+
}
|
|
2531
|
+
render() {
|
|
2532
|
+
const { label: currentLabel, id: currentId, value: currentValue } = this.currentSingle[0];
|
|
2533
|
+
const classAttributes = ['hy-dropdown', this.single ? 'hy-dropdown--single' : ''].join(' ');
|
|
2534
|
+
if (this.single) {
|
|
2535
|
+
return (h(Host, { class: classAttributes }, this.dropdownLabel && (h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? 'is-open' : ''}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-haspopup": "true", "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": `${!this.isPanelOpen ? 'Open' : 'Close'} dropdown`, "data-current-id": currentId, "data-current-value": currentValue, value: currentId, type: "button" }, currentLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: 'hy-icon-caret-down', size: 14, "aria-hidden": "true" })), h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? 'true' : 'false', "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
|
|
2536
|
+
}
|
|
2537
|
+
else {
|
|
2538
|
+
return (h(Host, { class: classAttributes }, h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? 'is-open' : ''}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-haspopup": "true", "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": `${!this.isPanelOpen ? 'Open' : 'Close'} dropdown`, type: "button" }, this.dropdownLabel && this.dropdownLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: 'hy-icon-caret-down', size: 14, "aria-hidden": "true" })), h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? 'true' : 'false', "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
|
|
2539
|
+
}
|
|
2540
|
+
}
|
|
2541
|
+
get el() { return getElement(this); }
|
|
2542
|
+
static get watchers() { return {
|
|
2543
|
+
"defaultOption": ["watchPropHandler"]
|
|
2544
|
+
}; }
|
|
2545
|
+
};
|
|
2546
|
+
HyDropdown.style = hyDropdownCss;
|
|
2563
2547
|
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
window.requestAnimationFrame &&
|
|
2573
|
-
typeof window.requestAnimationFrame === 'function'
|
|
2574
|
-
) {
|
|
2575
|
-
return window.requestAnimationFrame;
|
|
2576
|
-
}
|
|
2577
|
-
|
|
2578
|
-
return callback => {
|
|
2579
|
-
return setTimeout(() => callback(Date.now()), 1000 / 60);
|
|
2580
|
-
};
|
|
2581
|
-
})();
|
|
2548
|
+
let HyDropdownPanel = class {
|
|
2549
|
+
constructor(hostRef) {
|
|
2550
|
+
registerInstance(this, hostRef);
|
|
2551
|
+
}
|
|
2552
|
+
render() {
|
|
2553
|
+
return (h("ul", { id: "dropdownPanel", class: `hy-dropdown__panel ${this.isHidden ? 'is-hidden' : ''}`, "aria-hidden": `${this.isHidden || false}`, role: "region", "aria-labelledby": "dropdownToggle" }, h("slot", null)));
|
|
2554
|
+
}
|
|
2555
|
+
};
|
|
2582
2556
|
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2557
|
+
let HyDropdownPanelItem = class {
|
|
2558
|
+
constructor(hostRef) {
|
|
2559
|
+
registerInstance(this, hostRef);
|
|
2560
|
+
this.isLast = false;
|
|
2561
|
+
}
|
|
2562
|
+
render() {
|
|
2563
|
+
return (h("li", { class: `hy-dropdown__panel-item ${this.isLast ? 'is-last' : ''}` }, h("input", { type: "checkbox", class: "hy-dropdown__checkbox", id: `${this.dropdownItemId}`, value: `${this.dropdownItemValue}` }), h("label", { class: "hy-dropdown__label", htmlFor: `${this.dropdownItemId}` }, this.dropdownItemLabel, h("hy-icon", { class: "hy-dropdown__label-icon", icon: 'hy-icon-done', size: 14, "aria-hidden": "true" }))));
|
|
2564
|
+
}
|
|
2565
|
+
};
|
|
2566
|
+
|
|
2567
|
+
const hyFilterGroupCss = ":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-filter-group{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:16px}.hy-filter-group__listing{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:0;padding:0}.hy-filter-group__label{font-size:0.75rem;line-height:16px;border-radius:2px;color:var(--grayscale-dark);font-family:var(--main-font-family);font-weight:normal;letter-spacing:-0.2px;margin:8px 4px 8px 0;padding:4px 0}@media (min-width: 30rem){.hy-filter-group__label{font-size:0.875rem;line-height:16px;letter-spacing:-0.3px;padding:6px 0}}.hy-filter-group__button{font-size:0.75rem;line-height:16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-background-box);border-radius:2px;border:0;color:var(--grayscale-dark);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:normal;letter-spacing:-0.2px;margin:8px 4px;padding:4px 6px}@media (min-width: 30rem){.hy-filter-group__button{font-size:0.875rem;line-height:16px;letter-spacing:-0.3px;padding:6px 8px}}.hy-filter-group__button:hover{cursor:pointer}.hy-filter-group__button-icon{margin-left:6px}@media (min-width: 30rem){.hy-filter-group__button-icon{margin-left:8px}}.hy-filter-group__button-icon svg{pointer-events:none}@media (min-width: 30rem){.hy-filter-group__button-icon svg{height:12px;width:12px}}.hy-filter-group__divider{font-size:0.75rem;line-height:16px;color:var(--grayscale-dark);font-family:var(--main-font-family);margin:4px 6px}@media (min-width: 30rem){.hy-filter-group__divider{font-size:0.875rem;line-height:16px;letter-spacing:-0.3px}}";
|
|
2568
|
+
|
|
2569
|
+
let HyFilterGroup = class {
|
|
2570
|
+
constructor(hostRef) {
|
|
2571
|
+
registerInstance(this, hostRef);
|
|
2572
|
+
}
|
|
2573
|
+
arrayDataWatcher(newValue) {
|
|
2574
|
+
if (typeof newValue === 'string') {
|
|
2575
|
+
this._filterGroupFilters = JSON.parse(newValue);
|
|
2576
|
+
}
|
|
2577
|
+
else {
|
|
2578
|
+
this._filterGroupFilters = newValue;
|
|
2579
|
+
}
|
|
2580
|
+
}
|
|
2581
|
+
componentWillLoad() {
|
|
2582
|
+
this.arrayDataWatcher(this.filterGroupFilters);
|
|
2583
|
+
}
|
|
2584
|
+
// TODO: Finish handleFilterDeselect functionality with real data.
|
|
2585
|
+
handleFilterDeselect(id) {
|
|
2586
|
+
console.log(id);
|
|
2587
|
+
}
|
|
2588
|
+
render() {
|
|
2589
|
+
return (h(Host, { class: "hy-filter-group" }, h("ul", { class: "hy-filter-group__listing" }, h("li", null, h("h3", { class: "hy-filter-group__label" }, this.filterGroupLabel)), this._filterGroupFilters.map(({ id, label }) => (h("hy-filter-group-item", { "filter-group-item-id": id, "filter-group-item-label": label, onClick: () => this.handleFilterDeselect(id) }))))));
|
|
2590
|
+
}
|
|
2591
|
+
static get watchers() { return {
|
|
2592
|
+
"filterGroupFilters": ["arrayDataWatcher"]
|
|
2593
|
+
}; }
|
|
2594
|
+
};
|
|
2595
|
+
HyFilterGroup.style = hyFilterGroupCss;
|
|
2596
|
+
|
|
2597
|
+
let HyFilterGroupItem = class {
|
|
2598
|
+
constructor(hostRef) {
|
|
2599
|
+
registerInstance(this, hostRef);
|
|
2600
|
+
}
|
|
2601
|
+
render() {
|
|
2602
|
+
return (h("li", { class: "hy-filter-group__filter" }, h("button", { type: "button", class: "hy-filter-group__button", "aria-label": `Deselect ${this.filterGroupItemLabel}` }, this.filterGroupItemLabel, h("hy-icon", { class: "hy-filter-group__button-icon", icon: 'hy-icon-remove', size: 10, "aria-hidden": "true", fill: ColorVariant.grey_dark })), h("slot", null)));
|
|
2603
|
+
}
|
|
2604
|
+
};
|
|
2605
|
+
|
|
2606
|
+
const hyFilterListTypeCss = ":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-filter__list-type{display:none}@media (min-width: 60rem){.hy-filter__list-type{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--main-font-family)}}@media (min-width: 60rem){.hy-filter__list-type span{font-size:0.875rem;line-height:18px;font-weight:600;color:var(--grayscale-black);letter-spacing:-0.5px;text-align:right}}@media (min-width: 1601px){.hy-filter__list-type span{font-size:1rem;line-height:20px}}.hy-filter__list-type__list{background:var(--grayscale-background-box);border:none;margin:0 8px;padding:10px}.hy-filter__list-type__list svg{background-color:var(--grayscale-background-box);fill:var(--brand-main-light)}.hy-filter__list-type__list.is-active{background:white;border:black 1px solid}.hy-filter__list-type__list.is-active svg{background-color:var(--grayscale-white);fill:var(--grayscale-black)}.hy-filter__list-type__list:hover{cursor:pointer}.hy-filter__list-type__grid{background:var(--grayscale-background-box);border:none;padding:10px}.hy-filter__list-type__grid svg{background-color:var(--grayscale-background-box);fill:var(--brand-main-light)}.hy-filter__list-type__grid.is-active{background:white;border:black 1px solid}.hy-filter__list-type__grid.is-active svg{background-color:var(--grayscale-white);fill:var(--grayscale-black)}.hy-filter__list-type__grid:hover{cursor:pointer}";
|
|
2607
|
+
|
|
2608
|
+
let HyFilterListType = class {
|
|
2609
|
+
constructor(hostRef) {
|
|
2610
|
+
registerInstance(this, hostRef);
|
|
2611
|
+
}
|
|
2612
|
+
render() {
|
|
2613
|
+
return (h("div", { class: "hy-filter__list-type" }, h("span", null, this.filterLabel), h("button", { type: "button", class: {
|
|
2614
|
+
'hy-filter-item': true,
|
|
2615
|
+
'hy-filter__list-type__list': true,
|
|
2616
|
+
'is-active': this.filterValue == ListStyleVariants.list,
|
|
2617
|
+
}, "aria-label": `${this.filterLabel}--list` }, h("hy-icon", { class: "hy-filter-group__button-icon", icon: 'hy-icon-list-style-list', size: 16, "aria-hidden": "true" })), h("button", { type: "button", class: {
|
|
2618
|
+
'hy-filter-item': true,
|
|
2619
|
+
'hy-filter__list-type__grid': true,
|
|
2620
|
+
'is-active': this.filterValue == ListStyleVariants.grid,
|
|
2621
|
+
}, "aria-label": `${this.filterLabel}--grid` }, h("hy-icon", { class: "hy-filter-group__button-icon", icon: 'hy-icon-list-style-grid', size: 16, "aria-hidden": "true" }))));
|
|
2622
|
+
}
|
|
2623
|
+
};
|
|
2624
|
+
HyFilterListType.style = hyFilterListTypeCss;
|
|
2625
|
+
|
|
2626
|
+
const hyFilterVisibilityToolCss = ":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-filter-visibility-tool{font-size:0.875rem;line-height:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:0;color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.35px;padding:0;margin-right:1rem}@media (min-width: 30rem){.hy-filter-visibility-tool{font-size:1rem;line-height:20px;letter-spacing:-0.5px}}.hy-filter-visibility-tool:hover{color:var(--brand-main);cursor:pointer}.hy-filter-visibility-tool:hover svg{fill:var(--brand-main)}.hy-filter-visibility-tool:focus{color:var(--brand-main);outline-offset:1px;outline:2px solid var(--brand-main)}.hy-filter-visibility-tool:focus svg{fill:var(--brand-main)}.hy-filter-visibility-tool__icon{-ms-flex-negative:0;flex-shrink:0;margin-right:6px}.hy-filter-visibility-tool__icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-filter-visibility-tool__icon svg{height:16px;width:16px}}";
|
|
2627
|
+
|
|
2628
|
+
let HyFilterVisibilityTool = class {
|
|
2629
|
+
constructor(hostRef) {
|
|
2630
|
+
registerInstance(this, hostRef);
|
|
2631
|
+
}
|
|
2632
|
+
render() {
|
|
2633
|
+
switch (this.filterVisibilityToolType) {
|
|
2634
|
+
case 'toggle':
|
|
2635
|
+
return (h(Host, null, h("hy-filter-visibility-tool-toggle", null)));
|
|
2636
|
+
case 'reset':
|
|
2637
|
+
return (h(Host, null, h("hy-filter-visibility-tool-reset", null)));
|
|
2638
|
+
}
|
|
2639
|
+
}
|
|
2640
|
+
};
|
|
2641
|
+
HyFilterVisibilityTool.style = hyFilterVisibilityToolCss;
|
|
2642
|
+
|
|
2643
|
+
let HyFilterVisibilityToolReset = class {
|
|
2644
|
+
constructor(hostRef) {
|
|
2645
|
+
registerInstance(this, hostRef);
|
|
2646
|
+
}
|
|
2647
|
+
render() {
|
|
2648
|
+
return (h("button", { class: "hy-filter-visibility-tool hy-filter-visibility-tool--reset", type: "button" }, h("hy-icon", { class: "hy-filter-visibility-tool__icon", icon: 'hy-icon-remove', size: 14, "aria-hidden": "true" }), "Reset filters"));
|
|
2649
|
+
}
|
|
2650
|
+
};
|
|
2651
|
+
|
|
2652
|
+
let HyFilterVisibilityToolToggle = class {
|
|
2653
|
+
constructor(hostRef) {
|
|
2654
|
+
registerInstance(this, hostRef);
|
|
2655
|
+
}
|
|
2656
|
+
render() {
|
|
2657
|
+
return (h(Host, null, h("button", { class: "hy-filter-visibility-tool hy-filter-visibility-tool--show-more", type: "button" }, h("hy-icon", { class: "hy-filter-visibility-tool__icon", icon: 'hy-icon-plus', size: 12, "aria-hidden": "true" }), "Show more filters"), h("button", { class: "hy-filter-visibility-tool hy-filter-visibility-tool--show-less", type: "button" }, h("hy-icon", { class: "hy-filter-visibility-tool__icon", icon: 'hy-icon-minus', size: 12, "aria-hidden": "true" }), "Show less filters")));
|
|
2658
|
+
}
|
|
2659
|
+
};
|
|
2660
|
+
|
|
2661
|
+
const hyFooterCss = ":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-footer{display:block}";
|
|
2662
|
+
|
|
2663
|
+
let HyFooter = class {
|
|
2664
|
+
constructor(hostRef) {
|
|
2665
|
+
registerInstance(this, hostRef);
|
|
2666
|
+
}
|
|
2667
|
+
render() {
|
|
2668
|
+
const classAttributes = ['hy-footer'];
|
|
2669
|
+
return (h("footer", { class: classAttributes.join(' ') }, h("slot", null)));
|
|
2670
|
+
}
|
|
2671
|
+
};
|
|
2672
|
+
HyFooter.style = hyFooterCss;
|
|
2673
|
+
|
|
2674
|
+
const hyFooterActionCss = ":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-footer-action{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-top:1px solid var(--grayscale-medium-dark);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:8px 16px 16px 16px;place-content:center space-between;width:100%}@media (min-width: 30rem){.hy-footer-action{margin:0 auto;max-width:120.0625rem;padding:16px 24px 16px 24px}}@media (min-width: 60rem){.hy-footer-action{padding:16px 32px 24px 32px}}.hy-footer-action__updated-text{font-size:0.875rem;line-height:24px;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:0}@media (min-width: 30rem){.hy-footer-action__updated-text{font-size:1rem;line-height:24px}}.hy-footer-action__scroll-up{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-footer-action__scroll-up .hy-footer-action__up-button{background-color:var(--brand-main-light);border:0;-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.05);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.05);padding:8px}.hy-footer-action__scroll-up .hy-footer-action__up-button:hover{cursor:pointer}.hy-footer-action__scroll-up label{font-size:1rem;line-height:24px;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:0;margin-right:8px}.hy-footer-action__scroll-up svg{fill:var(--grayscale-white)}.hy-footer-action__scroll-up:hover label{text-decoration:underline}.hy-footer-action__scroll-up:hover .hy-footer-action__up-button{background-color:var(--brand-main)}";
|
|
2675
|
+
|
|
2676
|
+
let HyFooterAction = class {
|
|
2677
|
+
constructor(hostRef) {
|
|
2678
|
+
registerInstance(this, hostRef);
|
|
2679
|
+
}
|
|
2680
|
+
scrollTop() {
|
|
2681
|
+
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
2682
|
+
}
|
|
2683
|
+
render() {
|
|
2684
|
+
const classAttributes = ['hy-footer-action'].join(' ');
|
|
2685
|
+
return (h(Host, { class: classAttributes }, h("span", { class: 'hy-footer-action__updated-text' }, this.updatedText), this.upButtonLabel && (h("span", { class: "hy-footer-action__scroll-up" }, h("label", { htmlFor: "scroll-up" }, this.upButtonLabel), h("button", { name: "scroll-up", onClick: () => this.scrollTop(), class: "hy-footer-action__up-button", type: "button" }, h("hy-icon", { class: 'hy-footer-action__up-icon', icon: 'hy-icon-arrow-up', size: 26 }))))));
|
|
2686
|
+
}
|
|
2687
|
+
};
|
|
2688
|
+
HyFooterAction.style = hyFooterActionCss;
|
|
2689
|
+
|
|
2690
|
+
const hyFooterBaseCss = ":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-footer-base--content-container{background-color:var(--grayscale-black);display:block;max-width:100%}.hy-footer-base{background-color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;max-height:100%;padding:32px 16px 32px 16px;place-content:center space-between;position:relative;width:100%}@media (min-width: 30rem){.hy-footer-base{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;margin:0 auto;max-width:120.0625rem;padding:32px 24px 32px 24px}}@media (min-width: 60rem){.hy-footer-base{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:36px 32px 36px 32px}}@media (min-width: 75.0625rem){.hy-footer-base{padding:40px 32px 40px 32px}}.hy-footer-base__left{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:24px}@media (min-width: 30rem){.hy-footer-base__left{-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}}@media (min-width: 60rem){.hy-footer-base__left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;width:31.11%}}.hy-footer-base__logo{font-size:1.125rem;line-height:16px;font-family:var(--main-font-family);font-weight:bold;letter-spacing:-0.9px}.hy-footer-base__logo .hy-site-logo__label{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}.hy-footer-base__content{font-size:1rem;line-height:24px;color:var(--grayscale-white);font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.1px;margin:32px 0;white-space:pre-line}@media (min-width: 30rem){.hy-footer-base__content{margin:32px 0}}@media (min-width: 60rem){.hy-footer-base__content{margin:42px 0}}@media (min-width: 75.0625rem){.hy-footer-base__content{margin:54px 0}}.hy-footer-base__some{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:64px;z-index:2}@media (min-width: 60rem){.hy-footer-base__some{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:0}}@media (min-width: 75.0625rem){.hy-footer-base__some{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-footer-base__some__label{font-size:1rem;line-height:24px;color:var(--grayscale-white);font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.1px;margin-bottom:8px;margin-right:24px}@media (min-width: 60rem){.hy-footer-base__some__label{margin-bottom:8px}}.hy-footer-base__some__items{-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}.hy-footer-base__some__item{margin-right:24px}.hy-footer-base__some__item :last-child(){margin-right:0}.hy-footer-base__some__item:hover{color:var(--grayscale-medium) !important}.hy-footer-base__some__item:hover svg{fill:var(--grayscale-medium)}.hy-footer-base__some svg{fill:var(--grayscale-white)}.hy-footer-base__right{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-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;max-height:100%;width:100%}@media (min-width: 30rem){.hy-footer-base__right{margin-bottom:32px;max-height:300px;width:calc(100% + 24px)}}@media (min-width: 60rem){.hy-footer-base__right{max-height:350px;width:65.56%}}.hy-footer-base__copy{font-size:1rem;line-height:24px;bottom:40px;color:var(--grayscale-white);display:inline-block;font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.1px;position:absolute;right:50%;text-align:center;-webkit-transform:translateX(50%);transform:translateX(50%);width:100%}@media (min-width: 30rem){.hy-footer-base__copy{bottom:32px;right:50%;-webkit-transform:translateX(50%);transform:translateX(50%)}}@media (min-width: 60rem){.hy-footer-base__copy{bottom:36px;right:32px;text-align:right;-webkit-transform:none;transform:none}}@media (min-width: 75.0625rem){.hy-footer-base__copy{bottom:40px}}";
|
|
2691
|
+
|
|
2692
|
+
let HyFooterBase = class {
|
|
2693
|
+
constructor(hostRef) {
|
|
2694
|
+
registerInstance(this, hostRef);
|
|
2695
|
+
/**
|
|
2696
|
+
* Link item color
|
|
2697
|
+
*/
|
|
2698
|
+
this.color = FooterLinkItemColor.white;
|
|
2699
|
+
/**
|
|
2700
|
+
* Logo size
|
|
2701
|
+
*/
|
|
2702
|
+
this.size = SiteLogoSize.big;
|
|
2703
|
+
}
|
|
2704
|
+
async componentWillLoad() {
|
|
2705
|
+
this._dataFooterBaseLinks = await jsonParserWorker(this.dataFooterBaseLinks);
|
|
2706
|
+
this._dataFooterBaseSome = await jsonParserWorker(this.dataFooterBaseSome);
|
|
2707
|
+
}
|
|
2708
|
+
render() {
|
|
2709
|
+
const logoColor = ColorVariant.white;
|
|
2710
|
+
const classAttributes = ['hy-footer-base--content-container'].join(' ');
|
|
2711
|
+
const links = this._dataFooterBaseLinks;
|
|
2712
|
+
const some = this._dataFooterBaseSome;
|
|
2713
|
+
return (h(Host, { class: classAttributes }, h("div", { class: "hy-footer-base" }, h("div", { class: "hy-footer-base__left" }, h("div", { class: "hy-footer-base__logo" }, h("hy-site-logo", { type: FooterVariant.footer, size: 56, color: logoColor, url: this.logoUrl, label: this.logoLabel })), h("div", { class: "hy-footer-base__content" }, h("slot", { name: "content" })), h("div", { class: "hy-footer-base__some" }, h("span", { class: "hy-footer-base__some__label" }, this.someLabel), h("div", { class: "hy-footer-base__some__items" }, some &&
|
|
2714
|
+
some.map((s) => {
|
|
2715
|
+
return (h("a", { "aria-label": s.label, href: s.url, class: `hy-footer-base__some__item`, title: s.label, target: "_blank" }, h("hy-icon", { icon: `hy-icon-some-${s.type}`, size: 36 })));
|
|
2716
|
+
})))), h("div", { class: "hy-footer-base__right" }, links &&
|
|
2717
|
+
links.map((link) => {
|
|
2718
|
+
return (h("hy-footer-link-item", { label: link.label, url: link.url, color: FooterLinkItemColor.white }));
|
|
2719
|
+
}), this.copyrightText && h("span", { class: "hy-footer-base__copy" }, this.copyrightText)))));
|
|
2720
|
+
}
|
|
2721
|
+
};
|
|
2722
|
+
HyFooterBase.style = hyFooterBaseCss;
|
|
2723
|
+
|
|
2724
|
+
/**
|
|
2725
|
+
* A collection of shims that provided minimal
|
|
2726
|
+
* support of WeakMap and Map classes.
|
|
2589
2727
|
*
|
|
2590
|
-
*
|
|
2591
|
-
*
|
|
2592
|
-
*
|
|
2728
|
+
* These implementations are not meant to be used outside of
|
|
2729
|
+
* ResizeObserver modules as they cover only a limited range
|
|
2730
|
+
* of use cases.
|
|
2593
2731
|
*/
|
|
2594
|
-
function debounce(callback, delay = 0) {
|
|
2595
|
-
let timeoutID = false;
|
|
2596
|
-
|
|
2597
|
-
return function (...args) {
|
|
2598
|
-
if (timeoutID !== false) {
|
|
2599
|
-
clearTimeout(timeoutID);
|
|
2600
|
-
}
|
|
2601
2732
|
|
|
2602
|
-
|
|
2603
|
-
|
|
2733
|
+
/* eslint-disable require-jsdoc */
|
|
2734
|
+
const hasNativeCollections =
|
|
2735
|
+
typeof window.WeakMap === 'function' &&
|
|
2736
|
+
typeof window.Map === 'function';
|
|
2604
2737
|
|
|
2605
|
-
|
|
2606
|
-
|
|
2738
|
+
const WeakMap = (() => {
|
|
2739
|
+
if (hasNativeCollections) {
|
|
2740
|
+
return window.WeakMap;
|
|
2741
|
+
}
|
|
2607
2742
|
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
};
|
|
2611
|
-
}
|
|
2743
|
+
function getIndex(arr, key) {
|
|
2744
|
+
let result = -1;
|
|
2612
2745
|
|
|
2613
|
-
|
|
2614
|
-
|
|
2615
|
-
* It's meant to decide when and for how long it's necessary to run updates by listening to the windows
|
|
2616
|
-
* "resize" event along with a tracking of DOM mutations (nodes removal, changes of attributes, etc.).
|
|
2617
|
-
*
|
|
2618
|
-
* Transitions and animations are handled by running a repeatable update cycle either until the dimensions
|
|
2619
|
-
* of observed elements are changing or the timeout is reached (default timeout is 50 milliseconds).
|
|
2620
|
-
* Timeout value can be manually increased if transitions have a delay.
|
|
2621
|
-
*
|
|
2622
|
-
* Continuous update cycle will be used automatically in case if MutationObserver is not supported.
|
|
2623
|
-
*/
|
|
2624
|
-
class ResizeObserverController {
|
|
2625
|
-
/**
|
|
2626
|
-
* Creates a new instance of ResizeObserverController.
|
|
2627
|
-
*
|
|
2628
|
-
* @param {Number} [idleTimeout = 0] - Idle timeout value.
|
|
2629
|
-
* @param {Boolean} [continuousUpdates = false] - Whether to use a continuous update cycle.
|
|
2630
|
-
*/
|
|
2631
|
-
constructor(idleTimeout = 50, continuousUpdates = false) {
|
|
2632
|
-
this._idleTimeout = idleTimeout;
|
|
2633
|
-
this._isCycleContinuous = continuousUpdates;
|
|
2746
|
+
arr.some((entry, index) => {
|
|
2747
|
+
let matches = entry[0] === key;
|
|
2634
2748
|
|
|
2635
|
-
|
|
2749
|
+
if (matches) {
|
|
2750
|
+
result = index;
|
|
2751
|
+
}
|
|
2636
2752
|
|
|
2637
|
-
|
|
2638
|
-
|
|
2753
|
+
return matches;
|
|
2754
|
+
});
|
|
2639
2755
|
|
|
2640
|
-
|
|
2641
|
-
|
|
2756
|
+
return result;
|
|
2757
|
+
}
|
|
2642
2758
|
|
|
2643
|
-
|
|
2644
|
-
|
|
2759
|
+
return class {
|
|
2760
|
+
constructor() {
|
|
2761
|
+
this.__entries__ = [];
|
|
2762
|
+
}
|
|
2645
2763
|
|
|
2646
|
-
|
|
2647
|
-
|
|
2764
|
+
get(key) {
|
|
2765
|
+
let index = getIndex(this.__entries__, key);
|
|
2648
2766
|
|
|
2649
|
-
|
|
2650
|
-
|
|
2767
|
+
return this.__entries__[index][1];
|
|
2768
|
+
}
|
|
2651
2769
|
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
|
|
2770
|
+
set(key, value) {
|
|
2771
|
+
let index = getIndex(this.__entries__, key);
|
|
2772
|
+
|
|
2773
|
+
if (~index) {
|
|
2774
|
+
this.__entries__[index][1] = value;
|
|
2775
|
+
} else {
|
|
2776
|
+
this.__entries__.push([key, value]);
|
|
2777
|
+
}
|
|
2778
|
+
}
|
|
2779
|
+
|
|
2780
|
+
delete(key) {
|
|
2781
|
+
let entries = this.__entries__,
|
|
2782
|
+
index = getIndex(entries, key);
|
|
2783
|
+
|
|
2784
|
+
if (~index) {
|
|
2785
|
+
entries.splice(index, 1);
|
|
2786
|
+
}
|
|
2787
|
+
}
|
|
2788
|
+
|
|
2789
|
+
has(key) {
|
|
2790
|
+
return !!~getIndex(this.__entries__, key);
|
|
2791
|
+
}
|
|
2792
|
+
};
|
|
2793
|
+
})();
|
|
2794
|
+
|
|
2795
|
+
const Map = (() => {
|
|
2796
|
+
if (hasNativeCollections) {
|
|
2797
|
+
return window.Map;
|
|
2798
|
+
}
|
|
2799
|
+
|
|
2800
|
+
return class extends WeakMap {
|
|
2801
|
+
get size() {
|
|
2802
|
+
return this.__entries__.length;
|
|
2803
|
+
}
|
|
2804
|
+
|
|
2805
|
+
clear() {
|
|
2806
|
+
this.__entries__.splice(0, this.__entries__.length);
|
|
2807
|
+
}
|
|
2808
|
+
|
|
2809
|
+
entries() {
|
|
2810
|
+
return this.__entries__.slice();
|
|
2811
|
+
}
|
|
2812
|
+
|
|
2813
|
+
keys() {
|
|
2814
|
+
return this.__entries__.map(entry => entry[0]);
|
|
2815
|
+
}
|
|
2816
|
+
|
|
2817
|
+
values() {
|
|
2818
|
+
return this.__entries__.map(entry => entry[1]);
|
|
2819
|
+
}
|
|
2820
|
+
|
|
2821
|
+
forEach(callback, ctx = null) {
|
|
2822
|
+
for (const entry of this.__entries__) {
|
|
2823
|
+
callback.call(ctx, entry[1], entry[0]);
|
|
2824
|
+
}
|
|
2825
|
+
}
|
|
2826
|
+
};
|
|
2827
|
+
})();
|
|
2828
|
+
|
|
2829
|
+
/**
|
|
2830
|
+
* A shim for performance.now method which falls back
|
|
2831
|
+
* to Date.now if the first one is not supported.
|
|
2832
|
+
*
|
|
2833
|
+
* @returns {Timestamp}
|
|
2834
|
+
*/
|
|
2835
|
+
const now = (() => {
|
|
2836
|
+
if (
|
|
2837
|
+
window.performance &&
|
|
2838
|
+
typeof window.performance.now === 'function'
|
|
2839
|
+
) {
|
|
2840
|
+
return () => window.performance.now();
|
|
2841
|
+
}
|
|
2842
|
+
|
|
2843
|
+
return () => Date.now();
|
|
2844
|
+
})();
|
|
2845
|
+
|
|
2846
|
+
/**
|
|
2847
|
+
* A shim for requestAnimationFrame which falls back
|
|
2848
|
+
* to setTimeout if the first one is not supported.
|
|
2849
|
+
*
|
|
2850
|
+
* @returns {Number} Requests' identifier.
|
|
2851
|
+
*/
|
|
2852
|
+
const requestAnimFrame = (() => {
|
|
2853
|
+
if (
|
|
2854
|
+
window.requestAnimationFrame &&
|
|
2855
|
+
typeof window.requestAnimationFrame === 'function'
|
|
2856
|
+
) {
|
|
2857
|
+
return window.requestAnimationFrame;
|
|
2858
|
+
}
|
|
2859
|
+
|
|
2860
|
+
return callback => {
|
|
2861
|
+
return setTimeout(() => callback(Date.now()), 1000 / 60);
|
|
2862
|
+
};
|
|
2863
|
+
})();
|
|
2864
|
+
|
|
2865
|
+
const mutationsSupported = typeof window.MutationObserver === 'function';
|
|
2866
|
+
|
|
2867
|
+
/**
|
|
2868
|
+
* Creates a wrapper function which ensures that
|
|
2869
|
+
* provided callback will be invoked only once
|
|
2870
|
+
* during the specified delay.
|
|
2871
|
+
*
|
|
2872
|
+
* @param {Function} callback - Function to be invoked.
|
|
2873
|
+
* @param {Number} [delay = 0] - Delay after which to invoke callback.
|
|
2874
|
+
* @returns {Function}
|
|
2875
|
+
*/
|
|
2876
|
+
function debounce(callback, delay = 0) {
|
|
2877
|
+
let timeoutID = false;
|
|
2878
|
+
|
|
2879
|
+
return function (...args) {
|
|
2880
|
+
if (timeoutID !== false) {
|
|
2881
|
+
clearTimeout(timeoutID);
|
|
2882
|
+
}
|
|
2883
|
+
|
|
2884
|
+
timeoutID = setTimeout(() => {
|
|
2885
|
+
timeoutID = false;
|
|
2886
|
+
|
|
2887
|
+
/* eslint-disable no-invalid-this */
|
|
2888
|
+
callback.apply(this, args);
|
|
2889
|
+
|
|
2890
|
+
/* eslint-enable no-invalid-this */
|
|
2891
|
+
}, delay);
|
|
2892
|
+
};
|
|
2893
|
+
}
|
|
2894
|
+
|
|
2895
|
+
/**
|
|
2896
|
+
* Controller class which handles updates of ResizeObserver instances.
|
|
2897
|
+
* It's meant to decide when and for how long it's necessary to run updates by listening to the windows
|
|
2898
|
+
* "resize" event along with a tracking of DOM mutations (nodes removal, changes of attributes, etc.).
|
|
2899
|
+
*
|
|
2900
|
+
* Transitions and animations are handled by running a repeatable update cycle either until the dimensions
|
|
2901
|
+
* of observed elements are changing or the timeout is reached (default timeout is 50 milliseconds).
|
|
2902
|
+
* Timeout value can be manually increased if transitions have a delay.
|
|
2903
|
+
*
|
|
2904
|
+
* Continuous update cycle will be used automatically in case if MutationObserver is not supported.
|
|
2905
|
+
*/
|
|
2906
|
+
class ResizeObserverController {
|
|
2907
|
+
/**
|
|
2908
|
+
* Creates a new instance of ResizeObserverController.
|
|
2909
|
+
*
|
|
2910
|
+
* @param {Number} [idleTimeout = 0] - Idle timeout value.
|
|
2911
|
+
* @param {Boolean} [continuousUpdates = false] - Whether to use a continuous update cycle.
|
|
2912
|
+
*/
|
|
2913
|
+
constructor(idleTimeout = 50, continuousUpdates = false) {
|
|
2914
|
+
this._idleTimeout = idleTimeout;
|
|
2915
|
+
this._isCycleContinuous = continuousUpdates;
|
|
2916
|
+
|
|
2917
|
+
this._cycleStartTime = 0;
|
|
2918
|
+
|
|
2919
|
+
// Indicates whether the update cycle is currently running.
|
|
2920
|
+
this._isCycleActive = false;
|
|
2921
|
+
|
|
2922
|
+
// Indicates whether the update of observers is scheduled.
|
|
2923
|
+
this._isUpdateScheduled = false;
|
|
2924
|
+
|
|
2925
|
+
// Indicates whether DOM listeners have been added.
|
|
2926
|
+
this._listenersEnabled = false;
|
|
2927
|
+
|
|
2928
|
+
// Keeps reference to the instance of MutationObserver.
|
|
2929
|
+
this._mutationsObserver = null;
|
|
2930
|
+
|
|
2931
|
+
// A list of connected observers.
|
|
2932
|
+
this._observers = [];
|
|
2933
|
+
|
|
2934
|
+
// Fix value of "this" binding for the following methods.
|
|
2935
|
+
this.runUpdates = this.runUpdates.bind(this);
|
|
2936
|
+
this._resolveScheduled = this._resolveScheduled.bind(this);
|
|
2937
|
+
this._onMutation = this._onMutation.bind(this);
|
|
2656
2938
|
|
|
2657
2939
|
// Function that will be invoked to re-run the
|
|
2658
2940
|
// update cycle if continuous cycles are enabled.
|
|
@@ -3297,725 +3579,111 @@ class ResizeObserver$3 {
|
|
|
3297
3579
|
}
|
|
3298
3580
|
});
|
|
3299
3581
|
}
|
|
3300
|
-
}
|
|
3301
|
-
|
|
3302
|
-
// Controller which will be assigned to all instances of ResizeObserver.
|
|
3303
|
-
const controller = new ResizeObserverController();
|
|
3304
|
-
|
|
3305
|
-
// Registry of internal observers.
|
|
3306
|
-
const observers = new WeakMap();
|
|
3307
|
-
|
|
3308
|
-
/**
|
|
3309
|
-
* ResizeObservers' "Proxy" class which is meant to hide private
|
|
3310
|
-
* properties and methods from public instances.
|
|
3311
|
-
*
|
|
3312
|
-
* Additionally it implements "idleTimeout" and "continuousUpdates" static property
|
|
3313
|
-
* accessors to give a control over the behavior of ResizeObserverController
|
|
3314
|
-
* instance. Changes made to these properties will affect all future and
|
|
3315
|
-
* existing observers.
|
|
3316
|
-
*/
|
|
3317
|
-
class ResizeObserver$2 {
|
|
3318
|
-
/**
|
|
3319
|
-
* Creates a new instance of ResizeObserver.
|
|
3320
|
-
*
|
|
3321
|
-
* @param {Function} callback - Callback which will
|
|
3322
|
-
* be invoked when dimensions of one of the
|
|
3323
|
-
* observed elements have been changed.
|
|
3324
|
-
*/
|
|
3325
|
-
constructor(callback) {
|
|
3326
|
-
if (!arguments.length) {
|
|
3327
|
-
throw new TypeError('1 argument required, but only 0 present.');
|
|
3328
|
-
}
|
|
3329
|
-
|
|
3330
|
-
const observer = new ResizeObserver$3(callback, controller, this);
|
|
3331
|
-
|
|
3332
|
-
// Register an internal observer.
|
|
3333
|
-
observers.set(this, observer);
|
|
3334
|
-
}
|
|
3335
|
-
|
|
3336
|
-
/**
|
|
3337
|
-
* Extracts controllers' idle timeout value.
|
|
3338
|
-
*
|
|
3339
|
-
* @returns {Number}
|
|
3340
|
-
*/
|
|
3341
|
-
static get idleTimeout() {
|
|
3342
|
-
return controller.idleTimeout;
|
|
3343
|
-
}
|
|
3344
|
-
|
|
3345
|
-
/**
|
|
3346
|
-
* Sets up new idle timeout.
|
|
3347
|
-
*
|
|
3348
|
-
* @param {Number} value - New timeout value.
|
|
3349
|
-
*/
|
|
3350
|
-
static set idleTimeout(value) {
|
|
3351
|
-
if (typeof value !== 'number') {
|
|
3352
|
-
throw new TypeError('type of "idleTimeout" value must be a number.');
|
|
3353
|
-
}
|
|
3354
|
-
|
|
3355
|
-
if (typeof value < 0) {
|
|
3356
|
-
throw new TypeError('"idleTimeout" value must be greater than 0.');
|
|
3357
|
-
}
|
|
3358
|
-
|
|
3359
|
-
controller.idleTimeout = value;
|
|
3360
|
-
}
|
|
3361
|
-
|
|
3362
|
-
/**
|
|
3363
|
-
* Tells whether continuous updates are enabled.
|
|
3364
|
-
*
|
|
3365
|
-
* @returns {Boolean}
|
|
3366
|
-
*/
|
|
3367
|
-
static get continuousUpdates() {
|
|
3368
|
-
return controller.continuousUpdates;
|
|
3369
|
-
}
|
|
3370
|
-
|
|
3371
|
-
/**
|
|
3372
|
-
* Enables or disables continuous updates.
|
|
3373
|
-
*
|
|
3374
|
-
* @param {Boolean} value - Whether to enable or disable
|
|
3375
|
-
* continuous updates.
|
|
3376
|
-
*/
|
|
3377
|
-
static set continuousUpdates(value) {
|
|
3378
|
-
if (typeof value !== 'boolean') {
|
|
3379
|
-
throw new TypeError('type of "continuousUpdates" value must be a boolean.');
|
|
3380
|
-
}
|
|
3381
|
-
|
|
3382
|
-
controller.continuousUpdates = value;
|
|
3383
|
-
}
|
|
3384
|
-
}
|
|
3385
|
-
|
|
3386
|
-
// Expose public methods of ResizeObserver.
|
|
3387
|
-
[
|
|
3388
|
-
'observe',
|
|
3389
|
-
'unobserve',
|
|
3390
|
-
'disconnect'
|
|
3391
|
-
].forEach(method => {
|
|
3392
|
-
ResizeObserver$2.prototype[method] = function () {
|
|
3393
|
-
return observers.get(this)[method](...arguments);
|
|
3394
|
-
};
|
|
3395
|
-
});
|
|
3396
|
-
|
|
3397
|
-
let ResizeObserver = ResizeObserver$2;
|
|
3398
|
-
|
|
3399
|
-
// Export existing implementation if it's available.
|
|
3400
|
-
if (typeof window.ResizeObserver === 'function') {
|
|
3401
|
-
ResizeObserver = window.ResizeObserver;
|
|
3402
|
-
}
|
|
3403
|
-
|
|
3404
|
-
const ResizeObserver$1 = ResizeObserver;
|
|
3405
|
-
|
|
3406
|
-
const hyDesktopMenuLinksCss = ":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{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0}.hy-site-header__menu-desktop{height:100%;margin:0 32px}.hy-site-header__menu-desktop.is-group{margin:0}.hy-desktop-menu{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;list-style:none;margin:0;padding:0;width:100%}.is-dropdown .hy-desktop-menu__item{position:relative}.hy-desktop-menu__button{font-size:0.875rem;line-height:16px;font-weight:700;background-color:transparent;border:none;color:var(--brand-main-nearly-black);cursor:pointer;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);height:100%;letter-spacing:-0.7px;padding:39px 10px 13px;text-transform:uppercase;text-decoration:none;text-align:left;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.is-group .hy-desktop-menu__button{padding:26px 10px;width:auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (min-width: 1601px){.hy-desktop-menu__button.is-long br{display:none}}@media (min-width: 1601px){.hy-desktop-menu__button{font-size:1rem;line-height:16px;width:auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:26px 10px}}.hy-desktop-menu__button:hover{cursor:pointer}.hy-desktop-menu__button:hover span{color:var(--brand-main)}.hy-desktop-menu__button:hover svg{fill:var(--brand-main)}.hy-desktop-menu__button:focus{outline:solid 2px var(--additional-yellow);outline-offset:2px;color:var(--link-blue)}.hy-desktop-menu__button span{pointer-events:none}.hy-desktop-menu__button hy-icon{pointer-events:none;margin-left:4px}.hy-desktop-menu__button hy-icon svg{height:10px;width:10px}.hy-desktop-menu__button[aria-expanded=true] hy-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.is-panel-open .hy-desktop-menu__button:not([aria-expanded=true]){-webkit-box-shadow:none;box-shadow:none}.is-panel-open .hy-desktop-menu__button:not([aria-expanded=true])::after,.is-panel-open .hy-desktop-menu__button:not([aria-expanded=true])::before{display:none}.hy-desktop-menu__button.is-active-trail,.hy-desktop-menu__button[aria-expanded=true]{-webkit-box-shadow:inset 0 -4px 0 0 var(--grayscale-black);box-shadow:inset 0 -4px 0 0 var(--grayscale-black);position:relative}.hy-desktop-menu__button.is-active-trail::after,.hy-desktop-menu__button.is-active-trail::before,.hy-desktop-menu__button[aria-expanded=true]::after,.hy-desktop-menu__button[aria-expanded=true]::before{background-color:var(--grayscale-white);content:\"\";height:5px;width:16px;position:absolute;bottom:-1px;z-index:1000}.hy-desktop-menu__button.is-active-trail::before,.hy-desktop-menu__button[aria-expanded=true]::before{left:-16px}.hy-desktop-menu__button.is-active-trail::after,.hy-desktop-menu__button[aria-expanded=true]::after{right:-16px}.hy-desktop-menu__panel{background-color:var(--grayscale-white);-webkit-transition:none;transition:none;position:absolute;top:0;z-index:100;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-desktop-menu__panel[aria-hidden=true]{display:none;opacity:0}.hy-desktop-menu__panel:not(.is-dropdown){left:0;right:0;width:100%}.hy-desktop-menu__panel.is-dropdown{border:1px solid var(--grayscale-black);left:-17px;top:100%}.hy-desktop-menu__panel-container{margin:0 auto;padding:40px 24px;max-width:120.0625rem;width:100%;display:grid;grid-template-columns:1fr auto 1fr;justify-items:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.is-dropdown .hy-desktop-menu__panel-container{padding:24px 16px 40px}.hy-desktop-menu__panel-menu{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;grid-column-start:2}.hy-desktop-menu__panel-header{display:inline-grid;gap:8px 16px;grid-template-areas:\"icon link\" \"icon description\";grid-template-columns:auto;grid-template-rows:auto;margin-bottom:32px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.is-dropdown .hy-desktop-menu__panel-header{margin-bottom:16px}.hy-desktop-menu__panel-header>hy-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;grid-area:icon;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px}.hy-desktop-menu__panel-header>hy-icon svg{fill:var(--grayscale-white)}.hy-desktop-menu__panel-header a{font-size:1.5625rem;line-height:32px;font-weight:700;color:var(--brand-main);font-family:var(--main-font-family);grid-area:link;letter-spacing:-0.5px;margin-top:4px;text-decoration:none;width:-webkit-max-content;width:-moz-max-content;width:max-content}.hy-desktop-menu__panel-header a:hover{text-decoration:underline}.hy-desktop-menu__panel-header p{font-size:1.0625rem;line-height:26px;font-weight:400;color:var(--grayscale-black);font-family:var(--main-font-family);grid-area:description;margin:0;width:690px}.hy-desktop-menu__panel-content{padding-left:56px;display:inline-grid;grid-template-columns:400px}.hy-desktop-menu__panel-content.has-shortcuts{grid-template-columns:400px 496px}.is-dropdown .hy-desktop-menu__panel-content{grid-template-columns:310px}.hy-desktop-menu__panel-shortcuts{margin-left:48px;padding-left:48px;border-left:1px solid var(--grayscale-medium)}.hy-desktop-menu__panel-shortcuts>h2{font-size:1.125rem;line-height:24px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.36px;margin:0 0 24px}.hy-desktop-menu__panel-links{list-style:none;margin:0;padding:0;display:inline-grid;gap:20px}.hy-desktop-menu__panel-link{font-size:1rem;line-height:24px;font-weight:600;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;color:var(--brand-main);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);letter-spacing:-0.5px;overflow:hidden;text-decoration:none}.hy-desktop-menu__panel-link:hover{text-decoration:underline}.hy-desktop-menu__panel-link hy-icon{margin-right:12px;margin-top:12px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.hy-desktop-menu__panel-link hy-icon svg{fill:var(--grayscale-black)}.hy-desktop-menu__panel-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-desktop-menu__panel-link span hy-icon svg{fill:var(--brand-main)}.hy-desktop-menu__panel-close-button{font-size:1rem;line-height:18px;font-weight:700;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:none;color:var(--brand-main);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);letter-spacing:-0.3px;padding:16px;margin-left:auto;margin-right:-8px}.hy-desktop-menu__panel-close-button:hover{cursor:pointer}.hy-desktop-menu__panel-close-button hy-icon{margin-left:8px}.hy-desktop-menu__panel-close-button hy-icon svg{fill:var(--brand-main)}";
|
|
3407
|
-
|
|
3408
|
-
let scrollTimer$1 = null;
|
|
3409
|
-
let resizeTimer = null;
|
|
3410
|
-
let keys$3 = {
|
|
3411
|
-
enter: 'Enter',
|
|
3412
|
-
tab: 'Tab',
|
|
3413
|
-
space: 'Space',
|
|
3414
|
-
};
|
|
3415
|
-
let scrollTimeout$2 = null;
|
|
3416
|
-
let resizeTimeout = null;
|
|
3417
|
-
let HyDesktopMenuLinks = class {
|
|
3418
|
-
constructor(hostRef) {
|
|
3419
|
-
registerInstance(this, hostRef);
|
|
3420
|
-
this.menuDesktopToggled = createEvent(this, "menuDesktopToggled", 7);
|
|
3421
|
-
/*
|
|
3422
|
-
First level menu links to be displayed on Desktop screens.
|
|
3423
|
-
* */
|
|
3424
|
-
this.isGroup = false;
|
|
3425
|
-
this.isDropdown = false;
|
|
3426
|
-
this.firstLevelLinksList = [];
|
|
3427
|
-
this.menuLinkItems = [];
|
|
3428
|
-
this.hasToolbar = false;
|
|
3429
|
-
this.isDesktopMenuOpen = false;
|
|
3430
|
-
this.currenOpenMenuId = 0;
|
|
3431
|
-
this.isNewMenuIdOnHover = false;
|
|
3432
|
-
// private _submenuLeftMargin: number = 32;
|
|
3433
|
-
this._headerBorderOffset = 0;
|
|
3434
|
-
this._hoverTimer = null;
|
|
3435
|
-
this._fadeOutTimer = null;
|
|
3436
|
-
this._mouseEnter = null;
|
|
3437
|
-
this._mouseLeave = null;
|
|
3438
|
-
}
|
|
3439
|
-
async componentWillLoad() {
|
|
3440
|
-
this._dataDesktopLinks = await jsonParserWorker(this.dataDesktopLinks);
|
|
3441
|
-
}
|
|
3442
|
-
disconnectedCallback() {
|
|
3443
|
-
clearTimeout(scrollTimer$1);
|
|
3444
|
-
clearTimeout(resizeTimer);
|
|
3445
|
-
}
|
|
3446
|
-
removeBackdropShadow(size) {
|
|
3447
|
-
// Close backdrop shadow if the screen is < 1200px
|
|
3448
|
-
if (size < 1200) {
|
|
3449
|
-
this.showBackdropShadow();
|
|
3450
|
-
}
|
|
3451
|
-
}
|
|
3452
|
-
showBackdropShadow(state = 'close', top = 0) {
|
|
3453
|
-
let hyHeader = this.el.closest('.hy-site-header');
|
|
3454
|
-
if (!hyHeader)
|
|
3455
|
-
return;
|
|
3456
|
-
let hyBackdropDiv = hyHeader.children[0];
|
|
3457
|
-
if (hyBackdropDiv && !this.isDropdown) {
|
|
3458
|
-
if (state === 'open') {
|
|
3459
|
-
const windowHeight = window.outerHeight;
|
|
3460
|
-
hyBackdropDiv.style.height = `${windowHeight}px`;
|
|
3461
|
-
hyBackdropDiv.style.top = `${top}px`;
|
|
3462
|
-
hyBackdropDiv.style.position = 'absolute';
|
|
3463
|
-
hyBackdropDiv.classList.add('is-active');
|
|
3464
|
-
}
|
|
3465
|
-
else {
|
|
3466
|
-
hyBackdropDiv.removeAttribute('style');
|
|
3467
|
-
hyBackdropDiv.classList.remove('is-active');
|
|
3468
|
-
}
|
|
3469
|
-
}
|
|
3470
|
-
}
|
|
3471
|
-
showPanel(id) {
|
|
3472
|
-
// Close menu lang menu if it's open
|
|
3473
|
-
this.menuDesktopToggled.emit();
|
|
3474
|
-
clearTimeout(this._hoverTimer);
|
|
3475
|
-
clearTimeout(this._fadeOutTimer);
|
|
3476
|
-
// Open desktop menu panel
|
|
3477
|
-
this.isDesktopMenuOpen = true;
|
|
3478
|
-
const menuItems = this.el.shadowRoot.querySelectorAll(`.hy-desktop-menu__button`);
|
|
3479
|
-
const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu__panel'); // all panels
|
|
3480
|
-
const activeMenuItem = this.el.shadowRoot.querySelector(`.hy-desktop-menu__button[link-id="${id}"]`);
|
|
3481
|
-
const activeMenuItemSibling = activeMenuItem.nextElementSibling; // current panel
|
|
3482
|
-
// Reset elements by removing the active classes.
|
|
3483
|
-
menuItems.forEach((item) => {
|
|
3484
|
-
item.setAttribute('aria-expanded', 'false');
|
|
3485
|
-
});
|
|
3486
|
-
menuPanelItems.forEach((item) => {
|
|
3487
|
-
item.setAttribute('aria-hidden', 'true');
|
|
3488
|
-
item.style.transition = 'none';
|
|
3489
|
-
item.style.opacity = '0';
|
|
3490
|
-
});
|
|
3491
|
-
// Set active attributes to currently active panel.
|
|
3492
|
-
activeMenuItem.setAttribute('aria-expanded', 'true');
|
|
3493
|
-
activeMenuItemSibling.style.opacity = '1';
|
|
3494
|
-
if (this.hasToolbar) {
|
|
3495
|
-
activeMenuItemSibling.classList.add('has-toolbar');
|
|
3496
|
-
}
|
|
3497
|
-
activeMenuItemSibling.setAttribute('aria-hidden', 'false');
|
|
3498
|
-
// Add panels top value automatically with the correct header height
|
|
3499
|
-
let topOffset = window.pageYOffset;
|
|
3500
|
-
const bodyElementClasses = document.body.classList;
|
|
3501
|
-
const headerElement = document.querySelector('hy-site-header');
|
|
3502
|
-
const headerShadowRootElement = headerElement.shadowRoot.querySelector('header');
|
|
3503
|
-
let headerElementHeight = headerShadowRootElement.offsetHeight + this._headerBorderOffset;
|
|
3504
|
-
let headerElementOffset = headerShadowRootElement.offsetTop;
|
|
3505
|
-
let panelElementOffset = headerElementHeight + headerElementOffset;
|
|
3506
|
-
// Add shadow backdrop
|
|
3507
|
-
let rect = activeMenuItemSibling.getBoundingClientRect();
|
|
3508
|
-
let backdropOffset = headerElementHeight + headerElementOffset + rect.height;
|
|
3509
|
-
let backdropToolbarOffset = backdropOffset - 79;
|
|
3510
|
-
if (!this.isDropdown) {
|
|
3511
|
-
window.addEventListener('scroll', () => {
|
|
3512
|
-
clearTimeout(scrollTimeout$2);
|
|
3513
|
-
scrollTimeout$2 = setTimeout(() => {
|
|
3514
|
-
topOffset = window.pageYOffset;
|
|
3515
|
-
if (topOffset === 0) {
|
|
3516
|
-
activeMenuItemSibling.style.top = `${panelElementOffset}px`;
|
|
3517
|
-
}
|
|
3518
|
-
if (headerShadowRootElement.classList.contains('hy-site-header--sticky-active') && topOffset > 0) {
|
|
3519
|
-
if (bodyElementClasses.contains('toolbar-horizontal')) {
|
|
3520
|
-
activeMenuItemSibling.style.top = `${headerElementHeight}px`;
|
|
3521
|
-
if (this.isDesktopMenuOpen) {
|
|
3522
|
-
this.showBackdropShadow('open', backdropToolbarOffset);
|
|
3523
|
-
}
|
|
3524
|
-
}
|
|
3525
|
-
}
|
|
3526
|
-
}, 250);
|
|
3527
|
-
});
|
|
3528
|
-
}
|
|
3529
|
-
if (!this.isDropdown) {
|
|
3530
|
-
if (headerShadowRootElement.classList.contains('hy-site-header--sticky-active') && topOffset > 0) {
|
|
3531
|
-
if (bodyElementClasses.contains('toolbar-horizontal')) {
|
|
3532
|
-
activeMenuItemSibling.style.top = `${headerElementHeight}px`;
|
|
3533
|
-
if (this.isDesktopMenuOpen) {
|
|
3534
|
-
this.showBackdropShadow('open', backdropToolbarOffset);
|
|
3535
|
-
}
|
|
3536
|
-
}
|
|
3537
|
-
else {
|
|
3538
|
-
activeMenuItemSibling.style.top = `${panelElementOffset}px`;
|
|
3539
|
-
this.showBackdropShadow('open', backdropOffset);
|
|
3540
|
-
}
|
|
3541
|
-
}
|
|
3542
|
-
else {
|
|
3543
|
-
activeMenuItemSibling.style.top = `${panelElementOffset}px`;
|
|
3544
|
-
this.showBackdropShadow('open', backdropOffset);
|
|
3545
|
-
}
|
|
3546
|
-
}
|
|
3547
|
-
if (this.isDropdown) {
|
|
3548
|
-
let windowWidth = window.outerWidth;
|
|
3549
|
-
const desktopMenuPanelWidth = activeMenuItemSibling.offsetWidth;
|
|
3550
|
-
if (windowWidth - activeMenuItem.getBoundingClientRect().left < desktopMenuPanelWidth) {
|
|
3551
|
-
activeMenuItemSibling.style.left = `auto`;
|
|
3552
|
-
activeMenuItemSibling.style.right = `-17px`;
|
|
3553
|
-
}
|
|
3554
|
-
window.addEventListener('resize', () => {
|
|
3555
|
-
clearTimeout(resizeTimeout);
|
|
3556
|
-
resizeTimeout = setTimeout(() => {
|
|
3557
|
-
windowWidth = window.outerWidth;
|
|
3558
|
-
if (windowWidth - activeMenuItem.getBoundingClientRect().left < desktopMenuPanelWidth) {
|
|
3559
|
-
activeMenuItemSibling.style.left = `auto`;
|
|
3560
|
-
activeMenuItemSibling.style.right = `-17px`;
|
|
3561
|
-
}
|
|
3562
|
-
else {
|
|
3563
|
-
activeMenuItemSibling.style.left = `-17px`;
|
|
3564
|
-
activeMenuItemSibling.style.right = `auto`;
|
|
3565
|
-
}
|
|
3566
|
-
}, 250);
|
|
3567
|
-
});
|
|
3568
|
-
}
|
|
3569
|
-
}
|
|
3570
|
-
closePanel(fadeOut = false) {
|
|
3571
|
-
this.isDesktopMenuOpen = false;
|
|
3572
|
-
this.isNewMenuIdOnHover = false;
|
|
3573
|
-
this.currenOpenMenuId = 0;
|
|
3574
|
-
this.showBackdropShadow();
|
|
3575
|
-
this.clearPanelItemsStatus(fadeOut);
|
|
3576
|
-
clearTimeout(this._hoverTimer);
|
|
3577
|
-
}
|
|
3578
|
-
clearPanelItemsStatus(fadeOut = false) {
|
|
3579
|
-
const menuItems = this.el.shadowRoot.querySelectorAll(`.hy-desktop-menu__button`);
|
|
3580
|
-
const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu__panel');
|
|
3581
|
-
// Reset elements by removing the active classes.
|
|
3582
|
-
menuItems.forEach((item) => {
|
|
3583
|
-
// item.classList.remove('desktop-menu-link--is-active');
|
|
3584
|
-
item.setAttribute('aria-expanded', 'false');
|
|
3585
|
-
});
|
|
3586
|
-
if (fadeOut) {
|
|
3587
|
-
menuPanelItems.forEach((item) => {
|
|
3588
|
-
item.style.opacity = '0';
|
|
3589
|
-
item.style.transition = 'opacity 1s';
|
|
3590
|
-
});
|
|
3591
|
-
this._fadeOutTimer = window.requestAnimationFrame(() => {
|
|
3592
|
-
menuPanelItems.forEach((item) => {
|
|
3593
|
-
// item.classList.remove('hy-desktop-menu-panel--is-active');
|
|
3594
|
-
item.setAttribute('aria-hidden', 'true');
|
|
3595
|
-
});
|
|
3596
|
-
});
|
|
3597
|
-
}
|
|
3598
|
-
else {
|
|
3599
|
-
menuPanelItems.forEach((item) => {
|
|
3600
|
-
// item.classList.remove('hy-desktop-menu-panel--is-active');
|
|
3601
|
-
item.setAttribute('aria-hidden', 'true');
|
|
3602
|
-
item.style.opacity = '0';
|
|
3603
|
-
item.style.transition = 'none';
|
|
3604
|
-
});
|
|
3605
|
-
}
|
|
3606
|
-
}
|
|
3607
|
-
handleDesktopMenuClose(event) {
|
|
3608
|
-
let fadeOut = true;
|
|
3609
|
-
this.closePanel(fadeOut);
|
|
3610
|
-
event.stopPropagation();
|
|
3611
|
-
}
|
|
3612
|
-
// CLose the desktop menu panel if user opens the language menu.
|
|
3613
|
-
menuLanguageToggled() {
|
|
3614
|
-
let fadeOut = true;
|
|
3615
|
-
this.closePanel(fadeOut);
|
|
3616
|
-
}
|
|
3617
|
-
// Close the desktop menu panel if user opens University main menu
|
|
3618
|
-
universityMainMenuPanelToggled() {
|
|
3619
|
-
let fadeOut = true;
|
|
3620
|
-
this.closePanel(fadeOut);
|
|
3621
|
-
}
|
|
3622
|
-
// Close the desktop menu panel if user opens search panel
|
|
3623
|
-
searchPanelToggled() {
|
|
3624
|
-
let fadeOut = true;
|
|
3625
|
-
this.closePanel(fadeOut);
|
|
3626
|
-
}
|
|
3627
|
-
// CLose the desktop menu panel if user scrolls Sticky Header till the very top.
|
|
3628
|
-
headerScrollUp() {
|
|
3629
|
-
let fadeOut = false;
|
|
3630
|
-
this.closePanel(fadeOut);
|
|
3631
|
-
}
|
|
3632
|
-
handleDesktopMenuEnter(event, id) {
|
|
3633
|
-
if (this.isDesktopMenuOpen && this._mouseEnter == null) {
|
|
3634
|
-
clearTimeout(this._mouseLeave);
|
|
3635
|
-
this._mouseLeave = null;
|
|
3636
|
-
this._mouseEnter = setTimeout(() => {
|
|
3637
|
-
this.isNewMenuIdOnHover = true;
|
|
3638
|
-
clearTimeout(this._fadeOutTimer);
|
|
3639
|
-
const activeMenuItem = this.el.shadowRoot.querySelector(`.hy-desktop-menu__button[link-id="${id}"]`);
|
|
3640
|
-
// Set focus to the button.
|
|
3641
|
-
if (activeMenuItem !== null)
|
|
3642
|
-
activeMenuItem.focus();
|
|
3643
|
-
this.currenOpenMenuId = id;
|
|
3644
|
-
this.showPanel(id);
|
|
3645
|
-
event.stopPropagation();
|
|
3646
|
-
}, 500);
|
|
3647
|
-
}
|
|
3648
|
-
}
|
|
3649
|
-
handleDesktopMenuLeave() {
|
|
3650
|
-
clearTimeout(this._mouseEnter);
|
|
3651
|
-
this._mouseEnter = null;
|
|
3652
|
-
}
|
|
3653
|
-
handleWindowClick(event) {
|
|
3654
|
-
// Check if event is being fired during pressing a key (event.detail==0 in this case)
|
|
3655
|
-
if (event.detail == 0)
|
|
3656
|
-
return;
|
|
3657
|
-
if (this.isDesktopMenuOpen) {
|
|
3658
|
-
this.handleDesktopMenuClose(event);
|
|
3659
|
-
event.stopPropagation();
|
|
3660
|
-
}
|
|
3661
|
-
}
|
|
3662
|
-
handleDesktopMenuClick(event, id) {
|
|
3663
|
-
// Check if event is being fired during pressing a key (event.detail==0 in this case)
|
|
3664
|
-
if (event.detail == 0)
|
|
3665
|
-
return;
|
|
3666
|
-
event.stopPropagation();
|
|
3667
|
-
if (!this.isDesktopMenuOpen) {
|
|
3668
|
-
this.currenOpenMenuId = id;
|
|
3669
|
-
this.showPanel(id);
|
|
3670
|
-
}
|
|
3671
|
-
else if (this.isDesktopMenuOpen) {
|
|
3672
|
-
this.handleDesktopMenuClose(event);
|
|
3673
|
-
}
|
|
3674
|
-
if (this.isNewMenuIdOnHover) {
|
|
3675
|
-
this.isNewMenuIdOnHover = false;
|
|
3676
|
-
}
|
|
3677
|
-
}
|
|
3678
|
-
handleKeyDown(event, id) {
|
|
3679
|
-
event.stopPropagation();
|
|
3680
|
-
const key = event.code;
|
|
3681
|
-
if ([keys$3.enter, keys$3.space].includes(key)) {
|
|
3682
|
-
if (!this.isDesktopMenuOpen) {
|
|
3683
|
-
this.currenOpenMenuId = id;
|
|
3684
|
-
this.showPanel(id);
|
|
3685
|
-
}
|
|
3686
|
-
else {
|
|
3687
|
-
this.handleDesktopMenuClose(event);
|
|
3688
|
-
}
|
|
3689
|
-
}
|
|
3690
|
-
}
|
|
3691
|
-
componentDidLoad() {
|
|
3692
|
-
// Set the browser resize observer to gather information about browser width.
|
|
3693
|
-
this.ro = new ResizeObserver$1((entries) => {
|
|
3694
|
-
for (const entry of entries) {
|
|
3695
|
-
this.removeBackdropShadow(entry.contentRect.width);
|
|
3696
|
-
}
|
|
3697
|
-
});
|
|
3698
|
-
this.ro.observe(document.body);
|
|
3699
|
-
let hyToolbar = document.querySelectorAll('#toolbar-administration')[0];
|
|
3700
|
-
if (hyToolbar) {
|
|
3701
|
-
this.hasToolbar = true;
|
|
3702
|
-
}
|
|
3703
|
-
const links = this._dataDesktopLinks;
|
|
3704
|
-
let menuLinkItems = [];
|
|
3705
|
-
if (links) {
|
|
3706
|
-
links.map(({ menuLinkId: id, shortcuts, items, url, description, toggleOff, label, labelExtra, isExternal, isActive, shortcutsTitle, closeButtonTitle, }) => {
|
|
3707
|
-
let target = isExternal ? '_blank' : '_self';
|
|
3708
|
-
const isLabelLong = label.split(' ').length >= 3 ? true : false;
|
|
3709
|
-
let customizedLabel = [];
|
|
3710
|
-
if (isLabelLong && !this.isGroup) {
|
|
3711
|
-
customizedLabel = label.split(' ');
|
|
3712
|
-
customizedLabel.splice(2, 0, '</br>');
|
|
3713
|
-
}
|
|
3714
|
-
if (toggleOff) {
|
|
3715
|
-
menuLinkItems.push(h("li", { onMouseEnter: (e) => this.handleDesktopMenuClose(e), class: `hy-desktop-menu__item ${isActive === 'true' ? 'is-active-trail' : ''}` }, h("a", { "aria-current": label, href: url, target: target, class: `hy-desktop-menu__button ${isLabelLong && !this.isGroup ? 'is-long' : ''}`, "menu-link-id": id }, labelExtra ? h("span", { class: "label" }, labelExtra) : h("span", { class: "label" }, label))));
|
|
3716
|
-
}
|
|
3717
|
-
else {
|
|
3718
|
-
menuLinkItems.push(h("li", { class: "hy-desktop-menu__item" }, h("button", { tabindex: "0", type: "button", class: `hy-desktop-menu__button ${isActive === 'true' ? 'is-active-trail' : ''} ${isLabelLong && !this.isGroup ? 'is-long' : ''}`, "link-id": id, onClick: (e) => this.handleDesktopMenuClick(e, id), onKeyDown: (e) => this.handleKeyDown(e, id), onMouseEnter: (e) => this.handleDesktopMenuEnter(e, id), onMouseLeave: () => this.handleDesktopMenuLeave(), "aria-expanded": "false" }, h("span", { innerHTML: isLabelLong && !this.isGroup ? customizedLabel.join(' ') : label }), h("hy-icon", { icon: 'hy-icon-caret-down', size: 32 })), h("section", { class: `hy-desktop-menu__panel ${this.isDropdown ? 'is-dropdown' : ''}`, "aria-hidden": "true" }, h("div", { class: "hy-desktop-menu__panel-container" }, h("div", { class: "hy-desktop-menu__panel-menu" }, h("div", { class: "hy-desktop-menu__panel-header" }, h("hy-icon", { icon: 'hy-icon-arrow-right', size: 24 }), h("a", { "aria-current": label, href: url, target: target, "menu-link-id": id }, labelExtra || label), description && !this.isDropdown && h("p", null, description)), h("div", { class: `hy-desktop-menu__panel-content ${shortcuts.length > 0 ? 'has-shortcuts' : ''}` }, h("ul", { class: 'hy-desktop-menu__panel-links hy-desktop-menu__panel-links--menu', "menu-link-id": id }, items.map(({ label, url, isExternal }) => {
|
|
3719
|
-
let subitemTarget = isExternal ? '_blank' : '_self';
|
|
3720
|
-
return (h("li", { class: "hy-desktop-menu__panel-links-item" }, h("a", { class: "hy-desktop-menu__panel-link", href: url, target: subitemTarget }, h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }), h("span", null, label, isExternal && h("hy-icon", { icon: 'hy-icon-arrow-right', size: 12 })))));
|
|
3721
|
-
})), shortcuts.length > 0 && (h("div", { class: "hy-desktop-menu__panel-shortcuts" }, h("h2", null, shortcutsTitle), h("ul", { class: "hy-desktop-menu__panel-links hy-desktop-menu__panel-links--shortcuts" }, shortcuts.map(({ shortcut_title, shortcut_url, shortcut_is_external, shortcut_aria_label }) => {
|
|
3722
|
-
let target = shortcut_is_external ? '_blank' : '_self';
|
|
3723
|
-
return (h("li", { class: "hy-desktop-menu__panel-links-item" }, h("a", { "aria-current": shortcut_aria_label, href: shortcut_url, class: "hy-desktop-menu__panel-link", target: target, "aria-label": shortcut_aria_label }, h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }), h("span", null, shortcut_title, shortcut_is_external && h("hy-icon", { icon: 'hy-icon-arrow-right', size: 12 })))));
|
|
3724
|
-
})))))), !this.isDropdown && (h("button", { onClick: (e) => this.handleDesktopMenuClose(e), class: {
|
|
3725
|
-
'hy-desktop-menu__panel-close-button': true,
|
|
3726
|
-
}, "aria-label": "Close menu" }, h("span", null, closeButtonTitle), h("hy-icon", { icon: 'hy-icon-remove', size: 16 })))))));
|
|
3727
|
-
}
|
|
3728
|
-
});
|
|
3729
|
-
}
|
|
3730
|
-
this.menuLinkItems = menuLinkItems;
|
|
3731
|
-
}
|
|
3732
|
-
render() {
|
|
3733
|
-
return (h("nav", { role: 'navigation', class: `hy-site-header__menu-desktop ${this.isGroup ? 'is-group' : ''} ${this.isDropdown ? 'is-dropdown' : ''}` }, h("ul", { class: `hy-desktop-menu ${this.isDesktopMenuOpen ? 'is-panel-open' : ''}` }, this.menuLinkItems)));
|
|
3734
|
-
}
|
|
3735
|
-
get el() { return getElement(this); }
|
|
3736
|
-
};
|
|
3737
|
-
HyDesktopMenuLinks.style = hyDesktopMenuLinksCss;
|
|
3738
|
-
|
|
3739
|
-
const hyDropdownCss = ":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-dropdown{display:inline-block;min-width:100%;position:relative}@media (min-width: 30rem){.hy-dropdown{min-width:48.3%}}@media (min-width: 75.0625rem){.hy-dropdown{min-width:23.03%}}.hy-dropdown label.hy-dropdown__button-label{font-size:1rem;line-height:20px;font-weight:700;display:block;font-family:var(--main-font-family);letter-spacing:-0.32px;margin-bottom:8px}.hy-dropdown--single .hy-dropdown__panel{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:330px;min-width:100%}.hy-dropdown__toggle{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;height:auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 0 0 16px;text-align:left;max-width:280px;width:100%}@media (min-width: 30rem){.hy-dropdown__toggle{font-size:1rem;line-height:24px;min-height:44px}}@media (min-width: 75.0625rem){.hy-dropdown__toggle{min-height:48px}}.hy-dropdown__toggle:hover{border-color:var(--brand-main-light);cursor:pointer}.hy-dropdown__toggle:focus{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}.hy-dropdown__toggle svg{pointer-events:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon{background-color:var(--brand-main-light);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-dropdown__toggle.is-open .hy-dropdown__icon::before{display:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon svg{fill:var(--grayscale-white)}.hy-dropdown__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 0 0 16px;position:relative;width:40px}.hy-dropdown__icon::before{border-left:0.5px solid var(--grayscale-medium-dark);content:\"\";display:inline-block;height:65%;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width: 30rem){.hy-dropdown__icon{height:44px;width:44px}}@media (min-width: 75.0625rem){.hy-dropdown__icon{height:48px;width:48px}}.hy-dropdown__icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-dropdown__icon svg{height:16px;width:16px}}.hy-dropdown__panel{background-color:var(--grayscale-white);-webkit-box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);list-style:none;margin:0;padding:6px;position:absolute;width:100%;z-index:11}.hy-dropdown__panel.is-hidden{display:none;visibility:hidden}.hy-dropdown__panel-item{position:relative}.hy-dropdown__panel-item:not(.is-last){margin-bottom:6px}.hy-dropdown__label{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 16px;text-align:left;width:100%}@media (min-width: 30rem){.hy-dropdown__label{font-size:1rem;line-height:24px}}.hy-dropdown__label-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none !important;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;visibility:hidden;width:40px}.hy-dropdown__checkbox{height:100%;margin:0;opacity:0;position:absolute;width:100%;z-index:10}.hy-dropdown__checkbox:checked+label{border-color:var(--grayscale-black);border-style:solid inset solid solid;border-width:2px;color:var(--grayscale-black);outline:0;text-indent:-1px}.hy-dropdown__checkbox:checked+label .hy-dropdown__label-icon{display:-webkit-inline-box !important;display:-ms-inline-flexbox !important;display:inline-flex !important;visibility:visible}.hy-dropdown__checkbox:hover{cursor:pointer}.hy-dropdown__checkbox:hover+label{border-color:var(--brand-main-light)}.hy-dropdown__checkbox:focus+label{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}";
|
|
3740
|
-
|
|
3741
|
-
let HyDropdown = class {
|
|
3742
|
-
constructor(hostRef) {
|
|
3743
|
-
registerInstance(this, hostRef);
|
|
3744
|
-
this.single = false;
|
|
3745
|
-
this.dropdownLabel = null;
|
|
3746
|
-
this.dropdownId = 'dropdownToggle';
|
|
3747
|
-
this.defaultLabel = 'All';
|
|
3748
|
-
this.defaultOption = null;
|
|
3749
|
-
this.isPanelOpen = false;
|
|
3750
|
-
this.isChecked = false;
|
|
3751
|
-
this.currentSingle = [{ id: 0, label: this.defaultLabel, value: 0 }];
|
|
3752
|
-
}
|
|
3753
|
-
async componentWillLoad() {
|
|
3754
|
-
this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);
|
|
3755
|
-
}
|
|
3756
|
-
componentWillUpdate() {
|
|
3757
|
-
const items = this.el.querySelectorAll('.hy-dropdown__checkbox');
|
|
3758
|
-
if (items) {
|
|
3759
|
-
if ([...items].some((item) => item.checked == true)) {
|
|
3760
|
-
this.isChecked = true;
|
|
3761
|
-
}
|
|
3762
|
-
else {
|
|
3763
|
-
this.isChecked = false;
|
|
3764
|
-
}
|
|
3765
|
-
}
|
|
3766
|
-
}
|
|
3767
|
-
watchPropHandler(newValue, oldValue) {
|
|
3768
|
-
if (!this.single)
|
|
3769
|
-
return;
|
|
3770
|
-
if (newValue !== oldValue) {
|
|
3771
|
-
const dropdownPanelCheckboxElements = this.el.getElementsByClassName('hy-dropdown__checkbox');
|
|
3772
|
-
Array.from(dropdownPanelCheckboxElements).filter((item) => {
|
|
3773
|
-
if (item.id == newValue) {
|
|
3774
|
-
item.checked = true;
|
|
3775
|
-
this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue);
|
|
3776
|
-
return;
|
|
3777
|
-
}
|
|
3778
|
-
return null;
|
|
3779
|
-
});
|
|
3780
|
-
}
|
|
3781
|
-
}
|
|
3782
|
-
handlePanelToggle() {
|
|
3783
|
-
this.isPanelOpen = !this.isPanelOpen;
|
|
3784
|
-
}
|
|
3785
|
-
handleClick(event) {
|
|
3786
|
-
const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`);
|
|
3787
|
-
const dropdownPanelElement = this.el.querySelector('.hy-dropdown__panel');
|
|
3788
|
-
const dropdownPanelCheckboxElements = this.el.querySelectorAll('.hy-dropdown__checkbox');
|
|
3789
|
-
const dropdownToggleButtonIconElement = this.el.querySelector('.hy-dropdown__icon');
|
|
3790
|
-
const { target } = event;
|
|
3791
|
-
const allowedElements = [
|
|
3792
|
-
dropdownToggleButtonElement,
|
|
3793
|
-
dropdownPanelElement,
|
|
3794
|
-
dropdownToggleButtonIconElement,
|
|
3795
|
-
...dropdownPanelCheckboxElements, // Spread ("copy") items to allowedElement array.
|
|
3796
|
-
];
|
|
3797
|
-
if (this.isPanelOpen && !allowedElements.includes(target)) {
|
|
3798
|
-
this.isPanelOpen = false;
|
|
3799
|
-
}
|
|
3800
|
-
event.stopPropagation();
|
|
3801
|
-
}
|
|
3802
|
-
handleSingleClick(event) {
|
|
3803
|
-
if (!this.single || !this.isPanelOpen)
|
|
3804
|
-
return;
|
|
3805
|
-
const dropdownPanelCheckboxElements = this.el.getElementsByClassName('hy-dropdown__checkbox');
|
|
3806
|
-
const allowedElements = [...dropdownPanelCheckboxElements];
|
|
3807
|
-
const { target } = event;
|
|
3808
|
-
if (!allowedElements.includes(target))
|
|
3809
|
-
return;
|
|
3810
|
-
Array.from(dropdownPanelCheckboxElements).filter((item) => {
|
|
3811
|
-
if (item.id == target.id) {
|
|
3812
|
-
if (!item.checked) {
|
|
3813
|
-
this.currentSingle = [{ id: null, label: this.defaultLabel, value: null }];
|
|
3814
|
-
return;
|
|
3815
|
-
}
|
|
3816
|
-
this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id);
|
|
3817
|
-
return;
|
|
3818
|
-
}
|
|
3819
|
-
if (item.id !== target.id && item.checked) {
|
|
3820
|
-
item.checked = false;
|
|
3821
|
-
return;
|
|
3822
|
-
}
|
|
3823
|
-
return null;
|
|
3824
|
-
});
|
|
3825
|
-
event.stopPropagation();
|
|
3826
|
-
}
|
|
3827
|
-
render() {
|
|
3828
|
-
const { label: currentLabel, id: currentId, value: currentValue } = this.currentSingle[0];
|
|
3829
|
-
const classAttributes = ['hy-dropdown', this.single ? 'hy-dropdown--single' : ''].join(' ');
|
|
3830
|
-
if (this.single) {
|
|
3831
|
-
return (h(Host, { class: classAttributes }, this.dropdownLabel && (h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? 'is-open' : ''}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-haspopup": "true", "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": `${!this.isPanelOpen ? 'Open' : 'Close'} dropdown`, "data-current-id": currentId, "data-current-value": currentValue, value: currentId }, currentLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: 'hy-icon-caret-down', size: 14, "aria-hidden": "true" })), h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? 'true' : 'false', "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
|
|
3832
|
-
}
|
|
3833
|
-
else {
|
|
3834
|
-
return (h(Host, { class: classAttributes }, h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? 'is-open' : ''}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-haspopup": "true", "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": `${!this.isPanelOpen ? 'Open' : 'Close'} dropdown` }, this.dropdownLabel && this.dropdownLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: 'hy-icon-caret-down', size: 14, "aria-hidden": "true" })), h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? 'true' : 'false', "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
|
|
3835
|
-
}
|
|
3836
|
-
}
|
|
3837
|
-
get el() { return getElement(this); }
|
|
3838
|
-
static get watchers() { return {
|
|
3839
|
-
"defaultOption": ["watchPropHandler"]
|
|
3840
|
-
}; }
|
|
3841
|
-
};
|
|
3842
|
-
HyDropdown.style = hyDropdownCss;
|
|
3843
|
-
|
|
3844
|
-
let HyDropdownPanel = class {
|
|
3845
|
-
constructor(hostRef) {
|
|
3846
|
-
registerInstance(this, hostRef);
|
|
3847
|
-
}
|
|
3848
|
-
render() {
|
|
3849
|
-
return (h("ul", { id: "dropdownPanel", class: `hy-dropdown__panel ${this.isHidden ? 'is-hidden' : ''}`, "aria-hidden": `${this.isHidden || false}`, role: "region", "aria-labelledby": "dropdownToggle" }, h("slot", null)));
|
|
3850
|
-
}
|
|
3851
|
-
};
|
|
3852
|
-
|
|
3853
|
-
let HyDropdownPanelItem = class {
|
|
3854
|
-
constructor(hostRef) {
|
|
3855
|
-
registerInstance(this, hostRef);
|
|
3856
|
-
this.isLast = false;
|
|
3857
|
-
}
|
|
3858
|
-
render() {
|
|
3859
|
-
return (h("li", { class: `hy-dropdown__panel-item ${this.isLast ? 'is-last' : ''}` }, h("input", { type: "checkbox", class: "hy-dropdown__checkbox", id: `${this.dropdownItemId}`, value: `${this.dropdownItemValue}` }), h("label", { class: "hy-dropdown__label", htmlFor: `${this.dropdownItemId}` }, this.dropdownItemLabel, h("hy-icon", { class: "hy-dropdown__label-icon", icon: 'hy-icon-done', size: 14, "aria-hidden": "true" }))));
|
|
3860
|
-
}
|
|
3861
|
-
};
|
|
3862
|
-
|
|
3863
|
-
const hyFilterGroupCss = ":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-filter-group{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:16px}.hy-filter-group__listing{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:0;padding:0}.hy-filter-group__label{font-size:0.75rem;line-height:16px;border-radius:2px;color:var(--grayscale-dark);font-family:var(--main-font-family);font-weight:normal;letter-spacing:-0.2px;margin:8px 4px 8px 0;padding:4px 0}@media (min-width: 30rem){.hy-filter-group__label{font-size:0.875rem;line-height:16px;letter-spacing:-0.3px;padding:6px 0}}.hy-filter-group__button{font-size:0.75rem;line-height:16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-background-box);border-radius:2px;border:0;color:var(--grayscale-dark);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:normal;letter-spacing:-0.2px;margin:8px 4px;padding:4px 6px}@media (min-width: 30rem){.hy-filter-group__button{font-size:0.875rem;line-height:16px;letter-spacing:-0.3px;padding:6px 8px}}.hy-filter-group__button:hover{cursor:pointer}.hy-filter-group__button-icon{margin-left:6px}@media (min-width: 30rem){.hy-filter-group__button-icon{margin-left:8px}}.hy-filter-group__button-icon svg{pointer-events:none}@media (min-width: 30rem){.hy-filter-group__button-icon svg{height:12px;width:12px}}.hy-filter-group__divider{font-size:0.75rem;line-height:16px;color:var(--grayscale-dark);font-family:var(--main-font-family);margin:4px 6px}@media (min-width: 30rem){.hy-filter-group__divider{font-size:0.875rem;line-height:16px;letter-spacing:-0.3px}}";
|
|
3864
|
-
|
|
3865
|
-
let HyFilterGroup = class {
|
|
3866
|
-
constructor(hostRef) {
|
|
3867
|
-
registerInstance(this, hostRef);
|
|
3868
|
-
}
|
|
3869
|
-
arrayDataWatcher(newValue) {
|
|
3870
|
-
if (typeof newValue === 'string') {
|
|
3871
|
-
this._filterGroupFilters = JSON.parse(newValue);
|
|
3872
|
-
}
|
|
3873
|
-
else {
|
|
3874
|
-
this._filterGroupFilters = newValue;
|
|
3875
|
-
}
|
|
3876
|
-
}
|
|
3877
|
-
componentWillLoad() {
|
|
3878
|
-
this.arrayDataWatcher(this.filterGroupFilters);
|
|
3879
|
-
}
|
|
3880
|
-
// TODO: Finish handleFilterDeselect functionality with real data.
|
|
3881
|
-
handleFilterDeselect(id) {
|
|
3882
|
-
console.log(id);
|
|
3883
|
-
}
|
|
3884
|
-
render() {
|
|
3885
|
-
return (h(Host, { class: "hy-filter-group" }, h("ul", { class: "hy-filter-group__listing" }, h("li", null, h("h3", { class: "hy-filter-group__label" }, this.filterGroupLabel)), this._filterGroupFilters.map(({ id, label }) => (h("hy-filter-group-item", { "filter-group-item-id": id, "filter-group-item-label": label, onClick: () => this.handleFilterDeselect(id) }))))));
|
|
3886
|
-
}
|
|
3887
|
-
static get watchers() { return {
|
|
3888
|
-
"filterGroupFilters": ["arrayDataWatcher"]
|
|
3889
|
-
}; }
|
|
3890
|
-
};
|
|
3891
|
-
HyFilterGroup.style = hyFilterGroupCss;
|
|
3892
|
-
|
|
3893
|
-
let HyFilterGroupItem = class {
|
|
3894
|
-
constructor(hostRef) {
|
|
3895
|
-
registerInstance(this, hostRef);
|
|
3896
|
-
}
|
|
3897
|
-
render() {
|
|
3898
|
-
return (h("li", { class: "hy-filter-group__filter" }, h("button", { type: "button", class: "hy-filter-group__button", "aria-label": `Deselect ${this.filterGroupItemLabel}` }, this.filterGroupItemLabel, h("hy-icon", { class: "hy-filter-group__button-icon", icon: 'hy-icon-remove', size: 10, "aria-hidden": "true", fill: ColorVariant.grey_dark })), h("slot", null)));
|
|
3899
|
-
}
|
|
3900
|
-
};
|
|
3901
|
-
|
|
3902
|
-
const hyFilterListTypeCss = ":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-filter__list-type{display:none}@media (min-width: 60rem){.hy-filter__list-type{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--main-font-family)}}@media (min-width: 60rem){.hy-filter__list-type span{font-size:0.875rem;line-height:18px;font-weight:600;color:var(--grayscale-black);letter-spacing:-0.5px;text-align:right}}@media (min-width: 1601px){.hy-filter__list-type span{font-size:1rem;line-height:20px}}.hy-filter__list-type__list{background:var(--grayscale-background-box);border:none;margin:0 8px;padding:10px}.hy-filter__list-type__list svg{background-color:var(--grayscale-background-box);fill:var(--brand-main-light)}.hy-filter__list-type__list.is-active{background:white;border:black 1px solid}.hy-filter__list-type__list.is-active svg{background-color:var(--grayscale-white);fill:var(--grayscale-black)}.hy-filter__list-type__list:hover{cursor:pointer}.hy-filter__list-type__grid{background:var(--grayscale-background-box);border:none;padding:10px}.hy-filter__list-type__grid svg{background-color:var(--grayscale-background-box);fill:var(--brand-main-light)}.hy-filter__list-type__grid.is-active{background:white;border:black 1px solid}.hy-filter__list-type__grid.is-active svg{background-color:var(--grayscale-white);fill:var(--grayscale-black)}.hy-filter__list-type__grid:hover{cursor:pointer}";
|
|
3903
|
-
|
|
3904
|
-
let HyFilterListType = class {
|
|
3905
|
-
constructor(hostRef) {
|
|
3906
|
-
registerInstance(this, hostRef);
|
|
3907
|
-
}
|
|
3908
|
-
render() {
|
|
3909
|
-
return (h("div", { class: "hy-filter__list-type" }, h("span", null, this.filterLabel), h("button", { type: "button", class: {
|
|
3910
|
-
'hy-filter-item': true,
|
|
3911
|
-
'hy-filter__list-type__list': true,
|
|
3912
|
-
'is-active': this.filterValue == ListStyleVariants.list,
|
|
3913
|
-
}, "aria-label": `${this.filterLabel}--list` }, h("hy-icon", { class: "hy-filter-group__button-icon", icon: 'hy-icon-list-style-list', size: 16, "aria-hidden": "true" })), h("button", { type: "button", class: {
|
|
3914
|
-
'hy-filter-item': true,
|
|
3915
|
-
'hy-filter__list-type__grid': true,
|
|
3916
|
-
'is-active': this.filterValue == ListStyleVariants.grid,
|
|
3917
|
-
}, "aria-label": `${this.filterLabel}--grid` }, h("hy-icon", { class: "hy-filter-group__button-icon", icon: 'hy-icon-list-style-grid', size: 16, "aria-hidden": "true" }))));
|
|
3918
|
-
}
|
|
3919
|
-
};
|
|
3920
|
-
HyFilterListType.style = hyFilterListTypeCss;
|
|
3921
|
-
|
|
3922
|
-
const hyFilterVisibilityToolCss = ":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-filter-visibility-tool{font-size:0.875rem;line-height:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:0;color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.35px;padding:0;margin-right:1rem}@media (min-width: 30rem){.hy-filter-visibility-tool{font-size:1rem;line-height:20px;letter-spacing:-0.5px}}.hy-filter-visibility-tool:hover{color:var(--brand-main);cursor:pointer}.hy-filter-visibility-tool:hover svg{fill:var(--brand-main)}.hy-filter-visibility-tool:focus{color:var(--brand-main);outline-offset:1px;outline:2px solid var(--brand-main)}.hy-filter-visibility-tool:focus svg{fill:var(--brand-main)}.hy-filter-visibility-tool__icon{-ms-flex-negative:0;flex-shrink:0;margin-right:6px}.hy-filter-visibility-tool__icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-filter-visibility-tool__icon svg{height:16px;width:16px}}";
|
|
3923
|
-
|
|
3924
|
-
let HyFilterVisibilityTool = class {
|
|
3925
|
-
constructor(hostRef) {
|
|
3926
|
-
registerInstance(this, hostRef);
|
|
3927
|
-
}
|
|
3928
|
-
render() {
|
|
3929
|
-
switch (this.filterVisibilityToolType) {
|
|
3930
|
-
case 'toggle':
|
|
3931
|
-
return (h(Host, null, h("hy-filter-visibility-tool-toggle", null)));
|
|
3932
|
-
case 'reset':
|
|
3933
|
-
return (h(Host, null, h("hy-filter-visibility-tool-reset", null)));
|
|
3934
|
-
}
|
|
3935
|
-
}
|
|
3936
|
-
};
|
|
3937
|
-
HyFilterVisibilityTool.style = hyFilterVisibilityToolCss;
|
|
3938
|
-
|
|
3939
|
-
let HyFilterVisibilityToolReset = class {
|
|
3940
|
-
constructor(hostRef) {
|
|
3941
|
-
registerInstance(this, hostRef);
|
|
3942
|
-
}
|
|
3943
|
-
render() {
|
|
3944
|
-
return (h("button", { class: "hy-filter-visibility-tool hy-filter-visibility-tool--reset", type: "button" }, h("hy-icon", { class: "hy-filter-visibility-tool__icon", icon: 'hy-icon-remove', size: 14, "aria-hidden": "true" }), "Reset filters"));
|
|
3945
|
-
}
|
|
3946
|
-
};
|
|
3947
|
-
|
|
3948
|
-
let HyFilterVisibilityToolToggle = class {
|
|
3949
|
-
constructor(hostRef) {
|
|
3950
|
-
registerInstance(this, hostRef);
|
|
3951
|
-
}
|
|
3952
|
-
render() {
|
|
3953
|
-
return (h(Host, null, h("button", { class: "hy-filter-visibility-tool hy-filter-visibility-tool--show-more", type: "button" }, h("hy-icon", { class: "hy-filter-visibility-tool__icon", icon: 'hy-icon-plus', size: 12, "aria-hidden": "true" }), "Show more filters"), h("button", { class: "hy-filter-visibility-tool hy-filter-visibility-tool--show-less", type: "button" }, h("hy-icon", { class: "hy-filter-visibility-tool__icon", icon: 'hy-icon-minus', size: 12, "aria-hidden": "true" }), "Show less filters")));
|
|
3954
|
-
}
|
|
3955
|
-
};
|
|
3956
|
-
|
|
3957
|
-
const hyFooterCss = ":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-footer{display:block}";
|
|
3958
|
-
|
|
3959
|
-
let HyFooter = class {
|
|
3960
|
-
constructor(hostRef) {
|
|
3961
|
-
registerInstance(this, hostRef);
|
|
3962
|
-
}
|
|
3963
|
-
render() {
|
|
3964
|
-
const classAttributes = ['hy-footer'];
|
|
3965
|
-
return (h("footer", { class: classAttributes.join(' ') }, h("slot", null)));
|
|
3966
|
-
}
|
|
3967
|
-
};
|
|
3968
|
-
HyFooter.style = hyFooterCss;
|
|
3969
|
-
|
|
3970
|
-
const hyFooterActionCss = ":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-footer-action{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-top:1px solid var(--grayscale-medium-dark);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:8px 16px 16px 16px;place-content:center space-between;width:100%}@media (min-width: 30rem){.hy-footer-action{margin:0 auto;max-width:120.0625rem;padding:16px 24px 16px 24px}}@media (min-width: 60rem){.hy-footer-action{padding:16px 32px 24px 32px}}.hy-footer-action__updated-text{font-size:0.875rem;line-height:24px;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:0}@media (min-width: 30rem){.hy-footer-action__updated-text{font-size:1rem;line-height:24px}}.hy-footer-action__scroll-up{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-footer-action__scroll-up .hy-footer-action__up-button{background-color:var(--brand-main-light);border:0;-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.05);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.05);padding:8px}.hy-footer-action__scroll-up .hy-footer-action__up-button:hover{cursor:pointer}.hy-footer-action__scroll-up label{font-size:1rem;line-height:24px;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:0;margin-right:8px}.hy-footer-action__scroll-up svg{fill:var(--grayscale-white)}.hy-footer-action__scroll-up:hover label{text-decoration:underline}.hy-footer-action__scroll-up:hover .hy-footer-action__up-button{background-color:var(--brand-main)}";
|
|
3971
|
-
|
|
3972
|
-
let HyFooterAction = class {
|
|
3973
|
-
constructor(hostRef) {
|
|
3974
|
-
registerInstance(this, hostRef);
|
|
3975
|
-
}
|
|
3976
|
-
scrollTop() {
|
|
3977
|
-
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
3978
|
-
}
|
|
3979
|
-
render() {
|
|
3980
|
-
const classAttributes = ['hy-footer-action'].join(' ');
|
|
3981
|
-
return (h(Host, { class: classAttributes }, h("span", { class: 'hy-footer-action__updated-text' }, this.updatedText), this.upButtonLabel && (h("span", { class: "hy-footer-action__scroll-up" }, h("label", { htmlFor: "scroll-up" }, this.upButtonLabel), h("button", { name: "scroll-up", onClick: () => this.scrollTop(), class: "hy-footer-action__up-button", type: "button" }, h("hy-icon", { class: 'hy-footer-action__up-icon', icon: 'hy-icon-arrow-up', size: 26 }))))));
|
|
3982
|
-
}
|
|
3983
|
-
};
|
|
3984
|
-
HyFooterAction.style = hyFooterActionCss;
|
|
3582
|
+
}
|
|
3985
3583
|
|
|
3986
|
-
|
|
3584
|
+
// Controller which will be assigned to all instances of ResizeObserver.
|
|
3585
|
+
const controller = new ResizeObserverController();
|
|
3586
|
+
|
|
3587
|
+
// Registry of internal observers.
|
|
3588
|
+
const observers = new WeakMap();
|
|
3589
|
+
|
|
3590
|
+
/**
|
|
3591
|
+
* ResizeObservers' "Proxy" class which is meant to hide private
|
|
3592
|
+
* properties and methods from public instances.
|
|
3593
|
+
*
|
|
3594
|
+
* Additionally it implements "idleTimeout" and "continuousUpdates" static property
|
|
3595
|
+
* accessors to give a control over the behavior of ResizeObserverController
|
|
3596
|
+
* instance. Changes made to these properties will affect all future and
|
|
3597
|
+
* existing observers.
|
|
3598
|
+
*/
|
|
3599
|
+
class ResizeObserver$2 {
|
|
3600
|
+
/**
|
|
3601
|
+
* Creates a new instance of ResizeObserver.
|
|
3602
|
+
*
|
|
3603
|
+
* @param {Function} callback - Callback which will
|
|
3604
|
+
* be invoked when dimensions of one of the
|
|
3605
|
+
* observed elements have been changed.
|
|
3606
|
+
*/
|
|
3607
|
+
constructor(callback) {
|
|
3608
|
+
if (!arguments.length) {
|
|
3609
|
+
throw new TypeError('1 argument required, but only 0 present.');
|
|
3610
|
+
}
|
|
3611
|
+
|
|
3612
|
+
const observer = new ResizeObserver$3(callback, controller, this);
|
|
3613
|
+
|
|
3614
|
+
// Register an internal observer.
|
|
3615
|
+
observers.set(this, observer);
|
|
3616
|
+
}
|
|
3617
|
+
|
|
3618
|
+
/**
|
|
3619
|
+
* Extracts controllers' idle timeout value.
|
|
3620
|
+
*
|
|
3621
|
+
* @returns {Number}
|
|
3622
|
+
*/
|
|
3623
|
+
static get idleTimeout() {
|
|
3624
|
+
return controller.idleTimeout;
|
|
3625
|
+
}
|
|
3626
|
+
|
|
3627
|
+
/**
|
|
3628
|
+
* Sets up new idle timeout.
|
|
3629
|
+
*
|
|
3630
|
+
* @param {Number} value - New timeout value.
|
|
3631
|
+
*/
|
|
3632
|
+
static set idleTimeout(value) {
|
|
3633
|
+
if (typeof value !== 'number') {
|
|
3634
|
+
throw new TypeError('type of "idleTimeout" value must be a number.');
|
|
3635
|
+
}
|
|
3636
|
+
|
|
3637
|
+
if (typeof value < 0) {
|
|
3638
|
+
throw new TypeError('"idleTimeout" value must be greater than 0.');
|
|
3639
|
+
}
|
|
3640
|
+
|
|
3641
|
+
controller.idleTimeout = value;
|
|
3642
|
+
}
|
|
3643
|
+
|
|
3644
|
+
/**
|
|
3645
|
+
* Tells whether continuous updates are enabled.
|
|
3646
|
+
*
|
|
3647
|
+
* @returns {Boolean}
|
|
3648
|
+
*/
|
|
3649
|
+
static get continuousUpdates() {
|
|
3650
|
+
return controller.continuousUpdates;
|
|
3651
|
+
}
|
|
3652
|
+
|
|
3653
|
+
/**
|
|
3654
|
+
* Enables or disables continuous updates.
|
|
3655
|
+
*
|
|
3656
|
+
* @param {Boolean} value - Whether to enable or disable
|
|
3657
|
+
* continuous updates.
|
|
3658
|
+
*/
|
|
3659
|
+
static set continuousUpdates(value) {
|
|
3660
|
+
if (typeof value !== 'boolean') {
|
|
3661
|
+
throw new TypeError('type of "continuousUpdates" value must be a boolean.');
|
|
3662
|
+
}
|
|
3663
|
+
|
|
3664
|
+
controller.continuousUpdates = value;
|
|
3665
|
+
}
|
|
3666
|
+
}
|
|
3667
|
+
|
|
3668
|
+
// Expose public methods of ResizeObserver.
|
|
3669
|
+
[
|
|
3670
|
+
'observe',
|
|
3671
|
+
'unobserve',
|
|
3672
|
+
'disconnect'
|
|
3673
|
+
].forEach(method => {
|
|
3674
|
+
ResizeObserver$2.prototype[method] = function () {
|
|
3675
|
+
return observers.get(this)[method](...arguments);
|
|
3676
|
+
};
|
|
3677
|
+
});
|
|
3987
3678
|
|
|
3988
|
-
let
|
|
3989
|
-
|
|
3990
|
-
|
|
3991
|
-
|
|
3992
|
-
|
|
3993
|
-
|
|
3994
|
-
|
|
3995
|
-
|
|
3996
|
-
* Logo size
|
|
3997
|
-
*/
|
|
3998
|
-
this.size = SiteLogoSize.big;
|
|
3999
|
-
}
|
|
4000
|
-
async componentWillLoad() {
|
|
4001
|
-
this._dataFooterBaseLinks = await jsonParserWorker(this.dataFooterBaseLinks);
|
|
4002
|
-
this._dataFooterBaseSome = await jsonParserWorker(this.dataFooterBaseSome);
|
|
4003
|
-
}
|
|
4004
|
-
render() {
|
|
4005
|
-
const logoColor = ColorVariant.white;
|
|
4006
|
-
const classAttributes = ['hy-footer-base--content-container'].join(' ');
|
|
4007
|
-
const links = this._dataFooterBaseLinks;
|
|
4008
|
-
const some = this._dataFooterBaseSome;
|
|
4009
|
-
return (h(Host, { class: classAttributes }, h("div", { class: "hy-footer-base" }, h("div", { class: "hy-footer-base__left" }, h("div", { class: "hy-footer-base__logo" }, h("hy-site-logo", { type: FooterVariant.footer, size: 56, color: logoColor, url: this.logoUrl, label: this.logoLabel })), h("div", { class: "hy-footer-base__content" }, h("slot", { name: "content" })), h("div", { class: "hy-footer-base__some" }, h("span", { class: "hy-footer-base__some__label" }, this.someLabel), h("div", { class: "hy-footer-base__some__items" }, some &&
|
|
4010
|
-
some.map((s) => {
|
|
4011
|
-
return (h("a", { "aria-label": s.label, href: s.url, class: `hy-footer-base__some__item`, title: s.label, target: "_blank" }, h("hy-icon", { icon: `hy-icon-some-${s.type}`, size: 36 })));
|
|
4012
|
-
})))), h("div", { class: "hy-footer-base__right" }, links &&
|
|
4013
|
-
links.map((link) => {
|
|
4014
|
-
return (h("hy-footer-link-item", { label: link.label, url: link.url, color: FooterLinkItemColor.white }));
|
|
4015
|
-
}), this.copyrightText && h("span", { class: "hy-footer-base__copy" }, this.copyrightText)))));
|
|
4016
|
-
}
|
|
4017
|
-
};
|
|
4018
|
-
HyFooterBase.style = hyFooterBaseCss;
|
|
3679
|
+
let ResizeObserver = ResizeObserver$2;
|
|
3680
|
+
|
|
3681
|
+
// Export existing implementation if it's available.
|
|
3682
|
+
if (typeof window.ResizeObserver === 'function') {
|
|
3683
|
+
ResizeObserver = window.ResizeObserver;
|
|
3684
|
+
}
|
|
3685
|
+
|
|
3686
|
+
const ResizeObserver$1 = ResizeObserver;
|
|
4019
3687
|
|
|
4020
3688
|
const hyFooterInfoCss = ":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-footer-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:auto;padding:0 16px 40px 16px;place-content:center space-between}@media (min-width: 30rem){.hy-footer-info{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0 auto;max-width:120.0625rem;padding:0 24px 32px 24px}}@media (min-width: 60rem){.hy-footer-info{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:0 32px 36px 32px}}@media (min-width: 75.0625rem){.hy-footer-info{padding:0 32px 40px 32px}}.hy-footer-info__content{margin-bottom:24px;width:100%}@media (min-width: 30rem){.hy-footer-info__content{margin-bottom:32px;width:100%}}@media (min-width: 60rem){.hy-footer-info__content{width:31.11%}}.hy-footer-info__content .hy-heading{padding-top:0 !important}.hy-footer-info__ingress{font-size:0.9375rem;line-height:20px;font-weight:400;letter-spacing:-0.09px;color:var(--grayscale-black);font-family:var(--main-font-family);padding-bottom:24px}@media (min-width: 60rem){.hy-footer-info__ingress{font-size:1rem;line-height:22px;letter-spacing:-0.1px;padding-bottom:16px}}@media (min-width: 1601px){.hy-footer-info__ingress{font-size:1.0625rem;line-height:26px}}@media (min-width: 75.0625rem){.hy-footer-info__ingress{padding-bottom:24px}}.hy-footer-info__ingress a{font-size:0.875rem;line-height:20px;color:var(--link-blue);font-family:var(--main-font-family);font-weight:600;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}@media (min-width: 30rem){.hy-footer-info__ingress a{font-size:1rem;line-height:24px;letter-spacing:-0.1px}}@media (min-width: 1601px){.hy-footer-info__ingress a{font-size:1.0625rem;line-height:26px}}.hy-footer-info__ingress a:hover{color:var(--brand-main)}.hy-footer-info__ingress a[target=_blank]:after{display:block;content:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");margin-left:3px;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.hy-footer-info__ingress a[target=_blank]:after:hover{content:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\")}.hy-footer-info__ingress a[target=_blank]:hover:after{content:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\")}.hy-footer-info__links{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;max-height:auto;overflow:hidden;width:100%}@media (min-width: 30rem){.hy-footer-info__links{-ms-flex-line-pack:justify;align-content:space-between;max-height:555px;width:100%}}@media (min-width: 60rem){.hy-footer-info__links{max-height:530px;width:65.56%}}@media (min-width: 87.5rem){.hy-footer-info__links{max-height:460px}}@media (min-width: 30rem){.hy-footer-info__links.is-group:not(.luomus){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;max-height:none}}.hy-footer-info .hy-accordion__content--inner-wrapper{width:100%}.hy-footer-info.luomus{background-color:var(--grayscale-black);color:var(--grayscale-white);padding-top:40px}.hy-footer-info.luomus .hy-footer-info__logo{font-size:1.125rem;line-height:16px;font-family:var(--main-font-family);font-weight:bold;letter-spacing:-0.9px}.hy-footer-info.luomus .hy-footer-info__logo .hy-site-logo__label{min-width:100%;max-width:100%}.hy-footer-info.luomus .hy-footer-info__branding{padding:22px 0 62px}.hy-footer-info.luomus .hy-footer-info__branding a img{height:32px;width:148px}.hy-footer-info.luomus .luomus-footer-content{color:var(--grayscale-white);margin:8px 0}.hy-footer-info.luomus .luomus-footer-content__link{font-size:1.125rem;line-height:24px;font-weight:700;color:var(--grayscale-white);font-family:var(--main-font-family);font-style:normal;letter-spacing:-0.36px;text-decoration:none}.hy-footer-info.luomus .luomus-footer-content__description{font-size:1rem;line-height:22px;font-weight:400;color:var(--grayscale-white);font-family:var(--main-font-family);font-style:normal;letter-spacing:-0.1px;padding-bottom:32px}";
|
|
4021
3689
|
|
|
@@ -5507,245 +5175,6 @@ let HyMainContentWrapper = class {
|
|
|
5507
5175
|
};
|
|
5508
5176
|
HyMainContentWrapper.style = hyMainContentWrapperCss;
|
|
5509
5177
|
|
|
5510
|
-
const menuCss = ":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{margin:0;padding:0}.hy-mobile-menu__header{display:grid;grid-template-columns:1fr auto;padding:12px 16px;gap:16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hy-mobile-menu__menu-close-button{font-size:1rem;line-height:18px;font-weight:700;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:none;color:var(--brand-main);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);letter-spacing:-0.3px;padding:16px;margin-left:auto;margin-right:-16px;pointer-events:none;visibility:hidden}.hy-mobile-menu__menu-close-button:hover{cursor:pointer}.hy-mobile-menu__menu-close-button hy-icon{margin-left:8px}.hy-mobile-menu__menu-close-button hy-icon svg{fill:var(--brand-main)}.hy-menu-wrapper--mobile{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;bottom:0;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:stretch;left:0;position:absolute;right:0;top:0;z-index:99}.hy-menu-wrapper--mobile.is-open{z-index:101}.hy-menu-wrapper--desktop{padding:0}.hy-menu-wrapper--sidenav{display:none}.hy-menu-wrapper--sidenav.is-demo{display:block}@media (min-width: 30rem){.hy-menu-wrapper--sidenav{display:block}}.hy-mobile-menu__menu-container{min-height:calc(100vh - 126px);overflow-x:hidden;overflow-y:visible}.hy-menu--mobile{-webkit-overflow-scrolling:touch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:0.45s;transition:0.45s;width:100%;z-index:100}@media (min-width: 75.0625rem){.hy-menu--mobile:not(.is-demo){min-height:0;-webkit-transform:translateX(0);transform:translateX(0);visibility:visible}}.hy-menu--mobile.is-open{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);transition:-webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0, 0, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1)}.hy-menu--mobile.is-open::after{opacity:1;visibility:visible}.hy-menu-breadcrumb-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column}.hy-menu__logo-container{display:inline-block;padding:16px;z-index:100}@media (min-width: 30rem){.hy-menu__logo-container{padding:16px 28px}}.hy-mobile-menu__donate{background-color:var(--grayscale-white);bottom:0;-webkit-box-shadow:rgba(14, 104, 139, 0.2) 0px -20px 20px -20px;box-shadow:rgba(14, 104, 139, 0.2) 0px -20px 20px -20px;position:sticky;z-index:102}.hy-mobile-menu__donate a{font-size:1rem;line-height:16px;font-weight:600;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);color:var(--grayscale-black);display:block;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;letter-spacing:-0.4px;padding:20px 0 16px;text-align:center;text-decoration:none}.hy-mobile-menu__donate a:focus{outline:solid 2px var(--additional-yellow)}.hy-mobile-menu__donate a svg{margin-right:5px}.hy-menu__breadcrumbs{display:block;position:relative}.hy-menu__breadcrumbs.is-empty{min-height:35px}";
|
|
5511
|
-
|
|
5512
|
-
let breadcrumbTimeout = null;
|
|
5513
|
-
let addbreadTimeout = null;
|
|
5514
|
-
let Menu = class {
|
|
5515
|
-
constructor(hostRef) {
|
|
5516
|
-
registerInstance(this, hostRef);
|
|
5517
|
-
this.menuContainerToggled = createEvent(this, "menuContainerToggled", 7);
|
|
5518
|
-
this.isGroup = false;
|
|
5519
|
-
this.isDemo = false;
|
|
5520
|
-
this.menuIsOpen = true;
|
|
5521
|
-
this.menuType = null;
|
|
5522
|
-
}
|
|
5523
|
-
// Listener for removing a breadcrumb from mobile menu breadcrumbs.
|
|
5524
|
-
async removeBreadcrumb(data) {
|
|
5525
|
-
clearTimeout(breadcrumbTimeout);
|
|
5526
|
-
let breadcrumbs = await jsonParserWorker(this.breadcrumbs);
|
|
5527
|
-
breadcrumbTimeout = setTimeout(() => {
|
|
5528
|
-
let currentBreadcrumb = breadcrumbs
|
|
5529
|
-
.map(function (e) {
|
|
5530
|
-
return e.bid;
|
|
5531
|
-
})
|
|
5532
|
-
.indexOf(data.detail.bid);
|
|
5533
|
-
for (let i = currentBreadcrumb, l = this.breadcrumbs.length; i < l; i++) {
|
|
5534
|
-
this.menuContainerToggled.emit({
|
|
5535
|
-
triggerItem: this.breadcrumbs[i].bid,
|
|
5536
|
-
triggerType: 'remove',
|
|
5537
|
-
});
|
|
5538
|
-
}
|
|
5539
|
-
this.breadcrumbs = [];
|
|
5540
|
-
this.breadcrumbs = breadcrumbs.slice(0, -1);
|
|
5541
|
-
// Reset if home breadcrumb link has been clicked.
|
|
5542
|
-
if (currentBreadcrumb === 0) {
|
|
5543
|
-
this.breadcrumbs = [];
|
|
5544
|
-
// Notify menu-level-container toggle listener about closing all levels.
|
|
5545
|
-
let elements = this.el.querySelectorAll('.hy-menu-level-container--mobile');
|
|
5546
|
-
elements.forEach((element) => {
|
|
5547
|
-
if (!element.classList.contains('hy-menu-level-container--level-0')) {
|
|
5548
|
-
this.menuContainerToggled.emit({
|
|
5549
|
-
triggerItem: element.getAttribute('trigger-item'),
|
|
5550
|
-
triggerType: 'remove',
|
|
5551
|
-
});
|
|
5552
|
-
}
|
|
5553
|
-
});
|
|
5554
|
-
}
|
|
5555
|
-
}, 100);
|
|
5556
|
-
}
|
|
5557
|
-
// Listener for adding a breadcrumb to mobile menu breadcrumbs.
|
|
5558
|
-
addBreadcrumb(event) {
|
|
5559
|
-
clearTimeout(addbreadTimeout);
|
|
5560
|
-
addbreadTimeout = setTimeout(() => {
|
|
5561
|
-
this.breadcrumbs = [
|
|
5562
|
-
...this.breadcrumbs,
|
|
5563
|
-
{
|
|
5564
|
-
label: event.detail.label,
|
|
5565
|
-
bid: event.detail.bid,
|
|
5566
|
-
url: event.detail.url,
|
|
5567
|
-
},
|
|
5568
|
-
];
|
|
5569
|
-
}, 100);
|
|
5570
|
-
}
|
|
5571
|
-
async componentWillLoad() {
|
|
5572
|
-
this.breadcrumbs = [];
|
|
5573
|
-
}
|
|
5574
|
-
disconnectedCallback() {
|
|
5575
|
-
clearTimeout(breadcrumbTimeout);
|
|
5576
|
-
clearTimeout(addbreadTimeout);
|
|
5577
|
-
}
|
|
5578
|
-
componentWillUpdate() {
|
|
5579
|
-
// Pass the menu type and menu-button-submenu-expand attributes to
|
|
5580
|
-
// the child menu-level-container component.
|
|
5581
|
-
this.el.children[0].setAttribute('menu-type', this.menuType);
|
|
5582
|
-
this.el.children[0].setAttribute('menu-button-submenu-expand', this.menuButtonSubmenuExpand);
|
|
5583
|
-
}
|
|
5584
|
-
componentWillRender() {
|
|
5585
|
-
// Set the donate link data.
|
|
5586
|
-
if (this.dataMenuDonate) {
|
|
5587
|
-
this.donateLink = JSON.parse(this.dataMenuDonate);
|
|
5588
|
-
}
|
|
5589
|
-
// Set demo value to all children to provide better UI for DS users.
|
|
5590
|
-
if (this.isDemo) {
|
|
5591
|
-
const items = Array.from(this.el.children);
|
|
5592
|
-
items.forEach((item) => {
|
|
5593
|
-
item.setAttribute('is-demo', 'true');
|
|
5594
|
-
});
|
|
5595
|
-
}
|
|
5596
|
-
}
|
|
5597
|
-
render() {
|
|
5598
|
-
if (this.menuType === null)
|
|
5599
|
-
return;
|
|
5600
|
-
switch (this.menuType) {
|
|
5601
|
-
case MenuType.desktop:
|
|
5602
|
-
return (h("div", { class: 'hy-wrapper' }, h("nav", { role: 'navigation', class: {
|
|
5603
|
-
'hy-menu-wrapper--desktop': true,
|
|
5604
|
-
'is-open': this.menuIsOpen,
|
|
5605
|
-
} }, h("div", { class: 'hy-menu hy-menu--desktop' }, h("slot", null)))));
|
|
5606
|
-
case MenuType.mobile:
|
|
5607
|
-
return (h("nav", { "data-is-group": this.isGroup, role: 'navigation', class: "hy-mobile-menu" }, h("section", { class: "hy-mobile-menu__header" }, h("div", { id: 'menu-bc-container', class: {
|
|
5608
|
-
'hy-mobile-menu__breadcrumbs': true,
|
|
5609
|
-
'is-empty': this.breadcrumbs.length === 0,
|
|
5610
|
-
} }, this.breadcrumbs.length ? (h("hy-menu-mobile-breadcrumb", { "label-back": this.menuButtonBreadcrumbReturn, "label-front-page": this.labelFrontPage, label: this.breadcrumbs[this.breadcrumbs.length - 1].label, bid: this.breadcrumbs[this.breadcrumbs.length - 1].bid })) : (h("hy-menu-mobile-breadcrumb", { "label-back": this.menuButtonBreadcrumbReturn, "label-front-page": this.menuButtonBreadcrumbHome, label: this.menuButtonBreadcrumbHome, "is-first": true, "logo-url": this.logoUrl }))), h("button", { class: `hy-mobile-menu__menu-close-button`, "aria-label": "Close menu", disabled: true, "aria-hidden": "true" }, h("span", null, "Close"), h("hy-icon", { icon: 'hy-icon-remove', size: 16 }))), h("section", { class: "hy-mobile-menu__menu-container" }, h("div", { "aria-hidden": `${!this.menuIsOpen}`, class: {
|
|
5611
|
-
'hy-menu': true,
|
|
5612
|
-
'hy-menu--mobile': true,
|
|
5613
|
-
'is-open': this.menuIsOpen,
|
|
5614
|
-
'is-demo': this.isDemo,
|
|
5615
|
-
} }, h("slot", null))), !this.isGroup && (h("div", { class: 'hy-mobile-menu__donate' }, this.donateLink
|
|
5616
|
-
? this.donateLink.map((i) => (h("a", { href: i.url }, h("hy-icon", { icon: 'hy-icon-heart-support', fill: 'currentColor', size: 16 }), i.label)))
|
|
5617
|
-
: ''))));
|
|
5618
|
-
}
|
|
5619
|
-
}
|
|
5620
|
-
get el() { return getElement(this); }
|
|
5621
|
-
};
|
|
5622
|
-
Menu.style = menuCss;
|
|
5623
|
-
|
|
5624
|
-
const menuItemCss = ":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-menu-item--mobile){--menu-item-display:flex;display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:4px}:host(.hy-menu-item--mobile.hy-menu-item--alternative){border-bottom:0 none;border-top:1px solid black}:host(.hy-menu-item--mobile:last-of-type){border-bottom:0 none}:host(.hy-menu-item--mobile.is-hidden){visibility:hidden !important}:host(.hy-menu-item--mobile.is-hidden):focus{outline:none}:host(.hy-menu-item--sidenav){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;--hy-menu-item-sidenav-display:block}:host(.hy-menu-item--sidenav.is-active){display:block;visibility:visible}:host(.hy-menu-item--sidenav.is-active--child){display:block;visibility:visible}:host(.hy-menu-item--sidenav.in-active-trail){display:block;visibility:visible}:host(.hy-menu-item) a{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}:host(.hy-menu-item) a:focus{outline:solid 2px var(--additional-yellow);outline-offset:-2px}:host(.hy-menu-item) a .hy-menu-item__label 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)}:host(.hy-menu-item) a .hy-menu-item__label hy-icon svg{fill:var(--brand-main)}:host(.hy-menu-item) a.hy-menu-item--mobile.first{font-size:1.3125rem;line-height:28px;font-weight:700;color:var(--brand-main-light);letter-spacing:-0.42px;padding:16px 0 16px 16px}:host(.hy-menu-item) a.hy-menu-item--mobile.is-active{color:var(--grayscale-black);position:relative}:host(.hy-menu-item) a.hy-menu-item--mobile.is-active:before{border-left:3px solid var(--grayscale-black);content:\"\";height:75%;left:10px;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host(.hy-menu-item) a.hy-menu-item--mobile.in-active-trail{font-weight:700;color:var(--grayscale-black)}:host(.hy-menu-item) a.hy-menu-item--mobile.in-active-trail:before{border-left-width:3px;height:55%}:host(.hy-menu-item) a.hy-menu-item--mobile.is-heading{font-size:1.3125rem;line-height:28px;font-weight:700;color:var(--brand-main-light);letter-spacing:-0.42px;padding:16px}:host(.hy-menu-item) a.hy-menu-item--mobile.is-heading.is-active,:host(.hy-menu-item) a.hy-menu-item--mobile.is-heading.in-active-trail{font-weight:700;background:transparent;border-bottom:0;color:var(--grayscale-black)}:host(.hy-menu-item) a.hy-menu-item--mobile.is-heading.is-active:before,:host(.hy-menu-item) a.hy-menu-item--mobile.is-heading.in-active-trail:before{border-left-width:3px;height:55%}:host(.hy-menu-item) a.hy-menu-item--mobile>hy-icon{-ms-flex-item-align:start;align-self:flex-start;margin-top:10px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}:host(.hy-menu-item) a.hy-menu-item--mobile hy-icon+.hy-menu-item__label{margin-left:10px}:host(.hy-menu-item) a.is-heading{display:inherit}@media (min-width: 75.0625rem){:host(.hy-menu-item) a.is-heading{display:none}}:host(.hy-menu-item) a.hy-menu-item--sidenav{font-size:1.125rem;line-height:24px;font-weight:700;color:var(--brand-main-light);display:var(--hy-menu-item-sidenav-display);font-family:var(--main-font-family);margin:10px 0;padding:8px 0}:host(.hy-menu-item) a.hy-menu-item--sidenav:focus{outline-offset:4px}:host(.hy-menu-item) a.hy-menu-item--sidenav:hover{color:var(--brand-main-nearly-black)}:host(.hy-menu-item) a.hy-menu-item--sidenav.is-active{color:var(--brand-main-nearly-black);text-decoration:none}:host(.hy-menu-item) a.hy-menu-item--sidenav.is-active .hy-menu-item__label{padding-bottom:0}:host(.hy-menu-item) a.hy-menu-item--sidenav.is-active--heading{font-size:1.625rem;line-height:40px;color:var(--brand-main-nearly-black);text-transform:uppercase}:host(.hy-menu-item) a.hy-menu-item--sidenav.is-active--heading .hy-menu-item__label{border-bottom:4px solid var(--brand-main-nearly-black);padding:0}:host(.hy-menu-item) a.hy-menu-item--sidenav.is-active--heading .hy-menu-item__label__icon{display:none}:host(.hy-menu-item) a.hy-menu-item--sidenav.is-active--child{color:var(--brand-main-light);text-decoration:none}:host(.hy-menu-item) a.hy-menu-item--sidenav .hy-menu-item__label__icon{color:var(--brand-main-light);display:inline-block;padding-left:5px}.is-active :host(.hy-menu-item) a.hy-menu-item--sidenav .hy-menu-item__label__icon{display:none}:host(.hy-menu-item) a.hy-menu-item--sidenav.is-parent{font-size:1rem;line-height:22px;font-weight:600;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main-light);display:-webkit-box;display:-ms-flexbox;display:flex;text-decoration:none}:host(.hy-menu-item) a.hy-menu-item--sidenav.is-parent:hover{color:var(--brand-main-nearly-black)}:host(.hy-menu-item) a.hy-menu-item--sidenav.is-parent:hover .hy-menu-item__label__icon{color:var(--brand-main-nearly-black)}:host(.hy-menu-item) a.hy-menu-item--sidenav.is-parent .hy-menu-item__label__icon{margin-right:8px}.hy-menu-item__button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:transparent;border:0;border-bottom:0;border-right:0;border-top:0;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0;width:44px;position:relative;-ms-flex-negative:0;flex-shrink:0}.hy-menu-item__button:before{background-color:var(--grayscale-medium);width:1px;height:32px;content:\"\";display:inline-block;-webkit-transform:translateY(-50%);transform:translateY(-50%);top:50%;left:0;position:absolute}.hy-menu-item__button svg{fill:var(--grayscale-black)}";
|
|
5625
|
-
|
|
5626
|
-
let MenuItem = class {
|
|
5627
|
-
constructor(hostRef) {
|
|
5628
|
-
registerInstance(this, hostRef);
|
|
5629
|
-
this.addBreadcrumb = createEvent(this, "addBreadcrumb", 7);
|
|
5630
|
-
this.menuContainerActiveTrail = createEvent(this, "menuContainerActiveTrail", 7);
|
|
5631
|
-
this.menuContainerToggled = createEvent(this, "menuContainerToggled", 7);
|
|
5632
|
-
this.routeClicked = createEvent(this, "routeClicked", 7);
|
|
5633
|
-
this.inActiveTrail = false;
|
|
5634
|
-
this.isActive = false;
|
|
5635
|
-
this.isActiveChild = false;
|
|
5636
|
-
this.isHeading = false;
|
|
5637
|
-
this.isParent = false;
|
|
5638
|
-
this.isDemo = false;
|
|
5639
|
-
this.isExternal = false;
|
|
5640
|
-
//@Prop() depth: number = 0;
|
|
5641
|
-
this.menuItemAlternative = false;
|
|
5642
|
-
this.menuLinkId = '';
|
|
5643
|
-
this.menuType = MenuType.desktop;
|
|
5644
|
-
this.menuButtonSubmenuExpand = '';
|
|
5645
|
-
this.ariaExpanded = false;
|
|
5646
|
-
this.depth = 0;
|
|
5647
|
-
this.hasChildren = null;
|
|
5648
|
-
this.label = '';
|
|
5649
|
-
this.parentAsHeading = '';
|
|
5650
|
-
this.parentExpanded = false;
|
|
5651
|
-
this.url = '';
|
|
5652
|
-
}
|
|
5653
|
-
// Listener for submenu expand button. Listener will toggle menu level
|
|
5654
|
-
// container and add its parent to breadcrumbs.
|
|
5655
|
-
handleClick() {
|
|
5656
|
-
this.menuContainerToggled.emit({
|
|
5657
|
-
triggerItem: this.menuLinkId,
|
|
5658
|
-
triggerType: 'add',
|
|
5659
|
-
});
|
|
5660
|
-
const currentParent = this.el.parentNode;
|
|
5661
|
-
let parentLabel = currentParent.parentElement.getAttribute('label')
|
|
5662
|
-
? currentParent.parentElement.getAttribute('label')
|
|
5663
|
-
: this.menuButtonBreadcrumbMain;
|
|
5664
|
-
let isMainMenu = parentLabel == this.menuButtonBreadcrumbMain;
|
|
5665
|
-
this.addBreadcrumb.emit({
|
|
5666
|
-
url: this.url,
|
|
5667
|
-
label: parentLabel,
|
|
5668
|
-
bid: this.menuLinkId,
|
|
5669
|
-
isMainMenu: isMainMenu,
|
|
5670
|
-
});
|
|
5671
|
-
}
|
|
5672
|
-
componentWillLoad() {
|
|
5673
|
-
// If is-active class is added by system, add it to menu component as well.
|
|
5674
|
-
if (this.el.classList.contains('is-active')) {
|
|
5675
|
-
this.isActive = true;
|
|
5676
|
-
}
|
|
5677
|
-
// Notify breadcrumbs if item is in active trail.
|
|
5678
|
-
if (this.inActiveTrail && !this.isActive) {
|
|
5679
|
-
const currentParent = this.el.parentNode;
|
|
5680
|
-
let parentLabel = currentParent.parentElement.getAttribute('label')
|
|
5681
|
-
? currentParent.parentElement.getAttribute('label')
|
|
5682
|
-
: this.menuButtonBreadcrumbMain;
|
|
5683
|
-
this.addBreadcrumb.emit({
|
|
5684
|
-
url: this.url,
|
|
5685
|
-
label: parentLabel,
|
|
5686
|
-
bid: this.menuLinkId,
|
|
5687
|
-
});
|
|
5688
|
-
}
|
|
5689
|
-
// If current menu item is active, trigger all parent menuLevelContainer
|
|
5690
|
-
// elements in the same active-trail to open the menu.
|
|
5691
|
-
if (this.isActive) {
|
|
5692
|
-
const getParents = (elem) => {
|
|
5693
|
-
let parents = [];
|
|
5694
|
-
while (elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'hy-menu') {
|
|
5695
|
-
elem = elem.parentNode;
|
|
5696
|
-
parents.push(elem);
|
|
5697
|
-
}
|
|
5698
|
-
return parents;
|
|
5699
|
-
};
|
|
5700
|
-
const parents = getParents(this.el);
|
|
5701
|
-
parents.forEach((element) => {
|
|
5702
|
-
if (element.tagName.toLowerCase() === 'hy-menu-item') {
|
|
5703
|
-
this.menuContainerActiveTrail.emit({
|
|
5704
|
-
triggerItem: element.getAttribute('menu-link-id'),
|
|
5705
|
-
});
|
|
5706
|
-
}
|
|
5707
|
-
});
|
|
5708
|
-
}
|
|
5709
|
-
this.hasChildren = this.el.getElementsByTagName('hy-menu-level-container').length >= 1;
|
|
5710
|
-
}
|
|
5711
|
-
render() {
|
|
5712
|
-
switch (this.menuType) {
|
|
5713
|
-
case MenuType.desktop:
|
|
5714
|
-
return (h(Host, { class: {
|
|
5715
|
-
'is-active': this.isActive,
|
|
5716
|
-
'hy-menu-item': true,
|
|
5717
|
-
'hy-menu-item--alternative': this.menuItemAlternative,
|
|
5718
|
-
'hy-menu-item--desktop': true,
|
|
5719
|
-
'is-demo': this.isDemo,
|
|
5720
|
-
} }, h("a", { "aria-current": this.isHeading.toString(), href: this.url, class: {
|
|
5721
|
-
'is-active': this.isActive,
|
|
5722
|
-
'in-active-trail': this.inActiveTrail,
|
|
5723
|
-
'is-heading': this.isHeading,
|
|
5724
|
-
'hy-menu-item--desktop': true,
|
|
5725
|
-
'is-demo': this.isDemo,
|
|
5726
|
-
} }, this.depth == 1 && (h("span", { class: "hy-menu-item__heading__icon" }, h("hy-icon", { icon: 'hy-icon-arrow-right', size: 40 }))), this.depth == 2 && (h("span", { class: "hy-menu-item__heading__icon" }, h("hy-icon", { icon: 'hy-icon-caret-right', size: 12 }))), h("span", { class: 'hy-menu-item__label' }, this.label)), this.hasChildren && h("slot", null)));
|
|
5727
|
-
case MenuType.mobile:
|
|
5728
|
-
return (h(Host, { class: {
|
|
5729
|
-
'is-active': this.isActive,
|
|
5730
|
-
'hy-menu-item': true,
|
|
5731
|
-
'hy-menu-item--alternative': this.menuItemAlternative,
|
|
5732
|
-
'hy-menu-item--mobile': true,
|
|
5733
|
-
'is-demo': this.isDemo,
|
|
5734
|
-
} }, h("a", { "aria-current": this.isHeading.toString(), href: this.url, class: {
|
|
5735
|
-
'is-active': this.isActive,
|
|
5736
|
-
'in-active-trail': this.inActiveTrail,
|
|
5737
|
-
'is-heading': this.isHeading,
|
|
5738
|
-
'hy-menu-item--mobile': true,
|
|
5739
|
-
'is-demo': this.isDemo,
|
|
5740
|
-
'is-external': this.isExternal,
|
|
5741
|
-
first: this.depth == 1,
|
|
5742
|
-
} }, 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)));
|
|
5743
|
-
}
|
|
5744
|
-
}
|
|
5745
|
-
get el() { return getElement(this); }
|
|
5746
|
-
};
|
|
5747
|
-
MenuItem.style = menuItemCss;
|
|
5748
|
-
|
|
5749
5178
|
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}";
|
|
5750
5179
|
|
|
5751
5180
|
let MenuLanguage = class {
|
|
@@ -5847,101 +5276,6 @@ let SiteLanguage = class {
|
|
|
5847
5276
|
};
|
|
5848
5277
|
SiteLanguage.style = menuLanguageItemCss;
|
|
5849
5278
|
|
|
5850
|
-
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)}";
|
|
5851
|
-
|
|
5852
|
-
let MenuLevelContainer = class {
|
|
5853
|
-
constructor(hostRef) {
|
|
5854
|
-
registerInstance(this, hostRef);
|
|
5855
|
-
this.menuType = MenuType.mobile;
|
|
5856
|
-
this.activeTrailTriggered = false;
|
|
5857
|
-
this.depth = 0;
|
|
5858
|
-
this.menuIsOpen = false;
|
|
5859
|
-
}
|
|
5860
|
-
// Add/Remove is-hidden class from each upper level menu-items
|
|
5861
|
-
// to make browsing more accessible.
|
|
5862
|
-
assignMenuItemClass(parentMenu, type) {
|
|
5863
|
-
if (!parentMenu)
|
|
5864
|
-
return;
|
|
5865
|
-
const items = Array.from(parentMenu.children);
|
|
5866
|
-
items.forEach((item) => {
|
|
5867
|
-
if (type === 'remove') {
|
|
5868
|
-
item.classList.remove('is-hidden');
|
|
5869
|
-
}
|
|
5870
|
-
else {
|
|
5871
|
-
item.classList.add('is-hidden');
|
|
5872
|
-
}
|
|
5873
|
-
});
|
|
5874
|
-
}
|
|
5875
|
-
// Listener for assigning active-trail for parent menu level container.
|
|
5876
|
-
menuContainerActiveTrail(data) {
|
|
5877
|
-
const currentMenuContainer = this.el.getAttribute('trigger-item');
|
|
5878
|
-
if (currentMenuContainer === data.detail.triggerItem) {
|
|
5879
|
-
this.activeTrailTriggered = true;
|
|
5880
|
-
this.menuIsOpen = true;
|
|
5881
|
-
this.assignMenuItemClass(this.el.parentElement.closest('hy-menu-level-container'), 'add');
|
|
5882
|
-
}
|
|
5883
|
-
}
|
|
5884
|
-
// Listener for opening and closing menu level container.
|
|
5885
|
-
menuContainerToggled(data) {
|
|
5886
|
-
// Toggle submenu.
|
|
5887
|
-
if (this.triggerItem == data.detail.triggerItem) {
|
|
5888
|
-
this.activeTrailTriggered = false;
|
|
5889
|
-
this.menuIsOpen = data.detail.triggerType != 'remove';
|
|
5890
|
-
this.assignMenuItemClass(this.el.parentElement.closest('hy-menu-level-container'), data.detail.triggerType);
|
|
5891
|
-
// Scroll to .hy-menu top.
|
|
5892
|
-
let hyMenu = this.el.parentElement.closest('hy-menu');
|
|
5893
|
-
hyMenu.shadowRoot.querySelector('.hy-menu').scrollTop = 0;
|
|
5894
|
-
}
|
|
5895
|
-
}
|
|
5896
|
-
componentWillUpdate() {
|
|
5897
|
-
// Pass the menu type and menu-button-submenu-expand attributes to
|
|
5898
|
-
// the child menu item component.
|
|
5899
|
-
if (this.menuType) {
|
|
5900
|
-
const items = Array.from(this.el.children);
|
|
5901
|
-
items.forEach((item) => {
|
|
5902
|
-
item.setAttribute('menu-type', this.menuType);
|
|
5903
|
-
item.setAttribute('menu-button-submenu-expand', this.menuButtonSubmenuExpand);
|
|
5904
|
-
});
|
|
5905
|
-
}
|
|
5906
|
-
}
|
|
5907
|
-
componentWillLoad() {
|
|
5908
|
-
// Set trigger item for each mobile menu level container and handle only submenus.
|
|
5909
|
-
// Add a heading element foreach level.
|
|
5910
|
-
if (this.menuType === MenuType.mobile) {
|
|
5911
|
-
if (this.menuLevel > 1) {
|
|
5912
|
-
const parentMenuItem = this.el.closest('hy-menu-item');
|
|
5913
|
-
this.triggerItem = parentMenuItem.getAttribute('menu-link-id');
|
|
5914
|
-
this.headingItem = Object.assign(Object.assign({}, this.headingItem), { url: parentMenuItem.getAttribute('url') });
|
|
5915
|
-
this.headingItem = Object.assign(Object.assign({}, this.headingItem), { label: parentMenuItem.getAttribute('label') });
|
|
5916
|
-
this.headingItem = Object.assign(Object.assign({}, this.headingItem), { isActive: window.location.pathname === this.headingItem.url });
|
|
5917
|
-
}
|
|
5918
|
-
else {
|
|
5919
|
-
this.triggerItem = 'home';
|
|
5920
|
-
}
|
|
5921
|
-
}
|
|
5922
|
-
}
|
|
5923
|
-
render() {
|
|
5924
|
-
let classAttributes = ['hy-menu-level-container', 'hy-menu-level-container--level-' + this.depth];
|
|
5925
|
-
switch (this.menuType) {
|
|
5926
|
-
case MenuType.desktop:
|
|
5927
|
-
classAttributes = [...classAttributes, 'hy-menu-level-container--desktop'];
|
|
5928
|
-
return (h(Host, { class: classAttributes.join(' ') }, h("slot", null)));
|
|
5929
|
-
case MenuType.mobile:
|
|
5930
|
-
classAttributes = [...classAttributes, 'hy-menu-level-container--mobile'];
|
|
5931
|
-
if (this.depth === 1) {
|
|
5932
|
-
classAttributes = [...classAttributes, 'is-open'];
|
|
5933
|
-
return (h(Host, { "aria-expanded": this.menuIsOpen.toString(), class: classAttributes.join(' '), tabindex: '-1' }, h("slot", null)));
|
|
5934
|
-
}
|
|
5935
|
-
else {
|
|
5936
|
-
classAttributes = [...classAttributes, this.menuIsOpen ? 'is-open' : null];
|
|
5937
|
-
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" })));
|
|
5938
|
-
}
|
|
5939
|
-
}
|
|
5940
|
-
}
|
|
5941
|
-
get el() { return getElement(this); }
|
|
5942
|
-
};
|
|
5943
|
-
MenuLevelContainer.style = menuLevelContainerCss;
|
|
5944
|
-
|
|
5945
5279
|
const hyMenuMainGroupCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#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}:host(.menu--main-group){-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;margin-left:28px}@media (min-width: 75.0625rem){:host(.menu--main-group){margin-right:auto}}.menu--main-group__toggle{font-size:0.875rem;line-height:16px;font-weight:600;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--grayscale-black);border:0 none;color:var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;font-family:var(--main-font-family);letter-spacing:-0.44px;margin:0 -4px;padding:0;position:relative}.menu--main-group__toggle:focus{outline:none}.menu--main-group__toggle:hover{cursor:pointer}.menu--main-group__toggle:hover span{color:var(--grayscale-medium)}.menu--main-group__toggle:hover svg{fill:var(--grayscale-medium)}@media (min-width: 60rem){.menu--main-group__toggle .toggle__caret svg{height:15.27px;width:3px}}@media (min-width: 75.0625rem){.menu--main-group__toggle .toggle__caret svg{height:14px;width:3px}}@media (min-width: 60rem){.menu--main-group__toggle span{margin-left:17px}}.menu--main-group__toggle.is-open:after{border-bottom:3px solid white;bottom:-10px;content:\" \";position:absolute;width:100%}@media (min-width: 60rem){.menu--main-group__toggle.is-open .toggle__close{height:15px;width:15px}.menu--main-group__toggle.is-open .toggle__close svg{height:15px;width:15px}}@media (min-width: 60rem){.menu--main-group__toggle.is-open span{margin-left:10px}}.menu--main-group__dropdown{display:none;visibility:hidden}.menu--main-group__dropdown.is-open{background-color:var(--grayscale-black);border-radius:0 0 5px 5px;-webkit-box-shadow:0 10px 10px rgba(0, 0, 0, 0.2);box-shadow:0 10px 10px rgba(0, 0, 0, 0.2);color:var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);left:0;margin:0;padding:6px 0 20px;position:absolute;top:0;visibility:visible;width:100%;z-index:511}.menu--main-group__dropdown.is-open .list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;justify-items:center;padding-top:14px;position:relative}.menu--main-group__dropdown.is-open .panel-toggle{background-color:transparent;border:none;position:absolute;right:0;top:0}@media (min-width: 60rem){.menu--main-group__dropdown.is-open .panel-toggle{padding:26px 32px}}.menu--main-group__dropdown.is-open .panel-toggle__label{font-size:1rem;line-height:20px;font-weight:700;color:var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);letter-spacing:-0.5px;text-transform:uppercase}.menu--main-group__dropdown.is-open .panel-toggle__label__title{padding-right:12px}.menu--main-group__dropdown.is-open .panel-toggle__label:hover{cursor:pointer}.menu--main-group__dropdown.is-open .panel-toggle__label:hover span{color:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .panel-toggle__label:hover svg{fill:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .menu-main-link{font-size:1rem;line-height:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:20px;text-decoration:none}@media (min-width: 75.0625rem){.menu--main-group__dropdown.is-open .menu-main-link{font-size:0.875rem;line-height:18px}}.menu--main-group__dropdown.is-open .menu-main-link:hover span{color:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .menu-main-link:hover svg{fill:var(--grayscale-medium)}.menu--main-group__dropdown.is-open .menu--main-group__label{color:var(--grayscale-white);margin-left:12px}:host(.menu--main-group--mobile){-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;position:relative}.menu--main-group__mobile-toggle{border:none;background:transparent;padding:15px 12px}.menu--main-group__mobile-toggle:hover{cursor:pointer}.menu--main-group__dropdown__top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:23px}.menu--main-group__dropdown__close{border:none;background-color:transparent;padding:0;margin:0}.menu--main-group__dropdown__close:hover{cursor:pointer}.menu--main-group__logo-container .hy-site-logo__label.group{max-width:250px}.menu--main-group__dropdown__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.menu--main-group__dropdown__items .menu-main-link{font-size:0.9375rem;line-height:20px;background-color:var(--grayscale-dark-text);color:var(--grayscale-white);font-family:var(--main-font-family);letter-spacing:-0.5px;margin-bottom:8px;padding:14px 20px;text-decoration:none;width:100%}.menu--main-group__dropdown__items .menu-main-link:hover{text-decoration:underline}.menu--main-group__dropdown__donate{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--grayscale-dark-text);position:fixed;bottom:0;margin-left:-20px;width:100%}.menu--main-group__dropdown__donate .hy-link__donate.group{font-size:1rem;line-height:16px;font-weight:600;display:-webkit-box;display:-ms-flexbox;display:flex;color:var(--grayscale-white);font-family:var(--main-font-family);margin:20px auto 16px auto;text-decoration:none}.menu--main-group__dropdown__donate .hy-link__donate.group .hy-link__donate__label{margin-left:6px}.menu--main-group__dropdown--mobile{-webkit-box-direction:normal;-webkit-box-orient:vertical;background-color:var(--grayscale-black);bottom:0px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-items:space-between;max-width:400px;overflow:hidden;padding:0px;place-items:stretch;position:fixed;right:0px;top:0px;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;visibility:hidden;width:0px}.menu--main-group__dropdown--mobile.is-open{padding:50px 20px 20px;-webkit-transform:translateX(0px);transform:translateX(0px);-webkit-transition:-webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);transition:-webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0, 0, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.3, 1);visibility:visible;width:90%;z-index:101}.menu--main-group__dropdown--mobile.is-open::after{opacity:1;visibility:visible}";
|
|
5946
5280
|
|
|
5947
5281
|
let keys$1 = {
|
|
@@ -5953,6 +5287,7 @@ let HyMenuMainGroup = class {
|
|
|
5953
5287
|
this.universityMainMenuToggled = createEvent(this, "universityMainMenuToggled", 7);
|
|
5954
5288
|
this.mobileMenuTopToggle = createEvent(this, "mobileMenuTopToggle", 7);
|
|
5955
5289
|
this.menuLabel = 'University main menu';
|
|
5290
|
+
this.menuLabelClose = 'Close';
|
|
5956
5291
|
this.isMobile = false;
|
|
5957
5292
|
this.isMenuOpen = false;
|
|
5958
5293
|
}
|
|
@@ -6078,48 +5413,12 @@ let HyMenuMainGroup = class {
|
|
|
6078
5413
|
return (h("a", { href: item.url, class: { 'menu-main-link': true } }, h("span", { class: "heading-icon" }, h("hy-icon", { icon: 'hy-icon-caret-right', size: 10, fill: white })), h("span", { class: 'menu--main-group__label' }, item.label)));
|
|
6079
5414
|
})), h("button", { onClick: (e) => this.handleComponentClick(e), class: {
|
|
6080
5415
|
'panel-toggle': true,
|
|
6081
|
-
}, "aria-label": "Close menu" }, h("span", { class: "panel-toggle__label" }, h("span", { class: "panel-toggle__label__title" },
|
|
5416
|
+
}, "aria-label": "Close menu" }, h("span", { class: "panel-toggle__label" }, h("span", { class: "panel-toggle__label__title" }, this.menuLabelClose), h("hy-icon", { icon: 'hy-icon-remove', size: 20, fill: ColorVariant.white }))))));
|
|
6082
5417
|
}
|
|
6083
5418
|
get el() { return getElement(this); }
|
|
6084
5419
|
};
|
|
6085
5420
|
HyMenuMainGroup.style = hyMenuMainGroupCss;
|
|
6086
5421
|
|
|
6087
|
-
const menuMobileBreadcrumbCss = ":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-mobile-breadcrumb{font-size:0.9375rem;line-height:22px;font-weight:400;color:var(--brand-main-light);-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:0 none;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);text-decoration:none;padding:11px 0;text-align:left}.hy-menu-mobile-breadcrumb:focus{outline:solid 2px var(--additional-yellow);outline-offset:2px}.hy-menu-mobile-breadcrumb hy-icon{margin-right:8px}.hy-menu-mobile-breadcrumb hy-icon svg{fill:var(--grayscale-black)}";
|
|
6088
|
-
|
|
6089
|
-
let MenuMobileBreadcrumb = class {
|
|
6090
|
-
constructor(hostRef) {
|
|
6091
|
-
registerInstance(this, hostRef);
|
|
6092
|
-
this.removeBreadcrumb = createEvent(this, "removeBreadcrumb", 7);
|
|
6093
|
-
this.isFirst = false;
|
|
6094
|
-
}
|
|
6095
|
-
// Listener for a click. The current breadcrumb will be remove from the list.
|
|
6096
|
-
handleClick() {
|
|
6097
|
-
this.removeBreadcrumb.emit({ bid: this.bid });
|
|
6098
|
-
}
|
|
6099
|
-
render() {
|
|
6100
|
-
return this.isFirst ? (h("a", { "aria-label": `${this.labelBack}: ${this.labelFrontPage}`, class: 'hy-menu-mobile-breadcrumb', href: this.logoUrl }, h("span", { class: 'hy-menu-mobile-breadcrumb__label' }, this.label))) : (h("button", { "aria-label": `${this.labelBack}: ${this.label}`, class: 'hy-menu-mobile-breadcrumb', onClick: () => this.handleClick() }, h("hy-icon", { icon: 'hy-icon-caret-left', size: 10 }), h("span", { class: 'hy-menu-mobile-breadcrumb__label' }, this.label)));
|
|
6101
|
-
}
|
|
6102
|
-
};
|
|
6103
|
-
MenuMobileBreadcrumb.style = menuMobileBreadcrumbCss;
|
|
6104
|
-
|
|
6105
|
-
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)}";
|
|
6106
|
-
|
|
6107
|
-
let HyMobileMenuShortcuts = class {
|
|
6108
|
-
constructor(hostRef) {
|
|
6109
|
-
registerInstance(this, hostRef);
|
|
6110
|
-
}
|
|
6111
|
-
async componentWillLoad() {
|
|
6112
|
-
this._dataShortcutLinks = await jsonParserWorker(this.dataShortcutLinks);
|
|
6113
|
-
}
|
|
6114
|
-
render() {
|
|
6115
|
-
return (h(Host, { class: "hy-mobile-menu-shortcuts" }, h("h2", null, this.shortcutsLabel), h("ul", { class: "hy-mobile-menu-shortcuts__links" }, this._dataShortcutLinks.map(({ title, url, is_external, aria_label }) => {
|
|
6116
|
-
let target = is_external ? '_blank' : '_self';
|
|
6117
|
-
return (h("li", { class: "hy-mobile-menu-shortcuts__links-item" }, h("a", { "aria-current": aria_label, href: url, class: "hy-mobile-menu-shortcuts__link", target: target, "aria-label": aria_label }, h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }), h("span", null, title, is_external && h("hy-icon", { icon: 'hy-icon-arrow-right', size: 12 })))));
|
|
6118
|
-
}))));
|
|
6119
|
-
}
|
|
6120
|
-
};
|
|
6121
|
-
HyMobileMenuShortcuts.style = mobileMenuShortcutsCss;
|
|
6122
|
-
|
|
6123
5422
|
const hyOpeningHoursCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#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-open-hours--container{font-family:var(--main-font-family);max-width:50rem;overflow:hidden}.hy-open-hours--container--exceptional{max-width:100%}.open-hours__title{text-transform:uppercase}.open-hours__date-change{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-background-box);color:var(--brand-main);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.open-hours__date-change--title{font-size:1.25rem;line-height:24px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.5px;text-align:center;text-transform:uppercase}.open-hours__date-change .open-hours__prev-date,.open-hours__date-change .open-hours__next-date{background:none;border:0;color:var(--brand-main);display:-webkit-box;display:-ms-flexbox;display:flex;height:44px;outline:5px solid var(--grayscale-white);position:relative;width:44px}.open-hours__date-change .open-hours__prev-date:hover,.open-hours__date-change .open-hours__next-date:hover{background-color:var(--hover-gray);color:var(--brand-main-active);cursor:pointer}.open-hours__date-change .open-hours__prev-date:focus,.open-hours__date-change .open-hours__next-date:focus{background-color:var(--hover-gray);color:var(--brand-main-active)}.open-hours__date-change .open-hours__prev-date:disabled,.open-hours__date-change .open-hours__next-date:disabled{cursor:none}.open-hours__date-change .open-hours__prev-date hy-icon,.open-hours__date-change .open-hours__next-date hy-icon{color:var(--link-blue);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.open-hours__date-change .open-hours__prev-date svg,.open-hours__date-change .open-hours__next-date svg{fill:currentColor;height:20px;width:20px}.open-hours__date-change .open-hours__prev-date{border-right:1px solid var(--link-blue)}.open-hours__date-change .open-hours__next-date{border-left:1px solid var(--link-blue)}.open-hours__content__top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:0.9rem;font-weight:700;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:0.5rem 0}.open-hours__content__top-label{margin:0.5rem 0 0.5rem 0;text-align:left;width:calc(100vw / 3);word-break:break-word}.open-hours__content__top-label:first-child(){margin-right:1rem}.open-hours__content__top-label.luomus{width:calc(100vw / 2)}.open-hours__content__top-label.building.luomus{text-align:center}.open-hours__content{position:relative}.open-hours__content.open-hours__loading:after{-webkit-animation-duration:1s;animation-duration:1s;font-size:3.2rem;position:absolute;left:45%;top:35%;z-index:2}.open-hours__content.slide-left{-webkit-animation:slide-left 0.2s ease-in-out both;animation:slide-left 0.2s ease-in-out both}.open-hours__content.slide-left-reverse{-webkit-animation:slide-left-reverse 0.2s ease-in-out reverse both;animation:slide-left-reverse 0.2s ease-in-out reverse both}.open-hours__content.slide-right{-webkit-animation:slide-right 0.2s ease-in-out both;animation:slide-right 0.2s ease-in-out both}.open-hours__content.slide-right-reverse{-webkit-animation:slide-right-reverse 0.2s ease-in-out reverse both;animation:slide-right-reverse 0.2s ease-in-out reverse both}.open-hours__links{margin:1.5rem 0 1rem 0}.open-hours__links .open-hours__link .hy-cta-link{width:100% !important;-webkit-box-pack:start !important;-ms-flex-pack:start !important;justify-content:flex-start !important}.open-hours__links .open-hours__link .hy-cta-link .text{width:100% !important}@-webkit-keyframes slide-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(200px);transform:translateX(200px);opacity:0}}@keyframes slide-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(200px);transform:translateX(200px);opacity:0}}@-webkit-keyframes slide-right-reverse{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(200px);transform:translateX(200px);opacity:0}}@keyframes slide-right-reverse{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(200px);transform:translateX(200px);opacity:0}}@-webkit-keyframes slide-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-200px);transform:translateX(-200px);opacity:0}}@keyframes slide-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-200px);transform:translateX(-200px);opacity:0}}@-webkit-keyframes slide-left-reverse{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-200px);transform:translateX(-200px);opacity:0}}@keyframes slide-left-reverse{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-200px);transform:translateX(-200px);opacity:0}}";
|
|
6124
5423
|
|
|
6125
5424
|
let HyOpeningHours = class {
|
|
@@ -6675,7 +5974,7 @@ let HyShortcuts = class {
|
|
|
6675
5974
|
};
|
|
6676
5975
|
HyShortcuts.style = hyShortcutsCss;
|
|
6677
5976
|
|
|
6678
|
-
const siteHeaderCss = ":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-site-header{background-color:var(--grayscale-white);z-index:100;border-bottom:2px solid var(--grayscale-dark)}@media (min-width: 75.0625rem){.hy-site-header{border-bottom:1px solid var(--grayscale-black);margin:0 auto;max-width:120.0625rem}}.hy-site-header.hy-site-header--sticky-active{-webkit-transition:-webkit-transform 200ms linear;transition:-webkit-transform 200ms linear;transition:transform 200ms linear;transition:transform 200ms linear, -webkit-transform 200ms linear;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-box-shadow:rgba(14, 104, 139, 0.2) 0 20px 20px -20px;box-shadow:rgba(14, 104, 139, 0.2) 0 20px 20px -20px}.hy-site-header.hy-site-header--sticky-visible{left:0;position:fixed;right:0;top:0}.hy-site-header.hy-site-header--sticky-visible.has-toolbar{top:39px}.hy-site-header.hy-site-header--sticky-visible.has-toolbar--large{top:79px}.hy-site-header.hy-site-header--sticky-hidden{top:0}@media (min-width: 75.0625rem){.hy-site-header.is-group hy-desktop-menu-links{margin-left:-10px}}.hy-site-header__container{padding:0 8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (min-width: 75.0625rem){.hy-site-header__container{padding:0 32px}}.hy-site-header__container.is-group{-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}@media (min-width: 75.0625rem){.hy-site-header__container.is-group{min-height:82px}}.hy-site-header__branding{padding:12px 0}@media (min-width: 75.0625rem){.hy-site-header__branding{padding:26px 0}}.hy-site-header__content-top .hy-site-header__branding{padding:8px 0}@media (min-width: 75.0625rem){.hy-site-header__content-top .hy-site-header__branding{padding:8px 0}}.hy-site-header__branding>p{font-size:0.75rem;line-height:14px;font-weight:400;font-family:var(--main-font-family);color:var(--grayscale-dark-text);letter-spacing:-0.1px;margin-bottom:4px;text-transform:uppercase}.hy-site-header__branding>p+a{min-height:auto}@media (min-width: 75.0625rem){.hy-site-header__branding>p{margin-bottom:8px}}.hy-site-header__branding>a{font-size:1rem;line-height:16px;font-weight:700;font-family:var(--main-font-family);color:var(--brand-main-nearly-black);letter-spacing:-0.6px;text-transform:uppercase;text-decoration:none;min-height:48px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (min-width: 75.0625rem){.hy-site-header__branding>a{font-size:1.625rem;line-height:30px;letter-spacing:-0.8px;min-height:auto}}.hy-site-header__branding>a img{height:100%;max-height:48px}@media (min-width: 75.0625rem){.hy-site-header__branding>a img{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}@media (min-width: 75.0625rem){.is-group:not(.is-research-group)>.hy-site-header__branding{margin-right:42px;padding-bottom:0;margin-bottom:-10px}}.hy-site-header__actions{display:inline-grid;gap:4px;grid-template-columns:repeat(3, auto);-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}@media (min-width: 1601px){.hy-site-header__actions{gap:16px}}.hy-site-header__menu-open-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:44px;background-color:transparent;border:0;padding:0;margin:0}.hy-site-header__menu-open-button[aria-expanded=true]{font-size:1rem;line-height:18px;font-weight:700;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:none;color:var(--brand-main);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);height:auto;letter-spacing:-0.3px;margin-left:auto;margin-right:-16px;padding:16px;position:fixed;right:16px;top:12px;z-index:101;width:auto}.hy-site-header__menu-open-button[aria-expanded=true]:hover{cursor:pointer}.hy-site-header__menu-open-button[aria-expanded=true] hy-icon{margin-left:8px}.hy-site-header__menu-open-button[aria-expanded=true] hy-icon svg{fill:var(--brand-main)}.hy-site-header__donate-link{font-size:0.75rem;line-height:24px;font-weight:400;display:inline-grid;font-family:var(--main-font-family);-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;grid-template-columns:repeat(2, auto);color:var(--brand-main-nearly-black);letter-spacing:-0.5px;padding:0;text-decoration:none}@media (min-width: 1601px){.hy-site-header__donate-link{font-size:0.875rem;line-height:24px}}.hy-site-header__donate-link:hover{color:var(--brand-main);cursor:pointer}.hy-site-header__donate-link:hover svg{fill:var(--brand-main)}.hy-site-header__donate-link:focus{outline:solid 2px var(--additional-yellow);outline-offset:2px}.hy-site-header__content-top .hy-site-header__donate-link{color:var(--grayscale-white)}.hy-site-header__content-top .hy-site-header__donate-link svg{fill:var(--grayscale-white)}.hy-site-header__content-top .hy-site-header__donate-link:hover{color:var(--grayscale-medium);cursor:pointer}.hy-site-header__content-top .hy-site-header__donate-link:hover svg{fill:var(--grayscale-medium)}.hy-site-header__content-top{background-color:var(--grayscale-black);border-bottom:2px solid rgba(0, 0, 0, 0.7);position:relative}.hy-backdrop{bottom:0;left:0;position:fixed;right:0;top:0;visibility:hidden}.hy-backdrop.is-active{background-color:rgba(0, 0, 0, 0.4);-webkit-transition:background-color 300ms;transition:background-color 300ms;visibility:visible;z-index:99}.hy-backdrop.is-active-top{background-color:rgba(0, 0, 0, 0.4);-webkit-transition:background-color 300ms;transition:background-color 300ms;visibility:visible;z-index:98}.hy-site-header__panel{background:var(--grayscale-white);bottom:0;overflow:hidden;position:fixed;right:0;top:0;visibility:visible;width:90%;z-index:100}@media (min-width: 30rem){.hy-site-header__panel{width:400px}}.hy-site-header__panel[aria-hidden=true]{visibility:hidden;padding:0;width:0}";
|
|
5977
|
+
const siteHeaderCss = ":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-site-header{background-color:var(--grayscale-white);z-index:100;border-bottom:2px solid var(--grayscale-dark)}@media (min-width: 75.0625rem){.hy-site-header{border-bottom:1px solid var(--grayscale-black);margin:0 auto;max-width:120.0625rem}}.hy-site-header.hy-site-header--sticky-active{-webkit-transition:-webkit-transform 200ms linear;transition:-webkit-transform 200ms linear;transition:transform 200ms linear;transition:transform 200ms linear, -webkit-transform 200ms linear;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-box-shadow:rgba(14, 104, 139, 0.2) 0 20px 20px -20px;box-shadow:rgba(14, 104, 139, 0.2) 0 20px 20px -20px}.hy-site-header.hy-site-header--sticky-visible{left:0;position:fixed;right:0;top:0}.hy-site-header.hy-site-header--sticky-visible.has-toolbar{top:39px}.hy-site-header.hy-site-header--sticky-visible.has-toolbar--large{top:79px}.hy-site-header.hy-site-header--sticky-hidden{top:0}@media (min-width: 75.0625rem){.hy-site-header.is-group hy-desktop-menu-links,.hy-site-header.is-group .hy-site-header__menu-desktop{margin-left:-10px}}.hy-site-header__container{padding:0 8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (min-width: 75.0625rem){.hy-site-header__container{padding:0 32px}}.hy-site-header__container.is-group{-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}@media (min-width: 75.0625rem){.hy-site-header__container.is-group{min-height:82px}}.hy-site-header__branding{padding:12px 0}@media (min-width: 75.0625rem){.hy-site-header__branding{padding:26px 0}}.hy-site-header__content-top .hy-site-header__branding{padding:8px 0}@media (min-width: 75.0625rem){.hy-site-header__content-top .hy-site-header__branding{padding:8px 0}}.hy-site-header__branding>p{font-size:0.75rem;line-height:14px;font-weight:400;font-family:var(--main-font-family);color:var(--grayscale-dark-text);letter-spacing:-0.1px;margin-bottom:4px;text-transform:uppercase}.hy-site-header__branding>p+a{min-height:auto}@media (min-width: 75.0625rem){.hy-site-header__branding>p{margin-bottom:8px}}.hy-site-header__branding>a{font-size:1rem;line-height:16px;font-weight:700;font-family:var(--main-font-family);color:var(--brand-main-nearly-black);letter-spacing:-0.6px;text-transform:uppercase;text-decoration:none;min-height:48px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (min-width: 75.0625rem){.hy-site-header__branding>a{font-size:1.625rem;line-height:30px;letter-spacing:-0.8px;min-height:auto}}.hy-site-header__branding>a img{height:100%;max-height:48px}@media (min-width: 75.0625rem){.hy-site-header__branding>a img{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}@media (min-width: 75.0625rem){.is-group:not(.is-research-group)>.hy-site-header__branding{margin-right:42px;padding-bottom:0;margin-bottom:-10px}}.hy-site-header__actions{display:inline-grid;gap:4px;grid-template-columns:repeat(3, auto);-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}@media (min-width: 1601px){.hy-site-header__actions{gap:16px}}.hy-site-header__menu-open-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:44px;background-color:transparent;border:0;padding:0;margin:0}.hy-site-header__menu-open-button[aria-expanded=true]{font-size:1rem;line-height:18px;font-weight:700;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:none;color:var(--brand-main);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);height:auto;letter-spacing:-0.3px;margin-left:auto;margin-right:-16px;padding:16px;position:fixed;right:16px;top:12px;z-index:101;width:auto}.hy-site-header__menu-open-button[aria-expanded=true]:hover{cursor:pointer}.hy-site-header__menu-open-button[aria-expanded=true] hy-icon{margin-left:8px}.hy-site-header__menu-open-button[aria-expanded=true] hy-icon svg{fill:var(--brand-main)}.hy-site-header__donate-link{font-size:0.75rem;line-height:24px;font-weight:400;display:inline-grid;font-family:var(--main-font-family);-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;grid-template-columns:repeat(2, auto);color:var(--brand-main-nearly-black);letter-spacing:-0.5px;padding:0;text-decoration:none}@media (min-width: 1601px){.hy-site-header__donate-link{font-size:0.875rem;line-height:24px}}.hy-site-header__donate-link:hover{color:var(--brand-main);cursor:pointer}.hy-site-header__donate-link:hover svg{fill:var(--brand-main)}.hy-site-header__donate-link:focus{outline:solid 2px var(--additional-yellow);outline-offset:2px}.hy-site-header__content-top .hy-site-header__donate-link{color:var(--grayscale-white)}.hy-site-header__content-top .hy-site-header__donate-link svg{fill:var(--grayscale-white)}.hy-site-header__content-top .hy-site-header__donate-link:hover{color:var(--grayscale-medium);cursor:pointer}.hy-site-header__content-top .hy-site-header__donate-link:hover svg{fill:var(--grayscale-medium)}.hy-site-header__content-top{background-color:var(--grayscale-black);border-bottom:2px solid rgba(0, 0, 0, 0.7);position:relative}.hy-backdrop{bottom:0;left:0;position:fixed;right:0;top:0;visibility:hidden}.hy-backdrop.is-active{background-color:rgba(0, 0, 0, 0.4);-webkit-transition:background-color 300ms;transition:background-color 300ms;visibility:visible;z-index:99}.hy-backdrop.is-active-top{background-color:rgba(0, 0, 0, 0.4);-webkit-transition:background-color 300ms;transition:background-color 300ms;visibility:visible;z-index:98}.hy-site-header__panel{background:var(--grayscale-white);bottom:0;overflow:hidden;position:fixed;right:0;top:0;visibility:visible;width:90%;z-index:100}@media (min-width: 30rem){.hy-site-header__panel{width:400px}}.hy-site-header__panel[aria-hidden=true]{visibility:hidden;padding:0;width:0}.sticky-active{padding-top:var(--nav-height, 120px);-webkit-transition:-webkit-transform 200ms linear;transition:-webkit-transform 200ms linear;transition:transform 200ms linear;transition:transform 200ms linear, -webkit-transform 200ms linear;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform}";
|
|
6679
5978
|
|
|
6680
5979
|
let clickTimer = null;
|
|
6681
5980
|
let scrollTimer = null;
|
|
@@ -6730,7 +6029,7 @@ let SiteHeader = class {
|
|
|
6730
6029
|
clearTimeout(scrollTimeout$1);
|
|
6731
6030
|
scrollTimeout$1 = setTimeout(() => {
|
|
6732
6031
|
this.check();
|
|
6733
|
-
},
|
|
6032
|
+
}, 50);
|
|
6734
6033
|
}
|
|
6735
6034
|
componentDidLoad() {
|
|
6736
6035
|
// Set the browser resize observer to gather information about browser width.
|
|
@@ -6752,8 +6051,6 @@ let SiteHeader = class {
|
|
|
6752
6051
|
this.languageLabels = labels.language_labels;
|
|
6753
6052
|
this.searchLabels = labels.search_labels;
|
|
6754
6053
|
this.groupPages = labels.group_pages;
|
|
6755
|
-
this.el.children[0].setAttribute('menu-button-breadcrumb-home', this.menuLabels['home']);
|
|
6756
|
-
this.el.children[0].setAttribute('menu-button-breadcrumb-main', this.menuLabels['main']);
|
|
6757
6054
|
this.el.children[0].setAttribute('menu-button-breadcrumb-logourl', this.logoUrl);
|
|
6758
6055
|
}
|
|
6759
6056
|
// Check for the donation link information and set it to variables accordingly.
|
|
@@ -6769,10 +6066,6 @@ let SiteHeader = class {
|
|
|
6769
6066
|
this.el.children[0].setAttribute('logo-url', this.logoUrl);
|
|
6770
6067
|
this.el.children[0].setAttribute('site-label', this.siteLabel);
|
|
6771
6068
|
this.el.children[0].setAttribute('site-url', this.siteUrl);
|
|
6772
|
-
this.el.children[0].setAttribute('menu-button-submenu-expand', this.menuLabels['expand']);
|
|
6773
|
-
this.el.children[0].setAttribute('menu-button-breadcrumb-return', this.menuLabels['return']);
|
|
6774
|
-
this.el.children[0].setAttribute('menu-button-breadcrumb-home', this.menuLabels['home']);
|
|
6775
|
-
this.el.children[0].setAttribute('menu-button-breadcrumb-main', this.menuLabels['main']);
|
|
6776
6069
|
this.el.children[0].setAttribute('menu-button-breadcrumb-logourl', this.logoUrl);
|
|
6777
6070
|
this.el.children[0].setAttribute('menu-language-label-open', this.languageLabels['open']);
|
|
6778
6071
|
this.el.children[0].setAttribute('menu-language-label-close', this.languageLabels['close']);
|
|
@@ -6780,10 +6073,14 @@ let SiteHeader = class {
|
|
|
6780
6073
|
if (this.groupType !== '') {
|
|
6781
6074
|
this.isDesktopMenuDropdown = true;
|
|
6782
6075
|
}
|
|
6076
|
+
const body = document.querySelector('body');
|
|
6077
|
+
body.style.setProperty('--nav-height', `${this.navbarHeight * 2}px`);
|
|
6783
6078
|
}
|
|
6784
6079
|
hasScrolled() {
|
|
6785
6080
|
let topOffset = window.pageYOffset;
|
|
6786
6081
|
const bodyElementClasses = document.querySelector('body').classList;
|
|
6082
|
+
const body = document.querySelector('body');
|
|
6083
|
+
body.style.setProperty('--nav-height', `${this.navbarHeight * 2}px`);
|
|
6787
6084
|
if (bodyElementClasses.contains('hy-menu-sidepanel__no-scroll') ||
|
|
6788
6085
|
bodyElementClasses.contains('hy-menu-sidebar__no-scroll')) {
|
|
6789
6086
|
return;
|
|
@@ -6791,7 +6088,7 @@ let SiteHeader = class {
|
|
|
6791
6088
|
if (Math.abs(this.lastScrollTop - topOffset) <= this.delta) {
|
|
6792
6089
|
return;
|
|
6793
6090
|
}
|
|
6794
|
-
let hySiteHeader = this.el.
|
|
6091
|
+
let hySiteHeader = this.el.querySelector('.hy-site-header');
|
|
6795
6092
|
if (!hySiteHeader)
|
|
6796
6093
|
return;
|
|
6797
6094
|
// If current position > last position AND scrolled past navbar...
|
|
@@ -6799,24 +6096,26 @@ let SiteHeader = class {
|
|
|
6799
6096
|
// Scroll Down
|
|
6800
6097
|
hySiteHeader.classList.remove('hy-site-header--sticky-visible');
|
|
6801
6098
|
hySiteHeader.classList.remove('has-toolbar', 'has-toolbar--large');
|
|
6099
|
+
bodyElementClasses.remove('sticky-active');
|
|
6802
6100
|
// Close Search panel
|
|
6803
6101
|
//CludoSayt.hide();
|
|
6804
6102
|
this.headerScrollDown.emit();
|
|
6805
6103
|
}
|
|
6806
6104
|
else {
|
|
6807
6105
|
// Scroll Up
|
|
6808
|
-
if (topOffset <= this.
|
|
6809
|
-
(topOffset <= 10 && this.el.offsetTop + this.navbarHeight == 0)) {
|
|
6106
|
+
if (topOffset <= this.navbarHeight) {
|
|
6810
6107
|
hySiteHeader.classList.remove('hy-site-header--sticky-active');
|
|
6811
6108
|
hySiteHeader.classList.remove('hy-site-header--sticky-visible');
|
|
6812
6109
|
hySiteHeader.classList.remove('hy-site-header--sticky-hidden');
|
|
6813
6110
|
hySiteHeader.classList.remove('has-toolbar', 'has-toolbar--large');
|
|
6111
|
+
bodyElementClasses.remove('sticky-active');
|
|
6814
6112
|
// Close desktop menu panel if it's open.
|
|
6815
6113
|
}
|
|
6816
6114
|
else {
|
|
6817
6115
|
hySiteHeader.classList.add('hy-site-header--sticky-active');
|
|
6818
6116
|
hySiteHeader.classList.remove('hy-site-header--sticky-hidden');
|
|
6819
6117
|
hySiteHeader.classList.add('hy-site-header--sticky-visible');
|
|
6118
|
+
bodyElementClasses.add('sticky-active');
|
|
6820
6119
|
if (bodyElementClasses.contains('toolbar-horizontal')) {
|
|
6821
6120
|
hySiteHeader.classList.add('has-toolbar');
|
|
6822
6121
|
if (bodyElementClasses.contains('toolbar-tray-open')) {
|
|
@@ -6888,18 +6187,18 @@ let SiteHeader = class {
|
|
|
6888
6187
|
'hy-backdrop': true,
|
|
6889
6188
|
'is-active': (this.isMenuOpen && !this.isDesktopMenuDropdown) ||
|
|
6890
6189
|
(this.isTopMenuOpen && !this.isDesktopMenuDropdown),
|
|
6891
|
-
} }), this.isGroup && (h("section", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? 'is-open' : ''}` }, h("div", { class: "hy-site-header__container" }, h("div", { class: "hy-site-header__branding" }, h("hy-site-logo", { "is-group": true, "is-luomus-group": this.isLuomusGroup, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), this.dataMainMenuLinks.length > 2 && (h("hy-menu-main-group", { tabindex: "0", "is-mobile": false, "menu-label": (_a = this.groupPages['university_main_menu']) !== null && _a !== void 0 ? _a : null, "data-main-menu": this.dataMainMenuLinks })), h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }), !this.noSearch && (h("hy-site-search", { class: 'menu--secondary__item group', size: 18, color: logoColorGroup, "is-group": true, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.donateLink.map(({ label, url }) => {
|
|
6190
|
+
} }), this.isGroup && (h("section", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? 'is-open' : ''}` }, h("div", { class: "hy-site-header__container" }, h("div", { class: "hy-site-header__branding" }, h("hy-site-logo", { "is-group": true, "is-luomus-group": this.isLuomusGroup, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), this.dataMainMenuLinks.length > 2 && (h("hy-menu-main-group", { tabindex: "0", "is-mobile": false, "menu-label": (_a = this.groupPages['university_main_menu']) !== null && _a !== void 0 ? _a : null, "data-main-menu": this.dataMainMenuLinks, "menu-label-close": this.menuLabelClose })), h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }), !this.noSearch && (h("hy-site-search", { class: 'menu--secondary__item group', size: 18, color: logoColorGroup, "is-group": true, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.donateLink.map(({ label, url }) => {
|
|
6892
6191
|
return (h("a", { class: 'hy-site-header__donate-link', href: url }, h("hy-icon", { icon: 'hy-icon-heart-support', size: 14, fill: ColorVariant.black }), h("span", null, label)));
|
|
6893
|
-
}))))), h("section", { class: `hy-site-header__container ${this.isGroup ? 'is-group' : ''} ${this.groupType === 'research_group_menu' ? 'is-research-group' : ''}` }, h("div", { class: 'hy-site-header__branding' }, this.isGroup && this.groupType == 'research_group_menu' && h("p", null, this.researchGroupLabel), this.isGroup ? (h("a", { href: this.logoUrl }, this.groupType == 'generic_site_group_menu' && this.groupLogoUrl ? (h("img", { src: this.groupLogoUrl, alt: `${this.logoLabel} logo` })) : (this.logoLabel))) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))), this.groupType != 'research_group_menu' &&
|
|
6192
|
+
}))))), h("section", { class: `hy-site-header__container ${this.isGroup ? 'is-group' : ''} ${this.groupType === 'research_group_menu' ? 'is-research-group' : ''}` }, h("div", { class: 'hy-site-header__branding' }, this.isGroup && this.groupType == 'research_group_menu' && h("p", null, this.researchGroupLabel), this.isGroup ? (h("a", { href: this.logoUrl }, this.groupType == 'generic_site_group_menu' && this.groupLogoUrl ? (h("img", { src: this.groupLogoUrl, alt: `${this.logoLabel} logo` })) : (this.logoLabel))) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))), this.groupType != 'research_group_menu' && h("slot", { name: "menu" }), !this.isGroup && (h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels }), !this.noSearch && (h("hy-site-search", { size: 14, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, color: ColorVariant.black, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.donateLink.map(({ label, url }) => {
|
|
6894
6193
|
return (h("a", { class: 'hy-site-header__donate-link', href: url }, h("hy-icon", { icon: 'hy-icon-heart-support', size: 14, fill: ColorVariant.black }), h("span", null, label)));
|
|
6895
6194
|
}))))),
|
|
6896
6195
|
];
|
|
6897
6196
|
case MenuType.mobile:
|
|
6898
6197
|
// Smaller than 960px screens
|
|
6899
|
-
return (h("header", { class: classAttributes.join(' ') }, h("div", { class: { 'hy-backdrop': true, 'is-active': this.isMenuOpen } }), h("div", { class: { 'hy-backdrop': true, 'is-active-top': this.isTopMenuOpen } }), this.isGroup && (h("section", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? 'is-open' : ''}` }, h("div", { class: "hy-site-header__container" }, h("div", { class: "hy-site-header__branding" }, h("hy-site-logo", { "is-group": true, "is-luomus-group": this.isLuomusGroup, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }), !this.noSearch && (h("hy-site-search", { class: 'menu--secondary__item group', size: 18, color: logoColorGroup, "is-group": true, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.dataMainMenuLinks.length > 2 && (h("hy-menu-main-group", { "site-label": this.siteLabel, "site-url": this.siteUrl, "logo-label": this.logoLabel, "logo-url": this.logoUrl, "is-mobile": true, donate: this.donateLink, "data-main-menu": this.dataMainMenuLinks })))))), h("section", { class: "hy-site-header__container" }, h("div", { class: 'hy-site-header__branding' }, this.groupType == 'research_group_menu' && h("p", null, this.researchGroupLabel), this.isGroup ? (h("a", { href: this.logoUrl }, this.groupType == 'generic_site_group_menu' && this.groupLogoUrl ? (h("img", { src: this.groupLogoUrl, alt: `${this.logoLabel} logo` })) : (this.logoLabel))) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))), h("div", { class: "hy-site-header__actions" }, !this.isGroup && (h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels })), !this.isGroup && !this.noSearch && (h("hy-site-search", { size: 24, color: ColorVariant.black, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), h("button", { onClick: () => toggleMenuMobileAndRemoveListener(), class: `hy-site-header__menu-open-button`, "aria-label": this.menuLabels['open'], "aria-expanded": `${this.isMenuOpen}` }, !this.isMenuOpen && h("hy-icon", { icon: 'hy-icon-hamburger', size: 24, fill: ColorVariant.black }), this.isMenuOpen && (h(Fragment, null, h("span", null,
|
|
6198
|
+
return (h("header", { class: classAttributes.join(' ') }, h("div", { class: { 'hy-backdrop': true, 'is-active': this.isMenuOpen } }), h("div", { class: { 'hy-backdrop': true, 'is-active-top': this.isTopMenuOpen } }), this.isGroup && (h("section", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? 'is-open' : ''}` }, h("div", { class: "hy-site-header__container" }, h("div", { class: "hy-site-header__branding" }, h("hy-site-logo", { "is-group": true, "is-luomus-group": this.isLuomusGroup, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })), h("div", { class: "hy-site-header__actions" }, h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }), !this.noSearch && (h("hy-site-search", { class: 'menu--secondary__item group', size: 18, color: logoColorGroup, "is-group": true, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), this.dataMainMenuLinks.length > 2 && (h("hy-menu-main-group", { "site-label": this.siteLabel, "site-url": this.siteUrl, "logo-label": this.logoLabel, "logo-url": this.logoUrl, "is-mobile": true, donate: this.donateLink, "data-main-menu": this.dataMainMenuLinks })))))), h("section", { class: "hy-site-header__container" }, h("div", { class: 'hy-site-header__branding' }, this.groupType == 'research_group_menu' && h("p", null, this.researchGroupLabel), this.isGroup ? (h("a", { href: this.logoUrl }, this.groupType == 'generic_site_group_menu' && this.groupLogoUrl ? (h("img", { src: this.groupLogoUrl, alt: `${this.logoLabel} logo` })) : (this.logoLabel))) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))), h("div", { class: "hy-site-header__actions" }, !this.isGroup && (h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels })), !this.isGroup && !this.noSearch && (h("hy-site-search", { size: 24, color: ColorVariant.black, "is-luomus-group": this.isLuomusGroup, "is-beta-group": this.isBetaGroup, "search-language": activeLang, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })), h("button", { onClick: () => toggleMenuMobileAndRemoveListener(), class: `hy-site-header__menu-open-button`, "aria-label": this.isMenuOpen ? this.menuLabels['close'] : this.menuLabels['open'], "aria-expanded": `${this.isMenuOpen}` }, !this.isMenuOpen && h("hy-icon", { icon: 'hy-icon-hamburger', size: 24, fill: ColorVariant.black }), this.isMenuOpen && (h(Fragment, null, h("span", null, this.menuLabelClose), h("hy-icon", { icon: 'hy-icon-remove', size: 16 }))))), h("div", { class: {
|
|
6900
6199
|
'is-open': this.isMenuOpen,
|
|
6901
6200
|
'hy-site-header__panel': true,
|
|
6902
|
-
}, "aria-hidden": `${!this.isMenuOpen}` }, h("slot", { name: '
|
|
6201
|
+
}, "aria-hidden": `${!this.isMenuOpen}` }, h("slot", { name: 'menu_mobile' })))));
|
|
6903
6202
|
}
|
|
6904
6203
|
}
|
|
6905
6204
|
get el() { return getElement(this); }
|
|
@@ -7593,4 +6892,4 @@ let HyVideo = class {
|
|
|
7593
6892
|
};
|
|
7594
6893
|
HyVideo.style = hyVideoCss;
|
|
7595
6894
|
|
|
7596
|
-
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,
|
|
6895
|
+
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, 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, MenuLanguage as hy_menu_language, SiteLanguage as hy_menu_language_item, HyMenuMainGroup as hy_menu_main_group, 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 };
|