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

@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

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

Files changed (1260) hide show

package/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":";;;;;;AAAA,MAAM,gBAAgB,GAAG,w5EAAw5E;;MCQp6EA,eAAa;;;;IAShB,YAAO,GAAmB,cAAc,CAAC,OAAO,CAAC;qBAR7B,mBAAmB;yBACf,oCAAoC;wBACrC,IAAI;0BACF,WAAW;;uBAEd,QAAQ;8BACY,mBAAmB,CAAC,OAAO;8BAGhC,EAAE;;;;;EAM3B,WAAW,CAAC,IAAiB;IAC/C,IAAI,CAAC,UAAU,GAAG,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;GACtE;EAED,iBAAiB;IACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GAClC;EAED,eAAe,CAAC,CAAC,EAAE,EAAE;IACnB,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,IAAI,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,CAAgB,CAAC;IAE1D,IAAI,IAAI,EAAE;MACR,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;KAC9C;GACF;EAED,MAAM,gBAAgB;IACpB,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;GACF;EAED,WAAW;IACT,IAAI,kBAAkB,GAAG,EAAE,CAAC;IAC5B,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;MACjD,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI;QAC3B,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;QAEtD,MAAM,cAAc,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,OAAO,GAAG,cAAc,IAAI,MAAM,GAAG,cAAc,CAAC,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC;QAEnF,KAAK,MAAM,cAAc,IAAI,YAAY,EAAE;UACzC,IAAI,cAAc,IAAI,gBAAgB;YAAE,SAAS;UAEjD,MAAM,UAAU,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC;UAChD,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;UACtC,MAAM,aAAa,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;;UAG5C,IAAI,UAAU,CAAC,cAAc,CAAC,EAAE;YAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;YAC5E,KAAK,MAAM,mBAAmB,IAAI,YAAY,EAAE;cAC9C,MAAM,eAAe,GAAG,YAAY,CAAC,mBAAmB,CAAC,CAAC;cAC1D,MAAM,qBAAqB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;cACtD,MAAM,yBAAyB,GAAG,qBAAqB,GAAG,IAAI,GAAG,aAAa,GAAG,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC;cACzG,MAAM,iBAAiB,GAAG,eAAe,CAAC,aAAa,CAAC,CAAC;cACzD,MAAM,eAAe,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;cACrD,MAAM,eAAe,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;cACrD,MAAM,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;cACjD,MAAM,kBAAkB,GAAG,eAAe,CAAC,oBAAoB,CAAC,CAAC;cACjE,MAAM,oBAAoB,GAAG,eAAe,CAAC,eAAe,CAAC,CAAC;cAC9D,MAAM,sBAAsB,GAAG,eAAe,CAAC,kBAAkB,CAAC,CAAC;cACnE,MAAM,kBAAkB,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC;cAE3D,IAAI,UAAU,GAAG,EAAE,CAAC;cACpB,IAAI,eAAe,CAAC,MAAM,CAAC,EAAE;gBAC3B,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;gBAC/D,KAAK,IAAI,CAAC,IAAI,IAAI,EAAE;kBAClB,IAAI,OAAO,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,EAAC,CAAC;kBAC9B,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;iBAC1B;eACF;cACD,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;cAElD,MAAM,8BAA8B,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;cAExE,kBAAkB,CAAC,IAAI,CACrB,4BACE,EAAE,EAAE,mBAAmB,EACvB,KAAK,EAAE,8BAA8B,EACrC,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,IAAI,CAAC,kBAAkB,iBACzB,UAAU,iBACV,yBAAyB,kBACxB,eAAe,qBACZ,IAAI,CAAC,cAAc,oBACpB,aAAa,iBAChB,cAAc,uBACR,eAAe,qBACjB,aAAa,0BACR,kBAAkB,yBACnB,iBAAiB,yBACjB,kBAAkB,4BACf,oBAAoB,8BAClB,sBAAsB,uBAC7B,IAAI,CAAC,SAAS,mBAClB,oBAAoB,EACnC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,mBAAmB,CAAC,GAEtC,CACzB,CAAC;aACH;WACF;SACF;OACF,CAAC,CAAC;KACJ;IAED,OAAO,kBAAkB,CAAC;GAC3B;EAED,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACpE,MAAM,oBAAoB,GAAG,CAAC,wBAAwB,EAAE,2BAA2B,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACjH,MAAM,yBAAyB,GAAG;MAChC,8BAA8B;MAC9B,iCAAiC,IAAI,CAAC,WAAW,EAAE;KACpD,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IAC7C,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;MACjE,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,eAAe,IAAG,IAAI,CAAC,kBAAkB,CAAO,CACvD,EACP;KACH;SAAM;MACL,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,eAAe,IACzB,WAAK,KAAK,EAAC,4BAA4B,IACrC,YAAM,KAAK,EAAE,oBAAoB,IAC/B,eAAS,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,EAAE,GAAI,CACtC,EACP,YAAM,KAAK,EAAE,yBAAyB,IAAG,IAAI,CAAC,aAAa,CAAQ,CAC/D,CACF,CACD,EACP;KACH;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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-footer-base.js CHANGED Viewed

@@ -30,7 +30,7 @@ const HyFooterBase$1 = /*@__PURE__*/ proxyCustomElement(class HyFooterBase exten
     const classAttributes = ["hy-footer-base--content-container"].join(" ");
     const links = this._dataFooterBaseLinks;
     const some = this._dataFooterBaseSome;
-    return (h(Host, { class: classAttributes }, h("div", { class: "hy-footer-base" }, h("div", { class: "hy-footer-base__left" }, h("div", { class: "hy-footer-base__logo" }, h("hy-site-logo", { type: FooterVariant.footer, size: 56, color: logoColor, url: this.logoUrl, label: this.logoLabel })), h("div", { class: "hy-footer-base__content" }, h("slot", { name: "content" })), h("div", { class: "hy-footer-base__some" }, h("span", { class: "hy-footer-base__some__label" }, this.someLabel), h("div", { class: "hy-footer-base__some__items" }, some &&
+    return (h(Host, { class: classAttributes }, h("div", { class: "hy-footer-base" }, h("div", { class: "hy-footer-base__left" }, h("div", { class: "hy-footer-base__logo" }, h("hy-site-logo", { type: FooterVariant.footer, color: logoColor, url: this.logoUrl, label: this.logoLabel })), h("div", { class: "hy-footer-base__content" }, h("slot", { name: "content" })), h("div", { class: "hy-footer-base__some" }, h("span", { class: "hy-footer-base__some__label" }, this.someLabel), h("div", { class: "hy-footer-base__some__items" }, some &&
       some.map((s) => {
         return (h("a", { "aria-label": s.label, href: s.url, class: `hy-footer-base__some__item`, title: s.label, target: "_blank" }, h("hy-icon", { icon: `hy-icon-some-${s.type}`, size: 36 })));
       })))), h("div", { class: "hy-footer-base__right" }, links &&

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

	@@ -1 +1 @@
1	- {"file":"hy-footer-base.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,0sMAA0sM;;MCuBrtMA,cAAY;;;;iBAIc,mBAAmB,CAAC,KAAK;;;gBAYjC,YAAY,CAAC,GAAG;;;;;;EAqB7C,MAAM,iBAAiB;IACrB,IAAI,CAAC,oBAAoB,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC7E,IAAI,CAAC,mBAAmB,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;GAC5E;EAED,MAAM;IACJ,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC;IACrC,MAAM,eAAe,GAAG,CAAC,mCAAmC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxE,MAAM,KAAK,GAAG,IAAI,CAAC,oBAA8C,CAAC;IAClE,MAAM,IAAI,GAAG,IAAI,CAAC,mBAA4C,CAAC;IAE/D,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,IAC1B,WAAK,KAAK,EAAC,gBAAgB,IACzB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,sBAAsB,IAC/B,~~oBACE~~,IAAI,EAAE,aAAa,CAAC,MAAM,~~EAC1B,IAAI,~~EAAE,~~EAAE,EACR,~~KAAK,EAAE,SAAS,~~EAChB~~,GAAG,EAAE,IAAI,CAAC,OAAO,~~EACjB~~,KAAK,EAAE,IAAI,CAAC,SAAS,~~GACrB~~,~~CACE~~,EACN,WAAK,KAAK,EAAC,yBAAyB,IAClC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EACN,WAAK,KAAK,EAAC,sBAAsB,IAC/B,YAAM,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,SAAS,CAAQ,EACjE,WAAK,KAAK,EAAC,6BAA6B,IACrC,IAAI;MACH,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACT,QACE,uBACc,CAAC,CAAC,KAAK,EACnB,IAAI,EAAE,CAAC,CAAC,GAAG,EACX,KAAK,EAAE,4BAA4B,EACnC,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,MAAM,EAAC,QAAQ,IAEf,eAAS,IAAI,EAAE,gBAAgB,CAAC,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,GAAI,CACnD,EACJ;OACH,CAAC,CACA,CACF,CACF,EACN,WAAK,KAAK,EAAC,uBAAuB,IAC/B,KAAK;MACJ,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI;QACb,QACE,2BACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,mBAAmB,CAAC,KAAK,GACX,EACvB;OACH,CAAC,EACH,IAAI,CAAC,aAAa,IAAI,YAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,aAAa,CAAQ,CACjF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["HyFooterBase"],"sources":["./src/components/footer/hy-footer-base/hy-footer-base.scss?tag=hy-footer-base","./src/components/footer/hy-footer-base/hy-footer-base.tsx"],"sourcesContent":[".hy-footer-base--content-container {\n background-color: var(--grayscale-black);\n display: block;\n max-width: 100%;\n}\n\n.hy-footer-base {\n background-color: var(--grayscale-black);\n display: flex;\n flex-direction: column-reverse;\n max-height: 100%;\n padding: 32px 16px 32px 16px;\n place-content: center space-between;\n position: relative;\n width: 100%;\n\n @include breakpoint($narrow) {\n flex-direction: column-reverse;\n margin: 0 auto;\n max-width: $fullhd;\n padding: 32px 24px 32px 24px;\n }\n\n @include breakpoint($wide) {\n flex-direction: row;\n padding: 36px 32px 36px 32px;\n }\n\n @include breakpoint($extrawide) {\n padding: 40px 32px 40px 32px;\n }\n\n &__left {\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n margin-top: 24px;\n\n @include breakpoint($narrow) {\n align-items: center;\n width: 100%;\n }\n\n @include breakpoint($wide) {\n align-items: flex-start;\n width: 31.11%;\n }\n }\n\n &__logo {\n @include font-size(18px, 16px);\n\n font-family: var(--main-font-family);\n font-weight: bold;\n letter-spacing: -0.9px;\n\n .hy-site-logo__label {\n min-width: max-content;\n max-width: max-content;\n }\n }\n\n &__content {\n @include font-size(16px, 24px);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-style: normal;\n font-weight: 600;\n letter-spacing: -0.1px;\n margin: 32px 0;\n white-space: pre-line;\n\n @include breakpoint($narrow) {\n margin: 32px 0;\n }\n\n @include breakpoint($wide) {\n margin: 42px 0;\n }\n\n @include breakpoint($extrawide) {\n margin: 54px 0;\n }\n\n address {\n font-style: normal;\n }\n\n a {\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n }\n }\n\n &__some {\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-bottom: 64px;\n z-index: 2;\n\n @include breakpoint($wide) {\n align-items: flex-start;\n flex-direction: column;\n margin-bottom: 0;\n }\n\n @include breakpoint($extrawide) {\n align-items: center;\n flex-direction: row;\n }\n\n &__label {\n @include font-size(16px, 24px);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-weight: 600;\n letter-spacing: -0.1px;\n margin-bottom: 8px;\n margin-right: 24px;\n\n @include breakpoint($wide) {\n margin-bottom: 8px;\n }\n }\n\n &__items {\n align-items: center;\n display: flex;\n flex-direction: row;\n }\n\n &__item {\n margin-right: 24px;\n\n :last-child() {\n margin-right: 0;\n }\n\n &:hover {\n color: var(--grayscale-medium) !important;\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n\n svg {\n fill: var(--grayscale-white);\n }\n }\n\n &__right {\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n justify-content: flex-start;\n max-height: 100%;\n width: 100%;\n\n @include breakpoint($narrow) {\n margin-bottom: 32px;\n max-height: 300px;\n width: calc(100% + 24px);\n }\n\n @include breakpoint($wide) {\n max-height: 350px;\n width: 65.56%;\n }\n }\n\n &__copy {\n @include font-size(16px, 24px);\n\n bottom: 40px;\n color: var(--grayscale-white);\n display: inline-block;\n font-family: var(--main-font-family);\n font-weight: 600;\n letter-spacing: -0.1px;\n position: absolute;\n right: 50%;\n text-align: center;\n transform: translateX(50%);\n width: 100%;\n\n @include breakpoint($narrow) {\n bottom: 32px;\n right: 50%;\n transform: translateX(50%);\n }\n\n @include breakpoint($wide) {\n bottom: 36px;\n right: 32px;\n text-align: right;\n transform: none;\n }\n\n @include breakpoint($extrawide) {\n bottom: 40px;\n }\n }\n}\n","export interface FooterBaseLinks {\n label: string;\n url: string;\n isActive?: boolean;\n mainlink?: boolean;\n items: Array<FooterBaseLinks>;\n}\n\nexport interface FooterBaseSome {\n label: string;\n url: string;\n type: string;\n}\n\nimport {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {FooterLinkItemColor, SiteLogoSize, ColorVariant, FooterVariant} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-footer-base\",\n styleUrl: \"hy-footer-base.scss\",\n shadow: false,\n})\nexport class HyFooterBase implements ComponentInterface {\n /*\n Link item color\n /\n @Prop() color: FooterLinkItemColor = FooterLinkItemColor.white;\n /\n Logo url\n /\n @Prop() logoUrl?: string;\n /\n Logo label\n /\n @Prop() logoLabel?: string;\n /\n Logo size\n /\n @Prop() size: SiteLogoSize = SiteLogoSize.big;\n /\n Label for some links\n /\n @Prop() someLabel?: string;\n /\n Copyright text\n /\n @Prop() copyrightText: string;\n\n private _dataFooterBaseLinks: FooterBaseLinks[];\n private _dataFooterBaseSome: FooterBaseSome[];\n /\n Footer links to be displayed\n /\n @Prop() dataFooterBaseLinks: FooterBaseLinks[] \| string;\n /\n Footer some links\n */\n @Prop() dataFooterBaseSome: FooterBaseSome[] \| string;\n\n async componentWillLoad() {\n this._dataFooterBaseLinks = await jsonParserWorker(this.dataFooterBaseLinks);\n this._dataFooterBaseSome = await jsonParserWorker(this.dataFooterBaseSome);\n }\n\n render() {\n const logoColor = ColorVariant.white;\n const classAttributes = [\"hy-footer-base--content-container\"].join(\" \");\n const links = this._dataFooterBaseLinks as Array<FooterBaseLinks>;\n const some = this._dataFooterBaseSome as Array<FooterBaseSome>;\n\n return (\n <Host class={classAttributes}>\n <div class=\"hy-footer-base\">\n <div class=\"hy-footer-base__left\">\n <div class=\"hy-footer-base__logo\">\n <hy-site-logo\n type={FooterVariant.footer}~~\n size={56}\n~~ color={logoColor}\n url={this.logoUrl}\n label={this.logoLabel}\n />\n </div>\n <div class=\"hy-footer-base__content\">\n <slot name=\"content\"></slot>\n </div>\n <div class=\"hy-footer-base__some\">\n <span class=\"hy-footer-base__some__label\">{this.someLabel}</span>\n <div class=\"hy-footer-base__some__items\">\n {some &&\n some.map((s) => {\n return (\n <a\n aria-label={s.label}\n href={s.url}\n class={`hy-footer-base__some__item`}\n title={s.label}\n target=\"_blank\"\n >\n <hy-icon icon={`hy-icon-some-${s.type}`} size={36} />\n </a>\n );\n })}\n </div>\n </div>\n </div>\n <div class=\"hy-footer-base__right\">\n {links &&\n links.map((link) => {\n return (\n <hy-footer-link-item\n label={link.label}\n url={link.url}\n color={FooterLinkItemColor.white}\n ></hy-footer-link-item>\n );\n })}\n {this.copyrightText && <span class=\"hy-footer-base__copy\">{this.copyrightText}</span>}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"hy-footer-base.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,0sMAA0sM;;MCuBrtMA,cAAY;;;;iBAIc,mBAAmB,CAAC,KAAK;;;gBAYjC,YAAY,CAAC,GAAG;;;;;;EAqB7C,MAAM,iBAAiB;IACrB,IAAI,CAAC,oBAAoB,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC7E,IAAI,CAAC,mBAAmB,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;GAC5E;EAED,MAAM;IACJ,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC;IACrC,MAAM,eAAe,GAAG,CAAC,mCAAmC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxE,MAAM,KAAK,GAAG,IAAI,CAAC,oBAA8C,CAAC;IAClE,MAAM,IAAI,GAAG,IAAI,CAAC,mBAA4C,CAAC;IAE/D,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,IAC1B,WAAK,KAAK,EAAC,gBAAgB,IACzB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,sBAAsB,IAC/B,oBAAc,IAAI,EAAE,aAAa,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,GAAI,CACpG,EACN,WAAK,KAAK,EAAC,yBAAyB,IAClC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EACN,WAAK,KAAK,EAAC,sBAAsB,IAC/B,YAAM,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,SAAS,CAAQ,EACjE,WAAK,KAAK,EAAC,6BAA6B,IACrC,IAAI;MACH,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACT,QACE,uBACc,CAAC,CAAC,KAAK,EACnB,IAAI,EAAE,CAAC,CAAC,GAAG,EACX,KAAK,EAAE,4BAA4B,EACnC,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,MAAM,EAAC,QAAQ,IAEf,eAAS,IAAI,EAAE,gBAAgB,CAAC,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,GAAI,CACnD,EACJ;OACH,CAAC,CACA,CACF,CACF,EACN,WAAK,KAAK,EAAC,uBAAuB,IAC/B,KAAK;MACJ,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI;QACb,QACE,2BACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,mBAAmB,CAAC,KAAK,GACX,EACvB;OACH,CAAC,EACH,IAAI,CAAC,aAAa,IAAI,YAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,aAAa,CAAQ,CACjF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["HyFooterBase"],"sources":["./src/components/footer/hy-footer-base/hy-footer-base.scss?tag=hy-footer-base","./src/components/footer/hy-footer-base/hy-footer-base.tsx"],"sourcesContent":[".hy-footer-base--content-container {\n background-color: var(--grayscale-black);\n display: block;\n max-width: 100%;\n}\n\n.hy-footer-base {\n background-color: var(--grayscale-black);\n display: flex;\n flex-direction: column-reverse;\n max-height: 100%;\n padding: 32px 16px 32px 16px;\n place-content: center space-between;\n position: relative;\n width: 100%;\n\n @include breakpoint($narrow) {\n flex-direction: column-reverse;\n margin: 0 auto;\n max-width: $fullhd;\n padding: 32px 24px 32px 24px;\n }\n\n @include breakpoint($wide) {\n flex-direction: row;\n padding: 36px 32px 36px 32px;\n }\n\n @include breakpoint($extrawide) {\n padding: 40px 32px 40px 32px;\n }\n\n &__left {\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n margin-top: 24px;\n\n @include breakpoint($narrow) {\n align-items: center;\n width: 100%;\n }\n\n @include breakpoint($wide) {\n align-items: flex-start;\n width: 31.11%;\n }\n }\n\n &__logo {\n @include font-size(18px, 16px);\n\n font-family: var(--main-font-family);\n font-weight: bold;\n letter-spacing: -0.9px;\n\n .hy-site-logo__label {\n min-width: max-content;\n max-width: max-content;\n }\n }\n\n &__content {\n @include font-size(16px, 24px);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-style: normal;\n font-weight: 600;\n letter-spacing: -0.1px;\n margin: 32px 0;\n white-space: pre-line;\n\n @include breakpoint($narrow) {\n margin: 32px 0;\n }\n\n @include breakpoint($wide) {\n margin: 42px 0;\n }\n\n @include breakpoint($extrawide) {\n margin: 54px 0;\n }\n\n address {\n font-style: normal;\n }\n\n a {\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n }\n }\n\n &__some {\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-bottom: 64px;\n z-index: 2;\n\n @include breakpoint($wide) {\n align-items: flex-start;\n flex-direction: column;\n margin-bottom: 0;\n }\n\n @include breakpoint($extrawide) {\n align-items: center;\n flex-direction: row;\n }\n\n &__label {\n @include font-size(16px, 24px);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-weight: 600;\n letter-spacing: -0.1px;\n margin-bottom: 8px;\n margin-right: 24px;\n\n @include breakpoint($wide) {\n margin-bottom: 8px;\n }\n }\n\n &__items {\n align-items: center;\n display: flex;\n flex-direction: row;\n }\n\n &__item {\n margin-right: 24px;\n\n :last-child() {\n margin-right: 0;\n }\n\n &:hover {\n color: var(--grayscale-medium) !important;\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n\n svg {\n fill: var(--grayscale-white);\n }\n }\n\n &__right {\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n justify-content: flex-start;\n max-height: 100%;\n width: 100%;\n\n @include breakpoint($narrow) {\n margin-bottom: 32px;\n max-height: 300px;\n width: calc(100% + 24px);\n }\n\n @include breakpoint($wide) {\n max-height: 350px;\n width: 65.56%;\n }\n }\n\n &__copy {\n @include font-size(16px, 24px);\n\n bottom: 40px;\n color: var(--grayscale-white);\n display: inline-block;\n font-family: var(--main-font-family);\n font-weight: 600;\n letter-spacing: -0.1px;\n position: absolute;\n right: 50%;\n text-align: center;\n transform: translateX(50%);\n width: 100%;\n\n @include breakpoint($narrow) {\n bottom: 32px;\n right: 50%;\n transform: translateX(50%);\n }\n\n @include breakpoint($wide) {\n bottom: 36px;\n right: 32px;\n text-align: right;\n transform: none;\n }\n\n @include breakpoint($extrawide) {\n bottom: 40px;\n }\n }\n}\n","export interface FooterBaseLinks {\n label: string;\n url: string;\n isActive?: boolean;\n mainlink?: boolean;\n items: Array<FooterBaseLinks>;\n}\n\nexport interface FooterBaseSome {\n label: string;\n url: string;\n type: string;\n}\n\nimport {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {FooterLinkItemColor, SiteLogoSize, ColorVariant, FooterVariant} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-footer-base\",\n styleUrl: \"hy-footer-base.scss\",\n shadow: false,\n})\nexport class HyFooterBase implements ComponentInterface {\n /*\n Link item color\n /\n @Prop() color: FooterLinkItemColor = FooterLinkItemColor.white;\n /\n Logo url\n /\n @Prop() logoUrl?: string;\n /\n Logo label\n /\n @Prop() logoLabel?: string;\n /\n Logo size\n /\n @Prop() size: SiteLogoSize = SiteLogoSize.big;\n /\n Label for some links\n /\n @Prop() someLabel?: string;\n /\n Copyright text\n /\n @Prop() copyrightText: string;\n\n private _dataFooterBaseLinks: FooterBaseLinks[];\n private _dataFooterBaseSome: FooterBaseSome[];\n /\n Footer links to be displayed\n /\n @Prop() dataFooterBaseLinks: FooterBaseLinks[] \| string;\n /\n Footer some links\n */\n @Prop() dataFooterBaseSome: FooterBaseSome[] \| string;\n\n async componentWillLoad() {\n this._dataFooterBaseLinks = await jsonParserWorker(this.dataFooterBaseLinks);\n this._dataFooterBaseSome = await jsonParserWorker(this.dataFooterBaseSome);\n }\n\n render() {\n const logoColor = ColorVariant.white;\n const classAttributes = [\"hy-footer-base--content-container\"].join(\" \");\n const links = this._dataFooterBaseLinks as Array<FooterBaseLinks>;\n const some = this._dataFooterBaseSome as Array<FooterBaseSome>;\n\n return (\n <Host class={classAttributes}>\n <div class=\"hy-footer-base\">\n <div class=\"hy-footer-base__left\">\n <div class=\"hy-footer-base__logo\">\n <hy-site-logo type={FooterVariant.footer} color={logoColor} url={this.logoUrl} label={this.logoLabel} />\n </div>\n <div class=\"hy-footer-base__content\">\n <slot name=\"content\"></slot>\n </div>\n <div class=\"hy-footer-base__some\">\n <span class=\"hy-footer-base__some__label\">{this.someLabel}</span>\n <div class=\"hy-footer-base__some__items\">\n {some &&\n some.map((s) => {\n return (\n <a\n aria-label={s.label}\n href={s.url}\n class={`hy-footer-base__some__item`}\n title={s.label}\n target=\"_blank\"\n >\n <hy-icon icon={`hy-icon-some-${s.type}`} size={36} />\n </a>\n );\n })}\n </div>\n </div>\n </div>\n <div class=\"hy-footer-base__right\">\n {links &&\n links.map((link) => {\n return (\n <hy-footer-link-item\n label={link.label}\n url={link.url}\n color={FooterLinkItemColor.white}\n ></hy-footer-link-item>\n );\n })}\n {this.copyrightText && <span class=\"hy-footer-base__copy\">{this.copyrightText}</span>}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -65,7 +65,7 @@ const HyFooterInfo$1 = /*@__PURE__*/ proxyCustomElement(class HyFooterInfo exten
       } }, h("div", { class: {
         "hy-footer-info__content": true,
         "is-group": this.isGroup,
-      } }, !this.isLuomusGroup && (h("hy-heading", { heading: HeadingVarians.h2, section: section }, this.textTitle)), this.isLuomusGroup && (h("div", { class: "hy-footer-info__logo" }, h("hy-site-logo", { type: FooterVariant.footer, isGroup: this.isGroup, size: 56, color: logoColor, url: this.logoUrl, label: this.logoLabel }))), this.isLuomusGroup && (h("div", { class: "hy-footer-info__branding" }, h("a", { href: this.groupLogoUrl }, h("img", { src: this.groupLogoUrl, alt: "Luomus logo" })))), !this.isLuomusGroup && (h("div", { class: {
+      } }, !this.isLuomusGroup && (h("hy-heading", { heading: HeadingVarians.h2, section: section }, this.textTitle)), this.isLuomusGroup && (h("div", { class: "hy-footer-info__logo" }, h("hy-site-logo", { type: FooterVariant.footer, isGroup: this.isGroup, color: logoColor, url: this.logoUrl, label: this.logoLabel }))), this.isLuomusGroup && (h("div", { class: "hy-footer-info__branding" }, h("a", { href: this.groupLogoUrl }, h("img", { src: this.groupLogoUrl, alt: "Luomus logo" })))), !this.isLuomusGroup && (h("div", { class: {
         "hy-footer-info__ingress": true,
         "is-group": this.isGroup,
       }, innerHTML: this.textDescription })), !this.isLuomusGroup && this.linkUrl && (h("hy-cta-button", { "link-content": this.linkText, "sc-label": scLabel, "is-external": this.linkIsExternal, url: this.linkUrl, variant: CtaLinkButtonVariants.onWhiteBkgd })), this.isLuomusGroup &&

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

	@@ -1 +1 @@
1	- {"file":"hy-footer-info.js","mappings":"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","names":["HyFooterInfo"],"sources":["./src/components/footer/hy-footer-info/hy-footer-info.scss?tag=hy-footer-info","./src/components/footer/hy-footer-info/hy-footer-info.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-footer-info {\n display: flex;\n flex-direction: column;\n max-height: auto;\n padding: 0 16px 40px 16px;\n place-content: center space-between;\n\n @include breakpoint($narrow) {\n flex-direction: column;\n margin: 0 auto;\n max-width: $fullhd;\n padding: 0 24px 32px 24px;\n }\n\n @include breakpoint($wide) {\n flex-direction: row;\n padding: 0 32px 36px 32px;\n }\n\n @include breakpoint($extrawide) {\n padding: 0 32px 40px 32px;\n }\n\n &__content {\n margin-bottom: 24px;\n width: 100%;\n\n @include breakpoint($narrow) {\n margin-bottom: 32px;\n width: 100%;\n }\n\n @include breakpoint($wide) {\n width: 31.11%;\n }\n\n .hy-heading {\n padding-top: 0 !important;\n }\n }\n\n &__ingress {\n @include font-size(15px, 20px);\n @include font-weight($regular);\n letter-spacing: -0.09px;\n\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n padding-bottom: 24px;\n\n @include breakpoint($wide) {\n @include font-size(16px, 22px);\n letter-spacing: -0.1px;\n padding-bottom: 16px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n }\n\n @include breakpoint($extrawide) {\n padding-bottom: 24px;\n }\n\n a {\n @include font-size(14px, 20px); // Paragraph Small size\n color: var(--link-blue);\n font-family: var(--main-font-family);\n font-weight: 600;\n display: inline-flex;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n letter-spacing: -0.1px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n }\n\n &:hover {\n color: var(--brand-main);\n }\n }\n\n a[target=\"_blank\"]:after {\n display: block;\n content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n margin-left: 3px;\n transform: rotate(315deg);\n\n &:hover {\n content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n }\n }\n\n a[target=\"_blank\"]:hover {\n &:after {\n content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n }\n }\n }\n\n &__links {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n max-height: auto;\n overflow: hidden;\n width: 100%;\n\n @include breakpoint($narrow) {\n align-content: space-between;\n max-height: 555px;\n width: 100%;\n }\n @include breakpoint($wide) {\n max-height: 530px;\n width: 65.56%;\n }\n @include breakpoint($overwide) {\n max-height: 460px;\n }\n\n &.is-group:not(.luomus) {\n @include breakpoint($narrow) {\n flex-direction: row;\n max-height: none;\n }\n }\n }\n\n .hy-accordion__content--inner-wrapper {\n width: 100%;\n }\n}\n\n.hy-footer-info.luomus {\n background-color: var(--grayscale-black);\n color: var(--grayscale-white);\n padding-top: 40px;\n\n .hy-footer-info__logo {\n @include font-size(18px, 16px);\n font-family: var(--main-font-family);\n font-weight: bold;\n letter-spacing: -0.9px;\n\n .hy-site-logo__label {\n max-width: 100%;\n }\n }\n\n .hy-footer-info__branding {\n padding: 22px 0 62px;\n a {\n img {\n height: 32px;\n width: 148px;\n }\n }\n }\n\n .luomus-footer-content {\n color: var(--grayscale-white);\n margin: 8px 0;\n\n &__link {\n @include font-size(18px, 24px);\n @include font-weight($bold);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-style: normal;\n letter-spacing: -0.36px;\n text-decoration: none;\n }\n\n &__description {\n @include font-size(16px, 22px);\n @include font-weight($regular);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-style: normal;\n letter-spacing: -0.1px;\n padding-bottom: 32px;\n }\n }\n}\n","export interface FooterInfoLinks {\n label: string;\n url: string;\n isExternal: string;\n isActive?: boolean;\n mainlink?: boolean;\n items: Array<FooterInfoLinks>;\n}\n\nexport interface LuomusFooterContent {\n heading: string;\n url: string;\n content?: string;\n}\n\nimport {Component, ComponentInterface, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport ResizeObserver from \"resize-observer-polyfill\";\nimport {\n ColorVariant,\n CtaLinkButtonVariants,\n FooterLinkItemColor,\n FooterLinkVariants,\n FooterVariant,\n HeadingSectionVariants,\n HeadingVarians,\n} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-footer-info\",\n styleUrl: \"hy-footer-info.scss\",\n shadow: false,\n})\nexport class HyFooterInfo implements ComponentInterface {\n @Element() el: HTMLElement;\n /*\n Content area title.\n /\n @Prop() textTitle: string;\n /\n Content area text.\n /\n @Prop() textDescription: string;\n /\n Content area link button text.\n /\n @Prop() linkText: string;\n /\n Content area link button url.\n /\n @Prop() linkUrl: string;\n @Prop() linkIsExternal: boolean = false;\n @Prop() linkScLabel?: string;\n\n /\n Logo url\n /\n @Prop() logoUrl?: string;\n /\n Logo label\n /\n @Prop() logoLabel?: string;\n\n /\n Luomus group Logo url for footer\n /\n @Prop() groupLogoUrl?: string;\n\n @Prop() isGroup: boolean;\n @Prop() isLuomusGroup: boolean = false;\n @State() isMobile: boolean;\n\n private ro: ResizeObserver;\n private _dataFooterInfoLinks: FooterInfoLinks[];\n private _dataLuomusFooterContent: LuomusFooterContent[];\n /\n Data for links to be displayed.\n */\n @Prop() dataFooterInfoLinks: FooterInfoLinks[] \| string;\n\n @Prop() luomusFooterContent: LuomusFooterContent[] \| string;\n\n async componentWillLoad() {\n this._dataFooterInfoLinks = await jsonParserWorker(this.dataFooterInfoLinks);\n this._dataLuomusFooterContent = await jsonParserWorker(this.luomusFooterContent);\n }\n\n componentDidLoad() {\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.checkForMobile(entry.contentRect.width);\n }\n });\n this.ro.observe(document.body);\n }\n\n disconnectedCallback() {\n this.ro.disconnect();\n }\n\n checkForMobile(size: number) {\n this.isMobile = size <= 479 ? true : false;\n }\n\n render() {\n const links = this._dataFooterInfoLinks as Array<FooterInfoLinks>;\n const luomusFooterContentItems = this._dataLuomusFooterContent as Array<LuomusFooterContent>;\n\n const variant = this.isGroup ? FooterLinkVariants.group : FooterLinkVariants.campus;\n const section = this.isGroup ? HeadingSectionVariants.groupFooterInfo : HeadingSectionVariants.defaultFooterInfo;\n\n const footerLinkItemClass = this.isGroup ? \"group\" : \"campus\";\n\n const scLabel = this.linkScLabel && this.linkScLabel.length > 0 ? this.linkScLabel : this.linkText;\n const logoColor = ColorVariant.white;\n const linksColor = this.isLuomusGroup ? FooterLinkItemColor.white : FooterLinkItemColor.black;\n\n return (\n <Host\n class={{\n \"hy-footer-info\": true,\n luomus: this.isLuomusGroup,\n }}\n >\n <div\n class={{\n \"hy-footer-info__content\": true,\n \"is-group\": this.isGroup,\n }}\n >\n {!this.isLuomusGroup && (\n <hy-heading heading={HeadingVarians.h2} section={section}>\n {this.textTitle}\n </hy-heading>\n )}\n {this.isLuomusGroup && (\n <div class=\"hy-footer-info__logo\">\n <hy-site-logo\n type={FooterVariant.footer}\n isGroup={this.isGroup}\n size={56}\n color={logoColor}\n url={this.logoUrl}\n label={this.logoLabel}\n />\n </div>\n )}\n {this.isLuomusGroup && (\n <div class={\"hy-footer-info__branding\"}>\n <a href={this.groupLogoUrl}>\n <img src={this.groupLogoUrl} alt={\"Luomus logo\"} />\n </a>\n </div>\n )}\n {!this.isLuomusGroup && (\n <div\n class={{\n \"hy-footer-info__ingress\": true,\n \"is-group\": this.isGroup,\n }}\n innerHTML={this.textDescription}\n ></div>\n )}\n {!this.isLuomusGroup && this.linkUrl && (\n <hy-cta-button\n link-content={this.linkText}\n sc-label={scLabel}\n is-external={this.linkIsExternal}\n url={this.linkUrl}\n variant={CtaLinkButtonVariants.onWhiteBkgd}\n />\n )}\n {this.isLuomusGroup &&\n luomusFooterContentItems &&\n luomusFooterContentItems.map((item) => {\n return (\n <div class=\"luomus-footer-content\">\n <a href={item.url} class=\"luomus-footer-content__link\">\n {item.heading}\n </a>\n {item.content && <div class=\"luomus-footer-content__description\" innerHTML={item.content}></div>}\n </div>\n );\n })}\n </div>\n {this.isMobile && this.isGroup === false ? (\n <div\n class={{\n \"hy-footer-info__links\": true,\n \"is-group\": this.isGroup,\n luomus: this.isLuomusGroup,\n }}\n >\n <hy-accordion-container accordionid={\"test\"}>\n {links &&\n links.map((link) => {\n return (\n <hy-accordion-item accordiontitle={link.label}>\n <hy-footer-link-item\n class={footerLinkItemClass}\n variant={variant}\n color={linksColor}\n label={link.label}\n url={link.url}\n main-link={link.mainlink}\n items={link.items}\n isMobile={this.isMobile}\n ></hy-footer-link-item>\n </hy-accordion-item>\n );\n })}\n </hy-accordion-container>\n </div>\n ) : (\n <div\n class={{\n \"hy-footer-info__links\": true,\n \"is-group\": this.isGroup,\n luomus: this.isLuomusGroup,\n }}\n >\n {links &&\n links.map((link) => {\n const external_link = link.isExternal === \"external\";\n return (\n <hy-footer-link-item\n is-luomus-group={this.isLuomusGroup}\n class={footerLinkItemClass}\n variant={variant}\n color={linksColor}\n label={link.label}\n url={link.url}\n is-external={external_link}\n main-link={link.mainlink}\n items={link.items}\n isMobile={this.isMobile}\n ></hy-footer-link-item>\n );\n })}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"hy-footer-info.js","mappings":"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","names":["HyFooterInfo"],"sources":["./src/components/footer/hy-footer-info/hy-footer-info.scss?tag=hy-footer-info","./src/components/footer/hy-footer-info/hy-footer-info.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-footer-info {\n display: flex;\n flex-direction: column;\n max-height: auto;\n padding: 0 16px 40px 16px;\n place-content: center space-between;\n\n @include breakpoint($narrow) {\n flex-direction: column;\n margin: 0 auto;\n max-width: $fullhd;\n padding: 0 24px 32px 24px;\n }\n\n @include breakpoint($wide) {\n flex-direction: row;\n padding: 0 32px 36px 32px;\n }\n\n @include breakpoint($extrawide) {\n padding: 0 32px 40px 32px;\n }\n\n &__content {\n margin-bottom: 24px;\n width: 100%;\n\n @include breakpoint($narrow) {\n margin-bottom: 32px;\n width: 100%;\n }\n\n @include breakpoint($wide) {\n width: 31.11%;\n }\n\n .hy-heading {\n padding-top: 0 !important;\n }\n }\n\n &__ingress {\n @include font-size(15px, 20px);\n @include font-weight($regular);\n letter-spacing: -0.09px;\n\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n padding-bottom: 24px;\n\n @include breakpoint($wide) {\n @include font-size(16px, 22px);\n letter-spacing: -0.1px;\n padding-bottom: 16px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n }\n\n @include breakpoint($extrawide) {\n padding-bottom: 24px;\n }\n\n a {\n @include font-size(14px, 20px); // Paragraph Small size\n color: var(--link-blue);\n font-family: var(--main-font-family);\n font-weight: 600;\n display: inline-flex;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px);\n letter-spacing: -0.1px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n }\n\n &:hover {\n color: var(--brand-main);\n }\n }\n\n a[target=\"_blank\"]:after {\n display: block;\n content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n margin-left: 3px;\n transform: rotate(315deg);\n\n &:hover {\n content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n }\n }\n\n a[target=\"_blank\"]:hover {\n &:after {\n content: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>\");\n }\n }\n }\n\n &__links {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n max-height: auto;\n overflow: hidden;\n width: 100%;\n\n @include breakpoint($narrow) {\n align-content: space-between;\n max-height: 555px;\n width: 100%;\n }\n @include breakpoint($wide) {\n max-height: 530px;\n width: 65.56%;\n }\n @include breakpoint($overwide) {\n max-height: 460px;\n }\n\n &.is-group:not(.luomus) {\n @include breakpoint($narrow) {\n flex-direction: row;\n max-height: none;\n }\n }\n }\n\n .hy-accordion__content--inner-wrapper {\n width: 100%;\n }\n}\n\n.hy-footer-info.luomus {\n background-color: var(--grayscale-black);\n color: var(--grayscale-white);\n padding-top: 40px;\n\n .hy-footer-info__logo {\n @include font-size(18px, 16px);\n font-family: var(--main-font-family);\n font-weight: bold;\n letter-spacing: -0.9px;\n\n .hy-site-logo__label {\n max-width: 100%;\n }\n }\n\n .hy-footer-info__branding {\n padding: 22px 0 62px;\n a {\n img {\n height: 32px;\n width: 148px;\n }\n }\n }\n\n .luomus-footer-content {\n color: var(--grayscale-white);\n margin: 8px 0;\n\n &__link {\n @include font-size(18px, 24px);\n @include font-weight($bold);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-style: normal;\n letter-spacing: -0.36px;\n text-decoration: none;\n }\n\n &__description {\n @include font-size(16px, 22px);\n @include font-weight($regular);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-style: normal;\n letter-spacing: -0.1px;\n padding-bottom: 32px;\n }\n }\n}\n","export interface FooterInfoLinks {\n label: string;\n url: string;\n isExternal: string;\n isActive?: boolean;\n mainlink?: boolean;\n items: Array<FooterInfoLinks>;\n}\n\nexport interface LuomusFooterContent {\n heading: string;\n url: string;\n content?: string;\n}\n\nimport {Component, ComponentInterface, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport ResizeObserver from \"resize-observer-polyfill\";\nimport {\n ColorVariant,\n CtaLinkButtonVariants,\n FooterLinkItemColor,\n FooterLinkVariants,\n FooterVariant,\n HeadingSectionVariants,\n HeadingVarians,\n} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-footer-info\",\n styleUrl: \"hy-footer-info.scss\",\n shadow: false,\n})\nexport class HyFooterInfo implements ComponentInterface {\n @Element() el: HTMLElement;\n /*\n Content area title.\n /\n @Prop() textTitle: string;\n /\n Content area text.\n /\n @Prop() textDescription: string;\n /\n Content area link button text.\n /\n @Prop() linkText: string;\n /\n Content area link button url.\n /\n @Prop() linkUrl: string;\n @Prop() linkIsExternal: boolean = false;\n @Prop() linkScLabel?: string;\n\n /\n Logo url\n /\n @Prop() logoUrl?: string;\n /\n Logo label\n /\n @Prop() logoLabel?: string;\n\n /\n Luomus group Logo url for footer\n /\n @Prop() groupLogoUrl?: string;\n\n @Prop() isGroup: boolean;\n @Prop() isLuomusGroup: boolean = false;\n @State() isMobile: boolean;\n\n private ro: ResizeObserver;\n private _dataFooterInfoLinks: FooterInfoLinks[];\n private _dataLuomusFooterContent: LuomusFooterContent[];\n /\n Data for links to be displayed.\n */\n @Prop() dataFooterInfoLinks: FooterInfoLinks[] \| string;\n\n @Prop() luomusFooterContent: LuomusFooterContent[] \| string;\n\n async componentWillLoad() {\n this._dataFooterInfoLinks = await jsonParserWorker(this.dataFooterInfoLinks);\n this._dataLuomusFooterContent = await jsonParserWorker(this.luomusFooterContent);\n }\n\n componentDidLoad() {\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.checkForMobile(entry.contentRect.width);\n }\n });\n this.ro.observe(document.body);\n }\n\n disconnectedCallback() {\n this.ro.disconnect();\n }\n\n checkForMobile(size: number) {\n this.isMobile = size <= 479 ? true : false;\n }\n\n render() {\n const links = this._dataFooterInfoLinks as Array<FooterInfoLinks>;\n const luomusFooterContentItems = this._dataLuomusFooterContent as Array<LuomusFooterContent>;\n\n const variant = this.isGroup ? FooterLinkVariants.group : FooterLinkVariants.campus;\n const section = this.isGroup ? HeadingSectionVariants.groupFooterInfo : HeadingSectionVariants.defaultFooterInfo;\n\n const footerLinkItemClass = this.isGroup ? \"group\" : \"campus\";\n\n const scLabel = this.linkScLabel && this.linkScLabel.length > 0 ? this.linkScLabel : this.linkText;\n const logoColor = ColorVariant.white;\n const linksColor = this.isLuomusGroup ? FooterLinkItemColor.white : FooterLinkItemColor.black;\n\n return (\n <Host\n class={{\n \"hy-footer-info\": true,\n luomus: this.isLuomusGroup,\n }}\n >\n <div\n class={{\n \"hy-footer-info__content\": true,\n \"is-group\": this.isGroup,\n }}\n >\n {!this.isLuomusGroup && (\n <hy-heading heading={HeadingVarians.h2} section={section}>\n {this.textTitle}\n </hy-heading>\n )}\n {this.isLuomusGroup && (\n <div class=\"hy-footer-info__logo\">\n <hy-site-logo\n type={FooterVariant.footer}\n isGroup={this.isGroup}\n color={logoColor}\n url={this.logoUrl}\n label={this.logoLabel}\n />\n </div>\n )}\n {this.isLuomusGroup && (\n <div class={\"hy-footer-info__branding\"}>\n <a href={this.groupLogoUrl}>\n <img src={this.groupLogoUrl} alt={\"Luomus logo\"} />\n </a>\n </div>\n )}\n {!this.isLuomusGroup && (\n <div\n class={{\n \"hy-footer-info__ingress\": true,\n \"is-group\": this.isGroup,\n }}\n innerHTML={this.textDescription}\n ></div>\n )}\n {!this.isLuomusGroup && this.linkUrl && (\n <hy-cta-button\n link-content={this.linkText}\n sc-label={scLabel}\n is-external={this.linkIsExternal}\n url={this.linkUrl}\n variant={CtaLinkButtonVariants.onWhiteBkgd}\n />\n )}\n {this.isLuomusGroup &&\n luomusFooterContentItems &&\n luomusFooterContentItems.map((item) => {\n return (\n <div class=\"luomus-footer-content\">\n <a href={item.url} class=\"luomus-footer-content__link\">\n {item.heading}\n </a>\n {item.content && <div class=\"luomus-footer-content__description\" innerHTML={item.content}></div>}\n </div>\n );\n })}\n </div>\n {this.isMobile && this.isGroup === false ? (\n <div\n class={{\n \"hy-footer-info__links\": true,\n \"is-group\": this.isGroup,\n luomus: this.isLuomusGroup,\n }}\n >\n <hy-accordion-container accordionid={\"test\"}>\n {links &&\n links.map((link) => {\n return (\n <hy-accordion-item accordiontitle={link.label}>\n <hy-footer-link-item\n class={footerLinkItemClass}\n variant={variant}\n color={linksColor}\n label={link.label}\n url={link.url}\n main-link={link.mainlink}\n items={link.items}\n isMobile={this.isMobile}\n ></hy-footer-link-item>\n </hy-accordion-item>\n );\n })}\n </hy-accordion-container>\n </div>\n ) : (\n <div\n class={{\n \"hy-footer-info__links\": true,\n \"is-group\": this.isGroup,\n luomus: this.isLuomusGroup,\n }}\n >\n {links &&\n links.map((link) => {\n const external_link = link.isExternal === \"external\";\n return (\n <hy-footer-link-item\n is-luomus-group={this.isLuomusGroup}\n class={footerLinkItemClass}\n variant={variant}\n color={linksColor}\n label={link.label}\n url={link.url}\n is-external={external_link}\n main-link={link.mainlink}\n items={link.items}\n isMobile={this.isMobile}\n ></hy-footer-link-item>\n );\n })}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/components/hy-footer-link-item2.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { F as FooterLinkItemColor, g as FooterLinkVariants, H as HeadingVarians
 import { d as defineCustomElement$2 } from './heading.js';
 import { d as defineCustomElement$1 } from './icon.js';
-const hyFooterLinkItemCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}hy-footer-link-item:not([main-link]){width:100%}@media (min-width: 30rem){hy-footer-link-item:not([main-link]){width:50%}}hy-footer-link-item[main-link]{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;min-width:200px;width:100%}@media (min-width: 30rem){hy-footer-link-item[main-link]{width:50%}}hy-footer-link-item.group[main-link]:not([is-luomus-group]){-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:1rem}@media (min-width: 30rem){hy-footer-link-item.group[main-link]:not([is-luomus-group]){-ms-flex-preferred-size:50%;flex-basis:50%;margin:0}}.hy-footer-link-item--container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-footer-link-item--container .hy-footer-link-item:last-child{margin-bottom:16px}.hy-footer-link-item{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);margin-left:0;margin-right:0;position:relative;text-decoration:none}@media (min-width: 30rem){.hy-footer-link-item{margin-left:0;margin-right:24px}}@media (min-width: 60rem){.hy-footer-link-item{margin-left:32px;margin-right:0}}@media (min-width: 1601px){.hy-footer-link-item{margin-left:48px}}.hy-footer-link-item__main{border:0;padding:0;margin-right:-32px}.hy-footer-link-item__main .hy-heading__container>h3.hy-heading{font-size:1.125rem;line-height:22px;letter-spacing:-0.45px;padding:0 0 1px 0 !important}@media (min-width: 30rem){.hy-footer-link-item__main .hy-heading__container>h3.hy-heading{font-size:1.375rem;line-height:28px;letter-spacing:-0.44px}}.hy-footer-link-item__main .hy-heading__container>h3.hy-heading .hy-footer-link-item__link{color:var(--grayscale-black);font-family:var(--main-font-family);text-decoration:none;margin-bottom:12px}.hy-footer-link-item__color-black{font-size:0.875rem;line-height:18px;font-weight:400;border-bottom:1px solid var(--grayscale-black);color:var(--grayscale-black);letter-spacing:-0.5px;padding:16px 20px 14px 0}.hy-footer-link-item__color-black .hy-footer-link-item__icon svg{fill:var(--brand-main-nearly-black);height:12px;margin-right:2px;width:12px}.hy-footer-link-item__color-black .hy-heading__container>h3.hy-headinga.hy-footer-link-item__link:hover{color:var(--brand-main) !important;text-decoration:underline}.hy-footer-link-item__color-black .hy-heading__container>h3.hy-headinga.hy-footer-link-item__link:hover svg{fill:var(--brand-main)}.hy-footer-link-item__color-white{font-size:0.875rem;line-height:18px;font-weight:600;border-bottom:1px solid var(--grayscale-white);color:var(--grayscale-white);letter-spacing:-0.5px;padding:15px 20px 15px 0}.hy-footer-link-item__color-white .hy-footer-link-item__icon svg{fill:var(--grayscale-white)}.hy-footer-link-item__color-white .hy-heading__container>h3.hy-heading .hy-footer-link-item__link:hover{color:var(--grayscale-medium) !important}.hy-footer-link-item__color-white .hy-heading__container>h3.hy-heading .hy-footer-link-item__link:hover svg{fill:var(--grayscale-medium)}.hy-footer-link-item__icon{position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}";
+const hyFooterLinkItemCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}hy-footer-link-item:not([main-link]){width:100%}@media (min-width: 30rem){hy-footer-link-item:not([main-link]){width:50%}}hy-footer-link-item[main-link]{-ms-hyphens:auto;hyphens:auto;min-width:200px;width:100%}@media (min-width: 30rem){hy-footer-link-item[main-link]{width:50%}}hy-footer-link-item.group[main-link]:not([is-luomus-group]){-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:1rem}@media (min-width: 30rem){hy-footer-link-item.group[main-link]:not([is-luomus-group]){-ms-flex-preferred-size:50%;flex-basis:50%;margin:0}}.hy-footer-link-item--container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-footer-link-item--container .hy-footer-link-item:last-child{margin-bottom:16px}.hy-footer-link-item{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);margin-left:0;margin-right:0;position:relative;text-decoration:none}@media (min-width: 30rem){.hy-footer-link-item{margin-left:0;margin-right:24px}}@media (min-width: 60rem){.hy-footer-link-item{margin-left:32px;margin-right:0}}@media (min-width: 1601px){.hy-footer-link-item{margin-left:48px}}.hy-footer-link-item__main{border:0;padding:0;margin-right:-32px}.hy-footer-link-item__main .hy-heading__container>h3.hy-heading{font-size:1.125rem;line-height:22px;letter-spacing:-0.45px;padding:0 0 1px 0 !important}@media (min-width: 30rem){.hy-footer-link-item__main .hy-heading__container>h3.hy-heading{font-size:1.375rem;line-height:28px;letter-spacing:-0.44px}}.hy-footer-link-item__main .hy-heading__container>h3.hy-heading .hy-footer-link-item__link{color:var(--grayscale-black);font-family:var(--main-font-family);text-decoration:none;margin-bottom:12px}.hy-footer-link-item__color-black{font-size:0.875rem;line-height:18px;font-weight:400;border-bottom:1px solid var(--grayscale-black);color:var(--grayscale-black);letter-spacing:-0.5px;padding:16px 20px 14px 0}.hy-footer-link-item__color-black .hy-footer-link-item__icon svg{fill:var(--brand-main-nearly-black);height:12px;margin-right:2px;width:12px}.hy-footer-link-item__color-black .hy-heading__container>h3.hy-headinga.hy-footer-link-item__link:hover{color:var(--brand-main) !important;text-decoration:underline}.hy-footer-link-item__color-black .hy-heading__container>h3.hy-headinga.hy-footer-link-item__link:hover svg{fill:var(--brand-main)}.hy-footer-link-item__color-white{font-size:0.875rem;line-height:18px;font-weight:600;border-bottom:1px solid var(--grayscale-white);color:var(--grayscale-white);letter-spacing:-0.5px;padding:15px 20px 15px 0}.hy-footer-link-item__color-white .hy-footer-link-item__icon svg{fill:var(--grayscale-white)}.hy-footer-link-item__color-white .hy-heading__container>h3.hy-heading .hy-footer-link-item__link:hover{color:var(--grayscale-medium) !important}.hy-footer-link-item__color-white .hy-heading__container>h3.hy-heading .hy-footer-link-item__link:hover svg{fill:var(--grayscale-medium)}.hy-footer-link-item__icon{position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}";
 const HyFooterLinkItem = /*@__PURE__*/ proxyCustomElement(class HyFooterLinkItem extends HTMLElement {
   constructor() {

package/components/hy-footer-link-item2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"hy-footer-link-item2.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,~~qwIAAqwI~~;;~~MCQpxI~~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","names":[],"sources":["./src/components/footer/hy-footer-link-item/hy-footer-link-item.scss?tag=hy-footer-link-item","./src/components/footer/hy-footer-link-item/hy-footer-link-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\nhy-footer-link-item:not([main-link]) {\n width: 100%;\n\n @include breakpoint($narrow) {\n width: 50%;\n }\n}\n\nhy-footer-link-item[main-link] {\n hyphens: auto;\n min-width: 200px;\n width: 100%;\n\n @include breakpoint($narrow) {\n width: 50%;\n }\n}\n\nhy-footer-link-item.group[main-link]:not([is-luomus-group]) {\n flex-basis: 100%;\n margin-top: 1rem;\n\n @include breakpoint($narrow) {\n flex-basis: 50%;\n margin: 0;\n }\n}\n\n.hy-footer-link-item--container {\n display: flex;\n flex-direction: column;\n\n .hy-footer-link-item:last-child {\n margin-bottom: 16px;\n }\n}\n\n//.hy-footer-link-item__main .hy-heading__container>h3.hy-heading .hy-footer-link-item__link {\n.hy-footer-link-item {\n display: flex;\n font-family: var(--main-font-family);\n margin-left: 0;\n margin-right: 0;\n position: relative;\n text-decoration: none;\n\n @include breakpoint($narrow) {\n margin-left: 0;\n margin-right: 24px;\n //padding: 15px 20px 15px 0;\n }\n\n @include breakpoint($wide) {\n margin-left: 32px;\n margin-right: 0;\n //padding: 15px 20px 15px 0;\n }\n\n @include breakpoint($xlarge) {\n margin-left: 48px;\n }\n\n &__main {\n border: 0;\n padding: 0;\n margin-right: -32px;\n\n .hy-heading__container > h3.hy-heading {\n @include font-size(18px, 22px);\n letter-spacing: -0.45px;\n padding: 0 0 1px 0 !important;\n\n @include breakpoint($narrow) {\n @include font-size(22px, 28px);\n letter-spacing: -0.44px;\n }\n\n .hy-footer-link-item__link {\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n text-decoration: none;\n margin-bottom: 12px;\n }\n }\n }\n\n &__color-black {\n @include font-size(14px, 18px);\n @include font-weight($regular);\n border-bottom: 1px solid var(--grayscale-black);\n color: var(--grayscale-black);\n letter-spacing: -0.5px;\n padding: 16px 20px 14px 0;\n\n .hy-footer-link-item__icon svg {\n fill: var(--brand-main-nearly-black);\n height: 12px;\n margin-right: 2px;\n width: 12px;\n }\n\n .hy-heading__container > h3.hy-heading {\n &a.hy-footer-link-item__link:hover {\n color: var(--brand-main) !important;\n text-decoration: underline;\n\n svg {\n fill: var(--brand-main);\n }\n }\n }\n }\n\n &__color-white {\n @include font-size(14px, 18px);\n @include font-weight($semibold);\n border-bottom: 1px solid var(--grayscale-white);\n color: var(--grayscale-white);\n letter-spacing: -0.5px;\n padding: 15px 20px 15px 0;\n\n .hy-footer-link-item__icon svg {\n fill: var(--grayscale-white);\n }\n\n .hy-heading__container > h3.hy-heading {\n .hy-footer-link-item__link:hover {\n color: var(--grayscale-medium) !important;\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n }\n\n &__icon {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {FooterLinkItemColor, FooterLinkVariants, HeadingVarians} from \"../../../utils/utils\";\n\n@Component({\n tag: \"hy-footer-link-item\",\n styleUrl: \"hy-footer-link-item.scss\",\n shadow: false,\n})\nexport class HyFooterLinkItem {\n @Prop() label: string;\n @Prop() url: string;\n @Prop() isExternal: boolean = false;\n @Prop() mainLink: boolean = false;\n @Prop() items: Array<any>;\n @Prop() color: FooterLinkItemColor = FooterLinkItemColor.black;\n @Prop() isMobile: boolean;\n @Prop() variant: FooterLinkVariants = FooterLinkVariants.base;\n @Prop() isLuomusGroup: boolean = false;\n\n render() {\n const containerClassAttributes = [\n \"hy-footer-link-item--container\",\n `hy-footer-link-item__${this.variant}`,\n this.items && \"hy-footer-link-item__has-children\",\n ].join(\" \");\n const classAttributes = [\n \"hy-footer-link-item\",\n this.mainLink && \"hy-footer-link-item__main\",\n `hy-footer-link-item__color-${this.color}`,\n ].join(\" \");\n const headingClassAttributes = [\n \"hy-footer-link-item\",\n \"hy-footer-link-item__heading\",\n this.mainLink && \"hy-footer-link-item__main\",\n `hy-footer-link-item__heading__color-${this.color}`,\n ].join(\" \");\n const linkClassAttributes = [\n \"hy-footer-link-item\",\n `hy-footer-link-item__color-${this.color}`,\n this.isLuomusGroup ? `luomus` : \"\",\n ].join(\" \");\n\n if (this.items) {\n if (this.isMobile && this.variant !== FooterLinkVariants.group) {\n return (\n <div class={containerClassAttributes}>\n {this.items.map((item) => {\n const target = item.isExternal === \"external\" ? \"_blank\" : \"_self\";\n return (\n <a class={linkClassAttributes} href={item.url} target={target} style={{color: this.color}}>\n {item.label}\n <hy-icon class={\"hy-footer-link-item__icon\"} icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n );\n })}\n </div>\n );\n } else {\n return (\n <div class={containerClassAttributes}>\n <hy-heading class={headingClassAttributes} heading={HeadingVarians.h3}>\n {this.url.length > 0 && (\n <a class={\"hy-footer-link-item__link\"} href={this.url} style={{color: this.color}}>\n {this.label}\n </a>\n )}\n {this.url.length == 0 && <div class={\"hy-footer-link-item__link\"}>{this.label}</div>}\n </hy-heading>\n {this.items.map((item) => {\n const target = item.isExternal === \"external\" ? \"_blank\" : \"_self\";\n return (\n <a class={linkClassAttributes} href={item.url} target={target} style={{color: this.color}}>\n {item.label}\n <hy-icon class={\"hy-footer-link-item__icon\"} icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n );\n })}\n </div>\n );\n }\n } else {\n const target = this.isExternal ? \"_blank\" : \"_self\";\n return (\n <a class={classAttributes} href={this.url} style={{color: this.color}} target={target}>\n {this.label}\n <hy-icon class={\"hy-footer-link-item__icon\"} icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n );\n }\n }\n}\n"],"version":3}
1	+ {"file":"hy-footer-link-item2.js","mappings":"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","names":[],"sources":["./src/components/footer/hy-footer-link-item/hy-footer-link-item.scss?tag=hy-footer-link-item","./src/components/footer/hy-footer-link-item/hy-footer-link-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\nhy-footer-link-item:not([main-link]) {\n width: 100%;\n\n @include breakpoint($narrow) {\n width: 50%;\n }\n}\n\nhy-footer-link-item[main-link] {\n hyphens: auto;\n min-width: 200px;\n width: 100%;\n\n @include breakpoint($narrow) {\n width: 50%;\n }\n}\n\nhy-footer-link-item.group[main-link]:not([is-luomus-group]) {\n flex-basis: 100%;\n margin-top: 1rem;\n\n @include breakpoint($narrow) {\n flex-basis: 50%;\n margin: 0;\n }\n}\n\n.hy-footer-link-item--container {\n display: flex;\n flex-direction: column;\n\n .hy-footer-link-item:last-child {\n margin-bottom: 16px;\n }\n}\n\n//.hy-footer-link-item__main .hy-heading__container>h3.hy-heading .hy-footer-link-item__link {\n.hy-footer-link-item {\n display: flex;\n font-family: var(--main-font-family);\n margin-left: 0;\n margin-right: 0;\n position: relative;\n text-decoration: none;\n\n @include breakpoint($narrow) {\n margin-left: 0;\n margin-right: 24px;\n //padding: 15px 20px 15px 0;\n }\n\n @include breakpoint($wide) {\n margin-left: 32px;\n margin-right: 0;\n //padding: 15px 20px 15px 0;\n }\n\n @include breakpoint($xlarge) {\n margin-left: 48px;\n }\n\n &__main {\n border: 0;\n padding: 0;\n margin-right: -32px;\n\n .hy-heading__container > h3.hy-heading {\n @include font-size(18px, 22px);\n letter-spacing: -0.45px;\n padding: 0 0 1px 0 !important;\n\n @include breakpoint($narrow) {\n @include font-size(22px, 28px);\n letter-spacing: -0.44px;\n }\n\n .hy-footer-link-item__link {\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n text-decoration: none;\n margin-bottom: 12px;\n }\n }\n }\n\n &__color-black {\n @include font-size(14px, 18px);\n @include font-weight($regular);\n border-bottom: 1px solid var(--grayscale-black);\n color: var(--grayscale-black);\n letter-spacing: -0.5px;\n padding: 16px 20px 14px 0;\n\n .hy-footer-link-item__icon svg {\n fill: var(--brand-main-nearly-black);\n height: 12px;\n margin-right: 2px;\n width: 12px;\n }\n\n .hy-heading__container > h3.hy-heading {\n &a.hy-footer-link-item__link:hover {\n color: var(--brand-main) !important;\n text-decoration: underline;\n\n svg {\n fill: var(--brand-main);\n }\n }\n }\n }\n\n &__color-white {\n @include font-size(14px, 18px);\n @include font-weight($semibold);\n border-bottom: 1px solid var(--grayscale-white);\n color: var(--grayscale-white);\n letter-spacing: -0.5px;\n padding: 15px 20px 15px 0;\n\n .hy-footer-link-item__icon svg {\n fill: var(--grayscale-white);\n }\n\n .hy-heading__container > h3.hy-heading {\n .hy-footer-link-item__link:hover {\n color: var(--grayscale-medium) !important;\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n }\n\n &__icon {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {FooterLinkItemColor, FooterLinkVariants, HeadingVarians} from \"../../../utils/utils\";\n\n@Component({\n tag: \"hy-footer-link-item\",\n styleUrl: \"hy-footer-link-item.scss\",\n shadow: false,\n})\nexport class HyFooterLinkItem {\n @Prop() label: string;\n @Prop() url: string;\n @Prop() isExternal: boolean = false;\n @Prop() mainLink: boolean = false;\n @Prop() items: Array<any>;\n @Prop() color: FooterLinkItemColor = FooterLinkItemColor.black;\n @Prop() isMobile: boolean;\n @Prop() variant: FooterLinkVariants = FooterLinkVariants.base;\n @Prop() isLuomusGroup: boolean = false;\n\n render() {\n const containerClassAttributes = [\n \"hy-footer-link-item--container\",\n `hy-footer-link-item__${this.variant}`,\n this.items && \"hy-footer-link-item__has-children\",\n ].join(\" \");\n const classAttributes = [\n \"hy-footer-link-item\",\n this.mainLink && \"hy-footer-link-item__main\",\n `hy-footer-link-item__color-${this.color}`,\n ].join(\" \");\n const headingClassAttributes = [\n \"hy-footer-link-item\",\n \"hy-footer-link-item__heading\",\n this.mainLink && \"hy-footer-link-item__main\",\n `hy-footer-link-item__heading__color-${this.color}`,\n ].join(\" \");\n const linkClassAttributes = [\n \"hy-footer-link-item\",\n `hy-footer-link-item__color-${this.color}`,\n this.isLuomusGroup ? `luomus` : \"\",\n ].join(\" \");\n\n if (this.items) {\n if (this.isMobile && this.variant !== FooterLinkVariants.group) {\n return (\n <div class={containerClassAttributes}>\n {this.items.map((item) => {\n const target = item.isExternal === \"external\" ? \"_blank\" : \"_self\";\n return (\n <a class={linkClassAttributes} href={item.url} target={target} style={{color: this.color}}>\n {item.label}\n <hy-icon class={\"hy-footer-link-item__icon\"} icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n );\n })}\n </div>\n );\n } else {\n return (\n <div class={containerClassAttributes}>\n <hy-heading class={headingClassAttributes} heading={HeadingVarians.h3}>\n {this.url.length > 0 && (\n <a class={\"hy-footer-link-item__link\"} href={this.url} style={{color: this.color}}>\n {this.label}\n </a>\n )}\n {this.url.length == 0 && <div class={\"hy-footer-link-item__link\"}>{this.label}</div>}\n </hy-heading>\n {this.items.map((item) => {\n const target = item.isExternal === \"external\" ? \"_blank\" : \"_self\";\n return (\n <a class={linkClassAttributes} href={item.url} target={target} style={{color: this.color}}>\n {item.label}\n <hy-icon class={\"hy-footer-link-item__icon\"} icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n );\n })}\n </div>\n );\n }\n } else {\n const target = this.isExternal ? \"_blank\" : \"_self\";\n return (\n <a class={classAttributes} href={this.url} style={{color: this.color}} target={target}>\n {this.label}\n <hy-icon class={\"hy-footer-link-item__icon\"} icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n );\n }\n }\n}\n"],"version":3}