jcicl 0.0.77 → 0.0.79

package/package.json

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

@@ -22,6 +22,8 @@ interface EditableInfoCardStyleProps {
     /** If true, the card renders a loading spinner as content */
     loading?: boolean;
     loadingStyles?: CSSObject;
+    titleSpacing?: string;
+    canEditTitle?: boolean;
 }
 export interface EditableInfoCardProps extends EditableInfoCardStyleProps {
     title?: string;

package/supercomposite/EditableInfoCard/EditableInfoCard.js

@@ -1,24 +1,24 @@
 import { jsx as o, jsxs as n, Fragment as y } from "react/jsx-runtime";
-import { useState as z, useEffect as H } from "react";
+import { useState as z, useEffect as K } from "react";
 import { n as i } from "../../.chunks/emotion-styled.browser.esm.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 J } from "../../base/LabeledValue/LabeledValue.js";
-import { LabeledInput as K } from "../../composite/LabeledInput/LabeledInput.js";
+import { LabeledValue as N } from "../../base/LabeledValue/LabeledValue.js";
+import { LabeledInput as O } from "../../composite/LabeledInput/LabeledInput.js";
 import k from "../../base/Loading/Loading.js";
 import f from "../../base/Flex/Flex.js";
 import { Tooltip as x } from "../../composite/Tooltip/Tooltip.js";
-import { T as N } from "../../.chunks/Input.js";
-import { B as O } from "../../.chunks/ButtonBase.js";
-const Q = C(/* @__PURE__ */ o("path", {
+import { T as Q } from "../../.chunks/Input.js";
+import { B as X } from "../../.chunks/ButtonBase.js";
+const Z = 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"), X = C(/* @__PURE__ */ o("path", {
+}), "Edit"), _ = 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"), Z = C(/* @__PURE__ */ o("path", {
+}), "Close"), oo = C(/* @__PURE__ */ o("path", {
   d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
 }), "Check"), L = i("div")(
-  ({ width: t, padding: l, shadow: r, styles: u, isEditing: c }) => ({
+  ({ width: t, padding: a, shadow: r, styles: u, isEditing: c }) => ({
     ...m`
       width: ${t};
       max-width: 100%;
@@ -29,7 +29,7 @@ const Q = C(/* @__PURE__ */ o("path", {
         font-size: 28px;
       }
       font-family: 'Roboto', sans-serif;
-      padding: ${l};
+      padding: ${a};
       display: flex;
       flex-direction: column;
       box-shadow: ${r};
@@ -43,7 +43,7 @@ const Q = C(/* @__PURE__ */ o("path", {
       opacity: ${c ? "0" : "1"};
     `
   })
-), _ = i(N)({
+), eo = i(Q)({
   backgroundColor: d.colors.white,
   borderRadius: "0",
   input: {
@@ -71,7 +71,7 @@ const Q = C(/* @__PURE__ */ o("path", {
       border: "none"
     }
   }
-}), oo = i(L)(({ isEditing: t }) => ({
+}), to = i(L)(({ isEditing: t }) => ({
   ...m`
     position: absolute;
     top: 0;
@@ -81,66 +81,68 @@ const Q = C(/* @__PURE__ */ o("path", {
     transition: 920ms all ease-in-out;
   `
 })), M = i("div")(
-  ({ spacing: t, columns: l, numRows: r }) => ({
+  ({ spacing: t, columns: a, numRows: r }) => ({
     ...m`
       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-columns: repeat(${a}, 1fr);
       grid-template-rows: repeat(${r}, 1fr);
     `
   })
-), $ = i(O)(() => ({
+), $ = i(X)(() => ({
   ...m`
     width: 40px;
     height: 40px;
     border-radius: 50%;
   `
-})), eo = i("div")`
+})), ro = i("div")`
   position: relative;
   width: 100%;
 `, B = i("div")`
   height: 19px;
-`, bo = ({
+`, xo = ({
   decorativeElement: t,
-  title: l,
+  title: a,
   items: r = [],
   padding: u = "1rem 2rem",
   shadow: c = d.boxShadow.darkGreen,
   spacing: P = "2rem",
+  titleSpacing: R = "1rem",
+  canEditTitle: T = !0,
   columns: w = 3,
-  styles: R,
-  width: T = "100%",
+  styles: j,
+  width: E = "100%",
   loading: v = !1,
-  onSave: j = () => {
+  onSave: V = () => {
   },
-  onCancel: E = () => {
+  onCancel: Y = () => {
   },
-  onEdit: V = () => {
+  onEdit: F = () => {
   }
 }) => {
-  const b = r.reduce((e, a) => ({ ...e, [a.label]: a.value }), { titleValue: l }), [Y, g] = z(!1), [p, h] = z(b);
-  H(() => {
+  const b = r.reduce((e, l) => ({ ...e, [l.label]: l.value }), { titleValue: a }), [G, g] = z(!1), [p, h] = z(b);
+  K(() => {
     h(b);
   }, [r]);
-  const F = () => {
-    V(), g(!0);
-  }, G = () => {
-    j(p), g(!1);
-  }, U = () => {
-    E(), h(b), g(!1);
-  }, W = (e, a) => {
-    h((D) => ({ ...D, [e]: a }));
-  }, q = (e) => {
-    h((a) => ({ ...a, titleValue: e }));
-  }, A = Math.ceil(r.length / w), s = 50, I = { width: T, padding: u, shadow: c, styles: R, isEditing: Y }, S = { spacing: P, columns: w, numRows: A };
-  return /* @__PURE__ */ n(eo, { children: [
+  const U = () => {
+    F(), g(!0);
+  }, W = () => {
+    V(p), g(!1);
+  }, q = () => {
+    Y(), h(b), g(!1);
+  }, A = (e, l) => {
+    h((J) => ({ ...J, [e]: l }));
+  }, D = (e) => {
+    h((l) => ({ ...l, titleValue: e }));
+  }, H = Math.ceil(r.length / w), s = 50, I = { width: E, padding: u, shadow: c, styles: j, isEditing: G }, S = { spacing: P, columns: w, numRows: H };
+  return /* @__PURE__ */ n(ro, { children: [
     /* @__PURE__ */ n(L, { ...I, children: [
       /* @__PURE__ */ n(f, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
-        /* @__PURE__ */ n(f, { width: "100%", gap: "1rem", alignItems: "center", children: [
+        /* @__PURE__ */ n(f, { width: "100%", gap: R, alignItems: "center", children: [
           t && t,
-          /* @__PURE__ */ o("h3", { children: l })
+          /* @__PURE__ */ o("h3", { children: a })
         ] }),
         /* @__PURE__ */ o(
           x,
@@ -159,7 +161,7 @@ const Q = C(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o($, { onClick: F, children: /* @__PURE__ */ o(Q, {}) })
+            children: /* @__PURE__ */ o($, { onClick: U, children: /* @__PURE__ */ o(Z, {}) })
           }
         )
       ] }),
@@ -176,19 +178,19 @@ const Q = C(/* @__PURE__ */ o("path", {
             }
           }
         )
-      ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(J, { ...e }, e.label)) })
+      ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(N, { ...e }, e.label)) })
     ] }),
-    /* @__PURE__ */ n(oo, { ...I, children: [
+    /* @__PURE__ */ n(to, { ...I, children: [
       /* @__PURE__ */ n(f, { width: "100%", justifyContent: "space-between", children: [
         /* @__PURE__ */ n(f, { width: "100%", gap: "1rem", alignItems: "center", children: [
           t && t,
-          /* @__PURE__ */ o("h3", { children: /* @__PURE__ */ o(
-            _,
+          /* @__PURE__ */ o("h3", { children: T ? /* @__PURE__ */ o(
+            eo,
             {
-              onChange: (e) => q(e.target.value),
-              value: (p == null ? void 0 : p.titleValue) ?? l
+              onChange: (e) => D(e.target.value),
+              value: (p == null ? void 0 : p.titleValue) ?? a
             }
-          ) })
+          ) : /* @__PURE__ */ o("h3", { children: a }) })
         ] }),
         /* @__PURE__ */ o(
           x,
@@ -207,7 +209,7 @@ const Q = C(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o($, { onClick: U, children: /* @__PURE__ */ o(X, {}) })
+            children: /* @__PURE__ */ o($, { onClick: q, children: /* @__PURE__ */ o(_, {}) })
           }
         ),
         /* @__PURE__ */ o(
@@ -227,7 +229,7 @@ const Q = C(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o($, { onClick: G, children: /* @__PURE__ */ o(Z, {}) })
+            children: /* @__PURE__ */ o($, { onClick: W, children: /* @__PURE__ */ o(oo, {}) })
           }
         )
       ] }),
@@ -245,11 +247,11 @@ const Q = C(/* @__PURE__ */ o("path", {
           }
         )
       ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
-        K,
+        O,
         {
           label: e.label,
           value: p[e.label],
-          onChange: (a) => W(e.label, a.target.value)
+          onChange: (l) => A(e.label, l.target.value)
         },
         e.label
       )) })
@@ -257,6 +259,6 @@ const Q = C(/* @__PURE__ */ o("path", {
   ] });
 };
 export {
-  bo as EditableInfoCard,
-  bo as default
+  xo as EditableInfoCard,
+  xo as default
 };