@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/dist/esm/hy-hero.entry.js CHANGED
@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-f8
2
2
  import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
3
3
  import { H as HeroTypeVariant, a as HeroGroupTypeVariant, b as HeroColorVariant, c as HeroSizeVariant, d as CtaLinkButtonVariants } from './utils-7438924c.js';
4
4
 
5
- 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)}";
5
+ 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)}";
6
6
 
7
7
  let timeout = null;
8
8
  let delay = 250;
package/dist/esm/hy-hero.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"hy-hero.entry.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,2iVAA2iV;;ACM7jV,IAAI,OAAO,GAAG,IAAI,CAAC;AACnB,IAAI,KAAK,GAAG,GAAG,CAAC;MAiBH,MAAM;;;oBAEmB,eAAe,CAAC,OAAO;yBACb,oBAAoB,CAAC,OAAO;wBACjC,gBAAgB,CAAC,IAAI;uBACvB,eAAe,CAAC,KAAK;;uBAE9B,IAAI;sBACL,IAAI;wBACF,EAAE;uBACF,KAAK;wBACJ,KAAK;;;;;;sBAMP,KAAK;;;EAInC,MAAM,iBAAiB;IACrB,IAAI,CAAC,UAAU,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GAC1D;EAED,6BAA6B,CAAC,eAAe,EAAE,WAAW;IACxD,MAAM,2BAA2B,GAAG,WAAW,CAAC,sBAAsB,CACpE,4BAA4B,CAC7B,CAAC,CAAC,CAAgB,CAAC;IAEpB,IAAI,eAAe,KAAK,OAAO,EAAE;MAC/B,IAAI,2BAA2B,CAAC,YAAY,IAAI,GAAG,EAAE;QACnD,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;OACxC;WAAM;QACL,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;OAC3C;KACF;IAED,IAAI,eAAe,KAAK,OAAO,EAAE;MAC/B,IAAI,2BAA2B,CAAC,YAAY,IAAI,GAAG,EAAE;QACnD,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;OACxC;WAAM;QACL,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;OAC3C;KACF;GACF;EAED,MAAM;IACJ,IAAI,OAAO,GAAG,qBAAqB,CAAC,SAAS,CAAC;IAC9C,IAAI,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC;IAC1C,IAAI,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC;IAElC,IAAI,IAAI,CAAC,QAAQ,KAAK,eAAe,EAAE;MACrC,iBAAiB,GAAG,gBAAgB,CAAC,KAAK,CAAC;MAC3C,aAAa,GAAG,eAAe,CAAC,OAAO,CAAC;KACzC;IAED,IAAI,iBAAiB,KAAK,gBAAgB,CAAC,IAAI,EAAE;MAC/C,OAAO,GAAG,qBAAqB,CAAC,QAAQ,CAAC;KAC1C;IAED,IAAI,iBAAiB,KAAK,gBAAgB,CAAC,KAAK,EAAE;MAChD,OAAO,GAAG,qBAAqB,CAAC,SAAS,CAAC;KAC3C;IAED,IAAI,CAAC,iBAAiB,IAAI,iBAAiB,KAAK,UAAU,EAAE;MAC1D,iBAAiB,GAAG,gBAAgB,CAAC,KAAK,CAAC;KAC5C;IAED,MAAM,aAAa,GAAG;MACpB,SAAS;MACT,YAAY,aAAa,EAAE;MAC3B,YAAY,IAAI,CAAC,aAAa,EAAE;MAChC,YAAY,iBAAiB,EAAE;MAC/B,YAAY,IAAI,CAAC,WAAW,EAAE;KAC/B,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;;IAG1E,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KACrC;IAED,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,MAAM,CAAC,MAAM,GAAG;MACd,MAAM,WAAW,GAAG,QAAQ,CAAC,sBAAsB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAgB,CAAC;MACjF,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;MAClE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE;QAChC,YAAY,CAAC,OAAO,CAAC,CAAC;QACtB,OAAO,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC;OACtG,CAAC,CAAC;KACJ,CAAC;IAEF,IAAI,aAAa,KAAK,YAAY,EAAE;MAClC,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,IACjC,WAAK,KAAK,EAAE,oBAAoB,IAC9B,WAAK,KAAK,EAAE,0BAA0B,EAAE,KAAK,EAAE,WAAW,IACvD,IAAI,CAAC,KAAK;SACR,IAAI,CAAC,UAAU,IACd,mBACG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,MACxB,cACE,MAAM,EAAE,IAAI,CAAC,GAAG,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,GACnC,CACH,CAAC,EACF,WACE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAG,OAAO,GAAG,MAAM,EAC5C,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,KAAK,EAAE,iBAAiB,EACxB,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,KAAK,EAAE,IAAI,CAAC,UAAU,GACtB,CACM,KAEV,WACE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAG,OAAO,GAAG,MAAM,EAC5C,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,KAAK,EAAE,iBAAiB,EACxB,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,KAAK,EAAE,IAAI,CAAC,UAAU,GACtB,CACH,CAAC,CACA,EACN,WAAK,KAAK,EAAE,qBAAqB,GAAQ,EACzC,WAAK,KAAK,EAAE,4BAA4B,IACtC,WAAK,KAAK,EAAE,kBAAkB,IAC5B,WAAK,KAAK,EAAE,0BAA0B,IACpC,UAAI,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,gBAAgB,GAAO,CACvD,EACL,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAE,sBAAsB,IAAG,IAAI,CAAC,WAAW,CAAK,EAC5E,IAAI,CAAC,GAAG,KACP,WAAK,KAAK,EAAE,kBAAkB,IAC5B,qCACgB,IAAI,CAAC,QAAQ,cACjB,IAAI,CAAC,OAAO,EACtB,GAAG,EAAE,IAAI,CAAC,GAAG,iBACA,IAAI,CAAC,UAAU,EAC5B,OAAO,EAAE,OAAO,GAChB,CACE,CACP,CACG,CACF,CACF,CACF,EACN,cAAQ,EAAE,EAAC,YAAY,GAAG,CACrB,EACP;KACH;IAED,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,IACjC,WAAK,KAAK,EAAE,oBAAoB,IAC9B,WAAK,KAAK,EAAE,0BAA0B,EAAE,KAAK,EAAE,WAAW,IACvD,IAAI,CAAC,KAAK;OACR,IAAI,CAAC,UAAU,IACd,mBACG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,MACxB,cACE,MAAM,EAAE,IAAI,CAAC,GAAG,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,GACnC,CACH,CAAC,EACF,WACE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAG,OAAO,GAAG,MAAM,EAC5C,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,KAAK,EAAE,iBAAiB,EACxB,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,KAAK,EAAE,IAAI,CAAC,UAAU,GACtB,CACM,KAEV,WACE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAG,OAAO,GAAG,MAAM,EAC5C,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,KAAK,EAAE,iBAAiB,EACxB,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,KAAK,EAAE,IAAI,CAAC,UAAU,GACtB,CACH,CAAC,CACA,EACN,WAAK,KAAK,EAAE,4BAA4B,IACtC,WAAK,KAAK,EAAE,kBAAkB,IAC5B,WAAK,KAAK,EAAE,0BAA0B,IACpC,UAAI,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,gBAAgB,GAAO,CACvD,EACL,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAE,sBAAsB,IAAG,IAAI,CAAC,WAAW,CAAK,EAC5E,IAAI,CAAC,GAAG,KACP,WAAK,KAAK,EAAE,kBAAkB,IAC5B,qCACgB,IAAI,CAAC,QAAQ,cACjB,IAAI,CAAC,OAAO,EACtB,GAAG,EAAE,IAAI,CAAC,GAAG,iBACA,IAAI,CAAC,UAAU,EAC5B,OAAO,EAAE,OAAO,GAChB,CACE,CACP,CACG,CACF,CACF,CACF,EACN,cAAQ,EAAE,EAAC,YAAY,GAAG,CACrB,EACP;GACH;;;;;;;","names":[],"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.entry.js","mappings":"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","names":[],"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/dist/esm/hy-link-box_2.entry.js CHANGED
@@ -2,7 +2,7 @@ import { r as registerInstance, h, g as getElement, H as Host } from './index-f8
2
2
  import { l as LinkBoxVariants } from './utils-7438924c.js';
3
3
  import { j as jsonParserWorker } from './globalScript-5a4b7abf.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 = class {
8
8
  constructor(hostRef) {
package/dist/esm/hy-link-box_2.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"hy-link-box.hy-link-box-list.entry.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","./src/components/hy-link-box-list/link-box-list.scss?tag=hy-link-box-list","./src/components/hy-link-box-list/link-box-list.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",":host {\n display: block;\n}\n\n.hy-link-box-list {\n padding: 0;\n margin: 0;\n list-style: none;\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","export interface LinkBox {\n heading: string;\n description: string;\n imageSets: string | null;\n imageUrl: string;\n imageAlt: string;\n boxUrl: string;\n isExternal: boolean;\n showLogo: boolean;\n ariaLabel: string;\n}\n\nimport {Component, ComponentInterface, Prop, h, Host, Element} from \"@stencil/core\";\nimport {LinkBoxVariants} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n tag: \"hy-link-box-list\",\n styleUrl: \"link-box-list.scss\",\n shadow: false,\n})\nexport class LinkBoxList implements ComponentInterface {\n @Element() el: HTMLElement;\n @Prop() headerstyle: string = \"common\";\n @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;\n @Prop() readMoreLabel: string;\n\n private _dataItems: LinkBox[];\n @Prop() dataItems: LinkBox[] | string;\n\n async componentWillLoad() {\n this._dataItems = await jsonParserWorker(this.dataItems);\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 classAttributes = [\n \"hy-link-box-list\",\n this.variant,\n `hy-link-box-list__${this.variant}`,\n `hy-link-box-list__${this.headerstyle}`,\n ].join(\" \");\n\n /*\n - Logic:\n - 3 items: big\n - 4 items: small\n - 5 items: big\n - 6 items: big\n - 7 items: small\n - 8 items: small\n - 9 items: big\n * */\n const classItemAttributes = [this.variant, `hy-link-box__${this.variant}`].join(\" \");\n return (\n <Host>\n <ul class={classAttributes}>\n {this._dataItems.map((x) => {\n return (\n <li>\n <hy-link-box\n class={classItemAttributes}\n variant={this.variant}\n source-set={x.imageSets}\n image-url={x.imageUrl}\n image-alt={x.imageAlt}\n text-title={x.heading}\n text-description={x.description}\n show-logo={x.showLogo}\n url={x.boxUrl}\n is-external={x.isExternal}\n sc-label={x.ariaLabel}\n read-more-label={this.readMoreLabel}\n />\n </li>\n );\n })}\n </ul>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"hy-link-box.hy-link-box-list.entry.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","./src/components/hy-link-box-list/link-box-list.scss?tag=hy-link-box-list","./src/components/hy-link-box-list/link-box-list.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",":host {\n display: block;\n}\n\n.hy-link-box-list {\n padding: 0;\n margin: 0;\n list-style: none;\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","export interface LinkBox {\n heading: string;\n description: string;\n imageSets: string | null;\n imageUrl: string;\n imageAlt: string;\n boxUrl: string;\n isExternal: boolean;\n showLogo: boolean;\n ariaLabel: string;\n}\n\nimport {Component, ComponentInterface, Prop, h, Host, Element} from \"@stencil/core\";\nimport {LinkBoxVariants} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n tag: \"hy-link-box-list\",\n styleUrl: \"link-box-list.scss\",\n shadow: false,\n})\nexport class LinkBoxList implements ComponentInterface {\n @Element() el: HTMLElement;\n @Prop() headerstyle: string = \"common\";\n @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;\n @Prop() readMoreLabel: string;\n\n private _dataItems: LinkBox[];\n @Prop() dataItems: LinkBox[] | string;\n\n async componentWillLoad() {\n this._dataItems = await jsonParserWorker(this.dataItems);\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 classAttributes = [\n \"hy-link-box-list\",\n this.variant,\n `hy-link-box-list__${this.variant}`,\n `hy-link-box-list__${this.headerstyle}`,\n ].join(\" \");\n\n /*\n - Logic:\n - 3 items: big\n - 4 items: small\n - 5 items: big\n - 6 items: big\n - 7 items: small\n - 8 items: small\n - 9 items: big\n * */\n const classItemAttributes = [this.variant, `hy-link-box__${this.variant}`].join(\" \");\n return (\n <Host>\n <ul class={classAttributes}>\n {this._dataItems.map((x) => {\n return (\n <li>\n <hy-link-box\n class={classItemAttributes}\n variant={this.variant}\n source-set={x.imageSets}\n image-url={x.imageUrl}\n image-alt={x.imageAlt}\n text-title={x.heading}\n text-description={x.description}\n show-logo={x.showLogo}\n url={x.boxUrl}\n is-external={x.isExternal}\n sc-label={x.ariaLabel}\n read-more-label={this.readMoreLabel}\n />\n </li>\n );\n })}\n </ul>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/esm/hy-paragraph-text.entry.js CHANGED
@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-f8
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/dist/esm/hy-paragraph-text.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"hy-paragraph-text.entry.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":"hy-paragraph-text.entry.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/huds-lib/hy-general-list_2.entry.js CHANGED
@@ -1,2 +1,2 @@
1
- import{r as e,h as i,H as t,g as a}from"./index-f84f2a7d.js";import{G as r}from"./utils-7438924c.js";import{j as l}from"./globalScript-5a4b7abf.js";const n=":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-general-list{list-style:none;margin:0;padding:0}.hy-general-list--style-grid{display:-webkit-box;display:-ms-flexbox;display:flex;display:grid;gap:32px 0}@media screen and (min-width: 768px){.hy-general-list--style-grid{grid-template-columns:repeat(2, 1fr);gap:32px 24px}}@media screen and (min-width: 1024px){.hy-general-list--style-grid{grid-template-columns:repeat(3, 1fr)}}@media screen and (min-width: 1920px){.hy-general-list--style-grid{gap:32px}}.hy-general-list--style-grid li{background-color:var(--grayscale-background-box);width:100%;height:auto}";const s=class{constructor(i){e(this,i);this.type=r.list;this.blank=true;this.dataItems=undefined;this.truncateDescription=true;this.truncateLimit=140;this.hasSidebar=false}async componentWillLoad(){this._dataItems=await l(this.dataItems);const e=this.el.closest(".hy-main");if(e){if(e.classList.contains("with-sidebar")){this.hasSidebar=true}}}async watchPropHandler(e,i){if(e!==i){this._dataItems=await l(this.dataItems)}}render(){const e=["hy-general-list",this.hasSidebar?"hy-general-list--with-sidebar":"",`hy-general-list--style-${this.type}`].join(" ");let a=this._dataItems;if(typeof this._dataItems==="object"){a=Object.values(this._dataItems)}function r(e,i){return e.length>i?e.substr(0,i-1)+"...":e}return i(t,null,i("ul",{class:e},a&&a.map((e=>i("li",null,i("hy-general-list-item",{"has-sidebar":this.hasSidebar,target:this.blank,"data-location":e.url,description:this.truncateDescription?r(e.description,this.truncateLimit):e.description,id:e.id,imageAlt:e.imageAlt,imageUrl:e.imageUrl,"item-title":e.title,label:e.label,"sub-label":e.subLabel,tag:e.tag,date:e.date,type:e.type,url:e.url,"list-style":this.type}))))),i("hy-box",{mb:"1.75, 1.75, 2, 2.5"}))}get el(){return a(this)}static get watchers(){return{dataItems:["watchPropHandler"]}}};s.style=n;const o=':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}}';const d=class{constructor(i){e(this,i);this.hasSidebar=true;this.description=undefined;this.imageAlt="";this.imageUrl=null;this.disableLazy=false;this.itemTitle=undefined;this.label=undefined;this.subLabel="";this.date="";this.tag="";this.type=undefined;this.url=undefined;this.listStyle=undefined;this.target=true}render(){const e=["hy-general-list-item",`hy-general-list-item--style-${this.listStyle}`].join(" ");const t=["hy-general-list-item__text-container"].join(" ");const a=["hy-general-list-item__image-container"].join(" ");const r=this.hasSidebar?"common":"large";const l=["hy-general-list-item__title",`hy-general-list-item__title__${r}`].join(" ");const n=["hy-general-list-item__description",`hy-general-list-item__description__${r}`].join(" ");const s=16;const o=10;const d=o/s*100;const m={"--aspectRatio":`${d}%`};return i("article",{class:e},i("a",{class:"hy-general-list-item__link",href:this.url,target:this.target?"_blank":"_self"},this.type&&i("div",{class:"hy-general-list-item__type"},i("span",{class:"hy-general-list-item__type__major"},this.label),i("span",{class:"hy-general-list-item__type__sub"},this.subLabel)),this.imageUrl&&i("figure",{class:a,style:m},i("img",{loading:this.disableLazy?"eager":"lazy",alt:this.imageAlt,class:"hy-general-list-item__image",src:this.imageUrl})),i("div",{class:t},(this.tag||this.date)&&i("span",{class:"hy-genenral-list-item__meta"},this.tag,i("span",{class:"hy-genenral-list-item__meta__date"},this.tag&&"|"," ",this.date)),i("h3",{class:l},this.itemTitle),i("p",{class:n},this.description))))}get el(){return a(this)}};d.style=o;export{s as hy_general_list,d as hy_general_list_item};
1
+ import{r as e,h as i,H as t,g as a}from"./index-f84f2a7d.js";import{G as r}from"./utils-7438924c.js";import{j as l}from"./globalScript-5a4b7abf.js";const n=":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-general-list{list-style:none;margin:0;padding:0}.hy-general-list--style-grid{display:-webkit-box;display:-ms-flexbox;display:flex;display:grid;gap:32px 0}@media screen and (min-width: 768px){.hy-general-list--style-grid{grid-template-columns:repeat(2, 1fr);gap:32px 24px}}@media screen and (min-width: 1024px){.hy-general-list--style-grid{grid-template-columns:repeat(3, 1fr)}}@media screen and (min-width: 1920px){.hy-general-list--style-grid{gap:32px}}.hy-general-list--style-grid li{background-color:var(--grayscale-background-box);width:100%;height:auto}";const s=class{constructor(i){e(this,i);this.type=r.list;this.blank=true;this.dataItems=undefined;this.truncateDescription=true;this.truncateLimit=140;this.hasSidebar=false}async componentWillLoad(){this._dataItems=await l(this.dataItems);const e=this.el.closest(".hy-main");if(e){if(e.classList.contains("with-sidebar")){this.hasSidebar=true}}}async watchPropHandler(e,i){if(e!==i){this._dataItems=await l(this.dataItems)}}render(){const e=["hy-general-list",this.hasSidebar?"hy-general-list--with-sidebar":"",`hy-general-list--style-${this.type}`].join(" ");let a=this._dataItems;if(typeof this._dataItems==="object"){a=Object.values(this._dataItems)}function r(e,i){return e.length>i?e.substr(0,i-1)+"...":e}return i(t,null,i("ul",{class:e},a&&a.map((e=>i("li",null,i("hy-general-list-item",{"has-sidebar":this.hasSidebar,target:this.blank,"data-location":e.url,description:this.truncateDescription?r(e.description,this.truncateLimit):e.description,id:e.id,imageAlt:e.imageAlt,imageUrl:e.imageUrl,"item-title":e.title,label:e.label,"sub-label":e.subLabel,tag:e.tag,date:e.date,type:e.type,url:e.url,"list-style":this.type}))))),i("hy-box",{mb:"1.75, 1.75, 2, 2.5"}))}get el(){return a(this)}static get watchers(){return{dataItems:["watchPropHandler"]}}};s.style=n;const o=':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}}';const d=class{constructor(i){e(this,i);this.hasSidebar=true;this.description=undefined;this.imageAlt="";this.imageUrl=null;this.disableLazy=false;this.itemTitle=undefined;this.label=undefined;this.subLabel="";this.date="";this.tag="";this.type=undefined;this.url=undefined;this.listStyle=undefined;this.target=true}render(){const e=["hy-general-list-item",`hy-general-list-item--style-${this.listStyle}`].join(" ");const t=["hy-general-list-item__text-container"].join(" ");const a=["hy-general-list-item__image-container"].join(" ");const r=this.hasSidebar?"common":"large";const l=["hy-general-list-item__title",`hy-general-list-item__title__${r}`].join(" ");const n=["hy-general-list-item__description",`hy-general-list-item__description__${r}`].join(" ");const s=16;const o=10;const d=o/s*100;const m={"--aspectRatio":`${d}%`};return i("article",{class:e},i("a",{class:"hy-general-list-item__link",href:this.url,target:this.target?"_blank":"_self"},this.type&&i("div",{class:"hy-general-list-item__type"},i("span",{class:"hy-general-list-item__type__major"},this.label),i("span",{class:"hy-general-list-item__type__sub"},this.subLabel)),this.imageUrl&&i("figure",{class:a,style:m},i("img",{loading:this.disableLazy?"eager":"lazy",alt:this.imageAlt,class:"hy-general-list-item__image",src:this.imageUrl})),i("div",{class:t},(this.tag||this.date)&&i("span",{class:"hy-genenral-list-item__meta"},this.tag,i("span",{class:"hy-genenral-list-item__meta__date"},this.tag&&"|"," ",this.date)),i("h3",{class:l},this.itemTitle),i("p",{class:n},this.description))))}get el(){return a(this)}};d.style=o;export{s as hy_general_list,d as hy_general_list_item};
2
2
  //# sourceMappingURL=hy-general-list_2.entry.js.map
package/dist/huds-lib/hy-general-list_2.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["hyGeneralListCss","HyGeneralList","GeneralListTypes","list","async","this","_dataItems","jsonParserWorker","dataItems","hyMainDiv","el","closest","classList","contains","hasSidebar","newValue","oldValue","render","classAttributes","type","join","listData","Object","values","truncate","str","n","length","substr","h","Host","class","map","item","target","blank","url","description","truncateDescription","truncateLimit","id","imageAlt","imageUrl","title","label","subLabel","tag","date","mb","hyGeneralListItemCss","HyGeneralListItem","listStyle","contentClassAttributes","imageClassAttributes","sidebarClass","titleClassAttributes","descriptionClassAttributes","aspectRatioWidth","aspectRatioHeight","aspect","aspectRatio","href","style","loading","disableLazy","alt","src","itemTitle"],"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"],"mappings":"oJAAA,MAAMA,EAAmB,wuD,MCwBZC,EAAa,M,mCACSC,EAAiBC,K,WACzB,K,kDAEc,K,mBACP,I,gBAGD,K,CAE/BC,0BACEC,KAAKC,iBAAmBC,EAAiBF,KAAKG,WAE9C,MAAMC,EAAYJ,KAAKK,GAAGC,QAAQ,YAClC,GAAIF,EAAW,CACb,GAAIA,EAAUG,UAAUC,SAAS,gBAAiB,CAChDR,KAAKS,WAAa,I,GAMxBV,uBAAuBW,EAA2BC,GAChD,GAAID,IAAaC,EAAU,CACzBX,KAAKC,iBAAmBC,EAAiBF,KAAKG,U,EAIlDS,SACE,MAAMC,EAAkB,CACtB,kBACAb,KAAKS,WAAa,gCAAkC,GACpD,0BAA0BT,KAAKc,QAC/BC,KAAK,KAEP,IAAIC,EAAWhB,KAAKC,WACpB,UAAWD,KAAKC,aAAe,SAAU,CACvCe,EAAWC,OAAOC,OAAOlB,KAAKC,W,CAGhC,SAASkB,EAASC,EAAKC,GACrB,OAAOD,EAAIE,OAASD,EAAID,EAAIG,OAAO,EAAGF,EAAI,GAAK,MAAQD,C,CAGzD,OACEI,EAACC,EAAI,KACHD,EAAA,MAAIE,MAAOb,GACRG,GACCA,EAASW,KAAKC,GACZJ,EAAA,UACEA,EAAA,sCACexB,KAAKS,WAClBoB,OAAQ7B,KAAK8B,MAAK,gBACHF,EAAKG,IACpBC,YACEhC,KAAKiC,oBAAsBd,EAASS,EAAKI,YAAahC,KAAKkC,eAAiBN,EAAKI,YAEnFG,GAAIP,EAAKO,GACTC,SAAUR,EAAKQ,SACfC,SAAUT,EAAKS,SAAQ,aACXT,EAAKU,MACjBC,MAAOX,EAAKW,MAAK,YACNX,EAAKY,SAChBC,IAAKb,EAAKa,IACVC,KAAMd,EAAKc,KACX5B,KAAMc,EAAKd,KACXiB,IAAKH,EAAKG,IAAG,aACD/B,KAAKc,WAK3BU,EAAA,UAAQmB,GAAG,uB,kGChGnB,MAAMC,EAAuB,knM,MCOhBC,EAAiB,M,yCACE,K,yCAEH,G,cACA,K,iBACI,M,4DAGJ,G,UACJ,G,SACD,G,4EAII,I,CAI1BjC,SACE,MAAMC,EAAkB,CAAC,uBAAwB,+BAA+Bb,KAAK8C,aAAa/B,KAAK,KACvG,MAAMgC,EAAyB,CAAC,wCAAwChC,KAAK,KAC7E,MAAMiC,EAAuB,CAAC,yCAAyCjC,KAAK,KAE5E,MAAMkC,EAAejD,KAAKS,WAAa,SAAW,QAClD,MAAMyC,EAAuB,CAAC,8BAA+B,gCAAgCD,KAAgBlC,KAC3G,KAEF,MAAMoC,EAA6B,CACjC,oCACA,sCAAsCF,KACtClC,KAAK,KAEP,MAAMqC,EAAmB,GACzB,MAAMC,EAAoB,GAC1B,MAAMC,EAAUD,EAAoBD,EAAoB,IACxD,MAAMG,EAAc,CAClB,gBAAiB,GAAGD,MAGtB,OACE9B,EAAA,WAASE,MAAOb,GACdW,EAAA,KAAGE,MAAM,6BAA6B8B,KAAMxD,KAAK+B,IAAKF,OAAQ7B,KAAK6B,OAAS,SAAW,SACpF7B,KAAKc,MACJU,EAAA,OAAKE,MAAM,8BACTF,EAAA,QAAME,MAAM,qCAAqC1B,KAAKuC,OACtDf,EAAA,QAAME,MAAM,mCAAmC1B,KAAKwC,WAGvDxC,KAAKqC,UACJb,EAAA,UAAQE,MAAOsB,EAAsBS,MAAOF,GAC1C/B,EAAA,OACEkC,QAAS1D,KAAK2D,YAAc,QAAU,OACtCC,IAAK5D,KAAKoC,SACVV,MAAM,8BACNmC,IAAK7D,KAAKqC,YAIhBb,EAAA,OAAKE,MAAOqB,IACR/C,KAAKyC,KAAOzC,KAAK0C,OACjBlB,EAAA,QAAME,MAAM,+BACT1B,KAAKyC,IACNjB,EAAA,QAAME,MAAM,qCACT1B,KAAKyC,KAAO,IAAG,IAAGzC,KAAK0C,OAI9BlB,EAAA,MAAIE,MAAOwB,GAAuBlD,KAAK8D,WACvCtC,EAAA,KAAGE,MAAOyB,GAA6BnD,KAAKgC,e"}
1
+ {"version":3,"names":["hyGeneralListCss","HyGeneralList","GeneralListTypes","list","async","this","_dataItems","jsonParserWorker","dataItems","hyMainDiv","el","closest","classList","contains","hasSidebar","newValue","oldValue","render","classAttributes","type","join","listData","Object","values","truncate","str","n","length","substr","h","Host","class","map","item","target","blank","url","description","truncateDescription","truncateLimit","id","imageAlt","imageUrl","title","label","subLabel","tag","date","mb","hyGeneralListItemCss","HyGeneralListItem","listStyle","contentClassAttributes","imageClassAttributes","sidebarClass","titleClassAttributes","descriptionClassAttributes","aspectRatioWidth","aspectRatioHeight","aspect","aspectRatio","href","style","loading","disableLazy","alt","src","itemTitle"],"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"],"mappings":"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"}