import{g as m,x as u}from"./iframe-CMPv_g6-.js";import{o as g}from"./style-map-968Ye5qo.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:h,argTypes:y}=m("btu-pagination"),c=e=>{const t={};return e.customBackgroundColor&&(t["--pagination-color-background"]=e.customBackgroundColor),e.customForegroundColor&&(t["--pagination-color-foreground"]=e.customForegroundColor),t},$={title:"Components/Pagination",component:"btu-pagination",tags:["autodocs"],parameters:{docs:{subtitle:"A component for navigating through paged content",description:{component:`
<h3>When to use:</h3>
<ul>
  <li>To navigate through large sets of data</li>
  <li>For search results, tables, and lists</li>
  <li>In widgets and calendar views</li>
</ul>

<h3>Variants:</h3>
<ul>
  <li><strong>Widget</strong> (default): Built-in page size dropdown + total display + navigation</li>
  <li><strong>Search</strong>: With page jumper dropdown (auto-managed by Pagination)</li>
  <li><strong>Widget Small</strong>: Without first/last page buttons</li>
  <li><strong>Calendar</strong>: Custom page-size slot (consumer-managed) + jumper slot</li>
</ul>

<h3>Page size modes:</h3>
<ul>
  <li><strong>Built-in</strong>: No <code>slot="page-size"</code> — Pagination renders its own <code>btu-dropdown</code> from <code>page-size-options</code> and manages everything automatically.</li>
  <li><strong>Custom</strong>: Provide <code>slot="page-size"</code> — built-in dropdown is suppressed. Consumer owns all behavior (events, label sync, etc.).</li>
</ul>
        `}},actions:{handles:b},controls:{expanded:!0}},args:{...h,"total-items":200,"boundary-buttons":!0,"hide-on-single-page":!0,"page-size-changer":!0},argTypes:{...y,"--pagination-color-background":{table:{disable:!0}},"--pagination-color-foreground":{table:{disable:!0}},customBackgroundColor:{name:"--pagination-color-background",control:{type:"color"},description:"Custom background color for buttons and dropdowns",table:{category:"css properties"}},customForegroundColor:{name:"--pagination-color-foreground",control:{type:"color"},description:"Custom foreground (text/icon) color",table:{category:"css properties"}}},render:e=>u`
    <btu-pagination
      total-items="${e["total-items"]??200}"
      page="${e.page??1}"
      page-size="${e["page-size"]??0}"
      page-size-options="${e["page-size-options"]??"10, 20, 50"}"
      ?disabled="${e.disabled}"
      ?loading="${e.loading}"
      .hideOnSinglePage=${e["hide-on-single-page"]??!0}
      .pageSizeChanger=${e["page-size-changer"]??!0}
      .boundaryButtons=${e["boundary-buttons"]??!0}
      .pageJumper=${e["page-jumper"]??!1}
      ?hide-total-count=${e["hide-total-count"]}
      style=${g(c(e))}
    ></btu-pagination>
  `},a={args:{},parameters:{docs:{description:{story:"Default Widget variant with page size selector, total display, and full navigation controls."}}}},o={args:{"total-items":500,"page-size-options":"10, 25, 50, 100","page-jumper":!0},parameters:{docs:{description:{story:'Search variant with `page-jumper` enabled. The built-in dropdown renders "Page 1" through "Page N" and updates automatically when page size or total items change.'}}}},s={args:{"total-items":100,"boundary-buttons":!1},parameters:{docs:{description:{story:"Compact widget variant without first/last page buttons. Suitable for tight spaces."}}}},i={args:{"total-items":52},render:e=>u`
    <btu-pagination
      total-items="${e["total-items"]??52}"
      page="${e.page??1}"
      page-size="1"
      ?disabled="${e.disabled}"
      ?loading="${e.loading}"
      .hideOnSinglePage=${e["hide-on-single-page"]??!0}
      .pageSizeChanger=${!1}
      .boundaryButtons=${e["boundary-buttons"]??!0}
      ?hide-total-count=${e["hide-total-count"]}
      style=${g(c(e))}
    >
      <btu-dropdown
        slot="page-size"
        label="Week"
        variant="secondary"
        size="sm"
        aria-label="View type"
        @btu-dropdown-item-select=${t=>{t.currentTarget.label=t.detail.label}}
      >
        <btu-dropdown-menu>
          <btu-dropdown-item label="Week" value="week" selected></btu-dropdown-item>
          <btu-dropdown-item label="Month" value="month"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
      <button
        slot="jumper"
        class="btu-button btu-button-sm"
        @click=${t=>{const n=t.target.closest("btu-pagination");n&&(n.page=1)}}
      >
        Today
      </button>
    </btu-pagination>
  `,parameters:{docs:{description:{story:'Calendar variant using `slot="page-size"` with a consumer-managed `btu-dropdown` for week/month selection and `slot="jumper"` for a Today button. The page-size dropdown is fully consumer-owned — Pagination does not manage its events or label.'}}}},r={args:{"total-items":200,loading:!0},parameters:{docs:{description:{story:"Loading state shows a spinner and dims the navigation controls. The `aria-busy` attribute is set on the live region."}}}},l={args:{"total-items":200,disabled:!0,page:3},parameters:{docs:{description:{story:"Disabled state prevents all interaction. All buttons and dropdowns receive the native `disabled` attribute."}}}},d={render:()=>{const e=t=>{const n=t.target;n.loading=!0,setTimeout(()=>{n.loading=!1},1e3)};return u`
      <div class="flex flex-col gap-4">
        <div class="flex items-center gap-2">
          <label for="total-input" class="text-sm font-medium">Total Items:</label>
          <input
            id="total-input"
            type="number"
            value="200"
            min="0"
            class="w-24 rounded border px-2 py-1 text-sm"
            @input=${t=>{const n=t.target,p=n.closest(".flex.flex-col")?.querySelector("btu-pagination");p&&(p.totalItems=parseInt(n.value,10)||0)}}
          />
        </div>
        <btu-pagination
          total-items="200"
          @btu-pagination-change=${e}
          @btu-pagination-page-size-change=${e}
        ></btu-pagination>
      </div>
    `},parameters:{docs:{description:{story:"Interactive example demonstrating dynamic `totalItems` changes at runtime. Navigation triggers a simulated 1s loading state."}}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
  args: {},
  parameters: {
    docs: {
      description: {
        story: 'Default Widget variant with page size selector, total display, and full navigation controls.'
      }
    }
  }
}`,...a.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
  args: {
    'total-items': 500,
    'page-size-options': '10, 25, 50, 100',
    'page-jumper': true
  },
  parameters: {
    docs: {
      description: {
        story: 'Search variant with \`page-jumper\` enabled. The built-in dropdown renders "Page 1" through "Page N" and updates automatically when page size or total items change.'
      }
    }
  }
}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
  args: {
    'total-items': 100,
    'boundary-buttons': false
  },
  parameters: {
    docs: {
      description: {
        story: 'Compact widget variant without first/last page buttons. Suitable for tight spaces.'
      }
    }
  }
}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  args: {
    'total-items': 52
  },
  render: args => html\`
    <btu-pagination
      total-items="\${args['total-items'] ?? 52}"
      page="\${args.page ?? 1}"
      page-size="1"
      ?disabled="\${args.disabled}"
      ?loading="\${args.loading}"
      .hideOnSinglePage=\${args['hide-on-single-page'] ?? true}
      .pageSizeChanger=\${false}
      .boundaryButtons=\${args['boundary-buttons'] ?? true}
      ?hide-total-count=\${args['hide-total-count']}
      style=\${styleMap(paginationStyles(args))}
    >
      <btu-dropdown
        slot="page-size"
        label="Week"
        variant="secondary"
        size="sm"
        aria-label="View type"
        @btu-dropdown-item-select=\${(e: CustomEvent<{
    label: string;
    value: string;
    selected: boolean;
  }>) => {
    ;
    (e.currentTarget as HTMLElement & {
      label: string;
    }).label = e.detail.label;
  }}
      >
        <btu-dropdown-menu>
          <btu-dropdown-item label="Week" value="week" selected></btu-dropdown-item>
          <btu-dropdown-item label="Month" value="month"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
      <button
        slot="jumper"
        class="btu-button btu-button-sm"
        @click=\${(e: Event) => {
    const pagination = (e.target as HTMLElement).closest('btu-pagination');
    if (pagination) pagination.page = 1;
  }}
      >
        Today
      </button>
    </btu-pagination>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Calendar variant using \`slot="page-size"\` with a consumer-managed \`btu-dropdown\` for week/month selection and \`slot="jumper"\` for a Today button. The page-size dropdown is fully consumer-owned — Pagination does not manage its events or label.'
      }
    }
  }
}`,...i.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
  args: {
    'total-items': 200,
    loading: true
  },
  parameters: {
    docs: {
      description: {
        story: 'Loading state shows a spinner and dims the navigation controls. The \`aria-busy\` attribute is set on the live region.'
      }
    }
  }
}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
  args: {
    'total-items': 200,
    disabled: true,
    page: 3
  },
  parameters: {
    docs: {
      description: {
        story: 'Disabled state prevents all interaction. All buttons and dropdowns receive the native \`disabled\` attribute.'
      }
    }
  }
}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
  render: () => {
    const simulateLoading = (e: CustomEvent) => {
      const pagination = e.target as HTMLElement & {
        loading: boolean;
      };
      pagination.loading = true;
      setTimeout(() => {
        pagination.loading = false;
      }, 1000);
    };
    return html\`
      <div class="flex flex-col gap-4">
        <div class="flex items-center gap-2">
          <label for="total-input" class="text-sm font-medium">Total Items:</label>
          <input
            id="total-input"
            type="number"
            value="200"
            min="0"
            class="w-24 rounded border px-2 py-1 text-sm"
            @input=\${(e: Event) => {
      const input = e.target as HTMLInputElement;
      const pagination = (input.closest('.flex.flex-col') as HTMLElement)?.querySelector('btu-pagination') as HTMLElement & {
        totalItems: number;
      };
      if (pagination) pagination.totalItems = parseInt(input.value, 10) || 0;
    }}
          />
        </div>
        <btu-pagination
          total-items="200"
          @btu-pagination-change=\${simulateLoading}
          @btu-pagination-page-size-change=\${simulateLoading}
        ></btu-pagination>
      </div>
    \`;
  },
  parameters: {
    docs: {
      description: {
        story: 'Interactive example demonstrating dynamic \`totalItems\` changes at runtime. Navigation triggers a simulated 1s loading state.'
      }
    }
  }
}`,...d.parameters?.docs?.source}}};const z=["Default","Search","WidgetSmall","Calendar","Loading","Disabled","DynamicTotal"];export{i as Calendar,a as Default,l as Disabled,d as DynamicTotal,r as Loading,o as Search,s as WidgetSmall,z as __namedExportsOrder,$ as default};
