@roadtrip/components 2.21.0 → 2.24.0

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

@@ -4,15 +4,15 @@
  * Index
  * - Input
  * - Textarea
- * - Input label
- * - Input error
- *
+ * - Label
+ * - Error
  */
 
 /**
  * @prop --input-text-align: align the content of the field
  * @prop --border-radius: Border radius of the field
- * @prop --margin-bottom: Bottom margin of the button
+ * @prop --margin-bottom: Bottom margin of the field
+ * @prop --height: height of the field
  */
 
 
@@ -20,6 +20,7 @@
   --input-text-align: left;
   --border-radius: 0.25rem;
   --margin-bottom: 1rem;
+  --height: 3rem;
 
   position: relative;
   display: block;
@@ -35,7 +36,7 @@
   box-sizing: border-box;
   display: block;
   width: 100%;
-  height: 3rem;
+  height: var(--height);
   padding: 0.75rem 1rem 0;
   margin: 0;
   font-size: 1rem;
@@ -80,11 +81,6 @@
  * Placeholder
  */
 
-.form-control:-ms-input-placeholder {
-  color: var(--text-second);
-  opacity: 1;
-}
-
 .form-control::placeholder {
   color: var(--text-second);
   opacity: 1;
@@ -102,10 +98,6 @@
   transform: scale(0.625) translateY(-0.625rem);
 }
 
-.form-control:-ms-input-placeholder ~ .form-label {
-  transform: scale(0.625) translateY(-0.625rem);
-}
-
 .form-control:placeholder-shown ~ .form-label {
   transform: scale(0.625) translateY(-0.625rem);
 }
@@ -133,9 +125,10 @@
   color: var(--text-disabled);
   cursor: not-allowed;
   background: var(--background-second);
+  opacity: 1;
 }
 
-/* INPUT LABEL
+/* LABEL
  -------------------- */
 
 .form-label {
@@ -159,7 +152,7 @@
   padding-top: 0;
 }
 
-/* INPUT ERROR
+/* ERROR
  -------------------- */
 
 .invalid-feedback {

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

@@ -1,4 +1,18 @@
 import { Component, Event, Host, Prop, Watch, h } from '@stencil/core';
+const debounceEvent = (event, wait) => {
+  const original = event._original || event;
+  return {
+    _original: event,
+    emit: debounce(original.emit.bind(original), wait)
+  };
+};
+const debounce = (func, wait = 0) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(func, wait, ...args);
+  };
+};
 export class Input {
   constructor() {
     /**
@@ -53,6 +67,10 @@ export class Input {
      * Label for the field
      */
     this.label = '';
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `roadChange` event after each keystroke.
+     */
+    this.debounce = 0;
     this.onInput = (ev) => {
       const input = ev.target;
       if (input) {
@@ -67,6 +85,9 @@ export class Input {
       this.roadFocus.emit();
     };
   }
+  debounceChanged() {
+    this.roadChange = debounceEvent(this.roadChange, this.debounce);
+  }
   /**
    * Update the native input element when the value changes
    */
@@ -528,6 +549,24 @@ export class Input {
       },
       "attribute": "error",
       "reflect": false
+    },
+    "debounce": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the amount of time, in milliseconds, to wait to trigger the `roadChange` event after each keystroke."
+      },
+      "attribute": "debounce",
+      "reflect": false,
+      "defaultValue": "0"
     }
   }; }
   static get events() { return [{
@@ -596,6 +635,9 @@ export class Input {
       }
     }]; }
   static get watchers() { return [{
+      "propName": "debounce",
+      "methodName": "debounceChanged"
+    }, {
       "propName": "value",
       "methodName": "valueChanged"
     }]; }

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

@@ -34,6 +34,7 @@ export const Playground = (args) => html`
     enterkeyhint="${ifDefined(args.enterkeyhint)}"
     inputmode="${ifDefined(args.inputmode)}"
     .readonly="${args.readonly}"
+    debounce="${args.debounce}"
     @roadChange=${event => args.roadChange(event.detail.value)}
     @roadInput=${event => args.roadInput(event.target.value)}
   ></road-input>
@@ -127,6 +128,9 @@ Playground.argTypes = {
       type: 'select',
     },
   },
+  debounce: {
+    control: 'number'
+  },
   roadChange: {
     action: 'roadChange',
   },

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

@@ -7,20 +7,14 @@
  *
  * Index
  * - Input group
- * - Input group prepend / append
- * - Input group text or icon addon
- * - Input group round corners
- * - Input group error
- * - Input group counter
- *
- */
-
-/**
- * @prop --margin-bottom: Bottom margin of the input-group
+ * - Prepend / append
+ * - Text or icon addon
+ * - Round corners
+ * - Error
+ * - Disabled
  */
 
 :host {
-  --margin-bottom: 1rem;
   display: block;
 }
 
@@ -33,12 +27,12 @@
   flex-wrap: wrap;
   align-items: stretch;
   width: 100%;
-  margin-bottom: var(--margin-bottom);
   font-family: var(--font, sans-serif);
 }
 
 ::slotted(road-input),
 ::slotted(input),
+::slotted(textarea),
 ::slotted(road-select) {
   position: relative;
   flex: 1 1 auto;
@@ -46,23 +40,41 @@
   margin-bottom: 0;
 }
 
+/**
+ * Remove border for append and prepend element
+ * with white background
+ */
+
+::slotted([slot="prepend"]) {
+  margin-right: -1px;
+  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;
+  background: var(--white);
+  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,
@@ -85,7 +97,6 @@
 .input-group-prepend {
   z-index: 1;
   order: -1;
-  margin-right: -1px;
 }
 
 .input-group-prepend ~ .form-label {
@@ -95,12 +106,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) {
@@ -115,9 +125,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)),
@@ -125,8 +136,7 @@
   border-radius: 0;
 }
 
-.input-group-append ::slotted(road-button),
-.input-group-append ::slotted(label) {
+.input-group-append ::slotted([slot="append"]) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -140,44 +150,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"]) {
-  border-color: var(--danger);
-  border-right-color: transparent;
-}
-
-/**
- * Append error
- */
-
-:slotted([error] ~ [slot="append"].btn-outline-default),
-:slotted([error] ~ [slot="append"]label) {
+.input-group.is-invalid ::slotted([slot="append"]),
+.input-group.is-invalid ::slotted([slot="prepend"]) {
   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) {