@prozorro/prozorro-ui 0.0.9-beta → 0.0.11-beta

package/dist/app/assets/PzMultiSelect.stories-DqKbYF9e.js

@@ -0,0 +1,453 @@
+import{d as pe,e as V,y as P,C as T,u as g,n as L,o as q,k as i,F as de,z as ce,f as F,l as D,E as J,t as C,J as ue,r as o,g as f,w as me}from"./iframe-DbWuH5mz.js";import{_ as ne}from"./PzIcon-BNwLASSZ.js";import{P as ge}from"./PzTag-9D_K2A9q.js";import{P as d}from"./PzText-LkAZaPCW.js";import{u as fe}from"./index-LkANHSb5.js";import{k as xe}from"./floating-vue-B4YMiR3n.js";import{l as $}from"./lodash-CdDiHlzQ.js";import{P as be}from"./PzLabel-Coa549nk.js";import{_ as ve}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";import"./_commonjsHelpers-Cpj98o6Y.js";const he=6,ze=["id"],ye=["id","disabled","aria-controls","aria-expanded","aria-label"],Se={class:"pz-multi-select-trigger-text"},Oe=["id","aria-labelledby"],we={class:"pz-multi-select-options"},Ve=["for"],Pe=["id","name","checked","disabled","onChange"],Te={class:"pz-multi-select-option-text"},S=pe({name:"PzMultiSelect",__name:"PzMultiSelect",props:{name:{},options:{},modelValue:{default:()=>[]},label:{default:""},placeholder:{default:""},selectedLabel:{default:"{count} обрано"},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},width:{default:void 0}},emits:["update:modelValue"],setup(e,{emit:n}){const l=e,u=n,m=o(null),{width:ae}=fe(m),c=t=>l.modelValue.some(s=>$.isEqual(s,t)),oe=t=>{const s=c(t)?l.modelValue.filter(a=>!$.isEqual(a,t)):[...l.modelValue,t];u("update:modelValue",s)},N=f(()=>l.options.filter(t=>c(t.value))),k=f(()=>{var s;const t=l.modelValue.length;return t===0?l.placeholder:t===1?((s=N.value[0])==null?void 0:s.label)??l.placeholder:l.selectedLabel.replace("{count}",String(t))}),se=f(()=>l.label||k.value||l.placeholder||l.name),ie=f(()=>{const t=Math.round(ae.value);return t?{inlineSize:`${String(t)}px`}:{}}),O=(t,s)=>t.id??`${l.name}-multi-option-${String(s+1)}`,re=t=>({option:t,selected:c(t.value),disabled:!!t.disabled});return(t,s)=>(q(),V("div",{id:e.name,class:"pz-multi-select",style:L({width:e.width})},[P(g(be),{label:e.label,for:e.name+"-trigger",required:e.required,disabled:e.disabled},{default:T(()=>[P(g(xe),{class:"pz-multi-select-dropdown",theme:"dropdown",placement:"bottom-start",container:"#"+e.name,distance:g(he),disabled:e.disabled},{default:T(({shown:a})=>[i("button",{id:e.name+"-trigger",ref_key:"triggerRef",ref:m,type:"button",class:F(["pz-multi-select-trigger",{"is-open":a,"is-placeholder":!e.modelValue.length}]),disabled:e.disabled,"aria-controls":e.name+"-menu","aria-expanded":a?"true":"false","aria-haspopup":"listbox","aria-label":e.label?void 0:se.value},[i("span",Se,[D(t.$slots,"selected",{selectedOptions:N.value,placeholder:e.placeholder,count:e.modelValue.length},()=>[J(C(k.value),1)],!0)]),P(g(ne),{name:"expand_more",size:"20",class:"pz-multi-select-trigger-icon"})],10,ye)]),popper:T(()=>[i("div",{id:e.name+"-menu",class:"pz-multi-select-menu",style:L(ie.value),role:"group","aria-labelledby":e.name+"-trigger"},[i("div",we,[(q(!0),V(de,null,ce(l.options,(a,w)=>(q(),V("label",{key:O(a,w),for:O(a,w),class:F(["pz-multi-select-option",{"is-selected":c(a.value),"is-disabled":a.disabled}])},[i("input",{id:O(a,w),type:"checkbox",name:e.name+"-option",checked:c(a.value),disabled:a.disabled,class:"pz-multi-select-option-input",onChange:Fe=>oe(a.value)},null,40,Pe),s[0]||(s[0]=i("span",{class:"pz-multi-select-option-checkbox","aria-hidden":"true"},[i("svg",{class:"pz-multi-select-option-check",viewBox:"0 0 16 16",fill:"none"},[i("path",{d:"M3.5 8.25L6.5 11L12.5 5",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})])],-1)),i("span",Te,[D(t.$slots,"default",ue({ref_for:!0},re(a)),()=>[J(C(a.label),1)],!0)])],10,Ve))),128))])],12,Oe)]),_:3},8,["container","distance","disabled"])]),_:3},8,["label","for","required","disabled"])],12,ze))}}),r=ve(S,[["__scopeId","data-v-a2e139a1"]]);S.__docgenInfo=Object.assign({displayName:S.name??S.__name},{name:"PzMultiSelect",exportName:"default",displayName:"PzMultiSelect",description:"",tags:{},props:[{name:"name",required:!0,type:{name:"string"}},{name:"options",required:!0,type:{name:"Array",elements:[{name:"PzFormSelectOption"}]}},{name:"modelValue",required:!0,type:{name:"Array",elements:[{name:"PzFormSelectValue"}]},defaultValue:{func:!1,value:"() => []"}},{name:"label",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"placeholder",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"selectedLabel",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'"{count} обрано"'}},{name:"disabled",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"required",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"width",required:!1,type:{name:"string"},defaultValue:{func:!1,value:"undefined"}}],slots:[{name:"selected",scoped:!0,bindings:[{name:"selected-options",title:"binding"},{name:"placeholder",title:"binding"},{name:"count",title:"binding"}]},{name:"default",scoped:!0,bindings:[]}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Form/PzMultiSelect/PzMultiSelect.vue"]});const p=[{label:"09000000-3 - Нафтопродукти, паливо, електроенергія та інші джерела енергії",value:"09000000-3"},{label:"09100000-0 - Паливо",value:"09100000-0"},{label:"09200000-1 - Нафта, вугілля і нафтопродукти",value:"09200000-1"},{label:"09300000-2 - Електрична, теплова, сонячна та атомна енергія",value:"09300000-2"},{label:"90900000-6 - Послуги з прибирання та санітарно-гігієнічні послуги",value:"90900000-6"}],M=[{label:"Чернетка",value:"draft"},{label:"Активний тендер",value:"active"},{label:"Архів",value:"archive"},{label:"Недоступний",value:"unavailable",disabled:!0}],qe=30,Me=2,I=["Будівництво","Послуги","Транспорт","Освіта","Енергія"],Ne=Array.from({length:qe},(e,n)=>{const l=I[n%I.length];return{label:`Категорія ${String(n+1).padStart(Me,"0")} — ${l}`,value:`category-${n+1}`}}),ke=e=>`<template>
+  <PzMultiSelect
+    v-model="value"
+    ${[`name="${e.name}"`,e.label?`label="${e.label}"`:null,e.placeholder?`placeholder="${e.placeholder}"`:null,e.selectedLabel&&e.selectedLabel!=="{count} обрано"?`selected-label="${e.selectedLabel}"`:null,e.required?':required="true"':null,e.disabled?':disabled="true"':null].filter(l=>!!l).join(" ")}
+    :options="options"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const options = [
+  { label: "Option A", value: "a" },
+  { label: "Option B", value: "b" },
+  { label: "Option C", value: "c" },
+];
+
+const value = ref<string[]>([]);
+<\/script>`,Le={title:"Components/Form/PzMultiSelect",component:r,parameters:{docs:{description:{component:"Multi-select dropdown with checkbox rows. Toggling an option emits `update:modelValue` immediately — selection updates as the user clicks. The dropdown stays open while toggling and closes on outside click."},source:{transform:(e,n)=>ke(n.args??Le.args)}}},args:{name:"pz-multi-select-story",label:"Класифікатор",modelValue:[],options:p,placeholder:"Оберіть значення",selectedLabel:"{count} обрано",required:!1,disabled:!1,width:void 0},argTypes:{name:{control:"text",description:"Stable field name used to derive trigger and option ids."},label:{control:"text",description:"Visible label rendered above the trigger."},options:{control:!1,description:"Array of options with `label`, `value`, and optional `disabled` or `id`."},modelValue:{control:!1,description:"Array of currently selected primitive values."},placeholder:{control:"text",description:"Text shown in the trigger when no option is selected."},selectedLabel:{control:"text",description:"Template for the trigger text when 2+ options are selected. Use `{count}` placeholder."},required:{control:"boolean",description:"Adds the required indicator to the label."},disabled:{control:"boolean",description:"Disables the trigger and prevents the menu from opening."},width:{control:"text",description:"Optional explicit width applied to the component root."}},render:e=>({components:{pzMultiSelect:r,pzText:d},setup(){const n=o([...e.modelValue]),l=o(["09100000-0","09300000-2"]),u=o([]);return me(()=>e.modelValue,m=>{n.value=[...m]},{deep:!0}),{args:e,procurementOptions:p,statusOptions:M,value:n,preselected:l,filterValue:u}},template:`
+      <div style="display:flex;flex-direction:column;gap:32px;padding:24px;max-width:720px">
+        <section style="display:flex;flex-direction:column;gap:16px">
+          <pz-text variant="h4-bold">Playground</pz-text>
+          <pz-multi-select
+            v-model="value"
+            :name="args.name"
+            :label="args.label"
+            :placeholder="args.placeholder"
+            :options="args.options"
+            :selected-label="args.selectedLabel"
+            :required="args.required"
+            :disabled="args.disabled"
+            :width="args.width"
+          />
+          <pz-text variant="body-regular">Selected values: {{ JSON.stringify(value) }}</pz-text>
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:16px">
+          <pz-text variant="h4-bold">Pre-populated selection</pz-text>
+          <pz-multi-select
+            v-model="preselected"
+            name="pz-multi-select-preselected"
+            label="Класифікатор з обраними значеннями"
+            placeholder="Оберіть значення"
+            :options="procurementOptions"
+          />
+          <pz-text variant="body-regular">Selected values: {{ JSON.stringify(preselected) }}</pz-text>
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:16px">
+          <pz-text variant="h4-bold">Status filter (with disabled option)</pz-text>
+          <pz-multi-select
+            v-model="filterValue"
+            name="pz-multi-select-status"
+            label="Статус"
+            placeholder="Усі статуси"
+            :options="statusOptions"
+          />
+          <pz-text variant="body-regular">Selected statuses: {{ JSON.stringify(filterValue) }}</pz-text>
+        </section>
+      </div>
+    `})},x={parameters:{docs:{description:{story:"Default interactive story. Open the dropdown and toggle items — the model updates on each click. The dropdown stays open while selecting and closes on outside click."}}}},b={parameters:{docs:{description:{story:"Custom rendering via the `#selected` and default scoped slots. The `#selected` slot receives `{ selectedOptions, placeholder, count }` and controls the trigger content. The default slot receives `{ option, selected, disabled }` and controls each option row."}}},render:()=>({components:{pzMultiSelect:r,pzText:d,pzTag:ge,pzIcon:ne},setup(){const e=o(["09100000-0"]),n=o([]),l=o([]);return{tagsValue:e,counterValue:n,richOptionValue:l,procurementOptions:p,statusOptions:M}},template:`
+      <div style="display:flex;flex-direction:column;gap:32px;padding:24px;max-width:720px">
+        <section style="display:flex;flex-direction:column;gap:12px">
+          <pz-text variant="h4-bold">Trigger renders selected values as tags</pz-text>
+          <pz-multi-select
+            v-model="tagsValue"
+            name="pz-multi-select-slots-tags"
+            label="Класифікатор"
+            placeholder="Оберіть значення"
+            :options="procurementOptions"
+          >
+            <template #selected="{ selectedOptions, placeholder, count }">
+              <span v-if="count === 0" style="color:var(--pz-color-text-secondary)">{{ placeholder }}</span>
+              <span v-else style="display:inline-flex;flex-wrap:wrap;gap:6px">
+                <pz-tag v-for="opt in selectedOptions" :key="String(opt.value)" variant="blue">
+                  {{ opt.value }}
+                </pz-tag>
+              </span>
+            </template>
+          </pz-multi-select>
+          <pz-text variant="body-regular">Selected: {{ JSON.stringify(tagsValue) }}</pz-text>
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:12px">
+          <pz-text variant="h4-bold">Custom counter trigger</pz-text>
+          <pz-multi-select
+            v-model="counterValue"
+            name="pz-multi-select-slots-counter"
+            label="Статус"
+            placeholder="Усі статуси"
+            :options="statusOptions"
+          >
+            <template #selected="{ selectedOptions, placeholder, count }">
+              <span v-if="count === 0">{{ placeholder }}</span>
+              <span v-else-if="count === 1" style="font-weight:600">{{ selectedOptions[0]?.label }}</span>
+              <span v-else style="font-weight:600">Обрано {{ count }} зі {{ statusOptions.length }}</span>
+            </template>
+          </pz-multi-select>
+          <pz-text variant="body-regular">Selected: {{ JSON.stringify(counterValue) }}</pz-text>
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:12px">
+          <pz-text variant="h4-bold">Rich option rows (default slot)</pz-text>
+          <pz-multi-select
+            v-model="richOptionValue"
+            name="pz-multi-select-slots-options"
+            label="Класифікатор"
+            placeholder="Оберіть значення"
+            :options="procurementOptions"
+          >
+            <template #default="{ option, selected }">
+              <span style="flex:1">{{ option.label }}</span>
+              <pz-icon v-if="selected" name="check" size="16" />
+            </template>
+          </pz-multi-select>
+          <pz-text variant="body-regular">Selected: {{ JSON.stringify(richOptionValue) }}</pz-text>
+        </section>
+      </div>
+    `})},v={parameters:{docs:{description:{story:"Required field with a visible label indicator. Use the `required` prop together with `label` to integrate with form validation flows."}}},render:()=>({components:{pzMultiSelect:r,pzText:d},setup(){return{value:o([]),procurementOptions:p}},template:`
+      <div style="display:flex;flex-direction:column;gap:16px;padding:24px;max-width:480px">
+        <pz-multi-select
+          v-model="value"
+          name="pz-multi-select-required"
+          label="Класифікатор"
+          placeholder="Оберіть значення"
+          :options="procurementOptions"
+          required
+        />
+        <pz-text variant="body-regular">
+          Selected: {{ value.length === 0 ? "—" : JSON.stringify(value) }}
+        </pz-text>
+      </div>
+    `})},h={parameters:{docs:{description:{story:"Disabled state with a pre-populated selection. The trigger renders the selected count but cannot be opened or modified."}}},render:()=>({components:{pzMultiSelect:r,pzText:d},setup(){const e=o([]),n=o(["09100000-0","09300000-2"]);return{empty:e,preselected:n,procurementOptions:p}},template:`
+      <div style="display:flex;flex-direction:column;gap:24px;padding:24px;max-width:480px">
+        <section style="display:flex;flex-direction:column;gap:8px">
+          <pz-text variant="body-semibold">Disabled, no selection</pz-text>
+          <pz-multi-select
+            v-model="empty"
+            name="pz-multi-select-disabled-empty"
+            label="Класифікатор"
+            placeholder="Оберіть значення"
+            :options="procurementOptions"
+            disabled
+          />
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:8px">
+          <pz-text variant="body-semibold">Disabled, with pre-selected values</pz-text>
+          <pz-multi-select
+            v-model="preselected"
+            name="pz-multi-select-disabled-preselected"
+            label="Класифікатор"
+            :options="procurementOptions"
+            disabled
+          />
+        </section>
+      </div>
+    `})},z={parameters:{docs:{description:{story:"Long option list demonstrating the scrollable dropdown body. The options container caps its height and scrolls vertically while the trigger and surrounding chrome remain fixed."}}},render:()=>({components:{pzMultiSelect:r,pzText:d},setup(){return{value:o(["category-3","category-12"]),longOptions:Ne}},template:`
+      <div style="display:flex;flex-direction:column;gap:16px;padding:24px;max-width:480px">
+        <pz-multi-select
+          v-model="value"
+          name="pz-multi-select-long-list"
+          label="Категорії"
+          placeholder="Оберіть категорії"
+          :options="longOptions"
+        />
+        <pz-text variant="body-regular">Selected: {{ JSON.stringify(value) }}</pz-text>
+      </div>
+    `})},y={parameters:{docs:{description:{story:"Realistic page-level filter row combining several PzMultiSelect controls in a horizontal layout. Each control updates its own model independently."}}},render:()=>({components:{pzMultiSelect:r,pzText:d},setup(){const e=o(["active"]),n=o([]);return{statuses:e,categories:n,statusOptions:M,procurementOptions:p}},template:`
+      <div style="display:flex;flex-direction:column;gap:16px;padding:24px">
+        <pz-text variant="h4-bold">Filter by</pz-text>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px">
+          <pz-multi-select
+            v-model="statuses"
+            name="pz-multi-select-filter-status"
+            label="Статус"
+            placeholder="Усі статуси"
+            :options="statusOptions"
+          />
+          <pz-multi-select
+            v-model="categories"
+            name="pz-multi-select-filter-category"
+            label="Класифікатор"
+            placeholder="Усі категорії"
+            :options="procurementOptions"
+          />
+        </div>
+        <pz-text variant="body-regular">
+          Active filters — statuses: {{ JSON.stringify(statuses) }}, categories: {{ JSON.stringify(categories) }}
+        </pz-text>
+      </div>
+    `})};var E,R,A;x.parameters={...x.parameters,docs:{...(E=x.parameters)==null?void 0:E.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "Default interactive story. Open the dropdown and toggle items — the model updates on each click. The dropdown stays open while selecting and closes on outside click."
+      }
+    }
+  }
+}`,...(A=(R=x.parameters)==null?void 0:R.docs)==null?void 0:A.source}}};var _,B,W;b.parameters={...b.parameters,docs:{...(_=b.parameters)==null?void 0:_.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "Custom rendering via the \`#selected\` and default scoped slots. The \`#selected\` slot receives \`{ selectedOptions, placeholder, count }\` and controls the trigger content. The default slot receives \`{ option, selected, disabled }\` and controls each option row."
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzMultiSelect: PzMultiSelect,
+      pzText: PzText,
+      pzTag: PzTag,
+      pzIcon: PzIcon
+    },
+    setup() {
+      const tagsValue = ref<PzFormSelectValue[]>(["09100000-0"]);
+      const counterValue = ref<PzFormSelectValue[]>([]);
+      const richOptionValue = ref<PzFormSelectValue[]>([]);
+      return {
+        tagsValue,
+        counterValue,
+        richOptionValue,
+        procurementOptions,
+        statusOptions
+      };
+    },
+    template: \`
+      <div style="display:flex;flex-direction:column;gap:32px;padding:24px;max-width:720px">
+        <section style="display:flex;flex-direction:column;gap:12px">
+          <pz-text variant="h4-bold">Trigger renders selected values as tags</pz-text>
+          <pz-multi-select
+            v-model="tagsValue"
+            name="pz-multi-select-slots-tags"
+            label="Класифікатор"
+            placeholder="Оберіть значення"
+            :options="procurementOptions"
+          >
+            <template #selected="{ selectedOptions, placeholder, count }">
+              <span v-if="count === 0" style="color:var(--pz-color-text-secondary)">{{ placeholder }}</span>
+              <span v-else style="display:inline-flex;flex-wrap:wrap;gap:6px">
+                <pz-tag v-for="opt in selectedOptions" :key="String(opt.value)" variant="blue">
+                  {{ opt.value }}
+                </pz-tag>
+              </span>
+            </template>
+          </pz-multi-select>
+          <pz-text variant="body-regular">Selected: {{ JSON.stringify(tagsValue) }}</pz-text>
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:12px">
+          <pz-text variant="h4-bold">Custom counter trigger</pz-text>
+          <pz-multi-select
+            v-model="counterValue"
+            name="pz-multi-select-slots-counter"
+            label="Статус"
+            placeholder="Усі статуси"
+            :options="statusOptions"
+          >
+            <template #selected="{ selectedOptions, placeholder, count }">
+              <span v-if="count === 0">{{ placeholder }}</span>
+              <span v-else-if="count === 1" style="font-weight:600">{{ selectedOptions[0]?.label }}</span>
+              <span v-else style="font-weight:600">Обрано {{ count }} зі {{ statusOptions.length }}</span>
+            </template>
+          </pz-multi-select>
+          <pz-text variant="body-regular">Selected: {{ JSON.stringify(counterValue) }}</pz-text>
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:12px">
+          <pz-text variant="h4-bold">Rich option rows (default slot)</pz-text>
+          <pz-multi-select
+            v-model="richOptionValue"
+            name="pz-multi-select-slots-options"
+            label="Класифікатор"
+            placeholder="Оберіть значення"
+            :options="procurementOptions"
+          >
+            <template #default="{ option, selected }">
+              <span style="flex:1">{{ option.label }}</span>
+              <pz-icon v-if="selected" name="check" size="16" />
+            </template>
+          </pz-multi-select>
+          <pz-text variant="body-regular">Selected: {{ JSON.stringify(richOptionValue) }}</pz-text>
+        </section>
+      </div>
+    \`
+  })
+}`,...(W=(B=b.parameters)==null?void 0:B.docs)==null?void 0:W.source}}};var U,j,G;v.parameters={...v.parameters,docs:{...(U=v.parameters)==null?void 0:U.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "Required field with a visible label indicator. Use the \`required\` prop together with \`label\` to integrate with form validation flows."
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzMultiSelect: PzMultiSelect,
+      pzText: PzText
+    },
+    setup() {
+      const value = ref<PzFormSelectValue[]>([]);
+      return {
+        value,
+        procurementOptions
+      };
+    },
+    template: \`
+      <div style="display:flex;flex-direction:column;gap:16px;padding:24px;max-width:480px">
+        <pz-multi-select
+          v-model="value"
+          name="pz-multi-select-required"
+          label="Класифікатор"
+          placeholder="Оберіть значення"
+          :options="procurementOptions"
+          required
+        />
+        <pz-text variant="body-regular">
+          Selected: {{ value.length === 0 ? "—" : JSON.stringify(value) }}
+        </pz-text>
+      </div>
+    \`
+  })
+}`,...(G=(j=v.parameters)==null?void 0:j.docs)==null?void 0:G.source}}};var X,Z,H;h.parameters={...h.parameters,docs:{...(X=h.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled state with a pre-populated selection. The trigger renders the selected count but cannot be opened or modified."
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzMultiSelect: PzMultiSelect,
+      pzText: PzText
+    },
+    setup() {
+      const empty = ref<PzFormSelectValue[]>([]);
+      const preselected = ref<PzFormSelectValue[]>(["09100000-0", "09300000-2"]);
+      return {
+        empty,
+        preselected,
+        procurementOptions
+      };
+    },
+    template: \`
+      <div style="display:flex;flex-direction:column;gap:24px;padding:24px;max-width:480px">
+        <section style="display:flex;flex-direction:column;gap:8px">
+          <pz-text variant="body-semibold">Disabled, no selection</pz-text>
+          <pz-multi-select
+            v-model="empty"
+            name="pz-multi-select-disabled-empty"
+            label="Класифікатор"
+            placeholder="Оберіть значення"
+            :options="procurementOptions"
+            disabled
+          />
+        </section>
+
+        <section style="display:flex;flex-direction:column;gap:8px">
+          <pz-text variant="body-semibold">Disabled, with pre-selected values</pz-text>
+          <pz-multi-select
+            v-model="preselected"
+            name="pz-multi-select-disabled-preselected"
+            label="Класифікатор"
+            :options="procurementOptions"
+            disabled
+          />
+        </section>
+      </div>
+    \`
+  })
+}`,...(H=(Z=h.parameters)==null?void 0:Z.docs)==null?void 0:H.source}}};var K,Q,Y;z.parameters={...z.parameters,docs:{...(K=z.parameters)==null?void 0:K.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "Long option list demonstrating the scrollable dropdown body. The options container caps its height and scrolls vertically while the trigger and surrounding chrome remain fixed."
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzMultiSelect: PzMultiSelect,
+      pzText: PzText
+    },
+    setup() {
+      const value = ref<PzFormSelectValue[]>(["category-3", "category-12"]);
+      return {
+        value,
+        longOptions
+      };
+    },
+    template: \`
+      <div style="display:flex;flex-direction:column;gap:16px;padding:24px;max-width:480px">
+        <pz-multi-select
+          v-model="value"
+          name="pz-multi-select-long-list"
+          label="Категорії"
+          placeholder="Оберіть категорії"
+          :options="longOptions"
+        />
+        <pz-text variant="body-regular">Selected: {{ JSON.stringify(value) }}</pz-text>
+      </div>
+    \`
+  })
+}`,...(Y=(Q=z.parameters)==null?void 0:Q.docs)==null?void 0:Y.source}}};var ee,te,le;y.parameters={...y.parameters,docs:{...(ee=y.parameters)==null?void 0:ee.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "Realistic page-level filter row combining several PzMultiSelect controls in a horizontal layout. Each control updates its own model independently."
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzMultiSelect: PzMultiSelect,
+      pzText: PzText
+    },
+    setup() {
+      const statuses = ref<PzFormSelectValue[]>(["active"]);
+      const categories = ref<PzFormSelectValue[]>([]);
+      return {
+        statuses,
+        categories,
+        statusOptions,
+        procurementOptions
+      };
+    },
+    template: \`
+      <div style="display:flex;flex-direction:column;gap:16px;padding:24px">
+        <pz-text variant="h4-bold">Filter by</pz-text>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px">
+          <pz-multi-select
+            v-model="statuses"
+            name="pz-multi-select-filter-status"
+            label="Статус"
+            placeholder="Усі статуси"
+            :options="statusOptions"
+          />
+          <pz-multi-select
+            v-model="categories"
+            name="pz-multi-select-filter-category"
+            label="Класифікатор"
+            placeholder="Усі категорії"
+            :options="procurementOptions"
+          />
+        </div>
+        <pz-text variant="body-regular">
+          Active filters — statuses: {{ JSON.stringify(statuses) }}, categories: {{ JSON.stringify(categories) }}
+        </pz-text>
+      </div>
+    \`
+  })
+}`,...(le=(te=y.parameters)==null?void 0:te.docs)==null?void 0:le.source}}};const Ue=["Playground","WithSlots","Required","Disabled","LongList","InFilterRow"];export{h as Disabled,y as InFilterRow,z as LongList,x as Playground,v as Required,b as WithSlots,Ue as __namedExportsOrder,Le as default};

package/dist/app/assets/{PzNav-DRAXqlz0.css → PzNav-BCqeyJHD.css}

@@ -1 +1 @@
-.pz-nav-story{display:grid;gap:var(--pz-space-24)}.pz-nav-story-frame{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-24);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 74%,transparent);border-radius:var(--pz-space-24);background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 36%),linear-gradient(180deg,color-mix(in srgb,var(--pz-color-white) 98%,transparent),color-mix(in srgb,var(--pz-color-grey-20) 90%,var(--pz-color-white)))}.pz-nav-story-header{display:flex;align-items:start;justify-content:space-between;gap:var(--pz-space-16)}.pz-nav-story-eyebrow,.pz-nav-story-chip{display:inline-flex;align-items:center;width:fit-content;padding:var(--pz-space-8) var(--pz-space-16);border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-10) 92%,var(--pz-color-white));color:var(--pz-color-text-link-hover);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.pz-nav-story-stack{display:grid;gap:var(--pz-space-16)}.pz-nav-story-surface{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-20);border-radius:var(--pz-space-20);background:color-mix(in srgb,var(--pz-color-white) 98%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pz-color-grey-30) 60%,transparent)}.pz-nav-story-grid{display:grid;gap:var(--pz-space-16)}.pz-nav-story-card{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:var(--pz-space-20);padding:var(--pz-space-20);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 74%,transparent);border-radius:var(--pz-space-20);background:color-mix(in srgb,var(--pz-color-white) 96%,transparent);box-shadow:0 12px 32px color-mix(in srgb,var(--pz-color-black-90) 5%,transparent)}.pz-nav-story-card-copy{display:grid;align-content:start;gap:var(--pz-space-12)}.pz-nav-story-card-surface{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-16);border-radius:var(--pz-space-16);background:color-mix(in srgb,var(--pz-color-background-frame) 96%,var(--pz-color-white));overflow:hidden}.pz-nav-story-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding-inline:6px;border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-10) 100%,transparent);color:var(--pz-color-text-link-hover);font-size:var(--pz-font-size-12);font-weight:700}.pz-nav-story-slot{display:inline-flex;align-items:center;gap:var(--pz-space-8)}.pz-nav-story-compact{width:min(100%,520px)}@media (width <= 768px){.pz-nav-story-header{flex-direction:column}.pz-nav-story-card{grid-template-columns:1fr}}.pz-nav[data-v-23082985]{--pz-nav-background: var(--pz-color-background-frame);--pz-nav-active-background: var(--pz-color-background-primary);--pz-nav-active-color: var(--pz-color-text-primary);--pz-nav-link-color: var(--pz-color-text-link);display:flex;width:100%;margin:0;padding:var(--pz-space-4);list-style:none;border-radius:var(--pz-space-16);background:var(--pz-nav-background);overflow-x:auto;scrollbar-color:var(--pz-color-grey-30) var(--pz-nav-active-background)}.pz-nav__item[data-v-23082985]{position:relative;z-index:1;flex:0 0 auto;border-radius:var(--pz-space-12);transition:background-color .16s ease}.pz-nav__item[data-v-23082985]:hover{color:var(--pz-color-text-link-hover)}.pz-nav__item.active[data-v-23082985]{background-color:var(--pz-nav-active-background);box-shadow:0 1px 2px #2426380f,inset 0 0 0 1px #2426380a}.pz-nav__item.disabled[data-v-23082985]{opacity:.5;-webkit-user-select:none;user-select:none;pointer-events:none}.pz-nav__text[data-v-23082985]{display:inline-flex;align-items:center;min-height:44px;padding:12px 24px;border:none;outline:none;background:transparent;color:var(--pz-nav-link-color);text-decoration:none;white-space:nowrap;transition:color .16s ease;font-size:var(--pz-font-size-14);font-weight:600;line-height:1.5}.pz-nav__text.active[data-v-23082985]{color:var(--pz-nav-active-color)}
+.pz-nav-story{display:grid;gap:var(--pz-space-24)}.pz-nav-story-frame{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-24);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 74%,transparent);border-radius:var(--pz-space-24);background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 36%),linear-gradient(180deg,color-mix(in srgb,var(--pz-color-white) 98%,transparent),color-mix(in srgb,var(--pz-color-grey-20) 90%,var(--pz-color-white)))}.pz-nav-story-header{display:flex;align-items:start;justify-content:space-between;gap:var(--pz-space-16)}.pz-nav-story-eyebrow,.pz-nav-story-chip{display:inline-flex;align-items:center;width:fit-content;padding:var(--pz-space-8) var(--pz-space-16);border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-10) 92%,var(--pz-color-white));color:var(--pz-color-text-link-hover);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.pz-nav-story-stack{display:grid;gap:var(--pz-space-16)}.pz-nav-story-surface{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-20);border-radius:var(--pz-space-20);background:color-mix(in srgb,var(--pz-color-white) 98%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pz-color-grey-30) 60%,transparent)}.pz-nav-story-grid{display:grid;gap:var(--pz-space-16)}.pz-nav-story-card{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:var(--pz-space-20);padding:var(--pz-space-20);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 74%,transparent);border-radius:var(--pz-space-20);background:color-mix(in srgb,var(--pz-color-white) 96%,transparent);box-shadow:0 12px 32px color-mix(in srgb,var(--pz-color-black-90) 5%,transparent)}.pz-nav-story-card-copy{display:grid;align-content:start;gap:var(--pz-space-12)}.pz-nav-story-card-surface{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-16);border-radius:var(--pz-space-16);background:color-mix(in srgb,var(--pz-color-background-frame) 96%,var(--pz-color-white));overflow:hidden}.pz-nav-story-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding-inline:6px;border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-10) 100%,transparent);color:var(--pz-color-text-link-hover);font-size:var(--pz-font-size-12);font-weight:700}.pz-nav-story-slot{display:inline-flex;align-items:center;gap:var(--pz-space-8)}.pz-nav-story-compact{width:min(100%,520px)}@media (width <= 768px){.pz-nav-story-header{flex-direction:column}.pz-nav-story-card{grid-template-columns:1fr}}.pz-nav[data-v-5d1c69f0]{--pz-nav-background: var(--pz-color-background-frame);--pz-nav-active-background: var(--pz-color-background-primary);--pz-nav-active-color: var(--pz-color-text-primary);--pz-nav-link-color: var(--pz-color-text-link);display:flex;width:100%;margin:0;padding:var(--pz-space-4);list-style:none;border-radius:var(--pz-space-16);background:var(--pz-nav-background);overflow-x:auto;scrollbar-color:var(--pz-color-grey-30) var(--pz-nav-active-background)}.pz-nav__item[data-v-5d1c69f0]{position:relative;z-index:1;flex:0 0 auto;border-radius:var(--pz-space-12);transition:background-color .16s ease}.pz-nav__item[data-v-5d1c69f0]:hover{color:var(--pz-color-text-link-hover)}.pz-nav__item.active[data-v-5d1c69f0]{background-color:var(--pz-nav-active-background);box-shadow:0 1px 2px #2426380f,inset 0 0 0 1px #2426380a}.pz-nav__item.disabled[data-v-5d1c69f0]{opacity:.5;-webkit-user-select:none;user-select:none;pointer-events:none}.pz-nav__text[data-v-5d1c69f0]{display:inline-flex;align-items:center;min-height:44px;padding:12px 24px;border:none;outline:none;background:transparent;color:var(--pz-nav-link-color);text-decoration:none;white-space:nowrap;transition:color .16s ease;font-size:var(--pz-font-size-14);font-weight:600;line-height:1.5}.pz-nav__text.active[data-v-5d1c69f0]{color:var(--pz-nav-active-color)}

package/dist/app/assets/{PzNav.stories-BPTRR62X.js → PzNav.stories-8SxncW0m.js}

@@ -1,6 +1,6 @@
-import{d as R,e as r,F,p as $,o,f as m,h as j,w as A,j as y,q as x,t as b,s as B,R as O,y as L,g as V,J as z,K as f}from"./iframe-B7Bddli1.js";import{_ as W,P as g}from"./PzText-Qtpayc5y.js";import"./preload-helper-C1FmrZbK.js";const J={class:"pz-nav"},l=R({name:"PzNav",__name:"PzNav",props:{config:{}},setup(s){const t=L(),h=s,d=a=>{const[n=""]=a.split("#");return n?n.startsWith("/")?n:`/${n}`:"/"},q=a=>a.startsWith("#")?a:d(a),E=V(()=>!h.config.some(a=>d(a.path)===t.path)),u=a=>d(a.path)===t.path||E.value&&!!a.isDefault;return(a,n)=>(o(),r("ul",J,[(o(!0),r(F,null,$(h.config,(e,M)=>(o(),r("li",{key:`${e.path}-${M}`,class:m(["pz-nav__item",[{disabled:e.disabled},{active:u(e)}]])},[e.disabled?(o(),r("span",{key:1,class:m(["pz-nav__text",{active:u(e)}])},[y(a.$slots,"view",{data:e},()=>[x(b(e.text),1)],!0)],2)):(o(),j(B(O),{key:0,to:q(e.path),class:m(["pz-nav__text",{active:u(e)}])},{default:A(()=>[y(a.$slots,"view",{data:e},()=>[x(b(e.text),1)],!0)]),_:2},1032,["to","class"]))],2))),128))]))}}),v=W(l,[["__scopeId","data-v-23082985"]]);l.__docgenInfo=Object.assign({displayName:l.name??l.__name},{name:"PzNav",exportName:"default",displayName:"PzNav",description:"",tags:{},props:[{name:"config",required:!0,type:{name:"Array",elements:[{name:"PzNavItem"}]}}],slots:[{name:"view",scoped:!0,bindings:[{name:"data",title:"binding"}]}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzNav/PzNav.vue"]});const N=[{path:"/market/procedures",text:"Закупівлі",isDefault:!0},{path:"/market/contracts",text:"Договори"},{path:"/market/plans",text:"Плани"},{path:"/market/selection",text:"Відбори"},{path:"/market/products",text:"Товари"}],Q=[{path:"/tender/details",text:"Деталі закупівлі",isDefault:!0},{path:"/tender/questions",text:"Питання та вимоги (0)"},{path:"/tender/complaints",text:"Скарги (0)"},{path:"/tender/monitoring",text:"Моніторинг (0)",disabled:!0}],U=[{path:"/archive/overview",text:"Overview",isDefault:!0},{path:"/archive/history",text:"History",disabled:!0},{path:"/archive/files",text:"Files"}],G=s=>`<template>
+import{d as R,e as r,F,z as $,o,f as m,A,C as j,l as y,E as x,t as b,u as B,R as O,K as L,g as V,j as z,a1 as f}from"./iframe-DbWuH5mz.js";import{P as g}from"./PzText-LkAZaPCW.js";import{_ as W}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const Q={class:"pz-nav"},l=R({name:"PzNav",__name:"PzNav",props:{config:{}},setup(s){const t=L(),h=s,d=a=>{const[n=""]=a.split("#");return n?n.startsWith("/")?n:`/${n}`:"/"},E=a=>a.startsWith("#")?a:d(a),q=V(()=>!h.config.some(a=>d(a.path)===t.path)),u=a=>d(a.path)===t.path||q.value&&!!a.isDefault;return(a,n)=>(o(),r("ul",Q,[(o(!0),r(F,null,$(h.config,(e,M)=>(o(),r("li",{key:`${e.path}-${M}`,class:m(["pz-nav__item",[{disabled:e.disabled},{active:u(e)}]])},[e.disabled?(o(),r("span",{key:1,class:m(["pz-nav__text",{active:u(e)}])},[y(a.$slots,"view",{data:e},()=>[x(b(e.text),1)],!0)],2)):(o(),A(B(O),{key:0,to:E(e.path),class:m(["pz-nav__text",{active:u(e)}])},{default:j(()=>[y(a.$slots,"view",{data:e},()=>[x(b(e.text),1)],!0)]),_:2},1032,["to","class"]))],2))),128))]))}}),v=W(l,[["__scopeId","data-v-5d1c69f0"]]);l.__docgenInfo=Object.assign({displayName:l.name??l.__name},{name:"PzNav",exportName:"default",displayName:"PzNav",description:"",tags:{},props:[{name:"config",required:!0,type:{name:"Array",elements:[{name:"PzNavItem"}]}}],slots:[{name:"view",scoped:!0,bindings:[{name:"data",title:"binding"}]}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Navigation/PzNav/PzNav.vue"]});const N=[{path:"/market/procedures",text:"Закупівлі",isDefault:!0},{path:"/market/contracts",text:"Договори"},{path:"/market/plans",text:"Плани"},{path:"/market/selection",text:"Відбори"},{path:"/market/products",text:"Товари"}],U=[{path:"/tender/details",text:"Деталі закупівлі",isDefault:!0},{path:"/tender/questions",text:"Питання та вимоги (0)"},{path:"/tender/complaints",text:"Скарги (0)"},{path:"/tender/monitoring",text:"Моніторинг (0)",disabled:!0}],G=[{path:"/archive/overview",text:"Overview",isDefault:!0},{path:"/archive/history",text:"History",disabled:!0},{path:"/archive/files",text:"Files"}],H=s=>`<template>
   <PzNav :config='${JSON.stringify(s.config,null,2)}' />
-</template>`,H=()=>`<template>
+</template>`,J=()=>`<template>
   <PzNav :config="config">
     <template #view="{ data }">
       <span class="custom-nav-item">
@@ -9,7 +9,7 @@ import{d as R,e as r,F,p as $,o,f as m,h as j,w as A,j as y,q as x,t as b,s as B
       </span>
     </template>
   </PzNav>
-</template>`,K={title:"Components/Navigation/PzNav",component:v,parameters:{prototype:{caption:"Navigation component",note:"Renamed from the previous app-level URL tabs to the shared `PzNav` component. It keeps the original `config` prop, default-tab logic, disabled states, and the `view` slot for custom item rendering."},docs:{description:{component:"Use `PzNav` when a screen needs route-based horizontal navigation. It follows the previous `url-tabs` API with a `config` array and marks the fallback item active when no route matches and `isDefault` is set."},source:{transform:(s,t)=>G(t.args??K.args)}}},args:{config:N},argTypes:{config:{control:"object",description:"Navigation items with route path, label, disabled state, and optional default fallback."}},render:s=>({components:{pzNav:v,pzText:g},setup(){const t=f();return z(async()=>{await t.push("/market/procedures")}),{args:s,marketNavItems:N,tenderNavItems:Q}},template:`
+</template>`,K={title:"Components/Navigation/PzNav",component:v,parameters:{prototype:{caption:"Navigation component",note:"Renamed from the previous app-level URL tabs to the shared `PzNav` component. It keeps the original `config` prop, default-tab logic, disabled states, and the `view` slot for custom item rendering."},docs:{description:{component:"Use `PzNav` when a screen needs route-based horizontal navigation. It follows the previous `url-tabs` API with a `config` array and marks the fallback item active when no route matches and `isDefault` is set."},source:{transform:(s,t)=>H(t.args??K.args)}}},args:{config:N},argTypes:{config:{control:"object",description:"Navigation items with route path, label, disabled state, and optional default fallback."}},render:s=>({components:{pzNav:v,pzText:g},setup(){const t=f();return z(async()=>{await t.push("/market/procedures")}),{args:s,marketNavItems:N,tenderNavItems:U}},template:`
       <div class="pz-nav-story">
         <section class="pz-nav-story-frame">
           <div class="pz-nav-story-header">
@@ -57,7 +57,7 @@ import{d as R,e as r,F,p as $,o,f as m,h as j,w as A,j as y,q as x,t as b,s as B
           </article>
         </section>
       </div>
-    `})},i={},c={args:{config:U},render:s=>({components:{pzNav:v,pzText:g},setup(){const t=f();return z(async()=>{await t.push("/archive/unknown")}),{args:s}},template:`
+    `})},i={},c={args:{config:G},render:s=>({components:{pzNav:v,pzText:g},setup(){const t=f();return z(async()=>{await t.push("/archive/unknown")}),{args:s}},template:`
       <div class="pz-nav-story">
         <section class="pz-nav-story-frame">
           <div class="pz-nav-story-header">
@@ -73,7 +73,7 @@ import{d as R,e as r,F,p as $,o,f as m,h as j,w as A,j as y,q as x,t as b,s as B
           </div>
         </section>
       </div>
-    `})},p={parameters:{docs:{source:{code:H()}}},render:()=>({components:{pzNav:v,pzText:g},setup(){const s=f(),t=[{path:"/nav/questions",text:"Questions",count:12,isDefault:!0},{path:"/nav/complaints",text:"Complaints",count:2},{path:"/nav/monitoring",text:"Monitoring",count:0,disabled:!0}];return z(async()=>{await s.push("/nav/questions")}),{config:t}},template:`
+    `})},p={parameters:{docs:{source:{code:J()}}},render:()=>({components:{pzNav:v,pzText:g},setup(){const s=f(),t=[{path:"/nav/questions",text:"Questions",count:12,isDefault:!0},{path:"/nav/complaints",text:"Complaints",count:2},{path:"/nav/monitoring",text:"Monitoring",count:0,disabled:!0}];return z(async()=>{await s.push("/nav/questions")}),{config:t}},template:`
       <div class="pz-nav-story">
         <section class="pz-nav-story-frame">
           <div class="pz-nav-story-header">
@@ -194,4 +194,4 @@ import{d as R,e as r,F,p as $,o,f as m,h as j,w as A,j as y,q as x,t as b,s as B
       </div>
     \`
   })
-}`,...(C=(T=p.parameters)==null?void 0:T.docs)==null?void 0:C.source}}};const aa=["Playground","DefaultFallback","CustomItemView"];export{p as CustomItemView,c as DefaultFallback,i as Playground,aa as __namedExportsOrder,K as default};
+}`,...(C=(T=p.parameters)==null?void 0:T.docs)==null?void 0:C.source}}};const ta=["Playground","DefaultFallback","CustomItemView"];export{p as CustomItemView,c as DefaultFallback,i as Playground,ta as __namedExportsOrder,K as default};

package/dist/app/assets/PzNumberFormat-D5xYsZ3A.js

@@ -0,0 +1 @@
+var c=Object.defineProperty;var _=(i,t,s)=>t in i?c(i,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[t]=s;var n=(i,t,s)=>_(i,typeof t!="symbol"?t+"":t,s);import{l as h}from"./lodash-CdDiHlzQ.js";const e={FULL_NUMBER:/[^0-9.,\-+]/g,DOT_OR_COMMA:/[.,]+/};class l{constructor(t,s){n(this,"_int","");n(this,"_last","");if(this.value=t,this.precision=s,!h.isNumber(t)&&!t||t==="-")return;const[r,o]=t.toString().replace(e.FULL_NUMBER,"").split(e.DOT_OR_COMMA);this._int=Number(r).toLocaleString("uk-UK")||"0",this._last=o||""}get number(){const t=this.precision!==void 0,s=e.DOT_OR_COMMA.test(this.value),r=t?s&&this.precision!==0:s,o=t?this._last.substring(0,this.precision):this._last;return r?`${this._int}.${o}`:this._int}}export{l as P};

package/dist/app/assets/PzNumberFormat.stories-CDG6_Sk8.js

@@ -0,0 +1,57 @@
+import{P as o}from"./PzNumberFormat-D5xYsZ3A.js";import{P as a}from"./PzText-LkAZaPCW.js";import"./lodash-CdDiHlzQ.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-DbWuH5mz.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const x={title:"Utilities/PzNumberFormat",parameters:{docs:{description:{component:"The `PzNumberFormat` utility is used to format numbers consistently, adding division for thousands and handling decimals."}}}},e={render:()=>({components:{pzText:a},setup(){return{examples:[{value:1234567,description:"Millions without decimals"},{value:1234567891e-3,precision:2,description:"Millions with 2 decimals precision"},{value:"54321.1",description:"String input with 1 decimal"},{value:0,description:"Zero"},{value:"-",description:"Invalid/empty dash"},{value:null,description:"Null value"}].map(n=>({...n,result:new o(n.value,n.precision).number}))}},template:`
+      <div>
+        <pz-text variant="h4-semibold">PzNumberFormat Usage</pz-text>
+        <ul style="margin-top: 16px; padding-left: 20px;">
+          <li v-for="(ex, index) in examples" :key="index" style="margin-top: 8px;">
+            <pz-text variant="body-regular">
+              <strong>{{ ex.description }}:</strong> Input: <code>{{ ex.value }}</code>, Output: <code>{{ ex.result }}</code>
+            </pz-text>
+          </li>
+        </ul>
+      </div>
+    `})};var t,i,r;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`{
+  render: () => ({
+    components: {
+      pzText: PzText
+    },
+    setup() {
+      return {
+        examples: [{
+          value: 1234567,
+          description: "Millions without decimals"
+        }, {
+          value: 1234567.891,
+          precision: 2,
+          description: "Millions with 2 decimals precision"
+        }, {
+          value: "54321.1",
+          description: "String input with 1 decimal"
+        }, {
+          value: 0,
+          description: "Zero"
+        }, {
+          value: "-",
+          description: "Invalid/empty dash"
+        }, {
+          value: null,
+          description: "Null value"
+        }].map(item => ({
+          ...item,
+          result: new PzNumberFormat(item.value, item.precision).number
+        }))
+      };
+    },
+    template: \`
+      <div>
+        <pz-text variant="h4-semibold">PzNumberFormat Usage</pz-text>
+        <ul style="margin-top: 16px; padding-left: 20px;">
+          <li v-for="(ex, index) in examples" :key="index" style="margin-top: 8px;">
+            <pz-text variant="body-regular">
+              <strong>{{ ex.description }}:</strong> Input: <code>{{ ex.value }}</code>, Output: <code>{{ ex.result }}</code>
+            </pz-text>
+          </li>
+        </ul>
+      </div>
+    \`
+  })
+}`,...(r=(i=e.parameters)==null?void 0:i.docs)==null?void 0:r.source}}};const v=["Usage"];export{e as Usage,v as __namedExportsOrder,x as default};

package/dist/app/assets/PzPagination-D9MVz0_M.js

@@ -0,0 +1 @@
+import{d as I,e as o,k as s,y as v,u as h,F as q,z as w,g as l,o as i,f as T,t as $}from"./iframe-DbWuH5mz.js";import{_ as V}from"./PzIcon-BNwLASSZ.js";import{_ as B}from"./_plugin-vue_export-helper-DlAUqK2U.js";const E={class:"pz-pagination","aria-label":"Pagination"},M={class:"pz-pagination__list"},S=["disabled"],j={key:0,class:"pz-pagination__dots","aria-hidden":"true"},L=["aria-current","onClick"],O=["disabled"],m=1,r=I({name:"PzPagination",__name:"PzPagination",props:{modelValue:{},total:{},perPage:{},radius:{default:2}},emits:["update:modelValue"],setup(p,{emit:k}){const a=p,u=k,_=l(()=>Math.ceil(a.total/a.perPage)),f=l(()=>a.modelValue<=1),P=l(()=>a.modelValue>=_.value),N=l(()=>{const t=_.value;if(t<=0)return[];if(t===1)return[{type:"page",page:m}];const d=a.modelValue,e=a.radius,c=m+1,b=t-1,y=Math.max(c,d-e),z=Math.min(b,d+e),n=[{type:"page",page:m}];y>c&&n.push({type:"dots",side:"left"});for(let g=y;g<=z;g++)n.push({type:"page",page:g});return z<b&&n.push({type:"dots",side:"right"}),n.push({type:"page",page:t}),n}),x=t=>{t!==a.modelValue&&u("update:modelValue",t)},C=()=>{f.value||u("update:modelValue",a.modelValue-1)},F=()=>{P.value||u("update:modelValue",a.modelValue+1)};return(t,d)=>(i(),o("nav",E,[s("ul",M,[s("li",null,[s("button",{type:"button",class:"pz-pagination__btn pz-pagination__btn--nav",disabled:f.value,"aria-label":"Попередня сторінка",onClick:C},[v(h(V),{name:"chevron_left",size:"24"})],8,S)]),(i(!0),o(q,null,w(N.value,e=>(i(),o("li",{key:e.type==="page"?`p-${e.page}`:`d-${e.side}`,class:"pz-pagination__item"},[e.type==="dots"?(i(),o("span",j," … ")):(i(),o("button",{key:1,type:"button",class:T(["pz-pagination__btn",{"pz-pagination__btn--active":e.page===p.modelValue}]),"aria-current":e.page===p.modelValue?"page":void 0,onClick:c=>x(e.page)},$(e.page),11,L))]))),128)),s("li",null,[s("button",{type:"button",class:"pz-pagination__btn pz-pagination__btn--nav",disabled:P.value,"aria-label":"Наступна сторінка",onClick:F},[v(h(V),{name:"chevron_right",size:"24"})],8,O)])])]))}}),R=B(r,[["__scopeId","data-v-9513ae82"]]);r.__docgenInfo=Object.assign({displayName:r.name??r.__name},{name:"PzPagination",exportName:"default",displayName:"PzPagination",description:"",tags:{},props:[{name:"modelValue",required:!0,type:{name:"number"}},{name:"total",required:!0,type:{name:"number"}},{name:"perPage",required:!0,type:{name:"number"}},{name:"radius",required:!1,type:{name:"number"},defaultValue:{func:!1,value:"2"}}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Navigation/PzPagination/PzPagination.vue"]});export{R as P};

package/dist/app/assets/PzPagination-k9D0Hxrx.css

@@ -0,0 +1 @@
+.pz-pagination__list[data-v-9513ae82]{display:flex;align-items:center;gap:var(--pz-space-4);list-style:none;margin:0;padding:0}.pz-pagination__item[data-v-9513ae82]{display:flex}.pz-pagination__btn[data-v-9513ae82]{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:2px;background:transparent;color:var(--pz-color-text-primary);cursor:pointer;transition:color .16s ease,background-color .16s ease,border-color .16s ease;font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}.pz-pagination__btn[data-v-9513ae82]:hover:not(:disabled){background-color:var(--pz-color-grey-20);border-color:var(--pz-color-tag-blue);color:var(--pz-color-text-link-hover)}.pz-pagination__btn--active[data-v-9513ae82]{border-color:var(--pz-color-tag-blue)}.pz-pagination__btn--nav[data-v-9513ae82]{color:var(--pz-color-text-primary)}.pz-pagination__btn--nav[data-v-9513ae82]:disabled{opacity:.35;cursor:default}.pz-pagination__dots[data-v-9513ae82]{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--pz-color-text-secondary);font-size:var(--pz-font-size-14);font-weight:400;line-height:1.5}