jcicl 0.0.70 → 0.0.75

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 (2) hide show
  1. package/package.json +1 -1
  2. package/supercomposite/EditableInfoCard/EditableInfoCard.js +102 -82
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "jcicl",
3
3
  "private": false,
4
- "version": "0.0.70",
4
+ "version": "0.0.75",
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.js CHANGED
@@ -1,24 +1,24 @@
1
- import { jsx as o, jsxs as a, Fragment as U } from "react/jsx-runtime";
2
- import { useState as v } from "react";
3
- import { n as d } from "../../.chunks/emotion-styled.browser.esm.js";
1
+ import { jsx as o, jsxs as a, Fragment as q } from "react/jsx-runtime";
2
+ import { useState as S, useEffect as A } from "react";
3
+ import { n as i } from "../../.chunks/emotion-styled.browser.esm.js";
4
4
  import { c as f } from "../../.chunks/emotion-react.browser.esm.js";
5
- import { c as x } from "../../.chunks/createSvgIcon.js";
6
- import i from "../../theme.js";
7
- import { LabeledValue as W } from "../../base/LabeledValue/LabeledValue.js";
8
- import { LabeledInput as q } from "../../composite/LabeledInput/LabeledInput.js";
9
- import A from "../../base/Loading/Loading.js";
10
- import p from "../../base/Flex/Flex.js";
11
- import { Tooltip as b } from "../../composite/Tooltip/Tooltip.js";
12
- import { T as D } from "../../.chunks/Input.js";
13
- import { B as H } from "../../.chunks/ButtonBase.js";
14
- const J = x(/* @__PURE__ */ o("path", {
5
+ import { c as w } from "../../.chunks/createSvgIcon.js";
6
+ import s from "../../theme.js";
7
+ import { LabeledValue as D } from "../../base/LabeledValue/LabeledValue.js";
8
+ import { LabeledInput as H } from "../../composite/LabeledInput/LabeledInput.js";
9
+ import J from "../../base/Loading/Loading.js";
10
+ import h from "../../base/Flex/Flex.js";
11
+ import { Tooltip as x } from "../../composite/Tooltip/Tooltip.js";
12
+ import { T as K } from "../../.chunks/Input.js";
13
+ import { B as N } from "../../.chunks/ButtonBase.js";
14
+ const O = w(/* @__PURE__ */ o("path", {
15
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"
16
- }), "Edit"), K = x(/* @__PURE__ */ o("path", {
16
+ }), "Edit"), Q = w(/* @__PURE__ */ o("path", {
17
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"
18
- }), "Close"), N = x(/* @__PURE__ */ o("path", {
18
+ }), "Close"), X = w(/* @__PURE__ */ o("path", {
19
19
  d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
20
- }), "Check"), y = d("div")(
21
- ({ width: t, padding: l, shadow: r, styles: h, isEditing: s }) => ({
20
+ }), "Check"), z = i("div")(
21
+ ({ width: t, padding: l, shadow: r, styles: m, isEditing: d }) => ({
22
22
  ...f`
23
23
  width: ${t};
24
24
  max-width: 100%;
@@ -34,17 +34,17 @@ const J = x(/* @__PURE__ */ o("path", {
34
34
  flex-direction: column;
35
35
  box-shadow: ${r};
36
36
  border-radius: 5px;
37
- background-color: ${i.colors.white};
38
- ${h};
39
- z-index: ${s ? 0 : 1};
37
+ background-color: ${s.colors.white};
38
+ ${m};
39
+ z-index: ${d ? 0 : 1};
40
40
  position: relative;
41
- transform: ${s ? "rotateY(-180deg)" : "rotateY(0deg)"};
41
+ transform: ${d ? "rotateY(-180deg)" : "rotateY(0deg)"};
42
42
  transition: 920ms all ease-in-out;
43
- opacity: ${s ? "0" : "1"};
43
+ opacity: ${d ? "0" : "1"};
44
44
  `
45
45
  })
46
- ), O = d(D)({
47
- backgroundColor: i.colors.white,
46
+ ), Z = i(K)({
47
+ backgroundColor: s.colors.white,
48
48
  borderRadius: "0",
49
49
  input: {
50
50
  fontSize: "28px",
@@ -52,14 +52,14 @@ const J = x(/* @__PURE__ */ o("path", {
52
52
  transition: "313ms all ease-out",
53
53
  padding: "0",
54
54
  borderRadius: "0",
55
- borderBottom: `1px solid ${i.colors.gray}`,
55
+ borderBottom: `1px solid ${s.colors.gray}`,
56
56
  "&:focus, :focus-visible": {
57
- boxShadow: `0 3px 2px -2px ${i.colors.darkGreen}`
57
+ boxShadow: `0 3px 2px -2px ${s.colors.darkGreen}`
58
58
  }
59
59
  },
60
60
  "&:hover, :focus, :focus-visible": {
61
61
  input: {
62
- boxShadow: `0 3px 2px -2px ${i.colors.darkGreen}`
62
+ boxShadow: `0 3px 2px -2px ${s.colors.darkGreen}`
63
63
  }
64
64
  },
65
65
  fieldset: {
@@ -71,7 +71,7 @@ const J = x(/* @__PURE__ */ o("path", {
71
71
  border: "none"
72
72
  }
73
73
  }
74
- }), Q = d(y)(({ isEditing: t }) => ({
74
+ }), _ = i(z)(({ isEditing: t }) => ({
75
75
  ...f`
76
76
  position: absolute;
77
77
  top: 0;
@@ -80,60 +80,70 @@ const J = x(/* @__PURE__ */ o("path", {
80
80
  opacity: ${t ? "1" : "0"};
81
81
  transition: 920ms all ease-in-out;
82
82
  `
83
- })), I = d("div")(({ spacing: t, columns: l }) => ({
84
- ...f`
85
- margin-top: calc(${t} * 0.75);
86
- grid-row-gap: ${t};
87
- grid-column-gap: calc(${t} * 1.5);
88
- display: grid;
89
- grid-template-columns: repeat(${l}, 1fr);
90
- `
91
- })), g = d(H)(() => ({
83
+ })), y = i("div")(
84
+ ({ spacing: t, columns: l, numRows: r }) => ({
85
+ ...f`
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
+ ), C = i(N)(() => ({
92
95
  ...f`
93
96
  width: 40px;
94
97
  height: 40px;
95
98
  border-radius: 50%;
96
99
  `
97
- })), X = d("div")`
100
+ })), oo = i("div")`
98
101
  position: relative;
99
- `, fo = ({
102
+ width: 100%;
103
+ `, eo = i("div")`
104
+ height: 19px;
105
+ `, bo = ({
100
106
  decorativeElement: t,
101
107
  title: l,
102
108
  items: r = [],
103
- padding: h = "1rem 2rem",
104
- shadow: s = i.boxShadow.darkGreen,
105
- spacing: S = "2rem",
106
- columns: k = 3,
107
- styles: z,
108
- width: j = "100%",
109
- loading: B = !1,
110
- onSave: L = () => {
109
+ padding: m = "1rem 2rem",
110
+ shadow: d = s.boxShadow.darkGreen,
111
+ spacing: k = "2rem",
112
+ columns: $ = 3,
113
+ styles: M,
114
+ width: B = "100%",
115
+ loading: L = !1,
116
+ onSave: P = () => {
111
117
  },
112
- onCancel: M = () => {
118
+ onCancel: R = () => {
113
119
  },
114
- onEdit: P = () => {
120
+ onEdit: T = () => {
115
121
  }
116
122
  }) => {
117
- const C = r.reduce((e, n) => ({ ...e, [n.label]: n.value }), { titleValue: l }), [T, m] = v(!1), [c, u] = v(C), R = () => {
118
- P(), m(!0);
123
+ const u = r.reduce((e, n) => ({ ...e, [n.label]: n.value }), { titleValue: l }), [j, b] = S(!1), [c, p] = S(u);
124
+ A(() => {
125
+ p(u);
126
+ }, [r]);
127
+ const E = () => {
128
+ T(), b(!0);
119
129
  }, V = () => {
120
- L(c), m(!1);
130
+ P(c), b(!1);
121
131
  }, Y = () => {
122
- M(), u(C), m(!1);
123
- }, E = (e, n) => {
124
- u((G) => ({ ...G, [e]: n }));
125
- }, F = (e) => {
126
- u((n) => ({ ...n, titleValue: e }));
127
- }, w = { width: j, padding: h, shadow: s, styles: z, isEditing: T }, $ = { spacing: S, columns: k };
128
- return /* @__PURE__ */ a(X, { children: [
129
- /* @__PURE__ */ a(y, { ...w, children: [
130
- /* @__PURE__ */ a(p, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
131
- /* @__PURE__ */ a(p, { width: "100%", gap: "1rem", alignItems: "center", children: [
132
+ R(), p(u), b(!1);
133
+ }, F = (e, n) => {
134
+ p((W) => ({ ...W, [e]: n }));
135
+ }, G = (e) => {
136
+ p((n) => ({ ...n, titleValue: e }));
137
+ }, U = Math.ceil(r.length / $), g = 48, v = { width: B, padding: m, shadow: d, styles: M, isEditing: j }, I = { spacing: k, columns: $, numRows: U };
138
+ return /* @__PURE__ */ a(oo, { children: [
139
+ /* @__PURE__ */ a(z, { ...v, children: [
140
+ /* @__PURE__ */ a(h, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
141
+ /* @__PURE__ */ a(h, { width: "100%", gap: "1rem", alignItems: "center", children: [
132
142
  t && t,
133
143
  /* @__PURE__ */ o("h3", { children: l })
134
144
  ] }),
135
145
  /* @__PURE__ */ o(
136
- b,
146
+ x,
137
147
  {
138
148
  title: "Edit",
139
149
  placement: "top",
@@ -149,29 +159,39 @@ const J = x(/* @__PURE__ */ o("path", {
149
159
  ]
150
160
  }
151
161
  },
152
- children: /* @__PURE__ */ o(g, { onClick: R, children: /* @__PURE__ */ o(J, {}) })
162
+ children: /* @__PURE__ */ o(C, { onClick: E, children: /* @__PURE__ */ o(O, {}) })
153
163
  }
154
164
  )
155
165
  ] }),
156
- /* @__PURE__ */ o(I, { ...$, children: B ? /* @__PURE__ */ a(U, { children: [
157
- /* @__PURE__ */ o("div", {}),
158
- /* @__PURE__ */ o(A, { styles: { justifySelf: "center", alignSelf: "center" } })
159
- ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(W, { ...e }, e.label)) })
166
+ /* @__PURE__ */ o(y, { ...I, children: L ? /* @__PURE__ */ a(q, { children: [
167
+ /* @__PURE__ */ o(eo, {}),
168
+ /* @__PURE__ */ o(
169
+ J,
170
+ {
171
+ size: g,
172
+ styles: {
173
+ position: "absolute",
174
+ top: `calc(50% - ${g / 2}px)`,
175
+ right: `calc(50% - ${g / 2}px)`
176
+ }
177
+ }
178
+ )
179
+ ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(D, { ...e }, e.label)) })
160
180
  ] }),
161
- /* @__PURE__ */ a(Q, { ...w, children: [
162
- /* @__PURE__ */ a(p, { width: "100%", justifyContent: "space-between", children: [
163
- /* @__PURE__ */ a(p, { width: "100%", gap: "1rem", alignItems: "center", children: [
181
+ /* @__PURE__ */ a(_, { ...v, children: [
182
+ /* @__PURE__ */ a(h, { width: "100%", justifyContent: "space-between", children: [
183
+ /* @__PURE__ */ a(h, { width: "100%", gap: "1rem", alignItems: "center", children: [
164
184
  t && t,
165
185
  /* @__PURE__ */ o("h3", { children: /* @__PURE__ */ o(
166
- O,
186
+ Z,
167
187
  {
168
- onChange: (e) => F(e.target.value),
188
+ onChange: (e) => G(e.target.value),
169
189
  value: (c == null ? void 0 : c.titleValue) ?? l
170
190
  }
171
191
  ) })
172
192
  ] }),
173
193
  /* @__PURE__ */ o(
174
- b,
194
+ x,
175
195
  {
176
196
  title: "Cancel",
177
197
  placement: "top",
@@ -187,11 +207,11 @@ const J = x(/* @__PURE__ */ o("path", {
187
207
  ]
188
208
  }
189
209
  },
190
- children: /* @__PURE__ */ o(g, { onClick: Y, children: /* @__PURE__ */ o(K, {}) })
210
+ children: /* @__PURE__ */ o(C, { onClick: Y, children: /* @__PURE__ */ o(Q, {}) })
191
211
  }
192
212
  ),
193
213
  /* @__PURE__ */ o(
194
- b,
214
+ x,
195
215
  {
196
216
  title: "Save",
197
217
  placement: "top",
@@ -207,16 +227,16 @@ const J = x(/* @__PURE__ */ o("path", {
207
227
  ]
208
228
  }
209
229
  },
210
- children: /* @__PURE__ */ o(g, { onClick: V, children: /* @__PURE__ */ o(N, {}) })
230
+ children: /* @__PURE__ */ o(C, { onClick: V, children: /* @__PURE__ */ o(X, {}) })
211
231
  }
212
232
  )
213
233
  ] }),
214
- /* @__PURE__ */ o(I, { ...$, children: r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
215
- q,
234
+ /* @__PURE__ */ o(y, { ...I, children: r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
235
+ H,
216
236
  {
217
237
  label: e.label,
218
238
  value: c[e.label],
219
- onChange: (n) => E(e.label, n.target.value)
239
+ onChange: (n) => F(e.label, n.target.value)
220
240
  },
221
241
  e.label
222
242
  )) })
@@ -224,6 +244,6 @@ const J = x(/* @__PURE__ */ o("path", {
224
244
  ] });
225
245
  };
226
246
  export {
227
- fo as EditableInfoCard,
228
- fo as default
247
+ bo as EditableInfoCard,
248
+ bo as default
229
249
  };