@itcenteratunihelsinki/huds-lib 0.8.67 → 0.8.69
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.
- package/components/hy-footer-base.js +10 -4
- package/components/hy-footer-base.js.map +1 -1
- package/components/hy-footer-link-item2.js +1 -1
- package/components/hy-footer-link-item2.js.map +1 -1
- package/components/hy-hero-carousel.js +2 -332
- package/components/hy-hero-carousel.js.map +1 -1
- package/components/hy-video.js +1 -1
- package/components/hy-video.js.map +1 -1
- package/dist/cjs/huds-lib.cjs.js +1 -1
- package/dist/cjs/hy-breadcrumbs_15.cjs.entry.js +10 -5
- package/dist/cjs/hy-breadcrumbs_15.cjs.entry.js.map +1 -1
- package/dist/cjs/hy-hero-carousel.cjs.entry.js +2 -332
- package/dist/cjs/hy-hero-carousel.cjs.entry.js.map +1 -1
- package/dist/cjs/hy-video.cjs.entry.js +1 -1
- package/dist/cjs/hy-video.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/footer/hy-footer-base/hy-footer-base.css +152 -66
- package/dist/collection/components/footer/hy-footer-base/hy-footer-base.js +30 -3
- package/dist/collection/components/footer/hy-footer-base/hy-footer-base.js.map +1 -1
- package/dist/collection/components/footer/hy-footer-link-item/hy-footer-link-item.css +27 -9
- package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.css +13 -3
- package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.js +2 -8
- package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.js.map +1 -1
- package/dist/collection/components/hy-video/hy-video.css +1 -14
- package/dist/esm/huds-lib.js +1 -1
- package/dist/esm/hy-breadcrumbs_15.entry.js +10 -5
- package/dist/esm/hy-breadcrumbs_15.entry.js.map +1 -1
- package/dist/esm/hy-hero-carousel.entry.js +2 -332
- package/dist/esm/hy-hero-carousel.entry.js.map +1 -1
- package/dist/esm/hy-video.entry.js +1 -1
- package/dist/esm/hy-video.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/huds-lib/huds-lib.esm.js +1 -1
- package/dist/huds-lib/huds-lib.esm.js.map +1 -1
- package/dist/huds-lib/hy-breadcrumbs_15.entry.js +1 -1
- package/dist/huds-lib/hy-breadcrumbs_15.entry.js.map +1 -1
- package/dist/huds-lib/hy-hero-carousel.entry.js +1 -1
- package/dist/huds-lib/hy-hero-carousel.entry.js.map +1 -1
- package/dist/huds-lib/hy-video.entry.js +1 -1
- package/dist/huds-lib/hy-video.entry.js.map +1 -1
- package/dist/types/components/footer/hy-footer-base/hy-footer-base.d.ts +10 -0
- package/dist/types/components.d.ts +10 -2
- package/package.json +2 -2
|
@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './heading.js';
|
|
|
6
6
|
import { d as defineCustomElement$3 } from './icon.js';
|
|
7
7
|
import { d as defineCustomElement$2 } from './site-logo.js';
|
|
8
8
|
|
|
9
|
-
const hyFooterBaseCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-footer-base--content-container{background-color:var(--grayscale-black);display:block;max-width:100%}.hy-footer-base{background-color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:
|
|
9
|
+
const hyFooterBaseCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-footer-base--content-container{background-color:var(--grayscale-black);display:block;max-width:100%}.hy-footer-base{background-color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:100%;padding:32px 16px 0 16px;place-content:center space-between;position:relative;width:100%}@media (min-width: 30rem){.hy-footer-base{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0 auto;max-width:120.0625rem;padding:32px 24px 0 24px}}@media (min-width: 60rem){.hy-footer-base{display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(2, auto);padding:36px 32px 0 32px}}@media (min-width: 75.0625rem){.hy-footer-base{padding:40px 32px 0 32px}}.hy-footer-base__left{-webkit-box-align:center;-ms-flex-align:center;align-items:center;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:start;-ms-flex-pack:start;justify-content:flex-start;margin-top:24px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}@media (min-width: 30rem){.hy-footer-base__left{-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}}@media (min-width: 60rem){.hy-footer-base__left{-webkit-box-ordinal-group:unset;-ms-flex-order:unset;order:unset;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}}.hy-footer-base__logo{font-size:1.125rem;line-height:16px;font-family:var(--main-font-family);font-weight:bold;letter-spacing:-0.9px}.hy-footer-base__logo .hy-site-logo__label{max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.hy-footer-base__content{font-size:1rem;line-height:24px;color:var(--grayscale-white);font-family:var(--main-font-family);font-style:normal;font-weight:600;letter-spacing:-0.1px;margin:22px 0;white-space:pre-line}@media (min-width: 30rem){.hy-footer-base__content{margin:22px 0}}@media (min-width: 60rem){.hy-footer-base__content{margin:32px 0}}@media (min-width: 75.0625rem){.hy-footer-base__content{margin:44px 0}}.hy-footer-base__content address{font-style:normal}.hy-footer-base__content a{color:var(--grayscale-white);font-family:var(--main-font-family)}.hy-footer-base__some{-webkit-box-align:center;-ms-flex-align:center;align-items:center;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:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0;z-index:2}@media (min-width: 48rem){.hy-footer-base__some{margin-bottom:64px}}@media (min-width: 60rem){.hy-footer-base__some{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:0}}@media (min-width: 75.0625rem){.hy-footer-base__some{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-footer-base__some__label{font-size:1rem;line-height:24px;color:var(--grayscale-white);font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.1px;margin-bottom:8px;margin-right:24px}@media (min-width: 60rem){.hy-footer-base__some__label{margin-bottom:8px}}.hy-footer-base__some__items{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.hy-footer-base__some__item{margin-right:24px}.hy-footer-base__some__item :last-child(){margin-right:0}.hy-footer-base__some__item:hover{color:var(--grayscale-medium) !important}.hy-footer-base__some__item:hover svg{fill:var(--grayscale-medium)}.hy-footer-base__some svg{fill:var(--grayscale-white)}.hy-footer-base__right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;grid-column:2/-1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;max-height:100%;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:100%}.hy-footer-base__right hy-footer-link-item{float:none;width:100%}@media (min-width: 30rem){.hy-footer-base__right{margin-bottom:32px}}@media (min-width: 48rem){.hy-footer-base__right{display:block;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.hy-footer-base__right hy-footer-link-item{clear:right;float:left;height:-webkit-max-content;height:-moz-max-content;height:max-content;width:50%;margin-bottom:1.5rem}}@media (min-width: 60rem){.hy-footer-base__right{-webkit-box-ordinal-group:unset;-ms-flex-order:unset;order:unset}}.hy-footer-base__bottom{border-top:1px solid var(--grayscale-white);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;grid-column:1/-1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:2.5rem 0 1rem;-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;padding-top:2.5rem;width:100%}@media (min-width: 48rem){.hy-footer-base__bottom{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding-top:1rem}}.hy-footer-base__bottom__links{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1.25rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0 1rem 1rem}@media (min-width: 48rem){.hy-footer-base__bottom__links{padding:0;gap:2rem}}.hy-footer-base__bottom__link{color:var(--grayscale-white);font-family:var(--main-font-family);font-size:14px;font-weight:600;letter-spacing:-0.1;line-height:19.07px;text-align:right;text-decoration:underline;text-decoration-thickness:auto}.hy-footer-base__bottom__link:hover,.hy-footer-base__bottom__link:focus-within{text-decoration-thickness:2px}.hy-footer-base__copy{font-size:1rem;line-height:24px;-ms-flex-item-align:center;align-self:center;color:var(--grayscale-white);display:block;font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.1px;text-align:center}@media (min-width: 48rem){.hy-footer-base__copy{-ms-flex-item-align:end;align-self:flex-end;margin-left:0.5rem}}";
|
|
10
10
|
|
|
11
11
|
const HyFooterBase$1 = /*@__PURE__*/ proxyCustomElement(class HyFooterBase extends HTMLElement {
|
|
12
12
|
constructor() {
|
|
@@ -19,24 +19,29 @@ const HyFooterBase$1 = /*@__PURE__*/ proxyCustomElement(class HyFooterBase exten
|
|
|
19
19
|
this.someLabel = undefined;
|
|
20
20
|
this.copyrightText = undefined;
|
|
21
21
|
this.dataFooterBaseLinks = undefined;
|
|
22
|
+
this.dataFooterPostSectionLinks = undefined;
|
|
22
23
|
this.dataFooterBaseSome = undefined;
|
|
23
24
|
}
|
|
24
25
|
async componentWillLoad() {
|
|
25
26
|
this._dataFooterBaseLinks = await jsonParserWorker(this.dataFooterBaseLinks);
|
|
26
27
|
this._dataFooterBaseSome = await jsonParserWorker(this.dataFooterBaseSome);
|
|
28
|
+
this._dataFooterPostSectionLinks = await jsonParserWorker(this.dataFooterPostSectionLinks);
|
|
27
29
|
}
|
|
28
30
|
render() {
|
|
29
31
|
const logoColor = ColorVariant.white;
|
|
30
32
|
const classAttributes = ["hy-footer-base--content-container"].join(" ");
|
|
31
33
|
const links = this._dataFooterBaseLinks;
|
|
34
|
+
const postSectionLinks = this._dataFooterPostSectionLinks;
|
|
32
35
|
const some = this._dataFooterBaseSome;
|
|
33
|
-
return (h(Host, { class: classAttributes }, h("div", { class: "hy-footer-base" }, h("div", { class: "hy-footer-base__left" }, h("div", { class: "hy-footer-base__logo" }, h("hy-site-logo", { type: FooterVariant.footer, color: logoColor, url: this.logoUrl, label: this.logoLabel })), h("div", { class: "hy-footer-base__content" }, h("slot", { name: "content" })), h("div", { class: "hy-footer-base__some" }, h("
|
|
36
|
+
return (h(Host, { class: classAttributes }, h("div", { class: "hy-footer-base" }, h("div", { class: "hy-footer-base__left" }, h("div", { class: "hy-footer-base__logo" }, h("hy-site-logo", { type: FooterVariant.footer, color: logoColor, url: this.logoUrl, label: this.logoLabel })), h("div", { class: "hy-footer-base__content" }, h("slot", { name: "content" })), h("div", { class: "hy-footer-base__some" }, h("div", { class: "hy-footer-base__some__items" }, some &&
|
|
34
37
|
some.map((s) => {
|
|
35
38
|
return (h("a", { "aria-label": s.label, href: s.url, class: `hy-footer-base__some__item`, title: s.label, target: "_blank" }, h("hy-icon", { icon: `hy-icon-some-${s.type}`, size: 36 })));
|
|
36
39
|
})))), h("div", { class: "hy-footer-base__right" }, links &&
|
|
37
40
|
links.map((link) => {
|
|
38
|
-
|
|
39
|
-
|
|
41
|
+
var _a;
|
|
42
|
+
return (h("hy-footer-link-item", { label: link.label, url: link.url, color: FooterLinkItemColor.white, mainLink: link.mainlink, items: (_a = link.items) !== null && _a !== void 0 ? _a : null }));
|
|
43
|
+
})), postSectionLinks && (h("div", { class: "hy-footer-base__bottom" }, h("div", { class: "hy-footer-base__bottom__links" }, postSectionLinks &&
|
|
44
|
+
postSectionLinks.map((item) => (h("a", { class: "hy-footer-base__bottom__link", href: item.url, target: item.external ? "_blank" : "_self" }, item.label)))), this.copyrightText && h("span", { class: "hy-footer-base__copy" }, this.copyrightText))))));
|
|
40
45
|
}
|
|
41
46
|
static get style() { return hyFooterBaseCss; }
|
|
42
47
|
}, [4, "hy-footer-base", {
|
|
@@ -47,6 +52,7 @@ const HyFooterBase$1 = /*@__PURE__*/ proxyCustomElement(class HyFooterBase exten
|
|
|
47
52
|
"someLabel": [1, "some-label"],
|
|
48
53
|
"copyrightText": [1, "copyright-text"],
|
|
49
54
|
"dataFooterBaseLinks": [1, "data-footer-base-links"],
|
|
55
|
+
"dataFooterPostSectionLinks": [1, "data-footer-post-section-links"],
|
|
50
56
|
"dataFooterBaseSome": [1, "data-footer-base-some"]
|
|
51
57
|
}]);
|
|
52
58
|
function defineCustomElement$1() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"hy-footer-base.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,0sMAA0sM;;MCuBrtMA,cAAY;;;;iBAIc,mBAAmB,CAAC,KAAK;;;gBAYjC,YAAY,CAAC,GAAG;;;;;;EAqB7C,MAAM,iBAAiB;IACrB,IAAI,CAAC,oBAAoB,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC7E,IAAI,CAAC,mBAAmB,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;GAC5E;EAED,MAAM;IACJ,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC;IACrC,MAAM,eAAe,GAAG,CAAC,mCAAmC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxE,MAAM,KAAK,GAAG,IAAI,CAAC,oBAA8C,CAAC;IAClE,MAAM,IAAI,GAAG,IAAI,CAAC,mBAA4C,CAAC;IAE/D,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,IAC1B,WAAK,KAAK,EAAC,gBAAgB,IACzB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,sBAAsB,IAC/B,oBAAc,IAAI,EAAE,aAAa,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,GAAI,CACpG,EACN,WAAK,KAAK,EAAC,yBAAyB,IAClC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EACN,WAAK,KAAK,EAAC,sBAAsB,IAC/B,YAAM,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,SAAS,CAAQ,EACjE,WAAK,KAAK,EAAC,6BAA6B,IACrC,IAAI;MACH,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACT,QACE,uBACc,CAAC,CAAC,KAAK,EACnB,IAAI,EAAE,CAAC,CAAC,GAAG,EACX,KAAK,EAAE,4BAA4B,EACnC,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,MAAM,EAAC,QAAQ,IAEf,eAAS,IAAI,EAAE,gBAAgB,CAAC,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,GAAI,CACnD,EACJ;OACH,CAAC,CACA,CACF,CACF,EACN,WAAK,KAAK,EAAC,uBAAuB,IAC/B,KAAK;MACJ,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI;QACb,QACE,2BACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,mBAAmB,CAAC,KAAK,GACX,EACvB;OACH,CAAC,EACH,IAAI,CAAC,aAAa,IAAI,YAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,aAAa,CAAQ,CACjF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["HyFooterBase"],"sources":["./src/components/footer/hy-footer-base/hy-footer-base.scss?tag=hy-footer-base","./src/components/footer/hy-footer-base/hy-footer-base.tsx"],"sourcesContent":[".hy-footer-base--content-container {\n background-color: var(--grayscale-black);\n display: block;\n max-width: 100%;\n}\n\n.hy-footer-base {\n background-color: var(--grayscale-black);\n display: flex;\n flex-direction: column-reverse;\n max-height: 100%;\n padding: 32px 16px 32px 16px;\n place-content: center space-between;\n position: relative;\n width: 100%;\n\n @include breakpoint($narrow) {\n flex-direction: column-reverse;\n margin: 0 auto;\n max-width: $fullhd;\n padding: 32px 24px 32px 24px;\n }\n\n @include breakpoint($wide) {\n flex-direction: row;\n padding: 36px 32px 36px 32px;\n }\n\n @include breakpoint($extrawide) {\n padding: 40px 32px 40px 32px;\n }\n\n &__left {\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n margin-top: 24px;\n\n @include breakpoint($narrow) {\n align-items: center;\n width: 100%;\n }\n\n @include breakpoint($wide) {\n align-items: flex-start;\n width: 31.11%;\n }\n }\n\n &__logo {\n @include font-size(18px, 16px);\n\n font-family: var(--main-font-family);\n font-weight: bold;\n letter-spacing: -0.9px;\n\n .hy-site-logo__label {\n min-width: max-content;\n max-width: max-content;\n }\n }\n\n &__content {\n @include font-size(16px, 24px);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-style: normal;\n font-weight: 600;\n letter-spacing: -0.1px;\n margin: 32px 0;\n white-space: pre-line;\n\n @include breakpoint($narrow) {\n margin: 32px 0;\n }\n\n @include breakpoint($wide) {\n margin: 42px 0;\n }\n\n @include breakpoint($extrawide) {\n margin: 54px 0;\n }\n\n address {\n font-style: normal;\n }\n\n a {\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n }\n }\n\n &__some {\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-bottom: 64px;\n z-index: 2;\n\n @include breakpoint($wide) {\n align-items: flex-start;\n flex-direction: column;\n margin-bottom: 0;\n }\n\n @include breakpoint($extrawide) {\n align-items: center;\n flex-direction: row;\n }\n\n &__label {\n @include font-size(16px, 24px);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-weight: 600;\n letter-spacing: -0.1px;\n margin-bottom: 8px;\n margin-right: 24px;\n\n @include breakpoint($wide) {\n margin-bottom: 8px;\n }\n }\n\n &__items {\n align-items: center;\n display: flex;\n flex-direction: row;\n }\n\n &__item {\n margin-right: 24px;\n\n :last-child() {\n margin-right: 0;\n }\n\n &:hover {\n color: var(--grayscale-medium) !important;\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n\n svg {\n fill: var(--grayscale-white);\n }\n }\n\n &__right {\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n justify-content: flex-start;\n max-height: 100%;\n width: 100%;\n\n @include breakpoint($narrow) {\n margin-bottom: 32px;\n max-height: 300px;\n width: calc(100% + 24px);\n }\n\n @include breakpoint($wide) {\n max-height: 350px;\n width: 65.56%;\n }\n }\n\n &__copy {\n @include font-size(16px, 24px);\n\n bottom: 40px;\n color: var(--grayscale-white);\n display: inline-block;\n font-family: var(--main-font-family);\n font-weight: 600;\n letter-spacing: -0.1px;\n position: absolute;\n right: 50%;\n text-align: center;\n transform: translateX(50%);\n width: 100%;\n\n @include breakpoint($narrow) {\n bottom: 32px;\n right: 50%;\n transform: translateX(50%);\n }\n\n @include breakpoint($wide) {\n bottom: 36px;\n right: 32px;\n text-align: right;\n transform: none;\n }\n\n @include breakpoint($extrawide) {\n bottom: 40px;\n }\n }\n}\n","export interface FooterBaseLinks {\n label: string;\n url: string;\n isActive?: boolean;\n mainlink?: boolean;\n items: Array<FooterBaseLinks>;\n}\n\nexport interface FooterBaseSome {\n label: string;\n url: string;\n type: string;\n}\n\nimport {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {FooterLinkItemColor, SiteLogoSize, ColorVariant, FooterVariant} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-footer-base\",\n styleUrl: \"hy-footer-base.scss\",\n shadow: false,\n})\nexport class HyFooterBase implements ComponentInterface {\n /**\n * Link item color\n */\n @Prop() color: FooterLinkItemColor = FooterLinkItemColor.white;\n /**\n * Logo url\n */\n @Prop() logoUrl?: string;\n /**\n * Logo label\n */\n @Prop() logoLabel?: string;\n /**\n * Logo size\n */\n @Prop() size: SiteLogoSize = SiteLogoSize.big;\n /**\n * Label for some links\n */\n @Prop() someLabel?: string;\n /**\n * Copyright text\n */\n @Prop() copyrightText: string;\n\n private _dataFooterBaseLinks: FooterBaseLinks[];\n private _dataFooterBaseSome: FooterBaseSome[];\n /**\n * Footer links to be displayed\n */\n @Prop() dataFooterBaseLinks: FooterBaseLinks[] | string;\n /**\n * Footer some links\n */\n @Prop() dataFooterBaseSome: FooterBaseSome[] | string;\n\n async componentWillLoad() {\n this._dataFooterBaseLinks = await jsonParserWorker(this.dataFooterBaseLinks);\n this._dataFooterBaseSome = await jsonParserWorker(this.dataFooterBaseSome);\n }\n\n render() {\n const logoColor = ColorVariant.white;\n const classAttributes = [\"hy-footer-base--content-container\"].join(\" \");\n const links = this._dataFooterBaseLinks as Array<FooterBaseLinks>;\n const some = this._dataFooterBaseSome as Array<FooterBaseSome>;\n\n return (\n <Host class={classAttributes}>\n <div class=\"hy-footer-base\">\n <div class=\"hy-footer-base__left\">\n <div class=\"hy-footer-base__logo\">\n <hy-site-logo type={FooterVariant.footer} color={logoColor} url={this.logoUrl} label={this.logoLabel} />\n </div>\n <div class=\"hy-footer-base__content\">\n <slot name=\"content\"></slot>\n </div>\n <div class=\"hy-footer-base__some\">\n <span class=\"hy-footer-base__some__label\">{this.someLabel}</span>\n <div class=\"hy-footer-base__some__items\">\n {some &&\n some.map((s) => {\n return (\n <a\n aria-label={s.label}\n href={s.url}\n class={`hy-footer-base__some__item`}\n title={s.label}\n target=\"_blank\"\n >\n <hy-icon icon={`hy-icon-some-${s.type}`} size={36} />\n </a>\n );\n })}\n </div>\n </div>\n </div>\n <div class=\"hy-footer-base__right\">\n {links &&\n links.map((link) => {\n return (\n <hy-footer-link-item\n label={link.label}\n url={link.url}\n color={FooterLinkItemColor.white}\n ></hy-footer-link-item>\n );\n })}\n {this.copyrightText && <span class=\"hy-footer-base__copy\">{this.copyrightText}</span>}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"hy-footer-base.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,6vPAA6vP;;MC6BxwPA,cAAY;;;;iBAIc,mBAAmB,CAAC,KAAK;;;gBAYjC,YAAY,CAAC,GAAG;;;;;;;EA0B7C,MAAM,iBAAiB;IACrB,IAAI,CAAC,oBAAoB,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC7E,IAAI,CAAC,mBAAmB,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC3E,IAAI,CAAC,2BAA2B,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;GAC5F;EAED,MAAM;IACJ,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC;IACrC,MAAM,eAAe,GAAG,CAAC,mCAAmC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxE,MAAM,KAAK,GAAG,IAAI,CAAC,oBAA8C,CAAC;IAClE,MAAM,gBAAgB,GAAG,IAAI,CAAC,2BAA4D,CAAC;IAC3F,MAAM,IAAI,GAAG,IAAI,CAAC,mBAA4C,CAAC;IAE/D,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,IAC1B,WAAK,KAAK,EAAC,gBAAgB,IACzB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,sBAAsB,IAC/B,oBAAc,IAAI,EAAE,aAAa,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,GAAI,CACpG,EACN,WAAK,KAAK,EAAC,yBAAyB,IAClC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EACN,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,6BAA6B,IACrC,IAAI;MACH,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACT,QACE,uBACc,CAAC,CAAC,KAAK,EACnB,IAAI,EAAE,CAAC,CAAC,GAAG,EACX,KAAK,EAAE,4BAA4B,EACnC,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,MAAM,EAAC,QAAQ,IAEf,eAAS,IAAI,EAAE,gBAAgB,CAAC,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,GAAI,CACnD,EACJ;OACH,CAAC,CACA,CACF,CACF,EACN,WAAK,KAAK,EAAC,uBAAuB,IAC/B,KAAK;MACJ,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI;;QACb,QACE,2BACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,mBAAmB,CAAC,KAAK,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,GACJ,EACvB;OACH,CAAC,CACA,EACL,gBAAgB,KACf,WAAK,KAAK,EAAC,wBAAwB,IACjC,WAAK,KAAK,EAAC,+BAA+B,IACvC,gBAAgB;MACf,gBAAgB,CAAC,GAAG,CAAC,CAAC,IAAI,MACxB,SAAG,KAAK,EAAC,8BAA8B,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,OAAO,IAC/F,IAAI,CAAC,KAAK,CACT,CACL,CAAC,CACA,EACL,IAAI,CAAC,aAAa,IAAI,YAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,aAAa,CAAQ,CACjF,CACP,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["HyFooterBase"],"sources":["./src/components/footer/hy-footer-base/hy-footer-base.scss?tag=hy-footer-base","./src/components/footer/hy-footer-base/hy-footer-base.tsx"],"sourcesContent":[".hy-footer-base--content-container {\n background-color: var(--grayscale-black);\n display: block;\n max-width: 100%;\n}\n\n.hy-footer-base {\n background-color: var(--grayscale-black);\n display: flex;\n flex-direction: column;\n max-height: 100%;\n padding: 32px 16px 0 16px;\n place-content: center space-between;\n position: relative;\n width: 100%;\n\n @include breakpoint($narrow) {\n flex-direction: column;\n margin: 0 auto;\n max-width: $fullhd;\n padding: 32px 24px 0 24px;\n }\n\n @include breakpoint($wide) {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(2, auto);\n padding: 36px 32px 0 32px;\n }\n\n @include breakpoint($extrawide) {\n padding: 40px 32px 0 32px;\n }\n\n &__left {\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: 24px;\n order: 2;\n\n @include breakpoint($narrow) {\n align-items: center;\n width: 100%;\n }\n\n @include breakpoint($wide) {\n order: unset;\n align-items: flex-start;\n }\n }\n\n &__logo {\n @include font-size(18px, 16px);\n\n font-family: var(--main-font-family);\n font-weight: bold;\n letter-spacing: -0.9px;\n\n .hy-site-logo__label {\n max-width: max-content;\n min-width: max-content;\n }\n }\n\n &__content {\n @include font-size(16px, 24px);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-style: normal;\n font-weight: 600;\n letter-spacing: -0.1px;\n margin: 22px 0;\n white-space: pre-line;\n\n @include breakpoint($narrow) {\n margin: 22px 0;\n }\n\n @include breakpoint($wide) {\n margin: 32px 0;\n }\n\n @include breakpoint($extrawide) {\n margin: 44px 0;\n }\n\n address {\n font-style: normal;\n }\n\n a {\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n }\n }\n\n &__some {\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-bottom: 0;\n z-index: 2;\n\n @include breakpoint($medium) {\n margin-bottom: 64px;\n }\n\n @include breakpoint($wide) {\n align-items: flex-start;\n flex-direction: column;\n margin-bottom: 0;\n }\n\n @include breakpoint($extrawide) {\n align-items: center;\n flex-direction: row;\n }\n\n &__label {\n @include font-size(16px, 24px);\n\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-weight: 600;\n letter-spacing: -0.1px;\n margin-bottom: 8px;\n margin-right: 24px;\n\n @include breakpoint($wide) {\n margin-bottom: 8px;\n }\n }\n\n &__items {\n align-items: center;\n display: flex;\n flex-direction: row;\n }\n\n &__item {\n margin-right: 24px;\n\n :last-child() {\n margin-right: 0;\n }\n\n &:hover {\n color: var(--grayscale-medium) !important;\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n\n svg {\n fill: var(--grayscale-white);\n }\n }\n\n &__right {\n display: flex;\n flex-direction: column;\n grid-column: 2 / -1;\n justify-content: center;\n max-height: 100%;\n order: 1;\n width: 100%;\n\n hy-footer-link-item {\n float: none;\n width: 100%;\n }\n\n @include breakpoint($narrow) {\n margin-bottom: 32px;\n }\n\n @include breakpoint($medium) {\n display: block;\n justify-content: flex-start;\n\n hy-footer-link-item {\n clear: right;\n float: left;\n height: max-content;\n width: 50%;\n margin-bottom: 1.5rem;\n }\n }\n\n @include breakpoint($wide) {\n order: unset;\n }\n }\n\n &__bottom {\n border-top: 1px solid var(--grayscale-white);\n display: flex;\n flex-direction: column;\n grid-column: 1 / -1;\n justify-content: center;\n margin: 2.5rem 0 1rem;\n order: 3;\n padding-top: 2.5rem;\n width: 100%;\n\n @include breakpoint($medium) {\n flex-direction: row;\n justify-content: space-between;\n padding-top: 1rem;\n }\n\n &__links {\n align-items: flex-start;\n display: flex;\n flex-wrap: wrap;\n gap: 1.25rem;\n justify-content: center;\n padding: 0 1rem 1rem;\n\n @include breakpoint($medium) {\n padding: 0;\n gap: 2rem;\n }\n }\n\n &__link {\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n font-size: 14px;\n font-weight: 600;\n letter-spacing: -0.1;\n line-height: 19.07px;\n text-align: right;\n text-decoration: underline;\n text-decoration-thickness: auto;\n\n &:hover,\n &:focus-within {\n text-decoration-thickness: 2px;\n }\n }\n }\n\n &__copy {\n @include font-size(16px, 24px);\n\n align-self: center;\n color: var(--grayscale-white);\n display: block;\n font-family: var(--main-font-family);\n font-weight: 600;\n letter-spacing: -0.1px;\n text-align: center;\n\n @include breakpoint($medium) {\n align-self: flex-end;\n margin-left: 0.5rem;\n }\n }\n}\n","export interface FooterBaseLinks {\n label: string;\n url: string;\n isActive?: boolean;\n mainlink?: boolean;\n items: Array<FooterBaseLinks>;\n}\n\nexport interface FooterPostSectionLinks {\n label: string;\n url: string;\n external: boolean;\n}\n\nexport interface FooterBaseSome {\n label: string;\n url: string;\n type: string;\n}\n\nimport {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {FooterLinkItemColor, SiteLogoSize, ColorVariant, FooterVariant} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n tag: \"hy-footer-base\",\n styleUrl: \"hy-footer-base.scss\",\n shadow: false,\n})\nexport class HyFooterBase implements ComponentInterface {\n /**\n * Link item color\n */\n @Prop() color: FooterLinkItemColor = FooterLinkItemColor.white;\n /**\n * Logo url\n */\n @Prop() logoUrl?: string;\n /**\n * Logo label\n */\n @Prop() logoLabel?: string;\n /**\n * Logo size\n */\n @Prop() size: SiteLogoSize = SiteLogoSize.big;\n /**\n * Label for some links\n */\n @Prop() someLabel?: string;\n /**\n * Copyright text\n */\n @Prop() copyrightText: string;\n\n private _dataFooterBaseLinks: FooterBaseLinks[];\n private _dataFooterBaseSome: FooterBaseSome[];\n private _dataFooterPostSectionLinks: FooterPostSectionLinks[];\n /**\n * Footer links to be displayed\n */\n @Prop() dataFooterBaseLinks: FooterBaseLinks[] | string;\n /**\n * Footer post section links\n */\n @Prop() dataFooterPostSectionLinks: FooterPostSectionLinks[] | string;\n /**\n * Footer some links\n */\n @Prop() dataFooterBaseSome: FooterBaseSome[] | string;\n\n async componentWillLoad() {\n this._dataFooterBaseLinks = await jsonParserWorker(this.dataFooterBaseLinks);\n this._dataFooterBaseSome = await jsonParserWorker(this.dataFooterBaseSome);\n this._dataFooterPostSectionLinks = await jsonParserWorker(this.dataFooterPostSectionLinks);\n }\n\n render() {\n const logoColor = ColorVariant.white;\n const classAttributes = [\"hy-footer-base--content-container\"].join(\" \");\n const links = this._dataFooterBaseLinks as Array<FooterBaseLinks>;\n const postSectionLinks = this._dataFooterPostSectionLinks as Array<FooterPostSectionLinks>;\n const some = this._dataFooterBaseSome as Array<FooterBaseSome>;\n\n return (\n <Host class={classAttributes}>\n <div class=\"hy-footer-base\">\n <div class=\"hy-footer-base__left\">\n <div class=\"hy-footer-base__logo\">\n <hy-site-logo type={FooterVariant.footer} color={logoColor} url={this.logoUrl} label={this.logoLabel} />\n </div>\n <div class=\"hy-footer-base__content\">\n <slot name=\"content\"></slot>\n </div>\n <div class=\"hy-footer-base__some\">\n <div class=\"hy-footer-base__some__items\">\n {some &&\n some.map((s) => {\n return (\n <a\n aria-label={s.label}\n href={s.url}\n class={`hy-footer-base__some__item`}\n title={s.label}\n target=\"_blank\"\n >\n <hy-icon icon={`hy-icon-some-${s.type}`} size={36} />\n </a>\n );\n })}\n </div>\n </div>\n </div>\n <div class=\"hy-footer-base__right\">\n {links &&\n links.map((link) => {\n return (\n <hy-footer-link-item\n label={link.label}\n url={link.url}\n color={FooterLinkItemColor.white}\n mainLink={link.mainlink}\n items={link.items ?? null}\n ></hy-footer-link-item>\n );\n })}\n </div>\n {postSectionLinks && (\n <div class=\"hy-footer-base__bottom\">\n <div class=\"hy-footer-base__bottom__links\">\n {postSectionLinks &&\n postSectionLinks.map((item) => (\n <a class=\"hy-footer-base__bottom__link\" href={item.url} target={item.external ? \"_blank\" : \"_self\"}>\n {item.label}\n </a>\n ))}\n </div>\n {this.copyrightText && <span class=\"hy-footer-base__copy\">{this.copyrightText}</span>}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -3,7 +3,7 @@ import { F as FooterLinkItemColor, g as FooterLinkVariants, H as HeadingVarians
|
|
|
3
3
|
import { d as defineCustomElement$2 } from './heading.js';
|
|
4
4
|
import { d as defineCustomElement$1 } from './icon.js';
|
|
5
5
|
|
|
6
|
-
const hyFooterLinkItemCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}hy-footer-link-item:not([main-link]){width:100%}@media (min-width:
|
|
6
|
+
const hyFooterLinkItemCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}hy-footer-link-item:not([main-link]){width:100%}@media (min-width: 48rem){hy-footer-link-item:not([main-link]){width:50%}}hy-footer-link-item[main-link]{-ms-hyphens:auto;hyphens:auto;min-width:200px;width:100%}@media (min-width: 30rem){hy-footer-link-item[main-link]{width:50%}}hy-footer-link-item.group[main-link]:not([is-luomus-group]){-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:1rem}@media (min-width: 30rem){hy-footer-link-item.group[main-link]:not([is-luomus-group]){-ms-flex-preferred-size:50%;flex-basis:50%;margin:0}}.hy-footer-link-item--container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 48rem){.hy-footer-link-item--container{margin-bottom:1rem}}.hy-footer-link-item--container .hy-footer-link-item:last-child{margin-bottom:16px}.hy-footer-link-item{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);margin-left:0;margin-right:0;position:relative;text-decoration:none}@media (min-width: 30rem){.hy-footer-link-item{margin-left:0;margin-right:24px}}@media (min-width: 60rem){.hy-footer-link-item{margin-left:32px;margin-right:0}}@media (min-width: 1601px){.hy-footer-link-item{margin-left:48px}}.hy-footer-link-item__main{border:0;padding:0;margin-right:-32px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.hy-footer-link-item__main .hy-heading__container>h3.hy-heading{font-size:1rem;line-height:16px;letter-spacing:-0.45px;padding:1.5rem 0 1px 0 !important;text-transform:uppercase}@media (min-width: 30rem){.hy-footer-link-item__main .hy-heading__container>h3.hy-heading{letter-spacing:-0.44px}}.hy-footer-link-item__main .hy-heading__container>h3.hy-heading .hy-footer-link-item__link{color:var(--grayscale-white);font-family:var(--main-font-family);text-decoration:none;margin-bottom:8px}@media (min-width: 48rem){.hy-footer-link-item__main .hy-heading__container>h3.hy-heading .hy-footer-link-item__link{margin-bottom:12px}}.hy-footer-link-item__color-black{font-size:0.875rem;line-height:18px;font-weight:400;border-bottom:1px solid var(--grayscale-black);color:var(--grayscale-black);letter-spacing:-0.5px;padding:16px 20px 14px 0}.hy-footer-link-item__color-black .hy-footer-link-item__icon svg{fill:var(--brand-main-nearly-black);height:12px;margin-right:2px;width:12px}.hy-footer-link-item__color-black .hy-heading__container>h3.hy-headinga.hy-footer-link-item__link:hover{color:var(--brand-main) !important;text-decoration:underline}.hy-footer-link-item__color-black .hy-heading__container>h3.hy-headinga.hy-footer-link-item__link:hover svg{fill:var(--brand-main)}.hy-footer-link-item__color-white{font-size:0.9375rem;line-height:18px;font-weight:600;border-bottom:1px solid var(--grayscale-white);color:var(--grayscale-white);letter-spacing:-0.5px;padding:15px 20px 15px 0}.hy-footer-link-item__color-white:hover,.hy-footer-link-item__color-white:focus-within{text-decoration:underline}.hy-footer-link-item__color-white .hy-footer-link-item__icon svg{fill:var(--grayscale-white)}.hy-footer-link-item__color-white .hy-heading__container>h3.hy-heading .hy-footer-link-item__link:hover{color:var(--grayscale-medium) !important}.hy-footer-link-item__color-white .hy-heading__container>h3.hy-heading .hy-footer-link-item__link:hover svg{fill:var(--grayscale-medium)}.hy-footer-link-item__icon{position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}";
|
|
7
7
|
|
|
8
8
|
const HyFooterLinkItem = /*@__PURE__*/ proxyCustomElement(class HyFooterLinkItem extends HTMLElement {
|
|
9
9
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"hy-footer-link-item2.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,
|
|
1
|
+
{"file":"hy-footer-link-item2.js","mappings":"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","names":[],"sources":["./src/components/footer/hy-footer-link-item/hy-footer-link-item.scss?tag=hy-footer-link-item","./src/components/footer/hy-footer-link-item/hy-footer-link-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\nhy-footer-link-item:not([main-link]) {\n width: 100%;\n\n @include breakpoint($medium) {\n width: 50%;\n }\n}\n\nhy-footer-link-item[main-link] {\n hyphens: auto;\n min-width: 200px;\n width: 100%;\n\n @include breakpoint($narrow) {\n width: 50%;\n }\n}\n\nhy-footer-link-item.group[main-link]:not([is-luomus-group]) {\n flex-basis: 100%;\n margin-top: 1rem;\n\n @include breakpoint($narrow) {\n flex-basis: 50%;\n margin: 0;\n }\n}\n\n.hy-footer-link-item--container {\n display: flex;\n flex-direction: column;\n\n @include breakpoint($medium) {\n margin-bottom: 1rem;\n }\n\n .hy-footer-link-item:last-child {\n margin-bottom: 16px;\n }\n}\n\n//.hy-footer-link-item__main .hy-heading__container>h3.hy-heading .hy-footer-link-item__link {\n.hy-footer-link-item {\n display: flex;\n font-family: var(--main-font-family);\n margin-left: 0;\n margin-right: 0;\n position: relative;\n text-decoration: none;\n\n @include breakpoint($narrow) {\n margin-left: 0;\n margin-right: 24px;\n //padding: 15px 20px 15px 0;\n }\n\n @include breakpoint($wide) {\n margin-left: 32px;\n margin-right: 0;\n //padding: 15px 20px 15px 0;\n }\n\n @include breakpoint($xlarge) {\n margin-left: 48px;\n }\n\n &__main {\n border: 0;\n padding: 0;\n margin-right: -32px;\n width: fit-content;\n\n .hy-heading__container > h3.hy-heading {\n @include font-size(16px, 16px);\n letter-spacing: -0.45px;\n padding: 1.5rem 0 1px 0 !important;\n text-transform: uppercase;\n\n @include breakpoint($narrow) {\n letter-spacing: -0.44px;\n }\n\n .hy-footer-link-item__link {\n color: var(--grayscale-white);\n font-family: var(--main-font-family);\n text-decoration: none;\n margin-bottom: 8px;\n\n @include breakpoint($medium) {\n margin-bottom: 12px;\n }\n }\n }\n }\n\n &__color-black {\n @include font-size(14px, 18px);\n @include font-weight($regular);\n border-bottom: 1px solid var(--grayscale-black);\n color: var(--grayscale-black);\n letter-spacing: -0.5px;\n padding: 16px 20px 14px 0;\n\n .hy-footer-link-item__icon svg {\n fill: var(--brand-main-nearly-black);\n height: 12px;\n margin-right: 2px;\n width: 12px;\n }\n\n .hy-heading__container > h3.hy-heading {\n &a.hy-footer-link-item__link:hover {\n color: var(--brand-main) !important;\n text-decoration: underline;\n\n svg {\n fill: var(--brand-main);\n }\n }\n }\n }\n\n &__color-white {\n @include font-size(15px, 18px);\n @include font-weight($semibold);\n border-bottom: 1px solid var(--grayscale-white);\n color: var(--grayscale-white);\n letter-spacing: -0.5px;\n padding: 15px 20px 15px 0;\n\n &:hover,\n &:focus-within {\n text-decoration: underline;\n }\n\n .hy-footer-link-item__icon svg {\n fill: var(--grayscale-white);\n }\n\n .hy-heading__container > h3.hy-heading {\n .hy-footer-link-item__link:hover {\n color: var(--grayscale-medium) !important;\n\n svg {\n fill: var(--grayscale-medium);\n }\n }\n }\n }\n\n &__icon {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {FooterLinkItemColor, FooterLinkVariants, HeadingVarians} from \"../../../utils/utils\";\n\n@Component({\n tag: \"hy-footer-link-item\",\n styleUrl: \"hy-footer-link-item.scss\",\n shadow: false,\n})\nexport class HyFooterLinkItem {\n @Prop() label: string;\n @Prop() url: string;\n @Prop() isExternal: boolean = false;\n @Prop() mainLink: boolean = false;\n @Prop() items: Array<any>;\n @Prop() color: FooterLinkItemColor = FooterLinkItemColor.black;\n @Prop() isMobile: boolean;\n @Prop() variant: FooterLinkVariants = FooterLinkVariants.base;\n @Prop() isLuomusGroup: boolean = false;\n\n render() {\n const containerClassAttributes = [\n \"hy-footer-link-item--container\",\n `hy-footer-link-item__${this.variant}`,\n this.items && \"hy-footer-link-item__has-children\",\n ].join(\" \");\n const classAttributes = [\n \"hy-footer-link-item\",\n this.mainLink && \"hy-footer-link-item__main\",\n `hy-footer-link-item__color-${this.color}`,\n ].join(\" \");\n const headingClassAttributes = [\n \"hy-footer-link-item\",\n \"hy-footer-link-item__heading\",\n this.mainLink && \"hy-footer-link-item__main\",\n `hy-footer-link-item__heading__color-${this.color}`,\n ].join(\" \");\n const linkClassAttributes = [\n \"hy-footer-link-item\",\n `hy-footer-link-item__color-${this.color}`,\n this.isLuomusGroup ? `luomus` : \"\",\n ].join(\" \");\n\n if (this.items) {\n if (this.isMobile && this.variant !== FooterLinkVariants.group) {\n return (\n <div class={containerClassAttributes}>\n {this.items.map((item) => {\n const target = item.isExternal === \"external\" ? \"_blank\" : \"_self\";\n return (\n <a class={linkClassAttributes} href={item.url} target={target} style={{color: this.color}}>\n {item.label}\n <hy-icon class={\"hy-footer-link-item__icon\"} icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n );\n })}\n </div>\n );\n } else {\n return (\n <div class={containerClassAttributes}>\n <hy-heading class={headingClassAttributes} heading={HeadingVarians.h3}>\n {this.url.length > 0 && (\n <a class={\"hy-footer-link-item__link\"} href={this.url} style={{color: this.color}}>\n {this.label}\n </a>\n )}\n {this.url.length == 0 && <div class={\"hy-footer-link-item__link\"}>{this.label}</div>}\n </hy-heading>\n {this.items.map((item) => {\n const target = item.isExternal === \"external\" ? \"_blank\" : \"_self\";\n return (\n <a class={linkClassAttributes} href={item.url} target={target} style={{color: this.color}}>\n {item.label}\n <hy-icon class={\"hy-footer-link-item__icon\"} icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n );\n })}\n </div>\n );\n }\n } else {\n const target = this.isExternal ? \"_blank\" : \"_self\";\n return (\n <a class={classAttributes} href={this.url} style={{color: this.color}} target={target}>\n {this.label}\n <hy-icon class={\"hy-footer-link-item__icon\"} icon={\"hy-icon-arrow-right\"} size={16} />\n </a>\n );\n }\n }\n}\n"],"version":3}
|