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

Le composant Message affiche des notifications ou des informations importantes à l'utilisateur de manière contextuelle. Il permet de communiquer des messages de succès, d'alerte, d'information ou d'avertissement.

## Variants disponibles

- **Default** : Message standard sans contexte particulier
- **Success** : Confirmation d'une action réussie (fond vert)
- **Info** : Information neutre pour l'utilisateur (fond bleu)
- **Alert** : Message d'erreur ou action échouée (fond rouge)
- **Warning** : Avertissement nécessitant l'attention (fond jaune)

## Fonctionnalités

- Icône contextuelle automatique selon le variant
- Option de masquage avec persistance en localStorage
- Accessibilité avec attributs ARIA (role="alert", aria-live)
- Support du clavier pour la fermeture

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/039ae1-message)
        `,
            },
        },
    },
};
export default meta;
function htmlContent(slot) {
    return /* HTML */ `${slot}`;
}
const Template = args => {
    const element = document.createElement(elementTag);
    const hasSlot = true;
    const slottedLabel = 'content';
    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;
};
const commonArgs = {
    messageTitle: 'Titre du message',
    isDismissable: true,
    content: 'Contenu du message',
};
export const Default = Template.bind({});
Default.args = Object.assign(Object.assign({}, commonArgs), { messageId: '1', variant: 'default' });
Default.parameters = {
    docs: {
        description: {
            story: `
Message par défaut avec un style neutre. Utilisé pour des informations générales qui ne nécessitent pas de contexte spécifique.

Ce variant est approprié pour des messages informatifs sans urgence particulière.
      `,
        },
    },
};
export const Success = Template.bind({});
Success.args = Object.assign(Object.assign({}, commonArgs), { messageId: '2', variant: 'success' });
Success.parameters = {
    docs: {
        description: {
            story: `
Message de succès avec fond vert et icône de validation. Utilisé pour confirmer qu'une action s'est déroulée correctement.

Exemples : "Votre demande a été envoyée avec succès", "Données enregistrées"
      `,
        },
    },
};
export const Alert = Template.bind({});
Alert.args = Object.assign(Object.assign({}, commonArgs), { messageId: '3', variant: 'alert' });
Alert.parameters = {
    docs: {
        description: {
            story: `
Message d'alerte avec fond rouge et icône d'erreur. Utilisé pour signaler une erreur critique ou un échec d'action.

Exemples : "Erreur lors de la soumission", "Champs obligatoires manquants"
      `,
        },
    },
};
export const Info = Template.bind({});
Info.args = Object.assign(Object.assign({}, commonArgs), { messageId: '4', variant: 'info' });
Info.parameters = {
    docs: {
        description: {
            story: `
Message informatif avec fond bleu et icône d'information. Utilisé pour fournir des informations complémentaires ou contextuelles.

Exemples : "Cette fonctionnalité sera bientôt disponible", "Nouveauté disponible"
      `,
        },
    },
};
export const Warning = Template.bind({});
Warning.args = Object.assign(Object.assign({}, commonArgs), { messageId: '5', variant: 'warning' });
Warning.parameters = {
    docs: {
        description: {
            story: `
Message d'avertissement avec fond orange et icône d'attention. Utilisé pour prévenir l'utilisateur d'une situation nécessitant vigilance.

Exemples : "Votre session expire bientôt", "Attention aux informations sensibles"
      `,
        },
    },
};
export const CompactWithContent = Template.bind({});
CompactWithContent.storyName = 'Compact (with content)';
CompactWithContent.args = {
    messageId: '6',
    messageTitle: 'Information importante',
    variant: 'info',
    size: 'compact',
    isDismissable: true,
    content: 'Votre session expire dans 5 minutes.',
};
CompactWithContent.parameters = {
    docs: {
        description: {
            story: `
Version compacte du message avec contenu. Le titre et le contenu s'affichent sur une même ligne, séparés par " : ".

Idéal pour des notifications courtes ou des barres d'information en haut de page.
      `,
        },
        source: {
            code: `<spw-message
  message-title="Information importante"
  variant="info"
  size="compact"
>Votre session expire dans 5 minutes.</spw-message>`,
        },
    },
};
export const CompactWithoutContent = Template.bind({});
CompactWithoutContent.storyName = 'Compact (without content)';
CompactWithoutContent.args = {
    messageId: '7',
    messageTitle: 'Maintenance prévue ce soir',
    variant: 'warning',
    size: 'compact',
    isDismissable: true,
    content: '',
};
CompactWithoutContent.parameters = {
    docs: {
        description: {
            story: `
Version compacte du message sans contenu dans le slot. Seul le titre est affiché, sans le séparateur " : ".

Utilisé pour des messages très courts ne nécessitant pas de description supplémentaire.
      `,
        },
        source: {
            code: `<spw-message
  message-title="Maintenance prévue ce soir"
  variant="warning"
  size="compact"
></spw-message>`,
        },
    },
};
