let componentsData;
try {
    componentsData = require('../../../../dist/components_json.json');
}
catch (error) {
    console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');
    componentsData = {};
}
import { withComponentControls, toKebabCase } from "../../../utils/utils";
const elementTag = 'spw-pagination';
const argTypes = withComponentControls(componentsData, { tag: elementTag });
const meta = {
    title: 'Composants/Pagination',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Pagination permet aux utilisateurs de naviguer entre différentes pages d'un contenu divisé. Il affiche les numéros de pages cliquables avec indicateur de page active.

## Variantes disponibles

- **default** : Pagination avec boutons de numéros de page
- **input** : Pagination avec champ de saisie directe

## Fonctionnalités

- Navigation par boutons précédent/suivant
- Numéros de pages cliquables
- Indicateur de page active
- Saisie directe du numéro de page
- Calcul automatique du nombre de pages
- Événements de changement de page
- Gestion d'ellipsis pour nombreuses pages

## Cas d'usage

- Navigation dans listes de résultats
- Pagination de tableaux de données
- Navigation dans articles ou actualités
- Résultats de recherche étendus

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/0281c1-pagination)
        `,
            },
        },
    },
};
export default meta;
function htmlContent(slot) {
    return /* HTML */ `${slot}`;
}
const Template = args => {
    const element = document.createElement(elementTag);
    const hasSlot = true;
    const slottedLabel = 'label';
    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
    const realProps = controls.__realProps || [];
    const methods = controls.__methods || [];
    const events = controls.__events || [];
    Object.entries(args).forEach(([key, val]) => {
        if (methods.includes(key)) {
            return;
        }
        if (key.startsWith('on') || events.includes(key)) {
            const eventName = key.startsWith('on') ? key.substring(2).toLowerCase() : key.replace(/^on/, '').toLowerCase();
            element.addEventListener(eventName, val);
        }
        else if (realProps.includes(key)) {
            if (key !== slottedLabel) {
                element.setAttribute(toKebabCase(key), val);
            }
        }
    });
    if (hasSlot) {
        element.innerHTML = htmlContent(args[slottedLabel]);
    }
    return element;
};
export const Default = Template.bind({});
Default.args = {
    totalItems: 90,
    itemsPerPage: 10,
    label: '',
};
export const Input = Template.bind({});
Input.args = {
    totalItems: 90,
    itemsPerPage: 10,
    variant: 'input',
    label: '',
};
Default.parameters = {
    docs: {
        description: {
            story: `Pagination par défaut avec boutons de numéros de page. Navigation par clic sur numéros ou flèches précédent/suivant. Cas d'usage : listes de résultats, tableaux de données, navigation standard multi-pages.`,
        },
    },
};
Input.parameters = {
    docs: {
        description: {
            story: `Pagination avec champ de saisie directe. Permet de saisir directement le numéro de page souhaité pour accès rapide. Cas d'usage : longs résultats avec nombreuses pages, navigation rapide vers page spécifique, tableaux étendus nécessitant accès direct.`,
        },
    },
};
