@roadtrip/components 3.11.0 → 3.11.1

package/dist/cjs/road-rating.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-rating.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,0YAA0Y;;MCQ/Y,MAAM;;;gBAKqC,QAAQ;gBAKvC,CAAC;uBAKO,IAAI;mBAKT,CAAC;uBAKG,SAAS;;EAEvC,MAAM;IACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnE,MAAM,oBAAoB,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,8BAA8B,IAAI,CAAC,IAAI,EAAE,GAAG,cAAc,CAAC;IAClH,MAAM,qBAAqB,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,gCAAgC,IAAI,CAAC,IAAI,EAAE,GAAG,eAAe,CAAC;IAEtH,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,GAAG,oBAAoB,EAAE,IAClC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,MACpBA,uBAAW,IAAI,EAAEE,YAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAa,CAC9D,EACA,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,MAC5BF,uBAAW,IAAI,EAAEG,qBAAa,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAa,CAC3E,EACA,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,MACvCH,uBAAW,IAAI,EAAEE,YAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAa,CAClE,CACG,EACL,IAAI,CAAC,WAAW,IAAIF,eAAG,KAAK,EAAE,GAAG,qBAAqB,EAAE,EAAE,IAAI,EAAC,GAAG,SAAG,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE,MAAM,CAE/H,EACP;GACH;;;;;;","names":["h","Host","star","starHalfColor"],"sources":["./src/components/rating/rating.css?tag=road-rating&encapsulation=shadow","./src/components/rating/rating.tsx"],"sourcesContent":["/*\n * Rating\n *\n * Index\n * - Stars\n * - Star\n * - Rating number\n */\n\n/* STARS\n -------------------- */\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\n.rating-stars {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n/* STAR\n -------------------- */\n\n.rating-star {\n  color: var(--road-surface-disabled);\n}\n\n.rating-stars.rating-stars--small .icon-sm{\n  width: 1rem;\n  height: 1rem;\n}\n\n/* RATING NUMBER\n -------------------- */\n\n.rating-number {\n  margin-left: 0.5rem;\n  font-size: var(--road-link-medium);\n  color: var(--road-on-surface);\n  text-decoration: underline;\n}\n\n.rating-number.rating-number--small {\n  font-size: var(--road-link-small);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { star, starHalfColor } from '../../../icons';\n\n@Component({\n  tag: 'road-rating',\n  styleUrl: 'rating.css',\n  shadow: true,\n})\nexport class Rating {\n\n  /**\n    * The button size.\n    */\n   @Prop({ reflect: true }) size?: 'small' | 'medium' = 'medium';\n\n  /**\n   * Rate review between 0 and 5\n   */\n  @Prop() rate: number = 0;\n\n  /**\n * Show reviews\n */\n  @Prop() showreviews: boolean = true;\n\n  /**\n   * number of reviews\n   */\n  @Prop() reviews: number = 0;\n\n  /**\n   * Word display next to the number of reviews.\n   */\n  @Prop() reviewsText: string = 'reviews';\n\n  render() {\n    const rate = Math.floor(this.rate);\n    const rateDecimale = this.rate - Math.floor(this.rate) > 0 ? 1 : 0;\n    const sizeRatingStarsClass = this.size !== undefined ? `rating-stars rating-stars--${this.size}` : 'rating-stars';\n    const sizeRatingNumberClass = this.size !== undefined ? `rating-number rating-number--${this.size}` : 'rating-number';\n\n    return (\n      <Host>\n        <div class={`${sizeRatingStarsClass}`}>\n          {[...Array(rate)].map(() =>\n            <road-icon icon={star} size=\"sm\" color=\"warning\"></road-icon>\n          )}\n          {[...Array(rateDecimale)].map(() =>\n            <road-icon icon={starHalfColor} size=\"sm\" class=\"rating-star\"></road-icon>\n          )}\n          {[...Array(5 - rate - rateDecimale)].map(() =>\n            <road-icon icon={star} size=\"sm\" class=\"rating-star\"></road-icon>\n          )}\n        </div>\n        {this.showreviews && <a class={`${sizeRatingNumberClass}`} href=\"#\">({this.reviews}{this.reviewsText && ` ${this.reviewsText}`})</a>}\n        \n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"road-rating.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,0YAA0Y;;MCQ/Y,MAAM;;;gBAKqC,QAAQ;gBAKvC,CAAC;uBAKO,IAAI;mBAKT,CAAC;uBAKG,SAAS;;EAEvC,MAAM;IACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnE,MAAM,oBAAoB,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,8BAA8B,IAAI,CAAC,IAAI,EAAE,GAAG,cAAc,CAAC;IAClH,MAAM,qBAAqB,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,gCAAgC,IAAI,CAAC,IAAI,EAAE,GAAG,eAAe,CAAC;IAEtH,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,GAAG,oBAAoB,EAAE,IAClC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,MACpBA,uBAAW,IAAI,EAAEE,YAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAa,CAC9D,EACA,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,MAC5BF,uBAAW,IAAI,EAAEG,qBAAa,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAa,CAC3E,EACA,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,MACvCH,uBAAW,IAAI,EAAEE,YAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAa,CAClE,CACG,EACL,IAAI,CAAC,WAAW,IAAIF,eAAG,KAAK,EAAE,GAAG,qBAAqB,EAAE,EAAE,IAAI,EAAC,GAAG,SAAG,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE,MAAM,CAE/H,EACP;GACH;;;;;;","names":["h","Host","star","starHalfColor"],"sources":["src/components/rating/rating.css?tag=road-rating&encapsulation=shadow","src/components/rating/rating.tsx"],"sourcesContent":["/*\n * Rating\n *\n * Index\n * - Stars\n * - Star\n * - Rating number\n */\n\n/* STARS\n -------------------- */\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\n.rating-stars {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n/* STAR\n -------------------- */\n\n.rating-star {\n  color: var(--road-surface-disabled);\n}\n\n.rating-stars.rating-stars--small .icon-sm{\n  width: 1rem;\n  height: 1rem;\n}\n\n/* RATING NUMBER\n -------------------- */\n\n.rating-number {\n  margin-left: 0.5rem;\n  font-size: var(--road-link-medium);\n  color: var(--road-on-surface);\n  text-decoration: underline;\n}\n\n.rating-number.rating-number--small {\n  font-size: var(--road-link-small);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { star, starHalfColor } from '../../../icons';\n\n@Component({\n  tag: 'road-rating',\n  styleUrl: 'rating.css',\n  shadow: true,\n})\nexport class Rating {\n\n  /**\n    * The button size.\n    */\n   @Prop({ reflect: true }) size?: 'small' | 'medium' = 'medium';\n\n  /**\n   * Rate review between 0 and 5\n   */\n  @Prop() rate: number = 0;\n\n  /**\n * Show reviews\n */\n  @Prop() showreviews: boolean = true;\n\n  /**\n   * number of reviews\n   */\n  @Prop() reviews: number = 0;\n\n  /**\n   * Word display next to the number of reviews.\n   */\n  @Prop() reviewsText: string = 'reviews';\n\n  render() {\n    const rate = Math.floor(this.rate);\n    const rateDecimale = this.rate - Math.floor(this.rate) > 0 ? 1 : 0;\n    const sizeRatingStarsClass = this.size !== undefined ? `rating-stars rating-stars--${this.size}` : 'rating-stars';\n    const sizeRatingNumberClass = this.size !== undefined ? `rating-number rating-number--${this.size}` : 'rating-number';\n\n    return (\n      <Host>\n        <div class={`${sizeRatingStarsClass}`}>\n          {[...Array(rate)].map(() =>\n            <road-icon icon={star} size=\"sm\" color=\"warning\"></road-icon>\n          )}\n          {[...Array(rateDecimale)].map(() =>\n            <road-icon icon={starHalfColor} size=\"sm\" class=\"rating-star\"></road-icon>\n          )}\n          {[...Array(5 - rate - rateDecimale)].map(() =>\n            <road-icon icon={star} size=\"sm\" class=\"rating-star\"></road-icon>\n          )}\n        </div>\n        {this.showreviews && <a class={`${sizeRatingNumberClass}`} href=\"#\">({this.reviews}{this.reviewsText && ` ${this.reviewsText}`})</a>}\n        \n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/road-segmented-button-bar.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
-require('./polyfill-9453e116.js');
+const index = require('./index-4fdb2a28.js');
+require('./polyfill-b1fff766.js');
 
 const segmentedButtonBarCss = ":host{display:flex;max-width:500px}";
 

package/dist/cjs/road-segmented-button-bar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-segmented-button-bar.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,qBAAqB,GAAG,qCAAqC;;MCYtD,SAAS;;;;;;;EAUpB,kBAAkB;IAChB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;MAClC,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC;QACtC,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC;QACtC,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;KACJ;GACF;EAOD,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,IAAI,EAAC,SAAS,IAEdD,qBAAO,CACF,EACP;GACH;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/segmented-button-bar/segmented-button-bar.css?tag=road-segmented-button-bar&encapsulation=shadow","./src/components/segmented-button-bar/segmented-button-bar.tsx"],"sourcesContent":["/*\n * Segmented button bar\n *\n */\n\n:host {\n  display: flex;\n  max-width: 500px;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n/**\n * @slot  - Content of the segmentedButtonBar, it should be road-segmented-button elements.\n */\n\n@Component({\n  tag: 'road-segmented-button-bar',\n  styleUrl: 'segmented-button-bar.css',\n  shadow: true,\n})\nexport class ButtonBar {\n\n  @Element() el!: HTMLRoadSegmentedButtonBarElement;\n\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadsegmentedbuttonbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadSegmentedButtonBarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadsegmentedbuttonbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadSegmentedButtonBarChanged!: EventEmitter;\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"tablist\"\n      >\n        <slot/>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"road-segmented-button-bar.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,qBAAqB,GAAG,qCAAqC;;MCYtD,SAAS;;;;;;;EAUpB,kBAAkB;IAChB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;MAClC,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC;QACtC,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC;QACtC,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;KACJ;GACF;EAOD,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,IAAI,EAAC,SAAS,IAEdD,qBAAO,CACF,EACP;GACH;;;;;;;;;;","names":["h","Host"],"sources":["src/components/segmented-button-bar/segmented-button-bar.css?tag=road-segmented-button-bar&encapsulation=shadow","src/components/segmented-button-bar/segmented-button-bar.tsx"],"sourcesContent":["/*\n * Segmented button bar\n *\n */\n\n:host {\n  display: flex;\n  max-width: 500px;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n/**\n * @slot  - Content of the segmentedButtonBar, it should be road-segmented-button elements.\n */\n\n@Component({\n  tag: 'road-segmented-button-bar',\n  styleUrl: 'segmented-button-bar.css',\n  shadow: true,\n})\nexport class ButtonBar {\n\n  @Element() el!: HTMLRoadSegmentedButtonBarElement;\n\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadsegmentedbuttonbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadSegmentedButtonBarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadsegmentedbuttonbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadSegmentedButtonBarChanged!: EventEmitter;\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"tablist\"\n      >\n        <slot/>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/cjs/road-segmented-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
+const index = require('./index-4fdb2a28.js');
 
 const segmentedButtonCss = ":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.5rem;font-size:var(--road-button-medium);font-weight:700;color:var(--road-primary);text-decoration:none;white-space:nowrap;vertical-align:middle;background-color:var(--road-surface);border-top:1px solid var(--road-primary);border-bottom:1px solid var(--road-primary);border-left:1px solid var(--road-primary);border-radius:0;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:first-child){border:1px solid var(--road-primary);border-right:0;border-radius:999em 0 0 999em}:host(:last-child){border:1px solid var(--road-primary);border-radius:0 999em 999em 0}:host(.btn-sm){height:2rem;font-size:var(--road-button-small)}:host(.tab-selected){color:var(--road-primary-contrast);background-color:var(--road-primary)}:host(.tab-selected:hover){background-color:var(--road-button-primary-variant)}:host(:hover){background:var(--road-primary-90)}:host(.focus-visible){background:var(--road-primary-90);outline:0}:host(.tab-selected.focus-visible){background-color:var(--road-button-primary-variant)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;max-height:2.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)}";
 

package/dist/cjs/road-segmented-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-segmented-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,69DAA69D;;MCY3+D,eAAe;;;;;IA+DlB,YAAO,GAAG,CAAC,EAAiB;MAClC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;OACpB;KACF,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;KACpB,CAAC;gBAhE4B,IAAI;oBAKE,KAAK;;;EAiBzC,kBAAkB,CAAC,EAAe;IAChC,MAAM,cAAc,GAAG,EAAE,CAAC,MAAqB,CAAC;IAChD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B,CAAC;IAEpD,IAAI,CAAC,EAAE,CAAC,YAAY,IAAI,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,cAAc,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE;MACnH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;KAC5C;GACF;EAEO,SAAS,CAAC,EAAyB;IACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;QACjC,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,CAAC,CAAC;MACH,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;QACjC,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,CAAC,CAAC;MAEH,EAAE,CAAC,cAAc,EAAE,CAAC;KACrB;GACF;EAED,IAAY,QAAQ;IAClB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IAErD,IAAI,WAAW,EAAE;MACf,OAAO,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KACzC;IAED,OAAO,CAAC,CAAC;GACV;EAYD,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAEzC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,OAAO,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;IAGpE,QACEA,QAACC,UAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,mBACH,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,cAAc,GAAG,EAAE,GAAG,IAAI,EAClD,KAAK,EAAE;QACL,cAAc,EAAE,QAAQ;QACxB,CAAC,GAAG,SAAS,EAAE,GAAG,IAAI;OACvB,IAEDD,oBAAQ,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,IACnEA,qBAAO,CACF,CACJ,EACP;GACH;;;;;;;","names":["h","Host"],"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.5rem;\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n  color: var(--road-primary);\n  text-decoration: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  background-color: var(--road-surface);\n  border-top: 1px solid var(--road-primary);\n  border-bottom: 1px solid var(--road-primary);\n  border-left: 1px solid var(--road-primary);\n  border-radius: 0;\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\n:host(:first-child){\n  border: 1px solid var(--road-primary);\n  border-right: 0;\n  border-radius: 999em 0 0 999em;\n}\n\n:host(:last-child){\n  border: 1px solid var(--road-primary);\n  border-radius: 0 999em 999em 0;\n}\n\n/**\n * Small\n */\n\n:host(.btn-sm) {\n  height: 2rem;\n  font-size: var(--road-button-small);\n}\n\n/**\n * Active state\n */\n\n:host(.tab-selected) {\n  color: var(--road-primary-contrast);\n  background-color: var(--road-primary);\n}\n\n:host(.tab-selected:hover) {\n  background-color: var(--road-button-primary-variant);\n}\n\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n  background: var(--road-primary-90);\n}\n\n/**\n * Focus state\n */\n\n\n:host(.focus-visible) {\n  background: var(--road-primary-90);\n  outline: 0;\n}\n\n:host(.tab-selected.focus-visible){\n  background-color: var(--road-button-primary-variant);\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  max-height: 2.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","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        <button type=\"button\" tabIndex={-1} class=\"button-native\" part=\"native\">\n            <slot/>\n        </button>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"road-segmented-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,69DAA69D;;MCY3+D,eAAe;;;;;IA+DlB,YAAO,GAAG,CAAC,EAAiB;MAClC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;OACpB;KACF,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;KACpB,CAAC;gBAhE4B,IAAI;oBAKE,KAAK;;;EAiBzC,kBAAkB,CAAC,EAAe;IAChC,MAAM,cAAc,GAAG,EAAE,CAAC,MAAqB,CAAC;IAChD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B,CAAC;IAEpD,IAAI,CAAC,EAAE,CAAC,YAAY,IAAI,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,cAAc,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE;MACnH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;KAC5C;GACF;EAEO,SAAS,CAAC,EAAyB;IACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;QACjC,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,CAAC,CAAC;MACH,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;QACjC,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,CAAC,CAAC;MAEH,EAAE,CAAC,cAAc,EAAE,CAAC;KACrB;GACF;EAED,IAAY,QAAQ;IAClB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IAErD,IAAI,WAAW,EAAE;MACf,OAAO,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KACzC;IAED,OAAO,CAAC,CAAC;GACV;EAYD,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAEzC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,OAAO,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;IAGpE,QACEA,QAACC,UAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,mBACH,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,cAAc,GAAG,EAAE,GAAG,IAAI,EAClD,KAAK,EAAE;QACL,cAAc,EAAE,QAAQ;QACxB,CAAC,GAAG,SAAS,EAAE,GAAG,IAAI;OACvB,IAEDD,oBAAQ,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,IACnEA,qBAAO,CACF,CACJ,EACP;GACH;;;;;;;","names":["h","Host"],"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.5rem;\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n  color: var(--road-primary);\n  text-decoration: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  background-color: var(--road-surface);\n  border-top: 1px solid var(--road-primary);\n  border-bottom: 1px solid var(--road-primary);\n  border-left: 1px solid var(--road-primary);\n  border-radius: 0;\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\n:host(:first-child){\n  border: 1px solid var(--road-primary);\n  border-right: 0;\n  border-radius: 999em 0 0 999em;\n}\n\n:host(:last-child){\n  border: 1px solid var(--road-primary);\n  border-radius: 0 999em 999em 0;\n}\n\n/**\n * Small\n */\n\n:host(.btn-sm) {\n  height: 2rem;\n  font-size: var(--road-button-small);\n}\n\n/**\n * Active state\n */\n\n:host(.tab-selected) {\n  color: var(--road-primary-contrast);\n  background-color: var(--road-primary);\n}\n\n:host(.tab-selected:hover) {\n  background-color: var(--road-button-primary-variant);\n}\n\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n  background: var(--road-primary-90);\n}\n\n/**\n * Focus state\n */\n\n\n:host(.focus-visible) {\n  background: var(--road-primary-90);\n  outline: 0;\n}\n\n:host(.tab-selected.focus-visible){\n  background-color: var(--road-button-primary-variant);\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  max-height: 2.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","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        <button type=\"button\" tabIndex={-1} class=\"button-native\" part=\"native\">\n            <slot/>\n        </button>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/cjs/road-segmented-buttons.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
+const index = require('./index-4fdb2a28.js');
 
 const segmentedButtonsCss = ":host{position:relative;display:block}";
 

package/dist/cjs/road-segmented-buttons.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-segmented-buttons.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/segmented-buttons/segmented-buttons.css?tag=road-segmented-buttons&encapsulation=shadow","./src/components/segmented-buttons/segmented-buttons.tsx"],"sourcesContent":["/*\n * Segmented buttons\n *\n */\n\n:host {\n  position: relative;\n  display: block;\n}\n","import { Component, Element, Event, EventEmitter, Host, Method, State, h } from '@stencil/core';\n\n/**\n * @slot - Content is placed between the named slots if provided without a slot.\n * @slot top - Content is placed at the top of the screen.\n */\n@Component({\n  tag: 'road-segmented-buttons',\n  styleUrl: 'segmented-buttons.css',\n  shadow: true,\n})\nexport class Tabs {\n\n  private transitioning = false;\n  private leavingTab?: HTMLRoadTabElement;\n\n  @Element() el!: HTMLRoadTabsElement;\n\n  @State() selectedTab?: HTMLRoadTabElement;\n\n  /**\n   * Emitted when the navigation is about to transition to a new component.\n   */\n  @Event({ bubbles: false }) roadtabswillchange!: EventEmitter<{tab: string}>;\n  /** @internal */\n  @Event({ bubbles: false }) roadTabsWillChange!: EventEmitter<{tab: string}>;\n\n  /**\n   * Emitted when the navigation has finished transitioning to a new component.\n   */\n  @Event({ bubbles: false }) roadtabsdidchange!: EventEmitter<{tab: string}>;\n  /** @internal */\n  @Event({ bubbles: false }) roadTabsDidChange!: EventEmitter<{tab: string}>;\n\n  async componentWillLoad() {\n    const tabs = this.tabs;\n    if (tabs.length > 0) {\n      this.select(tabs[0]);\n    }\n  }\n\n  componentWillRender() {\n    const buttonBar = this.el.querySelector('road-segmented-button-bar');\n    if (buttonBar) {\n      const tab = this.selectedTab ? this.selectedTab.tab : undefined;\n      buttonBar.selectedTab = tab;\n    }\n  }\n\n  /**\n   * Select a tab by the value of its `tab` property or an element reference.\n   *\n   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n   */\n  @Method()\n  async select(tab: string | HTMLRoadTabElement): Promise<boolean> {\n    const selectedTab = getTab(this.tabs, tab);\n    if (!this.shouldSwitch(selectedTab)) {\n      return false;\n    }\n    await this.setActive(selectedTab);\n    this.tabSwitch();\n\n    return true;\n  }\n\n  /**\n   * Get a specific tab by the value of its `tab` property or an element reference.\n   *\n   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n   */\n  @Method()\n  async getTab(tab: string | HTMLRoadTabElement): Promise<HTMLRoadTabElement | undefined> {\n    return getTab(this.tabs, tab);\n  }\n\n  /**\n   * Get the currently selected tab.\n   */\n  @Method()\n  getSelected(): Promise<string | undefined> {\n    return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);\n  }\n\n  private setActive(selectedTab: HTMLRoadTabElement): Promise<void> {\n    if (this.transitioning) {\n      return Promise.reject('transitioning already happening');\n    }\n\n    this.transitioning = true;\n    this.leavingTab = this.selectedTab;\n    this.selectedTab = selectedTab;\n    this.roadTabsWillChange.emit({ tab: selectedTab.tab });\n    selectedTab.active = true;\n    return Promise.resolve();\n  }\n\n  private tabSwitch() {\n    const selectedTab = this.selectedTab;\n    const leavingTab = this.leavingTab;\n\n    this.leavingTab = undefined;\n    this.transitioning = false;\n    if (!selectedTab) {\n      return;\n    }\n\n    if (leavingTab !== selectedTab) {\n      if (leavingTab) {\n        leavingTab.active = false;\n      }\n      this.roadTabsDidChange.emit({ tab: selectedTab.tab });\n    }\n  }\n\n  private shouldSwitch(selectedTab: HTMLRoadTabElement | undefined): selectedTab is HTMLRoadTabElement {\n    const leavingTab = this.selectedTab;\n    return selectedTab !== undefined && selectedTab !== leavingTab && !this.transitioning;\n  }\n\n  private get tabs() {\n    return Array.from(this.el.querySelectorAll('road-tab'));\n  }\n\n  private onTabClicked = (ev: CustomEvent) => {\n    const { tab } = ev.detail;\n    this.select(tab);\n  };\n\n  render() {\n\n    return (\n      <Host\n        onRoadSegmentedButtonClick={this.onTabClicked}>\n        <slot name=\"top\"/>\n          <slot/>\n      </Host>\n    );\n  }\n}\n\nconst getTab = (tabs: HTMLRoadTabElement[], tab: string | HTMLRoadTabElement): HTMLRoadTabElement | undefined => {\n  const tabEl = (typeof tab === 'string')\n    ? tabs.find(t => t.tab === tab)\n    : tab;\n\n  if (!tabEl) {\n    console.error(`tab with id: \"${tabEl}\" does not exist`);\n  }\n  return tabEl;\n};"],"version":3}
+{"file":"road-segmented-buttons.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/segmented-buttons/segmented-buttons.css?tag=road-segmented-buttons&encapsulation=shadow","src/components/segmented-buttons/segmented-buttons.tsx"],"sourcesContent":["/*\n * Segmented buttons\n *\n */\n\n:host {\n  position: relative;\n  display: block;\n}\n","import { Component, Element, Event, EventEmitter, Host, Method, State, h } from '@stencil/core';\n\n/**\n * @slot - Content is placed between the named slots if provided without a slot.\n * @slot top - Content is placed at the top of the screen.\n */\n@Component({\n  tag: 'road-segmented-buttons',\n  styleUrl: 'segmented-buttons.css',\n  shadow: true,\n})\nexport class Tabs {\n\n  private transitioning = false;\n  private leavingTab?: HTMLRoadTabElement;\n\n  @Element() el!: HTMLRoadTabsElement;\n\n  @State() selectedTab?: HTMLRoadTabElement;\n\n  /**\n   * Emitted when the navigation is about to transition to a new component.\n   */\n  @Event({ bubbles: false }) roadtabswillchange!: EventEmitter<{tab: string}>;\n  /** @internal */\n  @Event({ bubbles: false }) roadTabsWillChange!: EventEmitter<{tab: string}>;\n\n  /**\n   * Emitted when the navigation has finished transitioning to a new component.\n   */\n  @Event({ bubbles: false }) roadtabsdidchange!: EventEmitter<{tab: string}>;\n  /** @internal */\n  @Event({ bubbles: false }) roadTabsDidChange!: EventEmitter<{tab: string}>;\n\n  async componentWillLoad() {\n    const tabs = this.tabs;\n    if (tabs.length > 0) {\n      this.select(tabs[0]);\n    }\n  }\n\n  componentWillRender() {\n    const buttonBar = this.el.querySelector('road-segmented-button-bar');\n    if (buttonBar) {\n      const tab = this.selectedTab ? this.selectedTab.tab : undefined;\n      buttonBar.selectedTab = tab;\n    }\n  }\n\n  /**\n   * Select a tab by the value of its `tab` property or an element reference.\n   *\n   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n   */\n  @Method()\n  async select(tab: string | HTMLRoadTabElement): Promise<boolean> {\n    const selectedTab = getTab(this.tabs, tab);\n    if (!this.shouldSwitch(selectedTab)) {\n      return false;\n    }\n    await this.setActive(selectedTab);\n    this.tabSwitch();\n\n    return true;\n  }\n\n  /**\n   * Get a specific tab by the value of its `tab` property or an element reference.\n   *\n   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n   */\n  @Method()\n  async getTab(tab: string | HTMLRoadTabElement): Promise<HTMLRoadTabElement | undefined> {\n    return getTab(this.tabs, tab);\n  }\n\n  /**\n   * Get the currently selected tab.\n   */\n  @Method()\n  getSelected(): Promise<string | undefined> {\n    return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);\n  }\n\n  private setActive(selectedTab: HTMLRoadTabElement): Promise<void> {\n    if (this.transitioning) {\n      return Promise.reject('transitioning already happening');\n    }\n\n    this.transitioning = true;\n    this.leavingTab = this.selectedTab;\n    this.selectedTab = selectedTab;\n    this.roadTabsWillChange.emit({ tab: selectedTab.tab });\n    selectedTab.active = true;\n    return Promise.resolve();\n  }\n\n  private tabSwitch() {\n    const selectedTab = this.selectedTab;\n    const leavingTab = this.leavingTab;\n\n    this.leavingTab = undefined;\n    this.transitioning = false;\n    if (!selectedTab) {\n      return;\n    }\n\n    if (leavingTab !== selectedTab) {\n      if (leavingTab) {\n        leavingTab.active = false;\n      }\n      this.roadTabsDidChange.emit({ tab: selectedTab.tab });\n    }\n  }\n\n  private shouldSwitch(selectedTab: HTMLRoadTabElement | undefined): selectedTab is HTMLRoadTabElement {\n    const leavingTab = this.selectedTab;\n    return selectedTab !== undefined && selectedTab !== leavingTab && !this.transitioning;\n  }\n\n  private get tabs() {\n    return Array.from(this.el.querySelectorAll('road-tab'));\n  }\n\n  private onTabClicked = (ev: CustomEvent) => {\n    const { tab } = ev.detail;\n    this.select(tab);\n  };\n\n  render() {\n\n    return (\n      <Host\n        onRoadSegmentedButtonClick={this.onTabClicked}>\n        <slot name=\"top\"/>\n          <slot/>\n      </Host>\n    );\n  }\n}\n\nconst getTab = (tabs: HTMLRoadTabElement[], tab: string | HTMLRoadTabElement): HTMLRoadTabElement | undefined => {\n  const tabEl = (typeof tab === 'string')\n    ? tabs.find(t => t.tab === tab)\n    : tab;\n\n  if (!tabEl) {\n    console.error(`tab with id: \"${tabEl}\" does not exist`);\n  }\n  return tabEl;\n};"],"version":3}

package/dist/cjs/road-select-filter.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4bd5b5f.js');
+const index = require('./index-4fdb2a28.js');
 
 /**
  * Fuse.js v6.5.3 - Lightweight fuzzy-search (http://fusejs.io)