qc-trousse-sdg 1.4.7 → 1.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qc-trousse-sdg",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "description": "Trousse de développement du Système de design gouvernemental du Québec",
   "main": "index.js",
   "scripts": {

package/public/css/qc-sdg-no-grid.css

@@ -1802,6 +1802,26 @@ qc-search-input {
   width: 100%;
   max-width: 54.8rem;
 }
+qc-search-input[size=xs] {
+  max-width: 100%;
+  width: 6.3rem;
+}
+qc-search-input[size=sm] {
+  max-width: 100%;
+  width: 15.6rem;
+}
+qc-search-input[size=md] {
+  max-width: 100%;
+  width: 24.9rem;
+}
+qc-search-input[size=lg] {
+  max-width: 100%;
+  width: 52.8rem;
+}
+qc-search-input[size=xl] {
+  max-width: 100%;
+  width: 82.5rem;
+}
 
 .qc-search-bar, .qc-search-input {
   display: flex;
@@ -2271,26 +2291,6 @@ qc-textfield textarea:disabled {
   padding: 0.6rem;
 }
 
-[size=xs] {
-  max-width: 100%;
-}
-
-[size=sm] {
-  max-width: 100%;
-}
-
-[size=md] {
-  max-width: 100%;
-}
-
-[size=lg] {
-  max-width: 100%;
-}
-
-[size=xl] {
-  max-width: 100%;
-}
-
 [size=xs] input, [size=xs] input + .qc-textfield-charcount,
 [size=xs] textarea,
 [size=xs] textarea + .qc-textfield-charcount {

package/public/css/qc-sdg.css

@@ -1802,6 +1802,26 @@ qc-search-input {
   width: 100%;
   max-width: 54.8rem;
 }
+qc-search-input[size=xs] {
+  max-width: 100%;
+  width: 6.3rem;
+}
+qc-search-input[size=sm] {
+  max-width: 100%;
+  width: 15.6rem;
+}
+qc-search-input[size=md] {
+  max-width: 100%;
+  width: 24.9rem;
+}
+qc-search-input[size=lg] {
+  max-width: 100%;
+  width: 52.8rem;
+}
+qc-search-input[size=xl] {
+  max-width: 100%;
+  width: 82.5rem;
+}
 
 .qc-search-bar, .qc-search-input {
   display: flex;
@@ -2271,26 +2291,6 @@ qc-textfield textarea:disabled {
   padding: 0.6rem;
 }
 
-[size=xs] {
-  max-width: 100%;
-}
-
-[size=sm] {
-  max-width: 100%;
-}
-
-[size=md] {
-  max-width: 100%;
-}
-
-[size=lg] {
-  max-width: 100%;
-}
-
-[size=xl] {
-  max-width: 100%;
-}
-
 [size=xs] input, [size=xs] input + .qc-textfield-charcount,
 [size=xs] textarea,
 [size=xs] textarea + .qc-textfield-charcount {

package/public/index.html

@@ -1952,10 +1952,10 @@
 <qc-doc-exemple caption="Exemples 1 - différents champs de texte. Soumettre le formulaire pour voir les messages d'erreur.">
   <form id="formulaire-champs-textes">
     <qc-textfield
-            label="Nom complet"
             size="md"
             required
     >
+      <label>Nom complet</label>
       <input type="text"
              name="code-postal"
              placeholder="ex : Jean Tremblay"
@@ -2191,6 +2191,16 @@
             left-icon
             clear-aria-label="Effacer le texte"
     ></qc-search-input>
+
+    <br>
+
+    <qc-search-input
+            label="Nom de l'article"
+            size="md"
+            placeholder="Rechercher un article"
+            clear-aria-label="Effacer le texte"
+            left-icon
+    ></qc-search-input>
 </qc-doc-exemple>
 
 <h3>Documentation technique</h3>
@@ -2238,10 +2248,16 @@
             <td>Désactive le champ.</td>
         </tr>
         <tr>
-            <td>name</td>
+            <td>label</td>
             <td>Texte</td>
             <td>""</td>
-            <td>Nom du champ utilisé lors de la soumission du formulaire.</td>
+            <td>Texte du libellé du champ. Remplace automatiquement l'aria-label lorsqu'il est défini.</td>
+        </tr>
+        <tr>
+            <td>size</td>
+            <td>"xs", "sm", "md", "lg", "xl"</td>
+            <td>""</td>
+            <td>Largeur du champ</td>
         </tr>
         </tbody>
     </table>

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

@@ -79574,7 +79574,7 @@
 
 	SearchInput[FILENAME] = 'src/sdg/components/SearchInput/SearchInput.svelte';
 
-	var root$4 = add_locations(from_html(`<div><!> <input/> <!></div>`), SearchInput[FILENAME], [[28, 0, [[39, 4]]]]);
+	var root$4 = add_locations(from_html(`<!> <div><!> <input/> <!></div>`, 1), SearchInput[FILENAME], [[38, 0, [[51, 4]]]]);
 
 	function SearchInput($$anchor, $$props) {
 		check_target(new.target);
@@ -79583,6 +79583,8 @@
 		const lang = Utils.getPageLanguage();
 
 		let value = prop($$props, 'value', 15, ''),
+			label = prop($$props, 'label', 7, ''),
+			size = prop($$props, 'size', 7, ''),
 			ariaLabel = prop($$props, 'ariaLabel', 23, () => strict_equals(lang, "fr") ? "Rechercher..." : "Search..."),
 			clearAriaLabel = prop($$props, 'clearAriaLabel', 23, () => strict_equals(lang, "fr") ? "Effacer le texte" : "Clear text"),
 			leftIcon = prop($$props, 'leftIcon', 7, false),
@@ -79595,6 +79597,8 @@
 					'$$legacy',
 					'$$host',
 					'value',
+					'label',
+					'size',
 					'ariaLabel',
 					'clearAriaLabel',
 					'leftIcon',
@@ -79624,6 +79628,24 @@
 				flushSync();
 			},
 
+			get label() {
+				return label();
+			},
+
+			set label($$value = '') {
+				label($$value);
+				flushSync();
+			},
+
+			get size() {
+				return size();
+			},
+
+			set size($$value = '') {
+				size($$value);
+				flushSync();
+			},
+
 			get ariaLabel() {
 				return ariaLabel();
 			},
@@ -79665,11 +79687,49 @@
 			...legacy_api()
 		};
 
-		var div = root$4();
-		var node = child(div);
+		var fragment = root$4();
+		var node = first_child(fragment);
 
 		{
 			var consequent = ($$anchor) => {
+				add_svelte_meta(
+					() => Label($$anchor, {
+						get disabled() {
+							return isDisabled;
+						},
+
+						get text() {
+							return label();
+						},
+
+						get forId() {
+							return id();
+						}
+					}),
+					'component',
+					SearchInput,
+					32,
+					4,
+					{ componentTag: 'Label' }
+				);
+			};
+
+			add_svelte_meta(
+				() => if_block(node, ($$render) => {
+					if (label()) $$render(consequent);
+				}),
+				'if',
+				SearchInput,
+				31,
+				0
+			);
+		}
+
+		var div = sibling(node, 2);
+		var node_1 = child(div);
+
+		{
+			var consequent_1 = ($$anchor) => {
 				{
 					let $0 = user_derived(() => `qc-icon${isDisabled ? ' is-disabled' : ''}`);
 
@@ -79684,7 +79744,7 @@
 						}),
 						'component',
 						SearchInput,
-						34,
+						46,
 						8,
 						{ componentTag: 'Icon' }
 					);
@@ -79692,24 +79752,24 @@
 			};
 
 			add_svelte_meta(
-				() => if_block(node, ($$render) => {
-					if (leftIcon()) $$render(consequent);
+				() => if_block(node_1, ($$render) => {
+					if (leftIcon()) $$render(consequent_1);
 				}),
 				'if',
 				SearchInput,
-				33,
+				45,
 				4
 			);
 		}
 
-		var input = sibling(node, 2);
+		var input = sibling(node_1, 2);
 
 		attribute_effect(
 			input,
 			() => ({
 				type: 'search',
 				autocomplete: 'off',
-				'aria-label': ariaLabel(),
+				'aria-label': label() ? undefined : ariaLabel(),
 				class: isDisabled ? "qc-disabled" : "",
 				id: id(),
 				...rest
@@ -79723,10 +79783,10 @@
 
 		bind_this(input, ($$value) => searchInput = $$value, () => searchInput);
 
-		var node_1 = sibling(input, 2);
+		var node_2 = sibling(input, 2);
 
 		{
-			var consequent_1 = ($$anchor) => {
+			var consequent_2 = ($$anchor) => {
 				add_svelte_meta(
 					() => IconButton($$anchor, {
 						type: 'button',
@@ -79746,33 +79806,37 @@
 					}),
 					'component',
 					SearchInput,
-					49,
+					61,
 					4,
 					{ componentTag: 'IconButton' }
 				);
 			};
 
 			add_svelte_meta(
-				() => if_block(node_1, ($$render) => {
-					if (value()) $$render(consequent_1);
+				() => if_block(node_2, ($$render) => {
+					if (value()) $$render(consequent_2);
 				}),
 				'if',
 				SearchInput,
-				48,
+				60,
 				4
 			);
 		}
 
 		reset(div);
 
-		template_effect(() => set_class(div, 1, clsx([
-			"qc-search-input",
-			leftIcon() && "qc-search-left-icon",
-			leftIcon() && isDisabled && "qc-search-left-icon-disabled"
-		])));
+		template_effect(() => {
+			set_class(div, 1, clsx([
+				"qc-search-input",
+				leftIcon() && "qc-search-left-icon",
+				leftIcon() && isDisabled && "qc-search-left-icon-disabled"
+			]));
+
+			set_attribute(div, 'size', size());
+		});
 
 		bind_value(input, value);
-		append($$anchor, div);
+		append($$anchor, fragment);
 
 		return pop($$exports);
 	}
@@ -79781,6 +79845,8 @@
 		SearchInput,
 		{
 			value: {},
+			label: {},
+			size: {},
 			ariaLabel: {},
 			clearAriaLabel: {},
 			leftIcon: {},
@@ -82934,7 +83000,7 @@
 	));
 
 	if (document.getElementById("version")) {
-	    document.getElementById("version").textContent = `v1.4.7`;
+	    document.getElementById("version").textContent = `v1.4.8`;
 	}
 
 	// Show maskable "general alert" component