qc-trousse-sdg 1.4.6 → 1.4.7

package/public/js/qc-doc-sdg.js

@@ -77903,6 +77903,29 @@
 	        // Convertit le mot en minuscules.
 	        return word.toLowerCase();
 	    }
+
+	    static now() {
+	        return (new Date()).getTime();
+	    }
+
+	    /**
+	     * Creates a MutationObserver instance with selector nesting check
+	     * @param rootElement
+	     * @param callback
+	     * @param selector
+	     * @returns {MutationObserver | null}
+	     */
+	    static createMutationObserver(rootElement, callback, selector) {
+	        if (!selector) {
+	            selector = rootElement.tagName.toLowerCase();
+	        }
+	        if (rootElement.querySelector(selector)) {
+	            console.warn(`Imbrication d'éléments "${selector}" détectée. Le MutationObserver n'est pas créé`);
+	            return null;
+	        }
+
+	        return new MutationObserver(callback);
+	    }
 	}
 
 	function getCacheBustingParam(cssPath, currentScriptSrc) {
@@ -77949,8 +77972,8 @@
 
 	LabelText[FILENAME] = 'src/sdg/components/Label/LabelText.svelte';
 
-	var root_1$6 = add_locations(from_html(`<span class="qc-required" aria-hidden="true">*</span>`), LabelText[FILENAME], [[4, 26]]);
-	var root$9 = add_locations(from_html(`<!><!>`, 1), LabelText[FILENAME], []);
+	var root_1$6 = add_locations(from_html(`<span class="qc-required" aria-hidden="true">*</span>`), LabelText[FILENAME], [[5, 61]]);
+	var root$9 = add_locations(from_html(`<span class="qc-label-text"><!></span><!>`, 1), LabelText[FILENAME], [[5, 0]]);
 
 	function LabelText($$anchor, $$props) {
 		check_target(new.target);
@@ -77982,17 +78005,19 @@
 		};
 
 		var fragment = root$9();
-		var node = first_child(fragment);
+		var span = first_child(fragment);
+		var node = child(span);
 
 		html$1(node, text);
+		reset(span);
 
-		var node_1 = sibling(node);
+		var node_1 = sibling(span);
 
 		{
 			var consequent = ($$anchor) => {
-				var span = root_1$6();
+				var span_1 = root_1$6();
 
-				append($$anchor, span);
+				append($$anchor, span_1);
 			};
 
 			add_svelte_meta(
@@ -78001,8 +78026,8 @@
 				}),
 				'if',
 				LabelText,
-				4,
-				12
+				5,
+				47
 			);
 		}
 
@@ -78170,7 +78195,7 @@
 
 	Icon[FILENAME] = 'src/sdg/bases/Icon/Icon.svelte';
 
-	var root$7 = add_locations(from_html(`<div></div>`), Icon[FILENAME], [[16, 0]]);
+	var root$7 = add_locations(from_html(`<div></div>`), Icon[FILENAME], [[17, 0]]);
 
 	function Icon($$anchor, $$props) {
 		check_target(new.target);
@@ -78184,6 +78209,7 @@
 			height = prop($$props, 'height', 7, 'auto'),
 			src = prop($$props, 'src', 7, ''),
 			rotate = prop($$props, 'rotate', 7, 0),
+			rootElement = prop($$props, 'rootElement', 15),
 			rest = rest_props(
 				$$props,
 				[
@@ -78198,7 +78224,8 @@
 					'width',
 					'height',
 					'src',
-					'rotate'
+					'rotate',
+					'rootElement'
 				]);
 
 		let attributes = tag(user_derived(() => strict_equals(width(), 'auto') ? { 'data-img-size': size() } : {}), 'attributes');
@@ -78276,6 +78303,15 @@
 				flushSync();
 			},
 
+			get rootElement() {
+				return rootElement();
+			},
+
+			set rootElement($$value) {
+				rootElement($$value);
+				flushSync();
+			},
+
 			...legacy_api()
 		};
 
@@ -78299,6 +78335,7 @@
 			[STYLE]: { '--img-rotate': rotate() && rotate() + "deg" }
 		}));
 
+		bind_this(div, ($$value) => rootElement($$value), () => rootElement());
 		append($$anchor, div);
 
 		return pop($$exports);
@@ -78314,7 +78351,8 @@
 			width: {},
 			height: {},
 			src: {},
-			rotate: {}
+			rotate: {},
+			rootElement: {}
 		},
 		[],
 		[],
@@ -78500,7 +78538,7 @@
 		true
 	);
 
-	function onMountInput(input, setTextFieldRow, setValue, setInvalid) {
+	function onMountInput(input, setTextFieldRow, setValue, setInvalid, setRequired) {
 	    if (!input) return;
 	    if (!input.autocomplete) {
 	        input.autocomplete = "off";
@@ -78509,6 +78547,7 @@
 	        input.id =  Utils.generateId(input.type);
 	    }
 	    setValue(input.value);
+	    setRequired(input.required);
 	    input.addEventListener(
 	        'input',
 	        () => {
@@ -78520,10 +78559,10 @@
 
 	TextField[FILENAME] = 'src/sdg/components/TextField/TextField.svelte';
 
-	var root_3$2 = add_locations(from_html(`<div class="qc-description"><!></div>`), TextField[FILENAME], [[135, 8]]);
-	var root_4$3 = add_locations(from_html(`<div aria-live="polite"><!></div>`), TextField[FILENAME], [[146, 8]]);
+	var root_3$2 = add_locations(from_html(`<div class="qc-description"><!></div>`), TextField[FILENAME], [[141, 8]]);
+	var root_4$3 = add_locations(from_html(`<div aria-live="polite"><!></div>`), TextField[FILENAME], [[152, 8]]);
 	var root_1$4 = add_locations(from_html(`<!> <!> <!> <!> <!>`, 1), TextField[FILENAME], []);
-	var root_6$1 = add_locations(from_html(`<div class="qc-textfield"><!></div>`), TextField[FILENAME], [[170, 4]]);
+	var root_6$1 = add_locations(from_html(`<div class="qc-textfield"><!></div>`), TextField[FILENAME], [[176, 4]]);
 
 	function TextField($$anchor, $$props) {
 		check_target(new.target);
@@ -78573,7 +78612,7 @@
 							}),
 							'component',
 							TextField,
-							125,
+							131,
 							8,
 							{ componentTag: 'Label' }
 						);
@@ -78586,7 +78625,7 @@
 					}),
 					'if',
 					TextField,
-					124,
+					130,
 					4
 				);
 			}
@@ -78611,14 +78650,14 @@
 					}),
 					'if',
 					TextField,
-					134,
+					140,
 					4
 				);
 			}
 
 			var node_3 = sibling(node_1, 2);
 
-			add_svelte_meta(() => snippet(node_3, children), 'render', TextField, 143, 4);
+			add_svelte_meta(() => snippet(node_3, () => children() ?? noop), 'render', TextField, 149, 4);
 
 			var node_4 = sibling(node_3, 2);
 
@@ -78649,7 +78688,7 @@
 					}),
 					'if',
 					TextField,
-					145,
+					151,
 					4
 				);
 			}
@@ -78696,7 +78735,7 @@
 					}),
 					'component',
 					TextField,
-					159,
+					165,
 					4,
 					{ componentTag: 'FormError' }
 				);
@@ -78733,7 +78772,9 @@
 			textFieldRow = tag(state(void 0), 'textFieldRow'),
 			defaultInvalidText = tag(
 				user_derived(() => {
-					if (!maxlengthReached()) return '';
+					if (!maxlengthReached()) {
+						return undefined;
+					}
 
 					return strict_equals(lang, 'fr')
 						? `La limite de caractères du champ ${label()} est dépassée.`
@@ -78746,10 +78787,14 @@
 			if (webComponentMode) return;
 
 			if (!input()) {
-				input(get(rootElement).querySelector('input,textarea'));
+				input(get(rootElement)?.querySelector('input,textarea'));
 			}
 
-			onMountInput(input(), (textFieldRowParam) => set(textFieldRow, textFieldRowParam, true), (valueParam) => value(valueParam), (invalidParam) => invalid(invalidParam));
+			onMountInput(input(), (textFieldRowParam) => set(textFieldRow, textFieldRowParam, true), (valueParam) => value(valueParam), (invalidParam) => invalid(invalidParam), (requiredParam) => {
+				if (requiredParam) {
+					required(requiredParam);
+				}
+			});
 		});
 
 		user_effect(() => {
@@ -78982,14 +79027,14 @@
 
 		{
 			var consequent_3 = ($$anchor) => {
-				add_svelte_meta(() => textfield($$anchor), 'render', TextField, 168, 4);
+				add_svelte_meta(() => textfield($$anchor), 'render', TextField, 174, 4);
 			};
 
 			var alternate = ($$anchor) => {
 				var div_2 = root_6$1();
 				var node_8 = child(div_2);
 
-				add_svelte_meta(() => textfield(node_8), 'render', TextField, 175, 8);
+				add_svelte_meta(() => textfield(node_8), 'render', TextField, 181, 8);
 				reset(div_2);
 				bind_this(div_2, ($$value) => set(rootElement, $$value), () => get(rootElement));
 
@@ -79007,7 +79052,7 @@
 				}),
 				'if',
 				TextField,
-				167,
+				173,
 				0
 			);
 		}
@@ -79086,8 +79131,8 @@
 
 	Checkbox[FILENAME] = 'src/sdg/components/Checkbox/Checkbox.svelte';
 
-	var root_2$6 = add_locations(from_html(`<span class="qc-required" aria-hidden="true">*</span>`), Checkbox[FILENAME], [[56, 4]]);
-	var root$6 = add_locations(from_html(`<div><!> <!> <!></div>`), Checkbox[FILENAME], [[64, 4]]);
+	var root_2$6 = add_locations(from_html(`<span class="qc-required" aria-hidden="true">*</span>`), Checkbox[FILENAME], [[57, 4]]);
+	var root$6 = add_locations(from_html(`<div><!> <!> <!></div>`), Checkbox[FILENAME], [[65, 4]]);
 
 	function Checkbox($$anchor, $$props) {
 		check_target(new.target);
@@ -79113,7 +79158,7 @@
 					}),
 					'if',
 					Checkbox,
-					55,
+					56,
 					4
 				);
 			}
@@ -79159,10 +79204,11 @@
 		user_effect((_) => updateChoiceInput(input(), required(), invalid(), compact(), false, false));
 
 		user_effect(() => {
-			if (!required()) return;
-			if (!labelElement()) return;
+			if (required() && get(label) && requiredSpan()) {
+				const textSpan = labelElement().querySelector('span');
 
-			labelElement().appendChild(requiredSpan());
+				textSpan.appendChild(requiredSpan());
+			}
 		});
 
 		var $$exports = {
@@ -79298,11 +79344,11 @@
 		var div = root$6();
 		var node_1 = child(div);
 
-		add_svelte_meta(() => requiredSpanSnippet(node_1), 'render', Checkbox, 71, 8);
+		add_svelte_meta(() => requiredSpanSnippet(node_1), 'render', Checkbox, 72, 8);
 
 		var node_2 = sibling(node_1, 2);
 
-		add_svelte_meta(() => snippet(node_2, () => children() ?? noop), 'render', Checkbox, 72, 8);
+		add_svelte_meta(() => snippet(node_2, () => children() ?? noop), 'render', Checkbox, 73, 8);
 
 		var node_3 = sibling(node_2, 2);
 
@@ -79322,7 +79368,7 @@
 			}),
 			'component',
 			Checkbox,
-			73,
+			74,
 			8,
 			{ componentTag: 'FormError' }
 		);
@@ -79747,9 +79793,9 @@
 
 	DropdownListItemsSingle[FILENAME] = 'src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsSingle/DropdownListItemsSingle.svelte';
 
-	var root_3$1 = add_locations(from_html(`<span class="qc-sr-only"><!></span>`), DropdownListItemsSingle[FILENAME], [[129, 20]]);
-	var root_2$5 = add_locations(from_html(`<li tabindex="0" role="option"><!></li>`), DropdownListItemsSingle[FILENAME], [[113, 12]]);
-	var root_1$3 = add_locations(from_html(`<ul></ul>`), DropdownListItemsSingle[FILENAME], [[111, 4]]);
+	var root_3$1 = add_locations(from_html(`<span class="qc-sr-only"><!></span>`), DropdownListItemsSingle[FILENAME], [[130, 20]]);
+	var root_2$5 = add_locations(from_html(`<li tabindex="0" role="option"><!></li>`), DropdownListItemsSingle[FILENAME], [[114, 12]]);
+	var root_1$3 = add_locations(from_html(`<ul></ul>`), DropdownListItemsSingle[FILENAME], [[112, 4]]);
 
 	function DropdownListItemsSingle($$anchor, $$props) {
 		check_target(new.target);
@@ -79793,7 +79839,7 @@
 			event.preventDefault();
 
 			if (!item.disabled) {
-				items().forEach((item) => assign(item, 'checked', false, 'src/​sdg/​components/​DropdownList/​DropdownListItems/​DropdownListItemsSingle/​DropdownListItemsSingle.svelte:45:34'));
+				items().forEach((item) => assign(item, 'checked', false, 'src/​sdg/​components/​DropdownList/​DropdownListItems/​DropdownListItemsSingle/​DropdownListItemsSingle.svelte:46:34'));
 				items().find((option) => strict_equals(option.value, item.value)).checked = true;
 				selectionCallback()();
 			}
@@ -79828,7 +79874,7 @@
 				handleSelection(event, item);
 			}
 
-			Utils.sleep(5).then(() => {
+			tick().then(() => {
 				if (canExit(event, index)) {
 					handleExit()(event.key);
 				}
@@ -79980,13 +80026,13 @@
 								}),
 								'if',
 								DropdownListItemsSingle,
-								128,
+								129,
 								16
 							);
 						}
 
 						reset(li);
-						validate_binding('bind:this={displayedItemsElements[index]}', [], () => get(displayedItemsElements), () => get(index), 114, 16);
+						validate_binding('bind:this={displayedItemsElements[index]}', [], () => get(displayedItemsElements), () => get(index), 115, 16);
 						bind_this(li, ($$value, index) => get(displayedItemsElements)[index] = $$value, (index) => get(displayedItemsElements)?.[index], () => [get(index)]);
 
 						template_effect(() => {
@@ -80006,7 +80052,7 @@
 					}),
 					'each',
 					DropdownListItemsSingle,
-					112,
+					113,
 					8
 				);
 
@@ -80020,7 +80066,7 @@
 				}),
 				'if',
 				DropdownListItemsSingle,
-				110,
+				111,
 				0
 			);
 		}
@@ -80054,8 +80100,8 @@
 
 	DropdownListItemsMultiple[FILENAME] = 'src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsMultiple/DropdownListItemsMultiple.svelte';
 
-	var root_2$4 = add_locations(from_html(`<li><label class="qc-choicefield-label" compact=""><input type="checkbox" class="qc-choicefield qc-compact"/> <span> </span></label></li>`), DropdownListItemsMultiple[FILENAME], [[153, 12, [[163, 16, [[168, 20], [180, 20]]]]]]);
-	var root_1$2 = add_locations(from_html(`<ul></ul>`), DropdownListItemsMultiple[FILENAME], [[147, 4]]);
+	var root_2$4 = add_locations(from_html(`<li><label class="qc-choicefield-label" compact=""><input type="checkbox" class="qc-choicefield qc-compact"/> <span> </span></label></li>`), DropdownListItemsMultiple[FILENAME], [[154, 12, [[164, 16, [[169, 20], [181, 20]]]]]]);
+	var root_1$2 = add_locations(from_html(`<ul></ul>`), DropdownListItemsMultiple[FILENAME], [[148, 4]]);
 
 	function DropdownListItemsMultiple($$anchor, $$props) {
 		check_target(new.target);
@@ -80141,11 +80187,11 @@
 
 				if (displayedItems().length > 0 && !displayedItems()[index].disabled) {
 					event.target.checked = !event.target.checked;
-					$$ownership_validator.mutation('displayedItems', ['displayedItems', index, 'checked'], displayedItems()[index].checked = event.target.checked, 86, 16);
+					$$ownership_validator.mutation('displayedItems', ['displayedItems', index, 'checked'], displayedItems()[index].checked = event.target.checked, 87, 16);
 				}
 			}
 
-			Utils.sleep(5).then(() => {
+			tick().then(() => {
 				if (canExit(event, index)) {
 					handleExit()(event.key);
 				}
@@ -80285,8 +80331,8 @@
 						remove_input_defaults(input);
 						input.__change = handleChange;
 						input.__keydown = (e) => handleKeyDown(e, get(index));
-						validate_binding('bind:checked={item.checked}', [], () => get(item), () => 'checked', 175, 28);
-						validate_binding('bind:this={displayedItemsElements[index]}', [], () => get(displayedItemsElements), () => get(index), 176, 28);
+						validate_binding('bind:checked={item.checked}', [], () => get(item), () => 'checked', 176, 28);
+						validate_binding('bind:this={displayedItemsElements[index]}', [], () => get(displayedItemsElements), () => get(index), 177, 28);
 						bind_this(input, ($$value, index) => get(displayedItemsElements)[index] = $$value, (index) => get(displayedItemsElements)?.[index], () => [get(index)]);
 
 						var input_value;
@@ -80321,7 +80367,7 @@
 					}),
 					'each',
 					DropdownListItemsMultiple,
-					148,
+					149,
 					8
 				);
 
@@ -80335,7 +80381,7 @@
 				}),
 				'if',
 				DropdownListItemsMultiple,
-				146,
+				147,
 				0
 			);
 		}
@@ -80367,15 +80413,14 @@
 
 	DropdownListItems[FILENAME] = 'src/sdg/components/DropdownList/DropdownListItems/DropdownListItems.svelte';
 
-	var root_4$2 = add_locations(from_html(`<span class="qc-dropdown-list-no-options"><!></span>`), DropdownListItems[FILENAME], [[100, 16]]);
-	var root$3 = add_locations(from_html(`<div class="qc-dropdown-list-items" tabindex="-1"><!> <div class="qc-dropdown-list-no-options-container" role="status"><!></div></div>`), DropdownListItems[FILENAME], [[62, 0, [[97, 4]]]]);
+	var root_4$2 = add_locations(from_html(`<span class="qc-dropdown-list-no-options"><!></span>`), DropdownListItems[FILENAME], [[82, 16]]);
+	var root$3 = add_locations(from_html(`<div class="qc-dropdown-list-items" tabindex="-1"><!> <div class="qc-dropdown-list-no-options-container" role="status"><!></div></div>`), DropdownListItems[FILENAME], [[45, 0, [[79, 4]]]]);
 
 	function DropdownListItems($$anchor, $$props) {
 		check_target(new.target);
 		push($$props, true);
 
 		let id = prop($$props, 'id', 7),
-			enableSearch = prop($$props, 'enableSearch', 7),
 			multiple = prop($$props, 'multiple', 7),
 			items = prop($$props, 'items', 7),
 			displayedItems = prop($$props, 'displayedItems', 7),
@@ -80390,43 +80435,21 @@
 
 		let itemsComponent = tag(state(void 0), 'itemsComponent');
 
-		let usedHeight = tag(
-			user_derived(() => {
-				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;
-				}
-			}),
-			'usedHeight'
-		);
-
 		function focus() {
-			Utils.sleep(5).then(() => {
+			tick().then(() => {
 				get(itemsComponent)?.focusOnFirstElement();
 			}).catch(console.error);
 		}
 
 		function focusOnLastElement() {
-			Utils.sleep(5).then(() => {
+			tick().then(() => {
 				get(itemsComponent)?.focusOnLastElement();
 			}).catch(console.error);
 		}
 
 		function focusOnFirstMatchingElement(value) {
 			if (get(itemsComponent) && value && value.length > 0) {
-				Utils.sleep(5).then(() => {
+				tick().then(() => {
 					get(itemsComponent)?.focusOnFirstMatchingElement(value);
 				}).catch(console.error);
 			}
@@ -80454,15 +80477,6 @@
 				flushSync();
 			},
 
-			get enableSearch() {
-				return enableSearch();
-			},
-
-			set enableSearch($$value) {
-				enableSearch($$value);
-				flushSync();
-			},
-
 			get multiple() {
 				return multiple();
 			},
@@ -80604,7 +80618,7 @@
 					),
 					'component',
 					DropdownListItems,
-					69,
+					51,
 					8,
 					{ componentTag: 'DropdownListItemsMultiple' }
 				);
@@ -80649,7 +80663,7 @@
 					),
 					'component',
 					DropdownListItems,
-					82,
+					64,
 					8,
 					{ componentTag: 'DropdownListItemsSingle' }
 				);
@@ -80661,7 +80675,7 @@
 				}),
 				'if',
 				DropdownListItems,
-				68,
+				50,
 				4
 			);
 		}
@@ -80685,7 +80699,7 @@
 					}),
 					'await',
 					DropdownListItems,
-					99,
+					81,
 					12
 				);
 
@@ -80698,19 +80712,14 @@
 				}),
 				'if',
 				DropdownListItems,
-				98,
+				80,
 				8
 			);
 		}
 
 		reset(div_1);
 		reset(div);
-
-		template_effect(() => {
-			set_attribute(div, 'id', id());
-			set_style(div, `--dropdown-items-height: ${get(usedHeight) ?? ''};`);
-		});
-
+		template_effect(() => set_attribute(div, 'id', id()));
 		append($$anchor, div);
 
 		return pop($$exports);
@@ -80720,7 +80729,6 @@
 		DropdownListItems,
 		{
 			id: {},
-			enableSearch: {},
 			multiple: {},
 			items: {},
 			displayedItems: {},
@@ -80740,9 +80748,9 @@
 
 	DropdownListButton[FILENAME] = 'src/sdg/components/DropdownList/DropdownListButton/DropdownListButton.svelte';
 
-	var root_1$1 = add_locations(from_html(`<span class="qc-dropdown-choice"><!></span>`), DropdownListButton[FILENAME], [[29, 8]]);
-	var root_2$3 = add_locations(from_html(`<span class="qc-dropdown-placeholder"><!></span>`), DropdownListButton[FILENAME], [[31, 8]]);
-	var root$2 = add_locations(from_html(`<button><!> <span><!></span></button>`), DropdownListButton[FILENAME], [[19, 0, [[34, 4]]]]);
+	var root_1$1 = add_locations(from_html(`<span class="qc-dropdown-choice"><!></span>`), DropdownListButton[FILENAME], [[25, 8]]);
+	var root_2$3 = add_locations(from_html(`<span class="qc-dropdown-placeholder"><!></span>`), DropdownListButton[FILENAME], [[27, 8]]);
+	var root$2 = add_locations(from_html(`<button><!> <span><!></span></button>`), DropdownListButton[FILENAME], [[15, 0, [[30, 4]]]]);
 
 	function DropdownListButton($$anchor, $$props) {
 		check_target(new.target);
@@ -80753,6 +80761,7 @@
 			disabled = prop($$props, 'disabled', 7),
 			selectedOptionsText = prop($$props, 'selectedOptionsText', 7, ""),
 			placeholder = prop($$props, 'placeholder', 7),
+			buttonElement = prop($$props, 'buttonElement', 15),
 			rest = rest_props(
 				$$props,
 				[
@@ -80764,20 +80773,11 @@
 					'expanded',
 					'disabled',
 					'selectedOptionsText',
-					'placeholder'
+					'placeholder',
+					'buttonElement'
 				]);
 
-		let button;
-
-		function focus() {
-			button?.focus();
-		}
-
 		var $$exports = {
-			get focus() {
-				return focus;
-			},
-
 			get inputId() {
 				return inputId();
 			},
@@ -80823,12 +80823,21 @@
 				flushSync();
 			},
 
+			get buttonElement() {
+				return buttonElement();
+			},
+
+			set buttonElement($$value) {
+				buttonElement($$value);
+				flushSync();
+			},
+
 			...legacy_api()
 		};
 
-		var button_1 = root$2();
+		var button = root$2();
 
-		attribute_effect(button_1, () => ({
+		attribute_effect(button, () => ({
 			type: 'button',
 			id: inputId(),
 			disabled: disabled(),
@@ -80837,7 +80846,7 @@
 			...rest
 		}));
 
-		var node = child(button_1);
+		var node = child(button);
 
 		{
 			var consequent = ($$anchor) => {
@@ -80864,7 +80873,7 @@
 				}),
 				'if',
 				DropdownListButton,
-				28,
+				24,
 				4
 			);
 		}
@@ -80895,16 +80904,16 @@
 				}),
 				'component',
 				DropdownListButton,
-				35,
+				31,
 				8,
 				{ componentTag: 'Icon' }
 			);
 		}
 
 		reset(span_2);
-		reset(button_1);
-		bind_this(button_1, ($$value) => button = $$value, () => button);
-		append($$anchor, button_1);
+		reset(button);
+		bind_this(button, ($$value) => buttonElement($$value), () => buttonElement());
+		append($$anchor, button);
 
 		return pop($$exports);
 	}
@@ -80916,18 +80925,19 @@
 			expanded: {},
 			disabled: {},
 			selectedOptionsText: {},
-			placeholder: {}
+			placeholder: {},
+			buttonElement: {}
 		},
 		[],
-		['focus'],
+		[],
 		true
 	);
 
 	DropdownList[FILENAME] = 'src/sdg/components/DropdownList/DropdownList.svelte';
 
-	var root_2$2 = add_locations(from_html(`<div class="qc-dropdown-list-search"><!></div>`), DropdownList[FILENAME], [[334, 20]]);
-	var root_3 = add_locations(from_html(`<span> </span>`), DropdownList[FILENAME], [[376, 24]]);
-	var root$1 = add_locations(from_html(`<div><div><!> <div tabindex="-1"><!> <div class="qc-dropdown-list-expanded" tabindex="-1" role="listbox"><!> <!> <div role="status" class="qc-sr-only"><!></div></div></div></div> <!></div>`), DropdownList[FILENAME], [[273, 0, [[278, 4, [[297, 8, [[325, 12, [[374, 16]]]]]]]]]]);
+	var root_2$2 = add_locations(from_html(`<div class="qc-dropdown-list-search"><!></div>`), DropdownList[FILENAME], [[386, 20]]);
+	var root_3 = add_locations(from_html(`<span> </span>`), DropdownList[FILENAME], [[427, 24]]);
+	var root$1 = add_locations(from_html(`<div><div><!> <div tabindex="-1"><!> <div class="qc-dropdown-list-expanded" tabindex="-1" role="listbox"><!> <!> <div role="status" class="qc-sr-only"><!></div></div></div></div> <!></div>`), DropdownList[FILENAME], [[316, 0, [[321, 4, [[340, 8, [[369, 12, [[425, 16]]]]]]]]]]);
 
 	function DropdownList($$anchor, $$props) {
 		check_target(new.target);
@@ -80953,7 +80963,8 @@
 			multiple = prop($$props, 'multiple', 7, false),
 			rootElement = prop($$props, 'rootElement', 15),
 			errorElement = prop($$props, 'errorElement', 15),
-			webComponentMode = prop($$props, 'webComponentMode', 7, false);
+			webComponentMode = prop($$props, 'webComponentMode', 7, false),
+			expanded = prop($$props, 'expanded', 15, false);
 
 		const defaultPlaceholder = strict_equals(lang, "fr") ? "Faire une sélection" : "Select an option",
 			inputId = `${id()}-input`,
@@ -80961,12 +80972,14 @@
 			itemsId = `${id()}-items`,
 			labelId = `${id()}-label`,
 			errorId = `${id()}-error`,
-			availableWidths = ["xs", "sm", "md", "lg", "xl"];
+			availableWidths = ["xs", "sm", "md", "lg", "xl"],
+			buttonHeight = 40;
 
 		let instance = tag(state(void 0), 'instance'),
 			parentRow = tag(user_derived(() => get(instance)?.closest(".qc-formfield-row")), 'parentRow'),
 			button = tag(state(void 0), 'button'),
 			searchInput = tag(state(void 0), 'searchInput'),
+			popup = tag(state(void 0), 'popup'),
 			dropdownItems = tag(state(void 0), 'dropdownItems'),
 			selectedItems = tag(user_derived(() => items().filter((item) => item.checked) ?? []), 'selectedItems'),
 			selectedOptionsText = tag(
@@ -80992,7 +81005,6 @@
 				'selectedOptionsText'
 			),
 			previousValue = tag(state(proxy(value())), 'previousValue'),
-			expanded = tag(state(false), 'expanded'),
 			searchText = tag(state(""), 'searchText'),
 			hiddenSearchText = tag(state(""), 'hiddenSearchText'),
 			displayedItems = tag(state(proxy(items())), 'displayedItems'),
@@ -81009,8 +81021,6 @@
 			),
 			widthClass = tag(
 				user_derived(() => {
-					webComponentMode() ? "container" : "root";
-
 					if (availableWidths.includes(width())) {
 						return `qc-dropdown-list-${width()}`;
 					}
@@ -81032,7 +81042,32 @@
 					return "";
 				}),
 				'srItemsCountText'
-			);
+			),
+			buttonElementYPosition = tag(state(0), 'buttonElementYPosition'),
+			usedHeight = tag(
+				user_derived(() => {
+					const maxItemsHeight = 336;
+					const searchInputTotalHeight = 56;
+
+					if (enableSearch()) {
+						if (get(displayedItems).length > 7) {
+							return maxItemsHeight - searchInputTotalHeight - 17;
+						}
+
+						return maxItemsHeight - searchInputTotalHeight;
+					} else {
+						if (get(displayedItems).length > 8) {
+							return maxItemsHeight - 33;
+						}
+
+						return maxItemsHeight;
+					}
+				}),
+				'usedHeight'
+			),
+			topOffset = tag(state(0), 'topOffset'),
+			popupTopBorderThickness = tag(user_derived(() => get(topOffset) && get(topOffset) < 0 ? 1 : 0), 'popupTopBorderThickness'),
+			popupBottomBorderThickness = tag(user_derived(() => get(topOffset) && get(topOffset) >= 0 ? 1 : 0), 'popupBottomBorderThickness');
 
 		function focusOnSelectedOption(value) {
 			if (get(displayedItems).length > 0) {
@@ -81046,28 +81081,28 @@
 
 		function handleDropdownButtonClick(event) {
 			event.preventDefault();
-			set(expanded, !get(expanded));
+			expanded(!expanded());
 		}
 
 		function handleOuterEvent() {
 			if (!Utils.componentIsActive(get(instance))) {
-				set(expanded, false);
+				expanded(false);
 			}
 		}
 
 		function handleTab(event) {
 			// Le changement de focus a lieu après le lancement de l'événement clavier.
 			// Il faut donc faire un court sleep pour avoir le nouvel élément en focus.
-			Utils.sleep(5).then(() => {
+			tick().then(() => {
 				if (strict_equals(event.key, "Tab") && !Utils.componentIsActive(get(instance))) {
-					set(expanded, false);
+					expanded(false);
 				}
 			}).catch(console.error);
 		}
 
 		function handleEscape(event) {
 			if (strict_equals(event.key, "Escape")) {
-				set(expanded, false);
+				expanded(false);
 			}
 		}
 
@@ -81081,7 +81116,7 @@
 		function handleArrowDown(event, targetComponent) {
 			if (strict_equals(event.key, "ArrowDown") && targetComponent) {
 				event.preventDefault();
-				set(expanded, true);
+				expanded(true);
 				targetComponent.focus();
 			}
 		}
@@ -81093,10 +81128,10 @@
 			if (strict_equals(event.key, "ArrowDown")) {
 				event.preventDefault();
 
-				if (get(expanded)) {
+				if (expanded()) {
 					targetComponent.focus();
 				} else {
-					set(expanded, true);
+					expanded(true);
 					focusOnSelectedOption(value());
 				}
 			}
@@ -81104,7 +81139,7 @@
 			if (strict_equals(event.key, "ArrowUp")) {
 				event.preventDefault();
 
-				if (get(expanded)) {
+				if (expanded()) {
 					get(dropdownItems)?.focusOnLastElement();
 				}
 			}
@@ -81116,7 +81151,7 @@
 			} else {
 				set(hiddenSearchText, get(hiddenSearchText) + event.key);
 
-				if (get(hiddenSearchText).length > 0 && get(expanded)) {
+				if (get(hiddenSearchText).length > 0 && expanded()) {
 					get(dropdownItems)?.focusOnFirstMatchingElement(get(hiddenSearchText));
 				}
 			}
@@ -81131,7 +81166,7 @@
 		}
 
 		function closeDropdown(key) {
-			set(expanded, false);
+			expanded(false);
 			set(hiddenSearchText, "");
 
 			if (strict_equals(key, "Escape") && get(button)) {
@@ -81157,12 +81192,13 @@
 
 		user_effect(() => {
 			if (strict_equals(get(previousValue)?.toString(), value()?.toString(), false)) {
+				set(previousValue, value(), true);
 				invalid(false);
 			}
 		});
 
 		user_effect(() => {
-			if (!get(expanded)) {
+			if (!expanded()) {
 				set(hiddenSearchText, "");
 				set(searchText, "");
 			}
@@ -81202,10 +81238,34 @@
 			placeholder(strict_equals(optionWithEmptyValue.label, "", false) ? optionWithEmptyValue.label : defaultPlaceholder);
 		});
 
+		user_effect(() => {
+			if (expanded()) {
+				const borderThickness = 2 * (invalid() ? 2 : 1);
+
+				const popupHeight = get(popup)
+					? get(popup).getBoundingClientRect().height
+					: get(usedHeight);
+
+				set(topOffset, get(buttonElementYPosition) + buttonHeight > innerHeight - popupHeight ? -popupHeight : buttonHeight - borderThickness, true);
+			}
+		});
+
 		function findOptionWithEmptyValue() {
 			return items()?.find((item) => strict_equals(item.value, "") || strict_equals(item.value, null) || strict_equals(item.value, undefined));
 		}
 
+		function setRemainingBottomHeight() {
+			if (!get(button)) {
+				return;
+			}
+
+			set(buttonElementYPosition, get(button).getBoundingClientRect().y, true);
+		}
+
+		onMount(() => {
+			setRemainingBottomHeight();
+		});
+
 		var $$exports = {
 			get id() {
 				return id();
@@ -81369,6 +81429,15 @@
 				flushSync();
 			},
 
+			get expanded() {
+				return expanded();
+			},
+
+			set expanded($$value = false) {
+				expanded($$value);
+				flushSync();
+			},
+
 			...legacy_api()
 		};
 
@@ -81376,6 +81445,7 @@
 
 		event('click', $document.body, handleOuterEvent);
 		event('keydown', $document.body, handleTab);
+		event('scroll', $window, setRemainingBottomHeight);
 
 		var div_1 = child(div);
 
@@ -81416,7 +81486,7 @@
 					}),
 					'component',
 					DropdownList,
-					284,
+					327,
 					12,
 					{ componentTag: 'Label' }
 				);
@@ -81428,7 +81498,7 @@
 				}),
 				'if',
 				DropdownList,
-				283,
+				326,
 				8
 			);
 		}
@@ -81437,62 +81507,70 @@
 		var node_1 = child(div_2);
 
 		add_svelte_meta(
-			() => bind_this(
-				DropdownListButton(node_1, {
-					get inputId() {
-						return inputId;
-					},
+			() => DropdownListButton(node_1, {
+				get inputId() {
+					return inputId;
+				},
 
-					get disabled() {
-						return disabled();
-					},
+				get disabled() {
+					return disabled();
+				},
 
-					get expanded() {
-						return get(expanded);
-					},
+				get expanded() {
+					return expanded();
+				},
 
-					get 'aria-labelledby'() {
-						return labelId;
-					},
+				get 'aria-labelledby'() {
+					return labelId;
+				},
 
-					get 'aria-required'() {
-						return required();
-					},
+				get 'aria-required'() {
+					return required();
+				},
 
-					get 'aria-expanded'() {
-						return get(expanded);
-					},
+				get 'aria-expanded'() {
+					return expanded();
+				},
 
-					'aria-haspopup': 'listbox',
+				'aria-haspopup': 'listbox',
 
-					get 'aria-controls'() {
-						return itemsId;
-					},
+				get 'aria-controls'() {
+					return itemsId;
+				},
 
-					get 'aria-invalid'() {
-						return invalid();
-					},
+				get 'aria-invalid'() {
+					return invalid();
+				},
 
-					get selectedOptionsText() {
-						return get(selectedOptionsText);
-					},
+				get selectedOptionsText() {
+					return get(selectedOptionsText);
+				},
 
-					get placeholder() {
-						return placeholder();
-					},
+				get placeholder() {
+					return placeholder();
+				},
 
-					onclick: handleDropdownButtonClick,
+				get usedHeight() {
+					return get(usedHeight);
+				},
 
-					onkeydown: (e) => {
-						handleButtonKeyDown(e, enableSearch() ? get(searchInput) : get(dropdownItems));
-					}
-				}),
-				($$value) => set(button, $$value, true),
-				() => get(button)
-			),
+				onclick: handleDropdownButtonClick,
+
+				onkeydown: (e) => {
+					handleButtonKeyDown(e, enableSearch() ? get(searchInput) : get(dropdownItems));
+				},
+
+				get buttonElement() {
+					return get(button);
+				},
+
+				set buttonElement($$value) {
+					set(button, $$value, true);
+				}
+			}),
 			'component',
 			DropdownList,
-			306,
+			349,
 			12,
 			{ componentTag: 'DropdownListButton' }
 		);
@@ -81547,7 +81625,7 @@
 						),
 						'component',
 						DropdownList,
-						335,
+						387,
 						24,
 						{ componentTag: 'SearchInput' }
 					);
@@ -81563,7 +81641,7 @@
 				}),
 				'if',
 				DropdownList,
-				333,
+				385,
 				16
 			);
 		}
@@ -81580,10 +81658,6 @@
 							return itemsId;
 						},
 
-						get enableSearch() {
-							return enableSearch();
-						},
-
 						get placeholder() {
 							return placeholder();
 						},
@@ -81627,7 +81701,7 @@
 				),
 				'component',
 				DropdownList,
-				353,
+				405,
 				16,
 				{ componentTag: 'DropdownListItems' }
 			);
@@ -81647,12 +81721,13 @@
 			}),
 			'key',
 			DropdownList,
-			375,
+			426,
 			20
 		);
 
 		reset(div_5);
 		reset(div_3);
+		bind_this(div_3, ($$value) => set(popup, $$value), () => get(popup));
 		reset(div_2);
 		bind_this(div_2, ($$value) => set(instance, $$value), () => get(instance));
 		reset(div_1);
@@ -81694,7 +81769,7 @@
 				}),
 				'component',
 				DropdownList,
-				384,
+				435,
 				4,
 				{ componentTag: 'FormError' }
 			);
@@ -81713,7 +81788,16 @@
 			]));
 
 			set_attribute(div_3, 'id', popupId);
-			set_attribute(div_3, 'hidden', !get(expanded));
+
+			set_style(div_3, `
+                    --dropdown-items-top-offset: ${get(topOffset)};
+                    --dropdown-items-height: ${get(usedHeight)};
+                    --dropdown-items-bottom-border: ${get(popupBottomBorderThickness)};
+                    --dropdown-items-top-border: ${get(popupTopBorderThickness)};
+                    --dropdown-button-border: ${invalid() ? 2 : 1};
+                    `);
+
+			set_attribute(div_3, 'hidden', !expanded());
 		});
 
 		append($$anchor, div);
@@ -81741,7 +81825,8 @@
 			multiple: {},
 			rootElement: {},
 			errorElement: {},
-			webComponentMode: {}
+			webComponentMode: {},
+			expanded: {}
 		},
 		[],
 		[],
@@ -82849,7 +82934,7 @@
 	));
 
 	if (document.getElementById("version")) {
-	    document.getElementById("version").textContent = `v1.4.6`;
+	    document.getElementById("version").textContent = `v1.4.7`;
 	}
 
 	// Show maskable "general alert" component
@@ -82858,7 +82943,8 @@
 	if (displayAlertLink) {
 	    displayAlertLink.addEventListener(
 	        'click',
-	        () => {
+	        (evt) => {
+	            evt.preventDefault();
 	            maskableAlert.setAttribute('hide', 'false');
 	            displayAlertLink.hidden = true;
 	        }
@@ -82871,6 +82957,10 @@
 	        }
 	    );
 	}
+
+	if (maskableAlert && displayAlertLink && !maskableAlert.querySelector('.qc-general-alert')) {
+	    displayAlertLink.removeAttribute('hidden');
+	}
 	// add version
 
 })();