jcicl 0.0.70 → 0.0.75

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.70",
+  "version": "0.0.75",
   "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.js

@@ -1,24 +1,24 @@
-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 { jsx as o, jsxs as a, Fragment as q } from "react/jsx-runtime";
+import { useState as S, useEffect as A } from "react";
+import { n as i } 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 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 D } from "../../.chunks/Input.js";
-import { B as H } from "../../.chunks/ButtonBase.js";
-const J = x(/* @__PURE__ */ o("path", {
+import { c as w } from "../../.chunks/createSvgIcon.js";
+import s from "../../theme.js";
+import { LabeledValue as D } from "../../base/LabeledValue/LabeledValue.js";
+import { LabeledInput as H } from "../../composite/LabeledInput/LabeledInput.js";
+import J from "../../base/Loading/Loading.js";
+import h from "../../base/Flex/Flex.js";
+import { Tooltip as x } from "../../composite/Tooltip/Tooltip.js";
+import { T as K } from "../../.chunks/Input.js";
+import { B as N } from "../../.chunks/ButtonBase.js";
+const O = w(/* @__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"), K = x(/* @__PURE__ */ o("path", {
+}), "Edit"), Q = w(/* @__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"), N = x(/* @__PURE__ */ o("path", {
+}), "Close"), X = w(/* @__PURE__ */ o("path", {
   d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-}), "Check"), y = d("div")(
-  ({ width: t, padding: l, shadow: r, styles: h, isEditing: s }) => ({
+}), "Check"), z = i("div")(
+  ({ width: t, padding: l, shadow: r, styles: m, isEditing: d }) => ({
     ...f`
       width: ${t};
       max-width: 100%;
@@ -34,17 +34,17 @@ const J = x(/* @__PURE__ */ o("path", {
       flex-direction: column;
       box-shadow: ${r};
       border-radius: 5px;
-      background-color: ${i.colors.white};
-      ${h};
-      z-index: ${s ? 0 : 1};
+      background-color: ${s.colors.white};
+      ${m};
+      z-index: ${d ? 0 : 1};
       position: relative;
-      transform: ${s ? "rotateY(-180deg)" : "rotateY(0deg)"};
+      transform: ${d ? "rotateY(-180deg)" : "rotateY(0deg)"};
       transition: 920ms all ease-in-out;
-      opacity: ${s ? "0" : "1"};
+      opacity: ${d ? "0" : "1"};
     `
   })
-), O = d(D)({
-  backgroundColor: i.colors.white,
+), Z = i(K)({
+  backgroundColor: s.colors.white,
   borderRadius: "0",
   input: {
     fontSize: "28px",
@@ -52,14 +52,14 @@ const J = x(/* @__PURE__ */ o("path", {
     transition: "313ms all ease-out",
     padding: "0",
     borderRadius: "0",
-    borderBottom: `1px solid ${i.colors.gray}`,
+    borderBottom: `1px solid ${s.colors.gray}`,
     "&:focus, :focus-visible": {
-      boxShadow: `0 3px 2px -2px ${i.colors.darkGreen}`
+      boxShadow: `0 3px 2px -2px ${s.colors.darkGreen}`
     }
   },
   "&:hover, :focus, :focus-visible": {
     input: {
-      boxShadow: `0 3px 2px -2px ${i.colors.darkGreen}`
+      boxShadow: `0 3px 2px -2px ${s.colors.darkGreen}`
     }
   },
   fieldset: {
@@ -71,7 +71,7 @@ const J = x(/* @__PURE__ */ o("path", {
       border: "none"
     }
   }
-}), Q = d(y)(({ isEditing: t }) => ({
+}), _ = i(z)(({ isEditing: t }) => ({
   ...f`
     position: absolute;
     top: 0;
@@ -80,60 +80,70 @@ const J = x(/* @__PURE__ */ o("path", {
     opacity: ${t ? "1" : "0"};
     transition: 920ms all ease-in-out;
   `
-})), 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(${l}, 1fr);
-  `
-})), g = d(H)(() => ({
+})), y = i("div")(
+  ({ spacing: t, columns: l, numRows: r }) => ({
+    ...f`
+      margin-top: calc(${t} * 0.75);
+      grid-row-gap: ${t};
+      grid-column-gap: calc(${t} * 1.5);
+      display: grid;
+      grid-template-columns: repeat(${l}, 1fr);
+      grid-template-rows: repeat(${r}, 1fr);
+    `
+  })
+), C = i(N)(() => ({
   ...f`
     width: 40px;
     height: 40px;
     border-radius: 50%;
   `
-})), X = d("div")`
+})), oo = i("div")`
   position: relative;
-`, fo = ({
+  width: 100%;
+`, eo = i("div")`
+  height: 19px;
+`, bo = ({
   decorativeElement: t,
   title: l,
   items: r = [],
-  padding: h = "1rem 2rem",
-  shadow: s = i.boxShadow.darkGreen,
-  spacing: S = "2rem",
-  columns: k = 3,
-  styles: z,
-  width: j = "100%",
-  loading: B = !1,
-  onSave: L = () => {
+  padding: m = "1rem 2rem",
+  shadow: d = s.boxShadow.darkGreen,
+  spacing: k = "2rem",
+  columns: $ = 3,
+  styles: M,
+  width: B = "100%",
+  loading: L = !1,
+  onSave: P = () => {
   },
-  onCancel: M = () => {
+  onCancel: R = () => {
   },
-  onEdit: P = () => {
+  onEdit: T = () => {
   }
 }) => {
-  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);
+  const u = r.reduce((e, n) => ({ ...e, [n.label]: n.value }), { titleValue: l }), [j, b] = S(!1), [c, p] = S(u);
+  A(() => {
+    p(u);
+  }, [r]);
+  const E = () => {
+    T(), b(!0);
   }, V = () => {
-    L(c), m(!1);
+    P(c), b(!1);
   }, Y = () => {
-    M(), u(C), m(!1);
-  }, E = (e, n) => {
-    u((G) => ({ ...G, [e]: n }));
-  }, F = (e) => {
-    u((n) => ({ ...n, titleValue: e }));
-  }, 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: [
+    R(), p(u), b(!1);
+  }, F = (e, n) => {
+    p((W) => ({ ...W, [e]: n }));
+  }, G = (e) => {
+    p((n) => ({ ...n, titleValue: e }));
+  }, U = Math.ceil(r.length / $), g = 48, v = { width: B, padding: m, shadow: d, styles: M, isEditing: j }, I = { spacing: k, columns: $, numRows: U };
+  return /* @__PURE__ */ a(oo, { children: [
+    /* @__PURE__ */ a(z, { ...v, children: [
+      /* @__PURE__ */ a(h, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
+        /* @__PURE__ */ a(h, { width: "100%", gap: "1rem", alignItems: "center", children: [
           t && t,
           /* @__PURE__ */ o("h3", { children: l })
         ] }),
         /* @__PURE__ */ o(
-          b,
+          x,
           {
             title: "Edit",
             placement: "top",
@@ -149,29 +159,39 @@ const J = x(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o(g, { onClick: R, children: /* @__PURE__ */ o(J, {}) })
+            children: /* @__PURE__ */ o(C, { onClick: E, children: /* @__PURE__ */ o(O, {}) })
           }
         )
       ] }),
-      /* @__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__ */ o(y, { ...I, children: L ? /* @__PURE__ */ a(q, { children: [
+        /* @__PURE__ */ o(eo, {}),
+        /* @__PURE__ */ o(
+          J,
+          {
+            size: g,
+            styles: {
+              position: "absolute",
+              top: `calc(50% - ${g / 2}px)`,
+              right: `calc(50% - ${g / 2}px)`
+            }
+          }
+        )
+      ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(D, { ...e }, e.label)) })
     ] }),
-    /* @__PURE__ */ a(Q, { ...w, children: [
-      /* @__PURE__ */ a(p, { width: "100%", justifyContent: "space-between", children: [
-        /* @__PURE__ */ a(p, { width: "100%", gap: "1rem", alignItems: "center", children: [
+    /* @__PURE__ */ a(_, { ...v, children: [
+      /* @__PURE__ */ a(h, { width: "100%", justifyContent: "space-between", children: [
+        /* @__PURE__ */ a(h, { width: "100%", gap: "1rem", alignItems: "center", children: [
           t && t,
           /* @__PURE__ */ o("h3", { children: /* @__PURE__ */ o(
-            O,
+            Z,
             {
-              onChange: (e) => F(e.target.value),
+              onChange: (e) => G(e.target.value),
               value: (c == null ? void 0 : c.titleValue) ?? l
             }
           ) })
         ] }),
         /* @__PURE__ */ o(
-          b,
+          x,
           {
             title: "Cancel",
             placement: "top",
@@ -187,11 +207,11 @@ const J = x(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o(g, { onClick: Y, children: /* @__PURE__ */ o(K, {}) })
+            children: /* @__PURE__ */ o(C, { onClick: Y, children: /* @__PURE__ */ o(Q, {}) })
           }
         ),
         /* @__PURE__ */ o(
-          b,
+          x,
           {
             title: "Save",
             placement: "top",
@@ -207,16 +227,16 @@ const J = x(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o(g, { onClick: V, children: /* @__PURE__ */ o(N, {}) })
+            children: /* @__PURE__ */ o(C, { onClick: V, children: /* @__PURE__ */ o(X, {}) })
           }
         )
       ] }),
-      /* @__PURE__ */ o(I, { ...$, children: r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
-        q,
+      /* @__PURE__ */ o(y, { ...I, children: r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
+        H,
         {
           label: e.label,
           value: c[e.label],
-          onChange: (n) => E(e.label, n.target.value)
+          onChange: (n) => F(e.label, n.target.value)
         },
         e.label
       )) })
@@ -224,6 +244,6 @@ const J = x(/* @__PURE__ */ o("path", {
   ] });
 };
 export {
-  fo as EditableInfoCard,
-  fo as default
+  bo as EditableInfoCard,
+  bo as default
 };