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-wizard';
const subComponentTags = ['spw-wizard-item'];
const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags));
const meta = {
    title: 'Organismes/Barre de progression (stepper, wizard)',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le wizard (ou assistant) permet de guider l'utilisateur à travers un processus en plusieurs étapes. Il affiche la progression et permet de naviguer entre les étapes.

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/85cf28-barre-de-progression-stepper)
        `,
            },
        },
    },
};
export default meta;
function htmlContentHorizontal() {
    return /* HTML */ `
    <spw-wizard-item label="Étape 1" description="Informations personnelles"></spw-wizard-item>
    <spw-wizard-item label="Étape 2" description="Adresse"></spw-wizard-item>
    <spw-wizard-item label="Étape 3" description="Vérification"></spw-wizard-item>
    <spw-wizard-item label="Étape 4" description="Confirmation"></spw-wizard-item>
  `;
}
function htmlContentVertical() {
    return /* HTML */ `
    <spw-wizard-item label="Étape 1" description="Informations personnelles"></spw-wizard-item>
    <spw-wizard-item label="Étape 2" description="Adresse"></spw-wizard-item>
    <spw-wizard-item label="Étape 3" description="Vérification"></spw-wizard-item>
    <spw-wizard-item label="Étape 4" description="Confirmation"></spw-wizard-item>
  `;
}
function htmlContentWithIcons() {
    return /* HTML */ `
    <spw-wizard-item icon="fa-user" label="Profil" description="Informations personnelles"></spw-wizard-item>
    <spw-wizard-item icon="fa-map-marker-alt" label="Localisation" description="Adresse et coordonnées"></spw-wizard-item>
    <spw-wizard-item icon="fa-check-circle" label="Validation" description="Vérification des données"></spw-wizard-item>
    <spw-wizard-item icon="fa-flag-checkered" label="Terminé" description="Confirmation finale"></spw-wizard-item>
  `;
}
function htmlContentWithStates() {
    return /* HTML */ `
    <spw-wizard-item label="Étape 1" description="Complétée avec succès"></spw-wizard-item>
    <spw-wizard-item label="Étape 2" description="Complétée avec succès"></spw-wizard-item>
    <spw-wizard-item status="error" label="Étape 3" description="Erreur de validation" additional-info="Veuillez corriger les champs en erreur"></spw-wizard-item>
    <spw-wizard-item label="Étape 4" description="Non encore accessible"></spw-wizard-item>
  `;
}
function htmlContentWithWarning() {
    return /* HTML */ `
    <spw-wizard-item label="Étape 1" description="Informations de base"></spw-wizard-item>
    <spw-wizard-item status="warning" label="Étape 2" description="Attention requise" additional-info="Certaines informations sont manquantes"></spw-wizard-item>
    <spw-wizard-item label="Étape 3" description="Récapitulatif"></spw-wizard-item>
    <spw-wizard-item label="Étape 4" description="Validation finale"></spw-wizard-item>
  `;
}
const TemplateHorizontal = 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 = htmlContentHorizontal();
    return element;
};
const TemplateVertical = 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 = htmlContentVertical();
    return element;
};
const TemplateWithIcons = 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 = htmlContentWithIcons();
    return element;
};
const TemplateWithStates = 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 = htmlContentWithStates();
    return element;
};
const TemplateWithWarning = 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 = htmlContentWithWarning();
    return element;
};
export const Horizontal = TemplateHorizontal.bind({});
Horizontal.args = {
    currentStep: 2,
    variant: 'horizontal',
};
Horizontal.parameters = {
    docs: {
        description: {
            story: 'Wizard avec orientation horizontale (par défaut). Les étapes sont affichées en ligne.',
        },
    },
};
export const Vertical = TemplateVertical.bind({});
Vertical.args = {
    currentStep: 2,
    variant: 'vertical',
};
Vertical.parameters = {
    docs: {
        description: {
            story: 'Wizard avec orientation verticale. Les étapes sont empilées verticalement.',
        },
    },
};
export const WithIcons = TemplateWithIcons.bind({});
WithIcons.args = {
    currentStep: 3,
    variant: 'horizontal',
};
WithIcons.parameters = {
    docs: {
        description: {
            story: 'Wizard avec icônes personnalisées pour chaque étape. Les icônes remplacent les numéros par défaut.',
        },
    },
};
export const WithError = TemplateWithStates.bind({});
WithError.args = {
    currentStep: 3,
    variant: 'horizontal',
};
WithError.parameters = {
    docs: {
        description: {
            story: "Wizard avec une étape en erreur. L'attribut status='error' permet d'indiquer une erreur de validation à l'utilisateur.",
        },
    },
};
export const WithWarning = TemplateWithWarning.bind({});
WithWarning.args = {
    currentStep: 2,
    variant: 'horizontal',
};
WithWarning.parameters = {
    docs: {
        description: {
            story: "Wizard avec une étape en warning. L'attribut status='warning' attire l'attention sur des informations manquantes ou à vérifier.",
        },
    },
};
