npm - @spw-ds/spw-stencil-library - Versions diffs - 1.3.0 → 1.3.2 - Mend

@spw-ds/spw-stencil-library 1.3.0 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (782) hide show

package/dist/collection/stories/organisms/spw-table/spw-table.stories.js CHANGED Viewed

@@ -21,7 +21,33 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-Affiche toutes les informations d’un ensemble de données.
+Le composant Tableau permet d'afficher et d'organiser efficacement de grandes quantités de données structurées. Il offre des fonctionnalités avancées de tri, filtrage et pagination pour faciliter la consultation et l'analyse des informations.
+## Structure
+Le composant se compose de six parties :
+- **spw-table** : Le conteneur principal du tableau
+- **spw-table-head** : En-tête du tableau
+- **spw-table-header** : Cellule d'en-tête (colonnes)
+- **spw-table-body** : Corps du tableau contenant les données
+- **spw-table-row** : Ligne de données
+- **spw-table-cell** : Cellule de données
+- **spw-table-footer** : Pied de tableau pour pagination/infos
+## Fonctionnalités
+- Tri des colonnes avec indicateurs visuels
+- Pagination intégrée
+- Lignes sélectionnables avec checkboxes
+- Support des états de ligne (sélection, désactivation)
+- Filtres personnalisés par colonne via dropdown
+- Actions contextuelles par ligne
+- Support des tags et statuts
+- Mode compact avec padding réduit
+- Sticky header pour grands tableaux
+- Skeleton loading pour chargement asynchrone
+- Responsive avec scroll horizontal
+- Accessibilité complète avec scope et aria
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/90a77b-tableau)
         `,
@@ -94,6 +120,13 @@ Base.args = {
     </spw-table-body>
   `,
 };
+Base.parameters = {
+    docs: {
+        description: {
+            story: `Tableau de base simple avec en-tête et plusieurs lignes de données. Exemple minimaliste pour afficher des données tabulaires sans fonctionnalités avancées.`,
+        },
+    },
+};
 export const StickyTableWithMaxHeight = Template.bind({});
 StickyTableWithMaxHeight.args = {
     maxHeight: '225',
@@ -101,6 +134,13 @@ StickyTableWithMaxHeight.args = {
     isSticky: true,
     innerHTML: Base.args.innerHTML,
 };
+StickyTableWithMaxHeight.parameters = {
+    docs: {
+        description: {
+            story: `Tableau avec en-tête fixe (sticky) et hauteur maximale. L'en-tête reste visible lors du scroll vertical, pratique pour les longs tableaux. Idéal pour améliorer la lisibilité des données volumineuses.`,
+        },
+    },
+};
 export const ZebraTableWithSorting = Template.bind({});
 ZebraTableWithSorting.args = {
     isZebra: true,
@@ -136,6 +176,13 @@ ZebraTableWithSorting.args = {
     </spw-table-body>
   `,
 };
+ZebraTableWithSorting.parameters = {
+    docs: {
+        description: {
+            story: `Tableau avec lignes alternées (zebra) et tri sur colonnes. Cliquer sur un en-tête de colonne pour trier les données. Les rayures facilitent la lecture horizontale des lignes.`,
+        },
+    },
+};
 export const TableWithActionsAndTags = Template.bind({});
 TableWithActionsAndTags.args = {
     isZebra: true,
@@ -275,6 +322,13 @@ TableWithActionsAndTags.args = {
     </spw-table-footer>
   `,
 };
+TableWithActionsAndTags.parameters = {
+    docs: {
+        description: {
+            story: `Tableau complexe avec sélection, filtres, actions et tags. Démontre toutes les fonctionnalités avancées : checkboxes de sélection, tooltips d'info, filtres par colonne, boutons d'actions, états de ligne (sélectionnée/désactivée), tags de statut et pagination complète. Idéal pour backoffices et interfaces d'administration.`,
+        },
+    },
+};
 export const CompactTable = Template.bind({});
 CompactTable.args = {
     isZebra: true,
@@ -310,6 +364,13 @@ CompactTable.args = {
     </spw-table-body>
   `,
 };
+CompactTable.parameters = {
+    docs: {
+        description: {
+            story: `Tableau compact avec padding réduit (small). Idéal pour afficher plus de données dans un espace réduit tout en conservant la lisibilité. Parfait pour les dashboards ou interfaces nécessitant une vue densifiée.`,
+        },
+    },
+};
 export const LoadingWithSkeleton = Template.bind({});
 LoadingWithSkeleton.args = {
     isZebra: true,
@@ -429,4 +490,11 @@ LoadingWithSkeleton.args = {
     </spw-table-footer>
   `,
 };
+LoadingWithSkeleton.parameters = {
+    docs: {
+        description: {
+            story: `Tableau avec état de chargement utilisant des skeletons. Les placeholders animés simulent le chargement des données pour améliorer l'expérience utilisateur pendant les requêtes asynchrones. Évite les sauts de layout et rassure l'utilisateur pendant l'attente.`,
+        },
+    },
+};
 //# sourceMappingURL=spw-table.stories.js.map

package/dist/collection/stories/organisms/spw-table/spw-table.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-table.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-table/spw-table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes } from '@utils/utils';\n\nlet componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nconst elementTag = 'spw-table';\n\nconst subComponentTags = ['spw-table-body', 'spw-table-cell', 'spw-table-footer', 'spw-table-header', 'spw-table-head', 'spw-table-row'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n innerHTML: { table: { disable: true } },\n};\n\nconst meta: Meta = {\n title: 'Organismes/Tableau',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nAffiche toutes les informations d’un ensemble de données.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/90a77b-tableau)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction camelToKebab(str: string) {\n return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n const kebabKey = camelToKebab(key);\n element.setAttribute(kebabKey, val);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = args.innerHTML \|\| '';\n return element;\n};\n\nexport const Base: StoryFn = Template.bind({});\nBase.args = {\n innerHTML: `\n <spw-table-head>\n <spw-table-row>\n <spw-table-header scope=\"col\">Header 1</spw-table-header>\n <spw-table-header scope=\"col\">Header 2</spw-table-header>\n <spw-table-header scope=\"col\">Header 3</spw-table-header>\n <spw-table-header scope=\"col\">Header 4</spw-table-header>\n </spw-table-row>\n </spw-table-head>\n <spw-table-body>\n <spw-table-row>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n </spw-table-row>\n </spw-table-body>\n `,\n};\n\nexport const StickyTableWithMaxHeight: StoryFn = Template.bind({});\nStickyTableWithMaxHeight.args = {\n maxHeight: '225',\n minWidth: '800',\n isSticky: true,\n innerHTML: Base.args.innerHTML,\n};\n\nexport const ZebraTableWithSorting: StoryFn = Template.bind({});\nZebraTableWithSorting.args = {\n isZebra: true,\n innerHTML: `\n <spw-table-head>\n <spw-table-row>\n <spw-table-header column-id=\"name\" sortable scope=\"col\">Nom</spw-table-header>\n <spw-table-header column-id=\"age\" sortable scope=\"col\">Âge</spw-table-header>\n <spw-table-header column-id=\"city\" sortable scope=\"col\">Ville</spw-table-header>\n </spw-table-row>\n </spw-table-head>\n <spw-table-body>\n <spw-table-row>\n <spw-table-cell>Zoé</spw-table-cell>\n <spw-table-cell>28</spw-table-cell>\n <spw-table-cell>Charleroi</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell>Arthur</spw-table-cell>\n <spw-table-cell>35</spw-table-cell>\n <spw-table-cell>Namur</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell>Micheline</spw-table-cell>\n <spw-table-cell>17</spw-table-cell>\n <spw-table-cell>Liège</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell>André</spw-table-cell>\n <spw-table-cell>84</spw-table-cell>\n <spw-table-cell>Tournai</spw-table-cell>\n </spw-table-row>\n </spw-table-body>\n `,\n};\n\nexport const TableWithActionsAndTags: StoryFn = Template.bind({});\nTableWithActionsAndTags.args = {\n isZebra: true,\n innerHTML: `\n <spw-table-head>\n <spw-table-row>\n <spw-table-header width=\"20\" scope=\"col\">\n <spw-checkbox></spw-checkbox>\n </spw-table-header>\n <spw-table-header tooltip-title=\"Information\" tooltip-text=\"Ceci est une phrase d'exemple\" column-id=\"name\" sortable scope=\"col\">\n Nom\n <spw-dropdown slot=\"filters\" content-width=\"360\" direction=\"bottom\">\n <spw-icon icon=\"fa-filter\">\n <div slot=\"dropdownContent\">\n <h3 class=\"spw-ds-typography-heading-03\">Filtrer la colonne nom</h3>\n <form>\n <spw-text-field\n required\n size=\"small\"\n max-length=\"100\"\n min-length=\"3\"\n label=\"Champ texte\"\n type=\"text\"\n placeholder=\"Entrez un texte\"\n name=\"firstname\"\n class=\"mb-2\"\n ></spw-text-field>\n <spw-custom-select\n label=\"Mon label\"\n placeholder=\"Sélectionnez une option\"\n name=\"mon-super-select\"\n required=\"true\"\n multiple=\"true\"\n id=\"mon-custom-select-dynamique\"\n is-search=\"true\"\n class=\"mb-3\"\n ></spw-custom-select>\n <spw-group label=\"Des choix horizontaux\" required=\"true\" type=\"radios\" orientation=\"horizontal\">\n <spw-radio name=\"radio1\" value=\"option1\">Un input radio</spw-radio>\n <spw-radio name=\"radio1\" value=\"option2\">Un input radio</spw-radio>\n </spw-group>\n </form>\n <spw-group orientation=\"vertical\" is-full-width>\n <spw-button class=\"mt-3\" is-full-width variant=\"primary\" size=\"small\">Appliquer</spw-button>\n </spw-group>\n </div>\n </spw-icon>\n </spw-dropdown>\n </spw-table-header>\n <spw-table-header column-id=\"age\" sortable scope=\"col\">Âge</spw-table-header>\n <spw-table-header column-id=\"status\" sortable scope=\"col\">Statut</spw-table-header>\n <spw-table-header text-align=\"center\" scope=\"col\">Actions</spw-table-header>\n </spw-table-row>\n </spw-table-head>\n <spw-table-body>\n <spw-table-row>\n <spw-table-cell width=\"20\"><spw-checkbox></spw-checkbox></spw-table-cell>\n <spw-table-cell>Zoé</spw-table-cell>\n <spw-table-cell>28</spw-table-cell>\n <spw-table-cell width=\"40\"><spw-tag size=\"small\" variant=\"green\">Validé</spw-tag></spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <div class=\"d-flex\">\n <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-trash\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-edit\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n <spw-dropdown direction=\"left\">\n <spw-button icon=\"fa-ellipsis-vertical\" is-icon-only=\"true\" size=\"small\" variant=\"secondary\" class=\"mx-1\">\n <div slot=\"dropdownContent\">\n <spw-group orientation=\"vertical\" is-full-width>\n <spw-button is-full-width variant=\"secondary\" size=\"small\">Modifier</spw-button>\n <spw-button is-full-width variant=\"secondary\" size=\"small\">Supprimer</spw-button>\n </spw-group>\n </div>\n </spw-button>\n </spw-dropdown>\n </div>\n </spw-table-cell>\n </spw-table-row>\n <spw-table-row state=\"disabled\">\n <spw-table-cell width=\"20\"><spw-checkbox disabled=\"true\"></spw-checkbox></spw-table-cell>\n <spw-table-cell>Marie</spw-table-cell>\n <spw-table-cell>22</spw-table-cell>\n <spw-table-cell width=\"40\"><spw-tag size=\"small\" variant=\"green\">Validé</spw-tag></spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <div class=\"d-flex\">\n <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-trash\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-edit\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n <spw-dropdown direction=\"left\">\n <spw-button icon=\"fa-ellipsis-vertical\" is-icon-only=\"true\" size=\"small\" variant=\"secondary\" class=\"mx-1\">\n <div slot=\"dropdownContent\">\n <spw-group orientation=\"vertical\" is-full-width>\n <spw-button is-full-width variant=\"secondary\" size=\"small\">Modifier</spw-button>\n <spw-button is-full-width variant=\"secondary\" size=\"small\">Supprimer</spw-button>\n </spw-group>\n </div>\n </spw-button>\n </spw-dropdown>\n </div>\n </spw-table-cell>\n </spw-table-row>\n <spw-table-row state=\"selected\">\n <spw-table-cell width=\"20\"><spw-checkbox checked=\"true\"></spw-checkbox></spw-table-cell>\n <spw-table-cell>Thomas</spw-table-cell>\n <spw-table-cell>37</spw-table-cell>\n <spw-table-cell width=\"40\"><spw-tag size=\"small\" variant=\"green\">Validé</spw-tag></spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <div class=\"d-flex\">\n <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-trash\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-edit\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n <spw-dropdown direction=\"left\">\n <spw-button icon=\"fa-ellipsis-vertical\" is-icon-only=\"true\" size=\"small\" variant=\"secondary\" class=\"mx-1\">\n <div slot=\"dropdownContent\">\n <spw-group orientation=\"vertical\" is-full-width>\n <spw-button is-full-width variant=\"secondary\" size=\"small\">Modifier</spw-button>\n <spw-button is-full-width variant=\"secondary\" size=\"small\">Supprimer</spw-button>\n </spw-group>\n </div>\n </spw-button>\n </spw-dropdown>\n </div>\n </spw-table-cell>\n </spw-table-row>\n </spw-table-body>\n <spw-table-footer>\n <div slot=\"left\">1-10 sur 9999 éléments</div>\n <div slot=\"center\">\n <spw-pagination class=\"spw-pagination\" variant=\"numbers\" total-items=\"30\" items-per-page=\"10\"></spw-pagination>\n </div>\n <div slot=\"right\">\n <spw-select placeholder=\"N°\" name=\"mon-select-natif\" size=\"medium\">\n <option selected value=\"10\">10</option>\n <option value=\"20\">20</option>\n <option value=\"30\">30</option>\n <option value=\"40\">40</option>\n </spw-select>\n éléments par page\n </div>\n </spw-table-footer>\n `,\n};\n\nexport const CompactTable: StoryFn = Template.bind({});\nCompactTable.args = {\n isZebra: true,\n innerHTML: `\n <spw-table-head>\n <spw-table-row>\n <spw-table-header padding=\"small\" column-id=\"name\" sortable scope=\"col\">Nom</spw-table-header>\n <spw-table-header padding=\"small\" column-id=\"age\" sortable scope=\"col\">Âge</spw-table-header>\n <spw-table-header padding=\"small\" column-id=\"city\" sortable scope=\"col\">Ville</spw-table-header>\n </spw-table-row>\n </spw-table-head>\n <spw-table-body>\n <spw-table-row>\n <spw-table-cell padding=\"small\">Zoé</spw-table-cell>\n <spw-table-cell padding=\"small\">28</spw-table-cell>\n <spw-table-cell padding=\"small\">Charleroi</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell padding=\"small\">Arthur</spw-table-cell>\n <spw-table-cell padding=\"small\">35</spw-table-cell>\n <spw-table-cell padding=\"small\">Namur</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell padding=\"small\">Micheline</spw-table-cell>\n <spw-table-cell padding=\"small\">17</spw-table-cell>\n <spw-table-cell padding=\"small\">Liège</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell padding=\"small\">André</spw-table-cell>\n <spw-table-cell padding=\"small\">84</spw-table-cell>\n <spw-table-cell padding=\"small\">Tournai</spw-table-cell>\n </spw-table-row>\n </spw-table-body>\n `,\n};\n\nexport const LoadingWithSkeleton: StoryFn = Template.bind({});\nLoadingWithSkeleton.args = {\n isZebra: true,\n innerHTML: `\n <spw-table-head>\n <spw-table-row>\n <spw-table-header width=\"20\" scope=\"col\">\n <spw-checkbox></spw-checkbox>\n </spw-table-header>\n <spw-table-header column-id=\"name\" sortable scope=\"col\">Nom</spw-table-header>\n <spw-table-header column-id=\"age\" sortable scope=\"col\">Âge</spw-table-header>\n <spw-table-header column-id=\"status\" scope=\"col\">Statut</spw-table-header>\n <spw-table-header text-align=\"center\" scope=\"col\">Actions</spw-table-header>\n </spw-table-row>\n </spw-table-head>\n <spw-table-body>\n <spw-table-row>\n <spw-table-cell width=\"20\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell width=\"40\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell width=\"20\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell width=\"40\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell width=\"20\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell width=\"40\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell width=\"20\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell width=\"40\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell width=\"20\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell width=\"40\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n </spw-table-row>\n </spw-table-body>\n <spw-table-footer>\n <div slot=\"left\">Chargement en cours...</div>\n <div slot=\"center\">\n <spw-pagination class=\"spw-pagination\" variant=\"numbers\" total-items=\"30\" items-per-page=\"10\"></spw-pagination>\n </div>\n <div slot=\"right\">\n <spw-select placeholder=\"N°\" name=\"mon-select-natif\" size=\"medium\">\n <option selected value=\"10\">10</option>\n <option value=\"20\">20</option>\n <option value=\"30\">30</option>\n <option value=\"40\">40</option>\n </spw-select>\n éléments par page\n </div>\n </spw-table-footer>\n `,\n};\n"]}
1	+ {"version":3,"file":"spw-table.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-table/spw-table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes } from '@utils/utils';\n\nlet componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nconst elementTag = 'spw-table';\n\nconst subComponentTags = ['spw-table-body', 'spw-table-cell', 'spw-table-footer', 'spw-table-header', 'spw-table-head', 'spw-table-row'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n innerHTML: { table: { disable: true } },\n};\n\nconst meta: Meta = {\n title: 'Organismes/Tableau',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLe composant Tableau permet d'afficher et d'organiser efficacement de grandes quantités de données structurées. Il offre des fonctionnalités avancées de tri, filtrage et pagination pour faciliter la consultation et l'analyse des informations.\n\n## Structure\n\nLe composant se compose de six parties :\n- spw-table : Le conteneur principal du tableau\n- spw-table-head : En-tête du tableau\n- spw-table-header : Cellule d'en-tête (colonnes)\n- spw-table-body : Corps du tableau contenant les données\n- spw-table-row : Ligne de données\n- spw-table-cell : Cellule de données\n- spw-table-footer : Pied de tableau pour pagination/infos\n\n## Fonctionnalités\n\n- Tri des colonnes avec indicateurs visuels\n- Pagination intégrée\n- Lignes sélectionnables avec checkboxes\n- Support des états de ligne (sélection, désactivation)\n- Filtres personnalisés par colonne via dropdown\n- Actions contextuelles par ligne\n- Support des tags et statuts\n- Mode compact avec padding réduit\n- Sticky header pour grands tableaux\n- Skeleton loading pour chargement asynchrone\n- Responsive avec scroll horizontal\n- Accessibilité complète avec scope et aria\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/90a77b-tableau)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction camelToKebab(str: string) {\n return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n const kebabKey = camelToKebab(key);\n element.setAttribute(kebabKey, val);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = args.innerHTML \|\| '';\n return element;\n};\n\nexport const Base: StoryFn = Template.bind({});\nBase.args = {\n innerHTML: `\n <spw-table-head>\n <spw-table-row>\n <spw-table-header scope=\"col\">Header 1</spw-table-header>\n <spw-table-header scope=\"col\">Header 2</spw-table-header>\n <spw-table-header scope=\"col\">Header 3</spw-table-header>\n <spw-table-header scope=\"col\">Header 4</spw-table-header>\n </spw-table-row>\n </spw-table-head>\n <spw-table-body>\n <spw-table-row>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n <spw-table-cell>Cellule</spw-table-cell>\n </spw-table-row>\n </spw-table-body>\n `,\n};\nBase.parameters = {\n docs: {\n description: {\n story: `Tableau de base simple avec en-tête et plusieurs lignes de données. Exemple minimaliste pour afficher des données tabulaires sans fonctionnalités avancées.`,\n },\n },\n};\n\nexport const StickyTableWithMaxHeight: StoryFn = Template.bind({});\nStickyTableWithMaxHeight.args = {\n maxHeight: '225',\n minWidth: '800',\n isSticky: true,\n innerHTML: Base.args.innerHTML,\n};\nStickyTableWithMaxHeight.parameters = {\n docs: {\n description: {\n story: `Tableau avec en-tête fixe (sticky) et hauteur maximale. L'en-tête reste visible lors du scroll vertical, pratique pour les longs tableaux. Idéal pour améliorer la lisibilité des données volumineuses.`,\n },\n },\n};\n\nexport const ZebraTableWithSorting: StoryFn = Template.bind({});\nZebraTableWithSorting.args = {\n isZebra: true,\n innerHTML: `\n <spw-table-head>\n <spw-table-row>\n <spw-table-header column-id=\"name\" sortable scope=\"col\">Nom</spw-table-header>\n <spw-table-header column-id=\"age\" sortable scope=\"col\">Âge</spw-table-header>\n <spw-table-header column-id=\"city\" sortable scope=\"col\">Ville</spw-table-header>\n </spw-table-row>\n </spw-table-head>\n <spw-table-body>\n <spw-table-row>\n <spw-table-cell>Zoé</spw-table-cell>\n <spw-table-cell>28</spw-table-cell>\n <spw-table-cell>Charleroi</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell>Arthur</spw-table-cell>\n <spw-table-cell>35</spw-table-cell>\n <spw-table-cell>Namur</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell>Micheline</spw-table-cell>\n <spw-table-cell>17</spw-table-cell>\n <spw-table-cell>Liège</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell>André</spw-table-cell>\n <spw-table-cell>84</spw-table-cell>\n <spw-table-cell>Tournai</spw-table-cell>\n </spw-table-row>\n </spw-table-body>\n `,\n};\nZebraTableWithSorting.parameters = {\n docs: {\n description: {\n story: `Tableau avec lignes alternées (zebra) et tri sur colonnes. Cliquer sur un en-tête de colonne pour trier les données. Les rayures facilitent la lecture horizontale des lignes.`,\n },\n },\n};\n\nexport const TableWithActionsAndTags: StoryFn = Template.bind({});\nTableWithActionsAndTags.args = {\n isZebra: true,\n innerHTML: `\n <spw-table-head>\n <spw-table-row>\n <spw-table-header width=\"20\" scope=\"col\">\n <spw-checkbox></spw-checkbox>\n </spw-table-header>\n <spw-table-header tooltip-title=\"Information\" tooltip-text=\"Ceci est une phrase d'exemple\" column-id=\"name\" sortable scope=\"col\">\n Nom\n <spw-dropdown slot=\"filters\" content-width=\"360\" direction=\"bottom\">\n <spw-icon icon=\"fa-filter\">\n <div slot=\"dropdownContent\">\n <h3 class=\"spw-ds-typography-heading-03\">Filtrer la colonne nom</h3>\n <form>\n <spw-text-field\n required\n size=\"small\"\n max-length=\"100\"\n min-length=\"3\"\n label=\"Champ texte\"\n type=\"text\"\n placeholder=\"Entrez un texte\"\n name=\"firstname\"\n class=\"mb-2\"\n ></spw-text-field>\n <spw-custom-select\n label=\"Mon label\"\n placeholder=\"Sélectionnez une option\"\n name=\"mon-super-select\"\n required=\"true\"\n multiple=\"true\"\n id=\"mon-custom-select-dynamique\"\n is-search=\"true\"\n class=\"mb-3\"\n ></spw-custom-select>\n <spw-group label=\"Des choix horizontaux\" required=\"true\" type=\"radios\" orientation=\"horizontal\">\n <spw-radio name=\"radio1\" value=\"option1\">Un input radio</spw-radio>\n <spw-radio name=\"radio1\" value=\"option2\">Un input radio</spw-radio>\n </spw-group>\n </form>\n <spw-group orientation=\"vertical\" is-full-width>\n <spw-button class=\"mt-3\" is-full-width variant=\"primary\" size=\"small\">Appliquer</spw-button>\n </spw-group>\n </div>\n </spw-icon>\n </spw-dropdown>\n </spw-table-header>\n <spw-table-header column-id=\"age\" sortable scope=\"col\">Âge</spw-table-header>\n <spw-table-header column-id=\"status\" sortable scope=\"col\">Statut</spw-table-header>\n <spw-table-header text-align=\"center\" scope=\"col\">Actions</spw-table-header>\n </spw-table-row>\n </spw-table-head>\n <spw-table-body>\n <spw-table-row>\n <spw-table-cell width=\"20\"><spw-checkbox></spw-checkbox></spw-table-cell>\n <spw-table-cell>Zoé</spw-table-cell>\n <spw-table-cell>28</spw-table-cell>\n <spw-table-cell width=\"40\"><spw-tag size=\"small\" variant=\"green\">Validé</spw-tag></spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <div class=\"d-flex\">\n <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-trash\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-edit\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n <spw-dropdown direction=\"left\">\n <spw-button icon=\"fa-ellipsis-vertical\" is-icon-only=\"true\" size=\"small\" variant=\"secondary\" class=\"mx-1\">\n <div slot=\"dropdownContent\">\n <spw-group orientation=\"vertical\" is-full-width>\n <spw-button is-full-width variant=\"secondary\" size=\"small\">Modifier</spw-button>\n <spw-button is-full-width variant=\"secondary\" size=\"small\">Supprimer</spw-button>\n </spw-group>\n </div>\n </spw-button>\n </spw-dropdown>\n </div>\n </spw-table-cell>\n </spw-table-row>\n <spw-table-row state=\"disabled\">\n <spw-table-cell width=\"20\"><spw-checkbox disabled=\"true\"></spw-checkbox></spw-table-cell>\n <spw-table-cell>Marie</spw-table-cell>\n <spw-table-cell>22</spw-table-cell>\n <spw-table-cell width=\"40\"><spw-tag size=\"small\" variant=\"green\">Validé</spw-tag></spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <div class=\"d-flex\">\n <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-trash\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-edit\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n <spw-dropdown direction=\"left\">\n <spw-button icon=\"fa-ellipsis-vertical\" is-icon-only=\"true\" size=\"small\" variant=\"secondary\" class=\"mx-1\">\n <div slot=\"dropdownContent\">\n <spw-group orientation=\"vertical\" is-full-width>\n <spw-button is-full-width variant=\"secondary\" size=\"small\">Modifier</spw-button>\n <spw-button is-full-width variant=\"secondary\" size=\"small\">Supprimer</spw-button>\n </spw-group>\n </div>\n </spw-button>\n </spw-dropdown>\n </div>\n </spw-table-cell>\n </spw-table-row>\n <spw-table-row state=\"selected\">\n <spw-table-cell width=\"20\"><spw-checkbox checked=\"true\"></spw-checkbox></spw-table-cell>\n <spw-table-cell>Thomas</spw-table-cell>\n <spw-table-cell>37</spw-table-cell>\n <spw-table-cell width=\"40\"><spw-tag size=\"small\" variant=\"green\">Validé</spw-tag></spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <div class=\"d-flex\">\n <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-trash\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-edit\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n <spw-dropdown direction=\"left\">\n <spw-button icon=\"fa-ellipsis-vertical\" is-icon-only=\"true\" size=\"small\" variant=\"secondary\" class=\"mx-1\">\n <div slot=\"dropdownContent\">\n <spw-group orientation=\"vertical\" is-full-width>\n <spw-button is-full-width variant=\"secondary\" size=\"small\">Modifier</spw-button>\n <spw-button is-full-width variant=\"secondary\" size=\"small\">Supprimer</spw-button>\n </spw-group>\n </div>\n </spw-button>\n </spw-dropdown>\n </div>\n </spw-table-cell>\n </spw-table-row>\n </spw-table-body>\n <spw-table-footer>\n <div slot=\"left\">1-10 sur 9999 éléments</div>\n <div slot=\"center\">\n <spw-pagination class=\"spw-pagination\" variant=\"numbers\" total-items=\"30\" items-per-page=\"10\"></spw-pagination>\n </div>\n <div slot=\"right\">\n <spw-select placeholder=\"N°\" name=\"mon-select-natif\" size=\"medium\">\n <option selected value=\"10\">10</option>\n <option value=\"20\">20</option>\n <option value=\"30\">30</option>\n <option value=\"40\">40</option>\n </spw-select>\n éléments par page\n </div>\n </spw-table-footer>\n `,\n};\nTableWithActionsAndTags.parameters = {\n docs: {\n description: {\n story: `Tableau complexe avec sélection, filtres, actions et tags. Démontre toutes les fonctionnalités avancées : checkboxes de sélection, tooltips d'info, filtres par colonne, boutons d'actions, états de ligne (sélectionnée/désactivée), tags de statut et pagination complète. Idéal pour backoffices et interfaces d'administration.`,\n },\n },\n};\n\nexport const CompactTable: StoryFn = Template.bind({});\nCompactTable.args = {\n isZebra: true,\n innerHTML: `\n <spw-table-head>\n <spw-table-row>\n <spw-table-header padding=\"small\" column-id=\"name\" sortable scope=\"col\">Nom</spw-table-header>\n <spw-table-header padding=\"small\" column-id=\"age\" sortable scope=\"col\">Âge</spw-table-header>\n <spw-table-header padding=\"small\" column-id=\"city\" sortable scope=\"col\">Ville</spw-table-header>\n </spw-table-row>\n </spw-table-head>\n <spw-table-body>\n <spw-table-row>\n <spw-table-cell padding=\"small\">Zoé</spw-table-cell>\n <spw-table-cell padding=\"small\">28</spw-table-cell>\n <spw-table-cell padding=\"small\">Charleroi</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell padding=\"small\">Arthur</spw-table-cell>\n <spw-table-cell padding=\"small\">35</spw-table-cell>\n <spw-table-cell padding=\"small\">Namur</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell padding=\"small\">Micheline</spw-table-cell>\n <spw-table-cell padding=\"small\">17</spw-table-cell>\n <spw-table-cell padding=\"small\">Liège</spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell padding=\"small\">André</spw-table-cell>\n <spw-table-cell padding=\"small\">84</spw-table-cell>\n <spw-table-cell padding=\"small\">Tournai</spw-table-cell>\n </spw-table-row>\n </spw-table-body>\n `,\n};\nCompactTable.parameters = {\n docs: {\n description: {\n story: `Tableau compact avec padding réduit (small). Idéal pour afficher plus de données dans un espace réduit tout en conservant la lisibilité. Parfait pour les dashboards ou interfaces nécessitant une vue densifiée.`,\n },\n },\n};\n\nexport const LoadingWithSkeleton: StoryFn = Template.bind({});\nLoadingWithSkeleton.args = {\n isZebra: true,\n innerHTML: `\n <spw-table-head>\n <spw-table-row>\n <spw-table-header width=\"20\" scope=\"col\">\n <spw-checkbox></spw-checkbox>\n </spw-table-header>\n <spw-table-header column-id=\"name\" sortable scope=\"col\">Nom</spw-table-header>\n <spw-table-header column-id=\"age\" sortable scope=\"col\">Âge</spw-table-header>\n <spw-table-header column-id=\"status\" scope=\"col\">Statut</spw-table-header>\n <spw-table-header text-align=\"center\" scope=\"col\">Actions</spw-table-header>\n </spw-table-row>\n </spw-table-head>\n <spw-table-body>\n <spw-table-row>\n <spw-table-cell width=\"20\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell width=\"40\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell width=\"20\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell width=\"40\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell width=\"20\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell width=\"40\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell width=\"20\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell width=\"40\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n </spw-table-row>\n <spw-table-row>\n <spw-table-cell width=\"20\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell>\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell width=\"40\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n <spw-table-cell padding=\"small\" width=\"10\">\n <spw-skeleton lines=\"1\"></spw-skeleton>\n </spw-table-cell>\n </spw-table-row>\n </spw-table-body>\n <spw-table-footer>\n <div slot=\"left\">Chargement en cours...</div>\n <div slot=\"center\">\n <spw-pagination class=\"spw-pagination\" variant=\"numbers\" total-items=\"30\" items-per-page=\"10\"></spw-pagination>\n </div>\n <div slot=\"right\">\n <spw-select placeholder=\"N°\" name=\"mon-select-natif\" size=\"medium\">\n <option selected value=\"10\">10</option>\n <option value=\"20\">20</option>\n <option value=\"30\">30</option>\n <option value=\"40\">40</option>\n </spw-select>\n éléments par page\n </div>\n </spw-table-footer>\n `,\n};\nLoadingWithSkeleton.parameters = {\n docs: {\n description: {\n story: `Tableau avec état de chargement utilisant des skeletons. Les placeholders animés simulent le chargement des données pour améliorer l'expérience utilisateur pendant les requêtes asynchrones. Évite les sauts de layout et rassure l'utilisateur pendant l'attente.`,\n },\n },\n};\n"]}

package/dist/collection/stories/organisms/spw-tabs/spw-tabs.stories.js CHANGED Viewed

@@ -21,7 +21,30 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-Les onglets sont utilisés pour organiser le contenu associé.
+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)
         `,
@@ -182,6 +205,17 @@ Default.args = {
     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,
@@ -189,6 +223,17 @@ Box.args = {
     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,
@@ -196,4 +241,15 @@ MultiLevel.args = {
     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.
+      `,
+        },
+    },
+};
 //# sourceMappingURL=spw-tabs.stories.js.map

package/dist/collection/stories/organisms/spw-tabs/spw-tabs.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-tabs.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-tabs/spw-tabs.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,UAAU,CAAC;AAE9B,MAAM,gBAAgB,GAAG,CAAC,kBAAkB,EAAE,qBAAqB,EAAE,0BAA0B,CAAC,CAAC;AAEjG,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;SAMV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,kBAAkB,CAAC,QAAQ;IAClC,OAAO,UAAU,CAAC;;;4CAGwB,QAAQ,CAAC,QAAQ;0CACnB,QAAQ,CAAC,MAAM;;;;;;;;;;;;;;;;;;GAkBtD,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,QAAQ;IAC9B,OAAO,UAAU,CAAC;;;4CAGwB,QAAQ,CAAC,QAAQ;0CACnB,QAAQ,CAAC,MAAM;;;;;;;;;;;;;;;;;;GAkBtD,CAAC;AACJ,CAAC;AAED,SAAS,qBAAqB,CAAC,QAAQ;IACrC,OAAO,UAAU,CAAC;;;4CAGwB,QAAQ,CAAC,QAAQ;0CACnB,QAAQ,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CtD,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAY,IAAI,CAAC,EAAE;IACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,WAAW,GAAY,IAAI,CAAC,EAAE;IAClC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IAEzC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAY,IAAI,CAAC,EAAE;IACzC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAEhD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,IAAI;IACZ,gBAAgB,EAAE,GAAG;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,GAAG,CAAC,IAAI,GAAG;IACT,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,IAAI;IACZ,gBAAgB,EAAE,GAAG;IACrB,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtD,UAAU,CAAC,IAAI,GAAG;IAChB,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,IAAI;IACZ,gBAAgB,EAAE,GAAG;IACrB,OAAO,EAAE,KAAK;CACf,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-tabs';\n\nconst subComponentTags = ['spw-tabs-content', 'spw-tabs-navigation', 'spw-tabs-navigation-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Onglets (tabs)',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLes onglets sont utilisés pour organiser le contenu associé. \n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/857780-onglets)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentDefault(slotArgs) {\n return /* HTML / `\n <spw-tabs-navigation slot=\"navigation\">\n <spw-tabs-navigation-item tab-id=\"1\">Onglet 1</spw-tabs-navigation-item>\n <spw-tabs-navigation-item disabled=\"${slotArgs.disabled}\" tab-id=\"2\">Onglet 2</spw-tabs-navigation-item>\n <spw-tabs-navigation-item bubble=\"${slotArgs.bubble}\" tab-id=\"3\">Onglet 3</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"4\">Onglet 4</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"5\">Onglet 5</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"6\">Onglet 6</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"7\">Onglet 7</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"8\">Onglet 8</spw-tabs-navigation-item>\n </spw-tabs-navigation>\n\n <div slot=\"content\">\n <spw-tabs-content tab-id=\"1\"><div class=\"pt-3\">Contenu 1</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"2\"><div class=\"pt-3\">Contenu 2</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"3\"><div class=\"pt-3\">Contenu 3</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"4\"><div class=\"pt-3\">Contenu 4</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"5\"><div class=\"pt-3\">Contenu 5</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"6\"><div class=\"pt-3\">Contenu 6</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"7\"><div class=\"pt-3\">Contenu 7</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"8\"><div class=\"pt-3\">Contenu 8</div></spw-tabs-content>\n </div>\n `;\n}\n\nfunction htmlContentBox(slotArgs) {\n return / HTML / `\n <spw-tabs-navigation slot=\"navigation\">\n <spw-tabs-navigation-item tab-id=\"1\">Onglet 1</spw-tabs-navigation-item>\n <spw-tabs-navigation-item disabled=\"${slotArgs.disabled}\" tab-id=\"2\">Onglet 2</spw-tabs-navigation-item>\n <spw-tabs-navigation-item bubble=\"${slotArgs.bubble}\" tab-id=\"3\">Onglet 3</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"4\">Onglet 4</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"5\">Onglet 5</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"6\">Onglet 6</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"7\">Onglet 7</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"8\">Onglet 8</spw-tabs-navigation-item>\n </spw-tabs-navigation>\n\n <div slot=\"content\">\n <spw-tabs-content tab-id=\"1\"><div class=\"p-3\">Contenu 1</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"2\"><div class=\"p-3\">Contenu 2</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"3\"><div class=\"p-3\">Contenu 3</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"4\"><div class=\"p-3\">Contenu 4</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"5\"><div class=\"p-3\">Contenu 5</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"6\"><div class=\"p-3\">Contenu 6</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"7\"><div class=\"p-3\">Contenu 7</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"8\"><div class=\"p-3\">Contenu 8</div></spw-tabs-content>\n </div>\n `;\n}\n\nfunction htmlContentMultiLevel(slotArgs) {\n return / HTML */ `\n <spw-tabs-navigation slot=\"navigation\">\n <spw-tabs-navigation-item tab-id=\"1\">Onglet 1</spw-tabs-navigation-item>\n <spw-tabs-navigation-item disabled=\"${slotArgs.disabled}\" tab-id=\"2\">Onglet 2</spw-tabs-navigation-item>\n <spw-tabs-navigation-item bubble=\"${slotArgs.bubble}\" tab-id=\"3\">Onglet 3</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"4\">Onglet 4</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"5\">Onglet 5</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"6\">Onglet 6</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"7\">Onglet 7</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"8\">Onglet 8</spw-tabs-navigation-item>\n </spw-tabs-navigation>\n\n <div slot=\"content\">\n <spw-tabs-content tab-id=\"1\">\n <div class=\"p-3\">\n <spw-tabs default-active-tab=\"1\">\n <spw-tabs-navigation slot=\"navigation\">\n <spw-tabs-navigation-item tab-id=\"1\">Onglet 1</spw-tabs-navigation-item>\n <spw-tabs-navigation-item disabled=\"true\" tab-id=\"2\">Onglet 2</spw-tabs-navigation-item>\n <spw-tabs-navigation-item bubble=\"true\" tab-id=\"3\">Onglet 3</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"4\">Onglet 4</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"5\">Onglet 5</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"6\">Onglet 6</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"7\">Onglet 7</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"8\">Onglet 8</spw-tabs-navigation-item>\n </spw-tabs-navigation>\n\n <div slot=\"content\">\n <spw-tabs-content tab-id=\"1\"><div class=\"pt-3\">Contenu 1</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"2\"><div class=\"pt-3\">Contenu 2</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"3\"><div class=\"pt-3\">Contenu 3</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"4\"><div class=\"pt-3\">Contenu 4</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"5\"><div class=\"pt-3\">Contenu 5</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"6\"><div class=\"pt-3\">Contenu 6</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"7\"><div class=\"pt-3\">Contenu 7</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"8\"><div class=\"pt-3\">Contenu 8</div></spw-tabs-content>\n </div>\n </spw-tabs>\n </div>\n </spw-tabs-content>\n <spw-tabs-content tab-id=\"2\"><div class=\"p-3\">Contenu 2</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"3\"><div class=\"p-3\">Contenu 3</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"4\"><div class=\"p-3\">Contenu 4</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"5\"><div class=\"p-3\">Contenu 5</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"6\"><div class=\"p-3\">Contenu 6</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"7\"><div class=\"p-3\">Contenu 7</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"8\"><div class=\"p-3\">Contenu 8</div></spw-tabs-content>\n </div>\n `;\n}\n\nconst TemplateDefault: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n element.setAttribute(toKebabCase(key), val as string);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentDefault(args);\n\n return element;\n};\n\nconst TemplateBox: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n element.setAttribute(toKebabCase(key), val as string);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentBox(args);\n\n return element;\n};\n\nconst TemplateMultiLevel: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n element.setAttribute(toKebabCase(key), val as string);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentMultiLevel(args);\n\n return element;\n};\n\nexport const Default = TemplateDefault.bind({});\nDefault.args = {\n disabled: true,\n bubble: true,\n defaultActiveTab: '1',\n};\n\nexport const Box = TemplateBox.bind({});\nBox.args = {\n disabled: true,\n bubble: true,\n defaultActiveTab: '1',\n variant: 'box',\n};\n\nexport const MultiLevel = TemplateMultiLevel.bind({});\nMultiLevel.args = {\n disabled: true,\n bubble: true,\n defaultActiveTab: '1',\n variant: 'box',\n};\n"]}
1	+ {"version":3,"file":"spw-tabs.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-tabs/spw-tabs.stories.ts"],"names":[],"mappings":"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","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-tabs';\n\nconst subComponentTags = ['spw-tabs-content', 'spw-tabs-navigation', 'spw-tabs-navigation-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Onglets (tabs)',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLes 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.\n\n## Structure\n\nLe composant se compose de quatre parties :\n- spw-tabs : Le conteneur principal qui gère l'état et la logique\n- spw-tabs-navigation : Contient la liste des onglets cliquables\n- spw-tabs-navigation-item : Chaque onglet individuel avec son label\n- spw-tabs-content : Le contenu associé à chaque onglet\n\n## Variants disponibles\n\n- Default : Style par défaut avec bordure inférieure\n- Box : Style avec fond et bordures complètes\n\n## Fonctionnalités\n\n- Navigation par clic entre les onglets\n- Support des onglets désactivés\n- Notifications visuelles (bubbles) sur les onglets\n- Tronquer du texte avec tooltip si nécessaire\n- Support des onglets imbriqués (multi-niveaux)\n- Navigation au clavier accessible\n- Émission d'événement lors du changement d'onglet\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/857780-onglets)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentDefault(slotArgs) {\n return /* HTML / `\n <spw-tabs-navigation slot=\"navigation\">\n <spw-tabs-navigation-item tab-id=\"1\">Onglet 1</spw-tabs-navigation-item>\n <spw-tabs-navigation-item disabled=\"${slotArgs.disabled}\" tab-id=\"2\">Onglet 2</spw-tabs-navigation-item>\n <spw-tabs-navigation-item bubble=\"${slotArgs.bubble}\" tab-id=\"3\">Onglet 3</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"4\">Onglet 4</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"5\">Onglet 5</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"6\">Onglet 6</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"7\">Onglet 7</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"8\">Onglet 8</spw-tabs-navigation-item>\n </spw-tabs-navigation>\n\n <div slot=\"content\">\n <spw-tabs-content tab-id=\"1\"><div class=\"pt-3\">Contenu 1</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"2\"><div class=\"pt-3\">Contenu 2</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"3\"><div class=\"pt-3\">Contenu 3</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"4\"><div class=\"pt-3\">Contenu 4</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"5\"><div class=\"pt-3\">Contenu 5</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"6\"><div class=\"pt-3\">Contenu 6</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"7\"><div class=\"pt-3\">Contenu 7</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"8\"><div class=\"pt-3\">Contenu 8</div></spw-tabs-content>\n </div>\n `;\n}\n\nfunction htmlContentBox(slotArgs) {\n return / HTML / `\n <spw-tabs-navigation slot=\"navigation\">\n <spw-tabs-navigation-item tab-id=\"1\">Onglet 1</spw-tabs-navigation-item>\n <spw-tabs-navigation-item disabled=\"${slotArgs.disabled}\" tab-id=\"2\">Onglet 2</spw-tabs-navigation-item>\n <spw-tabs-navigation-item bubble=\"${slotArgs.bubble}\" tab-id=\"3\">Onglet 3</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"4\">Onglet 4</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"5\">Onglet 5</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"6\">Onglet 6</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"7\">Onglet 7</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"8\">Onglet 8</spw-tabs-navigation-item>\n </spw-tabs-navigation>\n\n <div slot=\"content\">\n <spw-tabs-content tab-id=\"1\"><div class=\"p-3\">Contenu 1</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"2\"><div class=\"p-3\">Contenu 2</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"3\"><div class=\"p-3\">Contenu 3</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"4\"><div class=\"p-3\">Contenu 4</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"5\"><div class=\"p-3\">Contenu 5</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"6\"><div class=\"p-3\">Contenu 6</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"7\"><div class=\"p-3\">Contenu 7</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"8\"><div class=\"p-3\">Contenu 8</div></spw-tabs-content>\n </div>\n `;\n}\n\nfunction htmlContentMultiLevel(slotArgs) {\n return / HTML */ `\n <spw-tabs-navigation slot=\"navigation\">\n <spw-tabs-navigation-item tab-id=\"1\">Onglet 1</spw-tabs-navigation-item>\n <spw-tabs-navigation-item disabled=\"${slotArgs.disabled}\" tab-id=\"2\">Onglet 2</spw-tabs-navigation-item>\n <spw-tabs-navigation-item bubble=\"${slotArgs.bubble}\" tab-id=\"3\">Onglet 3</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"4\">Onglet 4</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"5\">Onglet 5</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"6\">Onglet 6</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"7\">Onglet 7</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"8\">Onglet 8</spw-tabs-navigation-item>\n </spw-tabs-navigation>\n\n <div slot=\"content\">\n <spw-tabs-content tab-id=\"1\">\n <div class=\"p-3\">\n <spw-tabs default-active-tab=\"1\">\n <spw-tabs-navigation slot=\"navigation\">\n <spw-tabs-navigation-item tab-id=\"1\">Onglet 1</spw-tabs-navigation-item>\n <spw-tabs-navigation-item disabled=\"true\" tab-id=\"2\">Onglet 2</spw-tabs-navigation-item>\n <spw-tabs-navigation-item bubble=\"true\" tab-id=\"3\">Onglet 3</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"4\">Onglet 4</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"5\">Onglet 5</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"6\">Onglet 6</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"7\">Onglet 7</spw-tabs-navigation-item>\n <spw-tabs-navigation-item tab-id=\"8\">Onglet 8</spw-tabs-navigation-item>\n </spw-tabs-navigation>\n\n <div slot=\"content\">\n <spw-tabs-content tab-id=\"1\"><div class=\"pt-3\">Contenu 1</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"2\"><div class=\"pt-3\">Contenu 2</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"3\"><div class=\"pt-3\">Contenu 3</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"4\"><div class=\"pt-3\">Contenu 4</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"5\"><div class=\"pt-3\">Contenu 5</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"6\"><div class=\"pt-3\">Contenu 6</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"7\"><div class=\"pt-3\">Contenu 7</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"8\"><div class=\"pt-3\">Contenu 8</div></spw-tabs-content>\n </div>\n </spw-tabs>\n </div>\n </spw-tabs-content>\n <spw-tabs-content tab-id=\"2\"><div class=\"p-3\">Contenu 2</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"3\"><div class=\"p-3\">Contenu 3</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"4\"><div class=\"p-3\">Contenu 4</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"5\"><div class=\"p-3\">Contenu 5</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"6\"><div class=\"p-3\">Contenu 6</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"7\"><div class=\"p-3\">Contenu 7</div></spw-tabs-content>\n <spw-tabs-content tab-id=\"8\"><div class=\"p-3\">Contenu 8</div></spw-tabs-content>\n </div>\n `;\n}\n\nconst TemplateDefault: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n element.setAttribute(toKebabCase(key), val as string);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentDefault(args);\n\n return element;\n};\n\nconst TemplateBox: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n element.setAttribute(toKebabCase(key), val as string);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentBox(args);\n\n return element;\n};\n\nconst TemplateMultiLevel: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n element.setAttribute(toKebabCase(key), val as string);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentMultiLevel(args);\n\n return element;\n};\n\nexport const Default = TemplateDefault.bind({});\nDefault.args = {\n disabled: true,\n bubble: true,\n defaultActiveTab: '1',\n};\nDefault.parameters = {\n docs: {\n description: {\n story: `\nExemple 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.\n\nCas 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.\n `,\n },\n },\n};\n\nexport const Box = TemplateBox.bind({});\nBox.args = {\n disabled: true,\n bubble: true,\n defaultActiveTab: '1',\n variant: 'box',\n};\nBox.parameters = {\n docs: {\n description: {\n story: `\nVariante \"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.\n\nCas 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.\n `,\n },\n },\n};\n\nexport const MultiLevel = TemplateMultiLevel.bind({});\nMultiLevel.args = {\n disabled: true,\n bubble: true,\n defaultActiveTab: '1',\n variant: 'box',\n};\nMultiLevel.parameters = {\n docs: {\n description: {\n story: `\nDé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.\n\nCas 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.\n `,\n },\n },\n};\n"]}

package/dist/collection/stories/organisms/spw-tile/spw-tile.stories.js CHANGED Viewed

@@ -21,7 +21,36 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-Bloc visuel permettant aux utilisateurs de sélectionner des options ou de changer de page.
+Le composant Tile est un bloc visuel cliquable permettant aux utilisateurs de naviguer vers des pages ou de sélectionner des options. Il offre trois variantes adaptées à différents contextes d'utilisation.
+## Structure
+Le composant se compose de trois éléments :
+- **spw-tile** : Conteneur principal avec gestion des variantes et interactions
+- **spw-tile-title** : Titre de la tuile
+- **spw-tile-description** : Description optionnelle (variant icon uniquement)
+## Variantes disponibles
+- **icon** : Tuile avec icône centrale, titre et description
+- **light** : Tuile avec image de fond et titre en overlay
+- **big** : Grande tuile avec image plein format et chevron d'action
+## Fonctionnalités
+- Trois variantes visuelles adaptées aux besoins
+- Effets hover avec transitions fluides
+- Support des icônes FontAwesome (variant icon)
+- Images de fond avec overlay (variants light et big)
+- Formats de hauteur personnalisables
+- Indicateur visuel chevron sur variant big
+- Rendu sémantique (div ou a selon href)
+## Cas d'usage
+- **Variant icon** : Accès rapides aux services, menu de fonctionnalités
+- **Variant light** : Navigation par catégories, sections thématiques
+- **Variant big** : Mise en avant de contenus majeurs, landing pages
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/3326e7-tuile-tile)
         `,
@@ -110,4 +139,57 @@ Big.args = {
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
     imageAlt: 'Image de tuile',
 };
+Icon.parameters = {
+    docs: {
+        description: {
+            story: `
+Tuile avec icône centrale (fa-paper-plane), titre et description. Format compact et informatif, idéal pour les menus d'accès rapides.
+Caractéristiques :
+- Icône FontAwesome large et centrée
+- Titre et description sur fond blanc
+- Effet hover avec surbrillance
+- Lien externe (target="_blank")
+Cas d'usage : grille de services (contacts, formulaires, démarches), menu de fonctionnalités d'une application, portail d'outils avec description. La description aide à comprendre la fonction avant de cliquer.
+      `,
+        },
+    },
+};
+Light.parameters = {
+    docs: {
+        description: {
+            story: `
+Tuile légère avec image de fond et titre en overlay. Format minimaliste et élégant, met l'accent sur le visuel.
+Caractéristiques :
+- Image de fond plein format
+- Overlay semi-transparent
+- Titre en blanc par-dessus l'image
+- Format landscape par défaut (configurable : square, portrait)
+- Effet hover avec zoom subtil de l'image
+Cas d'usage : navigation par catégories thématiques (environnement, mobilité, emploi), galerie de sections, portail avec accès visuels aux grandes rubriques. L'image illustre directement le thème.
+      `,
+        },
+    },
+};
+Big.parameters = {
+    docs: {
+        description: {
+            story: `
+Grande tuile avec image plein format, titre en overlay et icône chevron. Format impactant pour mise en avant de contenus majeurs.
+Caractéristiques :
+- Image de fond haute résolution
+- Titre en blanc avec overlay gradient
+- Icône chevron (fa-chevron-right) indiquant l'action
+- Format landscape par défaut (configurable : square, portrait)
+- Effet hover avec transition sur image et chevron
+Cas d'usage : landing pages avec sections principales, mise en avant d'univers thématiques majeurs, portails institutionnels avec grandes rubriques. Le format généreux capte l'attention et valorise le contenu.
+      `,
+        },
+    },
+};
 //# sourceMappingURL=spw-tile.stories.js.map

package/dist/collection/stories/organisms/spw-tile/spw-tile.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-tile.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-tile/spw-tile.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,UAAU,CAAC;AAE9B,MAAM,gBAAgB,GAAG,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,CAAC;AAEpE,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;SAMV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,eAAe;IACtB,OAAO,UAAU,CAAC;;;;GAIjB,CAAC;AACJ,CAAC;AACD,SAAS,gBAAgB;IACvB,OAAO,UAAU,CAAC,sDAAsD,CAAC;AAC3E,CAAC;AACD,SAAS,cAAc;IACrB,OAAO,UAAU,CAAC,sDAAsD,CAAC;AAC3E,CAAC;AAED,MAAM,YAAY,GAAY,IAAI,CAAC,EAAE;IACnC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,eAAe,EAAE,CAAC;IAEtC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,aAAa,GAAY,IAAI,CAAC,EAAE;IACpC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAEvC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,WAAW,GAAY,IAAI,CAAC,EAAE;IAClC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,cAAc,EAAE,CAAC;IAErC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE,MAAM;IACf,IAAI,EAAE,oBAAoB;IAC1B,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,KAAK,CAAC,IAAI,GAAG;IACX,OAAO,EAAE,OAAO;IAChB,IAAI,EAAE,oBAAoB;IAC1B,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,gBAAgB;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,GAAG,CAAC,IAAI,GAAG;IACT,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,oBAAoB;IAC1B,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,gBAAgB;CAC3B,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-tile';\n\nconst subComponentTags = ['spw-tile-description', 'spw-tile-title'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Tuile (tile)',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nBloc visuel permettant aux utilisateurs de sélectionner des options ou de changer de page.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/3326e7-tuile-tile)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentIcon() {\n return /* HTML / `\n <spw-icon icon=\"fa-paper-plane\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n `;\n}\nfunction htmlContentLight() {\n return / HTML / ` <spw-tile-title>Titre de ma tuile</spw-tile-title> `;\n}\nfunction htmlContentBig() {\n return / HTML */ ` <spw-tile-title>Titre de ma tuile</spw-tile-title> `;\n}\n\nconst TemplateIcon: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n element.setAttribute(toKebabCase(key), val as string);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentIcon();\n\n return element;\n};\n\nconst TemplateLight: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n element.setAttribute(toKebabCase(key), val as string);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentLight();\n\n return element;\n};\n\nconst TemplateBig: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n element.setAttribute(toKebabCase(key), val as string);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentBig();\n\n return element;\n};\n\nexport const Icon = TemplateIcon.bind({});\nIcon.args = {\n variant: 'icon',\n href: 'https://google.com',\n target: '_blank',\n};\n\nexport const Light = TemplateLight.bind({});\nLight.args = {\n variant: 'light',\n href: 'https://google.com',\n target: '_blank',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Image de tuile',\n};\n\nexport const Big = TemplateBig.bind({});\nBig.args = {\n variant: 'big',\n href: 'https://google.com',\n target: '_blank',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Image de tuile',\n};\n"]}
1	+ {"version":3,"file":"spw-tile.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-tile/spw-tile.stories.ts"],"names":[],"mappings":"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","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-tile';\n\nconst subComponentTags = ['spw-tile-description', 'spw-tile-title'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Tuile (tile)',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLe composant Tile est un bloc visuel cliquable permettant aux utilisateurs de naviguer vers des pages ou de sélectionner des options. Il offre trois variantes adaptées à différents contextes d'utilisation.\n\n## Structure\n\nLe composant se compose de trois éléments :\n- spw-tile : Conteneur principal avec gestion des variantes et interactions\n- spw-tile-title : Titre de la tuile\n- spw-tile-description : Description optionnelle (variant icon uniquement)\n\n## Variantes disponibles\n\n- icon : Tuile avec icône centrale, titre et description\n- light : Tuile avec image de fond et titre en overlay\n- big : Grande tuile avec image plein format et chevron d'action\n\n## Fonctionnalités\n\n- Trois variantes visuelles adaptées aux besoins\n- Effets hover avec transitions fluides\n- Support des icônes FontAwesome (variant icon)\n- Images de fond avec overlay (variants light et big)\n- Formats de hauteur personnalisables\n- Indicateur visuel chevron sur variant big\n- Rendu sémantique (div ou a selon href)\n\n## Cas d'usage\n\n- Variant icon : Accès rapides aux services, menu de fonctionnalités\n- Variant light : Navigation par catégories, sections thématiques\n- Variant big : Mise en avant de contenus majeurs, landing pages\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/3326e7-tuile-tile)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentIcon() {\n return /* HTML / `\n <spw-icon icon=\"fa-paper-plane\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n `;\n}\nfunction htmlContentLight() {\n return / HTML / ` <spw-tile-title>Titre de ma tuile</spw-tile-title> `;\n}\nfunction htmlContentBig() {\n return / HTML */ ` <spw-tile-title>Titre de ma tuile</spw-tile-title> `;\n}\n\nconst TemplateIcon: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n element.setAttribute(toKebabCase(key), val as string);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentIcon();\n\n return element;\n};\n\nconst TemplateLight: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n element.setAttribute(toKebabCase(key), val as string);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentLight();\n\n return element;\n};\n\nconst TemplateBig: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n element.setAttribute(toKebabCase(key), val as string);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentBig();\n\n return element;\n};\n\nexport const Icon = TemplateIcon.bind({});\nIcon.args = {\n variant: 'icon',\n href: 'https://google.com',\n target: '_blank',\n};\n\nexport const Light = TemplateLight.bind({});\nLight.args = {\n variant: 'light',\n href: 'https://google.com',\n target: '_blank',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Image de tuile',\n};\n\nexport const Big = TemplateBig.bind({});\nBig.args = {\n variant: 'big',\n href: 'https://google.com',\n target: '_blank',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Image de tuile',\n};\n\nIcon.parameters = {\n docs: {\n description: {\n story: `\nTuile avec icône centrale (fa-paper-plane), titre et description. Format compact et informatif, idéal pour les menus d'accès rapides.\n\nCaractéristiques :\n- Icône FontAwesome large et centrée\n- Titre et description sur fond blanc\n- Effet hover avec surbrillance\n- Lien externe (target=\"_blank\")\n\nCas d'usage : grille de services (contacts, formulaires, démarches), menu de fonctionnalités d'une application, portail d'outils avec description. La description aide à comprendre la fonction avant de cliquer.\n `,\n },\n },\n};\n\nLight.parameters = {\n docs: {\n description: {\n story: `\nTuile légère avec image de fond et titre en overlay. Format minimaliste et élégant, met l'accent sur le visuel.\n\nCaractéristiques :\n- Image de fond plein format\n- Overlay semi-transparent\n- Titre en blanc par-dessus l'image\n- Format landscape par défaut (configurable : square, portrait)\n- Effet hover avec zoom subtil de l'image\n\nCas d'usage : navigation par catégories thématiques (environnement, mobilité, emploi), galerie de sections, portail avec accès visuels aux grandes rubriques. L'image illustre directement le thème.\n `,\n },\n },\n};\n\nBig.parameters = {\n docs: {\n description: {\n story: `\nGrande tuile avec image plein format, titre en overlay et icône chevron. Format impactant pour mise en avant de contenus majeurs.\n\nCaractéristiques :\n- Image de fond haute résolution\n- Titre en blanc avec overlay gradient\n- Icône chevron (fa-chevron-right) indiquant l'action\n- Format landscape par défaut (configurable : square, portrait)\n- Effet hover avec transition sur image et chevron\n\nCas d'usage : landing pages avec sections principales, mise en avant d'univers thématiques majeurs, portails institutionnels avec grandes rubriques. Le format généreux capte l'attention et valorise le contenu.\n `,\n },\n },\n};\n"]}