npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.73 → 0.8.74 - Mend

@itcenteratunihelsinki/huds-lib 0.8.73 → 0.8.74

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

package/dist/huds-lib/hy-breadcrumbs_15.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["hyBreadcrumbsCss","HyBreadcrumbs","BreadcrumbVariants","default","async","this","_dataItems","jsonParserWorker","dataItems","componentDidLoad","hyMainDiv","el","closest","classList","contains","headerstyle","render","breadcrumbsClass","variant","join","h","role","class","map","item","url","length","href","text","icon","size","hyFooterCss","HyFooter","classAttributes","hyFooterActionCss","scrollTimeout","HyFooterAction","disconnectedCallback","clearTimeout","scrollTop","hyLogo","document","querySelector","window","scrollTo","top","behavior","setTimeout","focus","Host","updatedText","upButtonLabel","id","htmlFor","onClick","name","type","hyFooterBaseCss","HyFooterBase","FooterLinkItemColor","white","SiteLogoSize","big","_dataFooterBaseLinks","dataFooterBaseLinks","_dataFooterBaseSome","dataFooterBaseSome","_dataFooterPostSectionLinks","dataFooterPostSectionLinks","logoColor","ColorVariant","links","postSectionLinks","some","FooterVariant","footer","color","logoUrl","label","logoLabel","s","title","target","link","mainLink","mainlink","items","_a","external","copyrightText","hyFooterInfoCss","HyFooterInfo","_dataFooterInfoLinks","dataFooterInfoLinks","_dataLuomusFooterContent","luomusFooterContent","ro","ResizeObserver","entries","entry","checkForMobile","contentRect","width","observe","body","disconnect","isMobile","luomusFooterContentItems","isGroup","FooterLinkVariants","group","campus","section","HeadingSectionVariants","groupFooterInfo","defaultFooterInfo","footerLinkItemClass","scLabel","linkScLabel","linkText","linksColor","isLuomusGroup","black","luomus","heading","HeadingVarians","h2","textTitle","groupLogoUrl","src","alt","innerHTML","textDescription","linkUrl","linkIsExternal","CtaLinkButtonVariants","onWhiteBkgd","content","accordionid","accordiontitle","external_link","isExternal","hyFooterLinkItemCss","HyFooterLinkItem","base","containerClassAttributes","headingClassAttributes","linkClassAttributes","style","h3","defaultHeadingCss","wideHeadingFwCss","Heading","parentElement","hasChildren","headingInVariants","negative","isSearch","sectionClassAttributes","containerSectionClass","hyphenatedText","ingressCss","Ingress","hyMainContentWrapperCss","HyMainContentWrapper","menuLanguageCss","MenuLanguage","handleOutsideMenuClick","event","isMenuOpen","stopPropagation","desktopMenuToggled","searchPanelToggled","universityMainMenuPanelToggled","handleComponentFocus","menuLanguageToggled","emit","handleComponentClick","languageMenuSelector","adjustPosition","languagePanel","shadowRoot","querySelectorAll","headerHeight","hyHeader","rectHeader","getBoundingClientRect","rectLangMenu","offsetHeight","bottom","_dataMenuLanguage","dataMenuLanguage","_labels","labels","svgColor","globeIconSize","fill","isActive","langCode","abbr","isDisabled","menuLanguageItemCss","SiteLanguage","lang","hySearchFieldCss","HySearchField","searchInput","addEventListener","value","isInputValueEmpty","prefillParameter","location","undefined","urlParams","URLSearchParams","search","searchValue","get","handleInputReset","isLuomusSearch","inputId","isLabelHidden","labelLarge","isLabelBold","placeholder","resetLabel","ariaLabel","siteHeaderCss","clickTimer","clickTimeout","SiteHeader","mobileMenuToggle","menuMobileToggled","bodyElement","getElementsByTagName","overflow","mobileMenuTopToggle","isTopMenuOpen","menuMobileTopToggled","mainMenuToggled","isDesktopMenuOpen","handleScroll","headerScrollHandler","topOffset","pageYOffset","Math","abs","lastScrollTop","delta","isTopVisible","toggleStickyness","headerScrollDown","headerScrollUp","toggleOn","bodyElementClasses","hySiteHeader","add","remove","isBottomVisible","applySizeClasses","topOptions","root","rootMargin","threshold","topObserver","IntersectionObserver","forEach","nodeName","isIntersecting","header","bottomOptions","bottomObserver","children","setAttribute","navbarHeight","setProperty","dataSiteHeaderLabels","menuLabels","menu_labels","languageLabels","language_labels","searchLabels","search_labels","groupPages","group_pages","dataMenuDonate","donateLink","toString","siteLabel","siteUrl","groupType","isDesktopMenuDropdown","menuType","MenuType","mobile","desktop","tablet","menuAttribute","logoSize","small","logoSizeGroup","logoColorGroup","toggleMenuMobileAndRemoveListener","removeEventListener","handleClickOutside","targetElement","composedPath","activeLang","dataMenuLanguageArray","JSON","parse","dataMainMenuLinks","tabindex","menuLabelClose","noSearch","isBetaGroup","showSearchLabel","dataSiteSearchLabels","dataSearchTools","researchGroupLabel","donate","Fragment","siteLogoCss","SiteLogo","isGroupClass","siteSearchCss","SiteSearch","searchTools","_searchTools","_searchLabels","searchTitleLabel","searchCloseLabel","searchToolsLabel","searchDescriptionLabel","closePanelWhenOtherDropdownsTriggered","closeSearchPanel","handleWindowClick","detail","isSearchPanelOpen","path","cludoSayt","CludoSayt","hide","handleSearchPanelToggle","beta","luomus_search_url","searchLanguage","cludoSearchContentFormElement","append","position","maxWidth","currentPageUrlPathName","pathname","searchPagePathNames","showLabel","isAlternative","e","disabled","margin","i","searchToolTarget","description"],"sources":["./src/components/hy-breadcrumbs/hy-breadcrumbs.scss?tag=hy-breadcrumbs","./src/components/hy-breadcrumbs/hy-breadcrumbs.tsx","./src/components/footer/hy-footer/hy-footer.scss?tag=hy-footer","./src/components/footer/hy-footer/hy-footer.tsx","./src/components/footer/hy-footer-action/hy-footer-action.scss?tag=hy-footer-action","./src/components/footer/hy-footer-action/hy-footer-action.tsx","./src/components/footer/hy-footer-base/hy-footer-base.scss?tag=hy-footer-base","./src/components/footer/hy-footer-base/hy-footer-base.tsx","./src/components/footer/hy-footer-info/hy-footer-info.scss?tag=hy-footer-info","./src/components/footer/hy-footer-info/hy-footer-info.tsx","./src/components/footer/hy-footer-link-item/hy-footer-link-item.scss?tag=hy-footer-link-item","./src/components/footer/hy-footer-link-item/hy-footer-link-item.tsx","./src/components/hy-heading/heading.scss?tag=hy-heading&mode=default","./src/components/hy-heading/heading-fw.scss?tag=hy-heading&mode=wide","./src/components/hy-heading/heading.tsx","./src/components/hy-ingress/ingress.scss?tag=hy-ingress","./src/components/hy-ingress/ingress.tsx","./src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss?tag=hy-main-content-wrapper","./src/components/hy-main-content-wrapper/hy-main-content-wrapper.tsx","./src/components/hy-navigation/menu-language/menu-language.scss?tag=hy-menu-language&encapsulation=shadow","./src/components/hy-navigation/menu-language/menu-language.tsx","./src/components/hy-navigation/menu-language-item/menu-language-item.scss?tag=hy-menu-language-item&encapsulation=shadow","./src/components/hy-navigation/menu-language-item/menu-language-item.tsx","./src/components/hy-search-field/hy-search-field.scss?tag=hy-search-field","./src/components/hy-search-field/hy-search-field.tsx","./src/components/hy-site-header/site-header.scss?tag=hy-site-header","./src/components/hy-site-header/site-header.tsx","./src/components/hy-site-header/site-logo/site-logo.scss?tag=hy-site-logo","./src/components/hy-site-header/site-logo/site-logo.tsx","./src/components/hy-site-header/site-search/site-search.scss?tag=hy-site-search&encapsulation=shadow","./src/components/hy-site-header/site-search/site-search.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-breadcrumbs {\n display: inline-block;\n position: relative;\n width: auto;\n\n &.is-condensed {\n width: 100%;\n }\n\n ol {\n margin: 0;\n padding: 0;\n }\n\n .breadcrumb-container {\n display: flex;\n font-family: var(--main-font-family);\n flex-wrap: wrap;\n list-style-type: none;\n margin: 0;\n padding: 20px 0 16px;\n\n @include breakpoint($narrow) {\n padding: 24px 0 16px;\n }\n\n @include breakpoint($extrawide) {\n padding: 32px 0 16px;\n }\n }\n\n .breadcrumb-item {\n @include font-size(15px, 20px);\n align-items: center;\n display: flex;\n font-weight: 600;\n font-family: var(--main-font-family);\n margin-bottom: 0.75rem;\n letter-spacing: -0.5px;\n\n @include breakpoint($narrow) {\n margin-bottom: 1rem;\n }\n\n .breadcrumb-item__link {\n color: var(--brand-main-light);\n text-decoration: none;\n }\n\n .breadcrumb-item__icon {\n margin: 0 21px;\n }\n\n &:hover {\n .breadcrumb-item__link {\n color: var(--brand-main-active);\n }\n }\n }\n\n .breadcrumb-item--current a {\n @include font-size(15px, 20px);\n\n color: var(--grayscale-dark);\n display: block;\n font-family: var(--main-font-family);\n font-weight: 600;\n letter-spacing: -0.5px;\n text-decoration: none;\n }\n}\n","export interface Breadcrumb {\n url: string;\n text: string;\n}\n\nimport {Component, Element, h, Prop, State} from \"@stencil/core\";\nimport {BreadcrumbVariants} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n tag: \"hy-breadcrumbs\",\n styleUrl: \"hy-breadcrumbs.scss\",\n shadow: false,\n})\nexport class HyBreadcrumbs {\n private _dataItems: Breadcrumb[];\n @Prop() dataItems: Breadcrumb[] | string;\n @Prop() variant: BreadcrumbVariants = BreadcrumbVariants.default as any;\n @Prop() headerstyle: string = \"with-sidebar\";\n\n @State() menuOpen: boolean = false;\n @Element() el: HTMLElement;\n\n async componentWillLoad() {\n this._dataItems = await jsonParserWorker(this.dataItems);\n }\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"without-sidebar\";\n }\n }\n }\n\n render() {\n const breadcrumbsClass = [\"hy-breadcrumbs\", this.variant, this.headerstyle].join(\" \");\n return (\n <nav aria-label=\"Breadcrumb\" role=\"navigation\" aria-labelledby=\"system-breadcrumb\" class={breadcrumbsClass}>\n <ol class=\"breadcrumb-container\">\n {this._dataItems.map((item) => {\n if (item.url.length > 0) {\n return (\n <li class=\"breadcrumb-item\">\n <a class=\"breadcrumb-item__link\" href={item.url}>\n {item.text}\n </a>\n <hy-icon class=\"breadcrumb-item__icon\" icon=\"hy-icon-caret-right\" size={12}></hy-icon>\n </li>\n );\n } else {\n return (\n <li class=\"breadcrumb-item breadcrumb-item--current\">\n <a href={item.url} aria-current=\"page\">\n {item.text}\n </a>\n </li>\n );\n }\n })}\n </ol>\n </nav>\n );\n }\n}\n",".hy-footer {\n display: block;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-footer\",\n styleUrl: \"hy-footer.scss\",\n shadow: false,\n})\nexport class HyFooter {\n render() {\n const classAttributes = [\"hy-footer\"];\n return (\n <footer class={classAttributes.join(\" \")}>\n <slot></slot>\n </footer>\n );\n }\n}\n",".hy-footer-action {\n align-items: center;\n border-top: 1px solid var(--grayscale-medium-dark);\n display: flex;\n flex-direction: row;\n padding: 8px 16px 16px 16px;\n place-content: center space-between;\n width: 100%;\n\n @include breakpoint($narrow) {\n margin: 0 auto;\n max-width: $fullhd;\n padding: 16px 24px 16px 24px;\n }\n\n @include breakpoint($wide) {\n padding: 16px 32px 24px 32px;\n }\n\n &__updated-text {\n @include font-size(14px, 24px);\n\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n letter-spacing: 0;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n }\n\n &__scroll-up {\n align-items: center;\n display: flex;\n\n .hy-footer-action__up-button {\n background-color: var(--brand-main-light);\n border: 0;\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);\n padding: 8px;\n\n &:hover {\n cursor: pointer;\n }\n }\n\n label {\n @include font-size(16px, 24px);\n\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n letter-spacing: 0;\n margin-right: 8px;\n\n &:hover {\n cursor: pointer;\n }\n }\n\n svg {\n fill: var(--grayscale-white);\n }\n\n &:hover {\n label {\n text-decoration: underline;\n }\n .hy-footer-action__up-button {\n background-color: var(--brand-main);\n }\n }\n }\n}\n","import {Component, Host, Prop, Listen, h} from \"@stencil/core\";\n\nlet scrollTimeout = null;\n\n@Component({\n tag: \"hy-footer-action\",\n styleUrl: \"hy-footer-action.scss\",\n shadow: false,\n})\nexport class HyFooterAction {\n /**\n * String of text for updated text to be displayed.\n */\n @Prop() updatedText: string;\n /**\n * Up button label.\n */\n @Prop() upButtonLabel: string;\n\n disconnectedCallback() {\n clearTimeout(scrollTimeout);\n }\n\n @Listen(\"scrollTop\", {capture: true}) scrollTop() {\n const hyLogo = document.querySelector(\".hy-site-header .hy-site-header__branding a\") as HTMLElement;\n window.scrollTo({top: 0, behavior: \"smooth\"});\n scrollTimeout = window.setTimeout(() => {\n hyLogo.focus();\n }, 500);\n }\n\n render() {\n const classAttributes = [\"hy-footer-action\"].join(\" \");\n\n return (\n <Host class={classAttributes}>\n <span class={\"hy-footer-action__updated-text\"}>{this.updatedText}</span>\n {this.upButtonLabel && (\n <span class=\"hy-footer-action__scroll-up\">\n <label id=\"up-label\" htmlFor=\"scroll-up\" onClick={() => this.scrollTop()}>\n {this.upButtonLabel}\n </label>\n <button\n name=\"scroll-up\"\n aria-labelledby=\"up-label\"\n onClick={() => this.scrollTop()}\n class=\"hy-footer-action__up-button\"\n type=\"button\"\n >\n <hy-icon class={\"hy-footer-action__up-icon\"} icon={\"hy-icon-arrow-up\"} size={26} />\n </button>\n </span>\n )}\n </Host>\n );\n }\n}\n",".hy-footer-base--content-container {\n background-color: var(--grayscale-black);\n display: block;\n max-width: 100%;\n}\n\n.hy-footer-base {\n background-color: var(--grayscale-black);\n display: flex;\n flex-direction: column;\n max-height: 100%;\n padding: 32px 16px 0 16px;\n place-content: center space-between;\n position: relative;\n width: 100%;\n\n @include breakpoint($narrow) {\n flex-direction: column;\n margin: 0 auto;\n max-width: $fullhd;\n padding: 32px 24px 0 24px;\n }\n\n @include breakpoint($wide) {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(2, auto);\n padding: 36px 32px 0 32px;\n }\n\n @include breakpoint($extrawide) {\n padding: 40px 32px 0 32px;\n }\n\n &__left {\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: 24px;\n order: 2;\n\n @include breakpoint($narrow) {\n align-items: center;\n width: 100%;\n }\n\n @include breakpoint($wide) {\n order: unset;\n align-items: flex-start;\n }\n }\n\n &__logo {\n @include font-size(18px, 16px);\n\n font-family: var(--main-font-family);\n font-weight: bold;\n letter-spacing: -0.9px;\n\n .hy-site-logo__label {\n max-width: max-content;\n min-width: max-content;\n }\n }\n\n &__content {\n @include font-size(16px, 24px);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-style: normal;\n font-weight: 600;\n letter-spacing: -0.1px;\n margin: 22px 0;\n white-space: pre-line;\n\n @include breakpoint($narrow) {\n margin: 22px 0;\n }\n\n @include breakpoint($wide) {\n margin: 32px 0;\n }\n\n @include breakpoint($extrawide) {\n margin: 44px 0;\n }\n\n address {\n font-style: normal;\n }\n\n a {\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n }\n }\n\n &__some {\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-bottom: 0;\n z-index: 2;\n\n @include breakpoint($medium) {\n margin-bottom: 64px;\n }\n\n @include breakpoint($wide) {\n align-items: flex-start;\n flex-direction: column;\n margin-bottom: 0;\n }\n\n @include breakpoint($extrawide) {\n align-items: center;\n flex-direction: row;\n }\n\n &__label {\n @include font-size(16px, 24px);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-weight: 600;\n letter-spacing: -0.1px;\n margin-bottom: 8px;\n margin-right: 24px;\n\n @include breakpoint($wide) {\n margin-bottom: 8px;\n }\n }\n\n &__items {\n align-items: center;\n display: flex;\n flex-direction: row;\n }\n\n &__item {\n margin-right: 24px;\n\n :last-child() {\n margin-right: 0;\n }\n\n &:hover {\n color: var(--grayscale-medium) !important;\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n\n svg {\n fill: var(--grayscale-white);\n }\n }\n\n &__right {\n display: flex;\n flex-direction: column;\n grid-column: 2 / -1;\n justify-content: center;\n max-height: 100%;\n order: 1;\n width: 100%;\n\n hy-footer-link-item {\n float: none;\n width: 100%;\n }\n\n @include breakpoint($narrow) {\n margin-bottom: 32px;\n }\n\n @include breakpoint($medium) {\n display: block;\n justify-content: flex-start;\n\n hy-footer-link-item {\n clear: right;\n float: left;\n height: max-content;\n width: 50%;\n margin-bottom: 1.5rem;\n }\n }\n\n @include breakpoint($wide) {\n order: unset;\n }\n }\n\n &__bottom {\n border-top: 1px solid var(--grayscale-white);\n display: flex;\n flex-direction: column;\n grid-column: 1 / -1;\n justify-content: center;\n margin: 2.5rem 0 1rem;\n order: 3;\n padding-top: 2.5rem;\n width: 100%;\n\n @include breakpoint($medium) {\n flex-direction: row;\n justify-content: space-between;\n padding-top: 1rem;\n }\n\n &__links {\n align-items: flex-start;\n display: flex;\n flex-wrap: wrap;\n gap: 1.25rem;\n justify-content: center;\n padding: 0 1rem 1rem;\n\n @include breakpoint($medium) {\n padding: 0;\n gap: 2rem;\n }\n }\n\n &__link {\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-size: 14px;\n font-weight: 600;\n letter-spacing: -0.1;\n line-height: 19.07px;\n text-align: right;\n text-decoration: underline;\n text-decoration-thickness: auto;\n\n &:hover,\n &:focus-within {\n text-decoration-thickness: 2px;\n }\n }\n }\n\n &__copy {\n @include font-size(16px, 24px);\n\n align-self: center;\n color: var(--grayscale-white);\n display: block;\n font-family: var(--main-font-family);\n font-weight: 600;\n letter-spacing: -0.1px;\n text-align: center;\n\n @include breakpoint($medium) {\n align-self: flex-end;\n margin-left: 0.5rem;\n }\n }\n}\n","export interface FooterBaseLinks {\n label: string;\n url: string;\n isActive?: boolean;\n mainlink?: boolean;\n items: Array<FooterBaseLinks>;\n}\n\nexport interface FooterPostSectionLinks {\n label: string;\n url: string;\n external: boolean;\n}\n\nexport interface FooterBaseSome {\n label: string;\n url: string;\n type: string;\n}\n\nimport {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {FooterLinkItemColor, SiteLogoSize, ColorVariant, FooterVariant} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-footer-base\",\n styleUrl: \"hy-footer-base.scss\",\n shadow: false,\n})\nexport class HyFooterBase implements ComponentInterface {\n /**\n * Link item color\n */\n @Prop() color: FooterLinkItemColor = FooterLinkItemColor.white;\n /**\n * Logo url\n */\n @Prop() logoUrl?: string;\n /**\n * Logo label\n */\n @Prop() logoLabel?: string;\n /**\n * Logo size\n */\n @Prop() size: SiteLogoSize = SiteLogoSize.big;\n /**\n * Label for some links\n */\n @Prop() someLabel?: string;\n /**\n * Copyright text\n */\n @Prop() copyrightText: string;\n\n private _dataFooterBaseLinks: FooterBaseLinks[];\n private _dataFooterBaseSome: FooterBaseSome[];\n private _dataFooterPostSectionLinks: FooterPostSectionLinks[];\n /**\n * Footer links to be displayed\n */\n @Prop() dataFooterBaseLinks: FooterBaseLinks[] | string;\n /**\n * Footer post section links\n */\n @Prop() dataFooterPostSectionLinks: FooterPostSectionLinks[] | string;\n /**\n * Footer some links\n */\n @Prop() dataFooterBaseSome: FooterBaseSome[] | string;\n\n async componentWillLoad() {\n this._dataFooterBaseLinks = await jsonParserWorker(this.dataFooterBaseLinks);\n this._dataFooterBaseSome = await jsonParserWorker(this.dataFooterBaseSome);\n this._dataFooterPostSectionLinks = await jsonParserWorker(this.dataFooterPostSectionLinks);\n }\n\n render() {\n const logoColor = ColorVariant.white;\n const classAttributes = [\"hy-footer-base--content-container\"].join(\" \");\n const links = this._dataFooterBaseLinks as Array<FooterBaseLinks>;\n const postSectionLinks = this._dataFooterPostSectionLinks as Array<FooterPostSectionLinks>;\n const some = this._dataFooterBaseSome as Array<FooterBaseSome>;\n\n return (\n <Host class={classAttributes}>\n <div class=\"hy-footer-base\">\n <div class=\"hy-footer-base__left\">\n <div class=\"hy-footer-base__logo\">\n <hy-site-logo type={FooterVariant.footer} color={logoColor} url={this.logoUrl} label={this.logoLabel} />\n </div>\n <div class=\"hy-footer-base__content\">\n <slot name=\"content\"></slot>\n </div>\n <div class=\"hy-footer-base__some\">\n <div class=\"hy-footer-base__some__items\">\n {some &&\n some.map((s) => {\n return (\n <a\n aria-label={s.label}\n href={s.url}\n class={`hy-footer-base__some__item`}\n title={s.label}\n target=\"_blank\"\n >\n <hy-icon icon={`hy-icon-some-${s.type}`} size={36} />\n </a>\n );\n })}\n </div>\n </div>\n </div>\n <div class=\"hy-footer-base__right\">\n {links &&\n links.map((link) => {\n return (\n <hy-footer-link-item\n label={link.label}\n url={link.url}\n color={FooterLinkItemColor.white}\n mainLink={link.mainlink}\n items={link.items ?? null}\n ></hy-footer-link-item>\n );\n })}\n </div>\n {postSectionLinks && (\n <div class=\"hy-footer-base__bottom\">\n <div class=\"hy-footer-base__bottom__links\">\n {postSectionLinks &&\n postSectionLinks.map((item) => (\n <a class=\"hy-footer-base__bottom__link\" href={item.url} target={item.external ? \"_blank\" : \"_self\"}>\n {item.label}\n </a>\n ))}\n </div>\n {this.copyrightText && <span class=\"hy-footer-base__copy\">{this.copyrightText}</span>}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n",":host {\n display: block;\n}\n\n.hy-footer-info {\n display: flex;\n flex-direction: column;\n max-height: auto;\n padding: 0 16px 40px 16px;\n place-content: center space-between;\n\n @include breakpoint($narrow) {\n flex-direction: column;\n margin: 0 auto;\n max-width: $fullhd;\n padding: 0 24px 32px 24px;\n }\n\n @include breakpoint($wide) {\n flex-direction: row;\n padding: 0 32px 36px 32px;\n }\n\n @include breakpoint($extrawide) {\n padding: 0 32px 40px 32px;\n }\n\n &__content {\n margin-bottom: 24px;\n width: 100%;\n\n @include breakpoint($narrow) {\n margin-bottom: 32px;\n width: 100%;\n }\n\n @include breakpoint($wide) {\n width: 31.11%;\n }\n\n .hy-heading {\n padding-top: 0 !important;\n }\n }\n\n &__ingress {\n @include font-size(15px, 20px);\n @include font-weight($regular);\n letter-spacing: -0.09px;\n\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n padding-bottom: 24px;\n\n @include breakpoint($wide) {\n @include font-size(16px, 22px);\n letter-spacing: -0.1px;\n padding-bottom: 16px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n }\n\n @include breakpoint($extrawide) {\n padding-bottom: 24px;\n }\n\n a {\n @include font-size(14px, 20px); // Paragraph Small size\n color: var(--link-blue);\n font-family: var(--main-font-family);\n font-weight: 600;\n display: inline-flex;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n letter-spacing: -0.1px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n }\n\n &:hover {\n color: var(--brand-main);\n }\n }\n\n a[target=\"_blank\"]:after {\n display: block;\n content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n margin-left: 3px;\n transform: rotate(315deg);\n\n &:hover {\n content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n }\n }\n\n a[target=\"_blank\"]:hover {\n &:after {\n content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n }\n }\n }\n\n &__links {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n max-height: auto;\n overflow: hidden;\n width: 100%;\n\n @include breakpoint($narrow) {\n align-content: space-between;\n max-height: 555px;\n width: 100%;\n }\n @include breakpoint($wide) {\n max-height: 555px;\n width: 65.56%;\n }\n @include breakpoint($overwide) {\n max-height: 530px;\n }\n\n &.is-group:not(.luomus) {\n @include breakpoint($narrow) {\n flex-direction: row;\n max-height: none;\n }\n }\n }\n\n .hy-accordion__content--inner-wrapper {\n width: 100%;\n }\n}\n\n.hy-footer-info.luomus {\n background-color: var(--grayscale-black);\n color: var(--grayscale-white);\n padding-top: 40px;\n\n .hy-footer-info__logo {\n @include font-size(18px, 16px);\n font-family: var(--main-font-family);\n font-weight: bold;\n letter-spacing: -0.9px;\n\n .hy-site-logo__label {\n max-width: 100%;\n }\n }\n\n .hy-footer-info__branding {\n padding: 22px 0 62px;\n a {\n img {\n height: 32px;\n width: 148px;\n }\n }\n }\n\n .luomus-footer-content {\n color: var(--grayscale-white);\n margin: 8px 0;\n\n &__link {\n @include font-size(18px, 24px);\n @include font-weight($bold);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-style: normal;\n letter-spacing: -0.36px;\n text-decoration: none;\n }\n\n &__description {\n @include font-size(16px, 22px);\n @include font-weight($regular);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-style: normal;\n letter-spacing: -0.1px;\n padding-bottom: 32px;\n }\n }\n}\n","export interface FooterInfoLinks {\n label: string;\n url: string;\n isExternal: string;\n isActive?: boolean;\n mainlink?: boolean;\n items: Array<FooterInfoLinks>;\n}\n\nexport interface LuomusFooterContent {\n heading: string;\n url: string;\n content?: string;\n}\n\nimport {Component, ComponentInterface, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport ResizeObserver from \"resize-observer-polyfill\";\nimport {\n ColorVariant,\n CtaLinkButtonVariants,\n FooterLinkItemColor,\n FooterLinkVariants,\n FooterVariant,\n HeadingSectionVariants,\n HeadingVarians,\n} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-footer-info\",\n styleUrl: \"hy-footer-info.scss\",\n shadow: false,\n})\nexport class HyFooterInfo implements ComponentInterface {\n @Element() el: HTMLElement;\n /**\n * Content area title.\n */\n @Prop() textTitle: string;\n /**\n * Content area text.\n */\n @Prop() textDescription: string;\n /**\n * Content area link button text.\n */\n @Prop() linkText: string;\n /**\n * Content area link button url.\n */\n @Prop() linkUrl: string;\n @Prop() linkIsExternal: boolean = false;\n @Prop() linkScLabel?: string;\n\n /**\n * Logo url\n */\n @Prop() logoUrl?: string;\n /**\n * Logo label\n */\n @Prop() logoLabel?: string;\n\n /**\n * Luomus group Logo url for footer\n */\n @Prop() groupLogoUrl?: string;\n\n @Prop() isGroup: boolean;\n @Prop() isLuomusGroup: boolean = false;\n @State() isMobile: boolean;\n\n private ro: ResizeObserver;\n private _dataFooterInfoLinks: FooterInfoLinks[];\n private _dataLuomusFooterContent: LuomusFooterContent[];\n /**\n * Data for links to be displayed.\n */\n @Prop() dataFooterInfoLinks: FooterInfoLinks[] | string;\n\n @Prop() luomusFooterContent: LuomusFooterContent[] | string;\n\n async componentWillLoad() {\n this._dataFooterInfoLinks = await jsonParserWorker(this.dataFooterInfoLinks);\n this._dataLuomusFooterContent = await jsonParserWorker(this.luomusFooterContent);\n }\n\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 render() {\n const links = this._dataFooterInfoLinks as Array<FooterInfoLinks>;\n const luomusFooterContentItems = this._dataLuomusFooterContent as Array<LuomusFooterContent>;\n\n const variant = this.isGroup ? FooterLinkVariants.group : FooterLinkVariants.campus;\n const section = this.isGroup ? HeadingSectionVariants.groupFooterInfo : HeadingSectionVariants.defaultFooterInfo;\n\n const footerLinkItemClass = this.isGroup ? \"group\" : \"campus\";\n\n const scLabel = this.linkScLabel && this.linkScLabel.length > 0 ? this.linkScLabel : this.linkText;\n const logoColor = ColorVariant.white;\n const linksColor = this.isLuomusGroup ? FooterLinkItemColor.white : FooterLinkItemColor.black;\n\n return (\n <Host\n class={{\n \"hy-footer-info\": true,\n luomus: this.isLuomusGroup,\n }}\n >\n <div\n class={{\n \"hy-footer-info__content\": true,\n \"is-group\": this.isGroup,\n }}\n >\n {!this.isLuomusGroup && (\n <hy-heading heading={HeadingVarians.h2} section={section}>\n {this.textTitle}\n </hy-heading>\n )}\n {this.isLuomusGroup && (\n <div class=\"hy-footer-info__logo\">\n <hy-site-logo\n type={FooterVariant.footer}\n isGroup={this.isGroup}\n color={logoColor}\n url={this.logoUrl}\n label={this.logoLabel}\n />\n </div>\n )}\n {this.isLuomusGroup && (\n <div class={\"hy-footer-info__branding\"}>\n <a href={this.groupLogoUrl}>\n <img src={this.groupLogoUrl} alt={\"Luomus logo\"} />\n </a>\n </div>\n )}\n {!this.isLuomusGroup && (\n <div\n class={{\n \"hy-footer-info__ingress\": true,\n \"is-group\": this.isGroup,\n }}\n innerHTML={this.textDescription}\n ></div>\n )}\n {!this.isLuomusGroup && this.linkUrl && (\n <hy-cta-button\n link-content={this.linkText}\n sc-label={scLabel}\n is-external={this.linkIsExternal}\n url={this.linkUrl}\n variant={CtaLinkButtonVariants.onWhiteBkgd}\n />\n )}\n {this.isLuomusGroup &&\n luomusFooterContentItems &&\n luomusFooterContentItems.map((item) => {\n return (\n <div class=\"luomus-footer-content\">\n <a href={item.url} class=\"luomus-footer-content__link\">\n {item.heading}\n </a>\n {item.content && <div class=\"luomus-footer-content__description\" innerHTML={item.content}></div>}\n </div>\n );\n })}\n </div>\n {this.isMobile && this.isGroup === false ? (\n <div\n class={{\n \"hy-footer-info__links\": true,\n \"is-group\": this.isGroup,\n luomus: this.isLuomusGroup,\n }}\n >\n <hy-accordion-container accordionid={\"test\"}>\n {links &&\n links.map((link) => {\n return (\n <hy-accordion-item accordiontitle={link.label}>\n <hy-footer-link-item\n class={footerLinkItemClass}\n variant={variant}\n color={linksColor}\n label={link.label}\n url={link.url}\n main-link={link.mainlink}\n items={link.items}\n isMobile={this.isMobile}\n ></hy-footer-link-item>\n </hy-accordion-item>\n );\n })}\n </hy-accordion-container>\n </div>\n ) : (\n <div\n class={{\n \"hy-footer-info__links\": true,\n \"is-group\": this.isGroup,\n luomus: this.isLuomusGroup,\n }}\n >\n {links &&\n links.map((link) => {\n const external_link = link.isExternal === \"external\";\n return (\n <hy-footer-link-item\n is-luomus-group={this.isLuomusGroup}\n class={footerLinkItemClass}\n variant={variant}\n color={linksColor}\n label={link.label}\n url={link.url}\n is-external={external_link}\n main-link={link.mainlink}\n items={link.items}\n isMobile={this.isMobile}\n ></hy-footer-link-item>\n );\n })}\n </div>\n )}\n </Host>\n );\n }\n}\n",":host {\n display: block;\n}\n\nhy-footer-link-item:not([main-link]) {\n width: 100%;\n\n @include breakpoint($medium) {\n width: 50%;\n }\n}\n\nhy-footer-link-item[main-link] {\n hyphens: auto;\n min-width: 200px;\n width: 100%;\n\n @include breakpoint($narrow) {\n width: 50%;\n }\n}\n\nhy-footer-link-item.group[main-link]:not([is-luomus-group]) {\n flex-basis: 100%;\n margin-top: 1rem;\n\n @include breakpoint($narrow) {\n flex-basis: 50%;\n margin: 0;\n }\n}\n\n.hy-footer-link-item--container {\n display: flex;\n flex-direction: column;\n\n @include breakpoint($medium) {\n margin-bottom: 1rem;\n }\n\n .hy-footer-link-item:last-child {\n margin-bottom: 16px;\n }\n}\n\n//.hy-footer-link-item__main .hy-heading__container>h3.hy-heading .hy-footer-link-item__link {\n.hy-footer-link-item {\n display: flex;\n font-family: var(--main-font-family);\n margin-left: 0;\n margin-right: 0;\n position: relative;\n text-decoration: none;\n\n @include breakpoint($narrow) {\n margin-left: 0;\n margin-right: 24px;\n //padding: 15px 20px 15px 0;\n }\n\n @include breakpoint($wide) {\n margin-left: 32px;\n margin-right: 0;\n //padding: 15px 20px 15px 0;\n }\n\n @include breakpoint($xlarge) {\n margin-left: 48px;\n }\n\n &__main {\n border: 0;\n padding: 0;\n margin-right: -32px;\n width: fit-content;\n\n .hy-heading__container > h3.hy-heading {\n @include font-size(16px, 16px);\n letter-spacing: -0.45px;\n padding: 1.5rem 0 1px 0 !important;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n letter-spacing: -0.44px;\n }\n\n .hy-footer-link-item__link[data-color=\"white\"] {\n color: var(--grayscale-white);\n }\n\n .hy-footer-link-item__link[data-color=\"black\"] {\n color: var(--grayscale-black);\n }\n\n .hy-footer-link-item__link {\n font-family: var(--main-font-family);\n text-decoration: none;\n margin-bottom: 8px;\n\n @include breakpoint($medium) {\n margin-bottom: 12px;\n }\n }\n }\n }\n\n &__color-black {\n @include font-size(14px, 18px);\n @include font-weight($regular);\n border-bottom: 1px solid var(--grayscale-black);\n color: var(--grayscale-black);\n letter-spacing: -0.5px;\n padding: 16px 20px 14px 0;\n\n .hy-footer-link-item__icon svg {\n fill: var(--brand-main-nearly-black);\n height: 12px;\n margin-right: 2px;\n width: 12px;\n }\n\n .hy-heading__container > h3.hy-heading {\n &a.hy-footer-link-item__link:hover {\n color: var(--brand-main) !important;\n text-decoration: underline;\n\n svg {\n fill: var(--brand-main);\n }\n }\n }\n }\n\n &__color-white {\n @include font-size(15px, 18px);\n @include font-weight($semibold);\n border-bottom: 1px solid var(--grayscale-white);\n color: var(--grayscale-white);\n letter-spacing: -0.5px;\n padding: 15px 20px 15px 0;\n\n &:hover,\n &:focus-within {\n text-decoration: underline;\n }\n\n .hy-footer-link-item__icon svg {\n fill: var(--grayscale-white);\n }\n\n .hy-heading__container > h3.hy-heading {\n .hy-footer-link-item__link:hover {\n color: var(--grayscale-medium) !important;\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n }\n\n &__icon {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {FooterLinkItemColor, FooterLinkVariants, HeadingVarians} from \"../../../utils/utils\";\n\n@Component({\n tag: \"hy-footer-link-item\",\n styleUrl: \"hy-footer-link-item.scss\",\n shadow: false,\n})\nexport class HyFooterLinkItem {\n @Prop() label: string;\n @Prop() url: string;\n @Prop() isExternal: boolean = false;\n @Prop() mainLink: boolean = false;\n @Prop() items: Array<any>;\n @Prop() color: FooterLinkItemColor = FooterLinkItemColor.black;\n @Prop() isMobile: boolean;\n @Prop() variant: FooterLinkVariants = FooterLinkVariants.base;\n @Prop() isLuomusGroup: boolean = false;\n\n render() {\n const containerClassAttributes = [\n \"hy-footer-link-item--container\",\n `hy-footer-link-item__${this.variant}`,\n this.items && \"hy-footer-link-item__has-children\",\n ].join(\" \");\n const classAttributes = [\n \"hy-footer-link-item\",\n this.mainLink && \"hy-footer-link-item__main\",\n `hy-footer-link-item__color-${this.color}`,\n ].join(\" \");\n const headingClassAttributes = [\n \"hy-footer-link-item\",\n \"hy-footer-link-item__heading\",\n this.mainLink && \"hy-footer-link-item__main\",\n `hy-footer-link-item__heading__color-${this.color}`,\n ].join(\" \");\n const linkClassAttributes = [\n \"hy-footer-link-item\",\n `hy-footer-link-item__color-${this.color}`,\n this.isLuomusGroup ? `luomus` : \"\",\n ].join(\" \");\n\n if (this.items) {\n if (this.isMobile && this.variant !== FooterLinkVariants.group) {\n return (\n <div class={containerClassAttributes}>\n {this.items.map((item) => {\n const target = item.isExternal === \"external\" ? \"_blank\" : \"_self\";\n return (\n <a class={linkClassAttributes} href={item.url} target={target} style={{color: this.color}}>\n {item.label}\n <hy-icon class={\"hy-footer-link-item__icon\"} icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n );\n })}\n </div>\n );\n } else {\n return (\n <div class={containerClassAttributes}>\n <hy-heading class={headingClassAttributes} heading={HeadingVarians.h3}>\n {this.url.length > 0 && (\n <a class={\"hy-footer-link-item__link\"} href={this.url} style={{color: this.color}}>\n {this.label}\n </a>\n )}\n {this.url.length == 0 && (\n <div data-color={this.color} class={\"hy-footer-link-item__link\"}>\n {this.label}\n </div>\n )}\n </hy-heading>\n {this.items.map((item) => {\n const target = item.isExternal === \"external\" ? \"_blank\" : \"_self\";\n return (\n <a class={linkClassAttributes} href={item.url} target={target} style={{color: this.color}}>\n {item.label}\n <hy-icon class={\"hy-footer-link-item__icon\"} icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n );\n })}\n </div>\n );\n }\n } else {\n const target = this.isExternal ? \"_blank\" : \"_self\";\n return (\n <a class={classAttributes} href={this.url} style={{color: this.color}} target={target}>\n {this.label}\n <hy-icon class={\"hy-footer-link-item__icon\"} icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n );\n }\n }\n}\n",":host {\n display: block;\n}\n\n.hy-heading__container {\n display: flex;\n flex-direction: column-reverse;\n width: 100%;\n\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &__subsection {\n padding: 2.5rem 0 1.375rem;\n\n @include breakpoint($narrow) {\n padding: 4rem 0 2.375rem;\n }\n }\n\n // H1 content page title\n h1.hy-heading__default {\n margin-bottom: 12px;\n\n @include breakpoint($xlarge) {\n margin-bottom: 16px;\n }\n\n // No sidebar, large desktops\n &__large {\n @include breakpoint($extrawide) {\n margin-bottom: 16px;\n }\n }\n }\n\n h1.hy-heading__search {\n margin-bottom: 0;\n padding: 16px 0 0;\n\n @include breakpoint($narrow) {\n padding: 28px 0 0;\n }\n @include breakpoint($wide) {\n padding: 32px 0 0;\n }\n\n &__large {\n @include breakpoint($extrawide) {\n padding: 40px 0 0;\n }\n }\n }\n\n h2,\n h3,\n h4,\n h5,\n h6 {\n padding: 1.5rem 0 1rem;\n\n @include breakpoint($narrow) {\n padding: 2rem 0 1rem;\n }\n }\n\n &.hy-heading__introduction {\n padding-top: 0;\n }\n\n .hy-heading__courses {\n padding-top: 0;\n }\n}\n\n.hy-heading {\n display: flex;\n flex-grow: 1;\n flex-shrink: 0;\n max-width: 100%;\n width: auto;\n}\n\n/*\n Headers (ex. h2, h3) used in Content pages (no caps and line).\n*/\n.hy-heading__subsection--divider,\n.hy-heading__contentsection--divider {\n flex-shrink: 2;\n overflow: hidden;\n width: 100%;\n\n &:after {\n background-color: transparent;\n border-bottom: 6px solid var(--grayscale-dark);\n content: \" \";\n display: flex;\n height: 2px;\n width: 100%;\n margin-left: 0;\n margin-bottom: 0.5rem;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n\n @include breakpoint($narrow) {\n margin-left: 2rem;\n border-bottom: 1px solid var(--grayscale-dark);\n margin-bottom: 1rem;\n }\n }\n}\n\n// H2 used in landing pages and in Introduction paragraph: caps, bigger font.\n// These styles are applied if there is a Sidebar on the page in Desktop sizes\nh2.hy-heading__introduction,\nh2.hy-heading__landingsection {\n @include font-size(28px, 32px);\n @include font-weight($bold);\n letter-spacing: -0.7px;\n text-transform: uppercase;\n}\n\nh1.hy-heading__hero {\n @include font-size(32px, 38px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.8px;\n margin-bottom: 0;\n\n @include breakpoint(1024px) {\n @include font-size(46px, 54px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n}\n\n// Applied when there is a sidebar\n.hy-heading__container__common {\n h2.hy-heading__introduction,\n h2.hy-heading__landingsection {\n @include breakpoint($narrow) {\n @include font-size(34px, 40px);\n letter-spacing: -0.85px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(42px, 48px);\n letter-spacing: -1.05px;\n }\n }\n\n h2.hy-heading__introduction {\n padding: 0 0 12px;\n @include breakpoint($narrow) {\n padding: 0 0 1rem;\n }\n }\n\n h2.hy-heading__landingsection,\n h2.hy-heading__contentsection {\n padding-bottom: 24px;\n\n @include breakpoint($narrow) {\n padding-bottom: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 32px;\n }\n\n @include breakpoint($extrawide) {\n padding-bottom: 32px;\n }\n\n @include breakpoint($xlarge) {\n padding-bottom: 40px;\n }\n }\n\n // Footer info box header style for group pages.\n h2.hy-heading__group_footer_info {\n @include font-size(24px, 28px);\n @include font-weight($bold);\n letter-spacing: -0.6px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n letter-spacing: -0.8px;\n }\n @include breakpoint($xlarge) {\n @include font-size(26px, 30px);\n }\n }\n\n // Footer info box header style for main site pages.\n h2.hy-heading__footer_info {\n @include font-size(28px, 32px);\n @include font-weight($bold);\n letter-spacing: -0.7px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(34px, 40px);\n letter-spacing: -0.85px;\n }\n @include breakpoint($xlarge) {\n @include font-size(42px, 48px);\n letter-spacing: -1.05px;\n }\n }\n}\n\n// Applied when there is NO sidebar\n.hy-heading__container__large {\n h2.hy-heading__introduction,\n h2.hy-heading__landingsection {\n @include breakpoint($narrow) {\n @include font-size(34px, 40px);\n letter-spacing: -0.85px;\n }\n\n @include breakpoint($extrawide) {\n @include font-size(42px, 48px);\n letter-spacing: -1.05px;\n }\n }\n\n h2.hy-heading__introduction {\n //@todo check here\n @include breakpoint($extrawide) {\n // h2 font large\n padding: 0 0 1rem;\n }\n @include breakpoint($xlarge) {\n // h2 font x-large\n padding: 0 0 20px;\n }\n }\n\n h2.hy-heading__landingsection,\n h2.hy-heading__contentsection {\n padding-bottom: 24px;\n\n @include breakpoint($narrow) {\n padding-bottom: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 32px;\n }\n\n @include breakpoint($extrawide) {\n padding-bottom: 40px;\n }\n }\n\n // Hero h1 landing minor. no sidebar\n h1.hy-heading__landing_minor {\n @include breakpoint($extrawide) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n }\n\n // Hero h1 heading frontpage. no sidebar\n h1.hy-heading__frontpage,\n h1.hy-heading__landing_major {\n @include breakpoint($extrawide) {\n @include font-size(56px, 64px);\n letter-spacing: -1.4px;\n }\n }\n\n // Footer info box header style for group pages.\n h2.hy-heading__group_footer_info {\n @include font-size(24px, 28px);\n @include font-weight($bold);\n letter-spacing: -0.6px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n letter-spacing: -0.8px;\n }\n @include breakpoint($extrawide) {\n @include font-size(26px, 30px);\n }\n }\n\n // Footer info box header style for main site pages.\n h2.hy-heading__footer_info {\n @include font-size(28px, 32px);\n @include font-weight($bold);\n letter-spacing: -0.7px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(34px, 40px);\n letter-spacing: -0.85px;\n }\n @include breakpoint($extrawide) {\n @include font-size(42px, 48px);\n letter-spacing: -1.05px;\n }\n }\n}\n\n// h3 on landing pages use the same fonts as h2 on content pages; no line; no caps\nh3.hy-heading__landingsection {\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n\n @include breakpoint($narrow) {\n // > 480px\n @include font-size(32px, 32px);\n letter-spacing: -1px;\n }\n\n @include breakpoint($extrawide) {\n // > 1200px\n @include font-size(40px, 48px);\n letter-spacing: -1.2px;\n }\n\n @include breakpoint($xlarge) {\n // > 1400px\n @include font-size(40px, 48px);\n letter-spacing: -1.2px;\n }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n color: var(--brand-main-nearly-black);\n font-family: var(--main-font-family);\n font-weight: 700;\n padding: 0;\n margin: 0;\n width: 100%;\n\n &.negative {\n color: var(--grayscale-white);\n }\n}\n\nh1 {\n @include font-size(32px, 38px);\n letter-spacing: -0.8px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(46px, 54px);\n letter-spacing: -1.15px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n\n // without Sidebar\n .hy-heading__container__large & {\n @include breakpoint($extrawide) {\n @include font-size(52px, 60px);\n letter-spacing: -1.3px;\n }\n }\n}\n\n// default h2 used in content pages\nh2 {\n @include font-size(26px, 32px);\n @include font-weight($bold);\n letter-spacing: -0.52px;\n\n @include breakpoint($narrow) {\n @include font-size(30px, 36px);\n letter-spacing: -0.6px;\n }\n\n // with Sidebar\n .hy-heading__container__common & {\n @include breakpoint($xlarge) {\n @include font-size(34px, 40px);\n letter-spacing: -0.68px;\n }\n }\n\n // without Sidebar\n .hy-heading__container__large & {\n @include breakpoint($extrawide) {\n @include font-size(34px, 40px);\n letter-spacing: -0.68px;\n }\n }\n}\n\n// default h3 used in content pages\nh3 {\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n\n @include breakpoint($narrow) {\n // > 480px\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n }\n}\n\nh4 {\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n @include breakpoint($narrow) {\n // > 480px\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n }\n}\n\nh5 {\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n @include breakpoint($narrow) {\n // > 480px\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n }\n}\n\nh6 {\n @include font-size(14px, 16px);\n letter-spacing: -0.44px;\n\n @include breakpoint($narrow) {\n // > 480px\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n }\n}\n","@import \"./heading.scss\";\n//overrides for full width views\n// JUST A DEMO, FIX AND EXPAND!\nh1 {\n font-size: $font-size-xxxx-large;\n font-weight: bold;\n text-transform: uppercase;\n line-height: 1.2;\n}\n","import {Component, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {HeadingSectionVariants, HeadingVarians} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-heading\",\n styleUrls: {default: \"heading.scss\", wide: \"heading-fw.scss\"},\n scoped: false,\n shadow: false,\n})\nexport class Heading {\n /**\n * @type {*}\n */\n @Prop() heading: HeadingVarians = HeadingVarians.default as any;\n @Prop() isSearch: boolean = false;\n /**\n * @type {*}\n */\n @Prop() section: HeadingSectionVariants = HeadingSectionVariants.default as any;\n @Prop() negative: boolean = false;\n @Prop() headerstyle: string = \"common\";\n @Prop({reflect: true}) hyphenatedText?: string;\n @Element() el: HTMLElement;\n @State() hasChildren: boolean = true;\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.el.parentElement.classList.contains(\"hy-hero__title-container\")) {\n this.hasChildren = false;\n }\n }\n\n render() {\n const headingInVariants = this.heading in HeadingVarians;\n const classAttributes = [\n \"hy-heading\",\n this.negative ? \"negative\" : \"\",\n this.isSearch ? \"hy-heading__search\" : \"\",\n this.isSearch ? `hy-heading__search__${this.headerstyle}` : \"\",\n `hy-heading__${this.section}`,\n `hy-heading__${this.headerstyle}`,\n `hy-heading__${this.section}__${this.headerstyle}`,\n ];\n\n const sectionClassAttributes = [`hy-heading__${this.section}--divider`].join(\" \");\n\n const containerSectionClass = [\n \"hy-heading__container\",\n `hy-heading__container__${this.section}`,\n `hy-heading__container__${this.headerstyle}`,\n ].join(\" \");\n\n return (\n <Host>\n {headingInVariants ? (\n [\n <div class={containerSectionClass}>\n {this.hyphenatedText && !this.hasChildren ? (\n <this.heading class={classAttributes.join(\" \")} innerHTML={this.hyphenatedText}></this.heading>\n ) : (\n <this.heading class={classAttributes.join(\" \")}>\n <slot />\n </this.heading>\n )}\n\n <span class={sectionClassAttributes}></span>\n </div>,\n ]\n ) : (\n <div class={containerSectionClass}>\n {this.hyphenatedText && !this.hasChildren ? (\n <HeadingVarians.default class={classAttributes.join(\" \")}>\n <span innerHTML={this.hyphenatedText}></span>\n </HeadingVarians.default>\n ) : (\n <HeadingVarians.default class={classAttributes.join(\" \")}>\n <span>\n <slot />\n </span>\n </HeadingVarians.default>\n )}\n\n <span class={sectionClassAttributes}></span>\n </div>\n )}\n </Host>\n );\n }\n}\n",":host {\n display: block;\n}\n\np.hy-ingress {\n @include font-size(16px, 24px);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n margin: 0 0 2rem;\n\n @include breakpoint($narrow) {\n @include font-size(18px, 28px);\n }\n\n @include breakpoint($wide) {\n margin: 0 0 2.25rem;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(18px, 32px);\n margin: 0 0 3rem;\n }\n\n // No sidebar, large desktop styles\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(18px, 32px);\n margin: 0 0 3rem;\n }\n }\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-ingress\",\n styleUrl: \"ingress.scss\",\n shadow: false,\n})\nexport class Ingress {\n @Element() el: HTMLElement;\n @Prop() headerstyle: string = \"common\";\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n }\n\n render() {\n const classAttributes = [\"hy-ingress\", `hy-ingress__${this.headerstyle}`].join(\" \");\n return (\n <Host>\n <p class={classAttributes}>\n <slot></slot>\n </p>\n </Host>\n );\n }\n}\n",":host {\n display: block;\n}\n\n.with-sidebar {\n .hy-main-content-wrapper {\n // Layout Mobile 320-479px\n margin: 0 auto;\n max-width: 100%;\n padding: 0 1rem;\n position: relative;\n\n // Layout Tablet 480-959px\n // Side navigation disappears to hamburger when width < 1200.\n @include breakpoint($narrow) {\n // the rule is applied to screens >=480px: width 100% - side margins (32px)\n padding: 0 2rem;\n }\n\n // Large desktop Layout >1600px\n @include breakpoint($xlarge) {\n max-width: 1216px;\n padding: 0;\n }\n }\n}\n\n.without-sidebar {\n .hy-main-content-wrapper {\n // Layout Mobile 320-479px\n margin: 0 auto;\n max-width: 100%;\n padding: 0 1rem;\n position: relative;\n\n // Layout Tablet 480-959px\n @include breakpoint($narrow) {\n padding: 0 2rem;\n }\n\n // Large desktop Layout >1200px\n @include breakpoint($extrawide) {\n max-width: 1216px;\n padding: 0;\n }\n }\n}\n","import {Component, h, Host} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-main-content-wrapper\",\n styleUrl: \"hy-main-content-wrapper.scss\",\n shadow: false,\n})\nexport class HyMainContentWrapper {\n render() {\n const classAttributes = [\"hy-main-content-wrapper\"].join(\" \");\n\n return (\n <Host>\n <div class={classAttributes}>\n <slot />\n </div>\n </Host>\n );\n }\n}\n",".menu-language {\n position: relative;\n align-items: center;\n display: flex;\n height: 100%;\n}\n\n.menu-language__toggle {\n @include font-size(16px, 16px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n align-items: center;\n background-color: transparent;\n border: 0;\n display: inline-grid;\n font-family: var(--main-font-family);\n gap: 4px;\n grid-template-columns: repeat(2, auto);\n letter-spacing: -0.7px;\n margin: 0;\n padding: 14px 10px;\n text-transform: uppercase;\n height: 100%;\n\n @include breakpoint($extrawide) {\n @include font-size(12px, 24px);\n @include font-weight($regular);\n color: var(--brand-main-nearly-black);\n letter-spacing: -0.5px;\n grid-template-columns: repeat(3, auto);\n padding: 0;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 24px);\n }\n\n &:hover {\n color: var(--brand-main);\n cursor: pointer;\n\n svg {\n fill: var(--brand-main);\n }\n }\n\n &:focus {\n outline: solid 2px var(--additional-yellow);\n outline-offset: 2px;\n }\n\n hy-icon {\n &:first-of-type {\n display: none !important;\n\n @include breakpoint($extrawide) {\n display: inline-flex !important;\n }\n }\n }\n\n &[aria-expanded=\"true\"] {\n position: relative;\n\n &:after {\n content: \"\";\n position: absolute;\n height: 4px;\n right: 0;\n bottom: -1px;\n left: 0;\n background-color: var(--grayscale-black);\n }\n\n span + hy-icon {\n transform: rotate(180deg);\n }\n }\n\n .is-group & {\n color: var(--grayscale-white);\n\n &:hover {\n color: var(--grayscale-medium);\n cursor: pointer;\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n}\n\n.menu-language__dropdown {\n background-color: var(--grayscale-white);\n border-radius: 0 0 5px 5px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-flow: column;\n justify-items: center;\n right: -15px;\n margin: 0;\n padding: 8px;\n position: absolute;\n text-transform: uppercase;\n visibility: visible;\n width: max-content;\n z-index: 100;\n min-width: 160px;\n\n &[aria-hidden=\"true\"] {\n display: none;\n }\n\n @include breakpoint($extrawide) {\n left: -15px;\n right: 0;\n }\n}\n\n.menu-language__links {\n margin: 0;\n padding: 0;\n list-style: none;\n display: grid;\n gap: 4px;\n}\n","import {ComponentLabels} from \"../../hy-site-header/site-header\";\n\nexport interface MenuLanguage {\n langCode: string;\n url: string;\n abbr: string;\n label: string;\n isActive?: boolean;\n isDisabled?: boolean;\n}\n\nimport {Component, h, Prop, Element, Listen, State, Event, EventEmitter} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-menu-language\",\n styleUrl: \"menu-language.scss\",\n shadow: true,\n})\nexport class MenuLanguage {\n @Element() el: HTMLElement;\n @Prop() dataMenuLanguage: MenuLanguage[] | string;\n @Prop() isGroup: boolean = false;\n @Prop() labels?: ComponentLabels[] | string;\n @State() isMenuOpen: boolean = false;\n\n @Event() menuLanguageToggled: EventEmitter;\n\n private _dataMenuLanguage: MenuLanguage[];\n private _labels: ComponentLabels[];\n\n // Close the language menu if user clicks anywhere outside the Menu language component.\n @Listen(\"click\", {target: \"window\"})\n handleOutsideMenuClick(event) {\n this.isMenuOpen = false;\n event.stopPropagation();\n }\n\n // CLose the language menu if user opens the desktop menu panel.\n @Listen(\"menuDesktopToggled\", {target: \"document\"})\n desktopMenuToggled() {\n this.isMenuOpen = false;\n }\n\n // CLose the language menu if user opens the search panel\n @Listen(\"searchPanelToggled\", {target: \"document\"})\n searchPanelToggled() {\n this.isMenuOpen = false;\n }\n\n // Close the language menu if user opens University main menu\n @Listen(\"universityMainMenuToggled\", {target: \"document\"})\n universityMainMenuPanelToggled() {\n this.isMenuOpen = false;\n }\n\n @Listen(\"focus\")\n handleComponentFocus(event) {\n // Close desktop menu panel if it's open.\n this.menuLanguageToggled.emit();\n\n event.stopPropagation();\n }\n\n @Listen(\"click\")\n handleComponentClick(event) {\n this.isMenuOpen = !this.isMenuOpen;\n\n if (this.isMenuOpen) {\n // Close desktop menu panel if it's open.\n this.menuLanguageToggled.emit();\n\n const languageMenuSelector = event.target as HTMLElement;\n this.adjustPosition(languageMenuSelector, this.el);\n }\n\n event.stopPropagation();\n }\n\n adjustPosition(languageMenuSelector, target) {\n const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(\n `.menu-language__dropdown`\n )[0] as HTMLElement;\n let headerHeight = \"0\";\n let hyHeader = this.isGroup\n ? (target.closest(\".hy-site-header__content-top\") as HTMLElement)\n : (target.closest(\".hy-site-header\") as HTMLElement);\n\n if (hyHeader) {\n let rectHeader = hyHeader.getBoundingClientRect();\n let rectLangMenu = languageMenuSelector.getBoundingClientRect();\n\n headerHeight = `${languageMenuSelector.offsetHeight + rectHeader.bottom + 8 - rectLangMenu.bottom}px`;\n }\n\n languagePanel.style.top = headerHeight;\n }\n\n async componentWillLoad() {\n this._dataMenuLanguage = await jsonParserWorker(this.dataMenuLanguage);\n this._labels = await jsonParserWorker(this.labels);\n }\n\n render() {\n const black = \"var(--brand-main-nearly-black)\";\n const white = \"var(--grayscale-white)\";\n const svgColor = this.isGroup ? white : black;\n const globeIconSize = this.isGroup ? 16 : 14;\n\n return (\n <div\n class={{\n \"menu-language\": true,\n \"is-open\": this.isMenuOpen,\n \"is-group\": this.isGroup,\n }}\n >\n <button\n class={{\n \"menu-language__toggle\": true,\n }}\n aria-label={this.isMenuOpen ? this._labels[\"close\"] : this._labels[\"open\"]}\n >\n <hy-icon icon={\"hy-icon-globe\"} size={globeIconSize} fill={svgColor} />\n <span>\n {this._dataMenuLanguage.map(({isActive, langCode}) => {\n if (isActive) {\n return langCode;\n }\n })}\n </span>\n <hy-icon icon={\"hy-icon-caret-down\"} size={8} fill={svgColor} />\n </button>\n <div\n class={{\n \"menu-language__dropdown\": true,\n }}\n aria-hidden={`${!this.isMenuOpen}`}\n >\n {this.isMenuOpen &&\n <ul class=\"menu-language__links\">\n {this._dataMenuLanguage.map((item) => {\n return (\n <hy-menu-language-item\n lang-code={item.langCode}\n url={item.url}\n label={item.label}\n abbr={item.abbr}\n is-active={item.isActive}\n is-disabled={item.isDisabled}\n />\n );\n })}\n </ul>\n }\n </div>\n </div>\n );\n }\n}\n",".menu-language__link {\n @include font-size(16px, 24px);\n @include font-weight($semibold);\n color: var(--brand-main-light);\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n overflow: hidden;\n text-decoration: none;\n padding: 12px 12px;\n display: block;\n\n &:hover {\n background-color: var(--grayscale-background-box);\n color: var(--brand-main);\n }\n\n &.is-active {\n color: var(--grayscale-black);\n border: 2px solid var(--grayscale-black);\n }\n\n &.is-disabled {\n color: var(--link-disabled);\n\n &:hover {\n background-color: transparent;\n color: var(--link-disabled);\n }\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-menu-language-item\",\n styleUrl: \"menu-language-item.scss\",\n shadow: true,\n})\nexport class SiteLanguage {\n @Prop() abbr: string;\n @Prop() isActive: boolean = false;\n @Prop() isDisabled: boolean = false;\n @Prop() label: string;\n @Prop() langCode: string;\n @Prop() url: string;\n\n render() {\n return (\n <li class={`menu-language__links-item`}>\n <a\n href={this.url}\n lang={this.langCode}\n class={{\n \"is-active\": this.isActive,\n \"is-disabled\": this.isDisabled,\n \"menu-language__link\": true,\n }}\n >\n {this.label}\n </a>\n </li>\n );\n }\n}\n",":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",":host {\n display: block;\n}\n\n.hy-site-header {\n background-color: var(--grayscale-white);\n z-index: 100;\n border-bottom: 2px solid var(--grayscale-dark);\n transform: none;\n\n &:not(.is-at-top) {\n top: 0;\n transform: translateY(-100%);\n transition: all 0.2s ease-in-out;\n }\n\n @include breakpoint($extrawide) {\n border-bottom: 1px solid var(--grayscale-black);\n margin: 0 auto;\n max-width: $fullhd;\n }\n\n &.hy-site-header--sticky-active {\n transition: all 0.2s ease-in-out;\n box-shadow: rgba(14, 104, 139, 0.2) 0 20px 20px -20px;\n }\n\n &.hy-site-header--sticky-visible {\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n transform: translateY(0);\n transition: all 0.2s ease-in-out;\n transition-delay: 0.2s;\n\n &.hy-site-header--mobile {\n transform: none;\n }\n\n &.has-toolbar {\n top: 39px;\n\n &--large {\n top: 79px;\n }\n }\n }\n\n &.hy-site-header--sticky-hidden {\n top: 0;\n }\n\n &.is-group {\n hy-desktop-menu-links,\n .hy-site-header__menu-desktop {\n @include breakpoint($extrawide) {\n margin-left: -10px;\n }\n }\n }\n}\n\n.hy-site-header__container {\n padding: 0 8px;\n display: flex;\n justify-content: space-between;\n\n @include breakpoint($extrawide) {\n padding: 0 32px;\n }\n\n &.is-group {\n flex-wrap: wrap;\n justify-content: flex-start;\n\n @include breakpoint($extrawide) {\n min-height: 82px;\n }\n }\n}\n\n.hy-site-header__branding {\n padding: 12px 0;\n\n @include breakpoint($extrawide) {\n padding: 26px 0;\n }\n\n .hy-site-header__content-top & {\n padding: 8px 0;\n\n @include breakpoint($extrawide) {\n padding: 8px 0;\n }\n }\n\n // Research group label\n > p {\n @include font-size(12px, 14px);\n @include font-weight($regular);\n font-family: var(--main-font-family);\n color: var(--grayscale-dark-text);\n letter-spacing: -0.1px;\n margin-bottom: 4px;\n text-transform: uppercase;\n\n + a {\n min-height: auto;\n }\n\n @include breakpoint($extrawide) {\n margin-bottom: 8px;\n }\n }\n\n // Group name link\n > a {\n @include font-size(16px, 16px);\n @include font-weight($bold);\n font-family: var(--main-font-family);\n color: var(--brand-main-nearly-black);\n letter-spacing: -0.6px;\n text-transform: uppercase;\n text-decoration: none;\n min-height: 48px;\n display: inline-flex;\n align-items: center;\n\n @include breakpoint($extrawide) {\n @include font-size(26px, 30px);\n letter-spacing: -0.8px;\n min-height: auto;\n }\n\n img {\n height: 100%;\n max-height: 48px;\n\n @include breakpoint($extrawide) {\n transform: translateY(-10px);\n }\n }\n }\n\n // Main container\n .is-group:not(.is-research-group) > & {\n @include breakpoint($extrawide) {\n margin-right: 32px + 10px;\n padding-bottom: 0;\n margin-bottom: -10px;\n }\n }\n}\n\n.hy-site-header__actions {\n display: inline-grid;\n gap: 4px;\n grid-template-columns: repeat(3, auto);\n justify-content: flex-end;\n min-width: 150px;\n\n @include breakpoint($wide) {\n min-width: none;\n }\n\n @include breakpoint($xlarge) {\n gap: 16px;\n }\n}\n\n.hy-site-header__menu-open-button {\n align-items: center;\n display: inline-flex;\n height: 100%;\n justify-content: center;\n width: 44px;\n background-color: transparent;\n border: 0;\n padding: 0;\n margin: 0;\n\n &[aria-expanded=\"true\"] {\n @include font-size(16px, 18px);\n @include font-weight($bold);\n align-items: center;\n background-color: transparent;\n border: none;\n color: var(--brand-main);\n display: inline-flex;\n font-family: var(--main-font-family);\n height: auto;\n letter-spacing: -0.3px;\n margin-left: auto;\n margin-right: -16px;\n padding: 16px;\n position: fixed;\n right: 16px;\n top: 12px;\n z-index: 101;\n width: auto;\n\n &:hover {\n cursor: pointer;\n }\n\n hy-icon {\n margin-left: 8px;\n\n svg {\n fill: var(--brand-main);\n }\n }\n }\n}\n\n.hy-site-header__donate-link {\n @include font-size(12px, 24px);\n @include font-weight($regular);\n display: inline-grid;\n font-family: var(--main-font-family);\n align-items: center;\n gap: 4px;\n grid-template-columns: repeat(2, auto);\n color: var(--brand-main-nearly-black);\n letter-spacing: -0.5px;\n padding: 0;\n text-decoration: none;\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 24px);\n }\n\n &:hover {\n color: var(--brand-main);\n cursor: pointer;\n\n svg {\n fill: var(--brand-main);\n }\n }\n\n &:focus {\n outline: solid 2px var(--additional-yellow);\n outline-offset: 2px;\n }\n\n .hy-site-header__content-top & {\n color: var(--grayscale-white);\n\n svg {\n fill: var(--grayscale-white);\n }\n\n &:hover {\n color: var(--grayscale-medium);\n cursor: pointer;\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n}\n\n.hy-site-header__content-top {\n background-color: var(--grayscale-black);\n border-bottom: 2px solid rgb(000, 000, 000, 0.7);\n position: relative;\n}\n\n.hy-backdrop {\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n visibility: hidden;\n\n &.is-active {\n background-color: rgba(0, 0, 0, 0.4);\n transition: background-color 300ms;\n visibility: visible;\n z-index: 99;\n }\n\n &.is-active-top {\n background-color: rgba(0, 0, 0, 0.4);\n transition: background-color 300ms;\n visibility: visible;\n z-index: 98;\n }\n}\n\n.hy-site-header__panel {\n background: var(--grayscale-white);\n bottom: 0;\n overflow: hidden;\n position: fixed;\n right: 0;\n top: 0;\n visibility: visible;\n width: 90%;\n z-index: 100;\n\n @include breakpoint($narrow) {\n width: 400px;\n }\n\n &[aria-hidden=\"true\"] {\n visibility: hidden;\n padding: 0;\n width: 0;\n }\n}\n","export interface DesktopLinks {\n label: string;\n url: string;\n menuLinkId: string;\n}\nexport interface DonateLink {\n url: string;\n label: string;\n}\nexport interface ComponentLabels {\n open: string;\n close: string;\n expand?: string;\n label?: string;\n}\n\nlet clickTimer = null;\n\nimport {Component, Element, Event, EventEmitter, Fragment, h, Listen, Prop, State} from \"@stencil/core\";\nimport ResizeObserver from \"resize-observer-polyfill\";\nimport {MenuType, ColorVariant, SiteLogoSize} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\nlet clickTimeout = null;\n\n@Component({\n tag: \"hy-site-header\",\n styleUrl: \"site-header.scss\",\n shadow: false,\n})\nexport class SiteHeader {\n @Element() el: HTMLElement;\n @Prop() isGroup: boolean = false;\n @Prop() isLuomusGroup: boolean = false;\n @Prop() isBetaGroup: boolean = false;\n @Prop() researchGroupLabel: string = \"\";\n @Prop() groupType: string = \"\";\n @Prop() groupLogoUrl: string = \"\";\n @Prop() dataMenuLanguage: string;\n @Prop() dataMenuDonate: string;\n @Prop() dataSiteHeaderLabels: string;\n @Prop() dataSiteSearchLabels: string;\n @Prop() logoUrl?: string;\n @Prop() logoLabel?: string;\n @Prop() siteLabel?: string;\n @Prop() siteUrl?: string;\n @Prop() showSearchLabel: boolean = true;\n @Prop() noSearch: boolean = false;\n @Prop() menuLabel: string = \"Menu\";\n @Prop() menuLabelOpen?: string;\n @Prop() menuLabelClose?: string;\n @Prop({reflect: true}) menuType: MenuType = null;\n\n @Prop() dataMainMenuLinks: DesktopLinks[] | string;\n @Prop() dataSearchTools: DesktopLinks[] | string;\n\n @State() isMobile: boolean;\n @State() isMenuOpen: boolean = false;\n @State() isDesktopMenuOpen: boolean = false;\n @State() isDesktopMenuDropdown: boolean = false;\n @State() isTopMenuOpen: boolean = false;\n @State() isBottomVisible: boolean = false;\n @State() isTopVisible: boolean = false;\n\n @Event() headerScrollUp: EventEmitter;\n @Event() headerScrollDown: EventEmitter;\n @Event() menuMobileToggled: EventEmitter;\n @Event() menuMobileTopToggled: EventEmitter;\n\n private ro: ResizeObserver;\n private bottomObserver: IntersectionObserver;\n private topObserver: IntersectionObserver;\n private donateLink: DonateLink[];\n private menuLabels: ComponentLabels[];\n private searchLabels: ComponentLabels[];\n private groupPages: ComponentLabels[];\n private languageLabels: ComponentLabels[];\n\n @State() lastScrollTop = 0;\n @State() delta = 50;\n @State() navbarHeight = 0;\n\n // Listener for toggling mobile menu panel on or off.\n @Listen(\"mobileMenuToggle\") mobileMenuToggle() {\n this.isMenuOpen = !this.isMenuOpen;\n this.menuMobileToggled.emit();\n let bodyElement = document.getElementsByTagName(\"body\")[0] as HTMLElement;\n\n if (this.isMenuOpen) {\n bodyElement.style.overflow = \"hidden\";\n } else {\n bodyElement.style.overflow = \"initial\";\n }\n }\n\n // Listener for toggling mobile menu top panel on or off.\n @Listen(\"mobileMenuTopToggle\") mobileMenuTopToggle() {\n this.isTopMenuOpen = !this.isTopMenuOpen;\n this.menuMobileTopToggled.emit();\n }\n\n @Listen(\"menuToggled\", {target: \"window\"}) mainMenuToggled() {\n this.isDesktopMenuOpen = !this.isDesktopMenuOpen;\n }\n\n @Listen(\"scroll\", {target: \"window\"})\n handleScroll() {\n this.headerScrollHandler();\n }\n\n headerScrollHandler() {\n let topOffset = window.pageYOffset;\n if (Math.abs(this.lastScrollTop - topOffset) <= this.delta) {\n return;\n }\n\n if (topOffset > this.lastScrollTop && !this.isTopVisible) {\n this.toggleStickyness(false);\n this.headerScrollDown.emit();\n }\n // Scrolling up\n if (topOffset < this.lastScrollTop && !this.isTopVisible) {\n this.toggleStickyness();\n this.headerScrollUp.emit();\n }\n // At the top of the page\n if (this.isTopVisible) {\n this.toggleStickyness(false);\n }\n\n this.lastScrollTop = topOffset;\n }\n\n toggleStickyness(toggleOn = true) {\n const bodyElementClasses = document.querySelector(\"body\").classList;\n let hySiteHeader = this.el.querySelector(\".hy-site-header\") as HTMLElement;\n if (!hySiteHeader) return;\n\n this.isTopVisible ? hySiteHeader.classList.add(\"is-at-top\") : hySiteHeader.classList.remove(\"is-at-top\");\n\n if (toggleOn) {\n hySiteHeader.classList.add(\"hy-site-header--sticky-active\", \"hy-site-header--sticky-visible\");\n hySiteHeader.classList.remove(\"hy-site-header--sticky-hidden\");\n\n !this.isBottomVisible && !this.isTopVisible && bodyElementClasses.add(\"sticky-active\");\n\n if (bodyElementClasses.contains(\"toolbar-horizontal\")) {\n hySiteHeader.classList.add(\"has-toolbar\");\n\n if (bodyElementClasses.contains(\"toolbar-tray-open\")) {\n hySiteHeader.classList.add(\"has-toolbar--large\");\n }\n }\n }\n\n if (!toggleOn) {\n hySiteHeader.classList.remove(\n \"hy-site-header--sticky-active\",\n \"hy-site-header--sticky-visible\",\n \"hy-site-header--sticky-hidden\",\n \"has-toolbar\",\n \"has-toolbar--large\"\n );\n bodyElementClasses.remove(\"sticky-active\");\n }\n }\n\n componentDidLoad() {\n // Set the browser resize observer to gather information about browser width.\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.applySizeClasses(entry.contentRect.width);\n }\n });\n this.ro.observe(document.body);\n\n const topOptions = {\n root: null,\n rootMargin: \"250px\",\n threshold: [0.0, 1.0],\n };\n\n this.topObserver = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target.nodeName === \"HEADER\") {\n this.isTopVisible = entry.isIntersecting;\n }\n });\n }, topOptions);\n\n const header = document.querySelector(\"header\");\n if (header) {\n this.topObserver.observe(header);\n }\n\n const bottomOptions = {\n root: null,\n rootMargin: \"0px\",\n threshold: [0.0, 1.0],\n };\n\n this.bottomObserver = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.target.nodeName === \"HEADER\") {\n this.isTopVisible = entry.isIntersecting;\n }\n });\n }, bottomOptions);\n\n const footer = document.querySelector(\"hy-footer\");\n if (footer) {\n this.bottomObserver.observe(footer);\n }\n\n // Pass the dataMenuLanguage prop to menu component.\n this.el.children[0].setAttribute(\"data-menu-language\", this.dataMenuLanguage);\n this.navbarHeight = 120;\n const body = document.querySelector(\"body\");\n body.style.setProperty(\"--nav-height\", `${this.navbarHeight * 2}px`);\n }\n\n async componentWillLoad() {\n // Check for site header labels and set them to variables accordingly.\n if (this.dataSiteHeaderLabels) {\n const labels = await jsonParserWorker(this.dataSiteHeaderLabels);\n this.menuLabels = labels.menu_labels;\n this.languageLabels = labels.language_labels;\n this.searchLabels = labels.search_labels;\n this.groupPages = labels.group_pages;\n\n this.el.children[0].setAttribute(\"menu-button-breadcrumb-logourl\", this.logoUrl);\n }\n\n // Check for the donation link information and set it to variables accordingly.\n // Also pass the donation link data to menu-component.\n if (this.dataMenuDonate) {\n this.donateLink = await jsonParserWorker(this.dataMenuDonate);\n this.el.children[0].setAttribute(\"data-menu-donate\", this.dataMenuDonate);\n }\n // Pass the necessary information to menu component. These props will be\n // used in mobile menu.\n this.el.children[0].setAttribute(\"open\", this.isMenuOpen.toString());\n this.el.children[0].setAttribute(\"logo-label\", this.logoLabel);\n this.el.children[0].setAttribute(\"logo-url\", this.logoUrl);\n this.el.children[0].setAttribute(\"site-label\", this.siteLabel);\n this.el.children[0].setAttribute(\"site-url\", this.siteUrl);\n this.el.children[0].setAttribute(\"menu-button-breadcrumb-logourl\", this.logoUrl);\n this.el.children[0].setAttribute(\"menu-language-label-open\", this.languageLabels[\"open\"]);\n this.el.children[0].setAttribute(\"menu-language-label-close\", this.languageLabels[\"close\"]);\n this.el.children[0].setAttribute(\"label-front-page\", this.menuLabels[\"front_page\"]);\n\n if (this.groupType !== \"\") {\n this.isDesktopMenuDropdown = true;\n }\n }\n\n disconnectedCallback() {\n clearTimeout(clickTimer);\n this.ro.disconnect();\n this.topObserver.disconnect();\n this.bottomObserver.disconnect();\n clearTimeout(clickTimeout);\n }\n\n applySizeClasses(size: number) {\n // Set the menu-type based on the width of the browser.\n size <= 1200 ? (this.menuType = MenuType.mobile) : (this.menuType = MenuType.desktop);\n\n // Pass the menu type to menu component.\n this.isMobile = this.menuType === (MenuType.mobile || MenuType.tablet);\n const menuAttribute = this.menuType;\n this.el.children[0].setAttribute(\"menu-type\", menuAttribute);\n }\n\n render() {\n if (this.menuType === null) return;\n\n const logoSize = this.isMobile ? SiteLogoSize.small : SiteLogoSize.big;\n const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;\n const logoColor = ColorVariant.black;\n const logoColorGroup = ColorVariant.white;\n\n let classAttributes = [\n \"hy-site-header\",\n `hy-site-header--${this.menuType}`,\n this.isGroup ? \"is-group\" : \"\",\n \"is-at-top\",\n ];\n\n const toggleMenuMobileAndRemoveListener = () => {\n window.removeEventListener(\"click\", handleClickOutside);\n this.mobileMenuToggle();\n };\n\n const handleClickOutside = (event: MouseEvent) => {\n const [targetElement] = event.composedPath() as HTMLElement[];\n if (targetElement.classList.contains(\"hy-backdrop\")) {\n toggleMenuMobileAndRemoveListener();\n }\n };\n\n if (this.isMenuOpen) {\n window.addEventListener(\"click\", () => {\n clearTimeout(clickTimeout);\n clickTimeout = setTimeout(() => {\n handleClickOutside;\n }, 250);\n });\n }\n\n let activeLang = \"en\";\n let dataMenuLanguageArray = JSON.parse(this.dataMenuLanguage);\n dataMenuLanguageArray.forEach((lang) => {\n if (lang.isActive) {\n activeLang = lang.langCode;\n }\n });\n\n switch (this.menuType) {\n case MenuType.desktop:\n // Larger than 1200px screens\n return [\n <header class={`${classAttributes.join(\" \")}`}>\n <div\n class={{\n \"hy-backdrop\": true,\n \"is-active\":\n (this.isMenuOpen && !this.isDesktopMenuDropdown) ||\n (this.isTopMenuOpen && !this.isDesktopMenuDropdown),\n }}\n />\n {this.isGroup && (\n <section class={`hy-site-header__content-top ${this.isTopMenuOpen ? \"is-open\" : \"\"}`}>\n <div class=\"hy-site-header__container\">\n <div class=\"hy-site-header__branding\">\n <hy-site-logo\n is-group={true}\n is-luomus-group={this.isLuomusGroup}\n size={logoSizeGroup}\n color={logoColorGroup}\n url={this.siteUrl}\n label={this.siteLabel}\n />\n </div>\n {this.dataMainMenuLinks.length > 2 && (\n <hy-menu-main-group\n tabindex=\"0\"\n is-mobile={false}\n menu-label={this.groupPages[\"university_main_menu\"] ?? null}\n data-main-menu={this.dataMainMenuLinks}\n menu-label-close={this.menuLabelClose}\n />\n )}\n <div class=\"hy-site-header__actions\">\n <hy-menu-language data-menu-language={this.dataMenuLanguage} labels={this.languageLabels} isGroup />\n {!this.noSearch && (\n <hy-site-search\n class={\"menu--secondary__item group\"}\n size={18}\n color={logoColorGroup}\n is-group={true}\n is-luomus-group={this.isLuomusGroup}\n is-beta-group={this.isBetaGroup}\n search-language={activeLang}\n show-label={this.showSearchLabel}\n labels={this.searchLabels}\n search-labels={this.dataSiteSearchLabels}\n search-tools={this.dataSearchTools}\n />\n )}\n {this.donateLink.map(({label, url}) => {\n return (\n <a class={\"hy-site-header__donate-link\"} href={url}>\n <hy-icon icon={\"hy-icon-heart-support\"} size={14} fill={ColorVariant.black} />\n <span>{label}</span>\n </a>\n );\n })}\n </div>\n </div>\n </section>\n )}\n <section\n class={`hy-site-header__container ${this.isGroup ? \"is-group\" : \"\"} ${\n this.groupType === \"research_group_menu\" ? \"is-research-group\" : \"\"\n }`}\n >\n <div class={\"hy-site-header__branding\"}>\n {this.isGroup && this.groupType == \"research_group_menu\" && <p>{this.researchGroupLabel}</p>}\n {this.isGroup ? (\n <a href={this.logoUrl}>\n {this.groupType == \"generic_site_group_menu\" && this.groupLogoUrl ? (\n <img src={this.groupLogoUrl} alt={`${this.logoLabel} logo`} />\n ) : (\n this.logoLabel\n )}\n </a>\n ) : (\n <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />\n )}\n </div>\n {this.groupType != \"research_group_menu\" && <slot name=\"menu\"></slot>}\n {!this.isGroup && (\n <div class=\"hy-site-header__actions\">\n <hy-menu-language data-menu-language={this.dataMenuLanguage} labels={this.languageLabels} />\n {!this.noSearch && (\n <hy-site-search\n size={14}\n is-luomus-group={this.isLuomusGroup}\n is-beta-group={this.isBetaGroup}\n search-language={activeLang}\n color={ColorVariant.black}\n show-label={this.showSearchLabel}\n labels={this.searchLabels}\n search-labels={this.dataSiteSearchLabels}\n search-tools={this.dataSearchTools}\n />\n )}\n {this.donateLink.map(({label, url}) => {\n return (\n <a class={\"hy-site-header__donate-link\"} href={url}>\n <hy-icon icon={\"hy-icon-heart-support\"} size={14} fill={ColorVariant.black} />\n <span>{label}</span>\n </a>\n );\n })}\n </div>\n )}\n </section>\n </header>,\n ];\n\n case MenuType.mobile:\n // Smaller than 960px screens\n return (\n <header class={classAttributes.join(\" \")} data-menu-active={this.isMenuOpen}>\n <div class={{\"hy-backdrop\": true, \"is-active\": this.isMenuOpen}} />\n <div class={{\"hy-backdrop\": true, \"is-active-top\": this.isTopMenuOpen}} />\n {this.isGroup && (\n <section class={`hy-site-header__content-top ${this.isTopMenuOpen ? \"is-open\" : \"\"}`}>\n <div class=\"hy-site-header__container\">\n <div class=\"hy-site-header__branding\">\n <hy-site-logo\n is-group={true}\n is-luomus-group={this.isLuomusGroup}\n size={logoSizeGroup}\n color={logoColorGroup}\n url={this.siteUrl}\n label={this.siteLabel}\n />\n </div>\n <div class=\"hy-site-header__actions\">\n <hy-menu-language data-menu-language={this.dataMenuLanguage} labels={this.languageLabels} isGroup />\n {!this.noSearch && (\n <hy-site-search\n class={\"menu--secondary__item group\"}\n size={18}\n color={logoColorGroup}\n is-group={true}\n is-luomus-group={this.isLuomusGroup}\n is-beta-group={this.isBetaGroup}\n search-language={activeLang}\n show-label={this.showSearchLabel}\n labels={this.searchLabels}\n search-labels={this.dataSiteSearchLabels}\n search-tools={this.dataSearchTools}\n />\n )}\n {this.dataMainMenuLinks.length > 2 && (\n <hy-menu-main-group\n site-label={this.siteLabel}\n site-url={this.siteUrl}\n logo-label={this.logoLabel}\n logo-url={this.logoUrl}\n is-mobile={true}\n donate={this.donateLink}\n data-main-menu={this.dataMainMenuLinks}\n />\n )}\n </div>\n </div>\n </section>\n )}\n <section class=\"hy-site-header__container\">\n <div class={\"hy-site-header__branding\"}>\n {this.groupType == \"research_group_menu\" && <p>{this.researchGroupLabel}</p>}\n {this.isGroup ? (\n <a href={this.logoUrl}>\n {this.groupType == \"generic_site_group_menu\" && this.groupLogoUrl ? (\n <img src={this.groupLogoUrl} alt={`${this.logoLabel} logo`} />\n ) : (\n this.logoLabel\n )}\n </a>\n ) : (\n <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />\n )}\n </div>\n <div class=\"hy-site-header__actions\">\n {!this.isGroup && (\n <hy-menu-language data-menu-language={this.dataMenuLanguage} labels={this.languageLabels} />\n )}\n {!this.isGroup && !this.noSearch && (\n <hy-site-search\n size={24}\n color={ColorVariant.black}\n is-luomus-group={this.isLuomusGroup}\n is-beta-group={this.isBetaGroup}\n search-language={activeLang}\n show-label={this.showSearchLabel}\n labels={this.searchLabels}\n search-labels={this.dataSiteSearchLabels}\n search-tools={this.dataSearchTools}\n />\n )}\n <button\n onClick={() => toggleMenuMobileAndRemoveListener()}\n class={`hy-site-header__menu-open-button`}\n aria-label={this.isMenuOpen ? this.menuLabels[\"close\"] : this.menuLabels[\"open\"]}\n aria-expanded={`${this.isMenuOpen}`}\n >\n {!this.isMenuOpen && <hy-icon icon={\"hy-icon-hamburger\"} size={24} fill={ColorVariant.black} />}\n {this.isMenuOpen && (\n <Fragment>\n <span>{this.menuLabelClose}</span>\n <hy-icon icon={\"hy-icon-remove\"} size={16} />\n </Fragment>\n )}\n </button>\n </div>\n <div\n class={{\n \"is-open\": this.isMenuOpen,\n \"hy-site-header__panel\": true,\n }}\n aria-hidden={`${!this.isMenuOpen}`}\n >\n <slot name={\"menu_mobile\"} />\n </div>\n </section>\n </header>\n );\n }\n }\n}\n",":host {\n --site-logo-color: var(--brand-main-nearly-black);\n}\n\n:host(.hy-site-logo--mobile) {\n --site-logo-color: var(--brand-main-nearly-black);\n}\n\n.hy-site-logo {\n a,\n div.luomus-group {\n align-items: center;\n display: flex;\n text-decoration: none;\n\n &:focus {\n outline: solid 2px var(--additional-yellow);\n outline-offset: 2px;\n }\n }\n\n &__label {\n @include font-size(14px, 14px);\n @include font-weight($bold);\n color: var(--site-logo-color);\n font-family: var(--main-font-family);\n letter-spacing: -0.7px;\n margin-left: 8px;\n max-width: 90px;\n text-transform: uppercase;\n\n .hy-site-header__branding & {\n @include breakpoint($narrow) {\n min-width: min-content;\n max-width: max-content;\n white-space: nowrap;\n }\n\n @include breakpoint($extrawide) {\n min-width: min-content;\n max-width: 90px;\n white-space: initial;\n }\n\n @include breakpoint($xlarge) {\n min-width: min-content;\n max-width: max-content;\n white-space: nowrap;\n }\n }\n\n @include breakpoint($narrow) {\n @include font-size(15px, 16px);\n letter-spacing: -0.75px;\n margin-left: 6px;\n }\n\n @include breakpoint($extrawide) {\n @include font-size(14px, 14px);\n letter-spacing: -0.6px;\n margin-left: 4px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(16px, 16px);\n letter-spacing: -0.7px;\n margin-left: 4px;\n }\n\n &.group {\n @include font-size(12px, 14px);\n color: var(--grayscale-white);\n letter-spacing: -0.6px;\n margin-left: 3px;\n\n @include breakpoint($wide) {\n @include font-size(14px, 14px);\n letter-spacing: -0.7px;\n }\n\n @include breakpoint($xlarge) {\n margin-left: 8px;\n }\n }\n }\n\n &__icon {\n &.group {\n svg {\n height: 32px !important;\n width: 33.41px;\n }\n }\n\n &:not(.group) svg {\n height: 32px;\n width: 33.41px;\n\n @include breakpoint($narrow) {\n height: 48px;\n width: 51px;\n }\n\n @include breakpoint($xlarge) {\n height: 60px;\n width: 64px;\n }\n }\n }\n\n &__header {\n //&:hover {\n &__page {\n &:hover {\n color: var(--brand-main);\n\n a,\n span {\n color: var(--brand-main) !important;\n }\n\n svg {\n fill: var(--brand-main);\n }\n }\n }\n &__group:not(.luomus) {\n &:hover {\n color: var(--grayscale-medium);\n\n a,\n span {\n color: var(--grayscale-medium) !important;\n }\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n }\n\n &__footer {\n &:hover {\n span {\n color: var(--grayscale-medium) !important;\n }\n svg {\n fill: var(--grayscale-medium) !important;\n }\n }\n }\n}\n\n.hy-site-header__logo-container {\n a.group {\n @include font-size(14px, 16px);\n @include font-weight($bold);\n\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n text-decoration: none;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(24px, 28px);\n letter-spacing: -0.8px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(26px, 30px);\n }\n }\n}\n","import {Component, h, Host, Prop} from \"@stencil/core\";\nimport {ColorVariant, FooterVariant, SiteLogoSize} from \"../../../utils/utils\";\n\n@Component({\n tag: \"hy-site-logo\",\n styleUrl: \"site-logo.scss\",\n shadow: false,\n})\nexport class SiteLogo {\n @Prop() type: FooterVariant = FooterVariant.header;\n @Prop() color: ColorVariant = ColorVariant.black;\n @Prop() isGroup: boolean = false;\n @Prop() isLuomusGroup: boolean = false;\n @Prop() label?: string;\n @Prop() size: SiteLogoSize = SiteLogoSize.big;\n @Prop() url?: string;\n\n render() {\n const isGroupClass = this.isGroup ? \"group\" : \"page\";\n // const isLuomusGroupClass = this.isLuomusGroup ? 'luomus' : 'regular';\n const classAttributes = [\n \"hy-site-logo\",\n `hy-site-logo__${this.type}__${isGroupClass}`,\n `hy-site-logo__${this.type}`,\n \"luomus\",\n ].join(\" \");\n\n return this.url ? (\n <Host class={classAttributes}>\n {!this.isLuomusGroup && (\n <a href={this.url}>\n <hy-icon\n class={{\"hy-site-logo__icon\": true, group: this.isGroup}}\n icon={\"hy-icon-hy-logo\"}\n size={this.size}\n fill={this.color}\n />\n <span class={{\"hy-site-logo__label\": true, group: this.isGroup}} style={{color: this.color}}>\n {this.label}\n </span>\n </a>\n )}\n {this.isLuomusGroup && (\n <div class=\"luomus-group\">\n <hy-icon\n class={{\"hy-site-logo__icon\": true, group: this.isGroup}}\n icon={\"hy-icon-hy-logo\"}\n size={this.size}\n fill={this.color}\n />\n <span class={{\"hy-site-logo__label\": true, group: this.isGroup}} style={{color: this.color}}>\n {this.label}\n </span>\n </div>\n )}\n </Host>\n ) : this.label ? (\n <Host class={classAttributes}>\n <hy-icon\n class={{\"hy-site-logo__icon\": true, group: this.isGroup}}\n icon={\"hy-icon-hy-logo\"}\n size={this.size}\n fill={this.color}\n />\n <span class={{\"hy-site-logo__label\": true, group: this.isGroup}} style={{color: this.color}}>\n {this.label}\n </span>\n </Host>\n ) : (\n \"\"\n );\n }\n}\n",".button--search {\n @include font-size(12px, 24px);\n @include font-weight($regular);\n align-items: center;\n background: transparent;\n border: 0 none;\n color: var(--brand-main-nearly-black);\n display: inline-flex;\n flex-direction: row;\n font-family: var(--main-font-family);\n height: 100%;\n justify-content: center;\n letter-spacing: -0.5px;\n width: 44px;\n\n @include breakpoint($extrawide) {\n display: inline-grid;\n grid-template-columns: repeat(2, auto);\n gap: 4px;\n width: auto;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 24px);\n }\n\n &:hover:not([disabled]) {\n color: var(--brand-main);\n cursor: pointer;\n\n svg {\n fill: var(--brand-main);\n }\n }\n\n &:focus:not([disabled]) {\n outline: solid 2px var(--additional-yellow);\n outline-offset: 2px;\n }\n\n &.is-active,\n &[aria-expanded=\"true\"] {\n position: relative;\n\n &:after {\n content: \"\";\n position: absolute;\n height: 4px;\n right: 0;\n bottom: -1px;\n left: 0;\n background-color: var(--grayscale-black);\n }\n }\n\n .is-group & {\n color: var(--grayscale-white);\n\n &:hover:not([disabled]) {\n color: var(--grayscale-medium);\n cursor: pointer;\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n\n &.is-open--menu {\n position: absolute;\n right: 50px;\n top: 15px;\n z-index: 101;\n }\n}\n\n.button--search__label {\n display: none;\n visibility: hidden;\n\n @include breakpoint($extrawide) {\n display: block;\n visibility: visible;\n order: 2;\n }\n}\n\n.site-search {\n height: 100%;\n\n &__panel {\n display: none;\n &__is-open {\n background-color: rgba(0, 0, 0, 0.5);\n border-top: 1px solid rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n font-family: var(--main-font-family);\n left: 0;\n height: 100vh;\n position: absolute;\n width: 100%;\n z-index: 520;\n }\n\n &__title {\n &__group {\n align-items: baseline;\n display: flex;\n flex-direction: column;\n\n @include breakpoint($wide) {\n align-items: baseline;\n flex-direction: row;\n justify-content: flex-start;\n }\n }\n\n .panel-title {\n @include font-size(32px, 32px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n letter-spacing: -1px;\n margin-bottom: 12px;\n margin-top: 20px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(46px, 48px);\n letter-spacing: -1.5px;\n margin-top: 24px;\n }\n @include breakpoint($xlarge) {\n @include font-size(52px, 54px);\n letter-spacing: -1.6px;\n }\n }\n .description {\n @include font-size(12px, 16px);\n color: var(--grayscale-black);\n letter-spacing: -0.2px;\n margin-bottom: 16px;\n padding: 0;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 22px);\n letter-spacing: -0.1px;\n margin-bottom: 18px;\n }\n @include breakpoint($wide) {\n @include font-size(18px, 24px);\n letter-spacing: -0.1px;\n padding-left: 8px;\n }\n @include breakpoint($xlarge) {\n @include font-size(20px, 28px);\n letter-spacing: -0.2px;\n padding-left: 12px;\n }\n }\n }\n\n &__content {\n background-color: #f8f8f8;\n width: 100%;\n }\n\n &__space-box {height: 100%;width:100%;}\n\n &__wrapper {\n margin: 0 auto;\n max-width: 100%;\n padding: 0 1rem 2rem;\n width: 100%;\n\n @include breakpoint($narrow) {\n max-width: 1216px;\n padding: 0 0 2rem;\n }\n @include breakpoint($xlarge) {\n padding: 0 0 4rem;\n }\n }\n\n &__panel-toggle {\n background-color: transparent;\n border: none;\n position: absolute;\n right: 1rem;\n top: 25px;\n\n @include breakpoint($narrow) {\n right: 2rem;\n top: 36px;\n }\n @include breakpoint($xlarge) {\n top: 45px;\n }\n\n &__label {\n @include font-size(14px, 22px);\n @include font-weight($bold);\n align-items: center;\n color: var(--grayscale-black);\n display: flex;\n letter-spacing: -0.44px;\n text-transform: uppercase;\n\n &__title {\n padding-right: 8px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(18px, 22px);\n letter-spacing: -0.56px;\n }\n }\n\n &:focus:not([disabled]),\n &:hover:not([disabled]) {\n cursor: pointer;\n span {\n color: var(--brand-main);\n }\n svg {\n fill: var(--brand-main);\n }\n }\n }\n\n &__tools {\n .title {\n @include font-size(16px, 20px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n letter-spacing: -0.5px;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n margin: 32px 0 16px;\n }\n }\n\n .list {\n a.search-special-tool {\n align-items: center;\n background-color: var(--grayscale-white);\n display: flex;\n margin-bottom: 8px;\n text-decoration: none;\n\n .label {\n @include font-size(14px, 16px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n letter-spacing: -0.44px;\n padding-left: 8px;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n padding-left: 12px;\n }\n }\n .description {\n display: none;\n @include breakpoint($wide) {\n @include font-size(14px, 18px);\n color: var(--grayscale-dark);\n display: flex;\n letter-spacing: -0.2px;\n padding-left: 12px;\n }\n @include breakpoint($xlarge) {\n @include font-size(16px, 24px);\n color: var(--grayscale-dark);\n display: flex;\n letter-spacing: 0;\n padding-left: 12px;\n }\n }\n\n hy-icon {\n height: 40px;\n width: 40px;\n\n svg {\n background-color: var(--brand-main-light);\n fill: var(--grayscale-white);\n height: 40px;\n padding: 8px;\n width: 40px;\n }\n }\n }\n }\n }\n }\n}\n","export interface SearchTools {\n label: string;\n url: string;\n description: string;\n menuLinkId: string;\n isExternal: string;\n}\n\nexport interface SearchLabels {\n label?: string;\n}\n\ndeclare global {\n interface Window {\n CludoSayt: any;\n }\n}\n\nimport {Component, Prop, h, State, Listen, Event, EventEmitter, Element} from \"@stencil/core\";\nimport {ComponentLabels} from \"../site-header\";\nimport {ColorVariant} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-site-search\",\n styleUrl: \"site-search.scss\",\n shadow: true,\n})\nexport class SiteSearch {\n @Element() el: HTMLElement;\n\n @Prop() color: ColorVariant = ColorVariant.black;\n @Prop() isAlternative: boolean = false;\n @Prop() isGroup: boolean = false;\n @Prop() isLuomusGroup: boolean = false;\n @Prop() isBetaGroup: boolean = false;\n @Prop() searchLanguage: string;\n @Prop() labels?: ComponentLabels[] | string;\n @Prop() searchLabels: string;\n @Prop() searchTools: string;\n private _searchTools: SearchTools[];\n\n @Prop() showLabel: boolean = false;\n @Prop() size: number;\n @Prop() dataSearchSpecialTools: string;\n\n private _searchLabels: SearchLabels[];\n private searchTitleLabel: string;\n private searchCloseLabel: string;\n private searchToolsLabel: string;\n private searchDescriptionLabel: string;\n\n @State() isSearchPanelOpen: boolean = false;\n @Event() searchPanelToggled: EventEmitter;\n\n private _labels: ComponentLabels[];\n\n async componentWillLoad() {\n this._labels = await jsonParserWorker(this.labels);\n // Special search tools.\n if (this.searchTools) {\n this._searchTools = await jsonParserWorker(this.searchTools);\n }\n\n if (this.searchLabels) {\n this._searchLabels = await jsonParserWorker(this.searchLabels);\n\n this.searchTitleLabel = this._searchLabels[\"search_label\"];\n this.searchCloseLabel = this._searchLabels[\"search_close_label\"];\n this.searchToolsLabel = this._searchLabels[\"search_tools_label\"];\n this.searchDescriptionLabel = this._searchLabels[\"search_description\"];\n }\n }\n\n // CLose the search panel if user opens the any other dropdown in header.\n // Do same if user scrolls up or down;\n @Listen(\"menuMobileToggled\", {target: \"document\"})\n @Listen(\"menuDesktopToggled\", {target: \"document\"})\n @Listen(\"menuLanguageToggled\", {target: \"document\"})\n @Listen(\"universityMainMenuToggled\", {target: \"document\"})\n @Listen(\"menuToggled\", {target: \"window\"})\n @Listen('headerScrollUp', {target: 'document'})\n @Listen('headerScrollDown', {target: 'document'})\n closePanelWhenOtherDropdownsTriggered() {\n this.closeSearchPanel();\n }\n\n\n @Listen(\"click\", {target: 'window'})\n handleWindowClick(event) {\n // Check if event is being fired during pressing a key (event.detail==0 in this case)\n if (event.detail == 0) return;\n\n if (this.isSearchPanelOpen) {\n const path = event.path || (event.composedPath && event.composedPath());\n\n if ((path[0] as HTMLElement).classList.contains(\"hy-backdrop\")) {\n this.closeSearchPanel();\n event.stopPropagation();\n }\n }\n }\n\n\n closeSearchPanel() {\n this.isSearchPanelOpen = false;\n\n let cludoSayt = document.querySelectorAll(\"stencil-cludo-sayt\")[0] as HTMLElement;\n if (cludoSayt) {\n let CludoSayt = window.CludoSayt;\n if (typeof CludoSayt !== \"undefined\") {\n CludoSayt.hide();\n }\n }\n\n //this.showBackdropShadow();\n }\n\n handleSearchPanelToggle(event) {\n // What is this??\n // TODO: Cleanup\n if (this.isLuomusGroup) {\n let beta = this.isBetaGroup ? \"/beta\" : \"\";\n let luomus_search_url = \"/\" + this.searchLanguage + beta + \"/luomus/search-results\";\n if (this.searchLanguage == \"fi\") {\n luomus_search_url = \"/\" + this.searchLanguage + beta + \"/luomus/hakutulokset\";\n } else if (this.searchLanguage == \"sv\") {\n luomus_search_url = \"/\" + this.searchLanguage + beta + \"/luomus/sokresultat\";\n } else if (this.searchLanguage == \"ru\") {\n luomus_search_url = \"/\" + this.searchLanguage + beta + \"/luomus/rezultaty-poiska\";\n }\n location.href = luomus_search_url;\n } else {\n this.isSearchPanelOpen = !this.isSearchPanelOpen;\n\n if (this.isSearchPanelOpen) {\n // Close desktop menu panel and lang menu panel if they are open.\n this.searchPanelToggled.emit();\n\n //this.adjustPosition(this.el);\n\n // Remove hidden class from cludo suggestions\n let cludoSayt = document.querySelectorAll(\"stencil-cludo-sayt\")[0] as HTMLElement;\n if (cludoSayt) {\n const cludoSearchContentFormElement = this.el.shadowRoot.querySelector(\n \"#cludo-search-content-form\"\n ) as HTMLElement;\n cludoSayt.classList.remove(\"hidden\");\n cludoSearchContentFormElement?.append(cludoSayt);\n (cludoSayt.shadowRoot.querySelector(\"#cludo-reli-flexi-wrapper\") as HTMLElement).style.position = \"relative\";\n (cludoSayt.shadowRoot.querySelector(\"#cludo-reli-flexi\") as HTMLElement).style.position = \"relative\";\n (cludoSayt.shadowRoot.querySelector(\"#cludo-reli-flexi\") as HTMLElement).style.maxWidth = \"none\";\n }\n\n // Without setTimeout it will not focus the input because it hasn't rendered yet.\n setTimeout(() => {\n const searchInput = this.el.shadowRoot.querySelector(\"input#search\") as HTMLElement;\n searchInput?.focus();\n });\n } else {\n this.closeSearchPanel();\n }\n }\n\n event.stopPropagation();\n }\n\n render() {\n const currentPageUrlPathName = window.location.pathname;\n const searchPagePathNames = [\"/fi/haku\", \"/en/search\", \"/sv/sök\"];\n\n return (\n <div\n class={{\n \"site-search\": true,\n \"site-search__is-open\": this.isSearchPanelOpen,\n \"is-group\": this.isGroup,\n }}\n >\n <button\n aria-label={this.showLabel ? this._labels[\"open\"] : \"\"}\n aria-expanded={`${this.isSearchPanelOpen}`}\n class={{\n \"button--search\": true,\n \"is-open--menu\": this.isAlternative,\n \"is-open\": this.isSearchPanelOpen,\n \"is-active\": searchPagePathNames.some((item) => item === currentPageUrlPathName),\n }}\n onClick={(e) => this.handleSearchPanelToggle(e)}\n disabled={searchPagePathNames.some((item) => item === currentPageUrlPathName) ? true : false}\n >\n {this.showLabel ? (\n <span class={{\"button--search__label\": true, \"button--search__label__group\": this.isGroup}}>\n {this._labels[\"label\"]}\n </span>\n ) : (\n \"\"\n )}\n <hy-icon icon={\"hy-icon-search\"} size={this.size} fill={this.color} />\n </button>\n {(!this.isLuomusGroup && this.isSearchPanelOpen) && (\n <div\n class={{\n \"site-search__panel\": true,\n \"site-search__panel__is-open\": this.isSearchPanelOpen,\n }}\n aria-hidden={`${!this.isSearchPanelOpen}`}\n >\n <div class=\"site-search__panel__content\">\n <div class=\"site-search__panel__wrapper\">\n <div class=\"site-search__panel__title\">\n <div class=\"site-search__panel__title__group\">\n <span class=\"panel-title\">{this.searchTitleLabel}</span>\n <div class=\"description\">{this.searchDescriptionLabel}</div>\n </div>\n </div>\n <div id=\"cludo-search-results\" class=\"container_12\">\n <div class=\"search-banner\"></div>\n <div class=\"search-filters search-filters-mobile\"></div>\n\n <div class=\"col-md-12\">\n <div style={{margin: \"20px 0 32px\"}} id=\"cludo-search-content-form\">\n <hy-search-field input-id=\"search\" label=\"\"></hy-search-field>\n </div>\n </div>\n\n <div class=\"col-md-3\">\n <div class=\"search-filters\" aria-controls=\"search-results\"></div>\n </div>\n <div class=\"col-md-9\">\n <div class=\"search-results-container\">\n <hy-paragraph-text>\n <div class=\"search-result-count\"></div>\n </hy-paragraph-text>\n <div class=\"search-did-you-mean\" role=\"Complementary\"></div>\n <div class=\"search-results\" role=\"region\" id=\"search-results\" aria-live=\"polite\"></div>\n </div>\n </div>\n </div>\n\n {this._searchTools && this._searchTools.length > 0 && (\n <div class=\"site-search__panel__tools\">\n <div class=\"title\">{this.searchToolsLabel}</div>\n <div class=\"list\">\n {this._searchTools.map((i) => {\n let searchToolTarget = i.isExternal ? \"_blank\" : \"_self\";\n return (\n <a class=\"search-special-tool\" href={i.url} target={searchToolTarget}>\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={14} fill={ColorVariant.black} />\n <span class=\"label\">{i.label}</span>\n <span class=\"description\">{i.description}</span>\n </a>\n );\n })}\n </div>\n </div>\n )}\n <button\n onClick={() => this.closeSearchPanel()}\n class={{\n \"site-search__panel__panel-toggle\": true,\n }}\n aria-label={this.searchCloseLabel}\n aria-expanded={`${this.isSearchPanelOpen}`}\n >\n <span class=\"site-search__panel__panel-toggle__label\">\n <span class=\"site-search__panel__panel-toggle__label__title\" tabindex=\"0\">\n {this.searchCloseLabel}\n </span>\n <hy-icon icon={\"hy-icon-remove\"} size={16} fill={ColorVariant.black} />\n </span>\n </button>\n </div>\n <div class=\"site-search__panel__space-box\" onClick={() => this.closeSearchPanel()}></div>\n </div>\n </div>\n )}\n </div>\n );\n }\n}\n"],"mappings":"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"}

package/dist/huds-lib/hy-checkbox.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["hyCheckboxCss","HyCheckbox","CheckboxVariants","default","render","this","variant","h","Host","class","type","checked","checkboxChecked","id","checkboxId","value","checkboxValue","htmlFor","checkboxLabel","icon","size"],"sources":["./src/components/hy-checkbox/hy-checkbox.scss?tag=hy-checkbox","./src/components/hy-checkbox/hy-checkbox.tsx"],"sourcesContent":[".hy-checkbox {\n display: inline-block;\n position: relative;\n margin-right: 1rem;\n}\n\n.hy-checkbox__checkmark {\n border-color: var(--link-blue);\n border-style: solid inset solid solid;\n border-width: 2px;\n height: 20px;\n margin-right: 6px;\n min-width: 20px;\n min-height: 20px;\n position: relative;\n width: 20px;\n\n svg {\n bottom: 0;\n left: 0;\n position: absolute;\n visibility: hidden;\n }\n\n &::before {\n background-color: var(--grayscale-white);\n content: \"\";\n height: 10px;\n position: absolute;\n right: 0;\n transform: rotate(40deg) translate(6%, -55%);\n visibility: hidden;\n width: 8px;\n }\n}\n\n.hy-checkbox__label {\n @include font-size(14px, 20px);\n align-items: center;\n color: var(--grayscale-black);\n display: inline-flex;\n font-family: var(--main-font-family);\n letter-spacing: -0.4px;\n text-align: left;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 20px);\n }\n}\n\n.hy-checkbox__checkbox {\n height: 100%;\n margin: 0;\n opacity: 0;\n position: absolute;\n width: 100%;\n z-index: 10;\n\n &:checked {\n & + label {\n color: var(--grayscale-black);\n\n .hy-checkbox__checkmark {\n svg,\n &::before {\n visibility: visible;\n }\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n\n & + label {\n color: var(--brand-main);\n }\n }\n\n &:focus {\n & + label {\n outline-offset: 1px;\n outline: 2px solid var(--link-blue);\n }\n }\n}\n\n.hy-checkbox--button {\n display: inline-block;\n margin-right: 4px;\n position: relative;\n\n &__label {\n @include font-size(12px, 14px);\n\n align-items: center;\n border: 0.5px solid var(--grayscale-medium-dark);\n color: var(--link-blue);\n display: inline-flex;\n font-family: var(--main-font-family);\n font-weight: 600;\n letter-spacing: -0.3px;\n padding: 12px 15px 12px 13px;\n z-index: 1;\n\n @include breakpoint($wide) {\n @include font-size(14px, 18px);\n\n letter-spacing: -0.4px;\n padding: 9px 8px 9px 8px;\n }\n }\n\n &__checkmark {\n position: absolute;\n right: 12px;\n top: 0;\n bottom: 0;\n\n @include breakpoint($wide) {\n right: 10px;\n bottom: calc(50% + 10px);\n }\n\n svg {\n bottom: 0;\n left: 0;\n position: absolute;\n visibility: hidden;\n }\n }\n\n &__label-icon {\n height: 13px;\n position: absolute;\n width: 12px;\n\n @include breakpoint($wide) {\n padding: 10px;\n right: -6px;\n top: calc(50% + 5px);\n }\n\n svg {\n background: var(--grayscale-white);\n height: 12px;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 12px;\n }\n }\n\n &__checkbox {\n height: 100%;\n margin: 0;\n opacity: 0;\n position: absolute;\n width: 100%;\n z-index: 10;\n\n &:checked {\n & + label {\n border: 1px solid var(--grayscale-black);\n color: var(--grayscale-black);\n padding: 12px 15px 12px 13px;\n\n @include breakpoint($wide) {\n border: 2px solid var(--grayscale-black);\n padding: 8px 26px 8px 7px;\n }\n\n .hy-checkbox--button__checkmark {\n .hy-checkbox--button__label-icon {\n background: var(--grayscale-white);\n }\n\n svg {\n visibility: visible;\n }\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:focus {\n & + label {\n outline-offset: 1px;\n outline: 1px solid var(--link-blue);\n }\n }\n }\n}\n","import {Component, Host, h, Prop} from \"@stencil/core\";\nimport {CheckboxVariants} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-checkbox\",\n styleUrl: \"hy-checkbox.scss\",\n shadow: false,\n})\nexport class HyCheckbox {\n /**\n * Unique id for checkbox element\n */\n @Prop() checkboxId: string | number;\n /**\n * Value for input element\n */\n @Prop() checkboxValue: string | number;\n /**\n * Label for input to describe\n */\n @Prop() checkboxLabel: string;\n /**\n * Checked attribute\n */\n @Prop() checkboxChecked: boolean = false;\n /**\n * Variant to deifne what style of checkbox to use\n */\n @Prop() variant: CheckboxVariants = CheckboxVariants.default;\n\n render() {\n switch (this.variant) {\n case \"button\":\n return (\n <Host class=\"hy-checkbox--button\">\n <input\n type=\"checkbox\"\n class=\"hy-checkbox--button__checkbox\"\n checked={this.checkboxChecked}\n id={`${this.checkboxId}`}\n value={`${this.checkboxValue}`}\n />\n <label class=\"hy-checkbox--button__label\" htmlFor={`${this.checkboxId}`}>\n {this.checkboxLabel}\n <span class=\"hy-checkbox--button__checkmark\">\n <hy-icon class=\"hy-checkbox--button__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n </span>\n </label>\n </Host>\n );\n\n default:\n return (\n <Host class=\"hy-checkbox\">\n <input\n type=\"checkbox\"\n class=\"hy-checkbox__checkbox\"\n checked={this.checkboxChecked}\n id={`${this.checkboxId}`}\n value={`${this.checkboxValue}`}\n />\n <label class=\"hy-checkbox__label\" htmlFor={`${this.checkboxId}`}>\n <span class=\"hy-checkbox__checkmark\">\n <hy-icon class=\"hy-checkbox__label-icon\" icon={\"hy-icon-done\"} size={23} aria-hidden=\"true\" />\n </span>\n {this.checkboxLabel}\n </label>\n </Host>\n );\n }\n }\n}\n"],"mappings":"8FAAA,MAAMA,EAAgB,8iJ,MCQTC,EAAU,M,kIAgBc,M,aAICC,EAAiBC,O,CAErDC,SACE,OAAQC,KAAKC,SACX,IAAK,SACH,OACEC,EAACC,EAAI,CAACC,MAAM,uBACVF,EAAA,SACEG,KAAK,WACLD,MAAM,gCACNE,QAASN,KAAKO,gBACdC,GAAI,GAAGR,KAAKS,aACZC,MAAO,GAAGV,KAAKW,kBAEjBT,EAAA,SAAOE,MAAM,6BAA6BQ,QAAS,GAAGZ,KAAKS,cACxDT,KAAKa,cACNX,EAAA,QAAME,MAAM,kCACVF,EAAA,WAASE,MAAM,kCAAkCU,KAAM,eAAgBC,KAAM,GAAE,cAAc,YAMvG,QACE,OACEb,EAACC,EAAI,CAACC,MAAM,eACVF,EAAA,SACEG,KAAK,WACLD,MAAM,wBACNE,QAASN,KAAKO,gBACdC,GAAI,GAAGR,KAAKS,aACZC,MAAO,GAAGV,KAAKW,kBAEjBT,EAAA,SAAOE,MAAM,qBAAqBQ,QAAS,GAAGZ,KAAKS,cACjDP,EAAA,QAAME,MAAM,0BACVF,EAAA,WAASE,MAAM,0BAA0BU,KAAM,eAAgBC,KAAM,GAAE,cAAc,UAEtFf,KAAKa,gB"}

package/dist/huds-lib/hy-collaboration.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["hyCollaborationCss","HyCollaboration","render","h","class","role","src","this","imageUrl","alt","imageAltText","textDescription","linkUrl","href","linkTitle","icon","size"],"sources":["./src/components/hy-collaboration/hy-collaboration.scss?tag=hy-collaboration","./src/components/hy-collaboration/hy-collaboration.tsx"],"sourcesContent":[".hy-collaboration {\n border-bottom: 1px solid var(--grayscale-dark);\n padding: 32px 0;\n\n @include breakpoint($wide) {\n align-items: flex-start;\n display: grid;\n grid-template-columns: fit-content(calc(43.75% - 60px)) 1fr;\n gap: 60px;\n }\n\n @include breakpoint($extrawide) {\n grid-template-columns: fit-content(calc(43% - 60px)) 1fr;\n padding: 40px 0;\n }\n\n @include breakpoint($overwide) {\n grid-template-columns: fit-content(calc(42.5% - 60px)) 1fr;\n }\n\n @include breakpoint($xlarge) {\n grid-template-columns: fit-content(calc(41.85% - 60px)) 1fr;\n }\n\n @include breakpoint(1750px) {\n grid-template-columns: fit-content(calc(41% - 60px)) 1fr;\n }\n\n @include breakpoint($fullhd) {\n grid-template-columns: fit-content(428px) 1fr;\n }\n}\n\n.hy-collaboration__logo {\n margin: 0 0 32px;\n padding: 0;\n\n @include breakpoint($wide) {\n margin: 0;\n }\n\n img {\n max-width: 75%;\n max-height: 200px;\n\n @include breakpoint($narrow) {\n max-width: 50%;\n }\n\n @include breakpoint($wide) {\n max-width: 100%;\n max-height: 260px;\n }\n }\n}\n\n.hy-collaboration__description {\n @include font-size(15px, 22px);\n font-family: var(--main-font-family);\n margin: 0 0 12px;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n\n @include breakpoint($extrawide) {\n @include font-size(17px, 26px);\n }\n}\n\n.hy-collaboration__link {\n @include font-size(15px, 22px);\n @include font-weight($semibold);\n font-family: var(--main-font-family);\n color: var(--link-blue);\n display: inline-flex;\n align-items: center;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n\n @include breakpoint($extrawide) {\n @include font-size(17px, 26px);\n }\n\n span {\n margin-left: 4px;\n\n svg {\n fill: var(--link-blue);\n }\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-collaboration\",\n styleUrl: \"hy-collaboration.scss\",\n shadow: false,\n})\nexport class HyCollaboration {\n @Prop() textDescription: string;\n @Prop() linkUrl?: string;\n @Prop() linkTitle?: string;\n @Prop() imageUrl: string;\n @Prop() imageAltText: string;\n\n render() {\n return (\n <div class=\"hy-collaboration\">\n <figure class=\"hy-collaboration__logo\" role=\"complementary\">\n <img src={this.imageUrl} alt={this.imageAltText} />\n </figure>\n <div class=\"hy-collaboration__content\">\n <p class=\"hy-collaboration__description\">{this.textDescription}</p>\n {this.linkUrl && (\n <a href={this.linkUrl} class=\"hy-collaboration__link\">\n {this.linkTitle}\n <span aria-hidden=\"true\">\n <hy-icon icon={\"hy-icon-arrow-right\"} size={10} />\n </span>\n </a>\n )}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"+CAAA,MAAMA,EAAqB,umG,MCOdC,EAAe,M,4JAO1BC,SACE,OACEC,EAAA,OAAKC,MAAM,oBACTD,EAAA,UAAQC,MAAM,yBAAyBC,KAAK,iBAC1CF,EAAA,OAAKG,IAAKC,KAAKC,SAAUC,IAAKF,KAAKG,gBAErCP,EAAA,OAAKC,MAAM,6BACTD,EAAA,KAAGC,MAAM,iCAAiCG,KAAKI,iBAC9CJ,KAAKK,SACJT,EAAA,KAAGU,KAAMN,KAAKK,QAASR,MAAM,0BAC1BG,KAAKO,UACNX,EAAA,sBAAkB,QAChBA,EAAA,WAASY,KAAM,sBAAuBC,KAAM,Q"}

package/dist/huds-lib/hy-content-list_2.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["hyContentListCss","HyContentList","this","variant","CourseVariants","default","CourseStateVariants","dataWatcher","data","_dataItems","JSON","parse","componentWillLoad","dataItems","handleCardClick","e","id","preventDefault","card","el","querySelector","window","open","dataset","location","async","hyMainDiv","closest","classList","contains","headerstyle","renderItems","courseRealisations","length","forEach","item","courseObject","stringify","courseListType","row","grid","courseCode","courseCredits","realisations","realisationProperty","realizationItem","courseRealisationName","courseRealisationFullName","creditsLabel","courseStudyFormat","courseCancelled","courseStartDate","courseEndDate","formattedTimeRange","courseEnrollmentLink","courseTeachingLanguage","courseOrganisation","courseTags","tags","z","tagItem","name","push","courseTagsJSON","contentListItemClassAttributes","join","h","class","courseStateVariant","cancelledLabel","linkLabel","onClick","render","classAttributes","classAlertAttributes","classAlertLabelAttributes","Host","icon","size","noResultLabel","hyContentListItemCss","keys","enter","HyContentLstItem","_courseTags","jsonParserWorker","handleKeyDown","event","key","code","target","ariaLabel","classItemName","stateVariant","classItemCancelled","tabindex","courseName","isCancelled","map","x","href","courseLinkLabel"],"sources":["./src/components/hy-content-lists/hy-content-list/hy-content-list.scss?tag=hy-content-list","./src/components/hy-content-lists/hy-content-list/hy-content-list.tsx","./src/components/hy-content-lists/hy-content-list-item/hy-content-list-item.scss?tag=hy-content-list-item","./src/components/hy-content-lists/hy-content-list-item/hy-content-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-content-list {\n display: flex;\n font-family: var(--main-font-family);\n flex-wrap: wrap;\n\n &--no-result {\n align-items: center;\n display: flex;\n }\n &--alert {\n margin-right: 6px;\n svg {\n fill: var(--grayscale-dark);\n }\n @include breakpoint($xlarge) {\n svg {\n height: 18px;\n width: 18px;\n }\n }\n &--large {\n @include breakpoint($overwide) {\n svg {\n height: 18px;\n width: 18px;\n }\n }\n }\n }\n\n &--alert-label {\n font-family: var(--main-font-family);\n @include font-size(15px, 22px);\n color: var(--grayscale-dark);\n font-style: italic;\n letter-spacing: 0;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n }\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px);\n }\n &--large {\n @include breakpoint($overwide) {\n @include font-size(17px, 26px);\n }\n }\n }\n}\n\n.hy-content-list.row {\n flex-direction: column;\n}\n\n.hy-content-list.grid {\n flex-direction: row;\n}\n","import {CourseStateVariants, CourseVariants} from \"../../../utils/utils\";\nimport {Component, ComponentInterface, Element, h, Host, Prop, State, Watch} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-content-list\",\n styleUrl: \"hy-content-list.scss\",\n shadow: false,\n})\nexport class HyContentList implements ComponentInterface {\n @Prop() linkLabel: string = \"Go to course page\";\n @Prop() noResultLabel: string = \"No courses scheduled at the moment\";\n @Prop() creditsLabel: string = \"cr\";\n @Prop() cancelledLabel: string = \"Cancelled\";\n @Prop() dataItems: string;\n @Prop() headerstyle: string = \"common\";\n @Prop() courseStateVariant: CourseStateVariants = CourseStateVariants.default;\n private _dataItems: [];\n private variant: CourseVariants = CourseVariants.default;\n @State() courseRealisations: Array<object> = [];\n @Element() el: HTMLElement;\n /**\n * Data for links to be displayed.\n */\n\n @Watch(\"dataItems\") dataWatcher(data: [] | string) {\n this._dataItems = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n componentWillLoad() {\n this.dataWatcher(this.dataItems);\n }\n\n handleCardClick(e, id) {\n e.preventDefault();\n let card = this.el.querySelector(`#${id}`) as HTMLElement;\n\n if (card) {\n window.open(card.dataset.location, \"_blank\");\n }\n }\n\n async componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n }\n\n renderItems() {\n let courseRealisations = [];\n if (this._dataItems && this._dataItems.length > 0) {\n this._dataItems.forEach((item) => {\n const courseObject = JSON.parse(JSON.stringify(item));\n\n const courseListType = courseObject[\"courseListType\"];\n this.variant = courseListType == \"list\" ? CourseVariants.row : CourseVariants.grid;\n\n const courseCode = courseObject[\"code\"];\n const courseCredits = courseObject[\"credits\"];\n\n // Course realisations.\n if (courseObject[\"realisations\"]) {\n const realisations = JSON.parse(JSON.stringify(courseObject[\"realisations\"]));\n for (const realisationProperty in realisations) {\n const realizationItem = realisations[realisationProperty];\n const courseRealisationName = realizationItem[\"name\"];\n const courseRealisationFullName = courseRealisationName + \", \" + courseCredits + \" \" + this.creditsLabel;\n const courseStudyFormat = realizationItem[\"studyFormat\"];\n const courseCancelled = realizationItem[\"cancelled\"];\n const courseStartDate = realizationItem[\"startDate\"];\n const courseEndDate = realizationItem[\"endDate\"];\n const formattedTimeRange = realizationItem[\"formattedTimeRange\"];\n const courseEnrollmentLink = realizationItem[\"enrolmentLink\"];\n const courseTeachingLanguage = realizationItem[\"teachingLanguage\"];\n const courseOrganisation = realizationItem[\"organisation\"];\n\n let courseTags = [];\n if (realizationItem[\"tags\"]) {\n let tags = JSON.parse(JSON.stringify(realizationItem[\"tags\"]));\n for (let z in tags) {\n let tagItem = {name: tags[z]};\n courseTags.push(tagItem);\n }\n }\n const courseTagsJSON = JSON.stringify(courseTags);\n\n const contentListItemClassAttributes = [\"item\", this.variant].join(\" \");\n\n courseRealisations.push(\n <hy-content-list-item\n id={realisationProperty}\n class={contentListItemClassAttributes}\n variant={this.variant}\n state-variant={this.courseStateVariant}\n course-code={courseCode}\n course-name={courseRealisationFullName}\n is-cancelled={courseCancelled}\n cancelled-label={this.cancelledLabel}\n course-credits={courseCredits}\n course-tags={courseTagsJSON}\n course-start-date={courseStartDate}\n course-end-date={courseEndDate}\n formatted-time-range={formattedTimeRange}\n course-study-format={courseStudyFormat}\n course-organisation={courseOrganisation}\n course-enrollment-link={courseEnrollmentLink}\n course-teaching-language={courseTeachingLanguage}\n course-link-label={this.linkLabel}\n data-location={courseEnrollmentLink}\n onClick={(e) => this.handleCardClick(e, realisationProperty)}\n //onKeyDown={() => this.handleKeyDown(window.event, realisationProperty)}\n ></hy-content-list-item>\n );\n }\n }\n });\n }\n\n return courseRealisations;\n }\n\n render() {\n const classAttributes = [this.variant, \"hy-content-list\"].join(\" \");\n const classAlertAttributes = [\"hy-content-list--alert\", `hy-content-list--alert--${this.headerstyle}`].join(\" \");\n const classAlertLabelAttributes = [\n \"hy-content-list--alert-label\",\n `hy-content-list--alert-label--${this.headerstyle}`,\n ].join(\" \");\n\n this.courseRealisations = this.renderItems();\n if (this.courseRealisations && this.courseRealisations.length > 0) {\n return (\n <Host>\n <div class={classAttributes}>{this.courseRealisations}</div>\n </Host>\n );\n } else {\n return (\n <Host>\n <div class={classAttributes}>\n <div class=\"hy-content-list--no-result\">\n <span class={classAlertAttributes}>\n <hy-icon icon={\"hy-icon-info\"} size={16} />\n </span>\n <span class={classAlertLabelAttributes}>{this.noResultLabel}</span>\n </div>\n </div>\n </Host>\n );\n }\n }\n}\n","hy-content-list-item {\n background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);\n cursor: pointer;\n display: flex;\n margin-bottom: 16px;\n position: relative;\n //width: 100%;\n\n @include breakpoint($narrow) {\n margin-bottom: 24px;\n }\n}\nhy-content-list-item[variant=\"row\"],\nhy-content-list-item.row {\n max-width: 100%;\n padding: 21px 0 60px 12px;\n width: 100%;\n\n @include breakpoint($narrow) {\n padding: 21px 0 12px 24px;\n }\n @include breakpoint($wide) {\n margin-bottom: 16px;\n }\n}\nhy-content-list-item.grid {\n max-width: 100%;\n padding: 21px 0 60px 12px;\n width: 100%;\n\n @include breakpoint($narrow) {\n margin-right: var(--gutter-medium);\n max-width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);\n padding: 21px 0 60px 12px;\n width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);\n }\n @include breakpoint($wide) {\n margin-bottom: 27px;\n margin-right: var(--gutter-wide);\n max-width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);\n width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);\n }\n @include breakpoint($extrawide) {\n margin-bottom: 32px;\n margin-right: var(--gutter-extrawide);\n max-width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);\n width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);\n }\n}\n\nhy-content-list-item.grid:nth-of-type(2n + 0) {\n @include breakpoint($narrow) {\n margin-right: 0;\n }\n @include breakpoint($wide) {\n margin-right: var(--gutter-wide);\n }\n @include breakpoint($extrawide) {\n margin-right: var(--gutter-extrawide);\n }\n}\n\nhy-content-list-item.grid:nth-of-type(3n + 0) {\n @include breakpoint($wide) {\n margin-right: 0;\n }\n}\n\n.hy-content-list-item {\n font-family: var(--main-font-family);\n position: relative;\n width: 100%;\n\n a {\n text-decoration: none;\n }\n\n &--container {\n cursor: pointer;\n }\n\n &--item-name {\n color: var(--link-blue);\n @include font-size(20px, 24px);\n @include font-weight($bold);\n letter-spacing: -0.6px;\n margin-bottom: 16px;\n word-break: break-word;\n\n &--past-courses {\n color: var(--grayscale-dark);\n }\n }\n\n &--metadata {\n @include font-size(14px, 16px);\n @include font-weight($semibold);\n\n color: var(--grayscale-black);\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n letter-spacing: -0.44px;\n line-height: 16px;\n margin-bottom: 19px;\n padding-bottom: 0;\n\n &--item {\n padding-bottom: 6px;\n }\n\n @include breakpoint($narrow) {\n padding-bottom: 1rem;\n }\n @include breakpoint($extrawide) {\n padding-bottom: 0;\n }\n\n &--item:after {\n content: \"|\";\n padding: 0 8px;\n }\n &--item--last:after {\n content: \" \";\n }\n }\n\n .cancelled {\n span {\n @include font-size(12px, 12px);\n @include font-weight($bold);\n background-color: var(--additional-red-light);\n color: var(--grayscale-white);\n letter-spacing: -0.5px;\n padding: 6px 8px;\n text-transform: uppercase;\n }\n &--past-courses {\n span {\n background-color: var(--grayscale-dark);\n }\n }\n\n &:not(.mobile) {\n display: none;\n }\n\n &.mobile {\n bottom: -50px;\n display: block;\n margin: 0;\n padding-bottom: 12px;\n position: absolute;\n }\n\n @include breakpoint($narrow) {\n margin-right: 8px;\n\n &.mobile {\n display: none;\n }\n &:not(.mobile) {\n display: block;\n }\n }\n }\n\n &--link {\n position: absolute;\n right: -6px;\n\n a {\n align-items: center;\n display: flex;\n flex-direction: row;\n text-decoration: none;\n\n .label {\n @include font-size(16px, 16px);\n @include font-weight($bold);\n color: var(--link-blue);\n letter-spacing: -0.5px;\n line-height: 16px;\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 transform: rotate(-45deg);\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: 10.29px;\n }\n }\n }\n }\n }\n}\n\n.hy-content-list-item.row {\n .hy-content-list-item--link {\n bottom: -60px;\n padding-bottom: 12px;\n\n @include breakpoint($narrow) {\n bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .hy-content-list-item--tags {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n @include breakpoint($wide) {\n flex-direction: row;\n padding-right: 200px;\n }\n }\n}\n\n.hy-content-list-item.grid {\n .hy-content-list-item--link {\n bottom: -60px;\n padding-bottom: 12px;\n }\n\n .hy-content-list-item--tags {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n }\n}\n","export interface TagValue {\n name: string;\n}\n\nimport {Component, Element, h, Listen, Prop} from \"@stencil/core\";\nimport {CourseStateVariants, CourseVariants} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\nlet keys = {\n enter: \"Enter\",\n};\n\n@Component({\n tag: \"hy-content-list-item\",\n styleUrl: \"hy-content-list-item.scss\",\n shadow: false,\n})\nexport class HyContentLstItem {\n @Prop() variant: CourseVariants = CourseVariants.default;\n @Prop() stateVariant: CourseStateVariants = CourseStateVariants.default;\n @Prop() courseCode?: string;\n @Prop() courseName?: string;\n @Prop() isCancelled?: boolean;\n @Prop() cancelledLabel: string = \"Cancelled\";\n @Prop() courseCredits?: string;\n private _courseTags: TagValue[];\n @Prop() courseTags: TagValue[] | string;\n @Prop() courseStartDate?: string;\n @Prop() courseEndDate?: string;\n @Prop() formattedTimeRange?: string;\n @Prop() courseStudyFormat?: string;\n @Prop() courseOrganisation?: string;\n @Prop() courseEnrollmentLink?: string;\n @Prop() courseTeachingLanguage?: string;\n @Prop() courseLinkLabel?: string;\n\n @Element() el: HTMLElement;\n\n async componentWillLoad() {\n this._courseTags = await jsonParserWorker(this.courseTags);\n }\n\n @Listen(\"keydown\")\n handleKeyDown(event) {\n const key = (event as KeyboardEvent).code;\n if (key == keys.enter) {\n let card = this.el;\n window.open(card.dataset.location, \"_blank\", \"noopener\");\n }\n }\n\n render() {\n const classAttributes = [this.variant, \"hy-content-list-item\"].join(\" \");\n\n const target = \"_blank\";\n const ariaLabel = \"Link points outside the current website.\";\n\n const classItemName = [\n \"hy-content-list-item--item-name\",\n `hy-content-list-item--item-name--${this.stateVariant}`,\n ].join(\" \");\n const classItemCancelled = [\"cancelled\", `cancelled--${this.stateVariant}`].join(\" \");\n\n return [\n <div class={classAttributes} tabindex=\"0\">\n <div class={classItemName}>{this.courseName}</div>\n <div class=\"hy-content-list-item--metadata\">\n {this.isCancelled && (\n <div class={classItemCancelled}>\n <span>{this.cancelledLabel}</span>\n </div>\n )}\n <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first\">\n <span>{this.formattedTimeRange}</span>\n </div>\n {this.courseOrganisation\n ? [\n <div class=\"hy-content-list-item--metadata--item\">\n <span>{this.courseStudyFormat}</span>\n </div>,\n <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last\">\n <span>{this.courseOrganisation}</span>\n </div>,\n ]\n : [\n <div class=\"hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last\">\n <span>{this.courseStudyFormat}</span>\n </div>,\n ]}\n </div>\n {this._courseTags && this._courseTags.length > 0 && (\n <div class=\"hy-content-list-item--tags\">\n {this._courseTags.map((x) => {\n return <hy-tag>{x.name}</hy-tag>;\n })}\n </div>\n )}\n {this.isCancelled && (\n <div class=\"cancelled mobile\">\n <span>{this.cancelledLabel}</span>\n </div>\n )}\n <div class=\"hy-content-list-item--link\">\n <a\n href={this.courseEnrollmentLink}\n target={target}\n aria-label={ariaLabel}\n class=\"hy-content-list-item--link--link\"\n tabindex=\"-1\"\n >\n <span class=\"label\">{this.courseLinkLabel}</span>\n <span class=\"icon-wrapper\">\n <div class=\"icon\">\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={40} />\n </div>\n </span>\n </a>\n </div>\n </div>,\n ];\n }\n}\n"],"mappings":"2JAAA,MAAMA,EAAmB,y5E,MCQZC,EAAa,M,yBAShBC,KAAAC,QAA0BC,EAAeC,Q,eARrB,oB,mBACI,qC,kBACD,K,oBACE,Y,0CAEH,S,wBACoBC,EAAoBD,Q,wBAGzB,E,CAMzBE,YAAYC,GAC9BN,KAAKO,kBAAoBD,IAAS,SAAWE,KAAKC,MAAMH,GAAQA,C,CAGlEI,oBACEV,KAAKK,YAAYL,KAAKW,U,CAGxBC,gBAAgBC,EAAGC,GACjBD,EAAEE,iBACF,IAAIC,EAAOhB,KAAKiB,GAAGC,cAAc,IAAIJ,KAErC,GAAIE,EAAM,CACRG,OAAOC,KAAKJ,EAAKK,QAAQC,SAAU,S,EAIvCC,yBACE,IAAIC,EAAYxB,KAAKiB,GAAGQ,QAAQ,YAChC,GAAID,EAAW,CACb,IAAKA,EAAUE,UAAUC,SAAS,gBAAiB,CACjD3B,KAAK4B,YAAc,O,GAKzBC,cACE,IAAIC,EAAqB,GACzB,GAAI9B,KAAKO,YAAcP,KAAKO,WAAWwB,OAAS,EAAG,CACjD/B,KAAKO,WAAWyB,SAASC,IACvB,MAAMC,EAAe1B,KAAKC,MAAMD,KAAK2B,UAAUF,IAE/C,MAAMG,EAAiBF,EAAa,kBACpClC,KAAKC,QAAUmC,GAAkB,OAASlC,EAAemC,IAAMnC,EAAeoC,KAE9E,MAAMC,EAAaL,EAAa,QAChC,MAAMM,EAAgBN,EAAa,WAGnC,GAAIA,EAAa,gBAAiB,CAChC,MAAMO,EAAejC,KAAKC,MAAMD,KAAK2B,UAAUD,EAAa,kBAC5D,IAAK,MAAMQ,KAAuBD,EAAc,CAC9C,MAAME,EAAkBF,EAAaC,GACrC,MAAME,EAAwBD,EAAgB,QAC9C,MAAME,EAA4BD,EAAwB,KAAOJ,EAAgB,IAAMxC,KAAK8C,aAC5F,MAAMC,EAAoBJ,EAAgB,eAC1C,MAAMK,EAAkBL,EAAgB,aACxC,MAAMM,EAAkBN,EAAgB,aACxC,MAAMO,EAAgBP,EAAgB,WACtC,MAAMQ,EAAqBR,EAAgB,sBAC3C,MAAMS,EAAuBT,EAAgB,iBAC7C,MAAMU,EAAyBV,EAAgB,oBAC/C,MAAMW,EAAqBX,EAAgB,gBAE3C,IAAIY,EAAa,GACjB,GAAIZ,EAAgB,QAAS,CAC3B,IAAIa,EAAOhD,KAAKC,MAAMD,KAAK2B,UAAUQ,EAAgB,UACrD,IAAK,IAAIc,KAAKD,EAAM,CAClB,IAAIE,EAAU,CAACC,KAAMH,EAAKC,IAC1BF,EAAWK,KAAKF,E,EAGpB,MAAMG,EAAiBrD,KAAK2B,UAAUoB,GAEtC,MAAMO,EAAiC,CAAC,OAAQ9D,KAAKC,SAAS8D,KAAK,KAEnEjC,EAAmB8B,KACjBI,EAAA,wBACElD,GAAI4B,EACJuB,MAAOH,EACP7D,QAASD,KAAKC,QAAO,gBACND,KAAKkE,mBAAkB,cACzB3B,EAAU,cACVM,EAAyB,eACxBG,EAAe,kBACZhD,KAAKmE,eAAc,iBACpB3B,EAAa,cAChBqB,EAAc,oBACRZ,EAAe,kBACjBC,EAAa,uBACRC,EAAkB,sBACnBJ,EAAiB,sBACjBO,EAAkB,yBACfF,EAAoB,2BAClBC,EAAsB,oBAC7BrD,KAAKoE,UAAS,gBAClBhB,EACfiB,QAAUxD,GAAMb,KAAKY,gBAAgBC,EAAG6B,K,MASpD,OAAOZ,C,CAGTwC,SACE,MAAMC,EAAkB,CAACvE,KAAKC,QAAS,mBAAmB8D,KAAK,KAC/D,MAAMS,EAAuB,CAAC,yBAA0B,2BAA2BxE,KAAK4B,eAAemC,KAAK,KAC5G,MAAMU,EAA4B,CAChC,+BACA,iCAAiCzE,KAAK4B,eACtCmC,KAAK,KAEP/D,KAAK8B,mBAAqB9B,KAAK6B,cAC/B,GAAI7B,KAAK8B,oBAAsB9B,KAAK8B,mBAAmBC,OAAS,EAAG,CACjE,OACEiC,EAACU,EAAI,KACHV,EAAA,OAAKC,MAAOM,GAAkBvE,KAAK8B,oB,KAGlC,CACL,OACEkC,EAACU,EAAI,KACHV,EAAA,OAAKC,MAAOM,GACVP,EAAA,OAAKC,MAAM,8BACTD,EAAA,QAAMC,MAAOO,GACXR,EAAA,WAASW,KAAM,eAAgBC,KAAM,MAEvCZ,EAAA,QAAMC,MAAOQ,GAA4BzE,KAAK6E,iB,8FClJ5D,MAAMC,EAAuB,6sNCQ7B,IAAIC,EAAO,CACTC,MAAO,S,MAQIC,EAAgB,M,sCACO/E,EAAeC,Q,kBACLC,EAAoBD,Q,mGAI/B,Y,iUAejCoB,0BACEvB,KAAKkF,kBAAoBC,EAAiBnF,KAAKuD,W,CAIjD6B,cAAcC,GACZ,MAAMC,EAAOD,EAAwBE,KACrC,GAAID,GAAOP,EAAKC,MAAO,CACrB,IAAIhE,EAAOhB,KAAKiB,GAChBE,OAAOC,KAAKJ,EAAKK,QAAQC,SAAU,SAAU,W,EAIjDgD,SACE,MAAMC,EAAkB,CAACvE,KAAKC,QAAS,wBAAwB8D,KAAK,KAEpE,MAAMyB,EAAS,SACf,MAAMC,EAAY,2CAElB,MAAMC,EAAgB,CACpB,kCACA,oCAAoC1F,KAAK2F,gBACzC5B,KAAK,KACP,MAAM6B,EAAqB,CAAC,YAAa,cAAc5F,KAAK2F,gBAAgB5B,KAAK,KAEjF,MAAO,CACLC,EAAA,OAAKC,MAAOM,EAAiBsB,SAAS,KACpC7B,EAAA,OAAKC,MAAOyB,GAAgB1F,KAAK8F,YACjC9B,EAAA,OAAKC,MAAM,kCACRjE,KAAK+F,aACJ/B,EAAA,OAAKC,MAAO2B,GACV5B,EAAA,YAAOhE,KAAKmE,iBAGhBH,EAAA,OAAKC,MAAM,oFACTD,EAAA,YAAOhE,KAAKmD,qBAEbnD,KAAKsD,mBACF,CACEU,EAAA,OAAKC,MAAM,wCACTD,EAAA,YAAOhE,KAAK+C,oBAEdiB,EAAA,OAAKC,MAAM,mFACTD,EAAA,YAAOhE,KAAKsD,sBAGhB,CACEU,EAAA,OAAKC,MAAM,mFACTD,EAAA,YAAOhE,KAAK+C,sBAIrB/C,KAAKkF,aAAelF,KAAKkF,YAAYnD,OAAS,GAC7CiC,EAAA,OAAKC,MAAM,8BACRjE,KAAKkF,YAAYc,KAAKC,GACdjC,EAAA,cAASiC,EAAEtC,SAIvB3D,KAAK+F,aACJ/B,EAAA,OAAKC,MAAM,oBACTD,EAAA,YAAOhE,KAAKmE,iBAGhBH,EAAA,OAAKC,MAAM,8BACTD,EAAA,KACEkC,KAAMlG,KAAKoD,qBACXoC,OAAQA,EAAM,aACFC,EACZxB,MAAM,mCACN4B,SAAS,MAET7B,EAAA,QAAMC,MAAM,SAASjE,KAAKmG,iBAC1BnC,EAAA,QAAMC,MAAM,gBACVD,EAAA,OAAKC,MAAM,QACTD,EAAA,WAASW,KAAM,yBAA0BC,KAAM,U"}

package/dist/huds-lib/hy-crisis-banner.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["hyCrisisBannerCss","HyCrisisBanner","render","h","Host","class","role","icon","this","bannerTitle","bannerDescription","innerHTML","linkUrl","href","linkTitle"],"sources":["./src/components/hy-crisis-banner/hy-crisis-banner.scss?tag=hy-crisis-banner","./src/components/hy-crisis-banner/hy-crisis-banner.tsx"],"sourcesContent":[".hy-crisis-banner {\n box-shadow: inset 0 -20px 20px -20px rgba(14, 104, 139, 0.1);\n display: block;\n}\n\n.hy-crisis-banner__container {\n display: flex;\n margin: 0 auto;\n max-width: 1216px;\n}\n\n.hy-crisis-banner__indicator {\n background-color: var(--additional-yellow-light);\n flex-shrink: 0;\n\n @include breakpoint($narrow) {\n align-items: center;\n display: flex;\n justify-content: center;\n }\n}\n\n.hy-crisis-banner__indicator-icon {\n margin-left: 8px;\n margin-right: 8px;\n margin-top: 10px;\n\n @include breakpoint($narrow) {\n margin-left: 10px;\n margin-right: 10px;\n margin-top: 0;\n }\n\n svg {\n height: 22px;\n width: 22px;\n\n circle {\n fill: var(--grayscale-white);\n }\n\n path {\n fill: var(--additional-yellow-light);\n }\n }\n}\n\n.hy-crisis-banner__content-wrapper {\n align-items: baseline;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n padding: 12px 0 12px 12px;\n\n @include breakpoint($narrow) {\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n padding: 14px 0 14px 14px;\n }\n\n @include breakpoint($wide) {\n padding: 20px 0 20px 20px;\n }\n}\n\n.hy-crisis-banner__content {\n @include breakpoint($narrow) {\n max-width: 61.22%;\n width: 100%;\n }\n\n @include breakpoint($wide) {\n max-width: 65.83%;\n }\n\n @include breakpoint($extrawide) {\n max-width: 65.79%;\n }\n}\n\n.hy-crisis-banner__title {\n @include font-size(14px, 16px);\n @include font-weight($bold);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.35px;\n margin: 0 0 2px 0;\n\n @include breakpoint($xlarge) {\n @include font-size(16px, 18px);\n letter-spacing: -0.4px;\n }\n}\n\n.hy-crisis-banner__description {\n @include font-size(12px, 14px);\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n letter-spacing: -0.35px;\n margin: 0;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 16px);\n }\n\n p {\n margin-top: 0;\n\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n}\n\n.hy-crisis-banner__link {\n @include font-size(14px, 16px);\n @include font-weight($semibold);\n align-items: center;\n color: var(--brand-main-light);\n display: inline-flex;\n font-family: var(--main-font-family);\n letter-spacing: -0.5px;\n margin: 12px 0 0;\n overflow: hidden;\n text-decoration: none;\n\n @include breakpoint($narrow) {\n flex-shrink: 0;\n margin-left: 24px;\n margin-right: 32px;\n margin-top: 0;\n text-align: right;\n }\n\n @include breakpoint($extrawide) {\n margin-left: 32px;\n }\n @include breakpoint($xlarge) {\n @include font-size(16px, 18px);\n }\n\n &:hover,\n &:focus {\n color: var(--brand-main);\n text-decoration: underline;\n\n .hy-crisis-banner__link-icon svg {\n fill: var(--brand-main);\n }\n }\n}\n\n.hy-crisis-banner__link-icon {\n margin-left: 4px;\n\n @include breakpoint($narrow) {\n margin-left: 8px;\n }\n\n @include breakpoint($extrawide) {\n margin-left: 12px;\n }\n\n svg {\n fill: var(--brand-main-light);\n height: 12px;\n width: 12px;\n\n @include breakpoint($narrow) {\n height: 14px;\n width: 14px;\n }\n\n @include breakpoint($xlarge) {\n height: 16px;\n width: 16px;\n }\n }\n}\n","import {Component, Host, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-crisis-banner\",\n styleUrl: \"hy-crisis-banner.scss\",\n shadow: false,\n})\nexport class HyCrisisBanner {\n @Prop() bannerTitle: string;\n @Prop() bannerDescription?: string;\n @Prop() linkTitle?: string;\n @Prop() linkUrl?: string;\n\n render() {\n return (\n <Host class=\"hy-crisis-banner\" role=\"alert\">\n <div class=\"hy-crisis-banner__container\">\n <div class=\"hy-crisis-banner__indicator\">\n <hy-icon class={\"hy-crisis-banner__indicator-icon\"} icon={\"hy-icon-alert\"} />\n </div>\n <div class=\"hy-crisis-banner__content-wrapper\">\n <div class=\"hy-crisis-banner__content\">\n <h3 class=\"hy-crisis-banner__title\">{this.bannerTitle}</h3>\n {this.bannerDescription && (\n <div class=\"hy-crisis-banner__description\" innerHTML={this.bannerDescription}></div>\n )}\n </div>\n {this.linkUrl && (\n <a class=\"hy-crisis-banner__link\" href={this.linkUrl}>\n {this.linkTitle}\n <hy-icon class={\"hy-crisis-banner__link-icon\"} icon={\"hy-icon-arrow-to-right\"} />\n </a>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"sDAAA,MAAMA,EAAoB,6mK,MCObC,EAAc,M,qIAMzBC,SACE,OACEC,EAACC,EAAI,CAACC,MAAM,mBAAmBC,KAAK,SAClCH,EAAA,OAAKE,MAAM,+BACTF,EAAA,OAAKE,MAAM,+BACTF,EAAA,WAASE,MAAO,mCAAoCE,KAAM,mBAE5DJ,EAAA,OAAKE,MAAM,qCACTF,EAAA,OAAKE,MAAM,6BACTF,EAAA,MAAIE,MAAM,2BAA2BG,KAAKC,aACzCD,KAAKE,mBACJP,EAAA,OAAKE,MAAM,gCAAgCM,UAAWH,KAAKE,qBAG9DF,KAAKI,SACJT,EAAA,KAAGE,MAAM,yBAAyBQ,KAAML,KAAKI,SAC1CJ,KAAKM,UACNX,EAAA,WAASE,MAAO,8BAA+BE,KAAM,8B"}

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

@@ -1 +0,0 @@

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

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

@@ -1 +0,0 @@

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