@roadtrip/components 3.42.0 → 3.43.0

package/dist/roadtrip/p-ca3460a4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["progressCss","RoadProgressStyle0","ProgressBar","constructor","hostRef","this","value","numbersteps","label","showstep","animation","light","fullwidth","color","render","valueRound","Math","round","h","Host","key","class","role","style","width"],"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  /**\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 should be 4 or 5.\n   */\n   @Prop() numbersteps?: '4' | '5' | 'default' = '4';\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: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'rating' = 'primary';\n\n  render() {\n\n    const valueRound = Math.round(this.value/5/5);\n    const fullwidth = this.fullwidth ? 'progress-element-info-full-width' : 'progress-element-info';\n    const light = this.light ? 'progress progress-light' : 'progress';\n    const animation = this.animation ? 'animation' : '';\n\n    return (\n      <Host class=\"progress-element\">\n        <div class={`${light} progress-${this.color} ${animation}`}>\n          <div class=\"progress-bar\" role=\"progressbar\" style={{ width: `${this.value}%` }} aria-valuenow={this.value} aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"progress bar\"></div>\n        </div>\n        <div class={`${fullwidth}`}>\n          <span class=\"progress-element-label\">{this.label}</span>\n          {this.showstep && <span class=\"progress-element-step\">{valueRound}/{this.numbersteps}</span>}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"6CAAA,MAAMA,EAAc,04CACpB,MAAAC,EAAeD,E,MCMFE,EAAW,MALxB,WAAAC,CAAAC,G,UAWUC,KAAAC,MAAgB,EAKfD,KAAAE,YAAsC,IAKpCF,KAAAG,MAAgB,GAKnBH,KAAAI,SAAoB,MAKlBJ,KAAAK,UAAqB,MAKvBL,KAAAM,MAAiB,MAKhBN,KAAAO,UAAqB,MAKtBP,KAAAQ,MAAwF,S,CAEhG,MAAAC,GAEE,MAAMC,EAAaC,KAAKC,MAAMZ,KAAKC,MAAM,EAAE,GAC3C,MAAMM,EAAYP,KAAKO,UAAY,mCAAqC,wBACxE,MAAMD,EAAQN,KAAKM,MAAQ,0BAA4B,WACvD,MAAMD,EAAYL,KAAKK,UAAY,YAAc,GAEjD,OACEQ,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,oBACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,GAAGV,cAAkBN,KAAKQ,SAASH,KAC7CQ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eAAeC,KAAK,cAAcC,MAAO,CAAEC,MAAO,GAAGnB,KAAKC,UAAU,gBAAiBD,KAAKC,MAAK,gBAAgB,IAAG,gBAAe,MAAK,aAAY,kBAE/JY,EAAA,OAAAE,IAAA,2CAAKC,MAAO,GAAGT,KACbM,EAAA,QAAAE,IAAA,2CAAMC,MAAM,0BAA0BhB,KAAKG,OAC1CH,KAAKI,UAAYS,EAAA,QAAAE,IAAA,2CAAMC,MAAM,yBAAyBN,EAAU,IAAGV,KAAKE,c","ignoreList":[]}