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

package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItems.svelte

@@ -0,0 +1,110 @@
+<script>
+    import DropdownListItemsSingle from "./DropdownListItemsSingle/DropdownListItemsSingle.svelte";
+    import DropdownListItemsMultiple from "./DropdownListItemsMultiple/DropdownListItemsMultiple.svelte";
+    import {tick} from "svelte";
+    import {Utils} from "../../utils";
+
+    let {
+        id,
+        enableSearch,
+        multiple,
+        items,
+        displayedItems,
+        noOptionsMessage,
+        selectionCallbackSingle = () => {},
+        selectionCallbackMultiple = () => {},
+        handleExitSingle = () => {},
+        handleExitMultiple = () => {},
+        focusOnOuterElement = () => {},
+        handlePrintableCharacter = () => {},
+        placeholder,
+    } = $props()
+
+    const
+        precentRootFontSize = 62.5,
+        remRatio = 0.16
+    ;
+
+    let itemsComponent = $state();
+    let usedHeight = $derived.by(() => {
+        const maxItemsHeight = 336;
+        const searchInputTotalHeight = 56;
+
+        if (enableSearch) {
+            if (displayedItems.length > 7) {
+                return maxItemsHeight - searchInputTotalHeight - 17;
+            }
+            return maxItemsHeight - searchInputTotalHeight;
+        } else {
+            if (displayedItems.length > 8) {
+                return maxItemsHeight - 33;
+            }
+            return maxItemsHeight;
+        }
+    });
+
+    export function focus() {
+        Utils.sleep(5).then(() => {
+            itemsComponent?.focusOnFirstElement();
+        }).catch(console.error);
+    }
+
+    export function focusOnLastElement() {
+        Utils.sleep(5).then(() => {
+            itemsComponent?.focusOnLastElement();
+        }).catch(console.error);
+    }
+
+    export function focusOnFirstMatchingElement(value) {
+        if (itemsComponent && value && value.length > 0) {
+            Utils.sleep(5).then(() => {
+                itemsComponent?.focusOnFirstMatchingElement(value);
+            }).catch(console.error);
+        }
+    }
+</script>
+
+<div
+    id={id}
+    class="qc-dropdown-list-items"
+    tabindex="-1"
+    style="--dropdown-items-height: {usedHeight / (remRatio * precentRootFontSize)}rem;"
+>
+    {#if multiple}
+        <DropdownListItemsMultiple
+            {items}
+            {displayedItems}
+            {noOptionsMessage}
+            passValue={() => {
+                selectionCallbackMultiple();
+            }}
+            handleExit={(key) => handleExitMultiple(key)}
+            focusOnOuterElement={focusOnOuterElement}
+            handlePrintableCharacter={handlePrintableCharacter}
+            bind:this={itemsComponent}
+        />
+    {:else}
+        <DropdownListItemsSingle
+            {items}
+            {displayedItems}
+            {noOptionsMessage}
+            selectionCallback={() => {
+                selectionCallbackSingle();
+            }}
+            handleExit={(key) => handleExitSingle(key)}
+            focusOnOuterElement={focusOnOuterElement}
+            handlePrintableCharacter={handlePrintableCharacter}
+            {placeholder}
+            bind:this={itemsComponent}
+        />
+    {/if}
+
+    <div class="qc-dropdown-list-no-options-container" role="status">
+        {#if displayedItems.length <= 0}
+            {#await tick() then _}
+                <span class="qc-dropdown-list-no-options">{@html noOptionsMessage}</span>
+            {/await}
+        {/if}
+    </div>
+
+</div>

package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsMultiple/DropdownListItemsMultiple.svelte

@@ -0,0 +1,185 @@
+<script>
+    import {Utils} from "../../../utils";
+
+    let {
+        displayedItems,
+        handleExit = () => {},
+        selectionCallback = () => {},
+        focusOnOuterElement = () => {},
+        handlePrintableCharacter = () => {}
+    } = $props();
+
+    const name = Math.random().toString(36).substring(2, 15);
+
+    let displayedItemsElements = $state(new Array(displayedItems.length));
+
+    export function focusOnFirstElement() {
+        if (displayedItems && displayedItems.length > 0) {
+            if (displayedItems[0].disabled) {
+                displayedItemsElements[0].closest("li").focus();
+            } else {
+                displayedItemsElements[0].focus();
+            }
+        }
+    }
+
+    export function focusOnLastElement() {
+        if (displayedItems && displayedItems.length > 0) {
+            if (displayedItems[displayedItems.length - 1].disabled) {
+                displayedItemsElements[displayedItemsElements.length - 1].closest("li").focus();
+            } else {
+                displayedItemsElements[displayedItemsElements.length - 1].focus();
+            }
+        }
+    }
+
+    export function focusOnFirstMatchingElement(value) {
+        if (displayedItemsElements && displayedItemsElements.length > 0) {
+            const foundElement = displayedItemsElements.find(
+                element => element.value.toLowerCase().includes(value.toLowerCase())
+            );
+            if (foundElement) {
+                if (foundElement.disabled) {
+                    foundElement.closest("li").focus();
+                } else {
+                    foundElement.focus();
+                }
+            }
+        }
+    }
+
+    function handleComboKey(event, index) {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (displayedItems.length > 0 && index < displayedItems.length - 1) {
+                if (displayedItems[index + 1].disabled) {
+                    displayedItemsElements[index + 1].closest("li").focus();
+                } else {
+                    displayedItemsElements[index + 1].focus();
+                }
+            }
+        }
+
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (displayedItems.length > 0 && index > 0) {
+                if (displayedItems[index - 1].disabled) {
+                    displayedItemsElements[index - 1].closest("li").focus();
+                } else {
+                    displayedItemsElements[index - 1].focus();
+                }
+            } else {
+                focusOnOuterElement();
+            }
+        }
+
+        if (event.key === "Enter") {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (displayedItems.length > 0 && !displayedItems[index].disabled) {
+                event.target.checked = !event.target.checked;
+                displayedItems[index].checked = event.target.checked;
+            }
+        }
+
+        Utils.sleep(5).then(() => {
+            if (canExit(event, index)) {
+                handleExit(event.key);
+            }
+        }).catch(console.error);
+    }
+
+    function handleKeyDown(event, index) {
+        if (event.key.match(/^\w$/i)) {
+            handlePrintableCharacter(event);
+        } else {
+            handleComboKey(event, index);
+        }
+    }
+
+    function handleLiKeyDown(event, index) {
+        if (event.target.tagName !== "INPUT") {
+            handleKeyDown(event, index);
+
+            if (event.key !== "Tab") {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }
+    }
+
+    function handleLiClick(event, item) {
+        if (event.target.tagName !== "INPUT") {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (!item.disabled) {
+                item.checked = !item.checked;
+            }
+        }
+    }
+
+    function canExit(event, index) {
+        return event.key === "Escape" || (!event.shiftKey && event.key === "Tab" && index === displayedItems.length - 1);
+    }
+
+    function handleChange() {
+        selectionCallback();
+    }
+
+    function itemsHaveIds() {
+        let valid = true;
+        displayedItems.forEach(item => {
+            if (!item.id) {
+                valid = false;
+            }
+        });
+        return valid;
+    }
+</script>
+
+{#if displayedItems.length > 0 && itemsHaveIds()}
+    <ul>
+        {#each displayedItems as item, index (item.id)}
+            <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+            <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+            <!-- Pour conserver la navigation d'un élément <select>, le focus doit pouvoir se faire sur les éléments
+             <li> dont le <Checkbox> interne est disabled.-->
+            <li
+                class={[
+                    "qc-dropdown-list-multiple",
+                    item.disabled ? "qc-disabled" : "qc-dropdown-list-active"
+                ]}
+                tabindex={item.disabled ? "0" : "-1"}
+                onkeydown={(e) => handleLiKeyDown(e, index)}
+                onclick={(e) => handleLiClick(e, item)}
+            >
+
+                <label
+                        class="qc-choicefield-label"
+                        compact
+                        for={item.id + "-checkbox"}
+                >
+                    <input
+                            id={item.id + "-checkbox"}
+                            type="checkbox"
+                            class="qc-choicefield qc-compact"
+                            value={item.value}
+                            {name}
+                            disabled={item.disabled}
+                            bind:checked={item.checked}
+                            bind:this={displayedItemsElements[index]}
+                            onchange={handleChange}
+                            onkeydown={(e) => handleKeyDown(e, index)}
+                    />
+                    <span>{item.label}</span>
+                </label>
+            </li>
+        {/each}
+    </ul>
+{/if}

package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsMultiple/_dropdownListItemsMultiple.scss

@@ -0,0 +1,19 @@
+@use "qc-sdg-lib" as *;
+
+.qc-dropdown-list-multiple {
+  margin: 0;
+
+  label {
+    margin: 0;
+    padding-left: token-value(spacer, xs);
+    padding-right: token-value(spacer, xs);
+    flex-grow: 1;
+    align-items: center;
+  }
+  .qc-choicefield {
+    margin-top: 0 !important;
+    &:focus {
+      outline: none;
+    }
+  }
+}

package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsSingle/DropdownListItemsSingle.svelte

@@ -0,0 +1,136 @@
+<script>
+    import {Utils} from "../../../utils";
+
+    const selectedElementCLass = "qc-dropdown-list-single-selected";
+
+    let {
+        items,
+        displayedItems,
+        placeholder,
+        selectionCallback = () => {},
+        handleExit = () => {},
+        focusOnOuterElement = () => {},
+        handlePrintableCharacter = () => {}
+    } = $props();
+
+    let displayedItemsElements = $state(new Array(displayedItems.length));
+
+    export function focusOnFirstElement() {
+        if (displayedItemsElements && displayedItemsElements.length > 0) {
+            displayedItemsElements[0].focus();
+        }
+    }
+
+    export function focusOnLastElement() {
+        if (displayedItemsElements && displayedItemsElements.length > 0) {
+            displayedItemsElements[displayedItemsElements.length - 1].focus();
+        }
+    }
+
+    export function focusOnFirstMatchingElement(passedValue) {
+        if (displayedItemsElements && displayedItemsElements.length > 0) {
+            const foundElement = displayedItemsElements.find(
+                el => el.dataset.itemValue.toString() === passedValue.toString()
+            );
+            if (foundElement) {
+                foundElement.focus();
+            }
+        }
+    }
+
+    function handleSelection(event, item) {
+        event.preventDefault();
+
+        if (!item.disabled) {
+            items.forEach(item => item.checked = false);
+            items.find(option => option.value === item.value).checked = true;
+            selectionCallback();
+        }
+    }
+
+    function handleMouseUp(event, item) {
+        handleSelection(event, item);
+    }
+
+    function handleComboKey(event, index, item) {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (displayedItemsElements.length > 0 && index < displayedItemsElements.length - 1) {
+                displayedItemsElements[index + 1].focus();
+            }
+        }
+
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (displayedItemsElements.length > 0 && index > 0) {
+                displayedItemsElements[index - 1].focus();
+            } else {
+                focusOnOuterElement();
+            }
+        }
+
+        if (event.key === "Enter" || event.key === " ") {
+            handleSelection(event, item);
+        }
+
+        Utils.sleep(5).then(() => {
+            if (canExit(event, index)) {
+                handleExit(event.key);
+            }
+        }).catch(console.error);
+    }
+
+    function handleKeyDown (event, index, item) {
+        if (event.key.match(/^\w$/i)) {
+            handlePrintableCharacter(event);
+        } else {
+            handleComboKey(event, index, item);
+        }
+    }
+
+    function canExit(event, index) {
+        return event.key === "Escape" || (!event.shiftKey && event.key === "Tab" && index === displayedItems.length - 1);
+    }
+
+    function itemsHaveIds() {
+        let valid = true;
+        displayedItems.forEach(item => {
+            if (!item.id) {
+                valid = false;
+            }
+        });
+        return valid;
+    }
+</script>
+
+{#if displayedItems.length > 0 && itemsHaveIds()}
+    <ul>
+        {#each displayedItems as item, index (item.id)}
+            <li
+                bind:this={displayedItemsElements[index]}
+                id={item.id}
+                class={[
+                    "qc-dropdown-list-single",
+                    item.disabled ? "qc-disabled" : "qc-dropdown-list-active",
+                    item.checked ? selectedElementCLass : "",
+                ]}
+                data-item-value={item.value}
+                tabindex="0"
+                role="option"
+                aria-selected={!!item.checked}
+                onclick={(event) => handleMouseUp(event, item)}
+                onkeydown={(event) => handleKeyDown(event, index, item)}
+            >
+                {#if !item.value && !item.label}
+                    <span class="qc-sr-only">{@html placeholder}</span>
+                {:else}
+                    {@html item.label}
+                {/if}
+            </li>
+        {/each}
+    </ul>
+{/if}

package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsSingle/_dropdownListItemsSingle.scss

@@ -0,0 +1,11 @@
+@use "../../../../scss/qc-sdg-lib" as *;
+
+.qc-dropdown-list-single {
+  padding-left: token-value(spacer, xs);
+  padding-right: token-value(spacer, xs);
+  margin: 0;
+}
+
+li[aria-selected="true"] {
+  background-color: token-value(color, blue, pale) !important;
+}

package/src/sdg/components/DropdownList/DropdownListItems/_dropdownListItems.scss

@@ -0,0 +1,67 @@
+@use "../../../scss/qc-sdg-lib" as *;
+@use "DropdownListItemsMultiple/dropdownListItemsMultiple";
+@use "DropdownListItemsSingle/dropdownListItemsSingle";
+
+$min-height: 40;
+
+.qc-dropdown-list-items {
+  max-height: var(--dropdown-items-height);
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  &::-webkit-scrollbar {
+    width: token-value(spacer, xs);
+    margin-left: token-value(spacer, xs);
+    margin-right: token-value(spacer, xs);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: token-value(color, blue, piv);
+    border-radius: rem(4);
+
+    border: none;
+  }
+
+  @supports not selector(::-webkit-scrollbar) {
+    scrollbar-color: token-value(color, blue, piv) transparent;
+    scrollbar-width: thin;
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+  }
+
+  * {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.qc-dropdown-list-multiple, .qc-dropdown-list-single {
+  display: flex;
+  align-items: center;
+  height: rem($min-height);
+
+  &.qc-dropdown-list-active:hover {
+    background-color: token-value(color, grey, pale);
+    cursor: pointer;
+  }
+
+  &:focus, &:has(input[type=checkbox]:focus) {
+    outline: rem(2) solid token-value(color, blue, regular);
+    outline-offset: -(rem(2));
+  }
+}
+
+.qc-dropdown-list-no-options {
+  display: flex;
+  padding: token-value(spacer, xs);
+  color: token-value(color, grey, medium);
+  height: rem($min-height);
+}

package/src/sdg/components/DropdownList/SelectWC.svelte

@@ -0,0 +1,158 @@
+<svelte:options customElement="{{
+    tag: 'qc-select',
+    props: {
+        id: {attribute: 'id', type: 'String'},
+        label: {attribute: 'label', type: 'String', reflect: true},
+        width: {attribute: 'width', type: 'String'},
+        value: {attribute: 'value', type: 'String', reflect: true},
+        enableSearch: {attribute: 'enable-search', type: 'Boolean'},
+        required: {attribute: 'required', type: 'Boolean'},
+        disabled: {attribute: 'disabled', type: 'Boolean'},
+        invalid: {attribute: 'invalid', type: 'Boolean', reflect: true},
+        invalidText: {attribute: 'invalid-text', type: 'String'},
+        placeholder: {attribute: 'placeholder', type: 'String'},
+        searchPlaceholder: {attribute: 'search-placeholder', type: 'String'},
+        noOptionsMessage: {attribute: 'no-options-message', type: 'String'},
+        multiple: {attribute: 'multiple', type: 'Boolean'}
+    }
+}}"/>
+
+<script>
+    import {onDestroy, onMount} from "svelte";
+    import DropdownList from "./DropdownList.svelte";
+    import {Utils} from "../utils";
+
+    let {
+        invalid = $bindable(false),
+        value = $bindable([]),
+        multiple,
+        disabled,
+        required,
+        label,
+        placeholder,
+        width,
+        ...rest
+    } = $props();
+
+    const availableWidths = ["xs", "sm", "md", "lg", "xl"];
+
+    let selectElement = $state();
+    let items = $state();
+    let labelElement = $state();
+    let observer;
+    let instance = $state();
+    let errorElement = $state();
+    let parentRow = $derived($host().closest(".qc-formfield-row"));
+    let widthClass = $derived.by(() => {
+        if (availableWidths.includes(width)) {
+            return `qc-dropdown-list-root-${width}`;
+        }
+        return `qc-dropdown-list-root-md`;
+    });
+
+    onMount(() => {
+        selectElement = $host().querySelector("select");
+        labelElement = $host().querySelector("label");
+
+        if (labelElement) {
+            label = labelElement.innerHTML;
+        }
+        if (selectElement) {
+            multiple = selectElement.multiple;
+            disabled = selectElement.disabled;
+        }
+
+        setupItemsList();
+        setupObserver();
+    });
+
+    onDestroy(() => {
+        observer?.disconnect();
+    });
+
+    $effect(() => {
+        if (
+            selectElement
+            && selectElement.options
+            && selectElement.options.length > 0
+            && value
+            && value.length > 0
+        ) {
+            for (const option of selectElement.options) {
+                if (value.includes(option.value)) {
+                    option.setAttribute('selected', '');
+                    option.selected = true;
+                } else {
+                    option.removeAttribute('selected');
+                    option.selected = false;
+                }
+            }
+        }
+    });
+
+    $effect(() => {
+       if (parentRow && errorElement) {
+           parentRow.appendChild(errorElement);
+       }
+    });
+
+    $effect(() => {
+       if (widthClass) {
+           $host().classList.add("qc-dropdown-list-root");
+           $host().classList.add(widthClass);
+       }
+    });
+
+    function setupItemsList() {
+        const options = selectElement?.querySelectorAll("option");
+        if (options && options.length > 0) {
+            items = Array.from(options).map(option => ({
+                value: option.value,
+                label: option.label ?? option.innerHTML,
+                checked: option.selected,
+                disabled: option.disabled,
+            }));
+        } else {
+            items = [];
+        }
+    }
+
+    function setupObserver() {
+        if (selectElement) {
+            if (observer) {
+                return;
+            }
+            observer = new MutationObserver(setupItemsList);
+            observer.observe(selectElement, {
+                childList: true,
+                attributes: true,
+                attributeFilter: ["label", "value", "disabled", "selected"]
+            });
+        }
+    }
+
+
+</script>
+
+<div hidden>
+    <slot />
+</div>
+
+<DropdownList
+        {label}
+        ariaLabel={selectElement?.getAttribute("aria-label")}
+        {items}
+        {placeholder}
+        {width}
+        webComponentMode={true}
+        webComponentParentRow={parentRow}
+        bind:value
+        bind:errorElement
+        bind:invalid
+        bind:rootElement={instance}
+        {multiple}
+        {disabled}
+        {required}
+        {...rest}
+/>
+<link rel='stylesheet' href='{Utils.cssPath}'>