@roadtrip/components 2.27.1 → 2.29.1

package/dist/types/components.d.ts

@@ -8,6 +8,10 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AutocompleteTypes, Color, FeedbackColors, TextFieldTypes } from "./interface";
 export namespace Components {
     interface RoadAccordion {
+        /**
+          * Set to `true` to remove border the accordion and to `false` to add border it.
+         */
+        "isLight": boolean;
         /**
           * Set to `true` to open the accordion and to `false` to close it.
          */
@@ -40,6 +44,28 @@ export namespace Components {
          */
         "color"?: Color;
     }
+    interface RoadBanner {
+        /**
+          * Close the banner
+         */
+        "close": () => Promise<void>;
+        /**
+          * 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;
+    }
     interface RoadButton {
         /**
           * The type of the button.
@@ -48,7 +74,7 @@ export namespace Components {
         /**
           * The color to use from your application's color palette.
          */
-        "color"?: Color;
+        "color"?: 'primary' | 'secondary' | 'default';
         /**
           * If `true`, the user cannot interact with the button.
          */
@@ -76,7 +102,7 @@ export namespace Components {
         /**
           * The button size.
          */
-        "size"?: 'sm' | 'md' | 'lg';
+        "size"?: 'sm' | 'md' | 'lg' | 'xl';
         /**
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
@@ -220,6 +246,14 @@ export namespace Components {
           * Error message for the field
          */
         "error"?: string;
+        /**
+          * Helper message for the field
+         */
+        "helper"?: string;
+        /**
+          * If `true`, the checkbox will visually appear as indeterminate.
+         */
+        "indeterminate": boolean;
         /**
           * If `true`, the label and the checkbox are inverse and spaced
          */
@@ -430,6 +464,10 @@ export namespace Components {
           * Set the color of the flap.
          */
         "color": 'promo' | 'exclu' | 'info' | 'ecology';
+        /**
+          * The button size.
+         */
+        "size": 'sm' | 'md';
     }
     interface RoadGrid {
     }
@@ -518,6 +556,10 @@ export namespace Components {
           * Error message for the field
          */
         "error"?: string;
+        /**
+          * Helper message for the field
+         */
+        "helper"?: string;
         /**
           * The id of input
          */
@@ -570,6 +612,10 @@ export namespace Components {
           * 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';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -739,7 +785,7 @@ export namespace Components {
         /**
           * The color to use from your application's color palette.
          */
-        "color": FeedbackColors;
+        "color": 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
         /**
           * The value determines how much of the active bar should display. The value should be between [0, 100].
          */
@@ -754,6 +800,10 @@ export namespace Components {
           * Error message for the field
          */
         "error"?: boolean;
+        /**
+          * Helper message for the field
+         */
+        "helper"?: string;
         /**
           * Inline multiple radio
          */
@@ -800,6 +850,10 @@ export namespace Components {
           * Error message for the radio group
          */
         "error"?: string;
+        /**
+          * Helper message for the radio group
+         */
+        "helper"?: string;
         /**
           * Label for the field
          */
@@ -900,6 +954,10 @@ export namespace Components {
           * 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.
          */
         "size": number;
+        /**
+          * The sizes of the input.
+         */
+        "sizes": 'lg' | 'xl';
         /**
           * the value of the select.
          */
@@ -1076,6 +1134,10 @@ export namespace Components {
           * Error message for the field
          */
         "error"?: string;
+        /**
+          * Helper message for the field
+         */
+        "helper"?: string;
         /**
           * A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`.
          */
@@ -1112,6 +1174,10 @@ export namespace Components {
           * The number of rows of the control.
          */
         "rows"?: number;
+        /**
+          * The sizes of the input.
+         */
+        "sizes": 'lg' | 'xl';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -1159,6 +1225,52 @@ export namespace Components {
          */
         "timeout": number;
     }
+    interface RoadToggle {
+        /**
+          * If `true`, the toggle is checked.
+         */
+        "checked": boolean;
+        /**
+          * Set the color of alert. e.g. info, success, warning, danger
+         */
+        "color"?: 'secondary' | FeedbackColors;
+        /**
+          * If `true`, the user cannot interact with the toggle.
+         */
+        "disabled": boolean;
+        /**
+          * If `true`, the label is at left of the toggle
+         */
+        "hasLeftLabel": boolean;
+        /**
+          * Add space between label and toggle element
+         */
+        "isSpaced": boolean;
+        /**
+          * Label for the field
+         */
+        "label": string;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name": string;
+        /**
+          * Text display for "`off`" state in the toggle lever
+         */
+        "off": string;
+        /**
+          * Text display for "`on`" state in the toggle lever
+         */
+        "on": string;
+        /**
+          * The id of toggle
+         */
+        "toggleId": string;
+        /**
+          * Value the form will get
+         */
+        "value": string;
+    }
     interface RoadToolbar {
         /**
           * Background color of the toolbar
@@ -1232,6 +1344,12 @@ declare global {
         prototype: HTMLRoadBadgeElement;
         new (): HTMLRoadBadgeElement;
     };
+    interface HTMLRoadBannerElement extends Components.RoadBanner, HTMLStencilElement {
+    }
+    var HTMLRoadBannerElement: {
+        prototype: HTMLRoadBannerElement;
+        new (): HTMLRoadBannerElement;
+    };
     interface HTMLRoadButtonElement extends Components.RoadButton, HTMLStencilElement {
     }
     var HTMLRoadButtonElement: {
@@ -1502,6 +1620,12 @@ declare global {
         prototype: HTMLRoadToastElement;
         new (): HTMLRoadToastElement;
     };
+    interface HTMLRoadToggleElement extends Components.RoadToggle, HTMLStencilElement {
+    }
+    var HTMLRoadToggleElement: {
+        prototype: HTMLRoadToggleElement;
+        new (): HTMLRoadToggleElement;
+    };
     interface HTMLRoadToolbarElement extends Components.RoadToolbar, HTMLStencilElement {
     }
     var HTMLRoadToolbarElement: {
@@ -1526,6 +1650,7 @@ declare global {
         "road-autocomplete": HTMLRoadAutocompleteElement;
         "road-avatar": HTMLRoadAvatarElement;
         "road-badge": HTMLRoadBadgeElement;
+        "road-banner": HTMLRoadBannerElement;
         "road-button": HTMLRoadButtonElement;
         "road-card": HTMLRoadCardElement;
         "road-carousel": HTMLRoadCarouselElement;
@@ -1571,6 +1696,7 @@ declare global {
         "road-text": HTMLRoadTextElement;
         "road-textarea": HTMLRoadTextareaElement;
         "road-toast": HTMLRoadToastElement;
+        "road-toggle": HTMLRoadToggleElement;
         "road-toolbar": HTMLRoadToolbarElement;
         "road-toolbar-title": HTMLRoadToolbarTitleElement;
         "road-tooltip": HTMLRoadTooltipElement;
@@ -1578,6 +1704,10 @@ declare global {
 }
 declare namespace LocalJSX {
     interface RoadAccordion {
+        /**
+          * Set to `true` to remove border the accordion and to `false` to add border it.
+         */
+        "isLight"?: boolean;
         /**
           * Set to `true` to open the accordion and to `false` to close it.
          */
@@ -1617,6 +1747,28 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
     }
+    interface RoadBanner {
+        /**
+          * 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;
+        /**
+          * Indicate when closing the banner
+         */
+        "onClose"?: (event: CustomEvent<void>) => void;
+        /**
+          * Text Link display in the banner
+         */
+        "url"?: string;
+    }
     interface RoadButton {
         /**
           * The type of the button.
@@ -1625,7 +1777,7 @@ declare namespace LocalJSX {
         /**
           * The color to use from your application's color palette.
          */
-        "color"?: Color;
+        "color"?: 'primary' | 'secondary' | 'default';
         /**
           * If `true`, the user cannot interact with the button.
          */
@@ -1661,7 +1813,7 @@ declare namespace LocalJSX {
         /**
           * The button size.
          */
-        "size"?: 'sm' | 'md' | 'lg';
+        "size"?: 'sm' | 'md' | 'lg' | 'xl';
         /**
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
@@ -1801,6 +1953,14 @@ declare namespace LocalJSX {
           * Error message for the field
          */
         "error"?: string;
+        /**
+          * Helper message for the field
+         */
+        "helper"?: string;
+        /**
+          * If `true`, the checkbox will visually appear as indeterminate.
+         */
+        "indeterminate"?: boolean;
         /**
           * If `true`, the label and the checkbox are inverse and spaced
          */
@@ -2029,6 +2189,10 @@ declare namespace LocalJSX {
           * Set the color of the flap.
          */
         "color"?: 'promo' | 'exclu' | 'info' | 'ecology';
+        /**
+          * The button size.
+         */
+        "size"?: 'sm' | 'md';
     }
     interface RoadGrid {
     }
@@ -2129,6 +2293,10 @@ declare namespace LocalJSX {
           * Error message for the field
          */
         "error"?: string;
+        /**
+          * Helper message for the field
+         */
+        "helper"?: string;
         /**
           * The id of input
          */
@@ -2199,6 +2367,10 @@ declare namespace LocalJSX {
           * 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';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -2382,7 +2554,7 @@ declare namespace LocalJSX {
         /**
           * The color to use from your application's color palette.
          */
-        "color"?: FeedbackColors;
+        "color"?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
         /**
           * The value determines how much of the active bar should display. The value should be between [0, 100].
          */
@@ -2397,6 +2569,10 @@ declare namespace LocalJSX {
           * Error message for the field
          */
         "error"?: boolean;
+        /**
+          * Helper message for the field
+         */
+        "helper"?: string;
         /**
           * Inline multiple radio
          */
@@ -2451,6 +2627,10 @@ declare namespace LocalJSX {
           * Error message for the radio group
          */
         "error"?: string;
+        /**
+          * Helper message for the radio group
+         */
+        "helper"?: string;
         /**
           * Label for the field
          */
@@ -2577,6 +2757,10 @@ declare namespace LocalJSX {
           * 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.
          */
         "size"?: number;
+        /**
+          * The sizes of the input.
+         */
+        "sizes"?: 'lg' | 'xl';
         /**
           * the value of the select.
          */
@@ -2764,6 +2948,10 @@ declare namespace LocalJSX {
           * Error message for the field
          */
         "error"?: string;
+        /**
+          * Helper message for the field
+         */
+        "helper"?: string;
         /**
           * A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`.
          */
@@ -2818,6 +3006,10 @@ declare namespace LocalJSX {
           * The number of rows of the control.
          */
         "rows"?: number;
+        /**
+          * The sizes of the input.
+         */
+        "sizes"?: 'lg' | 'xl';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -2861,6 +3053,67 @@ declare namespace LocalJSX {
          */
         "timeout"?: number;
     }
+    interface RoadToggle {
+        /**
+          * If `true`, the toggle is checked.
+         */
+        "checked"?: boolean;
+        /**
+          * Set the color of alert. e.g. info, success, warning, danger
+         */
+        "color"?: 'secondary' | FeedbackColors;
+        /**
+          * If `true`, the user cannot interact with the toggle.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the label is at left of the toggle
+         */
+        "hasLeftLabel"?: boolean;
+        /**
+          * Add space between label and toggle element
+         */
+        "isSpaced"?: boolean;
+        /**
+          * Label for the field
+         */
+        "label"?: string;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Text display for "`off`" state in the toggle lever
+         */
+        "off"?: string;
+        /**
+          * Text display for "`on`" state in the toggle lever
+         */
+        "on"?: string;
+        /**
+          * Emitted when the toggle loses focus.
+         */
+        "onRoadblur"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when the checked property has changed.
+         */
+        "onRoadchange"?: (event: CustomEvent<{
+    checked: boolean;
+    value: string | undefined | null
+  }>) => void;
+        /**
+          * Emitted when the toggle has focus.
+         */
+        "onRoadfocus"?: (event: CustomEvent<void>) => void;
+        /**
+          * The id of toggle
+         */
+        "toggleId"?: string;
+        /**
+          * Value the form will get
+         */
+        "value"?: string;
+    }
     interface RoadToolbar {
         /**
           * Background color of the toolbar
@@ -2900,6 +3153,7 @@ declare namespace LocalJSX {
         "road-autocomplete": RoadAutocomplete;
         "road-avatar": RoadAvatar;
         "road-badge": RoadBadge;
+        "road-banner": RoadBanner;
         "road-button": RoadButton;
         "road-card": RoadCard;
         "road-carousel": RoadCarousel;
@@ -2945,6 +3199,7 @@ declare namespace LocalJSX {
         "road-text": RoadText;
         "road-textarea": RoadTextarea;
         "road-toast": RoadToast;
+        "road-toggle": RoadToggle;
         "road-toolbar": RoadToolbar;
         "road-toolbar-title": RoadToolbarTitle;
         "road-tooltip": RoadTooltip;
@@ -2959,6 +3214,7 @@ declare module "@stencil/core" {
             "road-autocomplete": LocalJSX.RoadAutocomplete & JSXBase.HTMLAttributes<HTMLRoadAutocompleteElement>;
             "road-avatar": LocalJSX.RoadAvatar & JSXBase.HTMLAttributes<HTMLRoadAvatarElement>;
             "road-badge": LocalJSX.RoadBadge & JSXBase.HTMLAttributes<HTMLRoadBadgeElement>;
+            "road-banner": LocalJSX.RoadBanner & JSXBase.HTMLAttributes<HTMLRoadBannerElement>;
             "road-button": LocalJSX.RoadButton & JSXBase.HTMLAttributes<HTMLRoadButtonElement>;
             "road-card": LocalJSX.RoadCard & JSXBase.HTMLAttributes<HTMLRoadCardElement>;
             "road-carousel": LocalJSX.RoadCarousel & JSXBase.HTMLAttributes<HTMLRoadCarouselElement>;
@@ -3004,6 +3260,7 @@ declare module "@stencil/core" {
             "road-text": LocalJSX.RoadText & JSXBase.HTMLAttributes<HTMLRoadTextElement>;
             "road-textarea": LocalJSX.RoadTextarea & JSXBase.HTMLAttributes<HTMLRoadTextareaElement>;
             "road-toast": LocalJSX.RoadToast & JSXBase.HTMLAttributes<HTMLRoadToastElement>;
+            "road-toggle": LocalJSX.RoadToggle & JSXBase.HTMLAttributes<HTMLRoadToggleElement>;
             "road-toolbar": LocalJSX.RoadToolbar & JSXBase.HTMLAttributes<HTMLRoadToolbarElement>;
             "road-toolbar-title": LocalJSX.RoadToolbarTitle & JSXBase.HTMLAttributes<HTMLRoadToolbarTitleElement>;
             "road-tooltip": LocalJSX.RoadTooltip & JSXBase.HTMLAttributes<HTMLRoadTooltipElement>;