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

package/src/sdg/components/Checkbox/updateInput.svelte.js

@@ -0,0 +1,23 @@
+export function updateInput(input, required, invalid, compact, selectionButton, inline, name) {
+    if (!input ) return;
+    if (input.role === "switch") return;
+    let label = input.closest('label');
+    input.classList.add('qc-choicefield')
+    label.classList.add('qc-choicefield-label')
+    input.classList.toggle('qc-selection-button', selectionButton)
+    label.classList.toggle('qc-selection-button', selectionButton)
+    label.classList.toggle('qc-selection-button-inline', inline)
+    input.setAttribute('aria-required', required ? 'true' : "false");
+    input.setAttribute('aria-invalid', invalid ? 'true' : "false")
+    input.classList.toggle('qc-compact', compact ? compact : selectionButton)
+    if (name && !input.hasAttribute('name')) {
+        input.setAttribute('name', name)
+    }
+}
+
+export function onChange(input, setInvalid) {
+    input.addEventListener(
+        'change',
+        () => setInvalid(false)
+    )
+}

package/src/sdg/components/ChoiceGroup/ChoiceGroup.svelte

@@ -0,0 +1,56 @@
+<script>
+    import Fieldset from "../Fieldset/Fieldset.svelte";
+    import {onMount} from "svelte";
+    import {updateInput} from "../Checkbox/updateInput.svelte";
+
+    let {
+        invalid = $bindable(false),
+        invalidText,
+        children,
+        compact = false,
+        selectionButton = false,
+        inline = false,
+        host,
+        name,
+        required,
+        ...restProps
+    } = $props();
+    let fieldsetElement = $state();
+
+    let onchange = e => {
+        if (invalid && e.target.checked) {
+            invalid = false;
+        }
+    }
+    $effect(() => {
+        (host ? host : fieldsetElement)
+            .querySelectorAll('input, .qc-choicefield')
+            .forEach(
+                input =>
+                    updateInput(
+                        input,
+                        required,
+                        invalid,
+                        compact,
+                        selectionButton,
+                        inline,
+                        name)
+            )
+    })
+
+
+</script>
+<Fieldset
+    {required}
+    {compact}
+    {selectionButton}
+    {inline}
+    bind:invalid
+    {invalidText}
+    {onchange}
+    bind:rootElement={fieldsetElement}
+    {...restProps}
+>
+    {@render children()}
+</Fieldset>
+

package/src/sdg/components/ChoiceGroup/ChoiceGroupWC.svelte

@@ -0,0 +1,47 @@
+<svelte:options customElement="{{
+    tag: 'qc-choice-group',
+    props: {
+        name: {attribute: 'name', type: 'String'},
+        legend: {attribute:'legend', type: 'String'},
+        compact: {attribute:'compact', type: 'Boolean'},
+        required: {attribute: 'required', type: 'Boolean'},
+        invalid: {attribute: 'invalid', type: 'Boolean'},
+        invalidText: {attribute: 'invalid-text', type: 'String'},
+        selectionButton: {attribute: 'selection-button', type: 'Boolean'},
+        columnCount: {attribute: 'column-count', type: 'String'},
+        inline: {attribute: 'inline', type: 'Boolean'}
+    }
+}}" />
+
+<script>
+    import ChoiceGroup from "./ChoiceGroup.svelte";
+    import {Utils} from "../utils";
+
+    let {
+        name,
+        legend,
+        compact,
+        required,
+        invalid = $bindable(false),
+        invalidText,
+        selectionButton,
+        columnCount,
+        inline
+    } = $props();
+
+</script>
+<ChoiceGroup
+        {name}
+        {legend}
+        {compact}
+        {required}
+        bind:invalid
+        {invalidText}
+        {selectionButton}
+        {columnCount}
+        {inline}
+        host={$host()}
+>
+    <slot/>
+</ChoiceGroup>
+<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/ChoiceGroup/Test/ChoiceGroupeEmbededTest.svelte

@@ -0,0 +1,261 @@
+<svelte:options customElement={{
+  tag: 'qc-choicegroup-embedded-test'
+}}/>
+<script>
+    
+    import {Utils} from '../../utils.js';
+    import ChoiceGroup from "../ChoiceGroup.svelte";
+    import Checkbox from "../../Checkbox/Checkbox.svelte";
+    let {type} = $props()
+</script>
+
+<ChoiceGroup legend="Boutons de sélection"
+                 selectionButton
+                 columnCount="2"
+                 name="tile-1"
+>
+    <label>
+        <input {type}
+
+               value="1"
+               checked
+        />
+        <span class="qc-tile">
+                <span class="qc-tile-text">Option 1</span>
+                <span class="qc-tile-description">Ceci est une <b>longue</b> description servant à montrer l'affichage des boutons de sélection.</span>
+            </span>
+    </label>
+
+    <label>
+        <input {type}
+
+               value="2"
+        />
+        <span class="qc-tile">
+                <span class="qc-tile-text">Option 2</span>
+            </span>
+    </label>
+    <label>
+        <input {type}
+
+               value="3"
+               disabled
+        />
+        <span class="qc-tile">
+                <span class="qc-tile-text">Option 3 (désactivée)</span>
+            </span>
+    </label>
+</ChoiceGroup>
+
+<ChoiceGroup legend="Boutons de sélection inline"
+                 name="tile-2"
+                 selectionButton
+                 inline
+                 columnCount="2"
+>
+    <label>
+        <input {type}
+
+               value="1"
+               checked
+        />
+        <span class="qc-tile">
+                <span class="qc-tile-text">Option 1</span>
+            </span>
+    </label>
+
+    <label>
+        <input {type}
+
+               value="2"
+        />
+        <span class="qc-tile">
+                <span class="qc-tile-text">Option 2</span>
+            </span>
+    </label>
+    <label>
+        <input {type}
+
+               value="3"
+               disabled
+        />
+        <span class="qc-tile">
+                <span class="qc-tile-text">Option 3 (désactivée)</span>
+            </span>
+    </label>
+</ChoiceGroup>
+
+<div class="qc-row">
+    <div class="qc-col-sm-12 qc-col-lg-6">
+        {#if type === 'checkbox'}
+        <Checkbox>
+            <label>
+                <input {type}
+                       name="consentement-1"
+                       value="oui"
+                />
+                <span >J’accepte les conditions d’utilisation</span>
+            </label>
+        </Checkbox>
+
+        <Checkbox
+                required
+                invalid
+                invalidText="Veuillez accepter les conditions d’utilisation"
+        >
+            <label>
+                <input {type}
+                       name="consentement-2"
+                       value="oui"
+                />
+                <span >J’accepte les conditions d’utilisation</span>
+            </label>
+        </Checkbox>
+        {/if}
+
+        <ChoiceGroup legend="Exemple de base"
+                         name="base-1"
+        >
+            <label>
+                <input {type}
+
+                       value="1"
+                       checked
+                />
+                <span >Option 1</span>
+            </label>
+            <label>
+                <input {type}
+
+                       value="2"
+                />
+                <span >Option 2</span>
+            </label>
+            <label>
+                <input {type}
+
+                       value="3"
+                       disabled
+                />
+                <span >Option 3 (désactivée)</span>
+            </label>
+        </ChoiceGroup>
+
+        <ChoiceGroup legend="Invalid"
+                         name="base-2"
+                         invalid
+                         required
+        >
+            <label>
+                <input {type}
+                       value="1"
+
+                />
+                <span >Option 1</span>
+            </label>
+            <label>
+                <input {type}
+
+                       value="2"
+                />
+                <span >Option 2</span>
+            </label>
+            <label>
+                <input {type}
+                       value="3"
+                       disabled
+                />
+                <span >Option 3 (désactivée)</span>
+            </label>
+        </ChoiceGroup>
+    </div>
+    <div class="qc-col-sm-12 qc-col-lg-6">
+        {#if type === 'checkbox'}
+        <Checkbox compact >
+            <label>
+                <input {type}
+                       name="consentement-compact-1"
+                       value="oui"
+                />
+                <span >J’accepte les conditions d’utilisation</span>
+            </label>
+        </Checkbox>
+
+
+
+        <Checkbox
+                compact
+                invalid
+                required
+                invalidText="Veuillez accepter les conditions d’utilisation"
+        >
+            <label>
+                <input {type}
+                       name="consentement-compact-2"
+                       value="oui"
+                />
+                <span >J’accepte les conditions d’utilisation</span>
+            </label>
+        </Checkbox>
+        {/if}
+
+        <ChoiceGroup legend="Compact"
+                         name="compact-1"
+                         compact
+        >
+            <label>
+                <input {type}
+                       value="1"
+                       checked
+                />
+                <span >Option 1</span>
+            </label>
+            <label>
+                <input {type}
+
+                       value="2"
+                />
+                <span >Option 2</span>
+            </label>
+            <label>
+                <input {type}
+
+                       value="3"
+                       disabled
+                />
+                <span >Option 3 (désactivée)</span>
+            </label>
+        </ChoiceGroup>
+
+        <ChoiceGroup legend="Invalid"
+                         name="compact-2"
+                         compact
+                         invalid
+                         required
+        >
+            <label>
+                <input {type}
+
+                       value="1"
+                />
+                <span >Option 1</span>
+            </label>
+            <label>
+                <input {type}
+
+                       value="2"
+                />
+                <span >Option 2</span>
+            </label>
+            <label>
+                <input {type}
+
+                       value="3"
+                       disabled
+                />
+                <span >Option 3 (désactivée)</span>
+            </label>
+        </ChoiceGroup>
+    </div>
+</div>
+<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/ChoiceGroup/Test/checkboxEmbeddedTest.html

@@ -0,0 +1 @@
+<qc-choicegroup-embedded-test type="checkbox"></qc-choicegroup-embedded-test>

package/src/sdg/components/ChoiceGroup/Test/checkboxTest.html

@@ -0,0 +1,253 @@
+
+<qc-choice-group legend="Boutons de sélection"
+                selection-button
+                column-count="2"
+                 name="tile-1"
+>
+    <label>
+        <input type="checkbox"
+
+               value="1"
+               checked
+        />
+        <span class="qc-tile">
+                <span class="qc-tile-text">Option 1</span>
+                <span class="qc-tile-description">Ceci est une <b>longue</b> description servant à montrer l'affichage des boutons de sélection.</span>
+            </span>
+    </label>
+
+    <label>
+        <input type="checkbox"
+
+               value="2"
+        />
+        <span class="qc-tile">
+                <span class="qc-tile-text">Option 2</span>
+            </span>
+    </label>
+    <label>
+        <input type="checkbox"
+
+               value="3"
+               disabled
+        />
+        <span class="qc-tile">
+                <span class="qc-tile-text">Option 3 (désactivée)</span>
+            </span>
+    </label>
+</qc-choice-group>
+
+<qc-choice-group legend="Boutons de sélection inline"
+                name="tile-2"
+                selection-button
+                inline
+                column-count="2"
+>
+    <label>
+        <input type="checkbox"
+
+               value="1"
+               checked
+        />
+        <span class="qc-tile">
+                <span class="qc-tile-text">Option 1</span>
+            </span>
+    </label>
+
+    <label>
+        <input type="checkbox"
+
+               value="2"
+        />
+        <span class="qc-tile">
+                <span class="qc-tile-text">Option 2</span>
+            </span>
+    </label>
+    <label>
+        <input type="checkbox"
+
+               value="3"
+               disabled
+        />
+        <span class="qc-tile">
+                <span class="qc-tile-text">Option 3 (désactivée)</span>
+            </span>
+    </label>
+</qc-choice-group>
+
+<div class="qc-row">
+    <div class="qc-col-sm-12 qc-col-lg-6">
+        <qc-checkbox>
+            <label>
+                <input type="checkbox"
+                       name="consentement-1"
+                       value="oui"
+                />
+                <span >J’accepte les conditions d’utilisation</span>
+            </label>
+        </qc-checkbox>
+
+        <qc-checkbox
+               required
+               invalid
+               invalid-text="Veuillez accepter les conditions d’utilisation"
+        >
+            <label>
+                <input type="checkbox"
+                       name="consentement-2"
+                       value="oui"
+                />
+                <span>J’accepte les conditions d’utilisation</span>
+            </label>
+        </qc-checkbox>
+
+
+        <qc-choice-group legend="Exemple de base"
+                        name="base-1"
+            >
+            <label>
+                <input type="checkbox"
+
+                       value="1"
+                       checked
+                />
+                <span >Option 1</span>
+            </label>
+            <label>
+                <input type="checkbox"
+
+                       value="2"
+                />
+                <span >Option 2</span>
+            </label>
+            <label>
+                <input type="checkbox"
+
+                       value="3"
+                       disabled
+                />
+                <span >Option 3 (désactivée)</span>
+            </label>
+        </qc-choice-group>
+
+        <qc-choice-group legend="Invalid"
+                        name="base-2"
+                        invalid
+                           required
+        >
+            <label>
+                <input type="checkbox"
+                       value="1"
+
+                />
+                <span >Option 1</span>
+            </label>
+            <label>
+                <input type="checkbox"
+
+                       value="2"
+                />
+                <span >Option 2</span>
+            </label>
+            <label>
+                <input type="checkbox"
+
+                       value="3"
+                       disabled
+                />
+                <span >Option 3 (désactivée)</span>
+            </label>
+        </qc-choice-group>
+    </div>
+    <div class="qc-col-sm-12 qc-col-lg-6">
+        <qc-checkbox compact
+        >
+            <label>
+                <input type="checkbox"
+                       name="consentement-compact-1"
+                       value="oui"
+                />
+                <span >J’accepte les conditions d’utilisation</span>
+            </label>
+        </qc-checkbox>
+
+
+
+        <qc-checkbox
+                compact
+               invalid
+               required
+                invalid-text="Veuillez accepter les conditions d’utilisation"
+        >
+            <label>
+                <input type="checkbox"
+                       name="consentement-compact-2"
+                       value="oui"
+                />
+                <span >J’accepte les conditions d’utilisation</span>
+            </label>
+        </qc-checkbox>
+
+        <qc-choice-group legend="Compact"
+                        name="compact-1"
+                        compact
+        >
+            <label>
+                <input type="checkbox"
+
+                       value="1"
+                       checked
+                />
+                <span >Option 1</span>
+            </label>
+            <label>
+                <input type="checkbox"
+
+                       value="2"
+                />
+                <span >Option 2</span>
+            </label>
+            <label>
+                <input type="checkbox"
+
+                       value="3"
+                       disabled
+                />
+                <span >Option 3 (désactivée)</span>
+            </label>
+        </qc-choice-group>
+
+        <qc-choice-group legend="Invalid"
+                        name="compact-2"
+                        compact
+                        invalid
+                        required
+        >
+            <label>
+                <input type="checkbox"
+
+                       value="1"
+                />
+                <span >Option 1</span>
+            </label>
+            <label>
+                <input type="checkbox"
+
+                       value="2"
+                />
+                <span >Option 2</span>
+            </label>
+            <label>
+                <input type="checkbox"
+
+                       value="3"
+                       disabled
+                />
+                <span >Option 3 (désactivée)</span>
+            </label>
+        </qc-choice-group>
+    </div>
+</div>
+
+
+

package/src/sdg/components/ChoiceGroup/Test/radiosEmbeddedTest.html

@@ -0,0 +1 @@
+<qc-choicegroup-embedded-test type="radio"></qc-choicegroup-embedded-test>