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

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

@@ -0,0 +1,89 @@
+<svelte:options customElement={{
+  tag: 'qc-select-embedded-test'
+}} />
+
+<script>
+    import DropdownList from "../DropdownList.svelte";
+    import {Utils} from "../../utils";
+    import * as dropdownListTest from "./dropdownListTestUtils";
+    import Button from "../../Button/Button.svelte";
+
+    let singleChoiceOptions = $state(dropdownListTest.genericOptions());
+    let singleChoiceWithSearchOptions = $state(dropdownListTest.genericOptions());
+    let multipleChoiceOptions = $state(dropdownListTest.genericOptions());
+    let invalidOptions = $state(dropdownListTest.genericOptions());
+    let restaurants = $state(dropdownListTest.restaurantsArray());
+    let regions = $state(dropdownListTest.regionsArray());
+
+    singleChoiceOptions[0].checked = true;
+    singleChoiceWithSearchOptions[0].checked = true;
+</script>
+
+<DropdownList
+        id="dropdown-list-single-choice"
+        label="Choix unique"
+        items={singleChoiceOptions}
+/>
+
+<div style="height: 40rem;">
+<DropdownList
+        id="dropdown-list-single-choice-no-scroll"
+        label="Choix unique avec recherche"
+        enableSearch={true}
+        items={singleChoiceWithSearchOptions}
+/>
+</div>
+
+<DropdownList
+        id="dropdown-list-multiple-choices"
+        label="Choix multiples"
+        multiple
+        items={multipleChoiceOptions}
+/>
+
+<div class="qc-formfield-row">
+    <DropdownList
+            id="dropdown-list-invalid"
+            label="État invalide"
+            invalid="true"
+            items={invalidOptions}
+    />
+    <DropdownList
+            id="dropdown-list-single-choice-other"
+            label="Autre choix"
+            items={singleChoiceOptions}
+    />
+</div>
+
+<DropdownList
+        id="dropdown-list-disabled"
+        label="Désactivé"
+        disabled="true"
+        items={JSON.parse(JSON.stringify(multipleChoiceOptions))}
+/>
+
+<form id="dropdown-list-embedded-test-form">
+    <DropdownList
+            label="Types de restaurants"
+            required="true"
+            placeholder="Types de restaurants"
+            enableSearch={true}
+            searchPlaceholder="Rechercher un restaurant"
+            items={restaurants}
+            invalidText="Veuillez choisir un type de restaurant."
+    />
+
+    <DropdownList
+            label="Régions desservies"
+            multiple="true"
+            placeholder="Sélectionner une région"
+            enableSearch={true}
+            searchPlaceholder="Rechercher les régions"
+            items={regions}
+            width="lg"
+    />
+
+    <Button label="Envoyer" type="submit" compact="true" />
+</form>
+
+<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/DropdownList/Test/dropdownListEmbeddedTest.html

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

package/src/sdg/components/DropdownList/Test/dropdownListTest.html

@@ -0,0 +1,194 @@
+<qc-select id="qc-select-single-choice">
+  <label for="select-single-choice">Choix unique</label>
+  <select id="select-single-choice">
+    <option value="1" selected>Option 1</option>
+    <option value="2">Option 2</option>
+    <option value="3">Option 3</option>
+    <option value="4">Option 4</option>
+    <option value="5">Option 5</option>
+    <option value="6">Option 6</option>
+    <option value="7">Option 7</option>
+    <option value="8">Option 8</option>
+    <option value="9">Option 9</option>
+    <option value="10">Option 10</option>
+    <option value="11">Option 11</option>
+    <option value="12">Option 12</option>
+    <option value="13">Option 13</option>
+    <option value="14">Option 14</option>
+    <option value="15">Option 15</option>
+    <option value="16" disabled>Option 16 (désactivée)</option>
+  </select>
+</qc-select>
+
+<div style="height: 40rem;">
+  <qc-select id="qc-select-single-choice-search" enable-search>
+    <label for="select-single-choice-search">Choix unique avec recherche</label>
+    <select id="select-single-choice-search">
+      <option value="1" selected>Option 1</option>
+      <option value="2">Option 2</option>
+      <option value="3">Option 3</option>
+      <option value="4">Option 4</option>
+      <option value="5">Option 5</option>
+      <option value="6">Option 6</option>
+      <option value="7">Option 7</option>
+      <option value="8">Option 8</option>
+      <option value="9">Option 9</option>
+      <option value="10">Option 10</option>
+      <option value="11">Option 11</option>
+      <option value="12">Option 12</option>
+      <option value="13">Option 13</option>
+      <option value="14">Option 14</option>
+      <option value="15">Option 15</option>
+      <option value="16" >Option 16</option>
+    </select>
+  </qc-select>
+</div>
+
+<qc-select id="qc-select-multiple-choices">
+  <label for="select-multiple-choices">Choix multiples</label>
+  <select multiple id="select-multiple-choices">
+    <option value="1">Option 1</option>
+    <option value="2">Option 2</option>
+    <option value="3">Option 3</option>
+    <option value="4">Option 4</option>
+    <option value="5">Option 5</option>
+    <option value="6">Option 6</option>
+    <option value="7">Option 7</option>
+    <option value="8">Option 8</option>
+    <option value="9">Option 9</option>
+    <option value="10">Option 10</option>
+    <option value="11">Option 11</option>
+    <option value="12">Option 12</option>
+    <option value="13">Option 13</option>
+    <option value="14">Option 14</option>
+    <option value="15">Option 15</option>
+    <option value="16" disabled>Option 16 (désactivée)</option>
+  </select>
+</qc-select>
+
+<div class="qc-formfield-row">
+  <qc-select id="qc-select-invalid" invalid>
+    <label for="select-invalid">État invalide</label>
+    <select multiple id="select-invalid">
+      <option value="1">Option 1</option>
+      <option value="2">Option 2</option>
+      <option value="3">Option 3</option>
+      <option value="4">Option 4</option>
+      <option value="5">Option 5</option>
+      <option value="6">Option 6</option>
+      <option value="7">Option 7</option>
+      <option value="8">Option 8</option>
+      <option value="9">Option 9</option>
+      <option value="10">Option 10</option>
+      <option value="11">Option 11</option>
+      <option value="12">Option 12</option>
+      <option value="13">Option 13</option>
+      <option value="14">Option 14</option>
+      <option value="15">Option 15</option>
+      <option value="16">Option 16</option>
+    </select>
+  </qc-select>
+
+  <qc-select id="qc-select-single-choice-other">
+    <label for="select-single-choice-other">Autre choix</label>
+    <select id="select-single-choice-other">
+      <option value="1" selected>Option 1</option>
+      <option value="2">Option 2</option>
+      <option value="3">Option 3</option>
+      <option value="4">Option 4</option>
+      <option value="5">Option 5</option>
+      <option value="6">Option 6</option>
+      <option value="7">Option 7</option>
+      <option value="8">Option 8</option>
+      <option value="9">Option 9</option>
+      <option value="10">Option 10</option>
+      <option value="11">Option 11</option>
+      <option value="12">Option 12</option>
+      <option value="13">Option 13</option>
+      <option value="14">Option 14</option>
+      <option value="15">Option 15</option>
+      <option value="16" disabled>Option 16 (désactivée)</option>
+    </select>
+  </qc-select>
+</div>
+
+<qc-select id="qc-select-disabled">
+  <label for="select-disabled">Désactivé</label>
+  <select id="select-disabled" disabled>disabled</select>
+</qc-select>
+
+<form id="dropdown-list-form">
+  <qc-select
+          id="dropdown-list-restaurants"
+          placeholder="Types de restaurants"
+          enable-search
+          search-placeholder="Rechercher un type restaurant"
+          required
+          invalid-text="Veuillez choisir un type de restaurant."
+  >
+    <label for="dropdown-list-restaurants-select">Types de restaurants</label>
+    <select id="dropdown-list-restaurants-select">
+      <option value="">Types de restaurants</option>
+      <option value="Pizzeria">Pizzeria</option>
+      <option value="Pâtisserie">Pâtisserie</option>
+      <option value="Steakhouse">Steakhouse</option>
+      <option value="Bar">Bar</option>
+      <option value="Casse-croûte">Casse-croûte</option>
+      <option value="Boîte à pâtes">Boîte à pâtes</option>
+      <option value="Restaurant à burgers">Restaurant à burgers</option>
+    </select>
+  </qc-select>
+
+  <qc-select
+          id="dropdown-list-regions"
+          placeholder="Sélectionner une région"
+          width="lg"
+          enable-search
+          search-placeholder="Rechercher les régions"
+  >
+    <label for="dropdown-list-regions-select">Régions desservies</label>
+    <select id="dropdown-list-regions-select" multiple>
+      <option value="Capitale-nationale">Capitale-nationale</option>
+      <option value="Centre-du-Québec" selected>Centre-du-Québec</option>
+      <option value="Montérégie" selected>Montérégie</option>
+      <option value="Outaouais">Outaouais</option>
+      <option value="Saguenay-Lac-Saint-Jean">Saguenay-Lac-Saint-Jean</option>
+      <option value="Gaspésie-Îles-de-la-Madeleine">Gaspésie-Îles-de-la-Madeleine</option>
+      <option value="Nord-du-Québec">Nord-du-Québec</option>
+      <option value="Bas-Saint-Laurent">Bas-Saint-Laurent</option>
+    </select>
+  </qc-select>
+
+  <button id="qc-select-form-test-submit" type="submit" class="qc-button qc-primary qc-compact">Envoyer</button>
+</form>
+
+<script>
+  const dropdownListForm = document.getElementById("dropdown-list-form");
+
+  dropdownListForm.addEventListener("submit", (event) => {
+    event.preventDefault();
+
+    let isValid = true;
+    const requiredFields = dropdownListForm.querySelectorAll("qc-select[required]");
+
+    requiredFields.forEach(field => {
+      const value = field.value;
+
+      if (!value || value.length <= 0) {
+        field.invalid = true;
+        isValid = false;
+      } else {
+        field.invalid = false;
+      }
+    });
+
+    if (isValid) {
+      const formEntries = dropdownListForm.querySelectorAll("qc-select");
+      let alertParts = ["Formulaire soumis avec les données suivantes :"];
+      formEntries.forEach((field) => {
+        alertParts.push(`${field.label}: ${field.value.join(", ")}`);
+      });
+      alert(alertParts.join("\n"));
+    }
+  });
+</script>

package/src/sdg/components/DropdownList/Test/dropdownListTestUtils.js

@@ -0,0 +1,113 @@
+export function genericOptions() {
+    let genericOptions = [];
+    for (let i = 1; i <= 16; i++) {
+        genericOptions.push({
+            value: i,
+            label: `Option ${i}`,
+            disabled: false,
+            checked: false,
+        });
+    }
+
+    return genericOptions;
+}
+
+export function restaurantsArray() {
+    return [
+        {
+            label: "Pizzeria",
+            value: "Pizzeria",
+            checked: false,
+            disabled: false,
+        },
+        {
+            label: "Pâtisserie",
+            value: "Pâtisserie",
+            checked: false,
+            disabled: false,
+        },
+        {
+            label: "Steakhouse",
+            value: "Steakhouse",
+            checked: false,
+            disabled: false,
+        },
+        {
+            label: "Bar",
+            value: "Bar",
+            checked: false,
+            disabled: false,
+        },
+        {
+            label: "Casse-croûte",
+            value: "Casse-croûte",
+            checked: false,
+            disabled: false,
+        },
+        {
+            label: "Boîte à pâtes",
+            value: "Boîte à pâtes",
+            checked: false,
+            disabled: false,
+        },
+        {
+            label: "Restaurant à burgers",
+            value: "Restaurant à burgers",
+            checked: false,
+            disabled: false,
+        },
+    ];
+}
+
+export function regionsArray() {
+    return [
+        {
+            label: "Capitale-nationale",
+            value: "Capitale-nationale",
+            checked: false,
+            disabled: false,
+        },
+        {
+            label: "Centre-du-Québec",
+            value: "Centre-du-Québec",
+            checked: true,
+            disabled: false,
+        },
+        {
+            label: "Montérégie",
+            value: "Montérégie",
+            checked: true,
+            disabled: false,
+        },
+        {
+            label: "Outaouais",
+            value: "Outaouais",
+            checked: false,
+            disabled: false,
+        },
+        {
+            label: "Saguenay-Lac-Saint-Jean",
+            value: "Saguenay-Lac-Saint-Jean",
+            checked: false,
+            disabled: false,
+        },
+        {
+            label: "Gaspésie-Îles-de-la-Madeleine",
+            value: "Gaspésie-Îles-de-la-Madeleine",
+            checked: false,
+            disabled: false,
+        },
+        {
+            label: "Nord-du-Québec",
+            value: "Nord-du-Québec",
+            checked: false,
+            disabled: false,
+        },
+        {
+            label: "Bas-Saint-Laurent",
+            value: "Bas-Saint-Laurent",
+            checked: false,
+            disabled: false,
+        }
+    ];
+}

package/src/sdg/components/DropdownList/_dropdownList.scss

@@ -0,0 +1,73 @@
+@use "../../scss/qc-sdg-lib" as *;
+@use "DropdownListItems/dropdownListItems";
+@use "DropdownListButton/dropdownListButton";
+@use "sass:math";
+
+$min-height: 40;
+$border: 1;
+
+.qc-dropdown-list-margin {
+  margin-bottom: rem(32);
+}
+
+.qc-dropdown-list-root {
+  width: 100%;
+
+  &-xs { max-width: token-value(size, max-width, xs); }
+  &-sm { max-width: token-value(size, max-width, sm); }
+  &-md { max-width: token-value(size, max-width, md); }
+  &-lg { max-width: token-value(size, max-width, lg); }
+  &-xl { max-width: token-value(size, max-width, xl); }
+}
+
+.qc-dropdown-list-container {
+  width: 100%;
+
+  .qc-label {
+    margin-bottom: rem(4);
+  }
+
+  &-xs { max-width: token-value(size, max-width, xs); }
+  &-sm { max-width: token-value(size, max-width, sm); }
+  &-md { max-width: token-value(size, max-width, md); }
+  &-lg { max-width: token-value(size, max-width, lg); }
+  &-xl { max-width: token-value(size, max-width, xl); }
+}
+
+.qc-dropdown-list {
+  display: flex;
+  position: relative;
+  border: rem($border) solid token-value(color, grey, medium);
+  min-height: rem($min-height);
+  background-color: token-value(color, background);
+
+  &.qc-dropdown-list-invalid {
+    border: rem(2) solid token-value(color, red, regular) !important;
+  }
+}
+
+.qc-dropdown-list-search {
+  margin: token-value(spacer, xs);
+
+  * {
+    z-index: 12;
+  }
+}
+
+.qc-dropdown-list-expanded {
+  position: absolute;
+  width: calc(100% + 2px);
+  left: -(rem($border));
+  right: -(rem($border));
+  top: 100%;
+  z-index: 11; // Index supérieur à l'index du mixin qc-formcontrol-box
+
+  background-color: token-value(color, background);
+  border-left: rem($border) solid token-value(color, grey, medium);
+  border-right: rem($border) solid token-value(color, grey, medium);
+  border-bottom: rem($border) solid token-value(color, grey, medium);
+}
+
+.qc-dropdown-list-hidden {
+  display: none;
+}

package/src/sdg/components/DropdownList/_select.html

@@ -0,0 +1,212 @@
+<h3 id="select">Liste déroulante</h3>
+
+<h4>Exemples</h4>
+
+<qc-doc-exemple caption="Exemple de listes déroulantes en sélection dans différents états">
+    <qc-select id="qc-select-single-choice">
+        <label for="select-single-choice">Choix unique</label>
+        <select id="select-single-choice">
+            <option value="" selected>Faire une sélection</option>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+            <option value="4">Option 4</option>
+            <option value="5">Option 5</option>
+            <option value="6">Option 6</option>
+            <option value="7">Option 7</option>
+            <option value="8">Option 8</option>
+            <option value="9">Option 9</option>
+            <option value="10">Option 10</option>
+            <option value="11">Option 11</option>
+            <option value="12">Option 12</option>
+            <option value="13">Option 13</option>
+            <option value="14">Option 14</option>
+            <option value="15">Option 15</option>
+            <option value="16" disabled>Option 16 (désactivée)</option>
+        </select>
+    </qc-select>
+
+    <qc-select id="qc-select-single-choice-search" enable-search>
+        <label for="select-single-choice-search">Choix unique avec recherche</label>
+        <select id="select-single-choice-search">
+            <option value="" selected>Faire une sélection</option>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+            <option value="4">Option 4</option>
+            <option value="5">Option 5</option>
+            <option value="6">Option 6</option>
+            <option value="7">Option 7</option>
+            <option value="8">Option 8</option>
+            <option value="9">Option 9</option>
+            <option value="10">Option 10</option>
+            <option value="11">Option 11</option>
+            <option value="12">Option 12</option>
+            <option value="13">Option 13</option>
+            <option value="14">Option 14</option>
+            <option value="15">Option 15</option>
+            <option value="16">Option 16</option>
+        </select>
+    </qc-select>
+
+    <qc-select id="qc-select-multiple-choices">
+        <label for="select-multiple-choices">Choix multiples</label>
+        <select multiple id="select-multiple-choices">
+            <option value="1">Option 1</option>
+            <option value="2" selected>Option 2</option>
+            <option value="3" selected>Option 3</option>
+            <option value="4" disabled>Option 4 (désactivée)</option>
+        </select>
+    </qc-select>
+
+    <qc-select id="qc-select-disabled">
+        <label for="select-disabled">Désactivé</label>
+        <select id="select-disabled" disabled></select>
+    </qc-select>
+
+    <qc-select id="qc-select-invalid"
+               invalid
+               required >
+        <label for="select-invalid">État invalide</label>
+        <select  id="select-invalid"
+                >
+            <option value=""></option>
+            <option value="1" >Option 1</option>
+            <option value="2">Option 2</option>
+        </select>
+    </qc-select>
+</qc-doc-exemple>
+
+<h4>Documentation technique</h4>
+
+<h5>Attributs</h5>
+<div class="table-overflow">
+    <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>id</td>
+            <td>Texte</td>
+            <td>Chaîne de caractères aléatoire</td>
+            <td>Identifiant de la liste déroulante</td>
+        </tr>
+        <tr>
+            <td>label</td>
+            <td>Contenu HTML</td>
+            <td>""</td>
+            <td>
+                Libellé de la liste déroulante.
+                <br>N.B. : Le contenu de l'élément <code>label</code> en slot est utilisé en priorité.
+            </td>
+        </tr>
+        <tr>
+            <td>width</td>
+            <td>"xs", "sm", "md", "lg", "xl"</td>
+            <td>"md"</td>
+            <td>
+                Largeur de la liste déroulante. Voir <a href="#textfield-sizes">l'illustration des tailles de champ texte</a>
+                pour une indication visuelle des tailles disponibles.
+            </td>
+        </tr>
+        <tr>
+            <td>enable-search</td>
+            <td>na</td>
+            <td>na</td>
+            <td>Affiche un champ de recherche instantanée dans le haut des options de la liste déroulante</td>
+        </tr>
+        <tr>
+            <td>required</td>
+            <td>na</td>
+            <td>na</td>
+            <td>Indique aux internautes que la sélection est obligatoire en ajoutant un astérisque dans le libellé</td>
+        </tr>
+        <tr>
+            <td>disabled</td>
+            <td>na</td>
+            <td>na</td>
+            <td>
+                Désactive la liste déroulante
+                <br>N.B. : L'attribut <code>disabled</code> de l'élément <code>select</code> en slot est utilisé en priorité.
+            </td>
+        </tr>
+        <tr>
+            <td>invalid</td>
+            <td>na</td>
+            <td>na</td>
+            <td>
+                Indique si la liste déroulante est dans un état invalide
+                <br/>NB : <code>invalid</code> prend automatiquement la valeur <code>false</code>
+                dès que l'attribut <code>value</code> est modifié.
+            </td>
+        </tr>
+        <tr>
+            <td>invalid-text</td>
+            <td>Texte</td>
+            <td>Le champ (libellé du champ) est obligatoire. / (libellé du champ) field is required.</td>
+            <td>Message d’erreur à afficher lorsque la liste déroulante est invalide</td>
+        </tr>
+        <tr>
+            <td>placeholder</td>
+            <td>Texte</td>
+            <td>Faire une sélection / Select an option</td>
+            <td>
+                <i>Placeholder</i> de la boîte de la liste déroulante
+                <br> N.B. : Si non précisé, le <i>placeholder</i> prend le texte de la première option avec une valeur vide (<code>value=""</code>).
+                Voir l'exemple de <a href="#qc-select-single-choice">liste déroulante avec choix unique</a>.
+            </td>
+        </tr>
+        <tr>
+            <td>search-placeholder</td>
+            <td>Texte</td>
+            <td>""</td>
+            <td><i>Placeholder</i> du champ de recherche</td>
+        </tr>
+        <tr>
+            <td>no-options-message</td>
+            <td>Contenu HTML</td>
+            <td>Aucun élément/No item</td>
+            <td>Texte indiquant l'absence d'options dans la liste.</td>
+        </tr>
+        <tr>
+            <td>multiple</td>
+            <td>na</td>
+            <td>na</td>
+            <td>
+                Active la sélection multiple.
+                <br>N.B. : L'attribut <code>multiple</code> de l'élément <code>select</code> est utilisé en priorité.
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>
+
+<h5>Propriété JS</h5>
+
+<div class="table-overflow">
+    <table class="qc-table qc-striped component-attributes-description">
+        <thead>
+        <tr>
+            <th>Nom</th>
+            <th>Type</th>
+            <th>Description</th>
+        </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>value</td>
+                <td>Tableau de chaîne de caractères</td>
+                <td>Valeur(s) sélectionnée(s) dans la liste déroulante</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+<h5>Zone d'ajout de contenu HTML</h5>
+<p>Ce composant ne comporte qu'une seule zone d'ajout de contenu.</p>