npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.57 → 0.8.59 - Mend

@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

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 (1260) hide show

package/dist/huds-lib/hy-cta-button.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as a,h as t,g as o}from"./index-f84f2a7d.js";import{d as r}from"./utils-7438924c.js";const n=":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-cta-button-container{display:-webkit-box;display:-ms-flexbox;display:flex}.hy-cta-button{cursor:pointer;font-family:var(--main-font-family);font-weight:700;position:relative;text-decoration:none}.hy-cta-button.transparent-background,.hy-cta-button.black-background,.hy-cta-button.blue-background,.hy-cta-button.white-background,.hy-cta-button.hero-white,.hy-cta-button.hero-blue,.hy-cta-button.hero-black,.hy-cta-button.dark-blue-background{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;max-width:328px;padding:13px 16px}.hy-cta-button.transparent-background .text,.hy-cta-button.black-background .text,.hy-cta-button.blue-background .text,.hy-cta-button.white-background .text,.hy-cta-button.hero-white .text,.hy-cta-button.hero-blue .text,.hy-cta-button.hero-black .text,.hy-cta-button.dark-blue-background .text{font-size:1rem;line-height:18px;letter-spacing:-0.3px}.hy-cta-button.transparent-background .link-icon,.hy-cta-button.black-background .link-icon,.hy-cta-button.blue-background .link-icon,.hy-cta-button.white-background .link-icon,.hy-cta-button.hero-white .link-icon,.hy-cta-button.hero-blue .link-icon,.hy-cta-button.hero-black .link-icon,.hy-cta-button.dark-blue-background .link-icon{margin-left:8px}.hy-cta-button.transparent-background .link-icon svg,.hy-cta-button.black-background .link-icon svg,.hy-cta-button.blue-background .link-icon svg,.hy-cta-button.white-background .link-icon svg,.hy-cta-button.hero-white .link-icon svg,.hy-cta-button.hero-blue .link-icon svg,.hy-cta-button.hero-black .link-icon svg,.hy-cta-button.dark-blue-background .link-icon svg{height:16px;width:16px}.hy-cta-button.dark-blue-background{background-color:var(--brand-main-dark);border:4px solid var(--grayscale-white);color:var(--grayscale-white)}.hy-cta-button.dark-blue-background .link-icon svg{background-color:var(--brand-main-dark);fill:var(--grayscale-white)}.hy-cta-button.dark-blue-background .text{color:var(--grayscale-white)}.hy-cta-button.transparent-background{background-color:var(--grayscale-white);border:4px solid var(--grayscale-black);color:var(--grayscale-black)}.hy-cta-button.transparent-background .link-icon svg{background-color:var(--grayscale-white);fill:var(--grayscale-black)}.hy-cta-button.transparent-background .text{color:var(--grayscale-black)}.hy-cta-button.black-background{background-color:var(--grayscale-black);border:4px solid var(--grayscale-white);color:var(--grayscale-white)}.hy-cta-button.black-background .link-icon svg{background-color:var(--grayscale-black);fill:var(--grayscale-white)}.hy-cta-button.black-background .text{color:var(--grayscale-white)}.hy-cta-button.black-background:hover{background-color:var(--brand-main-active)}.hy-cta-button.black-background:hover .link-icon svg{background-color:var(--brand-main-active)}.hy-cta-button.black-background:focus{background-color:var(--brand-main)}.hy-cta-button.black-background:focus .link-icon svg{background-color:var(--brand-main)}.hy-cta-button.blue-background{background-color:var(--brand-main-light);border:4px solid var(--grayscale-white);color:var(--grayscale-white)}.hy-cta-button.blue-background .link-icon svg{background-color:var(--brand-main-light);fill:var(--grayscale-white)}.hy-cta-button.blue-background .text{color:var(--grayscale-white)}.hy-cta-button.blue-background:hover{background-color:var(--brand-main)}.hy-cta-button.blue-background:hover .link-icon svg{background-color:var(--brand-main)}.hy-cta-button.blue-background:focus{background-color:var(--brand-main-active)}.hy-cta-button.blue-background:focus .link-icon svg{background-color:var(--brand-main-active)}.hy-cta-button.white-background{background-color:var(--grayscale-white);border:4px solid var(--brand-main-light);color:var(--brand-main-light)}.hy-cta-button.white-background .link-icon svg{background-color:var(--grayscale-white);fill:var(--brand-main-light)}.hy-cta-button.white-background .text{color:var(--brand-main-light)}.hy-cta-button.white-background:hover{border-color:var(--brand-main-active)}.hy-cta-button.white-background:hover .text{color:var(--brand-main-active)}.hy-cta-button.white-background:hover .link-icon svg{fill:var(--brand-main-active)}.hy-cta-button.white-background:focus{border-color:var(--brand-main-active)}.hy-cta-button.white-background:focus .text{color:var(--brand-main-active)}.hy-cta-button.white-background:focus .link-icon svg{fill:var(--brand-main-active)}.hy-cta-button.hero-white{background-color:var(--brand-main-light);color:var(--grayscale-white)}.hy-cta-button.hero-white .link-icon svg{background-color:var(--brand-main-light);fill:var(--grayscale-white)}.hy-cta-button.hero-white .text{color:var(--grayscale-white)}.hy-cta-button.hero-white:hover{background-color:var(--brand-main-active)}.hy-cta-button.hero-white:hover .link-icon svg{background-color:var(--brand-main-active)}.hy-cta-button.hero-white:focus{background-color:var(--brand-main-active)}.hy-cta-button.hero-white:focus .link-icon svg{background-color:var(--brand-main-active)}.hy-cta-button.hero-black{background-color:var(--grayscale-black);border:4px solid var(--grayscale-white);color:var(--grayscale-white)}.hy-cta-button.hero-black .link-icon svg{background-color:var(--grayscale-black);fill:var(--grayscale-white)}.hy-cta-button.hero-black .text{color:var(--grayscale-white)}.hy-cta-button.hero-black:hover{border-color:var(--brand-main-soft)}.hy-cta-button.hero-black:hover .text{color:var(--brand-main-soft)}.hy-cta-button.hero-black:hover .link-icon svg{fill:var(--brand-main-soft)}.hy-cta-button.hero-black:focus{border-color:var(--brand-main-soft)}.hy-cta-button.hero-black:focus .text{color:var(--brand-main-soft)}.hy-cta-button.hero-black:focus .link-icon svg{fill:var(--brand-main-soft)}.hy-cta-button.hero-blue{background-color:var(--brand-main);border:4px solid var(--grayscale-white);color:var(--grayscale-white)}.hy-cta-button.hero-blue .link-icon svg{background-color:var(--brand-main);fill:var(--grayscale-white)}.hy-cta-button.hero-blue .text{color:var(--grayscale-white)}.hy-cta-button.hero-blue:hover{border-color:var(--brand-main-soft)}.hy-cta-button.hero-blue:hover .text{color:var(--brand-main-soft)}.hy-cta-button.hero-blue:hover .link-icon svg{fill:var(--brand-main-soft)}.hy-cta-button.hero-blue:focus{border-color:var(--brand-main-soft)}.hy-cta-button.hero-blue:focus .text{color:var(--brand-main-soft)}.hy-cta-button.hero-blue:focus .link-icon svg{fill:var(--brand-main-soft)}";const c=class{constructor(t){a(this,t);this.variant=r.onBlueBkgd;this.linkContent="";this.typeButton=false;this.url=undefined;this.scLabel=undefined;this.isExternal=false;this.headerstyle="common"}render(){const a=["hy-cta-button",this.variant,this.headerstyle].join(" ");const o=["hy-cta-button-container"].join(" ");const r=["text"].join(" ");const n=["link-icon"].join(" ");const c=this.isExternal?"_blank":"_self";return t("span",{class:o},!this.typeButton?t("a",{"aria-label":this.scLabel,class:a,href:this.url,target:c},t("span",{class:r},this.linkContent.length===0?t("slot",null):this.linkContent),t("span",{class:n},t("hy-icon",{icon:"hy-icon-arrow-right",size:48}))):t("button",{"aria-label":this.scLabel,class:a},t("span",{class:r},this.linkContent.length===0?t("slot",null):this.linkContent),t("span",{class:n},t("hy-icon",{icon:"hy-icon-arrow-right",size:48}))))}get el(){return o(this)}};c.style=n;export{c as hy_cta_button};
2	+ //# sourceMappingURL=hy-cta-button.entry.js.map

package/dist/huds-lib/hy-cta-button.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["ctaButtonCss","CtaButton","CtaLinkButtonVariants","onBlueBkgd","render","classAttributes","this","variant","headerstyle","join","containerClassAttributes","textClassAttributes","iconClassAttributes","target","isExternal","h","class","typeButton","scLabel","href","url","linkContent","length","icon","size"],"sources":["./src/components/hy-cta-button/cta-button.scss?tag=hy-cta-button","./src/components/hy-cta-button/cta-button.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-cta-button-container {\n display: flex;\n}\n\n.hy-cta-button {\n cursor: pointer;\n font-family: var(--main-font-family);\n font-weight: 700;\n position: relative;\n text-decoration: none;\n\n &.transparent-background,\n &.black-background,\n &.blue-background,\n &.white-background,\n &.hero-white,\n &.hero-blue,\n &.hero-black,\n &.dark-blue-background {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n height: 100%;\n justify-content: center;\n max-width: 328px;\n padding: 13px 16px;\n\n .text {\n @include font-size(16px, 18px);\n letter-spacing: -0.3px;\n }\n\n .link-icon {\n margin-left: 8px;\n\n svg {\n height: 16px;\n width: 16px;\n }\n }\n }\n\n &.dark-blue-background {\n background-color: var(--brand-main-dark);\n border: 4px solid var(--grayscale-white);\n color: var(--grayscale-white);\n\n .link-icon svg {\n background-color: var(--brand-main-dark);\n fill: var(--grayscale-white);\n }\n\n .text {\n color: var(--grayscale-white);\n }\n }\n\n &.transparent-background {\n background-color: var(--grayscale-white);\n border: 4px solid var(--grayscale-black);\n color: var(--grayscale-black);\n\n .link-icon svg {\n background-color: var(--grayscale-white);\n fill: var(--grayscale-black);\n }\n\n .text {\n color: var(--grayscale-black);\n }\n }\n\n &.black-background {\n background-color: var(--grayscale-black);\n border: 4px solid var(--grayscale-white);\n color: var(--grayscale-white);\n\n .link-icon svg {\n background-color: var(--grayscale-black);\n fill: var(--grayscale-white);\n }\n\n .text {\n color: var(--grayscale-white);\n }\n\n &:hover {\n background-color: var(--brand-main-active);\n\n .link-icon svg {\n background-color: var(--brand-main-active);\n }\n }\n\n &:focus {\n background-color: var(--brand-main);\n\n .link-icon svg {\n background-color: var(--brand-main);\n }\n }\n }\n\n &.blue-background {\n background-color: var(--brand-main-light);\n border: 4px solid var(--grayscale-white);\n color: var(--grayscale-white);\n\n .link-icon svg {\n background-color: var(--brand-main-light);\n fill: var(--grayscale-white);\n }\n\n .text {\n color: var(--grayscale-white);\n }\n\n &:hover {\n background-color: var(--brand-main);\n\n .link-icon svg {\n background-color: var(--brand-main);\n }\n }\n\n &:focus {\n background-color: var(--brand-main-active);\n\n .link-icon svg {\n background-color: var(--brand-main-active);\n }\n }\n }\n\n &.white-background {\n background-color: var(--grayscale-white);\n border: 4px solid var(--brand-main-light);\n color: var(--brand-main-light);\n\n .link-icon svg {\n background-color: var(--grayscale-white);\n fill: var(--brand-main-light);\n }\n\n .text {\n color: var(--brand-main-light);\n }\n\n &:hover {\n border-color: var(--brand-main-active);\n\n .text {\n color: var(--brand-main-active);\n }\n\n .link-icon svg {\n fill: var(--brand-main-active);\n }\n }\n\n &:focus {\n border-color: var(--brand-main-active);\n\n .text {\n color: var(--brand-main-active);\n }\n\n .link-icon svg {\n fill: var(--brand-main-active);\n }\n }\n }\n\n &.hero-white {\n background-color: var(--brand-main-light);\n color: var(--grayscale-white);\n\n .link-icon svg {\n background-color: var(--brand-main-light);\n fill: var(--grayscale-white);\n }\n\n .text {\n color: var(--grayscale-white);\n }\n\n &:hover {\n background-color: var(--brand-main-active);\n\n .link-icon svg {\n background-color: var(--brand-main-active);\n }\n }\n\n &:focus {\n background-color: var(--brand-main-active);\n\n .link-icon svg {\n background-color: var(--brand-main-active);\n }\n }\n }\n\n &.hero-black {\n background-color: var(--grayscale-black);\n border: 4px solid var(--grayscale-white);\n color: var(--grayscale-white);\n\n .link-icon svg {\n background-color: var(--grayscale-black);\n fill: var(--grayscale-white);\n }\n\n .text {\n color: var(--grayscale-white);\n }\n\n &:hover {\n border-color: var(--brand-main-soft);\n\n .text {\n color: var(--brand-main-soft);\n }\n\n .link-icon svg {\n fill: var(--brand-main-soft);\n }\n }\n\n &:focus {\n border-color: var(--brand-main-soft);\n\n .text {\n color: var(--brand-main-soft);\n }\n\n .link-icon svg {\n fill: var(--brand-main-soft);\n }\n }\n }\n\n &.hero-blue {\n background-color: var(--brand-main);\n border: 4px solid var(--grayscale-white);\n color: var(--grayscale-white);\n\n .link-icon svg {\n background-color: var(--brand-main);\n fill: var(--grayscale-white);\n }\n\n .text {\n color: var(--grayscale-white);\n }\n\n &:hover {\n border-color: var(--brand-main-soft);\n\n .text {\n color: var(--brand-main-soft);\n }\n\n .link-icon svg {\n fill: var(--brand-main-soft);\n }\n }\n\n &:focus {\n border-color: var(--brand-main-soft);\n\n .text {\n color: var(--brand-main-soft);\n }\n\n .link-icon svg {\n fill: var(--brand-main-soft);\n }\n }\n }\n}\n","import {Component, ComponentInterface, Element, Prop, h} from \"@stencil/core\";\nimport {CtaLinkButtonVariants} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-cta-button\",\n styleUrl: \"cta-button.scss\",\n shadow: false,\n})\nexport class CtaButton implements ComponentInterface {\n @Prop() variant: CtaLinkButtonVariants = CtaLinkButtonVariants.onBlueBkgd;\n @Prop() linkContent: string = \"\";\n @Prop() typeButton: boolean = false;\n @Prop() url?: string;\n @Prop() scLabel?: string;\n @Prop() isExternal: boolean = false;\n @Prop() headerstyle: string = \"common\";\n @Element() el: HTMLElement;\n\n render() {\n const classAttributes = [\"hy-cta-button\", this.variant, this.headerstyle].join(\" \");\n\n const containerClassAttributes = [\"hy-cta-button-container\"].join(\" \");\n\n const textClassAttributes = [\"text\"].join(\" \");\n const iconClassAttributes = [\"link-icon\"].join(\" \");\n\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n return (\n <span class={containerClassAttributes}>\n {!this.typeButton ? (\n <a aria-label={this.scLabel} class={classAttributes} href={this.url} target={target}>\n <span class={textClassAttributes}>{this.linkContent.length === 0 ? <slot /> : this.linkContent}</span>\n <span class={iconClassAttributes}>\n <hy-icon icon={\"hy-icon-arrow-right\"} size={48} />\n </span>\n </a>\n ) : (\n <button aria-label={this.scLabel} class={classAttributes}>\n <span class={textClassAttributes}>{this.linkContent.length === 0 ? <slot /> : this.linkContent}</span>\n <span class={iconClassAttributes}>\n <hy-icon icon={\"hy-icon-arrow-right\"} size={48} />\n </span>\n </button>\n )}\n </span>\n );\n }\n}\n"],"mappings":"8FAAA,MAAMA,EAAe,upP,MCQRC,EAAS,M,sCACqBC,EAAsBC,W,iBACjC,G,gBACA,M,0DAGA,M,iBACA,Q,CAG9BC,SACE,MAAMC,EAAkB,CAAC,gBAAiBC,KAAKC,QAASD,KAAKE,aAAaC,KAAK,KAE/E,MAAMC,EAA2B,CAAC,2BAA2BD,KAAK,KAElE,MAAME,EAAsB,CAAC,QAAQF,KAAK,KAC1C,MAAMG,EAAsB,CAAC,aAAaH,KAAK,KAE/C,MAAMI,EAASP,KAAKQ,WAAa,SAAW,QAE5C,OACEC,EAAA,QAAMC,MAAON,IACTJ,KAAKW,WACLF,EAAA,kBAAeT,KAAKY,QAASF,MAAOX,EAAiBc,KAAMb,KAAKc,IAAKP,OAAQA,GAC3EE,EAAA,QAAMC,MAAOL,GAAsBL,KAAKe,YAAYC,SAAW,EAAIP,EAAA,aAAWT,KAAKe,aACnFN,EAAA,QAAMC,MAAOJ,GACXG,EAAA,WAASQ,KAAM,sBAAuBC,KAAM,OAIhDT,EAAA,uBAAoBT,KAAKY,QAASF,MAAOX,GACvCU,EAAA,QAAMC,MAAOL,GAAsBL,KAAKe,YAAYC,SAAW,EAAIP,EAAA,aAAWT,KAAKe,aACnFN,EAAA,QAAMC,MAAOJ,GACXG,EAAA,WAASQ,KAAM,sBAAuBC,KAAM,O"}

package/dist/huds-lib/hy-cta-link.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as a,h as i,g as e}from"./index-f84f2a7d.js";import{h as t}from"./utils-7438924c.js";const n=":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-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}.hy-cta-link:hover,.hy-cta-link:focus{text-decoration:underline}.hy-cta-link:hover .hy-cta-link__icon,.hy-cta-link:focus .hy-cta-link__icon{background-color:var(--brand-main-active)}.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)}";const r=class{constructor(i){a(this,i);this.variant=t.default;this.linkContent="";this.url=undefined;this.scLabel=undefined;this.isExternal=false}render(){const a=["hy-cta-link__icon",this.isExternal&&"hy-cta-link__icon--external"].join(" ");const e=this.isExternal?"_blank":"_self";return i("a",{"aria-label":this.scLabel,href:this.url,target:e,class:`hy-cta-link hy-cta-link--${this.variant}`},this.variant==t.linkList&&i("span",{class:a},i("hy-icon",{icon:"hy-icon-arrow-to-right",size:24})),i("span",null,this.linkContent),this.variant==t.default&&i("span",{class:a},i("hy-icon",{icon:"hy-icon-arrow-to-right",size:24})))}get el(){return e(this)}};r.style=n;export{r as hy_cta_link};
2	+ //# sourceMappingURL=hy-cta-link.entry.js.map

package/dist/huds-lib/hy-cta-link.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["ctaLinkCss","CtaLink","CtaLinkVariants","default","render","iconClassAttributes","this","isExternal","join","target","h","scLabel","href","url","class","variant","linkList","icon","size","linkContent"],"sources":["./src/components/hy-cta-link/cta-link.scss?tag=hy-cta-link","./src/components/hy-cta-link/cta-link.tsx"],"sourcesContent":[":host {\n display: block;\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\n &:hover,\n &:focus {\n text-decoration: underline;\n\n .hy-cta-link__icon {\n background-color: var(--brand-main-active);\n }\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","import {Component, ComponentInterface, Prop, h, Element} from \"@stencil/core\";\nimport {CtaLinkVariants} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-cta-link\",\n styleUrl: \"cta-link.scss\",\n shadow: false,\n})\nexport class CtaLink implements ComponentInterface {\n @Element() el: HTMLElement;\n @Prop() variant: CtaLinkVariants = CtaLinkVariants.default;\n @Prop() linkContent: string = \"\";\n @Prop() url?: string;\n @Prop() scLabel?: string;\n @Prop() isExternal: boolean = false;\n\n render() {\n const iconClassAttributes = [\"hy-cta-link__icon\", this.isExternal && \"hy-cta-link__icon--external\"].join(\" \");\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n return (\n <a aria-label={this.scLabel} href={this.url} target={target} class={`hy-cta-link hy-cta-link--${this.variant}`}>\n {this.variant == CtaLinkVariants.linkList && (\n <span class={iconClassAttributes}>\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={24} />\n </span>\n )}\n <span>{this.linkContent}</span>\n {this.variant == CtaLinkVariants.default && (\n <span class={iconClassAttributes}>\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={24} />\n </span>\n )}\n </a>\n );\n }\n}\n"],"mappings":"8FAAA,MAAMA,EAAa,skE,MCQNC,EAAO,M,sCAEiBC,EAAgBC,Q,iBACrB,G,0DAGA,K,CAE9BC,SACE,MAAMC,EAAsB,CAAC,oBAAqBC,KAAKC,YAAc,+BAA+BC,KAAK,KACzG,MAAMC,EAASH,KAAKC,WAAa,SAAW,QAE5C,OACEG,EAAA,kBAAeJ,KAAKK,QAASC,KAAMN,KAAKO,IAAKJ,OAAQA,EAAQK,MAAO,4BAA4BR,KAAKS,WAClGT,KAAKS,SAAWb,EAAgBc,UAC/BN,EAAA,QAAMI,MAAOT,GACXK,EAAA,WAASO,KAAM,yBAA0BC,KAAM,MAGnDR,EAAA,YAAOJ,KAAKa,aACXb,KAAKS,SAAWb,EAAgBC,SAC/BO,EAAA,QAAMI,MAAOT,GACXK,EAAA,WAASO,KAAM,yBAA0BC,KAAM,M"}

package/dist/huds-lib/hy-dropdown_3.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as i,H as o,g as t}from"./index-f84f2a7d.js";import{j as n}from"./globalScript-5a4b7abf.js";const a=':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-dropdown{display:inline-block;min-width:100%;position:relative}@media (min-width: 30rem){.hy-dropdown{min-width:48.3%}}@media (min-width: 75.0625rem){.hy-dropdown{min-width:23.03%}}.hy-dropdown label.hy-dropdown__button-label{font-size:1rem;line-height:20px;font-weight:700;display:block;font-family:var(--main-font-family);letter-spacing:-0.32px;margin-bottom:8px}.hy-dropdown--single .hy-dropdown__panel{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:330px;min-width:100%}.hy-dropdown__toggle{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;height:auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 0 0 16px;text-align:left;max-width:280px;width:100%}@media (min-width: 30rem){.hy-dropdown__toggle{font-size:1rem;line-height:24px;min-height:44px}}@media (min-width: 75.0625rem){.hy-dropdown__toggle{min-height:48px}}.hy-dropdown__toggle:hover{border-color:var(--brand-main-light);cursor:pointer}.hy-dropdown__toggle:focus{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}.hy-dropdown__toggle svg{pointer-events:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon{background-color:var(--brand-main-light);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-dropdown__toggle.is-open .hy-dropdown__icon::before{display:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon svg{fill:var(--grayscale-white)}.hy-dropdown__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 0 0 16px;position:relative;width:40px}.hy-dropdown__icon::before{border-left:0.5px solid var(--grayscale-medium-dark);content:"";display:inline-block;height:65%;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width: 30rem){.hy-dropdown__icon{height:44px;width:44px}}@media (min-width: 75.0625rem){.hy-dropdown__icon{height:48px;width:48px}}.hy-dropdown__icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-dropdown__icon svg{height:16px;width:16px}}.hy-dropdown__panel{background-color:var(--grayscale-white);-webkit-box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);list-style:none;margin:0;padding:6px;position:absolute;width:100%;z-index:11}.hy-dropdown__panel.is-hidden{display:none;visibility:hidden}.hy-dropdown__panel-item{position:relative}.hy-dropdown__panel-item:not(.is-last){margin-bottom:6px}.hy-dropdown__label{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 16px;text-align:left;width:100%}@media (min-width: 30rem){.hy-dropdown__label{font-size:1rem;line-height:24px}}.hy-dropdown__label-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none !important;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;visibility:hidden;width:40px}.hy-dropdown__checkbox{height:100%;margin:0;opacity:0;position:absolute;width:100%;z-index:10}.hy-dropdown__checkbox:checked+label{border-color:var(--grayscale-black);border-style:solid inset solid solid;border-width:2px;color:var(--grayscale-black);outline:0;text-indent:-1px}.hy-dropdown__checkbox:checked+label .hy-dropdown__label-icon{display:-webkit-inline-box !important;display:-ms-inline-flexbox !important;display:inline-flex !important;visibility:visible}.hy-dropdown__checkbox:hover{cursor:pointer}.hy-dropdown__checkbox:hover+label{border-color:var(--brand-main-light)}.hy-dropdown__checkbox:focus+label{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}';const r=class{constructor(i){e(this,i);this.single=false;this.dropdownLabel=null;this.dropdownId="dropdownToggle";this.dropdownOptions=undefined;this.defaultLabel="All";this.defaultOption=null;this.isPanelOpen=false;this.isChecked=false;this.currentSingle=[{id:0,label:this.defaultLabel,value:0}]}async componentWillLoad(){this._dropdownOptions=await n(this.dropdownOptions)}componentWillUpdate(){const e=this.el.querySelectorAll(".hy-dropdown__checkbox");if(e){if([...e].some((e=>e.checked==true))){this.isChecked=true}else{this.isChecked=false}}}watchPropHandler(e,i){if(!this.single)return;if(e!==i){const i=this.el.getElementsByClassName("hy-dropdown__checkbox");Array.from(i).filter((i=>{if(i.id==e){i.checked=true;this.currentSingle=this._dropdownOptions.filter((i=>i.id==e));return}return null}))}}handlePanelToggle(){this.isPanelOpen=!this.isPanelOpen}handleClick(e){const i=this.el.querySelector(`#${this.dropdownId}`);const o=this.el.querySelector(".hy-dropdown__panel");const t=this.el.querySelectorAll(".hy-dropdown__checkbox");const n=this.el.querySelector(".hy-dropdown__icon");const{target:a}=e;const r=[i,o,n,...t];if(this.isPanelOpen&&!r.includes(a)){this.isPanelOpen=false}e.stopPropagation()}handleSingleClick(e){if(!this.single\|\|!this.isPanelOpen)return;const i=this.el.getElementsByClassName("hy-dropdown__checkbox");const o=[...i];const{target:t}=e;if(!o.includes(t))return;Array.from(i).filter((e=>{if(e.id==t.id){if(!e.checked){this.currentSingle=[{id:null,label:this.defaultLabel,value:null}];return}this.currentSingle=this._dropdownOptions.filter((e=>e.id==t.id));return}if(e.id!==t.id&&e.checked){e.checked=false;return}return null}));e.stopPropagation()}render(){const{label:e,id:t,value:n}=this.currentSingle[0];const a=["hy-dropdown",this.single?"hy-dropdown--single":""].join(" ");if(this.single){return i(o,{class:a},this.dropdownLabel&&i("label",{class:"hy-dropdown__button-label",htmlFor:this.dropdownId},this.dropdownLabel),i("button",{id:this.dropdownId,class:`hy-dropdown__toggle ${this.isPanelOpen?"is-open":""}`,"aria-expanded":`${this.isPanelOpen\|\|false}`,"aria-haspopup":"true","aria-controls":"dropdownPanel",onClick:()=>this.handlePanelToggle(),"aria-label":`${!this.isPanelOpen?"Open":"Close"} dropdown`,"data-current-id":t,"data-current-value":n,value:t,type:"button"},e,i("hy-icon",{class:"hy-dropdown__icon",icon:"hy-icon-caret-down",size:14,"aria-hidden":"true"})),i("hy-dropdown-panel",{"checkbox-checked":this.isChecked?"true":"false","is-hidden":!this.isPanelOpen},this._dropdownOptions.map((({id:e,label:o,value:t},n)=>i("hy-dropdown-panel-item",{"dropdown-item-id":e,"dropdown-item-label":o,"dropdown-item-value":t,"is-last":this._dropdownOptions.length-1===n})))))}else{return i(o,{class:a},i("button",{id:this.dropdownId,class:`hy-dropdown__toggle ${this.isPanelOpen?"is-open":""}`,"aria-expanded":`${this.isPanelOpen\|\|false}`,"aria-haspopup":"true","aria-controls":"dropdownPanel",onClick:()=>this.handlePanelToggle(),"aria-label":`${!this.isPanelOpen?"Open":"Close"} dropdown`,type:"button"},this.dropdownLabel&&this.dropdownLabel,i("hy-icon",{class:"hy-dropdown__icon",icon:"hy-icon-caret-down",size:14,"aria-hidden":"true"})),i("hy-dropdown-panel",{"checkbox-checked":this.isChecked?"true":"false","is-hidden":!this.isPanelOpen},this._dropdownOptions.map((({id:e,label:o,value:t},n)=>i("hy-dropdown-panel-item",{"dropdown-item-id":e,"dropdown-item-label":o,"dropdown-item-value":t,"is-last":this._dropdownOptions.length-1===n})))))}}get el(){return t(this)}static get watchers(){return{defaultOption:["watchPropHandler"]}}};r.style=a;const d=class{constructor(i){e(this,i);this.isHidden=undefined}render(){return i("ul",{id:"dropdownPanel",class:`hy-dropdown__panel ${this.isHidden?"is-hidden":""}`,"aria-hidden":`${this.isHidden\|\|false}`,role:"region","aria-labelledby":"dropdownToggle"},i("slot",null))}};const l=class{constructor(i){e(this,i);this.isLast=false;this.dropdownItemId=undefined;this.dropdownItemValue=undefined;this.dropdownItemLabel=undefined}render(){return i("li",{class:`hy-dropdown__panel-item ${this.isLast?"is-last":""}`},i("input",{type:"checkbox",class:"hy-dropdown__checkbox",id:`${this.dropdownItemId}`,value:`${this.dropdownItemValue}`}),i("label",{class:"hy-dropdown__label",htmlFor:`${this.dropdownItemId}`},this.dropdownItemLabel,i("hy-icon",{class:"hy-dropdown__label-icon",icon:"hy-icon-done",size:14,"aria-hidden":"true"})))}};export{r as hy_dropdown,d as hy_dropdown_panel,l as hy_dropdown_panel_item};
2	+ //# sourceMappingURL=hy-dropdown_3.entry.js.map

package/dist/huds-lib/hy-dropdown_3.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["hyDropdownCss","HyDropdown","id","label","this","defaultLabel","value","async","_dropdownOptions","jsonParserWorker","dropdownOptions","componentWillUpdate","items","el","querySelectorAll","some","item","checked","isChecked","watchPropHandler","newValue","oldValue","single","dropdownPanelCheckboxElements","getElementsByClassName","Array","from","filter","currentSingle","option","handlePanelToggle","isPanelOpen","handleClick","event","dropdownToggleButtonElement","querySelector","dropdownId","dropdownPanelElement","dropdownToggleButtonIconElement","target","allowedElements","includes","stopPropagation","handleSingleClick","render","currentLabel","currentId","currentValue","classAttributes","join","h","Host","class","dropdownLabel","htmlFor","onClick","type","icon","size","map","index","length","HyDropdownPanel","isHidden","role","HyDropdownPanelItem","isLast","dropdownItemId","dropdownItemValue","dropdownItemLabel"],"sources":["./src/components/hy-dropdown/hy-dropdown.scss?tag=hy-dropdown","./src/components/hy-dropdown/hy-dropdown.tsx","./src/components/hy-dropdown/hy-dropdown.panel.tsx","./src/components/hy-dropdown/hy-dropdown.panel.item.tsx"],"sourcesContent":[".hy-dropdown {\n display: inline-block;\n min-width: 100%;\n position: relative;\n\n @include breakpoint($narrow) {\n min-width: 48.3%;\n }\n\n @include breakpoint($extrawide) {\n min-width: 23.03%;\n }\n\n label.hy-dropdown__button-label {\n @include font-size(16px, 20px);\n @include font-weight($bold);\n\n display: block;\n font-family: var(--main-font-family);\n letter-spacing: -0.32px;\n margin-bottom: 8px;\n }\n\n &--single {\n .hy-dropdown__panel {\n width: max-content;\n max-width: 330px;\n min-width: 100%;\n }\n }\n}\n\n.hy-dropdown__toggle {\n @include font-size(14px, 24px);\n align-items: center;\n background-color: var(--grayscale-white);\n border-radius: 0;\n border: 1px solid var(--grayscale-medium-dark);\n color: var(--link-blue);\n display: inline-flex;\n font-family: var(--main-font-family);\n font-weight: $semibold;\n min-height: 40px;\n height: auto;\n justify-content: space-between;\n letter-spacing: normal;\n padding: 0 0 0 16px;\n text-align: left;\n max-width: 280px;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n min-height: 44px;\n }\n\n @include breakpoint($extrawide) {\n min-height: 48px;\n }\n\n &:hover {\n border-color: var(--brand-main-light);\n cursor: pointer;\n }\n\n &:focus {\n border-color: var(--brand-main-light);\n border-style: solid inset solid solid;\n border-width: 2px;\n outline: 0;\n text-indent: -1px; // Text stays in place.\n }\n\n svg {\n pointer-events: none;\n }\n\n &.is-open {\n .hy-dropdown__icon {\n background-color: var(--brand-main-light);\n transform: rotate(180deg);\n\n &::before {\n display: none;\n }\n\n svg {\n fill: var(--grayscale-white);\n }\n }\n }\n}\n\n.hy-dropdown__icon {\n align-items: center;\n display: inline-flex;\n flex-shrink: 0;\n height: 40px;\n justify-content: center;\n margin: 0 0 0 16px;\n position: relative;\n width: 40px;\n\n &::before {\n //border-left: 1px dashed var(--grayscale-medium-dark);\n //Line weight 0,5 px; Line color #979797\n border-left: 0.5px solid var(--grayscale-medium-dark);\n content: \"\";\n display: inline-block;\n height: 65%;\n left: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n }\n\n @include breakpoint($narrow) {\n height: 44px;\n width: 44px;\n }\n\n @include breakpoint($extrawide) {\n height: 48px;\n width: 48px;\n }\n\n svg {\n fill: var(--link-blue);\n\n @include breakpoint($narrow) {\n height: 16px;\n width: 16px;\n }\n }\n}\n\n.hy-dropdown__panel {\n background-color: var(--grayscale-white);\n box-shadow: 0 10px 20px 0 rgba(0, 49, 70, 0.2);\n list-style: none;\n margin: 0;\n padding: 6px;\n position: absolute;\n width: 100%;\n z-index: 11;\n\n &.is-hidden {\n display: none;\n visibility: hidden;\n }\n}\n\n.hy-dropdown__panel-item {\n position: relative;\n\n &:not(.is-last) {\n margin-bottom: 6px;\n }\n}\n\n.hy-dropdown__label {\n @include font-size(14px, 24px);\n align-items: center;\n background-color: var(--grayscale-white);\n border-radius: 0;\n border: 1px solid var(--grayscale-medium-dark);\n color: var(--link-blue);\n display: inline-flex;\n font-family: var(--main-font-family);\n font-weight: $semibold;\n min-height: 40px;\n justify-content: space-between;\n letter-spacing: normal;\n padding: 0 16px;\n text-align: left;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n}\n\n.hy-dropdown__label-icon {\n align-items: center;\n display: none !important;\n flex-shrink: 0;\n height: 40px;\n justify-content: center;\n position: relative;\n visibility: hidden;\n width: 40px;\n}\n\n.hy-dropdown__checkbox {\n height: 100%;\n margin: 0;\n opacity: 0;\n position: absolute;\n width: 100%;\n z-index: 10;\n\n &:checked {\n & + label {\n border-color: var(--grayscale-black);\n border-style: solid inset solid solid;\n border-width: 2px;\n color: var(--grayscale-black);\n outline: 0;\n text-indent: -1px; // Text stays in place.\n\n .hy-dropdown__label-icon {\n display: inline-flex !important;\n visibility: visible;\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n\n & + label {\n border-color: var(--brand-main-light);\n }\n }\n\n &:focus {\n & + label {\n border-color: var(--brand-main-light);\n border-style: solid inset solid solid;\n border-width: 2px;\n outline: 0;\n text-indent: -1px; // Text stays in place.\n }\n }\n}\n","import {Component, Element, Host, h, State, Listen, Prop, Watch} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\nexport interface IDropdownItem {\n id: string | number;\n label: string;\n value: string | number;\n}\n\nexport interface DefaultValue {\n id: string | number;\n label: string;\n value: string | number;\n}\n\n@Component({\n tag: \"hy-dropdown\",\n styleUrl: \"hy-dropdown.scss\",\n shadow: false,\n})\nexport class HyDropdown {\n private _dropdownOptions: IDropdownItem[];\n @Element() el: HTMLElement;\n @Prop() single: boolean = false;\n @Prop() dropdownLabel: string = null;\n @Prop() dropdownId: string = \"dropdownToggle\";\n @Prop() dropdownOptions: IDropdownItem[] | string;\n @Prop() defaultLabel: string = \"All\";\n @Prop({mutable: true}) defaultOption: string | number = null;\n @State() isPanelOpen: boolean = false;\n @State() isChecked: boolean = false;\n @State() currentSingle: DefaultValue[] = [{id: 0, label: this.defaultLabel, value: 0}];\n\n async componentWillLoad() {\n this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);\n }\n\n componentWillUpdate() {\n const items = this.el.querySelectorAll(\".hy-dropdown__checkbox\") as any;\n if (items) {\n if ([...items].some((item) => item.checked == true)) {\n this.isChecked = true;\n } else {\n this.isChecked = false;\n }\n }\n }\n\n @Watch(\"defaultOption\")\n watchPropHandler(newValue: string | number, oldValue: string | number) {\n if (!this.single) return;\n\n if (newValue !== oldValue) {\n const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n HTMLInputElement\n >;\n\n Array.from(dropdownPanelCheckboxElements).filter((item) => {\n if (item.id == newValue) {\n item.checked = true;\n this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue) as any;\n return;\n }\n return null;\n });\n }\n }\n\n handlePanelToggle() {\n this.isPanelOpen = !this.isPanelOpen;\n }\n\n @Listen(\"click\", {target: \"window\"})\n handleClick(event) {\n const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`) as HTMLButtonElement;\n const dropdownPanelElement = this.el.querySelector(\".hy-dropdown__panel\") as HTMLElement;\n const dropdownPanelCheckboxElements = this.el.querySelectorAll(\".hy-dropdown__checkbox\");\n const dropdownToggleButtonIconElement = this.el.querySelector(\".hy-dropdown__icon\") as HTMLElement;\n\n const {target} = event;\n\n const allowedElements = [\n dropdownToggleButtonElement,\n dropdownPanelElement,\n dropdownToggleButtonIconElement,\n ...dropdownPanelCheckboxElements, // Spread (\"copy\") items to allowedElement array.\n ];\n\n if (this.isPanelOpen && !allowedElements.includes(target)) {\n this.isPanelOpen = false;\n }\n event.stopPropagation();\n }\n\n @Listen(\"click\", {capture: true})\n handleSingleClick(event) {\n if (!this.single || !this.isPanelOpen) return;\n const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n HTMLInputElement\n >;\n const allowedElements = [...dropdownPanelCheckboxElements];\n const {target} = event;\n if (!allowedElements.includes(target)) return;\n Array.from(dropdownPanelCheckboxElements).filter((item) => {\n if (item.id == target.id) {\n if (!item.checked) {\n this.currentSingle = [{id: null, label: this.defaultLabel, value: null}];\n return;\n }\n this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id) as any;\n return;\n }\n if (item.id !== target.id && item.checked) {\n item.checked = false;\n return;\n }\n return null;\n });\n\n event.stopPropagation();\n }\n\n render() {\n const {label: currentLabel, id: currentId, value: currentValue} = this.currentSingle[0];\n const classAttributes = [\"hy-dropdown\", this.single ? \"hy-dropdown--single\" : \"\"].join(\" \");\n\n if (this.single) {\n return (\n <Host class={classAttributes}>\n {this.dropdownLabel && (\n <label class=\"hy-dropdown__button-label\" htmlFor={this.dropdownId}>\n {this.dropdownLabel}\n </label>\n )}\n <button\n id={this.dropdownId}\n class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n aria-expanded={`${this.isPanelOpen || false}`}\n aria-haspopup=\"true\"\n aria-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={`${!this.isPanelOpen ? \"Open\" : \"Close\"} dropdown`}\n data-current-id={currentId}\n data-current-value={currentValue}\n value={currentId}\n type=\"button\"\n >\n {currentLabel}\n <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n </button>\n <hy-dropdown-panel checkbox-checked={this.isChecked ? \"true\" : \"false\"} is-hidden={!this.isPanelOpen}>\n {this._dropdownOptions.map(({id, label, value}, index) => (\n <hy-dropdown-panel-item\n dropdown-item-id={id}\n dropdown-item-label={label}\n dropdown-item-value={value}\n is-last={this._dropdownOptions.length - 1 === index}\n />\n ))}\n </hy-dropdown-panel>\n </Host>\n );\n } else {\n return (\n <Host class={classAttributes}>\n <button\n id={this.dropdownId}\n class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n aria-expanded={`${this.isPanelOpen || false}`}\n aria-haspopup=\"true\"\n aria-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={`${!this.isPanelOpen ? \"Open\" : \"Close\"} dropdown`}\n type=\"button\"\n >\n {this.dropdownLabel && this.dropdownLabel}\n <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n </button>\n <hy-dropdown-panel checkbox-checked={this.isChecked ? \"true\" : \"false\"} is-hidden={!this.isPanelOpen}>\n {this._dropdownOptions.map(({id, label, value}, index) => (\n <hy-dropdown-panel-item\n dropdown-item-id={id}\n dropdown-item-label={label}\n dropdown-item-value={value}\n is-last={this._dropdownOptions.length - 1 === index}\n />\n ))}\n </hy-dropdown-panel>\n </Host>\n );\n }\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-dropdown-panel\",\n shadow: false,\n})\nexport class HyDropdownPanel {\n @Prop() isHidden: boolean;\n\n render() {\n return (\n <ul\n id=\"dropdownPanel\"\n class={`hy-dropdown__panel ${this.isHidden ? \"is-hidden\" : \"\"}`}\n aria-hidden={`${this.isHidden || false}`}\n role=\"region\"\n aria-labelledby=\"dropdownToggle\"\n >\n <slot />\n </ul>\n );\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-dropdown-panel-item\",\n shadow: false,\n})\nexport class HyDropdownPanelItem {\n @Prop() isLast?: boolean = false;\n @Prop() dropdownItemId: string | number;\n @Prop() dropdownItemValue: string | number;\n @Prop() dropdownItemLabel: string;\n\n render() {\n return (\n <li class={`hy-dropdown__panel-item ${this.isLast ? \"is-last\" : \"\"}`}>\n <input\n type=\"checkbox\"\n class=\"hy-dropdown__checkbox\"\n id={`${this.dropdownItemId}`}\n value={`${this.dropdownItemValue}`}\n />\n <label class=\"hy-dropdown__label\" htmlFor={`${this.dropdownItemId}`}>\n {this.dropdownItemLabel}\n <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n </label>\n </li>\n );\n }\n}\n"],"mappings":"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"}

package/dist/huds-lib/hy-event-item.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as e,h as i,g as t}from"./index-f9deccc3.js";const n=':root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-events__item{display:-webkit-box;display:-ms-flexbox;display:flex;border:1px solid #d8d8d8;padding:13px 16px;position:relative;text-decoration:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;white-space:initial;margin-bottom:1rem}@media (min-width: 48rem){.hy-events__item{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:47px;margin-bottom:1.75rem}}@media (min-width: 48rem){.hy-events__item:not(.hy-events__item--grid) .hy-events__item--container{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events__item:hover .hy-events__item__title{color:var(--brand-main);text-decoration:underline}.hy-events__item:hover .hy-events__item__date--short,.hy-events__item:hover .hy-events__item__url-icon{background-color:var(--brand-main-active)}.hy-events__item__title{font-size:1.125rem;line-height:24px;-webkit-box-orient:vertical;-webkit-line-clamp:6;color:var(--grayscale-black);display:-webkit-box;font-family:var(--main-font-family);font-weight:700;letter-spacing:-0.36px;line-clamp:6;margin-bottom:16px;overflow:hidden;text-overflow:ellipsis}@media (min-width: 48rem){.hy-events__item__title{font-size:1.375rem;line-height:28px;font-weight:700;font-size:22px;line-height:28px;letter-spacing:-0.44px;margin-bottom:14px}}.hy-events__item__details{font-family:var(--main-font-family);font-style:normal;font-weight:400;font-size:17px;line-height:26px;color:var(--grayscale-black)}.hy-events__item__meta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 48rem){.hy-events__item__meta{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-events__item__meta--item{font-size:0.9375rem;line-height:22px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-right:0px;margin-bottom:9px;font-family:var(--main-font-family);font-weight:400;word-break:break-word}@media (min-width: 48rem){.hy-events__item__meta--item{font-size:1.0625rem;line-height:26px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin-right:35px;margin-bottom:0;font-weight:400}}.hy-events__item__meta--item svg{width:20px;height:20px;margin-right:9px;margin-top:2px}@media (min-width: 48rem){.hy-events__item__meta--item svg{margin-top:1px}}.hy-events__item__date--short{font-size:0.9375rem;line-height:18px;display:-webkit-box;display:-ms-flexbox;display:flex;color:var(--grayscale-white);background:var(--brand-main-light);font-family:var(--main-font-family);font-style:normal;font-weight:700;padding:6px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;text-align:center;letter-spacing:-0.28125px;text-decoration:none;margin-bottom:20px;margin-right:0}@media (min-width: 48rem){.hy-events__item__date--short{font-size:1.0625rem;line-height:20px;letter-spacing:-0.31875px;padding:0;height:68px;width:68px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:47px;margin-bottom:0}}.hy-events__item__url-icon{display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;background:var(--brand-main-light);color:var(--grayscale-white);width:32px;height:32px;bottom:16px;right:-9px;z-index:1}@media (min-width: 48rem){.hy-events__item__url-icon{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events__item__url-icon svg{fill:currentColor}.hy-events__item__read-more{font-size:0.9375rem;line-height:18px;color:var(--brand-main-light);font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;letter-spacing:-0.28125px;margin-top:10px}@media (min-width: 48rem){.hy-events__item__read-more{display:none}}.hy-events__item--grid{padding:1rem;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:280px;max-width:100%;min-height:255px;position:relative;margin-bottom:0}@media (min-width: 48rem){.hy-events__item--grid{max-width:280px;padding:1rem 1rem 0 1rem}}.hy-events__item--grid.is-long{max-height:100%}@media (min-width: 48rem){.hy-events__item--grid.is-long{max-height:255px}}.hy-events__item--grid.is-long::after{display:none;content:"";background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#ffffff));background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);position:absolute;bottom:0;left:0;width:100%;height:36px}@media (min-width: 48rem){.hy-events__item--grid.is-long::after{display:block}}.hy-events__item--grid.is-long .hy-events__item--container{overflow:visible}@media (min-width: 48rem){.hy-events__item--grid.is-long .hy-events__item--container{overflow:hidden}}@media (min-width: 48rem){.hy-events__item--grid.is-long:hover,.hy-events__item--grid.is-long:focus{border:0}}.hy-events__item--grid.is-long:hover::after,.hy-events__item--grid.is-long:hover .hy-events__item--toggle,.hy-events__item--grid.is-long:focus::after,.hy-events__item--grid.is-long:focus .hy-events__item--toggle{display:none}@media (min-width: 48rem){.hy-events__item--grid.is-long:hover .hy-events__item--container,.hy-events__item--grid.is-long:focus .hy-events__item--container{background-color:white;border:1px solid #d8d8d8;padding:16px 16px;position:absolute;top:0;left:0;min-height:255px;overflow:visible}}.hy-events__item--grid .hy-events__item__title{font-size:1.125rem;line-height:24px;letter-spacing:-0.36px}.hy-events__item--grid .hy-events__item--toggle{display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#d7d7d7;border-radius:50%;position:absolute;top:16px;right:16px;width:24px;height:24px}@media (min-width: 48rem){.hy-events__item--grid .hy-events__item--toggle{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events__item--grid .hy-events__item__meta{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:9px}.hy-events__item--grid .hy-events__item__meta--item{font-size:0.9375rem;line-height:22px}.hy-events__item--grid .hy-events__item__date--short{padding:6px}@media (min-width: 48rem){.hy-events__item--grid .hy-events__item__date--short{font-size:0.9375rem;line-height:18px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:auto;font-weight:700;letter-spacing:-0.28125px;margin-bottom:18px}}';const o=class{constructor(i){e(this,i);this.eventTitle=undefined;this.eventDescription="";this.dateShort="";this.dateLong="";this.location="";this.type=undefined;this.url=undefined;this.styleGrid=false;this.readMoreLabel="Read more";this.isLong=false}componentDidLoad(){const e=this.el;if(this.styleGrid){if(e.clientHeight>255){this.isLong=true}}}render(){const e=["hy-events__item",this.styleGrid?"hy-events__item--grid":"hy-events__item--list",this.isLong?"is-long":""].join(" ");return i("a",{href:this.url,class:e,target:"_blank"},i("div",{class:"hy-events__item--container"},i("div",{class:"hy-events__item__top-container"},i("span",{class:"hy-events__item__date--short"},this.dateShort),this.isLong&&i("span",{class:"hy-events__item--toggle"},i("hy-icon",{icon:"hy-icon-caret-down",size:10}))),i("div",{class:"hy-events__item__details"},i("div",{class:"hy-events__item__title"},this.eventTitle),i("div",{class:"hy-events__item__meta"},this.dateLong&&i("div",{class:"hy-events__item__meta--item hy-events__item__date--long"},i("hy-icon",{icon:"hy-icon-events",size:18}),this.dateLong),this.location&&i("div",{class:"hy-events__item__meta--item hy-events__item__location"},i("hy-icon",{icon:"hy-icon-location",size:18}),this.location),this.type&&i("div",{class:"hy-events__item__meta--item hy-events__item__type"},i("hy-icon",{icon:"hy-icon-people",size:18}),this.type),i("span",{class:"hy-events__item__read-more"},this.readMoreLabel))),i("span",{class:"hy-events__item__url-icon","aria-hidden":"true"},i("hy-icon",{icon:"hy-icon-arrow-right",size:18}))))}get el(){return t(this)}};o.style=n;export{o as hy_event_item};
+import{r as e,h as i,g as t}from"./index-f84f2a7d.js";const n=':root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-events__item{display:-webkit-box;display:-ms-flexbox;display:flex;border:1px solid #d8d8d8;padding:13px 16px;position:relative;text-decoration:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;white-space:initial;margin-bottom:1rem}@media (min-width: 48rem){.hy-events__item{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:47px;margin-bottom:1.75rem}}@media (min-width: 48rem){.hy-events__item:not(.hy-events__item--grid) .hy-events__item--container{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events__item:hover .hy-events__item__title{color:var(--brand-main);text-decoration:underline}.hy-events__item:hover .hy-events__item__date--short,.hy-events__item:hover .hy-events__item__url-icon{background-color:var(--brand-main-active)}.hy-events__item__title{font-size:1.125rem;line-height:24px;-webkit-box-orient:vertical;-webkit-line-clamp:6;color:var(--grayscale-black);display:-webkit-box;font-family:var(--main-font-family);font-weight:700;letter-spacing:-0.36px;line-clamp:6;margin-bottom:16px;overflow:hidden;text-overflow:ellipsis}@media (min-width: 48rem){.hy-events__item__title{font-size:1.375rem;line-height:28px;font-weight:700;font-size:22px;line-height:28px;letter-spacing:-0.44px;margin-bottom:14px}}.hy-events__item__details{font-family:var(--main-font-family);font-style:normal;font-weight:400;font-size:17px;line-height:26px;color:var(--grayscale-black)}.hy-events__item__meta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 48rem){.hy-events__item__meta{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-events__item__meta--item{font-size:0.9375rem;line-height:22px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-right:0px;margin-bottom:9px;font-family:var(--main-font-family);font-weight:400;word-break:break-word}@media (min-width: 48rem){.hy-events__item__meta--item{font-size:1.0625rem;line-height:26px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin-right:35px;margin-bottom:0;font-weight:400}}.hy-events__item__meta--item svg{width:20px;height:20px;margin-right:9px;margin-top:2px}@media (min-width: 48rem){.hy-events__item__meta--item svg{margin-top:1px}}.hy-events__item__date--short{font-size:0.9375rem;line-height:18px;display:-webkit-box;display:-ms-flexbox;display:flex;color:var(--grayscale-white);background:var(--brand-main-light);font-family:var(--main-font-family);font-style:normal;font-weight:700;padding:6px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;text-align:center;letter-spacing:-0.28125px;text-decoration:none;margin-bottom:20px;margin-right:0}@media (min-width: 48rem){.hy-events__item__date--short{font-size:1.0625rem;line-height:20px;letter-spacing:-0.31875px;padding:0;height:68px;width:68px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:47px;margin-bottom:0}}.hy-events__item__url-icon{display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;background:var(--brand-main-light);color:var(--grayscale-white);width:32px;height:32px;bottom:16px;right:-9px;z-index:1}@media (min-width: 48rem){.hy-events__item__url-icon{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events__item__url-icon svg{fill:currentColor}.hy-events__item__read-more{font-size:0.9375rem;line-height:18px;color:var(--brand-main-light);font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;letter-spacing:-0.28125px;margin-top:10px}@media (min-width: 48rem){.hy-events__item__read-more{display:none}}.hy-events__item--grid{padding:1rem;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:280px;max-width:100%;min-height:255px;position:relative;margin-bottom:0}@media (min-width: 48rem){.hy-events__item--grid{max-width:280px;padding:1rem 1rem 0 1rem}}.hy-events__item--grid.is-long{max-height:100%}@media (min-width: 48rem){.hy-events__item--grid.is-long{max-height:255px}}.hy-events__item--grid.is-long::after{display:none;content:"";background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#ffffff));background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);position:absolute;bottom:0;left:0;width:100%;height:36px}@media (min-width: 48rem){.hy-events__item--grid.is-long::after{display:block}}.hy-events__item--grid.is-long .hy-events__item--container{overflow:visible}@media (min-width: 48rem){.hy-events__item--grid.is-long .hy-events__item--container{overflow:hidden}}@media (min-width: 48rem){.hy-events__item--grid.is-long:hover,.hy-events__item--grid.is-long:focus{border:0}}.hy-events__item--grid.is-long:hover::after,.hy-events__item--grid.is-long:hover .hy-events__item--toggle,.hy-events__item--grid.is-long:focus::after,.hy-events__item--grid.is-long:focus .hy-events__item--toggle{display:none}@media (min-width: 48rem){.hy-events__item--grid.is-long:hover .hy-events__item--container,.hy-events__item--grid.is-long:focus .hy-events__item--container{background-color:white;border:1px solid #d8d8d8;padding:16px 16px;position:absolute;top:0;left:0;min-height:255px;overflow:visible}}.hy-events__item--grid .hy-events__item__title{font-size:1.125rem;line-height:24px;letter-spacing:-0.36px}.hy-events__item--grid .hy-events__item--toggle{display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#d7d7d7;border-radius:50%;position:absolute;top:16px;right:16px;width:24px;height:24px}@media (min-width: 48rem){.hy-events__item--grid .hy-events__item--toggle{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events__item--grid .hy-events__item__meta{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:9px}.hy-events__item--grid .hy-events__item__meta--item{font-size:0.9375rem;line-height:22px}.hy-events__item--grid .hy-events__item__date--short{padding:6px}@media (min-width: 48rem){.hy-events__item--grid .hy-events__item__date--short{font-size:0.9375rem;line-height:18px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:auto;font-weight:700;letter-spacing:-0.28125px;margin-bottom:18px}}';const o=class{constructor(i){e(this,i);this.eventTitle=undefined;this.eventDescription="";this.dateShort="";this.dateLong="";this.location="";this.type=undefined;this.url=undefined;this.styleGrid=false;this.readMoreLabel="Read more";this.isLong=false}componentDidLoad(){const e=this.el;if(this.styleGrid){if(e.clientHeight>255){this.isLong=true}}}render(){const e=["hy-events__item",this.styleGrid?"hy-events__item--grid":"hy-events__item--list",this.isLong?"is-long":""].join(" ");return i("a",{href:this.url,class:e,target:"_blank"},i("div",{class:"hy-events__item--container"},i("div",{class:"hy-events__item__top-container"},i("span",{class:"hy-events__item__date--short"},this.dateShort),this.isLong&&i("span",{class:"hy-events__item--toggle"},i("hy-icon",{icon:"hy-icon-caret-down",size:10}))),i("div",{class:"hy-events__item__details"},i("div",{class:"hy-events__item__title"},this.eventTitle),i("div",{class:"hy-events__item__meta"},this.dateLong&&i("div",{class:"hy-events__item__meta--item hy-events__item__date--long"},i("hy-icon",{icon:"hy-icon-events",size:18}),this.dateLong),this.location&&i("div",{class:"hy-events__item__meta--item hy-events__item__location"},i("hy-icon",{icon:"hy-icon-location",size:18}),this.location),this.type&&i("div",{class:"hy-events__item__meta--item hy-events__item__type"},i("hy-icon",{icon:"hy-icon-people",size:18}),this.type),i("span",{class:"hy-events__item__read-more"},this.readMoreLabel))),i("span",{class:"hy-events__item__url-icon","aria-hidden":"true"},i("hy-icon",{icon:"hy-icon-arrow-right",size:18}))))}get el(){return t(this)}};o.style=n;export{o as hy_event_item};
 //# sourceMappingURL=hy-event-item.entry.js.map

package/dist/huds-lib/hy-events.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as e,h as t,g as i}from"./index-f9deccc3.js";import{d as n}from"./utils-a4d55421.js";const r=":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-events.no-events .hy-events__no-result-container{font-family:var(--main-font-family)}hy-events.no-events .hy-events--wrapper .hy-events--grid{padding-bottom:0}hy-events.no-events .hy-events__footer{display:none}.hy-events--wrapper .hy-events{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-events--wrapper .hy-events--grid{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:1.5rem;overflow-x:hidden;white-space:nowrap;scrollbar-width:none}@media (min-width: 48rem){.hy-events--wrapper .hy-events--grid{padding-bottom:14rem}}.hy-events--wrapper .hy-events--grid .hy-events__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:24px;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}@media (min-width: 48rem){.hy-events--wrapper .hy-events--grid .hy-events__content{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-events--wrapper .hy-events__footer{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:2rem}.hy-events--wrapper .hy-events__footer--grid{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-top:1.5rem}@media (min-width: 48rem){.hy-events--wrapper .hy-events__footer--grid{margin-top:-9.5rem}}.hy-events--wrapper .hy-events__scroll-buttons{display:none;margin-top:2rem}@media (min-width: 48rem){.hy-events--wrapper .hy-events__scroll-buttons{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events--wrapper .hy-events__scroll-buttons button{border:none;background:none;padding:0.5rem}.hy-events--wrapper .hy-events__scroll-buttons button:hover{cursor:pointer}.hy-events--wrapper .hy-events__scroll-buttons button:hover svg{scale:1.1}.hy-events--wrapper .hy-events__scroll-buttons button.is-hidden{display:none}.hy-events--wrapper .hy-events__scroll-buttons button.is-disabled{pointer-events:none}.hy-events--wrapper .hy-events__scroll-buttons button.is-disabled svg{fill:var(--link-disabled)}";let o=null;let s=null;let a=280+24;const l=class{constructor(t){e(this,t);this.styleGrid=false;this.showMore=false;this.viewAllUrl=undefined;this.viewAllLabel=undefined;this.scrollLeftLabel="Scroll list to left";this.scrollRightLabel="Scroll list to right";this.scrollable=true}componentDidLoad(){const e=this.el;const t=document.querySelector(".hy-events");const i=e.querySelector(".hy-events__scroll-left");const n=e.querySelector(".hy-events__scroll-right");if(this.styleGrid){t.addEventListener("scroll",(()=>{o=setTimeout((()=>{window.clearTimeout(o)}),250)}),false);i.addEventListener("click",(e=>{e.preventDefault();i.classList.add("is-disabled");t.scrollBy({top:0,left:-a,behavior:"smooth"});s=window.setTimeout((()=>{window.clearTimeout(s);i.classList.remove("is-disabled")}),250)}));n.addEventListener("click",(e=>{e.preventDefault();n.classList.add("is-disabled");t.scrollBy({top:0,left:+a,behavior:"smooth"});s=window.setTimeout((()=>{window.clearTimeout(s);n.classList.remove("is-disabled")}),250)}))}}watchUrlHandler(e,t){if(t!==e){this.viewAllUrl=e}}checkScrollHidden(e,t,i){const n=e.querySelector(".hy-events__content");if(e.scrollLeft===0){t.classList.add("is-hidden")}else{t.classList.remove("is-hidden")}if(e.scrollLeft+e.clientWidth>=n.scrollWidth-1){i.classList.add("is-hidden")}else{i.classList.remove("is-hidden")}}render(){const e=["hy-events",this.styleGrid?"hy-events--grid":""].join(" ");const i=["hy-events__footer",this.styleGrid?"hy-events__footer--grid":""].join(" ");return t("div",{class:"hy-events--wrapper"},t("div",{class:e},t("slot",null)),t("div",{class:i},this.scrollable&&this.styleGrid&&t("div",{class:"hy-events__scroll-buttons"},t("button",{type:"button",class:"hy-events__scroll-left","aria-label":this.scrollLeftLabel},t("hy-icon",{icon:"hy-icon-caret-left",size:16})),t("button",{type:"button",class:"hy-events__scroll-right","aria-label":this.scrollRightLabel},t("hy-icon",{icon:"hy-icon-caret-right",size:16}))),this.showMore&&this.viewAllLabel&&this.viewAllUrl&&t("hy-cta-link",{"link-content":this.viewAllLabel,"sc-label":this.viewAllLabel,url:this.viewAllUrl,variant:n.linkList})))}get el(){return i(this)}static get watchers(){return{viewAllUrl:["watchUrlHandler"]}}};l.style=r;export{l as hy_events};
+import{r as e,h as t,g as i}from"./index-f84f2a7d.js";import{h as n}from"./utils-7438924c.js";const r=":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-events.no-events .hy-events__no-result-container{font-family:var(--main-font-family)}hy-events.no-events .hy-events--wrapper .hy-events--grid{padding-bottom:0}hy-events.no-events .hy-events__footer{display:none}.hy-events--wrapper .hy-events{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-events--wrapper .hy-events--grid{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:1.5rem;overflow-x:hidden;white-space:nowrap;scrollbar-width:none}@media (min-width: 48rem){.hy-events--wrapper .hy-events--grid{padding-bottom:14rem}}.hy-events--wrapper .hy-events--grid .hy-events__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:24px;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}@media (min-width: 48rem){.hy-events--wrapper .hy-events--grid .hy-events__content{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-events--wrapper .hy-events__footer{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:2rem}.hy-events--wrapper .hy-events__footer--grid{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-top:1.5rem}@media (min-width: 48rem){.hy-events--wrapper .hy-events__footer--grid{margin-top:-9.5rem}}.hy-events--wrapper .hy-events__scroll-buttons{display:none;margin-top:2rem}@media (min-width: 48rem){.hy-events--wrapper .hy-events__scroll-buttons{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events--wrapper .hy-events__scroll-buttons button{border:none;background:none;padding:0.5rem}.hy-events--wrapper .hy-events__scroll-buttons button:hover{cursor:pointer}.hy-events--wrapper .hy-events__scroll-buttons button:hover svg{scale:1.1}.hy-events--wrapper .hy-events__scroll-buttons button.is-hidden{display:none}.hy-events--wrapper .hy-events__scroll-buttons button.is-disabled{pointer-events:none}.hy-events--wrapper .hy-events__scroll-buttons button.is-disabled svg{fill:var(--link-disabled)}";let o=null;let s=null;let a=280+24;const l=class{constructor(t){e(this,t);this.styleGrid=false;this.showMore=false;this.viewAllUrl=undefined;this.viewAllLabel=undefined;this.scrollLeftLabel="Scroll list to left";this.scrollRightLabel="Scroll list to right";this.scrollable=true}componentDidLoad(){const e=this.el;const t=document.querySelector(".hy-events");const i=e.querySelector(".hy-events__scroll-left");const n=e.querySelector(".hy-events__scroll-right");if(this.styleGrid){t.addEventListener("scroll",(()=>{o=setTimeout((()=>{window.clearTimeout(o)}),250)}),false);i.addEventListener("click",(e=>{e.preventDefault();i.classList.add("is-disabled");t.scrollBy({top:0,left:-a,behavior:"smooth"});s=window.setTimeout((()=>{window.clearTimeout(s);i.classList.remove("is-disabled")}),250)}));n.addEventListener("click",(e=>{e.preventDefault();n.classList.add("is-disabled");t.scrollBy({top:0,left:+a,behavior:"smooth"});s=window.setTimeout((()=>{window.clearTimeout(s);n.classList.remove("is-disabled")}),250)}))}}watchUrlHandler(e,t){if(t!==e){this.viewAllUrl=e}}checkScrollHidden(e,t,i){const n=e.querySelector(".hy-events__content");if(e.scrollLeft===0){t.classList.add("is-hidden")}else{t.classList.remove("is-hidden")}if(e.scrollLeft+e.clientWidth>=n.scrollWidth-1){i.classList.add("is-hidden")}else{i.classList.remove("is-hidden")}}render(){const e=["hy-events",this.styleGrid?"hy-events--grid":""].join(" ");const i=["hy-events__footer",this.styleGrid?"hy-events__footer--grid":""].join(" ");return t("div",{class:"hy-events--wrapper"},t("div",{class:e},t("slot",null)),t("div",{class:i},this.scrollable&&this.styleGrid&&t("div",{class:"hy-events__scroll-buttons"},t("button",{type:"button",class:"hy-events__scroll-left","aria-label":this.scrollLeftLabel},t("hy-icon",{icon:"hy-icon-caret-left",size:16})),t("button",{type:"button",class:"hy-events__scroll-right","aria-label":this.scrollRightLabel},t("hy-icon",{icon:"hy-icon-caret-right",size:16}))),this.showMore&&this.viewAllLabel&&this.viewAllUrl&&t("hy-cta-link",{"link-content":this.viewAllLabel,"sc-label":this.viewAllLabel,url:this.viewAllUrl,variant:n.linkList})))}get el(){return i(this)}static get watchers(){return{viewAllUrl:["watchUrlHandler"]}}};l.style=r;export{l as hy_events};
 //# sourceMappingURL=hy-events.entry.js.map

package/dist/huds-lib/hy-filter-group_6.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as i,h as e,H as t}from"./index-f84f2a7d.js";import{C as r,n as a}from"./utils-7438924c.js";const l=":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-filter-group{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:16px}.hy-filter-group__listing{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:0;padding:0}.hy-filter-group__label{font-size:0.75rem;line-height:16px;border-radius:2px;color:var(--grayscale-dark);font-family:var(--main-font-family);font-weight:normal;letter-spacing:-0.2px;margin:8px 4px 8px 0;padding:4px 0}@media (min-width: 30rem){.hy-filter-group__label{font-size:0.875rem;line-height:16px;letter-spacing:-0.3px;padding:6px 0}}.hy-filter-group__button{font-size:0.75rem;line-height:16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-background-box);border-radius:2px;border:0;color:var(--grayscale-dark);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:normal;letter-spacing:-0.2px;margin:8px 4px;padding:4px 6px}@media (min-width: 30rem){.hy-filter-group__button{font-size:0.875rem;line-height:16px;letter-spacing:-0.3px;padding:6px 8px}}.hy-filter-group__button:hover{cursor:pointer}.hy-filter-group__button-icon{margin-left:6px}@media (min-width: 30rem){.hy-filter-group__button-icon{margin-left:8px}}.hy-filter-group__button-icon svg{pointer-events:none}@media (min-width: 30rem){.hy-filter-group__button-icon svg{height:12px;width:12px}}.hy-filter-group__divider{font-size:0.75rem;line-height:16px;color:var(--grayscale-dark);font-family:var(--main-font-family);margin:4px 6px}@media (min-width: 30rem){.hy-filter-group__divider{font-size:0.875rem;line-height:16px;letter-spacing:-0.3px}}";const n=class{constructor(e){i(this,e);this.filterGroupLabel=undefined;this.filterGroupFilters=undefined}arrayDataWatcher(i){if(typeof i==="string"){this._filterGroupFilters=JSON.parse(i)}else{this._filterGroupFilters=i}}componentWillLoad(){this.arrayDataWatcher(this.filterGroupFilters)}handleFilterDeselect(i){console.log(i)}render(){return e(t,{class:"hy-filter-group"},e("ul",{class:"hy-filter-group__listing"},e("li",null,e("h3",{class:"hy-filter-group__label"},this.filterGroupLabel)),this._filterGroupFilters.map((({id:i,label:t})=>e("hy-filter-group-item",{"filter-group-item-id":i,"filter-group-item-label":t,onClick:()=>this.handleFilterDeselect(i)})))))}static get watchers(){return{filterGroupFilters:["arrayDataWatcher"]}}};n.style=l;const o=class{constructor(e){i(this,e);this.filterGroupItemId=undefined;this.filterGroupItemLabel=undefined}render(){return e("li",{class:"hy-filter-group__filter"},e("button",{type:"button",class:"hy-filter-group__button","aria-label":`Deselect ${this.filterGroupItemLabel}`},this.filterGroupItemLabel,e("hy-icon",{class:"hy-filter-group__button-icon",icon:"hy-icon-remove",size:10,"aria-hidden":"true",fill:r.grey_dark})),e("slot",null))}};const s=":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-filter__list-type{display:none}@media (min-width: 60rem){.hy-filter__list-type{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--main-font-family)}}@media (min-width: 60rem){.hy-filter__list-type span{font-size:0.875rem;line-height:18px;font-weight:600;color:var(--grayscale-black);letter-spacing:-0.5px;text-align:right}}@media (min-width: 1601px){.hy-filter__list-type span{font-size:1rem;line-height:20px}}.hy-filter__list-type__list{background:var(--grayscale-background-box);border:none;margin:0 8px;padding:10px}.hy-filter__list-type__list svg{background-color:var(--grayscale-background-box);fill:var(--brand-main-light)}.hy-filter__list-type__list.is-active{background:white;border:black 1px solid}.hy-filter__list-type__list.is-active svg{background-color:var(--grayscale-white);fill:var(--grayscale-black)}.hy-filter__list-type__list:hover{cursor:pointer}.hy-filter__list-type__grid{background:var(--grayscale-background-box);border:none;padding:10px}.hy-filter__list-type__grid svg{background-color:var(--grayscale-background-box);fill:var(--brand-main-light)}.hy-filter__list-type__grid.is-active{background:white;border:black 1px solid}.hy-filter__list-type__grid.is-active svg{background-color:var(--grayscale-white);fill:var(--grayscale-black)}.hy-filter__list-type__grid:hover{cursor:pointer}";const d=class{constructor(e){i(this,e);this.filterLabel=undefined;this.filterValue=undefined}render(){return e("div",{class:"hy-filter__list-type"},e("span",null,this.filterLabel),e("button",{type:"button",class:{"hy-filter-item":true,"hy-filter__list-type__list":true,"is-active":this.filterValue==a.list},"aria-label":`${this.filterLabel}--list`},e("hy-icon",{class:"hy-filter-group__button-icon",icon:"hy-icon-list-style-list",size:16,"aria-hidden":"true"})),e("button",{type:"button",class:{"hy-filter-item":true,"hy-filter__list-type__grid":true,"is-active":this.filterValue==a.grid},"aria-label":`${this.filterLabel}--grid`},e("hy-icon",{class:"hy-filter-group__button-icon",icon:"hy-icon-list-style-grid",size:16,"aria-hidden":"true"})))}};d.style=s;const g=":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-filter-visibility-tool{font-size:0.875rem;line-height:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:0;color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.35px;padding:0;margin-right:1rem}@media (min-width: 30rem){.hy-filter-visibility-tool{font-size:1rem;line-height:20px;letter-spacing:-0.5px}}.hy-filter-visibility-tool:hover{color:var(--brand-main);cursor:pointer}.hy-filter-visibility-tool:hover svg{fill:var(--brand-main)}.hy-filter-visibility-tool:focus{color:var(--brand-main);outline-offset:1px;outline:2px solid var(--brand-main)}.hy-filter-visibility-tool:focus svg{fill:var(--brand-main)}.hy-filter-visibility-tool__icon{-ms-flex-negative:0;flex-shrink:0;margin-right:6px}.hy-filter-visibility-tool__icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-filter-visibility-tool__icon svg{height:16px;width:16px}}";const b=class{constructor(e){i(this,e);this.filterVisibilityToolType=undefined}render(){switch(this.filterVisibilityToolType){case"toggle":return e(t,null,e("hy-filter-visibility-tool-toggle",null));case"reset":return e(t,null,e("hy-filter-visibility-tool-reset",null))}}};b.style=g;const c=class{constructor(e){i(this,e)}render(){return e("button",{class:"hy-filter-visibility-tool hy-filter-visibility-tool--reset",type:"button"},e("hy-icon",{class:"hy-filter-visibility-tool__icon",icon:"hy-icon-remove",size:14,"aria-hidden":"true"}),"Reset filters")}};const y=class{constructor(e){i(this,e)}render(){return e(t,null,e("button",{class:"hy-filter-visibility-tool hy-filter-visibility-tool--show-more",type:"button"},e("hy-icon",{class:"hy-filter-visibility-tool__icon",icon:"hy-icon-plus",size:12,"aria-hidden":"true"}),"Show more filters"),e("button",{class:"hy-filter-visibility-tool hy-filter-visibility-tool--show-less",type:"button"},e("hy-icon",{class:"hy-filter-visibility-tool__icon",icon:"hy-icon-minus",size:12,"aria-hidden":"true"}),"Show less filters"))}};export{n as hy_filter_group,o as hy_filter_group_item,d as hy_filter_list_type,b as hy_filter_visibility_tool,c as hy_filter_visibility_tool_reset,y as hy_filter_visibility_tool_toggle};
2	+ //# sourceMappingURL=hy-filter-group_6.entry.js.map

package/dist/huds-lib/hy-filter-group_6.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["hyFilterGroupCss","HyFilterGroup","arrayDataWatcher","newValue","this","_filterGroupFilters","JSON","parse","componentWillLoad","filterGroupFilters","handleFilterDeselect","id","console","log","render","h","Host","class","filterGroupLabel","map","label","onClick","HyFilterGroupItem","type","filterGroupItemLabel","icon","size","fill","ColorVariant","grey_dark","hyFilterListTypeCss","HyFilterListType","filterLabel","filterValue","ListStyleVariants","list","grid","hyFilterVisibilityToolCss","HyFilterVisibilityTool","filterVisibilityToolType","HyFilterVisibilityToolReset","HyFilterVisibilityToolToggle"],"sources":["./src/components/hy-filter-group/hy-filter-group.scss?tag=hy-filter-group","./src/components/hy-filter-group/hy-filter-group.tsx","./src/components/hy-filter-group/hy-filter-group.item.tsx","./src/components/hy-filter-list-type/hy-filter-list-type.scss?tag=hy-filter-list-type","./src/components/hy-filter-list-type/hy-filter-list-type.tsx","./src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.scss?tag=hy-filter-visibility-tool","./src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.tsx","./src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.reset.tsx","./src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.reset.toggle.tsx"],"sourcesContent":[".hy-filter-group {\n align-items: center;\n display: inline-flex;\n flex-wrap: wrap;\n margin-right: 16px;\n}\n\n.hy-filter-group__listing {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.hy-filter-group__label {\n @include font-size(12px, 16px);\n border-radius: 2px;\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n font-weight: normal;\n letter-spacing: -0.2px;\n margin: 8px 4px 8px 0;\n padding: 4px 0;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 16px);\n letter-spacing: -0.3px;\n padding: 6px 0;\n }\n}\n\n.hy-filter-group__button {\n @include font-size(12px, 16px);\n align-items: center;\n background-color: var(--grayscale-background-box);\n border-radius: 2px;\n border: 0;\n color: var(--grayscale-dark);\n display: inline-flex;\n font-family: var(--main-font-family);\n font-weight: normal;\n letter-spacing: -0.2px;\n margin: 8px 4px;\n padding: 4px 6px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 16px);\n letter-spacing: -0.3px;\n padding: 6px 8px;\n }\n\n &:hover {\n cursor: pointer;\n }\n}\n\n.hy-filter-group__button-icon {\n margin-left: 6px;\n\n @include breakpoint($narrow) {\n margin-left: 8px;\n }\n\n svg {\n pointer-events: none;\n\n @include breakpoint($narrow) {\n height: 12px;\n width: 12px;\n }\n }\n}\n\n.hy-filter-group__divider {\n @include font-size(12px, 16px);\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n margin: 4px 6px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 16px);\n letter-spacing: -0.3px;\n }\n}\n","import {Component, Host, h, Prop, Watch} from \"@stencil/core\";\n\nexport interface IFilterGroupFilter {\n id: string | number;\n label: string;\n}\n\n@Component({\n tag: \"hy-filter-group\",\n styleUrl: \"hy-filter-group.scss\",\n shadow: false,\n})\nexport class HyFilterGroup {\n private _filterGroupFilters: IFilterGroupFilter[];\n @Prop() filterGroupLabel: string;\n @Prop() filterGroupFilters: IFilterGroupFilter[] | string;\n\n @Watch(\"filterGroupFilters\")\n arrayDataWatcher(newValue: IFilterGroupFilter[] | string) {\n if (typeof newValue === \"string\") {\n this._filterGroupFilters = JSON.parse(newValue);\n } else {\n this._filterGroupFilters = newValue;\n }\n }\n\n componentWillLoad() {\n this.arrayDataWatcher(this.filterGroupFilters);\n }\n\n // TODO: Finish handleFilterDeselect functionality with real data.\n handleFilterDeselect(id) {\n console.log(id);\n }\n\n render() {\n return (\n <Host class=\"hy-filter-group\">\n <ul class=\"hy-filter-group__listing\">\n <li>\n <h3 class=\"hy-filter-group__label\">{this.filterGroupLabel}</h3>\n </li>\n {this._filterGroupFilters.map(({id, label}) => (\n <hy-filter-group-item\n filter-group-item-id={id}\n filter-group-item-label={label}\n onClick={() => this.handleFilterDeselect(id)}\n ></hy-filter-group-item>\n ))}\n </ul>\n </Host>\n );\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {ColorVariant} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-filter-group-item\",\n shadow: false,\n})\nexport class HyFilterGroupItem {\n @Prop() filterGroupItemId: string | number;\n @Prop() filterGroupItemLabel: string;\n\n render() {\n return (\n <li class=\"hy-filter-group__filter\">\n <button type=\"button\" class=\"hy-filter-group__button\" aria-label={`Deselect ${this.filterGroupItemLabel}`}>\n {this.filterGroupItemLabel}\n <hy-icon\n class=\"hy-filter-group__button-icon\"\n icon={\"hy-icon-remove\"}\n size={10}\n aria-hidden=\"true\"\n fill={ColorVariant.grey_dark}\n />\n </button>\n <slot />\n </li>\n );\n }\n}\n",":host {\n display: block;\n}\n\n.hy-filter__list-type {\n display: none;\n\n @include breakpoint($wide) {\n display: flex;\n align-items: center;\n font-family: var(--main-font-family);\n }\n\n span {\n @include breakpoint($wide) {\n @include font-size(14px, 18px);\n @include font-weight($semibold);\n color: var(--grayscale-black);\n letter-spacing: -0.5px;\n text-align: right;\n }\n @include breakpoint($xlarge) {\n @include font-size(16px, 20px);\n }\n }\n\n &__list {\n background: var(--grayscale-background-box);\n border: none;\n margin: 0 8px;\n padding: 10px;\n\n svg {\n background-color: var(--grayscale-background-box);\n fill: var(--brand-main-light);\n }\n &.is-active {\n background: white;\n border: black 1px solid;\n\n svg {\n background-color: var(--grayscale-white);\n fill: var(--grayscale-black);\n }\n }\n }\n &__list:hover {\n cursor: pointer;\n }\n\n &__grid {\n background: var(--grayscale-background-box);\n border: none;\n padding: 10px;\n\n svg {\n background-color: var(--grayscale-background-box);\n fill: var(--brand-main-light);\n }\n\n &.is-active {\n background: white;\n border: black 1px solid;\n\n svg {\n background-color: var(--grayscale-white);\n fill: var(--grayscale-black);\n }\n }\n }\n\n &__grid:hover {\n cursor: pointer;\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {ListStyleVariants} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-filter-list-type\",\n styleUrl: \"hy-filter-list-type.scss\",\n shadow: false,\n})\nexport class HyFilterListType {\n @Prop() filterLabel?: string;\n @Prop() filterValue?: string;\n\n render() {\n return (\n <div class=\"hy-filter__list-type\">\n <span>{this.filterLabel}</span>\n <button\n type=\"button\"\n class={{\n \"hy-filter-item\": true,\n \"hy-filter__list-type__list\": true,\n \"is-active\": this.filterValue == ListStyleVariants.list,\n }}\n aria-label={`${this.filterLabel}--list`}\n >\n <hy-icon class=\"hy-filter-group__button-icon\" icon={\"hy-icon-list-style-list\"} size={16} aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class={{\n \"hy-filter-item\": true,\n \"hy-filter__list-type__grid\": true,\n \"is-active\": this.filterValue == ListStyleVariants.grid,\n }}\n aria-label={`${this.filterLabel}--grid`}\n >\n <hy-icon class=\"hy-filter-group__button-icon\" icon={\"hy-icon-list-style-grid\"} size={16} aria-hidden=\"true\" />\n </button>\n </div>\n );\n }\n}\n",".hy-filter-visibility-tool {\n @include font-size(14px, 20px);\n align-items: center;\n background-color: transparent;\n border: 0;\n color: var(--link-blue);\n display: inline-flex;\n font-family: var(--main-font-family);\n font-weight: $semibold;\n letter-spacing: -0.35px;\n padding: 0;\n margin-right: 1rem;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n }\n\n &:hover {\n color: var(--brand-main);\n cursor: pointer;\n\n svg {\n fill: var(--brand-main);\n }\n }\n\n &:focus {\n color: var(--brand-main);\n outline-offset: 1px;\n outline: 2px solid var(--brand-main);\n\n svg {\n fill: var(--brand-main);\n }\n }\n}\n\n.hy-filter-visibility-tool__icon {\n flex-shrink: 0;\n margin-right: 6px;\n\n svg {\n fill: var(--link-blue);\n\n @include breakpoint($narrow) {\n height: 16px;\n width: 16px;\n }\n }\n}\n","import {Component, Host, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-filter-visibility-tool\",\n styleUrl: \"hy-filter-visibility-tool.scss\",\n shadow: false,\n})\nexport class HyFilterVisibilityTool {\n @Prop() filterVisibilityToolType: \"toggle\" | \"reset\";\n\n render() {\n switch (this.filterVisibilityToolType) {\n case \"toggle\":\n return (\n <Host>\n <hy-filter-visibility-tool-toggle />\n </Host>\n );\n\n case \"reset\":\n return (\n <Host>\n <hy-filter-visibility-tool-reset />\n </Host>\n );\n }\n }\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-filter-visibility-tool-reset\",\n shadow: false,\n})\nexport class HyFilterVisibilityToolReset {\n render() {\n return (\n <button class=\"hy-filter-visibility-tool hy-filter-visibility-tool--reset\" type=\"button\">\n <hy-icon class=\"hy-filter-visibility-tool__icon\" icon={\"hy-icon-remove\"} size={14} aria-hidden=\"true\" />\n Reset filters\n </button>\n );\n }\n}\n","import {Component, h, Host} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-filter-visibility-tool-toggle\",\n shadow: false,\n})\nexport class HyFilterVisibilityToolToggle {\n render() {\n return (\n <Host>\n <button class=\"hy-filter-visibility-tool hy-filter-visibility-tool--show-more\" type=\"button\">\n <hy-icon class=\"hy-filter-visibility-tool__icon\" icon={\"hy-icon-plus\"} size={12} aria-hidden=\"true\" />\n Show more filters\n </button>\n <button class=\"hy-filter-visibility-tool hy-filter-visibility-tool--show-less\" type=\"button\">\n <hy-icon class=\"hy-filter-visibility-tool__icon\" icon={\"hy-icon-minus\"} size={12} aria-hidden=\"true\" />\n Show less filters\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"qGAAA,MAAMA,EAAmB,i+F,MCYZC,EAAa,M,2FAMxBC,iBAAiBC,GACf,UAAWA,IAAa,SAAU,CAChCC,KAAKC,oBAAsBC,KAAKC,MAAMJ,E,KACjC,CACLC,KAAKC,oBAAsBF,C,EAI/BK,oBACEJ,KAAKF,iBAAiBE,KAAKK,mB,CAI7BC,qBAAqBC,GACnBC,QAAQC,IAAIF,E,CAGdG,SACE,OACEC,EAACC,EAAI,CAACC,MAAM,mBACVF,EAAA,MAAIE,MAAM,4BACRF,EAAA,UACEA,EAAA,MAAIE,MAAM,0BAA0Bb,KAAKc,mBAE1Cd,KAAKC,oBAAoBc,KAAI,EAAER,KAAIS,WAClCL,EAAA,+CACwBJ,EAAE,0BACCS,EACzBC,QAAS,IAAMjB,KAAKM,qBAAqBC,Q,yFCvC1CW,EAAiB,M,8FAI5BR,SACE,OACEC,EAAA,MAAIE,MAAM,2BACRF,EAAA,UAAQQ,KAAK,SAASN,MAAM,0BAAyB,aAAa,YAAYb,KAAKoB,wBAChFpB,KAAKoB,qBACNT,EAAA,WACEE,MAAM,+BACNQ,KAAM,iBACNC,KAAM,GAAE,cACI,OACZC,KAAMC,EAAaC,aAGvBd,EAAA,a,GCxBR,MAAMe,EAAsB,6iF,MCQfC,EAAgB,M,+EAI3BjB,SACE,OACEC,EAAA,OAAKE,MAAM,wBACTF,EAAA,YAAOX,KAAK4B,aACZjB,EAAA,UACEQ,KAAK,SACLN,MAAO,CACL,iBAAkB,KAClB,6BAA8B,KAC9B,YAAab,KAAK6B,aAAeC,EAAkBC,MACpD,aACW,GAAG/B,KAAK4B,qBAEpBjB,EAAA,WAASE,MAAM,+BAA+BQ,KAAM,0BAA2BC,KAAM,GAAE,cAAc,UAEvGX,EAAA,UACEQ,KAAK,SACLN,MAAO,CACL,iBAAkB,KAClB,6BAA8B,KAC9B,YAAab,KAAK6B,aAAeC,EAAkBE,MACpD,aACW,GAAGhC,KAAK4B,qBAEpBjB,EAAA,WAASE,MAAM,+BAA+BQ,KAAM,0BAA2BC,KAAM,GAAE,cAAc,U,aCpC/G,MAAMW,EAA4B,mpE,MCOrBC,EAAsB,M,iEAGjCxB,SACE,OAAQV,KAAKmC,0BACX,IAAK,SACH,OACExB,EAACC,EAAI,KACHD,EAAA,0CAIN,IAAK,QACH,OACEA,EAACC,EAAI,KACHD,EAAA,yC,mBChBCyB,EAA2B,M,yBACtC1B,SACE,OACEC,EAAA,UAAQE,MAAM,6DAA6DM,KAAK,UAC9ER,EAAA,WAASE,MAAM,kCAAkCQ,KAAM,iBAAkBC,KAAM,GAAE,cAAc,SAAS,gB,SCJnGe,EAA4B,M,yBACvC3B,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,UAAQE,MAAM,iEAAiEM,KAAK,UAClFR,EAAA,WAASE,MAAM,kCAAkCQ,KAAM,eAAgBC,KAAM,GAAE,cAAc,SAAS,qBAGxGX,EAAA,UAAQE,MAAM,iEAAiEM,KAAK,UAClFR,EAAA,WAASE,MAAM,kCAAkCQ,KAAM,gBAAiBC,KAAM,GAAE,cAAc,SAAS,qB"}

package/dist/huds-lib/hy-general-list_2.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as i,H as t,g as a}from"./index-f84f2a7d.js";import{G as r}from"./utils-7438924c.js";import{j as l}from"./globalScript-5a4b7abf.js";const n=":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-general-list{list-style:none;margin:0;padding:0}.hy-general-list--style-grid{display:-webkit-box;display:-ms-flexbox;display:flex;display:grid;gap:32px 0}@media screen and (min-width: 768px){.hy-general-list--style-grid{grid-template-columns:repeat(2, 1fr);gap:32px 24px}}@media screen and (min-width: 1024px){.hy-general-list--style-grid{grid-template-columns:repeat(3, 1fr)}}@media screen and (min-width: 1920px){.hy-general-list--style-grid{gap:32px}}.hy-general-list--style-grid li{background-color:var(--grayscale-background-box);width:100%;height:auto}";const s=class{constructor(i){e(this,i);this.type=r.list;this.blank=true;this.dataItems=undefined;this.truncateDescription=true;this.truncateLimit=140;this.hasSidebar=false}async componentWillLoad(){this._dataItems=await l(this.dataItems);const e=this.el.closest(".hy-main");if(e){if(e.classList.contains("with-sidebar")){this.hasSidebar=true}}}async watchPropHandler(e,i){if(e!==i){this._dataItems=await l(this.dataItems)}}render(){const e=["hy-general-list",this.hasSidebar?"hy-general-list--with-sidebar":"",`hy-general-list--style-${this.type}`].join(" ");let a=this._dataItems;if(typeof this._dataItems==="object"){a=Object.values(this._dataItems)}function r(e,i){return e.length>i?e.substr(0,i-1)+"...":e}return i(t,null,i("ul",{class:e},a&&a.map((e=>i("li",null,i("hy-general-list-item",{"has-sidebar":this.hasSidebar,target:this.blank,"data-location":e.url,description:this.truncateDescription?r(e.description,this.truncateLimit):e.description,id:e.id,imageAlt:e.imageAlt,imageUrl:e.imageUrl,"item-title":e.title,label:e.label,"sub-label":e.subLabel,tag:e.tag,date:e.date,type:e.type,url:e.url,"list-style":this.type}))))),i("hy-box",{mb:"1.75, 1.75, 2, 2.5"}))}get el(){return a(this)}static get watchers(){return{dataItems:["watchPropHandler"]}}};s.style=n;const o=':root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block;height:100%}.hy-general-list-item{font-family:var(--main-font-family);margin-bottom:1rem;height:100%}.hy-general-list-item--style-grid .hy-general-list-item__link{height:100%}@media (min-width: 30rem){.hy-general-list-item--style-grid .hy-general-list-item__link{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.hy-general-list-item--style-grid .hy-general-list-item__image-container{border:1px solid var(--grayscale-light);max-width:100%}@media (max-width: 479px){.hy-general-list-item--style-grid .hy-general-list-item__image-container{display:-webkit-box;display:-ms-flexbox;display:flex}}@media (min-width: 60rem){.hy-general-list-item--style-grid .hy-general-list-item__text-container{padding:12px 12px 32px 12px}}@media (min-width: 75.0625rem){.hy-general-list-item--style-grid .hy-general-list-item__text-container{padding:12px 12px 32px 12px}}.hy-genenral-list-item__meta{font-size:0.75rem;line-height:14px;font-weight:600;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:-0.1px;text-transform:uppercase;margin:9px 0}.hy-genenral-list-item__meta__date{font-weight:400;margin-left:4px}.hy-general-list-item__link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;text-decoration:none}@media (min-width: 30rem){.hy-general-list-item__link{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-general-list-item__link:hover{cursor:pointer}.hy-general-list-item__link:hover .hy-general-list-item__type span,.hy-general-list-item__link:focus .hy-general-list-item__type span{background-color:var(--brand-main)}.hy-general-list-item__link:hover .hy-general-list-item__title,.hy-general-list-item__link:focus .hy-general-list-item__title{color:var(--brand-main);text-decoration:underline}.hy-general-list-item__image-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;margin:0;position:relative;width:100%}@media (max-width: 479px){.hy-general-list-item__image-container{display:none}}@media (min-width: 30rem){.hy-general-list-item__image-container{max-width:35.7%}}@media (min-width: 60rem){.hy-general-list-item__image-container{max-width:23.13%}}@media (min-width: 75.0625rem){.hy-general-list-item__image-container{max-width:23.03%}}.hy-general-list-item__image-container:before{content:"";display:block;padding-top:var(--aspectRatio)}.hy-general-list-item__image-container img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-general-list-item__image{background-color:#ececec;width:100%;height:100%}.hy-general-list-item__type{background-color:var(--grayscale-background-box);padding-top:16px;z-index:10}@media (min-width: 30rem){.hy-general-list-item__type{background-color:transparent;left:-8px;padding-top:0;position:absolute;top:16px}}.hy-general-list-item__type__major{font-size:0.75rem;line-height:14px;font-weight:700;background-color:var(--grayscale-black);color:var(--grayscale-white);letter-spacing:-0.1px;padding:5px 8px;text-transform:uppercase;-ms-flex-item-align:baseline;align-self:baseline;margin-left:-8px}@media (min-width: 30rem){.hy-general-list-item__type__major{margin-left:0}}.hy-general-list-item__type__sub{font-size:0.75rem;line-height:14px;background-color:var(--grayscale-black);color:var(--grayscale-white);font-family:var(--main-font-family);letter-spacing:-0.1px;padding:5px 8px;margin-left:-8px}.hy-general-list-item__text-container{background-color:var(--grayscale-background-box);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:16px 12px}@media (min-width: 60rem){.hy-general-list-item__text-container{padding:14px 32px 24px 24px}}@media (min-width: 75.0625rem){.hy-general-list-item__text-container{padding:20px 104px 32px 32px}}.hy-general-list-item__title{font-size:1.125rem;line-height:22px;font-weight:700;color:var(--brand-main-nearly-black);letter-spacing:-0.45px;margin-bottom:8px;margin-top:0}@media (min-width: 1601px){.hy-general-list-item__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-general-list-item__title__large{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}.hy-general-list-item__description{font-size:0.9375rem;line-height:20px;color:var(--grayscale-dark);display:none;letter-spacing:-0.09px;margin:0}@media (min-width: 30rem){.hy-general-list-item__description{font-size:0.875rem;line-height:18px;display:block;letter-spacing:-0.08px}}@media (min-width: 1601px){.hy-general-list-item__description{font-size:0.875rem;line-height:20px}}@media (min-width: 75.0625rem){.hy-general-list-item__description__large{font-size:0.875rem;line-height:20px}}';const d=class{constructor(i){e(this,i);this.hasSidebar=true;this.description=undefined;this.imageAlt="";this.imageUrl=null;this.disableLazy=false;this.itemTitle=undefined;this.label=undefined;this.subLabel="";this.date="";this.tag="";this.type=undefined;this.url=undefined;this.listStyle=undefined;this.target=true}render(){const e=["hy-general-list-item",`hy-general-list-item--style-${this.listStyle}`].join(" ");const t=["hy-general-list-item__text-container"].join(" ");const a=["hy-general-list-item__image-container"].join(" ");const r=this.hasSidebar?"common":"large";const l=["hy-general-list-item__title",`hy-general-list-item__title__${r}`].join(" ");const n=["hy-general-list-item__description",`hy-general-list-item__description__${r}`].join(" ");const s=16;const o=10;const d=o/s*100;const m={"--aspectRatio":`${d}%`};return i("article",{class:e},i("a",{class:"hy-general-list-item__link",href:this.url,target:this.target?"_blank":"_self"},this.type&&i("div",{class:"hy-general-list-item__type"},i("span",{class:"hy-general-list-item__type__major"},this.label),i("span",{class:"hy-general-list-item__type__sub"},this.subLabel)),this.imageUrl&&i("figure",{class:a,style:m},i("img",{loading:this.disableLazy?"eager":"lazy",alt:this.imageAlt,class:"hy-general-list-item__image",src:this.imageUrl})),i("div",{class:t},(this.tag\|\|this.date)&&i("span",{class:"hy-genenral-list-item__meta"},this.tag,i("span",{class:"hy-genenral-list-item__meta__date"},this.tag&&"\|"," ",this.date)),i("h3",{class:l},this.itemTitle),i("p",{class:n},this.description))))}get el(){return a(this)}};d.style=o;export{s as hy_general_list,d as hy_general_list_item};
2	+ //# sourceMappingURL=hy-general-list_2.entry.js.map

package/dist/huds-lib/hy-general-list_2.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["hyGeneralListCss","HyGeneralList","GeneralListTypes","list","async","this","_dataItems","jsonParserWorker","dataItems","hyMainDiv","el","closest","classList","contains","hasSidebar","newValue","oldValue","render","classAttributes","type","join","listData","Object","values","truncate","str","n","length","substr","h","Host","class","map","item","target","blank","url","description","truncateDescription","truncateLimit","id","imageAlt","imageUrl","title","label","subLabel","tag","date","mb","hyGeneralListItemCss","HyGeneralListItem","listStyle","contentClassAttributes","imageClassAttributes","sidebarClass","titleClassAttributes","descriptionClassAttributes","aspectRatioWidth","aspectRatioHeight","aspect","aspectRatio","href","style","loading","disableLazy","alt","src","itemTitle"],"sources":["./src/components/hy-general-list/hy-general-list.scss?tag=hy-general-list","./src/components/hy-general-list/hy-general-list.tsx","./src/components/hy-general-list-item/hy-general-list-item.scss?tag=hy-general-list-item","./src/components/hy-general-list-item/hy-general-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-general-list {\n list-style: none;\n margin: 0;\n padding: 0;\n\n &--style-grid {\n display: flex;\n display: grid;\n gap: 32px 0;\n\n @media screen and (min-width: 768px) {\n grid-template-columns: repeat(2, 1fr);\n gap: 32px 24px;\n }\n\n @media screen and (min-width: 1024px) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @media screen and (min-width: 1920px) {\n gap: 32px;\n }\n\n li {\n background-color: var(--grayscale-background-box);\n width: 100%;\n height: auto;\n }\n }\n}\n","export interface ListItemValue {\n description: string;\n id: string;\n imageAlt: string;\n imageUrl: string;\n label: string;\n subLabel: string;\n date: string;\n tag: string;\n title: string;\n type: string;\n url: string;\n target: boolean;\n}\n\nimport {Component, Element, h, Prop, State, Host, Watch} from \"@stencil/core\";\nimport {GeneralListTypes} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n tag: \"hy-general-list\",\n styleUrl: \"hy-general-list.scss\",\n shadow: false,\n})\nexport class HyGeneralList {\n @Prop() type: GeneralListTypes = GeneralListTypes.list;\n @Prop() blank: boolean = true;\n @Prop() dataItems: ListItemValue[] | string;\n @Prop() truncateDescription: boolean = true;\n @Prop() truncateLimit: number = 140;\n private _dataItems: ListItemValue[];\n @Element() el: HTMLElement;\n @State() hasSidebar: boolean = false;\n\n async componentWillLoad() {\n this._dataItems = await jsonParserWorker(this.dataItems);\n\n const hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.hasSidebar = true;\n }\n }\n }\n\n @Watch(\"dataItems\")\n async watchPropHandler(newValue: string | number, oldValue: string | number) {\n if (newValue !== oldValue) {\n this._dataItems = await jsonParserWorker(this.dataItems);\n }\n }\n\n render() {\n const classAttributes = [\n \"hy-general-list\",\n this.hasSidebar ? \"hy-general-list--with-sidebar\" : \"\",\n `hy-general-list--style-${this.type}`,\n ].join(\" \");\n\n let listData = this._dataItems;\n if (typeof this._dataItems === \"object\") {\n listData = Object.values(this._dataItems);\n }\n\n function truncate(str, n) {\n return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n }\n\n return (\n <Host>\n <ul class={classAttributes}>\n {listData &&\n listData.map((item) => (\n <li>\n <hy-general-list-item\n has-sidebar={this.hasSidebar}\n target={this.blank}\n data-location={item.url}\n description={\n this.truncateDescription ? truncate(item.description, this.truncateLimit) : item.description\n }\n id={item.id}\n imageAlt={item.imageAlt}\n imageUrl={item.imageUrl}\n item-title={item.title}\n label={item.label}\n sub-label={item.subLabel}\n tag={item.tag}\n date={item.date}\n type={item.type}\n url={item.url}\n list-style={this.type}\n ></hy-general-list-item>\n </li>\n ))}\n </ul>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n",":host {\n display: block;\n height: 100%;\n}\n\n.hy-general-list-item {\n font-family: var(--main-font-family);\n margin-bottom: 1rem;\n height: 100%;\n\n &--style-grid {\n .hy-general-list-item__link {\n height: 100%;\n\n @include breakpoint($narrow) {\n flex-direction: column;\n }\n }\n\n .hy-general-list-item__image-container {\n border: 1px solid var(--grayscale-light);\n max-width: 100%;\n\n @include breakpoint(max-width 479px) {\n display: flex;\n }\n }\n\n .hy-general-list-item__text-container {\n @include breakpoint($wide) {\n padding: 12px 12px 32px 12px;\n }\n @include breakpoint($extrawide) {\n padding: 12px 12px 32px 12px;\n }\n }\n }\n}\n\n.hy-genenral-list-item__meta {\n @include font-size(12px, 14px);\n @include font-weight($semibold);\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n letter-spacing: -0.1px;\n text-transform: uppercase;\n margin: 9px 0;\n\n &__date {\n @include font-weight($regular);\n margin-left: 4px;\n }\n}\n\n.hy-general-list-item__link {\n display: flex;\n flex-direction: column;\n position: relative;\n text-decoration: none;\n\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus {\n .hy-general-list-item__type span {\n background-color: var(--brand-main);\n }\n\n .hy-general-list-item__title {\n color: var(--brand-main);\n text-decoration: underline;\n }\n }\n}\n\n.hy-general-list-item__image-container {\n display: flex;\n justify-content: stretch;\n margin: 0;\n position: relative;\n width: 100%;\n\n @include breakpoint(max-width 479px) {\n display: none;\n }\n\n @include breakpoint($narrow) {\n max-width: 35.7%;\n }\n\n @include breakpoint($wide) {\n max-width: 23.13%;\n }\n\n @include breakpoint($extrawide) {\n max-width: 23.03%;\n }\n\n &:before {\n content: \"\";\n display: block;\n padding-top: var(--aspectRatio);\n }\n\n img {\n bottom: 0;\n height: 100%;\n left: 0;\n object-fit: cover;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n }\n}\n\n.hy-general-list-item__image {\n background-color: #ececec;\n width: 100%;\n height: 100%;\n}\n\n.hy-general-list-item__type {\n background-color: var(--grayscale-background-box);\n padding-top: 16px;\n z-index: 10;\n\n @include breakpoint($narrow) {\n background-color: transparent;\n left: -8px;\n padding-top: 0;\n position: absolute;\n top: 16px;\n }\n\n &__major {\n @include font-size(12px, 14px);\n @include font-weight($bold);\n background-color: var(--grayscale-black);\n color: var(--grayscale-white);\n letter-spacing: -0.1px;\n padding: 5px 8px;\n text-transform: uppercase;\n align-self: baseline;\n margin-left: -8px;\n\n @include breakpoint($narrow) {\n margin-left: 0;\n }\n }\n\n &__sub {\n @include font-size(12px, 14px);\n background-color: var(--grayscale-black);\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n letter-spacing: -0.1px;\n padding: 5px 8px;\n margin-left: -8px;\n }\n}\n\n.hy-general-list-item__text-container {\n background-color: var(--grayscale-background-box);\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n padding: 16px 12px;\n\n @include breakpoint($wide) {\n padding: 14px 32px 24px 24px;\n }\n\n @include breakpoint($extrawide) {\n padding: 20px 104px 32px 32px;\n }\n}\n\n.hy-general-list-item__title {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n letter-spacing: -0.45px;\n margin-bottom: 8px;\n margin-top: 0;\n\n @include breakpoint($xlarge) {\n @include font-size(20px, 24px);\n letter-spacing: -0.5px;\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(20px, 24px);\n letter-spacing: -0.5px;\n }\n }\n}\n\n.hy-general-list-item__description {\n @include font-size(15px, 20px);\n color: var(--grayscale-dark);\n display: none;\n letter-spacing: -0.09px;\n margin: 0;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n display: block;\n letter-spacing: -0.08px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 20px);\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(14px, 20px);\n }\n }\n}\n","import {Component, Element, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-general-list-item\",\n styleUrl: \"hy-general-list-item.scss\",\n shadow: false,\n})\nexport class HyGeneralListItem {\n @Prop() hasSidebar: boolean = true;\n @Prop() description?: string;\n @Prop() imageAlt: string = \"\";\n @Prop() imageUrl: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() itemTitle?: string;\n @Prop() label?: string;\n @Prop() subLabel: string = \"\";\n @Prop() date: string = \"\";\n @Prop() tag: string = \"\";\n @Prop() type?: string;\n @Prop() url?: string;\n @Prop() listStyle?: string;\n @Prop() target: boolean = true;\n\n @Element() el: HTMLElement;\n\n render() {\n const classAttributes = [\"hy-general-list-item\", `hy-general-list-item--style-${this.listStyle}`].join(\" \");\n const contentClassAttributes = [\"hy-general-list-item__text-container\"].join(\" \");\n const imageClassAttributes = [\"hy-general-list-item__image-container\"].join(\" \");\n\n const sidebarClass = this.hasSidebar ? \"common\" : \"large\";\n const titleClassAttributes = [\"hy-general-list-item__title\", `hy-general-list-item__title__${sidebarClass}`].join(\n \" \"\n );\n const descriptionClassAttributes = [\n \"hy-general-list-item__description\",\n `hy-general-list-item__description__${sidebarClass}`,\n ].join(\" \");\n\n const aspectRatioWidth = 16;\n const aspectRatioHeight = 10;\n const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n const aspectRatio = {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n };\n\n return (\n <article class={classAttributes}>\n <a class=\"hy-general-list-item__link\" href={this.url} target={this.target ? \"_blank\" : \"_self\"}>\n {this.type && (\n <div class=\"hy-general-list-item__type\">\n <span class=\"hy-general-list-item__type__major\">{this.label}</span>\n <span class=\"hy-general-list-item__type__sub\">{this.subLabel}</span>\n </div>\n )}\n {this.imageUrl && (\n <figure class={imageClassAttributes} style={aspectRatio}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAlt}\n class=\"hy-general-list-item__image\"\n src={this.imageUrl}\n />\n </figure>\n )}\n <div class={contentClassAttributes}>\n {(this.tag || this.date) && (\n <span class=\"hy-genenral-list-item__meta\">\n {this.tag}\n <span class=\"hy-genenral-list-item__meta__date\">\n {this.tag && \"|\"} {this.date}\n </span>\n </span>\n )}\n <h3 class={titleClassAttributes}>{this.itemTitle}</h3>\n <p class={descriptionClassAttributes}>{this.description}</p>\n </div>\n </a>\n </article>\n );\n }\n}\n"],"mappings":"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"}