jcicl 0.0.70 → 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 (2) hide show
  1. package/package.json +1 -1
  2. package/supercomposite/EditableInfoCard/EditableInfoCard.js +79 -67
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.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.js CHANGED
@@ -1,25 +1,25 @@
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";
4
- import { c as f } from "../../.chunks/emotion-react.browser.esm.js";
1
+ import { jsx as o, jsxs as a, Fragment as W } from "react/jsx-runtime";
2
+ import { useState as I } from "react";
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 W } from "../../base/LabeledValue/LabeledValue.js";
8
- import { LabeledInput as q } from "../../composite/LabeledInput/LabeledInput.js";
9
- import A from "../../base/Loading/Loading.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";
10
10
  import p from "../../base/Flex/Flex.js";
11
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", {
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", {
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"), N = x(/* @__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"), O = x(/* @__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 }) => ({
22
- ...f`
20
+ }), "Check"), S = i("div")(
21
+ ({ width: t, padding: l, shadow: r, styles: f, isEditing: d }) => ({
22
+ ...h`
23
23
  width: ${t};
24
24
  max-width: 100%;
25
25
  box-sizing: border-box;
@@ -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
+ ${f};
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
+ ), Q = i(H)({
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,8 +71,8 @@ const J = x(/* @__PURE__ */ o("path", {
71
71
  border: "none"
72
72
  }
73
73
  }
74
- }), Q = d(y)(({ isEditing: t }) => ({
75
- ...f`
74
+ }), X = i(S)(({ isEditing: t }) => ({
75
+ ...h`
76
76
  position: absolute;
77
77
  top: 0;
78
78
  z-index: ${t ? 1 : 0};
@@ -80,53 +80,59 @@ 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)(() => ({
92
- ...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`
93
96
  width: 40px;
94
97
  height: 40px;
95
98
  border-radius: 50%;
96
99
  `
97
- })), X = d("div")`
100
+ })), Z = i("div")`
98
101
  position: relative;
99
- `, fo = ({
102
+ width: 100%;
103
+ `, _ = i("div")`
104
+ height: 19px;
105
+ `, mo = ({
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,
109
+ padding: f = "1rem 2rem",
110
+ shadow: d = s.boxShadow.darkGreen,
111
+ spacing: k = "2rem",
112
+ columns: C = 3,
107
113
  styles: z,
108
- width: j = "100%",
114
+ width: M = "100%",
109
115
  loading: B = !1,
110
116
  onSave: L = () => {
111
117
  },
112
- onCancel: M = () => {
118
+ onCancel: P = () => {
113
119
  },
114
- onEdit: P = () => {
120
+ onEdit: R = () => {
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 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);
119
125
  }, V = () => {
120
126
  L(c), m(!1);
121
127
  }, Y = () => {
122
- M(), u(C), m(!1);
128
+ P(), u(w), m(!1);
123
129
  }, E = (e, n) => {
124
- u((G) => ({ ...G, [e]: n }));
130
+ u((U) => ({ ...U, [e]: n }));
125
131
  }, F = (e) => {
126
132
  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: [
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: [
130
136
  /* @__PURE__ */ a(p, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
131
137
  /* @__PURE__ */ a(p, { width: "100%", gap: "1rem", alignItems: "center", children: [
132
138
  t && t,
@@ -149,21 +155,27 @@ const J = x(/* @__PURE__ */ o("path", {
149
155
  ]
150
156
  }
151
157
  },
152
- children: /* @__PURE__ */ o(g, { onClick: R, children: /* @__PURE__ */ o(J, {}) })
158
+ children: /* @__PURE__ */ o(g, { onClick: j, children: /* @__PURE__ */ o(K, {}) })
153
159
  }
154
160
  )
155
161
  ] }),
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)) })
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)) })
160
172
  ] }),
161
- /* @__PURE__ */ a(Q, { ...w, children: [
173
+ /* @__PURE__ */ a(X, { ...$, children: [
162
174
  /* @__PURE__ */ a(p, { width: "100%", justifyContent: "space-between", children: [
163
175
  /* @__PURE__ */ a(p, { width: "100%", gap: "1rem", alignItems: "center", children: [
164
176
  t && t,
165
177
  /* @__PURE__ */ o("h3", { children: /* @__PURE__ */ o(
166
- O,
178
+ Q,
167
179
  {
168
180
  onChange: (e) => F(e.target.value),
169
181
  value: (c == null ? void 0 : c.titleValue) ?? l
@@ -187,7 +199,7 @@ const J = x(/* @__PURE__ */ o("path", {
187
199
  ]
188
200
  }
189
201
  },
190
- children: /* @__PURE__ */ o(g, { onClick: Y, children: /* @__PURE__ */ o(K, {}) })
202
+ children: /* @__PURE__ */ o(g, { onClick: Y, children: /* @__PURE__ */ o(N, {}) })
191
203
  }
192
204
  ),
193
205
  /* @__PURE__ */ o(
@@ -207,12 +219,12 @@ const J = x(/* @__PURE__ */ o("path", {
207
219
  ]
208
220
  }
209
221
  },
210
- children: /* @__PURE__ */ o(g, { onClick: V, children: /* @__PURE__ */ o(N, {}) })
222
+ children: /* @__PURE__ */ o(g, { onClick: V, children: /* @__PURE__ */ o(O, {}) })
211
223
  }
212
224
  )
213
225
  ] }),
214
- /* @__PURE__ */ o(I, { ...$, children: r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
215
- q,
226
+ /* @__PURE__ */ o(y, { ...v, children: r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
227
+ A,
216
228
  {
217
229
  label: e.label,
218
230
  value: c[e.label],
@@ -224,6 +236,6 @@ const J = x(/* @__PURE__ */ o("path", {
224
236
  ] });
225
237
  };
226
238
  export {
227
- fo as EditableInfoCard,
228
- fo as default
239
+ mo as EditableInfoCard,
240
+ mo as default
229
241
  };