@getmicdrop/svelte-components 5.1.3 → 5.2.1

package/dist/calendar/AboutShow/AboutShow.svelte

@@ -1,29 +1,27 @@
 <script>
   import { CloseOutline, LogoInstagram } from '../../primitives/Icons';
 
-  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 => {
+  let {
+    performers = [],
+    ShowImage = '',
+    description = '',
+    showTitle = true,
+    title = "About the Show",
+    showReadMore = true,
+    getImageUrl = (url) => url,
+  } = $props();
+
+  let activePerformer = $state(null);
+  let characterLimit = 1500;
+  let showFullDescription = $state(false);
+
+  let validPerformers = $derived(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) {
@@ -53,13 +51,12 @@
     </div>
   {/if}
 
-  <!-- Description -->
   {#if description}
     {#if showFullDescription || description.length <= characterLimit || !showReadMore}
       <p class="text-sm leading-relaxed whitespace-pre-line text-gray-600 dark:text-gray-300">{description}</p>
       {#if showReadMore && description.length > characterLimit}
         <button
-          on:click={toggleDescription}
+          onclick={toggleDescription}
           class="text-sm font-medium text-left hover:underline text-blue-700 dark:text-blue-500"
         >
           Show less
@@ -70,7 +67,7 @@
         {description.slice(0, characterLimit)}...
       </p>
       <button
-        on:click={toggleDescription}
+        onclick={toggleDescription}
         class="text-sm font-medium text-left hover:underline text-blue-700 dark:text-blue-500"
       >
         Show more
@@ -78,14 +75,12 @@
     {/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>
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="fixed inset-0 z-40" onclick={closePerformer}></div>
       {/if}
 
       <div class="flex flex-wrap justify-start gap-4">
@@ -97,20 +92,19 @@
           {@const firstName = profile?.firstName || displayName.split(' ')[0] || displayName}
           <div class="relative">
             {#if activePerformer === performer.ID && !performer.shouldBeHidden}
-              <!-- svelte-ignore a11y-click-events-have-key-events -->
-              <!-- svelte-ignore a11y-no-static-element-interactions -->
+              <!-- svelte-ignore a11y_click_events_have_key_events -->
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
               <div
                 class="w-72 sm:w-80 absolute bottom-full mb-2.5 rounded-lg p-4 z-50 shadow-xl transition-all duration-300 bg-white dark:bg-gray-800 border-2 border-blue-700 dark:border-blue-500 {index === 0 ? 'left-[190%]' : 'left-1/2 -translate-x-1/2'}"
-                on:click|stopPropagation
+                onclick={(e) => e.stopPropagation()}
               >
-                <!-- Arrow -->
                 <div
                   class="absolute w-3 h-3 bg-white dark:bg-gray-800 rotate-45 border-r-2 border-b-2 border-blue-700 dark:border-blue-500 -bottom-1.5 {index === 0 ? 'left-[20%]' : 'left-1/2'} -ml-1.5"
                 ></div>
 
                 <button
                   class="absolute top-2 right-2 p-1 rounded-full transition-colors text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
-                  on:click={closePerformer}
+                  onclick={closePerformer}
                   aria-label="Close"
                 >
                   <CloseOutline class="w-5 h-5" />
@@ -152,11 +146,11 @@
               </div>
             {/if}
 
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div
               class="rounded-lg flex flex-col gap-2 p-2 items-center w-24 cursor-pointer transition-all bg-white dark:bg-gray-800 border hover:shadow {activePerformer === performer.ID ? 'border-blue-700 dark:border-blue-500 shadow' : 'border-gray-200 dark:border-gray-600 hover:border-blue-700 dark:hover:border-blue-500'}"
-              on:click={() => togglePerformer(performer.ID)}
+              onclick={() => togglePerformer(performer.ID)}
             >
               <img
                 src={performer.shouldBeHidden ? '' : profile?.profileImage ? getImageUrl(profile.profileImage) : ''}

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

@@ -1,43 +1,24 @@
 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;
+type AboutShow = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const AboutShow: import("svelte").Component<{
+    performers?: any[];
+    ShowImage?: string;
+    description?: string;
+    showTitle?: boolean;
+    title?: string;
+    showReadMore?: boolean;
+    getImageUrl?: Function;
+}, {}, "">;
+type $$ComponentProps = {
+    performers?: any[];
+    ShowImage?: string;
+    description?: string;
+    showTitle?: boolean;
+    title?: string;
+    showReadMore?: boolean;
+    getImageUrl?: Function;
 };
-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/calendar/AboutShow/AboutShow.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AboutShow.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/AboutShow/AboutShow.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgKA;;;;;;;;;;;;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"}
+{"version":3,"file":"AboutShow.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/AboutShow/AboutShow.svelte.js"],"names":[],"mappings":";;;;;AAiJA;iBAzIkC,GAAG,EAAE;gBAAc,MAAM;kBAAgB,MAAM;gBAAc,OAAO;YAAU,MAAM;mBAAiB,OAAO;;WAyItF;wBAzIrC;IAAE,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,WAAU;CAAE"}