npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.60 → 0.8.62 - Mend

@itcenteratunihelsinki/huds-lib 0.8.60 → 0.8.62

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

Files changed (52) hide show

package/components/hy-hero.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './hy-box2.js';
 import { d as defineCustomElement$3 } from './cta-button.js';
 import { d as defineCustomElement$2 } from './icon.js';
-const hyHeroCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-hero{position:relative;padding-bottom:0}@media (min-width: 60rem){.hy-hero{margin-top:32px}}@media (min-width: 60rem){.hy-hero:not(.has-shortcuts){margin-bottom:32px}}@media (min-width: 75.0625rem){.without-sidebar .hy-hero{max-width:1216px;margin-right:auto;margin-left:auto}}@media (min-width: 75.0625rem){.with-sidebar .hy-hero{padding-left:32px;padding-right:32px}}@media (min-width: 1601px){.with-sidebar .hy-hero{padding-right:0;padding-left:0;max-width:1216px;margin-right:auto;margin-left:auto}}@media (min-width: 60rem){.hy-hero--white{margin-top:0}}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts){padding-bottom:48px}}.hy-hero--white:not(.has-shortcuts):after{width:100%;background-color:var(--grayscale-medium-dark);height:1px;content:\"\";margin:0 auto;display:block}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts):after{position:absolute;left:0;right:0;bottom:0}}.hy-hero--white:not(.hy-hero--front_page):after{max-width:1216px}.hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero__container{display:grid;position:relative}}@media (min-width: 60rem){.hy-hero--small .hy-hero__container{grid-template-columns:60% 1fr}}@media (min-width: 60rem){.hy-hero--large .hy-hero__container{grid-template-columns:repeat(2, 1fr)}}.hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}@media (min-width: 30rem){.hy-hero__content-container{padding:40px 2rem}}@media (min-width: 75.0625rem){.hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:40px 24px}}@media (min-width: 1601px){.hy-hero__content-container{max-width:1216px}}.hy-hero--black .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 75.0625rem){.hy-hero--white .hy-hero__content-container{padding:40px 24px 40px 0}}.hy-hero__content{position:relative}h2.hy-hero__title{-ms-hyphens:auto;hyphens:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;max-width:100%;width:auto}.hy-hero--blue h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--black h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--white h2.hy-hero__title{color:var(--grayscale-black) !important}h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:33px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:none}@media (min-width: 1024px){h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:40px;letter-spacing:-1.15px}}@media (min-width: 1601px){h2.hy-hero__title.hy-heading__hero{font-size:2.375rem;line-height:48px;letter-spacing:-1.3px}}.hy-hero__description{font-size:1rem;line-height:24px;font-family:var(--main-font-family);margin:16px 0 0 0;padding:0;position:relative}@media (min-width: 1601px){.hy-hero__description{font-size:1.0625rem;line-height:26px}}.hy-hero--black .hy-hero__description{color:var(--grayscale-white)}.hy-hero--blue .hy-hero__description{color:var(--grayscale-white)}.hy-hero--white .hy-hero__description{color:var(--grayscale-black)}.hy-hero__actions{margin-top:24px}.hy-hero__image-container{margin:0;padding:0;position:relative}.hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero__image-container{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0}}@media (min-width: 60rem){.hy-hero--front_page .hy-hero__image-container{padding:0}}.hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:contain;object-fit:contain;width:100%}.has-cover .hy-image__image{-o-object-fit:cover;object-fit:cover}.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--white{padding-top:40px;margin-top:0}}.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page{margin-left:-32px;margin-right:-32px;max-width:none}}.hy-hero.hy-hero--front_page .hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}}.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}.hy-hero--black .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 30rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 2rem 40px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:330px;padding:56px 2rem}}@media (min-width: 1060px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:373px}}@media (min-width: 1160px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:480px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:32px;padding-right:8px}}@media (min-width: 1260px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:443px}}@media (min-width: 1280px){.hy-hero.hy-hero--front_page .hy-hero__content-container{max-width:1216px;padding-left:0}}@media (min-width: 1360px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:478px}}@media (min-width: 1460px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:513px}}@media (min-width: 1560px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:548px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:0}}@media (min-width: 1660px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:583px}}@media (min-width: 1760px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:619px}}@media (min-width: 1860px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:654px}}@media (min-width: 1920px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:675px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__image-container{width:40%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__content{max-width:60%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__image-container{width:50%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__content{max-width:50%}}.hy-hero.hy-hero--front_page .hy-hero__image-container{background-position:50% 50%;background-size:cover;background:transparent;margin:0;padding:0;position:relative}.hy-hero.hy-hero--front_page .hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__image-container{background-color:var(--grayscale-white);bottom:0;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0;position:absolute;right:0;top:0}}.hy-hero.hy-hero--front_page .hy-hero__content{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content{padding-right:24px}}.hy-hero.hy-hero--front_page .hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:cover;object-fit:cover;width:100%}.hy-hero__spacer-box{display:none}@media (min-width: 60rem){.hy-hero__spacer-box{display:block;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:absolute;inset:0}}@media (min-width: 60rem){.hy-hero--small .hy-hero__spacer-box{width:60%}}@media (min-width: 60rem){.hy-hero--large .hy-hero__spacer-box{width:50%}}.hy-hero--black .hy-hero__spacer-box{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__spacer-box{background-color:var(--brand-main)}.hy-hero--white .hy-hero__spacer-box{background-color:var(--grayscale-white)}";
+const hyHeroCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-hero{position:relative;padding-bottom:0}@media (min-width: 60rem){.hy-hero{margin-top:32px}}@media (min-width: 60rem){.hy-hero:not(.has-shortcuts){margin-bottom:32px}}@media (min-width: 75.0625rem){.without-sidebar .hy-hero{max-width:1216px;margin-right:auto;margin-left:auto}}@media (min-width: 75.0625rem){.with-sidebar .hy-hero{padding-left:32px;padding-right:32px}}@media (min-width: 1601px){.with-sidebar .hy-hero{padding-right:0;padding-left:0;max-width:1216px;margin-right:auto;margin-left:auto}}@media (min-width: 60rem){.hy-hero--white{margin-top:0}}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts){padding-bottom:48px}}.hy-hero--white:not(.has-shortcuts):after{width:100%;background-color:var(--grayscale-medium-dark);height:1px;content:\"\";margin:0 auto;display:block}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts):after{position:absolute;left:0;right:0;bottom:0}}.hy-hero--white:not(.hy-hero--front_page):after{max-width:1216px}.hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero__container{display:grid;position:relative}}@media (min-width: 60rem){.hy-hero--small .hy-hero__container{grid-template-columns:60% 1fr}}@media (min-width: 60rem){.hy-hero--large .hy-hero__container{grid-template-columns:repeat(2, 1fr)}}.hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}@media (min-width: 30rem){.hy-hero__content-container{padding:40px 2rem}}@media (min-width: 75.0625rem){.hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:40px 24px}}@media (min-width: 1601px){.hy-hero__content-container{max-width:1216px}}.hy-hero--black .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 75.0625rem){.hy-hero--white .hy-hero__content-container{padding:40px 24px 40px 0}}.hy-hero__content{position:relative}h2.hy-hero__title{-ms-hyphens:auto;hyphens:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;max-width:100%;width:auto}.hy-hero--blue h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--black h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--white h2.hy-hero__title{color:var(--grayscale-black) !important}h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:33px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:none;text-wrap:balance}@media (min-width: 1024px){h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:40px;letter-spacing:-1.15px}}@media (min-width: 1601px){h2.hy-hero__title.hy-heading__hero{font-size:2.375rem;line-height:48px;letter-spacing:-1.3px}}.hy-hero__description{font-size:1rem;line-height:24px;font-family:var(--main-font-family);margin:16px 0 0 0;padding:0;position:relative;text-wrap:pretty}@media (min-width: 1601px){.hy-hero__description{font-size:1.0625rem;line-height:26px}}.hy-hero--black .hy-hero__description{color:var(--grayscale-white)}.hy-hero--blue .hy-hero__description{color:var(--grayscale-white)}.hy-hero--white .hy-hero__description{color:var(--grayscale-black)}.hy-hero__actions{margin-top:24px}.hy-hero__image-container{margin:0;padding:0;position:relative}.hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero__image-container{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0}}@media (min-width: 60rem){.hy-hero--front_page .hy-hero__image-container{padding:0}}.hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:contain;object-fit:contain;width:100%}.has-cover .hy-image__image{-o-object-fit:cover;object-fit:cover}.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--white{padding-top:40px;margin-top:0}}.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page{margin-left:-32px;margin-right:-32px;max-width:none}}.hy-hero.hy-hero--front_page .hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}}.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}.hy-hero--black .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 30rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 2rem 40px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:330px;padding:56px 2rem}}@media (min-width: 1060px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:373px}}@media (min-width: 1160px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:480px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:32px;padding-right:8px}}@media (min-width: 1260px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:443px}}@media (min-width: 1280px){.hy-hero.hy-hero--front_page .hy-hero__content-container{max-width:1216px;padding-left:0}}@media (min-width: 1360px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:478px}}@media (min-width: 1460px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:513px}}@media (min-width: 1560px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:548px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:0}}@media (min-width: 1660px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:583px}}@media (min-width: 1760px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:619px}}@media (min-width: 1860px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:654px}}@media (min-width: 1920px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:675px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__image-container{width:40%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__content{max-width:60%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__image-container{width:50%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__content{max-width:50%}}.hy-hero.hy-hero--front_page .hy-hero__image-container{background-position:50% 50%;background-size:cover;background:transparent;margin:0;padding:0;position:relative}.hy-hero.hy-hero--front_page .hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__image-container{background-color:var(--grayscale-white);bottom:0;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0;position:absolute;right:0;top:0}}.hy-hero.hy-hero--front_page .hy-hero__content{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content{padding-right:24px}}.hy-hero.hy-hero--front_page .hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:cover;object-fit:cover;width:100%}.hy-hero__spacer-box{display:none}@media (min-width: 60rem){.hy-hero__spacer-box{display:block;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:absolute;inset:0}}@media (min-width: 60rem){.hy-hero--small .hy-hero__spacer-box{width:60%}}@media (min-width: 60rem){.hy-hero--large .hy-hero__spacer-box{width:50%}}.hy-hero--black .hy-hero__spacer-box{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__spacer-box{background-color:var(--brand-main)}.hy-hero--white .hy-hero__spacer-box{background-color:var(--grayscale-white)}";
 let timeout = null;
 let delay = 250;

package/components/hy-hero.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"hy-hero.js","mappings":"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","names":["HyHero"],"sources":["./src/components/hy-hero/hy-hero.scss?tag=hy-hero","./src/components/hy-hero/hy-hero.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-hero {\n position: relative;\n padding-bottom: 0;\n\n @include breakpoint($wide) {\n margin-top: 32px;\n }\n\n &:not(.has-shortcuts) {\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n }\n\n .without-sidebar & {\n @include breakpoint($extrawide) {\n max-width: 1216px;\n margin-right: auto;\n margin-left: auto;\n }\n }\n\n .with-sidebar & {\n @include breakpoint($extrawide) {\n padding-left: 32px;\n padding-right: 32px;\n }\n\n @include breakpoint($xlarge) {\n padding-right: 0;\n padding-left: 0;\n max-width: 1216px;\n margin-right: auto;\n margin-left: auto;\n }\n }\n\n &--white {\n @include breakpoint($wide) {\n margin-top: 0;\n }\n\n &:not(.has-shortcuts) {\n @include breakpoint($wide) {\n padding-bottom: 48px;\n }\n }\n\n &:not(.has-shortcuts):after {\n width: 100%;\n background-color: var(--grayscale-medium-dark);\n height: 1px;\n content: \"\";\n margin: 0 auto;\n display: block;\n\n @include breakpoint($wide) {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n }\n }\n\n &:not(.hy-hero--front_page):after {\n max-width: 1216px;\n }\n }\n}\n\n.hy-hero__container {\n position: relative;\n\n @include breakpoint($wide) {\n display: grid;\n position: relative;\n }\n\n .hy-hero--small & {\n @include breakpoint($wide) {\n grid-template-columns: 60% 1fr;\n }\n }\n\n .hy-hero--large & {\n @include breakpoint($wide) {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n}\n\n.hy-hero__content-container {\n padding: 24px 1rem 40px;\n margin: 0 auto;\n width: 100%;\n\n @include breakpoint($narrow) {\n padding: 40px 2rem;\n }\n\n @include breakpoint($extrawide) {\n align-items: center;\n display: flex;\n padding: 40px 24px;\n }\n\n @include breakpoint($xlarge) {\n max-width: 1216px;\n }\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n\n @include breakpoint($extrawide) {\n padding: 40px 24px 40px 0;\n }\n }\n}\n\n.hy-hero__content {\n position: relative;\n}\n\nh2.hy-hero__title {\n hyphens: auto;\n display: flex;\n flex-grow: 1;\n flex-shrink: 0;\n max-width: 100%;\n width: auto;\n\n .hy-hero--blue & {\n color: var(--grayscale-white) !important;\n }\n\n .hy-hero--black & {\n color: var(--grayscale-white) !important;\n }\n\n .hy-hero--white & {\n color: var(--grayscale-black) !important;\n }\n\n &.hy-heading__hero {\n @include font-size(36px, 33px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: none;\n\n @include breakpoint(1024px) {\n @include font-size(36px, 40px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(38px, 48px);\n letter-spacing: -1.3px;\n }\n }\n}\n\n.hy-hero__description {\n @include font-size(16px, 24px);\n font-family: var(--main-font-family);\n margin: 16px 0 0 0;\n padding: 0;\n position: relative;\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px);\n }\n\n .hy-hero--black & {\n color: var(--grayscale-white);\n }\n\n .hy-hero--blue & {\n color: var(--grayscale-white);\n }\n\n .hy-hero--white & {\n color: var(--grayscale-black);\n }\n}\n\n.hy-hero__actions {\n margin-top: 24px;\n}\n\n.hy-hero__image-container {\n margin: 0;\n padding: 0;\n position: relative;\n\n figure {\n margin: 0;\n }\n\n @include breakpoint($wide) {\n order: 2;\n padding: 8px 0;\n }\n\n .hy-hero--front_page & {\n @include breakpoint($wide) {\n padding: 0;\n }\n }\n}\n\n.hy-image__image {\n display: block;\n height: 100%;\n min-height: 205px;\n object-fit: contain;\n width: 100%;\n\n .has-cover & {\n object-fit: cover;\n }\n}\n\n// Research group and generic with minor landing\n.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group,\n.hy-hero.hy-hero--research_group {\n h2.hy-hero__title.hy-heading__hero {\n @include font-size(32px, 38px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: uppercase;\n\n @include breakpoint(1024px) {\n @include font-size(46px, 54px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n }\n}\n\n// FRONTPAGE VARIATION\n\n.hy-hero.hy-hero--front_page {\n &.hy-hero--white {\n @include breakpoint($wide) {\n padding-top: 40px;\n margin-top: 0;\n }\n }\n\n h2.hy-hero__title.hy-heading__hero {\n @include font-size(32px, 38px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: uppercase;\n\n @include breakpoint(1024px) {\n @include font-size(46px, 54px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n }\n\n @include breakpoint($extrawide) {\n margin-left: -32px;\n margin-right: -32px;\n max-width: none;\n }\n\n .hy-hero__container {\n position: relative;\n\n @include breakpoint($wide) {\n display: flex;\n position: relative;\n }\n }\n\n .hy-hero__content-container {\n padding: 24px 1rem 40px;\n margin: 0 auto;\n width: 100%;\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n }\n\n @include breakpoint($narrow) {\n padding: 24px 2rem 40px;\n }\n\n @include breakpoint($wide) {\n align-items: center;\n display: flex;\n min-height: 330px;\n padding: 56px 2rem;\n }\n\n @include breakpoint(1060px) {\n min-height: 373px;\n }\n\n @include breakpoint(1160px) {\n min-height: 480px;\n }\n\n @include breakpoint($extrawide) {\n padding-left: 32px;\n padding-right: 8px;\n }\n\n @include breakpoint(1260px) {\n min-height: 443px;\n }\n\n @include breakpoint(1280px) {\n max-width: 1216px;\n padding-left: 0;\n }\n\n @include breakpoint(1360px) {\n min-height: 478px;\n }\n\n @include breakpoint(1460px) {\n min-height: 513px;\n }\n\n @include breakpoint(1560px) {\n min-height: 548px;\n }\n\n @include breakpoint($xlarge) {\n padding-left: 0;\n }\n\n @include breakpoint(1660px) {\n min-height: 583px;\n }\n\n @include breakpoint(1760px) {\n min-height: 619px;\n }\n\n @include breakpoint(1860px) {\n min-height: 654px;\n }\n\n @include breakpoint(1920px) {\n min-height: 675px;\n }\n }\n\n &.hy-hero--small {\n .hy-hero__image-container {\n @include breakpoint($wide) {\n width: 40%;\n }\n }\n\n .hy-hero__content {\n @include breakpoint($wide) {\n max-width: 60%;\n }\n }\n }\n\n &.hy-hero--large {\n .hy-hero__image-container {\n @include breakpoint($wide) {\n width: 50%;\n }\n }\n\n .hy-hero__content {\n @include breakpoint($wide) {\n max-width: 50%;\n }\n }\n }\n\n .hy-hero__image-container {\n background-position: 50% 50%;\n background-size: cover;\n background: transparent;\n margin: 0;\n padding: 0;\n position: relative;\n\n figure {\n margin: 0;\n }\n\n @include breakpoint($wide) {\n background-color: var(--grayscale-white);\n bottom: 0;\n order: 2;\n padding: 8px 0;\n position: absolute;\n right: 0;\n top: 0;\n }\n }\n\n .hy-hero__content {\n position: relative;\n\n @include breakpoint($wide) {\n padding-right: 24px;\n }\n }\n\n .hy-image__image {\n display: block;\n height: 100%;\n min-height: 205px;\n object-fit: cover;\n width: 100%;\n }\n}\n\n.hy-hero__spacer-box {\n display: none;\n\n @include breakpoint($wide) {\n display: block;\n order: 1;\n position: absolute;\n inset: 0;\n }\n\n .hy-hero--small & {\n @include breakpoint($wide) {\n width: 60%;\n }\n }\n\n .hy-hero--large & {\n @include breakpoint($wide) {\n width: 50%;\n }\n }\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n }\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string \| null;\n}\nlet timeout = null;\nlet delay = 250;\n\nimport {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport {\n CtaLinkButtonVariants,\n HeroColorVariant,\n HeroSizeVariant,\n HeroGroupTypeVariant,\n HeroTypeVariant,\n} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-hero\",\n styleUrl: \"hy-hero.scss\",\n shadow: false,\n})\nexport class HyHero {\n @Element() el: HTMLElement;\n @Prop() heroType: HeroTypeVariant = HeroTypeVariant.landing;\n @Prop() heroGroupType: HeroGroupTypeVariant = HeroGroupTypeVariant.default;\n @Prop() colorVariant: HeroColorVariant = HeroColorVariant.blue;\n @Prop() sizeVariant: HeroSizeVariant = HeroSizeVariant.large;\n @Prop() image: string;\n @Prop() imageHeight: number = null;\n @Prop() imageWidth: number = null;\n @Prop() imageAltText: string = \"\";\n @Prop() disableLazy: boolean = false;\n @Prop() hasShortcuts: boolean = false;\n @Prop() heading: string;\n @Prop() description: string;\n @Prop() url: string;\n @Prop() urlTitle: string;\n @Prop() scLabel?: string;\n @Prop() isExternal: boolean = false;\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] \| string;\n\n async componentWillLoad() {\n this._sourceSet = await jsonParserWorker(this.sourceSet);\n }\n\n handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {\n const heroContentContainerElement = heroElement.getElementsByClassName(\n \"hy-hero__content-container\"\n )[0] as HTMLElement;\n\n if (heroSizeVariant === \"small\") {\n if (heroContentContainerElement.offsetHeight >= 300) {\n heroElement.classList.add(\"has-cover\");\n } else {\n heroElement.classList.remove(\"has-cover\");\n }\n }\n\n if (heroSizeVariant === \"large\") {\n if (heroContentContainerElement.offsetHeight >= 344) {\n heroElement.classList.add(\"has-cover\");\n } else {\n heroElement.classList.remove(\"has-cover\");\n }\n }\n }\n\n render() {\n let variant = CtaLinkButtonVariants.heroWhite;\n let colorVariantValue = this.colorVariant;\n let heroTypeValue = this.heroType;\n\n if (this.heroType === \"minor_landing\") {\n colorVariantValue = HeroColorVariant.white;\n heroTypeValue = HeroTypeVariant.landing;\n }\n\n if (colorVariantValue === HeroColorVariant.blue) {\n variant = CtaLinkButtonVariants.heroBlue;\n }\n\n if (colorVariantValue === HeroColorVariant.black) {\n variant = CtaLinkButtonVariants.heroBlack;\n }\n\n if (!colorVariantValue \|\| colorVariantValue === \"fp_white\") {\n colorVariantValue = HeroColorVariant.white;\n }\n\n const hyHeroClasses = [\n \"hy-hero\",\n `hy-hero--${heroTypeValue}`,\n `hy-hero--${this.heroGroupType}`,\n `hy-hero--${colorVariantValue}`,\n `hy-hero--${this.sizeVariant}`,\n ];\n\n const heroTitleClasses = [\"hy-hero__title\", \"hy-heading__hero\"].join(\" \");\n\n // If there is a Shortcuts block after hero, add the class 'shortcuts' to remove underline.\n if (this.hasShortcuts) {\n hyHeroClasses.push(\"has-shortcuts\");\n }\n\n const aspectRatioWidth = 16;\n const aspectRatioHeight = 10;\n const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n const aspectRatio = {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n };\n\n window.onload = () => {\n const heroElement = document.getElementsByClassName(\"hy-hero\")[0] as HTMLElement;\n this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);\n window.addEventListener(\"resize\", () => {\n clearTimeout(timeout);\n timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);\n });\n };\n\n if (heroTypeValue === \"front_page\") {\n return (\n <Host>\n <div class={hyHeroClasses.join(\" \")}>\n <div class={`hy-hero__container`}>\n <div class={`hy-hero__image-container`} style={aspectRatio}>\n {this.image &&\n (this._sourceSet ? (\n <picture>\n {this._sourceSet.map((item) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAltText}\n class={`hy-image__image`}\n src={this.image}\n height={this.imageHeight}\n width={this.imageWidth}\n />\n </picture>\n ) : (\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAltText}\n class={`hy-image__image`}\n src={this.image}\n height={this.imageHeight}\n width={this.imageWidth}\n />\n ))}\n </div>\n <div class={`hy-hero__spacer-box`}></div>\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`}>\n <div class={`hy-hero__title-container`}>\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n </div>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <hy-cta-button\n link-content={this.urlTitle}\n sc-label={this.scLabel}\n url={this.url}\n is-external={this.isExternal}\n variant={variant}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <hy-box mb=\"2, 2, 1, 1\" />\n </Host>\n );\n }\n\n return (\n <Host>\n <div class={hyHeroClasses.join(\" \")}>\n <div class={`hy-hero__container`}>\n <div class={`hy-hero__image-container`} style={aspectRatio}>\n {this.image &&\n (this._sourceSet ? (\n <picture>\n {this._sourceSet.map((item) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAltText}\n class={`hy-image__image`}\n src={this.image}\n height={this.imageHeight}\n width={this.imageWidth}\n />\n </picture>\n ) : (\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAltText}\n class={`hy-image__image`}\n src={this.image}\n height={this.imageHeight}\n width={this.imageWidth}\n />\n ))}\n </div>\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`}>\n <div class={`hy-hero__title-container`}>\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n </div>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <hy-cta-button\n link-content={this.urlTitle}\n sc-label={this.scLabel}\n url={this.url}\n is-external={this.isExternal}\n variant={variant}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <hy-box mb=\"2, 2, 1, 1\" />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"hy-hero.js","mappings":"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","names":["HyHero"],"sources":["./src/components/hy-hero/hy-hero.scss?tag=hy-hero","./src/components/hy-hero/hy-hero.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-hero {\n position: relative;\n padding-bottom: 0;\n\n @include breakpoint($wide) {\n margin-top: 32px;\n }\n\n &:not(.has-shortcuts) {\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n }\n\n .without-sidebar & {\n @include breakpoint($extrawide) {\n max-width: 1216px;\n margin-right: auto;\n margin-left: auto;\n }\n }\n\n .with-sidebar & {\n @include breakpoint($extrawide) {\n padding-left: 32px;\n padding-right: 32px;\n }\n\n @include breakpoint($xlarge) {\n padding-right: 0;\n padding-left: 0;\n max-width: 1216px;\n margin-right: auto;\n margin-left: auto;\n }\n }\n\n &--white {\n @include breakpoint($wide) {\n margin-top: 0;\n }\n\n &:not(.has-shortcuts) {\n @include breakpoint($wide) {\n padding-bottom: 48px;\n }\n }\n\n &:not(.has-shortcuts):after {\n width: 100%;\n background-color: var(--grayscale-medium-dark);\n height: 1px;\n content: \"\";\n margin: 0 auto;\n display: block;\n\n @include breakpoint($wide) {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n }\n }\n\n &:not(.hy-hero--front_page):after {\n max-width: 1216px;\n }\n }\n}\n\n.hy-hero__container {\n position: relative;\n\n @include breakpoint($wide) {\n display: grid;\n position: relative;\n }\n\n .hy-hero--small & {\n @include breakpoint($wide) {\n grid-template-columns: 60% 1fr;\n }\n }\n\n .hy-hero--large & {\n @include breakpoint($wide) {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n}\n\n.hy-hero__content-container {\n padding: 24px 1rem 40px;\n margin: 0 auto;\n width: 100%;\n\n @include breakpoint($narrow) {\n padding: 40px 2rem;\n }\n\n @include breakpoint($extrawide) {\n align-items: center;\n display: flex;\n padding: 40px 24px;\n }\n\n @include breakpoint($xlarge) {\n max-width: 1216px;\n }\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n\n @include breakpoint($extrawide) {\n padding: 40px 24px 40px 0;\n }\n }\n}\n\n.hy-hero__content {\n position: relative;\n}\n\nh2.hy-hero__title {\n hyphens: auto;\n display: flex;\n flex-grow: 1;\n flex-shrink: 0;\n max-width: 100%;\n width: auto;\n\n .hy-hero--blue & {\n color: var(--grayscale-white) !important;\n }\n\n .hy-hero--black & {\n color: var(--grayscale-white) !important;\n }\n\n .hy-hero--white & {\n color: var(--grayscale-black) !important;\n }\n\n &.hy-heading__hero {\n @include font-size(36px, 33px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: none;\n text-wrap: balance;\n\n @include breakpoint(1024px) {\n @include font-size(36px, 40px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(38px, 48px);\n letter-spacing: -1.3px;\n }\n }\n}\n\n.hy-hero__description {\n @include font-size(16px, 24px);\n font-family: var(--main-font-family);\n margin: 16px 0 0 0;\n padding: 0;\n position: relative;\n text-wrap: pretty;\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px);\n }\n\n .hy-hero--black & {\n color: var(--grayscale-white);\n }\n\n .hy-hero--blue & {\n color: var(--grayscale-white);\n }\n\n .hy-hero--white & {\n color: var(--grayscale-black);\n }\n}\n\n.hy-hero__actions {\n margin-top: 24px;\n}\n\n.hy-hero__image-container {\n margin: 0;\n padding: 0;\n position: relative;\n\n figure {\n margin: 0;\n }\n\n @include breakpoint($wide) {\n order: 2;\n padding: 8px 0;\n }\n\n .hy-hero--front_page & {\n @include breakpoint($wide) {\n padding: 0;\n }\n }\n}\n\n.hy-image__image {\n display: block;\n height: 100%;\n min-height: 205px;\n object-fit: contain;\n width: 100%;\n\n .has-cover & {\n object-fit: cover;\n }\n}\n\n// Research group and generic with minor landing\n.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group,\n.hy-hero.hy-hero--research_group {\n h2.hy-hero__title.hy-heading__hero {\n @include font-size(32px, 38px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: uppercase;\n\n @include breakpoint(1024px) {\n @include font-size(46px, 54px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n }\n}\n\n// FRONTPAGE VARIATION\n\n.hy-hero.hy-hero--front_page {\n &.hy-hero--white {\n @include breakpoint($wide) {\n padding-top: 40px;\n margin-top: 0;\n }\n }\n\n h2.hy-hero__title.hy-heading__hero {\n @include font-size(32px, 38px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: uppercase;\n\n @include breakpoint(1024px) {\n @include font-size(46px, 54px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n }\n\n @include breakpoint($extrawide) {\n margin-left: -32px;\n margin-right: -32px;\n max-width: none;\n }\n\n .hy-hero__container {\n position: relative;\n\n @include breakpoint($wide) {\n display: flex;\n position: relative;\n }\n }\n\n .hy-hero__content-container {\n padding: 24px 1rem 40px;\n margin: 0 auto;\n width: 100%;\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n }\n\n @include breakpoint($narrow) {\n padding: 24px 2rem 40px;\n }\n\n @include breakpoint($wide) {\n align-items: center;\n display: flex;\n min-height: 330px;\n padding: 56px 2rem;\n }\n\n @include breakpoint(1060px) {\n min-height: 373px;\n }\n\n @include breakpoint(1160px) {\n min-height: 480px;\n }\n\n @include breakpoint($extrawide) {\n padding-left: 32px;\n padding-right: 8px;\n }\n\n @include breakpoint(1260px) {\n min-height: 443px;\n }\n\n @include breakpoint(1280px) {\n max-width: 1216px;\n padding-left: 0;\n }\n\n @include breakpoint(1360px) {\n min-height: 478px;\n }\n\n @include breakpoint(1460px) {\n min-height: 513px;\n }\n\n @include breakpoint(1560px) {\n min-height: 548px;\n }\n\n @include breakpoint($xlarge) {\n padding-left: 0;\n }\n\n @include breakpoint(1660px) {\n min-height: 583px;\n }\n\n @include breakpoint(1760px) {\n min-height: 619px;\n }\n\n @include breakpoint(1860px) {\n min-height: 654px;\n }\n\n @include breakpoint(1920px) {\n min-height: 675px;\n }\n }\n\n &.hy-hero--small {\n .hy-hero__image-container {\n @include breakpoint($wide) {\n width: 40%;\n }\n }\n\n .hy-hero__content {\n @include breakpoint($wide) {\n max-width: 60%;\n }\n }\n }\n\n &.hy-hero--large {\n .hy-hero__image-container {\n @include breakpoint($wide) {\n width: 50%;\n }\n }\n\n .hy-hero__content {\n @include breakpoint($wide) {\n max-width: 50%;\n }\n }\n }\n\n .hy-hero__image-container {\n background-position: 50% 50%;\n background-size: cover;\n background: transparent;\n margin: 0;\n padding: 0;\n position: relative;\n\n figure {\n margin: 0;\n }\n\n @include breakpoint($wide) {\n background-color: var(--grayscale-white);\n bottom: 0;\n order: 2;\n padding: 8px 0;\n position: absolute;\n right: 0;\n top: 0;\n }\n }\n\n .hy-hero__content {\n position: relative;\n\n @include breakpoint($wide) {\n padding-right: 24px;\n }\n }\n\n .hy-image__image {\n display: block;\n height: 100%;\n min-height: 205px;\n object-fit: cover;\n width: 100%;\n }\n}\n\n.hy-hero__spacer-box {\n display: none;\n\n @include breakpoint($wide) {\n display: block;\n order: 1;\n position: absolute;\n inset: 0;\n }\n\n .hy-hero--small & {\n @include breakpoint($wide) {\n width: 60%;\n }\n }\n\n .hy-hero--large & {\n @include breakpoint($wide) {\n width: 50%;\n }\n }\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n }\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string \| null;\n}\nlet timeout = null;\nlet delay = 250;\n\nimport {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport {\n CtaLinkButtonVariants,\n HeroColorVariant,\n HeroSizeVariant,\n HeroGroupTypeVariant,\n HeroTypeVariant,\n} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-hero\",\n styleUrl: \"hy-hero.scss\",\n shadow: false,\n})\nexport class HyHero {\n @Element() el: HTMLElement;\n @Prop() heroType: HeroTypeVariant = HeroTypeVariant.landing;\n @Prop() heroGroupType: HeroGroupTypeVariant = HeroGroupTypeVariant.default;\n @Prop() colorVariant: HeroColorVariant = HeroColorVariant.blue;\n @Prop() sizeVariant: HeroSizeVariant = HeroSizeVariant.large;\n @Prop() image: string;\n @Prop() imageHeight: number = null;\n @Prop() imageWidth: number = null;\n @Prop() imageAltText: string = \"\";\n @Prop() disableLazy: boolean = false;\n @Prop() hasShortcuts: boolean = false;\n @Prop() heading: string;\n @Prop() description: string;\n @Prop() url: string;\n @Prop() urlTitle: string;\n @Prop() scLabel?: string;\n @Prop() isExternal: boolean = false;\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] \| string;\n\n async componentWillLoad() {\n this._sourceSet = await jsonParserWorker(this.sourceSet);\n }\n\n handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {\n const heroContentContainerElement = heroElement.getElementsByClassName(\n \"hy-hero__content-container\"\n )[0] as HTMLElement;\n\n if (heroSizeVariant === \"small\") {\n if (heroContentContainerElement.offsetHeight >= 300) {\n heroElement.classList.add(\"has-cover\");\n } else {\n heroElement.classList.remove(\"has-cover\");\n }\n }\n\n if (heroSizeVariant === \"large\") {\n if (heroContentContainerElement.offsetHeight >= 344) {\n heroElement.classList.add(\"has-cover\");\n } else {\n heroElement.classList.remove(\"has-cover\");\n }\n }\n }\n\n render() {\n let variant = CtaLinkButtonVariants.heroWhite;\n let colorVariantValue = this.colorVariant;\n let heroTypeValue = this.heroType;\n\n if (this.heroType === \"minor_landing\") {\n colorVariantValue = HeroColorVariant.white;\n heroTypeValue = HeroTypeVariant.landing;\n }\n\n if (colorVariantValue === HeroColorVariant.blue) {\n variant = CtaLinkButtonVariants.heroBlue;\n }\n\n if (colorVariantValue === HeroColorVariant.black) {\n variant = CtaLinkButtonVariants.heroBlack;\n }\n\n if (!colorVariantValue \|\| colorVariantValue === \"fp_white\") {\n colorVariantValue = HeroColorVariant.white;\n }\n\n const hyHeroClasses = [\n \"hy-hero\",\n `hy-hero--${heroTypeValue}`,\n `hy-hero--${this.heroGroupType}`,\n `hy-hero--${colorVariantValue}`,\n `hy-hero--${this.sizeVariant}`,\n ];\n\n const heroTitleClasses = [\"hy-hero__title\", \"hy-heading__hero\"].join(\" \");\n\n // If there is a Shortcuts block after hero, add the class 'shortcuts' to remove underline.\n if (this.hasShortcuts) {\n hyHeroClasses.push(\"has-shortcuts\");\n }\n\n const aspectRatioWidth = 16;\n const aspectRatioHeight = 10;\n const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n const aspectRatio = {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n };\n\n window.onload = () => {\n const heroElement = document.getElementsByClassName(\"hy-hero\")[0] as HTMLElement;\n this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);\n window.addEventListener(\"resize\", () => {\n clearTimeout(timeout);\n timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);\n });\n };\n\n if (heroTypeValue === \"front_page\") {\n return (\n <Host>\n <div class={hyHeroClasses.join(\" \")}>\n <div class={`hy-hero__container`}>\n <div class={`hy-hero__image-container`} style={aspectRatio}>\n {this.image &&\n (this._sourceSet ? (\n <picture>\n {this._sourceSet.map((item) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAltText}\n class={`hy-image__image`}\n src={this.image}\n height={this.imageHeight}\n width={this.imageWidth}\n />\n </picture>\n ) : (\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAltText}\n class={`hy-image__image`}\n src={this.image}\n height={this.imageHeight}\n width={this.imageWidth}\n />\n ))}\n </div>\n <div class={`hy-hero__spacer-box`}></div>\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`}>\n <div class={`hy-hero__title-container`}>\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n </div>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <hy-cta-button\n link-content={this.urlTitle}\n sc-label={this.scLabel}\n url={this.url}\n is-external={this.isExternal}\n variant={variant}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <hy-box mb=\"2, 2, 1, 1\" />\n </Host>\n );\n }\n\n return (\n <Host>\n <div class={hyHeroClasses.join(\" \")}>\n <div class={`hy-hero__container`}>\n <div class={`hy-hero__image-container`} style={aspectRatio}>\n {this.image &&\n (this._sourceSet ? (\n <picture>\n {this._sourceSet.map((item) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAltText}\n class={`hy-image__image`}\n src={this.image}\n height={this.imageHeight}\n width={this.imageWidth}\n />\n </picture>\n ) : (\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAltText}\n class={`hy-image__image`}\n src={this.image}\n height={this.imageHeight}\n width={this.imageWidth}\n />\n ))}\n </div>\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`}>\n <div class={`hy-hero__title-container`}>\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n </div>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <hy-cta-button\n link-content={this.urlTitle}\n sc-label={this.scLabel}\n url={this.url}\n is-external={this.isExternal}\n variant={variant}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <hy-box mb=\"2, 2, 1, 1\" />\n </Host>\n );\n }\n}\n"],"version":3}

package/components/hy-menu-main-group2.js CHANGED Viewed

@@ -27,13 +27,19 @@ const HyMenuMainGroup = /*@__PURE__*/ proxyCustomElement(class HyMenuMainGroup e
     this.donate = undefined;
     this.isMenuOpen = false;
   }
+  async componentWillLoad() {
+    this._dataMainMenu = await jsonParserWorker(this.dataMainMenu);
+  }
   handleComponentClick(event) {
-    event.stopPropagation();
-    this.emitEvent();
     this.isMenuOpen = !this.isMenuOpen;
+    this.emitEvent();
     if (this.isMenuOpen) {
       this.adjustMainMenuPosition(event.target);
     }
+    if (!this.isMenuOpen) {
+      this.showBackdropShadow('close');
+    }
+    event.stopPropagation();
   }
   handleComponentKeyDown(event) {
     event.stopPropagation();
@@ -51,11 +57,20 @@ const HyMenuMainGroup = /*@__PURE__*/ proxyCustomElement(class HyMenuMainGroup e
       }
     }
   }
+  // Handle events that should close the menu.
+  handleOutsideMenuClick(event) {
+    if (this.isMenuOpen) {
+      this.isMenuOpen = false;
+      this.handleTopMenuClose(event);
+    }
+    event.stopPropagation();
+  }
   emitEvent() {
     // Close other panels if they are open (lang menu, search, main menu, ..).
     this.universityMainMenuToggled.emit();
     this.mobileMenuTopToggle.emit();
   }
+  // TODO: Cleanup this. Find cleaner way to do positioning.
   adjustMainMenuPosition(target) {
     let hyTopHeader = this.el.closest(".hy-site-header__content-top");
     if (hyTopHeader && !hyTopHeader.hasAttribute("is-mobile")) {
@@ -72,6 +87,7 @@ const HyMenuMainGroup = /*@__PURE__*/ proxyCustomElement(class HyMenuMainGroup e
       this.showBackdropShadow("open", headerHeight);
     }
   }
+  // TODO: Handle backdrop with CSS.
   showBackdropShadow(state = "close", top = 0) {
     let hyHeader = this.el.closest(".hy-site-header");
     let hyBackdropDiv = hyHeader.children[0];
@@ -89,35 +105,12 @@ const HyMenuMainGroup = /*@__PURE__*/ proxyCustomElement(class HyMenuMainGroup e
       }
     }
   }
-  async componentWillLoad() {
-    this._dataMainMenu = await jsonParserWorker(this.dataMainMenu);
-  }
   handleTopMenuClose(event) {
     this.isMenuOpen = false;
     this.mobileMenuTopToggle.emit();
-    this.showBackdropShadow();
+    this.showBackdropShadow('close');
     event.stopPropagation();
   }
-  // Close the University main menu if user clicks anywhere outside the component.
-  handleOutsideMenuClick(event) {
-    if (this.isMenuOpen) {
-      this.isMenuOpen = false;
-      this.handleTopMenuClose(event);
-    }
-    event.stopPropagation();
-  }
-  // CLose the University main menu if user opens the desktop menu panel.
-  desktopMenuToggled() {
-    this.isMenuOpen = false;
-  }
-  // CLose the University main menu if user opens the search panel
-  searchPanelToggled() {
-    this.isMenuOpen = false;
-  }
-  // CLose the University main menu if user opens the language menu panel.
-  languageMenuToggled() {
-    this.isMenuOpen = false;
-  }
   render() {
     const white = "var(--grayscale-white)";
     const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;
@@ -164,7 +157,7 @@ const HyMenuMainGroup = /*@__PURE__*/ proxyCustomElement(class HyMenuMainGroup e
     "siteUrl": [1, "site-url"],
     "donate": [16],
     "isMenuOpen": [32]
-  }, [[2, "click", "handleComponentClick"], [0, "keydown", "handleComponentKeyDown"], [8, "click", "handleOutsideMenuClick"], [8, "headerScrollDown", "handleOutsideMenuClick"], [8, "headerScrollUp", "handleOutsideMenuClick"], [4, "menuDesktopToggled", "desktopMenuToggled"], [4, "searchPanelToggled", "searchPanelToggled"], [4, "menuLanguageToggled", "languageMenuToggled"]]]);
+  }, [[2, "click", "handleComponentClick"], [0, "keydown", "handleComponentKeyDown"], [8, "click", "handleOutsideMenuClick"], [8, "headerScrollDown", "handleOutsideMenuClick"], [8, "headerScrollUp", "handleOutsideMenuClick"], [4, "menuLanguageToggled", "handleOutsideMenuClick"], [4, "searchPanelToggled", "handleOutsideMenuClick"], [4, "menuDesktopToggled", "handleOutsideMenuClick"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/components/hy-menu-main-group2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"hy-menu-main-group2.js","mappings":"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","names":[],"sources":["./src/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.scss?tag=hy-menu-main-group&encapsulation=shadow","./src/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host(.menu--main-group) {\n align-items: center;\n display: flex;\n flex-flow: row;\n margin-left: 28px;\n\n @include breakpoint($extrawide) {\n margin-right: auto;\n }\n}\n\n.menu--main-group__toggle {\n @include font-size(14px, 16px);\n @include font-weight($semibold);\n align-items: center;\n background: var(--grayscale-black);\n border: 0 none;\n color: var(--grayscale-white);\n display: flex;\n flex-flow: row;\n font-family: var(--main-font-family);\n letter-spacing: -0.44px;\n margin: 0 -4px;\n padding: 0;\n position: relative;\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n cursor: pointer;\n\n span {\n color: var(--grayscale-medium);\n }\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n\n .toggle__caret {\n svg {\n @include breakpoint($wide) {\n height: 15.27px;\n width: 3px;\n }\n @include breakpoint($extrawide) {\n height: 14px;\n width: 3px;\n }\n }\n }\n\n span {\n @include breakpoint($wide) {\n margin-left: 17px;\n }\n }\n\n &.is-open {\n &:after {\n border-bottom: 3px solid white;\n bottom: -10px;\n content: \" \";\n position: absolute;\n width: 100%;\n }\n\n .toggle__close {\n @include breakpoint($wide) {\n height: 15px;\n width: 15px;\n\n svg {\n height: 15px;\n width: 15px;\n }\n }\n }\n\n span {\n @include breakpoint($wide) {\n margin-left: 10px;\n }\n }\n }\n}\n\n.menu--main-group__dropdown {\n display: none;\n visibility: hidden;\n\n &.is-open {\n background-color: var(--grayscale-black);\n border-radius: 0 0 5px 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);\n color: var(--grayscale-white);\n display: flex;\n font-family: var(--main-font-family);\n left: 0;\n margin: 0;\n padding: 6px 0 20px;\n position: absolute;\n top: 0;\n visibility: visible;\n width: 100%;\n z-index: 511;\n\n .list {\n display: flex;\n flex-flow: column;\n justify-items: center;\n padding-top: 14px;\n position: relative;\n }\n\n .panel-toggle {\n background-color: transparent;\n border: none;\n position: absolute;\n right: 0;\n top: 0;\n\n @include breakpoint($wide) {\n padding: 26px 32px;\n }\n\n &__label {\n @include font-size(16px, 20px);\n @include font-weight($bold);\n color: var(--grayscale-white);\n display: flex;\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n text-transform: uppercase;\n\n &__title {\n padding-right: 12px;\n }\n\n &:hover {\n cursor: pointer;\n span {\n color: var(--grayscale-medium);\n }\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n }\n\n .menu-main-link {\n @include font-size(16px, 20px);\n align-items: center;\n display: flex;\n font-family: var(--main-font-family);\n flex-direction: row;\n margin-bottom: 20px;\n text-decoration: none;\n\n @include breakpoint($extrawide) {\n @include font-size(14px, 18px);\n }\n\n &:hover {\n span {\n color: var(--grayscale-medium);\n }\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n .menu--main-group__label {\n color: var(--grayscale-white);\n margin-left: 12px;\n }\n }\n}\n\n:host(.menu--main-group--mobile) {\n align-items: center;\n display: flex;\n flex-flow: row;\n position: relative;\n}\n\n.menu--main-group__mobile-toggle {\n border: none;\n background: transparent;\n padding: 15px 12px;\n\n &:hover {\n cursor: pointer;\n }\n}\n\n.menu--main-group__dropdown__top {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: 23px;\n}\n\n.menu--main-group__dropdown__close {\n border: none;\n background-color: transparent;\n padding: 0;\n margin: 0;\n\n &:hover {\n cursor: pointer;\n }\n}\n\n.menu--main-group__logo-container .hy-site-logo__label.group {\n max-width: 250px;\n}\n\n.menu--main-group__dropdown__items {\n display: flex;\n flex-direction: column;\n\n .menu-main-link {\n @include font-size(15px, 20px);\n\n background-color: var(--grayscale-dark-text);\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n margin-bottom: 8px;\n padding: 14px 20px;\n text-decoration: none;\n width: 100%;\n\n &:hover {\n text-decoration: underline;\n }\n }\n}\n\n.menu--main-group__dropdown__donate {\n display: flex;\n flex-direction: row;\n justify-content: center;\n background-color: var(--grayscale-dark-text);\n position: fixed;\n bottom: 0;\n margin-left: -20px;\n width: 100%;\n\n .hy-link__donate.group {\n @include font-size(16px, 16px);\n @include font-weight($semibold);\n\n display: flex;\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n margin: 20px auto 16px auto;\n text-decoration: none;\n\n .hy-link__donate__label {\n margin-left: 6px;\n }\n }\n}\n\n.menu--main-group__dropdown--mobile {\n -webkit-box-direction: normal;\n -webkit-box-orient: vertical;\n background-color: var(--grayscale-black);\n bottom: 0px;\n display: flex;\n flex-direction: column;\n justify-items: space-between;\n max-width: 400px;\n overflow: hidden;\n padding: 0px;\n place-items: stretch;\n position: fixed;\n right: 0px;\n top: 0px;\n transform: translateX(100%);\n transition: all 0.3s ease 0s;\n visibility: hidden;\n width: 0px;\n\n &.is-open {\n padding: 50px 20px 20px;\n transform: translateX(0px);\n transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);\n visibility: visible;\n width: 90%;\n z-index: 101;\n\n &::after {\n opacity: 1;\n visibility: visible;\n }\n }\n}\n","export interface MainMenu {\n label: string;\n url: string;\n menuLinkId: string;\n}\n\nexport interface DonateLink {\n url: string;\n label: string;\n}\n\nimport {Component, Host, h, Element, Prop, State, Listen, Event, EventEmitter} from \"@stencil/core\";\nimport {ColorVariant, SiteLogoSize} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\nlet keys = {\n enter: \"Enter\",\n};\n\n@Component({\n tag: \"hy-menu-main-group\",\n styleUrl: \"hy-menu-main-group.scss\",\n shadow: true,\n})\nexport class HyMenuMainGroup {\n @Element() el: HTMLElement;\n @Prop() menuLabel: string = \"University main menu\";\n @Prop() menuLabelClose: string = \"Close\";\n @Prop() dataMainMenu: MainMenu[] \| string;\n @Prop() isMobile: boolean = false;\n @Prop() logoUrl?: string;\n @Prop() logoLabel?: string;\n @Prop() siteLabel?: string;\n @Prop() siteUrl?: string;\n @Prop() donate: DonateLink[];\n @State() isMenuOpen: boolean = false;\n\n @Event() universityMainMenuToggled: EventEmitter;\n @Event() mobileMenuTopToggle: EventEmitter;\n\n private _dataMainMenu: MainMenu[];\n\n @Listen(\"click\", {capture: true})\n handleComponentClick(event) {\n event.stopPropagation();\n this.emitEvent();\n\n this.isMenuOpen = !this.isMenuOpen;\n if (this.isMenuOpen) {\n this.adjustMainMenuPosition(event.target);\n }\n }\n\n @Listen(\"keydown\")\n handleComponentKeyDown(event: KeyboardEvent) {\n event.stopPropagation();\n const key = event.code;\n let target = event.target as HTMLButtonElement;\n\n if (key === \"Escape\" && this.isMenuOpen) {\n this.isMenuOpen = false;\n this.emitEvent();\n }\n\n if (target && [keys.enter].includes(key)) {\n this.isMenuOpen = !this.isMenuOpen;\n\n if (this.isMenuOpen) {\n this.emitEvent();\n this.adjustMainMenuPosition(target);\n }\n }\n }\n\n emitEvent() {\n // Close other panels if they are open (lang menu, search, main menu, ..).\n this.universityMainMenuToggled.emit();\n this.mobileMenuTopToggle.emit();\n }\n\n adjustMainMenuPosition(target) {\n let hyTopHeader = this.el.closest(\".hy-site-header__content-top\") as HTMLElement;\n\n if (hyTopHeader && !hyTopHeader.hasAttribute(\"is-mobile\")) {\n let mainMenuToggle = target.shadowRoot.querySelector(\".menu--main-group__toggle\") as HTMLElement;\n let mainMenuDropdown = target.shadowRoot.querySelector(\".menu--main-group__dropdown\") as HTMLElement;\n let mainMenuList = target.shadowRoot.querySelector(\".list\") as HTMLElement;\n if (mainMenuDropdown && mainMenuList && mainMenuToggle) {\n let rectHeader = hyTopHeader.getBoundingClientRect();\n let rectMenuToggle = mainMenuToggle.getBoundingClientRect();\n mainMenuDropdown.style.top = `${rectHeader.height}px`;\n\n mainMenuList.style.left = `${rectMenuToggle.left}px`;\n }\n let headerHeight = hyTopHeader.offsetHeight + 270;\n\n this.showBackdropShadow(\"open\", headerHeight);\n }\n }\n\n showBackdropShadow(state = \"close\", top = 0) {\n let hyHeader = this.el.closest(\".hy-site-header\") as HTMLElement;\n let hyBackdropDiv = hyHeader.children[0] as HTMLElement;\n\n if (hyBackdropDiv) {\n if (state === \"open\") {\n let me = window.outerHeight - top;\n hyBackdropDiv.style.height = `${me}px`;\n hyBackdropDiv.style.top = `${top}px`;\n hyBackdropDiv.style.position = \"absolute\";\n hyBackdropDiv.classList.add(\"is-active\");\n } else {\n hyBackdropDiv.removeAttribute(\"style\");\n hyBackdropDiv.classList.remove(\"is-active\");\n }\n }\n }\n\n async componentWillLoad() {\n this._dataMainMenu = await jsonParserWorker(this.dataMainMenu);\n }\n\n handleTopMenuClose(event) {\n this.isMenuOpen = false;\n this.mobileMenuTopToggle.emit();\n this.showBackdropShadow();\n event.stopPropagation();\n }\n\n // Close the University main menu if user clicks anywhere outside the component.\n @Listen(\"click\", {target: \"window\"})\n @Listen(\"headerScrollDown\", {target: \"window\"})\n @Listen(\"headerScrollUp\", {target: \"window\"})\n handleOutsideMenuClick(event) {\n if (this.isMenuOpen) {\n this.isMenuOpen = false;\n this.handleTopMenuClose(event);\n }\n event.stopPropagation();\n }\n\n // CLose the University main menu if user opens the desktop menu panel.\n @Listen(\"menuDesktopToggled\", {target: \"document\"})\n desktopMenuToggled() {\n this.isMenuOpen = false;\n }\n\n // CLose the University main menu if user opens the search panel\n @Listen(\"searchPanelToggled\", {target: \"document\"})\n searchPanelToggled() {\n this.isMenuOpen = false;\n }\n\n // CLose the University main menu if user opens the language menu panel.\n @Listen(\"menuLanguageToggled\", {target: \"document\"})\n languageMenuToggled() {\n this.isMenuOpen = false;\n }\n\n render() {\n const white = \"var(--grayscale-white)\";\n const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;\n const logoColorGroup = ColorVariant.white;\n\n return this.isMobile ? (\n <Host\n class={{\n \"menu--main-group--mobile\": true,\n \"menu--main-group--mobile__is-open\": this.isMenuOpen,\n }}\n >\n <button\n aria-label={this.menuLabel}\n class={{\n \"menu--main-group__mobile-toggle\": true,\n \"is-open\": this.isMenuOpen,\n }}\n >\n <hy-icon icon={\"hy-icon-slim-hamburger-menu\"} size={20} fill={white} />\n </button>\n <nav\n role=\"navigation\"\n aria-hidden={this.isMenuOpen ? \"false\" : \"true\"}\n class={{\n \"menu--main-group__dropdown--mobile\": true,\n \"is-open\": this.isMenuOpen,\n }}\n >\n <div class=\"menu--main-group__dropdown__top\">\n <div class={\"menu--main-group__logo-container\"} id={\"menu-logo\"}>\n <hy-site-logo\n is-group={true}\n size={logoSizeGroup}\n color={logoColorGroup}\n url={this.siteUrl}\n label={this.siteLabel}\n />\n </div>\n <button\n aria-label={`Close ${this.menuLabel}`}\n class=\"menu--main-group__dropdown__close\"\n onClick={(e) => this.handleTopMenuClose(e)}\n >\n <hy-icon icon={\"hy-icon-remove\"} size={20} fill={white} />\n </button>\n </div>\n <div class=\"menu--main-group__dropdown__items\">\n {this._dataMainMenu.map((item) => {\n return (\n <a href={item.url} class={{\"menu-main-link\": true}}>\n <span class={\"menu--main-group__label\"}>{item.label}</span>\n </a>\n );\n })}\n </div>\n <div class=\"menu--main-group__dropdown__donate\">\n {this.donate &&\n this.donate.map((i) => {\n return (\n <a class={\"menu--secondary__item hy-link__donate group\"} href={i.url}>\n <hy-icon icon={\"hy-icon-heart-support\"} size={14} fill={logoColorGroup} />\n <span class={\"hy-link__donate__label group\"}>{i.label}</span>\n </a>\n );\n })}\n </div>\n </nav>\n </Host>\n ) : (\n <Host\n class={{\n \"menu--main-group\": true,\n \"menu--main-group__is-open\": this.isMenuOpen,\n }}\n >\n <button\n class={{\n \"menu--main-group__toggle\": true,\n \"is-open\": this.isMenuOpen,\n }}\n aria-expanded={this.isMenuOpen ? \"true\" : \"false\"}\n aria-haspopup=\"menu\"\n //aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}\n >\n {this.isMenuOpen ? (\n <hy-icon class={\"toggle__close\"} icon={\"hy-icon-remove\"} size={8} fill={white} />\n ) : (\n <hy-icon class={\"toggle__caret\"} icon={\"hy-icon-slim-hamburger-menu\"} size={8} fill={white} />\n )}\n <span>{this.menuLabel}</span>\n </button>\n <div\n class={{\n \"menu--main-group__dropdown\": true,\n \"is-open\": this.isMenuOpen,\n }}\n >\n <div class=\"list\">\n {this._dataMainMenu.map((item) => {\n return (\n <a href={item.url} class={{\"menu-main-link\": true}}>\n <span class=\"heading-icon\">\n <hy-icon icon={\"hy-icon-caret-right\"} size={10} fill={white} />\n </span>\n <span class={\"menu--main-group__label\"}>{item.label}</span>\n </a>\n );\n })}\n </div>\n <button\n onClick={(e) => this.handleComponentClick(e)}\n class={{\n \"panel-toggle\": true,\n }}\n aria-label=\"Close menu\"\n >\n <span class=\"panel-toggle__label\">\n <span class=\"panel-toggle__label__title\">{this.menuLabelClose}</span>\n <hy-icon icon={\"hy-icon-remove\"} size={20} fill={ColorVariant.white} />\n </span>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"hy-menu-main-group2.js","mappings":"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","names":[],"sources":["./src/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.scss?tag=hy-menu-main-group&encapsulation=shadow","./src/components/hy-navigation/hy-menu-main-group/hy-menu-main-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host(.menu--main-group) {\n align-items: center;\n display: flex;\n flex-flow: row;\n margin-left: 28px;\n\n @include breakpoint($extrawide) {\n margin-right: auto;\n }\n}\n\n.menu--main-group__toggle {\n @include font-size(14px, 16px);\n @include font-weight($semibold);\n align-items: center;\n background: var(--grayscale-black);\n border: 0 none;\n color: var(--grayscale-white);\n display: flex;\n flex-flow: row;\n font-family: var(--main-font-family);\n letter-spacing: -0.44px;\n margin: 0 -4px;\n padding: 0;\n position: relative;\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n cursor: pointer;\n\n span {\n color: var(--grayscale-medium);\n }\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n\n .toggle__caret {\n svg {\n @include breakpoint($wide) {\n height: 15.27px;\n width: 3px;\n }\n @include breakpoint($extrawide) {\n height: 14px;\n width: 3px;\n }\n }\n }\n\n span {\n @include breakpoint($wide) {\n margin-left: 17px;\n }\n }\n\n &.is-open {\n &:after {\n border-bottom: 3px solid white;\n bottom: -10px;\n content: \" \";\n position: absolute;\n width: 100%;\n }\n\n .toggle__close {\n @include breakpoint($wide) {\n height: 15px;\n width: 15px;\n\n svg {\n height: 15px;\n width: 15px;\n }\n }\n }\n\n span {\n @include breakpoint($wide) {\n margin-left: 10px;\n }\n }\n }\n}\n\n.menu--main-group__dropdown {\n display: none;\n visibility: hidden;\n\n &.is-open {\n background-color: var(--grayscale-black);\n border-radius: 0 0 5px 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);\n color: var(--grayscale-white);\n display: flex;\n font-family: var(--main-font-family);\n left: 0;\n margin: 0;\n padding: 6px 0 20px;\n position: absolute;\n top: 0;\n visibility: visible;\n width: 100%;\n z-index: 511;\n\n .list {\n display: flex;\n flex-flow: column;\n justify-items: center;\n padding-top: 14px;\n position: relative;\n }\n\n .panel-toggle {\n background-color: transparent;\n border: none;\n position: absolute;\n right: 0;\n top: 0;\n\n @include breakpoint($wide) {\n padding: 26px 32px;\n }\n\n &__label {\n @include font-size(16px, 20px);\n @include font-weight($bold);\n color: var(--grayscale-white);\n display: flex;\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n text-transform: uppercase;\n\n &__title {\n padding-right: 12px;\n }\n\n &:hover {\n cursor: pointer;\n span {\n color: var(--grayscale-medium);\n }\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n }\n\n .menu-main-link {\n @include font-size(16px, 20px);\n align-items: center;\n display: flex;\n font-family: var(--main-font-family);\n flex-direction: row;\n margin-bottom: 20px;\n text-decoration: none;\n\n @include breakpoint($extrawide) {\n @include font-size(14px, 18px);\n }\n\n &:hover {\n span {\n color: var(--grayscale-medium);\n }\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n .menu--main-group__label {\n color: var(--grayscale-white);\n margin-left: 12px;\n }\n }\n}\n\n:host(.menu--main-group--mobile) {\n align-items: center;\n display: flex;\n flex-flow: row;\n position: relative;\n}\n\n.menu--main-group__mobile-toggle {\n border: none;\n background: transparent;\n padding: 15px 12px;\n\n &:hover {\n cursor: pointer;\n }\n}\n\n.menu--main-group__dropdown__top {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: 23px;\n}\n\n.menu--main-group__dropdown__close {\n border: none;\n background-color: transparent;\n padding: 0;\n margin: 0;\n\n &:hover {\n cursor: pointer;\n }\n}\n\n.menu--main-group__logo-container .hy-site-logo__label.group {\n max-width: 250px;\n}\n\n.menu--main-group__dropdown__items {\n display: flex;\n flex-direction: column;\n\n .menu-main-link {\n @include font-size(15px, 20px);\n\n background-color: var(--grayscale-dark-text);\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n margin-bottom: 8px;\n padding: 14px 20px;\n text-decoration: none;\n width: 100%;\n\n &:hover {\n text-decoration: underline;\n }\n }\n}\n\n.menu--main-group__dropdown__donate {\n display: flex;\n flex-direction: row;\n justify-content: center;\n background-color: var(--grayscale-dark-text);\n position: fixed;\n bottom: 0;\n margin-left: -20px;\n width: 100%;\n\n .hy-link__donate.group {\n @include font-size(16px, 16px);\n @include font-weight($semibold);\n\n display: flex;\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n margin: 20px auto 16px auto;\n text-decoration: none;\n\n .hy-link__donate__label {\n margin-left: 6px;\n }\n }\n}\n\n.menu--main-group__dropdown--mobile {\n -webkit-box-direction: normal;\n -webkit-box-orient: vertical;\n background-color: var(--grayscale-black);\n bottom: 0px;\n display: flex;\n flex-direction: column;\n justify-items: space-between;\n max-width: 400px;\n overflow: hidden;\n padding: 0px;\n place-items: stretch;\n position: fixed;\n right: 0px;\n top: 0px;\n transform: translateX(100%);\n transition: all 0.3s ease 0s;\n visibility: hidden;\n width: 0px;\n\n &.is-open {\n padding: 50px 20px 20px;\n transform: translateX(0px);\n transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);\n visibility: visible;\n width: 90%;\n z-index: 101;\n\n &::after {\n opacity: 1;\n visibility: visible;\n }\n }\n}\n","export interface MainMenu {\n label: string;\n url: string;\n menuLinkId: string;\n}\n\nexport interface DonateLink {\n url: string;\n label: string;\n}\n\nimport {Component, Host, h, Element, Prop, State, Listen, Event, EventEmitter} from \"@stencil/core\";\nimport {ColorVariant, SiteLogoSize} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\nlet keys = {\n enter: \"Enter\",\n};\n\n@Component({\n tag: \"hy-menu-main-group\",\n styleUrl: \"hy-menu-main-group.scss\",\n shadow: true,\n})\nexport class HyMenuMainGroup {\n @Element() el: HTMLElement;\n @Prop() menuLabel: string = \"University main menu\";\n @Prop() menuLabelClose: string = \"Close\";\n @Prop() dataMainMenu: MainMenu[] \| string;\n @Prop() isMobile: boolean = false;\n @Prop() logoUrl?: string;\n @Prop() logoLabel?: string;\n @Prop() siteLabel?: string;\n @Prop() siteUrl?: string;\n @Prop() donate: DonateLink[];\n @State() isMenuOpen: boolean = false;\n\n @Event() universityMainMenuToggled: EventEmitter;\n @Event() mobileMenuTopToggle: EventEmitter;\n\n private _dataMainMenu: MainMenu[];\n\n async componentWillLoad() {\n this._dataMainMenu = await jsonParserWorker(this.dataMainMenu);\n }\n\n\n @Listen(\"click\", {capture: true})\n handleComponentClick(event) {\n this.isMenuOpen = !this.isMenuOpen;\n \n this.emitEvent();\n if (this.isMenuOpen) {\n this.adjustMainMenuPosition(event.target);\n }\n if (!this.isMenuOpen) {\n this.showBackdropShadow('close');\n }\n event.stopPropagation();\n }\n\n @Listen(\"keydown\")\n handleComponentKeyDown(event: KeyboardEvent) {\n event.stopPropagation();\n const key = event.code;\n let target = event.target as HTMLButtonElement;\n\n if (key === \"Escape\" && this.isMenuOpen) {\n this.isMenuOpen = false;\n this.emitEvent();\n }\n\n if (target && [keys.enter].includes(key)) {\n this.isMenuOpen = !this.isMenuOpen;\n\n if (this.isMenuOpen) {\n this.emitEvent();\n this.adjustMainMenuPosition(target);\n }\n }\n }\n\n // Handle events that should close the menu.\n @Listen(\"click\", {target: \"window\"})\n @Listen(\"headerScrollDown\", {target: \"window\"})\n @Listen(\"headerScrollUp\", {target: \"window\"})\n @Listen(\"menuLanguageToggled\", {target: \"document\"})\n @Listen(\"searchPanelToggled\", {target: \"document\"})\n @Listen(\"menuDesktopToggled\", {target: \"document\"})\n handleOutsideMenuClick(event) {\n if (this.isMenuOpen) {\n this.isMenuOpen = false;\n this.handleTopMenuClose(event);\n }\n event.stopPropagation();\n }\n\n emitEvent() {\n // Close other panels if they are open (lang menu, search, main menu, ..).\n this.universityMainMenuToggled.emit();\n this.mobileMenuTopToggle.emit();\n }\n\n // TODO: Cleanup this. Find cleaner way to do positioning.\n adjustMainMenuPosition(target) {\n let hyTopHeader = this.el.closest(\".hy-site-header__content-top\") as HTMLElement;\n\n if (hyTopHeader && !hyTopHeader.hasAttribute(\"is-mobile\")) {\n let mainMenuToggle = target.shadowRoot.querySelector(\".menu--main-group__toggle\") as HTMLElement;\n let mainMenuDropdown = target.shadowRoot.querySelector(\".menu--main-group__dropdown\") as HTMLElement;\n let mainMenuList = target.shadowRoot.querySelector(\".list\") as HTMLElement;\n if (mainMenuDropdown && mainMenuList && mainMenuToggle) {\n let rectHeader = hyTopHeader.getBoundingClientRect();\n let rectMenuToggle = mainMenuToggle.getBoundingClientRect();\n mainMenuDropdown.style.top = `${rectHeader.height}px`;\n\n mainMenuList.style.left = `${rectMenuToggle.left}px`;\n }\n let headerHeight = hyTopHeader.offsetHeight + 270;\n\n this.showBackdropShadow(\"open\", headerHeight);\n }\n }\n\n // TODO: Handle backdrop with CSS.\n showBackdropShadow(state = \"close\", top = 0) {\n let hyHeader = this.el.closest(\".hy-site-header\") as HTMLElement;\n let hyBackdropDiv = hyHeader.children[0] as HTMLElement;\n\n if (hyBackdropDiv) {\n if (state === \"open\") {\n let me = window.outerHeight - top;\n hyBackdropDiv.style.height = `${me}px`;\n hyBackdropDiv.style.top = `${top}px`;\n hyBackdropDiv.style.position = \"absolute\";\n hyBackdropDiv.classList.add(\"is-active\");\n } else {\n hyBackdropDiv.removeAttribute(\"style\");\n hyBackdropDiv.classList.remove(\"is-active\");\n }\n }\n }\n\n\n\n handleTopMenuClose(event) {\n this.isMenuOpen = false;\n this.mobileMenuTopToggle.emit();\n this.showBackdropShadow('close');\n event.stopPropagation();\n }\n\n\n render() {\n const white = \"var(--grayscale-white)\";\n const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;\n const logoColorGroup = ColorVariant.white;\n\n return this.isMobile ? (\n <Host\n class={{\n \"menu--main-group--mobile\": true,\n \"menu--main-group--mobile__is-open\": this.isMenuOpen,\n }}\n >\n <button\n aria-label={this.menuLabel}\n class={{\n \"menu--main-group__mobile-toggle\": true,\n \"is-open\": this.isMenuOpen,\n }}\n >\n <hy-icon icon={\"hy-icon-slim-hamburger-menu\"} size={20} fill={white} />\n </button>\n <nav\n role=\"navigation\"\n aria-hidden={this.isMenuOpen ? \"false\" : \"true\"}\n class={{\n \"menu--main-group__dropdown--mobile\": true,\n \"is-open\": this.isMenuOpen,\n }}\n >\n <div class=\"menu--main-group__dropdown__top\">\n <div class={\"menu--main-group__logo-container\"} id={\"menu-logo\"}>\n <hy-site-logo\n is-group={true}\n size={logoSizeGroup}\n color={logoColorGroup}\n url={this.siteUrl}\n label={this.siteLabel}\n />\n </div>\n <button\n aria-label={`Close ${this.menuLabel}`}\n class=\"menu--main-group__dropdown__close\"\n onClick={(e) => this.handleTopMenuClose(e)}\n >\n <hy-icon icon={\"hy-icon-remove\"} size={20} fill={white} />\n </button>\n </div>\n <div class=\"menu--main-group__dropdown__items\">\n {this._dataMainMenu.map((item) => {\n return (\n <a href={item.url} class={{\"menu-main-link\": true}}>\n <span class={\"menu--main-group__label\"}>{item.label}</span>\n </a>\n );\n })}\n </div>\n <div class=\"menu--main-group__dropdown__donate\">\n {this.donate &&\n this.donate.map((i) => {\n return (\n <a class={\"menu--secondary__item hy-link__donate group\"} href={i.url}>\n <hy-icon icon={\"hy-icon-heart-support\"} size={14} fill={logoColorGroup} />\n <span class={\"hy-link__donate__label group\"}>{i.label}</span>\n </a>\n );\n })}\n </div>\n </nav>\n </Host>\n ) : (\n <Host\n class={{\n \"menu--main-group\": true,\n \"menu--main-group__is-open\": this.isMenuOpen,\n }}\n >\n <button\n class={{\n \"menu--main-group__toggle\": true,\n \"is-open\": this.isMenuOpen,\n }}\n aria-expanded={this.isMenuOpen ? \"true\" : \"false\"}\n aria-haspopup=\"menu\"\n //aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}\n >\n {this.isMenuOpen ? (\n <hy-icon class={\"toggle__close\"} icon={\"hy-icon-remove\"} size={8} fill={white} />\n ) : (\n <hy-icon class={\"toggle__caret\"} icon={\"hy-icon-slim-hamburger-menu\"} size={8} fill={white} />\n )}\n <span>{this.menuLabel}</span>\n </button>\n <div\n class={{\n \"menu--main-group__dropdown\": true,\n \"is-open\": this.isMenuOpen,\n }}\n >\n <div class=\"list\">\n {this._dataMainMenu.map((item) => {\n return (\n <a href={item.url} class={{\"menu-main-link\": true}}>\n <span class=\"heading-icon\">\n <hy-icon icon={\"hy-icon-caret-right\"} size={10} fill={white} />\n </span>\n <span class={\"menu--main-group__label\"}>{item.label}</span>\n </a>\n );\n })}\n </div>\n <button\n onClick={(e) => this.handleComponentClick(e)}\n class={{\n \"panel-toggle\": true,\n }}\n aria-label=\"Close menu\"\n >\n <span class=\"panel-toggle__label\">\n <span class=\"panel-toggle__label__title\">{this.menuLabelClose}</span>\n <hy-icon icon={\"hy-icon-remove\"} size={20} fill={ColorVariant.white} />\n </span>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/menu-language.js CHANGED Viewed

@@ -82,9 +82,10 @@ const MenuLanguage = /*@__PURE__*/ proxyCustomElement(class MenuLanguage extends
       }
     })), h("hy-icon", { icon: "hy-icon-caret-down", size: 8, fill: svgColor })), h("div", { class: {
         "menu-language__dropdown": true,
-      }, "aria-hidden": `${!this.isMenuOpen}` }, h("ul", { class: "menu-language__links" }, this._dataMenuLanguage.map((item) => {
-      return (h("hy-menu-language-item", { "lang-code": item.langCode, url: item.url, label: item.label, abbr: item.abbr, "is-active": item.isActive, "is-disabled": item.isDisabled }));
-    })))));
+      }, "aria-hidden": `${!this.isMenuOpen}` }, this.isMenuOpen &&
+      h("ul", { class: "menu-language__links" }, this._dataMenuLanguage.map((item) => {
+        return (h("hy-menu-language-item", { "lang-code": item.langCode, url: item.url, label: item.label, abbr: item.abbr, "is-active": item.isActive, "is-disabled": item.isDisabled }));
+      })))));
   }
   get el() { return this; }
   static get style() { return menuLanguageCss; }

package/components/menu-language.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"menu-language.js","mappings":"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","names":[],"sources":["./src/components/hy-navigation/menu-language/menu-language.scss?tag=hy-menu-language&encapsulation=shadow","./src/components/hy-navigation/menu-language/menu-language.tsx"],"sourcesContent":[".menu-language {\n position: relative;\n align-items: center;\n display: flex;\n height: 100%;\n}\n\n.menu-language__toggle {\n @include font-size(16px, 16px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n align-items: center;\n background-color: transparent;\n border: 0;\n display: inline-grid;\n font-family: var(--main-font-family);\n gap: 4px;\n grid-template-columns: repeat(2, auto);\n letter-spacing: -0.7px;\n margin: 0;\n padding: 14px 10px;\n text-transform: uppercase;\n height: 100%;\n\n @include breakpoint($extrawide) {\n @include font-size(12px, 24px);\n @include font-weight($regular);\n color: var(--brand-main-nearly-black);\n letter-spacing: -0.5px;\n grid-template-columns: repeat(3, auto);\n padding: 0;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 24px);\n }\n\n &:hover {\n color: var(--brand-main);\n cursor: pointer;\n\n svg {\n fill: var(--brand-main);\n }\n }\n\n &:focus {\n outline: solid 2px var(--additional-yellow);\n outline-offset: 2px;\n }\n\n hy-icon {\n &:first-of-type {\n display: none !important;\n\n @include breakpoint($extrawide) {\n display: inline-flex !important;\n }\n }\n }\n\n &[aria-expanded=\"true\"] {\n position: relative;\n\n &:after {\n content: \"\";\n position: absolute;\n height: 4px;\n right: 0;\n bottom: -1px;\n left: 0;\n background-color: var(--grayscale-black);\n }\n\n span + hy-icon {\n transform: rotate(180deg);\n }\n }\n\n .is-group & {\n color: var(--grayscale-white);\n\n &:hover {\n color: var(--grayscale-medium);\n cursor: pointer;\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n}\n\n.menu-language__dropdown {\n background-color: var(--grayscale-white);\n border-radius: 0 0 5px 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-flow: column;\n justify-items: center;\n right: -15px;\n margin: 0;\n padding: 8px;\n position: absolute;\n text-transform: uppercase;\n visibility: visible;\n width: max-content;\n z-index: 100;\n min-width: 160px;\n\n &[aria-hidden=\"true\"] {\n display: none;\n }\n\n @include breakpoint($extrawide) {\n left: -15px;\n right: 0;\n }\n}\n\n.menu-language__links {\n margin: 0;\n padding: 0;\n list-style: none;\n display: grid;\n gap: 4px;\n}\n","import {ComponentLabels} from \"../../hy-site-header/site-header\";\n\nexport interface MenuLanguage {\n langCode: string;\n url: string;\n abbr: string;\n label: string;\n isActive?: boolean;\n isDisabled?: boolean;\n}\n\nimport {Component, h, Prop, Element, Listen, State, Event, EventEmitter} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-menu-language\",\n styleUrl: \"menu-language.scss\",\n shadow: true,\n})\nexport class MenuLanguage {\n @Element() el: HTMLElement;\n @Prop() dataMenuLanguage: MenuLanguage[] \| string;\n @Prop() isGroup: boolean = false;\n @Prop() labels?: ComponentLabels[] \| string;\n @State() isMenuOpen: boolean = false;\n\n @Event() menuLanguageToggled: EventEmitter;\n\n private _dataMenuLanguage: MenuLanguage[];\n private _labels: ComponentLabels[];\n\n // Close the language menu if user clicks anywhere outside the Menu language component.\n @Listen(\"click\", {target: \"window\"})\n handleOutsideMenuClick(event) {\n this.isMenuOpen = false;\n event.stopPropagation();\n }\n\n // CLose the language menu if user opens the desktop menu panel.\n @Listen(\"menuDesktopToggled\", {target: \"document\"})\n desktopMenuToggled() {\n this.isMenuOpen = false;\n }\n\n // CLose the language menu if user opens the search panel\n @Listen(\"searchPanelToggled\", {target: \"document\"})\n searchPanelToggled() {\n this.isMenuOpen = false;\n }\n\n // Close the language menu if user opens University main menu\n @Listen(\"universityMainMenuToggled\", {target: \"document\"})\n universityMainMenuPanelToggled() {\n this.isMenuOpen = false;\n }\n\n @Listen(\"focus\")\n handleComponentFocus(event) {\n // Close desktop menu panel if it's open.\n this.menuLanguageToggled.emit();\n\n event.stopPropagation();\n }\n\n @Listen(\"click\")\n handleComponentClick(event) {\n this.isMenuOpen = !this.isMenuOpen;\n\n if (this.isMenuOpen) {\n // Close desktop menu panel if it's open.\n this.menuLanguageToggled.emit();\n\n const languageMenuSelector = event.target as HTMLElement;\n this.adjustPosition(languageMenuSelector, this.el);\n }\n\n event.stopPropagation();\n }\n\n adjustPosition(languageMenuSelector, target) {\n const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(\n `.menu-language__dropdown`\n )[0] as HTMLElement;\n let headerHeight = \"0\";\n let hyHeader = this.isGroup\n ? (target.closest(\".hy-site-header__content-top\") as HTMLElement)\n : (target.closest(\".hy-site-header\") as HTMLElement);\n\n if (hyHeader) {\n let rectHeader = hyHeader.getBoundingClientRect();\n let rectLangMenu = languageMenuSelector.getBoundingClientRect();\n\n headerHeight = `${languageMenuSelector.offsetHeight + rectHeader.bottom + 8 - rectLangMenu.bottom}px`;\n }\n\n languagePanel.style.top = headerHeight;\n }\n\n async componentWillLoad() {\n this._dataMenuLanguage = await jsonParserWorker(this.dataMenuLanguage);\n this._labels = await jsonParserWorker(this.labels);\n }\n\n render() {\n const black = \"var(--brand-main-nearly-black)\";\n const white = \"var(--grayscale-white)\";\n const svgColor = this.isGroup ? white : black;\n const globeIconSize = this.isGroup ? 16 : 14;\n\n return (\n <div\n class={{\n \"menu-language\": true,\n \"is-open\": this.isMenuOpen,\n \"is-group\": this.isGroup,\n }}\n >\n <button\n class={{\n \"menu-language__toggle\": true,\n }}\n aria-label={this.isMenuOpen ? this._labels[\"close\"] : this._labels[\"open\"]}\n >\n <hy-icon icon={\"hy-icon-globe\"} size={globeIconSize} fill={svgColor} />\n <span>\n {this._dataMenuLanguage.map(({isActive, langCode}) => {\n if (isActive) {\n return langCode;\n }\n })}\n </span>\n <hy-icon icon={\"hy-icon-caret-down\"} size={8} fill={svgColor} />\n </button>\n <div\n class={{\n \"menu-language__dropdown\": true,\n }}\n aria-hidden={`${!this.isMenuOpen}`}\n >\n <ul class=\"menu-language__links\">\n {this._dataMenuLanguage.map((item) => {\n return (\n <hy-menu-language-item\n lang-code={item.langCode}\n url={item.url}\n label={item.label}\n abbr={item.abbr}\n is-active={item.isActive}\n is-disabled={item.isDisabled}\n />\n );\n })}\n </ul>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"menu-language.js","mappings":"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","names":[],"sources":["./src/components/hy-navigation/menu-language/menu-language.scss?tag=hy-menu-language&encapsulation=shadow","./src/components/hy-navigation/menu-language/menu-language.tsx"],"sourcesContent":[".menu-language {\n position: relative;\n align-items: center;\n display: flex;\n height: 100%;\n}\n\n.menu-language__toggle {\n @include font-size(16px, 16px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n align-items: center;\n background-color: transparent;\n border: 0;\n display: inline-grid;\n font-family: var(--main-font-family);\n gap: 4px;\n grid-template-columns: repeat(2, auto);\n letter-spacing: -0.7px;\n margin: 0;\n padding: 14px 10px;\n text-transform: uppercase;\n height: 100%;\n\n @include breakpoint($extrawide) {\n @include font-size(12px, 24px);\n @include font-weight($regular);\n color: var(--brand-main-nearly-black);\n letter-spacing: -0.5px;\n grid-template-columns: repeat(3, auto);\n padding: 0;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 24px);\n }\n\n &:hover {\n color: var(--brand-main);\n cursor: pointer;\n\n svg {\n fill: var(--brand-main);\n }\n }\n\n &:focus {\n outline: solid 2px var(--additional-yellow);\n outline-offset: 2px;\n }\n\n hy-icon {\n &:first-of-type {\n display: none !important;\n\n @include breakpoint($extrawide) {\n display: inline-flex !important;\n }\n }\n }\n\n &[aria-expanded=\"true\"] {\n position: relative;\n\n &:after {\n content: \"\";\n position: absolute;\n height: 4px;\n right: 0;\n bottom: -1px;\n left: 0;\n background-color: var(--grayscale-black);\n }\n\n span + hy-icon {\n transform: rotate(180deg);\n }\n }\n\n .is-group & {\n color: var(--grayscale-white);\n\n &:hover {\n color: var(--grayscale-medium);\n cursor: pointer;\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n}\n\n.menu-language__dropdown {\n background-color: var(--grayscale-white);\n border-radius: 0 0 5px 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-flow: column;\n justify-items: center;\n right: -15px;\n margin: 0;\n padding: 8px;\n position: absolute;\n text-transform: uppercase;\n visibility: visible;\n width: max-content;\n z-index: 100;\n min-width: 160px;\n\n &[aria-hidden=\"true\"] {\n display: none;\n }\n\n @include breakpoint($extrawide) {\n left: -15px;\n right: 0;\n }\n}\n\n.menu-language__links {\n margin: 0;\n padding: 0;\n list-style: none;\n display: grid;\n gap: 4px;\n}\n","import {ComponentLabels} from \"../../hy-site-header/site-header\";\n\nexport interface MenuLanguage {\n langCode: string;\n url: string;\n abbr: string;\n label: string;\n isActive?: boolean;\n isDisabled?: boolean;\n}\n\nimport {Component, h, Prop, Element, Listen, State, Event, EventEmitter} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-menu-language\",\n styleUrl: \"menu-language.scss\",\n shadow: true,\n})\nexport class MenuLanguage {\n @Element() el: HTMLElement;\n @Prop() dataMenuLanguage: MenuLanguage[] \| string;\n @Prop() isGroup: boolean = false;\n @Prop() labels?: ComponentLabels[] \| string;\n @State() isMenuOpen: boolean = false;\n\n @Event() menuLanguageToggled: EventEmitter;\n\n private _dataMenuLanguage: MenuLanguage[];\n private _labels: ComponentLabels[];\n\n // Close the language menu if user clicks anywhere outside the Menu language component.\n @Listen(\"click\", {target: \"window\"})\n handleOutsideMenuClick(event) {\n this.isMenuOpen = false;\n event.stopPropagation();\n }\n\n // CLose the language menu if user opens the desktop menu panel.\n @Listen(\"menuDesktopToggled\", {target: \"document\"})\n desktopMenuToggled() {\n this.isMenuOpen = false;\n }\n\n // CLose the language menu if user opens the search panel\n @Listen(\"searchPanelToggled\", {target: \"document\"})\n searchPanelToggled() {\n this.isMenuOpen = false;\n }\n\n // Close the language menu if user opens University main menu\n @Listen(\"universityMainMenuToggled\", {target: \"document\"})\n universityMainMenuPanelToggled() {\n this.isMenuOpen = false;\n }\n\n @Listen(\"focus\")\n handleComponentFocus(event) {\n // Close desktop menu panel if it's open.\n this.menuLanguageToggled.emit();\n\n event.stopPropagation();\n }\n\n @Listen(\"click\")\n handleComponentClick(event) {\n this.isMenuOpen = !this.isMenuOpen;\n\n if (this.isMenuOpen) {\n // Close desktop menu panel if it's open.\n this.menuLanguageToggled.emit();\n\n const languageMenuSelector = event.target as HTMLElement;\n this.adjustPosition(languageMenuSelector, this.el);\n }\n\n event.stopPropagation();\n }\n\n adjustPosition(languageMenuSelector, target) {\n const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(\n `.menu-language__dropdown`\n )[0] as HTMLElement;\n let headerHeight = \"0\";\n let hyHeader = this.isGroup\n ? (target.closest(\".hy-site-header__content-top\") as HTMLElement)\n : (target.closest(\".hy-site-header\") as HTMLElement);\n\n if (hyHeader) {\n let rectHeader = hyHeader.getBoundingClientRect();\n let rectLangMenu = languageMenuSelector.getBoundingClientRect();\n\n headerHeight = `${languageMenuSelector.offsetHeight + rectHeader.bottom + 8 - rectLangMenu.bottom}px`;\n }\n\n languagePanel.style.top = headerHeight;\n }\n\n async componentWillLoad() {\n this._dataMenuLanguage = await jsonParserWorker(this.dataMenuLanguage);\n this._labels = await jsonParserWorker(this.labels);\n }\n\n render() {\n const black = \"var(--brand-main-nearly-black)\";\n const white = \"var(--grayscale-white)\";\n const svgColor = this.isGroup ? white : black;\n const globeIconSize = this.isGroup ? 16 : 14;\n\n return (\n <div\n class={{\n \"menu-language\": true,\n \"is-open\": this.isMenuOpen,\n \"is-group\": this.isGroup,\n }}\n >\n <button\n class={{\n \"menu-language__toggle\": true,\n }}\n aria-label={this.isMenuOpen ? this._labels[\"close\"] : this._labels[\"open\"]}\n >\n <hy-icon icon={\"hy-icon-globe\"} size={globeIconSize} fill={svgColor} />\n <span>\n {this._dataMenuLanguage.map(({isActive, langCode}) => {\n if (isActive) {\n return langCode;\n }\n })}\n </span>\n <hy-icon icon={\"hy-icon-caret-down\"} size={8} fill={svgColor} />\n </button>\n <div\n class={{\n \"menu-language__dropdown\": true,\n }}\n aria-hidden={`${!this.isMenuOpen}`}\n >\n {this.isMenuOpen &&\n <ul class=\"menu-language__links\">\n {this._dataMenuLanguage.map((item) => {\n return (\n <hy-menu-language-item\n lang-code={item.langCode}\n url={item.url}\n label={item.label}\n abbr={item.abbr}\n is-active={item.isActive}\n is-disabled={item.isDisabled}\n />\n );\n })}\n </ul>\n }\n </div>\n </div>\n );\n }\n}\n"],"version":3}