@roadtrip/components 2.21.0

package/dist/cjs/utils-07e0a826.js

@@ -0,0 +1,80 @@
+'use strict';
+
+const index = require('./index-8402028a.js');
+
+let CACHED_MAP;
+const getIconMap = () => {
+  if (typeof window === 'undefined') {
+    return new Map();
+  }
+  else {
+    if (!CACHED_MAP) {
+      const win = window;
+      win.Ionicons = win.Ionicons || {};
+      CACHED_MAP = win.Ionicons.map = win.Ionicons.map || new Map();
+    }
+    return CACHED_MAP;
+  }
+};
+const addIcons = (icons) => {
+  const map = getIconMap();
+  Object.keys(icons).forEach(name => map.set(name, icons[name]));
+};
+const getUrl = (i) => {
+  let url = getSrc(i.src);
+  if (url) {
+    return url;
+  }
+  url = getName(i.name, i.icon);
+  if (url) {
+    return getNamedUrl(url);
+  }
+  if (i.icon) {
+    url = getSrc(i.icon);
+    if (url) {
+      return url;
+    }
+  }
+  return null;
+};
+const getNamedUrl = (iconName) => {
+  const url = getIconMap().get(iconName);
+  if (url) {
+    return url;
+  }
+  return index.getAssetPath(`svg/${iconName}.svg`);
+};
+const getName = (iconName, icon) => {
+  if (!iconName && icon && !isSrc(icon)) {
+    iconName = icon;
+  }
+  if (isStr(iconName)) {
+    iconName = toLower(iconName);
+  }
+  if (!isStr(iconName) || iconName.trim() === '') {
+    return null;
+  }
+  // only allow alpha characters and dash
+  const invalidChars = iconName.replace(/[a-z]|-|\d/gi, '');
+  if (invalidChars !== '') {
+    return null;
+  }
+  return iconName;
+};
+const getSrc = (src) => {
+  if (isStr(src)) {
+    src = src.trim();
+    if (isSrc(src)) {
+      return src;
+    }
+  }
+  return null;
+};
+const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
+const isStr = (val) => typeof val === 'string';
+const toLower = (val) => val.toLowerCase();
+
+exports.addIcons = addIcons;
+exports.getName = getName;
+exports.getUrl = getUrl;
+exports.isStr = isStr;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,62 @@
+{
+  "entries": [
+    "./components/icon/icon.js",
+    "./components/accordion/accordion.js",
+    "./components/alert/alert.js",
+    "./components/autocomplete/autocomplete.js",
+    "./components/avatar/avatar.js",
+    "./components/badge/badge.js",
+    "./components/button/button.js",
+    "./components/card/card.js",
+    "./components/carousel/carousel.js",
+    "./components/carousel-item/carousel-item.js",
+    "./components/checkbox/checkbox.js",
+    "./components/chip/chip.js",
+    "./components/col/col.js",
+    "./components/collapse/collapse.js",
+    "./components/counter/counter.js",
+    "./components/dialog/dialog.js",
+    "./components/drawer/drawer.js",
+    "./components/flap/flap.js",
+    "./components/grid/grid.js",
+    "./components/img/img.js",
+    "./components/input/input.js",
+    "./components/input-group/input-group.js",
+    "./components/item/item.js",
+    "./components/label/label.js",
+    "./components/list/list.js",
+    "./components/modal/modal.js",
+    "./components/navbar/navbar.js",
+    "./components/navbar-item/navbar-item.js",
+    "./components/plate-number/plate-number.js",
+    "./components/progress/progress.js",
+    "./components/radio/radio.js",
+    "./components/radio-group/radio-group.js",
+    "./components/range/range.js",
+    "./components/rating/rating.js",
+    "./components/row/row.js",
+    "./components/select/select.js",
+    "./components/skeleton/skeleton.js",
+    "./components/spinner/spinner.js",
+    "./components/switch/switch.js",
+    "./components/tab/tab.js",
+    "./components/tab-bar/tab-bar.js",
+    "./components/tab-button/tab-button.js",
+    "./components/table/table.js",
+    "./components/tabs/tabs.js",
+    "./components/text/text.js",
+    "./components/textarea/textarea.js",
+    "./components/toast/toast.js",
+    "./components/toolbar/toolbar.js",
+    "./components/toolbar-title/toolbar-title.js",
+    "./components/tooltip/tooltip.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.8.0",
+    "typescriptVersion": "4.2.3"
+  },
+  "collections": [],
+  "bundles": [],
+  "global": "./global/app.js"
+}

package/dist/collection/components/accordion/accordion.css

@@ -0,0 +1,127 @@
+/*
+ * Accordion
+ *
+ * For accessibility, we provide a style for focus only on Tab.
+ * For enable this focus, load the javascript polyfill for focus-visible
+ * (https://github.com/WICG/focus-visible).
+ *
+ * Index
+ * - Accordion
+ * - Accordion button
+ * - Accordion content
+ *
+ */
+
+/**
+ * @prop --accordion-header-border: height of the border of the header
+ * @prop --icon-color: color of the chevron icon
+ * @prop --header-padding: padding of the accordion header
+ * @prop --content-padding: padding of the accordion content
+ * @prop --content-margin: margin of the accordion content
+ */
+
+:host {
+  --accordion-header-border: 1px;
+  --chevron-color: var(--icon);
+  --header-padding: 1rem 0.5rem 1rem 1rem;
+  --content-padding: 1rem 0.5rem 0;
+  --content-margin: 0 1rem 1rem;
+
+  display: block;
+  margin-bottom: 1rem;
+}
+
+/* ACCORDION
+ -------------------- */
+
+.accordion {
+  font-family: var(--font, sans-serif);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--text);
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+}
+
+/**
+ * Open state
+ */
+
+.accordion[open] .accordion-arrow {
+  transform: rotate(-90deg);
+}
+
+.accordion[open] .accordion-content {
+  padding: var(--content-padding);
+  margin: var(--content-margin);
+}
+
+/* ACCORDION BUTTON
+ -------------------- */
+
+.accordion-trigger {
+  box-sizing: border-box;
+  display: block;
+  height: 4rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  outline: 0;
+}
+
+.accordion-trigger::-webkit-details-marker { /* Remove chrome native arrow */
+  display: none;
+}
+
+/**
+ * Focus on Tab
+ */
+
+.accordion-trigger.focus-visible {
+  border-color: var(--info);
+}
+
+/**
+ * Active state
+ */
+
+.accordion-trigger:active {
+  background: var(--background-second);
+}
+
+/**
+ * .accordion-header is an additionnal div
+ * because Safari doesn't support flexbox on <summary> element
+ */
+
+.accordion-header {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--header-padding);
+  cursor: pointer;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+/**
+ * Custom arrow
+ */
+
+.accordion-arrow {
+  margin-left: 1rem;
+  color: var(--icon-color);
+  transform: rotate(90deg);
+}
+
+/* ACCORDION CONTENT
+ -------------------- */
+
+.accordion-content {
+  padding: 0 0.5rem;
+  margin: 0 1rem;
+  overflow: hidden;
+  border-top: var(--accordion-header-border) solid var(--border);
+}

package/dist/collection/components/accordion/accordion.js

@@ -0,0 +1,58 @@
+import { Component, Prop, h } from '@stencil/core';
+import { navigationChevron } from '../../../icons';
+import './../../utils/polyfill';
+/**
+ * @slot header - Content of the header.
+ * @slot - Content hidden in the accordion.
+ */
+export class Accordion {
+  constructor() {
+    /**
+     * Set open to true to show the accordion element and to false to hide it.
+     */
+    this.isOpen = false;
+    /**
+     * Toggle the display when clicking header
+     */
+    this.onClick = () => {
+      this.isOpen = !this.isOpen;
+    };
+  }
+  render() {
+    return (h("details", { class: "accordion", open: this.isOpen },
+      h("summary", { class: "accordion-trigger", "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick },
+        h("div", { class: "accordion-header" },
+          h("slot", { name: "header" }),
+          h("road-icon", { class: "accordion-arrow", icon: navigationChevron }))),
+      h("div", { class: "accordion-content" },
+        h("slot", null))));
+  }
+  static get is() { return "road-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["accordion.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["accordion.css"]
+  }; }
+  static get properties() { return {
+    "isOpen": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set open to true to show the accordion element and to false to hide it."
+      },
+      "attribute": "is-open",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

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

@@ -0,0 +1,49 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Expand/Accordion',
+  component: 'road-accordion',
+};
+
+export const Playground = (args) => html`
+  <road-accordion 
+    is-open="${args['is-open']}"
+    style="--icon-color: ${args['--icon-color']}"
+  >
+    <div slot="header">${args.header}</div>
+    ${args['']}
+  </road-accordion>
+`;
+Playground.args = {
+  'is-open': false,
+  header: 'Accordion',
+  '': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.',
+};
+Playground.argTypes = {
+  'is-open': {
+    control: 'boolean',
+  },
+  header: {
+    control: 'text',
+  },
+  '': {
+    control: 'text',
+  },
+  '--icon-color': {
+    control: 'color',
+  },
+};
+
+export const Closed = () => html`
+  <road-accordion>
+  <div slot="header">Accordion link</div>
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+</road-accordion>
+`;
+
+export const Open = () => html`
+  <road-accordion is-open>
+  <div slot="header">Accordion link</div>
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+</road-accordion>
+`;

package/dist/collection/components/alert/alert.css

@@ -0,0 +1,108 @@
+/*
+ * Alert
+ *
+ * Provide contextual feedback messages for typical user actions
+ * with the handful of available and flexible alert messages.
+ *
+ * Default Alert color is Information colors
+ *
+ * Index
+ * - Alert
+ * - Alert icon
+ * - Alert description
+ * - Alert feedback
+ *
+ */
+
+
+/* ALERT
+ -------------------- */
+
+:host {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  padding: 0.5rem;
+  font-family: var(--font, sans-serif);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+}
+
+/* ALERT ICON
+ -------------------- */
+
+.alert-icon {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  margin-right: 0.5rem;
+}
+
+/* ALERT DESCRIPTION
+ -------------------- */
+
+.alert-description {
+  padding-top: 0.375rem;
+  margin: 0;
+}
+
+/* ALERT FEEDBACK
+ -------------------- */
+
+/**
+ * Alert success
+ */
+
+:host(.alert-info) {
+  color: var(--info);
+  background: var(--info-background);
+  border-color: var(--info);
+}
+
+:host(.alert-info) ::slotted(road-icon) {
+  color: var(--info);
+}
+
+/**
+ * Alert success
+ */
+
+:host(.alert-success) {
+  color: var(--success-text);
+  background: var(--success-background);
+  border-color: var(--success);
+}
+
+:host(.alert-success) ::slotted(road-icon) {
+  color: var(--success-text);
+}
+
+/**
+ * Alert warning
+ */
+
+:host(.alert-warning) {
+  color: var(--warning-text);
+  background: var(--warning-background);
+  border-color: var(--warning);
+}
+
+:host(.alert-warning) ::slotted(road-icon) {
+  color: var(--warning);
+}
+
+/**
+ * Alert danger
+ */
+
+:host(.alert-danger) {
+  color: var(--danger-text);
+  background: var(--danger-background);
+  border-color: var(--danger);
+}
+
+:host(.alert-danger) ::slotted(road-icon) {
+  color: var(--danger-text);
+}

package/dist/collection/components/alert/alert.js

@@ -0,0 +1,54 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+/**
+ * @slot icon - Icon of the alert, it should be a road-icon element.
+ * @slot  - Message of the alert.
+ */
+export class Alert {
+  constructor() {
+    /**
+     * Set the color of alert. e.g. info, success, warning, danger
+     */
+    this.color = 'info';
+  }
+  render() {
+    const colorClass = this.color !== undefined ? `alert-${this.color}` : '';
+    return (h(Host, { class: colorClass, role: "alert" },
+      h("div", { class: "alert-icon" },
+        h("slot", { name: "icon" })),
+      h("p", { class: "alert-description" },
+        h("slot", null))));
+  }
+  static get is() { return "road-alert"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["alert.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["alert.css"]
+  }; }
+  static get properties() { return {
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FeedbackColors",
+        "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+        "references": {
+          "FeedbackColors": {
+            "location": "import",
+            "path": "../../interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the color of alert. e.g. info, success, warning, danger"
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "'info'"
+    }
+  }; }
+}

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

@@ -0,0 +1,60 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Indicators/Alert',
+  component: 'road-alert',
+};
+
+export const Playground = (args) => html`
+  <road-alert color="${args.color}">
+    <road-icon slot="icon" name="${args.icon}"></road-icon>
+      ${args['']}
+  </road-alert>
+`;
+Playground.args = {
+  color: 'info',
+  icon: 'alert-info',
+  '': 'Information',
+};
+Playground.argTypes = {
+  color: {
+    options: ['info', 'success', 'warning', 'danger'],
+    control: {
+      type: 'radio',
+    },
+  },
+  icon: {
+    control: 'text',
+  },
+  '': {
+    control: 'text',
+  },
+};
+
+export const Info = () => html`
+  <road-alert>
+  <road-icon slot="icon" name="alert-info"></road-icon>
+  Information
+</road-alert>
+`;
+
+export const Success = () => html`
+  <road-alert color="success">
+  <road-icon slot="icon" name="alert-success"></road-icon>
+  Success
+</road-alert>
+`;
+
+export const Warning = () => html`
+  <road-alert color="warning">
+  <road-icon slot="icon" name="alert-warning"></road-icon>
+  Warning
+</road-alert>
+`;
+
+export const Danger = () => html`
+  <road-alert color="danger">
+  <road-icon slot="icon" name="alert-danger"></road-icon>
+  Danger
+</road-alert>
+`;

package/dist/collection/components/autocomplete/autocomplete.css

@@ -0,0 +1,53 @@
+/*
+ * Autocomplete
+ *
+ * Autocomplete layer for fields
+ *
+ * Index
+ * - List
+ * - Item
+ *
+ */
+
+:host {
+  position: relative;
+  display: block;
+}
+
+/* LIST
+ -------------------- */
+
+.autocomplete-list {
+  position: absolute;
+  top: 3rem;
+  z-index: 1;
+  width: 100%;
+  max-height: 12.5rem;
+  padding: 0 0 0.5rem;
+  margin: 0;
+  overflow-y: scroll;
+  font-family: var(--font, sans-serif);
+  font-size: 0.875rem;
+  color: var(--text);
+  list-style-type: none;
+  background: var(--white);
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+}
+
+/* ITEM
+ -------------------- */
+
+.autocomplete-item {
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+}
+
+/**
+ * Hover state
+ */
+
+.autocomplete-item:hover {
+  color: var(--secondary-contrast);
+  background: var(--secondary);
+}