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

Le composant Mosaic permet d'afficher une grille d'éléments sous la forme d'un masonry (mise en page dynamique type Pinterest). Il s'adapte automatiquement à la hauteur variable des contenus et offre une configuration responsive.

## Structure

Le composant se compose de deux éléments :
- **spw-mosaic** : Conteneur principal avec gestion du masonry layout
- **spw-mosaic-item** : Wrapper pour chaque élément de la grille

## Configuration responsive

- **colsDesktop** : Nombre de colonnes en vue desktop (défaut: 3)
- **colsTablet** : Nombre de colonnes en vue tablette (défaut: 2)
- **colsMobile** : Nombre de colonnes en vue mobile (défaut: 1)
- **isMasonry** : Active/désactive le mode masonry layout

## Fonctionnalités

- Layout masonry automatique avec bibliothèque Masonry.js
- Grille responsive configurée par breakpoint
- Chargement intelligent des images avant disposition
- Support de tout type de contenu (cards, tiles)
- Mode grille classique si masonry désactivé

## Cas d'usage

- Galeries d'actualités avec images de tailles variées
- Grilles de cartes avec contenus de hauteurs différentes
- Affichage de tuiles d'accès rapides organisées

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/378091-carousel-slider)
        `,
            },
        },
    },
};
export default meta;
function htmlContentCards() {
    return /* HTML */ `
    <spw-mosaic-item>
      <spw-card full-height="true" href="http://google.com" target="_blank">
        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
          <spw-card-subtags>
            <spw-card-subtag-item link="http://google.be">Sous-tag 1</spw-card-subtag-item>
            <spw-card-subtag-item link="http://google.be">Sous-tag 2</spw-card-subtag-item>
          </spw-card-subtags>
          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>
          <spw-card-excerpt>
            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
          </spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-card full-height="true" href="http://google.com" target="_blank">
        <spw-card-image label="Tag">
          <img alt="Image" src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" />
        </spw-card-image>
        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>
          <spw-card-excerpt>
            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
          </spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-card full-height="true" href="http://google.com" target="_blank">
        <spw-card-image label="Tag">
          <img alt="Image" src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" />
        </spw-card-image>
        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
          <spw-card-title>Lorem ipsum dolor sit</spw-card-title>
          <spw-card-excerpt>
            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
          </spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-card full-height="true" href="http://google.com" target="_blank">
        <spw-card-image label="Tag">
          <img alt="Image" src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" />
        </spw-card-image>
        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>
          <spw-card-excerpt>
            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
          </spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-card full-height="true" href="http://google.com" target="_blank">
        <spw-card-image label="Tag">
          <img alt="Image" src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" />
        </spw-card-image>
        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>
          <spw-card-excerpt>
            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
          </spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-card full-height="true" href="http://google.com" target="_blank">
        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
          <spw-card-title>Lorem ipsum dolor sit amet</spw-card-title>
          <spw-card-excerpt>
            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
          </spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-mosaic-item>
  `;
}
function htmlContentIconTiles() {
    return /* HTML */ `
    <spw-mosaic-item>
      <spw-tile variant="icon" href="http://google.com" target="_blank">
        <spw-icon icon="fa-power-off"></spw-icon>
        <spw-tile-title>Titre de ma tuile</spw-tile-title>
        <spw-tile-description>Description de ma tuile</spw-tile-description>
      </spw-tile>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-tile variant="icon" href="http://google.com" target="_blank">
        <spw-icon icon="fa-map-location-dot"></spw-icon>
        <spw-tile-title>Titre de ma tuile</spw-tile-title>
        <spw-tile-description>Description de ma tuile</spw-tile-description>
      </spw-tile>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-tile variant="icon" href="http://google.com" target="_blank">
        <spw-icon icon="fa-paper-plane"></spw-icon>
        <spw-tile-title>Titre de ma tuile</spw-tile-title>
        <spw-tile-description>Description de ma tuile</spw-tile-description>
      </spw-tile>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-tile variant="icon" href="http://google.com" target="_blank">
        <spw-icon icon="fa-user"></spw-icon>
        <spw-tile-title>Titre de ma tuile</spw-tile-title>
        <spw-tile-description>Description de ma tuile</spw-tile-description>
      </spw-tile>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-tile variant="icon" href="http://google.com" target="_blank">
        <spw-icon icon="fa-image"></spw-icon>
        <spw-tile-title>Titre de ma tuile</spw-tile-title>
        <spw-tile-description>Description de ma tuile</spw-tile-description>
      </spw-tile>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-tile variant="icon" href="http://google.com" target="_blank">
        <spw-icon icon="fa-bell"></spw-icon>
        <spw-tile-title>Titre de ma tuile</spw-tile-title>
        <spw-tile-description>Description de ma tuile</spw-tile-description>
      </spw-tile>
    </spw-mosaic-item>
  `;
}
function htmlContentLightTiles() {
    return /* HTML */ `
    <spw-mosaic-item>
      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="light" href="http://google.com" target="_blank">
        <spw-tile-title>Titre de ma tuile</spw-tile-title>
      </spw-tile>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="light" href="http://google.com" target="_blank">
        <spw-tile-title>Titre de ma tuile</spw-tile-title>
      </spw-tile>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="light" href="http://google.com" target="_blank">
        <spw-tile-title>Titre de ma tuile</spw-tile-title>
      </spw-tile>
    </spw-mosaic-item>
  `;
}
function htmlContentBigTiles() {
    return /* HTML */ `
    <spw-mosaic-item>
      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="big" href="http://google.com" target="_blank">
        <spw-tile-title>Titre de ma tuile</spw-tile-title>
      </spw-tile>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="big" href="http://google.com" target="_blank">
        <spw-tile-title>Titre de ma tuile</spw-tile-title>
      </spw-tile>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="big" href="http://google.com" target="_blank">
        <spw-tile-title>Titre de ma tuile</spw-tile-title>
      </spw-tile>
    </spw-mosaic-item>
  `;
}
function htmlContentFeaturedCard() {
    return /* HTML */ `
    <spw-mosaic-item col-span-desktop="2" col-span-tablet="2">
      <spw-card variant="highlighted" full-height="true" href="http://google.com" target="_blank">
        <spw-card-image ratio-mobile="4/3" ratio-tablet="16/8" ratio-desktop="15/9">
          <img alt="Vennbahn au Couvent Vert" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
        </spw-card-image>
        <spw-card-content tag="Actualités" date="2024-02-09">
          <spw-card-title>Vennbahn : une piste cyclable transfrontalière exceptionnelle</spw-card-title>
          <spw-card-excerpt>
            La Vennbahn, ancienne ligne de chemin de fer, est aujourd'hui une véloroute transfrontalière traversant la Belgique et l'Allemagne sur 125 km. Elle offre un parcours
            unique à travers les Hautes Fagnes.
          </spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-card full-height="true" href="http://google.com" target="_blank">
        <spw-card-image ratio="16/9">
          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
        </spw-card-image>
        <spw-card-content tag="Mobilité" date="2024-02-08">
          <spw-card-title>Nouveaux aménagements cyclables en Wallonie</spw-card-title>
          <spw-card-excerpt>Le réseau cyclable wallon s'enrichit de nouveaux aménagements pour faciliter la mobilité douce.</spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-card full-height="true" href="http://google.com" target="_blank">
        <spw-card-image ratio="16/9">
          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
        </spw-card-image>
        <spw-card-content tag="Patrimoine" date="2024-02-07">
          <spw-card-title>Restauration des châteaux wallons</spw-card-title>
          <spw-card-excerpt>Programme de restauration pour préserver notre patrimoine historique exceptionnel.</spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-card full-height="true" href="http://google.com" target="_blank">
        <spw-card-image ratio="16/9">
          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
        </spw-card-image>
        <spw-card-content tag="Environnement" date="2024-02-06">
          <spw-card-title>Protection des espaces naturels</spw-card-title>
          <spw-card-excerpt>Nouvelles mesures pour préserver la biodiversité de nos régions.</spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-card full-height="true" href="http://google.com" target="_blank">
        <spw-card-image ratio="16/9">
          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
        </spw-card-image>
        <spw-card-content tag="Énergie" date="2024-02-05">
          <spw-card-title>Transition énergétique en Wallonie</spw-card-title>
          <spw-card-excerpt>Initiatives locales pour un avenir énergétique durable et renouvelable.</spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-card full-height="true" href="http://google.com" target="_blank">
        <spw-card-image ratio="16/9">
          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
        </spw-card-image>
        <spw-card-content tag="Tourisme" date="2024-02-04">
          <spw-card-title>Promotion du tourisme local</spw-card-title>
          <spw-card-excerpt>Campagne de valorisation des attraits touristiques wallons.</spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-card full-height="true" href="http://google.com" target="_blank">
        <spw-card-image ratio="16/9">
          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
        </spw-card-image>
        <spw-card-content tag="Infrastructure" date="2024-02-03">
          <spw-card-title>Modernisation des routes régionales</spw-card-title>
          <spw-card-excerpt>Travaux d'amélioration pour un réseau routier plus sûr et efficace.</spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-mosaic-item>
    <spw-mosaic-item>
      <spw-card full-height="true" href="http://google.com" target="_blank">
        <spw-card-image ratio="16/9">
          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
        </spw-card-image>
        <spw-card-content tag="Culture" date="2024-02-02">
          <spw-card-title>Festivals culturels wallons 2024</spw-card-title>
          <spw-card-excerpt>Découvrez la programmation culturelle exceptionnelle de cette année.</spw-card-excerpt>
        </spw-card-content>
      </spw-card>
    </spw-mosaic-item>
  `;
}
function camelToKebab(str) {
    return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
}
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)) {
            const kebabKey = camelToKebab(key);
            element.setAttribute(kebabKey, val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    element.innerHTML = htmlContentCards();
    return element;
};
const TemplateIconTiles = 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)) {
            const kebabKey = camelToKebab(key);
            element.setAttribute(kebabKey, val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    element.innerHTML = htmlContentIconTiles();
    return element;
};
const TemplateLightTiles = 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)) {
            const kebabKey = camelToKebab(key);
            element.setAttribute(kebabKey, val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    element.innerHTML = htmlContentLightTiles();
    return element;
};
const TemplateBigTiles = 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)) {
            const kebabKey = camelToKebab(key);
            element.setAttribute(kebabKey, val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    element.innerHTML = htmlContentBigTiles();
    return element;
};
const TemplateFeaturedCard = 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)) {
            const kebabKey = camelToKebab(key);
            element.setAttribute(kebabKey, val);
        }
        else if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
    });
    element.innerHTML = htmlContentFeaturedCard();
    return element;
};
export const Cards = TemplateCards.bind({});
Cards.args = {
    isMasonry: true,
    colsDesktop: 3,
    colsTablet: 2,
    colsMobile: 1,
};
export const IconTiles = TemplateIconTiles.bind({});
IconTiles.args = {
    isMasonry: true,
    colsDesktop: 3,
    colsTablet: 2,
    colsMobile: 1,
};
export const LightTiles = TemplateLightTiles.bind({});
LightTiles.args = {
    isMasonry: true,
    colsDesktop: 3,
    colsTablet: 2,
    colsMobile: 1,
};
export const BigTiles = TemplateBigTiles.bind({});
BigTiles.args = {
    isMasonry: true,
    colsDesktop: 3,
    colsTablet: 2,
    colsMobile: 1,
};
export const FeaturedCard = TemplateFeaturedCard.bind({});
FeaturedCard.args = {
    isMasonry: true,
    colsDesktop: 3,
    colsTablet: 2,
    colsMobile: 1,
};
Cards.parameters = {
    docs: {
        description: {
            story: `
Mosaïque de cartes (spw-card) avec masonry activé en 3 colonnes desktop, 2 tablette, 1 mobile. Mélange de cartes avec et sans images, avec contenus de hauteurs variables (titres courts et longs).

Cas d'usage : galerie d'actualités, liste d'événements avec visuels optionnels, affichage de contenus éditoriaux mixtes. Le masonry permet une disposition harmonieuse malgré les hauteurs différentes.
      `,
        },
    },
};
IconTiles.parameters = {
    docs: {
        description: {
            story: `
Mosaïque de tuiles icônes (spw-tile variant="icon") organisées en grille masonry. Chaque tuile affiche une icône FontAwesome, un titre et une description. Configuration 3/2/1 colonnes.

Cas d'usage : grille d'accès rapides aux services, menu de fonctionnalités principales, portail d'outils avec icônes représentatives. Format compact et visuellement équilibré.
      `,
        },
    },
};
LightTiles.parameters = {
    docs: {
        description: {
            story: `
Mosaïque de tuiles légères (spw-tile variant="light") avec images de fond. Format minimaliste avec titre en overlay sur l'image. Configuration responsive 3/2/1 colonnes.

Cas d'usage : galerie de catégories thématiques, navigation visuelle par sections, portfolio de projets avec aperçu visuel. L'image attire l'attention et le titre identifie le contenu.
      `,
        },
    },
};
BigTiles.parameters = {
    docs: {
        description: {
            story: `
Mosaïque de grandes tuiles (spw-tile variant="big") avec images plein format et titre en overlay. Format impactant avec icône chevron indiquant l'interactivité. Configuration 3/2/1 colonnes.

Cas d'usage : mise en avant de grandes thématiques, landing pages avec sections principales, portails avec accès aux univers majeurs. Format généreux qui valorise le contenu visuel.
      `,
        },
    },
};
FeaturedCard.parameters = {
    docs: {
        description: {
            story: `
Mosaïque avec carte mise en avant utilisant l'override de colSpan. La première carte (variant="highlighted") occupe 2 colonnes en desktop et tablette grâce aux props col-span-desktop="2" et col-span-tablet="2" sur le spw-mosaic-item. Elle utilise également des ratios d'image responsifs différenciés (4/3 mobile, 16/8 tablette, 15/9 desktop). Les autres cartes occupent 1 colonne avec un ratio 16/9 standard.

Cas d'usage : page d'actualités avec article principal mis en avant, galerie avec contenu featured, portail avec mise en évidence d'un événement majeur. Cette approche attire l'attention sur le contenu prioritaire tout en préservant une navigation claire vers les autres contenus.

**Note technique** : Le mode masonry fonctionne mieux avec des items de largeur uniforme. L'utilisation de colSpan avec masonry peut créer des espacements inattendus. Pour des mises en page avec largeurs variables, envisager de désactiver le masonry (is-masonry="false").
      `,
        },
    },
};
