import{j as e}from"./jsx-runtime-Dfk2JFgj.js";import{r as p}from"./index-CWN_QRa1.js";import{a as l}from"./index-B-lxVbXh.js";import{r as o,k as c}from"./index-DNsi8NHw.js";import{B as S}from"./index-CIVavKlu.js";import"./v4-CtRu48qb.js";import"./CheckGroup-BpaEcK_0.js";import"./DefaultPropsProvider-BPu7lNPC.js";import"./index-6WYjB5r3.js";import"./index-Bk93qgka.js";import"./index-DnVHLn3F.js";import"./index-DllfNvuz.js";import"./index-Cj3pldWQ.js";import"./tiny-invariant-CopsF_GD.js";import"./iframe-BT4Dhm0c.js";import"./index-DgIb9kCw.js";const O={title:"Components/Input - Inline",component:o,argTypes:{type:{control:"select",options:["text","password","email"]},onClick:{table:{disable:!0}},onChange:{table:{disable:!0}},value:{table:{disable:!0}}}},V=r=>{const[n,d]=p.useState(""),u=a=>{d(a)};return e.jsx("div",{style:{width:300},children:e.jsx("div",{children:e.jsx(o,{...r,value:n,onChange:a=>u(a)})})})},t=V.bind({});t.parameters={controls:{include:["type","placeholder","maxLength","disabled"]}};t.args={type:"text",placeholder:"placeholder_text",maxLength:50,onClick:l("Input click"),onChange:l("Typed text has changed")};t.args={type:"text",placeholder:"placeholder_text",maxLength:50,assistiveText:"",disabled:!1,loading:!1,style:{},className:"",onClick:l("Button clicked")};const s=r=>{const n=c.useForm();return e.jsx("div",{style:{width:300},children:e.jsxs(c,{ref:n.ref,onSubmit:()=>{},onValidSubmit:()=>{},children:[e.jsx(c.Item,{name:"inlineRequired",label:"Inline required",rules:[{required:!0,message:"Required"}],children:e.jsx(o,{...r,isRequiere:!0})}),e.jsx(S,{onClick:()=>n.submit(),children:"Submit"})]})})},i=r=>{const[n,d]=p.useState(""),[u,a]=p.useState(""),q=m=>{d(m),a(m)};return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"20px",width:400},children:[e.jsxs("div",{children:[e.jsx("h3",{children:"InputInline con sanitización de HTML"}),e.jsx("p",{children:"Intenta escribir etiquetas HTML como: <script>, <div>, </p>, etc."}),e.jsx(o,{...r,value:n,onChange:q,placeholder:"Escribe etiquetas HTML aquí..."})]}),e.jsxs("div",{children:[e.jsx("h4",{children:"Valor actual (sanitizado):"}),e.jsx("div",{style:{padding:"10px",backgroundColor:"#f5f5f5",border:"1px solid #ddd",borderRadius:"4px",fontFamily:"monospace"},children:u||"(vacío)"})]}),e.jsxs("div",{children:[e.jsx("h4",{children:"Ejemplos de etiquetas que se malforman:"}),e.jsxs("ul",{style:{fontFamily:"monospace",fontSize:"14px"},children:[e.jsx("li",{children:"<script> → < script>"}),e.jsx("li",{children:"<div> → < div>"}),e.jsx("li",{children:"</p> → </ p>"}),e.jsx("li",{children:'<img src="..."> → < img src="...">'})]})]})]})};i.parameters={controls:{include:["type","placeholder","maxLength"]}};i.args={type:"text",placeholder:"Escribe etiquetas HTML aquí...",maxLength:100,onChange:l("HTML sanitized")};s.__docgenInfo={description:"",methods:[],displayName:"RequiredWithForm"};i.__docgenInfo={description:"",methods:[],displayName:"HtmlSanitization"};var h,g,x;t.parameters={...t.parameters,docs:{...(h=t.parameters)==null?void 0:h.docs,source:{originalSource:`args => {
  const [inputValue, setInputValue] = useState<string>("");
  const handleChange = (e: string) => {
    setInputValue(e);
  };
  return <div style={{
    width: 300
  }}>
            <div>
                <InputInline {...args} value={inputValue} onChange={e => handleChange(e)} />
            </div>
        </div>;
}`,...(x=(g=t.parameters)==null?void 0:g.docs)==null?void 0:x.source}}};var v,f,I;s.parameters={...s.parameters,docs:{...(v=s.parameters)==null?void 0:v.docs,source:{originalSource:`args => {
  const form = Form.useForm();
  return <div style={{
    width: 300
  }}>
            <Form ref={form.ref} onSubmit={() => {}} onValidSubmit={() => {}}>
                <Form.Item name="inlineRequired" label="Inline required" rules={[{
        required: true,
        message: "Required"
      }]}>
                    <InputInline {...args} isRequiere />
                </Form.Item>
                <Button onClick={() => form.submit()}>Submit</Button>
            </Form>
        </div>;
}`,...(I=(f=s.parameters)==null?void 0:f.docs)==null?void 0:I.source}}};var b,j,y;i.parameters={...i.parameters,docs:{...(b=i.parameters)==null?void 0:b.docs,source:{originalSource:`args => {
  const [inputValue, setInputValue] = useState<string>("");
  const [sanitizedValue, setSanitizedValue] = useState<string>("");
  const handleChange = (value: string) => {
    setInputValue(value);
    setSanitizedValue(value);
  };
  return <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '20px',
    width: 400
  }}>
            <div>
                <h3>InputInline con sanitización de HTML</h3>
                <p>Intenta escribir etiquetas HTML como: &lt;script&gt;, &lt;div&gt;, &lt;/p&gt;, etc.</p>
                <InputInline {...args} value={inputValue} onChange={handleChange} placeholder="Escribe etiquetas HTML aquí..." />
            </div>
            <div>
                <h4>Valor actual (sanitizado):</h4>
                <div style={{
        padding: '10px',
        backgroundColor: '#f5f5f5',
        border: '1px solid #ddd',
        borderRadius: '4px',
        fontFamily: 'monospace'
      }}>
                    {sanitizedValue || '(vacío)'}
                </div>
            </div>
            <div>
                <h4>Ejemplos de etiquetas que se malforman:</h4>
                <ul style={{
        fontFamily: 'monospace',
        fontSize: '14px'
      }}>
                    <li>&lt;script&gt; → &lt; script&gt;</li>
                    <li>&lt;div&gt; → &lt; div&gt;</li>
                    <li>&lt;/p&gt; → &lt;/ p&gt;</li>
                    <li>&lt;img src="..."&gt; → &lt; img src="..."&gt;</li>
                </ul>
            </div>
        </div>;
}`,...(y=(j=i.parameters)==null?void 0:j.docs)==null?void 0:y.source}}};const A=["Normal","RequiredWithForm","HtmlSanitization"];export{i as HtmlSanitization,t as Normal,s as RequiredWithForm,A as __namedExportsOrder,O as default};
