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

Le composant Slider (carousel) permet d'afficher un enchaînement d'éléments défilants. Idéal pour mettre en avant plusieurs contenus importants dans un espace limité avec navigation fluide entre les items.

## Structure

Le composant se compose de deux éléments :
- **spw-slider** : Conteneur du carousel avec contrôles
- **spw-slider-item** : Item individuel du carousel (généralement contient un spw-hero)

## Fonctionnalités

- Navigation par flèches (clavier et boutons)
- Indicateurs de pagination (dots) cliquables
- Position des flèches : intérieure (défaut) ou extérieure via arrows-position="outside"
- Position des dots : intérieure (défaut) ou extérieure via dots-position="outside"
- Autoplay avec contrôle play/pause et intervalle configurable
- Swipe tactile sur mobile et tablette
- Support du clavier (flèches gauche/droite)
- Hauteur fixe optionnelle via has-fixed-height

## Cas d'usage

- Bannières de mise en avant sur homepage
- Carrousels d'images (hero featured)
- Carrousels d'actualités ou événements

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/378091-carousel-slider)
        `,
            },
        },
    },
};
export default meta;
// ─── Contenus réutilisables ───────────────────────────────────────────────
function heroSlides() {
    return /* HTML */ `
    <spw-slider-item>
      <spw-hero variant="photo" alignment="left" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Paysage naturel">
        <h1 class="spw-ds-typography-heading-01 mb-4">Découvrez la Wallonie</h1>
        <p class="spw-ds-typography-body-1 mb-4">Un territoire riche en patrimoine, culture et opportunités pour tous les citoyens.</p>
        <spw-group type="buttons" orientation="horizontal" alignment="left">
          <spw-button variant="primary">En savoir plus</spw-button>
          <spw-button variant="secondary">Voir les services</spw-button>
        </spw-group>
      </spw-hero>
    </spw-slider-item>
    <spw-slider-item>
      <spw-hero variant="photo" alignment="center" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Architecture moderne">
        <h1 class="spw-ds-typography-heading-01 mb-4">Innovation et développement</h1>
        <p class="spw-ds-typography-body-1 mb-4">La Wallonie investit dans l'avenir avec des projets innovants et durables.</p>
        <spw-group type="buttons" orientation="horizontal" alignment="center">
          <spw-button variant="primary">Découvrir les projets</spw-button>
        </spw-group>
      </spw-hero>
    </spw-slider-item>
    <spw-slider-item>
      <spw-hero variant="photo" alignment="right" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Équipe collaborative">
        <h1 class="spw-ds-typography-heading-01 mb-4">Services aux citoyens</h1>
        <p class="spw-ds-typography-body-1 mb-4">Accédez facilement à tous les services publics de la région wallonne en ligne.</p>
        <spw-group type="buttons" orientation="horizontal" alignment="right">
          <spw-button variant="primary">Accéder aux services</spw-button>
          <spw-button variant="tertiary">Contactez-nous</spw-button>
        </spw-group>
      </spw-hero>
    </spw-slider-item>
  `;
}
function featuredSlides() {
    return /* HTML */ `
    <spw-slider-item>
      <spw-hero variant="featured" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1600" image-alt="Montagne au coucher du soleil"></spw-hero>
    </spw-slider-item>
    <spw-slider-item>
      <spw-hero variant="featured" image-src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1600" image-alt="Forêt dense en automne"></spw-hero>
    </spw-slider-item>
    <spw-slider-item>
      <spw-hero variant="featured" image-src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1600" image-alt="Plage tropicale"></spw-hero>
    </spw-slider-item>
    <spw-slider-item>
      <spw-hero variant="featured" image-src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1600" image-alt="Lac de montagne"></spw-hero>
    </spw-slider-item>
  `;
}
// ─── Template générique ───────────────────────────────────────────────────
function makeSlider(attrs, content) {
    const element = document.createElement(elementTag);
    Object.entries(attrs).forEach(([key, val]) => {
        element.setAttribute(toKebabCase(key), String(val));
    });
    element.innerHTML = content;
    return element;
}
const Template = 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 = heroSlides();
    return element;
};
// ─── Story 1 : Défaut ─────────────────────────────────────────────────────
export const Default = Template.bind({});
Default.args = {
    showArrows: true,
    showDots: true,
    showAutoplayToggle: false,
    autoplayEnabled: false,
    arrowsPosition: 'inside',
    dotsPosition: 'inside',
};
Default.parameters = {
    docs: {
        description: {
            story: `Carousel avec hero photo, flèches et dots à l'intérieur. Configuration par défaut pour une bannière homepage.`,
        },
    },
};
// ─── Story 2 : Flèches à l'extérieur ─────────────────────────────────────
export const ArrowsOutside = () => makeSlider({ showArrows: true, showDots: true, arrowsPosition: 'outside', dotsPosition: 'inside' }, heroSlides());
ArrowsOutside.parameters = {
    docs: {
        description: {
            story: `Flèches positionnées à l'extérieur du slider via arrows-position="outside". Le contenu n'est pas masqué par les boutons de navigation. Recommandé quand le contenu du hero est dense.`,
        },
        source: {
            code: `<spw-slider show-arrows="true" arrows-position="outside">\n  <!-- spw-slider-item ... -->\n</spw-slider>`,
        },
    },
};
// ─── Story 3 : Dots à l'extérieur ────────────────────────────────────────
export const DotsOutside = () => makeSlider({ showArrows: true, showDots: true, arrowsPosition: 'inside', dotsPosition: 'outside' }, heroSlides());
DotsOutside.parameters = {
    docs: {
        description: {
            story: `Dots positionnés à l'extérieur du slider via dots-position="outside". Utile pour ne pas masquer le contenu de l'image par les indicateurs de pagination.`,
        },
        source: {
            code: `<spw-slider show-dots="true" dots-position="outside">\n  <!-- spw-slider-item ... -->\n</spw-slider>`,
        },
    },
};
// ─── Story 4 : Flèches et dots à l'extérieur ─────────────────────────────
export const AllOutside = () => makeSlider({ showArrows: true, showDots: true, arrowsPosition: 'outside', dotsPosition: 'outside' }, heroSlides());
AllOutside.parameters = {
    docs: {
        description: {
            story: `Flèches et dots tous les deux à l'extérieur. Le contenu du slider est entièrement libéré de tout élément UI superposé.`,
        },
        source: {
            code: `<spw-slider arrows-position="outside" dots-position="outside">\n  <!-- spw-slider-item ... -->\n</spw-slider>`,
        },
    },
};
// ─── Story 5 : Galerie d'images (hero featured) ───────────────────────────
export const GalerieImages = () => makeSlider({ showArrows: true, showDots: true, arrowsPosition: 'outside', dotsPosition: 'outside' }, featuredSlides());
GalerieImages.parameters = {
    docs: {
        description: {
            story: `Carousel d'images plein format avec le variant featured du hero. Aucun texte superposé — idéal pour une galerie photo immersive. Flèches et dots à l'extérieur pour ne pas obstruer les images.`,
        },
        source: {
            code: /* HTML */ `
        <spw-slider show-arrows="true" show-dots="true" arrows-position="outside" dots-position="outside">
          <spw-slider-item>
            <spw-hero variant="featured" image-src="..." image-alt="..."></spw-hero>
          </spw-slider-item>
          <!-- ... -->
        </spw-slider>
      `,
        },
    },
};
// ─── Story 6 : Autoplay ───────────────────────────────────────────────────
export const Autoplay = () => makeSlider({ showArrows: true, showDots: true, showAutoplayToggle: true, autoplayEnabled: true, autoplayInterval: 3000, dotsPosition: 'inside' }, heroSlides());
Autoplay.parameters = {
    docs: {
        description: {
            story: `Défilement automatique activé par défaut avec un intervalle de 3 secondes. Le toggle play/pause est visible sous le slider via show-autoplay-toggle="true". L'autoplay se met en pause lors du swipe ou du changement manuel.`,
        },
        source: {
            code: `<spw-slider show-autoplay-toggle="true" autoplay-enabled="true" autoplay-interval="3000">\n  <!-- spw-slider-item ... -->\n</spw-slider>`,
        },
    },
};
// ─── Story 7 : Autoplay + galerie images ──────────────────────────────────
export const AutoplayGalerie = () => makeSlider({ showArrows: false, showDots: true, showAutoplayToggle: true, autoplayEnabled: true, autoplayInterval: 4000, arrowsPosition: 'inside', dotsPosition: 'outside' }, featuredSlides());
AutoplayGalerie.parameters = {
    docs: {
        description: {
            story: `Diaporama automatique d'images plein format sans flèches. Dots à l'extérieur et toggle autoplay visible.`,
        },
        source: {
            code: /* HTML */ `
        <spw-slider show-arrows="false" show-dots="true" dots-position="outside" show-autoplay-toggle="true" autoplay-enabled="true" autoplay-interval="4000">
          <spw-slider-item>
            <spw-hero variant="featured" image-src="..." image-alt="..."></spw-hero>
          </spw-slider-item>
          <!-- ... -->
        </spw-slider>
      `,
        },
    },
};
// ─── Story 8 : Hauteur fixe ───────────────────────────────────────────────
export const HauteurFixe = () => makeSlider({ showArrows: true, showDots: true, hasFixedHeight: true, dotsPosition: 'inside' }, heroSlides());
HauteurFixe.parameters = {
    docs: {
        description: {
            story: `Avec has-fixed-height="true", le slider adopte la hauteur de la slide la plus haute et ne change plus de taille lors de la navigation. Évite le saut de layout entre des slides de hauteurs différentes.`,
        },
        source: {
            code: `<spw-slider has-fixed-height="true">\n  <!-- spw-slider-item ... -->\n</spw-slider>`,
        },
    },
};
