@everymatrix/general-footer-template 1.36.1 → 1.37.2
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/dist/cjs/custom-content-section.cjs.entry.js +1 -1
- package/dist/cjs/general-footer-template.cjs.entry.js +2 -2
- package/dist/cjs/image-list.cjs.entry.js +1 -1
- package/dist/cjs/link-section-list.cjs.entry.js +13 -4
- package/dist/collection/components/custom-content-section/custom-content-section.css +0 -3
- package/dist/collection/components/general-footer-template/{pariuri_plus_variant.css → demo-footer.css} +52 -62
- package/dist/collection/components/general-footer-template/general-footer-template.js +2 -2
- package/dist/collection/components/image-list/image-list.css +27 -12
- package/dist/collection/components/link-section-list/link-section-list.css +40 -11
- package/dist/collection/components/link-section-list/link-section-list.js +26 -5
- package/dist/components/custom-content-section.js +1 -1
- package/dist/components/general-footer-template.js +2 -2
- package/dist/components/image-list2.js +1 -1
- package/dist/components/link-section-list.js +13 -4
- package/dist/esm/custom-content-section.entry.js +1 -1
- package/dist/esm/general-footer-template.entry.js +2 -2
- package/dist/esm/image-list.entry.js +1 -1
- package/dist/esm/link-section-list.entry.js +13 -4
- package/dist/general-footer-template/general-footer-template.esm.js +1 -1
- package/dist/general-footer-template/p-302f22ac.entry.js +1 -0
- package/dist/general-footer-template/p-3b444309.entry.js +1 -0
- package/dist/general-footer-template/{p-924cd130.entry.js → p-cdb04e73.entry.js} +1 -1
- package/dist/general-footer-template/p-d8454981.entry.js +1 -0
- package/package.json +1 -1
- package/dist/general-footer-template/p-11bf82cf.entry.js +0 -1
- package/dist/general-footer-template/p-19b35987.entry.js +0 -1
- package/dist/general-footer-template/p-7c95345c.entry.js +0 -1
- /package/dist/types/Users/{adrian.pripon/Documents/Work → sebastian.strulea/Documents/work}/widgets-stencil/packages/general-footer-template/.stencil/packages/general-footer-template/stencil.config.d.ts +0 -0
|
@@ -9525,7 +9525,7 @@ sanitizeHtml.simpleTransform = function(newTagName, newAttribs, merge) {
|
|
|
9525
9525
|
};
|
|
9526
9526
|
};
|
|
9527
9527
|
|
|
9528
|
-
const customContentSectionCss = ".sc-custom-content-section-h{display:block}*.sc-custom-content-section{margin:0}.CustomContentSectionWrapper.sc-custom-content-section{box-sizing:border-box;height:100%;
|
|
9528
|
+
const customContentSectionCss = ".sc-custom-content-section-h{display:block}*.sc-custom-content-section{margin:0}.CustomContentSectionWrapper.sc-custom-content-section{box-sizing:border-box;height:100%;align-items:center}";
|
|
9529
9529
|
|
|
9530
9530
|
const CustomContentSection = class {
|
|
9531
9531
|
constructor(hostRef) {
|
|
@@ -210,7 +210,7 @@ const normalizeRepeaterContent = (data) => {
|
|
|
210
210
|
return repeaterResponse;
|
|
211
211
|
};
|
|
212
212
|
|
|
213
|
-
const
|
|
213
|
+
const demoFooterCss = ":host {\n display: block;\n}\n\n/* $-background-primary: #14202d; */\n* {\n font-family: sans-serif;\n}\n\nhtml,\nbody {\n margin: 0;\n padding: 0;\n font-family: inherit;\n}\n\n.FooterSectionContainer {\n color: var(--emw--footer-typography, var(--emw-color-thpography, #fff));\n padding: 12px;\n}\n\n/* // FOOTER CONTAINER - only serves to be read as a container */\n.FooterContainer {\n container-type: inline-size;\n container-name: footerContainer;\n}\n\n.FooterGrid {\n background-color: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));\n display: grid;\n padding: 8px 24px 0 24px;\n grid-template-rows: repeat(9, auto);\n grid-template-areas: \"one\" \"two\" \"three\" \"four\" \"five\" \"six\" \"seven\";\n}\n\n.FooterSectionContainer1 {\n position: relative;\n grid-area: one;\n}\n\n.FooterSectionContainer2 {\n position: relative;\n grid-area: two;\n}\n\n.FooterSectionContainer3 {\n position: relative;\n grid-area: three;\n}\n\n.FooterSectionContainer4 {\n position: relative;\n grid-area: four;\n}\n\n.FooterSectionContainer5 {\n grid-area: five;\n}\n\n.FooterSectionContainer6 {\n padding-top: 22px;\n grid-area: six;\n}\n\n.FooterSectionContainer7 {\n grid-area: seven;\n}\n\n/* // remove paddings */\n.FooterSectionContainer7 div {\n padding: 0;\n}\n\n@container (max-width: 750px) {\n .FooterSectionContainer3:after,\n.FooterSectionContainer2:after {\n position: absolute;\n content: \"\";\n height: 1px;\n width: 90%;\n background-color: var(--emw--color-gray-100, #444);\n }\n\n .FooterSectionContainer5 {\n grid-area: five;\n background-color: var(--emw--color-background-secondary, #060706);\n padding: 30px 0;\n font-size: var(--emw--font-size-medium, 16px);\n min-height: var(--emw--size-medium-plus, 100px);\n justify-self: center;\n }\n}\n/* // STYLES FOR TABLET / DESKTOP */\n@container (min-width: 750px) {\n .FooterGrid {\n background: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));\n display: grid;\n border-top: 5px solid var(--emw--footer-color-primary, var(--emw--color-primary, #22B04E));\n grid-template-rows: repeat(5, auto);\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-template-areas: \"one two three four\" \"five five five five\" \"six six six six\" \"seven seven seven seven\";\n }\n\n .FooterSectionContainer1 {\n padding: 30px 40px;\n grid-area: one;\n background: var(--emw--color-background, #000000);\n }\n\n .FooterSectionContainer2 {\n grid-area: two;\n min-height: var(--emw--size-4x-medium, 500px);\n }\n\n .FooterSectionContainer3 {\n grid-area: three;\n }\n\n .FooterSectionContainer4 {\n grid-area: four;\n }\n\n .FooterSectionContainer5 {\n grid-area: five;\n background-color: var(--emw--color-background-secondary, #091217);\n padding: var(--emw--spacing-x-large, 30px) 0;\n font-size: var(--emw--font-size-medium, 16px);\n min-height: var(--emw--size-medium-plus, 100px);\n }\n\n .FooterSectionContainer6 {\n grid-area: six;\n padding: 0;\n }\n\n .FooterSectionContainer7 {\n grid-area: seven;\n padding: 0;\n }\n\n /* // remove paddings */\n .FooterSectionContainer5 .CustomContentSectionWrapper {\n padding: 0;\n }\n\n .FooterSectionContainer5 .CustomContentSectionWrapper div {\n display: flex;\n flex-direction: left;\n align-items: center;\n padding-left: var(--emw--spacing-large, 20px);\n }\n\n .FooterSectionContainer5 .CustomContentSectionWrapper div p {\n margin: var(--emw--spacing-2x-small, 5px);\n text-align: center;\n }\n\n .FooterSectionContainer6 .CustomContentSectionWrapper div p {\n text-align: center;\n }\n\n .FooterSectionContainer6 .ImageListWrapper {\n padding: 0;\n }\n\n .FooterSectionContainer6 .ImageListWrapper {\n padding: 0;\n }\n\n .FooterSectionContainer7 .CustomContentSectionWrapper {\n padding: 0;\n padding-bottom: var(--emw--spacing-large, 22px);\n font-size: var(--emw--font-size-small, 14px);\n }\n}";
|
|
214
214
|
|
|
215
215
|
const GeneralFooterTemplate = class {
|
|
216
216
|
constructor(hostRef) {
|
|
@@ -315,6 +315,6 @@ const GeneralFooterTemplate = class {
|
|
|
315
315
|
}
|
|
316
316
|
}
|
|
317
317
|
};
|
|
318
|
-
GeneralFooterTemplate.style =
|
|
318
|
+
GeneralFooterTemplate.style = demoFooterCss;
|
|
319
319
|
|
|
320
320
|
exports.general_footer_template = GeneralFooterTemplate;
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-95c2e2b1.js');
|
|
6
6
|
|
|
7
|
-
const imageListCss = ".sc-image-list-h{display:block
|
|
7
|
+
const imageListCss = ".sc-image-list-h {\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.ImageListContainer.sc-image-list {\n height: 100%;\n}\n.ImageListWrapper.sc-image-list {\n box-sizing: border-box;\n height: 100%;\n display: flex;\n flex-direction: column;\n max-width: 90%;\n margin: auto;\n padding: var(--emw--spacing-large, 20px) 0;\n}\n.ImageListSectionTitle.sc-image-list {\n width: 100%;\n display: flex;\n justify-content: left;\n align-content: center;\n padding: var(--emw--spacing-large, 20px) var(--emw--spacing-medium, 14px) var(--emw--spacing-x-large, 30px);\n color: var(--emw--footer-typography, var(--emw-color-thpography, #fff));\n text-transform: uppercase;\n font-size: 24px;\n font-weight: 100;\n}\n.ImageListLineup.sc-image-list {\n box-sizing: border-box;\n display: flex;\n flex-wrap: wrap;\n gap: var(--emw--spacing-x-large, 30px);\n justify-content: left;\n align-items: flex-start;\n padding-left: var(--emw--spacing-large, 20px);\n}\n.ImageListIcon.sc-image-list img.sc-image-list {\n max-height: var(--emw--size-medium-2x-minus, 40px);\n}\n\na.sc-image-list {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n text-decoration: none;\n}\n\na.sc-image-list p.sc-image-list {\n text-decoration: none;\n color: var(--emw--color-gray-100, #666);\n margin: 0;\n}\n\n@container (max-width: 750px) {\n .ImageListSectionTitle.sc-image-list {\n justify-content: center;\n font-size: var(--emw--font-size-medium, 16px);\n color: var(--emw--footer-typography, var(--emw-color-thpography, #fff));\n padding: var(--emw--spacing-large, 20px) 0 var(--emw--spacing-x-large, 30px);\n justify-content: center;\n }\n .ImageListLineup.sc-image-list {\n justify-content: center;\n padding: 0;\n }\n}";
|
|
8
8
|
|
|
9
9
|
const ImageList = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-95c2e2b1.js');
|
|
6
6
|
|
|
7
|
-
const linkSectionListCss = ":host {\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.LinkSectionListContainer {\n display: block;\n container-type: inline-size;\n}\n.LinkSectionListWrapper {\n box-sizing: border-box;\n display:
|
|
7
|
+
const linkSectionListCss = ":host {\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.LinkSectionListContainer {\n display: block;\n container-type: inline-size;\n}\n.LinkSectionListWrapper {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n grid-template-columns: 1fr;\n}\n.LinkSectionListTitle {\n font-weight: var(--emw--font-weight-semibold, 500);\n text-transform: uppercase;\n}\n.LinkSectionListLink {\n font-weight: var(--emw--font-weight-light, 300);\n}\n\nul {\n width: fit-content;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: var(--emw--spacing-medium, 16px);\n padding-left: var(--emw--spacing-small-minus, 10px);\n font-size: var(--emw--font-size-small, 16px);\n text-transform: uppercase;\n}\nul li {\n list-style: disc;\n display: flex;\n align-items: center;\n padding-left: 25px;\n position: relative;\n}\nul li::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 8px;\n height: 8px;\n background-color: var(--emw--footer-color-primary, var(--emw--color-primary, #22B04E));\n border-radius: 50%;\n}\nul li .LinkSectionListLinkText {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\nul li .LinkSectionListLinkText span {\n text-align: center;\n cursor: pointer;\n}\nul li .LinkSectionListLinkText img.LinkSectionIcon {\n position: relative;\n height: 25px;\n padding: 0 5px;\n}\n\na {\n color: inherit;\n}\n\n@container (min-width: 280px) {\n .LinkSectionListWrapper {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n@container (min-width: 650px) {\n .LinkSectionListWrapper {\n grid-gap: 2rem;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: 1fr;\n }\n}";
|
|
8
8
|
|
|
9
9
|
const LinkSectionList = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -25,13 +25,15 @@ const LinkSectionList = class {
|
|
|
25
25
|
var _a, _b;
|
|
26
26
|
const linkSections = (_b = (_a = this.repeaterContent) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.reduce((obj, elem) => {
|
|
27
27
|
const currentCategory = elem.linkCategory;
|
|
28
|
+
const iconUrl = elem.image;
|
|
28
29
|
const foundCategory = obj.find(el => el.categoryTitle === currentCategory);
|
|
29
30
|
if (foundCategory) {
|
|
30
31
|
foundCategory.links.push({
|
|
31
32
|
linkName: elem.title,
|
|
32
33
|
linkUrl: elem.url,
|
|
33
34
|
target: elem.target,
|
|
34
|
-
externalLink: elem.isExternalLink
|
|
35
|
+
externalLink: elem.isExternalLink,
|
|
36
|
+
icon: iconUrl
|
|
35
37
|
});
|
|
36
38
|
}
|
|
37
39
|
else {
|
|
@@ -41,13 +43,20 @@ const LinkSectionList = class {
|
|
|
41
43
|
linkName: elem.title,
|
|
42
44
|
linkUrl: elem.url,
|
|
43
45
|
target: elem.target,
|
|
44
|
-
externalLink: elem.isExternalLink
|
|
46
|
+
externalLink: elem.isExternalLink,
|
|
47
|
+
icon: iconUrl
|
|
45
48
|
}]
|
|
46
49
|
});
|
|
47
50
|
}
|
|
48
51
|
return obj;
|
|
49
52
|
}, []);
|
|
50
|
-
return index.h("div", { class: "LinkSectionListContainer" }, index.h("div", { class: "LinkSectionListWrapper" },
|
|
53
|
+
return index.h("div", { class: "LinkSectionListContainer" }, index.h("div", { class: "LinkSectionListWrapper" }, index.h("h2", { class: "LinkSectionListTitle" }, linkSections.categoryTitle), linkSections.map(category => index.h("ul", null, category.links.map(link => index.h("li", { class: "LinkSectionListLink", key: link.linkName }, this.navigateViaEvent === true ? (index.h("span", null, link.linkName && link.icon ? (index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }), index.h("span", null, link.linkName, " "))) :
|
|
54
|
+
link.linkName ?
|
|
55
|
+
index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("span", null, link.linkName, " "))
|
|
56
|
+
:
|
|
57
|
+
index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))) : (index.h("a", { class: "LinkSectionListLink", href: link.externalLink ? link.linkUrl : `${this.baseUrl}/${this.language}${link.linkUrl}`, target: link.target || '_blank' }, link.linkName && link.icon ? (index.h("span", { class: "LinkSectionListLinkText" }, index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }), index.h("span", null, link.linkName))) :
|
|
58
|
+
link.linkName ? (index.h("span", { class: "LinkSectionListLinkText" }, index.h("span", null, link.linkName))) :
|
|
59
|
+
index.h("span", { class: "LinkSectionListLinkText" }, index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }))))))))));
|
|
51
60
|
}
|
|
52
61
|
};
|
|
53
62
|
LinkSectionList.style = linkSectionListCss;
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
/* $-background-primary: #14202d; */
|
|
6
|
-
|
|
7
6
|
* {
|
|
8
7
|
font-family: sans-serif;
|
|
9
8
|
}
|
|
@@ -16,7 +15,7 @@ body {
|
|
|
16
15
|
}
|
|
17
16
|
|
|
18
17
|
.FooterSectionContainer {
|
|
19
|
-
color: #fff;
|
|
18
|
+
color: var(--emw--footer-typography, var(--emw-color-thpography, #fff));
|
|
20
19
|
padding: 12px;
|
|
21
20
|
}
|
|
22
21
|
|
|
@@ -26,127 +25,119 @@ body {
|
|
|
26
25
|
container-name: footerContainer;
|
|
27
26
|
}
|
|
28
27
|
|
|
29
|
-
|
|
30
28
|
.FooterGrid {
|
|
31
|
-
background-color: #
|
|
29
|
+
background-color: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));
|
|
32
30
|
display: grid;
|
|
33
31
|
padding: 8px 24px 0 24px;
|
|
34
32
|
grid-template-rows: repeat(9, auto);
|
|
35
|
-
grid-template-areas: "one"
|
|
36
|
-
"two"
|
|
37
|
-
"three"
|
|
38
|
-
"four"
|
|
39
|
-
"five"
|
|
40
|
-
"six"
|
|
41
|
-
"seven";
|
|
33
|
+
grid-template-areas: "one" "two" "three" "four" "five" "six" "seven";
|
|
42
34
|
}
|
|
43
35
|
|
|
44
|
-
|
|
45
|
-
|
|
46
36
|
.FooterSectionContainer1 {
|
|
47
37
|
position: relative;
|
|
48
38
|
grid-area: one;
|
|
49
|
-
|
|
50
39
|
}
|
|
40
|
+
|
|
51
41
|
.FooterSectionContainer2 {
|
|
52
42
|
position: relative;
|
|
53
43
|
grid-area: two;
|
|
54
|
-
border-bottom: 1px solid rgba(254, 254, 254, 0.2);
|
|
55
44
|
}
|
|
45
|
+
|
|
56
46
|
.FooterSectionContainer3 {
|
|
57
47
|
position: relative;
|
|
58
48
|
grid-area: three;
|
|
59
|
-
|
|
60
49
|
}
|
|
50
|
+
|
|
61
51
|
.FooterSectionContainer4 {
|
|
62
52
|
position: relative;
|
|
63
53
|
grid-area: four;
|
|
64
|
-
border-bottom: 1px solid rgba(254, 254, 254, 0.2);
|
|
65
54
|
}
|
|
55
|
+
|
|
66
56
|
.FooterSectionContainer5 {
|
|
67
57
|
grid-area: five;
|
|
68
|
-
/* border-bottom: 1px solid #444; */
|
|
69
58
|
}
|
|
59
|
+
|
|
70
60
|
.FooterSectionContainer6 {
|
|
71
61
|
padding-top: 22px;
|
|
72
62
|
grid-area: six;
|
|
73
63
|
}
|
|
64
|
+
|
|
74
65
|
.FooterSectionContainer7 {
|
|
75
66
|
grid-area: seven;
|
|
76
67
|
}
|
|
77
68
|
|
|
78
69
|
/* // remove paddings */
|
|
79
|
-
.FooterSectionContainer7 div{
|
|
70
|
+
.FooterSectionContainer7 div {
|
|
80
71
|
padding: 0;
|
|
81
72
|
}
|
|
82
73
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
|
|
74
|
+
@container (max-width: 750px) {
|
|
75
|
+
.FooterSectionContainer3:after,
|
|
76
|
+
.FooterSectionContainer2:after {
|
|
77
|
+
position: absolute;
|
|
78
|
+
content: "";
|
|
79
|
+
height: 1px;
|
|
80
|
+
width: 90%;
|
|
81
|
+
background-color: var(--emw--color-gray-100, #444);
|
|
82
|
+
}
|
|
94
83
|
|
|
84
|
+
.FooterSectionContainer5 {
|
|
85
|
+
grid-area: five;
|
|
86
|
+
background-color: var(--emw--color-background-secondary, #060706);
|
|
87
|
+
padding: 30px 0;
|
|
88
|
+
font-size: var(--emw--font-size-medium, 16px);
|
|
89
|
+
min-height: var(--emw--size-medium-plus, 100px);
|
|
90
|
+
justify-self: center;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
95
93
|
/* // STYLES FOR TABLET / DESKTOP */
|
|
96
94
|
@container (min-width: 750px) {
|
|
97
95
|
.FooterGrid {
|
|
98
|
-
background:
|
|
96
|
+
background: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));
|
|
99
97
|
display: grid;
|
|
98
|
+
border-top: 5px solid var(--emw--footer-color-primary, var(--emw--color-primary, #22B04E));
|
|
100
99
|
grid-template-rows: repeat(5, auto);
|
|
101
|
-
grid-template-columns:
|
|
102
|
-
grid-template-areas: "one two"
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
"six six"
|
|
106
|
-
"seven seven";
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
|
|
100
|
+
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
101
|
+
grid-template-areas: "one two three four" "five five five five" "six six six six" "seven seven seven seven";
|
|
102
|
+
}
|
|
103
|
+
|
|
110
104
|
.FooterSectionContainer1 {
|
|
105
|
+
padding: 30px 40px;
|
|
111
106
|
grid-area: one;
|
|
112
|
-
|
|
107
|
+
background: var(--emw--color-background, #000000);
|
|
113
108
|
}
|
|
109
|
+
|
|
114
110
|
.FooterSectionContainer2 {
|
|
115
111
|
grid-area: two;
|
|
116
|
-
|
|
112
|
+
min-height: var(--emw--size-4x-medium, 500px);
|
|
117
113
|
}
|
|
114
|
+
|
|
118
115
|
.FooterSectionContainer3 {
|
|
119
116
|
grid-area: three;
|
|
120
|
-
border-bottom: 1px solid rgba(254, 254, 254, 0.2);
|
|
121
117
|
}
|
|
118
|
+
|
|
122
119
|
.FooterSectionContainer4 {
|
|
123
120
|
grid-area: four;
|
|
124
121
|
}
|
|
122
|
+
|
|
125
123
|
.FooterSectionContainer5 {
|
|
126
124
|
grid-area: five;
|
|
125
|
+
background-color: var(--emw--color-background-secondary, #091217);
|
|
126
|
+
padding: var(--emw--spacing-x-large, 30px) 0;
|
|
127
|
+
font-size: var(--emw--font-size-medium, 16px);
|
|
128
|
+
min-height: var(--emw--size-medium-plus, 100px);
|
|
127
129
|
}
|
|
130
|
+
|
|
128
131
|
.FooterSectionContainer6 {
|
|
129
132
|
grid-area: six;
|
|
130
133
|
padding: 0;
|
|
131
134
|
}
|
|
135
|
+
|
|
132
136
|
.FooterSectionContainer7 {
|
|
133
137
|
grid-area: seven;
|
|
134
138
|
padding: 0;
|
|
135
139
|
}
|
|
136
140
|
|
|
137
|
-
/* VERTICAL BARS */
|
|
138
|
-
.FooterSectionContainer3:after {
|
|
139
|
-
position: absolute;
|
|
140
|
-
content: "";
|
|
141
|
-
left: initial;
|
|
142
|
-
bottom:initial;
|
|
143
|
-
top: 30%;
|
|
144
|
-
right: 20px;
|
|
145
|
-
width: 1px;
|
|
146
|
-
height: 40%;
|
|
147
|
-
background-color: #444;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
141
|
/* // remove paddings */
|
|
151
142
|
.FooterSectionContainer5 .CustomContentSectionWrapper {
|
|
152
143
|
padding: 0;
|
|
@@ -154,12 +145,13 @@ body {
|
|
|
154
145
|
|
|
155
146
|
.FooterSectionContainer5 .CustomContentSectionWrapper div {
|
|
156
147
|
display: flex;
|
|
157
|
-
flex-direction:
|
|
148
|
+
flex-direction: left;
|
|
158
149
|
align-items: center;
|
|
150
|
+
padding-left: var(--emw--spacing-large, 20px);
|
|
159
151
|
}
|
|
160
152
|
|
|
161
153
|
.FooterSectionContainer5 .CustomContentSectionWrapper div p {
|
|
162
|
-
margin: 5px;
|
|
154
|
+
margin: var(--emw--spacing-2x-small, 5px);
|
|
163
155
|
text-align: center;
|
|
164
156
|
}
|
|
165
157
|
|
|
@@ -173,13 +165,11 @@ body {
|
|
|
173
165
|
|
|
174
166
|
.FooterSectionContainer6 .ImageListWrapper {
|
|
175
167
|
padding: 0;
|
|
176
|
-
/* padding-bottom: 22px; */
|
|
177
|
-
/* font-size: 14px; */
|
|
178
168
|
}
|
|
179
169
|
|
|
180
170
|
.FooterSectionContainer7 .CustomContentSectionWrapper {
|
|
181
171
|
padding: 0;
|
|
182
|
-
padding-bottom: 22px;
|
|
183
|
-
font-size: 14px;
|
|
172
|
+
padding-bottom: var(--emw--spacing-large, 22px);
|
|
173
|
+
font-size: var(--emw--font-size-small, 14px);
|
|
184
174
|
}
|
|
185
175
|
}
|
|
@@ -105,10 +105,10 @@ export class GeneralFooterTemplate {
|
|
|
105
105
|
static get is() { return "general-footer-template"; }
|
|
106
106
|
static get encapsulation() { return "shadow"; }
|
|
107
107
|
static get originalStyleUrls() { return {
|
|
108
|
-
"$": ["./pariuri_plus_variant.css", "./variant_style_1.css", "general-footer-template.scss"]
|
|
108
|
+
"$": ["./demo-footer.scss", "./pariuri_plus_variant.css", "./variant_style_1.css", "general-footer-template.scss"]
|
|
109
109
|
}; }
|
|
110
110
|
static get styleUrls() { return {
|
|
111
|
-
"$": ["pariuri_plus_variant.css", "variant_style_1.css", "general-footer-template.css"]
|
|
111
|
+
"$": ["demo-footer.css", "pariuri_plus_variant.css", "variant_style_1.css", "general-footer-template.css"]
|
|
112
112
|
}; }
|
|
113
113
|
static get properties() { return {
|
|
114
114
|
"language": {
|
|
@@ -14,29 +14,30 @@
|
|
|
14
14
|
flex-direction: column;
|
|
15
15
|
max-width: 90%;
|
|
16
16
|
margin: auto;
|
|
17
|
-
padding: 20px 0;
|
|
18
|
-
justify-content: center;
|
|
19
|
-
align-items: center;
|
|
17
|
+
padding: var(--emw--spacing-large, 20px) 0;
|
|
20
18
|
}
|
|
21
19
|
.ImageListSectionTitle {
|
|
22
20
|
width: 100%;
|
|
23
21
|
display: flex;
|
|
24
|
-
justify-content:
|
|
22
|
+
justify-content: left;
|
|
25
23
|
align-content: center;
|
|
26
|
-
padding
|
|
27
|
-
color: #fff;
|
|
24
|
+
padding: var(--emw--spacing-large, 20px) var(--emw--spacing-medium, 14px) var(--emw--spacing-x-large, 30px);
|
|
25
|
+
color: var(--emw--footer-typography, var(--emw-color-thpography, #fff));
|
|
26
|
+
text-transform: uppercase;
|
|
27
|
+
font-size: 24px;
|
|
28
|
+
font-weight: 100;
|
|
28
29
|
}
|
|
29
30
|
.ImageListLineup {
|
|
30
31
|
box-sizing: border-box;
|
|
31
|
-
height: 100%;
|
|
32
32
|
display: flex;
|
|
33
33
|
flex-wrap: wrap;
|
|
34
|
-
gap: 30px;
|
|
35
|
-
justify-content:
|
|
36
|
-
align-items:
|
|
34
|
+
gap: var(--emw--spacing-x-large, 30px);
|
|
35
|
+
justify-content: left;
|
|
36
|
+
align-items: flex-start;
|
|
37
|
+
padding-left: var(--emw--spacing-large, 20px);
|
|
37
38
|
}
|
|
38
39
|
.ImageListIcon img {
|
|
39
|
-
max-height:
|
|
40
|
+
max-height: var(--emw--size-medium-2x-minus, 40px);
|
|
40
41
|
}
|
|
41
42
|
|
|
42
43
|
a {
|
|
@@ -49,6 +50,20 @@ a {
|
|
|
49
50
|
|
|
50
51
|
a p {
|
|
51
52
|
text-decoration: none;
|
|
52
|
-
color: #666;
|
|
53
|
+
color: var(--emw--color-gray-100, #666);
|
|
53
54
|
margin: 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@container (max-width: 750px) {
|
|
58
|
+
.ImageListSectionTitle.sc-image-list {
|
|
59
|
+
justify-content: center;
|
|
60
|
+
font-size: var(--emw--font-size-medium, 16px);
|
|
61
|
+
color: var(--emw--footer-typography, var(--emw-color-thpography, #fff));
|
|
62
|
+
padding: var(--emw--spacing-large, 20px) 0 var(--emw--spacing-x-large, 30px);
|
|
63
|
+
justify-content: center;
|
|
64
|
+
}
|
|
65
|
+
.ImageListLineup.sc-image-list {
|
|
66
|
+
justify-content: center;
|
|
67
|
+
padding: 0;
|
|
68
|
+
}
|
|
54
69
|
}
|
|
@@ -10,30 +10,59 @@
|
|
|
10
10
|
}
|
|
11
11
|
.LinkSectionListWrapper {
|
|
12
12
|
box-sizing: border-box;
|
|
13
|
-
display:
|
|
14
|
-
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
15
|
grid-template-columns: 1fr;
|
|
16
16
|
}
|
|
17
17
|
.LinkSectionListTitle {
|
|
18
|
-
font-weight:
|
|
18
|
+
font-weight: var(--emw--font-weight-semibold, 500);
|
|
19
|
+
text-transform: uppercase;
|
|
19
20
|
}
|
|
20
21
|
.LinkSectionListLink {
|
|
21
|
-
font-weight: 300;
|
|
22
|
-
text-decoration: underline;
|
|
23
|
-
text-underline-offset: 0.2rem;
|
|
22
|
+
font-weight: var(--emw--font-weight-light, 300);
|
|
24
23
|
}
|
|
25
24
|
|
|
26
25
|
ul {
|
|
27
26
|
width: fit-content;
|
|
28
|
-
padding: 0;
|
|
29
27
|
margin: 0;
|
|
30
28
|
display: flex;
|
|
31
29
|
flex-direction: column;
|
|
32
|
-
gap: 16px;
|
|
30
|
+
gap: var(--emw--spacing-medium, 16px);
|
|
31
|
+
padding-left: var(--emw--spacing-small-minus, 10px);
|
|
32
|
+
font-size: var(--emw--font-size-small, 16px);
|
|
33
|
+
text-transform: uppercase;
|
|
33
34
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
ul li {
|
|
36
|
+
list-style: disc;
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
padding-left: 25px;
|
|
40
|
+
position: relative;
|
|
41
|
+
}
|
|
42
|
+
ul li::before {
|
|
43
|
+
content: "";
|
|
44
|
+
position: absolute;
|
|
45
|
+
left: 0;
|
|
46
|
+
top: 50%;
|
|
47
|
+
transform: translateY(-50%);
|
|
48
|
+
width: 8px;
|
|
49
|
+
height: 8px;
|
|
50
|
+
background-color: var(--emw--footer-color-primary, var(--emw--color-primary, #22B04E));
|
|
51
|
+
border-radius: 50%;
|
|
52
|
+
}
|
|
53
|
+
ul li .LinkSectionListLinkText {
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-direction: row;
|
|
56
|
+
align-items: center;
|
|
57
|
+
}
|
|
58
|
+
ul li .LinkSectionListLinkText span {
|
|
59
|
+
text-align: center;
|
|
60
|
+
cursor: pointer;
|
|
61
|
+
}
|
|
62
|
+
ul li .LinkSectionListLinkText img.LinkSectionIcon {
|
|
63
|
+
position: relative;
|
|
64
|
+
height: 25px;
|
|
65
|
+
padding: 0 5px;
|
|
37
66
|
}
|
|
38
67
|
|
|
39
68
|
a {
|
|
@@ -17,13 +17,15 @@ export class LinkSectionList {
|
|
|
17
17
|
var _a, _b;
|
|
18
18
|
const linkSections = (_b = (_a = this.repeaterContent) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.reduce((obj, elem) => {
|
|
19
19
|
const currentCategory = elem.linkCategory;
|
|
20
|
+
const iconUrl = elem.image;
|
|
20
21
|
const foundCategory = obj.find(el => el.categoryTitle === currentCategory);
|
|
21
22
|
if (foundCategory) {
|
|
22
23
|
foundCategory.links.push({
|
|
23
24
|
linkName: elem.title,
|
|
24
25
|
linkUrl: elem.url,
|
|
25
26
|
target: elem.target,
|
|
26
|
-
externalLink: elem.isExternalLink
|
|
27
|
+
externalLink: elem.isExternalLink,
|
|
28
|
+
icon: iconUrl
|
|
27
29
|
});
|
|
28
30
|
}
|
|
29
31
|
else {
|
|
@@ -33,16 +35,35 @@ export class LinkSectionList {
|
|
|
33
35
|
linkName: elem.title,
|
|
34
36
|
linkUrl: elem.url,
|
|
35
37
|
target: elem.target,
|
|
36
|
-
externalLink: elem.isExternalLink
|
|
38
|
+
externalLink: elem.isExternalLink,
|
|
39
|
+
icon: iconUrl
|
|
37
40
|
}]
|
|
38
41
|
});
|
|
39
42
|
}
|
|
40
43
|
return obj;
|
|
41
44
|
}, []);
|
|
42
45
|
return h("div", { class: "LinkSectionListContainer" },
|
|
43
|
-
h("div", { class: "LinkSectionListWrapper" },
|
|
44
|
-
h("
|
|
45
|
-
category.links.map(link => h("li", { class: "LinkSectionListLink", key: link.linkName }, this.navigateViaEvent === true ? (h("span",
|
|
46
|
+
h("div", { class: "LinkSectionListWrapper" },
|
|
47
|
+
h("h2", { class: "LinkSectionListTitle" }, linkSections.categoryTitle),
|
|
48
|
+
linkSections.map(category => h("ul", null, category.links.map(link => h("li", { class: "LinkSectionListLink", key: link.linkName }, this.navigateViaEvent === true ? (h("span", null, link.linkName && link.icon ? (h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) },
|
|
49
|
+
h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }),
|
|
50
|
+
h("span", null,
|
|
51
|
+
link.linkName,
|
|
52
|
+
" "))) :
|
|
53
|
+
link.linkName ?
|
|
54
|
+
h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) },
|
|
55
|
+
h("span", null,
|
|
56
|
+
link.linkName,
|
|
57
|
+
" "))
|
|
58
|
+
:
|
|
59
|
+
h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) },
|
|
60
|
+
h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))) : (h("a", { class: "LinkSectionListLink", href: link.externalLink ? link.linkUrl : `${this.baseUrl}/${this.language}${link.linkUrl}`, target: link.target || '_blank' }, link.linkName && link.icon ? (h("span", { class: "LinkSectionListLinkText" },
|
|
61
|
+
h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }),
|
|
62
|
+
h("span", null, link.linkName))) :
|
|
63
|
+
link.linkName ? (h("span", { class: "LinkSectionListLinkText" },
|
|
64
|
+
h("span", null, link.linkName))) :
|
|
65
|
+
h("span", { class: "LinkSectionListLinkText" },
|
|
66
|
+
h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }))))))))));
|
|
46
67
|
}
|
|
47
68
|
static get is() { return "link-section-list"; }
|
|
48
69
|
static get originalStyleUrls() { return {
|
|
@@ -9522,7 +9522,7 @@ sanitizeHtml.simpleTransform = function(newTagName, newAttribs, merge) {
|
|
|
9522
9522
|
};
|
|
9523
9523
|
};
|
|
9524
9524
|
|
|
9525
|
-
const customContentSectionCss = ".sc-custom-content-section-h{display:block}*.sc-custom-content-section{margin:0}.CustomContentSectionWrapper.sc-custom-content-section{box-sizing:border-box;height:100%;
|
|
9525
|
+
const customContentSectionCss = ".sc-custom-content-section-h{display:block}*.sc-custom-content-section{margin:0}.CustomContentSectionWrapper.sc-custom-content-section{box-sizing:border-box;height:100%;align-items:center}";
|
|
9526
9526
|
|
|
9527
9527
|
const CustomContentSection$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
9528
9528
|
constructor() {
|
|
@@ -206,7 +206,7 @@ const normalizeRepeaterContent = (data) => {
|
|
|
206
206
|
return repeaterResponse;
|
|
207
207
|
};
|
|
208
208
|
|
|
209
|
-
const
|
|
209
|
+
const demoFooterCss = ":host {\n display: block;\n}\n\n/* $-background-primary: #14202d; */\n* {\n font-family: sans-serif;\n}\n\nhtml,\nbody {\n margin: 0;\n padding: 0;\n font-family: inherit;\n}\n\n.FooterSectionContainer {\n color: var(--emw--footer-typography, var(--emw-color-thpography, #fff));\n padding: 12px;\n}\n\n/* // FOOTER CONTAINER - only serves to be read as a container */\n.FooterContainer {\n container-type: inline-size;\n container-name: footerContainer;\n}\n\n.FooterGrid {\n background-color: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));\n display: grid;\n padding: 8px 24px 0 24px;\n grid-template-rows: repeat(9, auto);\n grid-template-areas: \"one\" \"two\" \"three\" \"four\" \"five\" \"six\" \"seven\";\n}\n\n.FooterSectionContainer1 {\n position: relative;\n grid-area: one;\n}\n\n.FooterSectionContainer2 {\n position: relative;\n grid-area: two;\n}\n\n.FooterSectionContainer3 {\n position: relative;\n grid-area: three;\n}\n\n.FooterSectionContainer4 {\n position: relative;\n grid-area: four;\n}\n\n.FooterSectionContainer5 {\n grid-area: five;\n}\n\n.FooterSectionContainer6 {\n padding-top: 22px;\n grid-area: six;\n}\n\n.FooterSectionContainer7 {\n grid-area: seven;\n}\n\n/* // remove paddings */\n.FooterSectionContainer7 div {\n padding: 0;\n}\n\n@container (max-width: 750px) {\n .FooterSectionContainer3:after,\n.FooterSectionContainer2:after {\n position: absolute;\n content: \"\";\n height: 1px;\n width: 90%;\n background-color: var(--emw--color-gray-100, #444);\n }\n\n .FooterSectionContainer5 {\n grid-area: five;\n background-color: var(--emw--color-background-secondary, #060706);\n padding: 30px 0;\n font-size: var(--emw--font-size-medium, 16px);\n min-height: var(--emw--size-medium-plus, 100px);\n justify-self: center;\n }\n}\n/* // STYLES FOR TABLET / DESKTOP */\n@container (min-width: 750px) {\n .FooterGrid {\n background: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));\n display: grid;\n border-top: 5px solid var(--emw--footer-color-primary, var(--emw--color-primary, #22B04E));\n grid-template-rows: repeat(5, auto);\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-template-areas: \"one two three four\" \"five five five five\" \"six six six six\" \"seven seven seven seven\";\n }\n\n .FooterSectionContainer1 {\n padding: 30px 40px;\n grid-area: one;\n background: var(--emw--color-background, #000000);\n }\n\n .FooterSectionContainer2 {\n grid-area: two;\n min-height: var(--emw--size-4x-medium, 500px);\n }\n\n .FooterSectionContainer3 {\n grid-area: three;\n }\n\n .FooterSectionContainer4 {\n grid-area: four;\n }\n\n .FooterSectionContainer5 {\n grid-area: five;\n background-color: var(--emw--color-background-secondary, #091217);\n padding: var(--emw--spacing-x-large, 30px) 0;\n font-size: var(--emw--font-size-medium, 16px);\n min-height: var(--emw--size-medium-plus, 100px);\n }\n\n .FooterSectionContainer6 {\n grid-area: six;\n padding: 0;\n }\n\n .FooterSectionContainer7 {\n grid-area: seven;\n padding: 0;\n }\n\n /* // remove paddings */\n .FooterSectionContainer5 .CustomContentSectionWrapper {\n padding: 0;\n }\n\n .FooterSectionContainer5 .CustomContentSectionWrapper div {\n display: flex;\n flex-direction: left;\n align-items: center;\n padding-left: var(--emw--spacing-large, 20px);\n }\n\n .FooterSectionContainer5 .CustomContentSectionWrapper div p {\n margin: var(--emw--spacing-2x-small, 5px);\n text-align: center;\n }\n\n .FooterSectionContainer6 .CustomContentSectionWrapper div p {\n text-align: center;\n }\n\n .FooterSectionContainer6 .ImageListWrapper {\n padding: 0;\n }\n\n .FooterSectionContainer6 .ImageListWrapper {\n padding: 0;\n }\n\n .FooterSectionContainer7 .CustomContentSectionWrapper {\n padding: 0;\n padding-bottom: var(--emw--spacing-large, 22px);\n font-size: var(--emw--font-size-small, 14px);\n }\n}";
|
|
210
210
|
|
|
211
211
|
const GeneralFooterTemplate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
212
212
|
constructor() {
|
|
@@ -312,7 +312,7 @@ const GeneralFooterTemplate$1 = /*@__PURE__*/ proxyCustomElement(class extends H
|
|
|
312
312
|
return (h("footer", { class: "FooterContainer", ref: el => this.stylingContainer = el }, h("div", { class: "FooterGrid customStyle" }, footerSections)));
|
|
313
313
|
}
|
|
314
314
|
}
|
|
315
|
-
static get style() { return
|
|
315
|
+
static get style() { return demoFooterCss; }
|
|
316
316
|
}, [1, "general-footer-template", {
|
|
317
317
|
"language": [513],
|
|
318
318
|
"sections": [513],
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const imageListCss = ".sc-image-list-h{display:block
|
|
3
|
+
const imageListCss = ".sc-image-list-h {\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.ImageListContainer.sc-image-list {\n height: 100%;\n}\n.ImageListWrapper.sc-image-list {\n box-sizing: border-box;\n height: 100%;\n display: flex;\n flex-direction: column;\n max-width: 90%;\n margin: auto;\n padding: var(--emw--spacing-large, 20px) 0;\n}\n.ImageListSectionTitle.sc-image-list {\n width: 100%;\n display: flex;\n justify-content: left;\n align-content: center;\n padding: var(--emw--spacing-large, 20px) var(--emw--spacing-medium, 14px) var(--emw--spacing-x-large, 30px);\n color: var(--emw--footer-typography, var(--emw-color-thpography, #fff));\n text-transform: uppercase;\n font-size: 24px;\n font-weight: 100;\n}\n.ImageListLineup.sc-image-list {\n box-sizing: border-box;\n display: flex;\n flex-wrap: wrap;\n gap: var(--emw--spacing-x-large, 30px);\n justify-content: left;\n align-items: flex-start;\n padding-left: var(--emw--spacing-large, 20px);\n}\n.ImageListIcon.sc-image-list img.sc-image-list {\n max-height: var(--emw--size-medium-2x-minus, 40px);\n}\n\na.sc-image-list {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n text-decoration: none;\n}\n\na.sc-image-list p.sc-image-list {\n text-decoration: none;\n color: var(--emw--color-gray-100, #666);\n margin: 0;\n}\n\n@container (max-width: 750px) {\n .ImageListSectionTitle.sc-image-list {\n justify-content: center;\n font-size: var(--emw--font-size-medium, 16px);\n color: var(--emw--footer-typography, var(--emw-color-thpography, #fff));\n padding: var(--emw--spacing-large, 20px) 0 var(--emw--spacing-x-large, 30px);\n justify-content: center;\n }\n .ImageListLineup.sc-image-list {\n justify-content: center;\n padding: 0;\n }\n}";
|
|
4
4
|
|
|
5
5
|
const ImageList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
6
|
constructor() {
|