@roadtrip/components 3.38.0 → 3.38.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadtrip/components",
-  "version": "3.38.0",
+  "version": "3.38.1",
   "description": "Web Component library for Roadtrip Design System",
   "license": "Apache-2.0",
   "homepage": "https://gitlab.com/mobivia-design/roadtrip/components",

package/dist/roadtrip/p-5fac9508.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["segmentedButtonCss","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.text-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=\"text-content\">\n            <slot/>\n          </span>\n        </span>\n      </Host>\n    );\n  }\n}"],"mappings":"gEAAA,MAAMA,EAAqB,25D,MCYdC,EAAe,MAL5B,WAAAC,CAAAC,G,gJAYWC,KAAIC,KAAiB,KAKLD,KAAQE,SAAG,MAmD5BF,KAAAG,QAAWC,IACjB,GAAIA,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACxCL,KAAKM,UAAUF,E,GAIXJ,KAAAO,QAAWH,IACjBJ,KAAKM,UAAUF,EAAG,CA8BrB,CAvEC,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,EACK,gBAAAtB,EAAW,OAAS,KACnCiC,GAAIlB,IAAQE,UAAY,cAAcF,IAAQ,KAC9CmB,MAAO,CACL,eAAgBlC,EAChB,CAAC,GAAG2B,KAAc,OAGpBC,EAAA,QAAAzB,IAAA,2CAAMmB,UAAU,EAAIY,MAAM,gBAAgBC,KAAK,SAAQ,cAAa,QAClEP,EAAM,QAAAzB,IAAA,2CAAA+B,MAAM,gBACVN,EAAA,QAAAzB,IAAA,+C","ignoreList":[]}