@itcenteratunihelsinki/huds-lib 0.8.65 → 0.8.67

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 (58) hide show
  1. package/components/hy-dropdown.js +2 -2
  2. package/components/hy-dropdown.js.map +1 -1
  3. package/components/hy-hero.js +1 -1
  4. package/components/hy-hero.js.map +1 -1
  5. package/components/hy-list-item.js +1 -1
  6. package/components/hy-list-item.js.map +1 -1
  7. package/components/hy-person-card.js +1 -1
  8. package/components/hy-person-card.js.map +1 -1
  9. package/components/hy-search-field2.js +5 -1
  10. package/components/hy-search-field2.js.map +1 -1
  11. package/dist/cjs/huds-lib.cjs.js +1 -1
  12. package/dist/cjs/hy-breadcrumbs_15.cjs.entry.js +3 -1
  13. package/dist/cjs/hy-breadcrumbs_15.cjs.entry.js.map +1 -1
  14. package/dist/cjs/hy-dropdown_3.cjs.entry.js +2 -2
  15. package/dist/cjs/hy-dropdown_3.cjs.entry.js.map +1 -1
  16. package/dist/cjs/hy-hero.cjs.entry.js +1 -1
  17. package/dist/cjs/hy-hero.cjs.entry.js.map +1 -1
  18. package/dist/cjs/hy-list-item.cjs.entry.js +1 -1
  19. package/dist/cjs/hy-list-item.cjs.entry.js.map +1 -1
  20. package/dist/cjs/hy-person-card.cjs.entry.js +1 -1
  21. package/dist/cjs/hy-person-card.cjs.entry.js.map +1 -1
  22. package/dist/cjs/loader.cjs.js +1 -1
  23. package/dist/collection/components/hy-dropdown/hy-dropdown.js +2 -2
  24. package/dist/collection/components/hy-dropdown/hy-dropdown.js.map +1 -1
  25. package/dist/collection/components/hy-hero/hy-hero.css +9 -1
  26. package/dist/collection/components/hy-list-item/hy-list-item.js +1 -1
  27. package/dist/collection/components/hy-list-item/hy-list-item.js.map +1 -1
  28. package/dist/collection/components/hy-person-card/hy-person-card.js +1 -1
  29. package/dist/collection/components/hy-person-card/hy-person-card.js.map +1 -1
  30. package/dist/collection/components/hy-search-field/hy-search-field.js +39 -1
  31. package/dist/collection/components/hy-search-field/hy-search-field.js.map +1 -1
  32. package/dist/esm/huds-lib.js +1 -1
  33. package/dist/esm/hy-breadcrumbs_15.entry.js +3 -1
  34. package/dist/esm/hy-breadcrumbs_15.entry.js.map +1 -1
  35. package/dist/esm/hy-dropdown_3.entry.js +2 -2
  36. package/dist/esm/hy-dropdown_3.entry.js.map +1 -1
  37. package/dist/esm/hy-hero.entry.js +1 -1
  38. package/dist/esm/hy-hero.entry.js.map +1 -1
  39. package/dist/esm/hy-list-item.entry.js +1 -1
  40. package/dist/esm/hy-list-item.entry.js.map +1 -1
  41. package/dist/esm/hy-person-card.entry.js +1 -1
  42. package/dist/esm/hy-person-card.entry.js.map +1 -1
  43. package/dist/esm/loader.js +1 -1
  44. package/dist/huds-lib/huds-lib.esm.js +1 -1
  45. package/dist/huds-lib/huds-lib.esm.js.map +1 -1
  46. package/dist/huds-lib/hy-breadcrumbs_15.entry.js +1 -1
  47. package/dist/huds-lib/hy-breadcrumbs_15.entry.js.map +1 -1
  48. package/dist/huds-lib/hy-dropdown_3.entry.js +1 -1
  49. package/dist/huds-lib/hy-dropdown_3.entry.js.map +1 -1
  50. package/dist/huds-lib/hy-hero.entry.js +1 -1
  51. package/dist/huds-lib/hy-hero.entry.js.map +1 -1
  52. package/dist/huds-lib/hy-list-item.entry.js +1 -1
  53. package/dist/huds-lib/hy-list-item.entry.js.map +1 -1
  54. package/dist/huds-lib/hy-person-card.entry.js +1 -1
  55. package/dist/huds-lib/hy-person-card.entry.js.map +1 -1
  56. package/dist/types/components/hy-search-field/hy-search-field.d.ts +2 -0
  57. package/dist/types/components.d.ts +4 -0
  58. package/package.json +2 -2
package/dist/cjs/hy-dropdown_3.cjs.entry.js CHANGED
@@ -98,10 +98,10 @@ const HyDropdown = class {
98
98
  const { label: currentLabel, id: currentId, value: currentValue } = this.currentSingle[0];
99
99
  const classAttributes = ["hy-dropdown", this.single ? "hy-dropdown--single" : ""].join(" ");
100
100
  if (this.single) {
101
- return (index.h(index.Host, { class: classAttributes }, this.dropdownLabel && (index.h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), index.h("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": currentId, "data-current-value": currentValue, value: currentId, type: "button" }, currentLabel, index.h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), index.h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index$1) => (index.h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index$1 }))))));
101
+ return (index.h(index.Host, { class: classAttributes }, this.dropdownLabel && (index.h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), index.h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": this.dropdownLabel, "data-current-id": currentId, "data-current-value": currentValue, value: currentId, type: "button" }, currentLabel, index.h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), index.h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index$1) => (index.h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index$1 }))))));
102
102
  }
103
103
  else {
104
- return (index.h(index.Host, { class: classAttributes }, index.h("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, index.h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), index.h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index$1) => (index.h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index$1 }))))));
104
+ return (index.h(index.Host, { class: classAttributes }, index.h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": this.dropdownLabel, type: "button" }, this.dropdownLabel && this.dropdownLabel, index.h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), index.h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index$1) => (index.h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index$1 }))))));
105
105
  }
106
106
  }
107
107
  get el() { return index.getElement(this); }
package/dist/cjs/hy-dropdown_3.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"hy-dropdown.hy-dropdown-panel.hy-dropdown-panel-item.entry.cjs.js","mappings":"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","names":["jsonParserWorker","h","Host","index"],"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"],"version":3}
1
+ {"file":"hy-dropdown.hy-dropdown-panel.hy-dropdown-panel-item.entry.cjs.js","mappings":"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","names":["jsonParserWorker","h","Host","index"],"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-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={this.dropdownLabel}\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-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={this.dropdownLabel}\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"],"version":3}
package/dist/cjs/hy-hero.cjs.entry.js CHANGED
@@ -6,7 +6,7 @@ const index = require('./index-32830401.js');
6
6
  const globalScript = require('./globalScript-9994473d.js');
7
7
  const utils = require('./utils-56f3464c.js');
8
8
 
9
- const hyHeroCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-hero{position:relative;padding-bottom:0}@media (min-width: 60rem){.hy-hero:not(.hy-hero--full-image){margin-top:32px}}@media (min-width: 60rem){.hy-hero:not(.has-shortcuts){margin-bottom:32px}}@media (min-width: 75.0625rem){.hy-hero .without-sidebar :not(.hy-hero--full-image){max-width:1216px;margin-right:auto;margin-left:auto}}@media (min-width: 75.0625rem){.with-sidebar:not(.hy-hero--full-image) .hy-hero{padding-left:32px;padding-right:32px}}@media (min-width: 1601px){.with-sidebar:not(.hy-hero--full-image) .hy-hero{padding-right:0;padding-left:0;max-width:1216px;margin-right:auto;margin-left:auto}}.hy-hero--full-image{--dark-bg:rgba(0, 0, 0, 0.55);--light-bg:rgba(255, 255, 255, 0.50);--dark-text:var(--brand-main-nearly-black);--light-text:var(--grayscale-white);border-bottom:1px solid var(--grayscale-medium-dark)}@media (min-width: 60rem){.hy-hero--full-image{border-bottom:4px solid var(--grayscale-black);margin-left:-2rem;margin-right:-2rem}}.hy-hero--full-image .hy-hero__container{grid-template-columns:repeat(4, 1fr);grid-template-rows:1fr}.hy-hero--full-image .hy-hero__image-container{grid-column:1/-1;grid-row:1/-1;-o-object-fit:cover;object-fit:cover;padding:0;width:100%}.hy-hero--full-image .hy-hero__image-container img{aspect-ratio:16/8}.hy-hero--full-image .hy-hero__content-container{padding:0}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content-container{align-self:center;grid-column:1/3;grid-row:1/-1;margin-left:32px;max-width:95%;z-index:2}}@media (min-width: 75.0625rem){.hy-hero--full-image .hy-hero__content-container{margin-left:0}}.hy-hero--full-image .hy-hero__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;padding:16px 16px 32px 16px}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content{margin-left:32px;gap:24px;padding:32px}}@media (min-width: 75.0625rem){.hy-hero--full-image .hy-hero__content{margin-left:64px;gap:32px}}@media (min-width: 1601px){.hy-hero--full-image .hy-hero__content{margin-left:96px}}.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_light_bg]{-webkit-backdrop-filter:blur(250px);backdrop-filter:blur(250px);background-color:var(--grayscale-white);color:var(--dark-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_light_bg]{background:var(--light-bg)}}.hy-hero--full-image .hy-hero__content[data-text-color=light_text_dark_bg]{-webkit-backdrop-filter:blur(250px);backdrop-filter:blur(250px);background:var(--grayscale-black);color:var(--light-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=light_text_dark_bg]{background:var(--dark-bg)}}.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_no_bg]{background-color:var(--grayscale-white);color:var(--dark-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_no_bg]{background:transparent;text-shadow:0 0 5px var(--grayscale-white)}}.hy-hero--full-image .hy-hero__content[data-text-color=light_text_no_bg]{background-color:var(--grayscale-black);color:var(--light-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=light_text_no_bg]{background:transparent;text-shadow:0 0 5px var(--grayscale-black)}}.hy-hero--full-image .hy-hero__subtitle{font-family:var(--main-font-family);font-size:18px;font-weight:700;line-height:1.2;position:relative}.hy-hero--full-image .hy-hero__subtitle::after{aspect-ratio:1;background-color:currentColor;bottom:-10px;content:\"\";display:block;height:4px;left:0;position:absolute;width:64px}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__subtitle{font-size:20px}}.hy-hero--full-image h2.hy-hero__title.hy-heading__hero{color:inherit !important;font-family:var(--main-font-family);font-size:32px;font-weight:700;line-height:1.2}@media (min-width: 75.0625rem){.hy-hero--full-image h2.hy-hero__title.hy-heading__hero{font-size:36px}}@media (min-width: 1601px){.hy-hero--full-image h2.hy-hero__title.hy-heading__hero{font-size:64px}}.hy-hero--full-image .hy-hero__description{font-family:var(--main-font-family);font-size:16px;font-weight:400;line-height:1.5;margin:0;padding:0}@media (min-width: 1601px){.hy-hero--full-image .hy-hero__description{font-size:17px}}.hy-hero--full-image .hy-hero__actions{margin:0}.hy-hero--full-image .hy-hero__actions .hy-hero__link{--light-bg:var(--grayscale-white);--dark-bg:var(--grayscale-black);--light-text:var(--grayscale-white);--dark-text:var(--grayscale-black);-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);font-size:16px;font-weight:700;gap:8px;line-height:18px;padding:13px 16px;text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.hy-hero--full-image .hy-hero__actions .hy-hero__link:hover{text-decoration:underline}.hy-hero--full-image .hy-hero__actions .hy-hero__link svg{width:16px;height:16px}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_light_bg]{background:var(--dark-bg);color:var(--light-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_light_bg] svg{fill:var(--light-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_dark_bg]{background:var(--light-bg);color:var(--dark-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_dark_bg] svg{fill:var(--dark-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_no_bg]{background:var(--dark-bg);color:var(--light-text);text-shadow:none}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_no_bg] svg{fill:var(--light-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_no_bg]{background:var(--light-bg);color:var(--dark-text);text-shadow:none}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_no_bg] svg{fill:var(--dark-text)}.hy-hero--full-image .hy-image__image{-o-object-fit:cover;object-fit:cover}@media (min-width: 60rem){.hy-hero--white{margin-top:0}}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts){padding-bottom:48px}}.hy-hero--white:not(.has-shortcuts):after{width:100%;background-color:var(--grayscale-medium-dark);height:1px;content:\"\";margin:0 auto;display:block}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts):after{position:absolute;left:0;right:0;bottom:0}}.hy-hero--white:not(.hy-hero--front_page):after{max-width:1216px}.hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero__container{display:grid;position:relative}}@media (min-width: 60rem){.hy-hero--small .hy-hero__container{grid-template-columns:60% 1fr}}@media (min-width: 60rem){.hy-hero--large .hy-hero__container{grid-template-columns:repeat(2, 1fr)}}.hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}@media (min-width: 30rem){.hy-hero__content-container{padding:40px 2rem}}@media (min-width: 75.0625rem){.hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:40px 24px}}@media (min-width: 1601px){.hy-hero__content-container{max-width:1216px}}.hy-hero--black .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 75.0625rem){.hy-hero--white .hy-hero__content-container{padding:40px 24px 40px 0}}.hy-hero__content{position:relative}h2.hy-hero__title{-ms-hyphens:auto;hyphens:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;max-width:100%;width:auto}.hy-hero--blue h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--black h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--white h2.hy-hero__title{color:var(--grayscale-black) !important}h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:33px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:none;text-wrap:balance}@media (min-width: 1024px){h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:40px;letter-spacing:-1.15px}}@media (min-width: 1601px){h2.hy-hero__title.hy-heading__hero{font-size:2.375rem;line-height:48px;letter-spacing:-1.3px}}.hy-hero__description{font-size:1rem;line-height:24px;font-family:var(--main-font-family);margin:16px 0 0 0;padding:0;position:relative;text-wrap:pretty}@media (min-width: 1601px){.hy-hero__description{font-size:1.0625rem;line-height:26px}}.hy-hero--black .hy-hero__description{color:var(--grayscale-white)}.hy-hero--blue .hy-hero__description{color:var(--grayscale-white)}.hy-hero--white .hy-hero__description{color:var(--grayscale-black)}.hy-hero__actions{margin-top:24px}.hy-hero__image-container{margin:0;padding:0;position:relative}.hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero__image-container{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0}}@media (min-width: 60rem){.hy-hero--front_page .hy-hero__image-container{padding:0}}.hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:contain;object-fit:contain;width:100%}.has-cover .hy-image__image{-o-object-fit:cover;object-fit:cover}.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--white{padding-top:40px;margin-top:0}}.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page{margin-left:-32px;margin-right:-32px;max-width:none}}.hy-hero.hy-hero--front_page .hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}}.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}.hy-hero--black .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 30rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 2rem 40px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:330px;padding:56px 2rem}}@media (min-width: 1060px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:373px}}@media (min-width: 1160px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:480px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:32px;padding-right:8px}}@media (min-width: 1260px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:443px}}@media (min-width: 1280px){.hy-hero.hy-hero--front_page .hy-hero__content-container{max-width:1216px;padding-left:0}}@media (min-width: 1360px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:478px}}@media (min-width: 1460px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:513px}}@media (min-width: 1560px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:548px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:0}}@media (min-width: 1660px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:583px}}@media (min-width: 1760px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:619px}}@media (min-width: 1860px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:654px}}@media (min-width: 1920px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:675px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__image-container{width:40%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__content{max-width:60%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__image-container{width:50%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__content{max-width:50%}}.hy-hero.hy-hero--front_page .hy-hero__image-container{background-position:50% 50%;background-size:cover;background:transparent;margin:0;padding:0;position:relative}.hy-hero.hy-hero--front_page .hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__image-container{background-color:var(--grayscale-white);bottom:0;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0;position:absolute;right:0;top:0}}.hy-hero.hy-hero--front_page .hy-hero__content{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content{padding-right:24px}}.hy-hero.hy-hero--front_page .hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:cover;object-fit:cover;width:100%}.hy-hero__spacer-box{display:none}@media (min-width: 60rem){.hy-hero__spacer-box{display:block;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:absolute;inset:0}}@media (min-width: 60rem){.hy-hero--small .hy-hero__spacer-box{width:60%}}@media (min-width: 60rem){.hy-hero--large .hy-hero__spacer-box{width:50%}}.hy-hero--black .hy-hero__spacer-box{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__spacer-box{background-color:var(--brand-main)}.hy-hero--white .hy-hero__spacer-box{background-color:var(--grayscale-white)}";
9
+ const hyHeroCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-hero{position:relative;padding-bottom:0}@media (min-width: 60rem){.hy-hero:not(.hy-hero--full-image){margin-top:32px}}@media (min-width: 60rem){.hy-hero:not(.has-shortcuts){margin-bottom:32px}}@media (min-width: 75.0625rem){.without-sidebar .hy-hero{max-width:1216px;margin-right:auto;margin-left:auto}}@media (min-width: 75.0625rem){.with-sidebar:not(.hy-hero--full-image) .hy-hero{padding-left:32px;padding-right:32px}}@media (min-width: 1601px){.with-sidebar:not(.hy-hero--full-image) .hy-hero{padding-right:0;padding-left:0;max-width:1216px;margin-right:auto;margin-left:auto}}.hy-hero--full-image{--dark-bg:rgba(0, 0, 0, 0.55);--light-bg:rgba(255, 255, 255, 0.50);--dark-text:var(--brand-main-nearly-black);--light-text:var(--grayscale-white);border-bottom:1px solid var(--grayscale-medium-dark)}@media (min-width: 60rem){.hy-hero--full-image{border-bottom:4px solid var(--grayscale-black);margin-left:-2rem;margin-right:-2rem}}@media (min-width: 75.0625rem){.without-sidebar .hy-hero--full-image{max-width:none;margin-left:-2rem;margin-right:-2rem}}.hy-hero--full-image .hy-hero__container{grid-template-columns:repeat(4, 1fr);grid-template-rows:1fr}.hy-hero--full-image .hy-hero__image-container{grid-column:1/-1;grid-row:1/-1;-o-object-fit:cover;object-fit:cover;padding:0;width:100%}.hy-hero--full-image .hy-hero__image-container img{aspect-ratio:16/8}.hy-hero--full-image .hy-hero__content-container{padding:0}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content-container{align-self:center;grid-column:1/3;grid-row:1/-1;margin-left:32px;max-width:95%;z-index:2}}@media (min-width: 75.0625rem){.hy-hero--full-image .hy-hero__content-container{margin-left:0}}.hy-hero--full-image .hy-hero__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;padding:16px 16px 32px 16px}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content{margin-left:32px;gap:24px;padding:32px}}@media (min-width: 75.0625rem){.hy-hero--full-image .hy-hero__content{margin-left:64px;gap:32px}}@media (min-width: 1601px){.hy-hero--full-image .hy-hero__content{margin-left:96px}}.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_light_bg]{-webkit-backdrop-filter:blur(250px);backdrop-filter:blur(250px);background-color:var(--grayscale-white);color:var(--dark-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_light_bg]{background:var(--light-bg)}}.hy-hero--full-image .hy-hero__content[data-text-color=light_text_dark_bg]{-webkit-backdrop-filter:blur(250px);backdrop-filter:blur(250px);background:var(--grayscale-black);color:var(--light-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=light_text_dark_bg]{background:var(--dark-bg)}}.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_no_bg]{background-color:var(--grayscale-white);color:var(--dark-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_no_bg]{background:transparent;text-shadow:0 0 5px var(--grayscale-white)}}.hy-hero--full-image .hy-hero__content[data-text-color=light_text_no_bg]{background-color:var(--grayscale-black);color:var(--light-text)}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__content[data-text-color=light_text_no_bg]{background:transparent;text-shadow:0 0 5px var(--grayscale-black)}}.hy-hero--full-image .hy-hero__subtitle{font-family:var(--main-font-family);font-size:18px;font-weight:700;line-height:1.2;position:relative}.hy-hero--full-image .hy-hero__subtitle::after{aspect-ratio:1;background-color:currentColor;bottom:-10px;content:\"\";display:block;height:4px;left:0;position:absolute;width:64px}@media (min-width: 60rem){.hy-hero--full-image .hy-hero__subtitle{font-size:20px}}.hy-hero--full-image h2.hy-hero__title.hy-heading__hero{color:inherit !important;font-family:var(--main-font-family);font-size:32px;font-weight:700;line-height:1.2}@media (min-width: 75.0625rem){.hy-hero--full-image h2.hy-hero__title.hy-heading__hero{font-size:36px}}@media (min-width: 1601px){.hy-hero--full-image h2.hy-hero__title.hy-heading__hero{font-size:64px}}.hy-hero--full-image .hy-hero__description{font-family:var(--main-font-family);font-size:16px;font-weight:400;line-height:1.5;margin:0;padding:0}@media (min-width: 1601px){.hy-hero--full-image .hy-hero__description{font-size:17px}}.hy-hero--full-image .hy-hero__actions{margin:0}.hy-hero--full-image .hy-hero__actions .hy-hero__link{--light-bg:var(--grayscale-white);--dark-bg:var(--grayscale-black);--light-text:var(--grayscale-white);--dark-text:var(--grayscale-black);-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);font-size:16px;font-weight:700;gap:8px;line-height:18px;padding:13px 16px;text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.hy-hero--full-image .hy-hero__actions .hy-hero__link:hover{text-decoration:underline}.hy-hero--full-image .hy-hero__actions .hy-hero__link svg{width:16px;height:16px}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_light_bg]{background:var(--dark-bg);color:var(--light-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_light_bg] svg{fill:var(--light-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_dark_bg]{background:var(--light-bg);color:var(--dark-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_dark_bg] svg{fill:var(--dark-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_no_bg]{background:var(--dark-bg);color:var(--light-text);text-shadow:none}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_no_bg] svg{fill:var(--light-text)}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_no_bg]{background:var(--light-bg);color:var(--dark-text);text-shadow:none}.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_no_bg] svg{fill:var(--dark-text)}.hy-hero--full-image .hy-image__image{-o-object-fit:cover;object-fit:cover}@media (min-width: 60rem){.hy-hero--white{margin-top:0}}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts){padding-bottom:48px}}.hy-hero--white:not(.has-shortcuts):after{width:100%;background-color:var(--grayscale-medium-dark);height:1px;content:\"\";margin:0 auto;display:block}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts):after{position:absolute;left:0;right:0;bottom:0}}.hy-hero--white:not(.hy-hero--front_page):after{max-width:1216px}.hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero__container{display:grid;position:relative}}@media (min-width: 60rem){.hy-hero--small .hy-hero__container{grid-template-columns:60% 1fr}}@media (min-width: 60rem){.hy-hero--large .hy-hero__container{grid-template-columns:repeat(2, 1fr)}}.hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}@media (min-width: 30rem){.hy-hero__content-container{padding:40px 2rem}}@media (min-width: 75.0625rem){.hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:40px 24px}}@media (min-width: 1601px){.hy-hero__content-container{max-width:1216px}}.hy-hero--black .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 75.0625rem){.hy-hero--white .hy-hero__content-container{padding:40px 24px 40px 0}}.hy-hero__content{position:relative}h2.hy-hero__title{-ms-hyphens:auto;hyphens:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;max-width:100%;width:auto}.hy-hero--blue h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--black h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--white h2.hy-hero__title{color:var(--grayscale-black) !important}h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:33px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:none;text-wrap:balance}@media (min-width: 1024px){h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:40px;letter-spacing:-1.15px}}@media (min-width: 1601px){h2.hy-hero__title.hy-heading__hero{font-size:2.375rem;line-height:48px;letter-spacing:-1.3px}}.hy-hero__description{font-size:1rem;line-height:24px;font-family:var(--main-font-family);margin:16px 0 0 0;padding:0;position:relative;text-wrap:pretty}@media (min-width: 1601px){.hy-hero__description{font-size:1.0625rem;line-height:26px}}.hy-hero--black .hy-hero__description{color:var(--grayscale-white)}.hy-hero--blue .hy-hero__description{color:var(--grayscale-white)}.hy-hero--white .hy-hero__description{color:var(--grayscale-black)}.hy-hero__actions{margin-top:24px}.hy-hero__image-container{margin:0;padding:0;position:relative}.hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero__image-container{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0}}@media (min-width: 60rem){.hy-hero--front_page .hy-hero__image-container{padding:0}}.hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:contain;object-fit:contain;width:100%}.has-cover .hy-image__image{-o-object-fit:cover;object-fit:cover}.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--white{padding-top:40px;margin-top:0}}.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page{margin-left:-32px;margin-right:-32px;max-width:none}}.hy-hero.hy-hero--front_page .hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}}.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}.hy-hero--black .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 30rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 2rem 40px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:330px;padding:56px 2rem}}@media (min-width: 1060px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:373px}}@media (min-width: 1160px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:480px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:32px;padding-right:8px}}@media (min-width: 1260px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:443px}}@media (min-width: 1280px){.hy-hero.hy-hero--front_page .hy-hero__content-container{max-width:1216px;padding-left:0}}@media (min-width: 1360px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:478px}}@media (min-width: 1460px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:513px}}@media (min-width: 1560px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:548px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:0}}@media (min-width: 1660px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:583px}}@media (min-width: 1760px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:619px}}@media (min-width: 1860px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:654px}}@media (min-width: 1920px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:675px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__image-container{width:40%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__content{max-width:60%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__image-container{width:50%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__content{max-width:50%}}.hy-hero.hy-hero--front_page .hy-hero__image-container{background-position:50% 50%;background-size:cover;background:transparent;margin:0;padding:0;position:relative}.hy-hero.hy-hero--front_page .hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__image-container{background-color:var(--grayscale-white);bottom:0;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0;position:absolute;right:0;top:0}}.hy-hero.hy-hero--front_page .hy-hero__content{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content{padding-right:24px}}.hy-hero.hy-hero--front_page .hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:cover;object-fit:cover;width:100%}.hy-hero__spacer-box{display:none}@media (min-width: 60rem){.hy-hero__spacer-box{display:block;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:absolute;inset:0}}@media (min-width: 60rem){.hy-hero--small .hy-hero__spacer-box{width:60%}}@media (min-width: 60rem){.hy-hero--large .hy-hero__spacer-box{width:50%}}.hy-hero--black .hy-hero__spacer-box{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__spacer-box{background-color:var(--brand-main)}.hy-hero--white .hy-hero__spacer-box{background-color:var(--grayscale-white)}";
10
10
 
11
11
  let timeout = null;
12
12
  let delay = 250;
package/dist/cjs/hy-hero.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"hy-hero.entry.cjs.js","mappings":"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","names":["HeroTypeVariant","HeroGroupTypeVariant","HeroColorVariant","HeroSizeVariant","jsonParserWorker","h","CtaLinkButtonVariants","Host"],"sources":["./src/components/hy-hero/hy-hero.scss?tag=hy-hero","./src/components/hy-hero/hy-hero.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-hero {\n position: relative;\n padding-bottom: 0;\n\n &:not(.hy-hero--full-image) {\n @include breakpoint($wide) {\n margin-top: 32px;\n }\n }\n\n &:not(.has-shortcuts) {\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n }\n\n .without-sidebar :not(.hy-hero--full-image) {\n @include breakpoint($extrawide) {\n max-width: 1216px;\n margin-right: auto;\n margin-left: auto;\n }\n }\n\n .with-sidebar:not(.hy-hero--full-image) & {\n @include breakpoint($extrawide) {\n padding-left: 32px;\n padding-right: 32px;\n }\n\n @include breakpoint($xlarge) {\n padding-right: 0;\n padding-left: 0;\n max-width: 1216px;\n margin-right: auto;\n margin-left: auto;\n }\n }\n\n &--full-image {\n --dark-bg: rgba(0, 0, 0, 0.55);\n --light-bg: rgba(255, 255, 255, 0.50);\n --dark-text: var(--brand-main-nearly-black);\n --light-text: var(--grayscale-white);\n \n border-bottom: 1px solid var(--grayscale-medium-dark);\n \n @include breakpoint($wide) {\n border-bottom: 4px solid var(--grayscale-black);\n margin-left: -2rem;\n margin-right: -2rem;\n }\n\n .hy-hero__container {\n grid-template-columns: repeat(4 , 1fr);\n grid-template-rows: 1fr;\n }\n\n .hy-hero__image-container {\n grid-column: 1 / -1;\n grid-row: 1 / -1;\n object-fit: cover;\n padding: 0;\n width: 100%;\n img {\n aspect-ratio: 16 / 8;\n }\n }\n\n .hy-hero__content-container {\n padding: 0;\n\n @include breakpoint($wide) {\n align-self: center;\n grid-column: 1 / 3;\n grid-row: 1 / -1;\n margin-left: 32px;\n max-width: 95%;\n z-index: 2;\n }\n @include breakpoint($extrawide) {\n margin-left: 0;\n }\n }\n\n .hy-hero__content {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 16px 16px 32px 16px;\n \n @include breakpoint($wide) {\n margin-left: 32px;\n gap: 24px;\n padding: 32px;\n }\n @include breakpoint($extrawide) {\n margin-left: 64px;\n gap: 32px;\n }\n @include breakpoint($xlarge) {\n margin-left: 96px;\n }\n\n @include breakpoint($wide) {\n \n }\n\n &[data-text-color=\"dark_text_light_bg\"] {\n backdrop-filter: blur(250px);\n background-color: var(--grayscale-white);\n color: var(--dark-text);\n\n @include breakpoint($wide) {\n background: var(--light-bg);\n }\n }\n &[data-text-color=\"light_text_dark_bg\"] {\n backdrop-filter: blur(250px);\n background: var(--grayscale-black);\n color: var(--light-text);\n\n @include breakpoint($wide) {\n background: var(--dark-bg);\n }\n }\n &[data-text-color=\"dark_text_no_bg\"] {\n background-color: var(--grayscale-white);\n color: var(--dark-text);\n\n @include breakpoint($wide) {\n background: transparent;\n text-shadow: 0 0 5px var(--grayscale-white);\n }\n }\n &[data-text-color=\"light_text_no_bg\"] {\n background-color: var(--grayscale-black);\n color: var(--light-text);\n\n @include breakpoint($wide) {\n background: transparent;\n text-shadow: 0 0 5px var(--grayscale-black);\n }\n }\n }\n\n .hy-hero__subtitle {\n font-family: var(--main-font-family);\n font-size: 18px;\n font-weight: 700;\n line-height: 1.2;\n position: relative;\n\n &::after {\n aspect-ratio: 1;\n background-color: currentColor;\n bottom: -10px;\n content: '';\n display: block;\n height: 4px;\n left: 0;\n position: absolute;\n width: 64px;\n }\n\n @include breakpoint($wide) {\n font-size: 20px;\n }\n }\n\n h2.hy-hero__title.hy-heading__hero {\n color: inherit !important;\n font-family: var(--main-font-family);\n font-size: 32px;\n font-weight: 700; \n line-height: 1.2;\n\n @include breakpoint($extrawide) {\n font-size: 36px;\n }\n\n @include breakpoint($xlarge) {\n font-size: 64px;\n }\n }\n\n .hy-hero__description {\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 400; \n line-height: 1.5;\n margin: 0;\n padding: 0;\n\n @include breakpoint($xlarge) {\n font-size: 17px;\n }\n }\n\n .hy-hero__actions {\n margin: 0;\n\n .hy-hero__link {\n --light-bg: var(--grayscale-white);\n --dark-bg: var(--grayscale-black);\n --light-text: var(--grayscale-white);\n --dark-text: var(--grayscale-black);\n\n align-items: center;\n display: flex;\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 700;\n gap: 8px;\n line-height: 18px;\n padding: 13px 16px;\n text-decoration: none;\n width: fit-content;\n\n &:hover {\n text-decoration: underline;\n }\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n &[data-text-color=\"dark_text_light_bg\"] {\n background: var(--dark-bg);\n color: var(--light-text);\n svg {fill: var(--light-text)}\n }\n &[data-text-color=\"light_text_dark_bg\"] {\n background: var(--light-bg);\n color: var(--dark-text);\n svg {fill: var(--dark-text)}\n }\n &[data-text-color=\"dark_text_no_bg\"] {\n background: var(--dark-bg);\n color: var(--light-text);\n text-shadow: none;\n svg {fill: var(--light-text)}\n }\n &[data-text-color=\"light_text_no_bg\"] {\n background: var(--light-bg);\n color: var(--dark-text);\n text-shadow: none;\n svg {fill: var(--dark-text)}\n }\n }\n }\n\n .hy-image__image {\n object-fit: cover;\n }\n }\n\n &--white {\n @include breakpoint($wide) {\n margin-top: 0;\n }\n\n &:not(.has-shortcuts) {\n @include breakpoint($wide) {\n padding-bottom: 48px;\n }\n }\n\n &:not(.has-shortcuts):after {\n width: 100%;\n background-color: var(--grayscale-medium-dark);\n height: 1px;\n content: \"\";\n margin: 0 auto;\n display: block;\n\n @include breakpoint($wide) {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n }\n }\n\n &:not(.hy-hero--front_page):after {\n max-width: 1216px;\n }\n }\n}\n\n.hy-hero__container {\n position: relative;\n\n @include breakpoint($wide) {\n display: grid;\n position: relative;\n }\n\n .hy-hero--small & {\n @include breakpoint($wide) {\n grid-template-columns: 60% 1fr;\n }\n }\n\n .hy-hero--large & {\n @include breakpoint($wide) {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n}\n\n.hy-hero__content-container {\n padding: 24px 1rem 40px;\n margin: 0 auto;\n width: 100%;\n\n @include breakpoint($narrow) {\n padding: 40px 2rem;\n }\n\n @include breakpoint($extrawide) {\n align-items: center;\n display: flex;\n padding: 40px 24px;\n }\n\n @include breakpoint($xlarge) {\n max-width: 1216px;\n }\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n\n @include breakpoint($extrawide) {\n padding: 40px 24px 40px 0;\n }\n }\n}\n\n.hy-hero__content {\n position: relative;\n}\n\nh2.hy-hero__title {\n hyphens: auto;\n display: flex;\n flex-grow: 1;\n flex-shrink: 0;\n max-width: 100%;\n width: auto;\n\n .hy-hero--blue & {\n color: var(--grayscale-white) !important;\n }\n\n .hy-hero--black & {\n color: var(--grayscale-white) !important;\n }\n\n .hy-hero--white & {\n color: var(--grayscale-black) !important;\n }\n\n &.hy-heading__hero {\n @include font-size(36px, 33px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: none;\n text-wrap: balance;\n\n @include breakpoint(1024px) {\n @include font-size(36px, 40px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(38px, 48px);\n letter-spacing: -1.3px;\n }\n }\n}\n\n.hy-hero__description {\n @include font-size(16px, 24px);\n font-family: var(--main-font-family);\n margin: 16px 0 0 0;\n padding: 0;\n position: relative;\n text-wrap: pretty;\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px);\n }\n\n .hy-hero--black & {\n color: var(--grayscale-white);\n }\n\n .hy-hero--blue & {\n color: var(--grayscale-white);\n }\n\n .hy-hero--white & {\n color: var(--grayscale-black);\n }\n}\n\n.hy-hero__actions {\n margin-top: 24px;\n}\n\n.hy-hero__image-container {\n margin: 0;\n padding: 0;\n position: relative;\n\n figure {\n margin: 0;\n }\n\n @include breakpoint($wide) {\n order: 2;\n padding: 8px 0;\n }\n\n .hy-hero--front_page & {\n @include breakpoint($wide) {\n padding: 0;\n }\n }\n}\n\n.hy-image__image {\n display: block;\n height: 100%;\n min-height: 205px;\n object-fit: contain;\n width: 100%;\n\n .has-cover & {\n object-fit: cover;\n }\n}\n\n// Research group and generic with minor landing\n.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group,\n.hy-hero.hy-hero--research_group {\n h2.hy-hero__title.hy-heading__hero {\n @include font-size(32px, 38px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: uppercase;\n\n @include breakpoint(1024px) {\n @include font-size(46px, 54px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n }\n}\n\n// FRONTPAGE VARIATION\n\n.hy-hero.hy-hero--front_page {\n &.hy-hero--white {\n @include breakpoint($wide) {\n padding-top: 40px;\n margin-top: 0;\n }\n }\n\n h2.hy-hero__title.hy-heading__hero {\n @include font-size(32px, 38px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: uppercase;\n\n @include breakpoint(1024px) {\n @include font-size(46px, 54px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n }\n\n @include breakpoint($extrawide) {\n margin-left: -32px;\n margin-right: -32px;\n max-width: none;\n }\n\n .hy-hero__container {\n position: relative;\n\n @include breakpoint($wide) {\n display: flex;\n position: relative;\n }\n }\n\n .hy-hero__content-container {\n padding: 24px 1rem 40px;\n margin: 0 auto;\n width: 100%;\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n }\n\n @include breakpoint($narrow) {\n padding: 24px 2rem 40px;\n }\n\n @include breakpoint($wide) {\n align-items: center;\n display: flex;\n min-height: 330px;\n padding: 56px 2rem;\n }\n\n @include breakpoint(1060px) {\n min-height: 373px;\n }\n\n @include breakpoint(1160px) {\n min-height: 480px;\n }\n\n @include breakpoint($extrawide) {\n padding-left: 32px;\n padding-right: 8px;\n }\n\n @include breakpoint(1260px) {\n min-height: 443px;\n }\n\n @include breakpoint(1280px) {\n max-width: 1216px;\n padding-left: 0;\n }\n\n @include breakpoint(1360px) {\n min-height: 478px;\n }\n\n @include breakpoint(1460px) {\n min-height: 513px;\n }\n\n @include breakpoint(1560px) {\n min-height: 548px;\n }\n\n @include breakpoint($xlarge) {\n padding-left: 0;\n }\n\n @include breakpoint(1660px) {\n min-height: 583px;\n }\n\n @include breakpoint(1760px) {\n min-height: 619px;\n }\n\n @include breakpoint(1860px) {\n min-height: 654px;\n }\n\n @include breakpoint(1920px) {\n min-height: 675px;\n }\n }\n\n &.hy-hero--small {\n .hy-hero__image-container {\n @include breakpoint($wide) {\n width: 40%;\n }\n }\n\n .hy-hero__content {\n @include breakpoint($wide) {\n max-width: 60%;\n }\n }\n }\n\n &.hy-hero--large {\n .hy-hero__image-container {\n @include breakpoint($wide) {\n width: 50%;\n }\n }\n\n .hy-hero__content {\n @include breakpoint($wide) {\n max-width: 50%;\n }\n }\n }\n\n .hy-hero__image-container {\n background-position: 50% 50%;\n background-size: cover;\n background: transparent;\n margin: 0;\n padding: 0;\n position: relative;\n\n figure {\n margin: 0;\n }\n\n @include breakpoint($wide) {\n background-color: var(--grayscale-white);\n bottom: 0;\n order: 2;\n padding: 8px 0;\n position: absolute;\n right: 0;\n top: 0;\n }\n }\n\n .hy-hero__content {\n position: relative;\n\n @include breakpoint($wide) {\n padding-right: 24px;\n }\n }\n\n .hy-image__image {\n display: block;\n height: 100%;\n min-height: 205px;\n object-fit: cover;\n width: 100%;\n }\n}\n\n.hy-hero__spacer-box {\n display: none;\n\n @include breakpoint($wide) {\n display: block;\n order: 1;\n position: absolute;\n inset: 0;\n }\n\n .hy-hero--small & {\n @include breakpoint($wide) {\n width: 60%;\n }\n }\n\n .hy-hero--large & {\n @include breakpoint($wide) {\n width: 50%;\n }\n }\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n }\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string | null;\n}\nlet timeout = null;\nlet delay = 250;\n\nimport {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport {\n CtaLinkButtonVariants,\n HeroColorVariant,\n HeroSizeVariant,\n HeroGroupTypeVariant,\n HeroTypeVariant,\n HeroTextColor,\n} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-hero\",\n styleUrl: \"hy-hero.scss\",\n shadow: false,\n})\nexport class HyHero {\n @Element() el: HTMLElement;\n @Prop() heroType: HeroTypeVariant = HeroTypeVariant.landing;\n @Prop() heroGroupType: HeroGroupTypeVariant = HeroGroupTypeVariant.default;\n @Prop() colorVariant: HeroColorVariant = HeroColorVariant.blue;\n @Prop() sizeVariant: HeroSizeVariant = HeroSizeVariant.large;\n @Prop() heroTextColor: HeroTextColor = null;\n @Prop() image: string;\n @Prop() imageHeight: number = null;\n @Prop() imageWidth: number = null;\n @Prop() imageAltText: string = \"\";\n @Prop() disableLazy: boolean = false;\n @Prop() hasShortcuts: boolean = false;\n @Prop() heading: string;\n @Prop() description: string;\n @Prop() subtitle: string;\n @Prop() url: string;\n @Prop() urlTitle: string;\n @Prop() scLabel?: string;\n @Prop() isExternal: boolean = false;\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] | string;\n\n async componentWillLoad() {\n this._sourceSet = await jsonParserWorker(this.sourceSet);\n }\n\n // TODO: Refactor, find way to get rid of this.\n handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {\n const heroContentContainerElement = heroElement.getElementsByClassName(\n \"hy-hero__content-container\"\n )[0] as HTMLElement;\n\n if (heroSizeVariant === \"small\") {\n if (heroContentContainerElement.offsetHeight >= 300) {\n heroElement.classList.add(\"has-cover\");\n } else {\n heroElement.classList.remove(\"has-cover\");\n }\n }\n\n if (heroSizeVariant === \"large\") {\n if (heroContentContainerElement.offsetHeight >= 344) {\n heroElement.classList.add(\"has-cover\");\n } else {\n heroElement.classList.remove(\"has-cover\");\n }\n }\n }\n\n createImageElement(props, srcSet, aspectRatio) {\n return (\n <div class={`hy-hero__image-container`} style={aspectRatio}>\n {props.image &&\n (srcSet ? (\n <picture>\n {srcSet.map((item) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n loading={props.disableLazy ? \"eager\" : \"lazy\"}\n alt={props.imageAltText}\n class={`hy-image__image`}\n src={props.image}\n height={props.imageHeight}\n width={props.imageWidth}\n />\n </picture>\n ) : (\n <img\n loading={props.disableLazy ? \"eager\" : \"lazy\"}\n alt={props.imageAltText}\n class={`hy-image__image`}\n src={props.image}\n height={props.imageHeight}\n width={props.imageWidth}\n />\n ))}\n </div>\n );\n }\n\n // TODO: Refactor, is this still even used?\n setAspectRatio(aspectRatioWidth = 16, aspectRatioHeight = 10) {\n const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n return {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n //\"aspect-ratio\": `${aspectRatioWidth} / ${aspectRatioHeight}` as \"aspectRatio\",\n };\n }\n\n render() {\n let variant = CtaLinkButtonVariants.heroWhite;\n let colorVariantValue = this.colorVariant;\n let heroTypeValue = this.heroType;\n\n //TODO: Refactor\n if (this.heroType === \"minor_landing\") {\n colorVariantValue = HeroColorVariant.white;\n heroTypeValue = HeroTypeVariant.landing;\n }\n\n if (colorVariantValue === HeroColorVariant.blue) {\n variant = CtaLinkButtonVariants.heroBlue;\n }\n\n if (colorVariantValue === HeroColorVariant.black) {\n variant = CtaLinkButtonVariants.heroBlack;\n }\n\n if (!colorVariantValue || colorVariantValue === \"fp_white\") {\n colorVariantValue = HeroColorVariant.white;\n }\n\n const hyHeroClasses = [\n \"hy-hero\",\n `hy-hero--${heroTypeValue}`,\n `hy-hero--${this.heroGroupType}`,\n `hy-hero--${colorVariantValue}`,\n `hy-hero--${this.sizeVariant}`,\n this.hasShortcuts ? 'has-shortcuts' : '',\n ];\n\n const heroTitleClasses = [\"hy-hero__title\", \"hy-heading__hero\"].join(\" \");\n\n // TODO: Refactor, find way to get rid of this.\n window.onload = () => {\n const heroElement = document.getElementsByClassName(\"hy-hero\")[0] as HTMLElement;\n this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);\n window.addEventListener(\"resize\", () => {\n clearTimeout(timeout);\n timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);\n });\n };\n\n if (heroTypeValue === \"front_page\" && this.sizeVariant !== 'full-image') {\n return (\n <Host>\n <div class={hyHeroClasses.join(\" \")}>\n <div class={`hy-hero__container`}>\n {this.createImageElement(this, this._sourceSet, this.setAspectRatio())}\n <div class={`hy-hero__spacer-box`}></div>\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`}>\n <div class={`hy-hero__title-container`}>\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n </div>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <hy-cta-button\n link-content={this.urlTitle}\n sc-label={this.scLabel}\n url={this.url}\n is-external={this.isExternal}\n variant={variant}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <hy-box mb=\"2, 2, 1, 1\" />\n </Host>\n );\n }\n\n if (this.sizeVariant === 'full-image') {\n const linkTarget = this.isExternal ? '_blank' : '_self';\n return (\n <div class={`hy-hero hy-hero--full-image`}>\n <div class={`hy-hero__container`}>\n {this.createImageElement(this, this._sourceSet, this.setAspectRatio(16, 8))}\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`} data-text-color={this.heroTextColor}>\n {this.subtitle && <span class={`hy-hero__subtitle`}>{this.subtitle}</span>}\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <a class=\"hy-hero__link\" href={this.url} aria-label={this.scLabel} target={linkTarget} data-text-color={this.heroTextColor}>\n {this.urlTitle}\n <hy-icon icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <Host>\n <div class={hyHeroClasses.join(\" \")}>\n <div class={`hy-hero__container`}>\n {this.createImageElement(this, this._sourceSet, this.setAspectRatio())}\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`}>\n <div class={`hy-hero__title-container`}>\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n </div>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <hy-cta-button\n link-content={this.urlTitle}\n sc-label={this.scLabel}\n url={this.url}\n is-external={this.isExternal}\n variant={variant}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <hy-box mb=\"2, 2, 1, 1\" />\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"hy-hero.entry.cjs.js","mappings":"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","names":["HeroTypeVariant","HeroGroupTypeVariant","HeroColorVariant","HeroSizeVariant","jsonParserWorker","h","CtaLinkButtonVariants","Host"],"sources":["./src/components/hy-hero/hy-hero.scss?tag=hy-hero","./src/components/hy-hero/hy-hero.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-hero {\n position: relative;\n padding-bottom: 0;\n\n &:not(.hy-hero--full-image) {\n @include breakpoint($wide) {\n margin-top: 32px;\n }\n }\n\n &:not(.has-shortcuts) {\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n }\n\n .without-sidebar & {\n @include breakpoint($extrawide) {\n max-width: 1216px;\n margin-right: auto;\n margin-left: auto;\n }\n }\n\n .with-sidebar:not(.hy-hero--full-image) & {\n @include breakpoint($extrawide) {\n padding-left: 32px;\n padding-right: 32px;\n }\n\n @include breakpoint($xlarge) {\n padding-right: 0;\n padding-left: 0;\n max-width: 1216px;\n margin-right: auto;\n margin-left: auto;\n }\n }\n\n &--full-image {\n --dark-bg: rgba(0, 0, 0, 0.55);\n --light-bg: rgba(255, 255, 255, 0.50);\n --dark-text: var(--brand-main-nearly-black);\n --light-text: var(--grayscale-white);\n \n border-bottom: 1px solid var(--grayscale-medium-dark);\n \n @include breakpoint($wide) {\n border-bottom: 4px solid var(--grayscale-black);\n margin-left: -2rem;\n margin-right: -2rem;\n }\n\n .without-sidebar & {\n @include breakpoint($extrawide) {\n max-width: none;\n margin-left: -2rem;\n margin-right: -2rem;\n }\n }\n\n .hy-hero__container {\n grid-template-columns: repeat(4 , 1fr);\n grid-template-rows: 1fr;\n }\n\n .hy-hero__image-container {\n grid-column: 1 / -1;\n grid-row: 1 / -1;\n object-fit: cover;\n padding: 0;\n width: 100%;\n img {\n aspect-ratio: 16 / 8;\n }\n }\n\n .hy-hero__content-container {\n padding: 0;\n\n @include breakpoint($wide) {\n align-self: center;\n grid-column: 1 / 3;\n grid-row: 1 / -1;\n margin-left: 32px;\n max-width: 95%;\n z-index: 2;\n }\n @include breakpoint($extrawide) {\n margin-left: 0;\n }\n }\n\n .hy-hero__content {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 16px 16px 32px 16px;\n \n @include breakpoint($wide) {\n margin-left: 32px;\n gap: 24px;\n padding: 32px;\n }\n @include breakpoint($extrawide) {\n margin-left: 64px;\n gap: 32px;\n }\n @include breakpoint($xlarge) {\n margin-left: 96px;\n }\n\n @include breakpoint($wide) {\n \n }\n\n &[data-text-color=\"dark_text_light_bg\"] {\n backdrop-filter: blur(250px);\n background-color: var(--grayscale-white);\n color: var(--dark-text);\n\n @include breakpoint($wide) {\n background: var(--light-bg);\n }\n }\n &[data-text-color=\"light_text_dark_bg\"] {\n backdrop-filter: blur(250px);\n background: var(--grayscale-black);\n color: var(--light-text);\n\n @include breakpoint($wide) {\n background: var(--dark-bg);\n }\n }\n &[data-text-color=\"dark_text_no_bg\"] {\n background-color: var(--grayscale-white);\n color: var(--dark-text);\n\n @include breakpoint($wide) {\n background: transparent;\n text-shadow: 0 0 5px var(--grayscale-white);\n }\n }\n &[data-text-color=\"light_text_no_bg\"] {\n background-color: var(--grayscale-black);\n color: var(--light-text);\n\n @include breakpoint($wide) {\n background: transparent;\n text-shadow: 0 0 5px var(--grayscale-black);\n }\n }\n }\n\n .hy-hero__subtitle {\n font-family: var(--main-font-family);\n font-size: 18px;\n font-weight: 700;\n line-height: 1.2;\n position: relative;\n\n &::after {\n aspect-ratio: 1;\n background-color: currentColor;\n bottom: -10px;\n content: '';\n display: block;\n height: 4px;\n left: 0;\n position: absolute;\n width: 64px;\n }\n\n @include breakpoint($wide) {\n font-size: 20px;\n }\n }\n\n h2.hy-hero__title.hy-heading__hero {\n color: inherit !important;\n font-family: var(--main-font-family);\n font-size: 32px;\n font-weight: 700; \n line-height: 1.2;\n\n @include breakpoint($extrawide) {\n font-size: 36px;\n }\n\n @include breakpoint($xlarge) {\n font-size: 64px;\n }\n }\n\n .hy-hero__description {\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 400; \n line-height: 1.5;\n margin: 0;\n padding: 0;\n\n @include breakpoint($xlarge) {\n font-size: 17px;\n }\n }\n\n .hy-hero__actions {\n margin: 0;\n\n .hy-hero__link {\n --light-bg: var(--grayscale-white);\n --dark-bg: var(--grayscale-black);\n --light-text: var(--grayscale-white);\n --dark-text: var(--grayscale-black);\n\n align-items: center;\n display: flex;\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 700;\n gap: 8px;\n line-height: 18px;\n padding: 13px 16px;\n text-decoration: none;\n width: fit-content;\n\n &:hover {\n text-decoration: underline;\n }\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n &[data-text-color=\"dark_text_light_bg\"] {\n background: var(--dark-bg);\n color: var(--light-text);\n svg {fill: var(--light-text)}\n }\n &[data-text-color=\"light_text_dark_bg\"] {\n background: var(--light-bg);\n color: var(--dark-text);\n svg {fill: var(--dark-text)}\n }\n &[data-text-color=\"dark_text_no_bg\"] {\n background: var(--dark-bg);\n color: var(--light-text);\n text-shadow: none;\n svg {fill: var(--light-text)}\n }\n &[data-text-color=\"light_text_no_bg\"] {\n background: var(--light-bg);\n color: var(--dark-text);\n text-shadow: none;\n svg {fill: var(--dark-text)}\n }\n }\n }\n\n .hy-image__image {\n object-fit: cover;\n }\n }\n\n &--white {\n @include breakpoint($wide) {\n margin-top: 0;\n }\n\n &:not(.has-shortcuts) {\n @include breakpoint($wide) {\n padding-bottom: 48px;\n }\n }\n\n &:not(.has-shortcuts):after {\n width: 100%;\n background-color: var(--grayscale-medium-dark);\n height: 1px;\n content: \"\";\n margin: 0 auto;\n display: block;\n\n @include breakpoint($wide) {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n }\n }\n\n &:not(.hy-hero--front_page):after {\n max-width: 1216px;\n }\n }\n}\n\n.hy-hero__container {\n position: relative;\n\n @include breakpoint($wide) {\n display: grid;\n position: relative;\n }\n\n .hy-hero--small & {\n @include breakpoint($wide) {\n grid-template-columns: 60% 1fr;\n }\n }\n\n .hy-hero--large & {\n @include breakpoint($wide) {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n}\n\n.hy-hero__content-container {\n padding: 24px 1rem 40px;\n margin: 0 auto;\n width: 100%;\n\n @include breakpoint($narrow) {\n padding: 40px 2rem;\n }\n\n @include breakpoint($extrawide) {\n align-items: center;\n display: flex;\n padding: 40px 24px;\n }\n\n @include breakpoint($xlarge) {\n max-width: 1216px;\n }\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n\n @include breakpoint($extrawide) {\n padding: 40px 24px 40px 0;\n }\n }\n}\n\n.hy-hero__content {\n position: relative;\n}\n\nh2.hy-hero__title {\n hyphens: auto;\n display: flex;\n flex-grow: 1;\n flex-shrink: 0;\n max-width: 100%;\n width: auto;\n\n .hy-hero--blue & {\n color: var(--grayscale-white) !important;\n }\n\n .hy-hero--black & {\n color: var(--grayscale-white) !important;\n }\n\n .hy-hero--white & {\n color: var(--grayscale-black) !important;\n }\n\n &.hy-heading__hero {\n @include font-size(36px, 33px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: none;\n text-wrap: balance;\n\n @include breakpoint(1024px) {\n @include font-size(36px, 40px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(38px, 48px);\n letter-spacing: -1.3px;\n }\n }\n}\n\n.hy-hero__description {\n @include font-size(16px, 24px);\n font-family: var(--main-font-family);\n margin: 16px 0 0 0;\n padding: 0;\n position: relative;\n text-wrap: pretty;\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px);\n }\n\n .hy-hero--black & {\n color: var(--grayscale-white);\n }\n\n .hy-hero--blue & {\n color: var(--grayscale-white);\n }\n\n .hy-hero--white & {\n color: var(--grayscale-black);\n }\n}\n\n.hy-hero__actions {\n margin-top: 24px;\n}\n\n.hy-hero__image-container {\n margin: 0;\n padding: 0;\n position: relative;\n\n figure {\n margin: 0;\n }\n\n @include breakpoint($wide) {\n order: 2;\n padding: 8px 0;\n }\n\n .hy-hero--front_page & {\n @include breakpoint($wide) {\n padding: 0;\n }\n }\n}\n\n.hy-image__image {\n display: block;\n height: 100%;\n min-height: 205px;\n object-fit: contain;\n width: 100%;\n\n .has-cover & {\n object-fit: cover;\n }\n}\n\n// Research group and generic with minor landing\n.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group,\n.hy-hero.hy-hero--research_group {\n h2.hy-hero__title.hy-heading__hero {\n @include font-size(32px, 38px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: uppercase;\n\n @include breakpoint(1024px) {\n @include font-size(46px, 54px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n }\n}\n\n// FRONTPAGE VARIATION\n\n.hy-hero.hy-hero--front_page {\n &.hy-hero--white {\n @include breakpoint($wide) {\n padding-top: 40px;\n margin-top: 0;\n }\n }\n\n h2.hy-hero__title.hy-heading__hero {\n @include font-size(32px, 38px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n text-transform: uppercase;\n\n @include breakpoint(1024px) {\n @include font-size(46px, 54px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n }\n\n @include breakpoint($extrawide) {\n margin-left: -32px;\n margin-right: -32px;\n max-width: none;\n }\n\n .hy-hero__container {\n position: relative;\n\n @include breakpoint($wide) {\n display: flex;\n position: relative;\n }\n }\n\n .hy-hero__content-container {\n padding: 24px 1rem 40px;\n margin: 0 auto;\n width: 100%;\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n }\n\n @include breakpoint($narrow) {\n padding: 24px 2rem 40px;\n }\n\n @include breakpoint($wide) {\n align-items: center;\n display: flex;\n min-height: 330px;\n padding: 56px 2rem;\n }\n\n @include breakpoint(1060px) {\n min-height: 373px;\n }\n\n @include breakpoint(1160px) {\n min-height: 480px;\n }\n\n @include breakpoint($extrawide) {\n padding-left: 32px;\n padding-right: 8px;\n }\n\n @include breakpoint(1260px) {\n min-height: 443px;\n }\n\n @include breakpoint(1280px) {\n max-width: 1216px;\n padding-left: 0;\n }\n\n @include breakpoint(1360px) {\n min-height: 478px;\n }\n\n @include breakpoint(1460px) {\n min-height: 513px;\n }\n\n @include breakpoint(1560px) {\n min-height: 548px;\n }\n\n @include breakpoint($xlarge) {\n padding-left: 0;\n }\n\n @include breakpoint(1660px) {\n min-height: 583px;\n }\n\n @include breakpoint(1760px) {\n min-height: 619px;\n }\n\n @include breakpoint(1860px) {\n min-height: 654px;\n }\n\n @include breakpoint(1920px) {\n min-height: 675px;\n }\n }\n\n &.hy-hero--small {\n .hy-hero__image-container {\n @include breakpoint($wide) {\n width: 40%;\n }\n }\n\n .hy-hero__content {\n @include breakpoint($wide) {\n max-width: 60%;\n }\n }\n }\n\n &.hy-hero--large {\n .hy-hero__image-container {\n @include breakpoint($wide) {\n width: 50%;\n }\n }\n\n .hy-hero__content {\n @include breakpoint($wide) {\n max-width: 50%;\n }\n }\n }\n\n .hy-hero__image-container {\n background-position: 50% 50%;\n background-size: cover;\n background: transparent;\n margin: 0;\n padding: 0;\n position: relative;\n\n figure {\n margin: 0;\n }\n\n @include breakpoint($wide) {\n background-color: var(--grayscale-white);\n bottom: 0;\n order: 2;\n padding: 8px 0;\n position: absolute;\n right: 0;\n top: 0;\n }\n }\n\n .hy-hero__content {\n position: relative;\n\n @include breakpoint($wide) {\n padding-right: 24px;\n }\n }\n\n .hy-image__image {\n display: block;\n height: 100%;\n min-height: 205px;\n object-fit: cover;\n width: 100%;\n }\n}\n\n.hy-hero__spacer-box {\n display: none;\n\n @include breakpoint($wide) {\n display: block;\n order: 1;\n position: absolute;\n inset: 0;\n }\n\n .hy-hero--small & {\n @include breakpoint($wide) {\n width: 60%;\n }\n }\n\n .hy-hero--large & {\n @include breakpoint($wide) {\n width: 50%;\n }\n }\n\n .hy-hero--black & {\n background-color: var(--grayscale-black);\n }\n\n .hy-hero--blue & {\n background-color: var(--brand-main);\n }\n\n .hy-hero--white & {\n background-color: var(--grayscale-white);\n }\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string | null;\n}\nlet timeout = null;\nlet delay = 250;\n\nimport {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport {\n CtaLinkButtonVariants,\n HeroColorVariant,\n HeroSizeVariant,\n HeroGroupTypeVariant,\n HeroTypeVariant,\n HeroTextColor,\n} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-hero\",\n styleUrl: \"hy-hero.scss\",\n shadow: false,\n})\nexport class HyHero {\n @Element() el: HTMLElement;\n @Prop() heroType: HeroTypeVariant = HeroTypeVariant.landing;\n @Prop() heroGroupType: HeroGroupTypeVariant = HeroGroupTypeVariant.default;\n @Prop() colorVariant: HeroColorVariant = HeroColorVariant.blue;\n @Prop() sizeVariant: HeroSizeVariant = HeroSizeVariant.large;\n @Prop() heroTextColor: HeroTextColor = null;\n @Prop() image: string;\n @Prop() imageHeight: number = null;\n @Prop() imageWidth: number = null;\n @Prop() imageAltText: string = \"\";\n @Prop() disableLazy: boolean = false;\n @Prop() hasShortcuts: boolean = false;\n @Prop() heading: string;\n @Prop() description: string;\n @Prop() subtitle: string;\n @Prop() url: string;\n @Prop() urlTitle: string;\n @Prop() scLabel?: string;\n @Prop() isExternal: boolean = false;\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] | string;\n\n async componentWillLoad() {\n this._sourceSet = await jsonParserWorker(this.sourceSet);\n }\n\n // TODO: Refactor, find way to get rid of this.\n handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {\n const heroContentContainerElement = heroElement.getElementsByClassName(\n \"hy-hero__content-container\"\n )[0] as HTMLElement;\n\n if (heroSizeVariant === \"small\") {\n if (heroContentContainerElement.offsetHeight >= 300) {\n heroElement.classList.add(\"has-cover\");\n } else {\n heroElement.classList.remove(\"has-cover\");\n }\n }\n\n if (heroSizeVariant === \"large\") {\n if (heroContentContainerElement.offsetHeight >= 344) {\n heroElement.classList.add(\"has-cover\");\n } else {\n heroElement.classList.remove(\"has-cover\");\n }\n }\n }\n\n createImageElement(props, srcSet, aspectRatio) {\n return (\n <div class={`hy-hero__image-container`} style={aspectRatio}>\n {props.image &&\n (srcSet ? (\n <picture>\n {srcSet.map((item) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n loading={props.disableLazy ? \"eager\" : \"lazy\"}\n alt={props.imageAltText}\n class={`hy-image__image`}\n src={props.image}\n height={props.imageHeight}\n width={props.imageWidth}\n />\n </picture>\n ) : (\n <img\n loading={props.disableLazy ? \"eager\" : \"lazy\"}\n alt={props.imageAltText}\n class={`hy-image__image`}\n src={props.image}\n height={props.imageHeight}\n width={props.imageWidth}\n />\n ))}\n </div>\n );\n }\n\n // TODO: Refactor, is this still even used?\n setAspectRatio(aspectRatioWidth = 16, aspectRatioHeight = 10) {\n const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n return {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n //\"aspect-ratio\": `${aspectRatioWidth} / ${aspectRatioHeight}` as \"aspectRatio\",\n };\n }\n\n render() {\n let variant = CtaLinkButtonVariants.heroWhite;\n let colorVariantValue = this.colorVariant;\n let heroTypeValue = this.heroType;\n\n //TODO: Refactor\n if (this.heroType === \"minor_landing\") {\n colorVariantValue = HeroColorVariant.white;\n heroTypeValue = HeroTypeVariant.landing;\n }\n\n if (colorVariantValue === HeroColorVariant.blue) {\n variant = CtaLinkButtonVariants.heroBlue;\n }\n\n if (colorVariantValue === HeroColorVariant.black) {\n variant = CtaLinkButtonVariants.heroBlack;\n }\n\n if (!colorVariantValue || colorVariantValue === \"fp_white\") {\n colorVariantValue = HeroColorVariant.white;\n }\n\n const hyHeroClasses = [\n \"hy-hero\",\n `hy-hero--${heroTypeValue}`,\n `hy-hero--${this.heroGroupType}`,\n `hy-hero--${colorVariantValue}`,\n `hy-hero--${this.sizeVariant}`,\n this.hasShortcuts ? 'has-shortcuts' : '',\n ];\n\n const heroTitleClasses = [\"hy-hero__title\", \"hy-heading__hero\"].join(\" \");\n\n // TODO: Refactor, find way to get rid of this.\n window.onload = () => {\n const heroElement = document.getElementsByClassName(\"hy-hero\")[0] as HTMLElement;\n this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);\n window.addEventListener(\"resize\", () => {\n clearTimeout(timeout);\n timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);\n });\n };\n\n if (heroTypeValue === \"front_page\" && this.sizeVariant !== 'full-image') {\n return (\n <Host>\n <div class={hyHeroClasses.join(\" \")}>\n <div class={`hy-hero__container`}>\n {this.createImageElement(this, this._sourceSet, this.setAspectRatio())}\n <div class={`hy-hero__spacer-box`}></div>\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`}>\n <div class={`hy-hero__title-container`}>\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n </div>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <hy-cta-button\n link-content={this.urlTitle}\n sc-label={this.scLabel}\n url={this.url}\n is-external={this.isExternal}\n variant={variant}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <hy-box mb=\"2, 2, 1, 1\" />\n </Host>\n );\n }\n\n if (this.sizeVariant === 'full-image') {\n const linkTarget = this.isExternal ? '_blank' : '_self';\n return (\n <div class={`hy-hero hy-hero--full-image`}>\n <div class={`hy-hero__container`}>\n {this.createImageElement(this, this._sourceSet, this.setAspectRatio(16, 8))}\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`} data-text-color={this.heroTextColor}>\n {this.subtitle && <span class={`hy-hero__subtitle`}>{this.subtitle}</span>}\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <a class=\"hy-hero__link\" href={this.url} aria-label={this.scLabel} target={linkTarget} data-text-color={this.heroTextColor}>\n {this.urlTitle}\n <hy-icon icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <Host>\n <div class={hyHeroClasses.join(\" \")}>\n <div class={`hy-hero__container`}>\n {this.createImageElement(this, this._sourceSet, this.setAspectRatio())}\n <div class={`hy-hero__content-container`}>\n <div class={`hy-hero__content`}>\n <div class={`hy-hero__title-container`}>\n <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n </div>\n {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n {this.url && (\n <div class={`hy-hero__actions`}>\n <hy-cta-button\n link-content={this.urlTitle}\n sc-label={this.scLabel}\n url={this.url}\n is-external={this.isExternal}\n variant={variant}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <hy-box mb=\"2, 2, 1, 1\" />\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/cjs/hy-list-item.cjs.entry.js CHANGED
@@ -173,7 +173,7 @@ const HyListItem = class {
173
173
  `hy-list-item__${this.variant}__info-container__outgoing-link`,
174
174
  `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,
175
175
  ].join(" ");
176
- return (index.h("article", null, index.h("a", { class: classAttributes, href: this.url, target: target, "aria-label": this.scLabel }, index.h("div", { class: classInfoContainerAttributes }, index.h("div", { class: classInfoContainerHeader }, index.h("div", { class: "icon" }, index.h("hy-icon", { icon: "hy-icon-units-and-faculties", size: 18 })), this.itemType), index.h("div", { class: classInfoContainerTitle }, this.itemTitle), this.itemDescription && (index.h("div", { class: classInfoContainerDescription, innerHTML: this.truncateDescription
176
+ return (index.h("div", { class: "hy-list-item__wrapper" }, index.h("a", { class: classAttributes, href: this.url, target: target, "aria-label": this.scLabel }, index.h("div", { class: classInfoContainerAttributes }, index.h("div", { class: classInfoContainerHeader }, index.h("div", { class: "icon" }, index.h("hy-icon", { icon: "hy-icon-units-and-faculties", size: 18 })), this.itemType), index.h("div", { class: classInfoContainerTitle }, this.itemTitle), this.itemDescription && (index.h("div", { class: classInfoContainerDescription, innerHTML: this.truncateDescription
177
177
  ? truncate(this.itemDescription, this.truncateLimit)
178
178
  : this.itemDescription }))), index.h("div", { class: classInfoContainerOutgoingLink }, index.h("span", { class: "icon" }, index.h("hy-icon", { icon: "hy-icon-done", size: 14 })), index.h("span", { class: "label" }, this.outGoingUrlLabel)))));
179
179
  }
package/dist/cjs/hy-list-item.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"hy-list-item.entry.cjs.js","mappings":"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","names":["ListItemVariants","h"],"sources":["./src/components/hy-list-item/hy-list-item.scss?tag=hy-list-item","./src/components/hy-list-item/hy-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-list-item {\n display: flex;\n font-family: var(--main-font-family);\n text-decoration: none;\n\n &__default {\n margin-bottom: 28px;\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n\n &__info-container {\n &__header {\n @include font-size(12px, 14px);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 4px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n margin-bottom: 2px;\n }\n }\n\n &__title {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n color: var(--brand-main-light);\n letter-spacing: -0.56px;\n margin-bottom: 6px;\n\n @include breakpoint($narrow) {\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n margin-bottom: 10px;\n }\n @include breakpoint($xlarge) {\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n margin-bottom: 8px;\n }\n\n &__large {\n // >1200 no sidebar;\n @include breakpoint($extrawide) {\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n margin-bottom: 8px;\n }\n }\n }\n\n &__link-container {\n align-items: center;\n display: flex;\n margin-bottom: 6px;\n\n @include breakpoint($narrow) {\n margin-bottom: 8px;\n }\n }\n\n &__link {\n @include font-size(12px, 16px);\n color: var(--grayscale-dark);\n letter-spacing: -0.07px;\n margin-left: 4px;\n\n @include breakpoint($narrow) {\n margin-left: 5px;\n }\n\n &__icon {\n svg {\n fill: var(--grayscale-dark);\n }\n }\n }\n\n &__description {\n @include font-size(14px, 20px);\n color: var(--grayscale-black);\n letter-spacing: 0;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n }\n }\n }\n\n // Opem position\n &__position {\n background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);\n flex-direction: column;\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &__info-container {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n margin: 0;\n padding: 12px;\n position: relative;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n padding: 12px 16px;\n }\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n padding: 20px 24px;\n }\n\n &__header {\n display: flex;\n align-items: center;\n flex-direction: row;\n color: var(--brand-main);\n font-family: var(--main-font-family);\n font-size: 14px;\n font-weight: 600;\n letter-spacing: -0.2px;\n line-height: 14px;\n margin-bottom: 14px;\n\n .icon {\n margin-right: 0.75rem;\n\n svg {\n fill: var(--brand-main);\n }\n }\n }\n\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n padding: 20px 24px;\n }\n }\n\n &__data {\n display: flex;\n flex-direction: column;\n }\n\n &__title {\n @include font-size(18px, 20px);\n @include font-weight($bold);\n font-family: var(--main-font-family);\n color: var(--grayscale-black);\n margin-bottom: 12px;\n letter-spacing: -0.45px;\n line-height: 22px;\n\n @include breakpoint($narrow) {\n letter-spacing: -0.5px;\n }\n }\n\n &__description {\n @include font-size(14px);\n color: var(--grayscale-dark-text);\n display: none;\n font-family: var(--main-font-family);\n letter-spacing: 0.8px;\n margin-bottom: 14px;\n line-height: 20px;\n\n @include breakpoint($narrow) {\n display: block;\n }\n }\n\n &__outgoing-link {\n align-items: flex-end;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n position: relative;\n padding: 0 24px 24px 12px;\n\n @include breakpoint($narrow) {\n justify-content: center;\n padding: 0 24px 24px 0;\n }\n\n .label {\n color: var(--link-blue);\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 600;\n letter-spacing: -0.3px;\n line-height: 20px;\n }\n\n .icon {\n margin-right: 4px;\n margin-bottom: 2px;\n\n svg {\n fill: var(--link-blue);\n }\n }\n }\n }\n }\n\n // Degree programmes.\n &__degree {\n background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);\n flex-direction: column;\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &__image-container {\n display: block;\n position: relative;\n flex: 1;\n\n @include breakpoint($narrow) {\n flex: 0 0 24%;\n }\n\n &__image {\n vertical-align: bottom;\n max-width: 100%;\n height: 100%;\n\n img {\n object-fit: cover;\n width: 100%;\n height: 100%;\n }\n }\n\n span {\n @include font-weight($semibold);\n @include font-size(12px, 14px);\n background-color: var(--additional-yellow);\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);\n color: var(--grayscale-black);\n left: -4px;\n letter-spacing: -0.07px;\n padding: 5px 8px;\n position: absolute;\n top: 16px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n left: -8px;\n }\n @include breakpoint($wide) {\n top: 22px;\n }\n }\n }\n\n &__info-container {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n margin: 0;\n padding: 12px;\n position: relative;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n padding: 12px 16px;\n }\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n padding: 20px 24px;\n }\n\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n padding: 20px 24px;\n }\n }\n\n &__data {\n display: flex;\n flex-direction: column;\n }\n\n &__title {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.54px;\n margin-bottom: 8px;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n @include font-size(18px, 24px);\n letter-spacing: -0.5px;\n }\n\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n @include font-size(20px, 26px);\n letter-spacing: -0.6px;\n }\n\n &__large {\n // >1200 no sidebar;\n @include breakpoint($extrawide) {\n @include font-size(20px, 26px);\n letter-spacing: -0.6px;\n }\n }\n }\n\n &__description {\n @include font-size(14px, 18px);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 16px;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n letter-spacing: -0.2;\n }\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n @include font-size(16px, 20px);\n letter-spacing: -0.25px;\n }\n\n &__large {\n // >1200 no sidebar;\n @include breakpoint($extrawide) {\n @include font-size(16px, 20px);\n letter-spacing: -0.25px;\n }\n }\n }\n\n &__metadata-wrapper {\n display: flex;\n flex-direction: column;\n margin-top: 16px;\n width: 100%;\n\n @include breakpoint($narrow) {\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n }\n\n &.link-only {\n justify-content: flex-end;\n }\n }\n\n &__additional-info {\n width: 100%;\n\n &__item {\n @include font-size(12px, 16px);\n @include font-weight($light);\n align-items: center;\n color: var(--grayscale-black);\n display: flex;\n flex-direction: row;\n letter-spacing: -0.2px;\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 16px);\n }\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(14px, 16px);\n }\n }\n }\n &__item.active::before {\n content: \" \";\n box-sizing: border-box;\n height: 14px;\n width: 14px;\n border: 3px solid #ffffff;\n border-radius: 50%;\n background-color: #f9a21a;\n left: -7px;\n position: absolute;\n\n @include breakpoint($narrow) {\n border: none;\n height: 8px;\n margin-right: 6px;\n width: 8px;\n left: 0;\n position: relative;\n }\n }\n }\n\n &__outgoing-link {\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n position: relative;\n width: 100%;\n\n a {\n align-items: center;\n bottom: 0;\n top: 0;\n display: flex;\n flex-direction: row;\n position: relative;\n right: -18px;\n text-decoration: none;\n\n @include breakpoint($wide) {\n right: -22px;\n }\n @include breakpoint($xlarge) {\n right: -30px;\n }\n\n .label {\n @include font-size(14px, 16px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.5px;\n margin-right: 8px;\n text-align: right;\n }\n\n .icon-wrapper {\n background-color: var(--brand-main-light);\n z-index: 10;\n\n .icon {\n position: relative;\n overflow: hidden;\n\n svg {\n background-color: transparent;\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);\n fill: var(--grayscale-white);\n padding: 6.4px;\n\n @include breakpoint($xlarge) {\n height: 36px;\n width: 36px;\n padding: 7.2px;\n }\n }\n }\n }\n }\n\n // >1200 no sidebar;\n &__large {\n svg {\n @include breakpoint($extrawide) {\n height: 36px;\n width: 36px;\n padding: 7.2px;\n }\n }\n }\n }\n }\n }\n}\n\n.hy-list-item-wrapper {\n font-family: var(--main-font-family);\n\n &__degree {\n margin-bottom: 16px;\n @include breakpoint($narrow) {\n flex-direction: row;\n margin-bottom: 24px;\n }\n @include breakpoint($wide) {\n margin-bottom: 28px;\n }\n @include breakpoint($xlarge) {\n margin-bottom: 32px;\n }\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n margin-bottom: 32px;\n }\n }\n\n &__related-info {\n background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n margin-top: 4px;\n padding: 0 12px 0 16px;\n\n @include breakpoint($narrow) {\n padding: 0 24px 0 16px;\n }\n @include breakpoint($wide) {\n margin-top: 6px;\n padding: 0 24px 0 24px;\n }\n @include breakpoint($xlarge) {\n margin-top: 8px;\n }\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n margin-top: 8px;\n }\n }\n\n &__heading {\n &__link {\n text-decoration: none;\n }\n\n &__button {\n @include font-size(12px, 16px);\n align-items: center;\n background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n border: none;\n color: var(--grayscale-black);\n display: flex;\n flex-direction: row;\n font-family: var(--main-font-family);\n letter-spacing: -0.2px;\n height: 100%;\n padding: 8px 0;\n text-align: left;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(12px, 20px);\n padding: 14px 0;\n }\n @include breakpoint($wide) {\n @include font-size(14px, 20px);\n letter-spacing: -0.4px;\n padding: 18px 0;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &__is-open {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n &__icon {\n margin-right: 0.5rem;\n z-index: 0;\n\n @include breakpoint($wide) {\n margin-right: 12px;\n }\n\n svg {\n fill: var(--brand-main);\n height: 14px;\n width: 14px;\n\n @include breakpoint($wide) {\n height: 18px;\n width: 18px;\n }\n }\n }\n }\n\n &__content {\n display: none;\n\n &__is-open {\n border-top: 1px solid #d2d2d2;\n display: flex;\n flex-direction: column;\n padding: 20px 8px 5px 8px;\n\n @include breakpoint($wide) {\n padding: 20px 0 14px 0;\n }\n }\n }\n\n &__link {\n @include font-size(14px, 16px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.4px;\n margin-bottom: 16px;\n text-decoration: none;\n }\n }\n }\n}\n","export interface RelatedLink {\n label: string;\n url: string;\n isExternal: boolean;\n scLabel: string;\n}\n\nexport interface AdditionalInfo {\n text: string;\n isActive: boolean;\n}\n\nexport interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string | null;\n}\n\nimport {Component, h, Prop, Watch, State, Listen, Element} from \"@stencil/core\";\nimport {ListItemVariants} from \"../../utils/utils\";\n\nlet keys = {\n enter: \"Enter\",\n space: \"Space\",\n};\n\n@Component({\n tag: \"hy-list-item\",\n styleUrl: \"hy-list-item.scss\",\n shadow: false,\n})\nexport class HyListItem {\n @Element() el: HTMLElement;\n @State() isExpandedRelatedContent: boolean = false;\n @Prop() variant: ListItemVariants = ListItemVariants.default;\n @Prop() itemType?: string;\n @Prop() itemTitle?: string;\n @Prop() itemDescription?: any;\n @Prop() url?: string;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() itemImageUrl?: string;\n @Prop() itemImageAlt?: string;\n @Prop() disableLazy: boolean = false;\n @Prop() relatedLinksBlockTitle?: string;\n private _relatedLinks: RelatedLink[];\n @Prop() relatedLinks?: RelatedLink[] | string;\n @Prop() imageLabel?: string;\n @Prop() outGoingUrlLabel?: string = \"Go to programme page\";\n private _additionalInfo: AdditionalInfo[];\n @Prop() additionalInfo?: AdditionalInfo[] | string;\n @Prop() headerstyle: string = \"common\";\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] | string;\n @Prop() truncateDescription: boolean = false;\n @Prop() truncateLimit: number = 140;\n\n @State() _imageMinHeight: number = 0;\n @State() _imageMinWidth: number = 0;\n\n @Watch(\"relatedLinks\")\n relatedLinksWatcher(newValue: RelatedLink[] | string) {\n if (typeof newValue === \"string\") {\n this._relatedLinks = JSON.parse(newValue);\n } else {\n this._relatedLinks = newValue;\n }\n }\n\n @Watch(\"additionalInfo\")\n additionalInfoWatcher(newValue: AdditionalInfo[] | string) {\n if (typeof newValue === \"string\") {\n this._additionalInfo = JSON.parse(newValue);\n } else {\n this._additionalInfo = newValue;\n }\n }\n\n @Watch(\"sourceSet\") srcSetWatcher(data: ImageSrcSet[] | string) {\n this._sourceSet = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n expandRelatedInfoPanel(target) {\n let contentSelector = `hy-list-item-wrapper__${this.variant}__related-info__content`;\n let targetButtonClass = \"hy-list-item-wrapper__degree__related-info__heading__button\";\n let contentSection = document.querySelectorAll(`[aria-labelledBy=\"${target.id}\"]`)[0] as HTMLElement;\n if (contentSection) {\n if (!this.isExpandedRelatedContent) {\n contentSection.classList.add(`${contentSelector}__is-open`);\n target.classList.add(`${targetButtonClass}__is-open`);\n } else {\n contentSection.classList.remove(`${contentSelector}__is-open`);\n target.classList.remove(`${targetButtonClass}__is-open`);\n }\n this.isExpandedRelatedContent = !this.isExpandedRelatedContent;\n }\n }\n\n @Listen(\"keydown\")\n handleKeyDown(event: KeyboardEvent) {\n const key = event.code;\n let target = event.target as HTMLButtonElement;\n\n const targetElement = target.tagName.toLowerCase();\n const possibleTags = [targetElement].some((r) => [\"svg\", \"path\", \"button\", \"a\"].indexOf(r) >= 0);\n\n if (\n target &&\n possibleTags &&\n !target.classList.contains(\"hy-list-item-wrapper__degree__related-info__link\") &&\n [keys.enter, keys.space].includes(key)\n ) {\n if (targetElement !== \"button\") {\n target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);\n }\n this.expandRelatedInfoPanel(target);\n event.preventDefault();\n }\n }\n\n @Listen(\"click\")\n handleClick(event) {\n let target = event.target as HTMLElement;\n const targetElement = target.tagName.toLowerCase();\n const possibleTags = [targetElement].some((r) => [\"svg\", \"path\", \"button\", \"a\"].indexOf(r) >= 0);\n\n if (target && possibleTags && !target.classList.contains(\"hy-list-item-wrapper__degree__related-info__link\")) {\n if (targetElement !== \"button\") {\n target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);\n }\n this.expandRelatedInfoPanel(target);\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n componentWillLoad() {\n this.relatedLinksWatcher(this.relatedLinks);\n this.additionalInfoWatcher(this.additionalInfo);\n this.srcSetWatcher(this.sourceSet);\n }\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n if (this.variant == ListItemVariants.degreeProgramme) {\n const image = document.querySelector(\".hy-list-item__degree__image-container__image img\") as any;\n\n if (image) {\n image.addEventListener(\"load\", function () {\n const outputImageAspectRatio = 1;\n const imageHeight = image.naturalHeight;\n const imageWidth = image.naturalWidth;\n const inputImageAspectRatio = imageWidth / imageHeight;\n this._imageMinWidth = imageWidth;\n this._imageMinHeight = imageHeight;\n if (inputImageAspectRatio > outputImageAspectRatio) {\n this._imageMinWidth = imageHeight * outputImageAspectRatio;\n } else if (inputImageAspectRatio < outputImageAspectRatio) {\n this._imageMinHeight = imageWidth / outputImageAspectRatio;\n }\n });\n }\n }\n }\n\n render() {\n const classWrapperAttributes = [\n \"hy-list-item-wrapper\",\n `hy-list-item-wrapper__${this.variant}`,\n `hy-list-item-wrapper__${this.variant}__${this.headerstyle}`,\n ].join(\" \");\n const classAttributes = [\"hy-list-item\", `hy-list-item__${this.variant}`].join(\" \");\n const classInfoContainerAttributes = [\n `hy-list-item__${this.variant}__info-container`,\n `hy-list-item__${this.variant}__info-container__${this.headerstyle}`,\n ].join(\" \");\n /*const classInfoContainerDataAttributes = [\n `hy-list-item__${this.variant}__info-container__data`,\n `hy-list-item__${this.variant}__info-container__data__${this.headerstyle}`,\n ].join(' ');*/\n const classInfoContainerHeader = [\n `hy-list-item__${this.variant}__info-container__header`,\n `hy-list-item__${this.variant}__info-container__header__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerTitle = [\n `hy-list-item__${this.variant}__info-container__title`,\n `hy-list-item__${this.variant}__info-container__title__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerDescription = [\n `hy-list-item__${this.variant}__info-container__description`,\n `hy-list-item__${this.variant}__info-container__description__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerLinkContainer = [`hy-list-item__${this.variant}__info-container__link-container`].join(\" \");\n const classInfoContainerLinkIcon = [`hy-list-item__${this.variant}__info-container__link__icon`].join(\" \");\n const classInfoContainerLink = [`hy-list-item__${this.variant}__info-container__link`].join(\" \");\n\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n function truncate(str, n) {\n return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n }\n\n switch (this.variant) {\n case ListItemVariants.position: {\n const classInfoContainerOutgoingLink = [\n `hy-list-item__${this.variant}__info-container__outgoing-link`,\n `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,\n ].join(\" \");\n return (\n <article>\n <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>\n <div class={classInfoContainerAttributes}>\n <div class={classInfoContainerHeader}>\n <div class=\"icon\">\n <hy-icon icon={\"hy-icon-units-and-faculties\"} size={18} />\n </div>\n {this.itemType}\n </div>\n <div class={classInfoContainerTitle}>{this.itemTitle}</div>\n\n {this.itemDescription && (\n <div\n class={classInfoContainerDescription}\n innerHTML={\n this.truncateDescription\n ? truncate(this.itemDescription, this.truncateLimit)\n : this.itemDescription\n }\n ></div>\n )}\n </div>\n <div class={classInfoContainerOutgoingLink}>\n <span class=\"icon\">\n <hy-icon icon={\"hy-icon-done\"} size={14}></hy-icon>\n </span>\n <span class=\"label\">{this.outGoingUrlLabel}</span>\n </div>\n </a>\n </article>\n );\n }\n case ListItemVariants.degreeProgramme: {\n const classImageContainerAttributes = [`hy-list-item__${this.variant}__image-container`].join(\" \");\n const classImageContainerImage = [`hy-list-item__${this.variant}__image-container__image`].join(\" \");\n\n const classInfoContainerAdditionalInfoAttributes = [\n `hy-list-item__${this.variant}__info-container__additional-info`,\n `hy-list-item__${this.variant}__info-container__additional-info__${this.headerstyle}`,\n ].join(\" \");\n\n const withAdditionalInfo = this._additionalInfo && this._additionalInfo.length > 0 ? \"\" : \"link-only\";\n const classMetadataWrapper = [\n `hy-list-item__${this.variant}__info-container__metadata-wrapper`,\n withAdditionalInfo,\n ].join(\" \");\n const classContentWrapper = [`hy-list-item__${this.variant}__info-container__content-wrapper`].join(\" \");\n\n const classInfoContainerOutgoingLink = [\n `hy-list-item__${this.variant}__info-container__outgoing-link`,\n `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerOutgoingLinkUrl = [\n `hy-list-item__${this.variant}__info-container__outgoing-link__link`,\n ].join(\" \");\n\n const classRelatedInfoContainer = [\n `hy-list-item-wrapper__${this.variant}__related-info`,\n `hy-list-item-wrapper__${this.variant}__related-info__${this.headerstyle}`,\n ].join(\" \");\n const classRelatedInfoHeading = [`hy-list-item-wrapper__${this.variant}__related-info__heading`].join(\" \");\n const classRelatedInfoHeadingLink = [`hy-list-item-wrapper__${this.variant}__related-info__heading__link`].join(\n \" \"\n );\n const classRelatedInfoHeadingButton = [\n `hy-list-item-wrapper__${this.variant}__related-info__heading__button`,\n ].join(\" \");\n const classRelatedInfoHeadingIcon = [`hy-list-item-wrapper__${this.variant}__related-info__heading__icon`].join(\n \" \"\n );\n const classRelatedInfoContent = [`hy-list-item-wrapper__${this.variant}__related-info__content`].join(\" \");\n const classRelatedInfoLink = [`hy-list-item-wrapper__${this.variant}__related-info__link`].join(\" \");\n\n const titleAsId =\n this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0\n ? `${this.itemTitle}-${this.relatedLinksBlockTitle}`.toLowerCase().replace(/\\W/g, \"-\")\n : \"\";\n const accordionItemHref = \"#\" + titleAsId + \"--title\";\n\n const relatedLinksCount =\n this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0 ? this._relatedLinks.length : \"\";\n\n return [\n <article class={classWrapperAttributes}>\n <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>\n <div class={classImageContainerAttributes}>\n <div class={classImageContainerImage}>\n {this._sourceSet ? (\n <picture>\n {this._sourceSet.map((item) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.itemImageUrl}\n alt={this.itemImageAlt}\n style={{\n \"--minheight\": `${this._imageMinHeight}px` as \"minHeight\",\n \"--minwidth\": `${this._imageMinWidth}px` as \"minWidth\",\n }}\n />\n </picture>\n ) : (\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.itemImageUrl}\n alt={this.itemImageAlt}\n style={{\n \"--minheight\": `${this._imageMinHeight}px` as \"minHeight\",\n \"--minwidth\": `${this._imageMinWidth}px` as \"minWidth\",\n }}\n />\n )}\n </div>\n {this.imageLabel && <span>{this.imageLabel}</span>}\n </div>\n <div class={classInfoContainerAttributes}>\n <div class={classContentWrapper}>\n <div class={classInfoContainerTitle}>{this.itemTitle}</div>\n {this.itemDescription && (\n <div class={classInfoContainerDescription} innerHTML={this.itemDescription}></div>\n )}\n </div>\n <div class={classMetadataWrapper}>\n {this._additionalInfo && (\n <div class={classInfoContainerAdditionalInfoAttributes}>\n {this._additionalInfo.map((x) => {\n let classInfoContainerAdditionalInfoItem = [\n `hy-list-item__${this.variant}__info-container__additional-info__item`,\n `hy-list-item__${this.variant}__info-container__additional-info__item__${this.headerstyle}`,\n `${x.isActive.toString() == \"true\" ? \"active\" : \"\"}`,\n ].join(\" \");\n return <div class={classInfoContainerAdditionalInfoItem}>{x.text}</div>;\n })}\n </div>\n )}\n <div class={classInfoContainerOutgoingLink}>\n <a\n href={this.url}\n target={target}\n aria-label={this.scLabel}\n class={classInfoContainerOutgoingLinkUrl}\n tabindex=\"-1\"\n >\n <span class=\"label\">{this.outGoingUrlLabel}</span>\n <span class=\"icon-wrapper\">\n <div class=\"icon\">\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={32} />\n </div>\n </span>\n </a>\n </div>\n </div>\n </div>\n </a>\n {this.relatedLinksBlockTitle && (\n <div class={classRelatedInfoContainer}>\n <div class={classRelatedInfoHeading}>\n <a href={accordionItemHref} class={classRelatedInfoHeadingLink} tabindex=\"-1\">\n <button\n aria-expanded=\"false\"\n aria-controls={`${titleAsId}--content`}\n class={classRelatedInfoHeadingButton}\n id={`${titleAsId}--title`}\n >\n <span class={classRelatedInfoHeadingIcon}>\n <hy-icon icon={\"hy-icon-caret-down\"} size={14} />\n </span>\n {this.relatedLinksBlockTitle} ({relatedLinksCount})\n </button>\n </a>\n </div>\n <div\n class={classRelatedInfoContent}\n aria-labelledBy={`${titleAsId}--title`}\n id={`${titleAsId}--content`}\n role=\"region\"\n aria-hidden=\"true\"\n >\n {this._relatedLinks.map((x) => {\n let relatedLinkTarget = x.isExternal ? \"_blank\" : \"_self\";\n return (\n <a class={classRelatedInfoLink} href={x.url} target={target} aria-label={relatedLinkTarget}>\n {x.label}\n </a>\n );\n })}\n </div>\n </div>\n )}\n </article>,\n ];\n }\n default: {\n return (\n <article>\n <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>\n <div class={classInfoContainerAttributes}>\n <div class={classInfoContainerHeader}>{this.itemType}</div>\n <div class={classInfoContainerTitle}>{this.itemTitle}</div>\n\n <div class={classInfoContainerLinkContainer}>\n <span class={classInfoContainerLinkIcon}>\n <hy-icon icon={\"hy-icon-link\"} size={15} />\n </span>\n <div class={classInfoContainerLink}>{this.url}</div>\n </div>\n\n {this.itemDescription && (\n <div class={classInfoContainerDescription} innerHTML={this.itemDescription}></div>\n )}\n </div>\n </a>\n </article>\n );\n }\n }\n }\n}\n"],"version":3}
1
+ {"file":"hy-list-item.entry.cjs.js","mappings":"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","names":["ListItemVariants","h"],"sources":["./src/components/hy-list-item/hy-list-item.scss?tag=hy-list-item","./src/components/hy-list-item/hy-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-list-item {\n display: flex;\n font-family: var(--main-font-family);\n text-decoration: none;\n\n &__default {\n margin-bottom: 28px;\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n\n &__info-container {\n &__header {\n @include font-size(12px, 14px);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 4px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n margin-bottom: 2px;\n }\n }\n\n &__title {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n color: var(--brand-main-light);\n letter-spacing: -0.56px;\n margin-bottom: 6px;\n\n @include breakpoint($narrow) {\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n margin-bottom: 10px;\n }\n @include breakpoint($xlarge) {\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n margin-bottom: 8px;\n }\n\n &__large {\n // >1200 no sidebar;\n @include breakpoint($extrawide) {\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n margin-bottom: 8px;\n }\n }\n }\n\n &__link-container {\n align-items: center;\n display: flex;\n margin-bottom: 6px;\n\n @include breakpoint($narrow) {\n margin-bottom: 8px;\n }\n }\n\n &__link {\n @include font-size(12px, 16px);\n color: var(--grayscale-dark);\n letter-spacing: -0.07px;\n margin-left: 4px;\n\n @include breakpoint($narrow) {\n margin-left: 5px;\n }\n\n &__icon {\n svg {\n fill: var(--grayscale-dark);\n }\n }\n }\n\n &__description {\n @include font-size(14px, 20px);\n color: var(--grayscale-black);\n letter-spacing: 0;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n }\n }\n }\n\n // Opem position\n &__position {\n background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);\n flex-direction: column;\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &__info-container {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n margin: 0;\n padding: 12px;\n position: relative;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n padding: 12px 16px;\n }\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n padding: 20px 24px;\n }\n\n &__header {\n display: flex;\n align-items: center;\n flex-direction: row;\n color: var(--brand-main);\n font-family: var(--main-font-family);\n font-size: 14px;\n font-weight: 600;\n letter-spacing: -0.2px;\n line-height: 14px;\n margin-bottom: 14px;\n\n .icon {\n margin-right: 0.75rem;\n\n svg {\n fill: var(--brand-main);\n }\n }\n }\n\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n padding: 20px 24px;\n }\n }\n\n &__data {\n display: flex;\n flex-direction: column;\n }\n\n &__title {\n @include font-size(18px, 20px);\n @include font-weight($bold);\n font-family: var(--main-font-family);\n color: var(--grayscale-black);\n margin-bottom: 12px;\n letter-spacing: -0.45px;\n line-height: 22px;\n\n @include breakpoint($narrow) {\n letter-spacing: -0.5px;\n }\n }\n\n &__description {\n @include font-size(14px);\n color: var(--grayscale-dark-text);\n display: none;\n font-family: var(--main-font-family);\n letter-spacing: 0.8px;\n margin-bottom: 14px;\n line-height: 20px;\n\n @include breakpoint($narrow) {\n display: block;\n }\n }\n\n &__outgoing-link {\n align-items: flex-end;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n position: relative;\n padding: 0 24px 24px 12px;\n\n @include breakpoint($narrow) {\n justify-content: center;\n padding: 0 24px 24px 0;\n }\n\n .label {\n color: var(--link-blue);\n font-family: var(--main-font-family);\n font-size: 16px;\n font-weight: 600;\n letter-spacing: -0.3px;\n line-height: 20px;\n }\n\n .icon {\n margin-right: 4px;\n margin-bottom: 2px;\n\n svg {\n fill: var(--link-blue);\n }\n }\n }\n }\n }\n\n // Degree programmes.\n &__degree {\n background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);\n flex-direction: column;\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &__image-container {\n display: block;\n position: relative;\n flex: 1;\n\n @include breakpoint($narrow) {\n flex: 0 0 24%;\n }\n\n &__image {\n vertical-align: bottom;\n max-width: 100%;\n height: 100%;\n\n img {\n object-fit: cover;\n width: 100%;\n height: 100%;\n }\n }\n\n span {\n @include font-weight($semibold);\n @include font-size(12px, 14px);\n background-color: var(--additional-yellow);\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);\n color: var(--grayscale-black);\n left: -4px;\n letter-spacing: -0.07px;\n padding: 5px 8px;\n position: absolute;\n top: 16px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n left: -8px;\n }\n @include breakpoint($wide) {\n top: 22px;\n }\n }\n }\n\n &__info-container {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n margin: 0;\n padding: 12px;\n position: relative;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n padding: 12px 16px;\n }\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n padding: 20px 24px;\n }\n\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n padding: 20px 24px;\n }\n }\n\n &__data {\n display: flex;\n flex-direction: column;\n }\n\n &__title {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.54px;\n margin-bottom: 8px;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n @include font-size(18px, 24px);\n letter-spacing: -0.5px;\n }\n\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n @include font-size(20px, 26px);\n letter-spacing: -0.6px;\n }\n\n &__large {\n // >1200 no sidebar;\n @include breakpoint($extrawide) {\n @include font-size(20px, 26px);\n letter-spacing: -0.6px;\n }\n }\n }\n\n &__description {\n @include font-size(14px, 18px);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 16px;\n\n // 960-1600 with Sidebar;\n @include breakpoint($wide) {\n letter-spacing: -0.2;\n }\n // >1600 with sidebar same as >1200 without sidebar\n @include breakpoint($xlarge) {\n @include font-size(16px, 20px);\n letter-spacing: -0.25px;\n }\n\n &__large {\n // >1200 no sidebar;\n @include breakpoint($extrawide) {\n @include font-size(16px, 20px);\n letter-spacing: -0.25px;\n }\n }\n }\n\n &__metadata-wrapper {\n display: flex;\n flex-direction: column;\n margin-top: 16px;\n width: 100%;\n\n @include breakpoint($narrow) {\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n }\n\n &.link-only {\n justify-content: flex-end;\n }\n }\n\n &__additional-info {\n width: 100%;\n\n &__item {\n @include font-size(12px, 16px);\n @include font-weight($light);\n align-items: center;\n color: var(--grayscale-black);\n display: flex;\n flex-direction: row;\n letter-spacing: -0.2px;\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 16px);\n }\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(14px, 16px);\n }\n }\n }\n &__item.active::before {\n content: \" \";\n box-sizing: border-box;\n height: 14px;\n width: 14px;\n border: 3px solid #ffffff;\n border-radius: 50%;\n background-color: #f9a21a;\n left: -7px;\n position: absolute;\n\n @include breakpoint($narrow) {\n border: none;\n height: 8px;\n margin-right: 6px;\n width: 8px;\n left: 0;\n position: relative;\n }\n }\n }\n\n &__outgoing-link {\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n position: relative;\n width: 100%;\n\n a {\n align-items: center;\n bottom: 0;\n top: 0;\n display: flex;\n flex-direction: row;\n position: relative;\n right: -18px;\n text-decoration: none;\n\n @include breakpoint($wide) {\n right: -22px;\n }\n @include breakpoint($xlarge) {\n right: -30px;\n }\n\n .label {\n @include font-size(14px, 16px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.5px;\n margin-right: 8px;\n text-align: right;\n }\n\n .icon-wrapper {\n background-color: var(--brand-main-light);\n z-index: 10;\n\n .icon {\n position: relative;\n overflow: hidden;\n\n svg {\n background-color: transparent;\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);\n fill: var(--grayscale-white);\n padding: 6.4px;\n\n @include breakpoint($xlarge) {\n height: 36px;\n width: 36px;\n padding: 7.2px;\n }\n }\n }\n }\n }\n\n // >1200 no sidebar;\n &__large {\n svg {\n @include breakpoint($extrawide) {\n height: 36px;\n width: 36px;\n padding: 7.2px;\n }\n }\n }\n }\n }\n }\n}\n\n.hy-list-item-wrapper {\n font-family: var(--main-font-family);\n\n &__degree {\n margin-bottom: 16px;\n @include breakpoint($narrow) {\n flex-direction: row;\n margin-bottom: 24px;\n }\n @include breakpoint($wide) {\n margin-bottom: 28px;\n }\n @include breakpoint($xlarge) {\n margin-bottom: 32px;\n }\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n margin-bottom: 32px;\n }\n }\n\n &__related-info {\n background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n margin-top: 4px;\n padding: 0 12px 0 16px;\n\n @include breakpoint($narrow) {\n padding: 0 24px 0 16px;\n }\n @include breakpoint($wide) {\n margin-top: 6px;\n padding: 0 24px 0 24px;\n }\n @include breakpoint($xlarge) {\n margin-top: 8px;\n }\n // >1200 no sidebar;\n &__large {\n @include breakpoint($extrawide) {\n margin-top: 8px;\n }\n }\n\n &__heading {\n &__link {\n text-decoration: none;\n }\n\n &__button {\n @include font-size(12px, 16px);\n align-items: center;\n background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n border: none;\n color: var(--grayscale-black);\n display: flex;\n flex-direction: row;\n font-family: var(--main-font-family);\n letter-spacing: -0.2px;\n height: 100%;\n padding: 8px 0;\n text-align: left;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(12px, 20px);\n padding: 14px 0;\n }\n @include breakpoint($wide) {\n @include font-size(14px, 20px);\n letter-spacing: -0.4px;\n padding: 18px 0;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &__is-open {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n &__icon {\n margin-right: 0.5rem;\n z-index: 0;\n\n @include breakpoint($wide) {\n margin-right: 12px;\n }\n\n svg {\n fill: var(--brand-main);\n height: 14px;\n width: 14px;\n\n @include breakpoint($wide) {\n height: 18px;\n width: 18px;\n }\n }\n }\n }\n\n &__content {\n display: none;\n\n &__is-open {\n border-top: 1px solid #d2d2d2;\n display: flex;\n flex-direction: column;\n padding: 20px 8px 5px 8px;\n\n @include breakpoint($wide) {\n padding: 20px 0 14px 0;\n }\n }\n }\n\n &__link {\n @include font-size(14px, 16px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.4px;\n margin-bottom: 16px;\n text-decoration: none;\n }\n }\n }\n}\n","export interface RelatedLink {\n label: string;\n url: string;\n isExternal: boolean;\n scLabel: string;\n}\n\nexport interface AdditionalInfo {\n text: string;\n isActive: boolean;\n}\n\nexport interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string | null;\n}\n\nimport {Component, h, Prop, Watch, State, Listen, Element} from \"@stencil/core\";\nimport {ListItemVariants} from \"../../utils/utils\";\n\nlet keys = {\n enter: \"Enter\",\n space: \"Space\",\n};\n\n@Component({\n tag: \"hy-list-item\",\n styleUrl: \"hy-list-item.scss\",\n shadow: false,\n})\nexport class HyListItem {\n @Element() el: HTMLElement;\n @State() isExpandedRelatedContent: boolean = false;\n @Prop() variant: ListItemVariants = ListItemVariants.default;\n @Prop() itemType?: string;\n @Prop() itemTitle?: string;\n @Prop() itemDescription?: any;\n @Prop() url?: string;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() itemImageUrl?: string;\n @Prop() itemImageAlt?: string;\n @Prop() disableLazy: boolean = false;\n @Prop() relatedLinksBlockTitle?: string;\n private _relatedLinks: RelatedLink[];\n @Prop() relatedLinks?: RelatedLink[] | string;\n @Prop() imageLabel?: string;\n @Prop() outGoingUrlLabel?: string = \"Go to programme page\";\n private _additionalInfo: AdditionalInfo[];\n @Prop() additionalInfo?: AdditionalInfo[] | string;\n @Prop() headerstyle: string = \"common\";\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] | string;\n @Prop() truncateDescription: boolean = false;\n @Prop() truncateLimit: number = 140;\n\n @State() _imageMinHeight: number = 0;\n @State() _imageMinWidth: number = 0;\n\n @Watch(\"relatedLinks\")\n relatedLinksWatcher(newValue: RelatedLink[] | string) {\n if (typeof newValue === \"string\") {\n this._relatedLinks = JSON.parse(newValue);\n } else {\n this._relatedLinks = newValue;\n }\n }\n\n @Watch(\"additionalInfo\")\n additionalInfoWatcher(newValue: AdditionalInfo[] | string) {\n if (typeof newValue === \"string\") {\n this._additionalInfo = JSON.parse(newValue);\n } else {\n this._additionalInfo = newValue;\n }\n }\n\n @Watch(\"sourceSet\") srcSetWatcher(data: ImageSrcSet[] | string) {\n this._sourceSet = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n expandRelatedInfoPanel(target) {\n let contentSelector = `hy-list-item-wrapper__${this.variant}__related-info__content`;\n let targetButtonClass = \"hy-list-item-wrapper__degree__related-info__heading__button\";\n let contentSection = document.querySelectorAll(`[aria-labelledBy=\"${target.id}\"]`)[0] as HTMLElement;\n if (contentSection) {\n if (!this.isExpandedRelatedContent) {\n contentSection.classList.add(`${contentSelector}__is-open`);\n target.classList.add(`${targetButtonClass}__is-open`);\n } else {\n contentSection.classList.remove(`${contentSelector}__is-open`);\n target.classList.remove(`${targetButtonClass}__is-open`);\n }\n this.isExpandedRelatedContent = !this.isExpandedRelatedContent;\n }\n }\n\n @Listen(\"keydown\")\n handleKeyDown(event: KeyboardEvent) {\n const key = event.code;\n let target = event.target as HTMLButtonElement;\n\n const targetElement = target.tagName.toLowerCase();\n const possibleTags = [targetElement].some((r) => [\"svg\", \"path\", \"button\", \"a\"].indexOf(r) >= 0);\n\n if (\n target &&\n possibleTags &&\n !target.classList.contains(\"hy-list-item-wrapper__degree__related-info__link\") &&\n [keys.enter, keys.space].includes(key)\n ) {\n if (targetElement !== \"button\") {\n target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);\n }\n this.expandRelatedInfoPanel(target);\n event.preventDefault();\n }\n }\n\n @Listen(\"click\")\n handleClick(event) {\n let target = event.target as HTMLElement;\n const targetElement = target.tagName.toLowerCase();\n const possibleTags = [targetElement].some((r) => [\"svg\", \"path\", \"button\", \"a\"].indexOf(r) >= 0);\n\n if (target && possibleTags && !target.classList.contains(\"hy-list-item-wrapper__degree__related-info__link\")) {\n if (targetElement !== \"button\") {\n target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);\n }\n this.expandRelatedInfoPanel(target);\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n componentWillLoad() {\n this.relatedLinksWatcher(this.relatedLinks);\n this.additionalInfoWatcher(this.additionalInfo);\n this.srcSetWatcher(this.sourceSet);\n }\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n if (this.variant == ListItemVariants.degreeProgramme) {\n const image = document.querySelector(\".hy-list-item__degree__image-container__image img\") as any;\n\n if (image) {\n image.addEventListener(\"load\", function () {\n const outputImageAspectRatio = 1;\n const imageHeight = image.naturalHeight;\n const imageWidth = image.naturalWidth;\n const inputImageAspectRatio = imageWidth / imageHeight;\n this._imageMinWidth = imageWidth;\n this._imageMinHeight = imageHeight;\n if (inputImageAspectRatio > outputImageAspectRatio) {\n this._imageMinWidth = imageHeight * outputImageAspectRatio;\n } else if (inputImageAspectRatio < outputImageAspectRatio) {\n this._imageMinHeight = imageWidth / outputImageAspectRatio;\n }\n });\n }\n }\n }\n\n render() {\n const classWrapperAttributes = [\n \"hy-list-item-wrapper\",\n `hy-list-item-wrapper__${this.variant}`,\n `hy-list-item-wrapper__${this.variant}__${this.headerstyle}`,\n ].join(\" \");\n const classAttributes = [\"hy-list-item\", `hy-list-item__${this.variant}`].join(\" \");\n const classInfoContainerAttributes = [\n `hy-list-item__${this.variant}__info-container`,\n `hy-list-item__${this.variant}__info-container__${this.headerstyle}`,\n ].join(\" \");\n /*const classInfoContainerDataAttributes = [\n `hy-list-item__${this.variant}__info-container__data`,\n `hy-list-item__${this.variant}__info-container__data__${this.headerstyle}`,\n ].join(' ');*/\n const classInfoContainerHeader = [\n `hy-list-item__${this.variant}__info-container__header`,\n `hy-list-item__${this.variant}__info-container__header__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerTitle = [\n `hy-list-item__${this.variant}__info-container__title`,\n `hy-list-item__${this.variant}__info-container__title__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerDescription = [\n `hy-list-item__${this.variant}__info-container__description`,\n `hy-list-item__${this.variant}__info-container__description__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerLinkContainer = [`hy-list-item__${this.variant}__info-container__link-container`].join(\" \");\n const classInfoContainerLinkIcon = [`hy-list-item__${this.variant}__info-container__link__icon`].join(\" \");\n const classInfoContainerLink = [`hy-list-item__${this.variant}__info-container__link`].join(\" \");\n\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n function truncate(str, n) {\n return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n }\n\n switch (this.variant) {\n case ListItemVariants.position: {\n const classInfoContainerOutgoingLink = [\n `hy-list-item__${this.variant}__info-container__outgoing-link`,\n `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,\n ].join(\" \");\n return (\n <div class=\"hy-list-item__wrapper\">\n <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>\n <div class={classInfoContainerAttributes}>\n <div class={classInfoContainerHeader}>\n <div class=\"icon\">\n <hy-icon icon={\"hy-icon-units-and-faculties\"} size={18} />\n </div>\n {this.itemType}\n </div>\n <div class={classInfoContainerTitle}>{this.itemTitle}</div>\n\n {this.itemDescription && (\n <div\n class={classInfoContainerDescription}\n innerHTML={\n this.truncateDescription\n ? truncate(this.itemDescription, this.truncateLimit)\n : this.itemDescription\n }\n ></div>\n )}\n </div>\n <div class={classInfoContainerOutgoingLink}>\n <span class=\"icon\">\n <hy-icon icon={\"hy-icon-done\"} size={14}></hy-icon>\n </span>\n <span class=\"label\">{this.outGoingUrlLabel}</span>\n </div>\n </a>\n </div>\n );\n }\n case ListItemVariants.degreeProgramme: {\n const classImageContainerAttributes = [`hy-list-item__${this.variant}__image-container`].join(\" \");\n const classImageContainerImage = [`hy-list-item__${this.variant}__image-container__image`].join(\" \");\n\n const classInfoContainerAdditionalInfoAttributes = [\n `hy-list-item__${this.variant}__info-container__additional-info`,\n `hy-list-item__${this.variant}__info-container__additional-info__${this.headerstyle}`,\n ].join(\" \");\n\n const withAdditionalInfo = this._additionalInfo && this._additionalInfo.length > 0 ? \"\" : \"link-only\";\n const classMetadataWrapper = [\n `hy-list-item__${this.variant}__info-container__metadata-wrapper`,\n withAdditionalInfo,\n ].join(\" \");\n const classContentWrapper = [`hy-list-item__${this.variant}__info-container__content-wrapper`].join(\" \");\n\n const classInfoContainerOutgoingLink = [\n `hy-list-item__${this.variant}__info-container__outgoing-link`,\n `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,\n ].join(\" \");\n const classInfoContainerOutgoingLinkUrl = [\n `hy-list-item__${this.variant}__info-container__outgoing-link__link`,\n ].join(\" \");\n\n const classRelatedInfoContainer = [\n `hy-list-item-wrapper__${this.variant}__related-info`,\n `hy-list-item-wrapper__${this.variant}__related-info__${this.headerstyle}`,\n ].join(\" \");\n const classRelatedInfoHeading = [`hy-list-item-wrapper__${this.variant}__related-info__heading`].join(\" \");\n const classRelatedInfoHeadingLink = [`hy-list-item-wrapper__${this.variant}__related-info__heading__link`].join(\n \" \"\n );\n const classRelatedInfoHeadingButton = [\n `hy-list-item-wrapper__${this.variant}__related-info__heading__button`,\n ].join(\" \");\n const classRelatedInfoHeadingIcon = [`hy-list-item-wrapper__${this.variant}__related-info__heading__icon`].join(\n \" \"\n );\n const classRelatedInfoContent = [`hy-list-item-wrapper__${this.variant}__related-info__content`].join(\" \");\n const classRelatedInfoLink = [`hy-list-item-wrapper__${this.variant}__related-info__link`].join(\" \");\n\n const titleAsId =\n this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0\n ? `${this.itemTitle}-${this.relatedLinksBlockTitle}`.toLowerCase().replace(/\\W/g, \"-\")\n : \"\";\n const accordionItemHref = \"#\" + titleAsId + \"--title\";\n\n const relatedLinksCount =\n this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0 ? this._relatedLinks.length : \"\";\n\n return [\n <article class={classWrapperAttributes}>\n <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>\n <div class={classImageContainerAttributes}>\n <div class={classImageContainerImage}>\n {this._sourceSet ? (\n <picture>\n {this._sourceSet.map((item) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.itemImageUrl}\n alt={this.itemImageAlt}\n style={{\n \"--minheight\": `${this._imageMinHeight}px` as \"minHeight\",\n \"--minwidth\": `${this._imageMinWidth}px` as \"minWidth\",\n }}\n />\n </picture>\n ) : (\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.itemImageUrl}\n alt={this.itemImageAlt}\n style={{\n \"--minheight\": `${this._imageMinHeight}px` as \"minHeight\",\n \"--minwidth\": `${this._imageMinWidth}px` as \"minWidth\",\n }}\n />\n )}\n </div>\n {this.imageLabel && <span>{this.imageLabel}</span>}\n </div>\n <div class={classInfoContainerAttributes}>\n <div class={classContentWrapper}>\n <div class={classInfoContainerTitle}>{this.itemTitle}</div>\n {this.itemDescription && (\n <div class={classInfoContainerDescription} innerHTML={this.itemDescription}></div>\n )}\n </div>\n <div class={classMetadataWrapper}>\n {this._additionalInfo && (\n <div class={classInfoContainerAdditionalInfoAttributes}>\n {this._additionalInfo.map((x) => {\n let classInfoContainerAdditionalInfoItem = [\n `hy-list-item__${this.variant}__info-container__additional-info__item`,\n `hy-list-item__${this.variant}__info-container__additional-info__item__${this.headerstyle}`,\n `${x.isActive.toString() == \"true\" ? \"active\" : \"\"}`,\n ].join(\" \");\n return <div class={classInfoContainerAdditionalInfoItem}>{x.text}</div>;\n })}\n </div>\n )}\n <div class={classInfoContainerOutgoingLink}>\n <a\n href={this.url}\n target={target}\n aria-label={this.scLabel}\n class={classInfoContainerOutgoingLinkUrl}\n tabindex=\"-1\"\n >\n <span class=\"label\">{this.outGoingUrlLabel}</span>\n <span class=\"icon-wrapper\">\n <div class=\"icon\">\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={32} />\n </div>\n </span>\n </a>\n </div>\n </div>\n </div>\n </a>\n {this.relatedLinksBlockTitle && (\n <div class={classRelatedInfoContainer}>\n <div class={classRelatedInfoHeading}>\n <a href={accordionItemHref} class={classRelatedInfoHeadingLink} tabindex=\"-1\">\n <button\n aria-expanded=\"false\"\n aria-controls={`${titleAsId}--content`}\n class={classRelatedInfoHeadingButton}\n id={`${titleAsId}--title`}\n >\n <span class={classRelatedInfoHeadingIcon}>\n <hy-icon icon={\"hy-icon-caret-down\"} size={14} />\n </span>\n {this.relatedLinksBlockTitle} ({relatedLinksCount})\n </button>\n </a>\n </div>\n <div\n class={classRelatedInfoContent}\n aria-labelledBy={`${titleAsId}--title`}\n id={`${titleAsId}--content`}\n role=\"region\"\n aria-hidden=\"true\"\n >\n {this._relatedLinks.map((x) => {\n let relatedLinkTarget = x.isExternal ? \"_blank\" : \"_self\";\n return (\n <a class={classRelatedInfoLink} href={x.url} target={target} aria-label={relatedLinkTarget}>\n {x.label}\n </a>\n );\n })}\n </div>\n </div>\n )}\n </article>,\n ];\n }\n default: {\n return (\n <article>\n <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>\n <div class={classInfoContainerAttributes}>\n <div class={classInfoContainerHeader}>{this.itemType}</div>\n <div class={classInfoContainerTitle}>{this.itemTitle}</div>\n\n <div class={classInfoContainerLinkContainer}>\n <span class={classInfoContainerLinkIcon}>\n <hy-icon icon={\"hy-icon-link\"} size={15} />\n </span>\n <div class={classInfoContainerLink}>{this.url}</div>\n </div>\n\n {this.itemDescription && (\n <div class={classInfoContainerDescription} innerHTML={this.itemDescription}></div>\n )}\n </div>\n </a>\n </article>\n );\n }\n }\n }\n}\n"],"version":3}