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

Le composant List organise et présente des informations de manière structurée et facilement lisible. Il permet d'afficher des éléments avec titre, description, catégorie et métadonnées dans un format cohérent.

## Structure

Le composant se compose de quatre éléments :
- **spw-list** : Conteneur principal avec gestion de l'espacement et de la surface
- **spw-list-item** : Item individuel avec support lien, catégorie, icône
- **spw-list-title** : Titre de l'élément avec line-clamp configurable
- **spw-list-description** : Description avec line-clamp configurable

## Fonctionnalités

- Possibilité de tronquer le texte avec line-clamp
- Catégories avec icônes personnalisables
- Liens cliquables sur toute la zone
- Support des icônes FontAwesome
- Surface adaptable au contexte visuel

## Cas d'usage

- Listes de résultats de recherche
- Affichage d'actualités ou d'événements
- Répertoires de documents ou ressources
- Accès rapides (variant shortcut)

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/51c7cf-liste)
        `,
            },
        },
    },
};
export default meta;
function htmlContentDefault(slotArgs) {
    return /* HTML */ `
    <spw-list-item
      icon="${slotArgs.icon}"
      variant="${slotArgs.variant}"
      category="${slotArgs.category}"
      category-link="${slotArgs.categoryLink}"
      category-icon="${slotArgs.categoryIcon}"
      line-clamp="${slotArgs.lineClamp}"
      href="${slotArgs.href}"
      target="${slotArgs.target}"
      icon="${slotArgs.icon}"
    >
      <spw-list-title
        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus
        orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut
        lacinia turpis pharetra pulvinar.
      </spw-list-title>
      <spw-list-description
        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus
        orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut
        lacinia turpis pharetra pulvinar.
      </spw-list-description>
    </spw-list-item>
    <spw-list-item
      icon="${slotArgs.icon}"
      variant="${slotArgs.variant}"
      category="${slotArgs.category}"
      category-link="${slotArgs.categoryLink}"
      category-icon="${slotArgs.categoryIcon}"
      line-clamp="${slotArgs.lineClamp}"
      href="${slotArgs.href}"
      target="${slotArgs.target}"
      icon="${slotArgs.icon}"
    >
      <spw-list-title
        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus
        orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut
        lacinia turpis pharetra pulvinar.
      </spw-list-title>
      <spw-list-description
        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus
        orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut
        lacinia turpis pharetra pulvinar.
      </spw-list-description>
    </spw-list-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(args);
    return element;
};
export const Default = TemplateDefault.bind({});
Default.args = {
    variant: 'default',
    category: '',
    categoryLink: '',
    lineClamp: '2',
    href: 'http://google.com',
    target: '_blank',
    icon: 'fa-arrow-right',
    categoryIcon: '',
};
export const Category = TemplateDefault.bind({});
Category.args = {
    variant: 'default',
    category: 'Catégorie',
    categoryLink: '',
    lineClamp: '2',
    href: 'http://google.com',
    target: '_blank',
    icon: '',
    categoryIcon: 'fa-file-signature',
};
export const Shortcut = TemplateDefault.bind({});
Shortcut.args = {
    variant: 'shortcut',
    category: '',
    categoryLink: '',
    lineClamp: '1',
    href: 'http://google.com',
    target: '_blank',
    icon: 'fa-arrow-up-right-from-square',
    categoryIcon: '',
};
export const SansIcone = TemplateDefault.bind({});
SansIcone.args = {
    variant: 'default',
    category: '',
    categoryLink: '',
    lineClamp: '2',
    href: 'http://google.com',
    target: '_blank',
    icon: '',
    categoryIcon: '',
};
export const SansDescription = 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 = /* HTML */ `
    <spw-list-item icon="${args.icon}" variant="${args.variant}" href="${args.href}" target="${args.target}">
      <spw-list-title>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar.</spw-list-title>
    </spw-list-item>
    <spw-list-item icon="${args.icon}" variant="${args.variant}" href="${args.href}" target="${args.target}">
      <spw-list-title>Duis vestibulum nisi nec quam. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar.</spw-list-title>
    </spw-list-item>
    <spw-list-item icon="${args.icon}" variant="${args.variant}" href="${args.href}" target="${args.target}">
      <spw-list-title>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</spw-list-title>
    </spw-list-item>
  `;
    return element;
};
SansDescription.args = {
    variant: 'default',
    href: 'http://google.com',
    target: '_blank',
    icon: 'fa-arrow-right',
};
export const AvecIcone = TemplateDefault.bind({});
AvecIcone.args = {
    variant: 'default',
    category: '',
    categoryLink: '',
    lineClamp: '2',
    href: 'http://google.com',
    target: '_blank',
    icon: 'fa-file-pdf',
    categoryIcon: '',
};
Default.parameters = {
    docs: {
        description: {
            story: `
Liste par défaut avec items contenant titre long et description avec line-clamp à 2 lignes. Chaque item affiche une icône flèche droite et ouvre dans un nouvel onglet.

Cas d'usage : résultats de recherche, liste d'actualités, documents administratifs avec aperçu du contenu. Le line-clamp permet de garder une hauteur cohérente entre les items.
      `,
        },
    },
};
Category.parameters = {
    docs: {
        description: {
            story: `
Liste avec catégories affichées. Chaque item montre une catégorie avec icône (fa-file-signature) permettant de classifier les contenus. Line-clamp à 2 lignes pour titre et description.

Cas d'usage : liste de documents triés par type (formulaires, attestations, décisions), actualités catégorisées (emploi, environnement, mobilité), ressources organisées par thématique.
      `,
        },
    },
};
Shortcut.parameters = {
    docs: {
        description: {
            story: `
Variante shortcut avec line-clamp à 1 ligne et icône d'ouverture externe (fa-arrow-up-right-from-square). Format compact pour les accès rapides.

Cas d'usage : menu d'accès rapides sur homepage, liens vers services externes, raccourcis vers outils fréquemment utilisés. L'icône externe indique clairement l'ouverture dans un nouvel onglet.
      `,
        },
    },
};
SansIcone.parameters = {
    docs: {
        description: {
            story: `Liste sans icône de droite. Variante épurée quand l'icône n'apporte pas de valeur ajoutée. Cas d'usage : listes de contenu éditorial, résultats de recherche textuels, documents sans action directe.`,
        },
    },
};
SansDescription.parameters = {
    docs: {
        description: {
            story: `Liste avec titre uniquement, sans description. Format compact pour des items courts et explicites. Cas d'usage : répertoires de liens, menus de navigation, listes de fichiers simples.`,
        },
    },
};
AvecIcone.parameters = {
    docs: {
        description: {
            story: `Liste avec icône personnalisée (ici fa-file-pdf). L'icône renforce le type de contenu. Cas d'usage : liste de documents PDF, ressources téléchargeables, types de fichiers distincts.`,
        },
    },
};
export const ListeFichiers = () => {
    const element = document.createElement(elementTag);
    element.setAttribute('gap', 'large');
    element.style.maxWidth = '768px';
    element.style.width = '100%';
    element.innerHTML = /* HTML */ `
    <spw-list-item icon="" line-clamp="1">
      <spw-list-title>Formulaire urbanisme</spw-list-title>
      <spw-group slot="buttons" orientation="horizontal" is-full-width>
        <spw-button is-full-width-mobile variant="primary" icon-position="right" icon="fa-arrow-up-right-from-square" size="small">Remplir en ligne</spw-button>
        <spw-dropdown content-width="120" direction="bottom" has-padding="false">
          <spw-button is-full-width-mobile variant="secondary" icon-position="right" icon="fa-chevron-down" size="small">Télécharger</spw-button>
          <div slot="dropdownContent">
            <spw-dropdown-container><spw-link icon="fa-download" icon-position="left" download>PDF</spw-link></spw-dropdown-container>
            <spw-separator></spw-separator>
            <spw-dropdown-container><spw-link icon="fa-download" icon-position="left" download>DOC</spw-link></spw-dropdown-container>
          </div>
        </spw-dropdown>
      </spw-group>
    </spw-list-item>
    <spw-list-item icon="">
      <spw-list-title>Formulaire urbanisme</spw-list-title>
      <spw-group slot="buttons" orientation="horizontal" is-full-width>
        <spw-button is-full-width-mobile variant="primary" icon-position="right" icon="fa-arrow-up-right-from-square" size="small">Remplir en ligne</spw-button>
        <spw-button download is-full-width-mobile variant="secondary" size="small">Télécharger (PDF)</spw-button>
      </spw-group>
    </spw-list-item>
    <spw-list-item icon="">
      <spw-list-title>Formulaire urbanisme</spw-list-title>
      <spw-group slot="buttons" orientation="horizontal" is-full-width>
        <spw-button is-full-width-mobile variant="primary" icon-position="right" icon="fa-arrow-up-right-from-square" size="small">Remplir en ligne</spw-button>
      </spw-group>
    </spw-list-item>
    <spw-list-item icon="">
      <spw-list-title>Formulaire urbanisme</spw-list-title>
      <spw-group slot="buttons" orientation="horizontal" is-full-width>
        <spw-button download is-full-width-mobile variant="primary" icon-position="left" icon="fa-download" size="small">Télécharger</spw-button>
      </spw-group>
    </spw-list-item>
  `;
    return element;
};
ListeFichiers.parameters = {
    docs: {
        description: {
            story: `
Liste de fichiers avec boutons d'action. Illustre les différentes combinaisons possibles pour un item de formulaire :
- Item avec bouton primaire (remplir en ligne) et dropdown de téléchargement multi-formats (PDF, DOC)
- Item avec bouton primaire (remplir en ligne) et bouton secondaire de téléchargement direct (PDF)
- Item avec bouton primaire uniquement (formulaire en ligne seulement)
- Item avec bouton de téléchargement unique

Cas d'usage : liste de formulaires administratifs combinant accès en ligne et téléchargement de documents.
      `,
        },
    },
};
export const ListeFichiersLight = () => {
    const wrapper = document.createElement('div');
    wrapper.innerHTML = /* HTML */ `
    <h3 class="spw-ds-typography-heading-03 mb-3">Formulaires à télécharger</h3>
    <spw-group type="links" orientation="vertical" alignment="left">
      <spw-link download variant="tertiary" icon-position="left" icon="fa-download">Mon fichier à télécharger</spw-link>
      <spw-link download variant="tertiary" icon-position="left" icon="fa-download">Mon fichier à télécharger</spw-link>
      <spw-link download variant="tertiary" icon-position="left" icon="fa-download">Mon fichier à télécharger</spw-link>
    </spw-group>

    <h3 class="spw-ds-typography-heading-03 mb-3 mt-4">Formulaires en ligne</h3>
    <spw-group type="links" orientation="vertical" alignment="left">
      <spw-link target="_blank" variant="tertiary" icon-position="right" icon="fa-arrow-up-right-from-square">Mon lien externe</spw-link>
      <spw-link target="_blank" variant="tertiary" icon-position="right" icon="fa-arrow-up-right-from-square">Mon lien externe</spw-link>
      <spw-link target="_blank" variant="tertiary" icon-position="right" icon="fa-arrow-up-right-from-square">Mon lien externe</spw-link>
    </spw-group>
  `;
    return wrapper;
};
ListeFichiersLight.parameters = {
    docs: {
        description: {
            story: `
Version light pour lister des fichiers ou liens sans le composant spw-list. Utilise spw-group avec type="links" et spw-link en variante tertiaire.

Deux déclinaisons :
- **Formulaires à télécharger** : icône fa-download à gauche, attribut download
- **Formulaires en ligne** : icône fa-arrow-up-right-from-square à droite, target="_blank"

Cas d'usage : liste simple de liens sans besoin de mise en valeur structurée, zones secondaires d'une page, listes compactes dans des colonnes ou encarts.
      `,
        },
    },
};
