@roadtrip/components 3.17.0 → 3.18.0

package/dist/collection/components/navbar/navbar.stories.js

@@ -36,16 +36,16 @@ export default {
   },
   args: {
     ' ': `
-    <road-profil-dropdown is-open="false" class="m-24 d-none d-xl-block">
+    <road-profil-dropdown is-open="false" class="m-24 d-none d-xl-block" role="menuitem">
       <road-list slot="list">
-        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
-          <road-icon slot="start" name="edit-outline" size="md"></road-icon>
+        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;" class="border-0">
+          <road-icon slot="start" name="edit-outline" size="md" aria-hidden="true"></road-icon>
           <road-label style="font-size: 0.75rem">
             Edit profile
           </road-label>
         </road-item>
-        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
-          <road-icon slot="start" name="log-out-outline" size="md"></road-icon>
+        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;" class="border-0">
+          <road-icon slot="start" name="log-out-outline" size="md" aria-hidden="true"></road-icon>
           <road-label style="font-size: 0.75rem">
             Log out
           </road-label>
@@ -57,62 +57,62 @@ export default {
       <road-label slot="email">email</road-label>
     </road-profil-dropdown>
 
-    <road-navbar-item tab="tab-home">
+    <road-navbar-item tab="tab-home" aria-label="Home" role="menuitem">
     <road-tooltip content="Home" position="right" trigger="hover" contentalign="center">
-      <road-icon name="navigation-home-outline"></road-icon>
+      <road-icon name="navigation-home-outline" aria-hidden="true" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold">Home</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-search">
+  <road-navbar-item tab="tab-search" aria-label="Search" role="menuitem">
     <road-tooltip content="Search" position="right" trigger="hover" contentalign="center">
-      <road-icon name="search"></road-icon>
+      <road-icon name="search" aria-hidden="true" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold">Search</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-catalog">
+  <road-navbar-item tab="tab-print" role="menuitem">
     <road-tooltip content="Print" position="right" trigger="hover" contentalign="center">
-      <road-icon name="print-outline"></road-icon>
+      <road-icon name="print-outline" aria-hidden="true" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold">Print</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-notification" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-notification" class="d-none d-xl-flex" role="menuitem">
     <road-tooltip content="Notifications" position="right" trigger="hover" contentalign="center">
-      <road-icon name="alert-notification-outline"></road-icon>
+      <road-icon name="alert-notification-outline" aria-hidden="true" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold">Notifications</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-scan" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-scan" class="d-none d-xl-flex" aria-label="Scan" role="menuitem">
     <road-tooltip content="Scan" position="right" trigger="hover" contentalign="center">
-      <road-icon name="scan"></road-icon>
+      <road-icon name="scan" aria-hidden="true" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold">Scan</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex" role="menuitem">
     <road-tooltip content="Catalog" position="right" trigger="hover" contentalign="center">
-      <road-icon name="file-catalog"></road-icon>
+      <road-icon name="file-catalog" aria-hidden="true" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold">Catalogue</road-label>
     </road-tootltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-diag" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-diag" class="d-none d-xl-flex" role="menuitem">
     <road-tooltip content="Diagnostic" position="right" trigger="hover" contentalign="center">
-      <road-icon name="Diagnostic"></road-icon>
+      <road-icon name="Diagnostic" aria-hidden="true" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold">Diagnostic</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-menu" class="d-block d-xl-none tab-menu">
-    <road-icon name="navigation-menu"></road-icon>
+  <road-navbar-item tab="tab-menu" class="d-block d-xl-none tab-menu" role="menuitem">
+    <road-icon name="navigation-menu" aria-hidden="true"></road-icon>
     <road-label>Menu</road-label>
   </road-navbar-item>
   
-  <road-drawer is-open="false" position="right" drawer-width="480" drawer-title="Menu" class="d-xl-none drawer-menu">
-  <road-item class="mb-16 text-left bg-light profil">
+  <road-drawer is-open="false" position="right" drawer-width="480" drawer-title="Menu" class="d-xl-none drawer-menu" tabindex="0" role="menuitem">
+  <road-item class="mb-16 text-left bg-light profil" tabindex="0" button="true">
     <road-avatar slot="start" class="mr-16">  
       <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
     </road-avatar>
@@ -121,26 +121,26 @@ export default {
       <p class="text-medium text-truncate m-0">Email</p>
     </road-label>
 
-    <road-icon slot="end" name="edit-outline" size="sm" class="mr-8"></road-icon>
+    <road-icon slot="end" name="edit-outline" size="sm" class="mr-8" aria-hidden="true"></road-icon>
   </road-item>
 
-  <road-item class="bg-white">
-    <road-icon name="scan"></road-icon>
+  <road-item class="bg-white border-0" button="true">
+    <road-icon name="scan" aria-hidden="true"></road-icon>
     Scan
   </road-item>
 
-  <road-item class="bg-white">
-    <road-icon name="file-catalog"></road-icon>
+  <road-item class="bg-white border-0" button="true">
+    <road-icon name="file-catalog" aria-hidden="true"></road-icon>
     Catalogue
   </road-item>
 
-  <road-item class="bg-white">
-    <road-icon name="Diagnostic"></road-icon>
+  <road-item class="bg-white border-0" button="true">
+    <road-icon name="Diagnostic" aria-hidden="true"></road-icon>
     Diagnostic
   </road-item>
 
-  <road-item class="bg-white border-top ">
-    <road-icon name="log-out"></road-icon>
+  <road-item class="bg-white border-top border-0" button="true">
+    <road-icon name="log-out" aria-hidden="true"></road-icon>
     Log out
   </road-item>
 
@@ -162,13 +162,34 @@ export default {
   </road-drawer>
   
   <script>
-document.querySelector('.tab-menu').addEventListener('click', () => {
-  document.querySelector('.drawer-menu').setAttribute('is-open', 'true');
-});
-
-document.querySelector('.profil').addEventListener('click', () => {
-  document.querySelector('.drawer-menu2').setAttribute('is-open', 'true');
-});
+  // Fonction pour gérer l'activation de la touche "Enter" ou "Space"
+  function handleKeydown(event, element) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      element.setAttribute('is-open', 'true');
+    }
+  }
+  
+  // Gestionnaire de clic et clavier pour le menu principal
+  const tabMenu = document.querySelector('.tab-menu');
+  tabMenu.setAttribute('tabindex', '0'); // Rendre focusable
+  tabMenu.addEventListener('click', () => {
+    document.querySelector('.drawer-menu').setAttribute('is-open', 'true');
+  });
+  tabMenu.addEventListener('keydown', (event) => {
+    handleKeydown(event, document.querySelector('.drawer-menu'));
+  });
+  
+  // Gestionnaire de clic et clavier pour le menu du profil
+  const profil = document.querySelector('.profil');
+  profil.setAttribute('tabindex', '0'); // Rendre focusable
+  profil.addEventListener('click', () => {
+    document.querySelector('.drawer-menu2').setAttribute('is-open', 'true');
+  });
+  profil.addEventListener('keydown', (event) => {
+    handleKeydown(event, document.querySelector('.drawer-menu2'));
+  });
+  
 
 </script>`,
   },
@@ -188,13 +209,13 @@ Selected.args = {
   <road-profil-dropdown is-open="false" class="m-24 d-none d-xl-block">
     <road-list slot="list">
       <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
-        <road-icon slot="start" name="edit-outline" size="md"></road-icon>
+        <road-icon slot="start" name="edit-outline" size="md" aria-hidden="true"></road-icon>
         <road-label style="font-size: 0.75rem">
           Edit profile
         </road-label>
       </road-item>
       <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
-        <road-icon slot="start" name="log-out-outline" size="md"></road-icon>
+        <road-icon slot="start" name="log-out-outline" size="md" aria-hidden="true"></road-icon>
         <road-label style="font-size: 0.75rem">
           Log out
         </road-label>
@@ -204,37 +225,37 @@ Selected.args = {
     <road-img slot="avatarItem" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
   </road-profil-dropdown>
   
-  <road-navbar-item tab="tab-home" selected="true">
+  <road-navbar-item tab="tab-home" selected="true" aria-label="Home" role="menuitem">
     <road-tooltip content="Home" position="right" trigger="hover" contentalign="center">
-      <road-icon name="navigation-home-outline"></road-icon>
+      <road-icon name="navigation-home-outline" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold">Home</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-search">
+  <road-navbar-item tab="tab-search" aria-label="Search" role="menuitem">
     <road-tooltip content="Search" position="right" trigger="hover" contentalign="center">
-      <road-icon name="search"></road-icon>
+      <road-icon name="search" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold">Search</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-catalog">
+  <road-navbar-item tab="tab-print" role="menuitem">
     <road-tooltip content="Print" position="right" trigger="hover" contentalign="center">
-      <road-icon name="print-outline"></road-icon>
+      <road-icon name="print-outline" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold">Print</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex" role="menuitem">
     <road-tooltip content="Catalogue" position="right" trigger="hover" contentalign="center">
-      <road-icon name="file-catalog"></road-icon>
+      <road-icon name="file-catalog" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold">Catalogue</road-label>
     </road-tooltip>
   </road-navbar-item>
   
-  <road-navbar-item tab="tab-scan" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-scan" class="d-none d-xl-flex" aria-label="Scan" role="menuitem">
     <road-tooltip content="Scan" position="right" trigger="hover" contentalign="center">
-      <road-icon name="scan"></road-icon>
+      <road-icon name="scan" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold">Scan</road-label>
     </road-tooltip>
   </road-navbar-item>`,
@@ -246,13 +267,13 @@ withNotifications.args = {
   <road-profil-dropdown is-open="false" class="m-24 d-none d-xl-block">
     <road-list slot="list">
       <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
-        <road-icon slot="start" name="edit-outline" size="md"></road-icon>
+        <road-icon slot="start" name="edit-outline" size="md" aria-hidden="true"></road-icon>
         <road-label style="font-size: 0.75rem">
           Edit profile
         </road-label>
       </road-item>
       <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
-        <road-icon slot="start" name="log-out-outline" size="md"></road-icon>
+        <road-icon slot="start" name="log-out-outline" size="md" aria-hidden="true"></road-icon>
         <road-label style="font-size: 0.75rem">
           Log out
         </road-label>
@@ -262,38 +283,38 @@ withNotifications.args = {
     <road-img slot="avatarItem" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
   </road-profil-dropdown>
 
-  <road-navbar-item tab="tab-home" selected="true">
+  <road-navbar-item tab="tab-home" selected="true" aria-label="Home" role="menuitem">
     <road-tooltip content="Home" position="right" trigger="hover" contentalign="center">
-      <road-icon name="navigation-home-outline"></road-icon>
+      <road-icon name="navigation-home-outline" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold" style="font-size:0.75rem;">Home</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-search">
+  <road-navbar-item tab="tab-search" aria-label="Search" role="menuitem">
     <road-tooltip content="Search" position="right" trigger="hover" contentalign="center">
-      <road-icon name="search"></road-icon>
+      <road-icon name="search" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold" style="font-size:0.75rem;">Search</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-catalog">
+  <road-navbar-item tab="tab-catalog" aria-label="Catalog" role="menuitem">
     <road-tooltip content="Scan" position="right" trigger="hover" contentalign="center">
-      <road-icon name="print-outline"></road-icon>
+      <road-icon name="print-outline" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold" style="font-size:0.75rem;">Scan</road-label>
     </road-tooltip>
     <road-badge>3</road-badge>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex" aria-label="Catalog" role="menuitem">
     <road-tooltip content="Catalog" position="right" trigger="hover" contentalign="center">
-      <road-icon name="file-catalog"></road-icon>
+      <road-icon name="file-catalog" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold" style="font-size:0.75rem;">Catalog</road-label>
     </road-tooltip>
   </road-navbar-item>
   
-  <road-navbar-item tab="tab-scan" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-scan" class="d-none d-xl-flex" aria-label="Scan" role="menuitem">
     <road-tooltip content="Scan" position="right" trigger="hover" contentalign="center">
-      <road-icon name="scan"></road-icon>
+      <road-icon name="scan" aria-hidden="true"></road-icon>
       <road-label class="font-weight-bold" style="font-size:0.75rem;">Scan</road-label>
     </road-tooltip>
   </road-navbar-item>`,

package/dist/collection/components/navbar-item/navbar-item.js

@@ -52,7 +52,7 @@ export class NavbarItem {
       rel,
       target,
     };
-    return (h(Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
+    return (h(Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "menu", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
         'navbar-item': true,
         'tab-selected': selected,
         'tab-disabled': disabled,

package/dist/collection/components/navbar-item/navbar-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-item.js","sourceRoot":"","sources":["../../../src/components/navbar-item/navbar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAE/F;;;;GAIG;AAOH,MAAM,OAAO,UAAU;;IAiFb,YAAO,GAAG,CAAC,EAAiB,EAAE,EAAE;MACtC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;OACpB;IACH,CAAC,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS,EAAE,EAAE;MAC9B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC,CAAC;oBAlFiB,KAAK;;;;oBAyBY,KAAK;;;;EAyBzC,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;EAC7C,CAAC;EAEO,SAAS,CAAC,EAAyB;IACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;OACJ;MACD,IAAG,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;QAC1B,EAAE,CAAC,cAAc,EAAE,CAAC;OACrB;KACF;EACH,CAAC;EAYD,MAAM;IACJ,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAC5D,MAAM,KAAK,GAAG;MACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,IAAI;MACJ,GAAG;MACH,MAAM;KACP,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAC,GAAG,mBACG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,EACnD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,QAAQ;OACzB;MAED,yBAAO,KAAK,IAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ;QAC7D,YAAM,KAAK,EAAC,cAAc;UACxB,eAAO,CACF,CACL,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * @slot  - Content of the item, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-navbar-item',\n  styleUrl: 'navbar-item.css',\n  shadow: true,\n})\nexport class NavbarItem {\n\n  @Element() el!: HTMLRoadNavbarItemElement;\n\n  /**\n   * If `true`, the user cannot interact with the tab button.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab.\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadnavbaritemclick!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarItemClick!: EventEmitter;\n\n  @Listen('roadNavbarChanged', { target: 'window' })\n  @Listen('roadnavbarchanged', { target: 'window' })\n  onNavbarChanged(ev: CustomEvent) {\n    this.selected = this.tab === ev.detail.tab;\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      if (!this.disabled) {\n        this.roadnavbaritemclick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n        this.roadNavbarItemClick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n      }\n      if(this.href === undefined) {\n        ev.preventDefault();\n      }\n    }\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { href, rel, target, selected, tab, disabled } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex=\"0\"\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `navbar-item-${tab}` : null}\n        disabled={disabled}\n        class={{\n          'navbar-item': true,\n          'tab-selected': selected,\n          'tab-disabled': disabled,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"navbar-item.js","sourceRoot":"","sources":["../../../src/components/navbar-item/navbar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAE/F;;;;GAIG;AAOH,MAAM,OAAO,UAAU;;IAiFb,YAAO,GAAG,CAAC,EAAiB,EAAE,EAAE;MACtC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;OACpB;IACH,CAAC,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS,EAAE,EAAE;MAC9B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC,CAAC;oBAlFiB,KAAK;;;;oBAyBY,KAAK;;;;EAyBzC,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;EAC7C,CAAC;EAEO,SAAS,CAAC,EAAyB;IACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;OACJ;MACD,IAAG,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;QAC1B,EAAE,CAAC,cAAc,EAAE,CAAC;OACrB;KACF;EACH,CAAC;EAYD,MAAM;IACJ,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAC5D,MAAM,KAAK,GAAG;MACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,IAAI;MACJ,GAAG;MACH,MAAM;KACP,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAC,GAAG,mBACG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,EACnD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,QAAQ;OACzB;MAED,yBAAO,KAAK,IAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ;QAC7D,YAAM,KAAK,EAAC,cAAc;UACxB,eAAO,CACF,CACL,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * @slot  - Content of the item, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-navbar-item',\n  styleUrl: 'navbar-item.css',\n  shadow: true,\n})\nexport class NavbarItem {\n\n  @Element() el!: HTMLRoadNavbarItemElement;\n\n  /**\n   * If `true`, the user cannot interact with the tab button.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab.\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadnavbaritemclick!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarItemClick!: EventEmitter;\n\n  @Listen('roadNavbarChanged', { target: 'window' })\n  @Listen('roadnavbarchanged', { target: 'window' })\n  onNavbarChanged(ev: CustomEvent) {\n    this.selected = this.tab === ev.detail.tab;\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      if (!this.disabled) {\n        this.roadnavbaritemclick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n        this.roadNavbarItemClick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n      }\n      if(this.href === undefined) {\n        ev.preventDefault();\n      }\n    }\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { href, rel, target, selected, tab, disabled } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"menu\"\n        tabindex=\"0\"\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `navbar-item-${tab}` : null}\n        disabled={disabled}\n        class={{\n          'navbar-item': true,\n          'tab-selected': selected,\n          'tab-disabled': disabled,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/patterns/link.stories.js

@@ -10,7 +10,7 @@ export const Playground = () => html`
 <br><br>
 
 <a class="link d-inline-flex align-items-center" href="#">
-  <road-icon size="sm" class="mr-4" name="edit-pen"></road-icon>
+  <road-icon size="sm" class="mr-4" name="edit-pen" role="img"></road-icon>
   Link
 </a>
 
@@ -18,7 +18,7 @@ export const Playground = () => html`
 
 <a class="link d-inline-flex align-items-center" href="#">
   Link
-  <road-icon size="sm" class="mr-4" name="arrow"></road-icon>
+  <road-icon size="sm" class="mr-4" name="arrow" role="img"></road-icon>
 </a>
 `;
 

package/dist/collection/components/phone-number-input/phone-number-input.css

@@ -95,7 +95,6 @@
 
   .form-select-area:not(:disabled):focus {
     border-color: var(--road-input-outline-variant);
-    outline: 0;
   }
 
   /**

package/dist/collection/components/phone-number-input/phone-number-input.js

@@ -43,8 +43,44 @@ export class RoadPhoneNumberInput {
   }
   // On user input
   handleInput(event) {
-    this.phoneNumber = event.detail.value;
-    this.createAndDispatchPhoneData();
+    // Récupérer la valeur saisie
+    const inputValue = event.detail.value || '';
+    // Vérifier si la valeur contient uniquement des chiffres ou le symbole "+"
+    const containsOnlyNumbersAndPlus = /^[0-9+]*$/.test(inputValue);
+    // Vérifier si la valeur contient des lettres
+    const containsLetters = /[a-zA-Z]/.test(inputValue);
+    // Vérifier si la valeur commence par un chiffre
+    const startsWithNumber = /^[0-9]/.test(inputValue);
+    // Si la valeur contient des lettres, ne pas la mettre à jour
+    if (containsLetters) {
+      // Réinitialiser la valeur du champ de saisie à son état précédent
+      const inputElement = this.el.querySelector('#phone-number');
+      if (inputElement) {
+        inputElement.value = this.phoneNumber;
+      }
+    }
+    else if (containsOnlyNumbersAndPlus && !startsWithNumber) {
+      // Si la valeur contient des chiffres ou le symbole "+" mais ne commence pas par un chiffre, mettre à jour la valeur
+      this.phoneNumber = inputValue;
+      this.createAndDispatchPhoneData();
+    }
+  }
+  // On user key up
+  handleKeyUp(event) {
+    // Récupérer la valeur saisie
+    const inputValue = event.target.value || '';
+    // Vérifier si la valeur contient uniquement des chiffres ou le symbole "+"
+    const containsOnlyNumbersAndPlus = /^[0-9+]*$/.test(inputValue);
+    // Si la valeur ne contient pas uniquement des chiffres ou le symbole "+", réinitialiser le champ de saisie à son état précédent
+    if (!containsOnlyNumbersAndPlus) {
+      // Réinitialiser la valeur du champ de saisie à son état précédent
+      event.target.value = this.phoneNumber;
+    }
+    else {
+      // Si la valeur contient uniquement des chiffres ou le symbole "+", mettre à jour la valeur du numéro de téléphone
+      this.phoneNumber = inputValue;
+      this.createAndDispatchPhoneData();
+    }
   }
   // On user select
   handleSelect(event) {
@@ -135,7 +171,7 @@ export class RoadPhoneNumberInput {
   }
   placeErrorMessage() {
     this.waitForElementToExist('.invalid-feedback').then((messError) => {
-      messError.style.display = "block";
+      messError.style.display = "flex";
       messError.style.marginTop = "-0.5rem";
       const phoneNumberInput = this.el;
       phoneNumberInput.appendChild(messError);
@@ -164,7 +200,7 @@ export class RoadPhoneNumberInput {
     const valueId = selectId + '-value';
     const isInvalidClass = this.errorMessage.length ? 'is-invalid' : '';
     const isErrorClass = this.errorMessage.length ? 'is-error' : '';
-    return (h(Host, null, h("road-input-group", null, h("div", { class: `road-phone-input-select ${isErrorClass}`, slot: "prepend" }, h("select", { id: 'phone-number-input', class: `form-select-area has-value ${isInvalidClass}`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event) }, this.countryOptions && this.countryOptions.map(option => (h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), h("label", { class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("road-input", { id: "phone-number", sizes: "xl", label: this.phoneLabel, value: this.phoneValue, onRoadChange: (event) => this.handleInput(event), required: this.required, error: this.errorMessage }))));
+    return (h(Host, null, h("road-input-group", null, h("div", { class: `road-phone-input-select ${isErrorClass}`, slot: "prepend" }, h("select", { id: 'phone-number-input', class: `form-select-area has-value ${isInvalidClass}`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event), "aria-label": this.codeLabel, tabIndex: this.disabled ? -1 : 0 }, this.countryOptions && this.countryOptions.map(option => (h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), h("label", { class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("road-input", { id: "phone-number", sizes: "xl", label: this.phoneLabel, value: this.phoneValue, onRoadChange: (event) => this.handleInput(event), required: this.required, error: this.errorMessage, onKeyUp: (event) => this.handleKeyUp(event), tabIndex: 0 }))));
   }
   static get is() { return "road-phone-number-input"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/phone-number-input/phone-number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-number-input.js","sourceRoot":"","sources":["../../../src/components/phone-number-input/phone-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, Host, State, h, Event, EventEmitter, Watch } from '@stencil/core';\nimport {\n  PhoneNumberFormat,\n  PhoneNumberType,\n  PhoneNumberUtil,\n} from 'google-libphonenumber';\nimport { CountryOption, CountryType, PhoneReturnType, ReturnObject } from './interfaces';\nimport { RoadInputCustomEvent } from '../../components';\n\nlet selectIds = 0;\n\n@Component({\n  tag: 'road-phone-number-input',\n  styleUrl: 'phone-number-input.css',\n  scoped: true,\n})\nexport class RoadPhoneNumberInput {\n\n  /** Computed phone data */\n  @Event() roadPhoneNumberInput!: EventEmitter<{\n    isError: boolean;\n    phone: {\n      numberType: string;\n      countryCode: string;\n      nationalNumber: string;\n      code: string;\n      internationalNumber: string;\n    };\n  }>;\n\n  @Element() el!: HTMLRoadPhoneNumberInputElement;\n\n  /** Disable both fields */\n  @Prop() disabled: boolean = false;\n\n  /** List of countries displayed in the country selection. Countries will be automatically sorted by alphabetical order (see format in example) */\n  @Prop() countryData: CountryType[] = [];\n\n  /** Used to display countries with the right language */\n  @Prop() language: string = 'fr';\n\n  /** Country selection placeHolder */\n  @Prop() codeLabel: string = '';\n\n  /** Phone input placeHolder */\n  @Prop() phoneLabel: string = '';\n\n  /** Value displayed in the phone input */\n  @Prop() phoneValue?: string;\n\n  /** Selected country code */\n  @Prop() countryCode?: string;\n\n  /** Error message (displayed only if ther is a message) */\n  @Prop() errorMessage: string = '';\n\n  /** Add a star in the phone input */\n  @Prop() required = false;\n\n  @State() selectedCountry: string = this.countryData[0].countryCode;\n  @State() selectedCountryCode: string = this.countryData[0].phoneCode;\n  @State() phoneNumber: string = '';\n  @State() countryOptions: CountryOption[] = [];\n  @State() returnObject: ReturnObject = {\n    isError: false,\n    phone: this.resetPhoneUtilData(),\n  };\n\n  @Watch('errorMessage')\n  updateMessagePosition() {\n    this.placeErrorMessage();\n  }\n\n  // On component load\n  componentWillLoad() {\n    this.placeErrorMessage();\n    let fromSelect = false;\n\n    if (this.phoneValue) {\n      this.phoneNumber = this.phoneValue;\n    }\n\n    if (this.countryCode) {\n      this.selectedCountry = this.countryCode;\n      if (this.getPhoneCodeFromCountryCode(this.countryCode)) {\n        this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.countryCode)!);\n        fromSelect = true;\n      }\n    }\n\n    this.updateCountryOptions();\n    this.createAndDispatchPhoneData(fromSelect);\n  }\n\n  // On user input\n  handleInput(event: RoadInputCustomEvent<{\n    value: string | null | undefined;\n  }>) {\n    this.phoneNumber = event.detail.value!;\n    this.createAndDispatchPhoneData();\n  }\n\n  // On user select\n  handleSelect(event: Event) {\n    const select = event.target as HTMLSelectElement | null;\n    if (select) {\n      this.updateSelectedCountry(select.value);\n      this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.selectedCountry)!);\n    }\n    this.createAndDispatchPhoneData(true);\n    this.updateCountryOptions();\n  }\n\n  createAndDispatchPhoneData(fromSelect?: boolean) {\n    // Init phone util\n    const phoneUtil = PhoneNumberUtil.getInstance();\n    const PNF = PhoneNumberFormat;\n\n    // Reset the return object data\n    this.returnObject.phone = this.resetPhoneUtilData();\n\n    const tmpCountry = this.selectedCountry.length ? this.selectedCountry : this.countryData[0].countryCode;\n\n    try {\n      const parsedPhoneNumber = phoneUtil.parse(this.phoneNumber, tmpCountry);\n      this.returnObject.isError = !phoneUtil.isValidNumber(parsedPhoneNumber) && !this.isEmptyPhoneNumber();\n      this.returnObject.phone.nationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.NATIONAL);\n      this.returnObject.phone.internationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.INTERNATIONAL);\n\n      // Set the country code values depending on the event origin\n      if (phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)) {\n        if (fromSelect) {\n          this.returnObject.isError = !(\n            phoneUtil.isValidNumber(parsedPhoneNumber) &&\n            phoneUtil.isValidNumberForRegion(parsedPhoneNumber, this.selectedCountry) &&\n            !this.isEmptyPhoneNumber()\n          );\n        } else {\n          this.updateSelectedCountryCode(parsedPhoneNumber.getCountryCode()!.toString());\n          this.updateSelectedCountry(phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)!);\n\n          this.returnObject.phone.countryCode = this.selectedCountry;\n          this.returnObject.phone.code = this.selectedCountryCode;\n        }\n        this.updateCountryOptions();\n      }\n\n      const phoneType = Object.entries(PhoneNumberType).find(entry => entry[1] === phoneUtil.getNumberType(parsedPhoneNumber))!;\n      this.returnObject.phone.numberType = phoneType[0];\n    } catch {} finally {\n      this.roadPhoneNumberInput.emit(this.returnObject);\n    }\n  }\n\n  // utils\n\n  updateSelectedCountryCode(countryCode: string) {\n    this.selectedCountryCode = countryCode;\n  }\n\n  updateSelectedCountry(value: string) {\n    this.selectedCountry = value;\n  }\n\n  resetPhoneUtilData(): PhoneReturnType {\n    return {\n      numberType: 'UNKNOWN',\n      countryCode: this.selectedCountry,\n      code: this.selectedCountryCode,\n      nationalNumber: this.phoneNumber,\n      internationalNumber: this.phoneNumber,\n    };\n  }\n\n  isEmptyPhoneNumber(): boolean {\n    return !this.phoneNumber.length;\n  }\n\n  getPhoneCodeFromCountryCode(countryCode: string): string | undefined {\n    return this.countryData.find(country => country.countryCode === countryCode)?.phoneCode;\n  }\n\n  updateCountryOptions() {\n    const validLanguage = this.countryData[0].translations[this.language] ? this.language : 'fr';\n    this.countryOptions = [\n      ...this.countryData\n        .sort((a, b) => a.translations[validLanguage].localeCompare(b.translations[validLanguage]))\n        .map(country => ({\n          value: country.countryCode,\n          label: `${country.translations[validLanguage]} (+${country.phoneCode})`,\n          selected: country.countryCode === this.selectedCountry,\n          disabled: false,\n        })\n      ),\n      {\n        value: '',\n        label: '--',\n        selected: this.countryData.every((country) => country.countryCode !== this.selectedCountry),\n        disabled: true,\n      },\n  ];\n  }\n\n  placeErrorMessage() {\n    this.waitForElementToExist('.invalid-feedback').then((messError: HTMLElement) => {\n      messError.style.display = \"block\";\n      messError.style.marginTop = \"-0.5rem\";\n      const phoneNumberInput = (this.el as HTMLRoadPhoneNumberInputElement);\n      phoneNumberInput.appendChild(messError);\n    });\n  }\n\n  waitForElementToExist(selector: string): Promise<HTMLElement> {\n    return new Promise(resolve => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector) as HTMLElement);\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector) as HTMLElement);\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        subtree: true,\n        childList: true,\n      });\n    });\n  }\n\n  render() {\n    const selectId = `road-select-${selectIds++}`;\n    const labelId = selectId + '-label';\n    const valueId = selectId + '-value';\n    const isInvalidClass = this.errorMessage.length ? 'is-invalid' : '';\n    const isErrorClass = this.errorMessage.length ? 'is-error' : '';\n\n    return (\n      <Host>\n        <road-input-group>\n          <div class={`road-phone-input-select ${isErrorClass}`} slot=\"prepend\">\n          <select\n              id='phone-number-input'\n              class={`form-select-area has-value ${isInvalidClass}`}\n              aria-disabled={this.disabled ? 'true' : null}\n              disabled={this.disabled}\n              onChange={(event) => this.handleSelect(event)}\n            >\n              {this.countryOptions && this.countryOptions.map(option => (\n                <option value={option.value} disabled={option.disabled} selected={option.selected}>{option.label}</option>\n              ))}\n            </select>\n            <label class=\"form-select-area-label\" id={labelId} htmlFor={selectId}>{this.codeLabel}</label>\n            <label class=\"form-select-area-value\" id={valueId} htmlFor={selectId}>+{this.selectedCountryCode}</label>\n          </div>\n          <road-input\n            id=\"phone-number\"\n            sizes=\"xl\"\n            label={this.phoneLabel}\n            value={this.phoneValue}\n            onRoadChange={(event) => this.handleInput(event)}\n            required={this.required}\n            error={this.errorMessage}\n          >\n          </road-input>\n        </road-input-group>\n      </Host>\n    );\n  }\n}\n\n\n"]}
+{"version":3,"file":"phone-number-input.js","sourceRoot":"","sources":["../../../src/components/phone-number-input/phone-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, Host, State, h, Event, EventEmitter, Watch } from '@stencil/core';\nimport {\n  PhoneNumberFormat,\n  PhoneNumberType,\n  PhoneNumberUtil,\n} from 'google-libphonenumber';\nimport { CountryOption, CountryType, PhoneReturnType, ReturnObject } from './interfaces';\nimport { RoadInputCustomEvent } from '../../components';\n\nlet selectIds = 0;\n\n@Component({\n  tag: 'road-phone-number-input',\n  styleUrl: 'phone-number-input.css',\n  scoped: true,\n})\nexport class RoadPhoneNumberInput {\n\n  /** Computed phone data */\n  @Event() roadPhoneNumberInput!: EventEmitter<{\n    isError: boolean;\n    phone: {\n      numberType: string;\n      countryCode: string;\n      nationalNumber: string;\n      code: string;\n      internationalNumber: string;\n    };\n  }>;\n\n  @Element() el!: HTMLRoadPhoneNumberInputElement;\n\n  /** Disable both fields */\n  @Prop() disabled: boolean = false;\n\n  /** List of countries displayed in the country selection. Countries will be automatically sorted by alphabetical order (see format in example) */\n  @Prop() countryData: CountryType[] = [];\n\n  /** Used to display countries with the right language */\n  @Prop() language: string = 'fr';\n\n  /** Country selection placeHolder */\n  @Prop() codeLabel: string = '';\n\n  /** Phone input placeHolder */\n  @Prop() phoneLabel: string = '';\n\n  /** Value displayed in the phone input */\n  @Prop() phoneValue?: string;\n\n  /** Selected country code */\n  @Prop() countryCode?: string;\n\n  /** Error message (displayed only if ther is a message) */\n  @Prop() errorMessage: string = '';\n\n  /** Add a star in the phone input */\n  @Prop() required = false;\n\n  @State() selectedCountry: string = this.countryData[0].countryCode;\n  @State() selectedCountryCode: string = this.countryData[0].phoneCode;\n  @State() phoneNumber: string = '';\n  @State() countryOptions: CountryOption[] = [];\n  @State() returnObject: ReturnObject = {\n    isError: false,\n    phone: this.resetPhoneUtilData(),\n  };\n\n  @Watch('errorMessage')\n  updateMessagePosition() {\n    this.placeErrorMessage();\n  }\n\n  // On component load\n  componentWillLoad() {\n    this.placeErrorMessage();\n    let fromSelect = false;\n\n    if (this.phoneValue) {\n      this.phoneNumber = this.phoneValue;\n    }\n\n    if (this.countryCode) {\n      this.selectedCountry = this.countryCode;\n      if (this.getPhoneCodeFromCountryCode(this.countryCode)) {\n        this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.countryCode)!);\n        fromSelect = true;\n      }\n    }\n\n    this.updateCountryOptions();\n    this.createAndDispatchPhoneData(fromSelect);\n  }\n\n// On user input\nhandleInput(event: RoadInputCustomEvent<{\n  value: string | null | undefined;\n}>) {\n  // Récupérer la valeur saisie\n  const inputValue = event.detail.value || '';\n\n  // Vérifier si la valeur contient uniquement des chiffres ou le symbole \"+\"\n  const containsOnlyNumbersAndPlus = /^[0-9+]*$/.test(inputValue);\n\n  // Vérifier si la valeur contient des lettres\n  const containsLetters = /[a-zA-Z]/.test(inputValue);\n\n  // Vérifier si la valeur commence par un chiffre\n  const startsWithNumber = /^[0-9]/.test(inputValue);\n\n  // Si la valeur contient des lettres, ne pas la mettre à jour\n  if (containsLetters) {\n    // Réinitialiser la valeur du champ de saisie à son état précédent\n    const inputElement = this.el.querySelector('#phone-number') as HTMLRoadInputElement;\n    if (inputElement) {\n      inputElement.value = this.phoneNumber;\n    }\n  } else if (containsOnlyNumbersAndPlus && !startsWithNumber) {\n    // Si la valeur contient des chiffres ou le symbole \"+\" mais ne commence pas par un chiffre, mettre à jour la valeur\n    this.phoneNumber = inputValue;\n    this.createAndDispatchPhoneData();\n  }\n}\n\n// On user key up\nhandleKeyUp(event: KeyboardEvent) {\n  // Récupérer la valeur saisie\n  const inputValue = (event.target as HTMLInputElement).value || '';\n\n  // Vérifier si la valeur contient uniquement des chiffres ou le symbole \"+\"\n  const containsOnlyNumbersAndPlus = /^[0-9+]*$/.test(inputValue);\n\n  // Si la valeur ne contient pas uniquement des chiffres ou le symbole \"+\", réinitialiser le champ de saisie à son état précédent\n  if (!containsOnlyNumbersAndPlus) {\n    // Réinitialiser la valeur du champ de saisie à son état précédent\n    (event.target as HTMLInputElement).value = this.phoneNumber;\n  } else {\n    // Si la valeur contient uniquement des chiffres ou le symbole \"+\", mettre à jour la valeur du numéro de téléphone\n    this.phoneNumber = inputValue;\n    this.createAndDispatchPhoneData();\n  }\n}\n\n\n\n  // On user select\n  handleSelect(event: Event) {\n    const select = event.target as HTMLSelectElement | null;\n    if (select) {\n      this.updateSelectedCountry(select.value);\n      this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.selectedCountry)!);\n    }\n    this.createAndDispatchPhoneData(true);\n    this.updateCountryOptions();\n  }\n\n  createAndDispatchPhoneData(fromSelect?: boolean) {\n    // Init phone util\n    const phoneUtil = PhoneNumberUtil.getInstance();\n    const PNF = PhoneNumberFormat;\n\n    // Reset the return object data\n    this.returnObject.phone = this.resetPhoneUtilData();\n\n    const tmpCountry = this.selectedCountry.length ? this.selectedCountry : this.countryData[0].countryCode;\n\n    try {\n      const parsedPhoneNumber = phoneUtil.parse(this.phoneNumber, tmpCountry);\n      this.returnObject.isError = !phoneUtil.isValidNumber(parsedPhoneNumber) && !this.isEmptyPhoneNumber();\n      this.returnObject.phone.nationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.NATIONAL);\n      this.returnObject.phone.internationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.INTERNATIONAL);\n\n      // Set the country code values depending on the event origin\n      if (phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)) {\n        if (fromSelect) {\n          this.returnObject.isError = !(\n            phoneUtil.isValidNumber(parsedPhoneNumber) &&\n            phoneUtil.isValidNumberForRegion(parsedPhoneNumber, this.selectedCountry) &&\n            !this.isEmptyPhoneNumber()\n          );\n        } else {\n          this.updateSelectedCountryCode(parsedPhoneNumber.getCountryCode()!.toString());\n          this.updateSelectedCountry(phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)!);\n\n          this.returnObject.phone.countryCode = this.selectedCountry;\n          this.returnObject.phone.code = this.selectedCountryCode;\n        }\n        this.updateCountryOptions();\n      }\n\n      const phoneType = Object.entries(PhoneNumberType).find(entry => entry[1] === phoneUtil.getNumberType(parsedPhoneNumber))!;\n      this.returnObject.phone.numberType = phoneType[0];\n    } catch {} finally {\n      this.roadPhoneNumberInput.emit(this.returnObject);\n    }\n  }\n\n  // utils\n\n  updateSelectedCountryCode(countryCode: string) {\n    this.selectedCountryCode = countryCode;\n  }\n\n  updateSelectedCountry(value: string) {\n    this.selectedCountry = value;\n  }\n\n  resetPhoneUtilData(): PhoneReturnType {\n    return {\n      numberType: 'UNKNOWN',\n      countryCode: this.selectedCountry,\n      code: this.selectedCountryCode,\n      nationalNumber: this.phoneNumber,\n      internationalNumber: this.phoneNumber,\n    };\n  }\n\n  isEmptyPhoneNumber(): boolean {\n    return !this.phoneNumber.length;\n  }\n\n  getPhoneCodeFromCountryCode(countryCode: string): string | undefined {\n    return this.countryData.find(country => country.countryCode === countryCode)?.phoneCode;\n  }\n\n  updateCountryOptions() {\n    const validLanguage = this.countryData[0].translations[this.language] ? this.language : 'fr';\n    this.countryOptions = [\n      ...this.countryData\n        .sort((a, b) => a.translations[validLanguage].localeCompare(b.translations[validLanguage]))\n        .map(country => ({\n          value: country.countryCode,\n          label: `${country.translations[validLanguage]} (+${country.phoneCode})`,\n          selected: country.countryCode === this.selectedCountry,\n          disabled: false,\n        })\n      ),\n      {\n        value: '',\n        label: '--',\n        selected: this.countryData.every((country) => country.countryCode !== this.selectedCountry),\n        disabled: true,\n      },\n  ];\n  }\n\n  placeErrorMessage() {\n    this.waitForElementToExist('.invalid-feedback').then((messError: HTMLElement) => {\n      messError.style.display = \"flex\";\n      messError.style.marginTop = \"-0.5rem\";\n      const phoneNumberInput = (this.el as HTMLRoadPhoneNumberInputElement);\n      phoneNumberInput.appendChild(messError);\n    });\n  }\n\n  waitForElementToExist(selector: string): Promise<HTMLElement> {\n    return new Promise(resolve => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector) as HTMLElement);\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector) as HTMLElement);\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        subtree: true,\n        childList: true,\n      });\n    });\n  }\n\n  render() {\n    const selectId = `road-select-${selectIds++}`;\n    const labelId = selectId + '-label';\n    const valueId = selectId + '-value';\n    const isInvalidClass = this.errorMessage.length ? 'is-invalid' : '';\n    const isErrorClass = this.errorMessage.length ? 'is-error' : '';\n\n    return (\n      <Host>\n        <road-input-group>\n          <div class={`road-phone-input-select ${isErrorClass}`} slot=\"prepend\">\n          <select\n              id='phone-number-input'\n              class={`form-select-area has-value ${isInvalidClass}`}\n              aria-disabled={this.disabled ? 'true' : null}\n              disabled={this.disabled}\n              onChange={(event) => this.handleSelect(event)}\n              aria-label={this.codeLabel}\n              tabIndex={this.disabled ? -1 : 0}\n            >\n              {this.countryOptions && this.countryOptions.map(option => (\n                <option value={option.value} disabled={option.disabled} selected={option.selected}>{option.label}</option>\n              ))}\n            </select>\n            <label class=\"form-select-area-label\" id={labelId} htmlFor={selectId}>{this.codeLabel}</label>\n            <label class=\"form-select-area-value\" id={valueId} htmlFor={selectId}>+{this.selectedCountryCode}</label>\n          </div>\n          <road-input\n            id=\"phone-number\"\n            sizes=\"xl\"\n            label={this.phoneLabel}\n            value={this.phoneValue}\n            onRoadChange={(event) => this.handleInput(event)}\n            required={this.required}\n            error={this.errorMessage}\n            onKeyUp={(event) => this.handleKeyUp(event)} // Lier la fonction handleKeyUp à l'événement onKeyUp\n            tabIndex={0}\n          >\n          </road-input>\n        </road-input-group>\n      </Host>\n    );\n  }\n}\n\n\n"]}

package/dist/collection/components/plate-number/plate-number.css

@@ -94,7 +94,7 @@
 }
 
 .plate-number-input::placeholder {
-  color: var(--road-on-surface-extra-weak);
+  color: var(--road-on-surface-weak);
   opacity: 1;
 }
 

package/dist/collection/components/plate-number/plate-number.js

@@ -82,7 +82,7 @@ export class PlateNumber {
   render() {
     const value = this.getValue();
     const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';
-    return (h("road-input-group", { class: `plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}` }, h("label", { slot: "prepend", class: "input-group-prepend" }, h("div", { class: "plate-number-start" }, h("road-icon", { class: "plate-number-icon", icon: licensePlateStarEu }), h("div", { class: "plate-number-location" }, this.countries
+    return (h("road-input-group", { class: `plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}` }, h("label", { slot: "prepend", class: "input-group-prepend" }, h("div", { class: "plate-number-start" }, h("road-icon", { class: "plate-number-icon", icon: licensePlateStarEu }), h("div", { class: "plate-number-location", "aria-label": this.country, role: "img" }, this.countries
       .filter(item => item.country === this.country)[0].letter))), this.motorbike
       ? (h("textarea", { class: "form-control plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, maxlength: "9", rows: 2, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }))
       : (h("input", { class: "plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus })), h("label", { slot: "append", class: "input-group-append" }, h("div", { class: "plate-number-end" }))));

package/dist/collection/components/plate-number/plate-number.js.map

@@ -1 +1 @@
-{"version":3,"file":"plate-number.js","sourceRoot":"","sources":["../../../src/components/plate-number/plate-number.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { licensePlateStarEu } from '../../../icons';\n\n@Component({\n  tag: 'road-plate-number',\n  styleUrl: 'plate-number.css',\n  scoped: true,\n})\nexport class PlateNumber {\n\n  private countries = [\n    {\n      country: 'FR',\n      letter: 'F',\n      placeholder: 'AT-857-YY',\n    },\n    {\n      country: 'BE',\n      letter: 'B',\n      placeholder: '1-AAA-001',\n    },\n    {\n      country: 'IT',\n      letter: 'I',\n      placeholder: 'AT 814TX',\n    },\n    {\n      country: 'ES',\n      letter: 'E',\n      placeholder: '9512 HVY',\n    },\n    {\n      country: 'PT',\n      letter: 'P',\n      placeholder: '13 24 PZ',\n    },\n    {\n      country: 'PL',\n      letter: 'PL',\n      placeholder: 'GD 921KF',\n    },\n    {\n      country: 'AT',\n      letter: 'A',\n      placeholder: 'FF 10 FF',\n    },\n    {\n      country: 'DE',\n      letter: 'D',\n      placeholder: 'RA KL 8136',\n    }\n  ];\n\n  /**\n   * country of the plate\n   */\n  @Prop() country: 'FR' | 'BE' | 'IT' | 'ES' | 'PT' | 'PL' | 'AT' | 'DE' = 'FR';\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * overwrite the default placeholder\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Enable motorbike display\n   */\n   @Prop() motorbike?: boolean;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n   protected valueChanged() {\n     this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });\n     this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });\n   }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  private getValue(): string {\n    return typeof this.value === 'number'\n      ? this.value.toString()\n      : (this.value || '').toString();\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      input.value = input.value.toUpperCase() || \"\";\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const value = this.getValue();\n    const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';\n\n    return (\n      <road-input-group class={`plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}`}>\n        <label slot=\"prepend\" class=\"input-group-prepend\">\n          <div class=\"plate-number-start\">\n            <road-icon class=\"plate-number-icon\" icon={licensePlateStarEu}></road-icon>\n            <div class=\"plate-number-location\">\n              {this.countries\n                .filter(item => item.country === this.country)[0].letter}\n            </div>\n          </div>\n        </label>\n        {this.motorbike\n          ? (\n            <textarea\n              class=\"form-control plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              maxlength=\"9\"\n              rows={2}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            >\n            </textarea>\n          )\n          : (\n            <input\n              class=\"plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              value={value}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            />\n          )}\n        <label slot=\"append\" class=\"input-group-append\">\n          <div class=\"plate-number-end\"></div>\n        </label>\n      </road-input-group>\n    );\n  }\n\n}"]}
+{"version":3,"file":"plate-number.js","sourceRoot":"","sources":["../../../src/components/plate-number/plate-number.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { licensePlateStarEu } from '../../../icons';\n\n@Component({\n  tag: 'road-plate-number',\n  styleUrl: 'plate-number.css',\n  scoped: true,\n})\nexport class PlateNumber {\n\n  private countries = [\n    {\n      country: 'FR',\n      letter: 'F',\n      placeholder: 'AT-857-YY',\n    },\n    {\n      country: 'BE',\n      letter: 'B',\n      placeholder: '1-AAA-001',\n    },\n    {\n      country: 'IT',\n      letter: 'I',\n      placeholder: 'AT 814TX',\n    },\n    {\n      country: 'ES',\n      letter: 'E',\n      placeholder: '9512 HVY',\n    },\n    {\n      country: 'PT',\n      letter: 'P',\n      placeholder: '13 24 PZ',\n    },\n    {\n      country: 'PL',\n      letter: 'PL',\n      placeholder: 'GD 921KF',\n    },\n    {\n      country: 'AT',\n      letter: 'A',\n      placeholder: 'FF 10 FF',\n    },\n    {\n      country: 'DE',\n      letter: 'D',\n      placeholder: 'RA KL 8136',\n    }\n  ];\n\n  /**\n   * country of the plate\n   */\n  @Prop() country: 'FR' | 'BE' | 'IT' | 'ES' | 'PT' | 'PL' | 'AT' | 'DE' = 'FR';\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * overwrite the default placeholder\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Enable motorbike display\n   */\n   @Prop() motorbike?: boolean;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n   protected valueChanged() {\n     this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });\n     this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });\n   }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  private getValue(): string {\n    return typeof this.value === 'number'\n      ? this.value.toString()\n      : (this.value || '').toString();\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      input.value = input.value.toUpperCase() || \"\";\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const value = this.getValue();\n    const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';\n\n    return (\n      <road-input-group class={`plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}`}>\n        <label slot=\"prepend\" class=\"input-group-prepend\">\n          <div class=\"plate-number-start\">\n            <road-icon class=\"plate-number-icon\" icon={licensePlateStarEu}></road-icon>\n            <div class=\"plate-number-location\" aria-label={this.country} role=\"img\">\n              {this.countries\n                .filter(item => item.country === this.country)[0].letter}\n            </div>\n          </div>\n        </label>\n        {this.motorbike\n          ? (\n            <textarea\n              class=\"form-control plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              maxlength=\"9\"\n              rows={2}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            >\n            </textarea>\n          )\n          : (\n            <input\n              class=\"plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              value={value}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            />\n          )}\n        <label slot=\"append\" class=\"input-group-append\">\n          <div class=\"plate-number-end\"></div>\n        </label>\n      </road-input-group>\n    );\n  }\n\n}"]}