@roadtrip/components 2.21.0

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

@@ -0,0 +1,61 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import './../../utils/polyfill';
+export declare class Radio {
+  private radioGroup;
+  el: HTMLRoadRadioElement;
+  /**
+   * The id of radio
+   */
+  radioId: string;
+  /**
+   * If `true`, the radio is selected.
+   */
+  checked: boolean;
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: string;
+  /**
+   * If `true`, the user must fill in a value before submitting a form.
+   */
+  required: boolean;
+  /**
+   * If `true`, the user cannot interact with the radio.
+   */
+  disabled: boolean;
+  /**
+   * Value the form will get
+   */
+  value?: any | null;
+  /**
+   * Label for the field
+   */
+  label: string;
+  /**
+   * If `true`, the label and the radio are inverse and spaced
+   */
+  inverse: boolean;
+  /**
+   * Error message for the field
+   */
+  error?: boolean;
+  /**
+   * Inline multiple radio
+   */
+  inline: boolean;
+  /**
+   * Emitted when the radio button has focus.
+   */
+  roadFocus: EventEmitter<void>;
+  /**
+   * Emitted when the radio button loses focus.
+   */
+  roadBlur: EventEmitter<void>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  onRoadChangedChanged(): void;
+  private updateState;
+  private onFocus;
+  private onBlur;
+  render(): any;
+}

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

@@ -0,0 +1,50 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot  - Used to add multiple radio components.
+ */
+export declare class RadioGroup {
+  el: HTMLRoadRadioGroupElement;
+  /**
+   * The id of checkbox
+   */
+  radioGroupId: string;
+  /**
+   * If `true`, the radios can be deselected.
+   */
+  allowEmptySelection: boolean;
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: string;
+  /**
+   * the value of the radio group.
+   */
+  value?: any | null;
+  /**
+   * Label for the field
+   */
+  label?: string;
+  /**
+   * add an asterisk to the label of the field
+   */
+  asterisk?: boolean;
+  /**
+   * Label for the field
+   */
+  ariaLabel: string;
+  /**
+   * Error message for the radio group
+   */
+  error?: string;
+  valueChanged(value: any | undefined): void;
+  /**
+   * Emitted when the value has changed.
+   */
+  roadChange: EventEmitter<{
+    value: string | undefined | null;
+  }>;
+  private onClick;
+  errorChanged(): void;
+  componentWillLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,42 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class Range {
+  el: HTMLRoadRangeElement;
+  /**
+   * The id of range
+   */
+  rangeId: string;
+  /**
+   * The value of the range.
+   */
+  value?: string | number | null;
+  /**
+   * The minimum value, which must not be greater than its maximum (max attribute) value.
+   */
+  min: string;
+  /**
+   * The maximum value, which must not be less than its minimum (min attribute) value.
+   */
+  max: string;
+  /**
+   * Works with the min and max attributes to limit the increments at which a value can be set.
+   * Possible values are: `"any"` or a positive floating point number.
+   */
+  step?: string;
+  /**
+   * Display the current value of the range
+   */
+  showValue: boolean;
+  /**
+   * Update the native input element when the value changes
+   */
+  protected valueChanged(): void;
+  /**
+   * Emitted when the value has changed.
+   */
+  roadChange: EventEmitter<{
+    value: string | undefined | null;
+  }>;
+  private getValue;
+  private onInput;
+  render(): any;
+}

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

@@ -0,0 +1,15 @@
+export declare class Rating {
+  /**
+   * Rate review between 0 and 5
+   */
+  rate: number;
+  /**
+   * number of reviews
+   */
+  reviews: number;
+  /**
+   * Word display next to the number of reviews.
+   */
+  reviewsText: string;
+  render(): any;
+}

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

@@ -0,0 +1,6 @@
+/**
+ * @slot  - Used to be able to add multiple columns for a row.
+ */
+export declare class Row {
+  render(): any;
+}

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

@@ -0,0 +1,67 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class Select {
+  /**
+   * The id of select
+   */
+  selectId: string;
+  /**
+   * List of options of the select
+   */
+  options: Array<{
+    value: string | number;
+    label: string;
+    selected?: boolean;
+  }>;
+  /**
+   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+   */
+  autofocus: boolean;
+  /**
+   * If `true`, the user cannot interact with the select.
+   */
+  disabled: boolean;
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: string;
+  /**
+   * If `true`, the user must fill in a value before submitting a form.
+   */
+  required: boolean;
+  /**
+   * 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;
+  /**
+   * Label for the field
+   */
+  label: string;
+  /**
+   * Error message for the field
+   */
+  error?: string;
+  /**
+   * the value of the select.
+   */
+  value?: any | null;
+  /**
+   * Emitted when the value has changed.
+   */
+  roadChange: EventEmitter<{
+    value: string | undefined | null;
+  }>;
+  /**
+   * Emitted when the select has focus.
+   */
+  roadFocus: EventEmitter<void>;
+  /**
+   * Emitted when the select loses focus.
+   */
+  roadBlur: EventEmitter<void>;
+  valueChanged(): void;
+  private onChange;
+  private onBlur;
+  private onFocus;
+  render(): any;
+}

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

@@ -0,0 +1,3 @@
+export declare class Skeleton {
+  render(): any;
+}

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

@@ -0,0 +1,3 @@
+export declare class Spinner {
+  render(): any;
+}

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

@@ -0,0 +1,69 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import './../../utils/polyfill';
+import { FeedbackColors } from '../../interface';
+export declare class Switch {
+  /**
+   * The id of input
+   */
+  switchId: string;
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: string;
+  /**
+   * If `true`, the toggle is selected.
+   */
+  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 switch
+   */
+  hasLeftLabel: boolean;
+  /**
+   * Add space between label and switch element
+   */
+  isSpaced: boolean;
+  /**
+   * Value the form will get
+   */
+  value: string;
+  /**
+   * Text display for "`on`" state in the switch lever
+   */
+  on: string;
+  /**
+   * Text display for "`off`" state in the switch lever
+   */
+  off: string;
+  /**
+   * Emitted when the checked property has changed.
+   */
+  roadChange: EventEmitter<{
+    checked: boolean;
+    value: string | undefined | null;
+  }>;
+  /**
+   * Emitted when the toggle has focus.
+   */
+  roadFocus: EventEmitter<void>;
+  /**
+   * Emitted when the toggle loses focus.
+   */
+  roadBlur: EventEmitter<void>;
+  checkedChanged(isChecked: boolean): void;
+  private onClick;
+  private onFocus;
+  private onBlur;
+  render(): any;
+}

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

@@ -0,0 +1,17 @@
+/**
+ * @slot  - content of the tab sync with selected tab.
+ */
+export declare class Tab {
+  el: HTMLRoadTabElement;
+  /** @internal */
+  active: boolean;
+  /**
+   * A tab id must be provided for each `road-tab`. It's used internally to reference
+   * the selected tab or by the router to switch between them.
+   */
+  tab: string;
+  componentWillLoad(): Promise<void>;
+  /** Set the active component for the tab */
+  setActive(): Promise<void>;
+  render(): any;
+}

package/dist/types/components/tab-bar/tab-bar.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import './../../utils/polyfill';
+/**
+ * @slot  - Content of the tabBar, it should be road-tab-button elements.
+ */
+export declare class TabBar {
+  el: HTMLRoadTabBarElement;
+  /**
+   * Set to `true` to expand buttons width to take the full size of the bar.
+   */
+  expand: boolean;
+  /**
+   * Set to `true` to center buttons in the bar.
+   */
+  center: boolean;
+  /**
+   * The selected tab component
+   */
+  selectedTab?: string;
+  selectedTabChanged(): void;
+  /** @internal */
+  roadTabBarChanged: EventEmitter;
+  componentWillLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,58 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot  - Content of the tab-button, it should be road-icon and road-label elements.
+ *
+ * @part native - The native HTML anchor element that wraps all child elements.
+ */
+export declare class TabButton {
+  el: HTMLRoadTabButtonElement;
+  /**
+   * This attribute instructs browsers to download a URL instead of navigating to
+   * it, so the user will be prompted to save it as a local file. If the attribute
+   * has a value, it is used as the pre-filled file name in the Save prompt
+   * (the user can still change the file name if they want).
+   */
+  download: string | undefined;
+  /**
+   * Contains a URL or a URL fragment that the hyperlink points to.
+   * If this property is set, an anchor tag will be rendered.
+   */
+  href: string | undefined;
+  /**
+   * Specifies the relationship of the target object to the link object.
+   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+   */
+  rel: string | undefined;
+  /**
+   * Set the layout of the text and icon in the tab bar.
+   * It defaults to `'icon-top'`.
+   */
+  layout?: 'icon-start' | 'icon-top';
+  /**
+   * The selected tab component
+   */
+  selected: boolean;
+  /**
+   * A tab id must be provided for each `road-tab`. It's used internally to reference
+   */
+  tab?: string;
+  /**
+   * Specifies where to display the linked URL.
+   * Only applies when an `href` is provided.
+   * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+   */
+  target: string | undefined;
+  /**
+   * Emitted when the tab bar is clicked
+   * @internal
+   */
+  roadTabButtonClick: EventEmitter;
+  onTabBarChanged(ev: CustomEvent): void;
+  private selectTab;
+  private get hasLabel();
+  private get hasIcon();
+  private get tabIndex();
+  private onKeyUp;
+  private onClick;
+  render(): any;
+}

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

@@ -0,0 +1,6 @@
+/**
+ * @slot  - Content of table, it should be an html table (https://developer.mozilla.org/fr/docs/Web/HTML/Element/table).
+ */
+export declare class Table {
+  render(): any;
+}

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

@@ -0,0 +1,47 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot - Content is placed between the named slots if provided without a slot.
+ * @slot top - Content is placed at the top of the screen.
+ */
+export declare class Tabs {
+  private transitioning;
+  private leavingTab?;
+  el: HTMLRoadTabsElement;
+  selectedTab?: HTMLRoadTabElement;
+  /**
+   * Emitted when the navigation is about to transition to a new component.
+   */
+  roadTabsWillChange: EventEmitter<{
+    tab: string;
+  }>;
+  /**
+   * Emitted when the navigation has finished transitioning to a new component.
+   */
+  roadTabsDidChange: EventEmitter<{
+    tab: string;
+  }>;
+  componentWillLoad(): Promise<void>;
+  componentWillRender(): void;
+  /**
+   * Select a tab by the value of its `tab` property or an element reference.
+   *
+   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
+   */
+  select(tab: string | HTMLRoadTabElement): Promise<boolean>;
+  /**
+   * Get a specific tab by the value of its `tab` property or an element reference.
+   *
+   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
+   */
+  getTab(tab: string | HTMLRoadTabElement): Promise<HTMLRoadTabElement | undefined>;
+  /**
+   * Get the currently selected tab.
+   */
+  getSelected(): Promise<string | undefined>;
+  private setActive;
+  private tabSwitch;
+  private shouldSwitch;
+  private get tabs();
+  private onTabClicked;
+  render(): any;
+}

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

@@ -0,0 +1,10 @@
+/**
+ * @slot  - Content of the text.
+ */
+export declare class Text {
+  /**
+   * Color of the text.
+   */
+  color?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'default' | 'default-second' | 'disabled' | 'white';
+  render(): any;
+}

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

@@ -0,0 +1,109 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class Textarea {
+  /**
+   * The id of input
+   */
+  textareaId: string;
+  /**
+   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+   */
+  autocapitalize: string;
+  /**
+   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+   */
+  autofocus: boolean;
+  /**
+   * If `true`, the user cannot interact with the input.
+   */
+  disabled: boolean;
+  /**
+   * 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"`.
+   */
+  inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+  /**
+   * A hint to the browser for which enter key to display.
+   * Possible values: `"enter"`, `"done"`, `"go"`, `"next"`,
+   * `"previous"`, `"search"`, and `"send"`.
+   */
+  enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+  /**
+   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.
+   */
+  maxlength?: number;
+  /**
+   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
+   */
+  minlength?: number;
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: string;
+  /**
+   * Instructional text that shows before the input has a value.
+   */
+  placeholder?: string;
+  /**
+   * If `true`, the user cannot modify the value.
+   */
+  readonly: boolean;
+  /**
+   * If `true`, the user must fill in a value before submitting a form.
+   */
+  required: boolean;
+  /**
+   * If `true`, the element will have its spelling and grammar checked.
+   */
+  spellcheck: boolean;
+  /**
+   * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
+   */
+  cols?: number;
+  /**
+   * The number of rows of the control.
+   */
+  rows?: number;
+  /**
+   * Indicates how the control wraps text.
+   */
+  wrap?: 'hard' | 'soft' | 'off';
+  /**
+   * The value of the input.
+   */
+  value?: string | null;
+  /**
+   * Label for the field
+   */
+  label: string;
+  /**
+   * Error message for the field
+   */
+  error?: string;
+  /**
+   * Update the native input element when the value changes
+   */
+  protected valueChanged(): void;
+  /**
+   * Emitted when a keyboard input occurred.
+   */
+  roadInput: EventEmitter<KeyboardEvent>;
+  /**
+   * Emitted when the value has changed.
+   */
+  roadChange: EventEmitter<{
+    value: string | undefined | null;
+  }>;
+  /**
+   * Emitted when the input loses focus.
+   */
+  roadBlur: EventEmitter<void>;
+  /**
+   * Emitted when the input has focus.
+   */
+  roadFocus: EventEmitter<void>;
+  private getValue;
+  private onInput;
+  private onBlur;
+  private onFocus;
+  render(): any;
+}

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

@@ -0,0 +1,47 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { FeedbackColors } from '../../interface';
+export declare class Toast {
+  /**
+   * Set open propertie to true to show the toast
+   */
+  isOpen: boolean;
+  /**
+   * Set the color of toast. e.g. info, success, warning, danger
+   */
+  color: FeedbackColors;
+  /**
+   * Text display in the toast
+   */
+  label?: string;
+  /**
+   * How many milliseconds to wait before hiding the toast. if `"0"`, it will show
+   * until `close()` is called.
+   */
+  timeout: number;
+  /**
+   * position of the toast.
+   */
+  position: 'top' | 'bottom';
+  /**
+    * Indicate when closing the toast
+    */
+  onClose: EventEmitter<void>;
+  /**
+   * Watch the isOpen property to start the timeout before closing
+   */
+  isOpenChanged(): void;
+  /**
+   * Open the toast
+   */
+  open(): Promise<void>;
+  /**
+   * Close the toast
+   */
+  close(): Promise<void>;
+  /**
+   * Close the dialog when clicking on the cross or layer
+   */
+  private onClick;
+  componentDidLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,15 @@
+/**
+ *
+ * @slot - Content is placed between the named slots if provided without a slot.
+ * @slot start - Content is placed to the left of the toolbar text and left to primery slot if provided.
+ * @slot primary - Content is placed to the left of the toolbar text.
+ * @slot secondary - Content is placed to the right of the toolbar text.
+ * @slot end - Content is placed to the right of the toolbar text and right to secondary slot if provided.
+ */
+export declare class Toolbar {
+  /**
+   * Background color of the toolbar
+   */
+  color?: 'primary' | 'secondary';
+  render(): any;
+}

package/dist/types/components/toolbar-title/toolbar-title.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @slot - Text of the title.
+ */
+export declare class ToolbarTitle {
+  render(): any;
+}