@everymatrix/general-footer-template 1.59.3 → 1.60.1
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-clock.cjs.entry.js +1 -1
- package/dist/cjs/custom-content-section.cjs.entry.js +1 -1
- package/dist/cjs/general-footer-template.cjs.entry.js +3 -3
- package/dist/cjs/general-footer-template.cjs.js +2 -2
- package/dist/cjs/image-list.cjs.entry.js +5 -5
- package/dist/cjs/{index-a589a1e7.js → index-4f1d0ebb.js} +1 -0
- package/dist/cjs/link-section-list.cjs.entry.js +5 -5
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/ui-skeleton.cjs.entry.js +107 -82
- package/dist/collection/components/general-footer-template/demo-footer.css +0 -31
- package/dist/collection/components/general-footer-template/general-footer-template.js +1 -1
- package/dist/collection/components/general-footer-template/general-footer-template.stories.js +1 -1
- package/dist/collection/components/image-list/image-list.css +2 -0
- package/dist/collection/components/image-list/image-list.js +3 -3
- package/dist/collection/components/link-section-list/link-section-list.css +6 -13
- package/dist/collection/components/link-section-list/link-section-list.js +3 -3
- package/dist/esm/custom-clock.entry.js +1 -1
- package/dist/esm/custom-content-section.entry.js +1 -1
- package/dist/esm/general-footer-template.entry.js +3 -3
- package/dist/esm/general-footer-template.js +3 -3
- package/dist/esm/image-list.entry.js +5 -5
- package/dist/esm/{index-0dd7df9f.js → index-83985f06.js} +1 -1
- package/dist/esm/link-section-list.entry.js +5 -5
- package/dist/esm/loader.js +3 -3
- package/dist/esm/ui-skeleton.entry.js +107 -82
- package/dist/general-footer-template/general-footer-template.esm.js +1 -1
- package/dist/general-footer-template/p-20c8b70b.entry.js +1 -0
- package/dist/general-footer-template/{p-2b4944f2.js → p-56890359.js} +2 -2
- package/dist/general-footer-template/p-5825a431.entry.js +1 -0
- package/dist/general-footer-template/p-b17aa165.entry.js +1 -0
- package/dist/general-footer-template/{p-a9ca9542.entry.js → p-bafd9490.entry.js} +1 -1
- package/dist/general-footer-template/p-d6f0d5e4.entry.js +1 -0
- package/dist/general-footer-template/{p-5816ee0c.entry.js → p-faf0bad1.entry.js} +1 -1
- package/dist/types/components/general-footer-template/general-footer-template.stories.d.ts +1 -1
- package/package.json +1 -1
- package/dist/general-footer-template/p-13856e75.entry.js +0 -1
- package/dist/general-footer-template/p-15f41686.entry.js +0 -1
- package/dist/general-footer-template/p-8665d213.entry.js +0 -1
- package/dist/general-footer-template/p-abe53f3b.entry.js +0 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-4f1d0ebb.js');
|
|
6
6
|
const _commonjsHelpers = require('./_commonjsHelpers-0a7b82d9.js');
|
|
7
7
|
|
|
8
8
|
const DEFAULT_LANGUAGE = 'en';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-4f1d0ebb.js');
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* custom rules for component types
|
|
@@ -270,7 +270,7 @@ function setStreamStyling(stylingContainer, domain, subscription) {
|
|
|
270
270
|
}
|
|
271
271
|
}
|
|
272
272
|
|
|
273
|
-
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.
|
|
273
|
+
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: 15px 20px 0;\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 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 .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 .FooterSectionContainer1 {\n padding: 30px 40px;\n grid-area: one;\n background: var(--emw--color-background, #000000);\n }\n .FooterSectionContainer2 {\n grid-area: two;\n min-height: var(--emw--size-4x-medium, 500px);\n }\n .FooterSectionContainer3 {\n grid-area: three;\n }\n .FooterSectionContainer4 {\n grid-area: four;\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 .FooterSectionContainer6 {\n grid-area: six;\n padding: 0;\n }\n .FooterSectionContainer7 {\n grid-area: seven;\n padding: 0;\n }\n /* // remove paddings */\n .FooterSectionContainer5 .CustomContentSectionWrapper {\n padding: 0;\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 .FooterSectionContainer5 .CustomContentSectionWrapper div p {\n margin: var(--emw--spacing-2x-small, 5px);\n text-align: center;\n }\n .FooterSectionContainer6 .CustomContentSectionWrapper div p {\n text-align: center;\n }\n .FooterSectionContainer6 .ImageListWrapper {\n padding: 0;\n }\n .FooterSectionContainer6 .ImageListWrapper {\n padding: 0;\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}";
|
|
274
274
|
const GeneralFooterTemplateStyle0 = demoFooterCss;
|
|
275
275
|
|
|
276
276
|
const GeneralFooterTemplate = class {
|
|
@@ -312,7 +312,7 @@ const GeneralFooterTemplate = class {
|
|
|
312
312
|
const url = new URL(`${this.endpoint}/${this.language}/footer-raw-data`);
|
|
313
313
|
url.searchParams.append('env', this.env);
|
|
314
314
|
url.searchParams.append('device', this.platform);
|
|
315
|
-
url.searchParams.append('
|
|
315
|
+
url.searchParams.append('userRoles', this.userRoles);
|
|
316
316
|
this.validateMandatoryFields();
|
|
317
317
|
return fetch(url.href)
|
|
318
318
|
.then((res) => res.json())
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-4f1d0ebb.js');
|
|
6
6
|
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
7
7
|
|
|
8
8
|
/*
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["custom-content-section.cjs",[[2,"custom-content-section",{"customContent":[1,"custom-content"],"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[516,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]],["link-section-list.cjs",[[0,"link-section-list",{"repeaterContent":[8,"repeater-content"],"baseUrl":[513,"base-url"],"language":[513],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"skeletonLoading":[32]}]]],["custom-clock.cjs",[[2,"custom-clock",{"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"translationUrl":[513,"translation-url"],"language":[513],"timeString":[32]},null,{"translationUrl":["handleNewTranslations"]}]]],["general-footer-template.cjs",[[1,"general-footer-template",{"language":[513],"sections":[513],"endpoint":[513],"env":[513],"userRoles":[513,"user-roles"],"userid":[513],"session":[513],"baseUrl":[513,"base-url"],"navigateViaEvent":[513,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"mbSource":[513,"mb-source"],"hasErrors":[32]}]]],["ui-skeleton.cjs",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]
|
|
22
|
+
return index.bootstrapLazy([["custom-content-section.cjs",[[2,"custom-content-section",{"customContent":[1,"custom-content"],"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[516,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]],["link-section-list.cjs",[[0,"link-section-list",{"repeaterContent":[8,"repeater-content"],"baseUrl":[513,"base-url"],"language":[513],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"skeletonLoading":[32]}]]],["custom-clock.cjs",[[2,"custom-clock",{"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"translationUrl":[513,"translation-url"],"language":[513],"timeString":[32]},null,{"translationUrl":["handleNewTranslations"]}]]],["general-footer-template.cjs",[[1,"general-footer-template",{"language":[513],"sections":[513],"endpoint":[513],"env":[513],"userRoles":[513,"user-roles"],"userid":[513],"session":[513],"baseUrl":[513,"base-url"],"navigateViaEvent":[513,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"mbSource":[513,"mb-source"],"hasErrors":[32]}]]],["ui-skeleton.cjs",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]],["image-list.cjs",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"skeletonLoading":[32]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-4f1d0ebb.js');
|
|
6
6
|
|
|
7
|
-
const imageListCss = ".sc-image-list-h {\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.ContainerImage.sc-image-list {\n position: relative;\n display: inline-block;\n width: 100%;\n}\n\n.SkeletonWrapper.sc-image-list {\n background-color: #f0f0f0;\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}";
|
|
7
|
+
const imageListCss = ".sc-image-list-h {\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.ContainerImage.sc-image-list {\n position: relative;\n display: inline-block;\n width: 100%;\n}\n\n.SkeletonWrapper.sc-image-list {\n background-color: #f0f0f0;\n width: 50px;\n height: 40px;\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
|
const ImageListStyle0 = imageListCss;
|
|
9
9
|
|
|
10
10
|
const ImageList = class {
|
|
@@ -42,9 +42,9 @@ const ImageList = class {
|
|
|
42
42
|
(_a = this.imgRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('load', this.onImageLoad);
|
|
43
43
|
}
|
|
44
44
|
render() {
|
|
45
|
-
var _a, _b, _c;
|
|
46
|
-
return index.h("div", { key: '
|
|
47
|
-
return (index.h("div", { class: 'ImageListIcon' }, this.navigateViaEvent === true ? (index.h("div", { class: 'ImageListIcon', style: { cursor: 'pointer' }, onClick: () => this.navigateLink(repeater === null || repeater === void 0 ? void 0 : repeater.url, repeater === null || repeater === void 0 ? void 0 : repeater.target, repeater === null || repeater === void 0 ? void 0 : repeater.isExternalLink) }, index.h("div", { class: "ContainerImage" }, this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "
|
|
45
|
+
var _a, _b, _c, _d;
|
|
46
|
+
return ((_a = this.repeaterContent) === null || _a === void 0 ? void 0 : _a.content.length) > 0 && index.h("div", { key: '78285fbc71824ba67190d8a7370631c3ab5f80ad', class: "ImageListContainer" }, index.h("div", { key: 'bb68dacdca57a394485a8e3818e1c09187977e80', class: "ImageListWrapper" }, index.h("div", { key: '099aeba506825296ae6721679983b5c6e3a38b7f', class: "ImageListSectionTitle" }, (_b = this.repeaterContent) === null || _b === void 0 ? void 0 : _b.categoryTitle), index.h("div", { key: '0f3d5597a317036526961b6bc6697cce474b6400', class: "ImageListLineup" }, (_d = (_c = this.repeaterContent) === null || _c === void 0 ? void 0 : _c.content) === null || _d === void 0 ? void 0 : _d.map(repeater => {
|
|
47
|
+
return (index.h("div", { class: 'ImageListIcon' }, this.navigateViaEvent === true ? (index.h("div", { class: 'ImageListIcon', style: { cursor: 'pointer' }, onClick: () => this.navigateLink(repeater === null || repeater === void 0 ? void 0 : repeater.url, repeater === null || repeater === void 0 ? void 0 : repeater.target, repeater === null || repeater === void 0 ? void 0 : repeater.isExternalLink) }, index.h("div", { class: "ContainerImage" }, index.h("img", { src: repeater === null || repeater === void 0 ? void 0 : repeater.image, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "rectangle", rows: "1", width: "100%", height: "100%" })))), index.h("p", null, repeater === null || repeater === void 0 ? void 0 : repeater.title))) : (index.h("a", { href: (repeater === null || repeater === void 0 ? void 0 : repeater.url) || 'javascript:void(0)', target: (repeater === null || repeater === void 0 ? void 0 : repeater.target) || '_parent' }, index.h("div", { class: "ContainerImage" }, this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "rectangle", rows: "1", width: "100%", height: "100%" }))), index.h("div", { class: "ImageListPositioner" }, index.h("img", { src: repeater === null || repeater === void 0 ? void 0 : repeater.image, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }))), index.h("p", null, repeater === null || repeater === void 0 ? void 0 : repeater.title)))));
|
|
48
48
|
}))));
|
|
49
49
|
}
|
|
50
50
|
get el() { return index.getElement(this); }
|
|
@@ -1310,6 +1310,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
1310
1310
|
// src/runtime/nonce.ts
|
|
1311
1311
|
var setNonce = (nonce) => plt.$nonce$ = nonce;
|
|
1312
1312
|
|
|
1313
|
+
exports.Host = Host;
|
|
1313
1314
|
exports.bootstrapLazy = bootstrapLazy;
|
|
1314
1315
|
exports.getElement = getElement;
|
|
1315
1316
|
exports.h = h;
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-4f1d0ebb.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: 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
|
|
7
|
+
const linkSectionListCss = ":host {\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.SkeletonWrapper {\n width: 25px;\n height: 25px;\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 position: relative;\n}\nul li .LinkSectionListLinkText {\n display: flex;\n gap: 5px;\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}\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
|
const LinkSectionListStyle0 = linkSectionListCss;
|
|
9
9
|
|
|
10
10
|
const LinkSectionList = class {
|
|
@@ -72,13 +72,13 @@ const LinkSectionList = class {
|
|
|
72
72
|
}
|
|
73
73
|
return obj;
|
|
74
74
|
}, []);
|
|
75
|
-
return index.h("div", { class: "LinkSectionListContainer" }, index.h("div", { class: "LinkSectionListWrapper" }, this.repeaterContent.categoryTitle && index.h("h2", { class: "LinkSectionListTitle" }, this.repeaterContent.categoryTitle), linkSections.map(category => index.h("ul", null, category.categoryTitle && index.h("p", null, category.categoryTitle), 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("div", { class: "ContainerImage" }, this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "
|
|
75
|
+
return index.h("div", { class: "LinkSectionListContainer" }, index.h("div", { class: "LinkSectionListWrapper" }, this.repeaterContent.categoryTitle && index.h("h2", { class: "LinkSectionListTitle" }, this.repeaterContent.categoryTitle), linkSections.map(category => index.h("ul", null, category.categoryTitle && index.h("p", null, category.categoryTitle), 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("div", { class: "ContainerImage" }, index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" })))), index.h("span", { class: '' }, link.linkName, " "))) :
|
|
76
76
|
link.linkName ?
|
|
77
77
|
index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("span", null, link.linkName, " "))
|
|
78
78
|
:
|
|
79
|
-
index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("div", { class: "ContainerImage" }, this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "
|
|
79
|
+
index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("div", { class: "ContainerImage" }, index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" }))))))) : (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("div", { class: "ContainerImage" }, index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" })))), index.h("span", null, link.linkName))) :
|
|
80
80
|
link.linkName ? (index.h("span", { class: "LinkSectionListLinkText" }, index.h("span", null, link.linkName))) :
|
|
81
|
-
index.h("span", { class: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "
|
|
81
|
+
index.h("span", { class: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" })))))))))))));
|
|
82
82
|
}
|
|
83
83
|
get el() { return index.getElement(this); }
|
|
84
84
|
};
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-4f1d0ebb.js');
|
|
6
6
|
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
7
7
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["custom-content-section.cjs",[[2,"custom-content-section",{"customContent":[1,"custom-content"],"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[516,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]],["link-section-list.cjs",[[0,"link-section-list",{"repeaterContent":[8,"repeater-content"],"baseUrl":[513,"base-url"],"language":[513],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"skeletonLoading":[32]}]]],["custom-clock.cjs",[[2,"custom-clock",{"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"translationUrl":[513,"translation-url"],"language":[513],"timeString":[32]},null,{"translationUrl":["handleNewTranslations"]}]]],["general-footer-template.cjs",[[1,"general-footer-template",{"language":[513],"sections":[513],"endpoint":[513],"env":[513],"userRoles":[513,"user-roles"],"userid":[513],"session":[513],"baseUrl":[513,"base-url"],"navigateViaEvent":[513,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"mbSource":[513,"mb-source"],"hasErrors":[32]}]]],["ui-skeleton.cjs",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]
|
|
11
|
+
return index.bootstrapLazy([["custom-content-section.cjs",[[2,"custom-content-section",{"customContent":[1,"custom-content"],"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[516,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]],["link-section-list.cjs",[[0,"link-section-list",{"repeaterContent":[8,"repeater-content"],"baseUrl":[513,"base-url"],"language":[513],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"skeletonLoading":[32]}]]],["custom-clock.cjs",[[2,"custom-clock",{"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"translationUrl":[513,"translation-url"],"language":[513],"timeString":[32]},null,{"translationUrl":["handleNewTranslations"]}]]],["general-footer-template.cjs",[[1,"general-footer-template",{"language":[513],"sections":[513],"endpoint":[513],"env":[513],"userRoles":[513,"user-roles"],"userid":[513],"session":[513],"baseUrl":[513,"base-url"],"navigateViaEvent":[513,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"mbSource":[513,"mb-source"],"hasErrors":[32]}]]],["ui-skeleton.cjs",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]],["image-list.cjs",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"skeletonLoading":[32]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-4f1d0ebb.js');
|
|
6
6
|
|
|
7
|
-
const uiSkeletonCss = ".Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 2px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 5px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:var(--emw-skeleton-text-width-100, 300px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 5px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 250px);height:var(--emw-skeleton-image-height, 200px);border-radius:var(--emw-skeleton-image-border-radius, 10px)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 5px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2))}100%{background-color:var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0))}}";
|
|
7
|
+
const uiSkeletonCss = ":host{display:block;--emw-skeleton-rectangle-background:#c2c2c2;--emw-skeleton-circle-background:#c2c2c2;--emw-skeleton-text-background:#c2c2c2;--emw-skeleton-title-background:#c2c2c2;--emw-skeleton-image-background:#c2c2c2;--emw-skeleton-logo-background:#c2c2c2;--emw-skeleton-primary-color:#e0e0e0;--emw-skeleton-secondary-color:#f0f0f0}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 2px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 5px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:var(--emw-skeleton-text-width-100, 300px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 5px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 250px);height:var(--emw-skeleton-image-height, 200px);border-radius:var(--emw-skeleton-image-border-radius, 10px)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 5px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2))}100%{background-color:var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0))}}";
|
|
8
8
|
const UiSkeletonStyle0 = uiSkeletonCss;
|
|
9
9
|
|
|
10
10
|
const UiSkeleton = class {
|
|
@@ -30,14 +30,6 @@ const UiSkeleton = class {
|
|
|
30
30
|
this.handleStructure(newValue);
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
-
updateStyles() {
|
|
34
|
-
if (this.primaryColor) {
|
|
35
|
-
this.skeletonContainer.style.setProperty('--emw-skeleton-primary-color', this.primaryColor);
|
|
36
|
-
}
|
|
37
|
-
if (this.secondaryColor) {
|
|
38
|
-
this.skeletonContainer.style.setProperty('--emw-skeleton-secondary-color', this.secondaryColor);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
33
|
handleStructure(structure) {
|
|
42
34
|
switch (structure) {
|
|
43
35
|
case 'logo':
|
|
@@ -52,95 +44,128 @@ const UiSkeleton = class {
|
|
|
52
44
|
return this.renderRectangle();
|
|
53
45
|
case 'circle':
|
|
54
46
|
return this.renderCircle();
|
|
47
|
+
default:
|
|
48
|
+
return null;
|
|
55
49
|
}
|
|
56
50
|
}
|
|
57
51
|
renderLogo() {
|
|
58
|
-
|
|
59
|
-
width: `${this.width}`,
|
|
60
|
-
height: `${this.height}`,
|
|
61
|
-
'background-color': `${this.color}`,
|
|
62
|
-
'border-radius': `${this.borderRadius}px`,
|
|
63
|
-
'margin-bottom': `${this.marginBottom}px`,
|
|
64
|
-
'margin-top': `${this.marginTop}px`,
|
|
65
|
-
'margin-left': `${this.marginLeft}px`,
|
|
66
|
-
'margin-right': `${this.marginRight}px`
|
|
67
|
-
};
|
|
68
|
-
return (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, class: "Logo " + (this.animation ? 'Skeleton' : '') })));
|
|
52
|
+
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Logo " + (this.animation ? 'Skeleton' : '') })));
|
|
69
53
|
}
|
|
70
54
|
renderImage() {
|
|
71
|
-
|
|
72
|
-
width: `${this.width}`,
|
|
73
|
-
height: `${this.height}`,
|
|
74
|
-
'background-color': `${this.color}`,
|
|
75
|
-
'border-radius': `${this.borderRadius}px`,
|
|
76
|
-
'margin-bottom': `${this.marginBottom}px`,
|
|
77
|
-
'margin-top': `${this.marginTop}px`,
|
|
78
|
-
'margin-left': `${this.marginLeft}px`,
|
|
79
|
-
'margin-right': `${this.marginRight}px`
|
|
80
|
-
};
|
|
81
|
-
return (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, class: "Image " + (this.animation ? 'Skeleton' : '') })));
|
|
55
|
+
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') })));
|
|
82
56
|
}
|
|
83
57
|
renderTitle() {
|
|
84
|
-
|
|
85
|
-
width: `${this.width}`,
|
|
86
|
-
height: `${this.height}`,
|
|
87
|
-
'background-color': `${this.color}`,
|
|
88
|
-
'border-radius': `${this.borderRadius}px`,
|
|
89
|
-
'margin-bottom': `${this.marginBottom}px`,
|
|
90
|
-
'margin-top': `${this.marginTop}px`,
|
|
91
|
-
'margin-left': `${this.marginLeft}px`,
|
|
92
|
-
'margin-right': `${this.marginRight}px`
|
|
93
|
-
};
|
|
94
|
-
return (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, class: "Title " + (this.animation ? 'Skeleton' : '') })));
|
|
58
|
+
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Title " + (this.animation ? 'Skeleton' : '') })));
|
|
95
59
|
}
|
|
96
60
|
renderText() {
|
|
97
|
-
|
|
98
|
-
width: `${this.width}`,
|
|
99
|
-
height: `${this.height}`,
|
|
100
|
-
'background-color': `${this.color}`,
|
|
101
|
-
'border-radius': `${this.borderRadius}px`,
|
|
102
|
-
'margin-bottom': `${this.marginBottom}px`,
|
|
103
|
-
'margin-top': `${this.marginTop}px`,
|
|
104
|
-
'margin-left': `${this.marginLeft}px`,
|
|
105
|
-
'margin-right': `${this.marginRight}px`
|
|
106
|
-
};
|
|
107
|
-
return (Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { style: styles, key: index$1, class: "Text " + (this.animation ? 'Skeleton' : '') }))));
|
|
61
|
+
return (index.h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { key: index$1, class: "Text " + (this.animation ? 'Skeleton' : '') })))));
|
|
108
62
|
}
|
|
109
63
|
renderRectangle() {
|
|
110
|
-
|
|
111
|
-
width: `${this.width}`,
|
|
112
|
-
height: `${this.height}`,
|
|
113
|
-
'background-color': `${this.color}`,
|
|
114
|
-
'border-radius': `${this.borderRadius}px`,
|
|
115
|
-
'margin-bottom': `${this.marginBottom}px`,
|
|
116
|
-
'margin-top': `${this.marginTop}px`,
|
|
117
|
-
'margin-left': `${this.marginLeft}px`,
|
|
118
|
-
'margin-right': `${this.marginRight}px`
|
|
119
|
-
};
|
|
120
|
-
return (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
|
|
64
|
+
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
|
|
121
65
|
}
|
|
122
66
|
renderCircle() {
|
|
123
|
-
|
|
124
|
-
width: `${this.size}`,
|
|
125
|
-
height: `${this.size}`,
|
|
126
|
-
'background-color': `${this.color}`,
|
|
127
|
-
'margin-bottom': `${this.marginBottom}px`,
|
|
128
|
-
'margin-top': `${this.marginTop}px`,
|
|
129
|
-
'margin-left': `${this.marginLeft}px`,
|
|
130
|
-
'margin-right': `${this.marginRight}px`
|
|
131
|
-
};
|
|
132
|
-
return (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, class: "Circle " + (this.animation ? 'Skeleton' : '') })));
|
|
133
|
-
}
|
|
134
|
-
componentDidLoad() {
|
|
135
|
-
this.updateStyles();
|
|
67
|
+
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Circle " + (this.animation ? 'Skeleton' : '') })));
|
|
136
68
|
}
|
|
137
69
|
render() {
|
|
138
|
-
|
|
70
|
+
let styleBlock = '';
|
|
71
|
+
switch (this.structure) {
|
|
72
|
+
case 'logo':
|
|
73
|
+
styleBlock = `
|
|
74
|
+
:host {
|
|
75
|
+
--emw-skeleton-logo-width: ${this.width};
|
|
76
|
+
--emw-skeleton-logo-height: ${this.height};
|
|
77
|
+
--emw-skeleton-logo-border-radius: ${this.borderRadius}px;
|
|
78
|
+
--emw-skeleton-logo-margin-bottom: ${this.marginBottom}px;
|
|
79
|
+
--emw-skeleton-logo-margin-top: ${this.marginTop}px;
|
|
80
|
+
--emw-skeleton-logo-margin-left: ${this.marginLeft}px;
|
|
81
|
+
--emw-skeleton-logo-margin-right: ${this.marginRight}px;
|
|
82
|
+
--emw-skeleton-logo-background: ${this.color};
|
|
83
|
+
--emw-skeleton-primary-color: ${this.primaryColor};
|
|
84
|
+
--emw-skeleton-secondary-color: ${this.secondaryColor};
|
|
85
|
+
}
|
|
86
|
+
`;
|
|
87
|
+
break;
|
|
88
|
+
case 'image':
|
|
89
|
+
styleBlock = `
|
|
90
|
+
:host {
|
|
91
|
+
--emw-skeleton-image-width: ${this.width};
|
|
92
|
+
--emw-skeleton-image-height: ${this.height};
|
|
93
|
+
--emw-skeleton-image-border-radius: ${this.borderRadius}px;
|
|
94
|
+
--emw-skeleton-image-margin-bottom: ${this.marginBottom}px;
|
|
95
|
+
--emw-skeleton-image-margin-top: ${this.marginTop}px;
|
|
96
|
+
--emw-skeleton-image-margin-left: ${this.marginLeft}px;
|
|
97
|
+
--emw-skeleton-image-margin-right: ${this.marginRight}px;
|
|
98
|
+
--emw-skeleton-image-background: ${this.color};
|
|
99
|
+
--emw-skeleton-primary-color: ${this.primaryColor};
|
|
100
|
+
--emw-skeleton-secondary-color: ${this.secondaryColor};
|
|
101
|
+
}
|
|
102
|
+
`;
|
|
103
|
+
break;
|
|
104
|
+
case 'title':
|
|
105
|
+
styleBlock = `
|
|
106
|
+
:host {
|
|
107
|
+
--emw-skeleton-title-width: ${this.width};
|
|
108
|
+
--emw-skeleton-title-height: ${this.height};
|
|
109
|
+
--emw-skeleton-title-border-radius: ${this.borderRadius}px;
|
|
110
|
+
--emw-skeleton-title-margin-bottom: ${this.marginBottom}px;
|
|
111
|
+
--emw-skeleton-title-margin-top: ${this.marginTop}px;
|
|
112
|
+
--emw-skeleton-title-margin-left: ${this.marginLeft}px;
|
|
113
|
+
--emw-skeleton-title-margin-right: ${this.marginRight}px;
|
|
114
|
+
--emw-skeleton-title-background: ${this.color};
|
|
115
|
+
--emw-skeleton-primary-color: ${this.primaryColor};
|
|
116
|
+
--emw-skeleton-secondary-color: ${this.secondaryColor};
|
|
117
|
+
}
|
|
118
|
+
`;
|
|
119
|
+
break;
|
|
120
|
+
case 'text':
|
|
121
|
+
styleBlock = `
|
|
122
|
+
:host {
|
|
123
|
+
--emw-skeleton-text-width: ${this.width};
|
|
124
|
+
--emw-skeleton-text-height: ${this.height};
|
|
125
|
+
--emw-skeleton-text-border-radius: ${this.borderRadius}px;
|
|
126
|
+
--emw-skeleton-text-margin-bottom: ${this.marginBottom}px;
|
|
127
|
+
--emw-skeleton-text-margin-top: ${this.marginTop}px;
|
|
128
|
+
--emw-skeleton-text-margin-left: ${this.marginLeft}px;
|
|
129
|
+
--emw-skeleton-text-margin-right: ${this.marginRight}px;
|
|
130
|
+
--emw-skeleton-text-background: ${this.color};
|
|
131
|
+
--emw-skeleton-primary-color: ${this.primaryColor};
|
|
132
|
+
--emw-skeleton-secondary-color: ${this.secondaryColor};
|
|
133
|
+
}
|
|
134
|
+
`;
|
|
135
|
+
break;
|
|
136
|
+
case 'rectangle':
|
|
137
|
+
styleBlock = `
|
|
138
|
+
:host {
|
|
139
|
+
--emw-skeleton-rectangle-width: ${this.width};
|
|
140
|
+
--emw-skeleton-rectangle-height: ${this.height};
|
|
141
|
+
--emw-skeleton-rectangle-border-radius: ${this.borderRadius}px;
|
|
142
|
+
--emw-skeleton-rectangle-margin-bottom: ${this.marginBottom}px;
|
|
143
|
+
--emw-skeleton-rectangle-margin-top: ${this.marginTop}px;
|
|
144
|
+
--emw-skeleton-rectangle-margin-left: ${this.marginLeft}px;
|
|
145
|
+
--emw-skeleton-rectangle-margin-right: ${this.marginRight}px;
|
|
146
|
+
--emw-skeleton-rectangle-background: ${this.color};
|
|
147
|
+
--emw-skeleton-primary-color: ${this.primaryColor};
|
|
148
|
+
--emw-skeleton-secondary-color: ${this.secondaryColor};
|
|
149
|
+
}
|
|
150
|
+
`;
|
|
151
|
+
break;
|
|
152
|
+
case 'circle':
|
|
153
|
+
styleBlock = `
|
|
154
|
+
:host {
|
|
155
|
+
--emw-skeleton-circle-size: ${this.size};
|
|
156
|
+
--emw-skeleton-circle-background: ${this.color};
|
|
157
|
+
--emw-skeleton-primary-color: ${this.primaryColor};
|
|
158
|
+
--emw-skeleton-secondary-color: ${this.secondaryColor};
|
|
159
|
+
}
|
|
160
|
+
`;
|
|
161
|
+
break;
|
|
162
|
+
default:
|
|
163
|
+
styleBlock = '';
|
|
164
|
+
}
|
|
165
|
+
return (index.h(index.Host, { key: '58f7f9acd15f0f96b8b6f47f6bea81d49a3857c5' }, index.h("style", { key: 'c72ac31d1c55fd5d18ec334629db45977a0f6124' }, styleBlock), this.handleStructure(this.structure)));
|
|
139
166
|
}
|
|
140
167
|
static get watchers() { return {
|
|
141
|
-
"structure": ["handleStructureChange"]
|
|
142
|
-
"primaryColor": ["updateStyles"],
|
|
143
|
-
"secondaryColor": ["updateStyles"]
|
|
168
|
+
"structure": ["handleStructureChange"]
|
|
144
169
|
}; }
|
|
145
170
|
};
|
|
146
171
|
UiSkeleton.style = UiSkeletonStyle0;
|
|
@@ -14,37 +14,6 @@ body {
|
|
|
14
14
|
font-family: inherit;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
.SkeletonContainer {
|
|
18
|
-
width: 100%;
|
|
19
|
-
height: 1800px;
|
|
20
|
-
background-color: var(--emw--footer-color-bg, var(--emw-color-dark-blue, #07072A));
|
|
21
|
-
background-color: green !important;
|
|
22
|
-
display: flex;
|
|
23
|
-
gap: 100px;
|
|
24
|
-
justify-content: center;
|
|
25
|
-
align-items: center;
|
|
26
|
-
flex-direction: column;
|
|
27
|
-
}
|
|
28
|
-
.SkeletonContainer .FirstRow {
|
|
29
|
-
display: grid;
|
|
30
|
-
grid-template-columns: 100%;
|
|
31
|
-
column-gap: 20px;
|
|
32
|
-
gap: 10px;
|
|
33
|
-
}
|
|
34
|
-
.SkeletonContainer .FirstRow .SkeletonImage {
|
|
35
|
-
display: flex;
|
|
36
|
-
width: 20%;
|
|
37
|
-
}
|
|
38
|
-
.SkeletonContainer .SecondRow {
|
|
39
|
-
display: flex;
|
|
40
|
-
flex-direction: row;
|
|
41
|
-
}
|
|
42
|
-
.SkeletonContainer .SecondRow .SkeletonMenu {
|
|
43
|
-
display: flex;
|
|
44
|
-
gap: 10px;
|
|
45
|
-
flex-direction: column;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
17
|
.FooterSectionContainer {
|
|
49
18
|
color: var(--emw--footer-typography, var(--emw--color-thpography, #fff));
|
|
50
19
|
padding: 15px 20px 0;
|
|
@@ -40,7 +40,7 @@ export class GeneralFooterTemplate {
|
|
|
40
40
|
const url = new URL(`${this.endpoint}/${this.language}/footer-raw-data`);
|
|
41
41
|
url.searchParams.append('env', this.env);
|
|
42
42
|
url.searchParams.append('device', this.platform);
|
|
43
|
-
url.searchParams.append('
|
|
43
|
+
url.searchParams.append('userRoles', this.userRoles);
|
|
44
44
|
this.validateMandatoryFields();
|
|
45
45
|
return fetch(url.href)
|
|
46
46
|
.then((res) => res.json())
|
|
@@ -33,9 +33,9 @@ export class ImageList {
|
|
|
33
33
|
(_a = this.imgRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('load', this.onImageLoad);
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
var _a, _b, _c;
|
|
37
|
-
return h("div", { key: '
|
|
38
|
-
return (h("div", { class: 'ImageListIcon' }, this.navigateViaEvent === true ? (h("div", { class: 'ImageListIcon', style: { cursor: 'pointer' }, onClick: () => this.navigateLink(repeater === null || repeater === void 0 ? void 0 : repeater.url, repeater === null || repeater === void 0 ? void 0 : repeater.target, repeater === null || repeater === void 0 ? void 0 : repeater.isExternalLink) }, h("div", { class: "ContainerImage" }, this.skeletonLoading && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "
|
|
36
|
+
var _a, _b, _c, _d;
|
|
37
|
+
return ((_a = this.repeaterContent) === null || _a === void 0 ? void 0 : _a.content.length) > 0 && h("div", { key: '78285fbc71824ba67190d8a7370631c3ab5f80ad', class: "ImageListContainer" }, h("div", { key: 'bb68dacdca57a394485a8e3818e1c09187977e80', class: "ImageListWrapper" }, h("div", { key: '099aeba506825296ae6721679983b5c6e3a38b7f', class: "ImageListSectionTitle" }, (_b = this.repeaterContent) === null || _b === void 0 ? void 0 : _b.categoryTitle), h("div", { key: '0f3d5597a317036526961b6bc6697cce474b6400', class: "ImageListLineup" }, (_d = (_c = this.repeaterContent) === null || _c === void 0 ? void 0 : _c.content) === null || _d === void 0 ? void 0 : _d.map(repeater => {
|
|
38
|
+
return (h("div", { class: 'ImageListIcon' }, this.navigateViaEvent === true ? (h("div", { class: 'ImageListIcon', style: { cursor: 'pointer' }, onClick: () => this.navigateLink(repeater === null || repeater === void 0 ? void 0 : repeater.url, repeater === null || repeater === void 0 ? void 0 : repeater.target, repeater === null || repeater === void 0 ? void 0 : repeater.isExternalLink) }, h("div", { class: "ContainerImage" }, h("img", { src: repeater === null || repeater === void 0 ? void 0 : repeater.image, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "rectangle", rows: "1", width: "100%", height: "100%" })))), h("p", null, repeater === null || repeater === void 0 ? void 0 : repeater.title))) : (h("a", { href: (repeater === null || repeater === void 0 ? void 0 : repeater.url) || 'javascript:void(0)', target: (repeater === null || repeater === void 0 ? void 0 : repeater.target) || '_parent' }, h("div", { class: "ContainerImage" }, this.skeletonLoading && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "rectangle", rows: "1", width: "100%", height: "100%" }))), h("div", { class: "ImageListPositioner" }, h("img", { src: repeater === null || repeater === void 0 ? void 0 : repeater.image, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }))), h("p", null, repeater === null || repeater === void 0 ? void 0 : repeater.title)))));
|
|
39
39
|
}))));
|
|
40
40
|
}
|
|
41
41
|
static get is() { return "image-list"; }
|
|
@@ -4,6 +4,11 @@
|
|
|
4
4
|
padding: 0;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
+
.SkeletonWrapper {
|
|
8
|
+
width: 25px;
|
|
9
|
+
height: 25px;
|
|
10
|
+
}
|
|
11
|
+
|
|
7
12
|
.LinkSectionListContainer {
|
|
8
13
|
display: block;
|
|
9
14
|
container-type: inline-size;
|
|
@@ -36,22 +41,11 @@ ul li {
|
|
|
36
41
|
list-style: disc;
|
|
37
42
|
display: flex;
|
|
38
43
|
align-items: center;
|
|
39
|
-
padding-left: 25px;
|
|
40
44
|
position: relative;
|
|
41
45
|
}
|
|
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
46
|
ul li .LinkSectionListLinkText {
|
|
54
47
|
display: flex;
|
|
48
|
+
gap: 5px;
|
|
55
49
|
flex-direction: row;
|
|
56
50
|
align-items: center;
|
|
57
51
|
}
|
|
@@ -62,7 +56,6 @@ ul li .LinkSectionListLinkText span {
|
|
|
62
56
|
ul li .LinkSectionListLinkText img.LinkSectionIcon {
|
|
63
57
|
position: relative;
|
|
64
58
|
height: 25px;
|
|
65
|
-
padding: 0 5px;
|
|
66
59
|
}
|
|
67
60
|
|
|
68
61
|
a {
|
|
@@ -63,13 +63,13 @@ export class LinkSectionList {
|
|
|
63
63
|
}
|
|
64
64
|
return obj;
|
|
65
65
|
}, []);
|
|
66
|
-
return h("div", { class: "LinkSectionListContainer" }, h("div", { class: "LinkSectionListWrapper" }, this.repeaterContent.categoryTitle && h("h2", { class: "LinkSectionListTitle" }, this.repeaterContent.categoryTitle), linkSections.map(category => h("ul", null, category.categoryTitle && h("p", null, category.categoryTitle), 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) }, h("div", { class: "ContainerImage" }, this.skeletonLoading && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "
|
|
66
|
+
return h("div", { class: "LinkSectionListContainer" }, h("div", { class: "LinkSectionListWrapper" }, this.repeaterContent.categoryTitle && h("h2", { class: "LinkSectionListTitle" }, this.repeaterContent.categoryTitle), linkSections.map(category => h("ul", null, category.categoryTitle && h("p", null, category.categoryTitle), 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) }, h("div", { class: "ContainerImage" }, h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" })))), h("span", { class: '' }, link.linkName, " "))) :
|
|
67
67
|
link.linkName ?
|
|
68
68
|
h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("span", null, link.linkName, " "))
|
|
69
69
|
:
|
|
70
|
-
h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("div", { class: "ContainerImage" }, this.skeletonLoading && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "
|
|
70
|
+
h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("div", { class: "ContainerImage" }, h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" }))))))) : (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" }, h("div", { class: "ContainerImage" }, h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" })))), h("span", null, link.linkName))) :
|
|
71
71
|
link.linkName ? (h("span", { class: "LinkSectionListLinkText" }, h("span", null, link.linkName))) :
|
|
72
|
-
h("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, this.skeletonLoading && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "
|
|
72
|
+
h("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" })))))))))))));
|
|
73
73
|
}
|
|
74
74
|
static get is() { return "link-section-list"; }
|
|
75
75
|
static get originalStyleUrls() {
|