@roadtrip/components 2.42.0 → 2.43.0

package/dist/collection/components/select-filter/select-filter.js

@@ -1,4 +1,4 @@
-import { Component, Element, Host, Listen, Prop, State, h, Event } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import Fuse from 'fuse.js';
 /**
  * @slot  - Input element for the widget, it should be a road-input element.
@@ -30,7 +30,9 @@ export class SelectFilter {
     this.onlySelect = true;
     this.onClick = (value, label) => {
       this.el.querySelector('road-input').value = label;
-      this.el.querySelector('road-icon').name = 'flag-' + label;
+      if (document.getElementsByClassName('phone-number-label-icon').length > 0) {
+        this.el.querySelector('road-icon').name = 'flag-' + label;
+      }
       this.isOpen = false;
       this.roadselected.emit({
         value: value.toString(),
@@ -67,175 +69,185 @@ export class SelectFilter {
     const options = this.currentValue === '' ? this.options.map((doc, idx) => ({ item: doc, score: 1, refIndex: idx })) : fuseSearch.search(this.currentValue);
     const isActive = this.isActive ? 'true' : 'false';
     const notActive = this.isActive ? '' : 'not-active';
-    return (h(Host, { "is-active": isActive },
-      h("slot", null),
-      this.isOpen &&
-        h("ul", { class: `${notActive} select-filter-list`, role: "listbox" }, options.map(option => (h("li", { class: "select-filter-item", role: "option", onClick: () => this.onClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, "")), innerHTML: option.item.label }))))));
+    return (h(Host, { "is-active": isActive }, h("slot", null), this.isOpen &&
+      h("ul", { class: `${notActive} select-filter-list`, role: "listbox" }, options.map(option => (h("li", { class: "select-filter-item", role: "option", onClick: () => this.onClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, "")), innerHTML: option.item.label }))))));
   }
   static get is() { return "road-select-filter"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["select-filter.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["select-filter.css"]
-  }; }
-  static get properties() { return {
-    "options": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Array<{\n    value: string | number;\n    label: string;\n  }>",
-        "resolved": "{ value: string | number; label: string; }[]",
-        "references": {
-          "Array": {
-            "location": "global"
+  static get originalStyleUrls() {
+    return {
+      "$": ["select-filter.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["select-filter.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "options": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<{\n    value: string | number;\n    label: string;\n  }>",
+          "resolved": "{ value: string | number; label: string; }[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of options of the select"
+        },
+        "defaultValue": "[]"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "List of options of the select"
+      "parameters": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Options to pass to the fuse.js instance.\nSee https://fusejs.io/api/options.html for valid options"
+        },
+        "attribute": "parameters",
+        "reflect": false,
+        "defaultValue": "{\n    keys: [\"value\", \"label\"],\n    threshold: 0.3,\n    ignoreLocation: true,\n  }"
       },
-      "defaultValue": "[]"
-    },
-    "parameters": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "isActive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, add class Active"
+        },
+        "attribute": "is-active",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Options to pass to the fuse.js instance.\nSee https://fusejs.io/api/options.html for valid options"
-      },
-      "attribute": "parameters",
-      "reflect": false,
-      "defaultValue": "{\n    keys: [\"value\", \"label\"],\n    threshold: 0.3,\n    ignoreLocation: true,\n  }"
-    },
-    "isActive": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If `true`, add class Active"
-      },
-      "attribute": "is-active",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "onlySelect": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If `false`, the user can submit custom value"
-      },
-      "attribute": "only-select",
-      "reflect": false,
-      "defaultValue": "true"
-    }
-  }; }
-  static get states() { return {
-    "isOpen": {},
-    "currentValue": {}
-  }; }
-  static get events() { return [{
-      "method": "roadselected",
-      "name": "roadselected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted the value and label of the option selected."
-      },
-      "complexType": {
-        "original": "{\n    value: string | undefined | null,\n    label: string\n  }",
-        "resolved": "{ value: string | null | undefined; label: string; }",
-        "references": {}
-      }
-    }, {
-      "method": "roadSelected",
-      "name": "roadSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{\n    value: string | undefined | null,\n    label: string\n  }",
-        "resolved": "{ value: string | null | undefined; label: string; }",
-        "references": {}
+      "onlySelect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `false`, the user can submit custom value"
+        },
+        "attribute": "only-select",
+        "reflect": false,
+        "defaultValue": "true"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "isOpen": {},
+      "currentValue": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "roadselected",
+        "name": "roadselected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted the value and label of the option selected."
+        },
+        "complexType": {
+          "original": "{\n    value: string | undefined | null,\n    label: string\n  }",
+          "resolved": "{ value: string | null | undefined; label: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "roadSelected",
+        "name": "roadSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{\n    value: string | undefined | null,\n    label: string\n  }",
+          "resolved": "{ value: string | null | undefined; label: string; }",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "roadFocus",
-      "method": "handleFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "roadfocus",
-      "method": "handleFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "roadBlur",
-      "method": "handleBlur",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "roadblur",
-      "method": "handleBlur",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "roadChange",
-      "method": "handleChange",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "roadchange",
-      "method": "handleChange",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "onClickOutside",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "roadFocus",
+        "method": "handleFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "roadfocus",
+        "method": "handleFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "roadBlur",
+        "method": "handleBlur",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "roadblur",
+        "method": "handleBlur",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "roadChange",
+        "method": "handleChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "roadchange",
+        "method": "handleChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "onClickOutside",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/select-filter/select-filter.stories.js

@@ -141,9 +141,9 @@ PhoneNumber.args = {
     }
   ],
   ' ': `<road-input-group class="phone-number-group">
-    <road-input input-id="brand5" sizes="xl" label="Label" value="" class="phone-number"></road-input>
+    <road-input input-id="brand5" sizes="xl" label="Label" value="" class="phone-number" type="tel"></road-input>
     <label slot="prepend" for="brand5" class="pl-16 phone-number-label">
-      <road-icon name="flag-france" size="md"></road-icon>
+      <road-icon name="flag-france" size="md" class="phone-number-label-icon"></road-icon>
       <road-icon name="arrow-drop" focusable="false"></road-icon>
     </label>
   </road-input-group>`,

package/dist/collection/components/skeleton/skeleton.js

@@ -1,14 +1,18 @@
-import { Component, h } from '@stencil/core';
+import { h } from '@stencil/core';
 export class Skeleton {
   render() {
     return (h("span", null, "\u00A0"));
   }
   static get is() { return "road-skeleton"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["skeleton.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["skeleton.css"]
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["skeleton.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["skeleton.css"]
+    };
+  }
 }

package/dist/collection/components/spinner/spinner.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 export class Spinner {
   constructor() {
     /**
@@ -13,53 +13,58 @@ export class Spinner {
   render() {
     const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
     const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
-    return (h("svg", { class: `${sizeClass}`, viewBox: "25 25 50 50" },
-      h("circle", { class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+    return (h("svg", { class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
   }
   static get is() { return "road-spinner"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["spinner.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["spinner.css"]
-  }; }
-  static get properties() { return {
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'small' | 'medium' | 'large' | 'xl'",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"xl\" | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The button size."
-      },
-      "attribute": "size",
-      "reflect": true,
-      "defaultValue": "'large'"
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'default' | 'light' | 'dark'",
-        "resolved": "\"dark\" | \"default\" | \"light\" | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The color spinner."
+  static get originalStyleUrls() {
+    return {
+      "$": ["spinner.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["spinner.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large' | 'xl'",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"xl\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The button size."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'large'"
       },
-      "attribute": "color",
-      "reflect": true,
-      "defaultValue": "'default'"
-    }
-  }; }
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'light' | 'dark'",
+          "resolved": "\"dark\" | \"default\" | \"light\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The color spinner."
+        },
+        "attribute": "color",
+        "reflect": true,
+        "defaultValue": "'default'"
+      }
+    };
+  }
 }