@everymatrix/casino-footer-thumbnail 1.44.0 → 1.45.2

package/index.html

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width,initial-scale=1'>
-
-	<title>
-    casino-footer-thumbnail
-  </title>
-  <link rel="stylesheet" href="public/reset.css">
-	<script src='dist/casino-footer-thumbnail.js'></script>
-</head>
-
-<body>
-  <style>
-    html,body { margin: 0; padding: 0; height: 100%; font-family: "Helvetica Neue", "Helvetica", sans-serif; }
-    .header { display: flex; justify-content: center; align-items: center; padding: 10px 20px; margin-bottom: 20px; background: #42a3e2; box-shadow: 3px 4px 5px 0px rgba(0,0,0, .2); }
-    .header__logo svg { height: 50px; width: 50px; margin-right: 5px; }
-    .header__name { color: #fff; }
-    .header__name span { margin-right: 10px; font-weight: bold; }
-    .webcomponent { padding: 10px 20px; }
-  </style>
-  <header class="header">
-    <div class="header__logo">
-      <svg xmlns="http://www.w3.org/2000/svg" width="161" height="132" viewBox="0 0 161 132"><defs><linearGradient x1="0%" y1="50%" y2="50%" id="a"><stop stop-color="#2A3B8F" offset="0%"/><stop stop-color="#29ABE2" offset="100%"/></linearGradient><linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="c"><stop stop-color="#B4D44E" offset="0%"/><stop stop-color="#E7F716" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="#166DA5" d="M160.6 65.9l-17.4 29.3-24.4-29.7 24.4-28.9z"/><path fill="#8FDB69" d="M141.3 100.2l-26.5-31.7-15.9 26.6 24.7 36.1z"/><path fill="#166DA5" d="M141 31.4l-26.2 31.8-15.9-26.6L123.6.9z"/><path fill="url(#a)" opacity=".95" d="M61.1 31.4H141L123.4.7H78.7z M114.8 63.3H159l-15.9-26.8H98.8"/><path fill="url(#c)" opacity=".95" d="M141.3 100.3H61l17.6 30.5h45z M114.8 68.4H159l-15.9 26.8H98.8"/><path fill="#010101" d="M78.6 130.8L41 65.8 79.1.8H37.9L.4 65.8l37.5 65z"/></g></svg>
-    </div>
-    <h1 class="header__name">
-      <span>WEBCOMPONENT:</span> casino-footer-thumbnail
-    </h1>
-  </header>
-
-  <div class="webcomponent">
-    <casino-footer-thumbnail></casino-footer-thumbnail>
-  </div>
-  
-</body>
-</html>

package/index.js

@@ -1 +0,0 @@
-import './dist/casino-footer-thumbnail.js';

package/public/reset.css

@@ -1,48 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}

package/rollup.config.js

@@ -1,67 +0,0 @@
-import svelte from 'rollup-plugin-svelte';
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-import serve from 'rollup-plugin-dev-server';
-import livereload from 'rollup-plugin-livereload';
-import { terser } from 'rollup-plugin-terser';
-import sveltePreprocess from 'svelte-preprocess';
-import typescript from '@rollup/plugin-typescript';
-import uglify from 'rollup-plugin-uglify';
-import image from '@rollup/plugin-image';
-
-const production = process.env.NODE_ENV == 'production';
-const dev = process.env.NODE_ENV == 'development';
-
-export default {
-  input: 'src/index.ts',
-  output: {
-    sourcemap: true,
-    format: 'umd',
-    name: 'app',
-    file: 'dist/casino-footer-thumbnail.js',
-  },
-  plugins: [
-    svelte({
-      preprocess: sveltePreprocess(),
-      compilerOptions: {
-        // @TODO check generate and hydratable
-        // generate: 'ssr',
-        // hydratable: true,
-        // enable run-time checks when not in production
-        customElement: true,
-        dev: !production
-      }
-    }),
-    image(),
-    commonjs(),
-    resolve({
-      browser: true,
-      dedupe: ['svelte']
-    }),
-    dev && serve({
-      open: true,
-      verbose: true,
-      allowCrossOrigin: true,
-      historyApiFallback: false,
-      host: 'localhost',
-      port: 5050,
-    }),
-    dev && livereload({ watch: ['', 'dist'] }),
-    typescript({
-      sourceMap: !production,
-      inlineSources: !production,
-    }),
-    // If we're building for production (npm run build
-    // instead of npm run dev), minify
-    production &&
-    terser({
-      output: {
-        comments: "all"
-      },
-    }),
-    production && uglify.uglify()
-  ],
-  watch: {
-    clearScreen: false
-  }
-};

package/src/CasinoFooterThumbnail.svelte

@@ -1,294 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-    
-  import { getDevice } from 'rvhelper';
-
-  export let sponsorurl:string = '';
-  export let sponsorimage:string = '';
-  export let sponsortitle:string = '';
-  export let paymenturl:string = '';
-  export let paymentimage:string = '';
-  export let paymenttitle:string = '';
-  export let vendorurl:string = '';
-  export let vendorimage:string = '';
-  export let vendortitle:string = '';
-  export let helperlinkurl:string = '';
-  export let helperlinkimage:string = '';
-  export let helperlinktitle:string = '';
-  export let licenseurl:string = '';
-  export let licenseimage:string = '';
-  export let licensetitle:string = '';
-  export let sociallinkurl:string = '';
-  export let sociallinkimage:string = '';
-  export let sociallinktitle:string = '';
-  export let target:string = '_self';
-  export let linktype:string = 'false';
-  export let displaycolumn:string = '';
-  export let baseurl:string = '';
-  export let lang:string = '';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-
-  let customStylingContainer:HTMLElement;
-  let userAgent = window.navigator.userAgent;
-  let device:string = getDevice(userAgent);
-
-  const setClientStyling = () => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    let url:URL = new URL(clientstylingurl);
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(url.href)
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-      });
-  }
-
-  const sendOpenLink = (url:string, type:string, target:any) => {
-    const isExternal = type;
-    const urlForNative: string = isExternal ? url : baseurl + `/${lang}/` + url;
- 
-    window.postMessage({ type:'NavigateTo', path: url, target: target || null, externalLink: isExternal || false }, window.location.href);
-    
-    // To avoid breaking changes, send constructed url for native
-    if (isExternal) {
-      window.postMessage({ type:'ExternalLinkNavigation', externalUrl: urlForNative, target: target }, window.location.href);
-    } else {
-      window.postMessage({ type:'LinkNavigation', navUrl: urlForNative, target: target }, window.location.href);
-    }
-  }
-
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-</script>
-
-<div class="ThumbnailContainer" part="ThumbnailContainer" bind:this={customStylingContainer}>
-  {#if device == 'PC'} <!-- Case when we need anchor navigation in order to control the way a link opens inside an iframe through the target attribute -->
-    {#if sponsorimage}
-      <div class="FooterItem SponsorItem" part="FooterItem SponsorItem">
-        <a class="{sponsortitle ? 'FooterSponsorLink' : '' } {sponsorurl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-          part="{sponsortitle ? 'FooterSponsorLink' : '' } {sponsorurl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-          href={linktype ? sponsorurl : baseurl + `/${lang}/` + sponsorurl}
-          target={target}>
-          <img class="FooterImage" part="FooterImage" src={sponsorimage} title={sponsortitle|| sponsorurl} />
-          {#if sponsortitle}
-            <p class="SponsorTitle" part="SponsorTitle">{sponsortitle}</p>
-          {/if}
-        </a>
-      </div>
-    {:else if paymentimage}
-      <div class="FooterItem PaymentItem" part="FooterItem PaymentItem">
-        <a class="{paymenttitle ? 'FooterPaymentLink' : '' } {paymenturl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-          part="{paymenttitle ? 'FooterPaymentLink' : '' } {paymenturl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-          href={linktype ? paymenturl : baseurl + `/${lang}/` + paymenturl}
-          target={target}>
-          <img class="FooterImage" part="FooterImage" src={paymentimage} title={paymenttitle || paymenturl} />
-          {#if paymenttitle}
-            <p class="PaymentTitle" part="PaymentTitle">{paymenttitle}</p>
-          {/if}
-        </a>
-      </div>
-    {:else if vendorimage}
-      <div class="FooterItem GameVendorItem" part="FooterItem GameVendorItem">
-        <a class="{vendorurl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-          part="{vendorurl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-          href={linktype ? vendorurl : baseurl + `/${lang}/` + vendorurl}
-          target={target}>
-          <img class="FooterImage" part="FooterImage" src={vendorimage} title={vendortitle || vendorurl} />
-        </a>
-      </div>
-    {:else if helperlinkurl}
-      <div class="FooterItem HelperLinkItem {displaycolumn == "true" ? "DisplayColumn" : ""}" part="FooterItem HelperLinkItem">
-        <a class="{helperlinktitle ? 'FooterHelperLink' : '' } {helperlinkurl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-          part="{helperlinktitle ? 'FooterHelperLink' : '' } {helperlinkurl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-          href={linktype ? helperlinkurl : baseurl + `/${lang}/` + helperlinkurl}
-          target={target}>
-          {#if helperlinkimage}
-            <img class="FooterImage" part="FooterImage" src={helperlinkimage} title={helperlinktitle || helperlinkurl} />
-          {/if}
-          {#if helperlinktitle}
-            <p class="HelperTitle" part="HelperTitle">{helperlinktitle}</p>
-          {/if}
-        </a>
-      </div>
-    {:else if licenseimage}
-      <div class="FooterItem" part="FooterItem">
-        <a class="FooterLink {licenseurl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-          part="FooterLink {licenseurl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-          href={linktype ? licenseurl : baseurl + `/${lang}/` + licenseurl}
-          target={target}>
-          <img class="FooterImage" part="FooterImage" src={licenseimage} title={licensetitle || licenseurl} />
-        </a>
-      </div>
-    {:else if sociallinkimage}
-      <div class="FooterItem SocialItem" part="FooterItem SocialItem">
-        <a class="FooterLink {sociallinkurl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-          part="FooterLink {sociallinkurl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-          href={linktype ? sociallinkurl : baseurl + `/${lang}/` + sociallinkurl}
-          target={target}>
-          <img class="FooterImage" part="FooterImage" src={sociallinkimage} title={sociallinktitle || sociallinkurl} />
-        </a>
-      </div>
-    {/if}
-  {:else} <!-- Case when external navigation is handled by native devices -->
-    {#if sponsorimage}
-      <div class="FooterItem SponsorItem" part="FooterItem SponsorItem">
-        <button class="{sponsortitle ? 'FooterSponsorLink' : '' } {sponsorurl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-                on:click={() => sendOpenLink(sponsorurl, linktype, target)}>
-          <img class="FooterImage" part="FooterImage" src={sponsorimage} title={sponsortitle|| sponsorurl} />
-          {#if sponsortitle}
-            <p class="SponsorTitle" part="SponsorTitle">{sponsortitle}</p>
-          {/if}
-        </button>
-      </div>
-    {:else if paymentimage}
-      <div class="FooterItem PaymentItem" part="FooterItem PaymentItem">
-        <button class="{paymenttitle ? 'FooterPaymentLink' : '' } {paymenturl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-                on:click={() => sendOpenLink(paymenturl, linktype, target)}>
-          <img class="FooterImage" part="FooterImage" src={paymentimage} title={paymenttitle || paymenturl} />
-          {#if paymenttitle}
-            <p class="PaymentTitle" part="PaymentTitle">{paymenttitle}</p>
-          {/if}
-        </button>
-      </div>
-    {:else if vendorimage}
-      <div class="FooterItem GameVendorItem" part="FooterItem GameVendorItem">
-        <button class="{vendorurl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-                on:click={() => sendOpenLink(vendorurl, linktype, target)}>
-          <img class="FooterImage" part="FooterImage" src={vendorimage} title={vendortitle || vendorurl} />
-        </button>
-      </div>
-    {:else if helperlinkurl}
-      <div class="FooterItem HelperLinkItem {displaycolumn == "true" ? "DisplayColumn" : ""}" part="FooterItem HelperLinkItem">
-        <button class="{helperlinktitle ? 'FooterHelperLink' : '' } {helperlinkurl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-                on:click={() => sendOpenLink(helperlinkurl, linktype, target)}>
-          {#if helperlinkimage}
-            <img class="FooterImage" part="FooterImage" src={helperlinkimage} title={helperlinktitle || helperlinkurl} />
-          {/if}
-          {#if helperlinktitle}
-            <p class="HelperTitle" part="HelperTitle">{helperlinktitle}</p>
-          {/if}
-        </button>
-      </div>
-    {:else if licenseimage}
-      <div class="FooterItem" part="FooterItem">
-        <button class="FooterLink {licenseurl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-                on:click={() => sendOpenLink(licenseurl, linktype, target)}>
-          <img class="FooterImage" part="FooterImage" src={licenseimage} title={licensetitle || licenseurl} />
-        </button>
-      </div>
-    {:else if sociallinkimage}
-      <div class="FooterItem SocialItem" part="FooterItem SocialItem">
-        <button class="FooterLink {sociallinkurl ? '' : 'FooterLinkDisabled'} FooterItemAnchor"
-                on:click={() => sendOpenLink(sociallinkurl, linktype, target)}>
-          <img class="FooterImage" part="FooterImage" src={sociallinkimage} title={sociallinktitle || sociallinkurl} />
-        </button>
-      </div>
-    {/if}
-  {/if}
-</div>
-
-<style lang="scss">
-  :host {
-    font-family: system-ui, -apple-system, Roboto, Helvetica;
-  }
-
-  .FooterItem {
-    display: inline-block;
-    padding: 0 12px;
-    .FooterSponsorLink, .FooterPaymentLink {
-      display: block;
-    }
-    .FooterSponsorLink {
-      display: flex;
-      align-items: center;
-    }
-    .FooterPaymentLink, .FooterHelperLink {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .FooterLinkDisabled {
-      pointer-events: none;
-      cursor: auto;
-    }
-    .SponsorTitle, .PaymentTitle {
-      font-size: 9px;
-      text-decoration: none;
-      color: var(--emfe-w-color-gray-150, #828282);
-      text-align: center;
-    }
-    .HelperTitle {
-      color: var(--emfe-w-footer-typography, var(--emfe-w-color-contrast, #111));
-      font-size: 8px;
-    }
-    &.HelperLinkItem {
-      p {
-        font-size: 10px;
-      }
-    }
-    .FooterItemAnchor {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      text-decoration: none;
-      cursor: pointer;
-      border: none;
-      background: transparent;
-      padding: 0;
-    }
-    &.SocialItem {
-      .FooterItemAnchor {
-        width: 42px;
-        height: 42px;
-      }
-    }
-    .FooterImage {
-      min-height: 38px;
-    }
-  }
-
-  .SponsorTitle {
-    margin: 0;
-  }
-
-  .FooterLink {
-    display: block;
-    text-align: center;
-  }
-  .DisplayColumn {
-    .FooterItemAnchor {
-      flex-direction: row;
-    }
-    .FooterImage {
-      height: 16px;
-      width: 16px;
-      min-height: unset;
-    }
-    &.FooterItem.HelperLinkItem p {
-      font-size: 12px;
-    }
-  }
-
-
-  @media only screen and (max-width: 768px) {
-    .FooterItem {
-      padding: 0 5px;
-      &.PaymentItem {
-        padding: 15px 5px;
-      }
-      &.GameVendorItem {
-        padding: 0 10px;
-      }
-    }
-  }
-</style>

package/src/index.ts

@@ -1,4 +0,0 @@
-import CasinoFooterThumbnail from './CasinoFooterThumbnail.svelte';
-
-!customElements.get('casino-footer-thumbnail') && customElements.define('casino-footer-thumbnail', CasinoFooterThumbnail);
-export default CasinoFooterThumbnail;

package/stories/CasinoFooterThumbnail.stories.js

@@ -1,13 +0,0 @@
-import { html } from 'lit-element';
-
-import CasinoFooterThumbnail from '../src/CasinoFooterThumbnail';
-
-// This default export determines where your story goes in the story list
-export default {
-  title: 'CasinoFooterThumbnail',
-};
-
-// 👇 We create a “template” of how args map to rendering
-const CasinoFooterThumbnail = ({ aProperty }) => html`<casino-footer-thumbnail></casino-footer-thumbnail>`;
-
-export const FirstStory = CasinoFooterThumbnail.bind({});

package/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "extends": "@tsconfig/svelte/tsconfig.json",
-
-  "include": ["src/**/*"],
-  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
-}