"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[3086],{"./lib/view/fields/combo-box-v3/index.stories.tsx":(x,p,e)=>{e.r(p),e.d(p,{Basic:()=>v,__namedExportsOrder:()=>f,default:()=>u});var b=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(b),m=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"),i=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"),c=e("./lib/view/form/index.tsx"),n=e("./lib/view/fields/form-layout-block-item/index.tsx"),d=e("./lib/view/fields/combo-box-v3/index.tsx"),r=e("./lib/view/fields/watch-value.tsx"),a=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),s,t=`
    
    // @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 { ComboBoxV3, ComboBoxV3Props } from './index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/ComboBoxV3',\\n  component: ComboBoxV3,\\n} as Meta;\\n\\nconst Template: Story<ComboBoxV3Props> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"marital_status\\"\\n        label=\\"Marital Status\\"\\n        required\\n      >\\n        <ComboBoxV3 {...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: {\\n    dsId: '1',\\n    type: 'option',\\n    value: '--select--',\\n    label: '--Select--',\\n  },\\n  allOptions: [\\n    { dsId: '1', type: 'option', value: '--select--', label: '--Select--' },\\n    { dsId: '2', type: 'option', value: 'married', label: 'Married' },\\n    { dsId: '3', type: 'option', value: 'unmarried', label: 'Unmarried' },\\n    { dsId: '4', type: 'option', value: 'separated', label: 'Separated' },\\n  ],\\n  clearable: false,\\n  rules: {\\n    required: { value: true, message: 'Marital Status required' },\\n    validate: ({ value }: { value: string }) =>\\n      value !== '--select--' || 'Please select valid value',\\n  },\\n};\\n";
    // @ts-ignore
    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":41,"line":14},"endLoc":{"col":1,"line":28},"startBody":{"col":41,"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 { ComboBoxV3, ComboBoxV3Props } 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 { ComboBoxV3, ComboBoxV3Props } from './index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/ComboBoxV3',\\n  component: ComboBoxV3,\\n} as Meta;\\n\\nconst Template: Story<ComboBoxV3Props> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"marital_status\\"\\n        label=\\"Marital Status\\"\\n        required\\n      >\\n        <ComboBoxV3 {...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: {\\n    dsId: '1',\\n    type: 'option',\\n    value: '--select--',\\n    label: '--Select--',\\n  },\\n  allOptions: [\\n    { dsId: '1', type: 'option', value: '--select--', label: '--Select--' },\\n    { dsId: '2', type: 'option', value: 'married', label: 'Married' },\\n    { dsId: '3', type: 'option', value: 'unmarried', label: 'Unmarried' },\\n    { dsId: '4', type: 'option', value: 'separated', label: 'Separated' },\\n  ],\\n  clearable: false,\\n  rules: {\\n    required: { value: true, message: 'Marital Status required' },\\n    validate: ({ value }: { value: string }) =>\\n      value !== '--select--' || 'Please select valid value',\\n  },\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":41,"line":14},"endLoc":{"col":1,"line":28},"startBody":{"col":41,"line":14},"endBody":{"col":1,"line":28}}}},},
  title: 'Components/Form/Controls/ComboBoxV3',
  component: ComboBoxV3,
} as Meta;

const Template: Story<ComboBoxV3Props> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem
        inputID="marital_status"
        label="Marital Status"
        required
      >
        <ComboBoxV3 {...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: {
    dsId: '1',
    type: 'option',
    value: '--select--',
    label: '--Select--',
  },
  allOptions: [
    { dsId: '1', type: 'option', value: '--select--', label: '--Select--' },
    { dsId: '2', type: 'option', value: 'married', label: 'Married' },
    { dsId: '3', type: 'option', value: 'unmarried', label: 'Unmarried' },
    { dsId: '4', type: 'option', value: 'separated', label: 'Separated' },
  ],
  clearable: false,
  rules: {
    required: { value: true, message: 'Marital Status required' },
    validate: ({ value }: { value: string }) =>
      value !== '--select--' || 'Please select valid value',
  },
};
`,_={Basic:{startLoc:{col:41,line:22},endLoc:{col:1,line:36},startBody:{col:41,line:22},endBody:{col:1,line:36}}},t=`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 { ComboBoxV3, ComboBoxV3Props } from './index.js';
import { WatchValue } from '../watch-value.js';

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

const Template: Story<ComboBoxV3Props> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem
        inputID="marital_status"
        label="Marital Status"
        required
      >
        <ComboBoxV3 {...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: {
    dsId: '1',
    type: 'option',
    value: '--select--',
    label: '--Select--',
  },
  allOptions: [
    { dsId: '1', type: 'option', value: '--select--', label: '--Select--' },
    { dsId: '2', type: 'option', value: 'married', label: 'Married' },
    { dsId: '3', type: 'option', value: 'unmarried', label: 'Unmarried' },
    { dsId: '4', type: 'option', value: 'separated', label: 'Separated' },
  ],
  clearable: false,
  rules: {
    required: { value: true, message: 'Marital Status required' },
    validate: ({ value }: { value: string }) =>
      value !== '--select--' || 'Please select valid value',
  },
};
`,_={Basic:{startLoc:{col:41,line:14},endLoc:{col:1,line:28},startBody:{col:41,line:14},endBody:{col:1,line:28}}};const u={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 { ComboBoxV3, ComboBoxV3Props } from './index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/ComboBoxV3',\\n  component: ComboBoxV3,\\n} as Meta;\\n\\nconst Template: Story<ComboBoxV3Props> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"marital_status\\"\\n        label=\\"Marital Status\\"\\n        required\\n      >\\n        <ComboBoxV3 {...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: {\\n    dsId: '1',\\n    type: 'option',\\n    value: '--select--',\\n    label: '--Select--',\\n  },\\n  allOptions: [\\n    { dsId: '1', type: 'option', value: '--select--', label: '--Select--' },\\n    { dsId: '2', type: 'option', value: 'married', label: 'Married' },\\n    { dsId: '3', type: 'option', value: 'unmarried', label: 'Unmarried' },\\n    { dsId: '4', type: 'option', value: 'separated', label: 'Separated' },\\n  ],\\n  clearable: false,\\n  rules: {\\n    required: { value: true, message: 'Marital Status required' },\\n    validate: ({ value }: { value: string }) =>\\n      value !== '--select--' || 'Please select valid value',\\n  },\\n};\\n";
    // @ts-ignore
    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":41,"line":14},"endLoc":{"col":1,"line":28},"startBody":{"col":41,"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 { ComboBoxV3, ComboBoxV3Props } 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 { ComboBoxV3, ComboBoxV3Props } from './index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/ComboBoxV3',\\n  component: ComboBoxV3,\\n} as Meta;\\n\\nconst Template: Story<ComboBoxV3Props> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"marital_status\\"\\n        label=\\"Marital Status\\"\\n        required\\n      >\\n        <ComboBoxV3 {...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: {\\n    dsId: '1',\\n    type: 'option',\\n    value: '--select--',\\n    label: '--Select--',\\n  },\\n  allOptions: [\\n    { dsId: '1', type: 'option', value: '--select--', label: '--Select--' },\\n    { dsId: '2', type: 'option', value: 'married', label: 'Married' },\\n    { dsId: '3', type: 'option', value: 'unmarried', label: 'Unmarried' },\\n    { dsId: '4', type: 'option', value: 'separated', label: 'Separated' },\\n  ],\\n  clearable: false,\\n  rules: {\\n    required: { value: true, message: 'Marital Status required' },\\n    validate: ({ value }: { value: string }) =>\\n      value !== '--select--' || 'Please select valid value',\\n  },\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":41,"line":14},"endLoc":{"col":1,"line":28},"startBody":{"col":41,"line":14},"endBody":{"col":1,"line":28}}}},},
  title: 'Components/Form/Controls/ComboBoxV3',
  component: ComboBoxV3,
} as Meta;

const Template: Story<ComboBoxV3Props> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem
        inputID="marital_status"
        label="Marital Status"
        required
      >
        <ComboBoxV3 {...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: {
    dsId: '1',
    type: 'option',
    value: '--select--',
    label: '--Select--',
  },
  allOptions: [
    { dsId: '1', type: 'option', value: '--select--', label: '--Select--' },
    { dsId: '2', type: 'option', value: 'married', label: 'Married' },
    { dsId: '3', type: 'option', value: 'unmarried', label: 'Unmarried' },
    { dsId: '4', type: 'option', value: 'separated', label: 'Separated' },
  ],
  clearable: false,
  rules: {
    required: { value: true, message: 'Marital Status required' },
    validate: ({ value }: { value: string }) =>
      value !== '--select--' || 'Please select valid value',
  },
};
`,locationsMap:{basic:{startLoc:{col:41,line:22},endLoc:{col:1,line:36},startBody:{col:41,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 { ComboBoxV3, ComboBoxV3Props } from './index.js';
import { WatchValue } from '../watch-value.js';

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

const Template: Story<ComboBoxV3Props> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem
        inputID="marital_status"
        label="Marital Status"
        required
      >
        <ComboBoxV3 {...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: {
    dsId: '1',
    type: 'option',
    value: '--select--',
    label: '--Select--',
  },
  allOptions: [
    { dsId: '1', type: 'option', value: '--select--', label: '--Select--' },
    { dsId: '2', type: 'option', value: 'married', label: 'Married' },
    { dsId: '3', type: 'option', value: 'unmarried', label: 'Unmarried' },
    { dsId: '4', type: 'option', value: 'separated', label: 'Separated' },
  ],
  clearable: false,
  rules: {
    required: { value: true, message: 'Marital Status required' },
    validate: ({ value }: { value: string }) =>
      value !== '--select--' || 'Please select valid value',
  },
};
`,locationsMap:{basic:{startLoc:{col:41,line:14},endLoc:{col:1,line:28},startBody:{col:41,line:14},endBody:{col:1,line:28}}}}},title:"Components/Form/Controls/ComboBoxV3",component:d.N};var l=function(B){return o()(m.Ay,{p:"m"},void 0,o()(c.l,{},void 0,o()(n.B,{inputID:"marital_status",label:"Marital Status",required:!0},void 0,(0,a.jsx)(d.N,Object.assign({},B))),s||(s=o()(i.e,{},void 0,"Submit")),(0,a.jsx)(r.n,Object.assign({label:"Marital Status"},B))))};l.displayName="Template";var v=l.bind({});v.args={id:"marital_status",name:"marital_status",defaultValue:{dsId:"1",type:"option",value:"--select--",label:"--Select--"},allOptions:[{dsId:"1",type:"option",value:"--select--",label:"--Select--"},{dsId:"2",type:"option",value:"married",label:"Married"},{dsId:"3",type:"option",value:"unmarried",label:"Unmarried"},{dsId:"4",type:"option",value:"separated",label:"Separated"}],clearable:!1,rules:{required:{value:!0,message:"Marital Status required"},validate:function(B){var y=B.value;return y!=="--select--"||"Please select valid value"}}};var f=["Basic"]},"./lib/view/fields/combo-box-v3/index.tsx":(x,p,e)=>{e.d(p,{N:()=>s});var b=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(b),m=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),i=e.n(m),c=e("./node_modules/.pnpm/@elliemae+ds-form-combobox@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-combobox/dist/esm/ComboBox.js"),n=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),d=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),r=["name","defaultValue","rules","clearable","filteredOptions"],a=["onChange","value"],s=function(t){var _=t.name,u=t.defaultValue,l=u===void 0?null:u,v=t.rules,f=v===void 0?{}:v,B=t.clearable,y=B===void 0?!0:B,I=t.filteredOptions,C=I===void 0?null:I,V=i()(t,r);return o()(n.xI,{name:_,rules:f,defaultValue:l,render:function(M){var S=M.field,D=S.onChange,P=S.value,h=i()(S,a),O=M.fieldState.error;return(0,d.jsx)(c.NB,Object.assign({},h,V,{hasError:!!O,filteredOptions:C,selectedValues:P,onChange:D,isNonClearable:!y}))}})};s.displayName="ComboBoxV3"},"./lib/view/fields/form-layout-block-item/index.tsx":(x,p,e)=>{e.d(p,{B:()=>d});var b=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),o=e.n(b),m=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"),i=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),c=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),n=["inputID","label"],d=function(r){var a=r.inputID,s=r.label,t=o()(r,n),_=(0,i.lN)({name:a}),u=_.errors,l=(0,i.Jt)(u,a),v=!!l,f=l?.message;return(0,c.jsx)(m.U,Object.assign({inputID:a,label:s,hasError:v,validationMessage:f},t))};d.displayName="FormLayoutBlockItem"},"./lib/view/fields/watch-value.tsx":(x,p,e)=>{e.d(p,{n:()=>a});var b=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(b),m=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"),i=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"),c=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),n,d=m.Ay.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),r=m.Ay.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),a=function(s){var t=s.name,_=s.label,u=(0,c.xW)(),l=u.watch,v=l(t,!1)||"";return o()(i.Ay,{},void 0,o()(d,{},void 0,n||(n=o()("h4",{},void 0,"Form Data:")),o()(r,{},void 0,o()("div",{},void 0,_," : ",o()("strong",{},void 0,JSON.stringify(v))))))};a.displayName="WatchValue"},"./lib/view/form/index.tsx":(x,p,e)=>{e.d(p,{l:()=>c});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"),m=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),i=b.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),c=function(n){var d=n.classname,r=n.reactHookFormProps,a=r===void 0?{mode:"onBlur"}:r,s=n.children,t=n.onSubmit,_=(0,o.mN)(a),u={};t&&(u.onSubmit=_.handleSubmit(t));var l=Object.assign(_,{formProps:a});return(0,m.jsx)(o.Op,Object.assign({},l,{children:(0,m.jsx)(i,Object.assign({className:d},u,{children:s}))}))};c.displayName="Form"}}]);
