@spw-ds/spw-stencil-library 1.2.0 → 1.2.2

package/dist/collection/stories/organisms/spw-modal/spw-modal.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-modal.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-modal/spw-modal.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, toKebabCase } from '@utils/utils';\nimport '../../assets/css/components.css';\n\nconst elementTag = 'spw-modal';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Organismes/Modale',\n  component: elementTag,\n  argTypes: {\n    ...argTypes,\n    content: { control: 'text' },\n    buttons: { control: 'text' },\n  },\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\nFenêtre superposée affichant du contenu ou des actions importantes.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/75759c-modale)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nconst Template: StoryFn = args => {\n  const fragment = new DocumentFragment();\n\n  const button = document.createElement('spw-button');\n  button.textContent = 'Ouvrir fenêtre modale';\n\n  const element = document.createElement(elementTag);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    } else {\n      if (key !== 'content' && key !== 'buttons') {\n        element.setAttribute(toKebabCase(key), val as string);\n      }\n    }\n  });\n\n  button.setAttribute('data-modal-trigger', args.id);\n\n  if (args.content) {\n    const contentDiv = document.createElement('div');\n    contentDiv.setAttribute('slot', 'content');\n    contentDiv.innerHTML = args.content;\n    element.appendChild(contentDiv);\n  }\n\n  if (args.buttons) {\n    const buttonsDiv = document.createElement('div');\n    buttonsDiv.setAttribute('slot', 'buttons');\n    buttonsDiv.innerHTML = args.buttons;\n    element.appendChild(buttonsDiv);\n  }\n\n  fragment.appendChild(button);\n  fragment.appendChild(element);\n\n  return fragment;\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n  size: 'small',\n  id: 'modal1',\n  content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n  buttons: `\n  <spw-group alignment=\"right\">\n    <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal1\">Valider</spw-button>\n    <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal1\">Fermer</spw-button>\n  </spw-group>\n  `,\n};\n\nexport const Medium = Template.bind({});\nMedium.args = {\n  size: 'medium',\n  id: 'modal2',\n  content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n  buttons: `\n  <spw-group alignment=\"right\">\n    <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal2\">Valider</spw-button>\n    <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal2\">Fermer</spw-button>\n  </spw-group>\n  `,\n};\n\nexport const Large = Template.bind({});\nLarge.args = {\n  size: 'large',\n  id: 'modal3',\n  content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n  buttons: `\n  <spw-group alignment=\"right\">\n    <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal3\">Valider</spw-button>\n    <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal3\">Fermer</spw-button>\n  </spw-group>\n  `,\n};\n\nexport const Fluid = Template.bind({});\nFluid.args = {\n  size: 'fluid',\n  id: 'modal4',\n  content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n  buttons: `\n  <spw-group alignment=\"right\">\n    <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal4\">Valider</spw-button>\n    <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal4\">Fermer</spw-button>\n  </spw-group>\n    `,\n};\n"]}
+{"version":3,"file":"spw-modal.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-modal/spw-modal.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, toKebabCase } from '@utils/utils';\nimport '../../assets/css/components.css';\n\nconst elementTag = 'spw-modal';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Organismes/Modale',\n  component: elementTag,\n  argTypes: {\n    ...argTypes,\n    content: { control: 'text' },\n    buttons: { control: 'text' },\n  },\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\nFenêtre superposée affichant du contenu ou des actions importantes.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/75759c-modale)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nconst Template: StoryFn = args => {\n  const fragment = new DocumentFragment();\n\n  const button = document.createElement('spw-button');\n  button.textContent = 'Ouvrir fenêtre modale';\n\n  const element = document.createElement(elementTag);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    } else {\n      if (key !== 'content' && key !== 'buttons' && key !== 'closeModal' && key !== 'openModal') {\n        element.setAttribute(toKebabCase(key), val as string);\n      }\n    }\n  });\n\n  button.setAttribute('data-modal-trigger', args.id);\n\n  if (args.content) {\n    const contentDiv = document.createElement('div');\n    contentDiv.setAttribute('slot', 'content');\n    contentDiv.innerHTML = args.content;\n    element.appendChild(contentDiv);\n  }\n\n  if (args.buttons) {\n    const buttonsDiv = document.createElement('div');\n    buttonsDiv.setAttribute('slot', 'buttons');\n    buttonsDiv.innerHTML = args.buttons;\n    element.appendChild(buttonsDiv);\n  }\n\n  fragment.appendChild(button);\n  fragment.appendChild(element);\n\n  return fragment;\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n  size: 'small',\n  id: 'modal1',\n  content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n  buttons: `\n  <spw-group alignment=\"right\">\n    <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal1\">Valider</spw-button>\n    <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal1\">Fermer</spw-button>\n  </spw-group>\n  `,\n};\n\nexport const Medium = Template.bind({});\nMedium.args = {\n  size: 'medium',\n  id: 'modal2',\n  content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n  buttons: `\n  <spw-group alignment=\"right\">\n    <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal2\">Valider</spw-button>\n    <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal2\">Fermer</spw-button>\n  </spw-group>\n  `,\n};\n\nexport const Large = Template.bind({});\nLarge.args = {\n  size: 'large',\n  id: 'modal3',\n  content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n  buttons: `\n  <spw-group alignment=\"right\">\n    <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal3\">Valider</spw-button>\n    <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal3\">Fermer</spw-button>\n  </spw-group>\n  `,\n};\n\nexport const Fluid = Template.bind({});\nFluid.args = {\n  size: 'fluid',\n  id: 'modal4',\n  content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n  buttons: `\n  <spw-group alignment=\"right\">\n    <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal4\">Valider</spw-button>\n    <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal4\">Fermer</spw-button>\n  </spw-group>\n    `,\n};\n"]}

package/dist/collection/stories/organisms/spw-mosaic/spw-mosaic.stories.js

@@ -197,7 +197,8 @@ function camelToKebab(str) {
 }
 const TemplateCards = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
     Object.entries(args).forEach(([key, val]) => {
         if (masterProps.includes(key)) {
             const kebabKey = camelToKebab(key);
@@ -212,7 +213,8 @@ const TemplateCards = args => {
 };
 const TemplateIconTiles = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
     Object.entries(args).forEach(([key, val]) => {
         if (masterProps.includes(key)) {
             const kebabKey = camelToKebab(key);
@@ -227,7 +229,8 @@ const TemplateIconTiles = args => {
 };
 const TemplateLightTiles = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
     Object.entries(args).forEach(([key, val]) => {
         if (masterProps.includes(key)) {
             const kebabKey = camelToKebab(key);
@@ -242,7 +245,8 @@ const TemplateLightTiles = args => {
 };
 const TemplateBigTiles = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
     Object.entries(args).forEach(([key, val]) => {
         if (masterProps.includes(key)) {
             const kebabKey = camelToKebab(key);

package/dist/collection/stories/organisms/spw-mosaic/spw-mosaic.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-mosaic.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-mosaic/spw-mosaic.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 } from '@utils/utils';\n\nconst elementTag = 'spw-mosaic';\n\nconst subComponentTags = ['spw-mosaic-item'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: \"Organismes/Mosaique d'éléments (masonry)\",\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\nPermet d'afficher une grille d'éléments sous la forme d'un masonry.\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContentCards() {\n  return /* HTML */ `\n    <spw-mosaic-item>\n      <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n        <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n          <spw-card-subtags>\n            <spw-card-subtag-item link=\"http://google.be\">Sous-tag 1</spw-card-subtag-item>\n            <spw-card-subtag-item link=\"http://google.be\">Sous-tag 2</spw-card-subtag-item>\n          </spw-card-subtags>\n          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n          <spw-card-excerpt>\n            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n          </spw-card-excerpt>\n        </spw-card-content>\n      </spw-card>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n        <spw-card-image label=\"Tag\">\n          <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n        </spw-card-image>\n        <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n          <spw-card-excerpt>\n            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n          </spw-card-excerpt>\n        </spw-card-content>\n      </spw-card>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n        <spw-card-image label=\"Tag\">\n          <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n        </spw-card-image>\n        <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n          <spw-card-title>Lorem ipsum dolor sit</spw-card-title>\n          <spw-card-excerpt>\n            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n          </spw-card-excerpt>\n        </spw-card-content>\n      </spw-card>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n        <spw-card-image label=\"Tag\">\n          <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n        </spw-card-image>\n        <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n          <spw-card-excerpt>\n            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n          </spw-card-excerpt>\n        </spw-card-content>\n      </spw-card>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n        <spw-card-image label=\"Tag\">\n          <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n        </spw-card-image>\n        <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n          <spw-card-excerpt>\n            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n          </spw-card-excerpt>\n        </spw-card-content>\n      </spw-card>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n        <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n          <spw-card-title>Lorem ipsum dolor sit amet</spw-card-title>\n          <spw-card-excerpt>\n            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n          </spw-card-excerpt>\n        </spw-card-content>\n      </spw-card>\n    </spw-mosaic-item>\n  `;\n}\n\nfunction htmlContentIconTiles() {\n  return /* HTML */ `\n    <spw-mosaic-item>\n      <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n        <spw-icon icon=\"fa-power-off\"></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      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n        <spw-icon icon=\"fa-map-location-dot\"></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      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\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      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n        <spw-icon icon=\"fa-user\"></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      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n        <spw-icon icon=\"fa-image\"></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      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n        <spw-icon icon=\"fa-bell\"></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      </spw-tile>\n    </spw-mosaic-item>\n  `;\n}\n\nfunction htmlContentLightTiles() {\n  return /* HTML */ `\n    <spw-mosaic-item>\n      <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n        <spw-tile-title>Titre de ma tuile</spw-tile-title>\n      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n        <spw-tile-title>Titre de ma tuile</spw-tile-title>\n      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n        <spw-tile-title>Titre de ma tuile</spw-tile-title>\n      </spw-tile>\n    </spw-mosaic-item>\n  `;\n}\n\nfunction htmlContentBigTiles() {\n  return /* HTML */ `\n    <spw-mosaic-item>\n      <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n        <spw-tile-title>Titre de ma tuile</spw-tile-title>\n      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n        <spw-tile-title>Titre de ma tuile</spw-tile-title>\n      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n        <spw-tile-title>Titre de ma tuile</spw-tile-title>\n      </spw-tile>\n    </spw-mosaic-item>\n  `;\n}\n\nfunction camelToKebab(str: string) {\n  return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);\n}\n\nconst TemplateCards: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});\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 = htmlContentCards();\n\n  return element;\n};\n\nconst TemplateIconTiles: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});\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 = htmlContentIconTiles();\n\n  return element;\n};\n\nconst TemplateLightTiles: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});\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 = htmlContentLightTiles();\n\n  return element;\n};\n\nconst TemplateBigTiles: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});\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 = htmlContentBigTiles();\n\n  return element;\n};\n\nexport const Cards = TemplateCards.bind({});\nCards.args = {\n  isMasonry: true,\n  colsDesktop: 3,\n  colsTablet: 2,\n  colsMobile: 1,\n};\n\nexport const IconTiles = TemplateIconTiles.bind({});\nIconTiles.args = {\n  isMasonry: true,\n  colsDesktop: 3,\n  colsTablet: 2,\n  colsMobile: 1,\n};\n\nexport const LightTiles = TemplateLightTiles.bind({});\nLightTiles.args = {\n  isMasonry: true,\n  colsDesktop: 3,\n  colsTablet: 2,\n  colsMobile: 1,\n};\n\nexport const BigTiles = TemplateBigTiles.bind({});\nBigTiles.args = {\n  isMasonry: true,\n  colsDesktop: 3,\n  colsTablet: 2,\n  colsMobile: 1,\n};\n"]}
+{"version":3,"file":"spw-mosaic.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-mosaic/spw-mosaic.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,MAAM,cAAc,CAAC;AAEtE,MAAM,UAAU,GAAG,YAAY,CAAC;AAEhC,MAAM,gBAAgB,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAE7C,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,0CAA0C;IACjD,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;SAIV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,gBAAgB;IACvB,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EjB,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB;IAC3B,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CjB,CAAC;AACJ,CAAC;AAED,SAAS,qBAAqB;IAC5B,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;GAgBjB,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB;IAC1B,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;GAgBjB,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,GAAW;IAC/B,OAAO,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AACnE,CAAC;AAED,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,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;YACnC,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;QACtC,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,iBAAiB,GAAY,IAAI,CAAC,EAAE;IACxC,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,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;YACnC,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;QACtC,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,oBAAoB,EAAE,CAAC;IAE3C,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,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;YACnC,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;QACtC,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,EAAE,CAAC;IAE5C,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAY,IAAI,CAAC,EAAE;IACvC,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,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;YACnC,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;QACtC,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,mBAAmB,EAAE,CAAC;IAE1C,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,KAAK,CAAC,IAAI,GAAG;IACX,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,CAAC;IACd,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,CAAC;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,SAAS,CAAC,IAAI,GAAG;IACf,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,CAAC;IACd,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,CAAC;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtD,UAAU,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,CAAC;IACd,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,CAAC;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,QAAQ,CAAC,IAAI,GAAG;IACd,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,CAAC;IACd,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,CAAC;CACd,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 } from '@utils/utils';\n\nconst elementTag = 'spw-mosaic';\n\nconst subComponentTags = ['spw-mosaic-item'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: \"Organismes/Mosaique d'éléments (masonry)\",\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\nPermet d'afficher une grille d'éléments sous la forme d'un masonry.\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContentCards() {\n  return /* HTML */ `\n    <spw-mosaic-item>\n      <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n        <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n          <spw-card-subtags>\n            <spw-card-subtag-item link=\"http://google.be\">Sous-tag 1</spw-card-subtag-item>\n            <spw-card-subtag-item link=\"http://google.be\">Sous-tag 2</spw-card-subtag-item>\n          </spw-card-subtags>\n          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n          <spw-card-excerpt>\n            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n          </spw-card-excerpt>\n        </spw-card-content>\n      </spw-card>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n        <spw-card-image label=\"Tag\">\n          <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n        </spw-card-image>\n        <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n          <spw-card-excerpt>\n            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n          </spw-card-excerpt>\n        </spw-card-content>\n      </spw-card>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n        <spw-card-image label=\"Tag\">\n          <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n        </spw-card-image>\n        <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n          <spw-card-title>Lorem ipsum dolor sit</spw-card-title>\n          <spw-card-excerpt>\n            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n          </spw-card-excerpt>\n        </spw-card-content>\n      </spw-card>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n        <spw-card-image label=\"Tag\">\n          <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n        </spw-card-image>\n        <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n          <spw-card-excerpt>\n            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n          </spw-card-excerpt>\n        </spw-card-content>\n      </spw-card>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n        <spw-card-image label=\"Tag\">\n          <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n        </spw-card-image>\n        <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n          <spw-card-excerpt>\n            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n          </spw-card-excerpt>\n        </spw-card-content>\n      </spw-card>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n        <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n          <spw-card-title>Lorem ipsum dolor sit amet</spw-card-title>\n          <spw-card-excerpt>\n            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n          </spw-card-excerpt>\n        </spw-card-content>\n      </spw-card>\n    </spw-mosaic-item>\n  `;\n}\n\nfunction htmlContentIconTiles() {\n  return /* HTML */ `\n    <spw-mosaic-item>\n      <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n        <spw-icon icon=\"fa-power-off\"></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      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n        <spw-icon icon=\"fa-map-location-dot\"></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      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\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      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n        <spw-icon icon=\"fa-user\"></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      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n        <spw-icon icon=\"fa-image\"></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      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n        <spw-icon icon=\"fa-bell\"></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      </spw-tile>\n    </spw-mosaic-item>\n  `;\n}\n\nfunction htmlContentLightTiles() {\n  return /* HTML */ `\n    <spw-mosaic-item>\n      <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n        <spw-tile-title>Titre de ma tuile</spw-tile-title>\n      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n        <spw-tile-title>Titre de ma tuile</spw-tile-title>\n      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n        <spw-tile-title>Titre de ma tuile</spw-tile-title>\n      </spw-tile>\n    </spw-mosaic-item>\n  `;\n}\n\nfunction htmlContentBigTiles() {\n  return /* HTML */ `\n    <spw-mosaic-item>\n      <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n        <spw-tile-title>Titre de ma tuile</spw-tile-title>\n      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n        <spw-tile-title>Titre de ma tuile</spw-tile-title>\n      </spw-tile>\n    </spw-mosaic-item>\n    <spw-mosaic-item>\n      <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n        <spw-tile-title>Titre de ma tuile</spw-tile-title>\n      </spw-tile>\n    </spw-mosaic-item>\n  `;\n}\n\nfunction camelToKebab(str: string) {\n  return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);\n}\n\nconst TemplateCards: 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      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 = htmlContentCards();\n\n  return element;\n};\n\nconst TemplateIconTiles: 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      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 = htmlContentIconTiles();\n\n  return element;\n};\n\nconst TemplateLightTiles: 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      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 = htmlContentLightTiles();\n\n  return element;\n};\n\nconst TemplateBigTiles: 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      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 = htmlContentBigTiles();\n\n  return element;\n};\n\nexport const Cards = TemplateCards.bind({});\nCards.args = {\n  isMasonry: true,\n  colsDesktop: 3,\n  colsTablet: 2,\n  colsMobile: 1,\n};\n\nexport const IconTiles = TemplateIconTiles.bind({});\nIconTiles.args = {\n  isMasonry: true,\n  colsDesktop: 3,\n  colsTablet: 2,\n  colsMobile: 1,\n};\n\nexport const LightTiles = TemplateLightTiles.bind({});\nLightTiles.args = {\n  isMasonry: true,\n  colsDesktop: 3,\n  colsTablet: 2,\n  colsMobile: 1,\n};\n\nexport const BigTiles = TemplateBigTiles.bind({});\nBigTiles.args = {\n  isMasonry: true,\n  colsDesktop: 3,\n  colsTablet: 2,\n  colsMobile: 1,\n};\n"]}

package/dist/collection/stories/organisms/spw-sidebar/spw-sidebar.stories.js

@@ -80,7 +80,8 @@ function htmlContentDefault() {
 }
 const TemplateDefault = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: 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);

package/dist/collection/stories/organisms/spw-sidebar/spw-sidebar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-sidebar.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-sidebar/spw-sidebar.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,aAAa,CAAC;AAEjC,MAAM,gBAAgB,GAAG,CAAC,kCAAkC,EAAE,iCAAiC,EAAE,6BAA6B,CAAC,CAAC;AAEhI,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,oBAAoB;IAC3B,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;IACzB,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CjB,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAY,IAAI,CAAC,EAAE;IACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;IAElG,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,EAAE,CAAC;IAEzC,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,eAAe,EAAE,KAAK;CACvB,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-sidebar';\n\nconst subComponentTags = ['spw-sidebar-navigation-separator', 'spw-sidebar-navigation-dropdown', 'spw-sidebar-navigation-item'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: 'Organismes/Sidebar',\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\nPanneau latéral pour navigation ou actions contextuelles. \n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/30d84f-sidebar)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContentDefault() {\n  return /* HTML */ `\n    <div slot=\"navigation-top\">\n      <spw-sidebar-navigation-item icon=\"fa-home\" tooltip-title=\"Accueil\" active> Accueil </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n      <spw-sidebar-navigation-item icon=\"fa-file\" bubble=\"3\" tooltip-title=\"Documents\">\n        Documents\n        <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n          <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n          <spw-sidebar-navigation-item>\n            Sous-catégorie\n            <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n            </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n          >\n          <spw-sidebar-navigation-item>\n            Sous-catégorie\n            <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n            </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n          >\n          <spw-sidebar-navigation-item>\n            Sous-catégorie\n            <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n            </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n          >\n        </spw-sidebar-navigation-dropdown>\n      </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-item icon=\"fa-calendar\" tooltip-title=\"Calendrier\"> Calendrier </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-item icon=\"fa-envelope\" tooltip-title=\"Messages\" bubble=\"9\"> Messages </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-item icon=\"fa-chart-sine\" tooltip-title=\"Statistiques\"> Statistiques </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-item icon=\"fa-cloud\" tooltip-title=\"Fichiers\"> Fichiers </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-item icon=\"fa-user-shield\" tooltip-title=\"Permissions\" disabled> Permissions </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n      <spw-sidebar-navigation-item icon=\"fa-address-book\" tooltip-title=\"Annuaire\" bubbles=\"1\"> Annuaire </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-item icon=\"fa-moon\" tooltip-title=\"Mode sombre\"> Mode sombre </spw-sidebar-navigation-item>\n    </div>\n    <div slot=\"navigation-bottom\">\n      <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n      <spw-sidebar-navigation-item icon=\"fa-globe\" tooltip-title=\"Liens utiles\"> Liens utiles </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-item icon=\"fa-circle-question\" tooltip-title=\"Aide\"> Aide </spw-sidebar-navigation-item>\n    </div>\n  `;\n}\n\nconst TemplateDefault: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});\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();\n\n  return element;\n};\n\nexport const Default = TemplateDefault.bind({});\nDefault.args = {\n  defaultExpanded: false,\n};\n"]}
+{"version":3,"file":"spw-sidebar.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-sidebar/spw-sidebar.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,aAAa,CAAC;AAEjC,MAAM,gBAAgB,GAAG,CAAC,kCAAkC,EAAE,iCAAiC,EAAE,6BAA6B,CAAC,CAAC;AAEhI,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,oBAAoB;IAC3B,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;IACzB,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CjB,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,EAAE,CAAC;IAEzC,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,eAAe,EAAE,KAAK;CACvB,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-sidebar';\n\nconst subComponentTags = ['spw-sidebar-navigation-separator', 'spw-sidebar-navigation-dropdown', 'spw-sidebar-navigation-item'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: 'Organismes/Sidebar',\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\nPanneau latéral pour navigation ou actions contextuelles. \n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/30d84f-sidebar)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContentDefault() {\n  return /* HTML */ `\n    <div slot=\"navigation-top\">\n      <spw-sidebar-navigation-item icon=\"fa-home\" tooltip-title=\"Accueil\" active> Accueil </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n      <spw-sidebar-navigation-item icon=\"fa-file\" bubble=\"3\" tooltip-title=\"Documents\">\n        Documents\n        <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n          <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n          <spw-sidebar-navigation-item>\n            Sous-catégorie\n            <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n            </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n          >\n          <spw-sidebar-navigation-item>\n            Sous-catégorie\n            <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n            </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n          >\n          <spw-sidebar-navigation-item>\n            Sous-catégorie\n            <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n              <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n            </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n          >\n        </spw-sidebar-navigation-dropdown>\n      </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-item icon=\"fa-calendar\" tooltip-title=\"Calendrier\"> Calendrier </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-item icon=\"fa-envelope\" tooltip-title=\"Messages\" bubble=\"9\"> Messages </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-item icon=\"fa-chart-sine\" tooltip-title=\"Statistiques\"> Statistiques </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-item icon=\"fa-cloud\" tooltip-title=\"Fichiers\"> Fichiers </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-item icon=\"fa-user-shield\" tooltip-title=\"Permissions\" disabled> Permissions </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n      <spw-sidebar-navigation-item icon=\"fa-address-book\" tooltip-title=\"Annuaire\" bubbles=\"1\"> Annuaire </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-item icon=\"fa-moon\" tooltip-title=\"Mode sombre\"> Mode sombre </spw-sidebar-navigation-item>\n    </div>\n    <div slot=\"navigation-bottom\">\n      <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n      <spw-sidebar-navigation-item icon=\"fa-globe\" tooltip-title=\"Liens utiles\"> Liens utiles </spw-sidebar-navigation-item>\n      <spw-sidebar-navigation-item icon=\"fa-circle-question\" tooltip-title=\"Aide\"> Aide </spw-sidebar-navigation-item>\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();\n\n  return element;\n};\n\nexport const Default = TemplateDefault.bind({});\nDefault.args = {\n  defaultExpanded: false,\n};\n"]}

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

@@ -35,7 +35,8 @@ function camelToKebab(str) {
 }
 const Template = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
     Object.entries(args).forEach(([key, val]) => {
         if (masterProps.includes(key)) {
             const kebabKey = camelToKebab(key);
@@ -144,7 +145,46 @@ TableWithActionsAndTags.args = {
         <spw-table-header width="20" scope="col">
           <spw-checkbox></spw-checkbox>
         </spw-table-header>
-        <spw-table-header column-id="name" sortable scope="col">Nom</spw-table-header>
+        <spw-table-header tooltip-title="Information" tooltip-text="Ceci est une phrase d'exemple" column-id="name" sortable scope="col">
+          Nom
+          <spw-dropdown slot="filters" content-width="360" direction="bottom">
+            <spw-icon icon="fa-filter">
+              <div slot="dropdownContent">
+                <h3 class="spw-ds-typography-heading-03">Filtrer la colonne nom</h3>
+                <form>
+                  <spw-text-field
+                    required
+                    size="small"
+                    max-length="100"
+                    min-length="3"
+                    label="Champ texte"
+                    type="text"
+                    placeholder="Entrez un texte"
+                    name="firstname"
+                    class="mb-2"
+                  ></spw-text-field>
+                  <spw-custom-select
+                    label="Mon label"
+                    placeholder="Sélectionnez une option"
+                    name="mon-super-select"
+                    required="true"
+                    multiple="true"
+                    id="mon-custom-select-dynamique"
+                    is-search="true"
+                    class="mb-3"
+                  ></spw-custom-select>
+                  <spw-group label="Des choix horizontaux" required="true" type="radios" orientation="horizontal">
+                    <spw-radio name="radio1" value="option1">Un input radio</spw-radio>
+                    <spw-radio name="radio1" value="option2">Un input radio</spw-radio>
+                  </spw-group>
+                </form>
+                <spw-group orientation="vertical" is-full-width>
+                  <spw-button class="mt-3" is-full-width variant="primary" size="small">Appliquer</spw-button>
+                </spw-group>
+              </div>
+            </spw-icon>
+          </spw-dropdown>
+        </spw-table-header>
         <spw-table-header column-id="age" sortable scope="col">Âge</spw-table-header>
         <spw-table-header column-id="status" sortable scope="col">Statut</spw-table-header>
         <spw-table-header text-align="center" scope="col">Actions</spw-table-header>
@@ -158,9 +198,62 @@ TableWithActionsAndTags.args = {
         <spw-table-cell width="40"><spw-tag size="small" variant="green">Validé</spw-tag></spw-table-cell>
         <spw-table-cell padding="small" width="10">
           <div class="d-flex">
-            <spw-button size="small" variant="secondary" class="mx-1"><spw-icon icon="fa-trash"></spw-icon></spw-button>
-            <spw-button size="small" variant="secondary" class="mx-1"><spw-icon icon="fa-edit"></spw-icon></spw-button>
-            <spw-button size="small" variant="secondary" class="mx-1"><spw-icon icon="fa-ellipsis"></spw-icon></spw-button>
+            <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
+            <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
+            <spw-dropdown direction="left">
+              <spw-button icon="fa-ellipsis-vertical" is-icon-only="true" size="small" variant="secondary" class="mx-1">
+                <div slot="dropdownContent">
+                  <spw-group orientation="vertical" is-full-width>
+                    <spw-button is-full-width variant="secondary" size="small">Modifier</spw-button>
+                    <spw-button is-full-width variant="secondary" size="small">Supprimer</spw-button>
+                  </spw-group>
+                </div>
+              </spw-button>
+            </spw-dropdown>
+          </div>
+        </spw-table-cell>
+      </spw-table-row>
+      <spw-table-row state="disabled">
+        <spw-table-cell width="20"><spw-checkbox disabled="true"></spw-checkbox></spw-table-cell>
+        <spw-table-cell>Marie</spw-table-cell>
+        <spw-table-cell>22</spw-table-cell>
+        <spw-table-cell width="40"><spw-tag size="small" variant="green">Validé</spw-tag></spw-table-cell>
+        <spw-table-cell padding="small" width="10">
+          <div class="d-flex">
+            <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
+            <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
+            <spw-dropdown direction="left">
+              <spw-button icon="fa-ellipsis-vertical" is-icon-only="true" size="small" variant="secondary" class="mx-1">
+                <div slot="dropdownContent">
+                  <spw-group orientation="vertical" is-full-width>
+                    <spw-button is-full-width variant="secondary" size="small">Modifier</spw-button>
+                    <spw-button is-full-width variant="secondary" size="small">Supprimer</spw-button>
+                  </spw-group>
+                </div>
+              </spw-button>
+            </spw-dropdown>
+          </div>
+        </spw-table-cell>
+      </spw-table-row>
+      <spw-table-row state="selected">
+        <spw-table-cell width="20"><spw-checkbox checked="true"></spw-checkbox></spw-table-cell>
+        <spw-table-cell>Thomas</spw-table-cell>
+        <spw-table-cell>37</spw-table-cell>
+        <spw-table-cell width="40"><spw-tag size="small" variant="green">Validé</spw-tag></spw-table-cell>
+        <spw-table-cell padding="small" width="10">
+          <div class="d-flex">
+            <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
+            <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
+            <spw-dropdown direction="left">
+              <spw-button icon="fa-ellipsis-vertical" is-icon-only="true" size="small" variant="secondary" class="mx-1">
+                <div slot="dropdownContent">
+                  <spw-group orientation="vertical" is-full-width>
+                    <spw-button is-full-width variant="secondary" size="small">Modifier</spw-button>
+                    <spw-button is-full-width variant="secondary" size="small">Supprimer</spw-button>
+                  </spw-group>
+                </div>
+              </spw-button>
+            </spw-dropdown>
           </div>
         </spw-table-cell>
       </spw-table-row>

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

@@ -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 masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});\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 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\" 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\" class=\"mx-1\"><spw-icon icon=\"fa-trash\"></spw-icon></spw-button>\n            <spw-button size=\"small\" variant=\"secondary\" class=\"mx-1\"><spw-icon icon=\"fa-edit\"></spw-icon></spw-button>\n            <spw-button size=\"small\" variant=\"secondary\" class=\"mx-1\"><spw-icon icon=\"fa-ellipsis\"></spw-icon></spw-button>\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"]}
+{"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"]}

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

@@ -133,7 +133,8 @@ function htmlContentMultiLevel(slotArgs) {
 }
 const TemplateDefault = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: 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);
@@ -147,7 +148,8 @@ const TemplateDefault = args => {
 };
 const TemplateBox = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: 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);
@@ -161,7 +163,8 @@ const TemplateBox = args => {
 };
 const TemplateMultiLevel = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: 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);

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

@@ -1 +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é. \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 masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});\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 masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});\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 masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});\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"]}
+{"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é. \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"]}

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

@@ -45,7 +45,8 @@ function htmlContentBig() {
 }
 const TemplateIcon = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: 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);
@@ -59,7 +60,8 @@ const TemplateIcon = args => {
 };
 const TemplateLight = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: 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);
@@ -73,7 +75,8 @@ const TemplateLight = args => {
 };
 const TemplateBig = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: 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);