accomadesc 0.0.13 → 0.1.0

package/dist/ContactForm.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+  import Spinner from './basic/Spinner.svelte';
+  import Button from './basic/Button.svelte';
+  import TextInput from './basic/TextInput.svelte';
+  import Notes from './basic/Notes.svelte';
+  import type { ContactFormContent, I18nFacade } from './types.js';
+
+  const {
+    userID,
+    endpoint,
+    explainer,
+    emailLabel,
+    nameLabel,
+    questionLabel,
+    submitText,
+    successfullySentText,
+    sentErroredText,
+    maxCharsAllowed = 300,
+    translateFunc,
+  }: ContactFormContent & I18nFacade = $props();
+
+  let name = $state('');
+  let email = $state('');
+  let question = $state('');
+  let successfullySent = $state(false);
+  let sending = $state(false);
+  let errored = $state(false);
+
+  const questionChanged = (value: string) => {
+    question = value;
+  };
+
+  let currentCharsCount = $derived(question.length);
+  let showMaxCharsMessage = $derived(currentCharsCount > maxCharsAllowed - 50);
+  let canSubmit: boolean = $derived(
+    name.length > 0 &&
+      email.length > 0 &&
+      question.length > 0 &&
+      question.length <= maxCharsAllowed,
+  );
+
+  const submitMessage = async (e: Event) => {
+    sending = true;
+    e.preventDefault();
+
+    try {
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          userID: userID,
+          email: email,
+          name: name,
+          question: question,
+        }),
+      });
+      if (response.status != 201) {
+        errored = true;
+        console.log('Error sending mail', response.status, response.statusText);
+      } else {
+        successfullySent = true;
+      }
+    } catch (e) {
+      console.log('An error occurred:', e);
+      errored = true;
+    }
+    sending = false;
+
+    setTimeout(() => {
+      errored = false;
+      successfullySent = false;
+    }, 15000);
+  };
+
+  let disabled = $derived(errored || successfullySent);
+</script>
+
+<div class="wrapper">
+  {#if explainer}
+    <div class="explainer">{@html translateFunc ? translateFunc(explainer) : ''}</div>
+  {/if}
+  <form onsubmit={submitMessage}>
+    <input type="hidden" value={userID} />
+    <label class:disabled>
+      {@html translateFunc ? translateFunc(nameLabel) : 'Name'}:
+      <TextInput type="text" marginForMessage={false} bind:value={name} enabled={!disabled} />
+    </label>
+    <label class:disabled>
+      {@html translateFunc ? translateFunc(emailLabel) : 'Email'}:
+      <TextInput type="email" marginForMessage={false} bind:value={email} enabled={!disabled} />
+    </label>
+    <label class="row-label"
+      ><div class:disabled>
+        {@html translateFunc
+          ? translateFunc(questionLabel)
+          : 'Your Message'}{#if showMaxCharsMessage}<span class="max-chars-message"
+            >&nbsp;({currentCharsCount}/{maxCharsAllowed})</span
+          >{/if}:
+      </div>
+
+      <Notes {disabled} changed={questionChanged} />
+    </label>
+    {#if successfullySent}
+      <div class="success">
+        {translateFunc ? translateFunc(successfullySentText) : 'Successfully Sent Email'}
+      </div>
+    {/if}
+    {#if errored}
+      <div class="error">
+        {translateFunc ? translateFunc(sentErroredText) : 'Error Occurred Sending Email'}
+      </div>
+    {/if}
+    <div class="button-wrapper">
+      <Button
+        enabled={canSubmit && !disabled}
+        text={translateFunc ? translateFunc(submitText) : 'Submit'}
+        type="submit"
+      />
+    </div>
+  </form>
+  {#if sending}
+    <Spinner />
+  {/if}
+</div>
+
+<style>
+  .wrapper {
+    background-color: var(--main-bg-color);
+    color: var(--main-font-color);
+
+    width: 100%;
+    display: flex;
+
+    padding: 1rem;
+    margin: 1rem;
+    :global(*) {
+      color: var(--main-font-color);
+    }
+  }
+
+  form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  label {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .row-label {
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  .max-chars-message {
+    font-weight: bolder;
+    color: var(--alert-font-color);
+  }
+
+  .success {
+    color: var(--accept-font-color);
+    font-weight: bolder;
+  }
+
+  .error {
+    color: var(--alert-font-color);
+    font-weight: bolder;
+  }
+
+  .disabled {
+    color: var(--font-disabled-color);
+  }
+</style>

package/dist/ContactForm.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ContactFormContent, I18nFacade } from './types.js';
+type $$ComponentProps = ContactFormContent & I18nFacade;
+declare const ContactForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContactForm = ReturnType<typeof ContactForm>;
+export default ContactForm;

package/dist/LeafletMap.svelte

@@ -5,7 +5,7 @@
   import 'leaflet/dist/images/marker-icon.png';
 
   import { onMount, onDestroy } from 'svelte';
-  import type { LeafletMapContent } from './types.ts';
+  import type { LeafletMapContent } from './types.js';
 
   let { lat, long, zoom, address = 'Achterstr. 4, 17459 Koserow' }: LeafletMapContent = $props();
 

package/dist/LeafletMap.svelte.d.ts

@@ -1,7 +1,7 @@
 import 'leaflet/dist/leaflet.css';
 import 'leaflet/dist/images/marker-shadow.png';
 import 'leaflet/dist/images/marker-icon.png';
-import type { LeafletMapContent } from './types.ts';
+import type { LeafletMapContent } from './types.js';
 declare const LeafletMap: import("svelte").Component<LeafletMapContent, {}, "">;
 type LeafletMap = ReturnType<typeof LeafletMap>;
 export default LeafletMap;

package/dist/Photo.svelte

@@ -2,7 +2,7 @@
   import LinkSvg from './svg/LinkSVG.svelte';
   import ExtLinkSvg from './svg/ExtLinkSVG.svelte';
   import { TwicImg } from '@twicpics/components/svelte5';
-  import type { PhotoContent, I18nFacade } from './types.ts';
+  import type { PhotoContent, I18nFacade } from './types.js';
 
   let {
     alt,

package/dist/Photo.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { PhotoContent, I18nFacade } from './types.ts';
-declare const Photo: import("svelte").Component<PhotoContent & I18nFacade, {}, "">;
+import type { PhotoContent, I18nFacade } from './types.js';
+type $$ComponentProps = PhotoContent & I18nFacade;
+declare const Photo: import("svelte").Component<$$ComponentProps, {}, "">;
 type Photo = ReturnType<typeof Photo>;
 export default Photo;

package/dist/PhotoGallery.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+  import Button from './basic/Button.svelte';
   import PhotoComponent from './Photo.svelte';
-  import type { I18nFacade, Photo, PhotoGalleryContent, GridPhoto } from './types.ts';
+  import type { I18nFacade, Photo, PhotoGalleryContent } from './types.js';
   import { browser } from '$app/environment';
+  import { slide } from 'svelte/transition';
 
   let { photos, gridPhotoWidth = 300, translateFunc }: PhotoGalleryContent & I18nFacade = $props();
 
@@ -13,42 +15,48 @@
     };
   }
   let ratio = $derived(landscape ? '16/9' : '9/16');
-
   let galleryContainer: HTMLDivElement | undefined = $state();
 
-  let gridPhotos: GridPhoto[] = $state(
-    photos.map((p: Photo): GridPhoto => {
-      return {
-        photo: p,
-        zoomed: false,
-        id: crypto.randomUUID(),
-      };
-    }),
-  );
-
   let width = $state(1000);
   let numberOfCols = $derived(
     Math.floor(width / (gridPhotoWidth && Number.isInteger(gridPhotoWidth) ? gridPhotoWidth : 300)),
   );
 
-  const zoom = (z: GridPhoto, i: number) => {
-    let unzoom = false;
-    if (z.zoomed) {
-      unzoom = true;
-    }
+  let zoomed: number | null = $state(0);
+  let zoomedPhoto: Photo | null = $derived(zoomed != null ? photos[zoomed] : null);
 
-    gridPhotos.forEach((p: GridPhoto) => (p.zoomed = false));
-    gridPhotos.splice(i, 1);
-
-    if (!unzoom) {
-      z.zoomed = true;
-    }
-    gridPhotos = [z, ...gridPhotos];
+  const zoom = (i: number) => {
+    zoomed = i;
+    setTimeout(() => {
+      galleryContainer?.scrollIntoView({ behavior: 'smooth' });
+    }, 100);
+  };
 
+  const unzoom = () => {
+    zoomed = null;
     setTimeout(() => {
-      galleryContainer?.scrollIntoView();
+      galleryContainer?.scrollIntoView({ behavior: 'smooth' });
     }, 100);
   };
+
+  const zoomNext = () => {
+    if (zoomed != null) {
+      if (zoomed == photos.length - 1) {
+        zoomed = 0;
+      } else {
+        zoomed = zoomed + 1;
+      }
+    }
+  };
+  const zoomPrev = () => {
+    if (zoomed != null) {
+      if (zoomed == 0) {
+        zoomed = photos.length - 1;
+      } else {
+        zoomed = zoomed - 1;
+      }
+    }
+  };
 </script>
 
 <div
@@ -59,27 +67,72 @@
   class="grid-container"
   bind:clientWidth={width}
 >
-  {#each gridPhotos as p, i (p.id)}
+  {#if zoomed != null && zoomedPhoto != null}
     <div
-      class:complete-row={p.zoomed}
+      transition:slide
       aria-label="resize"
       role="button"
       tabindex="-1"
-      onclick={() => zoom(p, i)}
-      onkeyup={() => zoom(p, i)}
+      onclick={() => unzoom()}
+      onkeyup={() => unzoom()}
+      class="photo-container complete-row"
+    >
+      <PhotoComponent {...zoomedPhoto.content} frame={true} {ratio} {translateFunc} />
+
+      <div class="next-wrapper" style="">
+        <Button
+          text=">"
+          size={3.3}
+          fontSize="3rem"
+          clicked={() => zoomNext()}
+          stopPropagation={true}
+        />
+      </div>
+      <div class="prev-wrapper">
+        <Button
+          text="<"
+          size={3.3}
+          fontSize="3rem"
+          clicked={() => zoomPrev()}
+          stopPropagation={true}
+        />
+      </div>
+    </div>
+  {/if}
+
+  {#each photos as p, i (p.id)}
+    <div
+      aria-label="resize"
+      role="button"
+      tabindex="-1"
+      onclick={() => zoom(i)}
+      onkeyup={() => zoom(i)}
       class="photo-container"
     >
-      <PhotoComponent
-        {...p.photo.content}
-        frame={true}
-        ratio={p.zoomed ? ratio : '1'}
-        {translateFunc}
-      />
+      <PhotoComponent {...p.content} frame={true} ratio="1" {translateFunc} />
     </div>
   {/each}
 </div>
 
 <style>
+  .next-wrapper {
+    position: absolute;
+    right: 1rem;
+    top: calc(50% - 1.65rem);
+
+    --bg-button-prim-color: rgba(242, 242, 242, 0.3);
+    --main-font-color: rgba(15, 14, 15, 0.6);
+  }
+
+  .prev-wrapper {
+    position: absolute;
+    left: 1rem;
+    top: calc(50% - 1.65rem);
+
+    --bg-button-prim-color: rgba(242, 242, 242, 0.3);
+    --main-font-color: rgba(15, 14, 15, 0.6);
+  }
+
   .complete-row {
     grid-column-start: firstLine;
     grid-column-end: lastLine;
@@ -91,6 +144,7 @@
     cursor: pointer;
     width: 100%;
     height: 100%;
+    position: relative;
   }
 
   .grid-container {

package/dist/PhotoGallery.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { I18nFacade, PhotoGalleryContent } from './types.ts';
-declare const PhotoGallery: import("svelte").Component<PhotoGalleryContent & I18nFacade, {}, "">;
+import type { I18nFacade, PhotoGalleryContent } from './types.js';
+type $$ComponentProps = PhotoGalleryContent & I18nFacade;
+declare const PhotoGallery: import("svelte").Component<$$ComponentProps, {}, "">;
 type PhotoGallery = ReturnType<typeof PhotoGallery>;
 export default PhotoGallery;

package/dist/Pricing.svelte

@@ -7,7 +7,7 @@
     StaticPricingRange,
     PricingEntry,
     PricingColumn,
-  } from './types.ts';
+  } from './types.js';
   import type { Dinero, DineroSnapshot } from 'dinero.js';
 
   let filteredRanges: PricingRange[] = $state([]);

package/dist/Pricing.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { PricingContent, I18nFacade } from './types.ts';
-declare const Pricing: import("svelte").Component<PricingContent & I18nFacade, {}, "">;
+import type { PricingContent, I18nFacade } from './types.js';
+type $$ComponentProps = PricingContent & I18nFacade;
+declare const Pricing: import("svelte").Component<$$ComponentProps, {}, "">;
 type Pricing = ReturnType<typeof Pricing>;
 export default Pricing;

package/dist/PricingShort.svelte

@@ -2,7 +2,7 @@
   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.ts';
+  import type { I18nFacade, PricingShortContent, PricingEntry } from './types.js';
 
   let {
     global = undefined,

package/dist/PricingShort.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { I18nFacade, PricingShortContent } from './types.ts';
-declare const PricingShort: import("svelte").Component<PricingShortContent & I18nFacade, {}, "">;
+import type { I18nFacade, PricingShortContent } from './types.js';
+type $$ComponentProps = PricingShortContent & I18nFacade;
+declare const PricingShort: import("svelte").Component<$$ComponentProps, {}, "">;
 type PricingShort = ReturnType<typeof PricingShort>;
 export default PricingShort;

package/dist/Section.svelte

@@ -27,7 +27,7 @@
     isPricingShort,
     isAccoDescription,
     isAccoCard,
-  } from './types.ts';
+  } from './types.js';
 
   let {
     header = undefined,

package/dist/Section.svelte.d.ts

@@ -1,4 +1,5 @@
-import { type Section as SectionI, type I18nFacade } from './types.ts';
-declare const Section: import("svelte").Component<SectionI & I18nFacade, {}, "padding">;
+import { type Section as SectionI, type I18nFacade } from './types.js';
+type $$ComponentProps = SectionI & I18nFacade;
+declare const Section: import("svelte").Component<$$ComponentProps, {}, "padding">;
 type Section = ReturnType<typeof Section>;
 export default Section;

package/dist/Text.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { TextContent, I18nFacade } from './types.ts';
+  import type { TextContent, I18nFacade } from './types.js';
 
   let {
     ref,

package/dist/Text.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { TextContent, I18nFacade } from './types.ts';
-declare const Text: import("svelte").Component<TextContent & I18nFacade, {}, "">;
+import type { TextContent, I18nFacade } from './types.js';
+type $$ComponentProps = TextContent & I18nFacade;
+declare const Text: import("svelte").Component<$$ComponentProps, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/Weather.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { browser } from '$app/environment';
-  import type { I18nFacade, WeatherContent } from './types.ts';
+  import type { I18nFacade, WeatherContent } from './types.js';
 
   let { header1, header2, location, translateFunc, currentLang }: WeatherContent & I18nFacade =
     $props();
 
   const callback = () => {
     //TODO maybe do something here
-    // probably build something custom, not using weatherwidget.io, yes maptiler might be good option
-    //
+    // probably build something custom, not using weatherwidget.io
     //console.log("weather script loaded")
     initialLoadDone = true;
   };

package/dist/Weather.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { I18nFacade, WeatherContent } from './types.ts';
-declare const Weather: import("svelte").Component<WeatherContent & I18nFacade, {}, "">;
+import type { I18nFacade, WeatherContent } from './types.js';
+type $$ComponentProps = WeatherContent & I18nFacade;
+declare const Weather: import("svelte").Component<$$ComponentProps, {}, "">;
 type Weather = ReturnType<typeof Weather>;
 export default Weather;

package/dist/basic/Avatar.svelte.d.ts

@@ -1,7 +1,8 @@
-declare const Avatar: import("svelte").Component<{
+type $$ComponentProps = {
     email: string;
     size?: number;
     imageUrl?: string;
-}, {}, "imageUrl">;
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "imageUrl">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/basic/Button.svelte

@@ -41,7 +41,7 @@
     clicked?: (event: Event) => void;
   } = $props();
 
-  const disabled = $derived(!enabled);
+  let disabled = $derived(!enabled);
 
   const onClick = (event: Event) => {
     if (stopPropagation) {
@@ -50,7 +50,7 @@
     if (enabled) onclicked(event);
   };
 
-  let focussed = false;
+  let focussed = $state(false);
   const focussing = (event: Event) => {
     if (stopPropagation) {
       event.stopPropagation();
@@ -277,7 +277,7 @@
     align-items: center;
 
     background-color: var(--bg-button-prim-color);
-    color: var(--font-prim-color);
+    color: var(--main-font-color);
 
     cursor: pointer;
     overflow: hidden;
@@ -288,6 +288,7 @@
   }
   .button:focus {
     outline-style: none;
+    filter: drop-shadow(0 0 0.75rem var(--focussed-border-color));
   }
 
   .button.danger {
@@ -310,6 +311,8 @@
     vertical-align: middle;
     font-variant: small-caps;
 
+    color: var(--main-font-color);
+
     margin-left: 0.4rem;
     margin-right: 0.4rem;
   }

package/dist/basic/Button.svelte.d.ts

@@ -1,9 +1,9 @@
-declare const Button: import("svelte").Component<{
+type $$ComponentProps = {
     text?: string | null;
     iconName?: string;
     ariaLabel?: string;
     form?: string | null;
-    type?: "button" | "submit" | "reset";
+    type?: 'button' | 'submit' | 'reset';
     stopPropagation?: boolean;
     pressed?: boolean;
     fontSize?: string;
@@ -15,6 +15,7 @@ declare const Button: import("svelte").Component<{
     onUp?: boolean;
     preventDefault?: boolean;
     clicked?: (event: Event) => void;
-}, {}, "enabled">;
+};
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "enabled">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/basic/Icon.svelte.d.ts

@@ -1,8 +1,9 @@
-declare const Icon: import("svelte").Component<{
+type $$ComponentProps = {
     color?: string;
     iconName: string;
     width?: string;
     height?: string;
-}, {}, "">;
+};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;