@zeniai/web-components 3.17.22 → 3.17.24

package/dist/LabeledDropDownFormattedTextField-D6FUyBtt.cjs

@@ -1,59 +0,0 @@
-"use strict";const r=require("./vendor-.pnpm-DLVCFIC_.cjs"),o=require("@emotion/styled"),t=require("./index-OMYmSL-3.cjs"),F={infoLabel:new t.ResponsiveSizedStyle("extraSmallRegular","smallRegular")};function z({isDisabled:e,label:x,formattedText:s,dropdownStyle:h,style:m,additionalInfoLabel:g,showAdditionalInfoLabel:b=!0,isSaveError:n=!1,showTickIcon:y,showErrorInfoLabel:S,errorInfoLabel:f,registerOptions:j,defaultValue:d,isSelectDisabled:$,menuPlacement:w,name:C,placeholderLabel:E}){const l=t.useWindowSizeContext(),u=r.useTheme(),{formState:{errors:R}}=r.useFormContext(),a=r.has(R,s.name),{control:k}=r.useFormContext(),L=i=>typeof i=="string"?i.toLocaleUpperCase():i.toString().toLocaleUpperCase();return r.jsxRuntimeExports.jsxs(D,{size:l,style:m,isDisabled:e!=null,isError:a||n,children:[r.jsxRuntimeExports.jsx(I,{windowSize:l,style:{width:x?.width??"auto",marginRight:t.Space.sp2},children:r.jsxRuntimeExports.jsx(V,{style:{width:"auto",...h},children:r.jsxRuntimeExports.jsx(r.Controller,{name:C,control:k,defaultValue:d.dropDownValue,rules:j,render:({field:{value:i,onChange:v}})=>r.jsxRuntimeExports.jsx(t.Picker$1,{pickerValues:d.dropDownList.map(c=>c.code),valueToLabel:L,selectedValue:i??void 0,isDisabled:e!=null||$,onPickerSelectionChanged:c=>{v(c)},menuPlacement:w,titleTextStyle:t.textStyles.standardRegular,titleColor:u.colors.hero,valueOpacity:1,backgroundColor:u.colors.grey5,placeholder:E})})})}),r.jsxRuntimeExports.jsxs(T,{children:[r.jsxRuntimeExports.jsx(t.FormattedTextField,{...s,style:s.style,isDisabled:s.isDisabled,isMasked:!0}),(b||a||n)&&r.jsxRuntimeExports.jsxs(p,{size:l,isError:a||n,children:[y===!0?r.jsxRuntimeExports.jsx(W,{children:r.jsxRuntimeExports.jsx(q,{})}):null,g]}),S===!0&&r.jsxRuntimeExports.jsx(p,{size:l,isError:!0,children:f})]})]})}const D=o.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  background-color: ${e=>e.theme.colors.grey5};
-  min-height: ${t.Space.sp6};
-  padding-top: ${t.Space.sp2};
-  padding-bottom: ${t.Space.sp2};
-  padding-right: ${t.Space.sp2};
-
-  :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: 1;
-
-    input {
-      background-color: ${e=>e.isError?t.Colors.importantLight:e.theme.colors.background};
-    }
-  }
-  input {
-    background-color: ${e=>e.isError?t.Colors.importantLight:e.theme.colors.grey5};
-  }
-  &:hover {
-    input {
-      background-color: ${e=>e.isDisabled===!0?e.theme.colors.grey5:e.isError?t.Colors.importantLight:e.theme.colors.background};
-    }
-  }
-`,T=o.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  flex-grow: 1;
-`,p=o.label`
-  display: flex;
-  color: ${e=>e.isError?t.Colors.important:e.theme.colors.grey1};
-  ${e=>`${F.infoLabel.style(e.size)}`};
-  padding-right: ${t.Space.sp3};
-  text-align: right;
-`,W=o.div`
-  display: flex;
-  margin-right: ${t.Space.sp1};
-  align-items: center;
-`,q=o(t.SvgTick)`
-  width: ${t.Space.sp3};
-  height: ${t.Space.sp3};
-  color: ${t.Colors.successDark};
-`,I=o.div`
-  display: flex;
-  width: 100%;
-  flex-direction: ${e=>e.windowSize==="small"?"column":"row"};
-`,V=o.div``;exports.LabeledDropDownFormattedTextField=z;

package/dist/LabeledDropDownFormattedTextField-DDtxGo1u.js

@@ -1,163 +0,0 @@
-import { u as D, d as g, m as T, j as t, e as W } from "./vendor-.pnpm-UYinI_7q.js";
-import i from "@emotion/styled";
-import { u as I, S as r, eX as V, t as P, fR as U, C as s, aw as M, p as O } from "./index-mRSIAtAd.js";
-const X = {
-  infoLabel: new M("extraSmallRegular", "smallRegular")
-};
-function Y({
-  isDisabled: e,
-  label: m,
-  formattedText: l,
-  dropdownStyle: x,
-  style: f,
-  additionalInfoLabel: b,
-  showAdditionalInfoLabel: y = !0,
-  isSaveError: a = !1,
-  showTickIcon: w,
-  showErrorInfoLabel: S,
-  errorInfoLabel: $,
-  registerOptions: k,
-  defaultValue: u,
-  isSelectDisabled: j,
-  menuPlacement: C,
-  name: L,
-  placeholderLabel: v
-}) {
-  const n = I(), h = D(), {
-    formState: { errors: z }
-  } = g(), d = T(z, l.name), { control: E } = g(), F = (o) => typeof o == "string" ? o.toLocaleUpperCase() : o.toString().toLocaleUpperCase();
-  return /* @__PURE__ */ t.jsxs(
-    q,
-    {
-      size: n,
-      style: f,
-      isDisabled: e != null,
-      isError: d || a,
-      children: [
-        /* @__PURE__ */ t.jsx(
-          H,
-          {
-            windowSize: n,
-            style: { width: m?.width ?? "auto", marginRight: r.sp2 },
-            children: /* @__PURE__ */ t.jsx(
-              J,
-              {
-                style: {
-                  width: "auto",
-                  ...x
-                },
-                children: /* @__PURE__ */ t.jsx(
-                  W,
-                  {
-                    name: L,
-                    control: E,
-                    defaultValue: u.dropDownValue,
-                    rules: k,
-                    render: ({ field: { value: o, onChange: R } }) => /* @__PURE__ */ t.jsx(
-                      V,
-                      {
-                        pickerValues: u.dropDownList.map(
-                          (c) => c.code
-                        ),
-                        valueToLabel: F,
-                        selectedValue: o ?? void 0,
-                        isDisabled: e != null || j,
-                        onPickerSelectionChanged: (c) => {
-                          R(c);
-                        },
-                        menuPlacement: C,
-                        titleTextStyle: P.standardRegular,
-                        titleColor: h.colors.hero,
-                        valueOpacity: 1,
-                        backgroundColor: h.colors.grey5,
-                        placeholder: v
-                      }
-                    )
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ t.jsxs(A, { children: [
-          /* @__PURE__ */ t.jsx(
-            U,
-            {
-              ...l,
-              style: l.style,
-              isDisabled: l.isDisabled,
-              isMasked: !0
-            }
-          ),
-          (y || d || a) && /* @__PURE__ */ t.jsxs(p, { size: n, isError: d || a, children: [
-            w === !0 ? /* @__PURE__ */ t.jsx(B, { children: /* @__PURE__ */ t.jsx(G, {}) }) : null,
-            b
-          ] }),
-          S === !0 && /* @__PURE__ */ t.jsx(p, { size: n, isError: !0, children: $ })
-        ] })
-      ]
-    }
-  );
-}
-const q = i.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  background-color: ${(e) => e.theme.colors.grey5};
-  min-height: ${r.sp6};
-  padding-top: ${r.sp2};
-  padding-bottom: ${r.sp2};
-  padding-right: ${r.sp2};
-
-  :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: 1;
-
-    input {
-      background-color: ${(e) => e.isError ? s.importantLight : e.theme.colors.background};
-    }
-  }
-  input {
-    background-color: ${(e) => e.isError ? s.importantLight : e.theme.colors.grey5};
-  }
-  &:hover {
-    input {
-      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.isError ? s.importantLight : e.theme.colors.background};
-    }
-  }
-`, A = i.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  flex-grow: 1;
-`, p = i.label`
-  display: flex;
-  color: ${(e) => e.isError ? s.important : e.theme.colors.grey1};
-  ${(e) => `${X.infoLabel.style(e.size)}`};
-  padding-right: ${r.sp3};
-  text-align: right;
-`, B = i.div`
-  display: flex;
-  margin-right: ${r.sp1};
-  align-items: center;
-`, G = i(O)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-  color: ${s.successDark};
-`, H = i.div`
-  display: flex;
-  width: 100%;
-  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
-`, J = i.div``;
-export {
-  Y as L
-};

package/dist/LabeledEmailInputField-B6CdyajT.cjs

@@ -1,182 +0,0 @@
-"use strict";const r=require("./vendor-.pnpm-DLVCFIC_.cjs"),f=require("react"),o=require("@emotion/styled"),t=require("./index-OMYmSL-3.cjs"),T=o.div`
-  display: flex;
-  align-items: center;
-  padding: ${t.Space.sp1} ${t.Space.sp2};
-  cursor: pointer;
-  border: ${e=>`1px solid ${e.selected?e.theme.colors.primary:e.theme.colors.grey1}`};
-  column-gap: ${t.Space.sp2};
-  border-radius: ${t.Space.sp1};
-  height: ${t.Space.sp5};
-  margin-right: ${t.Space.sp3};
-  box-sizing: border-box;
-`,P=o(t.StandardRegularSp)`
-  color: ${e=>e.error?e.theme.colors.hero:e.theme.colors.primary};
-`,K=o.button`
-  border: none;
-  color: ${e=>e.error?e.theme.colors.hero:e.theme.colors.primary};
-  background: none;
-  cursor: pointer;
-  display: flex;
-`,M=o(t.SvgClose)`
-  width: ${t.Space.sp3};
-  height: ${t.Space.sp3};
-  color: inherit;
-`;function q(e){const{label:i,error:x,handleDelete:S,selected:E}=e;return r.jsxRuntimeExports.jsxs(T,{selected:E,error:x,children:[r.jsxRuntimeExports.jsx(P,{selected:E,error:x,children:i}),r.jsxRuntimeExports.jsx(K,{onClick:S,error:x,children:r.jsxRuntimeExports.jsx(M,{})})]})}const B=o.div`
-  width: 100%;
-  position: relative;
-`,V=o.div`
-  display: flex;
-  flex-wrap: wrap;
-  flex-flow: row wrap;
-  cursor: text;
-  border-radius: ${t.Space.sp1};
-  padding: 0 ${t.Space.sp3};
-  min-height: ${t.Space.sp6};
-  align-items: center;
-  background-color: ${e=>e.isFocused&&!e.error?e.theme.colors.background:e.disabled?e.theme.colors.grey5:e.error?t.Colors.importantLight:"transparent"};
-  &:hover {
-    background-color: ${e=>e.error?t.Colors.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};
-    }
-  }
-`,W=o.div`
-  display: flex;
-  flex-flow: row wrap;
-  flex-wrap: wrap;
-  width: 100%;
-  gap: ${t.Space.sp2} 0;
-  overflow-x: auto;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-`,_=o.div`
-  width: 100%;
-  border-radius: 0;
-  display: inline-flex;
-  flex-wrap: wrap;
-  flex: 1;
-  padding: ${t.Space.sp0};
-  margin-top: ${t.Space.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;
-  }
-`,H=o(t.StandardRegularInput)`
-  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: ${t.textStyles.standardRegular.fontSize};
-    color: ${e=>e.error?t.Colors.important:e.theme.colors.grey1};
-    text-align: ${e=>e.isFocused?"left":"right"};
-  }
-`,U=o.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  margin-top: ${t.Space.sp1};
-`,N=o(t.SvgHighImportance)`
-  width: ${t.Space.sp3};
-  height: ${t.Space.sp3};
-  color: ${t.Colors.important};
-`,G=o(t.ExtraSmallMediumSp)`
-  color: ${t.Colors.important};
-  padding-left: ${t.Space.sp1};
-`,L=o(t.StandardRegularSp)`
-  color: ${e=>e.error?e.theme.colors.hero:e.theme.colors.primary};
-  max-width: 500px;
-  text-align: ${e=>e.windowSize==="small"?"start":"end"};
-`,J=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;
-`,O=o(t.SvgClose)`
-  width: ${t.Space.sp3};
-  height: ${t.Space.sp3};
-  color: inherit;
-`,A={BACKSPACE:8,DELETE:46},Q=[9,13,32],X=["Enter","Tab","Space"," "],Y=e=>{const i=t.EMAIL_PATTERN;return!!e.match(i)};function Z(e){const{error:i,helpText:x,inputValue:S,placeholder:E,chips:l,disableInputWithChips:$=!1,onUpdateInput:I,onAdd:R,onDelete:z,onInvalidEmailAdd:v,onDeleteAll:b}=e,[a,j]=f.useState(!1),[u,p]=f.useState(-1),m=f.useRef(null),g=f.useRef(null),c=t.useWindowSizeContext(),y=n=>{I(n)},w=n=>{z(n)},h=f.useCallback(n=>n.trim().length>0?(Y(n)?R(n):v?.(n),!0):!1,[R,v]),C=n=>{p(n),s()},s=()=>{$===!1&&(j(!0),g?.current?.focus())},D=n=>{if(Q.indexOf(n.keyCode)>=0||X.indexOf(n.key)>=0){h(n.target.value)===!0&&n.preventDefault();return}switch(n.keyCode===37?u>0?p(u-1):u===-1&&p(l.length-1):n.keyCode===39&&u!==l.length-1&&p(u+1),n.keyCode){case A.BACKSPACE:case A.DELETE:if(n.target.value===""){let d=l.length-1;u!==-1&&(d=u),w(d),p(-1)}break}};return f.useEffect(()=>{const n=d=>{m.current!=null&&!m.current.contains(d.target)&&a&&(g?.current?.value!=null&&g?.current?.value.trim().length>0?h(g.current.value):(j(!1),p(-1)))};return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[h,a]),r.jsxRuntimeExports.jsxs(B,{windowSize:c,ref:m,children:[r.jsxRuntimeExports.jsxs(V,{isFocused:a,error:i,disabled:$,children:[r.jsxRuntimeExports.jsxs(W,{chips:l,windowSize:c,children:[a&&r.jsxRuntimeExports.jsx(r.jsxRuntimeExports.Fragment,{children:l.map((n,d)=>r.jsxRuntimeExports.jsx(q,{handleClick:()=>{C(d)},handleDelete:()=>w(d),label:n,selected:d===u,error:i},n))}),!a&&c==="small"&&r.jsxRuntimeExports.jsx(L,{onClick:s,error:i,windowSize:c,children:l.join(", ")}),r.jsxRuntimeExports.jsx(_,{isFocused:a,error:i,disabled:!1,children:r.jsxRuntimeExports.jsx(H,{id:"inputField",isFocused:a,error:i,ref:g,value:S,onChange:y,onKeyDown:D,onFocus:s,disabled:$,autoComplete:"off",placeholder:S.length===0&&l.length===0?E:void 0})}),!a&&c!=="small"&&r.jsxRuntimeExports.jsx(L,{onClick:s,error:i,windowSize:c,children:l.join(", ")})]}),a&&r.jsxRuntimeExports.jsx(J,{onClick:b,error:i,children:r.jsxRuntimeExports.jsx(O,{})})]},"inputChips"),x!=null?r.jsxRuntimeExports.jsxs(U,{children:[r.jsxRuntimeExports.jsx(N,{}),r.jsxRuntimeExports.jsx(G,{children:x})]}):""]})}const k={width:new t.ResponsiveSized(110,150),labelMarginLeft:new t.ResponsiveSized(t.sp[3],t.sp[4]),labelMarginRight:new t.ResponsiveSized(t.sp[3],t.sp[4])},ee={infoLabel:new t.ResponsiveSizedStyle("extraSmallRegular","smallRegular")},te=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?t.Colors.importantLight:e.theme.colors.background};
-    }
-  }
-`,re=o(t.StandardRegular)`
-  color: ${e=>e.theme.colors.hero};
-  width: ${e=>k.width.valuePx(e.windowSize)};
-  margin-left: ${e=>k.labelMarginLeft.valuePx(e.windowSize)};
-  margin-right: ${e=>k.labelMarginRight.valuePx(e.windowSize)};
-  margin-top: ${t.Space.sp2};
-  margin-bottom: ${t.Space.sp2};
-`,ne=o.div`
-  width: calc(100% - ${e=>k.width.valuePx(e.windowSize)});
-  margin-right: ${t.Space.sp2};
-`,oe=o(t.SmallRegularP)`
-  color: ${e=>e.theme.colors.grey1};
-  padding-right: ${t.Space.sp2};
-  margin: 0;
-`,ie=o.div`
-  display: flex;
-  width: 100%;
-  align-items: center;
-`,se=o.div`
-  display: flex;
-  width: calc(100% - 150px);
-  justify-content: flex-end;
-  align-items: center;
-  text-align: end;
-  margin-top: ${t.Space.sp1};
-`,F=o.label`
-  display: flex;
-  color: ${e=>e.isError?t.Colors.important:e.theme.colors.grey1};
-  ${e=>`${ee.infoLabel.style(e.size)}`};
-  padding-right: ${t.Space.sp3};
-  text-align: right;
-`,le=o.div`
-  display: flex;
-  margin-right: ${t.Space.sp1};
-  align-items: center;
-`,ae=o(t.SvgTick)`
-  width: ${t.Space.sp3};
-  height: ${t.Space.sp3};
-  color: ${t.Colors.successDark};
-`;function ce({name:e,label:i,style:x,additionalInfoLabel:S,showAdditionalInfoLabel:E=!0,isSaveError:l=!1,showErrorInfoLabel:$,errorInfoLabel:I,showTickIcon:R,description:z,placeholder:v,registerOptions:b}){const[a,j]=f.useState(""),{control:u,formState:{errors:p},setError:m,clearErrors:g}=r.useFormContext(),c=t.useWindowSizeContext(),y=r.has(p,e),{cockpit:w}=t.appLocale.getLocalizedStrings();return r.jsxRuntimeExports.jsx(r.Controller,{name:e,control:u,defaultValue:[],rules:b,render:({field:{value:h,onChange:C}})=>r.jsxRuntimeExports.jsxs(te,{isError:y,isDisabled:b?.disabled===!0,style:x,children:[r.jsxRuntimeExports.jsxs(ie,{children:[r.jsxRuntimeExports.jsx(re,{windowSize:c,children:i}),r.jsxRuntimeExports.jsx(ne,{windowSize:c,className:"emailInputContainer",children:r.jsxRuntimeExports.jsx(Z,{placeholder:v??w.monthEndReport.addEmailAddress,inputValue:a,disableInputWithChips:b?.disabled===!0,chips:h,error:r.get(p,e,void 0)!=null,onUpdateInput:s=>{s.target.value.length===0&&h.length===0&&b?.required===!0?m(e,{type:"validate"}):g(e),j(s.target.value)},onInvalidEmailAdd:()=>{m(e,{message:w.monthEndReport.invalidEmail,type:"validate"})},onAdd:s=>{if(h.indexOf(s)>-1){m(e,{message:w.monthEndReport.duplicateEmail,type:"duplicate"});return}C([...h,s]),j("")},onDelete:s=>{const D=h.filter((n,d)=>s!==d);C(D)},onDeleteAll:()=>{C([]),j("")}})})]}),(E||y||l)&&r.jsxRuntimeExports.jsxs(F,{size:c,isError:y||l,children:[R===!0?r.jsxRuntimeExports.jsx(le,{children:r.jsxRuntimeExports.jsx(ae,{})}):null,S]}),$===!0&&r.jsxRuntimeExports.jsx(F,{size:c,isError:!0,children:I}),r.jsxRuntimeExports.jsx(se,{children:r.jsxRuntimeExports.jsx(oe,{children:z})})]})})}exports.LabeledEmailInputField=ce;