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 } from "../../../utils/utils";
const elementTag = 'spw-toc';
const subComponentTags = ['spw-toc-container', 'spw-toc-navigation'];
const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags));
const meta = {
    title: 'Organismes/Table des matières',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Table des matières / Table of contents (TOC) génère automatiquement une table des matières interactive basée sur les titres (h2-h6) présents dans le contenu. Il permet une navigation fluide dans la page avec suivi de progression visuel.

## Structure

Le composant se compose de trois parties :
- spw-toc : Le conteneur principal qui englobe tout le contenu
- spw-toc-container : Contient le contenu avec les titres à indexer
- spw-toc-navigation : Affiche la navigation générée automatiquement

## Variants de spw-toc-navigation

- **progress** (défaut) : affiche une barre de progression par section h2 et un indicateur de section active
- **simple** : navigation épurée sans barre de progression, uniquement les liens de navigation

## Fonctionnalités

- Génération automatique des liens de navigation basée sur les titres h2-h6
- Création automatique d'IDs slugifiés pour les titres qui n'en ont pas
- Suivi visuel de la progression lors du scroll
- Navigation smooth scroll vers les sections
- Détection automatique de la section active
- Barre de progression pour les sections principales (h2)
- Support du responsive design avec position sticky
        `,
            },
        },
    },
};
export default meta;
function htmlContentWithAccordions() {
    return /* HTML */ `
    <spw-toc>
      <section class="spw-ds-template-generic pt-3 pb-5">
        <div class="spw-ds-container">
          <spw-breadcrumb variant="default" class="mb-5">
            <spw-breadcrumb-item href="#">Accueil</spw-breadcrumb-item>
            <spw-breadcrumb-item href="#">Aide</spw-breadcrumb-item>
            <spw-breadcrumb-item>FAQ</spw-breadcrumb-item>
          </spw-breadcrumb>
          <h1 class="spw-ds-typography-heading-01 mb-4">Foire aux questions</h1>

          <div class="spw-ds-template-generic__row">
            <div class="spw-ds-template-generic__content">
              <p class="spw-ds-typography-lead-body mb-5">
                Si vous cherchez des aides, si vous avez des questions à propos d'un bien, nous vous invitons à consulter cette FAQ. Vous ne trouvez pas la réponse à votre question
                ? N'hésitez pas à nous contacter.
              </p>

              <spw-toc-container>
                <h2 class="spw-ds-typography-heading-02 mb-3">Questions fréquemment posées</h2>

                <spw-accordion background="white">
                  <spw-accordion-item>
                    <spw-accordion-title slot="title">Comment obtenir une aide financière ?</spw-accordion-title>
                    <spw-accordion-content slot="content">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
                      diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non.
                    </spw-accordion-content>
                  </spw-accordion-item>
                  <spw-accordion-item>
                    <spw-accordion-title slot="title">Quels sont les délais de traitement ?</spw-accordion-title>
                    <spw-accordion-content slot="content">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
                      diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium.
                    </spw-accordion-content>
                  </spw-accordion-item>
                  <spw-accordion-item>
                    <spw-accordion-title slot="title">Puis-je modifier ma demande ?</spw-accordion-title>
                    <spw-accordion-content slot="content">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
                      diam. Ut malesuada ante et scelerisque eleifend.
                    </spw-accordion-content>
                  </spw-accordion-item>
                </spw-accordion>

                <h2 class="spw-ds-typography-heading-02 mt-5 mb-3">À propos des documents</h2>

                <spw-accordion background="white">
                  <spw-accordion-item>
                    <spw-accordion-title slot="title">Quels documents dois-je fournir ?</spw-accordion-title>
                    <spw-accordion-content slot="content">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
                      diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non.
                    </spw-accordion-content>
                  </spw-accordion-item>
                  <spw-accordion-item>
                    <spw-accordion-title slot="title">Comment envoyer mes documents ?</spw-accordion-title>
                    <spw-accordion-content slot="content">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
                      diam.
                    </spw-accordion-content>
                  </spw-accordion-item>
                  <spw-accordion-item>
                    <spw-accordion-title slot="title">Mes documents sont-ils sécurisés ?</spw-accordion-title>
                    <spw-accordion-content slot="content">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
                      diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non.
                    </spw-accordion-content>
                  </spw-accordion-item>
                </spw-accordion>

                <h2 class="spw-ds-typography-heading-02 mt-5 mb-3">Concernant le suivi</h2>

                <spw-accordion background="white">
                  <spw-accordion-item>
                    <spw-accordion-title slot="title">Comment suivre ma demande ?</spw-accordion-title>
                    <spw-accordion-content slot="content">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
                      diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non.
                    </spw-accordion-content>
                  </spw-accordion-item>
                  <spw-accordion-item>
                    <spw-accordion-title slot="title">Je ne reçois pas de notifications</spw-accordion-title>
                    <spw-accordion-content slot="content">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
                      diam. Ut malesuada ante et scelerisque eleifend.
                    </spw-accordion-content>
                  </spw-accordion-item>
                </spw-accordion>
              </spw-toc-container>
            </div>

            <aside class="spw-ds-template-generic__aside">
              <spw-box is-sticky="false" padding="medium" has-radius="true" has-shadow="true" class="mb-4">
                <div slot="header">
                  <h2 class="spw-ds-typography-heading-03 mb-0">Sommaire</h2>
                </div>
                <div class="mt-3">
                  <spw-toc-navigation></spw-toc-navigation>
                </div>
              </spw-box>
              <spw-box is-sticky="true" padding="medium" has-radius="true" has-shadow="true" class="mb-4">
                <div slot="header">
                  <h2 class="spw-ds-typography-heading-03 mb-0">Besoin d'aide ?</h2>
                </div>
                <div class="mt-3">
                  <p class="spw-ds-typography-body-01 mb-3">Contactez-nous si vous ne trouvez pas la réponse à votre question.</p>
                  <spw-separator class="my-3"></spw-separator>
                  <spw-group orientation="vertical">
                    <spw-link variant="primary" icon="fa-phone" icon-position="left" href="tel:081654449">081 / 65 44 49</spw-link>
                    <spw-link variant="primary" icon="fa-envelope" icon-position="left" href="mailto:mail@mail.be">mail@mail.be</spw-link>
                    <spw-link variant="primary" icon="fa-globe" icon-position="left" href="#">www.wallonie.be</spw-link>
                  </spw-group>
                  <spw-button is-full-width class="mt-4 w-100" variant="primary">Formulaire en ligne</spw-button>
                </div>
              </spw-box>
            </aside>
          </div>
        </div>
      </section>
    </spw-toc>
  `;
}
function htmlContentSimple() {
    return /* HTML */ `
    <spw-toc>
      <section class="spw-ds-template-generic pt-3 pb-5">
        <div class="spw-ds-container">
          <h1 class="spw-ds-typography-heading-01 mb-4">Guide utilisateur</h1>

          <div class="spw-ds-template-generic__row">
            <div class="spw-ds-template-generic__content">
              <spw-toc-container>
                <h2 class="spw-ds-typography-heading-02 mb-3">Introduction</h2>
                <p class="spw-ds-typography-body-01 mb-4">
                  Bienvenue dans notre guide utilisateur. Ce document vous accompagnera dans la découverte de toutes les fonctionnalités disponibles.
                </p>

                <h3 class="spw-ds-typography-heading-03 mb-2">Pourquoi ce guide ?</h3>
                <p class="spw-ds-typography-body-01 mb-4">Ce guide a été conçu pour vous aider à tirer le meilleur parti de nos services.</p>

                <h3 class="spw-ds-typography-heading-03 mb-2">À qui s'adresse-t-il ?</h3>
                <p class="spw-ds-typography-body-01 mb-4">Ce guide s'adresse à tous les utilisateurs, débutants comme avancés.</p>

                <h2 class="spw-ds-typography-heading-02 mt-5 mb-3">Premiers pas</h2>
                <p class="spw-ds-typography-body-01 mb-4">Commencez ici si vous êtes nouveau sur la plateforme.</p>

                <h3 class="spw-ds-typography-heading-03 mb-2">Créer un compte</h3>
                <p class="spw-ds-typography-body-01 mb-4">
                  La première étape consiste à créer votre compte. Cliquez sur le bouton "S'inscrire" en haut à droite de la page d'accueil.
                </p>

                <h3 class="spw-ds-typography-heading-03 mb-2">Personnaliser votre profil</h3>
                <p class="spw-ds-typography-body-01 mb-4">Une fois votre compte créé, n'oubliez pas de personnaliser votre profil avec vos informations.</p>

                <h2 class="spw-ds-typography-heading-02 mt-5 mb-3">Fonctionnalités avancées</h2>
                <p class="spw-ds-typography-body-01 mb-4">Découvrez les fonctionnalités plus avancées de la plateforme.</p>

                <h3 class="spw-ds-typography-heading-03 mb-2">Gestion des documents</h3>
                <p class="spw-ds-typography-body-01 mb-4">Apprenez à organiser et gérer efficacement vos documents.</p>

                <h3 class="spw-ds-typography-heading-03 mb-2">Collaboration</h3>
                <p class="spw-ds-typography-body-01 mb-4">Travaillez en équipe grâce aux outils de collaboration intégrés.</p>
              </spw-toc-container>
            </div>

            <aside class="spw-ds-template-generic__aside">
              <spw-box is-sticky="false" padding="medium" has-radius="true" has-shadow="true" class="mb-4">
                <div slot="header">
                  <h2 class="spw-ds-typography-heading-03 mb-0">Sommaire</h2>
                </div>
                <div class="mt-3">
                  <spw-toc-navigation variant="simple"></spw-toc-navigation>
                </div>
              </spw-box>
            </aside>
          </div>
        </div>
      </section>
    </spw-toc>
  `;
}
const TemplateFAQ = () => {
    const wrapper = document.createElement('div');
    wrapper.innerHTML = htmlContentWithAccordions();
    return wrapper;
};
const TemplateSimple = () => {
    const wrapper = document.createElement('div');
    wrapper.innerHTML = htmlContentSimple();
    return wrapper;
};
export const FAQ = TemplateFAQ.bind({});
FAQ.parameters = {
    docs: {
        description: {
            story: `Variant progress (défaut) — page FAQ avec accordéons. La navigation affiche une barre de progression par section h2, un indicateur de section active et un smooth scroll vers la section cliquée.`,
        },
    },
};
export const Simple = TemplateSimple.bind({});
Simple.parameters = {
    docs: {
        description: {
            story: `Variant simple — navigation épurée sans barre de progression. Les liens h2 et h3 sont générés automatiquement, les titres sans ID reçoivent un ID slugifié basé sur leur contenu textuel.`,
        },
    },
};
