npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.66 → 0.8.68 - Mend

@itcenteratunihelsinki/huds-lib 0.8.66 → 0.8.68

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

package/components/hy-list-item.js CHANGED Viewed

@@ -171,7 +171,7 @@ const HyListItem$1 = /*@__PURE__*/ proxyCustomElement(class HyListItem extends H
           `hy-list-item__${this.variant}__info-container__outgoing-link`,
           `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,
         ].join(" ");
-        return (h("article", null, h("a", { class: classAttributes, href: this.url, target: target, "aria-label": this.scLabel }, h("div", { class: classInfoContainerAttributes }, h("div", { class: classInfoContainerHeader }, h("div", { class: "icon" }, h("hy-icon", { icon: "hy-icon-units-and-faculties", size: 18 })), this.itemType), h("div", { class: classInfoContainerTitle }, this.itemTitle), this.itemDescription && (h("div", { class: classInfoContainerDescription, innerHTML: this.truncateDescription
+        return (h("div", { class: "hy-list-item__wrapper" }, h("a", { class: classAttributes, href: this.url, target: target, "aria-label": this.scLabel }, h("div", { class: classInfoContainerAttributes }, h("div", { class: classInfoContainerHeader }, h("div", { class: "icon" }, h("hy-icon", { icon: "hy-icon-units-and-faculties", size: 18 })), this.itemType), h("div", { class: classInfoContainerTitle }, this.itemTitle), this.itemDescription && (h("div", { class: classInfoContainerDescription, innerHTML: this.truncateDescription
             ? truncate(this.itemDescription, this.truncateLimit)
             : this.itemDescription }))), h("div", { class: classInfoContainerOutgoingLink }, h("span", { class: "icon" }, h("hy-icon", { icon: "hy-icon-done", size: 14 })), h("span", { class: "label" }, this.outGoingUrlLabel)))));
       }

package/components/hy-list-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"hy-list-item.js","mappings":"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","names":["HyListItem"],"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.js","mappings":"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","names":["HyListItem"],"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}

package/components/hy-person-card.js CHANGED Viewed

@@ -67,7 +67,7 @@ const HyPersonCard$1 = /*@__PURE__*/ proxyCustomElement(class HyPersonCard exten
       `hy-person-card__info-container__position-title__${this.variant}`,
     ].join(" ");
     const target = this.isExternal ? "_blank" : "_self";
-    return (h("article", { class: "hy-person-card-container" }, h("div", { class: classLinkAttributes }, this.categoryTitle && this.variant == PersonCardVariants.default && (h("div", { class: "hy-person-card-container__category-title" }, this.categoryTitle)), h("div", { class: classAttributes }, h("div", { class: "hy-person-card__image-container" }, this.imageUrl ? (h("a", { class: "hy-person-card__image-container__image", href: this.url, target: target }, h("img", { loading: this.disableLazy ? "eager" : "lazy", "aria-hidden": "true", src: this.imageUrl, alt: this.imageAlt }))) : (h("div", { class: "hy-person-card__image-container__no-image" }, h("div", { class: "hy-person-card__image-container__no-image__initials", "aria-hidden": "true" }, this._initials)))), h("div", { class: "hy-person-card__info-container" }, h("a", { class: "hy-person-card__info-container__full-name", href: this.url, target: target }, this._fullName), this.positionTitle && h("div", { class: classPositionTitle }, this.positionTitle), this.department &&
+    return (h("article", { class: "hy-person-card-container" }, h("div", { class: classLinkAttributes }, this.categoryTitle && this.variant == PersonCardVariants.default && (h("div", { class: "hy-person-card-container__category-title" }, this.categoryTitle)), h("div", { class: classAttributes }, h("div", { class: "hy-person-card__image-container" }, this.imageUrl ? (h("a", { class: "hy-person-card__image-container__image", href: this.url, target: target }, h("img", { loading: this.disableLazy ? "eager" : "lazy", src: this.imageUrl, alt: this.imageAlt }))) : (h("div", { class: "hy-person-card__image-container__no-image" }, h("div", { class: "hy-person-card__image-container__no-image__initials", "aria-hidden": "true" }, this._initials)))), h("div", { class: "hy-person-card__info-container" }, h("a", { class: "hy-person-card__info-container__full-name", href: this.url, target: target }, this._fullName), this.positionTitle && h("div", { class: classPositionTitle }, this.positionTitle), this.department &&
       (this.variant == PersonCardVariants.default ||
         (this.variant == PersonCardVariants.extended && !this.isMobile)) && (h("div", { class: "hy-person-card__info-container__department" }, this.department)), this.field &&
       (this.variant == PersonCardVariants.default ||

package/components/hy-person-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"hy-person-card.js","mappings":"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","names":["HyPersonCard"],"sources":["./src/components/hy-person-card/hy-person-card.scss?tag=hy-person-card","./src/components/hy-person-card/hy-person-card.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-person-card-container {\n font-family: var(--main-font-family);\n margin-bottom: 28px;\n\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n\n &__category-title {\n @include font-size(12px, 14px);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 8px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n }\n\n @include breakpoint($fullhd) {\n @include font-size(14px, 18px); //>1920 desktop\n }\n }\n\n &__link {\n text-decoration: none;\n\n &.inactive {\n cursor: default;\n pointer-events: none;\n }\n }\n}\n\n.hy-person-card {\n display: flex;\n flex-direction: row;\n font-family: var(--main-font-family);\n\n &__image-container {\n margin-right: 12px;\n max-width: 70px;\n\n @include breakpoint($narrow) {\n margin-right: 16px;\n max-width: 112px;\n }\n\n @include breakpoint($fullhd) {\n max-width: 140px;\n }\n\n &__image {\n height: 70px;\n width: 70px;\n\n @include breakpoint($narrow) {\n height: 112px;\n width: 112px;\n }\n\n @include breakpoint($fullhd) {\n //1920\n height: 140px;\n width: 140px;\n }\n img {\n height: 70px;\n width: 70px;\n object-fit: cover;\n\n @include breakpoint($narrow) {\n height: 112px;\n width: 112px;\n }\n\n @include breakpoint($fullhd) {\n height: 140px;\n width: 140px;\n }\n }\n }\n &__no-image {\n height: 70px;\n width: 70px;\n\n align-items: center;\n background-color: var(--brand-main-light);\n display: flex;\n justify-content: center;\n\n @include breakpoint($narrow) {\n height: 112px;\n width: 112px;\n }\n\n @include breakpoint($fullhd) {\n height: 140px;\n width: 140px;\n }\n\n &__initials {\n @include font-size(18px, 24px);\n @include font-weight($bold);\n color: var(--grayscale-white);\n letter-spacing: -0.56px;\n\n @include breakpoint($narrow) {\n @include font-size(32px, 32px);\n letter-spacing: 0.96px;\n }\n }\n }\n }\n\n &__info-container {\n &__full-name {\n @include font-size(18px, 24px);\n @include font-weight($bold);\n\n color: var(--brand-main-light);\n letter-spacing: -0.56px;\n margin-bottom: 4px;\n text-decoration: none;\n\n @include breakpoint($narrow) {\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n margin-bottom: 3px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(26px, 28px);\n letter-spacing: -0.81px;\n margin-bottom: 5px;\n }\n\n &:hover,\n &:focus {\n color: var(--brand-main);\n }\n }\n\n &__position-title {\n @include font-size(14px, 19px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-bottom: 3px;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n margin-bottom: 4px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n margin-bottom: 8px;\n }\n\n &__search-panel {\n @include font-weight($regular);\n }\n }\n\n &__department {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-bottom: 3px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-bottom: 6px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(14px, 16px);\n margin-bottom: 9px;\n }\n }\n\n &__field {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-bottom: 4px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-bottom: 6px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(14px, 16px);\n margin-bottom: 9px;\n }\n }\n\n &__email-container {\n align-items: center;\n display: flex;\n margin-bottom: 4px;\n }\n &__email {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-left: 11px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-left: 8px;\n }\n\n &__icon {\n svg {\n height: 15px;\n width: 16px;\n\n @include breakpoint($narrow) {\n height: 12px;\n width: 16px;\n }\n }\n }\n }\n\n &__phone-container {\n align-items: center;\n display: flex;\n }\n &__phone {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-left: 11px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-left: 8px;\n }\n\n &__icon {\n svg {\n height: 13px;\n width: 13px;\n\n @include breakpoint($narrow) {\n height: 14px;\n width: 14px;\n }\n }\n }\n }\n }\n\n &.search-panel {\n margin-bottom: 12px;\n\n @include breakpoint($narrow) {\n margin-bottom: 14px;\n }\n\n .hy-person-card__info-container__full-name {\n @include font-size(14px, 20px);\n @include font-weight($semibold);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 0;\n\n @include breakpoint($narrow) {\n letter-spacing: -0.3px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(16px, 24px);\n letter-spacing: 0;\n }\n }\n\n .hy-person-card__info-container__position-title {\n @include font-size(12px, 16px);\n color: var(--grayscale-dark);\n letter-spacing: -0.07px;\n margin-bottom: 0;\n }\n\n .hy-person-card__image-container {\n margin-right: 12px;\n\n &__image {\n height: 60px;\n width: 60px;\n img {\n height: 60px;\n width: 60px;\n }\n }\n &__no-image {\n height: 60px;\n width: 60px;\n\n &__initials {\n color: var(--grayscale-white);\n @include font-size(16px, 32px);\n @include font-weight($bold);\n letter-spacing: 0.48px;\n }\n }\n }\n }\n}\n\n.hy-person-card__extended-info-container {\n display: block;\n padding-top: 8px;\n\n @include breakpoint($narrow) {\n padding-top: 12px;\n }\n\n &__about {\n @include font-size(12px, 17px);\n color: var(--grayscale-dark-text);\n font-family: var(--main-font-family);\n font-style: italic;\n letter-spacing: 0;\n\n @include breakpoint($narrow) {\n @include font-size(12px, 16px);\n }\n @include breakpoint($xlarge) {\n @include font-size(14px, 16px);\n }\n\n .label {\n @include font-weight($bold);\n padding-right: 3px;\n }\n }\n}\n","import {Component, h, Prop, State} from \"@stencil/core\";\nimport {PersonCardVariants} from \"../../utils/utils\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n@Component({\n tag: \"hy-person-card\",\n styleUrl: \"hy-person-card.scss\",\n shadow: false,\n})\nexport class HyPersonCard {\n @Prop() variant: PersonCardVariants = PersonCardVariants.default;\n @Prop() categoryTitle?: string;\n @Prop() imageUrl: string = null;\n @Prop() imageAlt: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() firstName?: string;\n @Prop() lastName?: string;\n @Prop() url: string = null;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() positionTitle?: string;\n @Prop() department: string = null;\n @Prop() field: string = null;\n @Prop() email: string = null;\n @Prop() phone: string = null;\n @Prop() aboutInfo: string = null;\n @Prop() researchNetworks?: string;\n @Prop() studyProgramme?: string;\n @Prop() aboutInfoLabel?: string;\n @Prop() researchNetworksLabel?: string;\n @Prop() studyProgrammeLabel?: string;\n\n private _fullName: string;\n private _initials: string;\n\n @State() isMobile: boolean;\n\n private ro: ResizeObserver;\n componentDidLoad() {\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.checkForMobile(entry.contentRect.width);\n }\n });\n this.ro.observe(document.body);\n }\n\n disconnectedCallback() {\n this.ro.disconnect();\n }\n\n checkForMobile(size: number) {\n this.isMobile = size <= 479 ? true : false;\n }\n\n componentWillRender() {\n this._fullName = this.firstName && this.lastName ? `${this.firstName} ${this.lastName}` : \"\";\n this._initials =\n this.imageUrl && this.firstName && this.lastName ? \"\" : `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`;\n if (!this.imageAlt) {\n this.imageAlt = this._fullName;\n }\n if (!this.scLabel) {\n this.scLabel = \"Link to the person profile\";\n }\n }\n\n render() {\n let classLinkAttributes = [\"hy-person-card-container__link\", this.variant].join(\" \");\n let classIsActive = this.url && this.url.length > 0 ? \"\" : \" inactive\";\n classLinkAttributes = classLinkAttributes.concat(classIsActive);\n\n const classAttributes = [\"hy-person-card\", this.variant].join(\" \");\n const classPositionTitle = [\n \"hy-person-card__info-container__position-title\",\n `hy-person-card__info-container__position-title__${this.variant}`,\n ].join(\" \");\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n return (\n <article class=\"hy-person-card-container\">\n <div class={classLinkAttributes}>\n {this.categoryTitle && this.variant == PersonCardVariants.default && (\n <div class=\"hy-person-card-container__category-title\">{this.categoryTitle}</div>\n )}\n <div class={classAttributes}>\n <div class=\"hy-person-card__image-container\">\n {this.imageUrl ? (\n <a class=\"hy-person-card__image-container__image\" href={this.url} target={target}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </a>\n ) : (\n <div class=\"hy-person-card__image-container__no-image\">\n <div class=\"hy-person-card__image-container__no-image__initials\" aria-hidden=\"true\">\n {this._initials}\n </div>\n </div>\n )}\n </div>\n <div class=\"hy-person-card__info-container\">\n <a class=\"hy-person-card__info-container__full-name\" href={this.url} target={target}>\n {this._fullName}\n </a>\n {this.positionTitle && <div class={classPositionTitle}>{this.positionTitle}</div>}\n {this.department &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && (\n <div class=\"hy-person-card__info-container__department\">{this.department}</div>\n )}\n {this.field &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && (\n <div class=\"hy-person-card__info-container__field\">{this.field}</div>\n )}\n {this.email &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && [\n <div class=\"hy-person-card__info-container__email-container\">\n <span class=\"hy-person-card__info-container__email__icon\">\n <hy-icon icon={\"hy-icon-email\"} size={16} />\n </span>\n <span class=\"hy-person-card__info-container__email\">{this.email}</span>\n </div>,\n ]}\n {this.phone &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && [\n <div class=\"hy-person-card__info-container__phone-container\">\n <span class=\"hy-person-card__info-container__phone__icon\">\n <hy-icon icon={\"hy-icon-phone\"} size={14} />\n </span>\n <span class=\"hy-person-card__info-container__phone\">{this.phone}</span>\n </div>,\n ]}\n </div>\n </div>\n {this.variant == PersonCardVariants.extended && (\n <div class=\"hy-person-card hy-person-card__extended-info-container\">\n {this.department && this.isMobile && (\n <div class=\"hy-person-card__info-container__department\">{this.department}</div>\n )}\n {this.field && this.isMobile && <div class=\"hy-person-card__info-container__field\">{this.field}</div>}\n {this.email &&\n this.isMobile && [\n <div class=\"hy-person-card__info-container__email-container\">\n <span class=\"hy-person-card__info-container__email__icon\">\n <hy-icon icon={\"hy-icon-email\"} size={16} />\n </span>\n <span class=\"hy-person-card__info-container__email\">{this.email}</span>\n </div>,\n ]}\n {this.phone &&\n this.isMobile && [\n <div class=\"hy-person-card__info-container__phone-container\">\n <span class=\"hy-person-card__info-container__phone__icon\">\n <hy-icon icon={\"hy-icon-phone\"} size={14} />\n </span>\n <span class=\"hy-person-card__info-container__phone\">{this.phone}</span>\n </div>,\n ]}\n {this.aboutInfo && (\n <div class=\"hy-person-card__extended-info-container__about\">\n <span class=\"label\">{this.aboutInfoLabel}:</span>\n <span>{this.aboutInfo}</span>\n </div>\n )}\n </div>\n )}\n </div>\n </article>\n );\n }\n}\n"],"version":3}
1	+ {"file":"hy-person-card.js","mappings":"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","names":["HyPersonCard"],"sources":["./src/components/hy-person-card/hy-person-card.scss?tag=hy-person-card","./src/components/hy-person-card/hy-person-card.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-person-card-container {\n font-family: var(--main-font-family);\n margin-bottom: 28px;\n\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n\n &__category-title {\n @include font-size(12px, 14px);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 8px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n }\n\n @include breakpoint($fullhd) {\n @include font-size(14px, 18px); //>1920 desktop\n }\n }\n\n &__link {\n text-decoration: none;\n\n &.inactive {\n cursor: default;\n pointer-events: none;\n }\n }\n}\n\n.hy-person-card {\n display: flex;\n flex-direction: row;\n font-family: var(--main-font-family);\n\n &__image-container {\n margin-right: 12px;\n max-width: 70px;\n\n @include breakpoint($narrow) {\n margin-right: 16px;\n max-width: 112px;\n }\n\n @include breakpoint($fullhd) {\n max-width: 140px;\n }\n\n &__image {\n height: 70px;\n width: 70px;\n\n @include breakpoint($narrow) {\n height: 112px;\n width: 112px;\n }\n\n @include breakpoint($fullhd) {\n //1920\n height: 140px;\n width: 140px;\n }\n img {\n height: 70px;\n width: 70px;\n object-fit: cover;\n\n @include breakpoint($narrow) {\n height: 112px;\n width: 112px;\n }\n\n @include breakpoint($fullhd) {\n height: 140px;\n width: 140px;\n }\n }\n }\n &__no-image {\n height: 70px;\n width: 70px;\n\n align-items: center;\n background-color: var(--brand-main-light);\n display: flex;\n justify-content: center;\n\n @include breakpoint($narrow) {\n height: 112px;\n width: 112px;\n }\n\n @include breakpoint($fullhd) {\n height: 140px;\n width: 140px;\n }\n\n &__initials {\n @include font-size(18px, 24px);\n @include font-weight($bold);\n color: var(--grayscale-white);\n letter-spacing: -0.56px;\n\n @include breakpoint($narrow) {\n @include font-size(32px, 32px);\n letter-spacing: 0.96px;\n }\n }\n }\n }\n\n &__info-container {\n &__full-name {\n @include font-size(18px, 24px);\n @include font-weight($bold);\n\n color: var(--brand-main-light);\n letter-spacing: -0.56px;\n margin-bottom: 4px;\n text-decoration: none;\n\n @include breakpoint($narrow) {\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n margin-bottom: 3px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(26px, 28px);\n letter-spacing: -0.81px;\n margin-bottom: 5px;\n }\n\n &:hover,\n &:focus {\n color: var(--brand-main);\n }\n }\n\n &__position-title {\n @include font-size(14px, 19px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-bottom: 3px;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n margin-bottom: 4px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n margin-bottom: 8px;\n }\n\n &__search-panel {\n @include font-weight($regular);\n }\n }\n\n &__department {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-bottom: 3px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-bottom: 6px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(14px, 16px);\n margin-bottom: 9px;\n }\n }\n\n &__field {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-bottom: 4px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-bottom: 6px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(14px, 16px);\n margin-bottom: 9px;\n }\n }\n\n &__email-container {\n align-items: center;\n display: flex;\n margin-bottom: 4px;\n }\n &__email {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-left: 11px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-left: 8px;\n }\n\n &__icon {\n svg {\n height: 15px;\n width: 16px;\n\n @include breakpoint($narrow) {\n height: 12px;\n width: 16px;\n }\n }\n }\n }\n\n &__phone-container {\n align-items: center;\n display: flex;\n }\n &__phone {\n @include font-size(12px, 17px);\n color: var(--brand-main-nearly-black);\n letter-spacing: 0;\n margin-left: 11px;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 19px);\n margin-left: 8px;\n }\n\n &__icon {\n svg {\n height: 13px;\n width: 13px;\n\n @include breakpoint($narrow) {\n height: 14px;\n width: 14px;\n }\n }\n }\n }\n }\n\n &.search-panel {\n margin-bottom: 12px;\n\n @include breakpoint($narrow) {\n margin-bottom: 14px;\n }\n\n .hy-person-card__info-container__full-name {\n @include font-size(14px, 20px);\n @include font-weight($semibold);\n color: var(--grayscale-dark);\n letter-spacing: 0;\n margin-bottom: 0;\n\n @include breakpoint($narrow) {\n letter-spacing: -0.3px;\n }\n\n @include breakpoint($fullhd) {\n @include font-size(16px, 24px);\n letter-spacing: 0;\n }\n }\n\n .hy-person-card__info-container__position-title {\n @include font-size(12px, 16px);\n color: var(--grayscale-dark);\n letter-spacing: -0.07px;\n margin-bottom: 0;\n }\n\n .hy-person-card__image-container {\n margin-right: 12px;\n\n &__image {\n height: 60px;\n width: 60px;\n img {\n height: 60px;\n width: 60px;\n }\n }\n &__no-image {\n height: 60px;\n width: 60px;\n\n &__initials {\n color: var(--grayscale-white);\n @include font-size(16px, 32px);\n @include font-weight($bold);\n letter-spacing: 0.48px;\n }\n }\n }\n }\n}\n\n.hy-person-card__extended-info-container {\n display: block;\n padding-top: 8px;\n\n @include breakpoint($narrow) {\n padding-top: 12px;\n }\n\n &__about {\n @include font-size(12px, 17px);\n color: var(--grayscale-dark-text);\n font-family: var(--main-font-family);\n font-style: italic;\n letter-spacing: 0;\n\n @include breakpoint($narrow) {\n @include font-size(12px, 16px);\n }\n @include breakpoint($xlarge) {\n @include font-size(14px, 16px);\n }\n\n .label {\n @include font-weight($bold);\n padding-right: 3px;\n }\n }\n}\n","import {Component, h, Prop, State} from \"@stencil/core\";\nimport {PersonCardVariants} from \"../../utils/utils\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n@Component({\n tag: \"hy-person-card\",\n styleUrl: \"hy-person-card.scss\",\n shadow: false,\n})\nexport class HyPersonCard {\n @Prop() variant: PersonCardVariants = PersonCardVariants.default;\n @Prop() categoryTitle?: string;\n @Prop() imageUrl: string = null;\n @Prop() imageAlt: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() firstName?: string;\n @Prop() lastName?: string;\n @Prop() url: string = null;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() positionTitle?: string;\n @Prop() department: string = null;\n @Prop() field: string = null;\n @Prop() email: string = null;\n @Prop() phone: string = null;\n @Prop() aboutInfo: string = null;\n @Prop() researchNetworks?: string;\n @Prop() studyProgramme?: string;\n @Prop() aboutInfoLabel?: string;\n @Prop() researchNetworksLabel?: string;\n @Prop() studyProgrammeLabel?: string;\n\n private _fullName: string;\n private _initials: string;\n\n @State() isMobile: boolean;\n\n private ro: ResizeObserver;\n componentDidLoad() {\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.checkForMobile(entry.contentRect.width);\n }\n });\n this.ro.observe(document.body);\n }\n\n disconnectedCallback() {\n this.ro.disconnect();\n }\n\n checkForMobile(size: number) {\n this.isMobile = size <= 479 ? true : false;\n }\n\n componentWillRender() {\n this._fullName = this.firstName && this.lastName ? `${this.firstName} ${this.lastName}` : \"\";\n this._initials =\n this.imageUrl && this.firstName && this.lastName ? \"\" : `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`;\n if (!this.imageAlt) {\n this.imageAlt = this._fullName;\n }\n if (!this.scLabel) {\n this.scLabel = \"Link to the person profile\";\n }\n }\n\n render() {\n let classLinkAttributes = [\"hy-person-card-container__link\", this.variant].join(\" \");\n let classIsActive = this.url && this.url.length > 0 ? \"\" : \" inactive\";\n classLinkAttributes = classLinkAttributes.concat(classIsActive);\n\n const classAttributes = [\"hy-person-card\", this.variant].join(\" \");\n const classPositionTitle = [\n \"hy-person-card__info-container__position-title\",\n `hy-person-card__info-container__position-title__${this.variant}`,\n ].join(\" \");\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n return (\n <article class=\"hy-person-card-container\">\n <div class={classLinkAttributes}>\n {this.categoryTitle && this.variant == PersonCardVariants.default && (\n <div class=\"hy-person-card-container__category-title\">{this.categoryTitle}</div>\n )}\n <div class={classAttributes}>\n <div class=\"hy-person-card__image-container\">\n {this.imageUrl ? (\n <a class=\"hy-person-card__image-container__image\" href={this.url} target={target}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </a>\n ) : (\n <div class=\"hy-person-card__image-container__no-image\">\n <div class=\"hy-person-card__image-container__no-image__initials\" aria-hidden=\"true\">\n {this._initials}\n </div>\n </div>\n )}\n </div>\n <div class=\"hy-person-card__info-container\">\n <a class=\"hy-person-card__info-container__full-name\" href={this.url} target={target}>\n {this._fullName}\n </a>\n {this.positionTitle && <div class={classPositionTitle}>{this.positionTitle}</div>}\n {this.department &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && (\n <div class=\"hy-person-card__info-container__department\">{this.department}</div>\n )}\n {this.field &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && (\n <div class=\"hy-person-card__info-container__field\">{this.field}</div>\n )}\n {this.email &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && [\n <div class=\"hy-person-card__info-container__email-container\">\n <span class=\"hy-person-card__info-container__email__icon\">\n <hy-icon icon={\"hy-icon-email\"} size={16} />\n </span>\n <span class=\"hy-person-card__info-container__email\">{this.email}</span>\n </div>,\n ]}\n {this.phone &&\n (this.variant == PersonCardVariants.default \|\|\n (this.variant == PersonCardVariants.extended && !this.isMobile)) && [\n <div class=\"hy-person-card__info-container__phone-container\">\n <span class=\"hy-person-card__info-container__phone__icon\">\n <hy-icon icon={\"hy-icon-phone\"} size={14} />\n </span>\n <span class=\"hy-person-card__info-container__phone\">{this.phone}</span>\n </div>,\n ]}\n </div>\n </div>\n {this.variant == PersonCardVariants.extended && (\n <div class=\"hy-person-card hy-person-card__extended-info-container\">\n {this.department && this.isMobile && (\n <div class=\"hy-person-card__info-container__department\">{this.department}</div>\n )}\n {this.field && this.isMobile && <div class=\"hy-person-card__info-container__field\">{this.field}</div>}\n {this.email &&\n this.isMobile && [\n <div class=\"hy-person-card__info-container__email-container\">\n <span class=\"hy-person-card__info-container__email__icon\">\n <hy-icon icon={\"hy-icon-email\"} size={16} />\n </span>\n <span class=\"hy-person-card__info-container__email\">{this.email}</span>\n </div>,\n ]}\n {this.phone &&\n this.isMobile && [\n <div class=\"hy-person-card__info-container__phone-container\">\n <span class=\"hy-person-card__info-container__phone__icon\">\n <hy-icon icon={\"hy-icon-phone\"} size={14} />\n </span>\n <span class=\"hy-person-card__info-container__phone\">{this.phone}</span>\n </div>,\n ]}\n {this.aboutInfo && (\n <div class=\"hy-person-card__extended-info-container__about\">\n <span class=\"label\">{this.aboutInfoLabel}:</span>\n <span>{this.aboutInfo}</span>\n </div>\n )}\n </div>\n )}\n </div>\n </article>\n );\n }\n}\n"],"version":3}

package/components/hy-search-field2.js CHANGED Viewed

@@ -9,6 +9,8 @@ const HySearchField = /*@__PURE__*/ proxyCustomElement(class HySearchField exten
     super();
     this.__registerHost();
     this.label = undefined;
+    this.ariaLabel = "Search";
+    this.resetLabel = "Reset";
     this.isLabelBold = false;
     this.labelLarge = false;
     this.isLuomusSearch = false;
@@ -44,12 +46,14 @@ const HySearchField = /*@__PURE__*/ proxyCustomElement(class HySearchField exten
     return (h(Host, { class: "search-field" }, !this.isLuomusSearch && (h("label", { htmlFor: this.inputId, class: `search-field__label
           ${this.isLabelHidden ? "visually-hidden" : ""}
           ${this.labelLarge ? "label-large" : ""}
-          ${this.isLabelBold ? "bold" : ""}` }, this.label)), h("div", { class: "search-field__actions" }, h("div", { class: "search-field__wrapper" }, this.isLuomusSearch && (h("input", { id: this.inputId, name: "search", "data-drupal-selector": "edit-search", value: "", type: "text", placeholder: this.placeholder, class: "search-field__input" })), !this.isLuomusSearch && (h("input", { id: this.inputId, type: "text", placeholder: this.placeholder, class: "search-field__input" })), !this.isInputValueEmpty && (h("button", { type: "button", class: "search-field__reset", "aria-label": "Reset", onClick: () => this.handleInputReset() }, h("hy-icon", { icon: "hy-icon-remove", size: 14, "aria-hidden": "true" })))), this.isLuomusSearch && (h("button", { type: "submit", class: "search-field__submit", "aria-label": "Search", "data-drupal-selector": "edit-submit-luomus-search", id: "edit-submit-luomus-search", value: "Apply" }, h("hy-icon", { icon: "hy-icon-search", size: 18, fill: ColorVariant.white, "aria-hidden": "true" }))), !this.isLuomusSearch && (h("button", { type: "submit", class: "search-field__submit", "aria-label": "Search" }, h("hy-icon", { icon: "hy-icon-search", size: 18, fill: ColorVariant.white, "aria-hidden": "true" }))))));
+          ${this.isLabelBold ? "bold" : ""}` }, this.label)), h("div", { class: "search-field__actions" }, h("div", { class: "search-field__wrapper" }, this.isLuomusSearch && (h("input", { id: this.inputId, name: "search", "data-drupal-selector": "edit-search", value: "", type: "text", placeholder: this.placeholder, class: "search-field__input" })), !this.isLuomusSearch && (h("input", { id: this.inputId, type: "text", placeholder: this.placeholder, class: "search-field__input" })), !this.isInputValueEmpty && (h("button", { type: "button", class: "search-field__reset", "aria-label": this.resetLabel, onClick: () => this.handleInputReset() }, h("hy-icon", { icon: "hy-icon-remove", size: 14, "aria-hidden": "true" })))), this.isLuomusSearch && (h("button", { type: "submit", class: "search-field__submit", "aria-label": this.ariaLabel, "data-drupal-selector": "edit-submit-luomus-search", id: "edit-submit-luomus-search", value: "Apply" }, h("hy-icon", { icon: "hy-icon-search", size: 18, fill: ColorVariant.white, "aria-hidden": "true" }))), !this.isLuomusSearch && (h("button", { type: "submit", class: "search-field__submit", "aria-label": this.ariaLabel }, h("hy-icon", { icon: "hy-icon-search", size: 18, fill: ColorVariant.white, "aria-hidden": "true" }))))));
   }
   get el() { return this; }
   static get style() { return hySearchFieldCss; }
 }, [0, "hy-search-field", {
     "label": [1],
+    "ariaLabel": [1, "aria-label"],
+    "resetLabel": [1, "reset-label"],
     "isLabelBold": [4, "is-label-bold"],
     "labelLarge": [4, "label-large"],
     "isLuomusSearch": [4, "is-luomus-search"],

package/components/hy-search-field2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"hy-search-field2.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,2qKAA2qK;;MCQvrK,aAAa;;;;;~~uBAGO~~,KAAK;sBACN,KAAK;0BACD,KAAK;uBACT,cAAc;yBACV,KAAK;;4BAEJ,EAAE;6BACC,IAAI;;EAE1C,gBAAgB;IACd,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAElE,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK;MAC1C,MAAM,EAAC,KAAK,EAAC,GAAG,KAAK,CAAC,MAA0B,CAAC;MAEjD,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC;KAC1D,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE;MACpC,IAAI,MAAM,CAAC,QAAQ,KAAK,SAAS;QAAE,OAAO;MAE1C,MAAM,SAAS,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;MAC9D,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;MAC9D,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAqB,CAAC;MACtF,WAAW,CAAC,KAAK,GAAG,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,GAAG,EAAE,CAAC;MAC7E,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;KAChC;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAqB,CAAC;IACtF,WAAW,CAAC,KAAK,GAAG,EAAE,CAAC;IACvB,WAAW,CAAC,KAAK,EAAE,CAAC;GACrB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,cAAc,IACvB,CAAC,IAAI,CAAC,cAAc,KACnB,aACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE;YACP,IAAI,CAAC,aAAa,GAAG,iBAAiB,GAAG,EAAE;YAC3C,IAAI,CAAC,UAAU,GAAG,aAAa,GAAG,EAAE;YACpC,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,EAAE,EAAE,IAE/B,IAAI,CAAC,KAAK,CACL,CACT,EACD,WAAK,KAAK,EAAC,uBAAuB,IAChC,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,cAAc,KAClB,aACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,QAAQ,0BACQ,aAAa,EAClC,KAAK,EAAC,EAAE,EACR,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAC,qBAAqB,GAC3B,CACH,EACA,CAAC,IAAI,CAAC,cAAc,KACnB,aAAO,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,qBAAqB,GAAG,CACnG,EACA,CAAC,IAAI,CAAC,iBAAiB,KACtB,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,qBAAqB,~~gBAChB~~,~~OAAO~~,~~EAClB~~,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,IAEtC,eAAS,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,iBAAc,MAAM,GAAG,CACzD,CACV,CACG,EACL,IAAI,CAAC,cAAc,KAClB,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,sBAAsB,~~gBACjB~~,~~QAAQ~~,~~0BACE~~,2BAA2B,EAChD,EAAE,EAAC,2BAA2B,EAC9B,KAAK,EAAC,OAAO,IAEb,eAAS,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,YAAY,CAAC,KAAK,iBAAc,MAAM,GAAG,CACnF,CACV,EACA,CAAC,IAAI,CAAC,cAAc,KACnB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,sBAAsB,~~gBAAY~~,~~QAAQ~~,~~IACpE~~,eAAS,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,YAAY,CAAC,KAAK,iBAAc,MAAM,GAAG,CACnF,CACV,CACG,CACD,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/hy-search-field/hy-search-field.scss?tag=hy-search-field","./src/components/hy-search-field/hy-search-field.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.search-field {\n display: inline-block;\n width: 100%;\n\n @include breakpoint($narrow) {\n min-width: 48.3%;\n }\n\n @include breakpoint($extrawide) {\n min-width: 23.03%;\n }\n}\n\n.search-field__label {\n @include font-size(14px, 20px);\n display: block;\n font-family: var(--main-font-family);\n letter-spacing: -0.44px;\n margin-bottom: 8px;\n position: relative;\n text-decoration: none;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 20px);\n }\n\n &.label-large {\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n margin-bottom: 0.75rem;\n\n @include breakpoint($narrow) {\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n margin-bottom: 1.25rem;\n }\n }\n\n &.bold {\n @include font-weight($bold);\n }\n}\n\n.search-field__actions {\n align-items: stretch;\n display: flex;\n}\n\n.search-field__wrapper {\n flex-grow: 1;\n position: relative;\n}\n\n.search-field__input {\n @include font-size(16px, 24px);\n border-radius: 0;\n border: 1px solid var(--grayscale-medium-dark);\n caret-color: var(--brand-main-light);\n font-weight: bold;\n height: 40px;\n letter-spacing: normal;\n padding: 8px 12px;\n width: 100%;\n zoom: 0;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n height: 44px;\n }\n\n @include breakpoint($extrawide) {\n height: 48px;\n }\n\n &::placeholder {\n @include font-size(16px, 24px);\n color: var(--grayscale-dark);\n font-weight: normal;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n }\n\n &:hover {\n border-color: var(--brand-main-light);\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 }\n}\n\n.search-field__reset {\n align-items: center;\n background-color: transparent;\n border: 0;\n display: inline-flex;\n height: 40px;\n justify-content: center;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 40px;\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(--grayscale-dark);\n\n @include breakpoint($extrawide) {\n height: 16px;\n width: 16px;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:focus {\n outline-color: var(--brand-main-light);\n }\n}\n\n.search-field__submit {\n align-items: center;\n background-color: var(--brand-main-light);\n border: 0;\n display: inline-flex;\n flex-shrink: 0;\n height: 40px;\n justify-content: center;\n width: 40px;\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 @include breakpoint($narrow) {\n height: 20px;\n width: 20px;\n }\n\n @include breakpoint($extrawide) {\n height: 22px;\n width: 22px;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n s &:focus {\n outline-color: var(--brand-main-light);\n }\n}\n","import {Component, Prop, h, State, Element, Host} from \"@stencil/core\";\nimport {ColorVariant} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-search-field\",\n styleUrl: \"hy-search-field.scss\",\n shadow: false,\n})\nexport class HySearchField {\n @Element() el: HTMLElement;\n @Prop() label: string;\n @Prop() isLabelBold: boolean = false;\n @Prop() labelLarge: boolean = false;\n @Prop() isLuomusSearch: boolean = false;\n @Prop() placeholder: string = \"Type here...\";\n @Prop() isLabelHidden?: boolean = false;\n @Prop() inputId: string;\n @Prop() prefillParameter: string = \"\";\n @State() isInputValueEmpty: boolean = true;\n\n componentDidLoad() {\n const searchInput = this.el.querySelector(\".search-field__input\");\n\n searchInput.addEventListener(\"keyup\", (event) => {\n const {value} = event.target as HTMLInputElement;\n\n this.isInputValueEmpty = value.length > 0 ? false : true;\n });\n\n if (this.prefillParameter.length > 0) {\n if (window.location === undefined) return;\n\n const urlParams = new URLSearchParams(window.location.search);\n const searchValue = urlParams.get(`${this.prefillParameter}`);\n const searchInput = this.el.querySelector(\".search-field__input\") as HTMLInputElement;\n searchInput.value = searchValue && searchValue.length > 0 ? searchValue : \"\";\n this.isInputValueEmpty = false;\n }\n }\n\n handleInputReset() {\n this.isInputValueEmpty = true;\n const searchInput = this.el.querySelector(\".search-field__input\") as HTMLInputElement;\n searchInput.value = \"\";\n searchInput.focus();\n }\n\n render() {\n return (\n <Host class=\"search-field\">\n {!this.isLuomusSearch && (\n <label\n htmlFor={this.inputId}\n class={`search-field__label \n ${this.isLabelHidden ? \"visually-hidden\" : \"\"} \n ${this.labelLarge ? \"label-large\" : \"\"} \n ${this.isLabelBold ? \"bold\" : \"\"}`}\n >\n {this.label}\n </label>\n )}\n <div class=\"search-field__actions\">\n <div class=\"search-field__wrapper\">\n {this.isLuomusSearch && (\n <input\n id={this.inputId}\n name=\"search\"\n data-drupal-selector=\"edit-search\"\n value=\"\"\n type=\"text\"\n placeholder={this.placeholder}\n class=\"search-field__input\"\n />\n )}\n {!this.isLuomusSearch && (\n <input id={this.inputId} type=\"text\" placeholder={this.placeholder} class=\"search-field__input\" />\n )}\n {!this.isInputValueEmpty && (\n <button\n type=\"button\"\n class=\"search-field__reset\"\n aria-label~~=\"Reset~~\"\n onClick={() => this.handleInputReset()}\n >\n <hy-icon icon={\"hy-icon-remove\"} size={14} aria-hidden=\"true\" />\n </button>\n )}\n </div>\n {this.isLuomusSearch && (\n <button\n type=\"submit\"\n class=\"search-field__submit\"\n aria-label~~=\"Search~~\"\n data-drupal-selector=\"edit-submit-luomus-search\"\n id=\"edit-submit-luomus-search\"\n value=\"Apply\"\n >\n <hy-icon icon={\"hy-icon-search\"} size={18} fill={ColorVariant.white} aria-hidden=\"true\" />\n </button>\n )}\n {!this.isLuomusSearch && (\n <button type=\"submit\" class=\"search-field__submit\" aria-label~~=\"Search\"~~>\n <hy-icon icon={\"hy-icon-search\"} size={18} fill={ColorVariant.white} aria-hidden=\"true\" />\n </button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"hy-search-field2.js","mappings":"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","names":[],"sources":["./src/components/hy-search-field/hy-search-field.scss?tag=hy-search-field","./src/components/hy-search-field/hy-search-field.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.search-field {\n display: inline-block;\n width: 100%;\n\n @include breakpoint($narrow) {\n min-width: 48.3%;\n }\n\n @include breakpoint($extrawide) {\n min-width: 23.03%;\n }\n}\n\n.search-field__label {\n @include font-size(14px, 20px);\n display: block;\n font-family: var(--main-font-family);\n letter-spacing: -0.44px;\n margin-bottom: 8px;\n position: relative;\n text-decoration: none;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 20px);\n }\n\n &.label-large {\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n margin-bottom: 0.75rem;\n\n @include breakpoint($narrow) {\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n margin-bottom: 1.25rem;\n }\n }\n\n &.bold {\n @include font-weight($bold);\n }\n}\n\n.search-field__actions {\n align-items: stretch;\n display: flex;\n}\n\n.search-field__wrapper {\n flex-grow: 1;\n position: relative;\n}\n\n.search-field__input {\n @include font-size(16px, 24px);\n border-radius: 0;\n border: 1px solid var(--grayscale-medium-dark);\n caret-color: var(--brand-main-light);\n font-weight: bold;\n height: 40px;\n letter-spacing: normal;\n padding: 8px 12px;\n width: 100%;\n zoom: 0;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n height: 44px;\n }\n\n @include breakpoint($extrawide) {\n height: 48px;\n }\n\n &::placeholder {\n @include font-size(16px, 24px);\n color: var(--grayscale-dark);\n font-weight: normal;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n }\n\n &:hover {\n border-color: var(--brand-main-light);\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 }\n}\n\n.search-field__reset {\n align-items: center;\n background-color: transparent;\n border: 0;\n display: inline-flex;\n height: 40px;\n justify-content: center;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 40px;\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(--grayscale-dark);\n\n @include breakpoint($extrawide) {\n height: 16px;\n width: 16px;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:focus {\n outline-color: var(--brand-main-light);\n }\n}\n\n.search-field__submit {\n align-items: center;\n background-color: var(--brand-main-light);\n border: 0;\n display: inline-flex;\n flex-shrink: 0;\n height: 40px;\n justify-content: center;\n width: 40px;\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 @include breakpoint($narrow) {\n height: 20px;\n width: 20px;\n }\n\n @include breakpoint($extrawide) {\n height: 22px;\n width: 22px;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n s &:focus {\n outline-color: var(--brand-main-light);\n }\n}\n","import {Component, Prop, h, State, Element, Host} from \"@stencil/core\";\nimport {ColorVariant} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-search-field\",\n styleUrl: \"hy-search-field.scss\",\n shadow: false,\n})\nexport class HySearchField {\n @Element() el: HTMLElement;\n @Prop() label: string;\n @Prop() ariaLabel: string = \"Search\";\n @Prop() resetLabel: string = \"Reset\";\n @Prop() isLabelBold: boolean = false;\n @Prop() labelLarge: boolean = false;\n @Prop() isLuomusSearch: boolean = false;\n @Prop() placeholder: string = \"Type here...\";\n @Prop() isLabelHidden?: boolean = false;\n @Prop() inputId: string;\n @Prop() prefillParameter: string = \"\";\n @State() isInputValueEmpty: boolean = true;\n\n componentDidLoad() {\n const searchInput = this.el.querySelector(\".search-field__input\");\n\n searchInput.addEventListener(\"keyup\", (event) => {\n const {value} = event.target as HTMLInputElement;\n\n this.isInputValueEmpty = value.length > 0 ? false : true;\n });\n\n if (this.prefillParameter.length > 0) {\n if (window.location === undefined) return;\n\n const urlParams = new URLSearchParams(window.location.search);\n const searchValue = urlParams.get(`${this.prefillParameter}`);\n const searchInput = this.el.querySelector(\".search-field__input\") as HTMLInputElement;\n searchInput.value = searchValue && searchValue.length > 0 ? searchValue : \"\";\n this.isInputValueEmpty = false;\n }\n }\n\n handleInputReset() {\n this.isInputValueEmpty = true;\n const searchInput = this.el.querySelector(\".search-field__input\") as HTMLInputElement;\n searchInput.value = \"\";\n searchInput.focus();\n }\n\n render() {\n return (\n <Host class=\"search-field\">\n {!this.isLuomusSearch && (\n <label\n htmlFor={this.inputId}\n class={`search-field__label \n ${this.isLabelHidden ? \"visually-hidden\" : \"\"} \n ${this.labelLarge ? \"label-large\" : \"\"} \n ${this.isLabelBold ? \"bold\" : \"\"}`}\n >\n {this.label}\n </label>\n )}\n <div class=\"search-field__actions\">\n <div class=\"search-field__wrapper\">\n {this.isLuomusSearch && (\n <input\n id={this.inputId}\n name=\"search\"\n data-drupal-selector=\"edit-search\"\n value=\"\"\n type=\"text\"\n placeholder={this.placeholder}\n class=\"search-field__input\"\n />\n )}\n {!this.isLuomusSearch && (\n <input id={this.inputId} type=\"text\" placeholder={this.placeholder} class=\"search-field__input\" />\n )}\n {!this.isInputValueEmpty && (\n <button\n type=\"button\"\n class=\"search-field__reset\"\n aria-label={this.resetLabel}\n onClick={() => this.handleInputReset()}\n >\n <hy-icon icon={\"hy-icon-remove\"} size={14} aria-hidden=\"true\" />\n </button>\n )}\n </div>\n {this.isLuomusSearch && (\n <button\n type=\"submit\"\n class=\"search-field__submit\"\n aria-label={this.ariaLabel}\n data-drupal-selector=\"edit-submit-luomus-search\"\n id=\"edit-submit-luomus-search\"\n value=\"Apply\"\n >\n <hy-icon icon={\"hy-icon-search\"} size={18} fill={ColorVariant.white} aria-hidden=\"true\" />\n </button>\n )}\n {!this.isLuomusSearch && (\n <button type=\"submit\" class=\"search-field__submit\" aria-label={this.ariaLabel}>\n <hy-icon icon={\"hy-icon-search\"} size={18} fill={ColorVariant.white} aria-hidden=\"true\" />\n </button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}