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, extractArgTypes, toKebabCase } from "../../../utils/utils";
const elementTag = 'spw-group';
const subComponentTags = ['spw-checkbox'];
const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags));
const meta = {
    title: 'Composants/Case à cocher (input checkbox, toggle)',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Checkbox permet aux utilisateurs de sélectionner une ou plusieurs options dans un formulaire. Il existe en deux variantes : case à cocher classique et toggle switch pour des options de type activation/désactivation.

## Variantes disponibles

- **checkbox** : Case à cocher standard (par défaut)
- **toggle** : Interrupteur pour activer/désactiver une option

## Fonctionnalités

- Sélection multiple indépendante
- États coché, non coché et indéterminé
- Label associé cliquable
- Groupement avec spw-group
- États disabled et error
- Support du clavier et accessibilité ARIA

## Cas d'usage

- Sélection de préférences multiples
- Filtres dans recherches et listes
- Activation de fonctionnalités optionnelles
- Consentements et autorisations
- Choix multiples dans formulaires

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/68897f-case-a-cocher-checkbox)
        `,
            },
        },
    },
};
export default meta;
function htmlContent() {
    return /* HTML */ `
    <spw-checkbox name="checkbox" value="1">Checkbox 1</spw-checkbox>
    <spw-checkbox name="checkbox" value="2">Checkbox 2</spw-checkbox>
  `;
}
function htmlContentToggle() {
    return /* HTML */ `<spw-checkbox error="false" variant="toggle" value="false" name="mon-checkbox-toggle" id="mon-checkbox-toggle">Mon toggle</spw-checkbox> `;
}
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;
};
const ToggleTemplate = 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 = htmlContentToggle();
    }
    return element;
};
export const Default = Template.bind({});
Default.args = {
    label: 'Mon label',
    type: 'checkboxes',
};
export const Toggle = ToggleTemplate.bind({});
Toggle.args = {
    label: 'Mon label toggle',
    type: 'checkboxes',
};
Default.parameters = {
    docs: {
        description: {
            story: `Groupe de checkboxes standard permettant la sélection multiple. Chaque checkbox est indépendante et peut être cochée ou décochée séparément. Cas d'usage : sélection de préférences, acceptation de conditions, filtres multiples, choix d'options dans formulaires.`,
        },
    },
};
Toggle.parameters = {
    docs: {
        description: {
            story: `Checkbox en mode toggle (interrupteur). Idéal pour activer ou désactiver une fonctionnalité de manière plus visuelle. Cas d'usage : activation de notifications, paramètres on/off, préférences de confidentialité, options de visibilité.`,
        },
    },
};
