jcicl 0.0.249 → 0.0.253

package/DefaultTemplate/DefaultTemplate.js

@@ -1,14 +1,13 @@
-import { jsx as e, jsxs as n, Fragment as k } from "react/jsx-runtime";
+import { jsx as e, jsxs as d, Fragment as k } from "react/jsx-runtime";
 import { useState as C } from "react";
-import { n as m } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as h } from "../.chunks/emotion-react.browser.esm.js";
+import { n as h } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as g } from "../.chunks/emotion-react.browser.esm.js";
 import o from "../theme.js";
 import { u as f, A as p } from "../.chunks/AppContainer.js";
 import w from "../WithLoading/WithLoading.js";
 import { TopFade as T, BottomFade as S } from "../Overlays/Overlays.js";
-const P = ["loading", "hasPagination", "loadingColor"], R = m("div", { shouldForwardProp: (r) => !P.includes(r) })(({ loading: r, hasPagination: l, hasFade: c, loadingColor: s = o.colors.green }) => ({
-  ...h`
-    position: relative;
+const P = ["loading", "hasPagination", "loadingColor"], R = h("div", { shouldForwardProp: (r) => !P.includes(r) })(({ loading: r, hasPagination: l, hasFade: s, loadingColor: c = o.colors.green }) => ({
+  ...g`
     color: ${o.colors.midnight};
     height: ${r ? "100%" : "auto"};
     padding: 19px;
@@ -17,19 +16,19 @@ const P = ["loading", "hasPagination", "loadingColor"], R = m("div", { shouldFor
     justify-content: ${r ? "center" : "start"};
     align-items: center;
     width: 100%;
-    height: 100%;
+    min-height: 100%;
     box-sizing: border-box;
-    padding-bottom: ${c ? l ? "114px" : "72px" : "19px"};
+    padding-bottom: ${s ? l ? "114px" : "72px" : "19px"};
     > * div {
       box-sizing: border-box;
     }
 
     .MuiCircularProgress-svg {
-      color: ${s};
+      color: ${c};
     }
   `
-})), $ = m("div")(() => ({
-  ...h`
+})), $ = h("div")(() => ({
+  ...g`
     border-radius: 8px;
     padding: 0;
     display: flex;
@@ -40,15 +39,15 @@ const P = ["loading", "hasPagination", "loadingColor"], R = m("div", { shouldFor
     min-height: 100%;
     box-sizing: border-box;
   `
-})), v = {
+})), M = {
   green: o.colors.green,
   blue: o.colors.darkBlue,
   red: o.colors.darkRed
-}, d = {
+}, m = {
   green: o.colors.whiteGreen,
   blue: o.colors.sky,
   red: o.colors.lighterRed
-}, M = {
+}, v = {
   backgroundPrimary: o.colors.sky,
   backgroundSecondary: o.colors.lovemist,
   backgroundTertiary: o.colors.cornflower,
@@ -79,18 +78,18 @@ const P = ["loading", "hasPagination", "loadingColor"], R = m("div", { shouldFor
     backgroundColor: o.colors.lighterRed
   }
 }, z = {
-  blue: M,
+  blue: v,
   red: I,
   green: void 0
 }, L = ({
   children: r,
   loading: l = !1,
-  hasPagination: c = !1,
-  fade: s = !0,
-  userProfileMenuItems: g,
+  hasPagination: s = !1,
+  fade: c = !0,
+  userProfileMenuItems: u,
   ...t
 }) => {
-  const u = localStorage.getItem("theme") || "green", [a, i] = C(u), b = f(`(max-width: ${o.screenSizes.mobile})`), y = z[a], x = [
+  const b = localStorage.getItem("theme") || "green", [a, i] = C(b), n = f(`(max-width: ${o.screenSizes.mobile})`), y = z[a], x = [
     {
       label: "Green Theme",
       onClick: () => {
@@ -109,7 +108,7 @@ const P = ["loading", "hasPagination", "loadingColor"], R = m("div", { shouldFor
         localStorage.setItem("theme", "red"), i("red");
       }
     },
-    ...g || []
+    ...u || []
   ];
   return /* @__PURE__ */ e(
     p,
@@ -122,13 +121,13 @@ const P = ["loading", "hasPagination", "loadingColor"], R = m("div", { shouldFor
         {
           className: "jcPageWrapper",
           loading: l,
-          loadingColor: v[a],
-          hasPagination: c,
-          hasFade: s,
-          children: /* @__PURE__ */ n(w, { loading: l, size: b ? 114 : 201, children: [
-            s && /* @__PURE__ */ n(k, { children: [
-              /* @__PURE__ */ e(T, { color: d[a] }),
-              /* @__PURE__ */ e(S, { color: d[a] })
+          loadingColor: M[a],
+          hasPagination: s,
+          hasFade: c,
+          children: /* @__PURE__ */ d(w, { loading: l, size: n ? 114 : 201, children: [
+            c && /* @__PURE__ */ d(k, { children: [
+              /* @__PURE__ */ e(T, { color: m[a] }),
+              /* @__PURE__ */ e(S, { hasPagination: s, isMobile: n, color: m[a] })
             ] }),
             /* @__PURE__ */ e($, { children: r })
           ] })

package/Overlays/Overlays.d.ts

@@ -2,6 +2,8 @@ export declare const BottomFade: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
 } & {
+    isMobile: boolean;
+    hasPagination: boolean;
     color?: string;
 }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TopFade: import('@emotion/styled').StyledComponent<{

package/Overlays/Overlays.js

@@ -1,28 +1,30 @@
-import { n as t } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as o } from "../.chunks/emotion-react.browser.esm.js";
-import i from "../theme.js";
-const s = t("div")(({ color: e = i.colors.whiteGreen }) => ({
-  ...o`
+import { n } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as p } from "../.chunks/emotion-react.browser.esm.js";
+import o from "../theme.js";
+const s = n("div")(
+  ({ isMobile: e, hasPagination: t, color: i = o.colors.whiteGreen }) => ({
+    ...p`
+      width: calc(100% - 72px);
+      max-width: 1300px;
+      position: fixed;
+      bottom: ${t && e ? "128px" : t && !e ? "57px" : !t && e ? "74px" : "3px"};
+      background-image: linear-gradient(to top, ${i}, ${i}00);
+      pointer-events: none;
+      height: 92px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 92;
+    `
+  })
+), a = n("div")(({ color: e = o.colors.whiteGreen }) => ({
+  ...p`
     width: calc(100% - 72px);
     max-width: 1300px;
-    position: absolute;
-    bottom: 0;
-    background-image: linear-gradient(to top, ${e}, ${e}00);
-    pointer-events: none;
-    height: 92px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 92;
-  `
-})), d = t("div")(({ color: e = i.colors.whiteGreen }) => ({
-  ...o`
-    width: calc(100% - 72px);
-    max-width: 1300px;
-    position: absolute;
-    bottom: 0;
-    background-image: linear-gradient(to top, ${e}, ${e}00);
+    position: fixed;
+    top: ${o.constants.appHeaderHeight + 1}px;
+    background-image: linear-gradient(to bottom, ${e}, ${e}00);
     pointer-events: none;
     height: 29px;
     box-sizing: border-box;
@@ -34,5 +36,5 @@ const s = t("div")(({ color: e = i.colors.whiteGreen }) => ({
 }));
 export {
   s as BottomFade,
-  d as TopFade
+  a as TopFade
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.249",
+  "version": "0.0.253",
   "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",