@roadtrip/components 2.23.0 → 2.24.0

package/dist/collection/components/icon/icon.css

@@ -1,3 +1,12 @@
+/*
+ * Icon
+ *
+ * Index
+ * - Sizes
+ * - Colors
+ * - Rotation
+ */
+
 :host {
   box-sizing: content-box;
   display: inline-block;
@@ -13,7 +22,7 @@
   height: 100%;
 }
 
-/* ICON SIZES
+/* SIZES
  -------------------- */
 
 :host(.icon-sm) {
@@ -41,7 +50,7 @@
   height: 4rem;
 }
 
-/* ICON COLORS
+/* COLORS
  -------------------- */
 
 :host(.icon-primary) {
@@ -80,7 +89,7 @@
   color: var(--white);
 }
 
-/* ICON ROTATION
+/* ROTATION
  -------------------- */
 
 :host(.icon-rotate-90) {

package/dist/collection/components/img/img.css

@@ -3,9 +3,8 @@
  *
  * Index
  * - Img
- * - Native-img
+ * - Native
  * - Placeholder
- *
  */
 
 
@@ -14,7 +13,7 @@
   object-fit: contain;
 }
 
-/* NATIVE IMG
+/* NATIVE
  -------------------- */
 
 .native-img {

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

@@ -4,9 +4,8 @@
  * Index
  * - Input
  * - Textarea
- * - Input label
- * - Input error
- *
+ * - Label
+ * - Error
  */
 
 /**
@@ -129,7 +128,7 @@
   opacity: 1;
 }
 
-/* INPUT LABEL
+/* LABEL
  -------------------- */
 
 .form-label {
@@ -153,7 +152,7 @@
   padding-top: 0;
 }
 
-/* INPUT ERROR
+/* ERROR
  -------------------- */
 
 .invalid-feedback {

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

@@ -12,7 +12,6 @@
  * - 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;

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 {
@@ -100,7 +99,7 @@ a {
   -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,
@@ -170,7 +169,7 @@
   margin-right: auto;
 }
 
-/* MODAL TITLE
+/* TITLE
  -------------------- */
 
 .modal-title {
@@ -185,7 +184,7 @@
   font-weight: 400;
 }
 
-/* MODAL BODY
+/* BODY
  -------------------- */
 
 .modal-body {

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-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 {
@@ -77,7 +76,7 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-/* INNER BUTTON
+/* INNER
  -------------------- */
 
 .button-inner {
@@ -106,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
  -------------------- */
 
@@ -75,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 [{

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 {
@@ -140,7 +139,7 @@
   border: none;
 }
 
-/* RADIO ERROR
+/* ERROR
  -------------------- */
 
 .form-radio-input.is-invalid ~ .form-radio-label::before {

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/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
  */
 
 
@@ -84,7 +83,7 @@
   opacity: 1;
 }
 
-/* SELECT LABEL
+/* LABEL
  -------------------- */
 
 .form-select-label {
@@ -100,7 +99,7 @@
   transform-origin: 0 0;
 }
 
-/* SELECT ERROR
+/* ERROR
  -------------------- */
 
 .invalid-feedback {

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

@@ -6,7 +6,6 @@
  * Index
  * - List
  * - Item
- *
  */
 
 :host {