@zeniai/web-components 3.17.22 → 3.17.23

package/dist/LabeledNameField-CuPRtF_-.js

@@ -0,0 +1,293 @@
+import { d as C, m as k, X as N, j as r, C as I } from "./vendor-.pnpm-UYinI_7q.js";
+import c from "@emotion/styled";
+import { t as T, S as n, n as D, C as l, fH as F, u as W, aB as M, R as i, D as t, aw as B } from "./index-DOFSm78O.js";
+import { useState as P } from "react";
+function A({
+  name: e,
+  placeHolder: d,
+  autoComplete: a = "off",
+  defaultValue: x,
+  isDisabled: y,
+  showFullNameError: $,
+  style: o,
+  registerOptions: u
+}) {
+  const [b, h] = P(!1), {
+    register: g,
+    getValues: p,
+    formState: { errors: w }
+  } = C(), m = y === "disabled" || y === "readonly", v = Object.assign({}, u), E = p(e), S = [E?.firstName, E?.lastName].join(" ").trim(), j = k(w, e) && N(w, `${e}.firstName`) != null, L = k(w, e) && N(w, `${e}.lastName`) != null, f = !($ === !0 ? j || L : !1) && b === !1;
+  return /* @__PURE__ */ r.jsx(
+    I,
+    {
+      onClickAway: () => m === !1 && h(!1),
+      children: /* @__PURE__ */ r.jsx(
+        G,
+        {
+          style: o,
+          isDisabled: m,
+          tabIndex: m ? void 0 : 0,
+          onClick: () => m === !1 && h(!0),
+          children: /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+            S.length > 0 ? /* @__PURE__ */ r.jsx(
+              z,
+              {
+                className: "name-field",
+                isVisible: f,
+                children: S
+              }
+            ) : /* @__PURE__ */ r.jsx(
+              z,
+              {
+                className: "name-field name-placeholder",
+                isVisible: f,
+                children: d?.name
+              }
+            ),
+            /* @__PURE__ */ r.jsx(
+              R,
+              {
+                placeholder: d?.firstName,
+                type: void 0,
+                isError: j,
+                style: { ...o, maxWidth: "100%" },
+                disabled: m,
+                ...g(`${e}.firstName`, v),
+                id: e,
+                defaultValue: x?.firstName,
+                autoComplete: a,
+                isVisible: !f
+              }
+            ),
+            f ? null : /* @__PURE__ */ r.jsx(H, {}),
+            /* @__PURE__ */ r.jsx(
+              R,
+              {
+                placeholder: d?.lastName,
+                type: void 0,
+                isError: L,
+                style: { ...o, maxWidth: "100%" },
+                disabled: m,
+                ...g(`${e}.lastName`, v),
+                id: e,
+                defaultValue: x?.lastName,
+                autoComplete: a,
+                isVisible: !f
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+const G = c.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey5};
+  &:hover,
+  &:focus {
+    input {
+      text-align: left;
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+    }
+  }
+
+  &:hover {
+    span {
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+    }
+  }
+  input {
+    text-align: right;
+  }
+  &:focus-within {
+    outline: none;
+    ${T.standardRegular.css};
+  }
+`, H = c.div`
+  background-color: ${(e) => e.theme.colors.grey5};
+  min-width: ${n.sp3};
+`, z = c(D)`
+  display: ${(e) => e.isVisible ? "flex" : "none"};
+  padding: 0 ${n.sp3};
+  border-radius: ${n.sp1};
+  height: 100%;
+  align-items: center;
+  width: 100%;
+  justify-content: flex-end;
+  color: ${(e) => e.theme.colors.primary};
+  &.name-placeholder {
+    color: ${(e) => e.theme.colors.grey1};
+  }
+`, R = c(F)`
+  display: ${(e) => e.isVisible ? "flex" : "none"};
+  width: 100%;
+  text-align: right;
+  border-radius: ${n.sp1};
+  padding: 0 ${n.sp3};
+  border-width: ${n.sp0};
+  outline-width: ${n.sp0};
+  color: ${(e) => e.isError ? l.important : e.theme.colors.primary};
+  background-color: inherit;
+  &:disabled {
+    background-color: ${(e) => e.theme.colors.grey5};
+  }
+  ::placeholder {
+    color: ${(e) => e.isError ? l.important : e.theme.colors.grey1};
+  }
+  &:focus {
+    outline: none;
+  }
+`, s = {
+  width: new i(343, 580, 726),
+  height: new i(t[6], t[6]),
+  controlHeight: new i(t[6], t[6]),
+  paddingTopBottom: new i(t[2], t[2]),
+  marginTop: new i(t[2], t[2]),
+  marginBottom: new i(t[2], t[2]),
+  marginRight: new i(t[2], t[2]),
+  labelMarginLeft: new i(t[3], t[4]),
+  labelMarginRight: new i(t[3], t[4]),
+  labelMarginTop: new i(t[2], t[2])
+}, O = {
+  infoLabel: new B("extraSmallRegular", "smallRegular")
+};
+function Z({
+  isDisabled: e,
+  label: d,
+  nameField: a,
+  style: x,
+  errorInfoLabel: y,
+  showAdditionalInfoLabel: $
+}) {
+  const o = W(), {
+    formState: { errors: u }
+  } = C(), b = k(u, a.name) && N(u, `${a.name}.firstName`) != null, h = k(u, a.name) && N(u, `${a.name}.lastName`) != null, g = a.showFullNameError === !0 ? b || h : !1, p = b || h || g;
+  return /* @__PURE__ */ r.jsxs(
+    X,
+    {
+      size: o,
+      style: x,
+      isDisabled: e != null,
+      isFirstNameError: b,
+      isLastNameError: h,
+      children: [
+        /* @__PURE__ */ r.jsx(
+          M,
+          {
+            isDisabled: e,
+            label: d.label,
+            style: {
+              marginLeft: s.labelMarginLeft.value(o),
+              marginRight: s.labelMarginRight.value(o),
+              marginTop: s.labelMarginTop.value(o),
+              width: d.width ?? "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ r.jsxs(q, { labelWidth: d.width, children: [
+          /* @__PURE__ */ r.jsx(
+            A,
+            {
+              ...a,
+              isDisabled: e,
+              style: {
+                flexGrow: 1,
+                height: s.controlHeight.value(o)
+              }
+            }
+          ),
+          ($ != null || g) && /* @__PURE__ */ r.jsx(V, { size: o, hasError: g, children: $?.label }),
+          p ? /* @__PURE__ */ r.jsx(V, { size: o, hasError: p, children: y }) : null
+        ] })
+      ]
+    }
+  );
+}
+const X = c.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => s.width.valuePx(e.size)};
+  min-height: ${(e) => s.height.valuePx(e.size)};
+  padding-right: ${(e) => s.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => s.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => s.paddingTopBottom.valuePx(e.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;
+  }
+
+  &:focus-within {
+    z-index: 2;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+
+    .name-field {
+      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.theme.colors.background};
+    }
+
+    input:nth-of-type(1) {
+      background-color: ${(e) => e.isFirstNameError ? l.importantLight : e.theme.colors.background};
+    }
+
+    input:nth-of-type(2) {
+      background-color: ${(e) => e.isLastNameError ? l.importantLight : e.theme.colors.background};
+    }
+  }
+  input {
+    text-align: left;
+    background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.theme.colors.background};
+  }
+
+  input:nth-of-type(1) {
+    background-color: ${(e) => e.isFirstNameError ? l.importantLight : e.theme.colors.background};
+  }
+
+  input:nth-of-type(2) {
+    background-color: ${(e) => e.isLastNameError ? l.importantLight : e.theme.colors.background};
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${(e) => e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary};
+    input,
+    .name-field {
+      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.theme.colors.background};
+    }
+
+    input:nth-of-type(1) {
+      background-color: ${(e) => e.isFirstNameError ? l.importantLight : e.theme.colors.background};
+    }
+
+    input:nth-of-type(2) {
+      background-color: ${(e) => e.isLastNameError ? l.importantLight : e.theme.colors.background};
+    }
+  }
+`, V = c.label`
+  color: ${(e) => e.hasError === !0 ? l.important : e.additionalInfoTextColor != null ? e.additionalInfoTextColor : e.theme.colors.grey1};
+  width: auto;
+  ${(e) => `${O.infoLabel.style(e.size)}`};
+  padding-right: ${n.sp3};
+  text-align: right;
+`, q = c.div`
+  display: flex;
+  width: ${(e) => e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "auto"};
+  justify-content: flex-end;
+  flex-direction: column;
+  position: relative;
+`;
+export {
+  Z as L
+};

package/dist/LabeledSingleSelectField-6y1Sdk2h.cjs

@@ -0,0 +1,136 @@
+"use strict";const t=require("./vendor-.pnpm-DLVCFIC_.cjs"),p=require("@emotion/styled"),o=require("./index-DU9PIUCs.cjs"),S=({allValues:e,selectedValue:n,onSelectedValueChanged:l,isDisabled:r,placeholder:a,style:h,customStyleConfig:u})=>{const c=t.useTheme(),x=P(e).sort((i,s)=>i.label.localeCompare(s.label)),m=n!=null&&n?b(n):void 0,w={control:(i,s)=>({...i,height:o.Space.sp6,backgroundColor:s.menuIsOpen?c.colors.brandColorGoldDark:c.colors.grey5,":hover":{fill:c.colors.primary,backgroundColor:s.isDisabled?c.colors.grey5:c.colors.background,borderColor:"none"},...u?.control?.(i,s)}),container:(i,s)=>({...i,width:"100%",...h,...u?.container?.(i,s)}),valueContainer:(i,s)=>({...i,margin:`${o.Space.sp0} ${o.Space.sp3}`,justifyContent:s.selectProps.menuIsOpen===!1?"flex-end":"flex-start",...u?.valueContainer?.(i,s)}),menu:(i,s)=>({...i,backgroundColor:c.colors.grey5,borderRadius:o.Space.sp1,boxShadow:`${o.Space.sp0} 2px ${o.Space.sp2} ${c.colors.dropShadowHover}`,whiteSpace:"nowrap",zIndex:2,width:"100%",margin:0,...u?.menu?.(i,s)}),menuList:(i,s)=>({...i,borderRadius:0,...u?.menuList?.(i,s)})};return t.jsxRuntimeExports.jsx(t.StateManagedSelect$1,{isMulti:!1,onChange:i=>{i?.value!=null&&m?.value===i.value?l(void 0):l(i?.value)},tabSelectsValue:!1,openMenuOnFocus:!0,classNamePrefix:"single-select-field",placeholder:a,menuPlacement:"auto",maxMenuHeight:288,defaultValue:m,value:m,menuShouldScrollIntoView:!1,closeMenuOnSelect:!0,components:{Control:v,Option:y,Input:$,SingleValue:R,ValueContainer:f,DropdownIndicator:L,IndicatorSeparator:I,ClearIndicator:M,Placeholder:j},hideSelectedOptions:!1,styles:w,options:x,isClearable:!0,isSearchable:!0,isDisabled:r!=null},t.nanoid())},v=e=>{const{menuIsOpen:n,isFocused:l,isDisabled:r,selectProps:a}=e,{value:h}=a;return t.jsxRuntimeExports.jsx(C,{menuIsOpen:n,isFocused:l,isDisabled:r,selectedValue:h,children:t.jsxRuntimeExports.jsx(t.components.Control,{...e,className:"select-control",children:e.children})})},f=e=>t.jsxRuntimeExports.jsx(t.components.ValueContainer,{...e,className:"select-value-container",children:e.children}),$=e=>{const{selectProps:n}=e,{placeholder:l,value:r}=n;return t.jsxRuntimeExports.jsx(t.components.Input,{...e,autoComplete:"new-password",placeholder:r==null?l:void 0,children:e.children})},R=e=>t.jsxRuntimeExports.jsx(t.components.SingleValue,{...e,children:e.children}),j=()=>null,y=e=>{const{isSelected:n,isDisabled:l,isFocused:r}=e;return t.jsxRuntimeExports.jsx(z,{isFocused:r,isSelected:n,isDisabled:l,children:t.jsxRuntimeExports.jsx(t.components.Option,{...e,className:"select-option",children:t.jsxRuntimeExports.jsxs(k,{children:[t.jsxRuntimeExports.jsx(E,{children:t.jsxRuntimeExports.jsx(O,{isSelected:n,isDisabled:l,children:e.label})}),n?t.jsxRuntimeExports.jsxs(D,{children:[t.jsxRuntimeExports.jsx(o.SvgTick,{className:"right-tick-icon",width:o.Space.sp3,height:o.Space.sp3,style:{marginRight:"2px"},color:"currentColor"}),t.jsxRuntimeExports.jsx(o.SvgClose,{className:"close-tick-icon",width:o.Space.sp3,height:o.Space.sp3,color:"currentColor"})]}):null]})})})},C=p.div`
+  width: 100%;
+  cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
+
+  .select-control {
+    border: none;
+    box-shadow: none;
+    width: auto;
+    min-height: auto;
+    cursor: pointer;
+  }
+  .select-value-container {
+    width: 100%;
+    display: flex;
+    padding: 0;
+    max-width: 100%;
+    height: 100%;
+    min-width: auto;
+    align-items: center;
+    flex-wrap: nowrap;
+    cursor: pointer;
+
+    .single-select-field__single-value {
+      border-radius: ${o.Space.sp0};
+      margin: ${o.Space.sp0};
+      color: ${e=>e.theme.colors.primary};
+      ${o.textStyles.standardRegular.css};
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .single-select-field__input-container {
+      display: flex;
+      width: ${e=>e.menuIsOpen===!1&&e.selectedValue!=null?o.Space.sp0:"100%"};
+      position: ${e=>e.isFocused===!1&&e.selectedValue==null?"initial":"absolute"};
+      ${o.textStyles.standardRegular.css};
+      color: ${e=>e.theme.colors.primary};
+      margin: ${o.Space.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.theme.colors.grey1};
+        }
+      }
+    }
+  }
+`,z=p.div`
+  .select-option {
+    ${o.textStyles.smallRegular.css};
+    height: ${o.Space.sp6};
+    padding: 9px ${o.Space.sp3};
+    color: ${e=>e.isSelected?e.theme.colors.primary:e.theme.colors.champion};
+    background-color: ${e=>e.isSelected?e.theme.colors.grey3:e.isFocused?e.theme.colors.background:e.theme.colors.grey5};
+    cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
+    border-top: none;
+    .close-tick-icon {
+      display: none;
+    }
+    &:hover {
+      background-color: ${e=>e.isDisabled?e.theme.colors.grey5:e.theme.colors.background};
+      color: ${e=>e.isDisabled?e.theme.colors.champion:e.theme.colors.primary};
+      .right-tick-icon {
+        display: none;
+      }
+      .close-tick-icon {
+        display: inline-block;
+      }
+    }
+  }
+`,k=p.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`,O=p.label`
+  ${o.textStyles.standardRegular.css};
+  padding-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: ${e=>e.isDisabled?"not-allowed":e.isSelected?"default":"pointer"};
+`,E=p.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+`,D=p.div`
+  display: flex;
+  color: ${e=>e.theme.colors.primary};
+  fill: ${e=>e.theme.colors.primary};
+`,L=()=>null,I=()=>null,M=()=>null,P=e=>e.map(n=>b(n)),b=e=>({value:e,label:e}),F=({name:e,registerOptions:n,defaultValue:l,placeholder:r,isDisabled:a,style:h,customStyleConfig:u})=>{const{control:c}=t.useFormContext();return t.jsxRuntimeExports.jsx(t.Controller,{name:e,control:c,defaultValue:l,rules:n,render:({field:{value:g,onChange:x}})=>t.jsxRuntimeExports.jsx(S,{onSelectedValueChanged:m=>x({allOptions:l.allOptions,selectedOption:m}),style:h,placeholder:r,selectedValue:g.selectedOption,allValues:l.allOptions,isDisabled:a,customStyleConfig:u})})},d={width:new o.ResponsiveSized(343,580,726),height:new o.ResponsiveSized(o.sp[6],o.sp[6]),controlHeight:new o.ResponsiveSized(o.sp[6],o.sp[6]),paddingTopBottom:new o.ResponsiveSized(o.sp[2],o.sp[2]),marginTop:new o.ResponsiveSized(o.sp[2],o.sp[2]),marginBottom:new o.ResponsiveSized(o.sp[2],o.sp[2]),marginRight:new o.ResponsiveSized(o.sp[2],o.sp[2]),labelMarginLeft:new o.ResponsiveSized(o.sp[3],o.sp[4]),labelMarginRight:new o.ResponsiveSized(o.sp[3],o.sp[4]),labelMarginTop:new o.ResponsiveSized(o.sp[2],o.sp[2])};function V({isDisabled:e,label:n,singleSelectField:l,style:r}){const a=o.useWindowSizeContext();return t.jsxRuntimeExports.jsxs(T,{size:a,style:r,isDisabled:e!=null,children:[t.jsxRuntimeExports.jsx(o.Label,{isDisabled:e,label:n.label,htmlFor:l.name,style:{marginLeft:d.labelMarginLeft.value(a),marginRight:d.labelMarginRight.value(a),marginTop:d.labelMarginTop.value(a),width:n.width??"auto"}}),t.jsxRuntimeExports.jsx(F,{...l,isDisabled:e,style:{display:"flex",flexGrow:1,maxWidth:n.width!=null?`calc(100% - ${n.width}px)`:"auto",height:d.controlHeight.value(a)}})]})}const T=p.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  width: ${e=>d.width.valuePx(e.size)};
+  min-height: ${e=>d.height.valuePx(e.size)};
+  padding-right: ${e=>d.marginRight.valuePx(e.size)};
+  padding-top: ${e=>d.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${e=>d.paddingTopBottom.valuePx(e.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;
+  }
+
+  &: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};
+    }
+  }
+`;exports.LabeledSingleSelectField=V;