qc-trousse-sdg 1.4.6 → 1.4.8

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

@@ -1,5 +1,6 @@
 <script>
     import {Utils} from "../../../utils";
+    import {tick} from "svelte";
 
     let {
         displayedItems,
@@ -87,7 +88,7 @@
             }
         }
 
-        Utils.sleep(5).then(() => {
+        tick().then(() => {
             if (canExit(event, index)) {
                 handleExit(event.key);
             }

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

@@ -1,5 +1,6 @@
 <script>
     import {Utils} from "../../../utils";
+    import {tick} from "svelte";
 
     const selectedElementCLass = "qc-dropdown-list-single-selected";
 
@@ -77,7 +78,7 @@
             handleSelection(event, item);
         }
 
-        Utils.sleep(5).then(() => {
+        tick().then(() => {
             if (canExit(event, index)) {
                 handleExit(event.key);
             }

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

@@ -13,7 +13,8 @@
         placeholder: {attribute: 'placeholder', type: 'String'},
         searchPlaceholder: {attribute: 'search-placeholder', type: 'String'},
         noOptionsMessage: {attribute: 'no-options-message', type: 'String'},
-        multiple: {attribute: 'multiple', type: 'Boolean'}
+        multiple: {attribute: 'multiple', type: 'Boolean'},
+        expanded: {attribute: 'expanded', type: 'Boolean', reflect: true},
     }
 }}"/>
 
@@ -31,14 +32,15 @@
         label,
         placeholder,
         width,
+        expanded = $bindable(false),
         ...rest
     } = $props();
 
     let selectElement = $state();
     let items = $state();
     let labelElement = $state();
-    let observer = new MutationObserver(setupItemsList);
-    let observerOptions = {
+    const observer = Utils.createMutationObserver($host(), setupItemsList);
+    const observerOptions = {
         childList: true,
         attributes: true,
         subtree: true,
@@ -48,6 +50,7 @@
     let errorElement = $state();
     let parentRow = $derived($host().closest(".qc-formfield-row"));
     let internalChange = false;
+    let previousValue = $state(value);
 
     onMount(() => {
         selectElement = $host().querySelector("select");
@@ -55,12 +58,14 @@
         if (labelElement) {
             label = labelElement.innerHTML;
         }
+
         if (selectElement) {
             multiple = selectElement.multiple;
             disabled = selectElement.disabled;
 
             selectElement.addEventListener("change", handleSelectChange);
-            observer.observe(selectElement, observerOptions);
+
+            observer?.observe(selectElement, observerOptions);
         }
         setupItemsList();
         $host().classList.add("qc-select");
@@ -75,19 +80,39 @@
         if (!selectElement) return;
         if (!selectElement.options) return;
         internalChange = true;
-        let newOptionSelected = false;
         for (const option of selectElement.options) {
-                const selected = value.includes(option.value);
-                if (selected !== option.selected) {
-                    option.toggleAttribute("selected", selected);
-                    option.selected = selected;
-                    newOptionSelected = true;
+            const selected = value.includes(option.value);
+            if (selected !== option.selected) {
+                option.toggleAttribute("selected", selected);
+                option.selected = selected;
             }
         }
-        if (newOptionSelected) {
-            selectElement.dispatchEvent(new Event('change'));
+        tick().then(() => internalChange = false);
+    });
+
+    $effect(() => {
+        if (previousValue.toString() !== value.toString()) {
+            previousValue = value;
+            selectElement?.dispatchEvent(new CustomEvent('change', {detail: value}));
+        }
+    });
+
+    $effect(() => {
+        if (expanded) {
+            selectElement?.dispatchEvent(
+                new CustomEvent('qc.select.show', {
+                    bubbles: true,
+                    composed: true
+                })
+            );
+        } else {
+            selectElement?.dispatchEvent(
+                new CustomEvent('qc.select.hide', {
+                    bubbles: true,
+                    composed: true
+                })
+            );
         }
-        tick().then(() => internalChange = false)
     });
 
     $effect(() => {
@@ -134,6 +159,7 @@
         {multiple}
         {disabled}
         {required}
+        bind:expanded
         {...rest}
 />
 <link rel='stylesheet' href='{Utils.cssPath}'>

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

@@ -61,10 +61,10 @@
         items={multipleChoiceOptions}
 />
 
-<div class="qc-formfield-row">
+<div class="qc-formfield-row" style="margin-top: 0;">
     <DropdownList
             id="dropdown-list-invalid"
-            label="État invalide"
+            label="État initialement invalide dans .qc-formfield-row"
             invalid="true"
             items={invalidOptions}
     />

package/src/sdg/components/DropdownList/Test/dropdownListBaselineTest.html

@@ -27,6 +27,13 @@
     selectElement.addEventListener("change", (event) => {
         console.log("Option sélectionnée :", event.target.value);
     });
+
+    selectElement.addEventListener("qc.select.show", (event) => {
+        console.log("qc.select.show event:", event);
+    });
+    selectElement.addEventListener("qc.select.hide", (event) => {
+        console.log("qc.select.hide event:", event);
+    });
 </script>
 
 <div style="height: 40rem;">

package/src/sdg/components/DropdownList/_dropdownList.scss

@@ -55,16 +55,18 @@ $border: 1;
 
 .qc-dropdown-list-expanded {
   position: absolute;
-  width: calc(100% + 2px);
-  left: -(rem($border));
-  right: -(rem($border));
-  top: 100%;
+  width: calc(100% + 2 * var(--dropdown-button-border)px);
+  left: calc(var(--dropdown-button-border) * $rem-ratio * -1rem);
+  right: calc(var(--dropdown-button-border) * $rem-ratio * -1rem);
+  top: calc(var(--dropdown-items-top-offset) * $rem-ratio * 1rem);
+  //top: 100%;
   z-index: 11; // Index supérieur à l'index du mixin qc-formcontrol-box
 
   background-color: token-value(color, background);
   border-left: rem($border) solid token-value(color, grey, medium);
   border-right: rem($border) solid token-value(color, grey, medium);
-  border-bottom: rem($border) solid token-value(color, grey, medium);
+  border-bottom: calc(var(--dropdown-items-bottom-border) * $rem-ratio * 1rem) solid token-value(color, grey, medium);
+  border-top: calc(var(--dropdown-items-top-border) * $rem-ratio * 1rem) solid token-value(color, grey, medium);
 }
 
 .qc-dropdown-list-hidden {

package/src/sdg/components/DropdownList/_select.html

@@ -26,6 +26,20 @@
         </select>
     </qc-select>
 
+    <script>
+        const selectElement = document.getElementById("select-single-choice");
+
+        selectElement.addEventListener("change", (event) => {
+            console.log("Option sélectionnée :", event.target.value);
+        });
+        selectElement.addEventListener("qc.select.show", () => {
+            console.log("Options affichées");
+        });
+        selectElement.addEventListener("qc.select.hide", () => {
+            console.log("Options cachées");
+        });
+    </script>
+
     <qc-select id="qc-select-single-choice-search" enable-search>
         <label for="select-single-choice-search">Choix unique avec recherche</label>
         <select id="select-single-choice-search">
@@ -201,11 +215,11 @@
 <div class="table-overflow">
     <table class="qc-table qc-striped component-attributes-description">
         <thead>
-        <tr>
-            <th>Nom</th>
-            <th>Type</th>
-            <th>Description</th>
-        </tr>
+            <tr>
+                <th>Nom</th>
+                <th>Type</th>
+                <th>Description</th>
+            </tr>
         </thead>
         <tbody>
             <tr>
@@ -213,9 +227,21 @@
                 <td>Tableau de chaîne de caractères</td>
                 <td>Valeur(s) sélectionnée(s) dans la liste déroulante</td>
             </tr>
+            <tr>
+                <td>expanded</td>
+                <td>Booléen</td>
+                <td>Indique que la liste déroulante est ouverte</td>
+            </tr>
         </tbody>
     </table>
 </div>
 
+<h5>Événements JS</h5>
+<ul>
+    <li>Un événement JS <code class="qc-bg-color-grey-pale">change</code> est émis lors du changement de valeur sélectionnée dans la liste déroulante.</li>
+    <li>Un événement JS <code class="qc-bg-color-grey-pale">qc.select.show</code> est émis lorsqu'une liste déroulante est ouverte.</li>
+    <li>Un événement JS <code class="qc-bg-color-grey-pale">qc.select.hide</code> est émis lorsqu'une liste déroulante est fermée.</li>
+</ul>
+
 <h5>Zone d'ajout de contenu HTML</h5>
 <p>Ce composant ne comporte qu'une seule zone d'ajout de contenu.</p>

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

@@ -1,96 +1,58 @@
 <script>
 import {Utils} from "../utils";
-import {onMount} from "svelte";
+import Icon from "../../bases/Icon/Icon.svelte";
+import {tick} from "svelte";
 
-const {
+let {
     externalIconAlt = Utils.getPageLanguage() === 'fr'
         ? "Ce lien dirige vers un autre site."
-        : "This link directs to another site."
+        : "This link directs to another site.",
+    links = [],
+    isUpdating = $bindable(false),
+    nestedExternalLinks = false
 } = $props();
 
 let imgElement = $state();
+let processedLinks = new Set();
 
-function createVisibleNodesTreeWalker() {
-    return document.createTreeWalker(
-        imgElement.parentElement,
-        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;
-            }
-        }
-    );
-}
-
-onMount(() => {
-    imgElement.parentElement.querySelectorAll('a').forEach(link => {
-
-        // Crée un TreeWalker pour parcourir uniquement les nœuds texte visibles
-        const walker = createVisibleNodesTreeWalker();
-
-        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) {
+function addExternalLinkIcon(links) {
+    links.forEach(link => {
+        if (processedLinks.has(link.innerHTML)) {
             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;
-        }
+        let linkContent = link.innerHTML;
+        linkContent = `<span class="qc-ext-link-text">${linkContent}</span>&nbsp;${imgElement.outerHTML}`;
 
-        const prefix = match[1] || "";
-        const lastWord = match[2].replace(/([\/\-\u2013\u2014])/g, "$1<wbr>");
+        link.innerHTML = linkContent;
+        processedLinks.add(linkContent);
+    });
+}
 
-        // 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}`;
-        span.appendChild(imgElement)
+$effect(() => {
+    if (nestedExternalLinks || links.length <= 0 || !imgElement) {
+        return;
+    }
 
-        // 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);
-        }
+    isUpdating = true;
+
+    tick().then(() => {
+        addExternalLinkIcon(links);
+        return tick();
+    }).then(() => {
+        isUpdating = false;
     });
 });
 </script>
 
-<span bind:this={imgElement}
-      role="img"
-      class="qc-ext-link-img"
-      aria-label={externalIconAlt}>
-</span>
+<div hidden>
+    <Icon
+            type="external-link"
+            alt={externalIconAlt}
+            bind:rootElement={imgElement}
+            class="qc-ext-link-img"
+    />
+</div>
 
 
 

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

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

package/src/sdg/components/ExternalLink/externalLinkBaselineTest.html

@@ -0,0 +1,45 @@
+<div style="border: 1px solid var(--qc-color-text-primary); padding: var(--qc-spacer-sm); max-width: 376px;">
+    <p>
+        <qc-external-link>
+            <a href="#multi-links"
+               target="_blank"
+               rel="noreferrer nofollow"
+               data-external-link="true"
+            >
+                https:/<wbr>/<wbr>www.quebec.ca/<wbr>gouvernement/<wbr>ministere/<wbr>travail/<wbr>lois-<wbr>reglements#c335465
+            </a>
+        </qc-external-link>
+    </p>
+</div>
+
+<p class="qc-font-size-xl">
+    Lorem ipsum
+    <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
+        adipiscing</a></qc-external-link>
+    elit
+</p>
+<p class="qc-font-size-lg">
+    Lorem ipsum
+    <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
+        adipiscing</a></qc-external-link>
+    elit
+</p>
+<p class="qc-font-size-md">
+    Lorem ipsum
+    <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
+        adipiscing</a></qc-external-link>
+    elit
+</p>
+<p class="qc-font-size-sm">
+    Lorem ipsum
+    <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
+        adipiscing</a></qc-external-link>
+    elit
+</p>
+
+<p class="qc-font-size-md">
+    <qc-external-link id="multi-links">
+        <a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</a>
+        <a href="https://www.google.com/">Google</a>
+    </qc-external-link>
+</p>

package/src/sdg/components/Fieldset/_fieldset.scss

@@ -7,9 +7,9 @@
   margin: 0 0 rem(32);
   justify-items: start;
   legend {
-    font-weight: token-value(font weight content bold);
     display: inline-block;
     margin-bottom: token-value(spacer, md);
+    white-space: nowrap;
   }
   &.qc-compact {
     margin-bottom: token-value(spacer, sm);

package/src/sdg/components/Label/LabelText.svelte

@@ -1,4 +1,5 @@
 <script>
     let {text, required} = $props()
 </script>
-{@html text}{#if required}<span class="qc-required" aria-hidden="true">*</span>{/if}
+
+<span class="qc-label-text">{@html text}</span>{#if required}<span class="qc-required" aria-hidden="true">*</span>{/if}

package/src/sdg/components/Label/_label.scss

@@ -1,9 +1,10 @@
 @use "qc-sdg-lib" as *;
 
 .qc-label {
-  font-weight: token-value(font weight content bold);
-  display: block;
+  display: inline-block;
   width: fit-content;
+  white-space: nowrap;
+  margin: 0;
 
   &.qc-compact {
     font-size: token-value(font size sm);
@@ -18,3 +19,10 @@
     cursor: not-allowed;
   }
 }
+
+.qc-label-text {
+  white-space: wrap;
+  margin: 0;
+
+  @include content-font(md, bold);
+}

package/src/sdg/components/PivFooter/_pivFooter.html

@@ -70,7 +70,7 @@
       <td>Le chemin de l’image en thème clair.</td>
       <td>Le chemin vers l’image dist/img/QUEBEC_couleur.svg de la trousse</td>
       <td>Adresse de l’image du pied de page en thème clair (fond transparent, texte et drapeaux en
-        couleur, voir <a href="#piv-footer-ex-2">l’exemple de pied de page PIV personnalisé</a>).
+        couleur, voir <a href="#piv-footer-ex-2">l’exemple de pied de page du PIV personnalisé</a>).
       </td>
     </tr>
     <tr>
@@ -78,7 +78,7 @@
       <td>Le chemin de l’image en thème sombre.</td>
       <td>Le chemin vers l’image dist/img/QUEBEC_blanc.svg de la trousse</td>
       <td>Adresse de l’image du pied de page en thème sombre (fond transparent, texte et drapeaux en
-        blanc, voir <a href="#piv-footer-ex-2">l’exemple de pied de page PIV personnalisé</a>).
+        blanc, voir <a href="#piv-footer-ex-2">l’exemple de pied de page du PIV personnalisé</a>).
       </td>
     </tr>
     <tr>
@@ -129,7 +129,7 @@
   </table>
 </div>
 
-<qc-notice type="information">Les images du pied de page PIV doivent respecter
+<qc-notice type="information">Les images du pied de page du PIV doivent respecter
   <qc-external-link><a href="https://www.piv.gouv.qc.ca/fileadmin/documents/guide/section1_general.pdf">les
     normes graphiques du système d’identification visuelle.</a>. Nous vous invitons à privilégier le format
     SVG, qui permet de conserver la lisibilité de l’image en cas de zoom.
@@ -140,7 +140,7 @@
 
 <p>Ci-dessous, les zones d’ajout de contenu HTML (balise &lt;slot&gt;) délimitées en pointillé.</p>
 <qc-doc-exemple id="qc-piv-footer-slots"
-                caption="Présentation des zones d’ajout de contenu du pied de page PIV">
+                caption="Présentation des zones d’ajout de contenu du pied de page du PIV">
   <qc-piv-footer>
     <div style="border:2px dashed;padding: var(--qc-spacer-xs);">
       Contenu par défaut

package/src/sdg/components/SearchInput/SearchInput.svelte

@@ -2,12 +2,15 @@
     import IconButton from "../IconButton/IconButton.svelte";
     import {Utils} from "../utils";
     import Icon from "../../bases/Icon/Icon.svelte";
+    import Label from "../Label/Label.svelte";
 
     const lang = Utils.getPageLanguage();
 
 
     let {
         value = $bindable(''),
+        label = '',
+        size = '',
         ariaLabel = lang === "fr" ? "Rechercher..." : "Search...",
         clearAriaLabel = lang === "fr" ? "Effacer le texte" : "Clear text",
         leftIcon = false,
@@ -25,11 +28,20 @@
     }
 </script>
 
+{#if label}
+    <Label
+        disabled={isDisabled}
+        text={label}
+        forId={id}
+    />
+{/if}
 <div class={[
             "qc-search-input",
             leftIcon && "qc-search-left-icon",
             leftIcon && isDisabled && "qc-search-left-icon-disabled"
-        ]} >
+        ]}
+     size={size}>
+
     {#if leftIcon}
         <Icon type="search-thin"
               iconColor="grey-regular"
@@ -40,7 +52,7 @@
             bind:value
             type="search"
             autocomplete="off"
-            aria-label={ariaLabel}
+            aria-label={label ? undefined : ariaLabel}
             class={isDisabled ? "qc-disabled" : ""}
             id={id}
             {...rest}

package/src/sdg/components/SearchInput/SearchInputWC.svelte

@@ -5,6 +5,8 @@
         id: {attribute: 'id'},
         ariaLabel: {attribute:'aria-label'},
         clearAriaLabel: {attribute: 'clear-aria-label'},
+        label: {attribute: 'label'},
+        size: {attribute: 'size'},
         leftIcon: {attribute: 'left-icon'}
     }
 }}" />

package/src/sdg/components/SearchInput/_searchInput.html

@@ -28,6 +28,16 @@
             left-icon
             clear-aria-label="Effacer le texte"
     ></qc-search-input>
+
+    <br>
+
+    <qc-search-input
+            label="Nom de l'article"
+            size="md"
+            placeholder="Rechercher un article"
+            clear-aria-label="Effacer le texte"
+            left-icon
+    ></qc-search-input>
 </qc-doc-exemple>
 
 <h3>Documentation technique</h3>
@@ -75,10 +85,16 @@
             <td>Désactive le champ.</td>
         </tr>
         <tr>
-            <td>name</td>
+            <td>label</td>
             <td>Texte</td>
             <td>""</td>
-            <td>Nom du champ utilisé lors de la soumission du formulaire.</td>
+            <td>Texte du libellé du champ. Remplace automatiquement l'aria-label lorsqu'il est défini.</td>
+        </tr>
+        <tr>
+            <td>size</td>
+            <td>"xs", "sm", "md", "lg", "xl"</td>
+            <td>""</td>
+            <td>Largeur du champ</td>
         </tr>
         </tbody>
     </table>