@roadtrip/components 3.11.0 → 3.11.1

package/dist/roadtrip/p-9c86d7cd.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["badgeCss","Badge","render","colorClass","this","color","undefined","bubbleClass","bubble","h","Host","class","buttonCss","Button","onClick","ev","el","shadowRoot","attachShadow","form","closest","preventDefault","fakeButton","document","createElement","type","buttonType","style","display","appendChild","click","remove","onFocus","roadfocus","emit","roadFocus","onBlur","roadblur","roadBlur","disabled","href","rel","target","TagType","attrs","download","outline","sizeClass","size","expandClass","expand","iconOnlyClass","iconOnly","Object","assign","part","name","colCss","Col","counterCss","Counter","setIsDustbinVisible","valueInput","min","isDustbinVisible","dustbin","increase","inputElement","querySelector","stepUp","parseInt","value","onValueChange","roadIncrease","decrease","roadDustbinClick","stepDown","roadDecrease","checkValue","input","toString","max","onRoadChange","stopPropagation","roadChange","counterIds","setIconsClasses","leftIconClasses","rightIconClasses","componentWillLoad","dataCi","slot","ref","iconCounterLess","step","onKeyUp","drawerDarkCss","drawerLightCss","Drawer","close","onClickBack","event","back","open","isOpen","onBack","handleOpen","openValue","onOpen","addEventListener","onClose","scrollTop","once","onEscape","key","componentDidLoad","querySelectorAll","forEach","item","drawerIsOpenClass","inverseHeaderClass","hasInverseHeader","drawerDelimiterClass","drawerTitle","backIconElement","hasBackIcon","icon","navigationChevron","rotate","backText","closeIconElement","hasCloseIcon","navigationClose","drawerWidthValue","position","drawerWidth","tabindex","role","maxWidth","gridCss","Grid","validateContent","svgContent","div","innerHTML","i","childNodes","length","nodeName","toLowerCase","removeChild","svgElm","firstElementChild","svgClass","getAttribute","setAttribute","trim","isValid","elm","nodeType","attributes","val","isStr","indexOf","roadiconContent","Map","requests","getSvgContent","url","sanitize","req","get","fetch","then","rsp","ok","text","set","Promise","resolve","iconCss","Icon","waitUntilVisible","isVisible","loadIcon","disconnectedCallback","io","disconnect","rootMargin","cb","lazy","window","IntersectionObserver","data","isIntersecting","observe","getUrl","has","ariaLabel","ariaHidden","label","getName","replace","rotateClass","inputCss","debounceEvent","wait","original","_original","debounce","bind","func","timer","args","clearTimeout","setTimeout","Input","onInput","roadinput","roadInput","inputIds","inputId","debounceChanged","roadchange","valueChanged","getValue","labelId","hasValueClass","lessLabelClass","isInvalidClass","error","sizes","id","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","enterKeyHint","enterkeyhint","autoFocus","autofocus","inputMode","inputmode","minLength","minlength","maxLength","maxlength","pattern","placeholder","readOnly","readonly","required","spellcheck","htmlFor","helper","inputGroupCss","InputGroup","_a","errorClass","disabledClass","itemCss","Item","isClickable","button","detail","detailIcon","lines","clickable","showDetail","active","labelCss","Label","listCss","List","rowCss","Row","toolbarCss","Toolbar"],"sources":["src/components/badge/badge.css?tag=road-badge&encapsulation=shadow","src/components/badge/badge.tsx","src/components/button/button.css?tag=road-button&encapsulation=shadow","src/components/button/button.tsx","src/components/col/col.css?tag=road-col&encapsulation=shadow","src/components/col/col.tsx","src/components/counter/counter.css?tag=road-counter&encapsulation=scoped","src/components/counter/counter.tsx","src/components/drawer/drawer.dark.css?tag=road-drawer&mode=dark&encapsulation=shadow","src/components/drawer/drawer.light.css?tag=road-drawer&mode=light&encapsulation=shadow","src/components/drawer/drawer.tsx","src/components/grid/grid.css?tag=road-grid&encapsulation=shadow","src/components/grid/grid.tsx","src/components/icon/validate.ts","src/components/icon/request.ts","src/components/icon/icon.css?tag=road-icon&encapsulation=shadow","src/components/icon/icon.tsx","src/components/input/input.css?tag=road-input&encapsulation=scoped","src/components/input/input.tsx","src/components/input-group/input-group.css?tag=road-input-group&encapsulation=shadow","src/components/input-group/input-group.tsx","src/components/item/item.css?tag=road-item&encapsulation=shadow","src/components/item/item.tsx","src/components/label/label.css?tag=road-label&encapsulation=shadow","src/components/label/label.tsx","src/components/list/list.css?tag=road-list&encapsulation=shadow","src/components/list/list.tsx","src/components/row/row.css?tag=road-row&encapsulation=shadow","src/components/row/row.tsx","src/components/toolbar/toolbar.css?tag=road-toolbar&encapsulation=shadow","src/components/toolbar/toolbar.tsx"],"sourcesContent":["/*\n * Badge\n *\n * Index\n * - Badge\n * - Status\n */\n\n\n/* BADGE\n -------------------- */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1rem;\n  min-height: 1rem;\n  padding: 0 0.3125rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-font-size-10);\n  font-weight: 700;\n  white-space: nowrap;\n  border-radius: 1rem;\n}\n\n/**\n * Badge bubble\n */\n\n:host(.badge-bubble) {\n  min-width: 0.25rem;\n  min-height: 0.25rem;\n  padding: 0;\n}\n\n/* STATUS\n -------------------- */\n\n/**\n * Primary\n */\n\n:host(.badge-primary) {\n  color: var(--road-on-primary);\n  background-color: var(--road-primary);\n}\n\n/**\n * Secondary\n */\n\n:host(.badge-secondary) {\n  color: var(--road-on-secondary);\n  background-color: var(--road-secondary);\n}\n\n/**\n * Accent\n */\n\n:host(.badge-accent) {\n  color: var(--road-on-warning-surface-inverse);\n  background-color: var(--road-warning-surface-inverse);\n}\n\n/**\n * Info\n */\n\n:host(.badge-info) {\n  color: var(--road-on-info-surface-inverse);\n  background-color: var(--road-info-surface-inverse);\n}\n\n/**\n * Success\n */\n\n:host(.badge-success) {\n  color: var(--road-on-success-surface-inverse);\n  background-color: var(--road-success-surface-inverse);\n}\n\n/**\n * Warning\n */\n\n:host(.badge-warning) {\n  color: var(--road-on-warning-surface-inverse);\n  background-color: var(--road-warning-surface-inverse);\n}\n\n/**\n * Danger\n */\n\n:host(.badge-danger) {\n  color: var(--road-on-danger-surface-inverse);\n  background-color: var(--road-danger-surface-inverse);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\nimport { Color } from '../../interface';\n\n/**\n * @slot - Content of the badge, it could be a number or a text.\n */\n\n@Component({\n  tag: 'road-badge',\n  styleUrl: 'badge.css',\n  shadow: true,\n})\nexport class Badge {\n\n  /**\n   * Color of the badge\n   */\n  @Prop() color?: Color = 'secondary';\n\n  /**\n   * if `true` the badge will be displayed has a little bubble\n   */\n  @Prop() bubble?: boolean = false;\n\n  render() {\n    const colorClass = this.color !== undefined ? `badge-${this.color}` : '';\n    const bubbleClass = this.bubble ? 'badge-bubble' : '';\n\n    return (\n      <Host class={`${colorClass} ${bubbleClass}`}>\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n","/*\n * Button\n *\n * Use custom button styles for actions in forms, dialogs, and more\n * with support for multiple sizes, states, and more.\n *\n * Index\n * - Button\n * - Plain\n * - Outline\n * - Disabled\n * - Sizes\n * - Badge\n */\n\n\n/**\n * @prop --border-radius: Border radius of the button\n * @prop --font-size: Font size of the text button\n * @prop --margin-bottom: Bottom margin of the button\n * @prop --padding-start: Left padding  of the button\n * @prop --padding-end: Right padding of the button\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n  --border-radius: 0.25rem;\n  --font-size: var(--road-button-medium);\n  --margin-bottom: 1rem;\n  --padding-start: 1.5rem;\n  --padding-end: 1.5rem;\n\n  box-sizing: border-box;\n  display: inline-flex;\n  display: -webkit-inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 3rem;\n  padding: 0;\n  margin-bottom: var(--margin-bottom);\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--font-size);\n  font-weight: 700;\n  line-height: 1.375;\n  color: var(--road-grey-10);\n  text-decoration: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--border-radius);\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n\n/**\n * Fix states\n */\n\n:host(:hover) {\n  text-decoration: none;\n}\n\n:host(.focus-visible) {\n  outline: 0;\n}\n\n/**\n * Native button\n */\n\n.button-native {\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: 0 var(--padding-end) 0 var(--padding-start);\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  outline: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* PLAIN\n -------------------- */\n\n/**\n * Default\n */\n\n:host(.btn-default:not([disabled]).focus-visible) {\n  background: var(--road-grey-80);\n}\n\n/**\n * Primary\n */\n\n:host(.btn-primary) {\n  color: var(--road-on-button-primary);\n  background: var(--road-button-primary);\n}\n\n:host(.btn-primary) ::slotted(road-icon) {\n  color: var(--road-on-button-primary);\n}\n\n:host(.btn-primary:not([disabled]):hover),\n:host(.btn-primary:not([disabled]).focus-visible) {\n  background: var(--road-button-primary-variant);\n}\n\n/**\n * Secondary\n */\n\n:host(.btn-secondary) {\n  color: var(--road-on-button-secondary);\n  background: var(--road-button-secondary);\n}\n\n:host(.btn-secondary) ::slotted(road-icon) {\n  color: var(--road-on-button-secondary);\n}\n\n:host(.btn-secondary:not([disabled]):hover),\n:host(.btn-secondary:not([disabled]).focus-visible) {\n  background: var(--road-button-secondary-variant);\n}\n\n/**\n * Link\n */\n\n:host(.btn-link) {\n  font-weight: 400;\n  color: var(--road-link-primary);\n  text-decoration: underline;\n  background: transparent;\n}\n\n:host(.btn-link:not([disabled]):hover),\n:host(.btn-link:not([disabled]).focus-visible) {\n  color: var(--road-primary-30);\n}\n\n/* OUTLINE\n -------------------- */\n\n:host(.btn-outline-primary),\n:host(.btn-outline-secondary),\n:host(.btn-outline-default) {\n  background: transparent;\n}\n\n/**\n * Outline default\n */\n\n:host(.btn-outline-default) {\n  color: var(--road-on-surface-weak);\n  background: var(--road-surface);\n  border-color: var(--road-outline);\n}\n\n:host(.btn-outline-default) ::slotted(road-icon) {\n  color: var(--road-on-surface-weak);\n}\n\n:host(.btn-outline-default:hover),\n:host(.btn-outline-default.focus-visible) {\n  background: var(--road-grey-80);\n}\n\n/**\n * Ghost\n */\n\n\n:host(.btn-ghost) ::slotted(road-icon) {\n  color: var(--road-icon);\n}\n\n:host(.btn-ghost:hover),\n:host(.btn-ghost.focus-visible) {\n  background: var(--road-button-ghost-variant);\n}\n\n/**\n * Outline primary\n */\n\n:host(.btn-outline-primary) {\n  color: var(--road-button-primary);\n  border-color: var(--road-button-primary);\n}\n\n:host(.btn-outline-primary) ::slotted(road-icon) {\n  color: var(--road-button-primary);\n}\n\n:host(.btn-outline-primary:hover),\n:host(.btn-outline-primary.focus-visible) {\n  background: var(--road-button-tertiary-variant);\n}\n\n/**\n * Outline secondary\n */\n\n:host(.btn-outline-secondary) {\n  color: var(--road-button-secondary);\n  border-color: var(--road-button-secondary);\n}\n\n:host(.btn-outline-secondary) ::slotted(road-icon) {\n  color: var(--road-button-secondary);\n}\n\n:host(.btn-outline-secondary:hover),\n:host(.btn-outline-secondary.focus-visible) {\n  background: var(--road-button-tertiary-variant);\n}\n\n/* DISABLED\n -------------------- */\n\n:host([aria-disabled]) {\n  color: var(--road-on-surface-disabled);\n  pointer-events: none;\n  background-color: var(--road-surface-disabled);\n}\n\n:host([aria-disabled]) ::slotted(road-icon){\n  color: var(--road-on-surface-disabled);\n}\n\n.button-native:disabled {\n  cursor: not-allowed;\n}\n\n/* SIZES\n -------------------- */\n\n::slotted([slot=\"start\"]) {\n  margin-right: 0.5rem;\n}\n\n::slotted([slot=\"end\"]) {\n  margin-left: 0.5rem;\n}\n\n/**\n * Extra Large\n */\n\n:host(.btn-xl) {\n  height: 3.5rem;\n}\n\n:host(.btn-xl) ::slotted(road-icon) {\n  width: 2rem;\n  height: 2rem;\n}\n\n:host(.btn-icon.btn-xl) {\n  width: 56px;\n}\n\n\n/**\n * Large\n */\n\n:host(.btn-lg) {\n  height: 3rem;\n}\n\n:host(.btn-lg) ::slotted(road-icon) {\n  width: 2rem;\n  height: 2rem;\n}\n\n\n:host(.btn-icon.btn-lg) {\n  width: 48px;\n}\n\n/**\n * Medium\n */\n\n:host(.btn-md) {\n  --font-size: var(--road-font-size-14);\n\n  height: 2.5rem;\n}\n\n:host(.btn-md) ::slotted(road-icon) {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n:host(.btn-icon.btn-md) {\n  width: 40px;\n}\n\n/**\n * Small\n */\n\n:host(.btn-sm) {\n  --font-size: var(--road-font-size-14);\n\n  height: 2rem;\n}\n\n:host(.btn-sm) ::slotted(road-icon) {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n:host(.btn-icon.btn-sm) {\n  width: 32px;\n}\n\n/**\n * Button block\n */\n\n:host(.btn-block) {\n  width: 100%;\n}\n\n:host(.btn-icon) .button-native{\n  padding: 0;\n}\n\n\n/* BADGE\n -------------------- */\n\n::slotted(road-badge) {\n  position: absolute;\n  top: 4px;\n  left: calc(50% + 0.375rem);\n  box-sizing: border-box;\n  height: auto;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the button.\n * ex if onlyIcon `<road-icon name=\"shopping-cart-add\"></road-icon>`\n * @slot start - Left content of the button text, usually for icon.\n * @slot end - Right content of the button text, usually icon.\n *\n * @part native - The native HTML button or anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class Button {\n\n  @Element() el!: HTMLRoadButtonElement;\n\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color?: 'primary' | 'secondary' | 'ghost' |'default' = 'default';\n\n  /**\n    * The button size.\n    */\n  @Prop({ reflect: true }) size?: 'sm' | 'md' | 'lg' | 'xl' = 'lg';\n\n  /**\n   * The type of the button.\n   */\n  @Prop() buttonType: 'submit' | 'reset' | 'button' = 'button';\n\n  /**\n   * If `true`, display only an icon in the button.\n   */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the button.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Set to `true` for a full-width button.\n   */\n  @Prop({ reflect: true }) expand: boolean = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n   @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href?: string;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target?: string;\n\n  /**\n   * Set to `false` for a ghost button, set to `true` for a default outline button\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * Emitted when the button has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  private onClick = (ev: Event) => {\n    if (this.el.shadowRoot && (this.el as any).attachShadow) {\n      // this button wants to specifically submit a form\n      // climb up the dom to see if we're in a <form>\n      // and if so, then use JS to submit it\n      const form = this.el.closest('form');\n      if (form) {\n        ev.preventDefault();\n\n        const fakeButton = document.createElement('button');\n        fakeButton.type = this.buttonType;\n        fakeButton.style.display = 'none';\n        form.appendChild(fakeButton);\n        fakeButton.click();\n        fakeButton.remove();\n      }\n    }\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  render() {\n    const { buttonType, disabled, href, rel, target, color } = this;\n    const TagType = this.href === undefined ? 'button' : 'a' as any;\n    const attrs = (TagType === 'button')\n      ? { type: buttonType }\n      : {\n        download: this.download,\n        href,\n        rel,\n        target,\n      };\n    const colorClass = this.outline ? `btn-outline-${color}` : `btn-${color}`;\n    const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n    const expandClass = this.expand ? 'btn-block' : '';\n    const iconOnlyClass = this.iconOnly ? 'btn-icon' : '';\n\n    return (\n      <Host\n        class={`${colorClass} ${sizeClass} ${expandClass} ${iconOnlyClass}`}\n        onClick={this.onClick}\n        aria-disabled={disabled ? 'true' : null}\n      >\n        <TagType\n          {...attrs}\n          class=\"button-native\"\n          part=\"native\"\n          disabled={disabled}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <slot name=\"start\"/>\n          <slot/>\n          <slot name=\"end\"/>\n        </TagType>\n      </Host>\n    );\n  }\n}",":host {\n  position: relative;\n  flex-basis: 0;\n  flex-grow: 1;\n  width: 100%;\n  max-width: 100%;\n  min-height: 1px;\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n:host(.col-auto) {\n  flex: 0 0 auto;\n  width: auto;\n  max-width: none;\n}\n\n:host(.col-1) {\n  flex: 0 0 8.3333%;\n  max-width: 8.3333%;\n}\n\n:host(.col-2) {\n  flex: 0 0 16.6667%;\n  max-width: 16.6667%;\n}\n\n:host(.col-3) {\n  flex: 0 0 25%;\n  max-width: 25%;\n}\n\n:host(.col-4) {\n  flex: 0 0 33.3333%;\n  max-width: 33.3333%;\n}\n\n:host(.col-5) {\n  flex: 0 0 41.6667%;\n  max-width: 41.6667%;\n}\n\n:host(.col-6) {\n  flex: 0 0 50%;\n  max-width: 50%;\n}\n\n:host(.col-7) {\n  flex: 0 0 58.3333%;\n  max-width: 58.3333%;\n}\n\n:host(.col-8) {\n  flex: 0 0 66.6667%;\n  max-width: 66.6667%;\n}\n\n:host(.col-9) {\n  flex: 0 0 75%;\n  max-width: 75%;\n}\n\n:host(.col-10) {\n  flex: 0 0 83.3333%;\n  max-width: 83.3333%;\n}\n\n:host(.col-11) {\n  flex: 0 0 91.6667%;\n  max-width: 91.6667%;\n}\n\n:host(.col-12) {\n  flex: 0 0 100%;\n  max-width: 100%;\n}\n\n:host(.offset-1) {\n  margin-left: 8.3333%;\n}\n\n:host(.offset-2) {\n  margin-left: 16.6667%;\n}\n\n:host(.offset-3) {\n  margin-left: 25%;\n}\n\n:host(.offset-4) {\n  margin-left: 33.3333%;\n}\n\n:host(.offset-5) {\n  margin-left: 41.6667%;\n}\n\n:host(.offset-6) {\n  margin-left: 50%;\n}\n\n:host(.offset-7) {\n  margin-left: 58.3333%;\n}\n\n:host(.offset-8) {\n  margin-left: 66.6667%;\n}\n\n:host(.offset-9) {\n  margin-left: 75%;\n}\n\n:host(.offset-10) {\n  margin-left: 83.3333%;\n}\n\n:host(.offset-11) {\n  margin-left: 91.6667%;\n}\n\n@media (min-width: 576px) {\n\n  :host(.col-sm) {\n    flex-basis: 0;\n    flex-grow: 1;\n    max-width: 100%;\n  }\n\n  :host(.col-sm-auto) {\n    flex: 0 0 auto;\n    width: auto;\n    max-width: none;\n  }\n\n  :host(.col-sm-1) {\n    flex: 0 0 8.3333%;\n    max-width: 8.3333%;\n  }\n\n  :host(.col-sm-2) {\n    flex: 0 0 16.6667%;\n    max-width: 16.6667%;\n  }\n\n  :host(.col-sm-3) {\n    flex: 0 0 25%;\n    max-width: 25%;\n  }\n\n  :host(.col-sm-4) {\n    flex: 0 0 33.3333%;\n    max-width: 33.3333%;\n  }\n\n  :host(.col-sm-5) {\n    flex: 0 0 41.6667%;\n    max-width: 41.6667%;\n  }\n\n  :host(.col-sm-6) {\n    flex: 0 0 50%;\n    max-width: 50%;\n  }\n\n  :host(.col-sm-7) {\n    flex: 0 0 58.3333%;\n    max-width: 58.3333%;\n  }\n\n  :host(.col-sm-8) {\n    flex: 0 0 66.6667%;\n    max-width: 66.6667%;\n  }\n\n  :host(.col-sm-9) {\n    flex: 0 0 75%;\n    max-width: 75%;\n  }\n\n  :host(.col-sm-10) {\n    flex: 0 0 83.3333%;\n    max-width: 83.3333%;\n  }\n\n  :host(.col-sm-11) {\n    flex: 0 0 91.6667%;\n    max-width: 91.6667%;\n  }\n\n  :host(.col-sm-12) {\n    flex: 0 0 100%;\n    max-width: 100%;\n  }\n\n  :host(.offset-sm-0) {\n    margin-left: 0;\n  }\n\n  :host(.offset-sm-1) {\n    margin-left: 8.3333%;\n  }\n\n  :host(.offset-sm-2) {\n    margin-left: 16.6667%;\n  }\n\n  :host(.offset-sm-3) {\n    margin-left: 25%;\n  }\n\n  :host(.offset-sm-4) {\n    margin-left: 33.3333%;\n  }\n\n  :host(.offset-sm-5) {\n    margin-left: 41.6667%;\n  }\n\n  :host(.offset-sm-6) {\n    margin-left: 50%;\n  }\n\n  :host(.offset-sm-7) {\n    margin-left: 58.3333%;\n  }\n\n  :host(.offset-sm-8) {\n    margin-left: 66.6667%;\n  }\n\n  :host(.offset-sm-9) {\n    margin-left: 75%;\n  }\n\n  :host(.offset-sm-10) {\n    margin-left: 83.3333%;\n  }\n\n  :host(.offset-sm-11) {\n    margin-left: 91.6667%;\n  }\n}\n\n@media (min-width: 768px) {\n\n  :host(.col-md) {\n    flex-basis: 0;\n    flex-grow: 1;\n    max-width: 100%;\n  }\n\n  :host(.col-md-auto) {\n    flex: 0 0 auto;\n    width: auto;\n    max-width: none;\n  }\n\n  :host(.col-md-1) {\n    flex: 0 0 8.3333%;\n    max-width: 8.3333%;\n  }\n\n  :host(.col-md-2) {\n    flex: 0 0 16.6667%;\n    max-width: 16.6667%;\n  }\n\n  :host(.col-md-3) {\n    flex: 0 0 25%;\n    max-width: 25%;\n  }\n\n  :host(.col-md-4) {\n    flex: 0 0 33.3333%;\n    max-width: 33.3333%;\n  }\n\n  :host(.col-md-5) {\n    flex: 0 0 41.6667%;\n    max-width: 41.6667%;\n  }\n\n  :host(.col-md-6) {\n    flex: 0 0 50%;\n    max-width: 50%;\n  }\n\n  :host(.col-md-7) {\n    flex: 0 0 58.3333%;\n    max-width: 58.3333%;\n  }\n\n  :host(.col-md-8) {\n    flex: 0 0 66.6667%;\n    max-width: 66.6667%;\n  }\n\n  :host(.col-md-9) {\n    flex: 0 0 75%;\n    max-width: 75%;\n  }\n\n  :host(.col-md-10) {\n    flex: 0 0 83.3333%;\n    max-width: 83.3333%;\n  }\n\n  :host(.col-md-11) {\n    flex: 0 0 91.6667%;\n    max-width: 91.6667%;\n  }\n\n  :host(.col-md-12) {\n    flex: 0 0 100%;\n    max-width: 100%;\n  }\n\n  :host(.offset-md-0) {\n    margin-left: 0;\n  }\n\n  :host(.offset-md-1) {\n    margin-left: 8.3333%;\n  }\n\n  :host(.offset-md-2) {\n    margin-left: 16.6667%;\n  }\n\n  :host(.offset-md-3) {\n    margin-left: 25%;\n  }\n\n  :host(.offset-md-4) {\n    margin-left: 33.3333%;\n  }\n\n  :host(.offset-md-5) {\n    margin-left: 41.6667%;\n  }\n\n  :host(.offset-md-6) {\n    margin-left: 50%;\n  }\n\n  :host(.offset-md-7) {\n    margin-left: 58.3333%;\n  }\n\n  :host(.offset-md-8) {\n    margin-left: 66.6667%;\n  }\n\n  :host(.offset-md-9) {\n    margin-left: 75%;\n  }\n\n  :host(.offset-md-10) {\n    margin-left: 83.3333%;\n  }\n\n  :host(.offset-md-11) {\n    margin-left: 91.6667%;\n  }\n}\n\n@media (min-width: 992px) {\n\n  :host(.col-lg) {\n    flex-basis: 0;\n    flex-grow: 1;\n    max-width: 100%;\n  }\n\n  :host(.col-lg-auto) {\n    flex: 0 0 auto;\n    width: auto;\n    max-width: none;\n  }\n\n  :host(.col-lg-1) {\n    flex: 0 0 8.3333%;\n    max-width: 8.3333%;\n  }\n\n  :host(.col-lg-2) {\n    flex: 0 0 16.6667%;\n    max-width: 16.6667%;\n  }\n\n  :host(.col-lg-3) {\n    flex: 0 0 25%;\n    max-width: 25%;\n  }\n\n  :host(.col-lg-4) {\n    flex: 0 0 33.3333%;\n    max-width: 33.3333%;\n  }\n\n  :host(.col-lg-5) {\n    flex: 0 0 41.6667%;\n    max-width: 41.6667%;\n  }\n\n  :host(.col-lg-6) {\n    flex: 0 0 50%;\n    max-width: 50%;\n  }\n\n  :host(.col-lg-7) {\n    flex: 0 0 58.3333%;\n    max-width: 58.3333%;\n  }\n\n  :host(.col-lg-8) {\n    flex: 0 0 66.6667%;\n    max-width: 66.6667%;\n  }\n\n  :host(.col-lg-9) {\n    flex: 0 0 75%;\n    max-width: 75%;\n  }\n\n  :host(.col-lg-10) {\n    flex: 0 0 83.3333%;\n    max-width: 83.3333%;\n  }\n\n  :host(.col-lg-11) {\n    flex: 0 0 91.6667%;\n    max-width: 91.6667%;\n  }\n\n  :host(.col-lg-12) {\n    flex: 0 0 100%;\n    max-width: 100%;\n  }\n\n  :host(.offset-lg-0) {\n    margin-left: 0;\n  }\n\n  :host(.offset-lg-1) {\n    margin-left: 8.3333%;\n  }\n\n  :host(.offset-lg-2) {\n    margin-left: 16.6667%;\n  }\n\n  :host(.offset-lg-3) {\n    margin-left: 25%;\n  }\n\n  :host(.offset-lg-4) {\n    margin-left: 33.3333%;\n  }\n\n  :host(.offset-lg-5) {\n    margin-left: 41.6667%;\n  }\n\n  :host(.offset-lg-6) {\n    margin-left: 50%;\n  }\n\n  :host(.offset-lg-7) {\n    margin-left: 58.3333%;\n  }\n\n  :host(.offset-lg-8) {\n    margin-left: 66.6667%;\n  }\n\n  :host(.offset-lg-9) {\n    margin-left: 75%;\n  }\n\n  :host(.offset-lg-10) {\n    margin-left: 83.3333%;\n  }\n\n  :host(.offset-lg-11) {\n    margin-left: 91.6667%;\n  }\n}\n\n@media (min-width: 1200px) {\n\n  :host(.col-xl) {\n    flex-basis: 0;\n    flex-grow: 1;\n    max-width: 100%;\n  }\n\n  :host(.col-xl-auto) {\n    flex: 0 0 auto;\n    width: auto;\n    max-width: none;\n  }\n\n  :host(.col-xl-1) {\n    flex: 0 0 8.3333%;\n    max-width: 8.3333%;\n  }\n\n  :host(.col-xl-2) {\n    flex: 0 0 16.6667%;\n    max-width: 16.6667%;\n  }\n\n  :host(.col-xl-3) {\n    flex: 0 0 25%;\n    max-width: 25%;\n  }\n\n  :host(.col-xl-4) {\n    flex: 0 0 33.3333%;\n    max-width: 33.3333%;\n  }\n\n  :host(.col-xl-5) {\n    flex: 0 0 41.6667%;\n    max-width: 41.6667%;\n  }\n\n  :host(.col-xl-6) {\n    flex: 0 0 50%;\n    max-width: 50%;\n  }\n\n  :host(.col-xl-7) {\n    flex: 0 0 58.3333%;\n    max-width: 58.3333%;\n  }\n\n  :host(.col-xl-8) {\n    flex: 0 0 66.6667%;\n    max-width: 66.6667%;\n  }\n\n  :host(.col-xl-9) {\n    flex: 0 0 75%;\n    max-width: 75%;\n  }\n\n  :host(.col-xl-10) {\n    flex: 0 0 83.3333%;\n    max-width: 83.3333%;\n  }\n\n  :host(.col-xl-11) {\n    flex: 0 0 91.6667%;\n    max-width: 91.6667%;\n  }\n\n  :host(.col-xl-12) {\n    flex: 0 0 100%;\n    max-width: 100%;\n  }\n\n  :host(.offset-xl-0) {\n    margin-left: 0;\n  }\n\n  :host(.offset-xl-1) {\n    margin-left: 8.3333%;\n  }\n\n  :host(.offset-xl-2) {\n    margin-left: 16.6667%;\n  }\n\n  :host(.offset-xl-3) {\n    margin-left: 25%;\n  }\n\n  :host(.offset-xl-4) {\n    margin-left: 33.3333%;\n  }\n\n  :host(.offset-xl-5) {\n    margin-left: 41.6667%;\n  }\n\n  :host(.offset-xl-6) {\n    margin-left: 50%;\n  }\n\n  :host(.offset-xl-7) {\n    margin-left: 58.3333%;\n  }\n\n  :host(.offset-xl-8) {\n    margin-left: 66.6667%;\n  }\n\n  :host(.offset-xl-9) {\n    margin-left: 75%;\n  }\n\n  :host(.offset-xl-10) {\n    margin-left: 83.3333%;\n  }\n\n  :host(.offset-xl-11) {\n    margin-left: 91.6667%;\n  }\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @slot  - Content of the column.\n */\n\n@Component({\n  tag: 'road-col',\n  styleUrl: 'col.css',\n  shadow: true,\n})\nexport class Col {\n\n  render() {\n    return (\n      <slot/>\n    );\n  }\n\n}\n","/*\n * Counter\n *\n * Index\n * - Input\n * - Buttons\n * - Sizes\n */\n\n/**\n * @prop --counter-margin-bottom: margin bottom of the field\n */\n\n:host {\n  position: relative;\n  z-index: 0;\n  display: block;\n}\n\n/* INPUT\n -------------------- */\n\nroad-input {\n  --input-text-align: center;\n  --border-radius: 0;\n  --margin-bottom: 0;\n}\n\n/* BUTTONS\n -------------------- */\n\nroad-button {\n  width: 3rem;\n  font-size: var(--road-font-size-24);\n  line-height: 1.4;\n  background: var(--road-surface);\n  border: 1px solid var(--road-button-tertiary-outline);\n}\n\nroad-button:hover,\nroad-button:focus {\n  background: var(--road-button-tertiary-variant);\n}\n\nroad-button road-icon{\n  display: flex;\n  fill: var(--road-primary);\n}\n\n.disabled {\n  margin-right: -1px;\n  margin-left: -1px;\n  pointer-events: none;\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  border: 1px solid var(--road-on-surface-disabled);\n  opacity: inherit;\n}\n\n.disabled:focus {\n  background: var(--road-disabled);\n}\n\n.disabled road-icon {\n  fill: var(--road-grey-50);\n}\n\n\n/* SIZES\n -------------------- */\n\nroad-button.btn-md{\n  width: 2.5rem;\n}\n\nroad-button.btn-sm{\n  width: 2rem;\n}\n\n.counter-md {\n  height: 2.5rem;\n}\n\n.counter-sm {\n  height: 2rem;\n}\n\n.counter-md road-input {\n  --height: 2.5rem;\n}\n\n.counter-md road-button {\n  min-width: 2.5rem;\n}\n\n.counter-sm road-input {\n  --height: 2rem;\n}\n\n.counter-sm road-button {\n  min-width: 2rem;\n}\n","import { Component, h, Prop, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'road-counter',\n  styleUrl: 'counter.css',\n  scoped: true,\n})\nexport class Counter {\n\n  @Element() el!: HTMLRoadCounterElement;\n\n  iconCounterLess!: HTMLRoadIconElement;\n\n  inputElement!: HTMLRoadInputElement;\n\n  @State() leftIconClasses: string = \"\";\n\n  @State() rightIconClasses: string = \"\";\n\n  @State() isDustbinVisible: boolean = false;\n\n  /**\n   * The id of counter\n   */\n  @Prop() inputId: string = `road-counter-${counterIds++}`;\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max?: number;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set.\n   * Possible values are: `\"any\"` or a positive floating point number.\n   */\n  @Prop() step?: string;\n\n  /**\n   * The value of the counter.\n   */\n  @Prop() value: number = 1;\n\n  /**\n   * The size of the counter.\n   */\n  @Prop() size?: 'sm' | 'md' | 'lg' = \"lg\";\n\n  /**\n  * Set to `true` to add the dustbin icon if the value is equal to the min.\n  */\n  @Prop() dustbin: boolean = false;\n\n  /**\n   * Emitted when the plus button is clicked\n   */\n  @Event() roadIncrease!: EventEmitter<{\n    value: number | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the minus button is clicked\n   */\n  @Event() roadDecrease!: EventEmitter<{\n    value: number | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the minus button is clicked\n   */\n  @Event() roadChange!: EventEmitter<{\n    value: number | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the dustbin is clicked\n  */\n  @Event() roadDustbinClick!: EventEmitter<void>;\n\n  @Watch('value')\n  private onValueChange(valueInput: number) {\n    this.setIsDustbinVisible(valueInput);\n    this.setIconsClasses(valueInput);\n  }\n\n  private setIconsClasses(valueInput?: number) {\n    valueInput = valueInput ?? parseInt(this.inputElement.querySelector('input')!.value as string);\n\n    this.leftIconClasses = valueInput <= this.min && !this.dustbin ? \"disabled\" : \"\";\n    this.rightIconClasses = this.max && valueInput >= this.max ? \"disabled\" : \"\";\n  }\n\n  private setIsDustbinVisible = (valueInput: number) => {\n    if (valueInput > this.min) {\n      this.isDustbinVisible = false;\n    } else if (this.dustbin) {\n      this.isDustbinVisible = true;\n    }\n    else {\n      this.isDustbinVisible = false;\n    }\n  }\n\n  private increase = () => {\n    (this.inputElement as unknown as HTMLInputElement).querySelector('input')!.stepUp();\n    let valueInput = parseInt(this.inputElement.querySelector('input')!.value as string);\n    if(!valueInput) {\n      valueInput = this.min\n    };\n    this.onValueChange(valueInput);\n    this.roadIncrease.emit({ value: valueInput });\n  };\n\n  private decrease = () => {\n    if(this.isDustbinVisible){\n      this.roadDustbinClick.emit();\n      return;\n    }\n\n    (this.inputElement as unknown as HTMLInputElement).querySelector('input')!.stepDown();\n\n    let valueInput = parseInt(this.inputElement.querySelector('input')!.value as string);\n    if(!valueInput) {\n      valueInput = this.min\n    };\n    this.onValueChange(valueInput);\n\n    this.roadDecrease.emit({ value: valueInput });\n  };\n\n  private checkValue = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    const value = input.value && parseInt(input.value)\n\n    if (value == null || value === \"\") return;\n\n    if (value < this.min) {\n      input.value = this.min.toString()\n    }\n    else if (this.max && value > this.max) {\n      input.value = this.max.toString()\n    }\n\n    this.onValueChange(parseInt(input.value));\n  }\n\n  private onRoadChange = (ev: Event) => {\n    ev.stopPropagation();\n    const input = ev.target as HTMLInputElement;\n    const value = input.value && parseInt(input.value)\n    if (value !== null && value !== \"\") {\n      if (value < this.min) {\n        this.roadChange.emit({ value: this.min });\n      }\n      else if (this.max && value > this.max) {\n        this.roadChange.emit({ value: this.max });\n      }\n      else {\n        this.roadChange.emit({ value: parseInt(input.value) });\n      }\n    }\n    else {\n      this.roadChange.emit({ value: null });\n    }\n  };\n\n  componentWillLoad() {\n    this.onValueChange(this.value);\n  }\n  render() {\n\n    const dataCi = this.isDustbinVisible ? \"road-dustbin\" : \"\";\n\n\n    return (\n      <road-input-group\n        class={this.size && `counter-${this.size}`}\n      >\n        <road-button\n          slot=\"prepend\"\n          size={this.size}\n          onClick={this.decrease}\n          class={this.leftIconClasses}\n          data-cy=\"road-decrease\"\n        >\n          <road-icon\n            name={this.isDustbinVisible ? \"delete-forever\" : \"navigation-add-less\"}\n            ref={(el) => this.iconCounterLess = el as HTMLRoadIconElement}\n            size={this.size}\n            data-cy={dataCi}\n          />\n        </road-button>\n        <road-input\n          ref={(el) => this.inputElement = el as HTMLRoadInputElement}\n          type=\"number\"\n          min={this.min.toString()}\n          max={(this.max && this.max.toString()) as string}\n          step={this.step}\n          value={this.value}\n          onRoadChange={this.onRoadChange}\n          onKeyUp={this.checkValue}\n          data-cy=\"road-input-counter\"\n        />\n        <road-button\n          slot=\"append\"\n          size={this.size}\n          onClick={this.increase}\n          class={this.rightIconClasses}\n          data-cy=\"road-increase\"\n        >\n          <road-icon\n            name=\"navigation-add-more\"\n            size={this.size}\n          />\n        </road-button>\n      </road-input-group>\n    );\n  }\n}\n\nlet counterIds = 0;\n","@import \"./drawer.css\";\n\n:host {\n  --background: var(--road-grey-999);\n  --color: var(--road-grey-000);\n  --header-icon: var(--road-grey-000);\n}\n","@import \"./drawer.css\";\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host, Watch } from '@stencil/core';\nimport { navigationClose, navigationChevron } from '../../../icons';\n\n/**\n * @slot  - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n *\n * @virtualProp {\"light\" | \"dark\"} mode - The mode determines which theme styles to use (light / dark).\n */\n\n@Component({\n  tag: 'road-drawer',\n  styleUrls: {\n    light: 'drawer.light.css',\n    dark: 'drawer.dark.css',\n  },\n  shadow: true,\n})\nexport class Drawer {\n\n  /**\n   * Current reference of the drawer\n   */\n  @Element() el!: HTMLRoadDrawerElement;\n\n  /**\n   * Set isOpen property to true to open the drawer\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * position of the drawer. e.g. left, right, bottom\n   */\n  @Prop() position: string = 'left';\n\n  /**\n   * Width of the drawer\n   */\n  @Prop() drawerWidth: number = 480;\n\n  /**\n   * Inverse header colors\n   */\n  @Prop() hasInverseHeader: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() hasBackIcon: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() backText?: string;\n\n  /**\n   * Title of the drawer in the header bar\n   */\n  @Prop() drawerTitle?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Indicate when opening the drawer\n   */\n  @Event({ eventName: 'open' }) onOpen!: EventEmitter<void>;\n\n  /**\n   * Indicate when closing the drawer\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Indicate when return to previous state of the drawer content\n   */\n  @Event({ eventName: 'back' }) onBack!: EventEmitter<void>;\n\n  /**\n   * Open the drawer\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the drawer\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  /**\n   * Return to previous state of the drawer content\n   */\n  @Method()\n  async back() {\n    this.onBack.emit();\n  }\n\n  @Watch('isOpen')\n  handleOpen(openValue: boolean) {\n    if(openValue === true) {\n      this.onOpen.emit();\n    } else {\n      this.el.addEventListener('transitionend', () => {\n        this.onClose.emit();\n        this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n      }, { once: true});\n    }\n  }\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClickBack = (event: MouseEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    this.back();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if (event.key === 'Escape' || event.key === \"Esc\") {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n  }\n\n  render() {\n    const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n    const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\n    const drawerDelimiterClass = this.drawerTitle !== undefined && !this.hasInverseHeader ? 'drawer-delimiter' : '';\n    const backIconElement = this.hasBackIcon ? <button type=\"button\" class=\"drawer-action\" aria-label=\"Back\" onClick={this.onClickBack}><road-icon icon={navigationChevron} rotate=\"180\"></road-icon>{this.backText}</button> : '';\n    const closeIconElement = this.hasCloseIcon ? <button type=\"button\" class=\"drawer-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button> : '';\n    const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';\n\n    return (\n      <Host class={`${drawerIsOpenClass} drawer-${this.position}`} tabindex=\"-1\" role=\"dialog\">\n        <div class=\"drawer-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n        <div class=\"drawer-dialog\" style={{ maxWidth: `${drawerWidthValue}` }} role=\"document\" tabindex=\"0\">\n          <div class=\"drawer-content\">\n            <header class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}>\n              {backIconElement}\n              {this.drawerTitle !== undefined ? <h2 class=\"drawer-title\">{this.drawerTitle}</h2> : <div class=\"drawer-title\"><slot name=\"title\" /></div>}\n              {closeIconElement}\n            </header>\n            <div class=\"drawer-body\">\n              <slot/>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}",":host {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-right: 8px;\n  padding-left: 8px;\n  margin-right: auto;\n  margin-left: auto;\n}\n\n\n@media (min-width: 768px) {\n\n  :host {\n    padding-right: 24px;\n    padding-left: 24px;\n  }\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @slot  - Content to add row components.\n */\n\n@Component({\n  tag: 'road-grid',\n  styleUrl: 'grid.css',\n  shadow: true,\n})\nexport class Grid {\n\n  render() {\n    return (\n      <slot/>\n    );\n  }\n\n}\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string) => {\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  // setup this way to ensure it works on our buddy IE\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n    const svgClass = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as any)) {\n      return div.innerHTML;\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const val = elm.attributes[i].value;\n      if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as any)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n","import { validateContent } from './validate';\n\nexport const roadiconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string, sanitize: boolean) => {\n  // see if we already have a request for this url\n  let req = requests.get(url);\n\n  if (!req) {\n    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {\n      // we don't already have a request\n      // @ts-ignore\n      req = fetch(url).then((rsp) => {\n        if (rsp.ok) {\n          return rsp.text().then((svgContent) => {\n            if (svgContent && sanitize !== false) {\n              svgContent = validateContent(svgContent);\n            }\n            roadiconContent.set(url, svgContent || '');\n          });\n        }\n        roadiconContent.set(url, '');\n      });\n\n      // cache for the same requests\n      requests.set(url, req);\n    } else {\n      // set to empty for ssr scenarios and resolve promise\n      roadiconContent.set(url, '');\n      return Promise.resolve();\n    }\n  }\n\n  return req;\n};\n","/*\n * Icon\n *\n * Index\n * - Sizes\n * - Colors\n * - Rotation\n */\n\n:host {\n  box-sizing: content-box;\n  display: inline-block;\n  color: var(--road-icon);\n  transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  fill: currentColor;\n  contain: strict;\n}\n\n:host svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.icon-sm) {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n:host(.icon-md) {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n:host(.icon-lg) {\n  width: 2rem;\n  height: 2rem;\n}\n\n:host(.icon-3x) {\n  width: 3rem;\n  height: 3rem;\n}\n\n:host(.icon-4x) {\n  width: 4rem;\n  height: 4rem;\n}\n\n/* COLORS\n -------------------- */\n\n:host(.icon-primary) {\n  color: var(--road-primary-50);\n  fill: currentColor;\n}\n\n:host(.icon-secondary) {\n  color: var(--road-secondary-50);\n  fill: currentColor;\n}\n\n:host(.icon-accent) {\n  color: var(--road-secondary-50);\n  fill: currentColor;\n}\n\n:host(.icon-info) {\n  color: var(--road-info-default);\n  fill: currentColor;\n}\n\n:host(.icon-success) {\n  color: var(--road-success-default);\n  fill: currentColor;\n}\n\n:host(.icon-warning) {\n  color: var(--road-warning-default);\n  fill: currentColor;\n}\n\n:host(.icon-danger) {\n  color: var(--road-danger-default);\n  fill: currentColor;\n}\n\n:host(.icon-default) {\n  color: var(--road-icon);\n  fill: currentColor;\n}\n\n:host(.icon-white) {\n  color: var(--road-icon-inverse);\n  fill: currentColor;\n}\n\n/* ROTATION\n -------------------- */\n\n:host(.icon-rotate-90) {\n  transform: rotate(90deg);\n}\n\n:host(.icon-rotate-180) {\n  transform: rotate(180deg);\n}\n\n:host(.icon-rotate-270) {\n  transform: rotate(270deg);\n}\n","import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getSvgContent, roadiconContent } from './request';\nimport { getName, getUrl } from './utils';\n\nimport { Color } from '../../interface';\n\n@Component({\n  tag: 'road-icon',\n  assetsDirs: ['svg'],\n  styleUrl: 'icon.css',\n  shadow: true,\n})\nexport class Icon {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLRoadIconElement;\n\n  @State() private svgContent?: string;\n\n  @State() private isVisible = false;\n\n  /**\n   * Color of the icon\n   */\n  @Prop() color?: Color | 'white';\n\n  /**\n   * Specifies the label to use for accessibility. Defaults to the icon name.\n   */\n  @Prop({ mutable: true, reflect: true }) ariaLabel?: string;\n\n  /**\n   * Set the icon to hidden, respectively `true`, to remove it from the accessibility tree.\n   */\n  @Prop({ reflect: true }) ariaHidden?: string;\n\n  /**\n   * Specifies which icon to use from the built-in set of icons.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  /**\n   * A combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() icon?: any;\n\n  /**\n   * The size of the icon.\n   * Available options are: `\"sm\"`, `\"md\"`, `\"lg\"`, `\"3x\"` and `\"4x\"`.\n   */\n  @Prop() size?: 'sm' | 'md' | 'lg' | '3x' | '4x'  = \"lg\";\n\n  /**\n   * The rotation of the icon.\n   * Available options are: `\"90\"`, `\"180\"`, `\"270\"`.\n   */\n  @Prop() rotate?: '90' | '180' | '270';\n\n  /**\n   * If enabled, road-icon will be loaded lazily when it's visible in the viewport.\n   * Default, `false`.\n   */\n  @Prop() lazy: boolean = false;\n\n  /**\n   * When set to `false`, SVG content that is HTTP fetched will not be checked\n   * if the response SVG content has any `<script>` elements, or any attributes\n   * that start with `on`, such as `onclick`.\n   */\n  @Prop() sanitize = true;\n\n  componentWillLoad() {\n\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIcon();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private waitUntilVisible(el: HTMLRoadIconElement, rootMargin: string, cb: () => void) {\n    if (this.lazy && (window as any).IntersectionObserver) {\n      const io = this.io = new (window as any).IntersectionObserver((data: IntersectionObserverEntry[]) => {\n        if (data[0].isIntersecting) {\n          io.disconnect();\n          this.io = undefined;\n          cb();\n        }\n      }, { rootMargin });\n\n      io.observe(el);\n\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('icon')\n  loadIcon() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (roadiconContent.has(url)) {\n          // sync if it's already loaded\n          this.svgContent = roadiconContent.get(url);\n        } else {\n          // async if it hasn't been loaded\n          getSvgContent(url, this.sanitize).then(() => (this.svgContent = roadiconContent.get(url)));\n        }\n      }\n    }\n\n    if (!this.ariaLabel && this.ariaHidden !== 'true') {\n      const label = getName(this.name, this.icon);\n      // user did not provide a label\n      // come up with the label based on the icon name\n      if (label) {\n        this.ariaLabel = label.replace(/-/g, ' ');\n      }\n    }\n  }\n\n  render() {\n    const colorClass = this.color !== undefined ? `icon-${this.color}` : '';\n    const sizeClass = this.size !== undefined ? `icon-${this.size}` : '';\n    const rotateClass = this.rotate !== undefined ? `icon-rotate-${this.rotate}` : '';\n\n    return (\n      <Host class={`${colorClass} ${sizeClass} ${rotateClass}`} aria-hidden=\"true\">\n        {(\n          (this.svgContent !== '')\n            ? <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n            : <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    );\n  }\n}","/*\n * Input\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n/**\n * @prop --border-radius: Border radius of the field\n * @prop --height: height of the field\n * @prop --input-text-align: align the content of the field\n * @prop --margin-bottom: Bottom margin of the field\n */\n\n\n:host {\n  --height: 3rem;\n  --border-radius: 0.25rem;\n  --input-text-align: left;\n  --margin-bottom: 1rem;\n\n  position: relative;\n  display: block;\n  margin-bottom: var(--margin-bottom);\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-grey-10);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: var(--height);\n  padding: 0.75rem 1rem 0;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  color: var(--road-on-surface);\n  text-align: var(--input-text-align);\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: var(--border-radius);\n  box-shadow: none;\n  appearance: none;\n}\n\n/**\n * Remove native arrow on type number\n */\n\n.form-control[type=\"number\"] {\n  appearance: textfield;\n}\n\n/**\n * Fix position of chrome native icon on type date and time\n */\n\n.form-control::-webkit-calendar-picker-indicator {\n  margin-top: -0.75rem;\n}\n\n/**\n * Fix position of iOS date and time value\n */\n\n.form-control::-webkit-date-and-time-value {\n  padding-top: 0.625rem;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n  color: var(--road-on-surface-extra-weak);\n  opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-control:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label,\n.form-control[type=\"date\"] ~ .form-label,\n.form-control[type=\"time\"] ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus,\n.form-control[autofocus] {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-extra-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n.form-control:required ~ .form-label::after{\n  color: var(--road-danger-default);\n  content: \" *\";\n}\n\n/**\n * less label\n */\n\n.less-label {\n  padding-top: 0;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n  --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n  padding: 1rem 1rem 0;\n}\n\n:host(.phone-number) .form-control {\n  padding-left: 2rem;\n}\n\n:host(.phone-number) .form-label {\n  left: 2rem;\n}\n\n:host(.input-xl) .form-label {\n  top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[autofocus] ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n  border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: var(--road-body-small);\n  color: var(--road-on-surface-weak);\n}\n\n\n/* PASSWORD\n -------------------- */\n\n.form-control[type=\"password\"] ~ .checklist-password .invalid{\n  color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\nimport { AutocompleteTypes, TextFieldTypes } from '../../interface';\n\nconst debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n  const original = (event as any)._original || event;\n  return {\n    _original: event,\n    emit: debounce(original.emit.bind(original), wait),\n  } as EventEmitter;\n};\n\nconst debounce = (func: (...args: any[]) => void, wait = 0) => {\n  let timer: any;\n  return (...args: any[]): any => {\n    clearTimeout(timer);\n    timer = setTimeout(func, wait, ...args);\n  };\n};\n\n/**\n * @slot checklistPassword - Content the checklist Password exemple.\n * `<div class=\"checklist-password mt-16\" slot=\"checklistPassword\">`\n     ` <span class=\"checklist-password-label\"><strong>Low Safety</strong></span>`\n      `<road-progress color=\"danger\" value=\"25\" class=\"mt-8 mb-16\"></road-progress>`\n      `<p class=\"text-medium mb-8\">For optimal safety your password must have at least :</p>`\n      `<ul class=\"m-0 pl-16\">`\n        `<li id=\"letter\" class=\"invalid mb-8\">1 lowercase and 1 uppercase</li>`\n        `<li id=\"number\" class=\"invalid mb-8\">1 digit</li>`\n        `<li id=\"length\" class=\"invalid\">8 characters minimum</li>`\n      `</ul>`\n    `</div>`\n */\n\n@Component({\n  tag: 'road-input',\n  styleUrl: 'input.css',\n  scoped: true,\n})\nexport class Input {\n\n  /**\n   * The id of input\n   */\n  @Prop() inputId: string = `road-input-${inputIds++}`;\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   */\n  @Prop() autocapitalize = 'off';\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: AutocompleteTypes = 'off';\n\n  /**\n   * Whether auto correction should be enabled when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A hint to the browser for which enter key to display.\n   * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n   * `\"previous\"`, `\"search\"`, and `\"send\"`.\n   */\n  @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * 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\"`.\n   */\n  @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max?: string;\n\n  /**\n   * 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.\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min?: string;\n\n  /**\n   * 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.\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Instructional text that shows before the input has a value.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck = false;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set.\n   * Possible values are: `\"any\"` or a positive floating point number.\n   */\n  @Prop() step?: string;\n\n  /**\n   * 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.\n   */\n  @Prop() size?: number;\n\n  /**\n   * The sizes of the input.\n   */\n   @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /**\n   * The type of control to display. The default type is text.\n   */\n  @Prop() type: TextFieldTypes = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label?: string = '';\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n   @Prop() helper?: string;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `roadChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.roadchange = debounceEvent(this.roadchange, this.debounce);\n    this.roadChange = debounceEvent(this.roadChange, this.debounce);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });\n    this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });\n  }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  private getValue(): string {\n    return typeof this.value === 'number'\n      ? this.value.toString()\n      : (this.value || '').toString();\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || \"\";\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const value = this.getValue();\n    const labelId = this.inputId + '-label';\n    const hasValueClass = this.value !== '' ? 'has-value' : '';\n    const lessLabelClass = this.label !== '' ? '' : 'less-label';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n        <input\n          class={`form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`}\n          id={this.inputId}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          disabled={this.disabled}\n          autoCapitalize={this.autocapitalize}\n          autoComplete={this.autocomplete}\n          autoCorrect={this.autocorrect}\n          enterKeyHint={this.enterkeyhint}\n          autoFocus={this.autofocus}\n          inputMode={this.inputmode}\n          min={this.min}\n          max={this.max}\n          minLength={this.minlength}\n          maxLength={this.maxlength}\n          name={this.name}\n          pattern={this.pattern}\n          placeholder={this.placeholder}\n          readOnly={this.readonly}\n          required={this.required}\n          spellcheck={this.spellcheck}\n          step={this.step}\n          size={this.size}\n          type={this.type}\n          value={value}\n          onInput={this.onInput}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          data-cy='road-input'\n        />\n        <label class=\"form-label\" id={labelId} htmlFor={this.inputId}>{this.label}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n        {this.type && this.type == 'password' &&\n        <slot name=\"checklistPassword\"/>}\n      </Host>\n    );\n  }\n}\n\nlet inputIds = 0;\n","/*\n * Input Group\n *\n * Easily extend form controls\n * by adding text, buttons, or button groups\n * on either side of textual inputs, custom selects, and custom file inputs.\n *\n * Index\n * - Input group\n * - Prepend / append\n * - Text or icon addon\n * - Round corners\n * - Error\n * - Disabled\n */\n\n:host {\n  display: block;\n}\n\n/* INPUT GROUP\n -------------------- */\n\n.input-group {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  width: 100%;\n  font-family: var(--road-font, sans-serif);\n}\n\n::slotted(road-input),\n::slotted(input),\n::slotted(textarea),\n::slotted(road-select) {\n  position: relative;\n  flex: 1 1 auto;\n  width: 1%;\n  margin-bottom: 0;\n}\n\n/**\n * Remove border for append and prepend element\n * with white background\n */\n\n::slotted([slot=\"prepend\"]) {\n  margin-right: -3px;\n  border-color: var(--road-input-outline);\n  border-right-color: transparent;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n::slotted([slot=\"append\"]) {\n  margin-left: -0.25rem;\n  border-color: var(--road-input-outline);\n  border-left-width: 0;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .input-group:not(.is-disabled):hover ::slotted([slot=\"prepend\"]) {\n    border-color: var(--road-input-outline-variant);\n    border-right-color: transparent;\n  }\n\n  .input-group:not(.is-disabled):hover ::slotted([slot=\"append\"]) {\n    border-color: var(--road-input-outline-variant);\n    border-left-color: transparent;\n  }\n\n  :host(.phone-number-group) .input-group:not(.is-disabled):hover ::slotted([slot=\"prepend\"]) {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.input-group:focus-within ::slotted([slot=\"prepend\"]) {\n  border-color: var(--road-input-outline-variant);\n  border-right-color: transparent;\n}\n\n:host(.phone-number-group) .input-group:focus-within ::slotted([slot=\"prepend\"]) {\n  border-color: var(--road-input-outline-variant);\n  border-right-color: transparent;\n}\n\n.input-group:focus-within ::slotted([slot=\"append\"]) {\n  border-color: var(--road-input-outline-variant);\n  border-left-color: transparent;\n}\n\n/* PREPEND - APPEND\n -------------------- */\n\n.input-group-prepend,\n.input-group-append {\n  display: flex;\n  height: 3rem;\n}\n\n::slotted(road-button) {\n  --padding-start: 0.5rem;\n  --padding-end: 0.5rem;\n\n  position: relative;\n  z-index: 2;\n  min-width: 3rem;\n  margin: 0;\n  font-size: var(--road-font-size-14);\n}\n\n.input-group-prepend {\n  z-index: 1;\n  order: -1;\n}\n\n.input-group-prepend ~ .form-label {\n  left: calc(3rem + 1px);\n}\n\n.input-group-append {\n  position: relative;\n  z-index: 1;\n  border-radius: 0 0.25rem 0.25rem 0;\n}\n\n/* TEXT OR ICON ADDON\n -------------------- */\n\n::slotted(label) {\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  margin-bottom: 0;\n  color: var(--road-on-surface);\n  text-align: center;\n  white-space: nowrap;\n  cursor: text;\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* ROUND CORNERS\n -------------------- */\n\n::slotted(road-input:not(:first-child)),\n::slotted(road-select:not(:first-child)) {\n  border-radius: 0;\n}\n\n.input-group-append ::slotted([slot=\"append\"]) {\n  border-left: 0;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.input-group-prepend ::slotted([slot=\"prepend\"]) {\n  border-right: 0;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n:host(.phone-number-group) .input-group-prepend ::slotted([slot=\"prepend\"]) {\n  border-right: 1px solid var(--road-input-outline);\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.input-group-prepend ::slotted(label) {\n  margin-right: calc(-1rem + 1px);\n}\n\n.input-group-append ::slotted(road-button) {\n  background-color: var(--road-surface);\n}\n\n/* SIZES\n -------------------- */\n\n.size-xl .input-group-prepend,\n.size-xl .input-group-append {\n  height: 3.5rem;\n}\n\n.size-xl ::slotted(road-button) {\n  height: 3.5rem;\n}\n\n/* ERROR\n -------------------- */\n\n.input-group.is-invalid ::slotted([slot=\"append\"]),\n.input-group.is-invalid ::slotted([slot=\"prepend\"]) {\n  border-color: var(--road-danger-outline);\n}\n\n:host(.phone-number-group) .input-group.is-invalid ::slotted([slot=\"prepend\"]) {\n  border-color: var(--road-danger-outline);\n}\n\n/* DISABLED\n -------------------- */\n\n.input-group.is-disabled ::slotted([slot=\"append\"]),\n.input-group.is-disabled ::slotted([slot=\"prepend\"]) {\n  cursor: not-allowed;\n  background: #e4e5e9;\n}\n\n.is-disabled ::slotted(road-button) {\n  opacity: 1;\n}\n","import { Component, Element, h } from '@stencil/core';\n\n/**\n * @slot prepend - Add icon or button before the field.\n * @slot  - Add the road-input or road-select here.\n * @slot append - Add icon or button after the field.\n */\n\n@Component({\n  tag: 'road-input-group',\n  styleUrl: 'input-group.css',\n  shadow: true,\n})\nexport class InputGroup {\n\n  @Element() el!: HTMLRoadInputGroupElement;\n\n  componentDidLoad() {\n    if(this.el.querySelector(\"road-input[disabled]\")) {\n      this.el.querySelector(\"road-button\")?.setAttribute('disabled', \"\");\n    }\n  }\n\n\n  render() {\n    const errorClass = this.el.querySelector(\"road-input[error]\") ? 'is-invalid' : '';\n    const disabledClass = this.el.querySelector(\"road-input[disabled]\") ? 'is-disabled' : '';\n    const sizeClass = this.el.querySelector(\"road-input[sizes]\") ? `size-${(this.el.querySelector(\"road-input\") as HTMLRoadInputElement).sizes}` : '';\n\n    return (\n      <div class={`input-group ${errorClass} ${disabledClass} ${sizeClass}`}>\n        <slot/>\n        <div class=\"input-group-prepend\">\n          <slot name=\"prepend\"/>\n        </div>\n        <div class=\"input-group-append\">\n          <slot name=\"append\"/>\n        </div>\n      </div>\n    );\n  }\n}\n","/*\n * Item\n *\n * Index\n * - Native\n * - Inner\n * - Input\n * - Icons\n * - Buttons\n * - Lines\n */\n\n/**\n * @prop --border-radius: Radius of the item border\n * @prop --background-color: Background of the item\n * @prop --min-height: Minimum height of the item\n * @prop --padding-left: Padding left of the native element\n * @prop --inner-padding: inner padding of the item\n * @prop --detail-color: color of the detail icon\n */\n\n:host {\n  --border-radius: 0.25rem;\n  --background-color: transparent;\n  --detail-color: var(--road-icon);\n  --inner-padding: 1rem 0.5rem 1rem 0;\n  --min-height: 3.5rem;\n  --padding-left: 1rem;\n\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  overflow: hidden;\n  text-decoration: none;\n  outline: none;\n}\n\n/* NATIVE\n -------------------- */\n\n.item-native {\n  position: relative;\n  z-index: 1;\n  box-sizing: border-box;\n  display: flex;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  min-height: var(--min-height);\n  padding: 0 0 0 var(--padding-left);\n  margin: 0;\n  overflow: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  color: var(--road-on-surface);\n  background-color: var(--background-color);\n  border-color: var(--road-grey-70);\n  border-style: solid;\n  border-width: var(--border-width, 0);\n  border-radius: var(--border-radius);\n  outline: none;\n  transition: background 0.15s ease-in-out;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/**\n * Active state\n */\n\n.item-active {\n  background-color: var(--road-grey-90);\n}\n\n/**\n * Hover / Focus state\n */\n\nbutton.item-native:not(:disabled):not(.item-active):hover,\nbutton.item-native:not(:disabled):not(.item-active):focus {\n  background-color: var(--road-grey-90);\n}\n\n/**\n * Reset native behaviours\n */\n\n.item-native::-moz-focus-inner {\n  border: 0;\n}\n\nbutton,\na {\n  cursor: pointer;\n  user-select: none;\n\n  -webkit-user-drag: none;\n}\n\n/* INNER\n -------------------- */\n\n.item-inner {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-direction: inherit;\n  align-items: center;\n  align-self: stretch;\n  width: 100%;\n  min-height: inherit;\n  padding: var(--inner-padding);\n  overflow: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  border-color: var(--road-grey-70);\n  border-style: solid;\n  border-width: var(--inner-border-width, 0);\n  outline: 0;\n}\n\n/* INPUT\n -------------------- */\n\n.input-wrapper {\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-direction: inherit;\n  align-items: inherit;\n  align-self: stretch;\n  overflow: inherit;\n  text-overflow: ellipsis;\n}\n\n/* ICONS\n -------------------- */\n\n.item-detail-icon {\n  color: var(--detail-color);\n}\n\n::slotted(road-icon) {\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n}\n\n/* IMAGE\n -------------------- */\n\n::slotted(road-img) {\n  flex-shrink: 0;\n  width: 3rem;\n  height: 3rem;\n  object-fit: cover;\n  min-height: inherit;\n  margin-right: 1rem;\n}\n\n/* BUTTONS\n -------------------- */\n\n::slotted(road-button) {\n  --padding-start: 0.5rem;\n  --padding-end: 0.5rem;\n  --margin-bottom: 0;\n}\n\n/* LINES\n -------------------- */\n\n/**\n * No lines list\n */\n\n:host(.item-lines-none) {\n  --border-width: 0 !important;\n  --inner-border-width: 0 !important;\n}\n\n/**\n * Full lines list\n */\n\n:host(.item-lines-full) {\n  --border-width: 0 0 1px 0 !important;\n  --inner-border-width: 0 !important;\n}\n\n/**\n * Inset lines list\n */\n\n:host(.item-lines-inset) {\n  --inner-border-width: 0 0 1px 0 !important;\n}\n","import { Component, Host, h, Prop, State, Element } from '@stencil/core';\nimport { navigationChevron } from '../../../icons';\n\n/**\n * @slot start - Placed to the left of all other content.\n * @slot - Content of the item.\n * @slot end - Placed to the right of all other content.\n *\n * @part native - The native HTML button, anchor or div element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-item',\n  styleUrl: 'item.css',\n  shadow: true,\n})\nexport class Item {\n\n  @Element() el!: HTMLRoadItemElement;\n\n  @State() multipleInputs = false;\n\n  /**\n   * If `true`, a button tag will be rendered and the item will be tappable.\n   */\n  @Prop() button = false;\n\n  /**\n   * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`\n   * is `ios` and an `href` or `button` property is present.\n   */\n  @Prop() detail?: boolean;\n\n  /**\n   * If `true`, display an active state item\n   */\n  @Prop() active?: boolean;\n\n  /**\n   * The icon to use when `detail` is set to `true`.\n   */\n  @Prop() detailIcon = navigationChevron;\n\n  /**\n   * If `true`, the user cannot interact with the item.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * How the bottom border should be displayed on the item.\n   */\n  @Prop() lines?: 'full' | 'inset' | 'none';\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * The type of the button. Only used when an `onclick` or `button` property is present.\n   */\n  @Prop() type: 'submit' | 'reset' | 'button' = 'button';\n\n  // If the item has an href or button property it will render a native\n  // anchor or button that is clickable\n  private isClickable(): boolean {\n    return (this.href !== undefined || this.button);\n  }\n\n  render() {\n    const { detail, detailIcon, download, lines, disabled, href, rel, target } = this;\n    const clickable = this.isClickable();\n    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;\n    const attrs = (TagType === 'button')\n      ? { type: this.type }\n      : {\n        download,\n        href,\n        rel,\n        target,\n      };\n    const showDetail = detail !== undefined && detail;\n\n    return (\n      <Host\n        aria-disabled={disabled ? 'true' : null}\n        class={{\n          [`item-lines-${lines}`]: lines !== undefined,\n        }}\n      >\n        <TagType\n          {...attrs}\n          class={{\n            'item-native': true,\n            'item-active': this.active,\n          }}\n          part=\"native\"\n          disabled={disabled}\n        >\n          <slot name=\"start\"/>\n          <div class=\"item-inner\">\n            <div class=\"input-wrapper\">\n              <slot/>\n            </div>\n            <slot name=\"end\"/>\n            {showDetail && <road-icon icon={detailIcon} lazy={false} class=\"item-detail-icon\"></road-icon>}\n          </div>\n        </TagType>\n      </Host>\n    );\n  }\n\n}\n","/*\n * Label\n *\n */\n\n:host {\n  box-sizing: border-box;\n  display: block;\n  overflow: hidden;\n  font-size: var(--road-font-size-14);\n  color: currentColor;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @slot  - Content of the label.\n */\n@Component({\n  tag: 'road-label',\n  styleUrl: 'label.css',\n  shadow: true,\n})\nexport class Label {\n\n  render() {\n    return (\n      <slot/>\n    );\n  }\n\n}\n","/*\n * Item\n *\n * Index\n * - List\n * - Lines\n */\n\n/* LIST\n -------------------- */\n\n:host {\n  display: block;\n  contain: content;\n  list-style-type: none;\n}\n\n/* LINES\n -------------------- */\n\n/**\n * No lines list\n */\n\n:host(.list-lines-none) ::slotted(road-item) {\n  --border-width: 0;\n  --inner-border-width: 0;\n}\n\n/**\n * Full lines list\n */\n\n:host(.list-lines-full) {\n  border: 1px solid var(--road-outline);\n  border-bottom: 0;\n}\n\n:host(.list-lines-full),\n:host(.list-lines-full) ::slotted(road-item) {\n  --border-width: 0 0 1px 0;\n  --inner-border-width: 0;\n}\n\n\n/**\n * Inset lines list\n */\n\n:host(.item-lines-inset),\n:host(.list-lines-inset) ::slotted(road-item) {\n  --inner-border-width: 0 0 1px 0;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Content of the list, it should be road-item elements.\n */\n\n@Component({\n  tag: 'road-list',\n  styleUrl: 'list.css',\n  shadow: true,\n})\nexport class List {\n\n  /**\n   * How the bottom border should be displayed on all items.\n   */\n  @Prop() lines?: 'full' | 'inset' | 'none';\n\n  render() {\n    const { lines } = this;\n\n    return (\n      <Host\n        class={{\n          [`list-lines-${lines}`]: lines !== undefined,\n        }}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n",":host {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: 1440px;\n  margin-right: -8px;\n  margin-left: -8px;\n}\n\n@media (min-width: 1440px) {\n\n  :host {\n    margin-right: auto;\n    margin-left: auto;\n  }\n}\n\n/*\n * Flexbox utilities\n *\n * Index\n * - Flex wrap\n * - Justify content\n * - Align items\n */\n\n/* FLEX WRAP\n -------------------- */\n\n:host(.flex-wrap) {\n  flex-wrap: wrap;\n}\n\n:host(.flex-nowrap) {\n  flex-wrap: nowrap;\n}\n\n/* JUSTIFY CONTENT\n -------------------- */\n\n:host(.justify-content-start) {\n  justify-content: flex-start;\n}\n\n:host(.justify-content-end) {\n  justify-content: flex-end;\n}\n\n:host(.justify-content-center) {\n  justify-content: center;\n}\n\n:host(.justify-content-between) {\n  justify-content: space-between;\n}\n\n:host(.justify-content-around) {\n  justify-content: space-around;\n}\n\n/* ALIGN ITEMS\n -------------------- */\n\n:host(.align-items-start) {\n  align-items: flex-start;\n}\n\n:host(.align-items-end) {\n  align-items: flex-end;\n}\n\n:host(.align-items-center) {\n  align-items: center;\n}\n\n:host(.align-items-baseline) {\n  align-items: baseline;\n}\n\n:host(.align-items-stretch) {\n  align-items: stretch;\n}\n\n@media (min-width: 576px) {\n\n  :host(.flex-sm-wrap) {\n    flex-wrap: wrap;\n  }\n\n  :host(.flex-sm-nowrap) {\n    flex-wrap: nowrap;\n  }\n\n  :host(.justify-content-sm-start) {\n    justify-content: flex-start;\n  }\n\n  :host(.justify-content-sm-end) {\n    justify-content: flex-end;\n  }\n\n  :host(.justify-content-sm-center) {\n    justify-content: center;\n  }\n\n  :host(.justify-content-sm-between) {\n    justify-content: space-between;\n  }\n\n  :host(.justify-content-sm-around) {\n    justify-content: space-around;\n  }\n\n  :host(.align-items-sm-start) {\n    align-items: flex-start;\n  }\n\n  :host(.align-items-sm-end) {\n    align-items: flex-end;\n  }\n\n  :host(.align-items-sm-center) {\n    align-items: center;\n  }\n\n  :host(.align-items-sm-baseline) {\n    align-items: baseline;\n  }\n\n  :host(.align-items-sm-stretch) {\n    align-items: stretch;\n  }\n}\n\n@media (min-width: 768px) {\n\n  :host(.flex-md-wrap) {\n    flex-wrap: wrap;\n  }\n\n  :host(.flex-md-nowrap) {\n    flex-wrap: nowrap;\n  }\n\n  :host(.justify-content-md-start) {\n    justify-content: flex-start;\n  }\n\n  :host(.justify-content-md-end) {\n    justify-content: flex-end;\n  }\n\n  :host(.justify-content-md-center) {\n    justify-content: center;\n  }\n\n  :host(.justify-content-md-between) {\n    justify-content: space-between;\n  }\n\n  :host(.justify-content-md-around) {\n    justify-content: space-around;\n  }\n\n  :host(.align-items-md-start) {\n    align-items: flex-start;\n  }\n\n  :host(.align-items-md-end) {\n    align-items: flex-end;\n  }\n\n  :host(.align-items-md-center) {\n    align-items: center;\n  }\n\n  :host(.align-items-md-baseline) {\n    align-items: baseline;\n  }\n\n  :host(.align-items-md-stretch) {\n    align-items: stretch;\n  }\n}\n\n@media (min-width: 992px) {\n\n  :host(.flex-lg-wrap) {\n    flex-wrap: wrap;\n  }\n\n  :host(.flex-lg-nowrap) {\n    flex-wrap: nowrap;\n  }\n\n  :host(.justify-content-lg-start) {\n    justify-content: flex-start;\n  }\n\n  :host(.justify-content-lg-end) {\n    justify-content: flex-end;\n  }\n\n  :host(.justify-content-lg-center) {\n    justify-content: center;\n  }\n\n  :host(.justify-content-lg-between) {\n    justify-content: space-between;\n  }\n\n  :host(.justify-content-lg-around) {\n    justify-content: space-around;\n  }\n\n  :host(.align-items-lg-start) {\n    align-items: flex-start;\n  }\n\n  :host(.align-items-lg-end) {\n    align-items: flex-end;\n  }\n\n  :host(.align-items-lg-center) {\n    align-items: center;\n  }\n\n  :host(.align-items-lg-baseline) {\n    align-items: baseline;\n  }\n\n  :host(.align-items-lg-stretch) {\n    align-items: stretch;\n  }\n}\n\n@media (min-width: 1200px) {\n\n  :host(.flex-xl-wrap) {\n    flex-wrap: wrap;\n  }\n\n  :host(.flex-xl-nowrap) {\n    flex-wrap: nowrap;\n  }\n\n  :host(.justify-content-xl-start) {\n    justify-content: flex-start;\n  }\n\n  :host(.justify-content-xl-end) {\n    justify-content: flex-end;\n  }\n\n  :host(.justify-content-xl-center) {\n    justify-content: center;\n  }\n\n  :host(.justify-content-xl-between) {\n    justify-content: space-between;\n  }\n\n  :host(.justify-content-xl-around) {\n    justify-content: space-around;\n  }\n\n  :host(.align-items-xl-start) {\n    align-items: flex-start;\n  }\n\n  :host(.align-items-xl-end) {\n    align-items: flex-end;\n  }\n\n  :host(.align-items-xl-center) {\n    align-items: center;\n  }\n\n  :host(.align-items-xl-baseline) {\n    align-items: baseline;\n  }\n\n  :host(.align-items-xl-stretch) {\n    align-items: stretch;\n  }\n}\n\n:host(.align-content-start) {\n  align-content: flex-start;\n}\n\n:host(.align-content-end) {\n  align-content: flex-end;\n}\n\n:host(.align-content-center) {\n  align-content: center;\n}\n\n:host(.align-content-between) {\n  align-content: space-between;\n}\n\n:host(.align-content-around) {\n  align-content: space-around;\n}\n\n:host(.align-content-stretch) {\n  align-content: stretch;\n}\n\n:host(.align-self-auto) {\n  align-self: auto;\n}\n\n:host(.align-self-start) {\n  align-self: flex-start;\n}\n\n:host(.align-self-end) {\n  align-self: flex-end;\n}\n\n:host(.align-self-center) {\n  align-self: center;\n}\n\n:host(.align-self-baseline) {\n  align-self: baseline;\n}\n\n:host(.align-self-stretch) {\n  align-self: stretch;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot  - Used to be able to add multiple columns for a row.\n */\n\n@Component({\n  tag: 'road-row',\n  styleUrl: 'row.css',\n  shadow: true,\n})\nexport class Row {\n\n  render() {\n    return (\n      <Host>\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n","/*\n * Toolbar\n *\n * Index\n * - Container\n * - Content\n * - Buttons\n * - Colors\n */\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  contain: content;\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border-bottom: 1px solid var(--road-outline);\n}\n\n/* CONTAINER\n -------------------- */\n\n.toolbar-container {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  min-height: 3.73rem;\n  contain: content;\n  overflow: hidden;\n}\n\n/* TOOLBAR TITLE CONTAINER\n -------------------- */\n\n.toolbar-title-container {\n  position: relative;\n  top: 0;\n  left: 0;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n}\n\n/* TOOLBAR TITLE\n -------------------- */\n\n.toolbar-title {\n  display: block;\n  width: 100%;\n  font-size: var(--road-font-size-18);\n  font-weight: 700;\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  pointer-events: auto;\n}\n\n@media (min-width: 1200px) {\n\n  .toolbar-title {\n    font-size: var(--road-font-size-21);\n    text-align: center;\n  }\n}\n\n/* CONTENT\n -------------------- */\n\n.toolbar-content {\n  flex: 1 1 0%;\n  min-width: 0;\n  max-width: 100%;\n}\n\n/* TOOLBAR LOGO\n -------------------- */\n\n.toolbar .logo {\n  position: relative;\n  z-index: 1;\n  padding-left: 1rem;\n  margin-bottom: 0;\n  font-size: var(--road-font-size-14);\n  font-weight: 400;\n}\n\n.toolbar .app-name {\n  margin-left: 1rem;\n  font-size: var(--road-font-size-20);\n  font-weight: 700;\n}\n\n/* BUTTONS\n -------------------- */\n\n::slotted([slot=\"start\"]) {\n  --margin-bottom: 0;\n  --padding-start: 0.5rem;\n  --padding-end: 0.5rem;\n\n  align-self: auto;\n  font-size: var(--road-font-size-14);\n  font-weight: 400;\n  background: var(--road-surface);\n  border-right: 1px solid var(--road-outline);\n  border-radius: 0;\n}\n\n::slotted([slot=\"end\"]),\n::slotted([slot=\"secondary\"]) {\n  --margin-bottom: 0;\n  --padding-start: 0.5rem;\n  --padding-end: 0.5rem;\n\n  font-size: var(--road-font-size-14);\n  font-weight: 400;\n  background: var(--road-surface);\n  border-left: 1px solid var(--road-outline);\n  border-radius: 0;\n}\n\n/* COLORS\n -------------------- */\n\n:host(.toolbar-primary) {\n  color: var(--road-on-header-surface);\n  background: var(--road-header-surface);\n}\n\n:host(.toolbar-secondary) {\n  color: var(--road-on-secondary);\n  background: var(--road-secondary);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n *\n * @slot - Content is placed between the named slots if provided without a slot.\n * @slot start - Content is placed to the left of the toolbar text and left to primery slot if provided.\n * @slot primary - Content is placed to the left of the toolbar text.\n * @slot secondary - Content is placed to the right of the toolbar text.\n * @slot end - Content is placed to the right of the toolbar text and right to secondary slot if provided.\n */\n\n@Component({\n  tag: 'road-toolbar',\n  styleUrl: 'toolbar.css',\n  shadow: true,\n})\nexport class Toolbar {\n\n  /**\n   * Background color of the toolbar\n   */\n  @Prop() color?: 'primary' | 'secondary';\n\n  render() {\n    const colorClass = this.color !== undefined ? `toolbar-${this.color}` : '';\n\n    return (\n      <Host class={colorClass}>\n        <div class=\"toolbar-container\">\n          <slot name=\"start\"/>\n          <slot name=\"primary\"/>\n          <div class=\"toolbar-content\">\n            <slot/>\n          </div>\n          <slot name=\"secondary\"/>\n          <slot name=\"end\"/>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"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"}

package/dist/roadtrip/{p-3604d557.entry.js → p-a38be966.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,e as t,h as e,H as a,f as r}from"./p-abdbf6ac.js";const s=".sc-road-autocomplete-h{position:relative;display:block}.sc-road-autocomplete-s>road-input-group,.sc-road-autocomplete-s>road-input{position:relative;z-index:2}.sc-road-autocomplete-s>road-button{position:absolute;right:0;height:100%;background-color:var(--road-surface)}.autocomplete-list.sc-road-autocomplete{position:absolute;top:3rem;z-index:1;width:100%;max-height:16rem;padding:0.5rem 0;margin:0;overflow-y:scroll;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-14);color:var(--road-on-surface);list-style-type:none;background:var(--road-surface);border-radius:0 0 0.25rem 0.25rem;box-shadow:var(--road-elevation-low)}.autocomplete-item.sc-road-autocomplete{padding:0.75rem 1rem;cursor:pointer}.autocomplete-item.sc-road-autocomplete:hover,.autocomplete-item.focus.sc-road-autocomplete{color:var(--road-on-primary);background:var(--road-primary)}";const i=class{constructor(e){o(this,e);this.roadselected=t(this,"roadselected",7);this.roadSelected=t(this,"roadSelected",7);this.onClick=(o,t)=>{this.el.querySelector("road-input").value=o;this.visible=false;this.roadselected.emit({value:o.toString(),label:t});this.roadSelected.emit({value:o.toString(),label:t})};this.visible=false;this.options=[]}handleFocus(){this.visible=true}onClickOutside(o){if(this.visible&&!this.el.contains(o.target)){this.visible=false}}render(){return e(a,null,e("slot",null),this.visible&&this.options.length>0&&e("ul",{class:"autocomplete-list"},this.options&&this.options.map((o=>e("li",{class:"autocomplete-item",role:"menuitem",onClick:()=>this.onClick(o.value,o.label)},o.label)))))}get el(){return r(this)}};i.style=s;export{i as road_autocomplete};
-//# sourceMappingURL=p-3604d557.entry.js.map
+import{r as o,c as t,h as e,H as a,d as r}from"./p-6475c1af.js";const s=".sc-road-autocomplete-h{position:relative;display:block}.sc-road-autocomplete-s>road-input-group,.sc-road-autocomplete-s>road-input{position:relative;z-index:2}.sc-road-autocomplete-s>road-button{position:absolute;right:0;height:100%;background-color:var(--road-surface)}.autocomplete-list.sc-road-autocomplete{position:absolute;top:3rem;z-index:1;width:100%;max-height:16rem;padding:0.5rem 0;margin:0;overflow-y:scroll;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-14);color:var(--road-on-surface);list-style-type:none;background:var(--road-surface);border-radius:0 0 0.25rem 0.25rem;box-shadow:var(--road-elevation-low)}.autocomplete-item.sc-road-autocomplete{padding:0.75rem 1rem;cursor:pointer}.autocomplete-item.sc-road-autocomplete:hover,.autocomplete-item.focus.sc-road-autocomplete{color:var(--road-on-primary);background:var(--road-primary)}";const i=class{constructor(e){o(this,e);this.roadselected=t(this,"roadselected",7);this.roadSelected=t(this,"roadSelected",7);this.onClick=(o,t)=>{this.el.querySelector("road-input").value=o;this.visible=false;this.roadselected.emit({value:o.toString(),label:t});this.roadSelected.emit({value:o.toString(),label:t})};this.visible=false;this.options=[]}handleFocus(){this.visible=true}onClickOutside(o){if(this.visible&&!this.el.contains(o.target)){this.visible=false}}render(){return e(a,null,e("slot",null),this.visible&&this.options.length>0&&e("ul",{class:"autocomplete-list"},this.options&&this.options.map((o=>e("li",{class:"autocomplete-item",role:"menuitem",onClick:()=>this.onClick(o.value,o.label)},o.label)))))}get el(){return r(this)}};i.style=s;export{i as road_autocomplete};
+//# sourceMappingURL=p-a38be966.entry.js.map

package/dist/roadtrip/p-a38be966.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["autocompleteCss","Autocomplete","this","onClick","value","label","el","querySelector","visible","roadselected","emit","toString","roadSelected","handleFocus","onClickOutside","event","contains","target","render","h","Host","options","length","class","map","option","role"],"sources":["src/components/autocomplete/autocomplete.css?tag=road-autocomplete&encapsulation=scoped","src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["/*\n * Autocomplete\n *\n * Index\n * - List\n * - Item\n */\n\n:host {\n  position: relative;\n  display: block;\n}\n\n/* INPUT\n -------------------- */\n\n::slotted(road-input-group),\n::slotted(road-input) {\n  position: relative;\n  z-index: 2;\n}\n\n::slotted(road-button){\n  position: absolute;\n  right: 0;\n  height: 100%;\n  background-color: var(--road-surface);\n}\n\n/* LIST\n -------------------- */\n\n.autocomplete-list {\n  position: absolute;\n  top: 3rem;\n  z-index: 1;\n  width: 100%;\n  max-height: 16rem;\n  padding: 0.5rem 0;\n  margin: 0;\n  overflow-y: scroll;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-font-size-14);\n  color: var(--road-on-surface);\n  list-style-type: none;\n  background: var(--road-surface);\n  border-radius: 0 0 0.25rem 0.25rem;\n  box-shadow: var(--road-elevation-low);\n}\n\n/* ITEM\n -------------------- */\n\n.autocomplete-item {\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n}\n\n/**\n * Hover state\n */\n\n.autocomplete-item:hover,\n.autocomplete-item.focus {\n  color: var(--road-on-primary);\n  background: var(--road-primary);\n}\n","import { Component, Element, Host, Listen, Prop, State, h, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot  - Input element for the widget, it should be a road-input element.\n */\n\n@Component({\n  tag: 'road-autocomplete',\n  styleUrl: 'autocomplete.css',\n  scoped: true,\n})\nexport class Autocomplete {\n\n  @Element() el!: HTMLRoadAutocompleteElement;\n\n  @State() visible: boolean = false;\n\n  /**\n   * List of autocomplete options\n   */\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n  }> = [];\n\n  @Listen('roadFocus')\n  @Listen('roadfocus')\n  handleFocus() {\n    this.visible = true;\n  }\n\n  @Listen('click', { target: 'document' })\n  onClickOutside(event: MouseEvent) {\n    if (this.visible && !this.el.contains(event.target as Node)) {\n      this.visible = false;\n    }\n  }\n\n  /**\n   * Emitted the value and label of the option selected.\n   */\n  @Event() roadselected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n  /** @internal */\n  @Event() roadSelected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n\n  private onClick = (value: string | number, label: string) => {\n    (this.el.querySelector('road-input') as HTMLRoadInputElement).value = value;\n    this.visible = false;\n    this.roadselected.emit({\n      value: value.toString(),\n      label: label,\n    });\n    this.roadSelected.emit({\n      value: value.toString(),\n      label: label,\n    });\n  };\n\n  render() {\n    return (\n      <Host>\n        <slot/>\n        {this.visible && this.options.length > 0 &&\n          <ul class=\"autocomplete-list\">\n            {this.options && this.options.map(option => (\n              <li class=\"autocomplete-item\" role=\"menuitem\" onClick={() => this.onClick(option.value, option.label)}>\n                {option.label}\n              </li>\n            ))}\n          </ul>}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAkB,+2B,MCWXC,EAAY,M,+GAwCfC,KAAAC,QAAU,CAACC,EAAwBC,KACxCH,KAAKI,GAAGC,cAAc,cAAuCH,MAAQA,EACtEF,KAAKM,QAAU,MACfN,KAAKO,aAAaC,KAAK,CACrBN,MAAOA,EAAMO,WACbN,MAAOA,IAETH,KAAKU,aAAaF,KAAK,CACrBN,MAAOA,EAAMO,WACbN,MAAOA,GACP,E,aA9CwB,M,aAQvB,E,CAIL,WAAAQ,GACEX,KAAKM,QAAU,I,CAIjB,cAAAM,CAAeC,GACb,GAAIb,KAAKM,UAAYN,KAAKI,GAAGU,SAASD,EAAME,QAAiB,CAC3Df,KAAKM,QAAU,K,EA8BnB,MAAAU,GACE,OACEC,EAACC,EAAI,KACHD,EAAA,aACCjB,KAAKM,SAAWN,KAAKmB,QAAQC,OAAS,GACrCH,EAAA,MAAII,MAAM,qBACPrB,KAAKmB,SAAWnB,KAAKmB,QAAQG,KAAIC,GAChCN,EAAA,MAAII,MAAM,oBAAoBG,KAAK,WAAWvB,QAAS,IAAMD,KAAKC,QAAQsB,EAAOrB,MAAOqB,EAAOpB,QAC5FoB,EAAOpB,U"}

package/dist/roadtrip/{p-2d01d350.entry.js → p-a5f7b2f1.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,h as r,H as a}from"./p-abdbf6ac.js";const l=":host{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:1.5rem;padding:0 0.75rem;font-size:var(--road-font-size-14);font-weight:700;background:var(--road-grey-000);border:1px solid transparent;border-radius:1.5rem}:host(.flap-promo){color:var(--road-tag-offer);border-color:var(--road-tag-offer)}:host(.flap-exclu){color:var(--road-tag-exclusivity);border-color:var(--road-tag-exclusivity)}:host(.flap-info){color:var(--road-tag-default);border-color:var(--road-tag-default)}:host(.flap-ecology){color:var(--road-tag-ecology);border-color:var(--road-tag-ecology)}:host(.flap-blackfriday){color:var(--road-tag-black-friday);border-color:var(--road-tag-black-friday)}:host(.flap-promo-filled){color:var(--road-on-primary);background-color:var(--road-tag-offer)}:host(.flap-exclu-filled){color:var(--road-on-primary);background-color:var(--road-tag-exclusivity)}:host(.flap-info-filled){color:var(--road-on-primary);background-color:var(--road-tag-default)}:host(.flap-ecology-filled){color:var(--road-on-primary);background-color:var(--road-tag-ecology)}:host(.flap-blackfriday-filled){color:var(--road-on-primary);background-color:var(--road-tag-black-friday)}:host(.flap-md){height:2rem;padding:0 1rem;font-size:var(--road-font-size-16)}";const t=class{constructor(r){o(this,r);this.color="promo";this.filled=false;this.size="sm"}render(){const o=this.filled?`flap-${this.color}-filled`:`flap-${this.color}`;return r(a,{class:`${o} flap-${this.size}`},r("slot",null))}};t.style=l;export{t as road_flap};
-//# sourceMappingURL=p-2d01d350.entry.js.map
+import{r as o,h as r,H as a}from"./p-6475c1af.js";const l=":host{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:1.5rem;padding:0 0.75rem;font-size:var(--road-font-size-14);font-weight:700;background:var(--road-grey-000);border:1px solid transparent;border-radius:1.5rem}:host(.flap-promo){color:var(--road-tag-offer);border-color:var(--road-tag-offer)}:host(.flap-exclu){color:var(--road-tag-exclusivity);border-color:var(--road-tag-exclusivity)}:host(.flap-info){color:var(--road-tag-default);border-color:var(--road-tag-default)}:host(.flap-ecology){color:var(--road-tag-ecology);border-color:var(--road-tag-ecology)}:host(.flap-blackfriday){color:var(--road-tag-black-friday);border-color:var(--road-tag-black-friday)}:host(.flap-promo-filled){color:var(--road-on-primary);background-color:var(--road-tag-offer)}:host(.flap-exclu-filled){color:var(--road-on-primary);background-color:var(--road-tag-exclusivity)}:host(.flap-info-filled){color:var(--road-on-primary);background-color:var(--road-tag-default)}:host(.flap-ecology-filled){color:var(--road-on-primary);background-color:var(--road-tag-ecology)}:host(.flap-blackfriday-filled){color:var(--road-on-primary);background-color:var(--road-tag-black-friday)}:host(.flap-md){height:2rem;padding:0 1rem;font-size:var(--road-font-size-16)}";const t=class{constructor(r){o(this,r);this.color="promo";this.filled=false;this.size="sm"}render(){const o=this.filled?`flap-${this.color}-filled`:`flap-${this.color}`;return r(a,{class:`${o} flap-${this.size}`},r("slot",null))}};t.style=l;export{t as road_flap};
+//# sourceMappingURL=p-a5f7b2f1.entry.js.map

package/dist/roadtrip/p-a5f7b2f1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["flapCss","Flap","render","colorClass","this","filled","color","h","Host","class","size"],"sources":["src/components/flap/flap.css?tag=road-flap&encapsulation=shadow","src/components/flap/flap.tsx"],"sourcesContent":["/*\n * Flap\n *\n * Index\n * - Flap\n * - Colors\n * - Sizes\n */\n\n/* FLAP\n -------------------- */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.5rem;\n  padding: 0 0.75rem;\n  font-size: var(--road-font-size-14);\n  font-weight: 700;\n  background: var(--road-grey-000);\n  border: 1px solid transparent;\n  border-radius: 1.5rem;\n}\n\n/* COLORS\n -------------------- */\n\n:host(.flap-promo) {\n  color: var(--road-tag-offer);\n  border-color: var(--road-tag-offer);\n}\n\n:host(.flap-exclu) {\n  color: var(--road-tag-exclusivity);\n  border-color: var(--road-tag-exclusivity);\n}\n\n:host(.flap-info) {\n  color: var(--road-tag-default);\n  border-color: var(--road-tag-default);\n}\n\n:host(.flap-ecology) {\n  color: var(--road-tag-ecology);\n  border-color: var(--road-tag-ecology);\n}\n\n:host(.flap-blackfriday) {\n  color: var(--road-tag-black-friday);\n  border-color: var(--road-tag-black-friday);\n}\n\n:host(.flap-promo-filled) {\n  color: var(--road-on-primary);\n  background-color: var(--road-tag-offer);\n}\n\n:host(.flap-exclu-filled) {\n  color: var(--road-on-primary);\n  background-color: var(--road-tag-exclusivity);\n}\n\n:host(.flap-info-filled) {\n  color: var(--road-on-primary);\n  background-color: var(--road-tag-default);\n}\n\n:host(.flap-ecology-filled) {\n  color: var(--road-on-primary);\n  background-color: var(--road-tag-ecology);\n}\n\n:host(.flap-blackfriday-filled) {\n  color: var(--road-on-primary);\n  background-color: var(--road-tag-black-friday);\n}\n\n/* SIZES\n -------------------- */\n\n:host(.flap-md) {\n  height: 2rem;\n  padding: 0 1rem;\n  font-size: var(--road-font-size-16);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Content of the flap.\n */\n\n@Component({\n  tag: 'road-flap',\n  styleUrl: 'flap.css',\n  shadow: true,\n})\nexport class Flap {\n\n  /**\n   * Set the color of the flap.\n   */\n  @Prop() color: 'promo' | 'exclu' | 'info' | 'ecology' | 'blackfriday' = 'promo';\n\n  /**\n   * Set to `true` for a filled flap\n   */\n    @Prop() filled: boolean = false;\n\n  /**\n    * The button size.\n    */\n  @Prop({ reflect: true }) size: 'sm' | 'md' = 'sm';\n\n  render() {\n    const colorClass = this.filled ? `flap-${this.color}-filled` : `flap-${this.color}`;\n\n    return (\n      <Host class={`${colorClass} flap-${this.size}`}>\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAU,iwC,MCWHC,EAAI,M,oCAKyD,Q,YAK5C,M,UAKiB,I,CAE7C,MAAAC,GACE,MAAMC,EAAaC,KAAKC,OAAS,QAAQD,KAAKE,eAAiB,QAAQF,KAAKE,QAE5E,OACEC,EAACC,EAAI,CAACC,MAAO,GAAGN,UAAmBC,KAAKM,QACtCH,EAAA,a"}

package/dist/roadtrip/{p-c8e9807b.entry.js → p-aac728cd.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,e as a,h as s,H as e}from"./p-abdbf6ac.js";import"./p-e8c090a5.js";const i=":host{position:fixed;top:0;z-index:2;width:100%}";const n=class{constructor(s){t(this,s);this.roadnavbarchanged=a(this,"roadnavbarchanged",7);this.roadNavbarChanged=a(this,"roadNavbarChanged",7);this.selectedTab=undefined}selectedTabChanged(){if(this.selectedTab!==undefined){this.roadnavbarchanged.emit({tab:this.selectedTab});this.roadNavbarChanged.emit({tab:this.selectedTab})}}onNavbarChanged(t){this.selectedTab=t.detail.tab}componentWillLoad(){this.selectedTabChanged()}render(){return s(e,{role:"tablist"},s("slot",null))}static get watchers(){return{selectedTab:["selectedTabChanged"]}}};n.style=i;export{n as road_global_navigation};
-//# sourceMappingURL=p-c8e9807b.entry.js.map
+import{r as t,c as a,h as s,H as e}from"./p-6475c1af.js";import"./p-1ccae339.js";const i=":host{position:fixed;top:0;z-index:2;width:100%}";const n=class{constructor(s){t(this,s);this.roadnavbarchanged=a(this,"roadnavbarchanged",7);this.roadNavbarChanged=a(this,"roadNavbarChanged",7);this.selectedTab=undefined}selectedTabChanged(){if(this.selectedTab!==undefined){this.roadnavbarchanged.emit({tab:this.selectedTab});this.roadNavbarChanged.emit({tab:this.selectedTab})}}onNavbarChanged(t){this.selectedTab=t.detail.tab}componentWillLoad(){this.selectedTabChanged()}render(){return s(e,{role:"tablist"},s("slot",null))}static get watchers(){return{selectedTab:["selectedTabChanged"]}}};n.style=i;export{n as road_global_navigation};
+//# sourceMappingURL=p-aac728cd.entry.js.map

package/dist/roadtrip/p-aac728cd.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["globalNavigationCss","GlobalNavigation","selectedTabChanged","this","selectedTab","undefined","roadnavbarchanged","emit","tab","roadNavbarChanged","onNavbarChanged","ev","detail","componentWillLoad","render","h","Host","role"],"sources":["src/components/global-navigation/global-navigation.css?tag=road-global-navigation&encapsulation=shadow","src/components/global-navigation/global-navigation.tsx"],"sourcesContent":["/*\n * Global Navigation\n *\n */\n\n:host {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  width: 100%;\n}\n\n","import { Component, Host, h, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot navbar - it should be road-navbar-item elements. Max 5 items on Mobile or add them to the drawer\n */\n\n@Component({\n  tag: 'road-global-navigation',\n  styleUrl: 'global-navigation.css',\n  shadow: true,\n})\nexport class GlobalNavigation {\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadnavbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadNavbarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadnavbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarChanged!: EventEmitter;\n\n  @Listen('roadNavbarItemClick')\n  @Listen('roadnavbaritemclick')\n  onNavbarChanged(ev: CustomEvent) {\n    this.selectedTab = ev.detail.tab;\n  }\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"tablist\"\n      >\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"iFAAA,MAAMA,EAAsB,mD,MCYfC,EAAgB,M,8JAO3B,kBAAAC,GACE,GAAIC,KAAKC,cAAgBC,UAAW,CAClCF,KAAKG,kBAAkBC,KAAK,CAC1BC,IAAKL,KAAKC,cAEZD,KAAKM,kBAAkBF,KAAK,CAC1BC,IAAKL,KAAKC,a,EAYhB,eAAAM,CAAgBC,GACdR,KAAKC,YAAcO,EAAGC,OAAOJ,G,CAG/B,iBAAAK,GACEV,KAAKD,oB,CAGP,MAAAY,GACE,OACEC,EAACC,EAAI,CACHC,KAAK,WAELF,EAAA,a"}

package/dist/roadtrip/{p-6598e293.entry.js → p-b1ba207d.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as i,H as s,f as e}from"./p-abdbf6ac.js";import{i as n,g as r,b as o}from"./p-7ec2d494.js";const l=t=>{const i=document.createElement("div");i.innerHTML=t;for(let e=i.childNodes.length-1;e>=0;e--){if(i.childNodes[e].nodeName.toLowerCase()!=="svg"){i.removeChild(i.childNodes[e])}}const s=i.firstElementChild;if(s&&s.nodeName.toLowerCase()==="svg"){const t=s.getAttribute("class")||"";s.setAttribute("class",(t+" s-ion-icon").trim());if(a(s)){return i.innerHTML}}return""};const a=t=>{if(t.nodeType===1){if(t.nodeName.toLowerCase()==="script"){return false}for(let i=0;i<t.attributes.length;i++){const s=t.attributes[i].value;if(n(s)&&s.toLowerCase().indexOf("on")===0){return false}}for(let i=0;i<t.childNodes.length;i++){if(!a(t.childNodes[i])){return false}}}return true};const h=new Map;const d=new Map;const f=(t,i)=>{let s=d.get(t);if(!s){if(typeof fetch!=="undefined"&&typeof document!=="undefined"){s=fetch(t).then((s=>{if(s.ok){return s.text().then((s=>{if(s&&i!==false){s=l(s)}h.set(t,s||"")}))}h.set(t,"")}));d.set(t,s)}else{h.set(t,"");return Promise.resolve()}}return s};const c=":host{box-sizing:content-box;display:inline-block;color:var(--road-icon);transition:fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;fill:currentColor;contain:strict}:host svg{display:block;width:100%;height:100%}:host(.illustration-sm){width:4rem;height:4rem}:host(.illustration-md){width:8rem;height:8rem}:host(.illustration-lg){width:16rem;height:16rem}:host(.illustration-2x){width:32rem;height:32rem}:host(.illustration-rotate-90){transform:rotate(90deg)}:host(.illustration-rotate-180){transform:rotate(180deg)}:host(.illustration-rotate-270){transform:rotate(270deg)}";const u=class{constructor(i){t(this,i);this.illustrationSvgContent=undefined;this.isVisible=false;this.ariaLabel=undefined;this.ariaHidden=undefined;this.name=undefined;this.src=undefined;this.illustration=undefined;this.size="2x";this.rotate=undefined;this.lazy=false;this.sanitize=true}componentWillLoad(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=true;this.loadIllustration()}))}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}waitUntilVisible(t,i,s){if(this.lazy&&window.IntersectionObserver){const e=this.io=new window.IntersectionObserver((t=>{if(t[0].isIntersecting){e.disconnect();this.io=undefined;s()}}),{rootMargin:i});e.observe(t)}else{s()}}loadIllustration(){if(this.isVisible){const t=r(this);if(t){if(h.has(t)){this.illustrationSvgContent=h.get(t)}else{f(t,this.sanitize).then((()=>this.illustrationSvgContent=h.get(t)))}}}if(!this.ariaLabel&&this.ariaHidden!=="true"){const t=o(this.name,this.illustration);if(t){this.ariaLabel=t.replace(/-/g," ")}}}render(){const t=this.size!==undefined?`illustration-${this.size}`:"";const e=this.rotate!==undefined?`illustration-rotate-${this.rotate}`:"";return i(s,{class:`${t} ${e}`,"aria-hidden":"true"},this.illustrationSvgContent!==""?i("div",{class:"icon-inner",innerHTML:this.illustrationSvgContent}):i("div",{class:"icon-inner"}))}static get assetsDirs(){return["svg"]}get el(){return e(this)}static get watchers(){return{name:["loadIllustration"],src:["loadIllustration"],illustration:["loadIllustration"]}}};u.style=c;export{u as road_illustration};
-//# sourceMappingURL=p-6598e293.entry.js.map
+import{r as t,h as i,H as s,d as e}from"./p-6475c1af.js";import{i as n,g as r,b as o}from"./p-d637bb99.js";const l=t=>{const i=document.createElement("div");i.innerHTML=t;for(let t=i.childNodes.length-1;t>=0;t--){if(i.childNodes[t].nodeName.toLowerCase()!=="svg"){i.removeChild(i.childNodes[t])}}const s=i.firstElementChild;if(s&&s.nodeName.toLowerCase()==="svg"){const t=s.getAttribute("class")||"";s.setAttribute("class",(t+" s-ion-icon").trim());if(a(s)){return i.innerHTML}}return""};const a=t=>{if(t.nodeType===1){if(t.nodeName.toLowerCase()==="script"){return false}for(let i=0;i<t.attributes.length;i++){const s=t.attributes[i].value;if(n(s)&&s.toLowerCase().indexOf("on")===0){return false}}for(let i=0;i<t.childNodes.length;i++){if(!a(t.childNodes[i])){return false}}}return true};const h=new Map;const d=new Map;const f=(t,i)=>{let s=d.get(t);if(!s){if(typeof fetch!=="undefined"&&typeof document!=="undefined"){s=fetch(t).then((s=>{if(s.ok){return s.text().then((s=>{if(s&&i!==false){s=l(s)}h.set(t,s||"")}))}h.set(t,"")}));d.set(t,s)}else{h.set(t,"");return Promise.resolve()}}return s};const c=":host{box-sizing:content-box;display:inline-block;color:var(--road-icon);transition:fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;fill:currentColor;contain:strict}:host svg{display:block;width:100%;height:100%}:host(.illustration-sm){width:4rem;height:4rem}:host(.illustration-md){width:8rem;height:8rem}:host(.illustration-lg){width:16rem;height:16rem}:host(.illustration-2x){width:32rem;height:32rem}:host(.illustration-rotate-90){transform:rotate(90deg)}:host(.illustration-rotate-180){transform:rotate(180deg)}:host(.illustration-rotate-270){transform:rotate(270deg)}";const u=class{constructor(i){t(this,i);this.illustrationSvgContent=undefined;this.isVisible=false;this.ariaLabel=undefined;this.ariaHidden=undefined;this.name=undefined;this.src=undefined;this.illustration=undefined;this.size="2x";this.rotate=undefined;this.lazy=false;this.sanitize=true}componentWillLoad(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=true;this.loadIllustration()}))}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}waitUntilVisible(t,i,s){if(this.lazy&&window.IntersectionObserver){const e=this.io=new window.IntersectionObserver((t=>{if(t[0].isIntersecting){e.disconnect();this.io=undefined;s()}}),{rootMargin:i});e.observe(t)}else{s()}}loadIllustration(){if(this.isVisible){const t=r(this);if(t){if(h.has(t)){this.illustrationSvgContent=h.get(t)}else{f(t,this.sanitize).then((()=>this.illustrationSvgContent=h.get(t)))}}}if(!this.ariaLabel&&this.ariaHidden!=="true"){const t=o(this.name,this.illustration);if(t){this.ariaLabel=t.replace(/-/g," ")}}}render(){const t=this.size!==undefined?`illustration-${this.size}`:"";const e=this.rotate!==undefined?`illustration-rotate-${this.rotate}`:"";return i(s,{class:`${t} ${e}`,"aria-hidden":"true"},this.illustrationSvgContent!==""?i("div",{class:"icon-inner",innerHTML:this.illustrationSvgContent}):i("div",{class:"icon-inner"}))}static get assetsDirs(){return["svg"]}get el(){return e(this)}static get watchers(){return{name:["loadIllustration"],src:["loadIllustration"],illustration:["loadIllustration"]}}};u.style=c;export{u as road_illustration};
+//# sourceMappingURL=p-b1ba207d.entry.js.map

package/dist/roadtrip/p-b1ba207d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["validateContent","svgContent","div","document","createElement","innerHTML","i","childNodes","length","nodeName","toLowerCase","removeChild","svgElm","firstElementChild","svgClass","getAttribute","setAttribute","trim","isValid","elm","nodeType","attributes","val","value","isStr","indexOf","roadillustrationContent","Map","requests","getIllustrationSvgContent","url","sanitize","req","get","fetch","then","rsp","ok","text","set","Promise","resolve","illustrationCss","Illustration","componentWillLoad","this","waitUntilVisible","el","isVisible","loadIllustration","disconnectedCallback","io","disconnect","undefined","rootMargin","cb","lazy","window","IntersectionObserver","data","isIntersecting","observe","getUrl","has","illustrationSvgContent","ariaLabel","ariaHidden","label","getName","name","illustration","replace","render","sizeClass","size","rotateClass","rotate","h","Host","class"],"sources":["src/components/illustration/validate.ts","src/components/illustration/request.ts","src/components/illustration/illustration.css?tag=road-illustration&encapsulation=shadow","src/components/illustration/illustration.tsx"],"sourcesContent":["import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string) => {\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  // setup this way to ensure it works on our buddy IE\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n    const svgClass = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as any)) {\n      return div.innerHTML;\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const val = elm.attributes[i].value;\n      if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as any)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n","import { validateContent } from './validate';\n\nexport const roadillustrationContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getIllustrationSvgContent = (url: string, sanitize: boolean) => {\n  // see if we already have a request for this url\n  let req = requests.get(url);\n\n  if (!req) {\n    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {\n      // we don't already have a request\n      // @ts-ignore\n      req = fetch(url).then((rsp) => {\n        if (rsp.ok) {\n          return rsp.text().then((svgContent) => {\n            if (svgContent && sanitize !== false) {\n              svgContent = validateContent(svgContent);\n            }\n            roadillustrationContent.set(url, svgContent || '');\n          });\n        }\n        roadillustrationContent.set(url, '');\n      });\n\n      // cache for the same requests\n      requests.set(url, req);\n    } else {\n      // set to empty for ssr scenarios and resolve promise\n      roadillustrationContent.set(url, '');\n      return Promise.resolve();\n    }\n  }\n\n  return req;\n};\n","/*\n * Illustration\n *\n * Index\n * - Sizes\n * - Colors\n * - Rotation\n */\n\n:host {\n  box-sizing: content-box;\n  display: inline-block;\n  color: var(--road-icon);\n  transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  fill: currentColor;\n  contain: strict;\n}\n\n:host svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.illustration-sm) {\n  width: 4rem;\n  height: 4rem;\n}\n\n:host(.illustration-md) {\n  width: 8rem;\n  height: 8rem;\n}\n\n:host(.illustration-lg) {\n  width: 16rem;\n  height: 16rem;\n}\n\n:host(.illustration-2x) {\n  width: 32rem;\n  height: 32rem;\n}\n\n/* ROTATION\n -------------------- */\n\n:host(.illustration-rotate-90) {\n  transform: rotate(90deg);\n}\n\n:host(.illustration-rotate-180) {\n  transform: rotate(180deg);\n}\n\n:host(.illustration-rotate-270) {\n  transform: rotate(270deg);\n}\n","import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getIllustrationSvgContent, roadillustrationContent } from './request';\nimport { getName, getUrl } from './utils';\n\n@Component({\n  tag: 'road-illustration',\n  assetsDirs: ['svg'],\n  styleUrl: 'illustration.css',\n  shadow: true,\n})\nexport class Illustration {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLRoadIllustrationElement;\n\n  @State() private illustrationSvgContent?: string;\n\n  @State() private isVisible = false;\n\n\n\n  /**\n   * Specifies the label to use for accessibility. Defaults to the illustration name.\n   */\n  @Prop({ mutable: true, reflect: true }) ariaLabel?: string;\n\n  /**\n   * Set the illustration to hidden, respectively `true`, to remove it from the accessibility tree.\n   */\n  @Prop({ reflect: true }) ariaHidden?: string;\n\n  /**\n   * Specifies which illustration to use from the built-in set of illustrations.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  /**\n   * A combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() illustration?: any;\n\n  /**\n   * The size of the illustration.\n   * Available options are: `\"sm\"`, `\"md\"`, `\"lg\"`, `\"2x\"`.\n   */\n  @Prop() size?: 'sm' | 'md' | 'lg' | '2x' = \"2x\";\n\n  /**\n   * The rotation of the illustration.\n   * Available options are: `\"90\"`, `\"180\"`, `\"270\"`.\n   */\n  @Prop() rotate?: '90' | '180' | '270';\n\n  /**\n   * If enabled, road-illustration will be loaded lazily when it's visible in the viewport.\n   * Default, `false`.\n   */\n  @Prop() lazy: boolean = false;\n\n  /**\n   * When set to `false`, SVG content that is HTTP fetched will not be checked\n   * if the response SVG content has any `<script>` elements, or any attributes\n   * that start with `on`, such as `onclick`.\n   */\n  @Prop() sanitize = true;\n\n  componentWillLoad() {\n\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIllustration();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private waitUntilVisible(el: HTMLRoadIllustrationElement, rootMargin: string, cb: () => void) {\n    if (this.lazy && (window as any).IntersectionObserver) {\n      const io = this.io = new (window as any).IntersectionObserver((data: IntersectionObserverEntry[]) => {\n        if (data[0].isIntersecting) {\n          io.disconnect();\n          this.io = undefined;\n          cb();\n        }\n      }, { rootMargin });\n\n      io.observe(el);\n\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('illustration')\n  loadIllustration() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (roadillustrationContent.has(url)) {\n          // sync if it's already loaded\n          this.illustrationSvgContent = roadillustrationContent.get(url);\n        } else {\n          // async if it hasn't been loaded\n          getIllustrationSvgContent(url, this.sanitize).then(() => (this.illustrationSvgContent = roadillustrationContent.get(url)));\n        }\n      }\n    }\n\n    if (!this.ariaLabel && this.ariaHidden !== 'true') {\n      const label = getName(this.name, this.illustration);\n      // user did not provide a label\n      // come up with the label based on the icon name\n      if (label) {\n        this.ariaLabel = label.replace(/-/g, ' ');\n      }\n    }\n  }\n\n  render() {\n    const sizeClass = this.size !== undefined ? `illustration-${this.size}` : '';\n    const rotateClass = this.rotate !== undefined ? `illustration-rotate-${this.rotate}` : '';\n\n    return (\n      <Host class={`${sizeClass} ${rotateClass}`} aria-hidden=\"true\">\n        {(\n          (this.illustrationSvgContent !== '')\n            ? <div class=\"icon-inner\" innerHTML={this.illustrationSvgContent}></div>\n            : <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    );\n  }\n}"],"mappings":"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"}

package/dist/roadtrip/{p-093973f5.entry.js → p-b2f014a6.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as o,H as i}from"./p-abdbf6ac.js";import{a as e}from"./p-37ab7c7f.js";import"./p-e8c090a5.js";const a=":host{box-sizing:border-box;display:inline-flex;align-items:center;height:1.5rem;padding:0.25rem 0.5rem;margin-bottom:0.5rem;font-size:var(--road-font-size-14);cursor:pointer;border:0;border-radius:1.625rem;outline:0;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.chip-description{display:inline-flex;align-items:center;padding:0 0.5rem}:host(.chip-outline){border-style:solid;border-width:1px}::slotted(road-icon){width:1.25rem;height:1.25rem;margin-right:0.5rem;margin-left:-0.5rem}.chip-close{width:1rem;height:1rem;margin-right:-0.25rem;color:var(--road-surface);background:var(--road-on-surface-weak);border-radius:50%;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.chip-lg){height:2.5rem;padding:0 0.75rem;font-size:var(--road-font-size-16)}:host(.chip-lg) ::slotted(road-icon){width:1.5rem;height:1.5rem;margin-right:0.75rem;margin-left:-0.75rem}:host(.chip-lg) .chip-description{padding:0 0.75rem}:host(.chip-lg) .chip-close{width:1.5rem;height:1.5rem}:host(.chip-default){color:var(--road-on-surface);background:var(--road-grey-200)}:host(.chip-outline.chip-default){background:var(--road-surface);border-color:var(--road-outline)}:host(.chip-secondary){color:var(--road-surface-inverse);background:var(--road-button-primary);border-color:transparent}:host(.chip-secondary) .chip-close{color:var(--road-primary);background:var(--road-surface)}@media (any-hover: hover){:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary:hover){background:var(--road-button-primary-variant)}:host(.chip-secondary:hover) .chip-close{color:var(--road-primary)}}:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary.focus-visible){background:var(--road-button-primary-variant)}";const t=class{constructor(o){r(this,o);this.color="default";this.outline=false;this.size="md";this.hasCloseIcon=false}render(){const r=this.outline?"chip-outline":"";return o(i,{class:`${r} chip-${this.color} chip-${this.size}`},o("div",{class:"chip-description"},o("slot",null)),this.hasCloseIcon&&o("road-icon",{class:"chip-close",icon:e}))}};t.style=a;export{t as road_chip};
-//# sourceMappingURL=p-093973f5.entry.js.map
+import{r,h as o,H as i}from"./p-6475c1af.js";import{a as e}from"./p-73fe2357.js";import"./p-1ccae339.js";const a=":host{box-sizing:border-box;display:inline-flex;align-items:center;height:1.5rem;padding:0.25rem 0.5rem;margin-bottom:0.5rem;font-size:var(--road-font-size-14);cursor:pointer;border:0;border-radius:1.625rem;outline:0;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.chip-description{display:inline-flex;align-items:center;padding:0 0.5rem}:host(.chip-outline){border-style:solid;border-width:1px}::slotted(road-icon){width:1.25rem;height:1.25rem;margin-right:0.5rem;margin-left:-0.5rem}.chip-close{width:1rem;height:1rem;margin-right:-0.25rem;color:var(--road-surface);background:var(--road-on-surface-weak);border-radius:50%;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.chip-lg){height:2.5rem;padding:0 0.75rem;font-size:var(--road-font-size-16)}:host(.chip-lg) ::slotted(road-icon){width:1.5rem;height:1.5rem;margin-right:0.75rem;margin-left:-0.75rem}:host(.chip-lg) .chip-description{padding:0 0.75rem}:host(.chip-lg) .chip-close{width:1.5rem;height:1.5rem}:host(.chip-default){color:var(--road-on-surface);background:var(--road-grey-200)}:host(.chip-outline.chip-default){background:var(--road-surface);border-color:var(--road-outline)}:host(.chip-secondary){color:var(--road-surface-inverse);background:var(--road-button-primary);border-color:transparent}:host(.chip-secondary) .chip-close{color:var(--road-primary);background:var(--road-surface)}@media (any-hover: hover){:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary:hover){background:var(--road-button-primary-variant)}:host(.chip-secondary:hover) .chip-close{color:var(--road-primary)}}:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary.focus-visible){background:var(--road-button-primary-variant)}";const t=class{constructor(o){r(this,o);this.color="default";this.outline=false;this.size="md";this.hasCloseIcon=false}render(){const r=this.outline?"chip-outline":"";return o(i,{class:`${r} chip-${this.color} chip-${this.size}`},o("div",{class:"chip-description"},o("slot",null)),this.hasCloseIcon&&o("road-icon",{class:"chip-close",icon:e}))}};t.style=a;export{t as road_chip};
+//# sourceMappingURL=p-b2f014a6.entry.js.map

package/dist/roadtrip/p-b2f014a6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["chipCss","Chip","render","outlineClass","this","outline","h","Host","class","color","size","hasCloseIcon","icon","navigationClose"],"sources":["src/components/chip/chip.css?tag=road-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/*\n * Chip\n *\n * Index\n * - Outline\n * - Icon\n * - Close\n * - Size\n * - Color\n */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  height: 1.5rem;\n  padding: 0.25rem 0.5rem;\n  margin-bottom: 0.5rem;\n  font-size: var(--road-font-size-14);\n  cursor: pointer;\n  border: 0;\n  border-radius: 1.625rem;\n  outline: 0;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n.chip-description {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 0.5rem;\n}\n\n/* OUTLINE\n -------------------- */\n\n:host(.chip-outline) {\n  border-style: solid;\n  border-width: 1px;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-right: 0.5rem;\n  margin-left: -0.5rem;\n}\n\n/* CLOSE\n -------------------- */\n\n.chip-close {\n  width: 1rem;\n  height: 1rem;\n  margin-right: -0.25rem;\n  color: var(--road-surface);\n  background: var(--road-on-surface-weak);\n  border-radius: 50%;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n/* SIZE\n -------------------- */\n\n:host(.chip-lg) {\n  height: 2.5rem;\n  padding: 0 0.75rem;\n  font-size: var(--road-font-size-16);\n}\n\n:host(.chip-lg) ::slotted(road-icon) {\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-right: 0.75rem;\n  margin-left: -0.75rem;\n}\n\n:host(.chip-lg) .chip-description {\n  padding: 0 0.75rem;\n}\n\n:host(.chip-lg) .chip-close {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n/* COLOR\n -------------------- */\n\n:host(.chip-default) {\n  color: var(--road-on-surface);\n  background: var(--road-grey-200);\n}\n\n:host(.chip-outline.chip-default) {\n  background: var(--road-surface);\n  border-color: var(--road-outline);\n}\n\n:host(.chip-secondary) {\n  color: var(--road-surface-inverse);\n  background: var(--road-button-primary);\n  border-color: transparent;\n}\n\n:host(.chip-secondary) .chip-close {\n  color: var(--road-primary);\n  background: var(--road-surface);\n}\n\n/**\n * Hover state\n */\n\n@media (any-hover: hover) {\n\n  :host(.chip-outline:hover) {\n    border-color: var(--road-outline-variant);\n  }\n\n  :host(.chip-secondary:hover) {\n    background: var(--road-button-primary-variant);\n  }\n\n  :host(.chip-secondary:hover) .chip-close {\n    color: var(--road-primary);\n  }\n}\n\n/**\n * Focus state\n */\n\n:host(.chip-outline:hover) {\n  border-color: var(--road-outline-variant);\n}\n\n:host(.chip-secondary.focus-visible) {\n  background: var(--road-button-primary-variant);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the chip.\n */\n\n@Component({\n  tag: 'road-chip',\n  styleUrl: 'chip.css',\n  shadow: true,\n})\nexport class Chip {\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color?: 'default' | 'secondary' = 'default';\n\n  /**\n   * Display an outline style chip.\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * The chip size.\n   */\n  @Prop() size: 'md' | 'lg' = 'md';\n\n  /**\n   * Display a close icon\n   */\n  @Prop() hasCloseIcon: boolean = false;\n\n  render() {\n    const outlineClass = this.outline ? 'chip-outline' : '';\n\n    return (\n      <Host\n        class={`${outlineClass} chip-${this.color} chip-${this.size}`}\n      >\n        <div class=\"chip-description\">\n          <slot/>\n        </div>\n        {this.hasCloseIcon && <road-icon class=\"chip-close\" icon={navigationClose}></road-icon>}\n      </Host>\n    );\n  }\n}"],"mappings":"yGAAA,MAAMA,EAAU,kyD,MCaHC,EAAI,M,oCAI2B,U,aAKf,M,UAKC,K,kBAKI,K,CAEhC,MAAAC,GACE,MAAMC,EAAeC,KAAKC,QAAU,eAAiB,GAErD,OACEC,EAACC,EAAI,CACHC,MAAO,GAAGL,UAAqBC,KAAKK,cAAcL,KAAKM,QAEvDJ,EAAA,OAAKE,MAAM,oBACTF,EAAA,cAEDF,KAAKO,cAAgBL,EAAA,aAAWE,MAAM,aAAaI,KAAMC,I"}

package/dist/roadtrip/{p-9419bdaf.entry.js → p-b555fa35.entry.js}

@@ -1,2 +1,2 @@
-import{r as a,e as r,h as e,H as t}from"./p-abdbf6ac.js";const o='.sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-control.sc-road-textarea{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control.sc-road-textarea::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-textarea:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--road-on-surface-weak);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;padding-bottom:0.5rem;line-height:1.5}.textarea-control.no-resize.sc-road-textarea{resize:none}.form-label.sc-road-textarea{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-extra-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.input-xl.sc-road-textarea-h{--height:3.5rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea{padding:1.5rem 1rem 0.5rem}.input-xl.sc-road-textarea-h .form-label.sc-road-textarea{top:1rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type="date"].sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type="time"].sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}.helper.sc-road-textarea{margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-grey-500)}';const s=class{constructor(e){a(this,e);this.roadinput=r(this,"roadinput",7);this.roadInput=r(this,"roadInput",7);this.roadchange=r(this,"roadchange",7);this.roadChange=r(this,"roadChange",7);this.roadblur=r(this,"roadblur",7);this.roadBlur=r(this,"roadBlur",7);this.roadfocus=r(this,"roadfocus",7);this.roadFocus=r(this,"roadFocus",7);this.onInput=a=>{const r=a.target;if(r){this.value=r.value||""}this.roadinput.emit(a);this.roadInput.emit(a)};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.textareaId=`road-textarea-${i++}`;this.autocapitalize="none";this.autofocus=false;this.disabled=false;this.inputmode=undefined;this.enterkeyhint=undefined;this.maxlength=undefined;this.minlength=undefined;this.name=this.textareaId;this.placeholder=undefined;this.sizes="lg";this.readonly=false;this.required=false;this.spellcheck=false;this.resize=true;this.cols=undefined;this.rows=undefined;this.wrap=undefined;this.value="";this.label=`${this.textareaId}-label`;this.error=undefined;this.helper=undefined}valueChanged(){this.roadchange.emit({value:this.value});this.roadChange.emit({value:this.value})}getValue(){return this.value||""}render(){const a=this.getValue();const r=this.textareaId+"-label";const o=this.value!==""?"has-value":"";const s=this.resize==false?"no-resize":"";const i=this.error!==undefined&&this.error!==""?"is-invalid":"";return e(t,{"aria-disabled":this.disabled?"true":null,class:this.sizes&&`input-${this.sizes}`},e("textarea",{class:`form-control textarea-control ${o} ${s} ${i}`,id:this.textareaId,"aria-disabled":this.disabled?"true":null,"aria-labelledby":r,disabled:this.disabled,autoCapitalize:this.autocapitalize,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,maxLength:this.maxlength,minLength:this.minlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,value:a,spellcheck:this.spellcheck,cols:this.cols,rows:this.rows,wrap:this.wrap,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus}),e("label",{class:"form-label",id:r,htmlFor:this.textareaId},this.label),this.error&&this.error!==""&&e("p",{class:"invalid-feedback"},this.error),this.helper&&this.helper!==""&&e("p",{class:"helper"},this.helper))}static get watchers(){return{value:["valueChanged"]}}};let i=0;s.style=o;export{s as road_textarea};
-//# sourceMappingURL=p-9419bdaf.entry.js.map
+import{r as a,c as r,h as e,H as t}from"./p-6475c1af.js";const o='.sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-control.sc-road-textarea{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control.sc-road-textarea::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-textarea:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--road-on-surface-weak);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;padding-bottom:0.5rem;line-height:1.5}.textarea-control.no-resize.sc-road-textarea{resize:none}.form-label.sc-road-textarea{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-extra-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.input-xl.sc-road-textarea-h{--height:3.5rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea{padding:1.5rem 1rem 0.5rem}.input-xl.sc-road-textarea-h .form-label.sc-road-textarea{top:1rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type="date"].sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type="time"].sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}.helper.sc-road-textarea{margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-grey-500)}';const s=class{constructor(e){a(this,e);this.roadinput=r(this,"roadinput",7);this.roadInput=r(this,"roadInput",7);this.roadchange=r(this,"roadchange",7);this.roadChange=r(this,"roadChange",7);this.roadblur=r(this,"roadblur",7);this.roadBlur=r(this,"roadBlur",7);this.roadfocus=r(this,"roadfocus",7);this.roadFocus=r(this,"roadFocus",7);this.onInput=a=>{const r=a.target;if(r){this.value=r.value||""}this.roadinput.emit(a);this.roadInput.emit(a)};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.textareaId=`road-textarea-${i++}`;this.autocapitalize="none";this.autofocus=false;this.disabled=false;this.inputmode=undefined;this.enterkeyhint=undefined;this.maxlength=undefined;this.minlength=undefined;this.name=this.textareaId;this.placeholder=undefined;this.sizes="lg";this.readonly=false;this.required=false;this.spellcheck=false;this.resize=true;this.cols=undefined;this.rows=undefined;this.wrap=undefined;this.value="";this.label=`${this.textareaId}-label`;this.error=undefined;this.helper=undefined}valueChanged(){this.roadchange.emit({value:this.value});this.roadChange.emit({value:this.value})}getValue(){return this.value||""}render(){const a=this.getValue();const r=this.textareaId+"-label";const o=this.value!==""?"has-value":"";const s=this.resize==false?"no-resize":"";const i=this.error!==undefined&&this.error!==""?"is-invalid":"";return e(t,{"aria-disabled":this.disabled?"true":null,class:this.sizes&&`input-${this.sizes}`},e("textarea",{class:`form-control textarea-control ${o} ${s} ${i}`,id:this.textareaId,"aria-disabled":this.disabled?"true":null,"aria-labelledby":r,disabled:this.disabled,autoCapitalize:this.autocapitalize,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,maxLength:this.maxlength,minLength:this.minlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,value:a,spellcheck:this.spellcheck,cols:this.cols,rows:this.rows,wrap:this.wrap,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus}),e("label",{class:"form-label",id:r,htmlFor:this.textareaId},this.label),this.error&&this.error!==""&&e("p",{class:"invalid-feedback"},this.error),this.helper&&this.helper!==""&&e("p",{class:"helper"},this.helper))}static get watchers(){return{value:["valueChanged"]}}};let i=0;s.style=o;export{s as road_textarea};
+//# sourceMappingURL=p-b555fa35.entry.js.map

package/dist/roadtrip/p-b555fa35.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textareaCss","Textarea","this","onInput","ev","input","target","value","roadinput","emit","roadInput","onBlur","roadblur","roadBlur","onFocus","roadfocus","roadFocus","textareaIds","textareaId","valueChanged","roadchange","roadChange","getValue","render","labelId","hasValueClass","noResizeClass","resize","isInvalidClass","error","undefined","h","Host","disabled","class","sizes","id","autoCapitalize","autocapitalize","autoFocus","autofocus","enterKeyHint","enterkeyhint","inputMode","inputmode","maxLength","maxlength","minLength","minlength","name","placeholder","readOnly","readonly","required","spellcheck","cols","rows","wrap","htmlFor","label","helper"],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * Textarea\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 3rem;\n  padding: 0.75rem 1rem 0;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  box-shadow: none;\n  appearance: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n  color: var(--road-on-surface-extra-weak);\n  opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-control:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n  color: var(--road-on-surface-weak);\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* TEXTAREA\n -------------------- */\n\n.textarea-control {\n  height: auto;\n  padding-top: 1rem;\n  padding-bottom: 0.5rem;\n  line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n  resize: none;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-extra-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n  --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n  padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n  top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n  border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-grey-500);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-textarea',\n  styleUrl: 'textarea.css',\n  scoped: true,\n})\nexport class Textarea {\n\n  /**\n   * The id of textarea\n   */\n  @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   */\n  @Prop() autocapitalize: string = 'none';\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the textarea.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * 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\"`.\n   */\n  @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n  /**\n   * A hint to the browser for which enter key to display.\n   * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n   * `\"previous\"`, `\"search\"`, and `\"send\"`.\n   */\n  @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n  /**\n   * 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.\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * 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.\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.textareaId;\n\n  /**\n   * Instructional text that shows before the textarea has a value.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The sizes of the input.\n   */\n   @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n\n    /**\n   * If `false`, to disabled resize.\n   */\n    @Prop() resize: boolean = true;\n\n  /**\n   * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n   */\n  @Prop() cols?: number;\n\n  /**\n   * The number of rows of the control.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * Indicates how the control wraps text.\n   */\n  @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({ mutable: true }) value?: string | null = '';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.textareaId}-label`;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n  @Prop() helper?: string;\n\n  /**\n   * Update the native textarea element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value });\n    this.roadChange.emit({ value: this.value });\n  }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the textarea has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const value = this.getValue();\n    const labelId = this.textareaId + '-label';\n    const hasValueClass = this.value !== '' ? 'has-value' : '';\n    const noResizeClass = this.resize == false ? 'no-resize' : '';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n        <textarea\n          class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n          id={this.textareaId}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          disabled={this.disabled}\n          autoCapitalize={this.autocapitalize}\n          autoFocus={this.autofocus}\n          enterKeyHint={this.enterkeyhint}\n          inputMode={this.inputmode}\n          maxLength={this.maxlength}\n          minLength={this.minlength}\n          name={this.name}\n          placeholder={this.placeholder}\n          readOnly={this.readonly}\n          required={this.required}\n          value={value}\n          spellcheck={this.spellcheck}\n          cols={this.cols}\n          rows={this.rows}\n          wrap={this.wrap}\n          onInput={this.onInput}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n        >\n        </textarea>\n        <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n\n}\n\nlet textareaIds = 0;\n"],"mappings":"yDAAA,MAAMA,EAAc,23G,MCOPC,EAAQ,M,iUAgKXC,KAAAC,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTH,KAAKK,MAAQF,EAAME,OAAS,E,CAE9BL,KAAKM,UAAUC,KAAKL,GACpBF,KAAKQ,UAAUD,KAAKL,EAAoB,EAGlCF,KAAAS,OAAS,KACfT,KAAKU,SAASH,OACdP,KAAKW,SAASJ,MAAM,EAGdP,KAAAY,QAAU,KAChBZ,KAAKa,UAAUN,OACfP,KAAKc,UAAUP,MAAM,E,gBA3KM,iBAAiBQ,M,oBAKb,O,eAKJ,M,cAKD,M,iHA4BLf,KAAKgB,W,sCAUE,K,cAKF,M,cAKA,M,gBAKE,M,YAKF,K,uEAoBqB,G,WAKzB,GAAGhB,KAAKgB,mB,2CAgBtB,YAAAC,GACRjB,KAAKkB,WAAWX,KAAK,CAAEF,MAAOL,KAAKK,QACnCL,KAAKmB,WAAWZ,KAAK,CAAEF,MAAOL,KAAKK,O,CAmC7B,QAAAe,GACN,OAAOpB,KAAKK,OAAS,E,CAsBvB,MAAAgB,GACE,MAAMhB,EAAQL,KAAKoB,WACnB,MAAME,EAAUtB,KAAKgB,WAAa,SAClC,MAAMO,EAAgBvB,KAAKK,QAAU,GAAK,YAAc,GACxD,MAAMmB,EAAgBxB,KAAKyB,QAAU,MAAQ,YAAc,GAC3D,MAAMC,EAAiB1B,KAAK2B,QAAUC,WAAa5B,KAAK2B,QAAU,GAAK,aAAe,GAEtF,OACEE,EAACC,EAAI,iBAAgB9B,KAAK+B,SAAW,OAAS,KAAMC,MAAOhC,KAAKiC,OAAS,SAASjC,KAAKiC,SACrFJ,EAAA,YACEG,MAAO,iCAAiCT,KAAiBC,KAAiBE,IAC1EQ,GAAIlC,KAAKgB,WAAU,gBACJhB,KAAK+B,SAAW,OAAS,KAAI,kBAC3BT,EACjBS,SAAU/B,KAAK+B,SACfI,eAAgBnC,KAAKoC,eACrBC,UAAWrC,KAAKsC,UAChBC,aAAcvC,KAAKwC,aACnBC,UAAWzC,KAAK0C,UAChBC,UAAW3C,KAAK4C,UAChBC,UAAW7C,KAAK8C,UAChBC,KAAM/C,KAAK+C,KACXC,YAAahD,KAAKgD,YAClBC,SAAUjD,KAAKkD,SACfC,SAAUnD,KAAKmD,SACf9C,MAAOA,EACP+C,WAAYpD,KAAKoD,WACjBC,KAAMrD,KAAKqD,KACXC,KAAMtD,KAAKsD,KACXC,KAAMvD,KAAKuD,KACXtD,QAASD,KAAKC,QACdQ,OAAQT,KAAKS,OACbG,QAASZ,KAAKY,UAGhBiB,EAAA,SAAOG,MAAM,aAAaE,GAAIZ,EAASkC,QAASxD,KAAKgB,YAAahB,KAAKyD,OACtEzD,KAAK2B,OAAS3B,KAAK2B,QAAU,IAAME,EAAA,KAAGG,MAAM,oBAAoBhC,KAAK2B,OACrE3B,KAAK0D,QAAU1D,KAAK0D,SAAW,IAAM7B,EAAA,KAAGG,MAAM,UAAUhC,KAAK0D,Q,wDAOtE,IAAI3C,EAAc,E"}

package/dist/roadtrip/{p-8e216f6a.entry.js → p-b8fb46b2.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,h as r,H as t}from"./p-abdbf6ac.js";const a=":host(.text-primary){color:var(--road-primary-10)}:host(.text-secondary){color:var(--road-secondary)}:host(.text-accent){color:var(--road-secondary-50)}:host(.text-info){color:var(--road-on-info-surface)}:host(.text-success){color:var(--road-on-success-surface)}:host(.text-warning){color:var(--road-on-warning-surface)}:host(.text-danger){color:var(--road-on-danger-surface)}:host(.text-default){color:var(--road-on-surface)}:host(.text-default-second){color:var(--road-grey-40)}:host(.text-disabled){color:var(--road-grey-60)}:host(.text-white){color:var(--road-grey-100-new)}";const s=class{constructor(r){o(this,r);this.color="default"}render(){const o=this.color!==undefined?`text-${this.color}`:"";return r(t,{class:`${o}`},r("slot",null))}};s.style=a;export{s as road_text};
-//# sourceMappingURL=p-8e216f6a.entry.js.map
+import{r as o,h as r,H as t}from"./p-6475c1af.js";const a=":host(.text-primary){color:var(--road-primary-10)}:host(.text-secondary){color:var(--road-secondary)}:host(.text-accent){color:var(--road-secondary-50)}:host(.text-info){color:var(--road-on-info-surface)}:host(.text-success){color:var(--road-on-success-surface)}:host(.text-warning){color:var(--road-on-warning-surface)}:host(.text-danger){color:var(--road-on-danger-surface)}:host(.text-default){color:var(--road-on-surface)}:host(.text-default-second){color:var(--road-grey-40)}:host(.text-disabled){color:var(--road-grey-60)}:host(.text-white){color:var(--road-grey-100-new)}";const s=class{constructor(r){o(this,r);this.color="default"}render(){const o=this.color!==undefined?`text-${this.color}`:"";return r(t,{class:`${o}`},r("slot",null))}};s.style=a;export{s as road_text};
+//# sourceMappingURL=p-b8fb46b2.entry.js.map

package/dist/roadtrip/p-b8fb46b2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textCss","Text","render","colorClass","this","color","undefined","h","Host","class"],"sources":["src/components/text/text.css?tag=road-text&encapsulation=shadow","src/components/text/text.tsx"],"sourcesContent":["/*\n * Text\n *\n * Index\n * - Colors\n */\n\n/* COLORS\n -------------------- */\n\n/**\n * Primary\n */\n\n:host(.text-primary) {\n  color: var(--road-primary-10);\n}\n\n/**\n * Secondary\n */\n\n:host(.text-secondary) {\n  color: var(--road-secondary);\n}\n\n/**\n * Accent\n */\n\n:host(.text-accent) {\n  color: var(--road-secondary-50);\n}\n\n/**\n * Info\n */\n\n:host(.text-info) {\n  color: var(--road-on-info-surface);\n}\n\n/**\n * Success\n */\n\n:host(.text-success) {\n  color: var(--road-on-success-surface);\n}\n\n/**\n * Warning\n */\n\n:host(.text-warning) {\n  color: var(--road-on-warning-surface);\n}\n\n/**\n * Danger\n */\n\n:host(.text-danger) {\n  color: var(--road-on-danger-surface);\n}\n\n/**\n * Default\n */\n\n:host(.text-default) {\n  color: var(--road-on-surface);\n}\n\n/**\n * Default second\n */\n\n:host(.text-default-second) {\n  color: var(--road-grey-40);\n}\n\n/**\n * Disabled\n */\n\n:host(.text-disabled) {\n  color: var(--road-grey-60);\n}\n\n/**\n * White\n */\n\n:host(.text-white) {\n  color: var(--road-grey-100-new);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Content of the text.\n */\n\n@Component({\n  tag: 'road-text',\n  styleUrl: 'text.css',\n  shadow: true,\n})\nexport class Text {\n\n  /**\n   * Color of the text.\n   */\n  @Prop() color?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'default' | 'default-second' | 'disabled' | 'white' = 'default';\n\n  render() {\n    const colorClass = this.color !== undefined ? `text-${this.color}` : '';\n\n    return (\n      <Host class={`${colorClass}`}>\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAU,qkB,MCWHC,EAAI,M,oCAKwI,S,CAEvJ,MAAAC,GACE,MAAMC,EAAaC,KAAKC,QAAUC,UAAY,QAAQF,KAAKC,QAAU,GAErE,OACEE,EAACC,EAAI,CAACC,MAAO,GAAGN,KACdI,EAAA,a"}

package/dist/roadtrip/p-bb6453af.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as e,h as a,H as t,d as i}from"./p-6475c1af.js";import{a as r}from"./p-73fe2357.js";const n=":host{--z-index:3;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-grey-900);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.modal-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateY(50px)}:host(.modal-open){visibility:visible !important;opacity:1}:host(.modal-open) .modal-dialog{transform:none}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background:var(--road-surface);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}@media (min-width: 768px){.modal-content{height:auto;border-radius:0.25rem}}.modal-header{display:flex;align-items:center;justify-content:flex-end;color:var(--road-on-header-surface);background:var(--road-header-surface)}.modal-header road-icon{color:var(--road-header-icon)}@media (min-width: 768px){.modal-header{border-radius:0.25rem 0.25rem 0 0}}.modal-header-inverse{color:var(--road-on-surface);background:none}.modal-header-inverse road-icon{color:var(--road-icon)}.modal-action,.modal-close{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;padding:0;font-weight:700;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.modal-action~.modal-title,.modal-close~.modal-title{padding-left:0}.modal-action-left,.modal-close-left{margin-right:auto}.modal-title{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium);font-weight:400}.modal-body{padding:2.5rem 0.5rem;overflow-y:auto}.modal-header-inverse+.modal-body{padding-top:0}@media (min-width: 768px){.modal-body{max-height:86vh;padding-right:5rem;padding-left:5rem}}";const d=class{constructor(a){o(this,a);this.onClose=e(this,"close",7);this.onClick=o=>{o.stopPropagation();o.preventDefault();this.close()};this.maxWidth=696;this.isOpen=false;this.hasInverseHeader=false;this.modalTitle=undefined;this.hasCloseIcon=true}async open(){this.isOpen=true}async close(){this.isOpen=false;this.el.addEventListener("transitionend",(()=>{this.onClose.emit()}),{once:true})}onEscape(o){if(o.key==="Escape"||o.key==="Esc"){this.close()}}componentDidLoad(){this.el.querySelectorAll('[data-dismiss="modal"]').forEach((o=>{o.addEventListener("click",(()=>this.close()))}))}render(){const o=this.isOpen?"modal-open":"";const e=this.hasInverseHeader?"modal-header-inverse":"";const i=this.hasCloseIcon?a("button",{type:"button",class:"modal-close",onClick:this.onClick,"aria-label":"Close"},a("road-icon",{icon:r,"aria-hidden":"true"})):"";return a(t,{class:`modal ${o}`,tabindex:"-1",role:"dialog"},a("div",{class:"modal-overlay",onClick:this.onClick,tabindex:"-1"}),a("div",{class:"modal-dialog",style:{maxWidth:`${this.maxWidth}px`},role:"document",tabindex:"0"},a("div",{class:"modal-content"},a("header",{class:`modal-header ${e}`},a("h2",{class:"modal-title"},this.modalTitle),i),a("div",{class:"modal-body"},a("slot",null)))))}get el(){return i(this)}};d.style=n;export{d as road_modal};
+//# sourceMappingURL=p-bb6453af.entry.js.map

package/dist/roadtrip/p-bb6453af.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["modalCss","Modal","this","onClick","ev","stopPropagation","preventDefault","close","open","isOpen","el","addEventListener","onClose","emit","once","onEscape","event","key","componentDidLoad","querySelectorAll","forEach","item","render","modalIsOpenClass","inverseHeaderClass","hasInverseHeader","closeIconElement","hasCloseIcon","h","type","class","icon","navigationClose","Host","tabindex","role","style","maxWidth","modalTitle"],"sources":["src/components/modal/modal.css?tag=road-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/*\n * Modal\n *\n * Index\n * - Overlay\n * - Modal\n * - Content\n * - Header\n * - Actions\n * - Title\n * - Body\n */\n\n/**\n * @prop --z-index: The z-index of the Modal.\n */\n\n\n/* OVERLAY\n -------------------- */\n\n:host {\n  --z-index: 3;\n\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--z-index);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  font-family: var(--road-font, sans-serif);\n  line-height: 1.5;\n  color: var(--road-grey-900);\n  visibility: hidden !important;\n  opacity: 0;\n  transition: opacity 0.15s linear, visibility 0.15s;\n}\n\n/* OVERLAY\n -------------------- */\n\n.modal-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  touch-action: none;\n  cursor: pointer;\n  background: var(--road-overlay);\n}\n\n/* MODAL\n -------------------- */\n\n.modal-dialog {\n  position: relative;\n  width: 100%;\n  pointer-events: none;\n  transition: transform 0.3s ease-out;\n  transform: translateY(50px);\n}\n\n/**\n * Open state\n */\n\n:host(.modal-open) {\n  visibility: visible !important;\n  opacity: 1;\n}\n\n:host(.modal-open) .modal-dialog {\n  transform: none;\n}\n\n/* CONTENT\n -------------------- */\n\n.modal-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100vh;\n  pointer-events: auto;\n  background: var(--road-surface);\n  background-clip: padding-box;\n  box-shadow: var(--road-elevation-hight);\n}\n\n@media (min-width: 768px) {\n\n  .modal-content {\n    height: auto;\n    border-radius: 0.25rem;\n  }\n}\n\n/* HEADER\n -------------------- */\n\n.modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  color: var(--road-on-header-surface);\n  background: var(--road-header-surface);\n}\n\n.modal-header road-icon {\n  color: var(--road-header-icon);\n}\n\n@media (min-width: 768px) {\n\n  .modal-header {\n    border-radius: 0.25rem 0.25rem 0 0;\n  }\n}\n\n/**\n * Modal header inverse colors\n */\n\n.modal-header-inverse {\n  color: var(--road-on-surface);\n  background: none;\n}\n\n.modal-header-inverse road-icon {\n  color: var(--road-icon);\n}\n\n/* ACTIONS\n -------------------- */\n\n.modal-action,\n.modal-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  padding: 0;\n  font-weight: 700;\n  color: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: 0;\n  appearance: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.modal-action ~ .modal-title,\n.modal-close ~ .modal-title {\n  padding-left: 0;\n}\n\n.modal-action-left,\n.modal-close-left {\n  margin-right: auto;\n}\n\n/* TITLE\n -------------------- */\n\n.modal-title {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  height: 3.5rem;\n  padding-left: 3.5rem;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  font-weight: 400;\n}\n\n/* BODY\n -------------------- */\n\n.modal-body {\n  padding: 2.5rem 0.5rem;\n  overflow-y: auto;\n}\n\n.modal-header-inverse + .modal-body {\n  padding-top: 0;\n}\n\n@media (min-width: 768px) {\n\n  .modal-body {\n    max-height: 86vh;\n    padding-right: 5rem;\n    padding-left: 5rem;\n  }\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\n\n/**\n * @slot  - Content of the modal.\n */\n\n@Component({\n  tag: 'road-modal',\n  styleUrl: 'modal.css',\n  shadow: true,\n})\nexport class Modal {\n\n  /**\n   * Current reference of the modal\n   */\n  @Element() el!: HTMLRoadModalElement;\n\n  /**\n   * Max width of the modal on desktop\n   */\n  @Prop() maxWidth: number = 696;\n\n  /**\n   * Set isOpen propertie to true to show the modal\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * inverse header colors\n   */\n  @Prop() hasInverseHeader: boolean = false;\n\n  /**\n   * Title of the modal in the header bar\n   */\n  @Prop() modalTitle?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Indicate when closing the modal\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Open the modal\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the modal\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.el.addEventListener('transitionend', () => {\n      this.onClose.emit();\n    }, { once: true});\n  }\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if (event.key === 'Escape' || event.key === \"Esc\") {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n  }\n\n  render() {\n    const modalIsOpenClass = this.isOpen ? 'modal-open' : '';\n    const inverseHeaderClass = this.hasInverseHeader ? 'modal-header-inverse' : '';\n    const closeIconElement = this.hasCloseIcon ? <button type=\"button\" class=\"modal-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button> : '';\n\n    return (\n      <Host class={`modal ${modalIsOpenClass}`} tabindex=\"-1\" role=\"dialog\">\n        <div class=\"modal-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n        <div class=\"modal-dialog\" style={{ maxWidth: `${this.maxWidth}px` }} role=\"document\" tabindex=\"0\">\n          <div class=\"modal-content\">\n            <header class={`modal-header ${inverseHeaderClass}`}>\n              <h2 class=\"modal-title\">{this.modalTitle}</h2>\n              {closeIconElement}\n            </header>\n            <div class=\"modal-body\">\n              <slot/>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"oGAAA,MAAMA,EAAW,soE,MCYJC,EAAK,M,wDA2DRC,KAAAC,QAAWC,IACjBA,EAAGC,kBACHD,EAAGE,iBAEHJ,KAAKK,OAAO,E,cArDa,I,YAKgB,M,sBAKP,M,4CAUJ,I,CAWhC,UAAMC,GACJN,KAAKO,OAAS,I,CAOhB,WAAMF,GACJL,KAAKO,OAAS,MACdP,KAAKQ,GAAGC,iBAAiB,iBAAiB,KACxCT,KAAKU,QAAQC,MAAM,GAClB,CAAEC,KAAM,M,CAiBb,QAAAC,CAASC,GACP,GAAIA,EAAMC,MAAQ,UAAYD,EAAMC,MAAQ,MAAO,CACjDf,KAAKK,O,EAOT,gBAAAW,GACEhB,KAAKQ,GAAGS,iBAAiB,0BAA0BC,SAAQC,IACzDA,EAAKV,iBAAiB,SAAS,IAAMT,KAAKK,SAAQ,G,CAItD,MAAAe,GACE,MAAMC,EAAmBrB,KAAKO,OAAS,aAAe,GACtD,MAAMe,EAAqBtB,KAAKuB,iBAAmB,uBAAyB,GAC5E,MAAMC,EAAmBxB,KAAKyB,aAAeC,EAAA,UAAQC,KAAK,SAASC,MAAM,cAAc3B,QAASD,KAAKC,QAAO,aAAa,SAAQyB,EAAA,aAAWG,KAAMC,EAAe,cAAc,UAA+B,GAE9M,OACEJ,EAACK,EAAI,CAACH,MAAO,SAASP,IAAoBW,SAAS,KAAKC,KAAK,UAC3DP,EAAA,OAAKE,MAAM,gBAAgB3B,QAASD,KAAKC,QAAS+B,SAAS,OAC3DN,EAAA,OAAKE,MAAM,eAAeM,MAAO,CAAEC,SAAU,GAAGnC,KAAKmC,cAAgBF,KAAK,WAAWD,SAAS,KAC5FN,EAAA,OAAKE,MAAM,iBACTF,EAAA,UAAQE,MAAO,gBAAgBN,KAC7BI,EAAA,MAAIE,MAAM,eAAe5B,KAAKoC,YAC7BZ,GAEHE,EAAA,OAAKE,MAAM,cACTF,EAAA,gB"}

package/dist/roadtrip/{p-439e1124.entry.js → p-bcb6f48c.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as o,H as a}from"./p-abdbf6ac.js";import"./p-e8c090a5.js";const t=":host{box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.5rem;font-size:var(--road-body-small);border-radius:0.25rem}:host(.tag-grey){color:var(--road-grey-30);background-color:var(--road-grey-85)}:host(.tag-grey.tag-grey-contrast){color:var(--road-on-primary);background-color:var(--road-grey-40)}:host(.tag-yellow){color:var(--road-yellow-mikado-20);background-color:var(--road-yellow-mikado-90)}:host(.tag-yellow.tag-yellow-contrast){color:var(--road-yellow-mikado-20);background-color:var(--road-yellow-mikado-60)}:host(.tag-red){color:var(--road-red-pepper-30);background-color:var(--road-red-pepper-95)}:host(.tag-red.tag-red-contrast){color:var(--road-on-primary);background-color:var(--road-red-pepper-60)}:host(.tag-violet){color:var(--road-violet-electric-30);background-color:var(--road-violet-electric-95)}:host(.tag-violet.tag-violet-contrast){color:var(--road-on-primary);background-color:var(--road-violet-electric-60)}:host(.tag-blue){color:var(--road-blue-klein-40);background-color:var(--road-blue-klein-95)}:host(.tag-blue.tag-blue-contrast){color:var(--road-on-primary);background-color:var(--road-blue-klein-60)}:host(.tag-green){color:var(--road-green-monstera-30);background-color:var(--road-green-monstera-95)}:host(.tag-green.tag-green-contrast){color:var(--road-on-primary);background-color:var(--road-green-monstera-60)}@media (any-hover: hover){:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary:hover){background:var(--road-button-primary-variant)}:host(.chip-secondary:hover) .chip-close{color:var(--road-primary)}}:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary.focus-visible){background:var(--road-button-primary-variant)}";const e=class{constructor(o){r(this,o);this.color="grey";this.contrast=false}render(){const r=this.contrast?`tag-${this.color} tag-${this.color}-contrast`:`tag-${this.color}`;return o(a,{class:`${r}`},o("slot",null))}};e.style=t;export{e as road_tag};
-//# sourceMappingURL=p-439e1124.entry.js.map
+import{r,h as o,H as a}from"./p-6475c1af.js";import"./p-1ccae339.js";const t=":host{box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.5rem;font-size:var(--road-body-small);border-radius:0.25rem}:host(.tag-grey){color:var(--road-grey-30);background-color:var(--road-grey-85)}:host(.tag-grey.tag-grey-contrast){color:var(--road-on-primary);background-color:var(--road-grey-40)}:host(.tag-yellow){color:var(--road-yellow-mikado-20);background-color:var(--road-yellow-mikado-90)}:host(.tag-yellow.tag-yellow-contrast){color:var(--road-yellow-mikado-20);background-color:var(--road-yellow-mikado-60)}:host(.tag-red){color:var(--road-red-pepper-30);background-color:var(--road-red-pepper-95)}:host(.tag-red.tag-red-contrast){color:var(--road-on-primary);background-color:var(--road-red-pepper-60)}:host(.tag-violet){color:var(--road-violet-electric-30);background-color:var(--road-violet-electric-95)}:host(.tag-violet.tag-violet-contrast){color:var(--road-on-primary);background-color:var(--road-violet-electric-60)}:host(.tag-blue){color:var(--road-blue-klein-40);background-color:var(--road-blue-klein-95)}:host(.tag-blue.tag-blue-contrast){color:var(--road-on-primary);background-color:var(--road-blue-klein-60)}:host(.tag-green){color:var(--road-green-monstera-30);background-color:var(--road-green-monstera-95)}:host(.tag-green.tag-green-contrast){color:var(--road-on-primary);background-color:var(--road-green-monstera-60)}@media (any-hover: hover){:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary:hover){background:var(--road-button-primary-variant)}:host(.chip-secondary:hover) .chip-close{color:var(--road-primary)}}:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary.focus-visible){background:var(--road-button-primary-variant)}";const e=class{constructor(o){r(this,o);this.color="grey";this.contrast=false}render(){const r=this.contrast?`tag-${this.color} tag-${this.color}-contrast`:`tag-${this.color}`;return o(a,{class:`${r}`},o("slot",null))}};e.style=t;export{e as road_tag};
+//# sourceMappingURL=p-bcb6f48c.entry.js.map

package/dist/roadtrip/p-bcb6f48c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tagCss","Tag","render","contrastClass","this","contrast","color","h","Host","class"],"sources":["src/components/tag/tag.css?tag=road-tag&encapsulation=shadow","src/components/tag/tag.tsx"],"sourcesContent":["/*\n * Chip\n *\n * Index\n * - Color\n */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  padding: 0.125rem 0.5rem;\n  font-size: var(--road-body-small);\n  border-radius: 0.25rem;\n}\n\n/* COLOR\n -------------------- */\n\n:host(.tag-grey) {\n  color: var(--road-grey-30);\n  background-color: var(--road-grey-85);\n}\n\n:host(.tag-grey.tag-grey-contrast) {\n  color: var(--road-on-primary);\n  background-color: var(--road-grey-40);\n}\n\n:host(.tag-yellow) {\n  color: var(--road-yellow-mikado-20);\n  background-color: var(--road-yellow-mikado-90);\n}\n\n:host(.tag-yellow.tag-yellow-contrast) {\n  color: var(--road-yellow-mikado-20);\n  background-color: var(--road-yellow-mikado-60);\n}\n\n:host(.tag-red) {\n  color: var(--road-red-pepper-30);\n  background-color: var(--road-red-pepper-95);\n}\n\n:host(.tag-red.tag-red-contrast) {\n  color: var(--road-on-primary);\n  background-color: var(--road-red-pepper-60);\n}\n\n:host(.tag-violet) {\n  color: var(--road-violet-electric-30);\n  background-color: var(--road-violet-electric-95);\n}\n\n:host(.tag-violet.tag-violet-contrast) {\n  color: var(--road-on-primary);\n  background-color: var(--road-violet-electric-60);\n}\n\n:host(.tag-blue) {\n  color: var(--road-blue-klein-40);\n  background-color: var(--road-blue-klein-95);\n}\n\n:host(.tag-blue.tag-blue-contrast) {\n  color: var(--road-on-primary);\n  background-color: var(--road-blue-klein-60);\n}\n\n:host(.tag-green) {\n  color: var(--road-green-monstera-30);\n  background-color: var(--road-green-monstera-95);\n}\n\n:host(.tag-green.tag-green-contrast) {\n  color: var(--road-on-primary);\n  background-color: var(--road-green-monstera-60);\n}\n\n/**\n * Hover state\n */\n\n@media (any-hover: hover) {\n\n  :host(.chip-outline:hover) {\n    border-color: var(--road-outline-variant);\n  }\n\n  :host(.chip-secondary:hover) {\n    background: var(--road-button-primary-variant);\n  }\n\n  :host(.chip-secondary:hover) .chip-close {\n    color: var(--road-primary);\n  }\n}\n\n/**\n * Focus state\n */\n\n:host(.chip-outline:hover) {\n  border-color: var(--road-outline-variant);\n}\n\n:host(.chip-secondary.focus-visible) {\n  background: var(--road-button-primary-variant);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the tag.\n */\n\n@Component({\n  tag: 'road-tag',\n  styleUrl: 'tag.css',\n  shadow: true,\n})\nexport class Tag {\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color?: 'grey' | 'yellow' | 'red' | 'violet' | 'blue' | 'green'= 'grey';\n\n    /**\n   * Set to `true` for a contrast tag, for example on a gryy surface\n   */\n    @Prop() contrast: boolean = false;\n\n  render() {\n\n    const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;\n\n    return (\n      <Host\n        class={`${contrastClass}`}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n}"],"mappings":"qEAAA,MAAMA,EAAS,uuD,MCYFC,EAAG,M,oCAI2D,O,cAK3C,K,CAE9B,MAAAC,GAEE,MAAMC,EAAgBC,KAAKC,SAAW,OAAOD,KAAKE,aAAaF,KAAKE,iBAAmB,OAAOF,KAAKE,QAEnG,OACEC,EAACC,EAAI,CACHC,MAAO,GAAGN,KAEVI,EAAA,a"}