@roadtrip/components 2.42.0 → 2.43.0

package/dist/collection/components/dropdown/dropdown.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 /**
  * @slot  - Element how will open the dropdown when clicked
  * @slot list - List of item values (you can add border with lines=`full` but not on the last item)
@@ -29,93 +29,93 @@ export class Dropdown {
     const isLightButtonDropDown = this.isLight == true ? `dropdown-button` : 'dropdown-button bg-white';
     const positionClass = this.position !== undefined ? `position-${this.position}` : '';
     const directionClass = this.direction !== undefined ? `direction-${this.direction}` : '';
-    return (h("details", { class: "dropdown", open: this.isOpen },
-      h("summary", { "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick },
-        h("div", { class: `d-flex ${positionClass}` },
-          h("div", { class: isLightButtonDropDown },
-            h("road-icon", { name: "navigation-more", class: "dropdown-button-icon" })))),
-      h("div", { class: `dropdown-menu ${directionClass}` },
-        h("slot", { name: "list" }))));
+    return (h("details", { class: "dropdown", open: this.isOpen }, h("summary", { "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { class: `d-flex ${positionClass}` }, h("div", { class: isLightButtonDropDown }, h("road-icon", { name: "navigation-more", class: "dropdown-button-icon" })))), h("div", { class: `dropdown-menu ${directionClass}` }, h("slot", { name: "list" }))));
   }
   static get is() { return "road-dropdown"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dropdown.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dropdown.css"]
-  }; }
-  static get properties() { return {
-    "isOpen": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to open the dropdown menu and to `false` to close it."
-      },
-      "attribute": "is-open",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "isLight": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If you want to remove background of the dropdown button"
-      },
-      "attribute": "is-light",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "position": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'left' | 'right'",
-        "resolved": "\"left\" | \"right\" | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The button position."
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "isOpen": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to open the dropdown menu and to `false` to close it."
+        },
+        "attribute": "is-open",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "position",
-      "reflect": true
-    },
-    "direction": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'top' | 'bottom'",
-        "resolved": "\"bottom\" | \"top\" | undefined",
-        "references": {}
+      "isLight": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If you want to remove background of the dropdown button"
+        },
+        "attribute": "is-light",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The opening direction."
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right'",
+          "resolved": "\"left\" | \"right\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The button position."
+        },
+        "attribute": "position",
+        "reflect": true
       },
-      "attribute": "direction",
-      "reflect": true,
-      "defaultValue": "'bottom'"
-    }
-  }; }
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'top' | 'bottom'",
+          "resolved": "\"bottom\" | \"top\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The opening direction."
+        },
+        "attribute": "direction",
+        "reflect": true,
+        "defaultValue": "'bottom'"
+      }
+    };
+  }
 }

package/dist/collection/components/duration/duration.js

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Listen, Method, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 export class Duration {
   constructor() {
     /**
@@ -42,171 +42,176 @@ export class Duration {
     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 })))))))));
+    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 })))))))));
   }
   static get is() { return "road-duration"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["duration.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duration.css"]
-  }; }
-  static get properties() { return {
-    "isOpen": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set isOpen property to true to open the duration widget"
-      },
-      "attribute": "is-open",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "header": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "title of the widget"
-      },
-      "attribute": "header",
-      "reflect": false,
-      "defaultValue": "'duration'"
-    },
-    "min": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The minimum value, which must not be greater than its maximum (max attribute) value in minutes."
-      },
-      "attribute": "min",
-      "reflect": false,
-      "defaultValue": "15"
-    },
-    "max": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The maximum value, which must not be less than its minimum (min attribute) value in minutes."
-      },
-      "attribute": "max",
-      "reflect": false,
-      "defaultValue": "300"
-    },
-    "step": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["duration.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duration.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "isOpen": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set isOpen property to true to open the duration widget"
+        },
+        "attribute": "is-open",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Works with the min and max attributes to limit the increments at which a value can be set in minutes."
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "title of the widget"
+        },
+        "attribute": "header",
+        "reflect": false,
+        "defaultValue": "'duration'"
       },
-      "attribute": "step",
-      "reflect": false,
-      "defaultValue": "15"
-    }
-  }; }
-  static get events() { return [{
-      "method": "roadselected",
-      "name": "roadselected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitt the value and label of the selected option."
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The minimum value, which must not be greater than its maximum (max attribute) value in minutes."
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "15"
       },
-      "complexType": {
-        "original": "{\n    value: string | undefined | null,\n    label: string\n  }",
-        "resolved": "{ value: string | null | undefined; label: string; }",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "open": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
         },
-        "return": "Promise<void>"
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The maximum value, which must not be less than its minimum (min attribute) value in minutes."
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "300"
       },
-      "docs": {
-        "text": "Open the widget",
-        "tags": []
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Works with the min and max attributes to limit the increments at which a value can be set in minutes."
+        },
+        "attribute": "step",
+        "reflect": false,
+        "defaultValue": "15"
       }
-    },
-    "close": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "roadselected",
+        "name": "roadselected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitt the value and label of the selected option."
+        },
+        "complexType": {
+          "original": "{\n    value: string | undefined | null,\n    label: string\n  }",
+          "resolved": "{ value: string | null | undefined; label: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "open": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Open the widget",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Close the widget",
-        "tags": []
+      "close": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Close the widget",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "roadcardclick",
-      "method": "handleClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "roadcardclick",
+        "method": "handleClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/flap/flap.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 /**
  * @slot  - Content of the flap.
  */
@@ -15,53 +15,58 @@ export class Flap {
   }
   render() {
     const colorClass = `flap-${this.color}`;
-    return (h(Host, { class: `${colorClass} flap-${this.size}` },
-      h("slot", null)));
+    return (h(Host, { class: `${colorClass} flap-${this.size}` }, h("slot", null)));
   }
   static get is() { return "road-flap"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["flap.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["flap.css"]
-  }; }
-  static get properties() { return {
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'promo' | 'exclu' | 'info' | 'ecology'",
-        "resolved": "\"ecology\" | \"exclu\" | \"info\" | \"promo\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the color of the flap."
-      },
-      "attribute": "color",
-      "reflect": false,
-      "defaultValue": "'promo'"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'sm' | 'md'",
-        "resolved": "\"md\" | \"sm\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The button size."
+  static get originalStyleUrls() {
+    return {
+      "$": ["flap.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["flap.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'promo' | 'exclu' | 'info' | 'ecology'",
+          "resolved": "\"ecology\" | \"exclu\" | \"info\" | \"promo\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the color of the flap."
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'promo'"
       },
-      "attribute": "size",
-      "reflect": true,
-      "defaultValue": "'sm'"
-    }
-  }; }
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'md'",
+          "resolved": "\"md\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The button size."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'sm'"
+      }
+    };
+  }
 }

package/dist/collection/components/grid/grid.css

@@ -7,3 +7,12 @@
   margin-right: auto;
   margin-left: auto;
 }
+
+
+@media (min-width: 768px) {
+
+  :host {
+    padding-right: 24px;
+    padding-left: 24px;
+  }
+}