import{e as E,f as i,F,u as O,g as p,o,x as A,A as V,y as h,C as x,t as b,v as B,R as j,c as L,K as W,h as z,a0 as y}from"./iframe-Bl-fVlm8.js";import{P as g}from"./PzText-D5PUnIjq.js";import{p as Q}from"./configs-B15JgQZ-.js";import{_ as U}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const d=E({name:"PzNav",__name:"PzNav",props:{config:{},typography:{}},setup(e){const n=W(),r=e,q=a=>{const[s=""]=a.split("#");return s?s.startsWith("/")?s:`/${s}`:"/"},M=a=>a.startsWith("#")?a:q(a),f=a=>a.name===n.name,R=L(()=>!r.config.some(f)),u=a=>f(a)||R.value&&!!a.isDefault;return(a,s)=>(o(),i("ul",{class:p(["pz-nav",r.typography?`pz-typography--${r.typography}`:null])},[(o(!0),i(F,null,O(r.config,(t,$)=>(o(),i("li",{key:`${t.path}-${$}`,class:p(["pz-nav__item",[{disabled:t.disabled},{active:u(t)}]])},[t.disabled?(o(),i("span",{key:1,class:p(["pz-nav__text",{active:u(t)}])},[h(a.$slots,"view",{data:t},()=>[x(b(t.text),1)],!0)],2)):(o(),A(B(j),{key:0,to:M(t.path),class:p(["pz-nav__text",{active:u(t)}])},{default:V(()=>[h(a.$slots,"view",{data:t},()=>[x(b(t.text),1)],!0)]),_:2},1032,["to","class"]))],2))),128))],2))}}),m=U(d,[["__scopeId","data-v-ab9cd5ef"]]);d.__docgenInfo=Object.assign({displayName:d.name??d.__name},{name:"PzNav",exportName:"default",displayName:"PzNav",description:"",tags:{},props:[{name:"config",required:!0,type:{name:"Array",elements:[{name:"PzNavItem"}]}},{name:"typography",required:!1,type:{name:"PzTextVariant"}}],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",name:"market-procedures",text:"Закупівлі",isDefault:!0},{path:"/market/contracts",name:"market-contracts",text:"Договори"},{path:"/market/plans",name:"market-plans",text:"Плани"},{path:"/market/selection",name:"market-selection",text:"Відбори"},{path:"/market/products",name:"market-products",text:"Товари"}],G=[{path:"/tender/details",name:"tender-details",text:"Деталі закупівлі",isDefault:!0},{path:"/tender/questions",name:"tender-questions",text:"Питання та вимоги (0)"},{path:"/tender/complaints",name:"tender-complaints",text:"Скарги (0)"},{path:"/tender/monitoring",name:"tender-monitoring",text:"Моніторинг (0)",disabled:!0}],H=[{path:"/archive/overview",name:"archive-overview",text:"Overview",isDefault:!0},{path:"/archive/history",name:"archive-history",text:"History",disabled:!0},{path:"/archive/files",name:"archive-files",text:"Files"}],J=e=>`<template>
  <PzNav :config='${JSON.stringify(e.config,null,2)}' />
</template>`,K=()=>`<template>
  <PzNav :config="config">
    <template #view="{ data }">
      <span class="custom-nav-item">
        <span>{{ data.text }}</span>
        <span v-if="data.count" class="custom-nav-badge">{{ data.count }}</span>
      </span>
    </template>
  </PzNav>
</template>`,X={title:"Components/Navigation/PzNav",component:m,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:(e,n)=>J(n.args??X.args)}}},args:{config:N,typography:void 0},argTypes:{config:{control:"object",description:"Navigation items with route path, label, disabled state, and optional default fallback."},typography:{control:"select",options:[void 0,...Q],description:"Overrides typography using a PzText variant."}},render:e=>({components:{pzNav:m,pzText:g},setup(){const n=y();return z(async()=>{await n.push("/market/procedures")}),{args:e,marketNavItems:N,tenderNavItems:G}},template:`
      <div class="pz-nav-story">
        <section class="pz-nav-story-frame">
          <div class="pz-nav-story-header">
            <div>
              <span class="pz-nav-story-eyebrow">Main navigation</span>
              <pz-text variant="h4-bold">Section switcher for catalog and procurement pages</pz-text>
            </div>
            <span class="pz-nav-story-chip">route-aware</span>
          </div>

          <div class="pz-nav-story-stack">
            <div class="pz-nav-story-surface">
              <pz-nav :config="args.config" :typography="args.typography" />
            </div>
          </div>
        </section>

        <section class="pz-nav-story-grid">
          <article class="pz-nav-story-card">
            <div class="pz-nav-story-card-copy">
              <pz-text variant="body-semibold">Market categories</pz-text>
              <pz-text variant="small-regular">
                Mirrors the wide navigation from the marketplace landing page.
              </pz-text>
            </div>

            <div class="pz-nav-story-card-surface">
              <pz-nav :config="marketNavItems" />
            </div>
          </article>

          <article class="pz-nav-story-card">
            <div class="pz-nav-story-card-copy">
              <pz-text variant="body-semibold">Tender detail tabs</pz-text>
              <pz-text variant="small-regular">
                Good for process pages where one item is active and another may be disabled.
              </pz-text>
            </div>

            <div class="pz-nav-story-card-surface">
              <div class="pz-nav-story-compact">
                <pz-nav :config="tenderNavItems" />
              </div>
            </div>
          </article>
        </section>
      </div>
    `})},c={},v={args:{config:H},render:e=>({components:{pzNav:m,pzText:g},setup(){const n=y();return z(async()=>{await n.push("/archive/unknown")}),{args:e}},template:`
      <div class="pz-nav-story">
        <section class="pz-nav-story-frame">
          <div class="pz-nav-story-header">
            <div>
              <span class="pz-nav-story-eyebrow">Example</span>
              <pz-text variant="h4-bold">Default fallback item</pz-text>
            </div>
            <span class="pz-nav-story-chip">isDefault</span>
          </div>

          <div class="pz-nav-story-card-surface">
            <pz-nav :config="args.config" />
          </div>
        </section>
      </div>
    `})},l={parameters:{docs:{source:{code:K()}}},render:()=>({components:{pzNav:m,pzText:g},setup(){const e=y(),n=[{path:"/nav/questions",name:"nav-questions",text:"Questions",count:12,isDefault:!0},{path:"/nav/complaints",name:"nav-complaints",text:"Complaints",count:2},{path:"/nav/monitoring",name:"nav-monitoring",text:"Monitoring",count:0,disabled:!0}];return z(async()=>{await e.push("/nav/questions")}),{config:n}},template:`
      <div class="pz-nav-story">
        <section class="pz-nav-story-frame">
          <div class="pz-nav-story-header">
            <div>
              <span class="pz-nav-story-eyebrow">Example</span>
              <pz-text variant="h4-bold">Custom item slot</pz-text>
            </div>
            <span class="pz-nav-story-chip">view slot</span>
          </div>

          <div class="pz-nav-story-card-surface">
            <pz-nav :config="config">
              <template #view="{ data }">
                <span class="pz-nav-story-slot">
                  <span>{{ data.text }}</span>
                  <span class="pz-nav-story-badge">{{ data.count }}</span>
                </span>
              </template>
            </pz-nav>
          </div>
        </section>
      </div>
    `})};var w,k,P;c.parameters={...c.parameters,docs:{...(w=c.parameters)==null?void 0:w.docs,source:{originalSource:"{}",...(P=(k=c.parameters)==null?void 0:k.docs)==null?void 0:P.source}}};var _,T,S;v.parameters={...v.parameters,docs:{...(_=v.parameters)==null?void 0:_.docs,source:{originalSource:`{
  args: {
    config: archiveNavItems
  },
  render: args => ({
    components: {
      pzNav: PzNav,
      pzText: PzText
    },
    setup() {
      const router = useRouter();
      onMounted(async () => {
        await router.push("/archive/unknown");
      });
      return {
        args
      };
    },
    template: \`
      <div class="pz-nav-story">
        <section class="pz-nav-story-frame">
          <div class="pz-nav-story-header">
            <div>
              <span class="pz-nav-story-eyebrow">Example</span>
              <pz-text variant="h4-bold">Default fallback item</pz-text>
            </div>
            <span class="pz-nav-story-chip">isDefault</span>
          </div>

          <div class="pz-nav-story-card-surface">
            <pz-nav :config="args.config" />
          </div>
        </section>
      </div>
    \`
  })
}`,...(S=(T=v.parameters)==null?void 0:T.docs)==null?void 0:S.source}}};var D,I,C;l.parameters={...l.parameters,docs:{...(D=l.parameters)==null?void 0:D.docs,source:{originalSource:`{
  parameters: {
    docs: {
      source: {
        code: buildSlotStorySource()
      }
    }
  },
  render: () => ({
    components: {
      pzNav: PzNav,
      pzText: PzText
    },
    setup() {
      const router = useRouter();
      const config = [{
        path: "/nav/questions",
        name: "nav-questions",
        text: "Questions",
        count: 12,
        isDefault: true
      }, {
        path: "/nav/complaints",
        name: "nav-complaints",
        text: "Complaints",
        count: 2
      }, {
        path: "/nav/monitoring",
        name: "nav-monitoring",
        text: "Monitoring",
        count: 0,
        disabled: true
      }];
      onMounted(async () => {
        await router.push("/nav/questions");
      });
      return {
        config
      };
    },
    template: \`
      <div class="pz-nav-story">
        <section class="pz-nav-story-frame">
          <div class="pz-nav-story-header">
            <div>
              <span class="pz-nav-story-eyebrow">Example</span>
              <pz-text variant="h4-bold">Custom item slot</pz-text>
            </div>
            <span class="pz-nav-story-chip">view slot</span>
          </div>

          <div class="pz-nav-story-card-surface">
            <pz-nav :config="config">
              <template #view="{ data }">
                <span class="pz-nav-story-slot">
                  <span>{{ data.text }}</span>
                  <span class="pz-nav-story-badge">{{ data.count }}</span>
                </span>
              </template>
            </pz-nav>
          </div>
        </section>
      </div>
    \`
  })
}`,...(C=(I=l.parameters)==null?void 0:I.docs)==null?void 0:C.source}}};const na=["Playground","DefaultFallback","CustomItemView"];export{l as CustomItemView,v as DefaultFallback,c as Playground,na as __namedExportsOrder,X as default};
