"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[8980],{"./lib/view/fields/form-layout-block-item/index.tsx":(W,M,e)=>{e.d(M,{B:()=>m});var s=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),a=e.n(s),x=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"),b=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),t=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),c=["inputID","label"],m=function(d){var i=d.inputID,k=d.label,g=a()(d,c),P=(0,b.lN)({name:i}),u=P.errors,f=(0,b.Jt)(u,i),T=!!f,v=f?.message;return(0,t.jsx)(x.U,Object.assign({inputID:i,label:k,hasError:T,validationMessage:v},g))};m.displayName="FormLayoutBlockItem"},"./lib/view/fields/masked-input-text/index.tsx":(W,M,e)=>{e.d(M,{B:()=>P});var s=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),a=e.n(s),x=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/slicedToArray.js"),b=e.n(x),t=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),c=e.n(t),m=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),d=e("./node_modules/.pnpm/@elliemae+ds-form-input-text@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-input-text/dist/esm/DSInputText.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"),k=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),g=["name","defaultValue","rules","useMask","maskOpts"],P=function(u){var f=u.name,T=u.defaultValue,v=T===void 0?"":T,C=u.rules,L=C===void 0?{}:C,Z=u.useMask,$=u.maskOpts,V=c()(u,g),Q=m.useState(v),q=b()(Q,2),ee=q[1],K=(0,i.xW)(),Y=K.setValue,te=m.useMemo(function(){return Object.assign({},$,{onChange:function(U,F){return Y(f,F,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0})},valueSetter:ee})},[$,f,Y]),ne=Z(te);return a()(i.xI,{name:f,defaultValue:v,rules:L,render:function(U){var F=U.field,w=U.fieldState.error;return(0,k.jsx)(d.B,Object.assign({hasError:!!w},V,F,ne))}})};P.displayName="MaskedInputText"},"./lib/view/fields/masked-input-text/with-percentage-mask.stories.tsx":(W,M,e)=>{e.r(M),e.d(M,{WithPercentageMask:()=>v,__namedExportsOrder:()=>C,default:()=>f});var s=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),a=e.n(s),x=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"),b=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"),t=e("./node_modules/.pnpm/@elliemae+ds-form-helpers-mask-hooks@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-helpers-mask-hooks/dist/esm/hooks/useNumberMask.js"),c=e("./lib/view/form/index.tsx"),m=e("./lib/view/fields/masked-input-text/index.tsx"),d=e("./lib/view/fields/form-layout-block-item/index.tsx"),i=e("./lib/view/fields/watch-value.tsx"),k=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),g,P=`
    
    // @ts-nocheck
    // @ts-ignore
    var __STORY__ = "import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\n// import '@elliemae/ds-form-input-text';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { useNumberMask } from '@elliemae/ds-controlled-form';\\nimport { Form } from '../../form/index.js';\\nimport { InputTextProps } from '../input-text/index.js';\\nimport { MaskedInputText } 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/MaskedInputText',\\n  component: MaskedInputText,\\n} as Meta;\\n\\nconst Template: Story<InputTextProps & { labelText: string }> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"percentage\\" label=\\"Percentage\\" required>\\n        <MaskedInputText\\n          {...args}\\n          placeholder=\\"100.00%\\"\\n          useMask={useNumberMask}\\n          maskOpts={{ decimalPlaces: 2, suffix: '%' }}\\n        />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Percentage\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WithPercentageMask = Template.bind({});\\n\\nWithPercentageMask.args = {\\n  id: 'percentage',\\n  name: 'percentage',\\n  rules: {\\n    required: { value: true, message: 'Please enter a percentage' },\\n  },\\n};\\n";
    // @ts-ignore
    var __LOCATIONS_MAP__ = {"WithPercentageMask":{"startLoc":{"col":64,"line":17},"endLoc":{"col":1,"line":32},"startBody":{"col":64,"line":17},"endBody":{"col":1,"line":32}}};
    
import { Story, Meta } from '@storybook/react';
import { Grid } from '@elliemae/ds-grid';
// import '@elliemae/ds-form-input-text';
import { DSButtonV2 } from '@elliemae/ds-button';
import { useNumberMask } from '@elliemae/ds-controlled-form';
import { Form } from '../../form/index.js';
import { InputTextProps } from '../input-text/index.js';
import { MaskedInputText } 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';\\n// import '@elliemae/ds-form-input-text';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { useNumberMask } from '@elliemae/ds-controlled-form';\\nimport { Form } from '../../form/index.js';\\nimport { InputTextProps } from '../input-text/index.js';\\nimport { MaskedInputText } 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/MaskedInputText',\\n  component: MaskedInputText,\\n} as Meta;\\n\\nconst Template: Story<InputTextProps & { labelText: string }> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"percentage\\" label=\\"Percentage\\" required>\\n        <MaskedInputText\\n          {...args}\\n          placeholder=\\"100.00%\\"\\n          useMask={useNumberMask}\\n          maskOpts={{ decimalPlaces: 2, suffix: '%' }}\\n        />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Percentage\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WithPercentageMask = Template.bind({});\\n\\nWithPercentageMask.args = {\\n  id: 'percentage',\\n  name: 'percentage',\\n  rules: {\\n    required: { value: true, message: 'Please enter a percentage' },\\n  },\\n};\\n","locationsMap":{"with-percentage-mask":{"startLoc":{"col":64,"line":17},"endLoc":{"col":1,"line":32},"startBody":{"col":64,"line":17},"endBody":{"col":1,"line":32}}}},},
  title: 'Components/Form/Controls/MaskedInputText',
  component: MaskedInputText,
} as Meta;

const Template: Story<InputTextProps & { labelText: string }> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem inputID="percentage" label="Percentage" required>
        <MaskedInputText
          {...args}
          placeholder="100.00%"
          useMask={useNumberMask}
          maskOpts={{ decimalPlaces: 2, suffix: '%' }}
        />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="Percentage" {...args} />
    </Form>
  </Grid>
);

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

WithPercentageMask.args = {
  id: 'percentage',
  name: 'percentage',
  rules: {
    required: { value: true, message: 'Please enter a percentage' },
  },
};
`,u={WithPercentageMask:{startLoc:{col:64,line:25},endLoc:{col:1,line:40},startBody:{col:64,line:25},endBody:{col:1,line:40}}},P=`import { Story, Meta } from '@storybook/react';
import { Grid } from '@elliemae/ds-grid';
// import '@elliemae/ds-form-input-text';
import { DSButtonV2 } from '@elliemae/ds-button';
import { useNumberMask } from '@elliemae/ds-controlled-form';
import { Form } from '../../form/index.js';
import { InputTextProps } from '../input-text/index.js';
import { MaskedInputText } from './index.js';
import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
import { WatchValue } from '../watch-value.js';

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

const Template: Story<InputTextProps & { labelText: string }> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem inputID="percentage" label="Percentage" required>
        <MaskedInputText
          {...args}
          placeholder="100.00%"
          useMask={useNumberMask}
          maskOpts={{ decimalPlaces: 2, suffix: '%' }}
        />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="Percentage" {...args} />
    </Form>
  </Grid>
);

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

WithPercentageMask.args = {
  id: 'percentage',
  name: 'percentage',
  rules: {
    required: { value: true, message: 'Please enter a percentage' },
  },
};
`,u={WithPercentageMask:{startLoc:{col:64,line:17},endLoc:{col:1,line:32},startBody:{col:64,line:17},endBody:{col:1,line:32}}};const f={parameters:{storySource:{source:`
    
    // @ts-nocheck
    // @ts-ignore
    var __STORY__ = "import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\n// import '@elliemae/ds-form-input-text';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { useNumberMask } from '@elliemae/ds-controlled-form';\\nimport { Form } from '../../form/index.js';\\nimport { InputTextProps } from '../input-text/index.js';\\nimport { MaskedInputText } 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/MaskedInputText',\\n  component: MaskedInputText,\\n} as Meta;\\n\\nconst Template: Story<InputTextProps & { labelText: string }> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"percentage\\" label=\\"Percentage\\" required>\\n        <MaskedInputText\\n          {...args}\\n          placeholder=\\"100.00%\\"\\n          useMask={useNumberMask}\\n          maskOpts={{ decimalPlaces: 2, suffix: '%' }}\\n        />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Percentage\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WithPercentageMask = Template.bind({});\\n\\nWithPercentageMask.args = {\\n  id: 'percentage',\\n  name: 'percentage',\\n  rules: {\\n    required: { value: true, message: 'Please enter a percentage' },\\n  },\\n};\\n";
    // @ts-ignore
    var __LOCATIONS_MAP__ = {"WithPercentageMask":{"startLoc":{"col":64,"line":17},"endLoc":{"col":1,"line":32},"startBody":{"col":64,"line":17},"endBody":{"col":1,"line":32}}};
    
import { Story, Meta } from '@storybook/react';
import { Grid } from '@elliemae/ds-grid';
// import '@elliemae/ds-form-input-text';
import { DSButtonV2 } from '@elliemae/ds-button';
import { useNumberMask } from '@elliemae/ds-controlled-form';
import { Form } from '../../form/index.js';
import { InputTextProps } from '../input-text/index.js';
import { MaskedInputText } 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';\\n// import '@elliemae/ds-form-input-text';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { useNumberMask } from '@elliemae/ds-controlled-form';\\nimport { Form } from '../../form/index.js';\\nimport { InputTextProps } from '../input-text/index.js';\\nimport { MaskedInputText } 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/MaskedInputText',\\n  component: MaskedInputText,\\n} as Meta;\\n\\nconst Template: Story<InputTextProps & { labelText: string }> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"percentage\\" label=\\"Percentage\\" required>\\n        <MaskedInputText\\n          {...args}\\n          placeholder=\\"100.00%\\"\\n          useMask={useNumberMask}\\n          maskOpts={{ decimalPlaces: 2, suffix: '%' }}\\n        />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Percentage\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WithPercentageMask = Template.bind({});\\n\\nWithPercentageMask.args = {\\n  id: 'percentage',\\n  name: 'percentage',\\n  rules: {\\n    required: { value: true, message: 'Please enter a percentage' },\\n  },\\n};\\n","locationsMap":{"with-percentage-mask":{"startLoc":{"col":64,"line":17},"endLoc":{"col":1,"line":32},"startBody":{"col":64,"line":17},"endBody":{"col":1,"line":32}}}},},
  title: 'Components/Form/Controls/MaskedInputText',
  component: MaskedInputText,
} as Meta;

const Template: Story<InputTextProps & { labelText: string }> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem inputID="percentage" label="Percentage" required>
        <MaskedInputText
          {...args}
          placeholder="100.00%"
          useMask={useNumberMask}
          maskOpts={{ decimalPlaces: 2, suffix: '%' }}
        />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="Percentage" {...args} />
    </Form>
  </Grid>
);

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

WithPercentageMask.args = {
  id: 'percentage',
  name: 'percentage',
  rules: {
    required: { value: true, message: 'Please enter a percentage' },
  },
};
`,locationsMap:{"with-percentage-mask":{startLoc:{col:64,line:25},endLoc:{col:1,line:40},startBody:{col:64,line:25},endBody:{col:1,line:40}}}},storySource:{source:`import { Story, Meta } from '@storybook/react';
import { Grid } from '@elliemae/ds-grid';
// import '@elliemae/ds-form-input-text';
import { DSButtonV2 } from '@elliemae/ds-button';
import { useNumberMask } from '@elliemae/ds-controlled-form';
import { Form } from '../../form/index.js';
import { InputTextProps } from '../input-text/index.js';
import { MaskedInputText } from './index.js';
import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
import { WatchValue } from '../watch-value.js';

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

const Template: Story<InputTextProps & { labelText: string }> = (args) => (
  <Grid p="m">
    <Form>
      <FormLayoutBlockItem inputID="percentage" label="Percentage" required>
        <MaskedInputText
          {...args}
          placeholder="100.00%"
          useMask={useNumberMask}
          maskOpts={{ decimalPlaces: 2, suffix: '%' }}
        />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="Percentage" {...args} />
    </Form>
  </Grid>
);

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

WithPercentageMask.args = {
  id: 'percentage',
  name: 'percentage',
  rules: {
    required: { value: true, message: 'Please enter a percentage' },
  },
};
`,locationsMap:{"with-percentage-mask":{startLoc:{col:64,line:17},endLoc:{col:1,line:32},startBody:{col:64,line:17},endBody:{col:1,line:32}}}}},title:"Components/Form/Controls/MaskedInputText",component:m.B};var T=function(L){return a()(x.Ay,{p:"m"},void 0,a()(c.l,{},void 0,a()(d.B,{inputID:"percentage",label:"Percentage",required:!0},void 0,(0,k.jsx)(m.B,Object.assign({},L,{placeholder:"100.00%",useMask:t.XF,maskOpts:{decimalPlaces:2,suffix:"%"}}))),g||(g=a()(b.e,{},void 0,"Submit")),(0,k.jsx)(i.n,Object.assign({label:"Percentage"},L))))};T.displayName="Template";var v=T.bind({});v.args={id:"percentage",name:"percentage",rules:{required:{value:!0,message:"Please enter a percentage"}}};var C=["WithPercentageMask"]},"./lib/view/fields/watch-value.tsx":(W,M,e)=>{e.d(M,{n:()=>i});var s=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),a=e.n(s),x=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"),b=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"),t=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),c,m=x.Ay.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),d=x.Ay.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),i=function(k){var g=k.name,P=k.label,u=(0,t.xW)(),f=u.watch,T=f(g,!1)||"";return a()(b.Ay,{},void 0,a()(m,{},void 0,c||(c=a()("h4",{},void 0,"Form Data:")),a()(d,{},void 0,a()("div",{},void 0,P," : ",a()("strong",{},void 0,JSON.stringify(T))))))};i.displayName="WatchValue"},"./lib/view/form/index.tsx":(W,M,e)=>{e.d(M,{l:()=>t});var 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"),a=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),x=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),b=s.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),t=function(c){var m=c.classname,d=c.reactHookFormProps,i=d===void 0?{mode:"onBlur"}:d,k=c.children,g=c.onSubmit,P=(0,a.mN)(i),u={};g&&(u.onSubmit=P.handleSubmit(g));var f=Object.assign(P,{formProps:i});return(0,x.jsx)(a.Op,Object.assign({},f,{children:(0,x.jsx)(b,Object.assign({className:m},u,{children:k}))}))};t.displayName="Form"},"./node_modules/.pnpm/@elliemae+ds-form-helpers-mask-hooks@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-helpers-mask-hooks/dist/esm/hooks/useNumberMask.js":(W,M,e)=>{e.d(M,{XF:()=>X});var s=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),a=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/defaultProps/useMemoMergePropsWithDefault.js"),x=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/validation/typescriptValidator.js"),b=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propTypes/describe.js"),t=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propTypes/PropTypes.js");const c=(_=!1)=>{const p=(0,s.useRef)(null);return(0,s.useMemo)(()=>_?s.useLayoutEffect:s.useEffect,[_])(()=>{p.current?.(),p.current=null}),E=>{p.current=E}},m=(_,p)=>{_.setSelectionRange(p,p,"forward")},d={onChange:()=>null,onKeyDown:()=>null,onBlur:()=>null},i={valueSetter:t.A.func.description("React set state function for the value").isRequired,onChange:t.A.func.description("Callback for onChange"),onKeyDown:t.A.func.description("Callback for onKeyDown")},k={...d,suffix:"",prefix:"",decimalPlaces:2,allowNegative:!1,includeThousandsSeparator:!0,decimalRequired:!1},g={...i,suffix:t.A.string.description("String will be added at the end of the input value").defaultValue(""),prefix:t.A.string.description("String will be added at the start of the input value").defaultValue(""),decimalPlaces:t.A.number.description("Number of decimals allowed").defaultValue(2),allowNegative:t.A.bool.description("Wether the input allows negative number").defaultValue(!1),includeThousandsSeparator:t.A.bool.description("Wether the integer part will be separated by thousands").defaultValue(!0),decimalRequired:t.A.bool.description("Wether decimal part is mandatory").defaultValue(!1),max:t.A.number.description("Maximum value allowed"),min:t.A.number.description("Minimum value allowed")},P={...d,isInternational:!1},u={...i,isInternational:t.A.bool.description("Use or not internaltional phone mask number").defaultValue(!1)},f={...d,filledMask:!1},T={...i,regExp:t.A.arrayOf(t.A.oneOfType([t.A.string,t.A.instanceOf(RegExp)])).description("Array with regexp or special chars per character").isRequired,filledMask:t.A.bool.description("Show blank chars positions").defaultValue(!1)},v={onChange:()=>null,onKeyDown:()=>null,onBlur:()=>null},C={...v,isInternational:!1},L={...v,filledMask:!1,regExp:[]},Z={...v},$={...v,suffix:"",prefix:"",decimalPlaces:2,allowNegative:!1,includeThousandsSeparator:!0,decimalRequired:!1},V={valueSetter:t.A.func.description("React set state function for the value").isRequired,onChange:t.A.func.description("Callback for onChange"),onKeyDown:t.A.func.description("Callback for onKeyDown")},Q={...V,regExp:t.A.arrayOf(t.A.oneOfType([t.A.string,t.A.instanceOf(RegExp)])).description("Array with regexp or special chars per character").isRequired,filledMask:t.A.bool.description("Show blank chars positions").defaultValue(!1)},q={...V,isInternational:t.A.bool.description("Use or not internaltional phone mask number").defaultValue(!1)},ee={...V,suffix:t.A.string.description("String will be added at the end of the input value").defaultValue(""),prefix:t.A.string.description("String will be added at the start of the input value").defaultValue(""),decimalPlaces:t.A.number.description("Number of decimals allowed").defaultValue(2),allowNegative:t.A.bool.description("Wether the input allows negative number").defaultValue(!1),includeThousandsSeparator:t.A.bool.description("Wether the integer part will be separated by thousands").defaultValue(!0),decimalRequired:t.A.bool.description("Wether decimal part is mandatory").defaultValue(!1)},K="useNumberMask",Y="usePhoneMask",te="useRegExpMask",ne="useSSNMask",U="useZipCodeMask",F=(_,p)=>_.replace(/\B(?=(\d{3})+(?!\d))/g,p),w=(_,p,h,E)=>{const{includeThousandsSeparator:R=!0,allowNegative:N=!1,prefix:r="",suffix:G="",decimalPlaces:O=2,decimalRequired:z=!1}=E,H=",";let D=-1,j=[r?.length,0].includes(_.indexOf("-"))&&N?"-":"",n=String(_).split("").filter((y,J)=>{const A=y>="0"&&y<="9"||y==="."&&D===-1&&O;return y==="."&&A&&(D=J),A});for(r&&n.length&&(j+=r);n.length>=2&&n[0]==="0"&&n[1]!==".";)n=n.splice(1);D=n.findIndex(y=>y===".");let o=n.slice(0,D!==-1?D:n.length);const I=n.slice(D,D+O+1);R&&(o=F(o.join(""),H).split(""));let B=!1;D!==-1&&!(h==="Backspace"&&I.length===1)?o.length?n=[...o,...I]:(n=["0",...I],B=!0):n=z&&o.length?[...o,"."]:o,h==="Backspace"&&n.length===0&&(j="");let l=0;n[l]==="0"&&p===1+r.length&&(l+=1),B&&(l+=1);for(let y=0;y<p;y+=1)n[l]===H&&(l+=1),n[l]===_[y]&&(l+=1);l+=j.length;const S=n.length?G:"";return[j+n.join("")+S,l]},X=_=>{const p=(0,a.b)(_,k);(0,x.D)(p,g,K);const{valueSetter:h,onChange:E,onKeyDown:R,onBlur:N,...r}=p,G=(0,s.useRef)("Unidentified"),O=c(!0),[,z]=(0,s.useState)(0),H=(0,s.useCallback)(n=>{const o=n.target.value,{decimalRequired:I=!0,decimalPlaces:B=2,suffix:l=""}=r,S=o.indexOf("."),re=o.indexOf("-"),y=l.length?o.indexOf(l):-1;if(I){if(S>-1){const J=o.slice(S+1,l.length?-l.length:o.length);let A="";for(;J.length+A.length!==B;)A+="0";h((l.length?o.slice(0,y):o)+A+l)}}else o.length-l.length-1===S?h(o.replace(".","")):o.length-1===re&&h(o.replace("-",""));N&&N(n)},[N,h,r]),D=(0,s.useCallback)(n=>{G.current=n.code,R&&R(n)},[R]),j=(0,s.useCallback)(n=>{const[o,I]=w(n.target.value,n.target.selectionEnd??0,G.current,r),B=Number(o.replace(r.prefix,"").replace(r.suffix,"").replace(/,/g,""));if(r.min!==void 0&&B<r.min){h(`${r.prefix}${r.min}${r.suffix}`),O(()=>m(n.target,I));return}if(r.max!==void 0&&B>r.max){h(`${r.prefix}${r.max}${r.suffix}`),O(()=>m(n.target,I));return}h(l=>(o===l&&z(S=>S+1),o)),E&&E(n,o),O(()=>m(n.target,I))},[h,O,E,r]);return{onKeyDown:D,onChange:j,onBlur:H}},ae=(_,p)=>{const[h]=w(_,_.length-1,"",p);return h};X.displayName=K;const oe=(0,b.A)(X);oe.propTypes=g,oe.returnType={onKeyDown:t.A.func.description("On key down event for input").isRequired,onChange:t.A.func.description("On change event for input").isRequired,onBlur:t.A.func.description("On blur event for input").isRequired}}}]);
