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-loading';
const argTypes = withComponentControls(componentsData, { tag: elementTag });
const meta = {
    title: 'Composants/Chargement (loader)',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Loading (loader) indique visuellement qu'une action ou un chargement de contenu est en cours. Il fournit un feedback immédiat à l'utilisateur pendant les opérations asynchrones.

## Fonctionnalités

- Animation de chargement circulaire
- Texte optionnel personnalisable
- Taille adaptative
- Surface personnalisable (light/dark)
- Orientation du texte (horizontal/vertical)
- Utilisable en standalone ou intégré dans d'autres composants

## Cas d'usage

- Chargement de données depuis une API
- Attente lors de soumission de formulaire
- États de chargement de page ou section
- Feedback visuel pendant traitements longs

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/957e2a-chargement-loader)
        `,
            },
        },
    },
};
export default meta;
function htmlContent(slot) {
    return /* HTML */ `${slot}`;
}
const Template = args => {
    const element = document.createElement(elementTag);
    const hasSlot = false;
    const slottedLabel = 'label';
    Object.entries(args).forEach(([key, val]) => {
        if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
        else {
            if (key !== slottedLabel) {
                element.setAttribute(toKebabCase(key), val);
            }
        }
    });
    if (hasSlot) {
        element.innerHTML = htmlContent(args[slottedLabel]);
    }
    return element;
};
export const Default = Template.bind({});
Default.args = {};
Default.parameters = {
    docs: {
        description: {
            story: `Loader par défaut avec texte de chargement. Cas d'usage : chargement de contenu, traitement de données, attente de réponse serveur.`,
        },
    },
};
export const WithoutText = Template.bind({});
WithoutText.args = { text: '' };
WithoutText.parameters = {
    docs: {
        description: {
            story: `Loader sans texte, version minimaliste. Cas d'usage : chargement dans des espaces restreints, indicateurs compacts, intégration dans boutons.`,
        },
    },
};
// --- TAILLES ---
export const Small = Template.bind({});
Small.args = { size: 'small' };
Small.parameters = {
    docs: {
        description: {
            story: `Loader en taille small. Cas d'usage : indicateurs compacts, intégration dans des composants de petite taille.`,
        },
    },
};
export const Medium = Template.bind({});
Medium.args = { size: 'medium' };
Medium.parameters = {
    docs: {
        description: {
            story: `Loader en taille medium (taille par défaut). Cas d'usage : chargement de sections, formulaires, listes.`,
        },
    },
};
export const Large = Template.bind({});
Large.args = { size: 'large' };
Large.parameters = {
    docs: {
        description: {
            story: `Loader en taille large. Cas d'usage : chargement de pages entières, contenu principal.`,
        },
    },
};
export const ExtraLarge = Template.bind({});
ExtraLarge.args = { size: 'extra-large' };
ExtraLarge.parameters = {
    docs: {
        description: {
            story: `Loader en taille extra-large. Cas d'usage : splash screens, chargements initiaux d'application.`,
        },
    },
};
export const SurfaceDark = Template.bind({});
SurfaceDark.args = { surface: 'dark' };
SurfaceDark.parameters = {
    backgrounds: { default: 'dark' },
    docs: {
        description: {
            story: `Loader sur fond sombre (surface dark). Cas d'usage : overlays, modals sombres, sections à fond coloré.`,
        },
    },
};
export const Vertical = Template.bind({});
Vertical.args = { orientation: 'vertical' };
Vertical.parameters = {
    docs: {
        description: {
            story: `Loader avec texte disposé verticalement sous le spinner. Cas d'usage : zones de chargement centrées, overlays, pages entières.`,
        },
    },
};
