@zeniai/web-components 3.16.52 → 3.16.54

package/dist/LabeledEmailInputField-DImMiusn.js

@@ -1,425 +0,0 @@
-import { j as t, d as H, m as U, e as W, an as N } from "./vendor-.pnpm-BZbZ6JJC.js";
-import F, { useRef as T, useCallback as q, useEffect as G, useState as X } from "react";
-import o from "@emotion/styled";
-import { S as r, o as B, b as V, u as _, ep as J, C as g, t as O, fE as Q, X as Y, eG as Z, a as ee, R as A, p as te, av as re, n as ne, e$ as oe, D as I } from "./index-Bove2J7o.js";
-const le = o.div`
-  display: flex;
-  align-items: center;
-  padding: ${r.sp1} ${r.sp2};
-  cursor: pointer;
-  border: ${(e) => `1px solid ${e.selected ? e.theme.colors.primary : e.theme.colors.grey1}`};
-  column-gap: ${r.sp2};
-  border-radius: ${r.sp1};
-  height: ${r.sp5};
-  margin-right: ${r.sp3};
-  box-sizing: border-box;
-`, ie = o(B)`
-  color: ${(e) => e.error ? e.theme.colors.hero : e.theme.colors.primary};
-`, se = o.button`
-  border: none;
-  color: ${(e) => e.error ? e.theme.colors.hero : e.theme.colors.primary};
-  background: none;
-  cursor: pointer;
-  display: flex;
-`, ae = o(V)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-  color: inherit;
-`;
-function de(e) {
-  const { label: l, error: m, handleDelete: b, selected: w } = e;
-  return /* @__PURE__ */ t.jsxs(le, { selected: w, error: m, children: [
-    /* @__PURE__ */ t.jsx(ie, { selected: w, error: m, children: l }),
-    /* @__PURE__ */ t.jsx(se, { onClick: b, error: m, children: /* @__PURE__ */ t.jsx(ae, {}) })
-  ] });
-}
-const ce = o.div`
-  width: 100%;
-  position: relative;
-`, ue = o.div`
-  display: flex;
-  flex-wrap: wrap;
-  flex-flow: row wrap;
-  cursor: text;
-  border-radius: ${r.sp1};
-  padding: 0 ${r.sp3};
-  min-height: ${r.sp6};
-  align-items: center;
-  background-color: ${(e) => e.isFocused && !e.error ? e.theme.colors.background : e.disabled ? e.theme.colors.grey5 : e.error ? g.importantLight : "transparent"};
-  &:hover {
-    background-color: ${(e) => e.error ? g.importantLight : e.disabled ? e.theme.colors.grey5 : e.theme.colors.background};
-    & input {
-      background-color: ${(e) => e.error ? "transparent" : e.disabled ? e.theme.colors.grey5 : e.theme.colors.background};
-    }
-  }
-`, he = o.div`
-  display: flex;
-  flex-flow: row wrap;
-  flex-wrap: wrap;
-  width: 100%;
-  gap: ${r.sp2} 0;
-  overflow-x: auto;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-`, pe = o.div`
-  width: 100%;
-  border-radius: 0;
-  display: inline-flex;
-  flex-wrap: wrap;
-  flex: 1;
-  padding: ${r.sp0};
-  margin-top: ${r.sp0};
-  min-width: 20;
-  background-color: transparent;
-  & input {
-    background-color: ${(e) => e.isFocused && !e.error ? e.theme.colors.background : e.error ? "transparent" : ""};
-  }
-  &:hover {
-    background-color: transparent;
-  }
-`, me = o(Q)`
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  appearance: none;
-  border: none;
-  outline: none;
-  width: 100%;
-  float: left;
-  flex: 1;
-  background-color: transparent;
-  color: ${(e) => e.theme.colors.hero};
-  ::placeholder {
-    font-size: ${O.standardRegular.fontSize};
-    color: ${(e) => e.error ? g.important : e.theme.colors.grey1};
-    text-align: ${(e) => e.isFocused ? "left" : "right"};
-  }
-`, ge = o.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  margin-top: ${r.sp1};
-`, fe = o(Y)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-  color: ${g.important};
-`, xe = o(Z)`
-  color: ${g.important};
-  padding-left: ${r.sp1};
-`, P = o(B)`
-  color: ${(e) => e.error ? e.theme.colors.hero : e.theme.colors.primary};
-  max-width: 500px;
-  text-align: ${(e) => e.windowSize === "small" ? "start" : "end"};
-`, be = o.button`
-  border: none;
-  color: ${(e) => e.error ? e.theme.colors.hero : e.theme.colors.primary};
-  background: none;
-  cursor: pointer;
-  position: absolute;
-  right: 0;
-  display: flex;
-`, we = o(V)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-  color: inherit;
-`, K = {
-  BACKSPACE: 8,
-  DELETE: 46
-}, $e = [9, 13, 32], ye = ["Enter", "Tab", "Space", " "], Se = (e) => {
-  const l = J;
-  return !!e.match(l);
-};
-function Ce(e) {
-  const {
-    error: l,
-    helpText: m,
-    inputValue: b,
-    placeholder: w,
-    chips: s,
-    disableInputWithChips: C = !1,
-    onUpdateInput: R,
-    onAdd: j,
-    onDelete: z,
-    onInvalidEmailAdd: v,
-    onDeleteAll: $
-  } = e, [a, y] = F.useState(!1), [u, h] = F.useState(-1), f = T(null), x = T(null), d = _(), E = (n) => {
-    R(n);
-  }, S = (n) => {
-    z(n);
-  }, p = q(
-    (n) => n.trim().length > 0 ? (Se(n) ? j(n) : v?.(n), !0) : !1,
-    [j, v]
-  ), k = (n) => {
-    h(n), i();
-  }, i = () => {
-    C === !1 && (y(!0), x?.current?.focus());
-  }, L = (n) => {
-    if ($e.indexOf(n.keyCode) >= 0 || ye.indexOf(n.key) >= 0) {
-      p(n.target.value) === !0 && n.preventDefault();
-      return;
-    }
-    switch (n.keyCode === 37 ? u > 0 ? h(u - 1) : u === -1 && h(s.length - 1) : n.keyCode === 39 && u !== s.length - 1 && h(u + 1), n.keyCode) {
-      case K.BACKSPACE:
-      case K.DELETE:
-        if (n.target.value === "") {
-          let c = s.length - 1;
-          u !== -1 && (c = u), S(c), h(-1);
-        }
-        break;
-    }
-  };
-  return G(() => {
-    const n = (c) => {
-      f.current != null && !f.current.contains(c.target) && a && (x?.current?.value != null && x?.current?.value.trim().length > 0 ? p(x.current.value) : (y(!1), h(-1)));
-    };
-    return document.addEventListener("mousedown", n), () => {
-      document.removeEventListener("mousedown", n);
-    };
-  }, [p, a]), /* @__PURE__ */ t.jsxs(ce, { windowSize: d, ref: f, children: [
-    /* @__PURE__ */ t.jsxs(
-      ue,
-      {
-        isFocused: a,
-        error: l,
-        disabled: C,
-        children: [
-          /* @__PURE__ */ t.jsxs(he, { chips: s, windowSize: d, children: [
-            a && /* @__PURE__ */ t.jsx(t.Fragment, { children: s.map((n, c) => /* @__PURE__ */ t.jsx(
-              de,
-              {
-                handleClick: () => {
-                  k(c);
-                },
-                handleDelete: () => S(c),
-                label: n,
-                selected: c === u,
-                error: l
-              },
-              n
-            )) }),
-            !a && d === "small" && /* @__PURE__ */ t.jsx(
-              P,
-              {
-                onClick: i,
-                error: l,
-                windowSize: d,
-                children: s.join(", ")
-              }
-            ),
-            /* @__PURE__ */ t.jsx(pe, { isFocused: a, error: l, disabled: !1, children: /* @__PURE__ */ t.jsx(
-              me,
-              {
-                id: "inputField",
-                isFocused: a,
-                error: l,
-                ref: x,
-                value: b,
-                onChange: E,
-                onKeyDown: L,
-                onFocus: i,
-                disabled: C,
-                autoComplete: "off",
-                placeholder: b.length === 0 && s.length === 0 ? w : void 0
-              }
-            ) }),
-            !a && d !== "small" && /* @__PURE__ */ t.jsx(
-              P,
-              {
-                onClick: i,
-                error: l,
-                windowSize: d,
-                children: s.join(", ")
-              }
-            )
-          ] }),
-          a && /* @__PURE__ */ t.jsx(be, { onClick: $, error: l, children: /* @__PURE__ */ t.jsx(we, {}) })
-        ]
-      },
-      "inputChips"
-    ),
-    m != null ? /* @__PURE__ */ t.jsxs(ge, { children: [
-      /* @__PURE__ */ t.jsx(fe, {}),
-      /* @__PURE__ */ t.jsx(xe, { children: m })
-    ] }) : ""
-  ] });
-}
-const D = {
-  width: new A(110, 150),
-  labelMarginLeft: new A(I[3], I[4]),
-  labelMarginRight: new A(I[3], I[4])
-}, Ee = {
-  infoLabel: new re("extraSmallRegular", "smallRegular")
-}, ke = o.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  width: 100%;
-  :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};
-  }
-
-  &:hover {
-    z-index: 1;
-    outline: 1px solid
-      ${(e) => e.isDisabled ? "transparent" : e.theme.colors.primary};
-    .emailInputContainer {
-      background-color: ${(e) => e.isDisabled ? "transparent" : e.isError ? g.importantLight : e.theme.colors.background};
-    }
-  }
-`, je = o(te)`
-  color: ${(e) => e.theme.colors.hero};
-  width: ${(e) => D.width.valuePx(e.windowSize)};
-  margin-left: ${(e) => D.labelMarginLeft.valuePx(e.windowSize)};
-  margin-right: ${(e) => D.labelMarginRight.valuePx(e.windowSize)};
-  margin-top: ${r.sp2};
-  margin-bottom: ${r.sp2};
-`, ve = o.div`
-  width: calc(100% - ${(e) => D.width.valuePx(e.windowSize)});
-  margin-right: ${r.sp2};
-`, Ie = o(oe)`
-  color: ${(e) => e.theme.colors.grey1};
-  padding-right: ${r.sp2};
-  margin: 0;
-`, De = o.div`
-  display: flex;
-  width: 100%;
-  align-items: center;
-`, Re = o.div`
-  display: flex;
-  width: calc(100% - 150px);
-  justify-content: flex-end;
-  align-items: center;
-  text-align: end;
-  margin-top: ${r.sp1};
-`, M = o.label`
-  display: flex;
-  color: ${(e) => e.isError ? g.important : e.theme.colors.grey1};
-  ${(e) => `${Ee.infoLabel.style(e.size)}`};
-  padding-right: ${r.sp3};
-  text-align: right;
-`, ze = o.div`
-  display: flex;
-  margin-right: ${r.sp1};
-  align-items: center;
-`, Le = o(ne)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-  color: ${g.successDark};
-`;
-function Ke({
-  name: e,
-  label: l,
-  style: m,
-  additionalInfoLabel: b,
-  showAdditionalInfoLabel: w = !0,
-  isSaveError: s = !1,
-  showErrorInfoLabel: C,
-  errorInfoLabel: R,
-  showTickIcon: j,
-  description: z,
-  placeholder: v,
-  registerOptions: $
-}) {
-  const [a, y] = X(""), {
-    control: u,
-    formState: { errors: h },
-    setError: f,
-    clearErrors: x
-  } = H(), d = _(), E = U(h, e), { cockpit: S } = ee.getLocalizedStrings();
-  return /* @__PURE__ */ t.jsx(
-    W,
-    {
-      name: e,
-      control: u,
-      defaultValue: [],
-      rules: $,
-      render: ({ field: { value: p, onChange: k } }) => /* @__PURE__ */ t.jsxs(
-        ke,
-        {
-          isError: E,
-          isDisabled: $?.disabled === !0,
-          style: m,
-          children: [
-            /* @__PURE__ */ t.jsxs(De, { children: [
-              /* @__PURE__ */ t.jsx(je, { windowSize: d, children: l }),
-              /* @__PURE__ */ t.jsx(
-                ve,
-                {
-                  windowSize: d,
-                  className: "emailInputContainer",
-                  children: /* @__PURE__ */ t.jsx(
-                    Ce,
-                    {
-                      placeholder: v ?? S.monthEndReport.addEmailAddress,
-                      inputValue: a,
-                      disableInputWithChips: $?.disabled === !0,
-                      chips: p,
-                      error: N(h, e, void 0) != null,
-                      onUpdateInput: (i) => {
-                        i.target.value.length === 0 && p.length === 0 && $?.required === !0 ? f(e, { type: "validate" }) : x(e), y(i.target.value);
-                      },
-                      onInvalidEmailAdd: () => {
-                        f(e, {
-                          message: S.monthEndReport.invalidEmail,
-                          type: "validate"
-                        });
-                      },
-                      onAdd: (i) => {
-                        if (p.indexOf(i) > -1) {
-                          f(e, {
-                            message: S.monthEndReport.duplicateEmail,
-                            type: "duplicate"
-                          });
-                          return;
-                        }
-                        k([...p, i]), y("");
-                      },
-                      onDelete: (i) => {
-                        const L = p.filter(
-                          (n, c) => i !== c
-                        );
-                        k(L);
-                      },
-                      onDeleteAll: () => {
-                        k([]), y("");
-                      }
-                    }
-                  )
-                }
-              )
-            ] }),
-            (w || E || s) && /* @__PURE__ */ t.jsxs(
-              M,
-              {
-                size: d,
-                isError: E || s,
-                children: [
-                  j === !0 ? /* @__PURE__ */ t.jsx(ze, { children: /* @__PURE__ */ t.jsx(Le, {}) }) : null,
-                  b
-                ]
-              }
-            ),
-            C === !0 && /* @__PURE__ */ t.jsx(M, { size: d, isError: !0, children: R }),
-            /* @__PURE__ */ t.jsx(Re, { children: /* @__PURE__ */ t.jsx(Ie, { children: z }) })
-          ]
-        }
-      )
-    }
-  );
-}
-export {
-  Ke as L
-};

package/dist/LabeledItemWithButton-BImNS-mW.js

@@ -1,74 +0,0 @@
-import { j as n } from "./vendor-.pnpm-BZbZ6JJC.js";
-import d from "@emotion/styled";
-import { u as g, aB as h, R as t, aA as m, D as e } from "./index-Bove2J7o.js";
-const o = {
-  width: new t(343, 580, 726),
-  height: new t(e[6], e[6]),
-  controlHeight: new t(e[6], e[6]),
-  paddingTopBottom: new t(e[2], e[2]),
-  marginTop: new t(e[2], e[2]),
-  marginBottom: new t(e[2], e[2]),
-  marginRight: new t(e[2], e[2]),
-  labelMarginLeft: new t(e[3], e[4]),
-  labelMarginRight: new t(e[3], e[4]),
-  labelMarginTop: new t(e[2], e[2])
-};
-function x({
-  isDisabled: i,
-  label: r,
-  button: l,
-  style: s
-}) {
-  const a = g();
-  return /* @__PURE__ */ n.jsxs(p, { size: a, style: s, children: [
-    /* @__PURE__ */ n.jsx(
-      h,
-      {
-        isDisabled: i,
-        label: r.label,
-        style: {
-          marginLeft: o.labelMarginLeft.value(a),
-          marginRight: o.labelMarginRight.value(a),
-          marginTop: o.labelMarginTop.value(a),
-          width: r.width ?? "auto"
-        }
-      }
-    ),
-    /* @__PURE__ */ n.jsx(
-      m,
-      {
-        ...l,
-        style: {
-          minHeight: o.controlHeight.value(a),
-          display: "flex",
-          flexGrow: 1,
-          ...l.style
-        }
-      }
-    )
-  ] });
-}
-const p = d.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  background-color: ${(i) => i.theme.colors.grey5};
-  width: ${(i) => o.width.valuePx(i.size)};
-  min-height: ${(i) => o.height.valuePx(i.size)};
-  padding-right: ${(i) => o.marginRight.valuePx(i.size)};
-  padding-top: ${(i) => o.paddingTopBottom.valuePx(i.size)};
-  padding-bottom: ${(i) => o.paddingTopBottom.valuePx(i.size)};
-
-  :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;
-  }
-`;
-export {
-  x as L
-};

package/dist/LabeledItemWithButton-Da41kpML.cjs

@@ -1,21 +0,0 @@
-"use strict";const n=require("./vendor-.pnpm-DHyNpoQL.cjs"),a=require("@emotion/styled"),e=require("./index-DBt4VX1a.cjs"),t={width:new e.ResponsiveSized(343,580,726),height:new e.ResponsiveSized(e.sp[6],e.sp[6]),controlHeight:new e.ResponsiveSized(e.sp[6],e.sp[6]),paddingTopBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginTop:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginRight:new e.ResponsiveSized(e.sp[2],e.sp[2]),labelMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginRight:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginTop:new e.ResponsiveSized(e.sp[2],e.sp[2])};function d({isDisabled:i,label:o,button:r,style:p}){const s=e.useWindowSizeContext();return n.jsxRuntimeExports.jsxs(l,{size:s,style:p,children:[n.jsxRuntimeExports.jsx(e.Label,{isDisabled:i,label:o.label,style:{marginLeft:t.labelMarginLeft.value(s),marginRight:t.labelMarginRight.value(s),marginTop:t.labelMarginTop.value(s),width:o.width??"auto"}}),n.jsxRuntimeExports.jsx(e.ItemWithButton,{...r,style:{minHeight:t.controlHeight.value(s),display:"flex",flexGrow:1,...r.style}})]})}const l=a.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  background-color: ${i=>i.theme.colors.grey5};
-  width: ${i=>t.width.valuePx(i.size)};
-  min-height: ${i=>t.height.valuePx(i.size)};
-  padding-right: ${i=>t.marginRight.valuePx(i.size)};
-  padding-top: ${i=>t.paddingTopBottom.valuePx(i.size)};
-  padding-bottom: ${i=>t.paddingTopBottom.valuePx(i.size)};
-
-  :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;
-  }
-`;exports.LabeledItemWithButton=d;