import{e as O,r as x,w as E,f as r,F as D,u as F,y as f,p as U,g as h,c as n,o,C as j,t as C,q as J}from"./iframe-Bl-fVlm8.js";import{P as N}from"./PzText-D5PUnIjq.js";import{p as M}from"./configs-B15JgQZ-.js";import{_ as R}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const W={key:0,class:"pz-array-clamp__item"},G=3,c=O({name:"PzArrayClamp",__name:"PzArrayClamp",props:{list:{},count:{default:G},expanded:{type:Boolean,default:!1},expandLabel:{default:"Показати більше"},collapseLabel:{default:"Показати менше"},btnClass:{default:""},typography:{}},emits:["update:expanded"],setup(e,{emit:t}){const a=e,m=t,u=x(a.expanded);E(()=>a.expanded,l=>{u.value=l});const s=n(()=>u.value),B=n(()=>s.value?a.list:a.list.slice(0,a.count)),b=n(()=>Math.max(a.list.length-a.count,0)),q=n(()=>b.value>0),z=()=>{const l=!s.value;u.value=l,m("update:expanded",l)};return(l,X)=>(o(),r("ul",{class:h(["pz-array-clamp",e.typography?`pz-typography--${e.typography}`:null])},[(o(!0),r(D,null,F(B.value,(y,v)=>(o(),r("li",{key:`${String(y)}-${v}`,class:"pz-array-clamp__item"},[f(l.$slots,"default",{item:y,index:v},()=>[j(C(y),1)],!0)]))),128)),q.value?(o(),r("li",W,[f(l.$slots,"toggle",{toggle:z,expanded:s.value,hiddenCount:b.value},()=>[J("button",{type:"button",class:h(["pz-array-clamp__toggle",e.btnClass]),onClick:z},C(s.value?e.collapseLabel:e.expandLabel),3)],!0)])):U("",!0)],2))}}),g=R(c,[["__scopeId","data-v-32677182"]]);c.__docgenInfo=Object.assign({displayName:c.name??c.__name},{name:"PzArrayClamp",exportName:"default",displayName:"PzArrayClamp",description:"",tags:{},props:[{name:"list",required:!0,type:{name:"Array",elements:[{name:"unknown"}]}},{name:"count",required:!1,type:{name:"number"},defaultValue:{func:!1,value:"DEFAULT_VISIBLE_COUNT"}},{name:"expanded",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"expandLabel",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'"Показати більше"'}},{name:"collapseLabel",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'"Показати менше"'}},{name:"btnClass",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}},{name:"typography",required:!1,type:{name:"PzTextVariant"}}],slots:[{name:"default",scoped:!0,bindings:[{name:"item",title:"binding"},{name:"index",title:"binding"}]},{name:"toggle",scoped:!0,bindings:[{name:"toggle",title:"binding"},{name:"expanded",title:"binding"},{name:"hidden-count",title:"binding"}]}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Text/PzArrayClamp/PzArrayClamp.vue"]});const L=['251035-П29"','"7519 АК1"','"236-1701082"','"236-1702091"','"236-1115030"'],I=['ТОВ "Центральна ремонтна база"','ТОВ "Укрспецлогістика"','ДП "Технічний сервіс №17"','ТОВ "Промавтодеталь"'],H=e=>`<template>
  <PzArrayClamp ${[`:list='${JSON.stringify(e.list,null,2)}'`,e.count!==3?`:count="${e.count}"`:null,e.expanded?':expanded="true"':null,e.expandLabel!=="Показати більше"?`expand-label="${e.expandLabel}"`:null,e.collapseLabel!=="Показати менше"?`collapse-label="${e.collapseLabel}"`:null].filter(m=>!!m).join(" ")} />
</template>`,K=()=>`<template>
  <PzArrayClamp :list="items" :count="2">
    <template #default="{ item, index }">
      <span>{{ index + 1 }}. {{ item }}</span>
    </template>

    <template #toggle="{ toggle, expanded, hiddenCount }">
      <button type="button" class="custom-toggle" @click="toggle">
        {{ expanded ? "Згорнути" : \`Ще \${hiddenCount} позиції\` }}
      </button>
    </template>
  </PzArrayClamp>
</template>`,Q={title:"Components/Text/PzArrayClamp",component:g,parameters:{prototype:{caption:"Array clamp component",note:"Compact vertical list for short repeated values. It stays close to the old array clamp prototype, but uses design-system text and link tokens plus controlled expand state."},docs:{description:{component:"Use `PzArrayClamp` to show a short list of repeated values with a link-like reveal action. Item text defaults to the `body-regular` style, and the component supports item and toggle slots for customization."},source:{transform:(e,t)=>H(t.args??Q.args)}}},args:{list:L,count:3,expanded:!1,expandLabel:"Показати більше",collapseLabel:"Показати менше",btnClass:"",typography:void 0,title:"Compact values inside a table cell"},argTypes:{list:{control:"object",description:"Items rendered by the clamp."},count:{control:{type:"number",min:1,max:10,step:1},description:"Number of items visible before the list is expanded."},expanded:{control:"boolean",description:"Controlled expanded state."},expandLabel:{control:"text",description:"Default label shown while collapsed."},collapseLabel:{control:"text",description:"Default label shown while expanded."},btnClass:{control:"text",description:"Additional class names for the default toggle button."},typography:{control:"select",options:[void 0,...M],description:"Overrides typography using a PzText variant."},title:{control:"text",description:"Story-only heading.",table:{category:"Story"}}},render:e=>({components:{pzArrayClamp:g,pzText:N},setup(){const t=x(!!e.expanded);return E(()=>e.expanded,a=>{t.value=!!a}),{args:e,expanded:t,supplierNames:I,tenderCodes:L}},template:`
      <div class="pz-array-clamp-story">
        <section class="pz-array-clamp-story-hero">
          <div class="pz-array-clamp-story-copy">
            <span class="pz-array-clamp-story-eyebrow">Body Regular by default</span>
            <pz-text variant="h4-bold">{{ args.title }}</pz-text>
            <pz-text variant="body-regular">
              Designed for compact cells where repeated values should stay readable before expanding into the full list.
            </pz-text>
          </div>

          <div class="pz-array-clamp-story-preview">
            <span class="pz-array-clamp-story-label">Cell preview</span><pz-array-clamp
              :list="args.list"
              :count="args.count"
              :expanded="expanded"
              :expand-label="args.expandLabel"
              :collapse-label="args.collapseLabel"
              :btn-class="args.btnClass"
              :typography="args.typography"
              @update:expanded="expanded = $event"
            />
          </div>
        </section>

        <section class="pz-array-clamp-story-grid">
          <article class="pz-array-clamp-story-card">
            <span class="pz-array-clamp-story-label">Tender codes</span>
            <pz-array-clamp :list="tenderCodes" :count="3" />
          </article>

          <article class="pz-array-clamp-story-card">
            <span class="pz-array-clamp-story-label">Suppliers</span>
            <pz-array-clamp :list="supplierNames" :count="2" />
          </article>
        </section>
      </div>
    `})},p={},d={args:{list:I,count:2,title:"Two visible suppliers"}},i={parameters:{docs:{source:{code:K()}}},render:()=>({components:{pzArrayClamp:g,pzText:N},setup(){return{expanded:x(!1),items:['"236-1701082"','"236-1702091"','"236-1115030"','"236-1302024"']}},template:`
      <div class="pz-array-clamp-story">
        <section class="pz-array-clamp-story-hero">
          <div class="pz-array-clamp-story-copy">
            <span class="pz-array-clamp-story-eyebrow">Slots</span>
            <pz-text variant="h4-bold">Custom item and toggle rendering</pz-text>
          </div>

          <div class="pz-array-clamp-story-preview">
            <div class="pz-array-clamp-story-cell">
              <pz-array-clamp
                :list="items"
                :count="2"
                :expanded="expanded"
                @update:expanded="expanded = $event"
              >
                <template #default="{ item, index }">
                  <span>{{ index + 1 }}. {{ item }}</span>
                </template>

                <template #toggle="{ toggle, expanded: isExpanded, hiddenCount }">
                  <button
                    type="button"
                    class="pz-array-clamp-story-custom-toggle"
                    @click="toggle"
                  >
                    {{ isExpanded ? "Згорнути" : "Ще " + hiddenCount + " позиції" }}
                  </button>
                </template>
              </pz-array-clamp>
            </div>
          </div>
        </section>
      </div>
    `})};var T,w,A;p.parameters={...p.parameters,docs:{...(T=p.parameters)==null?void 0:T.docs,source:{originalSource:"{}",...(A=(w=p.parameters)==null?void 0:w.docs)==null?void 0:A.source}}};var P,S,_;d.parameters={...d.parameters,docs:{...(P=d.parameters)==null?void 0:P.docs,source:{originalSource:`{
  args: {
    list: supplierNames,
    count: 2,
    title: "Two visible suppliers"
  }
}`,...(_=(S=d.parameters)==null?void 0:S.docs)==null?void 0:_.source}}};var V,$,k;i.parameters={...i.parameters,docs:{...(V=i.parameters)==null?void 0:V.docs,source:{originalSource:`{
  parameters: {
    docs: {
      source: {
        code: buildSlotSource()
      }
    }
  },
  render: () => ({
    components: {
      pzArrayClamp: PzArrayClamp,
      pzText: PzText
    },
    setup() {
      const expanded = ref(false);
      const items = ['"236-1701082"', '"236-1702091"', '"236-1115030"', '"236-1302024"'];
      return {
        expanded,
        items
      };
    },
    template: \`
      <div class="pz-array-clamp-story">
        <section class="pz-array-clamp-story-hero">
          <div class="pz-array-clamp-story-copy">
            <span class="pz-array-clamp-story-eyebrow">Slots</span>
            <pz-text variant="h4-bold">Custom item and toggle rendering</pz-text>
          </div>

          <div class="pz-array-clamp-story-preview">
            <div class="pz-array-clamp-story-cell">
              <pz-array-clamp
                :list="items"
                :count="2"
                :expanded="expanded"
                @update:expanded="expanded = $event"
              >
                <template #default="{ item, index }">
                  <span>{{ index + 1 }}. {{ item }}</span>
                </template>

                <template #toggle="{ toggle, expanded: isExpanded, hiddenCount }">
                  <button
                    type="button"
                    class="pz-array-clamp-story-custom-toggle"
                    @click="toggle"
                  >
                    {{ isExpanded ? "Згорнути" : "Ще " + hiddenCount + " позиції" }}
                  </button>
                </template>
              </pz-array-clamp>
            </div>
          </div>
        </section>
      </div>
    \`
  })
}`,...(k=($=i.parameters)==null?void 0:$.docs)==null?void 0:k.source}}};const le=["Playground","TwoVisibleItems","CustomSlots"];export{i as CustomSlots,p as Playground,d as TwoVisibleItems,le as __namedExportsOrder,Q as default};
