@roadtrip/components 2.25.1 → 2.27.1

package/dist/esm/road-carousel.entry.js

@@ -6,22 +6,22 @@ const carouselCss = "@font-face{font-family:swiper-icons;src:url('data:applicati
 let Carousel = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.roadSlidesDidLoad = createEvent(this, "roadSlidesDidLoad", 7);
-    this.roadSlideTap = createEvent(this, "roadSlideTap", 7);
-    this.roadSlideDoubleTap = createEvent(this, "roadSlideDoubleTap", 7);
-    this.roadSlideWillChange = createEvent(this, "roadSlideWillChange", 7);
-    this.roadSlideDidChange = createEvent(this, "roadSlideDidChange", 7);
-    this.roadSlideNextStart = createEvent(this, "roadSlideNextStart", 7);
-    this.roadSlidePrevStart = createEvent(this, "roadSlidePrevStart", 7);
-    this.roadSlideNextEnd = createEvent(this, "roadSlideNextEnd", 7);
-    this.roadSlidePrevEnd = createEvent(this, "roadSlidePrevEnd", 7);
-    this.roadSlideTransitionStart = createEvent(this, "roadSlideTransitionStart", 7);
-    this.roadSlideTransitionEnd = createEvent(this, "roadSlideTransitionEnd", 7);
-    this.roadSlideDrag = createEvent(this, "roadSlideDrag", 7);
-    this.roadSlideReachStart = createEvent(this, "roadSlideReachStart", 7);
-    this.roadSlideReachEnd = createEvent(this, "roadSlideReachEnd", 7);
-    this.roadSlideTouchStart = createEvent(this, "roadSlideTouchStart", 7);
-    this.roadSlideTouchEnd = createEvent(this, "roadSlideTouchEnd", 7);
+    this.roadslidesdidload = createEvent(this, "roadslidesdidload", 7);
+    this.roadslidetap = createEvent(this, "roadslidetap", 7);
+    this.roadslidedoubletap = createEvent(this, "roadslidedoubletap", 7);
+    this.roadslidewillchange = createEvent(this, "roadslidewillchange", 7);
+    this.roadslidedidchange = createEvent(this, "roadslidedidchange", 7);
+    this.roadslidenextstart = createEvent(this, "roadslidenextstart", 7);
+    this.roadslideprevstart = createEvent(this, "roadslideprevstart", 7);
+    this.roadslidenextend = createEvent(this, "roadslidenextend", 7);
+    this.roadslideprevend = createEvent(this, "roadslideprevend", 7);
+    this.roadslidetransitionstart = createEvent(this, "roadslidetransitionstart", 7);
+    this.roadslidetransitionend = createEvent(this, "roadslidetransitionend", 7);
+    this.roadslidedrag = createEvent(this, "roadslidedrag", 7);
+    this.roadslidereachstart = createEvent(this, "roadslidereachstart", 7);
+    this.roadslidereachend = createEvent(this, "roadslidereachend", 7);
+    this.roadslidetouchstart = createEvent(this, "roadslidetouchstart", 7);
+    this.roadslidetouchend = createEvent(this, "roadslidetouchend", 7);
     this.swiperReady = false;
     this.swiper = new Promise(resolve => {
       this.readySwiper = resolve;
@@ -345,39 +345,39 @@ let Carousel = class {
       on: {
         init: () => {
           setTimeout(() => {
-            this.roadSlidesDidLoad.emit();
+            this.roadslidesdidload.emit();
           }, 20);
         },
         // @ts-ignore
-        slideChangeTransitionStart: this.roadSlideWillChange.emit,
+        slideChangeTransitionStart: this.roadslidewillchange.emit,
         // @ts-ignore
-        slideChangeTransitionEnd: this.roadSlideDidChange.emit,
+        slideChangeTransitionEnd: this.roadslidedidchange.emit,
         // @ts-ignore
-        slideNextTransitionStart: this.roadSlideNextStart.emit,
+        slideNextTransitionStart: this.roadslidenextstart.emit,
         // @ts-ignore
-        slidePrevTransitionStart: this.roadSlidePrevStart.emit,
+        slidePrevTransitionStart: this.roadslideprevstart.emit,
         // @ts-ignore
-        slideNextTransitionEnd: this.roadSlideNextEnd.emit,
+        slideNextTransitionEnd: this.roadslidenextend.emit,
         // @ts-ignore
-        slidePrevTransitionEnd: this.roadSlidePrevEnd.emit,
+        slidePrevTransitionEnd: this.roadslideprevend.emit,
         // @ts-ignore
-        transitionStart: this.roadSlideTransitionStart.emit,
+        transitionStart: this.roadslidetransitionstart.emit,
         // @ts-ignore
-        transitionEnd: this.roadSlideTransitionEnd.emit,
+        transitionEnd: this.roadslidetransitionend.emit,
         // @ts-ignore
-        sliderMove: this.roadSlideDrag.emit,
+        sliderMove: this.roadslidedrag.emit,
         // @ts-ignore
-        reachBeginning: this.roadSlideReachStart.emit,
+        reachBeginning: this.roadslidereachstart.emit,
         // @ts-ignore
-        reachEnd: this.roadSlideReachEnd.emit,
+        reachEnd: this.roadslidereachend.emit,
         // @ts-ignore
-        touchStart: this.roadSlideTouchStart.emit,
+        touchStart: this.roadslidetouchstart.emit,
         // @ts-ignore
-        touchEnd: this.roadSlideTouchEnd.emit,
+        touchEnd: this.roadslidetouchend.emit,
         // @ts-ignore
-        tap: this.roadSlideTap.emit,
+        tap: this.roadslidetap.emit,
         // @ts-ignore
-        doubleTap: this.roadSlideDoubleTap.emit,
+        doubleTap: this.roadslidedoubletap.emit,
       },
     };
     const customEvents = (!!this.options && !!this.options.on) ? this.options.on : {};

package/dist/esm/road-checkbox.entry.js

@@ -6,8 +6,11 @@ const checkboxCss = ".sc-road-checkbox-h{position:relative;display:block;margin-
 let Checkbox = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadchange = createEvent(this, "roadchange", 7);
     this.roadChange = createEvent(this, "roadChange", 7);
+    this.roadfocus = createEvent(this, "roadfocus", 7);
     this.roadFocus = createEvent(this, "roadFocus", 7);
+    this.roadblur = createEvent(this, "roadblur", 7);
     this.roadBlur = createEvent(this, "roadBlur", 7);
     /**
      * The id of checkbox
@@ -45,13 +48,19 @@ let Checkbox = class {
       this.checked = !this.checked;
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
   }
   checkedChanged(isChecked) {
+    this.roadchange.emit({
+      checked: isChecked,
+      value: this.value,
+    });
     this.roadChange.emit({
       checked: isChecked,
       value: this.value,

package/dist/esm/road-counter.entry.js

@@ -5,7 +5,9 @@ const counterCss = ".sc-road-counter-h{--counter-margin-bottom:1rem;display:bloc
 let Counter = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadincrease = createEvent(this, "roadincrease", 7);
     this.roadIncrease = createEvent(this, "roadIncrease", 7);
+    this.roaddecrease = createEvent(this, "roaddecrease", 7);
     this.roadDecrease = createEvent(this, "roadDecrease", 7);
     /**
      * The id of counter
@@ -17,10 +19,12 @@ let Counter = class {
     this.value = 1;
     this.increase = () => {
       this.el.querySelector('input').stepUp();
+      this.roadincrease.emit();
       this.roadIncrease.emit();
     };
     this.decrease = () => {
       this.el.querySelector('input').stepDown();
+      this.roaddecrease.emit();
       this.roadDecrease.emit();
     };
   }

package/dist/esm/road-duration.entry.js

@@ -0,0 +1,56 @@
+import { r as registerInstance, c as createEvent, h, e as getElement } from './index-0c8a0e04.js';
+
+const durationCss = ":host{display:block}road-drawer{--background:var(--background-second)}.duration-values{-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:100%;padding:2.625rem 0 2.625rem 3rem;-webkit-scroll-snap-type:x proximity;-ms-scroll-snap-type:x proximity;scroll-snap-type:x proximity;overflow:scroll}.duration-values>road-col:first-child{scroll-snap-align:center}.duration-values>road-col:not(:first-child){scroll-snap-align:start}road-card{--margin-bottom:0}road-card::part(native){padding:1rem}";
+
+let Duration = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.roadselected = createEvent(this, "roadselected", 7);
+    /**
+     * Set isOpen property to true to open the duration widget
+     */
+    this.isOpen = false;
+    /**
+     * title of the widget
+     */
+    this.header = 'duration';
+    /**
+     * The minimum value, which must not be greater than its maximum (max attribute) value in minutes.
+     */
+    this.min = 15;
+    /**
+     * The maximum value, which must not be less than its minimum (min attribute) value in minutes.
+     */
+    this.max = 300;
+    /**
+     * Works with the min and max attributes to limit the increments at which a value can be set in minutes.
+     */
+    this.step = 15;
+  }
+  handleClick(event) {
+    this.roadselected.emit({
+      value: event.detail.value.toString(),
+      label: event.detail.label,
+    });
+    this.close();
+  }
+  /**
+   * Open the widget
+   */
+  async open() {
+    this.isOpen = true;
+  }
+  /**
+   * Close the widget
+   */
+  async close() {
+    this.isOpen = false;
+  }
+  render() {
+    return (h("road-drawer", { "is-open": this.isOpen, position: "bottom", "drawer-title": this.header }, h("road-grid", null, h("road-row", { class: "duration-values" }, Array(Math.floor((this.max - this.min) / this.step) + 1).fill(this.min).map(((item, index) => (item + index * this.step))).map(item => h("road-col", { class: "col-3 col-md-2" }, h("road-card", { button: true, value: item }, h("road-label", null, Math.floor(item / 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false }), ":", (item % 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false })))))))));
+  }
+  get el() { return getElement(this); }
+};
+Duration.style = durationCss;
+
+export { Duration as road_duration };

package/dist/esm/road-img.entry.js

@@ -5,13 +5,18 @@ const imgCss = ":host{display:block;-o-object-fit:contain;object-fit:contain}.na
 let Img = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadimgwillload = createEvent(this, "roadimgwillload", 7);
     this.roadImgWillLoad = createEvent(this, "roadImgWillLoad", 7);
+    this.roadimgdidload = createEvent(this, "roadimgdidload", 7);
     this.roadImgDidLoad = createEvent(this, "roadImgDidLoad", 7);
+    this.roaderror = createEvent(this, "roaderror", 7);
     this.roadError = createEvent(this, "roadError", 7);
     this.onLoad = () => {
+      this.roadimgdidload.emit();
       this.roadImgDidLoad.emit();
     };
     this.onError = () => {
+      this.roaderror.emit();
       this.roadError.emit();
     };
   }
@@ -49,6 +54,7 @@ let Img = class {
   load() {
     this.loadError = this.onError;
     this.loadSrc = this.src;
+    this.roadimgwillload.emit();
     this.roadImgWillLoad.emit();
   }
   removeIO() {

package/dist/esm/road-input.entry.js

@@ -19,9 +19,13 @@ const debounce = (func, wait = 0) => {
 let Input = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadinput = createEvent(this, "roadinput", 7);
     this.roadInput = createEvent(this, "roadInput", 7);
+    this.roadchange = createEvent(this, "roadchange", 7);
     this.roadChange = createEvent(this, "roadChange", 7);
+    this.roadblur = createEvent(this, "roadblur", 7);
     this.roadBlur = createEvent(this, "roadBlur", 7);
+    this.roadfocus = createEvent(this, "roadfocus", 7);
     this.roadFocus = createEvent(this, "roadFocus", 7);
     /**
      * The id of input
@@ -84,22 +88,27 @@ let Input = class {
       if (input) {
         this.value = input.value || '';
       }
+      this.roadinput.emit(ev);
       this.roadInput.emit(ev);
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
   }
   debounceChanged() {
+    this.roadchange = debounceEvent(this.roadchange, this.debounce);
     this.roadChange = debounceEvent(this.roadChange, this.debounce);
   }
   /**
    * Update the native input element when the value changes
    */
   valueChanged() {
+    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });
     this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });
   }
   getValue() {

package/dist/esm/road-navbar-item.entry.js

@@ -5,6 +5,7 @@ const navbarItemCss = ":host{-ms-flex:1 1 0%;flex:1 1 0%;-ms-flex-direction:colu
 let NavbarItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadnavbaritemclick = createEvent(this, "roadnavbaritemclick", 7);
     this.roadNavbarItemClick = createEvent(this, "roadNavbarItemClick", 7);
     /**
      * If `true`, the user cannot interact with the tab button.
@@ -29,6 +30,11 @@ let NavbarItem = class {
   selectTab(ev) {
     if (this.tab !== undefined) {
       if (!this.disabled) {
+        this.roadnavbaritemclick.emit({
+          tab: this.tab,
+          href: this.href,
+          selected: this.selected,
+        });
         this.roadNavbarItemClick.emit({
           tab: this.tab,
           href: this.href,

package/dist/esm/road-navbar.entry.js

@@ -6,10 +6,14 @@ const navbarCss = ":host{--z-index:10;position:fixed;bottom:0;z-index:var(--z-in
 let Navbar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadnavbarchanged = createEvent(this, "roadnavbarchanged", 7);
     this.roadNavbarChanged = createEvent(this, "roadNavbarChanged", 7);
   }
   selectedTabChanged() {
     if (this.selectedTab !== undefined) {
+      this.roadnavbarchanged.emit({
+        tab: this.selectedTab,
+      });
       this.roadNavbarChanged.emit({
         tab: this.selectedTab,
       });

package/dist/esm/road-plate-number.entry.js

@@ -1,14 +1,18 @@
 import { r as registerInstance, c as createEvent, h } from './index-0c8a0e04.js';
 import { l as licensePlateStarEu } from './index-1ea26b25.js';
 
-const plateNumberCss = ".sc-road-plate-number-h{display:block}.plate-number.sc-road-plate-number{--margin-bottom:0}.plate-number-start.sc-road-plate-number,.plate-number-end.sc-road-plate-number{width:1.75rem;height:3rem;background:var(--info-text)}.input-group-prepend.sc-road-plate-number{margin-right:-1px}.input-group-prepend.sc-road-plate-number,.input-group-append.sc-road-plate-number{padding:0}.plate-number-start.sc-road-plate-number{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;margin-right:0;color:var(--info-contrast);border-radius:3px 0 0 3px}.plate-number-icon.sc-road-plate-number{width:1.25rem;height:1.25rem;color:#f3db53}.plate-number-location.sc-road-plate-number{font-size:0.875rem;font-weight:700}.plate-number-end.sc-road-plate-number{border-radius:0 3px 3px 0}.plate-number-input.sc-road-plate-number{position:relative;display:block;height:3rem;margin:0;font-family:Oswald, sans-serif;font-size:2rem;color:var(--text);text-align:center;background:var(--white);border:1px solid var(--border-form);border-radius:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.plate-number-input.sc-road-plate-number::-webkit-input-placeholder{color:var(--border);opacity:1}.plate-number-input.sc-road-plate-number::-moz-placeholder{color:var(--border);opacity:1}.plate-number-input.sc-road-plate-number:-ms-input-placeholder{color:var(--border);opacity:1}.plate-number-input.sc-road-plate-number::-ms-input-placeholder{color:var(--border);opacity:1}.plate-number-input.sc-road-plate-number::placeholder{color:var(--border);opacity:1}.plate-number-input.sc-road-plate-number:focus{border-color:var(--secondary);outline:0}.motorbike-plate.sc-road-plate-number .plate-number-input.sc-road-plate-number{height:6rem;padding:0.75rem 1rem 0;resize:none;border-left:0}.motorbike-plate.sc-road-plate-number .input-group-prepend.sc-road-plate-number,.motorbike-plate.sc-road-plate-number .input-group-append.sc-road-plate-number{-ms-flex-align:start;align-items:flex-start;height:6rem;padding:0}.motorbike-plate.sc-road-plate-number .plate-number-start.sc-road-plate-number{border-radius:3px 0 0}.motorbike-plate.sc-road-plate-number .plate-number-end.sc-road-plate-number{border-radius:0 3px 0 0}";
+const plateNumberCss = ".sc-road-plate-number-h{display:block}.plate-number.sc-road-plate-number{--margin-bottom:0}.plate-number-start.sc-road-plate-number,.plate-number-end.sc-road-plate-number{width:1.75rem;height:3rem;background:var(--info-text)}.input-group-prepend.sc-road-plate-number{margin-right:-1px}.input-group-prepend.sc-road-plate-number,.input-group-append.sc-road-plate-number{padding:0}.plate-number-start.sc-road-plate-number{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;margin-right:0;color:var(--info-contrast);border-radius:3px 0 0 3px}.plate-number-icon.sc-road-plate-number{width:1.25rem;height:1.25rem;color:#f3db53}.plate-number-location.sc-road-plate-number{font-size:0.875rem;font-weight:700}.plate-number-end.sc-road-plate-number{border-radius:0 3px 3px 0}.plate-number-input.sc-road-plate-number{position:relative;display:block;height:3rem;margin:0;font-family:var(--font, sans-serif);font-size:1.75rem;font-weight:700;color:var(--text);text-align:center;background:var(--white);border:1px solid var(--border-form);border-radius:0;outline:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.plate-number-input.sc-road-plate-number::-webkit-input-placeholder{color:var(--border);opacity:1}.plate-number-input.sc-road-plate-number::-moz-placeholder{color:var(--border);opacity:1}.plate-number-input.sc-road-plate-number:-ms-input-placeholder{color:var(--border);opacity:1}.plate-number-input.sc-road-plate-number::-ms-input-placeholder{color:var(--border);opacity:1}.plate-number-input.sc-road-plate-number::placeholder{color:var(--border);opacity:1}.plate-number-input.sc-road-plate-number:disabled,.plate-number-input[readonly].sc-road-plate-number{color:var(--text);cursor:not-allowed;background:var(--background);border-color:var(--background);opacity:1}.plate-number-input.sc-road-plate-number:not([readonly]):focus{border-color:var(--secondary);outline:0}.motorbike-plate.sc-road-plate-number .plate-number-input.sc-road-plate-number{height:6rem;padding:0.75rem 1rem 0;resize:none;border-left:0}.motorbike-plate.sc-road-plate-number .input-group-prepend.sc-road-plate-number,.motorbike-plate.sc-road-plate-number .input-group-append.sc-road-plate-number{-ms-flex-align:start;align-items:flex-start;height:6rem;padding:0}.motorbike-plate.sc-road-plate-number .plate-number-start.sc-road-plate-number{border-radius:3px 0 0}.motorbike-plate.sc-road-plate-number .plate-number-end.sc-road-plate-number{border-radius:0 3px 0 0}";
 
 let PlateNumber = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadinput = createEvent(this, "roadinput", 7);
     this.roadInput = createEvent(this, "roadInput", 7);
+    this.roadchange = createEvent(this, "roadchange", 7);
     this.roadChange = createEvent(this, "roadChange", 7);
+    this.roadblur = createEvent(this, "roadblur", 7);
     this.roadBlur = createEvent(this, "roadBlur", 7);
+    this.roadfocus = createEvent(this, "roadfocus", 7);
     this.roadFocus = createEvent(this, "roadFocus", 7);
     this.countries = [
       {
@@ -46,6 +50,14 @@ let PlateNumber = class {
      * country of the plate
      */
     this.country = 'FR';
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
+    this.disabled = false;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    this.readonly = false;
     /**
      * The value of the input.
      */
@@ -55,12 +67,15 @@ let PlateNumber = class {
       if (input) {
         this.value = input.value.toUpperCase() || '';
       }
+      this.roadinput.emit(ev);
       this.roadInput.emit(ev);
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
   }
@@ -68,6 +83,7 @@ let PlateNumber = class {
    * Update the native input element when the value changes
    */
   valueChanged() {
+    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });
     this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });
   }
   getValue() {
@@ -80,8 +96,8 @@ let PlateNumber = class {
     const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';
     return (h("road-input-group", { class: `plate-number ${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
       .filter(item => item.country === this.country)[0].letter))), this.motorbike
-      ? (h("textarea", { class: "form-control plate-number-input mb-0", placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, maxlength: "9", rows: 2, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }))
-      : (h("input", { class: "plate-number-input mb-0", placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, 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" }))));
+      ? (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" }))));
   }
   static get assetsDirs() { return ["fonts"]; }
   static get watchers() { return {

package/dist/esm/road-radio-group.entry.js

@@ -5,6 +5,7 @@ const radioGroupCss = ".sc-road-radio-group-h{--asterisk-color:var(--text);posit
 let RadioGroup = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadchange = createEvent(this, "roadchange", 7);
     this.roadChange = createEvent(this, "roadChange", 7);
     /**
      * The id of checkbox
@@ -42,6 +43,7 @@ let RadioGroup = class {
     };
   }
   valueChanged(value) {
+    this.roadchange.emit({ value });
     this.roadChange.emit({ value });
   }
   errorChanged() {

package/dist/esm/road-radio.entry.js

@@ -6,7 +6,9 @@ const radioCss = ".sc-road-radio-h{position:relative;display:block;margin-bottom
 let Radio = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadfocus = createEvent(this, "roadfocus", 7);
     this.roadFocus = createEvent(this, "roadFocus", 7);
+    this.roadblur = createEvent(this, "roadblur", 7);
     this.roadBlur = createEvent(this, "roadBlur", 7);
     this.radioGroup = null;
     /**
@@ -47,9 +49,11 @@ let Radio = class {
       }
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
   }

package/dist/esm/road-range.entry.js

@@ -5,6 +5,7 @@ const rangeCss = ".sc-road-range-h{display:block}.form-range.sc-road-range{posit
 let Range = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadchange = createEvent(this, "roadchange", 7);
     this.roadChange = createEvent(this, "roadChange", 7);
     /**
      * The id of range
@@ -32,6 +33,7 @@ let Range = class {
    * Update the native input element when the value changes
    */
   valueChanged() {
+    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });
     this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });
   }
   getValue() {

package/dist/esm/road-select-filter.entry.js

@@ -1783,6 +1783,7 @@ const selectFilterCss = ".sc-road-select-filter-h{position:relative;display:bloc
 let SelectFilter = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadselected = createEvent(this, "roadselected", 7);
     this.roadSelected = createEvent(this, "roadSelected", 7);
     this.isOpen = false;
     this.currentValue = '';
@@ -1806,6 +1807,10 @@ let SelectFilter = class {
     this.onClick = (value, label) => {
       this.el.querySelector('road-input').value = label;
       this.isOpen = false;
+      this.roadselected.emit({
+        value: value.toString(),
+        label: label,
+      });
       this.roadSelected.emit({
         value: value.toString(),
         label: label,

package/dist/esm/road-select.entry.js

@@ -5,8 +5,11 @@ const selectCss = ".sc-road-select-h{position:relative;display:block;margin-bott
 let Select = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadchange = createEvent(this, "roadchange", 7);
     this.roadChange = createEvent(this, "roadChange", 7);
+    this.roadfocus = createEvent(this, "roadfocus", 7);
     this.roadFocus = createEvent(this, "roadFocus", 7);
+    this.roadblur = createEvent(this, "roadblur", 7);
     this.roadBlur = createEvent(this, "roadBlur", 7);
     /**
      * The id of select
@@ -48,13 +51,18 @@ let Select = class {
       }
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
   }
   valueChanged() {
+    this.roadchange.emit({
+      value: this.value,
+    });
     this.roadChange.emit({
       value: this.value,
     });

package/dist/esm/road-switch.entry.js

@@ -6,8 +6,11 @@ const switchCss = ".sc-road-switch-h{--switch-lever-width:4.5rem;position:relati
 let Switch = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadchange = createEvent(this, "roadchange", 7);
     this.roadChange = createEvent(this, "roadChange", 7);
+    this.roadfocus = createEvent(this, "roadfocus", 7);
     this.roadFocus = createEvent(this, "roadFocus", 7);
+    this.roadblur = createEvent(this, "roadblur", 7);
     this.roadBlur = createEvent(this, "roadBlur", 7);
     /**
      * The id of switch
@@ -57,13 +60,19 @@ let Switch = class {
       this.checked = !this.checked;
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
     this.onBlur = () => {
       this.roadBlur.emit();
+      this.roadblur.emit();
     };
   }
   checkedChanged(isChecked) {
+    this.roadchange.emit({
+      checked: isChecked,
+      value: this.value,
+    });
     this.roadChange.emit({
       checked: isChecked,
       value: this.value,

package/dist/esm/road-tab-bar.entry.js

@@ -6,6 +6,7 @@ const tabBarCss = ":host{--tab-bar-background:var(--white);--tab-color:var(--tex
 let TabBar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadtabbarchanged = createEvent(this, "roadtabbarchanged", 7);
     this.roadTabBarChanged = createEvent(this, "roadTabBarChanged", 7);
     /**
      * Set to `true` to expand buttons width to take the full size of the bar.
@@ -18,6 +19,9 @@ let TabBar = class {
   }
   selectedTabChanged() {
     if (this.selectedTab !== undefined) {
+      this.roadtabbarchanged.emit({
+        tab: this.selectedTab,
+      });
       this.roadTabBarChanged.emit({
         tab: this.selectedTab,
       });

package/dist/esm/road-tab-button.entry.js

@@ -5,6 +5,7 @@ const tabButtonCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;
 let TabButton = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadtabbuttonclick = createEvent(this, "roadtabbuttonclick", 7);
     this.roadTabButtonClick = createEvent(this, "roadTabButtonClick", 7);
     /**
      * Set the layout of the text and icon in the tab bar.
@@ -33,6 +34,11 @@ let TabButton = class {
   }
   selectTab(ev) {
     if (this.tab !== undefined) {
+      this.roadtabbuttonclick.emit({
+        tab: this.tab,
+        href: this.href,
+        selected: this.selected,
+      });
       this.roadTabButtonClick.emit({
         tab: this.tab,
         href: this.href,

package/dist/esm/road-tabs.entry.js

@@ -5,7 +5,9 @@ const tabsCss = ":host{position:relative;display:block}";
 let Tabs = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadtabswillchange = createEvent(this, "roadtabswillchange", 3);
     this.roadTabsWillChange = createEvent(this, "roadTabsWillChange", 3);
+    this.roadtabsdidchange = createEvent(this, "roadtabsdidchange", 3);
     this.roadTabsDidChange = createEvent(this, "roadTabsDidChange", 3);
     this.transitioning = false;
     this.onTabClicked = (ev) => {

package/dist/esm/road-textarea.entry.js

@@ -5,9 +5,13 @@ const textareaCss = ".sc-road-textarea-h{position:relative;display:block;margin-
 let Textarea = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.roadinput = createEvent(this, "roadinput", 7);
     this.roadInput = createEvent(this, "roadInput", 7);
+    this.roadchange = createEvent(this, "roadchange", 7);
     this.roadChange = createEvent(this, "roadChange", 7);
+    this.roadblur = createEvent(this, "roadblur", 7);
     this.roadBlur = createEvent(this, "roadBlur", 7);
+    this.roadfocus = createEvent(this, "roadfocus", 7);
     this.roadFocus = createEvent(this, "roadFocus", 7);
     /**
      * The id of textarea
@@ -54,12 +58,15 @@ let Textarea = class {
       if (input) {
         this.value = input.value || '';
       }
+      this.roadinput.emit(ev);
       this.roadInput.emit(ev);
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
   }
@@ -67,6 +74,7 @@ let Textarea = class {
    * Update the native textarea element when the value changes
    */
   valueChanged() {
+    this.roadchange.emit({ value: this.value });
     this.roadChange.emit({ value: this.value });
   }
   getValue() {