@roadtrip/components 2.21.0

package/dist/cjs/road-badge_11.cjs.entry.js

@@ -0,0 +1,516 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8402028a.js');
+require('./polyfill-c7a0fa22.js');
+const index$1 = require('./index-0181f02a.js');
+const utils = require('./utils-07e0a826.js');
+
+const badgeCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:1rem;min-height:1rem;padding:0;font-family:var(--font, sans-serif);font-size:0.625rem;font-weight:700;color:var(--secondary-contrast);white-space:nowrap;background-color:var(--secondary);border-radius:1rem}:host(.badge-bubble){min-width:0.5rem;min-height:0.5rem}:host(.badge-primary){color:var(--primary-contrast);background-color:var(--primary)}:host(.badge-secondary){color:var(--secondary-contrast);background-color:var(--secondary)}:host(.badge-accent){color:var(--accent-contrast);background-color:var(--accent)}:host(.badge-info){color:var(--info-contrast);background-color:var(--info)}:host(.badge-success){color:var(--success-contrast);background-color:var(--success)}:host(.badge-warning){color:var(--warning-contrast);background-color:var(--warning)}:host(.badge-danger){color:var(--danger-contrast);background-color:var(--danger-text)}";
+
+const Badge = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * if `true` the badge will be displayed has a little bubble
+     */
+    this.bubble = false;
+  }
+  render() {
+    const colorClass = this.color !== undefined ? `badge-${this.color}` : '';
+    const bubbleClass = this.bubble ? 'badge-bubble' : '';
+    return (index.h(index.Host, { class: `${colorClass} ${bubbleClass}` }, index.h("slot", null)));
+  }
+};
+Badge.style = badgeCss;
+
+const buttonCss = ":host{--margin-bottom:1rem;--border-radius:0.25rem;--padding-start:1rem;--padding-end:1rem;--font-size:1rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:3rem;padding:0;margin-bottom:var(--margin-bottom);font-family:var(--font, sans-serif);font-size:var(--font-size);font-weight:700;line-height:1.375;color:var(--text);text-decoration:none;white-space:nowrap;vertical-align:middle;background:transparent;border:1px solid transparent;border-radius:var(--border-radius);-webkit-transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:hover){text-decoration:none}:host(.focus-visible){outline:0}.button-native{position:relative;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;padding-top:0;padding-right:var(--padding-end);padding-bottom:0;padding-left:var(--padding-start);margin:0;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;border:none;outline:0}:host(.btn-primary){color:var(--primary-contrast);background:var(--primary)}:host(.btn-primary) ::slotted(road-icon){color:var(--primary-contrast)}:host(.btn-primary:not([disabled]):hover),:host(.btn-primary:not([disabled]).focus-visible){background:var(--primary-hover)}:host(.btn-secondary){color:var(--secondary-contrast);background:var(--secondary)}:host(.btn-secondary) ::slotted(road-icon){color:var(--secondary-contrast)}:host(.btn-secondary:not([disabled]):hover),:host(.btn-secondary:not([disabled]).focus-visible){background:var(--secondary-hover)}:host(.btn-info){color:var(--info-contrast);background:var(--info)}:host(.btn-info) ::slotted(road-icon){color:var(--info-contrast)}:host(.btn-info:not([disabled]):hover),:host(.btn-info:not([disabled]).focus-visible){background:var(--info-hover)}:host(.btn-success){color:var(--success-contrast);background:var(--success-text)}:host(.btn-success) ::slotted(road-icon){color:var(--success-contrast)}:host(.btn-success:not([disabled]):hover),:host(.btn-success:not([disabled]).focus-visible){background:var(--success-hover)}:host(.btn-warning){color:var(--warning-contrast);background:var(--warning)}:host(.btn-warning) ::slotted(road-icon){color:var(--warning-contrast)}:host(.btn-warning:not([disabled]):hover),:host(.btn-warning:not([disabled]).focus-visible){background:var(--warning-hover)}:host(.btn-danger){color:var(--danger-contrast);background:var(--danger-text)}:host(.btn-danger) ::slotted(road-icon){color:var(--danger-contrast)}:host(.btn-danger:not([disabled]):hover),:host(.btn-danger:not([disabled]).focus-visible){background:var(--danger-hover)}:host(.btn-default:not([disabled]).focus-visible){background:var(--background-second)}:host(.btn-link){font-weight:400;color:var(--secondary);background:transparent}:host(.btn-link:not([disabled]):hover),:host(.btn-link:not([disabled]).focus-visible){color:var(--secondary-hover)}:host(.btn-outline-primary),:host(.btn-outline-secondary),:host(.btn-outline-success),:host(.btn-outline-warning),:host(.btn-outline-danger),:host(.btn-outline-default){background:transparent}:host(.btn-outline-default){color:var(--text-second);border-color:var(--text-second)}:host(.btn-outline-default:hover),:host(.btn-outline-default.focus-visible){background:var(--background)}:host(.btn-outline-primary){color:var(--primary);border-color:var(--primary)}:host(.btn-outline-primary) ::slotted(road-icon){color:var(--primary)}:host(.btn-outline-primary:hover),:host(.btn-outline-primary.focus-visible){background:var(--primary-lighten)}:host(.btn-outline-secondary){color:var(--secondary);border-color:var(--secondary)}:host(.btn-outline-secondary) ::slotted(road-icon){color:var(--secondary)}:host(.btn-outline-secondary:hover),:host(.btn-outline-secondary.focus-visible){background:var(--secondary-lighten)}:host(.btn-outline-info){color:var(--info);border-color:var(--info)}:host(.btn-outline-info) ::slotted(road-icon){color:var(--info)}:host(.btn-outline-info:hover),:host(.btn-outline-info.focus-visible){background:var(--info-background)}:host(.btn-outline-success){color:var(--success-text);border-color:var(--success-text)}:host(.btn-outline-success) ::slotted(road-icon){color:var(--success-text)}:host(.btn-outline-success:hover),:host(.btn-outline-success.focus-visible){background:var(--success-background)}:host(.btn-outline-warning){color:var(--warning-text);border-color:var(--warning-text)}:host(.btn-outline-warning) ::slotted(road-icon){color:var(--warning-text)}:host(.btn-outline-warning:hover),:host(.btn-outline-warning.focus-visible){background:var(--warning-background)}:host(.btn-outline-danger){color:var(--danger-text);border-color:var(--danger-text)}:host(.btn-outline-danger) ::slotted(road-icon){color:var(--danger-text)}:host(.btn-outline-danger:hover),:host(.btn-outline-danger.focus-visible){background:var(--danger-background)}:host([aria-disabled]){opacity:0.16}.button-native:disabled{cursor:not-allowed}:host([class*=\"btn-outline\"][disabled]:hover),:host([class*=\"btn-outline\"][disabled].focus-visible){background:var(--white)}::slotted([slot=\"start\"]){margin-right:0.5rem}::slotted([slot=\"end\"]){margin-left:0.5rem}:host(.btn-md){--font-size:0.875rem;height:2.5rem}:host(.btn-md) ::slotted(road-icon){width:1.5rem;height:1.5rem}:host(.btn-sm){--font-size:0.75rem;height:2rem;line-height:1.5}:host(.btn-sm) ::slotted(road-icon){width:1.25rem;height:1.25rem}:host(.btn-block){width:100%}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;height:auto}";
+
+const Button = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.roadFocus = index.createEvent(this, "roadFocus", 7);
+    this.roadBlur = index.createEvent(this, "roadBlur", 7);
+    /**
+     * The color to use from your application's color palette.
+     */
+    this.color = 'default';
+    /**
+     * The type of the button.
+     */
+    this.buttonType = 'button';
+    /**
+     * If `true`, the user cannot interact with the button.
+     */
+    this.disabled = false;
+    /**
+     * Set to `true` for a transparent button with a border
+     */
+    this.outline = false;
+    this.onClick = (ev) => {
+      if (this.el.shadowRoot && this.el.attachShadow) {
+        // this button wants to specifically submit a form
+        // climb up the dom to see if we're in a <form>
+        // and if so, then use JS to submit it
+        const form = this.el.closest('form');
+        if (form) {
+          ev.preventDefault();
+          const fakeButton = document.createElement('button');
+          fakeButton.type = this.buttonType;
+          fakeButton.style.display = 'none';
+          form.appendChild(fakeButton);
+          fakeButton.click();
+          fakeButton.remove();
+        }
+      }
+    };
+    this.onFocus = () => {
+      this.roadFocus.emit();
+    };
+    this.onBlur = () => {
+      this.roadBlur.emit();
+    };
+  }
+  render() {
+    const { buttonType, disabled, href, rel, target, color } = this;
+    const TagType = this.href === undefined ? 'button' : 'a';
+    const attrs = (TagType === 'button')
+      ? { type: buttonType }
+      : {
+        download: this.download,
+        href,
+        rel,
+        target,
+      };
+    const colorClass = this.outline ? `btn-outline-${color}` : `btn-${color}`;
+    const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
+    const expandClass = this.expand ? 'btn-block' : '';
+    return (index.h(index.Host, { class: `${colorClass} ${sizeClass} ${expandClass}`, onClick: this.onClick, "aria-disabled": disabled ? 'true' : null }, index.h(TagType, Object.assign({}, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("slot", { name: "start" }), index.h("slot", null), index.h("slot", { name: "end" }))));
+  }
+  get el() { return index.getElement(this); }
+};
+Button.style = buttonCss;
+
+const colCss = ":host{position:relative;-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;width:100%;max-width:100%;min-height:1px;padding-right:8px;padding-left:8px}:host(.col-auto){-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}:host(.col-1){-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}:host(.col-2){-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}:host(.col-3){-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.col-4){-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}:host(.col-5){-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}:host(.col-6){-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.col-7){-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}:host(.col-8){-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}:host(.col-9){-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.col-10){-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}:host(.col-11){-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}:host(.col-12){-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}:host(.offset-1){margin-left:8.333333%}:host(.offset-2){margin-left:16.666667%}:host(.offset-3){margin-left:25%}:host(.offset-4){margin-left:33.333333%}:host(.offset-5){margin-left:41.666667%}:host(.offset-6){margin-left:50%}:host(.offset-7){margin-left:58.333333%}:host(.offset-8){margin-left:66.666667%}:host(.offset-9){margin-left:75%}:host(.offset-10){margin-left:83.333333%}:host(.offset-11){margin-left:91.666667%}@media (min-width: 576px){:host(.col-sm){-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}:host(.col-sm-auto){-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}:host(.col-sm-1){-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}:host(.col-sm-2){-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}:host(.col-sm-3){-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.col-sm-4){-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}:host(.col-sm-5){-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}:host(.col-sm-6){-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.col-sm-7){-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}:host(.col-sm-8){-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}:host(.col-sm-9){-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.col-sm-10){-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}:host(.col-sm-11){-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}:host(.col-sm-12){-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}:host(.offset-sm-0){margin-left:0}:host(.offset-sm-1){margin-left:8.333333%}:host(.offset-sm-2){margin-left:16.666667%}:host(.offset-sm-3){margin-left:25%}:host(.offset-sm-4){margin-left:33.333333%}:host(.offset-sm-5){margin-left:41.666667%}:host(.offset-sm-6){margin-left:50%}:host(.offset-sm-7){margin-left:58.333333%}:host(.offset-sm-8){margin-left:66.666667%}:host(.offset-sm-9){margin-left:75%}:host(.offset-sm-10){margin-left:83.333333%}:host(.offset-sm-11){margin-left:91.666667%}}@media (min-width: 768px){:host(.col-md){-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}:host(.col-md-auto){-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}:host(.col-md-1){-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}:host(.col-md-2){-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}:host(.col-md-3){-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.col-md-4){-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}:host(.col-md-5){-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}:host(.col-md-6){-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.col-md-7){-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}:host(.col-md-8){-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}:host(.col-md-9){-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.col-md-10){-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}:host(.col-md-11){-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}:host(.col-md-12){-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}:host(.offset-md-0){margin-left:0}:host(.offset-md-1){margin-left:8.333333%}:host(.offset-md-2){margin-left:16.666667%}:host(.offset-md-3){margin-left:25%}:host(.offset-md-4){margin-left:33.333333%}:host(.offset-md-5){margin-left:41.666667%}:host(.offset-md-6){margin-left:50%}:host(.offset-md-7){margin-left:58.333333%}:host(.offset-md-8){margin-left:66.666667%}:host(.offset-md-9){margin-left:75%}:host(.offset-md-10){margin-left:83.333333%}:host(.offset-md-11){margin-left:91.666667%}}@media (min-width: 992px){:host(.col-lg){-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}:host(.col-lg-auto){-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}:host(.col-lg-1){-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}:host(.col-lg-2){-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}:host(.col-lg-3){-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.col-lg-4){-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}:host(.col-lg-5){-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}:host(.col-lg-6){-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.col-lg-7){-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}:host(.col-lg-8){-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}:host(.col-lg-9){-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.col-lg-10){-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}:host(.col-lg-11){-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}:host(.col-lg-12){-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}:host(.offset-lg-0){margin-left:0}:host(.offset-lg-1){margin-left:8.333333%}:host(.offset-lg-2){margin-left:16.666667%}:host(.offset-lg-3){margin-left:25%}:host(.offset-lg-4){margin-left:33.333333%}:host(.offset-lg-5){margin-left:41.666667%}:host(.offset-lg-6){margin-left:50%}:host(.offset-lg-7){margin-left:58.333333%}:host(.offset-lg-8){margin-left:66.666667%}:host(.offset-lg-9){margin-left:75%}:host(.offset-lg-10){margin-left:83.333333%}:host(.offset-lg-11){margin-left:91.666667%}}@media (min-width: 1200px){:host(.col-xl){-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}:host(.col-xl-auto){-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}:host(.col-xl-1){-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}:host(.col-xl-2){-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}:host(.col-xl-3){-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.col-xl-4){-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}:host(.col-xl-5){-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}:host(.col-xl-6){-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.col-xl-7){-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}:host(.col-xl-8){-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}:host(.col-xl-9){-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.col-xl-10){-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}:host(.col-xl-11){-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}:host(.col-xl-12){-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}:host(.offset-xl-0){margin-left:0}:host(.offset-xl-1){margin-left:8.333333%}:host(.offset-xl-2){margin-left:16.666667%}:host(.offset-xl-3){margin-left:25%}:host(.offset-xl-4){margin-left:33.333333%}:host(.offset-xl-5){margin-left:41.666667%}:host(.offset-xl-6){margin-left:50%}:host(.offset-xl-7){margin-left:58.333333%}:host(.offset-xl-8){margin-left:66.666667%}:host(.offset-xl-9){margin-left:75%}:host(.offset-xl-10){margin-left:83.333333%}:host(.offset-xl-11){margin-left:91.666667%}}";
+
+const Col = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
+Col.style = colCss;
+
+const drawerDarkCss = ":host{--background:var(--white);--color:var(--text);--z-index:10;--header-icon:var(--icon);--header-color:var(--text);--header-background:var(--white);--back-chevron-color:var(--icon);position:fixed;top:0;left:0;z-index:var(--z-index);display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;-webkit-transition:opacity 0.15s linear, visibility 0.15s;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;-ms-touch-action:none;touch-action:none;cursor:pointer;background:rgba(0, 0, 0, 0.5)}.drawer-dialog{position:relative;width:100%;pointer-events:none;-webkit-transition:-webkit-transform 0.3s ease-out;transition:-webkit-transform 0.3s ease-out;transition:transform 0.3s ease-out;transition:transform 0.3s ease-out, -webkit-transform 0.3s ease-out;-webkit-transform:translateX(-100%);transform:translateX(-100%)}:host(.drawer-right){-ms-flex-pack:end;justify-content:flex-end}:host(.drawer-right) .drawer-dialog{-webkit-transform:translateX(100%);transform:translateX(100%)}:host(.drawer-bottom){-ms-flex-align:end;align-items:flex-end}:host(.drawer-bottom) .drawer-dialog{width:100%;-webkit-transform:translateY(100%);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto;min-height:6.25rem}.drawer-content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;-webkit-box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16)}.drawer-header{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;height:3.5rem;color:var(--header-color);background:var(--header-background)}.drawer-header road-icon{-ms-flex-negative:0;flex-shrink:0;color:var(--header-icon)}.drawer-header-delimiter{border-bottom:1px solid var(--border)}.drawer-header-inverse{--header-icon:var(--primary-contrast);--header-color:var(--primary-contrast);--header-background:var(--primary);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:3.5rem;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:1rem;font-weight:400}.drawer-body{height:calc(100vh - 3.5rem);overflow-y:auto}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}}:host(.drawer-open){visibility:visible !important;opacity:1}:host(.drawer-open) .drawer-dialog{-webkit-transform:none;transform:none}:host{--background:#000000;--color:var(--white);--header-icon:var(--white)}";
+
+const drawerLightCss = ":host{--background:var(--white);--color:var(--text);--z-index:10;--header-icon:var(--icon);--header-color:var(--text);--header-background:var(--white);--back-chevron-color:var(--icon);position:fixed;top:0;left:0;z-index:var(--z-index);display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;-webkit-transition:opacity 0.15s linear, visibility 0.15s;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;-ms-touch-action:none;touch-action:none;cursor:pointer;background:rgba(0, 0, 0, 0.5)}.drawer-dialog{position:relative;width:100%;pointer-events:none;-webkit-transition:-webkit-transform 0.3s ease-out;transition:-webkit-transform 0.3s ease-out;transition:transform 0.3s ease-out;transition:transform 0.3s ease-out, -webkit-transform 0.3s ease-out;-webkit-transform:translateX(-100%);transform:translateX(-100%)}:host(.drawer-right){-ms-flex-pack:end;justify-content:flex-end}:host(.drawer-right) .drawer-dialog{-webkit-transform:translateX(100%);transform:translateX(100%)}:host(.drawer-bottom){-ms-flex-align:end;align-items:flex-end}:host(.drawer-bottom) .drawer-dialog{width:100%;-webkit-transform:translateY(100%);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto;min-height:6.25rem}.drawer-content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;-webkit-box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16)}.drawer-header{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;height:3.5rem;color:var(--header-color);background:var(--header-background)}.drawer-header road-icon{-ms-flex-negative:0;flex-shrink:0;color:var(--header-icon)}.drawer-header-delimiter{border-bottom:1px solid var(--border)}.drawer-header-inverse{--header-icon:var(--primary-contrast);--header-color:var(--primary-contrast);--header-background:var(--primary);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:3.5rem;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:1rem;font-weight:400}.drawer-body{height:calc(100vh - 3.5rem);overflow-y:auto}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}}:host(.drawer-open){visibility:visible !important;opacity:1}:host(.drawer-open) .drawer-dialog{-webkit-transform:none;transform:none}";
+
+const Drawer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.onOpen = index.createEvent(this, "open", 7);
+    this.onClose = index.createEvent(this, "close", 7);
+    this.onBack = index.createEvent(this, "back", 7);
+    /**
+     * Set isOpen property to true to open the drawer
+     */
+    this.isOpen = false;
+    /**
+     * position of the drawer. e.g. left, right, bottom
+     */
+    this.position = 'left';
+    /**
+     * Width of the drawer
+     */
+    this.drawerWidth = 480;
+    /**
+     * Inverse header colors
+     */
+    this.hasInverseHeader = false;
+    /**
+     * Show / hide back icon
+     */
+    this.hasBackIcon = false;
+    /**
+     * Show / hide close icon
+     */
+    this.hasCloseIcon = true;
+    /**
+     * Close the dialog when clicking on the cross or layer
+     */
+    this.onClick = (ev) => {
+      ev.stopPropagation();
+      ev.preventDefault();
+      this.close();
+    };
+    /**
+     * Close the dialog when clicking on the cross or layer
+     */
+    this.onClickBack = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      this.back();
+    };
+  }
+  /**
+   * Open the drawer
+   */
+  async open() {
+    this.isOpen = true;
+  }
+  /**
+   * Close the drawer
+   */
+  async close() {
+    this.isOpen = false;
+  }
+  /**
+   * Return to previous state of the drawer content
+   */
+  async back() {
+    this.onBack.emit();
+  }
+  handleOpen(openValue) {
+    if (openValue === true) {
+      this.onOpen.emit();
+    }
+    else {
+      this.el.addEventListener('transitionend', () => {
+        this.onClose.emit();
+        this.el.shadowRoot && (this.el.shadowRoot.querySelector('.drawer-body').scrollTop = 0);
+      }, { once: true });
+    }
+  }
+  /**
+   * Close the dialog when press Escape key
+   */
+  onEscape(event) {
+    if (event.key === 'Escape' || event.key === "Esc") {
+      this.close();
+    }
+  }
+  /**
+   * Call close function when clicking an element with data-dismiss="modal" attribute
+   */
+  componentDidLoad() {
+    this.el.querySelectorAll('[data-dismiss="modal"]').forEach(item => {
+      item.addEventListener('click', () => this.close());
+    });
+  }
+  render() {
+    const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
+    const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
+    const drawerDelimiterClass = this.drawerTitle !== undefined && !this.hasInverseHeader ? 'drawer-delimiter' : '';
+    const backIconElement = this.hasBackIcon ? index.h("button", { type: "button", class: "drawer-action", "aria-label": "Back", onClick: this.onClickBack }, index.h("road-icon", { icon: index$1.navigationChevron, rotate: "180" }), this.backText) : '';
+    const closeIconElement = this.hasCloseIcon ? index.h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": "Close" }, index.h("road-icon", { icon: index$1.navigationClose, "aria-hidden": "true" })) : '';
+    const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';
+    return (index.h(index.Host, { class: `drawer ${drawerIsOpenClass} drawer-${this.position}`, tabindex: "-1", role: "dialog" }, index.h("div", { class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), index.h("div", { class: "drawer-dialog", style: { maxWidth: `${drawerWidthValue}` }, role: "document", tabindex: "0" }, index.h("div", { class: "drawer-content" }, index.h("header", { class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle !== undefined ? index.h("h2", { class: "drawer-title" }, this.drawerTitle) : index.h("div", { class: "drawer-title" }), closeIconElement), index.h("div", { class: "drawer-body" }, index.h("slot", null))))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "isOpen": ["handleOpen"]
+  }; }
+};
+Drawer.style = {
+  dark: drawerDarkCss,
+  light: drawerLightCss
+};
+
+const gridCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;padding-right:8px;padding-left:8px;margin-right:auto;margin-left:auto}";
+
+const Grid = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
+Grid.style = gridCss;
+
+const validateContent = (svgContent) => {
+  const div = document.createElement('div');
+  div.innerHTML = svgContent;
+  // setup this way to ensure it works on our buddy IE
+  for (let i = div.childNodes.length - 1; i >= 0; i--) {
+    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
+      div.removeChild(div.childNodes[i]);
+    }
+  }
+  // must only have 1 root element
+  const svgElm = div.firstElementChild;
+  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
+    const svgClass = svgElm.getAttribute('class') || '';
+    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());
+    // root element must be an svg
+    // lets double check we've got valid elements
+    // do not allow scripts
+    if (isValid(svgElm)) {
+      return div.innerHTML;
+    }
+  }
+  return '';
+};
+const isValid = (elm) => {
+  if (elm.nodeType === 1) {
+    if (elm.nodeName.toLowerCase() === 'script') {
+      return false;
+    }
+    for (let i = 0; i < elm.attributes.length; i++) {
+      const val = elm.attributes[i].value;
+      if (utils.isStr(val) && val.toLowerCase().indexOf('on') === 0) {
+        return false;
+      }
+    }
+    for (let i = 0; i < elm.childNodes.length; i++) {
+      if (!isValid(elm.childNodes[i])) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+
+const roadiconContent = new Map();
+const requests = new Map();
+const getSvgContent = (url, sanitize) => {
+  // see if we already have a request for this url
+  let req = requests.get(url);
+  if (!req) {
+    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
+      // we don't already have a request
+      // @ts-ignore
+      req = fetch(url).then((rsp) => {
+        if (rsp.ok) {
+          return rsp.text().then((svgContent) => {
+            if (svgContent && sanitize !== false) {
+              svgContent = validateContent(svgContent);
+            }
+            roadiconContent.set(url, svgContent || '');
+          });
+        }
+        roadiconContent.set(url, '');
+      });
+      // cache for the same requests
+      requests.set(url, req);
+    }
+    else {
+      // set to empty for ssr scenarios and resolve promise
+      roadiconContent.set(url, '');
+      return Promise.resolve();
+    }
+  }
+  return req;
+};
+
+const iconCss = ":host{-webkit-box-sizing:content-box;box-sizing:content-box;display:inline-block;color:var(--icon);-webkit-transition:fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;fill:currentColor;contain:strict}:host svg{display:block;width:100%;height:100%}:host(.icon-sm){width:1.25rem;height:1.25rem}:host(.icon-md){width:1.5rem;height:1.5rem}:host(.icon-lg){width:2rem;height:2rem}:host(.icon-3x){width:3rem;height:3rem}:host(.icon-4x){width:4rem;height:4rem}:host(.icon-primary){color:var(--primary)}:host(.icon-secondary){color:var(--secondary)}:host(.icon-accent){color:var(--accent)}:host(.icon-info){color:var(--info)}:host(.icon-success){color:var(--success)}:host(.icon-warning){color:var(--warning)}:host(.icon-danger){color:var(--danger)}:host(.icon-default){color:var(--icon)}:host(.icon-white){color:var(--white)}:host(.icon-rotate-90){-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host(.icon-rotate-180){-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.icon-rotate-270){-webkit-transform:rotate(270deg);transform:rotate(270deg)}";
+
+const Icon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.isVisible = false;
+    /**
+     * The size of the icon.
+     * Available options are: `"sm"`, `"md"`, `"lg"`, `"3x"` and `"4x"`.
+     */
+    this.size = "lg";
+    /**
+     * If enabled, road-icon will be loaded lazily when it's visible in the viewport.
+     * Default, `false`.
+     */
+    this.lazy = false;
+    /**
+     * When set to `false`, SVG content that is HTTP fetched will not be checked
+     * if the response SVG content has any `<script>` elements, or any attributes
+     * that start with `on`, such as `onclick`.
+     */
+    this.sanitize = true;
+  }
+  componentWillLoad() {
+    this.waitUntilVisible(this.el, '50px', () => {
+      this.isVisible = true;
+      this.loadIcon();
+    });
+  }
+  disconnectedCallback() {
+    if (this.io) {
+      this.io.disconnect();
+      this.io = undefined;
+    }
+  }
+  waitUntilVisible(el, rootMargin, cb) {
+    if (this.lazy && window.IntersectionObserver) {
+      const io = this.io = new window.IntersectionObserver((data) => {
+        if (data[0].isIntersecting) {
+          io.disconnect();
+          this.io = undefined;
+          cb();
+        }
+      }, { rootMargin });
+      io.observe(el);
+    }
+    else {
+      // browser doesn't support IntersectionObserver
+      // so just fallback to always show it
+      cb();
+    }
+  }
+  loadIcon() {
+    if (this.isVisible) {
+      const url = utils.getUrl(this);
+      if (url) {
+        if (roadiconContent.has(url)) {
+          // sync if it's already loaded
+          this.svgContent = roadiconContent.get(url);
+        }
+        else {
+          // async if it hasn't been loaded
+          getSvgContent(url, this.sanitize).then(() => (this.svgContent = roadiconContent.get(url)));
+        }
+      }
+    }
+    if (!this.ariaLabel && this.ariaHidden !== 'true') {
+      const label = utils.getName(this.name, this.icon);
+      // user did not provide a label
+      // come up with the label based on the icon name
+      if (label) {
+        this.ariaLabel = label.replace(/\-/g, ' ');
+      }
+    }
+  }
+  render() {
+    const colorClass = this.color !== undefined ? `icon-${this.color}` : '';
+    const sizeClass = this.size !== undefined ? `icon-${this.size}` : '';
+    const rotateClass = this.rotate !== undefined ? `icon-rotate-${this.rotate}` : '';
+    return (index.h(index.Host, { class: `${colorClass} ${sizeClass} ${rotateClass}`, "aria-hidden": "true" }, ((this.svgContent !== '')
+      ? index.h("div", { class: "icon-inner", innerHTML: this.svgContent })
+      : index.h("div", { class: "icon-inner" }))));
+  }
+  static get assetsDirs() { return ["svg"]; }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "name": ["loadIcon"],
+    "src": ["loadIcon"],
+    "icon": ["loadIcon"]
+  }; }
+};
+Icon.style = iconCss;
+
+const itemCss = ":host{--border-radius:0.25rem;--background-color:transparent;--min-height:3.5rem;--padding-left:1rem;--inner-padding:1rem 0.5rem 1rem 0;--detail-color:var(--icon);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden;text-decoration:none;outline:none}.item-native{position:relative;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);padding:0 0 0 var(--padding-left);margin:0;overflow:inherit;font-family:inherit;font-size:inherit;color:var(--text);background-color:var(--background-color);border-color:var(--border);border-style:solid;border-width:var(--border-width, 0);border-radius:var(--border-radius);outline:none;-webkit-transition:background 0.15s ease-in-out;transition:background 0.15s ease-in-out}.item-active{background-color:var(--background-second)}button.item-native:not(:disabled):not(.item-active):hover,button.item-native:not(:disabled):not(.item-active):focus{background-color:var(--background-second)}.item-native::-moz-focus-inner{border:0}button,a{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.item-inner{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;width:100%;min-height:inherit;padding:var(--inner-padding);overflow:inherit;text-align:inherit;text-decoration:none;border-color:var(--border);border-style:solid;border-width:var(--inner-border-width, 0);outline:0}.input-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;overflow:inherit;text-overflow:ellipsis}.item-detail-icon{color:var(--detail-color)}::slotted(road-icon){-ms-flex-negative:0;flex-shrink:0;margin-right:0.5rem}::slotted(road-img){-ms-flex-negative:0;flex-shrink:0;width:3rem;height:3rem;-o-object-fit:cover;object-fit:cover;min-height:inherit;margin-right:1rem}::slotted(road-button){--padding-start:0.5rem;--padding-end:0.5rem;--margin-bottom:0}:host(.item-lines-none){--border-width:0 !important;--inner-border-width:0 !important}:host(.item-lines-full){--border-width:0 0 1px 0 !important;--inner-border-width:0 !important}:host(.item-lines-inset){--inner-border-width:0 0 1px 0 !important}";
+
+const Item = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.multipleInputs = false;
+    /**
+     * If `true`, a button tag will be rendered and the item will be tappable.
+     */
+    this.button = false;
+    /**
+     * The icon to use when `detail` is set to `true`.
+     */
+    this.detailIcon = index$1.navigationChevron;
+    /**
+     * If `true`, the user cannot interact with the item.
+     */
+    this.disabled = false;
+    /**
+     * The type of the button. Only used when an `onclick` or `button` property is present.
+     */
+    this.type = 'button';
+  }
+  // If the item has an href or button property it will render a native
+  // anchor or button that is clickable
+  isClickable() {
+    return (this.href !== undefined || this.button);
+  }
+  render() {
+    const { detail, detailIcon, download, lines, disabled, href, rel, target } = this;
+    const clickable = this.isClickable();
+    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
+    const attrs = (TagType === 'button')
+      ? { type: this.type }
+      : {
+        download,
+        href,
+        rel,
+        target,
+      };
+    const showDetail = detail !== undefined && detail;
+    return (index.h(index.Host, { "aria-disabled": disabled ? 'true' : null, class: {
+        [`item-lines-${lines}`]: lines !== undefined,
+      } }, index.h(TagType, Object.assign({}, attrs, { class: {
+        'item-native': true,
+        'item-active': this.active,
+      }, part: "native", disabled: disabled }), index.h("slot", { name: "start" }), index.h("div", { class: "item-inner" }, index.h("div", { class: "input-wrapper" }, index.h("slot", null)), index.h("slot", { name: "end" }), showDetail && index.h("road-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
+  }
+  get el() { return index.getElement(this); }
+};
+Item.style = itemCss;
+
+const labelCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;overflow:hidden;font-size:0.875rem;color:currentColor;text-overflow:ellipsis;white-space:nowrap}";
+
+const Label = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
+Label.style = labelCss;
+
+const listCss = ":host{display:block;contain:content;list-style-type:none}:host(.list-lines-none) ::slotted(road-item){--border-width:0;--inner-border-width:0}:host(.list-lines-full){border:1px solid var(--border);border-bottom:0}:host(.list-lines-full),:host(.list-lines-full) ::slotted(road-item){--border-width:0 0 1px 0;--inner-border-width:0}:host(.item-lines-inset),:host(.list-lines-inset) ::slotted(road-item){--inner-border-width:0 0 1px 0}";
+
+const List = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    const { lines } = this;
+    return (index.h(index.Host, { class: {
+        [`list-lines-${lines}`]: lines !== undefined,
+      } }, index.h("slot", null)));
+  }
+};
+List.style = listCss;
+
+const rowCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:1440px;margin-right:-8px;margin-left:-8px}@media (min-width: 1440px){:host{margin-right:auto;margin-left:auto}}:host(.flex-wrap){-ms-flex-wrap:wrap;flex-wrap:wrap}:host(.flex-nowrap){-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host(.justify-content-start){-ms-flex-pack:start;justify-content:flex-start}:host(.justify-content-end){-ms-flex-pack:end;justify-content:flex-end}:host(.justify-content-center){-ms-flex-pack:center;justify-content:center}:host(.justify-content-between){-ms-flex-pack:justify;justify-content:space-between}:host(.justify-content-around){-ms-flex-pack:distribute;justify-content:space-around}:host(.align-items-start){-ms-flex-align:start;align-items:flex-start}:host(.align-items-end){-ms-flex-align:end;align-items:flex-end}:host(.align-items-center){-ms-flex-align:center;align-items:center}:host(.align-items-baseline){-ms-flex-align:baseline;align-items:baseline}:host(.align-items-stretch){-ms-flex-align:stretch;align-items:stretch}@media (min-width: 576px){:host(.flex-sm-wrap){-ms-flex-wrap:wrap;flex-wrap:wrap}:host(.flex-sm-nowrap){-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host(.justify-content-sm-start){-ms-flex-pack:start;justify-content:flex-start}:host(.justify-content-sm-end){-ms-flex-pack:end;justify-content:flex-end}:host(.justify-content-sm-center){-ms-flex-pack:center;justify-content:center}:host(.justify-content-sm-between){-ms-flex-pack:justify;justify-content:space-between}:host(.justify-content-sm-around){-ms-flex-pack:distribute;justify-content:space-around}:host(.align-items-sm-start){-ms-flex-align:start;align-items:flex-start}:host(.align-items-sm-end){-ms-flex-align:end;align-items:flex-end}:host(.align-items-sm-center){-ms-flex-align:center;align-items:center}:host(.align-items-sm-baseline){-ms-flex-align:baseline;align-items:baseline}:host(.align-items-sm-stretch){-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 768px){:host(.flex-md-wrap){-ms-flex-wrap:wrap;flex-wrap:wrap}:host(.flex-md-nowrap){-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host(.justify-content-md-start){-ms-flex-pack:start;justify-content:flex-start}:host(.justify-content-md-end){-ms-flex-pack:end;justify-content:flex-end}:host(.justify-content-md-center){-ms-flex-pack:center;justify-content:center}:host(.justify-content-md-between){-ms-flex-pack:justify;justify-content:space-between}:host(.justify-content-md-around){-ms-flex-pack:distribute;justify-content:space-around}:host(.align-items-md-start){-ms-flex-align:start;align-items:flex-start}:host(.align-items-md-end){-ms-flex-align:end;align-items:flex-end}:host(.align-items-md-center){-ms-flex-align:center;align-items:center}:host(.align-items-md-baseline){-ms-flex-align:baseline;align-items:baseline}:host(.align-items-md-stretch){-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 992px){:host(.flex-lg-wrap){-ms-flex-wrap:wrap;flex-wrap:wrap}:host(.flex-lg-nowrap){-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host(.justify-content-lg-start){-ms-flex-pack:start;justify-content:flex-start}:host(.justify-content-lg-end){-ms-flex-pack:end;justify-content:flex-end}:host(.justify-content-lg-center){-ms-flex-pack:center;justify-content:center}:host(.justify-content-lg-between){-ms-flex-pack:justify;justify-content:space-between}:host(.justify-content-lg-around){-ms-flex-pack:distribute;justify-content:space-around}:host(.align-items-lg-start){-ms-flex-align:start;align-items:flex-start}:host(.align-items-lg-end){-ms-flex-align:end;align-items:flex-end}:host(.align-items-lg-center){-ms-flex-align:center;align-items:center}:host(.align-items-lg-baseline){-ms-flex-align:baseline;align-items:baseline}:host(.align-items-lg-stretch){-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 1200px){:host(.flex-xl-wrap){-ms-flex-wrap:wrap;flex-wrap:wrap}:host(.flex-xl-nowrap){-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host(.justify-content-xl-start){-ms-flex-pack:start;justify-content:flex-start}:host(.justify-content-xl-end){-ms-flex-pack:end;justify-content:flex-end}:host(.justify-content-xl-center){-ms-flex-pack:center;justify-content:center}:host(.justify-content-xl-between){-ms-flex-pack:justify;justify-content:space-between}:host(.justify-content-xl-around){-ms-flex-pack:distribute;justify-content:space-around}:host(.align-items-xl-start){-ms-flex-align:start;align-items:flex-start}:host(.align-items-xl-end){-ms-flex-align:end;align-items:flex-end}:host(.align-items-xl-center){-ms-flex-align:center;align-items:center}:host(.align-items-xl-baseline){-ms-flex-align:baseline;align-items:baseline}:host(.align-items-xl-stretch){-ms-flex-align:stretch;align-items:stretch}}:host(.align-content-start){-ms-flex-line-pack:start;align-content:flex-start}:host(.align-content-end){-ms-flex-line-pack:end;align-content:flex-end}:host(.align-content-center){-ms-flex-line-pack:center;align-content:center}:host(.align-content-between){-ms-flex-line-pack:justify;align-content:space-between}:host(.align-content-around){-ms-flex-line-pack:distribute;align-content:space-around}:host(.align-content-stretch){-ms-flex-line-pack:stretch;align-content:stretch}:host(.align-self-auto){-ms-flex-item-align:auto;align-self:auto}:host(.align-self-start){-ms-flex-item-align:start;align-self:flex-start}:host(.align-self-end){-ms-flex-item-align:end;align-self:flex-end}:host(.align-self-center){-ms-flex-item-align:center;align-self:center}:host(.align-self-baseline){-ms-flex-item-align:baseline;align-self:baseline}:host(.align-self-stretch){-ms-flex-item-align:stretch;align-self:stretch}";
+
+const Row = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
+Row.style = rowCss;
+
+const toolbarCss = ":host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;contain:content;color:var(--text);background:var(--white);border-bottom:1px solid var(--border)}.toolbar-container{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:3.5rem;contain:content;overflow:hidden}.toolbar-content{-ms-flex:1 1 0%;flex:1 1 0%;min-width:0;max-width:100%}::slotted(road-button){--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;--border-radius:1.5rem;font-size:0.875rem;font-weight:400}:host(.toolbar-primary){color:var(--primary-contrast);background:var(--primary)}:host(.toolbar-secondary){color:var(--primary-contrast);background:var(--secondary)}";
+
+const Toolbar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    const colorClass = this.color !== undefined ? `toolbar-${this.color}` : '';
+    return (index.h(index.Host, { class: colorClass }, index.h("div", { class: "toolbar-container" }, index.h("slot", { name: "start" }), index.h("slot", { name: "primary" }), index.h("div", { class: "toolbar-content" }, index.h("slot", null)), index.h("slot", { name: "secondary" }), index.h("slot", { name: "end" }))));
+  }
+};
+Toolbar.style = toolbarCss;
+
+exports.road_badge = Badge;
+exports.road_button = Button;
+exports.road_col = Col;
+exports.road_drawer = Drawer;
+exports.road_grid = Grid;
+exports.road_icon = Icon;
+exports.road_item = Item;
+exports.road_label = Label;
+exports.road_list = List;
+exports.road_row = Row;
+exports.road_toolbar = Toolbar;

package/dist/cjs/road-card.cjs.entry.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8402028a.js');
+
+const cardCss = ":host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem)}.card-native{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;height:100%;padding:1.5rem;margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--white);border:0;border-radius:0.25rem;outline:none}a,button{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
+
+const Card = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.roadCardClick = index.createEvent(this, "roadCardClick", 7);
+    /**
+     * If `true`, a button tag will be rendered and the card will be tappable.
+     */
+    this.button = false;
+    /**
+     * The type of the button. Only used when an `onclick` or `button` property is present.
+     */
+    this.type = 'button';
+    this.onClick = () => {
+      var _a;
+      if (this.value !== undefined) {
+        this.roadCardClick.emit({
+          value: this.value,
+          label: (_a = this.el.querySelector('road-label')) === null || _a === void 0 ? void 0 : _a.textContent,
+        });
+      }
+    };
+  }
+  isClickable() {
+    return (this.href !== undefined || this.button);
+  }
+  renderCard() {
+    const clickable = this.isClickable();
+    if (!clickable) {
+      return [
+        index.h("slot", null)
+      ];
+    }
+    const { href } = this;
+    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
+    const attrs = (TagType === 'button')
+      ? { type: this.type }
+      : {
+        download: this.download,
+        href: this.href,
+        rel: this.rel,
+        target: this.target,
+      };
+    return (index.h(TagType, Object.assign({}, attrs, { class: "card-native", part: "native", onClick: this.onClick }), index.h("slot", null)));
+  }
+  render() {
+    return (index.h(index.Host, null, this.renderCard()));
+  }
+  get el() { return index.getElement(this); }
+};
+Card.style = cardCss;
+
+exports.road_card = Card;

package/dist/cjs/road-carousel-item.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8402028a.js');
+
+const carouselItemCss = "road-carousel-item{display:block;width:100%;height:100%}.slide-zoom{display:block;width:100%;text-align:center}.swiper-slide{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;font-size:18px;text-align:center}.swiper-slide road-img{pointer-events:none}.swiper-slide img{width:auto;max-width:100%;height:auto;max-height:100%;pointer-events:none}";
+
+const CarouselItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        'swiper-slide': true,
+        'swiper-zoom-container': true,
+      } }, index.h("slot", null)));
+  }
+};
+CarouselItem.style = carouselItemCss;
+
+exports.road_carousel_item = CarouselItem;