@roadtrip/components 3.13.3 → 3.14.1

package/dist/roadtrip/p-00e51171.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as r}from"./p-f3d586b3.js";const t=":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;z-index:1;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:relative;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-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 n=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"}render(){const o=this.isLight==true?`dropdown-button`:"dropdown-button bg-white";const t=this.isMedium==true?`dropdown-medium-button dropdown-button`:"dropdown-button bg-white";const n=this.position!==undefined?`position-${this.position}`:"";const e=this.direction!==undefined?`direction-${this.direction}`:"";return r("details",{class:"dropdown",open:this.isOpen},r("summary",{"aria-expanded":`${this.isOpen}`,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 ${e}`},r("slot",{name:"list"})))}};n.style=t;export{n as road_dropdown};
-//# sourceMappingURL=p-00e51171.entry.js.map

package/dist/roadtrip/p-00e51171.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownCss","Dropdown","this","onClick","isOpen","render","isLightButtonDropDown","isLight","isMediumButtonDropDown","isMedium","positionClass","position","undefined","directionClass","direction","h","class","open","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  z-index: 1;\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: relative;\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/* 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, Prop } from '@stencil/core';\n\n/**\n * @slot  - Element how will open the dropdown when clicked\n * @slot list - List of item values (you can add border with lines=`full` but not on the last item)\n)\n */\n\n@Component({\n  tag: 'road-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n\n  /**\n   * Set to `true` to open the dropdown menu and to `false` to close it.\n   */\n  @Prop({ mutable: true }) isOpen : boolean = false;\n\n  /**\n  * If you want to remove background of the dropdown button\n  */\n    @Prop() isLight : boolean = false;\n  \n  /**\n  * If you want to remove background of the dropdown button\n  */\n    @Prop() isMedium : boolean = false;\n\n    /**\n  * The button position.\n  */\n   @Prop({ reflect: true }) position?: 'left' | 'right';\n\n   /**\n  * The opening direction.\n  */\n    @Prop({ reflect: true }) direction?: 'top' | 'bottom' = 'bottom';\n\n  /**\n   * Toggle the display when clicking element in slot\n   */\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n\n    const isLightButtonDropDown = this.isLight == true ? `dropdown-button` : 'dropdown-button bg-white';\n    const isMediumButtonDropDown = this.isMedium == true ? `dropdown-medium-button dropdown-button` : 'dropdown-button bg-white';\n    const positionClass = this.position !== undefined ? `position-${this.position}` : '';\n    const directionClass = this.direction !== undefined ? `direction-${this.direction}` : '';\n\n\n    return (\n      <details class=\"dropdown\" open={this.isOpen}>\n        <summary aria-expanded={`${this.isOpen}`} 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}`}>\n          <slot name=\"list\"/>\n        </div>\n      </details>\n    );\n  }\n\n}\n"],"mappings":"2CAAA,MAAMA,EAAc,onD,MCaPC,EAAQ,M,yBA8BXC,KAAAC,QAAU,KAChBD,KAAKE,QAAUF,KAAKE,MAAM,E,YA1BgB,M,aAKd,M,cAKC,M,uCAU2B,Q,CAS1D,MAAAC,GAEE,MAAMC,EAAwBJ,KAAKK,SAAW,KAAO,kBAAoB,2BACzE,MAAMC,EAAyBN,KAAKO,UAAY,KAAO,yCAA2C,2BAClG,MAAMC,EAAgBR,KAAKS,WAAaC,UAAY,YAAYV,KAAKS,WAAa,GAClF,MAAME,EAAiBX,KAAKY,YAAcF,UAAY,aAAaV,KAAKY,YAAc,GAGtF,OACEC,EAAA,WAASC,MAAM,WAAWC,KAAMf,KAAKE,QACnCW,EAAA,2BAAwB,GAAGb,KAAKE,SAAUc,SAAS,IAAIC,KAAK,SAAShB,QAASD,KAAKC,SACjFY,EAAA,OAAKC,MAAO,UAAUN,KACpBK,EAAA,OAAKC,MAAO,GAAGV,KAAyBE,KACtCO,EAAA,aAAWK,KAAK,kBAAkBJ,MAAM,4BAI9CD,EAAA,OAAKC,MAAO,iBAAiBH,KAC3BE,EAAA,QAAMK,KAAK,U"}

package/dist/roadtrip/p-4ec82d24.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as o,H as n,a as e}from"./p-f3d586b3.js";import"./p-1ccae339.js";const r=":host{position:fixed;right:1rem;bottom:1rem;z-index:2;box-sizing:border-box;display:block;align-items:center;max-width:3.5rem;height:3.5rem;padding:0.6rem 0.75rem 0.75rem;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-button-medium);font-weight:700;line-height:1.375;color:var(--road-on-button-secondary);text-decoration:none;white-space:nowrap;background:var(--road-button-secondary);border:1px solid transparent;border-radius:2rem;box-shadow:var(--road-elevation-average);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.position-left){right:auto;left:1rem}:host(.position-center){right:0;left:0;margin:0 auto}:host(.scroll-up){display:block;max-width:3.5rem}:host(.position-center.scroll-up){display:flex;max-width:max-content}:host(.scroll-down) .button-native{display:flex}:host(.position-center.scroll-down) .button-native{display:flex}:host(.position-center) .button-native{display:flex}:host(.scroll-down){display:flex;max-width:max-content}:host ::slotted(road-icon){margin-right:0.5rem}:host(:hover){background-color:var(--road-button-secondary-variant)}:host(.focus-visible){outline:0}.button-native{position:relative;z-index:1;align-items:center;justify-content:center;width:100%;height:100%;padding:0;margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host([aria-disabled]){pointer-events:none;opacity:0.16}.button-native:disabled{cursor:not-allowed}";const s=class{constructor(o){t(this,o);this.roadfocus=i(this,"roadfocus",7);this.roadFocus=i(this,"roadFocus",7);this.roadblur=i(this,"roadblur",7);this.roadBlur=i(this,"roadBlur",7);this.onClick=t=>{if(this.el.shadowRoot&&this.el.attachShadow){const i=this.el.closest("form");if(i){t.preventDefault();const o=document.createElement("button");o.style.display="none";i.appendChild(o);o.click();o.remove()}}};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.position="right";this.href=undefined;this.rel=undefined;this.target=undefined}onScroll(){const t=window.scrollY;if(t<300){this.el.classList.add("scroll-down");this.el.classList.remove("scroll-up")}if(t>300){this.el.classList.add("scroll-up");this.el.classList.remove("scroll-down")}}render(){const t=this.href===undefined?"button":"a";const i=this.position!==undefined?`position-${this.position}`:"";return o(n,{onClick:this.onClick,class:`${i}`},o(t,{class:"button-native",part:"native",onFocus:this.onFocus,onBlur:this.onBlur},o("slot",{name:"start"}),o("slot",null)))}get el(){return e(this)}};s.style=r;export{s as road_button_floating};
-//# sourceMappingURL=p-4ec82d24.entry.js.map

package/dist/roadtrip/p-4ec82d24.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["buttonFloatingCss","Button","this","onClick","ev","el","shadowRoot","attachShadow","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","onFocus","roadfocus","emit","roadFocus","onBlur","roadblur","roadBlur","onScroll","positionScroll","window","scrollY","classList","add","render","TagType","href","undefined","positionClass","position","h","Host","class","part","name"],"sources":["src/components/button-floating/button-floating.css?tag=road-button-floating&encapsulation=shadow","src/components/button-floating/button-floating.tsx"],"sourcesContent":["/*\n * Button floating\n *\n *\n * Index\n * - Button\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n  position: fixed;\n  right: 1rem;\n  bottom: 1rem;\n  z-index: 2;\n  box-sizing: border-box;\n  display: block;\n  align-items: center;\n  max-width: 3.5rem;\n  height: 3.5rem;\n  padding: 0.6rem 0.75rem 0.75rem;\n  overflow: hidden;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n  line-height: 1.375;\n  color: var(--road-on-button-secondary);\n  text-decoration: none;\n  white-space: nowrap;\n  background: var(--road-button-secondary);\n  border: 1px solid transparent;\n  border-radius: 2rem;\n  box-shadow: var(--road-elevation-average);\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:host(.position-left) {\n  right: auto;\n  left: 1rem;\n}\n\n:host(.position-center) {\n  right: 0;\n  left: 0;\n  margin: 0 auto;\n}\n\n:host(.scroll-up) {\n  display: block;\n  max-width: 3.5rem;\n}\n\n:host(.position-center.scroll-up) {\n  display: flex;\n  max-width: max-content;\n}\n\n\n:host(.scroll-down) .button-native{\n  display: flex;\n}\n\n:host(.position-center.scroll-down) .button-native{\n  display: flex;\n}\n\n:host(.position-center) .button-native{\n  display: flex;\n}\n\n:host(.scroll-down) {\n  display: flex;\n  max-width: max-content;\n}\n\n\n\n:host ::slotted(road-icon) {\n  margin-right: 0.5rem;\n}\n\n\n:host(:hover) {\n  background-color: var(--road-button-secondary-variant);\n}\n\n:host(.focus-visible) {\n  outline: 0;\n}\n\n/**\n * Native button\n */\n\n.button-native {\n  position: relative;\n  z-index: 1;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: 0;\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\n/* DISABLED\n -------------------- */\n\n:host([aria-disabled]) {\n  pointer-events: none;\n  opacity: 0.16;\n}\n\n.button-native:disabled {\n  cursor: not-allowed;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, h, Listen } from '@stencil/core';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the button.\n * @slot start - Left content of the button text, usually for 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-floating',\n  styleUrl: 'button-floating.css',\n  shadow: true,\n})\nexport class Button {\n\n  @Element() el!: HTMLRoadButtonElement;\n\n  /**\n  * position.\n  */\n     @Prop({ reflect: true }) position?: 'left' | 'center' | 'right' = 'right';\n\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   * 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\n  @Listen('scroll', {target: 'window'})\n\n    onScroll() {\n      const positionScroll = window.scrollY;\n      if (positionScroll < 300 ) {\n          this.el.classList.add(\"scroll-down\");\n          this.el.classList.remove(\"scroll-up\");\n      }\n      if (positionScroll > 300 ) {\n          this.el.classList.add(\"scroll-up\");\n          this.el.classList.remove(\"scroll-down\");\n      }\n    }\n\n\n\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.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 TagType = this.href === undefined ? 'button' : 'a' as any;\n    const positionClass = this.position !== undefined ? `position-${this.position}` : '';\n\n    return (\n      <Host\n        onClick={this.onClick}\n        class={`${positionClass}`}\n      >\n        <TagType\n          class=\"button-native\"\n          part=\"native\"\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <slot name=\"start\"/>\n          <slot/>\n        </TagType>\n      </Host>\n    );\n  }\n}"],"mappings":"wFAAA,MAAMA,EAAoB,quD,MCgBbC,EAAM,M,yKA6DTC,KAAAC,QAAWC,IACjB,GAAIF,KAAKG,GAAGC,YAAeJ,KAAKG,GAAWE,aAAc,CAIvD,MAAMC,EAAON,KAAKG,GAAGI,QAAQ,QAC7B,GAAID,EAAM,CACRJ,EAAGM,iBAEH,MAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,IAKThB,KAAAiB,QAAU,KAChBjB,KAAKkB,UAAUC,OACfnB,KAAKoB,UAAUD,MAAM,EAGfnB,KAAAqB,OAAS,KACfrB,KAAKsB,SAASH,OACdnB,KAAKuB,SAASJ,MAAM,E,cA/E+C,Q,6DAuCnE,QAAAK,GACE,MAAMC,EAAiBC,OAAOC,QAC9B,GAAIF,EAAiB,IAAM,CACvBzB,KAAKG,GAAGyB,UAAUC,IAAI,eACtB7B,KAAKG,GAAGyB,UAAUZ,OAAO,Y,CAE7B,GAAIS,EAAiB,IAAM,CACvBzB,KAAKG,GAAGyB,UAAUC,IAAI,aACtB7B,KAAKG,GAAGyB,UAAUZ,OAAO,c,EAmCjC,MAAAc,GACE,MAAMC,EAAU/B,KAAKgC,OAASC,UAAY,SAAW,IACrD,MAAMC,EAAgBlC,KAAKmC,WAAaF,UAAY,YAAYjC,KAAKmC,WAAa,GAElF,OACEC,EAACC,EAAI,CACHpC,QAASD,KAAKC,QACdqC,MAAO,GAAGJ,KAEVE,EAACL,EAAO,CACNO,MAAM,gBACNC,KAAK,SACLtB,QAASjB,KAAKiB,QACdI,OAAQrB,KAAKqB,QAEbe,EAAA,QAAMI,KAAK,UACXJ,EAAA,c"}