@zeniai/web-components 3.17.1 → 3.17.2

package/dist/LabeledUserSingleSelectWithSubtitlesField-zZPGulq2.js

@@ -0,0 +1,572 @@
+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-BEMjPEfs.js";
+import { R as je } from "./RoleWithToolTip-D4A9SxX8.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
+};