"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[6729],{"./lib/view/fields/form-layout-block-item/index.tsx":(B,d,n)=>{n.d(d,{B:()=>u});var k=n("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),e=n.n(k),l=n("./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"),p=n("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),c=n("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),o=["inputID","label"],u=function(a){var t=a.inputID,s=a.label,b=e()(a,o),M=(0,p.lN)({name:t}),m=M.errors,i=(0,p.Jt)(m,t),y=!!i,_=i?.message;return(0,c.jsx)(l.U,Object.assign({inputID:t,label:s,hasError:y,validationMessage:_},b))};u.displayName="FormLayoutBlockItem"},"./lib/view/fields/input-mask/index.stories.tsx":(B,d,n)=>{n.r(d),n.d(d,{Basic:()=>T,__namedExportsOrder:()=>j,default:()=>D});var k=n("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),e=n.n(k),l=n("./node_modules/.pnpm/@elliemae+ds-grid@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),p=n("./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=n("./lib/view/form/index.tsx"),o=n("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),u=n.n(o),a=n("./node_modules/.pnpm/@elliemae+ds-legacy-form@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-form/dist/esm/InputMask/DSInputMask.js"),t=n("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),s=n("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),b=["name","defaultValue","rules","onChange","onBlur"],M=["onChange","onBlur"],m=function(r){var O=r.name,S=r.defaultValue,F=S===void 0?"":S,E=r.rules,V=E===void 0?{}:E,L=r.onChange,P=r.onBlur,C=u()(r,b);return e()(t.xI,{name:O,rules:V,defaultValue:F,render:function(A){var g=A.field,w=g.onChange,W=g.onBlur,R=u()(g,M);return(0,s.jsx)(a.e8,Object.assign({},C,R,{onChange:function(f){w(f),L&&L(f)},onBlur:function(f){W(),P&&P(f)}}))}})};m.displayName="InputMask";var i=n("./node_modules/.pnpm/@elliemae+ds-legacy-form@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-form/dist/esm/InputMask/MaskTypes.js"),y=n("./lib/view/fields/form-layout-block-item/index.tsx"),_=n("./lib/view/fields/watch-value.tsx"),v,h=`
    
    // @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 { InputMask, InputMaskProps, MASK_TYPES } from './index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/InputMask',\\n  component: InputMask,\\n} as Meta;\\n\\nconst Template: Story<InputMaskProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"otp\\"\\n        label=\\"Enter One time passcode\\"\\n        required\\n      >\\n        <InputMask {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Enter One time passcode\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\ntype MaskTypes = {\\n  NUMBER: (arg: {\\n    decimalLimit: number;\\n    integerLimit: number;\\n    allowDecimal: boolean;\\n  }) => (n: number) => string;\\n};\\n\\nBasic.args = {\\n  name: 'otp',\\n  id: 'otp',\\n  mask: <T,>(number: T) =>\\n    (MASK_TYPES as MaskTypes).NUMBER({\\n      decimalLimit: 2,\\n      integerLimit: 8,\\n      allowDecimal: true,\\n    })(number as unknown as number) as unknown as T,\\n  rules: {\\n    required: { value: true, message: 'Please enter OTP' },\\n  },\\n};\\n";
    // @ts-ignore
    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":40,"line":14},"endLoc":{"col":1,"line":28},"startBody":{"col":40,"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 { InputMask, InputMaskProps, MASK_TYPES } from './index.js';
import { FormLayoutBlockItem } from '../form-layout-block-item/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 { InputMask, InputMaskProps, MASK_TYPES } from './index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/InputMask',\\n  component: InputMask,\\n} as Meta;\\n\\nconst Template: Story<InputMaskProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"otp\\"\\n        label=\\"Enter One time passcode\\"\\n        required\\n      >\\n        <InputMask {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Enter One time passcode\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\ntype MaskTypes = {\\n  NUMBER: (arg: {\\n    decimalLimit: number;\\n    integerLimit: number;\\n    allowDecimal: boolean;\\n  }) => (n: number) => string;\\n};\\n\\nBasic.args = {\\n  name: 'otp',\\n  id: 'otp',\\n  mask: <T,>(number: T) =>\\n    (MASK_TYPES as MaskTypes).NUMBER({\\n      decimalLimit: 2,\\n      integerLimit: 8,\\n      allowDecimal: true,\\n    })(number as unknown as number) as unknown as T,\\n  rules: {\\n    required: { value: true, message: 'Please enter OTP' },\\n  },\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":40,"line":14},"endLoc":{"col":1,"line":28},"startBody":{"col":40,"line":14},"endBody":{"col":1,"line":28}}}},},
  title: 'Components/Form/Controls/InputMask',
  component: InputMask,
} as Meta;

const Template: Story<InputMaskProps> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem
        inputID="otp"
        label="Enter One time passcode"
        required
      >
        <InputMask {...args} />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="Enter One time passcode" {...args} />
    </Form>
  </Grid>
);

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

type MaskTypes = {
  NUMBER: (arg: {
    decimalLimit: number;
    integerLimit: number;
    allowDecimal: boolean;
  }) => (n: number) => string;
};

Basic.args = {
  name: 'otp',
  id: 'otp',
  mask: <T,>(number: T) =>
    (MASK_TYPES as MaskTypes).NUMBER({
      decimalLimit: 2,
      integerLimit: 8,
      allowDecimal: true,
    })(number as unknown as number) as unknown as T,
  rules: {
    required: { value: true, message: 'Please enter OTP' },
  },
};
`,x={Basic:{startLoc:{col:40,line:22},endLoc:{col:1,line:36},startBody:{col:40,line:22},endBody:{col:1,line:36}}},h=`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 { InputMask, InputMaskProps, MASK_TYPES } from './index.js';
import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
import { WatchValue } from '../watch-value.js';

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

const Template: Story<InputMaskProps> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem
        inputID="otp"
        label="Enter One time passcode"
        required
      >
        <InputMask {...args} />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="Enter One time passcode" {...args} />
    </Form>
  </Grid>
);

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

type MaskTypes = {
  NUMBER: (arg: {
    decimalLimit: number;
    integerLimit: number;
    allowDecimal: boolean;
  }) => (n: number) => string;
};

Basic.args = {
  name: 'otp',
  id: 'otp',
  mask: <T,>(number: T) =>
    (MASK_TYPES as MaskTypes).NUMBER({
      decimalLimit: 2,
      integerLimit: 8,
      allowDecimal: true,
    })(number as unknown as number) as unknown as T,
  rules: {
    required: { value: true, message: 'Please enter OTP' },
  },
};
`,x={Basic:{startLoc:{col:40,line:14},endLoc:{col:1,line:28},startBody:{col:40,line:14},endBody:{col:1,line:28}}};const D={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 { InputMask, InputMaskProps, MASK_TYPES } from './index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/InputMask',\\n  component: InputMask,\\n} as Meta;\\n\\nconst Template: Story<InputMaskProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"otp\\"\\n        label=\\"Enter One time passcode\\"\\n        required\\n      >\\n        <InputMask {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Enter One time passcode\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\ntype MaskTypes = {\\n  NUMBER: (arg: {\\n    decimalLimit: number;\\n    integerLimit: number;\\n    allowDecimal: boolean;\\n  }) => (n: number) => string;\\n};\\n\\nBasic.args = {\\n  name: 'otp',\\n  id: 'otp',\\n  mask: <T,>(number: T) =>\\n    (MASK_TYPES as MaskTypes).NUMBER({\\n      decimalLimit: 2,\\n      integerLimit: 8,\\n      allowDecimal: true,\\n    })(number as unknown as number) as unknown as T,\\n  rules: {\\n    required: { value: true, message: 'Please enter OTP' },\\n  },\\n};\\n";
    // @ts-ignore
    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":40,"line":14},"endLoc":{"col":1,"line":28},"startBody":{"col":40,"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 { InputMask, InputMaskProps, MASK_TYPES } from './index.js';
import { FormLayoutBlockItem } from '../form-layout-block-item/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 { InputMask, InputMaskProps, MASK_TYPES } from './index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/InputMask',\\n  component: InputMask,\\n} as Meta;\\n\\nconst Template: Story<InputMaskProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"otp\\"\\n        label=\\"Enter One time passcode\\"\\n        required\\n      >\\n        <InputMask {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Enter One time passcode\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\ntype MaskTypes = {\\n  NUMBER: (arg: {\\n    decimalLimit: number;\\n    integerLimit: number;\\n    allowDecimal: boolean;\\n  }) => (n: number) => string;\\n};\\n\\nBasic.args = {\\n  name: 'otp',\\n  id: 'otp',\\n  mask: <T,>(number: T) =>\\n    (MASK_TYPES as MaskTypes).NUMBER({\\n      decimalLimit: 2,\\n      integerLimit: 8,\\n      allowDecimal: true,\\n    })(number as unknown as number) as unknown as T,\\n  rules: {\\n    required: { value: true, message: 'Please enter OTP' },\\n  },\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":40,"line":14},"endLoc":{"col":1,"line":28},"startBody":{"col":40,"line":14},"endBody":{"col":1,"line":28}}}},},
  title: 'Components/Form/Controls/InputMask',
  component: InputMask,
} as Meta;

const Template: Story<InputMaskProps> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem
        inputID="otp"
        label="Enter One time passcode"
        required
      >
        <InputMask {...args} />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="Enter One time passcode" {...args} />
    </Form>
  </Grid>
);

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

type MaskTypes = {
  NUMBER: (arg: {
    decimalLimit: number;
    integerLimit: number;
    allowDecimal: boolean;
  }) => (n: number) => string;
};

Basic.args = {
  name: 'otp',
  id: 'otp',
  mask: <T,>(number: T) =>
    (MASK_TYPES as MaskTypes).NUMBER({
      decimalLimit: 2,
      integerLimit: 8,
      allowDecimal: true,
    })(number as unknown as number) as unknown as T,
  rules: {
    required: { value: true, message: 'Please enter OTP' },
  },
};
`,locationsMap:{basic:{startLoc:{col:40,line:22},endLoc:{col:1,line:36},startBody:{col:40,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 { InputMask, InputMaskProps, MASK_TYPES } from './index.js';
import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
import { WatchValue } from '../watch-value.js';

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

const Template: Story<InputMaskProps> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem
        inputID="otp"
        label="Enter One time passcode"
        required
      >
        <InputMask {...args} />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="Enter One time passcode" {...args} />
    </Form>
  </Grid>
);

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

type MaskTypes = {
  NUMBER: (arg: {
    decimalLimit: number;
    integerLimit: number;
    allowDecimal: boolean;
  }) => (n: number) => string;
};

Basic.args = {
  name: 'otp',
  id: 'otp',
  mask: <T,>(number: T) =>
    (MASK_TYPES as MaskTypes).NUMBER({
      decimalLimit: 2,
      integerLimit: 8,
      allowDecimal: true,
    })(number as unknown as number) as unknown as T,
  rules: {
    required: { value: true, message: 'Please enter OTP' },
  },
};
`,locationsMap:{basic:{startLoc:{col:40,line:14},endLoc:{col:1,line:28},startBody:{col:40,line:14},endBody:{col:1,line:28}}}}},title:"Components/Form/Controls/InputMask",component:m};var I=function(r){return e()(l.Ay,{p:"m"},void 0,e()(c.l,{},void 0,e()(y.B,{inputID:"otp",label:"Enter One time passcode",required:!0},void 0,(0,s.jsx)(m,Object.assign({},r))),v||(v=e()(p.e,{},void 0,"Submit")),(0,s.jsx)(_.n,Object.assign({label:"Enter One time passcode"},r))))};I.displayName="Template";var T=I.bind({});T.args={name:"otp",id:"otp",mask:function(r){return i.v.NUMBER({decimalLimit:2,integerLimit:8,allowDecimal:!0})(r)},rules:{required:{value:!0,message:"Please enter OTP"}}};var j=["Basic"]},"./lib/view/fields/watch-value.tsx":(B,d,n)=>{n.d(d,{n:()=>t});var k=n("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),e=n.n(k),l=n("./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"),p=n("./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=n("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),o,u=l.Ay.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),a=l.Ay.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),t=function(s){var b=s.name,M=s.label,m=(0,c.xW)(),i=m.watch,y=i(b,!1)||"";return e()(p.Ay,{},void 0,e()(u,{},void 0,o||(o=e()("h4",{},void 0,"Form Data:")),e()(a,{},void 0,e()("div",{},void 0,M," : ",e()("strong",{},void 0,JSON.stringify(y))))))};t.displayName="WatchValue"},"./lib/view/form/index.tsx":(B,d,n)=>{n.d(d,{l:()=>c});var k=n("./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"),e=n("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),l=n("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),p=k.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),c=function(o){var u=o.classname,a=o.reactHookFormProps,t=a===void 0?{mode:"onBlur"}:a,s=o.children,b=o.onSubmit,M=(0,e.mN)(t),m={};b&&(m.onSubmit=M.handleSubmit(b));var i=Object.assign(M,{formProps:t});return(0,l.jsx)(e.Op,Object.assign({},i,{children:(0,l.jsx)(p,Object.assign({className:u},m,{children:s}))}))};c.displayName="Form"}}]);
