@zeniai/web-components 3.16.96 → 3.16.97

package/dist/LabeledUserSingleSelectWithSubtitlesField-D0-SGB2k.js

@@ -1,572 +0,0 @@
-import { d as K, m as ge, u as pe, j as t, c as T, e as xe } from "./vendor-.pnpm-B2klaOGU.js";
-import s from "@emotion/styled";
-import { u as B, ia as fe, a as M, S as r, v as _, s as G, p as H, C as U, o as Q, E as $e, R as I, ib as we, t as Z, F as ye, D as g, e as X, aw as be, aB as ve } from "./index-CQQUoxL8.js";
-import { R as je } from "./RoleWithToolTip-Ct0hfqtb.js";
-import { S as Y } from "./avatar-Dz7aEm3d.js";
-const ee = {
-  selectContainerMarginHorizontal: new I(g[2], g[3]),
-  marginTop: new I(g[1], g[0])
-}, Se = s($e)`
-  display: flex;
-  gap: ${r.sp2};
-  align-items: center;
-  color: ${(e) => e.theme.colors.grey1};
-  justify-content: ${(e) => e.menuIsOpen ? "flex-start" : "flex-end"};
-  height: 18px;
-  width: 100%;
-`, Ce = s.div`
-  display: flex;
-  align-items: center;
-`, Ie = s.div`
-  height: ${r.sp1};
-  width: ${r.sp1};
-  background-color: ${(e) => e.theme.colors.grey1};
-  border-radius: 50%;
-  opacity: 0.4;
-`, Pe = s.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: ${r.sp6};
-  gap: ${r.sp3};
-`, ze = s(Q)`
-  display: flex;
-`, Re = s.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  opacity: ${(e) => e.isCurrOptionDisabled ? 0.5 : 1};
-`, ke = s.div`
-  display: flex;
-  align-items: center;
-  margin-right: ${r.sp2};
-`, Ne = s.img`
-  height: ${r.sp5};
-  width: ${r.sp5};
-  border-radius: 50%;
-  justify-content: center;
-`, Ve = s.img`
-  height: ${r.sp4};
-  width: ${r.sp4};
-  border-radius: 50%;
-  justify-content: center;
-  color: ${(e) => e.theme.colors.hero};
-`, O = s.div`
-  display: flex;
-  flex-direction: row;
-  cursor: pointer;
-  align-items: center;
-  gap: ${r.sp2};
-  height: 100%;
-`, Ee = s(O)`
-  flex-direction: column;
-  gap: ${r.sp0};
-`, Le = s.div`
-  display: flex;
-  align-items: center;
-  height: ${r.sp6};
-  gap: ${r.sp2};
-  justify-content: ${(e) => e.menuIsOpen ? "flex-start" : "flex-end"};
-  width: 100%;
-`, De = s(Q)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`, Me = s.div`
-  display: flex;
-  align-items: center;
-  color: ${(e) => e.isError === !0 && e.menuIsOpen !== !0 ? U.important : e.theme.colors.grey1};
-  fill: ${(e) => e.theme.colors.grey1};
-`, Fe = s(ye)`
-  color: ${(e) => e.hasSelectedUser ? e.theme.colors.primary : e.theme.colors.hero};
-  margin-left: -10px;
-  margin-right: -10px;
-  display: flex;
-  padding: ${r.sp2} 12px 12px 12px;
-  fill: ${(e) => e.hasSelectedUser ? e.theme.colors.primary : e.theme.colors.hero};
-  cursor: ${(e) => e.hasSelectedUser ? "pointer" : "default"};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-    background: ${(e) => e.theme.colors.background};
-    fill: ${(e) => e.theme.colors.primary};
-  }
-  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
-  margin-bottom: -${r.sp2};
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: space-between;
-`, Ue = s(O)`
-  align-items: center;
-  gap: ${r.sp2};
-`, F = s.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`, q = s.div``, Ae = s.div`
-  width: 100%;
-  background-color: ${(e) => e.theme.colors.grey5};
-  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
-  .select-control {
-    border: none;
-    height: 100%;
-    background-color: ${(e) => e.menuIsOpen && e.isValuePlacedAtEnd === !0 ? e.theme.colors.background : e.isError === !0 ? U.importantLight : e.theme.colors.grey5};
-    box-shadow: none;
-    border-radius: ${r.sp1};
-    &:hover {
-      fill: ${(e) => e.theme.colors.primary};
-      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.isValuePlacedAtEnd !== !0 ? "inherit" : e.theme.colors.background};
-      border-color: none;
-    }
-    width: auto;
-    min-height: auto;
-    cursor: pointer;
-    padding: 0;
-  }
-  .select-value-container {
-    width: 100%;
-    display: flex;
-    margin: ${(e) => `${r.sp0} ${e.isValuePlacedAtEnd === !0 ? e.bigMarginRightForSmallScreens === !0 ? r.sp3 : ee.selectContainerMarginHorizontal.valuePx(
-  e.windowSize
-) : r.sp0}`};
-    padding: 0;
-    max-width: 100%;
-    height: 100%;
-    min-width: auto;
-    align-items: center;
-    flex-wrap: nowrap;
-    cursor: pointer;
-    justify-content: ${(e) => e.menuIsOpen === !1 && e.isValuePlacedAtEnd === !0 ? "flex-end" : "flex-start"};
-
-    .single-select-field__single-value {
-      border-radius: ${r.sp0};
-      margin: ${r.sp0};
-      color: ${(e) => e.theme.colors.primary};
-      ${Z.standardRegular.css};
-      box-sizing: border-box;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      height: 100%;
-    }
-
-    .single-select-field__input-container {
-      display: flex;
-      width: ${(e) => e.menuIsOpen === !1 ? r.sp0 : "100%"};
-      position: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "initial" : "absolute"};
-      ${Z.standardRegular.css};
-      color: ${(e) => e.theme.colors.primary};
-      margin: ${r.sp0};
-      cursor: inherit;
-
-      > input {
-        text-align: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "right" : "initial"};
-        align-items: center;
-        overflow: hidden;
-        cursor: inherit;
-        :disabled {
-          visibility: visible;
-        }
-        ::placeholder {
-          color: ${(e) => e.isError === !0 && e.menuIsOpen !== !0 ? U.important : e.theme.colors.grey1};
-        }
-      }
-    }
-  }
-`, Be = s.div`
-  width: ${(e) => e.windowSize === "small" ? "max-content" : "100%"};
-  display: flex;
-  flex-direction: column;
-`, Oe = s(Y)`
-  width: ${r.sp5};
-  height: ${r.sp5};
-  color: ${(e) => e.theme.colors.hero};
-`, J = s(we)`
-  color: ${(e) => e.theme.colors.alert};
-  text-transform: none;
-  border: 1px solid ${(e) => e.theme.colors.alert};
-  padding: 1px ${r.sp1};
-  border-radius: ${r.sp1};
-  margin-top: ${({ windowSize: e }) => ee.marginTop.valuePx(e)};
-  width: fit-content;
-`;
-function We({
-  allUsers: e,
-  selectedValue: a,
-  showOneOffLabel: i,
-  placeholder: p,
-  isOptionRemovable: v,
-  valueToSubtitle: $,
-  onSelectionChanged: w,
-  name: j,
-  userContainerStyles: x,
-  optionStyles: V,
-  isValuePlacedAtEnd: P = !0,
-  isDisabled: E,
-  showOnlyAvatar: z = !1,
-  showAvatarAndSubtitles: S = !0,
-  isOptionDisabled: R,
-  disabledOptionHint: y,
-  bigMarginRightForSmallScreens: L = !1
-}) {
-  const {
-    formState: { errors: D }
-  } = K(), k = ge(D, j ?? ""), u = B(), C = [];
-  i != null && C.push(i.value), C.push(...e.map((n) => n.userId));
-  const te = (n) => {
-    if (i != null && i.value === n)
-      return i.label;
-    const l = e.findIndex((o) => o.userId === n);
-    if (l !== -1) {
-      const o = e[l];
-      return o.user?.firstName || o.user?.lastName ? `${o.user?.firstName} ${o.user?.lastName}` : `${o.user?.email}`;
-    } else
-      return "";
-  }, re = (n) => {
-    const l = e.findIndex((o) => o.userId === n);
-    if (l !== -1)
-      return e[l].user;
-  }, ne = (n) => {
-    const { menuIsOpen: l, children: o } = n;
-    return /* @__PURE__ */ t.jsx(Me, { menuIsOpen: l, isError: k, children: /* @__PURE__ */ t.jsx(ze, { children: o }) });
-  }, se = ({
-    labelDetails: n
-  }) => /* @__PURE__ */ t.jsxs(Fe, { hasSelectedUser: a === n.value, children: [
-    /* @__PURE__ */ t.jsxs(Ue, { children: [
-      /* @__PURE__ */ t.jsx(Oe, {}),
-      /* @__PURE__ */ t.jsx(q, { children: /* @__PURE__ */ t.jsx(F, { children: n.label }) })
-    ] }),
-    a === n.value ? /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(H, { width: r.sp3, height: r.sp3 }) }) : null
-  ] }), le = (n) => {
-    const { children: l, data: o, selectProps: c } = n, { menuIsOpen: h } = c;
-    if (i != null && o?.value === i.value)
-      return /* @__PURE__ */ t.jsxs(O, { children: [
-        S || z ? /* @__PURE__ */ t.jsx(
-          Y,
-          {
-            style: {
-              height: r.sp4,
-              width: r.sp4
-            }
-          }
-        ) : null,
-        /* @__PURE__ */ t.jsx(De, { children: i.label })
-      ] });
-    const d = e.findIndex(
-      (b) => b.userId === o.value
-    ), m = e[d], f = $(o.value);
-    return /* @__PURE__ */ t.jsxs(Ee, { children: [
-      /* @__PURE__ */ t.jsxs(Le, { menuIsOpen: h, children: [
-        S || z ? /* @__PURE__ */ t.jsx(t.Fragment, { children: m?.user?.photo != null ? /* @__PURE__ */ t.jsx(
-          Ve,
-          {
-            src: m?.user?.photo.href,
-            alt: M.getLocalizedStrings().cockpit.userProfileAltText,
-            onError: ({ currentTarget: b }) => {
-              b.onerror = null, b.src = _;
-            },
-            loading: "lazy"
-          }
-        ) : /* @__PURE__ */ t.jsx(
-          G,
-          {
-            firstName: m?.user?.firstName ?? "",
-            lastName: m?.user?.lastName ?? "",
-            size: `${r.sp4}`,
-            index: d
-          }
-        ) }) : null,
-        /* @__PURE__ */ t.jsx(F, { children: l })
-      ] }),
-      S ? /* @__PURE__ */ t.jsx(
-        W,
-        {
-          subtitleList: f,
-          menuIsOpen: c.menuIsOpen,
-          member: m
-        }
-      ) : null
-    ] });
-  }, W = ({
-    subtitleList: n,
-    member: l,
-    menuIsOpen: o
-  }) => {
-    const c = n.length;
-    return /* @__PURE__ */ t.jsxs(Se, { menuIsOpen: o, children: [
-      l != null ? /* @__PURE__ */ t.jsx(je, { roles: l?.userRole.userRoles }) : null,
-      l != null && c > 0 ? /* @__PURE__ */ t.jsx(Ie, {}) : null,
-      c > 0 ? n.map((h, d) => /* @__PURE__ */ t.jsx(Ce, { children: h }, `${h}${d}`)) : null
-    ] });
-  }, oe = (n) => {
-    const { data: l, isSelected: o, selectProps: c, value: h } = n, d = !!R?.(h) && o === !1;
-    if (i != null && l?.value === i.value)
-      return /* @__PURE__ */ t.jsx(se, { labelDetails: i });
-    const m = e.findIndex((N) => N.userId === l.value), f = e[m], b = $(l.value);
-    return /* @__PURE__ */ t.jsxs(Pe, { style: V, children: [
-      /* @__PURE__ */ t.jsxs(Re, { isCurrOptionDisabled: d, children: [
-        /* @__PURE__ */ t.jsx(ke, { children: f?.user?.photo != null ? /* @__PURE__ */ t.jsx(
-          Ne,
-          {
-            src: f?.user?.photo.href,
-            alt: M.getLocalizedStrings().cockpit.userProfileAltText,
-            onError: ({ currentTarget: N }) => {
-              N.onerror = null, N.src = _;
-            },
-            loading: "lazy"
-          }
-        ) : /* @__PURE__ */ t.jsx(
-          G,
-          {
-            firstName: f?.user?.firstName ?? "",
-            lastName: f?.user?.lastName ?? "",
-            size: `${r.sp5}`,
-            index: m
-          }
-        ) }),
-        /* @__PURE__ */ t.jsxs(q, { children: [
-          /* @__PURE__ */ t.jsx(F, { children: n.label }),
-          /* @__PURE__ */ t.jsx(
-            W,
-            {
-              menuIsOpen: c.menuIsOpen,
-              subtitleList: b,
-              member: f
-            }
-          ),
-          u === "small" && d && y != null ? /* @__PURE__ */ t.jsx(J, { windowSize: u, children: y }) : null
-        ] })
-      ] }),
-      !!o && /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(H, { width: r.sp3, height: r.sp3 }) }),
-      u !== "small" && d && y != null ? /* @__PURE__ */ t.jsx(J, { windowSize: u, children: y }) : null
-    ] });
-  }, ie = (n) => {
-    w(n);
-  }, ae = () => null, ce = (n) => {
-    const { menuIsOpen: l, isFocused: o, isDisabled: c, selectProps: h } = n, { value: d } = h;
-    return /* @__PURE__ */ t.jsx(
-      Ae,
-      {
-        menuIsOpen: l,
-        isFocused: o,
-        isDisabled: c,
-        selectedValue: d,
-        isError: k,
-        isValuePlacedAtEnd: P,
-        windowSize: u,
-        bigMarginRightForSmallScreens: L,
-        children: /* @__PURE__ */ t.jsx(T.Control, { ...n, className: "select-control", children: n.children })
-      }
-    );
-  }, de = (n) => /* @__PURE__ */ t.jsx(T.ValueContainer, { ...n, className: "select-value-container", children: n.children }), ue = (n) => /* @__PURE__ */ t.jsx(Be, { windowSize: u, children: n.children }), he = (n, l) => l && typeof n.label == "string" ? n.label.toLowerCase().includes(l.toLowerCase()) || n.data?.data?.email?.toLowerCase().includes(l.toLowerCase()) : !0, me = pe();
-  return /* @__PURE__ */ t.jsx(
-    fe,
-    {
-      placeholder: p ?? M.getLocalizedStrings().commonSetUp.approval.userSelectPlaceholder,
-      selectedValue: a,
-      pickerValues: C,
-      valueToLabel: te,
-      valueToData: re,
-      backgroundColor: me.colors.background,
-      onPickerSelectionChanged: ie,
-      OptionComponent: oe,
-      PlaceholderComponent: ne,
-      SingleValueComponent: le,
-      isOptionRemovable: v,
-      containerStyles: x,
-      DropDownIndicatorComponent: ae,
-      ControlComponent: ce,
-      classNamePrefix: "single-select-field",
-      ValueContainerComponent: de,
-      MenuListComponent: ue,
-      menuPosition: u === "small" ? "right" : "left",
-      isSearchable: !0,
-      isDisabled: E,
-      isOptionDisabled: (n) => R?.(n) === !0 && a !== n,
-      filterOption: he
-    }
-  );
-}
-const Te = {
-  infoLabel: new be("smallRegular", "smallRegular")
-}, _e = ({
-  name: e,
-  placeholderLabel: a,
-  registerOptions: i,
-  value: p,
-  valueToSubtitle: v,
-  showOneOffLabel: $,
-  userContainerStyles: w,
-  optionStyles: j,
-  isValuePlacedAtEnd: x,
-  isDisabled: V,
-  additionalLabelInfo: P,
-  isOptionDisabled: E,
-  showOnlyAvatar: z = !1,
-  showAvatarAndSubtitles: S = !0,
-  disabledOptionHint: R,
-  bigMarginRightForSmallScreens: y = !1
-}) => {
-  const { control: L } = K(), D = B();
-  return /* @__PURE__ */ t.jsx(
-    xe,
-    {
-      name: e,
-      control: L,
-      defaultValue: p,
-      rules: i,
-      render: ({ field: { value: k, onChange: u } }) => /* @__PURE__ */ t.jsxs(
-        Ge,
-        {
-          width: w?.width,
-          "data-testid": X("user-single-select", e),
-          children: [
-            /* @__PURE__ */ t.jsx(
-              We,
-              {
-                onSelectionChanged: (C) => {
-                  u({
-                    allUsers: p.allUsers,
-                    selectedUser: C
-                  });
-                },
-                selectedValue: k.selectedUser,
-                valueToSubtitle: v,
-                allUsers: p.allUsers,
-                placeholder: a,
-                name: e,
-                showOneOffLabel: $,
-                userContainerStyles: w,
-                isValuePlacedAtEnd: x,
-                isDisabled: V,
-                isOptionDisabled: E,
-                showAvatarAndSubtitles: S,
-                showOnlyAvatar: z,
-                disabledOptionHint: R,
-                bigMarginRightForSmallScreens: y,
-                optionStyles: j
-              }
-            ),
-            P !== null && /* @__PURE__ */ t.jsx(He, { size: D, children: P })
-          ]
-        }
-      )
-    }
-  );
-}, Ge = s.div`
-  display: flex;
-  flex-direction: column;
-  width: ${(e) => e.width != null ? e.width : "auto"};
-`, He = s.label`
-  color: ${(e) => e.theme.colors.hero};
-  ${(e) => `${Te.infoLabel.style(e.size)}`};
-  text-align: right;
-  padding-right: ${r.sp3};
-`, A = {
-  width: new I(343, 580, 726),
-  labelMarginLeft: new I(g[3], g[4]),
-  labelMarginRight: new I(g[3], g[4])
-};
-function Ye({
-  isDisabled: e,
-  label: a,
-  userSingleSelectWithSubTitlesField: i,
-  style: p,
-  showTooltip: v = !1,
-  tooltipTitle: $,
-  toolTipWidth: w,
-  opacity: j = 1
-}) {
-  const x = B();
-  return /* @__PURE__ */ t.jsxs(
-    Ze,
-    {
-      size: x,
-      style: p,
-      isDisabled: e != null,
-      opacity: j,
-      "data-testid": X(
-        "labeled-user-single-select",
-        i.name
-      ),
-      children: [
-        /* @__PURE__ */ t.jsx(
-          ve,
-          {
-            isDisabled: e,
-            label: a.label,
-            htmlFor: i.name,
-            style: {
-              marginLeft: A.labelMarginLeft.value(x),
-              marginRight: A.labelMarginRight.value(x),
-              marginTop: r.sp2,
-              width: a.width ?? "auto"
-            },
-            showTooltip: v,
-            tooltipTitle: $,
-            toolTipWidth: w
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          _e,
-          {
-            ...i,
-            isDisabled: e,
-            userContainerStyles: {
-              display: "flex",
-              flexGrow: 1,
-              ...i.showOnlyAvatar === !1 && {
-                minWidth: "unset",
-                maxWidth: "unset"
-              },
-              width: a.width != null ? `calc(100% - ${a.width}px)` : "auto",
-              height: i.value.selectedUser == null || i.value.selectedUser != null && i.showOnlyAvatar === !0 ? r.sp6 : r.sp9
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-const Ze = s.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  background-color: ${(e) => e.theme.colors.grey5};
-  width: ${(e) => A.width.valuePx(e.size)};
-  min-height: ${r.sp6};
-  padding-right: ${r.sp2};
-  padding-top: ${r.sp2};
-  padding-bottom: ${r.sp2};
-  opacity: ${(e) => e.opacity};
-
-  :first-of-type {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-  }
-
-  :last-of-type {
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-  }
-
-  &:focus-within {
-    z-index: 2;
-    outline: 1px solid ${(e) => e.theme.colors.primary};
-    .select-control {
-      background-color: ${(e) => e.theme.colors.background};
-    }
-  }
-
-  &:hover {
-    z-index: 1;
-    outline: ${(e) => e.isDisabled === !0 ? "none" : `1px solid ${e.theme.colors.primary}`};
-    .select-control {
-      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
-    }
-  }
-`;
-export {
-  Ye as L
-};