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

Le composant Timeline affiche une liste d'événements ou d'étapes de manière chronologique. Contrairement au wizard, il s'agit d'une représentation purement visuelle sans logique de navigation.

## Fonctionnalités

- Affichage vertical d'événements chronologiques
- États personnalisables (default, active)
- Support des liens sur les labels
- Option "voir plus" pour limiter le nombre d'items affichés
- Descriptions et contenu personnalisés
        `,
            },
        },
    },
};
export default meta;
function htmlContentDefault() {
    return /* HTML */ `
    <spw-timeline-item state="active" label="Septembre 2024" description="Mise à jour majeure prévue"></spw-timeline-item>
    <spw-timeline-item label="Juin 2024" description="Ajout de nouvelles fonctionnalités"></spw-timeline-item>
    <spw-timeline-item label="Mars 2024" description="Première version déployée"></spw-timeline-item>
    <spw-timeline-item label="Janvier 2024" description="Lancement du projet"></spw-timeline-item>
  `;
}
function htmlContentWithLinks() {
    return /* HTML */ `
    <spw-timeline-item label="Étape 4 : Finalisation" description="À venir"></spw-timeline-item>
    <spw-timeline-item label="Étape 3 : Confirmation" description="En attente"></spw-timeline-item>
    <spw-timeline-item state="active" label="Étape 2 : Validation" description="En cours de traitement" href="#step2" target="_self"></spw-timeline-item>
    <spw-timeline-item label="Étape 1 : Inscription" description="Compte créé avec succès" href="#step1" target="_self"></spw-timeline-item>
  `;
}
function htmlContentWithVisibleItems() {
    return /* HTML */ `
    <spw-timeline-item label="2026" description="Nouvelles fonctionnalités"></spw-timeline-item>
    <spw-timeline-item label="2025" description="Évolutions planifiées"></spw-timeline-item>
    <spw-timeline-item state="active" label="2024" description="Version stable"></spw-timeline-item>
    <spw-timeline-item label="2023" description="Lancement beta"></spw-timeline-item>
    <spw-timeline-item label="2022" description="Tests utilisateurs"></spw-timeline-item>
    <spw-timeline-item label="2021" description="Phase de développement"></spw-timeline-item>
    <spw-timeline-item label="2020" description="Début du projet"></spw-timeline-item>
  `;
}
function htmlContentWithLongText() {
    return /* HTML */ `
    <spw-timeline-item
      label="15 janvier 2026 - Réunion stratégique annuelle avec l'ensemble des parties prenantes du projet"
      description="Cette réunion importante rassemblera tous les acteurs clés du projet afin de définir les orientations stratégiques pour l'année à venir. L'ordre du jour comprendra notamment la présentation des résultats de l'année écoulée, l'analyse des défis rencontrés, la définition des objectifs pour les 12 prochains mois, ainsi que la discussion autour de l'allocation budgétaire et des ressources humaines nécessaires à la réussite du projet."
    >
    </spw-timeline-item>
    <spw-timeline-item
      label="Décembre 2025"
      description="Phase de consolidation et de préparation pour le déploiement majeur prévu en 2026. Cette période cruciale permettra de finaliser tous les aspects techniques, de former les équipes, de préparer la documentation utilisateur et de s'assurer que tous les systèmes sont prêts pour le lancement. Des tests approfondis seront menés avec des groupes d'utilisateurs pilotes afin d'identifier et de corriger les derniers bugs potentiels."
    >
    </spw-timeline-item>
    <spw-timeline-item
      state="active"
      label="Octobre 2025 - Validation finale du cahier des charges technique et fonctionnel par le comité de pilotage"
      description="Étape cruciale du projet où l'ensemble des spécifications techniques et fonctionnelles sera présenté au comité de pilotage pour validation définitive. Ce document exhaustif comprend l'architecture système complète, les choix technologiques justifiés, les flux de données, les interfaces utilisateur, les procédures de sécurité, le plan de déploiement, ainsi que tous les cas d'usage métier détaillés."
    >
    </spw-timeline-item>
    <spw-timeline-item label="Septembre 2025" description="Développement intensif des modules principaux avec l'équipe technique élargie."> </spw-timeline-item>
    <spw-timeline-item
      label="Août 2025 - Lancement officiel de la phase de développement après validation du prototype par l'ensemble des stakeholders et obtention du budget définitif"
      description="Début effectif des travaux de développement suite à l'acceptation formelle du prototype fonctionnel par tous les acteurs impliqués dans le projet. Cette validation comprend non seulement les aspects techniques et fonctionnels, mais également la confirmation du budget alloué, la mise en place des équipes de développement, l'installation des environnements de travail, et la définition précise du planning de réalisation avec les jalons intermédiaires."
    >
    </spw-timeline-item>
    <spw-timeline-item
      label="Juillet 2025"
      description="Phase de prototypage et de conception des maquettes interactives avec les utilisateurs finaux pour validation de l'expérience utilisateur."
    >
    </spw-timeline-item>
    <spw-timeline-item label="Juin 2025" description="Initialisation du projet, constitution de l'équipe projet, définition de la gouvernance et des processus de travail.">
    </spw-timeline-item>
  `;
}
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;
};
const TemplateWithLinks = 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 = htmlContentWithLinks();
    return element;
};
const TemplateWithVisibleItems = 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 = htmlContentWithVisibleItems();
    return element;
};
const TemplateWithLongText = 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 = htmlContentWithLongText();
    return element;
};
export const Default = TemplateDefault.bind({});
Default.args = {};
Default.parameters = {
    docs: {
        description: {
            story: 'Timeline par défaut avec affichage vertical d\'événements chronologiques. Un item peut être mis en surbrillance avec l\'état "active".',
        },
    },
};
export const WithLinks = TemplateWithLinks.bind({});
WithLinks.args = {};
WithLinks.parameters = {
    docs: {
        description: {
            story: "Timeline avec des liens cliquables sur les labels. Utilise les props href, target et accAriaLabel pour l'accessibilité.",
        },
    },
};
export const WithVisibleItemsLimit = TemplateWithVisibleItems.bind({});
WithVisibleItemsLimit.args = {
    visibleItems: 3,
    showMoreText: "Afficher plus d'événements",
};
WithVisibleItemsLimit.parameters = {
    docs: {
        description: {
            story: 'Timeline avec limitation du nombre d\'items visibles. Un bouton "Voir plus" permet d\'afficher tous les événements. Le texte du bouton est personnalisable.',
        },
    },
};
export const WithLongText = TemplateWithLongText.bind({});
WithLongText.args = {
    visibleItems: 3,
    showMoreText: 'Voir tous les événements',
};
WithLongText.parameters = {
    docs: {
        description: {
            story: "Timeline avec des textes très longs dans les labels et descriptions pour démontrer le comportement du toggle, pratique pour gérer l'affichage et le masquage des items même avec du contenu volumineux.",
        },
    },
};
