@mgdis/mg-components 4.1.0 → 4.2.0

package/dist/collection/components/molecules/inputs/mg-input-text/doc/mg-input-text.stories.js

@@ -58,38 +58,39 @@ MgInputText.args = {
  * Email
  */
 export const Email = Template.bind({});
-Email.args = Object.assign(Object.assign({}, MgInputText.args), { 
+Email.args = Object.assign(Object.assign({}, MgInputText.args), {
   // remove feature to focus on pattern
-  tooltip: '', required: false, label: 'Adresse email', 
+  tooltip: '', required: false, label: 'Adresse email',
   // Add pattern Email rules
-  maxlength: 100, pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}', patternErrorMessage: "L'information saisie est incorrecte (exemple : prenom.nom@exemple.fr)", 
+  maxlength: 100, pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}', patternErrorMessage: "L'information saisie est incorrecte (exemple : prenom.nom@exemple.fr)",
   // Help Text
-  helpText: 'exemple : prenom.nom@exemple.fr' });
+  helpText: 'exemple : prenom.nom@exemple.fr'
+});
 /**
  * Emails
  */
 export const Emails = Template.bind({});
-Emails.args = Object.assign(Object.assign({}, Email.args), { label: 'Adresses email', 
+Emails.args = Object.assign(Object.assign({}, Email.args), { label: 'Adresses email',
   // Add pattern Emails rules
-  maxlength: 200, pattern: '([a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}(;)*)+', patternErrorMessage: "L'information saisie est incorrecte (exemple : prenom.nom@exemple.fr;prenom.nom.2@exemple.fr)", 
+  maxlength: 200, pattern: '([a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}(;)*)+', patternErrorMessage: "L'information saisie est incorrecte (exemple : prenom.nom@exemple.fr;prenom.nom.2@exemple.fr)",
   // Help Text
   helpText: 'exemple : prenom.nom@exemple.fr;prenom.nom.2@exemple.fr' });
 /**
  * RNA
  */
 export const RNA = Template.bind({});
-RNA.args = Object.assign(Object.assign({}, Emails.args), { label: 'RNA', 
+RNA.args = Object.assign(Object.assign({}, Emails.args), { label: 'RNA',
   // Add pattern RNA rules
-  maxlength: 10, pattern: '(W[0-9]{1}[a-zA-Z0-9]{1}[0-9]{7})', patternErrorMessage: "Le numéro RNA n'est pas valide (exemple: W123456789)", 
+  maxlength: 10, pattern: '(W[0-9]{1}[a-zA-Z0-9]{1}[0-9]{7})', patternErrorMessage: "Le numéro RNA n'est pas valide (exemple: W123456789)",
   // Help Text
   helpText: 'exemple : W123456789' });
 /**
  * URL
  */
 export const URL = Template.bind({});
-URL.args = Object.assign(Object.assign({}, Emails.args), { label: 'URL', 
+URL.args = Object.assign(Object.assign({}, Emails.args), { label: 'URL',
   // Add pattern URL rules
-  maxlength: 200, pattern: 'https?://(?:www.)?([-a-zA-Z0-9@:%._+~#=]{2,256}.[a-z]{2,6}\b)*(/[/dw.-]*)*(?:[?])*(.+)*', patternErrorMessage: "Le format du champ n'est pas valide (exemple: https://www.exemple.fr)", 
+  maxlength: 200, pattern: 'https?://(?:www.)?([-a-zA-Z0-9@:%._+~#=]{2,256}.[a-z]{2,6}\b)*(/[/dw.-]*)*(?:[?])*(.+)*', patternErrorMessage: "Le format du champ n'est pas valide (exemple: https://www.exemple.fr)",
   // Help Text
   helpText: 'Exemple: https://www.exemple.fr' });
 /**
@@ -103,11 +104,7 @@ const SearchTemplate = (args) => {
   const displayCharacterLeft = args.displayCharacterLeft;
   delete args.displayCharacterLeft;
   // return element
-  return (h("form", { role: "search" },
-    h("mg-input-text", Object.assign({}, filterArgs(args), { "display-character-left": displayCharacterLeft ? undefined : 'false' }),
-      h("mg-button", { slot: "append-input", label: "search" },
-        h("mg-icon", { icon: "magnifying-glass" }),
-        " Search"))));
+  return (h("form", { role: "search" }, h("mg-input-text", Object.assign({}, filterArgs(args), { "display-character-left": displayCharacterLeft ? undefined : 'false' }), h("mg-button", { slot: "append-input", label: "search" }, h("mg-icon", { icon: "magnifying-glass" }), " Search"))));
 };
 export const Search = SearchTemplate.bind({});
 Search.args = Object.assign(Object.assign({}, MgInputText.args), { type: 'search', icon: 'magnifying-glass' });

package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.css

@@ -254,6 +254,8 @@
 .mg-input__with-character-left {
   position: relative;
   display: inline-flex;
+}
+.mg-input--width-full .mg-input__with-character-left {
   width: 100%;
 }
 .mg-input.is-focused .mg-input__with-character-left .mg-input__box {