@roadtrip/components 2.45.1 → 2.47.0

package/dist/collection/components/progress/progress.js

@@ -6,17 +6,27 @@ export class ProgressBar {
      * The value should be between [0, 100].
      */
     this.value = 0;
+    /**
+     * The number of steps should be 4 or 5.
+     */
+    this.numbersteps = '4';
     /**
      * Label display in progress bar
      */
     this.label = '';
+    /**
+     * Show step
+     */
+    this.showstep = false;
     /**
      * The color to use from your application's color palette.
      */
     this.color = 'primary';
   }
   render() {
-    return (h(Host, { class: "progress-element" }, h("p", { class: "progress-element-label" }, this.label), h("div", { class: `progress progress-${this.color}` }, h("div", { class: "progress-bar", role: "progressbar", style: { width: `${this.value}%` }, "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100" }))));
+    const valueRound = Math.round(this.value / 5 / 5);
+    console.log(this.value / 5 / 5);
+    return (h(Host, { class: "progress-element" }, h("div", { class: `progress progress-${this.color}` }, h("div", { class: "progress-bar", role: "progressbar", style: { width: `${this.value}%` }, "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100" })), h("div", { class: "progress-element-info" }, h("span", { class: "progress-element-label" }, this.label), this.showstep && h("span", { class: "progress-element-step" }, valueRound, "/", this.numbersteps))));
   }
   static get is() { return "road-progress"; }
   static get encapsulation() { return "shadow"; }
@@ -50,6 +60,24 @@ export class ProgressBar {
         "reflect": false,
         "defaultValue": "0"
       },
+      "numbersteps": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'4' | '5' | 'default'",
+          "resolved": "\"4\" | \"5\" | \"default\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The number of steps should be 4 or 5."
+        },
+        "attribute": "numbersteps",
+        "reflect": false,
+        "defaultValue": "'4'"
+      },
       "label": {
         "type": "string",
         "mutable": false,
@@ -68,6 +96,24 @@ export class ProgressBar {
         "reflect": false,
         "defaultValue": "''"
       },
+      "showstep": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show step"
+        },
+        "attribute": "showstep",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "color": {
         "type": "string",
         "mutable": false,

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

@@ -5,13 +5,15 @@ export default {
   component: 'road-progress',
 };
 
-export const Playground = ({ value, color, label }) => html`
-  <road-progress value="${value}" color="${color}" label="${label}"></road-progress>
+export const Playground = ({ value, color, label, showstep, numbersteps }) => html`
+  <road-progress value="${value}" color="${color}" label="${label}" showstep="${showstep}" numbersteps="${numbersteps}"></road-progress>
 `;
 Playground.args = {
   value: 25,
   color: 'primary',
   label: '',
+  showstep:'false',
+  numbersteps: '4',
 };
 Playground.argTypes = {
   value: {
@@ -21,9 +23,20 @@ Playground.argTypes = {
       max: '100',
     },
   },
+  numbersteps: {
+    options: ['4', '5'],
+    control: {
+      type: 'select',
+      min: '4',
+      max: '5',
+    },
+  },
   label: {
     control: 'text',
   },
+  showstep: {
+    control: 'boolean',
+  },
   color: {
     options: ['primary', 'secondary', 'info', 'success', 'warning', 'danger'],
     control: {
@@ -85,21 +98,21 @@ export const color = () => html`
 `;
 
 export const Label = () => html`
-<road-progress value="0" label="label"></road-progress>
+<road-progress value="0" label="label" showstep="true"></road-progress>
 
 <br>
 
-<road-progress value="25" label="label"></road-progress>
+<road-progress value="25" label="label" showstep="true"></road-progress>
 
 <br>
 
-<road-progress value="50" label="label"></road-progress>
+<road-progress value="50" label="label" showstep="true"></road-progress>
 
 <br>
 
-<road-progress value="75" label="label"></road-progress>
+<road-progress value="75" label="label" showstep="true"></road-progress>
 
 <br>
 
-<road-progress value="100" label="label"></road-progress>
+<road-progress value="100" label="label" showstep="true"></road-progress>
 `;

package/dist/collection/components/segmented-button/segmented-button.css

@@ -0,0 +1,123 @@
+/*
+ * Tab button
+ */
+
+
+/* BUTTON
+ -------------------- */
+
+
+:host {
+  --border-radius: 0.25rem;
+  --font-size: 1rem;
+  --margin-bottom: 1rem;
+  --padding-start: 1.5rem;
+  --padding-end: 1.5rem;
+  box-sizing: border-box;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  max-height: 2.5rem;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--road-primary-500);
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: var(--road-grey-000);
+  border-top: 1px solid var(--road-primary-500);
+  border-bottom: 1px solid var(--road-primary-500);
+  border-left: 1px solid var(--road-primary-500);
+  border-radius: 0;
+  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+
+:host(:first-child){
+  border: 1px solid var(--road-primary-500);
+  border-right: 0;
+  border-radius: 999em 0 0 999em;
+}
+
+:host(:last-child){
+  border: 1px solid var(--road-primary-500);
+  border-radius: 0 999em 999em 0;
+}
+
+/**
+ * Active state
+ */
+
+:host(.tab-selected) {
+  color: var(--road-primary-contrast);
+  background-color: var(--road-primary-500);
+}
+
+:host(.tab-selected:hover) {
+  background-color: var(--road-primary-700);
+}
+
+
+/**
+ * Hover state
+ */
+
+:host(:hover) {
+  background: var(--road-primary-100);
+}
+
+/**
+ * Focus state
+ */
+
+
+:host(.focus-visible) {
+  background: var(--road-primary-100);
+  outline: 0;
+}
+
+:host(.tab-selected.focus-visible){
+  background-color: var(--road-primary-700);
+}
+
+
+/* NATIVE
+ -------------------- */
+
+.button-native {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  width: 100%;
+  height: 100%;
+  max-height: 2.5rem;
+  padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);
+  margin: 0;
+  overflow: hidden;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-align: inherit;
+  text-decoration: none;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+  letter-spacing: inherit;
+  white-space: inherit;
+  cursor: pointer;
+  background: transparent;
+  -webkit-user-drag: none;
+  border-color: initial;
+  border-style: initial;
+  border-width: 0;
+  border-radius: inherit;
+  border-image: initial;
+  outline: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+

package/dist/collection/components/segmented-button/segmented-button.js

@@ -0,0 +1,160 @@
+import { Host, h } from '@stencil/core';
+/**
+ *
+ * @part native - The native HTML anchor element that wraps all child elements.
+ */
+export class SegmentedButton {
+  constructor() {
+    /**
+     * The selected tab component
+     */
+    this.selected = false;
+    this.onKeyUp = (ev) => {
+      if (ev.key === 'Enter' || ev.key === ' ') {
+        this.selectTab(ev);
+      }
+    };
+    this.onClick = (ev) => {
+      this.selectTab(ev);
+    };
+  }
+  onButtonBarChanged(ev) {
+    const dispatchedFrom = ev.target;
+    const parent = this.el.parentElement;
+    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {
+      this.selected = this.tab === ev.detail.tab;
+    }
+  }
+  selectTab(ev) {
+    if (this.tab !== undefined) {
+      this.roadsegmentedbuttonclick.emit({
+        tab: this.tab,
+        selected: this.selected,
+      });
+      this.roadSegmentedButtonClick.emit({
+        tab: this.tab,
+        selected: this.selected,
+      });
+      ev.preventDefault();
+    }
+  }
+  get tabIndex() {
+    const hasTabIndex = this.el.hasAttribute('tabindex');
+    if (hasTabIndex) {
+      return this.el.getAttribute('tabindex');
+    }
+    return 0;
+  }
+  render() {
+    const { tabIndex, selected, tab } = this;
+    return (h(Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        'tab-selected': selected,
+      } }, h("button", { type: "button", tabIndex: -1, class: "button-native", part: "native" }, h("slot", null))));
+  }
+  static get is() { return "road-segmented-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["segmented-button.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["segmented-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The selected tab component"
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "tab": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A tab id must be provided for each `road-tab`. It's used internally to reference"
+        },
+        "attribute": "tab",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "roadsegmentedbuttonclick",
+        "name": "roadsegmentedbuttonclick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Emitted when the tab bar is clicked"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "roadSegmentedButtonClick",
+        "name": "roadSegmentedButtonClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "roadSegmentedButtonBarChanged",
+        "method": "onButtonBarChanged",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "roadSegmentedButtonbarchanged",
+        "method": "onButtonBarChanged",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/segmented-button-bar/segmented-button-bar.css

@@ -0,0 +1,9 @@
+/*
+ * Segmented button bar
+ *
+ */
+
+:host {
+  display: flex;
+  max-width: 500px;
+}

package/dist/collection/components/segmented-button-bar/segmented-button-bar.js

@@ -0,0 +1,102 @@
+import { Host, h } from '@stencil/core';
+import '../../utils/polyfill';
+/**
+ * @slot  - Content of the segmentedButtonBar, it should be road-segmented-button elements.
+ */
+export class ButtonBar {
+  selectedTabChanged() {
+    if (this.selectedTab !== undefined) {
+      this.roadsegmentedbuttonbarchanged.emit({
+        tab: this.selectedTab,
+      });
+      this.roadSegmentedButtonBarChanged.emit({
+        tab: this.selectedTab,
+      });
+    }
+  }
+  componentWillLoad() {
+    this.selectedTabChanged();
+  }
+  render() {
+    return (h(Host, { role: "tablist" }, h("slot", null)));
+  }
+  static get is() { return "road-segmented-button-bar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["segmented-button-bar.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["segmented-button-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selectedTab": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The selected tab component"
+        },
+        "attribute": "selected-tab",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "roadsegmentedbuttonbarchanged",
+        "name": "roadsegmentedbuttonbarchanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "roadSegmentedButtonBarChanged",
+        "name": "roadSegmentedButtonBarChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "selectedTab",
+        "methodName": "selectedTabChanged"
+      }];
+  }
+}

package/dist/collection/components/segmented-buttons/segmented-buttons.css

@@ -0,0 +1,9 @@
+/*
+ * Segmented buttons
+ *
+ */
+
+:host {
+  position: relative;
+  display: block;
+}