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

Le composant Dropdown affiche une liste d'actions ou d'options qui se déploie au clic sur un élément déclencheur. Il offre un moyen compact d'organiser plusieurs actions contextuelles.

## Fonctionnalités

- Déclencheur personnalisable (bouton, icône, texte)
- Contenu flexible via slot
- Fermeture au clic extérieur
- Positionnement automatique
- Support de contenu complexe (boutons, liens, séparateurs)
- Compatible avec spw-group pour organisation verticale

## Cas d'usage

- Menus d'actions contextuelles (modifier, supprimer, partager)
- Menus utilisateur avec profil et déconnexion
- Options supplémentaires dans cartes ou tableaux
- Actions groupées dans toolbars
- Menus de navigation compacts
- Filtres et tris dans listes

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/135010-menu-deroulant-dropdown-menu)
        `,
            },
        },
    },
};
export default meta;
function htmlContentDefault() {
    return /* HTML */ `
    <spw-button icon="fa-ellipsis-vertical" is-icon-only="true" size="small" variant="secondary" class="mx-1">
      <div slot="dropdownContent">
        <spw-group orientation="vertical" is-full-width>
          <spw-button is-full-width variant="secondary" size="small">Action 1</spw-button>
          <spw-button is-full-width variant="secondary" size="small">Action 2</spw-button>
          <spw-button is-full-width variant="primary" size="small">Validation</spw-button>
        </spw-group>
      </div>
    </spw-button>
  `;
}
const TemplateDefault = args => {
    const element = document.createElement(elementTag);
    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
    const masterProps = controls.__realProps || Object.keys(controls);
    Object.entries(args).forEach(([key, val]) => {
        if (masterProps.includes(key)) {
            element.setAttribute(toKebabCase(key), val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    element.innerHTML = htmlContentDefault();
    return element;
};
export const Default = TemplateDefault.bind({});
Default.args = {};
