@roadtrip/components 2.22.1 → 2.25.0

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

@@ -2,10 +2,8 @@
  * Plate Number
  *
  * Index
- * - Custom font
  * - Plate Number
  * - Input
- *
  */
 
 /* PLATE NUMBER
@@ -22,16 +20,28 @@
 .plate-number-start,
 .plate-number-end {
   width: 1.75rem;
+  height: 3rem;
   background: var(--info-text);
 }
 
+.input-group-prepend {
+  margin-right: -1px;
+}
+
+.input-group-prepend,
+.input-group-append {
+  padding: 0;
+}
+
 .plate-number-start {
   display: flex;
   flex-direction: column;
+  align-items: center;
   justify-content: center;
   padding: 0;
   margin-right: 0;
   color: var(--info-contrast);
+  border-radius: 3px 0 0 3px;
 }
 
 .plate-number-icon {
@@ -45,6 +55,10 @@
   font-weight: 700;
 }
 
+.plate-number-end {
+  border-radius: 0 3px 3px 0;
+}
+
 /* INPUT
  -------------------- */
 
@@ -66,11 +80,6 @@
           appearance: none;
 }
 
-.plate-number-input:-ms-input-placeholder {
-  color: var(--border);
-  opacity: 1;
-}
-
 .plate-number-input::placeholder {
   color: var(--border);
   opacity: 1;
@@ -80,3 +89,28 @@
   border-color: var(--secondary);
   outline: 0;
 }
+
+/* MOTORBIKE
+ -------------------- */
+
+.motorbike-plate .plate-number-input {
+  height: 6rem;
+  padding: 0.75rem 1rem 0;
+  resize: none;
+  border-left: 0;
+}
+
+.motorbike-plate .input-group-prepend,
+.motorbike-plate .input-group-append {
+  align-items: flex-start;
+  height: 6rem;
+  padding: 0;
+}
+
+.motorbike-plate .plate-number-start {
+  border-radius: 3px 0 0;
+}
+
+.motorbike-plate .plate-number-end {
+  border-radius: 0 3px 0 0;
+}

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

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, Event, Watch } from '@stencil/core';
+import { Component, h, Prop, Event, Watch } from '@stencil/core';
 import { licensePlateStarEu } from '../../../icons';
 export class PlateNumber {
   constructor() {
@@ -69,14 +69,18 @@ export class PlateNumber {
   }
   render() {
     const value = this.getValue();
-    return (h(Host, null,
-      h("road-input-group", { class: "plate-number" },
-        h("label", { slot: "prepend", class: "plate-number-start" },
+    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)),
-        h("input", { class: "plate-number-input mb-0", placeholder: this.placeholder ? 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: "plate-number-end" }))));
+            .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" }))));
   }
   static get is() { return "road-plate-number"; }
   static get encapsulation() { return "scoped"; }
@@ -140,6 +144,23 @@ export class PlateNumber {
       "attribute": "value",
       "reflect": false,
       "defaultValue": "''"
+    },
+    "motorbike": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Enable motorbike display"
+      },
+      "attribute": "motorbike",
+      "reflect": false
     }
   }; }
   static get events() { return [{

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

@@ -13,6 +13,7 @@ export default {
 export const Playground = (args) => html`
   <road-plate-number
     country="${args.country}"
+    .motorbike=${args.motorbike}
     .placeholder=${args.placeholder}
     @roadChange=${event => args.roadChange(event.detail.value)}
     @roadInput=${event => args.roadInput(event.target.value)}
@@ -32,6 +33,9 @@ Playground.argTypes = {
   placeholder: {
     control: 'text',
   },
+  motorbike: {
+    control: 'boolean',
+  },
   roadChange: {
     action: 'roadChange',
   },
@@ -39,3 +43,12 @@ Playground.argTypes = {
     action: 'roadInput',
   },
 };
+
+export const MotorBike = () => html`
+  <road-plate-number
+    country="FR"
+    motorbike
+    style="width: 180px;"
+  >
+  </road-plate-number>
+`;

package/dist/collection/components/progress/progress.css

@@ -4,7 +4,7 @@
  * Index
  * - Progress
  * - Progress Bar
- *
+ * - Feedback
  */
 
 /* PROGRESS
@@ -32,7 +32,7 @@
   transition: width 0.6s ease;
 }
 
-/* PROGRESS BAR FEEDBACK
+/* FEEDBACK
  -------------------- */
 
 :host(.progress-info) .progress-bar {

package/dist/collection/components/radio/radio.css

@@ -7,10 +7,9 @@
  *
  * Index
  * - Radio
- * - Radio label
- * - Radio error
+ * - Label
+ * - Error
  * - Position
- *
  */
 
 /* RADIO
@@ -48,7 +47,7 @@
   opacity: 0;
 }
 
-/* RADIO LABEL
+/* LABEL
  -------------------- */
 
 .form-radio-label {
@@ -56,6 +55,7 @@
   display: inline-flex;
   margin: 0;
   cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .form-radio-label::before {
@@ -139,7 +139,7 @@
   border: none;
 }
 
-/* RADIO ERROR
+/* ERROR
  -------------------- */
 
 .form-radio-input.is-invalid ~ .form-radio-label::before {

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

@@ -2,8 +2,11 @@ import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
 
 export default {
-  title: 'Forms/Radio/road-radio',
+  title: 'Forms/Radio',
   component: 'road-radio',
+  subcomponents: {
+    RoadRadioGroup: 'road-radio-group'
+  },
   parameters: {
     actions: {
       handles: ['roadBlur', 'roadFocus'],

package/dist/collection/components/radio-group/radio-group.css

@@ -1,3 +1,12 @@
+/*
+ * Radio Group
+ *
+ * Index
+ * - Radio Group
+ * - Asterisk
+ * - Error
+ */
+
 /**
  * Error message for inline radio can only
  * be provided by adding a class
@@ -8,6 +17,9 @@
  * @prop --asterisk-color: color of the asterisk
  */
 
+/* RADIO
+ -------------------- */
+
 :host {
   --asterisk-color: var(--text);
 
@@ -16,14 +28,21 @@
   margin-bottom: 1rem;
 }
 
-:host(.is-invalid) .invalid-feedback {
-  display: block;
-}
+
+/* ASTERISK
+-------------------- */
 
 .asterisk {
   color: var(--asterisk-color);
 }
 
+/* ERROR
+-------------------- */
+
+:host(.is-invalid) .invalid-feedback {
+  display: block;
+}
+
 .invalid-feedback {
   display: none;
   flex: 0 0 100%;

package/dist/collection/components/range/range.css

@@ -1,5 +1,5 @@
 /*
- * Checkbox
+ * Range
  *
  *
  * Index
@@ -8,7 +8,6 @@
  * - Slider
  * - Progress
  * - Cursor
- *
  */
 
 :host {

package/dist/collection/components/range/range.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Element, Prop, Event, Watch } from '@stencil/core';
+import { Component, h, Element, Prop, Event, Watch } from '@stencil/core';
 export class Range {
   constructor() {
     /**
@@ -36,11 +36,10 @@ export class Range {
   }
   render() {
     const value = this.getValue();
-    return (h(Host, null,
-      h("div", { class: "form-range", style: { '--min:': this.min, '--max': this.max, '--value': value } },
-        this.showValue && h("output", null),
-        h("input", { type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput }),
-        h("div", { class: "form-range-progress" }))));
+    return (h("div", { class: "form-range", style: { '--min:': this.min, '--max': this.max, '--value': value } },
+      this.showValue && h("output", null),
+      h("input", { type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput }),
+      h("div", { class: "form-range-progress" })));
   }
   static get is() { return "road-range"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/rating/rating.css

@@ -1,3 +1,15 @@
+/*
+ * Rating
+ *
+ * Index
+ * - Stars
+ * - Star
+ * - Rating number
+ */
+
+/* STARS
+ -------------------- */
+
 :host {
   display: flex;
 }
@@ -7,10 +19,16 @@
   flex-shrink: 0;
 }
 
+/* STAR
+ -------------------- */
+
 .rating-star {
-  color: var(--background);
+  color: var(--border);
 }
 
+/* RATING NUMBER
+ -------------------- */
+
 .rating-number {
   margin-left: 0.5rem;
   font-size: 0.875rem;

package/dist/collection/components/select/select.css

@@ -3,9 +3,8 @@
  *
  * Index
  * - Select
- * - Select label
- * - Select error
- *
+ * - Label
+ * - Error
  */
 
 
@@ -53,10 +52,6 @@
  * Placeholder
  */
 
-.form-select:-ms-input-placeholder {
-  color: var(--text-second);
-}
-
 .form-select::placeholder {
   color: var(--text-second);
 }
@@ -88,7 +83,7 @@
   opacity: 1;
 }
 
-/* SELECT LABEL
+/* LABEL
  -------------------- */
 
 .form-select-label {
@@ -104,7 +99,7 @@
   transform-origin: 0 0;
 }
 
-/* SELECT ERROR
+/* ERROR
  -------------------- */
 
 .invalid-feedback {

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

@@ -0,0 +1,53 @@
+/*
+ * Autocomplete
+ *
+ * Autocomplete layer for fields
+ *
+ * Index
+ * - List
+ * - Item
+ */
+
+:host {
+  position: relative;
+  display: block;
+}
+
+/* LIST
+ -------------------- */
+
+.select-filter-list {
+  position: absolute;
+  top: 3rem;
+  z-index: 1;
+  width: 100%;
+  max-height: 16rem;
+  padding: 0.5rem 0;
+  margin: 0;
+  overflow-y: scroll;
+  font-family: var(--font, sans-serif);
+  font-size: 0.875rem;
+  color: var(--text);
+  list-style-type: none;
+  background: var(--white);
+  border-radius: 0 0 0.25rem 0.25rem;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+}
+
+/* ITEM
+ -------------------- */
+
+.select-filter-item {
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+}
+
+/**
+ * Hover state
+ */
+
+.select-filter-item:hover,
+.select-filter-item.highlight {
+  color: var(--secondary-contrast);
+  background: var(--secondary);
+}

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

@@ -0,0 +1,165 @@
+import { Component, Element, Host, Listen, Prop, State, h, Event } from '@stencil/core';
+import Fuse from 'fuse.js';
+/**
+ * @slot  - Input element for the widget, it should be a road-input element.
+ */
+export class SelectFilter {
+  constructor() {
+    this.isOpen = false;
+    this.currentValue = '';
+    /**
+     * List of options of the select
+     */
+    this.options = [];
+    /**
+     * Options to pass to the fuse.js instance.
+     * See https://fusejs.io/api/options.html for valid options
+     */
+    this.parameters = {
+      keys: ["value", "label"],
+      threshold: 0.3,
+      ignoreLocation: true,
+    };
+    /**
+     * If `false`, the user can submit custom value
+     */
+    this.onlySelect = true;
+    this.onClick = (value, label) => {
+      this.el.querySelector('road-input').value = label;
+      this.isOpen = false;
+      this.roadSelected.emit({
+        value: value.toString(),
+        label: label,
+      });
+    };
+  }
+  handleFocus() {
+    this.isOpen = true;
+  }
+  handleChange(event) {
+    this.currentValue = event.detail.value.toLowerCase();
+  }
+  onClickOutside(event) {
+    if (this.isOpen && !this.el.contains(event.target)) {
+      this.isOpen = false;
+      const value = this.el.querySelector('road-input').value;
+      if (this.onlySelect && !this.options.some(option => option['label'] === value)) {
+        this.el.querySelector('road-input').value = '';
+      }
+    }
+  }
+  render() {
+    const fuseSearch = new Fuse(this.options, this.parameters);
+    const options = this.currentValue === '' ? this.options.map((doc, idx) => ({ item: doc, score: 1, refIndex: idx })) : fuseSearch.search(this.currentValue);
+    return (h(Host, null,
+      h("slot", null),
+      this.isOpen &&
+        h("ul", { class: "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"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "List of options of the select"
+      },
+      "defaultValue": "[]"
+    },
+    "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  }"
+    },
+    "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": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "roadFocus",
+      "method": "handleFocus",
+      "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
+    }]; }
+}