npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.58 → 0.8.60 - Mend

@itcenteratunihelsinki/huds-lib 0.8.58 → 0.8.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1074) hide show

package/components/accordion-container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"accordion-container.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,wtCAAwtC;;MCOzuC,kBAAkB;;;;;;;;;;;;;;EAY7B,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,wBAAwB,EAAE,iBAAiB,CAAC,CAAC;IACtE,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC9D,QACE,EAAC,IAAI,QACH,WAAK,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,yBAAsB,MAAM,uBAAmB,MAAM,IAChG,eAAa,CACT,EACN,cAAQ,EAAE,EAAC,oBAAoB,GAAG,CAC7B,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/accordion-container/accordion-container.scss?tag=hy-accordion-container","./src/components/accordion-container/accordion-container.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-accordion-container {\n width: 100%;\n}\n","import {Component, Prop, h, Host} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-accordion-container\",\n styleUrl: \"accordion-container.scss\",\n shadow: false,\n})\nexport class AccordionContainer {\n @Prop() accordionid?: string;\n\n /\n data-allow-toggle\n Allow for each toggle to both open and close individually\n\n data-allow-multiple\n Allow for multiple accordion sections to be expanded at the same time.\n Assumes data-allow-toggle otherwise you would not be able to close any of the accordions\n */\n\n render() {\n const classAttributes = [\"hy-accordion-container\", \"js-hy-accordion\"];\n const id = this.accordionid.toLowerCase().replace(/\\W/g, \"-\");\n return (\n <Host>\n <div id={id} class={classAttributes.join(\" \")} data-allow-multiple=\"true\" data-allow-toggle=\"true\">\n <slot></slot>\n </div>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"accordion-container.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,wtCAAwtC;;MCOzuC,kBAAkB;;;;;;;;;;;;;;EAY7B,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,wBAAwB,EAAE,iBAAiB,CAAC,CAAC;IACtE,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC9D,QACE,EAAC,IAAI,QACH,WAAK,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,yBAAsB,MAAM,uBAAmB,MAAM,IAChG,eAAa,CACT,EACN,cAAQ,EAAE,EAAC,oBAAoB,GAAG,CAC7B,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hy-accordion-container/accordion-container.scss?tag=hy-accordion-container","./src/components/hy-accordion-container/accordion-container.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-accordion-container {\n width: 100%;\n}\n","import {Component, Prop, h, Host} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-accordion-container\",\n styleUrl: \"accordion-container.scss\",\n shadow: false,\n})\nexport class AccordionContainer {\n @Prop() accordionid?: string;\n\n /\n data-allow-toggle\n Allow for each toggle to both open and close individually\n\n data-allow-multiple\n Allow for multiple accordion sections to be expanded at the same time.\n Assumes data-allow-toggle otherwise you would not be able to close any of the accordions\n */\n\n render() {\n const classAttributes = [\"hy-accordion-container\", \"js-hy-accordion\"];\n const id = this.accordionid.toLowerCase().replace(/\\W/g, \"-\");\n return (\n <Host>\n <div id={id} class={classAttributes.join(\" \")} data-allow-multiple=\"true\" data-allow-toggle=\"true\">\n <slot></slot>\n </div>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n"],"version":3}

package/components/accordion-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"accordion-item.js","mappings":"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","names":[],"sources":["./src/components/accordion-item/accordion-item.scss?tag=hy-accordion-item","./src/components/accordion-item/accordion-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-accordion__item {\n margin-bottom: 12px;\n\n &__is-open {\n border: 1px solid var(--grayscale-dark);\n\n .hy-accordion--heading {\n margin: 0 auto;\n\n .hy-accordion--heading__icon {\n transform: rotateX(180deg);\n }\n }\n }\n}\n\n.hy-accordion__item.mini {\n margin-bottom: 1rem;\n margin-top: 1rem;\n}\n.hy-accordion__item__is-open.mini {\n margin-bottom: 0;\n margin-top: 0;\n\n .hy-accordion__item--container {\n border-bottom: 1px solid var(--grayscale-medium-dark);\n border-top: 1px solid var(--grayscale-medium-dark);\n padding-top: 16px;\n padding-bottom: 32px;\n margin-top: -1px;\n transition: padding 0.5s ease-in-out;\n\n @include breakpoint($narrow) {\n padding-top: 28px;\n padding-bottom: 30px;\n }\n @include breakpoint($wide) {\n padding-top: 32px;\n padding-bottom: 40px;\n }\n }\n}\n\n.hy-accordion__item.hy-accordion__item__is-open.mini {\n background-color: var(--grayscale-white);\n border: none;\n box-shadow: 0 -10px 10px -10px rgba(0, 49, 70, 0.05);\n}\n\n.hy-accordion--heading {\n justify-content: flex-start;\n letter-spacing: -0.69px;\n line-height: 28px;\n margin: 0 auto;\n transition: all 0.25s ease-in-out;\n width: 100%;\n\n .hy-accordion__link {\n text-decoration: none;\n &:hover {\n text-decoration: none;\n }\n }\n\n .hy-accordion__button {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n align-items: flex-start;\n background-color: var(--grayscale-background-box);\n border: none;\n color: var(--brand-main-nearly-black);\n display: flex;\n flex-direction: row;\n font-family: var(--main-font-family);\n height: 100%;\n justify-content: flex-start;\n letter-spacing: -0.45px;\n padding: 13px 20px 13px 16px;\n transition: all 0.35s ease-in;\n width: 100%;\n\n &:hover {\n cursor: pointer;\n }\n\n @include breakpoint($narrow) {\n padding: 1rem 2rem 1rem 1.25rem;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(20px, 24px);\n letter-spacing: -0.5px;\n }\n\n &--large {\n @include breakpoint($extrawide) {\n @include font-size(20px, 24px);\n letter-spacing: -0.5px;\n }\n\n .hy-accordion--heading__icon svg {\n @include breakpoint($extrawide) {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n span {\n text-align: left;\n }\n\n // When accordion item is open.\n &[aria-expanded=\"true\"] {\n background: none;\n position: relative;\n\n &:after {\n background-color: var(--grayscale-medium-dark);\n bottom: 0;\n content: \"\";\n height: 1px;\n left: 16px;\n position: absolute;\n right: 20px;\n }\n }\n\n * {\n pointer-events: none;\n }\n }\n\n .hy-accordion--heading__icon {\n align-items: center;\n display: inline-flex;\n height: 22px; // Same as text line-height.\n margin-right: 8px;\n z-index: 0;\n\n svg {\n fill: var(--brand-main);\n\n @include breakpoint($narrow) {\n height: 18px;\n width: 18px;\n }\n\n @include breakpoint($xlarge) {\n height: 20px;\n width: 20px;\n }\n }\n }\n}\n\n.hy-accordion--heading.mini {\n // accordion clickable header\n .hy-accordion__button {\n @include font-size(18px, 22px);\n background-color: var(--grayscale-white);\n color: var(--link-blue);\n letter-spacing: -0.56px;\n padding: 0;\n\n @include breakpoint($narrow) {\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n padding: 0;\n }\n\n &[aria-expanded=\"true\"] {\n color: var(--grayscale-black);\n margin-bottom: 20px;\n\n @include breakpoint($narrow) {\n margin-bottom: 28px;\n }\n\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n }\n }\n\n //accordion arrow\n .hy-accordion--heading__icon {\n margin-right: 0.5rem;\n z-index: 0;\n\n @include breakpoint($narrow) {\n margin-right: 10px;\n }\n\n svg {\n fill: var(--brand-main-light);\n height: 14px;\n width: 14px;\n @include breakpoint($narrow) {\n height: 16px;\n width: 16px;\n }\n }\n }\n}\n\n.hy-accordion__content {\n display: block;\n height: 0;\n padding: 0;\n overflow: hidden;\n transition: all 0.25s ease-in-out;\n\n &--inner-wrapper {\n display: block;\n padding: 16px 12px;\n\n @include breakpoint($narrow) {\n padding: 15px 16px;\n }\n\n @include breakpoint($wide) {\n padding: 16px;\n }\n\n @include breakpoint($extrawide) {\n // without sidebar\n &--large {\n padding: 24px 20px;\n }\n }\n\n @include breakpoint($xlarge) {\n padding: 24px 20px;\n }\n\n &--mini {\n padding: 0;\n .course-heading {\n h4 {\n padding-top: 0 !important;\n }\n }\n }\n }\n}\n","import {Component, Listen, Prop, State, Element, h} from \"@stencil/core\";\nimport {AccordionVariants} from \"../../utils/utils\";\n\nlet keys = {\n enter: \"Enter\", //13\n tab: \"Tab\", //9\n pageUp: \"PageUp\", //33\n pageDown: \"PageDown\", //34\n arrowUp: \"ArrowUp\", // 38\n arrowDown: \"ArrowDown\", //40\n home: \"Home\", //36\n end: \"End\", //35\n};\n\n@Component({\n tag: \"hy-accordion-item\",\n styleUrl: \"accordion-item.scss\",\n shadow: false,\n})\nexport class AccordionItem {\n @Element() el: HTMLElement;\n @Prop() accordiontitle?: string;\n @Prop() variant: AccordionVariants = AccordionVariants.default;\n @Prop() headerstyle: string = \"common\";\n @Prop() showOpen: boolean = false;\n @State() ready: boolean = false;\n\n componentDidLoad() {\n this.ready = true;\n\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 componentDidRender() {\n if (window.location.hash) {\n this.expandPanelByAnchor(window.location.hash);\n }\n\n document.querySelectorAll(\".hy-accordion__content\").forEach(function (accordion) {\n let showOpen = accordion.classList.contains(\"open\");\n let element = accordion as HTMLElement;\n if (showOpen) {\n element.style.display = \"block\";\n element.style.height = element.scrollHeight + \"px\";\n } else {\n element.style.height = 0 + \"px\";\n element.style.display = \"none\";\n }\n });\n }\n\n @Listen(\"hashchange\", {target: \"window\"})\n onHashChange() {\n if (window.location.hash) {\n this.expandPanelByAnchor(window.location.hash);\n }\n }\n\n @Listen(\"keydown\")\n handleKeyDown(event: KeyboardEvent) {\n const containerId = this.el.parentElement.id;\n let accordion = document.querySelectorAll(`#${containerId}`)[0];\n\n const triggers = Array.prototype.slice.call(accordion.querySelectorAll(\".hy-accordion__button\"));\n let target = event.target as HTMLButtonElement;\n const key = event.code;\n\n const ctrlModifier = event.ctrlKey && [keys.pageDown, keys.pageUp].includes(key); //key.match(/33\|34/);\n\n if (target.classList.contains(\"hy-accordion__button\")) {\n // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations\n if ([keys.arrowDown, keys.arrowUp].includes(key) \|\| ctrlModifier) {\n const index = triggers.indexOf(target);\n const direction = [keys.arrowDown, keys.pageDown].includes(key) ? 1 : -1;\n const length = triggers.length;\n const newIndex = (index + length + direction) % length;\n triggers[newIndex].focus();\n\n event.preventDefault();\n } else if ([keys.home, keys.end].includes(key)) {\n switch (key) {\n // Go to first accordion\n case keys.home:\n triggers[0].focus();\n break;\n // Go to last accordion\n case keys.end:\n triggers[triggers.length - 1].focus();\n break;\n }\n event.preventDefault();\n }\n }\n }\n\n @Listen(\"click\")\n handleClick(event) {\n const target = event.target as HTMLTextAreaElement;\n const accordionContainer = this.el.parentElement;\n const allowMultiple = accordionContainer.hasAttribute(\"data-allow-multiple\");\n const allowToggle = allowMultiple ? allowMultiple : accordionContainer.hasAttribute(\"data-allow-toggle\");\n\n if (target && target.tagName.toLowerCase() === \"button\") {\n let targetParent = target.closest(\".hy-accordion__item\");\n let targetContent = targetParent.getElementsByClassName(\"hy-accordion__content\")[0];\n const isExpanded = target.getAttribute(\"aria-expanded\") === \"true\";\n const activeButtonElement = accordionContainer.querySelector('[aria-expanded=\"true\"]');\n\n if (!allowMultiple && activeButtonElement && activeButtonElement !== target) {\n activeButtonElement.setAttribute(\"aria-expanded\", \"false\");\n this.collapseSection(targetContent);\n if (targetParent.classList.contains(\"hy-accordion__item__is-open\")) {\n targetParent.classList.remove(\"hy-accordion__item__is-open\");\n }\n\n accordionContainer\n .querySelector(`#${activeButtonElement.getAttribute(\"aria-controls\")}`)\n .setAttribute(\"aria-hidden\", \"true\");\n\n if (!allowToggle) {\n activeButtonElement.removeAttribute(\"aria-disabled\");\n }\n }\n\n if (!isExpanded) {\n this.expandSection(targetContent);\n target.setAttribute(\"aria-expanded\", \"true\");\n targetParent.classList.add(\"hy-accordion__item__is-open\");\n\n accordionContainer\n .querySelector(`#${target.getAttribute(\"aria-controls\")}`)\n .setAttribute(\"aria-hidden\", \"false\");\n\n if (!allowToggle) {\n target.setAttribute(\"aria-disabled\", \"true\");\n }\n } else if (allowToggle && isExpanded) {\n target.setAttribute(\"aria-expanded\", \"false\");\n\n this.collapseSection(targetContent);\n\n if (targetParent.classList.contains(\"hy-accordion__item__is-open\")) {\n targetParent.classList.remove(\"hy-accordion__item__is-open\");\n }\n\n accordionContainer\n .querySelector(`#${target.getAttribute(\"aria-controls\")}`)\n .setAttribute(\"aria-hidden\", \"true\");\n }\n\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n expandPanelByAnchor(anchor) {\n setTimeout(() => {\n if (anchor.length > 0) {\n anchor = anchor.substr(1);\n let target = document.querySelectorAll(`[id=${anchor}]`)[0];\n if (target && target.classList.contains(\"hy-accordion__button\")) {\n let targetParent = target.closest(\".hy-accordion__item\");\n\n let targetContent = targetParent.querySelectorAll(\".hy-accordion__content\")[0];\n\n this.expandSection(targetContent);\n target.setAttribute(\"aria-expanded\", \"true\");\n targetParent.classList.add(\"hy-accordion__item__is-open\");\n\n const targetElementRect = target.getBoundingClientRect();\n window.scrollTo({top: window.scrollY + targetElementRect.top - 200, behavior: \"smooth\"});\n\n const containerId = targetParent.parentElement.parentElement.id;\n\n if (containerId.length > 0) {\n let accordion = document.querySelectorAll(`#${containerId}`)[0];\n accordion.querySelector(`#${target.getAttribute(\"aria-controls\")}`).setAttribute(\"aria-hidden\", \"false\");\n }\n }\n }\n }, 200);\n }\n\n collapseSection(element) {\n element.style.height = 0 + \"px\";\n element.setAttribute(\"data-collapsed\", \"true\");\n setTimeout(() => {\n element.style.display = \"none\";\n }, 250);\n }\n\n expandSection(element) {\n element.style.display = \"block\";\n element.style.height = element.scrollHeight + \"px\";\n element.setAttribute(\"data-collapsed\", \"false\");\n }\n\n render() {\n const containerId = this.el.parentElement.id;\n\n if (this.ready && containerId.length > 0) {\n document.querySelectorAll(`#${containerId}`).forEach(function (accordion) {\n if (accordion) {\n accordion.querySelectorAll(\".hy-accordion__button\").forEach(function (trigger) {\n trigger.addEventListener(\"focus\", function () {\n trigger.classList.add(\"focus\");\n });\n trigger.addEventListener(\"blur\", function () {\n trigger.classList.remove(\"focus\");\n });\n });\n }\n });\n }\n\n const classIsOpen = this.showOpen ? \"hy-accordion__item__is-open\" : \"\";\n const classContentIsOpen = this.showOpen ? \"open\" : \"\";\n const classAttributes = [\"hy-accordion__item\", this.variant, classIsOpen].join(\" \");\n const classInnerWrapper = [\"hy-accordion__item--container\", this.variant].join(\" \");\n const classHeadingAttributes = [\"hy-accordion--heading\", this.variant].join(\" \");\n const classContentAttributes = [\n \"hy-accordion__content\",\n `hy-accordion__content--${this.variant}`,\n this.variant,\n classContentIsOpen,\n ].join(\" \");\n const classContentInnerWrapper = [\n \"hy-accordion__content--inner-wrapper\",\n `hy-accordion__content--inner-wrapper--${this.headerstyle}`,\n `hy-accordion__content--inner-wrapper--${this.variant}`,\n ].join(\" \");\n\n const titleAsId = this.accordiontitle.toLowerCase().replace(/\\W/g, \"-\");\n const accordionItemHref = \"#\" + titleAsId + \"--title\";\n\n const ariaExpanded = this.showOpen ? \"true\" : \"false\";\n const ariaHidden = this.showOpen ? \"false\" : \"true\";\n const dataCollapsed = this.showOpen ? \"false\" : \"true\";\n\n return (\n <div class={classAttributes}>\n <div class={classInnerWrapper}>\n <h3 class={classHeadingAttributes}>\n <a href={accordionItemHref} class=\"hy-accordion__link\" tabindex=\"-1\">\n <button\n aria-expanded={ariaExpanded}\n aria-controls={`${titleAsId}--content`}\n class={`hy-accordion__button hy-accordion__button--${this.headerstyle}`}\n id={`${titleAsId}--title`}\n >\n <span class=\"hy-accordion--heading__icon\">\n <hy-icon icon={\"hy-icon-caret-down\"} size={16} />\n </span>\n <span>{this.accordiontitle}</span>\n </button>\n </a>\n </h3>\n <div\n aria-labelledBy={`${titleAsId}--title`}\n class={classContentAttributes}\n id={`${titleAsId}--content`}\n role=\"region\"\n aria-hidden={ariaHidden}\n data-collapsed={dataCollapsed}\n style={{display: \"none\"}}\n >\n <div class={classContentInnerWrapper}>\n <slot></slot>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"accordion-item.js","mappings":"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","names":[],"sources":["./src/components/hy-accordion-item/accordion-item.scss?tag=hy-accordion-item","./src/components/hy-accordion-item/accordion-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-accordion__item {\n margin-bottom: 12px;\n\n &__is-open {\n border: 1px solid var(--grayscale-dark);\n\n .hy-accordion--heading {\n margin: 0 auto;\n\n .hy-accordion--heading__icon {\n transform: rotateX(180deg);\n }\n }\n }\n}\n\n.hy-accordion__item.mini {\n margin-bottom: 1rem;\n margin-top: 1rem;\n}\n.hy-accordion__item__is-open.mini {\n margin-bottom: 0;\n margin-top: 0;\n\n .hy-accordion__item--container {\n border-bottom: 1px solid var(--grayscale-medium-dark);\n border-top: 1px solid var(--grayscale-medium-dark);\n padding-top: 16px;\n padding-bottom: 32px;\n margin-top: -1px;\n transition: padding 0.5s ease-in-out;\n\n @include breakpoint($narrow) {\n padding-top: 28px;\n padding-bottom: 30px;\n }\n @include breakpoint($wide) {\n padding-top: 32px;\n padding-bottom: 40px;\n }\n }\n}\n\n.hy-accordion__item.hy-accordion__item__is-open.mini {\n background-color: var(--grayscale-white);\n border: none;\n box-shadow: 0 -10px 10px -10px rgba(0, 49, 70, 0.05);\n}\n\n.hy-accordion--heading {\n justify-content: flex-start;\n letter-spacing: -0.69px;\n line-height: 28px;\n margin: 0 auto;\n transition: all 0.25s ease-in-out;\n width: 100%;\n\n .hy-accordion__link {\n text-decoration: none;\n &:hover {\n text-decoration: none;\n }\n }\n\n .hy-accordion__button {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n align-items: flex-start;\n background-color: var(--grayscale-background-box);\n border: none;\n color: var(--brand-main-nearly-black);\n display: flex;\n flex-direction: row;\n font-family: var(--main-font-family);\n height: 100%;\n justify-content: flex-start;\n letter-spacing: -0.45px;\n padding: 13px 20px 13px 16px;\n transition: all 0.35s ease-in;\n width: 100%;\n\n &:hover {\n cursor: pointer;\n }\n\n @include breakpoint($narrow) {\n padding: 1rem 2rem 1rem 1.25rem;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(20px, 24px);\n letter-spacing: -0.5px;\n }\n\n &--large {\n @include breakpoint($extrawide) {\n @include font-size(20px, 24px);\n letter-spacing: -0.5px;\n }\n\n .hy-accordion--heading__icon svg {\n @include breakpoint($extrawide) {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n span {\n text-align: left;\n }\n\n // When accordion item is open.\n &[aria-expanded=\"true\"] {\n background: none;\n position: relative;\n\n &:after {\n background-color: var(--grayscale-medium-dark);\n bottom: 0;\n content: \"\";\n height: 1px;\n left: 16px;\n position: absolute;\n right: 20px;\n }\n }\n\n * {\n pointer-events: none;\n }\n }\n\n .hy-accordion--heading__icon {\n align-items: center;\n display: inline-flex;\n height: 22px; // Same as text line-height.\n margin-right: 8px;\n z-index: 0;\n\n svg {\n fill: var(--brand-main);\n\n @include breakpoint($narrow) {\n height: 18px;\n width: 18px;\n }\n\n @include breakpoint($xlarge) {\n height: 20px;\n width: 20px;\n }\n }\n }\n}\n\n.hy-accordion--heading.mini {\n // accordion clickable header\n .hy-accordion__button {\n @include font-size(18px, 22px);\n background-color: var(--grayscale-white);\n color: var(--link-blue);\n letter-spacing: -0.56px;\n padding: 0;\n\n @include breakpoint($narrow) {\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n padding: 0;\n }\n\n &[aria-expanded=\"true\"] {\n color: var(--grayscale-black);\n margin-bottom: 20px;\n\n @include breakpoint($narrow) {\n margin-bottom: 28px;\n }\n\n @include breakpoint($wide) {\n margin-bottom: 32px;\n }\n }\n }\n\n //accordion arrow\n .hy-accordion--heading__icon {\n margin-right: 0.5rem;\n z-index: 0;\n\n @include breakpoint($narrow) {\n margin-right: 10px;\n }\n\n svg {\n fill: var(--brand-main-light);\n height: 14px;\n width: 14px;\n @include breakpoint($narrow) {\n height: 16px;\n width: 16px;\n }\n }\n }\n}\n\n.hy-accordion__content {\n display: block;\n height: 0;\n padding: 0;\n overflow: hidden;\n transition: all 0.25s ease-in-out;\n\n &--inner-wrapper {\n display: block;\n padding: 16px 12px;\n\n @include breakpoint($narrow) {\n padding: 15px 16px;\n }\n\n @include breakpoint($wide) {\n padding: 16px;\n }\n\n @include breakpoint($extrawide) {\n // without sidebar\n &--large {\n padding: 24px 20px;\n }\n }\n\n @include breakpoint($xlarge) {\n padding: 24px 20px;\n }\n\n &--mini {\n padding: 0;\n .course-heading {\n h4 {\n padding-top: 0 !important;\n }\n }\n }\n }\n}\n","import {Component, Listen, Prop, State, Element, h} from \"@stencil/core\";\nimport {AccordionVariants} from \"../../utils/utils\";\n\nlet keys = {\n enter: \"Enter\", //13\n tab: \"Tab\", //9\n pageUp: \"PageUp\", //33\n pageDown: \"PageDown\", //34\n arrowUp: \"ArrowUp\", // 38\n arrowDown: \"ArrowDown\", //40\n home: \"Home\", //36\n end: \"End\", //35\n};\n\n@Component({\n tag: \"hy-accordion-item\",\n styleUrl: \"accordion-item.scss\",\n shadow: false,\n})\nexport class AccordionItem {\n @Element() el: HTMLElement;\n @Prop() accordiontitle?: string;\n @Prop() variant: AccordionVariants = AccordionVariants.default;\n @Prop() headerstyle: string = \"common\";\n @Prop() showOpen: boolean = false;\n @State() ready: boolean = false;\n\n componentDidLoad() {\n this.ready = true;\n\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 componentDidRender() {\n if (window.location.hash) {\n this.expandPanelByAnchor(window.location.hash);\n }\n\n document.querySelectorAll(\".hy-accordion__content\").forEach(function (accordion) {\n let showOpen = accordion.classList.contains(\"open\");\n let element = accordion as HTMLElement;\n if (showOpen) {\n element.style.display = \"block\";\n element.style.height = element.scrollHeight + \"px\";\n } else {\n element.style.height = 0 + \"px\";\n element.style.display = \"none\";\n }\n });\n }\n\n @Listen(\"hashchange\", {target: \"window\"})\n onHashChange() {\n if (window.location.hash) {\n this.expandPanelByAnchor(window.location.hash);\n }\n }\n\n @Listen(\"keydown\")\n handleKeyDown(event: KeyboardEvent) {\n const containerId = this.el.parentElement.id;\n let accordion = document.querySelectorAll(`#${containerId}`)[0];\n\n const triggers = Array.prototype.slice.call(accordion.querySelectorAll(\".hy-accordion__button\"));\n let target = event.target as HTMLButtonElement;\n const key = event.code;\n\n const ctrlModifier = event.ctrlKey && [keys.pageDown, keys.pageUp].includes(key); //key.match(/33\|34/);\n\n if (target.classList.contains(\"hy-accordion__button\")) {\n // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations\n if ([keys.arrowDown, keys.arrowUp].includes(key) \|\| ctrlModifier) {\n const index = triggers.indexOf(target);\n const direction = [keys.arrowDown, keys.pageDown].includes(key) ? 1 : -1;\n const length = triggers.length;\n const newIndex = (index + length + direction) % length;\n triggers[newIndex].focus();\n\n event.preventDefault();\n } else if ([keys.home, keys.end].includes(key)) {\n switch (key) {\n // Go to first accordion\n case keys.home:\n triggers[0].focus();\n break;\n // Go to last accordion\n case keys.end:\n triggers[triggers.length - 1].focus();\n break;\n }\n event.preventDefault();\n }\n }\n }\n\n @Listen(\"click\")\n handleClick(event) {\n const target = event.target as HTMLTextAreaElement;\n const accordionContainer = this.el.parentElement;\n const allowMultiple = accordionContainer.hasAttribute(\"data-allow-multiple\");\n const allowToggle = allowMultiple ? allowMultiple : accordionContainer.hasAttribute(\"data-allow-toggle\");\n\n if (target && target.tagName.toLowerCase() === \"button\") {\n let targetParent = target.closest(\".hy-accordion__item\");\n let targetContent = targetParent.getElementsByClassName(\"hy-accordion__content\")[0];\n const isExpanded = target.getAttribute(\"aria-expanded\") === \"true\";\n const activeButtonElement = accordionContainer.querySelector('[aria-expanded=\"true\"]');\n\n if (!allowMultiple && activeButtonElement && activeButtonElement !== target) {\n activeButtonElement.setAttribute(\"aria-expanded\", \"false\");\n this.collapseSection(targetContent);\n if (targetParent.classList.contains(\"hy-accordion__item__is-open\")) {\n targetParent.classList.remove(\"hy-accordion__item__is-open\");\n }\n\n accordionContainer\n .querySelector(`#${activeButtonElement.getAttribute(\"aria-controls\")}`)\n .setAttribute(\"aria-hidden\", \"true\");\n\n if (!allowToggle) {\n activeButtonElement.removeAttribute(\"aria-disabled\");\n }\n }\n\n if (!isExpanded) {\n this.expandSection(targetContent);\n target.setAttribute(\"aria-expanded\", \"true\");\n targetParent.classList.add(\"hy-accordion__item__is-open\");\n\n accordionContainer\n .querySelector(`#${target.getAttribute(\"aria-controls\")}`)\n .setAttribute(\"aria-hidden\", \"false\");\n\n if (!allowToggle) {\n target.setAttribute(\"aria-disabled\", \"true\");\n }\n } else if (allowToggle && isExpanded) {\n target.setAttribute(\"aria-expanded\", \"false\");\n\n this.collapseSection(targetContent);\n\n if (targetParent.classList.contains(\"hy-accordion__item__is-open\")) {\n targetParent.classList.remove(\"hy-accordion__item__is-open\");\n }\n\n accordionContainer\n .querySelector(`#${target.getAttribute(\"aria-controls\")}`)\n .setAttribute(\"aria-hidden\", \"true\");\n }\n\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n expandPanelByAnchor(anchor) {\n setTimeout(() => {\n if (anchor.length > 0) {\n anchor = anchor.substr(1);\n let target = document.querySelectorAll(`[id=${anchor}]`)[0];\n if (target && target.classList.contains(\"hy-accordion__button\")) {\n let targetParent = target.closest(\".hy-accordion__item\");\n\n let targetContent = targetParent.querySelectorAll(\".hy-accordion__content\")[0];\n\n this.expandSection(targetContent);\n target.setAttribute(\"aria-expanded\", \"true\");\n targetParent.classList.add(\"hy-accordion__item__is-open\");\n\n const targetElementRect = target.getBoundingClientRect();\n window.scrollTo({top: window.scrollY + targetElementRect.top - 200, behavior: \"smooth\"});\n\n const containerId = targetParent.parentElement.parentElement.id;\n\n if (containerId.length > 0) {\n let accordion = document.querySelectorAll(`#${containerId}`)[0];\n accordion.querySelector(`#${target.getAttribute(\"aria-controls\")}`).setAttribute(\"aria-hidden\", \"false\");\n }\n }\n }\n }, 200);\n }\n\n collapseSection(element) {\n element.style.height = 0 + \"px\";\n element.setAttribute(\"data-collapsed\", \"true\");\n setTimeout(() => {\n element.style.display = \"none\";\n }, 250);\n }\n\n expandSection(element) {\n element.style.display = \"block\";\n element.style.height = element.scrollHeight + \"px\";\n element.setAttribute(\"data-collapsed\", \"false\");\n }\n\n render() {\n const containerId = this.el.parentElement.id;\n\n if (this.ready && containerId.length > 0) {\n document.querySelectorAll(`#${containerId}`).forEach(function (accordion) {\n if (accordion) {\n accordion.querySelectorAll(\".hy-accordion__button\").forEach(function (trigger) {\n trigger.addEventListener(\"focus\", function () {\n trigger.classList.add(\"focus\");\n });\n trigger.addEventListener(\"blur\", function () {\n trigger.classList.remove(\"focus\");\n });\n });\n }\n });\n }\n\n const classIsOpen = this.showOpen ? \"hy-accordion__item__is-open\" : \"\";\n const classContentIsOpen = this.showOpen ? \"open\" : \"\";\n const classAttributes = [\"hy-accordion__item\", this.variant, classIsOpen].join(\" \");\n const classInnerWrapper = [\"hy-accordion__item--container\", this.variant].join(\" \");\n const classHeadingAttributes = [\"hy-accordion--heading\", this.variant].join(\" \");\n const classContentAttributes = [\n \"hy-accordion__content\",\n `hy-accordion__content--${this.variant}`,\n this.variant,\n classContentIsOpen,\n ].join(\" \");\n const classContentInnerWrapper = [\n \"hy-accordion__content--inner-wrapper\",\n `hy-accordion__content--inner-wrapper--${this.headerstyle}`,\n `hy-accordion__content--inner-wrapper--${this.variant}`,\n ].join(\" \");\n\n const titleAsId = this.accordiontitle.toLowerCase().replace(/\\W/g, \"-\");\n const accordionItemHref = \"#\" + titleAsId + \"--title\";\n\n const ariaExpanded = this.showOpen ? \"true\" : \"false\";\n const ariaHidden = this.showOpen ? \"false\" : \"true\";\n const dataCollapsed = this.showOpen ? \"false\" : \"true\";\n\n return (\n <div class={classAttributes}>\n <div class={classInnerWrapper}>\n <h3 class={classHeadingAttributes}>\n <a href={accordionItemHref} class=\"hy-accordion__link\" tabindex=\"-1\">\n <button\n aria-expanded={ariaExpanded}\n aria-controls={`${titleAsId}--content`}\n class={`hy-accordion__button hy-accordion__button--${this.headerstyle}`}\n id={`${titleAsId}--title`}\n >\n <span class=\"hy-accordion--heading__icon\">\n <hy-icon icon={\"hy-icon-caret-down\"} size={16} />\n </span>\n <span>{this.accordiontitle}</span>\n </button>\n </a>\n </h3>\n <div\n aria-labelledBy={`${titleAsId}--title`}\n class={classContentAttributes}\n id={`${titleAsId}--content`}\n role=\"region\"\n aria-hidden={ariaHidden}\n data-collapsed={dataCollapsed}\n style={{display: \"none\"}}\n >\n <div class={classContentInnerWrapper}>\n <slot></slot>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/components/cta-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cta-button.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,spPAAspP;;MCQ9pP,SAAS;;;;mBACqB,qBAAqB,CAAC,UAAU;uBAC3C,EAAE;sBACF,KAAK;;;sBAGL,KAAK;uBACL,QAAQ;;EAGtC,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpF,MAAM,wBAAwB,GAAG,CAAC,yBAAyB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEvE,MAAM,mBAAmB,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC/C,MAAM,mBAAmB,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpD,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpD,QACE,YAAM,KAAK,EAAE,wBAAwB,IAClC,CAAC,IAAI,CAAC,UAAU,IACf,uBAAe,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,IACjF,YAAM,KAAK,EAAE,mBAAmB,IAAG,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,eAAQ,GAAG,IAAI,CAAC,WAAW,CAAQ,EACtG,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,GAAI,CAC7C,CACL,KAEJ,4BAAoB,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,eAAe,IACtD,YAAM,KAAK,EAAE,mBAAmB,IAAG,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,eAAQ,GAAG,IAAI,CAAC,WAAW,CAAQ,EACtG,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,GAAI,CAC7C,CACA,CACV,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/cta-button/cta-button.scss?tag=hy-cta-button","./src/components/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"],"version":3}
1	+ {"file":"cta-button.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,spPAAspP;;MCQ9pP,SAAS;;;;mBACqB,qBAAqB,CAAC,UAAU;uBAC3C,EAAE;sBACF,KAAK;;;sBAGL,KAAK;uBACL,QAAQ;;EAGtC,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpF,MAAM,wBAAwB,GAAG,CAAC,yBAAyB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEvE,MAAM,mBAAmB,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC/C,MAAM,mBAAmB,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpD,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpD,QACE,YAAM,KAAK,EAAE,wBAAwB,IAClC,CAAC,IAAI,CAAC,UAAU,IACf,uBAAe,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,IACjF,YAAM,KAAK,EAAE,mBAAmB,IAAG,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,eAAQ,GAAG,IAAI,CAAC,WAAW,CAAQ,EACtG,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,GAAI,CAC7C,CACL,KAEJ,4BAAoB,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,eAAe,IACtD,YAAM,KAAK,EAAE,mBAAmB,IAAG,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,eAAQ,GAAG,IAAI,CAAC,WAAW,CAAQ,EACtG,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,GAAI,CAC7C,CACA,CACV,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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"],"version":3}

package/components/cta-link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cta-link.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,qkEAAqkE;;MCQ3kE,OAAO;;;;mBAEiB,eAAe,CAAC,OAAO;uBAC5B,EAAE;;;sBAGF,KAAK;;EAEnC,MAAM;IACJ,MAAM,mBAAmB,GAAG,CAAC,mBAAmB,EAAE,IAAI,CAAC,UAAU,IAAI,6BAA6B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9G,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpD,QACE,uBAAe,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,4BAA4B,IAAI,CAAC,OAAO,EAAE,IAC3G,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC,QAAQ,KACvC,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,wBAAwB,EAAE,IAAI,EAAE,EAAE,GAAI,CAChD,CACR,EACD,gBAAO,IAAI,CAAC,WAAW,CAAQ,EAC9B,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,KACtC,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,wBAAwB,EAAE,IAAI,EAAE,EAAE,GAAI,CAChD,CACR,CACC,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/cta-link/cta-link.scss?tag=hy-cta-link","./src/components/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"],"version":3}
1	+ {"file":"cta-link.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,qkEAAqkE;;MCQ3kE,OAAO;;;;mBAEiB,eAAe,CAAC,OAAO;uBAC5B,EAAE;;;sBAGF,KAAK;;EAEnC,MAAM;IACJ,MAAM,mBAAmB,GAAG,CAAC,mBAAmB,EAAE,IAAI,CAAC,UAAU,IAAI,6BAA6B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9G,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpD,QACE,uBAAe,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,4BAA4B,IAAI,CAAC,OAAO,EAAE,IAC3G,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC,QAAQ,KACvC,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,wBAAwB,EAAE,IAAI,EAAE,EAAE,GAAI,CAChD,CACR,EACD,gBAAO,IAAI,CAAC,WAAW,CAAQ,EAC9B,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,KACtC,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,wBAAwB,EAAE,IAAI,EAAE,EAAE,GAAI,CAChD,CACR,CACC,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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"],"version":3}

package/components/heading.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"heading.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,wtVAAwtV;;ACAlvV,MAAM,gBAAgB,GAAG,oyVAAoyV;;MCShzV,OAAO;;;;mBAIgB,cAAc,CAAC,OAAc;oBACnC,KAAK;mBAIS,sBAAsB,CAAC,OAAc;oBACnD,KAAK;uBACH,QAAQ;;uBAGN,IAAI;;EAEpC,gBAAgB;IACd,IAAI,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5C,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;QACjD,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;OAC5B;KACF;IACD,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,0BAA0B,CAAC,EAAE;MACxE,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;KAC1B;GACF;EAED,MAAM;IACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,IAAI,cAAc,CAAC;IACzD,MAAM,eAAe,GAAG;MACtB,YAAY;MACZ,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;MAC/B,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,EAAE;MACzC,IAAI,CAAC,QAAQ,GAAG,uBAAuB,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE;MAC9D,eAAe,IAAI,CAAC,OAAO,EAAE;MAC7B,eAAe,IAAI,CAAC,WAAW,EAAE;MACjC,eAAe,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,WAAW,EAAE;KACnD,CAAC;IAEF,MAAM,sBAAsB,GAAG,CAAC,eAAe,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAElF,MAAM,qBAAqB,GAAG;MAC5B,uBAAuB;MACvB,0BAA0B,IAAI,CAAC,OAAO,EAAE;MACxC,0BAA0B,IAAI,CAAC,WAAW,EAAE;KAC7C,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,QACE,EAAC,IAAI,QACF,iBAAiB,IAChB;MACE,WAAK,KAAK,EAAE,qBAAqB,IAC9B,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,WAAW,IACvC,EAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAiB,KAE/F,EAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IAC5C,eAAQ,CACK,CAChB,EAED,YAAM,KAAK,EAAE,sBAAsB,GAAS,CACxC;KACP,KAED,WAAK,KAAK,EAAE,qBAAqB,IAC9B,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,WAAW,IACvC,EAAC,cAAc,CAAC,OAAO,IAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IACtD,YAAM,SAAS,EAAE,IAAI,CAAC,cAAc,GAAS,CACtB,KAEzB,EAAC,cAAc,CAAC,OAAO,IAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IACtD,gBACE,eAAQ,CACH,CACgB,CAC1B,EAED,YAAM,KAAK,EAAE,sBAAsB,GAAS,CACxC,CACP,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/heading/heading.scss?tag=hy-heading&mode=default","./src/components/heading/heading-fw.scss?tag=hy-heading&mode=wide","./src/components/heading/heading.tsx"],"sourcesContent":[":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"],"version":3}
1	+ {"file":"heading.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,wtVAAwtV;;ACAlvV,MAAM,gBAAgB,GAAG,oyVAAoyV;;MCShzV,OAAO;;;;mBAIgB,cAAc,CAAC,OAAc;oBACnC,KAAK;mBAIS,sBAAsB,CAAC,OAAc;oBACnD,KAAK;uBACH,QAAQ;;uBAGN,IAAI;;EAEpC,gBAAgB;IACd,IAAI,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5C,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;QACjD,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;OAC5B;KACF;IACD,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,0BAA0B,CAAC,EAAE;MACxE,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;KAC1B;GACF;EAED,MAAM;IACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,IAAI,cAAc,CAAC;IACzD,MAAM,eAAe,GAAG;MACtB,YAAY;MACZ,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;MAC/B,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,EAAE;MACzC,IAAI,CAAC,QAAQ,GAAG,uBAAuB,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE;MAC9D,eAAe,IAAI,CAAC,OAAO,EAAE;MAC7B,eAAe,IAAI,CAAC,WAAW,EAAE;MACjC,eAAe,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,WAAW,EAAE;KACnD,CAAC;IAEF,MAAM,sBAAsB,GAAG,CAAC,eAAe,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAElF,MAAM,qBAAqB,GAAG;MAC5B,uBAAuB;MACvB,0BAA0B,IAAI,CAAC,OAAO,EAAE;MACxC,0BAA0B,IAAI,CAAC,WAAW,EAAE;KAC7C,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,QACE,EAAC,IAAI,QACF,iBAAiB,IAChB;MACE,WAAK,KAAK,EAAE,qBAAqB,IAC9B,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,WAAW,IACvC,EAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAiB,KAE/F,EAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IAC5C,eAAQ,CACK,CAChB,EAED,YAAM,KAAK,EAAE,sBAAsB,GAAS,CACxC;KACP,KAED,WAAK,KAAK,EAAE,qBAAqB,IAC9B,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,WAAW,IACvC,EAAC,cAAc,CAAC,OAAO,IAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IACtD,YAAM,SAAS,EAAE,IAAI,CAAC,cAAc,GAAS,CACtB,KAEzB,EAAC,cAAc,CAAC,OAAO,IAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IACtD,gBACE,eAAQ,CACH,CACgB,CAC1B,EAED,YAAM,KAAK,EAAE,sBAAsB,GAAS,CACxC,CACP,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./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"],"sourcesContent":[":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"],"version":3}

package/components/hy-adjacent-image-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"hy-adjacent-image-text.js","mappings":"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","names":[],"sources":["./src/components/adjacent-image-text/adjacent-image-text.scss?tag=hy-adjacent-image-text","./src/components/adjacent-image-text/adjacent-image-text.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n$margin-mobile: 16px;\n$margin-narrow: 32px;\n\n.hy-adjacent-image-text {\n background: var(--grayscale-background-box);\n display: flex;\n flex-direction: column;\n position: relative;\n\n @include breakpoint($narrow) {\n background: transparent;\n }\n\n @include breakpoint($wide) {\n background: var(--grayscale-background-box);\n flex-direction: row;\n }\n}\n\n.hy-adjacent-image-text__image-container {\n display: flex;\n flex: 1;\n justify-content: stretch;\n margin-bottom: 0;\n min-height: 10rem;\n position: relative;\n padding-bottom: $margin-narrow;\n\n @include breakpoint($narrow) {\n padding-bottom: 0;\n }\n\n @include breakpoint($wide) {\n flex-basis: 50%;\n margin: 0 calc(#{var(--gutter-wide)} * -1) 0 0;\n z-index: 1;\n }\n\n @include breakpoint($extrawide) {\n margin: 0 calc(#{var(--gutter-extrawide)} * -1) 0 0;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n width: 100%;\n\n @include breakpoint($narrow) {\n max-height: 420px;\n min-height: 160px;\n }\n\n @include breakpoint($wide) {\n max-height: 100%;\n }\n }\n}\n\n.hy-adjacent-image-text__text-container {\n background: var(--grayscale-background-box);\n border-image: none;\n display: flex;\n flex: 1;\n flex-direction: column;\n -webkit-border-image: none;\n -moz-border-image: none;\n -o-border-image: none;\n\n @include breakpoint($narrow) {\n border-left: 1px solid transparent;\n border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;\n margin-left: 66px;\n margin-top: -63px;\n padding-top: 38px;\n position: relative;\n z-index: 98;\n -webkit-border-image: -webkit-linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;\n -moz-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;\n -o-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;\n }\n\n @include breakpoint($wide) {\n border-image: none;\n border-left: none;\n flex-basis: 50%;\n margin-left: 0;\n margin-top: 0;\n padding-top: 0;\n z-index: 0;\n -webkit-border-image: none;\n -moz-border-image: none;\n -o-border-image: none;\n }\n}\n\n.hy-adjacent-image-text__text-container__links-wrapper {\n padding-left: 1rem;\n @include breakpoint($narrow) {\n padding-left: 50px;\n }\n @include breakpoint($wide) {\n margin: 0 0 0 14%;\n padding: 0;\n }\n}\n\n.hy-adjacent-image-text__text-container__info-wrapper {\n padding-left: 0;\n padding-right: 0;\n\n @include breakpoint($narrow) {\n padding-left: 50px;\n }\n\n @include breakpoint($wide) {\n margin: 0 7% 0 14%;\n padding: 0;\n }\n}\n\n.hy-adjacent-image-text__text-container__title {\n @include font-size(22px, 28px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.69px;\n margin-top: 32px;\n padding: 0 1rem;\n\n @include breakpoint($narrow) {\n @include font-size(32px, 40px);\n letter-spacing: -1px;\n margin-top: 41px;\n padding: 0;\n }\n}\n\n.hy-adjacent-image-text__text-container__description {\n @include font-size(15px, 22px);\n @include font-weight($regular);\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n margin: 20px 0 32px 0;\n padding: 0 1rem;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n margin: 20px 0 61px 0;\n padding: 0;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px);\n margin-bottom: 40px;\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(17px, 26px);\n }\n }\n}\n\n.hy-adjacent-image-text__text-container__link {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 12px;\n margin-right: -6px;\n}\n\n.hy-adjacent-image-text::after {\n content: \"\";\n clear: both;\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string \| null;\n}\n\nimport {Component, ComponentInterface, Prop, h, Host, Element} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n tag: \"hy-adjacent-image-text\",\n styleUrl: \"adjacent-image-text.scss\",\n shadow: false,\n})\nexport class AdjacentImageText implements ComponentInterface {\n @Element() el: HTMLElement;\n @Prop() headerstyle: string = \"default\";\n @Prop() imageUrl: string = null;\n @Prop() imageAlt: string = \"\";\n @Prop() disableLazy: boolean = false;\n @Prop() textTitle?: string;\n @Prop() textDescription: string = null;\n\n @Prop() mainUrl?: string;\n @Prop() mainUrlTitle?: string;\n @Prop() mainUrlAriaLabel?: string;\n @Prop() mainUrlIsExternal: boolean = false;\n\n @Prop() mainUrl2?: string;\n @Prop() mainUrlTitle2?: string;\n @Prop() mainUrlAriaLabel2?: string;\n @Prop() mainUrlIsExternal2: boolean = false;\n\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] \| string;\n\n async componentWillLoad() {\n this._sourceSet = await jsonParserWorker(this.sourceSet);\n }\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n }\n\n render() {\n const classAttributes = [\"hy-adjacent-image-text\", `hy-adjacent-image-text__${this.headerstyle}`].join(\" \");\n const contentClassAttributes = [\n \"hy-adjacent-image-text__text-container\",\n \"hy-adjacent-image-text__text-container--left\",\n ].join(\" \");\n\n const imageLeftClassAttributes = [\"hy-adjacent-image-text__image-container\"].join(\" \");\n\n const aspectRatioWidth = 6;\n const aspectRatioHeight = 4;\n const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n const aspectRatio = {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n };\n\n return (\n <Host>\n <div class={classAttributes}>\n <div class={imageLeftClassAttributes} style={aspectRatio}>\n {this._sourceSet ? (\n <picture>\n {this._sourceSet.map((item) => (\n <source srcSet={item.src} media={item.media} type={item.type} sizes={item.sizes ? item.sizes : \"\"} />\n ))}\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAlt}\n class=\"hy-image__image\"\n src={this.imageUrl}\n />\n </picture>\n ) : (\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAlt}\n class=\"hy-image__image\"\n src={this.imageUrl}\n />\n )}\n </div>\n <div class={contentClassAttributes}>\n <div class=\"hy-adjacent-image-text__text-container__info-wrapper\">\n <div class=\"hy-adjacent-image-text__text-container__title\">{this.textTitle}</div>\n <p\n class={`hy-adjacent-image-text__text-container__description hy-adjacent-image-text__text-container__description__${this.headerstyle}`}\n >\n {this.textDescription}\n </p>\n </div>\n <div class=\"hy-adjacent-image-text__text-container__links-wrapper\">\n {this.mainUrl && (\n <div class=\"hy-adjacent-image-text__text-container__link\">\n <hy-cta-link\n link-content={this.mainUrlTitle}\n sc-label={this.mainUrlAriaLabel}\n url={this.mainUrl}\n is-external={this.mainUrlIsExternal}\n />\n </div>\n )}\n {this.mainUrl2 && (\n <div class=\"hy-adjacent-image-text__text-container__link\">\n <hy-cta-link\n link-content={this.mainUrlTitle2}\n sc-label={this.mainUrlAriaLabel2}\n url={this.mainUrl2}\n is-external={this.mainUrlIsExternal2}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"hy-adjacent-image-text.js","mappings":"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","names":[],"sources":["./src/components/hy-adjacent-image-text/adjacent-image-text.scss?tag=hy-adjacent-image-text","./src/components/hy-adjacent-image-text/adjacent-image-text.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n$margin-mobile: 16px;\n$margin-narrow: 32px;\n\n.hy-adjacent-image-text {\n background: var(--grayscale-background-box);\n display: flex;\n flex-direction: column;\n position: relative;\n\n @include breakpoint($narrow) {\n background: transparent;\n }\n\n @include breakpoint($wide) {\n background: var(--grayscale-background-box);\n flex-direction: row;\n }\n}\n\n.hy-adjacent-image-text__image-container {\n display: flex;\n flex: 1;\n justify-content: stretch;\n margin-bottom: 0;\n min-height: 10rem;\n position: relative;\n padding-bottom: $margin-narrow;\n\n @include breakpoint($narrow) {\n padding-bottom: 0;\n }\n\n @include breakpoint($wide) {\n flex-basis: 50%;\n margin: 0 calc(#{var(--gutter-wide)} * -1) 0 0;\n z-index: 1;\n }\n\n @include breakpoint($extrawide) {\n margin: 0 calc(#{var(--gutter-extrawide)} * -1) 0 0;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n width: 100%;\n\n @include breakpoint($narrow) {\n max-height: 420px;\n min-height: 160px;\n }\n\n @include breakpoint($wide) {\n max-height: 100%;\n }\n }\n}\n\n.hy-adjacent-image-text__text-container {\n background: var(--grayscale-background-box);\n border-image: none;\n display: flex;\n flex: 1;\n flex-direction: column;\n -webkit-border-image: none;\n -moz-border-image: none;\n -o-border-image: none;\n\n @include breakpoint($narrow) {\n border-left: 1px solid transparent;\n border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;\n margin-left: 66px;\n margin-top: -63px;\n padding-top: 38px;\n position: relative;\n z-index: 98;\n -webkit-border-image: -webkit-linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;\n -moz-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;\n -o-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;\n }\n\n @include breakpoint($wide) {\n border-image: none;\n border-left: none;\n flex-basis: 50%;\n margin-left: 0;\n margin-top: 0;\n padding-top: 0;\n z-index: 0;\n -webkit-border-image: none;\n -moz-border-image: none;\n -o-border-image: none;\n }\n}\n\n.hy-adjacent-image-text__text-container__links-wrapper {\n padding-left: 1rem;\n @include breakpoint($narrow) {\n padding-left: 50px;\n }\n @include breakpoint($wide) {\n margin: 0 0 0 14%;\n padding: 0;\n }\n}\n\n.hy-adjacent-image-text__text-container__info-wrapper {\n padding-left: 0;\n padding-right: 0;\n\n @include breakpoint($narrow) {\n padding-left: 50px;\n }\n\n @include breakpoint($wide) {\n margin: 0 7% 0 14%;\n padding: 0;\n }\n}\n\n.hy-adjacent-image-text__text-container__title {\n @include font-size(22px, 28px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.69px;\n margin-top: 32px;\n padding: 0 1rem;\n\n @include breakpoint($narrow) {\n @include font-size(32px, 40px);\n letter-spacing: -1px;\n margin-top: 41px;\n padding: 0;\n }\n}\n\n.hy-adjacent-image-text__text-container__description {\n @include font-size(15px, 22px);\n @include font-weight($regular);\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n margin: 20px 0 32px 0;\n padding: 0 1rem;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n margin: 20px 0 61px 0;\n padding: 0;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px);\n margin-bottom: 40px;\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(17px, 26px);\n }\n }\n}\n\n.hy-adjacent-image-text__text-container__link {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 12px;\n margin-right: -6px;\n}\n\n.hy-adjacent-image-text::after {\n content: \"\";\n clear: both;\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string \| null;\n}\n\nimport {Component, ComponentInterface, Prop, h, Host, Element} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n tag: \"hy-adjacent-image-text\",\n styleUrl: \"adjacent-image-text.scss\",\n shadow: false,\n})\nexport class AdjacentImageText implements ComponentInterface {\n @Element() el: HTMLElement;\n @Prop() headerstyle: string = \"default\";\n @Prop() imageUrl: string = null;\n @Prop() imageAlt: string = \"\";\n @Prop() disableLazy: boolean = false;\n @Prop() textTitle?: string;\n @Prop() textDescription: string = null;\n\n @Prop() mainUrl?: string;\n @Prop() mainUrlTitle?: string;\n @Prop() mainUrlAriaLabel?: string;\n @Prop() mainUrlIsExternal: boolean = false;\n\n @Prop() mainUrl2?: string;\n @Prop() mainUrlTitle2?: string;\n @Prop() mainUrlAriaLabel2?: string;\n @Prop() mainUrlIsExternal2: boolean = false;\n\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] \| string;\n\n async componentWillLoad() {\n this._sourceSet = await jsonParserWorker(this.sourceSet);\n }\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n }\n\n render() {\n const classAttributes = [\"hy-adjacent-image-text\", `hy-adjacent-image-text__${this.headerstyle}`].join(\" \");\n const contentClassAttributes = [\n \"hy-adjacent-image-text__text-container\",\n \"hy-adjacent-image-text__text-container--left\",\n ].join(\" \");\n\n const imageLeftClassAttributes = [\"hy-adjacent-image-text__image-container\"].join(\" \");\n\n const aspectRatioWidth = 6;\n const aspectRatioHeight = 4;\n const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n const aspectRatio = {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n };\n\n return (\n <Host>\n <div class={classAttributes}>\n <div class={imageLeftClassAttributes} style={aspectRatio}>\n {this._sourceSet ? (\n <picture>\n {this._sourceSet.map((item) => (\n <source srcSet={item.src} media={item.media} type={item.type} sizes={item.sizes ? item.sizes : \"\"} />\n ))}\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAlt}\n class=\"hy-image__image\"\n src={this.imageUrl}\n />\n </picture>\n ) : (\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAlt}\n class=\"hy-image__image\"\n src={this.imageUrl}\n />\n )}\n </div>\n <div class={contentClassAttributes}>\n <div class=\"hy-adjacent-image-text__text-container__info-wrapper\">\n <div class=\"hy-adjacent-image-text__text-container__title\">{this.textTitle}</div>\n <p\n class={`hy-adjacent-image-text__text-container__description hy-adjacent-image-text__text-container__description__${this.headerstyle}`}\n >\n {this.textDescription}\n </p>\n </div>\n <div class=\"hy-adjacent-image-text__text-container__links-wrapper\">\n {this.mainUrl && (\n <div class=\"hy-adjacent-image-text__text-container__link\">\n <hy-cta-link\n link-content={this.mainUrlTitle}\n sc-label={this.mainUrlAriaLabel}\n url={this.mainUrl}\n is-external={this.mainUrlIsExternal}\n />\n </div>\n )}\n {this.mainUrl2 && (\n <div class=\"hy-adjacent-image-text__text-container__link\">\n <hy-cta-link\n link-content={this.mainUrlTitle2}\n sc-label={this.mainUrlAriaLabel2}\n url={this.mainUrl2}\n is-external={this.mainUrlIsExternal2}\n />\n </div>\n )}\n </div>\n </div>\n </div>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n"],"version":3}

package/components/hy-content-list-item2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"hy-content-list-item2.js","mappings":"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","names":[],"sources":["./src/components/courses/hy-content-list-item/hy-content-list-item.scss?tag=hy-content-list-item","./src/components/courses/hy-content-list-item/hy-content-list-item.tsx"],"sourcesContent":["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"],"version":3}
1	+ {"file":"hy-content-list-item2.js","mappings":"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","names":[],"sources":["./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":["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"],"version":3}

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

	@@ -1 +1 @@
1	- {"file":"hy-content-list.js","mappings":"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","names":["HyContentList"],"sources":["./src/components/courses/hy-content-list/hy-content-list.scss?tag=hy-content-list","./src/components/courses/hy-content-list/hy-content-list.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 for (const courseProperty in courseObject) {\n if (courseProperty == \"courseListType\") continue;\n\n const courseItem = courseObject[courseProperty];\n const courseCode = courseItem[\"code\"];\n const courseCredits = courseItem[\"credits\"];\n\n // Course realisations.\n if (courseItem[\"realisations\"]) {\n const realisations = JSON.parse(JSON.stringify(courseItem[\"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\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"],"version":3}
1	+ {"file":"hy-content-list.js","mappings":"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","names":["HyContentList"],"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"],"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 for (const courseProperty in courseObject) {\n if (courseProperty == \"courseListType\") continue;\n\n const courseItem = courseObject[courseProperty];\n const courseCode = courseItem[\"code\"];\n const courseCredits = courseItem[\"credits\"];\n\n // Course realisations.\n if (courseItem[\"realisations\"]) {\n const realisations = JSON.parse(JSON.stringify(courseItem[\"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\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"],"version":3}

package/components/hy-footer-action.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.js';
-const hyFooterActionCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-footer-action{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-top:1px solid var(--grayscale-medium-dark);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:8px 16px 16px 16px;place-content:center space-between;width:100%}@media (min-width: 30rem){.hy-footer-action{margin:0 auto;max-width:120.0625rem;padding:16px 24px 16px 24px}}@media (min-width: 60rem){.hy-footer-action{padding:16px 32px 24px 32px}}.hy-footer-action__updated-text{font-size:0.875rem;line-height:24px;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:0}@media (min-width: 30rem){.hy-footer-action__updated-text{font-size:1rem;line-height:24px}}.hy-footer-action__scroll-up{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-footer-action__scroll-up .hy-footer-action__up-button{background-color:var(--brand-main-light);border:0;-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.05);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.05);padding:8px}.hy-footer-action__scroll-up .hy-footer-action__up-button:hover{cursor:pointer}.hy-footer-action__scroll-up label{font-size:1rem;line-height:24px;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:0;margin-right:8px}.hy-footer-action__scroll-up svg{fill:var(--grayscale-white)}.hy-footer-action__scroll-up:hover label{text-decoration:underline}.hy-footer-action__scroll-up:hover .hy-footer-action__up-button{background-color:var(--brand-main)}";
+const hyFooterActionCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-footer-action{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-top:1px solid var(--grayscale-medium-dark);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:8px 16px 16px 16px;place-content:center space-between;width:100%}@media (min-width: 30rem){.hy-footer-action{margin:0 auto;max-width:120.0625rem;padding:16px 24px 16px 24px}}@media (min-width: 60rem){.hy-footer-action{padding:16px 32px 24px 32px}}.hy-footer-action__updated-text{font-size:0.875rem;line-height:24px;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:0}@media (min-width: 30rem){.hy-footer-action__updated-text{font-size:1rem;line-height:24px}}.hy-footer-action__scroll-up{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-footer-action__scroll-up .hy-footer-action__up-button{background-color:var(--brand-main-light);border:0;-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.05);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.05);padding:8px}.hy-footer-action__scroll-up .hy-footer-action__up-button:hover{cursor:pointer}.hy-footer-action__scroll-up label{font-size:1rem;line-height:24px;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:0;margin-right:8px}.hy-footer-action__scroll-up label:hover{cursor:pointer}.hy-footer-action__scroll-up svg{fill:var(--grayscale-white)}.hy-footer-action__scroll-up:hover label{text-decoration:underline}.hy-footer-action__scroll-up:hover .hy-footer-action__up-button{background-color:var(--brand-main)}";
 let scrollTimeout = null;
 const HyFooterAction$1 = /*@__PURE__*/ proxyCustomElement(class HyFooterAction extends HTMLElement {
@@ -15,7 +15,7 @@ const HyFooterAction$1 = /*@__PURE__*/ proxyCustomElement(class HyFooterAction e
     clearTimeout(scrollTimeout);
   }
   scrollTop() {
-    const hyLogo = document.querySelector(".hy-site-logo a");
+    const hyLogo = document.querySelector(".hy-site-header .hy-site-header__branding a");
     window.scrollTo({ top: 0, behavior: "smooth" });
     scrollTimeout = window.setTimeout(() => {
       hyLogo.focus();
@@ -23,7 +23,7 @@ const HyFooterAction$1 = /*@__PURE__*/ proxyCustomElement(class HyFooterAction e
   }
   render() {
     const classAttributes = ["hy-footer-action"].join(" ");
-    return (h(Host, { class: classAttributes }, h("span", { class: "hy-footer-action__updated-text" }, this.updatedText), this.upButtonLabel && (h("span", { class: "hy-footer-action__scroll-up" }, h("label", { id: "up-label", htmlFor: "scroll-up" }, this.upButtonLabel), h("button", { name: "scroll-up", "aria-labelledby": "up-label", onClick: () => this.scrollTop(), class: "hy-footer-action__up-button", type: "button" }, h("hy-icon", { class: "hy-footer-action__up-icon", icon: "hy-icon-arrow-up", size: 26 }))))));
+    return (h(Host, { class: classAttributes }, h("span", { class: "hy-footer-action__updated-text" }, this.updatedText), this.upButtonLabel && (h("span", { class: "hy-footer-action__scroll-up" }, h("label", { id: "up-label", htmlFor: "scroll-up", onClick: () => this.scrollTop() }, this.upButtonLabel), h("button", { name: "scroll-up", "aria-labelledby": "up-label", onClick: () => this.scrollTop(), class: "hy-footer-action__up-button", type: "button" }, h("hy-icon", { class: "hy-footer-action__up-icon", icon: "hy-icon-arrow-up", size: 26 }))))));
   }
   static get style() { return hyFooterActionCss; }
 }, [0, "hy-footer-action", {

package/components/hy-footer-action.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"hy-footer-action.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,~~ivFAAivF~~;;~~ACE3wF~~,IAAI,aAAa,GAAG,IAAI,CAAC;MAOZA,gBAAc;;;;;;;EAUzB,oBAAoB;IAClB,YAAY,CAAC,aAAa,CAAC,CAAC;GAC7B;EAEqC,SAAS;IAC7C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,~~iBAAiB~~,CAAgB,CAAC;~~IACxE~~,MAAM,CAAC,QAAQ,CAAC,EAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC,CAAC;IAC9C,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC;MAChC,MAAM,CAAC,KAAK,EAAE,CAAC;KAChB,EAAE,GAAG,CAAC,CAAC;GACT;EAED,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEvD,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,IAC1B,YAAM,KAAK,EAAE,gCAAgC,IAAG,IAAI,CAAC,WAAW,CAAQ,EACvE,IAAI,CAAC,aAAa,KACjB,YAAM,KAAK,EAAC,6BAA6B,IACvC,aAAO,EAAE,EAAC,UAAU,EAAC,OAAO,EAAC,WAAW,~~IACrC~~,IAAI,CAAC,aAAa,CACb,EACR,cACE,IAAI,EAAC,WAAW,qBACA,UAAU,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAC/B,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,QAAQ,IAEb,eAAS,KAAK,EAAE,2BAA2B,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,EAAE,GAAI,CAC5E,CACJ,CACR,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["HyFooterAction"],"sources":["./src/components/footer/hy-footer-action/hy-footer-action.scss?tag=hy-footer-action","./src/components/footer/hy-footer-action/hy-footer-action.tsx"],"sourcesContent":[".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\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-~~logo~~ 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\">\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"],"version":3}
1	+ {"file":"hy-footer-action.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,yyFAAyyF;;ACEn0F,IAAI,aAAa,GAAG,IAAI,CAAC;MAOZA,gBAAc;;;;;;;EAUzB,oBAAoB;IAClB,YAAY,CAAC,aAAa,CAAC,CAAC;GAC7B;EAEqC,SAAS;IAC7C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,6CAA6C,CAAgB,CAAC;IACpG,MAAM,CAAC,QAAQ,CAAC,EAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC,CAAC;IAC9C,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC;MAChC,MAAM,CAAC,KAAK,EAAE,CAAC;KAChB,EAAE,GAAG,CAAC,CAAC;GACT;EAED,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEvD,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,IAC1B,YAAM,KAAK,EAAE,gCAAgC,IAAG,IAAI,CAAC,WAAW,CAAQ,EACvE,IAAI,CAAC,aAAa,KACjB,YAAM,KAAK,EAAC,6BAA6B,IACvC,aAAO,EAAE,EAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,IACrE,IAAI,CAAC,aAAa,CACb,EACR,cACE,IAAI,EAAC,WAAW,qBACA,UAAU,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAC/B,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,QAAQ,IAEb,eAAS,KAAK,EAAE,2BAA2B,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,EAAE,GAAI,CAC5E,CACJ,CACR,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["HyFooterAction"],"sources":["./src/components/footer/hy-footer-action/hy-footer-action.scss?tag=hy-footer-action","./src/components/footer/hy-footer-action/hy-footer-action.tsx"],"sourcesContent":[".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"],"version":3}

package/components/hy-general-list-item2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-const hyGeneralListItemCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block;height:100%}.hy-general-list-item{font-family:var(--main-font-family);margin-bottom:1rem;height:100%}.hy-general-list-item--style-grid .hy-general-list-item__link{height:100%}@media (min-width: 30rem){.hy-general-list-item--style-grid .hy-general-list-item__link{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.hy-general-list-item--style-grid .hy-general-list-item__image-container{border:1px solid var(--grayscale-light);max-width:100%}@media (max-width: 479px){.hy-general-list-item--style-grid .hy-general-list-item__image-container{display:-webkit-box;display:-ms-flexbox;display:flex}}@media (min-width: 60rem){.hy-general-list-item--style-grid .hy-general-list-item__text-container{padding:12px 12px 32px 12px}}@media (min-width: 75.0625rem){.hy-general-list-item--style-grid .hy-general-list-item__text-container{padding:12px 12px 32px 12px}}.hy-genenral-list-item__meta{font-size:0.75rem;line-height:14px;font-weight:600;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:-0.1px;text-transform:uppercase;margin:9px 0}.hy-genenral-list-item__meta__date{font-weight:400;margin-left:4px}.hy-general-list-item__link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;text-decoration:none}@media (min-width: 30rem){.hy-general-list-item__link{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-general-list-item__link:hover{cursor:pointer}.hy-general-list-item__link:hover .hy-general-list-item__type span,.hy-general-list-item__link:focus .hy-general-list-item__type span{background-color:var(--brand-main)}.hy-general-list-item__link:hover .hy-general-list-item__title,.hy-general-list-item__link:focus .hy-general-list-item__title{color:var(--brand-main);text-decoration:underline}.hy-general-list-item__image-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;margin:0;position:relative;width:100%}@media (max-width: 479px){.hy-general-list-item__image-container{display:none}}@media (min-width: 30rem){.hy-general-list-item__image-container{max-width:35.7%}}@media (min-width: 60rem){.hy-general-list-item__image-container{max-width:23.13%}}@media (min-width: 75.0625rem){.hy-general-list-item__image-container{max-width:23.03%}}.hy-general-list-item__image-container:before{content:\"\";display:block;padding-top:var(--aspectRatio)}.hy-general-list-item__image-container img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-general-list-item__image{background-color:#ececec;width:100%;height:100%}.hy-general-list-item__type{background-color:var(--grayscale-background-box);padding-top:16px;z-index:10}@media (min-width: 30rem){.hy-general-list-item__type{background-color:transparent;left:-8px;padding-top:0;position:absolute;top:16px}}.hy-general-list-item__type__major{font-size:0.75rem;line-height:14px;font-weight:700;background-color:var(--grayscale-black);color:var(--grayscale-white);letter-spacing:-0.1px;padding:5px 8px;text-transform:uppercase;-ms-flex-item-align:baseline;align-self:baseline;margin-left:-8px}@media (min-width: 30rem){.hy-general-list-item__type__major{margin-left:0}}.hy-general-list-item__type__sub{font-size:0.75rem;line-height:14px;background-color:var(--grayscale-black);color:var(--grayscale-white);font-family:var(--main-font-family);letter-spacing:-0.1px;padding:5px 8px;margin-left:-8px}.hy-general-list-item__text-container{background-color:var(--grayscale-background-box);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:16px 12px}@media (min-width: 60rem){.hy-general-list-item__text-container{padding:14px 32px 24px 24px}}@media (min-width: 75.0625rem){.hy-general-list-item__text-container{padding:20px 104px 32px 32px}}.hy-general-list-item__title{font-size:1.125rem;line-height:22px;font-weight:700;color:var(--brand-main-nearly-black);letter-spacing:-0.45px;margin-bottom:8px;margin-top:0}@media (min-width: 1601px){.hy-general-list-item__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-general-list-item__title__large{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}.hy-general-list-item__description{font-size:0.9375rem;line-height:20px;color:var(--grayscale-dark);display:none;letter-spacing:-0.09px;margin:0}@media (min-width: 30rem){.hy-general-list-item__description{font-size:0.875rem;line-height:18px;display:block;letter-spacing:-0.08px}}@media (min-width: 1601px){.hy-general-list-item__description{font-size:0.875rem;line-height:20px}}@media (min-width: 75.0625rem){.hy-general-list-item__description__large{font-size:0.875rem;line-height:20px}}";
+const hyGeneralListItemCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block;height:100%}.hy-general-list-item{font-family:var(--main-font-family);margin-bottom:1rem;height:100%}.hy-general-list-item--style-grid .hy-general-list-item__link{height:100%}@media (min-width: 30rem){.hy-general-list-item--style-grid .hy-general-list-item__link{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.hy-general-list-item--style-grid .hy-general-list-item__image-container{border:1px solid var(--grayscale-light);max-width:100%}@media (max-width: 479px){.hy-general-list-item--style-grid .hy-general-list-item__image-container{display:-webkit-box;display:-ms-flexbox;display:flex}}@media (min-width: 60rem){.hy-general-list-item--style-grid .hy-general-list-item__text-container{padding:12px 12px 32px 12px}}@media (min-width: 75.0625rem){.hy-general-list-item--style-grid .hy-general-list-item__text-container{padding:12px 12px 32px 12px}}.hy-genenral-list-item__meta{font-size:0.75rem;line-height:14px;font-weight:600;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:-0.1px;text-transform:uppercase;margin:9px 0}.hy-genenral-list-item__meta__date{font-weight:400;margin-left:4px}.hy-general-list-item__link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;text-decoration:none}@media (min-width: 30rem){.hy-general-list-item__link{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-general-list-item__link:hover{cursor:pointer}.hy-general-list-item__link:hover .hy-general-list-item__type span,.hy-general-list-item__link:focus .hy-general-list-item__type span{background-color:var(--brand-main)}.hy-general-list-item__link:hover .hy-general-list-item__title,.hy-general-list-item__link:focus .hy-general-list-item__title{color:var(--brand-main);text-decoration:underline}.hy-general-list-item__image-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;margin:0;position:relative;width:100%}@media (max-width: 479px){.hy-general-list-item__image-container{display:none}}@media (min-width: 30rem){.hy-general-list-item__image-container{max-width:35.7%}}@media (min-width: 60rem){.hy-general-list-item__image-container{max-width:23.13%}}@media (min-width: 75.0625rem){.hy-general-list-item__image-container{max-width:23.03%}}.hy-general-list-item__image-container:before{content:\"\";display:block;padding-top:var(--aspectRatio)}.hy-general-list-item__image-container img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-general-list-item__image{background-color:#ececec;width:100%;height:100%}.hy-general-list-item__type{background-color:var(--grayscale-background-box);padding-top:16px;z-index:10}@media (min-width: 30rem){.hy-general-list-item__type{background-color:transparent;left:-8px;padding-top:0;position:absolute;top:16px}}.hy-general-list-item__type__major{font-size:0.75rem;line-height:14px;font-weight:700;background-color:var(--grayscale-black);color:var(--grayscale-white);letter-spacing:-0.1px;padding:5px 8px;text-transform:uppercase;-ms-flex-item-align:baseline;align-self:baseline;margin-left:-8px}@media (min-width: 30rem){.hy-general-list-item__type__major{margin-left:0}}.hy-general-list-item__type__sub{font-size:0.75rem;line-height:14px;background-color:var(--grayscale-black);color:var(--grayscale-white);font-family:var(--main-font-family);letter-spacing:-0.1px;padding:5px 8px;margin-left:-8px}.hy-general-list-item__text-container{background-color:var(--grayscale-background-box);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:16px 12px}@media (min-width: 60rem){.hy-general-list-item__text-container{padding:14px 32px 24px 24px}}@media (min-width: 75.0625rem){.hy-general-list-item__text-container{padding:20px 104px 32px 32px}}.hy-general-list-item__title{font-size:1.125rem;line-height:22px;font-weight:700;color:var(--brand-main-nearly-black);letter-spacing:-0.45px;margin-bottom:8px;margin-top:0;text-wrap:balance}@media (min-width: 1601px){.hy-general-list-item__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-general-list-item__title__large{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}.hy-general-list-item__description{font-size:0.9375rem;line-height:20px;color:var(--grayscale-dark);display:none;letter-spacing:-0.09px;margin:0}@media (min-width: 30rem){.hy-general-list-item__description{font-size:0.875rem;line-height:18px;display:block;letter-spacing:-0.08px}}@media (min-width: 1601px){.hy-general-list-item__description{font-size:0.875rem;line-height:20px}}@media (min-width: 75.0625rem){.hy-general-list-item__description__large{font-size:0.875rem;line-height:20px}}";
 const HyGeneralListItem = /*@__PURE__*/ proxyCustomElement(class HyGeneralListItem extends HTMLElement {
   constructor() {