import{e as Z,E as G,w as V,G as H,x as _,f as n,q as v,Z as J,g as P,y as f,p as l,B as Q,v as k,O as X,a1 as Y,a2 as ee,c as r,o as s,A as oe,C as te,t as ae,r as F}from"./iframe-Bl-fVlm8.js";import{P as O}from"./PzText-D5PUnIjq.js";import{_ as se}from"./PzIcon-cRuuou9i.js";import{_ as le}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const ne=["compact","regular","wide","fullscreen"],re="close",de={id:"default",title:"",size:"regular",closeOnOverlay:!0,closeOnEscape:!0,showCloseButton:!0,closeLabel:"Close modal"},ie=["aria-labelledby","aria-describedby"],ce=["id"],pe=["aria-label"],ue=["id"],me={key:1,class:"pz-modal-footer"},m=Z({name:"PzModal",__name:"PzModal",props:ee({id:{},isOpen:{type:Boolean},title:{},size:{},closeOnOverlay:{type:Boolean},closeOnEscape:{type:Boolean},showCloseButton:{type:Boolean},closeLabel:{}},de),setup(e,{emit:t}){const d=G(),o=e,y=t,g=r(()=>`pz-modal-title-${o.id}`),w=r(()=>`pz-modal-description-${o.id}`),z=r(()=>!!(o.title||d.header)),K=r(()=>z.value||o.showCloseButton),R=r(()=>[`pz-modal-dialog--${o.size}`]);let M="";const x=a=>{if(!(typeof document>"u")){if(a){M=document.body.style.overflow,document.body.style.overflow="hidden";return}document.body.style.overflow=M}},b=()=>{y(re)},U=()=>{o.closeOnOverlay&&b()},W=()=>{o.closeOnEscape&&b()};return V(()=>o.isOpen,a=>{x(a)},{immediate:!0}),H(()=>{x(!1)}),(a,C)=>(s(),_(Y,{to:"body"},[o.isOpen?(s(),n("div",{key:0,class:"pz-modal",onKeydown:X(W,["esc"])},[v("div",{class:"pz-modal-overlay",onClick:U},[v("div",{ref:"dialogRef",class:P(["pz-modal-dialog",R.value]),role:"dialog","aria-modal":!0,"aria-labelledby":g.value,"aria-describedby":w.value,onClick:C[0]||(C[0]=J(()=>{},["stop"]))},[K.value?(s(),n("header",{key:0,class:P(["pz-modal-header",{"pz-modal-header--between":z.value}])},[z.value?(s(),n("div",{key:0,id:g.value,class:"pz-modal-title"},[f(a.$slots,"header",{},()=>[o.title?(s(),_(k(O),{key:0,variant:"h4-bold",as:"h2"},{default:oe(()=>[te(ae(o.title),1)]),_:1})):l("",!0)],!0)],8,ce)):l("",!0),o.showCloseButton?(s(),n("button",{key:1,type:"button",class:"pz-modal-close","aria-label":o.closeLabel,onClick:b},[Q(k(se),{name:"close",size:"24",label:"Close modal"})],8,pe)):l("",!0)],2)):l("",!0),v("div",{id:w.value,class:"pz-modal-body"},[f(a.$slots,"default",{},void 0,!0)],8,ue),a.$slots.footer?(s(),n("footer",me,[f(a.$slots,"footer",{},void 0,!0)])):l("",!0)],10,ie)])],32)):l("",!0)]))}}),h=le(m,[["__scopeId","data-v-a4294a35"]]);m.__docgenInfo=Object.assign({displayName:m.name??m.__name},{name:"PzModal",exportName:"default",displayName:"PzModal",description:"",tags:{},props:[{name:"id",required:!1,type:{name:"string"}},{name:"isOpen",required:!0,type:{name:"boolean"}},{name:"title",required:!1,type:{name:"string"}},{name:"size",required:!1,type:{name:"PzModalSize"}},{name:"closeOnOverlay",required:!1,type:{name:"boolean"}},{name:"closeOnEscape",required:!1,type:{name:"boolean"}},{name:"showCloseButton",required:!1,type:{name:"boolean"}},{name:"closeLabel",required:!1,type:{name:"string"}}],slots:[{name:"header"},{name:"default"},{name:"footer"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Popups/PzModal/PzModal.vue"]});const ye=e=>`<template>
  <PzModal ${[':is-open="true"',e.title?`title="${e.title}"`:null,e.size!=="regular"?`size="${e.size}"`:null,e.closeOnOverlay===!1?':close-on-overlay="false"':null,e.closeOnEscape===!1?':close-on-escape="false"':null,e.showCloseButton===!1?':show-close-button="false"':null].filter(d=>!!d).join(" ")}>
    <p>Modal content</p>
  </PzModal>
</template>`,ze=()=>`<template>
  <PzModal :is-open="true" size="fullscreen">
    <template #header>
      <h2>інформація про КБВ.pdf</h2>
    </template>

    <template #footer>
      <button type="button">Закрити</button>
    </template>

    <div>Document preview content</div>
  </PzModal>
</template>`,be={title:"Components/Popups/PzModal",component:h,parameters:{prototype:{caption:"Modal component",note:"Based on the old isOpen/close modal, but rebuilt as a design-system dialog with overlay handling, sticky header and footer areas, and size variants for compact flows or document preview surfaces."},docs:{description:{component:"Use `PzModal` for dialogs, side-by-side review surfaces, and document preview overlays. The body content defaults to `body-regular`, while header and footer stay slot-driven for flexible composition."},source:{transform:(e,t)=>ye(t.args??be.args)}}},args:{id:"storybook-modal",isOpen:!1,title:"Документи тендера",size:"regular",closeOnOverlay:!0,closeOnEscape:!0,showCloseButton:!0,closeLabel:"Close modal",buttonLabel:"Open modal"},argTypes:{isOpen:{control:"boolean",description:"Controlled open state."},title:{control:"text",description:"Default title rendered in the header when the header slot is not used."},size:{control:"inline-radio",options:ne,description:"Dialog width preset."},closeOnOverlay:{control:"boolean",description:"Closes the dialog when the overlay is clicked."},closeOnEscape:{control:"boolean",description:"Closes the dialog on Escape."},showCloseButton:{control:"boolean",description:"Shows the close icon button in the header."},closeLabel:{control:"text",description:"Accessible label for the close button."},buttonLabel:{control:"text",description:"Story-only trigger label.",table:{category:"Story"}}},render:e=>({components:{pzModal:h,pzText:O},setup(){const t=F(!!e.isOpen);return V(()=>e.isOpen,y=>{t.value=!!y}),{args:e,isOpen:t,openModal:()=>{t.value=!0},closeModal:()=>{t.value=!1}}},template:`
      <div class="pz-modal-story">
        <section class="pz-modal-story-board">
          <div class="pz-modal-story-copy">
            <span class="pz-modal-story-eyebrow">Dialog surface</span>
            <pz-text variant="h4-bold">Default modal shell</pz-text>
            <pz-text variant="body-regular">
              Sticky header, body-regular content area, and footer actions for short confirmation or review flows.
            </pz-text>

            <button type="button" class="pz-modal-story-trigger" @click="openModal">
              {{ args.buttonLabel }}
            </button>
          </div>
        </section>

        <pz-modal
          :id="args.id"
          :is-open="isOpen"
          :title="args.title"
          :size="args.size"
          :close-on-overlay="args.closeOnOverlay"
          :close-on-escape="args.closeOnEscape"
          :show-close-button="args.showCloseButton"
          :close-label="args.closeLabel"
          @close="closeModal"
        >
          <div class="pz-modal-story-content">
            <pz-text variant="body-regular">
              Перегляньте вкладені документи, деталі постачальника та супровідні матеріали без виходу з поточного сценарію закупівлі.
            </pz-text>

            <div class="pz-modal-story-paper">
              <pz-text variant="body-semibold">інформація про КБВ.pdf</pz-text>
              <pz-text variant="body-regular">
                Інформація про кінцевих бенефіціарних власників постачальника товару, виконавця робіт, надавача послуги.
              </pz-text>
            </div>
          </div>

          <template #footer>
            <button type="button" class="pz-modal-story-secondary" @click="closeModal">Скасувати</button>
            <button type="button" class="pz-modal-story-primary" @click="closeModal">Підтвердити</button>
          </template>
        </pz-modal>
      </div>
    `})},i={},c={args:{title:"Інформація про документ",size:"compact",buttonLabel:"Open compact modal"}},p={args:{title:"Перегляд документів закупівлі",size:"wide",buttonLabel:"Open wide modal"}},u={parameters:{docs:{source:{code:ze()}}},render:()=>({components:{pzModal:h,pzText:O},setup(){const e=F(!1);return{isOpen:e,openModal:()=>{e.value=!0},closeModal:()=>{e.value=!1}}},template:`
      <div class="pz-modal-story">
        <section class="pz-modal-story-board">
          <div class="pz-modal-story-copy">
            <span class="pz-modal-story-eyebrow">Fullscreen review</span>
            <pz-text variant="h4-bold">Document preview surface</pz-text>
            <button type="button" class="pz-modal-story-trigger" @click="openModal">
              Open fullscreen modal
            </button>
          </div>
        </section>

        <pz-modal
          id="storybook-fullscreen-modal"
          :is-open="isOpen"
          size="fullscreen"
          title=""
          @close="closeModal"
        >
          <template #header>
            <div class="pz-modal-story-document-header">
              <pz-text variant="body-semibold">інформація про КБВ ТОВ МЕЙСІС.jpg</pz-text>
              <a href="#" class="pz-modal-story-download" @click.prevent>Завантажити</a>
            </div>
          </template>

          <div class="pz-modal-story-document">
            <div class="pz-modal-story-document-frame">
              <div class="pz-modal-story-document-sheet"></div>
            </div>
          </div>
        </pz-modal>
      </div>
    `})};var B,S,L;i.parameters={...i.parameters,docs:{...(B=i.parameters)==null?void 0:B.docs,source:{originalSource:"{}",...(L=(S=i.parameters)==null?void 0:S.docs)==null?void 0:L.source}}};var E,D,T;c.parameters={...c.parameters,docs:{...(E=c.parameters)==null?void 0:E.docs,source:{originalSource:`{
  args: {
    title: "Інформація про документ",
    size: "compact",
    buttonLabel: "Open compact modal"
  }
}`,...(T=(D=c.parameters)==null?void 0:D.docs)==null?void 0:T.source}}};var $,q,N;p.parameters={...p.parameters,docs:{...($=p.parameters)==null?void 0:$.docs,source:{originalSource:`{
  args: {
    title: "Перегляд документів закупівлі",
    size: "wide",
    buttonLabel: "Open wide modal"
  }
}`,...(N=(q=p.parameters)==null?void 0:q.docs)==null?void 0:N.source}}};var I,j,A;u.parameters={...u.parameters,docs:{...(I=u.parameters)==null?void 0:I.docs,source:{originalSource:`{
  parameters: {
    docs: {
      source: {
        code: buildSlotSource()
      }
    }
  },
  render: () => ({
    components: {
      pzModal: PzModal,
      pzText: PzText
    },
    setup() {
      const isOpen = ref(false);
      return {
        isOpen,
        openModal: () => {
          isOpen.value = true;
        },
        closeModal: () => {
          isOpen.value = false;
        }
      };
    },
    template: \`
      <div class="pz-modal-story">
        <section class="pz-modal-story-board">
          <div class="pz-modal-story-copy">
            <span class="pz-modal-story-eyebrow">Fullscreen review</span>
            <pz-text variant="h4-bold">Document preview surface</pz-text>
            <button type="button" class="pz-modal-story-trigger" @click="openModal">
              Open fullscreen modal
            </button>
          </div>
        </section>

        <pz-modal
          id="storybook-fullscreen-modal"
          :is-open="isOpen"
          size="fullscreen"
          title=""
          @close="closeModal"
        >
          <template #header>
            <div class="pz-modal-story-document-header">
              <pz-text variant="body-semibold">інформація про КБВ ТОВ МЕЙСІС.jpg</pz-text>
              <a href="#" class="pz-modal-story-download" @click.prevent>Завантажити</a>
            </div>
          </template>

          <div class="pz-modal-story-document">
            <div class="pz-modal-story-document-frame">
              <div class="pz-modal-story-document-sheet"></div>
            </div>
          </div>
        </pz-modal>
      </div>
    \`
  })
}`,...(A=(j=u.parameters)==null?void 0:j.docs)==null?void 0:A.source}}};const we=["Playground","CompactInfo","WideReview","DocumentPreview"];export{c as CompactInfo,u as DocumentPreview,i as Playground,p as WideReview,we as __namedExportsOrder,be as default};
