@getmicdrop/svelte-components 2.0.13 → 2.1.0

package/dist/__LIB_STORES__.js

@@ -1,8 +1,8 @@
 import { writable } from 'svelte/store';
 
-// Create a minimal page store for library builds
+// Create a reactive page store that updates on navigation
 const createPageStore = () => {
-  const { subscribe, set } = writable({
+  const getPageState = () => ({
     url: typeof window !== 'undefined' ? new URL(window.location.href) : new URL('http://localhost'),
     params: {},
     route: { id: null },
@@ -13,6 +13,34 @@ const createPageStore = () => {
     state: {}
   });
 
+  const { subscribe, set } = writable(getPageState());
+
+  // Listen for navigation events in the browser
+  if (typeof window !== 'undefined') {
+    // Update on popstate (back/forward navigation)
+    window.addEventListener('popstate', () => set(getPageState()));
+
+    // Intercept pushState and replaceState to detect programmatic navigation
+    const originalPushState = history.pushState;
+    const originalReplaceState = history.replaceState;
+
+    history.pushState = function(...args) {
+      originalPushState.apply(this, args);
+      set(getPageState());
+    };
+
+    history.replaceState = function(...args) {
+      originalReplaceState.apply(this, args);
+      set(getPageState());
+    };
+
+    // Also listen for click events on links to catch SvelteKit navigation
+    window.addEventListener('click', (e) => {
+      // Small delay to let the navigation complete
+      setTimeout(() => set(getPageState()), 0);
+    });
+  }
+
   return { subscribe };
 };
 

package/dist/components/AboutShow/AboutShow.svelte

@@ -0,0 +1,278 @@
+<script>
+  import Close from 'carbon-icons-svelte/lib/Close.svelte';
+  import LogoInstagram from 'carbon-icons-svelte/lib/LogoInstagram.svelte';
+
+  export let performers = [];
+  export let ShowImage = '';
+  export let description = '';
+  export let showTitle = true;
+  export let title = "About the Show";
+  export let showReadMore = true; // Allow controlling read more behavior
+
+  // Function to get image URL - can be overridden via props
+  export let getImageUrl = (url) => url;
+
+  let activePerformer = null;
+  let characterLimit = 1500; // Show much more content before truncating
+  let showFullDescription = false;
+
+  // Filter performers: only show Confirmed (acceptedState === 2) with valid profiles
+  // Note: performerProfile is lowercase in API response
+  $: validPerformers = performers.filter(performer => {
+    const isConfirmed = performer.acceptedState === 2;
+    const isNotHidden = !performer.shouldBeHidden;
+    const profile = performer.RosterPerformer?.User?.performerProfile;
+    const hasName = profile?.firstName || profile?.lastName || profile?.stageName;
+    return isConfirmed && isNotHidden && hasName;
+  });
+
+  function togglePerformer(id) {
+    if (activePerformer === id) {
+      activePerformer = null;
+    } else {
+      activePerformer = id;
+    }
+  }
+
+  function closePerformer() {
+    activePerformer = null;
+  }
+
+  function toggleDescription() {
+    showFullDescription = !showFullDescription;
+  }
+</script>
+
+<div class="flex flex-col gap-3">
+  {#if showTitle}
+    <h2 class="section-title font-medium text-xl">{title}</h2>
+  {/if}
+
+  {#if ShowImage && description}
+    <div>
+      <img src={ShowImage} alt="" class="show-image rounded-lg object-contain w-full" />
+    </div>
+  {/if}
+
+  <!-- Description -->
+  {#if description}
+    {#if showFullDescription || description.length <= characterLimit || !showReadMore}
+      <p class="description-text text-[15px] leading-relaxed whitespace-pre-line">{description}</p>
+      {#if showReadMore && description.length > characterLimit}
+        <button
+          on:click={toggleDescription}
+          class="read-more-btn text-[15px] font-medium text-left hover:underline"
+        >
+          Show less
+        </button>
+      {/if}
+    {:else}
+      <p class="description-text text-[15px] leading-relaxed whitespace-pre-line">
+        {description.slice(0, characterLimit)}...
+      </p>
+      <button
+        on:click={toggleDescription}
+        class="read-more-btn text-[15px] font-medium text-left hover:underline"
+      >
+        Show more
+      </button>
+    {/if}
+  {/if}
+
+  <!-- Performers - always show all, no collapse -->
+  {#if validPerformers.length > 0}
+    <div class="py-2">
+      <!-- Backdrop overlay for bio popup -->
+      {#if activePerformer !== null}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <div class="fixed inset-0 z-40" on:click={closePerformer}></div>
+      {/if}
+
+      <div class="flex flex-wrap justify-start gap-4">
+        {#each validPerformers as performer, index}
+          {@const profile = performer.RosterPerformer?.User?.performerProfile}
+          {@const displayName = profile?.useStageName && profile?.stageName
+            ? profile.stageName
+            : `${profile?.firstName || ''} ${profile?.lastName || ''}`.trim()}
+          {@const firstName = profile?.firstName || displayName.split(' ')[0] || displayName}
+          <div class="relative performer-card">
+            {#if activePerformer === performer.ID && !performer.shouldBeHidden}
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <!-- svelte-ignore a11y-no-static-element-interactions -->
+              <div
+                class="bio-card w-[300px] sm:w-[340px] absolute rounded-lg p-4 z-50 shadow-xl {index === 0 ? 'first-child' : ''}"
+                on:click|stopPropagation
+              >
+                <div class="arrow {index === 0 ? 'first-arrow' : ''}"></div>
+
+                <button
+                  class="close-btn absolute top-2 right-2 p-1 rounded-full transition-colors"
+                  on:click={closePerformer}
+                  aria-label="Close"
+                >
+                  <Close size={18} />
+                </button>
+
+                <p class="bio-text text-sm leading-relaxed pr-6">
+                  {profile?.biography || ''}
+                </p>
+
+                {#if profile?.instagram || profile?.twitter}
+                  <div class="social-links flex gap-2 items-center text-sm mt-3 pt-3">
+                    <span>Follow {firstName}:</span>
+                    {#if profile?.instagram}
+                      <a
+                        href={profile.instagram}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="social-icon hover:opacity-70 transition-opacity"
+                        aria-label="Instagram profile"
+                      >
+                        <LogoInstagram size={20} />
+                      </a>
+                    {/if}
+                    {#if profile?.twitter}
+                      <a
+                        href={profile.twitter}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="social-icon hover:opacity-70 transition-opacity"
+                        aria-label="Twitter profile"
+                      >
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                          <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
+                        </svg>
+                      </a>
+                    {/if}
+                  </div>
+                {/if}
+              </div>
+            {/if}
+
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <div
+              class="performer-tile rounded-lg flex flex-col gap-2 p-2 items-center w-[90px] cursor-pointer transition-all {activePerformer === performer.ID ? 'active' : ''}"
+              on:click={() => togglePerformer(performer.ID)}
+            >
+              <img
+                src={performer.shouldBeHidden ? '' : profile?.profileImage ? getImageUrl(profile.profileImage) : ''}
+                alt={displayName || 'Performer'}
+                class="performer-image size-[68px] rounded object-cover {!profile?.profileImage || performer.shouldBeHidden ? 'no-image' : ''}"
+              />
+              <p class="performer-name text-[11px] text-center leading-tight line-clamp-2">
+                {#if !performer.shouldBeHidden}
+                  {displayName}
+                {/if}
+              </p>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  /* Theme-responsive colors using CSS variables */
+  .section-title {
+    color: hsl(var(--Text-Primary));
+  }
+
+  .show-image {
+    background-color: hsl(var(--BG-Secondary));
+  }
+
+  .description-text {
+    color: hsl(var(--Text-Secondary));
+  }
+
+  .read-more-btn {
+    color: hsl(var(--Brand-Primary));
+  }
+
+  .bio-card {
+    transition: all 0.3s ease;
+    bottom: calc(100% + 10px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: hsl(var(--BG-Primary));
+    border: 2px solid hsl(var(--Brand-Primary));
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+
+  .bio-card.first-child {
+    left: 190%;
+  }
+
+  .arrow {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background: hsl(var(--BG-Primary));
+    transform: rotate(45deg);
+    border-right: 2px solid hsl(var(--Brand-Primary));
+    border-bottom: 2px solid hsl(var(--Brand-Primary));
+    bottom: -6px;
+    left: 50%;
+    margin-left: -6px;
+  }
+
+  .arrow.first-arrow {
+    left: 20%;
+  }
+
+  .close-btn {
+    color: hsl(var(--Text-Tartiary));
+  }
+
+  .close-btn:hover {
+    background-color: hsl(var(--BG-Secondary));
+  }
+
+  .bio-text {
+    color: hsl(var(--Text-Secondary));
+  }
+
+  .social-links {
+    color: hsl(var(--Text-Tartiary));
+    border-top: 1px solid hsl(var(--Stroke-Secondary));
+  }
+
+  .social-icon {
+    color: hsl(var(--Brand-Primary));
+  }
+
+  .performer-tile {
+    background-color: hsl(var(--BG-Primary));
+    border: 1px solid hsl(var(--Stroke-Secondary));
+  }
+
+  .performer-tile:hover {
+    border-color: hsl(var(--Brand-Primary));
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  }
+
+  .performer-tile.active {
+    border-color: hsl(var(--Brand-Primary));
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  }
+
+  .performer-image.no-image {
+    background-color: hsl(var(--BG-Secondary));
+  }
+
+  .performer-name {
+    color: hsl(var(--Text-Secondary));
+  }
+
+  /* Line clamping */
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>

package/dist/components/AboutShow/AboutShow.svelte.d.ts

@@ -0,0 +1,43 @@
+export default AboutShow;
+type AboutShow = SvelteComponent<{
+    title?: string | undefined;
+    description?: string | undefined;
+    showTitle?: boolean | undefined;
+    performers?: any[] | undefined;
+    ShowImage?: string | undefined;
+    showReadMore?: boolean | undefined;
+    getImageUrl?: ((url: any) => any) | undefined;
+}, {
+    click: PointerEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const AboutShow: $$__sveltets_2_IsomorphicComponent<{
+    title?: string | undefined;
+    description?: string | undefined;
+    showTitle?: boolean | undefined;
+    performers?: any[] | undefined;
+    ShowImage?: string | undefined;
+    showReadMore?: boolean | undefined;
+    getImageUrl?: ((url: any) => any) | undefined;
+}, {
+    click: PointerEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=AboutShow.svelte.d.ts.map

package/dist/components/AboutShow/AboutShow.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutShow.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/AboutShow/AboutShow.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmKA;;;;;;;;;;;;mBAAgN;6CATnK,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"}