@getmicdrop/svelte-components 2.0.13 → 2.1.0

package/dist/components/Calendar/QuarterView.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QuarterView.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/QuarterView.svelte.js"],"names":[],"mappings":";;;;;;;;;;AAsYA;;;;;;mBAAuJ;6CAT1G,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/pages/performers/AvailabilityCalendarModal.svelte

@@ -1,632 +0,0 @@
-<script>
-  import { fade, fly } from "svelte/transition";
-  import { writable } from "svelte/store";
-  import { jwtDecode } from "jwt-decode";
-  import QuarterView from "../../Calendar/QuarterView.svelte";
-  import { timeAgo } from "../../../utils/utils/utils";
-  import { buildApiUrl, API_ENDPOINTS } from "../../../utils/apiConfig.js";
-  import { auth, initializeAuthState } from "../../../stores/auth.js";
-  import microphonePlaceholder from "../../../assets/images/microphone.png";
-
-  export let show = false;
-  export let venue = null;
-  export let onClose = () => {};
-  export let onUpdate = (updatedTimestamp) => {};
-
-  let isLoading = false;
-  let currentEvents = [];
-  const selectedDates = writable([]);
-  const message = writable("");
-  let localLastUpdated = venue?.lastUpdated || new Date().toISOString();
-  let saveTimeout = null;
-  let lastSavedDatesJson = "[]";
-  let isInitialLoad = true;
-
-  // Parse location into street address and city/state/zip
-  function parseLocation(locationString) {
-    if (!locationString) return { street: '', cityStateZip: '' };
-
-    // Split by comma to separate components
-    const parts = locationString.split(',').map(part => part.trim());
-
-    if (parts.length >= 3) {
-      // Format: "3400 Warner Blvd, Burbank, CA 91505"
-      const street = parts[0];
-      const cityStateZip = parts.slice(1).join(', ');
-      return { street, cityStateZip };
-    } else if (parts.length === 2) {
-      // Format: "Street, City State Zip"
-      return { street: parts[0], cityStateZip: parts[1] };
-    } else {
-      // Single part or unexpected format
-      return { street: locationString, cityStateZip: '' };
-    }
-  }
-
-  $: parsedLocation = parseLocation(venue?.location);
-
-  // Generate currentEvents up to 360 days in advance
-  function generateCurrentEvents() {
-    currentEvents = [];
-    const today = new Date();
-    for (let i = 0; i <= 360; i++) {
-      const date = new Date(today);
-      date.setDate(today.getDate() + i);
-      currentEvents.push({ date: normalizeDate(date) });
-    }
-  }
-
-  function normalizeDate(date) {
-    const d = new Date(date);
-    const year = d.getFullYear();
-    const month = String(d.getMonth() + 1).padStart(2, "0");
-    const day = String(d.getDate()).padStart(2, "0");
-    return `${year}-${month}-${day}`;
-  }
-
-  async function loadAvailabilityData() {
-    if (!venue) return;
-
-    isLoading = true;
-    initializeAuthState();
-    generateCurrentEvents();
-
-    try {
-      const getCookie = (name) => {
-        const value = `; ${document.cookie}`;
-        const parts = value.split(`; ${name}=`);
-        if (parts.length === 2) return parts.pop().split(";").shift();
-      };
-      const token = getCookie("performer_token");
-
-      let userId;
-      if (token) {
-        try {
-          const decoded = jwtDecode(token);
-          userId = decoded?.id || decoded?.userId;
-        } catch (err) {
-          console.error("Failed to decode token:", err);
-        }
-      }
-
-      const res = await fetch(
-        buildApiUrl(`${API_ENDPOINTS.PERFORMER_AVAILABILITIES}/${userId}`),
-        {
-          credentials: "include",
-          headers: {
-            Authorization: token ? `Bearer ${token}` : "",
-          },
-        },
-      );
-
-      if (res.ok) {
-        const events = await res.json();
-        const eventDetails = events.filter(
-          (event) => event.VenueID === Number(venue.venueId),
-        );
-
-        selectedDates.set([]);
-        eventDetails.forEach((event) => {
-          if (event.Date) {
-            const normalizedDate = normalizeDate(event.Date);
-            selectedDates.update((dates) => [...dates, normalizedDate]);
-          }
-        });
-
-        // Initialize lastSavedDatesJson with loaded dates
-        selectedDates.subscribe(dates => {
-          if (isInitialLoad) {
-            lastSavedDatesJson = JSON.stringify([...dates].sort());
-          }
-        });
-      }
-    } catch (err) {
-      console.error("Error loading availabilities:", err);
-    } finally {
-      setTimeout(() => {
-        isInitialLoad = false;
-      }, 100);
-      isLoading = false;
-    }
-  }
-
-  async function saveSelectedDates() {
-    if (!venue || venue.venueId === 0) return;
-
-    if (!$auth.token) {
-      initializeAuthState();
-    }
-
-    const dates = $selectedDates.map((dateObj) => dateObj);
-    const url = `/api/performer/performerAvailabilities/${venue.venueId}`;
-
-    const response = await fetch(url, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      credentials: "include",
-      body: JSON.stringify(dates),
-    });
-
-    if (response.ok) {
-      lastSavedDatesJson = JSON.stringify([...$selectedDates].sort());
-      localLastUpdated = new Date().toISOString();
-      onUpdate(localLastUpdated);
-    }
-  }
-
-  // Reactive statement to save selected dates with debouncing
-  $: {
-    const currentDatesJson = JSON.stringify([...$selectedDates].sort());
-    const hasChanged = currentDatesJson !== lastSavedDatesJson;
-
-    if ($selectedDates.length > 0 && !isInitialLoad && hasChanged) {
-      // ALWAYS show "saving" on ANY change - this is key for consistent feedback
-      message.set("saving");
-
-      // Clear existing timeout to reset the debounce
-      if (saveTimeout) {
-        clearTimeout(saveTimeout);
-      }
-
-      localLastUpdated = new Date().toISOString();
-
-      // Start new debounce timer - wait for user to stop making changes
-      saveTimeout = setTimeout(async () => {
-        await saveSelectedDates();
-        message.set("saved");
-
-        // Success haptic feedback - notification style for iOS, pattern for Android
-        if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.haptic) {
-          window.webkit.messageHandlers.haptic.postMessage('success');
-        } else if (window.TapticEngine) {
-          window.TapticEngine.notification({ type: 'success' });
-        } else if (navigator.vibrate) {
-          navigator.vibrate([10, 50, 10]);
-        }
-
-        // Clear the "saved" message after 2 seconds (Google Docs style)
-        setTimeout(() => {
-          message.set("");
-        }, 2000);
-
-        saveTimeout = null;
-      }, 1000);
-    }
-  }
-
-  // Reset message when venue changes
-  $: if (venue) {
-    message.set("");
-  }
-
-  // Load data when modal opens
-  $: if (show && venue) {
-    loadAvailabilityData();
-  }
-
-  // Handle ESC key
-  function handleKeydown(event) {
-    if (event.key === "Escape" && show) {
-      onClose();
-    }
-  }
-
-  // Handle backdrop click
-  function handleBackdropClick(event) {
-    if (event.target === event.currentTarget) {
-      onClose();
-    }
-  }
-</script>
-
-<svelte:window on:keydown={handleKeydown} />
-
-{#if show && venue}
-  <!-- Mobile: Full-screen modal (shown on mobile via CSS) -->
-  <div
-    class="fullscreen-modal modal-mobile-only"
-    transition:fade={{ duration: 200 }}
-    role="dialog"
-    aria-modal="true"
-  >
-    <!-- Header with safe area padding -->
-    <header class="fullscreen-modal__header">
-      <button
-        on:click={onClose}
-        class="modal-back-btn"
-        aria-label="Back to venues"
-      >
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-        </svg>
-      </button>
-      <div class="modal-venue-info">
-        <div class="modal-venue-image">
-          <img
-            src={venue.image?.trim()
-              ? (venue.image.startsWith("http")
-                  ? venue.image
-                  : `https://moxy.sfo3.digitaloceanspaces.com${venue.image}`)
-              : microphonePlaceholder}
-            alt={venue.name}
-          />
-        </div>
-        <div class="modal-venue-text">
-          <h2 class="modal-venue-name">{venue.name}</h2>
-          <p class="modal-save-status">
-            {#if $message === "saving"}
-              <span class="text-green-500">Saving...</span>
-            {:else if $message === "saved"}
-              <span class="text-green-500">✓ Saved</span>
-            {/if}
-          </p>
-        </div>
-      </div>
-    </header>
-
-    <!-- Calendar Content - uses fullscreen-modal__body for proper scrolling -->
-    <div class="fullscreen-modal__body">
-      <div class="calendar-content">
-        {#if isLoading}
-          <!-- Loading Skeleton -->
-          <div class="loading-skeleton">
-            <div class="skeleton-nav">
-              <div class="skeleton-btn"></div>
-              <div class="skeleton-title"></div>
-              <div class="skeleton-btn"></div>
-            </div>
-            <div class="skeleton-grid">
-              {#each Array(35) as _}
-                <div class="skeleton-day"></div>
-              {/each}
-            </div>
-          </div>
-        {:else}
-          <QuarterView
-            currentevents={currentEvents}
-            {selectedDates}
-            saveStatus={$message}
-          />
-        {/if}
-      </div>
-    </div>
-  </div>
-
-  <!-- Desktop: Side panel (shown on desktop via CSS) -->
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div
-    class="desktop-panel-backdrop modal-desktop-only"
-    transition:fade={{ duration: 200 }}
-    on:click={handleBackdropClick}
-    role="dialog"
-    aria-modal="true"
-  >
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div
-      class="desktop-panel"
-      transition:fly={{ x: "100%", duration: 300 }}
-      on:click|stopPropagation
-    >
-      <!-- Header -->
-      <header class="desktop-panel-header">
-        <div class="desktop-venue-image">
-          <img
-            src={venue.image?.trim()
-              ? (venue.image.startsWith("http")
-                  ? venue.image
-                  : `https://moxy.sfo3.digitaloceanspaces.com${venue.image}`)
-              : microphonePlaceholder}
-            alt={venue.name}
-          />
-        </div>
-        <div class="desktop-venue-text">
-          <h2 class="desktop-venue-name">{venue.name}</h2>
-          <p class="modal-save-status">
-            {#if $message === "saving"}
-              <span class="text-green-500">Saving...</span>
-            {:else if $message === "saved"}
-              <span class="text-green-500">✓ Saved</span>
-            {/if}
-          </p>
-        </div>
-        <button
-          on:click={onClose}
-          class="desktop-close-btn"
-          aria-label="Close"
-        >
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </header>
-
-      <!-- Calendar Content -->
-      <div class="desktop-panel-body">
-        <div class="calendar-content">
-          {#if isLoading}
-            <!-- Loading Skeleton -->
-            <div class="loading-skeleton">
-              <div class="skeleton-nav">
-                <div class="skeleton-btn"></div>
-                <div class="skeleton-title"></div>
-                <div class="skeleton-btn"></div>
-              </div>
-              <div class="skeleton-grid">
-                {#each Array(35) as _}
-                  <div class="skeleton-day"></div>
-                {/each}
-              </div>
-            </div>
-          {:else}
-            <QuarterView
-              currentevents={currentEvents}
-              {selectedDates}
-              saveStatus={$message}
-            />
-          {/if}
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}
-
-<style>
-  /* Responsive show/hide - mobile shows fullscreen, desktop shows side panel */
-  .modal-mobile-only {
-    display: flex !important;
-  }
-
-  .modal-desktop-only {
-    display: none !important;
-  }
-
-  @media (min-width: 768px) {
-    .modal-mobile-only {
-      display: none !important;
-    }
-
-    .modal-desktop-only {
-      display: flex !important;
-    }
-  }
-
-  /*
-    Mobile fullscreen modal uses .fullscreen-modal class from app.css
-    which handles:
-    - position: fixed with inset: 0
-    - z-index: var(--z-critical) to be above everything
-    - flex column layout
-
-    .fullscreen-modal__header handles:
-    - Safe area padding (notch)
-    - Fixed height matching app header
-    - Border bottom
-
-    .fullscreen-modal__body handles:
-    - flex: 1 to fill remaining space
-    - overflow-y: auto with proper scrolling
-    - overscroll-behavior: contain (no iOS bounce)
-    - padding-bottom for safe area
-  */
-
-  /* Back button */
-  .modal-back-btn {
-    width: 2.5rem;
-    height: 2.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.5rem;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    color: hsl(var(--Text-Primary));
-    transition: background-color 0.15s;
-    flex-shrink: 0;
-  }
-
-  .modal-back-btn:hover {
-    background-color: hsl(var(--BG-Tertiary));
-  }
-
-  /* Venue info in header */
-  .modal-venue-info {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .modal-venue-image {
-    width: 2.5rem;
-    height: 2.5rem;
-    background-color: hsl(var(--BG-Secondary));
-    border-radius: 0.375rem;
-    overflow: hidden;
-    flex-shrink: 0;
-  }
-
-  .modal-venue-image img {
-    width: 100%;
-    height: 100%;
-    -o-object-fit: contain;
-       object-fit: contain;
-  }
-
-  .modal-venue-text {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .modal-venue-name {
-    font-size: 1rem;
-    font-weight: 500;
-    color: hsl(var(--Text-Primary));
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    line-height: 1.25;
-    margin: 0;
-  }
-
-  .modal-save-status {
-    font-size: 0.75rem;
-    margin-top: 0.125rem;
-    min-height: 1rem;
-    margin-bottom: 0;
-  }
-
-  /* Calendar content area */
-  .calendar-content {
-    padding: 1rem;
-  }
-
-  /* Loading skeleton */
-  .loading-skeleton {
-    width: 100%;
-    max-width: 28rem;
-    margin: 0 auto;
-  }
-
-  .skeleton-nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1.5rem;
-  }
-
-  .skeleton-btn {
-    width: 2.5rem;
-    height: 2.5rem;
-    background-color: hsl(var(--BG-Secondary));
-    border-radius: 0.5rem;
-    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-
-  .skeleton-title {
-    width: 8rem;
-    height: 1.5rem;
-    background-color: hsl(var(--BG-Secondary));
-    border-radius: 0.25rem;
-    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-
-  .skeleton-grid {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 0.5rem;
-  }
-
-  .skeleton-day {
-    width: 100%;
-    aspect-ratio: 1;
-    background-color: hsl(var(--BG-Secondary));
-    border-radius: 0.25rem;
-    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-
-  @keyframes pulse {
-    0%, 100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.5;
-    }
-  }
-
-  /* Desktop side panel */
-  .desktop-panel-backdrop {
-    position: fixed;
-    inset: 0;
-    background-color: rgba(0, 0, 0, 0.3);
-    z-index: var(--z-modal, 50);
-  }
-
-  .desktop-panel {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    max-width: 28rem;
-    background-color: hsl(var(--BG-Primary));
-    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
-    display: flex;
-    flex-direction: column;
-  }
-
-  .desktop-panel-header {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 1rem;
-    border-bottom: 1px solid hsl(var(--Stroke-Primary));
-    background-color: hsl(var(--BG-Primary));
-  }
-
-  .desktop-venue-image {
-    width: 3rem;
-    height: 3rem;
-    background-color: hsl(var(--BG-Secondary));
-    border-radius: 0.375rem;
-    overflow: hidden;
-    flex-shrink: 0;
-  }
-
-  .desktop-venue-image img {
-    width: 100%;
-    height: 100%;
-    -o-object-fit: contain;
-       object-fit: contain;
-  }
-
-  .desktop-venue-text {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .desktop-venue-name {
-    font-size: 1.125rem;
-    font-weight: 500;
-    color: hsl(var(--Text-Primary));
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    line-height: 1.25;
-    margin: 0;
-  }
-
-  .desktop-close-btn {
-    width: 2rem;
-    height: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.375rem;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    color: hsl(var(--Text-Primary));
-    transition: background-color 0.15s;
-    flex-shrink: 0;
-  }
-
-  .desktop-close-btn:hover {
-    background-color: hsl(var(--BG-Tertiary));
-  }
-
-  .desktop-panel-body {
-    flex: 1;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    -webkit-overflow-scrolling: touch;
-  }
-</style>

package/dist/components/pages/performers/AvailabilityCalendarModal.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AvailabilityCalendarModal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/AvailabilityCalendarModal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AA4WA;;;;;;;;;mBAA4K;6CAT/H,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}