@zeniai/web-components 3.16.55 → 3.16.57

package/dist/ZeniDatePicker-BRRSp4J4.cjs

@@ -1,187 +0,0 @@
-"use strict";const r=require("./vendor-.pnpm-BW93Fnli.cjs"),C=require("react"),o=require("@emotion/styled"),d=require("@zeniai/client-epic-state"),t=require("./index-DWk0ezoc.cjs"),D=require("./zeniDatePicker.helpers-DioyhBzO.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-Cp_bMmlv.js

@@ -1,386 +0,0 @@
-import { j as o, C as R, aA as F } from "./vendor-.pnpm-Q8NJHkXi.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, o as P, w as H, S as r, aw as B, fV as I, p as w, aL as W, t as v, G as T, n as E, F as V, J as Y } from "./index-Dc_o2gSy.js";
-import { a as Z } from "./zeniDatePicker.helpers-BwGyBr8U.js";
-const G = t(I)`
-  border: none;
-  background-color: ${(e) => e.theme.colors.grey5};
-  width: 105px;
-  text-align: start;
-  padding: 0;
-  cursor: pointer;
-`, J = t.div`
-  display: flex;
-  align-items: center;
-  color: ${(e) => e.theme.colors.grey1};
-  fill: ${(e) => e.theme.colors.grey1};
-`, N = t.div`
-  display: flex;
-  align-items: center;
-  margin-right: ${r.sp2};
-`, q = t(w)`
-  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(J, { children: [
-        /* @__PURE__ */ o.jsx(N, { children: /* @__PURE__ */ o.jsx(H, { width: r.sp3, height: r.sp3 }) }),
-        /* @__PURE__ */ o.jsx(q, { 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(w)`
-  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;
-  }
-`, A = 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(w)`
-  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(
-    R,
-    {
-      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 C = s.preComputedOptionSelected === a.value, O = Z(
-                  a.value
-                );
-                return /* @__PURE__ */ o.jsxs(
-                  te,
-                  {
-                    onClick: () => {
-                      p(!1), s.onPreComputedOptionSelected(
-                        O,
-                        a.value
-                      );
-                    },
-                    isSelected: C,
-                    children: [
-                      /* @__PURE__ */ o.jsx(ae, { children: a.label }),
-                      /* @__PURE__ */ o.jsx(
-                        W,
-                        {
-                          controller: C === !0,
-                          children: /* @__PURE__ */ o.jsx(X, {})
-                        }
-                      )
-                    ]
-                  },
-                  a.value
-                );
-              }
-            ) }) : null,
-            /* @__PURE__ */ o.jsxs(U, { children: [
-              /* @__PURE__ */ o.jsx(
-                A,
-                {
-                  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(
-                A,
-                {
-                  onClick: (a) => {
-                    a.preventDefault(), y();
-                  },
-                  disabled: c,
-                  children: /* @__PURE__ */ o.jsx(le, {})
-                }
-              )
-            ] })
-          ] }),
-          showPopperArrow: !1
-        }
-      ) })
-    }
-  );
-}, ne = t(V)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-`, le = t(Y)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-`;
-export {
-  he as Z
-};