import{e as P,V as I,f as u,B as M,A as $,v as y,g as h,W as z,o as r,q as B,X as L,Y as E,t as c,x as N,p as v,r as l,w as T}from"./iframe-Bl-fVlm8.js";import{P as w}from"./PzText-D5PUnIjq.js";import{_ as D}from"./PzIcon-cRuuou9i.js";import{P as F}from"./PzLabel-avnfC9tn.js";import{_ as O}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const U={class:"pz-input-wrap"},j=["id","placeholder","disabled","maxlength","type","required"],A=["id"],W={key:3,class:"pz-input-counter"},X={key:0,class:"pz-input-error"},f=P({name:"PzInput",__name:"PzInput",props:z({name:{},modelValue:{},label:{default:""},icon:{default:""},inputClass:{default:""},errorMessage:{default:""},placeholder:{default:""},type:{default:"text"},counted:{type:Boolean,default:!1},maxSize:{default:255},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},editable:{type:Boolean,default:!0},isLightSkin:{type:Boolean,default:!1}},{modelValue:{},modelModifiers:{}}),emits:z(["focus","blur","icon-click","update:modelValue"],["update:modelValue"]),setup(e,{emit:t}){const n=t,o=I(e,"modelValue");return(s,a)=>(r(),u("div",{class:h(["pz-input",{light:e.isLightSkin,error:e.errorMessage,disabled:e.disabled}])},[M(y(F),{label:e.label,for:e.name,required:e.required,disabled:e.disabled},{default:$(()=>{var d;return[B("span",U,[e.editable?L((r(),u("input",{key:0,id:e.name,"onUpdate:modelValue":a[0]||(a[0]=i=>o.value=i),placeholder:e.placeholder,disabled:e.disabled,maxlength:e.counted?e.maxSize:void 0,type:e.type,required:e.required,class:h(["pz-input-control",[{"pz-input-control--with-icon":e.icon,"pz-input-control--counted":e.counted},e.inputClass]]),onBlur:a[1]||(a[1]=i=>n("blur")),onFocus:a[2]||(a[2]=i=>n("focus"))},null,42,j)),[[E,o.value]]):(r(),u("span",{key:1,id:e.name,class:"pz-input-readonly"},c(o.value),9,A)),e.icon?(r(),N(y(D),{key:2,name:e.icon,class:"pz-input-icon",onClick:a[3]||(a[3]=i=>n("icon-click",i))},null,8,["name"])):v("",!0),e.counted?(r(),u("span",W,c(((d=o.value)==null?void 0:d.length)||0)+"/"+c(e.maxSize),1)):v("",!0)]),e.errorMessage?(r(),u("span",X,c(e.errorMessage),1)):v("",!0)]}),_:1},8,["label","for","required","disabled"])],2))}}),b=O(f,[["__scopeId","data-v-d1a46012"]]);f.__docgenInfo=Object.assign({displayName:f.name??f.__name},{name:"PzInput",exportName:"default",displayName:"PzInput",description:"",tags:{},props:[{name:"name",required:!0,type:{name:"string"}},{name:"modelValue",required:!0,type:{name:"string"}},{name:"label",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"icon",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"inputClass",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"errorMessage",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"placeholder",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"type",required:!1,type:{name:"PzInputType"},defaultValue:{func:!1,value:'"text"'}},{name:"counted",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"maxSize",required:!1,type:{name:"number"},defaultValue:{func:!1,value:"255"}},{name:"required",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"disabled",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"editable",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"isLightSkin",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],events:[{name:"focus"},{name:"blur"},{name:"icon-click",type:{names:["MouseEvent"]}},{name:"update:modelValue",type:{names:["string"]}}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Form/PzInput/PzInput.vue"]});const Y=e=>`<template>
  <PzInput
    v-model="value"
    ${[`name="${e.name}"`,e.label?`label="${e.label}"`:null,e.placeholder?`placeholder="${e.placeholder}"`:null,e.type&&e.type!=="text"?`type="${e.type}"`:null,e.icon?`icon="${e.icon}"`:null,e.required?':required="true"':null,e.disabled?':disabled="true"':null,e.counted?':counted="true"':null,e.maxSize?`:max-size="${e.maxSize}"`:null,e.errorMessage?`error-message="${e.errorMessage}"`:null,e.isLightSkin?':is-light-skin="true"':null].filter(n=>!!n).join(" ")}
  />
</template>`,R={title:"Components/Form/PzInput",component:b,parameters:{docs:{description:{component:"Use `PzInput` for text-based form controls. It wraps a native `<input>` with `PzLabel`, supports icons, character counting, a readonly preview mode, and the standard disabled/error states."},source:{transform:(e,t)=>Y(t.args??R.args)}}},args:{name:"pz-input-story",label:"Назва поля",modelValue:"",placeholder:"Введіть значення...",type:"text",errorMessage:"",icon:"",required:!1,disabled:!1,editable:!0,counted:!1,maxSize:255,isLightSkin:!1},argTypes:{name:{control:"text",description:"Native input `id`/`name`."},label:{control:"text",description:"Label text shown above the input."},modelValue:{control:"text",description:"Current value bound via `v-model` (required)."},placeholder:{control:"text",description:"Placeholder shown when the input is empty."},type:{control:"inline-radio",options:["text","email","password"],description:"Native input type."},icon:{control:"text",description:"Optional `PzIcon` name rendered inside the input."},errorMessage:{control:"text",description:"Validation message shown below the input; enables error styling."},required:{control:"boolean",description:"Marks the field as required in the label."},disabled:{control:"boolean",description:"Disables the input and applies muted styling."},editable:{control:"boolean",description:"When false, renders the value as readonly text instead of an input."},counted:{control:"boolean",description:"Shows a `length/maxSize` counter next to the input."},maxSize:{control:"number",description:"Maximum character length used by the counter and `maxlength`. Only enforced when `counted` is true."},isLightSkin:{control:"boolean",description:"Enables the light alternate layout."}},render:e=>({components:{pzInput:b,pzText:w},setup(){const t=l(e.modelValue??""),n=l(""),o=l(""),s=l(""),a=l(""),d=l(""),i=l("");return T(()=>e.modelValue,S=>{t.value=S??""}),{args:e,value:t,sharedValue:n,defaultValue:o,requiredValue:s,countedValue:a,iconValue:d,errorValue:i}},template:`
      <div style="display: flex; flex-direction: column; gap: var(--pz-space-24); max-width: 480px;">
        <section>
          <pz-text variant="h4-bold">Component API</pz-text>
          <div style="margin-top: var(--pz-space-16);">
            <pz-input
              v-model="value"
              :name="args.name"
              :label="args.label"
              :placeholder="args.placeholder"
              :type="args.type"
              :icon="args.icon"
              :error-message="args.errorMessage"
              :required="args.required"
              :disabled="args.disabled"
              :editable="args.editable"
              :counted="args.counted"
              :max-size="args.maxSize"
              :is-light-skin="args.isLightSkin"
            />
          </div>
        </section>

        <section>
          <pz-text variant="h4-bold">Two-way binding</pz-text>
          <div style="display: flex; flex-direction: column; gap: var(--pz-space-8); margin-top: var(--pz-space-16);">
            <pz-input v-model="sharedValue" name="two-way-a" label="Поле A" placeholder="Введіть значення..." />
            <pz-input v-model="sharedValue" name="two-way-b" label="Поле B (таке саме значення)" placeholder="Введіть значення..." />
            <pz-text variant="body-regular">Поточне значення: "{{ sharedValue }}"</pz-text>
          </div>
        </section>

        <section style="display: flex; flex-direction: column; gap: var(--pz-space-16);">
          <pz-text variant="h4-bold">States</pz-text>
          <pz-input v-model="defaultValue" name="input-default" label="Звичайне поле" placeholder="Введіть значення..." />
          <pz-input v-model="requiredValue" name="input-required" label="Обов'язкове поле" placeholder="Введіть значення..." required />
          <pz-input v-model="countedValue" name="input-counted" label="З лічильником" placeholder="Введіть значення..." counted :max-size="120" />
          <pz-input v-model="iconValue" name="input-icon" label="З іконкою" placeholder="Пошук..." icon="search" />
          <pz-input v-model="errorValue" name="input-error" label="Помилка" placeholder="Введіть значення..." error-message="Поле заповнено некоректно" />
          <pz-input model-value="" name="input-disabled" label="Disabled" placeholder="Недоступно" disabled />
          <pz-input model-value="Текст, який не можна редагувати" name="input-readonly" label="Readonly" :editable="false" />
        </section>
      </div>
    `})},p={parameters:{docs:{description:{story:"Інтерактивний приклад текстового інпуту. Нижче показано two-way binding та базові стани: required, counted, з іконкою, помилка, disabled і readonly."}}}},m={name:"Click event",parameters:{docs:{description:{story:"PzInput emits a `click` event with the native `MouseEvent`. Useful for triggering popovers, pickers, or read-only flows on input click."}}},render:()=>({components:{pzInput:b,pzText:w},setup(){const e=l(""),t=l(0),n=l("—");return{clickValue:e,clickCount:t,lastCoords:n,onClick:s=>{t.value+=1,n.value=`x: ${String(s.clientX)}, y: ${String(s.clientY)}`}}},template:`
      <div style="display: flex; flex-direction: column; gap: var(--pz-space-16); max-width: 480px;">
        <pz-text variant="h4-bold">@click</pz-text>
        <pz-input
          v-model="clickValue"
          name="input-click"
          label="Натисни на поле"
          placeholder="Click anywhere inside..."
          icon="touch_app"
          @icon-click="onClick"
        />
        <pz-text variant="body-regular">
          Clicks: <strong>{{ clickCount }}</strong> · Last position: <strong>{{ lastCoords }}</strong>
        </pz-text>
      </div>
    `})};var g,x,k;p.parameters={...p.parameters,docs:{...(g=p.parameters)==null?void 0:g.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: "Інтерактивний приклад текстового інпуту. Нижче показано two-way binding та базові стани: required, counted, з іконкою, помилка, disabled і readonly."
      }
    }
  }
}`,...(k=(x=p.parameters)==null?void 0:x.docs)==null?void 0:k.source}}};var V,q,C;m.parameters={...m.parameters,docs:{...(V=m.parameters)==null?void 0:V.docs,source:{originalSource:`{
  name: "Click event",
  parameters: {
    docs: {
      description: {
        story: "PzInput emits a \`click\` event with the native \`MouseEvent\`. Useful for triggering popovers, pickers, or read-only flows on input click."
      }
    }
  },
  render: () => ({
    components: {
      pzInput: PzInput,
      pzText: PzText
    },
    setup() {
      const clickValue = ref<string>("");
      const clickCount = ref<number>(0);
      const lastCoords = ref<string>("—");
      const onClick = (event: MouseEvent): void => {
        clickCount.value += 1;
        lastCoords.value = \`x: \${String(event.clientX)}, y: \${String(event.clientY)}\`;
      };
      return {
        clickValue,
        clickCount,
        lastCoords,
        onClick
      };
    },
    template: \`
      <div style="display: flex; flex-direction: column; gap: var(--pz-space-16); max-width: 480px;">
        <pz-text variant="h4-bold">@click</pz-text>
        <pz-input
          v-model="clickValue"
          name="input-click"
          label="Натисни на поле"
          placeholder="Click anywhere inside..."
          icon="touch_app"
          @icon-click="onClick"
        />
        <pz-text variant="body-regular">
          Clicks: <strong>{{ clickCount }}</strong> · Last position: <strong>{{ lastCoords }}</strong>
        </pz-text>
      </div>
    \`
  })
}`,...(C=(q=m.parameters)==null?void 0:q.docs)==null?void 0:C.source}}};const _=["Playground","ClickEvent"];export{m as ClickEvent,p as Playground,_ as __namedExportsOrder,R as default};
