jcicl 0.0.81 → 0.0.83

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