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

Le composant Select permet aux utilisateurs de choisir une option dans une liste déroulante. Version native HTML stylisée, il offre une expérience familière et accessible pour la sélection simple.

## Fonctionnalités

- Liste déroulante native HTML
- Label et placeholder configurables
- Texte d'assistance avec icône optionnelle
- États de validation (erreur, succès)
- Champ requis avec indicateur
- Support des options groupées (optgroup)
- Navigation au clavier native

## Cas d'usage

- Choix de catégorie ou type
- Filtres avec options prédéfinies
- Formulaires avec listes de valeurs
- Paramètres de configuration simples
- Sélection dans listes courtes

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/7029dd-champ-de-selection-select)
        `,
            },
        },
    },
};
export default meta;
function htmlContent() {
    return /* HTML */ `
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  `;
}
const Template = args => {
    const element = document.createElement(elementTag);
    const hasSlot = true;
    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);
        }
    });
    if (hasSlot) {
        element.innerHTML = htmlContent();
    }
    return element;
};
export const Default = Template.bind({});
Default.args = {
    placeholder: 'Mon placeholder',
    label: 'Mon label',
    name: 'select',
    hint: "Mon texte d'assistance",
    required: true,
    showHintIcon: false,
};
