qc-trousse-sdg 1.4.5 → 1.4.7

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/FormfieldRow/_formfieldRow.html

@@ -1,6 +1,11 @@
-<h3 id="champs-alignes">Champs alignés horizontalement (classe <code>qc‑textfield‑row</code>)</h3>
+<h3 id="champs-alignes">Champs alignés horizontalement (classe <code>qc‑formfield‑row</code>)</h3>
 
-<p>Les champs regroupés sur une ligne doivent être placés dans un div avec la classe <code>qc-textfield-row</code> pour correctement afficher les messages d’erreur en cas de soumission invalide.</p>
+<p>
+    Les champs regroupés sur une ligne doivent être placés dans un <code>div</code> avec la classe <code>qc-formfield-row</code>.
+    De cette façon, les messages d'erreur ne provoquent pas de décalage.
+    <br/><br/>
+    Voir le code des champs Téléphone et Poste dans l'exemple ci-dessus.
+</p>
 
 <h4>Exemple</h4>
 <qc-doc-exemple caption="Exemple de champs sur une seule ligne">
@@ -101,8 +106,3 @@
         }
     });
 </script>
-
-<h4>Documentation technique</h4>
-<p>Placer les champs à regrouper sur une seule ligne dans un div avec la classe <code>qc-formfield-row</code></p>
-
-

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/Notice/_notice.html

@@ -61,13 +61,13 @@
              title="Des erreurs sont présentes dans le formulaire :">
     <ul>
       <li>
-        <a href="javascript:;">Le champ « Nom de famille » est obligatoire ;</a>
+        <a href="#">Le champ « Nom de famille » est obligatoire ;</a>
       </li>
       <li>
-        <a href="javascript:;">Le champ « Prénom » est obligatoire ;</a>
+        <a href="#">Le champ « Prénom » est obligatoire ;</a>
       </li>
       <li>
-        <a href="javascript:;">Le champ « Numéro de dossier » est obligatoire.</a>
+        <a href="#">Le champ « Numéro de dossier » est obligatoire.</a>
       </li>
     </ul>
   </qc-notice>

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/PivHeader/Test/pivHeaderBaselineTest.html

@@ -13,7 +13,7 @@
         <ul>
             <li><a href="#fakeEnglish">English</a>
             </li>
-            <li><a href="javascript:;">Nous joindre</a>
+            <li><a href="#">Nous joindre</a>
             </li>
         </ul>
     </nav>
@@ -30,7 +30,7 @@
         <ul slot="links">
             <li><a href="#fakeEnglish">English</a>
             </li>
-            <li><a href="javascript:;">Nous joindre</a>
+            <li><a href="#">Nous joindre</a>
             </li>
         </ul>
 

package/src/sdg/components/PivHeader/Test/pivHeaderEmbeddedTest.svelte

@@ -13,7 +13,8 @@
         <ul>
             <li><a href="#fakeEnglish">English</a>
             </li>
-            <li><a href="javascript:;">Nous joindre</a>
+            <!-- svelte-ignore a11y_invalid_attribute -->
+            <li><a href="#">Nous joindre</a>
             </li>
         </ul>
     </nav>

package/src/sdg/components/PivHeader/_pivHeader.html

@@ -26,7 +26,7 @@
       <ul>
         <li><a href="#fakeEnglish">English</a>
         </li>
-        <li><a href="javascript:;">Nous joindre</a>
+        <li><a href="#">Nous joindre</a>
         </li>
       </ul>
     </nav>
@@ -47,7 +47,7 @@
       <ul slot="links">
         <li><a href="#fakeEnglish">English</a>
         </li>
-        <li><a href="javascript:;">Nous joindre</a>
+        <li><a href="#">Nous joindre</a>
         </li>
       </ul>
 

package/src/sdg/components/PivHeader/_pivHeader.scss

@@ -142,10 +142,6 @@ qc-piv-header,
     --qc-color-link-visited: white;
     --qc-color-link-active: white;
 
-    font-family: token-value(font family header);
-    text-decoration: none;
-    font-weight: token-value(font weight regular);
-
     &:hover {
       text-decoration: underline;
     }
@@ -155,6 +151,12 @@ qc-piv-header,
       outline-offset: -2px;
     }
   }
+
+  a, span {
+    font-family: token-value(font family header);
+    text-decoration: none;
+    font-weight: token-value(font weight regular);
+  }
 }
 
 .go-to-content {

package/src/sdg/components/TextField/Test/TextFieldEmbededTest.svelte

@@ -28,6 +28,7 @@
 >
     <input type="text"
            name="text-md"
+           id="text-md"
            placeholder="Long placeholder lorem ipsum dolor sit amet"
     />
 </TextField>
@@ -39,6 +40,7 @@
            required>
     <input type="text"
            name="text-lg"
+           id="text-lg"
     />
 </TextField>
 
@@ -54,10 +56,24 @@
     />
 </TextField>
 
+<div style="width: 500px; max-width: 100%;padding: 10px; border: 1px solid #ccc;">
+    <TextField
+            label="Très large"
+            size="xl"
+
+    >
+        <input type="text"
+               placeholder="Long placeholder lorem ipsum dolor sit amet"
+               name="text-xl"
+               disabled
+        />
+    </TextField>
+</div>
+
 <div class="qc-formfield-row">
     <TextField
-            label="Combiné 1"
-            size="sm"
+            label="Combiné 1 Long placeholder lorem ipsum dolor sit amet"
+            size="lg"
     >
         <input type="text"
                placeholder="Long placeholder lorem ipsum dolor sit amet"
@@ -66,7 +82,7 @@
     </TextField>
 
     <TextField
-            label="Combiné 2"
+            label="Combiné 2 Long placeholder lorem ipsum dolor sit amet"
             size="xs"
     >
         <input type="text"

package/src/sdg/components/TextField/Test/textFieldBaselineTest.html

@@ -22,17 +22,20 @@
 >
     <input type="text"
            name="text-md"
+           id="text-md"
            placeholder="Long placeholder lorem ipsum dolor sit amet"
     />
 </qc-textfield>
 
 <qc-textfield name="text-lg"
-              label="Large"
               size="lg"
               placeholder="Long placeholder lorem ipsum dolor sit amet"
-              required>
+>
+    <label for="text-lg">Large</label>
     <input type="text"
            name="text-lg"
+           id="text-lg"
+           required
     />
 </qc-textfield>
 <qc-textfield

package/src/sdg/components/TextField/TextField.svelte

@@ -34,7 +34,9 @@
         rootElement = $state(),
         textFieldRow = $state(),
         defaultInvalidText = $derived.by(() => {
-            if (!maxlengthReached) return '';
+            if (!maxlengthReached) {
+                return undefined;
+            }
             return lang === 'fr'
                 ? `La limite de caractères du champ ${label} est dépassée.`
                 : `The character limit for the ${label} field has been exceeded.`
@@ -44,13 +46,18 @@
     onMount(() => {
         if (webComponentMode) return;
         if (!input) {
-            input = rootElement.querySelector('input,textarea');
+            input = rootElement?.querySelector('input,textarea');
         }
         onMountInput(
             input,
             textFieldRowParam => textFieldRow = textFieldRowParam,
             valueParam => value = valueParam,
-            invalidParam => invalid = invalidParam
+            invalidParam => invalid = invalidParam,
+            requiredParam => {
+                if (requiredParam) {
+                    required = requiredParam;
+                }
+            }
         )
     })
 
@@ -117,7 +124,6 @@
         input.setAttribute('aria-invalid', invalid)
         input.setAttribute('aria-required', required)
     })
-
 </script>
 
 {#snippet textfield()}
@@ -140,7 +146,7 @@
         </div>
     {/if}
 
-    {@render children()}
+    {@render children?.()}
 
     {#if maxlength && maxlength !== null}
         <div
@@ -157,7 +163,7 @@
     {/if}
 
     <FormError {invalid}
-               invalidText={invalidText ? invalidText :  defaultInvalidText}
+               invalidText={invalidText ? invalidText : defaultInvalidText}
                label={label ? label : input?.getAttribute("aria-label")}
                bind:id={errorId}
                extraClasses={['qc-xs-mt']}

package/src/sdg/components/TextField/TextFieldWC.svelte

@@ -40,11 +40,22 @@
         textFieldRow = $state()
     ;
     onMount(() => {
-        input = $host().querySelector('input,textarea');
+        const initialLabelElement = $host()?.querySelector('label');
+        if (initialLabelElement) {
+            label = initialLabelElement.innerHTML;
+            initialLabelElement.remove();
+        }
+
+        input = $host()?.querySelector('input,textarea');
         onMountInput(input,
             textFieldRowParam => textFieldRow = textFieldRowParam,
             valueParam => value = valueParam,
-            invalidParam => invalid = invalidParam
+            invalidParam => invalid = invalidParam,
+            requiredParam => {
+                if (requiredParam) {
+                    required = requiredParam;
+                }
+            }
         )
     })
 
@@ -55,24 +66,27 @@
 
     $effect(() => {
         if (!input) return;
-        if (label) {
-            input.before(labelElement);
-        }
         if (description) {
             input.before(descriptionElement);
         }
-        if (invalid) {
-            if (textFieldRow) {
-                textFieldRow.appendChild(formErrorElement);
-            }
-            else {
-                input.after(formErrorElement);
-            }
-        }
         if (maxlength) {
             input.after(maxlengthElement);
         }
     })
+
+    $effect(() => {
+        if (!formErrorElement) return;
+        if (textFieldRow) {
+            textFieldRow.appendChild(formErrorElement);
+        }
+        else {
+            if (maxlengthElement) {
+                maxlengthElement.after(formErrorElement);
+            } else {
+                input.after(formErrorElement);
+            }
+        }
+    })
 </script>
 
 <TextField

package/src/sdg/components/TextField/_textField.html

@@ -182,11 +182,6 @@
   </table>
 </div>
 
-<h4>Champs alignés horizontalement (classe <code>qc-textfield-row</code>)</h4>
-
-<p>Les champs regroupés sur une ligne peuvent être placés dans un div avec la classe <code>qc-textfield-row</code>. De cette façon, les messages d'erreur ne provoquent pas de décalage. <br/>
-    Voir le code des champs Téléphone et Poste dans l'exemple ci-dessus.</p>
-
 <h4>Propriété js</h4>
 <div class="table-overflow">
   <table class="qc-table qc-striped component-attributes-description">

package/src/sdg/components/TextField/textFieldUtils.js

@@ -1,6 +1,6 @@
 import {Utils} from "../utils";
 
-export function onMountInput(input, setTextFieldRow, setValue, setInvalid) {
+export function onMountInput(input, setTextFieldRow, setValue, setInvalid, setRequired) {
     if (!input) return;
     if (!input.autocomplete) {
         input.autocomplete = "off"
@@ -8,7 +8,8 @@ export function onMountInput(input, setTextFieldRow, setValue, setInvalid) {
     if (!input.id) {
         input.id =  Utils.generateId(input.type);
     }
-    setValue(input.value)
+    setValue(input.value);
+    setRequired(input.required);
     input.addEventListener(
         'input',
         () => {

package/src/sdg/components/utils.js

@@ -16,15 +16,14 @@ export class Utils {
         `${this.assetsBasePath}/img/`
             .replace('//','/')
     static cssFileName =
-        document
-            .currentScript
-            .getAttribute('sdg-css-filename')
-        || 'qc-sdg.min.css'
+        getCssFileName(document.currentScript.getAttribute('sdg-css-filename'), document.currentScript.src);
     static cssPath =
-        document
-            .currentScript
-            .getAttribute('sdg-css-path')
-        || this.cssRelativePath + this.cssFileName
+        getCssPath(
+            document.currentScript.getAttribute('sdg-css-path'),
+            document.currentScript.src,
+            this.cssRelativePath,
+            this.cssFileName
+        );
     static sharedTexts =
         { openInNewTab :
             { fr: 'Ce lien s’ouvrira dans un nouvel onglet.'
@@ -33,8 +32,8 @@ export class Utils {
         }
 
     /**
-     * Get current page language based on html lang attribute
-     * @returns {string} language code  (fr/en).
+     * Get current page language based on HTML lang attribute
+     * @returns {string} language code (fr/en).
      */
     static getPageLanguage() {
         return document.getElementsByTagName("html")[0].getAttribute("lang") || "fr";
@@ -56,12 +55,12 @@ export class Utils {
     /**
      * extract and clean prefixed attributes
      * example:
-     *  computeFieldsAttributes("radio" , {"radio-class":"my-radio", "radio-data-foo":"foo", "other":"other value"})
+     *  computeFieldsAttributes("radio", {"radio-class": "my-radio", "radio-data-foo": "foo", "other": "other value"})
      *  return {"class":"my-radio", "data-foo":"foo"}
      *
      </div>
      * @param {(string|string[])} prefix - Une chaîne de caractères ou un tableau de chaînes.
-     * @param restProps - ojbect of attributes
+     * @param restProps - object of attributes
      * @returns {*} - object of attributes
      */
     static computeFieldsAttributes(prefix , restProps) {
@@ -125,8 +124,8 @@ export class Utils {
         word = replaceAccents(word, /[ùûü]/gi, 'u');
         word = replaceAccents(word, /[ïî]/gi, 'i');
         word = replaceAccents(word, /[ôö]/gi, 'i');
-        word = replaceAccents(word, /[œ]/gi, 'oe');
-        word = replaceAccents(word, /[æ]/gi, 'ae');
+        word = replaceAccents(word, /œ/gi, 'oe');
+        word = replaceAccents(word, /æ/gi, 'ae');
 
         // Remplace les caractères spéciaux par des espaces.
         word = word.replaceAll(/[-_—–]/gi, ' ');
@@ -135,4 +134,69 @@ export class Utils {
         // Convertit le mot en minuscules.
         return word.toLowerCase();
     }
+
+    static now() {
+        return (new Date()).getTime();
+    }
+
+    /**
+     * Creates a MutationObserver instance with selector nesting check
+     * @param rootElement
+     * @param callback
+     * @param selector
+     * @returns {MutationObserver | null}
+     */
+    static createMutationObserver(rootElement, callback, selector) {
+        if (!selector) {
+            selector = rootElement.tagName.toLowerCase();
+        }
+        if (rootElement.querySelector(selector)) {
+            console.warn(`Imbrication d'éléments "${selector}" détectée. Le MutationObserver n'est pas créé`);
+            return null;
+        }
+
+        return new MutationObserver(callback);
+    }
+}
+
+function getCacheBustingParam(cssPath, currentScriptSrc) {
+    const pattern = /\?.*$/;
+
+    const cssCacheBustingParam = cssPath?.match(pattern);
+    if (cssCacheBustingParam && cssCacheBustingParam.length > 0) {
+        return '';
+    }
+
+    const scriptCacheBustingParam = currentScriptSrc?.match(pattern);
+    if (scriptCacheBustingParam && scriptCacheBustingParam.length > 0) {
+        return scriptCacheBustingParam[0];
+    }
+
+    return '';
+}
+
+function getCssFileName(sdgCssFilename, src) {
+    const cssPattern =/^.*\.css/;
+
+    if (!cssPattern.test(sdgCssFilename)) {
+        return 'qc-sdg.min.css' + getCacheBustingParam(
+            'qc-sdg.min.css', src
+        );
+    } else {
+        return sdgCssFilename + getCacheBustingParam(
+            sdgCssFilename, src
+        );
+    }
+}
+
+function getCssPath(sdgCssPath, src, cssRelativePath, cssFileName) {
+    const cssPattern =/^.*\.css/;
+
+    if (!cssPattern.test(sdgCssPath)) {
+        return cssRelativePath + cssFileName;
+    } else {
+        return sdgCssPath + getCacheBustingParam(
+            sdgCssPath, src
+        );
+    }
 }

package/src/sdg/qc-sdg-test.js

@@ -7,4 +7,5 @@ export * from './components/TextField/Test/TextFieldEmbededTest.svelte';
 export * from "./components/DropdownList/Test/DropdownListSvelteTest.svelte";
 export * from "./components/ChoiceGroup/Test/ChoiceGroupeEmbededTest.svelte";
 export * from "./components/ToggleSwitch/Test/ToggleSwitchEmbeddedTest.svelte";
-export * from "./components/PivHeader/Test/pivHeaderEmbeddedTest.svelte";
+export * from "./components/PivHeader/Test/pivHeaderEmbeddedTest.svelte";
+export * from "./components/Alert/Test/AlertSvelteTest.svelte";