@itcenteratunihelsinki/huds-lib 0.8.59 → 0.8.61

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 (46) hide show
  1. package/components/hy-general-list-item2.js +1 -1
  2. package/components/hy-general-list-item2.js.map +1 -1
  3. package/components/hy-hero-carousel.js +1 -1
  4. package/components/hy-hero-carousel.js.map +1 -1
  5. package/components/hy-hero.js +1 -1
  6. package/components/hy-hero.js.map +1 -1
  7. package/components/link-box.js +1 -1
  8. package/components/link-box.js.map +1 -1
  9. package/components/paragraph-text.js +1 -1
  10. package/components/paragraph-text.js.map +1 -1
  11. package/dist/cjs/hy-general-list_2.cjs.entry.js +1 -1
  12. package/dist/cjs/hy-general-list_2.cjs.entry.js.map +1 -1
  13. package/dist/cjs/hy-hero-carousel.cjs.entry.js +1 -1
  14. package/dist/cjs/hy-hero-carousel.cjs.entry.js.map +1 -1
  15. package/dist/cjs/hy-hero.cjs.entry.js +1 -1
  16. package/dist/cjs/hy-hero.cjs.entry.js.map +1 -1
  17. package/dist/cjs/hy-link-box_2.cjs.entry.js +1 -1
  18. package/dist/cjs/hy-link-box_2.cjs.entry.js.map +1 -1
  19. package/dist/cjs/hy-paragraph-text.cjs.entry.js +1 -1
  20. package/dist/cjs/hy-paragraph-text.cjs.entry.js.map +1 -1
  21. package/dist/collection/components/hy-general-list-item/hy-general-list-item.css +1 -0
  22. package/dist/collection/components/hy-hero/hy-hero.css +2 -0
  23. package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.css +2 -0
  24. package/dist/collection/components/hy-link-box/link-box.css +2 -0
  25. package/dist/collection/components/hy-paragraph-text/paragraph-text.css +1 -0
  26. package/dist/esm/hy-general-list_2.entry.js +1 -1
  27. package/dist/esm/hy-general-list_2.entry.js.map +1 -1
  28. package/dist/esm/hy-hero-carousel.entry.js +1 -1
  29. package/dist/esm/hy-hero-carousel.entry.js.map +1 -1
  30. package/dist/esm/hy-hero.entry.js +1 -1
  31. package/dist/esm/hy-hero.entry.js.map +1 -1
  32. package/dist/esm/hy-link-box_2.entry.js +1 -1
  33. package/dist/esm/hy-link-box_2.entry.js.map +1 -1
  34. package/dist/esm/hy-paragraph-text.entry.js +1 -1
  35. package/dist/esm/hy-paragraph-text.entry.js.map +1 -1
  36. package/dist/huds-lib/hy-general-list_2.entry.js +1 -1
  37. package/dist/huds-lib/hy-general-list_2.entry.js.map +1 -1
  38. package/dist/huds-lib/hy-hero-carousel.entry.js +1 -1
  39. package/dist/huds-lib/hy-hero-carousel.entry.js.map +1 -1
  40. package/dist/huds-lib/hy-hero.entry.js +1 -1
  41. package/dist/huds-lib/hy-hero.entry.js.map +1 -1
  42. package/dist/huds-lib/hy-link-box_2.entry.js +1 -1
  43. package/dist/huds-lib/hy-link-box_2.entry.js.map +1 -1
  44. package/dist/huds-lib/hy-paragraph-text.entry.js +1 -1
  45. package/dist/huds-lib/hy-paragraph-text.entry.js.map +1 -1
  46. package/package.json +2 -2
package/components/hy-hero.js CHANGED
@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './hy-box2.js';
5
5
  import { d as defineCustomElement$3 } from './cta-button.js';
6
6
  import { d as defineCustomElement$2 } from './icon.js';
7
7
 
8
- 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)}";
8
+ 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)}";
9
9
 
10
10
  let timeout = null;
11
11
  let delay = 250;
package/components/hy-hero.js.map CHANGED
@@ -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/link-box.js CHANGED
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
2
2
  import { n as LinkBoxVariants } from './utils.js';
3
3
  import { d as defineCustomElement$1 } from './icon.js';
4
4
 
5
- const linkBoxCss = ":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{height:100%}.hy-link-box-container{background:var(--grayscale-background-box);width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:100%;position:relative}.hy-link-box-container:focus-within{outline:auto}.hy-link-box-container:hover{cursor:pointer}.hy-link-box-container:hover .hy-link-box__text-container__title{color:var(--brand-main);text-decoration:underline}.hy-link-box-container:hover .hy-cta-link{text-decoration:underline}.hy-link-box-container:hover .hy-cta-link .hy-cta-link__icon{background-color:var(--brand-main)}.hy-link-box__image-container{margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;min-height:10rem;position:relative}.hy-link-box__image-container:before{content:\"\";display:block;padding-top:62.5%;width:100%}.hy-link-box__image-container img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-link-box__image-container.is-image-missing svg{position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);left:50%;width:85px;height:auto;fill:#d2d2d2}.hy-link-box__text-container{padding:16px}.hy-link-box__text-container__title{font-size:1.3125rem;line-height:28px;font-weight:700;color:var(--brand-main-nearly-black);font-family:var(--main-font-family);letter-spacing:-0.42px;-ms-hyphens:auto;hyphens:auto;word-break:break-word;margin:0 0 16px}@media screen and (min-width: 1024px){.hy-link-box__text-container__title{font-size:1.5625rem;line-height:32px;letter-spacing:-0.5px}}.hy-link-box__text-container__description{font-size:0.9375rem;line-height:22px;color:var(--grayscale-black);font-family:var(--main-font-family);margin:0}@media screen and (min-width: 1024px){.hy-link-box__text-container__description{font-size:1.0625rem;line-height:26px}}.hy-cta-link{font-weight:600;font-size:1rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);display:inline-grid;font-family:var(--main-font-family);gap:16px;grid-auto-flow:column;letter-spacing:-0.5px;overflow:hidden;text-decoration:none;margin:0 -8px 24px 0;align-self:flex-end}.hy-cta-link span[aria-hidden=true]{position:absolute;inset:0}.hy-cta-link:focus{outline:none}.hy-cta-link__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main-light);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px}.hy-cta-link__icon svg{fill:var(--grayscale-white)}.hy-cta-link__icon--external svg{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}";
5
+ const linkBoxCss = ":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{height:100%}.hy-link-box-container{background:var(--grayscale-background-box);width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:100%;position:relative}.hy-link-box-container:focus-within{outline:auto}.hy-link-box-container:hover{cursor:pointer}.hy-link-box-container:hover .hy-link-box__text-container__title{color:var(--brand-main);text-decoration:underline}.hy-link-box-container:hover .hy-cta-link{text-decoration:underline}.hy-link-box-container:hover .hy-cta-link .hy-cta-link__icon{background-color:var(--brand-main)}.hy-link-box__image-container{margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;min-height:10rem;position:relative}.hy-link-box__image-container:before{content:\"\";display:block;padding-top:62.5%;width:100%}.hy-link-box__image-container img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-link-box__image-container.is-image-missing svg{position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);left:50%;width:85px;height:auto;fill:#d2d2d2}.hy-link-box__text-container{padding:16px}.hy-link-box__text-container__title{font-size:1.3125rem;line-height:28px;font-weight:700;color:var(--brand-main-nearly-black);font-family:var(--main-font-family);letter-spacing:-0.42px;-ms-hyphens:auto;hyphens:auto;word-break:break-word;margin:0 0 16px;text-wrap:balance}@media screen and (min-width: 1024px){.hy-link-box__text-container__title{font-size:1.5625rem;line-height:32px;letter-spacing:-0.5px}}.hy-link-box__text-container__description{font-size:0.9375rem;line-height:22px;color:var(--grayscale-black);font-family:var(--main-font-family);margin:0;text-wrap:pretty}@media screen and (min-width: 1024px){.hy-link-box__text-container__description{font-size:1.0625rem;line-height:26px}}.hy-cta-link{font-weight:600;font-size:1rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);display:inline-grid;font-family:var(--main-font-family);gap:16px;grid-auto-flow:column;letter-spacing:-0.5px;overflow:hidden;text-decoration:none;margin:0 -8px 24px 0;align-self:flex-end}.hy-cta-link span[aria-hidden=true]{position:absolute;inset:0}.hy-cta-link:focus{outline:none}.hy-cta-link__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main-light);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px}.hy-cta-link__icon svg{fill:var(--grayscale-white)}.hy-cta-link__icon--external svg{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}";
6
6
 
7
7
  const LinkBox = /*@__PURE__*/ proxyCustomElement(class LinkBox extends HTMLElement {
8
8
  constructor() {
package/components/link-box.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"link-box.js","mappings":"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","names":[],"sources":["./src/components/hy-link-box/link-box.scss?tag=hy-link-box","./src/components/hy-link-box/link-box.tsx"],"sourcesContent":[":host {\n height: 100%;\n}\n\n.hy-link-box-container {\n background: var(--grayscale-background-box);\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n position: relative;\n\n &:focus-within {\n outline: auto;\n }\n\n &:hover {\n cursor: pointer;\n\n .hy-link-box__text-container__title {\n color: var(--brand-main);\n text-decoration: underline;\n }\n\n .hy-cta-link {\n text-decoration: underline;\n\n .hy-cta-link__icon {\n background-color: var(--brand-main);\n }\n }\n }\n}\n\n.hy-link-box__image-container {\n margin: 0;\n display: flex;\n justify-content: stretch;\n min-height: 10rem;\n position: relative;\n\n &:before {\n content: \"\";\n display: block;\n padding-top: calc(10 / 16) * 100%;\n width: 100%;\n }\n\n img {\n bottom: 0;\n height: 100%;\n left: 0;\n object-fit: cover;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n }\n\n &.is-image-missing {\n svg {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n left: 50%;\n width: 85px;\n height: auto;\n fill: #d2d2d2;\n }\n }\n}\n\n.hy-link-box__text-container {\n padding: 16px;\n}\n\n.hy-link-box__text-container__title {\n @include font-size(21px, 28px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.42px;\n hyphens: auto;\n word-break: break-word;\n margin: 0 0 16px;\n\n @media screen and (min-width: 1024px) {\n @include font-size(25px, 32px);\n letter-spacing: -0.5px;\n }\n}\n\n.hy-link-box__text-container__description {\n @include font-size(15px, 22px);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n margin: 0;\n\n @media screen and (min-width: 1024px) {\n @include font-size(17px, 26px);\n }\n}\n\n.hy-cta-link {\n @include font-weight($semibold);\n @include font-size(16px, 24px);\n align-items: center;\n color: var(--brand-main);\n display: inline-grid;\n font-family: var(--main-font-family);\n gap: 16px;\n grid-auto-flow: column;\n letter-spacing: -0.5px;\n overflow: hidden;\n text-decoration: none;\n margin: 0 -8px 24px 0;\n align-self: flex-end;\n\n span[aria-hidden=\"true\"] {\n position: absolute;\n inset: 0;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.hy-cta-link__icon {\n align-items: center;\n background-color: var(--brand-main-light);\n display: inline-flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n\n svg {\n fill: var(--grayscale-white);\n }\n\n &--external {\n svg {\n transform: rotate(-45deg);\n }\n }\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string | null;\n}\n\nimport {Component, ComponentInterface, Element, Prop, h, Watch} from \"@stencil/core\";\nimport {LinkBoxVariants} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-link-box\",\n styleUrl: \"link-box.scss\",\n shadow: false,\n})\nexport class LinkBox implements ComponentInterface {\n @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;\n @Prop() imageUrl: string = null;\n @Prop() imageAlt: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() useSlot: boolean = false;\n @Prop() showLogo: boolean = false;\n @Prop() textTitle?: string;\n @Prop() textDescription: string = null;\n @Prop() url?: string;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() readMoreLabel: string;\n @Prop() headerstyle: string = \"common\";\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] | string;\n @Element() el: HTMLElement;\n\n @Watch(\"sourceSet\") srcSetWatcher(data: ImageSrcSet[] | string) {\n this._sourceSet = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n componentWillLoad() {\n this.srcSetWatcher(this.sourceSet);\n }\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n }\n\n render() {\n const classContainerAttributes = [\"hy-link-box-container\"].join(\" \");\n const classAttributes = [\n \"hy-link-box\",\n this.variant,\n `hy-link-box__${this.variant}`,\n this.headerstyle,\n `hy-link-box__${this.headerstyle}`,\n this.imageUrl ? \"hy-link-box--with-image\" : null,\n ].join(\" \");\n\n const classTextContainer = [\"hy-link-box__text-container\", this.imageUrl ? \"hy-link-box--with-image\" : null].join(\n \" \"\n );\n\n const classTitle = [\n \"hy-link-box__text-container__title\",\n `hy-link-box__text-container__title__${this.variant}`,\n `hy-link-box__text-container__title__${this.headerstyle}`,\n this.imageUrl ? \"hy-link-box__text-container__title__image\" : \"\",\n this.imageUrl ? \"image\" : \"\",\n ].join(\" \");\n\n const classDescription = [\n \"hy-link-box__text-container__description\",\n `hy-link-box__text-container__description__${this.variant}`,\n `hy-link-box__text-container__description__${this.headerstyle}`,\n ].join(\" \");\n\n const target = this.isExternal ? \"_blank\" : \"_self\";\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 return [\n <article class={classContainerAttributes}>\n <div class={classAttributes}>\n {this.imageUrl &&\n (this._sourceSet ? (\n <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\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 aria-hidden=\"true\"\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </picture>\n </figure>\n ) : (\n <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </figure>\n ))}\n {!this.imageUrl && this.showLogo && (\n <div aria-hidden=\"true\" class=\"hy-link-box__image-container is-image-missing\">\n <hy-icon class={{\"hy-site-logo__icon\": true}} icon={\"hy-icon-hy-logo\"} />\n </div>\n )}\n <div class={classTextContainer}>\n <h3 class={classTitle}>{this.textTitle}</h3>\n {this.textDescription && (\n <p class={classDescription}>\n {this.textDescription.length >= 141 ? this.textDescription.slice(0, 140) + \"...\" : this.textDescription}\n </p>\n )}\n </div>\n </div>\n <a\n aria-label={this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`}\n title={this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`}\n href={this.url}\n target={target}\n class={`hy-cta-link hy-cta-link--default`}\n >\n <span aria-hidden=\"true\"></span>\n <span>{this.readMoreLabel}</span>\n <span class={`hy-cta-link__icon ${this.isExternal ? \"hy-cta-link__icon--external\" : \"\"}`}>\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={24} />\n </span>\n </a>\n </article>,\n ];\n }\n}\n"],"version":3}
1
+ {"file":"link-box.js","mappings":"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","names":[],"sources":["./src/components/hy-link-box/link-box.scss?tag=hy-link-box","./src/components/hy-link-box/link-box.tsx"],"sourcesContent":[":host {\n height: 100%;\n}\n\n.hy-link-box-container {\n background: var(--grayscale-background-box);\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n position: relative;\n\n &:focus-within {\n outline: auto;\n }\n\n &:hover {\n cursor: pointer;\n\n .hy-link-box__text-container__title {\n color: var(--brand-main);\n text-decoration: underline;\n }\n\n .hy-cta-link {\n text-decoration: underline;\n\n .hy-cta-link__icon {\n background-color: var(--brand-main);\n }\n }\n }\n}\n\n.hy-link-box__image-container {\n margin: 0;\n display: flex;\n justify-content: stretch;\n min-height: 10rem;\n position: relative;\n\n &:before {\n content: \"\";\n display: block;\n padding-top: calc(10 / 16) * 100%;\n width: 100%;\n }\n\n img {\n bottom: 0;\n height: 100%;\n left: 0;\n object-fit: cover;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n }\n\n &.is-image-missing {\n svg {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n left: 50%;\n width: 85px;\n height: auto;\n fill: #d2d2d2;\n }\n }\n}\n\n.hy-link-box__text-container {\n padding: 16px;\n}\n\n.hy-link-box__text-container__title {\n @include font-size(21px, 28px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.42px;\n hyphens: auto;\n word-break: break-word;\n margin: 0 0 16px;\n text-wrap: balance;\n\n @media screen and (min-width: 1024px) {\n @include font-size(25px, 32px);\n letter-spacing: -0.5px;\n }\n}\n\n.hy-link-box__text-container__description {\n @include font-size(15px, 22px);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n margin: 0;\n text-wrap: pretty;\n\n @media screen and (min-width: 1024px) {\n @include font-size(17px, 26px);\n }\n}\n\n.hy-cta-link {\n @include font-weight($semibold);\n @include font-size(16px, 24px);\n align-items: center;\n color: var(--brand-main);\n display: inline-grid;\n font-family: var(--main-font-family);\n gap: 16px;\n grid-auto-flow: column;\n letter-spacing: -0.5px;\n overflow: hidden;\n text-decoration: none;\n margin: 0 -8px 24px 0;\n align-self: flex-end;\n\n span[aria-hidden=\"true\"] {\n position: absolute;\n inset: 0;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.hy-cta-link__icon {\n align-items: center;\n background-color: var(--brand-main-light);\n display: inline-flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n\n svg {\n fill: var(--grayscale-white);\n }\n\n &--external {\n svg {\n transform: rotate(-45deg);\n }\n }\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string | null;\n}\n\nimport {Component, ComponentInterface, Element, Prop, h, Watch} from \"@stencil/core\";\nimport {LinkBoxVariants} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-link-box\",\n styleUrl: \"link-box.scss\",\n shadow: false,\n})\nexport class LinkBox implements ComponentInterface {\n @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;\n @Prop() imageUrl: string = null;\n @Prop() imageAlt: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() useSlot: boolean = false;\n @Prop() showLogo: boolean = false;\n @Prop() textTitle?: string;\n @Prop() textDescription: string = null;\n @Prop() url?: string;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() readMoreLabel: string;\n @Prop() headerstyle: string = \"common\";\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] | string;\n @Element() el: HTMLElement;\n\n @Watch(\"sourceSet\") srcSetWatcher(data: ImageSrcSet[] | string) {\n this._sourceSet = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n componentWillLoad() {\n this.srcSetWatcher(this.sourceSet);\n }\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n }\n\n render() {\n const classContainerAttributes = [\"hy-link-box-container\"].join(\" \");\n const classAttributes = [\n \"hy-link-box\",\n this.variant,\n `hy-link-box__${this.variant}`,\n this.headerstyle,\n `hy-link-box__${this.headerstyle}`,\n this.imageUrl ? \"hy-link-box--with-image\" : null,\n ].join(\" \");\n\n const classTextContainer = [\"hy-link-box__text-container\", this.imageUrl ? \"hy-link-box--with-image\" : null].join(\n \" \"\n );\n\n const classTitle = [\n \"hy-link-box__text-container__title\",\n `hy-link-box__text-container__title__${this.variant}`,\n `hy-link-box__text-container__title__${this.headerstyle}`,\n this.imageUrl ? \"hy-link-box__text-container__title__image\" : \"\",\n this.imageUrl ? \"image\" : \"\",\n ].join(\" \");\n\n const classDescription = [\n \"hy-link-box__text-container__description\",\n `hy-link-box__text-container__description__${this.variant}`,\n `hy-link-box__text-container__description__${this.headerstyle}`,\n ].join(\" \");\n\n const target = this.isExternal ? \"_blank\" : \"_self\";\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 return [\n <article class={classContainerAttributes}>\n <div class={classAttributes}>\n {this.imageUrl &&\n (this._sourceSet ? (\n <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\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 aria-hidden=\"true\"\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </picture>\n </figure>\n ) : (\n <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </figure>\n ))}\n {!this.imageUrl && this.showLogo && (\n <div aria-hidden=\"true\" class=\"hy-link-box__image-container is-image-missing\">\n <hy-icon class={{\"hy-site-logo__icon\": true}} icon={\"hy-icon-hy-logo\"} />\n </div>\n )}\n <div class={classTextContainer}>\n <h3 class={classTitle}>{this.textTitle}</h3>\n {this.textDescription && (\n <p class={classDescription}>\n {this.textDescription.length >= 141 ? this.textDescription.slice(0, 140) + \"...\" : this.textDescription}\n </p>\n )}\n </div>\n </div>\n <a\n aria-label={this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`}\n title={this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`}\n href={this.url}\n target={target}\n class={`hy-cta-link hy-cta-link--default`}\n >\n <span aria-hidden=\"true\"></span>\n <span>{this.readMoreLabel}</span>\n <span class={`hy-cta-link__icon ${this.isExternal ? \"hy-cta-link__icon--external\" : \"\"}`}>\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={24} />\n </span>\n </a>\n </article>,\n ];\n }\n}\n"],"version":3}
package/components/paragraph-text.js CHANGED
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
2
2
 
3
3
  const paragraphTextContentCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:16px}}@media (min-width: 60rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:32px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:32px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:40px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{padding-bottom:16px;padding-top:32px}}";
4
4
 
5
- const defaultParagraphTextCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:16px}}@media (min-width: 60rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:32px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:32px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:40px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:32px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:16px;padding-top:40px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{padding-bottom:16px;padding-top:48px}}.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{padding-bottom:16px;padding-top:40px}}:host{display:block}.hy-paragraph-text{font-size:0.9375rem;line-height:22px;color:var(--grayscale-dark-text);font-family:var(--main-font-family);letter-spacing:0;width:100%}@media (min-width: 30rem){.hy-paragraph-text{font-size:1rem;line-height:24px}}@media (min-width: 60rem){.hy-paragraph-text{width:91.46%}}@media (min-width: 1601px){.hy-paragraph-text{font-size:1.0625rem;line-height:26px;width:82.89%}}@media (min-width: 75.0625rem){.hy-paragraph-text__large{font-size:1.0625rem;line-height:26px;width:82.89%}}@media (min-width: 1601px){.hy-paragraph-text__large{width:74.17%}}@media (min-width: 60rem){.hy-paragraph-text.degree_programme_group{width:91.46%}}@media (min-width: 60rem){.hy-paragraph-text.main_front_page,.hy-paragraph-text.landing_page,.hy-paragraph-text.faculty,.hy-paragraph-text.generic_site_group,.hy-paragraph-text.degree_programme_group,.hy-paragraph-text.research_group{width:100%}}.hy-paragraph-text h1,.hy-paragraph-text h2,.hy-paragraph-text h3,.hy-paragraph-text h4,.hy-paragraph-text h5,.hy-paragraph-text h6{color:var(--grayscale-black);font-family:var(--main-font-family);font-weight:700;margin:0;width:100%}.hy-paragraph-text h1.negative,.hy-paragraph-text h2.negative,.hy-paragraph-text h3.negative,.hy-paragraph-text h4.negative,.hy-paragraph-text h5.negative,.hy-paragraph-text h6.negative{color:var(--grayscale-white)}.hy-paragraph-text a{font-size:0.875rem;line-height:20px;color:var(--link-blue);font-family:var(--main-font-family);font-weight:600}@media (min-width: 30rem){.hy-paragraph-text a{font-size:1rem;line-height:24px;letter-spacing:-0.1px}}@media (min-width: 1601px){.hy-paragraph-text a{font-size:1.0625rem;line-height:26px}}.hy-paragraph-text a:hover{color:var(--brand-main)}.hy-paragraph-text a[target=_blank]:after{display:inline-block;vertical-align:middle;width:12px;height:12px;margin-left:3px;background-size:contain;content:\"\";background-image:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");-webkit-transform:rotate(315deg);transform:rotate(315deg)}.hy-paragraph-text a[target=_blank]:after:hover{background-image:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\")}.hy-paragraph-text a[target=_blank]:hover:after{background-image:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\")}.hy-paragraph-text p{margin-top:0;padding-top:0}.hy-paragraph-text p:last-of-type{margin-bottom:0}.hy-paragraph-text:first-child{margin-top:0 !important}hy-paragraph-text+hy-link-list{display:block;margin-top:32px}";
5
+ const defaultParagraphTextCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:16px}}@media (min-width: 60rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:32px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:32px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:40px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:32px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:16px;padding-top:40px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{padding-bottom:16px;padding-top:48px}}.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{padding-bottom:16px;padding-top:40px}}:host{display:block}.hy-paragraph-text{font-size:0.9375rem;line-height:22px;color:var(--grayscale-dark-text);font-family:var(--main-font-family);letter-spacing:0;text-wrap:pretty;width:100%}@media (min-width: 30rem){.hy-paragraph-text{font-size:1rem;line-height:24px}}@media (min-width: 60rem){.hy-paragraph-text{width:91.46%}}@media (min-width: 1601px){.hy-paragraph-text{font-size:1.0625rem;line-height:26px;width:82.89%}}@media (min-width: 75.0625rem){.hy-paragraph-text__large{font-size:1.0625rem;line-height:26px;width:82.89%}}@media (min-width: 1601px){.hy-paragraph-text__large{width:74.17%}}@media (min-width: 60rem){.hy-paragraph-text.degree_programme_group{width:91.46%}}@media (min-width: 60rem){.hy-paragraph-text.main_front_page,.hy-paragraph-text.landing_page,.hy-paragraph-text.faculty,.hy-paragraph-text.generic_site_group,.hy-paragraph-text.degree_programme_group,.hy-paragraph-text.research_group{width:100%}}.hy-paragraph-text h1,.hy-paragraph-text h2,.hy-paragraph-text h3,.hy-paragraph-text h4,.hy-paragraph-text h5,.hy-paragraph-text h6{color:var(--grayscale-black);font-family:var(--main-font-family);font-weight:700;margin:0;width:100%}.hy-paragraph-text h1.negative,.hy-paragraph-text h2.negative,.hy-paragraph-text h3.negative,.hy-paragraph-text h4.negative,.hy-paragraph-text h5.negative,.hy-paragraph-text h6.negative{color:var(--grayscale-white)}.hy-paragraph-text a{font-size:0.875rem;line-height:20px;color:var(--link-blue);font-family:var(--main-font-family);font-weight:600}@media (min-width: 30rem){.hy-paragraph-text a{font-size:1rem;line-height:24px;letter-spacing:-0.1px}}@media (min-width: 1601px){.hy-paragraph-text a{font-size:1.0625rem;line-height:26px}}.hy-paragraph-text a:hover{color:var(--brand-main)}.hy-paragraph-text a[target=_blank]:after{display:inline-block;vertical-align:middle;width:12px;height:12px;margin-left:3px;background-size:contain;content:\"\";background-image:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");-webkit-transform:rotate(315deg);transform:rotate(315deg)}.hy-paragraph-text a[target=_blank]:after:hover{background-image:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\")}.hy-paragraph-text a[target=_blank]:hover:after{background-image:url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\")}.hy-paragraph-text p{margin-top:0;padding-top:0}.hy-paragraph-text p:last-of-type{margin-bottom:0}.hy-paragraph-text:first-child{margin-top:0 !important}hy-paragraph-text+hy-link-list{display:block;margin-top:32px}";
6
6
 
7
7
  const paragraphTextLandingCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:32px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:16px;padding-top:40px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{padding-bottom:16px;padding-top:48px}}.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{padding-bottom:16px;padding-top:40px}}";
8
8
 
package/components/paragraph-text.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"paragraph-text.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,yiIAAyiI;;ACAzkI,MAAM,uBAAuB,GAAG,8wSAA8wS;;ACA9yS,MAAM,uBAAuB,GAAG,6mGAA6mG;;MCWhoG,aAAa;;;;;qBAEI,UAAU;uBACR,SAAS;;EAGvC,gBAAgB;IACd,IAAI,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5C,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;QACjD,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;OAC5B;KACF;GACF;EAED,MAAM;IACJ,MAAM,eAAe,GAAG;MACtB,mBAAmB;MACnB,sBAAsB,IAAI,CAAC,WAAW,EAAE;MACxC,GAAG,IAAI,CAAC,OAAO,EAAE;MACjB,GAAG,IAAI,CAAC,SAAS,EAAE;MACnB,GAAG,IAAI,CAAC,WAAW,EAAE;KACtB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,eAAe,IACzB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hy-paragraph-text/paragraph-text-content.scss?tag=hy-paragraph-text&mode=content","./src/components/hy-paragraph-text/paragraph-text.scss?tag=hy-paragraph-text&mode=default","./src/components/hy-paragraph-text/paragraph-text-landing.scss?tag=hy-paragraph-text&mode=landing","./src/components/hy-paragraph-text/paragraph-text.tsx"],"sourcesContent":["//overrides for Content pages\n\n/*\n* Common styles for text plus mobile & tablet & small desktop\n* in Content Pages and Field of science pages.\n*/\n.hy-paragraph-text.content_page.external,\n.hy-paragraph-text.field_of_science.external {\n margin-top: 24px; //total gap between heading h2 and paragraph content is 48px\n\n @include breakpoint($narrow) {\n margin-top: 16px; //total gap 40px\n }\n @include breakpoint($wide) {\n margin-top: 32px; //total gap 56px\n }\n}\n\n// There is a sidebar on the Content page\n.hy-paragraph-text.content_page.external.default,\n.hy-paragraph-text.field_of_science.external.default {\n @include breakpoint($extrawide) {\n margin-top: 32px; //total gap 56px\n }\n @include breakpoint($xlarge) {\n margin-top: 40px; //total gap 64px\n }\n}\n\n// No sidebar on the Content page\n.hy-paragraph-text.content_page.external.large,\n.hy-paragraph-text.field_of_science.external.large {\n @include breakpoint($extrawide) {\n margin-top: 40px; //total gap 64px\n }\n @include breakpoint($xlarge) {\n margin-top: 40px; //total gap 64px\n }\n}\n\n.hy-paragraph-text.content_page,\n.hy-paragraph-text.field_of_science {\n h3 {\n // text H3 small\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H3 Medium size\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h4 {\n // text H4 small\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H4 Medium size\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h5 {\n // text H5 small\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H5 Medium size\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h6 {\n // text H6 small\n @include font-size(14px, 16px);\n letter-spacing: -0.44px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H6 Medium size\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n}\n","@import \"./paragraph-text-content.scss\";\n@import \"./paragraph-text-landing.scss\";\n\n:host {\n display: block;\n}\n\n// General styles for text paragraph\n.hy-paragraph-text {\n @include font-size(15px, 22px); // Paragraph Small size\n color: var(--grayscale-dark-text);\n font-family: var(--main-font-family);\n letter-spacing: 0;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px); // Paragraph Medium size\n }\n @include breakpoint($wide) {\n width: 91.46%; // 11 col\n }\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n width: 82.89%; // 10 col\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(17px, 26px); // Paragraph Large size\n width: 82.89%; // 10 col\n }\n @include breakpoint($xlarge) {\n width: 74.17%; // 9 col\n }\n }\n\n &.degree_programme_group {\n @include breakpoint($wide) {\n width: 91.46%; // 11 col\n }\n }\n\n &.main_front_page,\n &.landing_page,\n &.faculty,\n &.generic_site_group,\n &.degree_programme_group,\n &.research_group {\n @include breakpoint($wide) {\n width: 100%;\n }\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n font-weight: 700;\n margin: 0;\n width: 100%;\n\n &.negative {\n color: var(--grayscale-white);\n }\n }\n\n // link within paragraph (Open sans semibold)\n a {\n @include font-size(14px, 20px); // Paragraph Small size\n color: var(--link-blue);\n font-family: var(--main-font-family);\n font-weight: 600;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n letter-spacing: -0.1px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n }\n\n &:hover {\n color: var(--brand-main);\n }\n }\n\n a[target=\"_blank\"]:after {\n display: inline-block;\n vertical-align: middle;\n width: 12px;\n height: 12px;\n margin-left: 3px;\n background-size: contain;\n content: \"\";\n background-image: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n transform: rotate(315deg);\n\n &:hover {\n background-image: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n }\n }\n\n a[target=\"_blank\"]:hover {\n &:after {\n background-image: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n }\n }\n\n p {\n margin-top: 0;\n padding-top: 0;\n\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n\n // When hy-paragraph-text is the first child it will not add spacing to top. Will fix heading + text spacing issue.\n &:first-child {\n margin-top: 0 !important;\n }\n}\n\nhy-paragraph-text + hy-link-list {\n display: block;\n margin-top: 32px;\n}\n","//overrides for Landing pages and Front page\n\n// Common styles for text plus mobile & tablet & small desktop in Landing Pages\n.hy-paragraph-text.landing_page,\n.hy-paragraph-text.main_front_page {\n h3 {\n // text H3 small\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n\n padding-bottom: 12px;\n padding-top: 32px;\n\n @include breakpoint($narrow) {\n // text H3 Medium size\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n\n padding-bottom: 16px;\n padding-top: 40px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 48px;\n }\n }\n\n h4 {\n // text H4 small\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H4 Medium size\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n\n h5 {\n // text H5 small\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H5 Medium size\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n\n h6 {\n // text H6 small\n @include font-size(14px, 16px);\n letter-spacing: -0.44px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H6 Medium size\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-paragraph-text\",\n styleUrls: {\n default: \"paragraph-text.scss\",\n content: \"paragraph-text-content.scss\",\n landing: \"paragraph-text-landing.scss\",\n },\n shadow: false,\n})\nexport class ParagraphText {\n @Prop() variant: string;\n @Prop() placement: string = \"internal\";\n @Prop() headerstyle: string = \"default\";\n @Element() el: HTMLElement;\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n }\n\n render() {\n const classAttributes = [\n \"hy-paragraph-text\",\n `hy-paragraph-text__${this.headerstyle}`,\n `${this.variant}`,\n `${this.placement}`,\n `${this.headerstyle}`,\n ].join(\" \");\n\n return (\n <Host>\n <div class={classAttributes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"paragraph-text.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,yiIAAyiI;;ACAzkI,MAAM,uBAAuB,GAAG,+xSAA+xS;;ACA/zS,MAAM,uBAAuB,GAAG,6mGAA6mG;;MCWhoG,aAAa;;;;;qBAEI,UAAU;uBACR,SAAS;;EAGvC,gBAAgB;IACd,IAAI,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5C,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;QACjD,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;OAC5B;KACF;GACF;EAED,MAAM;IACJ,MAAM,eAAe,GAAG;MACtB,mBAAmB;MACnB,sBAAsB,IAAI,CAAC,WAAW,EAAE;MACxC,GAAG,IAAI,CAAC,OAAO,EAAE;MACjB,GAAG,IAAI,CAAC,SAAS,EAAE;MACnB,GAAG,IAAI,CAAC,WAAW,EAAE;KACtB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,eAAe,IACzB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hy-paragraph-text/paragraph-text-content.scss?tag=hy-paragraph-text&mode=content","./src/components/hy-paragraph-text/paragraph-text.scss?tag=hy-paragraph-text&mode=default","./src/components/hy-paragraph-text/paragraph-text-landing.scss?tag=hy-paragraph-text&mode=landing","./src/components/hy-paragraph-text/paragraph-text.tsx"],"sourcesContent":["//overrides for Content pages\n\n/*\n* Common styles for text plus mobile & tablet & small desktop\n* in Content Pages and Field of science pages.\n*/\n.hy-paragraph-text.content_page.external,\n.hy-paragraph-text.field_of_science.external {\n margin-top: 24px; //total gap between heading h2 and paragraph content is 48px\n\n @include breakpoint($narrow) {\n margin-top: 16px; //total gap 40px\n }\n @include breakpoint($wide) {\n margin-top: 32px; //total gap 56px\n }\n}\n\n// There is a sidebar on the Content page\n.hy-paragraph-text.content_page.external.default,\n.hy-paragraph-text.field_of_science.external.default {\n @include breakpoint($extrawide) {\n margin-top: 32px; //total gap 56px\n }\n @include breakpoint($xlarge) {\n margin-top: 40px; //total gap 64px\n }\n}\n\n// No sidebar on the Content page\n.hy-paragraph-text.content_page.external.large,\n.hy-paragraph-text.field_of_science.external.large {\n @include breakpoint($extrawide) {\n margin-top: 40px; //total gap 64px\n }\n @include breakpoint($xlarge) {\n margin-top: 40px; //total gap 64px\n }\n}\n\n.hy-paragraph-text.content_page,\n.hy-paragraph-text.field_of_science {\n h3 {\n // text H3 small\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H3 Medium size\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h4 {\n // text H4 small\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H4 Medium size\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h5 {\n // text H5 small\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H5 Medium size\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h6 {\n // text H6 small\n @include font-size(14px, 16px);\n letter-spacing: -0.44px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H6 Medium size\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n}\n","@import \"./paragraph-text-content.scss\";\n@import \"./paragraph-text-landing.scss\";\n\n:host {\n display: block;\n}\n\n// General styles for text paragraph\n.hy-paragraph-text {\n @include font-size(15px, 22px); // Paragraph Small size\n color: var(--grayscale-dark-text);\n font-family: var(--main-font-family);\n letter-spacing: 0;\n text-wrap: pretty;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px); // Paragraph Medium size\n }\n @include breakpoint($wide) {\n width: 91.46%; // 11 col\n }\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n width: 82.89%; // 10 col\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(17px, 26px); // Paragraph Large size\n width: 82.89%; // 10 col\n }\n @include breakpoint($xlarge) {\n width: 74.17%; // 9 col\n }\n }\n\n &.degree_programme_group {\n @include breakpoint($wide) {\n width: 91.46%; // 11 col\n }\n }\n\n &.main_front_page,\n &.landing_page,\n &.faculty,\n &.generic_site_group,\n &.degree_programme_group,\n &.research_group {\n @include breakpoint($wide) {\n width: 100%;\n }\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n font-weight: 700;\n margin: 0;\n width: 100%;\n\n &.negative {\n color: var(--grayscale-white);\n }\n }\n\n // link within paragraph (Open sans semibold)\n a {\n @include font-size(14px, 20px); // Paragraph Small size\n color: var(--link-blue);\n font-family: var(--main-font-family);\n font-weight: 600;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n letter-spacing: -0.1px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n }\n\n &:hover {\n color: var(--brand-main);\n }\n }\n\n a[target=\"_blank\"]:after {\n display: inline-block;\n vertical-align: middle;\n width: 12px;\n height: 12px;\n margin-left: 3px;\n background-size: contain;\n content: \"\";\n background-image: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n transform: rotate(315deg);\n\n &:hover {\n background-image: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n }\n }\n\n a[target=\"_blank\"]:hover {\n &:after {\n background-image: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n }\n }\n\n p {\n margin-top: 0;\n padding-top: 0;\n\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n\n // When hy-paragraph-text is the first child it will not add spacing to top. Will fix heading + text spacing issue.\n &:first-child {\n margin-top: 0 !important;\n }\n}\n\nhy-paragraph-text + hy-link-list {\n display: block;\n margin-top: 32px;\n}\n","//overrides for Landing pages and Front page\n\n// Common styles for text plus mobile & tablet & small desktop in Landing Pages\n.hy-paragraph-text.landing_page,\n.hy-paragraph-text.main_front_page {\n h3 {\n // text H3 small\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n\n padding-bottom: 12px;\n padding-top: 32px;\n\n @include breakpoint($narrow) {\n // text H3 Medium size\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n\n padding-bottom: 16px;\n padding-top: 40px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 48px;\n }\n }\n\n h4 {\n // text H4 small\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H4 Medium size\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n\n h5 {\n // text H5 small\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H5 Medium size\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n\n h6 {\n // text H6 small\n @include font-size(14px, 16px);\n letter-spacing: -0.44px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H6 Medium size\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-paragraph-text\",\n styleUrls: {\n default: \"paragraph-text.scss\",\n content: \"paragraph-text-content.scss\",\n landing: \"paragraph-text-landing.scss\",\n },\n shadow: false,\n})\nexport class ParagraphText {\n @Prop() variant: string;\n @Prop() placement: string = \"internal\";\n @Prop() headerstyle: string = \"default\";\n @Element() el: HTMLElement;\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n }\n\n render() {\n const classAttributes = [\n \"hy-paragraph-text\",\n `hy-paragraph-text__${this.headerstyle}`,\n `${this.variant}`,\n `${this.placement}`,\n `${this.headerstyle}`,\n ].join(\" \");\n\n return (\n <Host>\n <div class={classAttributes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/cjs/hy-general-list_2.cjs.entry.js CHANGED
@@ -55,7 +55,7 @@ const HyGeneralList = class {
55
55
  };
56
56
  HyGeneralList.style = hyGeneralListCss;
57
57
 
58
- const hyGeneralListItemCss = ":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;height:100%}.hy-general-list-item{font-family:var(--main-font-family);margin-bottom:1rem;height:100%}.hy-general-list-item--style-grid .hy-general-list-item__link{height:100%}@media (min-width: 30rem){.hy-general-list-item--style-grid .hy-general-list-item__link{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.hy-general-list-item--style-grid .hy-general-list-item__image-container{border:1px solid var(--grayscale-light);max-width:100%}@media (max-width: 479px){.hy-general-list-item--style-grid .hy-general-list-item__image-container{display:-webkit-box;display:-ms-flexbox;display:flex}}@media (min-width: 60rem){.hy-general-list-item--style-grid .hy-general-list-item__text-container{padding:12px 12px 32px 12px}}@media (min-width: 75.0625rem){.hy-general-list-item--style-grid .hy-general-list-item__text-container{padding:12px 12px 32px 12px}}.hy-genenral-list-item__meta{font-size:0.75rem;line-height:14px;font-weight:600;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:-0.1px;text-transform:uppercase;margin:9px 0}.hy-genenral-list-item__meta__date{font-weight:400;margin-left:4px}.hy-general-list-item__link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;text-decoration:none}@media (min-width: 30rem){.hy-general-list-item__link{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-general-list-item__link:hover{cursor:pointer}.hy-general-list-item__link:hover .hy-general-list-item__type span,.hy-general-list-item__link:focus .hy-general-list-item__type span{background-color:var(--brand-main)}.hy-general-list-item__link:hover .hy-general-list-item__title,.hy-general-list-item__link:focus .hy-general-list-item__title{color:var(--brand-main);text-decoration:underline}.hy-general-list-item__image-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;margin:0;position:relative;width:100%}@media (max-width: 479px){.hy-general-list-item__image-container{display:none}}@media (min-width: 30rem){.hy-general-list-item__image-container{max-width:35.7%}}@media (min-width: 60rem){.hy-general-list-item__image-container{max-width:23.13%}}@media (min-width: 75.0625rem){.hy-general-list-item__image-container{max-width:23.03%}}.hy-general-list-item__image-container:before{content:\"\";display:block;padding-top:var(--aspectRatio)}.hy-general-list-item__image-container img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-general-list-item__image{background-color:#ececec;width:100%;height:100%}.hy-general-list-item__type{background-color:var(--grayscale-background-box);padding-top:16px;z-index:10}@media (min-width: 30rem){.hy-general-list-item__type{background-color:transparent;left:-8px;padding-top:0;position:absolute;top:16px}}.hy-general-list-item__type__major{font-size:0.75rem;line-height:14px;font-weight:700;background-color:var(--grayscale-black);color:var(--grayscale-white);letter-spacing:-0.1px;padding:5px 8px;text-transform:uppercase;-ms-flex-item-align:baseline;align-self:baseline;margin-left:-8px}@media (min-width: 30rem){.hy-general-list-item__type__major{margin-left:0}}.hy-general-list-item__type__sub{font-size:0.75rem;line-height:14px;background-color:var(--grayscale-black);color:var(--grayscale-white);font-family:var(--main-font-family);letter-spacing:-0.1px;padding:5px 8px;margin-left:-8px}.hy-general-list-item__text-container{background-color:var(--grayscale-background-box);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:16px 12px}@media (min-width: 60rem){.hy-general-list-item__text-container{padding:14px 32px 24px 24px}}@media (min-width: 75.0625rem){.hy-general-list-item__text-container{padding:20px 104px 32px 32px}}.hy-general-list-item__title{font-size:1.125rem;line-height:22px;font-weight:700;color:var(--brand-main-nearly-black);letter-spacing:-0.45px;margin-bottom:8px;margin-top:0}@media (min-width: 1601px){.hy-general-list-item__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-general-list-item__title__large{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}.hy-general-list-item__description{font-size:0.9375rem;line-height:20px;color:var(--grayscale-dark);display:none;letter-spacing:-0.09px;margin:0}@media (min-width: 30rem){.hy-general-list-item__description{font-size:0.875rem;line-height:18px;display:block;letter-spacing:-0.08px}}@media (min-width: 1601px){.hy-general-list-item__description{font-size:0.875rem;line-height:20px}}@media (min-width: 75.0625rem){.hy-general-list-item__description__large{font-size:0.875rem;line-height:20px}}";
58
+ const hyGeneralListItemCss = ":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;height:100%}.hy-general-list-item{font-family:var(--main-font-family);margin-bottom:1rem;height:100%}.hy-general-list-item--style-grid .hy-general-list-item__link{height:100%}@media (min-width: 30rem){.hy-general-list-item--style-grid .hy-general-list-item__link{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.hy-general-list-item--style-grid .hy-general-list-item__image-container{border:1px solid var(--grayscale-light);max-width:100%}@media (max-width: 479px){.hy-general-list-item--style-grid .hy-general-list-item__image-container{display:-webkit-box;display:-ms-flexbox;display:flex}}@media (min-width: 60rem){.hy-general-list-item--style-grid .hy-general-list-item__text-container{padding:12px 12px 32px 12px}}@media (min-width: 75.0625rem){.hy-general-list-item--style-grid .hy-general-list-item__text-container{padding:12px 12px 32px 12px}}.hy-genenral-list-item__meta{font-size:0.75rem;line-height:14px;font-weight:600;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:-0.1px;text-transform:uppercase;margin:9px 0}.hy-genenral-list-item__meta__date{font-weight:400;margin-left:4px}.hy-general-list-item__link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;text-decoration:none}@media (min-width: 30rem){.hy-general-list-item__link{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-general-list-item__link:hover{cursor:pointer}.hy-general-list-item__link:hover .hy-general-list-item__type span,.hy-general-list-item__link:focus .hy-general-list-item__type span{background-color:var(--brand-main)}.hy-general-list-item__link:hover .hy-general-list-item__title,.hy-general-list-item__link:focus .hy-general-list-item__title{color:var(--brand-main);text-decoration:underline}.hy-general-list-item__image-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;margin:0;position:relative;width:100%}@media (max-width: 479px){.hy-general-list-item__image-container{display:none}}@media (min-width: 30rem){.hy-general-list-item__image-container{max-width:35.7%}}@media (min-width: 60rem){.hy-general-list-item__image-container{max-width:23.13%}}@media (min-width: 75.0625rem){.hy-general-list-item__image-container{max-width:23.03%}}.hy-general-list-item__image-container:before{content:\"\";display:block;padding-top:var(--aspectRatio)}.hy-general-list-item__image-container img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-general-list-item__image{background-color:#ececec;width:100%;height:100%}.hy-general-list-item__type{background-color:var(--grayscale-background-box);padding-top:16px;z-index:10}@media (min-width: 30rem){.hy-general-list-item__type{background-color:transparent;left:-8px;padding-top:0;position:absolute;top:16px}}.hy-general-list-item__type__major{font-size:0.75rem;line-height:14px;font-weight:700;background-color:var(--grayscale-black);color:var(--grayscale-white);letter-spacing:-0.1px;padding:5px 8px;text-transform:uppercase;-ms-flex-item-align:baseline;align-self:baseline;margin-left:-8px}@media (min-width: 30rem){.hy-general-list-item__type__major{margin-left:0}}.hy-general-list-item__type__sub{font-size:0.75rem;line-height:14px;background-color:var(--grayscale-black);color:var(--grayscale-white);font-family:var(--main-font-family);letter-spacing:-0.1px;padding:5px 8px;margin-left:-8px}.hy-general-list-item__text-container{background-color:var(--grayscale-background-box);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:16px 12px}@media (min-width: 60rem){.hy-general-list-item__text-container{padding:14px 32px 24px 24px}}@media (min-width: 75.0625rem){.hy-general-list-item__text-container{padding:20px 104px 32px 32px}}.hy-general-list-item__title{font-size:1.125rem;line-height:22px;font-weight:700;color:var(--brand-main-nearly-black);letter-spacing:-0.45px;margin-bottom:8px;margin-top:0;text-wrap:balance}@media (min-width: 1601px){.hy-general-list-item__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-general-list-item__title__large{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}.hy-general-list-item__description{font-size:0.9375rem;line-height:20px;color:var(--grayscale-dark);display:none;letter-spacing:-0.09px;margin:0}@media (min-width: 30rem){.hy-general-list-item__description{font-size:0.875rem;line-height:18px;display:block;letter-spacing:-0.08px}}@media (min-width: 1601px){.hy-general-list-item__description{font-size:0.875rem;line-height:20px}}@media (min-width: 75.0625rem){.hy-general-list-item__description__large{font-size:0.875rem;line-height:20px}}";
59
59
 
60
60
  const HyGeneralListItem = class {
61
61
  constructor(hostRef) {
package/dist/cjs/hy-general-list_2.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"hy-general-list.hy-general-list-item.entry.cjs.js","mappings":"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","names":["GeneralListTypes","jsonParserWorker","h","Host"],"sources":["./src/components/hy-general-list/hy-general-list.scss?tag=hy-general-list","./src/components/hy-general-list/hy-general-list.tsx","./src/components/hy-general-list-item/hy-general-list-item.scss?tag=hy-general-list-item","./src/components/hy-general-list-item/hy-general-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-general-list {\n list-style: none;\n margin: 0;\n padding: 0;\n\n &--style-grid {\n display: flex;\n display: grid;\n gap: 32px 0;\n\n @media screen and (min-width: 768px) {\n grid-template-columns: repeat(2, 1fr);\n gap: 32px 24px;\n }\n\n @media screen and (min-width: 1024px) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @media screen and (min-width: 1920px) {\n gap: 32px;\n }\n\n li {\n background-color: var(--grayscale-background-box);\n width: 100%;\n height: auto;\n }\n }\n}\n","export interface ListItemValue {\n description: string;\n id: string;\n imageAlt: string;\n imageUrl: string;\n label: string;\n subLabel: string;\n date: string;\n tag: string;\n title: string;\n type: string;\n url: string;\n target: boolean;\n}\n\nimport {Component, Element, h, Prop, State, Host, Watch} from \"@stencil/core\";\nimport {GeneralListTypes} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n tag: \"hy-general-list\",\n styleUrl: \"hy-general-list.scss\",\n shadow: false,\n})\nexport class HyGeneralList {\n @Prop() type: GeneralListTypes = GeneralListTypes.list;\n @Prop() blank: boolean = true;\n @Prop() dataItems: ListItemValue[] | string;\n @Prop() truncateDescription: boolean = true;\n @Prop() truncateLimit: number = 140;\n private _dataItems: ListItemValue[];\n @Element() el: HTMLElement;\n @State() hasSidebar: boolean = false;\n\n async componentWillLoad() {\n this._dataItems = await jsonParserWorker(this.dataItems);\n\n const hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.hasSidebar = true;\n }\n }\n }\n\n @Watch(\"dataItems\")\n async watchPropHandler(newValue: string | number, oldValue: string | number) {\n if (newValue !== oldValue) {\n this._dataItems = await jsonParserWorker(this.dataItems);\n }\n }\n\n render() {\n const classAttributes = [\n \"hy-general-list\",\n this.hasSidebar ? \"hy-general-list--with-sidebar\" : \"\",\n `hy-general-list--style-${this.type}`,\n ].join(\" \");\n\n let listData = this._dataItems;\n if (typeof this._dataItems === \"object\") {\n listData = Object.values(this._dataItems);\n }\n\n function truncate(str, n) {\n return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n }\n\n return (\n <Host>\n <ul class={classAttributes}>\n {listData &&\n listData.map((item) => (\n <li>\n <hy-general-list-item\n has-sidebar={this.hasSidebar}\n target={this.blank}\n data-location={item.url}\n description={\n this.truncateDescription ? truncate(item.description, this.truncateLimit) : item.description\n }\n id={item.id}\n imageAlt={item.imageAlt}\n imageUrl={item.imageUrl}\n item-title={item.title}\n label={item.label}\n sub-label={item.subLabel}\n tag={item.tag}\n date={item.date}\n type={item.type}\n url={item.url}\n list-style={this.type}\n ></hy-general-list-item>\n </li>\n ))}\n </ul>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n",":host {\n display: block;\n height: 100%;\n}\n\n.hy-general-list-item {\n font-family: var(--main-font-family);\n margin-bottom: 1rem;\n height: 100%;\n\n &--style-grid {\n .hy-general-list-item__link {\n height: 100%;\n\n @include breakpoint($narrow) {\n flex-direction: column;\n }\n }\n\n .hy-general-list-item__image-container {\n border: 1px solid var(--grayscale-light);\n max-width: 100%;\n\n @include breakpoint(max-width 479px) {\n display: flex;\n }\n }\n\n .hy-general-list-item__text-container {\n @include breakpoint($wide) {\n padding: 12px 12px 32px 12px;\n }\n @include breakpoint($extrawide) {\n padding: 12px 12px 32px 12px;\n }\n }\n }\n}\n\n.hy-genenral-list-item__meta {\n @include font-size(12px, 14px);\n @include font-weight($semibold);\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n letter-spacing: -0.1px;\n text-transform: uppercase;\n margin: 9px 0;\n\n &__date {\n @include font-weight($regular);\n margin-left: 4px;\n }\n}\n\n.hy-general-list-item__link {\n display: flex;\n flex-direction: column;\n position: relative;\n text-decoration: none;\n\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus {\n .hy-general-list-item__type span {\n background-color: var(--brand-main);\n }\n\n .hy-general-list-item__title {\n color: var(--brand-main);\n text-decoration: underline;\n }\n }\n}\n\n.hy-general-list-item__image-container {\n display: flex;\n justify-content: stretch;\n margin: 0;\n position: relative;\n width: 100%;\n\n @include breakpoint(max-width 479px) {\n display: none;\n }\n\n @include breakpoint($narrow) {\n max-width: 35.7%;\n }\n\n @include breakpoint($wide) {\n max-width: 23.13%;\n }\n\n @include breakpoint($extrawide) {\n max-width: 23.03%;\n }\n\n &:before {\n content: \"\";\n display: block;\n padding-top: var(--aspectRatio);\n }\n\n img {\n bottom: 0;\n height: 100%;\n left: 0;\n object-fit: cover;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n }\n}\n\n.hy-general-list-item__image {\n background-color: #ececec;\n width: 100%;\n height: 100%;\n}\n\n.hy-general-list-item__type {\n background-color: var(--grayscale-background-box);\n padding-top: 16px;\n z-index: 10;\n\n @include breakpoint($narrow) {\n background-color: transparent;\n left: -8px;\n padding-top: 0;\n position: absolute;\n top: 16px;\n }\n\n &__major {\n @include font-size(12px, 14px);\n @include font-weight($bold);\n background-color: var(--grayscale-black);\n color: var(--grayscale-white);\n letter-spacing: -0.1px;\n padding: 5px 8px;\n text-transform: uppercase;\n align-self: baseline;\n margin-left: -8px;\n\n @include breakpoint($narrow) {\n margin-left: 0;\n }\n }\n\n &__sub {\n @include font-size(12px, 14px);\n background-color: var(--grayscale-black);\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n letter-spacing: -0.1px;\n padding: 5px 8px;\n margin-left: -8px;\n }\n}\n\n.hy-general-list-item__text-container {\n background-color: var(--grayscale-background-box);\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n padding: 16px 12px;\n\n @include breakpoint($wide) {\n padding: 14px 32px 24px 24px;\n }\n\n @include breakpoint($extrawide) {\n padding: 20px 104px 32px 32px;\n }\n}\n\n.hy-general-list-item__title {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n letter-spacing: -0.45px;\n margin-bottom: 8px;\n margin-top: 0;\n\n @include breakpoint($xlarge) {\n @include font-size(20px, 24px);\n letter-spacing: -0.5px;\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(20px, 24px);\n letter-spacing: -0.5px;\n }\n }\n}\n\n.hy-general-list-item__description {\n @include font-size(15px, 20px);\n color: var(--grayscale-dark);\n display: none;\n letter-spacing: -0.09px;\n margin: 0;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n display: block;\n letter-spacing: -0.08px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 20px);\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(14px, 20px);\n }\n }\n}\n","import {Component, Element, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-general-list-item\",\n styleUrl: \"hy-general-list-item.scss\",\n shadow: false,\n})\nexport class HyGeneralListItem {\n @Prop() hasSidebar: boolean = true;\n @Prop() description?: string;\n @Prop() imageAlt: string = \"\";\n @Prop() imageUrl: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() itemTitle?: string;\n @Prop() label?: string;\n @Prop() subLabel: string = \"\";\n @Prop() date: string = \"\";\n @Prop() tag: string = \"\";\n @Prop() type?: string;\n @Prop() url?: string;\n @Prop() listStyle?: string;\n @Prop() target: boolean = true;\n\n @Element() el: HTMLElement;\n\n render() {\n const classAttributes = [\"hy-general-list-item\", `hy-general-list-item--style-${this.listStyle}`].join(\" \");\n const contentClassAttributes = [\"hy-general-list-item__text-container\"].join(\" \");\n const imageClassAttributes = [\"hy-general-list-item__image-container\"].join(\" \");\n\n const sidebarClass = this.hasSidebar ? \"common\" : \"large\";\n const titleClassAttributes = [\"hy-general-list-item__title\", `hy-general-list-item__title__${sidebarClass}`].join(\n \" \"\n );\n const descriptionClassAttributes = [\n \"hy-general-list-item__description\",\n `hy-general-list-item__description__${sidebarClass}`,\n ].join(\" \");\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 return (\n <article class={classAttributes}>\n <a class=\"hy-general-list-item__link\" href={this.url} target={this.target ? \"_blank\" : \"_self\"}>\n {this.type && (\n <div class=\"hy-general-list-item__type\">\n <span class=\"hy-general-list-item__type__major\">{this.label}</span>\n <span class=\"hy-general-list-item__type__sub\">{this.subLabel}</span>\n </div>\n )}\n {this.imageUrl && (\n <figure class={imageClassAttributes} style={aspectRatio}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAlt}\n class=\"hy-general-list-item__image\"\n src={this.imageUrl}\n />\n </figure>\n )}\n <div class={contentClassAttributes}>\n {(this.tag || this.date) && (\n <span class=\"hy-genenral-list-item__meta\">\n {this.tag}\n <span class=\"hy-genenral-list-item__meta__date\">\n {this.tag && \"|\"} {this.date}\n </span>\n </span>\n )}\n <h3 class={titleClassAttributes}>{this.itemTitle}</h3>\n <p class={descriptionClassAttributes}>{this.description}</p>\n </div>\n </a>\n </article>\n );\n }\n}\n"],"version":3}
1
+ {"file":"hy-general-list.hy-general-list-item.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,uuDAAuuD;;MCwBnvD,aAAa;;;gBACSA,sBAAgB,CAAC,IAAI;iBAC7B,IAAI;;+BAEU,IAAI;yBACX,GAAG;sBAGJ,KAAK;;EAEpC,MAAM,iBAAiB;IACrB,IAAI,CAAC,UAAU,GAAG,MAAMC,6BAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC9C,IAAI,SAAS,EAAE;MACb,IAAI,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;QAChD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;OACxB;KACF;GACF;EAGD,MAAM,gBAAgB,CAAC,QAAyB,EAAE,QAAyB;IACzE,IAAI,QAAQ,KAAK,QAAQ,EAAE;MACzB,IAAI,CAAC,UAAU,GAAG,MAAMA,6BAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAC1D;GACF;EAED,MAAM;IACJ,MAAM,eAAe,GAAG;MACtB,iBAAiB;MACjB,IAAI,CAAC,UAAU,GAAG,+BAA+B,GAAG,EAAE;MACtD,0BAA0B,IAAI,CAAC,IAAI,EAAE;KACtC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC;IAC/B,IAAI,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;MACvC,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C;IAED,SAAS,QAAQ,CAAC,GAAG,EAAE,CAAC;MACtB,OAAO,GAAG,CAAC,MAAM,GAAG,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,GAAG,CAAC;KAC5D;IAED,QACEC,QAACC,UAAI,QACHD,gBAAI,KAAK,EAAE,eAAe,IACvB,QAAQ;MACP,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,MAChBA,oBACEA,iDACe,IAAI,CAAC,UAAU,EAC5B,MAAM,EAAE,IAAI,CAAC,KAAK,mBACH,IAAI,CAAC,GAAG,EACvB,WAAW,EACT,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,WAAW,EAE9F,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,eACN,IAAI,CAAC,QAAQ,EACxB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,IAAI,CAAC,GAAG,gBACD,IAAI,CAAC,IAAI,GACC,CACrB,CACN,CAAC,CACD,EACLA,oBAAQ,EAAE,EAAC,oBAAoB,GAAG,CAC7B,EACP;GACH;;;;;;;;ACnGH,MAAM,oBAAoB,GAAG,qoMAAqoM;;MCOrpM,iBAAiB;;;sBACE,IAAI;;oBAEP,EAAE;oBACF,IAAI;uBACA,KAAK;;;oBAGT,EAAE;gBACN,EAAE;eACH,EAAE;;;;kBAIE,IAAI;;EAI9B,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,sBAAsB,EAAE,+BAA+B,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5G,MAAM,sBAAsB,GAAG,CAAC,sCAAsC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClF,MAAM,oBAAoB,GAAG,CAAC,uCAAuC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEjF,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1D,MAAM,oBAAoB,GAAG,CAAC,6BAA6B,EAAE,gCAAgC,YAAY,EAAE,CAAC,CAAC,IAAI,CAC/G,GAAG,CACJ,CAAC;IACF,MAAM,0BAA0B,GAAG;MACjC,mCAAmC;MACnC,sCAAsC,YAAY,EAAE;KACrD,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,MAAM,gBAAgB,GAAG,EAAE,CAAC;IAC5B,MAAM,iBAAiB,GAAG,EAAE,CAAC;IAC7B,MAAM,MAAM,GAAG,CAAC,iBAAiB,GAAG,gBAAgB,IAAI,GAAG,CAAC;IAC5D,MAAM,WAAW,GAAG;MAClB,eAAe,EAAE,GAAG,MAAM,GAAoB;KAC/C,CAAC;IAEF,QACEA,qBAAS,KAAK,EAAE,eAAe,IAC7BA,eAAG,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,OAAO,IAC3F,IAAI,CAAC,IAAI,KACRA,iBAAK,KAAK,EAAC,4BAA4B,IACrCA,kBAAM,KAAK,EAAC,mCAAmC,IAAE,IAAI,CAAC,KAAK,CAAQ,EACnEA,kBAAM,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,QAAQ,CAAQ,CAChE,CACP,EACA,IAAI,CAAC,QAAQ,KACZA,oBAAQ,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,WAAW,IACrDA,iBACE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAG,OAAO,GAAG,MAAM,EAC5C,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,6BAA6B,EACnC,GAAG,EAAE,IAAI,CAAC,QAAQ,GAClB,CACK,CACV,EACDA,iBAAK,KAAK,EAAE,sBAAsB,IAC/B,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,MACrBA,kBAAM,KAAK,EAAC,6BAA6B,IACtC,IAAI,CAAC,GAAG,EACTA,kBAAM,KAAK,EAAC,mCAAmC,IAC5C,IAAI,CAAC,GAAG,IAAI,GAAG,OAAG,IAAI,CAAC,IAAI,CACvB,CACF,CACR,EACDA,gBAAI,KAAK,EAAE,oBAAoB,IAAG,IAAI,CAAC,SAAS,CAAM,EACtDA,eAAG,KAAK,EAAE,0BAA0B,IAAG,IAAI,CAAC,WAAW,CAAK,CACxD,CACJ,CACI,EACV;GACH;;;;;;;;","names":["GeneralListTypes","jsonParserWorker","h","Host"],"sources":["./src/components/hy-general-list/hy-general-list.scss?tag=hy-general-list","./src/components/hy-general-list/hy-general-list.tsx","./src/components/hy-general-list-item/hy-general-list-item.scss?tag=hy-general-list-item","./src/components/hy-general-list-item/hy-general-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-general-list {\n list-style: none;\n margin: 0;\n padding: 0;\n\n &--style-grid {\n display: flex;\n display: grid;\n gap: 32px 0;\n\n @media screen and (min-width: 768px) {\n grid-template-columns: repeat(2, 1fr);\n gap: 32px 24px;\n }\n\n @media screen and (min-width: 1024px) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @media screen and (min-width: 1920px) {\n gap: 32px;\n }\n\n li {\n background-color: var(--grayscale-background-box);\n width: 100%;\n height: auto;\n }\n }\n}\n","export interface ListItemValue {\n description: string;\n id: string;\n imageAlt: string;\n imageUrl: string;\n label: string;\n subLabel: string;\n date: string;\n tag: string;\n title: string;\n type: string;\n url: string;\n target: boolean;\n}\n\nimport {Component, Element, h, Prop, State, Host, Watch} from \"@stencil/core\";\nimport {GeneralListTypes} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n tag: \"hy-general-list\",\n styleUrl: \"hy-general-list.scss\",\n shadow: false,\n})\nexport class HyGeneralList {\n @Prop() type: GeneralListTypes = GeneralListTypes.list;\n @Prop() blank: boolean = true;\n @Prop() dataItems: ListItemValue[] | string;\n @Prop() truncateDescription: boolean = true;\n @Prop() truncateLimit: number = 140;\n private _dataItems: ListItemValue[];\n @Element() el: HTMLElement;\n @State() hasSidebar: boolean = false;\n\n async componentWillLoad() {\n this._dataItems = await jsonParserWorker(this.dataItems);\n\n const hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.hasSidebar = true;\n }\n }\n }\n\n @Watch(\"dataItems\")\n async watchPropHandler(newValue: string | number, oldValue: string | number) {\n if (newValue !== oldValue) {\n this._dataItems = await jsonParserWorker(this.dataItems);\n }\n }\n\n render() {\n const classAttributes = [\n \"hy-general-list\",\n this.hasSidebar ? \"hy-general-list--with-sidebar\" : \"\",\n `hy-general-list--style-${this.type}`,\n ].join(\" \");\n\n let listData = this._dataItems;\n if (typeof this._dataItems === \"object\") {\n listData = Object.values(this._dataItems);\n }\n\n function truncate(str, n) {\n return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n }\n\n return (\n <Host>\n <ul class={classAttributes}>\n {listData &&\n listData.map((item) => (\n <li>\n <hy-general-list-item\n has-sidebar={this.hasSidebar}\n target={this.blank}\n data-location={item.url}\n description={\n this.truncateDescription ? truncate(item.description, this.truncateLimit) : item.description\n }\n id={item.id}\n imageAlt={item.imageAlt}\n imageUrl={item.imageUrl}\n item-title={item.title}\n label={item.label}\n sub-label={item.subLabel}\n tag={item.tag}\n date={item.date}\n type={item.type}\n url={item.url}\n list-style={this.type}\n ></hy-general-list-item>\n </li>\n ))}\n </ul>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n",":host {\n display: block;\n height: 100%;\n}\n\n.hy-general-list-item {\n font-family: var(--main-font-family);\n margin-bottom: 1rem;\n height: 100%;\n\n &--style-grid {\n .hy-general-list-item__link {\n height: 100%;\n\n @include breakpoint($narrow) {\n flex-direction: column;\n }\n }\n\n .hy-general-list-item__image-container {\n border: 1px solid var(--grayscale-light);\n max-width: 100%;\n\n @include breakpoint(max-width 479px) {\n display: flex;\n }\n }\n\n .hy-general-list-item__text-container {\n @include breakpoint($wide) {\n padding: 12px 12px 32px 12px;\n }\n @include breakpoint($extrawide) {\n padding: 12px 12px 32px 12px;\n }\n }\n }\n}\n\n.hy-genenral-list-item__meta {\n @include font-size(12px, 14px);\n @include font-weight($semibold);\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n letter-spacing: -0.1px;\n text-transform: uppercase;\n margin: 9px 0;\n\n &__date {\n @include font-weight($regular);\n margin-left: 4px;\n }\n}\n\n.hy-general-list-item__link {\n display: flex;\n flex-direction: column;\n position: relative;\n text-decoration: none;\n\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus {\n .hy-general-list-item__type span {\n background-color: var(--brand-main);\n }\n\n .hy-general-list-item__title {\n color: var(--brand-main);\n text-decoration: underline;\n }\n }\n}\n\n.hy-general-list-item__image-container {\n display: flex;\n justify-content: stretch;\n margin: 0;\n position: relative;\n width: 100%;\n\n @include breakpoint(max-width 479px) {\n display: none;\n }\n\n @include breakpoint($narrow) {\n max-width: 35.7%;\n }\n\n @include breakpoint($wide) {\n max-width: 23.13%;\n }\n\n @include breakpoint($extrawide) {\n max-width: 23.03%;\n }\n\n &:before {\n content: \"\";\n display: block;\n padding-top: var(--aspectRatio);\n }\n\n img {\n bottom: 0;\n height: 100%;\n left: 0;\n object-fit: cover;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n }\n}\n\n.hy-general-list-item__image {\n background-color: #ececec;\n width: 100%;\n height: 100%;\n}\n\n.hy-general-list-item__type {\n background-color: var(--grayscale-background-box);\n padding-top: 16px;\n z-index: 10;\n\n @include breakpoint($narrow) {\n background-color: transparent;\n left: -8px;\n padding-top: 0;\n position: absolute;\n top: 16px;\n }\n\n &__major {\n @include font-size(12px, 14px);\n @include font-weight($bold);\n background-color: var(--grayscale-black);\n color: var(--grayscale-white);\n letter-spacing: -0.1px;\n padding: 5px 8px;\n text-transform: uppercase;\n align-self: baseline;\n margin-left: -8px;\n\n @include breakpoint($narrow) {\n margin-left: 0;\n }\n }\n\n &__sub {\n @include font-size(12px, 14px);\n background-color: var(--grayscale-black);\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n letter-spacing: -0.1px;\n padding: 5px 8px;\n margin-left: -8px;\n }\n}\n\n.hy-general-list-item__text-container {\n background-color: var(--grayscale-background-box);\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n padding: 16px 12px;\n\n @include breakpoint($wide) {\n padding: 14px 32px 24px 24px;\n }\n\n @include breakpoint($extrawide) {\n padding: 20px 104px 32px 32px;\n }\n}\n\n.hy-general-list-item__title {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n letter-spacing: -0.45px;\n margin-bottom: 8px;\n margin-top: 0;\n text-wrap: balance;\n\n @include breakpoint($xlarge) {\n @include font-size(20px, 24px);\n letter-spacing: -0.5px;\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(20px, 24px);\n letter-spacing: -0.5px;\n }\n }\n}\n\n.hy-general-list-item__description {\n @include font-size(15px, 20px);\n color: var(--grayscale-dark);\n display: none;\n letter-spacing: -0.09px;\n margin: 0;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n display: block;\n letter-spacing: -0.08px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 20px);\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(14px, 20px);\n }\n }\n}\n","import {Component, Element, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-general-list-item\",\n styleUrl: \"hy-general-list-item.scss\",\n shadow: false,\n})\nexport class HyGeneralListItem {\n @Prop() hasSidebar: boolean = true;\n @Prop() description?: string;\n @Prop() imageAlt: string = \"\";\n @Prop() imageUrl: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() itemTitle?: string;\n @Prop() label?: string;\n @Prop() subLabel: string = \"\";\n @Prop() date: string = \"\";\n @Prop() tag: string = \"\";\n @Prop() type?: string;\n @Prop() url?: string;\n @Prop() listStyle?: string;\n @Prop() target: boolean = true;\n\n @Element() el: HTMLElement;\n\n render() {\n const classAttributes = [\"hy-general-list-item\", `hy-general-list-item--style-${this.listStyle}`].join(\" \");\n const contentClassAttributes = [\"hy-general-list-item__text-container\"].join(\" \");\n const imageClassAttributes = [\"hy-general-list-item__image-container\"].join(\" \");\n\n const sidebarClass = this.hasSidebar ? \"common\" : \"large\";\n const titleClassAttributes = [\"hy-general-list-item__title\", `hy-general-list-item__title__${sidebarClass}`].join(\n \" \"\n );\n const descriptionClassAttributes = [\n \"hy-general-list-item__description\",\n `hy-general-list-item__description__${sidebarClass}`,\n ].join(\" \");\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 return (\n <article class={classAttributes}>\n <a class=\"hy-general-list-item__link\" href={this.url} target={this.target ? \"_blank\" : \"_self\"}>\n {this.type && (\n <div class=\"hy-general-list-item__type\">\n <span class=\"hy-general-list-item__type__major\">{this.label}</span>\n <span class=\"hy-general-list-item__type__sub\">{this.subLabel}</span>\n </div>\n )}\n {this.imageUrl && (\n <figure class={imageClassAttributes} style={aspectRatio}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAlt}\n class=\"hy-general-list-item__image\"\n src={this.imageUrl}\n />\n </figure>\n )}\n <div class={contentClassAttributes}>\n {(this.tag || this.date) && (\n <span class=\"hy-genenral-list-item__meta\">\n {this.tag}\n <span class=\"hy-genenral-list-item__meta__date\">\n {this.tag && \"|\"} {this.date}\n </span>\n </span>\n )}\n <h3 class={titleClassAttributes}>{this.itemTitle}</h3>\n <p class={descriptionClassAttributes}>{this.description}</p>\n </div>\n </a>\n </article>\n );\n }\n}\n"],"version":3}