@roadtrip/components 2.21.0

package/dist/esm/road-radio-group.entry.js

@@ -0,0 +1,74 @@
+import { r as registerInstance, c as createEvent, h, H as Host, e as getElement } from './index-42b74371.js';
+
+const radioGroupCss = ".sc-road-radio-group-h{--asterisk-color:var(--text);position:relative;display:block;margin-bottom:1rem}.is-invalid.sc-road-radio-group-h .invalid-feedback.sc-road-radio-group{display:block}.asterisk.sc-road-radio-group{color:var(--asterisk-color)}.invalid-feedback.sc-road-radio-group{display:none;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;margin:0.5rem 0 0;font-size:0.75rem;color:var(--danger-text)}";
+
+const RadioGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.roadChange = createEvent(this, "roadChange", 7);
+    /**
+     * The id of checkbox
+     */
+    this.radioGroupId = `road-radio-group-${radioGroupIds++}`;
+    /**
+     * If `true`, the radios can be deselected.
+     */
+    this.allowEmptySelection = false;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = this.radioGroupId;
+    /**
+     * add an asterisk to the label of the field
+     */
+    this.asterisk = false;
+    /**
+     * Label for the field
+     */
+    this.ariaLabel = `${this.radioGroupId}-label`;
+    this.onClick = (ev) => {
+      const selectedRadio = ev.target && ev.target.closest('road-radio');
+      if (selectedRadio) {
+        const currentValue = this.value;
+        const newValue = selectedRadio.value;
+        if (newValue !== currentValue) {
+          this.value = newValue;
+        }
+        else if (this.allowEmptySelection) {
+          this.value = undefined;
+        }
+        this.error = undefined;
+      }
+    };
+  }
+  valueChanged(value) {
+    this.roadChange.emit({ value });
+  }
+  errorChanged() {
+    if (this.error !== undefined && this.error !== '') {
+      this.el.querySelectorAll('road-radio').forEach(item => item.error = true);
+    }
+    else {
+      this.el.querySelectorAll('road-radio').forEach(item => item.error = false);
+    }
+  }
+  componentWillLoad() {
+    if (this.error !== undefined && this.error !== '') {
+      this.el.querySelectorAll('road-radio').forEach(item => item.error = true);
+    }
+  }
+  render() {
+    const labelId = `${this.radioGroupId}-label`;
+    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
+    return (h(Host, { role: "radiogroup", class: `form-group ${isInvalidClass}`, "aria-label": this.ariaLabel, onClick: this.onClick }, this.label && h("p", { class: "text-content", id: labelId }, this.label, " ", this.asterisk && h("span", { class: "asterisk" }, "*")), h("slot", null), this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"],
+    "error": ["errorChanged"]
+  }; }
+};
+let radioGroupIds = 0;
+RadioGroup.style = radioGroupCss;
+
+export { RadioGroup as road_radio_group };

package/dist/esm/road-radio.entry.js

@@ -0,0 +1,86 @@
+import { r as registerInstance, c as createEvent, h, H as Host, e as getElement } from './index-42b74371.js';
+import './polyfill-2b159e86.js';
+
+const radioCss = ".sc-road-radio-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--font, sans-serif);font-size:0.875rem;line-height:1.5;color:var(--text)}.form-radio-inline.sc-road-radio-h{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;margin-right:1.5rem;margin-bottom:0}.form-radio-input.sc-road-radio{position:absolute;z-index:-1;opacity:0}.form-radio-label.sc-road-radio{position:relative;display:-ms-inline-flexbox;display:inline-flex;margin:0;cursor:pointer}.form-radio-label.sc-road-radio::before{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;-ms-flex-negative:0;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0 1rem 0 0;content:\"\";background:var(--white);border:1px solid var(--border-form);border-radius:50%;-webkit-transition:border-color 0.2s ease-in-out;transition:border-color 0.2s ease-in-out}.form-radio-label.sc-road-radio::after{position:absolute;top:0.1875rem;left:0.1875rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:0.875rem;height:0.875rem;content:\"\";background:var(--border-form);border:none;border-radius:50%;-webkit-transition:background 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;transition:background 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;transition:background 0.2s ease-in-out, transform 0.2s ease-in-out;transition:background 0.2s ease-in-out, transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}@media (hover: hover){.form-radio-input.sc-road-radio:not(:checked):not(:disabled)~.form-radio-label.sc-road-radio:hover::after{opacity:1;-webkit-transform:scale(0.42);transform:scale(0.42)}.form-radio-input.sc-road-radio:not(:checked)~.form-radio-label.sc-road-radio:hover::before{border-color:var(--secondary)}}.form-radio-input.sc-road-radio:checked~.form-radio-label.sc-road-radio::after{background:var(--secondary);opacity:1;-webkit-transform:scale(1);transform:scale(1)}.form-radio-input.focus-visible.sc-road-radio~.form-radio-label.sc-road-radio::before{-webkit-box-shadow:0 0 0 0.125rem var(--white), 0 0 0 0.1875rem var(--secondary);box-shadow:0 0 0 0.125rem var(--white), 0 0 0 0.1875rem var(--secondary)}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio{color:var(--text-disabled);cursor:not-allowed}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio::before,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio::before{background:var(--background-second);border:none}.form-radio-input.is-invalid.sc-road-radio~.form-radio-label.sc-road-radio::before{border-color:var(--danger)}.form-radio-inverse.sc-road-radio{display:-ms-flexbox;display:flex;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:justify;justify-content:space-between}.form-radio-inverse.sc-road-radio::before{margin:0 0 0 1rem}.form-radio-inverse.sc-road-radio::after{right:0.1875rem;left:auto}";
+
+const Radio = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.roadFocus = createEvent(this, "roadFocus", 7);
+    this.roadBlur = createEvent(this, "roadBlur", 7);
+    this.radioGroup = null;
+    /**
+     * The id of radio
+     */
+    this.radioId = `road-radio-${radioIds++}`;
+    /**
+     * If `true`, the radio is selected.
+     */
+    this.checked = false;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = this.radioId;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    this.required = false;
+    /**
+     * If `true`, the user cannot interact with the radio.
+     */
+    this.disabled = false;
+    /**
+     * Label for the field
+     */
+    this.label = `${this.radioId}-label`;
+    /**
+     * If `true`, the label and the radio are inverse and spaced
+     */
+    this.inverse = false;
+    /**
+     * Inline multiple radio
+     */
+    this.inline = true;
+    this.updateState = () => {
+      if (this.radioGroup) {
+        this.checked = this.radioGroup.value === this.value;
+      }
+    };
+    this.onFocus = () => {
+      this.roadFocus.emit();
+    };
+    this.onBlur = () => {
+      this.roadBlur.emit();
+    };
+  }
+  connectedCallback() {
+    if (this.value === undefined) {
+      this.value = this.radioId;
+    }
+    const radioGroup = this.radioGroup = this.el.closest('road-radio-group');
+    if (radioGroup) {
+      this.updateState();
+    }
+  }
+  disconnectedCallback() {
+    const radioGroup = this.radioGroup;
+    if (radioGroup) {
+      this.radioGroup = null;
+    }
+  }
+  onRoadChangedChanged() {
+    this.updateState();
+  }
+  render() {
+    const labelId = this.radioId + '-label';
+    const inverseClass = this.inverse && 'form-radio-inverse';
+    const isInvalidClass = this.error ? 'is-invalid' : '';
+    const inlineClass = this.inline ? 'form-radio-inline' : '';
+    return (h(Host, { class: `form-radio ${inlineClass}` }, h("input", { class: `form-radio-input ${isInvalidClass}`, type: "radio", id: this.radioId, name: this.name, required: this.required, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, checked: this.checked, "aria-checked": `${this.checked}`, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label)));
+  }
+  get el() { return getElement(this); }
+};
+let radioIds = 0;
+Radio.style = radioCss;
+
+export { Radio as road_radio };

package/dist/esm/road-range.entry.js

@@ -0,0 +1,54 @@
+import { r as registerInstance, c as createEvent, h, H as Host, e as getElement } from './index-42b74371.js';
+
+const rangeCss = ".sc-road-range-h{display:block}.form-range.sc-road-range{position:relative;display:block;width:100%;margin-bottom:6px}.form-range-input.sc-road-range{position:relative;z-index:1;width:100%;height:0.5rem;background:transparent;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-range.sc-road-range>output.sc-road-range::after{display:block;font-size:0.875rem;text-align:right;content:counter(variable);counter-reset:variable var(--value)}.form-range-progress.sc-road-range{position:relative;z-index:0;display:block;width:100%;margin-top:-0.875rem}.form-range-input.sc-road-range::-webkit-slider-runnable-track{height:0.5rem;border:0;-webkit-appearance:none;appearance:none}.form-range-input.sc-road-range::-moz-range-track{height:0.5rem;border:0;-moz-appearance:none;appearance:none}.form-range-progress.sc-road-range::before{display:block;height:0.5rem;content:\"\";background-color:var(--background);border:0;border-radius:1.125rem}.form-range-progress.sc-road-range::after{position:absolute;top:0;right:0;left:0;display:block;width:calc((var(--value) * 100%) / var(--max));height:0.5rem;content:\"\";background:var(--secondary);border-radius:1.125rem}.form-range-input.sc-road-range::-webkit-slider-thumb{position:relative;z-index:1;width:1.625rem;height:1.625rem;margin-top:-0.625rem;cursor:-webkit-grab;cursor:grab;background:var(--white);border:none;border-radius:1.625rem;-webkit-box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);-webkit-appearance:none;appearance:none}.form-range-input.sc-road-range::-moz-range-thumb{position:relative;z-index:1;box-sizing:border-box;width:1.625rem;height:1.625rem;margin-top:-0.625rem;cursor:grab;background:var(--white);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);-moz-appearance:none;appearance:none}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-webkit-slider-thumb{background:var(--secondary);border:0.5rem solid var(--white)}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-moz-range-thumb{background:var(--secondary);border:0.5rem solid var(--white)}";
+
+const Range = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.roadChange = createEvent(this, "roadChange", 7);
+    /**
+     * The id of range
+     */
+    this.rangeId = `road-range-${rangeIds++}`;
+    /**
+     * The value of the range.
+     */
+    this.value = '';
+    /**
+     * Display the current value of the range
+     */
+    this.showValue = false;
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input) {
+        this.value = input.value || '';
+      }
+      if (this.value !== null && this.value !== undefined) {
+        this.el.style.setProperty('--value', `${this.value}`);
+      }
+    };
+  }
+  /**
+   * Update the native input element when the value changes
+   */
+  valueChanged() {
+    this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });
+  }
+  getValue() {
+    return typeof this.value === 'number'
+      ? this.value.toString()
+      : (this.value || '').toString();
+  }
+  render() {
+    const value = this.getValue();
+    return (h(Host, null, h("div", { class: "form-range", style: { '--min:': this.min, '--max': this.max, '--value': value } }, this.showValue && h("output", null), h("input", { type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput }), h("div", { class: "form-range-progress" }))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+};
+let rangeIds = 0;
+Range.style = rangeCss;
+
+export { Range as road_range };

package/dist/esm/road-rating.entry.js

@@ -0,0 +1,30 @@
+import { r as registerInstance, h, H as Host } from './index-42b74371.js';
+import { s as star, f as starHalfColor } from './index-1ea26b25.js';
+
+const ratingCss = ":host{display:-ms-flexbox;display:flex}.rating-stars{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0}.rating-star{color:var(--background)}.rating-number{margin-left:0.5rem;font-size:0.875rem;color:var(--text-second)}";
+
+const Rating = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Rate review between 0 and 5
+     */
+    this.rate = 0;
+    /**
+     * number of reviews
+     */
+    this.reviews = 0;
+    /**
+     * Word display next to the number of reviews.
+     */
+    this.reviewsText = 'reviews';
+  }
+  render() {
+    const rate = Math.floor(this.rate);
+    const rateDecimale = this.rate - Math.floor(this.rate) > 0 ? 1 : 0;
+    return (h(Host, null, h("div", { class: "rating-stars" }, [...Array(rate)].map(() => h("road-icon", { icon: star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => h("road-icon", { icon: starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => h("road-icon", { icon: star, size: "sm", class: "rating-star" }))), h("span", { class: "rating-number" }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
+  }
+};
+Rating.style = ratingCss;
+
+export { Rating as road_rating };

package/dist/esm/road-select.entry.js

@@ -0,0 +1,75 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-42b74371.js';
+
+const selectCss = ".sc-road-select-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--font, sans-serif);color:var(--text)}.form-select.sc-road-select{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 3rem 0 1rem;margin:0;font-size:1rem;line-height:1.5;color:var(--text);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 0.5rem center/2rem 2rem;background-color:var(--white);border:1px solid var(--border-form);border-radius:0.25rem;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-select.sc-road-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select.sc-road-select::-ms-expand{display:none}.form-select.sc-road-select:-ms-input-placeholder{color:var(--text-second)}.form-select.sc-road-select::-webkit-input-placeholder{color:var(--text-second)}.form-select.sc-road-select::-moz-placeholder{color:var(--text-second)}.form-select.sc-road-select::-ms-input-placeholder{color:var(--text-second)}.form-select.sc-road-select::placeholder{color:var(--text-second)}.form-select.sc-road-select:focus~.form-select-label.sc-road-select,.form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.form-select.has-value.sc-road-select~.form-select-label.sc-road-select{-webkit-transform:scale(0.625) translateY(-0.625rem);transform:scale(0.625) translateY(-0.625rem)}.form-select.sc-road-select:focus{border-color:var(--secondary);outline:0}.form-select.sc-road-select:disabled,.form-select[readonly].sc-road-select{color:var(--text-disabled);cursor:not-allowed;background-color:var(--background-second);opacity:1}.form-select-label.sc-road-select{position:absolute;top:0.75rem;left:1rem;display:block;font-size:1rem;line-height:1.5;color:var(--text-second);pointer-events:none;-webkit-transition:-webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:-webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, -webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;-webkit-transform-origin:0 0;transform-origin:0 0}.invalid-feedback.sc-road-select{display:none;width:100%;margin-top:0.5rem;font-size:0.75rem;color:var(--danger-text)}.form-select.is-invalid.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid{border-color:var(--danger)}.form-select.is-invalid.sc-road-select~.invalid-feedback.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid~.invalid-feedback.sc-road-select{display:block}";
+
+const Select = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.roadChange = createEvent(this, "roadChange", 7);
+    this.roadFocus = createEvent(this, "roadFocus", 7);
+    this.roadBlur = createEvent(this, "roadBlur", 7);
+    /**
+     * The id of select
+     */
+    this.selectId = `road-select-${selectIds++}`;
+    /**
+     * List of options of the select
+     */
+    this.options = [];
+    /**
+     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+     */
+    this.autofocus = false;
+    /**
+     * If `true`, the user cannot interact with the select.
+     */
+    this.disabled = false;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = this.selectId;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    this.required = false;
+    /**
+     * If the control is presented as a scrolling list box (e.g. when multiple is specified),
+     * this attribute represents the number of rows in the list that should be visible at one time.
+     */
+    this.size = 0;
+    /**
+     * Label for the field
+     */
+    this.label = `${this.selectId}-label`;
+    this.onChange = (ev) => {
+      const select = ev.target;
+      if (select) {
+        this.value = select.value || '';
+      }
+    };
+    this.onBlur = () => {
+      this.roadBlur.emit();
+    };
+    this.onFocus = () => {
+      this.roadFocus.emit();
+    };
+  }
+  valueChanged() {
+    this.roadChange.emit({
+      value: this.value,
+    });
+  }
+  render() {
+    const labelId = this.selectId + '-label';
+    const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
+    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
+    return (h(Host, null, h("select", { class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, h("option", { selected: true, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (h("option", { value: option.value, selected: option.selected }, option.label)))), h("label", { class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error)));
+  }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+};
+let selectIds = 0;
+Select.style = selectCss;
+
+export { Select as road_select };

package/dist/esm/road-skeleton.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-42b74371.js';
+
+const skeletonCss = ":host{position:relative;display:block;width:100%;min-height:1rem;background:-webkit-gradient(linear, left top, right top, color-stop(8%, var(--background-second)), color-stop(18%, var(--background)), color-stop(33%, var(--background-second)));background:linear-gradient(to right, var(--background-second) 8%, var(--background) 18%, var(--background-second) 33%);background-size:800px 104px;-webkit-animation:roadSkeletonAnimation 1s linear infinite;animation:roadSkeletonAnimation 1s linear infinite}@-webkit-keyframes roadSkeletonAnimation{0%{background-position:-468px 0}100%{background-position:468px 0}}@keyframes roadSkeletonAnimation{0%{background-position:-468px 0}100%{background-position:468px 0}}";
+
+const Skeleton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("span", null, "\u00A0")));
+  }
+};
+Skeleton.style = skeletonCss;
+
+export { Skeleton as road_skeleton };

package/dist/esm/road-spinner.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-42b74371.js';
+
+const spinnerCss = ":host{display:block}.spinner{width:3rem;height:3rem;-webkit-transform-origin:center;transform-origin:center;-webkit-animation:roadRotate 2s linear infinite;animation:roadRotate 2s linear infinite}.spinner-circle{-webkit-animation:roadDash 1.5s ease-in-out infinite;animation:roadDash 1.5s ease-in-out infinite;fill:none;stroke:var(--secondary);stroke-width:3;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}@-webkit-keyframes roadRotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes roadRotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes roadDash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:90, 200;stroke-dashoffset:-35px}100%{stroke-dashoffset:-125px}}@keyframes roadDash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:90, 200;stroke-dashoffset:-35px}100%{stroke-dashoffset:-125px}}";
+
+const Spinner = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("svg", { class: "spinner", viewBox: "25 25 50 50" }, h("circle", { class: "spinner-circle", cx: "50", cy: "50", r: "20" }))));
+  }
+};
+Spinner.style = spinnerCss;
+
+export { Spinner as road_spinner };

package/dist/esm/road-switch.entry.js

@@ -0,0 +1,87 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-42b74371.js';
+import './polyfill-2b159e86.js';
+
+const switchCss = ".sc-road-switch-h{--switch-lever-width:4.5rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--font, sans-serif);font-size:0.875rem;color:var(--text)}.form-switch-input.sc-road-switch{position:absolute;z-index:-1;opacity:0}.form-switch-label.sc-road-switch{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer}.form-switch-lever.sc-road-switch{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:end;justify-content:flex-end;width:var(--switch-lever-width);height:2rem;padding:0.5rem 0.625rem;margin-right:0.5rem;font-size:0.625rem;font-weight:700;line-height:1.6;content:\"\";background:var(--border);border:0.125rem solid transparent;border-radius:1.125rem;-webkit-transition:background 0.2s ease-in-out;transition:background 0.2s ease-in-out}.form-switch-lever.sc-road-switch::before{font-size:0.625rem;font-weight:700;color:var(--white);text-transform:uppercase;content:attr(data-off)}.form-switch-lever.sc-road-switch::after{position:absolute;top:0.0625rem;left:0.0625rem;display:block;width:1.625rem;height:1.625rem;content:\"\";background:var(--white);border-radius:50%;-webkit-box-shadow:0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);box-shadow:0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out}.form-switch-input.sc-road-switch:checked~.form-switch-label.sc-road-switch .form-switch-lever.sc-road-switch{-ms-flex-pack:start;justify-content:flex-start}.form-switch-input.sc-road-switch:checked~.form-switch-label.sc-road-switch .form-switch-lever.sc-road-switch::before{content:attr(data-on)}.form-switch-input.sc-road-switch:checked~.form-switch-label.sc-road-switch .form-switch-lever.sc-road-switch::after{-webkit-transform:translateX(calc(var(--switch-lever-width) - 2rem));transform:translateX(calc(var(--switch-lever-width) - 2rem))}.form-switch-input.focus-visible.sc-road-switch~.form-switch-label.sc-road-switch .form-switch-lever.sc-road-switch{-webkit-box-shadow:0 0 0 0.125rem var(--white), 0 0 0 0.1875rem var(--secondary);box-shadow:0 0 0 0.125rem var(--white), 0 0 0 0.1875rem var(--secondary)}.form-switch-input.sc-road-switch:checked~.form-switch-secondary.sc-road-switch .form-switch-lever.sc-road-switch{background:var(--secondary)}.form-switch-input.sc-road-switch:checked~.form-switch-secondary.sc-road-switch .form-switch-lever.sc-road-switch::before{color:var(--secondary-contrast)}.form-switch-input.sc-road-switch:checked~.form-switch-info.sc-road-switch .form-switch-lever.sc-road-switch{background:var(--info)}.form-switch-input.sc-road-switch:checked~.form-switch-info.sc-road-switch .form-switch-lever.sc-road-switch::before{color:var(--info-contrast)}.form-switch-input.sc-road-switch:checked~.form-switch-success.sc-road-switch .form-switch-lever.sc-road-switch{background:var(--success)}.form-switch-input.sc-road-switch:checked~.form-switch-success.sc-road-switch .form-switch-lever.sc-road-switch::before{color:var(--success-contrast)}.form-switch-input.sc-road-switch:checked~.form-switch-warning.sc-road-switch .form-switch-lever.sc-road-switch{background:var(--warning)}.form-switch-input.sc-road-switch:checked~.form-switch-warning.sc-road-switch .form-switch-lever.sc-road-switch::before{color:var(--warning-contrast)}.form-switch-input.sc-road-switch:checked~.form-switch-danger.sc-road-switch .form-switch-lever.sc-road-switch{background:var(--danger)}.form-switch-input.sc-road-switch:checked~.form-switch-danger.sc-road-switch .form-switch-lever.sc-road-switch::before{color:var(--danger-contrast)}.form-switch-right.sc-road-switch{margin-right:0;margin-left:0.5rem}.form-switch-spaced.sc-road-switch{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}";
+
+const Switch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.roadChange = createEvent(this, "roadChange", 7);
+    this.roadFocus = createEvent(this, "roadFocus", 7);
+    this.roadBlur = createEvent(this, "roadBlur", 7);
+    /**
+     * The id of input
+     */
+    this.switchId = `road-switch-${switchIds++}`;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = this.switchId;
+    /**
+     * If `true`, the toggle is selected.
+     */
+    this.checked = false;
+    /**
+     * If `true`, the user cannot interact with the toggle.
+     */
+    this.disabled = false;
+    /**
+     * Label for the field
+     */
+    this.label = `${this.switchId}-label`;
+    /**
+     * Set the color of alert. e.g. info, success, warning, danger
+     */
+    this.color = 'secondary';
+    /**
+     * If `true`, the label is at left of the switch
+     */
+    this.hasLeftLabel = false;
+    /**
+     * Add space between label and switch element
+     */
+    this.isSpaced = false;
+    /**
+     * Value the form will get
+     */
+    this.value = 'on';
+    /**
+     * Text display for "`on`" state in the switch lever
+     */
+    this.on = "yes";
+    /**
+     * Text display for "`off`" state in the switch lever
+     */
+    this.off = "no";
+    this.onClick = () => {
+      this.checked = !this.checked;
+    };
+    this.onFocus = () => {
+      this.roadFocus.emit();
+    };
+    this.onBlur = () => {
+      this.roadBlur.emit();
+    };
+  }
+  checkedChanged(isChecked) {
+    this.roadChange.emit({
+      checked: isChecked,
+      value: this.value,
+    });
+  }
+  render() {
+    const labelId = this.switchId + '-label';
+    const textLabel = h("label", { class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+    const colorClass = this.color !== undefined ? 'form-switch-' + this.color : '';
+    const isSpacedClass = this.isSpaced && 'form-switch-spaced';
+    const rightSwitchClass = this.hasLeftLabel ? 'form-switch-right' : '';
+    return (h(Host, null, h("input", { class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+  }
+  static get watchers() { return {
+    "checked": ["checkedChanged"]
+  }; }
+};
+let switchIds = 0;
+Switch.style = switchCss;
+
+export { Switch as road_switch };

package/dist/esm/road-tab-bar.entry.js

@@ -0,0 +1,43 @@
+import { r as registerInstance, c as createEvent, h, H as Host, e as getElement } from './index-42b74371.js';
+import './polyfill-2b159e86.js';
+
+const tabBarCss = ":host{--tab-bar-background:var(--white);--tab-color:var(--text-second);--tab-color-selected:var(--text);--tab-underline-selected:var(--secondary);--tab-background:var(--white);--tab-background-hover:var(--background-second);--tab-background-focused:var(--background);display:-ms-flexbox;display:flex;width:100%;padding:0 0.5rem;margin:0;overflow:scroll;overflow-x:inherit;font-family:var(--font, sans-serif);line-height:1.5;color:var(--text);text-transform:uppercase;list-style:none;background:var(--tab-bar-background);border-bottom:1px solid var(--border);fill:currentColor;scrollbar-width:none}:host(::-webkit-scrollbar){display:none}:host(.tab-expand) ::slotted(road-tab-button){-ms-flex-positive:1;flex-grow:1}:host(.tab-center){-ms-flex-pack:center;justify-content:center}";
+
+const TabBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.roadTabBarChanged = createEvent(this, "roadTabBarChanged", 7);
+    /**
+     * Set to `true` to expand buttons width to take the full size of the bar.
+     */
+    this.expand = false;
+    /**
+     * Set to `true` to center buttons in the bar.
+     */
+    this.center = false;
+  }
+  selectedTabChanged() {
+    if (this.selectedTab !== undefined) {
+      this.roadTabBarChanged.emit({
+        tab: this.selectedTab,
+      });
+    }
+  }
+  componentWillLoad() {
+    this.selectedTabChanged();
+  }
+  render() {
+    const { expand, center } = this;
+    return (h(Host, { role: "tablist", class: {
+        'tab-expand': expand,
+        'tab-center': center,
+      } }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "selectedTab": ["selectedTabChanged"]
+  }; }
+};
+TabBar.style = tabBarCss;
+
+export { TabBar as road_tab_bar };

package/dist/esm/road-tab-button.entry.js

@@ -0,0 +1,78 @@
+import { r as registerInstance, c as createEvent, h, H as Host, e as getElement } from './index-42b74371.js';
+
+const tabButtonCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;-webkit-transition:background 0.15s ease-in-out;transition:background 0.15s ease-in-out}:host(.tab-selected){color:var(--tab-color-selected)}:host(.tab-selected) ::slotted(road-icon){color:var(--tab-color-selected)}:host(.tab-selected) .button-native::after{background:var(--tab-underline-selected);opacity:1;-webkit-transform:none;transform:none}:host(:hover){background:var(--tab-background-hover)}:host(.focus-visible){background:var(--tab-background-focused)}.button-native{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;min-height:3.5rem;padding-top:0.75rem;padding-right:var(--padding-end, 1.5rem);padding-bottom:0.75rem;padding-left: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;-o-border-image:initial;border-image:initial;outline:none}.button-native::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";opacity:0;-webkit-transition:-webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:center;transform-origin:center}.button-inner{position:relative;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}:host ::slotted(road-icon){color:var(--tab-color)}:host(.tab-layout-icon-start) ::slotted(road-icon){margin-right:0.5rem}:host(.tab-layout-icon-top) .button-inner{-ms-flex-direction:column;flex-direction:column}:host(.tab-layout-icon-top) ::slotted(road-label){margin-top:0.25rem;font-size:0.625rem}";
+
+const TabButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.roadTabButtonClick = createEvent(this, "roadTabButtonClick", 7);
+    /**
+     * Set the layout of the text and icon in the tab bar.
+     * It defaults to `'icon-top'`.
+     */
+    this.layout = 'icon-start';
+    /**
+     * 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);
+    };
+  }
+  onTabBarChanged(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.roadTabButtonClick.emit({
+        tab: this.tab,
+        href: this.href,
+        selected: this.selected,
+      });
+      ev.preventDefault();
+    }
+  }
+  get hasLabel() {
+    return !!this.el.querySelector('road-label');
+  }
+  get hasIcon() {
+    return !!this.el.querySelector('road-icon');
+  }
+  get tabIndex() {
+    const hasTabIndex = this.el.hasAttribute('tabindex');
+    if (hasTabIndex) {
+      return this.el.getAttribute('tabindex');
+    }
+    return 0;
+  }
+  render() {
+    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab } = this;
+    const attrs = {
+      download: this.download,
+      href,
+      rel,
+      target,
+    };
+    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,
+        'tab-has-label': hasLabel,
+        'tab-has-icon': hasIcon,
+        'tab-has-label-only': hasLabel && !hasIcon,
+        'tab-has-icon-only': hasIcon && !hasLabel,
+        [`tab-layout-${layout}`]: true,
+      } }, h("a", Object.assign({}, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { class: "button-inner" }, h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+};
+TabButton.style = tabButtonCss;
+
+export { TabButton as road_tab_button };

package/dist/esm/road-tab.entry.js

@@ -0,0 +1,30 @@
+import { r as registerInstance, h, H as Host, e as getElement } from './index-42b74371.js';
+
+const tabCss = ":host{display:block}:host(.tab-hidden){display:none}";
+
+const Tab = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** @internal */
+    this.active = false;
+  }
+  async componentWillLoad() {
+    if (this.active) {
+      await this.setActive();
+    }
+  }
+  /** Set the active component for the tab */
+  async setActive() {
+    this.active = true;
+  }
+  render() {
+    const { tab, active } = this;
+    return (h(Host, { role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        'tab-hidden': !active,
+      } }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+Tab.style = tabCss;
+
+export { Tab as road_tab };

package/dist/esm/road-table.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-42b74371.js';
+
+const tableCss = ".sc-road-table-h{-webkit-box-sizing:border-box;box-sizing:border-box;display:block}.sc-road-table-s>table{width:100%;font-family:var(--font, sans-serif);font-size:0.875rem;line-height:1.5;color:var(--text);border-collapse:collapse;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.sc-road-table-s>table th,.sc-road-table-s>table td{padding:1.5rem 1.25rem;text-align:left}.sc-road-table-s>table thead tr,.sc-road-table-s>table tbody tr:nth-child(2n){background:var(--background-second)}";
+
+const Table = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+};
+Table.style = tableCss;
+
+export { Table as road_table };