@roadtrip/components 3.10.0 → 3.10.1

package/dist/collection/components/area-code/area-code.js.map

@@ -1 +1 @@
-{"version":3,"file":"area-code.js","sourceRoot":"","sources":["../../../src/components/area-code/area-code.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-area-code',\n  styleUrl: 'area-code.css',  // Mettez à jour le nom du fichier de style si nécessaire\n  scoped: true,\n})\nexport class RoadAreaCode {\n\n    @Prop() selectId: string = `road-select-${selectIds++}`;\n\n    @Prop() options: Array<{\n      value: string | number;\n      label: string;\n      selected?: boolean;\n    }> = [];\n\n    @Prop() autofocus: boolean = false;\n\n    @Prop() disabled: boolean = false;\n  \n\n    @Prop() name: string = this.selectId;\n  \n    @Prop() required: boolean = false;\n  \n    @Prop() size: number = 0;\n\n     @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n    @Prop() label: string = 'Country'; \n\n    @Prop() error?: string;\n\n    @Prop({ mutable: true }) value?: any | null;\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 select has focus.\n   */\n  \n    @Event() roadfocus!: EventEmitter<void>;\n    /** @internal */\n    @Event() roadFocus!: EventEmitter<void>;\n\n      /**\n   * Emitted when the select loses focus.\n   */\n\n    @Event() roadblur!: EventEmitter<void>;\n    /** @internal */\n    @Event() roadBlur!: EventEmitter<void>;\n  \n    @Watch('value')\n    valueChanged() {\n      this.roadchange.emit({\n        value: this.value,\n      });\n      this.roadChange.emit({\n        value: this.value,\n      });\n    }\n  \n    private onChange = (ev: Event) => {\n      const select = ev.target as HTMLSelectElement | null;\n      if (select) {\n        this.value = select.value || '';\n      }\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 labelId = this.selectId + '-label';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host class={this.sizes && `select-${this.sizes}`}>\n        <select\n          class={`form-select has-value ${isInvalidClass}`}  // Appliquez la classe has-value par défaut ici\n          id={this.selectId}\n          aria-disabled={this.disabled ? 'true' : null}\n          autoFocus={this.autofocus}\n          disabled={this.disabled}\n          name={this.name}\n          required={this.required}\n          size={this.size}\n          onChange={this.onChange}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <option selected disabled hidden style={{ display: 'none' }} value=\"\"></option>\n                    {this.options && this.options.map(option => (\n                        <option value={option.value} selected={option.selected}>{option.label}</option>\n                    ))}\n        </select>\n                <label class=\"form-select-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n                {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        </Host>\n    );\n  }\n}\n\nlet selectIds = 0;\n"]}
+{"version":3,"file":"area-code.js","sourceRoot":"","sources":["../../../src/components/area-code/area-code.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'road-area-code',\n  styleUrl: 'area-code.css',  // Mettez à jour le nom du fichier de style si nécessaire\n  scoped: true,\n})\nexport class RoadAreaCode {\n\n  @Prop() selectId: string = `road-select-${selectIds++}`;\n  @State() selectedValue: string | number = '';\n\n\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n    selected?: boolean;\n  }> = [];\n\n  @Prop() autofocus: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n\n  @Prop() name: string = this.selectId;\n\n  @Prop() required: boolean = false;\n\n  @Prop() size: number = 0;\n\n  @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  @Prop() label: string = 'Country';\n\n  @Prop() error?: string;\n\n  @Prop({ mutable: true }) value?: any | null;\n\n  @Prop() areaValue?: number;\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 select has focus.\n*/\n\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n* Emitted when the select loses focus.\n*/\n\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('value')\n  valueChanged() {\n    this.roadchange.emit({\n      value: this.value,\n    });\n    this.roadChange.emit({\n      value: this.value,\n    });\n    this.selectedValue = this.value;\n  }\n\n  @Prop({ mutable: true }) triggerRender: number = 0;\n\n  componentWillLoad() {\n    if (!this.value && this.options.length > 0) {\n      this.selectedValue = this.options[0].value;\n    } else {\n      const matchedOption = this.options.find(option => option.value === this.value);\n      if (matchedOption) {\n        this.selectedValue = matchedOption.value;\n      }\n    }\n  }\n\n  private onChange = (ev: Event) => {\n    const select = ev.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\n      const matchedOption = this.options.find(option => option.value === this.value);\n      if (matchedOption) {\n        this.selectedValue = matchedOption.value;\n      }\n    }\n    return this.selectedValue;\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 labelId = this.selectId + '-label';\n    const valueId = this.selectId + '-value';\n\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host class={this.sizes && `select-${this.sizes}`}>\n        <select\n          class={`form-select-area has-value ${isInvalidClass}`}  // Appliquez la classe has-value par défaut ici\n          id={this.selectId}\n          aria-disabled={this.disabled ? 'true' : null}\n          autoFocus={this.autofocus}\n          disabled={this.disabled}\n          name={this.name}\n          required={this.required}\n          size={this.size}\n          onChange={this.onChange}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          {this.options && this.options.map(option => (\n            <option value={option.value} selected={option.selected}>{option.label}</option>\n          ))}\n        </select>\n        <label class=\"form-select-area-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n        <label class=\"form-select-area-value\" id={valueId} htmlFor={this.selectId}>+{this.selectedValue}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n      </Host>\n    );\n  }\n}\n\nlet selectIds = 0;\n"]}

package/dist/collection/components/button/button.css

@@ -120,7 +120,6 @@
 :host(.btn-primary) {
   color: var(--road-on-button-primary);
   background: var(--road-button-primary);
-  
 }
 
 :host(.btn-primary) ::slotted(road-icon) {
@@ -285,6 +284,29 @@
   height: 2rem;
 }
 
+:host(.btn-icon.btn-xl) {
+  width: 56px;
+}
+
+
+/**
+ * Large
+ */
+
+:host(.btn-lg) {
+  height: 3rem;
+}
+
+:host(.btn-lg) ::slotted(road-icon) {
+  width: 2rem;
+  height: 2rem;
+}
+
+
+:host(.btn-icon.btn-lg) {
+  width: 48px;
+}
+
 /**
  * Medium
  */
@@ -300,6 +322,10 @@
   height: 1.5rem;
 }
 
+:host(.btn-icon.btn-md) {
+  width: 40px;
+}
+
 /**
  * Small
  */
@@ -315,6 +341,10 @@
   height: 1.25rem;
 }
 
+:host(.btn-icon.btn-sm) {
+  width: 32px;
+}
+
 /**
  * Button block
  */
@@ -323,6 +353,11 @@
   width: 100%;
 }
 
+:host(.btn-icon) .button-native{
+  padding: 0;
+}
+
+
 /* BADGE
  -------------------- */
 

package/dist/collection/components/button/button.js

@@ -2,6 +2,7 @@ import { Host, h } from '@stencil/core';
 import './../../utils/polyfill';
 /**
  * @slot - Content of the button.
+ * ex if onlyIcon `<road-icon name="shopping-cart-add"></road-icon>`
  * @slot start - Left content of the button text, usually for icon.
  * @slot end - Right content of the button text, usually icon.
  *
@@ -37,6 +38,7 @@ export class Button {
     this.color = 'default';
     this.size = 'lg';
     this.buttonType = 'button';
+    this.iconOnly = false;
     this.disabled = false;
     this.expand = false;
     this.download = undefined;
@@ -59,7 +61,8 @@ export class Button {
     const colorClass = this.outline ? `btn-outline-${color}` : `btn-${color}`;
     const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
     const expandClass = this.expand ? 'btn-block' : '';
-    return (h(Host, { class: `${colorClass} ${sizeClass} ${expandClass}`, onClick: this.onClick, "aria-disabled": disabled ? 'true' : null }, h(TagType, Object.assign({}, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }), h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" }))));
+    const iconOnlyClass = this.iconOnly ? 'btn-icon' : '';
+    return (h(Host, { class: `${colorClass} ${sizeClass} ${expandClass} ${iconOnlyClass}`, onClick: this.onClick, "aria-disabled": disabled ? 'true' : null }, h(TagType, Object.assign({}, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }), h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" }))));
   }
   static get is() { return "road-button"; }
   static get encapsulation() { return "shadow"; }
@@ -129,6 +132,24 @@ export class Button {
         "reflect": false,
         "defaultValue": "'button'"
       },
+      "iconOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, display only an icon in the button."
+        },
+        "attribute": "icon-only",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the button.\n * @slot start - Left content of the button text, usually for icon.\n * @slot end - Right content of the button text, usually icon.\n *\n * @part native - The native HTML button or anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class Button {\n\n  @Element() el!: HTMLRoadButtonElement;\n\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color?: 'primary' | 'secondary' | 'ghost' |'default' = 'default';\n\n  /**\n    * The button size.\n    */\n  @Prop({ reflect: true }) size?: 'sm' | 'md' | 'lg' | 'xl' = 'lg';\n\n  /**\n   * The type of the button.\n   */\n  @Prop() buttonType: 'submit' | 'reset' | 'button' = 'button';\n\n  /**\n   * If `true`, the user cannot interact with the button.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Set to `true` for a full-width button.\n   */\n  @Prop({ reflect: true }) expand: boolean = 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;\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;\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;\n\n  /**\n   * Set to `false` for a ghost button, set to `true` for a default outline button\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * Emitted when the button has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  private onClick = (ev: Event) => {\n    if (this.el.shadowRoot && (this.el as any).attachShadow) {\n      // this button wants to specifically submit a form\n      // climb up the dom to see if we're in a <form>\n      // and if so, then use JS to submit it\n      const form = this.el.closest('form');\n      if (form) {\n        ev.preventDefault();\n\n        const fakeButton = document.createElement('button');\n        fakeButton.type = this.buttonType;\n        fakeButton.style.display = 'none';\n        form.appendChild(fakeButton);\n        fakeButton.click();\n        fakeButton.remove();\n      }\n    }\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  render() {\n    const { buttonType, disabled, href, rel, target, color } = this;\n    const TagType = this.href === undefined ? 'button' : 'a' as any;\n    const attrs = (TagType === 'button')\n      ? { type: buttonType }\n      : {\n        download: this.download,\n        href,\n        rel,\n        target,\n      };\n    const colorClass = this.outline ? `btn-outline-${color}` : `btn-${color}`;\n    const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n    const expandClass = this.expand ? 'btn-block' : '';\n\n    return (\n      <Host\n        class={`${colorClass} ${sizeClass} ${expandClass}`}\n        onClick={this.onClick}\n        aria-disabled={disabled ? 'true' : null}\n      >\n        <TagType\n          {...attrs}\n          class=\"button-native\"\n          part=\"native\"\n          disabled={disabled}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <slot name=\"start\"/>\n          <slot/>\n          <slot name=\"end\"/>\n        </TagType>\n      </Host>\n    );\n  }\n}"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the button.\n * ex if onlyIcon `<road-icon name=\"shopping-cart-add\"></road-icon>`\n * @slot start - Left content of the button text, usually for icon.\n * @slot end - Right content of the button text, usually icon.\n *\n * @part native - The native HTML button or anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class Button {\n\n  @Element() el!: HTMLRoadButtonElement;\n\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color?: 'primary' | 'secondary' | 'ghost' |'default' = 'default';\n\n  /**\n    * The button size.\n    */\n  @Prop({ reflect: true }) size?: 'sm' | 'md' | 'lg' | 'xl' = 'lg';\n\n  /**\n   * The type of the button.\n   */\n  @Prop() buttonType: 'submit' | 'reset' | 'button' = 'button';\n\n  /**\n   * If `true`, display only an icon in the button.\n   */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the button.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Set to `true` for a full-width button.\n   */\n  @Prop({ reflect: true }) expand: boolean = 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;\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;\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;\n\n  /**\n   * Set to `false` for a ghost button, set to `true` for a default outline button\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * Emitted when the button has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  private onClick = (ev: Event) => {\n    if (this.el.shadowRoot && (this.el as any).attachShadow) {\n      // this button wants to specifically submit a form\n      // climb up the dom to see if we're in a <form>\n      // and if so, then use JS to submit it\n      const form = this.el.closest('form');\n      if (form) {\n        ev.preventDefault();\n\n        const fakeButton = document.createElement('button');\n        fakeButton.type = this.buttonType;\n        fakeButton.style.display = 'none';\n        form.appendChild(fakeButton);\n        fakeButton.click();\n        fakeButton.remove();\n      }\n    }\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  render() {\n    const { buttonType, disabled, href, rel, target, color } = this;\n    const TagType = this.href === undefined ? 'button' : 'a' as any;\n    const attrs = (TagType === 'button')\n      ? { type: buttonType }\n      : {\n        download: this.download,\n        href,\n        rel,\n        target,\n      };\n    const colorClass = this.outline ? `btn-outline-${color}` : `btn-${color}`;\n    const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n    const expandClass = this.expand ? 'btn-block' : '';\n    const iconOnlyClass = this.iconOnly ? 'btn-icon' : '';\n\n    return (\n      <Host\n        class={`${colorClass} ${sizeClass} ${expandClass} ${iconOnlyClass}`}\n        onClick={this.onClick}\n        aria-disabled={disabled ? 'true' : null}\n      >\n        <TagType\n          {...attrs}\n          class=\"button-native\"\n          part=\"native\"\n          disabled={disabled}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <slot name=\"start\"/>\n          <slot/>\n          <slot name=\"end\"/>\n        </TagType>\n      </Host>\n    );\n  }\n}"]}

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

@@ -26,6 +26,9 @@ export default {
     disabled: {
       control: 'boolean',
     },
+    'icon-only': {
+      control: 'boolean',
+    },
     download: {
       control: {
         type: null,
@@ -125,6 +128,7 @@ export default {
   },
   args: {
     'button-type': null,
+    'icon-only': null,
     color: null,
     disabled: null,
     expand: null,
@@ -139,6 +143,7 @@ export default {
 const Template = (args) => html`
 <road-button 
   button-type="${ifDefined(args['button-type'])}"
+  icon-only="${ifDefined(args['icon-only'])}"
   color="${ifDefined(args.color)}"
   disabled="${ifDefined(args.disabled)}"
   expand="${ifDefined(args.expand)}"
@@ -186,6 +191,14 @@ Disabled.args = {
   disabled: true,
 };
 
+export const Icon = Template.bind({});
+Icon.args = {
+  color: 'primary',
+  outline: true,
+  'icon-only': true,
+  ' ': `<road-icon name="shopping-cart-add"></road-icon>`,
+};
+
 export const BackButton = Template.bind({});
 BackButton.args = {
   start: `<road-icon slot="start" name="navigation-chevron" rotate="180"></road-icon>`,

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

@@ -1,8 +1,3 @@
-:host{
-  display: flex;
-  flex-wrap: wrap;
-}
-
 .invalid-feedback {
   width: 100%;
   margin-top: 0;

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

@@ -1,73 +1,104 @@
 import { Host, h } from '@stencil/core';
-import { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js';
+import { PhoneNumberFormat, PhoneNumberType, PhoneNumberUtil, } from 'google-libphonenumber';
 export class RoadPhoneNumberInput {
   constructor() {
     this.countryData = [];
     this.language = 'fr';
     this.areaLabel = 'Country';
+    this.areaValue = '';
     this.inputLabel = 'Number';
+    this.inputValue = '';
     this.required = false;
-    this.error = undefined;
     this.selectedCountry = '';
     this.phoneNumber = '';
+    this.inputError = '';
     this.countryOptions = [];
   }
   languageChanged() {
-    // console.log('language changed from', oldValue, 'to', newValue);
     this.updateCountryOptions();
   }
   updateCountryOptions() {
     const validLanguage = this.language && this.countryData[0].translations[this.language] ? this.language : 'fr';
-    // console.log('Langue valide:', validLanguage);
     this.countryOptions = this.countryData.map(country => {
-      // console.log('Option avant mise à jour:', country.translations[this.language], country.translations[validLanguage]);
       return {
-        value: `+${country.phoneCode}`,
+        value: country.phoneCode,
         label: `${country.translations[validLanguage]} (+${country.phoneCode})`,
-        selected: country.countryCode === this.selectedCountry,
+        selected: country.countryCode === this.selectedCountry, // Ici, nous marquons l'option par défaut comme sélectionnée
       };
     });
   }
-  getCountryOptions() {
-    return this.countryData.map(country => ({
-      value: `+${country.phoneCode}`,
-      label: `${country.translations[this.language]} (${country.phoneCode})`,
-      selected: country.countryCode === this.selectedCountry,
-    }));
-  }
   componentWillLoad() {
-    if (this.countryData.length > 0) {
-      this.selectedCountry = this.countryData[0].countryCode; // Set to country code instead of calling code
+    if (this.inputValue) {
+      this.phoneNumber = this.inputValue;
+    }
+    if (this.areaValue) {
+      this.selectedCountry = this.getPhoneCountryCode(this.areaValue);
+    }
+    else {
+      if (this.countryData && this.countryData.length > 0) {
+        this.selectedCountry = this.countryData[0].countryCode;
+      }
     }
     this.updateCountryOptions();
   }
-  handleInput(event) {
-    const input = event.target;
-    const asYouType = new AsYouType(this.selectedCountry);
-    this.phoneNumber = asYouType.input(input.value);
+  getPhoneCountryCode(phoneCode) {
+    var _a, _b;
+    return (_b = (_a = this.countryData.find((country) => country.phoneCode === phoneCode)) === null || _a === void 0 ? void 0 : _a.countryCode) !== null && _b !== void 0 ? _b : '';
+  }
+  handleSelect(event) {
+    const receivedPhoneCode = event.detail.value.replace('+', '');
+    const phoneCountryCode = this.getPhoneCountryCode(receivedPhoneCode);
+    this.selectedCountry = phoneCountryCode;
+    this.createReturnObject();
+  }
+  createReturnObject() {
+    var _a, _b, _c, _d;
+    const returnObject = {
+      isError: true,
+      phone: {
+        phoneNumberType: 'UNKNOWN',
+        countryCode: this.selectedCountry,
+        nationalNumber: this.phoneNumber,
+        phoneCode: (_b = (_a = this.countryData.find((country) => country.countryCode === this.selectedCountry)) === null || _a === void 0 ? void 0 : _a.phoneCode) !== null && _b !== void 0 ? _b : '',
+        internationalNumber: this.phoneNumber,
+      },
+    };
+    // create instance
+    const phoneUtil = PhoneNumberUtil.getInstance();
+    const PNF = PhoneNumberFormat;
     // Parse and verify the phone number
-    const parsedPhoneNumber = parsePhoneNumberFromString(input.value, this.selectedCountry);
-    if (parsedPhoneNumber && parsedPhoneNumber.isValid()) {
-      const phoneNumberInput = this.el;
-      const phoneNumberType = parsedPhoneNumber.getType();
-      const countryCode = parsedPhoneNumber.country;
-      const phoneCode = parsedPhoneNumber.countryCallingCode;
-      const national = parsedPhoneNumber.nationalNumber;
-      const international = parsedPhoneNumber.number;
-      phoneNumberInput.setAttribute("error", "");
-      phoneNumberInput.setAttribute("phoneNumberType", phoneNumberType);
-      phoneNumberInput.setAttribute("countryCode", countryCode);
-      phoneNumberInput.setAttribute("phoneCode", phoneCode);
-      phoneNumberInput.setAttribute("nationalnumber", national);
-      phoneNumberInput.setAttribute("internationalnumber", international);
-    }
-    else {
-      // ajoute le nouvel élément créé et son contenu dans le DOM
-      const phoneNumberInput = this.el;
-      const input = document.getElementById('phone-number');
-      input.classList.add("is-invalid");
-      phoneNumberInput.setAttribute("error", "Numéro de téléphone non valide");
+    try {
+      const parsedPhoneNumber = phoneUtil.parse(this.phoneNumber, this.selectedCountry);
+      const phoneType = Object.entries(PhoneNumberType).find(entry => entry[1] === phoneUtil.getNumberType(parsedPhoneNumber));
+      const phoneCode = parsedPhoneNumber.getCountryCode();
+      // get the phone's country code and updates the areaValue 
+      if (phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)) {
+        this.selectedCountry = phoneUtil.getRegionCodeForNumber(parsedPhoneNumber);
+        const computedPhoneCode = (_d = (_c = this.countryData.find(country => country.countryCode == this.selectedCountry)) === null || _c === void 0 ? void 0 : _c.phoneCode) !== null && _d !== void 0 ? _d : '';
+        this.areaValue = computedPhoneCode;
+      }
+      if (parsedPhoneNumber && phoneUtil.isValidNumber(parsedPhoneNumber)) {
+        returnObject.isError = false;
+        returnObject.phone = {
+          phoneNumberType: phoneType ? phoneType[0] : 'UNKNOWN',
+          countryCode: phoneUtil.getRegionCodeForNumber(parsedPhoneNumber),
+          phoneCode,
+          nationalNumber: phoneUtil.format(parsedPhoneNumber, PNF.NATIONAL),
+          internationalNumber: phoneUtil.format(parsedPhoneNumber, PNF.E164),
+        };
+        this.inputError = '';
+      }
+      else {
+        this.inputError = 'Numéro de téléphone non valide';
+      }
     }
+    catch (_e) { }
+    this.roadPhoneNumberInput.emit(returnObject);
+  }
+  handleInput(event) {
+    this.updateCountryOptions();
+    this.phoneNumber = event.detail.value;
+    this.createReturnObject();
   }
   extractCallingCode(countryString) {
     const regex = /\(([^)]+)\)/;
@@ -77,14 +108,10 @@ export class RoadPhoneNumberInput {
   selectCountry(event) {
     const countryString = event.detail.value; // Get the value from the custom event
     this.selectedCountry = this.extractCallingCode(countryString);
-    this.el.querySelector('road-input').value = countryString;
+    this.el.querySelector('.form-select-area-value').innerHTML = countryString;
   }
   render() {
-    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-    // console.log('render called with language', this.language);
-    // const countryOptions = this.getCountryOptions();
-    // console.log((this.el.querySelector('road-area-code') as HTMLRoadAreaCodeElement).value);
-    return (h(Host, null, h("road-input-group", null, h("road-area-code", { slot: "prepend", class: `form-select has-value`, label: this.areaLabel, sizes: "xl", options: this.countryOptions, onRoadchange: this.selectCountry.bind(this) }), h("road-input", { id: "phone-number", sizes: "xl", label: this.inputLabel, onInput: (event) => this.handleInput(event), value: `+` + this.countryData[0].phoneCode, required: this.required, class: `${isInvalidClass}` })), this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error)));
+    return (h(Host, null, h("road-input-group", null, h("road-area-code", { slot: "prepend", class: `form-select has-value`, label: this.areaLabel, value: this.areaValue, sizes: "xl", options: this.countryOptions, onRoadchange: (event) => this.handleSelect(event) }), h("road-input", { id: "phone-number", sizes: "xl", label: this.inputLabel, value: this.inputValue, onRoadChange: (event) => this.handleInput(event), required: this.required, error: this.inputError }))));
   }
   static get is() { return "road-phone-number-input"; }
   static get encapsulation() { return "scoped"; }
@@ -156,6 +183,24 @@ export class RoadPhoneNumberInput {
         "reflect": false,
         "defaultValue": "'Country'"
       },
+      "areaValue": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "area-value",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "inputLabel": {
         "type": "string",
         "mutable": false,
@@ -174,40 +219,41 @@ export class RoadPhoneNumberInput {
         "reflect": false,
         "defaultValue": "'Number'"
       },
-      "required": {
-        "type": "boolean",
+      "inputValue": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the user must fill in a value before submitting a form."
+          "text": ""
         },
-        "attribute": "required",
+        "attribute": "input-value",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "''"
       },
-      "error": {
-        "type": "string",
+      "required": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Error message for the field"
+          "text": "If `true`, the user must fill in a value before submitting a form."
         },
-        "attribute": "error",
-        "reflect": false
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -215,11 +261,31 @@ export class RoadPhoneNumberInput {
     return {
       "selectedCountry": {},
       "phoneNumber": {},
+      "inputError": {},
       "countryOptions": {}
     };
   }
   static get events() {
     return [{
+        "method": "roadPhoneNumberInput",
+        "name": "roadPhoneNumberInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitt object data."
+        },
+        "complexType": {
+          "original": "{\n    isError: boolean;\n    phone: PhoneReturnType;\n  }",
+          "resolved": "{ isError: boolean; phone: PhoneReturnType; }",
+          "references": {
+            "PhoneReturnType": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
         "method": "roadselected",
         "name": "roadselected",
         "bubbles": true,

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, Watch, Event, EventEmitter } from '@stencil/core';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js';\n\ntype CountryType = {\n  translations: { [key: string]: string },\n  countryCode: string,\n  phoneCode: string\n};\n\n@Component({\n  tag: 'road-phone-number-input',\n  styleUrl: 'phone-number-input.css',\n  scoped: true,\n})\nexport class RoadPhoneNumberInput {\n  @Element() el!: HTMLRoadPhoneNumberInputElement;\n\n  @Prop() countryData: CountryType[] = [];\n  @Prop() language: string = 'fr'; \n  @Prop() areaLabel: string = 'Country';\n  @Prop() inputLabel: string = 'Number';\n\n    /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n    @Prop() required = false;\n\n      /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  @State() selectedCountry: string = '';\n  @State() phoneNumber: string = '';\n\n  @State() countryOptions: { value: string; label: string; selected: boolean }[] = [];\n\n  @Watch('language')\n  \n  languageChanged() {\n    // console.log('language changed from', oldValue, 'to', newValue);\n    this.updateCountryOptions();\n  }\n\nupdateCountryOptions() {\n  const validLanguage = this.language && this.countryData[0].translations[this.language] ? this.language : 'fr';\n  // console.log('Langue valide:', validLanguage);\n  this.countryOptions = this.countryData.map(country => {\n    // console.log('Option avant mise à jour:', country.translations[this.language], country.translations[validLanguage]);\n    return {\n      value: `+${country.phoneCode}`, // country.translations[validLanguage] pour mettre les nom des pays\n      label: `${country.translations[validLanguage]} (+${country.phoneCode})`,\n      selected: country.countryCode === this.selectedCountry,\n    };\n  });\n}\n\n\n\n  getCountryOptions() {\n    return this.countryData.map(country => ({\n      value: `+${country.phoneCode}`,\n      label: `${country.translations[this.language]} (${country.phoneCode})`, \n      selected: country.countryCode === this.selectedCountry,\n    }));\n  }\n\n  componentWillLoad() {\n    if (this.countryData.length > 0) {\n      this.selectedCountry = this.countryData[0].countryCode;  // Set to country code instead of calling code\n\n    }\n    this.updateCountryOptions();\n  }\n  \n\n  handleInput(event: Event) {\n    const input = event.target as HTMLInputElement;\n    const asYouType = new AsYouType(this.selectedCountry as any);\n    this.phoneNumber = asYouType.input(input.value);\n\n    // Parse and verify the phone number\n    const parsedPhoneNumber = parsePhoneNumberFromString(input.value, this.selectedCountry as any);\n    if (parsedPhoneNumber && parsedPhoneNumber.isValid() ) {\n      const phoneNumberInput = (this.el as HTMLRoadPhoneNumberInputElement);\n      const phoneNumberType = parsedPhoneNumber.getType() as string;\n      const countryCode = parsedPhoneNumber.country as string;\n      const phoneCode = parsedPhoneNumber.countryCallingCode as string;\n      const national = parsedPhoneNumber.nationalNumber as string;\n      const international = parsedPhoneNumber.number as string;\n      phoneNumberInput.setAttribute(\"error\",\"\")\n      phoneNumberInput.setAttribute(\"phoneNumberType\", phoneNumberType)\n      phoneNumberInput.setAttribute(\"countryCode\", countryCode)\n      phoneNumberInput.setAttribute(\"phoneCode\", phoneCode)\n      phoneNumberInput.setAttribute(\"nationalnumber\", national)\n      phoneNumberInput.setAttribute(\"internationalnumber\", international)\n\n\n    } else {\n    // ajoute le nouvel élément créé et son contenu dans le DOM\n    const phoneNumberInput = (this.el as HTMLRoadPhoneNumberInputElement);\n    const input = document.getElementById('phone-number') as any;\n    input.classList.add(\"is-invalid\");\n    phoneNumberInput.setAttribute(\"error\",\"Numéro de téléphone non valide\")\n    }    \n}\n\n  /**\n   * Emitted the value and label of the option selected.\n   */\n  @Event() roadselected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n  /** @internal */\n  @Event() roadSelected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n\n  extractCallingCode(countryString: string) {\n    const regex = /\\(([^)]+)\\)/;\n    const found = countryString.match(regex);\n    return found ? found[1] : '';\n  }\n\n  selectCountry(event: CustomEvent) {\n    const countryString = event.detail.value;  // Get the value from the custom event\n    this.selectedCountry = this.extractCallingCode(countryString);\n    (this.el.querySelector('road-input') as HTMLRoadInputElement).value = countryString;\n  }\n\n  render() {\n\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    // console.log('render called with language', this.language);\n    // const countryOptions = this.getCountryOptions();\n    // console.log((this.el.querySelector('road-area-code') as HTMLRoadAreaCodeElement).value);\n        \n\n    return (\n      <Host>\n        <road-input-group>\n        <road-area-code\n            slot=\"prepend\"\n            class={`form-select has-value`}\n            label={this.areaLabel}\n            sizes=\"xl\"\n            options={this.countryOptions}\n            onRoadchange={this.selectCountry.bind(this)}\n          ></road-area-code>\n          <road-input\n            id=\"phone-number\"\n            sizes=\"xl\" \n            label={this.inputLabel}  // Transmission du label au composant road-input\n            onInput={(event) => this.handleInput(event)} \n            value={`+` + this.countryData[0].phoneCode}\n            required={this.required}\n            class={`${isInvalidClass}`}\n          ></road-input>\n        </road-input-group>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\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, Watch, Event, EventEmitter } from '@stencil/core';\nimport {\n  PhoneNumberFormat,\n  PhoneNumberType,\n  PhoneNumberUtil,\n} from 'google-libphonenumber';\n\ntype CountryType = {\n  translations: { [key: string]: string },\n  countryCode: string,\n  phoneCode: string\n};\n\ninterface PhoneReturnType {\n  phoneNumberType: string;\n  countryCode: string;\n  nationalNumber: string;\n  phoneCode: string;\n  internationalNumber: string;\n}\n\n@Component({\n  tag: 'road-phone-number-input',\n  styleUrl: 'phone-number-input.css',\n  scoped: true,\n})\nexport class RoadPhoneNumberInput {\n\n  /**\n * Emitt object data.\n */\n  @Event() roadPhoneNumberInput!: EventEmitter<{\n    isError: boolean;\n    phone: PhoneReturnType;\n  }>;\n\n  @Element() el!: HTMLRoadPhoneNumberInputElement;\n\n  @Prop() countryData: CountryType[] = [];\n  @Prop() language: string = 'fr';\n  @Prop() areaLabel: string = 'Country';\n  @Prop({ mutable: true }) areaValue: string = '';\n  @Prop() inputLabel: string = 'Number';\n  @Prop() inputValue: string = '';\n\n  /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n  @Prop() required = false;\n\n  @State() selectedCountry: string = '';\n  @State() phoneNumber: string = '';\n\n  @State() inputError: string = '';\n\n  @State() countryOptions: { value: string; label: string; selected: boolean }[] = [];\n\n  @Watch('language')\n  languageChanged() {\n    this.updateCountryOptions();\n  }\n\n  updateCountryOptions() {\n    const validLanguage = this.language && this.countryData[0].translations[this.language] ? this.language : 'fr';\n    this.countryOptions = this.countryData.map(country => {\n      return {\n        value: country.phoneCode,\n        label: `${country.translations[validLanguage]} (+${country.phoneCode})`,\n        selected: country.countryCode === this.selectedCountry,  // Ici, nous marquons l'option par défaut comme sélectionnée\n      };\n    });\n  }\n\n  componentWillLoad() {\n    if (this.inputValue) {\n      this.phoneNumber = this.inputValue;\n    }\n\n    if (this.areaValue) {\n      this.selectedCountry = this.getPhoneCountryCode(this.areaValue);\n    } else {\n      if (this.countryData && this.countryData.length > 0) {\n        this.selectedCountry = this.countryData[0].countryCode;\n      }\n    }\n\n    this.updateCountryOptions();\n  }\n\n  getPhoneCountryCode(phoneCode: string): string {\n    return this.countryData.find((country) => country.phoneCode === phoneCode)?.countryCode ?? '';\n  }\n\n  handleSelect(event: any) {\n    const receivedPhoneCode = event.detail.value.replace('+', '');\n    const phoneCountryCode = this.getPhoneCountryCode(receivedPhoneCode);\n\n    this.selectedCountry = phoneCountryCode;\n\n    this.createReturnObject();\n  }\n\n  createReturnObject() {\n    const returnObject = {\n      isError: true,\n      phone: {\n        phoneNumberType: 'UNKNOWN',\n        countryCode: this.selectedCountry,\n        nationalNumber: this.phoneNumber,\n        phoneCode: this.countryData.find((country) => country.countryCode === this.selectedCountry)?.phoneCode ?? '',\n        internationalNumber: this.phoneNumber,\n      },\n    };\n\n    // create instance\n    const phoneUtil = PhoneNumberUtil.getInstance();\n    const PNF = PhoneNumberFormat;\n\n    // Parse and verify the phone number\n    try {\n      const parsedPhoneNumber = phoneUtil.parse(this.phoneNumber, this.selectedCountry as any);\n\n      const phoneType = Object.entries(PhoneNumberType).find(entry => entry[1] === phoneUtil.getNumberType(parsedPhoneNumber));\n      const phoneCode = parsedPhoneNumber.getCountryCode() as any;\n\n      // get the phone's country code and updates the areaValue \n      if (phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)) {\n        this.selectedCountry = phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)!;\n\n        const computedPhoneCode = this.countryData.find(country => country.countryCode == this.selectedCountry)?.phoneCode ?? '';\n        this.areaValue = computedPhoneCode;\n      }\n\n      if (parsedPhoneNumber && phoneUtil.isValidNumber(parsedPhoneNumber)) {\n        returnObject.isError = false;\n        returnObject.phone = {\n          phoneNumberType: phoneType ? phoneType[0] : 'UNKNOWN',\n          countryCode: phoneUtil.getRegionCodeForNumber(parsedPhoneNumber) as any,\n          phoneCode,\n          nationalNumber: phoneUtil.format(parsedPhoneNumber, PNF.NATIONAL),\n          internationalNumber: phoneUtil.format(parsedPhoneNumber, PNF.E164),\n        };\n      \n        this.inputError = '';\n\n      } else {\n        this.inputError = 'Numéro de téléphone non valide';\n      }\n    } catch {}\n\n    this.roadPhoneNumberInput.emit(returnObject);\n  }\n\n\n  handleInput(event: any) {\n    this.updateCountryOptions();\n\n    this.phoneNumber = event.detail.value;\n\n    this.createReturnObject();\n  }\n\n  /**\n   * Emitted the value and label of the option selected.\n   */\n  @Event() roadselected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n  /** @internal */\n  @Event() roadSelected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n\n  extractCallingCode(countryString: string) {\n    const regex = /\\(([^)]+)\\)/;\n    const found = countryString.match(regex);\n    return found ? found[1] : '';\n  }\n\n  selectCountry(event: CustomEvent) {\n    const countryString = event.detail.value;  // Get the value from the custom event\n    this.selectedCountry = this.extractCallingCode(countryString);\n    (this.el.querySelector('.form-select-area-value') as HTMLElement).innerHTML = countryString;\n  }\n\n  render() {\n    return (\n      <Host>\n        <road-input-group>\n          <road-area-code\n            slot=\"prepend\"\n            class={`form-select has-value`}\n            label={this.areaLabel}\n            value={this.areaValue}\n            sizes=\"xl\"\n            options={this.countryOptions}\n            onRoadchange={(event) => this.handleSelect(event)}\n          ></road-area-code>\n          <road-input\n            id=\"phone-number\"\n            sizes=\"xl\"\n            label={this.inputLabel}\n            value={this.inputValue}\n            onRoadChange={(event) => this.handleInput(event)}\n            required={this.required}\n            error={this.inputError}\n          ></road-input>\n        </road-input-group>\n      </Host>\n    );\n  }\n}\n\n\n"]}

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

@@ -16,15 +16,18 @@ export default {
     required: {
       control: 'boolean',
     },
-    error: {
-      control: 'text',
-    },
     areaLabel: {
       control: 'text',
     },
     inputLabel: {
       control: 'text',
     },
+    areaValue: {
+      control: 'text',
+    },
+    inputValue: {
+      control: 'text',
+    },
   },
   args: {
     required: null,
@@ -538,19 +541,22 @@ export default {
       }
     ],
     areaLabel: 'Indicatif',
+    areaValue: '',
     language: 'fr',
-    inputLabel: 'Phone Number'
+    inputLabel: 'Phone Number',
+    inputValue: '',
   },
 };
 
 const Template = (args) => html`
   <road-phone-number-input
   required="${ifDefined(args.required)}"
-  error="${ifDefined(args.error)}"
   .countryData=${args.countryData}
   language=${args.language}
   area-label=${args.areaLabel}
+  area-value=${args.areaValue}
   .inputLabel=${args.inputLabel}
+  .inputValue=${args.inputValue}
   >
   </road-phone-number-input>
 `;

package/dist/collection/index.js

@@ -1,2 +1,3 @@
 export { addIcons } from './components/icon/utils';
+export { addIllustrations } from './components/illustration/utils';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { addIcons } from './components/icon/utils';\nexport { Components, JSX } from './components';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC","sourcesContent":["export { addIcons } from './components/icon/utils';\nexport { addIllustrations } from './components/illustration/utils';\nexport { Components, JSX } from './components';"]}