accomadesc 0.3.1 → 0.3.2

package/dist/ContactForm.svelte

@@ -82,6 +82,10 @@
   let disabled = $derived(preview || errored || successfullySent);
 </script>
 
+{#if sending}
+  <Spinner />
+{/if}
+
 <div class="wrapper">
   {#if explainer}
     <div class="explainer">{@html translateFunc ? translateFunc(explainer) : ''}</div>
@@ -147,9 +151,6 @@
       />
     </div>
   </form>
-  {#if sending}
-    <Spinner />
-  {/if}
 </div>
 
 <style>

package/dist/PageComponent.svelte

@@ -14,6 +14,8 @@
   import { fade } from 'svelte/transition';
   import Icon from './basic/Icon.svelte';
   import { page } from '$app/state';
+  import Button from './basic/Button.svelte';
+  import { onMount } from 'svelte';
 
   let {
     hero,
@@ -56,17 +58,22 @@
     }
   };
 
+  let theme = $state('light');
+  onMount(() => {
+    if (window) {
+      const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
+      if (prefersDarkMode) {
+        theme = 'dark';
+      }
+    }
+  });
+
   let hamburgerOpen = $state(false);
   let pageWidth = $state(0);
 </script>
 
 <svelte:head>
-  <title
-    >{translateFunc && pageTitle
-      ? translateFunc(pageTitle)
-      : //TODO default to something here?
-        ''}</title
-  >
+  <title>{translateFunc && pageTitle ? translateFunc(pageTitle) : ''}</title>
 </svelte:head>
 
 {#snippet navbar(nav: Nav)}
@@ -101,7 +108,22 @@
   </div>
 {/snippet}
 
-<div class="page-wrapper" bind:clientWidth={pageWidth}>
+{#snippet themeswitcher()}
+  <div class="theme" class:hero={!!hero}>
+    {#if theme == 'light'}
+      <Button iconName="moon" clicked={() => (theme = 'dark')} />
+    {:else}
+      <Button iconName="sun" clicked={() => (theme = 'light')} />
+    {/if}
+  </div>
+{/snippet}
+
+<div
+  class="page-wrapper"
+  bind:clientWidth={pageWidth}
+  class:light={theme == 'light'}
+  class:dark={theme == 'dark'}
+>
   {#if hero}
     <header class="hero-image">
       <Photo photoPath={hero.photoPath} alt="Hero Image" eager={true} />
@@ -192,9 +214,20 @@
       {/each}
     </fieldset>
   {/if}
+  {@render themeswitcher()}
 </div>
 
 <style>
+  .theme {
+    position: absolute;
+    top: 7rem;
+    right: 0.5rem;
+  }
+
+  .theme.hero {
+    top: 0.5rem;
+  }
+
   div.section-wrapper {
     margin-bottom: 2rem;
     width: 100%;

package/dist/Pricing.svelte

@@ -8,7 +8,6 @@
     PricingEntry,
     PricingColumn,
   } from './types.js';
-  import type { Dinero, DineroSnapshot } from 'dinero.js';
 
   let filteredRanges: PricingRange[] = $state([]);
   let {
@@ -47,10 +46,7 @@
     minNumNights: 'text-align:right;',
   };
 
-  const formatAdditionalPersonPrice = (
-    price: Dinero<number> | DineroSnapshot<number>,
-    termsRef: string | undefined,
-  ): string => {
+  const formatAdditionalPersonPrice = (price: number, termsRef: string | undefined): string => {
     if (formatFunc && translateFunc) {
       let terms = '';
       if (termsRef) terms = translateFunc(termsRef);

package/dist/PricingShort.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
   import { DateTime } from 'luxon';
-  import { add, allocate, dinero, multiply, greaterThan, lessThan, type Dinero } from 'dinero.js';
-  import { EUR } from '@dinero.js/currencies';
   import type { I18nFacade, PricingShortContent, PricingEntry } from './types.js';
 
   let {
@@ -27,39 +25,34 @@
     });
   });
 
-  let calculatedMinimum = $state(dinero({ amount: Number.MAX_SAFE_INTEGER, currency: EUR }));
-  let calculatedMaximum = $state(dinero({ amount: 0, currency: EUR }));
+  let calculatedMinimum = $state(Number.MAX_SAFE_INTEGER);
+  let calculatedMaximum = $state(0);
 
-  const calcAverage = (entry: PricingEntry): Dinero<number> | undefined => {
-    let avg: Dinero<number> | undefined;
+  const calcAverage = (entry: PricingEntry): number | undefined => {
     if (entry && entry.firstNightPrice && entry.perNightPrice && entry.minNumberOfNights) {
-      const fnp = dinero(entry.firstNightPrice);
-      const pnp = dinero(entry.perNightPrice);
-
-      [avg] = allocate(
-        add(multiply(pnp, entry.minNumberOfNights - 1), fnp),
-        new Array(entry.minNumberOfNights).fill(1),
-      );
+      const fnp = entry.firstNightPrice;
+      const pnp = entry.perNightPrice;
+      const oda = (entry.minNumberOfNights - 1) * pnp;
+      const avg = (oda + fnp) / entry.minNumberOfNights;
+      return Math.round(avg);
     } else if (entry && entry.firstNightPrice && entry.perNightPrice) {
-      const fnp = dinero(entry.firstNightPrice);
-      const pnp = dinero(entry.perNightPrice);
-
-      [avg] = allocate(add(pnp, fnp), [1, 1]);
+      const avg = (entry.firstNightPrice + entry.perNightPrice) / 2;
+      return Math.round(avg);
     } else if (entry && entry.perNightPrice) {
-      avg = dinero(entry.perNightPrice);
+      return entry.perNightPrice;
     }
-    return avg;
+    return;
   };
 
   $effect(() => {
     [...filteredEntries, ...staticRanges].forEach((fe) => {
       let entry = fe.entry;
-      let avg: Dinero<number> | undefined = calcAverage(entry);
+      let avg: number | undefined = calcAverage(entry);
       if (avg) {
-        if (greaterThan(avg, calculatedMaximum)) {
+        if (avg > calculatedMaximum) {
           calculatedMaximum = avg;
         }
-        if (lessThan(avg, calculatedMinimum)) {
+        if (avg < calculatedMinimum) {
           calculatedMinimum = avg;
         }
       }
@@ -68,10 +61,10 @@
     if (global) {
       let globalAvg = calcAverage(global);
       if (globalAvg) {
-        if (greaterThan(globalAvg, calculatedMaximum)) {
+        if (globalAvg > calculatedMaximum) {
           calculatedMaximum = globalAvg;
         }
-        if (lessThan(globalAvg, calculatedMinimum)) {
+        if (globalAvg < calculatedMinimum) {
           calculatedMinimum = globalAvg;
         }
       }

package/dist/basic/Button.svelte

@@ -119,7 +119,7 @@
         event.preventDefault();
       }
 
-      if (event.keyCode === 13 || event.keyCode === 32) {
+      if (event.key == ' ' || event.key == 'Enter') {
         activated = false;
       }
     }
@@ -132,7 +132,7 @@
       if (preventDefault) {
         event.preventDefault();
       }
-      if (event.keyCode === 13 || event.keyCode === 32) {
+      if (event.key == ' ' || event.key == 'Return') {
         activated = true;
       }
     }

package/dist/basic/Spinner.svelte

@@ -38,16 +38,6 @@
   </div>
 </div>
 
-<svelte:head>
-  {#if !inline}
-    <style>
-      body {
-        overflow: hidden;
-      }
-    </style>
-  {/if}
-</svelte:head>
-
 <style>
   div.background {
     height: 100vh;

package/dist/basic/icons.js

@@ -408,6 +408,8 @@ export const getIcon = (name, color = 'black') => {
         not: `<svg width="100%" height="100%" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="30" cy="30" r="26" stroke="var(--icon-not-color, ${color})" stroke-width="8" /><line x1="12.8669" y1="13.2106" x2="48.8669" y2="50.2106" stroke="var(--icon-not-color, ${color})" stroke-width="8" /></svg>`,
         picLinkExt: `<svg width="100%" height="100%" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M38 42V38H30V34H38V30L44 36L38 42ZM24 36C24 31.6 26.4 27.8 30 25.6C29.8 24.6 29 24 28 24H16V20H20C21.2 20 22 19.2 22 18V14H26C28.2 14 30 12.2 30 10V9.2C35.8 11.6 40 17.2 40 24V24.6C41.4 25 42.6 25.8 43.8 26.8C44 26 44 25 44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 35 13 44 24 44C25 44 26 44 26.8 43.8C25 41.6 24 39 24 36ZM22 39.8C14 38.8 8 32.2 8 24C8 22.8 8.2 21.6 8.4 20.4L18 30V32C18 34.2 19.8 36 22 36V39.8Z" fill="var(--external-link-font-color, ${color})"/></svg>`,
         picLink: `<svg width="100%" height="100%" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 6V10H4V32H26V22H30V34C30 34.5304 29.7893 35.0391 29.4142 35.4142C29.0391 35.7893 28.5304 36 28 36H2C1.46957 36 0.960859 35.7893 0.585786 35.4142C0.210714 35.0391 0 34.5304 0 34V8C0 7.46957 0.210714 6.96086 0.585786 6.58579C0.960859 6.21071 1.46957 6 2 6H14ZM36 0V18L28.412 10.414L16.414 22.414L13.586 19.586L25.584 7.586L18 0H36Z" fill="var(--picture-link-font-color, ${color})"/></svg>`,
+        moon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"><g fill="${color}" fill-opacity="0"><path d="M15.22 6.03l2.53 -1.94l-3.19 -0.09l-1.06 -3l-1.06 3l-3.19 0.09l2.53 1.94l-0.91 3.06l2.63 -1.81l2.63 1.81l-0.91 -3.06Z"><animate fill="freeze" attributeName="fill-opacity" begin="0.7s" dur="0.4s" values="0;1"/></path><path d="M19.61 12.25l1.64 -1.25l-2.06 -0.05l-0.69 -1.95l-0.69 1.95l-2.06 0.05l1.64 1.25l-0.59 1.98l1.7 -1.17l1.7 1.17l-0.59 -1.98Z"><animate fill="freeze" attributeName="fill-opacity" begin="1.1s" dur="0.4s" values="0;1"/></path></g><path fill="${color}" fill-opacity="0" stroke="${color}" stroke-dasharray="56" stroke-dashoffset="56" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 6c0 6.08 4.92 11 11 11c0.53 0 1.05 -0.04 1.56 -0.11c-1.61 2.47 -4.39 4.11 -7.56 4.11c-4.97 0 -9 -4.03 -9 -9c0 -3.17 1.64 -5.95 4.11 -7.56c-0.07 0.51 -0.11 1.03 -0.11 1.56Z"><animate fill="freeze" attributeName="fill-opacity" begin="1.5s" dur="0.5s" values="0;1"/><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="56;0"/></path></svg>`,
+        sun: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16"><path fill="${color}" d="M8 11a3 3 0 1 1 0-6a3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8a4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/></svg>`,
     };
     return svgs[name];
 };

package/dist/occuplan/OccuPlanPicker.svelte

@@ -152,7 +152,7 @@
     }
   });
 
-  const requestHovering = (d: DateTime) => {};
+  const requestHovering = (_: DateTime) => {};
 
   let monthGridTemplateColumns = `[rowLegend] 1fr [d1] 1fr [d2] 1fr [d3] 1fr [d4] 1fr [d5] 1fr [d6] 1fr [d7] 1fr`;
 

package/dist/types.d.ts

@@ -1,4 +1,3 @@
-import { type Dinero, type DineroSnapshot } from 'dinero.js';
 import type { FirstMonth, OccuplanTranslations } from './occuplan/state.svelte.js';
 import type { DateTime, MonthNumbers, WeekdayNumbers } from 'luxon';
 import type { CookieType, Translation as CookieTranslation } from 'gdpr-cooco-banner';
@@ -170,14 +169,14 @@ export interface StaticPricingRange {
     entry: PricingEntry;
 }
 export interface PricingEntry {
-    firstNightPrice?: DineroSnapshot<number>;
-    perNightPrice: DineroSnapshot<number>;
+    firstNightPrice?: number;
+    perNightPrice: number;
     numberOfGuestsBase?: number;
     numberOfGuestsMax?: number;
     minNumberOfNights?: number;
-    additionalPersonPrice1?: DineroSnapshot<number>;
-    additionalPersonPrice2?: DineroSnapshot<number>;
-    additionalPersonPrice3?: DineroSnapshot<number>;
+    additionalPersonPrice1?: number;
+    additionalPersonPrice2?: number;
+    additionalPersonPrice3?: number;
     additionalPersonText1?: string;
     additionalPersonText2?: string;
     additionalPersonText3?: string;
@@ -395,7 +394,7 @@ export interface I18nFacade {
     calendarTranslation?: OccuplanTranslations;
     translateFunc?: (ref: string) => string;
     formatFunc?: (formatter: string, props: Record<string, any>) => string;
-    formatMoneyFunc?: (d: Dinero<number> | DineroSnapshot<number>) => string;
+    formatMoneyFunc?: (d: number) => string;
     formatDateFunc?: (d: DateTime | string) => string;
     updateCurrentLang?: (lang: string) => void;
 }

package/dist/types.js

@@ -1,4 +1,3 @@
-import {} from 'dinero.js';
 export const DEFAULT_TEXT_FONT_SIZE = '1rem';
 export const DEFAULT_HEADERS_FONT_SIZE = '1.5rem';
 export const DEFAULT_EXT_HEADERS_1_FONT_SIZE = '3.2rem';
@@ -14,6 +13,7 @@ export const PRICING_COLUMNS = [
     'minNumNights',
 ];
 export const FORMAT_TEMPLATE_NAMES = [
+    'locale',
     'dateFormat',
     'monthHeader',
     'nothingAvailable',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "accomadesc",
-	"version": "0.3.1",
+	"version": "0.3.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build --minify false && npm run package",
@@ -59,7 +59,6 @@
 		"@fontsource/raleway": "^5.2.5",
 		"@twicpics/components": "^0.31.4",
 		"@types/leaflet": "^1.9.17",
-		"dinero.js": "2.0.0-alpha.14",
 		"leaflet": "^1.9.4",
 		"luxon": "^3.6.1"
 	},