qc-trousse-sdg 1.4.4 → 1.4.6

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

@@ -18,7 +18,7 @@
 }}"/>
 
 <script>
-    import {onDestroy, onMount} from "svelte";
+    import {onDestroy, onMount, tick} from "svelte";
     import DropdownList from "./DropdownList.svelte";
     import {Utils} from "../utils";
 
@@ -34,60 +34,60 @@
         ...rest
     } = $props();
 
-    const availableWidths = ["xs", "sm", "md", "lg", "xl"];
-
     let selectElement = $state();
     let items = $state();
     let labelElement = $state();
-    let observer;
+    let observer = new MutationObserver(setupItemsList);
+    let observerOptions = {
+        childList: true,
+        attributes: true,
+        subtree: true,
+        attributeFilter: ["label", "value", "disabled", "selected"]
+    };
     let instance = $state();
     let errorElement = $state();
     let parentRow = $derived($host().closest(".qc-formfield-row"));
-    let widthClass = $derived.by(() => {
-        if (availableWidths.includes(width)) {
-            return `qc-dropdown-list-root-${width}`;
-        }
-        return `qc-dropdown-list-root-md`;
-    });
+    let internalChange = false;
 
     onMount(() => {
         selectElement = $host().querySelector("select");
         labelElement = $host().querySelector("label");
-
         if (labelElement) {
             label = labelElement.innerHTML;
         }
         if (selectElement) {
             multiple = selectElement.multiple;
             disabled = selectElement.disabled;
-        }
 
+            selectElement.addEventListener("change", handleSelectChange);
+            observer.observe(selectElement, observerOptions);
+        }
         setupItemsList();
-        setupObserver();
+        $host().classList.add("qc-select");
     });
 
     onDestroy(() => {
         observer?.disconnect();
+        selectElement.removeEventListener("change", handleSelectChange);
     });
 
     $effect(() => {
-        if (
-            selectElement
-            && selectElement.options
-            && selectElement.options.length > 0
-            && value
-            && value.length > 0
-        ) {
-            for (const option of selectElement.options) {
-                if (value.includes(option.value)) {
-                    option.setAttribute('selected', '');
-                    option.selected = true;
-                } else {
-                    option.removeAttribute('selected');
-                    option.selected = false;
-                }
+        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;
             }
         }
+        if (newOptionSelected) {
+            selectElement.dispatchEvent(new Event('change'));
+        }
+        tick().then(() => internalChange = false)
     });
 
     $effect(() => {
@@ -96,13 +96,6 @@
        }
     });
 
-    $effect(() => {
-       if (widthClass) {
-           $host().classList.add("qc-dropdown-list-root");
-           $host().classList.add(widthClass);
-       }
-    });
-
     function setupItemsList() {
         const options = selectElement?.querySelectorAll("option");
         if (options && options.length > 0) {
@@ -117,21 +110,10 @@
         }
     }
 
-    function setupObserver() {
-        if (selectElement) {
-            if (observer) {
-                return;
-            }
-            observer = new MutationObserver(setupItemsList);
-            observer.observe(selectElement, {
-                childList: true,
-                attributes: true,
-                attributeFilter: ["label", "value", "disabled", "selected"]
-            });
-        }
+    function handleSelectChange() {
+        if (internalChange) return;
+        setupItemsList();
     }
-
-
 </script>
 
 <div hidden>
@@ -145,7 +127,6 @@
         {placeholder}
         {width}
         webComponentMode={true}
-        webComponentParentRow={parentRow}
         bind:value
         bind:errorElement
         bind:invalid

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

@@ -6,7 +6,6 @@
     import DropdownList from "../DropdownList.svelte";
     import {Utils} from "../../utils";
     import * as dropdownListTest from "./dropdownListTestUtils";
-    import Button from "../../Button/Button.svelte";
 
     let singleChoiceOptions = $state(dropdownListTest.genericOptions());
     let singleChoiceWithSearchOptions = $state(dropdownListTest.genericOptions());
@@ -15,8 +14,29 @@
     let restaurants = $state(dropdownListTest.restaurantsArray());
     let regions = $state(dropdownListTest.regionsArray());
 
+    let restaurantsDropdownList = $state(null);
+    let regionsDropdownList = $state(null);
+
     singleChoiceOptions[0].checked = true;
     singleChoiceWithSearchOptions[0].checked = true;
+
+    function validateForm(event) {
+        event.preventDefault();
+
+        if (restaurantsDropdownList && regionsDropdownList) {
+            let isValid = restaurantsDropdownList.value && restaurantsDropdownList.value.length > 0;
+            restaurantsDropdownList.invalid = !isValid;
+
+            if (isValid) {
+                const alertParts = [
+                    "Formulaire soumis avec les données suivantes :",
+                    "Type de restaurant: " + restaurantsDropdownList.value.join(", "),
+                    "Régions desservies: " + regionsDropdownList.value.join(", ")
+                ]
+                alert(alertParts.join("\n"));
+            }
+        }
+    }
 </script>
 
 <DropdownList
@@ -62,8 +82,17 @@
         items={JSON.parse(JSON.stringify(multipleChoiceOptions))}
 />
 
+<DropdownList
+        id="dropdown-list-multiple-sm"
+        label="Débordement"
+        multiple
+        width="sm"
+        items={dropdownListTest.overflowOptions()}
+/>
+
 <form id="dropdown-list-embedded-test-form">
     <DropdownList
+            bind:this={restaurantsDropdownList}
             label="Types de restaurants"
             required="true"
             placeholder="Types de restaurants"
@@ -74,6 +103,7 @@
     />
 
     <DropdownList
+            bind:this={regionsDropdownList}
             label="Régions desservies"
             multiple="true"
             placeholder="Sélectionner une région"
@@ -83,7 +113,12 @@
             width="lg"
     />
 
-    <Button label="Envoyer" type="submit" compact="true" />
+    <button
+            type="submit" class="qc-button qc-primary qc-compact"
+            onclick={(event) => validateForm(event)}
+    >
+        Envoyer
+    </button>
 </form>
 
 <link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/DropdownList/Test/{dropdownListTest.html → dropdownListBaselineTest.html}

@@ -20,6 +20,15 @@
   </select>
 </qc-select>
 
+<script>
+    const selectElement = document.getElementById("select-single-choice");
+    console.log("Select element options[0]:", selectElement.options[0]);
+
+    selectElement.addEventListener("change", (event) => {
+        console.log("Option sélectionnée :", event.target.value);
+    });
+</script>
+
 <div style="height: 40rem;">
   <qc-select id="qc-select-single-choice-search" enable-search>
     <label for="select-single-choice-search">Choix unique avec recherche</label>
@@ -68,7 +77,7 @@
 
 <div class="qc-formfield-row">
   <qc-select id="qc-select-invalid" invalid>
-    <label for="select-invalid">État invalide</label>
+    <label for="select-invalid">État initialement invalide dans .qc-formfield-row</label>
     <select multiple id="select-invalid">
       <option value="1">Option 1</option>
       <option value="2">Option 2</option>
@@ -117,6 +126,15 @@
   <select id="select-disabled" disabled>disabled</select>
 </qc-select>
 
+<qc-select id="qc-select-multiple-choices-sm" width="sm">
+    <label for="select-multiple-choices-sm">Débordement</label>
+    <select id="select-multiple-choices-sm" multiple>
+        <option value="1">Option 1 + texte de remplissage</option>
+        <option value="2">Option 2 + texte de remplissage</option>
+        <option value="3">Option 3 + texte de remplissage</option>
+    </select>
+</qc-select>
+
 <form id="dropdown-list-form">
   <qc-select
           id="dropdown-list-restaurants"

package/src/sdg/components/DropdownList/Test/dropdownListTestUtils.js

@@ -12,6 +12,20 @@ export function genericOptions() {
     return genericOptions;
 }
 
+export function overflowOptions() {
+    let overflowOptions = [];
+    for (let i = 1; i <= 3; i++) {
+        overflowOptions.push({
+            value: i,
+            label: `Option ${i} + texte de remplissage`,
+            disabled: false,
+            checked: false,
+        });
+    }
+
+    return overflowOptions;
+}
+
 export function restaurantsArray() {
     return [
         {

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

@@ -6,18 +6,11 @@
 $min-height: 40;
 $border: 1;
 
-.qc-dropdown-list-margin {
+.qc-select {
+  display: block;
   margin-bottom: rem(32);
-}
-
-.qc-dropdown-list-root {
-  width: 100%;
 
-  &-xs { max-width: token-value(size, max-width, xs); }
-  &-sm { max-width: token-value(size, max-width, sm); }
-  &-md { max-width: token-value(size, max-width, md); }
-  &-lg { max-width: token-value(size, max-width, lg); }
-  &-xl { max-width: token-value(size, max-width, xl); }
+  max-width: 100%;
 }
 
 .qc-dropdown-list-container {
@@ -26,12 +19,6 @@ $border: 1;
   .qc-label {
     margin-bottom: rem(4);
   }
-
-  &-xs { max-width: token-value(size, max-width, xs); }
-  &-sm { max-width: token-value(size, max-width, sm); }
-  &-md { max-width: token-value(size, max-width, md); }
-  &-lg { max-width: token-value(size, max-width, lg); }
-  &-xl { max-width: token-value(size, max-width, xl); }
 }
 
 .qc-dropdown-list {
@@ -40,6 +27,8 @@ $border: 1;
   border: rem($border) solid token-value(color, grey, medium);
   min-height: rem($min-height);
   background-color: token-value(color, background);
+  max-width: 100%;
+  min-width: 0;
 
   &.qc-dropdown-list-invalid {
     border: rem(2) solid token-value(color, red, regular) !important;
@@ -48,6 +37,12 @@ $border: 1;
       height: rem(36);
     }
   }
+
+  &-xs { width: token-value(size, max-width, xs); }
+  &-sm { width: token-value(size, max-width, sm); }
+  &-md { width: token-value(size, max-width, md); }
+  &-lg { width: token-value(size, max-width, lg); }
+  &-xl { width: token-value(size, max-width, xl); }
 }
 
 .qc-dropdown-list-search {

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

@@ -75,6 +75,15 @@
             <option value="2">Option 2</option>
         </select>
     </qc-select>
+
+    <qc-select id="qc-select-multiple-choices-sm" width="sm">
+        <label for="select-multiple-choices-sm">Débordement</label>
+        <select id="select-multiple-choices-sm" multiple>
+            <option value="1">Option 1 + texte de remplissage</option>
+            <option value="2">Option 2 + texte de remplissage</option>
+            <option value="3">Option 3 + texte de remplissage</option>
+        </select>
+    </qc-select>
 </qc-doc-exemple>
 
 <h4>Documentation technique</h4>

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

@@ -1,4 +1,5 @@
 @use "qc-sdg-lib" as *;
+@use "sass:map";
 
 .qc-fieldset {
   border: none;
@@ -76,7 +77,8 @@ $invalid-border-width: 2px;
   gap: 0 rem(32);
   flex-wrap: wrap;
   margin-bottom: rem(32);
-  margin-top: rem(-8);
+  $mb : token-value(spacer, xs);
+  margin-top: calc(-1 * $mb);
 
   > .qc-form-error {
     width: 100%;
@@ -84,12 +86,23 @@ $invalid-border-width: 2px;
   qc-textfield,
   .qc-textfield {
     margin-top: token-value(spacer, xs);
-    display: block;
-    width: auto;
     margin-bottom: 0;
+    min-width: 0;
+
+    $sizes: map.get($lg-tokens, size, max-width);
+    @each $size, $width in $sizes {
+      [size="#{$size}"] {
+        input {
+          width: $width;
+          max-width: $width;
+        }
+      }
+    }
   }
-  .qc-dropdown-list-root {
+
+  .qc-select {
     margin-top: token-value(spacer, xs);
     margin-bottom: 0;
+    width: fit-content;
   }
 }

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/_label.scss

@@ -3,6 +3,7 @@
 .qc-label {
   font-weight: token-value(font weight content bold);
   display: block;
+  width: fit-content;
 
   &.qc-compact {
     font-size: token-value(font size sm);

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.svelte

@@ -4,8 +4,8 @@
 
     let {
         logoUrl = '/',
-        logoSrc = Utils.imagesRelativePath + '/QUEBEC_couleur.svg',
-        logoSrcDarkTheme = Utils.imagesRelativePath + '/QUEBEC_blanc.svg',
+        logoSrc = Utils.imagesRelativePath + 'QUEBEC_couleur.svg',
+        logoSrcDarkTheme = Utils.imagesRelativePath + 'QUEBEC_blanc.svg',
         logoAlt = lang === 'fr' ? 'Logo du gouvernement du Québec' : 'Logo of the Quebec government',
         logoWidth = 139,
         logoHeight = 50,

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

@@ -1,6 +1,6 @@
 <script>
-    import { onMount, tick } from "svelte";
-    import { Utils } from "../utils"
+    import {onMount, tick} from "svelte";
+    import {Utils} from "../utils"
 
     const lang = Utils.getPageLanguage();
 
@@ -46,93 +46,98 @@
     }
 
     onMount(() => {
-      containerClass += fullWidth === 'true' ? '-fluid' : '';
-      if (showSearch === 'true') {
-        enableSearch = 'true'
-        displaySearchForm = true;
-      }
+        containerClass += fullWidth === 'true' ? '-fluid' : '';
+        if (showSearch === 'true') {
+            enableSearch = 'true'
+            displaySearchForm = true;
+        }
     });
 </script>
 
 <div role="banner"
      class="qc-piv-header qc-component"
-     style="--logo-src:url({logoSrc})"
 >
-  <div class="{containerClass}">
-    {#if goToContent === 'true'}
-      <div class="go-to-content">
-        <a href="{goToContentAnchor}">
-          {goToContentText}
-        </a>
-      </div>
-    {/if}
-      {#snippet title()}
-          {#if titleUrl && titleText}
-          <div class="title">
-              <a href="{titleUrl}">
-                  {titleText}
-              </a>
-          </div>
-          {/if}
-      {/snippet}
-      <div class="piv-top">
+    <div class="{containerClass}">
+        {#if goToContent === 'true'}
+            <div class="go-to-content">
+                <a href="{goToContentAnchor}">
+                    {goToContentText}
+                </a>
+            </div>
+        {/if}
+        {#snippet title()}
+            {#if titleText}
+                <div class="title">
+                    {#if titleUrl && titleUrl.length > 0}
+                        <a class="page-title" href="{titleUrl}">{titleText}</a>
+                    {:else}
+                        <span class="page-title" role="heading" aria-level="1">{titleText}</span>
+                    {/if}
+                </div>
+            {/if}
+        {/snippet}
+        <div class="piv-top">
+            <div class="signature-group">
+                <div class="logo">
+                    <a
+                            href="{logoUrl}"
+                            rel="noreferrer"
+                    >
+                        <img src="{logoSrc}" alt="{logoAlt}" />
+                    </a>
+                </div>
 
-        <a href="{logoUrl}"
-           class="logo"
-               rel="noreferrer"
-               aria-label="{logoAlt}"
-            >
-                <div role="img"></div>
-        </a>
+                {@render title()}
+            </div>
 
-        {@render title()}
-      <div class="right-section">
-        {#if Utils.isTruthy(enableSearch)}
-          <a  class="qc-search"
-              href="/"
-              role="button"
-              onclick = {(evt) => {
+            <div class="right-section">
+                {#if Utils.isTruthy(enableSearch)}
+                    <a class="qc-search"
+                       href="/"
+                       role="button"
+                       onclick={(evt) => {
                   evt.preventDefault();
                   displaySearchForm = !displaySearchForm;
                   tick().then(() => {
                             focusOnSearchInput()
                     });
-              }}
-          >
-            <span>{displaySearchForm ? hideSearchText : displaySearchText}</span>
-          </a>
-        {/if}
-        <div class="links">
-            {#if (!slots || slots['links']) && linksSlot }
-                {@render linksSlot()}
-<!--            Le bloc else est present uniquement pour le cas ou PivHeader est utilise sans le wrapper PivHeaderWC.svelte -->
-            {:else}
-                {#if joinUsUrl || altLanguageUrl}
-                    <nav aria-label="{linksLabel}">
-                        <ul>
-                            {#if altLanguageUrl}
-                                <li><a href="{altLanguageUrl}">{altLanguageText}</a></li>
-                            {/if}
-                            {#if joinUsUrl}
-                                <li><a href="{joinUsUrl}">{joinUsText}</a></li>
-                            {/if}
-                        </ul>
-                    </nav>
+                }}
+                    >
+                        <span class="no-link-title" role="heading"
+                              aria-level="1">{displaySearchForm ? hideSearchText : displaySearchText}</span>
+                    </a>
                 {/if}
+                <div class="links">
+                    {#if (!slots || slots['links']) && linksSlot }
+                        {@render linksSlot()}
+                        <!--            Le bloc else est present uniquement pour le cas ou PivHeader est utilise sans le wrapper PivHeaderWC.svelte -->
+                    {:else}
+                        {#if joinUsUrl || altLanguageUrl}
+                            <nav aria-label="{linksLabel}">
+                                <ul>
+                                    {#if altLanguageUrl}
+                                        <li><a href="{altLanguageUrl}">{altLanguageText}</a></li>
+                                    {/if}
+                                    {#if joinUsUrl}
+                                        <li><a href="{joinUsUrl}">{joinUsText}</a></li>
+                                    {/if}
+                                </ul>
+                            </nav>
+                        {/if}
+                    {/if}
+                </div>
+            </div>
+        </div>
+        {@render title()}
+
+        <div class="piv-bottom">
+            {#if displaySearchForm}
+                <div class="search-zone" bind:this={searchZone}>
+                    {#if searchZoneSlot}
+                        {@render searchZoneSlot()}
+                    {/if}
+                </div>
             {/if}
         </div>
-      </div>
     </div>
-      {@render title()}
-
-      <div class="piv-bottom">
-      {#if displaySearchForm}
-          <div class="search-zone" bind:this={searchZone}>
-              {#if searchZoneSlot}
-                {@render searchZoneSlot()}
-              {/if}
-          </div>
-      {/if}
-  </div>
-  </div>
 </div>