"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[6184],{"./lib/view/fields/combo-box/index.stories.tsx":(x,i,e)=>{e.r(i),e.d(i,{Basic:()=>y,__namedExportsOrder:()=>I,default:()=>P});var B=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(B),s=e("./node_modules/.pnpm/@elliemae+ds-grid@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),d=e("./node_modules/.pnpm/@elliemae+ds-legacy-button-v2@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-button-v2/dist/esm/DSButtonV2.js"),u=e("./lib/view/form/index.tsx"),a=e("./lib/view/fields/form-layout-block-item/index.tsx"),c=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),n=e.n(c),l=e("./node_modules/.pnpm/@elliemae+ds-legacy-common@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-common/dist/esm/ComboBox/v2/Combobox.js"),p=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),r=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),b=["name","defaultValue","rules"],v=["onChange"],t=function(m){var L=m.name,C=m.defaultValue,V=C===void 0?"":C,g=m.rules,k=g===void 0?{}:g,O=n()(m,b);return o()(p.xI,{name:L,rules:k,defaultValue:V,render:function(E){var M=E.field,T=M.onChange,W=n()(M,v);return(0,r.jsx)(l.vw,Object.assign({},O,W,{onChange:function(h){var G=h||{},j=G.value,A=j===void 0?h:j;T(A)}}))}})};t.displayName="ComboBox";var f=e("./lib/view/fields/watch-value.tsx"),_,F=`
    
    // @ts-nocheck
    // @ts-ignore
    var __STORY__ = "import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { Form } from '../../form/index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { ComboBox, ComboBoxProps } from './index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/ComboBox',\\n  component: ComboBox,\\n} as Meta;\\n\\nconst Template: Story<ComboBoxProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"marital_status\\"\\n        label=\\"Marital Status\\"\\n        required\\n      >\\n        <ComboBox {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Marital Status\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'marital_status',\\n  name: 'marital_status',\\n  defaultValue: '--select--',\\n  options: [\\n    { value: '--select--', label: '--Select--' },\\n    { value: 'married', label: 'Married' },\\n    { value: 'unmarried', label: 'Unmarried' },\\n    { value: 'separated', label: 'Separated' },\\n  ],\\n  clearable: false,\\n  rules: {\\n    required: { value: true, message: 'Marital Status required' },\\n    validate: (value: string) =>\\n      value !== '--select--' || 'Please select valid value',\\n  },\\n};\\n";
    // @ts-ignore
    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":39,"line":14},"endLoc":{"col":1,"line":28},"startBody":{"col":39,"line":14},"endBody":{"col":1,"line":28}}};
    
import { Story, Meta } from '@storybook/react';
import { Grid } from '@elliemae/ds-grid';
import { DSButtonV2 } from '@elliemae/ds-button';
import { Form } from '../../form/index.js';
import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
import { ComboBox, ComboBoxProps } from './index.js';
import { WatchValue } from '../watch-value.js';

export default {parameters: {"storySource":{"source":"import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { Form } from '../../form/index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { ComboBox, ComboBoxProps } from './index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/ComboBox',\\n  component: ComboBox,\\n} as Meta;\\n\\nconst Template: Story<ComboBoxProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"marital_status\\"\\n        label=\\"Marital Status\\"\\n        required\\n      >\\n        <ComboBox {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Marital Status\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'marital_status',\\n  name: 'marital_status',\\n  defaultValue: '--select--',\\n  options: [\\n    { value: '--select--', label: '--Select--' },\\n    { value: 'married', label: 'Married' },\\n    { value: 'unmarried', label: 'Unmarried' },\\n    { value: 'separated', label: 'Separated' },\\n  ],\\n  clearable: false,\\n  rules: {\\n    required: { value: true, message: 'Marital Status required' },\\n    validate: (value: string) =>\\n      value !== '--select--' || 'Please select valid value',\\n  },\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":39,"line":14},"endLoc":{"col":1,"line":28},"startBody":{"col":39,"line":14},"endBody":{"col":1,"line":28}}}},},
  title: 'Components/Form/Controls/ComboBox',
  component: ComboBox,
} as Meta;

const Template: Story<ComboBoxProps> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem
        inputID="marital_status"
        label="Marital Status"
        required
      >
        <ComboBox {...args} />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="Marital Status" {...args} />
    </Form>
  </Grid>
);

export const Basic = Template.bind({});

Basic.args = {
  id: 'marital_status',
  name: 'marital_status',
  defaultValue: '--select--',
  options: [
    { value: '--select--', label: '--Select--' },
    { value: 'married', label: 'Married' },
    { value: 'unmarried', label: 'Unmarried' },
    { value: 'separated', label: 'Separated' },
  ],
  clearable: false,
  rules: {
    required: { value: true, message: 'Marital Status required' },
    validate: (value: string) =>
      value !== '--select--' || 'Please select valid value',
  },
};
`,D={Basic:{startLoc:{col:39,line:22},endLoc:{col:1,line:36},startBody:{col:39,line:22},endBody:{col:1,line:36}}},F=`import { Story, Meta } from '@storybook/react';
import { Grid } from '@elliemae/ds-grid';
import { DSButtonV2 } from '@elliemae/ds-button';
import { Form } from '../../form/index.js';
import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
import { ComboBox, ComboBoxProps } from './index.js';
import { WatchValue } from '../watch-value.js';

export default {
  title: 'Components/Form/Controls/ComboBox',
  component: ComboBox,
} as Meta;

const Template: Story<ComboBoxProps> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem
        inputID="marital_status"
        label="Marital Status"
        required
      >
        <ComboBox {...args} />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="Marital Status" {...args} />
    </Form>
  </Grid>
);

export const Basic = Template.bind({});

Basic.args = {
  id: 'marital_status',
  name: 'marital_status',
  defaultValue: '--select--',
  options: [
    { value: '--select--', label: '--Select--' },
    { value: 'married', label: 'Married' },
    { value: 'unmarried', label: 'Unmarried' },
    { value: 'separated', label: 'Separated' },
  ],
  clearable: false,
  rules: {
    required: { value: true, message: 'Marital Status required' },
    validate: (value: string) =>
      value !== '--select--' || 'Please select valid value',
  },
};
`,D={Basic:{startLoc:{col:39,line:14},endLoc:{col:1,line:28},startBody:{col:39,line:14},endBody:{col:1,line:28}}};const P={parameters:{storySource:{source:`
    
    // @ts-nocheck
    // @ts-ignore
    var __STORY__ = "import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { Form } from '../../form/index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { ComboBox, ComboBoxProps } from './index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/ComboBox',\\n  component: ComboBox,\\n} as Meta;\\n\\nconst Template: Story<ComboBoxProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"marital_status\\"\\n        label=\\"Marital Status\\"\\n        required\\n      >\\n        <ComboBox {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Marital Status\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'marital_status',\\n  name: 'marital_status',\\n  defaultValue: '--select--',\\n  options: [\\n    { value: '--select--', label: '--Select--' },\\n    { value: 'married', label: 'Married' },\\n    { value: 'unmarried', label: 'Unmarried' },\\n    { value: 'separated', label: 'Separated' },\\n  ],\\n  clearable: false,\\n  rules: {\\n    required: { value: true, message: 'Marital Status required' },\\n    validate: (value: string) =>\\n      value !== '--select--' || 'Please select valid value',\\n  },\\n};\\n";
    // @ts-ignore
    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":39,"line":14},"endLoc":{"col":1,"line":28},"startBody":{"col":39,"line":14},"endBody":{"col":1,"line":28}}};
    
import { Story, Meta } from '@storybook/react';
import { Grid } from '@elliemae/ds-grid';
import { DSButtonV2 } from '@elliemae/ds-button';
import { Form } from '../../form/index.js';
import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
import { ComboBox, ComboBoxProps } from './index.js';
import { WatchValue } from '../watch-value.js';

export default {parameters: {"storySource":{"source":"import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { Form } from '../../form/index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { ComboBox, ComboBoxProps } from './index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/ComboBox',\\n  component: ComboBox,\\n} as Meta;\\n\\nconst Template: Story<ComboBoxProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"marital_status\\"\\n        label=\\"Marital Status\\"\\n        required\\n      >\\n        <ComboBox {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Marital Status\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'marital_status',\\n  name: 'marital_status',\\n  defaultValue: '--select--',\\n  options: [\\n    { value: '--select--', label: '--Select--' },\\n    { value: 'married', label: 'Married' },\\n    { value: 'unmarried', label: 'Unmarried' },\\n    { value: 'separated', label: 'Separated' },\\n  ],\\n  clearable: false,\\n  rules: {\\n    required: { value: true, message: 'Marital Status required' },\\n    validate: (value: string) =>\\n      value !== '--select--' || 'Please select valid value',\\n  },\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":39,"line":14},"endLoc":{"col":1,"line":28},"startBody":{"col":39,"line":14},"endBody":{"col":1,"line":28}}}},},
  title: 'Components/Form/Controls/ComboBox',
  component: ComboBox,
} as Meta;

const Template: Story<ComboBoxProps> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem
        inputID="marital_status"
        label="Marital Status"
        required
      >
        <ComboBox {...args} />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="Marital Status" {...args} />
    </Form>
  </Grid>
);

export const Basic = Template.bind({});

Basic.args = {
  id: 'marital_status',
  name: 'marital_status',
  defaultValue: '--select--',
  options: [
    { value: '--select--', label: '--Select--' },
    { value: 'married', label: 'Married' },
    { value: 'unmarried', label: 'Unmarried' },
    { value: 'separated', label: 'Separated' },
  ],
  clearable: false,
  rules: {
    required: { value: true, message: 'Marital Status required' },
    validate: (value: string) =>
      value !== '--select--' || 'Please select valid value',
  },
};
`,locationsMap:{basic:{startLoc:{col:39,line:22},endLoc:{col:1,line:36},startBody:{col:39,line:22},endBody:{col:1,line:36}}}},storySource:{source:`import { Story, Meta } from '@storybook/react';
import { Grid } from '@elliemae/ds-grid';
import { DSButtonV2 } from '@elliemae/ds-button';
import { Form } from '../../form/index.js';
import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
import { ComboBox, ComboBoxProps } from './index.js';
import { WatchValue } from '../watch-value.js';

export default {
  title: 'Components/Form/Controls/ComboBox',
  component: ComboBox,
} as Meta;

const Template: Story<ComboBoxProps> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem
        inputID="marital_status"
        label="Marital Status"
        required
      >
        <ComboBox {...args} />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="Marital Status" {...args} />
    </Form>
  </Grid>
);

export const Basic = Template.bind({});

Basic.args = {
  id: 'marital_status',
  name: 'marital_status',
  defaultValue: '--select--',
  options: [
    { value: '--select--', label: '--Select--' },
    { value: 'married', label: 'Married' },
    { value: 'unmarried', label: 'Unmarried' },
    { value: 'separated', label: 'Separated' },
  ],
  clearable: false,
  rules: {
    required: { value: true, message: 'Marital Status required' },
    validate: (value: string) =>
      value !== '--select--' || 'Please select valid value',
  },
};
`,locationsMap:{basic:{startLoc:{col:39,line:14},endLoc:{col:1,line:28},startBody:{col:39,line:14},endBody:{col:1,line:28}}}}},title:"Components/Form/Controls/ComboBox",component:t};var S=function(m){return o()(s.Ay,{p:"m"},void 0,o()(u.l,{},void 0,o()(a.B,{inputID:"marital_status",label:"Marital Status",required:!0},void 0,(0,r.jsx)(t,Object.assign({},m))),_||(_=o()(d.e,{},void 0,"Submit")),(0,r.jsx)(f.n,Object.assign({label:"Marital Status"},m))))};S.displayName="Template";var y=S.bind({});y.args={id:"marital_status",name:"marital_status",defaultValue:"--select--",options:[{value:"--select--",label:"--Select--"},{value:"married",label:"Married"},{value:"unmarried",label:"Unmarried"},{value:"separated",label:"Separated"}],clearable:!1,rules:{required:{value:!0,message:"Marital Status required"},validate:function(m){return m!=="--select--"||"Please select valid value"}}};var I=["Basic"]},"./lib/view/fields/form-layout-block-item/index.tsx":(x,i,e)=>{e.d(i,{B:()=>c});var B=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),o=e.n(B),s=e("./node_modules/.pnpm/@elliemae+ds-form-layout-blocks@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-layout-blocks/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js"),d=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),u=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),a=["inputID","label"],c=function(n){var l=n.inputID,p=n.label,r=o()(n,a),b=(0,d.lN)({name:l}),v=b.errors,t=(0,d.Jt)(v,l),f=!!t,_=t?.message;return(0,u.jsx)(s.U,Object.assign({inputID:l,label:p,hasError:f,validationMessage:_},r))};c.displayName="FormLayoutBlockItem"},"./lib/view/fields/watch-value.tsx":(x,i,e)=>{e.d(i,{n:()=>l});var B=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(B),s=e("./node_modules/.pnpm/styled-components@5.3.11_react-dom@18.3.1_react@18.3.1/node_modules/styled-components/dist/styled-components.browser.esm.js"),d=e("./node_modules/.pnpm/@elliemae+ds-grid@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),u=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),a,c=s.Ay.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),n=s.Ay.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),l=function(p){var r=p.name,b=p.label,v=(0,u.xW)(),t=v.watch,f=t(r,!1)||"";return o()(d.Ay,{},void 0,o()(c,{},void 0,a||(a=o()("h4",{},void 0,"Form Data:")),o()(n,{},void 0,o()("div",{},void 0,b," : ",o()("strong",{},void 0,JSON.stringify(f))))))};l.displayName="WatchValue"},"./lib/view/form/index.tsx":(x,i,e)=>{e.d(i,{l:()=>u});var B=e("./node_modules/.pnpm/styled-components@5.3.11_react-dom@18.3.1_react@18.3.1/node_modules/styled-components/dist/styled-components.browser.esm.js"),o=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),s=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),d=B.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),u=function(a){var c=a.classname,n=a.reactHookFormProps,l=n===void 0?{mode:"onBlur"}:n,p=a.children,r=a.onSubmit,b=(0,o.mN)(l),v={};r&&(v.onSubmit=b.handleSubmit(r));var t=Object.assign(b,{formProps:l});return(0,s.jsx)(o.Op,Object.assign({},t,{children:(0,s.jsx)(d,Object.assign({className:c},v,{children:p}))}))};u.displayName="Form"}}]);
