jcicl 0.0.56 → 0.0.58

package/composite/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export { default, type TooltipProps } from './Tooltip';

package/composite/Tooltip/index.js

@@ -0,0 +1,4 @@
+import { Tooltip as a } from "./Tooltip.js";
+export {
+  a as default
+};

package/composite/index.d.ts

@@ -1,6 +1,9 @@
+export { default as Accordion } from './Accordion';
 export { default as ErrorBoundary } from './ErrorBoundary';
 export { default as InfoCard } from './InfoCard';
+export { default as LabeledInput } from './LabeledInput';
 export { default as List } from './List';
 export { default as LogoLoop } from './LogoLoop';
+export { default as Tooltip } from './Tooltip';
 export { default as WithLabel } from './WithLabel';
 export { default as WithLoading } from './WithLoading';

package/composite/index.js

@@ -1,14 +1,20 @@
+import { Accordion as t } from "./Accordion/Accordion.js";
 import { default as a } from "./ErrorBoundary/ErrorBoundary.js";
-import { InfoCard as e } from "./InfoCard/InfoCard.js";
-import { default as d } from "./List/List.js";
-import { default as l } from "./LogoLoop/LogoLoop.js";
-import { default as s } from "./WithLabel/WithLabel.js";
-import { default as x } from "./WithLoading/WithLoading.js";
+import { InfoCard as p } from "./InfoCard/InfoCard.js";
+import { LabeledInput as m } from "./LabeledInput/LabeledInput.js";
+import { default as l } from "./List/List.js";
+import { default as i } from "./LogoLoop/LogoLoop.js";
+import { Tooltip as L } from "./Tooltip/Tooltip.js";
+import { default as b } from "./WithLabel/WithLabel.js";
+import { default as g } from "./WithLoading/WithLoading.js";
 export {
+  t as Accordion,
   a as ErrorBoundary,
-  e as InfoCard,
-  d as List,
-  l as LogoLoop,
-  s as WithLabel,
-  x as WithLoading
+  p as InfoCard,
+  m as LabeledInput,
+  l as List,
+  i as LogoLoop,
+  L as Tooltip,
+  b as WithLabel,
+  g as WithLoading
 };

package/index.d.ts

@@ -1,5 +1,5 @@
-export { ZoomEntrance } from './animation';
+export { Spin, ZoomEntrance } from './animation';
 export { Avatar, AvatarWithImage, Button, Divider, Flex, Grid, Icon, Input, LabeledValue, ListButton, Loading, ScrollContainer, } from './base';
-export { ErrorBoundary, InfoCard, List, LogoLoop, WithLabel, WithLoading } from './composite';
-export { AppHeader, Nav } from './supercomposite';
+export { Accordion, ErrorBoundary, InfoCard, LabeledInput, List, LogoLoop, Tooltip, WithLabel, WithLoading, } from './composite';
+export { AppHeader, EditableInfoCard, Nav } from './supercomposite';
 export { AppContainer } from './templates';

package/index.js

@@ -1,46 +1,56 @@
-import { default as t } from "./animation/ZoomEntrance/ZoomEntrance.js";
-import { default as a } from "./base/Avatar/Avatar.js";
-import { AvatarWithImage as p } from "./base/AvatarWithImage/AvatarWithImage.js";
-import { Button as x } from "./base/Button/Button.js";
-import { Divider as l } from "./base/Divider/Divider.js";
-import { default as s } from "./base/Flex/Flex.js";
-import { Grid as i } from "./base/Grid/Grid.js";
-import { default as g } from "./base/Icon/Icon.js";
-import { Input as A } from "./base/Input/Input.js";
-import { LabeledValue as c } from "./base/LabeledValue/LabeledValue.js";
+import { default as t } from "./animation/Spin/Spin.js";
+import { default as a } from "./animation/ZoomEntrance/ZoomEntrance.js";
+import { default as p } from "./base/Avatar/Avatar.js";
+import { AvatarWithImage as x } from "./base/AvatarWithImage/AvatarWithImage.js";
+import { Button as l } from "./base/Button/Button.js";
+import { Divider as n } from "./base/Divider/Divider.js";
+import { default as i } from "./base/Flex/Flex.js";
+import { Grid as I } from "./base/Grid/Grid.js";
+import { default as A } from "./base/Icon/Icon.js";
+import { I as g } from "./.chunks/Input.js";
+import { LabeledValue as C } from "./base/LabeledValue/LabeledValue.js";
 import { default as B } from "./base/ListButton/ListButton.js";
 import { default as W } from "./base/Loading/Loading.js";
-import { default as E } from "./base/ScrollContainer/ScrollContainer.js";
-import { default as D } from "./composite/ErrorBoundary/ErrorBoundary.js";
-import { InfoCard as G } from "./composite/InfoCard/InfoCard.js";
-import { default as N } from "./composite/List/List.js";
-import { default as V } from "./composite/LogoLoop/LogoLoop.js";
-import { default as j } from "./composite/WithLabel/WithLabel.js";
-import { default as q } from "./composite/WithLoading/WithLoading.js";
-import { default as z } from "./supercomposite/AppHeader/AppHeader.js";
-import { Nav as K } from "./supercomposite/Nav/Nav.js";
-import { default as O } from "./templates/AppContainer/AppContainer.js";
+import { default as y } from "./base/ScrollContainer/ScrollContainer.js";
+import { Accordion as F } from "./composite/Accordion/Accordion.js";
+import { default as H } from "./composite/ErrorBoundary/ErrorBoundary.js";
+import { InfoCard as T } from "./composite/InfoCard/InfoCard.js";
+import { LabeledInput as Z } from "./composite/LabeledInput/LabeledInput.js";
+import { default as k } from "./composite/List/List.js";
+import { default as w } from "./composite/LogoLoop/LogoLoop.js";
+import { Tooltip as J } from "./composite/Tooltip/Tooltip.js";
+import { default as M } from "./composite/WithLabel/WithLabel.js";
+import { default as P } from "./composite/WithLoading/WithLoading.js";
+import { default as R } from "./supercomposite/AppHeader/AppHeader.js";
+import { EditableInfoCard as X } from "./supercomposite/EditableInfoCard/EditableInfoCard.js";
+import { Nav as _ } from "./supercomposite/Nav/Nav.js";
+import { default as oo } from "./templates/AppContainer/AppContainer.js";
 export {
-  O as AppContainer,
-  z as AppHeader,
-  a as Avatar,
-  p as AvatarWithImage,
-  x as Button,
-  l as Divider,
-  D as ErrorBoundary,
-  s as Flex,
-  i as Grid,
-  g as Icon,
-  G as InfoCard,
-  A as Input,
-  c as LabeledValue,
-  N as List,
+  F as Accordion,
+  oo as AppContainer,
+  R as AppHeader,
+  p as Avatar,
+  x as AvatarWithImage,
+  l as Button,
+  n as Divider,
+  X as EditableInfoCard,
+  H as ErrorBoundary,
+  i as Flex,
+  I as Grid,
+  A as Icon,
+  T as InfoCard,
+  g as Input,
+  Z as LabeledInput,
+  C as LabeledValue,
+  k as List,
   B as ListButton,
   W as Loading,
-  V as LogoLoop,
-  K as Nav,
-  E as ScrollContainer,
-  j as WithLabel,
-  q as WithLoading,
-  t as ZoomEntrance
+  w as LogoLoop,
+  _ as Nav,
+  y as ScrollContainer,
+  t as Spin,
+  J as Tooltip,
+  M as WithLabel,
+  P as WithLoading,
+  a as ZoomEntrance
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.56",
+  "version": "0.0.58",
   "description": "Component library for the websites of Johnson County Iowa",
   "license": "MIT",
   "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",

package/supercomposite/AppHeader/AppHeader.js

@@ -3,7 +3,7 @@ import { useState as a } from "react";
 import { n } from "../../.chunks/emotion-styled.browser.esm.js";
 import e from "../../theme.js";
 import { l as c } from "../../.chunks/jocologo.js";
-import { Input as m } from "../../base/Input/Input.js";
+import { I as m } from "../../.chunks/Input.js";
 import { Button as p } from "../../base/Button/Button.js";
 import d from "../../base/Avatar/Avatar.js";
 const l = n("div")(({ navWidth: o }) => ({

package/supercomposite/EditableInfoCard/EditableInfoCard.d.ts

@@ -0,0 +1,29 @@
+import { CSSObject } from '@emotion/react';
+import { LabeledValueProps } from '../../../../../../../../../src/components/base/LabeledValue';
+interface EditableInfoCardStyleProps {
+    /** The element placed before the header text. This can be any valid React Node */
+    decorativeElement?: React.ReactNode;
+    /** Padding for the card */
+    padding?: string;
+    /** Box shadow around the card */
+    shadow?: string;
+    /** Spacing between the items */
+    spacing?: string;
+    columns?: number;
+    /** Custom styles for the card */
+    styles?: CSSObject;
+    /** Save event handler. Exposes card data through a json object with key value pairs corresponding to the card labels, with spaces removed. **Usage:** ```onSave(items) => { ...doStuff }``` */
+    onSave: (items: {
+        [key: string]: any;
+    }) => void;
+    onCancel?: () => void;
+    onEdit?: () => void;
+    width?: string;
+}
+export interface EditableInfoCardProps extends EditableInfoCardStyleProps {
+    title?: string;
+    /** An array of information to display in the card. Format: `{ label, value }`. Built on top of the Labeled Value component. */
+    items?: LabeledValueProps[];
+}
+export declare const EditableInfoCard: React.FC<EditableInfoCardProps>;
+export default EditableInfoCard;

package/supercomposite/EditableInfoCard/EditableInfoCard.js

@@ -0,0 +1,223 @@
+import { jsx as o, jsxs as l, Fragment as G } from "react/jsx-runtime";
+import { useState as I } from "react";
+import { n as c } from "../../.chunks/emotion-styled.browser.esm.js";
+import { c as f } from "../../.chunks/emotion-react.browser.esm.js";
+import { c as x } from "../../.chunks/createSvgIcon.js";
+import d from "../../theme.js";
+import { LabeledValue as U } from "../../base/LabeledValue/LabeledValue.js";
+import { LabeledInput as W } from "../../composite/LabeledInput/LabeledInput.js";
+import p from "../../base/Flex/Flex.js";
+import { Tooltip as b } from "../../composite/Tooltip/Tooltip.js";
+import { T as q } from "../../.chunks/Input.js";
+import { B as A } from "../../.chunks/ButtonBase.js";
+const D = x(/* @__PURE__ */ o("path", {
+  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"
+}), "Edit"), H = x(/* @__PURE__ */ o("path", {
+  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"
+}), "Close"), J = x(/* @__PURE__ */ o("path", {
+  d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+}), "Check"), k = c("div")(
+  ({ width: t, padding: a, shadow: r, styles: h, isEditing: s }) => ({
+    ...f`
+      width: ${t};
+      max-width: 100%;
+      h3 {
+        margin: 0;
+        width: 100%;
+        font-size: 28px;
+      }
+      font-family: 'Roboto', sans-serif;
+      padding: ${a};
+      display: flex;
+      flex-direction: column;
+      box-shadow: ${r};
+      border-radius: 5px;
+      background-color: ${d.colors.white};
+      ${h};
+      z-index: ${s ? 0 : 1};
+      position: relative;
+      transform: ${s ? "rotateY(-180deg)" : "rotateY(0deg)"};
+      transition: 920ms all ease-in-out;
+      opacity: ${s ? "0" : "1"};
+    `
+  })
+), K = c(q)({
+  backgroundColor: d.colors.white,
+  borderRadius: "0",
+  input: {
+    fontSize: "28px",
+    fontWeight: "bold",
+    transition: "313ms all ease-out",
+    padding: "0",
+    borderRadius: "0",
+    borderBottom: `1px solid ${d.colors.gray}`,
+    "&:focus, :focus-visible": {
+      boxShadow: `0 3px 2px -2px ${d.colors.darkGreen}`
+    }
+  },
+  "&:hover, :focus, :focus-visible": {
+    input: {
+      boxShadow: `0 3px 2px -2px ${d.colors.darkGreen}`
+    }
+  },
+  fieldset: {
+    borderRadius: "0",
+    border: "none"
+  },
+  "&.Mui-focused": {
+    fieldset: {
+      border: "none"
+    }
+  }
+}), N = c(k)(({ isEditing: t }) => ({
+  ...f`
+    position: absolute;
+    top: 9px;
+    z-index: ${t ? 1 : 0};
+    transform: ${t ? "rotateY(0deg)" : "rotateY(-180deg)"};
+    opacity: ${t ? "1" : "0"};
+    transition: 920ms all ease-in-out;
+  `
+})), v = c("div")(({ spacing: t, columns: a }) => ({
+  ...f`
+    margin-top: calc(${t} * 0.75);
+    grid-row-gap: ${t};
+    grid-column-gap: calc(${t} * 1.5);
+    display: grid;
+    grid-template-columns: repeat(${a}, 1fr);
+  `
+})), g = c(A)(() => ({
+  ...f`
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  `
+})), io = ({
+  decorativeElement: t,
+  title: a,
+  items: r = [],
+  padding: h = "1rem 2rem",
+  shadow: s = d.boxShadow.darkGreen,
+  spacing: y = "2rem",
+  columns: S = 3,
+  styles: z,
+  width: B,
+  onSave: M = () => {
+  },
+  onCancel: P = () => {
+  },
+  onEdit: T = () => {
+  }
+}) => {
+  const C = r.reduce((e, n) => ({ ...e, [n.label]: n.value }), { titleValue: a }), [j, m] = I(!1), [i, u] = I(C), L = () => {
+    T(), m(!0);
+  }, R = () => {
+    M(i), m(!1);
+  }, V = () => {
+    P(), u(C), m(!1);
+  }, Y = (e, n) => {
+    u((F) => ({ ...F, [e]: n }));
+  }, E = (e) => {
+    u((n) => ({ ...n, titleValue: e }));
+  };
+  console.log(i);
+  const w = { width: B, padding: h, shadow: s, styles: z, isEditing: j }, $ = { spacing: y, columns: S };
+  return /* @__PURE__ */ l(G, { children: [
+    /* @__PURE__ */ l(k, { ...w, children: [
+      /* @__PURE__ */ l(p, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
+        /* @__PURE__ */ l(p, { width: "100%", gap: "1rem", alignItems: "center", children: [
+          t && t,
+          /* @__PURE__ */ o("h3", { children: a })
+        ] }),
+        /* @__PURE__ */ o(
+          b,
+          {
+            title: "Edit",
+            placement: "top",
+            slotProps: {
+              popper: {
+                modifiers: [
+                  {
+                    name: "offset",
+                    options: {
+                      offset: [0, -13]
+                    }
+                  }
+                ]
+              }
+            },
+            children: /* @__PURE__ */ o(g, { onClick: L, children: /* @__PURE__ */ o(D, {}) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(v, { ...$, children: r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(U, { ...e }, e.label)) })
+    ] }),
+    /* @__PURE__ */ l(N, { ...w, children: [
+      /* @__PURE__ */ l(p, { width: "100%", justifyContent: "space-between", children: [
+        /* @__PURE__ */ l(p, { width: "100%", gap: "1rem", alignItems: "center", children: [
+          t && t,
+          /* @__PURE__ */ o("h3", { children: /* @__PURE__ */ o(
+            K,
+            {
+              onChange: (e) => E(e.target.value),
+              value: (i == null ? void 0 : i.titleValue) ?? a
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ o(
+          b,
+          {
+            title: "Cancel",
+            placement: "top",
+            slotProps: {
+              popper: {
+                modifiers: [
+                  {
+                    name: "offset",
+                    options: {
+                      offset: [0, -13]
+                    }
+                  }
+                ]
+              }
+            },
+            children: /* @__PURE__ */ o(g, { onClick: V, children: /* @__PURE__ */ o(H, {}) })
+          }
+        ),
+        /* @__PURE__ */ o(
+          b,
+          {
+            title: "Save",
+            placement: "top",
+            slotProps: {
+              popper: {
+                modifiers: [
+                  {
+                    name: "offset",
+                    options: {
+                      offset: [0, -13]
+                    }
+                  }
+                ]
+              }
+            },
+            children: /* @__PURE__ */ o(g, { onClick: R, children: /* @__PURE__ */ o(J, {}) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(v, { ...$, children: r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
+        W,
+        {
+          label: e.label,
+          value: i[e.label],
+          onChange: (n) => Y(e.label, n.target.value)
+        },
+        e.label
+      )) })
+    ] })
+  ] });
+};
+export {
+  io as EditableInfoCard,
+  io as default
+};

package/supercomposite/EditableInfoCard/index.d.ts

@@ -0,0 +1 @@
+export { default, type EditableInfoCardProps } from './EditableInfoCard';

package/supercomposite/EditableInfoCard/index.js

@@ -0,0 +1,4 @@
+import { EditableInfoCard as e } from "./EditableInfoCard.js";
+export {
+  e as default
+};

package/supercomposite/index.d.ts

@@ -1,2 +1,3 @@
 export { default as AppHeader } from './AppHeader';
+export { default as EditableInfoCard } from './EditableInfoCard';
 export { default as Nav } from './Nav';

package/supercomposite/index.js

@@ -1,6 +1,8 @@
-import { default as a } from "./AppHeader/AppHeader.js";
-import { Nav as p } from "./Nav/Nav.js";
+import { default as o } from "./AppHeader/AppHeader.js";
+import { EditableInfoCard as f } from "./EditableInfoCard/EditableInfoCard.js";
+import { Nav as t } from "./Nav/Nav.js";
 export {
-  a as AppHeader,
-  p as Nav
+  o as AppHeader,
+  f as EditableInfoCard,
+  t as Nav
 };

package/theme.d.ts

@@ -39,10 +39,18 @@ export interface ThemeConstants {
     appHeaderHeight: number;
     navDefaultWidth: number;
 }
+export interface ThemeScreenSizes {
+    small: string;
+    medium: string;
+    large: string;
+    mobile: string;
+    tablet: string;
+}
 export interface Theme {
     boxShadow: ThemeBoxShadows;
     colors: ThemeColors;
     constants: ThemeConstants;
+    screenSizes: ThemeScreenSizes;
 }
 declare const theme: Theme;
 export default theme;

package/theme.js

@@ -34,6 +34,13 @@ const e = {
     appHeaderHeight: 54,
     actionsPaneWidth: 201,
     navDefaultWidth: 75
+  },
+  screenSizes: {
+    small: "600px",
+    medium: "900px",
+    large: "1300px",
+    mobile: "400px",
+    tablet: "810px"
   }
 };
 e.boxShadow = {