@everymatrix/casino-wagering-bonus-slider-controller 0.0.383

package/src/CasinoWageringBonusSliderController.svelte

@@ -0,0 +1,549 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  import {onMount} from "svelte";
+  import { getDevice } from 'rvhelper';
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { WageringBonusSliderTranslations } from './translations';
+  import { EventSourcePolyfill } from 'event-source-polyfill'
+  import crownSvg from './images/crown.svg';
+  import '@everymatrix/general-icon-progress-bar';
+
+  export let endpoint:string;
+  export let session:string;
+  export let lang:string='en';
+  export let numberofrecords:string='5';
+  export let looptime:string= '5';
+
+
+
+  let isLoading:boolean = true;
+  let isLoggedIn:boolean = false;
+  let userAgent:string = window.navigator.userAgent;
+  let isFirst:boolean = true;
+  let isLast:boolean = false;
+  let slideAutoInterval;
+  let wageringList:any;
+  let currentWagerIdx:number=0;
+  let wageringBonusUpdateEventSource:any;
+  /*
+  * flag the wagering bonst updater status
+  * */
+  let startingWageringBonusUpdater;
+  /*
+  wageringbonus parameters
+  * */
+  let wageringBonusSearchParams:string;
+
+  let wagerSlider:HTMLElement;
+  let animatorRef:HTMLElement;
+  let xDown:any = null;
+  let yDown:any = null;
+  let transformFromValue:string = '0';
+  let transformToValue:string = '100%';
+  let transistionTime = '1';
+  let isIconMode = false;
+
+
+  setupI18n({ withLocale: 'en', translations: {}});
+  Object.keys(WageringBonusSliderTranslations).forEach((item) => {
+    addNewMessages(item, WageringBonusSliderTranslations[item]);
+  });
+  const setActiveLanguage = () => {
+    setLocale(lang);
+  }
+
+  const parseWageringInfo = (wageringInfo:any)=>{
+    let maxLevel:number = 0;
+    for(let level of (wageringInfo.levels||[])){
+      let maxRepeats = level.maxRepeats || 1;
+      maxLevel += maxRepeats;
+    }
+    let currentLevelInfo = wageringInfo.currentLevel;
+    let wageringBonus:any = {
+      maxLevel: maxLevel,
+      bonusWalletID: wageringInfo.bonusWalletID,
+      levelIncrement: currentLevelInfo.levelIncrement,
+      gap: currentLevelInfo.gap,
+      currentStep: (currentLevelInfo.levelIncrement - currentLevelInfo.gap),
+      title: wageringInfo.title,
+      type: wageringInfo.type,
+      status: wageringInfo.status
+    }
+    return wageringBonus;
+  }
+
+  const parseWageringBonus = (wageringBonus:any) =>{
+    wageringList = [];
+    for(let item of wageringBonus.items){
+      wageringList.push(parseWageringInfo(item));
+    }
+    currentWagerIdx = 0;
+  }
+
+  const slideAuto = () => {
+    if(!wageringList || wageringList.length === 0) return;
+    currentWagerIdx = (currentWagerIdx + 1) % wageringList.length;
+    if(isLast && looptime !='0'){
+      hideSlider();
+    }
+  }
+  const setSlideAutoInterval = () => {
+    clearInterval(slideAutoInterval);
+    slideAutoInterval = setInterval(() => {
+      if(wageringList){
+        slideAuto();
+      }
+    }, Number(looptime) * 1000);/**/
+  }
+  const slideTo = (idxTo) =>{
+    setSlideAutoInterval();
+    wagerSlider.style.setProperty(`--transformFromValue`, idxTo > 0 ? '-100%' : '100%');
+    wagerSlider.style.setProperty(`--transformToValue`, idxTo > 0 ? '100%' : '-100%');
+    if(idxTo > 0 && isLast || (idxTo < 0 && isFirst)){
+      return;
+    }
+    currentWagerIdx += idxTo;
+    currentWagerIdx = currentWagerIdx < 0 ? currentWagerIdx = 0 : currentWagerIdx;
+    currentWagerIdx = currentWagerIdx == wageringList.length ? currentWagerIdx = wageringList.length - 1 : currentWagerIdx;
+  }
+  const showSlider = () => {
+    isIconMode = false;
+    setSlideAutoInterval();
+  }
+
+  const hideSlider = () => {
+    isIconMode = true;
+    currentWagerIdx = 0;
+    isFirst = true;
+    isLast = wageringList.length < 2;
+    clearInterval(slideAutoInterval);
+
+    window.postMessage({type: 'onWagingBonusSliderHide'}, window.location.href);
+  }
+  const updateWageringBonusByIdx=(idx:number)=>{
+    let wageringBonus = wageringList[idx];
+    if(!wageringBonus){
+      return;
+    }
+  }
+
+  const parseWageringBonusUpdateInfo = (updateItems)=>{
+    wageringList.forEach((item)=>{
+      let updateItem = updateItems[item.bonusWalletID];
+      if(!updateItem) return;
+      item.gap = updateItem.gap;
+      item.levelIncrement = updateItem.levelIncrement;
+      item.status = updateItem.status;
+      item.currentStep = updateItem.levelIncrement - updateItem.gap;
+    });
+    wageringList = wageringList;
+  }
+  const wageringBonusUpdateMessageHandler = (message: any)=>{
+    if(!message.data){
+      return;
+    }
+    let messageData = message.data;
+    if(!messageData) return;
+    try{
+      let wageringBonusUpdateData = JSON.parse(messageData);
+      if(!wageringBonusUpdateData || !wageringBonusUpdateData.items){
+        return;
+      }
+      if(wageringBonusUpdateData.messageType === 'WageringProgressUpdate'){
+        parseWageringBonusUpdateInfo(wageringBonusUpdateData.items);
+      }
+    }catch (e){
+      console.log(e);
+    }
+  }
+  const isSessionInvalid =( session:String) =>{
+    if(!session || session =='false' || session == 'undefined'){
+      return true;
+    }
+  }
+  const startupWageringBonusChangeListener = (bonusIds)=>{
+    if(isSessionInvalid(session)){
+      return;
+    }
+    startingWageringBonusUpdater = true;
+    setTimeout(()=>{
+      startingWageringBonusUpdater = false;//to make sure only one eventsource work at the same time when query parameter changed
+    }, 1000)
+    if(wageringBonusUpdateEventSource){
+      wageringBonusUpdateEventSource.removeEventListener('message', wageringBonusUpdateMessageHandler);
+      wageringBonusUpdateEventSource.close();
+    }
+    let endpointURL:String = `${endpoint}/bonus/wagering/updates?bonusWalletIDs=${bonusIds}&XSessionId=${session}`;
+    if(!EventSource){
+      wageringBonusUpdateEventSource = new EventSourcePolyfill(endpointURL, {headers: {'accept': 'text/event-stream'}});
+    }else{
+      wageringBonusUpdateEventSource = new EventSource(endpointURL);
+    }
+    if(typeof(wageringBonusUpdateEventSource) != "undefined"){
+      wageringBonusUpdateEventSource.addEventListener('message', wageringBonusUpdateMessageHandler);
+    }
+  }
+  const loadData = (url:String) => {
+    if(!endpoint || !session){
+      return;
+    }
+    isLoading = true;
+    let wageringBonusUrl:any = new URL(`${url}/bonus/wagering`);
+    let reqHeaders = new Headers();
+    wageringBonusUrl.searchParams.append('language', lang);
+    wageringBonusUrl.searchParams.append('platform', getDevice(userAgent));
+    wageringBonusUrl.searchParams.append('status', 'active');
+    wageringBonusUrl.searchParams.append('pagination', `limit=${numberofrecords},offset=0`);
+
+    if (session) {
+      reqHeaders.append("X-SessionID", session);
+    }
+
+    let requestOptions = {
+      method: 'GET',
+      headers: reqHeaders,
+    };
+
+    fetch(wageringBonusUrl, requestOptions)
+      .then((res:any) => res.json())
+      .then((data:any) => {
+        wageringBonusSearchParams = wageringBonusUrl.searchParams.toString();
+        isLoading = false;
+        parseWageringBonus(data);
+        if(!wageringList || wageringList.length == 0 ){
+          return;
+        }
+        let bonusIds:string=wageringList.map((item)=>{
+          return item.bonusWalletID;
+        }).toString();
+        startupWageringBonusChangeListener(bonusIds);
+      });
+  }
+  const onWagingBonusTitleClick = (bonusWalletID) =>{
+    window.postMessage({type: 'onWageringBonusClick', bonusWalletID: bonusWalletID}, window.location.href);
+  }
+  const getTouches = (evt:any) => {
+    return evt.touches || evt.originalEvent.touches;
+  }
+  const handleTouchStart = (evt:any) => {
+    const firstTouch = getTouches(evt)[0];
+    xDown = firstTouch.clientX;
+    yDown = firstTouch.clientY;
+  };
+  const handleTouchMove = (evt:any) => {
+    if (!xDown || !yDown) return;
+
+    let xUp = evt.touches[0].clientX;
+    let yUp = evt.touches[0].clientY;
+
+    let xDiff = xDown - xUp;
+    let yDiff = yDown - yUp;
+
+    if (Math.abs(xDiff) > Math.abs(yDiff)) {
+      if (xDiff > 0) {
+        slideTo(1);
+      } else {
+        slideTo(-1);
+      }
+    }
+
+    xDown = null;
+    yDown = null;
+  };
+
+  const addEventListeners = () => {
+    wagerSlider.addEventListener('touchstart', handleTouchStart, {passive: true});
+    wagerSlider.addEventListener('touchmove', handleTouchMove, {passive: true});
+  }
+  const messageHandler=(e:any)=>{
+    if(!e.data){
+      //TODO
+      return;
+    }
+    if (e.data.type === 'UserSessionID') {
+      //TODO
+      //getData(endpoint, 0, tournamentsShownNumber);
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+    return () => {
+      window.removeEventListener('message', messageHandler, false);
+      wagerSlider.removeEventListener('touchstart', handleTouchStart);
+      wagerSlider.removeEventListener('touchmove', handleTouchMove);
+    }
+  });
+  $: endpoint && session && loadData(endpoint);
+  $: lang && setActiveLanguage();
+  $: looptime && setSlideAutoInterval();
+  $: wagerSlider && addEventListeners();
+  $: isFirst = currentWagerIdx == 0;
+  $: isLast =wageringList ?  currentWagerIdx == (wageringList.length - 1) : true;
+  $: currentWagerIdx > 0 && isLast && hideSlider();
+</script>
+<div class="WageringBonusWrapper" part="WageringBonusWrapper">
+  <div part="SliderWrapper" class="SliderWrapper {isIconMode ? 'HiddenWidget' : 'ShowWidget'}"
+       bind:this={wagerSlider}>
+    <div class="LeftArrow  {isFirst ? 'Disabled':''}" part="LeftArrow" on:click="{()=>slideTo(-1)}">
+      <svg part="LeftArrowSvg" width="7" height="14" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M3 7L1 4L3 1" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </div>
+    <div class="SliderCenter" part="WageringBonusContent">
+      <div class="Title Top" part="WageringBonusTitle">{$_('wageringSlider.title')}</div>
+      {#if wageringList}
+      <div class="WagerList" part="WageringBonusList">
+        {#each wageringList as wagerInfo, index}
+          <div class="WageringBonusInfo {currentWagerIdx!=index ? 'hiddenDiv' : 'shownDiv'}" part="WageringBonusInfo">
+            <div class='bonusName' style="display: table" part="WageringBonusTitleRow">
+
+              <div class="trophy">
+                <img alt="crown" part="Icon" class="MiniIcon" src="{crownSvg}" />
+              </div>
+              <!--div class="trophy" part="Trophy">
+                <svg width="26" height="26" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M12.7031 13.1696H3.75903V14.563H12.7031V13.1696Z" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M9.13451 9.41112C10.434 8.81214 12.5254 7.1421 12.5254 3.23095C12.5254 2.28679 12.4035 1.55583 12.1167 1H4.26398C3.97972 1.55583 3.85535 2.28679 3.85535 3.23095C3.85535 7.06088 5.94925 8.77153 7.24619 9.39589V11.7614H4.48986V13.1548H11.9695V11.7614H9.13451V9.41112Z" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M3.87819 2.29193H1.04573C1.04573 2.29193 0.312225 6.31983 4.72083 6.97465" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M12.5965 2.29193H15.429C15.429 2.29193 16.1625 6.31983 11.7513 6.97465" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M8.19302 2.65198L8.74124 4.09867L10.2869 4.17481L9.08134 5.14435L9.48743 6.63673L8.19302 5.78902L6.89861 6.63673L7.30216 5.14435L6.09912 4.17481L7.64226 4.09867L8.19302 2.65198Z" stroke="white" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div-->
+              <div class="gameInfo" part="WageringBonusTitleRow Title" on:click="{()=>onWagingBonusTitleClick(wagerInfo.bonusWalletID)}">
+                {wagerInfo.title}
+              </div>
+            </div>
+            <div class="ProgressBar bottom" part="ProgressBar">
+              <general-icon-progress-bar currentstep="{wagerInfo.currentStep}" status="{wagerInfo.status}"
+                                         total="{wagerInfo.levelIncrement}"
+                                         showaspercent="{wagerInfo.type == 'money'}" lang></general-icon-progress-bar>
+            </div>
+          </div>
+        {/each}
+      </div>
+      {/if}
+    </div>
+    <div part="RightRow" class="RightArrow  {isLast ? 'Disabled':''}" on:click="{()=>slideTo(1)}">
+      <svg width="7" height="14" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1 1L3 4L1 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </div>
+  </div>
+  <section id="animator" bind:this={animatorRef} part="Animator"
+           class="SliderIcon {isIconMode ? 'ShowWidget' : 'HiddenWidget'}" on:click="{() => showSlider()}">
+    <div class="svg" part="AnimatorIconWrapper">
+      <img alt="crown" part="Icon" class="MiniIcon" src="{crownSvg}" />
+    </div>
+    <div class="restoreButton" part="RestoreButton">
+      <svg width="6" height="10" viewBox="0 0 6 10"  fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M0.861997 5.75848L0 4.89648L4.30998 0.586501L5.17198 1.4485L1.7241 4.89638L5.17255 8.34484L4.31055 9.20683L0.862099 5.75838L0.861997 5.75848Z"/>
+      </svg>
+      <svg width="6" height="10" viewBox="0 0 6 10"  fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M0.861997 5.75848L0 4.89648L4.30998 0.586501L5.17198 1.4485L1.7241 4.89638L5.17255 8.34484L4.31055 9.20683L0.862099 5.75838L0.861997 5.75848Z"/>
+      </svg>
+    </div>
+  </section>
+</div>
+
+<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;
+  }
+  div{vertical-align: middle}
+  .WageringBonusWrapper, .SliderWrapper{
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    min-width: 150px;
+    min-height: 92px;
+    max-width: 188px;
+    max-height: 108px;
+  }
+  .WageringBonusWrapper{position: relative}
+  .SliderIcon{position: absolute; top: 0px; right: 0; cursor: pointer}
+  .ShowWidget{
+    transition: all 1s ease-in-out;
+    transform: translateX(0);
+    display: table;
+    opacity: 1;
+  }
+  .HiddenWidget{
+    transition: all 1s ease-in-out;
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  .SliderWrapper{
+    background: var(--emfe-w-color-black, #000000);
+    color: var(--emfe-w-color-white, #FFFFFF);
+    box-sizing: border-box;
+    border: 1px solid #FF8364;
+    background:
+      linear-gradient(90deg, rgba(40, 40, 40, 0.7) 0%,  #847c7c 26.06%,  #847c7c 72.19%, rgba(40, 40, 40, 0.7) 100%);
+    border-radius: 4px;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    display: table;
+  }
+  .LeftArrow, .RightArrow{
+    &.Disabled{
+      color: darkgrey;
+    }
+    padding: 3px;
+    height: calc(100%);
+    display: table-cell;
+    vertical-align: middle;
+    cursor: pointer;
+    color: #FF8364;
+  }
+  .LeftArrow{padding-right: 0px}
+  .RightArrow{padding-left: 0px}
+  .SliderCenter{
+    height: calc(100%);overflow: hidden;
+    .Title{
+      font-style: normal;
+      font-weight: 700;
+      font-size: 12px;
+      line-height: 12px;
+      text-align: center;
+      color: #FFD700;
+      margin: 5px auto 3px;
+    }
+    .WagerList{height: calc(100% - 20px); display: block; position: relative;
+      .hiddenDiv{//visibility: hidden;
+        transform: translateX(var(--transformToValue,  100%));
+        animation: slideOut 1s;
+        -moz-animation: slideOut 1s; /* Firefox */
+        -webkit-animation: slideOut 1s; /* Safari and Chrome */
+        -o-animation: slideOut 1s; /* Opera */
+      }
+      .shownDiv{
+        animation: slideIn 1.5s;
+        -moz-animation: slideIn 1.5s; /* Firefox */
+        -webkit-animation: slideIn 1.5s; /* Safari and Chrome */
+        -o-animation: slideIn 1.5s; /* Opera */
+      }
+      .WageringBonusInfo{
+        overflow: hidden;display: block;height: 100%;width: 100%;position: absolute;top: 0;
+        .trophy{
+          display: table-cell;vertical-align: middle;padding: 3px;
+          img.MiniIcon{width: 18px;height: 18px}
+        }
+        .bonusName{
+          height: calc(100% - 25px);
+          .gameInfo{
+            cursor: pointer;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 11px;
+            line-height: 13px;
+            display: table-cell;
+            align-items: center;
+            color: #FFFFFF;
+            vertical-align: middle;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+    .bottom{width: 100%;height: 20px;vertical-align: bottom;margin-bottom: 5px}
+  }
+  .svg {height: 12px;
+    img.MiniIcon{width: 14px;height: 14px}
+  }
+  .restoreButton{display: table}
+
+
+  @keyframes slideIn {
+    from {
+      opacity:0;
+      transform: translateX(var(--transformFromValue));
+    }
+    to {
+      opacity:1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideOut {
+    from {
+      opacity:1;
+      transform: translateX(0);
+    }
+    to {
+      opacity:0;
+      transform: translateX(var(--transformToValue,  100%));
+    }
+  }
+  @-moz-keyframes slideIn { /* Firefox */
+    from {
+      opacity:0;
+      transform: translateX(var(--transformFromValue,  100%));
+    }
+    to {
+      opacity:1;
+      transform: translateX(0);
+    }
+  }
+  @-moz-keyframes slideOut { /* Firefox */
+    from {
+      opacity:1;
+      transform: translateX(0);
+    }
+    to {
+      opacity:0;
+      transform: translateX(var(--transformToValue,  100%));
+    }
+  }
+  @-webkit-keyframes slideIn { /* Safari and Chrome */
+    from {
+      opacity:0;
+      transform: translateX(var(--transformFromValue,  0));
+    }
+    to {
+      opacity:1;
+      transform: translateX(0);
+    }
+  }
+  @-webkit-keyframes slideOut { /* Safari and Chrome */
+    from {
+      opacity:1;
+      transform: translateX(0);
+    }
+    to {
+      opacity:0;
+      transform: translateX(var(--transformToValue,  100%));
+    }
+  }
+  @-o-keyframes slideIn { /* Opera */
+    from {
+      opacity:0;
+      transform: translateX(var(--transformFromValue,  0));
+    }
+    to {
+      opacity:1;
+      transform: translateX(0);
+    }
+  }
+  @-o-keyframes slideOut { /* Opera */
+    from {
+      opacity:1;
+      transform: translateX(0);
+    }
+    to {
+      opacity:0;
+      transform: translateX(var(--transformToValue,  100%));
+    }
+  }
+</style>

package/src/i18n.js

@@ -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/images/crown.svg

@@ -0,0 +1,6 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1.67757 2.5647L3.72412 -1.25356e-07L5.77067 2.5647L3.72412 5.12939L1.67757 2.5647Z" fill="#FF8B03"/>
+    <rect x="0.468506" y="6.1134" width="6.55827" height="0.936896" fill="#FF8B03"/>
+    <path d="M7.49512 1.42889L0.4684 5.64492H7.02667L7.49512 1.42889Z" fill="#FFB82E"/>
+    <path d="M0 1.42889L7.02672 5.64492H0.468448L0 1.42889Z" fill="#FFD700"/>
+</svg>

package/src/index.ts

@@ -0,0 +1,4 @@
+import CasinoWageringBonusSliderController from './CasinoWageringBonusSliderController.svelte';
+
+!customElements.get('casino-wagering-bonus-slider-controller') && customElements.define('casino-wagering-bonus-slider-controller', CasinoWageringBonusSliderController);
+export default CasinoWageringBonusSliderController;

package/src/translations.js

@@ -0,0 +1,22 @@
+export const WageringBonusSliderTranslations = {
+  en: {
+    wageringSlider:{
+      title: '- Wagering Bonus -'
+    }
+  },
+  tr: {
+    wageringSlider:{
+      title: '- Wagering Bonus -'
+    }
+  },
+  el: {
+    wageringSlider:{
+      title: '- Wagering Bonus -'
+    }
+  },
+  ro: {
+    wageringSlider:{
+      title: '- Wagering Bonus -'
+    }
+  }
+}

package/stories/CasinoWageringSliderController.stories.js

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

package/tsconfig.json

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