@zeniai/web-components 3.17.3 → 3.17.4

package/dist/ZeniDatePicker-D0R0LkOy.cjs

@@ -0,0 +1,187 @@
+"use strict";const r=require("./vendor-.pnpm-D0ILHvHB.cjs"),C=require("react"),o=require("@emotion/styled"),d=require("@zeniai/client-epic-state"),t=require("./index-DFkWjm-c.cjs"),D=require("./zeniDatePicker.helpers-CGgagBW2.cjs"),_=o(t.StandardRegularBtn)`
+  border: none;
+  background-color: ${e=>e.theme.colors.grey5};
+  width: 105px;
+  text-align: start;
+  padding: 0;
+  cursor: pointer;
+`,L=o.div`
+  display: flex;
+  align-items: center;
+  color: ${e=>e.theme.colors.grey1};
+  fill: ${e=>e.theme.colors.grey1};
+`,z=o.div`
+  display: flex;
+  align-items: center;
+  margin-right: ${t.Space.sp2};
+`,O=o(t.StandardRegular)`
+  display: flex;
+  align-items: center;
+`,k=o.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${t.Space.sp1};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,v=o(t.SvgArrowFilledBottom)`
+  width: 12px;
+  height: 12px;
+`,A=({datePickerOpen:e,showBusinessDay:$,selectedDate:g,placeHolder:y,style:j,inputStyles:{titleTextComponent:f}={},dateFormat:h,value:m,precomputedOptionsProperties:s,onDatePickerToggle:u,onClick:i})=>{if(s!=null){const{preComputedOptionSelected:x,preComputedOptions:n,preComputedOptionDateFormat:c}=s,S=n.find(l=>l.value===x);if(S!=null)return r.jsxRuntimeExports.jsxs(k,{onClick:l=>{l.preventDefault(),i?.(),u(!e)},children:[r.jsxRuntimeExports.jsx(t.ExtraSmallRegular,{children:`${t.appLocale.getLocalizedStrings().common.asOf} ${S.label}`}),r.jsxRuntimeExports.jsx(v,{})]});const{visual:{DMMMYYFormat:R}}=t.appLocale.getLocalizedStrings().dateFormat;return r.jsxRuntimeExports.jsxs(k,{onClick:l=>{l.preventDefault(),i?.(),u(!e)},children:[r.jsxRuntimeExports.jsx(t.ExtraSmallRegular,{children:`${t.appLocale.getLocalizedStrings().common.asOf} ${g?.date.format(c??R)}`}),r.jsxRuntimeExports.jsx(v,{})]})}const p=f??t.StandardRegularSp;return r.jsxRuntimeExports.jsx(_,{onClick:x=>{x.preventDefault(),i?.(),u(!e)},style:j,children:m?r.jsxRuntimeExports.jsx(p,{children:$===!0?`${t.appLocale.getLocalizedStrings().common.datePicker.businessDay} ${g?.businessDay??""}: ${d.zeniDate(m).format(h)}`:d.zeniDate(m).format(h)}):y??r.jsxRuntimeExports.jsxs(L,{children:[r.jsxRuntimeExports.jsx(z,{children:r.jsxRuntimeExports.jsx(t.SvgAddRound,{width:t.Space.sp3,height:t.Space.sp3})}),r.jsxRuntimeExports.jsx(O,{children:t.appLocale.getLocalizedStrings().cockpit.management.placeholder.reportSent})]})})},P=o.div`
+  display: flex;
+  flex-direction: column;
+`,F=o.div`
+  margin: ${t.Space.sp1} 12px ${t.Space.sp1} ${t.Space.sp1};
+  display: flex;
+  justify-content: space-between;
+`,M=o(t.SvgTick)`
+  width: 12px;
+  height: 12px;
+`,H=o(t.StandardRegular)`
+  display: flex;
+  justify-content: center;
+  color: currentColor;
+  .react-datepicker-wrapper {
+    width: unset;
+  }
+  .react-datepicker-popper {
+    z-index: 2;
+    border-radius: ${t.Space.sp1};
+    &[data-placement^="bottom"] {
+      padding-top: 6px;
+    }
+  }
+  .react-datepicker {
+    border-radius: ${t.Space.sp1};
+    box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp2} ${e.theme.colors.dropShadowHover}`};
+    border: 1px solid ${e=>e.theme.colors.grey5};
+    display: flex;
+    flex-direction: column;
+    > div {
+      display: flex;
+    }
+  }
+  .react-datepicker__input-container {
+    height: ${t.Space.sp4};
+    display: flex;
+    align-content: center;
+    align-items: center;
+    > button {
+      padding: ${t.Space.sp0};
+      color: currentColor;
+      background-color: ${e=>e.theme.colors.grey5};
+      ${t.textStyles.extraSmallRegular.css};
+      border: none;
+      outline: none;
+      ::placeholder {
+      }
+    }
+  }
+  .react-datepicker__month-container {
+    background-color: ${e=>e.theme.colors.grey5};
+    display: flex;
+    flex-direction: column;
+  }
+  .react-datepicker__header {
+    border: none;
+    background-color: ${e=>e.theme.colors.grey5};
+    padding: ${t.Space.sp1} ${t.Space.sp0} ${t.Space.sp0} ${t.Space.sp0};
+  }
+  .react-datepicker__day-names {
+    margin: ${t.Space.sp0};
+    display: flex;
+    justify-content: center;
+  }
+  .react-datepicker__day-name {
+    color: ${e=>e.theme.colors.hero};
+    ${t.textStyles.smallRegular.css};
+    width: ${t.Space.sp5};
+    padding: 5px 0;
+    margin: 0 1px;
+  }
+  .react-datepicker__month {
+    color: ${e=>e.theme.colors.hero};
+    padding: ${t.Space.sp1} ${t.Space.sp2} ${t.Space.sp2} ${t.Space.sp2};
+    margin: ${t.Space.sp0};
+  }
+  .react-datepicker__week {
+    display: flex;
+  }
+  .react-datepicker__day {
+    ${t.textStyles.smallRegular.css};
+    color: ${e=>e.theme.colors.hero};
+    width: ${t.Space.sp5};
+    padding: 5px 0;
+    margin: 0 1px;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    background-color: unset;
+
+    &:hover {
+      background-color: ${e=>e.theme.colors.primary};
+      color: ${e=>e.theme.colors.grey5};
+    }
+  }
+  .react-datepicker__day--selected {
+    background-color: ${e=>e.theme.colors.primary};
+    color: ${e=>e.theme.colors.grey5};
+    display: flex;
+    justify-content: center;
+  }
+  .react-datepicker__day--disabled {
+    cursor: auto;
+    color: ${e=>e.theme.colors.grey3};
+    &:hover {
+      color: ${e=>e.theme.colors.grey3};
+      background-color: transparent;
+    }
+  }
+  .react-datepicker__day--outside-month {
+    visibility: hidden;
+  }
+`,E=o.button`
+  border: none;
+  background-color: ${e=>e.theme.colors.grey5};
+  color: ${e=>e.theme.colors.champion};
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  cursor: pointer;
+  :not(:disabled) {
+    :hover {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+  &:disabled {
+    cursor: auto;
+    color: ${e=>e.theme.colors.grey3};
+  }
+`,q=o(t.StandardRegular)`
+  color: ${e=>e.theme.colors.primary};
+`,B=o.div`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: ${t.Space.sp1};
+  border-bottom: 1px solid ${e=>e.theme.colors.grey3};
+  margin-bottom: 12px;
+`,I=o.div`
+  display: flex;
+  justify-content: space-between;
+  padding: ${t.Space.sp2};
+  align-items: center;
+  cursor: pointer;
+  background: ${e=>e.isSelected?e.theme.colors.background:"unset"};
+  &:hover {
+    background: ${e=>e.theme.colors.background};
+  }
+`,W=o(t.SmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+`,T=t.appLocale.getLocalizedStrings().dateFormat.visual.DMMMFormat,V=({selectedDate:e,showBusinessDay:$=!1,maxDate:g,minDate:y,dateFormat:j=T,style:f,inputStyles:h,placeHolder:m,precomputedOptionsProperties:s,onSelectedDateChanged:u})=>{const[i,p]=C.useState(!1),x=t.appLocale.getLocalizedStrings().dateFormat.visual.MMMformat;return r.jsxRuntimeExports.jsx(r.ClickAwayListener,{onClickAway:()=>{p(!1)},children:r.jsxRuntimeExports.jsx(H,{children:r.jsxRuntimeExports.jsx(r.er,{open:i,selected:e?.date?.toDate(),maxDate:g?.toDate(),minDate:y?.toDate(),onSelect:(n,c)=>{c?.stopPropagation(),p(!1)},onChange:n=>{if(n!=null){const c=d.zeniDate(n.toISOString());u(c,d.getBusinessDayOfDate(c))}},customInput:r.jsxRuntimeExports.jsx(A,{datePickerOpen:i,showBusinessDay:$,onDatePickerToggle:p,placeHolder:m,selectedDate:e,dateFormat:j,style:f,precomputedOptionsProperties:s,inputStyles:h}),renderCustomHeader:({date:n,decreaseMonth:c,increaseMonth:S,prevMonthButtonDisabled:R,nextMonthButtonDisabled:l})=>r.jsxRuntimeExports.jsxs(P,{children:[s!=null?r.jsxRuntimeExports.jsx(B,{children:s.preComputedOptions.map(a=>{const b=s.preComputedOptionSelected===a.value,w=D.getPreComputedOptionValue(a.value);return r.jsxRuntimeExports.jsxs(I,{onClick:()=>{p(!1),s.onPreComputedOptionSelected(w,a.value)},isSelected:b,children:[r.jsxRuntimeExports.jsx(W,{children:a.label}),r.jsxRuntimeExports.jsx(t.ControlledComponent,{controller:b===!0,children:r.jsxRuntimeExports.jsx(M,{})})]},a.value)})}):null,r.jsxRuntimeExports.jsxs(F,{children:[r.jsxRuntimeExports.jsx(E,{onClick:a=>{a.preventDefault(),c()},disabled:R,children:r.jsxRuntimeExports.jsx(Y,{})}),r.jsxRuntimeExports.jsx(q,{children:`${d.zeniDate(n.toISOString()).format(x)} ${d.zeniDate(n.toISOString()).year()}`}),r.jsxRuntimeExports.jsx(E,{onClick:a=>{a.preventDefault(),S()},disabled:l,children:r.jsxRuntimeExports.jsx(Z,{})})]})]}),showPopperArrow:!1})})})},Y=o(t.SvgArrowLeft)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+`,Z=o(t.SvgArrowRight)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+`;exports.ZeniDatePicker=V;

package/dist/ZeniDatePicker-DGKiKgNQ.js

@@ -0,0 +1,386 @@
+import { j as o, C as A, a8 as F } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as z } from "react";
+import t from "@emotion/styled";
+import { zeniDate as g, getBusinessDayOfDate as M } from "@zeniai/client-epic-state";
+import { E as _, a as i, n as P, y as H, S as r, ax as B, fY as I, o as C, aL as W, t as v, F as T, p as E, G as Y, O as V } from "./index-CR2Dmphx.js";
+import { a as Z } from "./zeniDatePicker.helpers-DbjZkBYb.js";
+const G = t(I)`
+  border: none;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: 105px;
+  text-align: start;
+  padding: 0;
+  cursor: pointer;
+`, N = t.div`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.theme.colors.grey1};
+  fill: ${(e) => e.theme.colors.grey1};
+`, q = t.div`
+  display: flex;
+  align-items: center;
+  margin-right: ${r.sp2};
+`, J = t(C)`
+  display: flex;
+  align-items: center;
+`, D = t.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${r.sp1};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, L = t(B)`
+  width: 12px;
+  height: 12px;
+`, K = ({
+  datePickerOpen: e,
+  showBusinessDay: f,
+  selectedDate: x,
+  placeHolder: S,
+  style: b,
+  inputStyles: { titleTextComponent: k } = {},
+  dateFormat: $,
+  value: m,
+  precomputedOptionsProperties: s,
+  onDatePickerToggle: u,
+  onClick: d
+}) => {
+  if (s != null) {
+    const {
+      preComputedOptionSelected: h,
+      preComputedOptions: n,
+      preComputedOptionDateFormat: l
+    } = s, y = n.find(
+      (c) => c.value === h
+    );
+    if (y != null)
+      return /* @__PURE__ */ o.jsxs(
+        D,
+        {
+          onClick: (c) => {
+            c.preventDefault(), d?.(), u(!e);
+          },
+          children: [
+            /* @__PURE__ */ o.jsx(_, { children: `${i.getLocalizedStrings().common.asOf} ${y.label}` }),
+            /* @__PURE__ */ o.jsx(L, {})
+          ]
+        }
+      );
+    const {
+      visual: { DMMMYYFormat: j }
+    } = i.getLocalizedStrings().dateFormat;
+    return /* @__PURE__ */ o.jsxs(
+      D,
+      {
+        onClick: (c) => {
+          c.preventDefault(), d?.(), u(!e);
+        },
+        children: [
+          /* @__PURE__ */ o.jsx(_, { children: `${i.getLocalizedStrings().common.asOf} ${x?.date.format(
+            l ?? j
+          )}` }),
+          /* @__PURE__ */ o.jsx(L, {})
+        ]
+      }
+    );
+  }
+  const p = k ?? P;
+  return /* @__PURE__ */ o.jsx(
+    G,
+    {
+      onClick: (h) => {
+        h.preventDefault(), d?.(), u(!e);
+      },
+      style: b,
+      children: m ? /* @__PURE__ */ o.jsx(p, { children: f === !0 ? `${i.getLocalizedStrings().common.datePicker.businessDay} ${x?.businessDay ?? ""}: ${g(
+        m
+      ).format($)}` : g(m).format($) }) : S ?? /* @__PURE__ */ o.jsxs(N, { children: [
+        /* @__PURE__ */ o.jsx(q, { children: /* @__PURE__ */ o.jsx(H, { width: r.sp3, height: r.sp3 }) }),
+        /* @__PURE__ */ o.jsx(J, { children: i.getLocalizedStrings().cockpit.management.placeholder.reportSent })
+      ] })
+    }
+  );
+}, Q = t.div`
+  display: flex;
+  flex-direction: column;
+`, U = t.div`
+  margin: ${r.sp1} 12px ${r.sp1} ${r.sp1};
+  display: flex;
+  justify-content: space-between;
+`, X = t(E)`
+  width: 12px;
+  height: 12px;
+`, ee = t(C)`
+  display: flex;
+  justify-content: center;
+  color: currentColor;
+  .react-datepicker-wrapper {
+    width: unset;
+  }
+  .react-datepicker-popper {
+    z-index: 2;
+    border-radius: ${r.sp1};
+    &[data-placement^="bottom"] {
+      padding-top: 6px;
+    }
+  }
+  .react-datepicker {
+    border-radius: ${r.sp1};
+    box-shadow: ${(e) => `${r.sp0} 2px ${r.sp2} ${e.theme.colors.dropShadowHover}`};
+    border: 1px solid ${(e) => e.theme.colors.grey5};
+    display: flex;
+    flex-direction: column;
+    > div {
+      display: flex;
+    }
+  }
+  .react-datepicker__input-container {
+    height: ${r.sp4};
+    display: flex;
+    align-content: center;
+    align-items: center;
+    > button {
+      padding: ${r.sp0};
+      color: currentColor;
+      background-color: ${(e) => e.theme.colors.grey5};
+      ${v.extraSmallRegular.css};
+      border: none;
+      outline: none;
+      ::placeholder {
+      }
+    }
+  }
+  .react-datepicker__month-container {
+    background-color: ${(e) => e.theme.colors.grey5};
+    display: flex;
+    flex-direction: column;
+  }
+  .react-datepicker__header {
+    border: none;
+    background-color: ${(e) => e.theme.colors.grey5};
+    padding: ${r.sp1} ${r.sp0} ${r.sp0} ${r.sp0};
+  }
+  .react-datepicker__day-names {
+    margin: ${r.sp0};
+    display: flex;
+    justify-content: center;
+  }
+  .react-datepicker__day-name {
+    color: ${(e) => e.theme.colors.hero};
+    ${v.smallRegular.css};
+    width: ${r.sp5};
+    padding: 5px 0;
+    margin: 0 1px;
+  }
+  .react-datepicker__month {
+    color: ${(e) => e.theme.colors.hero};
+    padding: ${r.sp1} ${r.sp2} ${r.sp2} ${r.sp2};
+    margin: ${r.sp0};
+  }
+  .react-datepicker__week {
+    display: flex;
+  }
+  .react-datepicker__day {
+    ${v.smallRegular.css};
+    color: ${(e) => e.theme.colors.hero};
+    width: ${r.sp5};
+    padding: 5px 0;
+    margin: 0 1px;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    background-color: unset;
+
+    &:hover {
+      background-color: ${(e) => e.theme.colors.primary};
+      color: ${(e) => e.theme.colors.grey5};
+    }
+  }
+  .react-datepicker__day--selected {
+    background-color: ${(e) => e.theme.colors.primary};
+    color: ${(e) => e.theme.colors.grey5};
+    display: flex;
+    justify-content: center;
+  }
+  .react-datepicker__day--disabled {
+    cursor: auto;
+    color: ${(e) => e.theme.colors.grey3};
+    &:hover {
+      color: ${(e) => e.theme.colors.grey3};
+      background-color: transparent;
+    }
+  }
+  .react-datepicker__day--outside-month {
+    visibility: hidden;
+  }
+`, O = t.button`
+  border: none;
+  background-color: ${(e) => e.theme.colors.grey5};
+  color: ${(e) => e.theme.colors.champion};
+  height: ${r.sp4};
+  width: ${r.sp4};
+  cursor: pointer;
+  :not(:disabled) {
+    :hover {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+  &:disabled {
+    cursor: auto;
+    color: ${(e) => e.theme.colors.grey3};
+  }
+`, re = t(C)`
+  color: ${(e) => e.theme.colors.primary};
+`, oe = t.div`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: ${r.sp1};
+  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
+  margin-bottom: 12px;
+`, te = t.div`
+  display: flex;
+  justify-content: space-between;
+  padding: ${r.sp2};
+  align-items: center;
+  cursor: pointer;
+  background: ${(e) => e.isSelected ? e.theme.colors.background : "unset"};
+  &:hover {
+    background: ${(e) => e.theme.colors.background};
+  }
+`, ae = t(T)`
+  color: ${(e) => e.theme.colors.hero};
+`, se = i.getLocalizedStrings().dateFormat.visual.DMMMFormat, he = ({
+  selectedDate: e,
+  showBusinessDay: f = !1,
+  maxDate: x,
+  minDate: S,
+  dateFormat: b = se,
+  style: k,
+  inputStyles: $,
+  placeHolder: m,
+  precomputedOptionsProperties: s,
+  onSelectedDateChanged: u
+}) => {
+  const [d, p] = z(!1), h = i.getLocalizedStrings().dateFormat.visual.MMMformat;
+  return /* @__PURE__ */ o.jsx(
+    A,
+    {
+      onClickAway: () => {
+        p(!1);
+      },
+      children: /* @__PURE__ */ o.jsx(ee, { children: /* @__PURE__ */ o.jsx(
+        F,
+        {
+          open: d,
+          selected: e?.date?.toDate(),
+          maxDate: x?.toDate(),
+          minDate: S?.toDate(),
+          onSelect: (n, l) => {
+            l?.stopPropagation(), p(!1);
+          },
+          onChange: (n) => {
+            if (n != null) {
+              const l = g(n.toISOString());
+              u(
+                l,
+                M(l)
+              );
+            }
+          },
+          customInput: /* @__PURE__ */ o.jsx(
+            K,
+            {
+              datePickerOpen: d,
+              showBusinessDay: f,
+              onDatePickerToggle: p,
+              placeHolder: m,
+              selectedDate: e,
+              dateFormat: b,
+              style: k,
+              precomputedOptionsProperties: s,
+              inputStyles: $
+            }
+          ),
+          renderCustomHeader: ({
+            date: n,
+            decreaseMonth: l,
+            increaseMonth: y,
+            prevMonthButtonDisabled: j,
+            nextMonthButtonDisabled: c
+          }) => /* @__PURE__ */ o.jsxs(Q, { children: [
+            s != null ? /* @__PURE__ */ o.jsx(oe, { children: s.preComputedOptions.map(
+              (a) => {
+                const w = s.preComputedOptionSelected === a.value, R = Z(
+                  a.value
+                );
+                return /* @__PURE__ */ o.jsxs(
+                  te,
+                  {
+                    onClick: () => {
+                      p(!1), s.onPreComputedOptionSelected(
+                        R,
+                        a.value
+                      );
+                    },
+                    isSelected: w,
+                    children: [
+                      /* @__PURE__ */ o.jsx(ae, { children: a.label }),
+                      /* @__PURE__ */ o.jsx(
+                        W,
+                        {
+                          controller: w === !0,
+                          children: /* @__PURE__ */ o.jsx(X, {})
+                        }
+                      )
+                    ]
+                  },
+                  a.value
+                );
+              }
+            ) }) : null,
+            /* @__PURE__ */ o.jsxs(U, { children: [
+              /* @__PURE__ */ o.jsx(
+                O,
+                {
+                  onClick: (a) => {
+                    a.preventDefault(), l();
+                  },
+                  disabled: j,
+                  children: /* @__PURE__ */ o.jsx(ne, {})
+                }
+              ),
+              /* @__PURE__ */ o.jsx(re, { children: `${g(n.toISOString()).format(
+                h
+              )} ${g(
+                n.toISOString()
+              ).year()}` }),
+              /* @__PURE__ */ o.jsx(
+                O,
+                {
+                  onClick: (a) => {
+                    a.preventDefault(), y();
+                  },
+                  disabled: c,
+                  children: /* @__PURE__ */ o.jsx(le, {})
+                }
+              )
+            ] })
+          ] }),
+          showPopperArrow: !1
+        }
+      ) })
+    }
+  );
+}, ne = t(Y)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+`, le = t(V)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+`;
+export {
+  he as Z
+};