@roadtrip/components 3.53.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-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":[]}