qc-trousse-sdg 1.3.1 → 1.4.0-develop.0

package/rollup.config.js

@@ -89,6 +89,7 @@ let
         compilerOptions: {
             // enable run-time checks
             customElement: true,
+            dev: dev_process,
             cssHash: ({ hash, name, filename, css }) => {
                 // replacement of default `svelte-${hash(css)}`
                 return `qc-hash-${hash(css)}`;

package/src/doc/components/Code.svelte

@@ -11,22 +11,17 @@
 <script>
 
   import {HighlightJS} from "highlight.js"
-  // import 'highlight.js/styles/default.css';
   import pretty from "pretty";
-  import { onMount } from "svelte";
-  import { Utils } from "../../sdg/components/utils"
 
-  export let
-      targetId = ''
-      , rawCode = ''
-      , language = 'html'
-      , outerHTML = false
-  ;
+  let {
+      targetId = '',
+      rawCode = '',
+      language = 'html',
+      outerHTML = false
+  } = $props();
 
-  let
-    hlCode
-    , prettyCode
-  ;
+  let hlCode = $state();
+  let prettyCode = $state();
 
   function copy() {
       navigator.clipboard.writeText(prettyCode);
@@ -48,14 +43,14 @@
       hlCode = HighlightJS.highlight(prettyCode, {language:language}).value;
   }
 
-  $: updateHLCode(rawCode, targetId)
+  $effect(() => updateHLCode(rawCode, targetId));
 
 </script>
 
 <pre
     ><code class="hljs"
         ><button class="btn btn-sm btn-primary"
-                 on:click={copy}>
+                 onclick={copy}>
             <span class="copy">copier</span>
             <span class="copied">copié !</span>
         </button

package/src/doc/components/Exemple.svelte

@@ -11,24 +11,27 @@
     <script>
     import Code from "./Code.svelte";
     import {onMount} from "svelte";
-    export let
-        caption = "SVP fournir une description"
-        , codeTargetId
-        , hideCode = false
-        , rawCode
-    ;
-    let exempleCode,
-        figure,
-        rootElement,
-        exempleArea,
-        figCaption;
+
+     let {
+         caption = "SVP fournir une description",
+         codeTargetId,
+         hideCode = false,
+         rawCode,
+         ...restProps
+     } = $props();
+
+    let exempleCode = $state();
+    let figure = $state();
+    let rootElement = $state();
+    let exempleArea = $state();
+    let figCaption = $state();
+
     onMount(() => {
         rootElement.parentElement.childNodes.forEach(node => {
-            if (node.nodeType == 3) {
+            if (node.nodeType === 3) {
                 return;
             }
-            if (node != rootElement) {
-                // let detach = rootElement.removeChild(node)
+            if (node !== rootElement) {
                 exempleArea.appendChild(node)
             }
             exempleCode = rawCode
@@ -42,7 +45,7 @@
 <div bind:this={rootElement}
      class="exemple-area"
     >
-    <figure {...$$restProps}
+    <figure {...restProps}
             bind:this={figure}
         >
         <div bind:this={exempleArea}

package/src/doc/components/Switch.svelte

@@ -3,15 +3,16 @@
     shadow:'none'
 }}" />
 <script>
-    export let
-        value=false,
-        name='switch',
+    let {
+        value = $bindable(false),
+        name = 'switch',
         color = {
             unchecked: 'grey-light',
             checked: 'blue-regular',
             slider: 'background'
-        }
-    ;
+        },
+        ...rest
+    } = $props();
 
 </script>
 <div class="switch"
@@ -25,7 +26,7 @@
            {name}
            bind:checked={value}
            aria-checked={value}
-           {...$$restProps}
+           {...rest}
     />
     <span class="slider round" ></span>
 </div>

package/src/doc/components/TopNav.svelte

@@ -7,11 +7,14 @@
 }}" />
 <script>
     import Switch from "./Switch.svelte";
-    let value = localStorage.getItem('dark-theme') === "true";
+    let value = $state(localStorage.getItem('dark-theme') === "true");
 
-    $: document.documentElement.classList.toggle('qc-dark-theme', value)
-    $: localStorage.setItem('dark-theme', value)
+    $effect(() => {
+        document.documentElement.classList.toggle('qc-dark-theme', value);
+        localStorage.setItem('dark-theme', value);
+    });
 </script>
+
 <div role="complementary">
     <div class="qc-container top-nav">
         <div class="switch-control">

package/src/doc/components/color-doc.svelte

@@ -6,11 +6,11 @@
     }
 }}" />
 <script>
-    export let
+    let {
         title,
         token,
         border = null
-    ;
+    } = $props();
 
 </script>
 <div class="color-details">

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

@@ -22,7 +22,10 @@ if (displayAlertLink) {
     );
     document.addEventListener(
         'qc.alert.hide',
-        () => displayAlertLink.hidden = false
+        () => {
+            maskableAlert.setAttribute('hide', 'true');
+            displayAlertLink.hidden = false;
+        }
     )
 }
 

package/src/sdg/_components.js

@@ -1,9 +1,10 @@
-export * from './components/notice.svelte'
-export * from './components/PivHeader/pivHeader.svelte'
-export * from './components/pivFooter.svelte'
-export * from './components/alert.svelte'
-export * from './components/toTop.svelte'
-export * from './components/externalLink.svelte'
-export * from './components/SearchBar/searchBar.svelte'
-export * from './components/SearchInput/SearchInput.svelte'
-export * from './components/Icon.svelte'
+export * from './components/Notice/NoticeWC.svelte'
+export * from './components/PivHeader/PivHeaderWC.svelte'
+export * from './components/PivFooter/PivFooterWC.svelte'
+export * from './components/Alert/AlertWC.svelte'
+export * from './components/ToTop/toTopWC.svelte'
+export * from './components/ExternalLink/ExternalLinkWC.svelte'
+export * from './components/SearchBar/SearchBarWC.svelte'
+export * from './components/SearchInput/SearchInputWC.svelte'
+export * from './components/Icon/IconWC.svelte'
+export * from './components/IconButton/IconButtonWC.svelte'

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

@@ -0,0 +1,69 @@
+<script>
+    import {Utils} from "../utils";
+    import Icon from "../Icon/Icon.svelte";
+    import IconButton from "../IconButton/IconButton.svelte";
+
+    let {
+        type = "general",
+        maskable = "",
+        content = "",
+        hide = "false",
+        fullWidth = "false",
+        slotContent,
+    } = $props();
+
+    const language = Utils.getPageLanguage();
+
+    const typeClass = (type !== "") ? type : 'general';
+    const closeLabel = language === 'fr' ? "Fermer l’alerte" : "Close l’alerte";
+    const warningLabel = language === 'fr' ? "Information d'importance élevée" : "Information of high importance";
+    const generalLabel = language === 'fr' ? "Information importante" : "Important information";
+
+    const label = type === 'general' ? generalLabel : warningLabel;
+
+    let rootElement = $state(null);
+
+    let containerClass = "qc-container" + (fullWidth === 'true' ? '-fluid' : '');
+
+    function hideAlert() {
+        hide = "true";
+        rootElement.dispatchEvent(
+            new CustomEvent('qc.alert.hide', {
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+</script>
+
+{#if !Utils.isTruthy(hide)}
+    <div bind:this={rootElement}
+         class="qc-general-alert {typeClass}"
+         role="alert">
+        <div class={containerClass}>
+            <div class="qc-general-alert-elements">
+                <Icon type={type === 'warning' ? 'warning' : 'information'}
+                      color={type === 'general' ? 'blue-piv' : 'yellow-dark'}
+                      size="nm"
+                      label={label}
+                />
+                <div class="qc-alert-content">
+                    {@html content}
+                    {@html slotContent}
+                </div>
+                {#if Utils.isTruthy(maskable)}
+                    <IconButton aria-label={closeLabel}
+                                onclick={hideAlert}
+                                size="nm"
+                                icon="clear-input"
+                                iconSize="sm"
+                                iconColor="text-primary"
+                    />
+                {/if}
+            </div>
+        </div>
+    </div>
+{/if}
+
+<link rel='stylesheet'
+      href='{Utils.cssPath}'>

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

@@ -0,0 +1,24 @@
+<svelte:options customElement="{{
+  tag:'qc-alert',
+  reflect: true,
+  props: {
+     type : {attribute: 'type'},
+     maskable  : {attribute: 'maskable'},
+     fullWidth : {attribute: 'full-width'},
+     content: {attribute: 'content'},
+     hide: {attribute: 'hide'},
+  }
+}}"/>
+
+<script>
+
+    import Alert from "./Alert.svelte";
+
+    const props = $props();
+
+</script>
+
+ <Alert
+    {...props}
+    slotContent = {`<slot />`}
+ />

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

@@ -0,0 +1,96 @@
+<script>
+import {Utils} from "../utils";
+import {onMount} from "svelte";
+
+const {
+    externalIconAlt = Utils.getPageLanguage() === 'fr'
+        ? "Ce lien dirige vers un autre site."
+        : "This link directs to another site."
+} = $props();
+
+let imgElement = $state();
+
+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) {
+            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];
+
+        // 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)
+
+        // 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);
+        }
+    });
+});
+</script>
+
+<span bind:this={imgElement}
+      role="img"
+      class="qc-ext-link-img"
+      aria-label={externalIconAlt}>
+</span>
+
+
+

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

@@ -0,0 +1,15 @@
+<svelte:options customElement={{
+    tag: 'qc-external-link',
+    shadow: 'none',
+    props: {
+        externalIconAlt: { attribute: 'img-alt' }
+    }
+}} />
+
+<script>
+    import ExternalLink from "./ExternalLink.svelte";
+
+    const props = $props();
+</script>
+
+<ExternalLink {...props} />

package/src/sdg/components/Icon/Icon.svelte

@@ -0,0 +1,26 @@
+<script>
+    let {
+        type,
+        label,
+        size = 'md',
+        color = 'text-primary',
+        width='auto',
+        height='auto',
+        ...rest
+    } = $props();
+
+    let attributes = $derived(width === 'auto' ? { 'data-img-size': size } : {});
+</script>
+
+<div role="img"
+     class="qc-icon"
+     aria-label={label}
+     style="--img-color:var(--qc-color-{color});
+            --img-width:{width};
+            --img-height:{height};
+        "
+     data-img-type={type}
+     {...attributes}
+     {...rest}
+    >
+</div>

package/src/sdg/components/Icon/IconWC.svelte

@@ -0,0 +1,20 @@
+<svelte:options customElement="{{
+    tag: 'qc-icon',
+    shadow: 'none',
+    props: {
+      type : {attribute: 'icon'},
+      label: {attribute: 'label'},
+      color: {attribute: 'color'},
+      size: {attribute: 'size'},
+      width: {attribute: 'width'},
+      height: {attribute: 'height'}
+  }
+}}" />
+
+<script>
+    import Icon from "./Icon.svelte";
+
+    const props = $props();
+</script>
+
+<Icon {...props} />

package/src/sdg/components/IconButton/IconButton.svelte

@@ -0,0 +1,30 @@
+<script>
+import Icon from "../Icon/Icon.svelte";
+
+const {
+    size = 'xl',
+    label,
+    icon,
+    iconSize,
+    iconColor,
+    class: className = '',
+    ...rest
+} = $props();
+
+</script>
+
+<button
+    data-button-size={size}
+    class={`qc-icon-button ${className}`}
+    {...rest}
+>
+    {#if icon}
+        <Icon type={icon}
+            size={iconSize}
+            color={iconColor}
+            aria-hidden="true"
+            label={label}
+        />
+    {/if}
+</button>
+

package/src/sdg/components/IconButton/IconButtonWC.svelte

@@ -0,0 +1,19 @@
+<svelte:options customElement={{
+  tag: 'qc-icon-button',
+  shadow: 'none',
+  props: {
+    size: { attribute: 'size' },
+    label: { attribute: 'label' },
+    icon: { attribute: 'icon' },
+    iconSize: { attribute: 'icon-size' },
+    iconColor: { attribute: 'icon-color' }
+  }
+}} />
+
+<script>
+    import IconButton from './IconButton.svelte';
+
+    const props = $props();
+</script>
+
+<IconButton {...props} />

package/src/sdg/components/Notice/Notice.svelte

@@ -0,0 +1,83 @@
+<script>
+  import { Utils } from "../utils"
+  import Icon from "../Icon/Icon.svelte";
+
+  const isFr = Utils.getPageLanguage() === 'fr';
+  const defaultHeader = 'h2';
+  const defaultType = 'information';
+  const typesDescriptions = {
+      'advice': isFr ? "Avis conseil" : "Advisory notice",
+      'note': isFr ? "Avis explicatif" : "Explanatory notice",
+      'information': isFr ? "Avis général" : "General notice",
+      'warning': isFr ? "Avis d’avertissement" : "Warning notice",
+      'success': isFr ? "Avis de réussite" : "Success notice",
+      'error': isFr ? "Avis d’erreur" : "Error notice"
+  };
+
+  let {
+      title = "",
+      type = defaultType,
+      content = "",
+      header = defaultHeader,
+      icon,
+      slotContent
+  } = $props();
+
+  const types = Object.keys(typesDescriptions);
+
+  const usedType = types.includes(type) ? type : defaultType;
+  const usedHeader = header.match(/h[1-6]/) ? header : defaultHeader;
+  const role = usedType === "success" ? "status" : (usedType === "error" ? "alert" : null);
+
+  let noticeElement = $state(null);
+  $effect(() => {
+      if (role && noticeElement) {
+          const tempNodes = Array.from(noticeElement.childNodes);
+          noticeElement.innerHTML = "";
+
+          // Réinsère le contenu pour qu'il soit détecté par le lecteur d'écran.
+          tempNodes.forEach(node => noticeElement.appendChild(node));
+      }
+  });
+
+  const shouldUseIcon = usedType === "advice" || usedType === "note";
+
+    // Si le type est "advice" ou "note", on force "neutral" (le gris), sinon on garde le type normal
+    const computedType = shouldUseIcon ? "neutral" : usedType;
+    const iconType = shouldUseIcon ? (icon ?? "note") : usedType;
+    const iconLabel = typesDescriptions[type] ?? typesDescriptions['information'];
+</script>
+
+<!-- TODO Confirmer tabindex. On pense que c'est important de recevoir le focus (notamment dans les formulaires) en fait pour nous c'est très important, sinon en mode formulaire au lecteur écran (nav avec TAB, ce n'est jamais lu). -->
+<!--Le warning `Svelte: noninteractive element cannot have nonnegative tabIndex value`
+associe a tabindex="0" doit etre ignore pour qu'on puisse focus sur le composant sans
+le denaturaliser.-->
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div class="qc-component qc-notice qc-{computedType}"
+     tabindex="0"
+     >
+  <div class="icon-container">
+    <div class="qc-icon">
+      <Icon type={iconType}
+            label={iconLabel}
+            size="nm"
+      />
+    </div>
+  </div>
+
+  <div class="content-container">
+    <div class="content" {role} bind:this={noticeElement}>
+        {#if title && title !== ""}
+          <svelte:element this={usedHeader}>
+            {@html title}
+          </svelte:element>
+        {/if}
+
+        {@html content}
+
+        {@render slotContent?.()}
+    </div>
+  </div>
+</div>
+<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/Notice/NoticeWC.svelte

@@ -0,0 +1,25 @@
+<svelte:options customElement={{
+  tag: 'qc-notice',
+  props: {
+    title: { attribute: 'title', type: 'String' },
+    type: { attribute: 'type', type: 'String' },
+    content: { attribute: 'content', type: 'String' },
+    header: { attribute: 'header', type: 'String' },
+    icon: { attribute: 'icon', type: 'String' }
+  }
+}} />
+
+<script>
+    import Notice from './Notice.svelte';
+
+    const props = $props();
+</script>
+
+
+<Notice
+    {...props}
+>
+    {#snippet slotContent()}
+        <slot />
+    {/snippet}
+</Notice>

package/src/sdg/components/PivFooter/PivFooter.svelte

@@ -0,0 +1,51 @@
+<script>
+    import { Utils } from "../utils"
+    import DefaultCopyright from "./_defaultCopyright.svelte";
+    const lang = Utils.getPageLanguage();
+
+    let {
+        logoUrl = '/',
+        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',
+        copyrightText,
+        logoWidth = 139,
+        logoHeight = 50,
+        copyrightUrl,
+        mainSlot,
+        copyrightSlot
+    } = $props();
+</script>
+
+<div class="qc-piv-footer qc-container-fluid">
+    {#if mainSlot}
+        {@render mainSlot()}
+    {/if}
+
+    <a href="{logoUrl}"
+       class="logo"
+       style:--logo-width={logoWidth}
+       style:--logo-height={logoHeight}
+    >
+        {#each [
+            ['light', logoSrc],
+            ['dark', logoSrcDarkTheme]]
+        as [theme, src]}
+            <img {src}
+                 alt="{logoAlt}"
+                 class="qc-{theme}-theme-show"
+            />
+        {/each}
+    </a>
+
+    <span class="copyright">
+        {#if copyrightSlot}
+            {@render copyrightSlot()}
+        {:else}
+            <DefaultCopyright {copyrightText} {copyrightUrl} />
+        {/if}
+    </span>
+</div>
+
+<link rel='stylesheet' href='{Utils.cssPath}'>
+