import{r as C}from"./iframe-Bl-fVlm8.js";import{P as n}from"./PzAccordion-CnrpF9Nt.js";import{P as L}from"./PzLink-DjFfrqMo.js";import{P as U}from"./PzStatus-fGp4njnf.js";import{P as T}from"./PzText-D5PUnIjq.js";import{p as M}from"./configs-B15JgQZ-.js";import"./preload-helper-C1FmrZbK.js";import"./PzIcon-cRuuou9i.js";import"./PzSkeleton-87dTujvi.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const D={supplier:'ТОВАРИСТВО З ОБМЕЖЕНОЮ ВІДПОВІДАЛЬНІСТЮ "ЕКО ЦЕНТР ПРОЕКТ"',identifier:"#43194460 (UA-EDR)",amountLabel:"Остаточна пропозиція:",amountValue:"98 000,00 UAH",statusLabel:"Переможець"},R=[{id:"name",label:"Найменування:",value:'ТОВАРИСТВО З ОБМЕЖЕНОЮ ВІДПОВІДАЛЬНІСТЮ "ЕКО ЦЕНТР ПРОЕКТ"'},{id:"code",label:"Ідентифікаційний код:",value:"#43194460 (UA-EDR)"},{id:"location",label:"Місцезнаходження:",value:"79008, Україна, Львівська область, місто Львів, ВУЛИЦЯ П.БЕРИНДИ будинок 3 квартира 4"},{id:"category",label:"Класифікація суб’єктів господарювання:",value:"Суб'єкт малого підприємництва"}],l="<\/script>",$=o=>{const e=['v-model="isOpen"',o.label?`label="${o.label}"`:null,o.disabled?':disabled="true"':null,o.loading?':loading="true"':null,o.contentClass?`content-class="${o.contentClass}"`:null].filter(a=>!!a).join(`
    `);return`<script setup lang="ts">
import { ref } from "vue";

const isOpen = ref(${o.modelValue??!1});
${l}

<template>
  <PzAccordion
    ${e}
  >
    Accordion body content
  </PzAccordion>
</template>`},E=`<script setup lang="ts">
import { ref } from "vue";

const isOpen = ref(true);
${l}

<template>
  <PzAccordion v-model="isOpen">
    <template #trigger="{ active }">
      <div class="offer-summary">
        <div>
          <strong>ТОВ "ЕКО ЦЕНТР ПРОЕКТ"</strong>
          <span>#43194460 (UA-EDR)</span>
        </div>

        <div>
          <span>Остаточна пропозиція:</span>
          <strong>98 000,00 UAH</strong>
        </div>

        <PzStatus variant="active">
          {{ active ? "Переможець" : "Переможець" }}
        </PzStatus>
      </div>
    </template>

    <div>Accordion content</div>
  </PzAccordion>
</template>`,I=`<template>
  <PzAccordion label="Додаткові умови проведення закупівлі">
    Accordion body content
  </PzAccordion>
</template>`,B=`<template>
  <PzAccordion
    :model-value="true"
    label="Додаткові умови проведення закупівлі"
  >
    Accordion body content
  </PzAccordion>
</template>`,_=`<script setup lang="ts">
import { ref } from "vue";

const isOpen = ref(true);
const loading = ref(true);
${l}

<template>
  <PzAccordion
    v-model="isOpen"
    label="Завантаження деталей рішення"
    :loading="loading"
  >
    Деталі рішення після завантаження
  </PzAccordion>
</template>`,q={title:"Components/Layouts/PzAccordion",component:n,parameters:{prototype:{caption:"PzAccordion",note:"Disclosure component for procurement sections with a simple label, a custom trigger slot, and a built-in loading state."},docs:{description:{component:"Use `PzAccordion` for collapsible procurement sections. It works uncontrolled without props, can be controlled with `v-model` for external navigation, supports a fallback `label`, uses `loading` for built-in skeleton content, and switches to the `trigger` slot for richer headers."},source:{transform:(o,e)=>$(e.args??q.args)}}},args:{modelValue:!1,label:"Додаткові умови проведення закупівлі",disabled:!1,loading:!1,contentClass:"",typography:void 0},argTypes:{modelValue:{control:"boolean",description:"Controls the expanded state when provided. Omit it for internal uncontrolled state."},label:{control:"text",description:"Fallback trigger label when the `trigger` slot is not used."},disabled:{control:"boolean",description:"Disables interaction and prevents toggling."},loading:{control:"boolean",description:"Replaces body content with the built-in skeleton loader while the accordion stays open."},contentClass:{control:"text",description:"Optional class applied to the content surface wrapper."},typography:{control:"select",options:[void 0,...M],description:"Overrides label typography using a PzText variant."}},render:o=>({components:{pzAccordion:n,pzText:T},setup(){return{args:o,updateModelValue:a=>{o.modelValue=a}}},template:`
      <div class="pz-accordion-story">
        <section class="pz-accordion-story-board">
          <div class="pz-accordion-story-header">
            <div class="pz-accordion-story-copy">
              <span class="pz-accordion-story-eyebrow">Component API</span>
              <pz-text variant="h4-bold">Disclosure surface with procurement-first defaults</pz-text>
            </div>
            <span class="pz-accordion-story-chip">{{ args.modelValue ? "open" : "closed" }}</span>
          </div>

          <div class="pz-accordion-story-preview">
            <pz-accordion
              :model-value="args.modelValue"
              :label="args.label"
              :disabled="args.disabled"
              :loading="args.loading"
              :content-class="args.contentClass"
              :typography="args.typography"
              @update:model-value="updateModelValue"
            >
              <div class="pz-accordion-story-body">
                <p class="pz-accordion-story-paragraph">
                  Використовуйте PzAccordion для секцій, де заголовок показує короткий підсумок, а тіло розкриває деталі рішення, пропозиції або умов закупівлі.
                </p>
                <p class="pz-accordion-story-paragraph">
                  Якщо потрібна складніша шапка, переходьте на слот <code>#trigger</code>. Якщо контент ще завантажується, вмикайте прапорець <code>loading</code>.
                </p>
              </div>
            </pz-accordion>
          </div>
        </section>
      </div>
    `})},r={},s={parameters:{docs:{source:{code:I},description:{story:"No `v-model` is required for basic disclosure behavior. The accordion keeps its own open/closed state."}}},args:{modelValue:void 0,label:"Додаткові умови проведення закупівлі"},render:o=>({components:{pzAccordion:n},setup(){return{args:o}},template:`
      <div class="pz-accordion-story">
        <section class="pz-accordion-story-board">
          <div class="pz-accordion-story-preview">
            <pz-accordion
              :label="args.label"
              :disabled="args.disabled"
              :loading="args.loading"
              :content-class="args.contentClass"
              :typography="args.typography"
            >
              <div class="pz-accordion-story-body">
                <p class="pz-accordion-story-paragraph">
                  This accordion opens and closes using internal state because no modelValue prop is provided.
                </p>
              </div>
            </pz-accordion>
          </div>
        </section>
      </div>
    `})},t={parameters:{docs:{source:{code:B},description:{story:'`:model-value="true"` without `v-model` initializes the accordion as open, then it continues working with internal state.'}}},args:{modelValue:!0,label:"Додаткові умови проведення закупівлі"},render:o=>({components:{pzAccordion:n},setup(){return{args:o}},template:`
      <div class="pz-accordion-story">
        <section class="pz-accordion-story-board">
          <div class="pz-accordion-story-preview">
            <pz-accordion
              :model-value="true"
              :label="args.label"
              :disabled="args.disabled"
              :loading="args.loading"
              :content-class="args.contentClass"
              :typography="args.typography"
            >
              <div class="pz-accordion-story-body">
                <p class="pz-accordion-story-paragraph">
                  This accordion starts open from modelValue, but can still close because no update listener controls it.
                </p>
              </div>
            </pz-accordion>
          </div>
        </section>
      </div>
    `})},c={parameters:{docs:{source:{code:E}}},render:()=>({components:{pzAccordion:n,pzLink:L,pzStatus:U},setup(){return{isOpen:C(!0),participantRows:R,winnerSummary:D}},template:`
      <div class="pz-accordion-story">
        <section class="pz-accordion-story-board">
          <div class="pz-accordion-story-header">
            <div class="pz-accordion-story-copy">
              <span class="pz-accordion-story-eyebrow">Usage example</span>
              <h3 class="pz-accordion-story-title">Winner offer summary with a custom trigger</h3>
            </div>
          </div>

          <div class="pz-accordion-story-preview">
            <pz-accordion v-model="isOpen">
              <template #trigger>
                <div class="pz-accordion-story-offer">
                  <div class="pz-accordion-story-offer-main">
                    <strong class="pz-accordion-story-offer-name">{{ winnerSummary.supplier }}</strong>
                    <span class="pz-accordion-story-offer-id">{{ winnerSummary.identifier }}</span>
                  </div>

                  <div class="pz-accordion-story-offer-price">
                    <span class="pz-accordion-story-offer-caption">{{ winnerSummary.amountLabel }}</span>
                    <strong class="pz-accordion-story-offer-value">{{ winnerSummary.amountValue }}</strong>
                  </div>

                  <pz-status variant="active">
                    {{ winnerSummary.statusLabel }}
                  </pz-status>
                </div>
              </template>

              <div class="pz-accordion-story-sections">
                <section class="pz-accordion-story-section">
                  <h4 class="pz-accordion-story-subtitle">Інформація про учасника</h4>

                  <dl class="pz-accordion-story-definition-list">
                    <div
                      v-for="row in participantRows"
                      :key="row.id"
                      class="pz-accordion-story-definition-row"
                    >
                      <dt>{{ row.label }}</dt>
                      <dd>{{ row.value }}</dd>
                    </div>
                  </dl>
                </section>

                <section class="pz-accordion-story-section">
                  <h4 class="pz-accordion-story-subtitle">Наступні дії</h4>
                  <p class="pz-accordion-story-paragraph">17 квітня 2026 • 12:39</p>
                  <pz-link href="https://prozorro.gov.ua">
                    Що робити після перемоги в аукціоні
                  </pz-link>
                </section>
              </div>
            </pz-accordion>
          </div>
        </section>
      </div>
    `})},i={args:{modelValue:!0,label:"Завантаження деталей рішення",loading:!0},parameters:{docs:{source:{code:_}}},render:o=>({components:{pzAccordion:n,pzText:T},setup(){return{args:o,updateModelValue:a=>{o.modelValue=a}}},template:`
      <div class="pz-accordion-story">
        <section class="pz-accordion-story-board">
          <div class="pz-accordion-story-header">
            <div class="pz-accordion-story-copy">
              <span class="pz-accordion-story-eyebrow">Usage example</span>
              <pz-text variant="h4-bold">Built-in loading state</pz-text>
            </div>
          </div>

          <div class="pz-accordion-story-preview">
            <pz-accordion
              :model-value="args.modelValue"
              :label="args.label"
              :loading="args.loading"
              @update:model-value="updateModelValue"
            >
              <div class="pz-accordion-story-body">
                <p class="pz-accordion-story-paragraph">
                  Після завершення завантаження секція залишається відкритою та одразу показує фактичний вміст.
                </p>
                <p class="pz-accordion-story-paragraph">
                  Це підходить для асинхронних блоків рішень, кваліфікації або історії обробки документів.
                </p>
              </div>
            </pz-accordion>
          </div>
        </section>
      </div>
    `})},d={args:{modelValue:!1,label:"Архівна секція без взаємодії",disabled:!0}};var p,u,m;r.parameters={...r.parameters,docs:{...(p=r.parameters)==null?void 0:p.docs,source:{originalSource:"{}",...(m=(u=r.parameters)==null?void 0:u.docs)==null?void 0:m.source}}};var z,g,y;s.parameters={...s.parameters,docs:{...(z=s.parameters)==null?void 0:z.docs,source:{originalSource:`{
  parameters: {
    docs: {
      source: {
        code: uncontrolledSource
      },
      description: {
        story: "No \`v-model\` is required for basic disclosure behavior. The accordion keeps its own open/closed state."
      }
    }
  },
  args: {
    modelValue: undefined,
    label: "Додаткові умови проведення закупівлі"
  },
  render: (args: PzAccordionStoryArgs) => ({
    components: {
      pzAccordion: PzAccordion
    },
    setup() {
      return {
        args
      };
    },
    template: \`
      <div class="pz-accordion-story">
        <section class="pz-accordion-story-board">
          <div class="pz-accordion-story-preview">
            <pz-accordion
              :label="args.label"
              :disabled="args.disabled"
              :loading="args.loading"
              :content-class="args.contentClass"
              :typography="args.typography"
            >
              <div class="pz-accordion-story-body">
                <p class="pz-accordion-story-paragraph">
                  This accordion opens and closes using internal state because no modelValue prop is provided.
                </p>
              </div>
            </pz-accordion>
          </div>
        </section>
      </div>
    \`
  })
}`,...(y=(g=s.parameters)==null?void 0:g.docs)==null?void 0:y.source}}};var v,b,f;t.parameters={...t.parameters,docs:{...(v=t.parameters)==null?void 0:v.docs,source:{originalSource:`{
  parameters: {
    docs: {
      source: {
        code: initialOpenSource
      },
      description: {
        story: '\`:model-value="true"\` without \`v-model\` initializes the accordion as open, then it continues working with internal state.'
      }
    }
  },
  args: {
    modelValue: true,
    label: "Додаткові умови проведення закупівлі"
  },
  render: (args: PzAccordionStoryArgs) => ({
    components: {
      pzAccordion: PzAccordion
    },
    setup() {
      return {
        args
      };
    },
    template: \`
      <div class="pz-accordion-story">
        <section class="pz-accordion-story-board">
          <div class="pz-accordion-story-preview">
            <pz-accordion
              :model-value="true"
              :label="args.label"
              :disabled="args.disabled"
              :loading="args.loading"
              :content-class="args.contentClass"
              :typography="args.typography"
            >
              <div class="pz-accordion-story-body">
                <p class="pz-accordion-story-paragraph">
                  This accordion starts open from modelValue, but can still close because no update listener controls it.
                </p>
              </div>
            </pz-accordion>
          </div>
        </section>
      </div>
    \`
  })
}`,...(f=(b=t.parameters)==null?void 0:b.docs)==null?void 0:f.source}}};var h,w,A;c.parameters={...c.parameters,docs:{...(h=c.parameters)==null?void 0:h.docs,source:{originalSource:`{
  parameters: {
    docs: {
      source: {
        code: customTriggerSource
      }
    }
  },
  render: () => ({
    components: {
      pzAccordion: PzAccordion,
      pzLink: PzLink,
      pzStatus: PzStatus
    },
    setup() {
      const isOpen = ref(true);
      return {
        isOpen,
        participantRows,
        winnerSummary
      };
    },
    template: \`
      <div class="pz-accordion-story">
        <section class="pz-accordion-story-board">
          <div class="pz-accordion-story-header">
            <div class="pz-accordion-story-copy">
              <span class="pz-accordion-story-eyebrow">Usage example</span>
              <h3 class="pz-accordion-story-title">Winner offer summary with a custom trigger</h3>
            </div>
          </div>

          <div class="pz-accordion-story-preview">
            <pz-accordion v-model="isOpen">
              <template #trigger>
                <div class="pz-accordion-story-offer">
                  <div class="pz-accordion-story-offer-main">
                    <strong class="pz-accordion-story-offer-name">{{ winnerSummary.supplier }}</strong>
                    <span class="pz-accordion-story-offer-id">{{ winnerSummary.identifier }}</span>
                  </div>

                  <div class="pz-accordion-story-offer-price">
                    <span class="pz-accordion-story-offer-caption">{{ winnerSummary.amountLabel }}</span>
                    <strong class="pz-accordion-story-offer-value">{{ winnerSummary.amountValue }}</strong>
                  </div>

                  <pz-status variant="active">
                    {{ winnerSummary.statusLabel }}
                  </pz-status>
                </div>
              </template>

              <div class="pz-accordion-story-sections">
                <section class="pz-accordion-story-section">
                  <h4 class="pz-accordion-story-subtitle">Інформація про учасника</h4>

                  <dl class="pz-accordion-story-definition-list">
                    <div
                      v-for="row in participantRows"
                      :key="row.id"
                      class="pz-accordion-story-definition-row"
                    >
                      <dt>{{ row.label }}</dt>
                      <dd>{{ row.value }}</dd>
                    </div>
                  </dl>
                </section>

                <section class="pz-accordion-story-section">
                  <h4 class="pz-accordion-story-subtitle">Наступні дії</h4>
                  <p class="pz-accordion-story-paragraph">17 квітня 2026 • 12:39</p>
                  <pz-link href="https://prozorro.gov.ua">
                    Що робити після перемоги в аукціоні
                  </pz-link>
                </section>
              </div>
            </pz-accordion>
          </div>
        </section>
      </div>
    \`
  })
}`,...(A=(w=c.parameters)==null?void 0:w.docs)==null?void 0:A.source}}};var S,P,V;i.parameters={...i.parameters,docs:{...(S=i.parameters)==null?void 0:S.docs,source:{originalSource:`{
  args: {
    modelValue: true,
    label: "Завантаження деталей рішення",
    loading: true
  },
  parameters: {
    docs: {
      source: {
        code: loadingSource
      }
    }
  },
  render: (args: PzAccordionStoryArgs) => ({
    components: {
      pzAccordion: PzAccordion,
      pzText: PzText
    },
    setup() {
      const updateModelValue = (value: boolean): void => {
        args.modelValue = value;
      };
      return {
        args,
        updateModelValue
      };
    },
    template: \`
      <div class="pz-accordion-story">
        <section class="pz-accordion-story-board">
          <div class="pz-accordion-story-header">
            <div class="pz-accordion-story-copy">
              <span class="pz-accordion-story-eyebrow">Usage example</span>
              <pz-text variant="h4-bold">Built-in loading state</pz-text>
            </div>
          </div>

          <div class="pz-accordion-story-preview">
            <pz-accordion
              :model-value="args.modelValue"
              :label="args.label"
              :loading="args.loading"
              @update:model-value="updateModelValue"
            >
              <div class="pz-accordion-story-body">
                <p class="pz-accordion-story-paragraph">
                  Після завершення завантаження секція залишається відкритою та одразу показує фактичний вміст.
                </p>
                <p class="pz-accordion-story-paragraph">
                  Це підходить для асинхронних блоків рішень, кваліфікації або історії обробки документів.
                </p>
              </div>
            </pz-accordion>
          </div>
        </section>
      </div>
    \`
  })
}`,...(V=(P=i.parameters)==null?void 0:P.docs)==null?void 0:V.source}}};var x,O,k;d.parameters={...d.parameters,docs:{...(x=d.parameters)==null?void 0:x.docs,source:{originalSource:`{
  args: {
    modelValue: false,
    label: "Архівна секція без взаємодії",
    disabled: true
  }
}`,...(k=(O=d.parameters)==null?void 0:O.docs)==null?void 0:k.source}}};const Y=["Playground","Uncontrolled","InitialOpen","CustomTrigger","LoadingState","DisabledState"];export{c as CustomTrigger,d as DisabledState,t as InitialOpen,i as LoadingState,r as Playground,s as Uncontrolled,Y as __namedExportsOrder,q as default};
