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

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

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

Files changed (782) hide show

package/dist/collection/stories/organisms/spw-toc/spw-toc.stories.js ADDED Viewed

@@ -0,0 +1,256 @@
+let componentsData;
+try {
+    componentsData = require('../../../../dist/components_json.json');
+}
+catch (error) {
+    console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');
+    componentsData = {};
+}
+import { withComponentControls, extractArgTypes } from "../../../utils/utils";
+const elementTag = 'spw-toc';
+const subComponentTags = ['spw-toc-container', 'spw-toc-navigation'];
+const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags));
+const meta = {
+    title: 'Organismes/Table des matières',
+    component: elementTag,
+    argTypes,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
+Le composant Table des matières / Table of contents (TOC) génère automatiquement une table des matières interactive basée sur les titres (h2-h6) présents dans le contenu. Il permet une navigation fluide dans la page avec suivi de progression visuel.
+## Structure
+Le composant se compose de trois parties :
+- spw-toc : Le conteneur principal qui englobe tout le contenu
+- spw-toc-container : Contient le contenu avec les titres à indexer
+- spw-toc-navigation : Affiche la navigation générée automatiquement
+## Fonctionnalités
+- Génération automatique des liens de navigation basée sur les titres h2-h6
+- Création automatique d'IDs slugifiés pour les titres qui n'en ont pas
+- Suivi visuel de la progression lors du scroll
+- Navigation smooth scroll vers les sections
+- Détection automatique de la section active
+- Barre de progression pour les sections principales (h2)
+- Support du responsive design avec position sticky
+        `,
+            },
+        },
+    },
+};
+export default meta;
+function htmlContentWithAccordions() {
+    return /* HTML */ `
+    <spw-toc>
+      <section class="spw-ds-template-generic pt-3 pb-5">
+        <div class="spw-ds-container">
+          <spw-breadcrumb variant="default" class="mb-5">
+            <spw-breadcrumb-item href="#">Accueil</spw-breadcrumb-item>
+            <spw-breadcrumb-item href="#">Aide</spw-breadcrumb-item>
+            <spw-breadcrumb-item>FAQ</spw-breadcrumb-item>
+          </spw-breadcrumb>
+          <h1 class="spw-ds-typography-heading-01 mb-4">Foire aux questions</h1>
+          <div class="spw-ds-template-generic__row">
+            <div class="spw-ds-template-generic__content">
+              <p class="spw-ds-typography-lead-body mb-5">
+                Si vous cherchez des aides, si vous avez des questions à propos d'un bien, nous vous invitons à consulter cette FAQ. Vous ne trouvez pas la réponse à votre question
+                ? N'hésitez pas à nous contacter.
+              </p>
+              <spw-toc-container>
+                <h2 class="spw-ds-typography-heading-02 mb-3">Questions fréquemment posées</h2>
+                <spw-accordion background="white">
+                  <spw-accordion-item>
+                    <spw-accordion-title slot="title">Comment obtenir une aide financière ?</spw-accordion-title>
+                    <spw-accordion-content slot="content">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
+                      diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non.
+                    </spw-accordion-content>
+                  </spw-accordion-item>
+                  <spw-accordion-item>
+                    <spw-accordion-title slot="title">Quels sont les délais de traitement ?</spw-accordion-title>
+                    <spw-accordion-content slot="content">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
+                      diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium.
+                    </spw-accordion-content>
+                  </spw-accordion-item>
+                  <spw-accordion-item>
+                    <spw-accordion-title slot="title">Puis-je modifier ma demande ?</spw-accordion-title>
+                    <spw-accordion-content slot="content">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
+                      diam. Ut malesuada ante et scelerisque eleifend.
+                    </spw-accordion-content>
+                  </spw-accordion-item>
+                </spw-accordion>
+                <h2 class="spw-ds-typography-heading-02 mt-5 mb-3">À propos des documents</h2>
+                <spw-accordion background="white">
+                  <spw-accordion-item>
+                    <spw-accordion-title slot="title">Quels documents dois-je fournir ?</spw-accordion-title>
+                    <spw-accordion-content slot="content">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
+                      diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non.
+                    </spw-accordion-content>
+                  </spw-accordion-item>
+                  <spw-accordion-item>
+                    <spw-accordion-title slot="title">Comment envoyer mes documents ?</spw-accordion-title>
+                    <spw-accordion-content slot="content">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
+                      diam.
+                    </spw-accordion-content>
+                  </spw-accordion-item>
+                  <spw-accordion-item>
+                    <spw-accordion-title slot="title">Mes documents sont-ils sécurisés ?</spw-accordion-title>
+                    <spw-accordion-content slot="content">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
+                      diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non.
+                    </spw-accordion-content>
+                  </spw-accordion-item>
+                </spw-accordion>
+                <h2 class="spw-ds-typography-heading-02 mt-5 mb-3">Concernant le suivi</h2>
+                <spw-accordion background="white">
+                  <spw-accordion-item>
+                    <spw-accordion-title slot="title">Comment suivre ma demande ?</spw-accordion-title>
+                    <spw-accordion-content slot="content">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
+                      diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non.
+                    </spw-accordion-content>
+                  </spw-accordion-item>
+                  <spw-accordion-item>
+                    <spw-accordion-title slot="title">Je ne reçois pas de notifications</spw-accordion-title>
+                    <spw-accordion-content slot="content">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut
+                      diam. Ut malesuada ante et scelerisque eleifend.
+                    </spw-accordion-content>
+                  </spw-accordion-item>
+                </spw-accordion>
+              </spw-toc-container>
+            </div>
+            <aside class="spw-ds-template-generic__aside spw-ds-template-generic__aside--top-mobile spw-ds-template-generic__aside--is-sticky">
+              <div class="spw-ds-template-generic__aside-content spw-ds-template-generic__aside-content--top mb-4">
+                <h2 class="spw-ds-typography-heading-03 mb-3">Sommaire</h2>
+                <spw-toc-navigation></spw-toc-navigation>
+              </div>
+              <div class="spw-ds-template-generic__aside-content spw-ds-template-generic__aside-content--bottom">
+                <h2 class="spw-ds-typography-heading-03 mb-3">Besoin d'aide ?</h2>
+                <p class="spw-ds-typography-body-01 mb-3">Contactez-nous si vous ne trouvez pas la réponse à votre question.</p>
+                <spw-separator class="my-3"></spw-separator>
+                <spw-group orientation="vertical">
+                  <spw-link variant="primary" icon="fa-phone" icon-position="left" href="tel:081654449">081 / 65 44 49</spw-link>
+                  <spw-link variant="primary" icon="fa-envelope" icon-position="left" href="mailto:mail@mail.be">mail@mail.be</spw-link>
+                  <spw-link variant="primary" icon="fa-globe" icon-position="left" href="#">www.wallonie.be</spw-link>
+                </spw-group>
+                <spw-button is-full-width class="mt-4 w-100" variant="primary">Formulaire en ligne</spw-button>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </section>
+    </spw-toc>
+  `;
+}
+function htmlContentSimple() {
+    return /* HTML */ `
+    <spw-toc>
+      <section class="spw-ds-template-generic pt-3 pb-5">
+        <div class="spw-ds-container">
+          <h1 class="spw-ds-typography-heading-01 mb-4">Guide utilisateur</h1>
+          <div class="spw-ds-template-generic__row">
+            <div class="spw-ds-template-generic__content">
+              <spw-toc-container>
+                <h2 class="spw-ds-typography-heading-02 mb-3">Introduction</h2>
+                <p class="spw-ds-typography-body-01 mb-4">
+                  Bienvenue dans notre guide utilisateur. Ce document vous accompagnera dans la découverte de toutes les fonctionnalités disponibles.
+                </p>
+                <h3 class="spw-ds-typography-heading-03 mb-2">Pourquoi ce guide ?</h3>
+                <p class="spw-ds-typography-body-01 mb-4">Ce guide a été conçu pour vous aider à tirer le meilleur parti de nos services.</p>
+                <h3 class="spw-ds-typography-heading-03 mb-2">À qui s'adresse-t-il ?</h3>
+                <p class="spw-ds-typography-body-01 mb-4">Ce guide s'adresse à tous les utilisateurs, débutants comme avancés.</p>
+                <h2 class="spw-ds-typography-heading-02 mt-5 mb-3">Premiers pas</h2>
+                <p class="spw-ds-typography-body-01 mb-4">Commencez ici si vous êtes nouveau sur la plateforme.</p>
+                <h3 class="spw-ds-typography-heading-03 mb-2">Créer un compte</h3>
+                <p class="spw-ds-typography-body-01 mb-4">
+                  La première étape consiste à créer votre compte. Cliquez sur le bouton "S'inscrire" en haut à droite de la page d'accueil.
+                </p>
+                <h3 class="spw-ds-typography-heading-03 mb-2">Personnaliser votre profil</h3>
+                <p class="spw-ds-typography-body-01 mb-4">Une fois votre compte créé, n'oubliez pas de personnaliser votre profil avec vos informations.</p>
+                <h2 class="spw-ds-typography-heading-02 mt-5 mb-3">Fonctionnalités avancées</h2>
+                <p class="spw-ds-typography-body-01 mb-4">Découvrez les fonctionnalités plus avancées de la plateforme.</p>
+                <h3 class="spw-ds-typography-heading-03 mb-2">Gestion des documents</h3>
+                <p class="spw-ds-typography-body-01 mb-4">Apprenez à organiser et gérer efficacement vos documents.</p>
+                <h3 class="spw-ds-typography-heading-03 mb-2">Collaboration</h3>
+                <p class="spw-ds-typography-body-01 mb-4">Travaillez en équipe grâce aux outils de collaboration intégrés.</p>
+              </spw-toc-container>
+            </div>
+            <aside class="spw-ds-template-generic__aside spw-ds-template-generic__aside--is-sticky">
+              <div class="spw-ds-template-generic__aside-content">
+                <h2 class="spw-ds-typography-heading-03 mb-3">Sommaire</h2>
+                <spw-toc-navigation></spw-toc-navigation>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </section>
+    </spw-toc>
+  `;
+}
+const TemplateFAQ = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = htmlContentWithAccordions();
+    return wrapper;
+};
+const TemplateSimple = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = htmlContentSimple();
+    return wrapper;
+};
+export const FAQ = TemplateFAQ.bind({});
+FAQ.parameters = {
+    docs: {
+        description: {
+            story: `
+Exemple complet d'une page FAQ avec Table of Contents. Le composant génère automatiquement la navigation basée sur les titres h2 présents dans le contenu.
+La navigation affiche :
+- Les sections principales (h2) avec une barre de progression
+- Un indicateur visuel de la section active
+- Un smooth scroll vers la section cliquée
+      `,
+        },
+    },
+};
+export const Simple = TemplateSimple.bind({});
+Simple.parameters = {
+    docs: {
+        description: {
+            story: `
+Exemple simplifié avec un guide utilisateur. La table des matières génère automatiquement les liens pour tous les niveaux de titres (h2, h3, h4, etc.).
+Les titres sans ID se voient attribuer automatiquement un ID slugifié basé sur leur contenu textuel.
+      `,
+        },
+    },
+};
+//# sourceMappingURL=spw-toc.stories.js.map

package/dist/collection/stories/organisms/spw-toc/spw-toc.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"spw-toc.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-toc/spw-toc.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,SAAS,CAAC;AAE7B,MAAM,gBAAgB,GAAG,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC;AAErE,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,+BAA+B;IACtC,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;SAqBV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,yBAAyB;IAChC,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiHjB,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB;IACxB,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDjB,CAAC;AACJ,CAAC;AAED,MAAM,WAAW,GAAY,GAAG,EAAE;IAChC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG,yBAAyB,EAAE,CAAC;IAChD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,cAAc,GAAY,GAAG,EAAE;IACnC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG,iBAAiB,EAAE,CAAC;IACxC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,GAAG,CAAC,UAAU,GAAG;IACf,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE;;;;;;;OAON;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,MAAM,CAAC,UAAU,GAAG;IAClB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE;;;;OAIN;SACF;KACF;CACF,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes } from '@utils/utils';\n\nconst elementTag = 'spw-toc';\n\nconst subComponentTags = ['spw-toc-container', 'spw-toc-navigation'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Table des matières',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLe composant Table des matières / Table of contents (TOC) génère automatiquement une table des matières interactive basée sur les titres (h2-h6) présents dans le contenu. Il permet une navigation fluide dans la page avec suivi de progression visuel.\n\n## Structure\n\nLe composant se compose de trois parties :\n- spw-toc : Le conteneur principal qui englobe tout le contenu\n- spw-toc-container : Contient le contenu avec les titres à indexer\n- spw-toc-navigation : Affiche la navigation générée automatiquement\n\n## Fonctionnalités\n\n- Génération automatique des liens de navigation basée sur les titres h2-h6\n- Création automatique d'IDs slugifiés pour les titres qui n'en ont pas\n- Suivi visuel de la progression lors du scroll\n- Navigation smooth scroll vers les sections\n- Détection automatique de la section active\n- Barre de progression pour les sections principales (h2)\n- Support du responsive design avec position sticky\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentWithAccordions() {\n return /* HTML */ `\n <spw-toc>\n <section class=\"spw-ds-template-generic pt-3 pb-5\">\n <div class=\"spw-ds-container\">\n <spw-breadcrumb variant=\"default\" class=\"mb-5\">\n <spw-breadcrumb-item href=\"#\">Accueil</spw-breadcrumb-item>\n <spw-breadcrumb-item href=\"#\">Aide</spw-breadcrumb-item>\n <spw-breadcrumb-item>FAQ</spw-breadcrumb-item>\n </spw-breadcrumb>\n <h1 class=\"spw-ds-typography-heading-01 mb-4\">Foire aux questions</h1>\n\n <div class=\"spw-ds-template-generic__row\">\n <div class=\"spw-ds-template-generic__content\">\n <p class=\"spw-ds-typography-lead-body mb-5\">\n Si vous cherchez des aides, si vous avez des questions à propos d'un bien, nous vous invitons à consulter cette FAQ. Vous ne trouvez pas la réponse à votre question\n ? N'hésitez pas à nous contacter.\n </p>\n\n <spw-toc-container>\n <h2 class=\"spw-ds-typography-heading-02 mb-3\">Questions fréquemment posées</h2>\n\n <spw-accordion background=\"white\">\n <spw-accordion-item>\n <spw-accordion-title slot=\"title\">Comment obtenir une aide financière ?</spw-accordion-title>\n <spw-accordion-content slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut\n diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non.\n </spw-accordion-content>\n </spw-accordion-item>\n <spw-accordion-item>\n <spw-accordion-title slot=\"title\">Quels sont les délais de traitement ?</spw-accordion-title>\n <spw-accordion-content slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut\n diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium.\n </spw-accordion-content>\n </spw-accordion-item>\n <spw-accordion-item>\n <spw-accordion-title slot=\"title\">Puis-je modifier ma demande ?</spw-accordion-title>\n <spw-accordion-content slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut\n diam. Ut malesuada ante et scelerisque eleifend.\n </spw-accordion-content>\n </spw-accordion-item>\n </spw-accordion>\n\n <h2 class=\"spw-ds-typography-heading-02 mt-5 mb-3\">À propos des documents</h2>\n\n <spw-accordion background=\"white\">\n <spw-accordion-item>\n <spw-accordion-title slot=\"title\">Quels documents dois-je fournir ?</spw-accordion-title>\n <spw-accordion-content slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut\n diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non.\n </spw-accordion-content>\n </spw-accordion-item>\n <spw-accordion-item>\n <spw-accordion-title slot=\"title\">Comment envoyer mes documents ?</spw-accordion-title>\n <spw-accordion-content slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut\n diam.\n </spw-accordion-content>\n </spw-accordion-item>\n <spw-accordion-item>\n <spw-accordion-title slot=\"title\">Mes documents sont-ils sécurisés ?</spw-accordion-title>\n <spw-accordion-content slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut\n diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non.\n </spw-accordion-content>\n </spw-accordion-item>\n </spw-accordion>\n\n <h2 class=\"spw-ds-typography-heading-02 mt-5 mb-3\">Concernant le suivi</h2>\n\n <spw-accordion background=\"white\">\n <spw-accordion-item>\n <spw-accordion-title slot=\"title\">Comment suivre ma demande ?</spw-accordion-title>\n <spw-accordion-content slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut\n diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non.\n </spw-accordion-content>\n </spw-accordion-item>\n <spw-accordion-item>\n <spw-accordion-title slot=\"title\">Je ne reçois pas de notifications</spw-accordion-title>\n <spw-accordion-content slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut\n diam. Ut malesuada ante et scelerisque eleifend.\n </spw-accordion-content>\n </spw-accordion-item>\n </spw-accordion>\n </spw-toc-container>\n </div>\n\n <aside class=\"spw-ds-template-generic__aside spw-ds-template-generic__aside--top-mobile spw-ds-template-generic__aside--is-sticky\">\n <div class=\"spw-ds-template-generic__aside-content spw-ds-template-generic__aside-content--top mb-4\">\n <h2 class=\"spw-ds-typography-heading-03 mb-3\">Sommaire</h2>\n <spw-toc-navigation></spw-toc-navigation>\n </div>\n <div class=\"spw-ds-template-generic__aside-content spw-ds-template-generic__aside-content--bottom\">\n <h2 class=\"spw-ds-typography-heading-03 mb-3\">Besoin d'aide ?</h2>\n <p class=\"spw-ds-typography-body-01 mb-3\">Contactez-nous si vous ne trouvez pas la réponse à votre question.</p>\n <spw-separator class=\"my-3\"></spw-separator>\n <spw-group orientation=\"vertical\">\n <spw-link variant=\"primary\" icon=\"fa-phone\" icon-position=\"left\" href=\"tel:081654449\">081 / 65 44 49</spw-link>\n <spw-link variant=\"primary\" icon=\"fa-envelope\" icon-position=\"left\" href=\"mailto:mail@mail.be\">mail@mail.be</spw-link>\n <spw-link variant=\"primary\" icon=\"fa-globe\" icon-position=\"left\" href=\"#\">www.wallonie.be</spw-link>\n </spw-group>\n <spw-button is-full-width class=\"mt-4 w-100\" variant=\"primary\">Formulaire en ligne</spw-button>\n </div>\n </aside>\n </div>\n </div>\n </section>\n </spw-toc>\n `;\n}\n\nfunction htmlContentSimple() {\n return /* HTML */ `\n <spw-toc>\n <section class=\"spw-ds-template-generic pt-3 pb-5\">\n <div class=\"spw-ds-container\">\n <h1 class=\"spw-ds-typography-heading-01 mb-4\">Guide utilisateur</h1>\n\n <div class=\"spw-ds-template-generic__row\">\n <div class=\"spw-ds-template-generic__content\">\n <spw-toc-container>\n <h2 class=\"spw-ds-typography-heading-02 mb-3\">Introduction</h2>\n <p class=\"spw-ds-typography-body-01 mb-4\">\n Bienvenue dans notre guide utilisateur. Ce document vous accompagnera dans la découverte de toutes les fonctionnalités disponibles.\n </p>\n\n <h3 class=\"spw-ds-typography-heading-03 mb-2\">Pourquoi ce guide ?</h3>\n <p class=\"spw-ds-typography-body-01 mb-4\">Ce guide a été conçu pour vous aider à tirer le meilleur parti de nos services.</p>\n\n <h3 class=\"spw-ds-typography-heading-03 mb-2\">À qui s'adresse-t-il ?</h3>\n <p class=\"spw-ds-typography-body-01 mb-4\">Ce guide s'adresse à tous les utilisateurs, débutants comme avancés.</p>\n\n <h2 class=\"spw-ds-typography-heading-02 mt-5 mb-3\">Premiers pas</h2>\n <p class=\"spw-ds-typography-body-01 mb-4\">Commencez ici si vous êtes nouveau sur la plateforme.</p>\n\n <h3 class=\"spw-ds-typography-heading-03 mb-2\">Créer un compte</h3>\n <p class=\"spw-ds-typography-body-01 mb-4\">\n La première étape consiste à créer votre compte. Cliquez sur le bouton \"S'inscrire\" en haut à droite de la page d'accueil.\n </p>\n\n <h3 class=\"spw-ds-typography-heading-03 mb-2\">Personnaliser votre profil</h3>\n <p class=\"spw-ds-typography-body-01 mb-4\">Une fois votre compte créé, n'oubliez pas de personnaliser votre profil avec vos informations.</p>\n\n <h2 class=\"spw-ds-typography-heading-02 mt-5 mb-3\">Fonctionnalités avancées</h2>\n <p class=\"spw-ds-typography-body-01 mb-4\">Découvrez les fonctionnalités plus avancées de la plateforme.</p>\n\n <h3 class=\"spw-ds-typography-heading-03 mb-2\">Gestion des documents</h3>\n <p class=\"spw-ds-typography-body-01 mb-4\">Apprenez à organiser et gérer efficacement vos documents.</p>\n\n <h3 class=\"spw-ds-typography-heading-03 mb-2\">Collaboration</h3>\n <p class=\"spw-ds-typography-body-01 mb-4\">Travaillez en équipe grâce aux outils de collaboration intégrés.</p>\n </spw-toc-container>\n </div>\n\n <aside class=\"spw-ds-template-generic__aside spw-ds-template-generic__aside--is-sticky\">\n <div class=\"spw-ds-template-generic__aside-content\">\n <h2 class=\"spw-ds-typography-heading-03 mb-3\">Sommaire</h2>\n <spw-toc-navigation></spw-toc-navigation>\n </div>\n </aside>\n </div>\n </div>\n </section>\n </spw-toc>\n `;\n}\n\nconst TemplateFAQ: StoryFn = () => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = htmlContentWithAccordions();\n return wrapper;\n};\n\nconst TemplateSimple: StoryFn = () => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = htmlContentSimple();\n return wrapper;\n};\n\nexport const FAQ = TemplateFAQ.bind({});\nFAQ.parameters = {\n docs: {\n description: {\n story: `\nExemple complet d'une page FAQ avec Table of Contents. Le composant génère automatiquement la navigation basée sur les titres h2 présents dans le contenu.\n\nLa navigation affiche :\n- Les sections principales (h2) avec une barre de progression\n- Un indicateur visuel de la section active\n- Un smooth scroll vers la section cliquée\n `,\n },\n },\n};\n\nexport const Simple = TemplateSimple.bind({});\nSimple.parameters = {\n docs: {\n description: {\n story: `\nExemple simplifié avec un guide utilisateur. La table des matières génère automatiquement les liens pour tous les niveaux de titres (h2, h3, h4, etc.).\n\nLes titres sans ID se voient attribuer automatiquement un ID slugifié basé sur leur contenu textuel.\n `,\n },\n },\n};\n"]}

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

@@ -21,7 +21,39 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="orange">En cours</spw-tag>
-Permet de définir une barre supérieure qui comprend le logo et une navigation secondaire dans le cadre d'un back-office.
+Le composant Topbar définit une barre supérieure horizontale pour les interfaces de back-office. Il affiche le logo, le titre de l'application et une baseline explicative, avec possibilité d'ajouter des éléments à droite.
+## Structure
+Le composant est un élément simple sans sous-composants :
+- **spw-topbar** : Conteneur principal avec logo Wallonie intégré et zones de contenu
+## Slots disponibles
+- **logo** : Nom ou titre de l'application
+- **baseline** : Texte explicatif ou description de l'application
+- **right** : Zone pour éléments à droite (boutons, profil utilisateur, etc.)
+- **(default)** : Contenu additionnel dans la zone logo
+## Fonctionnalités
+- Logo Wallonie SVG intégré par défaut
+- Lien vers la homepage (href="/")
+- Gestion automatique de la classe body "has-topbar" pour layout
+- Layout flex avec distribution automatique des zones
+- Compatible avec spw-sidebar (détection mutuelle)
+- Zone droite flexible pour actions utilisateur
+## Cas d'usage
+- En-tête de back-office avec identification application
+- Barre de navigation supérieure d'outil métier
+- Header d'interface d'administration
+- Bandeau supérieur d'application interne
+## Note
+Composant en cours de développement (statut orange). Utilisez-le avec prudence dans les environnements de production.
         `,
             },
         },
@@ -52,4 +84,23 @@ const TemplateDefault = args => {
 };
 export const Default = TemplateDefault.bind({});
 Default.args = {};
+Default.parameters = {
+    docs: {
+        description: {
+            story: `
+Topbar par défaut avec logo Wallonie, titre de l'application ("Template back-office") et baseline explicative ("Ceci est un exemple de baseline explicative"). Zone droite vide mais disponible.
+Configuration présentée :
+- Logo Wallonie SVG intégré avec lien vers "/"
+- Slot logo : titre de l'application
+- Slot baseline : description ou contexte de l'outil
+- Slot right : vide (peut accueillir boutons, profil utilisateur, notifications)
+Cas d'usage : en-tête standard de back-office Wallonie avec identification claire de l'application. Le logo assure la cohérence institutionnelle, le titre identifie l'outil, la baseline explique son rôle. Idéal pour outils métier, interfaces d'administration, portails internes.
+La topbar ajoute automatiquement la classe "has-topbar" au body permettant aux autres composants (comme spw-sidebar) de s'adapter au layout.
+      `,
+        },
+    },
+};
 //# sourceMappingURL=spw-topbar.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-topbar.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-topbar/spw-topbar.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,YAAY,CAAC;AAEhC,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAE5B,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,mBAAmB;IAC1B,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,kBAAkB;IACzB,OAAO,UAAU,CAAC;;;;GAIjB,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,EAAE,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-topbar';\n\nconst subComponentTags = [];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Topbar',\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=\"orange\">En cours</spw-tag>\n\~~nPermet~~ de ~~définir~~ une barre supérieure ~~qui~~ ~~comprend~~ le logo et une ~~navigation~~ ~~secondaire~~ dans le ~~cadre~~ d'un back-office.\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentDefault() {\n return /* HTML */ `\n <div slot=\"logo\">Template back-office</div>\n <div slot=\"baseline\">Ceci est un exemple de baseline explicative</div>\n <div slot=\"right\"></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"]}
1	+ {"version":3,"file":"spw-topbar.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-topbar/spw-topbar.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,YAAY,CAAC;AAEhC,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAE5B,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,mBAAmB;IAC1B,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAoCV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,kBAAkB;IACzB,OAAO,UAAU,CAAC;;;;GAIjB,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,EAAE,CAAC;AAClB,OAAO,CAAC,UAAU,GAAG;IACnB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE;;;;;;;;;;;;OAYN;SACF;KACF;CACF,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-topbar';\n\nconst subComponentTags = [];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Topbar',\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=\"orange\">En cours</spw-tag>\n\nLe composant Topbar définit une barre supérieure horizontale pour les interfaces de back-office. Il affiche le logo, le titre de l'application et une baseline explicative, avec possibilité d'ajouter des éléments à droite.\n\n## Structure\n\nLe composant est un élément simple sans sous-composants :\n- spw-topbar : Conteneur principal avec logo Wallonie intégré et zones de contenu\n\n## Slots disponibles\n\n- logo : Nom ou titre de l'application\n- baseline : Texte explicatif ou description de l'application\n- right : Zone pour éléments à droite (boutons, profil utilisateur, etc.)\n- (default) : Contenu additionnel dans la zone logo\n\n## Fonctionnalités\n\n- Logo Wallonie SVG intégré par défaut\n- Lien vers la homepage (href=\"/\")\n- Gestion automatique de la classe body \"has-topbar\" pour layout\n- Layout flex avec distribution automatique des zones\n- Compatible avec spw-sidebar (détection mutuelle)\n- Zone droite flexible pour actions utilisateur\n\n## Cas d'usage\n\n- En-tête de back-office avec identification application\n- Barre de navigation supérieure d'outil métier\n- Header d'interface d'administration\n- Bandeau supérieur d'application interne\n\n## Note\n\nComposant en cours de développement (statut orange). Utilisez-le avec prudence dans les environnements de production.\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentDefault() {\n return /* HTML */ `\n <div slot=\"logo\">Template back-office</div>\n <div slot=\"baseline\">Ceci est un exemple de baseline explicative</div>\n <div slot=\"right\"></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 = {};\nDefault.parameters = {\n docs: {\n description: {\n story: `\nTopbar par défaut avec logo Wallonie, titre de l'application (\"Template back-office\") et baseline explicative (\"Ceci est un exemple de baseline explicative\"). Zone droite vide mais disponible.\n\nConfiguration présentée :\n- Logo Wallonie SVG intégré avec lien vers \"/\"\n- Slot logo : titre de l'application\n- Slot baseline : description ou contexte de l'outil\n- Slot right : vide (peut accueillir boutons, profil utilisateur, notifications)\n\nCas d'usage : en-tête standard de back-office Wallonie avec identification claire de l'application. Le logo assure la cohérence institutionnelle, le titre identifie l'outil, la baseline explique son rôle. Idéal pour outils métier, interfaces d'administration, portails internes.\n\nLa topbar ajoute automatiquement la classe \"has-topbar\" au body permettant aux autres composants (comme spw-sidebar) de s'adapter au layout.\n `,\n },\n },\n};\n"]}

package/dist/components/{p-QqgPCBuq.js → p-BCWtq89_.js} RENAMED Viewed

@@ -133,7 +133,7 @@ const SpwTooltip = /*@__PURE__*/ proxyCustomElement(class SpwTooltip extends H {
         };
     }
     render() {
-        return (h("div", { key: '9c9316768ebf04af6e72107f5db5dd3d7d0eb886', class: this.classes, onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip }, h("slot", { key: 'ca12efbd11ea739ae920856919cd0ed5ea6203e6' })));
+        return (h("div", { key: '63ca7769dd4c84952369f22296e922792ce46bf8', class: this.classes, onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip }, h("slot", { key: 'dccb79e704cd1d36d7ca3bb9743a5c4043e6ac4e' })));
     }
     get host() { return this; }
     static get style() { return spwTooltipCss; }
@@ -161,6 +161,6 @@ function defineCustomElement() {
 }
 export { SpwTooltip as S, defineCustomElement as d };
-//# sourceMappingURL=p-QqgPCBuq.js.map
+//# sourceMappingURL=p-BCWtq89_.js.map
-//# sourceMappingURL=p-QqgPCBuq.js.map
+//# sourceMappingURL=p-BCWtq89_.js.map

package/dist/components/{p-QqgPCBuq.js.map → p-BCWtq89_.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~QqgPCBuq~~.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-tooltip/spw-tooltip.scss?tag=spw-tooltip&encapsulation=shadow","src/components/spw-tooltip/spw-tooltip.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.spw-tooltip {\n &__target {\n &--pointer {\n cursor: pointer;\n }\n &--default {\n cursor: default;\n }\n &--help {\n cursor: help;\n }\n &--disabled {\n cursor: not-allowed;\n }\n :host(.spw-tooltip--has-ellipsis) & {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n}\n","import { Component, h, Prop, State, Element } from '@stencil/core';\n\n@Component({\n tag: 'spw-tooltip',\n styleUrl: 'spw-tooltip.scss',\n shadow: true,\n})\nexport class SpwTooltip {\n /** Titre du tooltip /\n @Prop() tooltipTitle: string = '';\n /* Texte du tooltip /\n @Prop() tooltipText: string = '';\n /* Largeur maximale du tooltip /\n @Prop() maxWidth?: string;\n /* Positionnement du tooltip /\n @Prop() direction: 'top' \| 'bottom' \| 'left' \| 'right' = 'top';\n /* Curseur du tooltip */\n @Prop() cursor: 'pointer' \| 'default' \| 'help' \| 'disabled' = 'help';\n\n @Prop() visible: boolean = true;\n\n @State() isVisible = false;\n @Element() host: HTMLElement;\n\n private tooltipEl: HTMLDivElement;\n\n connectedCallback() {\n this.handleScrollOrResize = this.handleScrollOrResize.bind(this);\n }\n\n disconnectedCallback() {\n window.removeEventListener('scroll', this.handleScrollOrResize, true);\n window.removeEventListener('resize', this.handleScrollOrResize);\n this.removeTooltipFromDOM();\n }\n\n private updateTooltipVisibility() {\n if (this.tooltipEl) {\n this.tooltipEl.style.display = this.visible ? 'flex' : 'none';\n }\n }\n\n componentWillRender() {\n this.updateTooltipVisibility();\n }\n\n componentDidUpdate() {\n this.updateTooltipVisibility();\n }\n\n private showTooltip = () => {\n if (!this.visible) return;\n this.isVisible = true;\n this.createTooltip();\n\n requestAnimationFrame(() => {\n this.positionTooltip();\n });\n\n window.addEventListener('scroll', this.handleScrollOrResize, true);\n window.addEventListener('resize', this.handleScrollOrResize);\n };\n\n private hideTooltip = () => {\n this.isVisible = false;\n this.removeTooltipFromDOM();\n window.removeEventListener('scroll', this.handleScrollOrResize, true);\n window.removeEventListener('resize', this.handleScrollOrResize);\n };\n\n private handleScrollOrResize() {\n if (this.isVisible) {\n this.positionTooltip();\n }\n }\n\n private createTooltip() {\n if (!this.tooltipEl) {\n this.tooltipEl = document.createElement('div');\n this.tooltipEl.className = `spw-tooltip-fixed spw-tooltip-fixed--${this.direction}`;\n this.tooltipEl.setAttribute('role', 'tooltip');\n\n if (this.tooltipTitle) {\n const title = document.createElement('strong');\n title.className = 'spw-tooltip__title';\n title.textContent = this.tooltipTitle;\n this.tooltipEl.appendChild(title);\n }\n\n if (this.tooltipText) {\n const text = document.createElement('div');\n text.textContent = this.tooltipText;\n this.tooltipEl.appendChild(text);\n }\n\n document.body.appendChild(this.tooltipEl);\n }\n }\n\n private removeTooltipFromDOM() {\n if (this.tooltipEl && this.tooltipEl.parentNode) {\n this.tooltipEl.parentNode.removeChild(this.tooltipEl);\n }\n this.tooltipEl = null;\n }\n\n private positionTooltip() {\n if (!this.tooltipEl) return;\n\n const target = this.host.shadowRoot?.querySelector('.spw-tooltip__target');\n if (!target) return;\n\n const rect = target.getBoundingClientRect();\n const tooltip = this.tooltipEl;\n\n tooltip.style.visibility = 'hidden';\n tooltip.style.display = 'flex';\n tooltip.style.position = 'fixed';\n tooltip.style.top = '0px';\n tooltip.style.left = '0px';\n tooltip.style.maxWidth = this.maxWidth + 'px' \|\| '100%';\n\n const tooltipRect = tooltip.getBoundingClientRect();\n\n let top = 0;\n let left = 0;\n\n switch (this.direction) {\n case 'top':\n top = rect.top - tooltipRect.height - 8;\n left = rect.left + (rect.width - tooltipRect.width) / 2;\n break;\n case 'bottom':\n top = rect.bottom + 8;\n left = rect.left + (rect.width - tooltipRect.width) / 2;\n break;\n case 'left':\n top = rect.top + (rect.height - tooltipRect.height) / 2;\n left = rect.left - tooltipRect.width - 8;\n break;\n case 'right':\n default:\n top = rect.top + (rect.height - tooltipRect.height) / 2;\n left = rect.right + 8;\n break;\n }\n\n tooltip.style.top = `${top}px`;\n tooltip.style.left = `${left}px`;\n tooltip.style.zIndex = '9999';\n tooltip.style.visibility = 'visible';\n }\n\n private get classes() {\n return {\n 'spw-tooltip__target': true,\n [`spw-tooltip__target--${this.cursor}`]: true,\n } as Record<string, boolean>;\n }\n\n render() {\n return (\n <div class={this.classes} onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-BCWtq89_.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-tooltip/spw-tooltip.scss?tag=spw-tooltip&encapsulation=shadow","src/components/spw-tooltip/spw-tooltip.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.spw-tooltip {\n &__target {\n &--pointer {\n cursor: pointer;\n }\n &--default {\n cursor: default;\n }\n &--help {\n cursor: help;\n }\n &--disabled {\n cursor: not-allowed;\n }\n :host(.spw-tooltip--has-ellipsis) & {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n}\n","import { Component, h, Prop, State, Element } from '@stencil/core';\n\n@Component({\n tag: 'spw-tooltip',\n styleUrl: 'spw-tooltip.scss',\n shadow: true,\n})\nexport class SpwTooltip {\n /** Titre du tooltip /\n @Prop() tooltipTitle: string = '';\n /* Texte du tooltip /\n @Prop() tooltipText: string = '';\n /* Largeur maximale du tooltip /\n @Prop() maxWidth?: string;\n /* Positionnement du tooltip /\n @Prop() direction: 'top' \| 'bottom' \| 'left' \| 'right' = 'top';\n /* Curseur du tooltip */\n @Prop() cursor: 'pointer' \| 'default' \| 'help' \| 'disabled' = 'help';\n\n @Prop() visible: boolean = true;\n\n @State() isVisible = false;\n @Element() host: HTMLElement;\n\n private tooltipEl: HTMLDivElement;\n\n connectedCallback() {\n this.handleScrollOrResize = this.handleScrollOrResize.bind(this);\n }\n\n disconnectedCallback() {\n window.removeEventListener('scroll', this.handleScrollOrResize, true);\n window.removeEventListener('resize', this.handleScrollOrResize);\n this.removeTooltipFromDOM();\n }\n\n private updateTooltipVisibility() {\n if (this.tooltipEl) {\n this.tooltipEl.style.display = this.visible ? 'flex' : 'none';\n }\n }\n\n componentWillRender() {\n this.updateTooltipVisibility();\n }\n\n componentDidUpdate() {\n this.updateTooltipVisibility();\n }\n\n private showTooltip = () => {\n if (!this.visible) return;\n this.isVisible = true;\n this.createTooltip();\n\n requestAnimationFrame(() => {\n this.positionTooltip();\n });\n\n window.addEventListener('scroll', this.handleScrollOrResize, true);\n window.addEventListener('resize', this.handleScrollOrResize);\n };\n\n private hideTooltip = () => {\n this.isVisible = false;\n this.removeTooltipFromDOM();\n window.removeEventListener('scroll', this.handleScrollOrResize, true);\n window.removeEventListener('resize', this.handleScrollOrResize);\n };\n\n private handleScrollOrResize() {\n if (this.isVisible) {\n this.positionTooltip();\n }\n }\n\n private createTooltip() {\n if (!this.tooltipEl) {\n this.tooltipEl = document.createElement('div');\n this.tooltipEl.className = `spw-tooltip-fixed spw-tooltip-fixed--${this.direction}`;\n this.tooltipEl.setAttribute('role', 'tooltip');\n\n if (this.tooltipTitle) {\n const title = document.createElement('strong');\n title.className = 'spw-tooltip__title';\n title.textContent = this.tooltipTitle;\n this.tooltipEl.appendChild(title);\n }\n\n if (this.tooltipText) {\n const text = document.createElement('div');\n text.textContent = this.tooltipText;\n this.tooltipEl.appendChild(text);\n }\n\n document.body.appendChild(this.tooltipEl);\n }\n }\n\n private removeTooltipFromDOM() {\n if (this.tooltipEl && this.tooltipEl.parentNode) {\n this.tooltipEl.parentNode.removeChild(this.tooltipEl);\n }\n this.tooltipEl = null;\n }\n\n private positionTooltip() {\n if (!this.tooltipEl) return;\n\n const target = this.host.shadowRoot?.querySelector('.spw-tooltip__target');\n if (!target) return;\n\n const rect = target.getBoundingClientRect();\n const tooltip = this.tooltipEl;\n\n tooltip.style.visibility = 'hidden';\n tooltip.style.display = 'flex';\n tooltip.style.position = 'fixed';\n tooltip.style.top = '0px';\n tooltip.style.left = '0px';\n tooltip.style.maxWidth = this.maxWidth + 'px' \|\| '100%';\n\n const tooltipRect = tooltip.getBoundingClientRect();\n\n let top = 0;\n let left = 0;\n\n switch (this.direction) {\n case 'top':\n top = rect.top - tooltipRect.height - 8;\n left = rect.left + (rect.width - tooltipRect.width) / 2;\n break;\n case 'bottom':\n top = rect.bottom + 8;\n left = rect.left + (rect.width - tooltipRect.width) / 2;\n break;\n case 'left':\n top = rect.top + (rect.height - tooltipRect.height) / 2;\n left = rect.left - tooltipRect.width - 8;\n break;\n case 'right':\n default:\n top = rect.top + (rect.height - tooltipRect.height) / 2;\n left = rect.right + 8;\n break;\n }\n\n tooltip.style.top = `${top}px`;\n tooltip.style.left = `${left}px`;\n tooltip.style.zIndex = '9999';\n tooltip.style.visibility = 'visible';\n }\n\n private get classes() {\n return {\n 'spw-tooltip__target': true,\n [`spw-tooltip__target--${this.cursor}`]: true,\n } as Record<string, boolean>;\n }\n\n render() {\n return (\n <div class={this.classes} onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-DzdAUdJU.js → p-BTvGjWzW.js} RENAMED Viewed

@@ -12,7 +12,7 @@ const SpwIcon = /*@__PURE__*/ proxyCustomElement(class SpwIcon extends H {
     }
     render() {
         const iconClassName = `spw-icon ${this.variant} ${this.icon}`;
-        return h("i", { key: 'bd39dbd75fbd6c3174d3f52bb30eec4fdb8ffbd6', class: iconClassName });
+        return h("i", { key: '874ec74d642f99a25f9deedb91bda6d94b1b3c04', class: iconClassName });
     }
     static get assetsDirs() { return ["assets"]; }
     static get style() { return spwIconCss; }
@@ -35,6 +35,6 @@ function defineCustomElement() {
 }
 export { SpwIcon as S, defineCustomElement as d };
-//# sourceMappingURL=p-DzdAUdJU.js.map
+//# sourceMappingURL=p-BTvGjWzW.js.map
-//# sourceMappingURL=p-DzdAUdJU.js.map
+//# sourceMappingURL=p-BTvGjWzW.js.map

package/dist/components/{p-DzdAUdJU.js.map → p-BTvGjWzW.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~DzdAUdJU~~.js","mappings":";;AAAA,MAAM,UAAU,GAAG,6suKAA6suK;;MCQntuK,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AANpB,IAAA,WAAA,GAAA;;;;;AAUU,QAAA,IAAO,CAAA,OAAA,GAAyD,UAAU;AAMnF;IAJC,MAAM,GAAA;QACJ,MAAM,aAAa,GAAG,CAAA,SAAA,EAAY,IAAI,CAAC,OAAO,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,CAAA,CAAE;AAC7D,QAAA,OAAO,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,GAAM;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-icon/spw-icon.scss?tag=spw-icon&encapsulation=shadow","src/components/spw-icon/spw-icon.tsx"],"sourcesContent":["@import url('./assets/fontawesome/css/all.min.css');\n\n:host {\n line-height: 1;\n}\n\n.spw-icon.fa-solid,\n.spw-icon.fa-solid:before {\n font-family: var(--spw-ds-font-icons-solid);\n}\n\n.spw-icon.fa-brands,\n.spw-icon.fa-brands:before {\n font-family: var(--spw-ds-font-icons-brands);\n}\n\n.spw-icon.fa-regular,\n.spw-icon.fa-regular:before {\n font-weight: 400;\n font-family: var(--spw-ds-font-icons-solid);\n}\n\n.spw-icon.fa-light,\n.spw-icon.fa-light:before {\n font-weight: 300;\n font-family: var(--spw-ds-font-icons-solid);\n}\n\n.spw-icon {\n font-size: inherit;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-icon',\n styleUrl: 'spw-icon.scss',\n shadow: true,\n assetsDirs: ['assets'],\n})\nexport class SpwIcon {\n /** Permet de spécifier une référence d'icône Font Awesome /\n @Prop() icon: string;\n /* Permet de spécifier une variante de Font Awesome */\n @Prop() variant: 'fa-solid' \| 'fa-brands' \| 'fa-regular' \| 'fa-light' = 'fa-solid';\n\n render() {\n const iconClassName = `spw-icon ${this.variant} ${this.icon}`;\n return <i class={iconClassName}></i>;\n }\n}\n"],"version":3}
1	+ {"file":"p-BTvGjWzW.js","mappings":";;AAAA,MAAM,UAAU,GAAG,6suKAA6suK;;MCQntuK,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AANpB,IAAA,WAAA,GAAA;;;;;AAUU,QAAA,IAAO,CAAA,OAAA,GAAyD,UAAU;AAMnF;IAJC,MAAM,GAAA;QACJ,MAAM,aAAa,GAAG,CAAA,SAAA,EAAY,IAAI,CAAC,OAAO,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,CAAA,CAAE;AAC7D,QAAA,OAAO,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,GAAM;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-icon/spw-icon.scss?tag=spw-icon&encapsulation=shadow","src/components/spw-icon/spw-icon.tsx"],"sourcesContent":["@import url('./assets/fontawesome/css/all.min.css');\n\n:host {\n line-height: 1;\n}\n\n.spw-icon.fa-solid,\n.spw-icon.fa-solid:before {\n font-family: var(--spw-ds-font-icons-solid);\n}\n\n.spw-icon.fa-brands,\n.spw-icon.fa-brands:before {\n font-family: var(--spw-ds-font-icons-brands);\n}\n\n.spw-icon.fa-regular,\n.spw-icon.fa-regular:before {\n font-weight: 400;\n font-family: var(--spw-ds-font-icons-solid);\n}\n\n.spw-icon.fa-light,\n.spw-icon.fa-light:before {\n font-weight: 300;\n font-family: var(--spw-ds-font-icons-solid);\n}\n\n.spw-icon {\n font-size: inherit;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-icon',\n styleUrl: 'spw-icon.scss',\n shadow: true,\n assetsDirs: ['assets'],\n})\nexport class SpwIcon {\n /** Permet de spécifier une référence d'icône Font Awesome /\n @Prop() icon: string;\n /* Permet de spécifier une variante de Font Awesome */\n @Prop() variant: 'fa-solid' \| 'fa-brands' \| 'fa-regular' \| 'fa-light' = 'fa-solid';\n\n render() {\n const iconClassName = `spw-icon ${this.variant} ${this.icon}`;\n return <i class={iconClassName}></i>;\n }\n}\n"],"version":3}

package/dist/components/{p-DtyDCGAt.js → p-BZeR2u__.js} RENAMED Viewed

@@ -64,7 +64,7 @@ const SpwAccordionContent = /*@__PURE__*/ proxyCustomElement(class SpwAccordionC
         });
     }
     render() {
-        return (h("div", { key: 'ff5622fc2099edfdf972b5a13ab1e5523795c8a7', class: "spw-accordion-content", ref: el => (this.contentElement = el), "data-accordion-id": this.el.getAttribute('data-accordion-id') }, h("div", { key: '9334c4ac24196a994940754e9a68ae8af277c8cc', class: "spw-accordion-content__inner" }, h("slot", { key: 'b89df2bb47f5210586472a8d196ae247ca570240', onSlotchange: () => this.updateHeight() }))));
+        return (h("div", { key: '2a3f54f3b9d7d76c009bb3e07445a5fcc4ce4fbd', class: "spw-accordion-content", ref: el => (this.contentElement = el), "data-accordion-id": this.el.getAttribute('data-accordion-id') }, h("div", { key: '25e7f38b85983ba3edae61181413b19c4deba182', class: "spw-accordion-content__inner" }, h("slot", { key: '15f20b4e164895da84178f250c9d1700a87cc6ca', onSlotchange: () => this.updateHeight() }))));
     }
     get el() { return this; }
     static get style() { return spwAccordionContentCss; }
@@ -86,6 +86,6 @@ function defineCustomElement() {
 }
 export { SpwAccordionContent as S, defineCustomElement as d };
-//# sourceMappingURL=p-DtyDCGAt.js.map
+//# sourceMappingURL=p-BZeR2u__.js.map
-//# sourceMappingURL=p-DtyDCGAt.js.map
+//# sourceMappingURL=p-BZeR2u__.js.map

package/dist/components/{p-DtyDCGAt.js.map → p-BZeR2u__.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~DtyDCGAt~~.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-accordion/spw-accordion-content/spw-accordion-content.scss?tag=spw-accordion-content&encapsulation=shadow","src/components/spw-accordion/spw-accordion-content/spw-accordion-content.tsx"],"sourcesContent":[".spw-accordion-content {\n line-height: 1.5;\n font-weight: 400;\n overflow: hidden;\n color: var(--spw-color-themes-grey-grey-800);\n transition: all 0.25s ease-in;\n\n :host(.--collapsed) & {\n max-height: 0 !important;\n }\n\n &--is-opened {\n max-height: 100% !important;\n }\n\n &__inner {\n padding: 0;\n margin-bottom: var(--spw-spacings-spacing-lg);\n }\n}\n","import { Component, h, Element, Listen, State } from '@stencil/core';\n\n@Component({\n tag: 'spw-accordion-content',\n styleUrl: 'spw-accordion-content.scss',\n shadow: true,\n})\nexport class SpwAccordionContent {\n @Element() el: HTMLSpwAccordionContentElement;\n private contentElement: HTMLElement;\n\n @State() isOpened: boolean = false;\n\n componentDidLoad() {\n this.assignItemId();\n this.updateHeight();\n window.addEventListener('resize', this.handleResize.bind(this));\n this.contentElement.addEventListener('transitionend', this.handleTransitionEnd.bind(this));\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize.bind(this));\n this.contentElement.removeEventListener('transitionend', this.handleTransitionEnd.bind(this));\n }\n\n private assignItemId() {\n const parent = this.el.closest('spw-accordion-item');\n if (parent) {\n const itemId = parent.getAttribute('data-accordion-id');\n if (itemId) {\n this.el.setAttribute('data-accordion-id', itemId);\n }\n }\n }\n\n @Listen('accordionToggle', { target: 'document' })\n handleAccordionToggle(event: CustomEvent<{ isOpen: boolean; id: string }>) {\n const itemId = this.el.getAttribute('data-accordion-id');\n if (event.detail.id === itemId) {\n this.isOpened = event.detail.isOpen;\n this.updateHeight();\n }\n }\n\n private handleResize() {\n this.updateHeight();\n setTimeout(() => {\n this.updateHeight();\n }, 300);\n }\n\n private handleTransitionEnd(event: TransitionEvent) {\n if (event.propertyName === 'max-height') {\n if (this.isOpened) {\n this.contentElement.classList.add('spw-accordion-content--is-opened');\n } else {\n this.contentElement.classList.remove('spw-accordion-content--is-opened');\n }\n }\n }\n\n private updateHeight() {\n requestAnimationFrame(() => {\n const content = this.contentElement;\n if (this.isOpened) {\n const scrollHeight = content.scrollHeight;\n content.style.maxHeight = `${scrollHeight}px`;\n } else {\n content.style.maxHeight = '0px';\n }\n });\n }\n\n render() {\n return (\n <div class=\"spw-accordion-content\" ref={el => (this.contentElement = el)} data-accordion-id={this.el.getAttribute('data-accordion-id')}>\n <div class=\"spw-accordion-content__inner\">\n <slot onSlotchange={() => this.updateHeight()}></slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-BZeR2u__.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-accordion/spw-accordion-content/spw-accordion-content.scss?tag=spw-accordion-content&encapsulation=shadow","src/components/spw-accordion/spw-accordion-content/spw-accordion-content.tsx"],"sourcesContent":[".spw-accordion-content {\n line-height: 1.5;\n font-weight: 400;\n overflow: hidden;\n color: var(--spw-color-themes-grey-grey-800);\n transition: all 0.25s ease-in;\n\n :host(.--collapsed) & {\n max-height: 0 !important;\n }\n\n &--is-opened {\n max-height: 100% !important;\n }\n\n &__inner {\n padding: 0;\n margin-bottom: var(--spw-spacings-spacing-lg);\n }\n}\n","import { Component, h, Element, Listen, State } from '@stencil/core';\n\n@Component({\n tag: 'spw-accordion-content',\n styleUrl: 'spw-accordion-content.scss',\n shadow: true,\n})\nexport class SpwAccordionContent {\n @Element() el: HTMLSpwAccordionContentElement;\n private contentElement: HTMLElement;\n\n @State() isOpened: boolean = false;\n\n componentDidLoad() {\n this.assignItemId();\n this.updateHeight();\n window.addEventListener('resize', this.handleResize.bind(this));\n this.contentElement.addEventListener('transitionend', this.handleTransitionEnd.bind(this));\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize.bind(this));\n this.contentElement.removeEventListener('transitionend', this.handleTransitionEnd.bind(this));\n }\n\n private assignItemId() {\n const parent = this.el.closest('spw-accordion-item');\n if (parent) {\n const itemId = parent.getAttribute('data-accordion-id');\n if (itemId) {\n this.el.setAttribute('data-accordion-id', itemId);\n }\n }\n }\n\n @Listen('accordionToggle', { target: 'document' })\n handleAccordionToggle(event: CustomEvent<{ isOpen: boolean; id: string }>) {\n const itemId = this.el.getAttribute('data-accordion-id');\n if (event.detail.id === itemId) {\n this.isOpened = event.detail.isOpen;\n this.updateHeight();\n }\n }\n\n private handleResize() {\n this.updateHeight();\n setTimeout(() => {\n this.updateHeight();\n }, 300);\n }\n\n private handleTransitionEnd(event: TransitionEvent) {\n if (event.propertyName === 'max-height') {\n if (this.isOpened) {\n this.contentElement.classList.add('spw-accordion-content--is-opened');\n } else {\n this.contentElement.classList.remove('spw-accordion-content--is-opened');\n }\n }\n }\n\n private updateHeight() {\n requestAnimationFrame(() => {\n const content = this.contentElement;\n if (this.isOpened) {\n const scrollHeight = content.scrollHeight;\n content.style.maxHeight = `${scrollHeight}px`;\n } else {\n content.style.maxHeight = '0px';\n }\n });\n }\n\n render() {\n return (\n <div class=\"spw-accordion-content\" ref={el => (this.contentElement = el)} data-accordion-id={this.el.getAttribute('data-accordion-id')}>\n <div class=\"spw-accordion-content__inner\">\n <slot onSlotchange={() => this.updateHeight()}></slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-BJuYSBNu.js → p-Bu2NP1Hz.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { d as defineCustomElement$1 } from './p-DzdAUdJU.js';
+import { d as defineCustomElement$1 } from './p-BTvGjWzW.js';
 const spwFieldMessageCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-field-message{display:block;display:flex;gap:8px;margin-top:8px}.spw-field-message--error{color:var(--spw-color-states-error-error-300)}.spw-field-message--hint{color:var(--spw-colors-support-grey-grey-800)}.spw-field-message--success{color:var(--spw-color-states-success-success-500)}.spw-field-message--warning{color:var(--spw-color-themes-orange-orange-500)}.spw-field-message__icon{position:relative;top:1px}.spw-field-message__text{flex:1;font-size:14px;line-height:1.5}.-spw-tw-mt-1{margin-top:-.25rem}.spw-tw-mb-2{margin-bottom:.5rem}.spw-tw-mr-2{margin-right:.5rem}.spw-tw-mb-10{margin-bottom:2.5rem}.spw-tw-mb-6{margin-bottom:1.5rem}.spw-tw-ml-2{margin-left:.5rem}.spw-tw-mr-4{margin-right:1rem}.spw-tw-mt-12{margin-top:3rem}.spw-tw-italic{font-style:italic}";
@@ -32,7 +32,7 @@ const SpwFieldMessage = /*@__PURE__*/ proxyCustomElement(class SpwFieldMessage e
         };
     }
     render() {
-        return (h(Host, { key: '6d4457772753a577cf571c047a7ae7a6296d91c5' }, h("div", { key: '85055ee6574e64341df716d797c19ba8eb609980', class: this.elementClass }, this.showIcon && (h("div", { key: '31508d24f15da430bca0218c1d85408b32eccf47', class: "spw-field-message__icon" }, h("spw-icon", { key: 'a58d33814beead3d9cee5ca2f0813c1676e1a884', icon: this.variantIcon }))), h("span", { key: '5b97db123dc6e612eb08cdb54f17cb578c7ffe22', class: "spw-field-message__text" }, h("slot", { key: '2193eeb90612fb2ff4b7445a0a4bb473f3431859' })))));
+        return (h(Host, { key: 'c331b475b47d3ffcb91510c458e3651ca1c8ed2e' }, h("div", { key: '4d662130b8739c0d5b7a0a77171f9aaa57ecfad2', class: this.elementClass }, this.showIcon && (h("div", { key: 'f141053cf9f93c74ce39b1e57077614bf2564142', class: "spw-field-message__icon" }, h("spw-icon", { key: '61cb0690e3b84d92be77b457f856e77ea399e851', icon: this.variantIcon }))), h("span", { key: '4d941a7a762b85f622326907f46654ebbff32fa7', class: "spw-field-message__text" }, h("slot", { key: 'eff75a3f939f39388dda7078f25a53324cd51e8c' })))));
     }
     static get style() { return spwFieldMessageCss; }
 }, [1, "spw-field-message", {
@@ -59,6 +59,6 @@ function defineCustomElement() {
 }
 export { SpwFieldMessage as S, defineCustomElement as d };
-//# sourceMappingURL=p-BJuYSBNu.js.map
+//# sourceMappingURL=p-Bu2NP1Hz.js.map
-//# sourceMappingURL=p-BJuYSBNu.js.map
+//# sourceMappingURL=p-Bu2NP1Hz.js.map

package/dist/components/{p-BJuYSBNu.js.map → p-Bu2NP1Hz.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~BJuYSBNu~~.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,g1GAAg1G;;MCO91G,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,GAAA;;;;;AAOU,QAAA,IAAQ,CAAA,QAAA,GAAa,IAAI;AA0ClC;AAtCC,IAAA,IAAY,WAAW,GAAA;AACrB,QAAA,QAAQ,IAAI,CAAC,OAAO;AAClB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,YAAY;AACrB,YAAA,KAAK,MAAM;AACT,gBAAA,OAAO,uBAAuB;AAChC,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,iBAAiB;AAC1B,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,yBAAyB;AAClC,YAAA;AACE,gBAAA,OAAO,EAAE;;;AAIf,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,mBAAmB,EAAE,IAAI;AACzB,YAAA,CAAC,sBAAsB,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;SAC7C;;IAGH,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC1B,IAAI,CAAC,QAAQ,KACZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,WAAW,EAAA,CAAa,CACzC,CACP,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACH,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-field-message/spw-field-message.scss?tag=spw-field-message&encapsulation=shadow","src/components/spw-field-message/spw-field-message.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-field-message {\n display: block;\n margin-top: 8px;\n display: flex;\n gap: 8px;\n\n &--error {\n color: var(--spw-color-states-error-error-300);\n }\n\n &--hint {\n color: var(--spw-colors-support-grey-grey-800);\n }\n\n &--success {\n color: var(--spw-color-states-success-success-500);\n }\n\n &--warning {\n color: var(--spw-color-themes-orange-orange-500);\n }\n\n &__icon {\n position: relative;\n top: 1px;\n }\n\n &__text {\n flex: 1;\n font-size: 14px;\n line-height: 1.5;\n }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-field-message',\n styleUrl: 'spw-field-message.scss',\n shadow: true,\n})\nexport class SpwFieldMessage {\n /** Permet d'afficher ou pas une icône dans le message /\n @Prop() showIcon?: boolean = true;\n /* Choix du variant du message */\n @Prop() variant?: 'error' \| 'hint' \| 'warning' \| 'success';\n\n private get variantIcon(): string {\n switch (this.variant) {\n case 'error':\n return 'fa-warning';\n case 'hint':\n return 'fa-exclamation-circle';\n case 'success':\n return 'fa-check-circle';\n case 'warning':\n return 'fa-triangle-exclamation';\n default:\n return '';\n }\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-field-message': true,\n [`spw-field-message--${this.variant}`]: true,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.elementClass}>\n {this.showIcon && (\n <div class=\"spw-field-message__icon\">\n <spw-icon icon={this.variantIcon}></spw-icon>\n </div>\n )}\n <span class=\"spw-field-message__text\">\n <slot></slot>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-Bu2NP1Hz.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,g1GAAg1G;;MCO91G,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,GAAA;;;;;AAOU,QAAA,IAAQ,CAAA,QAAA,GAAa,IAAI;AA0ClC;AAtCC,IAAA,IAAY,WAAW,GAAA;AACrB,QAAA,QAAQ,IAAI,CAAC,OAAO;AAClB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,YAAY;AACrB,YAAA,KAAK,MAAM;AACT,gBAAA,OAAO,uBAAuB;AAChC,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,iBAAiB;AAC1B,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,yBAAyB;AAClC,YAAA;AACE,gBAAA,OAAO,EAAE;;;AAIf,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,mBAAmB,EAAE,IAAI;AACzB,YAAA,CAAC,sBAAsB,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;SAC7C;;IAGH,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC1B,IAAI,CAAC,QAAQ,KACZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,WAAW,EAAA,CAAa,CACzC,CACP,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACH,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-field-message/spw-field-message.scss?tag=spw-field-message&encapsulation=shadow","src/components/spw-field-message/spw-field-message.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-field-message {\n display: block;\n margin-top: 8px;\n display: flex;\n gap: 8px;\n\n &--error {\n color: var(--spw-color-states-error-error-300);\n }\n\n &--hint {\n color: var(--spw-colors-support-grey-grey-800);\n }\n\n &--success {\n color: var(--spw-color-states-success-success-500);\n }\n\n &--warning {\n color: var(--spw-color-themes-orange-orange-500);\n }\n\n &__icon {\n position: relative;\n top: 1px;\n }\n\n &__text {\n flex: 1;\n font-size: 14px;\n line-height: 1.5;\n }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-field-message',\n styleUrl: 'spw-field-message.scss',\n shadow: true,\n})\nexport class SpwFieldMessage {\n /** Permet d'afficher ou pas une icône dans le message /\n @Prop() showIcon?: boolean = true;\n /* Choix du variant du message */\n @Prop() variant?: 'error' \| 'hint' \| 'warning' \| 'success';\n\n private get variantIcon(): string {\n switch (this.variant) {\n case 'error':\n return 'fa-warning';\n case 'hint':\n return 'fa-exclamation-circle';\n case 'success':\n return 'fa-check-circle';\n case 'warning':\n return 'fa-triangle-exclamation';\n default:\n return '';\n }\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-field-message': true,\n [`spw-field-message--${this.variant}`]: true,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.elementClass}>\n {this.showIcon && (\n <div class=\"spw-field-message__icon\">\n <spw-icon icon={this.variantIcon}></spw-icon>\n </div>\n )}\n <span class=\"spw-field-message__text\">\n <slot></slot>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}