linear-react-components-ui 1.1.26-beta-1 → 1.1.26-beta.10

package/lib/inputs/period/index.js

@@ -1,351 +1,213 @@
-import { j as r } from "../../chunks/jsx-runtime.CYK1ROHF.js";
-import { useId as ve, useState as Y, useRef as h, useEffect as V, useCallback as Ce } from "react";
-import s from "moment";
-import qe from "./PeriodList.js";
-import De from "../mask/BaseMask.js";
-import _ from "./Dropdown.js";
-import Ne from "../../calendar/base/index.js";
-import Ye from "../../buttons/Button.js";
-import G from "../../icons/index.js";
+import { j as i } from "../../chunks/jsx-runtime.D1SHvdVE.js";
+import { useId as fe, useState as D, useRef as g, useEffect as k, useCallback as de } from "react";
+import { h as r } from "../../chunks/moment.DMLRxgRE.js";
+import ke from "./PeriodList.js";
+import me from "../mask/BaseMask.js";
+import U from "./Dropdown.js";
+import Oe from "../../calendar/base/index.js";
+import "../../chunks/compiler-runtime.Cu50tn6L.js";
+import ge from "../../buttons/Button.js";
+import W from "../../icons/index.js";
 import '../../assets/gridlayout.css';import '../../assets/button.css';import '../../assets/index24.css';/* empty css                           */
-import H from "./Dialog.js";
-import ze from "../../hint/index.js";
+import $ from "./Dialog.js";
+import Le from "../../hint/index.js";
 /* empty css                               */
-import Ke from "../../gridlayout/GridCol.js";
-import { getInputWrapperClass as Ue } from "../base/helpers.js";
-import { ErrorMessage as We } from "../errorMessage/index.js";
-import pe from "../../textContent/index.js";
-import $e from "../../popover/index.js";
-const mn = (t) => {
+import Ve from "../../gridlayout/GridCol.js";
+import { getInputWrapperClass as Te } from "../base/helpers.js";
+import { ErrorMessage as Ae } from "../errorMessage/index.js";
+import he from "../../textContent/index.js";
+import qe from "../../popover/index.js";
+const on = (n) => {
   const {
-    showButtonOpen: P = !0,
-    openOnFocus: xe = !0,
-    shouldCloseOnSelect: J = !0,
-    calendarColorStyle: R,
+    showButtonOpen: j = !0,
+    openOnFocus: ve = !0,
+    shouldCloseOnSelect: G = !0,
+    calendarColorStyle: S,
     showCalendarInDialog: b = !1,
-    dialogSize: T = { width: "350px", height: "350px" },
-    hint: E,
-    hintPosition: Q = "below",
-    themePopover: be = "light",
-    popoverAlign: Ie = "left",
-    gridLayout: X
-  } = t, Fe = ve(), we = ve(), [a, I] = Y(t.value && s(t.value.initial, "DD/MM/YYYY")), [o, F] = Y(t.value && s(t.value.final, "DD/MM/YYYY")), [Z, ee] = Y("week"), [v, C] = Y(!1), [p, c] = Y(!1), [y, x] = Y(!1), [A, q] = Y(), [D, ne] = Y(), [te, ie] = Y("valueInitial"), M = h(null), g = h(null), m = h(null), ye = h(null), N = h(null), Me = h(null), w = h(null);
-  h(null);
-  const u = h(null), f = h(null), z = () => {
-    var e;
-    q((e = g == null ? void 0 : g.current) == null ? void 0 : e.getBoundingClientRect());
-  }, je = (e) => {
-    var i;
-    const n = !((i = M.current) != null && i.contains(e.relatedTarget));
-    !b && v && n && C(!1), !b && p && n && c(!1);
-  }, le = (e) => {
-    var l, d, j, S, B, de, me;
-    const { target: n } = e, i = n;
-    if (f.current && e && e.key && e.key === "Escape" && (e.preventDefault(), i.focus(), v && (i.id !== "valueInitial" && ((l = m.current) == null || l.focus()), C(!1)), p && (i.id !== "valueFinal" && ((d = u.current) == null || d.focus()), c(!1)), y && (x(!1), (j = u.current) == null || j.focus(), c(!1))), f.current && e && e.key && e.key === "Tab") {
-      const Ve = (S = f.current) == null ? void 0 : S.getElementsByClassName("navbutton"), Te = ((B = f.current) == null ? void 0 : B.getElementsByClassName("-selectedday"))[0].firstChild, $ = Array.from([...Ve, Te]), ge = $[0], Ae = $[$.length - 1], he = f.current.id === "valueInitial";
-      !e.shiftKey && v && document.activeElement === m.current && (e.preventDefault(), ge.focus()), e.shiftKey && he && document.activeElement === ge && (e.preventDefault(), (de = m.current) == null || de.focus()), !e.shiftKey && he && document.activeElement === Ae && (e.preventDefault(), (me = u.current) == null || me.focus());
+    dialogSize: O = {
+      width: "350px",
+      height: "350px"
+    },
+    hint: B,
+    hintPosition: H = "below",
+    themePopover: Ce = "light",
+    popoverAlign: De = "left",
+    gridLayout: J
+  } = n, Ye = fe(), pe = fe(), [l, I] = D(n.value && r(n.value.initial, "DD/MM/YYYY")), [a, F] = D(n.value && r(n.value.final, "DD/MM/YYYY")), [Q, X] = D("week"), [h, v] = D(!1), [Y, u] = D(!1), [y, p] = D(!1), [L, V] = D(), [C, Z] = D(), [_, ee] = D("valueInitial"), M = g(null), x = g(null), d = g(null), xe = g(null), T = g(null), be = g(null), w = g(null);
+  g(null);
+  const o = g(null), f = g(null), A = () => {
+    V(x?.current?.getBoundingClientRect());
+  }, Ie = (e) => {
+    const t = !M.current?.contains(e.relatedTarget);
+    !b && h && t && v(!1), !b && Y && t && u(!1);
+  }, ne = (e) => {
+    const {
+      target: t
+    } = e, c = t;
+    if (f.current && e && e.key && e.key === "Escape" && (e.preventDefault(), c.focus(), h && (c.id !== "valueInitial" && d.current?.focus(), v(!1)), Y && (c.id !== "valueFinal" && o.current?.focus(), u(!1)), y && (p(!1), o.current?.focus(), u(!1))), f.current && e && e.key && e.key === "Tab") {
+      const s = f.current?.getElementsByClassName("navbutton"), Re = (f.current?.getElementsByClassName("-selectedday"))[0].firstChild, K = Array.from([...s, Re]), ue = K[0], Ee = K[K.length - 1], ce = f.current.id === "valueInitial";
+      !e.shiftKey && h && document.activeElement === d.current && (e.preventDefault(), ue.focus()), e.shiftKey && ce && document.activeElement === ue && (e.preventDefault(), d.current?.focus()), !e.shiftKey && ce && document.activeElement === Ee && (e.preventDefault(), o.current?.focus());
     }
     e.stopPropagation();
-  }, k = () => {
-    var i;
-    const e = (i = g.current) == null ? void 0 : i.getBoundingClientRect(), n = e && e.bottom;
-    w && w.current && e && (w.current.style.top = String(n).concat("px"));
+  }, P = () => {
+    const e = x.current?.getBoundingClientRect(), t = e && e.bottom;
+    w && w.current && e && (w.current.style.top = String(t).concat("px"));
   };
-  V(() => {
-    var e;
-    return window.addEventListener("resize", z), document.addEventListener("scroll", k), (e = document.getElementById("modal-dialog-content")) == null || e.addEventListener("scroll", k), g.current && z(), m && m.current && (m.current.id = Fe), u && u.current && (u.current.id = we), () => {
-      var n;
-      window.removeEventListener("resize", z), document.removeEventListener("scroll", k), (n = document.getElementById("modal-dialog-content")) == null || n.removeEventListener("scroll", k);
-    };
-  }, []), V(() => (document.addEventListener("keydown", le), () => {
-    document.removeEventListener("keydown", le);
-  }), [
-    p,
-    v,
-    y,
-    f.current
-  ]), V(() => {
-    if (o && a && s(o).isBefore(s(a)))
-      I(o), F(a);
-    else if (t.onChange) {
-      const e = a ? a.format("YYYY-MM-DD") : "", n = o ? o.format("YYYY-MM-DD") : "";
-      t.onChange(void 0, "", { initial: e, final: n });
+  k(() => (window.addEventListener("resize", A), document.addEventListener("scroll", P), document.getElementById("modal-dialog-content")?.addEventListener("scroll", P), x.current && A(), d && d.current && (d.current.id = Ye), o && o.current && (o.current.id = pe), () => {
+    window.removeEventListener("resize", A), document.removeEventListener("scroll", P), document.getElementById("modal-dialog-content")?.removeEventListener("scroll", P);
+  }), []), k(() => (document.addEventListener("keydown", ne), () => {
+    document.removeEventListener("keydown", ne);
+  }), [Y, h, y, f.current]), k(() => {
+    if (a && l && r(a).isBefore(r(l)))
+      I(a), F(l);
+    else if (n.onChange) {
+      const e = l ? l.format("YYYY-MM-DD") : "", t = a ? a.format("YYYY-MM-DD") : "";
+      n.onChange(void 0, "", {
+        initial: e,
+        final: t
+      });
     }
-  }, [a, o]), V(() => {
-    if (t.value && !(s(t.value.initial).isSame(a) || s(t.value.final).isSame(o))) {
-      const { initial: e, final: n } = t.value;
-      let i, l;
-      s(e, "YYYY-MM-DD", !0).isValid() && (i = s(e, "YYYY-MM-DD")), s(n, "YYYY-MM-DD", !0).isValid() && (l = s(n, "YYYY-MM-DD")), I(i), F(l);
+  }, [l, a]), k(() => {
+    if (n.value && !(r(n.value.initial).isSame(l) || r(n.value.final).isSame(a))) {
+      const {
+        initial: e,
+        final: t
+      } = n.value;
+      let c, s;
+      r(e, "YYYY-MM-DD", !0).isValid() && (c = r(e, "YYYY-MM-DD")), r(t, "YYYY-MM-DD", !0).isValid() && (s = r(t, "YYYY-MM-DD")), I(c), F(s);
     }
-  }, [t.value]);
-  const re = (e) => {
-    var n, i;
-    e === "valueInitial" && (ie("valueInitial"), c(!1), v || ((n = m.current) == null || n.focus(), b && setTimeout(() => {
-      var l;
-      (l = N.current) == null || l.focus();
-    }, 100), C(!0))), e === "valueFinal" && (ie("valueFinal"), C(!1), p || ((i = u.current) == null || i.focus(), b && setTimeout(() => {
-      var l;
-      (l = N.current) == null || l.focus();
-    }, 100), c(!0))), g.current && q(g.current.getBoundingClientRect());
-  }, Se = (e) => {
-    var n, i;
-    e === "valueInitial" && ((n = m.current) == null || n.focus()), e === "valueFinal" && ((i = u.current) == null || i.focus()), C(!1), c(!1);
-  }, K = (e) => {
+  }, [n.value]);
+  const te = (e) => {
+    e === "valueInitial" && (ee("valueInitial"), u(!1), h || (d.current?.focus(), b && setTimeout(() => {
+      T.current?.focus();
+    }, 100), v(!0))), e === "valueFinal" && (ee("valueFinal"), v(!1), Y || (o.current?.focus(), b && setTimeout(() => {
+      T.current?.focus();
+    }, 100), u(!0))), x.current && V(x.current.getBoundingClientRect());
+  }, Fe = (e) => {
+    e === "valueInitial" && d.current?.focus(), e === "valueFinal" && o.current?.focus(), v(!1), u(!1);
+  }, q = (e) => {
     setTimeout(() => {
-      var n, i, l;
-      e === "valueInitial" && ((n = m.current) == null || n.focus(), C(!1)), e === "valueFinal" && ((i = u.current) == null || i.focus(), c(!1)), e === "periodSelection" && (x(!1), (l = u.current) == null || l.focus(), c(!1));
+      e === "valueInitial" && (d.current?.focus(), v(!1)), e === "valueFinal" && (o.current?.focus(), u(!1)), e === "periodSelection" && (p(!1), o.current?.focus(), u(!1));
     }, 100);
-  }, ae = (e) => {
-    const { name: n } = e.target;
-    xe && re(n), t.onFocus && t.onFocus(e);
-  }, oe = (e) => {
-    t.onBlur && t.onBlur(e);
-  }, se = (e, n) => {
+  }, ie = (e) => {
+    const {
+      name: t
+    } = e.target;
+    ve && te(t), n.onFocus && n.onFocus(e);
+  }, le = (e) => {
+    n.onBlur && n.onBlur(e);
+  }, ae = (e, t) => {
     if (e) {
-      const { name: i } = e.target;
-      n && n.replace(/\D/g, "").trim().length !== 0 && (i === "valueInitial" ? I(void 0) : F(void 0));
+      const {
+        name: c
+      } = e.target;
+      t && t.replace(/\D/g, "").trim().length !== 0 && (c === "valueInitial" ? I(void 0) : F(void 0));
     }
-  }, O = (e) => {
-    if (t.onChange) {
-      const n = e.initial ? e.initial.format("YYYY-MM-DD") : "", i = e.final ? e.final.format("YYYY-MM-DD") : "";
-      t.onChange(void 0, "", { initial: n, final: i });
+  }, R = (e) => {
+    if (n.onChange) {
+      const t = e.initial ? e.initial.format("YYYY-MM-DD") : "", c = e.final ? e.final.format("YYYY-MM-DD") : "";
+      n.onChange(void 0, "", {
+        initial: t,
+        final: c
+      });
     }
-  }, U = (e, n, i = !0) => {
-    var j, S, B;
-    const l = e ? e.target.name : "", d = s(n, "DD/MM/YYYY");
-    v && ((j = m.current) == null || j.focus()), p && ((S = u.current) == null || S.focus()), l === "valueFinal" && a && d.isBefore(a) ? (I(d), F(a), O({ initial: d, final: a })) : l === "valueInitial" && o && d.isAfter(o) ? (I(o), F(d), O({ initial: o, final: d })) : l === "valueInitial" ? (I(d), O({ initial: d, final: o })) : (F(d), O({ initial: a, final: d })), l === "valueInitial" && !o && i && ((B = u.current) == null || B.focus(), setTimeout(() => c(!0), 100)), J && (C(!1), c(!1));
-  }, W = () => {
-    const { disabled: e } = t;
-    return e || D && (D.disabled || D.hideContent);
-  }, Be = Ce(() => P ? /* @__PURE__ */ r.jsx(
-    Ye,
-    {
-      boxShadow: !1,
-      disabled: W(),
-      customClass: "calendar-button",
-      icon: /* @__PURE__ */ r.jsx(G, { name: "calendar" }),
-      onClick: () => {
-        p || v ? Se(te) : re(te);
-      },
-      tabIndex: -1,
-      targetRef: (e) => {
-        ye.current = e;
-      }
-    },
-    "button-open"
-  ) : null, [p, v]), ue = (e, n) => /* @__PURE__ */ r.jsx(qe, { selected: e, handleOnSelect: n }), Pe = () => {
-    c(!1), C(!1), x(!0), g.current && q(g.current.getBoundingClientRect());
-  }, Re = () => {
-    var e;
-    x(!1), (e = u.current) == null || e.focus(), c(!1);
-  }, Ee = Ce(() => /* @__PURE__ */ r.jsx(
-    Ye,
-    {
-      disabled: W(),
-      tabIndex: -1,
-      customClass: "calendar-button",
-      icon: /* @__PURE__ */ r.jsx(G, { name: "more1" }),
-      onBlur: () => setTimeout(() => x(!1), 100),
-      onClick: () => y ? Re() : Pe(),
-      targetRef: (e) => {
-        Me.current = e;
-      }
-    },
-    "button-select-period"
-  ), [y]), L = (e, n, i) => /* @__PURE__ */ r.jsx(
-    Ne,
-    {
-      colorStyle: n,
-      currentDate: e !== void 0 ? s(e) : s(),
-      calendarContainer: (l) => {
-        f.current = l;
-      },
-      onDateChange: (l) => U({ target: { name: i } }, l),
-      currentDateButton: (l) => N.current = l
+  }, N = (e, t, c = !0) => {
+    const s = e ? e.target.name : "", m = r(t, "DD/MM/YYYY");
+    h && d.current?.focus(), Y && o.current?.focus(), s === "valueFinal" && l && m.isBefore(l) ? (I(m), F(l), R({
+      initial: m,
+      final: l
+    })) : s === "valueInitial" && a && m.isAfter(a) ? (I(a), F(m), R({
+      initial: a,
+      final: m
+    })) : s === "valueInitial" ? (I(m), R({
+      initial: m,
+      final: a
+    })) : (F(m), R({
+      initial: l,
+      final: m
+    })), s === "valueInitial" && !a && c && (o.current?.focus(), setTimeout(() => u(!0), 100)), G && (v(!1), u(!1));
+  }, z = () => {
+    const {
+      disabled: e
+    } = n;
+    return e || C && (C.disabled || C.hideContent);
+  }, we = de(() => j ? /* @__PURE__ */ i.jsx(ge, { boxShadow: !1, disabled: z(), customClass: "calendar-button", icon: /* @__PURE__ */ i.jsx(W, { name: "calendar" }), onClick: () => {
+    Y || h ? Fe(_) : te(_);
+  }, tabIndex: -1, targetRef: (e) => {
+    xe.current = e;
+  } }, "button-open") : null, [Y, h]), re = (e, t) => /* @__PURE__ */ i.jsx(ke, { selected: e, handleOnSelect: t }), ye = () => {
+    u(!1), v(!1), p(!0), x.current && V(x.current.getBoundingClientRect());
+  }, Me = () => {
+    p(!1), o.current?.focus(), u(!1);
+  }, je = de(() => /* @__PURE__ */ i.jsx(ge, { disabled: z(), tabIndex: -1, customClass: "calendar-button", icon: /* @__PURE__ */ i.jsx(W, { name: "more1" }), onBlur: () => setTimeout(() => p(!1), 100), onClick: () => y ? Me() : ye(), targetRef: (e) => {
+    be.current = e;
+  } }, "button-select-period"), [y]), E = (e, t, c) => /* @__PURE__ */ i.jsx(Oe, { colorStyle: t, currentDate: e !== void 0 ? r(e) : r(), calendarContainer: (s) => {
+    f.current = s;
+  }, onDateChange: (s) => N({
+    target: {
+      name: c
     }
-  ), ce = (e, n) => {
-    var i, l;
+  }, s), currentDateButton: (s) => T.current = s }), oe = (e, t) => {
     if (e === "custom") {
-      (i = m.current) == null || i.focus(), ee(e), x(!1);
+      d.current?.focus(), X(e), p(!1);
       return;
     }
-    ee(e), n && (I(n[0]), F(n[1])), J && x(!1), (l = u.current) == null || l.focus(), c(!1);
-  }, ke = () => D && D.readOnly ? null : (f && f.current && (f.current.id = "valueInitial"), b ? /* @__PURE__ */ r.jsx(
-    H,
-    {
-      handlerClose: () => K("valueInitial"),
-      dialogSize: T,
-      onOpenChange: C,
-      children: L(a, R, "valueInitial")
-    }
-  ) : /* @__PURE__ */ r.jsx(
-    _,
-    {
-      containerRef: M,
-      showButtonOpen: P,
-      inputDimensions: A,
-      dropdownRef: (e) => {
-        w.current = e;
-      },
-      children: L(a, R, "valueInitial")
-    }
-  )), Oe = () => D && D.readOnly ? null : (f && f.current && (f.current.id = "valueFinal"), b ? /* @__PURE__ */ r.jsx(
-    H,
-    {
-      handlerClose: () => K("valueFinal"),
-      dialogSize: T,
-      onOpenChange: c,
-      children: L(o, R, "valueFinal")
-    }
-  ) : /* @__PURE__ */ r.jsx(
-    _,
-    {
-      containerRef: M,
-      showButtonOpen: P,
-      inputDimensions: A,
-      dropdownRef: (e) => {
-        w.current = e;
-      },
-      children: L(o, R, "valueFinal")
-    }
-  )), Le = () => b ? /* @__PURE__ */ r.jsx(
-    H,
-    {
-      handlerClose: () => K("periodSelection"),
-      dialogSize: T,
-      onOpenChange: x,
-      children: ue(Z, ce)
-    }
-  ) : /* @__PURE__ */ r.jsx(
-    _,
-    {
-      containerRef: M,
-      showButtonOpen: P,
-      inputDimensions: A,
-      dropdownRef: (e) => {
-        w.current = e;
-      },
-      children: ue(Z, ce)
-    }
-  );
-  if (D && D.unvisible) return null;
-  const fe = () => /* @__PURE__ */ r.jsxs(
-    "div",
-    {
-      ref: M,
-      onBlur: je,
-      className: "input-base-component datepicker-period-container",
-      children: [
-        t.label && /* @__PURE__ */ r.jsxs("div", { className: "labelcontainer", children: [
-          /* @__PURE__ */ r.jsx(
-            pe,
-            {
-              required: t.required,
-              className: t.customClassForLabel,
-              labelUppercase: t.labelUppercase
-            }
-          ),
-          /* @__PURE__ */ r.jsx(
-            "div",
-            {
-              className: "text-content",
-              style: { display: "flex" },
-              children: /* @__PURE__ */ r.jsxs(
-                "div",
-                {
-                  className: `label ${t.customClassForLabel} ${t.labelUppercase && " -uppercase"}`,
-                  style: { alignSelf: "center" },
-                  children: [
-                    t.label,
-                    t.required && /* @__PURE__ */ r.jsx("span", { className: "-requiredlabel", children: "*" }),
-                    !!E && Q === "onLabelRight" && /* @__PURE__ */ r.jsx(
-                      $e,
-                      {
-                        theme: be,
-                        align: Ie,
-                        iconColor: "#03bde2",
-                        customClass: "-hint",
-                        style: { margin: "0px 5px", height: "auto", width: 20 },
-                        children: E
-                      }
-                    )
-                  ]
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ r.jsx(pe, {})
-        ] }),
-        /* @__PURE__ */ r.jsxs(
-          "div",
-          {
-            className: `periodpicker-component ${Ue({
-              ...t,
-              value: a ? s(a).format("DD/MM/YYYY") : "",
-              disabled: W()
-            })}`,
-            ref: g,
-            children: [
-              /* @__PURE__ */ r.jsx(
-                De,
-                {
-                  gridLayout: void 0,
-                  permissionAttr: t.permissionAttr,
-                  name: "valueInitial",
-                  value: a ? s(a).format("DD/MM/YYYY") : "",
-                  mask: "00/00/0000",
-                  onComplete: (e) => {
-                    U(e, e.target.value, !0);
-                  },
-                  onFocus: ae,
-                  onBlur: (e) => oe(e),
-                  onChange: se,
-                  inputRef: (e) => {
-                    m.current = e;
-                  },
-                  handlerSetOnDenied: (e) => {
-                    ne(e);
-                  },
-                  required: t.required
-                }
-              ),
-              /* @__PURE__ */ r.jsx(G, { name: "arrow_right", customClass: "separation_icon" }),
-              /* @__PURE__ */ r.jsx(
-                De,
-                {
-                  gridLayout: void 0,
-                  permissionAttr: t.permissionAttr,
-                  name: "valueFinal",
-                  value: o ? s(o).format("DD/MM/YYYY") : "",
-                  mask: "00/00/0000",
-                  onComplete: (e) => {
-                    U(e, e.target.value, !0);
-                  },
-                  onFocus: ae,
-                  onBlur: (e) => oe(e),
-                  onChange: se,
-                  inputRef: (e) => {
-                    u.current = e;
-                  },
-                  handlerSetOnDenied: (e) => ne(e),
-                  required: t.required
-                }
-              ),
-              Be(),
-              Ee()
-            ]
-          }
-        ),
-        v && ke(),
-        p && Oe(),
-        y && Le(),
-        /* @__PURE__ */ r.jsx(ze, { visible: !!E && Q === "below", customClass: "hint", description: E }),
-        /* @__PURE__ */ r.jsx(We, { messages: t.errorMessages })
-      ]
-    }
-  );
-  return X ? /* @__PURE__ */ r.jsx(Ke, { customClass: "-withinput", cols: X, children: fe() }) : fe();
+    X(e), t && (I(t[0]), F(t[1])), G && p(!1), o.current?.focus(), u(!1);
+  }, Se = () => C && C.readOnly ? null : (f && f.current && (f.current.id = "valueInitial"), b ? /* @__PURE__ */ i.jsx($, { handlerClose: () => q("valueInitial"), dialogSize: O, onOpenChange: v, children: E(l, S, "valueInitial") }) : /* @__PURE__ */ i.jsx(U, { containerRef: M, showButtonOpen: j, inputDimensions: L, dropdownRef: (e) => {
+    w.current = e;
+  }, children: E(l, S, "valueInitial") })), Be = () => C && C.readOnly ? null : (f && f.current && (f.current.id = "valueFinal"), b ? /* @__PURE__ */ i.jsx($, { handlerClose: () => q("valueFinal"), dialogSize: O, onOpenChange: u, children: E(a, S, "valueFinal") }) : /* @__PURE__ */ i.jsx(U, { containerRef: M, showButtonOpen: j, inputDimensions: L, dropdownRef: (e) => {
+    w.current = e;
+  }, children: E(a, S, "valueFinal") })), Pe = () => b ? /* @__PURE__ */ i.jsx($, { handlerClose: () => q("periodSelection"), dialogSize: O, onOpenChange: p, children: re(Q, oe) }) : /* @__PURE__ */ i.jsx(U, { containerRef: M, showButtonOpen: j, inputDimensions: L, dropdownRef: (e) => {
+    w.current = e;
+  }, children: re(Q, oe) });
+  if (C && C.unvisible) return null;
+  const se = () => /* @__PURE__ */ i.jsxs("div", { ref: M, onBlur: Ie, className: "input-base-component datepicker-period-container", children: [
+    n.label && /* @__PURE__ */ i.jsxs("div", { className: "labelcontainer", children: [
+      /* @__PURE__ */ i.jsx(he, { required: n.required, className: n.customClassForLabel, labelUppercase: n.labelUppercase }),
+      /* @__PURE__ */ i.jsx("div", { className: "text-content", style: {
+        display: "flex"
+      }, children: /* @__PURE__ */ i.jsxs("div", { className: `label ${n.customClassForLabel} ${n.labelUppercase && " -uppercase"}`, style: {
+        alignSelf: "center"
+      }, children: [
+        n.label,
+        n.required && /* @__PURE__ */ i.jsx("span", { className: "-requiredlabel", children: "*" }),
+        !!B && H === "onLabelRight" && /* @__PURE__ */ i.jsx(qe, { theme: Ce, align: De, iconColor: "#03bde2", customClass: "-hint", style: {
+          margin: "0px 5px",
+          height: "auto",
+          width: 20
+        }, children: B })
+      ] }) }),
+      /* @__PURE__ */ i.jsx(he, {})
+    ] }),
+    /* @__PURE__ */ i.jsxs("div", { className: `periodpicker-component ${Te({
+      ...n,
+      value: l ? r(l).format("DD/MM/YYYY") : "",
+      disabled: z()
+    })}`, ref: x, children: [
+      /* @__PURE__ */ i.jsx(me, { gridLayout: void 0, permissionAttr: n.permissionAttr, name: "valueInitial", value: l ? r(l).format("DD/MM/YYYY") : "", mask: "00/00/0000", onComplete: (e) => {
+        N(e, e.target.value, !0);
+      }, onFocus: ie, onBlur: (e) => le(e), onChange: ae, inputRef: (e) => {
+        d.current = e;
+      }, handlerSetOnDenied: (e) => {
+        Z(e);
+      }, required: n.required }),
+      /* @__PURE__ */ i.jsx(W, { name: "arrow_right", customClass: "separation_icon" }),
+      /* @__PURE__ */ i.jsx(me, { gridLayout: void 0, permissionAttr: n.permissionAttr, name: "valueFinal", value: a ? r(a).format("DD/MM/YYYY") : "", mask: "00/00/0000", onComplete: (e) => {
+        N(e, e.target.value, !0);
+      }, onFocus: ie, onBlur: (e) => le(e), onChange: ae, inputRef: (e) => {
+        o.current = e;
+      }, handlerSetOnDenied: (e) => Z(e), required: n.required }),
+      we(),
+      je()
+    ] }),
+    h && Se(),
+    Y && Be(),
+    y && Pe(),
+    /* @__PURE__ */ i.jsx(Le, { visible: !!B && H === "below", customClass: "hint", description: B }),
+    /* @__PURE__ */ i.jsx(Ae, { messages: n.errorMessages })
+  ] });
+  return J ? /* @__PURE__ */ i.jsx(Ve, { customClass: "-withinput", cols: J, children: se() }) : se();
 };
 export {
-  mn as default
+  on as default
 };