@roadtrip/components 3.52.0 → 3.53.1

package/dist/roadtrip/p-3646f072.entry.js

@@ -1,2 +0,0 @@
-import{r as a,c as o,h as e,H as t}from"./p-d7aae05d.js";import{a as s,d as r,e as i,f as n,g as c}from"./p-55a946f4.js";const d=":host{position:fixed;right:0;bottom:1rem;left:0;z-index:1;display:flex;justify-content:center;width:328px;margin:0 auto;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;transform:translateY(-100%)}@media (min-width: 1200px){:host{right:1.5rem;bottom:3rem;left:auto;width:auto;transform:translateX(100%)}}:host(.toast-open){visibility:visible;opacity:1;transform:none}.toast{position:relative;box-sizing:border-box;display:flex;flex:0 0 100%;flex-flow:wrap;align-items:flex-start;width:328px;padding:0.75rem 2rem 0.6rem 1rem;font-family:var(--road-font);font-size:var(--road-body-medium);line-height:1.4;color:var(--road-on-info-surface-inverse);text-align:left;background:var(--road-info-surface-inverse);border-radius:0.25rem}@media (min-width: 575px){.toast{padding:1rem;margin-right:auto;margin-left:auto}}.toast-danger{color:var(--road-on-danger-surface-inverse);pointer-events:all;background:var(--road-danger-surface-inverse)}.toast-danger road-icon{color:var(--road-danger-icon-inverse)}.toast-warning{color:var(--road-on-warning-surface-inverse);background:var(--road-warning-surface-inverse)}.toast-warning road-icon{color:var(--road-warning-icon-inverse)}.toast-success{color:var(--road-on-success-surface-inverse);background:var(--road-success-surface-inverse)}.toast-success road-icon{color:var(--road-success-icon-inverse)}.toast-info{color:var(--road-on-info-surface-inverse);background:var(--road-info-surface-inverse)}.toast-info road-icon{color:var(--road-info-icon-inverse)}.toast-icon{top:auto;left:0.5rem;margin-top:-5px;margin-right:0.5rem}@media (min-width: 575px){.toast-icon{position:relative;top:auto;left:auto;margin-right:0.5rem}}.toast-close{position:absolute;right:0.5rem;padding:0;color:inherit;cursor:pointer;background:none;border:0;border-radius:4px;fill:var(--road-info-icon-inverse)}.toast-warning .toast-close{fill:var(--road-warning-icon-inverse)}.toast-close:focus{border-color:var(--road-info-surface-inverse);outline:none}.toast-label{width:240px;margin:0}:host ::slotted(road-progress){position:absolute;bottom:-8px;left:0;flex-basis:100%;width:100%;margin-top:0.5rem}@keyframes load{0%{width:0}100%{width:100%}}";const f=d;const l=class{constructor(e){a(this,e);this.onClose=o(this,"close",7);this.isOpen=false;this.color="info";this.timeout=5e3;this.onClick=a=>{a.stopPropagation();a.preventDefault();this.close()}}isOpenChanged(){if(this.isOpen&&this.timeout>0){setTimeout((()=>this.close()),this.timeout)}}async open(){this.isOpen=true;if(this.timeout>0){setTimeout((()=>{this.close()}),this.timeout)}}async close(){this.isOpen=false;this.onClose.emit()}componentDidLoad(){if(this.isOpen&&this.timeout>0){setTimeout((()=>this.close()),this.timeout)}}render(){const a=this.isOpen?"toast-open":"";let o;switch(this.color){case"info":o=r;break;case"success":o=c;break;case"warning":o=n;break;case"danger":o=i;break;default:o=r;break}if(this.color=="danger"){this.timeout=0}return e(t,{key:"5c3caac868d79f97699af08fb0b96c1ff35ad9cc",class:`${a}`,role:"alert"},e("div",{key:"b20177ba76a147f157605497de541dd53070a7b1",class:`toast toast-${this.color}`},e("road-icon",{key:"f75466515c805ee5460577e9694b374b1a30ac62",class:"toast-icon",icon:o,"aria-hidden":"true"}),e("p",{key:"a2e984002c90fbcc7f0eb8f912835c46f1f5effd",class:"toast-label"},this.label),e("button",{key:"37b9009541e949ee9ffe2350abd189a2d5bcf014",type:"button",class:"toast-close","aria-label":"Close",onClick:this.onClick},e("road-icon",{key:"5c0cd9dbae939e8c52cb2150861b3c0f68d5518b",icon:s,size:"md"})),e("slot",{key:"48469490e404f7db80d5c77aa3e08c02d769dd4f",name:"progress"})))}static get watchers(){return{isOpen:["isOpenChanged"]}}};l.style=f;export{l as road_toast};
-//# sourceMappingURL=p-3646f072.entry.js.map

package/dist/roadtrip/p-3646f072.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["toastCss","RoadToastStyle0","Toast","constructor","hostRef","this","isOpen","color","timeout","onClick","ev","stopPropagation","preventDefault","close","isOpenChanged","setTimeout","open","onClose","emit","componentDidLoad","render","toastIsOpenClass","icon","alertInfoOutline","alertSuccessOutline","alertWarningOutline","alertDangerOutline","h","Host","key","class","role","label","type","navigationClose","size","name"],"sources":["src/components/toast/toast.css?tag=road-toast&encapsulation=shadow","src/components/toast/toast.tsx"],"sourcesContent":["/*\n * Toast\n *\n *\n * Index\n * - Container\n * - Toast\n * - Feedback color\n * - Feedback icon\n * - Close button\n */\n\n\n/* CONTAINER\n -------------------- */\n\n:host {\n  position: fixed;\n  right: 0;\n  bottom: 1rem;\n  left: 0;\n  z-index: 1;\n  display: flex;\n  justify-content: center;\n  width: 328px;\n  margin: 0 auto;\n  pointer-events: none;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;\n  transform: translateY(-100%);\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    right: 1.5rem;\n    bottom: 3rem;\n    left: auto;\n    width: auto;\n    transform: translateX(100%);\n  }\n}\n\n/**\n * Open state\n */\n\n:host(.toast-open) {\n  visibility: visible;\n  opacity: 1;\n  transform: none;\n}\n\n/* TOAST\n -------------------- */\n\n.toast {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 100%;\n  flex-flow: wrap;\n  align-items: flex-start;\n  width: 328px;\n  padding: 0.75rem 2rem 0.6rem 1rem;\n  font-family: var(--road-font);\n  font-size: var(--road-body-medium);\n  line-height: 1.4;\n  color: var(--road-on-info-surface-inverse);\n  text-align: left;\n  background: var(--road-info-surface-inverse);\n  border-radius: 0.25rem;\n}\n\n@media (min-width: 575px) {\n\n  .toast {\n    padding: 1rem;\n    margin-right: auto;\n    margin-left: auto;\n  }\n}\n\n/* FEEDBACK COLOR\n -------------------- */\n\n/**\n * Danger\n */\n\n.toast-danger {\n  color: var(--road-on-danger-surface-inverse);\n  pointer-events: all;\n  background: var(--road-danger-surface-inverse);\n}\n\n.toast-danger road-icon {\n  color: var(--road-danger-icon-inverse);\n}\n\n/**\n * Warning\n */\n\n.toast-warning {\n  color: var(--road-on-warning-surface-inverse);\n  background: var(--road-warning-surface-inverse);\n}\n\n.toast-warning road-icon {\n  color: var(--road-warning-icon-inverse);\n}\n\n/**\n * Success\n */\n\n.toast-success {\n  color: var(--road-on-success-surface-inverse);\n  background: var(--road-success-surface-inverse);\n}\n\n.toast-success road-icon {\n  color: var(--road-success-icon-inverse);\n}\n\n/**\n * Info\n */\n\n.toast-info {\n  color: var(--road-on-info-surface-inverse);\n  background: var(--road-info-surface-inverse);\n}\n\n.toast-info road-icon {\n  color: var(--road-info-icon-inverse);\n}\n\n/* FEEDBACK ICON\n -------------------- */\n\n.toast-icon {\n  top: auto;\n  left: 0.5rem;\n  margin-top: -5px;\n  margin-right: 0.5rem;\n}\n\n@media (min-width: 575px) {\n\n  .toast-icon {\n    position: relative;\n    top: auto;\n    left: auto;\n    margin-right: 0.5rem;\n  }\n}\n\n/* CLOSE BUTTON\n -------------------- */\n\n.toast-close {\n  position: absolute;\n  right: 0.5rem;\n  padding: 0;\n  color: inherit;\n  cursor: pointer;\n  background: none;\n  border: 0;\n  border-radius: 4px;\n  fill: var(--road-info-icon-inverse);\n}\n\n.toast-warning .toast-close {\n  fill: var(--road-warning-icon-inverse);\n}\n\n\n/**\n * Focus state\n */\n\n.toast-close:focus {\n  border-color: var(--road-info-surface-inverse);\n  outline: none;\n}\n\n/* TOAST LABEL\n -------------------- */\n\n.toast-label{\n  width: 240px;\n  margin: 0;\n}\n\n/* TOAST PORGRESS BAR\n -------------------- */\n\n:host ::slotted(road-progress) {\n  position: absolute;\n  bottom: -8px;\n  left: 0;\n  flex-basis: 100%;\n  width: 100%;\n  margin-top: 0.5rem;\n}\n\n/* ANIMATION\n -------------------- */\n\n\n@keyframes load {\n\n  0% {\n    width: 0;\n  }\n\n  100% {\n    width: 100%;\n  }\n}\n","import { Component, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n\n/**\n *\n * @slot progress - the progress bar in the toast.\n * color=\"info\" for Info\n * color=\"success\" for success\n * color=\"warning\" for warning\n * color=\"danger\" for danger\n */\n\n@Component({\n  tag: 'road-toast',\n  styleUrl: 'toast.css',\n  shadow: true,\n})\nexport class Toast {\n\n  /**\n   * Set `open` propertie to `true` to open the toast\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Set the color of the toast. e.g. info, success, warning, danger\n   */\n  @Prop() color: FeedbackColors = 'info';\n\n  /**\n   * Text display in the toast\n   */\n  @Prop() label?: string;\n\n  /**\n   * How many milliseconds to wait before hiding the toast. if `\"0\"`, it will show\n   * until `close()` is called.\n   */\n  @Prop() timeout: number = 5000;\n\n  /**\n    * Indicate when closing the toast\n    */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Watch the isOpen property to start the timeout before closing\n   */\n  @Watch('isOpen')\n  isOpenChanged() {\n    if (this.isOpen && this.timeout > 0) {\n      setTimeout(() => this.close(), this.timeout);\n    }\n  }\n\n  /**\n   * Open the toast\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n    if(this.timeout > 0) {\n      setTimeout(() => {\n        this.close();\n      }, this.timeout);\n    }\n  }\n\n  /**\n   * Close the toast\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.onClose.emit();\n  }\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  componentDidLoad() {\n    if (this.isOpen && this.timeout > 0) {\n      setTimeout(() => this.close(), this.timeout);\n    }\n  }\n\n  render() {\n    const toastIsOpenClass = this.isOpen ? 'toast-open' : '';\n    let icon;\n    switch(this.color) {\n    case 'info':\n      icon = alertInfoOutline;\n      break;\n    case 'success':\n      icon = alertSuccessOutline;\n      break;\n    case 'warning':\n      icon = alertWarningOutline;\n      break;\n    case 'danger':\n      icon = alertDangerOutline;\n      break;\n    default:\n      icon = alertInfoOutline;\n      break;\n    }\n\n    if (this.color =='danger') {\n      this.timeout = 0\n    }\n\n    return (\n      <Host class={`${toastIsOpenClass}`} role=\"alert\">\n        <div class={`toast toast-${this.color}`}>\n          <road-icon class=\"toast-icon\" icon={icon} aria-hidden=\"true\"></road-icon>\n          <p class=\"toast-label\">{this.label}</p>\n          <button type=\"button\" class=\"toast-close\" aria-label=\"Close\" onClick={this.onClick}>\n            <road-icon icon={navigationClose} size=\"md\"></road-icon>\n          </button>\n          <slot name=\"progress\"/>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yHAAA,MAAMA,EAAW,wrEACjB,MAAAC,EAAeD,E,MCkBFE,EAAK,MALlB,WAAAC,CAAAC,G,yCAU2BC,KAAAC,OAAkB,MAKnCD,KAAAE,MAAwB,OAWxBF,KAAAG,QAAkB,IA0ClBH,KAAAI,QAAWC,IACjBA,EAAGC,kBACHD,EAAGE,iBAEHP,KAAKQ,OAAO,C,CAnCd,aAAAC,GACE,GAAIT,KAAKC,QAAUD,KAAKG,QAAU,EAAG,CACnCO,YAAW,IAAMV,KAAKQ,SAASR,KAAKG,Q,EAQxC,UAAMQ,GACJX,KAAKC,OAAS,KACd,GAAGD,KAAKG,QAAU,EAAG,CACnBO,YAAW,KACTV,KAAKQ,OAAO,GACXR,KAAKG,Q,EAQZ,WAAMK,GACJR,KAAKC,OAAS,MACdD,KAAKY,QAAQC,M,CAaf,gBAAAC,GACE,GAAId,KAAKC,QAAUD,KAAKG,QAAU,EAAG,CACnCO,YAAW,IAAMV,KAAKQ,SAASR,KAAKG,Q,EAIxC,MAAAY,GACE,MAAMC,EAAmBhB,KAAKC,OAAS,aAAe,GACtD,IAAIgB,EACJ,OAAOjB,KAAKE,OACZ,IAAK,OACHe,EAAOC,EACP,MACF,IAAK,UACHD,EAAOE,EACP,MACF,IAAK,UACHF,EAAOG,EACP,MACF,IAAK,SACHH,EAAOI,EACP,MACF,QACEJ,EAAOC,EACP,MAGF,GAAIlB,KAAKE,OAAQ,SAAU,CACzBF,KAAKG,QAAU,C,CAGjB,OACEmB,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,GAAGT,IAAoBU,KAAK,SACvCJ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,eAAezB,KAAKE,SAC9BoB,EAAA,aAAAE,IAAA,2CAAWC,MAAM,aAAaR,KAAMA,EAAI,cAAc,SACtDK,EAAA,KAAAE,IAAA,2CAAGC,MAAM,eAAezB,KAAK2B,OAC7BL,EAAA,UAAAE,IAAA,2CAAQI,KAAK,SAASH,MAAM,cAAa,aAAY,QAAQrB,QAASJ,KAAKI,SACzEkB,EAAA,aAAAE,IAAA,2CAAWP,KAAMY,EAAiBC,KAAK,QAEzCR,EAAA,QAAAE,IAAA,2CAAMO,KAAK,c","ignoreList":[]}

package/dist/roadtrip/p-4bbe3312.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as o,H as i,a as s}from"./p-d7aae05d.js";const r=":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline);padding:0}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";const a=r;const n=class{constructor(o){t(this,o);this.roadcardclick=e(this,"roadcardclick",7);this.roadCardClick=e(this,"roadCardClick",7);this.elevation="none";this.button=false;this.selected=false;this.disabled=false;this.type="button";this.onClick=t=>{var e,o;const i=this.button&&this.href===undefined;if(i&&this.disabled){t.preventDefault();t.stopPropagation();return}this.selected=!this.selected;if(this.value!==undefined){this.roadcardclick.emit({value:this.value,label:(e=this.el.querySelector("road-label"))===null||e===void 0?void 0:e.textContent});this.roadCardClick.emit({value:this.value,label:(o=this.el.querySelector("road-label"))===null||o===void 0?void 0:o.textContent})}}}isClickable(){return this.href!==undefined||this.button}renderCard(){const t=this.isClickable();if(!t){return[o("slot",null)]}const{href:e}=this;const i=t?e===undefined?"button":"a":"div";const s=this.button&&e===undefined;const r=i==="button"?{type:this.type,disabled:s&&this.disabled,"aria-disabled":s&&this.disabled?"true":undefined}:{download:this.download,href:this.href,rel:this.rel,target:this.target};return o(i,Object.assign({},r,{class:"card-native",part:"native",onClick:this.onClick}),o("slot",null))}render(){const{elevation:t}=this;const e=this.button&&this.href===undefined;const s=this.elevation?`card-elevation-${t}`:``;const r=this.selected?"selected":"";const a=e?"is-button":"";const n=e&&this.disabled?"is-disabled":"";return o(i,{key:"44026953c66e6ee3421d5bbc03c92e60710feb94",class:`${s} ${r} ${a} ${n}`},this.renderCard())}get el(){return s(this)}};n.style=a;export{n as road_card};
-//# sourceMappingURL=p-4bbe3312.entry.js.map

package/dist/roadtrip/p-4bbe3312.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cardCss","RoadCardStyle0","Card","constructor","hostRef","this","elevation","button","selected","disabled","type","onClick","e","isButtonMode","href","undefined","preventDefault","stopPropagation","value","roadcardclick","emit","label","_a","el","querySelector","textContent","roadCardClick","_b","isClickable","renderCard","clickable","h","TagType","attrs","download","rel","target","Object","assign","class","part","render","elevationClass","selectedClass","isButtonClass","disabledClass","Host","key"],"sources":["src/components/card/card.css?tag=road-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/*\n * Card\n *\n * Index\n * - Card\n * - Native\n * - Icon\n */\n\n/* CARD\n -------------------- */\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: block;\n  margin-bottom: var(--margin-bottom, 1rem);\n  background: var(--road-surface);\n  border: 1px solid var(--road-outline-weak);\n  border-radius: var(--road-spacing-02);\n  padding: var(--road-spacing-03);\n}\n\n:host(.card-elevation-none) {\n  box-shadow: none;\n}\n\n:host(.card-elevation-lowest) {\n  box-shadow: var(--road-elevation-lowest);\n}\n\n:host(.card-elevation-average) {\n  box-shadow: var(--road-elevation-average);\n}\n\n/*\n* Card as a button (interactivity in Figma)\n*/\n\n:host(.is-button) {\n  border: 1px solid var(--road-outline);\n  padding: 0;\n}\n\n:host(.is-button:hover) {\n  border: 1px solid var(--road-outline-variant);\n  outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button:focus-visible),\n:host(.is-button:focus) {\n  border: 1px solid var(--road-outline);\n  outline-offset: 1px;\n  outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.is-disabled) {\n  cursor: not-allowed;\n  pointer-events: none;\n  border: 1px solid var(--road-surface-disabled);\n  background: var(--road-surface-disabled);\n}\n\n:host(.is-button.is-disabled) .card-native,\n:host(.is-button.selected.is-disabled) .card-native {\n  background: none;\n}\n\n:host(.is-button.selected) {\n  border: 2px solid var(--road-primary);\n  outline: none;\n}\n\n:host(.is-button.selected:hover) {\n  border: 2px solid var(--road-outline-variant);\n  outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button.selected:focus-visible),\n:host(.is-button.selected:focus) {\n  border: 2px solid var(--road-outline-variant);\n  outline-offset: 1px;\n  outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.selected.is-disabled) {\n  cursor: not-allowed;\n  pointer-events: none;\n  outline: none;\n  background: var(--road-surface-disabled);\n  border: 2px solid var(--road-surface-disabled);\n}\n\n/* NATIVE\n -------------------- */\n\n.card-native {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 100%;\n  padding: var(--road-spacing-06);\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: center;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  background: var(--road-surface);\n  border: 0;\n  border-radius: 0.25rem;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\na,\nbutton {\n  cursor: pointer;\n  -webkit-user-select: none;\n          user-select: none;\n  -webkit-user-drag: none;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  text-align: center;\n}\n","import {\n  Component,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Host,\n} from \"@stencil/core\";\n\n/**\n * @slot  - Content of the card.\n *\n * @part native - The native HTML button, anchor, or div element that wraps all child elements.\n */\n\n@Component({\n  tag: \"road-card\",\n  styleUrl: \"card.css\",\n  shadow: true,\n})\nexport class Card {\n  @Element() el!: HTMLRoadCardElement;\n\n  /**\n   * The elevation.\n   */\n  @Prop() elevation?: \"none\" | \"lowest\" | \"average\" = \"none\";\n\n  /**\n   * If `true`, a button tag will be rendered and the card will be tappable.\n   */\n  @Prop() button: boolean = false;\n\n  /**\n   * value of the card\n   */\n  @Prop() value?: string;\n\n  /**\n   * If `true`, the card has the `selected` state and the `selected` class is applied on the host.\n   * Toggled automatically when the card is clicked (when clickable).\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * If `true`, the card is disabled and cannot be clicked.\n   * Only applies when in button mode (button=true and no href).\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The type of the button. Only used when an `onclick` or `button` property is present.\n   */\n  @Prop() type: \"submit\" | \"reset\" | \"button\" = \"button\";\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;\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 card is clicked and send the `value` of the card\n   */\n  @Event() roadcardclick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadCardClick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n\n  private isClickable(): boolean {\n    return this.href !== undefined || this.button;\n  }\n\n  private onClick = (e: Event) => {\n    // If disabled in button mode, prevent all interactions\n    const isButtonMode = this.button && this.href === undefined;\n    if (isButtonMode && this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    // Toggle selected state on click for clickable cards\n    this.selected = !this.selected;\n\n    if (this.value !== undefined) {\n      this.roadcardclick.emit({\n        value: this.value,\n        label: this.el.querySelector(\"road-label\")?.textContent,\n      });\n      this.roadCardClick.emit({\n        value: this.value,\n        label: this.el.querySelector(\"road-label\")?.textContent,\n      });\n    }\n  };\n\n  private renderCard() {\n    const clickable = this.isClickable();\n\n    if (!clickable) {\n      return [<slot />];\n    }\n    const { href } = this;\n    const TagType = clickable\n      ? href === undefined\n        ? \"button\"\n        : \"a\"\n      : (\"div\" as any);\n    const isButtonMode = this.button && href === undefined;\n    const attrs =\n      TagType === \"button\"\n        ? {\n            type: this.type,\n            disabled: isButtonMode && this.disabled,\n            \"aria-disabled\": isButtonMode && this.disabled ? \"true\" : undefined,\n          }\n        : {\n            download: this.download,\n            href: this.href,\n            rel: this.rel,\n            target: this.target,\n          };\n\n    return (\n      <TagType\n        {...attrs}\n        class=\"card-native\"\n        part=\"native\"\n        onClick={this.onClick}\n      >\n        <slot />\n      </TagType>\n    );\n  }\n\n  render() {\n    const { elevation } = this;\n    const isButtonMode = this.button && this.href === undefined;\n    const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n    const selectedClass = this.selected ? \"selected\" : \"\";\n    const isButtonClass = isButtonMode ? \"is-button\" : \"\";\n    const disabledClass = isButtonMode && this.disabled ? \"is-disabled\" : \"\";\n    return (\n      <Host\n        class={`${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass}`}\n      >\n        {this.renderCard()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAU,gqEAChB,MAAAC,EAAeD,E,MCoBFE,EAAI,MALjB,WAAAC,CAAAC,G,oGAWUC,KAAAC,UAA4C,OAK5CD,KAAAE,OAAkB,MAWDF,KAAAG,SAAoB,MAMpBH,KAAAI,SAAoB,MAKrCJ,KAAAK,KAAsC,SA8CtCL,KAAAM,QAAWC,I,QAEjB,MAAMC,EAAeR,KAAKE,QAAUF,KAAKS,OAASC,UAClD,GAAIF,GAAgBR,KAAKI,SAAU,CACjCG,EAAEI,iBACFJ,EAAEK,kBACF,M,CAIFZ,KAAKG,UAAYH,KAAKG,SAEtB,GAAIH,KAAKa,QAAUH,UAAW,CAC5BV,KAAKc,cAAcC,KAAK,CACtBF,MAAOb,KAAKa,MACZG,OAAOC,EAAAjB,KAAKkB,GAAGC,cAAc,iBAAa,MAAAF,SAAA,SAAAA,EAAEG,cAE9CpB,KAAKqB,cAAcN,KAAK,CACtBF,MAAOb,KAAKa,MACZG,OAAOM,EAAAtB,KAAKkB,GAAGC,cAAc,iBAAa,MAAAG,SAAA,SAAAA,EAAEF,a,GAvB1C,WAAAG,GACN,OAAOvB,KAAKS,OAASC,WAAaV,KAAKE,M,CA2BjC,UAAAsB,GACN,MAAMC,EAAYzB,KAAKuB,cAEvB,IAAKE,EAAW,CACd,MAAO,CAACC,EAAA,a,CAEV,MAAMjB,KAAEA,GAAST,KACjB,MAAM2B,EAAUF,EACZhB,IAASC,UACP,SACA,IACD,MACL,MAAMF,EAAeR,KAAKE,QAAUO,IAASC,UAC7C,MAAMkB,EACJD,IAAY,SACR,CACEtB,KAAML,KAAKK,KACXD,SAAUI,GAAgBR,KAAKI,SAC/B,gBAAiBI,GAAgBR,KAAKI,SAAW,OAASM,WAE5D,CACEmB,SAAU7B,KAAK6B,SACfpB,KAAMT,KAAKS,KACXqB,IAAK9B,KAAK8B,IACVC,OAAQ/B,KAAK+B,QAGrB,OACEL,EAACC,EAAOK,OAAAC,OAAA,GACFL,EAAK,CACTM,MAAM,cACNC,KAAK,SACL7B,QAASN,KAAKM,UAEdoB,EAAA,a,CAKN,MAAAU,GACE,MAAMnC,UAAEA,GAAcD,KACtB,MAAMQ,EAAeR,KAAKE,QAAUF,KAAKS,OAASC,UAClD,MAAM2B,EAAiBrC,KAAKC,UAAY,kBAAkBA,IAAc,GACxE,MAAMqC,EAAgBtC,KAAKG,SAAW,WAAa,GACnD,MAAMoC,EAAgB/B,EAAe,YAAc,GACnD,MAAMgC,EAAgBhC,GAAgBR,KAAKI,SAAW,cAAgB,GACtE,OACEsB,EAACe,EAAI,CAAAC,IAAA,2CACHR,MAAO,GAAGG,KAAkBC,KAAiBC,KAAiBC,KAE7DxC,KAAKwB,a","ignoreList":[]}

package/dist/roadtrip/p-8630081f.entry.js

@@ -1,2 +0,0 @@
-import{r,h as e,H as s}from"./p-d7aae05d.js";const a=".progress{--border-radius:0.25rem;display:flex;height:0.25rem;overflow:hidden;font-size:var(--road-label-small);background-color:var(--road-surface-disabled);border-radius:var(--border-radius)}.progress-light{background-color:var(--road-overlay-inverse)}.progress-element-info{display:flex;justify-content:space-between;margin-top:0.5rem}.progress-element-info-full-width{display:flex;justify-content:space-between;padding:0 1rem;margin-top:0.5rem}.progress-element-label{font-size:var(--road-label-medium);text-align:left}.progress-element-step{font-size:var(--road-label-medium);text-align:right}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;text-align:center;white-space:nowrap;transition:width 0.6s ease}.progress.progress-primary .progress-bar{background:var(--road-primary)}.progress.progress-secondary .progress-bar{background:var(--road-secondary)}.progress.progress-info .progress-bar{background:var(--road-info-surface-inverse)}.progress.progress-success .progress-bar{background:var(--road-success-surface-inverse)}.progress.progress-warning .progress-bar{background:var(--road-warning-surface-inverse)}.progress.progress-danger .progress-bar{background:var(--road-danger-surface-inverse)}.progress.progress-rating .progress-bar{background:var(--road-rating)}.animation .progress-bar{animation:load 5s normal forwards}@keyframes load{0%{width:0}100%{width:100%}}";const o=a;const i=class{constructor(e){r(this,e);this.value=0;this.numbersteps=0;this.label="";this.showstep=false;this.animation=false;this.light=false;this.fullwidth=false;this.color="primary";this.progresscalculationbase="current"}render(){const r=this.fullwidth?"progress-element-info-full-width":"progress-element-info";const a=this.light?"progress progress-light":"progress";const o=this.animation?"animation":"";const i=this.progresscalculationbase==="current"?0:-1;const t=100/this.numbersteps;const n=this.value+(this.numbersteps?t*i:0);let d=Math.ceil(this.value/100*this.numbersteps);d=Math.min(d,this.numbersteps);d=Math.max(d,0);return e(s,{key:"afaa397b17cba4c71cf8b9899ea0272869ceace6",class:"progress-element"},e("div",{key:"8b049a8b3d40c3c23ceca9fd931be9e028f1a919",class:`${a} progress-${this.color} ${o}`},e("div",{key:"05c9a7efd42334e449cc9394dcaa4ed173e70870",class:"progress-bar",role:"progressbar",style:{width:`${n}%`},"aria-valuenow":n,"aria-valuemin":"0","aria-valuemax":"100","aria-labelledby":"loadinglabel","aria-label":"progress bar"})),e("div",{key:"57c7b9d84886d5c96d633d3d85e95059cb113f2b",class:`${r}`},e("span",{key:"befe4e5d339847a04bfa246edc0c809523e40aa9",id:"loadinglabel",class:"progress-element-label"},this.label),this.showstep&&e("span",{key:"6eb7e35b57306e67f5bf5ff45d592b926669f63a",class:"progress-element-step"},d,"/",this.numbersteps)))}};i.style=o;export{i as road_progress};
-//# sourceMappingURL=p-8630081f.entry.js.map

package/dist/roadtrip/p-8630081f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["progressCss","RoadProgressStyle0","ProgressBar","constructor","hostRef","this","value","numbersteps","label","showstep","animation","light","fullwidth","color","progresscalculationbase","render","offset","percentagePerStep","progressBarFilledPercentage","step","Math","ceil","min","max","h","Host","key","class","role","style","width","id"],"sources":["src/components/progress/progress.css?tag=road-progress&encapsulation=shadow","src/components/progress/progress.tsx"],"sourcesContent":["/*\n * Progress\n *\n * Index\n * - Progress\n * - Progress Bar\n * - Colors\n */\n\n/**\n * @prop --border-radius: Border radius of the progress\n */\n\n/* PROGRESS\n -------------------- */\n\n.progress{\n  --border-radius: 0.25rem;\n\n  display: flex;\n  height: 0.25rem;\n  overflow: hidden;\n  font-size: var(--road-label-small);\n  background-color: var(--road-surface-disabled);\n  border-radius: var(--border-radius);\n}\n\n.progress-light{\n  background-color: var(--road-overlay-inverse);\n}\n\n\n.progress-element-info {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 0.5rem;\n}\n\n.progress-element-info-full-width {\n  display: flex;\n  justify-content: space-between;\n  padding: 0 1rem;\n  margin-top: 0.5rem;\n}\n\n.progress-element-label {\n  font-size: var(--road-label-medium);\n  text-align: left;\n}\n\n.progress-element-step {\n  font-size: var(--road-label-medium);\n  text-align: right;\n}\n\n/* PROGRESS BAR\n -------------------- */\n\n.progress-bar {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  text-align: center;\n  white-space: nowrap;\n  transition: width 0.6s ease;\n}\n\n/* COLORS\n -------------------- */\n\n.progress.progress-primary .progress-bar {\n  background: var(--road-primary);\n}\n\n.progress.progress-secondary .progress-bar {\n  background: var(--road-secondary);\n}\n\n.progress.progress-info .progress-bar {\n  background: var(--road-info-surface-inverse);\n}\n\n.progress.progress-success .progress-bar {\n  background: var(--road-success-surface-inverse);\n}\n\n.progress.progress-warning .progress-bar {\n  background: var(--road-warning-surface-inverse);\n}\n\n.progress.progress-danger .progress-bar {\n  background: var(--road-danger-surface-inverse);\n}\n\n.progress.progress-rating .progress-bar {\n  background: var(--road-rating);\n}\n\n\n/* ANIMATION\n -------------------- */\n\n.animation .progress-bar{\n  animation: load 5s normal forwards;\n}\n\n@keyframes load {\n\n  0% {\n    width: 0;\n  }\n\n  100% {\n    width: 100%;\n  }\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"road-progress\",\n  styleUrl: \"progress.css\",\n  shadow: true,\n})\nexport class ProgressBar {\n  /**\n   * The value determines how much of the active bar should display.\n   * The value should be between [0, 100].\n   */\n  @Prop() value: number = 0;\n\n  /**\n   * The number of steps.\n   */\n  @Prop() numbersteps: number = 0;\n\n  /**\n   * Label display in progress bar\n   */\n  @Prop() label: string = \"\";\n\n  /**\n   * Show step\n   */\n  @Prop() showstep: boolean = false;\n\n  /**\n   * Animation progress bar\n   */\n  @Prop() animation: boolean = false;\n\n  /**\n   * Light progress background\n   */\n  @Prop() light: boolean = false;\n\n  /**\n   * Add padding if the progress is full width\n   */\n  @Prop() fullwidth: boolean = false;\n\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color:\n    | \"primary\"\n    | \"secondary\"\n    | \"info\"\n    | \"success\"\n    | \"warning\"\n    | \"danger\"\n    | \"rating\" = \"primary\";\n\n  /**\n   * Progress calculation base for step display\n   * - previous: step is calculated based on the previous completed step\n   * - current: step is calculated based on the current progress\n   * Default is 'current'\n   */\n  @Prop() progresscalculationbase: \"previous\" | \"current\" = \"current\";\n\n  render() {\n    const fullwidth = this.fullwidth\n      ? \"progress-element-info-full-width\"\n      : \"progress-element-info\";\n    const light = this.light ? \"progress progress-light\" : \"progress\";\n    const animation = this.animation ? \"animation\" : \"\";\n\n    const offset: number = this.progresscalculationbase === \"current\" ? 0 : -1;\n    const percentagePerStep = 100 / this.numbersteps;\n    const progressBarFilledPercentage =\n      this.value + (this.numbersteps ? percentagePerStep * offset : 0);\n\n    let step = Math.ceil((this.value / 100) * this.numbersteps);\n    step = Math.min(step, this.numbersteps);\n    step = Math.max(step, 0);\n\n    return (\n      <Host class=\"progress-element\">\n        <div class={`${light} progress-${this.color} ${animation}`}>\n          <div\n            class=\"progress-bar\"\n            role=\"progressbar\"\n            style={{ width: `${progressBarFilledPercentage}%` }}\n            aria-valuenow={progressBarFilledPercentage}\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            aria-labelledby=\"loadinglabel\"\n            aria-label=\"progress bar\"\n          ></div>\n        </div>\n        <div class={`${fullwidth}`}>\n          <span id=\"loadinglabel\" class=\"progress-element-label\">\n            {this.label}\n          </span>\n          {this.showstep && (\n            <span class=\"progress-element-step\">\n              {step}/{this.numbersteps}\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAc,04CACpB,MAAAC,EAAeD,E,MCMFE,EAAW,MALxB,WAAAC,CAAAC,G,UAUUC,KAAAC,MAAgB,EAKhBD,KAAAE,YAAsB,EAKtBF,KAAAG,MAAgB,GAKhBH,KAAAI,SAAoB,MAKpBJ,KAAAK,UAAqB,MAKrBL,KAAAM,MAAiB,MAKjBN,KAAAO,UAAqB,MAKrBP,KAAAQ,MAOO,UAQPR,KAAAS,wBAAkD,S,CAE1D,MAAAC,GACE,MAAMH,EAAYP,KAAKO,UACnB,mCACA,wBACJ,MAAMD,EAAQN,KAAKM,MAAQ,0BAA4B,WACvD,MAAMD,EAAYL,KAAKK,UAAY,YAAc,GAEjD,MAAMM,EAAiBX,KAAKS,0BAA4B,UAAY,GAAK,EACzE,MAAMG,EAAoB,IAAMZ,KAAKE,YACrC,MAAMW,EACJb,KAAKC,OAASD,KAAKE,YAAcU,EAAoBD,EAAS,GAEhE,IAAIG,EAAOC,KAAKC,KAAMhB,KAAKC,MAAQ,IAAOD,KAAKE,aAC/CY,EAAOC,KAAKE,IAAIH,EAAMd,KAAKE,aAC3BY,EAAOC,KAAKG,IAAIJ,EAAM,GAEtB,OACEK,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,oBACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,GAAGhB,cAAkBN,KAAKQ,SAASH,KAC7Cc,EAAA,OAAAE,IAAA,2CACEC,MAAM,eACNC,KAAK,cACLC,MAAO,CAAEC,MAAO,GAAGZ,MAAgC,gBACpCA,EAA2B,gBAC5B,IAAG,gBACH,MAAK,kBACH,eAAc,aACnB,kBAGfM,EAAA,OAAAE,IAAA,2CAAKC,MAAO,GAAGf,KACbY,EAAA,QAAAE,IAAA,2CAAMK,GAAG,eAAeJ,MAAM,0BAC3BtB,KAAKG,OAEPH,KAAKI,UACJe,EAAA,QAAAE,IAAA,2CAAMC,MAAM,yBACTR,EAAI,IAAGd,KAAKE,c","ignoreList":[]}