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

Les onglets sont utilisés pour organiser le contenu associé dans une interface. Ils permettent de naviguer entre différentes sections de contenu sans quitter la page, en affichant une seule section à la fois.

## Structure

Le composant se compose de quatre parties :
- **spw-tabs** : Le conteneur principal qui gère l'état et la logique
- **spw-tabs-navigation** : Contient la liste des onglets cliquables
- **spw-tabs-navigation-item** : Chaque onglet individuel avec son label
- **spw-tabs-content** : Le contenu associé à chaque onglet

## Variants disponibles

- **Default** : Style par défaut avec bordure inférieure
- **Box** : Style avec fond et bordures complètes

## Fonctionnalités

- Navigation par clic entre les onglets
- Support des onglets désactivés
- Notifications visuelles (bubbles) sur les onglets
- Tronquer du texte avec tooltip si nécessaire
- Support des onglets imbriqués (multi-niveaux)
- Navigation au clavier accessible
- Émission d'événement lors du changement d'onglet

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/857780-onglets)
        `,
            },
        },
    },
};
export default meta;
function htmlContentWithTag(slotArgs) {
    return /* HTML */ `
    <spw-tabs-navigation slot="navigation">
      <spw-tabs-navigation-item tab-id="1">Onglet 1</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="2" tag-text="${slotArgs.tagText}" tag-variant="${slotArgs.tagVariant}">Onglet 2</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="3" tag-text="Nouveau" tag-variant="blue">Onglet 3</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="4" tag-text="12" tag-variant="orange">Onglet 4</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="5" tag-text="Erreur" tag-variant="red">Onglet 5</spw-tabs-navigation-item>
      <spw-tabs-navigation-item disabled="true" tab-id="6" tag-text="Désactivé" tag-variant="grey">Onglet 6</spw-tabs-navigation-item>
    </spw-tabs-navigation>

    <div slot="content">
      <spw-tabs-content tab-id="1"><div class="pt-3">Contenu 1</div></spw-tabs-content>
      <spw-tabs-content tab-id="2"><div class="pt-3">Contenu 2</div></spw-tabs-content>
      <spw-tabs-content tab-id="3"><div class="pt-3">Contenu 3</div></spw-tabs-content>
      <spw-tabs-content tab-id="4"><div class="pt-3">Contenu 4</div></spw-tabs-content>
      <spw-tabs-content tab-id="5"><div class="pt-3">Contenu 5</div></spw-tabs-content>
      <spw-tabs-content tab-id="6"><div class="pt-3">Contenu 6</div></spw-tabs-content>
    </div>
  `;
}
function htmlContentWithTagAndIcon(_slotArgs) {
    return /* HTML */ `
    <spw-tabs-navigation slot="navigation">
      <spw-tabs-navigation-item tab-id="1">Onglet 1</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="2" tag-text="Info" tag-variant="blue" tag-icon="true">Onglet 2</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="3" tag-text="OK" tag-variant="green" tag-icon="true">Onglet 3</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="4" tag-text="Alerte" tag-variant="orange" tag-icon="true">Onglet 4</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="5" tag-text="Erreur" tag-variant="red" tag-icon="true">Onglet 5</spw-tabs-navigation-item>
    </spw-tabs-navigation>

    <div slot="content">
      <spw-tabs-content tab-id="1"><div class="pt-3">Contenu 1</div></spw-tabs-content>
      <spw-tabs-content tab-id="2"><div class="pt-3">Contenu 2</div></spw-tabs-content>
      <spw-tabs-content tab-id="3"><div class="pt-3">Contenu 3</div></spw-tabs-content>
      <spw-tabs-content tab-id="4"><div class="pt-3">Contenu 4</div></spw-tabs-content>
      <spw-tabs-content tab-id="5"><div class="pt-3">Contenu 5</div></spw-tabs-content>
    </div>
  `;
}
function htmlContentDefault(slotArgs) {
    return /* HTML */ `
    <spw-tabs-navigation slot="navigation">
      <spw-tabs-navigation-item tab-id="1">Onglet 1</spw-tabs-navigation-item>
      <spw-tabs-navigation-item disabled="${slotArgs.disabled}" tab-id="2">Onglet 2</spw-tabs-navigation-item>
      <spw-tabs-navigation-item bubble="${slotArgs.bubble}" tab-id="3">Onglet 3</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="4">Onglet 4</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="5">Onglet 5</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="6">Onglet 6</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="7">Onglet 7</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="8">Onglet 8</spw-tabs-navigation-item>
    </spw-tabs-navigation>

    <div slot="content">
      <spw-tabs-content tab-id="1"><div class="pt-3">Contenu 1</div></spw-tabs-content>
      <spw-tabs-content tab-id="2"><div class="pt-3">Contenu 2</div></spw-tabs-content>
      <spw-tabs-content tab-id="3"><div class="pt-3">Contenu 3</div></spw-tabs-content>
      <spw-tabs-content tab-id="4"><div class="pt-3">Contenu 4</div></spw-tabs-content>
      <spw-tabs-content tab-id="5"><div class="pt-3">Contenu 5</div></spw-tabs-content>
      <spw-tabs-content tab-id="6"><div class="pt-3">Contenu 6</div></spw-tabs-content>
      <spw-tabs-content tab-id="7"><div class="pt-3">Contenu 7</div></spw-tabs-content>
      <spw-tabs-content tab-id="8"><div class="pt-3">Contenu 8</div></spw-tabs-content>
    </div>
  `;
}
function htmlContentBox(slotArgs) {
    return /* HTML */ `
    <spw-tabs-navigation slot="navigation">
      <spw-tabs-navigation-item tab-id="1">Onglet 1</spw-tabs-navigation-item>
      <spw-tabs-navigation-item disabled="${slotArgs.disabled}" tab-id="2">Onglet 2</spw-tabs-navigation-item>
      <spw-tabs-navigation-item bubble="${slotArgs.bubble}" tab-id="3">Onglet 3</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="4">Onglet 4</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="5">Onglet 5</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="6">Onglet 6</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="7">Onglet 7</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="8">Onglet 8</spw-tabs-navigation-item>
    </spw-tabs-navigation>

    <div slot="content">
      <spw-tabs-content tab-id="1"><div class="p-3">Contenu 1</div></spw-tabs-content>
      <spw-tabs-content tab-id="2"><div class="p-3">Contenu 2</div></spw-tabs-content>
      <spw-tabs-content tab-id="3"><div class="p-3">Contenu 3</div></spw-tabs-content>
      <spw-tabs-content tab-id="4"><div class="p-3">Contenu 4</div></spw-tabs-content>
      <spw-tabs-content tab-id="5"><div class="p-3">Contenu 5</div></spw-tabs-content>
      <spw-tabs-content tab-id="6"><div class="p-3">Contenu 6</div></spw-tabs-content>
      <spw-tabs-content tab-id="7"><div class="p-3">Contenu 7</div></spw-tabs-content>
      <spw-tabs-content tab-id="8"><div class="p-3">Contenu 8</div></spw-tabs-content>
    </div>
  `;
}
function htmlContentMultiLevel(slotArgs) {
    return /* HTML */ `
    <spw-tabs-navigation slot="navigation">
      <spw-tabs-navigation-item tab-id="1">Onglet 1</spw-tabs-navigation-item>
      <spw-tabs-navigation-item disabled="${slotArgs.disabled}" tab-id="2">Onglet 2</spw-tabs-navigation-item>
      <spw-tabs-navigation-item bubble="${slotArgs.bubble}" tab-id="3">Onglet 3</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="4">Onglet 4</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="5">Onglet 5</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="6">Onglet 6</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="7">Onglet 7</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="8">Onglet 8</spw-tabs-navigation-item>
    </spw-tabs-navigation>

    <div slot="content">
      <spw-tabs-content tab-id="1">
        <div class="p-3">
          <spw-tabs default-active-tab="1">
            <spw-tabs-navigation slot="navigation">
              <spw-tabs-navigation-item tab-id="1">Onglet 1</spw-tabs-navigation-item>
              <spw-tabs-navigation-item disabled="true" tab-id="2">Onglet 2</spw-tabs-navigation-item>
              <spw-tabs-navigation-item bubble="true" tab-id="3">Onglet 3</spw-tabs-navigation-item>
              <spw-tabs-navigation-item tab-id="4">Onglet 4</spw-tabs-navigation-item>
              <spw-tabs-navigation-item tab-id="5">Onglet 5</spw-tabs-navigation-item>
              <spw-tabs-navigation-item tab-id="6">Onglet 6</spw-tabs-navigation-item>
              <spw-tabs-navigation-item tab-id="7">Onglet 7</spw-tabs-navigation-item>
              <spw-tabs-navigation-item tab-id="8">Onglet 8</spw-tabs-navigation-item>
            </spw-tabs-navigation>

            <div slot="content">
              <spw-tabs-content tab-id="1"><div class="pt-3">Contenu 1</div></spw-tabs-content>
              <spw-tabs-content tab-id="2"><div class="pt-3">Contenu 2</div></spw-tabs-content>
              <spw-tabs-content tab-id="3"><div class="pt-3">Contenu 3</div></spw-tabs-content>
              <spw-tabs-content tab-id="4"><div class="pt-3">Contenu 4</div></spw-tabs-content>
              <spw-tabs-content tab-id="5"><div class="pt-3">Contenu 5</div></spw-tabs-content>
              <spw-tabs-content tab-id="6"><div class="pt-3">Contenu 6</div></spw-tabs-content>
              <spw-tabs-content tab-id="7"><div class="pt-3">Contenu 7</div></spw-tabs-content>
              <spw-tabs-content tab-id="8"><div class="pt-3">Contenu 8</div></spw-tabs-content>
            </div>
          </spw-tabs>
        </div>
      </spw-tabs-content>
      <spw-tabs-content tab-id="2"><div class="p-3">Contenu 2</div></spw-tabs-content>
      <spw-tabs-content tab-id="3"><div class="p-3">Contenu 3</div></spw-tabs-content>
      <spw-tabs-content tab-id="4"><div class="p-3">Contenu 4</div></spw-tabs-content>
      <spw-tabs-content tab-id="5"><div class="p-3">Contenu 5</div></spw-tabs-content>
      <spw-tabs-content tab-id="6"><div class="p-3">Contenu 6</div></spw-tabs-content>
      <spw-tabs-content tab-id="7"><div class="p-3">Contenu 7</div></spw-tabs-content>
      <spw-tabs-content tab-id="8"><div class="p-3">Contenu 8</div></spw-tabs-content>
    </div>
  `;
}
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;
};
const TemplateBox = 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 = htmlContentBox(args);
    return element;
};
const TemplateMultiLevel = 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 = htmlContentMultiLevel(args);
    return element;
};
export const Default = TemplateDefault.bind({});
Default.args = {
    disabled: true,
    bubble: true,
    defaultActiveTab: '1',
};
Default.parameters = {
    docs: {
        description: {
            story: `
Exemple d'onglets avec le style par défaut. Cette story démontre plusieurs fonctionnalités : un onglet désactivé (Onglet 2), un onglet avec notification bubble (Onglet 3), et 8 onglets au total pour montrer le comportement avec beaucoup d'items.

Cas d'usage : navigation entre différentes sections d'un formulaire, d'un profil utilisateur, ou de paramètres. Le style default convient aux interfaces légères et épurées.
      `,
        },
    },
};
export const Box = TemplateBox.bind({});
Box.args = {
    disabled: true,
    bubble: true,
    defaultActiveTab: '1',
    variant: 'box',
};
Box.parameters = {
    docs: {
        description: {
            story: `
Variante "box" avec un fond et des bordures complètes autour du contenu. Ce style offre une séparation visuelle plus marquée entre les onglets et le contenu.

Cas d'usage : interfaces nécessitant une meilleure distinction visuelle, dashboards, ou sections de contenu nécessitant une mise en valeur particulière. Le padding interne du contenu crée un espacement confortable.
      `,
        },
    },
};
export const MultiLevel = TemplateMultiLevel.bind({});
MultiLevel.args = {
    disabled: true,
    bubble: true,
    defaultActiveTab: '1',
    variant: 'box',
};
MultiLevel.parameters = {
    docs: {
        description: {
            story: `
Démonstration d'onglets imbriqués (multi-niveaux). Le premier onglet contient lui-même un système d'onglets complet, permettant une navigation hiérarchique complexe.

Cas d'usage : interfaces avancées nécessitant plusieurs niveaux de navigation (ex: configuration système avec catégories et sous-catégories). À utiliser avec précaution pour éviter de surcharger l'interface utilisateur.
      `,
        },
    },
};
const TemplateWithTag = 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 = htmlContentWithTag(args);
    return element;
};
const TemplateWithTagAndIcon = 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 = htmlContentWithTagAndIcon(args);
    return element;
};
export const WithTag = TemplateWithTag.bind({});
WithTag.storyName = 'With Tags';
WithTag.args = {
    defaultActiveTab: '1',
    tagText: 'Beta',
    tagVariant: 'purple',
};
WithTag.parameters = {
    docs: {
        description: {
            story: `
Onglets avec des tags colorés pour indiquer un statut ou attirer l'attention. Les propriétés tag-text et tag-variant sont disponibles sur chaque spw-tabs-navigation-item.

Variantes disponibles pour tag-variant : default, grey, blue, green, orange, red, purple.

Cas d'usage : indiquer un statut (nouveau, erreur, alerte), afficher un compteur de notifications, ou signaler une fonctionnalité en beta.
      `,
        },
    },
};
export const WithTagAndIcon = TemplateWithTagAndIcon.bind({});
WithTagAndIcon.storyName = 'With Tags & Icons';
WithTagAndIcon.args = {
    defaultActiveTab: '1',
};
WithTagAndIcon.parameters = {
    docs: {
        description: {
            story: `
Onglets avec des tags incluant une icône grâce à la propriété tag-icon="true". L'icône est automatiquement choisie selon la variante du tag.

Cas d'usage : renforcer la signification du statut avec une icône visuelle (ex: coche verte pour "OK", croix rouge pour "Erreur").
      `,
        },
    },
};
function htmlContentCentered(_slotArgs) {
    return /* HTML */ `
    <spw-tabs-navigation slot="navigation" is-centered="true">
      <spw-tabs-navigation-item tab-id="1">Accueil</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="2">Profil</spw-tabs-navigation-item>
      <spw-tabs-navigation-item tab-id="3">Paramètres</spw-tabs-navigation-item>
    </spw-tabs-navigation>

    <div slot="content">
      <spw-tabs-content tab-id="1"><div class="pt-3">Contenu de la page d'accueil</div></spw-tabs-content>
      <spw-tabs-content tab-id="2"><div class="pt-3">Contenu du profil utilisateur</div></spw-tabs-content>
      <spw-tabs-content tab-id="3"><div class="pt-3">Contenu des paramètres</div></spw-tabs-content>
    </div>
  `;
}
const TemplateCentered = 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 = htmlContentCentered(args);
    return element;
};
export const Centered = TemplateCentered.bind({});
Centered.storyName = 'Centered';
Centered.args = {
    defaultActiveTab: '1',
};
Centered.parameters = {
    docs: {
        description: {
            story: `
Onglets centrés horizontalement grâce à la propriété is-centered="true" sur le composant spw-tabs-navigation.

Le centrage est automatiquement désactivé lorsque les onglets dépassent la largeur disponible (overflow), permettant ainsi le défilement horizontal avec les flèches de navigation.

Cas d'usage : navigation principale centrée, interfaces symétriques, ou lorsque le nombre d'onglets est limité et doit être mis en valeur visuellement.
      `,
        },
        source: {
            code: `<spw-tabs default-active-tab="1">
  <spw-tabs-navigation slot="navigation" is-centered="true">
    <spw-tabs-navigation-item tab-id="1">Accueil</spw-tabs-navigation-item>
    <spw-tabs-navigation-item tab-id="2">Profil</spw-tabs-navigation-item>
    <spw-tabs-navigation-item tab-id="3">Paramètres</spw-tabs-navigation-item>
  </spw-tabs-navigation>

  <div slot="content">
    <spw-tabs-content tab-id="1">Contenu de la page d'accueil</spw-tabs-content>
    <spw-tabs-content tab-id="2">Contenu du profil utilisateur</spw-tabs-content>
    <spw-tabs-content tab-id="3">Contenu des paramètres</spw-tabs-content>
  </div>
</spw-tabs>`,
        },
    },
};
