@zeniai/web-components 3.16.93 → 3.16.94

package/dist/LabeledNameField-Cv8P2AXQ.cjs

@@ -0,0 +1,141 @@
+"use strict";const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),l=require("@emotion/styled"),t=require("./index-DbeDc75y.cjs"),k=require("react");function N({name:e,placeHolder:n,autoComplete:r="off",defaultValue:g,isDisabled:p,showFullNameError:x,style:i,registerOptions:a}){const[h,d]=k.useState(!1),{register:c,getValues:b,formState:{errors:f}}=o.useFormContext(),u=p==="disabled"||p==="readonly",y=Object.assign({},a),$=b(e),E=[$?.firstName,$?.lastName].join(" ").trim(),R=o.has(f,e)&&o.get(f,`${e}.firstName`)!=null,S=o.has(f,e)&&o.get(f,`${e}.lastName`)!=null,m=!(x===!0?R||S:!1)&&h===!1;return o.jsxRuntimeExports.jsx(o.ClickAwayListener,{onClickAway:()=>u===!1&&d(!1),children:o.jsxRuntimeExports.jsx(z,{style:i,isDisabled:u,tabIndex:u?void 0:0,onClick:()=>u===!1&&d(!0),children:o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[E.length>0?o.jsxRuntimeExports.jsx(w,{className:"name-field",isVisible:m,children:E}):o.jsxRuntimeExports.jsx(w,{className:"name-field name-placeholder",isVisible:m,children:n?.name}),o.jsxRuntimeExports.jsx(j,{placeholder:n?.firstName,type:void 0,isError:R,style:{...i,maxWidth:"100%"},disabled:u,...c(`${e}.firstName`,y),id:e,defaultValue:g?.firstName,autoComplete:r,isVisible:!m}),m?null:o.jsxRuntimeExports.jsx(L,{}),o.jsxRuntimeExports.jsx(j,{placeholder:n?.lastName,type:void 0,isError:S,style:{...i,maxWidth:"100%"},disabled:u,...c(`${e}.lastName`,y),id:e,defaultValue:g?.lastName,autoComplete:r,isVisible:!m})]})})})}const z=l.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.textStyles.standardRegular.css};
+  }
+`,L=l.div`
+  background-color: ${e=>e.theme.colors.grey5};
+  min-width: ${t.Space.sp3};
+`,w=l(t.StandardRegularSp)`
+  display: ${e=>e.isVisible?"flex":"none"};
+  padding: 0 ${t.Space.sp3};
+  border-radius: ${t.Space.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};
+  }
+`,j=l(t.StandardRegularInput)`
+  display: ${e=>e.isVisible?"flex":"none"};
+  width: 100%;
+  text-align: right;
+  border-radius: ${t.Space.sp1};
+  padding: 0 ${t.Space.sp3};
+  border-width: ${t.Space.sp0};
+  outline-width: ${t.Space.sp0};
+  color: ${e=>e.isError?t.Colors.important:e.theme.colors.primary};
+  background-color: inherit;
+  &:disabled {
+    background-color: ${e=>e.theme.colors.grey5};
+  }
+  ::placeholder {
+    color: ${e=>e.isError?t.Colors.important:e.theme.colors.grey1};
+  }
+  &:focus {
+    outline: none;
+  }
+`,s={width:new t.ResponsiveSized(343,580,726),height:new t.ResponsiveSized(t.sp[6],t.sp[6]),controlHeight:new t.ResponsiveSized(t.sp[6],t.sp[6]),paddingTopBottom:new t.ResponsiveSized(t.sp[2],t.sp[2]),marginTop:new t.ResponsiveSized(t.sp[2],t.sp[2]),marginBottom:new t.ResponsiveSized(t.sp[2],t.sp[2]),marginRight:new t.ResponsiveSized(t.sp[2],t.sp[2]),labelMarginLeft:new t.ResponsiveSized(t.sp[3],t.sp[4]),labelMarginRight:new t.ResponsiveSized(t.sp[3],t.sp[4]),labelMarginTop:new t.ResponsiveSized(t.sp[2],t.sp[2])},C={infoLabel:new t.ResponsiveSizedStyle("extraSmallRegular","smallRegular")};function V({isDisabled:e,label:n,nameField:r,style:g,errorInfoLabel:p,showAdditionalInfoLabel:x}){const i=t.useWindowSizeContext(),{formState:{errors:a}}=o.useFormContext(),h=o.has(a,r.name)&&o.get(a,`${r.name}.firstName`)!=null,d=o.has(a,r.name)&&o.get(a,`${r.name}.lastName`)!=null,c=r.showFullNameError===!0?h||d:!1,b=h||d||c;return o.jsxRuntimeExports.jsxs(F,{size:i,style:g,isDisabled:e!=null,isFirstNameError:h,isLastNameError:d,children:[o.jsxRuntimeExports.jsx(t.Label,{isDisabled:e,label:n.label,style:{marginLeft:s.labelMarginLeft.value(i),marginRight:s.labelMarginRight.value(i),marginTop:s.labelMarginTop.value(i),width:n.width??"auto"}}),o.jsxRuntimeExports.jsxs(I,{labelWidth:n.width,children:[o.jsxRuntimeExports.jsx(N,{...r,isDisabled:e,style:{flexGrow:1,height:s.controlHeight.value(i)}}),(x!=null||c)&&o.jsxRuntimeExports.jsx(v,{size:i,hasError:c,children:x?.label}),b?o.jsxRuntimeExports.jsx(v,{size:i,hasError:b,children:p}):null]})]})}const F=l.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?t.Colors.importantLight:e.theme.colors.background};
+    }
+
+    input:nth-of-type(2) {
+      background-color: ${e=>e.isLastNameError?t.Colors.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?t.Colors.importantLight:e.theme.colors.background};
+  }
+
+  input:nth-of-type(2) {
+    background-color: ${e=>e.isLastNameError?t.Colors.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?t.Colors.importantLight:e.theme.colors.background};
+    }
+
+    input:nth-of-type(2) {
+      background-color: ${e=>e.isLastNameError?t.Colors.importantLight:e.theme.colors.background};
+    }
+  }
+`,v=l.label`
+  color: ${e=>e.hasError===!0?t.Colors.important:e.additionalInfoTextColor!=null?e.additionalInfoTextColor:e.theme.colors.grey1};
+  width: auto;
+  ${e=>`${C.infoLabel.style(e.size)}`};
+  padding-right: ${t.Space.sp3};
+  text-align: right;
+`,I=l.div`
+  display: flex;
+  width: ${e=>e.labelWidth!=null?`calc(100% - ${e.labelWidth}px)`:"auto"};
+  justify-content: flex-end;
+  flex-direction: column;
+  position: relative;
+`;exports.LabeledNameField=V;

package/dist/LabeledNameField-CxddpZZo.js

@@ -0,0 +1,293 @@
+import { d as C, m as k, X as N, j as r, C as I } from "./vendor-.pnpm-B2klaOGU.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-B9wG56Sb.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
+};