dce-reactkit 3.0.0-beta.4 → 3.0.0-beta.40

package/dist/esm/index.js

@@ -1,8 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import 'bootstrap/dist/js/bootstrap.min';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faExclamationTriangle, faCircle } from '@fortawesome/free-solid-svg-icons';
+import { faExclamationTriangle, faCircle, faDotCircle, faCheckSquare } from '@fortawesome/free-solid-svg-icons';
+import { faCircle as faCircle$1, faSquare } from '@fortawesome/free-regular-svg-icons';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -29,7 +28,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-// Highest error code = DRK2
+// Highest error code = DRK8
 /**
  * List of error codes built into the react kit
  * @author Gabe Abrams
@@ -42,6 +41,8 @@ var ReactKitErrorCode;
     ReactKitErrorCode["MissingParameter"] = "DRK4";
     ReactKitErrorCode["InvalidParameter"] = "DRK5";
     ReactKitErrorCode["WrongCourse"] = "DRK6";
+    ReactKitErrorCode["NoCACCLSendRequestFunction"] = "DRK7";
+    ReactKitErrorCode["NoCACCLGetLaunchInfoFunction"] = "DRK8";
 })(ReactKitErrorCode || (ReactKitErrorCode = {}));
 var ReactKitErrorCode$1 = ReactKitErrorCode;
 
@@ -73,9 +74,9 @@ const ErrorBox = (props) => {
             ' ',
             React.createElement("span", { style: {
                     backgroundColor: 'white',
-                    borderRadius: '5px',
-                    paddingLeft: '3px',
-                    paddingRight: '3px',
+                    borderRadius: '0.3rem',
+                    paddingLeft: '0.2rem',
+                    paddingRight: '0.2rem',
                     color: '#DC4150',
                     fontVariant: 'small-caps',
                     fontSize: '80%',
@@ -87,7 +88,7 @@ const ErrorBox = (props) => {
     }
     // Main UI
     return (React.createElement("div", { className: "alert alert-danger text-center", style: {
-            maxWidth: '650px',
+            maxWidth: '40rem',
             margin: 'auto',
         } },
         React.createElement("h4", { className: "mb-1" },
@@ -186,9 +187,7 @@ var ModalSize$1 = ModalSize;
 /*                                Constants                               */
 /*------------------------------------------------------------------------*/
 // Constants
-const MS_TO_ANIMATE = 400; // Time to animate in/out (defined by bootstrap)
-const MS_ANIMATE_IN_DELAY = 10;
-// Time to wait before animating in (must be >0 or animation won't trigger)
+const MS_TO_ANIMATE = 200; // Animation duration
 // Modal type to list of buttons
 const modalTypeToModalButtonTypes = {
     [ModalType$1.Okay]: [
@@ -268,6 +267,114 @@ const ModalButtonTypeToLabelAndVariant = {
     },
 };
 /*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+const style$2 = `
+  .Modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vw;
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .Modal-fading-in {
+    animation-name: Modal-fading-in;
+    animation-duration: ${Math.floor(MS_TO_ANIMATE * 2)}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-out;
+  }
+
+  @keyframes Modal-fading-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .Modal-fading-out {
+    animation-name: Modal-fading-out;
+    animation-duration: ${MS_TO_ANIMATE}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-in;
+  }
+
+  @keyframes Modal-fading-out {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  .Modal-animating-in {
+    animation-name: Modal-animating-in;
+    animation-duration: ${MS_TO_ANIMATE}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-out;
+  }
+
+  @keyframes Modal-animating-in {
+    0% {
+      transform: scale(1.05) translate(0, -1.5rem);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1) translate(0, 0);
+      opacity: 1;
+    }
+  }
+
+  .Modal-animating-pop {
+    animation-name: Modal-animating-pop;
+    animation-duration: ${MS_TO_ANIMATE}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-in-out;
+  }
+
+  @keyframes Modal-animating-pop {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(1.05);
+      opacity: 0.9;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .Modal-animating-out {
+    animation-name: Modal-animating-out;
+    animation-duration: ${MS_TO_ANIMATE}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-in;
+  }
+
+  @keyframes Modal-animating-out {
+    0% {
+      transform: scale(1) translate(0, 0);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.05) translate(0, -1.5rem);
+      opacity: 0;
+    }
+  }
+`;
+/*------------------------------------------------------------------------*/
 /*                                Component                               */
 /*------------------------------------------------------------------------*/
 const Modal = (props) => {
@@ -278,10 +385,15 @@ const Modal = (props) => {
     /* -------------- Props ------------- */
     const { type = ModalType$1.NoButtons, size = ModalSize$1.Large, title, children, onClose, dontAllowBackdropExit, onTopOfOtherModals, } = props;
     /* -------------- State ------------- */
+    // If true, the modal is completely gone
+    // (not just invisible, also removed from the dom)
+    const [gone, setGone] = useState(false);
     // If true, the modal is shown
     const [visible, setVisible] = useState(false);
-    // True if currently animating in
-    const [animatingIn, setAnimatingIn] = useState(false);
+    // True if animation is in use
+    const [animatingIn, setAnimatingIn] = useState(true);
+    const [animatingPop, setAnimatingPop] = useState(false);
+    const [animatingOut, setAnimatingOut] = useState(false);
     /*------------------------------------------------------------------------*/
     /*                           Lifecycle Functions                          */
     /*------------------------------------------------------------------------*/
@@ -291,12 +403,10 @@ const Modal = (props) => {
      */
     useEffect(() => {
         (() => __awaiter(void 0, void 0, void 0, function* () {
-            // Start the component animating in
-            yield waitMs(MS_ANIMATE_IN_DELAY);
-            setAnimatingIn(true);
             // Wait and then set visible to true
             yield waitMs(MS_TO_ANIMATE);
             setVisible(true);
+            setAnimatingIn(false);
         }))();
     }, []);
     /*------------------------------------------------------------------------*/
@@ -323,13 +433,19 @@ const Modal = (props) => {
         }
         // Update the state
         setVisible(false);
+        setAnimatingOut(true);
         // Call the handler after the modal has animated out
         yield waitMs(MS_TO_ANIMATE);
         onClose(ModalButtonType);
+        setGone(true);
     });
     /*------------------------------------------------------------------------*/
     /*                                 Render                                 */
     /*------------------------------------------------------------------------*/
+    // Return nothing if gone
+    if (gone) {
+        return null;
+    }
     /*----------------------------------------*/
     /*                 Footer                 */
     /*----------------------------------------*/
@@ -351,7 +467,7 @@ const Modal = (props) => {
         // Check if this button is last
         const last = (i === ModalButtonTypes.length - 1);
         // Create the button
-        return (React.createElement("button", { type: "button", className: `Modal-${ModalButtonType}-button btn btn-${variant} ${last ? '' : 'mr-1'}`, onClick: () => {
+        return (React.createElement("button", { key: ModalButtonType, type: "button", className: `Modal-${ModalButtonType}-button btn btn-${variant} ${last ? '' : 'me-1'}`, onClick: () => {
                 handleClose(ModalButtonType);
             } }, label));
     });
@@ -359,21 +475,62 @@ const Modal = (props) => {
     const footer = ((buttons && buttons.length)
         ? (React.createElement("div", null, buttons))
         : undefined);
+    // Choose an animation
+    let animationClass = '';
+    let backdropAnimationClass = '';
+    if (animatingIn) {
+        animationClass = 'Modal-animating-in';
+        backdropAnimationClass = 'Modal-fading-in';
+    }
+    else if (animatingOut) {
+        animationClass = 'Modal-animating-out';
+        backdropAnimationClass = 'Modal-fading-out';
+    }
+    else if (animatingPop) {
+        animationClass = 'Modal-animating-pop';
+    }
     // Render the modal
-    return (React.createElement("div", { className: `modal fade modal-${size}`, tabIndex: -1, style: {
+    return (React.createElement("div", { className: `modal show modal-dialog-scrollable modal-dialog-centered modal-${size}`, tabIndex: -1, style: {
             zIndex: (onTopOfOtherModals
-                ? 6000000000
+                ? 5000000001
                 : 5000000000),
+            display: 'block',
+            margin: 'auto',
+            left: 0,
+            right: 0,
         } },
-        React.createElement("div", { className: "modal-dialog" },
+        React.createElement("style", null, style$2),
+        React.createElement("div", { className: `Modal-backdrop ${backdropAnimationClass}`, style: {
+                zIndex: 5000000003,
+            }, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                // Skip if exit via backdrop not allowed
+                if (dontAllowBackdropExit || !onClose) {
+                    // Show pop animation
+                    if (!animatingPop) {
+                        setAnimatingPop(true);
+                        // Wait then stop pop animation
+                        yield waitMs(MS_TO_ANIMATE);
+                        setAnimatingPop(false);
+                    }
+                    return;
+                }
+                // Handle close
+                handleClose(ModalButtonType$1.Cancel);
+            }) }),
+        React.createElement("div", { className: `modal-dialog ${animationClass}`, style: {
+                zIndex: 5000000002,
+            } },
             React.createElement("div", { className: "modal-content" },
                 React.createElement("div", { className: "modal-header" },
-                    React.createElement("h5", { className: "modal-title" }, title),
-                    onClose && (React.createElement("button", { type: "button", className: "btn-close", "data-bs-dismiss": "modal", "aria-label": "Close", onClick: () => {
+                    React.createElement("h5", { className: "modal-title", style: {
+                            fontWeight: 'bold',
+                        } }, title),
+                    onClose && (React.createElement("button", { type: "button", className: "btn-close", "aria-label": "Close", onClick: () => {
+                            // Handle close
                             handleClose(ModalButtonType$1.Cancel);
                         } }))),
                 children && (React.createElement("div", { className: "modal-body" }, children)),
-                footer && (React.createElement("div", { className: "modal-footer" }, footer))))));
+                footer && (React.createElement("div", { className: "modal-footer pt-1 pb-1" }, footer))))));
 };
 
 /**
@@ -397,6 +554,24 @@ class ErrorWithCode extends Error {
 /*                             Static Helpers                             */
 /*------------------------------------------------------------------------*/
 /*----------------------------------------*/
+/*              Send Request              */
+/*----------------------------------------*/
+// Store copy of caccl send request
+let _cacclSendRequest;
+/**
+ * Send a request using caccl's send request feature
+ * @author Gabe Abrams
+ * @param opts send request options
+ * @returns send request response
+ */
+const cacclSendRequest = (opts) => __awaiter(void 0, void 0, void 0, function* () {
+    // Make sure send request has been passed in
+    if (!_cacclSendRequest) {
+        throw new ErrorWithCode('The request could not be sent because the AppWrapper component does not have a copy of sendRequest from CACCL.', ReactKitErrorCode$1.NoCACCLSendRequestFunction);
+    }
+    return _cacclSendRequest(opts);
+});
+/*----------------------------------------*/
 /*                  Alert                 */
 /*----------------------------------------*/
 // Stored copies of setters
@@ -408,7 +583,7 @@ let onAlertClosed;
  * @param title the title text to display at the top of the alert
  * @param text the text to display in the alert
  */
-const alert = (title, text) => __awaiter(void 0, void 0, void 0, function* () {
+const alert$1 = (title, text) => __awaiter(void 0, void 0, void 0, function* () {
     // Fallback if alert not available
     if (!setAlertInfo) {
         window.alert(`${title}\n\n${text}`);
@@ -482,7 +657,7 @@ const showFatalError = (error, errorTitle = 'An Error Occurred') => {
         : String((_b = error.code) !== null && _b !== void 0 ? _b : ReactKitErrorCode$1.NoCode));
     // Handle case where app hasn't loaded
     if (!setFatalErrorMessage || !setFatalErrorCode) {
-        alert(errorTitle, `${message} (code: ${code}). Please contact support.`);
+        alert$1(errorTitle, `${message} (code: ${code}). Please contact support.`);
         return undefined;
     }
     // Use setters
@@ -499,7 +674,9 @@ const AppWrapper = (props) => {
     /*                                  Setup                                 */
     /*------------------------------------------------------------------------*/
     /* -------------- Props ------------- */
-    const { children, dark, sessionExpiredMessage = 'Your session has expired. Please go back to Canvas and start over.', } = props;
+    const { children, sendRequest, dark, sessionExpiredMessage = 'Your session has expired. Please go back to Canvas and start over.', } = props;
+    // Store copy of send request
+    _cacclSendRequest = sendRequest;
     /* -------------- State ------------- */
     // Fatal error
     const [fatalErrorMessage, setFatalErrorMessageInner,] = useState();
@@ -509,10 +686,10 @@ const AppWrapper = (props) => {
     const [fatalErrorTitle, setFatalErrorTitleInner,] = useState();
     setFatalErrorTitle = setFatalErrorTitleInner;
     // Alert
-    const [alertInfo, setAlertInfoInner,] = useState();
+    const [alertInfo, setAlertInfoInner,] = useState(undefined);
     setAlertInfo = setAlertInfoInner;
     // Confirm
-    const [confirmInfo, setConfirmInfoInner,] = useState();
+    const [confirmInfo, setConfirmInfoInner,] = useState(undefined);
     setConfirmInfo = setConfirmInfoInner;
     // Session expired
     const [sessionHasExpired, setSessionHasExpiredInner,] = useState(false);
@@ -526,8 +703,9 @@ const AppWrapper = (props) => {
     let modal;
     /* -------------- Alert ------------- */
     if (alertInfo) {
-        modal = (React.createElement(Modal, { title: alertInfo.title, type: ModalType$1.Okay, onClose: () => {
+        modal = (React.createElement(Modal, { key: `alert-${alertInfo.title}-${alertInfo.text}`, title: alertInfo.title, type: ModalType$1.Okay, onClose: () => {
                 // Alert closed
+                setAlertInfo(undefined);
                 if (onAlertClosed) {
                     onAlertClosed();
                 }
@@ -535,11 +713,12 @@ const AppWrapper = (props) => {
     }
     /* ------------- Confirm ------------ */
     if (confirmInfo) {
-        modal = (React.createElement(Modal, { title: confirmInfo.title, type: ModalType$1.OkayCancel, onClose: (buttonType) => {
+        modal = (React.createElement(Modal, { key: `confirm-${confirmInfo.title}-${confirmInfo.text}`, title: confirmInfo.title, type: ModalType$1.OkayCancel, onClose: (buttonType) => {
+                setConfirmInfo(undefined);
                 if (onConfirmClosed) {
                     onConfirmClosed(buttonType === ModalButtonType$1.Okay);
                 }
-            }, dontAllowBackdropExit: true }));
+            }, dontAllowBackdropExit: true }, confirmInfo.text));
     }
     /*----------------------------------------*/
     /*                  Views                 */
@@ -591,10 +770,10 @@ const style$1 = `
 .LoadingSpinner-blip-2,
 .LoadingSpinner-blip-3,
 .LoadingSpinner-blip-4 {
-  font-size: 25px;
+  font-size: 1.8rem;
   opacity: 0.6;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 /* First Blip */
@@ -661,63 +840,67 @@ const LoadingSpinner = () => {
 /*                                  Style                                 */
 /*------------------------------------------------------------------------*/
 const style = `
-/* Tab Box */
-.TabBox-box {
-  /* Light Border */
-  border: 2px solid #dedede;
-  
-  /* Rounded Corners (except top-left) */
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius: 5px;
-  border-top-right-radius: 5px;
-
-  /* Very Light Gray Border */
-  background: #fdfdfd;
-
-  /* Align Contents on Left */
-  text-align: left;
-}
+  /* Tab Box */
+  .TabBox-box {
+    /* Light Border */
+    border: 0.15rem solid #dedede;
+    
+    /* Rounded Corners (except top-left) */
+    border-bottom-right-radius: 0.3rem;
+    border-bottom-left-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
 
-/* Container for Title */
-.TabBox-title-container {
-  /* Place on Left */
-  position: relative;
-  left: 0;
-  text-align: left;
-}
+    /* Very Light Gray Border */
+    background: #fdfdfd;
+
+    /* Align Contents on Left */
+    text-align: left;
 
-/* Tab-style Title */
-.TabBox-title {
-  /* Place so it Barely Overlaps the Box Border */
-  display: inline-block;
-  position: relative;
-  top: 2px; /* Gives Illusion that Border Doesn't Exist Below Tab */
+    /* Add Text Padding */
+    padding-left: 0.3rem;
+    padding-right: 0.3rem;
+  }
 
-  /* Title-sized Font */
-  font-size: 25px;
+  /* Container for Title */
+  .TabBox-title-container {
+    /* Place on Left */
+    position: relative;
+    left: 0;
+    text-align: left;
+  }
 
-  /* Add Border on Top and Sides */
-  border-top: 2px solid #dedede;
-  border-left: 2px solid #dedede;
-  border-right: 2px solid #dedede;
+  /* Tab-style Title */
+  .TabBox-title {
+    /* Place so it Barely Overlaps the Box Border */
+    display: inline-block;
+    position: relative;
+    top: 0.15rem; /* Gives Illusion that Border Doesn't Exist Below Tab */
 
-  /* Round the Top Corners */
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
+    /* Title-sized Font */
+    font-size: 1.5rem;
 
-  /* Add Text Padding */
-  padding-left: 12px;
-  padding-right: 12px;
+    /* Add Border on Top and Sides */
+    border-top: 0.15rem solid #dedede;
+    border-left: 0.15rem solid #dedede;
+    border-right: 0.15rem solid #dedede;
 
-  /* Match Background Color of Box */
-  background: #fdfdfd;
-}
+    /* Round the Top Corners */
+    border-top-left-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
 
-/* Make the TabBox's Children Appear Above Title if Overlap Occurs */
-.TabBox-children {
-  position: relative;
-  z-index: 1;
-}
+    /* Add Text Padding */
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+
+    /* Match Background Color of Box */
+    background: #fdfdfd;
+  }
+
+  /* Make the TabBox's Children Appear Above Title if Overlap Occurs */
+  .TabBox-children {
+    position: relative;
+    z-index: 1;
+  }
 `;
 /*------------------------------------------------------------------------*/
 /*                                Component                               */
@@ -727,7 +910,7 @@ const TabBox = (props) => {
     /*                                  Setup                                 */
     /*------------------------------------------------------------------------*/
     /* -------------- Props ------------- */
-    const { title, children, } = props;
+    const { title, children, noBottomPadding, } = props;
     /*------------------------------------------------------------------------*/
     /*                                 Render                                 */
     /*------------------------------------------------------------------------*/
@@ -735,7 +918,7 @@ const TabBox = (props) => {
     /*                 Main UI                */
     /*----------------------------------------*/
     // Full UI
-    return (React.createElement("div", null,
+    return (React.createElement("div", { className: `TabBox-container ${noBottomPadding ? '' : 'mb-2'}` },
         React.createElement("style", null, style),
         React.createElement("div", { className: "TabBox-title-container" },
             React.createElement("div", { className: "TabBox-title" }, title)),
@@ -743,6 +926,95 @@ const TabBox = (props) => {
             React.createElement("div", { className: "TabBox-children" }, children))));
 };
 
+/**
+ * A radio selection button
+ * @author Gabe Abrams
+ */
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+const RadioButton = (props) => {
+    /*------------------------------------------------------------------------*/
+    /*                                  Setup                                 */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    const { text, onSelected, ariaLabel, title, selected, id, noMarginOnRight, selectedVariant = Variant$1.Secondary, unselectedVariant = Variant$1.Light, small, } = props;
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                Main UI                 */
+    /*----------------------------------------*/
+    return (React.createElement("button", { type: "button", id: id, title: title, className: `btn btn-${selected ? selectedVariant : unselectedVariant}${selected ? ' selected' : ''}${small ? ' btn-sm' : ''} m-0${noMarginOnRight ? '' : ' me-1'}`, "aria-label": `${ariaLabel}${selected ? ': currently selected' : ''}`, onClick: () => {
+            if (!selected) {
+                onSelected();
+            }
+        } },
+        React.createElement(FontAwesomeIcon, { icon: selected ? faDotCircle : faCircle$1, className: "me-1" }),
+        text));
+};
+
+/**
+ * A checkbox button
+ * @author Gabe Abrams
+ */
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+const CheckboxButton = (props) => {
+    /*------------------------------------------------------------------------*/
+    /*                                  Setup                                 */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    const { text, onChanged, ariaLabel, title, checked, id, noMarginOnRight, checkedVariant = Variant$1.Secondary, uncheckedVariant = Variant$1.Light, small, } = props;
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                Main UI                 */
+    /*----------------------------------------*/
+    return (React.createElement("button", { type: "button", id: id, title: title, className: `btn btn-${checked ? checkedVariant : uncheckedVariant}${checked ? ' selected' : ''}${small ? ' btn-sm' : ''} m-0${noMarginOnRight ? '' : ' me-1'}`, "aria-label": `${ariaLabel}${checked ? ': currently checked' : ''}`, onClick: () => {
+            onChanged(!checked);
+        } },
+        React.createElement(FontAwesomeIcon, { icon: checked ? faCheckSquare : faSquare, className: "me-1" }),
+        text));
+};
+
+/**
+ * Input group with a title and space for buttons
+ * @author Gabe Abrams
+ */
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+const ButtonInputGroup = (props) => {
+    /*------------------------------------------------------------------------*/
+    /*                                  Setup                                 */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    // Destructure all props
+    const { label, minLabelWidth, children, } = props;
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                 Main UI                */
+    /*----------------------------------------*/
+    return (React.createElement("div", { className: "input-group" },
+        React.createElement("div", { className: "input-group-prepend d-flex w-100" },
+            React.createElement("span", { className: "input-group-text", style: {
+                    minWidth: (minLabelWidth !== null && minLabelWidth !== void 0 ? minLabelWidth : undefined),
+                    borderTopRightRadius: 0,
+                    borderBottomRightRadius: 0,
+                } }, label),
+            React.createElement("span", { className: "input-group-text flex-grow-1 rounded-right", style: {
+                    backgroundColor: 'white',
+                    borderTopLeftRadius: 0,
+                    borderBottomLeftRadius: 0,
+                    borderLeftWidth: 0,
+                } }, children))));
+};
+
 /**
  * Shorten text so it fits into a certain number of chars
  * @author Gabe Abrams
@@ -886,5 +1158,423 @@ const roundToNumDecimals = (num, numDecimals) => {
     return (Math.round(num * rounder) / rounder);
 };
 
-export { AppWrapper, ErrorBox, ErrorWithCode, LoadingSpinner, Modal, ModalButtonType$1 as ModalButtonType, ModalSize$1 as ModalSize, ModalType$1 as ModalType, ReactKitErrorCode$1 as ReactKitErrorCode, TabBox, Variant$1 as Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, showFatalError, sum, waitMs };
+// Keep track of whether or not session expiry has already been handled
+let sessionAlreadyExpired = false;
+/*------------------------------------------------------------------------*/
+/*                                  Main                                  */
+/*------------------------------------------------------------------------*/
+/**
+ * Visit an endpoint on the server [for client only]
+ * @author Gabe Abrams
+ * @param opts object containing all arguments
+ * @param opts.path - the path of the server endpoint
+ * @param [opts.method=GET] - the method of the endpoint
+ * @param [opts.params] - query/body parameters to include
+ * @returns response from server
+ */
+const visitServerEndpoint = (opts) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    // Send the request
+    const response = yield cacclSendRequest({
+        path: opts.path,
+        method: (_a = opts.method) !== null && _a !== void 0 ? _a : 'GET',
+        params: opts.params,
+    });
+    // Check for failure
+    if (!response || !response.body) {
+        throw new ErrorWithCode('We didn\'t get a response from the server. Please check your internet connection.', ReactKitErrorCode$1.NoResponse);
+    }
+    if (!response.body.success) {
+        // Session expired
+        if (response.body.code === ReactKitErrorCode$1.SessionExpired) {
+            // Skip notice if session was already expired
+            if (sessionAlreadyExpired) {
+                // Never return (browser is already reloading)
+                yield new Promise(() => {
+                    // Promise that never returns
+                });
+            }
+            sessionAlreadyExpired = true;
+            // Show session expiration message
+            {
+                // Fallback to alert
+                // eslint-disable-next-line no-alert
+                alert('Your session has expired. Please start over.');
+            }
+            // Never return (don't continue execution)
+            yield new Promise(() => {
+                // Promise that never returns
+            });
+        }
+        // Other errors
+        throw new ErrorWithCode((response.body.message
+            || 'An unknown error occurred. Please contact an admin.'), (response.body.code
+            || ReactKitErrorCode$1.NoCode));
+    }
+    // Success! Extract the body
+    const { body } = response.body;
+    // Return
+    return body;
+});
+
+// Import custom error
+// Stored copy of caccl functions
+let _cacclGetLaunchInfo;
+/*------------------------------------------------------------------------*/
+/*                                 Helpers                                */
+/*------------------------------------------------------------------------*/
+/**
+ * Get launch info via CACCL
+ * @author Gabe Abrams
+ * @param req express request object
+ * @returns object { launched, launchInfo }
+ */
+const cacclGetLaunchInfo = (req) => {
+    if (!_cacclGetLaunchInfo) {
+        throw new ErrorWithCode('Could not get launch info because server was not initialized with dce-reactkit\'s initServer function', ReactKitErrorCode$1.NoCACCLGetLaunchInfoFunction);
+    }
+    return _cacclGetLaunchInfo(req);
+};
+/*------------------------------------------------------------------------*/
+/*                                  Main                                  */
+/*------------------------------------------------------------------------*/
+/**
+ * Prepare dce-reactkit to run on the server
+ * @author Gabe Abrams
+ * @param opts object containing all arguments
+ * @param opts.getLaunchInfo CACCL LTI's get launch info function
+ */
+const initServer = (opts) => {
+    _cacclGetLaunchInfo = opts.getLaunchInfo;
+};
+
+/**
+ * Server-side API param types
+ * @author Gabe Abrams
+ */
+var ParamType;
+(function (ParamType) {
+    ParamType["Boolean"] = "boolean";
+    ParamType["BooleanOptional"] = "boolean-optional";
+    ParamType["Float"] = "float";
+    ParamType["FloatOptional"] = "float-optional";
+    ParamType["Int"] = "int";
+    ParamType["IntOptional"] = "int-optional";
+    ParamType["JSON"] = "json";
+    ParamType["JSONOptional"] = "json-optional";
+    ParamType["String"] = "string";
+    ParamType["StringOptional"] = "string-optional";
+})(ParamType || (ParamType = {}));
+var ParamType$1 = ParamType;
+
+// Import shared types
+/**
+ * Handle an error and respond to the client
+ * @author Gabe Abrams
+ * @param res express response
+ * @param error error info
+ * @param opts.err the error to send to the client
+ *   or the error message
+ * @param [opts.code] an error code (only used if err.code is not
+ *   included)
+ * @param [opts.status=500] the https status code to use
+ *   defined)
+ */
+const handleError = (res, error) => {
+    // Get the error message
+    let message;
+    if (error && error.message) {
+        message = (error.message || 'An unknown error occurred.');
+    }
+    else if (typeof error === 'string') {
+        message = (error.trim().length > 0
+            ? error
+            : 'An unknown error occurred.');
+    }
+    else {
+        message = 'An unknown error occurred.';
+    }
+    // Get the error code
+    const code = (error.code || ReactKitErrorCode$1.NoCode);
+    // Get the status code
+    const status = (error.status || 500);
+    // Respond to user
+    res
+        // Set the http status code
+        .status(status)
+        // Send a JSON response
+        .json({
+        // Error message
+        message,
+        // Error code
+        code,
+        // Success = false flag so client can detect server-side errors
+        success: false,
+    });
+    return undefined;
+};
+
+/**
+ * Send successful API response
+ * @author Gabe Abrams
+ * @param res express response
+ * @param body the body of the response to send to the client
+ */
+const handleSuccess = (res, body) => {
+    // Send a http 200 json response
+    res.json({
+        // Include the body as a parameter
+        body,
+        // Success = true flag so client can detect successful responses
+        success: true,
+    });
+    return undefined;
+};
+
+/**
+ * Generate an express API route handler
+ * @author Gabe Abrams
+ * @param opts object containing all arguments
+ * @param opts.paramTypes map containing the types for each parameter that is
+ *   included in the request (map: param name => type)
+ * @param opts.handler function that processes the request
+ * @returns express route handler that takes the following arguments:
+ *   params (map: param name => value), handleSuccess (function for handling
+ *   successful requests), handleError (function for handling failed requests),
+ *   req (express request object), res (express response object)
+ */
+const genRouteHandler = (opts) => {
+    // Return a route handler
+    return (req, res) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        // Output params
+        const output = {};
+        /*----------------------------------------*/
+        /*              Parse Params              */
+        /*----------------------------------------*/
+        // Process items one by one
+        const paramList = Object.entries((_a = opts.paramTypes) !== null && _a !== void 0 ? _a : {});
+        for (let i = 0; i < paramList.length; i++) {
+            const [name, type] = paramList[i];
+            // Find the value as a string
+            const value = (req.params[name]
+                || req.query[name]
+                || req.body[name]);
+            // Parse
+            if (type === ParamType$1.Boolean || type === ParamType$1.BooleanOptional) {
+                // Boolean
+                // Handle case where value doesn't exist
+                if (value === undefined) {
+                    if (type === ParamType$1.BooleanOptional) {
+                        output[name] = undefined;
+                    }
+                    else {
+                        return handleError(res, {
+                            message: `Parameter ${name} is required, but it was not included.`,
+                            code: ReactKitErrorCode$1.MissingParameter,
+                            status: 422,
+                        });
+                    }
+                }
+                else {
+                    // Value exists
+                    // Simplify value
+                    const simpleVal = (String(value)
+                        .trim()
+                        .toLowerCase());
+                    // Parse
+                    output[name] = ([
+                        'true',
+                        'yes',
+                        'y',
+                        '1',
+                        't',
+                    ].indexOf(simpleVal) >= 0);
+                }
+            }
+            else if (type === ParamType$1.Float || type === ParamType$1.FloatOptional) {
+                // Float
+                // Handle case where value doesn't exist
+                if (value === undefined) {
+                    if (type === ParamType$1.FloatOptional) {
+                        output[name] = undefined;
+                    }
+                    else {
+                        return handleError(res, {
+                            message: `Parameter ${name} is required, but it was not included.`,
+                            code: ReactKitErrorCode$1.MissingParameter,
+                            status: 422,
+                        });
+                    }
+                }
+                else if (!Number.isNaN(Number.parseFloat(String(value)))) {
+                    // Value is a number
+                    output[name] = Number.parseFloat(String(value));
+                }
+                else {
+                    // Issue!
+                    return handleError(res, {
+                        message: `Request data was malformed: ${name} was not a valid float.`,
+                        code: ReactKitErrorCode$1.InvalidParameter,
+                        status: 422,
+                    });
+                }
+            }
+            else if (type === ParamType$1.Int || type === ParamType$1.IntOptional) {
+                // Int
+                // Handle case where value doesn't exist
+                if (value === undefined) {
+                    if (type === ParamType$1.IntOptional) {
+                        output[name] = undefined;
+                    }
+                    else {
+                        return handleError(res, {
+                            message: `Parameter ${name} is required, but it was not included.`,
+                            code: ReactKitErrorCode$1.MissingParameter,
+                            status: 422,
+                        });
+                    }
+                }
+                else if (!Number.isNaN(Number.parseInt(String(value), 10))) {
+                    // Value is a number
+                    output[name] = Number.parseInt(String(value), 10);
+                }
+                else {
+                    // Issue!
+                    return handleError(res, {
+                        message: `Request data was malformed: ${name} was not a valid int.`,
+                        code: ReactKitErrorCode$1.InvalidParameter,
+                        status: 422,
+                    });
+                }
+            }
+            else if (type === ParamType$1.JSON || type === ParamType$1.JSONOptional) {
+                // Stringified JSON
+                // Handle case where value doesn't exist
+                if (value === undefined) {
+                    if (type === ParamType$1.JSONOptional) {
+                        output[name] = undefined;
+                    }
+                    else {
+                        return handleError(res, {
+                            message: `Parameter ${name} is required, but it was not included.`,
+                            code: ReactKitErrorCode$1.MissingParameter,
+                            status: 422,
+                        });
+                    }
+                }
+                else {
+                    // Value exists
+                    // Parse
+                    try {
+                        output[name] = JSON.parse(String(value));
+                    }
+                    catch (err) {
+                        return handleError(res, {
+                            message: `Request data was malformed: ${name} was not a valid JSON payload.`,
+                            code: ReactKitErrorCode$1.InvalidParameter,
+                            status: 422,
+                        });
+                    }
+                }
+            }
+            else if (type === ParamType$1.String || type === ParamType$1.StringOptional) {
+                // String
+                // Handle case where value doesn't exist
+                if (value === undefined) {
+                    if (type === ParamType$1.StringOptional) {
+                        output[name] = undefined;
+                    }
+                    else {
+                        return handleError(res, {
+                            message: `Parameter ${name} is required, but it was not included.`,
+                            code: ReactKitErrorCode$1.MissingParameter,
+                            status: 422,
+                        });
+                    }
+                }
+                else {
+                    // Value exists
+                    // Leave as is
+                    output[name] = value;
+                }
+            }
+            else {
+                // No valid data type
+                return handleError(res, {
+                    message: `An internal error occurred: we could not determine the type of ${name}.`,
+                    code: ReactKitErrorCode$1.InvalidParameter,
+                    status: 422,
+                });
+            }
+        }
+        /*----------------------------------------*/
+        /*               Launch Info              */
+        /*----------------------------------------*/
+        // Get launch info
+        const { launched, launchInfo } = cacclGetLaunchInfo(req);
+        if (!launched || !launchInfo) {
+            return handleError(res, {
+                message: 'Your session has expired. Please refresh the page and try again.',
+                code: ReactKitErrorCode$1.SessionExpired,
+                status: 440,
+            });
+        }
+        // Error if user info cannot be found
+        if (!launchInfo.userId
+            || !launchInfo.userFirstName
+            || !launchInfo.userLastName
+            || (launchInfo.notInCourse
+                && !launchInfo.isAdmin)
+            || (!launchInfo.isTTM
+                && !launchInfo.isLearner
+                && !launchInfo.isAdmin)) {
+            return handleError(res, {
+                message: 'Your session was invalid. Please refresh the page and try again.',
+                code: ReactKitErrorCode$1.SessionExpired,
+                status: 440,
+            });
+        }
+        // Add launch info to output
+        output.userId = launchInfo.userId;
+        output.userFirstName = launchInfo.userFirstName;
+        output.userLastName = launchInfo.userLastName;
+        output.isLearner = !!launchInfo.isLearner;
+        output.isTTM = !!launchInfo.isTTM;
+        output.isAdmin = !!launchInfo.isAdmin;
+        output.isWatchingInPrivate = !!(req.session.isWatchingInPrivate);
+        /*----------------------------------------*/
+        /*       Require Course Consistency       */
+        /*----------------------------------------*/
+        // Make sure the user actually launched from the appropriate course
+        if (output.courseId
+            && launchInfo.courseId
+            && output.courseId !== launchInfo.courseId
+            && !output.isTTM
+            && !output.isAdmin) {
+            // Course of interest is not the launch course
+            return handleError(res, {
+                message: 'You switched sessions by opening Immersive Classroom in another tab. Please refresh the page and try again.',
+                code: ReactKitErrorCode$1.WrongCourse,
+                status: 401,
+            });
+        }
+        /*------------------------------------------------------------------------*/
+        /*                              Call handler                              */
+        /*------------------------------------------------------------------------*/
+        opts.handler({
+            params: output,
+            handleSuccess: (body) => {
+                return handleSuccess(res, body);
+            },
+            handleError: (error) => {
+                return handleError(res, error);
+            },
+            req,
+            res,
+        });
+    });
+};
+
+export { AppWrapper, ButtonInputGroup, CheckboxButton, ErrorBox, ErrorWithCode, LoadingSpinner, Modal, ModalButtonType$1 as ModalButtonType, ModalSize$1 as ModalSize, ModalType$1 as ModalType, ParamType$1 as ParamType, RadioButton, ReactKitErrorCode$1 as ReactKitErrorCode, TabBox, Variant$1 as Variant, abbreviate, alert$1 as alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, handleError, handleSuccess, initServer, padDecimalZeros, padZerosLeft, roundToNumDecimals, showFatalError, sum, visitServerEndpoint, waitMs };
 //# sourceMappingURL=index.js.map