jcicl 0.0.81 → 0.0.82

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.81",
+  "version": "0.0.82",
   "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

@@ -21,6 +21,7 @@ interface EditableInfoCardStyleProps {
     width?: string;
     /** If true, the card renders a loading spinner as content */
     loading?: boolean;
+    titleLoading?: boolean;
     loadingStyles?: CSSObject;
     titleSpacing?: string;
     canEditTitle?: boolean;

package/supercomposite/EditableInfoCard/EditableInfoCard.js

@@ -1,26 +1,26 @@
-import { jsx as o, jsxs as n, Fragment as k } from "react/jsx-runtime";
-import { useState as L, useEffect as N } from "react";
+import { jsx as o, jsxs as n, Fragment as M } from "react/jsx-runtime";
+import { useState as B, useEffect as O } from "react";
 import { n as l } from "../../.chunks/emotion-styled.browser.esm.js";
-import { c as u } from "../../.chunks/emotion-react.browser.esm.js";
-import { c as w } from "../../.chunks/createSvgIcon.js";
+import { c as m } from "../../.chunks/emotion-react.browser.esm.js";
+import { c as C } from "../../.chunks/createSvgIcon.js";
 import d from "../../theme.js";
-import { LabeledValue as O } from "../../base/LabeledValue/LabeledValue.js";
-import { LabeledInput as Q } from "../../composite/LabeledInput/LabeledInput.js";
-import M from "../../base/Loading/Loading.js";
-import B from "../../composite/WithLoading/WithLoading.js";
-import m from "../../base/Flex/Flex.js";
-import { Tooltip as $ } from "../../composite/Tooltip/Tooltip.js";
-import { T as X } from "../../.chunks/Input.js";
-import { B as Z } from "../../.chunks/ButtonBase.js";
-const _ = w(/* @__PURE__ */ o("path", {
+import { LabeledValue as Q } from "../../base/LabeledValue/LabeledValue.js";
+import { LabeledInput as X } from "../../composite/LabeledInput/LabeledInput.js";
+import L from "../../base/Loading/Loading.js";
+import P from "../../composite/WithLoading/WithLoading.js";
+import f from "../../base/Flex/Flex.js";
+import { Tooltip as x } from "../../composite/Tooltip/Tooltip.js";
+import { T as Z } from "../../.chunks/Input.js";
+import { B as _ } from "../../.chunks/ButtonBase.js";
+const oo = C(/* @__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"), oo = w(/* @__PURE__ */ o("path", {
+}), "Edit"), eo = C(/* @__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"), eo = w(/* @__PURE__ */ o("path", {
+}), "Close"), to = C(/* @__PURE__ */ o("path", {
   d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-}), "Check"), j = l("div")(
-  ({ width: t, padding: a, shadow: r, styles: b, isEditing: c }) => ({
-    ...u`
+}), "Check"), T = l("div")(
+  ({ width: t, padding: a, shadow: r, styles: u, isEditing: c }) => ({
+    ...m`
       width: ${t};
       max-width: 100%;
       box-sizing: border-box;
@@ -36,7 +36,7 @@ const _ = w(/* @__PURE__ */ o("path", {
       box-shadow: ${r};
       border-radius: 5px;
       background-color: ${d.colors.white};
-      ${b};
+      ${u};
       z-index: ${c ? 0 : 1};
       position: relative;
       transform: ${c ? "rotateY(-180deg)" : "rotateY(0deg)"};
@@ -44,7 +44,7 @@ const _ = w(/* @__PURE__ */ o("path", {
       opacity: ${c ? "0" : "1"};
     `
   })
-), to = l(X)({
+), ro = l(Z)({
   backgroundColor: d.colors.white,
   borderRadius: "0",
   input: {
@@ -72,8 +72,8 @@ const _ = w(/* @__PURE__ */ o("path", {
       border: "none"
     }
   }
-}), ro = l(j)(({ isEditing: t }) => ({
-  ...u`
+}), no = l(T)(({ isEditing: t }) => ({
+  ...m`
     position: absolute;
     top: 0;
     z-index: ${t ? 1 : 0};
@@ -81,9 +81,9 @@ const _ = w(/* @__PURE__ */ o("path", {
     opacity: ${t ? "1" : "0"};
     transition: 920ms all ease-in-out;
   `
-})), P = l("div")(
+})), R = l("div")(
   ({ spacing: t, columns: a, numRows: r }) => ({
-    ...u`
+    ...m`
       margin-top: calc(${t} * 0.75);
       grid-row-gap: ${t};
       grid-column-gap: calc(${t} * 1.5);
@@ -92,61 +92,62 @@ const _ = w(/* @__PURE__ */ o("path", {
       grid-template-rows: repeat(${r}, 1fr);
     `
   })
-), C = l(Z)(() => ({
-  ...u`
+), $ = l(_)(() => ({
+  ...m`
     width: 40px;
     height: 40px;
     border-radius: 50%;
   `
-})), no = l("div")`
+})), ao = l("div")`
   position: relative;
   width: 100%;
-`, R = l("div")`
+`, j = l("div")`
   height: 19px;
-`, Co = ({
+`, wo = ({
   decorativeElement: t,
   title: a,
   items: r = [],
-  padding: b = "1rem 2rem",
+  padding: u = "1rem 2rem",
   shadow: c = d.boxShadow.darkGreen,
-  spacing: T = "2rem",
-  titleSpacing: v = "1rem",
-  canEditTitle: z = !0,
-  columns: I = 3,
-  styles: V,
-  width: Y = "100%",
-  loading: h = !1,
-  onSave: E = () => {
+  spacing: V = "2rem",
+  titleSpacing: w = "1rem",
+  canEditTitle: v = !0,
+  columns: z = 3,
+  styles: Y,
+  width: E = "100%",
+  loading: I = !1,
+  titleLoading: y = !1,
+  onSave: F = () => {
   },
-  onCancel: F = () => {
+  onCancel: G = () => {
   },
-  onEdit: G = () => {
+  onEdit: W = () => {
   }
 }) => {
-  const g = r.reduce((e, i) => ({ ...e, [i.label]: i.value }), { titleValue: a }), [W, x] = L(!1), [p, f] = L(g);
-  N(() => {
-    f(g);
+  const b = r.reduce((e, i) => ({ ...e, [i.label]: i.value }), { titleValue: a }), [U, g] = B(!1), [p, h] = B(b);
+  O(() => {
+    h(b);
   }, [r]);
-  const U = () => {
-    G(), x(!0);
-  }, q = () => {
-    E(p), x(!1);
+  const q = () => {
+    W(), g(!0);
   }, A = () => {
-    F(), f(g), x(!1);
-  }, D = (e, i) => {
-    f((K) => ({ ...K, [e]: i }));
-  }, H = (e) => {
-    f((i) => ({ ...i, titleValue: e }));
-  }, J = Math.ceil(r.length / I), s = 50, y = { width: Y, padding: b, shadow: c, styles: V, isEditing: W }, S = { spacing: T, columns: I, numRows: J };
-  return /* @__PURE__ */ n(no, { children: [
-    /* @__PURE__ */ n(j, { ...y, children: [
-      /* @__PURE__ */ n(m, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
-        /* @__PURE__ */ n(m, { width: "100%", gap: v, alignItems: "center", children: [
+    F(p), g(!1);
+  }, D = () => {
+    G(), h(b), g(!1);
+  }, H = (e, i) => {
+    h((N) => ({ ...N, [e]: i }));
+  }, J = (e) => {
+    h((i) => ({ ...i, titleValue: e }));
+  }, K = Math.ceil(r.length / z), s = 50, S = { width: E, padding: u, shadow: c, styles: Y, isEditing: U }, k = { spacing: V, columns: z, numRows: K };
+  return /* @__PURE__ */ n(ao, { children: [
+    /* @__PURE__ */ n(T, { ...S, children: [
+      /* @__PURE__ */ n(f, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
+        /* @__PURE__ */ n(f, { width: "100%", gap: w, alignItems: "center", children: [
           t && t,
-          /* @__PURE__ */ o(B, { size: 36, loading: z && h, children: /* @__PURE__ */ o("h3", { children: a }) })
+          /* @__PURE__ */ o(P, { size: 36, loading: v && y, children: /* @__PURE__ */ o("h3", { children: a }) })
         ] }),
         /* @__PURE__ */ o(
-          $,
+          x,
           {
             title: "Edit",
             placement: "top",
@@ -162,14 +163,14 @@ const _ = w(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o(C, { onClick: U, children: /* @__PURE__ */ o(_, {}) })
+            children: /* @__PURE__ */ o($, { onClick: q, children: /* @__PURE__ */ o(oo, {}) })
           }
         )
       ] }),
-      /* @__PURE__ */ o(P, { ...S, children: h ? /* @__PURE__ */ n(k, { children: [
-        /* @__PURE__ */ o(R, {}),
+      /* @__PURE__ */ o(R, { ...k, children: I ? /* @__PURE__ */ n(M, { children: [
+        /* @__PURE__ */ o(j, {}),
         /* @__PURE__ */ o(
-          M,
+          L,
           {
             size: s,
             styles: {
@@ -179,22 +180,22 @@ const _ = w(/* @__PURE__ */ o("path", {
             }
           }
         )
-      ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(O, { ...e }, e.label)) })
+      ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(Q, { ...e }, e.label)) })
     ] }),
-    /* @__PURE__ */ n(ro, { ...y, children: [
-      /* @__PURE__ */ n(m, { width: "100%", justifyContent: "space-between", children: [
-        /* @__PURE__ */ n(m, { width: "100%", gap: v, alignItems: "center", children: [
+    /* @__PURE__ */ n(no, { ...S, children: [
+      /* @__PURE__ */ n(f, { width: "100%", justifyContent: "space-between", children: [
+        /* @__PURE__ */ n(f, { width: "100%", gap: w, alignItems: "center", children: [
           t && t,
-          /* @__PURE__ */ o("h3", { children: z ? /* @__PURE__ */ o(B, { size: 36, loading: h, children: /* @__PURE__ */ o(
-            to,
+          /* @__PURE__ */ o("h3", { children: v ? /* @__PURE__ */ o(P, { size: 36, loading: y, children: /* @__PURE__ */ o(
+            ro,
             {
-              onChange: (e) => H(e.target.value),
+              onChange: (e) => J(e.target.value),
               value: (p == null ? void 0 : p.titleValue) ?? a
             }
           ) }) : /* @__PURE__ */ o("h3", { children: a }) })
         ] }),
         /* @__PURE__ */ o(
-          $,
+          x,
           {
             title: "Cancel",
             placement: "top",
@@ -210,11 +211,11 @@ const _ = w(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o(C, { onClick: A, children: /* @__PURE__ */ o(oo, {}) })
+            children: /* @__PURE__ */ o($, { onClick: D, children: /* @__PURE__ */ o(eo, {}) })
           }
         ),
         /* @__PURE__ */ o(
-          $,
+          x,
           {
             title: "Save",
             placement: "top",
@@ -230,14 +231,14 @@ const _ = w(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o(C, { onClick: q, children: /* @__PURE__ */ o(eo, {}) })
+            children: /* @__PURE__ */ o($, { onClick: A, children: /* @__PURE__ */ o(to, {}) })
           }
         )
       ] }),
-      /* @__PURE__ */ o(P, { ...S, children: h ? /* @__PURE__ */ n(k, { children: [
-        /* @__PURE__ */ o(R, {}),
+      /* @__PURE__ */ o(R, { ...k, children: I ? /* @__PURE__ */ n(M, { children: [
+        /* @__PURE__ */ o(j, {}),
         /* @__PURE__ */ o(
-          M,
+          L,
           {
             size: s,
             styles: {
@@ -248,11 +249,11 @@ const _ = w(/* @__PURE__ */ o("path", {
           }
         )
       ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
-        Q,
+        X,
         {
           label: e.label,
           value: p[e.label],
-          onChange: (i) => D(e.label, i.target.value)
+          onChange: (i) => H(e.label, i.target.value)
         },
         e.label
       )) })
@@ -260,6 +261,6 @@ const _ = w(/* @__PURE__ */ o("path", {
   ] });
 };
 export {
-  Co as EditableInfoCard,
-  Co as default
+  wo as EditableInfoCard,
+  wo as default
 };