npm - @everymatrix/player-account-self-exclusion-nd - Versions diffs - 1.37.4 - Mend

@everymatrix/player-account-self-exclusion-nd 1.37.4

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.

Files changed (16) hide show

package/CHANGELOG.md +8 -0
package/README.md +30 -0
package/dist/player-account-self-exclusion-nd.js +2219 -0
package/dist/player-account-self-exclusion-nd.js.map +1 -0
package/index.html +21 -0
package/index.js +1 -0
package/package.json +39 -0
package/public/favicon.png +0 -0
package/public/reset.css +48 -0
package/rollup.config.js +67 -0
package/src/PlayerAccountSelfExclusionNd.svelte +371 -0
package/src/i18n.js +27 -0
package/src/index.ts +22 -0
package/src/translations.js +121 -0
package/stories/PlayerAccountSelfExclusion.stories.js +13 -0
package/tsconfig.json +6 -0

package/index.html ADDED Viewed

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+	<title>
+    player-account-self-exclusion-nd
+  </title>
+  <link rel="stylesheet" href="public/reset.css">
+  <script src='dist/player-account-self-exclusion-nd.js'></script>
+</head>
+<body>
+  <div class="webcomponent">
+    <player-account-self-exclusion-nd lang="en" supportemail="test@asf.com"></player-account-self-exclusion-nd>
+  </div>
+</body>
+</html>

package/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import './dist/player-account-self-exclusion-nd.js';

package/package.json ADDED Viewed

@@ -0,0 +1,39 @@
+{
+  "name": "@everymatrix/player-account-self-exclusion-nd",
+  "version": "1.37.4",
+  "main": "dist/player-account-self-exclusion-nd",
+  "svelte": "src/index.ts",
+  "scripts": {
+    "start": "sirv public",
+    "build": "cross-env NODE_ENV=production rollup -c",
+    "dev": "cross-env NODE_ENV=\"development\" rollup -c -w",
+    "validate": "svelte-check",
+    "test": "echo"
+  },
+  "devDependencies": {
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@rollup/plugin-typescript": "^6.0.0",
+    "@tsconfig/svelte": "^1.0.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-dev-server": "^0.4.3",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "rollup-plugin-uglify": "^6.0.4",
+    "svelte-check": "^1.0.0",
+    "svelte-preprocess": "^5.0.0",
+    "tslib": "^2.0.0",
+    "typescript": "^3.9.3"
+  },
+  "dependencies": {
+    "cross-env": "^7.0.3",
+    "sirv-cli": "^1.0.0",
+    "svelte": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "863252ebf7c846696d9b388f0d288993dbd5065c"
+}

package/public/favicon.png ADDED Viewed

Binary file

package/public/reset.css ADDED Viewed

@@ -0,0 +1,48 @@
+/* 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 ADDED Viewed

@@ -0,0 +1,67 @@
+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/player-account-self-exclusion-nd.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/PlayerAccountSelfExclusionNd.svelte ADDED Viewed

@@ -0,0 +1,371 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getDevice } from 'rvhelper';
+  import moment from 'moment';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { TRANSLATIONS } from './translations';
+  import '@vaadin/date-picker/vaadin-date-picker.js';
+  export let lang:string = 'en';
+  export let operator:string = 'Everymatrix';
+  export let supportemail:string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let translationurl:string = '';
+  let customStylingContainer:HTMLElement;
+  let userAgent:string = window.navigator.userAgent;
+  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
+  let calendar:HTMLElement;
+  let permanentSelfExclusion:boolean = false;
+  let selfExclusionPeriod:string = '';
+  let selfExclusionExpiryDate:string = '';
+  let currentDate:Date = new Date();
+  let minDate:string;
+  let maxDate:string;
+  const setTranslationUrl = ():void => {
+    let url:string = translationurl;
+    fetch(url).then((res:any) => res.json())
+    .then((res) => {
+      Object.keys(res).forEach((item:any):void => {
+        addNewMessages(item, res[item]);
+      });
+    }).catch((err:any) => {
+      console.log(err);
+    });
+  }
+  Object.keys(TRANSLATIONS).forEach((item:any) => {
+    addNewMessages(item, TRANSLATIONS[item]);
+  });
+  minDate = moment(currentDate.setDate(currentDate.getDate())).add(6, 'M').format('YYYY-MM-DD');
+  maxDate = moment(currentDate.setDate(currentDate.getDate())).add(5, 'y').format('YYYY-MM-DD');
+  selfExclusionExpiryDate = minDate;
+  // Toggle permanent self exclusion
+  const togglePermanentSelfExclusion = () => {
+    if (permanentSelfExclusion == false) {
+      permanentSelfExclusion = true;
+    } else {
+      permanentSelfExclusion = false;
+    }
+  }
+  // Set self exclusion period
+  const setSelfExclusionPeriod = (date?:string) => {
+    if (permanentSelfExclusion == true) {
+      selfExclusionPeriod = 'SelfExclusionPermanent';
+    } else {
+      selfExclusionPeriod = 'SelfExclusionUntilSelectedDate';
+      if (date && date.length > 0) {
+        selfExclusionExpiryDate = date;
+      }
+    }
+  }
+  // Send self exclusion period and date
+  const saveSelfExclusion = (e):void => {
+    e.preventDefault();
+    setSelfExclusionPeriod();
+    window.postMessage({
+      type: 'SetSelfExclusion',
+      selfExclusionPeriod,
+      selfExclusionExpiryDate
+    }, window.location.href);
+  }
+  // Mobile back button
+  const toggleScreen = () => {
+    window.postMessage({type: 'PlayerAccountMenuActive', isMobile}, window.location.href);
+  }
+  const calendarHandler = (e:any) => {
+    setSelfExclusionPeriod(e.target.value);
+  }
+  const setCalendarEventListener = () => {
+    calendar.addEventListener('change', calendarHandler, false);
+  }
+  const setClientStyling = ():void => {
+    let sheet:HTMLElement = 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);
+      });
+  }
+  onMount(() => {
+    return () => {
+      calendar.removeEventListener('change', calendarHandler);
+    }
+  });
+  const initialLoad = () => {
+    setLocale(lang);
+  }
+  $: calendar && setCalendarEventListener();
+  $: lang && initialLoad();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: translationurl && setTranslationUrl();
+</script>
+<div bind:this={customStylingContainer}>
+  <form class="SelfExclusionWrapper {isMobile ? 'SelfExclusionWrapperMobile' : ''}">
+    {#if isMobile}
+      <div class="MenuReturnButton" on:click={() => toggleScreen()}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emw--color-primary, #22B04E);}</style></defs><g transform="translate(-20 -158)">
+          <g transform="translate(20 158)">
+            <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
+          </g></g>
+        </svg>
+        <h2 class="PlayerSelfExclusionTitleMobile">{$_('titleSelfExclusion')}</h2>
+      </div>
+    {/if}
+    <h2 class="PlayerSelfExclusionTitle {isMobile ? 'PlayerSelfExclusionTitleNone' : ''}">{$_('titleSelfExclusion')}</h2>
+    <div class="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}">
+      <p class="SelfExclusionDescriptionText">{$_('selfExclusionText1', { values: { operatorname: operator}})}</p>
+      <p class="SelfExclusionDescriptionText">{$_('selfExclusionText2')}</p>
+      <p class="SelfExclusionDescriptionText">{$_('selfExclusionText3', { values: { operatorname: operator}})}</p>
+      <p class="SelfExclusionDescriptionText">{$_('selfExclusionText4')} <a href="mailto:{supportemail}">{supportemail}</a></p>
+    </div>
+    <div class="SelfExclusionDateWrapper {isMobile ? 'SelfExclusionDateWrapperMobile' : ''}">
+      <label for="SelfExclusionDate">{$_('duration')}</label>
+      <vaadin-date-picker bind:this={calendar} min={minDate} max={maxDate} value={minDate}></vaadin-date-picker>
+    </div>
+    <div class="SelfExclusionRadioWrapper {isMobile ? 'SelfExclusionRadioWrapperMobile' : ''}">
+      <label class="SelfExclusionRadio">{$_('forever')}
+        <input type="Checkbox" on:click={() => togglePermanentSelfExclusion()}>
+        <span class="Checkmark" part="Checkmark"></span>
+      </label>
+    </div>
+    <div class="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}">
+      {#if permanentSelfExclusion}
+        <p class="SelfExclusionDescriptionText"><strong>{$_('permanentSelfExclusion')}</strong></p>
+      {:else}
+        <p class="SelfExclusionDescriptionText"><strong>{$_('temporarySelfExclusion', { values: { date: selfExclusionExpiryDate}})}</strong></p>
+      {/if}
+    </div>
+    <div class="SelfExclusionActionButtons {isMobile ? 'SelfExclusionActionButtonsMobile' : ''}">
+      <button class="SelfExclusionSave" on:click={(e) => saveSelfExclusion(e)}>{$_('save')}</button>
+    </div>
+  </form>
+</div>
+<style lang="scss">
+  .PlayerSelfExclusionTitle {
+    font-size: 26px;
+    color: var(--emfe-w-pam-color-primary, var(--emw--color-primary, #22B04E));
+    font-weight: 400;
+  }
+  .PlayerSelfExclusionTitleMobile {
+    font-size: var(--emw--font-size-large, 20px);
+    color: var(--emfe-w-pam-color-primary, var(--emw--color-primary, #22B04E));
+  }
+  .PlayerSelfExclusionTitleNone {
+    display: none;
+  }
+  .SelfExclusionWrapper {
+    background-color: var(--emfe-w-color-pale, var(--emw--color-gray-50, #F1F1F1));
+    color: var(--emfe-w-pam-color-primary, var(--emw--color-primary, #22B04E));
+    padding: 50px;
+    border-radius: 20px;
+    max-width: 760px;
+    &.SelfExclusionWrapperMobile {
+      padding: 20px 15px;
+      max-width: unset;
+    }
+  }
+  .MenuReturnButton{
+    color: var(--emw--color-gray-300, #58586B);
+    display: inline-flex;
+    align-items: center;
+    column-gap: 10px;
+    margin-bottom: 10px;
+  }
+  .SelfExclusionTitle {
+    font-size: 26px;
+    color: var(--emfe-w-pam-color-primary, var(--emw--color-primary, #22B04E));
+    font-weight: var(--emw--font-weight-bold, 700);
+    &.SelfExclusionTitleMobile {
+      font-size: var(--emw--font-size-large, 20px);
+    }
+  }
+  .SelfExclusionDescription {
+    color: var(--emw--color-gray-300, #58586B);
+    line-height: 24px;
+    &.SelfExclusionDescriptionMobile {
+      font-size: var(--emw--font-size-x-small, 12px);
+      line-height: 19px;
+    }
+    .SelfExclusionDescriptionText a {
+      color: var(--emfe-w-pam-color-primary, var(--emw--color-primary, #22B04E));
+    }
+  }
+  .SelfExclusionDateWrapper {
+    color: var(--emw--color-gray-300, #58586B);
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 16px;
+    position: relative;
+    width: 50%;
+    label {
+      font-size: var(--emw--font-size-small, 14px);
+      font-weight: 300;
+      padding-bottom: 5px;
+    }
+    input {
+      font-family: inherit;
+      width: 100%;
+      height: 44px;
+      border: 1px solid var(--emw--color-gray-100, #E6E6E6);
+      border-radius: 5px;
+      box-sizing: border-box;
+      padding: 5px 15px;
+      font-size: var(--emw--size-standard, 16px);
+      line-height: 18px;
+    }
+    &.SelfExclusionDateWrapperMobile {
+      width: 100%;
+    }
+  }
+  .SelfExclusionRadioWrapper {
+    display: block;
+    position: relative;
+    padding: 4px 0 0 0;
+    margin-bottom: 16px;
+    font-size: var(--emw--size-standard, 16px);
+    user-select: none;
+    line-height: 18px;
+    label {
+      font-size: var(--emw--size-standard, 16px);
+      cursor: pointer;
+      padding-left: 35px;
+    }
+    input {
+      font-family: inherit;
+      position: absolute;
+      opacity: 0;
+      cursor: pointer;
+      height: 0;
+      width: 0;
+    }
+    .Checkmark {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 25px;
+      width: 25px;
+      background-color: var(--emw--color-gray-100, #E6E6E6);
+      border-radius: 50%;
+    }
+    input:checked ~ .Checkmark {
+      background-color: var(--emfe-w-pam-color-primary, var(--emw--color-primary, #22B04E));
+    }
+    .Checkmark:after {
+      content: "";
+      position: absolute;
+      display: none;
+      left: 9px;
+      top: 5px;
+      width: 5px;
+      height: 10px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+    input:checked ~ .Checkmark:after {
+      display: block;
+    }
+    &.SelfExclusionRadioWrapperMobile {
+      label {
+        font-family: inherit;
+        font-size: var(--emw--font-size-x-small, 12px);
+      }
+    }
+  }
+  .SelfExclusionActionButtons {
+    margin-top: 40px;
+    width: 50%;
+    .SelfExclusionSave {
+      cursor: pointer;
+      font-family: var(--emw--button-typography);
+      border-radius: 5px;
+      width: 100%;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-transform: uppercase;
+      transition-duration: 0.3s;
+      box-sizing: border-box;
+      background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));
+      border: 2px solid var(--emw--button-border-color, #0E5924);
+      border-radius: 50px;
+      padding: 30px 0;
+      font-size: var(--emw--font-size-large, 20px);
+      color: var(--emw--button-text-color, #FFFFFF);
+    }
+    &.SelfExclusionActionButtonsMobile {
+      width: 100%;
+      grid-template-columns: 1fr 1fr;
+      .SelfExclusionSave {
+        height: 40px;
+        font-size: var(--emw--font-size-small, 14px);
+        padding: 20px 0;
+      }
+    }
+  }
+</style>

package/src/i18n.js ADDED Viewed

@@ -0,0 +1,27 @@
+import {
+  dictionary,
+  locale,
+  addMessages,
+  _
+} from 'svelte-i18n';
+function setupI18n({ withLocale: _locale, translations }) {
+  locale.subscribe((data) => {
+    if (data == null) {
+      dictionary.set(translations);
+      locale.set(_locale);
+    }
+  }); // maybe we will need this to make sure that the i18n is set up only once
+  /*dictionary.set(translations);
+  locale.set(_locale);*/
+}
+function addNewMessages(lang, dict) {
+  addMessages(lang, dict);
+}
+function setLocale(_locale) {
+  locale.set(_locale);
+}
+export { _, setupI18n, addNewMessages, setLocale };

package/src/index.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import PlayerAccountSelfExclusion from './PlayerAccountSelfExclusionNd.svelte';
+function safeDecorator(fn) {
+  // eslint-disable-next-line func-names
+  return function(...args) {
+    try {
+      return fn.apply(this, args);
+    } catch (error) {
+      if (
+        error instanceof DOMException &&
+        error.message.includes('has already been used with this registry') || error.message.includes('Cannot define multiple custom elements with the same tag name')
+      ) {
+        return false;
+      }
+      throw error;
+    }
+  };
+}
+customElements.define = safeDecorator(customElements.define);
+!customElements.get('player-account-self-exclusion-nd') && customElements.define('player-account-self-exclusion-nd', PlayerAccountSelfExclusion);
+export default PlayerAccountSelfExclusion;