@everymatrix/general-footer-template 1.16.1

package/dist/components/general-footer-template.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GeneralFooterTemplate extends Components.GeneralFooterTemplate, HTMLElement {}
+export const GeneralFooterTemplate: {
+  prototype: GeneralFooterTemplate;
+  new (): GeneralFooterTemplate;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/general-footer-template.js

@@ -0,0 +1,334 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+/**
+ * custom rules for component types
+ */
+const getDevice = () => {
+  let userAgent = window.navigator.userAgent;
+  if (userAgent.toLowerCase().match(/android/i)) {
+    return 'Android';
+  }
+  if (userAgent.toLowerCase().match(/iphone/i)) {
+    return 'iPhone';
+  }
+  if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+    return 'iPad';
+  }
+  return 'PC';
+};
+const getDevicePlatform = () => {
+  const device = getDevice();
+  if (device) {
+    if (device === 'PC') {
+      return 'dk';
+    }
+    else if (device === 'iPad' || device === 'iPhone') {
+      return 'ios';
+    }
+    else {
+      return 'mtWeb';
+    }
+  }
+};
+const componentRules = {
+  "downloadApp": {
+    component: 'custom-content-section'
+  },
+  "link-section": {
+    component: 'link-section-list'
+  },
+  "copyright": {
+    component: 'custom-content-section'
+  },
+  "download": {
+    component: 'custom-content-section'
+  },
+  "helpLinks": {
+    component: 'image-list'
+  },
+  "license-description": {
+    component: 'custom-content-section'
+  },
+  "licenses": {
+    component: 'image-list',
+  },
+  "payment": {
+    component: 'image-list',
+  },
+  "social": {
+    component: 'image-list',
+  },
+  "sponsors": {
+    component: 'image-list',
+  },
+  "vendors": {
+    component: 'image-list',
+  },
+};
+// DATA CONTRACT MOCK
+const mockDataContract = (data) => {
+  const mockedResponse = {
+    repeaters: {
+      vendors: {
+        categoryTitle: data.gameVendorsLinksTitle,
+        content: []
+      },
+      "link-section": {
+        categoryTitle: data.helpLinksTitle,
+        content: []
+      },
+      helpLinks: {
+        categoryTitle: data.helpLinksTitle,
+        content: []
+      },
+      licenses: {
+        categoryTitle: data.licensesLinksTitle,
+        content: []
+      },
+      sponsors: {
+        categoryTitle: data.sponsorsLinksTitle,
+        content: []
+      },
+      payment: {
+        categoryTitle: data.paymentLinksTitle,
+        content: []
+      },
+      social: {
+        categoryTitle: data.socialLinksTitle,
+        content: []
+      },
+      downloadApp: {
+        categoryTitle: data.downloadAppLinksTitle,
+        content: []
+      }
+    },
+    wysiwyg: {
+      copyright: {
+        categoryTitle: 'test',
+        content: 'test'
+      },
+      download: {
+        categoryTitle: 'test',
+        content: 'test'
+      },
+      downloadApp: {
+        categoryTitle: 'test',
+        content: 'test'
+      },
+      "license-description": {
+        categoryTitle: 'test',
+        content: 'test'
+      }
+    }
+  };
+  const propertyNamesMap = {
+    helpLinks: {
+      repeaterName: 'helpLinksRepeater',
+      isExternalLink: 'isExternalLink',
+      image: 'helpLinkImage',
+      title: 'helpLinkTitle',
+      url: 'helpLinkUrl',
+      target: 'target'
+    },
+    "link-section": {
+      repeaterName: 'helpLinksRepeater',
+      isExternalLink: 'isExternalLink',
+      linkCategory: 'helpLinkCategory',
+      image: 'helpLinkImage',
+      title: 'helpLinkTitle',
+      url: 'helpLinkUrl',
+      target: 'target'
+    },
+    social: {
+      repeaterName: 'socialLinksRepeater',
+      isExternalLink: 'isExternalLink',
+      image: 'socialLinkImage',
+      title: 'socialLinkTitle',
+      url: 'socialLinkUrl',
+      target: 'target'
+    },
+    vendors: {
+      repeaterName: 'gameVendorsRepeater',
+      isExternalLink: 'isExternalLink',
+      image: 'gameVendorImage',
+      title: 'gameVendorTitle',
+      url: 'gameVendorUrl',
+      target: 'target'
+    },
+    licenses: {
+      repeaterName: 'licensesRepeater',
+      isExternalLink: 'isExternalLink',
+      image: 'licenseImage',
+      title: 'licenseTitle',
+      url: 'licenseUrl',
+      target: 'target'
+    },
+    payment: {
+      repeaterName: 'paymentMethodsRepeater',
+      isExternalLink: 'isExternalLink',
+      image: 'paymentMethodImage',
+      title: 'paymentTitle',
+      url: 'paymentUrl',
+      target: 'target'
+    },
+    sponsors: {
+      repeaterName: 'sponsorsRepeater',
+      isExternalLink: 'isExternalLink',
+      image: 'sponsorImage',
+      title: 'sponsorTitle',
+      url: 'sponsorUrl',
+      target: 'target'
+    }
+  };
+  // Horrible - repeater content mock. Only implementing like this until we get a standardised CMS response. Should refactor ASAP once that is done.
+  Object.entries(mockedResponse.repeaters).forEach(repeater => {
+    var _a, _b, _c;
+    if (propertyNamesMap[repeater[0]] && data[(_a = propertyNamesMap[repeater[0]]) === null || _a === void 0 ? void 0 : _a.repeaterName]) {
+      repeater[1].content = (_c = data[(_b = propertyNamesMap[repeater[0]]) === null || _b === void 0 ? void 0 : _b.repeaterName]) === null || _c === void 0 ? void 0 : _c.map(content => {
+        return {
+          isExternalLink: content[propertyNamesMap[repeater[0]].isExternalLink],
+          linkCategory: content[propertyNamesMap[repeater[0]].linkCategory],
+          image: content[propertyNamesMap[repeater[0]].image],
+          title: content[propertyNamesMap[repeater[0]].title],
+          url: content[propertyNamesMap[repeater[0]].url],
+          target: content[propertyNamesMap[repeater[0]].target],
+        };
+      });
+    }
+  });
+  mockedResponse.repeaters.downloadApp.content = data.downloadInfos.imageArea;
+  mockedResponse.wysiwyg.downloadApp.content = data.downloadInfos.downloadDescription;
+  mockedResponse.wysiwyg.copyright.content = data.copyright;
+  mockedResponse.wysiwyg["license-description"].content = data.licenseDesc;
+  return mockedResponse;
+};
+
+const pariuriPlusVariantCss = ":host {\n  display: block;\n}\n\n/* $-background-primary: #14202d; */\n\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: #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\n.FooterGrid {\n  background-color: #14202D;\n  display: grid;\n  padding: 8px 24px 0 24px;\n  grid-template-rows: repeat(9, auto);\n  grid-template-areas: \"one\"\n                       \"two\"\n                       \"three\"\n                       \"four\"\n                       \"five\"\n                       \"six\"\n                       \"seven\";\n}\n\n \n\n.FooterSectionContainer1 {\n  position: relative;\n  grid-area: one;\n  \n}\n.FooterSectionContainer2 {\n  position: relative;\n  grid-area: two;\n  border-bottom: 1px solid rgba(254, 254, 254, 0.2);\n}\n.FooterSectionContainer3 {\n  position: relative;\n  grid-area: three;\n  \n}\n.FooterSectionContainer4 {\n  position: relative;\n  grid-area: four;\n  border-bottom: 1px solid rgba(254, 254, 254, 0.2);\n}\n.FooterSectionContainer5 {\n  grid-area: five;\n  /* border-bottom: 1px solid #444; */\n}\n.FooterSectionContainer6 {\n  padding-top: 22px;\n  grid-area: six;\n}\n.FooterSectionContainer7 {\n  grid-area: seven;\n}\n\n/* // remove paddings */\n.FooterSectionContainer7 div{\n  padding: 0;\n}\n\n.FooterSectionContainer3:after {\n  position: absolute;\n  content: \"\";\n  left: 30%;\n  bottom: -20px;\n  height: 1px;\n  width: 40%;\n  background-color: #444;\n}\n\n\n\n/* // STYLES FOR TABLET / DESKTOP */\n@container (min-width: 750px) {\n  .FooterGrid {\n    background: $-background-primary;\n    display: grid;\n    grid-template-rows: repeat(5, auto);\n    grid-template-columns: 2fr 1fr;\n    grid-template-areas: \"one two\"\n                         \"three four\"\n                         \"five five\"\n                         \"six six\"\n                         \"seven seven\";\n  }\n  \n  \n  .FooterSectionContainer1 {\n    grid-area: one;\n    border-bottom: 1px solid rgba(254, 254, 254, 0.2);\n  }\n  .FooterSectionContainer2 {\n    grid-area: two;\n\n  }\n  .FooterSectionContainer3 {\n    grid-area: three;\n    border-bottom: 1px solid rgba(254, 254, 254, 0.2);\n  }\n  .FooterSectionContainer4 {\n    grid-area: four;\n  }\n  .FooterSectionContainer5 {\n    grid-area: five;\n  }\n  .FooterSectionContainer6 {\n    grid-area: six;\n    padding: 0;\n  }\n  .FooterSectionContainer7 {\n    grid-area: seven;\n    padding: 0;\n  }\n\n  /* VERTICAL BARS */\n  .FooterSectionContainer3:after {\n    position: absolute;\n    content: \"\";\n    left: initial;\n    bottom:initial;\n    top: 30%;\n    right: 20px;\n    width: 1px;\n    height: 40%;\n    background-color: #444;\n  }\n\n  /* // remove paddings */\n  .FooterSectionContainer5 .CustomContentSectionWrapper {\n    padding: 0;\n  }\n\n  .FooterSectionContainer5 .CustomContentSectionWrapper div {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .FooterSectionContainer5 .CustomContentSectionWrapper div p {\n    margin: 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    /* padding-bottom: 22px; */\n    /* font-size: 14px; */\n  }\n\n  .FooterSectionContainer7 .CustomContentSectionWrapper {\n    padding: 0;\n    padding-bottom: 22px;\n    font-size: 14px;\n  }\n}";
+
+const GeneralFooterTemplate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Environment segregation
+     */
+    this.env = 'stage';
+    /**
+     * User roles
+     */
+    this.userRoles = 'everyone';
+    /**
+     * custom styling by string content
+     */
+    this.clientStyling = '';
+    /**
+     * custom styling by href
+    */
+    this.clientStylingUrl = '';
+    /**
+      * wether or not styling appends should be disallowed
+    */
+    this.limitStylingAppends = false;
+    this.hasErrors = false;
+    this.platform = getDevicePlatform();
+    this.MANDATORY_FIELDS = ['endpoint', 'language', 'sections'];
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.host.shadowRoot.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        this.clientStylingUrl = data;
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+      });
+    };
+  }
+  validateMandatoryFields() {
+    this.MANDATORY_FIELDS.forEach((field) => {
+      if (!this[field]) {
+        console.error(`Mandatory parameter ${field} not received`);
+        this.hasErrors = true;
+      }
+    });
+  }
+  componentWillLoad() {
+    this.sectionsList = this.sections.split(',').map(section => section.trim());
+    const url = new URL(`${this.endpoint}/${this.language}/footer-raw-data`);
+    url.searchParams.append('env', this.env);
+    url.searchParams.append('device', this.platform);
+    url.searchParams.append('userroles', this.userRoles);
+    this.validateMandatoryFields();
+    return fetch(url.href)
+      .then((res) => res.json())
+      .then((data) => {
+      this.footerContent = mockDataContract(data);
+    });
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.host.shadowRoot) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  render() {
+    const footerSections = this.sectionsList.map((section, i) => {
+      const FooterElement = componentRules[section].component;
+      const elementIsRepeater = this.footerContent.repeaters.hasOwnProperty(section);
+      const elementIsCustom = this.footerContent.wysiwyg.hasOwnProperty(section);
+      return h(FooterElement, { class: `${section} FooterSectionContainer FooterSectionContainer${i + 1}`, userid: this.userid, session: this.session, ruleset: componentRules[section], repeaterContent: elementIsRepeater ? this.footerContent.repeaters[section] : null, customContent: elementIsCustom ? this.footerContent.wysiwyg[section].content : null });
+    });
+    if (this.hasErrors) {
+      return h("div", null, "There was an error while bootstraping the widget");
+    }
+    else {
+      return (h("footer", { class: "FooterContainer" }, h("div", { class: "FooterGrid customStyle" }, footerSections)));
+    }
+  }
+  get host() { return this; }
+  static get style() { return pariuriPlusVariantCss; }
+}, [1, "general-footer-template", {
+    "language": [513],
+    "sections": [513],
+    "endpoint": [513],
+    "env": [513],
+    "userRoles": [513, "user-roles"],
+    "userid": [513],
+    "session": [513],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "limitStylingAppends": [32],
+    "hasErrors": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["general-footer-template"];
+  components.forEach(tagName => { switch (tagName) {
+    case "general-footer-template":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GeneralFooterTemplate$1);
+      }
+      break;
+  } });
+}
+
+const GeneralFooterTemplate = GeneralFooterTemplate$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GeneralFooterTemplate, defineCustomElement };

package/dist/components/image-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ImageList extends Components.ImageList, HTMLElement {}
+export const ImageList: {
+  prototype: ImageList;
+  new (): ImageList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/image-list.js

@@ -0,0 +1,6 @@
+import { I as ImageList$1, d as defineCustomElement$1 } from './image-list2.js';
+
+const ImageList = ImageList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ImageList, defineCustomElement };

package/dist/components/image-list2.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const imageListCss = ".sc-image-list-h{display:block;margin:0;padding:0}.ImageListContainer.sc-image-list{height:100%}.ImageListWrapper.sc-image-list{box-sizing:border-box;height:100%;display:flex;flex-direction:column;padding:20px 0;justify-content:center;align-items:center}.ImageListSectionTitle.sc-image-list{width:100%;display:flex;justify-content:center;align-content:center;padding-bottom:14px;color:#fff}.ImageListLineup.sc-image-list{box-sizing:border-box;height:100%;display:flex;flex-wrap:wrap;gap:30px;justify-content:center;align-items:center}.ImageListIcon.sc-image-list img.sc-image-list{width:auto;height:auto}a.sc-image-list{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-decoration:none}a.sc-image-list p.sc-image-list{text-decoration:none;color:#666;margin:0}";
+
+const ImageList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return h("div", { class: "ImageListContainer" }, h("div", { class: "ImageListWrapper" }, h("div", { class: "ImageListSectionTitle" }, this.repeaterContent.categoryTitle), h("div", { class: "ImageListLineup" }, this.repeaterContent.content.map(repeater => {
+      return (h("div", { class: 'ImageListIcon' }, h("a", { href: repeater.url || 'javascript:void(0)', target: repeater.target || '_parent' }, h("div", { class: "ImageListPositioner" }, h("img", { src: repeater.image, alt: "" })), h("p", null, repeater.title))));
+    }))));
+  }
+  static get style() { return imageListCss; }
+}, [2, "image-list", {
+    "repeaterContent": [8, "repeater-content"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["image-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "image-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ImageList);
+      }
+      break;
+  } });
+}
+
+export { ImageList as I, defineCustomElement as d };

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+/* GeneralFooterTemplate custom elements */
+
+import type { Components, JSX } from "../types/components";
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

package/dist/components/link-section-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LinkSectionList extends Components.LinkSectionList, HTMLElement {}
+export const LinkSectionList: {
+  prototype: LinkSectionList;
+  new (): LinkSectionList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/link-section-list.js

@@ -0,0 +1,59 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+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: grid;\n  grid-gap: 2rem;\n  grid-template-columns: 1fr;\n}\n.LinkSectionListTitle {\n  font-weight: 600;\n}\n.LinkSectionListLink {\n  font-weight: 300;\n  text-decoration: underline;\n  text-underline-offset: 0.2rem;\n}\n\nul {\n  width: fit-content;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\nli {\n  list-style: none;\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 LinkSectionList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    const linkSections = this.repeaterContent.content.reduce((obj, elem) => {
+      const currentCategory = elem.linkCategory;
+      const foundCategory = obj.find(el => el.categoryTitle === currentCategory);
+      if (foundCategory) {
+        foundCategory.links.push({
+          linkName: elem.title,
+          linkUrl: elem.url,
+          target: elem.target
+        });
+      }
+      else {
+        obj.push({
+          categoryTitle: currentCategory,
+          links: [{
+              linkName: elem.title,
+              linkUrl: elem.url,
+              target: elem.target
+            }]
+        });
+      }
+      return obj;
+    }, []);
+    return h("div", { class: "LinkSectionListContainer" }, h("div", { class: "LinkSectionListWrapper" }, linkSections.map(category => h("ul", null, h("li", { class: "LinkSectionListTitle" }, category.categoryTitle), category.links.map(link => {
+      var _a;
+      return h("li", { class: "LinkSectionListLink" }, h("a", { href: link.linkUrl, target: (_a = link.target) !== null && _a !== void 0 ? _a : '_blank' }, link.linkName));
+    })))));
+  }
+  static get style() { return linkSectionListCss; }
+}, [0, "link-section-list", {
+    "repeaterContent": [8, "repeater-content"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["link-section-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "link-section-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LinkSectionList$1);
+      }
+      break;
+  } });
+}
+
+const LinkSectionList = LinkSectionList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LinkSectionList, defineCustomElement };