@itcenteratunihelsinki/huds-lib 0.8.59 → 0.8.60

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