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

@itcenteratunihelsinki/huds-lib 0.8.59 → 0.8.60

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

Files changed (28) hide show

package/dist/huds-lib/hy-general-list_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["hyGeneralListCss","HyGeneralList","GeneralListTypes","list","async","this","_dataItems","jsonParserWorker","dataItems","hyMainDiv","el","closest","classList","contains","hasSidebar","newValue","oldValue","render","classAttributes","type","join","listData","Object","values","truncate","str","n","length","substr","h","Host","class","map","item","target","blank","url","description","truncateDescription","truncateLimit","id","imageAlt","imageUrl","title","label","subLabel","tag","date","mb","hyGeneralListItemCss","HyGeneralListItem","listStyle","contentClassAttributes","imageClassAttributes","sidebarClass","titleClassAttributes","descriptionClassAttributes","aspectRatioWidth","aspectRatioHeight","aspect","aspectRatio","href","style","loading","disableLazy","alt","src","itemTitle"],"sources":["./src/components/hy-general-list/hy-general-list.scss?tag=hy-general-list","./src/components/hy-general-list/hy-general-list.tsx","./src/components/hy-general-list-item/hy-general-list-item.scss?tag=hy-general-list-item","./src/components/hy-general-list-item/hy-general-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-general-list {\n list-style: none;\n margin: 0;\n padding: 0;\n\n &--style-grid {\n display: flex;\n display: grid;\n gap: 32px 0;\n\n @media screen and (min-width: 768px) {\n grid-template-columns: repeat(2, 1fr);\n gap: 32px 24px;\n }\n\n @media screen and (min-width: 1024px) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @media screen and (min-width: 1920px) {\n gap: 32px;\n }\n\n li {\n background-color: var(--grayscale-background-box);\n width: 100%;\n height: auto;\n }\n }\n}\n","export interface ListItemValue {\n description: string;\n id: string;\n imageAlt: string;\n imageUrl: string;\n label: string;\n subLabel: string;\n date: string;\n tag: string;\n title: string;\n type: string;\n url: string;\n target: boolean;\n}\n\nimport {Component, Element, h, Prop, State, Host, Watch} from \"@stencil/core\";\nimport {GeneralListTypes} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n tag: \"hy-general-list\",\n styleUrl: \"hy-general-list.scss\",\n shadow: false,\n})\nexport class HyGeneralList {\n @Prop() type: GeneralListTypes = GeneralListTypes.list;\n @Prop() blank: boolean = true;\n @Prop() dataItems: ListItemValue[] \| string;\n @Prop() truncateDescription: boolean = true;\n @Prop() truncateLimit: number = 140;\n private _dataItems: ListItemValue[];\n @Element() el: HTMLElement;\n @State() hasSidebar: boolean = false;\n\n async componentWillLoad() {\n this._dataItems = await jsonParserWorker(this.dataItems);\n\n const hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.hasSidebar = true;\n }\n }\n }\n\n @Watch(\"dataItems\")\n async watchPropHandler(newValue: string \| number, oldValue: string \| number) {\n if (newValue !== oldValue) {\n this._dataItems = await jsonParserWorker(this.dataItems);\n }\n }\n\n render() {\n const classAttributes = [\n \"hy-general-list\",\n this.hasSidebar ? \"hy-general-list--with-sidebar\" : \"\",\n `hy-general-list--style-${this.type}`,\n ].join(\" \");\n\n let listData = this._dataItems;\n if (typeof this._dataItems === \"object\") {\n listData = Object.values(this._dataItems);\n }\n\n function truncate(str, n) {\n return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n }\n\n return (\n <Host>\n <ul class={classAttributes}>\n {listData &&\n listData.map((item) => (\n <li>\n <hy-general-list-item\n has-sidebar={this.hasSidebar}\n target={this.blank}\n data-location={item.url}\n description={\n this.truncateDescription ? truncate(item.description, this.truncateLimit) : item.description\n }\n id={item.id}\n imageAlt={item.imageAlt}\n imageUrl={item.imageUrl}\n item-title={item.title}\n label={item.label}\n sub-label={item.subLabel}\n tag={item.tag}\n date={item.date}\n type={item.type}\n url={item.url}\n list-style={this.type}\n ></hy-general-list-item>\n </li>\n ))}\n </ul>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n",":host {\n display: block;\n height: 100%;\n}\n\n.hy-general-list-item {\n font-family: var(--main-font-family);\n margin-bottom: 1rem;\n height: 100%;\n\n &--style-grid {\n .hy-general-list-item__link {\n height: 100%;\n\n @include breakpoint($narrow) {\n flex-direction: column;\n }\n }\n\n .hy-general-list-item__image-container {\n border: 1px solid var(--grayscale-light);\n max-width: 100%;\n\n @include breakpoint(max-width 479px) {\n display: flex;\n }\n }\n\n .hy-general-list-item__text-container {\n @include breakpoint($wide) {\n padding: 12px 12px 32px 12px;\n }\n @include breakpoint($extrawide) {\n padding: 12px 12px 32px 12px;\n }\n }\n }\n}\n\n.hy-genenral-list-item__meta {\n @include font-size(12px, 14px);\n @include font-weight($semibold);\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n letter-spacing: -0.1px;\n text-transform: uppercase;\n margin: 9px 0;\n\n &__date {\n @include font-weight($regular);\n margin-left: 4px;\n }\n}\n\n.hy-general-list-item__link {\n display: flex;\n flex-direction: column;\n position: relative;\n text-decoration: none;\n\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus {\n .hy-general-list-item__type span {\n background-color: var(--brand-main);\n }\n\n .hy-general-list-item__title {\n color: var(--brand-main);\n text-decoration: underline;\n }\n }\n}\n\n.hy-general-list-item__image-container {\n display: flex;\n justify-content: stretch;\n margin: 0;\n position: relative;\n width: 100%;\n\n @include breakpoint(max-width 479px) {\n display: none;\n }\n\n @include breakpoint($narrow) {\n max-width: 35.7%;\n }\n\n @include breakpoint($wide) {\n max-width: 23.13%;\n }\n\n @include breakpoint($extrawide) {\n max-width: 23.03%;\n }\n\n &:before {\n content: \"\";\n display: block;\n padding-top: var(--aspectRatio);\n }\n\n img {\n bottom: 0;\n height: 100%;\n left: 0;\n object-fit: cover;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n }\n}\n\n.hy-general-list-item__image {\n background-color: #ececec;\n width: 100%;\n height: 100%;\n}\n\n.hy-general-list-item__type {\n background-color: var(--grayscale-background-box);\n padding-top: 16px;\n z-index: 10;\n\n @include breakpoint($narrow) {\n background-color: transparent;\n left: -8px;\n padding-top: 0;\n position: absolute;\n top: 16px;\n }\n\n &__major {\n @include font-size(12px, 14px);\n @include font-weight($bold);\n background-color: var(--grayscale-black);\n color: var(--grayscale-white);\n letter-spacing: -0.1px;\n padding: 5px 8px;\n text-transform: uppercase;\n align-self: baseline;\n margin-left: -8px;\n\n @include breakpoint($narrow) {\n margin-left: 0;\n }\n }\n\n &__sub {\n @include font-size(12px, 14px);\n background-color: var(--grayscale-black);\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n letter-spacing: -0.1px;\n padding: 5px 8px;\n margin-left: -8px;\n }\n}\n\n.hy-general-list-item__text-container {\n background-color: var(--grayscale-background-box);\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n padding: 16px 12px;\n\n @include breakpoint($wide) {\n padding: 14px 32px 24px 24px;\n }\n\n @include breakpoint($extrawide) {\n padding: 20px 104px 32px 32px;\n }\n}\n\n.hy-general-list-item__title {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n letter-spacing: -0.45px;\n margin-bottom: 8px;\n margin-top: 0;\n\n @include breakpoint($xlarge) {\n @include font-size(20px, 24px);\n letter-spacing: -0.5px;\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(20px, 24px);\n letter-spacing: -0.5px;\n }\n }\n}\n\n.hy-general-list-item__description {\n @include font-size(15px, 20px);\n color: var(--grayscale-dark);\n display: none;\n letter-spacing: -0.09px;\n margin: 0;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n display: block;\n letter-spacing: -0.08px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 20px);\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(14px, 20px);\n }\n }\n}\n","import {Component, Element, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-general-list-item\",\n styleUrl: \"hy-general-list-item.scss\",\n shadow: false,\n})\nexport class HyGeneralListItem {\n @Prop() hasSidebar: boolean = true;\n @Prop() description?: string;\n @Prop() imageAlt: string = \"\";\n @Prop() imageUrl: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() itemTitle?: string;\n @Prop() label?: string;\n @Prop() subLabel: string = \"\";\n @Prop() date: string = \"\";\n @Prop() tag: string = \"\";\n @Prop() type?: string;\n @Prop() url?: string;\n @Prop() listStyle?: string;\n @Prop() target: boolean = true;\n\n @Element() el: HTMLElement;\n\n render() {\n const classAttributes = [\"hy-general-list-item\", `hy-general-list-item--style-${this.listStyle}`].join(\" \");\n const contentClassAttributes = [\"hy-general-list-item__text-container\"].join(\" \");\n const imageClassAttributes = [\"hy-general-list-item__image-container\"].join(\" \");\n\n const sidebarClass = this.hasSidebar ? \"common\" : \"large\";\n const titleClassAttributes = [\"hy-general-list-item__title\", `hy-general-list-item__title__${sidebarClass}`].join(\n \" \"\n );\n const descriptionClassAttributes = [\n \"hy-general-list-item__description\",\n `hy-general-list-item__description__${sidebarClass}`,\n ].join(\" \");\n\n const aspectRatioWidth = 16;\n const aspectRatioHeight = 10;\n const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n const aspectRatio = {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n };\n\n return (\n <article class={classAttributes}>\n <a class=\"hy-general-list-item__link\" href={this.url} target={this.target ? \"_blank\" : \"_self\"}>\n {this.type && (\n <div class=\"hy-general-list-item__type\">\n <span class=\"hy-general-list-item__type__major\">{this.label}</span>\n <span class=\"hy-general-list-item__type__sub\">{this.subLabel}</span>\n </div>\n )}\n {this.imageUrl && (\n <figure class={imageClassAttributes} style={aspectRatio}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAlt}\n class=\"hy-general-list-item__image\"\n src={this.imageUrl}\n />\n </figure>\n )}\n <div class={contentClassAttributes}>\n {(this.tag \|\| this.date) && (\n <span class=\"hy-genenral-list-item__meta\">\n {this.tag}\n <span class=\"hy-genenral-list-item__meta__date\">\n {this.tag && \"\|\"} {this.date}\n </span>\n </span>\n )}\n <h3 class={titleClassAttributes}>{this.itemTitle}</h3>\n <p class={descriptionClassAttributes}>{this.description}</p>\n </div>\n </a>\n </article>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["hyGeneralListCss","HyGeneralList","GeneralListTypes","list","async","this","_dataItems","jsonParserWorker","dataItems","hyMainDiv","el","closest","classList","contains","hasSidebar","newValue","oldValue","render","classAttributes","type","join","listData","Object","values","truncate","str","n","length","substr","h","Host","class","map","item","target","blank","url","description","truncateDescription","truncateLimit","id","imageAlt","imageUrl","title","label","subLabel","tag","date","mb","hyGeneralListItemCss","HyGeneralListItem","listStyle","contentClassAttributes","imageClassAttributes","sidebarClass","titleClassAttributes","descriptionClassAttributes","aspectRatioWidth","aspectRatioHeight","aspect","aspectRatio","href","style","loading","disableLazy","alt","src","itemTitle"],"sources":["./src/components/hy-general-list/hy-general-list.scss?tag=hy-general-list","./src/components/hy-general-list/hy-general-list.tsx","./src/components/hy-general-list-item/hy-general-list-item.scss?tag=hy-general-list-item","./src/components/hy-general-list-item/hy-general-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.hy-general-list {\n list-style: none;\n margin: 0;\n padding: 0;\n\n &--style-grid {\n display: flex;\n display: grid;\n gap: 32px 0;\n\n @media screen and (min-width: 768px) {\n grid-template-columns: repeat(2, 1fr);\n gap: 32px 24px;\n }\n\n @media screen and (min-width: 1024px) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @media screen and (min-width: 1920px) {\n gap: 32px;\n }\n\n li {\n background-color: var(--grayscale-background-box);\n width: 100%;\n height: auto;\n }\n }\n}\n","export interface ListItemValue {\n description: string;\n id: string;\n imageAlt: string;\n imageUrl: string;\n label: string;\n subLabel: string;\n date: string;\n tag: string;\n title: string;\n type: string;\n url: string;\n target: boolean;\n}\n\nimport {Component, Element, h, Prop, State, Host, Watch} from \"@stencil/core\";\nimport {GeneralListTypes} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n tag: \"hy-general-list\",\n styleUrl: \"hy-general-list.scss\",\n shadow: false,\n})\nexport class HyGeneralList {\n @Prop() type: GeneralListTypes = GeneralListTypes.list;\n @Prop() blank: boolean = true;\n @Prop() dataItems: ListItemValue[] \| string;\n @Prop() truncateDescription: boolean = true;\n @Prop() truncateLimit: number = 140;\n private _dataItems: ListItemValue[];\n @Element() el: HTMLElement;\n @State() hasSidebar: boolean = false;\n\n async componentWillLoad() {\n this._dataItems = await jsonParserWorker(this.dataItems);\n\n const hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.hasSidebar = true;\n }\n }\n }\n\n @Watch(\"dataItems\")\n async watchPropHandler(newValue: string \| number, oldValue: string \| number) {\n if (newValue !== oldValue) {\n this._dataItems = await jsonParserWorker(this.dataItems);\n }\n }\n\n render() {\n const classAttributes = [\n \"hy-general-list\",\n this.hasSidebar ? \"hy-general-list--with-sidebar\" : \"\",\n `hy-general-list--style-${this.type}`,\n ].join(\" \");\n\n let listData = this._dataItems;\n if (typeof this._dataItems === \"object\") {\n listData = Object.values(this._dataItems);\n }\n\n function truncate(str, n) {\n return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n }\n\n return (\n <Host>\n <ul class={classAttributes}>\n {listData &&\n listData.map((item) => (\n <li>\n <hy-general-list-item\n has-sidebar={this.hasSidebar}\n target={this.blank}\n data-location={item.url}\n description={\n this.truncateDescription ? truncate(item.description, this.truncateLimit) : item.description\n }\n id={item.id}\n imageAlt={item.imageAlt}\n imageUrl={item.imageUrl}\n item-title={item.title}\n label={item.label}\n sub-label={item.subLabel}\n tag={item.tag}\n date={item.date}\n type={item.type}\n url={item.url}\n list-style={this.type}\n ></hy-general-list-item>\n </li>\n ))}\n </ul>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n",":host {\n display: block;\n height: 100%;\n}\n\n.hy-general-list-item {\n font-family: var(--main-font-family);\n margin-bottom: 1rem;\n height: 100%;\n\n &--style-grid {\n .hy-general-list-item__link {\n height: 100%;\n\n @include breakpoint($narrow) {\n flex-direction: column;\n }\n }\n\n .hy-general-list-item__image-container {\n border: 1px solid var(--grayscale-light);\n max-width: 100%;\n\n @include breakpoint(max-width 479px) {\n display: flex;\n }\n }\n\n .hy-general-list-item__text-container {\n @include breakpoint($wide) {\n padding: 12px 12px 32px 12px;\n }\n @include breakpoint($extrawide) {\n padding: 12px 12px 32px 12px;\n }\n }\n }\n}\n\n.hy-genenral-list-item__meta {\n @include font-size(12px, 14px);\n @include font-weight($semibold);\n color: var(--grayscale-dark);\n font-family: var(--main-font-family);\n letter-spacing: -0.1px;\n text-transform: uppercase;\n margin: 9px 0;\n\n &__date {\n @include font-weight($regular);\n margin-left: 4px;\n }\n}\n\n.hy-general-list-item__link {\n display: flex;\n flex-direction: column;\n position: relative;\n text-decoration: none;\n\n @include breakpoint($narrow) {\n flex-direction: row;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus {\n .hy-general-list-item__type span {\n background-color: var(--brand-main);\n }\n\n .hy-general-list-item__title {\n color: var(--brand-main);\n text-decoration: underline;\n }\n }\n}\n\n.hy-general-list-item__image-container {\n display: flex;\n justify-content: stretch;\n margin: 0;\n position: relative;\n width: 100%;\n\n @include breakpoint(max-width 479px) {\n display: none;\n }\n\n @include breakpoint($narrow) {\n max-width: 35.7%;\n }\n\n @include breakpoint($wide) {\n max-width: 23.13%;\n }\n\n @include breakpoint($extrawide) {\n max-width: 23.03%;\n }\n\n &:before {\n content: \"\";\n display: block;\n padding-top: var(--aspectRatio);\n }\n\n img {\n bottom: 0;\n height: 100%;\n left: 0;\n object-fit: cover;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n }\n}\n\n.hy-general-list-item__image {\n background-color: #ececec;\n width: 100%;\n height: 100%;\n}\n\n.hy-general-list-item__type {\n background-color: var(--grayscale-background-box);\n padding-top: 16px;\n z-index: 10;\n\n @include breakpoint($narrow) {\n background-color: transparent;\n left: -8px;\n padding-top: 0;\n position: absolute;\n top: 16px;\n }\n\n &__major {\n @include font-size(12px, 14px);\n @include font-weight($bold);\n background-color: var(--grayscale-black);\n color: var(--grayscale-white);\n letter-spacing: -0.1px;\n padding: 5px 8px;\n text-transform: uppercase;\n align-self: baseline;\n margin-left: -8px;\n\n @include breakpoint($narrow) {\n margin-left: 0;\n }\n }\n\n &__sub {\n @include font-size(12px, 14px);\n background-color: var(--grayscale-black);\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n letter-spacing: -0.1px;\n padding: 5px 8px;\n margin-left: -8px;\n }\n}\n\n.hy-general-list-item__text-container {\n background-color: var(--grayscale-background-box);\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n padding: 16px 12px;\n\n @include breakpoint($wide) {\n padding: 14px 32px 24px 24px;\n }\n\n @include breakpoint($extrawide) {\n padding: 20px 104px 32px 32px;\n }\n}\n\n.hy-general-list-item__title {\n @include font-size(18px, 22px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n letter-spacing: -0.45px;\n margin-bottom: 8px;\n margin-top: 0;\n text-wrap: balance;\n\n @include breakpoint($xlarge) {\n @include font-size(20px, 24px);\n letter-spacing: -0.5px;\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(20px, 24px);\n letter-spacing: -0.5px;\n }\n }\n}\n\n.hy-general-list-item__description {\n @include font-size(15px, 20px);\n color: var(--grayscale-dark);\n display: none;\n letter-spacing: -0.09px;\n margin: 0;\n\n @include breakpoint($narrow) {\n @include font-size(14px, 18px);\n display: block;\n letter-spacing: -0.08px;\n }\n\n @include breakpoint($xlarge) {\n @include font-size(14px, 20px);\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(14px, 20px);\n }\n }\n}\n","import {Component, Element, h, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-general-list-item\",\n styleUrl: \"hy-general-list-item.scss\",\n shadow: false,\n})\nexport class HyGeneralListItem {\n @Prop() hasSidebar: boolean = true;\n @Prop() description?: string;\n @Prop() imageAlt: string = \"\";\n @Prop() imageUrl: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() itemTitle?: string;\n @Prop() label?: string;\n @Prop() subLabel: string = \"\";\n @Prop() date: string = \"\";\n @Prop() tag: string = \"\";\n @Prop() type?: string;\n @Prop() url?: string;\n @Prop() listStyle?: string;\n @Prop() target: boolean = true;\n\n @Element() el: HTMLElement;\n\n render() {\n const classAttributes = [\"hy-general-list-item\", `hy-general-list-item--style-${this.listStyle}`].join(\" \");\n const contentClassAttributes = [\"hy-general-list-item__text-container\"].join(\" \");\n const imageClassAttributes = [\"hy-general-list-item__image-container\"].join(\" \");\n\n const sidebarClass = this.hasSidebar ? \"common\" : \"large\";\n const titleClassAttributes = [\"hy-general-list-item__title\", `hy-general-list-item__title__${sidebarClass}`].join(\n \" \"\n );\n const descriptionClassAttributes = [\n \"hy-general-list-item__description\",\n `hy-general-list-item__description__${sidebarClass}`,\n ].join(\" \");\n\n const aspectRatioWidth = 16;\n const aspectRatioHeight = 10;\n const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n const aspectRatio = {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n };\n\n return (\n <article class={classAttributes}>\n <a class=\"hy-general-list-item__link\" href={this.url} target={this.target ? \"_blank\" : \"_self\"}>\n {this.type && (\n <div class=\"hy-general-list-item__type\">\n <span class=\"hy-general-list-item__type__major\">{this.label}</span>\n <span class=\"hy-general-list-item__type__sub\">{this.subLabel}</span>\n </div>\n )}\n {this.imageUrl && (\n <figure class={imageClassAttributes} style={aspectRatio}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n alt={this.imageAlt}\n class=\"hy-general-list-item__image\"\n src={this.imageUrl}\n />\n </figure>\n )}\n <div class={contentClassAttributes}>\n {(this.tag \|\| this.date) && (\n <span class=\"hy-genenral-list-item__meta\">\n {this.tag}\n <span class=\"hy-genenral-list-item__meta__date\">\n {this.tag && \"\|\"} {this.date}\n </span>\n </span>\n )}\n <h3 class={titleClassAttributes}>{this.itemTitle}</h3>\n <p class={descriptionClassAttributes}>{this.description}</p>\n </div>\n </a>\n </article>\n );\n }\n}\n"],"mappings":"oJAAA,MAAMA,EAAmB,wuD,MCwBZC,EAAa,M,mCACSC,EAAiBC,K,WACzB,K,kDAEc,K,mBACP,I,gBAGD,K,CAE/BC,0BACEC,KAAKC,iBAAmBC,EAAiBF,KAAKG,WAE9C,MAAMC,EAAYJ,KAAKK,GAAGC,QAAQ,YAClC,GAAIF,EAAW,CACb,GAAIA,EAAUG,UAAUC,SAAS,gBAAiB,CAChDR,KAAKS,WAAa,I,GAMxBV,uBAAuBW,EAA2BC,GAChD,GAAID,IAAaC,EAAU,CACzBX,KAAKC,iBAAmBC,EAAiBF,KAAKG,U,EAIlDS,SACE,MAAMC,EAAkB,CACtB,kBACAb,KAAKS,WAAa,gCAAkC,GACpD,0BAA0BT,KAAKc,QAC/BC,KAAK,KAEP,IAAIC,EAAWhB,KAAKC,WACpB,UAAWD,KAAKC,aAAe,SAAU,CACvCe,EAAWC,OAAOC,OAAOlB,KAAKC,W,CAGhC,SAASkB,EAASC,EAAKC,GACrB,OAAOD,EAAIE,OAASD,EAAID,EAAIG,OAAO,EAAGF,EAAI,GAAK,MAAQD,C,CAGzD,OACEI,EAACC,EAAI,KACHD,EAAA,MAAIE,MAAOb,GACRG,GACCA,EAASW,KAAKC,GACZJ,EAAA,UACEA,EAAA,sCACexB,KAAKS,WAClBoB,OAAQ7B,KAAK8B,MAAK,gBACHF,EAAKG,IACpBC,YACEhC,KAAKiC,oBAAsBd,EAASS,EAAKI,YAAahC,KAAKkC,eAAiBN,EAAKI,YAEnFG,GAAIP,EAAKO,GACTC,SAAUR,EAAKQ,SACfC,SAAUT,EAAKS,SAAQ,aACXT,EAAKU,MACjBC,MAAOX,EAAKW,MAAK,YACNX,EAAKY,SAChBC,IAAKb,EAAKa,IACVC,KAAMd,EAAKc,KACX5B,KAAMc,EAAKd,KACXiB,IAAKH,EAAKG,IAAG,aACD/B,KAAKc,WAK3BU,EAAA,UAAQmB,GAAG,uB,kGChGnB,MAAMC,EAAuB,ooM,MCOhBC,EAAiB,M,yCACE,K,yCAEH,G,cACA,K,iBACI,M,4DAGJ,G,UACJ,G,SACD,G,4EAII,I,CAI1BjC,SACE,MAAMC,EAAkB,CAAC,uBAAwB,+BAA+Bb,KAAK8C,aAAa/B,KAAK,KACvG,MAAMgC,EAAyB,CAAC,wCAAwChC,KAAK,KAC7E,MAAMiC,EAAuB,CAAC,yCAAyCjC,KAAK,KAE5E,MAAMkC,EAAejD,KAAKS,WAAa,SAAW,QAClD,MAAMyC,EAAuB,CAAC,8BAA+B,gCAAgCD,KAAgBlC,KAC3G,KAEF,MAAMoC,EAA6B,CACjC,oCACA,sCAAsCF,KACtClC,KAAK,KAEP,MAAMqC,EAAmB,GACzB,MAAMC,EAAoB,GAC1B,MAAMC,EAAUD,EAAoBD,EAAoB,IACxD,MAAMG,EAAc,CAClB,gBAAiB,GAAGD,MAGtB,OACE9B,EAAA,WAASE,MAAOb,GACdW,EAAA,KAAGE,MAAM,6BAA6B8B,KAAMxD,KAAK+B,IAAKF,OAAQ7B,KAAK6B,OAAS,SAAW,SACpF7B,KAAKc,MACJU,EAAA,OAAKE,MAAM,8BACTF,EAAA,QAAME,MAAM,qCAAqC1B,KAAKuC,OACtDf,EAAA,QAAME,MAAM,mCAAmC1B,KAAKwC,WAGvDxC,KAAKqC,UACJb,EAAA,UAAQE,MAAOsB,EAAsBS,MAAOF,GAC1C/B,EAAA,OACEkC,QAAS1D,KAAK2D,YAAc,QAAU,OACtCC,IAAK5D,KAAKoC,SACVV,MAAM,8BACNmC,IAAK7D,KAAKqC,YAIhBb,EAAA,OAAKE,MAAOqB,IACR/C,KAAKyC,KAAOzC,KAAK0C,OACjBlB,EAAA,QAAME,MAAM,+BACT1B,KAAKyC,IACNjB,EAAA,QAAME,MAAM,qCACT1B,KAAKyC,KAAO,IAAG,IAAGzC,KAAK0C,OAI9BlB,EAAA,MAAIE,MAAOwB,GAAuBlD,KAAK8D,WACvCtC,EAAA,KAAGE,MAAOyB,GAA6BnD,KAAKgC,e"}

package/dist/huds-lib/hy-link-box_2.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as i,h as t,g as e,H as a}from"./index-f84f2a7d.js";import{l as n}from"./utils-7438924c.js";import{j as r}from"./globalScript-5a4b7abf.js";const o=':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{height:100%}.hy-link-box-container{background:var(--grayscale-background-box);width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:100%;position:relative}.hy-link-box-container:focus-within{outline:auto}.hy-link-box-container:hover{cursor:pointer}.hy-link-box-container:hover .hy-link-box__text-container__title{color:var(--brand-main);text-decoration:underline}.hy-link-box-container:hover .hy-cta-link{text-decoration:underline}.hy-link-box-container:hover .hy-cta-link .hy-cta-link__icon{background-color:var(--brand-main)}.hy-link-box__image-container{margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;min-height:10rem;position:relative}.hy-link-box__image-container:before{content:"";display:block;padding-top:62.5%;width:100%}.hy-link-box__image-container img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-link-box__image-container.is-image-missing svg{position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);left:50%;width:85px;height:auto;fill:#d2d2d2}.hy-link-box__text-container{padding:16px}.hy-link-box__text-container__title{font-size:1.3125rem;line-height:28px;font-weight:700;color:var(--brand-main-nearly-black);font-family:var(--main-font-family);letter-spacing:-0.42px;-ms-hyphens:auto;hyphens:auto;word-break:break-word;margin:0 0 16px}@media screen and (min-width: 1024px){.hy-link-box__text-container__title{font-size:1.5625rem;line-height:32px;letter-spacing:-0.5px}}.hy-link-box__text-container__description{font-size:0.9375rem;line-height:22px;color:var(--grayscale-black);font-family:var(--main-font-family);margin:0}@media screen and (min-width: 1024px){.hy-link-box__text-container__description{font-size:1.0625rem;line-height:26px}}.hy-cta-link{font-weight:600;font-size:1rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);display:inline-grid;font-family:var(--main-font-family);gap:16px;grid-auto-flow:column;letter-spacing:-0.5px;overflow:hidden;text-decoration:none;margin:0 -8px 24px 0;align-self:flex-end}.hy-cta-link span[aria-hidden=true]{position:absolute;inset:0}.hy-cta-link:focus{outline:none}.hy-cta-link__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main-light);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px}.hy-cta-link__icon svg{fill:var(--grayscale-white)}.hy-cta-link__icon--external svg{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}';const l=class{constructor(t){i(this,t);this.variant=n.default;this.imageUrl=null;this.imageAlt=null;this.disableLazy=false;this.useSlot=false;this.showLogo=false;this.textTitle=undefined;this.textDescription=null;this.url=undefined;this.isExternal=false;this.scLabel=undefined;this.readMoreLabel=undefined;this.headerstyle="common";this.sourceSet=undefined}srcSetWatcher(i){this._sourceSet=typeof i==="string"?JSON.parse(i):i}componentWillLoad(){this.srcSetWatcher(this.sourceSet)}componentDidLoad(){let i=this.el.closest(".hy-main");if(i){if(!i.classList.contains("with-sidebar")){this.headerstyle="large"}}}render(){const i=["hy-link-box-container"].join(" ");const e=["hy-link-box",this.variant,`hy-link-box__${this.variant}`,this.headerstyle,`hy-link-box__${this.headerstyle}`,this.imageUrl?"hy-link-box--with-image":null].join(" ");const a=["hy-link-box__text-container",this.imageUrl?"hy-link-box--with-image":null].join(" ");const n=["hy-link-box__text-container__title",`hy-link-box__text-container__title__${this.variant}`,`hy-link-box__text-container__title__${this.headerstyle}`,this.imageUrl?"hy-link-box__text-container__title__image":"",this.imageUrl?"image":""].join(" ");const r=["hy-link-box__text-container__description",`hy-link-box__text-container__description__${this.variant}`,`hy-link-box__text-container__description__${this.headerstyle}`].join(" ");const o=this.isExternal?"_blank":"_self";const l=16;const s=10;const d=s/l*100;const h={"--aspectRatio":`${d}%`};return[t("article",{class:i},t("div",{class:e},this.imageUrl&&(this._sourceSet?t("figure",{class:"hy-link-box__image-container",style:h},t("picture",null,this._sourceSet.map((i=>t("source",{srcSet:i.src,media:i.media,type:i.type,sizes:i.sizes?i.sizes:""}))),t("img",{loading:this.disableLazy?"eager":"lazy","aria-hidden":"true",src:this.imageUrl,alt:this.imageAlt}))):t("figure",{class:"hy-link-box__image-container",style:h},t("img",{loading:this.disableLazy?"eager":"lazy","aria-hidden":"true",src:this.imageUrl,alt:this.imageAlt}))),!this.imageUrl&&this.showLogo&&t("div",{"aria-hidden":"true",class:"hy-link-box__image-container is-image-missing"},t("hy-icon",{class:{"hy-site-logo__icon":true},icon:"hy-icon-hy-logo"})),t("div",{class:a},t("h3",{class:n},this.textTitle),this.textDescription&&t("p",{class:r},this.textDescription.length>=141?this.textDescription.slice(0,140)+"...":this.textDescription))),t("a",{"aria-label":this.scLabel||`${this.readMoreLabel} - ${this.textTitle}`,title:this.scLabel||`${this.readMoreLabel} - ${this.textTitle}`,href:this.url,target:o,class:`hy-cta-link hy-cta-link--default`},t("span",{"aria-hidden":"true"}),t("span",null,this.readMoreLabel),t("span",{class:`hy-cta-link__icon ${this.isExternal?"hy-cta-link__icon--external":""}`},t("hy-icon",{icon:"hy-icon-arrow-to-right",size:24}))))]}get el(){return e(this)}static get watchers(){return{sourceSet:["srcSetWatcher"]}}};l.style=o;const s=":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-link-box-list{padding:0;margin:0;list-style:none;display:grid;gap:32px 0}@media screen and (min-width: 768px){.hy-link-box-list{grid-template-columns:repeat(2, 1fr);gap:32px 24px}}@media screen and (min-width: 1024px){.hy-link-box-list{grid-template-columns:repeat(3, 1fr)}}@media screen and (min-width: 1920px){.hy-link-box-list{gap:32px}}";const d=class{constructor(t){i(this,t);this.headerstyle="common";this.variant=n.default;this.readMoreLabel=undefined;this.dataItems=undefined}async componentWillLoad(){this._dataItems=await r(this.dataItems)}componentDidLoad(){let i=this.el.closest(".hy-main");if(i){if(!i.classList.contains("with-sidebar")){this.headerstyle="large"}}}render(){const i=["hy-link-box-list",this.variant,`hy-link-box-list__${this.variant}`,`hy-link-box-list__${this.headerstyle}`].join(" ");const e=[this.variant,`hy-link-box__${this.variant}`].join(" ");return t(a,null,t("ul",{class:i},this._dataItems.map((i=>t("li",null,t("hy-link-box",{class:e,variant:this.variant,"source-set":i.imageSets,"image-url":i.imageUrl,"image-alt":i.imageAlt,"text-title":i.heading,"text-description":i.description,"show-logo":i.showLogo,url:i.boxUrl,"is-external":i.isExternal,"sc-label":i.ariaLabel,"read-more-label":this.readMoreLabel}))))),t("hy-box",{mb:"1.75, 1.75, 2, 2.5"}))}get el(){return e(this)}};d.style=s;export{l as hy_link_box,d as hy_link_box_list};
+import{r as i,h as t,g as e,H as a}from"./index-f84f2a7d.js";import{l as n}from"./utils-7438924c.js";import{j as r}from"./globalScript-5a4b7abf.js";const o=':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{height:100%}.hy-link-box-container{background:var(--grayscale-background-box);width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:100%;position:relative}.hy-link-box-container:focus-within{outline:auto}.hy-link-box-container:hover{cursor:pointer}.hy-link-box-container:hover .hy-link-box__text-container__title{color:var(--brand-main);text-decoration:underline}.hy-link-box-container:hover .hy-cta-link{text-decoration:underline}.hy-link-box-container:hover .hy-cta-link .hy-cta-link__icon{background-color:var(--brand-main)}.hy-link-box__image-container{margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;min-height:10rem;position:relative}.hy-link-box__image-container:before{content:"";display:block;padding-top:62.5%;width:100%}.hy-link-box__image-container img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-link-box__image-container.is-image-missing svg{position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);left:50%;width:85px;height:auto;fill:#d2d2d2}.hy-link-box__text-container{padding:16px}.hy-link-box__text-container__title{font-size:1.3125rem;line-height:28px;font-weight:700;color:var(--brand-main-nearly-black);font-family:var(--main-font-family);letter-spacing:-0.42px;-ms-hyphens:auto;hyphens:auto;word-break:break-word;margin:0 0 16px;text-wrap:balance}@media screen and (min-width: 1024px){.hy-link-box__text-container__title{font-size:1.5625rem;line-height:32px;letter-spacing:-0.5px}}.hy-link-box__text-container__description{font-size:0.9375rem;line-height:22px;color:var(--grayscale-black);font-family:var(--main-font-family);margin:0;text-wrap:pretty}@media screen and (min-width: 1024px){.hy-link-box__text-container__description{font-size:1.0625rem;line-height:26px}}.hy-cta-link{font-weight:600;font-size:1rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);display:inline-grid;font-family:var(--main-font-family);gap:16px;grid-auto-flow:column;letter-spacing:-0.5px;overflow:hidden;text-decoration:none;margin:0 -8px 24px 0;align-self:flex-end}.hy-cta-link span[aria-hidden=true]{position:absolute;inset:0}.hy-cta-link:focus{outline:none}.hy-cta-link__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main-light);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px}.hy-cta-link__icon svg{fill:var(--grayscale-white)}.hy-cta-link__icon--external svg{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}';const l=class{constructor(t){i(this,t);this.variant=n.default;this.imageUrl=null;this.imageAlt=null;this.disableLazy=false;this.useSlot=false;this.showLogo=false;this.textTitle=undefined;this.textDescription=null;this.url=undefined;this.isExternal=false;this.scLabel=undefined;this.readMoreLabel=undefined;this.headerstyle="common";this.sourceSet=undefined}srcSetWatcher(i){this._sourceSet=typeof i==="string"?JSON.parse(i):i}componentWillLoad(){this.srcSetWatcher(this.sourceSet)}componentDidLoad(){let i=this.el.closest(".hy-main");if(i){if(!i.classList.contains("with-sidebar")){this.headerstyle="large"}}}render(){const i=["hy-link-box-container"].join(" ");const e=["hy-link-box",this.variant,`hy-link-box__${this.variant}`,this.headerstyle,`hy-link-box__${this.headerstyle}`,this.imageUrl?"hy-link-box--with-image":null].join(" ");const a=["hy-link-box__text-container",this.imageUrl?"hy-link-box--with-image":null].join(" ");const n=["hy-link-box__text-container__title",`hy-link-box__text-container__title__${this.variant}`,`hy-link-box__text-container__title__${this.headerstyle}`,this.imageUrl?"hy-link-box__text-container__title__image":"",this.imageUrl?"image":""].join(" ");const r=["hy-link-box__text-container__description",`hy-link-box__text-container__description__${this.variant}`,`hy-link-box__text-container__description__${this.headerstyle}`].join(" ");const o=this.isExternal?"_blank":"_self";const l=16;const s=10;const d=s/l*100;const h={"--aspectRatio":`${d}%`};return[t("article",{class:i},t("div",{class:e},this.imageUrl&&(this._sourceSet?t("figure",{class:"hy-link-box__image-container",style:h},t("picture",null,this._sourceSet.map((i=>t("source",{srcSet:i.src,media:i.media,type:i.type,sizes:i.sizes?i.sizes:""}))),t("img",{loading:this.disableLazy?"eager":"lazy","aria-hidden":"true",src:this.imageUrl,alt:this.imageAlt}))):t("figure",{class:"hy-link-box__image-container",style:h},t("img",{loading:this.disableLazy?"eager":"lazy","aria-hidden":"true",src:this.imageUrl,alt:this.imageAlt}))),!this.imageUrl&&this.showLogo&&t("div",{"aria-hidden":"true",class:"hy-link-box__image-container is-image-missing"},t("hy-icon",{class:{"hy-site-logo__icon":true},icon:"hy-icon-hy-logo"})),t("div",{class:a},t("h3",{class:n},this.textTitle),this.textDescription&&t("p",{class:r},this.textDescription.length>=141?this.textDescription.slice(0,140)+"...":this.textDescription))),t("a",{"aria-label":this.scLabel||`${this.readMoreLabel} - ${this.textTitle}`,title:this.scLabel||`${this.readMoreLabel} - ${this.textTitle}`,href:this.url,target:o,class:`hy-cta-link hy-cta-link--default`},t("span",{"aria-hidden":"true"}),t("span",null,this.readMoreLabel),t("span",{class:`hy-cta-link__icon ${this.isExternal?"hy-cta-link__icon--external":""}`},t("hy-icon",{icon:"hy-icon-arrow-to-right",size:24}))))]}get el(){return e(this)}static get watchers(){return{sourceSet:["srcSetWatcher"]}}};l.style=o;const s=":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-link-box-list{padding:0;margin:0;list-style:none;display:grid;gap:32px 0}@media screen and (min-width: 768px){.hy-link-box-list{grid-template-columns:repeat(2, 1fr);gap:32px 24px}}@media screen and (min-width: 1024px){.hy-link-box-list{grid-template-columns:repeat(3, 1fr)}}@media screen and (min-width: 1920px){.hy-link-box-list{gap:32px}}";const d=class{constructor(t){i(this,t);this.headerstyle="common";this.variant=n.default;this.readMoreLabel=undefined;this.dataItems=undefined}async componentWillLoad(){this._dataItems=await r(this.dataItems)}componentDidLoad(){let i=this.el.closest(".hy-main");if(i){if(!i.classList.contains("with-sidebar")){this.headerstyle="large"}}}render(){const i=["hy-link-box-list",this.variant,`hy-link-box-list__${this.variant}`,`hy-link-box-list__${this.headerstyle}`].join(" ");const e=[this.variant,`hy-link-box__${this.variant}`].join(" ");return t(a,null,t("ul",{class:i},this._dataItems.map((i=>t("li",null,t("hy-link-box",{class:e,variant:this.variant,"source-set":i.imageSets,"image-url":i.imageUrl,"image-alt":i.imageAlt,"text-title":i.heading,"text-description":i.description,"show-logo":i.showLogo,url:i.boxUrl,"is-external":i.isExternal,"sc-label":i.ariaLabel,"read-more-label":this.readMoreLabel}))))),t("hy-box",{mb:"1.75, 1.75, 2, 2.5"}))}get el(){return e(this)}};d.style=s;export{l as hy_link_box,d as hy_link_box_list};
 //# sourceMappingURL=hy-link-box_2.entry.js.map

package/dist/huds-lib/hy-link-box_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["linkBoxCss","LinkBox","LinkBoxVariants","default","srcSetWatcher","data","this","_sourceSet","JSON","parse","componentWillLoad","sourceSet","componentDidLoad","hyMainDiv","el","closest","classList","contains","headerstyle","render","classContainerAttributes","join","classAttributes","variant","imageUrl","classTextContainer","classTitle","classDescription","target","isExternal","aspectRatioWidth","aspectRatioHeight","aspect","aspectRatio","h","class","style","map","item","srcSet","src","media","type","sizes","loading","disableLazy","alt","imageAlt","showLogo","icon","textTitle","textDescription","length","slice","scLabel","readMoreLabel","title","href","url","size","linkBoxListCss","LinkBoxList","async","_dataItems","jsonParserWorker","dataItems","classItemAttributes","Host","x","imageSets","heading","description","boxUrl","ariaLabel","mb"],"sources":["./src/components/hy-link-box/link-box.scss?tag=hy-link-box","./src/components/hy-link-box/link-box.tsx","./src/components/hy-link-box-list/link-box-list.scss?tag=hy-link-box-list","./src/components/hy-link-box-list/link-box-list.tsx"],"sourcesContent":[":host {\n height: 100%;\n}\n\n.hy-link-box-container {\n background: var(--grayscale-background-box);\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n position: relative;\n\n &:focus-within {\n outline: auto;\n }\n\n &:hover {\n cursor: pointer;\n\n .hy-link-box__text-container__title {\n color: var(--brand-main);\n text-decoration: underline;\n }\n\n .hy-cta-link {\n text-decoration: underline;\n\n .hy-cta-link__icon {\n background-color: var(--brand-main);\n }\n }\n }\n}\n\n.hy-link-box__image-container {\n margin: 0;\n display: flex;\n justify-content: stretch;\n min-height: 10rem;\n position: relative;\n\n &:before {\n content: \"\";\n display: block;\n padding-top: calc(10 / 16) * 100%;\n width: 100%;\n }\n\n img {\n bottom: 0;\n height: 100%;\n left: 0;\n object-fit: cover;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n }\n\n &.is-image-missing {\n svg {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n left: 50%;\n width: 85px;\n height: auto;\n fill: #d2d2d2;\n }\n }\n}\n\n.hy-link-box__text-container {\n padding: 16px;\n}\n\n.hy-link-box__text-container__title {\n @include font-size(21px, 28px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.42px;\n hyphens: auto;\n word-break: break-word;\n margin: 0 0 16px;\n\n @media screen and (min-width: 1024px) {\n @include font-size(25px, 32px);\n letter-spacing: -0.5px;\n }\n}\n\n.hy-link-box__text-container__description {\n @include font-size(15px, 22px);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n margin: 0;\n\n @media screen and (min-width: 1024px) {\n @include font-size(17px, 26px);\n }\n}\n\n.hy-cta-link {\n @include font-weight($semibold);\n @include font-size(16px, 24px);\n align-items: center;\n color: var(--brand-main);\n display: inline-grid;\n font-family: var(--main-font-family);\n gap: 16px;\n grid-auto-flow: column;\n letter-spacing: -0.5px;\n overflow: hidden;\n text-decoration: none;\n margin: 0 -8px 24px 0;\n align-self: flex-end;\n\n span[aria-hidden=\"true\"] {\n position: absolute;\n inset: 0;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.hy-cta-link__icon {\n align-items: center;\n background-color: var(--brand-main-light);\n display: inline-flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n\n svg {\n fill: var(--grayscale-white);\n }\n\n &--external {\n svg {\n transform: rotate(-45deg);\n }\n }\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string \| null;\n}\n\nimport {Component, ComponentInterface, Element, Prop, h, Watch} from \"@stencil/core\";\nimport {LinkBoxVariants} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-link-box\",\n styleUrl: \"link-box.scss\",\n shadow: false,\n})\nexport class LinkBox implements ComponentInterface {\n @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;\n @Prop() imageUrl: string = null;\n @Prop() imageAlt: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() useSlot: boolean = false;\n @Prop() showLogo: boolean = false;\n @Prop() textTitle?: string;\n @Prop() textDescription: string = null;\n @Prop() url?: string;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() readMoreLabel: string;\n @Prop() headerstyle: string = \"common\";\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] \| string;\n @Element() el: HTMLElement;\n\n @Watch(\"sourceSet\") srcSetWatcher(data: ImageSrcSet[] \| string) {\n this._sourceSet = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n componentWillLoad() {\n this.srcSetWatcher(this.sourceSet);\n }\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n }\n\n render() {\n const classContainerAttributes = [\"hy-link-box-container\"].join(\" \");\n const classAttributes = [\n \"hy-link-box\",\n this.variant,\n `hy-link-box__${this.variant}`,\n this.headerstyle,\n `hy-link-box__${this.headerstyle}`,\n this.imageUrl ? \"hy-link-box--with-image\" : null,\n ].join(\" \");\n\n const classTextContainer = [\"hy-link-box__text-container\", this.imageUrl ? \"hy-link-box--with-image\" : null].join(\n \" \"\n );\n\n const classTitle = [\n \"hy-link-box__text-container__title\",\n `hy-link-box__text-container__title__${this.variant}`,\n `hy-link-box__text-container__title__${this.headerstyle}`,\n this.imageUrl ? \"hy-link-box__text-container__title__image\" : \"\",\n this.imageUrl ? \"image\" : \"\",\n ].join(\" \");\n\n const classDescription = [\n \"hy-link-box__text-container__description\",\n `hy-link-box__text-container__description__${this.variant}`,\n `hy-link-box__text-container__description__${this.headerstyle}`,\n ].join(\" \");\n\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n const aspectRatioWidth = 16;\n const aspectRatioHeight = 10;\n const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n const aspectRatio = {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n };\n\n return [\n <article class={classContainerAttributes}>\n <div class={classAttributes}>\n {this.imageUrl &&\n (this._sourceSet ? (\n <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\n <picture>\n {this._sourceSet.map((item) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </picture>\n </figure>\n ) : (\n <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </figure>\n ))}\n {!this.imageUrl && this.showLogo && (\n <div aria-hidden=\"true\" class=\"hy-link-box__image-container is-image-missing\">\n <hy-icon class={{\"hy-site-logo__icon\": true}} icon={\"hy-icon-hy-logo\"} />\n </div>\n )}\n <div class={classTextContainer}>\n <h3 class={classTitle}>{this.textTitle}</h3>\n {this.textDescription && (\n <p class={classDescription}>\n {this.textDescription.length >= 141 ? this.textDescription.slice(0, 140) + \"...\" : this.textDescription}\n </p>\n )}\n </div>\n </div>\n <a\n aria-label={this.scLabel \|\| `${this.readMoreLabel} - ${this.textTitle}`}\n title={this.scLabel \|\| `${this.readMoreLabel} - ${this.textTitle}`}\n href={this.url}\n target={target}\n class={`hy-cta-link hy-cta-link--default`}\n >\n <span aria-hidden=\"true\"></span>\n <span>{this.readMoreLabel}</span>\n <span class={`hy-cta-link__icon ${this.isExternal ? \"hy-cta-link__icon--external\" : \"\"}`}>\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={24} />\n </span>\n </a>\n </article>,\n ];\n }\n}\n",":host {\n display: block;\n}\n\n.hy-link-box-list {\n padding: 0;\n margin: 0;\n list-style: none;\n display: grid;\n gap: 32px 0;\n\n @media screen and (min-width: 768px) {\n grid-template-columns: repeat(2, 1fr);\n gap: 32px 24px;\n }\n\n @media screen and (min-width: 1024px) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @media screen and (min-width: 1920px) {\n gap: 32px;\n }\n}\n","export interface LinkBox {\n heading: string;\n description: string;\n imageSets: string \| null;\n imageUrl: string;\n imageAlt: string;\n boxUrl: string;\n isExternal: boolean;\n showLogo: boolean;\n ariaLabel: string;\n}\n\nimport {Component, ComponentInterface, Prop, h, Host, Element} from \"@stencil/core\";\nimport {LinkBoxVariants} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n tag: \"hy-link-box-list\",\n styleUrl: \"link-box-list.scss\",\n shadow: false,\n})\nexport class LinkBoxList implements ComponentInterface {\n @Element() el: HTMLElement;\n @Prop() headerstyle: string = \"common\";\n @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;\n @Prop() readMoreLabel: string;\n\n private _dataItems: LinkBox[];\n @Prop() dataItems: LinkBox[] \| string;\n\n async componentWillLoad() {\n this._dataItems = await jsonParserWorker(this.dataItems);\n }\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n }\n\n render() {\n const classAttributes = [\n \"hy-link-box-list\",\n this.variant,\n `hy-link-box-list__${this.variant}`,\n `hy-link-box-list__${this.headerstyle}`,\n ].join(\" \");\n\n /\n - Logic:\n - 3 items: big\n - 4 items: small\n - 5 items: big\n - 6 items: big\n - 7 items: small\n - 8 items: small\n - 9 items: big\n */\n const classItemAttributes = [this.variant, `hy-link-box__${this.variant}`].join(\" \");\n return (\n <Host>\n <ul class={classAttributes}>\n {this._dataItems.map((x) => {\n return (\n <li>\n <hy-link-box\n class={classItemAttributes}\n variant={this.variant}\n source-set={x.imageSets}\n image-url={x.imageUrl}\n image-alt={x.imageAlt}\n text-title={x.heading}\n text-description={x.description}\n show-logo={x.showLogo}\n url={x.boxUrl}\n is-external={x.isExternal}\n sc-label={x.ariaLabel}\n read-more-label={this.readMoreLabel}\n />\n </li>\n );\n })}\n </ul>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["linkBoxCss","LinkBox","LinkBoxVariants","default","srcSetWatcher","data","this","_sourceSet","JSON","parse","componentWillLoad","sourceSet","componentDidLoad","hyMainDiv","el","closest","classList","contains","headerstyle","render","classContainerAttributes","join","classAttributes","variant","imageUrl","classTextContainer","classTitle","classDescription","target","isExternal","aspectRatioWidth","aspectRatioHeight","aspect","aspectRatio","h","class","style","map","item","srcSet","src","media","type","sizes","loading","disableLazy","alt","imageAlt","showLogo","icon","textTitle","textDescription","length","slice","scLabel","readMoreLabel","title","href","url","size","linkBoxListCss","LinkBoxList","async","_dataItems","jsonParserWorker","dataItems","classItemAttributes","Host","x","imageSets","heading","description","boxUrl","ariaLabel","mb"],"sources":["./src/components/hy-link-box/link-box.scss?tag=hy-link-box","./src/components/hy-link-box/link-box.tsx","./src/components/hy-link-box-list/link-box-list.scss?tag=hy-link-box-list","./src/components/hy-link-box-list/link-box-list.tsx"],"sourcesContent":[":host {\n height: 100%;\n}\n\n.hy-link-box-container {\n background: var(--grayscale-background-box);\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n position: relative;\n\n &:focus-within {\n outline: auto;\n }\n\n &:hover {\n cursor: pointer;\n\n .hy-link-box__text-container__title {\n color: var(--brand-main);\n text-decoration: underline;\n }\n\n .hy-cta-link {\n text-decoration: underline;\n\n .hy-cta-link__icon {\n background-color: var(--brand-main);\n }\n }\n }\n}\n\n.hy-link-box__image-container {\n margin: 0;\n display: flex;\n justify-content: stretch;\n min-height: 10rem;\n position: relative;\n\n &:before {\n content: \"\";\n display: block;\n padding-top: calc(10 / 16) * 100%;\n width: 100%;\n }\n\n img {\n bottom: 0;\n height: 100%;\n left: 0;\n object-fit: cover;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n }\n\n &.is-image-missing {\n svg {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n left: 50%;\n width: 85px;\n height: auto;\n fill: #d2d2d2;\n }\n }\n}\n\n.hy-link-box__text-container {\n padding: 16px;\n}\n\n.hy-link-box__text-container__title {\n @include font-size(21px, 28px);\n @include font-weight($bold);\n color: var(--brand-main-nearly-black);\n font-family: var(--main-font-family);\n letter-spacing: -0.42px;\n hyphens: auto;\n word-break: break-word;\n margin: 0 0 16px;\n text-wrap: balance;\n\n @media screen and (min-width: 1024px) {\n @include font-size(25px, 32px);\n letter-spacing: -0.5px;\n }\n}\n\n.hy-link-box__text-container__description {\n @include font-size(15px, 22px);\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n margin: 0;\n text-wrap: pretty;\n\n @media screen and (min-width: 1024px) {\n @include font-size(17px, 26px);\n }\n}\n\n.hy-cta-link {\n @include font-weight($semibold);\n @include font-size(16px, 24px);\n align-items: center;\n color: var(--brand-main);\n display: inline-grid;\n font-family: var(--main-font-family);\n gap: 16px;\n grid-auto-flow: column;\n letter-spacing: -0.5px;\n overflow: hidden;\n text-decoration: none;\n margin: 0 -8px 24px 0;\n align-self: flex-end;\n\n span[aria-hidden=\"true\"] {\n position: absolute;\n inset: 0;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.hy-cta-link__icon {\n align-items: center;\n background-color: var(--brand-main-light);\n display: inline-flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n\n svg {\n fill: var(--grayscale-white);\n }\n\n &--external {\n svg {\n transform: rotate(-45deg);\n }\n }\n}\n","export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string \| null;\n}\n\nimport {Component, ComponentInterface, Element, Prop, h, Watch} from \"@stencil/core\";\nimport {LinkBoxVariants} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-link-box\",\n styleUrl: \"link-box.scss\",\n shadow: false,\n})\nexport class LinkBox implements ComponentInterface {\n @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;\n @Prop() imageUrl: string = null;\n @Prop() imageAlt: string = null;\n @Prop() disableLazy: boolean = false;\n @Prop() useSlot: boolean = false;\n @Prop() showLogo: boolean = false;\n @Prop() textTitle?: string;\n @Prop() textDescription: string = null;\n @Prop() url?: string;\n @Prop() isExternal: boolean = false;\n @Prop() scLabel?: string;\n @Prop() readMoreLabel: string;\n @Prop() headerstyle: string = \"common\";\n private _sourceSet: ImageSrcSet[];\n @Prop() sourceSet: ImageSrcSet[] \| string;\n @Element() el: HTMLElement;\n\n @Watch(\"sourceSet\") srcSetWatcher(data: ImageSrcSet[] \| string) {\n this._sourceSet = typeof data === \"string\" ? JSON.parse(data) : data;\n }\n\n componentWillLoad() {\n this.srcSetWatcher(this.sourceSet);\n }\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n }\n\n render() {\n const classContainerAttributes = [\"hy-link-box-container\"].join(\" \");\n const classAttributes = [\n \"hy-link-box\",\n this.variant,\n `hy-link-box__${this.variant}`,\n this.headerstyle,\n `hy-link-box__${this.headerstyle}`,\n this.imageUrl ? \"hy-link-box--with-image\" : null,\n ].join(\" \");\n\n const classTextContainer = [\"hy-link-box__text-container\", this.imageUrl ? \"hy-link-box--with-image\" : null].join(\n \" \"\n );\n\n const classTitle = [\n \"hy-link-box__text-container__title\",\n `hy-link-box__text-container__title__${this.variant}`,\n `hy-link-box__text-container__title__${this.headerstyle}`,\n this.imageUrl ? \"hy-link-box__text-container__title__image\" : \"\",\n this.imageUrl ? \"image\" : \"\",\n ].join(\" \");\n\n const classDescription = [\n \"hy-link-box__text-container__description\",\n `hy-link-box__text-container__description__${this.variant}`,\n `hy-link-box__text-container__description__${this.headerstyle}`,\n ].join(\" \");\n\n const target = this.isExternal ? \"_blank\" : \"_self\";\n\n const aspectRatioWidth = 16;\n const aspectRatioHeight = 10;\n const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n const aspectRatio = {\n \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n };\n\n return [\n <article class={classContainerAttributes}>\n <div class={classAttributes}>\n {this.imageUrl &&\n (this._sourceSet ? (\n <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\n <picture>\n {this._sourceSet.map((item) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </picture>\n </figure>\n ) : (\n <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\n <img\n loading={this.disableLazy ? \"eager\" : \"lazy\"}\n aria-hidden=\"true\"\n src={this.imageUrl}\n alt={this.imageAlt}\n />\n </figure>\n ))}\n {!this.imageUrl && this.showLogo && (\n <div aria-hidden=\"true\" class=\"hy-link-box__image-container is-image-missing\">\n <hy-icon class={{\"hy-site-logo__icon\": true}} icon={\"hy-icon-hy-logo\"} />\n </div>\n )}\n <div class={classTextContainer}>\n <h3 class={classTitle}>{this.textTitle}</h3>\n {this.textDescription && (\n <p class={classDescription}>\n {this.textDescription.length >= 141 ? this.textDescription.slice(0, 140) + \"...\" : this.textDescription}\n </p>\n )}\n </div>\n </div>\n <a\n aria-label={this.scLabel \|\| `${this.readMoreLabel} - ${this.textTitle}`}\n title={this.scLabel \|\| `${this.readMoreLabel} - ${this.textTitle}`}\n href={this.url}\n target={target}\n class={`hy-cta-link hy-cta-link--default`}\n >\n <span aria-hidden=\"true\"></span>\n <span>{this.readMoreLabel}</span>\n <span class={`hy-cta-link__icon ${this.isExternal ? \"hy-cta-link__icon--external\" : \"\"}`}>\n <hy-icon icon={\"hy-icon-arrow-to-right\"} size={24} />\n </span>\n </a>\n </article>,\n ];\n }\n}\n",":host {\n display: block;\n}\n\n.hy-link-box-list {\n padding: 0;\n margin: 0;\n list-style: none;\n display: grid;\n gap: 32px 0;\n\n @media screen and (min-width: 768px) {\n grid-template-columns: repeat(2, 1fr);\n gap: 32px 24px;\n }\n\n @media screen and (min-width: 1024px) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @media screen and (min-width: 1920px) {\n gap: 32px;\n }\n}\n","export interface LinkBox {\n heading: string;\n description: string;\n imageSets: string \| null;\n imageUrl: string;\n imageAlt: string;\n boxUrl: string;\n isExternal: boolean;\n showLogo: boolean;\n ariaLabel: string;\n}\n\nimport {Component, ComponentInterface, Prop, h, Host, Element} from \"@stencil/core\";\nimport {LinkBoxVariants} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n tag: \"hy-link-box-list\",\n styleUrl: \"link-box-list.scss\",\n shadow: false,\n})\nexport class LinkBoxList implements ComponentInterface {\n @Element() el: HTMLElement;\n @Prop() headerstyle: string = \"common\";\n @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;\n @Prop() readMoreLabel: string;\n\n private _dataItems: LinkBox[];\n @Prop() dataItems: LinkBox[] \| string;\n\n async componentWillLoad() {\n this._dataItems = await jsonParserWorker(this.dataItems);\n }\n\n componentDidLoad() {\n let hyMainDiv = this.el.closest(\".hy-main\");\n if (hyMainDiv) {\n if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n this.headerstyle = \"large\";\n }\n }\n }\n\n render() {\n const classAttributes = [\n \"hy-link-box-list\",\n this.variant,\n `hy-link-box-list__${this.variant}`,\n `hy-link-box-list__${this.headerstyle}`,\n ].join(\" \");\n\n /\n - Logic:\n - 3 items: big\n - 4 items: small\n - 5 items: big\n - 6 items: big\n - 7 items: small\n - 8 items: small\n - 9 items: big\n */\n const classItemAttributes = [this.variant, `hy-link-box__${this.variant}`].join(\" \");\n return (\n <Host>\n <ul class={classAttributes}>\n {this._dataItems.map((x) => {\n return (\n <li>\n <hy-link-box\n class={classItemAttributes}\n variant={this.variant}\n source-set={x.imageSets}\n image-url={x.imageUrl}\n image-alt={x.imageAlt}\n text-title={x.heading}\n text-description={x.description}\n show-logo={x.showLogo}\n url={x.boxUrl}\n is-external={x.isExternal}\n sc-label={x.ariaLabel}\n read-more-label={this.readMoreLabel}\n />\n </li>\n );\n })}\n </ul>\n <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/huds-lib/hy-paragraph-text.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as a,h as e,H as t,g as p}from"./index-f84f2a7d.js";const i=":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-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:16px}}@media (min-width: 60rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:32px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:32px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:40px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{padding-bottom:16px;padding-top:32px}}";const r=":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-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:16px}}@media (min-width: 60rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:32px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:32px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:40px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:32px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:16px;padding-top:40px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{padding-bottom:16px;padding-top:48px}}.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{padding-bottom:16px;padding-top:40px}}:host{display:block}.hy-paragraph-text{font-size:0.9375rem;line-height:22px;color:var(--grayscale-dark-text);font-family:var(--main-font-family);letter-spacing:0;width:100%}@media (min-width: 30rem){.hy-paragraph-text{font-size:1rem;line-height:24px}}@media (min-width: 60rem){.hy-paragraph-text{width:91.46%}}@media (min-width: 1601px){.hy-paragraph-text{font-size:1.0625rem;line-height:26px;width:82.89%}}@media (min-width: 75.0625rem){.hy-paragraph-text__large{font-size:1.0625rem;line-height:26px;width:82.89%}}@media (min-width: 1601px){.hy-paragraph-text__large{width:74.17%}}@media (min-width: 60rem){.hy-paragraph-text.degree_programme_group{width:91.46%}}@media (min-width: 60rem){.hy-paragraph-text.main_front_page,.hy-paragraph-text.landing_page,.hy-paragraph-text.faculty,.hy-paragraph-text.generic_site_group,.hy-paragraph-text.degree_programme_group,.hy-paragraph-text.research_group{width:100%}}.hy-paragraph-text h1,.hy-paragraph-text h2,.hy-paragraph-text h3,.hy-paragraph-text h4,.hy-paragraph-text h5,.hy-paragraph-text h6{color:var(--grayscale-black);font-family:var(--main-font-family);font-weight:700;margin:0;width:100%}.hy-paragraph-text h1.negative,.hy-paragraph-text h2.negative,.hy-paragraph-text h3.negative,.hy-paragraph-text h4.negative,.hy-paragraph-text h5.negative,.hy-paragraph-text h6.negative{color:var(--grayscale-white)}.hy-paragraph-text a{font-size:0.875rem;line-height:20px;color:var(--link-blue);font-family:var(--main-font-family);font-weight:600}@media (min-width: 30rem){.hy-paragraph-text a{font-size:1rem;line-height:24px;letter-spacing:-0.1px}}@media (min-width: 1601px){.hy-paragraph-text a{font-size:1.0625rem;line-height:26px}}.hy-paragraph-text a:hover{color:var(--brand-main)}.hy-paragraph-text a[target=_blank]:after{display:inline-block;vertical-align:middle;width:12px;height:12px;margin-left:3px;background-size:contain;content:\"\";background-image: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>\");-webkit-transform:rotate(315deg);transform:rotate(315deg)}.hy-paragraph-text a[target=_blank]:after:hover{background-image: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>\")}.hy-paragraph-text a[target=_blank]:hover:after{background-image: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>\")}.hy-paragraph-text p{margin-top:0;padding-top:0}.hy-paragraph-text p:last-of-type{margin-bottom:0}.hy-paragraph-text:first-child{margin-top:0 !important}hy-paragraph-text+hy-link-list{display:block;margin-top:32px}";const n=":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-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:32px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:16px;padding-top:40px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{padding-bottom:16px;padding-top:48px}}.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{padding-bottom:16px;padding-top:40px}}";const h=class{constructor(e){a(this,e);this.variant=undefined;this.placement="internal";this.headerstyle="default"}componentDidLoad(){let a=this.el.closest(".hy-main");if(a){if(!a.classList.contains("with-sidebar")){this.headerstyle="large"}}}render(){const a=["hy-paragraph-text",`hy-paragraph-text__${this.headerstyle}`,`${this.variant}`,`${this.placement}`,`${this.headerstyle}`].join(" ");return e(t,null,e("div",{class:a},e("slot",null)))}get el(){return p(this)}};h.style={content:i,default:r,landing:n};export{h as hy_paragraph_text};
+import{r as a,h as e,H as t,g as p}from"./index-f84f2a7d.js";const i=":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-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:16px}}@media (min-width: 60rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:32px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:32px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:40px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{padding-bottom:16px;padding-top:32px}}";const r=":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-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:16px}}@media (min-width: 60rem){.hy-paragraph-text.content_page.external,.hy-paragraph-text.field_of_science.external{margin-top:32px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:32px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.default,.hy-paragraph-text.field_of_science.external.default{margin-top:40px}}@media (min-width: 75.0625rem){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}@media (min-width: 1601px){.hy-paragraph-text.content_page.external.large,.hy-paragraph-text.field_of_science.external.large{margin-top:40px}}.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h3,.hy-paragraph-text.field_of_science h3{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h4,.hy-paragraph-text.field_of_science h4{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h5,.hy-paragraph-text.field_of_science h5{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:28px}}@media (min-width: 60rem){.hy-paragraph-text.content_page h6,.hy-paragraph-text.field_of_science h6{padding-bottom:16px;padding-top:32px}}.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:32px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:16px;padding-top:40px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{padding-bottom:16px;padding-top:48px}}.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{padding-bottom:16px;padding-top:40px}}:host{display:block}.hy-paragraph-text{font-size:0.9375rem;line-height:22px;color:var(--grayscale-dark-text);font-family:var(--main-font-family);letter-spacing:0;text-wrap:pretty;width:100%}@media (min-width: 30rem){.hy-paragraph-text{font-size:1rem;line-height:24px}}@media (min-width: 60rem){.hy-paragraph-text{width:91.46%}}@media (min-width: 1601px){.hy-paragraph-text{font-size:1.0625rem;line-height:26px;width:82.89%}}@media (min-width: 75.0625rem){.hy-paragraph-text__large{font-size:1.0625rem;line-height:26px;width:82.89%}}@media (min-width: 1601px){.hy-paragraph-text__large{width:74.17%}}@media (min-width: 60rem){.hy-paragraph-text.degree_programme_group{width:91.46%}}@media (min-width: 60rem){.hy-paragraph-text.main_front_page,.hy-paragraph-text.landing_page,.hy-paragraph-text.faculty,.hy-paragraph-text.generic_site_group,.hy-paragraph-text.degree_programme_group,.hy-paragraph-text.research_group{width:100%}}.hy-paragraph-text h1,.hy-paragraph-text h2,.hy-paragraph-text h3,.hy-paragraph-text h4,.hy-paragraph-text h5,.hy-paragraph-text h6{color:var(--grayscale-black);font-family:var(--main-font-family);font-weight:700;margin:0;width:100%}.hy-paragraph-text h1.negative,.hy-paragraph-text h2.negative,.hy-paragraph-text h3.negative,.hy-paragraph-text h4.negative,.hy-paragraph-text h5.negative,.hy-paragraph-text h6.negative{color:var(--grayscale-white)}.hy-paragraph-text a{font-size:0.875rem;line-height:20px;color:var(--link-blue);font-family:var(--main-font-family);font-weight:600}@media (min-width: 30rem){.hy-paragraph-text a{font-size:1rem;line-height:24px;letter-spacing:-0.1px}}@media (min-width: 1601px){.hy-paragraph-text a{font-size:1.0625rem;line-height:26px}}.hy-paragraph-text a:hover{color:var(--brand-main)}.hy-paragraph-text a[target=_blank]:after{display:inline-block;vertical-align:middle;width:12px;height:12px;margin-left:3px;background-size:contain;content:\"\";background-image: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>\");-webkit-transform:rotate(315deg);transform:rotate(315deg)}.hy-paragraph-text a[target=_blank]:after:hover{background-image: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>\")}.hy-paragraph-text a[target=_blank]:hover:after{background-image: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>\")}.hy-paragraph-text p{margin-top:0;padding-top:0}.hy-paragraph-text p:last-of-type{margin-bottom:0}.hy-paragraph-text:first-child{margin-top:0 !important}hy-paragraph-text+hy-link-list{display:block;margin-top:32px}";const n=":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-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;padding-bottom:12px;padding-top:32px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;padding-bottom:16px;padding-top:40px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h3,.hy-paragraph-text.main_front_page h3{padding-bottom:16px;padding-top:48px}}.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h4,.hy-paragraph-text.main_front_page h4{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{font-size:1.125rem;line-height:24px;letter-spacing:-0.56px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h5,.hy-paragraph-text.main_front_page h5{padding-bottom:16px;padding-top:40px}}.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:0.875rem;line-height:16px;letter-spacing:-0.44px;padding-bottom:12px;padding-top:24px}@media (min-width: 30rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{font-size:1rem;line-height:20px;letter-spacing:-0.5px;padding-bottom:16px;padding-top:32px}}@media (min-width: 60rem){.hy-paragraph-text.landing_page h6,.hy-paragraph-text.main_front_page h6{padding-bottom:16px;padding-top:40px}}";const h=class{constructor(e){a(this,e);this.variant=undefined;this.placement="internal";this.headerstyle="default"}componentDidLoad(){let a=this.el.closest(".hy-main");if(a){if(!a.classList.contains("with-sidebar")){this.headerstyle="large"}}}render(){const a=["hy-paragraph-text",`hy-paragraph-text__${this.headerstyle}`,`${this.variant}`,`${this.placement}`,`${this.headerstyle}`].join(" ");return e(t,null,e("div",{class:a},e("slot",null)))}get el(){return p(this)}};h.style={content:i,default:r,landing:n};export{h as hy_paragraph_text};
 //# sourceMappingURL=hy-paragraph-text.entry.js.map

package/dist/huds-lib/hy-paragraph-text.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["paragraphTextContentCss","defaultParagraphTextCss","paragraphTextLandingCss","ParagraphText","componentDidLoad","hyMainDiv","this","el","closest","classList","contains","headerstyle","render","classAttributes","variant","placement","join","h","Host","class"],"sources":["./src/components/hy-paragraph-text/paragraph-text-content.scss?tag=hy-paragraph-text&mode=content","./src/components/hy-paragraph-text/paragraph-text.scss?tag=hy-paragraph-text&mode=default","./src/components/hy-paragraph-text/paragraph-text-landing.scss?tag=hy-paragraph-text&mode=landing","./src/components/hy-paragraph-text/paragraph-text.tsx"],"sourcesContent":["//overrides for Content pages\n\n/\n Common styles for text plus mobile & tablet & small desktop\n* in Content Pages and Field of science pages.\n*/\n.hy-paragraph-text.content_page.external,\n.hy-paragraph-text.field_of_science.external {\n margin-top: 24px; //total gap between heading h2 and paragraph content is 48px\n\n @include breakpoint($narrow) {\n margin-top: 16px; //total gap 40px\n }\n @include breakpoint($wide) {\n margin-top: 32px; //total gap 56px\n }\n}\n\n// There is a sidebar on the Content page\n.hy-paragraph-text.content_page.external.default,\n.hy-paragraph-text.field_of_science.external.default {\n @include breakpoint($extrawide) {\n margin-top: 32px; //total gap 56px\n }\n @include breakpoint($xlarge) {\n margin-top: 40px; //total gap 64px\n }\n}\n\n// No sidebar on the Content page\n.hy-paragraph-text.content_page.external.large,\n.hy-paragraph-text.field_of_science.external.large {\n @include breakpoint($extrawide) {\n margin-top: 40px; //total gap 64px\n }\n @include breakpoint($xlarge) {\n margin-top: 40px; //total gap 64px\n }\n}\n\n.hy-paragraph-text.content_page,\n.hy-paragraph-text.field_of_science {\n h3 {\n // text H3 small\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H3 Medium size\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h4 {\n // text H4 small\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H4 Medium size\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h5 {\n // text H5 small\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H5 Medium size\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h6 {\n // text H6 small\n @include font-size(14px, 16px);\n letter-spacing: -0.44px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H6 Medium size\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n}\n","@import \"./paragraph-text-content.scss\";\n@import \"./paragraph-text-landing.scss\";\n\n:host {\n display: block;\n}\n\n// General styles for text paragraph\n.hy-paragraph-text {\n @include font-size(15px, 22px); // Paragraph Small size\n color: var(--grayscale-dark-text);\n font-family: var(--main-font-family);\n letter-spacing: 0;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px); // Paragraph Medium size\n }\n @include breakpoint($wide) {\n width: 91.46%; // 11 col\n }\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n width: 82.89%; // 10 col\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(17px, 26px); // Paragraph Large size\n width: 82.89%; // 10 col\n }\n @include breakpoint($xlarge) {\n width: 74.17%; // 9 col\n }\n }\n\n &.degree_programme_group {\n @include breakpoint($wide) {\n width: 91.46%; // 11 col\n }\n }\n\n &.main_front_page,\n &.landing_page,\n &.faculty,\n &.generic_site_group,\n &.degree_programme_group,\n &.research_group {\n @include breakpoint($wide) {\n width: 100%;\n }\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n font-weight: 700;\n margin: 0;\n width: 100%;\n\n &.negative {\n color: var(--grayscale-white);\n }\n }\n\n // link within paragraph (Open sans semibold)\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\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: inline-block;\n vertical-align: middle;\n width: 12px;\n height: 12px;\n margin-left: 3px;\n background-size: contain;\n content: \"\";\n background-image: 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 transform: rotate(315deg);\n\n &:hover {\n background-image: 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 background-image: 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 p {\n margin-top: 0;\n padding-top: 0;\n\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n\n // When hy-paragraph-text is the first child it will not add spacing to top. Will fix heading + text spacing issue.\n &:first-child {\n margin-top: 0 !important;\n }\n}\n\nhy-paragraph-text + hy-link-list {\n display: block;\n margin-top: 32px;\n}\n","//overrides for Landing pages and Front page\n\n// Common styles for text plus mobile & tablet & small desktop in Landing Pages\n.hy-paragraph-text.landing_page,\n.hy-paragraph-text.main_front_page {\n h3 {\n // text H3 small\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n\n padding-bottom: 12px;\n padding-top: 32px;\n\n @include breakpoint($narrow) {\n // text H3 Medium size\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n\n padding-bottom: 16px;\n padding-top: 40px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 48px;\n }\n }\n\n h4 {\n // text H4 small\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H4 Medium size\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n\n h5 {\n // text H5 small\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H5 Medium size\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n\n h6 {\n // text H6 small\n @include font-size(14px, 16px);\n letter-spacing: -0.44px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H6 Medium size\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-paragraph-text\",\n styleUrls: {\n default: \"paragraph-text.scss\",\n content: \"paragraph-text-content.scss\",\n landing: \"paragraph-text-landing.scss\",\n },\n shadow: false,\n})\nexport class ParagraphText {\n @Prop() variant: string;\n @Prop() placement: string = \"internal\";\n @Prop() headerstyle: string = \"default\";\n @Element() el: HTMLElement;\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 = [\n \"hy-paragraph-text\",\n `hy-paragraph-text__${this.headerstyle}`,\n `${this.variant}`,\n `${this.placement}`,\n `${this.headerstyle}`,\n ].join(\" \");\n\n return (\n <Host>\n <div class={classAttributes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"6DAAA,MAAMA,EAA0B,0iICAhC,MAAMC,EAA0B,+wSCAhC,MAAMC,EAA0B,8mG,MCWnBC,EAAa,M,+DAEI,W,iBACE,S,CAG9BC,mBACE,IAAIC,EAAYC,KAAKC,GAAGC,QAAQ,YAChC,GAAIH,EAAW,CACb,IAAKA,EAAUI,UAAUC,SAAS,gBAAiB,CACjDJ,KAAKK,YAAc,O,GAKzBC,SACE,MAAMC,EAAkB,CACtB,oBACA,sBAAsBP,KAAKK,cAC3B,GAAGL,KAAKQ,UACR,GAAGR,KAAKS,YACR,GAAGT,KAAKK,eACRK,KAAK,KAEP,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAON,GACVI,EAAA,c"}
1	+ {"version":3,"names":["paragraphTextContentCss","defaultParagraphTextCss","paragraphTextLandingCss","ParagraphText","componentDidLoad","hyMainDiv","this","el","closest","classList","contains","headerstyle","render","classAttributes","variant","placement","join","h","Host","class"],"sources":["./src/components/hy-paragraph-text/paragraph-text-content.scss?tag=hy-paragraph-text&mode=content","./src/components/hy-paragraph-text/paragraph-text.scss?tag=hy-paragraph-text&mode=default","./src/components/hy-paragraph-text/paragraph-text-landing.scss?tag=hy-paragraph-text&mode=landing","./src/components/hy-paragraph-text/paragraph-text.tsx"],"sourcesContent":["//overrides for Content pages\n\n/\n Common styles for text plus mobile & tablet & small desktop\n* in Content Pages and Field of science pages.\n*/\n.hy-paragraph-text.content_page.external,\n.hy-paragraph-text.field_of_science.external {\n margin-top: 24px; //total gap between heading h2 and paragraph content is 48px\n\n @include breakpoint($narrow) {\n margin-top: 16px; //total gap 40px\n }\n @include breakpoint($wide) {\n margin-top: 32px; //total gap 56px\n }\n}\n\n// There is a sidebar on the Content page\n.hy-paragraph-text.content_page.external.default,\n.hy-paragraph-text.field_of_science.external.default {\n @include breakpoint($extrawide) {\n margin-top: 32px; //total gap 56px\n }\n @include breakpoint($xlarge) {\n margin-top: 40px; //total gap 64px\n }\n}\n\n// No sidebar on the Content page\n.hy-paragraph-text.content_page.external.large,\n.hy-paragraph-text.field_of_science.external.large {\n @include breakpoint($extrawide) {\n margin-top: 40px; //total gap 64px\n }\n @include breakpoint($xlarge) {\n margin-top: 40px; //total gap 64px\n }\n}\n\n.hy-paragraph-text.content_page,\n.hy-paragraph-text.field_of_science {\n h3 {\n // text H3 small\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H3 Medium size\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h4 {\n // text H4 small\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H4 Medium size\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h5 {\n // text H5 small\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H5 Medium size\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n\n h6 {\n // text H6 small\n @include font-size(14px, 16px);\n letter-spacing: -0.44px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H6 Medium size\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 28px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 32px;\n }\n }\n}\n","@import \"./paragraph-text-content.scss\";\n@import \"./paragraph-text-landing.scss\";\n\n:host {\n display: block;\n}\n\n// General styles for text paragraph\n.hy-paragraph-text {\n @include font-size(15px, 22px); // Paragraph Small size\n color: var(--grayscale-dark-text);\n font-family: var(--main-font-family);\n letter-spacing: 0;\n text-wrap: pretty;\n width: 100%;\n\n @include breakpoint($narrow) {\n @include font-size(16px, 24px); // Paragraph Medium size\n }\n @include breakpoint($wide) {\n width: 91.46%; // 11 col\n }\n @include breakpoint($xlarge) {\n @include font-size(17px, 26px); // Paragraph Large size\n width: 82.89%; // 10 col\n }\n\n &__large {\n @include breakpoint($extrawide) {\n @include font-size(17px, 26px); // Paragraph Large size\n width: 82.89%; // 10 col\n }\n @include breakpoint($xlarge) {\n width: 74.17%; // 9 col\n }\n }\n\n &.degree_programme_group {\n @include breakpoint($wide) {\n width: 91.46%; // 11 col\n }\n }\n\n &.main_front_page,\n &.landing_page,\n &.faculty,\n &.generic_site_group,\n &.degree_programme_group,\n &.research_group {\n @include breakpoint($wide) {\n width: 100%;\n }\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: var(--grayscale-black);\n font-family: var(--main-font-family);\n font-weight: 700;\n margin: 0;\n width: 100%;\n\n &.negative {\n color: var(--grayscale-white);\n }\n }\n\n // link within paragraph (Open sans semibold)\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\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: inline-block;\n vertical-align: middle;\n width: 12px;\n height: 12px;\n margin-left: 3px;\n background-size: contain;\n content: \"\";\n background-image: 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 transform: rotate(315deg);\n\n &:hover {\n background-image: 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 background-image: 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 p {\n margin-top: 0;\n padding-top: 0;\n\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n\n // When hy-paragraph-text is the first child it will not add spacing to top. Will fix heading + text spacing issue.\n &:first-child {\n margin-top: 0 !important;\n }\n}\n\nhy-paragraph-text + hy-link-list {\n display: block;\n margin-top: 32px;\n}\n","//overrides for Landing pages and Front page\n\n// Common styles for text plus mobile & tablet & small desktop in Landing Pages\n.hy-paragraph-text.landing_page,\n.hy-paragraph-text.main_front_page {\n h3 {\n // text H3 small\n @include font-size(22px, 28px);\n letter-spacing: -0.7px;\n\n padding-bottom: 12px;\n padding-top: 32px;\n\n @include breakpoint($narrow) {\n // text H3 Medium size\n @include font-size(26px, 32px);\n letter-spacing: -0.8px;\n\n padding-bottom: 16px;\n padding-top: 40px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 48px;\n }\n }\n\n h4 {\n // text H4 small\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H4 Medium size\n @include font-size(22px, 28px);\n letter-spacing: -0.69px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n\n h5 {\n // text H5 small\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H5 Medium size\n @include font-size(18px, 24px);\n letter-spacing: -0.56px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n\n h6 {\n // text H6 small\n @include font-size(14px, 16px);\n letter-spacing: -0.44px;\n\n padding-bottom: 12px;\n padding-top: 24px;\n\n @include breakpoint($narrow) {\n // text H6 Medium size\n @include font-size(16px, 20px);\n letter-spacing: -0.5px;\n\n padding-bottom: 16px;\n padding-top: 32px;\n }\n\n @include breakpoint($wide) {\n padding-bottom: 16px;\n padding-top: 40px;\n }\n }\n}\n","import {Component, Element, h, Host, Prop} from \"@stencil/core\";\n\n@Component({\n tag: \"hy-paragraph-text\",\n styleUrls: {\n default: \"paragraph-text.scss\",\n content: \"paragraph-text-content.scss\",\n landing: \"paragraph-text-landing.scss\",\n },\n shadow: false,\n})\nexport class ParagraphText {\n @Prop() variant: string;\n @Prop() placement: string = \"internal\";\n @Prop() headerstyle: string = \"default\";\n @Element() el: HTMLElement;\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 = [\n \"hy-paragraph-text\",\n `hy-paragraph-text__${this.headerstyle}`,\n `${this.variant}`,\n `${this.placement}`,\n `${this.headerstyle}`,\n ].join(\" \");\n\n return (\n <Host>\n <div class={classAttributes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"6DAAA,MAAMA,EAA0B,0iICAhC,MAAMC,EAA0B,gySCAhC,MAAMC,EAA0B,8mG,MCWnBC,EAAa,M,+DAEI,W,iBACE,S,CAG9BC,mBACE,IAAIC,EAAYC,KAAKC,GAAGC,QAAQ,YAChC,GAAIH,EAAW,CACb,IAAKA,EAAUI,UAAUC,SAAS,gBAAiB,CACjDJ,KAAKK,YAAc,O,GAKzBC,SACE,MAAMC,EAAkB,CACtB,oBACA,sBAAsBP,KAAKK,cAC3B,GAAGL,KAAKQ,UACR,GAAGR,KAAKS,YACR,GAAGT,KAAKK,eACRK,KAAK,KAEP,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAON,GACVI,EAAA,c"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@itcenteratunihelsinki/huds-lib",
-  "version": "0.8.59",
+  "version": "0.8.60",
   "description": "Helsinki University Design System library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -68,5 +68,5 @@
       "pre-commit": "pretty-quick --staged"
     }
   },
-  "gitHead": "358f5a451421e0af8e6e1d34c09e6ea7dd18cecb"
+  "gitHead": "85c67b4327b00d171fb777e10739cdde27b4896b"
 }