@everymatrix/casino-betslip-indicator 0.0.367 → 0.0.369

package/src/CasinoBetslipIndicator.svelte

@@ -1,207 +1,207 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { 
-    onMount, 
-    get_current_component 
-  } from "svelte/internal";
-  import { isMobile } from 'rvhelper';
-
-  let userAgent:String = window.navigator.userAgent;
-  let betNumber: number = null;
-  let mobileView:Boolean = false;
-  let isLoading = true;
-  const thisComponent = get_current_component(); // dispatching events
-
-  const getInitialBetSlipContent = () => {
-      window.postMessage({
-        type: 'OMFE:getBetslipSelectionsCount',
-      }, '*');
-  };
-
-  const dispatchWcEvent = (name, detail) => {
-    thisComponent.dispatchEvent(
-      new CustomEvent(name, {
-        detail,
-        composed: true,
-        bubbles: true // propagate across the shadow DOM
-      })
-    );
-  };
-
-  const messageHandler = (e:any) => {
-    const { type, payload } = e.data;
-
-    if (e.data) {
-      switch(type) {
-        case 'OMFE:updateBetslipSelectionsCount':
-          betNumber = payload.count;
-          isLoading = false;
-          break;
-      }
-    }
-  }
-
-  onMount(() => {
-    getInitialBetSlipContent();
-
-    window.addEventListener('message', messageHandler, false);
-
-    if (isMobile(userAgent)) {
-      mobileView = true;
-    }
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-</script>
-
-
-{#if mobileView && betNumber > 0}
-  <button on:click={(e) => dispatchWcEvent("betslipClick", {})} class="betslipIndicator">
-    <small class="betslipIndicator__number">
-    {#if isLoading}
-      <div class="loader">Loading...</div>
-    {:else}
-      {betNumber}
-    {/if}
-    </small>
-    <svg version="1.1" id="Layer_1" class="betslipIndicator__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-      viewBox="0 0 64 100" style="enable-background:new 0 0 64 100;" xml:space="preserve">
-      <g>
-        <path d="M45,95c0,1.1,0.9,2,2,2h11c3.3,0,6-2.7,6-6V9c0-3.3-2.7-6-6-6H47c-1.1,0-2,0.9-2,2c0,7.2-5.8,13-13,13S19,12.2,19,5
-          c0-1.1-0.9-2-2-2H6C2.7,3,0,5.7,0,9v82c0,3.3,2.7,6,6,6h11c1.1,0,2-0.9,2-2c0-7.2,5.8-13,13-13S45,87.8,45,95z M32,78
-          c-8.6,0-15.9,6.4-16.9,15H6c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h9.1c1.2,9.3,9.7,15.9,19,14.8c7.7-1,13.8-7,14.8-14.8H58
-          c1.1,0,2,0.9,2,2v82c0,1.1-0.9,2-2,2h-9.1C47.9,84.4,40.6,78,32,78z"/>
-        <path d="M50.9,29.5H13.1c-0.8,0-1.5,0.9-1.5,2c0,1.1,0.7,2,1.5,2h37.8c0.8,0,1.5-0.9,1.5-2C52.4,30.4,51.7,29.5,50.9,29.5z"/>
-        <path d="M50.9,41.5H13.1c-0.8,0-1.5,0.9-1.5,2s0.7,2,1.5,2h37.8c0.8,0,1.5-0.9,1.5-2S51.7,41.5,50.9,41.5z"/>
-        <path d="M50.9,53.5H13.1c-0.8,0-1.5,0.9-1.5,2s0.7,2,1.5,2h37.8c0.8,0,1.5-0.9,1.5-2S51.7,53.5,50.9,53.5z"/>
-        <path d="M50.9,66.5H13.1c-0.8,0-1.5,0.9-1.5,2s0.7,2,1.5,2h37.8c0.8,0,1.5-0.9,1.5-2S51.7,66.5,50.9,66.5z"/>
-      </g>
-    </svg>
-  </button>
-{/if}
-
-
-<style lang="scss">
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  *,
-  *::before,
-  *::after {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    text-decoration: none;
-    outline: none;
-    box-sizing: border-box;
-  }
-
-
-  .betslipIndicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 15px 20px;
-    position: fixed;
-    bottom: 20%;
-    right: 20px;
-    color: #fff;
-    background: var(--emfe-w-color-primary, #D0046C);
-    border-radius: 50%;
-
-    &__icon {
-      display: flex;
-      width: 20px;
-      fill: var(--emfe-w-color-white, #FFFFFF);
-    }
-
-    &__number {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      right: 0px;
-      top: -10px;
-      width: 25px;
-      height: 25px;
-      background: var(--emfe-w-color-contrast, #07072A);
-      color: var(--emfe-w-color-white, #FFFFFF);
-      border-radius: 50%;
-    }
-  }
-
-  .loader {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: 2px;
-    margin: 100px auto;
-    width: 1em;
-    height: 1em;
-    border-radius: 50%;
-    position: relative;
-    text-indent: -9999em;
-    -webkit-animation: load4 1.3s infinite linear;
-    animation: load4 1.3s infinite linear;
-    -webkit-transform: translateZ(0);
-    -ms-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-
-  @-webkit-keyframes load4 {
-    0%,
-    100% {
-      box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
-    }
-    12.5% {
-      box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-    }
-    25% {
-      box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-    }
-    37.5% {
-      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
-    }
-    50% {
-      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
-    }
-    62.5% {
-      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
-    }
-    75% {
-      box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
-    }
-    87.5% {
-      box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
-    }
-  }
-  @keyframes load4 {
-    0%,
-    100% {
-      box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
-    }
-    12.5% {
-      box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-    }
-    25% {
-      box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-    }
-    37.5% {
-      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
-    }
-    50% {
-      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
-    }
-    62.5% {
-      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
-    }
-    75% {
-      box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
-    }
-    87.5% {
-      box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
-    }
-  }
-</style>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { 
+    onMount, 
+    get_current_component 
+  } from "svelte/internal";
+  import { isMobile } from 'rvhelper';
+
+  let userAgent:String = window.navigator.userAgent;
+  let betNumber: number = null;
+  let mobileView:Boolean = false;
+  let isLoading = true;
+  const thisComponent = get_current_component(); // dispatching events
+
+  const getInitialBetSlipContent = () => {
+      window.postMessage({
+        type: 'OMFE:getBetslipSelectionsCount',
+      }, '*');
+  };
+
+  const dispatchWcEvent = (name, detail) => {
+    thisComponent.dispatchEvent(
+      new CustomEvent(name, {
+        detail,
+        composed: true,
+        bubbles: true // propagate across the shadow DOM
+      })
+    );
+  };
+
+  const messageHandler = (e:any) => {
+    const { type, payload } = e.data;
+
+    if (e.data) {
+      switch(type) {
+        case 'OMFE:updateBetslipSelectionsCount':
+          betNumber = payload.count;
+          isLoading = false;
+          break;
+      }
+    }
+  }
+
+  onMount(() => {
+    getInitialBetSlipContent();
+
+    window.addEventListener('message', messageHandler, false);
+
+    if (isMobile(userAgent)) {
+      mobileView = true;
+    }
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+</script>
+
+
+{#if mobileView && betNumber > 0}
+  <button on:click={(e) => dispatchWcEvent("betslipClick", {})} class="betslipIndicator">
+    <small class="betslipIndicator__number">
+    {#if isLoading}
+      <div class="loader">Loading...</div>
+    {:else}
+      {betNumber}
+    {/if}
+    </small>
+    <svg version="1.1" id="Layer_1" class="betslipIndicator__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+      viewBox="0 0 64 100" style="enable-background:new 0 0 64 100;" xml:space="preserve">
+      <g>
+        <path d="M45,95c0,1.1,0.9,2,2,2h11c3.3,0,6-2.7,6-6V9c0-3.3-2.7-6-6-6H47c-1.1,0-2,0.9-2,2c0,7.2-5.8,13-13,13S19,12.2,19,5
+          c0-1.1-0.9-2-2-2H6C2.7,3,0,5.7,0,9v82c0,3.3,2.7,6,6,6h11c1.1,0,2-0.9,2-2c0-7.2,5.8-13,13-13S45,87.8,45,95z M32,78
+          c-8.6,0-15.9,6.4-16.9,15H6c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h9.1c1.2,9.3,9.7,15.9,19,14.8c7.7-1,13.8-7,14.8-14.8H58
+          c1.1,0,2,0.9,2,2v82c0,1.1-0.9,2-2,2h-9.1C47.9,84.4,40.6,78,32,78z"/>
+        <path d="M50.9,29.5H13.1c-0.8,0-1.5,0.9-1.5,2c0,1.1,0.7,2,1.5,2h37.8c0.8,0,1.5-0.9,1.5-2C52.4,30.4,51.7,29.5,50.9,29.5z"/>
+        <path d="M50.9,41.5H13.1c-0.8,0-1.5,0.9-1.5,2s0.7,2,1.5,2h37.8c0.8,0,1.5-0.9,1.5-2S51.7,41.5,50.9,41.5z"/>
+        <path d="M50.9,53.5H13.1c-0.8,0-1.5,0.9-1.5,2s0.7,2,1.5,2h37.8c0.8,0,1.5-0.9,1.5-2S51.7,53.5,50.9,53.5z"/>
+        <path d="M50.9,66.5H13.1c-0.8,0-1.5,0.9-1.5,2s0.7,2,1.5,2h37.8c0.8,0,1.5-0.9,1.5-2S51.7,66.5,50.9,66.5z"/>
+      </g>
+    </svg>
+  </button>
+{/if}
+
+
+<style lang="scss">
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  *,
+  *::before,
+  *::after {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    outline: none;
+    box-sizing: border-box;
+  }
+
+
+  .betslipIndicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 15px 20px;
+    position: fixed;
+    bottom: 20%;
+    right: 20px;
+    color: #fff;
+    background: var(--emfe-w-color-primary, #D0046C);
+    border-radius: 50%;
+
+    &__icon {
+      display: flex;
+      width: 20px;
+      fill: var(--emfe-w-color-white, #FFFFFF);
+    }
+
+    &__number {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      right: 0px;
+      top: -10px;
+      width: 25px;
+      height: 25px;
+      background: var(--emfe-w-color-contrast, #07072A);
+      color: var(--emfe-w-color-white, #FFFFFF);
+      border-radius: 50%;
+    }
+  }
+
+  .loader {
+    color: var(--emfe-w-color-white, #FFFFFF);
+    font-size: 2px;
+    margin: 100px auto;
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    position: relative;
+    text-indent: -9999em;
+    -webkit-animation: load4 1.3s infinite linear;
+    animation: load4 1.3s infinite linear;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+
+  @-webkit-keyframes load4 {
+    0%,
+    100% {
+      box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+    }
+    12.5% {
+      box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    }
+    25% {
+      box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    }
+    37.5% {
+      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    }
+    50% {
+      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    }
+    62.5% {
+      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+    }
+    75% {
+      box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+    }
+    87.5% {
+      box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+    }
+  }
+  @keyframes load4 {
+    0%,
+    100% {
+      box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+    }
+    12.5% {
+      box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    }
+    25% {
+      box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    }
+    37.5% {
+      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    }
+    50% {
+      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    }
+    62.5% {
+      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+    }
+    75% {
+      box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+    }
+    87.5% {
+      box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+    }
+  }
+</style>

package/src/index.ts

@@ -1,4 +1,4 @@
-import CasinoBetslipIndicator from './CasinoBetslipIndicator.svelte';
-
-!customElements.get('casino-betslip-indicator') && customElements.define('casino-betslip-indicator', CasinoBetslipIndicator);
-export default CasinoBetslipIndicator;
+import CasinoBetslipIndicator from './CasinoBetslipIndicator.svelte';
+
+!customElements.get('casino-betslip-indicator') && customElements.define('casino-betslip-indicator', CasinoBetslipIndicator);
+export default CasinoBetslipIndicator;

package/stories/CasinoBetslipIndicator.stories.js

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

package/tsconfig.json

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