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

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

@@ -0,0 +1,52 @@
+<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'}
+
+    },
+    extend: (customElementConstructor) => {
+        return class extends customElementConstructor {
+          static self;
+
+          constructor() {
+            super();
+            this.self = this;
+          }
+        }
+    }
+}}" />
+
+<script>
+    import { Utils } from "../utils";
+    import PivFooter from "./PivFooter.svelte";
+    import DefaultCopyright from "./_defaultCopyright.svelte";
+
+    const lang = Utils.getPageLanguage();
+
+    let {
+        copyrightText,
+        copyrightUrl,
+       self,
+       slots,
+       defaultSlot,
+       ...props
+    } = $props();
+    $inspect(self,slots,defaultSlot);
+</script>
+<PivFooter {...props} >
+    {#snippet mainSlot()}
+        <slot />
+    {/snippet}
+    {#snippet copyrightSlot()}
+        <slot name="copyright">
+            <DefaultCopyright {copyrightText} {copyrightUrl} />
+        </slot>
+    {/snippet}
+</PivFooter>

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

@@ -0,0 +1,11 @@
+<script>
+    import {Utils} from "../utils";
+    const lang = Utils.getPageLanguage();
+    const {
+        copyrightUrl = lang === 'fr' ? 'https://www.quebec.ca/droit-auteur' : 'https://www.quebec.ca/en/copyright',
+        copyrightText =  '© Gouvernement du Québec, ' + (new Date()).getFullYear()
+    } = $props()
+</script>
+<a href="{copyrightUrl}">
+    {copyrightText}
+</a>

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

@@ -0,0 +1,144 @@
+<script>
+    import { onMount, tick } from "svelte";
+    import { Utils } from "../utils"
+    import DefaultLinks from "./_defaultLinks.svelte"
+
+    const lang = Utils.getPageLanguage();
+
+    let {
+        self,
+        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,
+        altLanguageText,
+        altLanguageUrl,
+        joinUsText,
+        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',
+        links,
+        search
+    } = $props()
+    console.log('PivHeader self', self);
+    let containerClass = $state('qc-container')
+        , searchZone = $state(null)
+        , displaySearchForm = $state(false);
+
+    // $effect(_ => {
+    //     if (displaySearchForm) {
+    //         let input = self
+    //             ? self.querySelector('[slot="search-zone"] input')
+    //             : searchZone.querySelector('input')
+    //         ;
+    //         input?.focus();
+    //     }
+    // })
+    $inspect(self)
+
+    function focusOnSearchInput() {
+
+        if (displaySearchForm) {
+
+            let input = self
+                ? self.querySelector('[slot="search-zone"] input')
+                : searchZone.querySelector('input')
+            ;
+            console.log('focusOnSearchInput', self, searchZone, input );
+            input?.focus();
+
+        }
+    }
+
+    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"
+               aria-label="{logoAlt}"
+            >
+                <div role="img"></div>
+            </a>
+
+            {#if titleText}
+                <div class="title">
+                    <a href="{titleUrl}"
+                       class="title">
+                        {titleText}
+                    </a>
+                </div>
+
+            {/if}
+        </div>
+
+      <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 links}
+                {@render links()}
+<!--            Le bloc else est present uniquement pour le cas ou PivHeader est utilise sans le wrapper PivHeaderWC.svelte -->
+            {:else}
+                <DefaultLinks {joinUsUrl}
+                              {joinUsText}
+                              {altLanguageUrl}
+                              {altLanguageText}
+                              {linksLabel}/>
+            {/if}
+        </div>
+      </div>
+    </div>
+
+    <div class="piv-bottom">
+      {#if displaySearchForm}
+          <div class="search-zone" bind:this={searchZone}>
+              {@render search?.()}
+          </div>
+      {/if}
+  </div>
+  </div>
+</div>
+<link rel='stylesheet' href='{Utils.cssPath}'>

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

@@ -0,0 +1,68 @@
+<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'}
+  },
+  extend: (customElementConstructor) => {
+    return class extends customElementConstructor {
+      static self;
+
+      constructor() {
+        super();
+        this.self = this;
+      }
+    }
+  }
+}}" />
+
+<script>
+    import { Utils } from "../utils";
+    import PivHeader from "./PivHeader.svelte";
+    import DefaultLinks  from "./_defaultLinks.svelte";
+
+    const lang = Utils.getPageLanguage();
+
+    let {
+        self,
+        joinUsText,
+        joinUsUrl,
+        altLanguageText,
+        altLanguageUrl,
+        linksLabel,
+        ...props
+    } = $props()
+
+</script>
+
+<PivHeader {self} {...props}>
+    {#snippet links()}
+        <slot name="links">
+            <DefaultLinks {joinUsUrl}
+                          {joinUsText}
+                          {altLanguageUrl}
+                          {altLanguageText}
+                          {linksLabel}/>
+        </slot>
+    {/snippet}
+
+    {#snippet search()}
+        <slot name="search-zone" />
+    {/snippet}
+</PivHeader>

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

@@ -0,0 +1,24 @@
+<script>
+    import {Utils} from "../utils";
+    const lang = Utils.getPageLanguage();
+
+    const {
+        joinUsText = lang === 'fr' ? 'Nous joindre' : 'Contact us',
+        joinUsUrl = '',
+        altLanguageText = lang === 'fr' ? 'English' : 'Français',
+        altLanguageUrl = '',
+        linksLabel = lang === 'fr' ? 'Navigation PIV' : 'PIV navigation',
+    } = $props()
+</script>
+{#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}

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

@@ -0,0 +1,67 @@
+<script>
+    import {Utils} from "../utils";
+    import SearchInput from "../SearchInput/SearchInput.svelte";
+    import IconButton from "../IconButton/IconButton.svelte";
+
+    const lang = Utils.getPageLanguage();
+
+    let {
+        value = $bindable(''),
+        name = 'q',
+        pivBackground = false,
+        ...rest
+    } = $props();
+
+
+    let defaultsAttributes = {
+        input: {
+            "placeholder": lang === "fr" ? "Rechercher…" : "Search",
+            "aria-label": lang === "fr" ? "Rechercher…" : "Search"
+        },
+        submit: {
+            "aria-label": lang === "fr" ? "Lancer la recherche" : "Submit search"
+        }
+    };
+
+    let inputProps = $state({});
+    let submitProps = $state({});
+
+
+    $effect(() => {
+        const [inputAttrs, submitAttrs] = computeFieldsAttributes(rest);
+        inputProps = {
+            ...inputAttrs,
+            name,
+        };
+        submitProps = submitAttrs;
+    });
+
+    /**
+     * @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(Boolean) // élimine les éléments null
+                )
+            };
+        });
+    }
+
+
+</script>
+<div class="qc-search-bar" class:piv-background={pivBackground}>
+    <SearchInput bind:value {...inputProps}/>
+        <IconButton
+                type="submit"
+                iconColor={pivBackground ? 'blue-piv' : 'background'}
+                icon="loupe-piv-fine"
+                iconSize="md"
+                {...submitProps}
+        />
+</div>

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

@@ -0,0 +1,17 @@
+<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 SearchBar from "./SearchBar.svelte";
+
+    const props = $props();
+</script>
+
+<SearchBar {...props} />

package/src/sdg/components/SearchInput/SearchInput.svelte

@@ -1,36 +1,27 @@
-<svelte:options customElement="{{
-    tag: 'qc-search-input',
-    shadow: 'none',
-    props: {
-        ariaLabel: {attribute:'aria-label'},
-        clearAriaLabel: {attribute: 'clear-aria-label'}
-    }
-}}" />
 <script>
-    import IconButton from "../Button/IconButton.svelte";
+    import IconButton from "../IconButton/IconButton.svelte";
     import {Utils} from "../utils";
-    const
-        lang = Utils.getPageLanguage();
 
-    export let
-        value,
-        ariaLabel = lang === "fr"
-            ? "Rechercher…"
-            : "Search_",
-        clearAriaLabel = lang === "fr"
-            ? "Effacer le texte"
-            : "Clear text"
-    ;
-    let searchInput;
+    const lang = Utils.getPageLanguage();
+
+
+    let {
+        value = $bindable(''),
+        ariaLabel = lang === "fr" ? "Rechercher…" : "Search_",
+        clearAriaLabel = lang === "fr" ? "Effacer le texte" : "Clear text",
+        ...rest
+    } = $props();
 
+    let searchInput;
 </script>
+
 <div class="qc-search-input">
     <input  bind:this={searchInput}
-            bind:value
+            bind:value={value}
             type="search"
             autocomplete="off"
-            {...(ariaLabel ? {"aria-label": ariaLabel} : {})}
-            {...$$restProps}
+            aria-label={ariaLabel}
+            {...rest}
     />
     {#if value}
     <IconButton type="button"
@@ -38,10 +29,10 @@
                 iconColor="blue-piv"
                 iconSize="sm"
                 aria-label={clearAriaLabel}
-                on:click={e => {
+                onclick={(e) => {
                     e.preventDefault();
                     value = "";
-                    searchInput.focus();
+                    searchInput?.focus();
                 }}
         />
     {/if}

package/src/sdg/components/SearchInput/SearchInputWC.svelte

@@ -0,0 +1,16 @@
+<svelte:options customElement="{{
+    tag: 'qc-search-input',
+    shadow: 'none',
+    props: {
+        ariaLabel: {attribute:'aria-label'},
+        clearAriaLabel: {attribute: 'clear-aria-label'}
+    }
+}}" />
+
+<script>
+    import SearchInput from "./SearchInput.svelte";
+
+    const props = $props();
+</script>
+
+<SearchInput {...props} />

package/src/sdg/components/{toTop.svelte → ToTop/ToTop.svelte}

@@ -1,44 +1,32 @@
-<svelte:options customElement="{{
-    tag: 'qc-to-top',
-    shadow: 'none',
-   props: {
-      text: {attribute: 'text', type:'String'},
-  }
-}}" />
-
-
 <script>
-   import { Utils } from "./utils";
-   import Icon from "./Icon.svelte";
+   import { Utils } from "../utils";
+   import Icon from "../Icon/Icon.svelte";
+   import {setContext} from "svelte";
 
-   const
-        lang = Utils.getPageLanguage();
-   export let
-        text = lang === 'fr'
-             ? "Retour en haut"
-             : "Back to top"
-      , demo =  'false'
-      ;
-   let
-        minimumScrollHeight = 0
-      , src = `${Utils.imagesRelativePath}arrow-up-white.svg`
-      , lastScrollY = 0
-      , visible = demo === 'true'
-      , lastVisible = visible
-      , toTopElement
-      ;
+   const lang = Utils.getPageLanguage();
+   const {
+      text = lang === 'fr' ? "Retour en haut" : "Back to top",
+      demo = 'false'
+   } = $props();
 
+   let visible = $state(demo === 'true');
+   let lastVisible = setContext('visible', () => visible);
+   let lastScrollY = 0;
+   let minimumScrollHeight = 0;
+   let toTopElement;
 
+   const src = `${Utils.imagesRelativePath}arrow-up-white.svg`;
 
    function handleScrollUpButton() {
-      if (demo === 'true') {
-         return
+      if (Utils.isTruthy(demo)) {
+         return;
       }
-      let pageBottom =
+
+      const pageBottom =
               ( window.innerHeight + window.scrollY )
               >=
-              ( document.body.offsetHeight - 1 )
-      ;
+              ( document.body.offsetHeight - 1 );
+
       visible =
             lastScrollY >  window.scrollY
             && ( document.body.scrollTop > minimumScrollHeight
@@ -53,11 +41,12 @@
       lastScrollY = window.scrollY;
    }
 
-   function scrollToTop() {
-     window.scrollTo({
+   function scrollToTop(e) {
+      e.preventDefault()
+      window.scrollTo({
         top: 0,
         behavior: 'smooth'
-     });
+      });
    }
 
    function handleEnterAndSpace(e) {
@@ -69,16 +58,20 @@
       }
    }
 
+   $effect(() => {
+      lastScrollY = window.scrollY;
+   });
+
 </script>
 
 <svelte:window on:scroll = {handleScrollUpButton} />
 
-<a href="javascript:;"
+<a href="#top"
    bind:this={toTopElement}
    class="qc-to-top"
    class:visible
-   on:click|preventDefault={scrollToTop}
-   on:keydown={handleEnterAndSpace}
+   onclick={(e) => scrollToTop(e)}
+   onkeydown={handleEnterAndSpace}
    tabindex={visible ? 0 : -1}
    {demo}
 >

package/src/sdg/components/ToTop/ToTopWC.svelte

@@ -0,0 +1,16 @@
+<svelte:options customElement={{
+    tag: 'qc-to-top',
+    shadow: 'none',
+    props: {
+        text: { attribute: 'text', type: 'String' },
+        demo: { attribute: 'demo', type: 'String' }
+    }
+}} />
+
+<script>
+    import ToTop from "./ToTop.svelte";
+
+    const props = $props();
+</script>
+
+<ToTop {...props} />

package/src/sdg/components/utils.js

@@ -8,7 +8,7 @@ export class Utils {
                     .split('/')
                     .slice(0, -2)
                     .join('/')
-        || '.'
+        || '/'
     static cssRelativePath =
         `${this.assetsBasePath}/css/`
             .replace('//','/')

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

@@ -1,29 +0,0 @@
-<script>
-import Icon from "../Icon.svelte";
-
-export let
-    size = 'xl',
-    label,
-    icon,
-    iconSize,
-    iconColor
-;
-
-</script>
-
-<button on:click
-        data-button-size={size}
-        {...$$restProps}
-        class="qc-icon-button {$$restProps.class ?? ''}"
-
-    >
-    {#if icon}
-    <Icon type="{icon}"
-          size={iconSize}
-          color={iconColor}
-          aria-hidden="true"
-          label={label}
-    />
-    {/if}
-</button>
-

package/src/sdg/components/Icon.svelte

@@ -1,39 +0,0 @@
-<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>
-    export let
-        type,
-        label,
-        size='md',
-        color = 'text-primary',
-        width='auto',
-        height='auto'
-    ;
-    $: attributes = 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}
-     {...$$restProps}
-    >
-</div>