import{r as i,w as n,G as h}from"./iframe-Bl-fVlm8.js";import{P as v}from"./PzText-D5PUnIjq.js";import{P as a}from"./PzScrollTo-KuzwcV-o.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const T=["auto","instant","smooth"],d=24,y="100vh",z=o=>{const t=[o.behavior!=="smooth"?`behavior: "${o.behavior}"`:null,o.offsetTop!==d?`offsetTop: ${o.offsetTop}`:null].filter(l=>!!l).join(", ");return`<script setup lang="ts">
import { PzScrollTo } from "@prozorro/prozorro-ui";

const scrollToTenderDocuments = (): void => {
  PzScrollTo.moveById("documents"${t?`, { ${t} }`:""});
};
<\/script>

<template>
  <button type="button" @click="scrollToTenderDocuments">Scroll to documents</button>
</template>`},g=[{id:"overview",label:"Overview",copy:"Short context for the procurement scenario and the current workflow state."},{id:"criteria",label:"Criteria",copy:"Eligibility and qualification requirements for suppliers and attached evidence."},{id:"documents",label:"Documents",copy:"Attached files, visual previews, and supporting procurement materials for review."}],b=[{name:"moveById",signature:"PzScrollTo.moveById(id, options?)",description:"Scrolls to an element found by id and optionally highlights it after scrolling.",params:"`id: string`, `options?: number | PzScrollToOptions`",example:'PzScrollTo.moveById("documents", { offsetTop: 24, behavior: "smooth" });'},{name:"moveByQuerySelector",signature:"PzScrollTo.moveByQuerySelector(selector, options?)",description:"Scrolls to the first element matching a CSS selector and can highlight it.",params:"`selector: string`, `options?: number | PzScrollToOptions`",example:'PzScrollTo.moveByQuerySelector("#documents .item", 32);'},{name:"moveTo",signature:"PzScrollTo.moveTo(targetTop, options?)",description:"Scrolls to an absolute Y position in the page.",params:"`targetTop: number`, `options?: number | PzScrollToOptions`",example:'PzScrollTo.moveTo(640, { behavior: "auto" });'},{name:"moveToTop",signature:"PzScrollTo.moveToTop(options?)",description:"Scrolls the page back to the top.",params:"`options?: PzScrollToOptions`",example:'PzScrollTo.moveToTop({ behavior: "smooth" });'},{name:"moveToElement",signature:"PzScrollTo.moveToElement(element, options?)",description:"Scrolls directly to a passed HTMLElement instance.",params:"`element: HTMLElement`, `options?: number | PzScrollToOptions`",example:"PzScrollTo.moveToElement(sectionRef.value, { offsetTop: 16 });"},{name:"move",signature:"PzScrollTo.move(target, options?)",description:"Universal method that accepts a number, selector, or HTMLElement target.",params:"`target: number | string | HTMLElement`, `options?: number | PzScrollToOptions`",example:'PzScrollTo.move("#documents", { highlightClassName: "pz-scroll-to-highlight" });'}],f=[{name:"PzScrollBehavior",signature:'type PzScrollBehavior = "auto" | "instant" | "smooth"',description:"Defines the scroll behavior passed to `window.scrollTo`.",example:'const behavior: PzScrollBehavior = "smooth";'},{name:"PzScrollToTarget",signature:"type PzScrollToTarget = number | string | HTMLElement",description:"Universal target type accepted by `move(...)`: absolute Y position, CSS selector, or HTMLElement.",example:'PzScrollTo.move("#documents");'},{name:"PzScrollToOptions",signature:"interface PzScrollToOptions",description:"`offsetTop` shifts the final position, `behavior` controls animation, `highlightClassName` adds a CSS class to the target, and `highlightDuration` removes it after a timeout.",example:`const options: PzScrollToOptions = { 
 offsetTop: 24, 
 behavior: "smooth", 
 highlightClassName: "pz-scroll-to-highlight", 
 highlightDuration: 2000 
};`}],S={title:"Utilities/PzScrollTo",parameters:{prototype:{caption:"Scroll utility",note:"Direct utility for anchor-like programmatic scrolling. It keeps the old moveById/moveTo/moveByQuerySelector API, but adds typed options and a reusable highlight hook for target sections."},docs:{description:{component:"Use `PzScrollTo` from the library root for programmatic scrolling to document sections, anchored blocks, or absolute positions. Available methods: `moveById(id, options?)`, `moveByQuerySelector(selector, options?)`, `moveTo(targetTop, options?)`, `moveToTop(options?)`, `moveToElement(element, options?)`, and `move(target, options?)`. `options` supports `offsetTop`, `behavior`, `highlightClassName`, and `highlightDuration`."},source:{transform:(o,t)=>z(t.args??S.args)}}},args:{behavior:"smooth",offsetTop:d},argTypes:{behavior:{control:"inline-radio",options:T,description:"Scroll behavior passed to window.scrollTo."},offsetTop:{control:{type:"number",min:0,max:120,step:4},description:"Top offset subtracted from the target position."}},render:o=>({components:{pzText:v},setup(){const t=i(o.behavior),r=i(o.offsetTop);n(()=>o.behavior,e=>{t.value=e}),n(()=>o.offsetTop,e=>{r.value=e});const l=e=>{a.moveById(e,{behavior:t.value,offsetTop:r.value})},u=()=>{a.moveToTop({behavior:t.value})};return h(()=>{document.querySelectorAll(".pz-scroll-to-highlight").forEach(e=>{e.classList.remove("pz-scroll-to-highlight")})}),{methodDocs:b,sections:g,scrollToSection:l,scrollToTop:u,typeDocs:f}},template:`
      <div class="pz-scroll-to-story">
        <section class="pz-scroll-to-story-toolbar">
          <div class="pz-scroll-to-story-copy">
            <span class="pz-scroll-to-story-eyebrow">Programmatic navigation</span>
            <pz-text variant="h4-bold">Jump to anchored sections</pz-text>
            <pz-text variant="body-regular">
              Useful for long procurement pages, filter summaries, and document-heavy surfaces where links need controlled offsets.
            </pz-text>
          </div>

          <div class="pz-scroll-to-story-actions">
            <button type="button" class="pz-scroll-to-story-button" @click="scrollToSection('overview')">Overview</button>
            <button type="button" class="pz-scroll-to-story-button" @click="scrollToSection('criteria')">Criteria</button>
            <button type="button" class="pz-scroll-to-story-button" @click="scrollToSection('documents')">Documents</button>
            <button type="button" class="pz-scroll-to-story-button pz-scroll-to-story-button--ghost" @click="scrollToTop">Back to top</button>
          </div>
        </section>

        <section class="pz-scroll-to-story-methods">
          <article
            v-for="method in methodDocs"
            :key="method.name"
            class="pz-scroll-to-story-method-card"
          >
            <div class="pz-scroll-to-story-method-header">
              <span class="pz-scroll-to-story-kicker">{{ method.name }}</span>
              <pz-text variant="body-semibold">{{ method.signature }}</pz-text>
            </div>
            <pz-text variant="body-regular">{{ method.description }}</pz-text>
            <pz-text variant="small-regular">Params: {{ method.params }}</pz-text>
            <pre class="pz-scroll-to-story-code"><code>{{ method.example }}</code></pre>
          </article>
        </section>

        <section class="pz-scroll-to-story-types">
          <article
            v-for="typeItem in typeDocs"
            :key="typeItem.name"
            class="pz-scroll-to-story-type-card"
          >
            <div class="pz-scroll-to-story-method-header">
              <span class="pz-scroll-to-story-kicker">{{ typeItem.name }}</span>
              <pz-text variant="body-semibold">{{ typeItem.signature }}</pz-text>
            </div>
            <pz-text variant="body-regular">{{ typeItem.description }}</pz-text>
            <pre class="pz-scroll-to-story-code"><code>{{ typeItem.example }}</code></pre>
          </article>
        </section>

        <section class="pz-scroll-to-story-stack">
          <article
            v-for="section in sections"
            :id="section.id"
            :key="section.id"
            class="pz-scroll-to-story-section"
            :style="{ minHeight: '${y}' }"
          >
            <span class="pz-scroll-to-story-kicker">{{ section.id }}</span>
            <pz-text variant="h4-bold">{{ section.label }}</pz-text>
            <pz-text variant="body-regular">{{ section.copy }}</pz-text>
            <div class="pz-scroll-to-story-paper"></div>
          </article>
        </section>
      </div>
    `})},s={};var c,p,m;s.parameters={...s.parameters,docs:{...(c=s.parameters)==null?void 0:c.docs,source:{originalSource:"{}",...(m=(p=s.parameters)==null?void 0:p.docs)==null?void 0:m.source}}};const I=["Playground"];export{s as Playground,I as __namedExportsOrder,S as default};
