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

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

@@ -1,158 +0,0 @@
-<svelte:options customElement="{{
-    tag: 'qc-piv-header'
-  , props: {
-      logoUrl : {attribute: 'logo-url'}
-    , fullWidth : {attribute: 'full-width'}
-    , logoSrc : {attribute: 'logo-src'}
-    , logoAlt : {attribute: 'logo-alt'}
-    , titleUrl : {attribute: 'title-url'}
-    , titleText: {attribute: 'title-text'}
-    , linksLabel: {attribute: 'links-label'}
-    , altLanguageText: {attribute: 'alt-language-text'}
-    , altLanguageUrl: {attribute: 'alt-language-url'}
-    , joinUsText: {attribute: 'join-us-text'}
-    , joinUsUrl: {attribute: 'join-us-url'}
-    , goToContent: {attribute: 'go-to-content'}
-    , goToContentAnchor : {attribute: 'go-to-content-anchor'}
-    , goToContentText: {attribute: 'go-to-content-text'}
-    , displaySearchText : {attribute: 'display-search-text'}
-    , hideSearchText : {attribute: 'hide-search-text'}
-    , enableSearch : {attribute: 'enable-search'}
-    , showSearch : {attribute: 'show-search'}
-  }
-}}" />
-
-<script>
-import { onMount } from "svelte";
-import { Utils } from "../utils"
-
-const
-  lang = Utils.getPageLanguage()
-
-export let
-    logoUrl= '/'
-  , fullWidth = 'false'
-  , logoSrc = Utils.imagesRelativePath + 'QUEBEC_blanc.svg'
-  , logoAlt = lang === 'fr'
-      ? 'Logo du gouvernement du Québec'
-      : 'Logo of government of Québec'
-  , titleUrl= '/'
-  , titleText= ''
-  , linksLabel= lang === 'fr'
-          ? 'Navigation PIV'
-          : 'PIV navigation'
-  , altLanguageText= lang === 'fr'
-                  ? 'English'
-                  : 'Français'
-  , altLanguageUrl= ''
-  , joinUsText= lang === 'fr'
-                  ? 'Nous joindre'
-                  : 'Contact us'
-  , joinUsUrl= ''
-  , goToContent = 'true'
-  , goToContentAnchor = '#main'
-  , goToContentText= lang === 'fr'
-      ? 'Passer au contenu'
-      : 'Skip to content'
-  , displaySearchText =  lang === 'fr'
-          ? 'Cliquer pour faire une recherche'
-          : 'Click to search'
-  , hideSearchText =  lang === 'fr'
-          ? 'Masquer la barre de recherche'
-          : 'Hide search bar'
-  , enableSearch = 'false'
-  , showSearch = 'false'
-
-    export function focusOnSearchInput() {
-        if (displaySearchForm) {
-            document.querySelector('[slot="search-zone"] input')?.focus();
-        }
-    }
-
-let
-    containerClass = 'qc-container'
-  , displaySearchForm = false
-;
-
-onMount(() => {
-  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}
-    <div class="piv-top">
-        <div class="signature-group">
-            <a href="{logoUrl}"
-               class="logo"
-               rel="noreferrer">
-                <div role="img"
-                     aria-label="{logoAlt}"
-                ></div>
-            </a>
-
-            {#if titleText}
-                <div class="title">
-                    <a href="{titleUrl}"
-                       class="title">
-                        {titleText}
-                    </a>
-                </div>
-
-            {/if}
-        </div>
-
-      <div class="right-section">
-        {#if enableSearch == 'true'}
-          <a  class="qc-search"
-              href="/"
-              role="button"
-              on:click|preventDefault = {() => displaySearchForm = !displaySearchForm}
-              on:click ={focusOnSearchInput}>
-            <span>{displaySearchForm ? hideSearchText : displaySearchText}</span>
-          </a>
-        {/if}
-        <div class="links">
-          <slot name="links">
-          {#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}
-          </slot>
-        </div>
-      </div>
-    </div>
-    <div class="piv-bottom">
-      {#if displaySearchForm}
-      <div class="search-zone">
-        <slot name="search-zone" />
-      </div>
-      {/if}
-  </div>
-  </div>
-</div>
-<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/SearchBar/searchBar.svelte

@@ -1,87 +0,0 @@
-<svelte:options customElement="{{
-    tag: 'qc-search-bar',
-    shadow: 'none',
-    props: {
-        value: {attribute: 'input-value', type:'String'},
-        name: {attribute: 'input-name', type:'String'},
-        pivBackground: {attribute: 'piv-background', type:'Boolean'},
-    }
-}}" />
-
-<script>
-    import {Utils} from "../utils";
-    import SearchInput from "../SearchInput/SearchInput.svelte";
-    import IconButton from "../Button/IconButton.svelte";
-
-    const
-        lang = Utils.getPageLanguage(),
-        inputDefaultPlaceholder = lang === "fr"
-            ? "Rechercher…"
-            : "Search",
-        submitDefaultAriaLabel = lang === "fr"
-            ? "Lancer la recherche"
-            : "Submit search"
-    ;
-    export let
-        value = '',
-        name = 'q',
-        pivBackground = false
-    ;
-
-    let defaultsAttributes = {
-            input: {
-                "placeholder": inputDefaultPlaceholder,
-                "aria-label": inputDefaultPlaceholder
-            },
-            submit: {
-                "aria-label": submitDefaultAriaLabel
-            }
-        },
-        inputProps = {},
-        submitProps = {}
-
-    $: [inputProps, submitProps] = computeFieldsAttributes($$restProps)
-    $: inputProps = {
-        "value": value,
-        "name": name,
-        ...inputProps
-    }
-
-    /**
-     * @param {{[p: string]: T}} restProps
-     */
-    function computeFieldsAttributes(restProps) {
-        return ["input","submit"]
-            .map(control => {
-                    const prefix = `${control}-`;
-                    return {
-                        ...defaultsAttributes[control],
-                        ...Object.fromEntries(Object
-                            .entries(restProps)
-                            .map(([k,v]) => k.startsWith(prefix)
-                                ? [k.replace(prefix, ''),v]
-                                : null
-                            )
-                            .filter(x => x) // élimine les éléments null
-                        )
-                    }
-                }
-            )
-    }
-
-
-</script>
-<div    class="qc-search-bar"
-        class:piv-background={pivBackground}
-    >
-    <SearchInput {...inputProps}/>
-    {#if true}
-        <IconButton
-                type="submit"
-                iconColor={pivBackground ? 'blue-piv' : 'background'}
-                icon="loupe-piv-fine"
-                iconSize="md"
-                {...submitProps}
-        />
-    {/if}
-</div>

package/src/sdg/components/alert.svelte

@@ -1,88 +0,0 @@
-<svelte:options customElement="{{
-  tag:'qc-alert',
-  props: {
-     type  : {attribute: 'type'},
-     maskable  : {attribute: 'maskable'},
-     fullWidth : {attribute: 'full-width'},
-     content: {attribute: 'content'},
-     hide: {attribute: 'hide'},
-  }
-}}"/>
-
-<script>
-    import {Utils} from "./utils";
-    import Icon from "./Icon.svelte";
-    import IconButton from "./Button/IconButton.svelte";
-
-    export let
-          type = "general"
-        , maskable = ""
-        , content = ""
-        , hide = "false"
-        , fullWidth = 'false'
-        ;
-
-    let
-        rootElement
-        , hiddenFlag
-        , typeClass = (type !== "")
-                        ? type
-                        : 'general'
-        , closeLabel = Utils.getPageLanguage() === 'fr'
-                        ? "Fermer l’alerte"
-                        : "Close l’alerte"
-        , warningLabel = Utils.getPageLanguage() === 'fr'
-                        ? "Information d'importance élevée"
-                        : "Information of high importance"
-        , generalLabel = Utils.getPageLanguage() === 'fr'
-                        ? "Information importante"
-                        : "Important information"
-        , label = type === 'general'
-                        ? generalLabel
-                        : warningLabel
-        , containerClass
-        ;
-
-    $: hiddenFlag = hide === 'true'
-    $: containerClass = "qc-container" + (fullWidth === 'true' ? '-fluid' : '');
-
-    function hideAlert() {
-        hide='true'
-        rootElement.dispatchEvent(
-            new CustomEvent('qc.alert.hide',{
-                bubbles: true,
-                composed: true
-            }))
-    }
-
-</script>
-{#if !hiddenFlag}
-    <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}
-                    <slot />
-                </div>
-                {#if maskable === "true"}
-                    <IconButton aria-label={closeLabel}
-                                on:click={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/componentWrapper.js

@@ -1,24 +0,0 @@
-/*! Wrapper needed to support kebab case svelte customElements attributes. 
-    Référence : https://github.com/sveltejs/svelte/issues/3852
-*/
-export const customElements = {
-  define: (tagName, CustomElement) => {
-    class CustomElementWrapper extends CustomElement {
-      static get observedAttributes() {
-        return (super.observedAttributes || []).map((attr) =>
-          attr.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase(),
-        );
-      }
-
-      attributeChangedCallback(attrName, oldValue, newValue) {
-        super.attributeChangedCallback(
-          attrName.replace(/-([a-z])/g, (_, up) => up.toUpperCase()),
-          oldValue,
-          newValue === '' ? true : newValue, // [Tweaked] Value of omitted value attribute will be true
-        );
-      }
-    }
-
-    window.customElements.define(tagName, CustomElementWrapper); // <--- Call the actual customElements.define with our wrapper
-  }
-};

package/src/sdg/components/externalLink.svelte

@@ -1,92 +0,0 @@
-<svelte:options customElement="{{
-  tag:'qc-external-link',
-  shadow:'none',
-  props: {
-     externalIconAlt  : {attribute: 'img-alt'}
-  }
-}}"/>
-
-<script>
-import {Utils} from "./utils";
-import {onMount} from "svelte";
-
-export
-  let externalIconAlt = Utils.getPageLanguage() == "fr"
-        ? "Ce lien dirige vers un autre site."
-        : "This link directs to another site."
-;
-let imgElement;
-
-onMount(() => {
-    imgElement.parentElement.querySelectorAll('a').forEach(link => {
-
-        // Crée un TreeWalker pour parcourir uniquement les nœuds texte visibles
-        const walker = document.createTreeWalker(
-            link,
-            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;
-                }
-            }
-        );
-
-        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 regex = /^(.*\s)?(\S+)\s*$/m;
-        const match = text.match(regex);
-        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/notice.svelte

@@ -1,83 +0,0 @@
-<svelte:options customElement="qc-notice" />
-
-<script>
-  import { Utils } from "./utils"
-  import Icon from "./Icon.svelte";
-
-  const
-      isFr = Utils.getPageLanguage() == 'fr'
-    , defaultHeader = 'h2'
-    , defaultType = 'information'
-    , 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"
-    }
-    , types = Object.keys(typesDescriptions);
-
-  let noticeElement;
-  export let
-        title = ""
-        , type = defaultType
-        , content = ""
-        , header = defaultHeader
-        , icon;
-
-    $: header = header.match(/h[1-6]/)
-        ? header
-        : defaultHeader;
-
-    $: type = types.includes(type)
-        ? type
-        : defaultType;
-
-    $: role = type === "success"
-        ? "status"
-        : (type === "error" ? "alert" : null);
-
-  $: if (role) {
-      if (noticeElement) {
-          const tempNodes = Array.from(noticeElement.childNodes);
-          // console.log("temp: ",tempNodes);
-          noticeElement.innerHTML = "";
-          // Réinsère le contenu pour qu'il soit détecté par le lecteur d'écran.
-          tempNodes.forEach(node => noticeElement.appendChild(node)); }
-  }
-
-    $: shouldUseIcon = type === "advice" || type === "note";
-    // Si le type est "advice" ou "note", on force "neutral" (le gris), sinon on garde le type normal
-    $: computedType = shouldUseIcon ? "neutral" : type;
-    $: iconType = shouldUseIcon ? (icon ?? "note") : type;
-    $: 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). -->
-<!-- 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}
-          <svelte:element this={header}>
-            {@html title}
-          </svelte:element>
-        {/if}
-        {@html content}
-        <slot />
-    </div>
-  </div>
-</div>
-<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/pivFooter.svelte

@@ -1,65 +0,0 @@
-<svelte:options customElement="{{
-    tag: 'qc-piv-footer'
-    , props: {
-        logoUrl : {attribute: 'logo-url'}
-        , logoSrc : {attribute: 'logo-src'}
-        , logoSrcDarkTheme: {attribute: 'logo-src-dark-theme'}
-        , logoAlt : {attribute: 'logo-alt'}
-        , logoWidth: {attribute: 'logo-width'}
-        , logoHeight: {attribute: 'logo-height'}
-        , copyrightText : {attribute: 'copyright-text'}
-        , copyrightUrl : {attribute: 'copyright-url'}
-
-    }}
-}}" />
-
-<script>
-
-import { Utils } from "./utils"
-import { get_current_component } from "svelte/internal"  
-
-const
-    lang = Utils.getPageLanguage()
-    ;
-
-export 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 = '© Gouvernement du Québec, ' + (new Date()).getFullYear()
-    , logoWidth = 139
-    , logoHeight = 50
-    , copyrightUrl = lang === 'fr'
-                        ? 'https://www.quebec.ca/droit-auteur'
-                        : 'https://www.quebec.ca/en/copyright'
-    ;
-</script>
-<div class="qc-piv-footer qc-container-fluid">
-    <slot/>
-    <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">
-        <slot name="copyright">
-            <a href="{copyrightUrl}">
-                {copyrightText}
-            </a>
-        </slot>
-    </span>
-</div>
-<link rel='stylesheet' href='{Utils.cssPath}'>
-