@roadtrip/components 3.27.0 → 3.28.0

package/dist/roadtrip/p-430e6759.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,H as o,a as n}from"./p-f3d586b3.js";const r=':host{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}:host(.tab-secondary){--tab-underline-selected:var(--road-secondary-600)}:host(.tab-selected){color:var(--tab-color-selected)}:host(.tab-selected) ::slotted(road-icon){color:var(--tab-color-selected)}:host(.tab-selected) .button-native::after{background:var(--tab-underline-selected);opacity:1;transform:none}:host(:hover){background:var(--tab-background-hover)}:host(.focus-visible){background:var(--tab-background-focused);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%;min-height:3.5rem;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)}.button-native::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:2px;content:"";opacity:0;transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transform:scaleX(0);transform-origin:center}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}:host ::slotted(road-icon){color:var(--tab-color)}:host(.tab-layout-icon-start) ::slotted(road-icon){margin-right:0.5rem}:host(.tab-layout-icon-top) .button-inner{flex-direction:column}:host ::slotted(road-label){display:-webkit-box;max-width:12.5rem;overflow:hidden;font-size:1rem;color:var(--road-on-surface);-webkit-line-clamp:1;-webkit-box-orient:vertical;text-align:center;text-overflow:ellipsis;white-space:inherit}:host(.tab-layout-icon-top) ::slotted(road-label){margin-top:0.25rem;font-size:1rem}';const a=class{constructor(i){t(this,i);this.roadtabbuttonclick=e(this,"roadtabbuttonclick",7);this.roadTabButtonClick=e(this,"roadTabButtonClick",7);this.onKeyUp=t=>{if(t.key==="Enter"||t.key===" "){this.selectTab(t)}};this.onClick=t=>{this.selectTab(t)};this.download=undefined;this.href=undefined;this.rel=undefined;this.layout="icon-start";this.selected=false;this.tab=undefined;this.target=undefined}onTabBarChanged(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.roadtabbuttonclick.emit({tab:this.tab,href:this.href,selected:this.selected});this.roadTabButtonClick.emit({tab:this.tab,href:this.href,selected:this.selected});t.preventDefault()}}get hasLabel(){return!!this.el.querySelector("road-label")}get hasIcon(){return!!this.el.querySelector("road-icon")}get tabIndex(){const t=this.el.hasAttribute("tabindex");if(t){return this.el.getAttribute("tabindex")}return 0}render(){const{hasIcon:t,hasLabel:e,tabIndex:n,href:r,rel:a,target:s,layout:l,selected:h,tab:d}=this;const c={download:this.download,href:r,rel:a,target:s};return i(o,{onClick:this.onClick,onKeyup:this.onKeyUp,role:"tab",tabindex:n,"aria-selected":h?"true":"false",id:d!==undefined?`tab-button-${d}`:null,class:{"tab-selected":h,"tab-has-label":e,"tab-has-icon":t,"tab-has-label-only":e&&!t,"tab-has-icon-only":t&&!e,[`tab-layout-${l}`]:true}},i("a",Object.assign({},c,{tabIndex:-1,class:"button-native",part:"native"}),i("span",{class:"button-inner"},i("slot",null))))}get el(){return n(this)}};a.style=r;export{a as road_tab_button};
-//# sourceMappingURL=p-430e6759.entry.js.map

package/dist/roadtrip/p-430e6759.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabButtonCss","TabButton","this","onKeyUp","ev","key","selectTab","onClick","onTabBarChanged","dispatchedFrom","target","parent","el","parentElement","composedPath","includes","contains","selected","tab","detail","undefined","roadtabbuttonclick","emit","href","roadTabButtonClick","preventDefault","hasLabel","querySelector","hasIcon","tabIndex","hasTabIndex","hasAttribute","getAttribute","render","rel","layout","attrs","download","h","Host","onKeyup","role","tabindex","id","class","Object","assign","part"],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/*\n * Tab button\n *\n * Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n *\n */\n\n/**\n * @prop --padding-start: Left padding  of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n  box-sizing: border-box;\n  font-weight: 700;\n  color: var(--tab-color);\n  outline: 0;\n  transition: background 0.15s ease-in-out;\n}\n\n/**\n * Active state\n */\n\n:host(.tab-secondary) {\n  --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n  background: var(--tab-underline-selected);\n  opacity: 1;\n  transform: none;\n}\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n  background: var(--tab-background-hover);\n}\n\n/**\n * Focus state\n */\n\n:host(.focus-visible) {\n  background: var(--tab-background-focused);\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  min-height: 3.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/* UNDERLINE\n -------------------- */\n\n.button-native::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 2px;\n  content: \"\";\n  opacity: 0;\n  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  transform: scaleX(0);\n  transform-origin: center;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n:host ::slotted(road-icon) {\n  color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n  margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n  flex-direction: column;\n}\n\n/* LABEL\n -------------------- */\n\n:host ::slotted(road-label) {\n  display: -webkit-box;\n  max-width: 12.5rem;\n  overflow: hidden;\n  font-size: 1rem;\n  color: var(--road-on-surface);\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n  margin-top: 0.25rem;\n  font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - Content of the tab-button, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-tab-button',\n  styleUrl: 'tab-button.css',\n  shadow: true,\n})\nexport class TabButton {\n\n  @Element() el!: HTMLRoadTabButtonElement;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\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 | undefined;\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 | undefined;\n\n  /**\n   * Set the layout of the text and icon in the tab bar.\n   * It defaults to `'icon-start'`.\n   */\n  @Prop() layout?: 'icon-start' | 'icon-top' = 'icon-start';\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   * 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 | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadtabbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadTabButtonClick!: EventEmitter;\n\n  @Listen('roadTabBarChanged', { target: 'window' })\n  @Listen('roadTabbarchanged', { target: 'window' })\n  onTabBarChanged(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.roadtabbuttonclick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n      this.roadTabButtonClick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get hasLabel() {\n    return !!this.el.querySelector('road-label');\n  }\n\n  private get hasIcon() {\n    return !!this.el.querySelector('road-icon');\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 { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\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' : 'false'}\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          'tab-has-label': hasLabel,\n          'tab-has-icon': hasIcon,\n          'tab-has-label-only': hasLabel && !hasIcon,\n          'tab-has-icon-only': hasIcon && !hasLabel,\n          [`tab-layout-${layout}`]: true,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAe,ymE,MCaRC,EAAS,M,uIAqGZC,KAAAC,QAAWC,IACjB,GAAIA,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACxCH,KAAKI,UAAUF,E,GAIXF,KAAAK,QAAWH,IACjBF,KAAKI,UAAUF,EAAG,E,2EAhFyB,a,cAKT,M,yCAwBpC,eAAAI,CAAgBJ,GACd,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,mBAAmBC,KAAK,CAC3BJ,IAAKhB,KAAKgB,IACVK,KAAMrB,KAAKqB,KACXN,SAAUf,KAAKe,WAEjBf,KAAKsB,mBAAmBF,KAAK,CAC3BJ,IAAKhB,KAAKgB,IACVK,KAAMrB,KAAKqB,KACXN,SAAUf,KAAKe,WAGjBb,EAAGqB,gB,EAIP,YAAYC,GACV,QAASxB,KAAKU,GAAGe,cAAc,a,CAGjC,WAAYC,GACV,QAAS1B,KAAKU,GAAGe,cAAc,Y,CAGjC,YAAYE,GACV,MAAMC,EAAc5B,KAAKU,GAAGmB,aAAa,YAEzC,GAAID,EAAa,CACf,OAAO5B,KAAKU,GAAGoB,aAAa,W,CAG9B,OAAO,C,CAaT,MAAAC,GACE,MAAML,QAAEA,EAAOF,SAAEA,EAAQG,SAAEA,EAAQN,KAAEA,EAAIW,IAAEA,EAAGxB,OAAEA,EAAMyB,OAAEA,EAAMlB,SAAEA,EAAQC,IAAEA,GAAQhB,KAClF,MAAMkC,EAAQ,CACZC,SAAUnC,KAAKmC,SACfd,OACAW,MACAxB,UAGF,OACE4B,EAACC,EAAI,CACHhC,QAASL,KAAKK,QACdiC,QAAStC,KAAKC,QACdsC,KAAK,MACLC,SAAUb,EAAQ,gBACHZ,EAAW,OAAS,QACnC0B,GAAIzB,IAAQE,UAAY,cAAcF,IAAQ,KAC9C0B,MAAO,CACL,eAAgB3B,EAChB,gBAAiBS,EACjB,eAAgBE,EAChB,qBAAsBF,IAAaE,EACnC,oBAAqBA,IAAYF,EACjC,CAAC,cAAcS,KAAW,OAG5BG,EAAA,IAAAO,OAAAC,OAAA,GAAOV,EAAK,CAAEP,UAAW,EAAGe,MAAM,gBAAgBG,KAAK,WACrDT,EAAA,QAAMM,MAAM,gBACVN,EAAA,e"}