jcicl 0.0.69 → 0.0.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/base/Loading/Loading.d.ts +4 -2
  2. package/base/Loading/Loading.js +4 -3
  3. package/package.json +1 -1
  4. package/supercomposite/EditableInfoCard/EditableInfoCard.d.ts +3 -0
  5. package/supercomposite/EditableInfoCard/EditableInfoCard.js +94 -76
package/base/Loading/Loading.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import { CircularProgressProps } from '@mui/material/CircularProgress';
2
+ import { CSSObject } from '@emotion/react';
2
3
  export interface LoadingProps extends CircularProgressProps {
4
+ styles?: CSSObject;
3
5
  }
4
- declare const WithLoading: React.FC<LoadingProps>;
5
- export default WithLoading;
6
+ declare const Loading: React.FC<LoadingProps>;
7
+ export default Loading;
package/base/Loading/Loading.js CHANGED
@@ -2,12 +2,13 @@ import { jsx as o } from "react/jsx-runtime";
2
2
  import { n as s } from "../../.chunks/emotion-styled.browser.esm.js";
3
3
  import { c as t } from "../../.chunks/emotion-react.browser.esm.js";
4
4
  import e from "../../theme.js";
5
- import { C as i } from "../../.chunks/CircularProgress.js";
6
- const m = s(i)({
5
+ import { C as m } from "../../.chunks/CircularProgress.js";
6
+ const i = s(m)(({ styles: r }) => ({
7
7
  ...t`
8
8
  color: ${e.colors.green};
9
+ ${r};
9
10
  `
10
- }), p = ({ ...r }) => /* @__PURE__ */ o(m, { size: 47, ...r });
11
+ })), p = ({ ...r }) => /* @__PURE__ */ o(i, { size: 47, ...r });
11
12
  export {
12
13
  p as default
13
14
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "jcicl",
3
3
  "private": false,
4
- "version": "0.0.69",
4
+ "version": "0.0.71",
5
5
  "description": "Component library for the websites of Johnson County Iowa",
6
6
  "license": "MIT",
7
7
  "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",
package/supercomposite/EditableInfoCard/EditableInfoCard.d.ts CHANGED
@@ -19,6 +19,9 @@ interface EditableInfoCardStyleProps {
19
19
  onCancel?: () => void;
20
20
  onEdit?: () => void;
21
21
  width?: string;
22
+ /** If true, the card renders a loading spinner as content */
23
+ loading?: boolean;
24
+ loadingStyles?: CSSObject;
22
25
  }
23
26
  export interface EditableInfoCardProps extends EditableInfoCardStyleProps {
24
27
  title?: string;
package/supercomposite/EditableInfoCard/EditableInfoCard.js CHANGED
@@ -1,48 +1,50 @@
1
- import { jsx as o, jsxs as l } from "react/jsx-runtime";
1
+ import { jsx as o, jsxs as a, Fragment as W } from "react/jsx-runtime";
2
2
  import { useState as I } from "react";
3
- import { n as d } from "../../.chunks/emotion-styled.browser.esm.js";
4
- import { c as f } from "../../.chunks/emotion-react.browser.esm.js";
3
+ import { n as i } from "../../.chunks/emotion-styled.browser.esm.js";
4
+ import { c as h } from "../../.chunks/emotion-react.browser.esm.js";
5
5
  import { c as x } from "../../.chunks/createSvgIcon.js";
6
- import i from "../../theme.js";
7
- import { LabeledValue as F } from "../../base/LabeledValue/LabeledValue.js";
8
- import { LabeledInput as U } from "../../composite/LabeledInput/LabeledInput.js";
6
+ import s from "../../theme.js";
7
+ import { LabeledValue as q } from "../../base/LabeledValue/LabeledValue.js";
8
+ import { LabeledInput as A } from "../../composite/LabeledInput/LabeledInput.js";
9
+ import D from "../../base/Loading/Loading.js";
9
10
  import p from "../../base/Flex/Flex.js";
10
11
  import { Tooltip as b } from "../../composite/Tooltip/Tooltip.js";
11
- import { T as W } from "../../.chunks/Input.js";
12
- import { B as q } from "../../.chunks/ButtonBase.js";
13
- const A = x(/* @__PURE__ */ o("path", {
12
+ import { T as H } from "../../.chunks/Input.js";
13
+ import { B as J } from "../../.chunks/ButtonBase.js";
14
+ const K = x(/* @__PURE__ */ o("path", {
14
15
  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"
15
- }), "Edit"), D = x(/* @__PURE__ */ o("path", {
16
+ }), "Edit"), N = x(/* @__PURE__ */ o("path", {
16
17
  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"
17
- }), "Close"), H = x(/* @__PURE__ */ o("path", {
18
+ }), "Close"), O = x(/* @__PURE__ */ o("path", {
18
19
  d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
19
- }), "Check"), k = d("div")(
20
- ({ width: t, padding: a, shadow: r, styles: h, isEditing: s }) => ({
21
- ...f`
20
+ }), "Check"), S = i("div")(
21
+ ({ width: t, padding: l, shadow: r, styles: f, isEditing: d }) => ({
22
+ ...h`
22
23
  width: ${t};
23
24
  max-width: 100%;
25
+ box-sizing: border-box;
24
26
  h3 {
25
27
  margin: 0;
26
28
  width: 100%;
27
29
  font-size: 28px;
28
30
  }
29
31
  font-family: 'Roboto', sans-serif;
30
- padding: ${a};
32
+ padding: ${l};
31
33
  display: flex;
32
34
  flex-direction: column;
33
35
  box-shadow: ${r};
34
36
  border-radius: 5px;
35
- background-color: ${i.colors.white};
36
- ${h};
37
- z-index: ${s ? 0 : 1};
37
+ background-color: ${s.colors.white};
38
+ ${f};
39
+ z-index: ${d ? 0 : 1};
38
40
  position: relative;
39
- transform: ${s ? "rotateY(-180deg)" : "rotateY(0deg)"};
41
+ transform: ${d ? "rotateY(-180deg)" : "rotateY(0deg)"};
40
42
  transition: 920ms all ease-in-out;
41
- opacity: ${s ? "0" : "1"};
43
+ opacity: ${d ? "0" : "1"};
42
44
  `
43
45
  })
44
- ), J = d(W)({
45
- backgroundColor: i.colors.white,
46
+ ), Q = i(H)({
47
+ backgroundColor: s.colors.white,
46
48
  borderRadius: "0",
47
49
  input: {
48
50
  fontSize: "28px",
@@ -50,14 +52,14 @@ const A = x(/* @__PURE__ */ o("path", {
50
52
  transition: "313ms all ease-out",
51
53
  padding: "0",
52
54
  borderRadius: "0",
53
- borderBottom: `1px solid ${i.colors.gray}`,
55
+ borderBottom: `1px solid ${s.colors.gray}`,
54
56
  "&:focus, :focus-visible": {
55
- boxShadow: `0 3px 2px -2px ${i.colors.darkGreen}`
57
+ boxShadow: `0 3px 2px -2px ${s.colors.darkGreen}`
56
58
  }
57
59
  },
58
60
  "&:hover, :focus, :focus-visible": {
59
61
  input: {
60
- boxShadow: `0 3px 2px -2px ${i.colors.darkGreen}`
62
+ boxShadow: `0 3px 2px -2px ${s.colors.darkGreen}`
61
63
  }
62
64
  },
63
65
  fieldset: {
@@ -69,8 +71,8 @@ const A = x(/* @__PURE__ */ o("path", {
69
71
  border: "none"
70
72
  }
71
73
  }
72
- }), K = d(k)(({ isEditing: t }) => ({
73
- ...f`
74
+ }), X = i(S)(({ isEditing: t }) => ({
75
+ ...h`
74
76
  position: absolute;
75
77
  top: 0;
76
78
  z-index: ${t ? 1 : 0};
@@ -78,56 +80,63 @@ const A = x(/* @__PURE__ */ o("path", {
78
80
  opacity: ${t ? "1" : "0"};
79
81
  transition: 920ms all ease-in-out;
80
82
  `
81
- })), v = d("div")(({ spacing: t, columns: a }) => ({
82
- ...f`
83
- margin-top: calc(${t} * 0.75);
84
- grid-row-gap: ${t};
85
- grid-column-gap: calc(${t} * 1.5);
86
- display: grid;
87
- grid-template-columns: repeat(${a}, 1fr);
88
- `
89
- })), g = d(q)(() => ({
90
- ...f`
83
+ })), y = i("div")(
84
+ ({ spacing: t, columns: l, numRows: r }) => ({
85
+ ...h`
86
+ margin-top: calc(${t} * 0.75);
87
+ grid-row-gap: ${t};
88
+ grid-column-gap: calc(${t} * 1.5);
89
+ display: grid;
90
+ grid-template-columns: repeat(${l}, 1fr);
91
+ grid-template-rows: repeat(${r}, 1fr);
92
+ `
93
+ })
94
+ ), g = i(J)(() => ({
95
+ ...h`
91
96
  width: 40px;
92
97
  height: 40px;
93
98
  border-radius: 50%;
94
99
  `
95
- })), N = d("div")`
100
+ })), Z = i("div")`
96
101
  position: relative;
97
- `, io = ({
102
+ width: 100%;
103
+ `, _ = i("div")`
104
+ height: 19px;
105
+ `, mo = ({
98
106
  decorativeElement: t,
99
- title: a,
107
+ title: l,
100
108
  items: r = [],
101
- padding: h = "1rem 2rem",
102
- shadow: s = i.boxShadow.darkGreen,
103
- spacing: y = "2rem",
104
- columns: S = 3,
109
+ padding: f = "1rem 2rem",
110
+ shadow: d = s.boxShadow.darkGreen,
111
+ spacing: k = "2rem",
112
+ columns: C = 3,
105
113
  styles: z,
106
- width: B,
107
- onSave: M = () => {
114
+ width: M = "100%",
115
+ loading: B = !1,
116
+ onSave: L = () => {
108
117
  },
109
118
  onCancel: P = () => {
110
119
  },
111
- onEdit: T = () => {
120
+ onEdit: R = () => {
112
121
  }
113
122
  }) => {
114
- const C = r.reduce((e, n) => ({ ...e, [n.label]: n.value }), { titleValue: a }), [j, m] = I(!1), [c, u] = I(C), L = () => {
115
- T(), m(!0);
116
- }, R = () => {
117
- M(c), m(!1);
123
+ const w = r.reduce((e, n) => ({ ...e, [n.label]: n.value }), { titleValue: l }), [T, m] = I(!1), [c, u] = I(w), j = () => {
124
+ R(), m(!0);
118
125
  }, V = () => {
119
- P(), u(C), m(!1);
120
- }, Y = (e, n) => {
121
- u((G) => ({ ...G, [e]: n }));
122
- }, E = (e) => {
126
+ L(c), m(!1);
127
+ }, Y = () => {
128
+ P(), u(w), m(!1);
129
+ }, E = (e, n) => {
130
+ u((U) => ({ ...U, [e]: n }));
131
+ }, F = (e) => {
123
132
  u((n) => ({ ...n, titleValue: e }));
124
- }, w = { width: B, padding: h, shadow: s, styles: z, isEditing: j }, $ = { spacing: y, columns: S };
125
- return /* @__PURE__ */ l(N, { children: [
126
- /* @__PURE__ */ l(k, { ...w, children: [
127
- /* @__PURE__ */ l(p, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
128
- /* @__PURE__ */ l(p, { width: "100%", gap: "1rem", alignItems: "center", children: [
133
+ }, G = Math.ceil(r.length / C), $ = { width: M, padding: f, shadow: d, styles: z, isEditing: T }, v = { spacing: k, columns: C, numRows: G };
134
+ return /* @__PURE__ */ a(Z, { children: [
135
+ /* @__PURE__ */ a(S, { ...$, children: [
136
+ /* @__PURE__ */ a(p, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
137
+ /* @__PURE__ */ a(p, { width: "100%", gap: "1rem", alignItems: "center", children: [
129
138
  t && t,
130
- /* @__PURE__ */ o("h3", { children: a })
139
+ /* @__PURE__ */ o("h3", { children: l })
131
140
  ] }),
132
141
  /* @__PURE__ */ o(
133
142
  b,
@@ -146,21 +155,30 @@ const A = x(/* @__PURE__ */ o("path", {
146
155
  ]
147
156
  }
148
157
  },
149
- children: /* @__PURE__ */ o(g, { onClick: L, children: /* @__PURE__ */ o(A, {}) })
158
+ children: /* @__PURE__ */ o(g, { onClick: j, children: /* @__PURE__ */ o(K, {}) })
150
159
  }
151
160
  )
152
161
  ] }),
153
- /* @__PURE__ */ o(v, { ...$, children: r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(F, { ...e }, e.label)) })
162
+ /* @__PURE__ */ o(y, { ...v, children: B ? /* @__PURE__ */ a(W, { children: [
163
+ /* @__PURE__ */ o(_, {}),
164
+ /* @__PURE__ */ o(
165
+ D,
166
+ {
167
+ size: 52,
168
+ styles: { position: "absolute", top: "calc(50% - 26px)", right: "calc(50% - 26px)" }
169
+ }
170
+ )
171
+ ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(q, { ...e }, e.label)) })
154
172
  ] }),
155
- /* @__PURE__ */ l(K, { ...w, children: [
156
- /* @__PURE__ */ l(p, { width: "100%", justifyContent: "space-between", children: [
157
- /* @__PURE__ */ l(p, { width: "100%", gap: "1rem", alignItems: "center", children: [
173
+ /* @__PURE__ */ a(X, { ...$, children: [
174
+ /* @__PURE__ */ a(p, { width: "100%", justifyContent: "space-between", children: [
175
+ /* @__PURE__ */ a(p, { width: "100%", gap: "1rem", alignItems: "center", children: [
158
176
  t && t,
159
177
  /* @__PURE__ */ o("h3", { children: /* @__PURE__ */ o(
160
- J,
178
+ Q,
161
179
  {
162
- onChange: (e) => E(e.target.value),
163
- value: (c == null ? void 0 : c.titleValue) ?? a
180
+ onChange: (e) => F(e.target.value),
181
+ value: (c == null ? void 0 : c.titleValue) ?? l
164
182
  }
165
183
  ) })
166
184
  ] }),
@@ -181,7 +199,7 @@ const A = x(/* @__PURE__ */ o("path", {
181
199
  ]
182
200
  }
183
201
  },
184
- children: /* @__PURE__ */ o(g, { onClick: V, children: /* @__PURE__ */ o(D, {}) })
202
+ children: /* @__PURE__ */ o(g, { onClick: Y, children: /* @__PURE__ */ o(N, {}) })
185
203
  }
186
204
  ),
187
205
  /* @__PURE__ */ o(
@@ -201,16 +219,16 @@ const A = x(/* @__PURE__ */ o("path", {
201
219
  ]
202
220
  }
203
221
  },
204
- children: /* @__PURE__ */ o(g, { onClick: R, children: /* @__PURE__ */ o(H, {}) })
222
+ children: /* @__PURE__ */ o(g, { onClick: V, children: /* @__PURE__ */ o(O, {}) })
205
223
  }
206
224
  )
207
225
  ] }),
208
- /* @__PURE__ */ o(v, { ...$, children: r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
209
- U,
226
+ /* @__PURE__ */ o(y, { ...v, children: r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
227
+ A,
210
228
  {
211
229
  label: e.label,
212
230
  value: c[e.label],
213
- onChange: (n) => Y(e.label, n.target.value)
231
+ onChange: (n) => E(e.label, n.target.value)
214
232
  },
215
233
  e.label
216
234
  )) })
@@ -218,6 +236,6 @@ const A = x(/* @__PURE__ */ o("path", {
218
236
  ] });
219
237
  };
220
238
  export {
221
- io as EditableInfoCard,
222
- io as default
239
+ mo as EditableInfoCard,
240
+ mo as default
223
241
  };