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

Le composant Field Message affiche des messages d'aide, d'erreur, de succès ou d'avertissement associés aux champs de formulaire. Il guide l'utilisateur et fournit un feedback visuel sur la validation.

## Variantes disponibles

- **hint** : Message d'aide neutre (par défaut)
- **error** : Message d'erreur en rouge
- **success** : Message de succès en vert
- **warning** : Message d'avertissement en orange

## Fonctionnalités

- Icônes contextuelles selon le type
- Couleurs distinctives par variante
- Intégration dans les champs de formulaire
- Texte personnalisable

## Cas d'usage

- Texte d'aide sous les champs de formulaire
- Messages d'erreur de validation
- Confirmation de saisie correcte
- Avertissements sur des contraintes
- Instructions de remplissage
- Feedback utilisateur en temps réel

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/99862d-indice-de-champ-hint)
        `,
            },
        },
    },
};
export default meta;
function htmlContent(slot) {
    return /* HTML */ `${slot}`;
}
const Template = args => {
    const element = document.createElement(elementTag);
    const hasSlot = true;
    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 Hint = Template.bind({});
export const Error = Template.bind({});
export const Success = Template.bind({});
export const Warning = Template.bind({});
Hint.args = {
    label: 'Mon texte',
    variant: 'hint',
};
Error.args = {
    label: 'Mon texte',
    variant: 'error',
};
Success.args = {
    label: 'Mon texte',
    variant: 'success',
};
Warning.args = {
    label: 'Mon texte',
    variant: 'warning',
};
Hint.parameters = {
    docs: {
        description: {
            story: `Message d'aide neutre sous un champ de formulaire. Fournit des instructions ou conseils pour aider la saisie. Cas d'usage : format attendu, exemples de saisie, informations complémentaires sur le champ.`,
        },
    },
};
Error.parameters = {
    docs: {
        description: {
            story: `Message d'erreur affiché en rouge avec icône. Indique un problème de validation ou une saisie incorrecte. Cas d'usage : erreurs de validation, format invalide, champs obligatoires manquants.`,
        },
    },
};
Success.parameters = {
    docs: {
        description: {
            story: `Message de succès affiché en vert avec icône. Confirme une saisie valide ou une action réussie. Cas d'usage : validation réussie, confirmation d'enregistrement, saisie correcte.`,
        },
    },
};
Warning.parameters = {
    docs: {
        description: {
            story: `Message d'avertissement affiché en orange avec icône. Alerte sur une situation particulière sans bloquer. Cas d'usage : contraintes importantes, informations critiques, précautions à prendre.`,
        },
    },
};
