@prozorro/prozorro-ui 0.0.8 → 0.0.10-beta

package/dist/app/assets/PzImageInput.stories-CTksIxMS.js

@@ -0,0 +1,109 @@
+import{d as H,w as k,e as b,q,j as B,y as V,f as G,g as u,o as f,p as z,i as J,u as K,t as P,m as y,r as s}from"./iframe-Ckq2fQkL.js";import{_ as Q,P as X}from"./PzText-BOcxbzaG.js";import{P as Y}from"./PzBtn-Bz2NPCiD.js";import{_ as Z}from"./PzIcon-DTWQGv5c.js";import{P as ee}from"./PzLabel-jmQOAHGo.js";import{c as C,d as x}from"./configs-CZIaFchr.js";import"./preload-helper-C1FmrZbK.js";const ae={class:"pz-image-input-wrap"},te={key:1,class:"pz-image-input-preview"},le=["src","alt"],ie=["aria-label"],ne=["id","name","accept","disabled"],re={class:"pz-image-input-helper"},se={key:0,class:"pz-image-input-error"},I=H({name:"PzImageInput",__name:"PzImageInput",props:{name:{},modelValue:{default:null},label:{default:""},extensions:{default:()=>[...x.acceptedExtensions]},maxSizeBytes:{default:x.maxSizeBytes},imageWidth:{default:x.imageWidth},imageHeight:{default:x.imageHeight},textConfig:{default:()=>({...C})},previewUrl:{default:""},errorMessage:{default:""},hasServerValidations:{type:Boolean,default:!1},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},editable:{type:Boolean,default:!0}},emits:["focus","blur","update:modelValue"],setup(e,{emit:o}){const a=e,m=o,v=s(null),p=s(""),c=s(""),d=u(()=>a.textConfig??C),E=u(()=>a.modelValue instanceof File),j=u(()=>!!a.previewUrl),U=u(()=>E.value||j.value),M=u(()=>p.value||a.previewUrl||""),T=u(()=>a.extensions.join(",")),w=u(()=>a.errorMessage||c.value);k(()=>a.modelValue,t=>{t instanceof File||(p.value="")});const F=()=>{var t;(t=v.value)==null||t.click()},N=(t,l,n)=>new Promise(i=>{if(!l&&!n){i(!0);return}const r=URL.createObjectURL(t),g=new Image;g.onload=()=>{URL.revokeObjectURL(r);const W=!l||g.naturalWidth===l,_=!n||g.naturalHeight===n;i(W&&_)},g.onerror=()=>{URL.revokeObjectURL(r),i(!1)},g.src=r}),A=t=>new Promise((l,n)=>{const i=new FileReader;i.onload=()=>{l(typeof i.result=="string"?i.result:"")},i.onerror=()=>n(i.error),i.readAsDataURL(t)}),$=async t=>{if(a.hasServerValidations)return"";const l=t.name.toLowerCase();return a.extensions.some(r=>l.endsWith(r.toLowerCase()))?t.size>a.maxSizeBytes?d.value.fileTooLargeMessage:await N(t,a.imageWidth,a.imageHeight)?"":d.value.invalidDimensionsMessage:d.value.invalidExtensionMessage},O=async t=>{var r;const l=t.target,n=(r=l.files)==null?void 0:r[0];if(l.value="",c.value="",!n)return;const i=await $(n);if(i){c.value=i,p.value="",a.modelValue instanceof File&&m("update:modelValue",null);return}p.value=await A(n),m("update:modelValue",n)};return(t,l)=>(f(),b("div",{class:G(["pz-image-input",{error:!!w.value,disabled:e.disabled}])},[q(V(ee),{label:e.label,for:e.name,required:e.required,disabled:e.disabled},{default:B(()=>[z("div",ae,[e.editable&&!U.value?(f(),J(V(Y),{key:0,variant:"primary-outline",type:"button",disabled:e.disabled,onClick:F},{default:B(()=>[K(P(d.value.buttonLabel),1)]),_:1},8,["disabled"])):y("",!0),U.value?(f(),b("div",te,[z("img",{src:M.value,alt:e.label||d.value.buttonLabel,class:"pz-image-input-preview-img"},null,8,le),e.editable&&!e.disabled?(f(),b("button",{key:0,type:"button",class:"pz-image-input-preview-edit","aria-label":d.value.editButtonLabel,onClick:F},[q(V(Z),{name:"edit",size:"16"})],8,ie)):y("",!0)])):y("",!0),z("input",{id:e.name,ref_key:"imageInputRef",ref:v,class:"pz-image-input-native",type:"file",name:e.name,accept:T.value,disabled:e.disabled||!e.editable,onChange:O,onFocus:l[0]||(l[0]=n=>m("focus")),onBlur:l[1]||(l[1]=n=>m("blur"))},null,40,ne)]),z("span",re,P(d.value.helperText),1),w.value?(f(),b("span",se,P(w.value),1)):y("",!0)]),_:1},8,["label","for","required","disabled"])],2))}}),D=Q(I,[["__scopeId","data-v-cdfa2165"]]);I.__docgenInfo=Object.assign({displayName:I.name??I.__name},{name:"PzImageInput",exportName:"default",displayName:"PzImageInput",description:"",tags:{},props:[{name:"name",required:!0,type:{name:"string"}},{name:"modelValue",required:!1,type:{name:"PzImageInputValue"},defaultValue:{func:!1,value:"null"}},{name:"label",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"extensions",required:!1,type:{name:"Array",elements:[{name:"string"}]},defaultValue:{func:!1,value:"() => [...pzFormImageUploadRules.acceptedExtensions]"}},{name:"maxSizeBytes",required:!1,type:{name:"number"},defaultValue:{func:!1,value:"pzFormImageUploadRules.maxSizeBytes"}},{name:"imageWidth",required:!1,type:{name:"number"},defaultValue:{func:!1,value:"pzFormImageUploadRules.imageWidth"}},{name:"imageHeight",required:!1,type:{name:"number"},defaultValue:{func:!1,value:"pzFormImageUploadRules.imageHeight"}},{name:"textConfig",required:!1,type:{name:"PzFormImageInputTextConfig"},defaultValue:{func:!1,value:"() => ({ ...pzFormImageUploadTexts })"}},{name:"previewUrl",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"errorMessage",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"hasServerValidations",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{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"}}],events:[{name:"focus"},{name:"blur"},{name:"update:modelValue",type:{names:["PzImageInputValue"]}}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Form/PzImageInput/PzImageInput.vue"]});const oe=e=>`<template>
+  <PzImageInput
+    v-model="image"
+    ${[`name="${e.name}"`,e.label?`label="${e.label}"`:null,e.previewUrl?`preview-url="${e.previewUrl}"`: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.hasServerValidations?':has-server-validations="true"':null].filter(a=>!!a).join(" ")}
+  />
+</template>`,de="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20800%20800'%3E%3Crect%20width%3D'800'%20height%3D'800'%20fill%3D'%23E7F1FF'%2F%3E%3Ctext%20x%3D'50%25'%20y%3D'50%25'%20dominant-baseline%3D'middle'%20text-anchor%3D'middle'%20fill%3D'%231B4DAF'%20font-family%3D'Arial'%20font-size%3D'96'%3EPreview%20800%C3%97800%3C%2Ftext%3E%3C%2Fsvg%3E",ue={title:"Components/Form/PzImageInput",component:D,parameters:{docs:{description:{component:"Use `PzImageInput` to collect a single image. It validates the picked file against extension, size and expected dimensions (defaults 800×800 px, .png/.jpg/.jpeg, up to 1 МБ) and renders a preview with a replace action. Pass `previewUrl` to pre-fill the preview from an existing URL and `textConfig` to override the labels/messages for reuse in other projects."},source:{transform:(e,o)=>oe(o.args??ue.args)}}},args:{name:"pz-image-input-story",label:"Логотип",modelValue:null,previewUrl:"",errorMessage:"",hasServerValidations:!1,required:!1,disabled:!1,editable:!0},argTypes:{name:{control:"text",description:"Native input `id`/`name`."},label:{control:"text",description:"Текст лейбла над полем."},previewUrl:{control:"text",description:"URL існуючого зображення для попереднього перегляду."},errorMessage:{control:"text",description:"Зовнішнє повідомлення про помилку; вмикає error-стан."},hasServerValidations:{control:"boolean",description:"Прапорець, що сигналізує про наявність серверних помилок валідації; текст передається через `errorMessage`."},required:{control:"boolean",description:"Позначає поле як обов'язкове."},disabled:{control:"boolean",description:"Блокує взаємодію з контролом."},editable:{control:"boolean",description:"Коли `false`, приховує кнопки додавання та редагування — компонент працює у режимі прев'ю."}},render:e=>({components:{pzImageInput:D,pzText:X},setup(){const o=s(e.modelValue??null),a=s(null),m=s(null),v=s(null),p=s(null);return k(()=>e.modelValue,c=>{o.value=c??null}),{args:e,image:o,defaultImage:a,errorImage:m,disabledImage:v,customImage:p,samplePreviewUrl:de}},template:`
+      <div style="display: flex; flex-direction: column; gap: var(--pz-space-24); max-width: 560px;">
+        <section>
+          <pz-text variant="h4-bold">API компонента</pz-text>
+          <div style="margin-top: var(--pz-space-16);">
+            <pz-image-input
+              v-model="image"
+              :name="args.name"
+              :label="args.label"
+              :preview-url="args.previewUrl"
+              :required="args.required"
+              :disabled="args.disabled"
+              :editable="args.editable"
+              :error-message="args.errorMessage"
+              :has-server-validations="args.hasServerValidations"
+            />
+          </div>
+        </section>
+
+        <section>
+          <pz-text variant="h4-bold">Порожній стан</pz-text>
+          <div style="margin-top: var(--pz-space-16);">
+            <pz-image-input
+              v-model="defaultImage"
+              name="image-default"
+              label="Завантажте зображення"
+            />
+          </div>
+        </section>
+
+        <section>
+          <pz-text variant="h4-bold">З попередньо завантаженим зображенням</pz-text>
+          <div style="margin-top: var(--pz-space-16);">
+            <pz-image-input
+              name="image-preview"
+              label="Логотип організації"
+              :preview-url="samplePreviewUrl"
+            />
+          </div>
+        </section>
+
+        <section>
+          <pz-text variant="h4-bold">Стани</pz-text>
+          <div style="display: flex; flex-direction: column; gap: var(--pz-space-16); margin-top: var(--pz-space-16);">
+            <pz-image-input
+              v-model="errorImage"
+              name="image-error"
+              label="Помилка"
+              error-message="Поле обов'язкове для заповнення"
+              required
+            />
+            <pz-image-input
+              name="image-server-errors"
+              label="Серверна валідація"
+              :preview-url="samplePreviewUrl"
+              :has-server-validations="true"
+              error-message="Сервер відхилив зображення: розмір перевищує ліміт."
+            />
+            <pz-image-input
+              v-model="disabledImage"
+              name="image-disabled"
+              label="Недоступне поле"
+              disabled
+            />
+            <pz-image-input
+              name="image-readonly"
+              label="Readonly (editable=false)"
+              :preview-url="samplePreviewUrl"
+              :editable="false"
+            />
+          </div>
+        </section>
+
+        <section>
+          <pz-text variant="h4-bold">Власні обмеження</pz-text>
+          <div style="margin-top: var(--pz-space-16);">
+            <pz-image-input
+              v-model="customImage"
+              name="image-custom"
+              label="PNG/JPG, до 2 МБ, будь-який розмір"
+              :max-size-bytes="2 * 1024 * 1024"
+              :image-width="0"
+              :image-height="0"
+              :text-config="{
+                buttonLabel: 'Завантажити банер',
+                helperText: 'Допустимі формати .png, .jpg, .jpeg до 2 МБ',
+                invalidExtensionMessage: 'Підтримуються лише .png, .jpg, .jpeg',
+                fileTooLargeMessage: 'Файл перевищує 2 МБ',
+                invalidDimensionsMessage: 'Некоректні розміри зображення',
+                editButtonLabel: 'Замінити банер',
+              }"
+            />
+          </div>
+        </section>
+      </div>
+    `})},h={parameters:{docs:{description:{story:"Інтерактивний приклад `PzImageInput` з порожнім станом, прев'ю з `previewUrl`, readonly, disabled, помилками та власними правилами валідації."}}}};var L,R,S;h.parameters={...h.parameters,docs:{...(L=h.parameters)==null?void 0:L.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "Інтерактивний приклад \`PzImageInput\` з порожнім станом, прев'ю з \`previewUrl\`, readonly, disabled, помилками та власними правилами валідації."
+      }
+    }
+  }
+}`,...(S=(R=h.parameters)==null?void 0:R.docs)==null?void 0:S.source}}};const ze=["Playground"];export{h as Playground,ze as __namedExportsOrder,ue as default};

package/dist/app/assets/PzInfoBlockLayout-DbFWjWZn.css

@@ -0,0 +1 @@
+.pz-info-block-layout-story{display:grid;gap:var(--pz-space-24)}.pz-info-block-layout-story-hero,.pz-info-block-layout-story-group{padding:var(--pz-space-24);border:1px solid color-mix(in srgb,var(--pz-color-grey-40) 58%,transparent);border-radius:28px;background:linear-gradient(180deg,color-mix(in srgb,var(--pz-color-white) 98%,transparent),color-mix(in srgb,var(--pz-color-grey-40) 10%,var(--pz-color-white))),linear-gradient(135deg,color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent),transparent 46%);box-shadow:0 18px 60px color-mix(in srgb,var(--pz-color-black-90) 8%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 96%,transparent)}.pz-info-block-layout-story-group-muted{background:linear-gradient(180deg,color-mix(in srgb,#dbe8e2 72%,var(--pz-color-white)),color-mix(in srgb,#edf4f0 86%,var(--pz-color-white))),linear-gradient(135deg,color-mix(in srgb,#6f9a8e 8%,transparent),transparent 44%)}.pz-info-block-layout-story-hero,.pz-info-block-layout-story-group-header{display:flex;align-items:start;justify-content:space-between;gap:var(--pz-space-16)}.pz-info-block-layout-story-board,.pz-info-block-layout-story-gallery,.pz-info-block-layout-story-stack{display:grid;gap:var(--pz-space-24)}.pz-info-block-layout-story-surface{padding:clamp(24px,3vw,36px);border:1px solid color-mix(in srgb,var(--pz-color-grey-40) 54%,transparent);border-radius:28px;background:color-mix(in srgb,var(--pz-color-white) 96%,transparent);box-shadow:inset 0 1px color-mix(in srgb,var(--pz-color-white) 98%,transparent),0 20px 60px color-mix(in srgb,var(--pz-color-black-90) 8%,transparent)}.pz-info-block-layout-story-eyebrow,.pz-info-block-layout-story-group-kicker,.pz-info-block-layout-story-chip{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.pz-info-block-layout-story-eyebrow,.pz-info-block-layout-story-group-kicker{color:var(--pz-color-text-link-hover)}.pz-info-block-layout-story-chip{padding:10px 14px;border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-50) 10%,transparent);color:var(--pz-color-text-link-hover)}.pz-info-block-layout-story-badge{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;padding-inline:10px;border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-50) 14%,transparent);color:var(--pz-color-text-link-hover);font-size:13px;font-weight:700}.pz-info-block-layout-story-helper-link{display:inline-flex;align-items:start;gap:var(--pz-space-8);color:var(--pz-color-text-secondary);font-size:clamp(16px,1.35vw,18px);font-style:italic;line-height:1.45;text-decoration:none}.pz-info-block-layout-story-helper-link:hover{color:var(--pz-color-text-link-hover)}.pz-info-block-layout-story-helper-link .pz-icon{margin-top:2px;--pz-icon-color: currentcolor}.pz-info-block-layout-story-info-list{display:grid;gap:var(--pz-space-20)}.pz-info-block-layout-story-info-row{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,1fr);gap:24px;align-items:start}.pz-info-block-layout-story-info-label{display:flex;align-items:center;gap:12px;min-width:0;color:var(--pz-color-text-primary);font-size:14px;font-weight:700;line-height:1.45}.pz-info-block-layout-story-info-label:after{flex:1;min-width:24px;border-bottom:1px dotted color-mix(in srgb,var(--pz-color-grey-40) 90%,transparent);content:""}.pz-info-block-layout-story-info-value{display:grid;gap:6px;min-width:0;color:var(--pz-color-text-primary);font-size:clamp(15px,1.25vw,17px);line-height:1.45}.pz-info-block-layout-story-inline-link{color:var(--pz-color-text-link);text-decoration:none}.pz-info-block-layout-story-inline-link:hover{color:var(--pz-color-text-link-hover);text-decoration:underline}.pz-info-block-layout-story-table-wrap{overflow-x:auto}.pz-info-block-layout-story-table{width:100%;border-collapse:collapse}.pz-info-block-layout-story-table th,.pz-info-block-layout-story-table td{padding:18px 14px;text-align:left;vertical-align:top;color:var(--pz-color-text-primary);font-size:14px;line-height:1.45}.pz-info-block-layout-story-table th{font-size:13px;font-weight:700}.pz-info-block-layout-story-table thead tr{border-bottom:1px solid color-mix(in srgb,var(--pz-color-grey-40) 64%,transparent)}.pz-info-block-layout-story-table tbody tr+tr{border-top:1px solid color-mix(in srgb,var(--pz-color-grey-40) 48%,transparent)}@media (width <= 1024px){.pz-info-block-layout-story-hero,.pz-info-block-layout-story-group-header,.pz-info-block-layout-story-info-row{grid-template-columns:1fr;flex-direction:column}.pz-info-block-layout-story-info-label:after{display:none}}@media (width <= 640px){.pz-info-block-layout-story-hero,.pz-info-block-layout-story-group,.pz-info-block-layout-story-surface{padding:20px;border-radius:22px}.pz-info-block-layout-story-helper-link{font-size:16px}.pz-info-block-layout-story-table th,.pz-info-block-layout-story-table td{padding:14px 10px;font-size:13px}}.pz-info-block-layout[data-v-ad6e2a06]{--pz-info-block-layout-content-margin-top: var(--pz-space-24);min-width:0}.pz-info-block-layout-header[data-v-ad6e2a06]{display:flex;flex-direction:column;align-items:start;gap:var(--pz-space-16)}@media (min-width: 1024px){.pz-info-block-layout-header[data-v-ad6e2a06]{flex-direction:row;justify-content:space-between}}.pz-info-block-layout-actions[data-v-ad6e2a06]{min-width:0;flex-shrink:0}.pz-info-block-layout-helper[data-v-ad6e2a06]{min-width:0;margin-top:var(--pz-space-12)}.pz-info-block-layout-content[data-v-ad6e2a06]{min-width:0;margin-top:var(--pz-info-block-layout-content-margin-top)}.pz-info-block-layout-content.tight[data-v-ad6e2a06]{--pz-info-block-layout-content-margin-top: var(--pz-space-12)}@media (min-width: 1024px){.pz-info-block-layout-content.tight[data-v-ad6e2a06]{--pz-info-block-layout-content-margin-top: var(--pz-space-20)}}

package/dist/app/assets/PzInfoBlockLayout.stories-BBkiY-o7.js

@@ -0,0 +1,248 @@
+import{_ as b}from"./PzIcon-DTWQGv5c.js";import{P as f,_ as h}from"./PzText-BOcxbzaG.js";import{d as k,e as s,p as r,q as z,j as w,y as g,l as t,m as c,f as x,o as l,u as _,t as I}from"./iframe-Ckq2fQkL.js";import"./preload-helper-C1FmrZbK.js";const C={class:"pz-info-block-layout"},P={class:"pz-info-block-layout-header"},T={key:0,class:"pz-info-block-layout-actions"},B={key:0,class:"pz-info-block-layout-helper"},i=k({name:"PzInfoBlockLayout",__name:"PzInfoBlockLayout",props:{title:{},titleClass:{default:""},mode:{default:""}},setup(e){return(o,n)=>(l(),s("section",C,[r("div",P,[z(g(f),{variant:"h4-bold"},{default:w(()=>[t(o.$slots,"title",{},()=>[_(I(e.title),1)],!0)]),_:3}),o.$slots.right_section?(l(),s("div",T,[t(o.$slots,"right_section",{},void 0,!0)])):c("",!0)]),o.$slots.heading?(l(),s("div",B,[t(o.$slots,"heading",{},void 0,!0)])):c("",!0),r("div",{class:x(["pz-info-block-layout-content",{mode:e.mode}])},[t(o.$slots,"default",{},void 0,!0)],2)]))}}),d=h(i,[["__scopeId","data-v-ad6e2a06"]]);i.__docgenInfo=Object.assign({displayName:i.name??i.__name},{name:"PzInfoBlockLayout",exportName:"default",displayName:"PzInfoBlockLayout",description:"",tags:{},props:[{name:"title",required:!1,type:{name:"string"}},{name:"titleClass",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"mode",required:!1,type:{name:"PzInfoBlockLayoutMode"},defaultValue:{func:!1,value:'""'}},{name:"spacing",defaultValue:{func:!1,value:"undefined"}}],slots:[{name:"title"},{name:"right_section"},{name:"heading"},{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Layouts/PzInfoBlockLayout/PzInfoBlockLayout.vue"]});const L=["","tight"],A=[{id:"preview-name",label:"Name",parts:[{id:"preview-name-text",text:"Test Division Organization (AUTOMATION)"}]},{id:"preview-code",label:"EDRPOU code",parts:[{id:"preview-code-text",text:"60100000"}]},{id:"preview-location",label:"Location",parts:[{id:"preview-location-text",text:"00601, Україна, м. Київ, Вулиця, будинок, квартира"}]}],R=[{id:"customer-name",label:"Name",parts:[{id:"customer-name-text",text:"Test Division Organization (AUTOMATION)"}]},{id:"customer-edrpou",label:"EDRPOU code",parts:[{id:"customer-edrpou-text",text:"60100000"}]},{id:"customer-location",label:"Location",parts:[{id:"customer-location-text",text:"00601, Україна, м. Київ, Вулиця, будинок, квартира"}]},{id:"customer-category",label:"Category",parts:[{id:"customer-category-text",text:"A legal entity that operates in one or more specific business areas"}]},{id:"customer-contact",label:"Contact person",parts:[{id:"customer-contact-name",text:"divisionAdminSNMD divisionAdminFNMD"},{id:"customer-contact-phone",text:"380500000000",href:"tel:+380500000000"},{id:"customer-contact-mail",text:"divisionAdmin@division.com",href:"mailto:divisionAdmin@division.com"}]}],N=[{id:"purchase-subject",label:"Type of subject of purchase",parts:[{id:"purchase-subject-text",text:"services"}]},{id:"purchase-code",label:"Classifier and its corresponding code",parts:[{id:"purchase-code-text",text:"ДК 021:2015: 33190000-8 — Медичне обладнання та вироби медичного призначення різні"}]}],O=[{id:"purchase-name",label:"Name"},{id:"purchase-classifier",label:"Classifier and code"},{id:"purchase-quantity",label:"Quantity/Units of measurement"},{id:"purchase-location",label:"Delivery location"},{id:"purchase-date",label:"Delivery date"}],S=[{id:"purchase-row-1",cells:["i-9d86f099 Летіти гроші яблуко боєць благати заклад.","ДК 021:2015: 33193100-0 — Автомобілі для інвалідів та інвалідні візки","3.51879 кубічний метр на годину","69446, Україна, Київська область, Фастів, Улюблений, 66","from 9 June 2026 to 14 June 2026"]},{id:"purchase-row-2",cells:["i-0fb3a80e Постійний якесь білизна розводити мета виконувати.","ДК 021:2015: 33196200-2 — Пристрої для людей з обмеженими можливостями","15.97218 гігагерц","89498, Україна, Чернівецька область, Чернівці, Курінна, 131","from 9 June 2026 to 14 June 2026"]}],$=[{id:"delivery-event",label:"Подія"},{id:"delivery-type",label:"Тип"},{id:"delivery-basis",label:"Підстава"},{id:"delivery-period",label:"Період, (днів)"},{id:"delivery-day-type",label:"Тип днів"},{id:"delivery-amount",label:"Розмір, (%)"}],D=[{id:"delivery-row-1",cells:["Financing","Postpayments","signing the contract","306","calendar","100"]},{id:"delivery-row-2",cells:["Delivery","Recurring delivery","submitting payment","67","calendar","100"]}],j=e=>{const o=[`title="${e.title}"`,e.titleClass?`title-class="${e.titleClass}"`:null,e.mode?`mode="${e.mode}"`:null].filter(v=>!!v).join(`
+    `),n=e.showHelper?`
+    <template #heading>
+      <a href="#" class="custom-helper-link">
+        <PzIcon name="open_in_new" size="20" />
+        ${e.helperText??"How to check the customer before participating in the tender"}
+      </a>
+    </template>`:"",m=e.showActions?`
+    <template #right_section>
+      <span class="custom-badge">0</span>
+    </template>`:"";return`<template>
+  <PzInfoBlockLayout
+    ${o}
+  >${m}${n}
+    <div class="custom-info-list">
+      <div class="custom-info-row">
+        <span>Name</span>
+        <span>Test Division Organization (AUTOMATION)</span>
+      </div>
+      <div class="custom-info-row">
+        <span>EDRPOU code</span>
+        <span>60100000</span>
+      </div>
+    </div>
+  </PzInfoBlockLayout>
+</template>`},H={title:"Components/Layouts/PzInfoBlockLayout",component:d,parameters:{prototype:{caption:"Info block layout",note:"Section-level layout for procurement detail pages. It owns heading rhythm, helper/action slots, and content spacing while inner rows, tables, and business semantics stay outside the component."},docs:{description:{component:"Use `PzInfoBlockLayout` as a generic information section shell. It provides a title row, optional right-side actions through `right_section`, optional helper content through `heading`, and a content area with default or tight spacing."},source:{transform:(e,o)=>j(o.args??H.args)}}},args:{title:"Customer information",titleClass:"",mode:"",showActions:!1,showHelper:!0,helperText:"How to check the customer before participating in the tender"},argTypes:{title:{control:"text",description:"Primary section heading."},titleClass:{control:"text",description:"Additional class for the title element."},mode:{control:"inline-radio",options:L,description:"Content spacing mode. Use `tight` for denser sections."},showActions:{control:"boolean",description:"Shows the `right_section` slot in the live preview.",table:{category:"Slots"}},showHelper:{control:"boolean",description:"Shows the `heading` slot in the live preview.",table:{category:"Slots"}},helperText:{control:"text",description:"Helper link copy used in the live preview.",table:{category:"Slots"}}},render:e=>({components:{pzIcon:b,pzInfoBlockLayout:d,pzText:f},setup(){return{args:e,customerInfoRows:R,deliveryColumns:$,deliveryRows:D,previewRows:A,purchaseColumns:O,purchaseInfoRows:N,purchaseRows:S}},template:`
+      <section class="pz-info-block-layout-story">
+        <div class="pz-info-block-layout-story-hero">
+          <div>
+            <span class="pz-info-block-layout-story-eyebrow">Component API</span>
+            <pz-text variant="h4-bold">Information sections with helper and data content</pz-text>
+          </div>
+          <span class="pz-info-block-layout-story-chip">{{ args.mode || 'default' }}</span>
+        </div>
+
+        <div class="pz-info-block-layout-story-board">
+          <section class="pz-info-block-layout-story-surface">
+            <pz-info-block-layout
+              :title="args.title"
+              :title-class="args.titleClass"
+              :mode="args.mode"
+            >
+              <template v-if="args.showActions" #right_section>
+                <span class="pz-info-block-layout-story-badge">0</span>
+              </template>
+
+              <template v-if="args.showHelper" #heading>
+                <a
+                  href="#"
+                  class="pz-info-block-layout-story-helper-link"
+                >
+                  <pz-icon name="open_in_new" size="20" />
+                  <span>{{ args.helperText }}</span>
+                </a>
+              </template>
+
+              <div class="pz-info-block-layout-story-info-list">
+                <div
+                  v-for="row in previewRows"
+                  :key="row.id"
+                  class="pz-info-block-layout-story-info-row"
+                >
+                  <div class="pz-info-block-layout-story-info-label">
+                    {{ row.label }}:
+                  </div>
+
+                  <div class="pz-info-block-layout-story-info-value">
+                    <span
+                      v-for="part in row.parts"
+                      :key="part.id"
+                    >
+                      {{ part.text }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </pz-info-block-layout>
+          </section>
+
+          <section class="pz-info-block-layout-story-gallery">
+            <div class="pz-info-block-layout-story-group">
+              <div class="pz-info-block-layout-story-group-header">
+                <div>
+                  <span class="pz-info-block-layout-story-group-kicker">Reference 01</span>
+                  <pz-text variant="h4-bold">Key-value customer block</pz-text>
+                </div>
+              </div>
+
+              <pz-info-block-layout title="Customer information">
+                <template #helper>
+                  <a
+                    href="#"
+                    class="pz-info-block-layout-story-helper-link"
+                  >
+                    <pz-icon name="open_in_new" size="20" />
+                    <span>How to check the customer before participating in the tender</span>
+                  </a>
+                </template>
+
+                <div class="pz-info-block-layout-story-info-list">
+                  <div
+                    v-for="row in customerInfoRows"
+                    :key="row.id"
+                    class="pz-info-block-layout-story-info-row"
+                  >
+                    <div class="pz-info-block-layout-story-info-label">
+                      {{ row.label }}:
+                    </div>
+
+                    <div class="pz-info-block-layout-story-info-value">
+                      <template
+                        v-for="part in row.parts"
+                        :key="part.id"
+                      >
+                        <a
+                          v-if="part.href"
+                          :href="part.href"
+                          class="pz-info-block-layout-story-inline-link"
+                        >
+                          {{ part.text }}
+                        </a>
+                        <span v-else>{{ part.text }}</span>
+                      </template>
+                    </div>
+                  </div>
+                </div>
+              </pz-info-block-layout>
+            </div>
+
+            <div class="pz-info-block-layout-story-group pz-info-block-layout-story-group-muted">
+              <div class="pz-info-block-layout-story-group-header">
+                <div>
+                  <span class="pz-info-block-layout-story-group-kicker">Reference 02</span>
+                  <pz-text variant="h4-bold">Mixed block with subject rows and purchase table</pz-text>
+                </div>
+              </div>
+
+              <pz-info-block-layout title="Tender documentation">
+                <template #helper>
+                  <a
+                    href="#"
+                    class="pz-info-block-layout-story-helper-link"
+                  >
+                    <pz-icon name="open_in_new" size="20" />
+                    <span>How a bidder can influence the quality of tender documents</span>
+                  </a>
+                </template>
+
+                <div class="pz-info-block-layout-story-stack">
+                  <pz-text variant="h4-bold">Information on the subject of purchase</pz-text>
+
+                  <div class="pz-info-block-layout-story-info-list">
+                    <div
+                      v-for="row in purchaseInfoRows"
+                      :key="row.id"
+                      class="pz-info-block-layout-story-info-row"
+                    >
+                      <div class="pz-info-block-layout-story-info-label">
+                        {{ row.label }}:
+                      </div>
+
+                      <div class="pz-info-block-layout-story-info-value">
+                        <span
+                          v-for="part in row.parts"
+                          :key="part.id"
+                        >
+                          {{ part.text }}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="pz-info-block-layout-story-table-wrap">
+                    <table class="pz-info-block-layout-story-table">
+                      <thead>
+                        <tr>
+                          <th
+                            v-for="column in purchaseColumns"
+                            :key="column.id"
+                          >
+                            {{ column.label }}
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr
+                          v-for="row in purchaseRows"
+                          :key="row.id"
+                        >
+                          <td
+                            v-for="(cell, index) in row.cells"
+                            :key="row.id + '-' + index"
+                          >
+                            {{ cell }}
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </pz-info-block-layout>
+            </div>
+
+            <div class="pz-info-block-layout-story-group pz-info-block-layout-story-group-muted">
+              <div class="pz-info-block-layout-story-group-header">
+                <div>
+                  <span class="pz-info-block-layout-story-group-kicker">Reference 03</span>
+                  <pz-text variant="h4-bold">Dense table section for delivery terms</pz-text>
+                </div>
+              </div>
+
+              <pz-info-block-layout
+                title="Terms of delivery and payment"
+                mode="tight"
+              >
+                <div class="pz-info-block-layout-story-table-wrap">
+                  <table class="pz-info-block-layout-story-table">
+                    <thead>
+                      <tr>
+                        <th
+                          v-for="column in deliveryColumns"
+                          :key="column.id"
+                        >
+                          {{ column.label }}
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr
+                        v-for="row in deliveryRows"
+                        :key="row.id"
+                      >
+                        <td
+                          v-for="(cell, index) in row.cells"
+                          :key="row.id + '-' + index"
+                        >
+                          {{ cell }}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </pz-info-block-layout>
+            </div>
+          </section>
+        </div>
+      </section>
+    `})},a={};var p,u,y;a.parameters={...a.parameters,docs:{...(p=a.parameters)==null?void 0:p.docs,source:{originalSource:"{}",...(y=(u=a.parameters)==null?void 0:u.docs)==null?void 0:y.source}}};const E=["Playground"];export{a as Playground,E as __namedExportsOrder,H as default};

package/dist/app/assets/PzInfoHint-C-UyP8PR.js

@@ -0,0 +1 @@
+import{d as i,i as p,j as r,o as n,p as s,q as c,e as o,s as m,t as l,u as f,F as u}from"./iframe-Ckq2fQkL.js";import{_ as d}from"./PzIcon-DTWQGv5c.js";import{P as _}from"./PzHint-BhuDfy-l.js";import{_ as P}from"./PzText-BOcxbzaG.js";const z={type:"button","aria-label":"Information",class:"pz-info-hint-trigger"},a=i({name:"PzInfoHint",__name:"PzInfoHint",props:{infoContent:{},wrapperClass:{default:""},containerWrapperClass:{default:""},placement:{default:"top"}},setup(e){return(C,I)=>(n(),p(_,{"wrapper-class":e.wrapperClass,"container-wrapper-class":e.containerWrapperClass,placement:e.placement,theme:"dark-tooltip"},{content:r(()=>[(n(!0),o(u,null,m(e.infoContent,t=>(n(),o("p",{key:t.id},[s("b",null,l(t.title??""),1),f(" "+l(t.text??""),1)]))),128))]),default:r(()=>[s("button",z,[c(d,{name:"help",size:"16",class:"pz-info-hint-icon"})])]),_:1},8,["wrapper-class","container-wrapper-class","placement"]))}}),h=P(a,[["__scopeId","data-v-d7b247cb"]]);a.__docgenInfo=Object.assign({displayName:a.name??a.__name},{name:"PzInfoHint",exportName:"default",displayName:"PzInfoHint",description:"",tags:{},props:[{name:"infoContent",required:!0,type:{name:"Array",elements:[{name:"PzInfoHintContent"}]}},{name:"wrapperClass",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"containerWrapperClass",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"placement",required:!1,type:{name:"Placement"},defaultValue:{func:!1,value:'"top"'}}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Popups/PzInfoHint/PzInfoHint.vue"]});export{h as P};

package/dist/app/assets/PzInfoHint-CWG8xkDj.css

@@ -0,0 +1 @@
+.pz-info-hint-trigger[data-v-d7b247cb]{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer}.pz-info-hint-trigger[data-v-d7b247cb]:focus-visible{outline:2px solid var(--pz-color-blue-50);outline-offset:2px;border-radius:999px}.pz-info-hint-icon[data-v-d7b247cb]{display:block}

package/dist/app/assets/{PzInfoHint-CtK7BZOs.css → PzInfoHint-Da02XLY2.css}

@@ -1 +1 @@
-.pz-info-hint-story{display:grid;gap:20px;max-width:760px}.pz-info-hint-story-header{display:flex;justify-content:space-between;gap:16px;align-items:start}.pz-info-hint-story-eyebrow,.pz-info-hint-story-chip{display:inline-flex;align-items:center;width:fit-content;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-10) 90%,var(--pz-color-white));color:var(--pz-color-text-link-hover);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.pz-info-hint-story-preview,.pz-info-hint-story-card{padding:24px;border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent);border-radius:24px;background:linear-gradient(180deg,var(--pz-color-white),color-mix(in srgb,var(--pz-color-grey-20) 84%,var(--pz-color-white)));box-shadow:0 18px 60px color-mix(in srgb,var(--pz-color-black-90) 8%,transparent)}.pz-info-hint-story-gallery{display:grid;gap:12px}.pz-info-hint-story-card{display:grid;gap:6px}.pz-info-hint-story-label{margin:0;color:var(--pz-color-text-link-hover);font-size:12px;font-weight:700;text-transform:uppercase}.pz-info-hint-story-copy{margin:0;color:var(--pz-color-text-secondary);line-height:1.6}.pz-info-hint-trigger[data-v-540d7970]{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer}.pz-info-hint-trigger[data-v-540d7970]:focus-visible{outline:2px solid var(--pz-color-blue-50);outline-offset:2px;border-radius:999px}.pz-info-hint-icon[data-v-540d7970]{display:block}
+.pz-info-hint-story{display:grid;gap:20px;max-width:760px}.pz-info-hint-story-header{display:flex;justify-content:space-between;gap:16px;align-items:start}.pz-info-hint-story-eyebrow,.pz-info-hint-story-chip{display:inline-flex;align-items:center;width:fit-content;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-10) 90%,var(--pz-color-white));color:var(--pz-color-text-link-hover);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.pz-info-hint-story-preview,.pz-info-hint-story-card{padding:24px;border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent);border-radius:24px;background:linear-gradient(180deg,var(--pz-color-white),color-mix(in srgb,var(--pz-color-grey-20) 84%,var(--pz-color-white)));box-shadow:0 18px 60px color-mix(in srgb,var(--pz-color-black-90) 8%,transparent)}.pz-info-hint-story-gallery{display:grid;gap:12px}.pz-info-hint-story-card{display:grid;gap:6px}.pz-info-hint-story-label{margin:0;color:var(--pz-color-text-link-hover);font-size:12px;font-weight:700;text-transform:uppercase}.pz-info-hint-story-copy{margin:0;color:var(--pz-color-text-secondary);line-height:1.6}

package/dist/app/assets/PzInfoHint.stories-6f6FePkY.js

@@ -0,0 +1,38 @@
+import{P as a}from"./PzText-BOcxbzaG.js";import{P as e}from"./PzInfoHint-C-UyP8PR.js";import"./iframe-Ckq2fQkL.js";import"./preload-helper-C1FmrZbK.js";import"./PzIcon-DTWQGv5c.js";import"./PzHint-BhuDfy-l.js";import"./floating-vue-D0dcONsr.js";const o=[{id:"deadline",title:"Deadline",text:"Shown in local time and aligned with the procurement schedule."},{id:"contact",title:"Contact",text:"Responsible contact details stay visible near the request label."}],p=()=>`<template>
+  <PzInfoHint
+    :info-content="[
+      { id: 'deadline', title: 'Deadline', text: 'Shown in local time and aligned with the procurement schedule.' },
+      { id: 'contact', title: 'Contact', text: 'Responsible contact details stay visible near the request label.' },
+    ]"
+  />
+</template>`,y={title:"Components/Popups/PzInfoHint",component:e,parameters:{prototype:{caption:"Info hint component",note:"Specialized helper that composes the shared tooltip shell with the design-system help icon and structured info rows."},docs:{description:{component:"Use `PzInfoHint` for structured helper text that needs a consistent help icon. It renders each row from `infoContent` inside the shared `PzHint` wrapper and defaults to the dark tooltip theme."},source:{transform:p}}},args:{infoContent:o,wrapperClass:"",containerWrapperClass:"",placement:"top"},argTypes:{infoContent:{control:!1,description:"Structured rows shown inside the popper.",table:{category:"Slots"}},wrapperClass:{control:"text",description:"Additional class applied to the popper wrapper."},containerWrapperClass:{control:"text",description:"Additional class applied to the outer trigger container."},placement:{control:"select",options:["top","top-start"],description:"Tooltip placement relative to the trigger."}},render:s=>({components:{pzInfoHint:e,pzText:a},setup(){return{args:s,infoHintItems:o}},template:`
+      <section class="pz-info-hint-story">
+        <div class="pz-info-hint-story-header">
+          <div>
+            <span class="pz-info-hint-story-eyebrow">Component API</span>
+            <pz-text variant="h4-bold">Structured info hint</pz-text>
+          </div>
+          <span class="pz-info-hint-story-chip">{{ args.placement }}</span>
+        </div>
+
+        <div class="pz-info-hint-story-preview">
+          <pz-info-hint
+            :info-content="args.infoContent"
+            :wrapper-class="args.wrapperClass"
+            :container-wrapper-class="args.containerWrapperClass"
+            :placement="args.placement"
+          />
+        </div>
+
+        <div class="pz-info-hint-story-gallery">
+          <article
+            v-for="item in infoHintItems"
+            :key="item.id"
+            class="pz-info-hint-story-card"
+          >
+            <p class="pz-info-hint-story-label">{{ item.title }}</p>
+            <p class="pz-info-hint-story-copy">{{ item.text }}</p>
+          </article>
+        </div>
+      </section>
+    `})},t={};var n,i,r;t.parameters={...t.parameters,docs:{...(n=t.parameters)==null?void 0:n.docs,source:{originalSource:"{}",...(r=(i=t.parameters)==null?void 0:i.docs)==null?void 0:r.source}}};const z=["Playground"];export{t as Playground,z as __namedExportsOrder,y as default};

package/dist/app/assets/PzInput-DWypQ6XY.css

@@ -0,0 +1 @@
+.pz-input[data-v-7696acd3]{--pz-input-background: var(--pz-color-white);--pz-input-border: var(--pz-color-grey-30);--pz-input-text: var(--pz-color-text-primary);--pz-input-placeholder: var(--pz-color-grey-50);--pz-input-icon-color: var(--pz-color-grey-50);position:relative;display:block;color:var(--pz-input-text);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-input-wrap[data-v-7696acd3]{position:relative;display:block}.pz-input-control[data-v-7696acd3]{display:block;width:100%;padding:var(--pz-space-8) var(--pz-space-12);border-radius:var(--pz-space-4);border:1px solid var(--pz-input-border);background-color:var(--pz-input-background);color:var(--pz-input-text);font:inherit}.pz-input-control[data-v-7696acd3]:focus{outline:2px solid var(--pz-color-blue-30);outline-offset:0}.pz-input-control[data-v-7696acd3]::placeholder{color:var(--pz-input-placeholder)}.pz-input-control[data-v-7696acd3]:disabled{--pz-input-background: transparent;--pz-input-text: var(--pz-color-grey-40);--pz-input-placeholder: var(--pz-color-grey-40);cursor:default}.pz-input-control--with-icon[data-v-7696acd3]{padding-right:var(--pz-space-32)}.pz-input-control--counted[data-v-7696acd3]{padding-right:var(--pz-space-60)}.pz-input-readonly[data-v-7696acd3]{display:block;margin:0;padding:0;color:var(--pz-color-text-secondary);-webkit-user-select:none;user-select:none}.pz-input-icon[data-v-7696acd3]{position:absolute;bottom:var(--pz-space-8);right:var(--pz-space-4);font-size:var(--pz-font-size-20);color:var(--pz-input-icon-color)}.pz-input-counter[data-v-7696acd3]{position:absolute;top:50%;right:var(--pz-space-8);transform:translateY(-50%);color:var(--pz-input-icon-color);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-input-error[data-v-7696acd3]{display:block;margin-top:var(--pz-space-8);color:var(--pz-color-red-50);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-input.light .pz-input-control[data-v-7696acd3]{padding-top:var(--pz-space-12);padding-bottom:var(--pz-space-12);border-color:var(--pz-color-blue-30)}.pz-input.error .pz-input-control[data-v-7696acd3]{border-color:var(--pz-color-red-50)}

package/dist/app/assets/PzInput.stories-Bm_5Kj-P.js

@@ -0,0 +1,57 @@
+import{d as q,L as w,e as d,q as S,j as P,y as b,f as y,M as h,o as i,p as k,N as I,O as M,t as u,i as B,m,r as l,w as L}from"./iframe-Ckq2fQkL.js";import{_ as $,P as C}from"./PzText-BOcxbzaG.js";import{_ as N}from"./PzIcon-DTWQGv5c.js";import{P as D}from"./PzLabel-jmQOAHGo.js";import"./preload-helper-C1FmrZbK.js";const O={class:"pz-input-wrap"},T=["id","placeholder","disabled","maxlength","type","required"],j=["id"],F={key:3,class:"pz-input-counter"},E={key:0,class:"pz-input-error"},p=q({name:"PzInput",__name:"PzInput",props:h({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:h(["focus","blur","update:modelValue"],["update:modelValue"]),setup(e,{emit:t}){const n=t,o=w(e,"modelValue");return(f,a)=>(i(),d("div",{class:y(["pz-input",{light:e.isLightSkin,error:e.errorMessage,disabled:e.disabled}])},[S(b(D),{label:e.label,for:e.name,required:e.required,disabled:e.disabled},{default:P(()=>{var s;return[k("span",O,[e.editable?I((i(),d("input",{key:0,id:e.name,"onUpdate:modelValue":a[0]||(a[0]=r=>o.value=r),placeholder:e.placeholder,disabled:e.disabled,maxlength:e.counted?e.maxSize:void 0,type:e.type,required:e.required,class:y(["pz-input-control",[{"pz-input-control--with-icon":e.icon,"pz-input-control--counted":e.counted},e.inputClass]]),onBlur:a[1]||(a[1]=r=>n("blur")),onFocus:a[2]||(a[2]=r=>n("focus"))},null,42,T)),[[M,o.value]]):(i(),d("span",{key:1,id:e.name,class:"pz-input-readonly"},u(o.value),9,j)),e.icon?(i(),B(b(N),{key:2,name:e.icon,class:"pz-input-icon"},null,8,["name"])):m("",!0),e.counted?(i(),d("span",F,u(((s=o.value)==null?void 0:s.length)||0)+"/"+u(e.maxSize),1)):m("",!0)]),e.errorMessage?(i(),d("span",E,u(e.errorMessage),1)):m("",!0)]}),_:1},8,["label","for","required","disabled"])],2))}}),v=$(p,[["__scopeId","data-v-7696acd3"]]);p.__docgenInfo=Object.assign({displayName:p.name??p.__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:"update:modelValue",type:{names:["string"]}}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Form/PzInput/PzInput.vue"]});const A=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>`,U={title:"Components/Form/PzInput",component:v,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)=>A(t.args??U.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:v,pzText:C},setup(){const t=l(e.modelValue??""),n=l(""),o=l(""),f=l(""),a=l(""),s=l(""),r=l("");return L(()=>e.modelValue,V=>{t.value=V??""}),{args:e,value:t,sharedValue:n,defaultValue:o,requiredValue:f,countedValue:a,iconValue:s,errorValue:r}},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>
+    `})},c={parameters:{docs:{description:{story:"Інтерактивний приклад текстового інпуту. Нижче показано two-way binding та базові стани: required, counted, з іконкою, помилка, disabled і readonly."}}}};var z,g,x;c.parameters={...c.parameters,docs:{...(z=c.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "Інтерактивний приклад текстового інпуту. Нижче показано two-way binding та базові стани: required, counted, з іконкою, помилка, disabled і readonly."
+      }
+    }
+  }
+}`,...(x=(g=c.parameters)==null?void 0:g.docs)==null?void 0:x.source}}};const K=["Playground"];export{c as Playground,K as __namedExportsOrder,U as default};

package/dist/app/assets/PzInputDate-C9KHzAYp.css

@@ -0,0 +1 @@
+.pz-input-date[data-v-5a2e48d2]{--pz-input-date-background: var(--pz-color-white);--pz-input-date-text: var(--pz-color-text-primary);--pz-input-date-placeholder: var(--pz-color-grey-50);position:relative;display:block;color:var(--pz-input-date-text);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-input-date-wrap[data-v-5a2e48d2]{position:relative;display:block}.pz-input-date-control[data-v-5a2e48d2]{display:block;width:100%;padding:var(--pz-space-8) var(--pz-space-32) var(--pz-space-8) var(--pz-space-12);border-radius:var(--pz-space-4);border:1px solid var(--pz-color-grey-30);background-color:var(--pz-input-date-background);color:var(--pz-input-date-text);font:inherit;cursor:pointer}.pz-input-date-control[data-v-5a2e48d2]:focus{outline:2px solid var(--pz-color-blue-30);outline-offset:0}.pz-input-date-control[data-v-5a2e48d2]::placeholder{color:var(--pz-input-date-placeholder)}.pz-input-date-control[data-v-5a2e48d2]:disabled{--pz-input-date-background: transparent;--pz-input-date-text: var(--pz-color-grey-40);--pz-input-date-placeholder: var(--pz-color-grey-40);cursor:default}.pz-input-date-control[data-v-5a2e48d2]::-webkit-calendar-picker-indicator,.pz-input-date-control[data-v-5a2e48d2]::-webkit-inner-spin-button{display:none}.pz-input-date-readonly[data-v-5a2e48d2]{display:block;margin:0;padding:0;color:var(--pz-color-text-secondary);-webkit-user-select:none;user-select:none}.pz-input-date-icon[data-v-5a2e48d2]{position:absolute;top:50%;right:var(--pz-space-8);transform:translateY(-50%);font-size:var(--pz-font-size-20);color:var(--pz-color-grey-50);cursor:pointer}.pz-input-date-icon--clear[data-v-5a2e48d2]{color:var(--pz-color-text-secondary)}.pz-input-date-error[data-v-5a2e48d2]{display:block;margin-top:var(--pz-space-8);color:var(--pz-color-red-50);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-input-date.light .pz-input-date-control[data-v-5a2e48d2]{padding-top:var(--pz-space-12);padding-bottom:var(--pz-space-12);border-color:var(--pz-color-blue-30)}.pz-input-date.error .pz-input-date-control[data-v-5a2e48d2]{border-color:var(--pz-color-red-50)}

package/dist/app/assets/PzInputDate.stories-Ccqq1p1p.js

@@ -0,0 +1,55 @@
+import{d as Y,L as $,e as i,q as h,j as B,y,f as g,M as x,o as s,P as C,t as z,m as L,r as t,J as T,w as N}from"./iframe-Ckq2fQkL.js";import{_ as O,P as R}from"./PzText-BOcxbzaG.js";import{_ as E}from"./PzIcon-DTWQGv5c.js";import{P as F}from"./PzLabel-jmQOAHGo.js";import"./preload-helper-C1FmrZbK.js";const j={key:0,class:"pz-input-date-wrap"},A=["id","value","placeholder","disabled","required","min","max"],W=["id","value","placeholder","disabled","required"],J=["id"],U={key:2,class:"pz-input-date-error"},p=Y({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=$(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(F),{label:e.label,for:e.name,required:e.required,disabled:e.disabled},{default:B(()=>[e.editable?(s(),i("span",j,[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,A)):(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(E),{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,J)),e.errorMessage?(s(),i("span",U,z(e.errorMessage),1)):L("",!0)]),_:1},8,["label","for","required","disabled"])],2))}}),V=O(p,[["__scopeId","data-v-5a2e48d2"]]);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:R},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 ee=["Playground"];export{m as Playground,ee as __namedExportsOrder,H as default};