@roadtrip/components 3.51.3 → 3.53.0

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

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,H as r,a as n}from"./p-d7aae05d.js";const o=":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;flex:1;align-items:center;justify-content:center;max-height:2.75rem;font-size:var(--road-button-medium);font-weight:700;color:var(--road-on-surface-weak);text-decoration:none;white-space:nowrap;vertical-align:middle;background-color:var(--road-surface);border-radius:8px;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;margin-right:var(--road-spacing-02);overflow:hidden}:host(:last-child){margin-right:0}:host(.btn-sm){height:2.5rem}:host(.btn-md){height:2.75rem}:host(.tab-selected){color:var(--road-button-primary);fill:var(--road-button-primary);background-color:var(--road-button-tertiary-variant)}:host(.tab-selected:hover){color:var(--road-button-primary);background-color:var(--road-button-tertiary-variant)}:host(:hover){color:var(--road-on-surface);background-color:var(--road-surface-inverse)}:host(.focus-visible){outline:auto}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;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;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host ::slotted(road-icon){margin:-0.2rem var(--road-spacing-03) -0.2rem 0;float:left}.button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}";const a=o;const s=class{constructor(i){t(this,i);this.roadsegmentedbuttonclick=e(this,"roadsegmentedbuttonclick",7);this.roadSegmentedButtonClick=e(this,"roadSegmentedButtonClick",7);this.size="md";this.selected=false;this.onKeyUp=t=>{if(t.key==="Enter"||t.key===" "){this.selectTab(t)}};this.onClick=t=>{this.selectTab(t)}}onButtonBarChanged(t){const e=t.target;const i=this.el.parentElement;if(t.composedPath&&t.composedPath().includes(i)||e&&e.contains(this.el)){this.selected=this.tab===t.detail.tab}}selectTab(t){if(this.tab!==undefined){this.roadsegmentedbuttonclick.emit({tab:this.tab,selected:this.selected});this.roadSegmentedButtonClick.emit({tab:this.tab,selected:this.selected});t.preventDefault()}}get tabIndex(){const t=this.el.hasAttribute("tabindex");if(t){return this.el.getAttribute("tabindex")}return 0}render(){const{tabIndex:t,selected:e,tab:n}=this;const o=this.size!==undefined?`btn-${this.size}`:"";return i(r,{key:"20194d71e8ca1c839c4a6287511fcb9ad1318e67",onClick:this.onClick,onKeyup:this.onKeyUp,role:"tab",tabindex:t,"aria-selected":e?"true":null,id:n!==undefined?`tab-button-${n}`:null,class:{"tab-selected":e,[`${o}`]:true}},i("span",{key:"cf51481805c04571bc3ef97a150b011bd8c0e79e",tabIndex:-1,class:"button-native",part:"native","aria-hidden":"true"},i("span",{key:"595aae2ef9621aa6a39ef2388373ec3708972bbb",class:"button-content"},i("slot",{key:"9b6e874b79e88265b6c56465e9f84a5849363016"}))))}get el(){return n(this)}};s.style=a;export{s as road_segmented_button};
-//# sourceMappingURL=p-f0d930e5.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["segmentedButtonCss","RoadSegmentedButtonStyle0","SegmentedButton","constructor","hostRef","this","size","selected","onKeyUp","ev","key","selectTab","onClick","onButtonBarChanged","dispatchedFrom","target","parent","el","parentElement","composedPath","includes","contains","tab","detail","undefined","roadsegmentedbuttonclick","emit","roadSegmentedButtonClick","preventDefault","tabIndex","hasTabIndex","hasAttribute","getAttribute","render","sizeClass","h","Host","onKeyup","role","tabindex","id","class","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.75rem;\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n  color: var(--road-on-surface-weak);\n  text-decoration: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  background-color: var(--road-surface);\n  border-radius: 8px;\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  margin-right: var(--road-spacing-02);\n  overflow: hidden;\n}\n\n:host(:last-child){\n  margin-right: 0;\n}\n\n/**\n * Small\n */\n\n:host(.btn-sm) {\n  height: 2.5rem;\n}\n\n/**\n * medium\n */\n\n :host(.btn-md) {\n  height: 2.75rem;\n}\n\n/**\n * Active state\n */\n\n :host(.tab-selected) {\n  color: var(--road-button-primary);\n  fill: var(--road-button-primary);\n  background-color: var(--road-button-tertiary-variant);\n}\n\n:host(.tab-selected:hover) {\n  color: var(--road-button-primary);\n  background-color: var(--road-button-tertiary-variant);\n}\n\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n  color: var(--road-on-surface);\n  background-color: var(--road-surface-inverse);\n}\n\n/**\n * Focus state\n */\n\n\n:host(.focus-visible) {\n  outline: auto;\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  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:host ::slotted(road-icon) {\n  margin: -0.2rem var(--road-spacing-03) -0.2rem 0;\n  float: left;\n}\n\n\n.button-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 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        <span tabIndex={-1} class=\"button-native\" part=\"native\" aria-hidden=\"true\">\n          <span class=\"button-content\">\n            <slot/>\n          </span>\n        </span>\n      </Host>\n    );\n  }\n}"],"mappings":"gEAAA,MAAMA,EAAqB,65DAC3B,MAAAC,EAAeD,E,MCWFE,EAAe,MAL5B,WAAAC,CAAAC,G,gJAYWC,KAAAC,KAAqB,KAKLD,KAAAE,SAAW,MAmD5BF,KAAAG,QAAWC,IACjB,GAAIA,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACxCL,KAAKM,UAAUF,E,GAIXJ,KAAAO,QAAWH,IACjBJ,KAAKM,UAAUF,EAAG,C,CAzCpB,kBAAAI,CAAmBJ,GACjB,MAAMK,EAAiBL,EAAGM,OAC1B,MAAMC,EAASX,KAAKY,GAAGC,cAEvB,GAAKT,EAAGU,cAAgBV,EAAGU,eAAeC,SAASJ,IAAaF,GAAkBA,EAAeO,SAAShB,KAAKY,IAAM,CACnHZ,KAAKE,SAAWF,KAAKiB,MAAQb,EAAGc,OAAOD,G,EAInC,SAAAX,CAAUF,GAChB,GAAIJ,KAAKiB,MAAQE,UAAW,CAC1BnB,KAAKoB,yBAAyBC,KAAK,CACjCJ,IAAKjB,KAAKiB,IACVf,SAAUF,KAAKE,WAEjBF,KAAKsB,yBAAyBD,KAAK,CACjCJ,IAAKjB,KAAKiB,IACVf,SAAUF,KAAKE,WAGjBE,EAAGmB,gB,EAIP,YAAYC,GACV,MAAMC,EAAczB,KAAKY,GAAGc,aAAa,YAEzC,GAAID,EAAa,CACf,OAAOzB,KAAKY,GAAGe,aAAa,W,CAG9B,OAAO,C,CAaT,MAAAC,GACE,MAAMJ,SAAEA,EAAQtB,SAAEA,EAAQe,IAAEA,GAAQjB,KAEpC,MAAM6B,EAAY7B,KAAKC,OAASkB,UAAY,OAAOnB,KAAKC,OAAS,GAGjE,OACE6B,EAACC,EAAI,CAAA1B,IAAA,2CACHE,QAASP,KAAKO,QACdyB,QAAShC,KAAKG,QACd8B,KAAK,MACLC,SAAUV,EAAQ,gBACHtB,EAAW,OAAS,KACnCiC,GAAIlB,IAAQE,UAAY,cAAcF,IAAQ,KAC9CmB,MAAO,CACL,eAAgBlC,EAChB,CAAC,GAAG2B,KAAc,OAGpBC,EAAA,QAAAzB,IAAA,2CAAMmB,UAAW,EAAGY,MAAM,gBAAgBC,KAAK,SAAQ,cAAa,QAClEP,EAAA,QAAAzB,IAAA,2CAAM+B,MAAM,kBACVN,EAAA,QAAAzB,IAAA,+C","ignoreList":[]}