jcicl 0.0.80 → 0.0.82

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 (3) hide show
  1. package/package.json +1 -1
  2. package/supercomposite/EditableInfoCard/EditableInfoCard.d.ts +1 -0
  3. package/supercomposite/EditableInfoCard/EditableInfoCard.js +71 -69
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "jcicl",
3
3
  "private": false,
4
- "version": "0.0.80",
4
+ "version": "0.0.82",
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
@@ -21,6 +21,7 @@ interface EditableInfoCardStyleProps {
21
21
  width?: string;
22
22
  /** If true, the card renders a loading spinner as content */
23
23
  loading?: boolean;
24
+ titleLoading?: boolean;
24
25
  loadingStyles?: CSSObject;
25
26
  titleSpacing?: string;
26
27
  canEditTitle?: boolean;
package/supercomposite/EditableInfoCard/EditableInfoCard.js CHANGED
@@ -1,25 +1,26 @@
1
- import { jsx as o, jsxs as n, Fragment as S } from "react/jsx-runtime";
2
- import { useState as k, useEffect as K } from "react";
3
- import { n as i } from "../../.chunks/emotion-styled.browser.esm.js";
4
- import { c as u } from "../../.chunks/emotion-react.browser.esm.js";
1
+ import { jsx as o, jsxs as n, Fragment as M } from "react/jsx-runtime";
2
+ import { useState as B, useEffect as O } from "react";
3
+ import { n as l } from "../../.chunks/emotion-styled.browser.esm.js";
4
+ import { c as m } from "../../.chunks/emotion-react.browser.esm.js";
5
5
  import { c as C } from "../../.chunks/createSvgIcon.js";
6
6
  import d from "../../theme.js";
7
- import { LabeledValue as N } from "../../base/LabeledValue/LabeledValue.js";
8
- import { LabeledInput as O } from "../../composite/LabeledInput/LabeledInput.js";
9
- import M from "../../base/Loading/Loading.js";
7
+ import { LabeledValue as Q } from "../../base/LabeledValue/LabeledValue.js";
8
+ import { LabeledInput as X } from "../../composite/LabeledInput/LabeledInput.js";
9
+ import L from "../../base/Loading/Loading.js";
10
+ import P from "../../composite/WithLoading/WithLoading.js";
10
11
  import f from "../../base/Flex/Flex.js";
11
12
  import { Tooltip as x } from "../../composite/Tooltip/Tooltip.js";
12
- import { T as Q } from "../../.chunks/Input.js";
13
- import { B as X } from "../../.chunks/ButtonBase.js";
14
- const Z = C(/* @__PURE__ */ o("path", {
13
+ import { T as Z } from "../../.chunks/Input.js";
14
+ import { B as _ } from "../../.chunks/ButtonBase.js";
15
+ const oo = C(/* @__PURE__ */ o("path", {
15
16
  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"
16
- }), "Edit"), _ = C(/* @__PURE__ */ o("path", {
17
+ }), "Edit"), eo = C(/* @__PURE__ */ o("path", {
17
18
  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"
18
- }), "Close"), oo = C(/* @__PURE__ */ o("path", {
19
+ }), "Close"), to = C(/* @__PURE__ */ o("path", {
19
20
  d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
20
- }), "Check"), P = i("div")(
21
- ({ width: t, padding: a, shadow: r, styles: m, isEditing: c }) => ({
22
- ...u`
21
+ }), "Check"), T = l("div")(
22
+ ({ width: t, padding: a, shadow: r, styles: u, isEditing: c }) => ({
23
+ ...m`
23
24
  width: ${t};
24
25
  max-width: 100%;
25
26
  box-sizing: border-box;
@@ -35,7 +36,7 @@ const Z = C(/* @__PURE__ */ o("path", {
35
36
  box-shadow: ${r};
36
37
  border-radius: 5px;
37
38
  background-color: ${d.colors.white};
38
- ${m};
39
+ ${u};
39
40
  z-index: ${c ? 0 : 1};
40
41
  position: relative;
41
42
  transform: ${c ? "rotateY(-180deg)" : "rotateY(0deg)"};
@@ -43,7 +44,7 @@ const Z = C(/* @__PURE__ */ o("path", {
43
44
  opacity: ${c ? "0" : "1"};
44
45
  `
45
46
  })
46
- ), eo = i(Q)({
47
+ ), ro = l(Z)({
47
48
  backgroundColor: d.colors.white,
48
49
  borderRadius: "0",
49
50
  input: {
@@ -71,8 +72,8 @@ const Z = C(/* @__PURE__ */ o("path", {
71
72
  border: "none"
72
73
  }
73
74
  }
74
- }), to = i(P)(({ isEditing: t }) => ({
75
- ...u`
75
+ }), no = l(T)(({ isEditing: t }) => ({
76
+ ...m`
76
77
  position: absolute;
77
78
  top: 0;
78
79
  z-index: ${t ? 1 : 0};
@@ -80,9 +81,9 @@ const Z = C(/* @__PURE__ */ o("path", {
80
81
  opacity: ${t ? "1" : "0"};
81
82
  transition: 920ms all ease-in-out;
82
83
  `
83
- })), B = i("div")(
84
+ })), R = l("div")(
84
85
  ({ spacing: t, columns: a, numRows: r }) => ({
85
- ...u`
86
+ ...m`
86
87
  margin-top: calc(${t} * 0.75);
87
88
  grid-row-gap: ${t};
88
89
  grid-column-gap: calc(${t} * 1.5);
@@ -91,58 +92,59 @@ const Z = C(/* @__PURE__ */ o("path", {
91
92
  grid-template-rows: repeat(${r}, 1fr);
92
93
  `
93
94
  })
94
- ), $ = i(X)(() => ({
95
- ...u`
95
+ ), $ = l(_)(() => ({
96
+ ...m`
96
97
  width: 40px;
97
98
  height: 40px;
98
99
  border-radius: 50%;
99
100
  `
100
- })), ro = i("div")`
101
+ })), ao = l("div")`
101
102
  position: relative;
102
103
  width: 100%;
103
- `, L = i("div")`
104
+ `, j = l("div")`
104
105
  height: 19px;
105
- `, xo = ({
106
+ `, wo = ({
106
107
  decorativeElement: t,
107
108
  title: a,
108
109
  items: r = [],
109
- padding: m = "1rem 2rem",
110
+ padding: u = "1rem 2rem",
110
111
  shadow: c = d.boxShadow.darkGreen,
111
- spacing: R = "2rem",
112
+ spacing: V = "2rem",
112
113
  titleSpacing: w = "1rem",
113
- canEditTitle: T = !0,
114
- columns: v = 3,
115
- styles: j,
114
+ canEditTitle: v = !0,
115
+ columns: z = 3,
116
+ styles: Y,
116
117
  width: E = "100%",
117
118
  loading: I = !1,
118
- onSave: V = () => {
119
+ titleLoading: y = !1,
120
+ onSave: F = () => {
119
121
  },
120
- onCancel: Y = () => {
122
+ onCancel: G = () => {
121
123
  },
122
- onEdit: F = () => {
124
+ onEdit: W = () => {
123
125
  }
124
126
  }) => {
125
- const b = r.reduce((e, l) => ({ ...e, [l.label]: l.value }), { titleValue: a }), [G, g] = k(!1), [p, h] = k(b);
126
- K(() => {
127
+ const b = r.reduce((e, i) => ({ ...e, [i.label]: i.value }), { titleValue: a }), [U, g] = B(!1), [p, h] = B(b);
128
+ O(() => {
127
129
  h(b);
128
130
  }, [r]);
129
- const U = () => {
130
- F(), g(!0);
131
- }, W = () => {
132
- V(p), g(!1);
133
- }, q = () => {
134
- Y(), h(b), g(!1);
135
- }, A = (e, l) => {
136
- h((J) => ({ ...J, [e]: l }));
137
- }, D = (e) => {
138
- h((l) => ({ ...l, titleValue: e }));
139
- }, H = Math.ceil(r.length / v), s = 50, y = { width: E, padding: m, shadow: c, styles: j, isEditing: G }, z = { spacing: R, columns: v, numRows: H };
140
- return /* @__PURE__ */ n(ro, { children: [
141
- /* @__PURE__ */ n(P, { ...y, children: [
131
+ const q = () => {
132
+ W(), g(!0);
133
+ }, A = () => {
134
+ F(p), g(!1);
135
+ }, D = () => {
136
+ G(), h(b), g(!1);
137
+ }, H = (e, i) => {
138
+ h((N) => ({ ...N, [e]: i }));
139
+ }, J = (e) => {
140
+ h((i) => ({ ...i, titleValue: e }));
141
+ }, 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 };
142
+ return /* @__PURE__ */ n(ao, { children: [
143
+ /* @__PURE__ */ n(T, { ...S, children: [
142
144
  /* @__PURE__ */ n(f, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
143
145
  /* @__PURE__ */ n(f, { width: "100%", gap: w, alignItems: "center", children: [
144
146
  t && t,
145
- /* @__PURE__ */ o("h3", { children: a })
147
+ /* @__PURE__ */ o(P, { size: 36, loading: v && y, children: /* @__PURE__ */ o("h3", { children: a }) })
146
148
  ] }),
147
149
  /* @__PURE__ */ o(
148
150
  x,
@@ -161,14 +163,14 @@ const Z = C(/* @__PURE__ */ o("path", {
161
163
  ]
162
164
  }
163
165
  },
164
- children: /* @__PURE__ */ o($, { onClick: U, children: /* @__PURE__ */ o(Z, {}) })
166
+ children: /* @__PURE__ */ o($, { onClick: q, children: /* @__PURE__ */ o(oo, {}) })
165
167
  }
166
168
  )
167
169
  ] }),
168
- /* @__PURE__ */ o(B, { ...z, children: I ? /* @__PURE__ */ n(S, { children: [
169
- /* @__PURE__ */ o(L, {}),
170
+ /* @__PURE__ */ o(R, { ...k, children: I ? /* @__PURE__ */ n(M, { children: [
171
+ /* @__PURE__ */ o(j, {}),
170
172
  /* @__PURE__ */ o(
171
- M,
173
+ L,
172
174
  {
173
175
  size: s,
174
176
  styles: {
@@ -178,19 +180,19 @@ const Z = C(/* @__PURE__ */ o("path", {
178
180
  }
179
181
  }
180
182
  )
181
- ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(N, { ...e }, e.label)) })
183
+ ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(Q, { ...e }, e.label)) })
182
184
  ] }),
183
- /* @__PURE__ */ n(to, { ...y, children: [
185
+ /* @__PURE__ */ n(no, { ...S, children: [
184
186
  /* @__PURE__ */ n(f, { width: "100%", justifyContent: "space-between", children: [
185
187
  /* @__PURE__ */ n(f, { width: "100%", gap: w, alignItems: "center", children: [
186
188
  t && t,
187
- /* @__PURE__ */ o("h3", { children: T ? /* @__PURE__ */ o(
188
- eo,
189
+ /* @__PURE__ */ o("h3", { children: v ? /* @__PURE__ */ o(P, { size: 36, loading: y, children: /* @__PURE__ */ o(
190
+ ro,
189
191
  {
190
- onChange: (e) => D(e.target.value),
192
+ onChange: (e) => J(e.target.value),
191
193
  value: (p == null ? void 0 : p.titleValue) ?? a
192
194
  }
193
- ) : /* @__PURE__ */ o("h3", { children: a }) })
195
+ ) }) : /* @__PURE__ */ o("h3", { children: a }) })
194
196
  ] }),
195
197
  /* @__PURE__ */ o(
196
198
  x,
@@ -209,7 +211,7 @@ const Z = C(/* @__PURE__ */ o("path", {
209
211
  ]
210
212
  }
211
213
  },
212
- children: /* @__PURE__ */ o($, { onClick: q, children: /* @__PURE__ */ o(_, {}) })
214
+ children: /* @__PURE__ */ o($, { onClick: D, children: /* @__PURE__ */ o(eo, {}) })
213
215
  }
214
216
  ),
215
217
  /* @__PURE__ */ o(
@@ -229,14 +231,14 @@ const Z = C(/* @__PURE__ */ o("path", {
229
231
  ]
230
232
  }
231
233
  },
232
- children: /* @__PURE__ */ o($, { onClick: W, children: /* @__PURE__ */ o(oo, {}) })
234
+ children: /* @__PURE__ */ o($, { onClick: A, children: /* @__PURE__ */ o(to, {}) })
233
235
  }
234
236
  )
235
237
  ] }),
236
- /* @__PURE__ */ o(B, { ...z, children: I ? /* @__PURE__ */ n(S, { children: [
237
- /* @__PURE__ */ o(L, {}),
238
+ /* @__PURE__ */ o(R, { ...k, children: I ? /* @__PURE__ */ n(M, { children: [
239
+ /* @__PURE__ */ o(j, {}),
238
240
  /* @__PURE__ */ o(
239
- M,
241
+ L,
240
242
  {
241
243
  size: s,
242
244
  styles: {
@@ -247,11 +249,11 @@ const Z = C(/* @__PURE__ */ o("path", {
247
249
  }
248
250
  )
249
251
  ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
250
- O,
252
+ X,
251
253
  {
252
254
  label: e.label,
253
255
  value: p[e.label],
254
- onChange: (l) => A(e.label, l.target.value)
256
+ onChange: (i) => H(e.label, i.target.value)
255
257
  },
256
258
  e.label
257
259
  )) })
@@ -259,6 +261,6 @@ const Z = C(/* @__PURE__ */ o("path", {
259
261
  ] });
260
262
  };
261
263
  export {
262
- xo as EditableInfoCard,
263
- xo as default
264
+ wo as EditableInfoCard,
265
+ wo as default
264
266
  };