@reqquest/ui 1.7.1 → 1.8.1

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,33 @@ 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;
+    /**
+     * This is the same applicantPromptPage CSS configurations that exist at the UIConfig (global applicant page prompt) level.  Used in a situation where a specific prompt
+     * requires a specific layout that doesn't match default.  This will override global configuration
+     */
+    applicantPromptPage?: ApplicantPromptPageDefinition;
+}
+/**
+ * Applicant prompts are wrapped by the default CL Form component, so any styling applied within the svelte prompt
+ * is independent (does not influence) of the layout of form elements that exist as part of the CL Form (eg. Validation notices).
+ * This can result in inconsistencies in desired layouts as CL Form elements are default left aligned while prompts could expect/desire
+ * center alignment.  This property allows the developer to set the global prompt page Form CSS class variable.  This can be overwritten at the
+ * individual prompt level if specific prompts desire specific layouts.  This definition is used for defining those elements if required
+ */
+export interface ApplicantPromptPageDefinition {
+    /**
+     * CSS class settings specific to the Form component that wraps the prompt
+     */
+    formClass?: string;
+    /**
+     * CSS class settings specific to the corrections inline notification within the Form
+     */
+    invalidatedInlineNotificationClass?: string;
 }
 export interface Terminologies {
     /**
@@ -146,6 +182,14 @@ export interface UIConfig {
      * Defaults to 30 if not specified.
      */
     applicantDashboardRecentDays?: number;
+    /**
+   * Applicant prompts are wrapped by the default CL Form component, so any styling applied within the svelte prompt
+   * is independent (does not influence) of the layout of form elements that exist as part of the CL Form (eg. Validation notices).
+   * This can result in inconsistencies in desired layouts as CL Form elements are default left aligned while prompts could expect/desire
+   * center alignment.  This property allows the developer to set the global prompt page Form CSS class variable.  This can be overwritten at the
+   * individual prompt level if specific prompts desire specific layouts
+   */
+    applicantPromptPage?: ApplicantPromptPageDefinition;
     /**
      * Applicant Review submission page title and subtitle text.
      */

package/dist/typed-client/schema.d.ts

@@ -271,7 +271,7 @@ export type AppRequestPhase = 'ACCEPTANCE' | 'COMPLETE' | 'STARTED' | 'SUBMITTED
  *     the database and the status of each application.
  *
  */
-export type AppRequestStatus = 'ACCEPTANCE' | 'ACCEPTED' | 'APPROVAL' | 'APPROVED' | 'CANCELLED' | 'DISQUALIFIED' | 'NOT_ACCEPTED' | 'NOT_APPROVED' | 'PREAPPROVAL' | 'READY_TO_ACCEPT' | 'READY_TO_SUBMIT' | 'REVIEW_COMPLETE' | 'STARTED' | 'WITHDRAWN';
+export type AppRequestStatus = 'ACCEPTANCE' | 'ACCEPTED' | 'APPROVAL' | 'APPROVED' | 'CANCELLED' | 'DISQUALIFIED' | 'NOT_ACCEPTED' | 'NOT_APPROVED' | 'PREAPPROVAL' | 'READY_TO_ACCEPT' | 'READY_TO_SUBMIT' | 'REVIEW_IN_PROGRESS' | 'REVIEW_COMPLETE' | 'STARTED' | 'WITHDRAWN';
 /** An application represents the applicant applying to a specific program. Each appRequest has multiple applications - one per program defined in the system. Some applications are mutually exclusive and/or will be eliminated early based on PREQUAL requirements, but they all technically exist in the data model - there is no concept of picking one application over another, just two applications where one dies and the other survives. */
 export interface Application {
     actions: ApplicationActions;
@@ -353,7 +353,7 @@ export interface ApplicationMetricTiming {
  *     is computed based on the status of the appRequest and of the requirements for the program.
  *
  */
-export type ApplicationPhase = 'ACCEPTANCE' | 'APPROVAL' | 'COMPLETE' | 'PREAPPROVAL' | 'PREQUAL' | 'QUALIFICATION' | 'READY_FOR_WORKFLOW' | 'READY_TO_ACCEPT' | 'READY_TO_COMPLETE' | 'READY_TO_SUBMIT' | 'REVIEW_COMPLETE' | 'WORKFLOW_BLOCKING' | 'WORKFLOW_NONBLOCKING';
+export type ApplicationPhase = 'ACCEPTANCE' | 'APPROVAL' | 'COMPLETE' | 'PREAPPROVAL' | 'PREQUAL' | 'QUALIFICATION' | 'READY_FOR_WORKFLOW' | 'READY_TO_ACCEPT' | 'READY_TO_COMPLETE' | 'READY_TO_SUBMIT' | 'REVIEW_COMPLETE' | 'REVIEW_IN_PROGRESS' | 'WORKFLOW_BLOCKING' | 'WORKFLOW_NONBLOCKING';
 /** The specific instance of a requirement on a particular application. Stores the status of the requirement, e.g. being satisfied or not. */
 export interface ApplicationRequirement {
     application: Application;
@@ -2193,6 +2193,7 @@ export declare const enumAppRequestStatus: {
     READY_TO_ACCEPT: "READY_TO_ACCEPT";
     READY_TO_SUBMIT: "READY_TO_SUBMIT";
     REVIEW_COMPLETE: "REVIEW_COMPLETE";
+    REVIEW_IN_PROGRESS: "REVIEW_IN_PROGRESS";
     STARTED: "STARTED";
     WITHDRAWN: "WITHDRAWN";
 };
@@ -2208,6 +2209,7 @@ export declare const enumApplicationPhase: {
     READY_TO_COMPLETE: "READY_TO_COMPLETE";
     READY_TO_SUBMIT: "READY_TO_SUBMIT";
     REVIEW_COMPLETE: "REVIEW_COMPLETE";
+    REVIEW_IN_PROGRESS: "REVIEW_IN_PROGRESS";
     WORKFLOW_BLOCKING: "WORKFLOW_BLOCKING";
     WORKFLOW_NONBLOCKING: "WORKFLOW_NONBLOCKING";
 };

package/dist/typed-client/schema.js

@@ -346,6 +346,7 @@ export const enumAppRequestStatus = {
     READY_TO_ACCEPT: 'READY_TO_ACCEPT',
     READY_TO_SUBMIT: 'READY_TO_SUBMIT',
     REVIEW_COMPLETE: 'REVIEW_COMPLETE',
+    REVIEW_IN_PROGRESS: 'REVIEW_IN_PROGRESS',
     STARTED: 'STARTED',
     WITHDRAWN: 'WITHDRAWN'
 };
@@ -361,6 +362,7 @@ export const enumApplicationPhase = {
     READY_TO_COMPLETE: 'READY_TO_COMPLETE',
     READY_TO_SUBMIT: 'READY_TO_SUBMIT',
     REVIEW_COMPLETE: 'REVIEW_COMPLETE',
+    REVIEW_IN_PROGRESS: 'REVIEW_IN_PROGRESS',
     WORKFLOW_BLOCKING: 'WORKFLOW_BLOCKING',
     WORKFLOW_NONBLOCKING: 'WORKFLOW_NONBLOCKING'
 };

package/package.json

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