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

Le composant Grid est un système de grille CSS avancé permettant d'organiser des éléments en colonnes et lignes responsives. Il supporte les spans (étendues) pour créer des mises en page complexes et dynamiques.

## Structure

Le composant se compose de deux éléments :
- **spw-grid** : Conteneur de grille avec configuration responsive
- **spw-grid-item** : Item individuel avec propriétés de positionnement

## Cas d'usage

- Grilles de tuiles ou cartes uniformes
- Mise en avant d'un élément principal (span 2x2)
- Sections de contenu avec hiérarchie visuelle
        `,
            },
        },
    },
};
export default meta;
function htmlContentBasicGrid() {
    return /* HTML */ `
    <spw-grid-item>
      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Services aux citoyens" variant="light" href="#">
        <spw-tile-title>Services aux citoyens</spw-tile-title>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Aides et subsides" variant="light" href="#">
        <spw-tile-title>Aides et subsides</spw-tile-title>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Emploi et formation" variant="light" href="#">
        <spw-tile-title>Emploi et formation</spw-tile-title>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Environnement" variant="light" href="#">
        <spw-tile-title>Environnement</spw-tile-title>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Mobilité" variant="light" href="#">
        <spw-tile-title>Mobilité</spw-tile-title>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1531482615713-2afd69097998" image-alt="Patrimoine" variant="light" href="#">
        <spw-tile-title>Patrimoine</spw-tile-title>
      </spw-tile>
    </spw-grid-item>
  `;
}
function htmlContentWithSpans() {
    return /* HTML */ `
    <spw-grid-item col-span-desktop="2" row-span-desktop="2" col-span-tablet="2" row-span-tablet="2">
      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="Titre principal" variant="big" href="#">
        <spw-tile-title>Titre principal - Grande tuile 2x2</spw-tile-title>
        <spw-tile-description>Cette tuile occupe 2 colonnes et 2 lignes sur desktop et tablette pour mettre en avant un contenu important</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Actualité 2" variant="light" href="#">
        <spw-tile-title>Titre secondaire</spw-tile-title>
        <spw-tile-description>Tuile de taille normale</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Actualité 3" variant="light" href="#">
        <spw-tile-title>Titre secondaire</spw-tile-title>
        <spw-tile-description>Tuile de taille normale</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Actualité 4" variant="light" href="#">
        <spw-tile-title>Titre secondaire</spw-tile-title>
        <spw-tile-description>Tuile de taille normale</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Actualité 5" variant="light" href="#">
        <spw-tile-title>Titre secondaire</spw-tile-title>
        <spw-tile-description>Tuile de taille normale</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Actualité 6" variant="light" href="#">
        <spw-tile-title>Titre secondaire</spw-tile-title>
        <spw-tile-description>Tuile de taille normale</spw-tile-description>
      </spw-tile>
    </spw-grid-item>
  `;
}
function htmlContentSquareTiles() {
    return /* HTML */ `
    <spw-grid-item>
      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Tourisme" variant="light" href="#">
        <spw-tile-title>Tourisme</spw-tile-title>
        <spw-tile-description>Visitez la Wallonie</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Culture" variant="light" href="#">
        <spw-tile-title>Culture</spw-tile-title>
        <spw-tile-description>Événements culturels</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Économie" variant="light" href="#">
        <spw-tile-title>Économie</spw-tile-title>
        <spw-tile-description>Soutien aux entreprises</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Innovation" variant="light" href="#">
        <spw-tile-title>Innovation</spw-tile-title>
        <spw-tile-description>Projets innovants</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Éducation" variant="light" href="#">
        <spw-tile-title>Éducation</spw-tile-title>
        <spw-tile-description>Enseignement et écoles</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1531482615713-2afd69097998" image-alt="Santé" variant="light" href="#">
        <spw-tile-title>Santé</spw-tile-title>
        <spw-tile-description>Services de santé</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4" image-alt="Sport" variant="light" href="#">
        <spw-tile-title>Sport</spw-tile-title>
        <spw-tile-description>Infrastructures sportives</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="Nature" variant="light" href="#">
        <spw-tile-title>Nature</spw-tile-title>
        <spw-tile-description>Espaces naturels</spw-tile-description>
      </spw-tile>
    </spw-grid-item>
  `;
}
function htmlContentMixedSpans() {
    return /* HTML */ `
    <spw-grid-item col-span-desktop="2" row-span-desktop="2" col-span-tablet="2" row-span-tablet="2">
      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="Mise en avant" variant="big" href="#">
        <spw-tile-title>Contenu principal 2x2</spw-tile-title>
        <spw-tile-description>Grande tuile occupant 2 colonnes et 2 lignes</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Tuile 1" variant="light" href="#">
        <spw-tile-title>Tuile normale</spw-tile-title>
        <spw-tile-description>Contenu standard</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Tuile 2" variant="light" href="#">
        <spw-tile-title>Tuile normale</spw-tile-title>
        <spw-tile-description>Contenu standard</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Tuile 3" variant="light" href="#">
        <spw-tile-title>Tuile normale</spw-tile-title>
        <spw-tile-description>Contenu standard</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Tuile 4" variant="light" href="#">
        <spw-tile-title>Tuile normale</spw-tile-title>
        <spw-tile-description>Contenu standard</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Tuile 5" variant="light" href="#">
        <spw-tile-title>Tuile normale</spw-tile-title>
        <spw-tile-description>Contenu standard</spw-tile-description>
      </spw-tile>
    </spw-grid-item>

    <spw-grid-item>
      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1531482615713-2afd69097998" image-alt="Tuile 6" variant="light" href="#">
        <spw-tile-title>Tuile normale</spw-tile-title>
        <spw-tile-description>Contenu standard</spw-tile-description>
      </spw-tile>
    </spw-grid-item>
  `;
}
function htmlContentCardsWithSpan() {
    return /* HTML */ `
    <spw-grid-item col-span-desktop="2" col-span-tablet="2">
      <spw-card variant="highlighted" href="#">
        <spw-card-image ratio="16/11">
          <img
            alt="Image"
            src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
          />
        </spw-card-image>
        <spw-card-content tag="Actualités" date="2024-02-09">
          <spw-card-title>Comment soutenir nos agricultrices et agriculteurs ?</spw-card-title>
          <spw-card-excerpt>
            L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
            (APAQ-W) nous propose quelques pistes pour privilégier le local.
          </spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-grid-item>

    <spw-grid-item>
      <spw-card full-height="true" href="#">
        <spw-card-image>
          <img
            alt="Image"
            src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
          />
        </spw-card-image>
        <spw-card-content tag="Actualités" date="2024-02-09">
          <spw-card-title>Titre secondaire</spw-card-title>
          <spw-card-excerpt>
            L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
            (APAQ-W) nous propose quelques pistes pour privilégier le local.
          </spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-grid-item>

    <spw-grid-item>
      <spw-card full-height="true" href="#">
        <spw-card-image>
          <img
            alt="Image"
            src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
          />
        </spw-card-image>
        <spw-card-content tag="Actualités" date="2024-02-09">
          <spw-card-title>Titre secondaire</spw-card-title>
          <spw-card-excerpt>
            L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
            (APAQ-W) nous propose quelques pistes pour privilégier le local.
          </spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-grid-item>

    <spw-grid-item>
      <spw-card full-height="true" href="#">
        <spw-card-image>
          <img
            alt="Image"
            src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
          />
        </spw-card-image>
        <spw-card-content tag="Actualités" date="2024-02-09">
          <spw-card-title>Titre secondaire</spw-card-title>
          <spw-card-excerpt>
            L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
            (APAQ-W) nous propose quelques pistes pour privilégier le local.
          </spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-grid-item>

    <spw-grid-item>
      <spw-card full-height="true" href="#">
        <spw-card-image>
          <img
            alt="Image"
            src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
          />
        </spw-card-image>
        <spw-card-content tag="Actualités" date="2024-02-09">
          <spw-card-title>Titre secondaire</spw-card-title>
          <spw-card-excerpt>
            L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
            (APAQ-W) nous propose quelques pistes pour privilégier le local.
          </spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-grid-item>
  `;
}
const TemplateBasic = 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 = htmlContentBasicGrid();
    return element;
};
const TemplateWithSpans = 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 = htmlContentWithSpans();
    return element;
};
const TemplateSquare = 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 = htmlContentSquareTiles();
    return element;
};
const TemplateMixed = 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 = htmlContentMixedSpans();
    return element;
};
const TemplateCards = 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 = htmlContentCardsWithSpan();
    return element;
};
export const Default = TemplateBasic.bind({});
Default.args = {
    colsDesktop: 3,
    colsTablet: 2,
    colsMobile: 1,
};
Default.parameters = {
    docs: {
        description: {
            story: `
Grille de base avec 3 colonnes sur desktop, 2 sur tablette et 1 sur mobile. Toutes les tuiles ont la même taille et s'ajustent automatiquement.

Cas d'usage : galerie de services, liste de catégories, ou présentation de contenus homogènes. La grille est responsive et s'adapte automatiquement selon le breakpoint.
      `,
        },
    },
};
export const AvecTuileLarge = TemplateWithSpans.bind({});
AvecTuileLarge.args = {
    colsDesktop: 3,
    colsTablet: 2,
    colsMobile: 1,
};
AvecTuileLarge.storyName = 'Grille avec tuile large (3 colonnes)';
AvecTuileLarge.parameters = {
    docs: {
        description: {
            story: 'Grille de 3 colonnes avec une tuile mise en avant occupant 2 colonnes et 2 lignes sur desktop et tablette.',
        },
    },
};
export const GrilleCarree = TemplateSquare.bind({});
GrilleCarree.args = {
    colsDesktop: 4,
    colsTablet: 2,
    colsMobile: 1,
};
GrilleCarree.storyName = 'Grille carrée (4 colonnes)';
GrilleCarree.parameters = {
    docs: {
        description: {
            story: 'Grille de 4 colonnes sur desktop avec des tuiles carrées de taille uniforme.',
        },
    },
};
export const GrilleMixte = TemplateMixed.bind({});
GrilleMixte.args = {
    colsDesktop: 4,
    colsTablet: 2,
    colsMobile: 1,
};
GrilleMixte.storyName = 'Grille mixte (4 colonnes)';
GrilleMixte.parameters = {
    docs: {
        description: {
            story: 'Grille de 4 colonnes avec une grande tuile 2x2 et des tuiles normales carrées.',
        },
    },
};
export const GrilleCartes = TemplateCards.bind({});
GrilleCartes.args = {
    colsDesktop: 3,
    colsTablet: 2,
    colsMobile: 1,
};
GrilleCartes.storyName = 'Grille avec cartes (3 colonnes)';
GrilleCartes.parameters = {
    docs: {
        description: {
            story: "Grille de 3 colonnes avec des cartes. La première carte occupe 2 colonnes sur desktop et tablette pour mettre en avant une actualité principale. Idéal pour les pages d'actualités ou de contenu éditorial.",
        },
    },
};
