qc-trousse-sdg 1.4.6 → 1.4.8

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

@@ -16,7 +16,8 @@ const maskableAlert = document.getElementById("alerte-masquable");
 if (displayAlertLink) {
     displayAlertLink.addEventListener(
         'click',
-        () => {
+        (evt) => {
+            evt.preventDefault();
             maskableAlert.setAttribute('hide', 'false');
             displayAlertLink.hidden = true;
         }
@@ -29,6 +30,10 @@ if (displayAlertLink) {
         }
     )
 }
+
+if (maskableAlert && displayAlertLink && !maskableAlert.querySelector('.qc-general-alert')) {
+    displayAlertLink.removeAttribute('hidden');
+}
 // add version
 
 

package/src/doc/scss/components/_exemple.scss

@@ -18,4 +18,8 @@
   & > figcaption {
     display: block;
   }
-}
+  &:has(qc-select) {
+    overflow-x: visible;
+  }
+}
+

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

@@ -94,24 +94,39 @@ 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);
+    }
   }
   &.pseudo-active {
     @include active-link();
+    & > .qc-ext-link-img {
+      background-color: token-value(color, link, active);
+    }
   }
   &.pseudo-focus {
     @include focus-link();
-  }
-  &.pseudo-visited {
-    color: token-value(color,link,visited)!important;
+    & > .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);
+    }
   }
 }
 
-span.qc-ext-link-img {
+div.qc-ext-link-img {
   a.pseudo-visited  & {
     background: token-value(color link visited)!important;
   }
@@ -124,6 +139,9 @@ span.qc-ext-link-img {
   a.pseudo-active  & {
     background: token-value(color link active)!important;
   }
+  a.not-visited:visited:not(:hover) & {
+    background: token-value(color link text)!important;
+  }
 }
 
 p,h1,h2,h3,h4,h5,h6 {

package/src/sdg/bases/Icon/Icon.svelte

@@ -8,6 +8,7 @@
         height='auto',
         src='',
         rotate = 0,
+        rootElement = $bindable(),
         ...rest
     } = $props();
     let attributes = $derived(width === 'auto' ? { 'data-img-size': size } : {});
@@ -30,5 +31,6 @@
      {...attributes}
      {...rest}
      aria-hidden={label ? undefined : true}
+     bind:this={rootElement}
     >
 </div>

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

@@ -4,6 +4,10 @@
 
 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);
   }
@@ -19,33 +23,35 @@ a {
   .img-wrap {
     white-space: nowrap;
   }
+}
 
+.qc-external-link {
+  .qc-ext-link-text {
+    white-space: normal;
+    text-decoration: underline;
+  }
 }
-span.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;
-  margin-left: 4px;
-  a:visited  & {
+  display: inline-block;
+  mask-repeat: no-repeat;
+
+  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;
-  }
 }

package/src/sdg/components/Alert/Alert.svelte

@@ -2,14 +2,20 @@
     import {Utils} from "../utils";
     import Icon from "../../bases/Icon/Icon.svelte";
     import IconButton from "../IconButton/IconButton.svelte";
+    import {onMount} from "svelte";
 
     let {
         type = "general",
         maskable = "",
         content = "",
-        hide = "false",
+        hide = $bindable("false"),
         fullWidth = "false",
         slotContent,
+        id,
+        persistenceKey,
+        persistHidden = false,
+        rootElement = $bindable(),
+        hideAlertCallback = () => {},
     } = $props();
 
     const language = Utils.getPageLanguage();
@@ -21,18 +27,31 @@
 
     const label = type === 'general' ? generalLabel : warningLabel;
 
-    let rootElement = $state(null);
-
     let containerClass = "qc-container" + (fullWidth === 'true' ? '-fluid' : '');
 
+    onMount(() => {
+        const key = getPersistenceKey();
+        if (!key) return;
+        hide = sessionStorage.getItem(key) ? "true" : "false";
+    })
+
     function hideAlert() {
         hide = "true";
-        rootElement.dispatchEvent(
-            new CustomEvent('qc.alert.hide', {
-                bubbles: true,
-                composed: true
-            })
-        );
+        persistHiddenState();
+        hideAlertCallback();
+    }
+
+    function getPersistenceKey() {
+        if (!persistHidden) return false;
+        const key = persistenceKey || id;
+        if (! key) return false;
+        return'qc-alert:' + key;
+    }
+
+    function persistHiddenState() {
+        const key = getPersistenceKey();
+        if (!key) return;
+        sessionStorage.setItem(key, Utils.now());
     }
 </script>
 

package/src/sdg/components/Alert/AlertWC.svelte

@@ -6,20 +6,35 @@
      maskable  : {attribute: 'maskable'},
      fullWidth : {attribute: 'full-width'},
      content: {attribute: 'content'},
-     hide: {attribute: 'hide'},
+     hide: {attribute: 'hide', reflect: true},
+     persistHidden: {attribute: 'persist-hidden', type: 'Boolean'},
+     persistenceKey: {attribute: 'persistence-key', type: 'String'},
   }
-}}"/>
+}}"></svelte:options>
 
 <script>
     import Alert from "./Alert.svelte";
     import {Utils} from "../utils";
 
-    const props = $props();
+    let {hide = "false", ...props} = $props();
 
+    let rootElement = $state();
+
+    function hideAlertCallback() {
+        rootElement?.dispatchEvent(
+            new CustomEvent('qc.alert.hide', {
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
 </script>
 
  <Alert
-    {...props}
-    slotContent = {`<slot />`}
+         bind:hide
+         bind:rootElement
+         {hideAlertCallback}
+         {...props}
+         slotContent = {`<slot />`}
  />
 <link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/Alert/Test/AlertSvelteTest.svelte

@@ -0,0 +1,25 @@
+<script>
+    import Alert from "../Alert.svelte";
+    import {Utils} from "../../utils";
+
+    let regularAlertContent = $state();
+</script>
+
+<svelte:options customElement={{tag: "qc-alert-svelte-test" }} />
+
+<Alert
+        id="alerte-masquable"
+        type="warning"
+        maskable="true"
+        content="Alerte jaune d’importance élevée"
+        persistHidden="true"
+        persistenceKey="hash-1238"
+/>
+
+<div hidden>
+    <p style="margin: 0;" bind:this={regularAlertContent}>Alerte bleue d’importance modérée <a href="#">avec un lien textuel</a></p>
+</div>
+
+<Alert type="general" slotContent={regularAlertContent?.outerHTML} />
+
+<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/Alert/Test/alertBaselineTest.html

@@ -0,0 +1,13 @@
+<qc-alert id="alerte-masquable"
+          type="warning"
+          maskable="true"
+          content="Alerte jaune d’importance élevée"
+          persist-hidden
+          persistence-key="hash-1234"
+>
+</qc-alert>
+
+<qc-alert type="general"
+          maskable="false">
+    <p>Alerte bleue d’importance modérée <a href="#">avec un lien textuel</a></p>
+</qc-alert>

package/src/sdg/components/Alert/Test/alertSvelteTest.html

@@ -0,0 +1 @@
+<qc-alert-svelte-test></qc-alert-svelte-test>

package/src/sdg/components/Alert/_alert.html

@@ -11,15 +11,16 @@
 </p>
 
 <qc-doc-exemple id="alert-warning"
-                caption="Exemple d’alerte jaune">
+                caption="Exemple d’alerte jaune masquable. Elle reste masquée après rafraîchissement de la page tant que la session courante est active.">
   <qc-alert id="alerte-masquable"
             type="warning"
             maskable="true"
             content="Alerte jaune d’importance élevée"
+            persist-hidden
+            persistence-key="hash-1234"
   >
   </qc-alert>
 </qc-doc-exemple>
-<!--            <qc-code target-id="alert-warning"></qc-code>-->
 
 <h4>Alerte bleue</h4>
 <qc-doc-exemple id="alert-general"
@@ -30,8 +31,6 @@
   </qc-alert>
 </qc-doc-exemple>
 
-<!--            <qc-code target-id="alert-general"></qc-code>-->
-
 <h3>Documentation technique</h3>
 
 <h4>Attributs</h4>
@@ -51,12 +50,6 @@
       <td>"general"</td>
       <td>Type de l’alerte : s'il s'agit d’une alerte bleue ou jaune</td>
     </tr>
-    <tr>
-      <td>maskable</td>
-      <td>"true" ou "false"</td>
-      <td>"true"</td>
-      <td>Afficher le bouton de fermeture de l’alerte</td>
-    </tr>
     <tr>
       <td>content</td>
       <td>Texte</td>
@@ -77,6 +70,25 @@
         qc-container-fluid)
       </td>
     </tr>
+      <tr>
+          <td>maskable</td>
+          <td>"true" ou "false"</td>
+          <td>"true"</td>
+          <td>Afficher le bouton de fermeture de l’alerte</td>
+      </tr>
+      <tr>
+          <td>persist-hidden</td>
+          <td>na</td>
+          <td></td>
+          <td>Masque l'alerte de façon persistente une fois qu'elle est masquée par l'internaute, c‑à‑d. qu'elle reste masquée lorsque l'utilisateur rafraîchit la page, pendant tout le temps de sa session.</td>
+      </tr>
+    <tr>
+      <td>persistence-key</td>
+      <td>Chaîne de caractère</td>
+      <td>Id de l'élément, valeur nulle sinon</td>
+      <td>Clé pour le stockage de session (<code>Window.sessionStorage</code>). Si non défini, l'id de l'élément sera utilisé. Si celui-ci non plus n'est pas défini, la persistence du masquage n'aura pas lieu.</td>
+    </tr>
+
   </table>
 </div>
 
@@ -89,7 +101,7 @@
   document.addEventListener(
           'qc.alert.hide',
           (e) => {
-            console.log('Fermeture de l\'alerte id=\'' + e.target.id + '\'');
+            console.log(`Fermeture de l'alerte id='${e.target.id}'`);
           }
   )
 </script>

package/src/sdg/components/Checkbox/Checkbox.svelte

@@ -40,15 +40,16 @@
         if (labelElement) {
             label = labelElement.querySelector('span')?.textContent;
         }
-    })
+    });
 
     $effect(_ => updateChoiceInput(input, required, invalid, compact, false, false))
 
     $effect(() => {
-        if (!required) return;
-        if (!labelElement) return;
-        labelElement.appendChild(requiredSpan);
-    })
+        if (required && label && requiredSpan) {
+            const textSpan = labelElement.querySelector('span');
+            textSpan.appendChild(requiredSpan);
+        }
+    });
 </script>
 
 {#snippet requiredSpanSnippet()}

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

@@ -5,6 +5,7 @@
     import DropdownListItems from "./DropdownListItems/DropdownListItems.svelte";
     import DropdownListButton from "./DropdownListButton/DropdownListButton.svelte";
     import Label from "../Label/Label.svelte";
+    import {onMount, tick} from "svelte";
 
     const lang = Utils.getPageLanguage();
 
@@ -27,6 +28,7 @@
         rootElement = $bindable(),
         errorElement = $bindable(),
         webComponentMode = false,
+        expanded = $bindable(false),
     } = $props();
 
     const
@@ -36,7 +38,7 @@
         itemsId = `${id}-items`,
         labelId = `${id}-label`,
         errorId = `${id}-error`,
-        availableWidths = ["xs", "sm", "md", "lg", "xl"]
+        availableWidths = ["xs", "sm", "md", "lg", "xl"], buttonHeight = 40
     ;
 
     let
@@ -44,6 +46,7 @@
         parentRow = $derived(instance?.closest(".qc-formfield-row")),
         button = $state(),
         searchInput = $state(),
+        popup = $state(),
         dropdownItems = $state(),
         selectedItems = $derived(items.filter((item) => item.checked) ?? []),
         selectedOptionsText = $derived.by(() => {
@@ -64,7 +67,6 @@
             return "";
         }),
         previousValue = $state(value),
-        expanded = $state(false),
         searchText = $state(""),
         hiddenSearchText = $state(""),
         displayedItems = $state(items),
@@ -77,8 +79,6 @@
             }
         })),
         widthClass = $derived.by(() => {
-            const keyword = webComponentMode ? "container" : "root";
-
             if (availableWidths.includes(width)) {
                 return `qc-dropdown-list-${width}`;
             }
@@ -93,7 +93,27 @@
             }
 
             return "";
-        })
+        }),
+        buttonElementYPosition = $state(0),
+        usedHeight = $derived.by(() => {
+            const maxItemsHeight = 336;
+            const searchInputTotalHeight = 56;
+
+            if (enableSearch) {
+                if (displayedItems.length > 7) {
+                    return maxItemsHeight - searchInputTotalHeight - 17;
+                }
+                return maxItemsHeight - searchInputTotalHeight;
+            } else {
+                if (displayedItems.length > 8) {
+                    return maxItemsHeight - 33;
+                }
+                return maxItemsHeight;
+            }
+        }),
+        topOffset = $state(0),
+        popupTopBorderThickness = $derived(topOffset && topOffset < 0 ? 1 : 0),
+        popupBottomBorderThickness = $derived(topOffset && topOffset >= 0 ? 1 : 0)
     ;
 
     function focusOnSelectedOption(value) {
@@ -120,7 +140,7 @@
     function handleTab(event) {
         // Le changement de focus a lieu après le lancement de l'événement clavier.
         // Il faut donc faire un court sleep pour avoir le nouvel élément en focus.
-        Utils.sleep(5).then(() => {
+        tick().then(() => {
             if (event.key === "Tab" && !Utils.componentIsActive(instance)) {
                 expanded = false;
             }
@@ -214,6 +234,7 @@
 
     $effect(() => {
         if (previousValue?.toString() !== value?.toString()) {
+            previousValue = value;
             invalid = false;
         }
     });
@@ -257,8 +278,18 @@
                 ?  optionWithEmptyValue.label
                 : defaultPlaceholder
         ;
-    })
+    });
 
+    $effect(() => {
+        if (expanded) {
+            const borderThickness = 2 * (invalid ? 2 : 1);
+            const popupHeight = popup ? popup.getBoundingClientRect().height : usedHeight;
+
+            topOffset = buttonElementYPosition + buttonHeight > innerHeight - popupHeight ?
+                -popupHeight
+                : buttonHeight - borderThickness;
+        }
+    });
 
     function findOptionWithEmptyValue() {
         return items?.find(
@@ -267,9 +298,21 @@
                 || item.value === undefined
         );
     }
+
+    function setRemainingBottomHeight() {
+        if (!button) {
+            return;
+        }
+        buttonElementYPosition = button.getBoundingClientRect().y;
+    }
+
+    onMount(() => {
+        setRemainingBottomHeight();
+    });
 </script>
 
 <svelte:body onclick={handleOuterEvent} onkeydown={handleTab}/>
+<svelte:window onscroll={setRemainingBottomHeight} />
 <div
         class={[
         !parentRow && !webComponentMode && "qc-select"
@@ -315,19 +358,28 @@
                     aria-invalid={invalid}
                     {selectedOptionsText}
                     {placeholder}
+                    {usedHeight}
                     onclick={handleDropdownButtonClick}
                     onkeydown={(e) => {
-                    handleButtonKeyDown(e, enableSearch ? searchInput : dropdownItems);
-                }}
-                    bind:this={button}
+                        handleButtonKeyDown(e, enableSearch ? searchInput : dropdownItems);
+                    }}
+                    bind:buttonElement={button}
             />
 
             <div
                     id={popupId}
                     class="qc-dropdown-list-expanded"
+                    style={`
+                    --dropdown-items-top-offset: ${topOffset};
+                    --dropdown-items-height: ${usedHeight};
+                    --dropdown-items-bottom-border: ${popupBottomBorderThickness};
+                    --dropdown-items-top-border: ${popupTopBorderThickness};
+                    --dropdown-button-border: ${invalid ? 2 : 1};
+                    `}
                     tabindex="-1"
                     hidden={!expanded}
                     role="listbox"
+                    bind:this={popup}
             >
 
                 {#if enableSearch}
@@ -352,16 +404,15 @@
 
                 <DropdownListItems
                         id={itemsId}
-                        {enableSearch}
                         {placeholder}
                         {multiple}
                         {items}
                         {displayedItems}
                         {noOptionsMessage}
                         selectionCallbackSingle={() => {
-                        closeDropdown("");
-                        button?.focus();
-                    }}
+                            closeDropdown("");
+                            button?.focus();
+                        }}
                         handleExitSingle={(key) => closeDropdown(key)}
                         handleExitMultiple={(key) => closeDropdown(key)}
                         focusOnOuterElement={() => enableSearch ? searchInput?.focus() : button?.focus()}

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

@@ -7,13 +7,9 @@
         disabled,
         selectedOptionsText = "",
         placeholder,
+        buttonElement = $bindable(),
         ...rest
     } = $props()
-
-    let button;
-    export function focus() {
-        button?.focus();
-    }
 </script>
 
 <button
@@ -22,7 +18,7 @@
     {disabled}
     class="qc-dropdown-button"
     role="combobox"
-    bind:this={button}
+    bind:this={buttonElement}
     {...rest}
 >
     {#if selectedOptionsText.length > 0}

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

@@ -6,7 +6,6 @@
 
     let {
         id,
-        enableSearch,
         multiple,
         items,
         displayedItems,
@@ -18,41 +17,25 @@
         focusOnOuterElement = () => {},
         handlePrintableCharacter = () => {},
         placeholder,
-    } = $props()
+    } = $props();
 
     let itemsComponent = $state();
-    let usedHeight = $derived.by(() => {
-        const maxItemsHeight = 336;
-        const searchInputTotalHeight = 56;
-
-        if (enableSearch) {
-            if (displayedItems.length > 7) {
-                return maxItemsHeight - searchInputTotalHeight - 17;
-            }
-            return maxItemsHeight - searchInputTotalHeight;
-        } else {
-            if (displayedItems.length > 8) {
-                return maxItemsHeight - 33;
-            }
-            return maxItemsHeight;
-        }
-    });
 
     export function focus() {
-        Utils.sleep(5).then(() => {
+        tick().then(() => {
             itemsComponent?.focusOnFirstElement();
         }).catch(console.error);
     }
 
     export function focusOnLastElement() {
-        Utils.sleep(5).then(() => {
+        tick().then(() => {
             itemsComponent?.focusOnLastElement();
         }).catch(console.error);
     }
 
     export function focusOnFirstMatchingElement(value) {
         if (itemsComponent && value && value.length > 0) {
-            Utils.sleep(5).then(() => {
+            tick().then(() => {
                 itemsComponent?.focusOnFirstMatchingElement(value);
             }).catch(console.error);
         }
@@ -63,7 +46,6 @@
     id={id}
     class="qc-dropdown-list-items"
     tabindex="-1"
-    style="--dropdown-items-height: {usedHeight};"
 >
     {#if multiple}
         <DropdownListItemsMultiple