@reqquest/ui 1.7.1 → 1.8.0

package/dist/components/DelayedSkeleton.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Loader } from "../registry"
+  import ApplicantPromptSkeleton from "../../internal/components/ApplicantPromptSkeleton.svelte"
+
+  export let loader: Loader
+
+  const wait = () => {
+    return new Promise((resolve) => {
+        setTimeout(resolve, typeof loader === 'boolean' ? 0 : loader?.delay ?? 0)
+    })
+  }
+</script>
+
+{#await wait()}
+<!-- Nothing displayed if delayed, expecting content to load quickly -->
+{:then}
+  {#if typeof loader === 'boolean'}
+    <ApplicantPromptSkeleton />
+  {:else}
+    <svelte:component this={loader.skeletonComponent} />
+  {/if}
+{/await}

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

@@ -0,0 +1,21 @@
+import type { Loader } from "../registry";
+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;
+}
+declare const DelayedSkeleton: $$__sveltets_2_IsomorphicComponent<{
+    loader: Loader;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DelayedSkeleton = InstanceType<typeof DelayedSkeleton>;
+export default DelayedSkeleton;

package/dist/components/QuestionnairePrompt.svelte

@@ -10,7 +10,7 @@
     export let externalLinks: { url: string, label: string, target?: string, rel?: string }[] = []
 
     /**
-     * If true, the form will take the full width of its container. If false, it will be constrained to max-w-screen-md.
+     * If true, the form will take the full width of its container. If false, it will be constrained to max-w-[800px].
      * @type {boolean}
      */
     export let fullWidth = false
@@ -30,12 +30,12 @@
     $: effectiveIntroAlignment = introTextAlignment ?? align
 </script>
 {#if $$slots.intro}
-    <div id="questionnaire-intro" class="prompt-intro flow max-w-screen-md px-px-3 sm:px-6" class:mx-auto={align === 'center'} class:text-center={effectiveIntroAlignment === 'center'} class:text-right={effectiveIntroAlignment === 'right'} style:color="var(--cds-text-02)">
+    <div id="questionnaire-intro" class="prompt-intro flow max-w-[800px] px-px-3 sm:px-6" class:mx-auto={align === 'center'} class:text-center={effectiveIntroAlignment === 'center'} class:text-right={effectiveIntroAlignment === 'right'} style:color="var(--cds-text-02)">
         <slot name="intro" />
     </div>
 {/if}
 {#if externalLinks.length > 0}
-    <div class="prompt-intro-links flow max-w-screen-md px-3 sm:px-6" class:mx-auto={align === 'center'}>
+    <div class="prompt-intro-links flow max-w-[800px] px-3 sm:px-6" class:mx-auto={align === 'center'}>
         <ul class="flex gap-4 flex-wrap mb-4" class:justify-center={align === 'center'}>
         {#each externalLinks.slice(0, 3) as link (link.url)}
             <li><Button kind="ghost" icon={Launch} href={link.url} target={link.target ?? '_blank'} rel={link.rel ?? 'noopener noreferrer'}>{link.label}{#if (link.target ?? '_blank') === '_blank'}<span class="sr-only"> (opens in a new tab)</span>{/if}</Button></li>
@@ -44,6 +44,6 @@
     </div>
 {/if}
 
-<div class="prompt-form flow px-3 sm:px-6" class:max-w-screen-md={!fullWidth} class:w-full={fullWidth} class:mx-auto={align === 'center'}>
+<div class={!fullWidth ? 'prompt-form flow px-3 sm:px-6 max-w-[800px]' : 'prompt-form flow px-3 sm:px-6 w-full'} class:mx-auto={align === 'center'}>
     <slot />
 </div>

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

@@ -28,7 +28,7 @@ declare const QuestionnairePrompt: $$__sveltets_2_IsomorphicComponent<$$__svelte
         rel?: string;
     }[];
     /**
-         * If true, the form will take the full width of its container. If false, it will be constrained to max-w-screen-md.
+         * If true, the form will take the full width of its container. If false, it will be constrained to max-w-[800px].
          * @type {boolean}
          */ fullWidth?: boolean;
     /**

package/dist/registry.d.ts

@@ -1,5 +1,14 @@
 import type { LayoutStructureNode, LayoutStructureNodeRoot, UserProfile } from '@txstate-mws/carbon-svelte';
 import type { Component } from 'svelte';
+export interface PromptLoader {
+    skeletonComponent: Component<any>;
+    /**
+     * The number of milliseconds to wait before showing the skeleton loader. This is useful for preventing flickering when the data is fetched quickly.
+     * Since some data is can be cached, the initial load needs a skeleton loader, but after caching the data comes back quicker and no skeleton loader is needed.
+     */
+    delay?: number;
+}
+export type Loader = PromptLoader | boolean;
 export interface ProgramDefinition {
     /**
      * The key for the program. Allows us to match up API programs with
@@ -40,7 +49,7 @@ export interface PromptDefinition {
      * by an automation. The applicant view cannot handle this, so always include
      * a formComponent for applicant prompts.
      */
-    formComponent?: Component;
+    formComponent?: Component<any>;
     /**
      * Control the size of the area the formComponent will be rendered in.
      * - 'small' will render the form in a small area (about 8 lines or less at 320px width).
@@ -68,7 +77,7 @@ export interface PromptDefinition {
      * A component that displays the data collected from this prompt instead of collecting
      * it. Should be as compact as possible, as it will be displayed in a big list of prompts.
      */
-    displayComponent: Component;
+    displayComponent: Component<any>;
     /**
      * Control the size of the area the displayComponent will be rendered in.
      * - 'small' will render the component in a small area (about 8 lines or less at 320px width).
@@ -93,6 +102,11 @@ export interface PromptDefinition {
      * An icon for the navigation.
      */
     icon?: Component;
+    /**
+     * Determines if the prompt should display a skeleton loader while the data is being fetched. Defaults to false.
+     * A boolean value will result in a default skeleton loader.
+     */
+    loader?: Loader;
 }
 export interface Terminologies {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reqquest/ui",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",