@elliemae/pui-app-sdk 6.0.0-alpha.2 → 6.0.0-alpha.4

package/demo/view-fields-large-text-box-index-stories.91bc0b9e.iframe.bundle.js

@@ -0,0 +1,254 @@
+(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[1491],{"./lib/view/fields/form-layout-block-item/index.tsx"(A,m,e){"use strict";e.d(m,{B:()=>b});var a=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),s=e.n(a),u=e("./node_modules/.pnpm/@elliemae+ds-form-layout-blocks@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-layout-blocks/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js"),f=e("./node_modules/.pnpm/react-hook-form@7.70.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"),p=["inputID","label"],b=function(h){var l=h.inputID,n=h.label,y=s()(h,p),i=(0,f.lN)({name:l}),d=i.errors,t=(0,f.Jt)(d,l),_=!!t,V=t?.message;return(0,x.jsx)(u.U,Object.assign({inputID:l,label:n,hasError:_,validationMessage:V},y))};b.displayName="FormLayoutBlockItem"},"./lib/view/fields/watch-value.tsx"(A,m,e){"use strict";e.d(m,{n:()=>l});var a=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),s=e.n(a),u=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.cjs.js"),f=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),x=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),p,b=u.default.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),h=u.default.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),l=function(n){var y=n.name,i=n.label,d=(0,x.xW)(),t=d.watch,_=t(y,!1)||"";return s()(f.Ay,{},void 0,s()(b,{},void 0,p||(p=s()("h4",{},void 0,"Form Data:")),s()(h,{},void 0,s()("div",{},void 0,i," : ",s()("strong",{},void 0,JSON.stringify(_))))))};l.displayName="WatchValue"},"./lib/view/form/index.tsx"(A,m,e){"use strict";e.d(m,{l:()=>x});var a=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.cjs.js"),s=e("./node_modules/.pnpm/react-hook-form@7.70.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"),f=a.default.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),x=function(p){var b=p.classname,h=p.reactHookFormProps,l=h===void 0?{mode:"onBlur"}:h,n=p.children,y=p.onSubmit,i=(0,s.mN)(l),d={};y&&(d.onSubmit=i.handleSubmit(y));var t=Object.assign(i,{formProps:l});return(0,u.jsx)(s.Op,Object.assign({},t,{children:(0,u.jsx)(f,Object.assign({className:b},d,{children:n}))}))};x.displayName="Form"},"./lib/view/fields/large-text-box/index.stories.tsx"(A,m,e){"use strict";e.r(m),e.d(m,{Basic:()=>H,__namedExportsOrder:()=>oe,default:()=>ee});var a=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),s=e.n(a),u=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),f=e("./node_modules/.pnpm/@elliemae+ds-button-v2@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-button-v2/dist/esm/parts/DSButtonV2/DSButtonV2.js"),x=e("./lib/view/form/index.tsx"),p=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),b=e.n(p),h=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),l=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),n=e("./node_modules/.pnpm/@elliemae+ds-legacy-props-helpers@1.0.16_@elliemae+pui-theme@2.7.0_react-dom@17.0.2/node_modules/@elliemae/ds-legacy-props-helpers/dist/esm/useDeprecateComponent/index.js"),y=e("./node_modules/.pnpm/@elliemae+ds-legacy-props-helpers@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-props-helpers/dist/esm/propTypes/describe.js"),i=e("./node_modules/.pnpm/@elliemae+ds-legacy-classnames@1.0.16/node_modules/@elliemae/ds-legacy-classnames/dist/esm/aggregatedClasses.js"),d=e("./node_modules/.pnpm/@elliemae+ds-legacy-classnames@1.0.16/node_modules/@elliemae/ds-legacy-classnames/dist/esm/classNameManager.js"),t=e("./node_modules/.pnpm/@elliemae+ds-legacy-props-helpers@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-props-helpers/dist/esm/propTypes/PropTypes.js");const _={containerProps:t.A.object.description("Injected props to wrapper element of component"),autoFocus:t.A.bool.description("Whether uses auto focus or not"),className:t.A.string.description("CSS class"),disabled:t.A.bool.description("Whether is disabled or not"),name:t.A.string.description("HTML form name property"),id:t.A.number.description("HTML id"),maxLength:t.A.number.description("Max length for text to be entered"),minLength:t.A.number.description("Min length for text to be entered"),placeholder:t.A.string.description("Placeholder for the text"),onClick:t.A.func.description("Allows a function that is triggered once the input text is clicked"),onChange:t.A.func.description("Allows a function that is triggered once the input text changes"),onFocus:t.A.func.description("Allows a function that is triggered once the input text is focused"),onBlur:t.A.func.description("Allows a function that is triggered once the input text loses focus"),onKeyUp:t.A.func.description("Allows a function that is triggered once in the input a keyboard key is released"),onKeyDown:t.A.func.description("Allows a function that is triggered once a key is being pressed"),onPaste:t.A.func.description("Allows a function that is triggered once the input text is pasted"),value:t.A.string.description("Default value once the component is initialized"),hasError:t.A.bool.description("Whether the input text has error or not"),required:t.A.bool.description("Whether the input text is required or not"),readOnly:t.A.bool.description("Whether the input text is read only or not"),resize:t.A.string.description("The resizable handle feature is being deprocated due to the inability to fully comply with accessibility standards and would be less than optimal for the best user experience. The auto-resize functionality will repalce it and complies with accessibility standards and guidelines.").deprecated({version:"4.x"}),innerRef:t.A.func.description("ref forwarded to component"),ariaLabel:t.A.string.description("a11y aria label"),ariaAutocomplete:t.A.string.description(""),role:t.A.string.description("Type of input. Ex: textbox"),characterLimitCounter:t.A.number.description("it will show a counter/limit if the value is greater than 0"),tabIndex:t.A.string.description("Tab index html property.")},V={containerProps:{},autoFocus:!1,className:"",disabled:!1,name:"",id:null,maxLength:null,minLength:0,placeholder:"",onClick:()=>null,onChange:()=>null,onFocus:()=>null,onBlur:()=>null,onKeyUp:()=>null,onKeyDown:()=>null,onPaste:()=>null,value:"",hasError:!1,required:!1,readOnly:!1,resize:"vertical",innerRef:null,ariaLabel:"Enter text",ariaAutocomplete:"none",role:"textbox",characterLimitCounter:0,rows:3,errorLimit:"Please limit your entry to",tabIndex:""},L=(0,i.A)("div")("counter","textarea",({limitError:c})=>({"limit-error":c})),F=({containerProps:c,autoFocus:w,className:o,disabled:r,name:j,id:v,maxLength:k,minLength:P,placeholder:g,onClick:D,onChange:R,onFocus:z,onBlur:te,onKeyUp:E,onKeyDown:W,onPaste:N,value:I,hasError:$,required:se,readOnly:ne,resize:M,innerRef:re,ariaLabel:de,ariaAutocomplete:le,role:B,characterLimitCounter:S,rows:C,errorLimit:O,tabIndex:me})=>{(0,n.y)({componentName:"ds-form/LargeInputText",version:"TBD Date: 2023 Q3"});const ae=(0,h.useMemo)(()=>S<String(I).length&&S>0,[S,I]),{cssClassName:pe,classNameElement:ce,classNameBlock:ue}=(0,d.Ay)("form-element-textarea","text",{hasError:ae||$,readOnly:ne,disabled:r}),xe=he=>{E(he)};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("div",{...c,className:`${pe} ${o}`,children:(0,l.jsx)("div",{className:ue("wrapper"),children:(0,l.jsx)("textarea",{ref:re,"aria-autocomplete":le,"aria-label":de,"aria-multiline":!0,"aria-placeholder":g,"aria-required":se,autoFocus:w,className:ce("textarea"),"data-testid":"ds-large-input_main-component",disabled:r,id:v,maxLength:k,minLength:P,name:j,onBlur:te,onChange:R,onClick:D,onFocus:z,onKeyDown:W,onKeyUp:xe,onPaste:N,placeholder:g,role:B,rows:String(C),style:{resize:M},value:I,tabIndex:me})})}),S>0&&(0,l.jsx)(L,{classProps:{limitError:ae},"data-testid":"counter-area",children:`${ae?`${O} ${S} characters.   `:""}${String(I).length} / ${S}`})]})};F.propTypes=_,F.defaultProps=V,F.displayName="DSLargeInputText";const Y=(0,y.A)(F).description("A large input");Y.propTypes=_;var ie=null,J=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),U=["name","defaultValue","rules"],G=function(c){var w=c.name,o=c.defaultValue,r=o===void 0?"":o,j=c.rules,v=j===void 0?{}:j,k=b()(c,U);return s()(J.xI,{name:w,rules:v,defaultValue:r,render:function(P){var g=P.field;return(0,l.jsx)(F,Object.assign({},k,g))}})};G.displayName="LargeTextBox";var X=e("./lib/view/fields/form-layout-block-item/index.tsx"),Q=e("./lib/view/fields/watch-value.tsx"),T,Z=`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { Form } from '../../form/index.js';\\nimport { LargeTextBox, LargeTextBoxProps } 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/LargeTextBox',\\n  component: LargeTextBox,\\n} as Meta;\\n\\nconst Template: Story<LargeTextBoxProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"feedback\\" label=\\"Enter Feedback\\" required>\\n        <LargeTextBox {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Enter Feedback\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'feedback',\\n  name: 'feedback',\\n  rules: {\\n    required: { value: true, message: 'Please enter feedback' },\\n  },\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":43,"line":14},"endLoc":{"col":1,"line":24},"startBody":{"col":43,"line":14},"endBody":{"col":1,"line":24}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { LargeTextBox, LargeTextBoxProps } 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-v2';\\nimport { Form } from '../../form/index.js';\\nimport { LargeTextBox, LargeTextBoxProps } 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/LargeTextBox',\\n  component: LargeTextBox,\\n} as Meta;\\n\\nconst Template: Story<LargeTextBoxProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"feedback\\" label=\\"Enter Feedback\\" required>\\n        <LargeTextBox {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Enter Feedback\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'feedback',\\n  name: 'feedback',\\n  rules: {\\n    required: { value: true, message: 'Please enter feedback' },\\n  },\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":43,"line":14},"endLoc":{"col":1,"line":24},"startBody":{"col":43,"line":14},"endBody":{"col":1,"line":24}}}},},
+  title: 'Components/Form/Controls/LargeTextBox',
+  component: LargeTextBox,
+} as Meta;
+
+const Template: Story<LargeTextBoxProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem inputID="feedback" label="Enter Feedback" required>
+        <LargeTextBox {...args} />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Enter Feedback" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'feedback',
+  name: 'feedback',
+  rules: {
+    required: { value: true, message: 'Please enter feedback' },
+  },
+};
+`,q={Basic:{startLoc:{col:43,line:22},endLoc:{col:1,line:32},startBody:{col:43,line:22},endBody:{col:1,line:32}}},Z=`import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { LargeTextBox, LargeTextBoxProps } from './index.js';
+import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {
+  title: 'Components/Form/Controls/LargeTextBox',
+  component: LargeTextBox,
+} as Meta;
+
+const Template: Story<LargeTextBoxProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem inputID="feedback" label="Enter Feedback" required>
+        <LargeTextBox {...args} />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Enter Feedback" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'feedback',
+  name: 'feedback',
+  rules: {
+    required: { value: true, message: 'Please enter feedback' },
+  },
+};
+`,q={Basic:{startLoc:{col:43,line:14},endLoc:{col:1,line:24},startBody:{col:43,line:14},endBody:{col:1,line:24}}};const ee={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-v2';\\nimport { Form } from '../../form/index.js';\\nimport { LargeTextBox, LargeTextBoxProps } 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/LargeTextBox',\\n  component: LargeTextBox,\\n} as Meta;\\n\\nconst Template: Story<LargeTextBoxProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"feedback\\" label=\\"Enter Feedback\\" required>\\n        <LargeTextBox {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Enter Feedback\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'feedback',\\n  name: 'feedback',\\n  rules: {\\n    required: { value: true, message: 'Please enter feedback' },\\n  },\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":43,"line":14},"endLoc":{"col":1,"line":24},"startBody":{"col":43,"line":14},"endBody":{"col":1,"line":24}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { LargeTextBox, LargeTextBoxProps } 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-v2';\\nimport { Form } from '../../form/index.js';\\nimport { LargeTextBox, LargeTextBoxProps } 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/LargeTextBox',\\n  component: LargeTextBox,\\n} as Meta;\\n\\nconst Template: Story<LargeTextBoxProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"feedback\\" label=\\"Enter Feedback\\" required>\\n        <LargeTextBox {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Enter Feedback\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'feedback',\\n  name: 'feedback',\\n  rules: {\\n    required: { value: true, message: 'Please enter feedback' },\\n  },\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":43,"line":14},"endLoc":{"col":1,"line":24},"startBody":{"col":43,"line":14},"endBody":{"col":1,"line":24}}}},},
+  title: 'Components/Form/Controls/LargeTextBox',
+  component: LargeTextBox,
+} as Meta;
+
+const Template: Story<LargeTextBoxProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem inputID="feedback" label="Enter Feedback" required>
+        <LargeTextBox {...args} />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Enter Feedback" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'feedback',
+  name: 'feedback',
+  rules: {
+    required: { value: true, message: 'Please enter feedback' },
+  },
+};
+`,locationsMap:{basic:{startLoc:{col:43,line:22},endLoc:{col:1,line:32},startBody:{col:43,line:22},endBody:{col:1,line:32}}}},storySource:{source:`import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { LargeTextBox, LargeTextBoxProps } from './index.js';
+import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {
+  title: 'Components/Form/Controls/LargeTextBox',
+  component: LargeTextBox,
+} as Meta;
+
+const Template: Story<LargeTextBoxProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem inputID="feedback" label="Enter Feedback" required>
+        <LargeTextBox {...args} />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Enter Feedback" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'feedback',
+  name: 'feedback',
+  rules: {
+    required: { value: true, message: 'Please enter feedback' },
+  },
+};
+`,locationsMap:{basic:{startLoc:{col:43,line:14},endLoc:{col:1,line:24},startBody:{col:43,line:14},endBody:{col:1,line:24}}}}},title:"Components/Form/Controls/LargeTextBox",component:G};var K=function(c){return s()(u.Ay,{p:"m"},void 0,s()(x.l,{},void 0,s()(X.B,{inputID:"feedback",label:"Enter Feedback",required:!0},void 0,(0,l.jsx)(G,Object.assign({},c))),T||(T=s()(f.e,{},void 0,"Submit")),(0,l.jsx)(Q.n,Object.assign({label:"Enter Feedback"},c))))};K.displayName="Template";var H=K.bind({});H.args={id:"feedback",name:"feedback",rules:{required:{value:!0,message:"Please enter feedback"}}};var oe=["Basic"]},"./node_modules/.pnpm/obj-str@1.1.0/node_modules/obj-str/dist/obj-str.js"(A){A.exports=function(m){var e,a="";for(e in m)m[e]&&(a&&(a+=" "),a+=e);return a}},"./node_modules/.pnpm/@elliemae+ds-form-layout-blocks@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-layout-blocks/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js"(A,m,e){"use strict";e.d(m,{U:()=>c});var a=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),s=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),u=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),f=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propTypes/describe.js"),x=e("./node_modules/.pnpm/uid@2.0.2/node_modules/uid/dist/index.mjs"),p=e("./node_modules/.pnpm/@elliemae+ds-icons@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-icons/dist/esm/AlertsSmallFill.js"),b=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/globalProps/globalAttributesPropTypes.js"),h=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/xstyledProps/xstyledPropTypes.js"),l=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propsPerSlot/getPropsPerSlotPropTypes.js"),n=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propTypes/PropTypes.js"),y=e("./node_modules/.pnpm/@elliemae+ds-system@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-system/dist/esm/styled/helpers.js");const i="DSFormlayoutblockitem",d={CONTAINER:"container",LABEL:"label",MESSAGE:"message",ERROR_MESSAGE:"error-message",COUNTER:"counter",MARK:"mark"},t=(0,y.lD)(i,d),_={isGroup:!1},V={...b.P,...h.w,...(0,l.Y)(i,d),children:n.A.node.isRequired.description("Input component. "),label:n.A.string.description("Label property for the input component. This property is required for accesibility purposes."),inputID:n.A.string.description("String that matches the input component's id. This property is required for accesibility purposes."),maxCharCounter:n.A.number.description("Max of characters allowed."),currentChar:n.A.number.description("Current counter of input text area"),feedbackMessage:n.A.string.description("Feedback message to show below the input component."),validationMessage:n.A.string.description("Validation message to show below the input component. It requires hasError property set to true to be visible."),hasError:n.A.bool.description("Helper boolean property for the validation message."),required:n.A.bool.description("Adds required extra styling."),optional:n.A.bool.description("Adds optional extra styling."),fitContent:n.A.bool.description("Set the width of the layout to the input component."),leftLabel:n.A.bool.description("Adds the label at the left of the input component."),hideLabel:n.A.bool.description("Hides the input label. It still requires label and labelFor property for accesibility purposes"),withHighlight:n.A.bool.description("Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab."),isGroup:n.A.bool.description("Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input."),iconError:n.A.bool.description("Adds icon error extra styling.")};var L=e("./node_modules/.pnpm/@elliemae+ds-system@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-system/dist/esm/styled/styled.js"),F=e("./node_modules/.pnpm/@elliemae+ds-system@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-system/dist/esm/xStyledWrapper.js"),Y=e("./node_modules/.pnpm/@elliemae+ds-system@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-system/dist/esm/styled/system.js");const ie=(0,L.I)("div",{name:i,slot:d.CONTAINER})`
+  position: relative;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  ${F.L1}
+  ${({fitContent:o})=>o?"width: fit-content;":void 0}
+  ${({isGroup:o})=>o?"border: none":""};
+  ${({leftLabel:o,hideLabel:r})=>o&&!r?"grid-template-columns: auto 1fr;":void 0}
+  align-items: center;
+  ${({theme:o,withHighlight:r})=>r?`
+  &::after {
+        position: absolute;
+        content: '';
+        left: -${o.space.xxs};
+        top: -${o.space.xxxs};
+        z-index: -1;
+        width: calc(100% + ${o.space.xs});
+        height: calc(100%  + ${o.space.xxs});
+        background-color: #FEFBEE;
+        border : 1px solid #8F6326;
+        border-radius : 4px;
+        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);
+        }
+        &:hover, 
+        &:focus-within {
+          &::after {
+            position: absolute;
+            content: '';
+            left: -${o.space.xxs};
+            top: -${o.space.xxxs};
+            z-index: -1;
+            width: calc(100% + ${o.space.xs});
+            height: calc(100%  + ${o.space.xxs});
+            background-color: #FFF9D3;
+            border : 2px solid #8F6326;
+            border-radius : 4px;
+            box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);
+          }
+        }
+  `:void 0}
+`,J=(0,L.I)("label",{name:i,slot:d.LABEL})`
+  display: flex;
+  ${({theme:o,leftLabel:r})=>r?`padding-right: ${o.space.xxxs};`:void 0}
+  ${({hideLabel:o})=>o?`position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+  `:void 0}
+`,U=(0,Y.AH)`
+  font-size: ${({theme:o})=>o.fontSizes.microText[200]};
+  text-align: right;
+  line-height: 1.231rem;
+  @media (max-width: ${({theme:o})=>o.breakpoints.small}) {
+    line-height: 1rem;
+  }
+  min-height: 15px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${({theme:o,hasError:r})=>r?o.colors.danger[900]:o.colors.neutral[500]};
+  ${({leftLabel:o,hideLabel:r})=>o&&!r?"grid-column: 1/3;":void 0}
+  font-style: normal;
+`,G=(0,L.I)("div",{name:i,slot:d.MESSAGE})`
+  ${U}
+`,X=(0,L.I)("div",{name:i,slot:d.ERROR_MESSAGE})`
+  ${U}
+`,Q=(0,L.I)("span",{name:i,slot:d.MARK})`
+  margin-left: ${({theme:o})=>o.space.xxxs};
+  ${({theme:o,required:r})=>r?`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  line-height: 1rem;
+  font-size: 1.5rem;
+  :after {
+    content: '*';
+    color: ${o.colors.danger[900]};
+  }
+  `:`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  border: 1px solid ${o.colors.brand[600]};
+  `}
+`,T=L.I.div`
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`,Z=(0,L.I)("span",{name:i,slot:d.COUNTER})`
+  justify-self: flex-end;
+  margin-left: 16px;
+  color: ${({theme:o,hasError:r})=>r?o.colors.danger[900]:o.colors.neutral[500]};
+`;var q=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/validation/typescriptValidator.js"),ee=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/defaultProps/useMemoMergePropsWithDefault.js"),K=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/globalProps/useGetGlobalAttributes.js"),H=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/xstyledProps/useGetXstyledProps.js");const oe=o=>{(0,q.D)(o,V,i);const r=(0,ee.b)(o,_),j=(0,K.u)(r),v=(0,H.d)(r);return a.useMemo(()=>({globalAttributes:j,xstyledProps:v,propsWithDefault:r}),[j,v,r])},c=o=>{const{globalAttributes:r,xstyledProps:j,propsWithDefault:v}=oe(o),{label:k,feedbackMessage:P,maxCharCounter:g,currentChar:D,validationMessage:R,inputID:z,children:te,hasError:E,leftLabel:W,required:N,optional:I,hideLabel:$,fitContent:se,withHighlight:ne,isGroup:M}=v,{className:re,label:de,...le}=r,B=(0,a.useMemo)(()=>z??`form_layout_block_item_${(0,x.L)(6)}`,[z]),S=(0,a.useMemo)(()=>g!==void 0?["1fr","auto"]:["1fr"],[g]),C=(0,a.useCallback)(()=>v,[v]),O=(0,a.useCallback)(()=>({}),[]);return(0,s.jsxs)(ie,{leftLabel:W,fitContent:se,hideLabel:$,withHighlight:ne,as:M?"fieldset":"div",isGroup:M,className:re,...j,...le,getOwnerProps:C,getOwnerPropsArguments:O,children:[(0,s.jsxs)(u.Ay,{cols:S,gutter:"xxs","aria-live":"polite",id:`${B}_remaining_characters`,children:[k?(0,s.jsxs)(J,{id:`${B}_block_label`,htmlFor:B,leftLabel:W,hideLabel:$,"aria-hidden":M,getOwnerProps:C,getOwnerPropsArguments:O,children:[k,(N||I)&&(0,s.jsx)(Q,{required:N,"aria-hidden":N,children:I?(0,s.jsx)(T,{children:"Optional"}):null})]}):null,g!==void 0&&D!==void 0?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(Z,{hasError:D>g,getOwnerProps:C,getOwnerPropsArguments:O,children:`${D}/${g}`}),(0,s.jsx)(T,{children:D<g?`${g-D} characters remaining`:""})]}):null]}),M&&(0,s.jsx)(T,{as:"legend",id:`${B}_legend`,children:`${k}. ${E&&R||!E&&P||""}`}),te,P&&!E?(0,s.jsx)(G,{"aria-live":"polite",leftLabel:W,hideLabel:$,"aria-hidden":M,id:`${B}_feedback_message`,getOwnerProps:C,getOwnerPropsArguments:O,children:P}):(0,s.jsx)(T,{id:`${B}_feedback_message`}),R&&E?(0,s.jsxs)(X,{hasError:E,leftLabel:W,hideLabel:$,role:"alert",id:`${B}_error_message`,getOwnerProps:C,getOwnerPropsArguments:O,children:[(0,s.jsx)(p.A,{width:8,height:8,color:["danger","900"],style:{marginBottom:"2px"}}),"\xA0",`${R}`]}):(0,s.jsx)(T,{id:`${B}_error_message`})]})};c.displayName="DSFormLayoutBlockItem";const w=(0,f.A)(c);w.propTypes=V},"./node_modules/.pnpm/@elliemae+ds-icons@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-icons/dist/esm/AlertsSmallFill.js"(A,m,e){"use strict";e.d(m,{A:()=>x});var a=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),s=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),u=e("./node_modules/.pnpm/@elliemae+ds-icons@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-icons/dist/esm/utils/SvgIcon.js"),x=p=>(0,s.jsx)(u.Ah,{width:12,height:13,...p,viewBox:"0 0 12 13",children:(0,s.jsx)("path",{d:"M 7.2154 1.2771 L 11.8239 10.2545 C 12.1984 10.9839 11.956 11.904 11.2826 12.3096 C 11.0752 12.4345 10.8419 12.5 10.6046 12.5 L 1.3952 12.5 C 0.6246 12.5 0 11.8234 0 10.9889 C 0 10.7322 0.0603 10.4798 0.1753 10.2555 L 4.7762 1.278 C 5.1502 0.5483 5.9995 0.2851 6.6732 0.6902 C 6.901 0.8271 7.0888 1.0304 7.2154 1.2771 Z"})})}}]);

package/demo/view-fields-masked-input-text-with-money-mask-stories.70dc56c5.iframe.bundle.js

@@ -0,0 +1,213 @@
+"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[5974],{"./lib/view/fields/form-layout-block-item/index.tsx"(C,g,e){e.d(g,{B:()=>u});var s=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),o=e.n(s),y=e("./node_modules/.pnpm/@elliemae+ds-form-layout-blocks@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-layout-blocks/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js"),v=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),n=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),c=["inputID","label"],u=function(d){var a=d.inputID,k=d.label,M=o()(d,c),T=(0,v.lN)({name:a}),p=T.errors,f=(0,v.Jt)(p,a),E=!!f,P=f?.message;return(0,n.jsx)(y.U,Object.assign({inputID:a,label:k,hasError:E,validationMessage:P},M))};u.displayName="FormLayoutBlockItem"},"./lib/view/fields/masked-input-text/index.tsx"(C,g,e){e.d(g,{B:()=>T});var s=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(s),y=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/slicedToArray.js"),v=e.n(y),n=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),c=e.n(n),u=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),d=e("./node_modules/.pnpm/@elliemae+ds-form-input-text@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-input-text/dist/esm/DSInputText.js"),a=e("./node_modules/.pnpm/react-hook-form@7.70.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"),M=["name","defaultValue","rules","useMask","maskOpts"],T=function(p){var f=p.name,E=p.defaultValue,P=E===void 0?"":E,L=p.rules,R=L===void 0?{}:L,ee=p.useMask,J=p.maskOpts,V=c()(p,M),ne=u.useState(P),te=v()(ne,2),oe=te[1],U=(0,a.xW)(),Z=U.setValue,se=u.useMemo(function(){return Object.assign({},J,{onChange:function($,F){return Z(f,F,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0})},valueSetter:oe})},[J,f,Z]),re=ee(se);return o()(a.xI,{name:f,defaultValue:P,rules:R,render:function($){var F=$.field,G=$.fieldState.error;return(0,k.jsx)(d.B,Object.assign({hasError:!!G},V,F,re))}})};T.displayName="MaskedInputText"},"./lib/view/fields/watch-value.tsx"(C,g,e){e.d(g,{n:()=>a});var s=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(s),y=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.cjs.js"),v=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),n=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),c,u=y.default.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),d=y.default.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),a=function(k){var M=k.name,T=k.label,p=(0,n.xW)(),f=p.watch,E=f(M,!1)||"";return o()(v.Ay,{},void 0,o()(u,{},void 0,c||(c=o()("h4",{},void 0,"Form Data:")),o()(d,{},void 0,o()("div",{},void 0,T," : ",o()("strong",{},void 0,JSON.stringify(E))))))};a.displayName="WatchValue"},"./lib/view/form/index.tsx"(C,g,e){e.d(g,{l:()=>n});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.cjs.js"),o=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),y=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),v=s.default.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),n=function(c){var u=c.classname,d=c.reactHookFormProps,a=d===void 0?{mode:"onBlur"}:d,k=c.children,M=c.onSubmit,T=(0,o.mN)(a),p={};M&&(p.onSubmit=T.handleSubmit(M));var f=Object.assign(T,{formProps:a});return(0,y.jsx)(o.Op,Object.assign({},f,{children:(0,y.jsx)(v,Object.assign({className:u},p,{children:k}))}))};n.displayName="Form"},"./lib/view/fields/masked-input-text/with-money-mask.stories.tsx"(C,g,e){e.r(g),e.d(g,{WithMoneyMask:()=>P,__namedExportsOrder:()=>L,default:()=>f});var s=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(s),y=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),v=e("./node_modules/.pnpm/@elliemae+ds-button-v2@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-button-v2/dist/esm/parts/DSButtonV2/DSButtonV2.js"),n=e("./node_modules/.pnpm/@elliemae+ds-form-helpers-mask-hooks@3.57.10_@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"),u=e("./lib/view/fields/masked-input-text/index.tsx"),d=e("./lib/view/fields/form-layout-block-item/index.tsx"),a=e("./lib/view/fields/watch-value.tsx"),k=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),M,T=`
+    
+    // @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-v2';\\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=\\"money\\" label=\\"Money\\" required>\\n        <MaskedInputText\\n          {...args}\\n          useMask={useNumberMask}\\n          maskOpts={{\\n            decimalPlaces: 2,\\n            prefix: '$',\\n            allowNegative: true,\\n            suffix: '',\\n            includeThousandsSeparator: true,\\n            decimalRequired: false,\\n          }}\\n        />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Money\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WithMoneyMask = Template.bind({});\\n\\nWithMoneyMask.args = {\\n  id: 'money',\\n  name: 'money',\\n  placeholder: '$10,000',\\n  rules: {\\n    required: { value: true, message: 'Please enter money' },\\n  },\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"WithMoneyMask":{"startLoc":{"col":64,"line":17},"endLoc":{"col":1,"line":38},"startBody":{"col":64,"line":17},"endBody":{"col":1,"line":38}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+// import '@elliemae/ds-form-input-text';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+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-v2';\\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=\\"money\\" label=\\"Money\\" required>\\n        <MaskedInputText\\n          {...args}\\n          useMask={useNumberMask}\\n          maskOpts={{\\n            decimalPlaces: 2,\\n            prefix: '$',\\n            allowNegative: true,\\n            suffix: '',\\n            includeThousandsSeparator: true,\\n            decimalRequired: false,\\n          }}\\n        />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Money\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WithMoneyMask = Template.bind({});\\n\\nWithMoneyMask.args = {\\n  id: 'money',\\n  name: 'money',\\n  placeholder: '$10,000',\\n  rules: {\\n    required: { value: true, message: 'Please enter money' },\\n  },\\n};\\n","locationsMap":{"with-money-mask":{"startLoc":{"col":64,"line":17},"endLoc":{"col":1,"line":38},"startBody":{"col":64,"line":17},"endBody":{"col":1,"line":38}}}},},
+  title: 'Components/Form/Controls/MaskedInputText',
+  component: MaskedInputText,
+} as Meta;
+
+const Template: Story<InputTextProps & { labelText: string }> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem inputID="money" label="Money" required>
+        <MaskedInputText
+          {...args}
+          useMask={useNumberMask}
+          maskOpts={{
+            decimalPlaces: 2,
+            prefix: '$',
+            allowNegative: true,
+            suffix: '',
+            includeThousandsSeparator: true,
+            decimalRequired: false,
+          }}
+        />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Money" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const WithMoneyMask = Template.bind({});
+
+WithMoneyMask.args = {
+  id: 'money',
+  name: 'money',
+  placeholder: '$10,000',
+  rules: {
+    required: { value: true, message: 'Please enter money' },
+  },
+};
+`,p={WithMoneyMask:{startLoc:{col:64,line:25},endLoc:{col:1,line:46},startBody:{col:64,line:25},endBody:{col:1,line:46}}},T=`import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+// import '@elliemae/ds-form-input-text';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+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="money" label="Money" required>
+        <MaskedInputText
+          {...args}
+          useMask={useNumberMask}
+          maskOpts={{
+            decimalPlaces: 2,
+            prefix: '$',
+            allowNegative: true,
+            suffix: '',
+            includeThousandsSeparator: true,
+            decimalRequired: false,
+          }}
+        />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Money" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const WithMoneyMask = Template.bind({});
+
+WithMoneyMask.args = {
+  id: 'money',
+  name: 'money',
+  placeholder: '$10,000',
+  rules: {
+    required: { value: true, message: 'Please enter money' },
+  },
+};
+`,p={WithMoneyMask:{startLoc:{col:64,line:17},endLoc:{col:1,line:38},startBody:{col:64,line:17},endBody:{col:1,line:38}}};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-v2';\\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=\\"money\\" label=\\"Money\\" required>\\n        <MaskedInputText\\n          {...args}\\n          useMask={useNumberMask}\\n          maskOpts={{\\n            decimalPlaces: 2,\\n            prefix: '$',\\n            allowNegative: true,\\n            suffix: '',\\n            includeThousandsSeparator: true,\\n            decimalRequired: false,\\n          }}\\n        />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Money\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WithMoneyMask = Template.bind({});\\n\\nWithMoneyMask.args = {\\n  id: 'money',\\n  name: 'money',\\n  placeholder: '$10,000',\\n  rules: {\\n    required: { value: true, message: 'Please enter money' },\\n  },\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"WithMoneyMask":{"startLoc":{"col":64,"line":17},"endLoc":{"col":1,"line":38},"startBody":{"col":64,"line":17},"endBody":{"col":1,"line":38}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+// import '@elliemae/ds-form-input-text';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+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-v2';\\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=\\"money\\" label=\\"Money\\" required>\\n        <MaskedInputText\\n          {...args}\\n          useMask={useNumberMask}\\n          maskOpts={{\\n            decimalPlaces: 2,\\n            prefix: '$',\\n            allowNegative: true,\\n            suffix: '',\\n            includeThousandsSeparator: true,\\n            decimalRequired: false,\\n          }}\\n        />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Money\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WithMoneyMask = Template.bind({});\\n\\nWithMoneyMask.args = {\\n  id: 'money',\\n  name: 'money',\\n  placeholder: '$10,000',\\n  rules: {\\n    required: { value: true, message: 'Please enter money' },\\n  },\\n};\\n","locationsMap":{"with-money-mask":{"startLoc":{"col":64,"line":17},"endLoc":{"col":1,"line":38},"startBody":{"col":64,"line":17},"endBody":{"col":1,"line":38}}}},},
+  title: 'Components/Form/Controls/MaskedInputText',
+  component: MaskedInputText,
+} as Meta;
+
+const Template: Story<InputTextProps & { labelText: string }> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem inputID="money" label="Money" required>
+        <MaskedInputText
+          {...args}
+          useMask={useNumberMask}
+          maskOpts={{
+            decimalPlaces: 2,
+            prefix: '$',
+            allowNegative: true,
+            suffix: '',
+            includeThousandsSeparator: true,
+            decimalRequired: false,
+          }}
+        />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Money" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const WithMoneyMask = Template.bind({});
+
+WithMoneyMask.args = {
+  id: 'money',
+  name: 'money',
+  placeholder: '$10,000',
+  rules: {
+    required: { value: true, message: 'Please enter money' },
+  },
+};
+`,locationsMap:{"with-money-mask":{startLoc:{col:64,line:25},endLoc:{col:1,line:46},startBody:{col:64,line:25},endBody:{col:1,line:46}}}},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-v2';
+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="money" label="Money" required>
+        <MaskedInputText
+          {...args}
+          useMask={useNumberMask}
+          maskOpts={{
+            decimalPlaces: 2,
+            prefix: '$',
+            allowNegative: true,
+            suffix: '',
+            includeThousandsSeparator: true,
+            decimalRequired: false,
+          }}
+        />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Money" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const WithMoneyMask = Template.bind({});
+
+WithMoneyMask.args = {
+  id: 'money',
+  name: 'money',
+  placeholder: '$10,000',
+  rules: {
+    required: { value: true, message: 'Please enter money' },
+  },
+};
+`,locationsMap:{"with-money-mask":{startLoc:{col:64,line:17},endLoc:{col:1,line:38},startBody:{col:64,line:17},endBody:{col:1,line:38}}}}},title:"Components/Form/Controls/MaskedInputText",component:u.B};var E=function(R){return o()(y.Ay,{p:"m"},void 0,o()(c.l,{},void 0,o()(d.B,{inputID:"money",label:"Money",required:!0},void 0,(0,k.jsx)(u.B,Object.assign({},R,{useMask:n.XF,maskOpts:{decimalPlaces:2,prefix:"$",allowNegative:!0,suffix:"",includeThousandsSeparator:!0,decimalRequired:!1}}))),M||(M=o()(v.e,{},void 0,"Submit")),(0,k.jsx)(a.n,Object.assign({label:"Money"},R))))};E.displayName="Template";var P=E.bind({});P.args={id:"money",name:"money",placeholder:"$10,000",rules:{required:{value:!0,message:"Please enter money"}}};var L=["WithMoneyMask"]},"./node_modules/.pnpm/@elliemae+ds-form-helpers-mask-hooks@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-helpers-mask-hooks/dist/esm/hooks/useNumberMask.js"(C,g,e){e.d(g,{XF:()=>q});var s=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),o=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/defaultProps/useMemoMergePropsWithDefault.js"),y=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/validation/typescriptValidator.js"),v=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propTypes/describe.js"),n=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propTypes/PropTypes.js");const c=(_=!1)=>{const i=(0,s.useRef)(null);return(0,s.useMemo)(()=>_?s.useLayoutEffect:s.useEffect,[_])(()=>{i.current?.(),i.current=null}),j=>{i.current=j}},u=(_,i)=>{_.setSelectionRange(i,i,"forward")},d={onChange:()=>null,onKeyDown:()=>null,onBlur:()=>null},a={valueSetter:n.A.func.description("React set state function for the value").isRequired,onChange:n.A.func.description("Callback for onChange"),onKeyDown:n.A.func.description("Callback for onKeyDown")},k={...d,suffix:"",prefix:"",decimalPlaces:2,allowNegative:!1,includeThousandsSeparator:!0,decimalRequired:!1},M={...a,suffix:n.A.string.description("String will be added at the end of the input value").defaultValue(""),prefix:n.A.string.description("String will be added at the start of the input value").defaultValue(""),decimalPlaces:n.A.number.description("Number of decimals allowed").defaultValue(2),allowNegative:n.A.bool.description("Wether the input allows negative number").defaultValue(!1),includeThousandsSeparator:n.A.bool.description("Wether the integer part will be separated by thousands").defaultValue(!0),decimalRequired:n.A.bool.description("Wether decimal part is mandatory").defaultValue(!1),max:n.A.number.description("Maximum value allowed"),min:n.A.number.description("Minimum value allowed")},T={...d,isInternational:!1},p={...a,isInternational:n.A.bool.description("Use or not internaltional phone mask number").defaultValue(!1)},f={...d,filledMask:!1},E={...a,regExp:n.A.arrayOf(n.A.oneOfType([n.A.string,n.A.instanceOf(RegExp)])).description("Array with regexp or special chars per character").isRequired,filledMask:n.A.bool.description("Show blank chars positions").defaultValue(!1)},P={onChange:()=>null,onKeyDown:()=>null,onBlur:()=>null},L={...P,isInternational:!1},R={...P,filledMask:!1,regExp:[]},ee={...P},J={...P,suffix:"",prefix:"",decimalPlaces:2,allowNegative:!1,includeThousandsSeparator:!0,decimalRequired:!1},V={valueSetter:n.A.func.description("React set state function for the value").isRequired,onChange:n.A.func.description("Callback for onChange"),onKeyDown:n.A.func.description("Callback for onKeyDown")},ne={...V,regExp:n.A.arrayOf(n.A.oneOfType([n.A.string,n.A.instanceOf(RegExp)])).description("Array with regexp or special chars per character").isRequired,filledMask:n.A.bool.description("Show blank chars positions").defaultValue(!1)},te={...V,isInternational:n.A.bool.description("Use or not internaltional phone mask number").defaultValue(!1)},oe={...V,suffix:n.A.string.description("String will be added at the end of the input value").defaultValue(""),prefix:n.A.string.description("String will be added at the start of the input value").defaultValue(""),decimalPlaces:n.A.number.description("Number of decimals allowed").defaultValue(2),allowNegative:n.A.bool.description("Wether the input allows negative number").defaultValue(!1),includeThousandsSeparator:n.A.bool.description("Wether the integer part will be separated by thousands").defaultValue(!0),decimalRequired:n.A.bool.description("Wether decimal part is mandatory").defaultValue(!1)},U="useNumberMask",Z="usePhoneMask",se="useRegExpMask",re="useSSNMask",$="useZipCodeMask",F=(_,i)=>_.replace(/\B(?=(\d{3})+(?!\d))/g,i),G=(_,i,h,j,N=!1)=>{const{includeThousandsSeparator:w=!0,allowNegative:l=!1,prefix:A="",suffix:W="",decimalPlaces:S=2,decimalRequired:H=!1}=j,Y=",";let O=-1,m=[A?.length,0].includes(_.indexOf("-"))&&l?"-":"",r=!1,t=String(_).split("").filter((x,X)=>{if(r)return!1;const K=x>="0"&&x<="9";if(x==="."){if(S){const z=O===-1;return z&&(O=X),z}return r=!0,!1}return K});for(A&&t.length&&(m+=A);t.length>=2&&t[0]==="0"&&t[1]!==".";)t=t.splice(1);O=t.findIndex(x=>x===".");let D=t.slice(0,O!==-1?O:t.length);const b=t.slice(O,O+S+1);w&&(D=F(D.join(""),Y).split(""));let B=!1;O!==-1&&!(h==="Backspace"&&b.length===1)?D.length?t=[...D,...b]:(t=["0",...b],B=!0):t=H&&D.length?[...D,"."]:D,h==="Backspace"&&t.length===0&&(m="");let I=0;t[I]==="0"&&i===1+A.length&&(I+=1),B&&(I+=1);for(let x=0;x<i;x+=1)t[I]===Y&&(I+=1),t[I]===_[x]&&(I+=1);if(I+=m.length,N&&S>0&&H)if(!t.includes("."))t.length!==0&&(t=[...t,".",...Array(S).fill("0")],i>=0&&(I+=1+S));else{const X=t.indexOf("."),K=t.length-X-1;if(K<S){const z=S-K;t=[...t,...Array(z).fill("0")]}else K>S&&(t=[...t.slice(0,X+1+S)])}const Q=t.length?W:"";return[m+t.join("")+Q,I]},q=_=>{const i=(0,o.b)(_,k);(0,y.D)(i,M,U);const{valueSetter:h,onChange:j,onKeyDown:N,onBlur:w,...l}=i,A=(0,s.useRef)("Unidentified"),W=c(!0),[,S]=(0,s.useState)(0),H=(0,s.useCallback)(m=>{const r=m.target.value,{decimalRequired:t=!0,decimalPlaces:D=2,suffix:b=""}=l,B=r.indexOf("."),I=r.indexOf("-"),Q=b.length?r.indexOf(b):-1;if(t){if(B>-1){const le=r.slice(B+1,b.length?-b.length:r.length);let x="";for(;le.length+x.length!==D;)x+="0";h((b.length?r.slice(0,Q):r)+x+b)}}else r.length-b.length-1===B?h(r.replace(".","")):r.length-1===I&&h(r.replace("-",""));w&&w(m)},[w,h,l]),Y=(0,s.useCallback)(m=>{A.current=m.code,N&&N(m)},[N]),O=(0,s.useCallback)(m=>{const[r,t]=G(m.target.value,m.target.selectionEnd??0,A.current,l),D=Number(r.replace(l.prefix,"").replace(l.suffix,"").replace(/,/g,""));if(l.min!==void 0&&D<l.min){h(`${l.prefix}${l.min}${l.suffix}`),W(()=>u(m.target,t));return}if(l.max!==void 0&&D>l.max){h(`${l.prefix}${l.max}${l.suffix}`),W(()=>u(m.target,t));return}h(b=>(r===b&&S(B=>B+1),r)),j&&j(m,r),W(()=>u(m.target,t))},[h,W,j,l]);return{onKeyDown:Y,onChange:O,onBlur:H}},ie=(_,i)=>{const[h]=G(_,_.length-1,"",i,!0);return h};q.displayName=U;const ae=(0,v.A)(q);ae.propTypes=M,ae.returnType={onKeyDown:n.A.func.description("On key down event for input").isRequired,onChange:n.A.func.description("On change event for input").isRequired,onBlur:n.A.func.description("On blur event for input").isRequired}}}]);