tecitheme 0.2.6 → 0.2.7

package/components/CountrySelector.svelte

@@ -1,35 +1,46 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-  import Modal from "./Modal.svelte";
+  import Modal from './Modal.svelte';
 
   export let resellerModal = true;
-  export let selection = "sel";
+  export let selection = 'sel';
   export let allowContinue = false;
-  let modal;
 
-  let modalData = {
-    title: "",
-    text: "",
-    modalContent:
-      "<h2 class='text-lg leading-6 font-medium text-gray-900'>Reseller Required</h2><div class='mt-2 px-7 py-3'><p class='text-sm text-gray-500'>Thunderhead cannot sell to you directly, you must use the authorized reseller for your region.</p></div><div class='items-center px-4 py-3'><a href='https://www.thunderheadeng.com/pyrosim/pyrosim-licensing/#r{resellerIndex+1}' id='ok-btn' class='px-4 py-2 bg-teci-blue-light text-white text-base font-medium w-full shadow-sm hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'>Reseller Contact Information</a></div>",
-  };
+  let modal;
+  let modalData;
   let resellerIndex = -1;
   let resellerArray = [
-    ["BE", "NL", "LU"],
-    ["CN", "HK"],
-    ["CZ", "SK"],
-    ["EG", "JO", "LB", "OM", "QA", "SA", "AE"],
-    ["FR"],
-    ["DE", "CH", "AT", "LI"],
-    ["IN", "BD", "LK", "CM", "BT", "MM"],
-    ["IT", "HU"],
-    ["JP"],
-    ["KR"],
-    ["PL"],
-    ["RU", "AM", "AZ", "BY", "GE", "KZ", "KG", "MD", "TJ", "TM", "UA", "UZ"],
-    ["RO"],
-    ["SG", "MY", "ID", "VN"],
-    ["ES"],
+    ['BE', 'NL', 'LU'],
+    ['CN', 'HK'],
+    ['CZ', 'SK'],
+    ['EG', 'JO', 'LB', 'OM', 'QA', 'SA', 'AE'],
+    ['FR'],
+    ['DE', 'CH', 'AT', 'LI'],
+    ['IN', 'BD', 'LK', 'CM', 'BT', 'MM'],
+    ['IT', 'HU'],
+    ['JP'],
+    ['KR'],
+    ['PL'],
+    ['RU', 'AM', 'AZ', 'BY', 'GE', 'KZ', 'KG', 'MD', 'TJ', 'TM', 'UA', 'UZ'],
+    ['RO'],
+    ['SG', 'MY', 'ID', 'VN'],
+    ['ES'],
+  ];
+  let resellerLinks = [
+    'belgium-netherlands-and-luxembourg',
+    'china-and-hong-kong',
+    'czech-republic-and-slovak-republic',
+    'egypt-jordan-lebanon-oman-qatar-saudi-arabia-united-arab-emirates',
+    'france-and-french-language-customers-in-other-regions',
+    'germany-switzerland-austria-and-liechtenstein',
+    'india-bangladesh-sri-lanka-nepal-bhutan-myanmar',
+    'italy-hungary',
+    'japan',
+    'korea',
+    'poland-ukraine',
+    'russia-and-cis',
+    'romania',
+    'singapore-malaysia-indonesia-and-vietnam',
+    'spain',
   ];
 
   function isReseller() {
@@ -39,9 +50,9 @@
 
   function handleSelection() {
     if (resellerModal) {
-      if (selection != "sel" && !isReseller()) {
+      if (selection != 'sel' && !isReseller()) {
         allowContinue = true;
-      } else if (selection != "sel" && isReseller()) {
+      } else if (selection != 'sel' && isReseller()) {
         modal.show();
         allowContinue = false;
       } else {
@@ -49,9 +60,17 @@
       }
     }
   }
+
+  $:modalData = {
+    modalContent: `<h2 class="text-lg leading-6 font-medium text-gray-900">Reseller Required</h2><div class="mt-2 px-7 py-3"><p class="text-sm text-gray-500">Thunderhead cannot sell to you directly, you must use the authorized reseller for your region.</p></div><div class="items-center px-4 py-3"><a href="https://www.thunderheadeng.com/partners#${resellerLinks[resellerIndex]}" id="ok-btn" class="px-4 py-2 bg-teci-blue-light text-white text-base font-medium w-full shadow-sm hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Reseller Contact Information</a></div>`,
+  };
 </script>
 
-<select name="card_country" bind:value={selection} on:change={handleSelection}>
+<select
+  name="card_country"
+  bind:value="{selection}"
+  on:change="{handleSelection}"
+>
   <option value="sel">Select Your Country</option>
   <option value="AI">Anguilla</option>
   <option value="AR">Argentina</option>
@@ -141,4 +160,4 @@
   <option value="VN">Viet Nam</option>
 </select>
 
-<Modal bind:this={modal} bind:data={modalData} />
+<Modal bind:this="{modal}" bind:data="{modalData}" />

package/components/Modal.svelte

@@ -2,10 +2,10 @@
   export let data;
   let shown = false;
 
-  function show() {
+  export function show() {
     shown = true;
   }
-  function hide() {
+  export function hide() {
     shown = false;
   }
 </script>

package/components/Modal.svelte.d.ts

@@ -3,9 +3,13 @@
 /** @typedef {typeof __propDef.slots}  ModalSlots */
 export default class Modal extends SvelteComponentTyped<{
     data: any;
+    show?: () => void;
+    hide?: () => void;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
+    get show(): () => void;
+    get hide(): () => void;
 }
 export type ModalProps = typeof __propDef.props;
 export type ModalEvents = typeof __propDef.events;
@@ -14,6 +18,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         data: any;
+        show?: () => void;
+        hide?: () => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "svelte": true,
   "devDependencies": {
     "@jsdevtools/rehype-toc": "^3.0.2",