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

package/src/sdg/components/ToggleSwitch/Test/ToggleSwitchEmbeddedTest.svelte

@@ -0,0 +1,46 @@
+<script>
+    import ToggleSwitch from "../ToggleSwitch.svelte";
+    import Fieldset from "../../Fieldset/Fieldset.svelte";
+    import {Utils} from "../../utils";
+</script>
+
+<svelte:options customElement={{
+  tag: 'qc-toggle-switch-embedded-test'
+}} />
+
+<Fieldset
+        elementsGap="md"
+        maxWidth="25.6rem"
+>
+    <ToggleSwitch
+            label="1<sup>er</sup> &nbsp commutateur"
+    />
+
+    <ToggleSwitch
+            label="Texte aligné sur la droite"
+            textAlign="end"
+    />
+</Fieldset>
+
+<Fieldset
+        legend="Préférences de notifications de messages"
+        elementsGap="md"
+        maxWidth="25.6rem"
+>
+    <ToggleSwitch
+            label="Nouveaux messages"
+            justified="true"
+            checked="true"
+    />
+    <ToggleSwitch
+            label="Modifications de messages"
+            justified="true"
+    />
+    <ToggleSwitch
+            label="Messages supprimés (désactivé)"
+            justified="true"
+            disabled="true"
+    />
+</Fieldset>
+
+<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/ToggleSwitch/Test/toggleSwitchEmbeddedTest.html

@@ -0,0 +1 @@
+<qc-toggle-switch-embedded-test></qc-toggle-switch-embedded-test>

package/src/sdg/components/ToggleSwitch/Test/toggleSwitchTest.html

@@ -0,0 +1,34 @@
+<qc-toggle-switch-group
+        id="foo"
+        max-width="25.6rem"
+>
+    <qc-toggle-switch
+            label="1<sup>er</sup> &nbsp commutateur"
+    ></qc-toggle-switch>
+    <qc-toggle-switch
+            label="Texte aligné sur la droite"
+            text-align="end"
+    ></qc-toggle-switch>
+</qc-toggle-switch-group>
+
+<qc-toggle-switch-group
+        id="switch-group"
+        legend="Préférences de notifications de messages"
+        justified
+        max-width="25.6rem"
+>
+    <qc-toggle-switch
+            id="nouveaux-messages"
+            label="Nouveaux messages"
+            checked
+    ></qc-toggle-switch>
+    <qc-toggle-switch
+            id="modifications-messages"
+            label="Modifications de messages"
+    ></qc-toggle-switch>
+    <qc-toggle-switch
+            id="messages-supprimes"
+            label="Messages supprimés (désactivé)"
+            disabled
+    ></qc-toggle-switch>
+</qc-toggle-switch-group>

package/src/sdg/components/ToggleSwitch/ToggleSwitch.svelte

@@ -0,0 +1,34 @@
+<script>
+    let {
+        label,
+        id,
+        checked = $bindable(false),
+        disabled = $bindable(false),
+        justified,
+        textAlign
+    } = $props();
+
+    const usedId = "toggle-switch-" + (id ?
+        id : Math.random().toString(36));
+
+    let usedLabelTextAlignment = textAlign?.toLowerCase() === "end" ? "end" : "start";
+</script>
+
+<label class={[
+        "qc-switch", justified && "qc-switch-justified"
+    ]} for={usedId}>
+    <input
+        id={usedId}
+        type="checkbox"
+        role="switch"
+        bind:checked={checked}
+        {disabled}
+    />
+
+    <span class={[
+        "qc-switch-label", usedLabelTextAlignment === "end" && "qc-switch-label-end"
+        ]}>
+        {@html label}
+    </span>
+    <span class="qc-switch-slider"></span>
+</label>

package/src/sdg/components/ToggleSwitch/ToggleSwitchWC.svelte

@@ -0,0 +1,66 @@
+<svelte:options customElement = {{
+    tag: 'qc-toggle-switch',
+    shadow: 'none',
+    props: {
+        id: {attribute: 'id', type: 'String'},
+        label: {attribute: 'label', type: 'String'},
+        checked: {attribute: 'checked', type: 'Boolean', reflect: true},
+        disabled: {attribute: 'disabled', type: 'Boolean', reflect: true},
+        justified: {attribute: 'justified', type: 'Boolean', reflect: true},
+        textAlign: {attribute: 'text-align', type: 'String'},
+    }
+}} />
+
+<script>
+    import ToggleSwitch from "./ToggleSwitch.svelte";
+    import {onMount, onDestroy} from "svelte";
+
+    let {
+        id,
+        label,
+        checked = $bindable(false),
+        disabled = false,
+        justified = false,
+        textAlign,
+        ...rest
+    } = $props();
+
+    let parent = $state();
+    let index;
+    onMount(() => {
+        parent = $host().closest("qc-toggle-switch-group");
+
+        if (parent) {
+            parent.items.push({
+                id,
+                label,
+                disabled,
+                checked,
+                justified,
+                textAlign,
+            });
+            index = parent.items.length - 1;
+        }
+    });
+    onDestroy(() => {
+        parent.items.splice(index, 1);
+    })
+    $effect(() => {
+        if (parent) {
+            checked = parent.items[index].checked;
+            $host().dispatchEvent(new Event("change"));
+        }
+    })
+</script>
+
+{#if !parent}
+    <ToggleSwitch
+        {label}
+        bind:checked
+        {disabled}
+        {justified}
+        {textAlign}
+        {...rest}
+    />
+{/if}
+

package/src/sdg/components/ToggleSwitch/_toggleSwitch.html

@@ -0,0 +1,160 @@
+<!-- Commutateur -->
+<h3 id="toggle-switch">Commutateur</h3>
+<p>
+    Le commutateur peut être utilisé seul ou en groupe. Contrairement aux <a href="#checkbox">cases à cocher</a>, le
+    commutateur agit immédiatement sur la page où il est inséré.
+</p>
+
+<h4>Exemples</h4>
+<qc-doc-exemple
+        caption="Exemple de commutateurs seuls avec leurs libellés respectivement à gauche et à droite."
+>
+    <div style="display: flex; flex-direction: column; gap: 2.4rem">
+        <qc-toggle-switch
+                id="switch-status"
+                label="Afficher l'état du commutateur à la console."
+        ></qc-toggle-switch>
+        <qc-toggle-switch
+                id="switch-status-2"
+                label="Libellé aligné à droite (afficher au format mobile pour voir la différence)."
+                text-align="end"
+        ></qc-toggle-switch>
+    </div>
+
+    <script>
+        document.getElementById("switch-status")
+            .addEventListener("change", (event) => {
+                console.log(`'switch-status' mis à ${event.target.checked}`);
+            });
+    </script>
+</qc-doc-exemple>
+
+<qc-doc-exemple caption="Exemple de commutateurs en groupe avec différents états">
+    <qc-toggle-switch-group
+        id="switch-group"
+        legend="Préférences de notifications de messages"
+        justified
+        max-width="25.6rem"
+    >
+        <qc-toggle-switch
+                id="nouveaux-messages"
+                label="Nouveaux messages"
+                checked
+        ></qc-toggle-switch>
+        <qc-toggle-switch
+                id="modifications-messages"
+                label="Modifications de messages"
+        ></qc-toggle-switch>
+        <qc-toggle-switch
+                id="messages-supprimes"
+                label="Messages supprimés (désactivé)"
+                disabled
+        ></qc-toggle-switch>
+    </qc-toggle-switch-group>
+    <script>
+        document.getElementById("switch-group").querySelectorAll("qc-toggle-switch")
+            .forEach(switchElement => {
+                switchElement.addEventListener("change", (event) => {
+                    console.log(`'${event.target.id}' mis à ${event.target.checked}`);
+                });
+            });
+    </script>
+</qc-doc-exemple>
+
+<h4>Documentation technique</h4>
+
+<h5>Attributs de <code>qc-toggle-switch</code></h5>
+<table class="qc-table qc-striped component-attributes-description">
+    <thead>
+    <tr>
+        <th>Nom</th>
+        <th>Valeur attendue</th>
+        <th>Valeur par défaut</th>
+        <th>Description</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td>label</td>
+        <td>Contenu HTML</td>
+        <td></td>
+        <td>Contenu du libellé du commutateur</td>
+    </tr>
+    <tr>
+        <td>checked</td>
+        <td>na</td>
+        <td>na</td>
+        <td>Active le commutateur par défaut</td>
+    </tr>
+    <tr>
+        <td>disabled</td>
+        <td>na</td>
+        <td>na</td>
+        <td>Désactive le commutateur</td>
+    </tr>
+    <tr>
+        <td>justified</td>
+        <td>na</td>
+        <td>na</td>
+        <td>
+            Permet au commutateur et son libellé de prendre toute la largeur disponible
+        </td>
+    </tr>
+    <tr>
+        <td>text-align</td>
+        <td>"start" ou "end"</td>
+        <td>"start"</td>
+        <td>Alignement du texte du libellé</td>
+    </tr>
+    </tbody>
+</table>
+
+<h5>Attributs de <code>qc-toggle-switch-group</code></h5>
+<table class="qc-table qc-striped component-attributes-description">
+    <thead>
+    <tr>
+        <th>Nom</th>
+        <th>Valeur attendue</th>
+        <th>Valeur par défaut</th>
+        <th>Description</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td>legend</td>
+        <td>Contenu HTML</td>
+        <td></td>
+        <td>Contenu de la légende du groupe de commutateurs</td>
+    </tr>
+    <tr>
+        <td>disabled</td>
+        <td>na</td>
+        <td>na</td>
+        <td>Désactive le groupe de commutateurs</td>
+    </tr>
+    <tr>
+        <td>justified</td>
+        <td>na</td>
+        <td>na</td>
+        <td>
+            Permet au commutateur et son libellé de prendre toute la largeur disponible.
+            <br> N.B. : Cette valeur a priorité sur celle des commutateurs du groupe.
+        </td>
+    </tr>
+    <tr>
+        <td>text-align</td>
+        <td>"start" ou "end"</td>
+        <td>"start"</td>
+        <td>
+            Alignement du texte des libellés des commutateurs.
+            <br> N.B. : Cette valeur a priorité sur celle des commutateurs du groupe.
+        </td>
+    </tr>
+    <tr>
+        <td>max-width</td>
+        <td>Toute valeur acceptée par la directive css <code>max-width</code></td>
+        <td>"fit-content"</td>
+        <td>Largeur maximale des commutateurs dans le groupe</td>
+    </tr>
+    </tbody>
+</table>

package/src/sdg/components/ToggleSwitch/_toggleSwitch.scss

@@ -0,0 +1,97 @@
+@use "../../scss/qc-sdg-lib" as *;
+@use "sass:math";
+
+$width: 56;
+$height: 32;
+$border: 1;
+
+.qc-switch {
+  display: flex;
+  width: fit-content;
+  margin: 0;
+  gap: token-value(spacer, sm);
+  position: relative;
+  cursor: pointer;
+
+  &:has(input:disabled) {
+    color: token-value(color, grey, regular);
+    cursor: not-allowed;
+  }
+
+  input[type=checkbox] {
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    position: absolute;
+
+    &:checked ~ .qc-switch-slider {
+      background-color: token-value(color, blue, regular);
+      border-color: transparent;
+
+      &::before {
+        transform: translateX(rem($width - $height));
+      }
+    }
+
+    &:focus ~ .qc-switch-slider {
+      outline: rem(2) solid token-value(color, blue, light);
+      outline-offset: rem(2);
+    }
+
+    &:disabled ~ .qc-switch-slider {
+      border-color: transparent;
+      cursor: not-allowed;
+
+      &::before {
+        border: none;
+      }
+    }
+  }
+}
+
+.qc-switch-label {
+  display: flex;
+  margin-top: rem(3);
+}
+
+.qc-switch-label-end {
+  justify-content: end;
+  text-align: right;
+}
+
+.qc-switch-slider {
+  display: inline-flex;
+  position: relative;
+  cursor: pointer;
+  min-width: rem($width);
+  min-height: rem($height);
+  max-width: rem($width);
+  max-height: rem($height);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: token-value(color, grey, light);
+  transition: background-color .3s ease-out;
+  border-radius: rem(math.div($height, 2));
+  border: rem($border) solid token-value(color, grey, medium);
+
+  &::before {
+    position: absolute;
+    content: "";
+    height: rem($height - 4 * $border);
+    width: rem($height - 4 * $border);
+    left: rem($border);
+    bottom: rem($border);
+    background-color: token-value(color, white);
+    border: rem($border) solid token-value(color, grey, dark);
+    border-radius: 50%;
+    transition: all .3s ease-out;
+  }
+}
+
+.qc-switch-justified {
+  justify-content: space-between;
+  width: 100%;
+}

package/src/sdg/components/utils.js

@@ -53,6 +53,86 @@ export class Utils {
         return false;
     }
 
+    /**
+     * extract and clean prefixed attributes
+     * example:
+     *  computeFieldsAttributes("radio" , {"radio-class":"my-radio", "radio-data-foo":"foo", "other":"other value"})
+     *  return {"class":"my-radio", "data-foo":"foo"}
+     *
+     </div>
+     * @param {(string|string[])} prefix - Une chaîne de caractères ou un tableau de chaînes.
+     * @param restProps - ojbect of attributes
+     * @returns {*} - object of attributes
+     */
+    static computeFieldsAttributes(prefix , restProps) {
+        let output = {},
+            _prefix = prefix + '-'
+        Object
+            .entries(restProps)
+            .forEach(([prop,value]) => {
+                if (prop.startsWith(_prefix)) {
+                    const prefixProp = prop.replace(new RegExp('^' + _prefix), '')
+                    output[prefixProp] = value;
+                }
+            })
+
+        return output;
+    }
+
+    /**
+     * Checks if the current node or one of its children is currently in focus
+     * @param node The element's node to check
+     * @returns {boolean} If the current node or one of its children is currently in focus
+     */
+    static componentIsActive(node) {
+        if (!node) {
+            return false;
+        }
+
+        const root = node.getRootNode();
+        return node.contains(root.activeElement);
+    }
+
+    /**
+     * Waits for a specified amount of time
+     * @param ms The amount of time to wait
+     * @returns {Promise<unknown>} The resolution of the sleep action
+     */
+    static sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    static generateId(prefix = '') {
+        return prefix + "-" + (Math.floor(Math.random() * 90000) + 10000);
+    }
+
+
+    /**
+     * Returns the word in lowercase and with accented letters replaced by their non-accented counterparts
+     * @param str
+     * @returns {string}
+     */
+    static cleanupSearchPrompt(str) {
+        let word = String(str)
+
+        const replaceAccents = (str, search, replace) => {
+            return str.replaceAll(new RegExp(search, 'gi'), replace);
+        }
+
+        // Supprime les accents.
+        word = replaceAccents(word, /[éèêë]/gi, 'e');
+        word = replaceAccents(word, /[àäâ]/gi, 'a');
+        word = replaceAccents(word, /[ùûü]/gi, 'u');
+        word = replaceAccents(word, /[ïî]/gi, 'i');
+        word = replaceAccents(word, /[ôö]/gi, 'i');
+        word = replaceAccents(word, /[œ]/gi, 'oe');
+        word = replaceAccents(word, /[æ]/gi, 'ae');
 
+        // Remplace les caractères spéciaux par des espaces.
+        word = word.replaceAll(/[-_—–]/gi, ' ');
+        word = word.replaceAll(/’/gi, "'");
 
-}
+        // Convertit le mot en minuscules.
+        return word.toLowerCase();
+    }
+}

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

@@ -0,0 +1,6 @@
+export * from './bases/Icon/Test/IconEmbeddedTest.svelte';
+export * from './components/TextField/Test/TextFieldEmbededTest.svelte';
+export * from "./components/DropdownList/Test/DropdownListEmbeddedTest.svelte";
+export * from "./components/ChoiceGroup/Test/ChoiceGroupeEmbededTest.svelte";
+export * from "./components/ToggleSwitch/Test/ToggleSwitchEmbeddedTest.svelte";
+export * from "./components/PivHeader/Test/pivHeaderEmbeddedTest.svelte";

package/src/sdg/scss/lib/_functions.scss

@@ -49,9 +49,17 @@ $rem-ratio: math.div(1, .16 * $percent-root-font-size);
   @return string.unquote(deep-implode(map.get($google-fonts, $font), ','));
 }
 
-@function getImageUrl($nom, $images: $images) {
+@function getImageUrl($nom, $images: $images, $base64: true) {
   $image: map.get($images, $nom);
-  @return url('data:image/svg+xml;base64,#{$image}');
+  $prefix: '';
+  @if $base64 {
+    $prefix: 'data:image/svg+xml;base64,';
+    @return url('#{$prefix}#{$image}');
+  }
+  @else {
+    @return url('#{$image}');
+  }
+
 }
 
 

package/src/sdg/scss/lib/_mixins.scss

@@ -5,7 +5,7 @@
 @use "settings/base" as *;
 
 @use "functions" as *;
-@use "../grid/grid-lib" as grid;
+@use "../../bases/grid/grid-lib" as grid;
 
 // toujours utiliser ces mixins pour la déclarations des tailles de police:
 // cela garantit que la taille police est conforme aux exigences du SDG
@@ -51,30 +51,6 @@
   outline-offset: 1px;
 }
 
-@mixin external-link-img() {
-  $ratio : math.div(11,16) * 1em;
-  height: $ratio;
-  width: $ratio;
-  display: inline-block;
-  mask: getImageUrl(external-link) no-repeat;
-  background: token-value(color link text);
-  mask-size: $ratio;
-  margin-left: 4px;
-  a:visited  & {
-    background: token-value(color link visited);
-  }
-  a:focus  & {
-    background: token-value(color link hover);
-  }
-  a:hover  & {
-    background: token-value(color link hover);
-  }
-  a:active  & {
-    background: token-value(color link active);
-  }
-
-}
-
 @mixin sr-only() {
   position: absolute;
   width: 1px;
@@ -131,7 +107,10 @@
     inset: 0;
     z-index: -5
   }
-  &:has(input:focus), &:focus {
+  &:has(input:focus),
+  &:focus,
+  &:has(textarea:focus),
+ {
     outline: 2px solid token-value(color formfield focus outline);
     &::before {
       border: 2px solid token-value(color formfield focus border);
@@ -218,3 +197,61 @@
   }
 }
 
+%check-row {
+  display: flex;
+  max-width: fit-content;
+  align-items: start;
+  margin: 0;
+  cursor: pointer;
+  font-weight: normal;
+
+
+  &:has(input:disabled) {
+    color: token-value(color, grey, regular);
+    cursor: not-allowed;
+  }
+
+  input.qc-choicefield {
+    display: flex;
+    position: relative;
+    appearance: none;
+    margin: 0 token-value(spacer, xs) 0 0;
+    background-color: token-value(color, white);
+    border-style: solid;
+    border-color: token-value(color, blue, dark);
+
+    &:not(:disabled):hover {
+      cursor: pointer;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      margin: auto;
+      inset: 0;
+      overflow: hidden;
+      opacity: 0;
+    }
+
+    &:checked {
+      border-color: token-value(color blue regular);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      border-color: token-value(color, grey, light);
+    }
+
+    &.qc-compact {
+      min-width: token-value(spacer, sm);
+      min-height: token-value(spacer, sm);
+      max-width: token-value(spacer, sm);
+      max-height: token-value(spacer, sm);
+
+      border-width: 1px;
+      margin-top: rem(4);
+    }
+  }
+}
+
+

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

@@ -1,2 +1,2 @@
 @use "qc-sgd-no-grid";
-@use "grid/grid";
+@use "../bases/grid/grid";