import{P as p}from"./PzText-D5PUnIjq.js";import{e as l,f as d,n as m,c as g,o as u}from"./iframe-Bl-fVlm8.js";import{_ as f}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./preload-helper-C1FmrZbK.js";const z=["contain","cover","fill","none","scale-down"],y=["eager","lazy"],v=["auto","async","sync"],h=["src","alt","loading","decoding"],i=l({name:"PzImage",__name:"PzImage",props:{src:{},alt:{},fit:{default:"contain"},loading:{default:void 0},decoding:{default:"async"}},setup(e){const a=e,o=g(()=>({"--pz-image-fit":a.fit}));return(P,b)=>(u(),d("img",{class:"pz-image",src:a.src,alt:a.alt,loading:a.loading,decoding:a.decoding,style:m(o.value)},null,12,h))}}),s=f(i,[["__scopeId","data-v-d597634d"]]);i.__docgenInfo=Object.assign({displayName:i.name??i.__name},{name:"PzImage",exportName:"default",displayName:"PzImage",description:"",tags:{},props:[{name:"src",required:!0,type:{name:"string"}},{name:"alt",required:!0,type:{name:"string"}},{name:"fit",required:!1,type:{name:"PzImageFit"},defaultValue:{func:!1,value:'"contain"'}},{name:"loading",required:!1,type:{name:"PzImageLoading"},defaultValue:{func:!1,value:"undefined"}},{name:"decoding",required:!1,type:{name:"PzImageDecoding"},defaultValue:{func:!1,value:'"async"'}}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/Display/PzImage/PzImage.vue"]});const I=e=>`<template>
  <PzImage ${[`src="${e.src}"`,`alt="${e.alt}"`,e.fit!=="contain"?`fit="${e.fit}"`:null,e.loading?`loading="${e.loading}"`:null,e.decoding!=="async"?`decoding="${e.decoding}"`:null].filter(o=>!!o).join(" ")} />
</template>`,_={title:"Components/Display/PzImage",component:s,parameters:{prototype:{caption:"Image component",note:"Minimal image primitive with basic responsive defaults and CSS custom properties for easy visual overrides."},docs:{description:{component:"Use `PzImage` when you want a predictable image primitive with responsive defaults. Styling remains easy to customize through inherited classes, inline styles, and the `--pz-image-*` custom properties."},source:{transform:(e,a)=>I(a.args??_.args)}}},args:{src:"/prozorro_logo.png",alt:"Prozorro logotype",fit:"contain",loading:"lazy",decoding:"async"},argTypes:{src:{control:"text",description:"Image source URL."},alt:{control:"text",description:"Alternative text for the image."},fit:{control:"select",options:z,description:"Object-fit behavior for framed image layouts."},loading:{control:"inline-radio",options:y,description:"Native browser loading hint."},decoding:{control:"inline-radio",options:v,description:"Native image decoding mode."}},render:e=>({components:{pzImage:s,pzText:p},setup(){return{args:e}},template:`
      <div class="pz-image-story">
        <section class="pz-image-story-hero">
          <div class="pz-image-story-header">
            <div>
              <span class="pz-image-story-eyebrow">Component API</span>
              <pz-text variant="h4-bold">Responsive image primitive</pz-text>
            </div>
            <span class="pz-image-story-chip">{{ args.fit }}</span>
          </div>

          <div class="pz-image-story-surface">
            <pz-image
              :src="args.src"
              :alt="args.alt"
              :fit="args.fit"
              :loading="args.loading"
              :decoding="args.decoding"
            />
          </div>
        </section>

        <section class="pz-image-story-grid">
          <article>
            <span class="pz-image-story-eyebrow">Default flow</span>
            <pz-text variant="body-regular">
              The component keeps the image responsive with width 100% and height auto.
            </pz-text>
            <div class="pz-image-story-surface">
              <pz-image
                :src="args.src"
                :alt="args.alt"
                loading="eager"
              />
            </div>
            <p class="pz-image-story-code">.pz-image { width: 100%; height: auto; }</p>
          </article>

          <article>
            <span class="pz-image-story-eyebrow">Framed crop</span>
            <pz-text variant="body-regular">
              When a parent sets height, the fit prop maps directly to object-fit.
            </pz-text>
            <div class="pz-image-story-crop-frame">
              <pz-image
                :src="args.src"
                :alt="args.alt"
                :fit="args.fit"
              />
            </div>
            <p class="pz-image-story-code">.pz-image { --pz-image-radius; --pz-image-background; --pz-image-shadow; }</p>
          </article>
        </section>
      </div>
    `})},t={};var n,r,c;t.parameters={...t.parameters,docs:{...(n=t.parameters)==null?void 0:n.docs,source:{originalSource:"{}",...(c=(r=t.parameters)==null?void 0:r.docs)==null?void 0:c.source}}};const $=["Playground"];export{t as Playground,$ as __namedExportsOrder,_ as default};
