@roadtrip/components 2.27.1 → 2.29.1

package/dist/roadtrip/svg/wrench-outline-color.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M9.874,60.2a6.076,6.076,0,0,1-4.3-10.373L34.239,21.167A13.283,13.283,0,0,1,49.475,4.051a2.462,2.462,0,0,1,1.26,4.155l-5.521,5.521,5.12,5.059,5.46-5.522a2.463,2.463,0,0,1,4.155,1.26,13.31,13.31,0,0,1-17.13,15.261L14.171,58.422A6.035,6.035,0,0,1,9.874,60.2ZM47,6.263a10.965,10.965,0,0,0-7.76,3.2A10.778,10.778,0,0,0,36.6,20.417a2.472,2.472,0,0,1-.589,2.517L7.346,51.6a3.574,3.574,0,0,0,0,5.057,3.658,3.658,0,0,0,5.057,0L41.066,27.993a2.467,2.467,0,0,1,2.517-.589A10.808,10.808,0,0,0,57.5,15.01L52.04,20.554a2.459,2.459,0,0,1-3.473,0l-5.121-5.121a2.459,2.459,0,0,1,0-3.472l5.523-5.523A11.062,11.062,0,0,0,47,6.263Z" transform="translate(0.202 0.203)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/><rect width="2.5" height="2.5" transform="translate(11.25 51.482) rotate(45)" fill="var(--accent-hover, rgb(236, 160, 0))" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M9.874,60.2a6.076,6.076,0,0,1-4.3-10.373L34.239,21.167A13.283,13.283,0,0,1,49.475,4.051a2.462,2.462,0,0,1,1.26,4.155l-5.521,5.521,5.12,5.059,5.46-5.522a2.463,2.463,0,0,1,4.155,1.26,13.31,13.31,0,0,1-17.13,15.261L14.171,58.422A6.035,6.035,0,0,1,9.874,60.2ZM47,6.263a10.965,10.965,0,0,0-7.76,3.2A10.778,10.778,0,0,0,36.6,20.417a2.472,2.472,0,0,1-.589,2.517L7.346,51.6a3.574,3.574,0,0,0,0,5.057,3.658,3.658,0,0,0,5.057,0L41.066,27.993a2.467,2.467,0,0,1,2.517-.589A10.808,10.808,0,0,0,57.5,15.01L52.04,20.554a2.459,2.459,0,0,1-3.473,0l-5.121-5.121a2.459,2.459,0,0,1,0-3.472l5.523-5.523A11.062,11.062,0,0,0,47,6.263Z" transform="translate(0.202 0.203)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/><rect width="2.5" height="2.5" transform="translate(11.25 51.482) rotate(45)" fill="var(--road-secondary-500, rgb(252, 183, 49))" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/></svg>

package/dist/roadtrip/svg/wrench-tools-outline-color.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(-914.922 -748.1)"><path d="M953.127,788.6c-22.753-22.753-22.764-22.764-22.946-22.855l-3.817-1.285-4.607-6.911,2.611-2.611,6.911,4.607L932.5,763.2l.067.163c.092.183.1.194,22.856,22.946l1.767-1.767-22.412-22.412-1.4-4.187-9.329-6.22-5.51,5.51,6.221,9.329,4.186,1.4,22.412,22.412Z"/><rect width="2.5" height="2.5" transform="translate(924.323 801.3) rotate(-45)" fill="var(--accent-hover, rgb(236, 160, 0))"/><path d="M924.975,808.479a6.075,6.075,0,0,1-4.3-10.371l17.443-17.444,1.768,1.768-17.444,17.444a3.577,3.577,0,0,0,5.058,5.058l17.443-17.444,1.768,1.768L929.271,806.7A6.055,6.055,0,0,1,924.975,808.479Z"/><path d="M956.079,779.9l-1.767-1.768,1.854-1.855a2.47,2.47,0,0,1,2.518-.588,10.809,10.809,0,0,0,13.913-12.4l-5.456,5.543a2.516,2.516,0,0,1-3.475,0l-5.119-5.118a2.459,2.459,0,0,1,0-3.474l5.521-5.521a10.992,10.992,0,0,0-9.725,3.022A10.78,10.78,0,0,0,951.7,768.7a2.471,2.471,0,0,1-.589,2.518l-1.854,1.854-1.768-1.767,1.855-1.855a13.282,13.282,0,0,1,15.235-17.116,2.463,2.463,0,0,1,1.261,4.155l-5.522,5.522,5.121,5.057,5.46-5.52a2.463,2.463,0,0,1,4.155,1.26,13.309,13.309,0,0,1-17.13,15.26Z"/><path d="M970.225,808.481a5.045,5.045,0,0,1-3.591-1.487L956.169,796.53c-1.072-.009-3.536,0-3.537,0l-.812,0-.331-.741c-1.718-3.84-1.718-3.84-1.1-4.462l7.525-7.526c.6-.555.6-.556,4.593.821l.844.291,0,.893s0,2.462,0,3.537l10.463,10.465a5.078,5.078,0,0,1-3.59,8.668Zm-16.005-14.45c2.986,0,3.029.043,3.354.368L968.4,805.227a2.579,2.579,0,0,0,3.647-3.647l-10.827-10.827c-.349-.349-.373-.373-.368-4.053-.644-.221-1.263-.432-1.71-.584L952.76,792.5c.183.415.427.964.679,1.53Z" fill="var(--accent-hover, rgb(236, 160, 0))"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(-914.922 -748.1)"><path d="M953.127,788.6c-22.753-22.753-22.764-22.764-22.946-22.855l-3.817-1.285-4.607-6.911,2.611-2.611,6.911,4.607L932.5,763.2l.067.163c.092.183.1.194,22.856,22.946l1.767-1.767-22.412-22.412-1.4-4.187-9.329-6.22-5.51,5.51,6.221,9.329,4.186,1.4,22.412,22.412Z"/><rect width="2.5" height="2.5" transform="translate(924.323 801.3) rotate(-45)" fill="var(--road-secondary-500, rgb(252, 183, 49))"/><path d="M924.975,808.479a6.075,6.075,0,0,1-4.3-10.371l17.443-17.444,1.768,1.768-17.444,17.444a3.577,3.577,0,0,0,5.058,5.058l17.443-17.444,1.768,1.768L929.271,806.7A6.055,6.055,0,0,1,924.975,808.479Z"/><path d="M956.079,779.9l-1.767-1.768,1.854-1.855a2.47,2.47,0,0,1,2.518-.588,10.809,10.809,0,0,0,13.913-12.4l-5.456,5.543a2.516,2.516,0,0,1-3.475,0l-5.119-5.118a2.459,2.459,0,0,1,0-3.474l5.521-5.521a10.992,10.992,0,0,0-9.725,3.022A10.78,10.78,0,0,0,951.7,768.7a2.471,2.471,0,0,1-.589,2.518l-1.854,1.854-1.768-1.767,1.855-1.855a13.282,13.282,0,0,1,15.235-17.116,2.463,2.463,0,0,1,1.261,4.155l-5.522,5.522,5.121,5.057,5.46-5.52a2.463,2.463,0,0,1,4.155,1.26,13.309,13.309,0,0,1-17.13,15.26Z"/><path d="M970.225,808.481a5.045,5.045,0,0,1-3.591-1.487L956.169,796.53c-1.072-.009-3.536,0-3.537,0l-.812,0-.331-.741c-1.718-3.84-1.718-3.84-1.1-4.462l7.525-7.526c.6-.555.6-.556,4.593.821l.844.291,0,.893s0,2.462,0,3.537l10.463,10.465a5.078,5.078,0,0,1-3.59,8.668Zm-16.005-14.45c2.986,0,3.029.043,3.354.368L968.4,805.227a2.579,2.579,0,0,0,3.647-3.647l-10.827-10.827c-.349-.349-.373-.373-.368-4.053-.644-.221-1.263-.432-1.71-.584L952.76,792.5c.183.415.427.964.679,1.53Z" fill="var(--road-secondary-500, rgb(252, 183, 49))"/></g></svg>

package/dist/roadtrip/svg/zoom-in-color.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(8.167 7.702)"><path d="M40.6,12.74a19.181,19.181,0,1,0,0,27.124A19.118,19.118,0,0,0,40.6,12.74ZM38.339,37.6a15.984,15.984,0,1,1,0-22.6A15.872,15.872,0,0,1,38.339,37.6Z" transform="translate(-7.854 -7.121)"/><rect width="3.199" height="17.901" transform="translate(33.259 35.526) rotate(-45.032)"/><path d="M9967.832,2468.3v-8.355h-8.5v-3h8.5V2448.3h3v8.646h8.5v3h-8.5v8.355Z" transform="translate(-9949.795 -2439.262)" fill="var(--accent-hover, rgb(236, 160, 0))" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(8.167 7.702)"><path d="M40.6,12.74a19.181,19.181,0,1,0,0,27.124A19.118,19.118,0,0,0,40.6,12.74ZM38.339,37.6a15.984,15.984,0,1,1,0-22.6A15.872,15.872,0,0,1,38.339,37.6Z" transform="translate(-7.854 -7.121)"/><rect width="3.199" height="17.901" transform="translate(33.259 35.526) rotate(-45.032)"/><path d="M9967.832,2468.3v-8.355h-8.5v-3h8.5V2448.3h3v8.646h8.5v3h-8.5v8.355Z" transform="translate(-9949.795 -2439.262)" fill="var(--road-secondary-500, rgb(252, 183, 49))" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/></g></svg>

package/dist/roadtrip/svg/zoom-out-color.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(8.167 7.702)"><path d="M40.6,12.74a19.181,19.181,0,1,0,0,27.124A19.118,19.118,0,0,0,40.6,12.74ZM38.339,37.6a15.984,15.984,0,1,1,0-22.6A15.872,15.872,0,0,1,38.339,37.6Z" transform="translate(-7.854 -7.121)"/><rect width="3.199" height="17.901" transform="translate(33.259 35.526) rotate(-45.032)"/><rect width="20" height="3" transform="translate(9.183 17.681)" fill="var(--accent-hover, rgb(236, 160, 0))"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(8.167 7.702)"><path d="M40.6,12.74a19.181,19.181,0,1,0,0,27.124A19.118,19.118,0,0,0,40.6,12.74ZM38.339,37.6a15.984,15.984,0,1,1,0-22.6A15.872,15.872,0,0,1,38.339,37.6Z" transform="translate(-7.854 -7.121)"/><rect width="3.199" height="17.901" transform="translate(33.259 35.526) rotate(-45.032)"/><rect width="20" height="3" transform="translate(9.183 17.681)" fill="var(--road-secondary-500, rgb(252, 183, 49))"/></g></svg>

package/dist/types/components/accordion/accordion.d.ts

@@ -8,6 +8,10 @@ export declare class Accordion {
    * Set to `true` to open the accordion and to `false` to close it.
    */
   isOpen: boolean;
+  /**
+   * Set to `true` to remove border the accordion and to `false` to add border it.
+   */
+  isLight: boolean;
   /**
    * Toggle the display when clicking header
    */

package/dist/types/components/banner/banner.d.ts

@@ -0,0 +1,32 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class Banner {
+  /**
+   * Set `open` property to `true` to open the banner
+   */
+  isOpen: boolean;
+  /**
+   * Text display in the banner
+   */
+  label: string;
+  /**
+   * Text Link display in the banner
+   */
+  link?: string;
+  /**
+   * Text Link display in the banner
+   */
+  url?: string;
+  /**
+   * Close the dialog when clicking on the cross or layer
+   */
+  private onClick;
+  /**
+   * Close the banner
+   */
+  close(): Promise<void>;
+  /**
+   * Indicate when closing the banner
+   */
+  onClose: EventEmitter<void>;
+  render(): any;
+}

package/dist/types/components/button/button.d.ts

@@ -1,6 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import './../../utils/polyfill';
-import { Color } from '../../interface';
 /**
  * @slot - Content of the button.
  * @slot start - Left content of the button text, usually for icon.
@@ -13,11 +12,11 @@ export declare class Button {
   /**
    * The color to use from your application's color palette.
    */
-  color?: Color;
+  color?: 'primary' | 'secondary' | 'default';
   /**
     * The button size.
     */
-  size?: 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
   /**
    * The type of the button.
    */

package/dist/types/components/checkbox/checkbox.d.ts

@@ -20,6 +20,10 @@ export declare class Checkbox {
    * If `true`, the checkbox is checked.
    */
   checked: boolean;
+  /**
+   * If `true`, the checkbox will visually appear as indeterminate.
+   */
+  indeterminate: boolean;
   /**
    * If `true`, the user cannot interact with the checkbox.
    */
@@ -40,6 +44,10 @@ export declare class Checkbox {
    * Error message for the field
    */
   error?: string;
+  /**
+   * Helper message for the field
+   */
+  helper?: string;
   /**
    * Emitted when the checked property has changed.
    */

package/dist/types/components/flap/flap.d.ts

@@ -6,5 +6,9 @@ export declare class Flap {
    * Set the color of the flap.
    */
   color: 'promo' | 'exclu' | 'info' | 'ecology';
+  /**
+    * The button size.
+    */
+  size: 'sm' | 'md';
   render(): any;
 }

package/dist/types/components/input/input.d.ts

@@ -85,6 +85,10 @@ export declare class Input {
    * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
    */
   size?: number;
+  /**
+   * The sizes of the input.
+   */
+  sizes: 'lg' | 'xl';
   /**
    * The type of control to display. The default type is text.
    */
@@ -101,6 +105,10 @@ export declare class Input {
    * Error message for the field
    */
   error?: string;
+  /**
+   * Helper message for the field
+   */
+  helper?: string;
   /**
    * Set the amount of time, in milliseconds, to wait to trigger the `roadChange` event after each keystroke.
    */

package/dist/types/components/progress/progress.d.ts

@@ -1,4 +1,3 @@
-import { FeedbackColors } from '../../interface';
 export declare class ProgressBar {
   /**
    * The value determines how much of the active bar should display.
@@ -8,6 +7,6 @@ export declare class ProgressBar {
   /**
    * The color to use from your application's color palette.
    */
-  color: FeedbackColors;
+  color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
   render(): any;
 }

package/dist/types/components/radio/radio.d.ts

@@ -39,6 +39,10 @@ export declare class Radio {
    * Error message for the field
    */
   error?: boolean;
+  /**
+   * Helper message for the field
+   */
+  helper?: string;
   /**
    * Inline multiple radio
    */

package/dist/types/components/radio-group/radio-group.d.ts

@@ -36,6 +36,10 @@ export declare class RadioGroup {
    * Error message for the radio group
    */
   error?: string;
+  /**
+   * Helper message for the radio group
+   */
+  helper?: string;
   valueChanged(value: any | undefined): void;
   /**
    * Emitted when the value has changed.

package/dist/types/components/select/select.d.ts

@@ -33,6 +33,10 @@ export declare class Select {
    * this attribute represents the number of rows in the list that should be visible at one time.
    */
   size: number;
+  /**
+   * The sizes of the input.
+   */
+  sizes: 'lg' | 'xl';
   /**
    * Label for the field
    */

package/dist/types/components/textarea/textarea.d.ts

@@ -43,6 +43,10 @@ export declare class Textarea {
    * Instructional text that shows before the textarea has a value.
    */
   placeholder?: string;
+  /**
+   * The sizes of the input.
+   */
+  sizes: 'lg' | 'xl';
   /**
    * If `true`, the user cannot modify the value.
    */
@@ -79,6 +83,10 @@ export declare class Textarea {
    * Error message for the field
    */
   error?: string;
+  /**
+   * Helper message for the field
+   */
+  helper?: string;
   /**
    * Update the native textarea element when the value changes
    */

package/dist/types/components/toggle/toggle.d.ts

@@ -0,0 +1,78 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import '../../utils/polyfill';
+import { FeedbackColors } from '../../interface';
+export declare class toggle {
+  /**
+   * The id of toggle
+   */
+  toggleId: string;
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: string;
+  /**
+   * If `true`, the toggle is checked.
+   */
+  checked: boolean;
+  /**
+   * If `true`, the user cannot interact with the toggle.
+   */
+  disabled: boolean;
+  /**
+   * Label for the field
+   */
+  label: string;
+  /**
+   * Set the color of alert. e.g. info, success, warning, danger
+   */
+  color?: 'secondary' | FeedbackColors;
+  /**
+   * If `true`, the label is at left of the toggle
+   */
+  hasLeftLabel: boolean;
+  /**
+   * Add space between label and toggle element
+   */
+  isSpaced: boolean;
+  /**
+   * Value the form will get
+   */
+  value: string;
+  /**
+   * Text display for "`on`" state in the toggle lever
+   */
+  on: string;
+  /**
+   * Text display for "`off`" state in the toggle lever
+   */
+  off: string;
+  /**
+   * Emitted when the checked property has changed.
+   */
+  roadchange: EventEmitter<{
+    checked: boolean;
+    value: string | undefined | null;
+  }>;
+  /** @internal */
+  roadChange: EventEmitter<{
+    checked: boolean;
+    value: string | undefined | null;
+  }>;
+  /**
+   * Emitted when the toggle has focus.
+   */
+  roadfocus: EventEmitter<void>;
+  /** @internal */
+  roadFocus: EventEmitter<void>;
+  /**
+   * Emitted when the toggle loses focus.
+   */
+  roadblur: EventEmitter<void>;
+  /** @internal */
+  roadBlur: EventEmitter<void>;
+  checkedChanged(isChecked: boolean): void;
+  private onClick;
+  private onFocus;
+  private onBlur;
+  render(): any;
+}