qc-trousse-sdg 1.4.8 → 1.4.9

package/public/js/qc-sdg.js

@@ -11437,7 +11437,7 @@
 
 	ExternalLink[FILENAME] = 'src/sdg/components/ExternalLink/ExternalLink.svelte';
 
-	var root$d = add_locations(from_html(`<div hidden=""><!></div>`), ExternalLink[FILENAME], [[48, 0]]);
+	var root$d = add_locations(from_html(`<div hidden=""><!></div>`), ExternalLink[FILENAME], [[108, 0]]);
 
 	function ExternalLink($$anchor, $$props) {
 		check_target(new.target);
@@ -11451,22 +11451,80 @@
 			nestedExternalLinks = prop($$props, 'nestedExternalLinks', 7, false);
 
 		let imgElement = tag(state(void 0), 'imgElement');
-		let processedLinks = new Set();
 
-		function addExternalLinkIcon(links) {
-			links.forEach((link) => {
-				if (processedLinks.has(link.innerHTML)) {
-					return;
-				}
+		function createVisibleNodesTreeWalker(link) {
+			return document.createTreeWalker(link, NodeFilter.SHOW_ALL, {
+				acceptNode: (node) => {
+					if (node instanceof Element) {
+						if (node.hasAttribute('hidden')) {
+							return NodeFilter.FILTER_REJECT;
+						}
+
+						const style = window.getComputedStyle(node);
 
-				let linkContent = link.innerHTML;
+						// Si l'élément est masqué par CSS (display ou visibility), on l'ignore
+						if (strict_equals(style.display, 'none') || strict_equals(style.visibility, 'hidden') || strict_equals(style.position, 'absolute')) {
+							return NodeFilter.FILTER_REJECT;
+						}
+					}
+
+					if (!node instanceof Text) {
+						return NodeFilter.FILTER_SKIP;
+					}
 
-				linkContent = `<span class="qc-ext-link-text">${linkContent}</span>&nbsp;${get(imgElement).outerHTML}`;
-				link.innerHTML = linkContent;
-				processedLinks.add(linkContent);
+					// Ignore les nœuds vides
+					if (!(/\S/).test(node.textContent)) {
+						return NodeFilter.FILTER_SKIP;
+					}
+
+					return NodeFilter.FILTER_ACCEPT;
+				}
 			});
 		}
 
+		function addExternalLinkIcon(link) {
+			// Crée un TreeWalker pour parcourir uniquement les nœuds texte visibles
+			const walker = createVisibleNodesTreeWalker(link);
+
+			let lastTextNode = null;
+
+			while (walker.nextNode()) {
+				lastTextNode = walker.currentNode;
+			}
+
+			// S'il n'y a pas de nœud texte visible, on ne fait rien
+			if (!lastTextNode) {
+				return;
+			}
+
+			// Séparer le contenu du dernier nœud texte en deux parties :
+			// le préfixe (éventuel) et le dernier mot
+			const text = lastTextNode.textContent;
+
+			const match = text.match(/^([\s\S]*\s)?(\S+)\s*$/m);
+
+			if (!match) {
+				return;
+			}
+
+			const prefix = match[1] || "";
+			const lastWord = match[2].replace(/([\/\-\u2013\u2014])/g, "$1<wbr>");
+
+			// Crée un span avec white-space: nowrap pour empêcher le saut de ligne de l'image de lien externe
+			const span = document.createElement('span');
+
+			span.classList.add('img-wrap');
+			span.innerHTML = `${lastWord}${get(imgElement).outerHTML}`;
+
+			// Met à jour le nœud texte : on garde le préfixe et on insère le span après
+			if (prefix) {
+				lastTextNode.textContent = prefix;
+				lastTextNode.parentNode.insertBefore(span, lastTextNode.nextSibling);
+			} else {
+				lastTextNode.parentNode.replaceChild(span, lastTextNode);
+			}
+		}
+
 		user_effect(() => {
 			if (nestedExternalLinks() || links().length <= 0 || !get(imgElement)) {
 				return;
@@ -11475,7 +11533,11 @@
 			isUpdating(true);
 
 			tick().then(() => {
-				addExternalLinkIcon(links());
+				links().forEach((link) => {
+					if (!link.querySelector('.qc-ext-link-img')) {
+						addExternalLinkIcon(link);
+					}
+				});
 
 				return tick();
 			}).then(() => {
@@ -11528,10 +11590,10 @@
 		};
 
 		var div = root$d();
-		var node = child(div);
+		var node_1 = child(div);
 
 		add_svelte_meta(
-			() => Icon(node, {
+			() => Icon(node_1, {
 				type: 'external-link',
 
 				get alt() {
@@ -11539,6 +11601,7 @@
 				},
 
 				class: 'qc-ext-link-img',
+				color: 'link-text',
 
 				get rootElement() {
 					return get(imgElement);
@@ -11550,7 +11613,7 @@
 			}),
 			'component',
 			ExternalLink,
-			49,
+			109,
 			4,
 			{ componentTag: 'Icon' }
 		);
@@ -11581,11 +11644,11 @@
 		push($$props, true);
 
 		const props = rest_props($$props, ['$$slots', '$$events', '$$legacy', '$$host']);
-		const nestedExternalLinks = $$props.$$host.querySelector('qc-external-link');
-		let links = tag(state(proxy([])), 'links');
-		const observer = Utils.createMutationObserver($$props.$$host, refreshLinks);
+		let links = tag(state(proxy(queryLinks())), 'links');
 		let isUpdating = tag(state(false), 'isUpdating');
 		let pendingUpdate = false;
+		const nestedExternalLinks = $$props.$$host.querySelector('qc-external-link');
+		const observer = Utils.createMutationObserver($$props.$$host, refreshLinks);
 
 		function queryLinks() {
 			return Array.from($$props.$$host.querySelectorAll('a'));
@@ -11612,29 +11675,30 @@
 
 		onMount(() => {
 			$$props.$$host.classList.add('qc-external-link');
-			set(links, queryLinks(), true);
 			observer?.observe($$props.$$host, { childList: true, characterData: true, subtree: true });
 		});
 
-		onDestroy(() => {
-			observer?.disconnect();
-		});
+		onDestroy(() => observer?.disconnect());
 
 		var $$exports = { ...legacy_api() };
 
 		add_svelte_meta(
 			() => ExternalLink($$anchor, spread_props(
 				{
-					get links() {
-						return get(links);
-					},
-
 					get nestedExternalLinks() {
 						return nestedExternalLinks;
 					}
 				},
 				() => props,
 				{
+					get links() {
+						return get(links);
+					},
+
+					set links($$value) {
+						set(links, $$value, true);
+					},
+
 					get isUpdating() {
 						return get(isUpdating);
 					},
@@ -11646,7 +11710,7 @@
 			)),
 			'component',
 			ExternalLinkWC,
-			58,
+			54,
 			0,
 			{ componentTag: 'ExternalLink' }
 		);
@@ -16347,9 +16411,9 @@
 
 	DropdownList[FILENAME] = 'src/sdg/components/DropdownList/DropdownList.svelte';
 
-	var root_2 = add_locations(from_html(`<div class="qc-dropdown-list-search"><!></div>`), DropdownList[FILENAME], [[386, 20]]);
-	var root_3 = add_locations(from_html(`<span> </span>`), DropdownList[FILENAME], [[427, 24]]);
-	var root$1 = add_locations(from_html(`<div><div><!> <div tabindex="-1"><!> <div class="qc-dropdown-list-expanded" tabindex="-1" role="listbox"><!> <!> <div role="status" class="qc-sr-only"><!></div></div></div></div> <!></div>`), DropdownList[FILENAME], [[316, 0, [[321, 4, [[340, 8, [[369, 12, [[425, 16]]]]]]]]]]);
+	var root_2 = add_locations(from_html(`<div class="qc-dropdown-list-search"><!></div>`), DropdownList[FILENAME], [[394, 20]]);
+	var root_3 = add_locations(from_html(`<span> </span>`), DropdownList[FILENAME], [[435, 24]]);
+	var root$1 = add_locations(from_html(`<div><div><!> <div tabindex="-1"><!> <div class="qc-dropdown-list-expanded" tabindex="-1" role="listbox"><!> <!> <div role="status" class="qc-sr-only"><!></div></div></div></div> <!></div>`), DropdownList[FILENAME], [[324, 0, [[329, 4, [[348, 8, [[377, 12, [[433, 16]]]]]]]]]]);
 
 	function DropdownList($$anchor, $$props) {
 		check_target(new.target);
@@ -16626,6 +16690,14 @@
 			}
 		});
 
+		user_effect(() => {
+			if (value()) {
+				items().forEach((item) => {
+					item.checked = value().includes(item.value);
+				});
+			}
+		});
+
 		user_effect(() => {
 			items().forEach((item) => {
 				if (!item.id) {
@@ -16898,7 +16970,7 @@
 					}),
 					'component',
 					DropdownList,
-					327,
+					335,
 					12,
 					{ componentTag: 'Label' }
 				);
@@ -16910,7 +16982,7 @@
 				}),
 				'if',
 				DropdownList,
-				326,
+				334,
 				8
 			);
 		}
@@ -16982,7 +17054,7 @@
 			}),
 			'component',
 			DropdownList,
-			349,
+			357,
 			12,
 			{ componentTag: 'DropdownListButton' }
 		);
@@ -17037,7 +17109,7 @@
 						),
 						'component',
 						DropdownList,
-						387,
+						395,
 						24,
 						{ componentTag: 'SearchInput' }
 					);
@@ -17053,7 +17125,7 @@
 				}),
 				'if',
 				DropdownList,
-				385,
+				393,
 				16
 			);
 		}
@@ -17113,7 +17185,7 @@
 				),
 				'component',
 				DropdownList,
-				405,
+				413,
 				16,
 				{ componentTag: 'DropdownListItems' }
 			);
@@ -17133,7 +17205,7 @@
 			}),
 			'key',
 			DropdownList,
-			426,
+			434,
 			20
 		);
 
@@ -17181,7 +17253,7 @@
 				}),
 				'component',
 				DropdownList,
-				435,
+				443,
 				4,
 				{ componentTag: 'FormError' }
 			);

package/src/doc/scss/qc-doc-sdg.scss

@@ -94,53 +94,25 @@ h1,h2,h3,h4,h5,h6 {
 
 a {
 
-  &.pseudo-visited {
-    color: token-value(color,link,visited);
-    & > .qc-ext-link-img {
-      background-color: token-value(color, link, visited);
-    }
-  }
   &.pseudo-hover {
     @include hover-link();
-    & > .qc-ext-link-img {
-      background-color: token-value(color, link, hover);
-    }
+    --qc-color-link-visited: var(--qc-color-link-hover);
   }
   &.pseudo-active {
     @include active-link();
-    & > .qc-ext-link-img {
-      background-color: token-value(color, link, active);
-    }
+    --qc-color-link-visited: var(--qc-color-link-active);
+    --qc-color-link-focus: var(--qc-color-link-active);
+    --qc-color-link-hover: var(--qc-color-link-active );
   }
   &.pseudo-focus {
     @include focus-link();
-    & > .qc-ext-link-img {
-      background-color: token-value(color, link, text);
-    }
-  }
-  &.not-visited:visited:not(:hover) {
-    color: token-value(color,link,text);
-    & > .qc-ext-link-text {
-      color: token-value(color,link,text);
-    }
-  }
-}
-
-div.qc-ext-link-img {
-  a.pseudo-visited  & {
-    background: token-value(color link visited)!important;
+    --qc-color-link-visited: var(--qc-color-link-focus);
   }
-  a.pseudo-focus  & {
-    background: token-value(color link hover)!important;
-  }
-  a.pseudo-hover  & {
-    background: token-value(color link hover)!important;
-  }
-  a.pseudo-active  & {
-    background: token-value(color link active)!important;
+  &.pseudo-visited {
+    --qc-color-link-text: var(--qc-color-link-visited);
   }
-  a.not-visited:visited:not(:hover) & {
-    background: token-value(color link text)!important;
+  &.not-visited {
+    --qc-color-link-visited: var(--qc-color-link-text);
   }
 }
 

package/src/sdg/bases/links/_links.html

@@ -1,7 +1,7 @@
 <h2 id="liens">Liens</h2>
 <qc-doc-exemple caption="Exemple de différents liens hypertexte selon leurs états.">
     <dl>
-        <dt>Lien interne</dt>
+        <dt>Lien non visité</dt>
         <dd><a href="#" class="not-visited">Lien interne</a></dd>
         <dd>
             <qc-external-link><a href="#" class="not-visited">Lien externe</a></qc-external-link>

package/src/sdg/bases/links/_links.scss

@@ -4,10 +4,6 @@
 
 a {
   color: token-value(color, link, text);
-  &:has(.qc-ext-link-text) {
-    white-space: nowrap;
-    text-decoration: none;
-  }
   &:visited {
     color: token-value(color, link, visited);
   }
@@ -23,35 +19,40 @@ a {
   .img-wrap {
     white-space: nowrap;
   }
-}
 
-.qc-external-link {
-  .qc-ext-link-text {
-    white-space: normal;
-    text-decoration: underline;
-  }
 }
+div.qc-ext-link-img {
 
-.qc-ext-link-img {
   @extend .icon-external-link;
   $ratio : math.div(11,16) * 1em;
   height: $ratio;
   width: $ratio;
+  display: inline-block;
   background: token-value(color link text);
   mask-size: $ratio;
-  display: inline-block;
-  mask-repeat: no-repeat;
-
-  a:visited & {
+  margin-left: 4px;
+  a:visited  & {
     background: token-value(color link visited);
   }
-  a:focus & {
+  a:focus  & {
     background: token-value(color link hover);
   }
-  a:hover & {
+  a:hover  & {
     background: token-value(color link hover);
   }
-  a:active & {
+  a:active  & {
     background: token-value(color link active);
   }
+
+
+  .img-wrap + & {
+    display: none;
+  }
+}
+
+.qc-external-link .qc-button {
+  gap: 0;
+  > .img-wrap::before {
+    content: "\a0";
+  }
 }

package/src/sdg/components/Button/_button.scss

@@ -8,6 +8,9 @@
 }
 
 .qc-button {
+  --qc-color-link-focus: var(--qc-color-link-text);
+  --qc-color-link-hover: var(--qc-color-link-text);
+  --qc-color-link-visited: var(--qc-color-link-text);
   font-family: token-value(font family, content);
   font-size: token-value(font size, md);
   font-weight: token-value(font weight, bold);
@@ -15,7 +18,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: rem(8);
+  gap: token-value(spacer, xs);
   box-sizing: border-box;
   min-width: rem(112);
   max-width: rem(360);
@@ -47,6 +50,7 @@
   }
 
   &.qc-primary {
+    --qc-color-link-text: #{token-value(color white)};
     color: token-value(color white);
     background-color: token-value(color blue piv);
     border-color: token-value(color blue piv);
@@ -83,6 +87,7 @@
   }
 
   &.qc-secondary {
+    --qc-color-link-text: #{token-value(color blue, piv)};
     color: token-value(color blue, piv);
     background-color: token-value(color white);
     border-color: token-value(color blue, piv);
@@ -91,7 +96,8 @@
     &:focus:not(:disabled),
     &:active:not(:disabled),
     &.qc-hover, &.qc-focus, &.qc-active {
-      background-color: rgba(map.get(map.get(map.get($xl-tokens, color), blue), piv), 0.16);
+
+      background-color: rgba(var(--qc-color-blue-piv-rgb), 0.16);
     }
 
     &:focus:not(:disabled),
@@ -102,7 +108,7 @@
 
     &:active:not(:disabled),
     &.qc-active {
-      background-color: rgba(map.get(map.get(map.get($xl-tokens, color), blue), piv), 0.08);
+      background-color: rgba(var(--qc-color-blue-piv-rgb), 0.08);
     }
 
     &:disabled,
@@ -114,26 +120,28 @@
   }
 
   &.qc-tertiary {
+    --qc-color-link-text: #{token-value(color blue, piv)};
     color: token-value(color blue, piv);
     background-color: token-value(color white);
     border-color: token-value(color white);
 
     &:hover:not(:disabled),
     &.qc-hover{
-      background-color: rgba(map.get(map.get(map.get($xl-tokens, color), grey), light), 0.24);
+
+      background-color: rgba(var(--qc-color-grey-light-rgb), 0.24);
       text-decoration: underline;
     }
 
     &:focus:not(:disabled),
     &.qc-focus {
-      background-color: rgba(map.get(map.get(map.get($xl-tokens, color), grey), light), 0.24);
+      background-color: rgba(var(--qc-color-grey-light-rgb), 0.24);
       border-color: token-value(color blue, dark);
       box-shadow: 0 0 0 2px token-value(color blue, light);
     }
 
     &:active:not(:disabled),
     &.qc-active {
-      background-color: rgba(map.get(map.get(map.get($xl-tokens, color), grey), light), 0.16);
+      background-color: rgba(var(--qc-color-grey-light-rgb), 0.16);
     }
 
     &:disabled,

package/src/sdg/components/DropdownList/DropdownList.svelte

@@ -255,6 +255,14 @@
         }
     });
 
+    $effect(() => {
+        if (value) {
+            items.forEach((item) => {
+                item.checked = value.includes(item.value);
+            });
+        }
+    });
+
     $effect(() => {
         items.forEach((item) => {
             if (!item.id) {

package/src/sdg/components/ExternalLink/ExternalLink.svelte

@@ -13,20 +13,76 @@ let {
 } = $props();
 
 let imgElement = $state();
-let processedLinks = new Set();
 
-function addExternalLinkIcon(links) {
-    links.forEach(link => {
-        if (processedLinks.has(link.innerHTML)) {
-            return;
+function createVisibleNodesTreeWalker(link) {
+    return document.createTreeWalker(
+        link,
+        NodeFilter.SHOW_ALL,
+        {
+            acceptNode: node => {
+                if (node instanceof Element) {
+                    if (node.hasAttribute('hidden')) {
+                        return NodeFilter.FILTER_REJECT;
+                    }
+                    const style = window.getComputedStyle(node);
+                    // Si l'élément est masqué par CSS (display ou visibility), on l'ignore
+                    if (style.display === 'none'
+                        || style.visibility === 'hidden'
+                        || style.position === 'absolute') {
+                        return NodeFilter.FILTER_REJECT;
+                    }
+                }
+                if (!node instanceof Text) {
+                    return NodeFilter.FILTER_SKIP;
+                }
+
+                // Ignore les nœuds vides
+                if (!/\S/.test(node.textContent)) {
+                    return NodeFilter.FILTER_SKIP;
+                }
+
+                return NodeFilter.FILTER_ACCEPT;
+            }
         }
+    );
+}
 
-        let linkContent = link.innerHTML;
-        linkContent = `<span class="qc-ext-link-text">${linkContent}</span>&nbsp;${imgElement.outerHTML}`;
+function addExternalLinkIcon(link) {
+    // Crée un TreeWalker pour parcourir uniquement les nœuds texte visibles
+    const walker = createVisibleNodesTreeWalker(link);
 
-        link.innerHTML = linkContent;
-        processedLinks.add(linkContent);
-    });
+    let lastTextNode = null;
+    while (walker.nextNode()) {
+        lastTextNode = walker.currentNode;
+    }
+    // S'il n'y a pas de nœud texte visible, on ne fait rien
+    if (!lastTextNode) {
+        return;
+    }
+
+    // Séparer le contenu du dernier nœud texte en deux parties :
+    // le préfixe (éventuel) et le dernier mot
+    const text = lastTextNode.textContent;
+    const match = text.match(/^([\s\S]*\s)?(\S+)\s*$/m);
+    if (!match) {
+        return;
+    }
+
+    const prefix = match[1] || "";
+    const lastWord = match[2].replace(/([\/\-\u2013\u2014])/g, "$1<wbr>");
+
+    // Crée un span avec white-space: nowrap pour empêcher le saut de ligne de l'image de lien externe
+    const span = document.createElement('span');
+    span.classList.add('img-wrap')
+    span.innerHTML = `${lastWord}${imgElement.outerHTML}`;
+
+    // Met à jour le nœud texte : on garde le préfixe et on insère le span après
+    if (prefix) {
+        lastTextNode.textContent = prefix;
+        lastTextNode.parentNode.insertBefore(span, lastTextNode.nextSibling);
+    } else {
+        lastTextNode.parentNode.replaceChild(span, lastTextNode);
+    }
 }
 
 $effect(() => {
@@ -37,7 +93,11 @@ $effect(() => {
     isUpdating = true;
 
     tick().then(() => {
-        addExternalLinkIcon(links);
+        links.forEach(link => {
+            if (!link.querySelector('.qc-ext-link-img')) {
+                addExternalLinkIcon(link);
+            }
+        });
         return tick();
     }).then(() => {
         isUpdating = false;
@@ -51,8 +111,7 @@ $effect(() => {
             alt={externalIconAlt}
             bind:rootElement={imgElement}
             class="qc-ext-link-img"
+            color="link-text"
     />
 </div>
 
-
-

package/src/sdg/components/ExternalLink/ExternalLinkWC.svelte

@@ -8,17 +8,16 @@
 
 <script>
     import ExternalLink from "./ExternalLink.svelte";
-    import {onDestroy, onMount, tick} from "svelte";
     import {Utils} from "../utils";
+    import {onDestroy, onMount, tick} from "svelte";
 
     const props = $props();
-    const nestedExternalLinks = $host().querySelector('qc-external-link');
-
-    let links = $state([]);
-    const observer = Utils.createMutationObserver($host(), refreshLinks);
+    let links = $state(queryLinks());
     let isUpdating = $state(false);
     let pendingUpdate = false;
+    const nestedExternalLinks = $host().querySelector('qc-external-link');
 
+    const observer = Utils.createMutationObserver($host(), refreshLinks);
     function queryLinks() {
         return Array.from($host().querySelectorAll('a'));
     }
@@ -41,7 +40,6 @@
 
     onMount(() => {
         $host().classList.add('qc-external-link');
-        links = queryLinks();
 
         observer?.observe($host(), {
             childList: true,
@@ -50,9 +48,7 @@
         });
     });
 
-    onDestroy(() => {
-        observer?.disconnect();
-    });
+    onDestroy(() => observer?.disconnect());
 </script>
 
-<ExternalLink {links} bind:isUpdating {nestedExternalLinks} {...props} />
+<ExternalLink bind:links bind:isUpdating {nestedExternalLinks} {...props} />