@everymatrix/general-footer-template 1.0.69

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/link-section-list.cjs.entry.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4c3922ac.js');
+
+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}";
+const LinkSectionListStyle0 = linkSectionListCss;
+
+const LinkSectionList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.repeaterContent = undefined;
+        this.baseUrl = undefined;
+        this.language = undefined;
+        this.navigateViaEvent = false;
+        this.postMessageEvent = '';
+    }
+    navigateLink(link) {
+        window.postMessage({ type: this.postMessageEvent, url: link.linkUrl, target: link.target, externalLink: link.externalLink }, window.location.href);
+    }
+    render() {
+        var _a, _b;
+        const linkSections = (_b = (_a = this.repeaterContent) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.reduce((obj, elem) => {
+            const currentCategory = elem.linkCategory;
+            const iconUrl = elem.image;
+            const foundCategory = obj.find(el => el.categoryTitle === currentCategory);
+            if (foundCategory) {
+                foundCategory.links.push({
+                    linkName: elem.title,
+                    linkUrl: elem.url,
+                    target: elem.target,
+                    externalLink: elem.isExternalLink,
+                    icon: iconUrl
+                });
+            }
+            else {
+                obj.push({
+                    categoryTitle: currentCategory,
+                    links: [{
+                            linkName: elem.title,
+                            linkUrl: elem.url,
+                            target: elem.target,
+                            externalLink: elem.isExternalLink,
+                            icon: iconUrl
+                        }]
+                });
+            }
+            return obj;
+        }, []);
+        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, " "))) :
+            link.linkName ?
+                index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("span", null, link.linkName, " "))
+                :
+                    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))) :
+            link.linkName ? (index.h("span", { class: "LinkSectionListLinkText" }, index.h("span", null, link.linkName))) :
+                index.h("span", { class: "LinkSectionListLinkText" }, index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }))))))))));
+    }
+};
+LinkSectionList.style = LinkSectionListStyle0;
+
+exports.link_section_list = LinkSectionList;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4c3922ac.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  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"]}]]],["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"],"hasErrors":[32],"stylingAppends":[32]}]]],["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"]}]]],["image-list.cjs",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,15 @@
+{
+  "entries": [
+    "components/general-footer-template/general-footer-template.js",
+    "components/custom-content-section/custom-content-section.js",
+    "components/image-list/image-list.js",
+    "components/link-section-list/link-section-list.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.20.0",
+    "typescriptVersion": "5.5.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/custom-content-section/custom-content-section.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+}
+
+* {
+  margin: 0;
+}
+
+.CustomContentSectionWrapper {
+  box-sizing: border-box;
+  height: 100%;
+  align-items: center;
+}

package/dist/collection/components/custom-content-section/custom-content-section.js

@@ -0,0 +1,105 @@
+import { h } from "@stencil/core";
+import sanitizeHtml from "sanitize-html";
+export class CustomContentSection {
+    constructor() {
+        this.customContent = undefined;
+        this.repeaterContent = undefined;
+        this.navigateViaEvent = false;
+        this.postMessageEvent = '';
+    }
+    render() {
+        const clean = sanitizeHtml(this.customContent, {
+            allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
+            allowedAttributes: {
+                img: ['src', 'srcset', 'alt', 'title', 'width', 'height', 'loading']
+            }
+        });
+        return h("div", { key: '818f883a9cf68c04ed29572bd6b5949e0ebb41e6', class: "CustomContentSectionContainer" }, h("div", { key: '63f78d30acf7a3e3b1f672317342dc4c58669c9b', class: "CustomContentSectionWrapper" }, h("div", { key: '920f2c9f25f3c2e39bae12969aef06f6ee8b58fa', class: "CustomContentSectionContent", innerHTML: clean }), this.repeaterContent ? h("image-list", { style: { width: "100%" }, repeaterContent: this.repeaterContent ? this.repeaterContent : null, "navigate-via-event": this.navigateViaEvent, "post-message-event": this.postMessageEvent }) : ''));
+    }
+    static get is() { return "custom-content-section"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["custom-content-section.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["custom-content-section.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "custom HTML content to be rendered"
+                },
+                "attribute": "custom-content",
+                "reflect": false
+            },
+            "repeaterContent": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "the links content to be displayed, including titles, url, open target"
+                },
+                "attribute": "repeater-content",
+                "reflect": false
+            },
+            "navigateViaEvent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If this is true it will emit an event at the moment the content with url its clicked"
+                },
+                "attribute": "navigate-via-event",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "postMessageEvent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Post Message event to be sent on navigation via Event"
+                },
+                "attribute": "post-message-event",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+}

package/dist/collection/components/general-footer-template/demo-footer.css

@@ -0,0 +1,160 @@
+:host {
+  display: block;
+}
+
+/* $-background-primary: #14202d; */
+* {
+  font-family: sans-serif;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+}
+
+.FooterSectionContainer {
+  color: var(--emw--footer-typography, var(--emw-color-thpography, #fff));
+  padding: 12px;
+}
+
+/* // FOOTER CONTAINER - only serves to be read as a container */
+.FooterContainer {
+  container-type: inline-size;
+  container-name: footerContainer;
+}
+
+.FooterGrid {
+  background-color: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));
+  display: grid;
+  padding: 8px 24px 0 24px;
+  grid-template-rows: repeat(9, auto);
+  grid-template-areas: "one" "two" "three" "four" "five" "six" "seven";
+}
+
+.FooterSectionContainer1 {
+  position: relative;
+  grid-area: one;
+}
+
+.FooterSectionContainer2 {
+  position: relative;
+  grid-area: two;
+}
+
+.FooterSectionContainer3 {
+  position: relative;
+  grid-area: three;
+}
+
+.FooterSectionContainer4 {
+  position: relative;
+  grid-area: four;
+}
+
+.FooterSectionContainer5 {
+  grid-area: five;
+}
+
+.FooterSectionContainer6 {
+  padding-top: 22px;
+  grid-area: six;
+}
+
+.FooterSectionContainer7 {
+  grid-area: seven;
+}
+
+/* // remove paddings */
+.FooterSectionContainer7 div {
+  padding: 0;
+}
+
+@container (max-width: 750px) {
+  .FooterSectionContainer3:after,
+  .FooterSectionContainer2:after {
+    position: absolute;
+    content: "";
+    height: 1px;
+    width: 90%;
+    background-color: var(--emw--color-gray-100, #444);
+  }
+  .FooterSectionContainer5 {
+    grid-area: five;
+    background-color: var(--emw--color-background-secondary, #060706);
+    padding: 30px 0;
+    font-size: var(--emw--font-size-medium, 16px);
+    min-height: var(--emw--size-medium-plus, 100px);
+    justify-self: center;
+  }
+}
+/* // STYLES FOR TABLET / DESKTOP */
+@container (min-width: 750px) {
+  .FooterGrid {
+    background: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));
+    display: grid;
+    border-top: 5px solid var(--emw--footer-color-primary, var(--emw--color-primary, #22B04E));
+    grid-template-rows: repeat(5, auto);
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-areas: "one two three four" "five five five five" "six six six six" "seven seven seven seven";
+  }
+  .FooterSectionContainer1 {
+    padding: 30px 40px;
+    grid-area: one;
+    background: var(--emw--color-background, #000000);
+  }
+  .FooterSectionContainer2 {
+    grid-area: two;
+    min-height: var(--emw--size-4x-medium, 500px);
+  }
+  .FooterSectionContainer3 {
+    grid-area: three;
+  }
+  .FooterSectionContainer4 {
+    grid-area: four;
+  }
+  .FooterSectionContainer5 {
+    grid-area: five;
+    background-color: var(--emw--color-background-secondary, #091217);
+    padding: var(--emw--spacing-x-large, 30px) 0;
+    font-size: var(--emw--font-size-medium, 16px);
+    min-height: var(--emw--size-medium-plus, 100px);
+  }
+  .FooterSectionContainer6 {
+    grid-area: six;
+    padding: 0;
+  }
+  .FooterSectionContainer7 {
+    grid-area: seven;
+    padding: 0;
+  }
+  /* // remove paddings */
+  .FooterSectionContainer5 .CustomContentSectionWrapper {
+    padding: 0;
+  }
+  .FooterSectionContainer5 .CustomContentSectionWrapper div {
+    display: flex;
+    flex-direction: left;
+    align-items: center;
+    padding-left: var(--emw--spacing-large, 20px);
+  }
+  .FooterSectionContainer5 .CustomContentSectionWrapper div p {
+    margin: var(--emw--spacing-2x-small, 5px);
+    text-align: center;
+  }
+  .FooterSectionContainer6 .CustomContentSectionWrapper div p {
+    text-align: center;
+  }
+  .FooterSectionContainer6 .ImageListWrapper {
+    padding: 0;
+  }
+  .FooterSectionContainer6 .ImageListWrapper {
+    padding: 0;
+  }
+  .FooterSectionContainer7 .CustomContentSectionWrapper {
+    padding: 0;
+    padding-bottom: var(--emw--spacing-large, 22px);
+    font-size: var(--emw--font-size-small, 14px);
+  }
+}

package/dist/collection/components/general-footer-template/general-footer-template.css

@@ -0,0 +1,84 @@
+:host {
+  display: block;
+}
+
+* {
+  font-family: sans-serif;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+}
+
+.footer-section__container {
+  color: var(--emfe-w-footer-typography, var(--emfe-w-color-white, #FFFFFF));
+  padding: 12px;
+}
+
+.footer-container {
+  container-type: inline-size;
+  container-name: footerContainer;
+}
+
+.footer-grid {
+  background-color: var(--emfe-w-footer-color-bg, var(--emfe-w-color-dark-blue, #07072A));
+  display: grid;
+  grid-template-rows: repeat(9, auto);
+  grid-template-areas: "one" "two" "three" "four" "five" "six" "seven";
+}
+
+.footer-section__container--1 {
+  grid-area: one;
+}
+.footer-section__container--2 {
+  grid-area: two;
+}
+.footer-section__container--3 {
+  grid-area: three;
+}
+.footer-section__container--4 {
+  grid-area: four;
+}
+.footer-section__container--5 {
+  grid-area: five;
+}
+.footer-section__container--6 {
+  grid-area: six;
+}
+.footer-section__container--7 {
+  grid-area: seven;
+}
+
+@container (min-width: 750px) {
+  .footer-grid {
+    background: var(--emfe-w-footer-color-bg, var(--emfe-w-color-dark-blue, #07072A));
+    display: grid;
+    grid-template-rows: repeat(7, auto);
+    grid-template-columns: 2fr 1fr;
+    grid-template-areas: "one two" "three four" "five five" "six six" "seven seven" "eight eight" "nine nine";
+  }
+  .footer-section__container--1 {
+    grid-area: one;
+  }
+  .footer-section__container--2 {
+    grid-area: two;
+  }
+  .footer-section__container--3 {
+    grid-area: three;
+  }
+  .footer-section__container--4 {
+    grid-area: four;
+  }
+  .footer-section__container--5 {
+    grid-area: five;
+  }
+  .footer-section__container--6 {
+    grid-area: six;
+  }
+  .footer-section__container--7 {
+    grid-area: seven;
+  }
+}