@roadtrip/components 3.13.3 → 3.14.0

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"}