dce-reactkit 3.0.40 → 3.0.43

package/dist/cjs/index.js

@@ -279,7 +279,7 @@ const ModalButtonTypeToLabelAndVariant = {
 /*------------------------------------------------------------------------*/
 /*                                  Style                                 */
 /*------------------------------------------------------------------------*/
-const style$4 = `
+const style$6 = `
   .Modal-backdrop {
     position: fixed;
     top: 0;
@@ -453,7 +453,7 @@ const Modal = (props) => {
             left: 0,
             right: 0,
         } },
-        React__default["default"].createElement("style", null, style$4),
+        React__default["default"].createElement("style", null, style$6),
         React__default["default"].createElement("div", { className: `Modal-backdrop ${backdropAnimationClass}`, style: {
                 zIndex: 5000000003,
             }, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
@@ -718,7 +718,7 @@ const AppWrapper = (props) => {
 /*------------------------------------------------------------------------*/
 /*                                  Style                                 */
 /*------------------------------------------------------------------------*/
-const style$3 = `
+const style$5 = `
 /* Container fades in */
 .LoadingSpinner-container {
   animation-name: LoadingSpinner-container-fade-in;
@@ -796,7 +796,7 @@ const LoadingSpinner = () => {
     /*------------------------------------------------------------------------*/
     // Add all four blips to a container
     return (React__default["default"].createElement("div", { className: "text-center LoadingSpinner LoadingSpinner-container" },
-        React__default["default"].createElement("style", null, style$3),
+        React__default["default"].createElement("style", null, style$5),
         React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "LoadingSpinner-blip-1 me-1" }),
         React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "LoadingSpinner-blip-2 me-1" }),
         React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "LoadingSpinner-blip-3 me-1" }),
@@ -810,7 +810,7 @@ const LoadingSpinner = () => {
 /*------------------------------------------------------------------------*/
 /*                                  Style                                 */
 /*------------------------------------------------------------------------*/
-const style$2 = `
+const style$4 = `
   /* Tab Box */
   .TabBox-box {
     /* Light Border */
@@ -890,7 +890,7 @@ const TabBox = (props) => {
     /*----------------------------------------*/
     // Full UI
     return (React__default["default"].createElement("div", { className: `TabBox-container ${noBottomMargin ? '' : 'mb-2'}` },
-        React__default["default"].createElement("style", null, style$2),
+        React__default["default"].createElement("style", null, style$4),
         React__default["default"].createElement("div", { className: "TabBox-title-container" },
             React__default["default"].createElement("div", { className: "TabBox-title" }, title)),
         React__default["default"].createElement("div", { className: `TabBox-box ps-2 pt-2 pe-2 ${noBottomPadding ? '' : 'pb-2'}` },
@@ -1162,7 +1162,7 @@ const SimpleDateChooser = (props) => {
 /*------------------------------------------------------------------------*/
 /*                                  Style                                 */
 /*------------------------------------------------------------------------*/
-const style$1 = `
+const style$3 = `
   .Drawer-container {
     margin-left: 1rem;
     margin-right: 1rem;
@@ -1194,7 +1194,7 @@ const Drawer = (props) => {
     /*                 Main UI                */
     /*----------------------------------------*/
     return (React__default["default"].createElement("div", { className: "Drawer-container" },
-        React__default["default"].createElement("style", null, style$1),
+        React__default["default"].createElement("style", null, style$3),
         children));
 };
 
@@ -1205,7 +1205,7 @@ const Drawer = (props) => {
 /*------------------------------------------------------------------------*/
 /*                                  Style                                 */
 /*------------------------------------------------------------------------*/
-const style = `
+const style$2 = `
   .PopSuccessMark-outer-container {
     position: relative;
     display: inline-block;
@@ -1310,7 +1310,7 @@ const PopSuccessMark = (props) => {
             width: `${sizeRem}rem`,
             height: `${sizeRem}rem`,
         }, "aria-label": "checkmark indicating success" },
-        React__default["default"].createElement("style", null, style),
+        React__default["default"].createElement("style", null, style$2),
         React__default["default"].createElement("div", { className: `PopSuccessMark-check-stroke-1 bg-${checkVariant}`, style: {
                 borderRadius: `${sizeRem / 5}rem`,
             } }),
@@ -1319,6 +1319,336 @@ const PopSuccessMark = (props) => {
             } })));
 };
 
+/**
+ * Failure x mark that pops into view
+ * @author Gabe Abrams
+ */
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+const style$1 = `
+  .PopFailureMark-outer-container {
+    position: relative;
+    display: inline-block;
+    border-radius: 50%;
+
+    animation-name: PopFailureMark-outer-container;
+    animation-duration: 0.8s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-out;
+  }
+  @keyframes PopFailureMark-outer-container {
+    0% {
+      opacity: 0;
+      transform: scale(1.5);
+      filter: saturate(0);
+    }
+    80.7% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(1);
+    }
+  }
+
+  .PopFailureMark-x-stroke-1 {
+    position: absolute;
+    left: 25%;
+    top: 19%;
+
+    display: inline-block;
+    height: 16%;
+    width: 70%;
+
+    transform-origin: left;
+
+    animation-name: PopFailureMark-x-stroke-1;
+    animation-duration: 0.3s;
+    animation-delay: 0.3s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+  }
+  @keyframes PopFailureMark-x-stroke-1 {
+    0% {
+      transform: rotate(45deg) scaleX(0);
+    }
+    100% {
+      transform: rotate(45deg) scaleX(1);
+    }
+  }
+
+  .PopFailureMark-x-stroke-2 {
+    position: absolute;
+    left: 75%;
+    top: 19%;
+
+    display: inline-block;
+    height: 16%;
+    width: 70%;
+
+    transform-origin: left;
+
+    animation-name: PopFailureMark-x-stroke-2;
+    animation-duration: 0.3s;
+    animation-delay: 0.6s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-out;
+  }
+  @keyframes PopFailureMark-x-stroke-2 {
+    0% {
+      transform: rotate(135deg) scaleX(0);
+    }
+    100% {
+      transform: rotate(135deg) scaleX(1);
+    }
+  }
+`;
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+const PopFailureMark = (props) => {
+    /*------------------------------------------------------------------------*/
+    /*                                  Setup                                 */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    // Destructure all props
+    const { sizeRem = 3, circleVariant = 'danger', xVariant = 'white', } = props;
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                 Main UI                */
+    /*----------------------------------------*/
+    return (React__default["default"].createElement("div", { className: `PopFailureMark-outer-container bg-${circleVariant}`, style: {
+            width: `${sizeRem}rem`,
+            height: `${sizeRem}rem`,
+        }, "aria-label": "mark indicating failure" },
+        React__default["default"].createElement("style", null, style$1),
+        React__default["default"].createElement("div", { className: `PopFailureMark-x-stroke-1 bg-${xVariant}`, style: {
+                borderRadius: `${sizeRem / 5}rem`,
+            } }),
+        React__default["default"].createElement("div", { className: `PopFailureMark-x-stroke-2 bg-${xVariant}`, style: {
+                borderRadius: `${sizeRem / 5}rem`,
+            } })));
+};
+
+/**
+ * Failure pending that pops into view
+ * @author Gabe Abrams
+ */
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+const style = `
+  .PopPendingMark-outer-container {
+    position: relative;
+    display: inline-block;
+    border-radius: 50%;
+
+    animation-name: PopPendingMark-outer-container;
+    animation-duration: 0.8s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-out;
+  }
+  @keyframes PopPendingMark-outer-container {
+    0% {
+      opacity: 0;
+      transform: scale(1.5);
+      filter: saturate(0);
+    }
+    80.7% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+      filter: saturate(1);
+    }
+  }
+
+  .PopPendingMark-hourglass {
+    position: absolute;
+    left: 28%;
+    top: 21%;
+
+    animation-name: PopPendingMark-pending;
+    animation-duration: 0.3s;
+    animation-delay: 0.3s;
+    animation-fill-mode: both;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+  }
+  @keyframes PopPendingMark-pending {
+    0% {
+      transform: scale(0.7) rotate(30deg);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1) rotate(0);
+      opacity: 1;
+    }
+  }
+`;
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+const PopPendingMark = (props) => {
+    /*------------------------------------------------------------------------*/
+    /*                                  Setup                                 */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    // Destructure all props
+    const { sizeRem = 3, circleVariant = 'warning', hourglassVariant = 'white', } = props;
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                 Main UI                */
+    /*----------------------------------------*/
+    return (React__default["default"].createElement("div", { className: `PopPendingMark-outer-container bg-${circleVariant}`, style: {
+            width: `${sizeRem}rem`,
+            height: `${sizeRem}rem`,
+        }, "aria-label": "mark indicating that the item is pending" },
+        React__default["default"].createElement("style", null, style),
+        React__default["default"].createElement("div", null,
+            React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faHourglass, className: `PopPendingMark-hourglass text-${hourglassVariant}`, style: {
+                    fontSize: `${sizeRem * 0.6}rem`,
+                } }))));
+};
+
+/**
+ * Copiable text box
+ * @author Gabe Abrams
+ */
+/* ------------- Actions ------------ */
+// Types of actions
+var ActionType;
+(function (ActionType) {
+    // Indicate that the text was recently copied
+    ActionType["IndicateRecentlyCopied"] = "indicate-recently-copied";
+    // Clear the status
+    ActionType["ClearRecentlyCopiedStatus"] = "clear-recently-copied-status";
+})(ActionType || (ActionType = {}));
+/**
+ * Reducer that executes actions
+ * @author Gabe Abrams
+ * @param state current state
+ * @param action action to execute
+ */
+const reducer = (state, action) => {
+    switch (action.type) {
+        case ActionType.IndicateRecentlyCopied: {
+            return {
+                recentlyCopied: true,
+            };
+        }
+        case ActionType.ClearRecentlyCopiedStatus: {
+            return {
+                recentlyCopied: false,
+            };
+        }
+        default: {
+            return state;
+        }
+    }
+};
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+const CopiableBox = (props) => {
+    /*------------------------------------------------------------------------*/
+    /*                                  Setup                                 */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    // Destructure all props
+    const { name, text, label, labelIcon, minLabelWidthRem, multiline, numVisibleLines = 10, } = props;
+    /* -------------- State ------------- */
+    // Initial state
+    const initialState = {
+        recentlyCopied: false,
+    };
+    // Initialize state
+    const [state, dispatch] = React.useReducer(reducer, initialState);
+    // Destructure common state
+    const { recentlyCopied, } = state;
+    /*------------------------------------------------------------------------*/
+    /*                           Component Functions                          */
+    /*------------------------------------------------------------------------*/
+    // Determine the id for the copiable text field
+    const copiableFieldClassName = `CopiableBox-text-box-${name}`;
+    /**
+     * Perform a copy
+     * @author Gabe Abrams
+     */
+    const performCopy = () => __awaiter(void 0, void 0, void 0, function* () {
+        // Write to clipboard
+        let copyFailed = false;
+        try {
+            yield navigator.clipboard.writeText(text);
+        }
+        catch (err) {
+            copyFailed = true;
+        }
+        // Try copy again if it failed
+        if (copyFailed) {
+            try {
+                const input = (document.getElementsByClassName(copiableFieldClassName)[0]);
+                input.focus();
+                input.select();
+                document.execCommand('copy');
+                input.blur();
+            }
+            catch (err) {
+                return alert$1('Unable to copy', 'Oops! We couldn\'t copy that to the clipboard. Please copy the text manually.');
+            }
+        }
+        // Show copied notice
+        dispatch({
+            type: ActionType.IndicateRecentlyCopied,
+        });
+        // Wait a moment
+        yield waitMs(4000);
+        // Hide copied notice
+        dispatch({
+            type: ActionType.ClearRecentlyCopiedStatus,
+        });
+    });
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                 Main UI                */
+    /*----------------------------------------*/
+    return (React__default["default"].createElement("div", { className: "input-group mb-2" },
+        React__default["default"].createElement("span", { className: "input-group-text", style: {
+                minWidth: (minLabelWidthRem
+                    ? `${minLabelWidthRem}rem`
+                    : undefined),
+            } },
+            labelIcon && (React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: labelIcon, className: "me-1" })),
+            label),
+        multiline
+            ? (React__default["default"].createElement("textarea", { className: `${copiableFieldClassName} CopiableBox-text-multiline form-control bg-white text-dark`, value: text, "aria-label": `${label} text`, rows: numVisibleLines, readOnly: true }))
+            : (React__default["default"].createElement("input", { type: "text", className: `${copiableFieldClassName} CopiableBox-text-single-line form-control bg-white text-dark`, value: text, "aria-label": `${label} text`, readOnly: true })),
+        React__default["default"].createElement("button", { className: "btn btn-secondary", type: "button", "aria-label": `copy ${label} to the clipboard`, disabled: recentlyCopied, style: {
+                minWidth: '5.2rem',
+            }, onClick: performCopy }, recentlyCopied
+            ? 'Copied!'
+            : (React__default["default"].createElement("span", null,
+                React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faClipboard, className: "me-1" }),
+                "Copy")))));
+};
+
 /**
  * One minute in ms
  * @author Gabe Abrams
@@ -2071,7 +2401,7 @@ const getHumanReadableDate = (dateOrTimestamp) => {
     const { month, day, year, } = getTimeInfoInET(dateOrTimestamp);
     const currYear = getTimeInfoInET().year;
     // Create start of description
-    let description = `${monthMap[month]} ${getOrdinal(day)}`;
+    let description = `${monthMap[month]} ${day}${getOrdinal(day)}`;
     // Add on year if it's different
     if (year !== currYear) {
         description += ` ${year}`;
@@ -2083,6 +2413,7 @@ const getHumanReadableDate = (dateOrTimestamp) => {
 exports.AppWrapper = AppWrapper;
 exports.ButtonInputGroup = ButtonInputGroup;
 exports.CheckboxButton = CheckboxButton;
+exports.CopiableBox = CopiableBox;
 exports.DAY_IN_MS = DAY_IN_MS;
 exports.Drawer = Drawer;
 exports.ErrorBox = ErrorBox;
@@ -2095,6 +2426,8 @@ exports.ModalButtonType = ModalButtonType$1;
 exports.ModalSize = ModalSize$1;
 exports.ModalType = ModalType$1;
 exports.ParamType = ParamType$1;
+exports.PopFailureMark = PopFailureMark;
+exports.PopPendingMark = PopPendingMark;
 exports.PopSuccessMark = PopSuccessMark;
 exports.RadioButton = RadioButton;
 exports.ReactKitErrorCode = ReactKitErrorCode$1;