import{e as B,V as Y,f as i,B as h,A as $,v as y,g,W as x,o as s,Z as C,t as z,p as L,r as t,i as T,w as N}from"./iframe-Bl-fVlm8.js";import{P as O}from"./PzText-D5PUnIjq.js";import{_ as R}from"./PzIcon-cRuuou9i.js";import{P as E}from"./PzLabel-avnfC9tn.js";import{_ as F}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const A={key:0,class:"pz-input-date-wrap"},j=["id","value","placeholder","disabled","required","min","max"],W=["id","value","placeholder","disabled","required"],U=["id"],Z={key:2,class:"pz-input-date-error"},p=B({name:"PzInputDate",__name:"PzInputDate",props:x({name:{},modelValue:{},label:{default:""},errorMessage:{default:""},placeholder:{default:""},min:{default:void 0},max:{default:void 0},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},editable:{type:Boolean,default:!0},isLightSkin:{type:Boolean,default:!1}},{modelValue:{},modelModifiers:{}}),emits:x(["focus","blur","update:modelValue"],["update:modelValue"]),setup(e,{emit:r}){const d=r,a=Y(e,"modelValue"),o=t(!1),f=t(null),u=t(null),b=/^(\d{4})-(\d{2})-(\d{2})$/,c=n=>{if(!n)return"";const l=b.exec(n);return l?`${l[3]}.${l[2]}.${l[1]}`:n},v=async()=>{var n,l;o.value||(o.value=!0,await T(),(n=u.value)==null||n.focus(),(l=u.value)==null||l.showPicker())},I=()=>{d("focus"),v()},D=()=>{v()},M=()=>{o.value=!1,d("blur")},P=n=>{const l=n.target;a.value=l.value||null},S=()=>{if(a.value){a.value=null;return}v()};return(n,l)=>(s(),i("div",{class:g(["pz-input-date",{light:e.isLightSkin,error:e.errorMessage,disabled:e.disabled}])},[h(y(E),{label:e.label,for:e.name,required:e.required,disabled:e.disabled},{default:$(()=>[e.editable?(s(),i("span",A,[o.value?(s(),i("input",{key:0,id:e.name,ref_key:"dateInputRef",ref:u,type:"date",value:a.value??"",placeholder:e.placeholder,disabled:e.disabled,required:e.required,min:e.min,max:e.max,class:"pz-input-date-control",onInput:P,onBlur:M},null,40,j)):(s(),i("input",{key:1,id:e.name,ref_key:"textInputRef",ref:f,type:"text",readonly:"",value:c(a.value),placeholder:e.placeholder,disabled:e.disabled,required:e.required,class:"pz-input-date-control",onFocus:I,onClick:D},null,40,W)),h(y(R),{name:a.value?"close":"event",class:g(["pz-input-date-icon",{"pz-input-date-icon--clear":a.value}]),onClick:C(S,["prevent"])},null,8,["name","class"])])):(s(),i("span",{key:1,id:e.name,class:"pz-input-date-readonly"},z(c(a.value)),9,U)),e.errorMessage?(s(),i("span",Z,z(e.errorMessage),1)):L("",!0)]),_:1},8,["label","for","required","disabled"])],2))}}),V=F(p,[["__scopeId","data-v-13e3fa69"]]);p.__docgenInfo=Object.assign({displayName:p.name??p.__name},{name:"PzInputDate",exportName:"default",displayName:"PzInputDate",description:"",tags:{},props:[{name:"name",required:!0,type:{name:"string"}},{name:"modelValue",required:!0,type:{name:"union",elements:[{name:"string"},{name:"null"}]}},{name:"label",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:"min",required:!1,type:{name:"string"},defaultValue:{func:!1,value:"undefined"}},{name:"max",required:!1,type:{name:"string"},defaultValue:{func:!1,value:"undefined"}},{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:"update:modelValue",type:{names:["union"],elements:[{name:"string"},{name:"null"}]}}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Form/PzInputDate/PzInputDate.vue"]});const G=e=>`<template>
  <PzInputDate
    v-model="value"
    ${[`name="${e.name}"`,e.label?`label="${e.label}"`:null,e.placeholder?`placeholder="${e.placeholder}"`:null,e.min?`min="${e.min}"`:null,e.max?`max="${e.max}"`:null,e.required?':required="true"':null,e.disabled?':disabled="true"':null,e.editable===!1?':editable="false"':null,e.errorMessage?`error-message="${e.errorMessage}"`:null,e.isLightSkin?':is-light-skin="true"':null].filter(d=>!!d).join(" ")}
  />
</template>`,H={title:"Components/Form/PzInputDate",component:V,parameters:{docs:{description:{component:"Use `PzInputDate` for date picking. Blurred values render as `dd.mm.yyyy` text and switch to the native date picker on focus, with a clear/calendar icon toggle. `v-model` operates on ISO `yyyy-mm-dd` strings."},source:{transform:(e,r)=>G(r.args??H.args)}}},args:{name:"pz-input-date-story",label:"Дата",modelValue:"",placeholder:"дд.мм.рррр",errorMessage:"",min:void 0,max:void 0,required:!1,disabled:!1,editable:!0,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 ISO-format value (`YYYY-MM-DD`). Required."},placeholder:{control:"text",description:"Placeholder shown when no date is selected."},min:{control:"text",description:"Earliest allowed date (`YYYY-MM-DD`)."},max:{control:"text",description:"Latest allowed date (`YYYY-MM-DD`)."},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, blocks focus/picker/clear interactions and keeps the value read-only."},isLightSkin:{control:"boolean",description:"Enables the light alternate layout."}},render:e=>({components:{pzInputDate:V,pzText:O},setup(){const r=t(e.modelValue??""),d=t("2026-04-21"),a=t(""),o=t(""),f=t("2026-04-21"),u=t(""),b=t("");return N(()=>e.modelValue,c=>{r.value=c??""}),{args:e,value:r,sharedValue:d,defaultValue:a,requiredValue:o,presetValue:f,rangeValue:u,errorValue:b}},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-date
              v-model="value"
              :name="args.name"
              :label="args.label"
              :placeholder="args.placeholder"
              :min="args.min"
              :max="args.max"
              :error-message="args.errorMessage"
              :required="args.required"
              :disabled="args.disabled"
              :editable="args.editable"
              :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-date v-model="sharedValue" name="two-way-a" label="Поле A" placeholder="дд.мм.рррр" />
            <pz-input-date v-model="sharedValue" name="two-way-b" label="Поле B (таке саме значення)" placeholder="дд.мм.рррр" />
            <pz-text variant="body-regular">Поточне значення (ISO): "{{ 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-date v-model="defaultValue" name="date-default" label="Дата" placeholder="дд.мм.рррр" />
          <pz-input-date v-model="requiredValue" name="date-required" label="Обов'язкова дата" placeholder="дд.мм.рррр" required />
          <pz-input-date v-model="presetValue" name="date-value" label="З обраною датою (рендериться як 21.04.2026)" />
          <pz-input-date v-model="rangeValue" name="date-range" label="З обмеженнями: від 2026-01-01 до 2026-12-31" placeholder="дд.мм.рррр" min="2026-01-01" max="2026-12-31" />
          <pz-input-date v-model="errorValue" name="date-error" label="Помилка" placeholder="дд.мм.рррр" error-message="Оберіть дату" />
          <pz-input-date model-value="" name="date-disabled" label="Disabled" placeholder="дд.мм.рррр" disabled />
          <pz-input-date model-value="2026-04-21" name="date-readonly" label="Readonly (editable: false)" :editable="false" />
        </section>
      </div>
    `})},m={parameters:{docs:{description:{story:"Інтерактивний приклад date-інпуту. Блуром показано дату у форматі `дд.мм.рррр`; при фокусі відкривається нативний пікер. Нижче — перевірка two-way binding і базові стани."}}}};var q,k,w;m.parameters={...m.parameters,docs:{...(q=m.parameters)==null?void 0:q.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: "Інтерактивний приклад date-інпуту. Блуром показано дату у форматі \`дд.мм.рррр\`; при фокусі відкривається нативний пікер. Нижче — перевірка two-way binding і базові стани."
      }
    }
  }
}`,...(w=(k=m.parameters)==null?void 0:k.docs)==null?void 0:w.source}}};const ae=["Playground"];export{m as Playground,ae as __namedExportsOrder,H as default};
