jcicl 0.0.68 → 0.0.70

package/base/Loading/Loading.d.ts

@@ -1,5 +1,7 @@
 import { CircularProgressProps } from '@mui/material/CircularProgress';
+import { CSSObject } from '@emotion/react';
 export interface LoadingProps extends CircularProgressProps {
+    styles?: CSSObject;
 }
-declare const WithLoading: React.FC<LoadingProps>;
-export default WithLoading;
+declare const Loading: React.FC<LoadingProps>;
+export default Loading;

package/base/Loading/Loading.js

@@ -2,12 +2,13 @@ import { jsx as o } from "react/jsx-runtime";
 import { n as s } from "../../.chunks/emotion-styled.browser.esm.js";
 import { c as t } from "../../.chunks/emotion-react.browser.esm.js";
 import e from "../../theme.js";
-import { C as i } from "../../.chunks/CircularProgress.js";
-const m = s(i)({
+import { C as m } from "../../.chunks/CircularProgress.js";
+const i = s(m)(({ styles: r }) => ({
   ...t`
     color: ${e.colors.green};
+    ${r};
   `
-}), p = ({ ...r }) => /* @__PURE__ */ o(m, { size: 47, ...r });
+})), p = ({ ...r }) => /* @__PURE__ */ o(i, { size: 47, ...r });
 export {
   p as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.68",
+  "version": "0.0.70",
   "description": "Component library for the websites of Johnson County Iowa",
   "license": "MIT",
   "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",

package/supercomposite/EditableInfoCard/EditableInfoCard.d.ts

@@ -19,6 +19,9 @@ interface EditableInfoCardStyleProps {
     onCancel?: () => void;
     onEdit?: () => void;
     width?: string;
+    /** If true, the card renders a loading spinner as content */
+    loading?: boolean;
+    loadingStyles?: CSSObject;
 }
 export interface EditableInfoCardProps extends EditableInfoCardStyleProps {
     title?: string;

package/supercomposite/EditableInfoCard/EditableInfoCard.js

@@ -1,33 +1,35 @@
-import { jsx as o, jsxs as l } from "react/jsx-runtime";
-import { useState as I } from "react";
+import { jsx as o, jsxs as a, Fragment as U } from "react/jsx-runtime";
+import { useState as v } from "react";
 import { n as d } from "../../.chunks/emotion-styled.browser.esm.js";
 import { c as f } from "../../.chunks/emotion-react.browser.esm.js";
 import { c as x } from "../../.chunks/createSvgIcon.js";
 import i from "../../theme.js";
-import { LabeledValue as F } from "../../base/LabeledValue/LabeledValue.js";
-import { LabeledInput as U } from "../../composite/LabeledInput/LabeledInput.js";
+import { LabeledValue as W } from "../../base/LabeledValue/LabeledValue.js";
+import { LabeledInput as q } from "../../composite/LabeledInput/LabeledInput.js";
+import A from "../../base/Loading/Loading.js";
 import p from "../../base/Flex/Flex.js";
 import { Tooltip as b } from "../../composite/Tooltip/Tooltip.js";
-import { T as W } from "../../.chunks/Input.js";
-import { B as q } from "../../.chunks/ButtonBase.js";
-const A = x(/* @__PURE__ */ o("path", {
+import { T as D } from "../../.chunks/Input.js";
+import { B as H } from "../../.chunks/ButtonBase.js";
+const J = x(/* @__PURE__ */ o("path", {
   d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"
-}), "Edit"), D = x(/* @__PURE__ */ o("path", {
+}), "Edit"), K = x(/* @__PURE__ */ o("path", {
   d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-}), "Close"), H = x(/* @__PURE__ */ o("path", {
+}), "Close"), N = x(/* @__PURE__ */ o("path", {
   d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-}), "Check"), k = d("div")(
-  ({ width: t, padding: a, shadow: r, styles: h, isEditing: s }) => ({
+}), "Check"), y = d("div")(
+  ({ width: t, padding: l, shadow: r, styles: h, isEditing: s }) => ({
     ...f`
       width: ${t};
       max-width: 100%;
+      box-sizing: border-box;
       h3 {
         margin: 0;
         width: 100%;
         font-size: 28px;
       }
       font-family: 'Roboto', sans-serif;
-      padding: ${a};
+      padding: ${l};
       display: flex;
       flex-direction: column;
       box-shadow: ${r};
@@ -41,7 +43,7 @@ const A = x(/* @__PURE__ */ o("path", {
       opacity: ${s ? "0" : "1"};
     `
   })
-), J = d(W)({
+), O = d(D)({
   backgroundColor: i.colors.white,
   borderRadius: "0",
   input: {
@@ -69,7 +71,7 @@ const A = x(/* @__PURE__ */ o("path", {
       border: "none"
     }
   }
-}), K = d(k)(({ isEditing: t }) => ({
+}), Q = d(y)(({ isEditing: t }) => ({
   ...f`
     position: absolute;
     top: 0;
@@ -78,56 +80,57 @@ const A = x(/* @__PURE__ */ o("path", {
     opacity: ${t ? "1" : "0"};
     transition: 920ms all ease-in-out;
   `
-})), v = d("div")(({ spacing: t, columns: a }) => ({
+})), I = d("div")(({ spacing: t, columns: l }) => ({
   ...f`
     margin-top: calc(${t} * 0.75);
     grid-row-gap: ${t};
     grid-column-gap: calc(${t} * 1.5);
     display: grid;
-    grid-template-columns: repeat(${a}, 1fr);
+    grid-template-columns: repeat(${l}, 1fr);
   `
-})), g = d(q)(() => ({
+})), g = d(H)(() => ({
   ...f`
     width: 40px;
     height: 40px;
     border-radius: 50%;
   `
-})), N = d("div")`
+})), X = d("div")`
   position: relative;
-`, io = ({
+`, fo = ({
   decorativeElement: t,
-  title: a,
+  title: l,
   items: r = [],
   padding: h = "1rem 2rem",
   shadow: s = i.boxShadow.darkGreen,
-  spacing: y = "2rem",
-  columns: S = 3,
+  spacing: S = "2rem",
+  columns: k = 3,
   styles: z,
-  width: B,
-  onSave: M = () => {
+  width: j = "100%",
+  loading: B = !1,
+  onSave: L = () => {
   },
-  onCancel: P = () => {
+  onCancel: M = () => {
   },
-  onEdit: T = () => {
+  onEdit: P = () => {
   }
 }) => {
-  const C = r.reduce((e, n) => ({ ...e, [n.label]: n.value }), { titleValue: a }), [j, m] = I(!1), [c, u] = I(C), L = () => {
-    T(), m(!0);
-  }, R = () => {
-    M(c), m(!1);
+  const C = r.reduce((e, n) => ({ ...e, [n.label]: n.value }), { titleValue: l }), [T, m] = v(!1), [c, u] = v(C), R = () => {
+    P(), m(!0);
   }, V = () => {
-    P(), u(C), m(!1);
-  }, Y = (e, n) => {
+    L(c), m(!1);
+  }, Y = () => {
+    M(), u(C), m(!1);
+  }, E = (e, n) => {
     u((G) => ({ ...G, [e]: n }));
-  }, E = (e) => {
+  }, F = (e) => {
     u((n) => ({ ...n, titleValue: e }));
-  }, w = { width: B, padding: h, shadow: s, styles: z, isEditing: j }, $ = { spacing: y, columns: S };
-  return /* @__PURE__ */ l(N, { children: [
-    /* @__PURE__ */ l(k, { ...w, children: [
-      /* @__PURE__ */ l(p, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
-        /* @__PURE__ */ l(p, { width: "100%", gap: "1rem", alignItems: "center", children: [
+  }, w = { width: j, padding: h, shadow: s, styles: z, isEditing: T }, $ = { spacing: S, columns: k };
+  return /* @__PURE__ */ a(X, { children: [
+    /* @__PURE__ */ a(y, { ...w, children: [
+      /* @__PURE__ */ a(p, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
+        /* @__PURE__ */ a(p, { width: "100%", gap: "1rem", alignItems: "center", children: [
           t && t,
-          /* @__PURE__ */ o("h3", { children: a })
+          /* @__PURE__ */ o("h3", { children: l })
         ] }),
         /* @__PURE__ */ o(
           b,
@@ -146,21 +149,24 @@ const A = x(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o(g, { onClick: L, children: /* @__PURE__ */ o(A, {}) })
+            children: /* @__PURE__ */ o(g, { onClick: R, children: /* @__PURE__ */ o(J, {}) })
           }
         )
       ] }),
-      /* @__PURE__ */ o(v, { ...$, children: r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(F, { ...e }, e.label)) })
+      /* @__PURE__ */ o(I, { ...$, children: B ? /* @__PURE__ */ a(U, { children: [
+        /* @__PURE__ */ o("div", {}),
+        /* @__PURE__ */ o(A, { styles: { justifySelf: "center", alignSelf: "center" } })
+      ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(W, { ...e }, e.label)) })
     ] }),
-    /* @__PURE__ */ l(K, { ...w, children: [
-      /* @__PURE__ */ l(p, { width: "100%", justifyContent: "space-between", children: [
-        /* @__PURE__ */ l(p, { width: "100%", gap: "1rem", alignItems: "center", children: [
+    /* @__PURE__ */ a(Q, { ...w, children: [
+      /* @__PURE__ */ a(p, { width: "100%", justifyContent: "space-between", children: [
+        /* @__PURE__ */ a(p, { width: "100%", gap: "1rem", alignItems: "center", children: [
           t && t,
           /* @__PURE__ */ o("h3", { children: /* @__PURE__ */ o(
-            J,
+            O,
             {
-              onChange: (e) => E(e.target.value),
-              value: (c == null ? void 0 : c.titleValue) ?? a
+              onChange: (e) => F(e.target.value),
+              value: (c == null ? void 0 : c.titleValue) ?? l
             }
           ) })
         ] }),
@@ -181,7 +187,7 @@ const A = x(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o(g, { onClick: V, children: /* @__PURE__ */ o(D, {}) })
+            children: /* @__PURE__ */ o(g, { onClick: Y, children: /* @__PURE__ */ o(K, {}) })
           }
         ),
         /* @__PURE__ */ o(
@@ -201,16 +207,16 @@ const A = x(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o(g, { onClick: R, children: /* @__PURE__ */ o(H, {}) })
+            children: /* @__PURE__ */ o(g, { onClick: V, children: /* @__PURE__ */ o(N, {}) })
           }
         )
       ] }),
-      /* @__PURE__ */ o(v, { ...$, children: r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
-        U,
+      /* @__PURE__ */ o(I, { ...$, children: r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
+        q,
         {
           label: e.label,
           value: c[e.label],
-          onChange: (n) => Y(e.label, n.target.value)
+          onChange: (n) => E(e.label, n.target.value)
         },
         e.label
       )) })
@@ -218,6 +224,6 @@ const A = x(/* @__PURE__ */ o("path", {
   ] });
 };
 export {
-  io as EditableInfoCard,
-  io as default
+  fo as EditableInfoCard,
+  fo as default
 };

package/templates/AppContainer/AppContainer.js

@@ -46,7 +46,7 @@ const h = d("div")({
   borderBottomLeftRadius: r ? 0 : "4px",
   borderTopLeftRadius: r ? 0 : "4px",
   border: `1px solid ${o.colors.green}`,
-  minWidth: "100%",
+  width: "100%",
   minHeight: "100%",
   boxSizing: "border-box",
   padding: "1rem",
@@ -66,7 +66,7 @@ const h = d("div")({
     /* @__PURE__ */ a(g, { children: [
       /* @__PURE__ */ e(f, { ...x }),
       /* @__PURE__ */ e(u, { withActionsPanel: n, children: /* @__PURE__ */ e(l, { direction: "vertical", children: i && i }) }),
-      /* @__PURE__ */ e(b, { withActionsPanel: n, children: /* @__PURE__ */ e(l, { children: s }) })
+      /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(b, { withActionsPanel: n, children: s }) })
     ] })
   ] });
 };