@roadtrip/components 3.17.0 → 3.18.0

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

@@ -1 +0,0 @@
-{"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-e2149bdf.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as s,H as n}from"./p-f3d586b3.js";const e=":host{--btn-margin-bottom:1rem;--btn-padding-start:1rem;--btn-padding-end:1rem;--btn-font-size:1rem;--max-height:500px;display:block}.collapsed-content{max-height:0;overflow:hidden;transition:max-height 0.4s ease-in-out}.collapse-open{max-height:var(--max-height)}.collapse-btn{--margin-bottom:var(--btn-margin-bottom);--border-radius:var(--btn-border-radius);--padding-start:var(--btn-padding-start);--padding-end:var(--btn-padding-end);--font-size:var(--btn-font-size)}.collapse-btn-centered{display:flex;justify-content:center}";const a=class{constructor(s){t(this,s);this.onClick=()=>{this.isOpen=!this.isOpen};this.isOpen=false;this.showMore="show more";this.showLess="show less";this.centered=false}render(){const t=this.isOpen?"collapse-open":"";const e=this.isOpen?this.showLess:this.showMore;const a=this.centered?"collapse-btn-centered":"";return s(n,null,s("slot",null),s("div",{class:`collapsed-content ${t}`},s("slot",{name:"collapsed-content"})),s("div",{class:`collapse-btn-wrapper ${a}`},s("road-button",{onClick:this.onClick,class:"collapse-btn btn-link"},e)))}};a.style=e;export{a as road_collapse};
-//# sourceMappingURL=p-e2149bdf.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["collapseCss","Collapse","this","onClick","isOpen","render","isOpenClass","buttonText","showLess","showMore","centerClass","centered","h","Host","class","name"],"sources":["src/components/collapse/collapse.css?tag=road-collapse&encapsulation=shadow","src/components/collapse/collapse.tsx"],"sourcesContent":["/*\n * Collapse\n *\n * Index\n * - Collapse\n * - Content\n * - Button\n */\n\n/**\n * @prop --btn-padding-start: Left padding  of the button\n * @prop --btn-padding-end: Right padding of the button\n * @prop --btn-margin-bottom: Bottom margin of the button\n * @prop --btn-font-size: Font size of the text button\n * @prop --max-height: maximum height of the collapse content\n */\n\n/* COLLAPSE\n -------------------- */\n\n:host {\n  --btn-margin-bottom: 1rem;\n  --btn-padding-start: 1rem;\n  --btn-padding-end: 1rem;\n  --btn-font-size: 1rem;\n  --max-height: 500px;\n\n  display: block;\n}\n\n/* CONTENT\n -------------------- */\n\n.collapsed-content {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.4s ease-in-out;\n}\n\n/**\n * Open state\n */\n\n.collapse-open {\n  max-height: var(--max-height);\n}\n\n/* BUTTON\n -------------------- */\n\n.collapse-btn {\n  --margin-bottom: var(--btn-margin-bottom);\n  --border-radius: var(--btn-border-radius);\n  --padding-start: var(--btn-padding-start);\n  --padding-end: var(--btn-padding-end);\n  --font-size: var(--btn-font-size);\n}\n\n.collapse-btn-centered {\n  display: flex;\n  justify-content: center;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Content visible when collapsed.\n * @slot collapsed-content - content not visible when collapsed.\n */\n\n@Component({\n  tag: 'road-collapse',\n  styleUrl: 'collapse.css',\n  shadow: true,\n})\nexport class Collapse {\n\n  /**\n   * Set to `true` to display the collapsed part and to `false` to hide it.\n   */\n  @Prop({ mutable: true }) isOpen : boolean = false;\n\n  /**\n   * Text displayed in the button when the content is collapsed\n   */\n  @Prop() showMore : string = 'show more';\n\n  /**\n   * Text displayed in the button when the content is not collapsed\n   */\n  @Prop() showLess : string = 'show less';\n\n  /**\n   * if `true` the button will be centered\n   */\n  @Prop() centered: boolean = false;\n\n  /**\n   * Toggle the display when clicking header\n   */\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n    const isOpenClass = this.isOpen ? 'collapse-open' : '';\n    const buttonText = this.isOpen ? this.showLess : this .showMore;\n    const centerClass = this.centered ? 'collapse-btn-centered' : '';\n\n    return (\n      <Host>\n        <slot/>\n        <div class={`collapsed-content ${isOpenClass}`}>\n          <slot name=\"collapsed-content\"/>\n        </div>\n        <div class={`collapse-btn-wrapper ${centerClass}`}>\n          <road-button onClick={this.onClick} class=\"collapse-btn btn-link\">{buttonText}</road-button>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,qhB,MCYPC,EAAQ,M,yBAyBXC,KAAAC,QAAU,KAChBD,KAAKE,QAAUF,KAAKE,MAAM,E,YArBgB,M,cAKhB,Y,cAKA,Y,cAKA,K,CAS5B,MAAAC,GACE,MAAMC,EAAcJ,KAAKE,OAAS,gBAAkB,GACpD,MAAMG,EAAaL,KAAKE,OAASF,KAAKM,SAAWN,KAAMO,SACvD,MAAMC,EAAcR,KAAKS,SAAW,wBAA0B,GAE9D,OACEC,EAACC,EAAI,KACHD,EAAA,aACAA,EAAA,OAAKE,MAAO,qBAAqBR,KAC/BM,EAAA,QAAMG,KAAK,uBAEbH,EAAA,OAAKE,MAAO,wBAAwBJ,KAClCE,EAAA,eAAaT,QAASD,KAAKC,QAASW,MAAM,yBAAyBP,I"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["segmentedButtonCss","SegmentedButton","this","onKeyUp","ev","key","selectTab","onClick","onButtonBarChanged","dispatchedFrom","target","parent","el","parentElement","composedPath","includes","contains","selected","tab","detail","undefined","roadsegmentedbuttonclick","emit","roadSegmentedButtonClick","preventDefault","tabIndex","hasTabIndex","hasAttribute","getAttribute","render","sizeClass","size","h","Host","onKeyup","role","tabindex","id","class","type","part"],"sources":["src/components/segmented-button/segmented-button.css?tag=road-segmented-button&encapsulation=shadow","src/components/segmented-button/segmented-button.tsx"],"sourcesContent":["/*\n * Tab button\n */\n\n\n/* BUTTON\n -------------------- */\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  box-sizing: border-box;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  max-height: 2.5rem;\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n  color: var(--road-primary);\n  text-decoration: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  background-color: var(--road-surface);\n  border-top: 1px solid var(--road-primary);\n  border-bottom: 1px solid var(--road-primary);\n  border-left: 1px solid var(--road-primary);\n  border-radius: 0;\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:host(:first-child){\n  border: 1px solid var(--road-primary);\n  border-right: 0;\n  border-radius: 999em 0 0 999em;\n}\n\n:host(:last-child){\n  border: 1px solid var(--road-primary);\n  border-radius: 0 999em 999em 0;\n}\n\n/**\n * Small\n */\n\n:host(.btn-sm) {\n  height: 2rem;\n  font-size: var(--road-button-small);\n}\n\n/**\n * Active state\n */\n\n:host(.tab-selected) {\n  color: var(--road-primary-contrast);\n  background-color: var(--road-primary);\n}\n\n:host(.tab-selected:hover) {\n  background-color: var(--road-button-primary-variant);\n}\n\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n  background: var(--road-primary-90);\n}\n\n/**\n * Focus state\n */\n\n\n:host(.focus-visible) {\n  background: var(--road-primary-90);\n  outline: 0;\n}\n\n:host(.tab-selected.focus-visible){\n  background-color: var(--road-button-primary-variant);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  max-height: 2.5rem;\n  padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n  margin: 0;\n  overflow: hidden;\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  -webkit-user-drag: none;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-segmented-button',\n  styleUrl: 'segmented-button.css',\n  shadow: true,\n})\nexport class SegmentedButton {\n\n  @Element() el!: HTMLRoadSegmentedButtonElement;\n\n  /**\n    * The Segmented buttons size.\n    */\n   @Prop() size?: 'sm' | 'md' = 'md';\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadsegmentedbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadSegmentedButtonClick!: EventEmitter;\n\n  @Listen('roadSegmentedButtonBarChanged', { target: 'window' })\n  @Listen('roadSegmentedButtonbarchanged', { target: 'window' })\n  onButtonBarChanged(ev: CustomEvent) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      this.roadsegmentedbuttonclick.emit({\n        tab: this.tab,\n        selected: this.selected,\n      });\n      this.roadSegmentedButtonClick.emit({\n        tab: this.tab,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get tabIndex() {\n    const hasTabIndex = this.el.hasAttribute('tabindex');\n\n    if (hasTabIndex) {\n      return this.el.getAttribute('tabindex');\n    }\n\n    return 0;\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { tabIndex, selected, tab } = this;\n\n    const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex={tabIndex}\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          [`${sizeClass}`]: true,\n        }}\n      >\n        <button type=\"button\" tabIndex={-1} class=\"button-native\" part=\"native\">\n            <slot/>\n        </button>\n      </Host>\n    );\n  }\n}"],"mappings":"gEAAA,MAAMA,EAAqB,89D,MCYdC,EAAe,M,+JA+DlBC,KAAAC,QAAWC,IACjB,GAAIA,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACxCH,KAAKI,UAAUF,E,GAIXF,KAAAK,QAAWH,IACjBF,KAAKI,UAAUF,EAAG,E,UA/DU,K,cAKM,M,mBAiBpC,kBAAAI,CAAmBJ,GACjB,MAAMK,EAAiBL,EAAGM,OAC1B,MAAMC,EAAST,KAAKU,GAAGC,cAEvB,GAAKT,EAAGU,cAAgBV,EAAGU,eAAeC,SAASJ,IAAaF,GAAkBA,EAAeO,SAASd,KAAKU,IAAM,CACnHV,KAAKe,SAAWf,KAAKgB,MAAQd,EAAGe,OAAOD,G,EAInC,SAAAZ,CAAUF,GAChB,GAAIF,KAAKgB,MAAQE,UAAW,CAC1BlB,KAAKmB,yBAAyBC,KAAK,CACjCJ,IAAKhB,KAAKgB,IACVD,SAAUf,KAAKe,WAEjBf,KAAKqB,yBAAyBD,KAAK,CACjCJ,IAAKhB,KAAKgB,IACVD,SAAUf,KAAKe,WAGjBb,EAAGoB,gB,EAIP,YAAYC,GACV,MAAMC,EAAcxB,KAAKU,GAAGe,aAAa,YAEzC,GAAID,EAAa,CACf,OAAOxB,KAAKU,GAAGgB,aAAa,W,CAG9B,OAAO,C,CAaT,MAAAC,GACE,MAAMJ,SAAEA,EAAQR,SAAEA,EAAQC,IAAEA,GAAQhB,KAEpC,MAAM4B,EAAY5B,KAAK6B,OAASX,UAAY,OAAOlB,KAAK6B,OAAS,GAGjE,OACEC,EAACC,EAAI,CACH1B,QAASL,KAAKK,QACd2B,QAAShC,KAAKC,QACdgC,KAAK,MACLC,SAAUX,EAAQ,gBACHR,EAAW,OAAS,KACnCoB,GAAInB,IAAQE,UAAY,cAAcF,IAAQ,KAC9CoB,MAAO,CACL,eAAgBrB,EAChB,CAAC,GAAGa,KAAc,OAGpBE,EAAA,UAAQO,KAAK,SAASd,UAAW,EAAGa,MAAM,gBAAgBE,KAAK,UAC3DR,EAAA,c"}

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

@@ -1,2 +0,0 @@
-import{r,c as e,h as a,a as n}from"./p-f3d586b3.js";import{h as i,i as t}from"./p-73fe2357.js";const o='.sc-road-range-h{display:block}.form-group.sc-road-range{width:100%}.form-range.sc-road-range{position:relative;display:flex;flex-direction:column;width:100%;margin-bottom:6px}.form-range-input.sc-road-range{position:relative;z-index:1;width:100%;background:transparent;outline:0;-webkit-appearance:none;appearance:none}.form-range.sc-road-range>output.sc-road-range::after{display:block;font-size:var(--road-label-medium);text-align:right;content:counter(variable);counter-reset:variable var(--value)}.form-range-progress.sc-road-range{position:relative;z-index:0;display:block;width:100%;margin-top:-1rem}.form-range-input.sc-road-range::-webkit-slider-runnable-track{border:0;-webkit-appearance:none;appearance:none}.form-range-input.sc-road-range::-moz-range-track{height:0.5rem;border:0;appearance:none}.form-range-progress.sc-road-range::before{display:block;height:0.5rem;content:"";background-color:var(--road-on-surface-disabled);border:0;border-radius:1.125rem}.form-range-progress.sc-road-range::after{position:absolute;top:0;right:0;left:0;display:block;width:calc((var(--value) * 100%) / var(--max));height:0.5rem;content:"";background:var(--road-primary);border-radius:1.125rem}.form-range-input.sc-road-range::-webkit-slider-thumb{position:relative;z-index:1;width:1.625rem;height:1.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);-webkit-appearance:none;appearance:none}.form-range-input.sc-road-range::-moz-range-thumb{position:relative;z-index:1;box-sizing:border-box;width:1.625rem;height:1.625rem;margin-top:-0.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-webkit-slider-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-moz-range-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.sc-road-range-s>datalist{display:flex;justify-content:space-between}.sc-road-range-s>datalist option{width:32px;margin:0;font-size:var(--road-label-medium);text-align:center}';const s=class{constructor(a){r(this,a);this.roadchange=e(this,"roadchange",7);this.roadChange=e(this,"roadChange",7);this.onInput=r=>{const e=r.target;if(e){this.value=e.value||""}if(this.value!==null&&this.value!==undefined){this.el.style.setProperty("--value",`${this.value}`)}};this.rangeId=`road-range-${d++}`;this.value="";this.min=undefined;this.max=undefined;this.step=undefined;this.showValue=false;this.showTick=false;this.showLabels=false}valueChanged(){this.roadchange.emit({value:this.value==null?this.value:this.value.toString()});this.roadChange.emit({value:this.value==null?this.value:this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}render(){const r=this.getValue();const e=this.showLabels!==undefined?`tickmarks`:"";return a("div",{class:"form-group d-flex align-items-end"},this.showTick&&a("road-icon",{icon:t,class:"mr-8",size:"sm"}),a("div",{class:"form-range",style:{"--min:":this.min,"--max":this.max,"--value":r}},this.showValue&&a("output",null),this.showLabels&&a("slot",{name:"datalist"}),a("input",{type:"range",class:"form-range-input",id:this.rangeId,min:this.min,max:this.max,value:r,onInput:this.onInput,list:e}),a("div",{class:"form-range-progress"})),this.showTick&&a("road-icon",{icon:i,class:"ml-8",size:"sm"}))}get el(){return n(this)}static get watchers(){return{value:["valueChanged"]}}};let d=0;s.style=o;export{s as road_range};
-//# sourceMappingURL=p-ee7aaee5.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["rangeCss","Range","this","onInput","ev","input","target","value","undefined","el","style","setProperty","rangeIds","valueChanged","roadchange","emit","toString","roadChange","getValue","render","datalist","showLabels","h","class","showTick","icon","navigationAddLessSolid","size","min","max","showValue","name","type","id","rangeId","list","navigationAddMoreSolid"],"sources":["src/components/range/range.css?tag=road-range&encapsulation=scoped","src/components/range/range.tsx"],"sourcesContent":["/*\n * Range\n *\n *\n * Index\n * - Input\n * - Value\n * - Slider\n * - Progress\n * - Cursor\n */\n\n:host {\n  display: block;\n}\n\n.form-group{\n  width: 100%;\n}\n\n.form-range {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  margin-bottom: 6px;\n}\n\n/* INPUT\n -------------------- */\n\n.form-range-input {\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: transparent;\n  outline: 0;\n  appearance: none;\n}\n\n/* VALUE\n -------------------- */\n\n.form-range > output::after {\n  display: block;\n  font-size: var(--road-label-medium);\n  text-align: right;\n  content: counter(variable);\n  counter-reset: variable var(--value);\n}\n\n/* SLIDER\n -------------------- */\n\n.form-range-progress {\n  position: relative;\n  z-index: 0;\n  display: block;\n  width: 100%;\n  margin-top: -1rem;\n}\n\n.form-range-input::-webkit-slider-runnable-track {\n  border: 0;\n  appearance: none;\n}\n\n.form-range-input::-moz-range-track {\n  height: 0.5rem;\n  border: 0;\n  appearance: none;\n}\n\n.form-range-progress::before {\n  display: block;\n  height: 0.5rem;\n  content: \"\";\n  background-color: var(--road-on-surface-disabled);\n  border: 0;\n  border-radius: 1.125rem;\n}\n\n/* PROGRESS\n -------------------- */\n\n.form-range-progress::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  display: block;\n  width: calc((var(--value) * 100%) / var(--max));\n  height: 0.5rem;\n  content: \"\";\n  background: var(--road-primary);\n  border-radius: 1.125rem;\n}\n\n/* CURSOR\n-------------------- */\n\n.form-range-input::-webkit-slider-thumb {\n  position: relative;\n  z-index: 1;\n  width: 1.625rem;\n  height: 1.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n.form-range-input::-moz-range-thumb {\n  position: relative;\n  z-index: 1;\n  box-sizing: border-box;\n  width: 1.625rem;\n  height: 1.625rem;\n  margin-top: -0.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n/**\n *  Focus state\n */\n\n:host(.focus-visible) .form-range-input::-webkit-slider-thumb,\n:host(:active) .form-range-input::-webkit-slider-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n:host(.focus-visible) .form-range-input::-moz-range-thumb,\n:host(:active) .form-range-input::-moz-range-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n/* DATALIST\n -------------------- */\n\n::slotted(datalist) {\n  display: flex;\n  justify-content: space-between;\n}\n\n::slotted(datalist) option {\n  width: 32px;\n  margin: 0;\n  font-size: var(--road-label-medium);\n  text-align: center;\n}\n\n","import { Component, h, Element, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { navigationAddLessSolid, navigationAddMoreSolid } from '../../../icons';\n\n/**\n * @slot datalist - list of labels. also put show-labels=\"true\" and max=\"10\" for this exemple\n * `<datalist id=\"tickmarks\" slot=\"datalist\" class=\"tickmarks\">`\n      `<option value=\"0\" label=\"0%\"></option>`\n      `<option value=\"10\" label=\"10%\"></option>`\n      `<option value=\"20\" label=\"20%\"></option>`\n      `<option value=\"30\" label=\"30%\"></option>`\n      `<option value=\"40\" label=\"40%\"></option>`\n      `<option value=\"50\" label=\"50%\"></option>`\n      `<option value=\"60\" label=\"60%\"></option>`\n     `<option value=\"70\" label=\"70%\"></option>`\n     `<option value=\"80\" label=\"80%\"></option>`\n      `<option value=\"90\" label=\"90%\"></option>`\n      `<option value=\"100\" label=\"100%\"></option>`\n    `</datalist>`\n */\n\n@Component({\n  tag: 'road-range',\n  styleUrl: 'range.css',\n  scoped: true,\n})\nexport class Range {\n\n  @Element() el!: HTMLRoadRangeElement;\n\n  /**\n   * The id of range\n   */\n  @Prop() rangeId: string = `road-range-${rangeIds++}`;\n\n  /**\n   * The value of the range.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\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   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max!: string;\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   * Display the current value of the range\n   */\n  @Prop() showValue: boolean = false;\n\n  /**\n   * Display Tick of the range\n   */\n  @Prop() showTick: boolean = false;\n\n    /**\n   * Display labels of the range\n   */\n     @Prop() showLabels: boolean = false;\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 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  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    if(this.value !== null && this.value !== undefined) {\n      this.el.style.setProperty('--value', `${this.value}`);\n    }\n  };\n\n  render() {\n    const value = this.getValue();\n    const datalist = this.showLabels !== undefined ? `tickmarks` : '';\n\n    return (\n      <div class=\"form-group d-flex align-items-end\">\n        {this.showTick && <road-icon icon={navigationAddLessSolid} class=\"mr-8\" size='sm'></road-icon>}\n        <div class=\"form-range\" style={{'--min:': this.min, '--max': this.max, '--value': value}}>\n          {this.showValue && <output></output>}\n          {this.showLabels && <slot name=\"datalist\"/>}\n          <input\n            type=\"range\"\n            class=\"form-range-input\"\n            id={this.rangeId}\n            min={this.min}\n            max={this.max}\n            value={value}\n            onInput={this.onInput}\n            list={datalist}\n            \n          />\n          <div class=\"form-range-progress\"></div>\n        </div>\n        {this.showTick && <road-icon icon={navigationAddMoreSolid} class=\"ml-8\" size='sm'></road-icon>}\n      </div>\n    );\n  }\n\n}\n\nlet rangeIds = 0;\n"],"mappings":"+FAAA,MAAMA,EAAW,i5E,MCyBJC,EAAK,M,uGAuERC,KAAAC,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTH,KAAKK,MAAQF,EAAME,OAAS,E,CAE9B,GAAGL,KAAKK,QAAU,MAAQL,KAAKK,QAAUC,UAAW,CAClDN,KAAKO,GAAGC,MAAMC,YAAY,UAAW,GAAGT,KAAKK,Q,gBAtEvB,cAAcK,M,WAKkB,G,yEAqB7B,M,cAKD,M,gBAKK,K,CAMvB,YAAAC,GACRX,KAAKY,WAAWC,KAAK,CAAER,MAAOL,KAAKK,OAAS,KAAOL,KAAKK,MAAQL,KAAKK,MAAMS,aAC3Ed,KAAKe,WAAWF,KAAK,CAAER,MAAOL,KAAKK,OAAS,KAAOL,KAAKK,MAAQL,KAAKK,MAAMS,Y,CAcrE,QAAAE,GACN,cAAchB,KAAKK,QAAU,SACzBL,KAAKK,MAAMS,YACVd,KAAKK,OAAS,IAAIS,U,CAazB,MAAAG,GACE,MAAMZ,EAAQL,KAAKgB,WACnB,MAAME,EAAWlB,KAAKmB,aAAeb,UAAY,YAAc,GAE/D,OACEc,EAAA,OAAKC,MAAM,qCACRrB,KAAKsB,UAAYF,EAAA,aAAWG,KAAMC,EAAwBH,MAAM,OAAOI,KAAK,OAC7EL,EAAA,OAAKC,MAAM,aAAab,MAAO,CAAC,SAAUR,KAAK0B,IAAK,QAAS1B,KAAK2B,IAAK,UAAWtB,IAC/EL,KAAK4B,WAAaR,EAAA,eAClBpB,KAAKmB,YAAcC,EAAA,QAAMS,KAAK,aAC/BT,EAAA,SACEU,KAAK,QACLT,MAAM,mBACNU,GAAI/B,KAAKgC,QACTN,IAAK1B,KAAK0B,IACVC,IAAK3B,KAAK2B,IACVtB,MAAOA,EACPJ,QAASD,KAAKC,QACdgC,KAAMf,IAGRE,EAAA,OAAKC,MAAM,yBAEZrB,KAAKsB,UAAYF,EAAA,aAAWG,KAAMW,EAAwBb,MAAM,OAAOI,KAAK,O,gFAOrF,IAAIf,EAAW,E"}

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

@@ -1,2 +0,0 @@
-import{r as o,h as r,a as t}from"./p-f3d586b3.js";const n=":host{--margin-top:0.5rem;display:block}.dropdown{position:relative;font-family:var(--road-font)}.dropdown summary{display:block;outline:none}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-medium-button{width:2.5rem;height:2.5rem}.dropdown-button:hover{background:var(--road-grey-200)}.position-right{display:flex;justify-content:flex-end}.bg-white{background:var(--road-grey-000)}.dropdown-button-icon{width:2.5rem;height:2.5rem}.dropdown-medium-button .dropdown-button-icon{width:1.75rem;height:1.75rem}.dropdown[open] .dropdown-menu{transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:0;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:absolute;z-index:1;display:flex;flex-direction:column;width:100%;min-width:16.875rem;padding:0.5rem 0;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out;transform:scaleY(0);transform-origin:0 0}.dropdown-left{left:0}.dropdown-right{right:0}.dropdown-item{min-height:40px;padding:0 1rem;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-surface);border:none;outline:none}.dropdown-item-border{border-color:var(--road-outline-weak);border-bottom:1px solid}.dropdown-item:hover,.dropdown-item.focus-visible{background:var(--road-surface-inverse)}";const e=class{constructor(r){o(this,r);this.onClick=()=>{this.isOpen=!this.isOpen};this.isOpen=false;this.isLight=false;this.isMedium=false;this.position=undefined;this.direction="bottom"}handleDocumentClick(o){if(o.target.closest("road-dropdown")===this.el){return}this.isOpen=false}render(){const o=this.isLight?"dropdown-button":"dropdown-button bg-white";const t=this.isMedium?"dropdown-medium-button dropdown-button":"dropdown-button bg-white";const n=this.position?`position-${this.position}`:"";const e=this.position?`dropdown-${this.position}`:"";const d=this.direction?`direction-${this.direction}`:"";return r("details",{class:"dropdown",open:this.isOpen},r("summary",{"aria-expanded":this.isOpen.toString(),tabindex:"0",role:"button",onClick:this.onClick},r("div",{class:`d-flex ${n}`},r("div",{class:`${o} ${t}`},r("road-icon",{name:"navigation-more",class:"dropdown-button-icon"})))),r("div",{class:`dropdown-menu ${d} ${e}`},r("slot",{name:"list"})))}get el(){return t(this)}};e.style=n;export{e as road_dropdown};
-//# sourceMappingURL=p-faba450c.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownCss","Dropdown","this","onClick","isOpen","handleDocumentClick","ev","target","closest","el","render","isLightButtonDropDown","isLight","isMediumButtonDropDown","isMedium","positionClass","position","dropdownClass","directionClass","direction","h","class","open","toString","tabindex","role","name"],"sources":["src/components/dropdown/dropdown.css?tag=road-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * Dropdown\n *\n * Index\n * - Dropdown\n * - Dropdown menu\n */\n\n/**\n * @prop --margin-top: Top margin of the menu\n */\n\n/* DROPDOWN\n -------------------- */\n\n:host {\n  --margin-top: 0.5rem;\n  display: block;\n}\n\n.dropdown {\n  position: relative;\n  font-family: var(--road-font);\n}\n\n.dropdown summary {\n  display: block;\n  outline: none;\n}\n\n.dropdown summary::-webkit-details-marker { /* remove native arrow */\n  display: none;\n}\n\n.dropdown-button{\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n\n.dropdown-medium-button{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.dropdown-button:hover{\n  background: var(--road-grey-200);\n}\n\n.position-right{\n  display: flex;\n  justify-content: flex-end;\n}\n\n.bg-white{\n  background: var(--road-grey-000);\n}\n\n.dropdown-button-icon{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.dropdown-medium-button .dropdown-button-icon{\n  width: 1.75rem;\n  height: 1.75rem;\n}\n\n/**\n * Open state\n */\n\n.dropdown[open] .dropdown-menu {\n  transform: scaleY(1);\n}\n\n.dropdown[open] .dropdown-menu.direction-top {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  transform: translate3d(0, -56px, 0);\n  will-change: transform;\n}\n\n/* MENU\n -------------------- */\n\n.dropdown-menu {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 16.875rem;\n  padding: 0.5rem 0;\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid;\n  border-color: var(--road-outline-weak);\n  border-radius: 0.25rem;\n  box-shadow: var(--road-elevation-low);\n  transition: transform 0.2s ease-in-out;\n  transform: scaleY(0);\n  transform-origin: 0 0;\n}\n\n.dropdown-left {\n  left: 0;\n}\n\n.dropdown-right {\n  right: 0;\n}\n\n\n/* ITEM\n -------------------- */\n\n.dropdown-item {\n  min-height: 40px;\n  padding: 0 1rem;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  background: var(--road-surface);\n  border: none;\n  outline: none;\n}\n\n.dropdown-item-border {\n  border-color: var(--road-outline-weak);\n  border-bottom: 1px solid;\n}\n\n/**\n * Hover state\n */\n\n.dropdown-item:hover,\n.dropdown-item.focus-visible {\n  background: var(--road-surface-inverse);\n}\n\n\n","import { Component, h, Element, Prop, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'road-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n\n  @Element() el!: HTMLRoadDropdownElement;\n\n\n  @Prop({ mutable: true }) isOpen: boolean = false;\n  @Prop() isLight: boolean = false;\n  @Prop() isMedium: boolean = false;\n  @Prop({ reflect: true }) position?: 'left' | 'right';\n  @Prop({ reflect: true }) direction?: 'top' | 'bottom' = 'bottom';\n\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(ev: MouseEvent) {\n    // Check if the clicked element is the dropdown button\n    if ((ev.target as HTMLElement).closest('road-dropdown') === this.el) {\n      return; // Do nothing if clicked element is the dropdown button\n    }\n    // Close dropdown if click is outside the dropdown\n    this.isOpen = false;\n  }\n\n  render() {\n    const isLightButtonDropDown = this.isLight ? 'dropdown-button' : 'dropdown-button bg-white';\n    const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button bg-white';\n    const positionClass = this.position ? `position-${this.position}` : '';\n    const dropdownClass = this.position ? `dropdown-${this.position}` : '';\n    const directionClass = this.direction ? `direction-${this.direction}` : '';\n\n    return (\n      <details class=\"dropdown\" open={this.isOpen}>\n        <summary aria-expanded={this.isOpen.toString()} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n          <div class={`d-flex ${positionClass}`}>\n            <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n              <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\"></road-icon>\n            </div>\n          </div>\n        </summary>\n        <div class={`dropdown-menu ${directionClass} ${dropdownClass}`}>\n          <slot name=\"list\" />\n        </div>\n      </details>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,kqD,MCOPC,EAAQ,M,yBAWXC,KAAAC,QAAU,KAChBD,KAAKE,QAAUF,KAAKE,MAAM,E,YAPe,M,aAChB,M,cACC,M,uCAE4B,Q,CAOxD,mBAAAC,CAAoBC,GAElB,GAAKA,EAAGC,OAAuBC,QAAQ,mBAAqBN,KAAKO,GAAI,CACnE,M,CAGFP,KAAKE,OAAS,K,CAGhB,MAAAM,GACE,MAAMC,EAAwBT,KAAKU,QAAU,kBAAoB,2BACjE,MAAMC,EAAyBX,KAAKY,SAAW,yCAA2C,2BAC1F,MAAMC,EAAgBb,KAAKc,SAAW,YAAYd,KAAKc,WAAa,GACpE,MAAMC,EAAgBf,KAAKc,SAAW,YAAYd,KAAKc,WAAa,GACpE,MAAME,EAAiBhB,KAAKiB,UAAY,aAAajB,KAAKiB,YAAc,GAExE,OACEC,EAAA,WAASC,MAAM,WAAWC,KAAMpB,KAAKE,QACnCgB,EAAA,2BAAwBlB,KAAKE,OAAOmB,WAAYC,SAAS,IAAIC,KAAK,SAAStB,QAASD,KAAKC,SACvFiB,EAAA,OAAKC,MAAO,UAAUN,KACpBK,EAAA,OAAKC,MAAO,GAAGV,KAAyBE,KACtCO,EAAA,aAAWM,KAAK,kBAAkBL,MAAM,4BAI9CD,EAAA,OAAKC,MAAO,iBAAiBH,KAAkBD,KAC7CG,EAAA,QAAMM,KAAK,U"}