@roadtrip/components 2.22.0 → 2.24.1

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

@@ -7,12 +7,11 @@
  *
  * Index
  * - Input group
- * - Input group prepend / append
- * - Input group text or icon addon
- * - Input group round corners
- * - Input group error
- * - Input group counter
- *
+ * - Prepend / append
+ * - Text or icon addon
+ * - Round corners
+ * - Error
+ * - Disabled
  */
 
 :host {
@@ -33,6 +32,7 @@
 
 ::slotted(road-input),
 ::slotted(input),
+::slotted(textarea),
 ::slotted(road-select) {
   position: relative;
   flex: 1 1 auto;
@@ -40,23 +40,40 @@
   margin-bottom: 0;
 }
 
+/**
+ * Remove border for append and prepend element
+ * with white background
+ */
+
+::slotted([slot="prepend"]) {
+  margin-right: -3px;
+  border-color: var(--border-form);
+  border-right-color: transparent;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+::slotted([slot="append"]) {
+  margin-left: -0.25rem;
+  border-color: var(--border-form);
+  border-left-width: 0;
+}
+
 /**
  * Focus state
  */
 
-.input-group:focus-within .input-group-prepend ::slotted(.btn-outline-default),
-.input-group:focus-within .input-group-prepend ::slotted(label) {
+.input-group:focus-within ::slotted([slot="prepend"]) {
   border-color: var(--secondary);
   border-right-color: transparent;
 }
 
-.input-group:focus-within .input-group-append ::slotted(.btn-outline-default),
-.input-group:focus-within .input-group-append ::slotted(label) {
+.input-group:focus-within ::slotted([slot="append"]) {
   border-color: var(--secondary);
   border-left-color: transparent;
 }
 
-/* INPUT GROUP PREPEND - APPEND
+/* PREPEND - APPEND
  -------------------- */
 
 .input-group-prepend,
@@ -79,7 +96,6 @@
 .input-group-prepend {
   z-index: 1;
   order: -1;
-  margin-right: -1px;
 }
 
 .input-group-prepend ~ .form-label {
@@ -89,12 +105,11 @@
 .input-group-append {
   position: relative;
   z-index: 1;
-  margin-left: -0.25rem;
   background: var(--white);
   border-radius: 0 0.25rem 0.25rem 0;
 }
 
-/* INPUT GROUP TEXT OR ICON ADDON
+/* TEXT OR ICON ADDON
  -------------------- */
 
 ::slotted(label) {
@@ -109,9 +124,10 @@
   background: var(--white);
   border: 1px solid var(--border-form);
   border-radius: 0.25rem;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-/* INPUT GROUP ROUND CORNERS
+/* ROUND CORNERS
  -------------------- */
 
 ::slotted(road-input:not(:first-child)),
@@ -119,13 +135,14 @@
   border-radius: 0;
 }
 
-.input-group-append ::slotted(road-button),
-.input-group-append ::slotted(label) {
+.input-group-append ::slotted([slot="append"]) {
+  border-left: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.input-group-prepend ::slotted(road-button) {
+.input-group-prepend ::slotted([slot="prepend"]) {
+  border-right: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -134,44 +151,24 @@
   margin-right: calc(-1rem + 1px);
 }
 
-/* INPUT GROUP ERROR
+/* ERROR
  -------------------- */
 
-/**
- * Prepend error
- */
-
-:slotted([error]) ~ :slotted([slot="prepend"].btn-outline-default),
-:slotted([error]) ~ :slotted([slot="prepend"]) {
+.input-group.is-invalid ::slotted([slot="append"]),
+.input-group.is-invalid ::slotted([slot="prepend"]) {
   border-color: var(--danger);
-  border-right-color: transparent;
-}
-
-/**
- * Append error
- */
-
-:slotted([error] ~ [slot="append"].btn-outline-default),
-:slotted([error] ~ [slot="append"]label) {
-  border-color: var(--danger);
-  border-right-color: transparent;
 }
 
-/**
- * Remove border for append and prepend element
- * with white background
- */
+/* DISABLED
+ -------------------- */
 
-.input-group-prepend ::slotted(.btn-outline-default),
-.input-group-prepend ::slotted(label) {
-  border-color: var(--border-form);
-  border-right-color: transparent;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+.input-group.is-disabled ::slotted([slot="append"]),
+.input-group.is-disabled ::slotted([slot="prepend"]) {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+  background: var(--background-second);
 }
 
-.input-group-append > ::slotted(.btn-outline-default),
-.input-group-append > ::slotted(label) {
-  border-color: var(--border-form);
-  border-left-width: 0;
+.is-disabled ::slotted(road-button) {
+  opacity: 1;
 }

package/dist/collection/components/input-group/input-group.js

@@ -1,12 +1,20 @@
-import { Component, h } from '@stencil/core';
+import { Component, Element, h } from '@stencil/core';
 /**
  * @slot prepend - Add icon or button before the field.
  * @slot  - Add the road-input or road-select here.
  * @slot append - Add icon or button after the field.
  */
 export class InputGroup {
+  componentDidLoad() {
+    var _a;
+    if (this.el.querySelector("road-input[disabled]")) {
+      (_a = this.el.querySelector("road-button")) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', "");
+    }
+  }
   render() {
-    return (h("div", { class: "input-group" },
+    const errorClass = this.el.querySelector("road-input[error]") ? 'is-invalid' : '';
+    const disabledClass = this.el.querySelector("road-input[disabled]") ? 'is-disabled' : '';
+    return (h("div", { class: `input-group ${errorClass} ${disabledClass}` },
       h("div", { class: "input-group-prepend" },
         h("slot", { name: "prepend" })),
       h("slot", null),
@@ -21,4 +29,5 @@ export class InputGroup {
   static get styleUrls() { return {
     "$": ["input-group.css"]
   }; }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/components/input-group/input-group.stories.js

@@ -8,7 +8,7 @@ export default {
 export const Icon = () => html`
 <road-input-group>
   <road-input input-id="cardNumber" label="Card Number"></road-input>
-  <label slot="append" class="input-group-text" for="cardNumber">
+  <label slot="append" for="cardNumber">
     <road-icon name="payment-card"></road-icon>
   </label>
 </road-input-group>
@@ -29,3 +29,21 @@ export const Button = () => html`
   </road-button>
 </road-input-group>
 `;
+
+export const Disabled = () => html`
+<road-input-group>
+  <road-input input-id="inputGroupDisabled" label="Label" disabled></road-input>
+  <road-button slot="append" outline>
+    <road-icon color="secondary" name="alert-info-outline"></road-icon>
+  </road-button>
+</road-input-group>
+`;
+
+export const Error = () => html`
+<road-input-group>
+  <road-input input-id="inputGroupError" label="Label" error="error message here"></road-input>
+  <label slot="append" for="inputGroupError">
+    <road-icon name="payment-card"></road-icon>
+  </label>
+</road-input-group>
+`;

package/dist/collection/components/item/item.css

@@ -2,13 +2,12 @@
  * Item
  *
  * Index
- * - Native item
- * - Inner item
- * - Item input
- * - Item icons
- * - Item buttons
- * - Item lines
- *
+ * - Native
+ * - Inner
+ * - Input
+ * - Icons
+ * - Buttons
+ * - Lines
  */
 
 /**
@@ -38,7 +37,7 @@
   outline: none;
 }
 
-/* NATIVE ITEM
+/* NATIVE
  -------------------- */
 
 .item-native {
@@ -63,6 +62,7 @@
   border-radius: var(--border-radius);
   outline: none;
   transition: background 0.15s ease-in-out;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 /**
@@ -94,13 +94,12 @@ button,
 a {
   cursor: pointer;
   -webkit-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 
   -webkit-user-drag: none;
 }
 
-/* INNER ITEM
+/* INNER
  -------------------- */
 
 .item-inner {
@@ -123,7 +122,7 @@ a {
   outline: 0;
 }
 
-/* ITEM INPUT
+/* INPUT
  -------------------- */
 
 .input-wrapper {
@@ -137,7 +136,7 @@ a {
   text-overflow: ellipsis;
 }
 
-/* ITEM ICONS
+/* ICONS
  -------------------- */
 
 .item-detail-icon {
@@ -149,7 +148,7 @@ a {
   margin-right: 0.5rem;
 }
 
-/* ITEM IMG
+/* IMAGE
  -------------------- */
 
 ::slotted(road-img) {
@@ -161,7 +160,7 @@ a {
   margin-right: 1rem;
 }
 
-/* ITEM BUTTONS
+/* BUTTONS
  -------------------- */
 
 ::slotted(road-button) {
@@ -170,7 +169,7 @@ a {
   --margin-bottom: 0;
 }
 
-/* ITEM LINES
+/* LINES
  -------------------- */
 
 /**

package/dist/collection/components/label/label.css

@@ -1,3 +1,8 @@
+/*
+ * Label
+ *
+ */
+
 :host {
   box-sizing: border-box;
   display: block;

package/dist/collection/components/list/list.css

@@ -3,17 +3,19 @@
  *
  * Index
  * - List
- * - List lines
- *
+ * - Lines
  */
 
+/* LIST
+ -------------------- */
+
 :host {
   display: block;
   contain: content;
   list-style-type: none;
 }
 
-/* LIST LINES
+/* LINES
  -------------------- */
 
 /**

package/dist/collection/components/modal/modal.css

@@ -4,12 +4,11 @@
  * Index
  * - Overlay
  * - Modal
- * - Modal content
- * - Modal header
- * - Modal actions
- * - Modal title
- * - Modal body
- *
+ * - Content
+ * - Header
+ * - Actions
+ * - Title
+ * - Body
  */
 
 /**
@@ -80,7 +79,7 @@
   transform: none;
 }
 
-/* MODAL CONTENT
+/* CONTENT
  -------------------- */
 
 .modal-content {
@@ -103,7 +102,7 @@
   }
 }
 
-/* MODAL HEADER
+/* HEADER
  -------------------- */
 
 .modal-header {
@@ -138,7 +137,7 @@
   color: var(--text);
 }
 
-/* MODAL ACTIONS
+/* ACTIONS
  -------------------- */
 
 .modal-action,
@@ -157,6 +156,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .modal-action ~ .modal-title,
@@ -169,7 +169,7 @@
   margin-right: auto;
 }
 
-/* MODAL TITLE
+/* TITLE
  -------------------- */
 
 .modal-title {
@@ -184,7 +184,7 @@
   font-weight: 400;
 }
 
-/* MODAL BODY
+/* BODY
  -------------------- */
 
 .modal-body {

package/dist/collection/components/navbar/navbar.css

@@ -22,7 +22,6 @@
   text-align: center;
   contain: strict;
   -webkit-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   background-color: var(--white);
   border-top: 1px solid var(--border);

package/dist/collection/components/navbar/navbar.js

@@ -56,8 +56,8 @@ export class Navbar {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

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

@@ -1,8 +1,11 @@
 import { html } from 'lit-html';
 
 export default {
-  title: 'Navigation/NavBar/road-navbar',
+  title: 'Navigation/NavBar',
   component: 'road-navbar',
+  subcomponents: {
+    RoadNavbarItem: 'road-navbar-item'
+  },
   parameters: {
     docs: {
       inlineStories: false,

package/dist/collection/components/navbar-item/navbar-item.css

@@ -2,11 +2,10 @@
  * Navbar item
  *
  * Index
- * - Native button
- * - Inner button
+ * - Native
+ * - Inner
  * - Icon
- * - Notification badge
- *
+ * - Badge
  */
 
 
@@ -40,7 +39,7 @@
 }
 
 
-/* NATIVE BUTTON
+/* NATIVE
  -------------------- */
 
 .button-native {
@@ -52,10 +51,7 @@
   justify-content: inherit;
   width: 100%;
   height: 100%;
-  margin-top: 0;
-  margin-right: 0;
-  margin-bottom: 0;
-  margin-left: 0;
+  margin: 0;
   overflow: hidden;
   font-family: inherit;
   font-size: inherit;
@@ -77,9 +73,10 @@
   border-radius: inherit;
   border-image: initial;
   outline: 0;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-/* INNER BUTTON
+/* INNER
  -------------------- */
 
 .button-inner {
@@ -108,7 +105,7 @@
   font-size: 0.625rem;
 }
 
-/* NOTIFICATION BADGE
+/* BADGE
  -------------------- */
 
 ::slotted(road-badge) {

package/dist/collection/components/navbar-item/navbar-item.js

@@ -195,8 +195,8 @@ export class NavbarItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted when the tab bar is clicked"
       },

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

@@ -69,14 +69,19 @@ export class PlateNumber {
   }
   render() {
     const value = this.getValue();
+    const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';
     return (h(Host, null,
-      h("road-input-group", { class: "plate-number" },
-        h("label", { slot: "prepend", 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" }))));
+      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" })))));
   }
   static get is() { return "road-plate-number"; }
   static get encapsulation() { return "scoped"; }
@@ -140,6 +145,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 [{